musae 0.3.7 → 0.3.9

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

@@ -1,4 +1,5 @@
 import type { PopperRef } from "musae/types/popper";
+import { TriggerBy } from "../../types/popover";
 type UsedIsOpen = [
     boolean,
     {
@@ -13,4 +14,14 @@ type UsedIsOpen = [
  * open state
  */
 export declare const useIsOpen: (popperRef: React.RefObject<PopperRef>) => UsedIsOpen;
+/**
+ * @description
+ * used triggers
+ */
+export declare const useTriggerBy: (triggerBy: TriggerBy | TriggerBy[]) => {
+    isHoverable: boolean;
+    isFocusable: boolean;
+    isClickable: boolean;
+    isContextMenuable: boolean;
+};
 export {};

package/dist/components/popover/hooks.mjs

@@ -1,9 +1,9 @@
 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 { useEvent, toArray } from '@aiszlab/relax';
 import { useLazyBoolean } from '../../hooks/use-lazy-boolean.mjs';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 /**
  * @description
@@ -60,5 +60,32 @@ var useIsOpen = function useIsOpen(popperRef) {
     disappear: disappear
   }];
 };
+/**
+ * @description
+ * used triggers
+ */
+var useTriggerBy = function useTriggerBy(triggerBy) {
+  var _triggerBy = useMemo(function () {
+    return new Set(toArray(triggerBy));
+  }, [triggerBy]);
+  var isHoverable = useMemo(function () {
+    return _triggerBy.has("hover");
+  }, [_triggerBy]);
+  var isFocusable = useMemo(function () {
+    return _triggerBy.has("focus");
+  }, [_triggerBy]);
+  var isClickable = useMemo(function () {
+    return _triggerBy.has("click");
+  }, [_triggerBy]);
+  var isContextMenuable = useMemo(function () {
+    return _triggerBy.has("contextMenu");
+  }, [_triggerBy]);
+  return {
+    isHoverable: isHoverable,
+    isFocusable: isFocusable,
+    isClickable: isClickable,
+    isContextMenuable: isContextMenuable
+  };
+};
 
-export { useIsOpen };
+export { useIsOpen, useTriggerBy };

package/dist/components/popover/popover.cjs

@@ -68,11 +68,12 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     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 _useTriggerBy = hooks.useTriggerBy(_triggerBy),
+    isClickable = _useTriggerBy.isClickable,
+    isContextMenuable = _useTriggerBy.isContextMenuable,
+    isFocusable = _useTriggerBy.isFocusable,
+    isHoverable = _useTriggerBy.isHoverable;
   var onClick = relax.useEvent(function (event) {
     event.stopPropagation();
     toggle();
@@ -81,34 +82,61 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     event.preventDefault();
     toggle();
   });
+  // hover enter callback
+  var onHoverEnter = React.useCallback(function (event) {
+    var _children$props$onMou, _children$props, _children$props$onPoi, _children$props2;
+    turnOn();
+    if (! /*#__PURE__*/React.isValidElement(_children)) return;
+    (_children$props$onMou = (_children$props = _children.props).onMouseEnter) === null || _children$props$onMou === void 0 || _children$props$onMou.call(_children$props, event);
+    (_children$props$onPoi = (_children$props2 = _children.props).onPointerEnter) === null || _children$props$onPoi === void 0 || _children$props$onPoi.call(_children$props2, event);
+  }, [_children, turnOn]);
+  // hover leave callback
+  var onHoverLeave = React.useCallback(function (event) {
+    var _children$props$onMou2, _children$props3, _children$props$onPoi2, _children$props4;
+    turnOff();
+    if (! /*#__PURE__*/React.isValidElement(_children)) return;
+    (_children$props$onMou2 = (_children$props3 = _children.props).onMouseLeave) === null || _children$props$onMou2 === void 0 || _children$props$onMou2.call(_children$props3, event);
+    (_children$props$onPoi2 = (_children$props4 = _children.props).onPointerLeave) === null || _children$props$onPoi2 === void 0 || _children$props$onPoi2.call(_children$props4, event);
+  }, [_children, turnOff]);
   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);
-      }
+      onEnter: onHoverEnter,
+      onLeave: onHoverLeave
     }),
     _useHover2 = _slicedToArray(_useHover, 2),
     hoverProps = _useHover2[1];
