@pixpilot/formily-shadcn 0.9.1 → 0.11.0

package/dist/components/form-item/base-form-item.cjs

@@ -0,0 +1,85 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_use_form_context = require('../../hooks/use-form-context.cjs');
+const require_use_label = require('../../hooks/use-label.cjs');
+require('../../hooks/index.cjs');
+const require_form_item_label = require('./form-item-label.cjs');
+const require_spacing_config = require('./spacing-config.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/form-item/base-form-item.tsx
+function resolveLegacyDescriptionPlacement(labelPlacement) {
+	return labelPlacement === "top" ? "top" : "bottom";
+}
+const BaseFormItem = ({ className, children, label, description, descriptionPlacement, asterisk, feedbackStatus, feedbackText, labelPlacement = "top",...props }) => {
+	const field = (0, __formily_react.useField)();
+	const fieldProps = field?.componentProps ?? {};
+	const effectiveLabel = require_use_label.useLabel(label);
+	const { layout } = require_use_form_context.useFormContext();
+	const { classes } = layout?.itemProps || {};
+	const contextDescriptionPlacement = layout?.descriptionPlacement;
+	const effectiveLabelPlacement = fieldProps.labelPlacement ?? labelPlacement;
+	const resolvedDescriptionPlacement = fieldProps.descriptionPlacement ?? descriptionPlacement ?? contextDescriptionPlacement ?? resolveLegacyDescriptionPlacement(effectiveLabelPlacement);
+	const id = field?.componentProps?.id ?? `form-${field?.address?.toString()?.replace(/\./gu, "-")}`;
+	const descriptionId = react.default.useId();
+	const feedbackId = react.default.useId();
+	const descriptionRenderedInline = description != null && resolvedDescriptionPlacement !== "popover";
+	const spacingConfig = require_spacing_config.getSpacingConfig(resolvedDescriptionPlacement, descriptionRenderedInline);
+	const ariaDescribedBy = [descriptionRenderedInline ? descriptionId : void 0, feedbackText != null ? feedbackId : void 0].filter(Boolean).join(" ");
+	const labelElement = effectiveLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_item_label.FormItemLabel, {
+		id,
+		label: effectiveLabel,
+		asterisk,
+		error: feedbackStatus === "error",
+		shrink: effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start",
+		labelClassName: (0, __pixpilot_shadcn.cn)(spacingConfig.label, classes?.label),
+		description,
+		descriptionInPopover: resolvedDescriptionPlacement === "popover" && description != null
+	});
+	const inputElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __pixpilot_shadcn.cn)("relative", classes?.inputWrapper),
+		children: react.default.isValidElement(children) ? react.default.cloneElement(children, {
+			id,
+			"aria-describedby": ariaDescribedBy || void 0,
+			"aria-invalid": feedbackStatus === "error" ? "true" : void 0
+		}) : children
+	});
+	const descriptionElement = descriptionRenderedInline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		id: descriptionId,
+		className: (0, __pixpilot_shadcn.cn)("text-muted-foreground text-[0.8rem]", spacingConfig.description, classes?.description),
+		children: description
+	}) : null;
+	const contentElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		effectiveLabelPlacement === "top" && labelElement,
+		resolvedDescriptionPlacement === "top" && descriptionElement,
+		(effectiveLabelPlacement === "start" || effectiveLabelPlacement === "end") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2", effectiveLabelPlacement === "start" && "flex-row"),
+			children: [
+				effectiveLabelPlacement === "start" && labelElement,
+				inputElement,
+				effectiveLabelPlacement === "end" && labelElement
+			]
+		}),
+		effectiveLabelPlacement === "top" && inputElement,
+		resolvedDescriptionPlacement === "bottom" && descriptionElement
+	] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "form-item",
+		className: (0, __pixpilot_shadcn.cn)("flex flex-col ", className),
+		...props,
+		children: [contentElement, Boolean(feedbackText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			id: feedbackId,
+			className: (0, __pixpilot_shadcn.cn)("text-[0.8rem]", spacingConfig.feedback, feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600", classes?.errorMessage),
+			children: typeof feedbackText === "string" ? feedbackText.split("\n").map((line, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [line, index < feedbackText.split("\n").length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {})] }, index)) : feedbackText
+		})]
+	});
+};
+
+//#endregion
+exports.BaseFormItem = BaseFormItem;

