musae 0.3.8 → 0.3.9

package/dist/components/avatar/group.cjs

@@ -24,15 +24,14 @@ var _Group = function Group(_ref) {
   };
   var children = React.useMemo(function () {
     var _Children$toArray$red = React.Children.toArray(_children).reduce(function (prev, child, index) {
-        // @ts-ignore
-        var element = /*#__PURE__*/React.cloneElement(child, {
+        var _child = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
           key: "avatars-".concat(index)
-        });
+        }) : child;
         // great than max, hide current node
         if (index >= max) {
-          prev[1].push(element);
+          prev[1].push(_child);
         } else {
-          prev[0].push(element);
+          prev[0].push(_child);
         }
         return prev;
       }, [[], []]),

package/dist/components/avatar/group.mjs

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useMemo, Children, cloneElement } from 'react';
+import React, { useMemo, Children, isValidElement, cloneElement } from 'react';
 import { Context } from './context.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { AvatarClassToken } from '../../utils/class-name.mjs';
@@ -22,15 +22,14 @@ var _Group = function Group(_ref) {
   };
   var children = useMemo(function () {
     var _Children$toArray$red = Children.toArray(_children).reduce(function (prev, child, index) {
-        // @ts-ignore
-        var element = /*#__PURE__*/cloneElement(child, {
+        var _child = /*#__PURE__*/ /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
           key: "avatars-".concat(index)
-        });
+        }) : child;
         // great than max, hide current node
         if (index >= max) {
-          prev[1].push(element);
+          prev[1].push(_child);
         } else {
-          prev[0].push(element);
+          prev[0].push(_child);
         }
         return prev;
       }, [[], []]),

package/dist/components/countdown/countdown.cjs

@@ -1,5 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var button = require('../button/button.cjs');
@@ -25,7 +27,8 @@ var Countdown = function Countdown(_ref) {
     _ref$ripple = _ref.ripple,
     ripple = _ref$ripple === void 0 ? true : _ref$ripple,
     className = _ref.className,
-    style = _ref.style;
+    style = _ref.style,
+    onClick = _ref.onClick;
   var trigger = React.useRef(null);
   var counter = React.useRef(null);
   var stopper = React.useRef(null);
@@ -64,11 +67,27 @@ var Countdown = function Countdown(_ref) {
       }
     })) !== null && _counter$current$subs !== void 0 ? _counter$current$subs : null;
   });
-  var start = relax.useEvent(function (e) {
-    var _trigger$current2;
-    countdown();
-    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(e);
-  });
+  var start = relax.useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
+      var _trigger$current2;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return Promise.resolve(onClick === null || onClick === void 0 ? void 0 : onClick(e));
+          case 2:
+            countdown();
+            (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(e);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
   return /*#__PURE__*/React.createElement(button.Button, {
     onClick: start,
     disabled: disabled || isCounting,

package/dist/components/countdown/countdown.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CountdownProps } from "musae/types/countdown";
-declare const Countdown: ({ count, children, interval: _interval, disabled, variant, color, shape, size, ripple, className, style, }: CountdownProps) => React.JSX.Element;
+declare const Countdown: ({ count, children, interval: _interval, disabled, variant, color, shape, size, ripple, className, style, onClick, }: CountdownProps) => React.JSX.Element;
 export default Countdown;

package/dist/components/countdown/countdown.mjs

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useState } from 'react';
 import { Button } from '../button/button.mjs';
@@ -23,7 +25,8 @@ var Countdown = function Countdown(_ref) {
     _ref$ripple = _ref.ripple,
     ripple = _ref$ripple === void 0 ? true : _ref$ripple,
     className = _ref.className,
-    style = _ref.style;
+    style = _ref.style,
+    onClick = _ref.onClick;
   var trigger = useRef(null);
   var counter = useRef(null);
   var stopper = useRef(null);
@@ -62,11 +65,27 @@ var Countdown = function Countdown(_ref) {
       }
     })) !== null && _counter$current$subs !== void 0 ? _counter$current$subs : null;
   });
