musae 0.5.2 → 0.5.3

package/dist/components/button/button.cjs

@@ -23,7 +23,7 @@ var styles = {
     gap: "musaex-4ttznp",
     rowGap: null,
     columnGap: null,
-    transitionProperty: "musaex-fagghw",
+    transitionProperty: "musaex-1yyhn7k",
     transitionDuration: "musaex-1d8287x",
     willChange: "musaex-19v51jg",
     borderWidth: "musaex-1628nlo",

package/dist/components/button/button.d.ts

@@ -6,7 +6,7 @@ declare const styles: Readonly<{
         readonly alignItems: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
         readonly justifyContent: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
         readonly gap: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"gap", string>;
-        readonly transitionProperty: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"transitionProperty", "all">;
+        readonly transitionProperty: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"transitionProperty", "background-color, color, box-shadow">;
         readonly transitionDuration: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"transitionDuration", "0.3s">;
         readonly willChange: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"willChange", "background-color, color, box-shadow">;
         readonly borderWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderWidth", string>;

package/dist/components/button/button.mjs

@@ -21,7 +21,7 @@ var styles = {
     gap: "musaex-4ttznp",
     rowGap: null,
     columnGap: null,
-    transitionProperty: "musaex-fagghw",
+    transitionProperty: "musaex-1yyhn7k",
     transitionDuration: "musaex-1d8287x",
     willChange: "musaex-19v51jg",
     borderWidth: "musaex-1628nlo",

package/dist/components/fab/context.cjs

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  overlay: "fab__overlay",
+  fab: "fab"
+};
+
+exports.CLASS_NAMES = CLASS_NAMES;

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

@@ -0,0 +1,8 @@
+/**
+ * @description
+ * class names
+ */
+export declare const CLASS_NAMES: {
+    overlay: string;
+    fab: string;
+};

package/dist/components/fab/context.mjs

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * class names
+ */
+var CLASS_NAMES = {
+  overlay: "fab__overlay",
+  fab: "fab"
+};
+
+export { CLASS_NAMES };

package/dist/components/fab/fab.cjs

@@ -1,41 +1,149 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var core = require('@dnd-kit/core');
-var floatable = require('./floatable.cjs');
-var modifiers = require('@dnd-kit/modifiers');
 var relax = require('@aiszlab/relax');
+var dom = require('@aiszlab/relax/dom');
 var useContainer = require('../../hooks/use-container.cjs');
+var portal = require('../portal/portal.cjs');
+var iconButton = require('../icon-button/icon-button.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var useClassNames_component = require('../../hooks/use-class-names.component.cjs');
+var context = require('./context.cjs');
 
+var styles = {
+  portal: {
+    overflow: "musaex-b3r6kr",
+    overflowX: null,
+    overflowY: null,
+    inset: "musaex-10a8y8t",
+    insetInline: null,
+    insetInlineStart: null,
+    insetInlineEnd: null,
+    left: null,
+    right: null,
+    insetBlock: null,
+    top: null,
+    bottom: null,
+    zIndex: "musaex-438vp",
+    $$css: true
+  },
+  fixed: {
+    position: "musaex-ixxii4",
+    $$css: true
+  },
+  disable: {
+    pointerEvents: "musaex-47corl",
+    $$css: true
+  },
+  button: function button(props) {
+    return [{
+      cursor: "musaex-1ypdohk",
+      right: null,
+      insetInlineStart: "musaex-14hirk2",
+      insetInlineEnd: "musaex-hzx67v",
+      bottom: "musaex-11gqvze",
+      pointerEvents: "musaex-67bb7w",
+      transform: "musaex-1v0jg1i",
+      left: null,
+      top: "musaex-1dhtdto",
+      ":not(#\\#)_position": "musaex-1lkkojn",
+      $$css: true
+    }, {
+      "--transform": "translateX(".concat(props.movementX, "px) translateY(").concat(props.movementY, "px)") != null ? "translateX(".concat(props.movementX, "px) translateY(").concat(props.movementY, "px)") : "initial",
+      "--insetInlineEnd": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.isDragged ? void 0 : tokens_stylex.spacing.xlarge),
+      "--insetBlockEnd": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.isDragged ? void 0 : tokens_stylex.spacing.xlarge),
+      "--insetInlineStart": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.isDragged ? props.insetInlineStart : void 0),
+      "--insetBlockStart": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.isDragged ? props.insetBlockStart : void 0)
+    }];
+  }
+};
 var Fab = function Fab(_ref) {
   var container = _ref.container,
     children = _ref.children,
-    onClick = _ref.onClick;
-  var _useIdentity = relax.useIdentity(),
-    _useIdentity2 = _slicedToArray(_useIdentity, 1),
-    id = _useIdentity2[0];
-  var floatableRef = React.useRef(null);
+    click = _ref.onClick;
+  var portalRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
   var _useContainer = useContainer.useContainer({
       container: container
     }),
     _container = _useContainer.container;
-  var modifier = relax.useEvent(function (args) {
-    var _floatableRef$current, _floatableRef$current2;
-    var clientRect = (_floatableRef$current = (_floatableRef$current2 = floatableRef.current) === null || _floatableRef$current2 === void 0 ? void 0 : _floatableRef$current2.getBoundingClientRect()) !== null && _floatableRef$current !== void 0 ? _floatableRef$current : null;
-    return modifiers.restrictToParentElement(_objectSpread(_objectSpread({}, args), {}, {
-      draggingNodeRect: clientRect
-    }));
+  var _useDrag = relax.useDrag(),
+    _useDrag2 = _slicedToArray(_useDrag, 2),
+    _useDrag2$ = _useDrag2[0],
+    isDragging = _useDrag2$.isDragging,
+    offsetX = _useDrag2$.offsetX,
+    offsetY = _useDrag2$.offsetY,
+    x = _useDrag2$.x,
+    y = _useDrag2$.y,
+    movementX = _useDrag2$.movementX,
+    movementY = _useDrag2$.movementY,
+    isDragged = _useDrag2$.isDragged,
+    _useDrag2$2 = _useDrag2[1],
+    dragEnd = _useDrag2$2.onDragEnd,
+    dragMove = _useDrag2$2.onDragMove,
+    dragStart = _useDrag2$2.onDragStart;
+  var classNames = useClassNames_component.useClassNames(context.CLASS_NAMES);
+  var isMoved = React.useRef(false);
+  var styled = {
+    portal: stylex.default.props(styles.fixed, styles.portal, !isDragging && styles.disable),
+    button: stylex.default.props(styles.button({
+      movementX: movementX,
+      movementY: movementY,
+      isDragged: isDragged,
+      insetInlineStart: x - offsetX,
+      insetBlockStart: y - offsetY
+    })),
+    icon: {
+      className: "musaex-47corl musaex-3nfvp2"
+    }
+  };
+  var onDragStart = React.useCallback(function (event) {
+    if (!dom.contains(buttonRef.current, event.target)) return;
+    event.stopPropagation();
+    dragStart(event);
+  }, [dragStart]);
+  var onClick = relax.useEvent(function (event) {
+    if (isMoved.current) return;
+    click === null || click === void 0 || click(event);
+  });
+  var onDragMove = React.useCallback(function (event) {
+    isMoved.current = true;
+    event.stopPropagation();
+    dragMove(event);
+  }, [dragMove]);
+  var onDragEnd = relax.useRaf(function (event) {
+    dragEnd(event);
+    isMoved.current = false;
   });
-  return /*#__PURE__*/React.createElement(core.DndContext, {
-    id: id,
-    modifiers: [modifier]
-  }, /*#__PURE__*/React.createElement(floatable.default, {
-    ref: floatableRef,
-    container: _container,
-    onClick: onClick
-  }, children));
+  return /*#__PURE__*/React.createElement(portal.default, {
+    container: _container
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: portalRef,
+    onMouseDown: onDragStart,
+    onMouseMove: isDragging ? onDragMove : void 0,
+    onMouseUp: onDragEnd,
+    className: relax.clsx(classNames.overlay, styled.portal.className),
+    style: styled.portal.style
+  }, /*#__PURE__*/React.createElement(iconButton.default, {
+    ref: buttonRef,
+    onClick: onClick,
+    className: relax.clsx(classNames.fab, styled.button.className),
+    style: styled.button.style,
+    ripple: false
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styled.icon.className,
+    style: styled.icon.style
+  }, children))));
 };
 
 exports.default = Fab;

