@pixpilot/formily-shadcn 0.8.0 → 0.8.2

package/dist/components/array-collapse/array-collapse.cjs

@@ -1 +1,96 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`../../utils/create-panel-state-manager.cjs`),n=require(`../../utils/get-array-item-info.cjs`);require(`../../utils/index.cjs`);const r=require(`../array-base/array-base.cjs`),i=require(`../array-base/component-context.cjs`);require(`../array-base/index.cjs`);const a=require(`../array-base/constants/index.cjs`),o=require(`./item.cjs`);let s=require(`@formily/react`);s=e.__toESM(s);let c=require(`react`);c=e.__toESM(c);let l=require(`react/jsx-runtime`);l=e.__toESM(l);const u=(0,s.observer)(e=>{let{onAdd:a,onRemove:u,onMoveDown:d,onMoveUp:f,onEdit:p,className:m,children:h,defaultActiveKey:g,mode:_=`multiple`,...v}=e,y=(0,s.useField)(),b=(0,s.useFieldSchema)(),x=(0,c.useMemo)(()=>t.createPanelStateManager(g,_===`accordion`),[g,_]),S=Array.isArray(y.value)?y.value:[],C=c.default.useRef(null),w=c.default.useCallback(e=>{a?.(e),C.current=e},[a]),T=c.default.useCallback(e=>{let t=C.current===e;return t&&(C.current=null),t},[]),{ArrayItemsContainer:E,AddButton:D}=i.useArrayComponents(),O=()=>S.map((e,t)=>{let r=t,{itemKey:i,record:s}=n.getArrayItemInfo(y,t);return(0,l.jsx)(o.ArrayCollapseItem,{record:s,index:t,itemId:r,isOpen:x.activeKeys?.includes(r)??!1,formCollapse:x,onAdd:a,isNewItem:T},i)}),k=c.default.useCallback(e=>{x.swapActiveKeys(e,e-1),f?.(e)},[x,f]),A=c.default.useCallback(e=>{x.swapActiveKeys(e,e+1),d?.(e)},[x,d]),j=y.address.toString();return(0,l.jsx)(r.ArrayBase,{onAdd:w,onRemove:u,onMoveUp:k,onMoveDown:A,onEdit:p,children:(0,l.jsxs)(E,{...v,basePath:j,schema:b,hasItems:S.length>0,children:[O(),(0,l.jsx)(D,{schema:b,basePath:j})]})})}),d=({operations:e=a.DEFAULT_OPERATIONS,...t})=>(0,l.jsx)(i.ArrayComponentProvider,{allowedOperationsComponentNames:e,children:(0,l.jsx)(u,{...t})}),f=d;f.displayName=`ArrayCollapse`,r.ArrayBase.mixin(f),exports.ArrayCollapse=f;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_create_panel_state_manager = require('../../utils/create-panel-state-manager.cjs');
+const require_get_array_item_info = require('../../utils/get-array-item-info.cjs');
+require('../../utils/index.cjs');
+const require_array_base = require('../array-base/array-base.cjs');
+const require_component_context = require('../array-base/component-context.cjs');
+require('../array-base/index.cjs');
+const require_index$2 = require('../array-base/constants/index.cjs');
+const require_item = require('./item.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-collapse/array-collapse.tsx
+/**
+* ArrayCollapse component - displays array items in an collapse with inline editing
+* Each item shows:
+* - Collapse header with item label and controls (move up/down, remove)
+* - Collapse content with editable form fields
+*/
+const ArrayItemsCollapseBase = (0, __formily_react.observer)((props) => {
+	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className, children, defaultActiveKey, mode = "multiple",...otherProps } = props;
+	const field = (0, __formily_react.useField)();
+	const schema = (0, __formily_react.useFieldSchema)();
+	const formCollapse = (0, react.useMemo)(() => {
+		return require_create_panel_state_manager.createPanelStateManager(defaultActiveKey, mode === "accordion");
+	}, [defaultActiveKey, mode]);
+	const dataSource = Array.isArray(field.value) ? field.value : [];
+	const newItemIndex = react.default.useRef(null);
+	const handleAddNew = react.default.useCallback((index) => {
+		onAdd?.(index);
+		newItemIndex.current = index;
+	}, [onAdd]);
+	const isNewItem = react.default.useCallback((index) => {
+		const isNew = newItemIndex.current === index;
+		if (isNew) newItemIndex.current = null;
+		return isNew;
+	}, []);
+	const { ArrayItemsContainer, AddButton } = require_component_context.useArrayComponents();
+	const renderItems = () => {
+		return dataSource.map((_item, index) => {
+			const itemId = index;
+			const { itemKey, record } = require_get_array_item_info.getArrayItemInfo(field, index);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_item.ArrayCollapseItem, {
+				record,
+				index,
+				itemId,
+				isOpen: formCollapse.activeKeys?.includes(itemId) ?? false,
+				formCollapse,
+				onAdd,
+				isNewItem
+			}, itemKey);
+		});
+	};
+	const handleMoveUp = react.default.useCallback((index) => {
+		formCollapse.swapActiveKeys(index, index - 1);
+		onMoveUp?.(index);
+	}, [formCollapse, onMoveUp]);
+	const handleMoveDown = react.default.useCallback((index) => {
+		formCollapse.swapActiveKeys(index, index + 1);
+		onMoveDown?.(index);
+	}, [formCollapse, onMoveDown]);
+	const fieldAddress = field.address.toString();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase, {
+		onAdd: handleAddNew,
+		onRemove,
+		onMoveUp: handleMoveUp,
+		onMoveDown: handleMoveDown,
+		onEdit,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArrayItemsContainer, {
+			...otherProps,
+			basePath: fieldAddress,
+			schema,
+			hasItems: dataSource.length > 0,
+			children: [renderItems(), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddButton, {
+				schema,
+				basePath: fieldAddress
+			})]
+		})
+	});
+});
+const ArrayItemsCollapseComponent = ({ operations = require_index$2.DEFAULT_OPERATIONS,...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_component_context.ArrayComponentProvider, {
+		allowedOperationsComponentNames: operations,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrayItemsCollapseBase, { ...rest })
+	});
+};
+const ArrayCollapse = ArrayItemsCollapseComponent;
+ArrayCollapse.displayName = "ArrayCollapse";
+require_array_base.ArrayBase.mixin(ArrayCollapse);
+
+//#endregion
+exports.ArrayCollapse = ArrayCollapse;

