musae 0.2.26 → 0.3.0

package/dist/components/loading/loading.cjs

@@ -0,0 +1,159 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+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 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 = {
+  circle: {
+    animationDuration: "musaex-1c74tu6",
+    animationTimingFunction: "musaex-1esw782",
+    animationIterationCount: "musaex-a4qsjk",
+    fill: "musaex-bh8q5q",
+    strokeLinecap: "musaex-1owpc8m",
+    $$css: true
+  },
+  top: {
+    animationName: "musaex-1ygrg12",
+    stroke: "musaex-1rd0bzx",
+    $$css: true
+  },
+  bottom: {
+    animationName: "musaex-s32ixd",
+    stroke: "musaex-1op1030",
+    $$css: true
+  },
+  left: {
+    animationName: "musaex-1dxjbsd",
+    stroke: "musaex-1pomg4v",
+    $$css: true
+  },
+  right: {
+    animationName: "musaex-1dppd5q",
+    stroke: "musaex-197s2ti",
+    $$css: true
+  },
+  small: {
+    width: "musaex-1opwmbq",
+    height: "musaex-19ak84k",
+    $$css: true
+  },
+  medium: {
+    width: "musaex-yueg9c",
+    height: "musaex-1q1utna",
+    $$css: true
+  },
+  large: {
+    width: "musaex-1lwsb27",
+    height: "musaex-xtgfc8",
+    $$css: true
+  },
+  loading: {
+    position: "musaex-1n2onr6",
+    minWidth: "musaex-19qardm",
+    minHeight: "musaex-1mjul0d",
+    $$css: true
+  },
+  spin: {
+    position: "musaex-10l6tqk",
+    width: "musaex-1k094eu",
+    height: "musaex-1xj1dsn",
+    top: "musaex-13vifvy",
+    insetInlineStart: "musaex-1o0tod",
+    left: null,
+    right: null,
+    display: "musaex-78zum5",
+    justifyContent: "musaex-l56j7k",
+    alignItems: "musaex-6s0dn4",
+    zIndex: "musaex-mnehq9",
+    $$css: true
+  },
+  overlay: {
+    opacity: "musaex-byyjgo",
+    userSelect: "musaex-87ps6o",
+    pointerEvents: "musaex-47corl",
+    transitionProperty: "musaex-19991ni",
+    transitionDuration: "musaex-1d8287x",
+    $$css: true
+  }
+};
+var Loading = function Loading(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$overlay = _ref.overlay,
+    overlay = _ref$overlay === void 0 ? true : _ref$overlay,
+    children = _ref.children,
+    className$1 = _ref.className,
+    style = _ref.style,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? true : _ref$loading;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Loading);
+  var circles = {
+    top: _objectSpread(_objectSpread({}, {
+      className: "musaex-1c74tu6 musaex-1esw782 musaex-a4qsjk musaex-bh8q5q musaex-1owpc8m musaex-1ygrg12 musaex-1rd0bzx"
+    }), {}, {
+      cx: "120",
+      cy: "120",
+      r: "105"
+    }),
+    bottom: _objectSpread(_objectSpread({}, {
+      className: "musaex-1c74tu6 musaex-1esw782 musaex-a4qsjk musaex-bh8q5q musaex-1owpc8m musaex-s32ixd musaex-1op1030"
+    }), {}, {
+      cx: "120",
+      cy: "120",
+      r: "35"
+    }),
+    left: _objectSpread(_objectSpread({}, {
+      className: "musaex-1c74tu6 musaex-1esw782 musaex-a4qsjk musaex-bh8q5q musaex-1owpc8m musaex-1dxjbsd musaex-1pomg4v"
+    }), {}, {
+      cx: "85",
+      cy: "120",
+      r: "70"
+    }),
+    right: _objectSpread(_objectSpread({}, {
+      className: "musaex-1c74tu6 musaex-1esw782 musaex-a4qsjk musaex-bh8q5q musaex-1owpc8m musaex-1dppd5q musaex-197s2ti"
+    }), {}, {
+      cx: "155",
+      cy: "120",
+      r: "70"
+    })
+  };
+  var styled = {
+    loading: {
+      className: "musaex-1n2onr6 musaex-19qardm musaex-1mjul0d"
+    },
+    spin: {
+      className: "musaex-10l6tqk musaex-1k094eu musaex-1xj1dsn musaex-13vifvy musaex-1o0tod musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mnehq9"
+    },
+    spinning: stylex.default.props(styles[size]),
+    content: stylex.default.props(loading && overlay && styles.overlay)
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.LoadingClassToken.Loading], styled.loading.className),
+    style: styled.loading.style
+  }, loading && (/*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.LoadingClassToken.Spin], styled.spin.className),
+    style: styled.spin.style
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 240 240",
+    className: relax.clsx(classNames[className.LoadingClassToken.Spinning], styled.spinning.className),
+    style: styled.spinning.style
+  }, Array.from(Object.entries(circles)).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      props = _ref3[1];
+    return /*#__PURE__*/React.createElement("circle", _objectSpread(_objectSpread({}, props), {}, {
+      key: key
+    }));
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.LoadingClassToken.Content], className$1, styled.content.className),
+    style: _objectSpread(_objectSpread({}, styled.content.style), style)
+  }, children));
+};
+
+exports.default = Loading;

