@lobehub/ui 5.19.2 → 5.20.0

package/es/base-ui/Form/Form.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { rootVariants } from "./style.mjs";
+import { FormContext } from "./context.mjs";
+import FormField from "./components/FormField.mjs";
+import FormFlatGroup from "./components/FormFlatGroup.mjs";
+import FormGroup from "./components/FormGroup.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useResponsive } from "antd-style";
+import { isUndefined } from "es-toolkit/compat";
+import { Form } from "@base-ui/react/form";
+//#region src/base-ui/Form/Form.tsx
+const serializeForm = (form) => {
+	if (!form) return "";
+	const entries = [...new FormData(form).entries()].filter(([, value]) => typeof value === "string");
+	return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));
+};
+const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, itemsType = "group", variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, onFormSubmit, layout, ref, ...rest }) => {
+	const { mobile } = useResponsive();
+	const formRef = useRef(null);
+	const [submitLoading, setSubmitLoading] = useState(false);
+	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+	const snapshotRef = useRef("");
+	const syncUnsaved = useCallback(() => {
+		setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);
+	}, []);
+	useEffect(() => {
+		const form = formRef.current;
+		if (!form) return;
+		snapshotRef.current = serializeForm(form);
+		let resetTimer;
+		const handleMutation = () => syncUnsaved();
+		const handleReset = () => {
+			resetTimer = setTimeout(() => {
+				snapshotRef.current = serializeForm(formRef.current);
+				syncUnsaved();
+			}, 0);
+		};
+		form.addEventListener("input", handleMutation);
+		form.addEventListener("change", handleMutation);
+		form.addEventListener("reset", handleReset);
+		return () => {
+			clearTimeout(resetTimer);
+			form.removeEventListener("input", handleMutation);
+			form.removeEventListener("change", handleMutation);
+			form.removeEventListener("reset", handleReset);
+		};
+	}, [syncUnsaved]);
+	const requestReset = useCallback(() => {
+		formRef.current?.reset();
+	}, []);
+	const mergedRef = useCallback((node) => {
+		formRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const context = useMemo(() => ({
+		hasUnsavedChanges,
+		initialValues,
+		itemMinWidth,
+		layout: layout || (mobile ? "vertical" : "horizontal"),
+		requestReset,
+		submitLoading,
+		variant
+	}), [
+		hasUnsavedChanges,
+		initialValues,
+		itemMinWidth,
+		layout,
+		mobile,
+		requestReset,
+		submitLoading,
+		variant
+	]);
+	const mapFlat = useCallback((item, itemIndex) => /* @__PURE__ */ jsx(FormField, {
+		className: classNames?.item,
+		divider: itemIndex !== 0,
+		style: customStyles?.item,
+		variant,
+		...item
+	}, itemIndex), [
+		variant,
+		classNames,
+		customStyles
+	]);
+	const mapTree = useCallback((group, groupIndex) => {
+		const key = group?.key || groupIndex;
+		return /* @__PURE__ */ jsx(FormGroup, {
+			active: activeKey && group?.key ? activeKey.includes(key) : void 0,
+			className: classNames?.group,
+			collapsible: isUndefined(group.collapsible) ? collapsible : group.collapsible,
+			desc: group?.desc,
+			extra: group?.extra,
+			icon: group?.icon,
+			style: customStyles?.group,
+			title: group.title,
+			variant: group?.variant || variant,
+			defaultActive: defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive,
+			onCollapse: (active) => {
+				let keys = activeKey || defaultActiveKey || [];
+				keys = keys.filter((k) => k !== key);
+				onCollapse?.(active ? [...keys, key] : keys);
+			},
+			children: Array.isArray(group.children) ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i)) : group.children
+		}, key);
+	}, [
+		activeKey,
+		collapsible,
+		defaultActiveKey,
+		onCollapse,
+		variant,
+		classNames,
+		customStyles,
+		mapFlat
+	]);
+	return /* @__PURE__ */ jsx(FormContext, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(Form, {
+			className: cx(rootVariants({ variant }), className),
+			ref: mergedRef,
+			style: {
+				gap,
+				...style
+			},
+			onFormSubmit: async (values, eventDetails) => {
+				onFormSubmit?.(values, eventDetails);
+				if (!onFinish) return;
+				setSubmitLoading(true);
+				try {
+					await onFinish(values, eventDetails);
+					snapshotRef.current = serializeForm(formRef.current);
+					syncUnsaved();
+				} finally {
+					setSubmitLoading(false);
+				}
+			},
+			...rest,
+			children: [
+				items && items.length > 0 ? itemsType === "group" ? items.map((item, i) => mapTree(item, i)) : /* @__PURE__ */ jsx(FormFlatGroup, {
+					className: classNames?.group,
+					style: customStyles?.group,
+					variant,
+					children: items.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))
+				}) : void 0,
+				children,
+				footer
+			]
+		})
+	});
+});
+Form$1.displayName = "Form";
+//#endregion
+export { Form$1 as default };
+
+//# sourceMappingURL=Form.mjs.map

