@pixpilot/formily-shadcn 1.12.8 → 1.13.1

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/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.d.cts

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

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/components/number/NumberInput.d.ts

@@ -1,15 +1,15 @@
-import * as react31 from "react";
+import * as react37 from "react";
 
 //#region src/components/number/NumberInput.d.ts
 /**
  * Formily-connected Number Input component
  */
-declare const NumberInput: react31.ForwardRefExoticComponent<Omit<Partial<react31.ClassAttributes<HTMLInputElement> & react31.InputHTMLAttributes<HTMLInputElement> & {
+declare const NumberInput: react37.ForwardRefExoticComponent<Omit<Partial<react37.ClassAttributes<HTMLInputElement> & react37.InputHTMLAttributes<HTMLInputElement> & {
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   groupClassName?: string;
   prefixClassName?: string;
   suffixClassName?: string;
-}>, "ref"> & react31.RefAttributes<unknown>>;
+}>, "ref"> & react37.RefAttributes<unknown>>;
 //#endregion
 export { NumberInput };