@lobehub/ui 1.170.8 → 2.0.0

package/es/Form/components/FormFlatGroup.js

@@ -10,32 +10,45 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { useResponsive } from 'antd-style';
-import { memo } from 'react';
+import { cva } from 'class-variance-authority';
+import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { useStyles } from "./FormGroup";
+import { useFlatGroupStyles as useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var FormFlatGroup = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     children = _ref.children,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    variant = _ref$variant === void 0 ? 'borderless' : _ref$variant,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
   var _useStyles = useStyles(variant),
     cx = _useStyles.cx,
-    styles = _useStyles.styles,
-    prefixCls = _useStyles.prefixCls;
-  var groupClassName = "".concat(prefixCls, "-form-group");
-  var variantStyle = cx(variant === 'default' && styles.defaultStyle, variant === 'block' && styles.blockStyle, variant === 'ghost' && styles.ghostStyle, variant === 'pure' && styles.pureStyle);
-  return mobile ? /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
-    className: cx(groupClassName, styles.mobileFlatGroup, styles.mobileGroupBody, className)
-  }, rest), {}, {
-    children: children
-  })) : /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
-    className: cx(groupClassName, styles.flatGroup, variantStyle, className)
+    styles = _useStyles.styles;
+  var vriants = useMemo(function () {
+    return cva(styles.root, {
+      defaultVariants: {
+        variant: 'borderless'
+      },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      variants: {
+        variant: {
+          filled: styles.filled,
+          outlined: styles.outlined,
+          borderless: styles.borderless
+        }
+      }
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    });
+  }, [styles]);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: cx(mobile ? styles.mobile : vriants({
+      variant: variant
+    }), className)
   }, rest), {}, {
     children: children
   }));
 });
+FormFlatGroup.displayName = 'FormFlatGroup';
 export default FormFlatGroup;

package/es/Form/components/FormFooter.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-import { type DivProps } from "../../types";
-export type FormFooterProps = DivProps;
-declare const FormFooter: import("react").NamedExoticComponent<DivProps>;
+declare const FormFooter: import("react").NamedExoticComponent<import("../..").DivProps>;
 export default FormFooter;

package/es/Form/components/FormFooter.js

@@ -2,7 +2,6 @@
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["className", "children"];
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,29 +9,20 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { useFooterStyles as useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token,
-    responsive = _ref.responsive;
-  return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", " {\n        padding: 16px;\n        background: ", ";\n        border-block-start: 1px solid ", ";\n      }\n    "])), responsive.mobile, token.colorBgContainer, token.colorBorderSecondary)
-  };
-});
-var FormFooter = /*#__PURE__*/memo(function (_ref2) {
-  var className = _ref2.className,
-    children = _ref2.children,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+var FormFooter = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
-    className: cx(styles.container, className),
+    className: cx(styles.root, className),
     gap: 8,
     horizontal: true,
     justify: 'flex-end'
@@ -40,4 +30,5 @@ var FormFooter = /*#__PURE__*/memo(function (_ref2) {
     children: children
   }));
 });
+FormFooter.displayName = 'FormFooter';
 export default FormFooter;

package/es/Form/components/FormGroup.d.ts

