Collapse

export function CollapseSpecimen() {
  const [filtros, setFiltros] = useState<string[]>(['Sin TACC'])

  const causasVacio = filtros
  const filtradosVacio = filtros.length > 0

  const toggle = (f: string) =>
    setFiltros((prev) => (prev.includes(f) ? prev.filter((x) => x !== f) : [...prev, f]))

  return (
    <Stage label="Collapse · el aviso de filtro vacío de la tabla de inventario de Luigi" tall wide>
      <div className="flex w-full max-w-[460px] flex-col gap-3 px-1 py-1">
        <div className="flex flex-wrap items-center gap-2">
          {['Sin TACC', 'Vegano', 'Sin lactosa'].map((f) => (
            <button
              key={f}
              type="button"
              onClick={() => toggle(f)}
              className={`rounded-full border px-2.5 py-1 text-[11px] transition-colors ${
                filtros.includes(f)
                  ? 'border-primary/40 bg-primary/10 text-content'
                  : 'border-content/10 bg-container text-content/70 hover:bg-upper'
              }`}
            >
              {f}
            </button>
          ))}
        </div>

        <Collapse open={causasVacio.length > 0 && filtradosVacio}>
          <p className="rounded-lg border border-content/10 bg-container p-3 text-sm text-content/70">
            {causasVacio.length === 1
              ? `Ningún artículo cae dentro de ${causasVacio[0]}.`
              : `Ningún artículo cae dentro de esta combinación: ${causasVacio.join(' + ')}.`}{' '}
            <button
              type="button"
              onClick={() => setFiltros([])}
              className="text-primary underline underline-offset-2"
            >
              Limpiar filtros
            </button>
          </p>
        </Collapse>

        <p className="text-[11px] text-content/60">
          Apagá todos los filtros y mirá la SALIDA: eso es lo que un `&&` pelado no puede hacer, y es
          el motivo textual por el que Luigi eligió esta pieza acá y no en el resto de la pantalla.
        </p>
      </div>
    </Stage>
  )
}

De specimens/animation.tsx · CollapseSpecimen: 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.