Toolbar.

<div class="ui-sample ui-actions" role="toolbar" aria-label="Edición del documento"><button class="btn btn--icon" type="button" aria-label="Negrita" title="Negrita" aria-pressed="false"><b aria-hidden="true">N</b></button><button class="btn btn--icon" type="button" aria-label="Cursiva" title="Cursiva" aria-pressed="false"><i aria-hidden="true">K</i></button><span role="separator" aria-orientation="vertical"></span><button class="btn btn--secondary" type="button">Insertar enlace</button></div>

<div class="ui-sample ui-actions border border-slate-300 bg-white p-4 text-slate-950" role="toolbar" aria-label="Edición del documento"><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Negrita" title="Negrita" aria-pressed="false"><b aria-hidden="true">N</b></button><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Cursiva" title="Cursiva" aria-pressed="false"><i aria-hidden="true">K</i></button><span role="separator" aria-orientation="vertical"></span><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Insertar enlace</button></div>

import type { MouseEventHandler } from "react";

export interface ToolbarButtonItem {
  type?: "button";
  /** Nombre de la acción; con `icon` va en `aria-label` y `title`, y el botón muestra sólo el icono. */
  label: string;
  /** Carácter que reemplaza al texto visible (N, K). */
  icon?: string;
  /** Envuelve el icono en `<b>` o `<i>` para anticipar el formato que aplica. */
  iconStyle?: "bold" | "italic";
  /** Estado de un botón que se activa y desactiva (`aria-pressed` e `is-active`); sin valor, el botón no es conmutable. */
  pressed?: boolean;
  disabled?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
}

export interface ToolbarSeparatorItem {
  type: "separator";
}

export type ToolbarItem = ToolbarButtonItem | ToolbarSeparatorItem;

export interface ToolbarProps {
  /** Nombre accesible de la barra (`aria-label`). */
  label?: string;
  /** Botones y separadores, en orden. */
  items?: ToolbarItem[];
  className?: string;
}

const HERRAMIENTAS: ToolbarItem[] = [
  { label: "Negrita", icon: "N", iconStyle: "bold", pressed: false },
  { label: "Cursiva", icon: "K", iconStyle: "italic", pressed: false },
  { type: "separator" },
  { label: "Insertar enlace" },
];

function ToolbarIcono({ icon, iconStyle }: Pick<ToolbarButtonItem, "icon" | "iconStyle">) {
  if (iconStyle === "bold") return <b aria-hidden="true">{icon}</b>;
  if (iconStyle === "italic") return <i aria-hidden="true">{icon}</i>;
  return <span aria-hidden="true">{icon}</span>;
}

/**
 * Barra de herramientas: acciones de edición sobre un mismo objeto (negrita, cursiva, insertar enlace), agrupadas en una fila.
 *
 * Los botones conmutables exponen su estado con `aria-pressed` y la clase `is-active`; un ítem `{ type: "separator" }` divide grupos.
 *
 * @example <Toolbar label="Edición del documento" items={[{ label: "Negrita", icon: "N", iconStyle: "bold", pressed: true }, { type: "separator" }, { label: "Insertar enlace" }]} />
 */
export function Toolbar({ label = "Edición del documento", items = HERRAMIENTAS, className }: ToolbarProps) {
  if (!items.length) return null;
  return (
    <div className={["ui-actions", className].filter(Boolean).join(" ")} role="toolbar" aria-label={label}>
      {items.map((item, indice) =>
        item.type === "separator" ? (
          <span key={indice} role="separator" aria-orientation="vertical"></span>
        ) : item.icon ? (
          <button
            key={indice}
            className={item.pressed ? "btn btn--icon is-active" : "btn btn--icon"}
            type="button"
            aria-label={item.label}
            title={item.label}
            aria-pressed={item.pressed}
            disabled={item.disabled}
            onClick={item.onClick}
          >
            <ToolbarIcono icon={item.icon} iconStyle={item.iconStyle} />
          </button>
        ) : (
          <button
            key={indice}
            className={item.pressed ? "btn btn--secondary is-active" : "btn btn--secondary"}
            type="button"
            aria-pressed={item.pressed}
            disabled={item.disabled}
            onClick={item.onClick}
          >
            {item.label}
          </button>
        ),
      )}
    </div>
  );
}