musae 0.2.26 → 0.3.1

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

@@ -1,4 +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 }, elevation, guidance, }: BenchProps) => React.JSX.Element;
+import type { BenchProps } from "musae/types/bench";
+declare const Bench: ({ children, title, logo, navigations, className, style, trailing, onNavigate, location, defaultExpandedKeys, classNames: { main: mainClassName }, elevation, layout, }: BenchProps) => React.JSX.Element;
 export default Bench;

package/dist/components/bench/{bench.js → bench.mjs}

@@ -1,14 +1,14 @@
 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 { elevations } from '../theme/tokens.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 { Layout } from '../layout/index.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { elevations } from '../theme/tokens.stylex.mjs';
+import Divider from '../divider/divider.mjs';
+import { useLogo, useNavigations } from './hooks.mjs';
+import Menu from '../menu/menu.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { typography } from '../theme/theme.mjs';
 import { clsx } from '@aiszlab/relax';
 
 var Header = Layout.Header,
@@ -92,15 +92,15 @@ var Bench = function Bench(_ref) {
     mainClassName = _ref$classNames2.main,
     _ref$elevation = _ref.elevation,
     elevation = _ref$elevation === void 0 ? "xsmall" : _ref$elevation,
-    _ref$guidance = _ref.guidance,
-    guidance = _ref$guidance === void 0 ? "top-side" : _ref$guidance;
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? "mix" : _ref$layout;
   var theme = useTheme();
   var _logo = useLogo(logo);
   var _useNavigations = useNavigations({
       navigations: navigations,
       onNavigate: onNavigate,
       location: location,
-      guidance: guidance
+      layout: layout
     }),
     navigate = _useNavigations.navigate,
     topMenuItems = _useNavigations.topMenuItems,
@@ -158,6 +158,5 @@ var Bench = function Bench(_ref) {
     style: styled.main.style
   }, children));
 };
-var Bench$1 = Bench;
 
-export { Bench$1 as default };
+export { Bench as default };

package/dist/components/bench/hooks.cjs