package/dist/components/array-collapse/array-collapse.js

@@ -1 +1,92 @@
-import{createPanelStateManager as e}from"../../utils/create-panel-state-manager.js";import{getArrayItemInfo as t}from"../../utils/get-array-item-info.js";import"../../utils/index.js";import{ArrayBase as n}from"../array-base/array-base.js";import{ArrayComponentProvider as r,useArrayComponents as i}from"../array-base/component-context.js";import"../array-base/index.js";import{DEFAULT_OPERATIONS as a}from"../array-base/constants/index.js";import{ArrayCollapseItem as o}from"./item.js";import{observer as s,useField as c,useFieldSchema as l}from"@formily/react";import u,{useMemo as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=s(r=>{let{onAdd:a,onRemove:s,onMoveDown:m,onMoveUp:h,onEdit:g,className:_,children:v,defaultActiveKey:y,mode:b=`multiple`,...x}=r,S=c(),C=l(),w=d(()=>e(y,b===`accordion`),[y,b]),T=Array.isArray(S.value)?S.value:[],E=u.useRef(null),D=u.useCallback(e=>{a?.(e),E.current=e},[a]),O=u.useCallback(e=>{let t=E.current===e;return t&&(E.current=null),t},[]),{ArrayItemsContainer:k,AddButton:A}=i(),j=()=>T.map((e,n)=>{let r=n,{itemKey:i,record:s}=t(S,n);return f(o,{record:s,index:n,itemId:r,isOpen:w.activeKeys?.includes(r)??!1,formCollapse:w,onAdd:a,isNewItem:O},i)}),M=u.useCallback(e=>{w.swapActiveKeys(e,e-1),h?.(e)},[w,h]),N=u.useCallback(e=>{w.swapActiveKeys(e,e+1),m?.(e)},[w,m]),P=S.address.toString();return f(n,{onAdd:D,onRemove:s,onMoveUp:M,onMoveDown:N,onEdit:g,children:p(k,{...x,basePath:P,schema:C,hasItems:T.length>0,children:[j(),f(A,{schema:C,basePath:P})]})})}),h=({operations:e=a,...t})=>f(r,{allowedOperationsComponentNames:e,children:f(m,{...t})});h.displayName=`ArrayCollapse`,n.mixin(h);export{h as ArrayCollapse};
+import { createPanelStateManager } from "../../utils/create-panel-state-manager.js";
+import { getArrayItemInfo } from "../../utils/get-array-item-info.js";
+import "../../utils/index.js";
+import { ArrayBase } from "../array-base/array-base.js";
+import { ArrayComponentProvider, useArrayComponents } from "../array-base/component-context.js";
+import "../array-base/index.js";
+import { DEFAULT_OPERATIONS } from "../array-base/constants/index.js";
+import { ArrayCollapseItem } from "./item.js";
+import { observer, useField, useFieldSchema } from "@formily/react";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/array-collapse/array-collapse.tsx
+/**
+* ArrayCollapse component - displays array items in an collapse with inline editing
+* Each item shows:
+* - Collapse header with item label and controls (move up/down, remove)
+* - Collapse content with editable form fields
+*/
+const ArrayItemsCollapseBase = observer((props) => {
+	const { onAdd, onRemove, onMoveDown, onMoveUp, onEdit, className, children, defaultActiveKey, mode = "multiple",...otherProps } = props;
+	const field = useField();
+	const schema = useFieldSchema();
+	const formCollapse = useMemo(() => {
+		return createPanelStateManager(defaultActiveKey, mode === "accordion");
+	}, [defaultActiveKey, mode]);
+	const dataSource = Array.isArray(field.value) ? field.value : [];
+	const newItemIndex = React.useRef(null);
+	const handleAddNew = React.useCallback((index) => {
+		onAdd?.(index);
+		newItemIndex.current = index;
+	}, [onAdd]);
+	const isNewItem = React.useCallback((index) => {
+		const isNew = newItemIndex.current === index;
+		if (isNew) newItemIndex.current = null;
+		return isNew;
+	}, []);
+	const { ArrayItemsContainer, AddButton } = useArrayComponents();
+	const renderItems = () => {
+		return dataSource.map((_item, index) => {
+			const itemId = index;
+			const { itemKey, record } = getArrayItemInfo(field, index);
+			return /* @__PURE__ */ jsx(ArrayCollapseItem, {
+				record,
+				index,
+				itemId,
+				isOpen: formCollapse.activeKeys?.includes(itemId) ?? false,
+				formCollapse,
+				onAdd,
+				isNewItem
+			}, itemKey);
+		});
+	};
+	const handleMoveUp = React.useCallback((index) => {
+		formCollapse.swapActiveKeys(index, index - 1);
+		onMoveUp?.(index);
+	}, [formCollapse, onMoveUp]);
+	const handleMoveDown = React.useCallback((index) => {
+		formCollapse.swapActiveKeys(index, index + 1);
+		onMoveDown?.(index);
+	}, [formCollapse, onMoveDown]);
+	const fieldAddress = field.address.toString();
+	return /* @__PURE__ */ jsx(ArrayBase, {
+		onAdd: handleAddNew,
+		onRemove,
+		onMoveUp: handleMoveUp,
+		onMoveDown: handleMoveDown,
+		onEdit,
+		children: /* @__PURE__ */ jsxs(ArrayItemsContainer, {
+			...otherProps,
+			basePath: fieldAddress,
+			schema,
+			hasItems: dataSource.length > 0,
+			children: [renderItems(), /* @__PURE__ */ jsx(AddButton, {
+				schema,
+				basePath: fieldAddress
+			})]
+		})
+	});
+});
+const ArrayItemsCollapseComponent = ({ operations = DEFAULT_OPERATIONS,...rest }) => {
+	return /* @__PURE__ */ jsx(ArrayComponentProvider, {
+		allowedOperationsComponentNames: operations,
+		children: /* @__PURE__ */ jsx(ArrayItemsCollapseBase, { ...rest })
+	});
+};
+const ArrayCollapse = ArrayItemsCollapseComponent;
+ArrayCollapse.displayName = "ArrayCollapse";
+ArrayBase.mixin(ArrayCollapse);
+
+//#endregion
+export { ArrayCollapse };

package/dist/components/array-collapse/index.cjs

@@ -1 +1 @@
-const e=require(`./array-collapse.cjs`);
+const require_array_collapse = require('./array-collapse.cjs');

package/dist/components/array-collapse/index.js

@@ -1 +1 @@
-import{ArrayCollapse as e}from"./array-collapse.js";
+import { ArrayCollapse } from "./array-collapse.js";

package/dist/components/array-collapse/item.cjs

@@ -1 +1,84 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`../../utils/validate-array-item-fields.cjs`),n=require(`../array-base/array-base.cjs`),r=require(`../array-base/component-context.cjs`);require(`../array-base/index.cjs`);const i=require(`../array-common/item-wrapper.cjs`);require(`../array-common/index.cjs`);let a=require(`@formily/react`);a=e.__toESM(a);let o=require(`react`);o=e.__toESM(o);let s=require(`lucide-react`);s=e.__toESM(s);let c=require(`react/jsx-runtime`);c=e.__toESM(c);let l=require(`@pixpilot/shadcn`);l=e.__toESM(l);const u=o.default.memo(e=>{let{index:u,itemId:d,formCollapse:f,isOpen:p,isNewItem:m,onClick:h}=e,g=(0,a.useField)(),_=(0,a.useFieldSchema)(),{ItemLabel:v,OperationComponents:y}=r.useArrayComponents(),b=Array.isArray(_.items)?_.items[0]??_.items:_.items;o.default.useEffect(()=>{m(u)&&f.addActiveKey(d)},[u,m,d,f]);let x=g.address.concat(u).toString();return(0,c.jsx)(n.ArrayBase.Item,{index:u,record:()=>g.value?.[u],children:(0,c.jsxs)(i.ItemWrapper,{index:u,children:[(0,c.jsxs)(`div`,{className:`flex items-center gap-2 px-3`,children:[(0,c.jsx)(`button`,{type:`button`,onClick:()=>{h?.(),f.hasActiveKey(d)?t.validateArrayItemFields(g,u).then(()=>{f.removeActiveKey(d)}).catch(()=>{}):f.addActiveKey(d)},className:`hover:no-underline flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all`,children:(0,c.jsxs)(`div`,{className:`text-foreground flex items-center gap-2 font-medium`,children:[(0,c.jsx)(s.ChevronDownIcon,{className:(0,l.cn)(`size-4 shrink-0 transition-transform duration-200`,p&&`rotate-180`)}),(0,c.jsx)(v,{schema:_,index:u,basePath:x})]})}),(0,c.jsx)(`div`,{className:`flex items-center gap-1`,children:(0,c.jsx)(y,{schema:_,basePath:x,index:u})})]}),p&&b&&(0,c.jsx)(`div`,{className:`border-t px-3 pb-4`,children:(0,c.jsx)(`div`,{className:`space-y-4 pt-4`,children:(0,c.jsx)(a.RecursionField,{basePath:g.address.concat(u),schema:b,onlyRenderProperties:!0})})})]})},u)});exports.ArrayCollapseItem=u;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_validate_array_item_fields = require('../../utils/validate-array-item-fields.cjs');
+const require_array_base = require('../array-base/array-base.cjs');
+const require_component_context = require('../array-base/component-context.cjs');
+require('../array-base/index.cjs');
+const require_item_wrapper = require('../array-common/item-wrapper.cjs');
+require('../array-common/index.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 lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_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/array-collapse/item.tsx
+const ArrayCollapseItem = react.default.memo((props) => {
+	const { index, itemId, formCollapse, isOpen, isNewItem, onClick } = props;
+	const field = (0, __formily_react.useField)();
+	const schema = (0, __formily_react.useFieldSchema)();
+	const { ItemLabel, OperationComponents } = require_component_context.useArrayComponents();
+	const items = Array.isArray(schema.items) ? schema.items[0] ?? schema.items : schema.items;
+	react.default.useEffect(() => {
+		if (isNewItem(index)) formCollapse.addActiveKey(itemId);
+	}, [
+		index,
+		isNewItem,
+		itemId,
+		formCollapse
+	]);
+	const fieldAddress = field.address.concat(index).toString();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase.Item, {
+		index,
+		record: () => field.value?.[index],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_item_wrapper.ItemWrapper, {
+			index,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 px-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						onClick?.();
+						if (formCollapse.hasActiveKey(itemId)) require_validate_array_item_fields.validateArrayItemFields(field, index).then(() => {
+							formCollapse.removeActiveKey(itemId);
+						}).catch(() => {});
+						else formCollapse.addActiveKey(itemId);
+					},
+					className: "hover:no-underline flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "text-foreground flex items-center gap-2 font-medium",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, { className: (0, __pixpilot_shadcn.cn)("size-4 shrink-0 transition-transform duration-200", isOpen && "rotate-180") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemLabel, {
+							schema,
+							index,
+							basePath: fieldAddress
+						})]
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center gap-1",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OperationComponents, {
+						schema,
+						basePath: fieldAddress,
+						index
+					})
+				})]
+			}), isOpen && items && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "border-t px-3 pb-4",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "space-y-4 pt-4",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__formily_react.RecursionField, {
+						basePath: field.address.concat(index),
+						schema: items,
+						onlyRenderProperties: true
+					})
+				})
+			})]
+		})
+	}, index);
+});
+
+//#endregion
+exports.ArrayCollapseItem = ArrayCollapseItem;

package/dist/components/array-collapse/item.js

@@ -1 +1,78 @@
-import{validateArrayItemFields as e}from"../../utils/validate-array-item-fields.js";import{ArrayBase as t}from"../array-base/array-base.js";import{useArrayComponents as n}from"../array-base/component-context.js";import"../array-base/index.js";import{ItemWrapper as r}from"../array-common/item-wrapper.js";import"../array-common/index.js";import{RecursionField as i,useField as a,useFieldSchema as o}from"@formily/react";import s from"react";import{ChevronDownIcon as c}from"lucide-react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{cn as d}from"@pixpilot/shadcn";const f=s.memo(f=>{let{index:p,itemId:m,formCollapse:h,isOpen:g,isNewItem:_,onClick:v}=f,y=a(),b=o(),{ItemLabel:x,OperationComponents:S}=n(),C=Array.isArray(b.items)?b.items[0]??b.items:b.items;s.useEffect(()=>{_(p)&&h.addActiveKey(m)},[p,_,m,h]);let w=y.address.concat(p).toString();return l(t.Item,{index:p,record:()=>y.value?.[p],children:u(r,{index:p,children:[u(`div`,{className:`flex items-center gap-2 px-3`,children:[l(`button`,{type:`button`,onClick:()=>{v?.(),h.hasActiveKey(m)?e(y,p).then(()=>{h.removeActiveKey(m)}).catch(()=>{}):h.addActiveKey(m)},className:`hover:no-underline flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all`,children:u(`div`,{className:`text-foreground flex items-center gap-2 font-medium`,children:[l(c,{className:d(`size-4 shrink-0 transition-transform duration-200`,g&&`rotate-180`)}),l(x,{schema:b,index:p,basePath:w})]})}),l(`div`,{className:`flex items-center gap-1`,children:l(S,{schema:b,basePath:w,index:p})})]}),g&&C&&l(`div`,{className:`border-t px-3 pb-4`,children:l(`div`,{className:`space-y-4 pt-4`,children:l(i,{basePath:y.address.concat(p),schema:C,onlyRenderProperties:!0})})})]})},p)});export{f as ArrayCollapseItem};
+import { validateArrayItemFields } from "../../utils/validate-array-item-fields.js";
+import { ArrayBase } from "../array-base/array-base.js";
+import { useArrayComponents } from "../array-base/component-context.js";
+import "../array-base/index.js";
+import { ItemWrapper } from "../array-common/item-wrapper.js";
+import "../array-common/index.js";
+import { RecursionField, useField, useFieldSchema } from "@formily/react";
+import React from "react";
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@pixpilot/shadcn";
+
+//#region src/components/array-collapse/item.tsx
+const ArrayCollapseItem = React.memo((props) => {
+	const { index, itemId, formCollapse, isOpen, isNewItem, onClick } = props;
+	const field = useField();
+	const schema = useFieldSchema();
+	const { ItemLabel, OperationComponents } = useArrayComponents();
+	const items = Array.isArray(schema.items) ? schema.items[0] ?? schema.items : schema.items;
+	React.useEffect(() => {
+		if (isNewItem(index)) formCollapse.addActiveKey(itemId);
+	}, [
+		index,
+		isNewItem,
+		itemId,
+		formCollapse
+	]);
+	const fieldAddress = field.address.concat(index).toString();
+	return /* @__PURE__ */ jsx(ArrayBase.Item, {
+		index,
+		record: () => field.value?.[index],
+		children: /* @__PURE__ */ jsxs(ItemWrapper, {
+			index,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-3",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => {
+						onClick?.();
+						if (formCollapse.hasActiveKey(itemId)) validateArrayItemFields(field, index).then(() => {
+							formCollapse.removeActiveKey(itemId);
+						}).catch(() => {});
+						else formCollapse.addActiveKey(itemId);
+					},
+					className: "hover:no-underline flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "text-foreground flex items-center gap-2 font-medium",
+						children: [/* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4 shrink-0 transition-transform duration-200", isOpen && "rotate-180") }), /* @__PURE__ */ jsx(ItemLabel, {
+							schema,
+							index,
+							basePath: fieldAddress
+						})]
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1",
+					children: /* @__PURE__ */ jsx(OperationComponents, {
+						schema,
+						basePath: fieldAddress,
+						index
+					})
+				})]
+			}), isOpen && items && /* @__PURE__ */ jsx("div", {
+				className: "border-t px-3 pb-4",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "space-y-4 pt-4",
+					children: /* @__PURE__ */ jsx(RecursionField, {
+						basePath: field.address.concat(index),
+						schema: items,
+						onlyRenderProperties: true
+					})
+				})
+			})]
+		})
+	}, index);
+});
+
+//#endregion
+export { ArrayCollapseItem };