+  var onFocus = React.useCallback(function (event) {
+    var _children$props$onFoc, _children$props5;
+    turnOn();
+    if (! /*#__PURE__*/React.isValidElement(_children)) return;
+    (_children$props$onFoc = (_children$props5 = _children.props).onFocus) === null || _children$props$onFoc === void 0 || _children$props$onFoc.call(_children$props5, event);
+  }, [_children, turnOn]);
+  var onBlur = React.useCallback(function (event) {
+    var _children$props$onBlu, _children$props6;
+    turnOff();
+    if (! /*#__PURE__*/React.isValidElement(_children)) return;
+    (_children$props$onBlu = (_children$props6 = _children.props).onBlur) === null || _children$props$onBlu === void 0 || _children$props$onBlu.call(_children$props6, event);
+  }, [_children, turnOff]);
   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, disappear)(event);
-      }
+      onFocus: onFocus,
+      onBlur: onBlur
     }),
     _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
-  }));
+  // valid elment, inject handlers
+  // else add `div` wrapper
+  var children = React.useMemo(function () {
+    var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      ref: _ref
+    }, isHoverable && hoverProps), isFocusable && focusProps), isClickable && {
+      onClick: onClick
+    }), isContextMenuable && {
+      onContextMenu: onContextMenu
+    });
+    if (/*#__PURE__*/React.isValidElement(_children)) {
+      return /*#__PURE__*/React.cloneElement(_children, props);
+    }
+    return /*#__PURE__*/React.createElement("div", _objectSpread({}, props), _children);
+  }, [_children, focusProps, hoverProps, isClickable, isContextMenuable, isFocusable, isHoverable, onClick, onContextMenu]);
   var enterPopper = React.useCallback(function () {
     turnOn();
   }, [turnOn]);
