# Stat

> Un KPI: etiqueta, número grande, variación y una línea de contexto.

```tsx
import { Stat } from "sebs7n-ui/stat"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### KPIs dentro de un Card

```tsx
import { Card, CardContent } from "sebs7n-ui/card"
import { Stat } from "sebs7n-ui/stat"

function Basico() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-3">
      <Card size="sm">
        <CardContent>
          <Stat label="Facturado" value="$ 1.284.000" delta="+12,4 %" trend="up" hint="vs. mes anterior" />
        </CardContent>
      </Card>
      <Card size="sm">
        <CardContent>
          <Stat label="Cobrado" value="$ 998.200" delta="+3,1 %" trend="up" hint="77,7 % del total" />
        </CardContent>
      </Card>
      <Card size="sm">
        <CardContent>
          <Stat label="Vencido" value="$ 142.900" delta="+8,0 %" trend="down" hint="6 facturas" />
        </CardContent>
      </Card>
    </div>
  )
}
```

## Props

### Stat

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `label` * | `React.ReactNode` | — | — |
| `value` * | `React.ReactNode` | — | — |
| `delta` | `React.ReactNode` | — | Variación respecto del período anterior ("+12%"). |
| `hint` | `React.ReactNode` | — | Contexto del número ("vs. mes anterior"). |
| `trend` | `"neutral" \| "up" \| "down"` | `"neutral"` | Color del delta: up = green-900, down = red-900, neutral = gray-900. |
| `className` | `string` | — | — |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| — | No es interactivo. |

## Accesibilidad

- La variación se lee junto al número: el `trend` pinta, no informa. Poné el signo en el texto (`+12 %`, `−3 %`).
- Sin `"use client"`: sirve en un Server Component.

## Reglas de uso

- Dentro de un `Card`, en una grilla de 2 a 4 columnas.
- `trend="up"` no siempre es bueno: en «tickets abiertos», subir es malo. Elegí el color por el significado, no por la flecha.

## Relacionados

[card](/docs/components/card.md) · [page-header](/docs/components/page-header.md)