CollapsibleSection

export function CollapsibleSectionSpecimen() {
  const [forzarAjustes, setForzarAjustes] = useState(false)

  return (
    <Stage label="CollapsibleSection · tesorería y la ficha de producto de GestorSalon" tall wide>
      <div className="flex w-full max-w-[520px] flex-col gap-3 px-1 py-1">
        <CollapsibleSection
          title="Desglose por medio"
          subtitle="De qué medios de pago se compone el saldo"
          defaultOpen={false}
        >
          <div className="flex flex-col gap-1.5 py-1 text-xs text-content/70">
            <span>Efectivo · $ 412.300</span>
            <span>Transferencia · $ 1.845.000</span>
            <span>Tarjeta de débito · $ 233.900</span>
          </div>
        </CollapsibleSection>

        <CollapsibleSection title="Administrar ubicación" subtitle="Caja Salón Jardín" defaultOpen={false}>
          <div className="flex flex-wrap items-center gap-2 px-1 pb-2 pt-1">
            <Button variant="outline" size="sm" icon={IconPencil}>
              Editar nombre / tipo
            </Button>
            <Button variant="outline" size="sm">
              Archivar
            </Button>
          </div>
        </CollapsibleSection>

        <CollapsibleSection
          title="Ajustes de stock"
          icon={<IconSettings className="h-4 w-4" />}
          defaultOpen={false}
          forceOpen={forzarAjustes}
        >
          <div className="flex flex-col gap-1.5 py-1 text-xs text-content/70">
            <span>Unidad · kilogramo</span>
            <span>Stock mínimo · 12</span>
            <span className="text-red">Existencias · el valor no puede ser negativo</span>
          </div>
        </CollapsibleSection>

        <button
          type="button"
          onClick={() => setForzarAjustes((v) => !v)}
          className="self-start rounded-md border border-content/10 bg-inner px-2.5 py-1 font-mono text-[11px] text-content/60 transition-colors hover:text-content"
        >
          ↻ simular error de validación (forceOpen={String(!forzarAjustes)})
        </button>
        <p className="text-[11px] text-content/60">
          `forceOpen` es lo que usa la ficha de producto para reabrir la sección cuando un campo de
          adentro falla la validación: sin eso, el error queda escondido detrás de un plegado.
        </p>
      </div>
    </Stage>
  )
}

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