@@ -117,7 +145,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, [disappear]);
   relax.useClickAway(function () {
     turnOff();
-  }, [popperRef, triggerBy.has("click") && _ref]);
+  }, [popperRef, isClickable && _ref]);
   React.useImperativeHandle(ref, function () {
     return {
       close: turnOff
@@ -132,7 +160,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     trigger: _ref.current,
     open: isOpen,
     arrow: arrow
-  }, triggerBy.has("hover") && {
+  }, isHoverable && {
     onPointerEnter: enterPopper,
     onPointerLeave: leavePopper
   }), {}, {

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

@@ -1,10 +1,10 @@
 import React from "react";
 import type { ChildProps, PopoverRef } from "musae/types/popover";
 declare const Popover: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & {
-    children: React.ReactElement<ChildProps<HTMLElement>, string | React.JSXElementConstructor<any>>;
+    children: number | boolean | React.ReactElement<ChildProps<HTMLElement>, string | React.JSXElementConstructor<any>> | null | undefined;
     title?: React.ReactNode;
     content: React.ReactNode;
-    triggerBy?: ("hover" | "focus" | "click" | "contextMenu") | ("hover" | "focus" | "click" | "contextMenu")[];
+    triggerBy?: import("musae/types/popover").TriggerBy | import("musae/types/popover").TriggerBy[];
     placement?: import("@floating-ui/dom").Placement;
     padding?: boolean | number;
     arrow?: boolean;

package/dist/components/popover/popover.mjs

@@ -1,7 +1,7 @@
 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 { useEvent, useHover, useFocus, useClickAway, clsx } from '@aiszlab/relax';
+import React, { forwardRef, useRef, useCallback, isValidElement, useMemo, cloneElement, useImperativeHandle } from 'react';
 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';
@@ -9,7 +9,7 @@ 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';
+import { useIsOpen, useTriggerBy } from './hooks.mjs';
 
 var styles = {
   popover: {
@@ -66,11 +66,12 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     turnOff = _useIsOpen2$.turnOff,
     toggle = _useIsOpen2$.toggle,
     disappear = _useIsOpen2$.disappear;
-  var triggerBy = useMemo(function () {
-    return new Set(toArray(_triggerBy));
-  }, [_triggerBy]);
   var classNames = useClassNames(ComponentToken.Popover);
-  var childRef = useRefs(_ref, _children.props.ref);
+  var _useTriggerBy = useTriggerBy(_triggerBy),
+    isClickable = _useTriggerBy.isClickable,
+    isContextMenuable = _useTriggerBy.isContextMenuable,
+    isFocusable = _useTriggerBy.isFocusable,
+    isHoverable = _useTriggerBy.isHoverable;
   var onClick = useEvent(function (event) {
     event.stopPropagation();
     toggle();
@@ -79,34 +80,61 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     event.preventDefault();
     toggle();
   });
+  // hover enter callback
+  var onHoverEnter = useCallback(function (event) {
+    var _children$props$onMou, _children$props, _children$props$onPoi, _children$props2;
+    turnOn();
+    if (! /*#__PURE__*/isValidElement(_children)) return;
+    (_children$props$onMou = (_children$props = _children.props).onMouseEnter) === null || _children$props$onMou === void 0 || _children$props$onMou.call(_children$props, event);
+    (_children$props$onPoi = (_children$props2 = _children.props).onPointerEnter) === null || _children$props$onPoi === void 0 || _children$props$onPoi.call(_children$props2, event);
+  }, [_children, turnOn]);
+  // hover leave callback
+  var onHoverLeave = useCallback(function (event) {
+    var _children$props$onMou2, _children$props3, _children$props$onPoi2, _children$props4;
+    turnOff();
+    if (! /*#__PURE__*/isValidElement(_children)) return;
+    (_children$props$onMou2 = (_children$props3 = _children.props).onMouseLeave) === null || _children$props$onMou2 === void 0 || _children$props$onMou2.call(_children$props3, event);
+    (_children$props$onPoi2 = (_children$props4 = _children.props).onPointerLeave) === null || _children$props$onPoi2 === void 0 || _children$props$onPoi2.call(_children$props4, event);
+  }, [_children, turnOff]);
   var _useHover = useHover({
-      onEnter: function onEnter(event) {
-        return chain(_children.props.onMouseEnter, _children.props.onPointerEnter, turnOn)(event);
-      },
-      onLeave: function onLeave(event) {
-        return chain(_children.props.onMouseLeave, _children.props.onPointerLeave, disappear)(event);
-      }
+      onEnter: onHoverEnter,
+      onLeave: onHoverLeave
     }),
     _useHover2 = _slicedToArray(_useHover, 2),
     hoverProps = _useHover2[1];
+  var onFocus = useCallback(function (event) {
+    var _children$props$onFoc, _children$props5;
+    turnOn();
+    if (! /*#__PURE__*/isValidElement(_children)) return;
+    (_children$props$onFoc = (_children$props5 = _children.props).onFocus) === null || _children$props$onFoc === void 0 || _children$props$onFoc.call(_children$props5, event);
+  }, [_children, turnOn]);
+  var onBlur = useCallback(function (event) {
+    var _children$props$onBlu, _children$props6;
+    turnOff();
+    if (! /*#__PURE__*/isValidElement(_children)) return;
+    (_children$props$onBlu = (_children$props6 = _children.props).onBlur) === null || _children$props$onBlu === void 0 || _children$props$onBlu.call(_children$props6, event);
+  }, [_children, turnOff]);
   var _useFocus = useFocus({
-      onFocus: function onFocus(event) {
-        return chain(_children.props.onFocus, turnOn)(event);
-      },
-      onBlur: function onBlur(event) {
-        return chain(_children.props.onBlur, disappear)(event);
-      }
+      onFocus: onFocus,
+      onBlur: onBlur
     }),
     _useFocus2 = _slicedToArray(_useFocus, 2),
     focusProps = _useFocus2[1];
-  // @ts-ignore
-  var children = /*#__PURE__*/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
-  }));
+  // valid elment, inject handlers
+  // else add `div` wrapper
+  var children = useMemo(function () {
+    var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      ref: _ref
+    }, isHoverable && hoverProps), isFocusable && focusProps), isClickable && {
+      onClick: onClick
+    }), isContextMenuable && {
+      onContextMenu: onContextMenu
+    });
+    if (/*#__PURE__*/isValidElement(_children)) {
+      return /*#__PURE__*/cloneElement(_children, props);
+    }
+    return /*#__PURE__*/React.createElement("div", _objectSpread({}, props), _children);
+  }, [_children, focusProps, hoverProps, isClickable, isContextMenuable, isFocusable, isHoverable, onClick, onContextMenu]);
   var enterPopper = useCallback(function () {
     turnOn();
   }, [turnOn]);