package/dist/components/form-item/base-form-item.d.cts

@@ -0,0 +1,2 @@
+import "./form-item-types.cjs";
+import React from "react";

package/dist/components/form-item/base-form-item.d.ts

@@ -0,0 +1,2 @@
+import "./form-item-types.js";
+import React from "react";

package/dist/components/form-item/base-form-item.js

@@ -0,0 +1,80 @@
+import { useFormContext } from "../../hooks/use-form-context.js";
+import { useLabel } from "../../hooks/use-label.js";
+import "../../hooks/index.js";
+import { FormItemLabel } from "./form-item-label.js";
+import { getSpacingConfig } from "./spacing-config.js";
+import { useField } from "@formily/react";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@pixpilot/shadcn";
+
+//#region src/components/form-item/base-form-item.tsx
+function resolveLegacyDescriptionPlacement(labelPlacement) {
+	return labelPlacement === "top" ? "top" : "bottom";
+}
+const BaseFormItem = ({ className, children, label, description, descriptionPlacement, asterisk, feedbackStatus, feedbackText, labelPlacement = "top",...props }) => {
+	const field = useField();
+	const fieldProps = field?.componentProps ?? {};
+	const effectiveLabel = useLabel(label);
+	const { layout } = useFormContext();
+	const { classes } = layout?.itemProps || {};
+	const contextDescriptionPlacement = layout?.descriptionPlacement;
+	const effectiveLabelPlacement = fieldProps.labelPlacement ?? labelPlacement;
+	const resolvedDescriptionPlacement = fieldProps.descriptionPlacement ?? descriptionPlacement ?? contextDescriptionPlacement ?? resolveLegacyDescriptionPlacement(effectiveLabelPlacement);
+	const id = field?.componentProps?.id ?? `form-${field?.address?.toString()?.replace(/\./gu, "-")}`;
+	const descriptionId = React.useId();
+	const feedbackId = React.useId();
+	const descriptionRenderedInline = description != null && resolvedDescriptionPlacement !== "popover";
+	const spacingConfig = getSpacingConfig(resolvedDescriptionPlacement, descriptionRenderedInline);
+	const ariaDescribedBy = [descriptionRenderedInline ? descriptionId : void 0, feedbackText != null ? feedbackId : void 0].filter(Boolean).join(" ");
+	const labelElement = effectiveLabel != null && /* @__PURE__ */ jsx(FormItemLabel, {
+		id,
+		label: effectiveLabel,
+		asterisk,
+		error: feedbackStatus === "error",
+		shrink: effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start",
+		labelClassName: cn(spacingConfig.label, classes?.label),
+		description,
+		descriptionInPopover: resolvedDescriptionPlacement === "popover" && description != null
+	});
+	const inputElement = /* @__PURE__ */ jsx("div", {
+		className: cn("relative", classes?.inputWrapper),
+		children: React.isValidElement(children) ? React.cloneElement(children, {
+			id,
+			"aria-describedby": ariaDescribedBy || void 0,
+			"aria-invalid": feedbackStatus === "error" ? "true" : void 0
+		}) : children
+	});
+	const descriptionElement = descriptionRenderedInline ? /* @__PURE__ */ jsx("p", {
+		id: descriptionId,
+		className: cn("text-muted-foreground text-[0.8rem]", spacingConfig.description, classes?.description),
+		children: description
+	}) : null;
+	const contentElement = /* @__PURE__ */ jsxs(Fragment, { children: [
+		effectiveLabelPlacement === "top" && labelElement,
+		resolvedDescriptionPlacement === "top" && descriptionElement,
+		(effectiveLabelPlacement === "start" || effectiveLabelPlacement === "end") && /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-2", effectiveLabelPlacement === "start" && "flex-row"),
+			children: [
+				effectiveLabelPlacement === "start" && labelElement,
+				inputElement,
+				effectiveLabelPlacement === "end" && labelElement
+			]
+		}),
+		effectiveLabelPlacement === "top" && inputElement,
+		resolvedDescriptionPlacement === "bottom" && descriptionElement
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "form-item",
+		className: cn("flex flex-col ", className),
+		...props,
+		children: [contentElement, Boolean(feedbackText) && /* @__PURE__ */ jsx("p", {
+			id: feedbackId,
+			className: cn("text-[0.8rem]", spacingConfig.feedback, feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600", classes?.errorMessage),
+			children: typeof feedbackText === "string" ? feedbackText.split("\n").map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [line, index < feedbackText.split("\n").length - 1 && /* @__PURE__ */ jsx("br", {})] }, index)) : feedbackText
+		})]
+	});
+};
+
+//#endregion
+export { BaseFormItem };

