componente · @solu30/ui-kit/navigation

StepIndicator

Fila de pasos con su estado —hecho, activo, pendiente, error— en puntos, barra o números.

6 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
cmp-packages
gestorsalon
luigi

El componente, montado

Cargando el espécimen…

export function StepIndicatorMatrix() {
  const wizardSteps: Step[] = [
    { id: '1', label: 'Datos del evento', status: 'complete' },
    { id: '2', label: 'Salón y horario', status: 'complete' },
    { id: '3', label: 'Seña y contrato', status: 'active' },
    { id: '4', label: 'Confirmación', status: 'pending' },
  ]
  const errorSteps: Step[] = [
    { id: '1', status: 'complete' },
    { id: '2', status: 'error' },
    { id: '3', status: 'pending' },
  ]

  return (
    <Stage label="StepIndicator · numbered / bar / dots, con un paso en error" tall wide>
      <div className="flex w-full flex-col gap-6">
        <StepIndicator steps={wizardSteps} variant="numbered" size="md" showLabels />
        <StepIndicator steps={wizardSteps} variant="bar" size="sm" showLabels />
        <StepIndicator steps={errorSteps} variant="dots" size="lg" />
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · StepIndicatorMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { StepIndicator } from '@solu30/ui-kit/navigation'

Props

5 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
steps	sí	`Step[]`	Array of steps to display
variant	opcional	`"dots" \| "bar" \| "numbered"`	Visual variant
size	opcional	`"sm" \| "md" \| "lg"`	Size of the indicator
showLabels	opcional	`boolean`	Show labels below each step
className	opcional	`string`	Additional CSS class

Ejemplo del paquete

<StepIndicator
  steps={[
    { id: '1', label: 'Details', status: 'complete' },
    { id: '2', label: 'Payment', status: 'active' },
    { id: '3', label: 'Confirm', status: 'pending' },
  ]}
  variant="numbered"
  size="md"
  showLabels
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.