@@ -115,7 +143,7 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, [disappear]);
   useClickAway(function () {
     turnOff();
-  }, [popperRef, triggerBy.has("click") && _ref]);
+  }, [popperRef, isClickable && _ref]);
   useImperativeHandle(ref, function () {
     return {
       close: turnOff
@@ -130,7 +158,7 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     trigger: _ref.current,
     open: isOpen,
     arrow: arrow
-  }, triggerBy.has("hover") && {
+  }, isHoverable && {
     onPointerEnter: enterPopper,
     onPointerLeave: leavePopper
   }), {}, {

package/dist/components/theme/hooks.cjs

@@ -133,9 +133,6 @@ var useTheme = function useTheme() {
  * @description
  * inject css names and styles into html element
  * for animations
- *
- * u may ask: why add a single hook for this?
- * i will answer: because i want to keep the code clean.
  */
 var useSwitchable = function useSwitchable(_ref) {
   var theme = _ref.theme;
@@ -159,11 +156,12 @@ var useSwitchable = function useSwitchable(_ref) {
       className: "musaex-ntwwlm musaex-jitcrl musaex-19v9tfi"
     }
   };
-  var repaint = relax.useEvent(function (_mode) {
+  var repaint = relax.useEvent(function (nextMode) {
     var _document$documentEle, _document$documentEle2;
-    var _isDark = _mode === "dark";
-    (_document$documentEle = document.documentElement.classList).remove.apply(_document$documentEle, _toConsumableArray(styles.toClassList((_isDark ? styled.light : styled.dark).className)));
-    (_document$documentEle2 = document.documentElement.classList).add.apply(_document$documentEle2, _toConsumableArray(styles.toClassList(styled[_mode].className)));
+    var _isDark = nextMode === "dark";
+    var _usingMode = _isDark ? "light" : "dark";
+    (_document$documentEle = document.documentElement.classList).remove.apply(_document$documentEle, _toConsumableArray(styles.toClassList(styled[_usingMode].className)));
+    (_document$documentEle2 = document.documentElement.classList).add.apply(_document$documentEle2, _toConsumableArray(styles.toClassList(styled[nextMode].className)));
     document.documentElement.style.backgroundColor = _isDark ? theme.palette.neutral[0] : theme.palette.neutral[100];
   });
   relax.useMounted(function () {
@@ -179,16 +177,16 @@ var useSwitchable = function useSwitchable(_ref) {
   });
   // dark, light mode switch
   var toggle = relax.useEvent(function (event) {
-    var modeSwitchTo = isDark ? "light" : "dark";
+    var _toMode = isDark ? "light" : "dark";
     // dom not support animation
     if (!relax.isFunction(document.startViewTransition)) {
       var _trigger$current;
-      (_trigger$current = trigger.current) === null || _trigger$current === void 0 || _trigger$current.next(modeSwitchTo);
+      (_trigger$current = trigger.current) === null || _trigger$current === void 0 || _trigger$current.next(_toMode);
       return;
     }
     var animation = document.startViewTransition(function () {
       var _trigger$current2;
-      (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(modeSwitchTo);
+      (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(_toMode);
     });
     animation.ready.then(function () {
       var _event$clientX, _event$clientY;

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

@@ -20,9 +20,6 @@ export declare const useTheme: () => ContextValue;
  * @description
  * inject css names and styles into html element
  * for animations
- *
- * u may ask: why add a single hook for this?
- * i will answer: because i want to keep the code clean.
  */
 export declare const useSwitchable: ({ theme }: {
     theme: Theme;

package/dist/components/theme/hooks.mjs

@@ -133,9 +133,6 @@ var useTheme = function useTheme() {
  * @description
  * inject css names and styles into html element
  * for animations
- *
- * u may ask: why add a single hook for this?
- * i will answer: because i want to keep the code clean.
  */
 var useSwitchable = function useSwitchable(_ref) {
   var theme = _ref.theme;
@@ -159,11 +156,12 @@ var useSwitchable = function useSwitchable(_ref) {
       className: "musaex-ntwwlm musaex-jitcrl musaex-19v9tfi"
     }
   };
-  var repaint = useEvent(function (_mode) {
+  var repaint = useEvent(function (nextMode) {
     var _document$documentEle, _document$documentEle2;
-    var _isDark = _mode === "dark";
-    (_document$documentEle = document.documentElement.classList).remove.apply(_document$documentEle, _toConsumableArray(toClassList((_isDark ? styled.light : styled.dark).className)));
-    (_document$documentEle2 = document.documentElement.classList).add.apply(_document$documentEle2, _toConsumableArray(toClassList(styled[_mode].className)));
+    var _isDark = nextMode === "dark";
+    var _usingMode = _isDark ? "light" : "dark";
+    (_document$documentEle = document.documentElement.classList).remove.apply(_document$documentEle, _toConsumableArray(toClassList(styled[_usingMode].className)));
+    (_document$documentEle2 = document.documentElement.classList).add.apply(_document$documentEle2, _toConsumableArray(toClassList(styled[nextMode].className)));
     document.documentElement.style.backgroundColor = _isDark ? theme.palette.neutral[0] : theme.palette.neutral[100];
   });
   useMounted(function () {
@@ -179,16 +177,16 @@ var useSwitchable = function useSwitchable(_ref) {
   });
   // dark, light mode switch
   var toggle = useEvent(function (event) {
-    var modeSwitchTo = isDark ? "light" : "dark";
+    var _toMode = isDark ? "light" : "dark";
     // dom not support animation
     if (!isFunction(document.startViewTransition)) {
       var _trigger$current;
-      (_trigger$current = trigger.current) === null || _trigger$current === void 0 || _trigger$current.next(modeSwitchTo);
+      (_trigger$current = trigger.current) === null || _trigger$current === void 0 || _trigger$current.next(_toMode);
       return;
     }
     var animation = document.startViewTransition(function () {
       var _trigger$current2;
-      (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(modeSwitchTo);
+      (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(_toMode);
     });
     animation.ready.then(function () {
       var _event$clientX, _event$clientY;

package/dist/locale/locales/en_US.cjs

@@ -3,9 +3,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var componentToken = require('../../utils/component-token.cjs');
 
-var en_US = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+var _en_US;
+var en_US = (_en_US = {
   locale: "en_US"
-}, componentToken.ComponentToken.Dialog, {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_en_US, componentToken.ComponentToken.Dialog, {
   confirm: "Confirm",
   cancel: "Cancel"
 }), componentToken.ComponentToken.Empty, {
@@ -33,6 +34,10 @@ var en_US = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_def
   confirm: "Confirm"
 }), componentToken.ComponentToken.Upload, {
   upload: "Upload"
-});
+}), _defineProperty(_en_US, componentToken.ComponentToken.Form, {
+  required: function required(name) {
+    return "".concat(name, " is required");
+  }
+}));
 
 exports.default = en_US;

package/dist/locale/locales/en_US.mjs

@@ -1,9 +1,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
-var en_US = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+var _en_US;
+var en_US = (_en_US = {
   locale: "en_US"
-}, ComponentToken.Dialog, {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_en_US, ComponentToken.Dialog, {
   confirm: "Confirm",
   cancel: "Cancel"
 }), ComponentToken.Empty, {
@@ -31,6 +32,10 @@ var en_US = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_def
   confirm: "Confirm"
 }), ComponentToken.Upload, {
   upload: "Upload"
-});
+}), _defineProperty(_en_US, ComponentToken.Form, {
+  required: function required(name) {
+    return "".concat(name, " is required");
+  }
+}));
 
 export { en_US as default };

package/dist/locale/locales/zh_CN.cjs

@@ -3,9 +3,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var componentToken = require('../../utils/component-token.cjs');
 
-var zh_CN = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+var _zh_CN;
+var zh_CN = (_zh_CN = {
   locale: "zh_CN"
-}, componentToken.ComponentToken.Dialog, {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_zh_CN, componentToken.ComponentToken.Dialog, {
   confirm: "确认",
   cancel: "取消"
 }), componentToken.ComponentToken.Empty, {
@@ -33,6 +34,10 @@ var zh_CN = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_def
   confirm: "确认"
 }), componentToken.ComponentToken.Upload, {
   upload: "上传"
-});
+}), _defineProperty(_zh_CN, componentToken.ComponentToken.Form, {
+  required: function required(name) {
+    return "".concat(name, " \u662F\u5FC5\u586B\u9879");
+  }
+}));
 
 exports.default = zh_CN;

package/dist/locale/locales/zh_CN.mjs

@@ -1,9 +1,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
-var zh_CN = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+var _zh_CN;
+var zh_CN = (_zh_CN = {
   locale: "zh_CN"
-}, ComponentToken.Dialog, {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_zh_CN, ComponentToken.Dialog, {
   confirm: "确认",
   cancel: "取消"
 }), ComponentToken.Empty, {
@@ -31,6 +32,10 @@ var zh_CN = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_def
   confirm: "确认"
 }), ComponentToken.Upload, {
   upload: "上传"
-});
+}), _defineProperty(_zh_CN, ComponentToken.Form, {
+  required: function required(name) {
+    return "".concat(name, " \u662F\u5FC5\u586B\u9879");
+  }
+}));
 
 export { zh_CN as default };

package/dist/types/countdown.d.ts

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

package/dist/types/locale.d.ts

@@ -35,4 +35,7 @@ export interface Locale {
     [ComponentToken.Upload]: {
         upload: string;
     };
+    [ComponentToken.Form]: {
+        required: ((name: string) => string) | string;
+    };
 }

package/dist/types/otp-input.d.ts

@@ -1,8 +1,9 @@
+import { ComponentProps } from "./element";
 /**
  * @description
  * otp input props
  */
-export type OtpInputProps = {
+export type OtpInputProps = ComponentProps & {
     /**
      * @description
      * length

package/dist/types/popover.d.ts

@@ -2,7 +2,7 @@ import type { DOMAttributes, ReactElement, ReactNode, RefAttributes } from "reac
 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";
+export type TriggerBy = "hover" | "focus" | "click" | "contextMenu";
 /**
  * @description
  * popover props
@@ -13,7 +13,7 @@ export type PopoverProps<P extends ChildProps<T>, T extends HTMLElement> = Compo
      * a trigger element.
      * @requires
      */
-    children: ReactElement<P>;
+    children: ReactElement<P> | Exclude<ReactNode, ReactElement | Iterable<ReactNode>>;
     /**
      * @description
      * title
@@ -65,4 +65,3 @@ export type PopoverRef = {
      */
     close: () => Promise<void>;
 };
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -60,6 +60,7 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@floating-ui/dom": "^1.6.11",
     "@lexical/code": "^0.18.0",
+    "@lexical/headless": "^0.18.0",
     "@lexical/link": "^0.18.0",
     "@lexical/list": "^0.18.0",
     "@lexical/markdown": "^0.18.0",
@@ -69,16 +70,16 @@
     "@lexical/utils": "^0.18.0",
     "@tanstack/react-table": "^8.20.5",
     "dayjs": "^1.11.13",
-    "framer-motion": "^11.11.1",
+    "framer-motion": "^11.11.7",
     "lexical": "^0.18.0",
     "react-hook-form": "^7.53.0",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@aiszlab/jarvis": "^1.0.2",
-    "@babel/core": "^7.25.7",
+    "@babel/core": "^7.25.8",
     "@babel/plugin-transform-runtime": "^7.25.7",
-    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-env": "^7.25.8",
     "@babel/preset-react": "^7.25.7",
     "@babel/preset-typescript": "^7.25.7",
     "@rollup/plugin-babel": "^6.0.4",
@@ -91,9 +92,8 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/dom-view-transitions": "^1.0.5",
     "@types/jest": "^29.5.13",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.7.5",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "babel-jest": "^29.7.0",
@@ -105,8 +105,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.24.0",
-    "typescript": "^5.6.2",
-    "zx": "^8.1.8"
+    "typescript": "^5.6.3",
+    "zx": "^8.1.9"
   },
   "peerDependencies": {
     "react": "^18",