musae 0.4.0 → 0.4.2

package/dist/components/button/button.cjs

@@ -262,18 +262,18 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       color: theme$1.colors["on-".concat(color$1)]
     }), variant === "outlined" && styles.outlined({
       color: theme$1.colors[color$1],
-      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin, true)
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin, "style")
     }), variant === "text" && styles.text({
       color: theme$1.colors[color$1],
-      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin, true)
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin, "style")
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.medium, true) : "transparent",
-      color: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, true),
-      outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, true) : null
+      backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.medium, "style") : "transparent",
+      color: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, "style"),
+      outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, "style") : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/button/button.mjs

@@ -260,18 +260,18 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       color: theme.colors["on-".concat(color)]
     }), variant === "outlined" && styles.outlined({
       color: theme.colors[color],
-      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin, true)
+      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin, "style")
     }), variant === "text" && styles.text({
       color: theme.colors[color],
-      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin, true)
+      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin, "style")
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? hexToRgba(theme.colors["on-surface"], OPACITY.medium, true) : "transparent",
-      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, true),
-      outlineColor: variant === "outlined" ? hexToRgba(theme.colors["on-surface"], OPACITY.thicker, true) : null
+      backgroundColor: variant === "filled" ? hexToRgba(theme.colors["on-surface"], OPACITY.medium, "style") : "transparent",
+      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, "style"),
+      outlineColor: variant === "outlined" ? hexToRgba(theme.colors["on-surface"], OPACITY.thicker, "style") : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/fab/floatable.cjs

@@ -50,7 +50,7 @@ var Floatable = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     listeners = _useDraggable.listeners,
     setNodeRef = _useDraggable.setNodeRef,
     transform = _useDraggable.transform;
-  var floatableRef = relax.useRefs(_ref, setNodeRef);
+  var floatableRef = relax.useComposedRef(_ref, setNodeRef);
   var _useContainer = useContainer.useContainer({
       container: container
     }),

package/dist/components/fab/floatable.mjs

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useIdentity, useRefs, clsx } from '@aiszlab/relax';
+import { useIdentity, useComposedRef, clsx } from '@aiszlab/relax';
 import { useDraggable, useDndMonitor } from '@dnd-kit/core';
 import React, { forwardRef, useRef, useState, useImperativeHandle } from 'react';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
@@ -48,7 +48,7 @@ var Floatable = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     listeners = _useDraggable.listeners,
     setNodeRef = _useDraggable.setNodeRef,
     transform = _useDraggable.transform;
-  var floatableRef = useRefs(_ref, setNodeRef);
+  var floatableRef = useComposedRef(_ref, setNodeRef);
   var _useContainer = useContainer({
       container: container
     }),

package/dist/components/input/input.cjs

