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

@@ -17,18 +17,18 @@
x-transition:leave-end="opacity-0">
{{-- Backdrop overlay --}}
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm"
<div class="absolute inset-0 bg-background/80 backdrop-blur-md"
@click="{{ $closable ? 'open = false' : '' }}"></div>
{{-- Modal content --}}
<div class="relative px-6 py-4 w-full mx-2 md:mx-auto text-left bg-background-secondary rounded-xl shadow-2xl border border-neutral/50 {{ $width }}"
<div class="relative px-6 py-4 w-full mx-2 md:mx-auto text-left glass-panel shadow-floating {{ $width }}"
x-show="open"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-100"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-[0.96] translate-y-2"
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
x-transition:leave="transition ease-in duration-120"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
x-transition:leave-end="opacity-0 scale-[0.96]"
@click.stop>
<div class="flex justify-between items-center">
<h2 class="text-2xl font-semibold text-color-base">{{ $title }}</h2>