package/dist/components/array-common/array-items-list.cjs

@@ -1 +1,43 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`../../utils/get-array-item-info.cjs`);require(`../../utils/index.cjs`);const n=require(`../array-base/component-context.cjs`);require(`../array-base/index.cjs`);const r=require(`./list-item.cjs`);let i=require(`@formily/react`);i=e.__toESM(i);let a=require(`react`);a=e.__toESM(a);let o=require(`react/jsx-runtime`);o=e.__toESM(o);const s=(0,i.observer)(({isNewItem:e,children:a})=>{let s=(0,i.useField)(),c=(0,i.useFieldSchema)(),l=Array.isArray(s.value)?s.value:[],{ArrayItemsContainer:u}=n.useArrayComponents();return(0,o.jsxs)(u,{schema:c,basePath:s.address.toString(),hasItems:l.length>0,children:[l.map((n,i)=>{let{itemKey:a,record:c}=t.getArrayItemInfo(s,i),l=e?.(i);return(0,o.jsx)(r.ListItem,{itemKey:a,index:i,record:c,isNew:l},a)}),a]})});s.displayName=`ArrayItemsList`,exports.ArrayItemsList=s;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_get_array_item_info = require('../../utils/get-array-item-info.cjs');
+require('../../utils/index.cjs');
+const require_component_context = require('../array-base/component-context.cjs');
+require('../array-base/index.cjs');
+const require_list_item = require('./list-item.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-common/array-items-list.tsx
+/**
+* Shared component for rendering array items list
+* Displays items with move up/down, edit, and remove controls
+*/
+const ArrayItemsList = (0, __formily_react.observer)(({ isNewItem, children }) => {
+	const field = (0, __formily_react.useField)();
+	const schema = (0, __formily_react.useFieldSchema)();
+	const dataSource = Array.isArray(field.value) ? field.value : [];
+	const { ArrayItemsContainer } = require_component_context.useArrayComponents();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArrayItemsContainer, {
+		schema,
+		basePath: field.address.toString(),
+		hasItems: dataSource.length > 0,
+		children: [dataSource.map((_item, index) => {
+			const { itemKey, record } = require_get_array_item_info.getArrayItemInfo(field, index);
+			const isNew = isNewItem?.(index);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_list_item.ListItem, {
+				itemKey,
+				index,
+				record,
+				isNew
+			}, itemKey);
+		}), children]
+	});
+});
+ArrayItemsList.displayName = "ArrayItemsList";
+
+//#endregion
+exports.ArrayItemsList = ArrayItemsList;