@@ -197,9 +197,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }), invalid && styles.invalid({
       outlineColor: theme$1.colors.error
     }), disabled && styles.disabled({
-      backgroundColor: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thin, true),
-      color: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, true),
-      outlineColor: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, true)
+      backgroundColor: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thin, "style"),
+      color: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, "style"),
+      outlineColor: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, "style")
     })),
     input: {
       className: "musaex-15bjb6t musaex-j8pfrn musaex-1628nlo musaex-jbqb8w musaex-3hncxx musaex-1n0e6fi musaex-mbc7o0 musaex-98rzlu"

package/dist/components/input/input.mjs

@@ -195,9 +195,9 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }), invalid && styles.invalid({
       outlineColor: theme.colors.error
     }), disabled && styles.disabled({
-      backgroundColor: hexToRgba(theme.colors["on-surface"], OPACITY.thin, true),
-      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, true),
-      outlineColor: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, true)
+      backgroundColor: hexToRgba(theme.colors["on-surface"], OPACITY.thin, "style"),
+      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, "style"),
+      outlineColor: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, "style")
     })),
     input: {
       className: "musaex-15bjb6t musaex-j8pfrn musaex-1628nlo musaex-jbqb8w musaex-3hncxx musaex-1n0e6fi musaex-mbc7o0 musaex-98rzlu"

package/dist/components/layout/layout.cjs

@@ -34,18 +34,28 @@ var Layout = function Layout(_ref) {
     mainProps = _useChildren.mainProps;
   var sider = children.get(hooks$1.ChildToken.Sider);
   var hasSider = !!sider;
-  var styled = stylex.default.props(styles.layout({
-    backgroundColor: theme.colors["surface-container-lowest"],
-    color: theme.colors["on-surface"]
-  }));
+  var styled = {
+    layout: stylex.default.props(styles.layout({
+      backgroundColor: theme.colors["surface-container-lowest"],
+      color: theme.colors["on-surface"]
+    })),
+    main: {
+      className: "musaex-mnehq9"
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
-    className: relax.clsx(className, styled.className),
-    style: _objectSpread(_objectSpread({}, styled.style), style)
-  }, children.get(hooks$1.ChildToken.Header), hasSider ? (/*#__PURE__*/React.createElement(index.Grid.Row, {
-    as: "main"
+    className: relax.clsx(className, styled.layout.className),
+    style: _objectSpread(_objectSpread({}, styled.layout.style), style)
+  }, children.get(hooks$1.ChildToken.Header), hasSider && (/*#__PURE__*/React.createElement(index.Grid.Row, {
+    as: "main",
+    className: styled.main.className,
+    style: styled.main.style
   }, sider, /*#__PURE__*/React.createElement(index.Grid.Col, _objectSpread(_objectSpread({}, mainProps), {}, {
     span: 19
-  }), children.get(hooks$1.ChildToken.Main), children.get(hooks$1.ChildToken.Footer)))) : (/*#__PURE__*/React.createElement("main", _objectSpread({}, mainProps), children.get(hooks$1.ChildToken.Main), children.get(hooks$1.ChildToken.Footer))));
+  }), children.get(hooks$1.ChildToken.Main), children.get(hooks$1.ChildToken.Footer)))), !hasSider && (/*#__PURE__*/React.createElement("main", _objectSpread(_objectSpread({}, mainProps), {}, {
+    className: relax.clsx(mainProps.className, styled.main.className),
+    style: _objectSpread(_objectSpread({}, styled.main.style), mainProps.style)
+  }), children.get(hooks$1.ChildToken.Main), children.get(hooks$1.ChildToken.Footer))));
 };
 
 exports.default = Layout;

package/dist/components/layout/layout.mjs

@@ -32,18 +32,28 @@ var Layout = function Layout(_ref) {
     mainProps = _useChildren.mainProps;
   var sider = children.get(ChildToken.Sider);
   var hasSider = !!sider;
-  var styled = _stylex.props(styles.layout({
-    backgroundColor: theme.colors["surface-container-lowest"],
-    color: theme.colors["on-surface"]
-  }));
+  var styled = {
+    layout: _stylex.props(styles.layout({
+      backgroundColor: theme.colors["surface-container-lowest"],
+      color: theme.colors["on-surface"]
+    })),
+    main: {
+      className: "musaex-mnehq9"
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, styled.className),
-    style: _objectSpread(_objectSpread({}, styled.style), style)
-  }, children.get(ChildToken.Header), hasSider ? (/*#__PURE__*/React.createElement(Grid.Row, {
-    as: "main"
+    className: clsx(className, styled.layout.className),
+    style: _objectSpread(_objectSpread({}, styled.layout.style), style)
+  }, children.get(ChildToken.Header), hasSider && (/*#__PURE__*/React.createElement(Grid.Row, {
+    as: "main",
+    className: styled.main.className,
+    style: styled.main.style
   }, sider, /*#__PURE__*/React.createElement(Grid.Col, _objectSpread(_objectSpread({}, mainProps), {}, {
     span: 19
-  }), children.get(ChildToken.Main), children.get(ChildToken.Footer)))) : (/*#__PURE__*/React.createElement("main", _objectSpread({}, mainProps), children.get(ChildToken.Main), children.get(ChildToken.Footer))));
+  }), children.get(ChildToken.Main), children.get(ChildToken.Footer)))), !hasSider && (/*#__PURE__*/React.createElement("main", _objectSpread(_objectSpread({}, mainProps), {}, {
+    className: clsx(mainProps.className, styled.main.className),
+    style: _objectSpread(_objectSpread({}, styled.main.style), mainProps.style)
+  }), children.get(ChildToken.Main), children.get(ChildToken.Footer))));
 };
 
 export { Layout as default };

package/dist/components/menu/group.cjs

