@ltht-react/menu 2.0.168 → 2.0.170

package/lib/index.d.ts

@@ -1,3 +1,5 @@
-import ActionMenu, { ActionMenuOption } from './molecules/action-menu';
+import ActionMenu, { ActionMenuOption, DefaultTrigger } from './molecules/action-menu';
+import { Menu, MenuItem } from './molecules/menu';
 export default ActionMenu;
-export { ActionMenuOption };
+export { Menu, MenuItem };
+export { ActionMenuOption, DefaultTrigger };

package/lib/index.js

@@ -1,8 +1,33 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var action_menu_1 = __importDefault(require("./molecules/action-menu"));
+exports.DefaultTrigger = exports.MenuItem = exports.Menu = void 0;
+var action_menu_1 = __importStar(require("./molecules/action-menu"));
+Object.defineProperty(exports, "DefaultTrigger", { enumerable: true, get: function () { return action_menu_1.DefaultTrigger; } });
+var menu_1 = require("./molecules/menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return menu_1.Menu; } });
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return menu_1.MenuItem; } });
 exports.default = action_menu_1.default;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;AAAA,wEAAsE;AAEtE,kBAAe,qBAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAsF;AAK3D,+FALY,4BAAc,OAKZ;AAJzC,yCAAiD;AAGxC,qFAHA,WAAI,OAGA;AAAE,yFAHA,eAAQ,OAGA;AADvB,kBAAe,qBAAU,CAAA"}

package/lib/molecules/action-menu.d.ts

@@ -1,27 +1,30 @@
-import { ButtonProps } from '@ltht-react/button/lib/atoms/button';
-import { IconProps } from '@ltht-react/icon';
 import { FC, HTMLAttributes } from 'react';
-declare const ActionMenu: FC<IProps>;
+import { IconProps } from '@ltht-react/icon';
+import { ButtonProps } from '@ltht-react/button';
 interface IProps extends HTMLAttributes<HTMLButtonElement> {
     actions: ActionMenuOption[];
     menuButtonOptions?: IconButtonMenuProps | ButtonMenuProps;
-    popupStyle?: React.CSSProperties;
-    popupPlacement?: 'bottom-start' | 'right-start';
+    disabled?: boolean;
 }
 interface IconButtonMenuProps {
     type: 'icon';
     iconProps: IconProps;
     text?: string;
+    disabled?: boolean;
 }
 interface ButtonMenuProps {
     type: 'button';
     buttonProps: ButtonProps;
     text: string;
 }