-  var start = useEvent(function (e) {
-    var _trigger$current2;
-    countdown();
-    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(e);
-  });
+  var start = useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
+      var _trigger$current2;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return Promise.resolve(onClick === null || onClick === void 0 ? void 0 : onClick(e));
+          case 2:
+            countdown();
+            (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(e);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
   return /*#__PURE__*/React.createElement(Button, {
     onClick: start,
     disabled: disabled || isCounting,

package/dist/components/form/field/field.cjs

@@ -14,6 +14,7 @@ var framerMotion = require('framer-motion');
 var theme = require('../../theme/theme.cjs');
 var useClassNames = require('../../../hooks/use-class-names.cjs');
 var componentToken = require('../../../utils/component-token.cjs');
+var useLocale = require('../../../locale/use-locale.cjs');
 
 var _excluded = ["required", "children", "className", "style"];
 var styles = {
@@ -29,18 +30,22 @@ var styles = {
  * if there is name prop, it will render
  */
 var Field = function Field(_ref) {
+  var _props$label;
   var required = _ref.required,
     _children = _ref.children,
     className$1 = _ref.className,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Form);
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Form),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
   var _useController = reactHookForm.useController({
       name: props.name,
       rules: {
         required: {
           value: required,
-          message: "".concat(props.name, " is required")
+          message: relax.toFunction(locale.required)((_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : props.name)
         }
       }
     }),
@@ -71,7 +76,7 @@ var Field = function Field(_ref) {
       }, relax.isRefable(_child) && {
         ref: ref
       }))), true];
-    }, [[], false]);
+    }, [[], false]).at(0);
   }, [_children, name, value, invalid, ref, onChange, onBlur]);
   var styled = {
     supporting: stylex.default.props(styles.supporting, theme.typography.body.small)
@@ -81,7 +86,7 @@ var Field = function Field(_ref) {
     required: required,
     className: classNames[className.FormClassToken.Item]
   }, /*#__PURE__*/React.createElement("div", {
-    className: className$1,
+    className: relax.clsx(classNames[className.FormClassToken.Field], className$1),
     style: style
   }, children), /*#__PURE__*/React.createElement("div", {
     className: relax.clsx(classNames[className.FormClassToken.FieldSupporting], styled.supporting.className),

package/dist/components/form/field/field.mjs

@@ -3,7 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useMemo, Children, isValidElement, cloneElement } from 'react';
 import { useController } from 'react-hook-form';
-import { chain, isRefable, clsx } from '@aiszlab/relax';
+import { toFunction, chain, isRefable, clsx } from '@aiszlab/relax';
 import { FormClassToken } from '../../../utils/class-name.mjs';
 import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Layout from './layout.mjs';
@@ -12,6 +12,7 @@ import { AnimatePresence } from 'framer-motion';
 import { typography } from '../../theme/theme.mjs';
 import { useClassNames } from '../../../hooks/use-class-names.mjs';
 import { ComponentToken } from '../../../utils/component-token.mjs';
+import { useLocale } from '../../../locale/use-locale.mjs';
 
 var _excluded = ["required", "children", "className", "style"];
 var styles = {
@@ -27,18 +28,22 @@ var styles = {
  * if there is name prop, it will render
  */
 var Field = function Field(_ref) {
+  var _props$label;
   var required = _ref.required,
     _children = _ref.children,
     className = _ref.className,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames(ComponentToken.Form);
+  var _useLocale = useLocale(ComponentToken.Form),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
   var _useController = useController({
       name: props.name,
       rules: {
         required: {
           value: required,
-          message: "".concat(props.name, " is required")
+          message: toFunction(locale.required)((_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : props.name)
         }
       }
     }),
@@ -69,7 +74,7 @@ var Field = function Field(_ref) {
       }, isRefable(_child) && {
         ref: ref
       }))), true];
-    }, [[], false]);
+    }, [[], false]).at(0);
   }, [_children, name, value, invalid, ref, onChange, onBlur]);
   var styled = {
     supporting: _stylex.props(styles.supporting, typography.body.small)
@@ -79,7 +84,7 @@ var Field = function Field(_ref) {
     required: required,
     className: classNames[FormClassToken.Item]
   }, /*#__PURE__*/React.createElement("div", {
-    className: className,
+    className: clsx(classNames[FormClassToken.Field], className),
     style: style
   }, children), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[FormClassToken.FieldSupporting], styled.supporting.className),

package/dist/components/form/item.cjs

