@lobehub/ui 5.19.3 → 5.20.1

package/es/base-ui/Checkbox/CheckboxGroup.mjs

@@ -0,0 +1,37 @@
+"use client";
+import Checkbox from "./Checkbox.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/base-ui/Checkbox/CheckboxGroup.tsx
+const CheckboxGroup$1 = memo(({ options, onChange, gap = 12, horizontal = true, size, shape, textProps, style, ...rest }) => {
+	const items = useMemo(() => options.map((option) => typeof option === "string" ? {
+		label: option,
+		value: option
+	} : option), [options]);
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		style: {
+			display: "flex",
+			flexDirection: horizontal ? "row" : "column",
+			flexWrap: "wrap",
+			gap,
+			...style
+		},
+		onValueChange: onChange,
+		...rest,
+		children: items.map((item) => /* @__PURE__ */ jsx(Checkbox, {
+			disabled: item.disabled,
+			name: item.value,
+			shape,
+			size,
+			textProps,
+			value: item.value,
+			children: item.label
+		}, item.value))
+	});
+});
+CheckboxGroup$1.displayName = "CheckboxGroup";
+//#endregion
+export { CheckboxGroup$1 as default };
+
+//# sourceMappingURL=CheckboxGroup.mjs.map

package/es/base-ui/Checkbox/CheckboxGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.mjs","names":["CheckboxGroup","BaseCheckboxGroup"],"sources":["../../../src/base-ui/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["'use client';\n\nimport { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';\nimport { memo, useMemo } from 'react';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxGroupOption, CheckboxGroupProps } from './type';\n\nconst CheckboxGroup = memo<CheckboxGroupProps>(\n  ({ options, onChange, gap = 12, horizontal = true, size, shape, textProps, style, ...rest }) => {\n    const items = useMemo<CheckboxGroupOption[]>(\n      () =>\n        options.map((option) =>\n          typeof option === 'string' ? { label: option, value: option } : option,\n        ),\n      [options],\n    );\n\n    return (\n      <BaseCheckboxGroup\n        style={{\n          display: 'flex',\n          flexDirection: horizontal ? 'row' : 'column',\n          flexWrap: 'wrap',\n          gap,\n          ...style,\n        }}\n        onValueChange={onChange}\n        {...rest}\n      >\n        {items.map((item) => (\n          <Checkbox\n            disabled={item.disabled}\n            key={item.value}\n            name={item.value}\n            shape={shape}\n            size={size}\n            textProps={textProps}\n            value={item.value}\n          >\n            {item.label}\n          </Checkbox>\n        ))}\n      </BaseCheckboxGroup>\n    );\n  },\n);\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;AAQA,MAAMA,kBAAgB,MACnB,EAAE,SAAS,UAAU,MAAM,IAAI,aAAa,MAAM,MAAM,OAAO,WAAW,OAAO,GAAG,WAAW;CAC9F,MAAM,QAAQ,cAEV,QAAQ,KAAK,WACX,OAAO,WAAW,WAAW;EAAE,OAAO;EAAQ,OAAO;EAAQ,GAAG,OACjE,EACH,CAAC,QAAQ,CACV;AAED,QACE,oBAACC,eAAD;EACE,OAAO;GACL,SAAS;GACT,eAAe,aAAa,QAAQ;GACpC,UAAU;GACV;GACA,GAAG;GACJ;EACD,eAAe;EACf,GAAI;YAEH,MAAM,KAAK,SACV,oBAAC,UAAD;GACE,UAAU,KAAK;GAEf,MAAM,KAAK;GACJ;GACD;GACK;GACX,OAAO,KAAK;aAEX,KAAK;GACG,EARJ,KAAK,MAQD,CACX;EACgB,CAAA;EAGzB;AAED,gBAAc,cAAc"}

package/es/base-ui/Checkbox/index.d.mts

@@ -0,0 +1,4 @@
+import { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxShape } from "./type.mjs";
+import { Checkbox } from "./Checkbox.mjs";
+import { CheckboxGroup } from "./CheckboxGroup.mjs";
+import { styles } from "./style.mjs";

package/es/base-ui/Checkbox/style.d.mts

