musae 0.2.26 → 0.3.0

package/dist/components/popconfirm/{popconfirm.js → popconfirm.mjs}

@@ -1,19 +1,19 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, cloneElement } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { PopconfirmClassToken } from '../../utils/class-name.js';
-import Space from '../space/space.js';
-import Button from '../button/button.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { PopconfirmClassToken } from '../../utils/class-name.mjs';
+import Space from '../space/space.mjs';
+import { Button } from '../button/button.mjs';
 import { useBoolean, useRefs, useEvent, useClickAway, clsx } from '@aiszlab/relax';
-import Popper from '../popper/popper.js';
-import { typography } from '../theme/theme.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import { useLocale } from '../../locale/use-locale.js';
-import Warning from '../icon/icons/alert/warning.js';
+import Popper from '../popper/popper.mjs';
+import { typography } from '../theme/theme.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
+import Warning from '../icon/icons/alert/warning.mjs';
 
 var styles = {
   leading: function leading(props) {
@@ -142,6 +142,5 @@ var Popconfirm = function Popconfirm(_ref2) {
     onClick: cancel
   }, locale.cancel)))));
 };
-var Popconfirm$1 = Popconfirm;
 
-export { Popconfirm$1 as default };
+export { Popconfirm as default };

package/dist/components/popconfirm/types.d.ts

@@ -1,6 +1,6 @@
 import type { DOMAttributes, RefAttributes } from "react";
 import type { PopoverProps } from "../popover";
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 export type ChildProps<T> = Pick<DOMAttributes<T>, "onClick"> & RefAttributes<T>;
 /**
  * @description

package/dist/components/popover/hooks.cjs

@@ -0,0 +1,64 @@
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var useLazyBoolean = require('../../hooks/use-lazy-boolean.cjs');
+var React = require('react');
+
+/**
+ * @description
+ * open state
+ */
+var useIsOpen = function useIsOpen(popperRef) {
+  var _useLazyBoolean = useLazyBoolean.useLazyBoolean(),
+    _useLazyBoolean2 = _slicedToArray(_useLazyBoolean, 2),
+    isOpen = _useLazyBoolean2[0],
+    _useLazyBoolean2$ = _useLazyBoolean2[1],
+    turnOn = _useLazyBoolean2$.turnOn,
+    _turnOff = _useLazyBoolean2$.turnOff,
+    _disappear = _useLazyBoolean2$.disappear;
+  var turnOff = relax.useEvent(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _popperRef$current;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _turnOff();
+          _context.next = 3;
+          return (_popperRef$current = popperRef.current) === null || _popperRef$current === void 0 ? void 0 : _popperRef$current.disappear();
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  var toggle = React.useCallback(function () {
+    if (isOpen) {
+      turnOff();
+      return;
+    }
+    turnOn();
+  }, [isOpen, turnOff, turnOn]);
+  var disappear = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _popperRef$current2;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return Promise.all([_disappear(), (_popperRef$current2 = popperRef.current) === null || _popperRef$current2 === void 0 ? void 0 : _popperRef$current2.disappear()])["catch"](function () {
+            return null;
+          });
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })), [_disappear, popperRef]);
+  return [isOpen, {
+    turnOn: turnOn,
+    turnOff: turnOff,
+    toggle: toggle,
+    disappear: disappear
+  }];
+};
+
+exports.useIsOpen = useIsOpen;

package/dist/components/popover/{hooks.js → hooks.mjs}