package/es/base-ui/Form/Form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../../src/base-ui/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { cx, useResponsive } from 'antd-style';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { rootVariants } from './style';\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\n\nconst serializeForm = (form: HTMLFormElement | null) => {\n  if (!form) return '';\n  const entries = [...new FormData(form).entries()].filter(\n    ([, value]) => typeof value === 'string',\n  ) as [string, string][];\n  return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\n};\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    items = [],\n    children,\n    itemsType = 'group',\n    variant = 'borderless',\n    classNames,\n    styles: customStyles,\n    gap,\n    style,\n    collapsible,\n    defaultActiveKey,\n    initialValues,\n    activeKey,\n    onCollapse,\n    onFinish,\n    onFormSubmit,\n    layout,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const formRef = useRef<HTMLFormElement>(null);\n    const [submitLoading, setSubmitLoading] = useState(false);\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const snapshotRef = useRef('');\n\n    const syncUnsaved = useCallback(() => {\n      setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\n    }, []);\n\n    useEffect(() => {\n      const form = formRef.current;\n      if (!form) return;\n      snapshotRef.current = serializeForm(form);\n      let resetTimer: ReturnType<typeof setTimeout>;\n      const handleMutation = () => syncUnsaved();\n      const handleReset = () => {\n        resetTimer = setTimeout(() => {\n          snapshotRef.current = serializeForm(formRef.current);\n          syncUnsaved();\n        }, 0);\n      };\n      form.addEventListener('input', handleMutation);\n      form.addEventListener('change', handleMutation);\n      form.addEventListener('reset', handleReset);\n      return () => {\n        clearTimeout(resetTimer);\n        form.removeEventListener('input', handleMutation);\n        form.removeEventListener('change', handleMutation);\n        form.removeEventListener('reset', handleReset);\n      };\n    }, [syncUnsaved]);\n\n    const requestReset = useCallback(() => {\n      formRef.current?.reset();\n    }, []);\n\n    const mergedRef = useCallback(\n      (node: HTMLFormElement | null) => {\n        formRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const context = useMemo(\n      () => ({\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\n        requestReset,\n        submitLoading,\n        variant,\n      }),\n      [\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout,\n        mobile,\n        requestReset,\n        submitLoading,\n        variant,\n      ],\n    );\n\n    const mapFlat = useCallback(\n      (item: FormFieldProps, itemIndex: number) => (\n        <FormField\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [variant, classNames, customStyles],\n    );\n\n    const mapTree = useCallback(\n      (group: FormGroupItemType, groupIndex: number) => {\n        const key = group?.key || groupIndex;\n        return (\n          <FormGroup\n            active={activeKey && group?.key ? activeKey.includes(key) : undefined}\n            className={classNames?.group}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            desc={group?.desc}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            style={customStyles?.group}\n            title={group.title}\n            variant={group?.variant || variant}\n            defaultActive={\n              defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\n            }\n            onCollapse={(active) => {\n              let keys: (string | number)[] = activeKey || defaultActiveKey || [];\n              keys = keys.filter((k) => k !== key);\n              onCollapse?.(active ? [...keys, key] : keys);\n            }}\n          >\n            {Array.isArray(group.children)\n              ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\n              : group.children}\n          </FormGroup>\n        );\n      },\n      [\n        activeKey,\n        collapsible,\n        defaultActiveKey,\n        onCollapse,\n        variant,\n        classNames,\n        customStyles,\n        mapFlat,\n      ],\n    );\n\n    return (\n      <FormContext value={context}>\n        <BaseForm\n          className={cx(rootVariants({ variant }), className)}\n          ref={mergedRef}\n          style={{ gap, ...style }}\n          onFormSubmit={async (values, eventDetails) => {\n            onFormSubmit?.(values, eventDetails);\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            try {\n              await onFinish(values, eventDetails);\n              snapshotRef.current = serializeForm(formRef.current);\n              syncUnsaved();\n            } finally {\n              setSubmitLoading(false);\n            }\n          }}\n          {...rest}\n        >\n          {items && items.length > 0 ? (\n            itemsType === 'group' ? (\n              (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n            ) : (\n              <FormFlatGroup\n                className={classNames?.group}\n                style={customStyles?.group}\n                variant={variant}\n              >\n                {(items as FormFieldProps[])\n                  .filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </BaseForm>\n      </FormContext>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}

package/es/base-ui/Form/components/FormDivider.d.mts

@@ -0,0 +1,8 @@
+import { FormDividerProps } from "../type.mjs";
+import { FC } from "react";
+
+//#region src/base-ui/Form/components/FormDivider.d.ts
+declare const FormDivider: FC<FormDividerProps>;
+//#endregion
+export { FormDivider };
+//# sourceMappingURL=FormDivider.d.mts.map

package/es/base-ui/Form/components/FormDivider.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { dividerStyles } from "../style.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/Form/components/FormDivider.tsx
+const FormDivider = ({ visible = true, style, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cx(dividerStyles.root, className),
+	role: "separator",
+	style: {
+		opacity: visible ? .66 : 0,
+		...style
+	},
+	...rest
+});
+FormDivider.displayName = "FormDivider";
+//#endregion
+export { FormDivider as default };
+
+//# sourceMappingURL=FormDivider.mjs.map

package/es/base-ui/Form/components/FormDivider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDivider.mjs","names":[],"sources":["../../../../src/base-ui/Form/components/FormDivider.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { dividerStyles } from '../style';\nimport type { FormDividerProps } from '../type';\n\nconst FormDivider: FC<FormDividerProps> = ({ visible = true, style, className, ...rest }) => (\n  <div\n    className={cx(dividerStyles.root, className)}\n    role={'separator'}\n    style={{ opacity: visible ? 0.66 : 0, ...style }}\n    {...rest}\n  />\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";;;;;AAQA,MAAM,eAAqC,EAAE,UAAU,MAAM,OAAO,WAAW,GAAG,WAChF,oBAAC,OAAD;CACE,WAAW,GAAG,cAAc,MAAM,UAAU;CAC5C,MAAM;CACN,OAAO;EAAE,SAAS,UAAU,MAAO;EAAG,GAAG;EAAO;CAChD,GAAI;CACJ,CAAA;AAGJ,YAAY,cAAc"}

package/es/base-ui/Form/components/FormField.d.mts

@@ -0,0 +1,8 @@
+import { FormFieldProps } from "../type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Form/components/FormField.d.ts
+declare const FormField: _$react.NamedExoticComponent<FormFieldProps>;
+//#endregion
+export { FormField };
+//# sourceMappingURL=FormField.d.mts.map

package/es/base-ui/Form/components/FormField.mjs

@@ -0,0 +1,59 @@
+"use client";
+import { fieldStyles, fieldVariants } from "../style.mjs";
+import FormDivider from "./FormDivider.mjs";
+import { useFormContext } from "../context.mjs";
+import FormTitle from "./FormTitle.mjs";
+import { cloneElement, isValidElement, memo, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx, useResponsive } from "antd-style";
+import { Field } from "@base-ui/react/field";
+//#region src/base-ui/Form/components/FormField.tsx
+const FormField = memo(({ avatar, children, className, desc, divider, hidden, label, layout, minWidth, name, required, style, tag, variant, ...rest }) => {
+	const { mobile } = useResponsive();
+	const config = useFormContext();
+	const mergedLayout = layout || (mobile ? "vertical" : config.layout);
+	const mergedVariant = variant || config.variant;
+	const mergedMinWidth = minWidth ?? config.itemMinWidth;
+	const control = useMemo(() => {
+		if (!isValidElement(children)) return children;
+		const props = children.props;
+		const injected = {};
+		if (required && props.required === void 0) injected.required = true;
+		if (name) {
+			const initialValue = config.initialValues?.[name];
+			if (initialValue !== void 0 && props.value === void 0 && props.defaultValue === void 0) injected.defaultValue = initialValue;
+		}
+		if (Object.keys(injected).length === 0) return children;
+		return cloneElement(children, injected);
+	}, [
+		children,
+		name,
+		required,
+		config.initialValues
+	]);
+	if (hidden) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [divider && /* @__PURE__ */ jsx(FormDivider, { visible: mergedVariant !== "borderless" }), /* @__PURE__ */ jsxs(Field.Root, {
+		className: cx(fieldVariants({ layout: mergedLayout }), className),
+		name,
+		style,
+		...rest,
+		children: [/* @__PURE__ */ jsx(Field.Label, {
+			className: fieldStyles.label,
+			children: /* @__PURE__ */ jsx(FormTitle, {
+				avatar,
+				desc,
+				tag,
+				title: label
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cx(fieldStyles.control, mergedLayout === "vertical" && fieldStyles.controlVertical),
+			style: mergedMinWidth === void 0 || mergedMinWidth === null || mergedMinWidth === "" ? void 0 : { minWidth: typeof mergedMinWidth === "number" ? `${mergedMinWidth}px` : mergedMinWidth },
+			children: [control, /* @__PURE__ */ jsx(Field.Error, { className: fieldStyles.error })]
+		})]
+	})] });
+});
+FormField.displayName = "FormField";
+//#endregion
+export { FormField as default };
+
+//# sourceMappingURL=FormField.mjs.map

package/es/base-ui/Form/components/FormField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.mjs","names":[],"sources":["../../../../src/base-ui/Form/components/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport { cx, useResponsive } from 'antd-style';\nimport { cloneElement, isValidElement, memo, useMemo } from 'react';\n\nimport { useFormContext } from '../context';\nimport { fieldStyles, fieldVariants } from '../style';\nimport type { FormFieldProps } from '../type';\nimport FormDivider from './FormDivider';\nimport FormTitle from './FormTitle';\n\nconst FormField = memo<FormFieldProps>(\n  ({\n    avatar,\n    children,\n    className,\n    desc,\n    divider,\n    hidden,\n    label,\n    layout,\n    minWidth,\n    name,\n    required,\n    style,\n    tag,\n    variant,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const config = useFormContext();\n\n    const mergedLayout = layout || (mobile ? 'vertical' : config.layout);\n    const mergedVariant = variant || config.variant;\n    const mergedMinWidth = minWidth ?? config.itemMinWidth;\n\n    const control = useMemo(() => {\n      if (!isValidElement(children)) return children;\n      const props = children.props as Record<string, unknown>;\n      const injected: Record<string, unknown> = {};\n      if (required && props.required === undefined) injected.required = true;\n      if (name) {\n        const initialValue = config.initialValues?.[name];\n        if (\n          initialValue !== undefined &&\n          props.value === undefined &&\n          props.defaultValue === undefined\n        )\n          injected.defaultValue = initialValue;\n      }\n      if (Object.keys(injected).length === 0) return children;\n      return cloneElement(children, injected as never);\n    }, [children, name, required, config.initialValues]);\n\n    if (hidden) return null;\n\n    return (\n      <>\n        {divider && <FormDivider visible={mergedVariant !== 'borderless'} />}\n        <Field.Root\n          className={cx(fieldVariants({ layout: mergedLayout }), className)}\n          name={name}\n          style={style}\n          {...rest}\n        >\n          <Field.Label className={fieldStyles.label}>\n            <FormTitle avatar={avatar} desc={desc} tag={tag} title={label} />\n          </Field.Label>\n          <div\n            className={cx(\n              fieldStyles.control,\n              mergedLayout === 'vertical' && fieldStyles.controlVertical,\n            )}\n            style={\n              mergedMinWidth === undefined || mergedMinWidth === null || mergedMinWidth === ''\n                ? undefined\n                : {\n                    minWidth:\n                      typeof mergedMinWidth === 'number' ? `${mergedMinWidth}px` : mergedMinWidth,\n                  }\n            }\n          >\n            {control}\n            <Field.Error className={fieldStyles.error} />\n          </div>\n        </Field.Root>\n      </>\n    );\n  },\n);\n\nFormField.displayName = 'FormField';\n\nexport default FormField;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,YAAY,MACf,EACC,QACA,UACA,WACA,MACA,SACA,QACA,OACA,QACA,UACA,MACA,UACA,OACA,KACA,SACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,SAAS,gBAAgB;CAE/B,MAAM,eAAe,WAAW,SAAS,aAAa,OAAO;CAC7D,MAAM,gBAAgB,WAAW,OAAO;CACxC,MAAM,iBAAiB,YAAY,OAAO;CAE1C,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,eAAe,SAAS,CAAE,QAAO;EACtC,MAAM,QAAQ,SAAS;EACvB,MAAM,WAAoC,EAAE;AAC5C,MAAI,YAAY,MAAM,aAAa,KAAA,EAAW,UAAS,WAAW;AAClE,MAAI,MAAM;GACR,MAAM,eAAe,OAAO,gBAAgB;AAC5C,OACE,iBAAiB,KAAA,KACjB,MAAM,UAAU,KAAA,KAChB,MAAM,iBAAiB,KAAA,EAEvB,UAAS,eAAe;;AAE5B,MAAI,OAAO,KAAK,SAAS,CAAC,WAAW,EAAG,QAAO;AAC/C,SAAO,aAAa,UAAU,SAAkB;IAC/C;EAAC;EAAU;EAAM;EAAU,OAAO;EAAc,CAAC;AAEpD,KAAI,OAAQ,QAAO;AAEnB,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,WAAW,oBAAC,aAAD,EAAa,SAAS,kBAAkB,cAAgB,CAAA,EACpE,qBAAC,MAAM,MAAP;EACE,WAAW,GAAG,cAAc,EAAE,QAAQ,cAAc,CAAC,EAAE,UAAU;EAC3D;EACC;EACP,GAAI;YAJN,CAME,oBAAC,MAAM,OAAP;GAAa,WAAW,YAAY;aAClC,oBAAC,WAAD;IAAmB;IAAc;IAAW;IAAK,OAAO;IAAS,CAAA;GACrD,CAAA,EACd,qBAAC,OAAD;GACE,WAAW,GACT,YAAY,SACZ,iBAAiB,cAAc,YAAY,gBAC5C;GACD,OACE,mBAAmB,KAAA,KAAa,mBAAmB,QAAQ,mBAAmB,KAC1E,KAAA,IACA,EACE,UACE,OAAO,mBAAmB,WAAW,GAAG,eAAe,MAAM,gBAChE;aAXT,CAcG,SACD,oBAAC,MAAM,OAAP,EAAa,WAAW,YAAY,OAAS,CAAA,CACzC;KACK;IACZ,EAAA,CAAA;EAGR;AAED,UAAU,cAAc"}

package/es/base-ui/Form/components/FormFlatGroup.d.mts

@@ -0,0 +1,8 @@
+import { FormFlatGroupProps } from "../type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Form/components/FormFlatGroup.d.ts
+declare const FormFlatGroup: _$react.NamedExoticComponent<FormFlatGroupProps>;
+//#endregion
+export { FormFlatGroup };
+//# sourceMappingURL=FormFlatGroup.d.mts.map

package/es/base-ui/Form/components/FormFlatGroup.mjs

@@ -0,0 +1,20 @@
+"use client";
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import { flatGroupStyles, flatGroupVariants } from "../style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx, useResponsive } from "antd-style";
+//#region src/base-ui/Form/components/FormFlatGroup.tsx
+const FormFlatGroup = memo(({ className, children, variant = "borderless", ...rest }) => {
+	const { mobile } = useResponsive();
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: cx(mobile ? flatGroupStyles.mobile : flatGroupVariants({ variant }), className),
+		...rest,
+		children
+	});
+});
+FormFlatGroup.displayName = "FormFlatGroup";
+//#endregion
+export { FormFlatGroup as default };
+
+//# sourceMappingURL=FormFlatGroup.mjs.map

package/es/base-ui/Form/components/FormFlatGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFlatGroup.mjs","names":["Flexbox"],"sources":["../../../../src/base-ui/Form/components/FormFlatGroup.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { flatGroupStyles, flatGroupVariants } from '../style';\nimport type { FormFlatGroupProps } from '../type';\n\nconst FormFlatGroup = memo<FormFlatGroupProps>(\n  ({ className, children, variant = 'borderless', ...rest }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        className={cx(mobile ? flatGroupStyles.mobile : flatGroupVariants({ variant }), className)}\n        {...rest}\n      >\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nFormFlatGroup.displayName = 'FormFlatGroup';\n\nexport default FormFlatGroup;\n"],"mappings":";;;;;;;AAUA,MAAM,gBAAgB,MACnB,EAAE,WAAW,UAAU,UAAU,cAAc,GAAG,WAAW;CAC5D,MAAM,EAAE,WAAW,eAAe;AAElC,QACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAAS,gBAAgB,SAAS,kBAAkB,EAAE,SAAS,CAAC,EAAE,UAAU;EAC1F,GAAI;EAEH;EACO,CAAA;EAGf;AAED,cAAc,cAAc"}

package/es/base-ui/Form/components/FormFooter.d.mts

@@ -0,0 +1,8 @@
+import { FormFooterProps } from "../type.mjs";
+import { FC } from "react";
+
+//#region src/base-ui/Form/components/FormFooter.d.ts
+declare const FormFooter: FC<FormFooterProps>;
+//#endregion
+export { FormFooter };
+//# sourceMappingURL=FormFooter.d.mts.map

package/es/base-ui/Form/components/FormFooter.mjs

@@ -0,0 +1,20 @@
+"use client";
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import { footerStyles } from "../style.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/Form/components/FormFooter.tsx
+const FormFooter = ({ className, children, ...rest }) => /* @__PURE__ */ jsx(FlexBasic_default, {
+	horizontal: true,
+	align: "center",
+	className: cx(footerStyles.root, className),
+	gap: 8,
+	justify: "flex-end",
+	...rest,
+	children
+});
+FormFooter.displayName = "FormFooter";
+//#endregion
+export { FormFooter as default };
+
+//# sourceMappingURL=FormFooter.mjs.map

package/es/base-ui/Form/components/FormFooter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFooter.mjs","names":["Flexbox"],"sources":["../../../../src/base-ui/Form/components/FormFooter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { footerStyles } from '../style';\nimport type { FormFooterProps } from '../type';\n\nconst FormFooter: FC<FormFooterProps> = ({ className, children, ...rest }) => (\n  <Flexbox\n    horizontal\n    align={'center'}\n    className={cx(footerStyles.root, className)}\n    gap={8}\n    justify={'flex-end'}\n    {...rest}\n  >\n    {children}\n  </Flexbox>\n);\n\nFormFooter.displayName = 'FormFooter';\n\nexport default FormFooter;\n"],"mappings":";;;;;;AAUA,MAAM,cAAmC,EAAE,WAAW,UAAU,GAAG,WACjE,oBAACA,mBAAD;CACE,YAAA;CACA,OAAO;CACP,WAAW,GAAG,aAAa,MAAM,UAAU;CAC3C,KAAK;CACL,SAAS;CACT,GAAI;CAEH;CACO,CAAA;AAGZ,WAAW,cAAc"}

package/es/base-ui/Form/components/FormGroup.d.mts

@@ -0,0 +1,8 @@
+import { FormGroupProps } from "../type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Form/components/FormGroup.d.ts
+declare const FormGroup: _$react.NamedExoticComponent<FormGroupProps>;
+//#endregion
+export { FormGroup };
+//# sourceMappingURL=FormGroup.d.mts.map

package/es/base-ui/Form/components/FormGroup.mjs

@@ -0,0 +1,87 @@
+"use client";
+import Icon from "../../../Icon/Icon.mjs";
+import { groupStyles, groupVariants } from "../style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useResponsive } from "antd-style";
+import { ChevronDown } from "lucide-react";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/base-ui/Form/components/FormGroup.tsx
+const GroupTitle = memo(({ icon, title, desc, variant, mobile }) => /* @__PURE__ */ jsxs("div", {
+	className: cx(groupStyles.title, variant === "borderless" && !mobile && groupStyles.titleBorderless, mobile && groupStyles.mobileTitle),
+	children: [icon && /* @__PURE__ */ jsx(Icon, { icon }), /* @__PURE__ */ jsxs("div", { children: [title, desc && /* @__PURE__ */ jsx("div", {
+		className: groupStyles.desc,
+		children: desc
+	})] })]
+}));
+GroupTitle.displayName = "GroupTitle";
+const FormGroup = memo(({ className, icon, title, children, extra, variant = "borderless", defaultActive = true, collapsible, active, onCollapse, desc, keyValue: _keyValue, ...rest }) => {
+	const { mobile } = useResponsive();
+	const isBorderless = variant === "borderless";
+	const isCollapsible = collapsible === void 0 ? !isBorderless : collapsible;
+	if (mobile) return /* @__PURE__ */ jsxs("div", {
+		className,
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(groupStyles.header, groupStyles.mobileHeader),
+			children: [/* @__PURE__ */ jsx(GroupTitle, {
+				mobile: true,
+				desc,
+				icon,
+				title
+			}), extra]
+		}), /* @__PURE__ */ jsx("div", {
+			className: groupStyles.mobileBody,
+			children
+		})]
+	});
+	if (!isCollapsible) return /* @__PURE__ */ jsxs("div", {
+		className: cx(groupVariants({ variant }), className),
+		...rest,
+		children: [title && /* @__PURE__ */ jsxs("div", {
+			className: cx(groupStyles.header, isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed),
+			children: [/* @__PURE__ */ jsx(GroupTitle, {
+				desc,
+				icon,
+				title,
+				variant
+			}), extra]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx(groupStyles.body, !isBorderless && groupStyles.bodyBoxed),
+			children
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		className: cx(groupVariants({ variant }), className),
+		defaultOpen: defaultActive,
+		open: active,
+		onOpenChange: onCollapse,
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(groupStyles.header, isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed),
+			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				className: groupStyles.trigger,
+				children: [/* @__PURE__ */ jsx(GroupTitle, {
+					desc,
+					icon,
+					title,
+					variant
+				}), /* @__PURE__ */ jsx(Icon, {
+					className: groupStyles.chevron,
+					icon: ChevronDown
+				})]
+			}), extra]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			className: groupStyles.panel,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cx(groupStyles.body, !isBorderless && groupStyles.bodyBoxed),
+				children
+			})
+		})]
+	});
+});
+FormGroup.displayName = "FormGroup";
+//#endregion
+export { FormGroup as default };
+
+//# sourceMappingURL=FormGroup.mjs.map

package/es/base-ui/Form/components/FormGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.mjs","names":[],"sources":["../../../../src/base-ui/Form/components/FormGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport { cx, useResponsive } from 'antd-style';\nimport { ChevronDown } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { groupStyles, groupVariants } from '../style';\nimport type { FormGroupProps } from '../type';\n\nconst GroupTitle = memo<{\n  desc?: ReactNode;\n  icon?: FormGroupProps['icon'];\n  mobile?: boolean;\n  title?: ReactNode;\n  variant?: FormGroupProps['variant'];\n}>(({ icon, title, desc, variant, mobile }) => (\n  <div\n    className={cx(\n      groupStyles.title,\n      variant === 'borderless' && !mobile && groupStyles.titleBorderless,\n      mobile && groupStyles.mobileTitle,\n    )}\n  >\n    {icon && <Icon icon={icon} />}\n    <div>\n      {title}\n      {desc && <div className={groupStyles.desc}>{desc}</div>}\n    </div>\n  </div>\n));\n\nGroupTitle.displayName = 'GroupTitle';\n\nconst FormGroup = memo<FormGroupProps>(\n  ({\n    className,\n    icon,\n    title,\n    children,\n    extra,\n    variant = 'borderless',\n    defaultActive = true,\n    collapsible,\n    active,\n    onCollapse,\n    desc,\n    keyValue: _keyValue,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const isBorderless = variant === 'borderless';\n    const isCollapsible = collapsible === undefined ? !isBorderless : collapsible;\n\n    if (mobile)\n      return (\n        <div className={className} {...rest}>\n          <div className={cx(groupStyles.header, groupStyles.mobileHeader)}>\n            <GroupTitle mobile desc={desc} icon={icon} title={title} />\n            {extra}\n          </div>\n          <div className={groupStyles.mobileBody}>{children}</div>\n        </div>\n      );\n\n    if (!isCollapsible)\n      return (\n        <div className={cx(groupVariants({ variant }), className)} {...rest}>\n          {title && (\n            <div\n              className={cx(\n                groupStyles.header,\n                isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed,\n              )}\n            >\n              <GroupTitle desc={desc} icon={icon} title={title} variant={variant} />\n              {extra}\n            </div>\n          )}\n          <div className={cx(groupStyles.body, !isBorderless && groupStyles.bodyBoxed)}>\n            {children}\n          </div>\n        </div>\n      );\n\n    return (\n      <Collapsible.Root\n        className={cx(groupVariants({ variant }), className)}\n        defaultOpen={defaultActive}\n        open={active}\n        onOpenChange={onCollapse}\n        {...rest}\n      >\n        <div\n          className={cx(\n            groupStyles.header,\n            isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed,\n          )}\n        >\n          <Collapsible.Trigger className={groupStyles.trigger}>\n            <GroupTitle desc={desc} icon={icon} title={title} variant={variant} />\n            <Icon className={groupStyles.chevron} icon={ChevronDown} />\n          </Collapsible.Trigger>\n          {extra}\n        </div>\n        <Collapsible.Panel className={groupStyles.panel}>\n          <div className={cx(groupStyles.body, !isBorderless && groupStyles.bodyBoxed)}>\n            {children}\n          </div>\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    );\n  },\n);\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":";;;;;;;;;AAYA,MAAM,aAAa,MAMf,EAAE,MAAM,OAAO,MAAM,SAAS,aAChC,qBAAC,OAAD;CACE,WAAW,GACT,YAAY,OACZ,YAAY,gBAAgB,CAAC,UAAU,YAAY,iBACnD,UAAU,YAAY,YACvB;WALH,CAOG,QAAQ,oBAAC,MAAD,EAAY,MAAQ,CAAA,EAC7B,qBAAC,OAAD,EAAA,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;EAAK,WAAW,YAAY;YAAO;EAAW,CAAA,CACnD,EAAA,CAAA,CACF;GACN;AAEF,WAAW,cAAc;AAEzB,MAAM,YAAY,MACf,EACC,WACA,MACA,OACA,UACA,OACA,UAAU,cACV,gBAAgB,MAChB,aACA,QACA,YACA,MACA,UAAU,WACV,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,eAAe,YAAY;CACjC,MAAM,gBAAgB,gBAAgB,KAAA,IAAY,CAAC,eAAe;AAElE,KAAI,OACF,QACE,qBAAC,OAAD;EAAgB;EAAW,GAAI;YAA/B,CACE,qBAAC,OAAD;GAAK,WAAW,GAAG,YAAY,QAAQ,YAAY,aAAa;aAAhE,CACE,oBAAC,YAAD;IAAY,QAAA;IAAa;IAAY;IAAa;IAAS,CAAA,EAC1D,MACG;MACN,oBAAC,OAAD;GAAK,WAAW,YAAY;GAAa;GAAe,CAAA,CACpD;;AAGV,KAAI,CAAC,cACH,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EAAE,GAAI;YAA/D,CACG,SACC,qBAAC,OAAD;GACE,WAAW,GACT,YAAY,QACZ,eAAe,YAAY,mBAAmB,YAAY,YAC3D;aAJH,CAME,oBAAC,YAAD;IAAkB;IAAY;IAAa;IAAgB;IAAW,CAAA,EACrE,MACG;MAER,oBAAC,OAAD;GAAK,WAAW,GAAG,YAAY,MAAM,CAAC,gBAAgB,YAAY,UAAU;GACzE;GACG,CAAA,CACF;;AAGV,QACE,qBAAC,YAAY,MAAb;EACE,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,aAAa;EACb,MAAM;EACN,cAAc;EACd,GAAI;YALN,CAOE,qBAAC,OAAD;GACE,WAAW,GACT,YAAY,QACZ,eAAe,YAAY,mBAAmB,YAAY,YAC3D;aAJH,CAME,qBAAC,YAAY,SAAb;IAAqB,WAAW,YAAY;cAA5C,CACE,oBAAC,YAAD;KAAkB;KAAY;KAAa;KAAgB;KAAW,CAAA,EACtE,oBAAC,MAAD;KAAM,WAAW,YAAY;KAAS,MAAM;KAAe,CAAA,CACvC;OACrB,MACG;MACN,oBAAC,YAAY,OAAb;GAAmB,WAAW,YAAY;aACxC,oBAAC,OAAD;IAAK,WAAW,GAAG,YAAY,MAAM,CAAC,gBAAgB,YAAY,UAAU;IACzE;IACG,CAAA;GACY,CAAA,CACH;;EAGxB;AAED,UAAU,cAAc"}

package/es/base-ui/Form/components/FormSubmitFooter.d.mts

@@ -0,0 +1,8 @@
+import { FormSubmitFooterProps } from "../type.mjs";
+import * as _$react from "react";
+
+//#region src/base-ui/Form/components/FormSubmitFooter.d.ts
+declare const FormSubmitFooter: _$react.NamedExoticComponent<FormSubmitFooterProps>;
+//#endregion
+export { FormSubmitFooter };
+//# sourceMappingURL=FormSubmitFooter.d.mts.map

package/es/base-ui/Form/components/FormSubmitFooter.mjs

@@ -0,0 +1,118 @@
+"use client";
+import { useMotionComponent } from "../../../MotionProvider/index.mjs";
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import Icon from "../../../Icon/Icon.mjs";
+import { useTranslation } from "../../../i18n/useTranslation.mjs";
+import form_default from "../../../i18n/resources/en/form.mjs";
+import Button from "../../Button/Button.mjs";
+import { submitFooterStyles } from "../style.mjs";
+import { useFormContext } from "../context.mjs";
+import { memo, useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import { InfoIcon } from "lucide-react";
+//#region src/base-ui/Form/components/FormSubmitFooter.tsx
+const FormSubmitFooter = memo(({ enableReset = true, buttonProps, float, onReset, saveButtonProps, resetButtonProps, enableUnsavedWarning, children, texts, className, ...rest }) => {
+	const Motion = useMotionComponent();
+	const { hasUnsavedChanges, requestReset, submitLoading } = useFormContext();
+	const { t } = useTranslation(form_default);
+	const unsavedWarningText = texts?.unSavedWarning ?? t("form.unsavedWarning");
+	const unsavedText = texts?.unSaved ?? t("form.unsavedChanges");
+	const resetText = texts?.reset ?? t("form.reset");
+	const submitText = texts?.submit ?? t("form.submit");
+	useEffect(() => {
+		if (!enableUnsavedWarning || typeof window === "undefined" || !hasUnsavedChanges) return;
+		const fn = (e) => {
+			e.preventDefault();
+			e.returnValue = unsavedWarningText;
+		};
+		window.addEventListener("beforeunload", fn);
+		return () => window.removeEventListener("beforeunload", fn);
+	}, [
+		enableUnsavedWarning,
+		hasUnsavedChanges,
+		unsavedWarningText
+	]);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		(float || hasUnsavedChanges) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+			color: cssVar.colorTextDescription,
+			icon: InfoIcon,
+			size: 12,
+			style: { marginLeft: 8 }
+		}), /* @__PURE__ */ jsx("span", {
+			style: {
+				color: cssVar.colorTextDescription,
+				flex: "none",
+				fontSize: 12,
+				marginRight: float ? 16 : 4
+			},
+			children: unsavedText
+		})] }),
+		children,
+		enableReset && (float || hasUnsavedChanges) && /* @__PURE__ */ jsx(Button, {
+			htmlType: "button",
+			shape: float ? "round" : void 0,
+			type: "fill",
+			onClick: () => {
+				requestReset();
+				onReset?.();
+			},
+			...buttonProps,
+			...resetButtonProps,
+			children: resetText
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			htmlType: "submit",
+			loading: submitLoading,
+			shape: float ? "round" : void 0,
+			type: "primary",
+			...buttonProps,
+			...saveButtonProps,
+			children: submitText
+		})
+	] });
+	if (!float) return /* @__PURE__ */ jsx(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		className: cx(submitFooterStyles.footer, className),
+		gap: 8,
+		justify: "flex-end",
+		...rest,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Motion.div, {
+		animate: hasUnsavedChanges ? "visible" : "hidden",
+		className: submitFooterStyles.floatFooter,
+		initial: "hidden",
+		transition: {
+			duration: .1,
+			ease: "easeOut"
+		},
+		variants: {
+			hidden: {
+				opacity: 0,
+				x: "-50%",
+				y: 20
+			},
+			visible: {
+				opacity: 1,
+				x: "-50%",
+				y: 0
+			}
+		},
+		children: /* @__PURE__ */ jsx(FlexBasic_default, {
+			horizontal: true,
+			align: "center",
+			className,
+			gap: 8,
+			justify: "center",
+			...rest,
+			children: content
+		})
+	});
+});
+FormSubmitFooter.displayName = "FormSubmitFooter";
+//#endregion
+export { FormSubmitFooter as default };
+
+//# sourceMappingURL=FormSubmitFooter.mjs.map

