@accelint/design-toolkit/dist/components/menu/index.d.ts

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

import * as react_aria_components from 'react-aria-components';
import { MenuTrigger, TextProps, SeparatorProps, ContextValue } from 'react-aria-components';
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { MenuProps, MenuItemProps, MenuSectionProps } from './types.js';
import 'tailwind-variants';
import '../icon/types.js';
import './styles.js';

declare const MenuContext: react.Context<ContextValue<MenuProps<unknown>, HTMLDivElement>>;
declare function MenuSection<T extends object>({ children, classNames, items, title, ...rest }: MenuSectionProps<T>): react_jsx_runtime.JSX.Element;
declare namespace MenuSection {
    var displayName: string;
}
declare function MenuSeparator({ className, ...rest }: SeparatorProps): react_jsx_runtime.JSX.Element;
declare namespace MenuSeparator {
    var displayName: string;
}
declare function MenuLabel({ children, className, ...rest }: TextProps): react_jsx_runtime.JSX.Element;
declare namespace MenuLabel {
    var displayName: string;
}
declare function MenuDescription({ children, className, ...rest }: TextProps): react_jsx_runtime.JSX.Element;
declare namespace MenuDescription {
    var displayName: string;
}
declare function MenuItem({ children, classNames, color, ...rest }: MenuItemProps): react_jsx_runtime.JSX.Element;
declare namespace MenuItem {
    var displayName: string;
    var Label: typeof MenuLabel;
    var Description: typeof MenuDescription;
}
/**
 * Menu - A dropdown menu component with keyboard navigation and selection
 *
 * Provides accessible dropdown menu functionality with support for single and
 * multiple selection modes. Includes sections, separators, and submenu support
 * with comprehensive keyboard navigation and ARIA compliance.
 *
 * @example
 * // Basic menu with trigger
 * <Menu.Trigger>
 *   <Button>Open Menu</Button>
 *   <Menu>
 *     <Menu.Item>Edit</Menu.Item>
 *     <Menu.Item>Copy</Menu.Item>
 *     <Menu.Item>Delete</Menu.Item>
 *   </Menu>
 * </Menu.Trigger>
 *
 * @example
 * // Menu with sections and separators
 * <Menu.Trigger>
 *   <Button>Open</Button>
 *   <Menu>
 *     <Menu.Section>
 *       <Menu.Item>New File</Menu.Item>
 *       <Menu.Item>Open File</Menu.Item>
 *     </Menu.Section>
 *
 *     <Menu.Separator />
 *
 *     <Menu.Item>Settings</Menu.Item>
 *   </Menu>
 * </Menu.Trigger>
 *
 * @example
 * // Menu with selection
 * <Menu.Trigger>
 *   <Button>Group</Button>
 *   <Menu selectionMode='multiple'>
 *     <Menu.Item>Option 1</Menu.Item>
 *     <Menu.Item>Option 2</Menu.Item>
 *   </Menu>
 * </Menu.Trigger>
 *
 * @example
 * // Menu with submenu
 * <Menu.Trigger>
 *   <Button>Actions</Button>
 *   <Menu>
 *     <Menu.Item>New File</Menu.Item>
 *     <Menu.Submenu>
 *       <Menu.Item>Export</Menu.Item>
 *       <Menu>
 *         <Menu.Item>Export as PDF</Menu.Item>
 *         <Menu.Item>Export as CSV</Menu.Item>
 *         <Menu.Item>Export as JSON</Menu.Item>
 *       </Menu>
 *     </Menu.Submenu>
 *     <Menu.Item>Delete</Menu.Item>
 *   </Menu>
 * </Menu.Trigger>
 */
declare function Menu<T extends object>({ ref, ...props }: MenuProps<T>): react_jsx_runtime.JSX.Element;
declare namespace Menu {
    var displayName: string;
    var Trigger: typeof MenuTrigger;
    var Submenu: (props: react_aria_components.SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
    var Item: typeof MenuItem;
    var Separator: typeof MenuSeparator;
    var Section: typeof MenuSection;
}

export { Menu, MenuContext };