@@ -117,7 +117,7 @@ var Group = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _useMenuContext = hooks.useMenuContext(),
     collect = _useMenuContext.collect,
     expandedKeys = _useMenuContext.expandedKeys;
-  var groupRef = relax.useRefs(ref, scope);
+  var groupRef = relax.useComposedRef(ref, scope);
   var theme = hooks$1.useTheme();
   var isInline = mode === "inline";
   var _useExpandable = useExpandable.useExpandable(),

package/dist/components/menu/group.mjs

@@ -10,7 +10,7 @@ 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 { useComposedRef, useUpdateEffect, clsx } from '@aiszlab/relax';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useExpandable } from '../../hooks/use-expandable.mjs';
 import { useTheme } from '../theme/hooks.mjs';
@@ -115,7 +115,7 @@ var Group = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _useMenuContext = useMenuContext(),
     collect = _useMenuContext.collect,
     expandedKeys = _useMenuContext.expandedKeys;
-  var groupRef = useRefs(ref, scope);
+  var groupRef = useComposedRef(ref, scope);
   var theme = useTheme();
   var isInline = mode === "inline";
   var _useExpandable = useExpandable(),

package/dist/components/notification/notification.cjs

@@ -192,7 +192,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     animate = _useAnimate2[1];
   var _placement = PLACEMENTS[axis];
   var classNames = useClassNames.useClassNames("notification");
