@pixpilot/formily-shadcn 0.6.0 → 0.8.1

package/dist/components/file-upload/index.d.cts

@@ -0,0 +1,2 @@
+import { FileUpload } from "./file-upload.cjs";
+import { FileUploadInline } from "./file-upload-inline.cjs";

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+import { FileUpload } from "./file-upload.js";
+import { FileUploadInline } from "./file-upload-inline.js";

package/dist/components/file-upload/index.js

@@ -0,0 +1,2 @@
+import { FileUpload } from "./file-upload.js";
+import { FileUploadInline } from "./file-upload-inline.js";

package/dist/components/file-upload/use-file-upload-feedback.cjs

@@ -0,0 +1,59 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_use_form_context = require('../../hooks/use-form-context.cjs');
+require('../../hooks/index.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 pretty_bytes = require("pretty-bytes");
+pretty_bytes = require_rolldown_runtime.__toESM(pretty_bytes);
+
+//#region src/components/file-upload/use-file-upload-feedback.ts
+function useFileUploadFeedback(props) {
+	const { onUpload: onUploadProp, maxSize: maxSizeProp, onFilesReject, onFileValidate } = props;
+	const { config } = require_use_form_context.useFormContext();
+	const field = (0, __formily_react.useField)();
+	const { fileUpload } = config || {};
+	const onUpload = onUploadProp ?? fileUpload?.onUpload;
+	const maxSize = maxSizeProp ?? fileUpload?.maxSize;
+	if (onUpload == null) {
+		if (process.env.NODE_ENV !== "production") throw new Error("onUpload prop required for FileUploadInline. Provide handler on form or field props.");
+	}
+	return {
+		onUpload,
+		maxSize,
+		handleFilesRejection: react.default.useCallback((files) => {
+			onFilesReject?.(files);
+			const maximumError = files.filter((f) => f.message.startsWith("Maximum"));
+			const withFileSizeError = files.filter((f) => f.message.startsWith("File too large"));
+			const otherErrors = files.filter((f) => !withFileSizeError.includes(f) && !maximumError.includes(f));
+			const messages = [];
+			if (maximumError.length > 0) messages.push(maximumError[0].message);
+			if (maxSize != null && withFileSizeError.length > 0) {
+				const fileList = withFileSizeError.map((f) => `${f.file.name} (${(0, pretty_bytes.default)(f.file.size)})`).join("\n");
+				messages.push(`Files exceed ${(0, pretty_bytes.default)(maxSize)} limit:\n${fileList}`);
+			}
+			if (otherErrors.length > 0) otherErrors.forEach((f) => {
+				messages.push(`${f.message}: ${f.file.name}`);
+			});
+			field.setFeedback({
+				type: "warning",
+				messages: [messages.join("\n")]
+			});
+		}, [
+			field,
+			maxSize,
+			onFilesReject
+		]),
+		handleFileValidate: react.default.useCallback((file) => {
+			field.setFeedback({
+				type: "warning",
+				messages: []
+			});
+			return onFileValidate?.(file);
+		}, [field, onFileValidate])
+	};
+}
+
+//#endregion
+exports.useFileUploadFeedback = useFileUploadFeedback;

package/dist/components/file-upload/use-file-upload-feedback.js

@@ -0,0 +1,53 @@
+import { useFormContext } from "../../hooks/use-form-context.js";
+import "../../hooks/index.js";
+import { useField } from "@formily/react";
+import React from "react";
+import prettyBytes from "pretty-bytes";
+
+//#region src/components/file-upload/use-file-upload-feedback.ts
+function useFileUploadFeedback(props) {
+	const { onUpload: onUploadProp, maxSize: maxSizeProp, onFilesReject, onFileValidate } = props;
+	const { config } = useFormContext();
+	const field = useField();
+	const { fileUpload } = config || {};
+	const onUpload = onUploadProp ?? fileUpload?.onUpload;
+	const maxSize = maxSizeProp ?? fileUpload?.maxSize;
+	if (onUpload == null) throw new Error("onUpload prop required for FileUploadInline. Provide handler on form or field props.");
+	return {
+		onUpload,
+		maxSize,
+		handleFilesRejection: React.useCallback((files) => {
+			onFilesReject?.(files);
+			const maximumError = files.filter((f) => f.message.startsWith("Maximum"));
+			const withFileSizeError = files.filter((f) => f.message.startsWith("File too large"));
+			const otherErrors = files.filter((f) => !withFileSizeError.includes(f) && !maximumError.includes(f));
+			const messages = [];
+			if (maximumError.length > 0) messages.push(maximumError[0].message);
+			if (maxSize != null && withFileSizeError.length > 0) {
+				const fileList = withFileSizeError.map((f) => `${f.file.name} (${prettyBytes(f.file.size)})`).join("\n");
+				messages.push(`Files exceed ${prettyBytes(maxSize)} limit:\n${fileList}`);
+			}
+			if (otherErrors.length > 0) otherErrors.forEach((f) => {
+				messages.push(`${f.message}: ${f.file.name}`);
+			});
+			field.setFeedback({
+				type: "warning",
+				messages: [messages.join("\n")]
+			});
+		}, [
+			field,
+			maxSize,
+			onFilesReject
+		]),
+		handleFileValidate: React.useCallback((file) => {
+			field.setFeedback({
+				type: "warning",
+				messages: []
+			});
+			return onFileValidate?.(file);
+		}, [field, onFileValidate])
+	};
+}
+
+//#endregion
+export { useFileUploadFeedback };

package/dist/components/form-grid.cjs

@@ -1 +1,19 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);let r=require(`@pixpilot/shadcn`);r=e.__toESM(r);function i({className:e,children:t,...i}){return(0,n.jsx)(`div`,{...i,className:(0,r.cn)(`grid gap-4 grid-cols-3`,e),children:t})}exports.FormGrid=i;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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-grid.tsx
+function FormGrid({ className, children,...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rest,
+		className: (0, __pixpilot_shadcn.cn)("grid gap-4 grid-cols-3", className),
+		children
+	});
+}
+
+//#endregion
+exports.FormGrid = FormGrid;

