@pixpilot/formily-shadcn 1.17.1 → 1.18.1

package/dist/components/array-drawer/ArrayDrawer.cjs

@@ -0,0 +1,70 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_use_form_context = require('../../hooks/use-form-context.cjs');
+const require_array_base = require('../array-base/array-base.cjs');
+const require_component_context = require('../array-base/component-context.cjs');
+const require_ArrayItemsList = require('../array-common/ArrayItemsList.cjs');
+const require_use_array_editor = require('../array-common/use-array-editor.cjs');
+const require_use_array_item_schema = require('../array-common/use-array-item-schema.cjs');
+const require_EditDrawer = require('./EditDrawer.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/array-drawer/ArrayDrawer.tsx
+/**
+* ArrayDrawer component displays array items as a simple list with controls,
+* editing each item inside a drawer opened from its row.
+* Each item shows:
+* - Left: Move up/down buttons
+* - Center: Item label (Item 1, Item 2, etc.)
+* - Right: Edit and Remove buttons
+*/
+const ArrayDrawerBase = (0, __formily_react.observer)((props) => {
+	const schema = (0, __formily_react.useFieldSchema)();
+	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className, transformActions, drawerProps } = props;
+	const { settings = {} } = require_use_form_context.useFormContext();
+	const { autoSave: globalAutoSave } = settings.dialog || {};
+	const autoSave = props.autoSave ?? globalAutoSave ?? false;
+	const { activeItemManager, handleAdd, handleEdit, isNewItem, handleSaveClick, handleLiveChange, handleCancelClick } = require_use_array_editor.useArrayEditor({
+		onAdd,
+		onEdit,
+		autoSave
+	});
+	const { AddButton } = require_component_context.useArrayComponents();
+	const items = require_use_array_item_schema.useArrayItemSchema();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_array_base.ArrayBase, {
+		...props,
+		autoSave,
+		transformActions,
+		onAdd: handleAdd,
+		onRemove,
+		onMoveUp,
+		onMoveDown,
+		onEdit: handleEdit,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrayItemsList.ArrayItemsList, {
+			className,
+			isNewItem,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddButton, { schema })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EditDrawer.EditDrawer, {
+			...drawerProps,
+			onSave: handleSaveClick,
+			onAutoSave: handleLiveChange,
+			onCancel: handleCancelClick,
+			activeItemManager,
+			schema: items,
+			autoSave
+		})]
+	});
+});
+const ArrayDrawerComponent = (rest) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_component_context.ArrayComponentProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrayDrawerBase, { ...rest }) });
+};
+const ArrayDrawer = ArrayDrawerComponent;
+ArrayDrawer.displayName = "ArrayDrawer";
+require_array_base.ArrayBase.mixin(ArrayDrawer);
+
+//#endregion
+exports.ArrayDrawer = ArrayDrawer;

package/dist/components/array-drawer/ArrayDrawer.d.cts

@@ -0,0 +1,16 @@
+import { ArrayComponentProps } from "../array-base/types.cjs";
+import "../array-base/index.cjs";
+import React from "react";
+
+//#region src/components/array-drawer/ArrayDrawer.d.ts
+type Props = ArrayComponentProps & {
+  drawerProps?: React.HTMLAttributes<HTMLDivElement> & {
+    /** Edge the drawer anchors to (`top | bottom | left | right`, default `bottom`). */
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    /** Detach the drawer from the viewport edges (gap + full rounding). Default `false`. */
+    floating?: boolean;
+  };
+};
+declare const ArrayDrawer: React.FC<Props>;
+//#endregion
+export { ArrayDrawer };

package/dist/components/array-drawer/ArrayDrawer.d.ts

@@ -0,0 +1,16 @@
+import { ArrayComponentProps } from "../array-base/types.js";
+import "../array-base/index.js";
+import React from "react";
+
+//#region src/components/array-drawer/ArrayDrawer.d.ts
+type Props = ArrayComponentProps & {
+  drawerProps?: React.HTMLAttributes<HTMLDivElement> & {
+    /** Edge the drawer anchors to (`top | bottom | left | right`, default `bottom`). */
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    /** Detach the drawer from the viewport edges (gap + full rounding). Default `false`. */
+    floating?: boolean;
+  };
+};
+declare const ArrayDrawer: React.FC<Props>;
+//#endregion
+export { ArrayDrawer };

