@pixpilot/formily-shadcn 1.12.8 → 1.13.0

package/dist/components/Checkbox.d.cts

@@ -1,4 +1,4 @@
-import * as react0 from "react";
+import * as react1 from "react";
 import * as _radix_ui_react_checkbox0 from "@radix-ui/react-checkbox";
 
 //#region src/components/Checkbox.d.ts
@@ -6,6 +6,6 @@ import * as _radix_ui_react_checkbox0 from "@radix-ui/react-checkbox";
  * Formily-connected Checkbox component
  * Maps Formily field checked state to shadcn Checkbox
  */
-declare const Checkbox: react0.ForwardRefExoticComponent<Omit<Partial<_radix_ui_react_checkbox0.CheckboxProps & react0.RefAttributes<HTMLButtonElement>>, "ref"> & react0.RefAttributes<unknown>>;
+declare const Checkbox: react1.ForwardRefExoticComponent<Omit<Partial<_radix_ui_react_checkbox0.CheckboxProps & react1.RefAttributes<HTMLButtonElement>>, "ref"> & react1.RefAttributes<unknown>>;
 //#endregion
 export { Checkbox };

package/dist/components/DatePicker.d.cts

@@ -1,11 +1,11 @@
-import * as react2 from "react";
+import * as react0 from "react";
 import { DatePickerProps } from "@pixpilot/shadcn-ui";
 
 //#region src/components/DatePicker.d.ts
-declare const DatePicker: react2.ForwardRefExoticComponent<Partial<{
+declare const DatePicker: react0.ForwardRefExoticComponent<Partial<{
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
-} & Omit<DatePickerProps, "onSelect" | "selected" | "mode">> & react2.RefAttributes<unknown>>;
+} & Omit<DatePickerProps, "onSelect" | "selected" | "mode">> & react0.RefAttributes<unknown>>;
 //#endregion
 export { DatePicker };

package/dist/components/Form.cjs

