Separator

export function SeparatorSpecimen() {
  return (
    <Stage label="Separator · el total de un presupuesto y la barra del catálogo" tall wide>
      <div className="flex w-full max-w-[420px] flex-col gap-6 px-1 py-1">
        {/* saloneventos · presupuesto/[id]/page.tsx:495-536 */}
        <div className="flex flex-col gap-3 rounded-xl border border-content/10 bg-container p-4 sm:p-5">
          <div className="flex items-center justify-between gap-3">
            <span className="text-sm text-content/70">Precio por tarjeta</span>
            <span className="text-base font-bold tabular-nums text-content">$ 48.500,00</span>
          </div>
          <div className="flex items-center justify-between gap-3">
            <span className="text-sm text-content/70">Total de tarjetas</span>
            <span className="text-base font-bold tabular-nums text-content">120</span>
          </div>
          <Separator />
          <div className="flex items-center justify-between gap-3">
            <span className="text-sm font-semibold text-content/70">Total estimado</span>
            <span className="text-lg font-bold tabular-nums text-primary">$ 5.820.000,00</span>
          </div>
        </div>

        {/* dietaly · CatalogToolbar.tsx:443-455 */}
        <div className="flex flex-wrap items-center gap-2 rounded-lg border border-content/10 bg-container px-3 py-2.5">
          <span className="text-sm font-medium text-content">
            18 productos<span className="font-normal text-content/70"> (filtrado de 240)</span>
          </span>
          <Separator orientation="vertical" className="h-4" />
          <Badge color="primary" variant="soft" size="sm">
            Sin TACC
          </Badge>
          <Badge color="primary" variant="soft" size="sm">
            Panificación
          </Badge>
        </div>

        <p className="text-[11px] text-content/60">
          El vertical lleva `className=&quot;h-4&quot;` porque el componente es `h-full w-px`: sin un
          padre con altura mide cero. Es la línea exacta que escribe dietaly.
        </p>
      </div>
    </Stage>
  )
}

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