musae 0.2.26 → 0.3.0

package/dist/components/drawer/{popup.js → popup.mjs}

@@ -5,17 +5,17 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useRef, useEffect } from 'react';
 import { useAnimate } from 'framer-motion';
-import { PLACEMENTS } from './hooks.js';
-import { DrawerClassToken } 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 { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
+import { PLACEMENTS } from './hooks.mjs';
+import { DrawerClassToken } 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 { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { clsx } from '@aiszlab/relax';
-import { typography } from '../theme/theme.js';
+import { typography } from '../theme/theme.mjs';
 import { contains } from '@aiszlab/relax/dom';
-import { useClosable } from '../../hooks/use-closable.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useClosable } from '../../hooks/use-closable.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var _excluded = ["open", "onClose", "placement", "closable", "onClosed", "size", "className"];
 var styles = {
@@ -168,7 +168,7 @@ var Popup = function Popup(_ref) {
     onClosed = _ref.onClosed,
     size = _ref.size,
     className = _ref.className,
-    props$1 = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useAnimate = useAnimate(),
     _useAnimate2 = _slicedToArray(_useAnimate, 2),
     scope = _useAnimate2[0],
@@ -233,16 +233,16 @@ var Popup = function Popup(_ref) {
     popup: {
       className: "musaex-ixxii4 musaex-10a8y8t musaex-47corl musaex-1ub2ej"
     },
-    overlay: props(styles.overlay({
+    overlay: _stylex.props(styles.overlay({
       backgroundColor: theme.colors[ColorToken.SurfaceDim]
     })),
-    panel: props(styles.panel({
+    panel: _stylex.props(styles.panel({
       backgroundColor: theme.colors[ColorToken.OnPrimary],
       transform: _placement.at(0)
     }), styles[placement]({
       size: size
     })),
-    header: props(typography.body.large, styles.header),
+    header: _stylex.props(typography.body.large, styles.header),
     body: {
       className: "musaex-98rzlu musaex-ox8tdy"
     }
@@ -265,10 +265,10 @@ var Popup = function Popup(_ref) {
   }, closer, /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DrawerClassToken.Header], styled.header.className),
     style: styled.header.style
-  }, props$1.title), /*#__PURE__*/React.createElement("div", {
+  }, props.title), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[DrawerClassToken.Body], styled.body.className),
     style: styled.body.style
-  }, props$1.children)));
+  }, props.children)));
 };
 
 export { Popup as default };

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { Closable } from "../../hooks/use-closable";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 export type Placement = "right" | "left" | "top" | "bottom";
 /**
  * @description

package/dist/components/empty/empty.cjs

@@ -0,0 +1,66 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.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 theme = require('../theme/theme.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  label: {
+    marginTop: "musaex-11m1c1s",
+    $$css: true
+  }
+};
+/**
+ * @description
+ * empty component
+ */
+var Empty = function Empty() {
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Empty);
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Empty),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  var styled = {
+    empty: {
+      className: "musaex-78zum5 musaex-dt5ytf musaex-6s0dn4 musaex-u0799r musaex-1sn0kb9"
+    },
+    label: stylex.default.props(theme.typography.body.small, styles.label)
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.EmptyClassToken.Empty], styled.empty.className),
+    style: styled.empty.style
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "64",
+    height: "41",
+    viewBox: "0 0 64 41",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(0 1)",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("ellipse", {
+    fill: "#f5f5f5",
+    cx: "32",
+    cy: "33",
+    rx: "32",
+    ry: "7"
+  }), /*#__PURE__*/React.createElement("g", {
+    fillRule: "nonzero",
+    stroke: "#d9d9d9"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z",
+    fill: "#fafafa"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.EmptyClassToken.Description], styled.label.className),
+    style: styled.label.style
+  }, locale.placeholder));
+};
+
+exports.default = Empty;

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

@@ -1,12 +1,12 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { EmptyClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { EmptyClassToken } 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 { clsx } from '@aiszlab/relax';
-import { typography } from '../theme/theme.js';
-import { useLocale } from '../../locale/use-locale.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { typography } from '../theme/theme.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   label: {
@@ -27,7 +27,7 @@ var Empty = function Empty() {
     empty: {
       className: "musaex-78zum5 musaex-dt5ytf musaex-6s0dn4 musaex-u0799r musaex-1sn0kb9"
     },
-    label: props(typography.body.small, styles.label)
+    label: _stylex.props(typography.body.small, styles.label)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[EmptyClassToken.Empty], styled.empty.className),
@@ -60,6 +60,5 @@ var Empty = function Empty() {
     style: styled.label.style
   }, locale.placeholder));
 };
-var Empty$1 = Empty;
 
-export { Empty$1 as default };
+export { Empty as default };

package/dist/components/floating-action-button/floatable.cjs

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

package/dist/components/floating-action-button/{floatable.js → floatable.mjs}

