@lobehub/ui 1.154.1 → 1.155.1

package/es/Collapse/index.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { CollapseProps as AntdCollapseProps } from 'antd';
 export type Variant = 'default' | 'block' | 'ghost' | 'pure';
-export interface CollapseProps extends AntdCollapseProps {
+export interface CollapseProps extends Omit<AntdCollapseProps, 'collapsible'> {
+    collapsible?: boolean;
     gap?: number;
     padding?: number | string | {
         body?: number | string;

package/es/Collapse/index.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "variant", "gap", "className", "padding"];
+var _excluded = ["style", "variant", "gap", "className", "padding", "collapsible"];
 import { Collapse as AntdCollapse } from 'antd';
 import { ChevronDown } from 'lucide-react';
 import { memo } from 'react';
@@ -16,12 +16,14 @@ var Collapse = /*#__PURE__*/memo(function (_ref) {
     gap = _ref$gap === void 0 ? 0 : _ref$gap,
     className = _ref.className,
     padding = _ref.padding,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? true : _ref$collapsible,
     rest = _objectWithoutProperties(_ref, _excluded);
   var bodyPadding = _typeof(padding) === 'object' ? padding.body : padding;
   var headerPadding = _typeof(padding) === 'object' ? padding.header : padding;
   var _useStyles = useStyles({
-      bodyPadding: bodyPadding === undefined ? '12px 16px' : bodyPadding,
-      headerPadding: headerPadding === undefined ? '12px 16px' : headerPadding,
+      bodyPadding: bodyPadding,
+      headerPadding: headerPadding,
       isSplit: !!gap
     }),
     cx = _useStyles.cx,
@@ -29,7 +31,7 @@ var Collapse = /*#__PURE__*/memo(function (_ref) {
   var variantStyle = cx(variant === 'default' && styles.defaultStyle, variant === 'block' && styles.blockStyle, variant === 'ghost' && styles.ghostStyle, variant === 'pure' && styles.pureStyle);
   return /*#__PURE__*/_jsx(AntdCollapse, _objectSpread({
     bordered: !gap && (variant === 'default' || variant === 'ghost'),
-    className: cx(styles.group, variantStyle, className),
+    className: cx(styles.group, !collapsible && styles.hideCollapsibleIcon, variantStyle, className),
     expandIcon: function expandIcon(_ref2) {
       var isActive = _ref2.isActive;
       return /*#__PURE__*/_jsx(Icon, {

package/es/Collapse/style.d.ts

@@ -1,13 +1,14 @@
 export declare const useStyles: (props?: {
-    bodyPadding: number | string;
-    headerPadding: number | string;
-    isSplit: boolean;
+    bodyPadding?: string | number | undefined;
+    headerPadding?: string | number | undefined;
+    isSplit?: boolean | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
     blockStyle: string;
     defaultStyle: string;
     flatGroup: import("antd-style").SerializedStyles;
     ghostStyle: string;
     group: string;
+    hideCollapsibleIcon: import("antd-style").SerializedStyles;
     icon: import("antd-style").SerializedStyles;
     pureStyle: import("antd-style").SerializedStyles;
 }>;

package/es/Collapse/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
@@ -8,8 +8,10 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     isDarkMode = _ref.isDarkMode,
     prefixCls = _ref.prefixCls;
   var isSplit = _ref2.isSplit,
-    bodyPadding = _ref2.bodyPadding,
-    headerPadding = _ref2.headerPadding;
+    _ref2$bodyPadding = _ref2.bodyPadding,
+    bodyPadding = _ref2$bodyPadding === void 0 ? '12px 16px' : _ref2$bodyPadding,
+    _ref2$headerPadding = _ref2.headerPadding,
+    headerPadding = _ref2$headerPadding === void 0 ? '12px 16px' : _ref2$headerPadding;
   var pureStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background: transparent;\n      border-radius: 0;\n\n      .", "-collapse-header {\n        padding-inline: 0 !important;\n        background: transparent !important;\n      }\n\n      .", "-collapse-content {\n        background: transparent;\n        border-color: ", ";\n      }\n\n      .", "-collapse-content-box {\n        padding-inline: 2px !important;\n        background: transparent;\n        border-radius: 0;\n      }\n    "])), prefixCls, prefixCls, token.colorFillSecondary, prefixCls);
   var blockStyle = cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        background: transparent !important;\n        .", "-collapse-item {\n          background: ", " !important;\n        }\n\n        .", "-collapse-header {\n          background: ", " !important;\n        }\n      "])), prefixCls, token.colorFillQuaternary, prefixCls, token.colorFillTertiary), isSplit ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            .", "-collapse-item {\n              overflow: hidden;\n              border-radius: ", "px !important;\n            }\n          "])), prefixCls, token.borderRadiusLG) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            border-radius: ", "px;\n          "])), token.borderRadiusLG));
   var ghostStyle = cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background: transparent;\n\n        .", "-collapse-header {\n          background: transparent !important;\n        }\n\n        .", "-collapse-content-box {\n          background: transparent;\n        }\n      "])), prefixCls, prefixCls), isSplit ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            .", "-collapse-item {\n              overflow: hidden;\n              border: 1px solid ", " !important;\n              border-radius: ", "px !important;\n              &.", "-collapse-item-active {\n                .", "-collapse-content-box {\n                  border-block-start: 1px solid ", " !important;\n                }\n              }\n            }\n          "])), prefixCls, token.colorBorderSecondary, token.borderRadiusLG, prefixCls, prefixCls, token.colorBorderSecondary) : css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            .", "-collapse-item:not(:first-child) {\n              .", "-collapse-header {\n                border-block-start: 1px solid ", ";\n              }\n            }\n          "])), prefixCls, prefixCls, token.colorBorderSecondary));
@@ -20,7 +22,8 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     flatGroup: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        padding-inline: 16px;\n      "]))),
     ghostStyle: ghostStyle,
     group: cx(isDarkMode && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            .", "-collapse-content {\n              background: transparent;\n              border-color: ", ";\n            }\n\n            .", "-collapse-header {\n              background: ", ";\n            }\n          "])), prefixCls, token.colorBorderSecondary, prefixCls, token.colorFillTertiary), css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          display: flex;\n          flex: none;\n          flex-direction: column;\n\n          .", "-collapse-item {\n            border: none;\n          }\n\n          .", "-collapse-extra {\n            margin-inline-start: 16px;\n          }\n\n          .", "-collapse-header {\n            align-items: center !important;\n            padding: ", " !important;\n            border-radius: 0 !important;\n          }\n\n          .", "-collapse-content-box {\n            padding: ", " !important;\n          }\n\n          .", "-form-item-label {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n          }\n        "])), prefixCls, prefixCls, prefixCls, typeof headerPadding === 'string' ? headerPadding : "".concat(headerPadding, "px"), prefixCls, typeof bodyPadding === 'string' ? bodyPadding : "".concat(bodyPadding, "px"), prefixCls)),
-    icon: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        transition: all 100ms ", ";\n      "])), token.motionEaseOut),
+    hideCollapsibleIcon: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        .", "-collapse-expand-icon {\n          display: none !important;\n        }\n      "])), prefixCls),
+    icon: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        transition: all 100ms ", ";\n      "])), token.motionEaseOut),
     pureStyle: pureStyle
   };
 });