-  var notificationRef = relax.useRefs(scope, ref);
+  var notificationRef = relax.useComposedRef(scope, ref);
   // after duration, `Notification` will auto destroy
   relax.useTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {

package/dist/components/notification/notification.mjs

@@ -5,7 +5,7 @@ import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_module
 import React, { forwardRef, useEffect, createElement } from 'react';
 import { usePresence, useAnimate } from 'framer-motion';
 import { useTheme } from '../theme/hooks.mjs';
-import { useRefs, useTimeout, clsx } from '@aiszlab/relax';
+import { useComposedRef, useTimeout, clsx } from '@aiszlab/relax';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { NotificationClassToken } from '../../utils/class-name.mjs';
 import { Button } from '../button/button.mjs';
@@ -190,7 +190,7 @@ var Notification = /*#__PURE__*/forwardRef(function (_ref, ref) {
     animate = _useAnimate2[1];
   var _placement = PLACEMENTS[axis];
   var classNames = useClassNames("notification");
-  var notificationRef = useRefs(scope, ref);
+  var notificationRef = useComposedRef(scope, ref);
   // after duration, `Notification` will auto destroy
   useTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {

package/dist/components/popper/dropdown.cjs

@@ -117,7 +117,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     floatableRef = _useFloating.floatableRef,
     arrowRef = _useFloating.arrowRef,
-    _disappear = _useFloating.disappear;
+    _disappear = _useFloating.disappear,
+    composedRef = _useFloating.composedRef;
   React.useImperativeHandle(ref, function () {
     return {
       disappear: function disappear() {
@@ -141,7 +142,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: styled.portal.className,
     style: styled.portal.style
   }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
-    ref: floatableRef
+    ref: composedRef
   }, props), {}, {
     className: relax.clsx(classNames[className.PopperClassToken.Dropdown], className$1, styled.dropdown.className),
     style: _objectSpread(_objectSpread({}, styled.dropdown.style), style)

package/dist/components/popper/dropdown.mjs

@@ -115,7 +115,8 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }),
     floatableRef = _useFloating.floatableRef,
     arrowRef = _useFloating.arrowRef,
-    _disappear = _useFloating.disappear;
+    _disappear = _useFloating.disappear,
+    composedRef = _useFloating.composedRef;
   useImperativeHandle(ref, function () {
     return {
       disappear: function disappear() {
@@ -139,7 +140,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: styled.portal.className,
     style: styled.portal.style
   }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
-    ref: floatableRef
+    ref: composedRef
   }, props), {}, {
     className: clsx(classNames[PopperClassToken.Dropdown], className, styled.dropdown.className),
     style: _objectSpread(_objectSpread({}, styled.dropdown.style), style)

package/dist/components/popper/hooks.cjs

@@ -42,9 +42,11 @@ var useFloating = function useFloating(_ref2) {
     disappearable = _ref2.disappearable;
   var _useAnimate = framerMotion.useAnimate(),
     _useAnimate2 = _slicedToArray(_useAnimate, 2),
-    floatableRef = _useAnimate2[0],
+    _scope = _useAnimate2[0],
     animate = _useAnimate2[1];
+  var floatableRef = React.useRef(null);
   var arrowRef = React.useRef(null);
+  var composedRef = relax.useComposedRef(_scope, floatableRef);
   var _useContainer = useContainer.useContainer({
       container: _trigger,
       useBody: false
@@ -56,6 +58,7 @@ var useFloating = function useFloating(_ref2) {
   // first remove `display: none` style
   // then animate
   var appear = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _floatable;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -65,18 +68,25 @@ var useFloating = function useFloating(_ref2) {
           }
           return _context.abrupt("return");
         case 2:
+          _floatable = floatableRef.current;
+          if (_floatable) {
+            _context.next = 5;
+            break;
+          }
+          return _context.abrupt("return");
+        case 5:
           _isOpen.current = true;
-          floatableRef.current.style.display = "unset";
-          _context.next = 6;
-          return animate(floatableRef.current, {
+          _floatable.style.display = "unset";
+          _context.next = 9;
+          return animate(_scope.current, {
             opacity: 1
           }, {
             duration: 0.2
           });
-        case 6:
-          _context.next = 8;
+        case 9:
+          _context.next = 11;
           return onEntered === null || onEntered === void 0 ? void 0 : onEntered();
-        case 8:
+        case 11:
         case "end":
           return _context.stop();
       }
@@ -87,6 +97,7 @@ var useFloating = function useFloating(_ref2) {
   // when using force disappear, it will be forced to disappear
   var disappear = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     var force,
+      _floatable,
       _args2 = arguments;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
@@ -104,21 +115,26 @@ var useFloating = function useFloating(_ref2) {
           }
           return _context2.abrupt("return");
         case 5:
+          _floatable = floatableRef.current;
+          if (_floatable) {
+            _context2.next = 8;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 8:
           _isOpen.current = false;
-          _context2.next = 8;
-          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(floatableRef.current, {
+          _context2.next = 11;
+          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(_scope.current, {
             opacity: 0
           }, {
             duration: 0.2
           }).then(function () {
-            // Popper is unmounted
-            if (!floatableRef.current) return;
-            floatableRef.current.style.display = "none";
+            _floatable.style.display = "none";
           })]);
-        case 8:
-          _context2.next = 10;
+        case 11:
+          _context2.next = 13;
           return onExited === null || onExited === void 0 ? void 0 : onExited();
-        case 10:
+        case 13:
         case "end":
           return _context2.stop();
       }
@@ -132,8 +148,10 @@ var useFloating = function useFloating(_ref2) {
   // position listener
   var position = relax.useEvent(function () {
     if (!trigger) return;
-    var cleanup = dom.autoUpdate(trigger, floatableRef.current, function () {
-      dom.computePosition(trigger, floatableRef.current, {
+    var _floatable = floatableRef.current;
+    if (!_floatable) return;
+    var cleanup = dom.autoUpdate(trigger, _floatable, function () {
+      dom.computePosition(trigger, _floatable, {
         placement: placement,
         middleware: [dom.flip(), dom.shift(), dom.offset(offsets), arrowable && !!arrowRef.current && dom.arrow({
           element: arrowRef.current,
@@ -148,7 +166,7 @@ var useFloating = function useFloating(_ref2) {
           _placement$split2 = _slicedToArray(_placement$split, 1),
           side = _placement$split2[0];
         // set float element styles
-        floatableRef.current.style.translate = "".concat(x, "px ").concat(y, "px");
+        _floatable.style.translate = "".concat(x, "px ").concat(y, "px");
         // set arrow styles
         if (middlewareData.arrow && !!arrowRef.current) {
           var _middlewareData$arrow, _middlewareData$arrow2;
@@ -179,6 +197,7 @@ var useFloating = function useFloating(_ref2) {
   }, [disappear, open, position]);
   return {
     floatableRef: floatableRef,
+    composedRef: composedRef,
     arrowRef: arrowRef,
     disappear: disappear
   };

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

@@ -26,7 +26,8 @@ export declare const useFloating: ({ open, trigger: _trigger, placement, arrowab
     onExited?: () => Promise<void> | void;
     disappearable: boolean;
 }) => {
-    floatableRef: import("framer-motion").AnimationScope<HTMLDivElement>;
+    floatableRef: import("react").RefObject<HTMLDivElement>;
+    composedRef: (reference: HTMLDivElement) => void;
     arrowRef: import("react").RefObject<HTMLDivElement>;
     disappear: (force?: boolean) => Promise<void>;
 };

package/dist/components/popper/hooks.mjs

@@ -3,7 +3,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useRef, useEffect, useMemo } from 'react';
 import { useAnimate } from 'framer-motion';
-import { useEvent } from '@aiszlab/relax';
+import { useComposedRef, useEvent } from '@aiszlab/relax';
 import { useContainer } from '../../hooks/use-container.mjs';
 import { autoUpdate, computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';
 
@@ -42,9 +42,11 @@ var useFloating = function useFloating(_ref2) {
     disappearable = _ref2.disappearable;
   var _useAnimate = useAnimate(),
     _useAnimate2 = _slicedToArray(_useAnimate, 2),
-    floatableRef = _useAnimate2[0],
+    _scope = _useAnimate2[0],
     animate = _useAnimate2[1];
+  var floatableRef = useRef(null);
   var arrowRef = useRef(null);
+  var composedRef = useComposedRef(_scope, floatableRef);
   var _useContainer = useContainer({
       container: _trigger,
       useBody: false
@@ -56,6 +58,7 @@ var useFloating = function useFloating(_ref2) {
   // first remove `display: none` style
   // then animate
   var appear = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _floatable;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -65,18 +68,25 @@ var useFloating = function useFloating(_ref2) {
           }
           return _context.abrupt("return");
         case 2:
+          _floatable = floatableRef.current;
+          if (_floatable) {
+            _context.next = 5;
+            break;
+          }
+          return _context.abrupt("return");
+        case 5:
           _isOpen.current = true;
-          floatableRef.current.style.display = "unset";
-          _context.next = 6;
-          return animate(floatableRef.current, {
+          _floatable.style.display = "unset";
+          _context.next = 9;
+          return animate(_scope.current, {
             opacity: 1
           }, {
             duration: 0.2
           });
-        case 6:
-          _context.next = 8;
+        case 9:
+          _context.next = 11;
           return onEntered === null || onEntered === void 0 ? void 0 : onEntered();
-        case 8:
+        case 11:
         case "end":
           return _context.stop();
       }
@@ -87,6 +97,7 @@ var useFloating = function useFloating(_ref2) {
   // when using force disappear, it will be forced to disappear
   var disappear = useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     var force,
+      _floatable,
       _args2 = arguments;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
@@ -104,21 +115,26 @@ var useFloating = function useFloating(_ref2) {
           }
           return _context2.abrupt("return");
         case 5:
+          _floatable = floatableRef.current;
+          if (_floatable) {
+            _context2.next = 8;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 8:
           _isOpen.current = false;
-          _context2.next = 8;
-          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(floatableRef.current, {
+          _context2.next = 11;
+          return Promise.all([onExit === null || onExit === void 0 ? void 0 : onExit(), animate(_scope.current, {
             opacity: 0
           }, {
             duration: 0.2
           }).then(function () {
-            // Popper is unmounted
-            if (!floatableRef.current) return;
-            floatableRef.current.style.display = "none";
+            _floatable.style.display = "none";
           })]);
-        case 8:
-          _context2.next = 10;
+        case 11:
+          _context2.next = 13;
           return onExited === null || onExited === void 0 ? void 0 : onExited();
-        case 10:
+        case 13:
         case "end":
           return _context2.stop();
       }
@@ -132,8 +148,10 @@ var useFloating = function useFloating(_ref2) {
   // position listener
   var position = useEvent(function () {
     if (!trigger) return;
-    var cleanup = autoUpdate(trigger, floatableRef.current, function () {
-      computePosition(trigger, floatableRef.current, {
+    var _floatable = floatableRef.current;
+    if (!_floatable) return;
+    var cleanup = autoUpdate(trigger, _floatable, function () {
+      computePosition(trigger, _floatable, {
         placement: placement,
         middleware: [flip(), shift(), offset(offsets), arrowable && !!arrowRef.current && arrow({
           element: arrowRef.current,
@@ -148,7 +166,7 @@ var useFloating = function useFloating(_ref2) {
           _placement$split2 = _slicedToArray(_placement$split, 1),
           side = _placement$split2[0];
         // set float element styles
-        floatableRef.current.style.translate = "".concat(x, "px ").concat(y, "px");
+        _floatable.style.translate = "".concat(x, "px ").concat(y, "px");
         // set arrow styles
         if (middlewareData.arrow && !!arrowRef.current) {
           var _middlewareData$arrow, _middlewareData$arrow2;
@@ -179,6 +197,7 @@ var useFloating = function useFloating(_ref2) {
   }, [disappear, open, position]);
   return {
     floatableRef: floatableRef,
+    composedRef: composedRef,
     arrowRef: arrowRef,
     disappear: disappear
   };

package/dist/components/skeleton/skeleton.cjs

@@ -44,8 +44,8 @@ var Skeleton = function Skeleton(_ref) {
   var classNames = useClassNames.useClassNames("skeleton");
   var theme = hooks.useTheme();
   var styled = stylex.default.props(styles.variables({
-    shadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thin, true),
-    lighterShadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thick, true)
+    shadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thin, "style"),
+    lighterShadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thick, "style")
   }), styles.skeleton, animation && styles.animation);
   return /*#__PURE__*/React.createElement("div", {
     className: relax.clsx(classNames[className.SkeletonClassToken.Skeleton], className$1, styled.className),

package/dist/components/skeleton/skeleton.mjs

@@ -42,8 +42,8 @@ var Skeleton = function Skeleton(_ref) {
   var classNames = useClassNames("skeleton");
   var theme = useTheme();
   var styled = _stylex.props(styles.variables({
-    shadow: hexToRgba(theme.colors.shadow, OPACITY.thin, true),
-    lighterShadow: hexToRgba(theme.colors.shadow, OPACITY.thick, true)
+    shadow: hexToRgba(theme.colors.shadow, OPACITY.thin, "style"),
+    lighterShadow: hexToRgba(theme.colors.shadow, OPACITY.thick, "style")
   }), styles.skeleton, animation && styles.animation);
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[SkeletonClassToken.Skeleton], className, styled.className),

package/dist/components/switch/switch.cjs

@@ -198,6 +198,7 @@ var styles = {
       display: "musaex-78zum5",
       flexDirection: "musaex-1q0g3np",
       alignItems: "musaex-6s0dn4",
+      justifyContent: "musaex-l56j7k",
       color: "musaex-1heor9g",
       transitionProperty: "musaex-1ve1rmq",
       transitionDuration: "musaex-13dflua",
@@ -266,28 +267,28 @@ var Switch = function Switch(_ref) {
       backgroundColor: theme.colors["surface-container-highest"],
       color: theme.colors["on-surface-variant"]
     }, disabled && {
-      borderColor: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.medium, true),
-      backgroundColor: color.hexToRgba(theme.colors["surface-variant"], tokens_stylex.OPACITY.medium, true),
-      color: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.thicker, true)
+      borderColor: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.medium, "style"),
+      backgroundColor: color.hexToRgba(theme.colors["surface-variant"], tokens_stylex.OPACITY.medium, "style"),
+      color: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.thicker, "style")
     })), isChecked && styles["switch"].checked(_objectSpread({
       backgroundColor: theme.colors.primary,
       color: theme.colors["on-primary"]
     }, disabled && {
-      backgroundColor: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.medium, true),
+      backgroundColor: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.medium, "style"),
       color: theme.colors.surface
     })), disabled && styles["switch"].disabled),
     slider: stylex.default.props(styles.slider.normal(_objectSpread({
       backgroundColor: theme.colors["on-surface-variant"],
       color: theme.colors["surface-container-highest"]
     }, disabled && {
-      backgroundColor: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.thicker, true),
+      backgroundColor: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.thicker, "style"),
       color: theme.colors["surface-container-highest"]
     })), icon && styles.slider.icon, disabled && styles.slider.disabled, isChecked && styles.slider.checked(_objectSpread({
       backgroundColor: theme.colors["on-primary"],
       color: theme.colors["on-primary-container"]
     }, disabled && {
       backgroundColor: theme.colors.surface,
-      color: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.thicker, true)
+      color: color.hexToRgba(theme.colors["on-surface"], tokens_stylex.OPACITY.thicker, "style")
     }))),
     supporting: stylex.default.props(styles.supporting["default"], isChecked && styles.supporting.checked),
     leading: stylex.default.props(styles.supporting.child, styles.leading["default"], isChecked && styles.leading.checked),

package/dist/components/switch/switch.mjs

@@ -196,6 +196,7 @@ var styles = {
       display: "musaex-78zum5",
       flexDirection: "musaex-1q0g3np",
       alignItems: "musaex-6s0dn4",
+      justifyContent: "musaex-l56j7k",
       color: "musaex-1heor9g",
       transitionProperty: "musaex-1ve1rmq",
       transitionDuration: "musaex-13dflua",
@@ -264,28 +265,28 @@ var Switch = function Switch(_ref) {
       backgroundColor: theme.colors["surface-container-highest"],
       color: theme.colors["on-surface-variant"]
     }, disabled && {
-      borderColor: hexToRgba(theme.colors["on-surface"], OPACITY.medium, true),
-      backgroundColor: hexToRgba(theme.colors["surface-variant"], OPACITY.medium, true),
-      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, true)
+      borderColor: hexToRgba(theme.colors["on-surface"], OPACITY.medium, "style"),
+      backgroundColor: hexToRgba(theme.colors["surface-variant"], OPACITY.medium, "style"),
+      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, "style")
     })), isChecked && styles["switch"].checked(_objectSpread({
       backgroundColor: theme.colors.primary,
       color: theme.colors["on-primary"]
     }, disabled && {
-      backgroundColor: hexToRgba(theme.colors["on-surface"], OPACITY.medium, true),
+      backgroundColor: hexToRgba(theme.colors["on-surface"], OPACITY.medium, "style"),
       color: theme.colors.surface
     })), disabled && styles["switch"].disabled),
     slider: _stylex.props(styles.slider.normal(_objectSpread({
       backgroundColor: theme.colors["on-surface-variant"],
       color: theme.colors["surface-container-highest"]
     }, disabled && {
-      backgroundColor: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, true),
+      backgroundColor: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, "style"),
       color: theme.colors["surface-container-highest"]
     })), icon && styles.slider.icon, disabled && styles.slider.disabled, isChecked && styles.slider.checked(_objectSpread({
       backgroundColor: theme.colors["on-primary"],
       color: theme.colors["on-primary-container"]
     }, disabled && {
       backgroundColor: theme.colors.surface,
-      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, true)
+      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, "style")
     }))),
     supporting: _stylex.props(styles.supporting["default"], isChecked && styles.supporting.checked),
     leading: _stylex.props(styles.supporting.child, styles.leading["default"], isChecked && styles.leading.checked),

package/dist/index.cjs

@@ -1,4 +1,4 @@
-require("musae/styles")
+require("musae/styles.css")
 var index = require('./components/avatar/index.cjs');
 var index$1 = require('./components/radio/index.cjs');
 var index$2 = require('./components/checkbox/index.cjs');

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import "musae/styles";
+import "musae/styles.css";
 export { Avatar } from './components/avatar/index.mjs';
 export { Radio } from './components/radio/index.mjs';
 export { Checkbox } from './components/checkbox/index.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -24,7 +24,7 @@
       "import": "./dist/index.mjs",
       "default": "./dist/index.mjs"
     },
-    "./styles": "./dist/styles.css",
+    "./styles.css": "./dist/styles.css",
     "./locales": {
       "types": "./dist/locale/locales/index.d.ts",
       "require": "./dist/locale/locales/index.cjs",
@@ -53,8 +53,8 @@
     "pnpm": ">=9"
   },
   "dependencies": {
-    "@aiszlab/fuzzy": "^1.4.7",
-    "@aiszlab/relax": "^1.4.7",
+    "@aiszlab/fuzzy": "^1.5.1",
+    "@aiszlab/relax": "^1.5.1",
     "@babel/runtime": "^7.25.7",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -93,7 +93,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.13",
-    "@types/node": "^22.7.7",
+    "@types/node": "^22.7.8",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "babel-jest": "^29.7.0",