@pixpilot/formily-shadcn 1.16.0 → 1.17.0

package/dist/components/date-picker/DatePicker.d.cts

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

package/dist/components/date-picker/DatePicker.d.ts

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

package/dist/components/dialog-item/BaseDialogItem.cjs

@@ -0,0 +1,114 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ShakeStyles = require('../array-common/ShakeStyles.cjs');
+require('../array-common/index.cjs');
+const require_BaseFormItem = require('../form-item/BaseFormItem.cjs');
+require('../form-item/index.cjs');
+const require_OverlayFields = require('../overlay-common/OverlayFields.cjs');
+const require_OverlayTrigger = require('../overlay-common/OverlayTrigger.cjs');
+const require_use_overlay = require('../overlay-common/use-overlay.cjs');
+require('../overlay-common/index.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
+__pixpilot_shadcn_ui = require_rolldown_runtime.__toESM(__pixpilot_shadcn_ui);
+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/dialog-item/BaseDialogItem.tsx
+/**
+* Formily decorator that edits a single field inside a dialog.
+*
+* Used in place of FormItem (`x-decorator: 'DialogItem'`), it renders the
+* field's label, description, and validation feedback exactly as FormItem
+* does, but puts a trigger button where the input would sit and moves the
+* input itself into a dialog. The field keeps its own component, so validation
+* and x-reactions behave as they do under FormItem.
+*/
+const BaseDialogItem = ({ children, label, description, trigger: triggerProp, open: openProp, defaultOpen, onOpenChange, validateOnClose, doneLabel = "Done", dialog, feedbackStatus, feedbackText,...formItemProps }) => {
+	const { label: effectiveLabel, description: desc, trigger, open, gapClass, hasError, shouldShake, handleOpenChange, requestClose } = require_use_overlay.useOverlay({
+		label,
+		description,
+		trigger: triggerProp,
+		open: openProp,
+		defaultOpen,
+		onOpenChange,
+		validateOnClose
+	});
+	const title = dialog?.title ?? effectiveLabel ?? "Details";
+	const overlayDescription = dialog?.description ?? desc;
+	const slots = dialog?.slots;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.Dialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseFormItem.BaseFormItem, {
+				...formItemProps,
+				label,
+				description,
+				feedbackStatus,
+				feedbackText,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.DialogTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayTrigger.OverlayTrigger, {
+						invalid: hasError,
+						...trigger
+					})
+				})
+			}),
+			!open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayFields.OverlayFields, { children }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DialogContent, {
+				...overlayDescription == null ? { "aria-describedby": void 0 } : {},
+				...slots?.content,
+				className: (0, __pixpilot_shadcn.cn)("w-full xs:w-md", shouldShake && "pp-shake", slots?.content?.className),
+				onInteractOutside: (event) => {
+					slots?.content?.onInteractOutside?.(event);
+					if (event.defaultPrevented) return;
+					event.preventDefault();
+					requestClose();
+				},
+				onEscapeKeyDown: (event) => {
+					slots?.content?.onEscapeKeyDown?.(event);
+					if (event.defaultPrevented) return;
+					event.preventDefault();
+					requestClose();
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ShakeStyles.ShakeStyles, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DialogHeader, {
+						...slots?.header,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.DialogTitle, {
+							...slots?.title,
+							children: title
+						}), overlayDescription != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.DialogDescription, {
+							...slots?.description,
+							children: overlayDescription
+						})]
+					}),
+					open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DialogBody, {
+						...slots?.body,
+						className: (0, __pixpilot_shadcn.cn)("grid py-1", gapClass, slots?.body?.className),
+						children: [children, feedbackText != null && feedbackText !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							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: feedbackText
+						})]
+					}),
+					doneLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.DialogFooter, {
+						...slots?.footer,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Button, {
+							type: "button",
+							"data-slot": "footer-button",
+							onClick: requestClose,
+							children: doneLabel
+						})
+					})
+				]
+			})
+		]
+	});
+};
+BaseDialogItem.displayName = "BaseDialogItem";
+
+//#endregion
+exports.BaseDialogItem = BaseDialogItem;