@@ -5,8 +5,12 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var React = require('react');
 var field = require('./field/field.cjs');
 var layout = require('./field/layout.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var relax = require('@aiszlab/relax');
+var className = require('../../utils/class-name.cjs');
 
-var _excluded = ["required"];
+var _excluded = ["required", "className", "style"];
 /**
  * @description
  * item render
@@ -14,9 +18,14 @@ var _excluded = ["required"];
 var Item = function Item(_ref) {
   var _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
+    className$1 = _ref.className,
+    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Form);
   if (props.name) {
     return /*#__PURE__*/React.createElement(field.default, _objectSpread(_objectSpread({}, props), {}, {
+      className: className$1,
+      style: style,
       name: props.name,
       required: required
     }));
@@ -26,10 +35,12 @@ var Item = function Item(_ref) {
     labelCol: props.labelCol,
     wrapperCol: props.wrapperCol,
     required: required,
-    className: props.className,
-    style: props.style,
-    space: true
-  }, props.children);
+    space: true,
+    className: classNames[className.FormClassToken.Item]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.FormClassToken.Field], className$1),
+    style: style
+  }, props.children));
 };
 
 exports.default = Item;

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

@@ -1,9 +1,9 @@
-import { FormItemProps } from "musae/types/form";
+import type { FormItemProps } from "musae/types/form";
 import React from "react";
 import type { FieldValues } from "react-hook-form";
 /**
  * @description
  * item render
  */
-declare const Item: <T extends FieldValues = FieldValues>({ required, ...props }: FormItemProps<T>) => React.JSX.Element;
+declare const Item: <T extends FieldValues = FieldValues>({ required, className, style, ...props }: FormItemProps<T>) => React.JSX.Element;
 export default Item;

package/dist/components/form/item.mjs

@@ -3,8 +3,12 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React from 'react';
 import Field from './field/field.mjs';
 import Layout from './field/layout.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { clsx } from '@aiszlab/relax';
+import { FormClassToken } from '../../utils/class-name.mjs';
 
-var _excluded = ["required"];
+var _excluded = ["required", "className", "style"];
 /**
  * @description
  * item render
@@ -12,9 +16,14 @@ var _excluded = ["required"];
 var Item = function Item(_ref) {
   var _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
+    className = _ref.className,
+    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames(ComponentToken.Form);
   if (props.name) {
     return /*#__PURE__*/React.createElement(Field, _objectSpread(_objectSpread({}, props), {}, {
+      className: className,
+      style: style,
       name: props.name,
       required: required
     }));
@@ -24,10 +33,12 @@ var Item = function Item(_ref) {
     labelCol: props.labelCol,
     wrapperCol: props.wrapperCol,
     required: required,
-    className: props.className,
-    style: props.style,
-    space: true
-  }, props.children);
+    space: true,
+    className: classNames[FormClassToken.Item]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx(classNames[FormClassToken.Field], className),
+    style: style
+  }, props.children));
 };
 
 export { Item as default };

package/dist/components/otp-input/hooks.cjs

@@ -28,10 +28,7 @@ var useValue = function useValue(_ref) {
     var changed = Array.from(values);
     changed[index] = otp;
     var changedValue = changed.join("");
-    if (relax.isUndefined(_value)) {
-      setValue(changedValue);
-      return;
-    }
+    setValue(changedValue);
     onChange === null || onChange === void 0 || onChange(changedValue);
   });
   return {

package/dist/components/otp-input/hooks.mjs

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useControlledState, useEvent, isUndefined } from '@aiszlab/relax';
+import { useControlledState, useEvent } from '@aiszlab/relax';
 import { useMemo } from 'react';
 import { Keyboard } from '../../utils/keyboard.mjs';
 