package/dist/components/fab/fab.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { FabProps } from "musae/types/fab";
-declare const Fab: ({ container, children, onClick }: FabProps) => React.JSX.Element;
+declare const Fab: ({ container, children, onClick: click }: FabProps) => React.JSX.Element;
 export default Fab;

package/dist/components/fab/fab.mjs

@@ -1,39 +1,147 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useRef } from 'react';
-import { DndContext } from '@dnd-kit/core';
-import Floatable from './floatable.mjs';
-import { restrictToParentElement } from '@dnd-kit/modifiers';
-import { useIdentity, useEvent } from '@aiszlab/relax';
+import React, { useRef, useCallback } from 'react';
+import { useDrag, useEvent, useRaf, clsx } from '@aiszlab/relax';
+import { contains } from '@aiszlab/relax/dom';
 import { useContainer } from '../../hooks/use-container.mjs';
+import Portal from '../portal/portal.mjs';
+import IconButton from '../icon-button/icon-button.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { spacing } from '../theme/tokens.stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.component.mjs';
+import { CLASS_NAMES } from './context.mjs';
 
+var styles = {
+  portal: {
+    overflow: "musaex-b3r6kr",
+    overflowX: null,
+    overflowY: null,
+    inset: "musaex-10a8y8t",
+    insetInline: null,
+    insetInlineStart: null,
+    insetInlineEnd: null,
+    left: null,
+    right: null,
+    insetBlock: null,
+    top: null,
+    bottom: null,
+    zIndex: "musaex-438vp",
+    $$css: true
+  },
+  fixed: {
+    position: "musaex-ixxii4",
+    $$css: true
+  },
+  disable: {
+    pointerEvents: "musaex-47corl",
+    $$css: true
+  },
+  button: function button(props) {
+    return [{
+      cursor: "musaex-1ypdohk",
+      right: null,
+      insetInlineStart: "musaex-14hirk2",
+      insetInlineEnd: "musaex-hzx67v",
+      bottom: "musaex-11gqvze",
+      pointerEvents: "musaex-67bb7w",
+      transform: "musaex-1v0jg1i",
+      left: null,
+      top: "musaex-1dhtdto",
+      ":not(#\\#)_position": "musaex-1lkkojn",
+      $$css: true
+    }, {
+      "--transform": "translateX(".concat(props.movementX, "px) translateY(").concat(props.movementY, "px)") != null ? "translateX(".concat(props.movementX, "px) translateY(").concat(props.movementY, "px)") : "initial",
+      "--insetInlineEnd": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.isDragged ? void 0 : spacing.xlarge),
+      "--insetBlockEnd": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.isDragged ? void 0 : spacing.xlarge),
+      "--insetInlineStart": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.isDragged ? props.insetInlineStart : void 0),
+      "--insetBlockStart": function (val) {
+        return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+      }(props.isDragged ? props.insetBlockStart : void 0)
+    }];
+  }
+};
 var Fab = function Fab(_ref) {
   var container = _ref.container,
     children = _ref.children,
-    onClick = _ref.onClick;
-  var _useIdentity = useIdentity(),
-    _useIdentity2 = _slicedToArray(_useIdentity, 1),
-    id = _useIdentity2[0];
-  var floatableRef = useRef(null);
+    click = _ref.onClick;
+  var portalRef = useRef(null);
+  var buttonRef = useRef(null);
   var _useContainer = useContainer({
       container: container
     }),
     _container = _useContainer.container;
-  var modifier = useEvent(function (args) {
-    var _floatableRef$current, _floatableRef$current2;
-    var clientRect = (_floatableRef$current = (_floatableRef$current2 = floatableRef.current) === null || _floatableRef$current2 === void 0 ? void 0 : _floatableRef$current2.getBoundingClientRect()) !== null && _floatableRef$current !== void 0 ? _floatableRef$current : null;
-    return restrictToParentElement(_objectSpread(_objectSpread({}, args), {}, {
-      draggingNodeRect: clientRect
-    }));
+  var _useDrag = useDrag(),
+    _useDrag2 = _slicedToArray(_useDrag, 2),
+    _useDrag2$ = _useDrag2[0],
+    isDragging = _useDrag2$.isDragging,
+    offsetX = _useDrag2$.offsetX,
+    offsetY = _useDrag2$.offsetY,
+    x = _useDrag2$.x,
+    y = _useDrag2$.y,
+    movementX = _useDrag2$.movementX,
+    movementY = _useDrag2$.movementY,
+    isDragged = _useDrag2$.isDragged,
+    _useDrag2$2 = _useDrag2[1],
+    dragEnd = _useDrag2$2.onDragEnd,
+    dragMove = _useDrag2$2.onDragMove,
+    dragStart = _useDrag2$2.onDragStart;
+  var classNames = useClassNames(CLASS_NAMES);
+  var isMoved = useRef(false);
+  var styled = {
+    portal: _stylex.props(styles.fixed, styles.portal, !isDragging && styles.disable),
+    button: _stylex.props(styles.button({
+      movementX: movementX,
+      movementY: movementY,
+      isDragged: isDragged,
+      insetInlineStart: x - offsetX,
+      insetBlockStart: y - offsetY
+    })),
+    icon: {
+      className: "musaex-47corl musaex-3nfvp2"
+    }
+  };
+  var onDragStart = useCallback(function (event) {
+    if (!contains(buttonRef.current, event.target)) return;
+    event.stopPropagation();
+    dragStart(event);
+  }, [dragStart]);
+  var onClick = useEvent(function (event) {
+    if (isMoved.current) return;
+    click === null || click === void 0 || click(event);
+  });
+  var onDragMove = useCallback(function (event) {
+    isMoved.current = true;
+    event.stopPropagation();
+    dragMove(event);
+  }, [dragMove]);
+  var onDragEnd = useRaf(function (event) {
+    dragEnd(event);
+    isMoved.current = false;
   });
-  return /*#__PURE__*/React.createElement(DndContext, {
-    id: id,
-    modifiers: [modifier]
-  }, /*#__PURE__*/React.createElement(Floatable, {
-    ref: floatableRef,
-    container: _container,
-    onClick: onClick
-  }, children));
+  return /*#__PURE__*/React.createElement(Portal, {
+    container: _container
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: portalRef,
+    onMouseDown: onDragStart,
+    onMouseMove: isDragging ? onDragMove : void 0,
+    onMouseUp: onDragEnd,
+    className: clsx(classNames.overlay, styled.portal.className),
+    style: styled.portal.style
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    ref: buttonRef,
+    onClick: onClick,
+    className: clsx(classNames.fab, styled.button.className),
+    style: styled.button.style,
+    ripple: false
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styled.icon.className,
+    style: styled.icon.style
+  }, children))));
 };
 
 export { Fab as default };

