# Stat

Statistic card component for displaying metrics, counts, and key performance indicators with optional icons and descriptions.

## Tag

`Stat`

## Props

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `label` | `string \| VNode \| Signal` | `-` | Statistic label/title |
| `value` | `string \| number \| Signal` | `-` | Main statistic value |
| `desc` | `string \| VNode \| Signal` | `-` | Description or trend text |
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed in the figure area |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |

## Styling

Stat supports all **daisyUI Stat classes**:

| Category | Keywords | Description |
| :--- | :--- | :--- |
| Base | `stat` | Base stat container |
| Sections | `stat-figure`, `stat-title`, `stat-value`, `stat-desc` | Stat sub-components |
| Variants | `stat-compact` | Compact spacing variant |

> For further details, check the [daisyUI Stat Documentation](https://daisyui.com/components/stat) – Full reference for CSS classes.

## Live Examples

### Basic Stat

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
    Stat({
      label: 'Total Users',
      value: '2,345',
      desc: '↗︎ 120 new users this month'
    }),
    Stat({
      label: 'Revenue',
      value: '$45,678',
      desc: '↘︎ 5% decrease from last month'
    }),
    Stat({
      label: 'Conversion Rate',
      value: '3.45%',
      desc: '↗︎ 0.5% increase'
    })
  ]);
};
$mount(BasicDemo, '#demo-basic');
```

### With Icons

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
  </div>
</div>

```javascript
const IconsDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
    Stat({
      label: 'Active Users',
      value: '1,234',
      desc: 'Currently online',
      icon: Span({ class: 'text-2xl' }, '👥')
    }),
    Stat({
      label: 'New Orders',
      value: '89',
      desc: 'Today',
      icon: Span({ class: 'text-2xl' }, '📦')
    }),
    Stat({
      label: 'Pending Tasks',
      value: '23',
      desc: 'Need attention',
      icon: Span({ class: 'text-2xl' }, '⏳')
    })
  ]);
};
$mount(IconsDemo, '#demo-icons');
```

### Reactive Values

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const ReactiveDemo = () => {
  const count = $(0);
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
      Stat({
        label: 'Counter',
        value: () => count(),
        desc: 'Click the button to increase',
        icon: Span({ class: 'text-2xl' }, '🔢')
      }),
      Stat({
        label: 'Squared',
        value: () => Math.pow(count(), 2),
        desc: 'Square of counter',
        icon: Span({ class: 'text-2xl' }, '📐')
      })
    ]),
    Div({ class: 'flex gap-2 justify-center' }, [
      Button({ 
        class: 'btn btn-primary',
        onclick: () => count(count() + 1)
      }, 'Increment'),
      Button({ 
        class: 'btn btn-ghost',
        onclick: () => count(0)
      }, 'Reset')
    ])
  ]);
};
$mount(ReactiveDemo, '#demo-reactive');
```

### With Trend Indicators

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-trends" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
  </div>
</div>

```javascript
const TrendsDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
    Stat({
      label: 'Weekly Sales',
      value: '$12,345',
      desc: Div({ class: 'text-success' }, '↗︎ 15% increase'),
      icon: Span({ class: 'text-2xl' }, '📈')
    }),
    Stat({
      label: 'Bounce Rate',
      value: '42%',
      desc: Div({ class: 'text-error' }, '↘︎ 3% from last week'),
      icon: Span({ class: 'text-2xl' }, '📉')
    }),
    Stat({
      label: 'Avg. Session',
      value: '4m 32s',
      desc: Div({ class: 'text-warning' }, '↗︎ 12 seconds'),
      icon: Span({ class: 'text-2xl' }, '⏱️')
    })
  ]);
};
$mount(TrendsDemo, '#demo-trends');
```