package/dist/components/dialog-item/BaseDialogItem.d.cts

@@ -0,0 +1,56 @@
+import { SyncReactNode } from "../../types/react.cjs";
+import { FormItemProps } from "../form-item/form-item-types.cjs";
+import "../form-item/index.cjs";
+import { OverlayBaseSlots, OverlayProps } from "../overlay-common/overlay-types.cjs";
+import { OverlayTriggerProps } from "../overlay-common/OverlayTrigger.cjs";
+import "../overlay-common/index.cjs";
+import React from "react";
+import { DialogContentProps } from "@pixpilot/shadcn-ui";
+
+//#region src/components/dialog-item/BaseDialogItem.d.ts
+interface DialogItemProps extends FormItemProps {
+  /**
+   * Props for the trigger button, e.g. `{ label: 'Write a bio' }`. Without a
+   * label it reads `Add <title>` when the field is empty and `Edit <title>`
+   * once it holds a value. Settable from an x-reaction via
+   * `decoratorProps.trigger`.
+   */
+  trigger?: OverlayTriggerProps;
+  /** Controlled open state of the dialog. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * When false, the dialog closes without validating the field first.
+   * Default is true.
+   */
+  validateOnClose?: boolean;
+  /** Label of the button that closes the dialog. Set to `null` to hide the footer. */
+  doneLabel?: SyncReactNode;
+  /**
+   * The dialog itself — its `title`, `description`, and `slots`, e.g.
+   * `{ title: 'Notes', slots: { content: { className: 'w-2xl' } } }`. Title and
+   * description default to the field's label and description.
+   */
+  dialog?: DialogItemDialogProps;
+}
+interface DialogItemDialogSlots extends OverlayBaseSlots {
+  content?: DialogContentProps;
+  title?: React.ComponentProps<'div'>;
+  description?: React.ComponentProps<'div'>;
+  footer?: React.ComponentProps<'div'>;
+}
+type DialogItemDialogProps = OverlayProps<DialogItemDialogSlots>;
+/**
+ * Formily decorator that edits a single field inside a dialog.
+ *
+ * Used in place of FormItem (`x-decorator: 'DialogItem'`), it renders the
+ * field's label, description, and validation feedback exactly as FormItem
+ * does, but puts a trigger button where the input would sit and moves the
+ * input itself into a dialog. The field keeps its own component, so validation
+ * and x-reactions behave as they do under FormItem.
+ */
+declare const BaseDialogItem: React.FC<React.PropsWithChildren<DialogItemProps>>;
+//#endregion
+export { BaseDialogItem, DialogItemProps };

package/dist/components/dialog-item/BaseDialogItem.d.ts

@@ -0,0 +1,56 @@
+import { SyncReactNode } from "../../types/react.js";
+import { FormItemProps } from "../form-item/form-item-types.js";
+import "../form-item/index.js";
+import { OverlayBaseSlots, OverlayProps } from "../overlay-common/overlay-types.js";
+import { OverlayTriggerProps } from "../overlay-common/OverlayTrigger.js";
+import "../overlay-common/index.js";
+import React from "react";
+import { DialogContentProps } from "@pixpilot/shadcn-ui";
+
+//#region src/components/dialog-item/BaseDialogItem.d.ts
+interface DialogItemProps extends FormItemProps {
+  /**
+   * Props for the trigger button, e.g. `{ label: 'Write a bio' }`. Without a
+   * label it reads `Add <title>` when the field is empty and `Edit <title>`
+   * once it holds a value. Settable from an x-reaction via
+   * `decoratorProps.trigger`.
+   */
+  trigger?: OverlayTriggerProps;
+  /** Controlled open state of the dialog. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * When false, the dialog closes without validating the field first.
+   * Default is true.
+   */
+  validateOnClose?: boolean;
+  /** Label of the button that closes the dialog. Set to `null` to hide the footer. */
+  doneLabel?: SyncReactNode;
+  /**
+   * The dialog itself — its `title`, `description`, and `slots`, e.g.
+   * `{ title: 'Notes', slots: { content: { className: 'w-2xl' } } }`. Title and
+   * description default to the field's label and description.
+   */
+  dialog?: DialogItemDialogProps;
+}
+interface DialogItemDialogSlots extends OverlayBaseSlots {
+  content?: DialogContentProps;
+  title?: React.ComponentProps<'div'>;
+  description?: React.ComponentProps<'div'>;
+  footer?: React.ComponentProps<'div'>;
+}
+type DialogItemDialogProps = OverlayProps<DialogItemDialogSlots>;
+/**
+ * Formily decorator that edits a single field inside a dialog.
+ *
+ * Used in place of FormItem (`x-decorator: 'DialogItem'`), it renders the
+ * field's label, description, and validation feedback exactly as FormItem
+ * does, but puts a trigger button where the input would sit and moves the
+ * input itself into a dialog. The field keeps its own component, so validation
+ * and x-reactions behave as they do under FormItem.
+ */
+declare const BaseDialogItem: React.FC<React.PropsWithChildren<DialogItemProps>>;
+//#endregion
+export { BaseDialogItem, DialogItemProps };

