form-builder-pro 1.3.0 → 1.3.2

package/dist/index.css

@@ -863,21 +863,21 @@ body {
 .inset-0 {
   inset: 0px;
 }
-.right-1 {
-  right: 0.25rem;
-}
 .right-2 {
   right: 0.5rem;
 }
-.right-6 {
-  right: 1.5rem;
+.right-8 {
+  right: 2rem;
 }
-.top-1 {
-  top: 0.25rem;
+.right-\[16\%\] {
+  right: 16%;
 }
 .top-2 {
   top: 0.5rem;
 }
+.top-\[6px\] {
+  top: 6px;
+}
 .z-10 {
   z-index: 10;
 }
@@ -1005,9 +1005,6 @@ body {
 .min-h-\[100px\] {
   min-height: 100px;
 }
-.min-h-\[120px\] {
-  min-height: 120px;
-}
 .min-h-\[200px\] {
   min-height: 200px;
 }
@@ -1035,6 +1032,9 @@ body {
 .w-8 {
   width: 2rem;
 }
+.w-\[256px\] {
+  width: 256px;
+}
 .w-\[300px\] {
   width: 300px;
 }
@@ -1044,8 +1044,8 @@ body {
 .max-w-2xl {
   max-width: 42rem;
 }
-.max-w-\[180px\] {
-  max-width: 180px;
+.max-w-\[140px\] {
+  max-width: 140px;
 }
 .max-w-full {
   max-width: 100%;
@@ -1242,6 +1242,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
 }
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
+}
 .border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
@@ -1254,17 +1258,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(1 159 162 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#3b497e\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 73 126 / var(--tw-bg-opacity, 1));
-}
 .bg-\[\#635bff\] {
   --tw-bg-opacity: 1;
   background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#847dff1a\] {
-  background-color: #847dff1a;
-}
 .bg-\[\#e7e7ff\] {
   --tw-bg-opacity: 1;
   background-color: rgb(231 231 255 / var(--tw-bg-opacity, 1));
@@ -1331,8 +1328,8 @@ body {
 .p-8 {
   padding: 2rem;
 }
-.p-\[0\.5px\] {
-  padding: 0.5px;
+.p-\[2px\] {
+  padding: 2px;
 }
 .px-1 {
   padding-left: 0.25rem;
@@ -1757,6 +1754,16 @@ input[type="radio"]:checked::after {
   background-color: rgb(1 138 141 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-\[\#635bff\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-\[\#ef2f2f\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 47 47 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
@@ -1821,6 +1828,11 @@ input[type="radio"]:checked::after {
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .hover\:shadow-sm:hover {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import * as zustand_vanilla from 'zustand/vanilla';
 
-type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'file' | 'image' | 'email' | 'phone';
+type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'binary_choice' | 'repeater' | 'file' | 'image' | 'email' | 'phone';
 type FieldWidth = '25%' | '33%' | '50%' | '66%' | '75%' | '100%' | number;
 declare function parseWidth(width: FieldWidth): number;
 declare function getColSpanFromWidth(width: FieldWidth): string;
@@ -110,6 +110,14 @@ interface FormField {
     valueSource?: 'manual' | 'formula';
     formula?: string;
     dependencies?: string[];
+    optionOnLabel?: string;
+    optionOffLabel?: string;
+    valueOn?: string;
+    valueOff?: string;
+    showWhenValueOnFields?: string[];
+    showWhenValueOffFields?: string[];
+    repeatItemLabel?: string;
+    repeatIncrementEnabled?: boolean;
 }
 /**
  * ISD (International Subscriber Dialing) configuration for phone fields

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import * as zustand_vanilla from 'zustand/vanilla';
 
-type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'file' | 'image' | 'email' | 'phone';
+type FieldType = 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox' | 'radio' | 'toggle' | 'binary_choice' | 'repeater' | 'file' | 'image' | 'email' | 'phone';
 type FieldWidth = '25%' | '33%' | '50%' | '66%' | '75%' | '100%' | number;
 declare function parseWidth(width: FieldWidth): number;
 declare function getColSpanFromWidth(width: FieldWidth): string;
@@ -110,6 +110,14 @@ interface FormField {
     valueSource?: 'manual' | 'formula';
     formula?: string;
     dependencies?: string[];
+    optionOnLabel?: string;
+    optionOffLabel?: string;
+    valueOn?: string;
+    valueOff?: string;
+    showWhenValueOnFields?: string[];
+    showWhenValueOffFields?: string[];
+    repeatItemLabel?: string;
+    repeatIncrementEnabled?: boolean;
 }
 /**
  * ISD (International Subscriber Dialing) configuration for phone fields

package/dist/index.js

@@ -4121,6 +4121,8 @@ var FIELD_TYPES = [
   { type: "checkbox", label: "Checkbox", icon: "CheckSquare" },
   { type: "radio", label: "Radio Group", icon: "CircleDot" },
   { type: "toggle", label: "Toggle", icon: "ToggleSwitch" },
+  { type: "binary_choice", label: "Yes/No Toggle", icon: "ToggleLeft" },
+  { type: "repeater", label: "Repeater", icon: "Copy" },
   { type: "file", label: "File Upload", icon: "Upload" },
   { type: "image", label: "Image", icon: "Image" }
 ];
@@ -4148,6 +4150,25 @@ var DEFAULT_FIELD_CONFIG = {
   checkbox: { label: "Checkbox", options: [], width: "100%", enabled: true, visible: true },
   radio: { label: "Radio Group", options: [], width: "100%", enabled: true, visible: true },
   toggle: { label: "Toggle", width: "50%", enabled: true, visible: true },
+  binary_choice: {
+    label: "Yes/No Toggle",
+    width: "50%",
+    enabled: true,
+    visible: true,
+    optionOnLabel: "YES",
+    optionOffLabel: "NO",
+    valueOn: "YES",
+    valueOff: "NO",
+    defaultValue: "NO"
+  },
+  repeater: {
+    label: "Repeater",
+    width: "100%",
+    enabled: true,
+    visible: true,
+    repeatItemLabel: "Item",
+    repeatIncrementEnabled: false
+  },
   file: { label: "File Upload", width: "100%", enabled: true, visible: true },
   image: { label: "Image", width: "50%", enabled: true, visible: true }
 };
@@ -4421,12 +4442,17 @@ function convertSpanToWidth(span, totalColumns = 12) {
 function normalizeFieldType(type) {
   if (!type)
     return "text";
-  const normalized = String(type).toLowerCase().replace(/_/g, "");
+  const str = String(type);
+  const normalized = str.toLowerCase().replace(/_/g, "");
   if (normalized === "decimal")
     return "number";
   if (["phonenumber", "telephone", "mobile"].includes(normalized))
     return "phone";
-  return String(type).toLowerCase();
+  if (str === "BINARY_CHOICE" || normalized === "binarychoice")
+    return "binary_choice";
+  if (str === "REPEATER" || normalized === "repeater")
+    return "repeater";
+  return str.toLowerCase();
 }
 function transformField(field) {
   const fieldId = field.id || field.fieldId;
@@ -4604,6 +4630,24 @@ function transformField(field) {
     transformed.formula = field.formula;
   if (field.dependencies !== void 0 && Array.isArray(field.dependencies))
     transformed.dependencies = field.dependencies;
+  if (field.optionOnLabel !== void 0)
+    transformed.optionOnLabel = field.optionOnLabel;
+  if (field.optionOffLabel !== void 0)
+    transformed.optionOffLabel = field.optionOffLabel;
+  if (field.valueOn !== void 0)
+    transformed.valueOn = field.valueOn;
+  if (field.valueOff !== void 0)
+    transformed.valueOff = field.valueOff;
+  if (field.showWhenValueOnFields !== void 0 && Array.isArray(field.showWhenValueOnFields)) {
+    transformed.showWhenValueOnFields = field.showWhenValueOnFields;
+  }
+  if (field.showWhenValueOffFields !== void 0 && Array.isArray(field.showWhenValueOffFields)) {
+    transformed.showWhenValueOffFields = field.showWhenValueOffFields;
+  }
+  if (field.repeatItemLabel !== void 0)
+    transformed.repeatItemLabel = field.repeatItemLabel;
+  if (field.repeatIncrementEnabled !== void 0)
+    transformed.repeatIncrementEnabled = field.repeatIncrementEnabled;
   if (field.css !== void 0)
     transformed.css = field.css;
   if (field.optionsSource !== void 0)
@@ -4807,6 +4851,34 @@ function fieldToPayload(field) {
   if ((field.type === "select" || field.type === "radio" || field.type === "checkbox") && field.options && Array.isArray(field.options)) {
     payload.options = field.options.map((opt) => ({ label: opt.label, value: opt.value }));
   }
+  if (field.type === "binary_choice") {
+    payload.fieldType = "BINARY_CHOICE";
+    payload.type = "binary_choice";
+    payload.optionOnLabel = field.optionOnLabel ?? "YES";
+    payload.optionOffLabel = field.optionOffLabel ?? "NO";
+    payload.valueOn = field.valueOn ?? field.optionOnLabel ?? "YES";
+    payload.valueOff = field.valueOff ?? field.optionOffLabel ?? "NO";
+    if (field.showWhenValueOnFields && field.showWhenValueOnFields.length > 0) {
+      payload.showWhenValueOnFields = field.showWhenValueOnFields;
+    }
+    if (field.showWhenValueOffFields && field.showWhenValueOffFields.length > 0) {
+      payload.showWhenValueOffFields = field.showWhenValueOffFields;
+    }
+  }
+  if (field.type === "repeater") {
+    payload.fieldType = "REPEATER";
+    payload.type = "number";
+    payload.repeatItemLabel = field.repeatItemLabel ?? "Item";
+    payload.repeatIncrementEnabled = field.repeatIncrementEnabled ?? false;
+    if (field.validations?.min !== void 0 || field.validations?.max !== void 0) {
+      const v = payload.validation || {};
+      if (field.validations.min !== void 0)
+        v.min = field.validations.min;
+      if (field.validations.max !== void 0)
+        v.max = field.validations.max;
+      payload.validation = v;
+    }
+  }
   return payload;
 }
 var builderToPlatform = (builderSchema) => {
@@ -5913,7 +5985,7 @@ var FieldRenderer = class {
   static render(field, value, onChange, readOnly = false) {
     const wrapper = createElement("div", { className: "w-full form-row" });
     const isEnabled = field.enabled !== false && !readOnly;
-    if (field.type !== "checkbox" && field.type !== "toggle") {
+    if (field.type !== "checkbox" && field.type !== "toggle" && field.type !== "binary_choice") {
       const label = createElement("label", {
         className: "text-xs sm:text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
         text: field.label
@@ -5931,7 +6003,7 @@ var FieldRenderer = class {
         label.appendChild(createElement("span", { className: "text-red-500 ml-1", text: "*" }));
       }
       wrapper.appendChild(label);
-    } else if (field.type === "toggle") {
+    } else if (field.type === "toggle" || field.type === "binary_choice") {
       const label = createElement("label", {
         className: "text-xs sm:text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
         text: field.label
@@ -6138,6 +6210,81 @@ var FieldRenderer = class {
         toggleLabel.appendChild(toggleSlider);
         input.appendChild(toggleLabel);
         break;
+      case "binary_choice": {
+        const bcValueOn = field.valueOn ?? field.optionOnLabel ?? "YES";
+        const bcValueOff = field.valueOff ?? field.optionOffLabel ?? "NO";
+        const bcIsOn = value === bcValueOn || value === true || value !== bcValueOff && value !== false && !!value;
+        input = createElement("div", { className: "flex items-center gap-3" });
+        const bcOptionOff = field.optionOffLabel ?? "NO";
+        const bcOptionOn = field.optionOnLabel ?? "YES";
+        const offSpan = createElement("span", {
+          className: `text-sm font-medium ${!bcIsOn ? "text-gray-900 dark:text-white" : "text-gray-500 dark:text-gray-400"}`,
+          text: bcOptionOff
+        });
+        const bcToggleLabel = createElement("label", { className: "relative inline-flex items-center cursor-pointer" });
+        const bcToggleInput = createElement("input", {
+          type: "checkbox",
+          className: "sr-only peer",
+          checked: bcIsOn,
+          disabled: !isEnabled,
+          onchange: (e) => {
+            const checked = e.target.checked;
+            onChange?.(checked ? bcValueOn : bcValueOff);
+          }
+        });
+        const bcToggleSlider = createElement("div", {
+          className: `w-11 h-6 bg-gray-200 peer-focus:outline-none shadow-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-[#019FA2] ${!isEnabled ? "opacity-50 cursor-not-allowed" : ""}`
+        });
+        bcToggleLabel.appendChild(bcToggleInput);
+        bcToggleLabel.appendChild(bcToggleSlider);
+        const onSpan = createElement("span", {
+          className: `text-sm font-medium ${bcIsOn ? "text-gray-900 dark:text-white" : "text-gray-500 dark:text-gray-400"}`,
+          text: bcOptionOn
+        });
+        input.appendChild(offSpan);
+        input.appendChild(bcToggleLabel);
+        input.appendChild(onSpan);
+        break;
+      }
+      case "repeater":
+        const minCount = field.validations?.min ?? 0;
+        const maxCount = field.validations?.max ?? 999;
+        const itemLabel = field.repeatItemLabel ?? "Item";
+        const currentCount = Array.isArray(value) ? value.length : typeof value === "number" ? value : 0;
+        const repeaterContainer = createElement("div", { className: "repeater-field border border-gray-200 dark:border-gray-700 rounded-md p-4" });
+        const repeaterHeader = createElement("div", { className: "flex items-center justify-between mb-3" });
+        repeaterHeader.appendChild(createElement("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", text: `${itemLabel}s (${currentCount})` }));
+        const repeaterControls = createElement("div", { className: "flex gap-2" });
+        const addBtn = createElement("button", {
+          type: "button",
+          className: "px-2 py-1 text-xs text-white bg-[#019FA2] rounded hover:bg-[#018a8d] disabled:opacity-50 disabled:cursor-not-allowed",
+          text: "Add",
+          disabled: !isEnabled || currentCount >= maxCount,
+          onclick: () => {
+            const newCount = currentCount + 1;
+            onChange?.(Array.isArray(value) ? [...value, {}] : newCount);
+          }
+        });
+        const removeBtn = createElement("button", {
+          type: "button",
+          className: "px-2 py-1 text-xs text-red-600 border border-red-300 rounded hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50 disabled:cursor-not-allowed",
+          text: "Remove",
+          disabled: !isEnabled || currentCount <= minCount,
+          onclick: () => {
+            const newCount = Math.max(minCount, currentCount - 1);
+            onChange?.(Array.isArray(value) ? value.slice(0, -1) : newCount);
+          }
+        });
+        repeaterControls.appendChild(addBtn);
+        repeaterControls.appendChild(removeBtn);
+        repeaterHeader.appendChild(repeaterControls);
+        repeaterContainer.appendChild(repeaterHeader);
+        repeaterContainer.appendChild(createElement("p", {
+          className: "text-xs text-gray-500 dark:text-gray-400",
+          text: `Min: ${minCount}, Max: ${maxCount}`
+        }));
+        input = repeaterContainer;
+        break;
       case "phone":
         input = this.renderPhoneField(field, value, onChange, isEnabled);
         break;
@@ -6279,7 +6426,7 @@ var FieldRenderer = class {
     const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
     const container = createElement("div", { className: "image-field-wrapper flex flex-col gap-3 w-full" });
     const previewWrap = createElement("div", {
-      className: "relative rounded-md border border-input bg-gray-50 dark:bg-gray-800 overflow-hidden min-h-[120px] flex items-center justify-center"
+      className: "relative rounded-md border border-input bg-gray-50 dark:bg-gray-800 overflow-hidden min-h-[100px] flex items-center justify-center"
     });
     if (imageValue) {
       const img = createElement("img", {
@@ -8936,13 +9083,13 @@ var FieldWrapper = class {
       });
     }
     if (isSelected) {
-      fieldWrapper.classList.add("ring-2", "bg-[#847dff1a]", "dark:bg-blue-900/20");
+      fieldWrapper.classList.add("ring-2", "bg-transparent", "dark:bg-blue-900/20");
     }
     fieldWrapper.appendChild(createElement("div", {
-      className: `absolute top-2 right-6 cursor-move p-1 rounded bg-[#3b497e] p-[0.5px] mr-1 text-white group-hover:opacity-100 transition-opacity field-handle z-10 ${isSelected ? "opacity-100" : ""}`
-    }, [getIcon("GripVertical", 16)]));
+      className: `absolute top-[6px] bg-[#e7e7ff]  hover:bg-[#635bff] hover:text-white  right-8 cursor-move p-1 rounded  p-[2px] mr-1 text-[#635bff] group-hover:opacity-100 transition-opacity field-handle z-10 ${isSelected ? "opacity-100" : ""}`
+    }, [getIcon("GripVertical", 20)]));
     fieldWrapper.appendChild(createElement("button", {
-      className: `absolute top-1 right-1 p-1 rounded text-red-500  group-hover:opacity-100 transition-opacity z-10 ${isSelected ? "opacity-100" : ""}`,
+      className: `absolute top-[6px] right-2  rounded text-red-600 bg-[#f7a1a14d] text-red-500 p-1 hover:bg-[#ef2f2f] hover:text-white   group-hover:opacity-100  transition-opacity z-10 ${isSelected ? "opacity-100" : ""}`,
       onclick: (e) => {
         e.stopPropagation();
         if (confirm("Delete this field?")) {
@@ -8950,7 +9097,7 @@ var FieldWrapper = class {
         }
       }
     }, [getIcon("Trash2", 16)]));
-    const content = createElement("div", { className: "p-3  pointer-events-none" });
+    const content = createElement("div", { className: "p-2  pointer-events-none " });
     content.appendChild(FieldRenderer.render(field, null, void 0, true));
     fieldWrapper.appendChild(content);
     return fieldWrapper;
@@ -9117,7 +9264,7 @@ var SectionList = class {
   }
   render() {
     const listContainer = createElement("div", {
-      className: "space-y-6 min-h-[200px] ",
+      className: "space-y-6 ",
       // pb-20 for extra scrolling space
       id: "sections-list",
       "data-drop-zone": "sections"
@@ -9636,7 +9783,7 @@ var FormBuilder = class {
     }, [getIcon("Cog", 20)]);
     right.appendChild(settingsBtn);
     const clearBtn = createElement("button", {
-      className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-[#f7a1a14d] text-red-500 rounded-md transition-colors",
+      className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-[#f7a1a14d] text-red-500 hover:bg-[#ef2f2f] hover:text-white rounded-md transition-colors",
       onclick: () => {
         if (confirm("Are you sure?")) {
           formStore.getState().setSchema({ id: "new", title: "New Form", formName: "newForm", sections: [] });
@@ -9644,7 +9791,7 @@ var FormBuilder = class {
       }
     }, [getIcon("Trash2", 16), createElement("span", { className: "", title: "Clear" })]);
     const previewBtn = createElement("button", {
-      className: `flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${state.isPreviewMode ? "text-[#635bff] bg-[#e7e7ff] " : "text-[#635bff] bg-[#e7e7ff]"}`,
+      className: `flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${state.isPreviewMode ? "text-[#635bff] bg-[#e7e7ff] hover:bg-[#635bff] hover:text-white" : "text-[#635bff] bg-[#e7e7ff] hover:bg-[#635bff] hover:text-white"}`,
       onclick: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -9653,7 +9800,7 @@ var FormBuilder = class {
       title: state.isPreviewMode ? "Exit Preview" : "Preview Form"
     }, [getIcon(state.isPreviewMode ? "X" : "Eye", 16)]);
     const saveBtn = createElement("button", {
-      className: "flex items-center px-3 py-2 text-sm font-medium text-[#635bff] bg-[#e7e7ff]  rounded-md shadow-sm transition-colors",
+      className: "flex items-center px-3 py-2 text-sm font-medium text-[#635bff] bg-[#e7e7ff] hover:bg-[#635bff] hover:text-white  rounded-md shadow-sm transition-colors",
       onclick: () => {
         const schema = formStore.getState().schema;
         const numericFields = schema.sections.flatMap((s) => s.fields).filter((f) => f.type === "number");
@@ -9824,7 +9971,7 @@ var FormBuilder = class {
     const sectionList = new SectionList(state.schema, state.selectedFieldId);
     inner.appendChild(sectionList.getElement());
     const addSectionBtn = createElement("button", {
-      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff] max-w-[180px]  text-white transition-colors flex items-center justify-center font-medium",
+      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff] max-w-[140px]  text-white transition-colors flex items-center justify-center font-medium",
       onclick: () => formStore.getState().addSection()
     }, [getIcon("Plus", 20), createElement("span", { className: "ml-2", text: "Add Section" })]);
     inner.appendChild(addSectionBtn);
@@ -10130,6 +10277,113 @@ var FormBuilder = class {
       (checked) => formStore.getState().updateField(selectedField.id, { visible: checked }),
       `visible-${selectedField.id}`
     ));
+    if (selectedField.type === "binary_choice") {
+      const bcHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Yes/No Toggle Settings" });
+      body.appendChild(bcHeader);
+      const firstLabelGroup = createElement("div", { className: "mb-3" });
+      firstLabelGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "First Label (e.g. YES / ON)" }));
+      firstLabelGroup.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: selectedField.optionOnLabel ?? "YES",
+        placeholder: "YES",
+        oninput: (e) => {
+          const v = e.target.value;
+          formStore.getState().updateField(selectedField.id, { optionOnLabel: v || "YES", valueOn: v || "YES" });
+        }
+      }));
+      body.appendChild(firstLabelGroup);
+      const secondLabelGroup = createElement("div", { className: "mb-3" });
+      secondLabelGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Second Label (e.g. NO / OFF)" }));
+      secondLabelGroup.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: selectedField.optionOffLabel ?? "NO",
+        placeholder: "NO",
+        oninput: (e) => {
+          const v = e.target.value;
+          formStore.getState().updateField(selectedField.id, { optionOffLabel: v || "NO", valueOff: v || "NO" });
+        }
+      }));
+      body.appendChild(secondLabelGroup);
+      const defaultSelGroup = createElement("div", { className: "mb-3" });
+      defaultSelGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Default Selection" }));
+      const defaultSelSelect = createElement("select", {
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        onchange: (e) => {
+          const val = e.target.value;
+          const valueOn2 = selectedField.valueOn ?? selectedField.optionOnLabel ?? "YES";
+          const valueOff2 = selectedField.valueOff ?? selectedField.optionOffLabel ?? "NO";
+          formStore.getState().updateField(selectedField.id, { defaultValue: val === "YES" ? valueOn2 : valueOff2 });
+        }
+      });
+      const valueOn = selectedField.valueOn ?? selectedField.optionOnLabel ?? "YES";
+      const valueOff = selectedField.valueOff ?? selectedField.optionOffLabel ?? "NO";
+      const currentDefault = selectedField.defaultValue;
+      defaultSelSelect.appendChild(createElement("option", { value: "YES", text: "Yes", selected: currentDefault === valueOn }));
+      defaultSelSelect.appendChild(createElement("option", { value: "NO", text: "No", selected: currentDefault === valueOff || currentDefault === void 0 }));
+      defaultSelGroup.appendChild(defaultSelSelect);
+      body.appendChild(defaultSelGroup);
+      const allFields = state.schema.sections.flatMap((s) => s.fields).filter((f) => f.id !== selectedField.id);
+      const showWhenYesGroup = createElement("div", { className: "mb-3" });
+      showWhenYesGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Show when Toggle = Yes" }));
+      const showWhenYesSelect = createElement("select", {
+        multiple: true,
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent min-h-[80px]",
+        onchange: () => {
+          const opts = Array.from(showWhenYesSelect.selectedOptions).map((o) => o.value);
+          formStore.getState().updateField(selectedField.id, { showWhenValueOnFields: opts });
+        }
+      });
+      allFields.forEach((f) => {
+        const opt = createElement("option", { value: f.id, text: f.label || f.id });
+        if ((selectedField.showWhenValueOnFields || []).includes(f.id))
+          opt.selected = true;
+        showWhenYesSelect.appendChild(opt);
+      });
+      showWhenYesGroup.appendChild(createElement("p", { className: "text-xs text-gray-500 mt-1", text: "Hold Ctrl/Cmd to select multiple" }));
+      showWhenYesGroup.appendChild(showWhenYesSelect);
+      body.appendChild(showWhenYesGroup);
+      const showWhenNoGroup = createElement("div", { className: "mb-3" });
+      showWhenNoGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Show when Toggle = No" }));
+      const showWhenNoSelect = createElement("select", {
+        multiple: true,
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent min-h-[80px]",
+        onchange: () => {
+          const opts = Array.from(showWhenNoSelect.selectedOptions).map((o) => o.value);
+          formStore.getState().updateField(selectedField.id, { showWhenValueOffFields: opts });
+        }
+      });
+      allFields.forEach((f) => {
+        const opt = createElement("option", { value: f.id, text: f.label || f.id });
+        if ((selectedField.showWhenValueOffFields || []).includes(f.id))
+          opt.selected = true;
+        showWhenNoSelect.appendChild(opt);
+      });
+      showWhenNoGroup.appendChild(createElement("p", { className: "text-xs text-gray-500 mt-1", text: "Hold Ctrl/Cmd to select multiple" }));
+      showWhenNoGroup.appendChild(showWhenNoSelect);
+      body.appendChild(showWhenNoGroup);
+    }
+    if (selectedField.type === "repeater") {
+      const repHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Repeater Settings" });
+      body.appendChild(repHeader);
+      const repItemLabelGroup = createElement("div", { className: "mb-3" });
+      repItemLabelGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Item Label" }));
+      repItemLabelGroup.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: selectedField.repeatItemLabel ?? "Item",
+        placeholder: "Item",
+        oninput: (e) => formStore.getState().updateField(selectedField.id, { repeatItemLabel: e.target.value || "Item" })
+      }));
+      body.appendChild(repItemLabelGroup);
+      body.appendChild(this.createCheckboxField(
+        "Repeat Increment Enabled",
+        selectedField.repeatIncrementEnabled === true,
+        (checked) => formStore.getState().updateField(selectedField.id, { repeatIncrementEnabled: checked }),
+        `repeat-increment-${selectedField.id}`
+      ));
+    }
     if (selectedField.type === "phone") {
       const isdHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Phone ISD Settings" });
       body.appendChild(isdHeader);
@@ -10492,10 +10746,10 @@ var FormBuilder = class {
         };
         const optionsList = createElement("div", { className: "space-y-2 mb-3" });
         options.forEach((opt, index2) => {
-          const optionRow = createElement("div", { className: "flex gap-2 items-center" });
+          const optionRow = createElement("div", { className: "flex gap-2 items-center w-[256px]" });
           const labelInput = createElement("input", {
             type: "text",
-            className: "flex-1 px-2 py-1.5 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
+            className: "flex-1 px-2 py-1.5 border border-gray-300 w-full dark:border-gray-700 rounded-md bg-transparent text-sm",
             value: opt.label,
             placeholder: "Option label",
             "data-focus-id": `field-option-label-${selectedField.id}-${index2}`,
@@ -10510,7 +10764,7 @@ var FormBuilder = class {
           });
           const valueInput = createElement("input", {
             type: "text",
-            className: "flex-1 px-2 py-1.5 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
+            className: "flex-1 px-2 py-1.5 border border-gray-300 w-full dark:border-gray-700 rounded-md bg-transparent text-sm",
             value: opt.value,
             placeholder: "Option value",
             "data-focus-id": `field-option-value-${selectedField.id}-${index2}`,
@@ -10544,7 +10798,7 @@ var FormBuilder = class {
         body.appendChild(optionsList);
         const addOptionBtn = createElement("button", {
           type: "button",
-          className: "w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors",
+          className: "w-full mt-6 py-2  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff]   text-white transition-colors flex items-center justify-center font-medium transition-colors",
           text: "Add Option",
           onclick: () => {
             const currentOptions = getCurrentOptions();
@@ -10627,6 +10881,36 @@ var FormBuilder = class {
       return String(value);
     };
     const validationElements = [];
+    if (selectedField.type === "repeater") {
+      const repMinValGroup = createElement("div", { className: "mb-3" });
+      repMinValGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Min Items" }));
+      repMinValGroup.appendChild(createElement("input", {
+        type: "number",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: getValidationsValue("min") || "",
+        placeholder: "e.g. 2",
+        min: "0",
+        oninput: (e) => {
+          const val = e.target.value;
+          updateValidations({ min: val !== "" ? parseInt(val) : void 0 });
+        }
+      }));
+      validationElements.push(repMinValGroup);
+      const repMaxValGroup = createElement("div", { className: "mb-3" });
+      repMaxValGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Max Items" }));
+      repMaxValGroup.appendChild(createElement("input", {
+        type: "number",
+        className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+        value: getValidationsValue("max") || "",
+        placeholder: "e.g. 4",
+        min: "1",
+        oninput: (e) => {
+          const val = e.target.value;
+          updateValidations({ max: val !== "" ? parseInt(val) : void 0 });
+        }
+      }));
+      validationElements.push(repMaxValGroup);
+    }
     if (selectedField.type === "number") {
       const numValidationTypeGroup = createElement("div", { className: "mb-3" });
       numValidationTypeGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Validation Type" }));