Demo Step Item
Átomo de un paso en el stepper de demostración. Renderiza un ícono flanqueado por dos líneas conectoras (LeftLine y RightLine), un título y una descripción. El color de líneas e iconografía varía según el estado active / default.
Estados
active muestra la paleta primaria completa. default la muestra atenuada para pasos futuros.
Carga de documentación
El propietario carga la obra y la documentación.
Revisión
El arquitecto revisa, aprueba o solicita correcciones.
Colores de Línea
Las líneas laterales aceptan primary-500 (activa/completada) o primary-100 (futura). Omitir la prop oculta la línea — usá esto en el primer y último ítem.
Primer paso
Sin línea izquierda.
Paso intermedio
Ambas líneas en primary-500.
Paso siguiente
Línea izquierda activa, derecha inactiva.
Último paso
Sin línea derecha.
Íconos Personalizados
La prop icon acepta cualquier ReactNode — lucide-react, SVGs propios o imágenes. El wrapper aplica currentColor al contenedor para que los SVGs con stroke/fill=currentColor hereden el color del estado.
Control de obra
Portería controla ingresos y el arquitecto realiza inspecciones.
Registro del proceso
Todo queda registrado por propiedad automáticamente.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
icon | ReactNode | — | Elemento de ícono renderizado en el centro del paso. |
title | string | — | Título del paso. |
description | string | — | Descripción breve del paso. |
state | "active" | "default" | "default" | Estado visual. active usa paleta primaria completa; default la atenúa. |
leftLineColor | "primary-500" | "primary-100" | undefined | undefined | Color de la línea conectora izquierda. undefined oculta la línea (primer ítem). |
rightLineColor | "primary-500" | "primary-100" | undefined | undefined | Color de la línea conectora derecha. undefined oculta la línea (último ítem). |
className | string | undefined | Clases adicionales para el contenedor raíz. |