@@ -1,44 +1,4 @@
-import { type ReactNode } from 'react';
-import { type CollapseProps } from "../../Collapse";
-import type { FormItemProps } from "./FormItem";
-import { type IconProps } from "../../Icon";
-export type FormVariant = 'default' | 'block' | 'ghost' | 'pure';
-export type ItemsType = 'group' | 'flat';
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    blockStyle: import("antd-style").SerializedStyles;
-    defaultStyle: import("antd-style").SerializedStyles;
-    flatGroup: import("antd-style").SerializedStyles;
-    ghostStyle: import("antd-style").SerializedStyles;
-    icon: import("antd-style").SerializedStyles;
-    mobileFlatGroup: import("antd-style").SerializedStyles;
-    mobileGroupBody: import("antd-style").SerializedStyles;
-    mobileGroupHeader: import("antd-style").SerializedStyles;
-    pure: import("antd-style").SerializedStyles;
-    pureStyle: import("antd-style").SerializedStyles;
-    pureTitle: import("antd-style").SerializedStyles;
-    title: import("antd-style").SerializedStyles;
-}>;
-export interface ItemGroup {
-    children: FormItemProps[] | ReactNode;
-    collapsible?: boolean;
-    defaultActive?: boolean;
-    extra?: ReactNode;
-    icon?: IconProps['icon'];
-    key?: string;
-    title: ReactNode;
-    variant?: FormVariant;
-}
-export interface FormGroupProps extends Omit<CollapseProps, 'collapsible' | 'items' | 'defaultActiveKey' | 'activeKey'> {
-    active?: boolean;
-    children: ReactNode;
-    collapsible?: boolean;
-    defaultActive?: boolean;
-    extra?: ReactNode;
-    icon?: IconProps['icon'];
-    keyValue?: string | number;
-    onCollapse?: (active: boolean) => void;
-    title?: ReactNode;
-    variant?: FormVariant;
-}
+/// <reference types="react" />
+import type { FormGroupProps } from '../type';
 declare const FormGroup: import("react").NamedExoticComponent<FormGroupProps>;
 export default FormGroup;

package/es/Form/components/FormGroup.js

@@ -1,8 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "icon", "title", "children", "extra", "variant", "defaultActive", "collapsible", "active", "keyValue", "onCollapse"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _excluded = ["className", "icon", "title", "children", "extra", "variant", "defaultActive", "collapsible", "active", "keyValue", "onCollapse", "desc"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,64 +9,60 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles, useResponsive } from 'antd-style';
+import { useResponsive } from 'antd-style';
+import { cva } from 'class-variance-authority';
 import { isUndefined } from 'lodash-es';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Collapse from "../../Collapse";
 import Icon from "../../Icon";
