musae 0.2.15 → 0.2.16

package/dist/components/avatar/group.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { type AvatarGroupProps } from "./types";
-declare const Group: ({ children: _children, shape, size, max }: AvatarGroupProps) => React.JSX.Element;
+declare const Group: ({ children: _children, shape, size, max, }: AvatarGroupProps) => React.JSX.Element;
 export default Group;

package/dist/components/avatar/group.js

@@ -5,6 +5,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
 import Popover from '../popover/popover.js';
 import Avatar from './avatar.js';
+import clsx from 'clsx';
 
 var _Group = function Group(_ref) {
   var _children = _ref.children,
@@ -14,13 +15,12 @@ var _Group = function Group(_ref) {
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 3 : _ref$max;
+  var classNames = useClassNames(ComponentToken.Avatar);
   var styled = {
     className: "musae-3nfvp2 musae-87ps6o"
   };
-  var classNames = useClassNames(ComponentToken.Avatar);
   var children = useMemo(function () {
-    var __children = Children.toArray(_children);
-    var _children$reduce = __children.reduce(function (prev, child, index) {
+    var _Children$toArray$red = Children.toArray(_children).reduce(function (prev, child, index) {
         // @ts-ignore
         var element = /*#__PURE__*/cloneElement(child, {
           key: "avatars-".concat(index)
@@ -33,13 +33,15 @@ var _Group = function Group(_ref) {
         }
         return prev;
       }, [[], []]),
-      _children$reduce2 = _slicedToArray(_children$reduce, 2),
-      visible = _children$reduce2[0],
-      hidden = _children$reduce2[1];
+      _Children$toArray$red2 = _slicedToArray(_Children$toArray$red, 2),
+      visible = _Children$toArray$red2[0],
+      hidden = _Children$toArray$red2[1];
     // got hidden nodes, show ellipse node
     if (hidden.length > 0) {
       visible.push( /*#__PURE__*/React.createElement(Popover, {
-        description: /*#__PURE__*/React.createElement(_Group, null, hidden),
+        description: /*#__PURE__*/React.createElement(_Group, {
+          max: Infinity
+        }, hidden),
         key: "avatars-hidden",
         placement: "top"
       }, /*#__PURE__*/React.createElement(Avatar, {
@@ -54,7 +56,7 @@ var _Group = function Group(_ref) {
       size: size
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: (classNames[AvatarClassToken.Group], styled.className),
+    className: clsx(classNames[AvatarClassToken.Group], styled.className),
     style: styled.style
   }, children));
 };

package/dist/components/bench/bench.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BenchProps } from "./types";
+declare const Bench: ({ children, title, logo, navigations, className, style, trailing, onNavigate, location, defaultExpandedKeys, classNames: { main: mainClassName }, }: BenchProps) => React.JSX.Element;
+export default Bench;

package/dist/components/bench/bench.js

@@ -0,0 +1,150 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React from 'react';
+import { Layout } from '../layout/index.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import Divider from '../divider/divider.js';
+import { useLogo, useNavigations } from './hooks.js';
+import Menu from '../menu/menu.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import { typography } from '../theme/theme.js';
+import clsx from 'clsx';
+
+var Header = Layout.Header,
+  Main = Layout.Main,
+  Sider = Layout.Sider;
+var styles = {
+  bench: {
+    "default": {
+      $$css: true
+    },
+    sider: function sider(props) {
+      return [{
+        borderRightWidth: "musae-1xkobc8",
+        borderInlineStartWidth: null,
+        borderInlineEndWidth: null,
+        borderRightStyle: "musae-32b0ac",
+        borderInlineStartStyle: null,
+        borderInlineEndStyle: null,
+        borderRightColor: "musae-104k1kx",
+        borderInlineStartColor: null,
+        borderInlineEndColor: null,
+        paddingInline: "musae-gj1dgu",
+        paddingStart: null,
+        paddingLeft: null,
+        paddingEnd: null,
+        paddingRight: null,
+        position: "musae-7wzq59",
+        height: "musae-1r05exa",
+        top: "musae-kwake1",
+        overflowY: "musae-10wlt62 musae-r8ctv5",
+        $$css: true
+      }, {
+        "--borderRightColor": props.outlineColor != null ? props.outlineColor : "initial"
+      }];
+    },
+    main: {
+      $$css: true
+    }
+  },
+  header: {
+    "default": {
+      gap: "musae-vbka3v",
+      rowGap: null,
+      columnGap: null,
+      boxShadow: "musae-ezd0au",
+      $$css: true
+    },
+    navigation: {
+      marginLeft: "musae-19i9eir",
+      marginInlineStart: null,
+      marginInlineEnd: null,
+      marginRight: "musae-ack27t",
+      height: "musae-b27hse",
+      $$css: true
+    },
+    divider: {
+      height: "musae-lry4nc",
+      $$css: true
+    }
+  }
+};
+var Bench = function Bench(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    logo = _ref.logo,
+    _ref$navigations = _ref.navigations,
+    navigations = _ref$navigations === void 0 ? [] : _ref$navigations,
+    className = _ref.className,
+    style = _ref.style,
+    trailing = _ref.trailing,
+    onNavigate = _ref.onNavigate,
+    location = _ref.location,
+    defaultExpandedKeys = _ref.defaultExpandedKeys,
+    _ref$classNames = _ref.classNames,
+    _ref$classNames2 = _ref$classNames === void 0 ? {} : _ref$classNames,
+    mainClassName = _ref$classNames2.main;
+  var theme = useTheme();
+  var _logo = useLogo(logo);
+  var _useNavigations = useNavigations({
+      navigations: navigations,
+      onNavigate: onNavigate,
+      location: location
+    }),
+    navigate = _useNavigations.navigate,
+    topMenuItems = _useNavigations.topMenuItems,
+    sideMenuItems = _useNavigations.sideMenuItems,
+    selectedKeys = _useNavigations.selectedKeys;
+  var styled = {
+    bench: _stylex.props(styles.bench["default"]),
+    header: _stylex.props(styles.header["default"]),
+    main: _stylex.props(styles.bench.main),
+    sider: _stylex.props(styles.bench.sider({
+      outlineColor: theme.colors[ColorToken.OutlineVariant]
+    })),
+    title: _stylex.props(typography.title.large),
+    divider: _stylex.props(styles.header.divider),
+    headerNavigation: _stylex.props(styles.header.navigation)
+  };
+  return /*#__PURE__*/React.createElement(Layout, {
+    className: clsx(styled.bench.className, className),
+    style: _objectSpread(_objectSpread({}, styled.bench.style), style)
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: styled.header.className,
+    style: styled.header.style
+  }, !!_logo && /*#__PURE__*/React.createElement("img", {
+    src: _logo === null || _logo === void 0 ? void 0 : _logo.url,
+    alt: "logo"
+  }), !!_logo && ( /*#__PURE__*/React.createElement("div", {
+    className: styled.divider.className,
+    style: styled.divider.style
+  }, /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: styled.title.className,
+    style: styled.title.style
+  }, title), /*#__PURE__*/React.createElement(Menu, _objectSpread({
+    items: topMenuItems,
+    onClick: navigate,
+    mode: "horizontal",
+    className: styled.headerNavigation.className,
+    style: styled.headerNavigation.style
+  }, !!selectedKeys[0] && {
+    selectedKeys: [selectedKeys[0]]
+  })), trailing), sideMenuItems.length > 0 && ( /*#__PURE__*/React.createElement(Sider, {
+    className: styled.sider.className,
+    style: styled.sider.style
+  }, /*#__PURE__*/React.createElement(Menu, _objectSpread({
+    items: sideMenuItems,
+    onClick: navigate,
+    defaultExpandedKeys: defaultExpandedKeys
+  }, !!selectedKeys[1] && {
+    selectedKeys: [selectedKeys[1]]
+  })))), /*#__PURE__*/React.createElement(Main, {
+    className: clsx(mainClassName, styled.main.className),
+    style: styled.main.style
+  }, children));
+};
+var Bench$1 = Bench;
+
+export { Bench$1 as default };

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

@@ -0,0 +1,22 @@
+import { type Key } from "react";
+import type { BenchProps, Logo, NavigationItem } from "./types";
+import { MenuItem } from "../menu";
+/**
+ * @description
+ * logo
+ */
+export declare const useLogo: (logo?: string | Logo) => Logo | null;
+/**
+ * @description
+ * menu
+ */
+export declare const useNavigations: ({ navigations, onNavigate, location, }: {
+    navigations: NavigationItem[];
+    onNavigate: BenchProps["onNavigate"];
+    location?: string;
+}) => {
+    selectedKeys: [(Key | undefined)?, (Key | undefined)?];
+    topMenuItems: MenuItem[];
+    sideMenuItems: MenuItem[];
+    navigate: (path: Key) => void;
+};

package/dist/components/bench/hooks.js

@@ -0,0 +1,111 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useMemo } from 'react';
+import { useEvent, isUndefined } from '@aiszlab/relax';
+
+var _excluded = ["path", "children"],
+  _excluded2 = ["children"];
+/**
+ * @description
+ * logo
+ */
+var useLogo = function useLogo(logo) {
+  return useMemo(function () {
+    if (!logo) return null;
+    if (typeof logo === "string") {
+      return {
+        url: logo
+      };
+    }
+    return logo;
+  }, [logo]);
+};
+var _toMenuItem3 = function toMenuItem(_ref, parentKeys, paths) {
+  var path = _ref.path,
+    children = _ref.children,
+    item = _objectWithoutProperties(_ref, _excluded);
+  // convert children
+  var _reduce = (children !== null && children !== void 0 ? children : []).reduce(function (_ref2, child) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        _menuItems = _ref3[0],
+        _paths = _ref3[1];
+      var _toMenuItem = _toMenuItem3(child, [].concat(_toConsumableArray(parentKeys), [path]), _paths),
+        _toMenuItem2 = _slicedToArray(_toMenuItem, 2),
+        menuItem = _toMenuItem2[0],
+        paths = _toMenuItem2[1];
+      _menuItems.push(menuItem);
+      return [_menuItems, paths];
+    }, [[], new Map(paths.set(path, parentKeys))]),
+    _reduce2 = _slicedToArray(_reduce, 2),
+    _menuItems = _reduce2[0],
+    _paths = _reduce2[1];
+  // return with paths
+  return [_objectSpread({
+    key: path,
+    children: _menuItems
+  }, item), _paths];
+};
+/**
+ * @description
+ * menu
+ */
+var useNavigations = function useNavigations(_ref4) {
+  var navigations = _ref4.navigations,
+    onNavigate = _ref4.onNavigate,
+    location = _ref4.location;
+  // menu click handler => jump link
+  var navigate = useEvent(function (path) {
+    if (onNavigate) {
+      onNavigate(path.toString());
+      return;
+    }
+    window.open(path.toString(), "_self");
+  });
+  // convert navigations into diff menus
+  var _useMemo = useMemo(function () {
+      return navigations.reduce(function (_ref5, item) {
+        var _ref6 = _slicedToArray(_ref5, 3),
+          topMenuItems = _ref6[0],
+          sideNavigations = _ref6[1],
+          paths = _ref6[2];
+        var _toMenuItem4 = _toMenuItem3(item, [], paths),
+          _toMenuItem5 = _slicedToArray(_toMenuItem4, 2),
+          _toMenuItem5$ = _toMenuItem5[0],
+          children = _toMenuItem5$.children,
+          _menuItem = _objectWithoutProperties(_toMenuItem5$, _excluded2),
+          _paths = _toMenuItem5[1];
+        topMenuItems.set(item.path, _menuItem);
+        sideNavigations.set(item.path, children);
+        return [topMenuItems, sideNavigations, _paths];
+      }, [new Map(), new Map(), new Map()]);
+    }, [navigations]),
+    _useMemo2 = _slicedToArray(_useMemo, 3),
+    topMenuItems = _useMemo2[0],
+    sideNavigations = _useMemo2[1],
+    paths = _useMemo2[2];
+  // menu selected keys
+  var selectedKeys = useMemo(function () {
+    var _paths$get$at, _paths$get;
+    if (isUndefined(location)) return [];
+    return [(_paths$get$at = (_paths$get = paths.get(location)) === null || _paths$get === void 0 ? void 0 : _paths$get.at(0)) !== null && _paths$get$at !== void 0 ? _paths$get$at : location, location];
+  }, [location, paths]);
+  var sideMenuItems = useMemo(function () {
+    var _sideNavigations$get;
+    if (!selectedKeys[0]) {
+      return [];
+    }
+    return (_sideNavigations$get = sideNavigations.get(selectedKeys[0])) !== null && _sideNavigations$get !== void 0 ? _sideNavigations$get : [];
+  }, [sideNavigations, selectedKeys]);
+  return {
+    selectedKeys: selectedKeys,
+    topMenuItems: useMemo(function () {
+      return Array.from(topMenuItems.values());
+    }, [topMenuItems]),
+    sideMenuItems: sideMenuItems,
+    navigate: navigate
+  };
+};
+
+export { useLogo, useNavigations };

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

@@ -0,0 +1,4 @@
+import Bench from "./bench";
+import type { NavigationItem } from "./types";
+export { Bench };
+export type { NavigationItem };

package/dist/components/bench/types.d.ts

@@ -0,0 +1,78 @@
+import { Key, ReactNode } from "react";
+import { ComponentProps } from "../../types/element";
+export type Logo = {
+    /**
+     * @description
+     * url
+     */
+    url: string;
+};
+export type NavigationItem = {
+    /**
+     * @description
+     * path
+     */
+    path: string;
+    /**
+     * @description
+     * label
+     * @default void 0
+     */
+    label: ReactNode;
+    /**
+     * @description
+     * children
+     */
+    children?: NavigationItem[];
+};
+/**
+ * @description
+ * workbench props
+ */
+export type BenchProps = ComponentProps & {
+    /**
+     * @description
+     * logo
+     */
+    logo?: string | Logo;
+    /**
+     * @description
+     * title
+     */
+    title?: ReactNode;
+    /**
+     * @description
+     * children
+     */
+    children?: ReactNode;
+    /**
+     * @description
+     * navigations
+     */
+    navigations?: NavigationItem[];
+    /**
+     * @description
+     * trailing
+     */
+    trailing?: ReactNode;
+    /**
+     * @description
+     * navigate handler
+     */
+    onNavigate?: (path: string) => void;
+    /**
+     * @description
+     * location
+     */
+    location?: string;
+    /**
+     * @description
+     * default expanded keys
+     */
+    defaultExpandedKeys?: Key[];
+    /**
+     * @description
+     * class names
+     */
+    classNames?: Partial<Record<"main", string>>;
+};

package/dist/components/dialog/dialog.js

@@ -12,7 +12,7 @@ var Dialog = function Dialog(_ref) {
     _ref$closable = _ref.closable,
     closable = _ref$closable === void 0 ? true : _ref$closable,
     props = _objectWithoutProperties(_ref, _excluded);
-  /// `Portal` should disappear after `Dialog` disappear completely
+  /// `Portal` should disappear after `Dialog` disappear animation completely
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     _isVisible = _useBoolean2[0],

package/dist/components/dialog/popup.js

@@ -114,7 +114,7 @@ var Popup = function Popup(_ref) {
   var theme = useTheme();
   var panelRef = useRef(null);
   var overlayRef = useRef(null);
-  /// children render hooks
+  // children render hooks
   var footer = useFooter([props$1.footer, props$1.onConfirm, onClose]);
   var _useClosable = useClosable({
       closable: closable,
@@ -159,7 +159,7 @@ var Popup = function Popup(_ref) {
     }))();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
-  /// when open, try focus dialog
+  // when open, try focus dialog
   useEffect(function () {
     if (!open) return;
     if (contains(scope.current, document.activeElement)) return;

package/dist/components/dialog/types.d.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties, ReactNode } from "react";
 import type { Closable } from "../../hooks/use-closable";
 import { RequiredIn } from "@aiszlab/relax/types";
+import { PortalProps } from "../portal/types";
 /**
  * @description
  * dialog props
@@ -62,6 +63,10 @@ export interface DialogProps {
      * @default void 0
      */
     onClose?: VoidFunction;
+    /**
+     * @link {PortalProps.container}
+     */
+    container?: PortalProps["container"];
 }
 /**
  * @description

package/dist/components/divider/divider.d.ts

@@ -1,4 +1,4 @@
 import { type DividerProps } from "./types";
 import React from "react";
-declare const Divider: ({ align, children, type, className, style }: DividerProps) => React.JSX.Element;
+declare const Divider: ({ align, children, type, className, style, }: DividerProps) => React.JSX.Element;
 export default Divider;

package/dist/components/divider/divider.js

@@ -32,7 +32,7 @@ var styles = {
     },
     vertical: function vertical(props) {
       return [{
-        height: "musae-1yri8c6",
+        width: "musae-131wp52",
         backgroundColor: "musae-q1mx2j",
         $$css: true
       }, {
@@ -132,13 +132,13 @@ var Divider = function Divider(_ref) {
       backgroundColor: theme.colors[ColorToken.OutlineVariant],
       offset: offset
     })),
-    label: props(typography.body.small, styles.label[type])
+    label: props(styles.label[type], typography.body.small)
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx(styled.divider.className, className, classNames[DividerClassToken.Divider]),
+    className: clsx(classNames[DividerClassToken.Divider], className, styled.divider.className),
     style: _objectSpread(_objectSpread({}, styled.divider.style), style)
   }, !!children && ( /*#__PURE__*/React.createElement("span", {
-    className: clsx(styled.label.className, classNames[DividerClassToken.Label]),
+    className: clsx(classNames[DividerClassToken.Label], styled.label.className),
     style: styled.label.style
   }, children)));
 };

package/dist/components/drawer/drawer.js

@@ -16,7 +16,7 @@ var Drawer = function Drawer(_ref) {
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "right" : _ref$placement,
     props = _objectWithoutProperties(_ref, _excluded);
-  /// `Portal` should disappear after `Dialog` disappear completely
+  /// `Portal` should disappear after `Drawer` disappear animation completely
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     _isVisible = _useBoolean2[0],

package/dist/components/layout/header.js

@@ -8,6 +8,8 @@ import clsx from 'clsx';
 var styles = {
   header: function header(props) {
     return [{
+      display: "musae-78zum5",
+      alignItems: "musae-6s0dn4",
       height: "musae-b4kbli",
       paddingInline: "musae-1mmg125",
       paddingStart: null,
@@ -18,8 +20,6 @@ var styles = {
       position: "musae-7wzq59",
       top: "musae-13vifvy",
       zIndex: "musae-1ac462h",
-      display: "musae-78zum5",
-      alignItems: "musae-6s0dn4",
       backgroundColor: "musae-q1mx2j",
       $$css: true
     }, {

package/dist/components/layout/sider.d.ts

@@ -1,4 +1,4 @@
-import { SiderProps } from "./types";
+import type { SiderProps } from "./types";
 import React from "react";
-declare const Sider: (props: SiderProps) => React.JSX.Element;
+declare const Sider: ({ style, children, className }: SiderProps) => React.JSX.Element;
 export default Sider;

package/dist/components/layout/sider.js

@@ -1,18 +1,16 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { Grid } from '../grid/index.js';
 import React from 'react';
-import clsx from 'clsx';
 
-var Sider = function Sider(props) {
-  var styled = {
-    className: "musae-1r05exa musae-7wzq59 musae-kwake1"
-  };
+var Sider = function Sider(_ref) {
+  var style = _ref.style,
+    children = _ref.children,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(Grid.Col, {
-    style: _objectSpread(_objectSpread({}, styled.style), props.style),
-    className: clsx(props.className, styled.className),
+    style: style,
+    className: className,
     span: 5,
     as: "aside"
-  }, props.children);
+  }, children);
 };
 
 export { Sider as default };

package/dist/components/menu/context.js

@@ -12,7 +12,6 @@ var Context = /*#__PURE__*/createContext({
   click: function click() {},
   toggle: function toggle() {},
   collect: function collect() {},
-  variant: "filled",
   size: "medium"
 });
 

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

@@ -1,5 +1,5 @@
 import React, { type ReactNode } from "react";
-import type { ContextValue, MenuProps, Mode, Variant } from "./types";
+import type { ContextValue, MenuProps, Mode } from "./types";
 import type { Size } from "../../types/element";
 /**
  * @description
@@ -26,10 +26,9 @@ export declare const useItemChildren: ({ prefix, label, suffix, hasChildren, isE
  * @description
  * context value
  */
-export declare const useContextValue: ({ onClick, setTrigger, variant, size, ...props }: {
+export declare const useContextValue: ({ onClick, setTrigger, size, ...props }: {
     onClick: MenuProps["onClick"];
     setTrigger: ContextValue["collect"];
-    variant: Variant;
     size: Size;
 } & Pick<MenuProps, "defaultExpandedKeys" | "defaultSelectedKeys" | "expandedKeys" | "selectedKeys">) => ContextValue;
 /**

package/dist/components/menu/hooks.js

@@ -9,7 +9,7 @@ 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';
 
-var _excluded = ["onClick", "setTrigger", "variant", "size"];
+var _excluded = ["onClick", "setTrigger", "size"];
 var styles = {
   collapser: function collapser(props) {
     return [{
@@ -83,7 +83,6 @@ var useContextValue = function useContextValue(_ref2) {
   var _props$defaultSelecte, _props$defaultExpande;
   var onClick = _ref2.onClick,
     setTrigger = _ref2.setTrigger,
-    variant = _ref2.variant,
     size = _ref2.size,
     props = _objectWithoutProperties(_ref2, _excluded);
   var _useControlledState = useControlledState(props.selectedKeys, {
@@ -141,13 +140,12 @@ var useContextValue = function useContextValue(_ref2) {
     return {
       selectedKeys: selectedKeys,
       expandedKeys: expandedKeys,
-      variant: variant,
       click: click,
       toggle: toggle,
       collect: collect,
       size: size
     };
-  }, [selectedKeys, expandedKeys, click, toggle, collect, variant, size]);
+  }, [selectedKeys, expandedKeys, click, toggle, collect, size]);
 };
 /**
  * @description

package/dist/components/menu/item.js

@@ -6,7 +6,7 @@ import { useMenuContext, useItemChildren } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, 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 { sizes, spacing } from '../theme/tokens.stylex.js';
+import { spacing } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
@@ -25,91 +25,66 @@ var styles = {
       userSelect: "musae-87ps6o",
       willChange: "musae-1aaibe2",
       transitionProperty: "musae-xy01e9",
-      transitionDuration: "musae-1g2r6go",
+      transitionDuration: "musae-13dflua",
       $$css: true
     }
   },
-  hovered: {
-    filled: function filled(props) {
-      return [{
-        backgroundColor: "musae-rl4t6d",
-        $$css: true
-      }, {
-        "--1e2mv7m": props.backgroundColor != null ? props.backgroundColor : "initial"
-      }];
-    },
-    outlined: function outlined(props) {
-      return [{
-        border: "musae-1eubc7e",
-        borderWidth: null,
-        borderInlineWidth: null,
-        borderInlineStartWidth: null,
-        borderLeftWidth: null,
-        borderInlineEndWidth: null,
-        borderRightWidth: null,
-        borderBlockWidth: null,
-        borderTopWidth: null,
-        borderBottomWidth: null,
-        borderStyle: null,
-        borderInlineStyle: null,
-        borderInlineStartStyle: null,
-        borderLeftStyle: null,
-        borderInlineEndStyle: null,
-        borderRightStyle: null,
-        borderBlockStyle: null,
-        borderTopStyle: null,
-        borderBottomStyle: null,
-        borderColor: null,
-        borderInlineColor: null,
-        borderInlineStartColor: null,
-        borderLeftColor: null,
-        borderInlineEndColor: null,
-        borderRightColor: null,
-        borderBlockColor: null,
-        borderTopColor: null,
-        borderBottomColor: null,
-        $$css: true
-      }, {
-        "--1n3s2ii": "".concat(sizes.smallest, " solid ").concat(props.borderColor) != null ? "".concat(sizes.smallest, " solid ").concat(props.borderColor) : "initial"
-      }];
-    },
-    text: function text(props) {
-      return [{
-        color: "musae-vm0q45",
+  mode: {
+    menuitem: {
+      horizontal: {
         $$css: true
-      }, {
-        "--1113oo7": props.color != null ? props.color : "initial"
-      }];
-    }
-  },
-  selected: {
-    filled: function filled(props) {
-      return [{
-        backgroundColor: "musae-q1mx2j",
-        color: "musae-19dipnz",
+      },
+      vertical: {
+        marginBottom: "musae-rsi211",
+        marginTop: "musae-3yben5 musae-cu8lob",
         $$css: true
-      }, {
-        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-        "--color": props.color != null ? props.color : "initial"
-      }];
-    },
-    outlined: function outlined(props) {
-      return [{
-        backgroundColor: "musae-q1mx2j",
-        color: "musae-19dipnz",
+      },
+      inline: {
+        marginBottom: "musae-rsi211",
+        marginTop: "musae-3yben5 musae-cu8lob",
         $$css: true
-      }, {
-        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-        "--color": props.color != null ? props.color : "initial"
-      }];
+      }
     },
-    text: function text(props) {
-      return [{
-        color: "musae-19dipnz",
-        $$css: true
-      }, {
-        "--color": props.color != null ? props.color : "initial"
-      }];
+    item: {
+      horizontal: function horizontal(props) {
+        return [{
+          height: "musae-b27hse",
+          position: "musae-1n2onr6",
+          "::after_content": "musae-1s928wv",
+          "::after_position": "musae-1j6awrg",
+          "::after_insetInline": "musae-b7ltuz",
+          "::after_insetInlineStart": null,
+          "::after_insetInlineEnd": null,
+          "::after_left": null,
+          "::after_right": null,
+          "::after_bottom": "musae-1xrz1ek",
+          "::after_borderBottomWidth": "musae-zueuoj",
+          "::after_willChange": "musae-7h5a58",
+          "::after_transitionProperty": "musae-w91p3u",
+          "::after_transitionDuration": "musae-t0fc71",
+          ":not(:hover)::after_borderBottomColor": "musae-q3rc72",
+          ":hover::after_borderBottomColor": "musae-1kev6kp",
+          $$css: true
+        }, {
+          "--1nc1zz8": props.outlineColor != null ? props.outlineColor : "initial"
+        }];
+      },
+      vertical: function vertical(props) {
+        return [{
+          backgroundColor: "musae-rl4t6d",
+          $$css: true
+        }, {
+          "--1e2mv7m": props.backgroundColor != null ? props.backgroundColor : "initial"
+        }];
+      },
+      inline: function inline(props) {
+        return [{
+          backgroundColor: "musae-rl4t6d",
+          $$css: true
+        }, {
+          "--1e2mv7m": props.backgroundColor != null ? props.backgroundColor : "initial"
+        }];
+      }
     }
   },
   size: {
@@ -189,32 +164,36 @@ var styles = {
       }];
     }
   },
-  mode: {
-    menuitem: {
-      horizontal: {
-        $$css: true
-      },
-      vertical: {
-        marginBottom: "musae-rsi211",
-        marginTop: "musae-3yben5 musae-cu8lob",
-        $$css: true
-      },
-      inline: {
-        marginBottom: "musae-rsi211",
-        marginTop: "musae-3yben5 musae-cu8lob",
+  selected: {
+    inline: function inline(props) {
+      return [{
+        backgroundColor: "musae-q1mx2j",
+        color: "musae-19dipnz",
         $$css: true
-      }
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
     },
-    item: {
-      horizontal: {
-        $$css: true
-      },
-      vertical: {
+    vertical: function vertical(props) {
+      return [{
+        backgroundColor: "musae-q1mx2j",
+        color: "musae-19dipnz",
         $$css: true
-      },
-      inline: {
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    horizontal: function horizontal(props) {
+      return [{
+        color: "musae-19dipnz",
+        "::after_borderBottomColor": "musae-auefp2",
         $$css: true
-      }
+      }, {
+        "--color": props.color != null ? props.color : "initial",
+        "--imnen1": props.color != null ? props.color : "initial"
+      }];
     }
   }
 };
@@ -238,7 +217,6 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
     expandedKeys = _useMenuContext.expandedKeys,
     _click = _useMenuContext.click,
     toggle = _useMenuContext.toggle,
-    variant = _useMenuContext.variant,
     size = _useMenuContext.size;
   var classNames = useClassNames(ComponentToken.Menu);
   var isSelected = selectedKeys.has(value);
@@ -247,6 +225,8 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var hasChildren = !!props$1.children;
   var itemRef = useRef(null);
   var isInline = mode === "inline";
+  var isVertical = mode === "vertical";
+  var isHorizontal = mode === "horizontal";
   // delay disappear after hover leave
   var _useLazyBoolean = useLazyBoolean(),
     _useLazyBoolean2 = _slicedToArray(_useLazyBoolean, 2),
@@ -280,16 +260,18 @@ var Item = /*#__PURE__*/forwardRef(function (_ref, ref) {
     menuItem: props(styles.mode.menuitem[mode]),
     item: props(styles["default"].item, styles.size[size]({
       level: level
-    }), styles.hovered[variant](_objectSpread(_objectSpread(_objectSpread({}, variant === "text" && {
-      color: theme.colors[ColorToken.OnPrimaryFixedVariant]
-    }), variant === "filled" && {
+    }), styles.mode.item[mode](_objectSpread(_objectSpread(_objectSpread({}, isInline && {
+      backgroundColor: theme.colors[ColorToken.SurfaceContainerHighest]
+    }), isVertical && {
       backgroundColor: theme.colors[ColorToken.SurfaceContainerHighest]
-    }), variant === "outlined" && {
-      borderColor: theme.colors[ColorToken.SurfaceContainerHighest]
-    })), isSelected && styles.selected[variant]({
+    }), isHorizontal && {
+      outlineColor: theme.colors[ColorToken.Primary]
+    })), isSelected && styles.selected[mode](_objectSpread(_objectSpread({}, (isInline || isVertical) && {
       backgroundColor: theme.colors[ColorToken.SurfaceContainerHighest],
       color: theme.colors[ColorToken.Primary]
-    }), typography.label[size])
+    }), isHorizontal && {
+      color: theme.colors[ColorToken.Primary]
+    })), typography.label[size])
   };
   return /*#__PURE__*/React.createElement("li", _objectSpread({
     role: "menuitem",

package/dist/components/menu/menu.js

@@ -19,8 +19,6 @@ var Menu = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick,
     className = _ref.className,
     style = _ref.style,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "filled" : _ref$variant,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$mode = _ref.mode,
@@ -47,7 +45,6 @@ var Menu = /*#__PURE__*/forwardRef(function (_ref, ref) {
     defaultExpandedKeys: defaultExpandedKeys,
     onClick: onClick,
     setTrigger: setTrigger,
-    variant: variant,
     size: size
   });
   useImperativeHandle(ref, function () {

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

@@ -1,7 +1,6 @@
 import type { Key, ReactNode } from "react";
 import type { ComponentProps, Size } from "../../types/element";
 import type { WithLevel } from "../../types/element";
-export type Variant = "filled" | "outlined" | "text";
 export type Mode = "vertical" | "horizontal" | "inline";
 /**
  * @author murukal
@@ -35,7 +34,6 @@ export interface ContextValue {
      * expanded keys
      */
     expandedKeys: Set<Key>;
-    variant: Variant;
     size: Size;
 }
 /**
@@ -56,12 +54,6 @@ export interface MenuProps extends ComponentProps {
      * mode
      */
     mode?: Mode;
-    /**
-     * @description
-     * you can use the variant in the Menu component to change the hover style of the Menu items.
-     * @default "filled"
-     */
-    variant?: Variant;
     /**
      * @description
      * size

package/dist/index.d.ts

@@ -56,6 +56,7 @@ export { VisuallyHidden } from "./components/visually-hidden";
 export { NumberInput } from "./components/number-input";
 export { Popconfirm } from "./components/popconfirm";
 export { Highlight } from "./components/highlight";
+export { Bench } from "./components/bench";
 /**
  * @description
  * hooks
@@ -71,3 +72,4 @@ export type { Option } from "./types/option";
 export type { MenuItem, MenuRef } from "./components/menu";
 export type { TreeProps } from "./components/tree";
 export type { TourStep } from "./components/tour";
+export type { NavigationItem } from "./components/bench";

package/dist/index.js

@@ -53,6 +53,7 @@ export { default as VisuallyHidden } from './components/visually-hidden/visually
 export { default as NumberInput } from './components/number-input/number-input.js';
 export { default as Popconfirm } from './components/popconfirm/popconfirm.js';
 export { default as Highlight } from './components/highlight/highlight.js';
+export { default as Bench } from './components/bench/bench.js';
 export { useMessage } from './components/message/hooks.js';
 export { default as Message } from './components/message/messager.js';
 export { useNotification } from './components/notification/hooks.js';

package/dist/stylex.css

@@ -35,7 +35,6 @@
 .musae-1jb30j6:not(#\#){padding:var(--musae-1wblvyz)}
 .musae-12ldsqu:not(#\#){padding:var(--musae-oohzsl)}
 .musae-8kignx:not(#\#){padding:var(--musae-qk2ac7)}
-.musae-1eubc7e:hover:not(#\#){border:var(--1n3s2ii,revert)}
 .musae-9r1u3d:not(#\#):not(#\#){border-color:transparent}
 .musae-eqt46j:not(#\#):not(#\#){border-color:var(--borderColor,revert)}
 .musae-12oqio5:not(#\#):not(#\#){border-radius:4px}
@@ -249,7 +248,6 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-rycbv3:not(#\#):not(#\#):not(#\#){transform:translateX(50%) translateY(-50%)}
 .musae-1vfo23u:not(#\#):not(#\#):not(#\#){transform:translateX(50%) translateY(50%)}
 .musae-1v0jg1i:not(#\#):not(#\#):not(#\#){transform:var(--transform,revert)}
-.musae-1g2r6go:not(#\#):not(#\#):not(#\#){transition-duration:.1s}
 .musae-13dflua:not(#\#):not(#\#):not(#\#){transition-duration:.2s}
 .musae-1d8287x:not(#\#):not(#\#):not(#\#){transition-duration:.3s}
 .musae-fagghw:not(#\#):not(#\#):not(#\#){transition-property:all}
@@ -299,6 +297,9 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-43481e:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--borderBottomColor,revert)}
 .musae-1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
 .musae-lntmim:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:var(--musae-1ax7z96)}
+.musae-104k1kx:not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--borderRightColor,revert)}
+.musae-32b0ac:not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:solid}
+.musae-1xkobc8:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:var(--musae-1ax7z96)}
 .musae-is9nib:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--borderTopColor,revert)}
 .musae-13fuv20:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:solid}
 .musae-1yeim8r:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:var(--musae-1ax7z96)}
@@ -335,6 +336,8 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-hq7bbv:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-15cw4i4)}
 .musae-a4cli4:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-1tzp6vk)}
 .musae-rsi211:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-qk2ac7)}
+.musae-19i9eir:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:var(--musae-1ncxh3n)}
+.musae-ack27t:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:auto}
 .musae-1vc729f:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:var(--musae-qk2ac7)}
 .musae-dj266r:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:0}
 .musae-lpx92y:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--musae-1qsoxbc))}
@@ -402,6 +405,8 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-145rzd9:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--musae-rlgvtq)}
 .musae-1ha45ep:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--musae-xrqq76)}
 .musae-17fnjtu:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--width,revert)}
+.musae-q3rc72:not(:hover):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-bottom-color:transparent}
+.musae-1kev6kp:hover:not(#\#):not(#\#):not(#\#):not(#\#)::after{border-bottom-color:var(--1nc1zz8,revert)}
 .musae-1su0kt9:not(:last-of-type):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:var(--musae-rlgvtq)}
 .musae-1o8gf8:not(:last-of-type):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:50%}
 .musae-vpkyr8:not(:last-of-type):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--musae-1ax7z96)}
@@ -425,6 +430,7 @@ html[dir='rtl'] .musae-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musae-ilzmfn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-width:var(--musae-1hydgie)}
 .musae-1nc033x:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-block:0}
 .musae-d54j2p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-block:0}
+.musae-b7ltuz:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline:0}
 .musae-t448kv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition:all .2s}
 .musae-1uowca5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar{background-color:transparent}
 .musae-27d4w3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--15iyedw,revert)}
@@ -460,16 +466,21 @@ html[dir='rtl'] .musae-91zhsk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#
 .musae-q1m6zb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translate(100%,-160%) rotate(45deg)}
 .musae-t0fc71:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-duration:.2s}
 .musae-6orayw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-property:border-color,border-width}
+.musae-w91p3u:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-property:border-color}
 .musae-170pinb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{visibility:visible}
 .musae-11srvyv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{visibility:visible}
 .musae-yttlx6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{will-change:border-color,border-width}
+.musae-7h5a58:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{will-change:border-color}
 .musae-c28cl8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(root){z-index:var(--musae-1vh8wei)}
 .musae-ktw8en:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(root){z-index:var(--musae-1vh8wei)}
 .musae-1ly6cpr:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:var(--musae-1vh8wei)}
 .musae-9xs3e7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(root){z-index:var(--musae-dlxqgz)}
 .musae-qotmtd:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(root){z-index:var(--musae-dlxqgz)}
+.musae-auefp2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-bottom-color:var(--imnen1,revert)}
+.musae-zueuoj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-bottom-width:var(--musae-jdzqnm)}
 .musae-1p9jk5k:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-left-width:var(--musae-1aj7t22)}
 .musae-1dn9wut:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-top-width:var(--musae-1aj7t22)}
+.musae-1xrz1ek:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{bottom:0}
 .musae-ec44on:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:calc(var(--musae-1l9c3uf) / 2)}
 .musae-17xd6cp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:var(--12qatcd,revert)}
 .musae-1yecmy3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:var(--1whluux,revert)}

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "musae",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "test": "jest",
+    "test:coverage": "jest --coverage",
     "dev": "rollup -c -w --environment NODE_ENV:development",
     "build": "rollup -c --environment NODE_ENV:production",
     "prepublishOnly": "rm -rf dist && npm run build",
-    "preinstall": "npx @aiszlab/watchdog preinstall"
+    "preinstall": "npx @aiszlab/watchdog preinstall",
+    "authors": "zx scripts/contributors.mjs"
   },
   "exports": {
     ".": {
@@ -59,7 +61,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/dom-view-transitions": "^1.0.5",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.14",
+    "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "babel-jest": "^29.7.0",
@@ -71,7 +73,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.20.0",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "zx": "^8.1.4"
   },
   "peerDependencies": {
     "react": "^18",