refactor: update UI components to shadcn-style

- Refactored select component to align with shadcn design principles.
- Updated server status indicator component for consistency with shadcn style.
- Modified spinner component to follow shadcn design guidelines.
- Enhanced stat card component with shadcn-inspired styles.
- Adjusted tab panel component to reflect shadcn design updates.
- Revamped table row and table data cell components to match shadcn aesthetics.
- Updated table header cell component for improved styling consistency.
- Refined table component to align with shadcn design principles.
- Enhanced tabs component with shadcn-inspired styles.
- Updated toggle component to follow shadcn design guidelines.
- Refactored tooltip component to align with shadcn design principles.
- Updated server card component to reflect shadcn-inspired design.

extensions/Servers/Proxmox/views/components/ui/toggle.blade.php

@@ -1,5 +1,5 @@
 {{--
-    Toggle/Switch Component - TailServer Theme
+    Toggle/Switch Component - shadcn-style
     
     Usage:
     <x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
@@ -11,14 +11,14 @@
     'disabled' => false,
 ])
 
-<label {{ $attributes->only('class')->class(['flex items-center justify-between gap-4 cursor-pointer group']) }}>
+<label {{ $attributes->only('class')->class(['flex items-center justify-between gap-4 cursor-pointer']) }}>
     @if($label || $description)
-        <div class="flex flex-col">
+        <div class="space-y-0.5">
             @if($label)
-                <span class="text-sm font-medium text-base transition-colors duration-200 group-hover:text-primary">{{ $label }}</span>
+                <span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{{ $label }}</span>
             @endif
             @if($description)
-                <span class="text-xs text-base/50 transition-colors duration-200 group-hover:text-base/70">{{ $description }}</span>
+                <p class="text-[0.8rem] text-muted-foreground">{{ $description }}</p>
             @endif
         </div>
     @endif
@@ -30,16 +30,14 @@
             class="sr-only peer"
         />
         <div @class([
-            'w-11 h-6 rounded-full transition-all duration-300 ease-out',
-            'bg-neutral/20 peer-checked:bg-primary peer-checked:shadow-md peer-checked:shadow-primary/30',
-            'peer-focus:ring-2 peer-focus:ring-primary/25 peer-focus:ring-offset-2 peer-focus:ring-offset-background',
-            'peer-disabled:opacity-50 peer-disabled:cursor-not-allowed',
-            'group-hover:bg-neutral/30 peer-checked:group-hover:bg-primary/90',
+            'inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-150',
+            'bg-input peer-checked:bg-primary',
+            'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background',
+            'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         ])></div>
         <div @class([
-            'absolute top-0.5 left-0.5 size-5 bg-white rounded-full shadow-md transition-all duration-300 ease-out',
-            'peer-checked:translate-x-5 peer-checked:shadow-lg',
-            'group-hover:scale-105 peer-active:scale-95',
+            'pointer-events-none absolute top-0.5 left-0.5 block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-150',
+            'peer-checked:translate-x-4',
         ])></div>
     </div>
 </label>