sebs7n-ui

Navegación

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.

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»).

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

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

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.

Teclado

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 Progress