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.
This commit is contained in:
2026-04-22 10:40:33 -04:00
parent a910d41e6e
commit 8baf7d6c7d
19 changed files with 859 additions and 82 deletions

View File

@@ -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>