@@ -3,10 +3,10 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useIdentity, useRefs } from '@aiszlab/relax';
 import { useDraggable, useDndMonitor } from '@dnd-kit/core';
 import React, { forwardRef, useRef, useState, useImperativeHandle } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import Button from '../button/button.js';
-import Portal from '../portal/portal.js';
-import { useContainer } from '../../hooks/use-container.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { Button } from '../button/button.mjs';
+import Portal from '../portal/portal.mjs';
+import { useContainer } from '../../hooks/use-container.mjs';
 
 var styles = {
   floatable: function floatable(props) {

package/dist/components/floating-action-button/floating-action-button.cjs

@@ -0,0 +1,39 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var floatable = require('./floatable.cjs');
+var modifiers = require('@dnd-kit/modifiers');
+var relax = require('@aiszlab/relax');
+var useContainer = require('../../hooks/use-container.cjs');
+
+var FloatingActionButton = function FloatingActionButton(_ref) {
+  var container = _ref.container,
+    children = _ref.children;
+  var _useIdentity = relax.useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 1),
+    id = _useIdentity2[0];
+  var floatableRef = React.useRef(null);
+  var _useContainer = useContainer.useContainer({
+      container: container
+    }),
+    _container = _useContainer.container;
+  var modifier = relax.useEvent(function (args) {
+    var _floatableRef$current;
+    var clientRect = (_floatableRef$current = floatableRef.current) === null || _floatableRef$current === void 0 ? void 0 : _floatableRef$current.getBoundingClientRect();
+    return modifiers.restrictToParentElement(_objectSpread(_objectSpread({}, args), !!clientRect && {
+      draggingNodeRect: clientRect
+    }));
+  });
+  return /*#__PURE__*/React.createElement(core.DndContext, {
+    id: id,
+    modifiers: [modifier]
+  }, /*#__PURE__*/React.createElement(floatable.default, {
+    ref: floatableRef,
+    container: _container
+  }, children));
+};
+
+exports.default = FloatingActionButton;

package/dist/components/floating-action-button/{floating-action-button.js → floating-action-button.mjs}

@@ -2,10 +2,10 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef } from 'react';
 import { DndContext } from '@dnd-kit/core';
-import Floatable from './floatable.js';
+import Floatable from './floatable.mjs';
 import { restrictToParentElement } from '@dnd-kit/modifiers';
 import { useIdentity, useEvent } from '@aiszlab/relax';
-import { useContainer } from '../../hooks/use-container.js';
+import { useContainer } from '../../hooks/use-container.mjs';
 
 var FloatingActionButton = function FloatingActionButton(_ref) {
   var container = _ref.container,
@@ -33,6 +33,5 @@ var FloatingActionButton = function FloatingActionButton(_ref) {
     container: _container
   }, children));
 };
-var FloatingActionButton$1 = FloatingActionButton;
 
-export { FloatingActionButton$1 as default };
+export { FloatingActionButton as default };

package/dist/components/form/context.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var CONTEXT_VALUE = {
+  labelCol: 24,
+  wrapperCol: 24
+};
+var Context = /*#__PURE__*/React.createContext(CONTEXT_VALUE);
+
+exports.CONTEXT_VALUE = CONTEXT_VALUE;
+exports.default = Context;

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

@@ -1,4 +1,4 @@
-import { ContextValue } from "./types";
+import { ContextValue } from "musae/types/form";
 export declare const CONTEXT_VALUE: Readonly<ContextValue>;
 declare const Context: import("react").Context<ContextValue>;
 export default Context;

package/dist/components/form/{context.js → context.mjs}

@@ -5,6 +5,5 @@ var CONTEXT_VALUE = {
   wrapperCol: 24
 };
 var Context = /*#__PURE__*/createContext(CONTEXT_VALUE);
-var Context$1 = Context;
 
-export { CONTEXT_VALUE, Context$1 as default };
+export { CONTEXT_VALUE, Context as default };

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

