musae 0.3.1 → 0.3.3

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';
@@ -29,7 +30,7 @@ import '../checkbox/index.mjs';
 import { $convertFromMarkdownString } 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),
@@ -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.d.ts

@@ -1,4 +1,4 @@
-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";
 /**

package/dist/components/skeleton/skeleton.cjs

@@ -6,9 +6,22 @@ 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 colors = require('../../utils/colors.cjs');
 
 var styles = {
+  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"
+    }];
+  },
   title: {
     width: "musaex-1fvqbsf",
     height: "musaex-1bti5vo",
@@ -52,7 +65,7 @@ var styles = {
     $$css: true
   },
   skeleton: {
-    background: "musaex-1csrv2e",
+    background: "musaex-uwpeme",
     backgroundAttachment: null,
     backgroundClip: null,
     backgroundColor: null,
@@ -66,7 +79,7 @@ var styles = {
     $$css: true
   },
   animation: {
-    background: "musaex-1jvh8g2",
+    background: "musaex-1br516c",
     backgroundAttachment: null,
     backgroundClip: null,
     backgroundColor: null,
@@ -91,7 +104,11 @@ var Skeleton = function Skeleton(_ref) {
     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: colors.toRgba(theme.colors.shadow, tokens_stylex.OPACITY.thin),
+    lighterShadow: colors.toRgba(theme.colors.shadow, tokens_stylex.OPACITY.thick)
+  }), !!variant && styles[variant], 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;
 export default Skeleton;

package/dist/components/skeleton/skeleton.mjs

@@ -4,9 +4,22 @@ 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 { toRgba } from '../../utils/colors.mjs';
 
 var styles = {
+  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"
+    }];
+  },
   title: {
     width: "musaex-1fvqbsf",
     height: "musaex-1bti5vo",
@@ -50,7 +63,7 @@ var styles = {
     $$css: true
   },
   skeleton: {
-    background: "musaex-1csrv2e",
+    background: "musaex-uwpeme",
     backgroundAttachment: null,
     backgroundClip: null,
     backgroundColor: null,
@@ -64,7 +77,7 @@ var styles = {
     $$css: true
   },
   animation: {
-    background: "musaex-1jvh8g2",
+    background: "musaex-1br516c",
     backgroundAttachment: null,
     backgroundClip: null,
     backgroundColor: null,
@@ -89,7 +102,11 @@ var Skeleton = function Skeleton(_ref) {
     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: toRgba(theme.colors.shadow, OPACITY.thin),
+    lighterShadow: toRgba(theme.colors.shadow, OPACITY.thick)
+  }), !!variant && styles[variant], 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/switch/switch.cjs

@@ -5,11 +5,11 @@ 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 check = require('../icon/icons/navigation/check.cjs');
 var close = require('../icon/icons/navigation/close.cjs');
@@ -139,7 +139,7 @@ var styles = {
       $$css: true
     },
     disabled: {
-      opacity: "musaex-niy1rt",
+      opacity: "musaex-1n1gcw9",
       $$css: true
     },
     checked: function checked(props) {
@@ -258,28 +258,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: colors.toRgba(theme.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium),
+      backgroundColor: colors.toRgba(theme.colors[colors.ColorToken.SurfaceVariant], tokens_stylex.OPACITY.medium),
+      color: colors.toRgba(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: colors.toRgba(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: colors.toRgba(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: colors.toRgba(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.mjs

@@ -3,11 +3,11 @@ 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 { ColorToken, toRgba } 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 Check from '../icon/icons/navigation/check.mjs';
 import Close from '../icon/icons/navigation/close.mjs';
@@ -137,7 +137,7 @@ var styles = {
       $$css: true
     },
     disabled: {
-      opacity: "musaex-niy1rt",
+      opacity: "musaex-1n1gcw9",
       $$css: true
     },
     checked: function checked(props) {
@@ -256,28 +256,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: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium),
+      backgroundColor: toRgba(theme.colors[ColorToken.SurfaceVariant], OPACITY.medium),
+      color: toRgba(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: toRgba(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: toRgba(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: toRgba(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/theme/tokens.stylex.cjs

@@ -58,7 +58,14 @@ var sizes = {
   auto: "var(--musaex-1yg5bqe)",
   __themeName__: "musaex-qhz0mn"
 };
+var OPACITY = {
+  thin: 0.08,
+  medium: 0.12,
+  thick: 0.16,
+  thicker: 0.38
+};
 
+exports.OPACITY = OPACITY;
 exports.elevations = elevations;
 exports.sizes = sizes;
 exports.spacing = spacing;

package/dist/components/theme/tokens.stylex.d.ts

@@ -90,11 +90,13 @@ export declare const positions: import("@stylexjs/stylex").VarGroup<Readonly<{
 }>, symbol>;
 /**
  * @description
- * layer
+ * opacity
  */