package/dist/components/form-grid.js

@@ -1 +1,15 @@
-import e from"react";import{jsx as t}from"react/jsx-runtime";import{cn as n}from"@pixpilot/shadcn";function r({className:e,children:r,...i}){return t(`div`,{...i,className:n(`grid gap-4 grid-cols-3`,e),children:r})}export{r as FormGrid};
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@pixpilot/shadcn";
+
+//#region src/components/form-grid.tsx
+function FormGrid({ className, children,...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cn("grid gap-4 grid-cols-3", className),
+		children
+	});
+}
+
+//#endregion
+export { FormGrid };

package/dist/components/form-item.cjs

@@ -1,3 +1,118 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../hooks/use-form-context.cjs`),n=require(`../hooks/use-label.cjs`);require(`../hooks/index.cjs`);let r=require(`@formily/react`);r=e.__toESM(r);let i=require(`react`);i=e.__toESM(i);let a=require(`react/jsx-runtime`);a=e.__toESM(a);let o=require(`@pixpilot/shadcn`);o=e.__toESM(o);let s=require(`@formily/core`);s=e.__toESM(s);const c=({className:e,children:s,label:c,description:l,asterisk:u,feedbackStatus:d,feedbackText:f,labelPlacement:p=`top`,...m})=>{let h=(0,r.useField)(),g=h?.componentProps??{},_=n.useLabel(c),{itemProps:v}=t.useFormContext(),{className:y}=v||{},b=g.labelPlacement??p,x=h?.componentProps?.id??`form-${h?.address?.toString()?.replace(/\./gu,`-`)}`,S=i.default.useId(),C=i.default.useId(),w=[l==null?void 0:S,f==null?void 0:C].filter(Boolean).join(` `),T=_!=null&&(0,a.jsxs)(`label`,{htmlFor:x,"data-slot":`form-label`,"data-error":d===`error`,className:(0,o.cn)(`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70`,d===`error`&&`text-destructive`,(b===`end`||b===`start`)&&`shrink-0`),children:[_,u&&(0,a.jsx)(`span`,{className:`text-destructive ml-1`,"aria-label":`required`,children:`*`})]}),E=(0,a.jsx)(`div`,{className:`relative`,children:i.default.isValidElement(s)?i.default.cloneElement(s,{id:x,"aria-describedby":w||void 0,"aria-invalid":d===`error`?`true`:void 0}):s}),D=(0,a.jsxs)(a.Fragment,{children:[b===`top`&&T,l!=null&&b===`top`&&(0,a.jsx)(`p`,{id:S,className:`text-muted-foreground text-[0.8rem]`,children:l}),(b===`start`||b===`end`)&&(0,a.jsxs)(`div`,{className:(0,o.cn)(`flex items-center gap-2`,b===`start`&&`flex-row`),children:[b===`start`&&T,E,b===`end`&&T]}),b===`top`&&E,l!=null&&(b===`start`||b===`end`)&&(0,a.jsx)(`p`,{id:S,className:`text-muted-foreground text-[0.8rem]`,children:l})]});return(0,a.jsxs)(`div`,{"data-slot":`form-item`,className:(0,o.cn)(`flex flex-col gap-2`,y,e),...m,children:[D,!!f&&(0,a.jsx)(`p`,{id:C,className:(0,o.cn)(`text-[0.8rem]`,d===`error`&&`text-destructive font-medium`,d===`warning`&&`text-amber-600`,d===`success`&&`text-green-600`),children:typeof f==`string`?f.split(`
-`).map((e,t)=>(0,a.jsxs)(i.default.Fragment,{children:[e,t<f.split(`
-`).length-1&&(0,a.jsx)(`br`,{})]},t)):f})]})},l=(0,r.connect)(c,(0,r.mapProps)((e,t)=>(0,s.isVoidField)(t)?{label:t.title??e.label,description:e.description??t.description,asterisk:e.asterisk}:{label:e.label??t.title,description:e.description??t.description,feedbackStatus:(()=>{if(!t.validating){if(t.selfErrors?.length)return`error`;if(t.selfWarnings?.length)return`warning`;if(t.selfSuccesses?.length)return`success`}})(),feedbackText:(()=>{if(!t.validating){if(e.feedbackText!=null)return e.feedbackText;if(t.selfErrors?.length)return t.selfErrors.join(`, `);if(t.selfWarnings?.length)return t.selfWarnings.join(`, `);if(t.selfSuccesses?.length)return t.selfSuccesses.join(`, `)}})(),asterisk:(()=>t.required&&t.pattern!==`readPretty`?!0:`asterisk`in e?!!e.asterisk:!1)()}));exports.FormItem=l;
+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');
+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);
+let __formily_core = require("@formily/core");
+__formily_core = require_rolldown_runtime.__toESM(__formily_core);
+
+//#region src/components/form-item.tsx
+const BaseFormItem = ({ className, children, label, description, asterisk, feedbackStatus, feedbackText, labelPlacement = "top",...props }) => {
+	const field = (0, __formily_react.useField)();
+	const fieldProps = field?.componentProps ?? {};
+	const effectiveLabel = require_use_label.useLabel(label);
+	const { itemProps } = require_use_form_context.useFormContext();
+	const { className: itemPropsClassName } = itemProps || {};
+	const effectiveLabelPlacement = fieldProps.labelPlacement ?? labelPlacement;
+	const id = field?.componentProps?.id ?? `form-${field?.address?.toString()?.replace(/\./gu, "-")}`;
+	const descriptionId = react.default.useId();
+	const feedbackId = react.default.useId();
+	const ariaDescribedBy = [description != null ? descriptionId : void 0, feedbackText != null ? feedbackId : void 0].filter(Boolean).join(" ");
+	const labelElement = effectiveLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		htmlFor: id,
+		"data-slot": "form-label",
+		"data-error": Boolean(feedbackStatus === "error"),
+		className: (0, __pixpilot_shadcn.cn)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", feedbackStatus === "error" && "text-destructive", (effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start") && "shrink-0"),
+		children: [effectiveLabel, asterisk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-destructive ml-1",
+			"aria-label": "required",
+			children: "*"
+		})]
+	});
+	const inputElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "relative",
+		children: react.default.isValidElement(children) ? react.default.cloneElement(children, {
+			id,
+			"aria-describedby": ariaDescribedBy || void 0,
+			"aria-invalid": feedbackStatus === "error" ? "true" : void 0
+		}) : children
+	});
+	const contentElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		effectiveLabelPlacement === "top" && labelElement,
+		description != null && effectiveLabelPlacement === "top" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			id: descriptionId,
+			className: "text-muted-foreground text-[0.8rem]",
+			children: description
+		}),
+		(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,
+		description != null && (effectiveLabelPlacement === "start" || effectiveLabelPlacement === "end") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			id: descriptionId,
+			className: "text-muted-foreground text-[0.8rem]",
+			children: description
+		})
+	] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "form-item",
+		className: (0, __pixpilot_shadcn.cn)("flex flex-col gap-2", itemPropsClassName, className),
+		...props,
+		children: [contentElement, Boolean(feedbackText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			id: feedbackId,
+			className: (0, __pixpilot_shadcn.cn)("text-[0.8rem]", feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600"),
+			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
+		})]
+	});
+};
+/**
+* FormItem component connected to Formily field state
+* Automatically maps field validation state to component props
+*/
+const FormItem = (0, __formily_react.connect)(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.js

@@ -1,3 +1,112 @@
-import{useFormContext as e}from"../hooks/use-form-context.js";import{useLabel as t}from"../hooks/use-label.js";import"../hooks/index.js";import{connect as n,mapProps as r,useField as i}from"@formily/react";import a from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";import{cn as l}from"@pixpilot/shadcn";import{isVoidField as u}from"@formily/core";const d=n(({className:n,children:r,label:u,description:d,asterisk:f,feedbackStatus:p,feedbackText:m,labelPlacement:h=`top`,...g})=>{let _=i(),v=_?.componentProps??{},y=t(u),{itemProps:b}=e(),{className:x}=b||{},S=v.labelPlacement??h,C=_?.componentProps?.id??`form-${_?.address?.toString()?.replace(/\./gu,`-`)}`,w=a.useId(),T=a.useId(),E=[d==null?void 0:w,m==null?void 0:T].filter(Boolean).join(` `),D=y!=null&&c(`label`,{htmlFor:C,"data-slot":`form-label`,"data-error":p===`error`,className:l(`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70`,p===`error`&&`text-destructive`,(S===`end`||S===`start`)&&`shrink-0`),children:[y,f&&s(`span`,{className:`text-destructive ml-1`,"aria-label":`required`,children:`*`})]}),O=s(`div`,{className:`relative`,children:a.isValidElement(r)?a.cloneElement(r,{id:C,"aria-describedby":E||void 0,"aria-invalid":p===`error`?`true`:void 0}):r}),k=c(o,{children:[S===`top`&&D,d!=null&&S===`top`&&s(`p`,{id:w,className:`text-muted-foreground text-[0.8rem]`,children:d}),(S===`start`||S===`end`)&&c(`div`,{className:l(`flex items-center gap-2`,S===`start`&&`flex-row`),children:[S===`start`&&D,O,S===`end`&&D]}),S===`top`&&O,d!=null&&(S===`start`||S===`end`)&&s(`p`,{id:w,className:`text-muted-foreground text-[0.8rem]`,children:d})]});return c(`div`,{"data-slot":`form-item`,className:l(`flex flex-col gap-2`,x,n),...g,children:[k,!!m&&s(`p`,{id:T,className:l(`text-[0.8rem]`,p===`error`&&`text-destructive font-medium`,p===`warning`&&`text-amber-600`,p===`success`&&`text-green-600`),children:typeof m==`string`?m.split(`
-`).map((e,t)=>c(a.Fragment,{children:[e,t<m.split(`
-`).length-1&&s(`br`,{})]},t)):m})]})},r((e,t)=>u(t)?{label:t.title??e.label,description:e.description??t.description,asterisk:e.asterisk}:{label:e.label??t.title,description:e.description??t.description,feedbackStatus:(()=>{if(!t.validating){if(t.selfErrors?.length)return`error`;if(t.selfWarnings?.length)return`warning`;if(t.selfSuccesses?.length)return`success`}})(),feedbackText:(()=>{if(!t.validating){if(e.feedbackText!=null)return e.feedbackText;if(t.selfErrors?.length)return t.selfErrors.join(`, `);if(t.selfWarnings?.length)return t.selfWarnings.join(`, `);if(t.selfSuccesses?.length)return t.selfSuccesses.join(`, `)}})(),asterisk:(()=>t.required&&t.pattern!==`readPretty`?!0:`asterisk`in e?!!e.asterisk:!1)()}));export{d as FormItem};
+import { useFormContext } from "../hooks/use-form-context.js";
+import { useLabel } from "../hooks/use-label.js";
+import "../hooks/index.js";
+import { connect, mapProps, useField } from "@formily/react";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@pixpilot/shadcn";
+import { isVoidField } from "@formily/core";
+
+//#region src/components/form-item.tsx
+const BaseFormItem = ({ className, children, label, description, asterisk, feedbackStatus, feedbackText, labelPlacement = "top",...props }) => {
+	const field = useField();
+	const fieldProps = field?.componentProps ?? {};
+	const effectiveLabel = useLabel(label);
+	const { itemProps } = useFormContext();
+	const { className: itemPropsClassName } = itemProps || {};
+	const effectiveLabelPlacement = fieldProps.labelPlacement ?? labelPlacement;
+	const id = field?.componentProps?.id ?? `form-${field?.address?.toString()?.replace(/\./gu, "-")}`;
+	const descriptionId = React.useId();
+	const feedbackId = React.useId();
+	const ariaDescribedBy = [description != null ? descriptionId : void 0, feedbackText != null ? feedbackId : void 0].filter(Boolean).join(" ");
+	const labelElement = effectiveLabel != null && /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		"data-slot": "form-label",
+		"data-error": Boolean(feedbackStatus === "error"),
+		className: cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", feedbackStatus === "error" && "text-destructive", (effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start") && "shrink-0"),
+		children: [effectiveLabel, asterisk && /* @__PURE__ */ jsx("span", {
+			className: "text-destructive ml-1",
+			"aria-label": "required",
+			children: "*"
+		})]
+	});
+	const inputElement = /* @__PURE__ */ jsx("div", {
+		className: "relative",
+		children: React.isValidElement(children) ? React.cloneElement(children, {
+			id,
+			"aria-describedby": ariaDescribedBy || void 0,
+			"aria-invalid": feedbackStatus === "error" ? "true" : void 0
+		}) : children
+	});
+	const contentElement = /* @__PURE__ */ jsxs(Fragment, { children: [
+		effectiveLabelPlacement === "top" && labelElement,
+		description != null && effectiveLabelPlacement === "top" && /* @__PURE__ */ jsx("p", {
+			id: descriptionId,
+			className: "text-muted-foreground text-[0.8rem]",
+			children: description
+		}),
+		(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,
+		description != null && (effectiveLabelPlacement === "start" || effectiveLabelPlacement === "end") && /* @__PURE__ */ jsx("p", {
+			id: descriptionId,
+			className: "text-muted-foreground text-[0.8rem]",
+			children: description
+		})
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "form-item",
+		className: cn("flex flex-col gap-2", itemPropsClassName, className),
+		...props,
+		children: [contentElement, Boolean(feedbackText) && /* @__PURE__ */ jsx("p", {
+			id: feedbackId,
+			className: cn("text-[0.8rem]", feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600"),
+			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
+		})]
+	});
+};
+/**
+* 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-items-container.cjs

@@ -1 +1,28 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../utils/resolve-responsive-space.cjs`),n=require(`../hooks/use-form-context.cjs`);require(`../hooks/index.cjs`);let r=require(`react`);r=e.__toESM(r);let i=require(`react/jsx-runtime`);i=e.__toESM(i);let a=require(`@pixpilot/shadcn`);a=e.__toESM(a);const o=e=>{let{as:r=`div`,className:o,...s}=e,{density:c,responsive:l}=n.useFormContext(),u=t.resolveResponsiveSpaceClass({density:c,responsive:l});return(0,i.jsx)(r,{...s,className:(0,a.cn)(u,o)})};o.displayName=`FormItemContainer`,exports.FormItemContainer=o;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_resolve_responsive_space = require('../utils/resolve-responsive-space.cjs');
+const require_use_form_context = require('../hooks/use-form-context.cjs');
+require('../hooks/index.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-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
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...rest,
+		className: (0, __pixpilot_shadcn.cn)(spaceClass, className)
+	});
+};
+FormItemContainer.displayName = "FormItemContainer";
+
+//#endregion
+exports.FormItemContainer = FormItemContainer;

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