package/dist/components/icon/icons/home/index.d.ts

@@ -0,0 +1,6 @@
+import WindPower from "./wind-power";
+declare const _: {
+    WindPower: (props: Omit<import("../../../../types/icon").IconProps, "as">) => import("react").FunctionComponentElement<import("../../../../types/icon").IconProps>;
+};
+export default _;
+export { WindPower };

package/dist/components/icon/icons/home/wind-power.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hoc = require('../../hoc.cjs');
+
+var WindPower = hoc.withIcon(function (_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.2501 2.75H4.25012V4.75H10.2501V2.75Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.25012 6.75H1.25012V8.75H6.25012V6.75Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8.25012 18.75H3.25012V20.75H8.25012V18.75Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M22.4601 18.36L20.1801 14.26C19.9101 13.78 19.4501 13.43 18.9201 13.29L16.2301 12.62C16.2101 12.15 16.0901 11.7 15.8601 11.29L19.8201 4.7C20.4701 3.62 20.1201 2.22 19.0401 1.57C18.6801 1.35 18.2701 1.25 17.8701 1.25C17.3101 1.25 16.7501 1.46 16.3101 1.87L12.8801 5.08C12.4801 5.45 12.2501 5.98 12.2501 6.53V9.93C11.7801 10.1 11.3601 10.38 11.0201 10.75H3.53012C2.27012 10.75 1.25012 11.77 1.25012 13.03C1.25012 14.05 1.92012 14.94 2.90012 15.22L7.41012 16.51C7.59012 16.56 7.78012 16.59 7.96012 16.59C8.32012 16.59 8.68012 16.49 8.99012 16.3L11.2301 14.96C11.5201 15.22 11.8601 15.43 12.2501 15.57V20.75C11.1501 20.75 10.2501 21.65 10.2501 22.75H16.2501C16.2501 21.65 15.3501 20.75 14.2501 20.75V16.47L18.8601 21.08C19.3101 21.53 19.8901 21.75 20.4701 21.75C21.0501 21.75 21.6401 21.53 22.0801 21.08C22.8001 20.36 22.9601 19.25 22.4601 18.36ZM7.97012 14.59L3.45012 13.3C3.33012 13.27 3.25012 13.15 3.25012 13.03C3.25012 12.88 3.38012 12.75 3.53012 12.75H10.2601C10.2601 12.9 10.2701 13.05 10.2901 13.19L7.97012 14.59ZM13.2501 13.75C12.7001 13.75 12.2501 13.3 12.2501 12.75C12.2501 12.2 12.7001 11.75 13.2501 11.75C13.8001 11.75 14.2501 12.2 14.2501 12.75C14.2501 13.3 13.8001 13.75 13.2501 13.75ZM14.2501 9.89V6.53L17.6801 3.32C17.7301 3.27 17.8701 3.2 18.0201 3.28C18.1501 3.36 18.2001 3.53 18.1201 3.66L14.3801 9.9L14.2501 9.89ZM20.6701 19.67C20.6201 19.72 20.4301 19.83 20.2701 19.67L15.4201 14.82C15.5001 14.73 15.5801 14.64 15.6601 14.54L18.4401 15.23L20.7201 19.33C20.7801 19.44 20.7601 19.58 20.6701 19.67Z",
+    fill: "currentColor"
+  }));
+});
+
+exports.default = WindPower;

package/dist/components/icon/icons/home/wind-power.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const WindPower: (props: Omit<import("../../../../types/icon").IconProps, "as">) => React.FunctionComponentElement<import("../../../../types/icon").IconProps>;
+export default WindPower;

package/dist/components/icon/icons/home/wind-power.mjs

