@dragonmastery/zinia-forms-core 0.3.6 → 0.3.7

package/dist/index.d.ts

@@ -108,6 +108,10 @@ interface ArrayFieldProps<FormType, ItemType> {
     itemsSource?: () => ItemType[];
     itemRenderer?: (item: ItemType, index: number) => any;
     availableItemRenderer?: (item: ItemType, index: number) => any;
+    itemPreview?: (item: ItemType, index: number) => string;
+    showItemNumber?: boolean;
+    itemPreviewMaxLength?: number;
+    fieldSummary?: (items: ItemType[]) => string;
     createItem?: () => ItemType;
     onAddItem?: (item: ItemType) => void;
     onRemoveItem?: (index: number) => void;
@@ -123,6 +127,8 @@ interface ArrayFieldProps<FormType, ItemType> {
         moveDownButton?: string;
         item?: string;
     };
+    collapseAllButton?: boolean;
+    defaultCollapsed?: boolean;
 }
 
 interface CheckboxFieldProps<FormType> {
@@ -1275,6 +1281,11 @@ declare function useForm<T extends z.ZodObject<any>, CalcType = (values: z.infer
         readonly errors: Record<string, string>;
         readonly touched: Record<string, boolean>;
         readonly dirty: Record<string, boolean>;
+        readonly collapsedFields: Record<string, {
+            isFieldCollapsed: boolean;
+            collapsedItems: number[];
+            defaultCollapsedInitialized: boolean;
+        }>;
         fieldsMetadata: Record<string, FieldMetadata>;
         validate: (options?: {
             markErrorsAsTouched: boolean;

package/dist/index.js

@@ -79,14 +79,44 @@ function createTypedArrayField(baseArrayField, fieldPath, metadata) {
     // Add other metadata fields as needed
   } : {};
   const TypedArrayField = (props, context) => {
-    const fullProps = {
+    const allProps = {
       ...metadataProps,
       ...props,
+      ...context?.attrs || {},
       name: fieldPath
     };
     const contextWithSlots = context || { attrs: {}, slots: {} };
-    return baseArrayField(fullProps, contextWithSlots);
+    return baseArrayField(allProps, contextWithSlots);
   };
+  TypedArrayField.props = [
+    "label",
+    "hideLabel",
+    "description",
+    "required",
+    "disabled",
+    "readonly",
+    "class",
+    "availableItems",
+    "itemRenderer",
+    "availableItemRenderer",
+    "itemPreview",
+    "showItemNumber",
+    "itemPreviewMaxLength",
+    "fieldSummary",
+    "createItem",
+    // This is the key prop we need
+    "onAddItem",
+    "onRemoveItem",
+    "onUpdateItem",
+    "onSwapItems",
+    "minItems",
+    "maxItems",
+    "allowReordering",
+    "ariaLabels",
+    "itemsSource",
+    "collapseAllButton",
+    "defaultCollapsed"
+  ];
   return TypedArrayField;
 }
 
@@ -1423,6 +1453,7 @@ function useFormState(initialData, options) {
     focused: {},
     displayText: {},
     selectedIndex: {},
+    collapsedFields: {},
     // Form status
     isSubmitting: false,
     hasAttemptedSubmit: false,
@@ -1856,6 +1887,9 @@ function useForm(schema, options) {
     get dirty() {
       return formState.state.dirty;
     },
+    get collapsedFields() {
+      return formState.state.collapsedFields;
+    },
     fieldsMetadata,
     // Form methods
     validate: validation.validate,
@@ -3611,6 +3645,51 @@ function createDaisyUIArrayField() {
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
     const arrayValue = formState.getValue(props.name) || [];
+    const fieldName = String(props.name);
+    if (!formState.collapsedFields[fieldName]) {
+      formState.collapsedFields[fieldName] = {
+        isFieldCollapsed: false,
+        collapsedItems: [],
+        defaultCollapsedInitialized: false
+      };
+    }
+    const collapseState = formState.collapsedFields[fieldName];
+    if (props.defaultCollapsed && !collapseState.defaultCollapsedInitialized && arrayValue.length > 0) {
+      collapseState.collapsedItems = arrayValue.map((_, index) => index);
+      collapseState.defaultCollapsedInitialized = true;
+    }
+    const toggleFieldCollapse = () => {
+      collapseState.isFieldCollapsed = !collapseState.isFieldCollapsed;
+    };
+    const toggleItemCollapse = (index) => {
+      const itemIndex = collapseState.collapsedItems.indexOf(index);
+      if (itemIndex > -1) {
+        collapseState.collapsedItems.splice(itemIndex, 1);
+      } else {
+        collapseState.collapsedItems.push(index);
+      }
+    };
+    const collapseAllItems = () => {
+      collapseState.collapsedItems = arrayValue.map((_, index) => index);
+    };
+    const expandAllItems = () => {
+      collapseState.collapsedItems = [];
+    };
+    const areAllItemsCollapsed = () => {
+      return arrayValue.length > 0 && collapseState.collapsedItems.length === arrayValue.length;
+    };
+    const getItemPreview = (item, index) => {
+      if (props.itemPreview) {
+        const preview = props.itemPreview(item, index);
+        const maxLength = props.itemPreviewMaxLength ?? 125;
+        if (preview.length > maxLength) {
+          return preview.substring(0, maxLength - 3) + "...";
+        }
+        return preview;
+      }
+      return "";
+    };
+    const showItemNumber = props.showItemNumber === true;
     const getFieldName = (fieldPath, index) => {
       return `${props.name}.${index}.${fieldPath}`;
     };
@@ -3621,7 +3700,9 @@ function createDaisyUIArrayField() {
         }
       });
     };
-    const instance = getCurrentInstance();
+    if (process.env.NODE_ENV === "development") {
+      console.log("[ArrayFieldDaisy] createItem prop:", !!props.createItem, "for field:", props.name);
+    }
     const addItem = (item) => {
       const currentArray = [...arrayValue];
       if (maxItems !== void 0 && currentArray.length >= maxItems) {
@@ -3634,6 +3715,7 @@ function createDaisyUIArrayField() {
       if (props.onAddItem) {
         props.onAddItem(itemCopy);
       }
+      const instance = getCurrentInstance();
       if (instance) {
         instance.emit("item-added", itemCopy);
       }
@@ -3650,6 +3732,7 @@ function createDaisyUIArrayField() {
       if (props.onRemoveItem) {
         props.onRemoveItem(index);
       }
+      const instance = getCurrentInstance();
       if (instance) {
         instance.emit("item-removed", removedItem, index);
       }
@@ -3667,6 +3750,7 @@ function createDaisyUIArrayField() {
       if (props.onSwapItems) {
         props.onSwapItems(indexA, indexB);
       }
+      const instance = getCurrentInstance();
       if (instance) {
         instance.emit("items-swapped", indexA, indexB, currentArray[indexA], currentArray[indexB]);
       }
@@ -3722,19 +3806,19 @@ function createDaisyUIArrayField() {
       if (!availableItems || availableItems.length === 0) {
         return null;
       }
-      return /* @__PURE__ */ jsxs("div", { class: "mt-4", children: [
-        /* @__PURE__ */ jsx("h3", { class: "font-semibold mb-2", children: "Available Items" }),
-        /* @__PURE__ */ jsx("div", { class: "grid grid-cols-1 md:grid-cols-2 gap-2", children: availableItems.map((item, index) => /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs("div", { class: "mt-4 sm:mt-6", children: [
+        /* @__PURE__ */ jsx("h3", { class: "text-base sm:text-lg font-semibold mb-3 sm:mb-4", children: "Available Items" }),
+        /* @__PURE__ */ jsx("div", { class: "grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4", children: availableItems.map((item, index) => /* @__PURE__ */ jsxs(
           "div",
           {
-            class: "flex items-center justify-between p-3 border rounded-lg bg-base-100 hover:bg-base-200",
+            class: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-2 p-4 sm:p-3 border border-base-300 rounded-lg bg-base-100 hover:bg-base-200 transition-colors",
             children: [
-              /* @__PURE__ */ jsx("div", { class: "flex-1", children: slots.availableItemRenderer?.({ item, index }) || (props.availableItemRenderer ? props.availableItemRenderer(item, index) : JSON.stringify(item)) }),
+              /* @__PURE__ */ jsx("div", { class: "flex-1 min-w-0", children: slots.availableItemRenderer?.({ item, index }) || (props.availableItemRenderer ? props.availableItemRenderer(item, index) : JSON.stringify(item)) }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  class: "btn btn-sm btn-primary ml-2",
+                  class: "btn btn-primary btn-md sm:btn-sm w-full sm:w-auto min-h-[44px] sm:min-h-0 flex-shrink-0",
                   onClick: () => addItem(item),
                   disabled: isAddButtonDisabled,
                   "aria-label": ariaLabels.addButton,
@@ -3750,89 +3834,210 @@ function createDaisyUIArrayField() {
     };
     const renderSelectedItems = () => {
       if (arrayValue.length === 0) {
-        return null;
-      }
-      return /* @__PURE__ */ jsxs("div", { class: "mt-4", children: [
-        /* @__PURE__ */ jsx("h4", { class: "font-medium mb-2", children: "Selected Items:" }),
-        /* @__PURE__ */ jsx("div", { class: "space-y-2", children: arrayValue.map((item, index) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            class: "flex items-center justify-between p-3 border rounded-lg bg-base-100 hover:bg-base-200",
-            children: [
-              /* @__PURE__ */ jsx("div", { class: "flex-1", children: slots.itemRenderer?.({
-                item,
-                index,
-                // Type-safe fields object with autocomplete
-                fields: generateFieldsProxy(index)
-              }) || (props.itemRenderer ? props.itemRenderer(item, index) : JSON.stringify(item)) }),
-              /* @__PURE__ */ jsxs("div", { class: "flex items-center space-x-1 ml-2", children: [
-                props.allowReordering && /* @__PURE__ */ jsxs("div", { class: "flex space-x-1", children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      class: "btn btn-sm btn-ghost btn-square",
-                      onClick: () => moveItemUp(index),
-                      disabled: index === 0 || props.disabled || props.readonly,
-                      "aria-label": ariaLabels.moveUpButton,
-                      "data-testid": `${formState.storeName}-array-field-${String(props.name)}-move-up-${index}`,
-                      children: "\u2191"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      class: "btn btn-sm btn-ghost btn-square",
-                      onClick: () => moveItemDown(index),
-                      disabled: index === arrayValue.length - 1 || props.disabled || props.readonly,
-                      "aria-label": ariaLabels.moveDownButton,
-                      "data-testid": `${formState.storeName}-array-field-${String(props.name)}-move-down-${index}`,
-                      children: "\u2193"
-                    }
-                  )
+        return /* @__PURE__ */ jsx("div", { class: "mt-4 sm:mt-6", children: /* @__PURE__ */ jsx("div", { class: "text-center py-8 sm:py-12 px-4 border border-dashed border-base-300 rounded-lg bg-base-50", children: /* @__PURE__ */ jsxs("p", { class: "text-sm sm:text-base text-base-content/60", children: [
+          "No items added yet. ",
+          props.createItem ? 'Click "Add New Item" below to get started.' : availableItems && availableItems.length > 0 ? "Select an item from above to add it." : ""
+        ] }) }) });
+      }
+      return /* @__PURE__ */ jsxs("div", { class: "mt-4 sm:mt-6", children: [
+        /* @__PURE__ */ jsx("div", { class: "flex items-center justify-between mb-3 sm:mb-4", children: /* @__PURE__ */ jsxs("h4", { class: "text-base sm:text-lg font-semibold", children: [
+          "Selected Items",
+          arrayValue.length > 0 && /* @__PURE__ */ jsxs("span", { class: "ml-2 text-sm font-normal text-base-content/60", children: [
+            "(",
+            arrayValue.length,
+            maxItems !== void 0 ? ` / ${maxItems}` : "",
+            ")"
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { class: "space-y-3 sm:space-y-4", children: arrayValue.map((item, index) => {
+          const isItemCollapsed = collapseState.collapsedItems.includes(index);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: "border border-base-300 rounded-lg bg-base-100 shadow-sm hover:shadow-md transition-shadow",
+              children: [
+                /* @__PURE__ */ jsxs("div", { class: "border-b border-base-200 bg-base-50 rounded-t-lg", children: [
+                  /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between p-1 sm:p-3 sm:px-4", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        class: "btn btn-ghost btn-square btn-xs sm:btn-sm min-h-[32px] sm:min-h-[36px] min-w-[32px] sm:min-w-[36px] p-0",
+                        onClick: () => toggleItemCollapse(index),
+                        "aria-label": isItemCollapsed ? "Expand item" : "Collapse item",
+                        "aria-expanded": !isItemCollapsed,
+                        children: /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            class: `h-4 w-4 sm:h-5 sm:w-5 transition-transform ${isItemCollapsed ? "" : "rotate-90"}`,
+                            fill: "none",
+                            viewBox: "0 0 24 24",
+                            stroke: "currentColor",
+                            children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" })
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        class: "btn btn-error btn-xs sm:btn-sm min-h-[32px] sm:min-h-[36px] px-2 sm:px-3 text-xs sm:text-sm",
+                        onClick: () => removeItem(index),
+                        disabled: isRemoveButtonDisabled(),
+                        "aria-label": ariaLabels.removeButton,
+                        "data-testid": `${formState.storeName}-array-field-${String(props.name)}-remove-${index}`,
+                        children: [
+                          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", class: "h-3.5 w-3.5 sm:h-4 sm:w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+                          /* @__PURE__ */ jsx("span", { class: "hidden sm:inline ml-1", children: "Remove" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  isItemCollapsed && /* @__PURE__ */ jsxs("div", { class: "px-1 sm:px-4 pb-2 sm:pb-3 border-t border-base-200/50", children: [
+                    showItemNumber && /* @__PURE__ */ jsxs("div", { class: "text-xs text-base-content/60 font-medium mb-1", children: [
+                      "#",
+                      index + 1
+                    ] }),
+                    getItemPreview(item, index) && /* @__PURE__ */ jsx("div", { class: "font-semibold text-sm sm:text-base break-words leading-tight", children: getItemPreview(item, index) })
+                  ] }),
+                  props.allowReordering && /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-end gap-1 sm:gap-2 p-1 sm:p-3 sm:px-4 border-t border-base-200/50", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        class: "btn btn-ghost btn-square btn-xs sm:btn-sm min-h-[32px] sm:min-h-[36px] min-w-[32px] sm:min-w-[36px] p-0",
+                        onClick: () => moveItemUp(index),
+                        disabled: index === 0 || props.disabled || props.readonly,
+                        "aria-label": ariaLabels.moveUpButton,
+                        "data-testid": `${formState.storeName}-array-field-${String(props.name)}-move-up-${index}`,
+                        children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", class: "h-3.5 w-3.5 sm:h-4 sm:w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 15l7-7 7 7" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        class: "btn btn-ghost btn-square btn-xs sm:btn-sm min-h-[32px] sm:min-h-[36px] min-w-[32px] sm:min-w-[36px] p-0",
+                        onClick: () => moveItemDown(index),
+                        disabled: index === arrayValue.length - 1 || props.disabled || props.readonly,
+                        "aria-label": ariaLabels.moveDownButton,
+                        "data-testid": `${formState.storeName}-array-field-${String(props.name)}-move-down-${index}`,
+                        children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", class: "h-3.5 w-3.5 sm:h-4 sm:w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M19 9l-7 7-7-7" }) })
+                      }
+                    )
+                  ] })
                 ] }),
+                !isItemCollapsed && /* @__PURE__ */ jsx("div", { class: "p-3 sm:p-5", children: slots.itemRenderer?.({
+                  item,
+                  index,
+                  // Type-safe fields object with autocomplete
+                  fields: generateFieldsProxy(index)
+                }) || (props.itemRenderer ? props.itemRenderer(item, index) : JSON.stringify(item)) })
+              ]
+            },
+            index
+          );
+        }) })
+      ] });
+    };
+    return /* @__PURE__ */ jsxs("div", { class: `form-control w-full ${props.class || ""}`, children: [
+      !props.hideLabel && /* @__PURE__ */ jsx("div", { class: "label pb-2 sm:pb-3", children: /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ jsxs("span", { class: "label-text text-base sm:text-lg font-semibold", children: [
+          props.label || fieldMetadata?.label,
+          fieldMetadata?.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error ml-1", children: "*" }),
+          arrayValue.length > 0 && /* @__PURE__ */ jsxs("span", { class: "ml-2 text-sm font-normal text-base-content/60", children: [
+            "(",
+            arrayValue.length,
+            maxItems !== void 0 ? ` / ${maxItems}` : "",
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
+          arrayValue.length > 0 && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              class: "btn btn-ghost btn-sm min-h-[36px] sm:min-h-[44px] px-2 sm:px-3",
+              onClick: toggleFieldCollapse,
+              "aria-label": collapseState.isFieldCollapsed ? "Expand all items" : "Collapse all items",
+              "aria-expanded": !collapseState.isFieldCollapsed,
+              children: [
                 /* @__PURE__ */ jsx(
-                  "button",
+                  "svg",
                   {
-                    type: "button",
-                    class: "btn btn-sm btn-error",
-                    onClick: () => removeItem(index),
-                    disabled: isRemoveButtonDisabled(),
-                    "aria-label": ariaLabels.removeButton,
-                    "data-testid": `${formState.storeName}-array-field-${String(props.name)}-remove-${index}`,
-                    children: "Remove"
+                    xmlns: "http://www.w3.org/2000/svg",
+                    class: `h-4 w-4 sm:h-5 sm:w-5 transition-transform ${collapseState.isFieldCollapsed ? "" : "rotate-180"}`,
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M19 9l-7 7-7-7" })
                   }
-                )
-              ] })
-            ]
-          },
-          index
-        )) })
-      ] });
-    };
-    return /* @__PURE__ */ jsxs("div", { class: `form-control ${props.class || ""}`, children: [
-      !props.hideLabel && /* @__PURE__ */ jsx("label", { class: "label", children: /* @__PURE__ */ jsxs("span", { class: "label-text", children: [
-        props.label || fieldMetadata?.label,
-        fieldMetadata?.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error", children: " *" })
+                ),
+                /* @__PURE__ */ jsx("span", { class: "hidden sm:inline ml-1 text-xs", children: collapseState.isFieldCollapsed ? "Expand" : "Collapse" })
+              ]
+            }
+          ),
+          props.collapseAllButton && arrayValue.length > 0 && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              class: "btn btn-ghost btn-sm min-h-[36px] sm:min-h-[44px] px-2 sm:px-3",
+              onClick: areAllItemsCollapsed() ? expandAllItems : collapseAllItems,
+              "aria-label": areAllItemsCollapsed() ? "Expand all items" : "Collapse all items",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    class: "h-4 w-4 sm:h-5 sm:w-5",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M4 6h16M4 12h16M4 18h16" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { class: "hidden sm:inline ml-1 text-xs", children: areAllItemsCollapsed() ? "Expand All" : "Collapse All" })
+              ]
+            }
+          )
+        ] })
       ] }) }),
       slots.default?.(),
-      renderAvailableItems(),
-      renderSelectedItems(),
-      props.createItem && /* @__PURE__ */ jsx("div", { class: "mt-4", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          class: "btn btn-sm btn-outline btn-primary",
-          onClick: () => addItem(createNewItem()),
-          disabled: isAddButtonDisabled,
-          "aria-label": ariaLabels.addButton,
-          "data-testid": `${formState.storeName}-array-field-${String(props.name)}-add-button`,
-          children: "Add New Item"
-        }
-      ) }),
-      props.description && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: props.description }),
-      isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error mt-1", children: formState.getError(props.name) })
+      !collapseState.isFieldCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderAvailableItems(),
+        renderSelectedItems()
+      ] }),
+      collapseState.isFieldCollapsed && arrayValue.length > 0 && /* @__PURE__ */ jsx("div", { class: "mt-4 sm:mt-6 p-4 border border-base-300 rounded-lg bg-base-50", children: /* @__PURE__ */ jsx("p", { class: "text-sm sm:text-base text-base-content/70", children: props.fieldSummary ? props.fieldSummary(arrayValue) : `${arrayValue.length} item${arrayValue.length !== 1 ? "s" : ""} added. Click "Expand" above to view and edit.` }) }),
+      props.description && /* @__PURE__ */ jsx("p", { class: "text-sm sm:text-base text-base-content/70 mt-2 sm:mt-3 px-1", children: props.description }),
+      props.createItem && /* @__PURE__ */ jsxs("div", { class: `mt-3 sm:mt-6 ${arrayValue.length > 0 ? "pt-3 sm:pt-6 border-t border-base-300" : ""}`, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "btn btn-outline btn-accent btn-sm w-full sm:w-auto min-h-[36px] sm:min-h-0",
+            onClick: () => addItem(createNewItem()),
+            disabled: isAddButtonDisabled,
+            "aria-label": ariaLabels.addButton,
+            "data-testid": `${formState.storeName}-array-field-${String(props.name)}-add-button`,
+            children: [
+              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", class: "h-4 w-4 mr-1.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 4v16m8-8H4" }) }),
+              /* @__PURE__ */ jsx("span", { class: "text-sm", children: "Add New Item" })
+            ]
+          }
+        ),
+        maxItems !== void 0 && /* @__PURE__ */ jsxs("p", { class: "text-xs sm:text-sm text-base-content/60 mt-2 text-center sm:text-left", children: [
+          arrayValue.length,
+          " of ",
+          maxItems,
+          " items"
+        ] })
+      ] }),
+      isTouched2 && hasErrors && /* @__PURE__ */ jsx("div", { class: "mt-2 sm:mt-3 p-3 sm:p-4 bg-error/10 border border-error/20 rounded-lg", children: /* @__PURE__ */ jsxs("p", { class: "text-sm sm:text-base text-error font-medium flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 flex-shrink-0 mt-0.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+        /* @__PURE__ */ jsx("span", { children: formState.getError(props.name) })
+      ] }) })
     ] });
   };
   DaisyUIArrayField.props = [
@@ -3847,6 +4052,10 @@ function createDaisyUIArrayField() {
     "availableItems",
     "itemRenderer",
     "availableItemRenderer",
+    "itemPreview",
+    "showItemNumber",
+    "itemPreviewMaxLength",
+    "fieldSummary",
     "createItem",
     "onAddItem",
     "onRemoveItem",
@@ -3855,7 +4064,9 @@ function createDaisyUIArrayField() {
     "minItems",
     "maxItems",
     "allowReordering",
-    "ariaLabels"
+    "ariaLabels",
+    "collapseAllButton",
+    "defaultCollapsed"
   ];
   return DaisyUIArrayField;
 }