-export interface ActionMenuOption {
+export interface ActionMenuOption extends HTMLAttributes<HTMLButtonElement> {
     text: string;
-    clickHandler: () => void;
+    clickHandler?: VoidFunction;
     leftIcon?: IconProps;
     rightIcon?: IconProps;
+    disabled?: boolean;
+    actions?: ActionMenuOption[];
 }
+export declare const DefaultTrigger: IconButtonMenuProps;
+declare const ActionMenu: FC<IProps>;
 export default ActionMenu;

package/lib/molecules/action-menu.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -52,79 +25,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultTrigger = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var button_1 = __importDefault(require("@ltht-react/button/lib/atoms/button"));
-var icon_1 = __importStar(require("@ltht-react/icon"));
-var styles_1 = require("@ltht-react/styles");
-var focus_trap_react_1 = __importDefault(require("focus-trap-react"));
-var react_1 = require("react");
-var react_popper_1 = require("react-popper");
+var icon_1 = __importDefault(require("@ltht-react/icon"));
 var utils_1 = require("@ltht-react/utils");
-var defaultMenuButtonProps = {
+var menu_1 = require("./menu");
+exports.DefaultTrigger = {
     type: 'icon',
     iconProps: {
         type: 'ellipsis-vertical',
         size: 'large',
     },
 };
-var StyledUnorderedList = styled_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"], ["\n  ", "\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"])), styles_1.CSS_RESET);
-var StyledListItem = styled_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  background-color: 'white';\n  padding: 0.5rem;\n  line-height: 1em;\n  display: flex;\n  border-radius: 4px;\n\n  &:hover {\n    background: ", ";\n    cursor: pointer;\n    color: white;\n  }\n"], ["\n  ", "\n  background-color: 'white';\n  padding: 0.5rem;\n  line-height: 1em;\n  display: flex;\n  border-radius: 4px;\n\n  &:hover {\n    background: ", ";\n    cursor: pointer;\n    color: white;\n  }\n"])), styles_1.CSS_RESET, styles_1.BTN_COLOURS.PRIMARY.VALUE);
-var StyledListItemIcon = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-basis: 25%;\n"], ["\n  flex-basis: 25%;\n"])));
-var StyledListItemContent = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  text-align: left;\n"], ["\n  flex: 1;\n  text-align: left;\n"])));
-var StyledCard = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  display: inline-block;\n  min-width: 10rem;\n  z-index: 1;\n  background: white;\n  border-radius: 4px;\n  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.04), 0px 4px 5px rgba(0, 0, 0, 0.06), 0px 2px 4px -1px rgba(0, 0, 0, 0.09);\n"], ["\n  ", "\n  display: inline-block;\n  min-width: 10rem;\n  z-index: 1;\n  background: white;\n  border-radius: 4px;\n  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.04), 0px 4px 5px rgba(0, 0, 0, 0.06), 0px 2px 4px -1px rgba(0, 0, 0, 0.09);\n"])), styles_1.CSS_RESET);
-var StyledRightIcon = (0, styled_1.default)(icon_1.default)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: 0.5rem;\n  margin-left: 3rem;\n"], ["\n  margin-right: 0.5rem;\n  margin-left: 3rem;\n"])));
-var StyledLeftIcon = (0, styled_1.default)(icon_1.default)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 0.5rem;\n  margin-left: 0.5rem;\n"], ["\n  margin-right: 0.5rem;\n  margin-left: 0.5rem;\n"])));
-var StyledMenuButtonWrapper = styled_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
 var ActionMenu = function (_a) {
-    var actions = _a.actions, _b = _a.menuButtonOptions, menuButtonOptions = _b === void 0 ? defaultMenuButtonProps : _b, _c = _a.id, id = _c === void 0 ? 'action-menu-button' : _c, _d = _a.popupStyle, popupStyle = _d === void 0 ? {} : _d, _e = _a.popupPlacement, popupPlacement = _e === void 0 ? 'bottom-start' : _e, rest = __rest(_a, ["actions", "menuButtonOptions", "id", "popupStyle", "popupPlacement"]);
+    var _b = _a.id, id = _b === void 0 ? 'action-menu-button' : _b, actions = _a.actions, disabled = _a.disabled, _c = _a.menuButtonOptions, menuButtonOptions = _c === void 0 ? __assign(__assign({}, exports.DefaultTrigger), { disabled: disabled }) : _c, rest = __rest(_a, ["id", "actions", "disabled", "menuButtonOptions"]);
     var menuItemIdPrefix = id ? "".concat(id, "-") : '';
-    var popperRef = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)(null), popperElement = _f[0], setPopperElement = _f[1];
-    var _g = (0, react_1.useState)(null), containerElement = _g[0], setContainerElement = _g[1];
-    var popper = (0, react_popper_1.usePopper)(popperRef.current, popperElement, {
-        placement: popupPlacement,
-        strategy: 'fixed',
-    });
-    var closePopper = function () {
-        setShowMenu(false);
-    };
-    var _h = (0, react_1.useState)(false), showMenu = _h[0], setShowMenu = _h[1];
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if ((_a = containerElement === null || containerElement === void 0 ? void 0 : containerElement.parentElement) === null || _a === void 0 ? void 0 : _a.style) {
-            containerElement.parentElement.style.zIndex = showMenu
-                ? "".concat((0, styles_1.getZIndex)(styles_1.PopUp))
-                : "".concat((0, styles_1.getZIndex)(styles_1.TableDataWithPopUp));
-        }
-    }, [containerElement, showMenu]);
-    var menuButtonClickHandler = function () {
-        setShowMenu(!showMenu);
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { ref: setContainerElement, children: (0, jsx_runtime_1.jsx)(focus_trap_react_1.default, { active: showMenu, focusTrapOptions: {
-                tabbableOptions: {
-                    displayCheck: 'none',
-                },
-                initialFocus: false,
-                allowOutsideClick: false,
-                clickOutsideDeactivates: true,
-                onDeactivate: closePopper,
-            }, children: (0, jsx_runtime_1.jsxs)(StyledMenuButtonWrapper, { ref: popperRef, children: [menuButtonOptions.type === 'icon' && ((0, jsx_runtime_1.jsx)(icon_1.IconButton, __assign({ iconProps: menuButtonOptions.iconProps, text: menuButtonOptions.text }, rest, { onClick: function (e) {
-                            e.stopPropagation();
-                            menuButtonClickHandler();
-                        }, id: id, "data-testid": id }))), menuButtonOptions.type === 'button' && ((0, jsx_runtime_1.jsx)(button_1.default, __assign({}, menuButtonOptions.buttonProps, rest, { onClick: function (e) {
-                            e.stopPropagation();
-                            menuButtonClickHandler();
-                        }, id: id, "data-testid": id, children: menuButtonOptions.text }))), showMenu && ((0, jsx_runtime_1.jsx)(StyledCard, __assign({ tabIndex: -1, ref: setPopperElement, style: __assign(__assign({}, popper.styles.popper), popupStyle) }, popper.attributes.popper, { children: (0, jsx_runtime_1.jsx)(StyledUnorderedList, { role: "menu", "aria-labelledby": id, children: actions.map(function (action, idx) {
-                                var textId = (0, utils_1.stringToHtmlId)(action.text);
-                                var actionMenuItemId = "".concat(menuItemIdPrefix, "action-menu-item-").concat(textId, "-").concat(idx);
-                                return ((0, jsx_runtime_1.jsxs)(StyledListItem, { "data-testid": actionMenuItemId, id: actionMenuItemId, role: "menuitem", onClick: function (e) {
-                                        e.stopPropagation();
-                                        menuButtonClickHandler();
-                                        action.clickHandler();
-                                    }, children: [(0, jsx_runtime_1.jsx)(StyledListItemIcon, { children: action.leftIcon && (0, jsx_runtime_1.jsx)(StyledLeftIcon, __assign({}, action.leftIcon)) }), (0, jsx_runtime_1.jsx)(StyledListItemContent, { children: action.text }), (0, jsx_runtime_1.jsx)(StyledListItemIcon, { children: action.rightIcon && (0, jsx_runtime_1.jsx)(StyledRightIcon, __assign({}, action.rightIcon)) })] }, "menu-action-".concat(idx)));
-                            }) }) })))] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(menu_1.Menu, __assign({ rootTrigger: menuButtonOptions, "data-testid": id }, rest, { children: actions.map(function (action, index) { return renderAction(menuItemIdPrefix, action, index); }) })));
+};
+var renderAction = function (idPrefix, _a, index) {
+    var text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, clickHandler = _a.clickHandler, onClick = _a.onClick, actions = _a.actions, rest = __rest(_a, ["text", "leftIcon", "rightIcon", "clickHandler", "onClick", "actions"]);
+    var textId = (0, utils_1.stringToHtmlId)(text);
+    var actionMenuItemId = "".concat(idPrefix, "action-menu-item-").concat(textId, "-").concat(index);
+    if (!!(actions === null || actions === void 0 ? void 0 : actions.length) && actions.length > 0) {
+        return ((0, jsx_runtime_1.jsx)(menu_1.Menu, __assign({ id: actionMenuItemId, "data-testid": actionMenuItemId, label: text, leftIcon: leftIcon ? (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, leftIcon)) : null, rightIcon: rightIcon ? (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, rightIcon)) : null }, rest, { children: actions.map(function (action, index) { return renderAction(actionMenuItemId, action, index); }) }), actionMenuItemId));
+    }
+    return ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, __assign({ id: actionMenuItemId, "data-testid": actionMenuItemId, label: text, leftIcon: leftIcon ? (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, leftIcon)) : null, rightIcon: rightIcon ? (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, rightIcon)) : null, onClick: clickHandler !== null && clickHandler !== void 0 ? clickHandler : onClick }, rest), actionMenuItemId));
 };
 exports.default = ActionMenu;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 //# sourceMappingURL=action-menu.js.map