package/es/Form/components/FormDivider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["style"];

package/es/Form/components/FormFooter.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "children"];

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

@@ -1,5 +1,5 @@
-import { type CollapseProps } from 'antd';
 import { type ReactNode } from 'react';
+import { type CollapseProps } from "../../Collapse";
 import { type IconProps } from "../../Icon";
 export type FormVariant = 'default' | 'block' | 'ghost' | 'pure';
 export type ItemsType = 'group' | 'flat';
@@ -8,7 +8,6 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     defaultStyle: import("antd-style").SerializedStyles;
     flatGroup: import("antd-style").SerializedStyles;
     ghostStyle: import("antd-style").SerializedStyles;
-    group: string;
     icon: import("antd-style").SerializedStyles;
     mobileFlatGroup: import("antd-style").SerializedStyles;
     mobileGroupBody: import("antd-style").SerializedStyles;
@@ -17,8 +16,9 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     pureTitle: import("antd-style").SerializedStyles;
     title: import("antd-style").SerializedStyles;
 }>;
-export interface FormGroupProps extends CollapseProps {
+export interface FormGroupProps extends Omit<CollapseProps, 'collapsible'> {
     children: ReactNode;
+    collapsible?: boolean;
     defaultActive?: boolean;
     extra?: ReactNode;
     icon?: IconProps['icon'];

package/es/Form/components/FormGroup.js

@@ -1,40 +1,34 @@
+'use client';
+
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["className", "icon", "title", "children", "extra", "itemsType", "variant", "defaultActive"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-import { Collapse } from 'antd';
+var _excluded = ["className", "icon", "title", "children", "extra", "itemsType", "variant", "defaultActive", "collapsible"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 import { createStyles, useResponsive } from 'antd-style';
-import { ChevronDown } from 'lucide-react';
+import { isUndefined } from 'lodash-es';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import Collapse from "../../Collapse";
 import Icon from "../../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
-    cx = _ref.cx,
     token = _ref.token,
-    isDarkMode = _ref.isDarkMode,
-    responsive = _ref.responsive,
-    prefixCls = _ref.prefixCls;
-  var pureStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: transparent;\n    border: none;\n    border-radius: 0;\n\n    .", "-collapse-header {\n      padding-block: 0 20px !important;\n      padding-inline: 2px !important;\n      background: transparent !important;\n      border-radius: 0 !important;\n    }\n\n    .", "-collapse-content {\n      background: transparent;\n      border-color: ", ";\n    }\n\n    .", "-collapse-content-box {\n      padding-inline: 2px !important;\n      background: transparent;\n      border-radius: 0;\n    }\n  "])), prefixCls, prefixCls, token.colorFillSecondary, prefixCls);
-  var blockStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background: ", ";\n    border: none;\n    border-radius: ", "px;\n\n    .", "-collapse-content {\n      border: none !important;\n    }\n  "])), token.colorFillQuaternary, token.borderRadiusLG, prefixCls);
-  var ghostStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background: transparent;\n    border: 1px solid ", ";\n    .", "-collapse-header {\n      background: transparent !important;\n    }\n\n    .", "-collapse-content-box {\n      background: transparent;\n    }\n  "])), token.colorBorderSecondary, prefixCls, prefixCls);
-  var defaultStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: ", "px;\n  "])), token.colorFillQuaternary, token.colorBorderSecondary, token.borderRadiusLG);
+    responsive = _ref.responsive;
   return {
-    blockStyle: blockStyle,
-    defaultStyle: defaultStyle,
-    flatGroup: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      padding-inline: 16px;\n    "]))),
-    ghostStyle: ghostStyle,
-    group: cx(isDarkMode && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          .", "-collapse-content {\n            background: transparent;\n            border-color: ", ";\n          }\n\n          .", "-collapse-header {\n            background: ", ";\n          }\n        "])), prefixCls, token.colorBorderSecondary, prefixCls, token.colorFillTertiary), css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        flex: none;\n\n        .", "-collapse-item {\n          border: none;\n        }\n\n        .", "-collapse-header {\n          align-items: center !important;\n          border-radius: 0 !important;\n        }\n\n        .", "-collapse-content-box {\n          padding-block: 0 !important;\n        }\n\n        .", "-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])), prefixCls, prefixCls, prefixCls, prefixCls)),
-    icon: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      transition: all 100ms ", ";\n    "])), token.motionEaseOut),
-    mobileFlatGroup: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n    "])), token.borderRadiusLG),
-    mobileGroupBody: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      padding-block: 0;\n      padding-inline: 16px;\n      background: ", ";\n    "])), token.colorBgContainer),
-    mobileGroupHeader: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      padding: 16px;\n      background: ", ";\n    "])), token.colorBgLayout),
-    pureStyle: pureStyle,
-    pureTitle: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      font-size: 18px;\n      font-weight: 700;\n      line-height: 24px;\n    "]))),
-    title: css(_templateObject13 || (_templateObject13 = _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)
+    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    "])), token.colorBorderSecondary),
+    icon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      transition: all 100ms ", ";\n    "])), token.motionEaseOut),
+    mobileFlatGroup: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n    "])), token.borderRadiusLG),
+    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),
+    pureStyle: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      padding: 0;\n      background: transparent;\n      border: none;\n      border-radius: 0;\n    "]))),
+    pureTitle: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      font-size: 18px;\n      font-weight: 700;\n      line-height: 24px;\n    "]))),
+    title: css(_templateObject11 || (_templateObject11 = _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) {
@@ -48,15 +42,22 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
     variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
     _ref2$defaultActive = _ref2.defaultActive,
     defaultActive = _ref2$defaultActive === void 0 ? true : _ref2$defaultActive,
+    collapsible = _ref2.collapsible,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
   var _useStyles = useStyles(variant),
     cx = _useStyles.cx,
-    styles = _useStyles.styles;
+    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 variantStyle = cx(variant === 'default' && styles.defaultStyle, variant === 'block' && styles.blockStyle, variant === 'ghost' && styles.ghostStyle, variant === 'pure' && styles.pureStyle);
+  var defaultCollapsible = isUndefined(collapsible) ? variant !== 'pure' : collapsible;
   var titleContent = /*#__PURE__*/_jsxs(Flexbox, {
-    className: cx(styles.title, variant === 'pure' && styles.pureTitle),
+    className: cx(groupTitleClassName, styles.title, variant === 'pure' && styles.pureTitle),
     gap: 8,
     horizontal: true,
     children: [icon && /*#__PURE__*/_jsx(Icon, {
@@ -65,48 +66,36 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
   });
   if (itemsType === 'flat') {
     return mobile ? /*#__PURE__*/_jsx(Flexbox, {
-      className: cx(styles.mobileFlatGroup, styles.mobileGroupBody, className),
+      className: cx(groupClassName, styles.mobileFlatGroup, styles.mobileGroupBody, className),
       children: children
     }) : /*#__PURE__*/_jsx(Flexbox, {
-      className: cx(styles.flatGroup, variantStyle, className),
+      className: cx(groupClassName, styles.flatGroup, variantStyle, className),
       children: children
     });
   }
   if (mobile) return /*#__PURE__*/_jsxs(Flexbox, {
-    className: className,
+    className: cx(groupClassName, className),
     children: [/*#__PURE__*/_jsxs(Flexbox, {
-      className: styles.mobileGroupHeader,
+      className: cx(groupHeaderClassName, styles.mobileGroupHeader),
       horizontal: true,
       justify: 'space-between',
       children: [titleContent, extra]
     }), /*#__PURE__*/_jsx("div", {
-      className: styles.mobileGroupBody,
+      className: cx(groupContentClassName, styles.mobileGroupBody),
       children: children
     })]
   });
   return /*#__PURE__*/_jsx(Collapse, _objectSpread({
-    className: cx(styles.group, variantStyle, className),
-    collapsible: variant === 'pure' ? 'icon' : undefined,
+    className: cx(groupClassName, className),
+    collapsible: defaultCollapsible,
     defaultActiveKey: defaultActive ? [1] : undefined,
-    expandIcon: function expandIcon(_ref3) {
-      var isActive = _ref3.isActive;
-      return variant === 'pure' ? null : /*#__PURE__*/_jsx(Icon, {
-        className: styles.icon,
-        icon: ChevronDown,
-        size: {
-          fontSize: 16
-        },
-        style: isActive ? {} : {
-          rotate: '-90deg'
-        }
-      });
-    },
     items: [{
       children: children,
       extra: extra,
       key: 1,
       label: titleContent
-    }]
+    }],
+    variant: variant
   }, rest), 1);
 });
 export default FormGroup;

package/es/Form/components/FormItem.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
@@ -18,7 +20,7 @@ export var useStyles = createStyles(function (_ref, itemMinWidth) {
     responsive = _ref.responsive,
     prefixCls = _ref.prefixCls;
   return {
-    item: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      &.", "-form-item {\n        padding-block: 16px;\n        padding-inline: 0;\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, responsive.md, prefixCls, responsive.mobile, prefixCls),
+    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(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth, responsive.mobile, prefixCls, prefixCls),
     itemNoDivider: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      &:not(:first-child) {\n        padding-block-start: 0;\n      }\n    "])))
   };

package/es/Form/components/FormTitle.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createStyles } from 'antd-style';

package/es/Form/index.d.ts

@@ -11,12 +11,15 @@ export interface ItemGroup {
 }
 export interface FormProps extends Omit<AntFormProps, 'variant'> {
     children?: ReactNode;
+    collapsible?: boolean;
     footer?: ReactNode;
+    gap?: number | string;
     itemMinWidth?: FormItemProps['minWidth'];
     items?: ItemGroup[] | FormItemProps[];
     itemsType?: ItemsType;
     variant?: FormVariant;
 }
+export { FormInstance } from 'antd';
 export interface IForm {
     (props: FormProps & RefAttributes<FormInstance>): ReactNode;
     Group: typeof FormGroup;

package/es/Form/index.js

@@ -2,7 +2,7 @@
 
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "itemMinWidth", "footer", "form", "items", "children", "itemsType", "variant"];
+var _excluded = ["className", "itemMinWidth", "footer", "form", "items", "children", "itemsType", "variant", "gap", "style", "collapsible"];
 import { Form as AntForm } from 'antd';
 import { forwardRef } from 'react';
 import FormFooter from "./components/FormFooter";
@@ -23,6 +23,9 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     itemsType = _ref$itemsType === void 0 ? 'group' : _ref$itemsType,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    gap = _ref.gap,
+    style = _ref.style,
+    collapsible = _ref.collapsible,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -35,6 +38,7 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var mapTree = function mapTree(group, groupIndex) {
     return /*#__PURE__*/_jsx(FormGroup, {
+      collapsible: collapsible,
       defaultActive: group === null || group === void 0 ? void 0 : group.defaultActive,
       extra: group === null || group === void 0 ? void 0 : group.extra,
       icon: group === null || group === void 0 ? void 0 : group.icon,
@@ -48,13 +52,16 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, groupIndex);
   };
   return /*#__PURE__*/_jsxs(AntForm, _objectSpread(_objectSpread({
-    className: cx(styles.form, variant === 'pure' && styles.pure, className),
+    className: cx(styles.form, variant === 'pure' && styles.pure, styles.mobile, className),
     colon: false,
     form: form,
     layout: 'horizontal',
-    ref: ref
+    ref: ref,
+    style: _objectSpread({
+      gap: gap
+    }, style)
   }, rest), {}, {
-    children: [(items === null || items === void 0 ? void 0 : items.length) > 0 ? itemsType === 'group' ? items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+    children: [items && (items === null || items === void 0 ? void 0 : items.length) > 0 ? itemsType === 'group' ? items === null || items === void 0 ? void 0 : items.map(function (item, i) {
       return mapTree(item, i);
     }) : /*#__PURE__*/_jsx(FormGroup, {
       itemsType: 'flat',
@@ -64,11 +71,12 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }).map(function (item, i) {
         return mapFlat(item, i);
       })
-    }) : null, children, footer && /*#__PURE__*/_jsx(FormFooter, {
+    }) : undefined, children, footer && /*#__PURE__*/_jsx(FormFooter, {
       children: footer
     })]
   }));
 });
+export { FormInstance } from 'antd';
 var Form = FormParent;
 Form.Item = FormItem;
 Form.Group = FormGroup;

package/es/Form/style.d.ts

@@ -1,4 +1,5 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     form: import("antd-style").SerializedStyles;
+    mobile: import("antd-style").SerializedStyles;
     pure: import("antd-style").SerializedStyles;
 }>;

package/es/Form/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
@@ -8,6 +8,7 @@ export var useStyles = createStyles(function (_ref) {
     responsive = _ref.responsive;
   return {
     form: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    ", " {\n      gap: 0;\n    }\n\n    .", "-form-item {\n      margin: 0 !important;\n    }\n\n    .", "-form-item .", "-form-item-label > label {\n      height: unset;\n    }\n\n    .", "-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .", "-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .", "-form-item-row {\n      align-items: center;\n      ", " {\n        align-items: stretch;\n      }\n    }\n\n    .", "-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .", "-collapse-item {\n      overflow: hidden !important;\n      border-radius: ", "px !important;\n    }\n  "])), responsive.mobile, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, responsive.mobile, prefixCls, prefixCls, token.borderRadius),
-    pure: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    gap: 64px;\n  "])))
+    mobile: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      gap: 0 !important;\n    }\n  "])), responsive.mobile),
+    pure: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    gap: 64px;\n    .", "-collapse-content-box {\n      .", "-form-item:first-child {\n        border-block-start: 1px solid ", ";\n      }\n    }\n    ", " {\n      border-block-start: unset;\n    }\n  "])), prefixCls, prefixCls, token.colorFillSecondary, responsive.mobile)
   };
 });

package/es/FormModal/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type FormInstance, type FormProps } from "../Form";
+import { type ModalProps } from "../Modal";
+type PickModalProps = Pick<ModalProps, 'style' | 'className' | 'allowFullscreen' | 'title' | 'wrapClassName' | 'width' | 'onCancel' | 'open' | 'centered' | 'destroyOnClose' | 'paddings' | 'maxHeight' | 'enableResponsive' | 'afterClose' | 'afterOpenChange' | 'zIndex' | 'mask' | 'getContainer' | 'keyboard' | 'forceRender' | 'focusTriggerAfterClose' | 'closable' | 'loading' | 'closeIcon'>;
+type PickFormProps = Omit<FormProps, 'className' | 'style' | 'title'>;
+export interface FormModalProps extends PickModalProps, PickFormProps {
+    classNames?: {
+        form?: FormProps['className'];
+    } & ModalProps['classNames'];
+    finishButtonProps?: ModalProps['okButtonProps'];
+    finishLoading?: ModalProps['confirmLoading'];
+    finishText?: ModalProps['okText'];
+    styles?: {
+        form?: FormProps['style'];
+    } & ModalProps['styles'];
+}
+declare const FormModal: import("react").ForwardRefExoticComponent<FormModalProps & import("react").RefAttributes<FormInstance<any>>>;
+export default FormModal;

package/es/FormModal/index.js

@@ -0,0 +1,128 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["classNames", "className", "style", "closable", "styles", "children", "allowFullscreen", "title", "wrapClassName", "afterOpenChange", "width", "onCancel", "centered", "open", "afterClose", "destroyOnClose", "closeIcon", "paddings", "maxHeight", "enableResponsive", "zIndex", "mask", "getContainer", "keyboard", "focusTriggerAfterClose", "forceRender", "loading", "footer", "finishButtonProps", "finishLoading", "onFinish", "finishText", "variant", "gap"],
+  _excluded2 = ["form", "footer"],
+  _excluded3 = ["form", "footer"];
+import { Button } from 'antd';
+import { useResponsive } from 'antd-style';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import Form from "../Form";
+import Modal from "../Modal";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FormModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$classNames = _ref.classNames,
+    classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+    className = _ref.className,
+    style = _ref.style,
+    closable = _ref.closable,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {} : _ref$styles,
+    children = _ref.children,
+    allowFullscreen = _ref.allowFullscreen,
+    title = _ref.title,
+    wrapClassName = _ref.wrapClassName,
+    afterOpenChange = _ref.afterOpenChange,
+    width = _ref.width,
+    onCancel = _ref.onCancel,
+    centered = _ref.centered,
+    open = _ref.open,
+    afterClose = _ref.afterClose,
+    destroyOnClose = _ref.destroyOnClose,
+    closeIcon = _ref.closeIcon,
+    paddings = _ref.paddings,
+    maxHeight = _ref.maxHeight,
+    enableResponsive = _ref.enableResponsive,
+    zIndex = _ref.zIndex,
+    mask = _ref.mask,
+    getContainer = _ref.getContainer,
+    keyboard = _ref.keyboard,
+    focusTriggerAfterClose = _ref.focusTriggerAfterClose,
+    forceRender = _ref.forceRender,
+    loading = _ref.loading,
+    footer = _ref.footer,
+    finishButtonProps = _ref.finishButtonProps,
+    finishLoading = _ref.finishLoading,
+    onFinish = _ref.onFinish,
+    finishText = _ref.finishText,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'pure' : _ref$variant,
+    gap = _ref.gap,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    s = _useStyles.styles;
+  var formClassName = classNames.form,
+    footerClassName = classNames.footer,
+    modalClassNames = _objectWithoutProperties(classNames, _excluded2);
+  var formStyle = styles.form,
+    footerStyle = styles.footer,
+    modalStyles = _objectWithoutProperties(styles, _excluded3);
+  return /*#__PURE__*/_jsx(Modal, {
+    afterClose: afterClose,
+    afterOpenChange: afterOpenChange,
+    allowFullscreen: allowFullscreen,
+    centered: centered,
+    className: className,
+    classNames: modalClassNames,
+    closable: closable,
+    closeIcon: closeIcon,
+    confirmLoading: finishLoading,
+    destroyOnClose: destroyOnClose,
+    enableResponsive: enableResponsive,
+    focusTriggerAfterClose: focusTriggerAfterClose,
+    footer: null,
+    forceRender: forceRender,
+    getContainer: getContainer,
+    keyboard: keyboard,
+    loading: loading,
+    mask: mask,
+    maxHeight: maxHeight,
+    onCancel: onCancel,
+    open: open,
+    paddings: paddings,
+    style: style,
+    styles: _objectSpread(_objectSpread({}, modalStyles), {}, {
+      body: _objectSpread({
+        paddingTop: mobile ? 0 : undefined
+      }, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body)
+    }),
+    title: title,
+    width: width,
+    wrapClassName: wrapClassName,
+    zIndex: zIndex,
+    children: /*#__PURE__*/_jsxs(Form, _objectSpread(_objectSpread({
+      className: cx(s.form, formClassName),
+      clearOnDestroy: destroyOnClose,
+      gap: gap || (variant === 'pure' ? 24 : gap),
+      onFinish: onFinish,
+      ref: ref,
+      style: formStyle,
+      variant: variant
+    }, rest), {}, {
+      children: [children, /*#__PURE__*/_jsx(Flexbox, {
+        className: cx(s.footer, footerClassName),
+        gap: 8,
+        horizontal: true,
+        style: footerStyle,
+        width: '100%',
+        children: footer || /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          block: true,
+          htmlType: "submit",
+          loading: finishLoading,
+          type: 'primary'
+        }, finishButtonProps), {}, {
+          style: _objectSpread({
+            flex: 1
+          }, finishButtonProps === null || finishButtonProps === void 0 ? void 0 : finishButtonProps.style),
+          children: finishText || 'Submit'
+        }))
+      })]
+    }))
+  });
+});
+export default FormModal;

