import { TNode, Value, Renderable } from '@tempots/dom';
import { Placement } from '@tempots/ui';
import { FlyoutTrigger, FlyoutTriggerFunction } from './flyout';
export type MenuTrigger = FlyoutTrigger;
export interface MenuOptions {
    /** The menu items to display */
    items: () => TNode[];
    /** Placement of the menu relative to the trigger element */
    placement?: Value<Placement>;
    /** Delay in milliseconds before showing the menu on hover */
    showDelay?: Value<number>;
    /** Delay in milliseconds before hiding the menu after mouse leave */
    hideDelay?: Value<number>;
    /** Offset in pixels from the main axis */
    mainAxisOffset?: Value<number>;
    /** Offset in pixels from the cross axis */
    crossAxisOffset?: Value<number>;
    /** How to show the menu (accepts Flyout trigger or a custom trigger function) */
    showOn?: Value<MenuTrigger> | FlyoutTriggerFunction;
    /** Whether the menu can be closed with Escape key */
    closable?: Value<boolean>;
    /** Callback when menu is closed */
    onClose?: () => void;
    /** Callback when a menu item is selected */
    onAction?: (key: string) => void;
    /** Accessible label for the menu */
    ariaLabel?: Value<string>;
    /** ID of element that labels the menu */
    ariaLabelledBy?: Value<string>;
}
export interface MenuItemOptions {
    /** Unique identifier for the menu item */
    key?: Value<string>;
    /** The text content of the menu item */
    content: TNode;
    /** Content to display at the start of the menu item (icons, indicators) */
    startContent?: TNode;
    /** Content to display at the end of the menu item (shortcuts, badges) */
    endContent?: TNode;
    /** Whether the menu item is disabled */
    disabled?: Value<boolean>;
    /** Callback when the menu item is clicked */
    onClick?: () => void;
    /** ARIA label for accessibility */
    ariaLabel?: Value<string>;
    /** Submenu items for nested menus */
    submenu?: () => TNode[];
    /** Placement of submenu relative to parent item */
    submenuPlacement?: Value<Placement>;
}
export interface MenuSeparatorOptions {
    /** Optional label for the separator */
    label?: TNode;
}
/**
 * Menu component that provides a list of actions or options.
 * Built on top of the Flyout component for positioning and overlay behavior.
 *
 * Follows WAI-ARIA menu pattern with proper keyboard navigation and accessibility.
 *
 * @example
 * ```typescript
 * Button(
 *   { onClick: () => {} },
 *   'Actions',
 *   Menu({
 *     items: () => [
 *       MenuItem({ content: 'Edit', onClick: () => console.log('edit') }),
 *       MenuItem({ content: 'Delete', onClick: () => console.log('delete') }),
 *     ]
 *   })
 * )
 * ```
 */
export declare function Menu(options: MenuOptions): Renderable;
/**
 * MenuItem component for individual menu items.
 *
 * @example
 * ```typescript
 * MenuItem({
 *   content: 'Edit',
 *   startContent: Icon({ icon: 'edit' }),
 *   endContent: html.span('⌘E'),
 *   onClick: () => console.log('edit clicked')
 * })
 * ```
 */
export declare function MenuItem(options: MenuItemOptions): Renderable;
/**
 * MenuSeparator component for visual grouping of menu items.
 * Creates a visual divider between groups of menu items.
 *
 * @example
 * ```typescript
 * Menu({
 *   items: () => [
 *     MenuItem({ content: 'Cut' }),
 *     MenuItem({ content: 'Copy' }),
 *     MenuSeparator(),
 *     MenuItem({ content: 'Paste' }),
 *   ]
 * })
 * ```
 */
export declare function MenuSeparator(options?: MenuSeparatorOptions): Renderable;