package/dist/components/loading/loading.d.ts

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

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

@@ -1,13 +1,11 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 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 { useClassNames } from '../../hooks/use-class-names.js';
-import { LoadingClassToken } 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 { useClassNames } from '../../hooks/use-class-names.mjs';
+import { LoadingClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   circle: {
@@ -59,40 +57,26 @@ var styles = {
     minHeight: "musaex-1mjul0d",
     $$css: true
   },
-  content: function content(props) {
-    return [{
-      opacity: "musaex-byyjgo",
-      userSelect: "musaex-87ps6o",
-      pointerEvents: "musaex-47corl",
-      transitionProperty: "musaex-19991ni",
-      transitionDuration: "musaex-1d8287x",
-      zIndex: "musaex-1ja2u2z",
-      "::after_content": "musaex-1s928wv",
-      "::after_display": "musaex-hkezso",
-      "::after_position": "musaex-1j6awrg",
-      "::after_inset": "musaex-arstr8",
-      "::after_insetInline": null,
-      "::after_insetInlineStart": null,
-      "::after_insetInlineEnd": null,
-      "::after_left": null,
-      "::after_right": null,
-      "::after_insetBlock": null,
-      "::after_top": null,
-      "::after_bottom": null,
-      "::after_backgroundColor": "musaex-27d4w3",
-      $$css: true
-    }, {
-      "--15iyedw": props.backgroundColor != null ? props.backgroundColor : "initial"
-    }];
-  },
   spin: {
     position: "musaex-10l6tqk",
-    top: "musaex-wa60dl",
-    insetInlineStart: "musaex-budbmw",
+    width: "musaex-1k094eu",
+    height: "musaex-1xj1dsn",
+    top: "musaex-13vifvy",
+    insetInlineStart: "musaex-1o0tod",
     left: null,
     right: null,
-    transform: "musaex-11lhmoz",
-    zIndex: "musaex-1vjfegm",
+    display: "musaex-78zum5",
+    justifyContent: "musaex-l56j7k",
+    alignItems: "musaex-6s0dn4",
+    zIndex: "musaex-mnehq9",
+    $$css: true
+  },
+  overlay: {
+    opacity: "musaex-byyjgo",
+    userSelect: "musaex-87ps6o",
+    pointerEvents: "musaex-47corl",
+    transitionProperty: "musaex-19991ni",
+    transitionDuration: "musaex-1d8287x",
     $$css: true
   }
 };
@@ -101,9 +85,12 @@ var Loading = function Loading(_ref) {
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$overlay = _ref.overlay,
     overlay = _ref$overlay === void 0 ? true : _ref$overlay,
-    children = _ref.children;
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? true : _ref$loading;
   var classNames = useClassNames(ComponentToken.Loading);
-  var theme = useTheme();
   var circles = {
     top: _objectSpread(_objectSpread({}, {
       className: "musaex-1c74tu6 musaex-1esw782 musaex-a4qsjk musaex-bh8q5q musaex-1owpc8m musaex-1ygrg12 musaex-1rd0bzx"
@@ -138,18 +125,22 @@ var Loading = function Loading(_ref) {
     loading: {
       className: "musaex-1n2onr6 musaex-19qardm musaex-1mjul0d"
     },
-    spin: props(styles.spin, styles[size]),
-    content: props(overlay && styles.content({
-      backgroundColor: theme.colors[ColorToken.SurfaceDim]
-    }))
+    spin: {
+      className: "musaex-10l6tqk musaex-1k094eu musaex-1xj1dsn musaex-13vifvy musaex-1o0tod musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mnehq9"
+    },
+    spinning: _stylex.props(styles[size]),
+    content: _stylex.props(loading && overlay && styles.overlay)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[LoadingClassToken.Loading], styled.loading.className),
     style: styled.loading.style
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 240 240",
+  }, loading && (/*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[LoadingClassToken.Spin], styled.spin.className),
     style: styled.spin.style
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 240 240",
+    className: clsx(classNames[LoadingClassToken.Spinning], styled.spinning.className),
+    style: styled.spinning.style
   }, Array.from(Object.entries(circles)).map(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
       key = _ref3[0],
@@ -157,11 +148,10 @@ var Loading = function Loading(_ref) {
     return /*#__PURE__*/React.createElement("circle", _objectSpread(_objectSpread({}, props), {}, {
       key: key
     }));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: (classNames[LoadingClassToken.Content], styled.content.className),
-    style: styled.content.style
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: clsx(classNames[LoadingClassToken.Content], className, styled.content.className),
+    style: _objectSpread(_objectSpread({}, styled.content.style), style)
   }, children));
 };
-var Loading$1 = Loading;
 
-export { Loading$1 as default };
+export { Loading as default };

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

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import { ComponentProps } from "musae/types/element";
 type Size = "small" | "medium" | "large";
 /**
  * @author murukal
@@ -6,7 +7,7 @@ type Size = "small" | "medium" | "large";
  * @description
  * loading props
  */
-export interface LoadingProps {
+export type LoadingProps = ComponentProps & {
     /**
      * @description
      * size
@@ -25,5 +26,11 @@ export interface LoadingProps {
      * @default void 0
      */
     children?: ReactNode;
-}
+    /**
+     * @description
+     * loading
+     * @default true
+     */
+    loading?: boolean;
+};
 export {};

package/dist/components/menu/context.cjs

@@ -0,0 +1,20 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * menu context for all menu group or menu item
+ */
+var Context = /*#__PURE__*/React.createContext({
+  selectedKeys: new Set(),
+  expandedKeys: new Set(),
+  click: function click() {},
+  toggle: function toggle() {},
+  collect: function collect() {},
+  size: "medium"
+});
+
+exports.default = Context;

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

@@ -1,4 +1,4 @@
-import { type ContextValue } from "./types";
+import { type ContextValue } from "musae/types/menu";
 /**
  * @author murukal
  *

package/dist/components/menu/group.cjs

@@ -0,0 +1,190 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var framerMotion = require('framer-motion');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var item = require('./item.cjs');
+var hooks = require('./hooks.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 useExpandable = require('../../hooks/use-expandable.cjs');
+var hooks$1 = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var _excluded = ["children"];
+var styles = {
+  group: {
+    "default": function _default(props) {
+      return [{
+        margin: "musaex-p8vts",
+        marginInline: null,
+        marginInlineStart: null,
+        marginLeft: null,
+        marginInlineEnd: null,
+        marginRight: null,
+        marginBlock: null,
+        marginTop: null,
+        marginBottom: null,
+        padding: "musaex-j8pfrn",
+        paddingInline: null,
+        paddingStart: null,
+        paddingLeft: null,
+        paddingEnd: null,
+        paddingRight: null,
+        paddingBlock: null,
+        paddingTop: null,
+        paddingBottom: null,
+        listStyle: "musaex-e8uvvx",
+        listStyleImage: null,
+        listStylePosition: null,
+        listStyleType: null,
+        color: "musaex-19dipnz",
+        overflow: "musaex-ysyzu8",
+        overflowX: null,
+        overflowY: null,
+        $$css: true
+      }, {
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
+    horizontal: {
+      display: "musaex-78zum5",
+      flexDirection: "musaex-1q0g3np",
+      gap: "musaex-1lsrmdg",
+      rowGap: null,
+      columnGap: null,
+      $$css: true
+    },
+    vertical: {
+      $$css: true
+    },
+    inline: {
+      $$css: true
+    },
+    hidden: {
+      display: "musaex-1s85apg",
+      $$css: true
+    }
+  },
+  submenu: {
+    inline: {
+      marginTop: "musaex-19h4m1",
+      $$css: true
+    },
+    horizontal: {
+      minWidth: "musaex-1jzhcrs",
+      paddingInline: "musaex-5pwv2j",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      $$css: true
+    },
+    vertical: {
+      minWidth: "musaex-1jzhcrs",
+      paddingInline: "musaex-5pwv2j",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      $$css: true
+    }
+  }
+};
+/**
+ * @author murukal
+ *
+ * @description
+ * menu group
+ */
+var Group = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var items = _ref2.items,
+    _ref2$level = _ref2.level,
+    level = _ref2$level === void 0 ? 0 : _ref2$level,
+    _ref2$expanded = _ref2.expanded,
+    expanded = _ref2$expanded === void 0 ? true : _ref2$expanded,
+    className$1 = _ref2.className,
+    style = _ref2.style,
+    mode = _ref2.mode;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Menu);
+  var _useAnimate = framerMotion.useAnimate(),
+    _useAnimate2 = _slicedToArray(_useAnimate, 2),
+    scope = _useAnimate2[0],
+    animate = _useAnimate2[1];
+  var _useMenuContext = hooks.useMenuContext(),
+    collect = _useMenuContext.collect,
+    expandedKeys = _useMenuContext.expandedKeys;
+  var groupRef = relax.useRefs(ref, scope);
+  var theme = hooks$1.useTheme();
+  var isInline = mode === "inline";
+  var _useExpandable = useExpandable.useExpandable(),
+    expand = _useExpandable.expand,
+    collapse = _useExpandable.collapse;
+  relax.useUpdateEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!expanded) {
+            _context.next = 4;
+            break;
+          }
+          _context.next = 3;
+          return expand([scope, animate]);
+        case 3:
+          return _context.abrupt("return");
+        case 4:
+          _context.next = 6;
+          return collapse([scope, animate]);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [expanded]);
+  var styled = {
+    group: stylex.default.props(styles.group["default"]({
+      color: theme.colors[colors.ColorToken.OnSurface]
+    }), styles.group[mode], !expanded && styles.group.hidden),
+    submenu: stylex.default.props(styles.submenu[mode])
+  };
+  return /*#__PURE__*/React.createElement("ul", {
+    ref: groupRef,
+    className: relax.clsx(classNames[className.MenuClassToken.Group], _defineProperty({}, classNames[className.MenuClassToken.GroupHidden], !expanded), className$1, styled.group.className),
+    style: _objectSpread(_objectSpread({}, styled.group.style), style)
+  }, items.map(function (_ref4) {
+    var _ref4$children = _ref4.children,
+      children = _ref4$children === void 0 ? [] : _ref4$children,
+      item$1 = _objectWithoutProperties(_ref4, _excluded);
+    return /*#__PURE__*/React.createElement(item.default, {
+      key: item$1.key,
+      value: item$1.key,
+      level: level,
+      className: item$1.className,
+      style: item$1.style,
+      label: item$1.label,
+      prefix: item$1.prefix,
+      mode: mode,
+      ref: function ref(_ref) {
+        if (!_ref) return;
+        collect(item$1.key, _ref);
+      }
+    }, children.length > 0 && (/*#__PURE__*/React.createElement(Group, {
+      items: children,
+      expanded: !isInline || expandedKeys.has(item$1.key),
+      level: !isInline ? 0 : level + 1,
+      mode: "inline",
+      className: styled.submenu.className,
+      style: styled.submenu.style
+    })));
+  }));
+});
+
+exports.default = Group;

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