package/es/FormModal/style.d.ts

@@ -0,0 +1,4 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    footer: import("antd-style").SerializedStyles;
+    form: import("antd-style").SerializedStyles;
+}>;

package/es/FormModal/style.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls,
+    responsive = _ref.responsive;
+  return {
+    footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: calc(100% + 32px);\n    margin: -16px;\n    padding: 16px;\n    background: ", ";\n    ", " {\n      position: fixed;\n      inset-block-end: 0;\n      inset-inline: 0;\n\n      width: 100%;\n      margin: 0;\n    }\n  "])), token.colorBgContainer, responsive.mobile),
+    form: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", "-form-group-title {\n      font-size: 15px;\n      font-weight: 500;\n    }\n\n    ", " {\n      .", "-form-group-title {\n        font-size: 14px;\n      }\n\n      .", "-form-group {\n        width: calc(100% + 32px);\n        margin-inline: -16px;\n        background: transparent;\n      }\n    }\n  "])), prefixCls, responsive.mobile, prefixCls, prefixCls)
+  };
+});

package/es/Modal/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type ModalProps as AntModalProps } from 'antd';
-export type ModalProps = AntModalProps & {
+export type ModalProps = Omit<AntModalProps, 'okType'> & {
     allowFullscreen?: boolean;
     enableResponsive?: boolean;
     maxHeight?: string | number | false;

package/es/Modal/index.js

@@ -3,55 +3,48 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["allowFullscreen", "children", "title", "className", "wrapClassName", "width", "onCancel", "open", "destroyOnClose", "paddings", "maxHeight", "enableResponsive", "footer", "styles"],
+var _excluded = ["allowFullscreen", "children", "title", "className", "wrapClassName", "width", "onCancel", "open", "destroyOnClose", "paddings", "maxHeight", "enableResponsive", "footer", "styles", "okText", "onOk", "cancelText", "okButtonProps", "cancelButtonProps", "confirmLoading"],
   _excluded2 = ["body"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { Modal as AntModal, ConfigProvider, Drawer } from 'antd';
-import { createStyles, useResponsive } from 'antd-style';
+import { Modal as AntModal, Button, ConfigProvider, Drawer } from 'antd';
+import { useResponsive } from 'antd-style';
 import { isNumber } from 'lodash-es';
 import { Maximize2, Minimize2, X } from 'lucide-react';
 import { lighten } from 'polished';
 import { memo, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import Icon from "../Icon";
+import { FOOTER_HEIGHT, HEADER_HEIGHT, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var HEADER_HEIGHT = 56;
-var FOOTER_HEIGHT = 68;
-var useStyles = createStyles(function (_ref, _ref2) {
-  var cx = _ref.cx,
-    css = _ref.css,
-    token = _ref.token,
-    prefixCls = _ref.prefixCls;
-  var maxHeight = _ref2.maxHeight;
-  return {
-    content: cx(maxHeight && css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            .", "-modal-body {\n              overflow: auto;\n              max-height: ", ";\n            }\n          "])), prefixCls, maxHeight), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          .", "-modal-footer {\n            margin: 0;\n            padding: 16px;\n          }\n          .", "-modal-header {\n            display: flex;\n            gap: 4px;\n            align-items: center;\n            justify-content: center;\n\n            height: 56px;\n            margin-block-end: 0;\n            padding: 16px;\n          }\n          .", "-modal-content {\n            overflow: hidden;\n            padding: 0;\n            border: 1px solid ", ";\n            border-radius: ", "px;\n          }\n        "])), prefixCls, prefixCls, prefixCls, token.colorSplit, token.borderRadiusLG)),
-    drawerContent: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        .", "-drawer-close {\n          padding: 0;\n        }\n        .", "-drawer-wrapper-body {\n          background: linear-gradient(to bottom, ", ", ", ");\n        }\n        .", "-drawer-header {\n          padding: 8px;\n        }\n\n        .", "-drawer-footer {\n          display: flex;\n          align-items: center;\n          justify-content: flex-end;\n\n          padding: 16px;\n\n          border: none;\n        }\n      "])), prefixCls, prefixCls, token.colorBgContainer, token.colorBgLayout, prefixCls, prefixCls),
-    wrap: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: hidden auto;\n      "])))
-  };
-});
-var Modal = /*#__PURE__*/memo(function (_ref3) {
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Modal = /*#__PURE__*/memo(function (_ref) {
   var _paddings$desktop, _paddings$desktop2;
-  var allowFullscreen = _ref3.allowFullscreen,
-    children = _ref3.children,
-    _ref3$title = _ref3.title,
-    title = _ref3$title === void 0 ? ' ' : _ref3$title,
-    className = _ref3.className,
-    wrapClassName = _ref3.wrapClassName,
-    _ref3$width = _ref3.width,
-    width = _ref3$width === void 0 ? 700 : _ref3$width,
-    onCancel = _ref3.onCancel,
-    open = _ref3.open,
-    destroyOnClose = _ref3.destroyOnClose,
-    paddings = _ref3.paddings,
-    _ref3$maxHeight = _ref3.maxHeight,
-    maxHeight = _ref3$maxHeight === void 0 ? '75dvh' : _ref3$maxHeight,
-    _ref3$enableResponsiv = _ref3.enableResponsive,
-    enableResponsive = _ref3$enableResponsiv === void 0 ? true : _ref3$enableResponsiv,
-    footer = _ref3.footer,
-    _ref3$styles = _ref3.styles,
-    stylesProps = _ref3$styles === void 0 ? {} : _ref3$styles,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+  var allowFullscreen = _ref.allowFullscreen,
+    children = _ref.children,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? ' ' : _ref$title,
+    className = _ref.className,
+    wrapClassName = _ref.wrapClassName,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 700 : _ref$width,
+    onCancel = _ref.onCancel,
+    open = _ref.open,
+    destroyOnClose = _ref.destroyOnClose,
+    paddings = _ref.paddings,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? '75dvh' : _ref$maxHeight,
+    _ref$enableResponsive = _ref.enableResponsive,
+    enableResponsive = _ref$enableResponsive === void 0 ? true : _ref$enableResponsive,
+    footer = _ref.footer,
+    _ref$styles = _ref.styles,
+    stylesProps = _ref$styles === void 0 ? {} : _ref$styles,
+    okText = _ref.okText,
+    onOk = _ref.onOk,
+    cancelText = _ref.cancelText,
+    okButtonProps = _ref.okButtonProps,
+    cancelButtonProps = _ref.cancelButtonProps,
+    confirmLoading = _ref.confirmLoading,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     fullscreen = _useState2[0],
@@ -66,6 +59,7 @@ var Modal = /*#__PURE__*/memo(function (_ref3) {
     theme = _useStyles.theme;
   var body = stylesProps.body,
     restStyles = _objectWithoutProperties(stylesProps, _excluded2);
+  var hideFooter = footer === false || footer === null;
   if (enableResponsive && mobile) return /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
     className: cx(styles.drawerContent, className),
     closeIcon: /*#__PURE__*/_jsx(ActionIcon, {
@@ -78,7 +72,22 @@ var Modal = /*#__PURE__*/memo(function (_ref3) {
         return setFullscreen(!fullscreen);
       }
     }),
-    footer: footer,
+    footer: hideFooter ? null : footer || /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        onClick: onCancel
+      }, cancelButtonProps), {}, {
+        children: cancelText || 'Cancel'
+      })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+        loading: confirmLoading,
+        onClick: onOk,
+        type: "primary"
+      }, okButtonProps), {}, {
+        style: _objectSpread({
+          marginInlineStart: 8
+        }, okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.style),
+        children: okText || 'OK'
+      }))]
+    }),
     height: fullscreen ? 'calc(100% - env(safe-area-inset-top))' : maxHeight || '75vh',
     maskClassName: cx(styles.wrap, wrapClassName),
     onClose: onCancel,