@@ -0,0 +1,74 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var className = require('../../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var framerMotion = require('framer-motion');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../../hooks/use-class-names.cjs');
+var hooks = require('../../theme/hooks.cjs');
+var colors = require('../../../utils/colors.cjs');
+var componentToken = require('../../../utils/component-token.cjs');
+
+var styles = {
+  error: function error(props) {
+    return [{
+      paddingInline: "musaex-y0sash",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      color: "musaex-19dipnz",
+      height: "musaex-qtp20y",
+      overflow: "musaex-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }];
+  }
+};
+var Error = function Error(_ref) {
+  var error = _ref.error,
+    className$1 = _ref.className,
+    style = _ref.style;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Form);
+  var _useAnimate = framerMotion.useAnimate(),
+    _useAnimate2 = _slicedToArray(_useAnimate, 2),
+    scope = _useAnimate2[0],
+    animate = _useAnimate2[1];
+  var _usePresence = framerMotion.usePresence(),
+    _usePresence2 = _slicedToArray(_usePresence, 2),
+    isPresent = _usePresence2[0],
+    safeToRemove = _usePresence2[1];
+  var theme = hooks.useTheme();
+  React.useEffect(function () {
+    if (isPresent) {
+      animate(scope.current, {
+        height: "auto"
+      }, {
+        duration: 0.2
+      });
+      return;
+    }
+    animate(scope.current, {
+      height: 0
+    }).then(function () {
+      safeToRemove();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isPresent]);
+  var styled = stylex.default.props(styles.error({
+    color: theme.colors[colors.ColorToken.Error]
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.FormClassToken.FieldError], className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style),
+    ref: scope
+  }, /*#__PURE__*/React.createElement("p", null, error === null || error === void 0 ? void 0 : error.message));
+};
+
+exports.default = Error;

package/dist/components/form/field/error.d.ts

@@ -1,5 +1,5 @@
 import { type FieldError } from "react-hook-form";
-import type { ComponentProps } from "../../../types/element";
+import type { ComponentProps } from "musae/types/element";
 import React from "react";
 type Props = ComponentProps & {
     /**

package/dist/components/form/field/{error.js → error.mjs}

@@ -1,14 +1,14 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useEffect } from 'react';
-import { FormClassToken } from '../../../utils/class-name.js';
+import { FormClassToken } from '../../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
 import { useAnimate, usePresence } from 'framer-motion';
-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 { useTheme } from '../../theme/hooks.js';
-import { ColorToken } from '../../../utils/colors.js';
-import { ComponentToken } from '../../../utils/component-token.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 { useTheme } from '../../theme/hooks.mjs';
+import { ColorToken } from '../../../utils/colors.mjs';
+import { ComponentToken } from '../../../utils/component-token.mjs';
 
 var styles = {
   error: function error(props) {

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

@@ -0,0 +1,96 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var relax = require('@aiszlab/relax');
+var className = require('../../../utils/class-name.cjs');
+var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var layout = require('./layout.cjs');
+var error = require('./error.cjs');
+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 _excluded = ["required", "children", "className", "style"];
+var styles = {
+  supporting: {
+    minHeight: "musaex-1ite1z3",
+    paddingBlock: "musaex-1i37kmv",
+    $$css: true
+  }
+};
+/**
+ * @description
+ * form item may not has name prop
+ * if there is name prop, it will render
+ */
+var Field = function Field(_ref) {
+  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 _useController = reactHookForm.useController({
+      name: props.name,
+      rules: {
+        required: {
+          value: required,
+          message: "".concat(props.name, " is required")
+        }
+      }
+    }),
+    _useController$field = _useController.field,
+    onBlur = _useController$field.onBlur,
+    onChange = _useController$field.onChange,
+    name = _useController$field.name,
+    value = _useController$field.value,
+    ref = _useController$field.ref,
+    _useController$fieldS = _useController.fieldState,
+    invalid = _useController$fieldS.invalid,
+    error$1 = _useController$fieldS.error;
+  var children = React.useMemo(function () {
+    return React.Children.toArray(_children).reduce(function (_ref2, _child) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        _clonedChildren = _ref3[0],
+        isBound = _ref3[1];
+      if (isBound || ! /*#__PURE__*/React.isValidElement(_child)) {
+        return [_clonedChildren.concat(_child), isBound];
+      }
+      // registe react hook form
+      return [_clonedChildren.concat(/*#__PURE__*/React.cloneElement(_child, _objectSpread({
+        name: name,
+        value: value,
+        invalid: invalid,
+        onChange: relax.chain(_child.props.onChange, onChange),
+        onBlur: relax.chain(_child.props.onBlur, onBlur)
+      }, relax.isRefable(_child) && {
+        ref: ref
+      }))), true];
+    }, [[], false]);
+  }, [_children, name, value, invalid, ref, onChange, onBlur]);
+  var styled = {
+    supporting: stylex.default.props(styles.supporting, theme.typography.body.small)
+  };
+  return /*#__PURE__*/React.createElement(layout.default, {
+    label: props.label,
+    required: required,
+    className: classNames[className.FormClassToken.Item]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className$1,
+    style: style
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.FormClassToken.FieldSupporting], styled.supporting.className),
+    style: styled.supporting.style
+  }, /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, {
+    mode: "wait"
+  }, invalid && /*#__PURE__*/React.createElement(error.default, {
+    error: error$1
+  }))));
+};
+
+exports.default = Field;

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

@@ -1,10 +1,10 @@
 import React from "react";
-import type { FormItemProps } from "../types";
+import type { FormItemProps } from "musae/types/form";
 import type { RequiredIn } from "@aiszlab/relax/types";
 /**
  * @description
  * form item may not has name prop
  * if there is name prop, it will render
  */
-declare const Field: ({ required, children: _children, ...props }: RequiredIn<FormItemProps, "name" | "required">) => React.JSX.Element;
+declare const Field: ({ required, children: _children, className, style, ...props }: RequiredIn<FormItemProps, "name" | "required">) => React.JSX.Element;
 export default Field;