@@ -28,10 +28,7 @@ var useValue = function useValue(_ref) {
     var changed = Array.from(values);
     changed[index] = otp;
     var changedValue = changed.join("");
-    if (isUndefined(_value)) {
-      setValue(changedValue);
-      return;
-    }
+    setValue(changedValue);
     onChange === null || onChange === void 0 || onChange(changedValue);
   });
   return {

package/dist/components/otp-input/otp-input.cjs

@@ -11,7 +11,9 @@ var OtpInput = function OtpInput(_ref) {
   var _ref$length = _ref.length,
     length = _ref$length === void 0 ? 6 : _ref$length,
     onChange = _ref.onChange,
-    _value = _ref.value;
+    _value = _ref.value,
+    className = _ref.className,
+    style = _ref.style;
   var _useValue = hooks.useValue({
       length: length,
       onChange: onChange,
@@ -63,8 +65,8 @@ var OtpInput = function OtpInput(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styled.otp.className,
-    style: styled.otp.style
+    className: relax.clsx(styled.otp.className, className),
+    style: _objectSpread(_objectSpread({}, styled.otp.style), style)
   }, value.map(function (item, index) {
     return /*#__PURE__*/React.createElement(input.default, {
       key: index,

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { OtpInputProps } from "musae/types/otp-input";
-declare const OtpInput: ({ length, onChange, value: _value }: OtpInputProps) => React.JSX.Element;
+declare const OtpInput: ({ length, onChange, value: _value, className, style }: OtpInputProps) => React.JSX.Element;
 export default OtpInput;

package/dist/components/otp-input/otp-input.mjs

@@ -3,13 +3,15 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useState } from 'react';
 import { useValue, useInputEvents } from './hooks.mjs';
 import Input from '../input/input.mjs';
-import { useEvent, clamp } from '@aiszlab/relax';
+import { useEvent, clamp, clsx } from '@aiszlab/relax';
 
 var OtpInput = function OtpInput(_ref) {
   var _ref$length = _ref.length,
     length = _ref$length === void 0 ? 6 : _ref$length,
     onChange = _ref.onChange,
-    _value = _ref.value;
+    _value = _ref.value,
+    className = _ref.className,
+    style = _ref.style;
   var _useValue = useValue({
       length: length,
       onChange: onChange,
@@ -61,8 +63,8 @@ var OtpInput = function OtpInput(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styled.otp.className,
-    style: styled.otp.style
+    className: clsx(styled.otp.className, className),
+    style: _objectSpread(_objectSpread({}, styled.otp.style), style)
   }, value.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Input, {
       key: index,

package/dist/components/popconfirm/popconfirm.cjs

@@ -56,17 +56,17 @@ var styles = {
     $$css: true
   }
 };
-var Popconfirm = function Popconfirm(_ref2) {
-  var content = _ref2.content,
-    title = _ref2.title,
-    onConfirm = _ref2.onConfirm,
-    onCancel = _ref2.onCancel,
-    className$1 = _ref2.className,
-    _ref2$placement = _ref2.placement,
-    placement = _ref2$placement === void 0 ? "top" : _ref2$placement,
-    _children = _ref2.children,
-    style = _ref2.style;
-  var _ref = React.useRef(null);
+var Popconfirm = function Popconfirm(_ref) {
+  var content = _ref.content,
+    title = _ref.title,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel,
+    className$1 = _ref.className,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top" : _ref$placement,
+    _children = _ref.children,
+    style = _ref.style;
+  var ref = React.useRef(null);
   var _useBoolean = relax.useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isOpen = _useBoolean2[0],
@@ -74,7 +74,6 @@ var Popconfirm = function Popconfirm(_ref2) {
     turnOff = _useBoolean2$.turnOff,
     toggle = _useBoolean2$.toggle;
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Popconfirm);
-  var childRef = relax.useRefs(_ref, _children.props.ref);
   var popperRef = React.useRef(null);
   var theme$1 = hooks.useTheme();
   var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Popconfirm),
@@ -92,14 +91,22 @@ var Popconfirm = function Popconfirm(_ref2) {
     onCancel === null || onCancel === void 0 || onCancel();
     turnOff();
   });
-  // @ts-ignore
-  var children = /*#__PURE__*/React.cloneElement(_children, {
-    ref: childRef,
-    onClick: onClick
-  });
+  var children = React.useMemo(function () {
+    var props = {
+      ref: ref,
+      onClick: onClick
+    };
+    if (/*#__PURE__*/React.isValidElement(_children)) {
+      return /*#__PURE__*/React.cloneElement(_children, props);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      onClick: onClick
+    }, _children);
+  }, [ref, onClick, _children]);
   relax.useClickAway(function () {
     turnOff();
-  }, [popperRef, _ref]);
+  }, [popperRef, ref]);
   var styled = {
     popconfirm: {
       className: "musaex-2wmp0v musaex-16xn7b0 musaex-rvj5dj musaex-183ukxf musaex-1lsrmdg"
@@ -114,7 +121,7 @@ var Popconfirm = function Popconfirm(_ref2) {
     }
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(popper.default, {
-    trigger: _ref.current,
+    trigger: ref.current,
     open: isOpen,
     arrow: true,
     placement: placement,

package/dist/components/popconfirm/popconfirm.mjs

@@ -1,12 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useRef, cloneElement } from 'react';
+import React, { useRef, useMemo, isValidElement, cloneElement } from 'react';
 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 { useBoolean, useEvent, useClickAway, clsx } from '@aiszlab/relax';
 import Popper from '../popper/popper.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useTheme } from '../theme/hooks.mjs';
@@ -54,17 +54,17 @@ var styles = {
     $$css: true
   }
 };
-var Popconfirm = function Popconfirm(_ref2) {
-  var content = _ref2.content,
-    title = _ref2.title,
-    onConfirm = _ref2.onConfirm,
-    onCancel = _ref2.onCancel,
-    className = _ref2.className,
-    _ref2$placement = _ref2.placement,
-    placement = _ref2$placement === void 0 ? "top" : _ref2$placement,
-    _children = _ref2.children,
-    style = _ref2.style;
-  var _ref = useRef(null);
+var Popconfirm = function Popconfirm(_ref) {
+  var content = _ref.content,
+    title = _ref.title,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel,
+    className = _ref.className,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top" : _ref$placement,
+    _children = _ref.children,
+    style = _ref.style;
+  var ref = useRef(null);
   var _useBoolean = useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isOpen = _useBoolean2[0],
@@ -72,7 +72,6 @@ var Popconfirm = function Popconfirm(_ref2) {
     turnOff = _useBoolean2$.turnOff,
     toggle = _useBoolean2$.toggle;
   var classNames = useClassNames(ComponentToken.Popconfirm);
-  var childRef = useRefs(_ref, _children.props.ref);
   var popperRef = useRef(null);
   var theme = useTheme();
   var _useLocale = useLocale(ComponentToken.Popconfirm),
@@ -90,14 +89,22 @@ var Popconfirm = function Popconfirm(_ref2) {
     onCancel === null || onCancel === void 0 || onCancel();
     turnOff();
   });
-  // @ts-ignore
-  var children = /*#__PURE__*/cloneElement(_children, {
-    ref: childRef,
-    onClick: onClick
-  });
+  var children = useMemo(function () {
+    var props = {
+      ref: ref,
+      onClick: onClick
+    };
+    if (/*#__PURE__*/isValidElement(_children)) {
+      return /*#__PURE__*/cloneElement(_children, props);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      onClick: onClick
+    }, _children);
+  }, [ref, onClick, _children]);
   useClickAway(function () {
     turnOff();
-  }, [popperRef, _ref]);
+  }, [popperRef, ref]);
   var styled = {
     popconfirm: {
       className: "musaex-2wmp0v musaex-16xn7b0 musaex-rvj5dj musaex-183ukxf musaex-1lsrmdg"
@@ -112,7 +119,7 @@ var Popconfirm = function Popconfirm(_ref2) {
     }
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(Popper, {
-    trigger: _ref.current,
+    trigger: ref.current,
     open: isOpen,
     arrow: true,
     placement: placement,

package/dist/components/popover/hooks.cjs

@@ -60,5 +60,33 @@ var useIsOpen = function useIsOpen(popperRef) {
     disappear: disappear
   }];
 };
+/**
+ * @description
+ * used triggers
+ */
+var useTriggerBy = function useTriggerBy(triggerBy) {
+  var _triggerBy = React.useMemo(function () {
+    return new Set(relax.toArray(triggerBy));
+  }, [triggerBy]);
+  var isHoverable = React.useMemo(function () {
+    return _triggerBy.has("hover");
+  }, [_triggerBy]);
+  var isFocusable = React.useMemo(function () {
+    return _triggerBy.has("focus");
+  }, [_triggerBy]);
+  var isClickable = React.useMemo(function () {
+    return _triggerBy.has("click");
+  }, [_triggerBy]);
+  var isContextMenuable = React.useMemo(function () {
+    return _triggerBy.has("contextMenu");
+  }, [_triggerBy]);
+  return {
+    isHoverable: isHoverable,
+    isFocusable: isFocusable,
+    isClickable: isClickable,
+    isContextMenuable: isContextMenuable
+  };
+};
 
 exports.useIsOpen = useIsOpen;
+exports.useTriggerBy = useTriggerBy;

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/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.8",
+  "version": "0.3.9",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",