-export declare const layers: import("@stylexjs/stylex").VarGroup<Readonly<{
-    thin: string;
-    medium: string;
-    thick: string;
-    thicker: string;
+export type OpacityToken = "thin" | "medium" | "thick" | "thicker";
+export declare const OPACITY: Record<OpacityToken, number>;
+export declare const opacity: import("@stylexjs/stylex").VarGroup<Readonly<{
+    medium: number;
+    thin: number;
+    thick: number;
+    thicker: number;
 }>, symbol>;

package/dist/components/theme/tokens.stylex.mjs

@@ -58,5 +58,11 @@ var sizes = {
   auto: "var(--musaex-1yg5bqe)",
   __themeName__: "musaex-qhz0mn"
 };
+var OPACITY = {
+  thin: 0.08,
+  medium: 0.12,
+  thick: 0.16,
+  thicker: 0.38
+};
 
-export { elevations, sizes, spacing };
+export { OPACITY, elevations, sizes, spacing };

package/dist/hooks/use-class-names.d.ts

@@ -256,8 +256,14 @@ export declare const useClassNames: <T extends ComponentToken = ComponentToken>(
         0: string;
         1: string;
     };
-    45: {};
+    45: {
+        0: string;
+    };
     46: {
         0: string;
     };
+    47: {
+        0: string;
+        1: string;
+    };
 }[T];

package/dist/hooks/use-container.d.ts

