@pixpilot/formily-shadcn 1.16.0 → 1.17.0

package/dist/components/overlay-common/use-overlay.js

@@ -0,0 +1,107 @@
+import { resolveResponsiveGapClass } from "../../utils/resolve-responsive-space.js";
+import { useDescription } from "../../hooks/use-description.js";
+import { useFormContext } from "../../hooks/use-form-context.js";
+import { useLabel } from "../../hooks/use-label.js";
+import "../../hooks/index.js";
+import { useShakeAnimation } from "../array-common/use-shake-animation.js";
+import "../array-common/index.js";
+import { DEFAULT_TRIGGER_NOUN } from "./constants.js";
+import { isEmptyFieldValue } from "./is-empty-field-value.js";
+import { useField, useFieldSchema } from "@formily/react";
+import React from "react";
+
+//#region src/components/overlay-common/use-overlay.ts
+/**
+* Formily glob matching the field itself and every descendant, and nothing
+* else — `*(a,a.*)` matches `a`, `a.b`, and `a.b.c`, but not the sibling `ab`.
+* One pattern covers both shapes an overlay can hold: a single input (validate
+* the field) and an object's form (validate its fields), at any depth.
+*/
+function buildValidationPattern(address) {
+	return `*(${address},${address}.*)`;
+}
+/**
+* Shared state for fields that render their input(s) inside an overlay
+* (dialog or popover) opened from a trigger button.
+*
+* Fields render in the parent form (no draft copy), so edits commit as the
+* user types. This mirrors the autoSave mode of ArrayDialog/ArrayPopover:
+* validation on close is scoped to the overlay's own fields so unrelated
+* fields elsewhere in the form are not validated.
+*/
+function useOverlay(options = {}) {
+	const { label, description, trigger, open, defaultOpen, onOpenChange, validateOnClose = true } = options;
+	const effectiveLabel = useLabel(label);
+	const effectiveDescription = useDescription(description);
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+	const isControlled = open !== void 0;
+	const isOpen = isControlled ? open : uncontrolledOpen;
+	const setOpen = React.useCallback((next) => {
+		if (!isControlled) setUncontrolledOpen(next);
+		onOpenChange?.(next);
+	}, [isControlled, onOpenChange]);
+	const { layout } = useFormContext();
+	const gapClass = resolveResponsiveGapClass({ density: layout?.density });
+	const field = useField();
+	const hasError = field.errors.length > 0;
+	const validationPath = buildValidationPattern(field.address.toString());
+	const noun = useFieldSchema().title ?? DEFAULT_TRIGGER_NOUN;
+	const isEmpty = isEmptyFieldValue(field.value);
+	const resolvedTrigger = {
+		...trigger,
+		label: trigger?.label ?? (isEmpty ? `Add ${noun}` : `Edit ${noun}`)
+	};
+	const { shouldShake, triggerShake } = useShakeAnimation();
+	const revalidateOnOpenRef = React.useRef(false);
+	React.useEffect(() => {
+		if (!isOpen || !revalidateOnOpenRef.current) return;
+		revalidateOnOpenRef.current = false;
+		Promise.resolve(field.form.validate(validationPath)).catch(() => void 0);
+	}, [
+		field.form,
+		isOpen,
+		validationPath
+	]);
+	const requestClose = React.useCallback(() => {
+		if (!validateOnClose) {
+			setOpen(false);
+			return;
+		}
+		Promise.resolve(field.form.validate(validationPath)).then(() => {
+			setOpen(false);
+		}).catch(() => {
+			triggerShake();
+		});
+	}, [
+		field.form,
+		setOpen,
+		triggerShake,
+		validateOnClose,
+		validationPath
+	]);
+	return {
+		label: effectiveLabel,
+		description: effectiveDescription,
+		trigger: resolvedTrigger,
+		open: isOpen,
+		gapClass,
+		hasError,
+		shouldShake,
+		handleOpenChange: React.useCallback((next) => {
+			if (next) {
+				revalidateOnOpenRef.current = hasError;
+				setOpen(true);
+				return;
+			}
+			requestClose();
+		}, [
+			hasError,
+			requestClose,
+			setOpen
+		]),
+		requestClose
+	};
+}
+
+//#endregion
+export { useOverlay };