package/lib/molecules/action-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-menu.js","sourceRoot":"","sources":["../../src/molecules/action-menu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"action-menu.js","sourceRoot":"","sources":["../../src/molecules/action-menu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,0DAAkD;AAClD,2CAAkD;AAGlD,+BAAuC;AA8B1B,QAAA,cAAc,GAAwB;IACjD,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE;QACT,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,OAAO;KACd;CACF,CAAA;AAED,IAAM,UAAU,GAAe,UAAC,EAM/B;IALC,IAAA,UAAyB,EAAzB,EAAE,mBAAG,oBAAoB,KAAA,EACzB,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,yBAAmD,EAAnD,iBAAiB,yCAAQ,sBAAc,KAAE,QAAQ,UAAA,QAAE,EAChD,IAAI,cALuB,kDAM/B,CADQ;IAEP,IAAM,gBAAgB,GAAG,EAAE,CAAC,CAAC,CAAC,UAAG,EAAE,MAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAE3C,OAAO,CACL,uBAAC,WAAI,aAAC,WAAW,EAAE,iBAAiB,iBAAe,EAAE,IAAM,IAAI,cAC5D,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,YAAY,CAAC,gBAAgB,EAAE,MAAM,EAAE,KAAK,CAAC,EAA7C,CAA6C,CAAC,IACzE,CACR,CAAA;AACH,CAAC,CAAA;AAED,IAAM,YAAY,GAAG,UACnB,QAAgB,EAChB,EAAwF,EACxF,KAAa;IADX,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAApE,uEAAsE,CAAF;IAGpE,IAAM,MAAM,GAAG,IAAA,sBAAc,EAAC,IAAI,CAAC,CAAA;IACnC,IAAM,gBAAgB,GAAG,UAAG,QAAQ,8BAAoB,MAAM,cAAI,KAAK,CAAE,CAAA;IAEzE,IAAI,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAA,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC5C,OAAO,CACL,uBAAC,WAAI,aAEH,EAAE,EAAE,gBAAgB,iBACP,gBAAgB,EAC7B,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,uBAAC,cAAI,eAAK,QAAQ,EAAI,CAAC,CAAC,CAAC,IAAI,EAClD,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAC,cAAI,eAAK,SAAS,EAAI,CAAC,CAAC,CAAC,IAAI,IACjD,IAAI,cAEP,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,YAAY,CAAC,gBAAgB,EAAE,MAAM,EAAE,KAAK,CAAC,EAA7C,CAA6C,CAAC,KARzE,gBAAgB,CAShB,CACR,CAAA;IACH,CAAC;IAED,OAAO,CACL,uBAAC,eAAQ,aAEP,EAAE,EAAE,gBAAgB,iBACP,gBAAgB,EAC7B,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,uBAAC,cAAI,eAAK,QAAQ,EAAI,CAAC,CAAC,CAAC,IAAI,EAClD,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAC,cAAI,eAAK,SAAS,EAAI,CAAC,CAAC,CAAC,IAAI,EACrD,OAAO,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,OAAO,IAC5B,IAAI,GAPH,gBAAgB,CAQrB,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,UAAU,CAAA"}

