@ltht-react/menu 2.0.201 → 2.0.202

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,33 @@
+"use strict";
+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 });
+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

@@ -0,0 +1 @@
+{"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-option.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ActionMenuOption as IActionMenuOption } from './action-menu';
+interface Props extends IActionMenuOption {
+    idPrefix: string;
+    index: number;
+}
+declare const ActionMenuOption: FC<Props>;
+export default ActionMenuOption;

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

@@ -0,0 +1,121 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var icon_1 = __importDefault(require("@ltht-react/icon"));
+var utils_1 = require("@ltht-react/utils");
+var hooks_1 = require("@ltht-react/hooks");
+var menu_1 = require("./menu");
+// Utility function to generate consistent IDs
+var generateActionId = function (idPrefix, text, index) {
+    var textId = (0, utils_1.stringToHtmlId)(text);
+    return "".concat(idPrefix, "action-menu-item-").concat(textId, "-").concat(index);
+};
+var ActionMenuOption = function (_a) {
+    var idPrefix = _a.idPrefix, index = _a.index, text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, actions = _a.actions, _b = _a.exitFullScreenOnClick, exitFullScreenOnClick = _b === void 0 ? false : _b, clickHandler = _a.clickHandler, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, rest = __rest(_a, ["idPrefix", "index", "text", "leftIcon", "rightIcon", "actions", "exitFullScreenOnClick", "clickHandler", "onClick", "disabled"]);
+    var _d = (0, hooks_1.useFullScreen)(), isFullscreen = _d.isFullscreen, exitFullScreen = _d.exitFullScreen;
+    // Memoize the action ID to prevent recalculation on every render
+    var actionMenuItemId = (0, react_1.useMemo)(function () { return generateActionId(idPrefix, text, index); }, [idPrefix, text, index]);
+    // Memoize icons to prevent unnecessary re-renders
+    var leftIconElement = (0, react_1.useMemo)(function () { return leftIcon && (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, leftIcon)); }, [leftIcon]);
+    var rightIconElement = (0, react_1.useMemo)(function () { return rightIcon && (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, rightIcon)); }, [rightIcon]);
+    var handleOnClick = (0, react_1.useCallback)(function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.stopPropagation();
+                    if (disabled) {
+                        return [2 /*return*/];
+                    }
+                    if (!clickHandler && !onClick) {
+                        return [2 /*return*/];
+                    }
+                    if (!(exitFullScreenOnClick && isFullscreen)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, exitFullScreen()];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    // Execute the appropriate handler
+                    if (clickHandler) {
+                        clickHandler();
+                    }
+                    else if (onClick) {
+                        onClick(e);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [disabled, clickHandler, onClick, exitFullScreenOnClick, isFullscreen, exitFullScreen]);
+    // Determine if this is a submenu (has actions)
+    var isSubmenu = actions && actions.length > 0;
+    // Common props for both Menu and MenuItem
+    var commonProps = (0, react_1.useMemo)(function () { return (__assign({ id: actionMenuItemId, 'data-testid': actionMenuItemId, label: text, leftIcon: leftIconElement, rightIcon: rightIconElement, disabled: disabled }, rest)); }, [actionMenuItemId, text, leftIconElement, rightIconElement, disabled, rest]);
+    if (isSubmenu) {
+        return ((0, jsx_runtime_1.jsx)(menu_1.Menu, __assign({}, commonProps, { "aria-label": "".concat(text, " submenu"), "aria-expanded": "false", children: actions.map(function (action, actionIndex) { return ((0, jsx_runtime_1.jsx)(ActionMenuOption, __assign({ idPrefix: "".concat(actionMenuItemId, "_"), index: actionIndex }, action), "".concat(actionMenuItemId, "_menu_item_").concat(actionIndex))); }) })));
+    }
+    return (0, jsx_runtime_1.jsx)(menu_1.MenuItem, __assign({}, commonProps, { onClick: handleOnClick, "aria-label": text }));
+};
+exports.default = ActionMenuOption;
+//# sourceMappingURL=action-menu-option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-menu-option.js","sourceRoot":"","sources":["../../src/molecules/action-menu-option.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+import { FC, HTMLAttributes } from 'react';
+import { IconProps } from '@ltht-react/icon';
+import { ButtonProps } from '@ltht-react/button';
+interface IProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<HTMLButtonElement> {
+    actions: ActionMenuOption[];
+    menuButtonOptions?: IconButtonMenuProps | ButtonMenuProps;
+    disabled?: boolean;
+    root?: React.MutableRefObject<T | null>;
+}
+interface IconButtonMenuProps {
+    type: 'icon';
+    iconProps: IconProps;
+    text?: string;
+    disabled?: boolean;
+}
+interface ButtonMenuProps {
+    type: 'button';
+    buttonProps: ButtonProps;
+    text: string;
+}
+export interface ActionMenuOption extends HTMLAttributes<HTMLButtonElement> {
+    text: string;
+    clickHandler?: VoidFunction;
+    leftIcon?: IconProps;
+    rightIcon?: IconProps;
+    disabled?: boolean;
+    exitFullScreenOnClick?: boolean;
+    actions?: ActionMenuOption[];
+}
+export declare const DefaultTrigger: IconButtonMenuProps;
+declare const ActionMenu: FC<IProps>;
+export default ActionMenu;