package/dist/components/dialog-item/BaseDialogItem.js

@@ -0,0 +1,109 @@
+import { ShakeStyles } from "../array-common/ShakeStyles.js";
+import "../array-common/index.js";
+import { BaseFormItem } from "../form-item/BaseFormItem.js";
+import "../form-item/index.js";
+import { OverlayFields } from "../overlay-common/OverlayFields.js";
+import { OverlayTrigger } from "../overlay-common/OverlayTrigger.js";
+import { useOverlay } from "../overlay-common/use-overlay.js";
+import "../overlay-common/index.js";
+import React from "react";
+import { Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@pixpilot/shadcn-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn as cn$1 } from "@pixpilot/shadcn";
+
+//#region src/components/dialog-item/BaseDialogItem.tsx
+/**
+* Formily decorator that edits a single field inside a dialog.
+*
+* Used in place of FormItem (`x-decorator: 'DialogItem'`), it renders the
+* field's label, description, and validation feedback exactly as FormItem
+* does, but puts a trigger button where the input would sit and moves the
+* input itself into a dialog. The field keeps its own component, so validation
+* and x-reactions behave as they do under FormItem.
+*/
+const BaseDialogItem = ({ children, label, description, trigger: triggerProp, open: openProp, defaultOpen, onOpenChange, validateOnClose, doneLabel = "Done", dialog, feedbackStatus, feedbackText,...formItemProps }) => {
+	const { label: effectiveLabel, description: desc, trigger, open, gapClass, hasError, shouldShake, handleOpenChange, requestClose } = useOverlay({
+		label,
+		description,
+		trigger: triggerProp,
+		open: openProp,
+		defaultOpen,
+		onOpenChange,
+		validateOnClose
+	});
+	const title = dialog?.title ?? effectiveLabel ?? "Details";
+	const overlayDescription = dialog?.description ?? desc;
+	const slots = dialog?.slots;
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [
+			/* @__PURE__ */ jsx(BaseFormItem, {
+				...formItemProps,
+				label,
+				description,
+				feedbackStatus,
+				feedbackText,
+				children: /* @__PURE__ */ jsx(DialogTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(OverlayTrigger, {
+						invalid: hasError,
+						...trigger
+					})
+				})
+			}),
+			!open && /* @__PURE__ */ jsx(OverlayFields, { children }),
+			/* @__PURE__ */ jsxs(DialogContent, {
+				...overlayDescription == null ? { "aria-describedby": void 0 } : {},
+				...slots?.content,
+				className: cn$1("w-full xs:w-md", shouldShake && "pp-shake", slots?.content?.className),
+				onInteractOutside: (event) => {
+					slots?.content?.onInteractOutside?.(event);
+					if (event.defaultPrevented) return;
+					event.preventDefault();
+					requestClose();
+				},
+				onEscapeKeyDown: (event) => {
+					slots?.content?.onEscapeKeyDown?.(event);
+					if (event.defaultPrevented) return;
+					event.preventDefault();
+					requestClose();
+				},
+				children: [
+					/* @__PURE__ */ jsx(ShakeStyles, {}),
+					/* @__PURE__ */ jsxs(DialogHeader, {
+						...slots?.header,
+						children: [/* @__PURE__ */ jsx(DialogTitle, {
+							...slots?.title,
+							children: title
+						}), overlayDescription != null && /* @__PURE__ */ jsx(DialogDescription, {
+							...slots?.description,
+							children: overlayDescription
+						})]
+					}),
+					open && /* @__PURE__ */ jsxs(DialogBody, {
+						...slots?.body,
+						className: cn$1("grid py-1", gapClass, slots?.body?.className),
+						children: [children, feedbackText != null && feedbackText !== "" && /* @__PURE__ */ jsx("p", {
+							className: cn$1("text-[0.8rem]", feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600"),
+							children: feedbackText
+						})]
+					}),
+					doneLabel != null && /* @__PURE__ */ jsx(DialogFooter, {
+						...slots?.footer,
+						children: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							"data-slot": "footer-button",
+							onClick: requestClose,
+							children: doneLabel
+						})
+					})
+				]
+			})
+		]
+	});
+};
+BaseDialogItem.displayName = "BaseDialogItem";
+
+//#endregion
+export { BaseDialogItem };

