hs-uix 1.0.0 → 1.0.1

package/dist/form.js

@@ -72,7 +72,132 @@ var isValueEmpty = (value, field) => {
   if ((field.type === "toggle" || field.type === "checkbox") && value === false) return true;
   return false;
 };
-var runValidators = (value, field, allValues, fieldTypes) => {
+var isPromise = (value) => value && typeof value.then === "function";
+var isAsyncFunction = (fn) => fn && fn.constructor && fn.constructor.name === "AsyncFunction";
+var normalizeValidatorResult = (result) => {
+  if (result === true || result === void 0 || result === null || result === false) return null;
+  return String(result);
+};
+var isDateValueObject = (value) => isPlainObject(value) && Number.isInteger(value.year) && Number.isInteger(value.month) && Number.isInteger(value.date);
+var isTimeValueObject = (value) => isPlainObject(value) && Number.isInteger(value.hours) && Number.isInteger(value.minutes);
+var compareDateValues = (a, b) => {
+  if (a.year !== b.year) return a.year - b.year;
+  if (a.month !== b.month) return a.month - b.month;
+  return a.date - b.date;
+};
+var compareTimeValues = (a, b) => {
+  if (a.hours !== b.hours) return a.hours - b.hours;
+  return a.minutes - b.minutes;
+};
+var runDefaultFieldValidator = (value, field, allValues) => {
+  const errorPrefix = field.label || field.name;
+  switch (field.type) {
+    case "text":
+    case "password":
+    case "textarea":
+      if (typeof value !== "string") return `${errorPrefix} must be text`;
+      break;
+    case "number":
+    case "stepper":
+    case "currency":
+      if (typeof value !== "number" || Number.isNaN(value)) return `${errorPrefix} must be a number`;
+      break;
+    case "toggle":
+    case "checkbox":
+      if (typeof value !== "boolean") return `${errorPrefix} must be true or false`;
+      break;
+    case "select":
+    case "radioGroup": {
+      const options = resolveOptions(field, allValues);
+      if (options.length > 0 && !options.some((o) => Object.is(o.value, value))) {
+        return `${errorPrefix} has an invalid selection`;
+      }
+      break;
+    }
+    case "multiselect":
+    case "checkboxGroup": {
+      if (!Array.isArray(value)) return `${errorPrefix} must be a list`;
+      const options = resolveOptions(field, allValues);
+      if (options.length > 0) {
+        const validValues = new Set(options.map((o) => o.value));
+        const hasInvalid = value.some((item) => !validValues.has(item));
+        if (hasInvalid) return `${errorPrefix} has an invalid selection`;
+      }
+      break;
+    }
+    case "date":
+      if (!isDateValueObject(value)) return `${errorPrefix} has an invalid date`;
+      break;
+    case "time":
+      if (!isTimeValueObject(value)) return `${errorPrefix} has an invalid time`;
+      break;
+    case "datetime": {
+      if (isDateValueObject(value)) break;
+      if (!isPlainObject(value)) return `${errorPrefix} has an invalid date/time`;
+      const hasDate = value.date !== void 0;
+      const hasTime = value.time !== void 0;
+      if (!hasDate && !hasTime) return `${errorPrefix} has an invalid date/time`;
+      if (hasDate && !isDateValueObject(value.date)) return `${errorPrefix} has an invalid date`;
+      if (hasTime && !isTimeValueObject(value.time)) return `${errorPrefix} has an invalid time`;
+      break;
+    }
+    case "repeater":
+      if (!Array.isArray(value)) return `${errorPrefix} has invalid rows`;
+      break;
+    default:
+      break;
+  }
+  return null;
+};
+var runCustomSyncValidators = (value, field, allValues) => {
+  const validators = Array.isArray(field.validators) ? field.validators : [];
+  for (const validator of validators) {
+    if (isAsyncFunction(validator)) continue;
+    try {
+      const result = validator(value, allValues);
+      if (isPromise(result)) continue;
+      const err = normalizeValidatorResult(result);
+      if (err) return err;
+    } catch (err) {
+      return (err == null ? void 0 : err.message) || "Validation failed";
+    }
+  }
+  if (field.validate && !isAsyncFunction(field.validate)) {
+    try {
+      const result = field.validate(value, allValues);
+      if (!isPromise(result)) {
+        const err = normalizeValidatorResult(result);
+        if (err) return err;
+      }
+    } catch (err) {
+      return (err == null ? void 0 : err.message) || "Validation failed";
+    }
+  }
+  return null;
+};
+var collectAsyncValidatorPromises = (value, field, allValues, context) => {
+  const promises = [];
+  const validators = Array.isArray(field.validators) ? field.validators : [];
+  for (const validator of validators) {
+    try {
+      const result = validator(value, allValues, context);
+      if (isPromise(result)) promises.push(result);
+    } catch (err) {
+      promises.push(Promise.reject(err));
+    }
+  }
+  if (field.validate) {
+    try {
+      const result = field.validate(value, allValues, context);
+      if (isPromise(result)) promises.push(result);
+    } catch (err) {
+      promises.push(Promise.reject(err));
+    }
+  }
+  return promises;
+};
+var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
+  const includeCustomValidators = options.includeCustomValidators !== false;
   if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") return null;
   const isRequired = resolveRequired(field, allValues);
   const plugin = fieldTypes && fieldTypes[field.type];
@@ -81,6 +206,10 @@ var runValidators = (value, field, allValues, fieldTypes) => {
     return `${field.label} is required`;
   }
   if (empty) return null;
+  if (field.useDefaultValidators !== false) {
+    const typeError = runDefaultFieldValidator(value, field, allValues);
+    if (typeError) return typeError;
+  }
   if (field.pattern && typeof value === "string") {
     if (!field.pattern.test(value)) {
       return field.patternMessage || "Invalid format";
@@ -102,10 +231,25 @@ var runValidators = (value, field, allValues, fieldTypes) => {
       return `Must be no more than ${field.max}`;
     }
   }
-  if (field.validate) {
-    const result = field.validate(value, allValues);
-    if (result && typeof result.then === "function") return null;
-    if (result !== true && result) return result;
+  if (field.type === "date" && isDateValueObject(value)) {
+    if (field.min && isDateValueObject(field.min) && compareDateValues(value, field.min) < 0) {
+      return field.minValidationMessage || "Date is too early";
+    }
+    if (field.max && isDateValueObject(field.max) && compareDateValues(value, field.max) > 0) {
+      return field.maxValidationMessage || "Date is too late";
+    }
+  }
+  if (field.type === "time" && isTimeValueObject(value)) {
+    if (field.min && isTimeValueObject(field.min) && compareTimeValues(value, field.min) < 0) {
+      return field.minValidationMessage || "Time is too early";
+    }
+    if (field.max && isTimeValueObject(field.max) && compareTimeValues(value, field.max) > 0) {
+      return field.maxValidationMessage || "Time is too late";
+    }
+  }
+  if (includeCustomValidators) {
+    const customError = runCustomSyncValidators(value, field, allValues);
+    if (customError) return customError;
   }
   return null;
 };
@@ -117,6 +261,58 @@ var resolveOptions = (field, allValues) => {
   if (typeof field.options === "function") return field.options(allValues);
   return field.options || [];
 };
+var getDependsOnName = (field) => field.dependsOnConfig && field.dependsOnConfig.field;
+var getDependsOnDisplay = (field) => field.dependsOnConfig && field.dependsOnConfig.display || "grouped";
+var getDependsOnLabel = (field) => field.dependsOnConfig && field.dependsOnConfig.label;
+var getDependsOnMessage = (field) => field.dependsOnConfig && field.dependsOnConfig.message;
+var getRepeaterErrorKey = (fieldName, rowIdx, subFieldName) => `${fieldName}[${rowIdx}].${subFieldName}`;
+var isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
+var deepEqual = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== typeof b) return false;
+  if (a == null || b == null) return false;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    for (const key of aKeys) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    return true;
+  }
+  return false;
+};
+var fieldSetHasErrors = (errors, fields) => {
+  if (!errors || !fields || fields.length === 0) return false;
+  const names = new Set(fields.map((field) => field.name));
+  return Object.keys(errors).some((errorKey) => {
+    const base = errorKey.split("[")[0];
+    return names.has(base);
+  });
+};
+var deepClone = (value) => {
+  if (Array.isArray(value)) return value.map(deepClone);
+  if (value instanceof Date) return new Date(value.getTime());
+  if (isPlainObject(value)) {
+    const next = {};
+    for (const key of Object.keys(value)) {
+      next[key] = deepClone(value[key]);
+    }
+    return next;
+  }
+  return value;
+};
 var useFormPrefill = (properties, mapping) => {
   return (0, import_react.useMemo)(() => {
     if (!properties) return {};
@@ -186,28 +382,30 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     // validate current step fields before Next
   } = props;
   const {
-    submitLabel = "Submit",
-    // submit button text
+    labels,
+    // { submit, cancel, back, next } — i18n label object
     submitVariant = "primary",
     // submit button variant
     showCancel = false,
     // show cancel button
-    cancelLabel = "Cancel",
-    // cancel button text
     onCancel,
     // () => void
     submitPosition = "bottom",
     // "bottom" | "none"
     loading: controlledLoading,
     // controlled loading state
-    disabled = false
+    disabled = false,
     // disable entire form
+    renderButtons: renderButtonsProp
+    // custom action row renderer
   } = props;
   const {
     columns = 1,
     // number of grid columns (1 = full-width stack)
     columnWidth,
     // AutoGrid columnWidth — responsive layout (overrides columns)
+    maxColumns,
+    // cap number of columns per row in AutoGrid mode
     layout,
     // explicit row layout array (overrides columns + columnWidth)
     sections,
@@ -218,6 +416,10 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     // show * on required fields
     noFormWrapper = false,
     // skip HubSpot <Form> wrapper
+    autoComplete,
+    // form autoComplete attribute
+    formProps,
+    // pass-through props for Form wrapper
     fieldTypes
     // Record<string, FieldTypePlugin> — custom field type registry
   } = props;
@@ -228,8 +430,12 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     // string — form-level success alert
     readOnly: formReadOnly = false,
     // boolean — lock all fields
-    readOnlyMessage
+    readOnlyMessage,
     // string — warning alert when readOnly
+    alerts,
+    // { addAlert, readOnlyTitle, errorTitle, successTitle }
+    errors: controlledErrors
+    // controlled validation errors
   } = props;
   const {
     onDirtyChange,
@@ -237,6 +443,38 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     autoSave
     // { debounce: number, onAutoSave: (values) => void }
   } = props;
+  const submitButtonLabel = (labels == null ? void 0 : labels.submit) || "Submit";
+  const cancelButtonLabel = (labels == null ? void 0 : labels.cancel) || "Cancel";
+  const backButtonLabel = (labels == null ? void 0 : labels.back) || "Back";
+  const nextButtonLabel = (labels == null ? void 0 : labels.next) || "Next";
+  const addAlert = alerts == null ? void 0 : alerts.addAlert;
+  const readOnlyTitle = (alerts == null ? void 0 : alerts.readOnlyTitle) || "Read Only";
+  const errorTitle = (alerts == null ? void 0 : alerts.errorTitle) || "Error";
+  const successTitle = (alerts == null ? void 0 : alerts.successTitle) || "Success";
+  const prevErrorRef = (0, import_react.useRef)(formError);
+  const prevSuccessRef = (0, import_react.useRef)(formSuccess);
+  (0, import_react.useEffect)(() => {
+    if (!addAlert) return;
+    if (formError && formError !== prevErrorRef.current) {
+      addAlert({
+        type: "danger",
+        title: errorTitle,
+        message: typeof formError === "string" ? formError : void 0
+      });
+    }
+    prevErrorRef.current = formError;
+  }, [addAlert, formError, errorTitle]);
+  (0, import_react.useEffect)(() => {
+    if (!addAlert) return;
+    if (formSuccess && formSuccess !== prevSuccessRef.current) {
+      addAlert({
+        type: "success",
+        title: successTitle,
+        message: formSuccess
+      });
+    }
+    prevSuccessRef.current = formSuccess;
+  }, [addAlert, formSuccess, successTitle]);
   const computeInitialValues = () => {
     const vals = {};
     for (const field of fields) {
@@ -252,25 +490,99 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   const [internalErrors, setInternalErrors] = (0, import_react.useState)({});
   const [internalStep, setInternalStep] = (0, import_react.useState)(0);
   const [internalLoading, setInternalLoading] = (0, import_react.useState)(false);
-  const [touchedFields, setTouchedFields] = (0, import_react.useState)({});
   const [validatingFields, setValidatingFields] = (0, import_react.useState)({});
   const asyncValidationRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const asyncAbortRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const asyncValidationVersionRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   const debounceTimersRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const inputDebounceRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const rowKeyRef = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
+  const rowKeyCounterRef = (0, import_react.useRef)(0);
   const initialSnapshot = (0, import_react.useRef)(null);
   if (initialSnapshot.current === null) {
-    initialSnapshot.current = JSON.stringify(computeInitialValues());
+    initialSnapshot.current = deepClone(computeInitialValues());
   }
   const formValues = values != null ? values : internalValues;
+  const formErrors = controlledErrors != null ? controlledErrors : internalErrors;
   const currentStep = controlledStep != null ? controlledStep : internalStep;
   const isLoading = controlledLoading != null ? controlledLoading : internalLoading;
   const isMultiStep = Array.isArray(steps) && steps.length > 0;
+  const formValuesRef = (0, import_react.useRef)(formValues);
+  const formErrorsRef = (0, import_react.useRef)(formErrors);
+  const draftValuesRef = (0, import_react.useRef)(null);
+  formValuesRef.current = formValues;
+  formErrorsRef.current = formErrors;
+  const fieldByName = (0, import_react.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const field of fields) map.set(field.name, field);
+    return map;
+  }, [fields]);
+  const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
+  const configWarningsRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  const warnConfig = (0, import_react.useCallback)((message) => {
+    if (!isDev) return;
+    if (configWarningsRef.current.has(message)) return;
+    configWarningsRef.current.add(message);
+    if (typeof console !== "undefined" && console.warn) {
+      console.warn(`[FormBuilder] ${message}`);
+    }
+  }, [isDev]);
+  const replaceErrors = (0, import_react.useCallback)(
+    (nextErrors) => {
+      if (controlledErrors == null) setInternalErrors(nextErrors);
+      if (onValidationChange) onValidationChange(nextErrors);
+    },
+    [controlledErrors, onValidationChange]
+  );
+  const updateErrors = (0, import_react.useCallback)(
+    (newErrors) => {
+      const mergeErrors = (base) => {
+        const merged = { ...base, ...newErrors };
+        for (const key of Object.keys(newErrors)) {
+          if (newErrors[key] === null || newErrors[key] === void 0) {
+            delete merged[key];
+          }
+        }
+        return merged;
+      };
+      if (controlledErrors != null) {
+        const merged = mergeErrors(formErrorsRef.current || {});
+        if (onValidationChange) onValidationChange(merged);
+        return;
+      }
+      setInternalErrors((prev) => {
+        const merged = mergeErrors(prev);
+        if (onValidationChange) onValidationChange(merged);
+        return merged;
+      });
+    },
+    [controlledErrors, onValidationChange]
+  );
+  const getFieldEmptyValue = (0, import_react.useCallback)(
+    (field) => {
+      const plugin = fieldTypes && fieldTypes[field.type];
+      return plugin && plugin.getEmptyValue ? plugin.getEmptyValue() : getEmptyValue(field);
+    },
+    [fieldTypes]
+  );
+  const getRowKey = (0, import_react.useCallback)((fieldName, row, index) => {
+    if (!row || typeof row !== "object") return `${fieldName}-idx-${index}`;
+    if (!rowKeyRef.current.has(row)) {
+      rowKeyCounterRef.current += 1;
+      rowKeyRef.current.set(row, `${fieldName}-row-${rowKeyCounterRef.current}`);
+    }
+    return rowKeyRef.current.get(row);
+  }, []);
   (0, import_react.useEffect)(() => {
     return () => {
       for (const timer of debounceTimersRef.current.values()) clearTimeout(timer);
+      for (const timer of inputDebounceRef.current.values()) clearTimeout(timer);
+      for (const controller of asyncAbortRef.current.values()) controller.abort();
+      if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
     };
   }, []);
   const isDirty = (0, import_react.useMemo)(() => {
-    return JSON.stringify(formValues) !== initialSnapshot.current;
+    return !deepEqual(formValues, initialSnapshot.current);
   }, [formValues]);
   const prevDirtyRef = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
@@ -280,36 +592,129 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     }
   }, [isDirty, onDirtyChange]);
   const autoSaveTimerRef = (0, import_react.useRef)(null);