package/dist/components/array-drawer/ArrayDrawer.js

@@ -0,0 +1,66 @@
+import { useFormContext } from "../../hooks/use-form-context.js";
+import { ArrayBase } from "../array-base/array-base.js";
+import { ArrayComponentProvider, useArrayComponents } from "../array-base/component-context.js";
+import { ArrayItemsList } from "../array-common/ArrayItemsList.js";
+import { useArrayEditor } from "../array-common/use-array-editor.js";
+import { useArrayItemSchema } from "../array-common/use-array-item-schema.js";
+import { EditDrawer } from "./EditDrawer.js";
+import { observer, useFieldSchema } from "@formily/react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/array-drawer/ArrayDrawer.tsx
+/**
+* ArrayDrawer component displays array items as a simple list with controls,
+* editing each item inside a drawer opened from its row.
+* Each item shows:
+* - Left: Move up/down buttons
+* - Center: Item label (Item 1, Item 2, etc.)
+* - Right: Edit and Remove buttons
+*/
+const ArrayDrawerBase = observer((props) => {
+	const schema = useFieldSchema();
+	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className, transformActions, drawerProps } = props;
+	const { settings = {} } = useFormContext();
+	const { autoSave: globalAutoSave } = settings.dialog || {};
+	const autoSave = props.autoSave ?? globalAutoSave ?? false;
+	const { activeItemManager, handleAdd, handleEdit, isNewItem, handleSaveClick, handleLiveChange, handleCancelClick } = useArrayEditor({
+		onAdd,
+		onEdit,
+		autoSave
+	});
+	const { AddButton } = useArrayComponents();
+	const items = useArrayItemSchema();
+	return /* @__PURE__ */ jsxs(ArrayBase, {
+		...props,
+		autoSave,
+		transformActions,
+		onAdd: handleAdd,
+		onRemove,
+		onMoveUp,
+		onMoveDown,
+		onEdit: handleEdit,
+		children: [/* @__PURE__ */ jsx(ArrayItemsList, {
+			className,
+			isNewItem,
+			children: /* @__PURE__ */ jsx(AddButton, { schema })
+		}), /* @__PURE__ */ jsx(EditDrawer, {
+			...drawerProps,
+			onSave: handleSaveClick,
+			onAutoSave: handleLiveChange,
+			onCancel: handleCancelClick,
+			activeItemManager,
+			schema: items,
+			autoSave
+		})]
+	});
+});
+const ArrayDrawerComponent = (rest) => {
+	return /* @__PURE__ */ jsx(ArrayComponentProvider, { children: /* @__PURE__ */ jsx(ArrayDrawerBase, { ...rest }) });
+};
+const ArrayDrawer = ArrayDrawerComponent;
+ArrayDrawer.displayName = "ArrayDrawer";
+ArrayBase.mixin(ArrayDrawer);
+
+//#endregion
+export { ArrayDrawer };

package/dist/components/array-drawer/EditDrawer.cjs