package/dist/components/array-common/array-items-list.js

@@ -1 +1,39 @@
-import{getArrayItemInfo as e}from"../../utils/get-array-item-info.js";import"../../utils/index.js";import{useArrayComponents as t}from"../array-base/component-context.js";import"../array-base/index.js";import{ListItem as n}from"./list-item.js";import{observer as r,useField as i,useFieldSchema as a}from"@formily/react";import o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=r(({isNewItem:r,children:o})=>{let l=i(),u=a(),d=Array.isArray(l.value)?l.value:[],{ArrayItemsContainer:f}=t();return c(f,{schema:u,basePath:l.address.toString(),hasItems:d.length>0,children:[d.map((t,i)=>{let{itemKey:a,record:o}=e(l,i),c=r?.(i);return s(n,{itemKey:a,index:i,record:o,isNew:c},a)}),o]})});l.displayName=`ArrayItemsList`;export{l as ArrayItemsList};
+import { getArrayItemInfo } from "../../utils/get-array-item-info.js";
+import "../../utils/index.js";
+import { useArrayComponents } from "../array-base/component-context.js";
+import "../array-base/index.js";
+import { ListItem } from "./list-item.js";
+import { observer, useField, useFieldSchema } from "@formily/react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/array-common/array-items-list.tsx
+/**
+* Shared component for rendering array items list
+* Displays items with move up/down, edit, and remove controls
+*/
+const ArrayItemsList = observer(({ isNewItem, children }) => {
+	const field = useField();
+	const schema = useFieldSchema();
+	const dataSource = Array.isArray(field.value) ? field.value : [];
+	const { ArrayItemsContainer } = useArrayComponents();
+	return /* @__PURE__ */ jsxs(ArrayItemsContainer, {
+		schema,
+		basePath: field.address.toString(),
+		hasItems: dataSource.length > 0,
+		children: [dataSource.map((_item, index) => {
+			const { itemKey, record } = getArrayItemInfo(field, index);
+			const isNew = isNewItem?.(index);
+			return /* @__PURE__ */ jsx(ListItem, {
+				itemKey,
+				index,
+				record,
+				isNew
+			}, itemKey);
+		}), children]
+	});
+});
+ArrayItemsList.displayName = "ArrayItemsList";
+
+//#endregion
+export { ArrayItemsList };