+  const autoSaveRef = (0, import_react.useRef)(autoSave);
+  autoSaveRef.current = autoSave;
+  const prevAutoSaveValues = (0, import_react.useRef)(deepClone(formValues));
   (0, import_react.useEffect)(() => {
-    if (!autoSave || !autoSave.onAutoSave || !isDirty) return;
+    const cfg = autoSaveRef.current;
+    if (!cfg || !cfg.onAutoSave || !isDirty) return;
+    if (deepEqual(prevAutoSaveValues.current, formValues)) return;
+    prevAutoSaveValues.current = deepClone(formValues);
     if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
     autoSaveTimerRef.current = setTimeout(() => {
       autoSaveTimerRef.current = null;
-      autoSave.onAutoSave(formValues);
-    }, autoSave.debounce || 1e3);
+      autoSaveRef.current.onAutoSave(formValues);
+    }, cfg.debounce || 1e3);
     return () => {
       if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
     };
-  }, [formValues, isDirty, autoSave]);
-  const visibleFields = (0, import_react.useMemo)(() => {
-    let filtered = fields.filter((f) => {
+  }, [formValues, isDirty]);
+  const allVisibleFields = (0, import_react.useMemo)(() => {
+    return fields.filter((f) => {
       if (f.visible && !f.visible(formValues)) return false;
       return true;
     });
+  }, [fields, formValues]);
+  const visibleFields = (0, import_react.useMemo)(() => {
+    let filtered = allVisibleFields;
     if (isMultiStep && steps[currentStep] && steps[currentStep].fields) {
       const stepFieldNames = new Set(steps[currentStep].fields);
       filtered = filtered.filter((f) => stepFieldNames.has(f.name));
     }
     return filtered;
-  }, [fields, formValues, isMultiStep, steps, currentStep]);
+  }, [allVisibleFields, isMultiStep, steps, currentStep]);
+  (0, import_react.useEffect)(() => {
+    const nameSet = new Set(fields.map((f) => f.name));
+    if (nameSet.size !== fields.length) {
+      warnConfig("Duplicate field names detected. Field names must be unique.");
+    }
+    for (const field of fields) {
+      const parentName = getDependsOnName(field);
+      if (parentName && !nameSet.has(parentName)) {
+        warnConfig(`Field "${field.name}" depends on missing field "${parentName}".`);
+      }
+    }
+    if (steps) {
+      for (let i = 0; i < steps.length; i++) {
+        const step = steps[i];
+        if (!step.fields) continue;
+        for (const fieldName of step.fields) {
+          if (!nameSet.has(fieldName)) {
+            warnConfig(`Step ${i + 1} references missing field "${fieldName}".`);
+          }
+        }
+      }
+    }
+    if (layout) {
+      for (const row of layout) {
+        for (const entry of row) {
+          const fieldName = typeof entry === "string" ? entry : entry.field;
+          if (!nameSet.has(fieldName)) {
+            warnConfig(`Layout references missing field "${fieldName}".`);
+          }
+        }
+      }
+    }
+    if (sections) {
+      for (const section of sections) {
+        for (const fieldName of section.fields || []) {
+          if (!nameSet.has(fieldName)) {
+            warnConfig(`Section "${section.id}" references missing field "${fieldName}".`);
+          }
+        }
+      }
+    }
+  }, [fields, steps, layout, sections, warnConfig]);
+  const validateRepeaterField = (0, import_react.useCallback)(
+    (field, value, allValues) => {
+      const errors = {};
+      const rows = Array.isArray(value) ? value : [];
+      const subFields = field.fields || [];
+      let firstSubError = null;
+      if (resolveRequired(field, allValues) && rows.length === 0) {
+        const requiredError = `${field.label} is required`;
+        errors[field.name] = requiredError;
+        return { errors, hasErrors: true };
+      }
+      if (typeof field.min === "number" && rows.length < field.min) {
+        errors[field.name] = `Must have at least ${field.min} ${field.min === 1 ? "row" : "rows"}`;
+      } else if (typeof field.max === "number" && rows.length > field.max) {
+        errors[field.name] = `Must have no more than ${field.max} ${field.max === 1 ? "row" : "rows"}`;
+      }
+      rows.forEach((row, rowIdx) => {
+        const rowValues = { ...allValues, [field.name]: rows };
+        subFields.forEach((subField) => {
+          if (subField.visible && !subField.visible(rowValues)) return;
+          const err = runValidators(row == null ? void 0 : row[subField.name], subField, rowValues, fieldTypes);
+          if (!err) return;
+          const key = getRepeaterErrorKey(field.name, rowIdx, subField.name);
+          errors[key] = err;
+          if (!firstSubError) firstSubError = { row: rowIdx + 1, message: err };
+        });
+      });
+      if (!errors[field.name] && firstSubError) {
+        errors[field.name] = `Row ${firstSubError.row}: ${firstSubError.message}`;
+      }
+      return { errors, hasErrors: Object.keys(errors).length > 0 };
+    },
+    [fieldTypes]
+  );
   const validateField = (0, import_react.useCallback)(
     (name, value) => {
-      const field = fields.find((f) => f.name === name);
+      const field = fieldByName.get(name);
       if (!field) return null;
       if (field.visible && !field.visible(formValues)) return null;
+      if (field.type === "repeater") {
+        const repeaterResult = validateRepeaterField(
+          field,
+          value != null ? value : formValues[name],
+          formValues
+        );
+        return repeaterResult.errors[name] || null;
+      }
       return runValidators(value != null ? value : formValues[name], field, formValues, fieldTypes);
     },
-    [fields, formValues, fieldTypes]
+    [fieldByName, formValues, validateRepeaterField, fieldTypes]
   );
   const validateVisibleFields = (0, import_react.useCallback)(
     (fieldSubset) => {
@@ -317,6 +722,14 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       const errors = {};
       let hasErrors = false;
       for (const field of toValidate) {
+        if (field.type === "repeater") {
+          const repeaterResult = validateRepeaterField(field, formValues[field.name], formValues);
+          if (repeaterResult.hasErrors) {
+            Object.assign(errors, repeaterResult.errors);
+            hasErrors = true;
+          }
+          continue;
+        }
         const err = runValidators(formValues[field.name], field, formValues, fieldTypes);
         if (err) {
           errors[field.name] = err;
@@ -325,64 +738,87 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues]
-  );
-  const updateErrors = (0, import_react.useCallback)(
-    (newErrors) => {
-      setInternalErrors((prev) => {
-        const merged = { ...prev, ...newErrors };
-        for (const key of Object.keys(merged)) {
-          if (newErrors[key] === null || newErrors[key] === void 0) {
-            delete merged[key];
-          }
-        }
-        if (onValidationChange) onValidationChange(merged);
-        return merged;
-      });
-    },
-    [onValidationChange]
+    [visibleFields, formValues, validateRepeaterField, fieldTypes]
   );
   const runAsyncValidation = (0, import_react.useCallback)(
     (name, value) => {
-      const field = fields.find((f) => f.name === name);
-      if (!field || !field.validate) return;
+      const field = fieldByName.get(name);
+      if (!field || field.type === "repeater") return null;
       const val = value != null ? value : formValues[name];
-      const syncError = runValidators(val, field, formValues, fieldTypes);
-      if (syncError) return;
-      const result = field.validate(val, formValues);
-      if (!result || typeof result.then !== "function") return;
-      const validationPromise = result.then(
-        (asyncResult) => {
-          if (asyncValidationRef.current.get(name) !== validationPromise) return;
+      const syncError = runValidators(val, field, formValues, fieldTypes, { includeCustomValidators: false });
+      const prevController = asyncAbortRef.current.get(name);
+      if (prevController) prevController.abort();
+      asyncAbortRef.current.delete(name);
+      setValidatingFields((prev) => {
+        if (!prev[name]) return prev;
+        const next = { ...prev };
+        delete next[name];
+        return next;
+      });
+      if (syncError) return null;
+      const version = (asyncValidationVersionRef.current.get(name) || 0) + 1;
+      asyncValidationVersionRef.current.set(name, version);
+      const controller = typeof AbortController !== "undefined" ? new AbortController() : null;
+      if (controller) asyncAbortRef.current.set(name, controller);
+      let asyncPromises;
+      try {
+        asyncPromises = collectAsyncValidatorPromises(
+          val,
+          field,
+          formValues,
+          controller ? { signal: controller.signal } : void 0
+        );
+      } catch (err) {
+        updateErrors({ [name]: (err == null ? void 0 : err.message) || "Validation failed" });
+        return null;
+      }
+      if (asyncPromises.length === 0) {
+        asyncAbortRef.current.delete(name);
+        return null;
+      }
+      const validationPromise = Promise.all(asyncPromises).then(
+        (results) => {
+          if (asyncValidationVersionRef.current.get(name) !== version) return;
           asyncValidationRef.current.delete(name);
+          asyncAbortRef.current.delete(name);
           setValidatingFields((prev) => {
             const next = { ...prev };
             delete next[name];
             return next;
           });
-          const err = asyncResult !== true && asyncResult ? asyncResult : null;
+          let err = null;
+          for (const result of results) {
+            const normalized = normalizeValidatorResult(result);
+            if (normalized) {
+              err = normalized;
+              break;
+            }
+          }
           updateErrors({ [name]: err });
         },
         (rejection) => {
-          if (asyncValidationRef.current.get(name) !== validationPromise) return;
+          if (asyncValidationVersionRef.current.get(name) !== version) return;
           asyncValidationRef.current.delete(name);
+          asyncAbortRef.current.delete(name);
           setValidatingFields((prev) => {
             const next = { ...prev };
             delete next[name];
             return next;
           });
+          if (rejection && rejection.name === "AbortError") return;
           updateErrors({ [name]: (rejection == null ? void 0 : rejection.message) || "Validation failed" });
         }
       );
       asyncValidationRef.current.set(name, validationPromise);
       setValidatingFields((prev) => ({ ...prev, [name]: true }));
+      return validationPromise;
     },
-    [fields, formValues, updateErrors]
+    [fieldByName, formValues, fieldTypes, updateErrors]
   );
   const triggerAsyncValidation = (0, import_react.useCallback)(
     (name, value) => {
-      const field = fields.find((f) => f.name === name);
-      if (!field || !field.validate) return;
+      const field = fieldByName.get(name);
+      if (!field || field.type === "repeater") return;
       const debounceMs = field.validateDebounce;
       if (debounceMs && debounceMs > 0) {
         const existing = debounceTimersRef.current.get(name);
@@ -396,44 +832,93 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         runAsyncValidation(name, value);
       }
     },
-    [fields, runAsyncValidation]
+    [fieldByName, runAsyncValidation]
   );
-  const setFieldValueSilent = (0, import_react.useCallback)(
-    (name, value) => {
+  const commitValues = (0, import_react.useCallback)(
+    (nextValues) => {
+      formValuesRef.current = nextValues;
       if (values != null) {
-        if (onChange) onChange({ ...formValues, [name]: value });
+        if (onChange) onChange(nextValues);
       } else {
-        setInternalValues((prev) => ({ ...prev, [name]: value }));
+        setInternalValues(nextValues);
       }
     },
-    [values, onChange, formValues]
+    [values, onChange]
+  );
+  const setFieldValueSilent = (0, import_react.useCallback)(
+    (name, value) => {
+      const base = draftValuesRef.current || formValuesRef.current || {};
+      const nextValues = { ...base, [name]: value };
+      draftValuesRef.current = nextValues;
+      commitValues(nextValues);
+    },
+    [commitValues]
   );
   const handleFieldChange = (0, import_react.useCallback)(
     (name, value) => {
-      const newValues = { ...formValues, [name]: value };
-      if (values != null) {
-        if (onChange) onChange(newValues);
-      } else {
-        setInternalValues(newValues);
+      const newValues = { ...formValuesRef.current, [name]: value };
+      const queue = [name];
+      const visited = /* @__PURE__ */ new Set();
+      const clearedErrors = {};
+      while (queue.length > 0) {
+        const current = queue.shift();
+        if (!current || visited.has(current)) continue;
+        visited.add(current);
+        fields.forEach((dep) => {
+          const parentName = getDependsOnName(dep);
+          if (parentName !== current || dep.name === current) return;
+          if (!dep.options) return;
+          const depOptions = resolveOptions(dep, newValues);
+          const depValue = newValues[dep.name];
+          if (depValue == null || depValue === "") return;
+          const validValues = new Set(depOptions.map((o) => o.value));
+          let nextDepValue = depValue;
+          let changed = false;
+          if (Array.isArray(depValue)) {
+            const filtered = depValue.filter((v) => validValues.has(v));
+            if (filtered.length !== depValue.length) {
+              nextDepValue = filtered;
+              changed = true;
+            }
+          } else if (!validValues.has(depValue)) {
+            nextDepValue = getFieldEmptyValue(dep);
+            changed = true;
+          }
+          if (changed) {
+            newValues[dep.name] = nextDepValue;
+            queue.push(dep.name);
+            if (formErrorsRef.current[dep.name] != null) {
+              clearedErrors[dep.name] = null;
+            }
+          }
+        });
       }
-      if (onFieldChange) onFieldChange(name, value, newValues);
-      if (internalErrors[name]) {
-        updateErrors({ [name]: null });
+      if (formErrorsRef.current[name] != null) {
+        clearedErrors[name] = null;
+      }
+      for (const key of Object.keys(formErrorsRef.current)) {
+        if (key.startsWith(`${name}[`)) {
+          clearedErrors[key] = null;
+        }
       }
-      const field = fields.find((f) => f.name === name);
+      draftValuesRef.current = newValues;
+      commitValues(newValues);
+      if (onFieldChange) onFieldChange(name, value, newValues);
+      if (Object.keys(clearedErrors).length > 0) updateErrors(clearedErrors);
+      const field = fieldByName.get(name);
       if (field && field.onFieldChange) {
         field.onFieldChange(value, newValues, {
           setFieldValue: setFieldValueSilent,
           setFieldError: (fieldName, message) => updateErrors({ [fieldName]: message })
         });
       }
+      draftValuesRef.current = null;
     },
-    [formValues, values, onChange, onFieldChange, internalErrors, updateErrors, fields, setFieldValueSilent]
+    [fields, getFieldEmptyValue, commitValues, onFieldChange, updateErrors, fieldByName, setFieldValueSilent]
   );
-  const inputDebounceRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   const handleDebouncedFieldChange = (0, import_react.useCallback)(
     (name, value) => {
-      const field = fields.find((f) => f.name === name);
+      const field = fieldByName.get(name);
       const debounceMs = field && field.debounce;
       if (debounceMs && debounceMs > 0) {
         const existing = inputDebounceRef.current.get(name);
@@ -447,26 +932,24 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         handleFieldChange(name, value);
       }
     },
-    [fields, handleFieldChange]
+    [fieldByName, handleFieldChange]
   );
   const handleFieldInput = (0, import_react.useCallback)(
     (name, value) => {
-      if (validateOnChange) {
-        const err = validateField(name, value);
-        updateErrors({ [name]: err });
-      }
+      if (!validateOnChange) return;
+      const err = validateField(name, value);
+      updateErrors({ [name]: err });
     },
     [validateOnChange, validateField, updateErrors]
   );
   const handleFieldBlur = (0, import_react.useCallback)(
     (name, value) => {
-      setTouchedFields((prev) => ({ ...prev, [name]: true }));
-      if (validateOnBlur) {
-        const err = validateField(name, value != null ? value : formValues[name]);
-        updateErrors({ [name]: err });
-        if (!err) {
-          triggerAsyncValidation(name, value != null ? value : formValues[name]);
-        }
+      if (!validateOnBlur) return;
+      const resolvedValue = value != null ? value : formValues[name];
+      const err = validateField(name, resolvedValue);
+      updateErrors({ [name]: err });
+      if (!err) {
+        triggerAsyncValidation(name, resolvedValue);
       }
     },
     [validateOnBlur, validateField, updateErrors, formValues, triggerAsyncValidation]
@@ -475,30 +958,33 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     async (e) => {
       if (e && e.preventDefault) e.preventDefault();
       if (validateOnSubmit) {
-        const allVisible = fields.filter((f) => !f.visible || f.visible(formValues));
-        const { errors, hasErrors } = validateVisibleFields(allVisible);
+        const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
         if (hasErrors) {
-          setInternalErrors(errors);
-          if (onValidationChange) onValidationChange(errors);
+          replaceErrors(errors);
           return;
         }
-        if (asyncValidationRef.current.size > 0) {
-          await Promise.all(asyncValidationRef.current.values());
-          const currentErrors = { ...internalErrors };
-          const hasAsyncErrors = Object.keys(currentErrors).length > 0;
-          if (hasAsyncErrors) return;
+        const asyncSubmitValidations = allVisibleFields.map((field) => runAsyncValidation(field.name, formValues[field.name])).filter(Boolean);
+        if (asyncSubmitValidations.length > 0 || asyncValidationRef.current.size > 0) {
+          const pendingValidations = [
+            .../* @__PURE__ */ new Set([
+              ...asyncSubmitValidations,
+              ...Array.from(asyncValidationRef.current.values())
+            ])
+          ];
+          await Promise.all(pendingValidations);
+          if (fieldSetHasErrors(formErrorsRef.current, allVisibleFields)) return;
         }
       }
       const reset = () => {
         const fresh = computeInitialValues();
         if (values == null) setInternalValues(fresh);
-        setInternalErrors({});
-        setTouchedFields({});
-        initialSnapshot.current = JSON.stringify(fresh);
+        replaceErrors({});
+        initialSnapshot.current = deepClone(fresh);
+        prevAutoSaveValues.current = deepClone(fresh);
       };
       const rawValues = {};
       for (const key of Object.keys(formValues)) {
-        const f = fields.find((fd) => fd.name === key);
+        const f = fieldByName.get(key);
         if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList")) continue;
         rawValues[key] = formValues[key];
       }
@@ -522,25 +1008,34 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         if (controlledLoading == null) setInternalLoading(false);
       }
     },
-    [validateOnSubmit, fields, formValues, validateVisibleFields, onValidationChange, onSubmit, values, controlledLoading, internalErrors, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, runAsyncValidation]
   );
-  const handleNext = (0, import_react.useCallback)(() => {
+  const handleNext = (0, import_react.useCallback)(async () => {
     if (!isMultiStep) return;
     if (validateStepOnNext && steps[currentStep] && steps[currentStep].fields) {
-      const stepFields = fields.filter(
-        (f) => steps[currentStep].fields.includes(f.name) && (!f.visible || f.visible(formValues))
-      );
+      const stepFieldNames = new Set(steps[currentStep].fields);
+      const stepFields = allVisibleFields.filter((f) => stepFieldNames.has(f.name));
       const { errors, hasErrors } = validateVisibleFields(stepFields);
       if (hasErrors) {
-        setInternalErrors((prev) => ({ ...prev, ...errors }));
-        if (onValidationChange) onValidationChange({ ...internalErrors, ...errors });
+        replaceErrors({ ...formErrorsRef.current, ...errors });
         return;
       }
+      const asyncStepValidations = stepFields.map((field) => runAsyncValidation(field.name, formValues[field.name])).filter(Boolean);
+      if (asyncStepValidations.length > 0 || asyncValidationRef.current.size > 0) {
+        const pendingValidations = [
+          .../* @__PURE__ */ new Set([
+            ...asyncStepValidations,
+            ...Array.from(asyncValidationRef.current.values())
+          ])
+        ];
+        await Promise.all(pendingValidations);
+        if (fieldSetHasErrors(formErrorsRef.current, stepFields)) return;
+      }
     }
     if (steps[currentStep] && steps[currentStep].validate) {
       const result = steps[currentStep].validate(formValues);
       if (result !== true && result) {
-        setInternalErrors((prev) => ({ ...prev, ...result }));
+        replaceErrors({ ...formErrorsRef.current, ...result });
         return;
       }
     }
@@ -550,7 +1045,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     } else {
       setInternalStep(nextStep);
     }
-  }, [isMultiStep, validateStepOnNext, steps, currentStep, fields, formValues, validateVisibleFields, onValidationChange, internalErrors, controlledStep, onStepChange]);
+  }, [isMultiStep, validateStepOnNext, steps, currentStep, formValues, validateVisibleFields, controlledStep, onStepChange, replaceErrors, allVisibleFields, runAsyncValidation]);
   const handleBack = (0, import_react.useCallback)(() => {
     if (!isMultiStep) return;
     const prevStep = Math.max(currentStep - 1, 0);
@@ -575,33 +1070,56 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   (0, import_react.useImperativeHandle)(ref, () => ({
     submit: handleSubmit,
     validate: () => {
-      const allVisible = fields.filter((f) => !f.visible || f.visible(formValues));
-      const { errors, hasErrors } = validateVisibleFields(allVisible);
-      setInternalErrors(errors);
+      const { errors, hasErrors } = validateVisibleFields(allVisibleFields);
+      replaceErrors(errors);
       return { valid: !hasErrors, errors };
     },
     reset: () => {
       const fresh = computeInitialValues();
       if (values == null) setInternalValues(fresh);
-      setInternalErrors({});
-      setTouchedFields({});
-      initialSnapshot.current = JSON.stringify(fresh);
+      replaceErrors({});
+      initialSnapshot.current = deepClone(fresh);
+      prevAutoSaveValues.current = deepClone(fresh);
     },
     getValues: () => formValues,
     isDirty: () => isDirty,
     setFieldValue: (name, value) => handleFieldChange(name, value),
     setFieldError: (name, message) => updateErrors({ [name]: message }),
     setErrors: (errors) => {
-      setInternalErrors(errors);
-      if (onValidationChange) onValidationChange(errors);
+      replaceErrors(errors);
     }
   }));
+  const setRepeaterSubFieldError = (0, import_react.useCallback)(
+    (fieldName, rowIdx, subFieldName, errorMessage) => {
+      const key = getRepeaterErrorKey(fieldName, rowIdx, subFieldName);
+      const merged = { ...formErrorsRef.current };
+      if (errorMessage) {
+        merged[key] = errorMessage;
+      } else {
+        delete merged[key];
+      }
+      const subErrors = Object.keys(merged).filter((k) => k.startsWith(`${fieldName}[`)).map((k) => {
+        const match = k.match(/\[(\d+)\]\./);
+        const row = match ? Number(match[1]) : Number.MAX_SAFE_INTEGER;
+        return { key: k, row };
+      }).sort((a, b) => a.row - b.row);
+      if (subErrors.length > 0) {
+        const first = subErrors[0];
+        merged[fieldName] = `Row ${first.row + 1}: ${merged[first.key]}`;
+      } else if (!merged[fieldName] || merged[fieldName].startsWith("Row ")) {
+        delete merged[fieldName];
+      }
+      replaceErrors(merged);
+    },
+    [replaceErrors]
+  );
   const renderField = (field) => {
     const fieldValue = formValues[field.name];
-    const fieldError = internalErrors[field.name] || null;
+    const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
-    const isReadOnly = field.readOnly || disabled || formReadOnly;
+    const isReadOnly = field.readOnly || formReadOnly;
+    const isDisabled = disabled || field.disabled || formReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display") {
       if (field.render) {
@@ -660,6 +1178,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       tooltip: field.tooltip,
       required: isRequired,
       readOnly: isReadOnly,
+      disabled: isDisabled,
       error: hasError,
       validationMessage: fieldError || void 0,
       ...field.loading || validatingFields[field.name] ? { loading: true } : {},
@@ -792,6 +1311,9 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             maxValidationMessage: field.maxValidationMessage,
             onChange: (v) => {
               handleFieldChange(field.name, { ...fieldValue, date: v, time: timeVal });
+            },
+            onBlur: (v) => {
+              handleFieldBlur(field.name, { ...fieldValue, date: v, time: timeVal });
             }
           }
         )), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1 }, /* @__PURE__ */ import_react.default.createElement(
@@ -802,12 +1324,16 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             description: field.description,
             tooltip: field.tooltip,
             readOnly: isReadOnly,
+            disabled: isDisabled,
             error: hasError,
             value: timeVal,
             interval: field.interval,
             timezone: field.timezone,
             onChange: (v) => {
               handleFieldChange(field.name, { ...fieldValue, date: dateVal, time: v });
+            },
+            onBlur: (v) => {
+              handleFieldBlur(field.name, { ...fieldValue, date: dateVal, time: v });
             }
           }
         )));
@@ -845,6 +1371,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             textChecked: field.textChecked,
             textUnchecked: field.textUnchecked,
             readonly: isReadOnly,
+            disabled: isDisabled,
             onChange: fieldOnChange,
             ...field.fieldProps || {}
           }
@@ -857,6 +1384,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
             checked: !!fieldValue,
             description: field.description,
             readOnly: isReadOnly,
+            disabled: isDisabled,
             inline: field.inline,
             variant: field.variant,
             onChange: fieldOnChange,
@@ -893,61 +1421,140 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       case "repeater": {
         const rows = Array.isArray(fieldValue) ? fieldValue : [];
         const subFields = field.fields || [];
-        const minRows = field.min || 0;
-        const maxRows = field.max || Infinity;
-        const canAdd = rows.length < maxRows && !isReadOnly;
-        const canRemove = rows.length > minRows && !isReadOnly;
+        const minRows = typeof field.min === "number" ? field.min : 0;
+        const maxRows = typeof field.max === "number" ? field.max : Infinity;
+        const repeaterProps = field.repeaterProps || {};
+        const renderAddControl = repeaterProps.renderAdd;
+        const renderRemoveControl = repeaterProps.renderRemove;
+        const renderMoveUpControl = repeaterProps.renderMoveUp;
+        const renderMoveDownControl = repeaterProps.renderMoveDown;
+        const addLabel = repeaterProps.addLabel || "Add";
+        const removeLabel = repeaterProps.removeLabel || "Remove";
+        const moveUpLabel = repeaterProps.moveUpLabel || "Up";
+        const moveDownLabel = repeaterProps.moveDownLabel || "Down";
+        const canEditRows = !isReadOnly && !isDisabled;
+        const canAdd = rows.length < maxRows && canEditRows;
+        const canRemove = rows.length > minRows && canEditRows;
+        const canReorder = !!repeaterProps.reorderable && canEditRows;
+        const repeaterHasNestedErrors = Object.keys(formErrors).some(
+          (k) => k.startsWith(`${field.name}[`)
+        );
+        const firstNestedErrorKey = Object.keys(formErrors).find(
+          (k) => k.startsWith(`${field.name}[`)
+        );
+        const repeaterErrorMessage = fieldError || (firstNestedErrorKey ? formErrors[firstNestedErrorKey] : null);
+        const repeaterHasError = !!fieldError || repeaterHasNestedErrors;
         const addRow = () => {
           const emptyRow = {};
           for (const sf of subFields) {
-            emptyRow[sf.name] = sf.defaultValue !== void 0 ? sf.defaultValue : getEmptyValue(sf);
+            emptyRow[sf.name] = sf.defaultValue !== void 0 ? sf.defaultValue : getFieldEmptyValue(sf);
           }
           handleFieldChange(field.name, [...rows, emptyRow]);
         };
         const removeRow = (idx) => {
           handleFieldChange(field.name, rows.filter((_, i) => i !== idx));
         };
-        const updateRow = (idx, subName, subValue) => {
+        const moveRow = (fromIndex, toIndex) => {
+          if (toIndex < 0 || toIndex >= rows.length || toIndex === fromIndex) return;
+          const updated = [...rows];
+          const [moved] = updated.splice(fromIndex, 1);
+          updated.splice(toIndex, 0, moved);
+          handleFieldChange(field.name, updated);
+        };
+        const validateSubField = (rowIdx, subField, subValue, nextRows) => {
+          const rowValues = { ...formValues, [field.name]: nextRows };
+          const err = runValidators(subValue, subField, rowValues, fieldTypes);
+          setRepeaterSubFieldError(field.name, rowIdx, subField.name, err);
+        };
+        const handleSubFieldChange = (rowIdx, subField, subValue) => {
           const updated = rows.map(
-            (row, i) => i === idx ? { ...row, [subName]: subValue } : row
+            (row, i) => i === rowIdx ? { ...row, [subField.name]: subValue } : row
           );
           handleFieldChange(field.name, updated);
+          if (validateOnChange) {
+            validateSubField(rowIdx, subField, subValue, updated);
+          }
+        };
+        const handleSubFieldBlur = (rowIdx, subField, subValue) => {
+          if (!validateOnBlur) return;
+          const nextRows = rows.map(
+            (row, i) => i === rowIdx ? { ...row, [subField.name]: subValue } : row
+          );
+          validateSubField(rowIdx, subField, subValue, nextRows);
         };
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, field.label, isRequired ? " *" : ""), field.description && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, field.description), rows.map((row, rowIdx) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: rowIdx, direction: "row", gap: "xs", align: "end" }, subFields.map((sf) => {
+        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, field.label, isRequired ? " *" : ""), field.description && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, field.description), rows.map((row, rowIdx) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: getRowKey(field.name, row, rowIdx), direction: "row", gap: "xs", align: "end" }, subFields.map((sf) => {
           const sfValue = row[sf.name];
           const sfLabel = rowIdx === 0 ? sf.label : void 0;
-          const sfOptions = resolveOptions(sf, formValues);
+          const sfOptions = resolveOptions(sf, { ...formValues, [field.name]: rows });
+          const sfError = formErrors[getRepeaterErrorKey(field.name, rowIdx, sf.name)] || null;
           const sfProps = {
             name: `${field.name}-${rowIdx}-${sf.name}`,
             label: sfLabel,
             placeholder: sf.placeholder,
-            readOnly: isReadOnly,
+            readOnly: sf.readOnly || isReadOnly,
+            disabled: sf.disabled || isDisabled,
+            error: !!sfError,
+            validationMessage: sfError || void 0,
             ...sf.fieldProps || {}
           };
           let sfElement;
           switch (sf.type) {
             case "select":
-              sfElement = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Select, { ...sfProps, value: sfValue, options: sfOptions, onChange: (v) => updateRow(rowIdx, sf.name, v) });
+              sfElement = /* @__PURE__ */ import_react.default.createElement(
+                import_ui_extensions.Select,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  options: sfOptions,
+                  onChange: (v) => handleSubFieldChange(rowIdx, sf, v),
+                  onBlur: (v) => handleSubFieldBlur(rowIdx, sf, v)
+                }
+              );
               break;
             case "number":
-              sfElement = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.NumberInput, { ...sfProps, value: sfValue, onChange: (v) => updateRow(rowIdx, sf.name, v) });
+              sfElement = /* @__PURE__ */ import_react.default.createElement(
+                import_ui_extensions.NumberInput,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  onChange: (v) => handleSubFieldChange(rowIdx, sf, v),
+                  onBlur: (v) => handleSubFieldBlur(rowIdx, sf, v)
+                }
+              );
               break;
             case "checkbox":
-              sfElement = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Checkbox, { ...sfProps, checked: !!sfValue, onChange: (v) => updateRow(rowIdx, sf.name, v) }, sf.label);
+              sfElement = /* @__PURE__ */ import_react.default.createElement(
+                import_ui_extensions.Checkbox,
+                {
+                  ...sfProps,
+                  checked: !!sfValue,
+                  onChange: (v) => handleSubFieldChange(rowIdx, sf, v),
+                  onBlur: (v) => handleSubFieldBlur(rowIdx, sf, v)
+                },
+                sf.label
+              );
               break;
             default:
-              sfElement = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Input, { ...sfProps, value: sfValue || "", onChange: (v) => updateRow(rowIdx, sf.name, v) });
+              sfElement = /* @__PURE__ */ import_react.default.createElement(
+                import_ui_extensions.Input,
+                {
+                  ...sfProps,
+                  value: sfValue || "",
+                  onChange: (v) => handleSubFieldChange(rowIdx, sf, v),
+                  onBlur: (v) => handleSubFieldBlur(rowIdx, sf, v)
+                }
+              );
           }
           return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { key: sf.name, flex: 1 }, sfElement);
