"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { Menu, MenuTrigger, MenuContent as InternalMenuContent, MenuItem as InternalMenuItem, MenuSeparator as InternalMenuSeparator, MenuGroup as InternalMenuGroup, MenuLabel, } from "../internal/menu.js";
/**
 * Compound menu component for resource item actions.
 *
 * Built on top of the SDK's internal Base UI menu primitives with
 * opinionated conventions for resource management UX:
 * - Icon + label + optional shortcut hint layout
 * - Destructive variant for dangerous actions
 * - Grouped sections with labels
 * - Keyboard navigation (arrows, Enter, Esc) via Base UI
 * - Portal rendering with theme inheritance
 *
 * @example
 * ```tsx
 * <ActionMenu>
 *   <ActionMenu.Trigger>
 *     <button aria-label="Agent actions">
 *       <MoreHorizontal className="h-4 w-4" />
 *     </button>
 *   </ActionMenu.Trigger>
 *   <ActionMenu.Content>
 *     <ActionMenu.Item icon={<Edit />} onSelect={handleEdit}>
 *       Edit
 *     </ActionMenu.Item>
 *     <ActionMenu.Item icon={<Copy />} onSelect={handleDuplicate}>
 *       Duplicate
 *     </ActionMenu.Item>
 *     <ActionMenu.Separator />
 *     <ActionMenu.Item
 *       icon={<Trash2 />}
 *       variant="destructive"
 *       onSelect={handleDelete}
 *     >
 *       Delete
 *     </ActionMenu.Item>
 *   </ActionMenu.Content>
 * </ActionMenu>
 * ```
 */
function ActionMenuRoot({ children }) {
    return _jsx(Menu, { children: children });
}
function Trigger({ children, className, "aria-label": ariaLabel = "Actions", }) {
    return (_jsx(MenuTrigger, { className: cn("inline-flex items-center justify-center rounded-md p-1", "text-muted-foreground hover:text-foreground hover:bg-accent", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "data-popup-open:bg-accent data-popup-open:text-foreground", className), "aria-label": ariaLabel, children: children }));
}
function Content({ children, align = "end", className }) {
    return (_jsx(InternalMenuContent, { align: align, className: cn("min-w-44", className), children: children }));
}
function Item({ children, onSelect, icon, shortcut, variant = "default", disabled, className, }) {
    return (_jsxs(InternalMenuItem, { variant: variant, disabled: disabled, onClick: onSelect, className: cn("justify-between", className), children: [_jsxs("span", { className: "flex items-center gap-2", children: [icon, _jsx("span", { children: children })] }), shortcut && (_jsx("kbd", { className: "ml-auto text-[11px] tracking-widest text-muted-foreground-subtle", children: shortcut }))] }));
}
function Separator({ className }) {
    return _jsx(InternalMenuSeparator, { className: className });
}
function Group({ children, label, className }) {
    return (_jsxs(InternalMenuGroup, { className: className, children: [label && _jsx(MenuLabel, { children: label }), children] }));
}
/**
 * Public compound component for resource item action menus.
 *
 * Subcomponents:
 * - `ActionMenu.Trigger` — the element that opens the menu
 * - `ActionMenu.Content` — the menu panel container
 * - `ActionMenu.Item` — a single action (with icon, shortcut, destructive variant)
 * - `ActionMenu.Separator` — a visual divider between items/groups
 * - `ActionMenu.Group` — a labeled section of items
 */
export const ActionMenu = Object.assign(ActionMenuRoot, {
    Trigger,
    Content,
    Item,
    Separator,
    Group,
});
//# sourceMappingURL=ActionMenu.js.map