+import { useGroupStyles as useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var useStyles = createStyles(function (_ref) {
-  var prefixCls = _ref.prefixCls,
-    css = _ref.css,
-    token = _ref.token,
-    responsive = _ref.responsive;
-  return {
-    blockStyle: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background: ", ";\n      border: none;\n      border-radius: ", "px;\n    "])), token.colorFillQuaternary, token.borderRadiusLG),
-    defaultStyle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n    "])), token.colorFillQuaternary, token.colorBorderSecondary, token.borderRadiusLG),
-    flatGroup: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      padding-inline: 16px;\n    "]))),
-    ghostStyle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background: transparent;\n      border: 1px solid ", ";\n      border-radius: ", "px;\n    "])), token.colorBorderSecondary, token.borderRadiusLG),
-    icon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      transition: all 100ms ", ";\n    "])), token.motionEaseOut),
-    mobileFlatGroup: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      border-radius: 0;\n    "]))),
-    mobileGroupBody: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      padding-block: 0;\n      padding-inline: 16px;\n      background: ", ";\n    "])), token.colorBgContainer),
-    mobileGroupHeader: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      padding: 16px;\n      background: ", ";\n    "])), token.colorBgLayout),
-    pure: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      .", "-collapse-content-box {\n        .", "-form-item:first-child {\n          border-block-start: 1px solid ", ";\n        }\n      }\n    "])), prefixCls, prefixCls, token.colorFillSecondary),
-    pureStyle: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      padding: 0;\n      background: transparent;\n      border: none;\n      border-radius: 0;\n    "]))),
-    pureTitle: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      font-size: 18px;\n      font-weight: 700;\n      line-height: 24px;\n    "]))),
-    title: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      align-items: center;\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n\n      ", " {\n        font-size: 14px;\n        font-weight: 400;\n        opacity: 0.5;\n      }\n    "])), token.colorPrimary, responsive.mobile)
-  };
-});
-var FormGroup = /*#__PURE__*/memo(function (_ref2) {
-  var className = _ref2.className,
-    icon = _ref2.icon,
-    title = _ref2.title,
-    children = _ref2.children,
-    extra = _ref2.extra,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
-    _ref2$defaultActive = _ref2.defaultActive,
-    defaultActive = _ref2$defaultActive === void 0 ? true : _ref2$defaultActive,
-    collapsible = _ref2.collapsible,
-    active = _ref2.active,
-    _ref2$keyValue = _ref2.keyValue,
-    keyValue = _ref2$keyValue === void 0 ? 'group' : _ref2$keyValue,
-    onCollapse = _ref2.onCollapse,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+var FormGroup = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    icon = _ref.icon,
+    title = _ref.title,
+    children = _ref.children,
+    extra = _ref.extra,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'borderless' : _ref$variant,
+    _ref$defaultActive = _ref.defaultActive,
+    defaultActive = _ref$defaultActive === void 0 ? true : _ref$defaultActive,
+    collapsible = _ref.collapsible,
+    active = _ref.active,
+    _ref$keyValue = _ref.keyValue,
+    keyValue = _ref$keyValue === void 0 ? 'group' : _ref$keyValue,
+    onCollapse = _ref.onCollapse,
+    desc = _ref.desc,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
   var _useStyles = useStyles(variant),
     cx = _useStyles.cx,
-    styles = _useStyles.styles,
-    prefixCls = _useStyles.prefixCls;
-  var groupClassName = "".concat(prefixCls, "-form-group");
-  var groupTitleClassName = "".concat(prefixCls, "-form-group-title");
-  var groupHeaderClassName = "".concat(prefixCls, "-form-group-header");
-  var groupContentClassName = "".concat(prefixCls, "-form-group-content");
-  var defaultCollapsible = isUndefined(collapsible) ? variant !== 'pure' : collapsible;
+    styles = _useStyles.styles;
+  var isBorderless = variant === 'borderless';
+  var defaultCollapsible = isUndefined(collapsible) ? !isBorderless : collapsible;
+  var titleVariants = useMemo(function () {
+    return cva(styles.title, {
+      defaultVariants: {
+        variant: 'borderless'
+      },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      variants: {
+        variant: {
+          filled: null,
+          outlined: null,
+          borderless: styles.titleBorderless
+        }
+      }
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    });
+  }, [styles]);
   var titleContent = /*#__PURE__*/_jsxs(Flexbox, {
-    className: cx(groupTitleClassName, styles.title, variant === 'pure' && styles.pureTitle),
+    className: cx(titleVariants({
+      variant: variant
+    }), styles.titleMobile),
     gap: 8,
     horizontal: true,
     children: [icon && /*#__PURE__*/_jsx(Icon, {
@@ -75,27 +70,33 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
     }), title]
   });
   if (mobile) return /*#__PURE__*/_jsxs(Flexbox, {
-    className: cx(groupClassName, className),
+    className: className,
     children: [/*#__PURE__*/_jsxs(Flexbox, {
-      className: cx(groupHeaderClassName, styles.mobileGroupHeader),
+      className: styles.mobileGroupHeader,
       horizontal: true,
       justify: 'space-between',
       children: [titleContent, extra]
     }), /*#__PURE__*/_jsx("div", {
-      className: cx(groupContentClassName, styles.mobileGroupBody),
+      className: styles.mobileGroupBody,
       children: children
     })]
   });
   return /*#__PURE__*/_jsx(Collapse, _objectSpread({
     activeKey: isUndefined(active) ? undefined : active ? [keyValue] : [],
-    className: cx(groupClassName, variant === 'pure' && styles.pure, className),
+    className: className,
+    classNames: {
+      header: variant === 'borderless' ? styles.titleBorderless : undefined,
+      title: variant === 'borderless' ? styles.titleBorderless : undefined
+    },
     collapsible: defaultCollapsible,
     defaultActiveKey: defaultActive ? [keyValue] : undefined,
     items: [{
       children: children,
+      desc: desc,
       extra: extra,
+      icon: icon,
       key: keyValue,
-      label: titleContent
+      label: title
     }],
     onChange: function onChange(v) {
       return onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(v.length > 0);
@@ -103,4 +104,5 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
     variant: variant
   }, rest));
 });
+FormGroup.displayName = 'FormGroup';
 export default FormGroup;

package/es/Form/components/FormItem.d.ts

@@ -1,23 +1,4 @@
 /// <reference types="react" />
-import { FormItemProps as AntdFormItemProps } from 'antd';
-import { FormVariant } from "./FormGroup";
-import { type FormTitleProps } from './FormTitle';
-export declare const useStyles: (props?: {
-    minWidth?: string | number | undefined;
-} | undefined) => import("antd-style").ReturnStyles<{
-    item: import("antd-style").SerializedStyles;
-    itemMinWidth: import("antd-style").SerializedStyles;
-    itemNoDivider: import("antd-style").SerializedStyles;
-    verticalLayout: import("antd-style").SerializedStyles;
-}>;
-export interface FormItemProps extends AntdFormItemProps {
-    avatar?: FormTitleProps['avatar'];
-    desc?: FormTitleProps['desc'];
-    divider?: boolean;
-    hidden?: boolean;
-    minWidth?: string | number;
-    tag?: FormTitleProps['tag'];
-    variant?: FormVariant;
-}
+import type { FormItemProps } from '../type';
 declare const FormItem: import("react").NamedExoticComponent<FormItemProps>;
 export default FormItem;

package/es/Form/components/FormItem.js

@@ -2,7 +2,6 @@
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["desc", "tag", "minWidth", "avatar", "className", "label", "children", "divider", "layout", "variant"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,54 +9,67 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { Form } from 'antd';
-import { createStyles } from 'antd-style';
-import { isNumber } from 'lodash-es';
-import { memo } from 'react';
+import { cva } from 'class-variance-authority';
+import { memo, useMemo } from 'react';
+import { useItemStyles as useStyles } from "../style";
 import FormDivider from "./FormDivider";
 import FormTitle from "./FormTitle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Item = Form.Item;
-export var useStyles = createStyles(function (_ref, _ref2) {
-  var css = _ref.css,
-    responsive = _ref.responsive,
-    prefixCls = _ref.prefixCls;
-  var minWidth = _ref2.minWidth;
-  return {
-    item: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      &.", "-form-item {\n        padding-block: 16px;\n        padding-inline: 0;\n\n        .", "-form-item-label {\n          text-align: start;\n        }\n\n        .", "-row {\n          gap: 12px;\n          justify-content: space-between;\n\n          > div {\n            flex: unset;\n            flex-grow: unset;\n          }\n        }\n\n        .", "-form-item-required::before {\n          align-self: flex-start;\n        }\n\n        ", " {\n          .", "-row {\n            flex-direction: column;\n            align-items: stretch;\n\n            > div {\n              width: 100%;\n            }\n          }\n        }\n\n        ", " {\n          padding-block: 16px;\n          padding-inline: 0;\n\n          .", "-row {\n            flex-wrap: wrap;\n            gap: 4px;\n          }\n        }\n      }\n    "])), prefixCls, prefixCls, prefixCls, prefixCls, responsive.md, prefixCls, responsive.mobile, prefixCls),
-    itemMinWidth: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      .", "-form-item-control {\n        width: ", ";\n      }\n      ", " {\n        .", "-row {\n          flex-direction: column;\n          gap: 4px;\n        }\n\n        .", "-form-item-control {\n          flex: 1;\n          width: 100%;\n        }\n      }\n    "])), prefixCls, isNumber(minWidth) ? "".concat(minWidth, "px") : minWidth, responsive.mobile, prefixCls, prefixCls),
-    itemNoDivider: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      &:not(:first-child) {\n        padding-block-start: 0;\n      }\n    "]))),
-    verticalLayout: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      &.", "-form-item {\n        .", "-row {\n          align-items: stretch;\n        }\n      }\n    "])), prefixCls, prefixCls)
-  };
-});
-var FormItem = /*#__PURE__*/memo(function (_ref3) {
-  var desc = _ref3.desc,
-    tag = _ref3.tag,
-    minWidth = _ref3.minWidth,
-    avatar = _ref3.avatar,
-    className = _ref3.className,
-    label = _ref3.label,
-    children = _ref3.children,
-    divider = _ref3.divider,
-    layout = _ref3.layout,
-    variant = _ref3.variant,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+var FormItem = /*#__PURE__*/memo(function (_ref) {
+  var desc = _ref.desc,
+    tag = _ref.tag,
+    minWidth = _ref.minWidth,
+    avatar = _ref.avatar,
+    className = _ref.className,
+    label = _ref.label,
+    children = _ref.children,
+    divider = _ref.divider,
+    layout = _ref.layout,
+    variant = _ref.variant,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       minWidth: minWidth
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  var isVertical = layout === 'vertical';
+  var variants = useMemo(function () {
+    return cva(styles.root, {
+      defaultVariants: {
+        divider: false,
+        itemMinWidth: false,
+        layout: 'vertical'
+      },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      variants: {
+        itemMinWidth: {
+          true: styles.itemMinWidth,
+          false: null
+        },
+        divider: {
+          true: null,
+          false: styles.itemNoDivider
+        },
+        layout: {
+          vertical: styles.verticalLayout,
+          horizontal: null
+        }
+      }
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    });
+  }, [styles]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [divider && /*#__PURE__*/_jsx(FormDivider, {
-      style: {
-        opacity: variant === 'pure' ? 0 : undefined
-      }
+      visible: variant !== 'borderless'
     }), /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({
-      className: cx(styles.item, Boolean(minWidth) && styles.itemMinWidth, !divider && styles.itemNoDivider, isVertical && styles.verticalLayout, className),
+      className: cx(variants({
+        divider: divider,
+        itemMinWidth: Boolean(minWidth),
+        layout: layout
+      }), className),
       label: /*#__PURE__*/_jsx(FormTitle, {
         avatar: avatar,
         desc: desc,
@@ -70,4 +82,5 @@ var FormItem = /*#__PURE__*/memo(function (_ref3) {
     }))]
   });
 });
+FormItem.displayName = 'FormItem';
 export default FormItem;

package/es/Form/components/FormProvider.js

@@ -1,14 +1,16 @@
-import { createContext, memo, useContext } from 'react';
+'use client';
+
+import { createContext, memo, use } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var FormContext = /*#__PURE__*/createContext({});
 export var FormProvider = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     config = _ref.config;
-  return /*#__PURE__*/_jsx(FormContext.Provider, {
+  return /*#__PURE__*/_jsx(FormContext, {
     value: config,
     children: children
   });
 });
 export var useFormContext = function useFormContext() {
-  return useContext(FormContext);
+  return use(FormContext);
 };

package/es/Form/components/FormSubmitFooter.d.ts

@@ -1,21 +1,4 @@
-import { type ButtonProps } from 'antd';
-import { ReactNode } from 'react';
-import { FlexboxProps } from 'react-layout-kit';
-export interface FormSubmitFooterProps extends FlexboxProps {
-    buttonProps?: Omit<ButtonProps, 'children'>;
-    children?: ReactNode;
-    enableReset?: boolean;
-    enableUnsavedWarning?: boolean;
-    float?: boolean;
-    onReset?: () => void;
-    resetButtonProps?: Omit<ButtonProps, 'children'>;
-    saveButtonProps?: Omit<ButtonProps, 'children'>;
-    texts?: {
-        reset?: string;
-        submit?: string;
-        unSaved?: string;
-        unSavedWarning?: string;
-    };
-}
+/// <reference types="react" />
+import type { FormSubmitFooterProps } from '../type';
 declare const FormSubmitFooter: import("react").NamedExoticComponent<FormSubmitFooterProps>;
 export default FormSubmitFooter;