Menú de acciones.

<details class="ui-sample ui-overlay-panel" data-dropdown-action><summary class="btn btn--secondary">Acciones</summary><div><button type="button">Duplicar</button><button type="button">Archivar</button><button type="button">Descargar</button></div></details>

<details class="ui-sample ui-overlay-panel border border-slate-300 bg-white p-4 text-slate-950" data-dropdown-action><summary class="btn btn--secondary">Acciones</summary><div><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Duplicar</button><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Archivar</button><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Descargar</button></div></details>

import type { MouseEventHandler, ReactEventHandler } from "react";

export interface DropdownActionItem {
  label: string;
  disabled?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
}

export interface DropdownActionProps {
  /** Texto del `<summary>` que despliega el menú. */
  triggerLabel?: string;
  /** Acciones del menú; sin ítems no se renderiza nada. */
  items?: DropdownActionItem[];
  /** Muestra el menú desplegado (atributo nativo `open` de `<details>`). */
  open?: boolean;
  /** Se llama cuando el menú se abre o se cierra. */
  onToggle?: ReactEventHandler<HTMLDetailsElement>;
  className?: string;
}

const DROPDOWN_ACTION_ITEMS: DropdownActionItem[] = [
  { label: "Duplicar" },
  { label: "Archivar" },
  { label: "Descargar" },
];

/**
 * Menú de acciones: agrupa bajo un botón las acciones secundarias sobre un elemento (duplicar, archivar, descargar).
 *
 * Usa `<details>` nativo y se abre sin JavaScript; `open` lo muestra desplegado.
 *
 * @example <DropdownAction triggerLabel="Acciones" items={[{ label: "Duplicar", onClick: duplicar }, { label: "Archivar", onClick: archivar }]} />
 * @example <DropdownAction open />
 */
export function DropdownAction({ triggerLabel = "Acciones", items = DROPDOWN_ACTION_ITEMS, open = false, onToggle, className }: DropdownActionProps) {
  if (!items.length) return null;
  return (
    <details className={["ui-overlay-panel", className].filter(Boolean).join(" ")} data-dropdown-action open={open} onToggle={onToggle}>
      <summary className="btn btn--secondary">{triggerLabel}</summary>
      <div>
        {items.map((item, indice) => (
          <button key={indice} type="button" disabled={item.disabled} onClick={item.onClick}>{item.label}</button>
        ))}
      </div>
    </details>
  );
}