package/lib/molecules/action-menu.js

@@ -0,0 +1,45 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 menu_1 = require("./menu");
+var action_menu_option_1 = __importDefault(require("./action-menu-option"));
+exports.DefaultTrigger = {
+    type: 'icon',
+    iconProps: {
+        type: 'ellipsis-vertical',
+        size: 'large',
+    },
+};
+var ActionMenu = function (_a) {
+    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, "-") : '';
+    return ((0, jsx_runtime_1.jsx)(menu_1.Menu, __assign({ rootTrigger: menuButtonOptions, "data-testid": id }, rest, { children: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(action_menu_option_1.default, __assign({ idPrefix: menuItemIdPrefix, index: index }, action), "".concat(menuItemIdPrefix, "_menu_item_").concat(index))); }) })));
+};
+exports.default = ActionMenu;
+//# sourceMappingURL=action-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-menu.js","sourceRoot":"","sources":["../../src/molecules/action-menu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,+BAA6B;AAC7B,4EAA6C;AAgChC,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,CAC9B,uBAAC,4BAAU,aAET,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,KAAK,IACR,MAAM,GAHL,UAAG,gBAAgB,wBAAc,KAAK,CAAE,CAI7C,CACH,EAP+B,CAO/B,CAAC,IACG,CACR,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,UAAU,CAAA"}

package/lib/molecules/menu.d.ts