-        }), canRemove && /* @__PURE__ */ import_react.default.createElement(
+        }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Inline, { gap: "xs" }, canReorder && rowIdx > 0 && (renderMoveUpControl ? renderMoveUpControl({ index: rowIdx, onClick: () => moveRow(rowIdx, rowIdx - 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", onClick: () => moveRow(rowIdx, rowIdx - 1) }, moveUpLabel)), canReorder && rowIdx < rows.length - 1 && (renderMoveDownControl ? renderMoveDownControl({ index: rowIdx, onClick: () => moveRow(rowIdx, rowIdx + 1) }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", onClick: () => moveRow(rowIdx, rowIdx + 1) }, moveDownLabel)), canRemove && (renderRemoveControl ? renderRemoveControl({ index: rowIdx, onClick: () => removeRow(rowIdx) }) : /* @__PURE__ */ import_react.default.createElement(
           import_ui_extensions.Button,
           {
             variant: "secondary",
-            size: "xs",
+            size: "md",
             onClick: () => removeRow(rowIdx)
           },
-          "Remove"
-        ))), canAdd && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", size: "sm", onClick: addRow }, "+ Add"), hasError && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, fieldError));
+          removeLabel
+        ))))), canAdd && (renderAddControl ? renderAddControl({ onClick: addRow, count: rows.length }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { onClick: addRow }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "flush" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "add" }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, addLabel)))), repeaterHasError && repeaterErrorMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, repeaterErrorMessage));
       }
       default:
         return /* @__PURE__ */ import_react.default.createElement(
@@ -967,15 +1574,17 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     if (field.width === "full" && columns > 1) return columns;
     return 1;
   };
