form-builder-pro 1.3.1 → 1.3.2

package/dist/index.css

@@ -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));

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;
@@ -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);
@@ -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" }));