@@ -2,7 +2,7 @@ import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useEvent } from '@aiszlab/relax';
-import { useLazyBoolean } from '../../hooks/use-lazy-boolean.js';
+import { useLazyBoolean } from '../../hooks/use-lazy-boolean.mjs';
 import { useCallback } from 'react';
 
 /**

package/dist/components/popover/popover.cjs

@@ -0,0 +1,154 @@
+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 React = require('react');
+var popper = require('../popper/popper.cjs');
+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 theme = require('../theme/theme.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var hooks = require('./hooks.cjs');
+
+var styles = {
+  popover: {
+    "default": {
+      maxWidth: "musaex-16xn7b0",
+      display: "musaex-78zum5",
+      flexDirection: "musaex-dt5ytf",
+      gap: "musaex-1lsrmdg",
+      rowGap: null,
+      columnGap: null,
+      $$css: true
+    },
+    padding: function padding(_padding) {
+      return [{
+        padding: "musaex-19ea983",
+        paddingInline: null,
+        paddingStart: null,
+        paddingLeft: null,
+        paddingEnd: null,
+        paddingRight: null,
+        paddingBlock: null,
+        paddingTop: null,
+        paddingBottom: null,
+        $$css: true
+      }, {
+        "--padding": function (val) {
+          return typeof val === "number" ? val + "px" : val != null ? val : "initial";
+        }(_padding === true ? tokens_stylex.spacing.medium : _padding)
+      }];
+    }
+  }
+};
+var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$triggerBy = _ref2.triggerBy,
+    _triggerBy = _ref2$triggerBy === void 0 ? "hover" : _ref2$triggerBy,
+    title = _ref2.title,
+    content = _ref2.content,
+    _ref2$placement = _ref2.placement,
+    placement = _ref2$placement === void 0 ? "bottom" : _ref2$placement,
+    className$1 = _ref2.className,
+    style = _ref2.style,
+    _children = _ref2.children,
+    _ref2$padding = _ref2.padding,
+    padding = _ref2$padding === void 0 ? true : _ref2$padding,
+    _ref2$arrow = _ref2.arrow,
+    arrow = _ref2$arrow === void 0 ? true : _ref2$arrow;
+  var _ref = React.useRef(null);
+  var popperRef = React.useRef(null);
+  var _useIsOpen = hooks.useIsOpen(popperRef),
+    _useIsOpen2 = _slicedToArray(_useIsOpen, 2),
+    isOpen = _useIsOpen2[0],
+    _useIsOpen2$ = _useIsOpen2[1],
+    turnOn = _useIsOpen2$.turnOn,
+    turnOff = _useIsOpen2$.turnOff,
+    toggle = _useIsOpen2$.toggle,
+    disappear = _useIsOpen2$.disappear;
+  var triggerBy = React.useMemo(function () {
+    return new Set(relax.toArray(_triggerBy));
+  }, [_triggerBy]);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Popover);
+  var childRef = relax.useRefs(_ref, _children.props.ref);
+  var onClick = relax.useEvent(function (event) {
+    event.stopPropagation();
+    toggle();
+  });
+  var onContextMenu = relax.useEvent(function (event) {
+    event.preventDefault();
+    toggle();
+  });
+  var _useHover = relax.useHover({
+      onEnter: function onEnter(event) {
+        return relax.chain(_children.props.onMouseEnter, _children.props.onPointerEnter, turnOn)(event);
+      },
+      onLeave: function onLeave(event) {
+        return relax.chain(_children.props.onMouseLeave, _children.props.onPointerLeave, disappear)(event);
+      }
+    }),
+    _useHover2 = _slicedToArray(_useHover, 2),
+    hoverProps = _useHover2[1];
+  var _useFocus = relax.useFocus({
+      onFocus: function onFocus(event) {
+        return relax.chain(_children.props.onFocus, turnOn)(event);
+      },
+      onBlur: function onBlur(event) {
+        return relax.chain(_children.props.onBlur)(event);
+      }
+    }),
+    _useFocus2 = _slicedToArray(_useFocus, 2),
+    focusProps = _useFocus2[1];
+  // @ts-ignore
+  var children = /*#__PURE__*/React.cloneElement(_children, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: childRef
+  }, triggerBy.has("hover") && hoverProps), triggerBy.has("focus") && focusProps), triggerBy.has("click") && {
+    onClick: onClick
+  }), triggerBy.has("contextMenu") && {
+    onContextMenu: onContextMenu
+  }));
+  var enterPopper = React.useCallback(function () {
+    turnOn();
+  }, [turnOn]);
+  var leavePopper = React.useCallback(function () {
+    disappear();
+  }, [disappear]);
+  relax.useClickAway(function () {
+    turnOff();
+  }, [popperRef, triggerBy.has("click") && _ref]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      close: turnOff
+    };
+  });
+  var styled = {
+    popover: stylex.default.props(styles.popover["default"], !!padding && styles.popover.padding(padding), theme.typography.body.medium),
+    title: stylex.default.props(theme.typography.title.medium),
+    content: stylex.default.props(theme.typography.body.medium)
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(popper.default, _objectSpread(_objectSpread({
+    trigger: _ref.current,
+    open: isOpen,
+    arrow: arrow
+  }, triggerBy.has("hover") && {
+    onPointerEnter: enterPopper,
+    onPointerLeave: leavePopper
+  }), {}, {
+    placement: placement,
+    ref: popperRef,
+    disappearable: false
+  }), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.PopoverClassToken.Popover], className$1, styled.popover.className),
+    style: _objectSpread(_objectSpread({}, styled.popover.style), style)
+  }, !!title && (/*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.PopoverClassToken.Title], styled.title.className),
+    style: styled.title.style
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.PopoverClassToken.Content], styled.content.className),
+    style: styled.content.style
+  }, content))));
+});
+
+exports.default = Popover;

package/dist/components/popover/{popover.js → popover.mjs}

@@ -2,14 +2,14 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { toArray, useRefs, useEvent, useHover, chain, useFocus, useClickAway, clsx } from '@aiszlab/relax';
 import React, { forwardRef, useRef, useMemo, cloneElement, useCallback, useImperativeHandle } from 'react';
-import Popper from '../popper/popper.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { spacing } from '../theme/tokens.stylex.js';
-import { typography } from '../theme/theme.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { PopoverClassToken } from '../../utils/class-name.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import { useIsOpen } from './hooks.js';
+import Popper from '../popper/popper.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { spacing } from '../theme/tokens.stylex.mjs';
+import { typography } from '../theme/theme.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { PopoverClassToken } from '../../utils/class-name.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { useIsOpen } from './hooks.mjs';
 
 var styles = {
   popover: {
@@ -148,6 +148,5 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     style: styled.content.style
   }, content))));
 });
-var Popover$1 = Popover;
 
-export { Popover$1 as default };
+export { Popover as default };

package/dist/components/popover/types.d.ts

@@ -1,5 +1,5 @@
 import type { DOMAttributes, ReactElement, ReactNode, RefAttributes } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 import type { Placement } from "@floating-ui/dom";
 export type ChildProps<T> = Pick<DOMAttributes<T>, "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onClick" | "onContextMenu" | "onFocus" | "onBlur"> & RefAttributes<T>;
 type TriggerBy = "hover" | "focus" | "click" | "contextMenu";

package/dist/components/popper/dropdown.cjs

@@ -0,0 +1,135 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var className = require('../../utils/class-name.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var relax = require('@aiszlab/relax');
+var hooks$1 = require('./hooks.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var dom = require('@aiszlab/relax/dom');
+
+var _excluded = ["open", "children", "placement", "style", "className", "onExit", "onExited", "onEntered", "trigger", "offset", "overlay", "arrow", "disappearable"];
+var styles = {
+  dropdown: {
+    "default": function _default(props) {
+      return [{
+        zIndex: "musaex-1jhhwlq",
+        position: "musaex-10l6tqk",
+        backgroundColor: "musaex-q1mx2j",
+        top: "musaex-13vifvy",
+        insetInlineStart: "musaex-1o0tod",
+        left: null,
+        right: null,
+        boxShadow: "musaex-1bhjvst",
+        borderRadius: "musaex-qwu505",
+        borderStartStartRadius: null,
+        borderStartEndRadius: null,
+        borderEndStartRadius: null,
+        borderEndEndRadius: null,
+        borderTopLeftRadius: null,
+        borderTopRightRadius: null,
+        borderBottomLeftRadius: null,
+        borderBottomRightRadius: null,
+        overflow: "musaex-ysyzu8",
+        overflowX: null,
+        overflowY: null,
+        willChange: "musaex-19wnzia",
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+      }];
+    },
+    overlay: {
+      zIndex: "musaex-1xjrk7z",
+      $$css: true
+    }
+  },
+  arrow: {
+    "default": function _default(props) {
+      return [{
+        position: "musaex-10l6tqk",
+        width: "musaex-u8rtl",
+        height: "musaex-9al7vl",
+        backgroundColor: "musaex-q1mx2j",
+        transform: "musaex-1158fpu",
+        zIndex: "musaex-18enb72",
+        $$css: true
+      }, {
+        "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+      }];
+    }
+  }
+};
+var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var open = _ref.open,
+    children = _ref.children,
+    placement = _ref.placement,
+    style = _ref.style,
+    className$1 = _ref.className,
+    onExit = _ref.onExit,
+    onExited = _ref.onExited,
+    onEntered = _ref.onEntered,
+    trigger = _ref.trigger,
+    _offset = _ref.offset,
+    _ref$overlay = _ref.overlay,
+    overlay = _ref$overlay === void 0 ? false : _ref$overlay,
+    _ref$arrow = _ref.arrow,
+    arrowable = _ref$arrow === void 0 ? false : _ref$arrow,
+    _ref$disappearable = _ref.disappearable,
+    disappearable = _ref$disappearable === void 0 ? true : _ref$disappearable,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Popper);
+  var theme = hooks.useTheme();
+  var _useFloating = hooks$1.useFloating({
+      arrowable: arrowable,
+      offset: _offset,
+      placement: placement,
+      open: open,
+      trigger: trigger
+    }),
+    floatableRef = _useFloating.floatableRef,
+    arrowRef = _useFloating.arrowRef;
+  var _useAnimation = hooks$1.useAnimation({
+      open: open,
+      disappearable: disappearable,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited
+    }),
+    disappear = _useAnimation.disappear,
+    animatableRef = _useAnimation.animatableRef;
+  var refs = relax.useRefs(floatableRef, animatableRef);
+  React.useImperativeHandle(ref, function () {
+    return {
+      disappear: disappear,
+      contains: function contains(node) {
+        return dom.contains(floatableRef.current, node);
+      }
+    };
+  });
+  var styled = {
+    dropdown: stylex.default.props(styles.dropdown["default"]({
+      backgroundColor: theme.colors[colors.ColorToken.SurfaceContainer]
+    }), overlay && styles.dropdown.overlay),
+    arrow: stylex.default.props(styles.arrow["default"]({
+      backgroundColor: theme.colors[colors.ColorToken.SurfaceContainer]
+    }))
+  };
+  return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
+    ref: refs
+  }, props), {}, {
+    className: relax.clsx(classNames[className.PopperClassToken.Dropdown], className$1, styled.dropdown.className),
+    style: _objectSpread(_objectSpread({}, styled.dropdown.style), style)
+  }), children, arrowable && (/*#__PURE__*/React.createElement("div", {
+    ref: arrowRef,
+    className: styled.arrow.className,
+    style: styled.arrow.style
+  })));
+});
+
+exports.default = Dropdown;

package/dist/components/popper/{dropdown.js → dropdown.mjs}

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, useImperativeHandle } from 'react';
-import { PopperClassToken } from '../../utils/class-name.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { PopperClassToken } from '../../utils/class-name.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useRefs, clsx } from '@aiszlab/relax';
-import { useFloating, useAnimation } from './hooks.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useFloating, useAnimation } from './hooks.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 import { contains } from '@aiszlab/relax/dom';
 
 var _excluded = ["open", "children", "placement", "style", "className", "onExit", "onExited", "onEntered", "trigger", "offset", "overlay", "arrow", "disappearable"];
@@ -80,7 +80,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     arrowable = _ref$arrow === void 0 ? false : _ref$arrow,
     _ref$disappearable = _ref.disappearable,
     disappearable = _ref$disappearable === void 0 ? true : _ref$disappearable,
-    props$1 = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames(ComponentToken.Popper);
   var theme = useTheme();
   var _useFloating = useFloating({
@@ -111,16 +111,16 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   });
   var styled = {
-    dropdown: props(styles.dropdown["default"]({
+    dropdown: _stylex.props(styles.dropdown["default"]({
       backgroundColor: theme.colors[ColorToken.SurfaceContainer]
     }), overlay && styles.dropdown.overlay),
-    arrow: props(styles.arrow["default"]({
+    arrow: _stylex.props(styles.arrow["default"]({
       backgroundColor: theme.colors[ColorToken.SurfaceContainer]
     }))
   };
   return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
     ref: refs
-  }, props$1), {}, {
+  }, props), {}, {
     className: clsx(classNames[PopperClassToken.Dropdown], className, styled.dropdown.className),
     style: _objectSpread(_objectSpread({}, styled.dropdown.style), style)
   }), children, arrowable && (/*#__PURE__*/React.createElement("div", {