IconButton

export function IconButtonMatrix() {
  const [ultima, setUltima] = useState<string | null>(null)

  const CAJAS = [
    { id: 'jardin', nombre: 'Caja Salón Jardín', saldo: '$ 1.245.300' },
    { id: 'terraza', nombre: 'Caja Terraza norte', saldo: '$ 318.900' },
  ]

  return (
    <Stage label="IconButton · las acciones de cada caja en la tesorería de GestorSalon" tall wide>
      <div className="flex w-full max-w-[480px] flex-col gap-3 px-1 py-1">
        {CAJAS.map((c) => (
          <div
            key={c.id}
            className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-content/10 bg-container px-3 py-2.5"
          >
            <div className="flex min-w-0 flex-col">
              <span className="truncate text-xs font-medium text-content">{c.nombre}</span>
              <span className="text-[11px] tabular-nums text-content/60">Saldo · {c.saldo}</span>
            </div>
            <div className="flex shrink-0 items-center gap-1">
              <IconButton
                icon={IconPlus}
                aria-label={`Ingresar plata a ${c.nombre}`}
                tooltip="Ingresar plata"
                variant="ghost"
                size="sm"
                onClick={() => setUltima(`ingreso · ${c.nombre}`)}
              />
              <IconButton
                icon={IconSend}
                aria-label={`Sacar plata de ${c.nombre}`}
                tooltip="Sacar plata"
                variant="ghost"
                size="sm"
                onClick={() => setUltima(`egreso · ${c.nombre}`)}
              />
              <IconButton
                icon={IconPencil}
                aria-label={`Editar ${c.nombre}`}
                tooltip="Editar"
                variant="ghost"
                size="sm"
                onClick={() => setUltima(`editar · ${c.nombre}`)}
              />
            </div>
          </div>
        ))}
        {ultima && <p className="text-[11px] text-content/60">última acción: {ultima}</p>}
        <p className="text-[11px] text-content/60">
          Los seis botones tienen `tooltip` corto y `aria-label` largo con el nombre de la caja: sin
          eso, un lector de pantalla anuncia «Ingresar plata» seis veces sin decir a cuál.
        </p>
      </div>
    </Stage>
  )
}

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