package/lib/molecules/menu.d.ts

@@ -0,0 +1,193 @@
+/**
+ * @packageDocumentation
+ *
+ * @module Menu
+ *
+ * This module provides a fully accessible, composable Menu component system using React and Floating UI.
+ * It supports root menus, nested submenus, keyboard navigation, focus management, and customizable triggers.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { Menu, MenuItem } from './menu'
+ * import { Icon } from '@ltht-react/icon'
+ *
+ * <Menu
+ *   label="Options"
+ *   leftIcon={<Icon name="menu" />}
+ * >
+ *   <MenuItem label="Profile" />
+ *   <MenuItem label="Settings" />
+ *   <Menu label="More" leftIcon={<Icon name="more" />}>
+ *     <MenuItem label="Subitem 1" />
+ *     <MenuItem label="Subitem 2" />
+ *   </Menu>
+ *   <MenuItem label="Logout" />
+ * </Menu>
+ * ```
+ *
+ * - Use `<Menu>` as the root or nested menu container.
+ * - Use `<MenuItem>` for selectable menu items.
+ * - Pass `label`, `leftIcon`, and `rightIcon` props for customization.
+ * - For root menus, you can use the `rootTrigger` prop to provide a custom button or icon trigger.
+ * - Supports keyboard navigation, focus management, and accessibility out of the box.
+ */
+import { ExtendedRefs } from '@floating-ui/react';
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { IconProps } from '@ltht-react/icon';
+import { ButtonProps } from '@ltht-react/button';
+/**
+ * Props for the MenuComponent, which renders a menu trigger and its associated menu.
+ * @property label - Optional label for the menu trigger.
+ * @property leftIcon - Optional icon to display on the left of the label.
+ * @property rightIcon - Optional icon to display on the right of the label.
+ * @property nested - If true, indicates this menu is a nested submenu.
+ * @property children - The menu items or submenus to render.
+ * @property rootTrigger - The trigger component for the root menu (icon or button).
+ * @property disabled - If true, disables the menu trigger.
+ */
+interface MenuProps {
+    label?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    nested?: boolean;
+    children?: ReactNode;
+    rootTrigger?: RootMenuTrigger;
+    disabled?: boolean;
+}
+/**
+ * RootMenuTrigger defines the type of trigger for the root menu.
+ * Can be either IconButtonMenuProps or ButtonMenuProps.
+ */
+type RootMenuTrigger = IconButtonMenuProps | ButtonMenuProps;
+/**
+ * Props for an icon button menu trigger.
+ * @property type - Must be 'icon'.
+ * @property iconProps - Props for the icon to display.
+ * @property text - Optional text to display alongside the icon.
+ * @property disabled - If true, disables the icon button.
+ */
+interface IconButtonMenuProps {
+    type: 'icon';
+    iconProps: IconProps;
+    text?: string;
+    disabled?: boolean;
+}
+/**
+ * Props for a button menu trigger.
+ * @property type - Must be 'button'.
+ * @property buttonProps - Props for the button component.
+ * @property text - Text to display on the button.
+ */
+interface ButtonMenuProps {
+    type: 'button';
+    buttonProps: ButtonProps;
+    text: string;
+}
+/**
+ * MenuComponent renders a menu trigger (button or icon) and its associated floating menu.
+ * Handles open/close state, keyboard navigation, focus management, and nested submenus.
+ * Integrates with Floating UI for positioning and accessibility.
+ * @param props - MenuProps and HTML button attributes.
+ * @param forwardedRef - Ref to the trigger element.
+ * @returns The menu trigger and its floating menu.
+ */
+export declare const MenuComponent: React.ForwardRefExoticComponent<MenuProps & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+interface MenuTriggerProps extends React.HTMLAttributes<HTMLElement> {
+    refs: ExtendedRefs<HTMLButtonElement>;
+    isNested: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    label?: string;
+    rootTrigger?: RootMenuTrigger;
+}
+/**
+ * MenuTrigger renders the trigger element for a menu or submenu.
+ * It handles both root and nested menu triggers, supporting icon buttons, standard buttons, or custom triggers.
+ * For nested menus or when no rootTrigger is provided, it renders a styled menu trigger with optional icons and label.
+ * For root menus, it renders either an IconButton or Button based on the rootTrigger type.
+ *
+ * @param props - MenuTriggerProps including refs, trigger configuration, icons, label, and additional HTML attributes.
+ * @param props.refs - Floating UI and list item refs for positioning and focus management.
+ * @param props.isNested - Indicates if this trigger is for a nested submenu.
+ * @param props.leftIcon - Optional icon to display on the left of the label.
+ * @param props.rightIcon - Optional icon to display on the right of the label.
+ * @param props.label - Optional label text for the trigger.
+ * @param props.rootTrigger - Configuration for the root menu trigger (icon or button).
+ * @param forwardedRef - Ref to the trigger element.
+ * @returns The trigger element for the menu or submenu.
+ */
+export declare const MenuTrigger: React.ForwardRefExoticComponent<MenuTriggerProps & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for a MenuItem component.
+ * @property label - Optional label for the menu item.
+ * @property leftIcon - Optional icon to display on the left.
+ * @property rightIcon - Optional icon to display on the right.
+ * @property disabled - If true, disables the menu item.
+ */
+interface MenuItemProps {
+    label?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    disabled?: boolean;
+}
+/**
+ * MenuItem renders a single item within a menu.
+ * Handles focus, keyboard navigation, and click events.
+ * Integrates with the menu context for accessibility and state management.
+ * @param props - MenuItemProps and HTML button attributes.
+ * @param forwardedRef - Ref to the menu item element.
+ * @returns The styled menu item.
+ *
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { Menu, MenuItem } from './menu'
+ * import { Icon } from '@ltht-react/icon'
+ *
+ * <Menu
+ *   label="Options"
+ *   leftIcon={<Icon name="menu" />}
+ * >
+ *   <MenuItem label="Profile" />
+ *   <MenuItem label="Settings" />
+ *   <Menu label="More" leftIcon={<Icon name="more" />}>
+ *     <MenuItem label="Subitem 1" />
+ *     <MenuItem label="Subitem 2" />
+ *   </Menu>
+ *   <MenuItem label="Logout" />
+ * </Menu>
+ * ```
+ */
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Menu is the main entry point for rendering a menu or submenu.
+ * Automatically wraps the root menu in a FloatingTree for context management.
+ * @param props - MenuProps and HTML button attributes.
+ * @param ref - Ref to the menu trigger element.
+ * @returns The menu trigger and its floating menu.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { Menu, MenuItem } from './menu'
+ * import { Icon } from '@ltht-react/icon'
+ *
+ * <Menu
+ *   label="Options"
+ *   leftIcon={<Icon name="menu" />}
+ * >
+ *   <MenuItem label="Profile" />
+ *   <MenuItem label="Settings" />
+ *   <Menu label="More" leftIcon={<Icon name="more" />}>
+ *     <MenuItem label="Subitem 1" />
+ *     <MenuItem label="Subitem 2" />
+ *   </Menu>
+ *   <MenuItem label="Logout" />
+ * </Menu>
+ * ```
+ */
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export {};