SectionHeader

export function SectionHeaderMatrix() {
  return (
    <Stage label="SectionHeader · las cinco zonas llenas, en sus dos tamaños, + SectionEyebrow" tall wide>
      <div className="flex w-full max-w-[560px] flex-col gap-6">
        <div className="flex flex-col gap-2">
          <span className="font-mono text-[11px] text-content/50">size=&quot;default&quot;</span>
          <SectionHeader
            icon={IconClipboard}
            title="Reservas del mes"
            badge={
              <Badge color="success" variant="soft" size="sm">
                12 confirmadas
              </Badge>
            }
            description="Se actualiza sola cuando entra una seña o se cancela una fecha."
            action={
              <Button variant="secondary" size="sm">
                Exportar
              </Button>
            }
          />
        </div>

        <div className="flex flex-col gap-2">
          <span className="font-mono text-[11px] text-content/50">
            size=&quot;hero&quot; + as=&quot;h1&quot;, con SectionEyebrow encima y children abajo
          </span>
          <div className="flex flex-col gap-2">
            <SectionEyebrow>Panel del salón</SectionEyebrow>
            <SectionHeader
              size="hero"
              as="h1"
              icon={IconChart}
              title="Agosto cerró en verde"
              description="Tres fechas más que julio y ninguna cancelación sobre la fecha."
              action={
                <Button variant="primary" size="sm">
                  Ver el detalle
                </Button>
              }
            >
              <div className="mt-2 flex flex-wrap gap-2">
                <Badge color="info" variant="tinted" size="sm">
                  16 eventos
                </Badge>
                <Badge color="warning" variant="tinted" size="sm">
                  2 señas por acreditar
                </Badge>
              </div>
            </SectionHeader>
          </div>
        </div>

        <div className="flex flex-col gap-2">
          <span className="font-mono text-[11px] text-content/50">SectionEyebrow · sus dos variantes</span>
          <div className="flex flex-wrap items-center gap-4">
            <SectionEyebrow>badge (default)</SectionEyebrow>
            <SectionEyebrow variant="text">text</SectionEyebrow>
          </div>
        </div>
      </div>
    </Stage>
  )
}

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