package/dist/components/array-common/create-active-item-manager.cjs

@@ -1 +1,29 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`);let t=require(`@formily/reactive`);t=e.__toESM(t);function n(){let e=(0,t.model)({activeItem:void 0,isNew:!1,setActiveItem(t,n){e.activeItem=t,e.isNew=n},hasActiveItem(t){return e.activeItem===t},removeActiveItem(t){e.activeItem===t&&(e.activeItem=void 0),e.isNew=!1},isNewItem(t){return e.isNew&&e.activeItem===t}});return(0,t.markRaw)(e)}exports.createActiveItemManager=n;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __formily_reactive = require("@formily/reactive");
+__formily_reactive = require_rolldown_runtime.__toESM(__formily_reactive);
+
+//#region src/components/array-common/create-active-item-manager.ts
+function createActiveItemManager() {
+	const panelState = (0, __formily_reactive.model)({
+		activeItem: void 0,
+		isNew: false,
+		setActiveItem(key, isNew) {
+			panelState.activeItem = key;
+			panelState.isNew = isNew;
+		},
+		hasActiveItem(key) {
+			return panelState.activeItem === key;
+		},
+		removeActiveItem(key) {
+			if (panelState.activeItem === key) panelState.activeItem = void 0;
+			panelState.isNew = false;
+		},
+		isNewItem(index) {
+			return panelState.isNew && panelState.activeItem === index;
+		}
+	});
+	return (0, __formily_reactive.markRaw)(panelState);
+}
+
+//#endregion
+exports.createActiveItemManager = createActiveItemManager;

package/dist/components/array-common/create-active-item-manager.js

@@ -1 +1,27 @@
-import{markRaw as e,model as t}from"@formily/reactive";function n(){let n=t({activeItem:void 0,isNew:!1,setActiveItem(e,t){n.activeItem=e,n.isNew=t},hasActiveItem(e){return n.activeItem===e},removeActiveItem(e){n.activeItem===e&&(n.activeItem=void 0),n.isNew=!1},isNewItem(e){return n.isNew&&n.activeItem===e}});return e(n)}export{n as createActiveItemManager};
+import { markRaw, model } from "@formily/reactive";
+
+//#region src/components/array-common/create-active-item-manager.ts
+function createActiveItemManager() {
+	const panelState = model({
+		activeItem: void 0,
+		isNew: false,
+		setActiveItem(key, isNew) {
+			panelState.activeItem = key;
+			panelState.isNew = isNew;
+		},
+		hasActiveItem(key) {
+			return panelState.activeItem === key;
+		},
+		removeActiveItem(key) {
+			if (panelState.activeItem === key) panelState.activeItem = void 0;
+			panelState.isNew = false;
+		},
+		isNewItem(index) {
+			return panelState.isNew && panelState.activeItem === index;
+		}
+	});
+	return markRaw(panelState);
+}
+
+//#endregion
+export { createActiveItemManager };

package/dist/components/array-common/index.cjs

@@ -1 +1,5 @@
-const e=require(`./item-wrapper.cjs`),t=require(`./list-item.cjs`),n=require(`./array-items-list.cjs`),r=require(`./create-active-item-manager.cjs`),i=require(`./use-array-editor.cjs`);
+const require_item_wrapper = require('./item-wrapper.cjs');
+const require_list_item = require('./list-item.cjs');
+const require_array_items_list = require('./array-items-list.cjs');
+const require_create_active_item_manager = require('./create-active-item-manager.cjs');
+const require_use_array_editor = require('./use-array-editor.cjs');

package/dist/components/array-common/index.js

@@ -1 +1,5 @@
-import{ItemWrapper as e}from"./item-wrapper.js";import{ListItem as t}from"./list-item.js";import{ArrayItemsList as n}from"./array-items-list.js";import{createActiveItemManager as r}from"./create-active-item-manager.js";import{useArrayEditor as i}from"./use-array-editor.js";
+import { ItemWrapper } from "./item-wrapper.js";
+import { ListItem } from "./list-item.js";
+import { ArrayItemsList } from "./array-items-list.js";
+import { createActiveItemManager } from "./create-active-item-manager.js";
+import { useArrayEditor } from "./use-array-editor.js";

package/dist/components/array-common/item-wrapper.cjs

@@ -1 +1,26 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`../../utils/has-array-item-errors.cjs`);require(`../../utils/index.cjs`);let n=require(`@formily/react`);n=e.__toESM(n);let r=require(`react`);r=e.__toESM(r);let i=require(`@pixpilot/shadcn-ui`);i=e.__toESM(i);let a=require(`react/jsx-runtime`);a=e.__toESM(a);const o=e=>{let{index:r,children:o,...s}=e,c=t.hasArrayItemErrors((0,n.useField)(),r);return(0,a.jsx)(`div`,{...s,className:(0,i.cn)(`border-input bg-card rounded-md border  transition-colors items-center`,c&&`border-destructive border-2`,e.className),children:o})};o.displayName=`ItemWrapper`,exports.ItemWrapper=o;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_has_array_item_errors = require('../../utils/has-array-item-errors.cjs');
+require('../../utils/index.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-common/item-wrapper.tsx
+const ItemWrapper = (props) => {
+	const { index, children,...rest } = props;
+	const hasErrors = require_has_array_item_errors.hasArrayItemErrors((0, __formily_react.useField)(), index);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rest,
+		className: (0, __pixpilot_shadcn_ui.cn)("border-input bg-card rounded-md border  transition-colors items-center", hasErrors && "border-destructive border-2", props.className),
+		children
+	});
+};
+ItemWrapper.displayName = "ItemWrapper";
+
+//#endregion
+exports.ItemWrapper = ItemWrapper;

package/dist/components/array-common/item-wrapper.js

@@ -1 +1,21 @@
-import{hasArrayItemErrors as e}from"../../utils/has-array-item-errors.js";import"../../utils/index.js";import{useField as t}from"@formily/react";import n from"react";import{cn as r}from"@pixpilot/shadcn-ui";import{jsx as i}from"react/jsx-runtime";const a=n=>{let{index:a,children:o,...s}=n,c=e(t(),a);return i(`div`,{...s,className:r(`border-input bg-card rounded-md border  transition-colors items-center`,c&&`border-destructive border-2`,n.className),children:o})};a.displayName=`ItemWrapper`;export{a as ItemWrapper};
+import { hasArrayItemErrors } from "../../utils/has-array-item-errors.js";
+import "../../utils/index.js";
+import { useField } from "@formily/react";
+import React from "react";
+import { cn } from "@pixpilot/shadcn-ui";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/array-common/item-wrapper.tsx
+const ItemWrapper = (props) => {
+	const { index, children,...rest } = props;
+	const hasErrors = hasArrayItemErrors(useField(), index);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cn("border-input bg-card rounded-md border  transition-colors items-center", hasErrors && "border-destructive border-2", props.className),
+		children
+	});
+};
+ItemWrapper.displayName = "ItemWrapper";
+
+//#endregion
+export { ItemWrapper };

package/dist/components/array-common/list-item.cjs

@@ -1 +1,53 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`../array-base/array-base.cjs`),n=require(`../array-base/component-context.cjs`);require(`../array-base/index.cjs`);const r=require(`./item-wrapper.cjs`);let i=require(`@formily/react`);i=e.__toESM(i);let a=require(`react`);a=e.__toESM(a);let o=require(`react/jsx-runtime`);o=e.__toESM(o);let s=require(`@pixpilot/shadcn`);s=e.__toESM(s);const c=a.default.memo(({itemKey:e,index:a,record:c,isNew:l})=>{let u=(0,i.useFieldSchema)(),d=(0,i.useField)(),{OperationComponents:f,ItemLabel:p}=n.useArrayComponents(),m=d.address.toString(),h=l;return(0,o.jsx)(t.ArrayBase.Item,{index:a,record:c,children:(0,o.jsxs)(r.ItemWrapper,{className:(0,s.cn)(`flex px-3 pl-4 py-2`,h&&`hidden`),index:a,children:[(0,o.jsx)(`div`,{className:`text-foreground flex-1 font-medium`,children:(0,o.jsx)(p,{schema:u,basePath:m,index:a})}),(0,o.jsx)(`div`,{className:`flex items-center gap-1`,children:(0,o.jsx)(f,{schema:u,basePath:m,index:a})})]})},e)});c.displayName=`ListItem`,exports.ListItem=c;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_array_base = require('../array-base/array-base.cjs');
+const require_component_context = require('../array-base/component-context.cjs');
+require('../array-base/index.cjs');
+const require_item_wrapper = require('./item-wrapper.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);
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/components/array-common/list-item.tsx
+/**
+* Individual list item component for array items
+* Displays an item with label and operation controls
+*/
+const ListItem = react.default.memo(({ itemKey, index, record, isNew }) => {
+	const schema = (0, __formily_react.useFieldSchema)();
+	const field = (0, __formily_react.useField)();
+	const { OperationComponents, ItemLabel } = require_component_context.useArrayComponents();
+	const fieldAddress = field.address.toString();
+	const isNewItem = isNew;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_array_base.ArrayBase.Item, {
+		index,
+		record,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_item_wrapper.ItemWrapper, {
+			className: (0, __pixpilot_shadcn.cn)("flex px-3 pl-4 py-2", isNewItem && "hidden"),
+			index,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-foreground flex-1 font-medium",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemLabel, {
+					schema,
+					basePath: fieldAddress,
+					index
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center gap-1",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OperationComponents, {
+					schema,
+					basePath: fieldAddress,
+					index
+				})
+			})]
+		})
+	}, itemKey);
+});
+ListItem.displayName = "ListItem";
+
+//#endregion
+exports.ListItem = ListItem;