@@ -1,4 +1,4 @@
-import type { PortalProps } from "../components/portal/types";
+import type { PortalProps } from "../types/portal";
 /**
  * @description
  * container

package/dist/index.cjs

@@ -1,4 +1,4 @@
-import "musae/styles.css";
+require("musae/styles")
 var index = require('./components/avatar/index.cjs');
 var index$1 = require('./components/radio/index.cjs');
 var index$2 = require('./components/checkbox/index.cjs');
@@ -46,7 +46,7 @@ var progress = require('./components/progress/progress.cjs');
 var popover = require('./components/popover/popover.cjs');
 var watermark = require('./components/watermark/watermark.cjs');
 var collapse = require('./components/collapse/collapse.cjs');
-var floatingActionButton = require('./components/floating-action-button/floating-action-button.cjs');
+var fab = require('./components/fab/fab.cjs');
 var transfer = require('./components/transfer/transfer.cjs');
 var badge = require('./components/badge/badge.cjs');
 var skeleton = require('./components/skeleton/skeleton.cjs');
@@ -112,7 +112,7 @@ exports.Progress = progress.default;
 exports.Popover = popover.default;
 exports.Watermark = watermark.default;
 exports.Collapse = collapse.default;
-exports.FloatingActionButton = floatingActionButton.default;
+exports.Fab = fab.default;
 exports.Transfer = transfer.default;
 exports.Badge = badge.default;
 exports.Skeleton = skeleton.default;

package/dist/index.d.ts

@@ -48,7 +48,7 @@ export { Progress } from "./components/progress";
 export { Popover } from "./components/popover";
 export { Watermark } from "./components/watermark";
 export { Collapse } from "./components/collapse";
-export { FloatingActionButton } from "./components/floating-action-button";
+export { Fab } from "./components/fab";
 export { Transfer } from "./components/transfer";
 export { Badge } from "./components/badge";
 export { Skeleton } from "./components/skeleton";

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import "musae/styles.css";
+import "musae/styles";
 export { Avatar } from './components/avatar/index.mjs';
 export { Radio } from './components/radio/index.mjs';
 export { Checkbox } from './components/checkbox/index.mjs';
@@ -46,7 +46,7 @@ export { default as Progress } from './components/progress/progress.mjs';
 export { default as Popover } from './components/popover/popover.mjs';
 export { default as Watermark } from './components/watermark/watermark.mjs';
 export { default as Collapse } from './components/collapse/collapse.mjs';
-export { default as FloatingActionButton } from './components/floating-action-button/floating-action-button.mjs';
+export { default as Fab } from './components/fab/fab.mjs';
 export { default as Transfer } from './components/transfer/transfer.mjs';
 export { default as Badge } from './components/badge/badge.mjs';
 export { default as Skeleton } from './components/skeleton/skeleton.mjs';

package/dist/locale/context.d.ts

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

package/dist/locale/use-locale.d.ts

@@ -1,4 +1,4 @@
-import type { Locale, LocaleCode } from "../types/locale";
+import type { Locale, LocaleCode } from "musae/types/locale";
 export type LocaleComponentToken = Exclude<keyof Locale, "locale">;
 type UsedLocale<C extends LocaleComponentToken> = [Locale[C], LocaleCode];
 export declare const useLocale: <C extends LocaleComponentToken = LocaleComponentToken>(componentName: C) => UsedLocale<C>;

package/dist/styles.css

@@ -1,13 +1,15 @@
 :root{--musaex-127010g:-1;--musaex-1vh8wei:1;--musaex-11upij1:50;--musaex-oqacdq:60;--musaex-if0yew:990;--musaex-9gpkaf:1080;--musaex-80rspi:1080;--musaex-ah5ngi:1080;--musaex-ymrixl:1080;--musaex-1tyqau6:1090;--musaex-7fr0d6:1200;--musaex-dlxqgz:9999;}
 :root{--musaex-1aj7t22:0px;--musaex-1ax7z96:1px;--musaex-jdzqnm:2px;--musaex-1hydgie:4px;--musaex-fwu7zn:8px;--musaex-1l9c3uf:16px;--musaex-cx2xv5:20px;--musaex-rlgvtq:24px;--musaex-1qsoxbc:28px;--musaex-16n5srz:32px;--musaex-wll1cf:36px;--musaex-cftog7:40px;--musaex-laggmb:48px;--musaex-xrqq76:64px;--musaex-1spnrok:96px;--musaex-11uhodo:120px;--musaex-2h23ia:190px;--musaex-1rrllem:calc(Infinity * 1px);--musaex-1qj6wod:100%;--musaex-70uu0v:50%;--musaex-1yg5bqe:auto;}
-:root{--musaex-1hpqja9:0.08;--musaex-1my6c2f:0.12;--musaex-a796q7:0.16;--musaex-abm5yj:0.38;}
+:root{--musaex-1f2azoo:0.08;--musaex-1wowidf:0.12;--musaex-1ap209q:0.16;--musaex-1itczwt:0.38;}
 :root{--musaex-1odcd6w:0px;--musaex-bbiwro:0.1px;--musaex-1x9q6du:0.15px;--musaex-1fsxyg9:0.25px;--musaex-2s74kj:0.4px;--musaex-1ry795:0.5px;}
 :root{--musaex-1wblvyz:0px;--musaex-dojqt2:1px;--musaex-1h5s2h0:2px;--musaex-qk2ac7:4px;--musaex-h30iw9:6px;--musaex-vk5id6:8px;--musaex-1ncxh3n:12px;--musaex-oohzsl:16px;--musaex-1tzp6vk:24px;--musaex-15cw4i4:32px;--musaex-1n7xs5j:48px;--musaex-68a8pz:auto;}
 :root{--musaex-gmufu8:none;--musaex-15zostt:rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--musaex-1trg6py:rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--musaex-4poz8g:rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--musaex-1vq77kn:rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--musaex-1yt3x0a:rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;}
 .musaex-1gm2eyx{--code-background-color:var(----code-background-color,revert)}
+.musaex-p8ugqh{--lighter-shadow:var(----lighter-shadow,revert)}
 .musaex-1i66ttz{--on-primary-color:var(----on-primary-color,revert)}
 .musaex-1x71zss{--outline-color:var(----outline-color,revert)}
 .musaex-1w3qx2l{--primary-color:var(----primary-color,revert)}
+.musaex-36wvql{--shadow:var(----shadow,revert)}
 @keyframes musaex-1928g5l-B{from{background-position:100% 50%;}100%{background-position:0 50%;}}
 @keyframes musaex-r5zuwi-B{from{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-110;}12%{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-110;}20%{stroke-dasharray:20 200;stroke-width:30px;stroke-dashoffset:-115;}40%{stroke-dasharray:20 200;stroke-width:30px;stroke-dashoffset:-195;}48%{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-220;}62%{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-220;}70%{stroke-dasharray:20 200;stroke-width:30px;stroke-dashoffset:-225;}90%{stroke-dasharray:20 200;stroke-width:30px;stroke-dashoffset:-305;}98%{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-330;}to{stroke-dasharray:0 220;stroke-width:20px;stroke-dashoffset:-330;}}
 @keyframes musaex-f6d5zf-B{from{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:0;}8%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-5;}28%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-175;}36%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-220;}58%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-220;}66%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-225;}86%{stroke-dasharray:40 400;stroke-width:30px;stroke-dashoffset:-395;}94%{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-440;}to{stroke-dasharray:0 440;stroke-width:20px;stroke-dashoffset:-440;}}
@@ -15,8 +17,8 @@
 @keyframes musaex-rw80zm-B{from{stroke-dasharray:0 660;stroke-width:20px;stroke-dashoffset:-330;}4%{stroke-dasharray:0 660;stroke-width:20px;stroke-dashoffset:-330;}12%{stroke-dasharray:60 600;stroke-width:30px;stroke-dashoffset:-335;}32%{stroke-dasharray:60 600;stroke-width:30px;stroke-dashoffset:-595;}40%{stroke-dasharray:0 660;stroke-width:20px;stroke-dashoffset:-660;}54%{stroke-dasharray:0 660;stroke-width:20px;stroke-dashoffset:-660;}62%{stroke-dasharray:60 600;stroke-width:30px;stroke-dashoffset:-665;}82%{stroke-dasharray:60 600;stroke-width:30px;stroke-dashoffset:-925;}90%{stroke-dasharray:0 660;stroke-width:20px;stroke-dashoffset:-990;}to{stroke-dasharray:0 660;stroke-width:20px;stroke-dashoffset:-990;}}
 @keyframes musaex-1fy8ia8-B{to{transform:rotate(360deg);}}
 .musaex-1bu15qu:not(#\#){animation:musaex-1fy8ia8-B 1s infinite linear}
-.musaex-1jvh8g2:not(#\#){background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.15) 37%,rgba(0,0,0,.06) 63%)}
-.musaex-1csrv2e:not(#\#){background:rgba(0,0,0,.06)}
+.musaex-1br516c:not(#\#){background:linear-gradient(90deg,var(--shadow) 25%,var(--lighter-shadow) 37%,var(--shadow) 63%)}
+.musaex-uwpeme:not(#\#){background:var(--shadow)}
 .musaex-1om8rk0:not(#\#){border-inline:var(--musaex-1ax7z96)}
 .musaex-1gs6z28:not(#\#){border:none}
 .musaex-firn0k:not(#\#){border:var(--musaex-1aj7t22)}
@@ -224,7 +226,7 @@
 .musaex-byyjgo:not(#\#):not(#\#):not(#\#){opacity:.5}
 .musaex-g01cxk:not(#\#):not(#\#):not(#\#){opacity:0}
 .musaex-1hc1fzr:not(#\#):not(#\#):not(#\#){opacity:1}
-.musaex-niy1rt:not(#\#):not(#\#):not(#\#){opacity:var(--musaex-abm5yj)}
+.musaex-1n1gcw9:not(#\#):not(#\#):not(#\#){opacity:var(--musaex-1itczwt)}
 .musaex-3x427e:not(#\#):not(#\#):not(#\#){order:var(--order,revert)}
 .musaex-1jw8hb:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--musaex-15cw4i4) / 2 - var(--musaex-jdzqnm))}
 .musaex-naytfa:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--musaex-rlgvtq) + var(--musaex-jdzqnm) * 4)}
@@ -364,9 +366,9 @@ html[dir='rtl'] .musaex-p4054r:not(#\#):not(#\#):not(#\#){text-align:left}
 .musaex-fi9ciw:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(100% - var(--musaex-15cw4i4) * 2)}
 .musaex-16xn7b0:not(#\#):not(#\#):not(#\#):not(#\#){max-width:100vw}
 .musaex-77asx0:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--musaex-1qj6wod)}
-.musaex-1y06zzy:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musaex-11uhodo)}
 .musaex-tynr54:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musaex-16n5srz)}
 .musaex-1mjul0d:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musaex-1spnrok)}
+.musaex-ktxt4i:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musaex-2h23ia)}
 .musaex-1p0x9m9:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musaex-cftog7)}
 .musaex-1fdzm4i:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musaex-laggmb)}
 .musaex-1ite1z3:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musaex-rlgvtq)}

package/dist/{components/clock/types.d.ts → types/clock.d.ts}

@@ -1,9 +1,5 @@
 import { ComponentProps } from "musae/types/element";
-export declare enum TimeUnit {
-    Hour = "hour",
-    Minute = "minute",
-    Second = "second"
-}
+export type TimeUnit = "hour" | "minute" | "second";
 type Value = [number, number, number];
 /**
  * @description

package/dist/{components/config/types.d.ts → types/config.d.ts}

@@ -1,6 +1,6 @@
 import type { ReactNode, RefObject } from "react";
-import type { CLASS_NAMES } from "../../utils/class-name";
-import type { HolderRef } from "../notification/types";
+import type { CLASS_NAMES } from "../utils/class-name";
+import type { HolderRef } from "./notification";
 import type { Locale } from "musae/types/locale";
 export type ClassNames = typeof CLASS_NAMES;
 /**

package/dist/{components/countdown/types.d.ts → types/countdown.d.ts}

@@ -1,10 +1,10 @@
 import { ComponentProps } from "musae/types/element";
-import { ButtonProps } from "../button/types";
+import { ButtonProps } from "./button";
 /**
  * @description
- * countable props
+ * countdown props
  */
-export type CountableProps = Pick<ButtonProps, "children" | "disabled" | "variant" | "color" | "size" | "shape" | "ripple"> & ComponentProps & {
+export type CountdownProps = Pick<ButtonProps, "children" | "disabled" | "variant" | "color" | "size" | "shape" | "ripple"> & ComponentProps & {
     /**
      * @description
      * count total after every trigger

package/dist/{components/date-picker/types.d.ts → types/date-picker.d.ts}

@@ -1,4 +1,4 @@
-import { Dayjs } from "dayjs";
+import type { Dayjs } from "dayjs";
 /**
  * @description
  * date picker props

package/dist/{components/dialog/types.d.ts → types/dialog.d.ts}

@@ -1,7 +1,7 @@
 import type { CSSProperties, ReactNode } from "react";
-import type { Closable } from "../../hooks/use-closable";
+import type { Closable } from "../hooks/use-closable";
 import type { RequiredIn } from "@aiszlab/relax/types";
-import type { PortalProps } from "../portal/types";
+import type { PortalProps } from "./portal";
 import type { ComponentProps } from "musae/types/element";
 /**
  * @description