@@ -101,6 +110,8 @@ var Modal = /*#__PURE__*/memo(function (_ref3) {
       }
     },
     children: /*#__PURE__*/_jsx(AntModal, _objectSpread(_objectSpread({
+      cancelButtonProps: cancelButtonProps,
+      cancelText: cancelText,
       className: cx(styles.content, className),
       closable: true,
       closeIcon: /*#__PURE__*/_jsx(Icon, {
@@ -109,10 +120,14 @@ var Modal = /*#__PURE__*/memo(function (_ref3) {
           fontSize: 20
         }
       }),
+      confirmLoading: confirmLoading,
       destroyOnClose: destroyOnClose,
-      footer: footer,
+      footer: hideFooter ? null : footer,
       maskClosable: true,
+      okButtonProps: okButtonProps,
+      okText: okText,
       onCancel: onCancel,
+      onOk: onOk,
       open: open,
       styles: _objectSpread({
         body: _objectSpread({

package/es/Modal/style.d.ts

@@ -0,0 +1,9 @@
+export declare const HEADER_HEIGHT = 56;
+export declare const FOOTER_HEIGHT = 68;
+export declare const useStyles: (props?: {
+    maxHeight?: string | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    content: string;
+    drawerContent: import("antd-style").SerializedStyles;
+    wrap: import("antd-style").SerializedStyles;
+}>;

package/es/Modal/style.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+export var HEADER_HEIGHT = 56;
+export var FOOTER_HEIGHT = 68;
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var cx = _ref.cx,
+    css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  var maxHeight = _ref2.maxHeight;
+  return {
+    content: cx(maxHeight && css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            .", "-modal-body {\n              overflow: auto;\n              max-height: ", ";\n            }\n          "])), prefixCls, maxHeight), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          .", "-modal-footer {\n            margin: 0;\n            padding: 16px;\n          }\n          .", "-modal-header {\n            display: flex;\n            gap: 4px;\n            align-items: center;\n            justify-content: center;\n\n            height: 56px;\n            margin-block-end: 0;\n            padding: 16px;\n          }\n          .", "-modal-content {\n            overflow: hidden;\n            padding: 0;\n            border: 1px solid ", ";\n            border-radius: ", "px;\n          }\n        "])), prefixCls, prefixCls, prefixCls, token.colorSplit, token.borderRadiusLG)),
+    drawerContent: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        &.", "-drawer-content {\n          background: ", ";\n        }\n\n        .", "-drawer-close {\n          padding: 0;\n        }\n\n        .", "-drawer-header {\n          flex: none;\n          height: ", "px !important;\n          padding-block: 0;\n          padding-inline: 16px;\n        }\n\n        .", "-drawer-footer {\n          display: flex;\n          align-items: center;\n          justify-content: flex-end;\n\n          padding: 16px;\n\n          border: none;\n        }\n      "])), prefixCls, token.colorBgContainer, prefixCls, prefixCls, HEADER_HEIGHT, prefixCls),
+    wrap: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: hidden auto;\n      "])))
+  };
+});

package/es/components.d.ts

@@ -21,12 +21,13 @@ export { default as FileTypeIcon, type FileTypeIconProps } from './FileTypeIcon'
 export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';
 export { default as FontLoader, type FontLoaderProps } from './FontLoader';
 export { default as Footer, type FooterProps } from './Footer';
-export { default as Form, type FormProps, type ItemGroup } from './Form';
+export { default as Form, type FormInstance, type FormProps, type ItemGroup } from './Form';
 export { default as FormDivider, type FormDividerProps } from './Form/components/FormDivider';
 export { default as FormFooter, type FormFooterProps } from './Form/components/FormFooter';
 export { default as FormGroup, type FormGroupProps } from './Form/components/FormGroup';
 export { default as FormItem, type FormItemProps } from './Form/components/FormItem';
 export { default as FormTitle, type FormTitleProps } from './Form/components/FormTitle';
+export { default as FormModal, type FormModalProps } from './FormModal';
 export { default as Grid, type GridProps } from './Grid';
 export { default as Header, type HeaderProps } from './Header';
 export { default as Highlighter, type HighlighterProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from './Highlighter';

package/es/components.js

@@ -27,6 +27,7 @@ export { default as FormFooter } from "./Form/components/FormFooter";
 export { default as FormGroup } from "./Form/components/FormGroup";
 export { default as FormItem } from "./Form/components/FormItem";
 export { default as FormTitle } from "./Form/components/FormTitle";
+export { default as FormModal } from "./FormModal";
 export { default as Grid } from "./Grid";
 export { default as Header } from "./Header";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.154.1",
+  "version": "1.155.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",