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:
@@ -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>
|
||||
Reference in New Issue
Block a user