musae 0.3.2 → 0.3.5

package/dist/components/rich-text-editor/rich-text-editor.mjs

@@ -1,3 +1,4 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
@@ -11,7 +12,7 @@ import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import CheckListPlugin from './plugins/check-list/index.mjs';
 import ControlledStatePlugin from './plugins/controlled-state/index.mjs';
-import { useIdentity, useDefault } from '@aiszlab/relax';
+import { useIdentity, useDefault, clsx } from '@aiszlab/relax';
 import { useMessage } from '../message/hooks.mjs';
 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';
@@ -23,13 +24,13 @@ import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { CodeNode } from '@lexical/code';
 import { CheckableListItemNode, replacement } from './nodes/checkable-list-item.mjs';
 import ToolbarPlugin from './plugins/toolbar/index.mjs';
-import MarkdownShortcutPlugin, { TRANSFORMERS } from './plugins/markdown-shortcut/index.mjs';
+import MarkdownShortcutPlugin from './plugins/markdown-shortcut/index.mjs';
 import { typography } from '../theme/theme.mjs';
 import '../checkbox/index.mjs';
-import { $convertFromMarkdownString } from '@lexical/markdown';
+import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown';
 import styles$1 from '../checkbox/styles.mjs';
 
-var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value"];
+var _excluded = ["placeholder", "disabled", "defaultValue", "onChange", "value", "className", "style"];
 var styles = {
   shell: function shell(props) {
     return [{
@@ -79,7 +80,9 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange;
     _ref.value;
-    var props = _objectWithoutProperties(_ref, _excluded);
+    var className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useIdentity = useIdentity(),
     _useIdentity2 = _slicedToArray(_useIdentity, 1),
     id = _useIdentity2[0];
@@ -103,7 +106,7 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       codeBackgroundColor: theme.colors[ColorToken.SurfaceContainerHighest]
     })),
     editor: {
-      className: "musaex-1a2a7pz musaex-y0sash musaex-1vgzror musaex-igxgg9 musaex-1y06zzy"
+      className: "musaex-1a2a7pz musaex-y0sash musaex-1vgzror musaex-igxgg9 musaex-ktxt4i"
     },
     h1: _stylex.props(typography.display.large),
     h2: _stylex.props(typography.display.medium),
@@ -173,7 +176,7 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
         // different value usage, use different serialization
         switch (_use) {
           case "markdown":
-            $convertFromMarkdownString(defaultValue, TRANSFORMERS);
+            $convertFromMarkdownString(defaultValue, TRANSFORMERS, void 0, true);
             break;
           default:
             editor.setEditorState(editor.parseEditorState(defaultValue));
@@ -193,8 +196,8 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(LexicalComposer, {
     initialConfig: initialConfig
   }, /*#__PURE__*/React.createElement("div", {
-    className: styled.shell.className,
-    style: styled.shell.style
+    className: clsx(className, styled.shell.className),
+    style: _objectSpread(_objectSpread({}, styled.shell.style), style)
   }, !disabled && /*#__PURE__*/React.createElement(ToolbarPlugin, null), /*#__PURE__*/React.createElement(RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
       className: styled.editor.className,

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

@@ -1,5 +1,5 @@
 import { type MouseEvent, type Key } from "react";
-import type { Ripple } from "./types";
+import type { Ripple } from "musae/types/ripple";
 export declare function useRipple(): {
     ripples: Ripple[];
     add: (event: MouseEvent<HTMLElement>) => void;

package/dist/components/ripple/ripple.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { RippleProps } from "./types";
+import { RippleProps } from "musae/types/ripple";
 declare const Ripple: ({ ripples, onClear }: RippleProps) => React.JSX.Element[];
 export default Ripple;

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

@@ -1,5 +1,5 @@
 import { type Key } from "react";
-import type { Mode, ReadableOptions, SelectProps, ValueOrValues } from "../../types/select";
+import type { Mode, ReadableOptions, SelectProps, ValueOrValues } from "musae/types/select";
 import type { Option } from "musae/types/option";
 /**
  * @description

package/dist/components/select/select.cjs

@@ -66,12 +66,15 @@ var Select = function Select(_ref) {
       className: "musaex-1pgy25r"
     }
   };
+  var selectedKeys = React.useMemo(function () {
+    return Array.from(readableValues.keys());
+  }, [readableValues]);
   return /*#__PURE__*/React.createElement(picker.default, _objectSpread({
     ref: ref,
     pickable: /*#__PURE__*/React.createElement(selections.default, {
       items: menuItems,
       onSelect: onChange,
-      selectedKeys: Array.from(readableValues.keys())
+      selectedKeys: selectedKeys
     }),
     className: relax.clsx(classNames[className.SelectClassToken.Select], className$1, styled.picker.className),
     style: _objectSpread(_objectSpread({}, styled.picker.style), style),

package/dist/components/select/select.mjs

@@ -1,5 +1,5 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useMemo } from 'react';
 import Picker from '../picker/picker.mjs';
 import { useOptions, useValue } from './hooks.mjs';
 import { SelectClassToken } from '../../utils/class-name.mjs';
@@ -64,12 +64,15 @@ var Select = function Select(_ref) {
       className: "musaex-1pgy25r"
     }
   };
+  var selectedKeys = useMemo(function () {
+    return Array.from(readableValues.keys());
+  }, [readableValues]);
   return /*#__PURE__*/React.createElement(Picker, _objectSpread({
     ref: ref,
     pickable: /*#__PURE__*/React.createElement(Selections, {
       items: menuItems,
       onSelect: onChange,
-      selectedKeys: Array.from(readableValues.keys())
+      selectedKeys: selectedKeys
     }),
     className: clsx(classNames[SelectClassToken.Select], className, styled.picker.className),
     style: _objectSpread(_objectSpread({}, styled.picker.style), style),

package/dist/components/select/selections.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { SelectionsProps } from "../../types/select";
+import type { SelectionsProps } from "musae/types/select";
 /**
  * @description
  * just display the selections for user selectable like options

package/dist/components/select/selector.d.ts

@@ -1,4 +1,4 @@
 import { type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from "react";
-import type { SelectorProps, SelectorRef } from "../../types/select";
+import type { SelectorProps, SelectorRef } from "musae/types/select";
 declare const Selector: ForwardRefExoticComponent<PropsWithoutRef<SelectorProps> & RefAttributes<SelectorRef>>;
 export default Selector;

package/dist/components/select/utils.cjs

@@ -11,10 +11,8 @@ var relax = require('@aiszlab/relax');
 var toValues = function toValues(valueOrValues) {
   // empty
   if (relax.isVoid(valueOrValues)) return [];
-  // already array
-  if (relax.isArray(valueOrValues)) return valueOrValues;
   // convert to array
-  return [valueOrValues];
+  return relax.toArray(valueOrValues);
 };
 /**
  * @description

package/dist/components/select/utils.d.ts

@@ -1,11 +1,11 @@
-import type { Filter, ReadableOptions, ToMenuItem, Value, ValueOrValues } from "../../types/select";
+import type { Filter, ReadableOptions, ToMenuItem, Value, ValueOrValues } from "musae/types/select";
 import type { Option } from "musae/types/option";
 import type { MenuItem } from "musae/types/menu";
 /**
  * @description
  * convert to value array
  */
-export declare const toValues: (valueOrValues?: ValueOrValues) => Value[];
+export declare const toValues: (valueOrValues?: ValueOrValues) => (string | number | bigint | Pick<Option, "value" | "label">)[];
 /**
  * @description
  * convert to key

package/dist/components/select/utils.mjs

@@ -2,7 +2,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
-import { isVoid, isArray } from '@aiszlab/relax';
+import { isVoid, toArray } from '@aiszlab/relax';
 
 /**
  * @description
@@ -11,10 +11,8 @@ import { isVoid, isArray } from '@aiszlab/relax';
 var toValues = function toValues(valueOrValues) {
   // empty
   if (isVoid(valueOrValues)) return [];
-  // already array
-  if (isArray(valueOrValues)) return valueOrValues;
   // convert to array
-  return [valueOrValues];
+  return toArray(valueOrValues);
 };
 /**
  * @description

package/dist/components/skeleton/skeleton.cjs

@@ -6,53 +6,24 @@ var React = require('react');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var componentToken = require('../../utils/component-token.cjs');
+var hooks = require('../theme/hooks.cjs');
+var color = require('@aiszlab/fuzzy/color');
 
 var styles = {
-  title: {
-    width: "musaex-1fvqbsf",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-ok3b7d",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  button: {
-    width: "musaex-1lwsb27",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  avatar: {
-    width: "musaex-rdd3y",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
+  variables: function variables(props) {
+    return [{
+      "--shadow": "musaex-36wvql",
+      "--lighter-shadow": "musaex-p8ugqh",
+      $$css: true
+    }, {
+      "----shadow": props.shadow != null ? props.shadow : "initial",
+      "----lighter-shadow": props.lighterShadow != null ? props.lighterShadow : "initial"
+    }];
   },
   skeleton: {
-    background: "musaex-1csrv2e",
+    background: "musaex-uwpeme",
     backgroundAttachment: null,
     backgroundClip: null,
     backgroundColor: null,
@@ -66,7 +37,7 @@ var styles = {
     $$css: true
   },
   animation: {
-    background: "musaex-1jvh8g2",
+    background: "musaex-1br516c",
     backgroundAttachment: null,
     backgroundClip: null,
     backgroundColor: null,
@@ -86,12 +57,15 @@ var styles = {
 };
 var Skeleton = function Skeleton(_ref) {
   var _ref$animation = _ref.animation,
-    animation = _ref$animation === void 0 ? false : _ref$animation,
-    variant = _ref.variant,
+    animation = _ref$animation === void 0 ? true : _ref$animation,
     className$1 = _ref.className,
     style = _ref.style;
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Skeleton);
-  var styled = stylex.default.props(!!variant && styles[variant], animation && styles.animation);
+  var theme = hooks.useTheme();
+  var styled = stylex.default.props(styles.variables({
+    shadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thin),
+    lighterShadow: color.hexToRgba(theme.colors.shadow, tokens_stylex.OPACITY.thick)
+  }), styles.skeleton, animation && styles.animation);
   return /*#__PURE__*/React.createElement("div", {
     className: relax.clsx(classNames[className.SkeletonClassToken.Skeleton], className$1, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)

package/dist/components/skeleton/skeleton.d.ts

@@ -1,4 +1,4 @@
-import type { SkeletonProps } from "./types";
+import type { SkeletonProps } from "musae/types/skeleton";
 import React from "react";
-declare const Skeleton: ({ animation, variant, className, style }: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: ({ animation, className, style }: SkeletonProps) => React.JSX.Element;
 export default Skeleton;

package/dist/components/skeleton/skeleton.mjs

@@ -4,53 +4,24 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { SkeletonClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
+import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { hexToRgba } from '@aiszlab/fuzzy/color';
 
 var styles = {
-  title: {
-    width: "musaex-1fvqbsf",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-ok3b7d",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  button: {
-    width: "musaex-1lwsb27",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  },
-  avatar: {
-    width: "musaex-rdd3y",
-    height: "musaex-1bti5vo",
-    borderRadius: "musaex-z7qqyb",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
+  variables: function variables(props) {
+    return [{
+      "--shadow": "musaex-36wvql",
+      "--lighter-shadow": "musaex-p8ugqh",
+      $$css: true
+    }, {
+      "----shadow": props.shadow != null ? props.shadow : "initial",
+      "----lighter-shadow": props.lighterShadow != null ? props.lighterShadow : "initial"
+    }];
   },
   skeleton: {
-    background: "musaex-1csrv2e",
+    background: "musaex-uwpeme",
     backgroundAttachment: null,
     backgroundClip: null,
     backgroundColor: null,
@@ -64,7 +35,7 @@ var styles = {
     $$css: true
   },
   animation: {
-    background: "musaex-1jvh8g2",
+    background: "musaex-1br516c",
     backgroundAttachment: null,
     backgroundClip: null,
     backgroundColor: null,
@@ -84,12 +55,15 @@ var styles = {
 };
 var Skeleton = function Skeleton(_ref) {
   var _ref$animation = _ref.animation,
-    animation = _ref$animation === void 0 ? false : _ref$animation,
-    variant = _ref.variant,
+    animation = _ref$animation === void 0 ? true : _ref$animation,
     className = _ref.className,
     style = _ref.style;
   var classNames = useClassNames(ComponentToken.Skeleton);
-  var styled = _stylex.props(!!variant && styles[variant], animation && styles.animation);
+  var theme = useTheme();
+  var styled = _stylex.props(styles.variables({
+    shadow: hexToRgba(theme.colors.shadow, OPACITY.thin),
+    lighterShadow: hexToRgba(theme.colors.shadow, OPACITY.thick)
+  }), styles.skeleton, animation && styles.animation);
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[SkeletonClassToken.Skeleton], className, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style)

package/dist/components/space/space.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { SpaceProps } from "./types";
+import type { SpaceProps } from "musae/types/space";
 declare const Space: ({ gutter, children, className, style, orientation, }: SpaceProps) => React.JSX.Element;
 export default Space;

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

@@ -1,2 +1,2 @@
-import type { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/steps";
 export declare const Context: import("react").Context<ContextValue>;

package/dist/components/steps/item.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { StepItemProps } from "./types";
+import type { StepItemProps } from "musae/types/steps";
 declare const Item: ({ leading, title, description, value }: StepItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/steps/steps.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { StepsProps } from "./types";
+import type { StepsProps } from "musae/types/steps";
 /**
  * @description
  * `Steps` component

package/dist/components/switch/switch.cjs

@@ -5,12 +5,13 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 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 tokens_stylex = require('../theme/tokens.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 layer = require('../../utils/layer.cjs');
 var componentToken = require('../../utils/component-token.cjs');
+var color = require('@aiszlab/fuzzy/color');
 var check = require('../icon/icons/navigation/check.cjs');
 var close = require('../icon/icons/navigation/close.cjs');
 
@@ -139,7 +140,7 @@ var styles = {
       $$css: true
     },
     disabled: {
-      opacity: "musaex-niy1rt",
+      opacity: "musaex-1n1gcw9",
       $$css: true
     },
     checked: function checked(props) {
@@ -258,28 +259,28 @@ var Switch = function Switch(_ref) {
       backgroundColor: theme.colors[colors.ColorToken.SurfaceContainerHighest],
       color: theme.colors[colors.ColorToken.OnSurfaceVariant]
     }, disabled && {
-      borderColor: layer.layer(theme.colors[colors.ColorToken.OnSurface], "medium"),
-      backgroundColor: layer.layer(theme.colors[colors.ColorToken.SurfaceVariant], "medium"),
-      color: layer.layer(theme.colors[colors.ColorToken.OnSurface], "thicker")
+      borderColor: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
+      backgroundColor: color.hexToRgba(theme.colors[colors.ColorToken.SurfaceVariant], tokens_stylex.OPACITY.medium),
+      color: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
     })), isChecked && styles["switch"].checked(_objectSpread({
       backgroundColor: theme.colors[colors.ColorToken.Primary],
       color: theme.colors[colors.ColorToken.OnPrimary]
     }, disabled && {
-      backgroundColor: layer.layer(theme.colors[colors.ColorToken.OnSurface], "medium"),
+      backgroundColor: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
       color: theme.colors[colors.ColorToken.Surface]
     })), disabled && styles["switch"].disabled),
     slider: stylex.default.props(styles.slider.normal(_objectSpread({
       backgroundColor: theme.colors[colors.ColorToken.OnSurfaceVariant],
       color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
     }, disabled && {
-      backgroundColor: layer.layer(theme.colors[colors.ColorToken.OnSurface], "thicker"),
+      backgroundColor: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker),
       color: theme.colors[colors.ColorToken.SurfaceContainerHighest]
     })), icon && styles.slider.icon, disabled && styles.slider.disabled, isChecked && styles.slider.checked(_objectSpread({
       backgroundColor: theme.colors[colors.ColorToken.OnPrimary],
       color: theme.colors[colors.ColorToken.OnPrimaryContainer]
     }, disabled && {
       backgroundColor: theme.colors[colors.ColorToken.Surface],
-      color: layer.layer(theme.colors[colors.ColorToken.OnSurface], "thicker")
+      color: color.hexToRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker)
     }))),
     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.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { SwitchProps } from "./types";
+import type { SwitchProps } from "musae/types/switch";
 declare const Switch: ({ value, style, className, icon, checkedChildren, uncheckedChildren, disabled, onChange, }: SwitchProps) => React.JSX.Element;
 export default Switch;

package/dist/components/switch/switch.mjs

@@ -3,12 +3,13 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
 import { useControlledState, useEvent, clsx } from '@aiszlab/relax';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { SwitchClassToken } from '../../utils/class-name.mjs';
-import { layer } from '../../utils/layer.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
+import { hexToRgba } from '@aiszlab/fuzzy/color';
 import Check from '../icon/icons/navigation/check.mjs';
 import Close from '../icon/icons/navigation/close.mjs';
 
@@ -137,7 +138,7 @@ var styles = {
       $$css: true
     },
     disabled: {
-      opacity: "musaex-niy1rt",
+      opacity: "musaex-1n1gcw9",
       $$css: true
     },
     checked: function checked(props) {
@@ -256,28 +257,28 @@ var Switch = function Switch(_ref) {
       backgroundColor: theme.colors[ColorToken.SurfaceContainerHighest],
       color: theme.colors[ColorToken.OnSurfaceVariant]
     }, disabled && {
-      borderColor: layer(theme.colors[ColorToken.OnSurface], "medium"),
-      backgroundColor: layer(theme.colors[ColorToken.SurfaceVariant], "medium"),
-      color: layer(theme.colors[ColorToken.OnSurface], "thicker")
+      borderColor: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
+      backgroundColor: hexToRgba(theme.colors[ColorToken.SurfaceVariant], OPACITY.medium),
+      color: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
     })), isChecked && styles["switch"].checked(_objectSpread({
       backgroundColor: theme.colors[ColorToken.Primary],
       color: theme.colors[ColorToken.OnPrimary]
     }, disabled && {
-      backgroundColor: layer(theme.colors[ColorToken.OnSurface], "medium"),
+      backgroundColor: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
       color: theme.colors[ColorToken.Surface]
     })), disabled && styles["switch"].disabled),
     slider: _stylex.props(styles.slider.normal(_objectSpread({
       backgroundColor: theme.colors[ColorToken.OnSurfaceVariant],
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     }, disabled && {
-      backgroundColor: layer(theme.colors[ColorToken.OnSurface], "thicker"),
+      backgroundColor: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker),
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     })), icon && styles.slider.icon, disabled && styles.slider.disabled, isChecked && styles.slider.checked(_objectSpread({
       backgroundColor: theme.colors[ColorToken.OnPrimary],
       color: theme.colors[ColorToken.OnPrimaryContainer]
     }, disabled && {
       backgroundColor: theme.colors[ColorToken.Surface],
-      color: layer(theme.colors[ColorToken.OnSurface], "thicker")
+      color: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker)
     }))),
     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/components/table/body.cjs

@@ -76,7 +76,9 @@ var Body = function Body() {
   }));
   var rows = table.getRowModel().rows;
   var _isEmpty = relax.isEmpty(rows);
-  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(empty.default, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
+  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: table.getAllColumns().length
+  }, /*#__PURE__*/React.createElement(empty.default, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/React.createElement("tr", {
       key: row.id
     }, row.getVisibleCells().map(function (cell) {

package/dist/components/table/body.mjs

@@ -74,7 +74,9 @@ var Body = function Body() {
   }));
   var rows = table.getRowModel().rows;
   var _isEmpty = isEmpty(rows);
-  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Empty, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
+  return /*#__PURE__*/React.createElement("tbody", null, _isEmpty && (/*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: table.getAllColumns().length
+  }, /*#__PURE__*/React.createElement(Empty, null)))), !_isEmpty && table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/React.createElement("tr", {
       key: row.id
     }, row.getVisibleCells().map(function (cell) {

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

@@ -1,3 +1,3 @@
-import type { ContextValue } from "./types";
+import type { ContextValue } from "musae/types/tabs";
 declare const Context: import("react").Context<ContextValue | null>;
 export default Context;

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

@@ -1,11 +1,11 @@
 import { type Key, type RefObject } from "react";
-import type { TabItem } from "./types";
+import type { TabItem } from "musae/types/tabs";
 import type { Partialable } from "@aiszlab/relax/types";
 /**
  * @description
  * use tab context
  */
-export declare const useTabsContext: () => import("./types").ContextValue;
+export declare const useTabsContext: () => import("musae/types/tabs").ContextValue;
 /**
  * @description
  * tabs

package/dist/components/tabs/navigation.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type NavigationProps } from "./types";
+import { type NavigationProps } from "musae/types/tabs";
 declare const Navigation: ({ onChange }: NavigationProps) => React.JSX.Element;
 export default Navigation;

package/dist/components/tabs/panels.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type PanelsProps } from "./types";
+import { type PanelsProps } from "musae/types/tabs";
 declare const Panels: ({ forceRender, destroyable, activatedKeys }: PanelsProps) => React.JSX.Element;
 export default Panels;

package/dist/components/tabs/tab.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TabItemProps } from "./types";
+import type { TabItemProps } from "musae/types/tabs";
 declare const Tab: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default Tab;

package/dist/components/tabs/tabs.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TabsProps } from "./types";
+import type { TabsProps } from "musae/types/tabs";
 declare const Tabs: ({ items, className, style, activeKey: _activeKey, defaultActiveKey, forceRender, destroyable, }: TabsProps) => React.JSX.Element | null;
 export default Tabs;

package/dist/components/tag/tag.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { TagProps } from "./types";
+import type { TagProps } from "musae/types/tag";
 declare const Tag: ({ children, size, className, style, closable, onClose, leading, }: TagProps) => React.JSX.Element;
 export default Tag;