@@ -0,0 +1,27 @@
+import React from 'react';
+import { withIcon } from '../../hoc.mjs';
+
+var WindPower = withIcon(function (_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.2501 2.75H4.25012V4.75H10.2501V2.75Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.25012 6.75H1.25012V8.75H6.25012V6.75Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8.25012 18.75H3.25012V20.75H8.25012V18.75Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M22.4601 18.36L20.1801 14.26C19.9101 13.78 19.4501 13.43 18.9201 13.29L16.2301 12.62C16.2101 12.15 16.0901 11.7 15.8601 11.29L19.8201 4.7C20.4701 3.62 20.1201 2.22 19.0401 1.57C18.6801 1.35 18.2701 1.25 17.8701 1.25C17.3101 1.25 16.7501 1.46 16.3101 1.87L12.8801 5.08C12.4801 5.45 12.2501 5.98 12.2501 6.53V9.93C11.7801 10.1 11.3601 10.38 11.0201 10.75H3.53012C2.27012 10.75 1.25012 11.77 1.25012 13.03C1.25012 14.05 1.92012 14.94 2.90012 15.22L7.41012 16.51C7.59012 16.56 7.78012 16.59 7.96012 16.59C8.32012 16.59 8.68012 16.49 8.99012 16.3L11.2301 14.96C11.5201 15.22 11.8601 15.43 12.2501 15.57V20.75C11.1501 20.75 10.2501 21.65 10.2501 22.75H16.2501C16.2501 21.65 15.3501 20.75 14.2501 20.75V16.47L18.8601 21.08C19.3101 21.53 19.8901 21.75 20.4701 21.75C21.0501 21.75 21.6401 21.53 22.0801 21.08C22.8001 20.36 22.9601 19.25 22.4601 18.36ZM7.97012 14.59L3.45012 13.3C3.33012 13.27 3.25012 13.15 3.25012 13.03C3.25012 12.88 3.38012 12.75 3.53012 12.75H10.2601C10.2601 12.9 10.2701 13.05 10.2901 13.19L7.97012 14.59ZM13.2501 13.75C12.7001 13.75 12.2501 13.3 12.2501 12.75C12.2501 12.2 12.7001 11.75 13.2501 11.75C13.8001 11.75 14.2501 12.2 14.2501 12.75C14.2501 13.3 13.8001 13.75 13.2501 13.75ZM14.2501 9.89V6.53L17.6801 3.32C17.7301 3.27 17.8701 3.2 18.0201 3.28C18.1501 3.36 18.2001 3.53 18.1201 3.66L14.3801 9.9L14.2501 9.89ZM20.6701 19.67C20.6201 19.72 20.4301 19.83 20.2701 19.67L15.4201 14.82C15.5001 14.73 15.5801 14.64 15.6601 14.54L18.4401 15.23L20.7201 19.33C20.7801 19.44 20.7601 19.58 20.6701 19.67Z",
+    fill: "currentColor"
+  }));
+});
+
+export { WindPower as default };

package/dist/components/icon/icons/index.cjs

@@ -63,6 +63,7 @@ var checklist = require('./editor/checklist.cjs');
 var attchFile = require('./editor/attch-file.cjs');
 var github = require('./mock/github.cjs');
 var loading = require('./mock/loading.cjs');
+var windPower = require('./home/wind-power.cjs');
 
 
 
@@ -131,3 +132,4 @@ exports.Checklist = checklist.default;
 exports.AttachFile = attchFile.default;
 exports.Github = github.default;
 exports.Loading = loading.default;
+exports.WindPower = windPower.default;

package/dist/components/icon/icons/index.d.ts

@@ -7,3 +7,4 @@ export * from "./image";
 export * from "./toggle";
 export * from "./editor";
 export * from "./mock";
+export * from "./home";

package/dist/components/icon/icons/index.mjs

@@ -63,3 +63,4 @@ export { default as Checklist } from './editor/checklist.mjs';
 export { default as AttachFile } from './editor/attch-file.mjs';
 export { default as Github } from './mock/github.mjs';
 export { default as Loading } from './mock/loading.mjs';
+export { default as WindPower } from './home/wind-power.mjs';

package/dist/components/notification/notification.cjs