@@ -0,0 +1,194 @@
+/**
+ * @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<T extends HTMLElement = HTMLElement> {
+    label?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    nested?: boolean;
+    children?: ReactNode;
+    rootTrigger?: RootMenuTrigger;
+    disabled?: boolean;
+    root?: React.MutableRefObject<T | null>;
+}
+/**
+ * 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<HTMLElement> & 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<HTMLElement> & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/molecules/menu.js

@@ -0,0 +1,327 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = exports.MenuItem = exports.MenuTrigger = exports.MenuComponent = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @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.
+ */
+var react_1 = require("@floating-ui/react");
+var React = __importStar(require("react"));
+var react_2 = require("react");
+var icon_1 = __importStar(require("@ltht-react/icon"));
+var button_1 = require("@ltht-react/button");
+var menu_style_1 = require("./menu.style");
+var MenuContext = React.createContext({
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    getItemProps: function () { return ({}); },
+    activeIndex: null,
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    setActiveIndex: function () { },
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    setHasFocusInside: function () { },
+    isOpen: false,
+});
+/**
+ * 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.
+ */
+exports.MenuComponent = (0, react_2.forwardRef)(function (_a, forwardedRef) {
+    var children = _a.children, label = _a.label, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, rootTrigger = _a.rootTrigger, root = _a.root, props = __rest(_a, ["children", "label", "leftIcon", "rightIcon", "rootTrigger", "root"]);
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = React.useState(false), hasFocusInside = _c[0], setHasFocusInside = _c[1];
+    var _d = React.useState(null), activeIndex = _d[0], setActiveIndex = _d[1];
+    var elementsRef = React.useRef([]);
+    var labelsRef = React.useRef([]);
+    var parent = React.useContext(MenuContext);
+    var tree = (0, react_1.useFloatingTree)();
+    var nodeId = (0, react_1.useFloatingNodeId)();
+    var parentId = (0, react_1.useFloatingParentNodeId)();
+    var item = (0, react_1.useListItem)();
+    var isNested = parentId != null;
+    var _e = (0, react_1.useFloating)({
+        nodeId: nodeId,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: isNested ? 'right-start' : 'bottom-start',
+        middleware: [(0, react_1.offset)({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }), (0, react_1.flip)(), (0, react_1.shift)()],
+        whileElementsMounted: react_1.autoUpdate,
+    }), floatingStyles = _e.floatingStyles, refs = _e.refs, context = _e.context;
+    var hover = (0, react_1.useHover)(context, {
+        enabled: isNested,
+        delay: { open: 75 },
+        handleClose: (0, react_1.safePolygon)({ blockPointerEvents: true }),
+    });
+    var click = (0, react_1.useClick)(context, {
+        event: 'mousedown',
+        toggle: !isNested,
+        ignoreMouse: isNested,
+    });
+    var role = (0, react_1.useRole)(context, { role: 'menu' });
+    var dismiss = (0, react_1.useDismiss)(context, { bubbles: true });
+    var listNavigation = (0, react_1.useListNavigation)(context, {
+        listRef: elementsRef,
+        activeIndex: activeIndex,
+        nested: isNested,
+        onNavigate: setActiveIndex,
+    });
+    var typeahead = (0, react_1.useTypeahead)(context, {
+        listRef: labelsRef,
+        onMatch: isOpen ? setActiveIndex : undefined,
+        activeIndex: activeIndex,
+    });
+    var _f = (0, react_1.useInteractions)([
+        hover,
+        click,
+        role,
+        dismiss,
+        listNavigation,
+        typeahead,
+    ]), getReferenceProps = _f.getReferenceProps, getFloatingProps = _f.getFloatingProps, getItemProps = _f.getItemProps;
+    // Event emitter allows you to communicate across tree components.
+    // This effect closes all menus when an item gets clicked anywhere
+    // in the tree.
+    (0, react_2.useEffect)(function () {
+        if (!tree)
+            return undefined;
+        var handleTreeClick = function () { return setIsOpen(false); };
+        var onSubMenuOpen = function (event) {
+            if (event.nodeId !== nodeId && event.parentId === parentId) {
+                setIsOpen(false);
+            }
+        };
+        tree.events.on('click', handleTreeClick);
+        tree.events.on('menuopen', onSubMenuOpen);
+        return function () {
+            tree.events.off('click', handleTreeClick);
+            tree.events.off('menuopen', onSubMenuOpen);
+        };
+    }, [tree, nodeId, parentId]);
+    (0, react_2.useEffect)(function () {
+        isOpen && tree && tree.events.emit('menuopen', { parentId: parentId, nodeId: nodeId });
+    }, [tree, isOpen, nodeId, parentId]);
+    var activeItem = parent.activeIndex === item.index ? 0 : -1;
+    return ((0, jsx_runtime_1.jsxs)(react_1.FloatingNode, { id: nodeId, children: [(0, jsx_runtime_1.jsx)(exports.MenuTrigger, __assign({ ref: forwardedRef, refs: refs, isNested: isNested, label: label, leftIcon: leftIcon, rightIcon: rightIcon, rootTrigger: rootTrigger, tabIndex: !isNested ? undefined : activeItem, role: isNested ? 'menuitem' : undefined, "data-open": isOpen ? '' : undefined, "data-nested": isNested ? '' : undefined, "data-focus-inside": hasFocusInside ? '' : undefined, style: isNested ? undefined : props.style }, props, getReferenceProps(__assign(__assign({}, parent.getItemProps(__assign(__assign({}, props), { onFocus: function (event) {
+                    var _a;
+                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                    setHasFocusInside(false);
+                    parent.setHasFocusInside(true);
+                } }))), { onClick: function (e) {
+                    e.stopPropagation();
+                } })))), (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: {
+                    activeIndex: activeIndex,
+                    setActiveIndex: setActiveIndex,
+                    getItemProps: getItemProps,
+                    setHasFocusInside: setHasFocusInside,
+                    isOpen: isOpen,
+                }, children: (0, jsx_runtime_1.jsx)(react_1.FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { root: root, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, children: (0, jsx_runtime_1.jsx)(menu_style_1.StyledMenu, __assign({ ref: refs.setFloating, style: floatingStyles }, getFloatingProps(), { children: children })) }) })) }) })] }));
+});
+var DefaultTriggerIcon = function () { return (0, jsx_runtime_1.jsx)(icon_1.default, { type: "ellipsis-vertical", size: "medium" }); };
+/**
+ * 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.
+ */
+exports.MenuTrigger = (0, react_2.forwardRef)(function (_a, forwardedRef) {
+    var refs = _a.refs, isNested = _a.isNested, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, label = _a.label, rootTrigger = _a.rootTrigger, props = __rest(_a, ["refs", "isNested", "leftIcon", "rightIcon", "label", "rootTrigger"]);
+    var item = (0, react_1.useListItem)();
+    var mergedRefs = (0, react_1.useMergeRefs)([refs.setReference, item.ref, forwardedRef]);
+    if (isNested || !rootTrigger) {
+        // check if no label or icons provided thus use default icon
+        var finalLeftIconValue = !label && !leftIcon && !rightIcon ? (0, jsx_runtime_1.jsx)(DefaultTriggerIcon, {}) : leftIcon;
+        return ((0, jsx_runtime_1.jsx)(menu_style_1.StyledRootMenu, __assign({ ref: mergedRefs }, props, { isNested: isNested, children: (0, jsx_runtime_1.jsx)(MenuLabel, { leftIcon: finalLeftIconValue, rightIcon: rightIcon, label: label, isNested: isNested }) })));
+    }
+    switch (rootTrigger.type) {
+        case 'icon':
+            return ((0, jsx_runtime_1.jsx)(icon_1.IconButton, __assign({ ref: mergedRefs, iconProps: rootTrigger.iconProps, disabled: rootTrigger.disabled, text: rootTrigger.text }, props)));
+        case 'button':
+            return ((0, jsx_runtime_1.jsx)(button_1.Button, __assign({ ref: mergedRefs }, props, rootTrigger.buttonProps, { children: rootTrigger.text })));
+        default:
+            return null;
+    }
+});
+/**
+ * MenuLabel renders the label and icons for a menu trigger.
+ * Displays a right arrow for nested submenus.
+ * @param props - MenuLabelProps.
+ * @returns The label and icons for the menu trigger.
+ */
+var MenuLabel = function (_a) {
+    var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, label = _a.label, isNested = _a.isNested;
+    if (isNested)
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIcon && (0, jsx_runtime_1.jsx)(menu_style_1.LeftIconWrapper, { children: leftIcon }), (0, jsx_runtime_1.jsx)(menu_style_1.TextWrapper, { children: label }), isNested && (0, jsx_runtime_1.jsx)(menu_style_1.RightIconWrapper, { children: "\u25B6" })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIcon, label, rightIcon] }));
+};
+/**
+ * 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>
+ * ```
+ */
+exports.MenuItem = (0, react_2.forwardRef)(function (_a, forwardedRef) {
+    var label = _a.label, children = _a.children, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, disabled = _a.disabled, props = __rest(_a, ["label", "children", "leftIcon", "rightIcon", "disabled"]);
+    var menu = React.useContext(MenuContext);
+    var item = (0, react_1.useListItem)({ label: disabled ? null : label });
+    var tree = (0, react_1.useFloatingTree)();
+    var isActive = item.index === menu.activeIndex;
+    return ((0, jsx_runtime_1.jsxs)(menu_style_1.StyledMenuItem, __assign({}, props, { ref: (0, react_1.useMergeRefs)([item.ref, forwardedRef]), type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, disabled: disabled }, menu.getItemProps({
+        onClick: function (event) {
+            var _a;
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            tree === null || tree === void 0 ? void 0 : tree.events.emit('click');
+        },
+        onFocus: function (event) {
+            var _a;
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            menu.setHasFocusInside(true);
+        },
+    }), { children: [leftIcon && (0, jsx_runtime_1.jsx)(menu_style_1.LeftIconWrapper, { children: leftIcon }), (0, jsx_runtime_1.jsx)(menu_style_1.TextWrapper, { children: label !== null && label !== void 0 ? label : children }), rightIcon && (0, jsx_runtime_1.jsx)(menu_style_1.RightIconWrapper, { children: rightIcon })] })));
+});
+/**
+ * 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>
+ * ```
+ */
+exports.Menu = React.forwardRef(function (props, ref) {
+    var parentId = (0, react_1.useFloatingParentNodeId)();
+    if (parentId === null) {
+        return ((0, jsx_runtime_1.jsx)(react_1.FloatingTree, { children: (0, jsx_runtime_1.jsx)(exports.MenuComponent, __assign({}, props, { ref: ref })) }));
+    }
+    return (0, jsx_runtime_1.jsx)(exports.MenuComponent, __assign({}, props, { rootTrigger: undefined, ref: ref }));
+});
+//# sourceMappingURL=menu.js.map

