musae 0.2.10 → 0.2.12

package/dist/components/avatar/avatar.js

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, useContext } from 'react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from './context.js';
@@ -9,47 +11,50 @@ import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
 import { useImage } from '../../hooks/use-image.js';
 
-const styles = {
-  avatar: props => [{
-    borderWidth: "musae-1i8jmgv",
-    borderInlineWidth: null,
-    borderInlineStartWidth: null,
-    borderLeftWidth: null,
-    borderInlineEndWidth: null,
-    borderRightWidth: null,
-    borderBlockWidth: null,
-    borderTopWidth: null,
-    borderBottomWidth: null,
-    borderStyle: "musae-1y0btm7",
-    borderInlineStyle: null,
-    borderInlineStartStyle: null,
-    borderLeftStyle: null,
-    borderInlineEndStyle: null,
-    borderRightStyle: null,
-    borderBlockStyle: null,
-    borderTopStyle: null,
-    borderBottomStyle: null,
-    borderColor: "musae-9r1u3d",
-    borderInlineColor: null,
-    borderInlineStartColor: null,
-    borderLeftColor: null,
-    borderInlineEndColor: null,
-    borderRightColor: null,
-    borderBlockColor: null,
-    borderTopColor: null,
-    borderBottomColor: null,
-    boxSizing: "musae-9f619",
-    display: "musae-3nfvp2",
-    backgroundColor: "musae-q1mx2j",
-    color: "musae-19dipnz",
-    alignItems: "musae-6s0dn4",
-    justifyContent: "musae-l56j7k",
-    userSelect: "musae-87ps6o",
-    $$css: true
-  }, {
-    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-    "--color": props.color != null ? props.color : "initial"
-  }],
+var _excluded = ["src", "alt", "shape", "size"];
+var styles = {
+  avatar: function avatar(props) {
+    return [{
+      borderWidth: "musae-1i8jmgv",
+      borderInlineWidth: null,
+      borderInlineStartWidth: null,
+      borderLeftWidth: null,
+      borderInlineEndWidth: null,
+      borderRightWidth: null,
+      borderBlockWidth: null,
+      borderTopWidth: null,
+      borderBottomWidth: null,
+      borderStyle: "musae-1y0btm7",
+      borderInlineStyle: null,
+      borderInlineStartStyle: null,
+      borderLeftStyle: null,
+      borderInlineEndStyle: null,
+      borderRightStyle: null,
+      borderBlockStyle: null,
+      borderTopStyle: null,
+      borderBottomStyle: null,
+      borderColor: "musae-9r1u3d",
+      borderInlineColor: null,
+      borderInlineStartColor: null,
+      borderLeftColor: null,
+      borderInlineEndColor: null,
+      borderRightColor: null,
+      borderBlockColor: null,
+      borderTopColor: null,
+      borderBottomColor: null,
+      boxSizing: "musae-9f619",
+      display: "musae-3nfvp2",
+      backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
+      alignItems: "musae-6s0dn4",
+      justifyContent: "musae-l56j7k",
+      userSelect: "musae-87ps6o",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }];
+  },
   image: {
     width: "musae-wfgd1y",
     height: "musae-b27hse",
@@ -65,23 +70,25 @@ const styles = {
     borderBottomRightRadius: null,
     $$css: true
   },
-  overlapping: props => [{
-    ":not(:first-child)_marginInlineStart": "musae-1i5rff9",
-    ":not(:first-child)_marginLeft": null,
-    ":not(:first-child)_marginRight": null,
-    borderColor: "musae-eqt46j",
-    borderInlineColor: null,
-    borderInlineStartColor: null,
-    borderLeftColor: null,
-    borderInlineEndColor: null,
-    borderRightColor: null,
-    borderBlockColor: null,
-    borderTopColor: null,
-    borderBottomColor: null,
-    $$css: true
-  }, {
-    "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
-  }],
+  overlapping: function overlapping(props) {
+    return [{
+      ":not(:first-child)_marginInlineStart": "musae-1i5rff9",
+      ":not(:first-child)_marginLeft": null,
+      ":not(:first-child)_marginRight": null,
+      borderColor: "musae-eqt46j",
+      borderInlineColor: null,
+      borderInlineStartColor: null,
+      borderLeftColor: null,
+      borderInlineEndColor: null,
+      borderRightColor: null,
+      borderBlockColor: null,
+      borderTopColor: null,
+      borderBottomColor: null,
+      $$css: true
+    }, {
+      "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }];
+  },
   circular: {
     borderRadius: "musae-iipnba",
     borderStartStartRadius: null,
@@ -126,23 +133,25 @@ const styles = {
  * @description
  * `Avatar`
  */
-const Avatar = forwardRef(({
-  src,
-  alt,
-  shape: _shape = "circular",
-  size: _size = "medium",
-  ...props$1
-}, ref) => {
-  const theme = useTheme();
-  const group = useContext(Context);
-  const isInGroup = !!group;
-  const size = group?.size ?? _size;
-  const shape = group?.shape ?? _shape;
-  const classNames = useClassNames(ComponentToken.Avatar);
-  const isLoaded = useImage({
-    src
+var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _group$size, _group$shape;
+  var src = _ref.src,
+    alt = _ref.alt,
+    _ref$shape = _ref.shape,
+    _shape = _ref$shape === void 0 ? "circular" : _ref$shape,
+    _ref$size = _ref.size,
+    _size = _ref$size === void 0 ? "medium" : _ref$size,
+    props$1 = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var group = useContext(Context);
+  var isInGroup = !!group;
+  var size = (_group$size = group === null || group === void 0 ? void 0 : group.size) !== null && _group$size !== void 0 ? _group$size : _size;
+  var shape = (_group$shape = group === null || group === void 0 ? void 0 : group.shape) !== null && _group$shape !== void 0 ? _group$shape : _shape;
+  var classNames = useClassNames(ComponentToken.Avatar);
+  var isLoaded = useImage({
+    src: src
   });
-  const styled = {
+  var styled = {
     avatar: props(typography.label[size], styles.avatar({
       backgroundColor: theme.colors[ColorToken.PrimaryContainer],
       color: theme.colors[ColorToken.Primary]
@@ -153,18 +162,17 @@ const Avatar = forwardRef(({
       className: "musae-wfgd1y musae-b27hse musae-l1xv1r musae-1pjcqnp"
     }
   };
-  return React.createElement("span", {
-    ...props$1,
+  return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props$1), {}, {
     className: clsx(classNames[AvatarClassToken.Avatar], styled.avatar.className),
     style: styled.avatar.style,
     ref: ref
-  }, isLoaded === "loaded" ? React.createElement("img", {
+  }), isLoaded === "loaded" ? ( /*#__PURE__*/React.createElement("img", {
     draggable: false,
     src: src,
     alt: alt,
     className: styled.image.className,
     style: styled.image.style
-  }) : alt?.slice(0, 2).toUpperCase());
+  })) : alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase());
 });
 
 export { Avatar as default };

package/dist/components/avatar/context.js

@@ -4,6 +4,6 @@ import { createContext } from 'react';
  * @description
  * context
  */
-const Context = createContext(null);
+var Context = /*#__PURE__*/createContext(null);
 
 export { Context };

package/dist/components/avatar/group.js

@@ -1,3 +1,4 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useMemo, Children, cloneElement } from 'react';
 import { Context } from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
@@ -5,49 +6,54 @@ import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
 import Popover from '../popover/popover.js';
 import Avatar from './avatar.js';
 
-const Group = ({
-  children: _children,
-  shape = "circular",
-  size = "medium",
-  max = 3
-}) => {
-  const styled = {
+var Group = function Group(_ref) {
+  var _children = _ref.children,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? "circular" : _ref$shape,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 3 : _ref$max;
+  var styled = {
     className: "musae-3nfvp2 musae-87ps6o"
   };
-  const classNames = useClassNames(ComponentToken.Avatar);
-  const children = useMemo(() => {
-    const __children = Children.toArray(_children);
-    const [visible, hidden] = __children.reduce((prev, child, index) => {
-      // @ts-ignore
-      const element = cloneElement(child, {
-        key: `avatars-${index}`
-      });
-      // great than max, hide current node
-      if (index >= max) {
-        prev[1].push(element);
-      } else {
-        prev[0].push(element);
-      }
-      return prev;
-    }, [[], []]);
+  var classNames = useClassNames(ComponentToken.Avatar);
+  var children = useMemo(function () {
+    var __children = Children.toArray(_children);
+    var _children$reduce = __children.reduce(function (prev, child, index) {
+        // @ts-ignore
+        var element = /*#__PURE__*/cloneElement(child, {
+          key: "avatars-".concat(index)
+        });
+        // great than max, hide current node
+        if (index >= max) {
+          prev[1].push(element);
+        } else {
+          prev[0].push(element);
+        }
+        return prev;
+      }, [[], []]),
+      _children$reduce2 = _slicedToArray(_children$reduce, 2),
+      visible = _children$reduce2[0],
+      hidden = _children$reduce2[1];
     // got hidden nodes, show ellipse node
     if (hidden.length > 0) {
-      visible.push(React.createElement(Popover, {
-        description: React.createElement(Group, null, hidden),
+      visible.push( /*#__PURE__*/React.createElement(Popover, {
+        description: /*#__PURE__*/React.createElement(Group, null, hidden),
         key: "avatars-hidden",
         placement: "top"
-      }, React.createElement(Avatar, {
-        alt: `+${hidden.length}`
+      }, /*#__PURE__*/React.createElement(Avatar, {
+        alt: "+".concat(hidden.length)
       })));
     }
     return visible;
   }, [_children, max]);
-  return React.createElement(Context.Provider, {
+  return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {
-      shape,
-      size
+      shape: shape,
+      size: size
     }
-  }, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: (classNames[AvatarClassToken.Group], styled.className),
     style: styled.style
   }, children));

package/dist/components/avatar/index.js

@@ -1,8 +1,8 @@
 import Avatar$1 from './avatar.js';
 import Group from './group.js';
 
-const Avatar = Object.assign(Avatar$1, {
-    Group,
+var Avatar = Object.assign(Avatar$1, {
+  Group: Group
 });
 
 export { Avatar };

package/dist/components/badge/badge.js

@@ -1,3 +1,4 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, BadgeClassToken } from '../../utils/class-name.js';
@@ -9,37 +10,39 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { isVoid } from '@aiszlab/relax';
 
-const styles = {
+var styles = {
   badge: {
-    default: {
+    "default": {
       position: "musae-1n2onr6",
       display: "musae-3nfvp2",
       $$css: true
     }
   },
   tail: {
-    default: props => [{
-      position: "musae-10l6tqk",
-      borderRadius: "musae-iipnba",
-      borderStartStartRadius: null,
-      borderStartEndRadius: null,
-      borderEndStartRadius: null,
-      borderEndEndRadius: null,
-      borderTopLeftRadius: null,
-      borderTopRightRadius: null,
-      borderBottomLeftRadius: null,
-      borderBottomRightRadius: null,
-      minWidth: "musae-70jws7",
-      textAlign: "musae-2b8uid",
-      boxShadow: "musae-igitpm",
-      backgroundColor: "musae-q1mx2j",
-      color: "musae-19dipnz",
-      $$css: true
-    }, {
-      "--boxShadow": `0 0 0 ${sizes.smallest} ${props.color}` != null ? `0 0 0 ${sizes.smallest} ${props.color}` : "initial",
-      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-      "--color": props.color != null ? props.color : "initial"
-    }],
+    "default": function _default(props) {
+      return [{
+        position: "musae-10l6tqk",
+        borderRadius: "musae-iipnba",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        minWidth: "musae-70jws7",
+        textAlign: "musae-2b8uid",
+        boxShadow: "musae-igitpm",
+        backgroundColor: "musae-q1mx2j",
+        color: "musae-19dipnz",
+        $$css: true
+      }, {
+        "--boxShadow": "0 0 0 ".concat(sizes.smallest, " ").concat(props.color) != null ? "0 0 0 ".concat(sizes.smallest, " ").concat(props.color) : "initial",
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--color": props.color != null ? props.color : "initial"
+      }];
+    },
     dot: {
       minWidth: null,
       width: "musae-2jq81",
@@ -84,31 +87,29 @@ const styles = {
     }
   }
 };
-const Badge = ({
-  className,
-  style,
-  children,
-  content,
-  invisible = false,
-  placement = "top-right"
-}) => {
-  const classNames = useClassNames(ComponentToken.Badge);
-  const theme = useTheme();
-  const isDot = isVoid(content);
-  const styled = {
-    badge: _stylex.props(styles.badge.default),
-    tail: _stylex.props(styles.tail.default({
+var Badge = function Badge(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    content = _ref.content,
+    _ref$invisible = _ref.invisible,
+    invisible = _ref$invisible === void 0 ? false : _ref$invisible,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top-right" : _ref$placement;
+  var classNames = useClassNames(ComponentToken.Badge);
+  var theme = useTheme();
+  var isDot = isVoid(content);
+  var styled = {
+    badge: _stylex.props(styles.badge["default"]),
+    tail: _stylex.props(styles.tail["default"]({
       backgroundColor: theme.colors[ColorToken.Primary],
       color: theme.colors[ColorToken.OnPrimary]
     }), isDot && styles.tail.dot, typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
   };
-  return React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", {
     className: clsx(classNames[BadgeClassToken.Badge], className, styled.badge.className),
-    style: {
-      ...styled.badge.style,
-      ...style
-    }
-  }, children, React.createElement("span", {
+    style: _objectSpread(_objectSpread({}, styled.badge.style), style)
+  }, children, /*#__PURE__*/React.createElement("span", {
     className: clsx(classNames[BadgeClassToken.Tail], styled.tail.className),
     style: styled.tail.style
   }, content));

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,3 +1,4 @@
+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';
@@ -8,27 +9,30 @@ import { ComponentToken, BreadcrumbClassToken } from '../../utils/class-name.js'
 import clsx from 'clsx';
 import Item from './item.js';
 
-const styles = {
-  breadcrumb: props => [{
-    color: "musae-19dipnz",
-    $$css: true
-  }, {
-    "--color": props.color != null ? props.color : "initial"
-  }]
+var styles = {
+  breadcrumb: function breadcrumb(props) {
+    return [{
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }];
+  }
 };
-const Breadcrumb = ({
-  items = [],
-  className,
-  separator = "/",
-  style
-}) => {
-  const theme = useTheme();
-  const classNames = useClassNames(ComponentToken.Breadcrumb);
+var Breadcrumb = function Breadcrumb(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    className = _ref.className,
+    _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? "/" : _ref$separator,
+    style = _ref.style;
+  var theme = useTheme();
+  var classNames = useClassNames(ComponentToken.Breadcrumb);
   /// there is no need to render the breadcrumb when there is no items
   if (items.length === 0) {
     return null;
   }
-  const styled = {
+  var styled = {
     breadcrumb: props(typography.label.large, styles.breadcrumb({
       color: theme.colors[ColorToken.OnSurfaceVariant]
     })),
@@ -36,16 +40,11 @@ const Breadcrumb = ({
       className: "musae-e8uvvx musae-78zum5 musae-1a02dak"
     }
   };
-  return React.createElement("nav", {
+  return /*#__PURE__*/React.createElement("nav", {
     className: clsx(classNames[BreadcrumbClassToken.Breadcrumb], className, styled.breadcrumb.className),
-    style: {
-      ...styled.breadcrumb.style,
-      ...style
-    }
-  }, React.createElement("ol", {
-    ...styled.navigations
-  }, items.map((item, index) => {
-    return React.createElement(Item, {
+    style: _objectSpread(_objectSpread({}, styled.breadcrumb.style), style)
+  }, /*#__PURE__*/React.createElement("ol", _objectSpread({}, styled.navigations), items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Item, {
       key: index,
       label: item.label,
       max: index === items.length - 1,

package/dist/components/breadcrumb/item.js

@@ -6,41 +6,45 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, BreadcrumbClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 
-const styles = {
+var styles = {
   navigation: {
-    default: props => [{
-      ":last-of-type_color": "musae-1befqep",
-      $$css: true
-    }, {
-      "--h3adkr": props.color != null ? props.color : "initial"
-    }],
-    link: props => [{
-      paddingInline: "musae-381k9q",
-      paddingStart: null,
-      paddingLeft: null,
-      paddingEnd: null,
-      paddingRight: null,
-      borderRadius: "musae-7bdoj",
-      borderStartStartRadius: null,
-      borderStartEndRadius: null,
-      borderEndStartRadius: null,
-      borderEndEndRadius: null,
-      borderTopLeftRadius: null,
-      borderTopRightRadius: null,
-      borderBottomLeftRadius: null,
-      borderBottomRightRadius: null,
-      backgroundColor: "musae-rl4t6d",
-      color: "musae-vm0q45",
-      transitionProperty: "musae-fagghw",
-      transitionDuration: "musae-13dflua",
-      $$css: true
-    }, {
-      "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial",
-      "--1113oo7": props.hoveredColor != null ? props.hoveredColor : "initial"
-    }]
+    "default": function _default(props) {
+      return [{
+        ":last-of-type_color": "musae-1befqep",
+        $$css: true
+      }, {
+        "--h3adkr": props.color != null ? props.color : "initial"
+      }];
+    },
+    link: function link(props) {
+      return [{
+        paddingInline: "musae-381k9q",
+        paddingStart: null,
+        paddingLeft: null,
+        paddingEnd: null,
+        paddingRight: null,
+        borderRadius: "musae-7bdoj",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        backgroundColor: "musae-rl4t6d",
+        color: "musae-vm0q45",
+        transitionProperty: "musae-fagghw",
+        transitionDuration: "musae-13dflua",
+        $$css: true
+      }, {
+        "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial",
+        "--1113oo7": props.hoveredColor != null ? props.hoveredColor : "initial"
+      }];
+    }
   },
   separator: {
-    default: {
+    "default": {
       marginInline: "musae-19s5fsp",
       marginInlineStart: null,
       marginLeft: null,
@@ -50,33 +54,32 @@ const styles = {
     }
   }
 };
-const Item = ({
-  href,
-  label,
-  max,
-  separator
-}) => {
-  const theme = useTheme();
-  const isLink = !!href;
-  const classNames = useClassNames(ComponentToken.Breadcrumb);
-  const styled = {
-    navigation: _stylex.props(styles.navigation.default({
+var Item = function Item(_ref) {
+  var href = _ref.href,
+    label = _ref.label,
+    max = _ref.max,
+    separator = _ref.separator;
+  var theme = useTheme();
+  var isLink = !!href;
+  var classNames = useClassNames(ComponentToken.Breadcrumb);
+  var styled = {
+    navigation: _stylex.props(styles.navigation["default"]({
       color: theme.colors[ColorToken.OnSurface]
     }), isLink && styles.navigation.link({
       hoveredBackgroundColor: theme.colors[ColorToken.Surface],
       hoveredColor: theme.colors[ColorToken.OnSurface]
     })),
-    separator: _stylex.props(styles.separator.default)
+    separator: _stylex.props(styles.separator["default"])
   };
-  return React.createElement(React.Fragment, null, React.createElement("li", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
     className: classNames[BreadcrumbClassToken.Item]
-  }, isLink && React.createElement("a", {
+  }, isLink && /*#__PURE__*/React.createElement("a", {
     href: href
-  }, label), !isLink && label), !max && React.createElement("li", {
+  }, label), !isLink && label), !max && ( /*#__PURE__*/React.createElement("li", {
     role: "separator",
     className: clsx(classNames[BreadcrumbClassToken.Separator], styled.separator.className),
     style: styled.separator.style
-  }, separator));
+  }, separator)));
 };
 
 export { Item as default };