package/dist/components/form-item/connected-form-item.cjs

@@ -0,0 +1,47 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_base_form_item = require('./base-form-item.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+let __formily_core = require("@formily/core");
+__formily_core = require_rolldown_runtime.__toESM(__formily_core);
+
+//#region src/components/form-item/connected-form-item.tsx
+/**
+* FormItem component connected to Formily field state.
+* Automatically maps field validation state to component props.
+*/
+const FormItem = (0, __formily_react.connect)(require_base_form_item.BaseFormItem, (0, __formily_react.mapProps)((props, field) => {
+	if ((0, __formily_core.isVoidField)(field)) return {
+		label: field.title ?? props.label,
+		description: props.description ?? field.description,
+		asterisk: props.asterisk
+	};
+	const takeFeedbackStatus = () => {
+		if (field.validating) return void 0;
+		if (field.selfErrors?.length) return "error";
+		if (field.selfWarnings?.length) return "warning";
+		if (field.selfSuccesses?.length) return "success";
+	};
+	const takeFeedbackText = () => {
+		if (field.validating) return void 0;
+		if (props.feedbackText != null) return props.feedbackText;
+		if (field.selfErrors?.length) return field.selfErrors.join(", ");
+		if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
+		if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
+	};
+	const takeAsterisk = () => {
+		if (field.required && field.pattern !== "readPretty") return true;
+		if ("asterisk" in props) return Boolean(props.asterisk);
+		return false;
+	};
+	return {
+		label: props.label ?? field.title,
+		description: props.description ?? field.description,
+		feedbackStatus: takeFeedbackStatus(),
+		feedbackText: takeFeedbackText(),
+		asterisk: takeAsterisk()
+	};
+}));
+
+//#endregion
+exports.FormItem = FormItem;

package/dist/components/form-item/connected-form-item.d.cts

@@ -0,0 +1,13 @@
+import { FormItemProps } from "./form-item-types.cjs";
+import * as react1341 from "react";
+
+//#region src/components/form-item/connected-form-item.d.ts
+/**
+ * FormItem component connected to Formily field state.
+ * Automatically maps field validation state to component props.
+ */
+declare const FormItem: react1341.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
+  children?: react1341.ReactNode | undefined;
+}>, "ref"> & react1341.RefAttributes<unknown>>;
+//#endregion
+export { FormItem };

package/dist/components/form-item/connected-form-item.d.ts

@@ -0,0 +1,13 @@
+import { FormItemProps } from "./form-item-types.js";
+import * as react1341 from "react";
+
+//#region src/components/form-item/connected-form-item.d.ts
+/**
+ * FormItem component connected to Formily field state.
+ * Automatically maps field validation state to component props.
+ */
+declare const FormItem: react1341.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
+  children?: react1341.ReactNode | undefined;
+}>, "ref"> & react1341.RefAttributes<unknown>>;
+//#endregion
+export { FormItem };

package/dist/components/form-item/connected-form-item.js

@@ -0,0 +1,44 @@
+import { BaseFormItem } from "./base-form-item.js";
+import { connect, mapProps } from "@formily/react";
+import { isVoidField } from "@formily/core";
+
+//#region src/components/form-item/connected-form-item.tsx
+/**
+* FormItem component connected to Formily field state.
+* Automatically maps field validation state to component props.
+*/
+const FormItem = connect(BaseFormItem, mapProps((props, field) => {
+	if (isVoidField(field)) return {
+		label: field.title ?? props.label,
+		description: props.description ?? field.description,
+		asterisk: props.asterisk
+	};
+	const takeFeedbackStatus = () => {
+		if (field.validating) return void 0;
+		if (field.selfErrors?.length) return "error";
+		if (field.selfWarnings?.length) return "warning";
+		if (field.selfSuccesses?.length) return "success";
+	};
+	const takeFeedbackText = () => {
+		if (field.validating) return void 0;
+		if (props.feedbackText != null) return props.feedbackText;
+		if (field.selfErrors?.length) return field.selfErrors.join(", ");
+		if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
+		if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
+	};
+	const takeAsterisk = () => {
+		if (field.required && field.pattern !== "readPretty") return true;
+		if ("asterisk" in props) return Boolean(props.asterisk);
+		return false;
+	};
+	return {
+		label: props.label ?? field.title,
+		description: props.description ?? field.description,
+		feedbackStatus: takeFeedbackStatus(),
+		feedbackText: takeFeedbackText(),
+		asterisk: takeAsterisk()
+	};
+}));
+
+//#endregion
+export { FormItem };