@@ -1 +1,24 @@
-import{resolveResponsiveSpaceClass as e}from"../utils/resolve-responsive-space.js";import{useFormContext as t}from"../hooks/use-form-context.js";import"../hooks/index.js";import n from"react";import{jsx as r}from"react/jsx-runtime";import{cn as i}from"@pixpilot/shadcn";const a=n=>{let{as:a=`div`,className:o,...s}=n,{density:c,responsive:l}=t(),u=e({density:c,responsive:l});return r(a,{...s,className:i(u,o)})};a.displayName=`FormItemContainer`;export{a as FormItemContainer};
+import { resolveResponsiveSpaceClass } from "../utils/resolve-responsive-space.js";
+import { useFormContext } from "../hooks/use-form-context.js";
+import "../hooks/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+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
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		...rest,
+		className: cn(spaceClass, className)
+	});
+};
+FormItemContainer.displayName = "FormItemContainer";
+
+//#endregion
+export { FormItemContainer };

package/dist/components/form.cjs

@@ -1 +1,56 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./context/context.cjs`);require(`./context/index.cjs`);const n=require(`./form-items-container.cjs`);let r=require(`@formily/react`);r=e.__toESM(r);let i=require(`react`);i=e.__toESM(i);let a=require(`react/jsx-runtime`);a=e.__toESM(a);let o=require(`@pixpilot/shadcn`);o=e.__toESM(o);function s({form:e,className:s,style:c,children:l,onSubmit:u,onAutoSubmit:d,itemProps:f,objectContainerProps:p,density:m,responsive:h,fields:g}){return(0,a.jsx)(t.Provider,{value:i.default.useMemo(()=>({itemProps:f,objectContainerProps:p,density:m,responsive:h,fields:g}),[f,p,m,h,g]),children:(0,a.jsx)(r.FormProvider,{form:e,children:(0,a.jsx)(n.FormItemContainer,{as:`form`,className:(0,o.cn)(`space-y-6`,s),style:c,onSubmit:t=>{t.preventDefault(),e.submit(e=>{u?.(e),d?.(e)}).catch(()=>{})},children:l})})})}exports.Form=s;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_context = require('./context/context.cjs');
+require('./context/index.cjs');
+const require_form_items_container = require('./form-items-container.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.tsx
+/**
+* Form component - wraps FormProvider and provides form context
+*/
+function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemProps, objectContainerProps, density, responsive, config }) {
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		form.submit((values) => {
+			onSubmit?.(values);
+			onAutoSubmit?.(values);
+		}).catch(() => {});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.Provider, {
+		value: react.default.useMemo(() => {
+			return {
+				itemProps,
+				objectContainerProps,
+				density,
+				responsive,
+				config
+			};
+		}, [
+			itemProps,
+			objectContainerProps,
+			density,
+			responsive,
+			config
+		]),
+		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),
+				style,
+				onSubmit: handleSubmit,
+				children
+			})
+		})
+	});
+}
+
+//#endregion
+exports.Form = Form;

package/dist/components/form.d.cts

@@ -27,7 +27,7 @@ declare function Form$1({
   objectContainerProps,
   density,
   responsive,
-  fields
+  config
 }: IFormProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Form$1 as Form };

package/dist/components/form.d.ts

@@ -27,7 +27,7 @@ declare function Form$1({
   objectContainerProps,
   density,
   responsive,
-  fields
+  config
 }: IFormProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Form$1 as Form };

package/dist/components/form.js

@@ -1 +1,51 @@
-import{Provider as e}from"./context/context.js";import"./context/index.js";import{FormItemContainer as t}from"./form-items-container.js";import{FormProvider as n}from"@formily/react";import r from"react";import{jsx as i}from"react/jsx-runtime";import{cn as a}from"@pixpilot/shadcn";function o({form:o,className:s,style:c,children:l,onSubmit:u,onAutoSubmit:d,itemProps:f,objectContainerProps:p,density:m,responsive:h,fields:g}){return i(e,{value:r.useMemo(()=>({itemProps:f,objectContainerProps:p,density:m,responsive:h,fields:g}),[f,p,m,h,g]),children:i(n,{form:o,children:i(t,{as:`form`,className:a(`space-y-6`,s),style:c,onSubmit:e=>{e.preventDefault(),o.submit(e=>{u?.(e),d?.(e)}).catch(()=>{})},children:l})})})}export{o as Form};
+import { Provider } from "./context/context.js";
+import "./context/index.js";
+import { FormItemContainer } from "./form-items-container.js";
+import { FormProvider } from "@formily/react";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@pixpilot/shadcn";
+
+//#region src/components/form.tsx
+/**
+* Form component - wraps FormProvider and provides form context
+*/
+function Form({ form, className, style, children, onSubmit, onAutoSubmit, itemProps, objectContainerProps, density, responsive, config }) {
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		form.submit((values) => {
+			onSubmit?.(values);
+			onAutoSubmit?.(values);
+		}).catch(() => {});
+	};
+	return /* @__PURE__ */ jsx(Provider, {
+		value: React.useMemo(() => {
+			return {
+				itemProps,
+				objectContainerProps,
+				density,
+				responsive,
+				config
+			};
+		}, [
+			itemProps,
+			objectContainerProps,
+			density,
+			responsive,
+			config
+		]),
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			form,
+			children: /* @__PURE__ */ jsx(FormItemContainer, {
+				as: "form",
+				className: cn("space-y-6", className),
+				style,
+				onSubmit: handleSubmit,
+				children
+			})
+		})
+	});
+}
+
+//#endregion
+export { Form };

package/dist/components/hidden.cjs

@@ -1 +1,26 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`@formily/react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);const r=e=>(0,n.jsx)(`input`,{type:`hidden`,value:e.value}),i=(0,t.connect)(r,(0,t.mapProps)((e,t)=>({...e,value:t.value??``})));exports.Hidden=i;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/hidden.tsx
+const HiddenInput = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		type: "hidden",
+		value: props.value
+	});
+};
+/**
+* Formily-connected Input component
+* Automatically connects shadcn Input to Formily field state
+*/
+const Hidden = (0, __formily_react.connect)(HiddenInput, (0, __formily_react.mapProps)((props, field) => {
+	return {
+		...props,
+		value: field.value ?? ""
+	};
+}));
+
+//#endregion
+exports.Hidden = Hidden;