-  const getDependents = (parentField) => visibleFields.filter((f) => f.dependsOn === parentField.name && f.name !== parentField.name);
-  const isDependent = (field) => field.dependsOn && visibleFields.some((f) => f.name === field.dependsOn && f.name !== field.name);
+  const getDependents = (parentField) => visibleFields.filter(
+    (f) => getDependsOnName(f) === parentField.name && f.name !== parentField.name && getDependsOnDisplay(f) === "grouped"
+  );
+  const isDependent = (field) => getDependsOnName(field) && getDependsOnDisplay(field) === "grouped" && visibleFields.some((f) => f.name === getDependsOnName(field) && f.name !== field.name);
   const renderDependentGroup = (parentField, dependents) => {
-    const firstWithLabel = dependents.find((f) => f.dependsOnLabel) || dependents[0];
-    const firstWithMessage = dependents.find((f) => f.dependsOnMessage) || dependents[0];
-    const groupLabel = firstWithLabel.dependsOnLabel || "Dependent properties";
-    const rawMessage = firstWithMessage.dependsOnMessage;
+    const firstWithLabel = dependents.find((f) => getDependsOnLabel(f)) || dependents[0];
+    const firstWithMessage = dependents.find((f) => getDependsOnMessage(f)) || dependents[0];
+    const groupLabel = getDependsOnLabel(firstWithLabel) || "Dependent properties";
+    const rawMessage = getDependsOnMessage(firstWithMessage);
     const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
-    return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tooltip, null, tooltipMessage) }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "info" })))), dependents.map((dep) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: dep.name }, renderField(dep)))));
+    return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tooltip, null, tooltipMessage) }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "info" })))), renderFieldSubset(dependents)));
   };
   const renderGridLayout = (fieldSubset) => {
     const fieldList = fieldSubset || visibleFields;
@@ -1068,7 +1677,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     let i = 0;
     while (i < fieldList.length) {
       const field = fieldList[i];
-      if (field.width === "half" && i + 1 < fieldList.length && fieldList[i + 1].width === "half" && !field.dependsOn) {
+      if (field.width === "half" && i + 1 < fieldList.length && fieldList[i + 1].width === "half" && !getDependsOnName(field)) {
         rows.push({ type: "pair", fields: [fieldList[i], fieldList[i + 1]] });
         i += 2;
       } else {
@@ -1104,9 +1713,12 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     let batch = [];
     const flushBatch = () => {
       if (batch.length === 0) return;
-      elements.push(
-        /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.AutoGrid, { key: `ag-${batch[0].name}`, columnWidth, flexible: true, gap }, batch.map((f) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: f.name }, renderField(f))))
-      );
+      const chunks = maxColumns ? Array.from({ length: Math.ceil(batch.length / maxColumns) }, (_, i) => batch.slice(i * maxColumns, i * maxColumns + maxColumns)) : [batch];
+      for (const chunk of chunks) {
+        elements.push(
+          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.AutoGrid, { key: `ag-${chunk[0].name}`, columnWidth, flexible: true, gap }, chunk.map((f) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: f.name }, renderField(f))))
+        );
+      }
       batch = [];
     };
     for (const field of fieldList) {
@@ -1189,7 +1801,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       );
       if (sec.info) {
         elements.push(
-          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: sec.id, direction: "row", align: "start", gap: "flush" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1 }, accordion), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { overlay: /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tooltip, null, sec.info) }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "info", size: "sm", screenReaderText: sec.info })))
+          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: sec.id, direction: "row", align: "start", justify: "start", gap: "flush" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1 }, accordion), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { variant: "dark", overlay: /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tooltip, null, sec.info) }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "info", size: "sm", screenReaderText: sec.info })))
         );
       } else {
         elements.push(accordion);
@@ -1217,8 +1829,30 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
     if (submitPosition === "none" || formReadOnly) return null;
     const isLastStep = !isMultiStep || currentStep === steps.length - 1;
     const isFirstStep = !isMultiStep || currentStep === 0;
+    const buttonContext = {
+      isMultiStep,
+      isFirstStep,
+      isLastStep,
+      currentStep,
+      totalSteps: isMultiStep ? steps.length : 1,
+      disabled,
+      loading: isLoading,
+      labels: {
+        submit: submitButtonLabel,
+        cancel: cancelButtonLabel,
+        back: backButtonLabel,
+        next: nextButtonLabel
+      },
+      onBack: handleBack,
+      onNext: handleNext,
+      onCancel,
+      onSubmit: handleSubmit
+    };
+    if (renderButtonsProp) {
+      return renderButtonsProp(buttonContext);
+    }
     if (isMultiStep) {
-      return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "between", align: "center" }, !isFirstStep ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", onClick: handleBack, disabled }, "Back") : showCancel ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", onClick: onCancel, disabled }, cancelLabel) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, " "), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Inline, { gap: "small" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, "Step ", currentStep + 1, " of ", steps.length), isLastStep ? /* @__PURE__ */ import_react.default.createElement(
+      return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "between", align: "center" }, !isFirstStep ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", onClick: handleBack, disabled }, backButtonLabel) : showCancel ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, " "), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Inline, { gap: "small" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy" }, "Step ", currentStep + 1, " of ", steps.length), isLastStep ? /* @__PURE__ */ import_react.default.createElement(
         import_ui_extensions.LoadingButton,
         {
           variant: submitVariant,
@@ -1226,10 +1860,10 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
           onClick: handleSubmit,
           disabled
         },
-        submitLabel
-      ) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "primary", onClick: handleNext, disabled }, "Next")));
+        submitButtonLabel
+      ) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "primary", onClick: handleNext, disabled }, nextButtonLabel)));
     }