package/dist/components/popover-item/BasePopoverItem.cjs

@@ -0,0 +1,108 @@
+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 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/popover-item/BasePopoverItem.tsx
+/**
+* Formily decorator that edits a single field inside a popover.
+*
+* Used in place of FormItem (`x-decorator: 'PopoverItem'`), 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 popover. The field keeps its own component, so
+* validation and x-reactions behave as they do under FormItem.
+*/
+const BasePopoverItem = ({ children, label, description, trigger: triggerProp, open: openProp, defaultOpen, onOpenChange, validateOnClose, modal = false, popover, 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 = popover?.title ?? effectiveLabel;
+	const overlayDescription = popover?.description ?? desc;
+	const slots = popover?.slots;
+	const hasHeader = title != null || overlayDescription != null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseFormItem.BaseFormItem, {
+				...formItemProps,
+				label,
+				description,
+				feedbackStatus,
+				feedbackText,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+					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.PopoverContent, {
+				align: "start",
+				...slots?.content,
+				className: (0, __pixpilot_shadcn.cn)("w-(--radix-popover-trigger-width) min-w-72", 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, {}),
+					hasHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						...slots?.header,
+						className: (0, __pixpilot_shadcn.cn)("space-y-1 pb-3", slots?.header?.className),
+						children: [title != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+							...slots?.title,
+							className: (0, __pixpilot_shadcn.cn)("font-medium leading-none", slots?.title?.className),
+							children: title
+						}), overlayDescription != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							...slots?.description,
+							className: (0, __pixpilot_shadcn.cn)("text-muted-foreground text-sm", slots?.description?.className),
+							children: overlayDescription
+						})]
+					}),
+					open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						...slots?.body,
+						className: (0, __pixpilot_shadcn.cn)("grid", 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
+						})]
+					})
+				]
+			})
+		]
+	});
+};
+BasePopoverItem.displayName = "BasePopoverItem";
+
+//#endregion
+exports.BasePopoverItem = BasePopoverItem;

package/dist/components/popover-item/BasePopoverItem.d.cts

@@ -0,0 +1,57 @@
+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 { PopoverContent } from "@pixpilot/shadcn";
+
+//#region src/components/popover-item/BasePopoverItem.d.ts
+interface PopoverItemProps extends Omit<FormItemProps, 'popover'> {
+  /**
+   * 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 popover. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * When false, the popover closes without validating the field first.
+   * Default is true.
+   */
+  validateOnClose?: boolean;
+  /**
+   * If true, interaction outside the popover is blocked while it is open.
+   * Default is false.
+   */
+  modal?: boolean;
+  /**
+   * The popover itself — its `title`, `description`, and `slots`, e.g.
+   * `{ title: 'Notes', slots: { content: { className: 'w-96' } } }`. Title and
+   * description default to the field's label and description.
+   */
+  popover?: PopoverItemPopoverProps;
+}
+interface PopoverItemPopoverSlots extends OverlayBaseSlots {
+  content?: React.ComponentProps<typeof PopoverContent>;
+  title?: React.ComponentProps<'h4'>;
+  description?: React.ComponentProps<'p'>;
+}
+type PopoverItemPopoverProps = OverlayProps<PopoverItemPopoverSlots>;
+/**
+ * Formily decorator that edits a single field inside a popover.
+ *
+ * Used in place of FormItem (`x-decorator: 'PopoverItem'`), 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 popover. The field keeps its own component, so
+ * validation and x-reactions behave as they do under FormItem.
+ */
+declare const BasePopoverItem: React.FC<React.PropsWithChildren<PopoverItemProps>>;
+//#endregion
+export { BasePopoverItem, PopoverItemProps };

package/dist/components/popover-item/BasePopoverItem.d.ts