package/dist/components/form-item/form-item-description-popover.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/form-item/form-item-description-popover.tsx
+function FormItemDescriptionPopover({ description, className }) {
+	const [open, setOpen] = react.default.useState(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": "Show description",
+				className: (0, __pixpilot_shadcn.cn)("text-muted-foreground inline-flex items-center justify-center rounded-sm hover:text-foreground transition-colors", className),
+				onMouseEnter: () => setOpen(true),
+				onMouseLeave: () => setOpen(false),
+				onClick: () => setOpen((prev) => !prev),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.HelpCircleIcon, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+			side: "top",
+			className: "w-80 bg-card border border-border",
+			onMouseEnter: () => setOpen(true),
+			onMouseLeave: () => setOpen(false),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-sm leading-relaxed text-foreground",
+				children: description
+			})
+		})]
+	});
+}
+
+//#endregion
+exports.FormItemDescriptionPopover = FormItemDescriptionPopover;

package/dist/components/form-item/form-item-description-popover.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { HelpCircleIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverContent, PopoverTrigger, cn } from "@pixpilot/shadcn";
+
+//#region src/components/form-item/form-item-description-popover.tsx
+function FormItemDescriptionPopover({ description, className }) {
+	const [open, setOpen] = React.useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Show description",
+				className: cn("text-muted-foreground inline-flex items-center justify-center rounded-sm hover:text-foreground transition-colors", className),
+				onMouseEnter: () => setOpen(true),
+				onMouseLeave: () => setOpen(false),
+				onClick: () => setOpen((prev) => !prev),
+				children: /* @__PURE__ */ jsx(HelpCircleIcon, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side: "top",
+			className: "w-80 bg-card border border-border",
+			onMouseEnter: () => setOpen(true),
+			onMouseLeave: () => setOpen(false),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "text-sm leading-relaxed text-foreground",
+				children: description
+			})
+		})]
+	});
+}
+
+//#endregion
+export { FormItemDescriptionPopover };

package/dist/components/form-item/form-item-label.cjs

@@ -0,0 +1,29 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_form_item_description_popover = require('./form-item-description-popover.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/form-item/form-item-label.tsx
+function FormItemLabel({ id, label, asterisk, error, shrink, labelClassName, description, descriptionInPopover }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		htmlFor: id,
+		"data-slot": "form-label",
+		"data-error": Boolean(error),
+		className: (0, __pixpilot_shadcn.cn)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", error && "text-destructive", shrink && "shrink-0", labelClassName),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "inline-flex items-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), descriptionInPopover && description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_item_description_popover.FormItemDescriptionPopover, { description })]
+		}), asterisk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-destructive ml-1",
+			"aria-label": "required",
+			children: "*"
+		})]
+	});
+}
+
+//#endregion
+exports.FormItemLabel = FormItemLabel;

package/dist/components/form-item/form-item-label.js

@@ -0,0 +1,25 @@
+import { FormItemDescriptionPopover } from "./form-item-description-popover.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@pixpilot/shadcn";
+
+//#region src/components/form-item/form-item-label.tsx
+function FormItemLabel({ id, label, asterisk, error, shrink, labelClassName, description, descriptionInPopover }) {
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		"data-slot": "form-label",
+		"data-error": Boolean(error),
+		className: cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", error && "text-destructive", shrink && "shrink-0", labelClassName),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), descriptionInPopover && description != null && /* @__PURE__ */ jsx(FormItemDescriptionPopover, { description })]
+		}), asterisk && /* @__PURE__ */ jsx("span", {
+			className: "text-destructive ml-1",
+			"aria-label": "required",
+			children: "*"
+		})]
+	});
+}
+
+//#endregion
+export { FormItemLabel };