@@ -50,7 +50,7 @@ var styles = {
         borderBottomRightRadius: null,
         boxShadow: "musaex-sgc7hx",
         maxWidth: "musaex-77asx0",
-        pointerEvents: "musaex-71s49j",
+        pointerEvents: "musaex-67bb7w",
         overflow: "musaex-b3r6kr",
         overflowX: null,
         overflowY: null,

package/dist/components/notification/notification.mjs

@@ -48,7 +48,7 @@ var styles = {
         borderBottomRightRadius: null,
         boxShadow: "musaex-sgc7hx",
         maxWidth: "musaex-77asx0",
-        pointerEvents: "musaex-71s49j",
+        pointerEvents: "musaex-67bb7w",
         overflow: "musaex-b3r6kr",
         overflowX: null,
         overflowY: null,

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

@@ -221,13 +221,13 @@ var RichTextEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     h5: stylex.default.props(theme.typography.headline.medium),
     h6: stylex.default.props(theme.typography.headline.small),
     code: {
-      className: "musaex-1x8l0va musaex-16c42yj musaex-11ayw28 musaex-1lliihq musaex-ysyzu8"
+      className: "musaex-an1lw2 musaex-1lliihq musaex-ysyzu8 musaex-1fioaya musaex-4bkepr musaex-nd81q0 musaex-7jmdrq"
     },
     inlineCode: {
-      className: "musaex-16c42yj musaex-1x8l0va musaex-11ayw28"
+      className: "musaex-an1lw2 musaex-11ayw28 musaex-pne1ww musaex-1fpq7td musaex-1sq4p16"
     },
     link: {
-      className: "musaex-1qlt0p8 musaex-1ed109x musaex-1hl2dhg musaex-t0b8zv"
+      className: "musaex-zwifym musaex-1ypdohk musaex-1hl2dhg musaex-t0b8zv"
     },
     checkbox: stylex.default.props(styles$1.default.input["default"], styles.checkbox),
     list: {

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

@@ -219,13 +219,13 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     h5: _stylex.props(typography.headline.medium),
     h6: _stylex.props(typography.headline.small),
     code: {
-      className: "musaex-1x8l0va musaex-16c42yj musaex-11ayw28 musaex-1lliihq musaex-ysyzu8"
+      className: "musaex-an1lw2 musaex-1lliihq musaex-ysyzu8 musaex-1fioaya musaex-4bkepr musaex-nd81q0 musaex-7jmdrq"
     },
     inlineCode: {
-      className: "musaex-16c42yj musaex-1x8l0va musaex-11ayw28"
+      className: "musaex-an1lw2 musaex-11ayw28 musaex-pne1ww musaex-1fpq7td musaex-1sq4p16"
     },
     link: {
-      className: "musaex-1qlt0p8 musaex-1ed109x musaex-1hl2dhg musaex-t0b8zv"
+      className: "musaex-zwifym musaex-1ypdohk musaex-1hl2dhg musaex-t0b8zv"
     },
     checkbox: _stylex.props(styles$1.input["default"], styles.checkbox),
     list: {

package/dist/components/theme/hooks.cjs

@@ -195,7 +195,7 @@ var useSwitchable = function useSwitchable(_ref) {
       var radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
       var clipPath = ["circle(0px at ".concat(x, "px ").concat(y, "px)"), "circle(".concat(radius, "px at ").concat(x, "px ").concat(y, "px)")];
       document.documentElement.animate({
-        clipPath: isDark ? [].concat(clipPath).reverse() : clipPath
+        clipPath: isDark ? clipPath.reverse() : clipPath
       }, {
         duration: 300,
         easing: "ease-in",

package/dist/components/theme/hooks.mjs

@@ -195,7 +195,7 @@ var useSwitchable = function useSwitchable(_ref) {
       var radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
       var clipPath = ["circle(0px at ".concat(x, "px ").concat(y, "px)"), "circle(".concat(radius, "px at ").concat(x, "px ").concat(y, "px)")];
       document.documentElement.animate({
-        clipPath: isDark ? [].concat(clipPath).reverse() : clipPath
+        clipPath: isDark ? clipPath.reverse() : clipPath
       }, {
         duration: 300,
         easing: "ease-in",

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

@@ -80,7 +80,7 @@ export declare const positions: import("@stylexjs/stylex").VarGroup<Readonly<{
     min: string;
     header: string;
     popper: string;
-    floatable: string;
+    fab: string;
     dialog: string;
     drawer: string;
     tour: string;

package/dist/components/visually-hidden/visually-hidden.cjs

@@ -9,7 +9,7 @@ var VisuallyHidden = function VisuallyHidden(_ref) {
   var children = _ref.children,
     dangerouslySetInnerHTML = _ref.dangerouslySetInnerHTML;
   var styled = {
-    className: "musaex-1k7lhcj musaex-18eqiv3 musaex-9qdtsz musaex-10l6tqk musaex-zpqnlu"
+    className: "musaex-1k7lhcj musaex-18eqiv3 musaex-9qdtsz musaex-10l6tqk musaex-zpqnlu musaex-b3r6kr"
   };
   var classNames = useClassNames_component.useClassNames(context.CLASS_NAMES);
   return /*#__PURE__*/React.createElement("div", {

package/dist/components/visually-hidden/visually-hidden.mjs

@@ -7,7 +7,7 @@ var VisuallyHidden = function VisuallyHidden(_ref) {
   var children = _ref.children,
     dangerouslySetInnerHTML = _ref.dangerouslySetInnerHTML;
   var styled = {
-    className: "musaex-1k7lhcj musaex-18eqiv3 musaex-9qdtsz musaex-10l6tqk musaex-zpqnlu"
+    className: "musaex-1k7lhcj musaex-18eqiv3 musaex-9qdtsz musaex-10l6tqk musaex-zpqnlu musaex-b3r6kr"
   };
   var classNames = useClassNames(CLASS_NAMES);
   return /*#__PURE__*/React.createElement("div", {

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

@@ -257,9 +257,6 @@ export declare const useClassNames: <T extends keyof ClassNames>(token: T) => {
         1: string;
         2: string;
     };
-    fab: {
-        0: string;
-    };
     textarea: {
         0: string;
         1: string;

package/dist/styles.css

@@ -4,7 +4,7 @@
     --musaex-1vh8wei: 1;
     --musaex-11upij1: 50;
     --musaex-oqacdq: 60;
-    --musaex-if0yew: 990;
+    --musaex-1wsab3m: 990;
     --musaex-9gpkaf: 1080;
     --musaex-80rspi: 1080;
     --musaex-ah5ngi: 1080;
@@ -607,6 +607,10 @@
     margin-block: var(--musaex-h30iw9);
   }
 
+  .musaex-7jmdrq {
+    margin-block: var(--musaex-qk2ac7);
+  }
+
   .musaex-1sq4p16 {
     margin-inline: var(--musaex-1h5s2h0);
   }
@@ -849,14 +853,14 @@
     background-color: var(--cell-color);
   }
 
-  .musaex-1x8l0va {
-    background-color: var(--code-background-color);
-  }
-
   .musaex-1jfbxs4 {
     background-color: var(--shadow);
   }
 
+  .musaex-an1lw2 {
+    background-color: var(--surface-container-highest);
+  }
+
   .musaex-uomep {
     background-image: linear-gradient(90deg, var(--shadow) 25%, var(--lighter-shadow) 37%, var(--shadow) 63%);
   }
@@ -917,8 +921,8 @@
     color: var(--color, revert);
   }
 
-  .musaex-1qlt0p8 {
-    color: var(--primary-color);
+  .musaex-zwifym {
+    color: var(--primary);
   }
 
   .musaex-4rvf3u {
@@ -1101,6 +1105,10 @@
     inset-inline-end: 0;
   }
 
+  .musaex-hzx67v {
+    inset-inline-end: var(--insetInlineEnd, revert);
+  }
+
   .musaex-1o0tod {
     inset-inline-start: 0;
   }
@@ -1109,6 +1117,10 @@
     inset-inline-start: calc(100% - var(--musaex-rlgvtq)  - var(--musaex-xvo8wr));
   }
 
+  .musaex-14hirk2 {
+    inset-inline-start: var(--insetInlineStart, revert);
+  }
+
   .musaex-1nisehl {
     inset-inline-start: var(--musaex-1h5s2h0);
   }
@@ -1325,10 +1337,6 @@
     padding-inline-start: var(--musaex-1ncxh3n);
   }
 
-  .musaex-71s49j {
-    pointer-events: all;
-  }
-
   .musaex-67bb7w {
     pointer-events: auto;
   }
@@ -1469,6 +1477,10 @@
     transition-property: background-color, border, color;
   }
 
+  .musaex-1yyhn7k {
+    transition-property: background-color, color, box-shadow;
+  }
+
   .musaex-kdsq27 {
     transition-property: box-shadow;
   }
@@ -1566,6 +1578,10 @@
     z-index: var(--musaex-1vh8wei);
   }
 
+  .musaex-438vp {
+    z-index: var(--musaex-1wsab3m);
+  }
+
   .musaex-yzdold {
     z-index: var(--musaex-7fr0d6);
   }
@@ -1586,10 +1602,6 @@
     z-index: var(--musaex-dlxqgz);
   }
 
-  .musaex-n0d15w {
-    z-index: var(--musaex-if0yew);
-  }
-
   .musaex-1jhhwlq {
     z-index: var(--musaex-oqacdq);
   }
@@ -1650,7 +1662,7 @@
     opacity: var(--musaex-1itczwt);
   }
 
-  .musaex-1l7jasa:not([aria-checked="false"]):after, .musaex-no41pc:not(:last-of-type):after, .musaex-1lkkojn:not(#\#) {
+  .musaex-1l7jasa:not([aria-checked="false"]):after, .musaex-1lkkojn:not(#\#), .musaex-no41pc:not(:last-of-type):after {
     position: absolute;
   }
 
@@ -1748,8 +1760,8 @@
     bottom: 0;
   }
 
-  .musaex-jnlgov {
-    bottom: 20px;
+  .musaex-11gqvze {
+    bottom: var(--insetBlockEnd, revert);
   }
 
   .musaex-vw9jmq {
@@ -2048,10 +2060,6 @@
     right: 0;
   }
 
-  .musaex-k6ci0l {
-    right: 20px;
-  }
-
   .musaex-13vifvy {
     top: 0;
   }
@@ -2064,6 +2072,10 @@
     top: calc(var(--musaex-xrqq76)  + var(--musaex-15cw4i4));
   }
 
+  .musaex-1dhtdto {
+    top: var(--insetBlockStart, revert);
+  }
+
   .musaex-1sporqg {
     top: var(--musaex-xvo8wr);
   }

package/dist/utils/class-name.cjs

@@ -328,10 +328,6 @@ exports.UploadClassToken = void 0;
   UploadClassToken[UploadClassToken["UploadedItem"] = 2] = "UploadedItem";
   UploadClassToken[UploadClassToken["UploadedPictureItem"] = 3] = "UploadedPictureItem";
 })(exports.UploadClassToken || (exports.UploadClassToken = {}));
-exports.FabClassToken = void 0;
-(function (FabClassToken) {
-  FabClassToken[FabClassToken["Fab"] = 0] = "Fab";
-})(exports.FabClassToken || (exports.FabClassToken = {}));
 exports.TextareaClassToken = void 0;
 (function (TextareaClassToken) {
   TextareaClassToken[TextareaClassToken["Textarea"] = 0] = "Textarea";
@@ -398,7 +394,6 @@ var CLASS_NAMES = {
   upload: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, exports.UploadClassToken.Upload, "upload"), exports.UploadClassToken.UploadedList, "upload__uploaded-list"), exports.UploadClassToken.UploadedItem, "upload__uploaded-item"), exports.UploadClassToken.UploadedPictureItem, "upload__uploaded-item--picture"),
   image: _defineProperty({}, exports.ImageClassToken.Image, "image"),
   table: _defineProperty(_defineProperty(_defineProperty({}, exports.TableClassToken.Table, "table"), exports.TableClassToken.Header, "table__header"), exports.TableClassToken.Body, "table__body"),
-  fab: _defineProperty({}, exports.FabClassToken.Fab, "fab"),
   textarea: _defineProperty(_defineProperty({}, exports.TextareaClassToken.Textarea, "textarea"), exports.TextareaClassToken.Input, "textarea__input"),
   guideline: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, exports.GuidelineClassToken.Guideline, "guideline"), exports.GuidelineClassToken.Figure, "guideline__figure"), exports.GuidelineClassToken.CaptionLabel, "guideline__caption-label"), exports.GuidelineClassToken.Caption, "guideline__caption")
 };

package/dist/utils/class-name.d.ts

@@ -268,9 +268,6 @@ export declare enum UploadClassToken {
     UploadedItem = 2,
     UploadedPictureItem = 3
 }
-export declare enum FabClassToken {
-    Fab = 0
-}
 export declare enum TextareaClassToken {
     Textarea = 0,
     Input = 1
@@ -542,9 +539,6 @@ export declare const CLASS_NAMES: {
         1: string;
         2: string;
     };
-    fab: {
-        0: string;
-    };
     textarea: {
         0: string;
         1: string;
@@ -819,9 +813,6 @@ export declare const DEFAULT_CLASS_NAMES: {
         1: string;
         2: string;
     };
-    fab: {
-        0: string;
-    };
     textarea: {
         0: string;
         1: string;

package/dist/utils/class-name.mjs

@@ -328,10 +328,6 @@ var UploadClassToken;
   UploadClassToken[UploadClassToken["UploadedItem"] = 2] = "UploadedItem";
   UploadClassToken[UploadClassToken["UploadedPictureItem"] = 3] = "UploadedPictureItem";
 })(UploadClassToken || (UploadClassToken = {}));
-var FabClassToken;
-(function (FabClassToken) {
-  FabClassToken[FabClassToken["Fab"] = 0] = "Fab";
-})(FabClassToken || (FabClassToken = {}));
 var TextareaClassToken;
 (function (TextareaClassToken) {
   TextareaClassToken[TextareaClassToken["Textarea"] = 0] = "Textarea";
@@ -398,7 +394,6 @@ var CLASS_NAMES = {
   upload: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, UploadClassToken.Upload, "upload"), UploadClassToken.UploadedList, "upload__uploaded-list"), UploadClassToken.UploadedItem, "upload__uploaded-item"), UploadClassToken.UploadedPictureItem, "upload__uploaded-item--picture"),
   image: _defineProperty({}, ImageClassToken.Image, "image"),
   table: _defineProperty(_defineProperty(_defineProperty({}, TableClassToken.Table, "table"), TableClassToken.Header, "table__header"), TableClassToken.Body, "table__body"),
-  fab: _defineProperty({}, FabClassToken.Fab, "fab"),
   textarea: _defineProperty(_defineProperty({}, TextareaClassToken.Textarea, "textarea"), TextareaClassToken.Input, "textarea__input"),
   guideline: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, GuidelineClassToken.Guideline, "guideline"), GuidelineClassToken.Figure, "guideline__figure"), GuidelineClassToken.CaptionLabel, "guideline__caption-label"), GuidelineClassToken.Caption, "guideline__caption")
 };
