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

@@ -0,0 +1,27 @@
@props([
'header' => null,
'footer' => null,
'actions' => null,
'padded' => true,
'hover' => true,
])
<div {{ $attributes->merge(['class' => 'card-glass' . ($hover ? ' card-glass-hover' : '')]) }}>
@if($header ?? false)
<div class="flex items-center justify-between gap-3 px-5 py-4 border-b border-neutral/30">
<div class="min-w-0 flex-1">{{ $header }}</div>
@if($actions ?? false)
<div class="flex items-center gap-2 shrink-0">{{ $actions }}</div>
@endif
</div>
@endif
<div class="{{ $padded ? 'p-5' : '' }}">
{{ $slot }}
</div>
@if($footer ?? false)
<div class="px-5 py-3 border-t border-neutral/30 text-sm text-base/80">
{{ $footer }}
</div>
@endif
</div>

View File

@@ -0,0 +1,51 @@
@props([
'label',
'value',
'delta' => null,
'deltaLabel' => null,
'trend' => null,
'icon' => null,
'href' => null,
])
@php
$trendClass = match($trend) {
'up' => 'text-success',
'down' => 'text-error',
'flat' => 'text-base/60',
default => 'text-base/60',
};
$trendIcon = match($trend) {
'up' => 'ri-arrow-up-line',
'down' => 'ri-arrow-down-line',
default => null,
};
$tag = $href ? 'a' : 'div';
@endphp
<{{ $tag }} @if($href) href="{{ $href }}" wire:navigate @endif
{{ $attributes->merge(['class' => 'card-glass card-glass-hover block p-5 group']) }}>
<div class="flex items-start justify-between gap-3">
<div class="min-w-0 flex-1">
<p class="text-xs font-semibold tracking-wider uppercase text-base/60">{{ $label }}</p>
<p class="mt-2 text-3xl font-bold tnum text-base">{{ $value }}</p>
@if($delta !== null || $deltaLabel)
<div class="mt-1 flex items-center gap-1.5 text-xs {{ $trendClass }}">
@if($trendIcon)
<x-dynamic-component :component="$trendIcon" class="size-3.5" />
@endif
@if($delta !== null)<span class="font-semibold tnum">{{ $delta }}</span>@endif
@if($deltaLabel)<span class="text-base/50">{{ $deltaLabel }}</span>@endif
</div>
@endif
</div>
@if($icon)
<div class="size-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0 group-hover:bg-primary/20 transition-colors">
<x-dynamic-component :component="$icon" class="size-5" />
</div>
@endif
</div>
@isset($slot)
@if(trim($slot) !== '')
<div class="mt-4">{{ $slot }}</div>
@endif
@endisset
</{{ $tag }}>