@@ -0,0 +1,57 @@
+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 { PopoverContent } from "@pixpilot/shadcn";
+
+//#region src/components/popover-item/BasePopoverItem.d.ts
+interface PopoverItemProps extends Omit<FormItemProps, 'popover'> {
+  /**
+   * 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 popover. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * When false, the popover closes without validating the field first.
+   * Default is true.
+   */
+  validateOnClose?: boolean;
+  /**
+   * If true, interaction outside the popover is blocked while it is open.
+   * Default is false.
+   */
+  modal?: boolean;
+  /**
+   * The popover itself — its `title`, `description`, and `slots`, e.g.
+   * `{ title: 'Notes', slots: { content: { className: 'w-96' } } }`. Title and
+   * description default to the field's label and description.
+   */
+  popover?: PopoverItemPopoverProps;
+}
+interface PopoverItemPopoverSlots extends OverlayBaseSlots {
+  content?: React.ComponentProps<typeof PopoverContent>;
+  title?: React.ComponentProps<'h4'>;
+  description?: React.ComponentProps<'p'>;
+}
+type PopoverItemPopoverProps = OverlayProps<PopoverItemPopoverSlots>;
+/**
+ * Formily decorator that edits a single field inside a popover.
+ *
+ * Used in place of FormItem (`x-decorator: 'PopoverItem'`), 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 popover. The field keeps its own component, so
+ * validation and x-reactions behave as they do under FormItem.
+ */
+declare const BasePopoverItem: React.FC<React.PropsWithChildren<PopoverItemProps>>;
+//#endregion
+export { BasePopoverItem, PopoverItemProps };

package/dist/components/popover-item/BasePopoverItem.js