@@ -0,0 +1,129 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_use_form_context = require('../../hooks/use-form-context.cjs');
+const require_ArrayItemDraftFields = require('../array-common/ArrayItemDraftFields.cjs');
+const require_ShakeStyles = require('../array-common/ShakeStyles.cjs');
+const require_use_array_item_edit_state = require('../array-common/use-array-item-edit-state.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __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);
+
+//#region src/components/array-drawer/EditDrawer.tsx
+/**
+* Drawer for editing array items
+* Renders form fields based on the array item schema
+* RecursionField inherits component registry from parent SchemaField context (preserved through Radix Portal)
+*/
+const EditDrawer = (0, __formily_react.observer)(({ schema, onSave, onAutoSave: _onAutoSave, onCancel, activeItemManager, className, autoSave, direction,...rest }) => {
+	const { arrayField, activeIndex: itemIndex, isNewItem, open, normalizedAutoSave, draftForm, basePath, validationPath, isolatedForm, isDirty, title, description, shouldShake, triggerShake, handleSave, handleCancel } = require_use_array_item_edit_state.useArrayItemEditState({
+		schema,
+		activeItemManager,
+		onSave,
+		onCancel,
+		autoSave
+	});
+	/**
+	* Validate the current item's fields before allowing the drawer to close.
+	* In non-autoSave mode a dirty (modified but unsaved) form shakes instead.
+	* In autoSave mode the parent form fields are validated directly.
+	*/
+	const validateAndClose = react.default.useCallback(() => {
+		if (isDirty) {
+			triggerShake();
+			return;
+		}
+		Promise.resolve(draftForm.validate(validationPath)).then(() => {
+			handleCancel();
+		}).catch(() => {
+			triggerShake();
+		});
+	}, [
+		draftForm,
+		handleCancel,
+		isDirty,
+		triggerShake,
+		validationPath
+	]);
+	/**
+	* In autoSave mode, newly-added items are inserted into the parent array
+	* immediately. Discard removes the item so the user can abandon it.
+	*/
+	const handleDiscard = react.default.useCallback(() => {
+		if (itemIndex !== void 0 && normalizedAutoSave && isNewItem) arrayField.remove?.(itemIndex).catch(console.error);
+		handleCancel();
+	}, [
+		arrayField,
+		handleCancel,
+		isNewItem,
+		itemIndex,
+		normalizedAutoSave
+	]);
+	const { settings = {} } = require_use_form_context.useFormContext();
+	const { autoSave: _globalAutoSave,...drawerSettings } = settings.dialog || {};
+	const drawerContentProps = {
+		...drawerSettings,
+		...rest
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Drawer, {
+		open,
+		direction,
+		onOpenChange: (isOpen) => {
+			if (!isOpen) validateAndClose();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DrawerContent, {
+			...drawerContentProps,
+			className: (0, __pixpilot_shadcn_ui.cn)("sm:mx-auto sm:max-w-[525px]", shouldShake && "pp-shake", drawerContentProps.className, className),
+			onInteractOutside: (event) => {
+				drawerContentProps.onInteractOutside?.(event);
+				if (event.defaultPrevented) return;
+				event.preventDefault();
+				validateAndClose();
+			},
+			onEscapeKeyDown: (event) => {
+				drawerContentProps.onEscapeKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				event.preventDefault();
+				validateAndClose();
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ShakeStyles.ShakeStyles, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DrawerHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.DrawerTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.DrawerDescription, { children: description })] }),
+				itemIndex != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArrayItemDraftFields.ArrayItemDraftFields, {
+					as: __pixpilot_shadcn_ui.DrawerBody,
+					schema,
+					form: draftForm,
+					basePath,
+					isolated: isolatedForm,
+					className: (0, __pixpilot_shadcn_ui.cn)("grid gap-4 py-4")
+				}),
+				!normalizedAutoSave && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DrawerFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Button, {
+					type: "button",
+					variant: "outline",
+					onClick: handleCancel,
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Button, {
+					type: "button",
+					onClick: handleSave,
+					children: "Save Changes"
+				})] }),
+				normalizedAutoSave && isNewItem && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DrawerFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Button, {
+					type: "button",
+					variant: "outline",
+					onClick: handleDiscard,
+					children: "Discard"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Button, {
+					type: "button",
+					onClick: validateAndClose,
+					children: "Done"
+				})] })
+			]
+		})
+	});
+});
+
+//#endregion
+exports.EditDrawer = EditDrawer;

package/dist/components/array-drawer/EditDrawer.js