@@ -35,7 +35,7 @@ function Form({ form, id, className, style, children, onSubmit, onAutoSubmit, la
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormItemContainer.FormItemContainer, {
 				as: "form",
 				id,
-				className: (0, __pixpilot_shadcn.cn)(className),
+				className: (0, __pixpilot_shadcn.cn)("flex flex-col", className),
 				style,
 				onSubmit: handleSubmit,
 				children

package/dist/components/Form.js

@@ -30,7 +30,7 @@ function Form({ form, id, className, style, children, onSubmit, onAutoSubmit, la
 			children: /* @__PURE__ */ jsx(FormItemContainer, {
 				as: "form",
 				id,
-				className: cn(className),
+				className: cn("flex flex-col", className),
 				style,
 				onSubmit: handleSubmit,
 				children

package/dist/components/IconPicker.d.ts

@@ -1,4 +1,4 @@
-import * as react4 from "react";
+import * as react11 from "react";
 import { IconPickerProps, IconProviderProps } from "@pixpilot/shadcn-ui";
 
 //#region src/components/IconPicker.d.ts
@@ -8,8 +8,8 @@ import { IconPickerProps, IconProviderProps } from "@pixpilot/shadcn-ui";
  * Automatically connects to Formily field state
  * Supports both static and async icon providers
  */
-declare const IconPicker$1: react4.ForwardRefExoticComponent<Partial<Omit<IconPickerProps, "providers"> & {
+declare const IconPicker$1: react11.ForwardRefExoticComponent<Partial<Omit<IconPickerProps, "providers"> & {
   providers?: IconProviderProps[];
-}> & react4.RefAttributes<unknown>>;
+}> & react11.RefAttributes<unknown>>;
 //#endregion
 export { IconPicker$1 as IconPicker };

package/dist/components/IconToggle.d.ts

@@ -1,4 +1,4 @@
-import * as react6 from "react";
+import * as react8 from "react";
 import * as _pixpilot_shadcn_ui0 from "@pixpilot/shadcn-ui";
 
 //#region src/components/IconToggle.d.ts
@@ -6,6 +6,6 @@ import * as _pixpilot_shadcn_ui0 from "@pixpilot/shadcn-ui";
  * Formily-connected IconToggle component
  * Toggle button with customizable icons for boolean values
  */
-declare const IconToggle$1: react6.ForwardRefExoticComponent<Omit<Partial<Omit<_pixpilot_shadcn_ui0.IconToggleProps, "ref"> & react6.RefAttributes<HTMLButtonElement>>, "ref"> & react6.RefAttributes<unknown>>;
+declare const IconToggle$1: react8.ForwardRefExoticComponent<Omit<Partial<Omit<_pixpilot_shadcn_ui0.IconToggleProps, "ref"> & react8.RefAttributes<HTMLButtonElement>>, "ref"> & react8.RefAttributes<unknown>>;
 //#endregion
 export { IconToggle$1 as IconToggle };

package/dist/components/Input.d.ts

@@ -1,4 +1,4 @@
-import * as react9 from "react";
+import * as react4 from "react";
 
 //#region src/components/Input.d.ts
 
@@ -6,12 +6,12 @@ import * as react9 from "react";
  * Formily-connected Input component
  * Automatically connects shadcn Input to Formily field state
  */
-declare const Input: react9.ForwardRefExoticComponent<Omit<Partial<react9.ClassAttributes<HTMLInputElement> & react9.InputHTMLAttributes<HTMLInputElement> & {
+declare const Input: react4.ForwardRefExoticComponent<Omit<Partial<react4.ClassAttributes<HTMLInputElement> & react4.InputHTMLAttributes<HTMLInputElement> & {
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   groupClassName?: string;
   prefixClassName?: string;
   suffixClassName?: string;
-}>, "ref"> & react9.RefAttributes<unknown>>;
+}>, "ref"> & react4.RefAttributes<unknown>>;
 //#endregion
 export { Input };

package/dist/components/context/types.d.cts

@@ -1,9 +1,10 @@
 import { ActionItem } from "../array-base/types.cjs";
 import "../array-base/index.cjs";
 import { FormSpace } from "../../types/form.cjs";
-import { DescriptionPlacement, LabelPlacement } from "../../types/form-item.cjs";
 import { FormFileUploadOptions } from "../file-upload/types.cjs";
 import "../file-upload/index.cjs";
+import { FormItemDescriptionProps, FormItemLabelProps } from "../form-item/form-item-types.cjs";
+import "../form-item/index.cjs";
 import { DialogContentProps, IconProvider, PopoverContentProps, RichTextEditorProps } from "@pixpilot/shadcn-ui";
 
 //#region src/components/context/types.d.ts
@@ -53,14 +54,10 @@ interface FormSettings {
 interface FormLayoutOptions {
   /** Form density - affects spacing between elements */
   density?: FormSpace['density'];
-  /** Default description placement for FormItem decorators */
-  descriptionPlacement?: DescriptionPlacement;
-  /** Default label placement for FormItem decorators */
-  labelPlacement?: LabelPlacement;
-  /** Custom class names for FormItem elements */
+  /** Custom props for FormItem elements */
   itemProps?: {
-    label?: React.LabelHTMLAttributes<HTMLLabelElement>;
-    description?: React.HTMLAttributes<HTMLParagraphElement>;
+    label?: FormItemLabelProps;
+    description?: FormItemDescriptionProps;
     inputWrapper?: React.HTMLAttributes<HTMLDivElement>;
     error?: React.HTMLAttributes<HTMLParagraphElement>;
     container?: React.HTMLAttributes<HTMLDivElement>;

package/dist/components/context/types.d.ts

@@ -1,9 +1,10 @@
 import { ActionItem } from "../array-base/types.js";
 import "../array-base/index.js";
 import { FormSpace } from "../../types/form.js";
-import { DescriptionPlacement, LabelPlacement } from "../../types/form-item.js";
 import { FormFileUploadOptions } from "../file-upload/types.js";
 import "../file-upload/index.js";
+import { FormItemDescriptionProps, FormItemLabelProps } from "../form-item/form-item-types.js";
+import "../form-item/index.js";
 import { DialogContentProps, IconProvider, PopoverContentProps, RichTextEditorProps } from "@pixpilot/shadcn-ui";
 
 //#region src/components/context/types.d.ts
@@ -53,14 +54,10 @@ interface FormSettings {
 interface FormLayoutOptions {
   /** Form density - affects spacing between elements */
   density?: FormSpace['density'];
-  /** Default description placement for FormItem decorators */
-  descriptionPlacement?: DescriptionPlacement;
-  /** Default label placement for FormItem decorators */
-  labelPlacement?: LabelPlacement;
-  /** Custom class names for FormItem elements */
+  /** Custom props for FormItem elements */
   itemProps?: {
-    label?: React.LabelHTMLAttributes<HTMLLabelElement>;
-    description?: React.HTMLAttributes<HTMLParagraphElement>;
+    label?: FormItemLabelProps;
+    description?: FormItemDescriptionProps;
     inputWrapper?: React.HTMLAttributes<HTMLDivElement>;
     error?: React.HTMLAttributes<HTMLParagraphElement>;
     container?: React.HTMLAttributes<HTMLDivElement>;

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

@@ -19,7 +19,7 @@ __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 function resolveLegacyDescriptionPlacement(labelPlacement) {
 	return labelPlacement === "top" ? "top" : "bottom";
 }
-const BaseFormItem = ({ className, children, label, description, descriptionPlacement, asterisk, feedbackStatus, feedbackText, slots,...props }) => {
+const BaseFormItem = ({ className, children, label, description, descriptionPlacement, requiredMark, asterisk, feedbackStatus, feedbackText, slots,...props }) => {
 	const field = (0, __formily_react.useField)();
 	const fieldDecoratorProps = field?.decoratorProps;
 	const fieldComponentProps = field?.componentProps;
@@ -29,8 +29,8 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
 	const effectiveLabel = require_use_label.useLabel(label);
 	const { layout } = require_use_form_context.useFormContext();
 	const itemComponentsProps = layout?.itemProps || {};
-	const contextDescriptionPlacement = layout?.descriptionPlacement;
-	const contextLabelPlacement = layout?.labelPlacement;
+	const { placement: contextDescriptionPlacement,...itemDescriptionProps } = itemComponentsProps.description ?? {};
+	const contextLabelPlacement = itemComponentsProps.label?.placement;
 	const fieldLabelPlacement = fieldLabelProps?.placement ?? fieldDecoratorProps?.labelPlacement ?? fieldComponentProps?.labelPlacement;
 	const propLabelPlacement = slots?.label?.placement;
 	const effectiveLabelPlacement = fieldLabelPlacement ?? propLabelPlacement ?? contextLabelPlacement ?? "top";
@@ -45,7 +45,7 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
 		"data-slot": "form-item-label",
 		id: (0, __pixpilot_shadcn_ui.getId)(id, "label"),
 		label: effectiveLabel,
-		asterisk,
+		requiredMark: requiredMark !== void 0 ? requiredMark : asterisk,
 		error: feedbackStatus === "error",
 		shrink: effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start",
 		labelProps: {
@@ -70,10 +70,10 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
 	});
 	const descriptionElement = descriptionRenderedInline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 		"data-slot": "form-item-description",
-		...itemComponentsProps.description,
+		...itemDescriptionProps,
 		...slots?.description,
 		id: descriptionId,
-		className: (0, __pixpilot_shadcn.cn)("text-muted-foreground text-[0.8rem]", spacingConfig.description, itemComponentsProps.description?.className, slots?.description?.className),
+		className: (0, __pixpilot_shadcn.cn)("text-muted-foreground text-[0.8rem]", spacingConfig.description, itemDescriptionProps.className, slots?.description?.className),
 		children: description
 	}) : null;
 	const contentElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [

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

@@ -13,7 +13,7 @@ import { cn as cn$1 } from "@pixpilot/shadcn";
 function resolveLegacyDescriptionPlacement(labelPlacement) {
 	return labelPlacement === "top" ? "top" : "bottom";
 }
-const BaseFormItem = ({ className, children, label, description, descriptionPlacement, asterisk, feedbackStatus, feedbackText, slots,...props }) => {
+const BaseFormItem = ({ className, children, label, description, descriptionPlacement, requiredMark, asterisk, feedbackStatus, feedbackText, slots,...props }) => {
 	const field = useField();
 	const fieldDecoratorProps = field?.decoratorProps;
 	const fieldComponentProps = field?.componentProps;
@@ -23,8 +23,8 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
 	const effectiveLabel = useLabel(label);
 	const { layout } = useFormContext();
 	const itemComponentsProps = layout?.itemProps || {};
-	const contextDescriptionPlacement = layout?.descriptionPlacement;
-	const contextLabelPlacement = layout?.labelPlacement;
+	const { placement: contextDescriptionPlacement,...itemDescriptionProps } = itemComponentsProps.description ?? {};
+	const contextLabelPlacement = itemComponentsProps.label?.placement;
 	const fieldLabelPlacement = fieldLabelProps?.placement ?? fieldDecoratorProps?.labelPlacement ?? fieldComponentProps?.labelPlacement;
 	const propLabelPlacement = slots?.label?.placement;
 	const effectiveLabelPlacement = fieldLabelPlacement ?? propLabelPlacement ?? contextLabelPlacement ?? "top";
@@ -39,7 +39,7 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
 		"data-slot": "form-item-label",
 		id: getId(id, "label"),
 		label: effectiveLabel,
-		asterisk,
+		requiredMark: requiredMark !== void 0 ? requiredMark : asterisk,
 		error: feedbackStatus === "error",
 		shrink: effectiveLabelPlacement === "end" || effectiveLabelPlacement === "start",
 		labelProps: {
@@ -64,10 +64,10 @@ const BaseFormItem = ({ className, children, label, description, descriptionPlac
 	});
 	const descriptionElement = descriptionRenderedInline ? /* @__PURE__ */ jsx("p", {
 		"data-slot": "form-item-description",
-		...itemComponentsProps.description,
+		...itemDescriptionProps,
 		...slots?.description,
 		id: descriptionId,
-		className: cn$1("text-muted-foreground text-[0.8rem]", spacingConfig.description, itemComponentsProps.description?.className, slots?.description?.className),
+		className: cn$1("text-muted-foreground text-[0.8rem]", spacingConfig.description, itemDescriptionProps.className, slots?.description?.className),
 		children: description
 	}) : null;
 	const contentElement = /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -15,7 +15,7 @@ const FormItem = (0, __formily_react.connect)(require_BaseFormItem.BaseFormItem,
 	if ((0, __formily_core.isVoidField)(field)) return {
 		label: field.title ?? props.label,
 		description: props.description ?? field.description,
-		asterisk: props.asterisk
+		requiredMark: props.requiredMark !== void 0 ? props.requiredMark : props.asterisk
 	};
 	const takeFeedbackStatus = () => {
 		if (field.validating) return void 0;
@@ -30,18 +30,16 @@ const FormItem = (0, __formily_react.connect)(require_BaseFormItem.BaseFormItem,
 		if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
 		if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
 	};
-	const takeAsterisk = () => {
-		if ("asterisk" in props) return Boolean(props.asterisk);
-		if (schema.parent && Array.isArray(schema.parent.required) && schema.parent.required.includes(schema.name)) return true;
-		if (field.required && field.pattern !== "readPretty") return true;
-		return false;
-	};
+	let resolvedRequiredMark = props.requiredMark;
+	if (resolvedRequiredMark === void 0) if (props.asterisk !== void 0) resolvedRequiredMark = Boolean(props.asterisk);
+	else if (schema.parent && Array.isArray(schema.parent.required) && schema.parent.required.includes(schema.name)) resolvedRequiredMark = true;
+	else resolvedRequiredMark = field.required && field.pattern !== "readPretty";
 	return {
 		label: props.label ?? field.title,
 		description: props.description ?? field.description,
 		feedbackStatus: takeFeedbackStatus(),
 		feedbackText: takeFeedbackText(),
-		asterisk: takeAsterisk()
+		requiredMark: resolvedRequiredMark
 	};
 }));
 

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

@@ -12,7 +12,7 @@ const FormItem = connect(BaseFormItem, mapProps((props, field) => {
 	if (isVoidField(field)) return {
 		label: field.title ?? props.label,
 		description: props.description ?? field.description,
-		asterisk: props.asterisk
+		requiredMark: props.requiredMark !== void 0 ? props.requiredMark : props.asterisk
 	};
 	const takeFeedbackStatus = () => {
 		if (field.validating) return void 0;
@@ -27,18 +27,16 @@ const FormItem = connect(BaseFormItem, mapProps((props, field) => {
 		if (field.selfWarnings?.length) return field.selfWarnings.join(", ");
 		if (field.selfSuccesses?.length) return field.selfSuccesses.join(", ");
 	};
-	const takeAsterisk = () => {
-		if ("asterisk" in props) return Boolean(props.asterisk);
-		if (schema.parent && Array.isArray(schema.parent.required) && schema.parent.required.includes(schema.name)) return true;
-		if (field.required && field.pattern !== "readPretty") return true;
-		return false;
-	};
+	let resolvedRequiredMark = props.requiredMark;
+	if (resolvedRequiredMark === void 0) if (props.asterisk !== void 0) resolvedRequiredMark = Boolean(props.asterisk);
+	else if (schema.parent && Array.isArray(schema.parent.required) && schema.parent.required.includes(schema.name)) resolvedRequiredMark = true;
+	else resolvedRequiredMark = field.required && field.pattern !== "readPretty";
 	return {
 		label: props.label ?? field.title,
 		description: props.description ?? field.description,
 		feedbackStatus: takeFeedbackStatus(),
 		feedbackText: takeFeedbackText(),
-		asterisk: takeAsterisk()
+		requiredMark: resolvedRequiredMark
 	};
 }));
 

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

@@ -1,4 +1,4 @@
 import { DescriptionPlacement } from "../../types/form-item.cjs";
-import { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.cjs";
+import { FormItemDescriptionProps, FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.cjs";
 import "./BaseFormItem.cjs";
 import { FormItem } from "./ConnectedFormItem.cjs";

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

@@ -1,4 +1,4 @@
 import { DescriptionPlacement } from "../../types/form-item.js";
-import { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.js";
+import { FormItemDescriptionProps, FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.js";
 import "./BaseFormItem.js";
 import { FormItem } from "./ConnectedFormItem.js";

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

@@ -6,8 +6,9 @@ let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 
 //#region src/components/form-item/FormItemLabel.tsx
-function FormItemLabel({ id, label, asterisk, error, shrink, labelProps, description, descriptionInPopover }) {
+function FormItemLabel({ id, label, requiredMark, asterisk, error, shrink, labelProps, description, descriptionInPopover }) {
 	const { className, placement: _placement,...restLabelProps } = labelProps ?? {};
+	const resolvedRequiredMark = requiredMark !== void 0 ? requiredMark : asterisk;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		htmlFor: id,
 		"data-slot": "form-item-label",
@@ -21,11 +22,11 @@ function FormItemLabel({ id, label, asterisk, error, shrink, labelProps, descrip
 				"data-slot": "form-item-label-text",
 				children: label
 			}), descriptionInPopover && description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormItemDescriptionPopover.FormItemDescriptionPopover, { description })]
-		}), asterisk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			"data-slot": "form-item-label-asterisk",
+		}), resolvedRequiredMark !== false && resolvedRequiredMark != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"data-slot": "form-item-label-required-mark",
 			className: "text-destructive ml-1",
 			"aria-label": "required",
-			children: "*"
+			children: resolvedRequiredMark === true ? "*" : resolvedRequiredMark
 		})]
 	});
 }

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

@@ -3,8 +3,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@pixpilot/shadcn";
 
 //#region src/components/form-item/FormItemLabel.tsx
-function FormItemLabel({ id, label, asterisk, error, shrink, labelProps, description, descriptionInPopover }) {
+function FormItemLabel({ id, label, requiredMark, asterisk, error, shrink, labelProps, description, descriptionInPopover }) {
 	const { className, placement: _placement,...restLabelProps } = labelProps ?? {};
+	const resolvedRequiredMark = requiredMark !== void 0 ? requiredMark : asterisk;
 	return /* @__PURE__ */ jsxs("label", {
 		htmlFor: id,
 		"data-slot": "form-item-label",
@@ -18,11 +19,11 @@ function FormItemLabel({ id, label, asterisk, error, shrink, labelProps, descrip
 				"data-slot": "form-item-label-text",
 				children: label
 			}), descriptionInPopover && description != null && /* @__PURE__ */ jsx(FormItemDescriptionPopover, { description })]
-		}), asterisk && /* @__PURE__ */ jsx("span", {
-			"data-slot": "form-item-label-asterisk",
+		}), resolvedRequiredMark !== false && resolvedRequiredMark != null && /* @__PURE__ */ jsx("span", {
+			"data-slot": "form-item-label-required-mark",
 			className: "text-destructive ml-1",
 			"aria-label": "required",
-			children: "*"
+			children: resolvedRequiredMark === true ? "*" : resolvedRequiredMark
 		})]
 	});
 }

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

@@ -7,6 +7,9 @@ type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
 type FormItemLabelProps = Omit<React.ComponentPropsWithoutRef<'label'>, 'children' | 'htmlFor'> & {
   placement?: LabelPlacement;
 };
+type FormItemDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+  placement?: DescriptionPlacement;
+};
 interface FormItemSlots {
   label?: FormItemLabelProps;
   description?: React.HTMLAttributes<HTMLParagraphElement>;
@@ -25,9 +28,13 @@ interface FormItemProps extends React.ComponentProps<'div'> {
    * - `popover`: show a help icon before the label and render the description in a hover popover
    */
   descriptionPlacement?: DescriptionPlacement;
+  requiredMark?: boolean | React.ReactNode;
+  /**
+   * @deprecated Use `requiredMark` instead.
+   */
   asterisk?: boolean;
   feedbackStatus?: 'error' | 'warning' | 'success';
   feedbackText?: SyncReactNode;
 }
 //#endregion
-export { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement };
+export { FormItemDescriptionProps, FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement };

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

@@ -7,6 +7,9 @@ type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
 type FormItemLabelProps = Omit<React.ComponentPropsWithoutRef<'label'>, 'children' | 'htmlFor'> & {
   placement?: LabelPlacement;
 };
+type FormItemDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+  placement?: DescriptionPlacement;
+};
 interface FormItemSlots {
   label?: FormItemLabelProps;
   description?: React.HTMLAttributes<HTMLParagraphElement>;
@@ -25,9 +28,13 @@ interface FormItemProps extends React.ComponentProps<'div'> {
    * - `popover`: show a help icon before the label and render the description in a hover popover
    */
   descriptionPlacement?: DescriptionPlacement;
+  requiredMark?: boolean | React.ReactNode;
+  /**
+   * @deprecated Use `requiredMark` instead.
+   */
   asterisk?: boolean;
   feedbackStatus?: 'error' | 'warning' | 'success';
   feedbackText?: SyncReactNode;
 }
 //#endregion
-export { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement };
+export { FormItemDescriptionProps, FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement };

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

@@ -1,4 +1,4 @@
 import { DescriptionPlacement } from "../../types/form-item.cjs";
-import { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.cjs";
+import { FormItemDescriptionProps, FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.cjs";
 import { FormItem } from "./ConnectedFormItem.cjs";
 import "./FormItem.cjs";

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

@@ -1,4 +1,4 @@
 import { DescriptionPlacement } from "../../types/form-item.js";
-import { FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.js";
+import { FormItemDescriptionProps, FormItemLabelProps, FormItemProps, FormItemSlots, LabelPlacement } from "./form-item-types.js";
 import { FormItem } from "./ConnectedFormItem.js";
 import "./FormItem.js";

package/dist/index.d.cts

@@ -30,11 +30,11 @@ import { FileUploadInline, FileUploadInlineProps } from "./components/file-uploa
 import { FormFileUploadOptions } from "./components/file-upload/types.cjs";
 import { useFileUploadFeedback } from "./components/file-upload/use-file-upload-feedback.cjs";
 import "./components/file-upload/index.cjs";
+import { FormItem } from "./components/form-item/ConnectedFormItem.cjs";
+import "./components/form-item/index.cjs";
 import { FomFileUpload, FormLayoutOptions, FormSettings } from "./components/context/types.cjs";
 import { DatePicker } from "./components/DatePicker.cjs";
 import { Form } from "./components/Form.cjs";
-import { FormItem } from "./components/form-item/ConnectedFormItem.cjs";
-import "./components/form-item/index.cjs";
 import { FormGrid } from "./components/FormGrid.cjs";
 import { IconPicker } from "./components/IconPicker.cjs";
 import { IconToggle } from "./components/IconToggle.cjs";

package/dist/index.d.ts

@@ -30,11 +30,11 @@ import { FileUploadInline, FileUploadInlineProps } from "./components/file-uploa
 import { FormFileUploadOptions } from "./components/file-upload/types.js";
 import { useFileUploadFeedback } from "./components/file-upload/use-file-upload-feedback.js";
 import "./components/file-upload/index.js";
+import { FormItem } from "./components/form-item/ConnectedFormItem.js";
+import "./components/form-item/index.js";
 import { FomFileUpload, FormLayoutOptions, FormSettings } from "./components/context/types.js";
 import { DatePicker } from "./components/DatePicker.js";
 import { Form } from "./components/Form.js";
-import { FormItem } from "./components/form-item/ConnectedFormItem.js";
-import "./components/form-item/index.js";
 import { FormGrid } from "./components/FormGrid.js";
 import { IconPicker } from "./components/IconPicker.js";
 import { IconToggle } from "./components/IconToggle.js";

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

@@ -1,5 +1,4 @@
 //#region src/types/form-item.d.ts
 type DescriptionPlacement = 'top' | 'bottom' | 'popover';
-type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
 //#endregion
-export { DescriptionPlacement, LabelPlacement };
+export { DescriptionPlacement };

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

@@ -1,5 +1,4 @@
 //#region src/types/form-item.d.ts
 type DescriptionPlacement = 'top' | 'bottom' | 'popover';
-type LabelPlacement = 'top' | 'bottom' | 'start' | 'end';
 //#endregion
-export { DescriptionPlacement, LabelPlacement };
+export { DescriptionPlacement };

package/dist/utils/resolve-responsive-space.cjs

@@ -10,16 +10,16 @@ const densitySpaceMap = {
 	comfortable: "lg"
 };
 /**
-* Space-Y spacing configuration
+* gap-y spacing configuration
 * Controls vertical spacing between form items
 */
 const spaceYConfig = {
 	fixed: {
-		sm: "space-y-3",
-		md: "space-y-4",
-		lg: "space-y-6"
+		sm: "gap-y-3",
+		md: "gap-y-4",
+		lg: "gap-y-6"
 	},
-	responsive: "space-y-3 md:space-y-4 lg:space-y-6"
+	responsive: "gap-y-3 md:gap-y-4 lg:gap-y-6"
 };
 /**
 * Gap-Y spacing configuration
@@ -47,7 +47,7 @@ function resolveSpacingClass(density, config) {
 	return config.fixed[space];
 }
 /**
-* Resolves responsive space and returns the Tailwind space-y class(es)
+* Resolves responsive space and returns the Tailwind gap-y class(es)
 * For responsive density, returns responsive breakpoint classes
 * For fixed density, returns single space class
 *

package/dist/utils/resolve-responsive-space.js

@@ -9,16 +9,16 @@ const densitySpaceMap = {
 	comfortable: "lg"
 };
 /**
-* Space-Y spacing configuration
+* gap-y spacing configuration
 * Controls vertical spacing between form items
 */
 const spaceYConfig = {
 	fixed: {
-		sm: "space-y-3",
-		md: "space-y-4",
-		lg: "space-y-6"
+		sm: "gap-y-3",
+		md: "gap-y-4",
+		lg: "gap-y-6"
 	},
-	responsive: "space-y-3 md:space-y-4 lg:space-y-6"
+	responsive: "gap-y-3 md:gap-y-4 lg:gap-y-6"
 };
 /**
 * Gap-Y spacing configuration
@@ -46,7 +46,7 @@ function resolveSpacingClass(density, config) {
 	return config.fixed[space];
 }
 /**
-* Resolves responsive space and returns the Tailwind space-y class(es)
+* Resolves responsive space and returns the Tailwind gap-y class(es)
 * For responsive density, returns responsive breakpoint classes
 * For fixed density, returns single space class
 *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/formily-shadcn",
   "type": "module",
-  "version": "1.12.8",
+  "version": "1.13.0",
   "description": "Formily integration for shadcn/ui components",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -58,9 +58,9 @@
     "react-dom": "19.2.0",
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
-    "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
     "@internal/eslint-config": "0.3.0",
+    "@internal/prettier-config": "0.0.1",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },