# Timeline

> Una lista de eventos en el tiempo con la fila de iCloud: título 17, detalle 14 gris, la hora a la derecha y el punto del color del evento unidos por una línea, agrupados por día.

```tsx
import { Timeline, TimelineGroup, TimelineItem } from "sebs7n-ui/timeline"
```

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

## Ejemplos

### Actividad de una factura

Título en 17, detalle en 14 gris, la hora a la derecha y el punto del color del evento, unidos por una línea. Los días van con la cabecera de grupo de Drive.

```tsx
import { BellIcon, MailIcon } from "lucide-react"
import { Button } from "sebs7n-ui"
import { Timeline, TimelineGroup, TimelineItem } from "sebs7n-ui/timeline"

function Basico() {
  return (
    <Timeline aria-label="Actividad de la factura A-0012" className="w-full max-w-md">
      <TimelineGroup title="Hoy">
        <TimelineItem dateTime="2026-09-29T16:40" description="Transferencia de Acme S.A. · $ 128.400" dot="green" time="16:40" title="Pago recibido" />
        <TimelineItem dateTime="2026-09-29T09:05" description="Vence el 30 de septiembre" icon={<BellIcon />} time="09:05" title="Recordatorio enviado" />
      </TimelineGroup>
      <TimelineGroup title="Lunes 28 de septiembre">
        <TimelineItem
          actions={
            <Button size="sm" variant="plain">
              Reenviar
            </Button>
          }
          dateTime="2026-09-28T18:22"
          description="La casilla pagos@acme.example no existe"
          dot="red"
          time="18:22"
          title="El correo rebotó"
        />
        <TimelineItem dateTime="2026-09-28T18:20" description="A pagos@acme.example" icon={<MailIcon />} time="18:20" title="Factura enviada" />
        <TimelineItem dateTime="2026-09-28T18:12" description="A-0012 · $ 128.400" dot="brand" time="18:12" title="Factura emitida" />
      </TimelineGroup>
    </Timeline>
  )
}
```

## Props

### Timeline

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### TimelineGroup

Hereda las props de `<li>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `title` * | `React.ReactNode` | — | El día, en 19/600. Nombra la lista de adentro. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

`*` obligatoria.

### TimelineItem

Hereda las props de `<li>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `title` * | `React.ReactNode` | — | Qué pasó, en 17. |
| `actions` | `React.ReactNode` | — | Botones o links debajo del detalle. |
| `dateTime` | `string` | — | La fecha en formato de máquina para el `<time>`. |
| `description` | `React.ReactNode` | — | El detalle, en 14 gris. |
| `dot` | `"brand" \| "gray" \| "red" \| "amber" \| "green" \| "blue" \| "teal" \| "purple" \| "pink"` | `"gray"` | El color del punto (la paleta de `Badge`). Por defecto, gris. |
| `icon` | `React.ReactNode` | — | Un ícono en lugar del punto, en un círculo de 24. |
| `time` | `React.ReactNode` | — | La hora o la fecha que se ve, a la derecha. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Solo recorre lo interactivo de adentro (las acciones): la lista en sí no es un control. |

## Accesibilidad

- Es una `<ol>`: **nombre obligatorio** con `aria-label` («Actividad de la factura A-0012»). El lector cuenta los eventos.
- Cada día (`TimelineGroup`) tiene su propia lista, nombrada por la cabecera.
- La hora es un `<time>` con `dateTime` en formato de máquina: pasalo, que «10:12» solo no dice de qué día.
- El punto, el ícono y la línea son decorativos (`aria-hidden`): el tipo de evento tiene que estar en el título, no solo en el color.

## Reglas de uso

- **Para el historial de algo**: la actividad de una factura, los cambios de un cliente, los pagos de una cuenta. Para una lista que se elige o se abre, `List`.
- El orden lo decide la app (lo más nuevo arriba es lo usual); la línea une los eventos en el orden del DOM.
- `dot` con la paleta de `Badge` para el tipo de evento (verde pagado, rojo error), `icon` cuando el tipo se lee mejor con un glifo.
- Sin estado: va en un Server Component. Solo por subpath (`sebs7n-ui/timeline`).

## Relacionados

[list-row](/docs/components/list-row.md) · [badge](/docs/components/badge.md)