### Multiple Stats in Row

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const MultipleDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
    Stat({
      label: 'Posts',
      value: '1,234',
      desc: 'Total content',
      icon: Span({ class: 'text-2xl' }, '📝')
    }),
    Stat({
      label: 'Comments',
      value: '8,901',
      desc: 'Engagement',
      icon: Span({ class: 'text-2xl' }, '💬')
    }),
    Stat({
      label: 'Likes',
      value: '12,345',
      desc: 'Reactions',
      icon: Span({ class: 'text-2xl' }, '❤️')
    }),
    Stat({
      label: 'Shares',
      value: '456',
      desc: 'Viral reach',
      icon: Span({ class: 'text-2xl' }, '🔄')
    })
  ]);
};
$mount(MultipleDemo, '#demo-multiple');
```

### Dashboard Example

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-dashboard" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const DashboardDemo = () => {
  const stats = $({
    users: 1245,
    revenue: 89342,
    orders: 342,
    satisfaction: 94
  });
  
  const updateStats = () => {
    stats({
      users: stats().users + Math.floor(Math.random() * 50),
      revenue: stats().revenue + Math.floor(Math.random() * 1000),
      orders: stats().orders + Math.floor(Math.random() * 20),
      satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2)
    });
  };
  
  return Div({ class: 'flex flex-col gap-6' }, [
    Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
      Stat({
        label: 'Total Users',
        value: () => stats().users.toLocaleString(),
        desc: 'Registered users',
        icon: Span({ class: 'text-2xl' }, '👥')
      }),
      Stat({
        label: 'Revenue',
        value: () => `$${stats().revenue.toLocaleString()}`,
        desc: 'This month',
        icon: Span({ class: 'text-2xl' }, '💰')
      }),
      Stat({
        label: 'Orders',
        value: () => stats().orders.toLocaleString(),
        desc: 'Completed',
        icon: Span({ class: 'text-2xl' }, '📦')
      }),
      Stat({
        label: 'Satisfaction',
        value: () => `${stats().satisfaction}%`,
        desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
        icon: Span({ class: 'text-2xl' }, '😊')
      })
    ]),
    Div({ class: 'flex justify-center' }, [
      Button({ 
        class: 'btn btn-primary',
        onclick: updateStats
      }, 'Refresh Data')
    ])
  ]);
};
$mount(DashboardDemo, '#demo-dashboard');
```

### All Variants

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
  </div>
</div>

```javascript
const VariantsDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
    Stat({
      label: 'Primary Stat',
      value: '1,234',
      desc: 'With description',
      icon: Span({ class: 'text-2xl' }, '⭐'),
      class: 'bg-primary/10 text-primary'
    }),
    Stat({
      label: 'Success Stat',
      value: '89%',
      desc: 'Success rate',
      icon: Span({ class: 'text-2xl' }, '✅'),
      class: 'bg-success/10 text-success'
    }),
    Stat({
      label: 'Warning Stat',
      value: '23',
      desc: 'Pending items',
      icon: Span({ class: 'text-2xl' }, '⚠️'),
      class: 'bg-warning/10 text-warning'
    }),
    Stat({
      label: 'Error Stat',
      value: '5',
      desc: 'Failed attempts',
      icon: Span({ class: 'text-2xl' }, '❌'),
      class: 'bg-error/10 text-error'
    })
  ]);
};
$mount(VariantsDemo, '#demo-variants');
```

### Compact Stats

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-compact" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
  </div>
</div>

```javascript
const CompactDemo = () => {
  return Div({ class: 'flex flex-wrap gap-4' }, [
    Stat({
      label: 'Views',
      value: '12.3K',
      class: 'stat-compact'
    }),
    Stat({
      label: 'Likes',
      value: '2,456',
      class: 'stat-compact'
    }),
    Stat({
      label: 'Comments',
      value: '345',
      class: 'stat-compact'
    }),
    Stat({
      label: 'Shares',
      value: '89',
      class: 'stat-compact'
    })
  ]);
};
$mount(CompactDemo, '#demo-compact');
```