musae 0.2.26 → 0.3.0

package/dist/components/menu/hooks.cjs

@@ -0,0 +1,163 @@
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var context = require('./context.cjs');
+var relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var keyboardArrowUp = require('../icon/icons/hardware/keyboard-arrow-up.cjs');
+
+var _excluded = ["onClick", "setTrigger", "size"];
+var styles = {
+  collapser: function collapser(props) {
+    return [{
+      display: "musaex-78zum5",
+      alignItems: "musaex-6s0dn4",
+      justifyContent: "musaex-l56j7k",
+      transform: "musaex-1v0jg1i",
+      transition: "musaex-1trvaba",
+      transitionBehavior: null,
+      transitionDelay: null,
+      transitionDuration: null,
+      transitionProperty: null,
+      transitionTimingFunction: null,
+      $$css: true
+    }, {
+      "--transform": (props.isExpanded ? "rotateX(0)" : "rotateX(180deg)") != null ? props.isExpanded ? "rotateX(0)" : "rotateX(180deg)" : "initial"
+    }];
+  }
+};
+/**
+ * @description
+ * use menu context
+ */
+var useMenuContext = function useMenuContext() {
+  return React.useContext(context.default);
+};
+/**
+ * @description
+ * use children
+ */
+var useItemChildren = function useItemChildren(_ref) {
+  var prefix = _ref.prefix,
+    label = _ref.label,
+    suffix = _ref.suffix,
+    hasChildren = _ref.hasChildren,
+    isExpanded = _ref.isExpanded,
+    isInline = _ref.isInline;
+  /// prefix
+  var _prefix = React.useMemo(function () {
+    return prefix && /*#__PURE__*/React.createElement("span", _objectSpread({}, {
+      className: "musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-1a1twg2"
+    }), prefix);
+  }, [prefix]);
+  /// child
+  var _label = React.useMemo(function () {
+    return label && /*#__PURE__*/React.createElement("span", null, label);
+  }, [label]);
+  /// suffix
+  var _suffix = React.useMemo(function () {
+    if (!suffix && !hasChildren) return null;
+    var styled = stylex.default.props(styles.collapser({
+      isExpanded: isExpanded
+    }));
+    return /*#__PURE__*/React.createElement("span", _objectSpread({}, {
+      className: "musaex-igfled"
+    }), suffix, hasChildren && isInline && (/*#__PURE__*/React.createElement("span", _objectSpread({}, styled), /*#__PURE__*/React.createElement(keyboardArrowUp.default, {
+      size: 16
+    }))));
+  }, [hasChildren, isExpanded, suffix, isInline]);
+  return {
+    suffix: _suffix,
+    prefix: _prefix,
+    label: _label
+  };
+};
+/**
+ * @description
+ * context value
+ */
+var useContextValue = function useContextValue(_ref2) {
+  var _props$defaultSelecte, _props$defaultExpande;
+  var onClick = _ref2.onClick,
+    setTrigger = _ref2.setTrigger,
+    size = _ref2.size,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useControlledState = relax.useControlledState(props.selectedKeys, {
+      defaultState: (_props$defaultSelecte = props.defaultSelectedKeys) !== null && _props$defaultSelecte !== void 0 ? _props$defaultSelecte : []
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _selectedKeys = _useControlledState2[0],
+    _setSelectedKeys = _useControlledState2[1];
+  var _useControlledState3 = relax.useControlledState(props.expandedKeys, {
+      defaultState: (_props$defaultExpande = props.defaultExpandedKeys) !== null && _props$defaultExpande !== void 0 ? _props$defaultExpande : []
+    }),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    _expandedKeys = _useControlledState4[0],
+    _setExpandedKeys = _useControlledState4[1];
+  var selectedKeys = React.useMemo(function () {
+    return new Set(_selectedKeys);
+  }, [_selectedKeys]);
+  var expandedKeys = React.useMemo(function () {
+    return new Set(_expandedKeys);
+  }, [_expandedKeys]);
+  /// click handler
+  var click = React.useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(key) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _setSelectedKeys([key]);
+            _context.next = 3;
+            return onClick === null || onClick === void 0 ? void 0 : onClick(key);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [onClick, _setSelectedKeys]);
+  /// toggle expand
+  var toggle = React.useCallback(function (key) {
+    var isExpanded = expandedKeys.has(key);
+    _setExpandedKeys(function (prev) {
+      var expanded = new Set(prev);
+      isExpanded ? expanded["delete"](key) : expanded.add(key);
+      return Array.from(expanded);
+    });
+  }, [expandedKeys, _setExpandedKeys]);
+  /// collect item
+  var collect = React.useCallback(function (key, item) {
+    if (!item) return;
+    setTrigger(key, item);
+  }, [setTrigger]);
+  return React.useMemo(function () {
+    return {
+      selectedKeys: selectedKeys,
+      expandedKeys: expandedKeys,
+      click: click,
+      toggle: toggle,
+      collect: collect,
+      size: size
+    };
+  }, [selectedKeys, expandedKeys, click, toggle, collect, size]);
+};
+/**
+ * @description
+ * in menu, musae allow developer scroll to the position by given key
+ * but there are only x or y scroll orientation
+ * so we need convert the mode into orientation
+ */
+var useScrollOrientation = function useScrollOrientation(mode) {
+  return mode === "horizontal" ? "horizontal" : "vertical";
+};
+
+exports.useContextValue = useContextValue;
+exports.useItemChildren = useItemChildren;
+exports.useMenuContext = useMenuContext;
+exports.useScrollOrientation = useScrollOrientation;

package/dist/components/menu/hooks.d.ts

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from "react";
-import type { ContextValue, MenuProps, Mode } from "./types";
-import type { Size } from "../../types/element";
+import type { ContextValue, MenuProps, Mode } from "musae/types/menu";
+import type { Size } from "musae/types/element";
 /**
  * @description
  * use menu context

package/dist/components/menu/{hooks.js → hooks.mjs}

@@ -4,10 +4,10 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useMemo, useCallback, useContext } from 'react';
-import Context from './context.js';
+import Context from './context.mjs';
 import { useControlledState } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import KeyboardArrowUp from '../icon/icons/hardware/keyboard-arrow-up.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import KeyboardArrowUp from '../icon/icons/hardware/keyboard-arrow-up.mjs';
 
 var _excluded = ["onClick", "setTrigger", "size"];
 var styles = {
@@ -60,7 +60,7 @@ var useItemChildren = function useItemChildren(_ref) {
   /// suffix
   var _suffix = useMemo(function () {
     if (!suffix && !hasChildren) return null;
-    var styled = props(styles.collapser({
+    var styled = _stylex.props(styles.collapser({
       isExpanded: isExpanded
     }));
     return /*#__PURE__*/React.createElement("span", _objectSpread({}, {

package/dist/components/menu/index.d.ts

@@ -1,3 +1,2 @@
 import Menu from "./menu";
-import type { MenuProps, MenuItem, MenuRef } from "./types";
-export { Menu, type MenuItem, type MenuProps, type MenuRef };
+export { Menu };

package/dist/components/menu/item.cjs

@@ -0,0 +1,291 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var hooks = require('./hooks.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var hooks$1 = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var theme = require('../theme/theme.cjs');
+var relax = require('@aiszlab/relax');
+var popper = require('../popper/popper.cjs');
+var useLazyBoolean = require('../../hooks/use-lazy-boolean.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var _excluded = ["level", "label", "prefix", "suffix", "value", "className", "mode"];
+var styles = {
+  "default": {
+    item: {
+      display: "musaex-78zum5",
+      alignItems: "musaex-6s0dn4",
+      cursor: "musaex-1ypdohk",
+      userSelect: "musaex-87ps6o",
+      willChange: "musaex-1aaibe2",
+      transitionProperty: "musaex-xy01e9",
+      transitionDuration: "musaex-13dflua",
+      $$css: true
+    }
+  },
+  mode: {
+    menuitem: {
+      horizontal: {
+        $$css: true
+      },
+      vertical: {
+        marginTop: "musaex-19h4m1 musaex-1806fz6",
+        $$css: true
+      },
+      inline: {
+        marginTop: "musaex-19h4m1 musaex-1806fz6",
+        $$css: true
+      }
+    },
+    item: {
+      horizontal: function horizontal(props) {
+        return [{
+          height: "musaex-1xj1dsn",
+          position: "musaex-1n2onr6",
+          "::after_content": "musaex-1s928wv",
+          "::after_position": "musaex-1j6awrg",
+          "::after_insetInline": "musaex-b7ltuz",
+          "::after_insetInlineStart": null,
+          "::after_insetInlineEnd": null,
+          "::after_left": null,
+          "::after_right": null,
+          "::after_bottom": "musaex-1xrz1ek",
+          "::after_borderBottomWidth": "musaex-zwl9q7",
+          "::after_willChange": "musaex-7h5a58",
+          "::after_transitionProperty": "musaex-w91p3u",
+          "::after_transitionDuration": "musaex-t0fc71",
+          ":not(:hover)::after_borderBottomColor": "musaex-q3rc72",
+          ":hover::after_borderBottomColor": "musaex-1kev6kp",
+          $$css: true
+        }, {
+          "--1nc1zz8": props.outlineColor != null ? props.outlineColor : "initial"
+        }];
+      },
+      vertical: function vertical(props) {
+        return [{
+          backgroundColor: "musaex-rl4t6d",
+          $$css: true
+        }, {
+          "--1e2mv7m": props.backgroundColor != null ? props.backgroundColor : "initial"
+        }];
+      },
+      inline: function inline(props) {
+        return [{
+          backgroundColor: "musaex-rl4t6d",
+          $$css: true
+        }, {
+          "--1e2mv7m": props.backgroundColor != null ? props.backgroundColor : "initial"
+        }];
+      }
+    }
+  },
+  size: {
+    small: function small(props) {
+      return [{
+        paddingBlock: "musaex-1i37kmv",
+        paddingTop: null,
+        paddingBottom: null,
+        paddingRight: "musaex-tff733",
+        paddingInlineStart: null,
+        paddingInlineEnd: null,
+        paddingLeft: "musaex-1k3zc6d",
+        borderRadius: "musaex-ok3b7d",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        $$css: true
+      }, {
+        "--paddingLeft": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }("calc(".concat(tokens_stylex.spacing.small, " + ").concat(props.level, " * ").concat(tokens_stylex.spacing.large, ")"))
+      }];
+    },
+    medium: function medium(props) {
+      return [{
+        paddingBlock: "musaex-15v7278",
+        paddingTop: null,
+        paddingBottom: null,
+        paddingRight: "musaex-1881en4",
+        paddingInlineStart: null,
+        paddingInlineEnd: null,
+        paddingLeft: "musaex-1k3zc6d",
+        borderRadius: "musaex-qwu505",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        $$css: true
+      }, {
+        "--paddingLeft": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }("calc(".concat(tokens_stylex.spacing.medium, " + ").concat(props.level, " * ").concat(tokens_stylex.spacing.xlarge, ")"))
+      }];
+    },
+    large: function large(props) {
+      return [{
+        paddingBlock: "musaex-qhkzqn",
+        paddingTop: null,
+        paddingBottom: null,
+        paddingRight: "musaex-12t7xen",
+        paddingInlineStart: null,
+        paddingInlineEnd: null,
+        paddingLeft: "musaex-1k3zc6d",
+        borderRadius: "musaex-4s5yxs",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        $$css: true
+      }, {
+        "--paddingLeft": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }("calc(".concat(tokens_stylex.spacing.large, " + ").concat(props.level, " * ").concat(tokens_stylex.spacing.xxlarge, ")"))
+      }];
+    }
+  },
+  selected: {
+    inline: function inline(props) {
+      return [{
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    vertical: function vertical(props) {
+      return [{
+        backgroundColor: "musaex-q1mx2j",
+        color: "musaex-19dipnz",
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    horizontal: function horizontal(props) {
+      return [{
+        color: "musaex-19dipnz",
+        "::after_borderBottomColor": "musaex-auefp2",
+        $$css: true
+      }, {
+        "--color": props.color != null ? props.color : "initial",
+        "--imnen1": props.color != null ? props.color : "initial"
+      }];
+    }
+  }
+};
+/**
+ * @author murukal
+ *
+ * @description
+ * menu item
+ */
+var Item = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var level = _ref.level,
+    label = _ref.label,
+    prefix = _ref.prefix,
+    suffix = _ref.suffix,
+    value = _ref.value,
+    className$1 = _ref.className,
+    mode = _ref.mode,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useMenuContext = hooks.useMenuContext(),
+    selectedKeys = _useMenuContext.selectedKeys,
+    expandedKeys = _useMenuContext.expandedKeys,
+    _click = _useMenuContext.click,
+    toggle = _useMenuContext.toggle,
+    size = _useMenuContext.size;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Menu);
+  var isSelected = selectedKeys.has(value);
+  var isExpanded = expandedKeys.has(value);
+  var theme$1 = hooks$1.useTheme();
+  var hasChildren = !!props.children;
+  var itemRef = React.useRef(null);
+  var isInline = mode === "inline";
+  var isVertical = mode === "vertical";
+  var isHorizontal = mode === "horizontal";
+  // delay disappear after hover leave
+  var _useLazyBoolean = useLazyBoolean.useLazyBoolean(),
+    _useLazyBoolean2 = _slicedToArray(_useLazyBoolean, 2),
+    isOpen = _useLazyBoolean2[0],
+    _useLazyBoolean2$ = _useLazyBoolean2[1],
+    turnOn = _useLazyBoolean2$.turnOn,
+    disappear = _useLazyBoolean2$.disappear;
+  var _useHover = relax.useHover({
+      onEnter: turnOn,
+      onLeave: disappear
+    }),
+    _useHover2 = _slicedToArray(_useHover, 2),
+    hoverProps = _useHover2[1];
+  var click = relax.useEvent(function () {
+    // if item is a group, just trigger key
+    if (hasChildren) {
+      toggle(value);
+      return;
+    }
+    _click(value);
+  });
+  var _children = hooks.useItemChildren({
+    label: label,
+    prefix: prefix,
+    suffix: suffix,
+    hasChildren: hasChildren,
+    isExpanded: isExpanded,
+    isInline: isInline
+  });
+  var styled = {
+    menuItem: stylex.default.props(styles.mode.menuitem[mode]),
+    item: stylex.default.props(styles["default"].item, styles.size[size]({
+      level: level
+    }), styles.mode.item[mode](_objectSpread(_objectSpread(_objectSpread({}, isInline && {
+      backgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainerHighest]
+    }), isVertical && {
+      backgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainerHighest]
+    }), isHorizontal && {
+      outlineColor: theme$1.colors[colors.ColorToken.Primary]
+    })), isSelected && styles.selected[mode](_objectSpread(_objectSpread({}, (isInline || isVertical) && {
+      backgroundColor: theme$1.colors[colors.ColorToken.SurfaceContainerHighest],
+      color: theme$1.colors[colors.ColorToken.Primary]
+    }), isHorizontal && {
+      color: theme$1.colors[colors.ColorToken.Primary]
+    })), theme.typography.label[size])
+  };
+  return /*#__PURE__*/React.createElement("li", _objectSpread({
+    role: "menuitem",
+    ref: ref
+  }, styled.menuItem), /*#__PURE__*/React.createElement("div", _objectSpread({
+    ref: itemRef,
+    className: relax.clsx(classNames[className.MenuClassToken.Item], className$1, styled.item.className),
+    style: styled.item.style,
+    onClick: click
+  }, hoverProps), _children.prefix, _children.label, _children.suffix), isInline && props.children, !isInline && !!props.children && (/*#__PURE__*/React.createElement(popper.default, _objectSpread({
+    trigger: itemRef.current,
+    open: isOpen,
+    placement: mode === "vertical" ? "top-start" : "bottom-start"
+  }, hoverProps), props.children)));
+});
+
+exports.default = Item;

package/dist/components/menu/item.d.ts

@@ -5,13 +5,13 @@ import React from "react";
  * @description
  * menu item
  */
-declare const Item: React.ForwardRefExoticComponent<Omit<import("./types").MenuItem, "children" | "key"> & {
+declare const Item: React.ForwardRefExoticComponent<Omit<import("musae/types/menu").MenuItem, "children" | "key"> & {
     level: number;
 } & import("../../types/element").ComponentProps & {
     value: React.Key;
     suffix?: React.ReactNode;
-    onClick?: import("./types").ContextValue["click"];
+    onClick?: import("musae/types/menu").ContextValue["click"];
     children?: React.ReactNode;
-    mode: import("./types").Mode;
+    mode: import("musae/types/menu").Mode;
 } & React.RefAttributes<HTMLLIElement>>;
 export default Item;

package/dist/components/menu/{item.js → item.mjs}

@@ -2,18 +2,18 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, useRef } from 'react';
-import { useMenuContext, useItemChildren } from './hooks.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { MenuClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { spacing } from '../theme/tokens.stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { typography } from '../theme/theme.js';
+import { useMenuContext, useItemChildren } from './hooks.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { MenuClassToken } from '../../utils/class-name.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { spacing } from '../theme/tokens.stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { typography } from '../theme/theme.mjs';
 import { useHover, useEvent, clsx } from '@aiszlab/relax';
-import Popper from '../popper/popper.js';
-import { useLazyBoolean } from '../../hooks/use-lazy-boolean.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import Popper from '../popper/popper.mjs';
+import { useLazyBoolean } from '../../hooks/use-lazy-boolean.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var _excluded = ["level", "label", "prefix", "suffix", "value", "className", "mode"];
 var styles = {
@@ -209,7 +209,7 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value = _ref.value,
     className = _ref.className,
     mode = _ref.mode,
-    props$1 = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useMenuContext = useMenuContext(),
     selectedKeys = _useMenuContext.selectedKeys,
     expandedKeys = _useMenuContext.expandedKeys,
@@ -220,7 +220,7 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isSelected = selectedKeys.has(value);
   var isExpanded = expandedKeys.has(value);
   var theme = useTheme();
-  var hasChildren = !!props$1.children;
+  var hasChildren = !!props.children;
   var itemRef = useRef(null);
   var isInline = mode === "inline";
   var isVertical = mode === "vertical";
@@ -255,8 +255,8 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isInline: isInline
   });
   var styled = {
-    menuItem: props(styles.mode.menuitem[mode]),
-    item: props(styles["default"].item, styles.size[size]({
+    menuItem: _stylex.props(styles.mode.menuitem[mode]),
+    item: _stylex.props(styles["default"].item, styles.size[size]({
       level: level
     }), styles.mode.item[mode](_objectSpread(_objectSpread(_objectSpread({}, isInline && {
       backgroundColor: theme.colors[ColorToken.SurfaceContainerHighest]
@@ -279,11 +279,11 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: clsx(classNames[MenuClassToken.Item], className, styled.item.className),
     style: styled.item.style,
     onClick: click
-  }, hoverProps), _children.prefix, _children.label, _children.suffix), isInline && props$1.children, !isInline && !!props$1.children && (/*#__PURE__*/React.createElement(Popper, _objectSpread({
+  }, hoverProps), _children.prefix, _children.label, _children.suffix), isInline && props.children, !isInline && !!props.children && (/*#__PURE__*/React.createElement(Popper, _objectSpread({
     trigger: itemRef.current,
     open: isOpen,
     placement: mode === "vertical" ? "top-start" : "bottom-start"
-  }, hoverProps), props$1.children)));
+  }, hoverProps), props.children)));
 });
 
 export { Item as default };

package/dist/components/menu/menu.cjs

@@ -0,0 +1,73 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var context = require('./context.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('./hooks.cjs');
+var group = require('./group.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * menu component
+ */
+var Menu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var onClick = _ref.onClick,
+    className$1 = _ref.className,
+    style = _ref.style,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "inline" : _ref$mode,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    selectedKeys = _ref.selectedKeys,
+    expandedKeys = _ref.expandedKeys,
+    defaultExpandedKeys = _ref.defaultExpandedKeys,
+    defaultSelectedKeys = _ref.defaultSelectedKeys;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Menu);
+  var _useScrollable = relax.useScrollable({
+      orientation: hooks.useScrollOrientation(mode)
+    }),
+    targetRef = _useScrollable.targetRef,
+    _scrollTo = _useScrollable.scrollTo,
+    to = _useScrollable.to,
+    setTrigger = _useScrollable.setTrigger;
+  // context value
+  var contextValue = hooks.useContextValue({
+    selectedKeys: selectedKeys,
+    expandedKeys: expandedKeys,
+    defaultSelectedKeys: defaultSelectedKeys,
+    defaultExpandedKeys: defaultExpandedKeys,
+    onClick: onClick,
+    setTrigger: setTrigger,
+    size: size
+  });
+  React.useImperativeHandle(ref, function () {
+    return {
+      scrollTo: function scrollTo(key, duration) {
+        _scrollTo(to(key), duration);
+      }
+    };
+  });
+  var styled = {
+    className: "musaex-1n2onr6"
+  };
+  return /*#__PURE__*/React.createElement(context.default.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(group.default, {
+    ref: targetRef,
+    items: items,
+    mode: mode,
+    className: relax.clsx(classNames[className.MenuClassToken.Menu], _defineProperty({}, classNames[className.MenuClassToken.MenuHorizontal], mode === "horizontal"), className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }));
+});
+
+exports.default = Menu;

package/dist/components/menu/menu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { MenuProps, MenuRef } from "./types";
+import type { MenuProps, MenuRef } from "musae/types/menu";
 /**
  * @author murukal
  *