package/dist/components/form-item/form-item-types.d.cts

@@ -0,0 +1,23 @@
+import { DescriptionPlacement } from "../../types/form-item.cjs";
+import { SyncReactNode } from "../../types/react.cjs";
+import React from "react";
+
+//#region src/components/form-item/form-item-types.d.ts
+type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
+interface FormItemProps extends React.ComponentProps<'div'> {
+  label?: SyncReactNode;
+  description?: SyncReactNode;
+  /**
+   * Controls where `description` is rendered relative to the input.
+   * - `top`: above the input
+   * - `bottom`: below the input
+   * - `popover`: show a help icon before the label and render the description in a hover popover
+   */
+  descriptionPlacement?: DescriptionPlacement;
+  asterisk?: boolean;
+  feedbackStatus?: 'error' | 'warning' | 'success';
+  feedbackText?: SyncReactNode;
+  labelPlacement?: LabelPlacement;
+}
+//#endregion
+export { FormItemProps, LabelPlacement };

package/dist/components/form-item/form-item-types.d.ts

@@ -0,0 +1,23 @@
+import { DescriptionPlacement } from "../../types/form-item.js";
+import { SyncReactNode } from "../../types/react.js";
+import React from "react";
+
+//#region src/components/form-item/form-item-types.d.ts
+type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
+interface FormItemProps extends React.ComponentProps<'div'> {
+  label?: SyncReactNode;
+  description?: SyncReactNode;
+  /**
+   * Controls where `description` is rendered relative to the input.
+   * - `top`: above the input
+   * - `bottom`: below the input
+   * - `popover`: show a help icon before the label and render the description in a hover popover
+   */
+  descriptionPlacement?: DescriptionPlacement;
+  asterisk?: boolean;
+  feedbackStatus?: 'error' | 'warning' | 'success';
+  feedbackText?: SyncReactNode;
+  labelPlacement?: LabelPlacement;
+}
+//#endregion
+export { FormItemProps, LabelPlacement };

package/dist/components/form-item/form-item.cjs

@@ -0,0 +1,2 @@
+const require_base_form_item = require('./base-form-item.cjs');
+const require_connected_form_item = require('./connected-form-item.cjs');

package/dist/components/form-item/form-item.d.cts

@@ -0,0 +1,4 @@
+import { DescriptionPlacement } from "../../types/form-item.cjs";
+import { FormItemProps, LabelPlacement } from "./form-item-types.cjs";
+import "./base-form-item.cjs";
+import { FormItem } from "./connected-form-item.cjs";

package/dist/components/form-item/form-item.d.ts

@@ -0,0 +1,4 @@
+import { DescriptionPlacement } from "../../types/form-item.js";
+import { FormItemProps, LabelPlacement } from "./form-item-types.js";
+import "./base-form-item.js";
+import { FormItem } from "./connected-form-item.js";

package/dist/components/form-item/form-item.js

@@ -0,0 +1,2 @@
+import { BaseFormItem } from "./base-form-item.js";
+import { FormItem } from "./connected-form-item.js";

package/dist/components/form-item/index.cjs

@@ -0,0 +1,3 @@
+const require_base_form_item = require('./base-form-item.cjs');
+const require_connected_form_item = require('./connected-form-item.cjs');
+require('./form-item.cjs');

package/dist/components/form-item/index.d.cts

@@ -0,0 +1,4 @@
+import { DescriptionPlacement } from "../../types/form-item.cjs";
+import { FormItemProps, LabelPlacement } from "./form-item-types.cjs";
+import { FormItem } from "./connected-form-item.cjs";
+import "./form-item.cjs";

package/dist/components/form-item/index.d.ts

@@ -0,0 +1,4 @@
+import { DescriptionPlacement } from "../../types/form-item.js";
+import { FormItemProps, LabelPlacement } from "./form-item-types.js";
+import { FormItem } from "./connected-form-item.js";
+import "./form-item.js";

package/dist/components/form-item/index.js

@@ -0,0 +1,3 @@
+import { BaseFormItem } from "./base-form-item.js";
+import { FormItem } from "./connected-form-item.js";
+import "./form-item.js";

