Acciones masivas.

<div class="ui-sample ui-actions ui-bulk-actions" data-selection-count="3"><strong>3 filas seleccionadas</strong><button class="btn btn--secondary" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M4 20h16"></path></svg><span>Exportar</span></button><button class="btn btn--secondary" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M4 5h16v14H4zM8 9h8M8 13h5"></path></svg><span>Asignar</span></button><button class="btn btn--destructive" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 7h14M9 7V4h6v3M8 10v7M12 10v7M16 10v7"></path></svg><span>Eliminar</span></button><button class="btn btn--quiet" type="button"><svg class="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19"></path></svg><span>Cancelar selección</span></button></div>

<div class="ui-sample ui-actions ui-bulk-actions border border-slate-300 bg-white p-4 text-slate-950" data-selection-count="3"><strong>3 filas seleccionadas</strong><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"><svg class="ui-action-icon h-auto w-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M4 20h16"></path></svg><span>Exportar</span></button><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"><svg class="ui-action-icon h-auto w-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M4 5h16v14H4zM8 9h8M8 13h5"></path></svg><span>Asignar</span></button><button class="btn btn--destructive border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button"><svg class="ui-action-icon h-auto w-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 7h14M9 7V4h6v3M8 10v7M12 10v7M16 10v7"></path></svg><span>Eliminar</span></button><button class="btn btn--quiet border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button"><svg class="ui-action-icon h-auto w-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 5l14 14M19 5L5 19"></path></svg><span>Cancelar selección</span></button></div>

import type { MouseEventHandler } from "react";

/** Icono de una acción masiva. */
export type BulkActionsIcon = "export" | "assign" | "delete" | "clear";

export interface BulkActionsItem {
  label: string;
  /** Icono antes del texto; sin él, el botón lleva sólo el texto. */
  icon?: BulkActionsIcon;
  /** `destructive` para acciones que borran; `quiet` para salir de la selección. */
  tone?: "secondary" | "destructive" | "quiet";
  /** Deshabilita la acción cuando no aplica a la selección actual. */
  disabled?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
}

export interface BulkActionsProps {
  /** Cantidad de filas seleccionadas; va en `data-selection-count` y en el resumen. */
  count?: number;
  /** Resumen visible de la selección; por defecto «N filas seleccionadas». */
  label?: string;
  items?: BulkActionsItem[];
  className?: string;
}

const ICONOS: Record<BulkActionsIcon, string> = {
  export: "M12 3v12M7 10l5 5 5-5M4 20h16",
  assign: "M4 5h16v14H4zM8 9h8M8 13h5",
  delete: "M5 7h14M9 7V4h6v3M8 10v7M12 10v7M16 10v7",
  clear: "M5 5l14 14M19 5L5 19",
};

const ITEMS: BulkActionsItem[] = [
  { label: "Exportar", icon: "export" },
  { label: "Asignar", icon: "assign" },
  { label: "Eliminar", icon: "delete", tone: "destructive" },
  { label: "Cancelar selección", icon: "clear", tone: "quiet" },
];

/**
 * Barra de acciones sobre las filas seleccionadas de una tabla o lista, con el conteo de la selección.
 *
 * Muéstrala sólo cuando hay al menos una fila seleccionada; la acción que borra lleva `tone: "destructive"` y la que sale de la selección, `tone: "quiet"`.
 *
 * @example <BulkActions count={12} />
 * @example <BulkActions count={1} items={[{ label: "Exportar", icon: "export", onClick: exportar }]} />
 */
export function BulkActions({ count = 3, label, items = ITEMS, className }: BulkActionsProps) {
  const resumen = label ?? (count === 1 ? "1 fila seleccionada" : `${count} filas seleccionadas`);
  if (!resumen && !items.length) return null;
  return (
    <div className={["ui-actions ui-bulk-actions", className].filter(Boolean).join(" ")} data-selection-count={count}>
      {resumen ? <strong>{resumen}</strong> : null}
      {items.map((item, i) => (
        <button className={`btn btn--${item.tone ?? "secondary"}`} type="button" disabled={item.disabled} onClick={item.onClick} key={`${item.label}-${i}`}>
          {item.icon ? (
            <svg className="ui-action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><path d={ICONOS[item.icon]}></path></svg>
          ) : null}
          <span>{item.label}</span>
        </button>
      ))}
    </div>
  );
}