Grupo de botones.

<div class="ui-sample ui-actions" role="group" aria-label="Vista de resultados"><button class="btn is-active" type="button" aria-pressed="true">Tabla</button><button class="btn" type="button" aria-pressed="false">Mapa</button></div>

<div class="ui-sample ui-actions border border-slate-300 bg-white p-4 text-slate-950" role="group" aria-label="Vista de resultados"><button class="btn is-active border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-pressed="true">Tabla</button><button class="btn border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-pressed="false">Mapa</button></div>

import type { MouseEventHandler } from "react";

export interface ButtonGroupItem {
  label: string;
  /** Opción activa: se marca con `is-active` y `aria-pressed="true"`. */
  pressed?: boolean;
  disabled?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
}

export interface ButtonGroupProps {
  /** Nombre accesible del grupo (`aria-label`). */
  label?: string;
  items?: ButtonGroupItem[];
  /** Se llama al elegir una opción, con el ítem y su posición. */
  onSelect?: (item: ButtonGroupItem, index: number) => void;
  className?: string;
}

const BUTTON_GROUP_ITEMS: ButtonGroupItem[] = [
  { label: "Tabla", pressed: true },
  { label: "Mapa" },
];

/**
 * Grupo de botones: opciones alternativas de una misma decisión (vista en tabla o en mapa), una activa a la vez.
 *
 * Sin estado interno: la opción activa llega con `pressed` en el ítem, cada botón la expone con `aria-pressed` y `onSelect` avisa el cambio.
 *
 * @example <ButtonGroup label="Vista de resultados" items={[{ label: "Tabla" }, { label: "Mapa", pressed: true }]} onSelect={(_, i) => elegir(i)} />
 */
export function ButtonGroup({ label = "Vista de resultados", items = BUTTON_GROUP_ITEMS, onSelect, className }: ButtonGroupProps) {
  if (!items.length) return null;
  return (
    <div className={["ui-actions", className].filter(Boolean).join(" ")} role="group" aria-label={label}>
      {items.map((item, indice) => (
        <button
          key={indice}
          className={item.pressed ? "btn is-active" : "btn"}
          type="button"
          aria-pressed={Boolean(item.pressed)}
          disabled={item.disabled}
          onClick={
            item.onClick || onSelect
              ? (evento) => {
                  item.onClick?.(evento);
                  onSelect?.(item, indice);
                }
              : undefined
          }
        >
          {item.label}
        </button>
      ))}
    </div>
  );
}