package/lib/molecules/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/molecules/menu.tsx"],"names":[],"mappings":"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"}

package/lib/molecules/menu.style.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const RightIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LeftIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TextWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledRootMenu: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isNested?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const StyledMenu: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/lib/molecules/menu.style.js

@@ -0,0 +1,26 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledMenuItem = exports.StyledMenu = exports.StyledRootMenu = exports.TextWrapper = exports.LeftIconWrapper = exports.RightIconWrapper = void 0;
+var react_1 = require("@emotion/react");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var styles_1 = require("@ltht-react/styles");
+var nestedStyles = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  background: none;\n  width: 100%;\n  border: none;\n  text-align: left;\n  line-height: 1.8;\n  min-width: 80px;\n  margin: 0;\n  outline: 0;\n\n  &:focus {\n    background: ", ";\n    color: ", ";\n  }\n\n  &[data-nested][data-open]:not([data-focus-inside]) {\n    background: ", ";\n    color: ", ";\n  }\n\n  &[data-focus-inside][data-open] {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:not(:last-child) {\n    border-bottom: 1px solid #e0e6ef;\n  }\n\n  &:hover > div > svg {\n    color: ", ";\n  }\n\n  &[data-focus-inside][data-open] > div > svg {\n    color: ", ";\n  }\n\n  &[disabled] > div > svg {\n    color: rgba(16, 16, 16, 0.3);\n  }\n\n  &[disabled]:hover {\n    cursor: not-allowed;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  background: none;\n  width: 100%;\n  border: none;\n  text-align: left;\n  line-height: 1.8;\n  min-width: 80px;\n  margin: 0;\n  outline: 0;\n\n  &:focus {\n    background: ", ";\n    color: ", ";\n  }\n\n  &[data-nested][data-open]:not([data-focus-inside]) {\n    background: ", ";\n    color: ", ";\n  }\n\n  &[data-focus-inside][data-open] {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:not(:last-child) {\n    border-bottom: 1px solid #e0e6ef;\n  }\n\n  &:hover > div > svg {\n    color: ", ";\n  }\n\n  &[data-focus-inside][data-open] > div > svg {\n    color: ", ";\n  }\n\n  &[disabled] > div > svg {\n    color: rgba(16, 16, 16, 0.3);\n  }\n\n  &[disabled]:hover {\n    cursor: not-allowed;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), styles_1.BTN_COLOURS.PRIMARY.HOVER, styles_1.BTN_COLOURS.PRIMARY.TEXT, styles_1.BTN_COLOURS.PRIMARY.HOVER, styles_1.BTN_COLOURS.PRIMARY.TEXT, styles_1.BTN_COLOURS.PRIMARY.HOVER, styles_1.BTN_COLOURS.PRIMARY.TEXT, styles_1.BTN_COLOURS.PRIMARY.TEXT, styles_1.BTN_COLOURS.PRIMARY.TEXT);
+exports.RightIconWrapper = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n"])));
+exports.LeftIconWrapper = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  width: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+exports.TextWrapper = styled_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  padding: 0.2rem 0.3rem;\n"], ["\n  flex: 1;\n  padding: 0.2rem 0.3rem;\n"])));
+var rootStyles = (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  align-content: center;\n  gap: 0.25rem;\n  padding: 6px 10px;\n  border: 0;\n  font-size: 0.9rem;\n  background: none;\n  border-radius: 6px;\n  cursor: pointer;\n\n  &[disabled]:hover {\n    background: none;\n    cursor: not-allowed;\n  }\n\n  &[disabled]:hover > div > svg {\n    color: ", ";\n  }\n\n  &[data-open],\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &[data-open] > div > svg,\n  &:focus > div > svg,\n  &:hover > div > svg {\n    color: ", ";\n  }\n\n  &[data-open] > svg,\n  &:hover > svg {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  align-content: center;\n  gap: 0.25rem;\n  padding: 6px 10px;\n  border: 0;\n  font-size: 0.9rem;\n  background: none;\n  border-radius: 6px;\n  cursor: pointer;\n\n  &[disabled]:hover {\n    background: none;\n    cursor: not-allowed;\n  }\n\n  &[disabled]:hover > div > svg {\n    color: ", ";\n  }\n\n  &[data-open],\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &[data-open] > div > svg,\n  &:focus > div > svg,\n  &:hover > div > svg {\n    color: ", ";\n  }\n\n  &[data-open] > svg,\n  &:hover > svg {\n    color: ", ";\n  }\n"])), styles_1.BTN_COLOURS.PRIMARY.DISABLED, styles_1.BTN_COLOURS.PRIMARY.HOVER, styles_1.BTN_COLOURS.PRIMARY.TEXT, styles_1.BTN_COLOURS.PRIMARY.TEXT, styles_1.BTN_COLOURS.PRIMARY.TEXT);
+exports.StyledRootMenu = styled_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var isNested = _a.isNested;
+    return (isNested ? nestedStyles : rootStyles);
+});
+exports.StyledMenu = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background: rgba(255, 255, 255, 0.8);\n  -webkit-backdrop-filter: blur(10px);\n  backdrop-filter: blur(10px);\n  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1);\n  outline: 0;\n  z-index: ", ";\n"], ["\n  background: rgba(255, 255, 255, 0.8);\n  -webkit-backdrop-filter: blur(10px);\n  backdrop-filter: blur(10px);\n  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1);\n  outline: 0;\n  z-index: ", ";\n"])), (0, styles_1.getZIndex)(styles_1.PopUp));
+exports.StyledMenuItem = styled_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), nestedStyles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=menu.style.js.map

