@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/Form/Form.mjs

@@ -1,27 +1,86 @@
 "use client";
-import { variants } from "./style.mjs";
-import FormGroup from "./components/FormGroup.mjs";
-import FormItem from "./components/FormItem.mjs";
-import { FormProvider } from "./components/FormProvider.mjs";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { useResponsive } from "../styles/theme/scope.mjs";
+import { formMarker } from "./marker.stylex.mjs";
+import { rootStyles } from "./style.mjs";
+import { FormContext } from "./context.mjs";
+import FormField from "./components/FormField.mjs";
 import FormFlatGroup from "./components/FormFlatGroup.mjs";
-import { memo, useCallback, useState } from "react";
+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 "antd";
+import { Form } from "@base-ui/react/form";
 //#region src/Form/Form.tsx
-const Form$1 = memo(({ className, itemMinWidth, footer, form, items = [], children, itemsType = "group", itemVariant, variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, ref, layout, ...rest }) => {
+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 mapFlat = useCallback((item, itemIndex) => /* @__PURE__ */ jsx(FormItem, {
+	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,
-		minWidth: itemMinWidth,
 		style: customStyles?.item,
 		variant,
 		...item
 	}, itemIndex), [
-		itemMinWidth,
 		variant,
 		classNames,
 		customStyles
@@ -31,13 +90,11 @@ const Form$1 = memo(({ className, itemMinWidth, footer, form, items = [], childr
 		return /* @__PURE__ */ jsx(FormGroup, {
 			active: activeKey && group?.key ? activeKey.includes(key) : void 0,
 			className: classNames?.group,
-			classNames,
 			collapsible: isUndefined(group.collapsible) ? collapsible : group.collapsible,
+			desc: group?.desc,
 			extra: group?.extra,
 			icon: group?.icon,
-			keyValue: key,
 			style: customStyles?.group,
-			styles: customStyles,
 			title: group.title,
 			variant: group?.variant || variant,
 			defaultActive: defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive,
@@ -55,39 +112,40 @@ const Form$1 = memo(({ className, itemMinWidth, footer, form, items = [], childr
 		onCollapse,
 		variant,
 		classNames,
-		customStyles
+		customStyles,
+		mapFlat
 	]);
-	return /* @__PURE__ */ jsx(FormProvider, {
-		config: {
-			form,
-			initialValues,
-			submitLoading
-		},
+	return /* @__PURE__ */ jsx(FormContext, {
+		value: context,
 		children: /* @__PURE__ */ jsxs(Form, {
-			className: cx(variants({ variant }), className),
-			colon: false,
-			form,
-			initialValues,
-			layout: layout || (mobile ? "vertical" : "horizontal"),
-			ref,
-			variant: itemVariant,
-			style: {
+			ref: mergedRef,
+			...styleProps([
+				formMarker,
+				rootStyles.root,
+				variant === "borderless" && rootStyles.borderless
+			], className, {
 				gap,
 				...style
-			},
-			onFinish: async (...finishProps) => {
+			}),
+			onFormSubmit: async (values, eventDetails) => {
+				onFormSubmit?.(values, eventDetails);
 				if (!onFinish) return;
 				setSubmitLoading(true);
-				await onFinish(...finishProps);
-				setSubmitLoading(false);
+				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, {
+				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))
+					children: items.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))
 				}) : void 0,
 				children,
 				footer

package/es/Form/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","names":["Form","AntForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as AntForm } from 'antd';\nimport { cx, useResponsive } from 'antd-style';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useState } from 'react';\n\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport FormItem from './components/FormItem';\nimport { FormProvider } from './components/FormProvider';\nimport { variants } from './style';\nimport type { FormGroupItemType, FormItemProps, FormProps } from './type';\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    form,\n    items = [],\n    children,\n    itemsType = 'group',\n    itemVariant,\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    ref,\n    layout,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const [submitLoading, setSubmitLoading] = useState(false);\n\n    const mapFlat = useCallback(\n      (item: FormItemProps, itemIndex: number) => (\n        <FormItem\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          minWidth={itemMinWidth}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [itemMinWidth, 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            classNames={classNames}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            keyValue={key}\n            style={customStyles?.group}\n            styles={customStyles}\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      [activeKey, collapsible, defaultActiveKey, onCollapse, variant, classNames, customStyles],\n    );\n\n    return (\n      <FormProvider\n        config={{\n          form,\n          initialValues,\n          submitLoading,\n        }}\n      >\n        <AntForm\n          className={cx(variants({ variant }), className)}\n          colon={false}\n          form={form}\n          initialValues={initialValues}\n          layout={layout || (mobile ? 'vertical' : 'horizontal')}\n          ref={ref}\n          variant={itemVariant}\n          style={{\n            gap,\n            ...style,\n          }}\n          onFinish={async (...finishProps) => {\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            await onFinish(...finishProps);\n            setSubmitLoading(false);\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 FormItemProps[])\n                  ?.filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </AntForm>\n      </FormProvider>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,SAAO,MACV,EACC,WACA,cACA,QACA,MACA,QAAQ,CAAC,GACT,UACA,YAAY,SACZ,aACA,UAAU,cACV,YACA,QAAQ,cACR,KACA,OACA,aACA,kBACA,eACA,WACA,YACA,UACA,KACA,QACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAExD,MAAM,UAAU,aACb,MAAqB,cACpB,oBAAC,UAAD;EACE,WAAW,YAAY;EACvB,SAAS,cAAc;EAEvB,UAAU;EACV,OAAO,cAAc;EACZ;EACT,GAAI;CACL,GALM,SAKN,GAEH;EAAC;EAAc;EAAS;EAAY;CAAY,CAClD;CAEA,MAAM,UAAU,aACb,OAA0B,eAAuB;EAChD,MAAM,MAAM,OAAO,OAAO;EAC1B,OACE,oBAAC,WAAD;GACE,QAAQ,aAAa,OAAO,MAAM,UAAU,SAAS,GAAG,IAAI,KAAA;GAC5D,WAAW,YAAY;GACX;GACZ,aAAa,YAAY,MAAM,WAAW,IAAI,cAAc,MAAM;GAClE,OAAO,OAAO;GACd,MAAM,OAAO;GAEb,UAAU;GACV,OAAO,cAAc;GACrB,QAAQ;GACR,OAAO,MAAM;GACb,SAAS,OAAO,WAAW;GAC3B,eACE,oBAAoB,OAAO,MAAM,iBAAiB,SAAS,GAAG,IAAI,OAAO;GAE3E,aAAa,WAAW;IACtB,IAAI,OAA4B,aAAa,oBAAoB,CAAC;IAClE,OAAO,KAAK,QAAQ,MAAM,MAAM,GAAG;IACnC,aAAa,SAAS,CAAC,GAAG,MAAM,GAAG,IAAI,IAAI;GAC7C;GAEC,UAAA,MAAM,QAAQ,MAAM,QAAQ,IACzB,MAAM,SAAS,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAAC,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC,IAC/E,MAAM;EACD,GAlBJ,GAkBI;CAEf,GACA;EAAC;EAAW;EAAa;EAAkB;EAAY;EAAS;EAAY;CAAY,CAC1F;CAEA,OACE,oBAAC,cAAD;EACE,QAAQ;GACN;GACA;GACA;EACF;EAEA,UAAA,qBAACC,MAAD;GACE,WAAW,GAAG,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS;GAC9C,OAAO;GACD;GACS;GACf,QAAQ,WAAW,SAAS,aAAa;GACpC;GACL,SAAS;GACT,OAAO;IACL;IACA,GAAG;GACL;GACA,UAAU,OAAO,GAAG,gBAAgB;IAClC,IAAI,CAAC,UAAU;IACf,iBAAiB,IAAI;IACrB,MAAM,SAAS,GAAG,WAAW;IAC7B,iBAAiB,KAAK;GACxB;GACA,GAAI;GAlBN,UAAA;IAoBG,SAAS,OAAO,SAAS,IACxB,cAAc,UACX,OAA+B,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC,IAEjE,oBAAC,eAAD;KACE,WAAW,YAAY;KACvB,OAAO,cAAc;KACZ;KAEP,UAAA,OACE,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAC/B,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC;IACvB,CAAA,IAEf,KAAA;IACH;IACA;GACM;;CACG,CAAA;AAElB,CACF;AAEA,OAAK,cAAc"}
+{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { formMarker } from './marker.stylex';\nimport { rootStyles } 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          ref={mergedRef}\n          {...styleProps(\n            [formMarker, rootStyles.root, variant === 'borderless' && rootStyles.borderless],\n            className,\n            { gap, ...style },\n          )}\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/Form/components/FormDivider.d.mts

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

package/es/Form/components/FormDivider.mjs

@@ -1,24 +1,16 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { dividerStyles } from "../style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { createStaticStyles, cx } from "antd-style";
-import { Divider } from "antd";
 //#region src/Form/components/FormDivider.tsx
-const styles = createStaticStyles(({ css }) => {
-	return { root: css`
-      margin: 0;
-      opacity: 0.66;
-    ` };
+const FormDivider = ({ visible = true, style, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	role: "separator",
+	...styleProps(dividerStyles.root, className, {
+		opacity: visible ? .66 : 0,
+		...style
+	}),
+	...rest
 });
-const FormDivider = ({ visible = true, style, className, ...rest }) => {
-	return /* @__PURE__ */ jsx(Divider, {
-		className: cx(styles.root, className),
-		style: {
-			opacity: visible ? 1 : 0,
-			...style
-		},
-		...rest
-	});
-};
 FormDivider.displayName = "FormDivider";
 //#endregion
 export { FormDivider as default };

package/es/Form/components/FormDivider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormDivider.mjs","names":["AntDivider"],"sources":["../../../src/Form/components/FormDivider.tsx"],"sourcesContent":["'use client';\n\nimport { Divider as AntDivider } from 'antd';\nimport { createStaticStyles, cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport type { FormDividerProps } from '../type';\n\nconst styles = createStaticStyles(({ css }) => {\n  return {\n    root: css`\n      margin: 0;\n      opacity: 0.66;\n    `,\n  };\n});\n\nconst FormDivider: FC<FormDividerProps> = ({ visible = true, style, className, ...rest }) => {\n  return (\n    <AntDivider\n      className={cx(styles.root, className)}\n      style={{\n        opacity: visible ? 1 : 0,\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n};\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";;;;;AAQA,MAAM,SAAS,oBAAoB,EAAE,UAAU;CAC7C,OAAO,EACL,MAAM,GAAG;;;MAIX;AACF,CAAC;AAED,MAAM,eAAqC,EAAE,UAAU,MAAM,OAAO,WAAW,GAAG,WAAW;CAC3F,OACE,oBAACA,SAAD;EACE,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,OAAO;GACL,SAAS,UAAU,IAAI;GACvB,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}
+{"version":3,"file":"FormDivider.mjs","names":[],"sources":["../../../src/Form/components/FormDivider.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { dividerStyles } from '../style';\nimport type { FormDividerProps } from '../type';\n\nconst FormDivider: FC<FormDividerProps> = ({ visible = true, style, className, ...rest }) => (\n  <div\n    role={'separator'}\n    {...styleProps(dividerStyles.root, className, { opacity: visible ? 0.66 : 0, ...style })}\n    {...rest}\n  />\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";;;;;AASA,MAAM,eAAqC,EAAE,UAAU,MAAM,OAAO,WAAW,GAAG,WAChF,oBAAC,OAAD;CACE,MAAM;CACN,GAAI,WAAW,cAAc,MAAM,WAAW;EAAE,SAAS,UAAU,MAAO;EAAG,GAAG;CAAM,CAAC;CACvF,GAAI;AACL,CAAA;AAGH,YAAY,cAAc"}

package/es/Form/components/FormField.d.mts

@@ -0,0 +1,6 @@
+import { FormFieldProps } from "../type.mjs";
+//#region src/Form/components/FormField.d.ts
+declare const FormField: import("react").NamedExoticComponent<FormFieldProps>;
+//#endregion
+export { FormField as default };
+//# sourceMappingURL=FormField.d.mts.map

package/es/Form/components/FormField.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useResponsive } from "../../styles/theme/scope.mjs";
+import { fieldLayoutStyles, fieldStyles } 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 * as stylex from "@stylexjs/stylex";
+import { Field } from "@base-ui/react/field";
+//#region src/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, {
+		name,
+		...styleProps([fieldStyles.root, fieldLayoutStyles[mergedLayout]], className, style),
+		...rest,
+		children: [/* @__PURE__ */ jsx(Field.Label, {
+			...stylex.props(fieldStyles.label),
+			children: /* @__PURE__ */ jsx(FormTitle, {
+				avatar,
+				desc,
+				tag,
+				title: label
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			...stylex.props(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, { ...stylex.props(fieldStyles.error) })]
+		})]
+	})] });
+});
+FormField.displayName = "FormField";
+//#endregion
+export { FormField as default };
+
+//# sourceMappingURL=FormField.mjs.map

package/es/Form/components/FormField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.mjs","names":[],"sources":["../../../src/Form/components/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport * as stylex from '@stylexjs/stylex';\nimport { cloneElement, isValidElement, memo, useMemo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport { useFormContext } from '../context';\nimport { fieldLayoutStyles, fieldStyles } 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          name={name}\n          {...styleProps([fieldStyles.root, fieldLayoutStyles[mergedLayout]], className, style)}\n          {...rest}\n        >\n          <Field.Label {...stylex.props(fieldStyles.label)}>\n            <FormTitle avatar={avatar} desc={desc} tag={tag} title={label} />\n          </Field.Label>\n          <div\n            {...stylex.props(\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 {...stylex.props(fieldStyles.error)} />\n          </div>\n        </Field.Root>\n      </>\n    );\n  },\n);\n\nFormField.displayName = 'FormField';\n\nexport default FormField;\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,YAAY,MAAsB,EACtC,QACA,UACA,WACA,MACA,SACA,QACA,OACA,QACA,UACA,MACA,UACA,OACA,KACA,SACA,GAAG,WACC;CACJ,MAAM,EACJ,WACE,cAAc;CAClB,MAAM,SAAS,eAAe;CAC9B,MAAM,eAAe,WAAW,SAAS,aAAa,OAAO;CAC7D,MAAM,gBAAgB,WAAW,OAAO;CACxC,MAAM,iBAAiB,YAAY,OAAO;CAC1C,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO;EACtC,MAAM,QAAQ,SAAS;EACvB,MAAM,WAAoC,CAAC;EAC3C,IAAI,YAAY,MAAM,aAAa,KAAA,GAAW,SAAS,WAAW;EAClE,IAAI,MAAM;GACR,MAAM,eAAe,OAAO,gBAAgB;GAC5C,IAAI,iBAAiB,KAAA,KAAa,MAAM,UAAU,KAAA,KAAa,MAAM,iBAAiB,KAAA,GAAW,SAAS,eAAe;EAC3H;EACA,IAAI,OAAO,KAAK,QAAQ,CAAC,CAAC,WAAW,GAAG,OAAO;EAC/C,OAAO,aAAa,UAAU,QAAiB;CACjD,GAAG;EAAC;EAAU;EAAM;EAAU,OAAO;CAAa,CAAC;CACnD,IAAI,QAAQ,OAAO;CACnB,OAAO,qBAAA,YAAA,EAAA,UAAA,CACA,WAAW,oBAAC,aAAD,EAAa,SAAS,kBAAkB,aAAe,CAAA,GACnE,qBAAC,MAAM,MAAP;EAAkB;EAAM,GAAI,WAAW,CAAC,YAAY,MAAM,kBAAkB,aAAa,GAAG,WAAW,KAAK;EAAG,GAAI;EAAnH,UAAA,CACE,oBAAC,MAAM,OAAP;GAAa,GAAI,OAAO,MAAM,YAAY,KAAK;GAC7C,UAAA,oBAAC,WAAD;IAAmB;IAAc;IAAW;IAAK,OAAO;GAAQ,CAAA;EACrD,CAAA,GACb,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,YAAY,SAAS,iBAAiB,cAAc,YAAY,eAAe;GAAG,OAAO,mBAAmB,KAAA,KAAa,mBAAmB,QAAQ,mBAAmB,KAAK,KAAA,IAAY,EAChN,UAAU,OAAO,mBAAmB,WAAW,GAAG,eAAe,MAAM,eACzE;GAFI,UAAA,CAGG,SACD,oBAAC,MAAM,OAAP,EAAa,GAAI,OAAO,MAAM,YAAY,KAAK,EAAI,CAAA,CAChD;EACK,CAAA,CAAA;CACZ,CAAA,CAAA,EAAA,CAAA;AACR,CAAC;AACD,UAAU,cAAc"}

package/es/Form/components/FormFlatGroup.d.mts

@@ -0,0 +1,6 @@
+import { FormFlatGroupProps } from "../type.mjs";
+//#region src/Form/components/FormFlatGroup.d.ts
+declare const FormFlatGroup: import("react").NamedExoticComponent<FormFlatGroupProps>;
+//#endregion
+export { FormFlatGroup as default };
+//# sourceMappingURL=FormFlatGroup.d.mts.map

package/es/Form/components/FormFlatGroup.mjs

@@ -1,15 +1,22 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import { flatGroupStyles, flatGroupVariants } from "../style.mjs";
+import { stylish } from "../../styles/stylex/stylish.mjs";
+import { useResponsive } from "../../styles/theme/scope.mjs";
+import { flatGroupStyles } from "../style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cx, useResponsive } from "antd-style";
 //#region src/Form/components/FormFlatGroup.tsx
-const FormFlatGroup = memo(({ className, children, variant = "borderless", ...rest }) => {
+const variantStyles = {
+	borderless: [stylish.variantBorderlessWithoutHover, flatGroupStyles.borderless],
+	filled: [stylish.variantFilledWithoutHover, flatGroupStyles.filled],
+	outlined: stylish.variantOutlinedWithoutHover
+};
+const FormFlatGroup = memo(({ className, children, variant = "borderless", style, ...rest }) => {
 	const { mobile } = useResponsive();
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
-		className: cx(mobile ? flatGroupStyles.mobile : flatGroupVariants({ variant }), className),
 		...rest,
+		...styleProps(mobile ? flatGroupStyles.mobile : [flatGroupStyles.root, variantStyles[variant]], className, style),
 		children
 	});
 });

package/es/Form/components/FormFlatGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormFlatGroup.mjs","names":["Flexbox","styles"],"sources":["../../../src/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    const styles = flatGroupStyles;\n\n    return (\n      <Flexbox\n        className={cx(mobile ? styles.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,cAAc;CAGjC,OACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAASC,gBAAO,SAAS,kBAAkB,EAAE,QAAQ,CAAC,GAAG,SAAS;EAChF,GAAI;EAEH;CACM,CAAA;AAEb,CACF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"FormFlatGroup.mjs","names":["Flexbox"],"sources":["../../../src/Form/components/FormFlatGroup.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport { flatGroupStyles } from '../style';\nimport type { FormFlatGroupProps } from '../type';\n\nconst variantStyles = {\n  borderless: [stylish.variantBorderlessWithoutHover, flatGroupStyles.borderless],\n  filled: [stylish.variantFilledWithoutHover, flatGroupStyles.filled],\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\nconst FormFlatGroup = memo<FormFlatGroupProps>(\n  ({ className, children, variant = 'borderless', style, ...rest }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        {...rest}\n        {...styleProps(\n          mobile ? flatGroupStyles.mobile : [flatGroupStyles.root, variantStyles[variant]],\n          className,\n          style,\n        )}\n      >\n        {children}\n      </Flexbox>\n    );\n  },\n);\n\nFormFlatGroup.displayName = 'FormFlatGroup';\n\nexport default FormFlatGroup;\n"],"mappings":";;;;;;;;;AAYA,MAAM,gBAAgB;CACpB,YAAY,CAAC,QAAQ,+BAA+B,gBAAgB,UAAU;CAC9E,QAAQ,CAAC,QAAQ,2BAA2B,gBAAgB,MAAM;CAClE,UAAU,QAAQ;AACpB;AAEA,MAAM,gBAAgB,MACnB,EAAE,WAAW,UAAU,UAAU,cAAc,OAAO,GAAG,WAAW;CACnE,MAAM,EAAE,WAAW,cAAc;CAEjC,OACE,oBAACA,mBAAD;EACE,GAAI;EACJ,GAAI,WACF,SAAS,gBAAgB,SAAS,CAAC,gBAAgB,MAAM,cAAc,QAAQ,GAC/E,WACA,KACF;EAEC;CACM,CAAA;AAEb,CACF;AAEA,cAAc,cAAc"}

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

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

package/es/Form/components/FormFooter.mjs

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

package/es/Form/components/FormFooter.mjs.map

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

package/es/Form/components/FormGroup.mjs

@@ -1,56 +1,99 @@
 "use client";
-import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { focusRing } from "../../styles/stylex/focusRing.mjs";
 import Icon from "../../Icon/Icon.mjs";
-import Collapse from "../../Collapse/Collapse.mjs";
-import { groupStyles, titleVariants } from "../style.mjs";
+import { stylish } from "../../styles/stylex/stylish.mjs";
+import { useResponsive, useThemeMode } from "../../styles/theme/scope.mjs";
+import { formGroupTriggerMarker } from "../marker.stylex.mjs";
+import { groupStyles } from "../style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx, useResponsive } from "antd-style";
-import { isUndefined } from "es-toolkit/compat";
+import * as stylex from "@stylexjs/stylex";
+import { ChevronDown } from "lucide-react";
+import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/Form/components/FormGroup.tsx
-const FormGroup = memo(({ className, icon, title, children, extra, variant = "borderless", defaultActive = true, collapsible, active, keyValue = "group", onCollapse, desc, ...rest }) => {
+const GroupTitle = memo(({ icon, title, desc, variant, mobile }) => /* @__PURE__ */ jsxs("div", {
+	...stylex.props(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", {
+		...stylex.props(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 styles = groupStyles;
 	const isBorderless = variant === "borderless";
-	const defaultCollapsible = isUndefined(collapsible) ? !isBorderless : collapsible;
-	const titleContent = /* @__PURE__ */ jsxs(FlexBasic_default, {
-		horizontal: true,
-		className: cx(titleVariants({ variant }), styles.titleMobile),
-		gap: 8,
-		children: [icon && /* @__PURE__ */ jsx(Icon, { icon }), title]
-	});
-	if (mobile) return /* @__PURE__ */ jsxs(FlexBasic_default, {
+	const isCollapsible = collapsible === void 0 ? !isBorderless : collapsible;
+	const { isDarkMode } = useThemeMode();
+	const isFilled = variant === "filled";
+	const rootProps = styleProps([
+		isFilled && groupStyles.rootFilled,
+		isFilled && isDarkMode && groupStyles.rootFilledDark,
+		variant === "outlined" && [stylish.variantOutlinedWithoutHover, groupStyles.rootOutlined]
+	], className);
+	const bodyProps = stylex.props(groupStyles.body, !isBorderless && groupStyles.bodyBoxed, isFilled && [stylish.variantOutlinedWithoutHover, groupStyles.bodyFilled], isFilled && !isDarkMode && groupStyles.bodyFilledLight);
+	const headerProps = stylex.props(groupStyles.header, isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed);
+	if (mobile) return /* @__PURE__ */ jsxs("div", {
 		className,
-		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
-			horizontal: true,
-			className: styles.mobileGroupHeader,
-			justify: "space-between",
-			children: [titleContent, extra]
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			...stylex.props(groupStyles.header, groupStyles.mobileHeader),
+			children: [/* @__PURE__ */ jsx(GroupTitle, {
+				mobile: true,
+				desc,
+				icon,
+				title
+			}), extra]
 		}), /* @__PURE__ */ jsx("div", {
-			className: styles.mobileGroupBody,
+			...stylex.props(groupStyles.mobileBody),
 			children
 		})]
 	});
-	return /* @__PURE__ */ jsx(Collapse, {
-		activeKey: isUndefined(active) ? void 0 : active ? [keyValue] : [],
-		className,
-		collapsible: defaultCollapsible,
-		defaultActiveKey: defaultActive ? [keyValue] : void 0,
-		variant,
-		classNames: {
-			header: isBorderless ? styles.titleBorderless : void 0,
-			title: isBorderless ? styles.titleBorderless : void 0
-		},
-		items: [{
-			children,
-			desc,
-			extra,
-			icon,
-			key: keyValue,
-			label: title
-		}],
-		onChange: (v) => onCollapse?.(v.length > 0),
-		...rest
+	if (!isCollapsible) return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		...rest,
+		children: [title && /* @__PURE__ */ jsxs("div", {
+			...headerProps,
+			children: [/* @__PURE__ */ jsx(GroupTitle, {
+				desc,
+				icon,
+				title,
+				variant
+			}), extra]
+		}), /* @__PURE__ */ jsx("div", {
+			"data-form-group-body": true,
+			...bodyProps,
+			children
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		...rootProps,
+		defaultOpen: defaultActive,
+		open: active,
+		onOpenChange: onCollapse,
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			...headerProps,
+			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				...stylex.props(formGroupTriggerMarker, focusRing.info, groupStyles.trigger),
+				children: [/* @__PURE__ */ jsx(GroupTitle, {
+					desc,
+					icon,
+					title,
+					variant
+				}), /* @__PURE__ */ jsx(Icon, {
+					...stylex.props(groupStyles.chevron),
+					icon: ChevronDown
+				})]
+			}), extra]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			...stylex.props(groupStyles.panel),
+			children: /* @__PURE__ */ jsx("div", {
+				"data-form-group-body": true,
+				...bodyProps,
+				children
+			})
+		})]
 	});
 });
 FormGroup.displayName = "FormGroup";

package/es/Form/components/FormGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.mjs","names":["Flexbox"],"sources":["../../../src/Form/components/FormGroup.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo } from 'react';\n\nimport Collapse from '@/Collapse';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { groupStyles, titleVariants } from '../style';\nimport type { FormGroupProps } from '../type';\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    keyValue = 'group',\n    onCollapse,\n    desc,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const styles = groupStyles;\n    const isBorderless = variant === 'borderless';\n\n    const defaultCollapsible = isUndefined(collapsible) ? !isBorderless : collapsible;\n\n    const titleContent = (\n      <Flexbox horizontal className={cx(titleVariants({ variant }), styles.titleMobile)} gap={8}>\n        {icon && <Icon icon={icon} />}\n        {title}\n      </Flexbox>\n    );\n\n    if (mobile)\n      return (\n        <Flexbox className={className}>\n          <Flexbox horizontal className={styles.mobileGroupHeader} justify={'space-between'}>\n            {titleContent}\n            {extra}\n          </Flexbox>\n          <div className={styles.mobileGroupBody}>{children}</div>\n        </Flexbox>\n      );\n\n    return (\n      <Collapse\n        activeKey={isUndefined(active) ? undefined : active ? [keyValue] : []}\n        className={className}\n        collapsible={defaultCollapsible}\n        defaultActiveKey={defaultActive ? [keyValue] : undefined}\n        variant={variant}\n        classNames={{\n          header: isBorderless ? styles.titleBorderless : undefined,\n          title: isBorderless ? styles.titleBorderless : undefined,\n        }}\n        items={[\n          {\n            children,\n            desc,\n            extra,\n            icon,\n            key: keyValue,\n            label: title,\n          },\n        ]}\n        onChange={(v) => onCollapse?.(v.length > 0)}\n        {...rest}\n      />\n    );\n  },\n);\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY,MACf,EACC,WACA,MACA,OACA,UACA,OACA,UAAU,cACV,gBAAgB,MAChB,aACA,QACA,WAAW,SACX,YACA,MACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,SAAS;CACf,MAAM,eAAe,YAAY;CAEjC,MAAM,qBAAqB,YAAY,WAAW,IAAI,CAAC,eAAe;CAEtE,MAAM,eACJ,qBAACA,mBAAD;EAAS,YAAA;EAAW,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,OAAO,WAAW;EAAG,KAAK;EAAxF,UAAA,CACG,QAAQ,oBAAC,MAAD,EAAY,KAAO,CAAA,GAC3B,KACM;;CAGX,IAAI,QACF,OACE,qBAACA,mBAAD;EAAoB;EAApB,UAAA,CACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,WAAW,OAAO;GAAmB,SAAS;GAAlE,UAAA,CACG,cACA,KACM;EACT,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAkB;EAAc,CAAA,CAChD;;CAGb,OACE,oBAAC,UAAD;EACE,WAAW,YAAY,MAAM,IAAI,KAAA,IAAY,SAAS,CAAC,QAAQ,IAAI,CAAC;EACzD;EACX,aAAa;EACb,kBAAkB,gBAAgB,CAAC,QAAQ,IAAI,KAAA;EACtC;EACT,YAAY;GACV,QAAQ,eAAe,OAAO,kBAAkB,KAAA;GAChD,OAAO,eAAe,OAAO,kBAAkB,KAAA;EACjD;EACA,OAAO,CACL;GACE;GACA;GACA;GACA;GACA,KAAK;GACL,OAAO;EACT,CACF;EACA,WAAW,MAAM,aAAa,EAAE,SAAS,CAAC;EAC1C,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"FormGroup.mjs","names":[],"sources":["../../../src/Form/components/FormGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronDown } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { useResponsive, useThemeMode } from '@/styles/theme/scope';\n\nimport { formGroupTriggerMarker } from '../marker.stylex';\nimport { groupStyles } 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    {...stylex.props(\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 {...stylex.props(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    const { isDarkMode } = useThemeMode();\n    const isFilled = variant === 'filled';\n    const rootProps = styleProps(\n      [\n        isFilled && groupStyles.rootFilled,\n        isFilled && isDarkMode && groupStyles.rootFilledDark,\n        variant === 'outlined' && [stylish.variantOutlinedWithoutHover, groupStyles.rootOutlined],\n      ],\n      className,\n    );\n    const bodyProps = stylex.props(\n      groupStyles.body,\n      !isBorderless && groupStyles.bodyBoxed,\n      isFilled && [stylish.variantOutlinedWithoutHover, groupStyles.bodyFilled],\n      isFilled && !isDarkMode && groupStyles.bodyFilledLight,\n    );\n    const headerProps = stylex.props(\n      groupStyles.header,\n      isBorderless ? groupStyles.headerBorderless : groupStyles.headerBoxed,\n    );\n\n    if (mobile)\n      return (\n        <div className={className} {...rest}>\n          <div {...stylex.props(groupStyles.header, groupStyles.mobileHeader)}>\n            <GroupTitle mobile desc={desc} icon={icon} title={title} />\n            {extra}\n          </div>\n          <div {...stylex.props(groupStyles.mobileBody)}>{children}</div>\n        </div>\n      );\n\n    if (!isCollapsible)\n      return (\n        <div {...rootProps} {...rest}>\n          {title && (\n            <div {...headerProps}>\n              <GroupTitle desc={desc} icon={icon} title={title} variant={variant} />\n              {extra}\n            </div>\n          )}\n          <div data-form-group-body {...bodyProps}>\n            {children}\n          </div>\n        </div>\n      );\n\n    return (\n      <Collapsible.Root\n        {...rootProps}\n        defaultOpen={defaultActive}\n        open={active}\n        onOpenChange={onCollapse}\n        {...rest}\n      >\n        <div {...headerProps}>\n          <Collapsible.Trigger\n            {...stylex.props(formGroupTriggerMarker, focusRing.info, groupStyles.trigger)}\n          >\n            <GroupTitle desc={desc} icon={icon} title={title} variant={variant} />\n            <Icon {...stylex.props(groupStyles.chevron)} icon={ChevronDown} />\n          </Collapsible.Trigger>\n          {extra}\n        </div>\n        <Collapsible.Panel {...stylex.props(groupStyles.panel)}>\n          <div data-form-group-body {...bodyProps}>\n            {children}\n          </div>\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    );\n  },\n);\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,aAAa,MAMf,EACF,MACA,OACA,MACA,SACA,aACI,qBAAC,OAAD;CAAK,GAAI,OAAO,MAAM,YAAY,OAAO,YAAY,gBAAgB,CAAC,UAAU,YAAY,iBAAiB,UAAU,YAAY,WAAW;CAA9I,UAAA,CACD,QAAQ,oBAAC,MAAD,EAAY,KAAO,CAAA,GAC5B,qBAAC,OAAD,EAAA,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,YAAY,IAAI;EAAI,UAAA;CAAU,CAAA,CAC1D,EAAA,CAAA,CACF;AAAC,CAAA,CAAA;AACR,WAAW,cAAc;AACzB,MAAM,YAAY,MAAsB,EACtC,WACA,MACA,OACA,UACA,OACA,UAAU,cACV,gBAAgB,MAChB,aACA,QACA,YACA,MACA,UAAU,WACV,GAAG,WACC;CACJ,MAAM,EACJ,WACE,cAAc;CAClB,MAAM,eAAe,YAAY;CACjC,MAAM,gBAAgB,gBAAgB,KAAA,IAAY,CAAC,eAAe;CAClE,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,WAAW;EAAC,YAAY,YAAY;EAAY,YAAY,cAAc,YAAY;EAAgB,YAAY,cAAc,CAAC,QAAQ,6BAA6B,YAAY,YAAY;CAAC,GAAG,SAAS;CAC7N,MAAM,YAAY,OAAO,MAAM,YAAY,MAAM,CAAC,gBAAgB,YAAY,WAAW,YAAY,CAAC,QAAQ,6BAA6B,YAAY,UAAU,GAAG,YAAY,CAAC,cAAc,YAAY,eAAe;CAC1N,MAAM,cAAc,OAAO,MAAM,YAAY,QAAQ,eAAe,YAAY,mBAAmB,YAAY,WAAW;CAC1H,IAAI,QAAQ,OAAO,qBAAC,OAAD;EAAgB;EAAW,GAAI;EAA/B,UAAA,CACX,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,YAAY,QAAQ,YAAY,YAAY;GAAlE,UAAA,CACE,oBAAC,YAAD;IAAY,QAAA;IAAa;IAAY;IAAa;GAAQ,CAAA,GACzD,KACE;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,YAAY,UAAU;GAAI;EAAc,CAAA,CAC3D;;CACX,IAAI,CAAC,eAAe,OAAO,qBAAC,OAAD;EAAK,GAAI;EAAW,GAAI;EAAxB,UAAA,CAClB,SAAS,qBAAC,OAAD;GAAK,GAAI;GAAT,UAAA,CACN,oBAAC,YAAD;IAAkB;IAAY;IAAa;IAAgB;GAAU,CAAA,GACpE,KACE;EACP,CAAA,GAAA,oBAAC,OAAD;GAAK,wBAAA;GAAqB,GAAI;GAC3B;EACE,CAAA,CACF;;CACX,OAAO,qBAAC,YAAY,MAAb;EAAkB,GAAI;EAAW,aAAa;EAAe,MAAM;EAAQ,cAAc;EAAY,GAAI;EAAzG,UAAA,CACD,qBAAC,OAAD;GAAK,GAAI;GAAT,UAAA,CACE,qBAAC,YAAY,SAAb;IAAqB,GAAI,OAAO,MAAM,wBAAwB,UAAU,MAAM,YAAY,OAAO;IAAjG,UAAA,CACE,oBAAC,YAAD;KAAkB;KAAY;KAAa;KAAgB;IAAU,CAAA,GACrE,oBAAC,MAAD;KAAM,GAAI,OAAO,MAAM,YAAY,OAAO;KAAG,MAAM;IAAc,CAAA,CAC9C;GACpB,CAAA,GAAA,KACE;EACL,CAAA,GAAA,oBAAC,YAAY,OAAb;GAAmB,GAAI,OAAO,MAAM,YAAY,KAAK;GACnD,UAAA,oBAAC,OAAD;IAAK,wBAAA;IAAqB,GAAI;IAC3B;GACE,CAAA;EACY,CAAA,CACH;;AACxB,CAAC;AACD,UAAU,cAAc"}