-    return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: showCancel ? "between" : "start", gap: "sm" }, showCancel && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", onClick: onCancel, disabled }, cancelLabel), /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: showCancel ? "between" : "start", gap: "sm" }, showCancel && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ import_react.default.createElement(
       import_ui_extensions.LoadingButton,
       {
         variant: submitVariant,
@@ -1238,7 +1872,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
         onClick: noFormWrapper ? handleSubmit : void 0,
         disabled
       },
-      submitLabel
+      submitButtonLabel
     ));
   };
   const formContent = /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, isMultiStep && showStepIndicator && /* @__PURE__ */ import_react.default.createElement(
@@ -1247,7 +1881,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       currentStep,
       stepNames: steps.map((s) => s.title)
     }
-  ), formReadOnly && readOnlyMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: "Read Only", variant: "warning" }, readOnlyMessage), formError && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: "Error", variant: "danger" }, typeof formError === "string" ? formError : void 0), formSuccess && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: "Success", variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
+  ), formReadOnly && readOnlyMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage), !addAlert && formError && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), !addAlert && formSuccess && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: successTitle, variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
     values: formValues,
     goNext: handleNext,
     goBack: handleBack,
@@ -1259,7 +1893,15 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
   if (noFormWrapper) {
     return formContent;
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Form, { onSubmit: handleSubmit, autoComplete: props.autoComplete }, formContent);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_ui_extensions.Form,
+    {
+      ...formProps || {},
+      onSubmit: handleSubmit,
+      autoComplete
+    },
+    formContent
+  );
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {