Stack

export function LayoutPrimitivesMatrix() {
  return (
    <Stage label="Stack e Inline · una fila de reserva armada sin una sola clase de flex" tall wide>
      <div className="flex w-full max-w-[620px] flex-col gap-5">
        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            El caso: la tarjeta de una reserva. Todo el layout sale de `Stack` e `Inline` — ni un
            `flex`, ni un `gap-*`, ni un `items-center` escrito a mano
          </span>
          <div className="rounded-xl border border-content/10 bg-container p-4">
            <Stack direction="vertical" gap="md">
              <Inline gap="sm" alignY="center" className="justify-between">
                <Inline gap="sm" alignY="center">
                  <AvatarInitials name="Ofelia Vera" size="sm" />
                  <Stack direction="vertical" gap="none">
                    <span className="text-sm font-medium text-content">Casamiento Off &amp; Vera</span>
                    <span className="text-[11px] text-content/60">Sábado 22 · Salón Jardín</span>
                  </Stack>
                </Inline>
                <StatusBadge status="active" size="sm" />
              </Inline>

              <Inline gap="md" alignY="center">
                <InlineStat label="Invitados" value="120" />
                <InlineStat label="Mesas" value="8" />
                <InlineStat label="Seña" value="30%" />
              </Inline>

              <Inline gap="xs" alignY="center" className="justify-end">
                <Button variant="ghost" size="xs">
                  Ver contrato
                </Button>
                <Button variant="secondary" size="xs">
                  Editar
                </Button>
              </Inline>
            </Stack>
          </div>
          <span className="text-[11px] text-content/60">
            `Stack` apila y `Inline` alinea en fila con corte de línea automático. Lo único que este
            bloque escribe a mano es `justify-between` y `justify-end`, que hoy no tienen prop
            propia en `Inline` — `Stack` sí tiene `justify`.
          </span>
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            gap · la escala entera, con las etiquetas de la barra de filtros de esa misma pantalla
          </span>
          {STACK_GAPS.map((g) => (
            <FilaEtiquetada key={g} etiqueta={g}>
              <Inline gap={g}>
                <Ladrillo>Reservas</Ladrillo>
                <Ladrillo>Salones</Ladrillo>
                <Ladrillo>Señas</Ladrillo>
              </Inline>
            </FilaEtiquetada>
          ))}
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            direction · lo único que `Inline` no puede cambiar, y la razón para elegir una u otra
          </span>
          {(['vertical', 'horizontal'] as const).map((d) => (
            <FilaEtiquetada key={d} etiqueta={d}>
              <Stack direction={d} gap="sm">
                <Ladrillo>Confirmadas</Ladrillo>
                <Ladrillo>Con seña</Ladrillo>
                <Ladrillo>Canceladas</Ladrillo>
              </Stack>
            </FilaEtiquetada>
          ))}
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            align · con tres alturas distintas, que es donde se nota. `stretch` sólo puede estirar lo
            que no trae altura propia — por eso el tercero no la declara
          </span>
          {STACK_ALIGN.map((a) => (
            <FilaEtiquetada key={a} etiqueta={a}>
              <Stack direction="horizontal" gap="sm" align={a} className="h-16">
                <Ladrillo className="h-6">Seña</Ladrillo>
                <Ladrillo className="h-10">Contrato</Ladrillo>
                <Ladrillo className="h-auto">Menú</Ladrillo>
              </Stack>
            </FilaEtiquetada>
          ))}
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            justify · reparto sobre el eje principal, con `gap=&quot;none&quot;` para que lo único
            que mueva las cajas sea el reparto
          </span>
          {STACK_JUSTIFY.map((j) => (
            <FilaEtiquetada key={j} etiqueta={j}>
              <Stack direction="horizontal" gap="none" justify={j}>
                <Ladrillo>12</Ladrillo>
                <Ladrillo>3</Ladrillo>
                <Ladrillo>1</Ladrillo>
              </Stack>
            </FilaEtiquetada>
          ))}
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            Inline · corta línea sola por default. El mismo contenido con y sin corte, en un
            contenedor angosto a propósito
          </span>
          <FilaEtiquetada etiqueta="wrap">
            <Inline gap="sm" className="w-[240px]">
              <Ladrillo>reservas</Ladrillo>
              <Ladrillo>salones</Ladrillo>
              <Ladrillo>señas</Ladrillo>
              <Ladrillo>contratos</Ladrillo>
            </Inline>
          </FilaEtiquetada>
          <FilaEtiquetada etiqueta="wrap ✗">
            <Inline gap="sm" wrap={false} className="w-[240px] overflow-hidden">
              <Ladrillo>reservas</Ladrillo>
              <Ladrillo>salones</Ladrillo>
              <Ladrillo>señas</Ladrillo>
              <Ladrillo>contratos</Ladrillo>
            </Inline>
          </FilaEtiquetada>
        </div>
      </div>
    </Stage>
  )
}

De specimens/display.tsx · LayoutPrimitivesMatrix: 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.