@@ -0,0 +1,9 @@
+//#region src/base-ui/Checkbox/style.d.ts
+declare const styles: {
+  indicator: string;
+  label: string;
+  root: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

package/es/base-ui/Checkbox/style.mjs

@@ -0,0 +1,70 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Checkbox/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	indicator: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+	label: css`
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+
+    &:has([data-disabled]) {
+      cursor: not-allowed;
+    }
+  `,
+	root: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+
+    color: ${cssVar.colorBgLayout};
+
+    background: ${cssVar.colorBgContainer};
+    outline: none;
+
+    transition:
+      background 150ms ${cssVar.motionEaseOut},
+      border-color 150ms ${cssVar.motionEaseOut};
+
+    &:hover:not([data-disabled], [data-checked], [data-indeterminate]) {
+      border-color: ${cssVar.colorBorder};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+
+    &[data-checked],
+    &[data-indeterminate] {
+      border-color: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});
+      background: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+
+      border-color: ${cssVar.colorFill};
+
+      color: ${cssVar.colorText};
+
+      opacity: 0.25;
+      background: ${cssVar.colorFill};
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Checkbox/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Checkbox/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  label: css`\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n\n    &:has([data-disabled]) {\n      cursor: not-allowed;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n\n    color: ${cssVar.colorBgLayout};\n\n    background: ${cssVar.colorBgContainer};\n    outline: none;\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-checked], [data-indeterminate]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &[data-checked],\n    &[data-indeterminate] {\n      border-color: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});\n      background: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background: ${cssVar.colorFill};\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;;;;wBAUa,OAAO,qBAAqB;;aAEvC,OAAO,cAAc;;kBAEhB,OAAO,iBAAiB;;;;yBAIjB,OAAO,cAAc;2BACnB,OAAO,cAAc;;;sBAG1B,OAAO,YAAY;;;;2BAId,OAAO,mBAAmB;;;;;;8CAMP,OAAO,aAAa;4CACtB,OAAO,aAAa;;;;;;sBAM1C,OAAO,UAAU;;eAExB,OAAO,UAAU;;;oBAGZ,OAAO,UAAU;;;CAGpC,EAAE"}

package/es/base-ui/Checkbox/type.d.mts

@@ -0,0 +1,51 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import { TextProps } from "../../Text/type.mjs";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+
+//#region src/base-ui/Checkbox/type.d.ts
+type CheckboxShape = 'square' | 'circle';
+type BaseCheckboxProps = Omit<ComponentProps<typeof Checkbox.Root>, 'className' | 'style' | 'render' | 'children' | 'onCheckedChange'>;
+interface CheckboxProps extends BaseCheckboxProps {
+  backgroundColor?: string;
+  children?: ReactNode;
+  className?: string;
+  classNames?: {
+    checkbox?: string;
+    text?: string;
+    wrapper?: string;
+  };
+  onChange?: (checked: boolean) => void;
+  shape?: CheckboxShape;
+  /**
+   * Box size in pixels
+   * @default 16
+   */
+  size?: number;
+  style?: CSSProperties;
+  styles?: {
+    checkbox?: CSSProperties;
+    text?: CSSProperties;
+    wrapper?: CSSProperties;
+  };
+  textProps?: Omit<TextProps, 'children' | 'className' | 'style'>;
+}
+interface CheckboxGroupOption {
+  disabled?: boolean;
+  label: ReactNode;
+  value: string;
+}
+type BaseCheckboxGroupProps = Omit<ComponentProps<typeof CheckboxGroup>, 'className' | 'style' | 'render' | 'children' | 'onValueChange' | 'onChange'>;
+interface CheckboxGroupProps extends BaseCheckboxGroupProps, Pick<FlexboxProps, 'gap' | 'horizontal'> {
+  className?: string;
+  onChange?: (value: string[]) => void;
+  options: (string | CheckboxGroupOption)[];
+  shape?: CheckboxShape;
+  size?: number;
+  style?: CSSProperties;
+  textProps?: CheckboxProps['textProps'];
+}
+//#endregion
+export { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxShape };
+//# sourceMappingURL=type.d.mts.map

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