feat: Enhance UI components and add command palette

- Updated dropdown component styles and transitions for improved UX.
- Refined checkbox, input, radio, select, and textarea components with consistent error messaging and styling.
- Introduced a new card component for better layout options.
- Added a stat card component for displaying metrics with trends.
- Implemented a command palette for global search and navigation, accessible via Cmd/Ctrl+K.
- Enhanced modal and navigation components with new styles and transitions.
- Improved layout styles for better responsiveness and visual appeal.

themes/lucentui/views/components/form/checkbox.blade.php

@@ -8,10 +8,10 @@
     <div class="relative">
         <input type="checkbox" name="{{ $name }}" id="{{ $id ?? $name }}"
             {{ $attributes->except(['label', 'name', 'id', 'class', 'divClass', 'required']) }}
-            class="peer form-checkbox size-5 text-primary rounded border-2 border-neutral bg-background-secondary/50 
-                   focus:ring-2 focus:ring-primary/30 focus:ring-offset-0 focus:outline-none
-                   checked:bg-primary checked:border-primary
-                   hover:border-primary/50 transition-all duration-200 cursor-pointer
+            class="peer form-checkbox size-5 text-primary rounded border-2 border-neutral/70 bg-background-secondary/50 
+                   focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 focus:outline-none
+                   checked:bg-primary checked:border-primary checked:shadow-[0_0_12px_-2px_hsl(var(--color-primary)/0.55)]
+                   hover:border-primary/60 transition-all duration-200 cursor-pointer
                    appearance-none" />
         <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-3 text-white pointer-events-none opacity-0 scale-50 peer-checked:opacity-100 peer-checked:scale-100 transition-all duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
             <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
@@ -26,6 +26,6 @@
     </label>
 
     @error($name)
-        <p class="text-red-500 text-xs ml-2">{{ $message }}</p>
+        <p class="text-error text-xs ml-2">{{ $message }}</p>
     @enderror
 </div>

themes/lucentui/views/components/form/input.blade.php

@@ -6,13 +6,13 @@
                 class="text-sm font-bold text-base">
                 {{ $label }}
                 @if ($required && !$hideRequiredIndicator)
-                    <span class="text-red-500">*</span>
+                    <span class="text-error">*</span>
                 @endif
             </label>
         </legend>
     @endif
     <input type="{{ $type ?? 'text' }}" id="{{ $id ?? $name }}" name="{{ $name }}"
-        class="block w-full text-sm text-base bg-background-secondary/40 border border-neutral/60 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary hover:border-neutral transition-all duration-300 ease-in-out disabled:bg-background-secondary/30 disabled:cursor-not-allowed {{ $class ?? '' }} @if ($type !== 'color') px-2.5 py-2.5 @endif"
+        class="block w-full text-sm text-base bg-background-secondary/40 border border-neutral/60 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary hover:border-neutral/90 transition-all duration-300 ease-in-out disabled:bg-background-secondary/30 disabled:cursor-not-allowed placeholder:text-base/40 {{ $class ?? '' }} @if ($type !== 'color') px-3 py-2.5 @endif"
         placeholder="{{ $placeholder ?? ($label ?? '') }}"
         @if ($dirty && isset($attributes['wire:model'])) wire:dirty.class="!border-yellow-600" @endif
         {{ $attributes->except(['placeholder', 'label', 'id', 'name', 'type', 'class', 'divClass', 'required', 'hideRequiredIndicator', 'dirty']) }} @required($required) />

themes/lucentui/views/components/form/radio.blade.php

@@ -14,7 +14,7 @@
             <label for="{{ $name }}" class="text-sm font-bold text-color-base">
                 {{ $label }}
                 @if ($required && !$hideRequiredIndicator)
-                    <span class="text-red-500">*</span>
+                    <span class="text-error">*</span>
                 @endif
             </label>
         </legend>
@@ -30,10 +30,10 @@
                         <input type="radio" id="{{ $name }}_{{ $key }}" name="{{ $name }}"
                             value="{{ gettype($options) == 'array' ? $option : $key }}" 
                             {{ ($multiple && $selected ? in_array($key, $selected) : $selected==$option) ? 'checked' : '' }}
-                            class="peer form-radio size-5 text-primary border-2 border-neutral/60 bg-background-secondary/40 
+                            class="peer form-radio size-5 text-primary border-2 border-neutral/70 bg-background-secondary/40 
                                    focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 focus:outline-none
-                                   checked:bg-primary checked:border-primary
-                                   hover:border-primary/50 transition-all duration-200 cursor-pointer
+                                   checked:bg-primary checked:border-primary checked:shadow-[0_0_12px_-2px_hsl(var(--color-primary)/0.55)]
+                                   hover:border-primary/60 transition-all duration-200 cursor-pointer
                                    appearance-none rounded-full" />
                         <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-2 bg-white rounded-full pointer-events-none opacity-0 scale-0 peer-checked:opacity-100 peer-checked:scale-100 transition-all duration-200"></div>
                     </div>
@@ -46,6 +46,6 @@
     </div>
 
     @error($name)
-        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
+        <p class="text-error text-xs mt-1">{{ $message }}</p>
     @enderror
 </fieldset>

themes/lucentui/views/components/form/select.blade.php

@@ -15,7 +15,7 @@
             class="text-sm font-bold text-base">
             {{ $label }}
             @if ($required && !$hideRequiredIndicator)
-            <span class="text-red-500">*</span>
+            <span class="text-error">*</span>
             @endif
         </label>
     </legend>
@@ -41,6 +41,6 @@
     @endif
 
     @error($name)
-    <p class="text-red-500 text-xs">{{ $message }}</p>
+    <p class="text-error text-xs mt-1">{{ $message }}</p>
     @enderror
 </fieldset>

themes/lucentui/views/components/form/textarea.blade.php

@@ -17,7 +17,7 @@
             class="text-sm text-primary-100 absolute -translate-y-1/2 start-1 ml-1 bg-primary-800 px-2 rounded-md">
             {{ $label }}
             @if ($required && !$hideRequiredIndicator)
-            <span class="text-red-500">*</span>
+            <span class="text-error">*</span>
             @endif
         </label>
     </legend>
@@ -28,6 +28,6 @@
         wire:dirty.class="!border-yellow-600" @endif {{ $attributes->except(['placeholder', 'label', 'id', 'name', 'type', 'class', 'divClass', 'required', 'hideRequiredIndicator', 'dirty']) }}
         @required($required)>{{ $slot }}</textarea>
     @error($name)
-    <p class="text-red-500 text-xs">{{ $message }}</p>
+    <p class="text-error text-xs mt-1">{{ $message }}</p>
     @enderror
 </fieldset>