package/dist/components/form-item/spacing-config.cjs

@@ -0,0 +1,24 @@
+
+//#region src/components/form-item/spacing-config.ts
+const FEEDBACK = "mt-1";
+const LABE_DEFAULT = "mb-2";
+function getSpacingConfig(descriptionPlacement, hasDescription) {
+	if (descriptionPlacement === "top" && hasDescription) return {
+		label: "mb-1",
+		description: "mb-1.5",
+		feedback: FEEDBACK
+	};
+	if (descriptionPlacement === "bottom" && hasDescription) return {
+		label: LABE_DEFAULT,
+		description: "mt-1",
+		feedback: FEEDBACK
+	};
+	return {
+		label: LABE_DEFAULT,
+		description: "",
+		feedback: FEEDBACK
+	};
+}
+
+//#endregion
+exports.getSpacingConfig = getSpacingConfig;

package/dist/components/form-item/spacing-config.js

@@ -0,0 +1,23 @@
+//#region src/components/form-item/spacing-config.ts
+const FEEDBACK = "mt-1";
+const LABE_DEFAULT = "mb-2";
+function getSpacingConfig(descriptionPlacement, hasDescription) {
+	if (descriptionPlacement === "top" && hasDescription) return {
+		label: "mb-1",
+		description: "mb-1.5",
+		feedback: FEEDBACK
+	};
+	if (descriptionPlacement === "bottom" && hasDescription) return {
+		label: LABE_DEFAULT,
+		description: "mt-1",
+		feedback: FEEDBACK
+	};
+	return {
+		label: LABE_DEFAULT,
+		description: "",
+		feedback: FEEDBACK
+	};
+}
+
+//#endregion
+export { getSpacingConfig };

package/dist/components/form-items-container.cjs

@@ -12,11 +12,9 @@ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 //#region src/components/form-items-container.tsx
 const FormItemContainer = (props) => {
 	const { as: Component = "div", className,...rest } = props;
-	const { density, responsive } = require_use_form_context.useFormContext();
-	const spaceClass = require_resolve_responsive_space.resolveResponsiveSpaceClass({
-		density,
-		responsive
-	});
+	const { layout } = require_use_form_context.useFormContext();
+	const { density } = layout || {};
+	const spaceClass = require_resolve_responsive_space.resolveResponsiveSpaceClass({ density });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		...rest,
 		className: (0, __pixpilot_shadcn.cn)(spaceClass, className)

package/dist/components/form-items-container.js

@@ -8,11 +8,9 @@ import { cn } from "@pixpilot/shadcn";
 //#region src/components/form-items-container.tsx
 const FormItemContainer = (props) => {
 	const { as: Component = "div", className,...rest } = props;
-	const { density, responsive } = useFormContext();
-	const spaceClass = resolveResponsiveSpaceClass({
-		density,
-		responsive
-	});
+	const { layout } = useFormContext();
+	const { density } = layout || {};
+	const spaceClass = resolveResponsiveSpaceClass({ density });
 	return /* @__PURE__ */ jsx(Component, {
 		...rest,
 		className: cn(spaceClass, className)

package/dist/components/form.cjs

@@ -15,7 +15,7 @@ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 /**
 * Form component - wraps FormProvider and provides form context
 */
-function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemProps, objectContainerProps, density, responsive, config }) {
+function Form({ form, className, style, children, onSubmit, onAutoSubmit, layout, settings }) {
 	const handleSubmit = (e) => {
 		e.preventDefault();
 		form.submit((values) => {
@@ -26,24 +26,15 @@ function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemPr
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.Provider, {
 		value: react.default.useMemo(() => {
 			return {
-				itemProps,
-				objectContainerProps,
-				density,
-				responsive,
-				config
+				layout,
+				settings
 			};
-		}, [
-			itemProps,
-			objectContainerProps,
-			density,
-			responsive,
-			config
-		]),
+		}, [layout, settings]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.FormProvider, {
 			form,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_form_items_container.FormItemContainer, {
 				as: "form",
-				className: (0, __pixpilot_shadcn.cn)("space-y-6", className),
+				className: (0, __pixpilot_shadcn.cn)(className),
 				style,
 				onSubmit: handleSubmit,
 				children