@@ -425,4 +420,4 @@ var addPrefix = function addPrefix(classNames, prefix) {
  */
 var DEFAULT_CLASS_NAMES = addPrefix(CLASS_NAMES, Token.Prefix);
 
-export { AvatarClassToken, BadgeClassToken, BreadcrumbClassToken, CLASS_NAMES, CalendarClassToken, CascaderClassToken, ClockClassToken, CollapseClassToken, DEFAULT_CLASS_NAMES, DatePickerClassToken, DateRangePickerClassToken, DialogClassToken, DividerClassToken, DrawerClassToken, EmptyClassToken, FabClassToken, FormClassToken, GridClassToken, GuidelineClassToken, HighlightClassToken, I18nButtonClassToken, IconClassToken, ImageClassToken, InputClassToken, LoadingClassToken, MenuClassToken, NotificationClassToken, PaginationClassToken, PickerClassToken, PopconfirmClassToken, PopoverClassToken, PopperClassToken, ProgressClassToken, QuoteClassToken, RadioClassToken, RateClassToken, RichTextEditorClassToken, SelectClassToken, StepsClassToken, SwitchClassToken, TableClassToken, TabsClassToken, TagClassToken, TextareaClassToken, TimePickerClassToken, TimelineClassToken, TooltipClassToken, TransferClassToken, TreeClassToken, UploadClassToken, VisuallyHiddenClassToken, WaterfallClassToken, addPrefix, withPrefix };
+export { AvatarClassToken, BadgeClassToken, BreadcrumbClassToken, CLASS_NAMES, CalendarClassToken, CascaderClassToken, ClockClassToken, CollapseClassToken, DEFAULT_CLASS_NAMES, DatePickerClassToken, DateRangePickerClassToken, DialogClassToken, DividerClassToken, DrawerClassToken, EmptyClassToken, FormClassToken, GridClassToken, GuidelineClassToken, HighlightClassToken, I18nButtonClassToken, IconClassToken, ImageClassToken, InputClassToken, LoadingClassToken, MenuClassToken, NotificationClassToken, PaginationClassToken, PickerClassToken, PopconfirmClassToken, PopoverClassToken, PopperClassToken, ProgressClassToken, QuoteClassToken, RadioClassToken, RateClassToken, RichTextEditorClassToken, SelectClassToken, StepsClassToken, SwitchClassToken, TableClassToken, TabsClassToken, TagClassToken, TextareaClassToken, TimePickerClassToken, TimelineClassToken, TooltipClassToken, TransferClassToken, TreeClassToken, UploadClassToken, VisuallyHiddenClassToken, WaterfallClassToken, addPrefix, withPrefix };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -53,11 +53,9 @@
     "pnpm": ">=9"
   },
   "dependencies": {
-    "@aiszlab/fuzzy": "^1.5.2",
-    "@aiszlab/relax": "^1.5.2",
-    "@babel/runtime": "^7.25.9",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^7.0.0",
+    "@aiszlab/fuzzy": "^1.5.3",
+    "@aiszlab/relax": "^1.5.3",
+    "@babel/runtime": "^7.26.0",
     "@emotion/is-prop-valid": "^1.3.1",
     "@floating-ui/dom": "^1.6.11",
     "@lexical/code": "^0.18.0",
@@ -70,18 +68,18 @@
     "@lexical/utils": "^0.18.0",
     "@tanstack/react-table": "^8.20.5",
     "dayjs": "^1.11.13",
-    "framer-motion": "^11.11.9",
+    "framer-motion": "^11.11.10",
     "lexical": "^0.18.0",
     "react-hook-form": "^7.53.1",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@aiszlab/jarvis": "^1.0.2",
-    "@babel/core": "^7.25.9",
+    "@babel/core": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.25.9",
-    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
-    "@babel/preset-typescript": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
@@ -93,7 +91,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.7.9",
+    "@types/node": "^22.8.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "babel-jest": "^29.7.0",
@@ -104,7 +102,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.24.0",
+    "rollup": "^4.24.1",
     "typescript": "^5.6.3",
     "zx": "^8.1.9"
   },