@@ -0,0 +1,129 @@
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+
+var _excluded = ["path", "children"],
+  _excluded2 = ["children"];
+/**
+ * @description
+ * logo
+ */
+var useLogo = function useLogo(logo) {
+  return React.useMemo(function () {
+    if (!logo) return null;
+    if (typeof logo === "string") {
+      return {
+        url: logo
+      };
+    }
+    return logo;
+  }, [logo]);
+};
+var _toMenuItem3 = function toMenuItem(_ref, parentKeys) {
+  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])),
+        _toMenuItem2 = _slicedToArray(_toMenuItem, 2),
+        menuItem = _toMenuItem2[0],
+        paths = _toMenuItem2[1];
+      _menuItems.push(menuItem);
+      return [_menuItems, new Map([].concat(_toConsumableArray(_paths), _toConsumableArray(paths)))];
+    }, [[], new Map([[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,
+    layout = _ref4.layout;
+  // menu click handler => jump link
+  var navigate = relax.useEvent(function (path) {
+    if (onNavigate) {
+      onNavigate(path.toString());
+      return;
+    }
+    window.open(path.toString(), "_self");
+  });
+  // convert navigations into diff menus
+  var _useMemo = React.useMemo(function () {
+      return navigations.reduce(function (_ref5, item) {
+        var _ref6 = _slicedToArray(_ref5, 3),
+          _topNavigations = _ref6[0],
+          _sideNavigations = _ref6[1],
+          _paths = _ref6[2];
+        var _toMenuItem4 = _toMenuItem3(item, []),
+          _toMenuItem5 = _slicedToArray(_toMenuItem4, 2),
+          _toMenuItem5$ = _toMenuItem5[0],
+          children = _toMenuItem5$.children,
+          _menuItem = _objectWithoutProperties(_toMenuItem5$, _excluded2),
+          ___paths = _toMenuItem5[1];
+        var __paths = new Map([].concat(_toConsumableArray(___paths), _toConsumableArray(_paths)));
+        if (layout === "side") {
+          _sideNavigations.set(item.path, [_objectSpread(_objectSpread({}, _menuItem), {}, {
+            children: children
+          })]);
+          return [_topNavigations, _sideNavigations, __paths];
+        }
+        _topNavigations.set(item.path, _menuItem);
+        _sideNavigations.set(item.path, children);
+        return [_topNavigations, _sideNavigations, __paths];
+      }, [new Map(), new Map(), new Map()]);
+    }, [layout, navigations]),
+    _useMemo2 = _slicedToArray(_useMemo, 3),
+    topNavigations = _useMemo2[0],
+    sideNavigations = _useMemo2[1],
+    paths = _useMemo2[2];
+  // menu selected keys
+  var selectedKeys = React.useMemo(function () {
+    var _paths$get$at, _paths$get;
+    if (relax.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]);
+  // side menu
+  var sideMenuItems = React.useMemo(function () {
+    var _sideNavigations$get;
+    // top menu items is empty, show all in side menu
+    if (topNavigations.size === 0) {
+      return Array.from(sideNavigations.values()).flatMap(function () {
+        var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        return items;
+      }, []);
+    }
+    // top-side relation
+    if (!selectedKeys[0]) return [];
+    return (_sideNavigations$get = sideNavigations.get(selectedKeys[0])) !== null && _sideNavigations$get !== void 0 ? _sideNavigations$get : [];
+  }, [selectedKeys, sideNavigations, topNavigations]);
+  // top menu items
+  var topMenuItems = React.useMemo(function () {
+    return Array.from(topNavigations.values());
+  }, [topNavigations]);
+  return {
+    selectedKeys: selectedKeys,
+    topMenuItems: topMenuItems,
+    sideMenuItems: sideMenuItems,
+    navigate: navigate
+  };
+};
+
+exports.useLogo = useLogo;
+exports.useNavigations = useNavigations;

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

@@ -1,6 +1,6 @@
 import { type Key } from "react";
-import type { BenchProps, Guidance, Logo, NavigationItem } from "./types";
-import type { MenuItem } from "../menu";
+import type { BenchProps, Layout, Logo, NavigationItem } from "musae/types/bench";
+import type { MenuItem } from "musae/types/menu";
 /**
  * @description
  * logo
@@ -10,11 +10,11 @@ export declare const useLogo: (logo?: string | Logo) => Logo | null;
  * @description
  * menu
  */
-export declare const useNavigations: ({ navigations, onNavigate, location, guidance, }: {
+export declare const useNavigations: ({ navigations, onNavigate, location, layout, }: {
     navigations: NavigationItem[];
     onNavigate: BenchProps["onNavigate"];
     location?: string;
-    guidance: Guidance;
+    layout: Layout;
 }) => {
     selectedKeys: [(Key | undefined)?, (Key | undefined)?];
     topMenuItems: MenuItem[];

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

@@ -55,7 +55,7 @@ var useNavigations = function useNavigations(_ref4) {
   var navigations = _ref4.navigations,
     onNavigate = _ref4.onNavigate,
     location = _ref4.location,
-    guidance = _ref4.guidance;
+    layout = _ref4.layout;
   // menu click handler => jump link
   var navigate = useEvent(function (path) {
     if (onNavigate) {
@@ -78,7 +78,7 @@ var useNavigations = function useNavigations(_ref4) {
           _menuItem = _objectWithoutProperties(_toMenuItem5$, _excluded2),
           ___paths = _toMenuItem5[1];
         var __paths = new Map([].concat(_toConsumableArray(___paths), _toConsumableArray(_paths)));
-        if (guidance === "side") {
+        if (layout === "side") {
           _sideNavigations.set(item.path, [_objectSpread(_objectSpread({}, _menuItem), {}, {
             children: children
           })]);
@@ -88,7 +88,7 @@ var useNavigations = function useNavigations(_ref4) {
         _sideNavigations.set(item.path, children);
         return [_topNavigations, _sideNavigations, __paths];
       }, [new Map(), new Map(), new Map()]);
-    }, [guidance, navigations]),
+    }, [layout, navigations]),
     _useMemo2 = _slicedToArray(_useMemo, 3),
     topNavigations = _useMemo2[0],
     sideNavigations = _useMemo2[1],

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

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

package/dist/components/breadcrumb/breadcrumb.cjs

@@ -0,0 +1,60 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var theme = require('../theme/theme.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var item = require('./item.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  breadcrumb: function breadcrumb(props) {
+    return [{
+      color: "musaex-19dipnz",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }];
+  }
+};
+var Breadcrumb = function Breadcrumb(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    className$1 = _ref.className,
+    _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? "/" : _ref$separator,
+    style = _ref.style;
+  var theme$1 = hooks.useTheme();
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Breadcrumb);
+  /// there is no need to render the breadcrumb when there is no items
+  if (items.length === 0) {
+    return null;
+  }
+  var styled = {
+    breadcrumb: stylex.default.props(theme.typography.label.large, styles.breadcrumb({
+      color: theme$1.colors[colors.ColorToken.OnSurfaceVariant]
+    })),
+    navigations: {
+      className: "musaex-e8uvvx musaex-78zum5 musaex-1a02dak"
+    }
+  };
+  return /*#__PURE__*/React.createElement("nav", {
+    className: relax.clsx(classNames[className.BreadcrumbClassToken.Breadcrumb], className$1, styled.breadcrumb.className),
+    style: _objectSpread(_objectSpread({}, styled.breadcrumb.style), style)
+  }, /*#__PURE__*/React.createElement("ol", _objectSpread({}, styled.navigations), items.map(function (item$1, index) {
+    return /*#__PURE__*/React.createElement(item.default, {
+      key: index,
+      label: item$1.label,
+      max: index === items.length - 1,
+      href: item$1.href,
+      separator: separator
+    });
+  })));
+};
+
+exports.default = Breadcrumb;

package/dist/components/breadcrumb/{breadcrumb.js → breadcrumb.mjs}

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { typography } from '../theme/theme.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { BreadcrumbClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { typography } from '../theme/theme.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { BreadcrumbClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import Item from './item.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import Item from './item.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   breadcrumb: function breadcrumb(props) {
@@ -34,7 +34,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     return null;
   }
   var styled = {
-    breadcrumb: props(typography.label.large, styles.breadcrumb({
+    breadcrumb: _stylex.props(typography.label.large, styles.breadcrumb({
       color: theme.colors[ColorToken.OnSurfaceVariant]
     })),
     navigations: {
@@ -54,6 +54,5 @@ var Breadcrumb = function Breadcrumb(_ref) {
     });
   })));
 };
-var Breadcrumb$1 = Breadcrumb;
 
-export { Breadcrumb$1 as default };
+export { Breadcrumb as default };

package/dist/components/breadcrumb/item.cjs

@@ -0,0 +1,88 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  navigation: {
+    "default": function _default(props) {
+      return [{
+        ":last-of-type_color": "musaex-1befqep",
+        $$css: true
+      }, {
+        "--h3adkr": props.color != null ? props.color : "initial"
+      }];
+    },
+    link: function link(props) {
+      return [{
+        paddingInline: "musaex-5pwv2j",
+        paddingStart: null,
+        paddingLeft: null,
+        paddingEnd: null,
+        paddingRight: null,
+        borderRadius: "musaex-ok3b7d",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        backgroundColor: "musaex-rl4t6d",
+        color: "musaex-vm0q45",
+        transitionProperty: "musaex-fagghw",
+        transitionDuration: "musaex-13dflua",
+        $$css: true
+      }, {
+        "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial",
+        "--1113oo7": props.hoveredColor != null ? props.hoveredColor : "initial"
+      }];
+    }
+  },
+  separator: {
+    "default": {
+      marginInline: "musaex-1sn0kb9",
+      marginInlineStart: null,
+      marginLeft: null,
+      marginInlineEnd: null,
+      marginRight: null,
+      $$css: true
+    }
+  }
+};
+var Item = function Item(_ref) {
+  var href = _ref.href,
+    label = _ref.label,
+    max = _ref.max,
+    separator = _ref.separator;
+  var theme = hooks.useTheme();
+  var isLink = !!href;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Breadcrumb);
+  var styled = {
+    navigation: stylex.default.props(styles.navigation["default"]({
+      color: theme.colors[colors.ColorToken.OnSurface]
+    }), isLink && styles.navigation.link({
+      hoveredBackgroundColor: theme.colors[colors.ColorToken.Surface],
+      hoveredColor: theme.colors[colors.ColorToken.OnSurface]
+    })),
+    separator: stylex.default.props(styles.separator["default"])
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
+    className: classNames[className.BreadcrumbClassToken.Item]
+  }, isLink && /*#__PURE__*/React.createElement("a", {
+    href: href
+  }, label), !isLink && label), !max && (/*#__PURE__*/React.createElement("li", {
+    role: "separator",
+    className: relax.clsx(classNames[className.BreadcrumbClassToken.Separator], styled.separator.className),
+    style: styled.separator.style
+  }, separator)));
+};
+
+exports.default = Item;

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { BreadcrumbClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { BreadcrumbClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { ComponentToken } from '../../utils/component-token.js';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   navigation: {

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 /**
  * @description
  * item