package/lib/molecules/menu.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.style.js","sourceRoot":"","sources":["../../src/molecules/menu.style.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,wCAAoC;AACpC,2DAAoC;AACpC,6CAAkE;AAElE,IAAM,YAAY,OAAG,WAAG,y3BAAA,+OAcN,EAAyB,gBAC9B,EAAwB,oFAInB,EAAyB,gBAC9B,EAAwB,iEAInB,EAAyB,gBAC9B,EAAwB,sHAQxB,EAAwB,wEAIxB,EAAwB,mLAcpC,KArCiB,oBAAW,CAAC,OAAO,CAAC,KAAK,EAC9B,oBAAW,CAAC,OAAO,CAAC,IAAI,EAInB,oBAAW,CAAC,OAAO,CAAC,KAAK,EAC9B,oBAAW,CAAC,OAAO,CAAC,IAAI,EAInB,oBAAW,CAAC,OAAO,CAAC,KAAK,EAC9B,oBAAW,CAAC,OAAO,CAAC,IAAI,EAQxB,oBAAW,CAAC,OAAO,CAAC,IAAI,EAIxB,oBAAW,CAAC,OAAO,CAAC,IAAI,CAcpC,CAAA;AAEY,QAAA,gBAAgB,GAAG,gBAAM,CAAC,GAAG,uIAAA,oEAIzC,KAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,6JAAA,0FAKxC,KAAA;AAEY,QAAA,WAAW,GAAG,gBAAM,CAAC,IAAI,8GAAA,2CAGrC,KAAA;AAED,IAAM,UAAU,OAAG,WAAG,0pBAAA,kVAkBT,EAA4B,0DAKvB,EAAyB,gBAC9B,EAAwB,qGAMxB,EAAwB,iEAKxB,EAAwB,UAEpC,KAnBY,oBAAW,CAAC,OAAO,CAAC,QAAQ,EAKvB,oBAAW,CAAC,OAAO,CAAC,KAAK,EAC9B,oBAAW,CAAC,OAAO,CAAC,IAAI,EAMxB,oBAAW,CAAC,OAAO,CAAC,IAAI,EAKxB,oBAAW,CAAC,OAAO,CAAC,IAAI,CAEpC,CAAA;AAEY,QAAA,cAAc,GAAG,gBAAM,CAAC,MAAM,+EAAwB,MAC/D,EAAwD,IAC3D,KADG,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;AAAtC,CAAsC,EAC3D;AAEY,QAAA,UAAU,GAAG,gBAAM,CAAC,GAAG,uSAAA,6NAMvB,EAAgB,KAC5B,KADY,IAAA,kBAAS,EAAC,cAAK,CAAC,EAC5B;AAEY,QAAA,cAAc,GAAG,gBAAM,CAAC,MAAM,+EAAA,MACvC,EAAY,IACf,KADG,YAAY,EACf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/menu",
-  "version": "2.0.201",
+  "version": "2.0.202",
   "description": "ltht-react styled Menu component.",
   "author": "LTHT",
   "homepage": "",
@@ -29,12 +29,12 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@floating-ui/react": "^0.27.15",
-    "@ltht-react/button": "^2.0.201",
-    "@ltht-react/hooks": "^2.0.201",
-    "@ltht-react/icon": "^2.0.201",
-    "@ltht-react/styles": "^2.0.201",
-    "@ltht-react/utils": "^2.0.201",
+    "@ltht-react/button": "^2.0.202",
+    "@ltht-react/hooks": "^2.0.202",
+    "@ltht-react/icon": "^2.0.202",
+    "@ltht-react/styles": "^2.0.202",
+    "@ltht-react/utils": "^2.0.202",
     "react": "^18.2.0"
   },
-  "gitHead": "79d7616f63287ef8e8dd9f302294a909dd2c69d0"
+  "gitHead": "fefbde68a30c94b8743e051c2c57dd27d082913c"
 }