form-builder-pro 1.3.9 → 1.4.0

package/dist/index.css

@@ -1089,6 +1089,9 @@ body {
 .items-center {
   align-items: center;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .justify-end {
   justify-content: flex-end;
 }
@@ -1220,6 +1223,10 @@ body {
 .border-dashed {
   border-style: dashed;
 }
+.border-\[\#019FA2\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(1 159 162 / var(--tw-border-opacity, 1));
+}
 .border-\[\#635bff\]\/35 {
   border-color: rgb(99 91 255 / 0.35);
 }
@@ -1310,6 +1317,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-50\/50 {
+  background-color: rgb(249 250 251 / 0.5);
+}
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
@@ -1471,6 +1481,10 @@ body {
 .tracking-wider {
   letter-spacing: 0.05em;
 }
+.text-\[\#019FA2\] {
+  --tw-text-opacity: 1;
+  color: rgb(1 159 162 / var(--tw-text-opacity, 1));
+}
 .text-\[\#3b497e\] {
   --tw-text-opacity: 1;
   color: rgb(59 73 126 / var(--tw-text-opacity, 1));
@@ -1789,6 +1803,10 @@ input[type="radio"]:checked::after {
   background-color: rgb(1 138 141 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-\[\#019FA2\]\/10:hover {
+  background-color: rgb(1 159 162 / 0.1);
+}
+
 .hover\:bg-\[\#635bff\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
@@ -1968,6 +1986,11 @@ input[type="radio"]:checked::after {
   opacity: 0.7;
 }
 
+.dark\:border-\[\#019FA2\]:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(1 159 162 / var(--tw-border-opacity, 1));
+}
+
 .dark\:border-\[\#635bff\]\/50:is(.dark *) {
   border-color: rgb(99 91 255 / 0.5);
 }
@@ -2006,6 +2029,10 @@ input[type="radio"]:checked::after {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:bg-gray-800\/30:is(.dark *) {
+  background-color: rgb(31 41 55 / 0.3);
+}
+
 .dark\:bg-gray-800\/40:is(.dark *) {
   background-color: rgb(31 41 55 / 0.4);
 }
@@ -2024,6 +2051,11 @@ input[type="radio"]:checked::after {
   background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:text-\[\#4dd4d6\]:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(77 212 214 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-blue-200:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(191 219 254 / var(--tw-text-opacity, 1));

package/dist/index.js

@@ -7441,6 +7441,18 @@ var FormRenderer = class {
         grid.appendChild(fieldWrapper);
       });
       sectionEl.appendChild(grid);
+      if (section.repeatable === true) {
+        const addLabel = section.addButtonLabel && section.addButtonLabel.trim() || "+ Add";
+        const addRow = createElement("div", { className: "mt-3 flex justify-start" });
+        addRow.appendChild(
+          createElement("button", {
+            type: "button",
+            className: "px-4 py-2 text-sm font-medium rounded-md border border-[#019FA2] text-[#019FA2] dark:text-[#4dd4d6] dark:border-[#019FA2] bg-transparent hover:bg-[#019FA2]/10 transition-colors",
+            text: addLabel
+          })
+        );
+        sectionEl.appendChild(addRow);
+      }
       form.appendChild(sectionEl);
     });
     const submitBtn = createElement("button", {
@@ -9916,6 +9928,21 @@ var Section = class _Section {
       nestedWrap.appendChild(nestedList);
       sectionEl.appendChild(nestedWrap);
     }
+    if (this.section.repeatable === true) {
+      const addLabel = this.section.addButtonLabel && this.section.addButtonLabel.trim() || "+ Add";
+      const footer = createElement("div", {
+        className: "px-4 pb-4 pt-2 flex justify-start border-t border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/30"
+      });
+      footer.appendChild(
+        createElement("button", {
+          type: "button",
+          className: "px-4 py-2 text-sm font-medium rounded-md border border-[#019FA2] text-[#019FA2] dark:text-[#4dd4d6] dark:border-[#019FA2] bg-white dark:bg-gray-900 hover:bg-[#019FA2]/10 transition-colors",
+          text: addLabel,
+          onclick: (e) => e.preventDefault()
+        })
+      );
+      sectionEl.appendChild(footer);
+    }
     this.initFieldSortable(fieldsGrid);
     return sectionEl;
   }
@@ -10274,6 +10301,7 @@ var FormBuilder = class {
           collapsible: s.collapsible,
           parentGroupId: s.parentGroupId,
           repeatable: s.repeatable,
+          addButtonLabel: s.addButtonLabel,
           minInstances: s.minInstances,
           maxInstances: s.maxInstances,
           css: s.css,
@@ -11164,11 +11192,37 @@ var FormBuilder = class {
       this.createCheckboxField(
         "Allow multiple instances",
         section.repeatable === true,
-        (checked) => formStore.getState().updateSection(sectionId, { repeatable: checked }),
+        (checked) => formStore.getState().updateSection(sectionId, {
+          repeatable: checked,
+          ...checked ? {} : { addButtonLabel: null }
+        }),
         `group-repeatable-${sectionId}`
       )
     );
     if (section.repeatable === true) {
+      const addLabelWrap = createElement("div", { className: "mb-2" });
+      addLabelWrap.appendChild(
+        createElement("label", {
+          className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+          text: "Add Button Label"
+        })
+      );
+      addLabelWrap.appendChild(
+        createElement("input", {
+          type: "text",
+          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+          value: section.addButtonLabel ?? "",
+          placeholder: "e.g. + Billing Address",
+          "data-focus-id": `group-add-btn-label-${sectionId}`,
+          oninput: (e) => {
+            const raw = e.target.value;
+            formStore.getState().updateSection(sectionId, {
+              addButtonLabel: raw === "" ? null : raw
+            });
+          }
+        })
+      );
+      body.appendChild(addLabelWrap);
       const minG = createElement("div", { className: "mb-2" });
       minG.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Min Instances" }));
       minG.appendChild(createElement("input", {