package/dist/components/dialog-item/ConnectedDialogItem.cjs

@@ -0,0 +1,16 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_map_form_item_props = require('../form-item/map-form-item-props.cjs');
+const require_BaseDialogItem = require('./BaseDialogItem.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+
+//#region src/components/dialog-item/ConnectedDialogItem.tsx
+/**
+* DialogItem decorator connected to Formily field state.
+* Maps field label, description, and validation state onto the decorator the
+* same way FormItem does.
+*/
+const DialogItem = (0, __formily_react.connect)(require_BaseDialogItem.BaseDialogItem, (0, __formily_react.mapProps)(require_map_form_item_props.mapFormItemProps));
+
+//#endregion
+exports.DialogItem = DialogItem;

package/dist/components/dialog-item/ConnectedDialogItem.d.cts

@@ -0,0 +1,15 @@
+import { DialogItemProps } from "./BaseDialogItem.cjs";
+import * as react0 from "react";
+
+//#region src/components/dialog-item/ConnectedDialogItem.d.ts
+
+/**
+ * DialogItem decorator connected to Formily field state.
+ * Maps field label, description, and validation state onto the decorator the
+ * same way FormItem does.
+ */
+declare const DialogItem: react0.ForwardRefExoticComponent<Omit<Partial<DialogItemProps & {
+  children?: react0.ReactNode | undefined;
+}>, "ref"> & react0.RefAttributes<unknown>>;
+//#endregion
+export { DialogItem };

package/dist/components/dialog-item/ConnectedDialogItem.d.ts

@@ -0,0 +1,15 @@
+import { DialogItemProps } from "./BaseDialogItem.js";
+import * as react2 from "react";
+
+//#region src/components/dialog-item/ConnectedDialogItem.d.ts
+
+/**
+ * DialogItem decorator connected to Formily field state.
+ * Maps field label, description, and validation state onto the decorator the
+ * same way FormItem does.
+ */
+declare const DialogItem: react2.ForwardRefExoticComponent<Omit<Partial<DialogItemProps & {
+  children?: react2.ReactNode | undefined;
+}>, "ref"> & react2.RefAttributes<unknown>>;
+//#endregion
+export { DialogItem };

package/dist/components/dialog-item/ConnectedDialogItem.js

@@ -0,0 +1,14 @@
+import { mapFormItemProps } from "../form-item/map-form-item-props.js";
+import { BaseDialogItem } from "./BaseDialogItem.js";
+import { connect, mapProps } from "@formily/react";
+
+//#region src/components/dialog-item/ConnectedDialogItem.tsx
+/**
+* DialogItem decorator connected to Formily field state.
+* Maps field label, description, and validation state onto the decorator the
+* same way FormItem does.
+*/
+const DialogItem = connect(BaseDialogItem, mapProps(mapFormItemProps));
+
+//#endregion
+export { DialogItem };

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

@@ -0,0 +1,2 @@
+const require_BaseDialogItem = require('./BaseDialogItem.cjs');
+const require_ConnectedDialogItem = require('./ConnectedDialogItem.cjs');

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

@@ -0,0 +1,2 @@
+import { BaseDialogItem, DialogItemProps } from "./BaseDialogItem.cjs";
+import { DialogItem } from "./ConnectedDialogItem.cjs";

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

@@ -0,0 +1,2 @@
+import { BaseDialogItem, DialogItemProps } from "./BaseDialogItem.js";
+import { DialogItem } from "./ConnectedDialogItem.js";

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

@@ -0,0 +1,2 @@
+import { BaseDialogItem } from "./BaseDialogItem.js";
+import { DialogItem } from "./ConnectedDialogItem.js";

package/dist/components/dialog-item/mcp.js

@@ -0,0 +1,127 @@
+import { defineProps } from "../../mcp/src/utils.js";
+
+//#region src/components/dialog-item/mcp.ts
+const meta = {
+	name: "DialogItem",
+	category: "Formily",
+	description: "A Formily decorator used in place of FormItem (`x-decorator: 'DialogItem'`). It renders the field's label, description, and validation feedback like FormItem, but puts a trigger button where the input would sit and moves the field's own component into a dialog.",
+	htmlElement: "div",
+	props: defineProps({
+		label: "Label content or accessible label for the component.",
+		description: "Description content rendered with the component.",
+		trigger: {
+			description: "Props for the trigger button, e.g. `{ label: 'Write a bio' }`. Without a label it reads `Add <title>` while the field is empty and `Edit <title>` once it holds a value (`item` when the field has no title). Accepts the button's other props too (`icon`, `className`, …). An x-reaction can set this via `decoratorProps.trigger`.",
+			defaultValue: "`Add <title>` / `Edit <title>`"
+		},
+		open: {
+			description: "Controlled open state of the dialog.",
+			type: "boolean"
+		},
+		defaultOpen: {
+			description: "Initial open state when uncontrolled.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		onOpenChange: "Called when the dialog open state changes.",
+		validateOnClose: {
+			description: "When true (default), closing validates the field and keeps the dialog open (with a shake) while it is invalid. Set false to always close.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		doneLabel: {
+			description: "Label of the button that closes the dialog. Set to `null` to hide the footer.",
+			defaultValue: `'Done'`
+		},
+		dialog: "The dialog itself: `{ title, description, slots }`, e.g. `{ title: 'Notes', slots: { content: { className: 'w-2xl' } } }`. Title and description default to the field's label and description; `slots` takes props for `content`, `header`, `title`, `description`, `body`, and `footer`.",
+		slots: "Slot props forwarded to the FormItem parts (label, description, error).",
+		descriptionPlacement: "Forwarded to the underlying FormItem.",
+		requiredMark: "Forwarded to the underlying FormItem.",
+		asterisk: "Forwarded to the underlying FormItem.",
+		feedbackStatus: "Forwarded to the underlying FormItem.",
+		feedbackText: "Forwarded to the underlying FormItem."
+	}),
+	examples: [
+		{
+			title: "Edit a single field in a dialog",
+			code: `{
+  type: 'object',
+  properties: {
+    age: {
+      type: 'number',
+      title: 'Age',
+      description: 'Enter your age in years.',
+      default: 25,
+      'x-decorator': 'DialogItem',
+      'x-component': 'NumberInput',
+    },
+  },
+}`
+		},
+		{
+			title: "Declarative schema field",
+			code: `<SchemaField.String name="bio" title="Bio" x-decorator="DialogItem" x-component="Textarea" />`
+		},
+		{
+			title: "Trigger label driven by an x-reaction",
+			code: `{
+  type: 'string',
+  title: 'Bio',
+  'x-decorator': 'DialogItem',
+  'x-component': 'Textarea',
+  // Decorator props come from decoratorProps, not componentProps.
+  'x-reactions': {
+    fulfill: {
+      state: {
+        decoratorProps: {
+          trigger: {
+            label: "{{$self.value ? 'Edit bio' : 'Write a bio'}}",
+          },
+        },
+      },
+    },
+  },
+}`
+		},
+		{
+			title: "A whole object edited in one dialog",
+			code: `{
+  type: 'object',
+  title: 'Profile',
+  'x-decorator': 'DialogItem',
+  // type: 'object' resolves to ObjectContainer. Turn off its own label and
+  // description — the dialog header already shows them — and use the flat
+  // variant so the card chrome does not double up inside the dialog.
+  'x-component-props': { variant: 'flat', label: false, description: false },
+  properties: {
+    firstName: { type: 'string', title: 'First Name' },
+    lastName: { type: 'string', title: 'Last Name', required: true },
+  },
+}`
+		}
+	],
+	notes: [
+		"Works on an object too: decorating a `type: object` field puts its whole form in the dialog, and closing validates every field inside it, at any depth.",
+		"Swap in for FormItem on any field — the field keeps its own `x-component`, so validation, x-reactions, and component props behave exactly as under FormItem.",
+		"Edits commit to the form as the user types; there is no draft/Save step. The footer button closes the dialog rather than saving.",
+		"Closing (Done, Escape, outside click, or the X) validates the field first. An invalid field keeps the dialog open and shakes it.",
+		"While the dialog is closed the input stays mounted in a hidden container, so component state and reactions behave as if it were always rendered.",
+		"The trigger renders in an error state, and the label turns red, while the field has a validation error — the message appears under the trigger and inside the dialog.",
+		"The dialog heading defaults to the field label; override with `dialog.title` / `dialog.description`."
+	],
+	keywords: [
+		"formily",
+		"decorator",
+		"dialog",
+		"modal",
+		"field",
+		"form-item"
+	],
+	related: [
+		"FormItem",
+		"PopoverItem",
+		"ObjectContainer"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/components/form/Form.d.cts

@@ -2,7 +2,7 @@ import { FormContextStates } from "../context/form-context.cjs";
 import "../context/index.cjs";
 import React from "react";
 import { Form } from "@formily/core";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/form/Form.d.ts
 interface IFormProps extends FormContextStates {
@@ -27,6 +27,6 @@ declare function Form$1({
   onAutoSubmit,
   layout,
   settings
-}: IFormProps): react_jsx_runtime0.JSX.Element;
+}: IFormProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Form$1 as Form, IFormProps };

package/dist/components/form/Form.d.ts

@@ -1,7 +1,7 @@
 import { FormContextStates } from "../context/form-context.js";
 import "../context/index.js";
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import { Form } from "@formily/core";
 
 //#region src/components/form/Form.d.ts
@@ -27,6 +27,6 @@ declare function Form$1({
   onAutoSubmit,
   layout,
   settings
-}: IFormProps): react_jsx_runtime0.JSX.Element;
+}: IFormProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Form$1 as Form, IFormProps };

package/dist/components/form-grid/FormGrid.d.cts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/form-grid/FormGrid.d.ts
 interface IFormGridProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -7,6 +7,6 @@ declare function FormGrid({
   className,
   children,
   ...rest
-}: IFormGridProps): react_jsx_runtime1.JSX.Element;
+}: IFormGridProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { FormGrid, IFormGridProps };

package/dist/components/form-grid/FormGrid.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/form-grid/FormGrid.d.ts
 interface IFormGridProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -7,6 +7,6 @@ declare function FormGrid({
   className,
   children,
   ...rest
-}: IFormGridProps): react_jsx_runtime1.JSX.Element;
+}: IFormGridProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { FormGrid, IFormGridProps };