package/dist/components/fab/floatable.cjs

@@ -1,106 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var relax = require('@aiszlab/relax');
-var core = require('@dnd-kit/core');
-var React = require('react');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var portal = require('../portal/portal.cjs');
-var useContainer = require('../../hooks/use-container.cjs');
-var useClassNames = require('../../hooks/use-class-names.cjs');
-var className = require('../../utils/class-name.cjs');
-var iconButton = require('../icon-button/icon-button.cjs');
-
-var styles = {
-  floatable: function floatable(props) {
-    return [{
-      position: "musaex-10l6tqk",
-      transform: "musaex-1v0jg1i",
-      willChange: "musaex-1so62im",
-      right: "musaex-k6ci0l",
-      insetInlineStart: null,
-      insetInlineEnd: null,
-      bottom: "musaex-jnlgov",
-      zIndex: "musaex-n0d15w",
-      $$css: true
-    }, {
-      "--transform": "translate3d(".concat(props.x, "px, ").concat(props.y, "px, 0)") != null ? "translate3d(".concat(props.x, "px, ").concat(props.y, "px, 0)") : "initial"
-    }];
-  },
-  fixed: {
-    position: "musaex-ixxii4",
-    $$css: true
-  }
-};
-var Floatable = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var _transform$x, _transform$y;
-  var container = _ref2.container,
-    children = _ref2.children,
-    onClick = _ref2.onClick;
-  var classNames = useClassNames.useClassNames("fab");
-  var _useIdentity = relax.useIdentity(),
-    _useIdentity2 = _slicedToArray(_useIdentity, 1),
-    id = _useIdentity2[0];
-  var _ref = React.useRef(null);
-  var _useDraggable = core.useDraggable({
-      id: id
-    }),
-    attributes = _useDraggable.attributes,
-    listeners = _useDraggable.listeners,
-    setNodeRef = _useDraggable.setNodeRef,
-    transform = _useDraggable.transform;
-  var floatableRef = relax.useComposedRef(_ref, setNodeRef);
-  var _useContainer = useContainer.useContainer({
-      container: container
-    }),
-    _container = _useContainer.container,
-    isDocumentBody = _useContainer.isDocumentBody;
-  var _useState = React.useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    offsetX = _useState2[0],
-    setOffsetX = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    offsetY = _useState4[0],
-    setOffsetY = _useState4[1];
-  var _useState5 = React.useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    clientRect = _useState6[0],
-    setClientRect = _useState6[1];
-  core.useDndMonitor({
-    onDragEnd: function onDragEnd(event) {
-      var _ref$current;
-      setOffsetX(function (_offsetX) {
-        return _offsetX + event.delta.x;
-      });
-      setOffsetY(function (_offsetY) {
-        return _offsetY + event.delta.y;
-      });
-      setClientRect((_ref$current = _ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
-    }
-  });
-  React.useImperativeHandle(ref, function () {
-    return {
-      getBoundingClientRect: function getBoundingClientRect() {
-        return clientRect;
-      }
-    };
-  });
-  var styled = stylex.default.props(styles.floatable({
-    x: offsetX + ((_transform$x = transform === null || transform === void 0 ? void 0 : transform.x) !== null && _transform$x !== void 0 ? _transform$x : 0),
-    y: offsetY + ((_transform$y = transform === null || transform === void 0 ? void 0 : transform.y) !== null && _transform$y !== void 0 ? _transform$y : 0)
-  }), isDocumentBody && styles.fixed);
-  return /*#__PURE__*/React.createElement(portal.default, {
-    container: _container
-  }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread(_objectSpread({
-    ref: floatableRef
-  }, listeners), attributes), {}, {
-    className: relax.clsx(classNames[className.FabClassToken.Fab], styled.className),
-    style: styled.style
-  }), /*#__PURE__*/React.createElement(iconButton.default, {
-    onClick: onClick
-  }, children)));
-});
-
-exports.default = Floatable;