@@ -0,0 +1,124 @@
+import { useFormContext } from "../../hooks/use-form-context.js";
+import { ArrayItemDraftFields } from "../array-common/ArrayItemDraftFields.js";
+import { ShakeStyles } from "../array-common/ShakeStyles.js";
+import { useArrayItemEditState } from "../array-common/use-array-item-edit-state.js";
+import { observer } from "@formily/react";
+import React from "react";
+import { Button, Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, cn } from "@pixpilot/shadcn-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/array-drawer/EditDrawer.tsx
+/**
+* Drawer for editing array items
+* Renders form fields based on the array item schema
+* RecursionField inherits component registry from parent SchemaField context (preserved through Radix Portal)
+*/
+const EditDrawer = observer(({ schema, onSave, onAutoSave: _onAutoSave, onCancel, activeItemManager, className, autoSave, direction,...rest }) => {
+	const { arrayField, activeIndex: itemIndex, isNewItem, open, normalizedAutoSave, draftForm, basePath, validationPath, isolatedForm, isDirty, title, description, shouldShake, triggerShake, handleSave, handleCancel } = useArrayItemEditState({
+		schema,
+		activeItemManager,
+		onSave,
+		onCancel,
+		autoSave
+	});
+	/**
+	* Validate the current item's fields before allowing the drawer to close.
+	* In non-autoSave mode a dirty (modified but unsaved) form shakes instead.
+	* In autoSave mode the parent form fields are validated directly.
+	*/
+	const validateAndClose = React.useCallback(() => {
+		if (isDirty) {
+			triggerShake();
+			return;
+		}
+		Promise.resolve(draftForm.validate(validationPath)).then(() => {
+			handleCancel();
+		}).catch(() => {
+			triggerShake();
+		});
+	}, [
+		draftForm,
+		handleCancel,
+		isDirty,
+		triggerShake,
+		validationPath
+	]);
+	/**
+	* In autoSave mode, newly-added items are inserted into the parent array
+	* immediately. Discard removes the item so the user can abandon it.
+	*/
+	const handleDiscard = React.useCallback(() => {
+		if (itemIndex !== void 0 && normalizedAutoSave && isNewItem) arrayField.remove?.(itemIndex).catch(console.error);
+		handleCancel();
+	}, [
+		arrayField,
+		handleCancel,
+		isNewItem,
+		itemIndex,
+		normalizedAutoSave
+	]);
+	const { settings = {} } = useFormContext();
+	const { autoSave: _globalAutoSave,...drawerSettings } = settings.dialog || {};
+	const drawerContentProps = {
+		...drawerSettings,
+		...rest
+	};
+	return /* @__PURE__ */ jsx(Drawer, {
+		open,
+		direction,
+		onOpenChange: (isOpen) => {
+			if (!isOpen) validateAndClose();
+		},
+		children: /* @__PURE__ */ jsxs(DrawerContent, {
+			...drawerContentProps,
+			className: cn("sm:mx-auto sm:max-w-[525px]", shouldShake && "pp-shake", drawerContentProps.className, className),
+			onInteractOutside: (event) => {
+				drawerContentProps.onInteractOutside?.(event);
+				if (event.defaultPrevented) return;
+				event.preventDefault();
+				validateAndClose();
+			},
+			onEscapeKeyDown: (event) => {
+				drawerContentProps.onEscapeKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				event.preventDefault();
+				validateAndClose();
+			},
+			children: [
+				/* @__PURE__ */ jsx(ShakeStyles, {}),
+				/* @__PURE__ */ jsxs(DrawerHeader, { children: [/* @__PURE__ */ jsx(DrawerTitle, { children: title }), /* @__PURE__ */ jsx(DrawerDescription, { children: description })] }),
+				itemIndex != null && /* @__PURE__ */ jsx(ArrayItemDraftFields, {
+					as: DrawerBody,
+					schema,
+					form: draftForm,
+					basePath,
+					isolated: isolatedForm,
+					className: cn("grid gap-4 py-4")
+				}),
+				!normalizedAutoSave && /* @__PURE__ */ jsxs(DrawerFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: handleCancel,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					onClick: handleSave,
+					children: "Save Changes"
+				})] }),
+				normalizedAutoSave && isNewItem && /* @__PURE__ */ jsxs(DrawerFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: handleDiscard,
+					children: "Discard"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					onClick: validateAndClose,
+					children: "Done"
+				})] })
+			]
+		})
+	});
+});
+
+//#endregion
+export { EditDrawer };

package/dist/components/array-drawer/index.d.cts

@@ -0,0 +1 @@
+import { ArrayDrawer } from "./ArrayDrawer.cjs";

package/dist/components/array-drawer/index.d.ts

@@ -0,0 +1 @@
+import { ArrayDrawer } from "./ArrayDrawer.js";

package/dist/components/array-drawer/mcp.js