@@ -6,9 +6,9 @@ import React from "react";
  * menu group
  */
 declare const Group: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & {
-    items: import("./types").MenuItem[];
+    items: import("musae/types/menu").MenuItem[];
     level?: number;
     expanded?: boolean;
-    mode: import("./types").Mode;
+    mode: import("musae/types/menu").Mode;
 } & React.RefAttributes<HTMLUListElement>>;
 export default Group;

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

@@ -6,16 +6,16 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { forwardRef } from 'react';
 import { useAnimate } from 'framer-motion';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { MenuClassToken } from '../../utils/class-name.js';
-import Item from './item.js';
-import { useMenuContext } from './hooks.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { MenuClassToken } from '../../utils/class-name.mjs';
+import Item from './item.mjs';
+import { useMenuContext } from './hooks.mjs';
 import { useRefs, useUpdateEffect, clsx } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useExpandable } from '../../hooks/use-expandable.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useExpandable } from '../../hooks/use-expandable.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var _excluded = ["children"];
 var styles = {
@@ -148,10 +148,10 @@ var Group = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }, _callee);
   })), [expanded]);
   var styled = {
-    group: props(styles.group["default"]({
+    group: _stylex.props(styles.group["default"]({
       color: theme.colors[ColorToken.OnSurface]
     }), styles.group[mode], !expanded && styles.group.hidden),
-    submenu: props(styles.submenu[mode])
+    submenu: _stylex.props(styles.submenu[mode])
   };
   return /*#__PURE__*/React.createElement("ul", {
     ref: groupRef,