package/dist/components/fab/floatable.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type { FloatableProps, FloatableRef } from "musae/types/fab";
-declare const Floatable: React.ForwardRefExoticComponent<FloatableProps & React.RefAttributes<FloatableRef>>;
-export default Floatable;

package/dist/components/fab/floatable.mjs

@@ -1,104 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-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';
-import Portal from '../portal/portal.mjs';
-import { useContainer } from '../../hooks/use-container.mjs';
-import { useClassNames } from '../../hooks/use-class-names.mjs';
-import { FabClassToken } from '../../utils/class-name.mjs';
-import IconButton from '../icon-button/icon-button.mjs';
-
-var styles = {
-  floatable: function floatable(props) {
-    return [{
-      position: "musaex-10l6tqk",
-      transform: "musaex-1v0jg1i",
-      willChange: "musaex-1so62im",
-      right: "musaex-k6ci0l",
-      insetInlineStart: null,
-      insetInlineEnd: null,
-      bottom: "musaex-jnlgov",
-      zIndex: "musaex-n0d15w",
-      $$css: true
-    }, {
-      "--transform": "translate3d(".concat(props.x, "px, ").concat(props.y, "px, 0)") != null ? "translate3d(".concat(props.x, "px, ").concat(props.y, "px, 0)") : "initial"
-    }];
-  },
-  fixed: {
-    position: "musaex-ixxii4",
-    $$css: true
-  }
-};
-var Floatable = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var _transform$x, _transform$y;
-  var container = _ref2.container,
-    children = _ref2.children,
-    onClick = _ref2.onClick;
-  var classNames = useClassNames("fab");
-  var _useIdentity = useIdentity(),
-    _useIdentity2 = _slicedToArray(_useIdentity, 1),
-    id = _useIdentity2[0];
-  var _ref = useRef(null);
-  var _useDraggable = useDraggable({
-      id: id
-    }),
-    attributes = _useDraggable.attributes,
-    listeners = _useDraggable.listeners,
-    setNodeRef = _useDraggable.setNodeRef,
-    transform = _useDraggable.transform;
-  var floatableRef = useComposedRef(_ref, setNodeRef);
-  var _useContainer = useContainer({
-      container: container
-    }),
-    _container = _useContainer.container,
-    isDocumentBody = _useContainer.isDocumentBody;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    offsetX = _useState2[0],
-    setOffsetX = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    offsetY = _useState4[0],
-    setOffsetY = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    clientRect = _useState6[0],
-    setClientRect = _useState6[1];
-  useDndMonitor({
-    onDragEnd: function onDragEnd(event) {
-      var _ref$current;
-      setOffsetX(function (_offsetX) {
-        return _offsetX + event.delta.x;
-      });
-      setOffsetY(function (_offsetY) {
-        return _offsetY + event.delta.y;
-      });
-      setClientRect((_ref$current = _ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
-    }
-  });
-  useImperativeHandle(ref, function () {
-    return {
-      getBoundingClientRect: function getBoundingClientRect() {
-        return clientRect;
-      }
-    };
-  });
-  var styled = _stylex.props(styles.floatable({
-    x: offsetX + ((_transform$x = transform === null || transform === void 0 ? void 0 : transform.x) !== null && _transform$x !== void 0 ? _transform$x : 0),
-    y: offsetY + ((_transform$y = transform === null || transform === void 0 ? void 0 : transform.y) !== null && _transform$y !== void 0 ? _transform$y : 0)
-  }), isDocumentBody && styles.fixed);
-  return /*#__PURE__*/React.createElement(Portal, {
-    container: _container
-  }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread(_objectSpread({
-    ref: floatableRef
-  }, listeners), attributes), {}, {
-    className: clsx(classNames[FabClassToken.Fab], styled.className),
-    style: styled.style
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onClick
-  }, children)));
-});
-
-export { Floatable as default };