# Stepper

> Los pasos de un asistente: completos en el acento con el tilde, el actual con un aro de acento, los que faltan en gris y el que tiene un error en rojo, unidos por una línea de 1 px.

```tsx
import { Stepper } from "sebs7n-ui/stepper"
```

## Ejemplos

### Una factura nueva

Los pasos de un asistente: completos en el acento con el tilde, el actual con el aro, los que faltan en gris. Con `onStepClick` se vuelve a un paso completo.

```tsx
import { Button } from "sebs7n-ui"
import { Stepper } from "sebs7n-ui/stepper"
import { useState } from "react"

function Basico() {
  const [actual, setActual] = useState(1)
  return (
    <div className="flex w-full max-w-xl flex-col gap-6">
      <Stepper aria-label="Nueva factura" current={actual} onStepClick={setActual} steps={PASOS} />
      <div className="flex justify-between">
        <Button disabled={actual === 0} onClick={() => setActual(actual - 1)} variant="secondary">
          Anterior
        </Button>
        <Button disabled={actual === PASOS.length - 1} onClick={() => setActual(actual + 1)}>
          Siguiente
        </Button>
      </div>
    </div>
  )
}
```

### Vertical, con íconos y un error

En columna para un costado. Un paso con `status="error"` va en rojo y lo dice («Impuestos, con error»).

```tsx
import { Stepper } from "sebs7n-ui/stepper"
import { UserIcon, ListIcon, PercentIcon, SendIcon } from "lucide-react"

function Vertical() {
  return (
    <Stepper
      aria-label="Emisión de la factura"
      className="max-w-xs"
      current={3}
      orientation="vertical"
      steps={[
        { title: "Cliente", description: "Acme S.A.", icon: <UserIcon /> },
        { title: "Ítems", description: "3 servicios", icon: <ListIcon /> },
        { title: "Impuestos", description: "Falta la condición frente al IVA", icon: <PercentIcon />, status: "error" },
        { title: "Enviar", description: "Por correo al cliente", icon: <SendIcon /> },
      ]}
    />
  )
}
```

## Props

### Stepper

Hereda las props de `<ol>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `current` * | `number` | — | El índice del paso actual, en base 0. Los de antes quedan completos y los de después pendientes. |
| `steps` * | `StepperStep[]` | — | Los pasos: `title`, `description`, `icon` (en lugar del número) y `status` (`complete`, `current`, `upcoming`, `error`) para forzar el estado. |
| `aria-label` | `string` | — | Nombre accesible del elemento. |
| `labels` | `Partial<Labels["stepper"]>` | — | Textos: `label` (el nombre de la lista), `complete`, `upcoming`, `error`. |
| `onStepClick` | `(index: number) => void` | — | Vuelve botones los pasos completos y los que tienen error; se llama con el índice. |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | `horizontal` (default) o `vertical`. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Con `onStepClick`, recorre los pasos completos (son botones). Sin él, el Stepper no tiene paradas: es información. |
| Enter / Espacio | En un paso completo, vuelve a él. |

## Accesibilidad

- Es una `<ol>` con nombre (`aria-label`, por defecto «Pasos»): el lector cuenta los pasos («2 de 4»).
- El actual lleva `aria-current="step"`. Los demás dicen su estado en texto `sr-only` después del título («Cliente, completado», «Impuestos, con error»): el color y el tilde no son la única señal.
- El círculo (número, tilde o ícono) y el conector son decorativos (`aria-hidden`).
- Los colores: el número del actual va en `brand-ink` (4,5:1), el tilde en `brand-contrast` sobre el acento, el error en blanco sobre `red-800`.

## Reglas de uso

- **Para un proceso de 3 a 6 pasos con orden**: emitir una factura, dar de alta un cliente. Si los pasos se pueden hacer en cualquier orden, son `Tabs`.
- El Stepper no navega solo: `current` lo maneja la pantalla, y los botones Anterior/Siguiente van aparte.
- `onStepClick` deja volver a un paso completo; a uno pendiente no se salta.
- `vertical` para un costado o un teléfono con descripciones largas; `horizontal` (default) arriba del formulario.
- Solo por subpath (`sebs7n-ui/stepper`): no está en el barrel, por peso.

## Relacionados

[tabs](/docs/components/tabs.md) · [progress](/docs/components/progress.md)