@@ -0,0 +1,104 @@
+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 { jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverContent, PopoverTrigger, cn } from "@pixpilot/shadcn";
+
+//#region src/components/popover-item/BasePopoverItem.tsx
+/**
+* Formily decorator that edits a single field inside a popover.
+*
+* Used in place of FormItem (`x-decorator: 'PopoverItem'`), 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 popover. The field keeps its own component, so
+* validation and x-reactions behave as they do under FormItem.
+*/
+const BasePopoverItem = ({ children, label, description, trigger: triggerProp, open: openProp, defaultOpen, onOpenChange, validateOnClose, modal = false, popover, 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 = popover?.title ?? effectiveLabel;
+	const overlayDescription = popover?.description ?? desc;
+	const slots = popover?.slots;
+	const hasHeader = title != null || overlayDescription != null;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal,
+		children: [
+			/* @__PURE__ */ jsx(BaseFormItem, {
+				...formItemProps,
+				label,
+				description,
+				feedbackStatus,
+				feedbackText,
+				children: /* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(OverlayTrigger, {
+						invalid: hasError,
+						...trigger
+					})
+				})
+			}),
+			!open && /* @__PURE__ */ jsx(OverlayFields, { children }),
+			/* @__PURE__ */ jsxs(PopoverContent, {
+				align: "start",
+				...slots?.content,
+				className: cn("w-(--radix-popover-trigger-width) min-w-72", 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, {}),
+					hasHeader && /* @__PURE__ */ jsxs("div", {
+						...slots?.header,
+						className: cn("space-y-1 pb-3", slots?.header?.className),
+						children: [title != null && /* @__PURE__ */ jsx("h4", {
+							...slots?.title,
+							className: cn("font-medium leading-none", slots?.title?.className),
+							children: title
+						}), overlayDescription != null && /* @__PURE__ */ jsx("p", {
+							...slots?.description,
+							className: cn("text-muted-foreground text-sm", slots?.description?.className),
+							children: overlayDescription
+						})]
+					}),
+					open && /* @__PURE__ */ jsxs("div", {
+						...slots?.body,
+						className: cn("grid", gapClass, slots?.body?.className),
+						children: [children, feedbackText != null && feedbackText !== "" && /* @__PURE__ */ jsx("p", {
+							className: cn("text-[0.8rem]", feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600"),
+							children: feedbackText
+						})]
+					})
+				]
+			})
+		]
+	});
+};
+BasePopoverItem.displayName = "BasePopoverItem";
+
+//#endregion
+export { BasePopoverItem };

package/dist/components/popover-item/ConnectedPopoverItem.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_BasePopoverItem = require('./BasePopoverItem.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+
+//#region src/components/popover-item/ConnectedPopoverItem.tsx
+/**
+* PopoverItem decorator connected to Formily field state.
+* Maps field label, description, and validation state onto the decorator the
+* same way FormItem does.
+*/
+const PopoverItem = (0, __formily_react.connect)(require_BasePopoverItem.BasePopoverItem, (0, __formily_react.mapProps)(require_map_form_item_props.mapFormItemProps));
+
+//#endregion
+exports.PopoverItem = PopoverItem;

package/dist/components/popover-item/ConnectedPopoverItem.d.cts

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

package/dist/components/popover-item/ConnectedPopoverItem.d.ts

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

package/dist/components/popover-item/ConnectedPopoverItem.js

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

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

@@ -0,0 +1,2 @@
+const require_BasePopoverItem = require('./BasePopoverItem.cjs');
+const require_ConnectedPopoverItem = require('./ConnectedPopoverItem.cjs');

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

@@ -0,0 +1,2 @@
+import { BasePopoverItem, PopoverItemProps } from "./BasePopoverItem.cjs";
+import { PopoverItem } from "./ConnectedPopoverItem.cjs";

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

@@ -0,0 +1,2 @@
+import { BasePopoverItem, PopoverItemProps } from "./BasePopoverItem.js";
+import { PopoverItem } from "./ConnectedPopoverItem.js";

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

@@ -0,0 +1,2 @@
+import { BasePopoverItem } from "./BasePopoverItem.js";
+import { PopoverItem } from "./ConnectedPopoverItem.js";

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

@@ -0,0 +1,127 @@
+import { defineProps } from "../../mcp/src/utils.js";
+
+//#region src/components/popover-item/mcp.ts
+const meta = {
+	name: "PopoverItem",
+	category: "Formily",
+	description: "A Formily decorator used in place of FormItem (`x-decorator: 'PopoverItem'`). 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 popover anchored to the button.",
+	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 popover.",
+			type: "boolean"
+		},
+		defaultOpen: {
+			description: "Initial open state when uncontrolled.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		onOpenChange: "Called when the popover open state changes.",
+		validateOnClose: {
+			description: "When true (default), closing validates the field and keeps the popover open (with a shake) while it is invalid. Set false to always close.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		modal: {
+			description: "When true, interaction outside the popover is blocked while it is open.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		popover: "The popover itself: `{ title, description, slots }`, e.g. `{ title: 'Notes', slots: { content: { className: 'w-96' } } }`. Title and description default to the field's label and description; `slots` takes props for `content`, `header`, `title`, `description`, and `body`.",
+		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 popover",
+			code: `{
+  type: 'object',
+  properties: {
+    age: {
+      type: 'number',
+      title: 'Age',
+      description: 'Enter your age in years.',
+      default: 25,
+      'x-decorator': 'PopoverItem',
+      'x-component': 'NumberInput',
+    },
+  },
+}`
+		},
+		{
+			title: "Declarative schema field",
+			code: `<SchemaField.String name="bio" title="Bio" x-decorator="PopoverItem" x-component="Textarea" />`
+		},
+		{
+			title: "Trigger label driven by an x-reaction",
+			code: `{
+  type: 'string',
+  title: 'Bio',
+  'x-decorator': 'PopoverItem',
+  '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 popover",
+			code: `{
+  type: 'object',
+  title: 'Profile',
+  'x-decorator': 'PopoverItem',
+  // type: 'object' resolves to ObjectContainer. Turn off its own label and
+  // description — the popover header already shows them — and use the flat
+  // variant so the card chrome does not double up inside the popover.
+  '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 popover, 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.",
+		"Closing (Escape or an outside click) validates the field first. An invalid field keeps the popover open and shakes it.",
+		"While the popover 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 popover.",
+		"The popover content matches the trigger width by default; override with `popover.slots.content.className`."
+	],
+	keywords: [
+		"formily",
+		"decorator",
+		"popover",
+		"field",
+		"form-item"
+	],
+	related: [
+		"FormItem",
+		"DialogItem",
+		"ObjectContainer"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/components/radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, FC } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { RadioGroup } from "@pixpilot/shadcn";
 
 //#region src/components/radio/Radio.d.ts
@@ -15,7 +15,7 @@ type RadioProps = {
 /**
  * Radio component with options rendering
  */
-declare function Radio(props: RadioProps): react_jsx_runtime2.JSX.Element;
+declare function Radio(props: RadioProps): react_jsx_runtime0.JSX.Element;
 declare namespace Radio {
   var displayName: string;
 }