Date Picker & Stat Card

#Stat Card Component

The <x-ui.stat-card> component displays key metrics with trend indicators. 100% Tailwind CSS.

#Basic Usage

<x-ui.stat-card
    title="Total Revenue"
    value="2.450.000 FCFA"
    icon="wallet"
/>

#With Trend Indicator

<x-ui.stat-card
    title="New Users"
    value="1,247"
    icon="users"
    trend="up"
    trendValue="+12.5%"
    trendLabel="vs last month"
/>
 
<x-ui.stat-card
    title="Bounce Rate"
    value="32.5%"
    icon="trending-down"
    trend="down"
    trendValue="-5.2%"
/>

#Variants

{{-- Default --}}
<x-ui.stat-card title="Default" value="100" variant="default" />
 
{{-- Primary --}}
<x-ui.stat-card title="Primary" value="200" variant="primary" icon="star" />
 
{{-- Success --}}
<x-ui.stat-card title="Success" value="300" variant="success" icon="check" />
 
{{-- Warning --}}
<x-ui.stat-card title="Warning" value="400" variant="warning" icon="alert-triangle" />
 
{{-- Danger --}}
<x-ui.stat-card title="Danger" value="500" variant="danger" icon="x-circle" />

#With Extra Content (Slot)

<x-ui.stat-card
    title="Daily Sales"
    value="845.000 FCFA"
    icon="credit-card"
    trend="up"
    trendValue="+23%"
    variant="success"
>
    {{-- Progress bar --}}
    <div class="flex items-center justify-between text-sm">
        <span class="text-muted-foreground">Daily Goal</span>
        <span class="font-medium">1.000.000 FCFA</span>
    </div>
    <div class="mt-2 h-2 bg-muted rounded-full overflow-hidden">
        <div class="h-full bg-green-500" style="width: 84.5%"></div>
    </div>
</x-ui.stat-card>

#Props Reference

#Date Picker Component

The <x-ui.date-picker> component provides native date selection with Alpine.js. 100% Tailwind CSS, no external dependencies.

#Basic Usage

<x-ui.date-picker placeholder="Select a date" />

#With Livewire Binding

{{-- In your Livewire component --}}
public string $selectedDate = '';
 
{{-- In your blade view --}}
<x-ui.date-picker
    wire:model.live="selectedDate"
    placeholder="Choose a date"
/>

#With Date Constraints

{{-- Only future dates --}}
<x-ui.date-picker
    minDate="{{ now()->format('Y-m-d') }}"
    placeholder="Future dates only"
/>
 
{{-- Date range --}}
<x-ui.date-picker
    minDate="2025-01-01"
    maxDate="2025-12-31"
    placeholder="2025 only"
/>

#Sizes

<x-ui.date-picker size="sm" placeholder="Small" />
<x-ui.date-picker size="md" placeholder="Medium" />
<x-ui.date-picker size="lg" placeholder="Large" />

#Custom Icon

<x-ui.date-picker
    icon="calendar-check"
    placeholder="With custom icon"
/>

#Disabled State

<x-ui.date-picker
    :disabled="true"
    placeholder="Disabled"
/>

#Props Reference

#Events

{{-- Listen to change event --}}
<x-ui.date-picker
    @change="console.log($event.detail)"
/>
 
{{-- Listen to clear event --}}
<x-ui.date-picker
    @clear="handleClear()"
/>