package/es/base-ui/Form/components/FormSubmitFooter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSubmitFooter.mjs","names":["formMessages","Flexbox","styles"],"sources":["../../../../src/base-ui/Form/components/FormSubmitFooter.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { InfoIcon } from 'lucide-react';\nimport { memo, useEffect } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { Flexbox } from '@/Flex';\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { useFormContext } from '../context';\nimport { submitFooterStyles as styles } from '../style';\nimport type { FormSubmitFooterProps } from '../type';\n\nconst FormSubmitFooter = memo<FormSubmitFooterProps>(\n  ({\n    enableReset = true,\n    buttonProps,\n    float,\n    onReset,\n    saveButtonProps,\n    resetButtonProps,\n    enableUnsavedWarning,\n    children,\n    texts,\n    className,\n    ...rest\n  }) => {\n    const Motion = useMotionComponent();\n    const { hasUnsavedChanges, requestReset, submitLoading } = useFormContext();\n    const { t } = useTranslation(formMessages);\n\n    const unsavedWarningText = texts?.unSavedWarning ?? t('form.unsavedWarning');\n    const unsavedText = texts?.unSaved ?? t('form.unsavedChanges');\n    const resetText = texts?.reset ?? t('form.reset');\n    const submitText = texts?.submit ?? t('form.submit');\n\n    useEffect(() => {\n      if (!enableUnsavedWarning || typeof window === 'undefined' || !hasUnsavedChanges) return;\n      const fn = (e: BeforeUnloadEvent) => {\n        e.preventDefault();\n        e.returnValue = unsavedWarningText;\n      };\n      window.addEventListener('beforeunload', fn);\n      return () => window.removeEventListener('beforeunload', fn);\n    }, [enableUnsavedWarning, hasUnsavedChanges, unsavedWarningText]);\n\n    const content = (\n      <>\n        {(float || hasUnsavedChanges) && (\n          <>\n            <Icon\n              color={cssVar.colorTextDescription}\n              icon={InfoIcon}\n              size={12}\n              style={{ marginLeft: 8 }}\n            />\n            <span\n              style={{\n                color: cssVar.colorTextDescription,\n                flex: 'none',\n                fontSize: 12,\n                marginRight: float ? 16 : 4,\n              }}\n            >\n              {unsavedText}\n            </span>\n          </>\n        )}\n        {children}\n        {enableReset && (float || hasUnsavedChanges) && (\n          <Button\n            htmlType={'button'}\n            shape={float ? 'round' : undefined}\n            type={'fill'}\n            onClick={() => {\n              requestReset();\n              onReset?.();\n            }}\n            {...buttonProps}\n            {...resetButtonProps}\n          >\n            {resetText}\n          </Button>\n        )}\n        <Button\n          htmlType={'submit'}\n          loading={submitLoading}\n          shape={float ? 'round' : undefined}\n          type={'primary'}\n          {...buttonProps}\n          {...saveButtonProps}\n        >\n          {submitText}\n        </Button>\n      </>\n    );\n\n    if (!float)\n      return (\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.footer, className)}\n          gap={8}\n          justify={'flex-end'}\n          {...rest}\n        >\n          {content}\n        </Flexbox>\n      );\n\n    return (\n      <Motion.div\n        animate={hasUnsavedChanges ? 'visible' : 'hidden'}\n        className={styles.floatFooter}\n        initial={'hidden'}\n        transition={{ duration: 0.1, ease: 'easeOut' }}\n        variants={{\n          hidden: {\n            opacity: 0,\n            x: '-50%',\n            y: 20,\n          },\n          visible: {\n            opacity: 1,\n            x: '-50%',\n            y: 0,\n          },\n        }}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={className}\n          gap={8}\n          justify={'center'}\n          {...rest}\n        >\n          {content}\n        </Flexbox>\n      </Motion.div>\n    );\n  },\n);\n\nFormSubmitFooter.displayName = 'FormSubmitFooter';\n\nexport default FormSubmitFooter;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,mBAAmB,MACtB,EACC,cAAc,MACd,aACA,OACA,SACA,iBACA,kBACA,sBACA,UACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,SAAS,oBAAoB;CACnC,MAAM,EAAE,mBAAmB,cAAc,kBAAkB,gBAAgB;CAC3E,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,MAAM,qBAAqB,OAAO,kBAAkB,EAAE,sBAAsB;CAC5E,MAAM,cAAc,OAAO,WAAW,EAAE,sBAAsB;CAC9D,MAAM,YAAY,OAAO,SAAS,EAAE,aAAa;CACjD,MAAM,aAAa,OAAO,UAAU,EAAE,cAAc;AAEpD,iBAAgB;AACd,MAAI,CAAC,wBAAwB,OAAO,WAAW,eAAe,CAAC,kBAAmB;EAClF,MAAM,MAAM,MAAyB;AACnC,KAAE,gBAAgB;AAClB,KAAE,cAAc;;AAElB,SAAO,iBAAiB,gBAAgB,GAAG;AAC3C,eAAa,OAAO,oBAAoB,gBAAgB,GAAG;IAC1D;EAAC;EAAsB;EAAmB;EAAmB,CAAC;CAEjE,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;GACI,SAAS,sBACT,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,OAAO,OAAO;GACd,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY,GAAG;GACxB,CAAA,EACF,oBAAC,QAAD;GACE,OAAO;IACL,OAAO,OAAO;IACd,MAAM;IACN,UAAU;IACV,aAAa,QAAQ,KAAK;IAC3B;aAEA;GACI,CAAA,CACN,EAAA,CAAA;EAEJ;EACA,gBAAgB,SAAS,sBACxB,oBAAC,QAAD;GACE,UAAU;GACV,OAAO,QAAQ,UAAU,KAAA;GACzB,MAAM;GACN,eAAe;AACb,kBAAc;AACd,eAAW;;GAEb,GAAI;GACJ,GAAI;aAEH;GACM,CAAA;EAEX,oBAAC,QAAD;GACE,UAAU;GACV,SAAS;GACT,OAAO,QAAQ,UAAU,KAAA;GACzB,MAAM;GACN,GAAI;GACJ,GAAI;aAEH;GACM,CAAA;EACR,EAAA,CAAA;AAGL,KAAI,CAAC,MACH,QACE,oBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAGC,mBAAO,QAAQ,UAAU;EACvC,KAAK;EACL,SAAS;EACT,GAAI;YAEH;EACO,CAAA;AAGd,QACE,oBAAC,OAAO,KAAR;EACE,SAAS,oBAAoB,YAAY;EACzC,WAAWA,mBAAO;EAClB,SAAS;EACT,YAAY;GAAE,UAAU;GAAK,MAAM;GAAW;EAC9C,UAAU;GACR,QAAQ;IACN,SAAS;IACT,GAAG;IACH,GAAG;IACJ;GACD,SAAS;IACP,SAAS;IACT,GAAG;IACH,GAAG;IACJ;GACF;YAED,oBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACI;GACX,KAAK;GACL,SAAS;GACT,GAAI;aAEH;GACO,CAAA;EACC,CAAA;EAGlB;AAED,iBAAiB,cAAc"}

package/es/base-ui/Form/components/FormTitle.d.mts

@@ -0,0 +1,8 @@
+import { FormTitleProps } from "../type.mjs";
+import { FC } from "react";
+
+//#region src/base-ui/Form/components/FormTitle.d.ts
+declare const FormTitle: FC<FormTitleProps>;
+//#endregion
+export { FormTitle };
+//# sourceMappingURL=FormTitle.d.mts.map