WizardProgressBar

export function WizardMatrix() {
  const [paso, setPaso] = useState(2)
  const total = TITULOS_WIZARD.length

  return (
    <Stage label="WizardProgressBar + WizardStepHeader + WizardNavFooter · el asistente completo" tall wide>
      <div className="flex w-full flex-col gap-5 rounded-xl border border-content/10 bg-container p-5">
        {/* `stepLabel` es un PREFIJO: la barra imprime «2 of 3» por su cuenta al lado.
            Pasarle «Paso 2 de 3» deja «Paso 2 de 3 2 of 3» en pantalla — se vio en la captura. */}
        <WizardProgressBar step={paso} total={total} stepLabel={TITULOS_WIZARD[paso - 1]} />
        {paso === 1 ? (
          <WizardStepHeader
            icon={CalendarDays}
            title="Fecha del evento"
            subtitle="Elegí el día y el turno. Después vemos el salón."
          />
        ) : paso === 2 ? (
          <WizardStepHeader
            icon={Users}
            title="Invitados y salón"
            subtitle="Con la cantidad de invitados filtramos los salones que entran."
          />
        ) : (
          <WizardStepHeader
            icon={FileSignature}
            title="Seña y contrato"
            subtitle="Último paso: el contrato se genera con lo que cargaste arriba."
          />
        )}
        <WizardNavFooter
          onBack={() => setPaso((p) => Math.max(1, p - 1))}
          onNext={() => setPaso((p) => Math.min(total, p + 1))}
          isFirstStep={paso === 1}
          isSubmitStep={paso === total}
          submitLabel="Generar contrato"
        />
      </div>
    </Stage>
  )
}

De specimens/input.tsx · WizardMatrix: 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.