@@ -0,0 +1,59 @@
+import { defineProps } from "../../mcp/src/utils.js";
+import { commonArrayPropDocs, perItemStylingNote } from "../array-common/array-mcp-props.js";
+
+//#region src/components/array-drawer/mcp.ts
+const meta = {
+	name: "ArrayDrawer",
+	category: "Formily Arrays",
+	description: "A Formily array field that renders items as a compact list; each item is edited inside a drawer opened from its row.",
+	htmlElement: "div",
+	props: defineProps({
+		...commonArrayPropDocs,
+		autoSave: {
+			description: "When true, edits commit to the array live and the Save/Cancel buttons are hidden. When false (default), edits only commit on Save. Falls back to the form-level `settings.dialog.autoSave`.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		drawerProps: "Props forwarded to the edit drawer — e.g. `className` to size/scroll the drawer, `direction` (`top | bottom | left | right`, default `bottom`) to change the anchored edge, `floating` (boolean) to detach it from the viewport edges with a gap and full rounding, and vaul/Radix content handlers like `onInteractOutside`, `onEscapeKeyDown`."
+	}),
+	examples: [{
+		title: "Edit items in a drawer",
+		code: `{
+  type: 'array',
+  'x-component': 'ArrayDrawer',
+  items: {
+    type: 'object',
+    properties: {
+      name: { type: 'string', 'x-decorator': 'FormItem', 'x-component': 'Input' },
+    },
+  },
+  properties: {
+    addition: { type: 'void', title: 'Add', 'x-component': 'ArrayDrawer.Addition' },
+  },
+}`
+	}, {
+		title: "Side drawer",
+		code: `'x-component-props': {
+  drawerProps: { direction: 'right' },
+}`
+	}],
+	notes: [perItemStylingNote, "The list container is styled via the array node `x-component-props.className`; the drawer is styled via `x-component-props.drawerProps.className`."],
+	keywords: [
+		"formily",
+		"array",
+		"drawer",
+		"sheet",
+		"list",
+		"repeater"
+	],
+	related: [
+		"ArrayDialog",
+		"ArrayPopover",
+		"ArrayCards",
+		"ArrayCollapse",
+		"ArrayInline"
+	]
+};
+
+//#endregion
+export { meta };

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

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

package/dist/components/drawer-item/BaseDrawerItem.cjs

@@ -0,0 +1,112 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ShakeStyles = require('../array-common/ShakeStyles.cjs');
+const require_BaseFormItem = require('../form-item/BaseFormItem.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');
+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/drawer-item/BaseDrawerItem.tsx
+/**
+* Formily decorator that edits a single field inside a drawer.
+*
+* Used in place of FormItem (`x-decorator: 'DrawerItem'`), 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 drawer. The field keeps its own component, so validation
+* and x-reactions behave as they do under FormItem.
+*/
+const BaseDrawerItem = ({ children, label, description, trigger: triggerProp, open: openProp, defaultOpen, onOpenChange, validateOnClose, doneLabel = "Done", drawer, 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 = drawer?.title ?? effectiveLabel ?? "Details";
+	const overlayDescription = drawer?.description ?? desc;
+	const slots = drawer?.slots;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.Drawer, {
+		open,
+		onOpenChange: handleOpenChange,
+		direction: drawer?.direction,
+		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.DrawerTrigger, {
+					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.DrawerContent, {
+				...overlayDescription == null ? { "aria-describedby": void 0 } : {},
+				...slots?.content,
+				className: (0, __pixpilot_shadcn.cn)("sm:mx-auto sm:max-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.DrawerHeader, {
+						...slots?.header,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.DrawerTitle, {
+							...slots?.title,
+							children: title
+						}), overlayDescription != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.DrawerDescription, {
+							...slots?.description,
+							children: overlayDescription
+						})]
+					}),
+					open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.DrawerBody, {
+						...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.DrawerFooter, {
+						...slots?.footer,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.Button, {
+							type: "button",
+							"data-slot": "footer-button",
+							onClick: requestClose,
+							children: doneLabel
+						})
+					})
+				]
+			})
+		]
+	});
+};
+BaseDrawerItem.displayName = "BaseDrawerItem";
+
+//#endregion
+exports.BaseDrawerItem = BaseDrawerItem;