hs-uix 1.0.0

package/dist/form.mjs

@@ -0,0 +1,1271 @@
+// packages/form/src/FormBuilder.jsx
+import React, {
+  useState,
+  useRef,
+  useMemo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  forwardRef
+} from "react";
+import {
+  Accordion,
+  Form,
+  Flex,
+  Box,
+  AutoGrid,
+  Tile,
+  Inline,
+  Text,
+  Link,
+  Icon,
+  Divider,
+  Button,
+  LoadingButton,
+  Alert,
+  Tooltip,
+  StepIndicator,
+  Input,
+  TextArea,
+  Select,
+  MultiSelect,
+  NumberInput,
+  StepperInput,
+  CurrencyInput,
+  DateInput,
+  TimeInput,
+  Toggle,
+  Checkbox,
+  ToggleGroup
+} from "@hubspot/ui-extensions";
+import {
+  CrmPropertyList,
+  CrmAssociationPropertyList
+} from "@hubspot/ui-extensions/crm";
+var getEmptyValue = (field) => {
+  switch (field.type) {
+    case "toggle":
+    case "checkbox":
+      return false;
+    case "multiselect":
+    case "checkboxGroup":
+      return [];
+    case "number":
+    case "stepper":
+    case "currency":
+      return void 0;
+    case "date":
+    case "time":
+    case "datetime":
+      return void 0;
+    case "display":
+    case "crmPropertyList":
+    case "crmAssociationPropertyList":
+      return void 0;
+    // these field types have no form value
+    case "repeater":
+      return [];
+    default:
+      return "";
+  }
+};
+var isValueEmpty = (value, field) => {
+  if (value === void 0 || value === null) return true;
+  if (typeof value === "string" && value.trim() === "") return true;
+  if (Array.isArray(value) && value.length === 0) return true;
+  if ((field.type === "toggle" || field.type === "checkbox") && value === false) return true;
+  return false;
+};
+var runValidators = (value, field, allValues, fieldTypes) => {
+  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") return null;
+  const isRequired = resolveRequired(field, allValues);
+  const plugin = fieldTypes && fieldTypes[field.type];
+  const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
+  if (isRequired && empty) {
+    return `${field.label} is required`;
+  }
+  if (empty) return null;
+  if (field.pattern && typeof value === "string") {
+    if (!field.pattern.test(value)) {
+      return field.patternMessage || "Invalid format";
+    }
+  }
+  if (typeof value === "string") {
+    if (field.minLength != null && value.length < field.minLength) {
+      return `Must be at least ${field.minLength} characters`;
+    }
+    if (field.maxLength != null && value.length > field.maxLength) {
+      return `Must be no more than ${field.maxLength} characters`;
+    }
+  }
+  if (typeof value === "number") {
+    if (field.min != null && value < field.min) {
+      return `Must be at least ${field.min}`;
+    }
+    if (field.max != null && value > field.max) {
+      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;
+  }
+  return null;
+};
+var resolveRequired = (field, allValues) => {
+  if (typeof field.required === "function") return field.required(allValues);
+  return !!field.required;
+};
+var resolveOptions = (field, allValues) => {
+  if (typeof field.options === "function") return field.options(allValues);
+  return field.options || [];
+};
+var useFormPrefill = (properties, mapping) => {
+  return useMemo(() => {
+    if (!properties) return {};
+    if (!mapping) {
+      const result2 = {};
+      for (const [key, value] of Object.entries(properties)) {
+        if (value !== void 0) result2[key] = value;
+      }
+      return result2;
+    }
+    const result = {};
+    for (const [formField, crmProp] of Object.entries(mapping)) {
+      if (properties[crmProp] !== void 0) {
+        result[formField] = properties[crmProp];
+      }
+    }
+    return result;
+  }, [properties, mapping]);
+};
+var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
+  const {
+    fields,
+    // FormBuilderField[] — field definitions
+    onSubmit,
+    // (values, { reset, rawValues }) => void | Promise
+    transformValues,
+    // (values) => values — reshape before submit
+    onBeforeSubmit,
+    // (values) => boolean | Promise<boolean> — intercept submit
+    onSubmitSuccess,
+    // (result, { reset, values }) => void
+    onSubmitError,
+    // (error, { values }) => void
+    resetOnSuccess = false
+    // auto-reset after successful submit
+  } = props;
+  const {
+    initialValues,
+    // Record<string, unknown> — starting values (uncontrolled)
+    values,
+    // Record<string, unknown> — controlled values
+    onChange,
+    // (values) => void — called on any field change (controlled)
+    onFieldChange
+    // (name, value, allValues) => void — per-field change callback
+  } = props;
+  const {
+    validateOnChange = false,
+    // validate on keystroke (onInput)
+    validateOnBlur = true,
+    // validate on blur
+    validateOnSubmit = true,
+    // validate all before onSubmit
+    onValidationChange
+    // (errors) => void
+  } = props;
+  const {
+    steps,
+    // FormBuilderStep[] — enables multi-step mode
+    step: controlledStep,
+    // number — controlled current step (0-based)
+    onStepChange,
+    // (step) => void
+    showStepIndicator = true,
+    // show StepIndicator component
+    validateStepOnNext = true
+    // validate current step fields before Next
+  } = props;
+  const {
+    submitLabel = "Submit",
+    // submit button text
+    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
+    // disable entire form
+  } = props;
+  const {
+    columns = 1,
+    // number of grid columns (1 = full-width stack)
+    columnWidth,
+    // AutoGrid columnWidth — responsive layout (overrides columns)
+    layout,
+    // explicit row layout array (overrides columns + columnWidth)
+    sections,
+    // FormBuilderSection[] — accordion field grouping
+    gap = "sm",
+    // gap between fields
+    showRequiredIndicator = true,
+    // show * on required fields
+    noFormWrapper = false,
+    // skip HubSpot <Form> wrapper
+    fieldTypes
+    // Record<string, FieldTypePlugin> — custom field type registry
+  } = props;
+  const {
+    error: formError,
+    // string | boolean — form-level error alert
+    success: formSuccess,
+    // string — form-level success alert
+    readOnly: formReadOnly = false,
+    // boolean — lock all fields
+    readOnlyMessage
+    // string — warning alert when readOnly
+  } = props;
+  const {
+    onDirtyChange,
+    // (isDirty: boolean) => void
+    autoSave
+    // { debounce: number, onAutoSave: (values) => void }
+  } = props;
+  const computeInitialValues = () => {
+    const vals = {};
+    for (const field of fields) {
+      if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
+      const plugin = fieldTypes && fieldTypes[field.type];
+      const emptyValue = plugin && plugin.getEmptyValue ? plugin.getEmptyValue() : getEmptyValue(field);
+      const init = initialValues && initialValues[field.name] !== void 0 ? initialValues[field.name] : field.defaultValue !== void 0 ? field.defaultValue : emptyValue;
+      vals[field.name] = init;
+    }
+    return vals;
+  };
+  const [internalValues, setInternalValues] = useState(computeInitialValues);
+  const [internalErrors, setInternalErrors] = useState({});
+  const [internalStep, setInternalStep] = useState(0);
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [touchedFields, setTouchedFields] = useState({});
+  const [validatingFields, setValidatingFields] = useState({});
+  const asyncValidationRef = useRef(/* @__PURE__ */ new Map());
+  const debounceTimersRef = useRef(/* @__PURE__ */ new Map());
+  const initialSnapshot = useRef(null);
+  if (initialSnapshot.current === null) {
+    initialSnapshot.current = JSON.stringify(computeInitialValues());
+  }
+  const formValues = values != null ? values : internalValues;
+  const currentStep = controlledStep != null ? controlledStep : internalStep;
+  const isLoading = controlledLoading != null ? controlledLoading : internalLoading;
+  const isMultiStep = Array.isArray(steps) && steps.length > 0;
+  useEffect(() => {
+    return () => {
+      for (const timer of debounceTimersRef.current.values()) clearTimeout(timer);
+    };
+  }, []);
+  const isDirty = useMemo(() => {
+    return JSON.stringify(formValues) !== initialSnapshot.current;
+  }, [formValues]);
+  const prevDirtyRef = useRef(false);
+  useEffect(() => {
+    if (isDirty !== prevDirtyRef.current) {
+      prevDirtyRef.current = isDirty;
+      if (onDirtyChange) onDirtyChange(isDirty);
+    }
+  }, [isDirty, onDirtyChange]);
+  const autoSaveTimerRef = useRef(null);
+  useEffect(() => {
+    if (!autoSave || !autoSave.onAutoSave || !isDirty) return;
+    if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+    autoSaveTimerRef.current = setTimeout(() => {
+      autoSaveTimerRef.current = null;
+      autoSave.onAutoSave(formValues);
+    }, autoSave.debounce || 1e3);
+    return () => {
+      if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+    };
+  }, [formValues, isDirty, autoSave]);
+  const visibleFields = useMemo(() => {
+    let filtered = fields.filter((f) => {
+      if (f.visible && !f.visible(formValues)) return false;
+      return true;
+    });
+    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]);
+  const validateField = useCallback(
+    (name, value) => {
+      const field = fields.find((f) => f.name === name);
+      if (!field) return null;
+      if (field.visible && !field.visible(formValues)) return null;
+      return runValidators(value != null ? value : formValues[name], field, formValues, fieldTypes);
+    },
+    [fields, formValues, fieldTypes]
+  );
+  const validateVisibleFields = useCallback(
+    (fieldSubset) => {
+      const toValidate = fieldSubset || visibleFields;
+      const errors = {};
+      let hasErrors = false;
+      for (const field of toValidate) {
+        const err = runValidators(formValues[field.name], field, formValues, fieldTypes);
+        if (err) {
+          errors[field.name] = err;
+          hasErrors = true;
+        }
+      }
+      return { errors, hasErrors };
+    },
+    [visibleFields, formValues]
+  );
+  const updateErrors = 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]
+  );
+  const runAsyncValidation = useCallback(
+    (name, value) => {
+      const field = fields.find((f) => f.name === name);
+      if (!field || !field.validate) return;
+      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;
+          asyncValidationRef.current.delete(name);
+          setValidatingFields((prev) => {
+            const next = { ...prev };
+            delete next[name];
+            return next;
+          });
+          const err = asyncResult !== true && asyncResult ? asyncResult : null;
+          updateErrors({ [name]: err });
+        },
+        (rejection) => {
+          if (asyncValidationRef.current.get(name) !== validationPromise) return;
+          asyncValidationRef.current.delete(name);
+          setValidatingFields((prev) => {
+            const next = { ...prev };
+            delete next[name];
+            return next;
+          });
+          updateErrors({ [name]: (rejection == null ? void 0 : rejection.message) || "Validation failed" });
+        }
+      );
+      asyncValidationRef.current.set(name, validationPromise);
+      setValidatingFields((prev) => ({ ...prev, [name]: true }));
+    },
+    [fields, formValues, updateErrors]
+  );
+  const triggerAsyncValidation = useCallback(
+    (name, value) => {
+      const field = fields.find((f) => f.name === name);
+      if (!field || !field.validate) return;
+      const debounceMs = field.validateDebounce;
+      if (debounceMs && debounceMs > 0) {
+        const existing = debounceTimersRef.current.get(name);
+        if (existing) clearTimeout(existing);
+        const timer = setTimeout(() => {
+          debounceTimersRef.current.delete(name);
+          runAsyncValidation(name, value);
+        }, debounceMs);
+        debounceTimersRef.current.set(name, timer);
+      } else {
+        runAsyncValidation(name, value);
+      }
+    },
+    [fields, runAsyncValidation]
+  );
+  const setFieldValueSilent = useCallback(
+    (name, value) => {
+      if (values != null) {
+        if (onChange) onChange({ ...formValues, [name]: value });
+      } else {
+        setInternalValues((prev) => ({ ...prev, [name]: value }));
+      }
+    },
+    [values, onChange, formValues]
+  );
+  const handleFieldChange = useCallback(
+    (name, value) => {
+      const newValues = { ...formValues, [name]: value };
+      if (values != null) {
+        if (onChange) onChange(newValues);
+      } else {
+        setInternalValues(newValues);
+      }
+      if (onFieldChange) onFieldChange(name, value, newValues);
+      if (internalErrors[name]) {
+        updateErrors({ [name]: null });
+      }
+      const field = fields.find((f) => f.name === name);
+      if (field && field.onFieldChange) {
+        field.onFieldChange(value, newValues, {
+          setFieldValue: setFieldValueSilent,
+          setFieldError: (fieldName, message) => updateErrors({ [fieldName]: message })
+        });
+      }
+    },
+    [formValues, values, onChange, onFieldChange, internalErrors, updateErrors, fields, setFieldValueSilent]
+  );
+  const inputDebounceRef = useRef(/* @__PURE__ */ new Map());
+  const handleDebouncedFieldChange = useCallback(
+    (name, value) => {
+      const field = fields.find((f) => f.name === name);
+      const debounceMs = field && field.debounce;
+      if (debounceMs && debounceMs > 0) {
+        const existing = inputDebounceRef.current.get(name);
+        if (existing) clearTimeout(existing);
+        const timer = setTimeout(() => {
+          inputDebounceRef.current.delete(name);
+          handleFieldChange(name, value);
+        }, debounceMs);
+        inputDebounceRef.current.set(name, timer);
+      } else {
+        handleFieldChange(name, value);
+      }
+    },
+    [fields, handleFieldChange]
+  );
+  const handleFieldInput = useCallback(
+    (name, value) => {
+      if (validateOnChange) {
+        const err = validateField(name, value);
+        updateErrors({ [name]: err });
+      }
+    },
+    [validateOnChange, validateField, updateErrors]
+  );
+  const handleFieldBlur = 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]);
+        }
+      }
+    },
+    [validateOnBlur, validateField, updateErrors, formValues, triggerAsyncValidation]
+  );
+  const handleSubmit = useCallback(
+    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);
+        if (hasErrors) {
+          setInternalErrors(errors);
+          if (onValidationChange) onValidationChange(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 reset = () => {
+        const fresh = computeInitialValues();
+        if (values == null) setInternalValues(fresh);
+        setInternalErrors({});
+        setTouchedFields({});
+        initialSnapshot.current = JSON.stringify(fresh);
+      };
+      const rawValues = {};
+      for (const key of Object.keys(formValues)) {
+        const f = fields.find((fd) => fd.name === key);
+        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList")) continue;
+        rawValues[key] = formValues[key];
+      }
+      const submitValues = transformValues ? transformValues(rawValues) : rawValues;
+      if (onBeforeSubmit) {
+        const proceed = await onBeforeSubmit(submitValues);
+        if (proceed === false) return;
+      }
+      if (controlledLoading == null) setInternalLoading(true);
+      try {
+        const result = await onSubmit(submitValues, { reset, rawValues });
+        if (resetOnSuccess) reset();
+        if (onSubmitSuccess) onSubmitSuccess(result, { reset, values: submitValues });
+      } catch (err) {
+        if (onSubmitError) {
+          onSubmitError(err, { values: submitValues });
+        } else {
+          throw err;
+        }
+      } finally {
+        if (controlledLoading == null) setInternalLoading(false);
+      }
+    },
+    [validateOnSubmit, fields, formValues, validateVisibleFields, onValidationChange, onSubmit, values, controlledLoading, internalErrors, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess]
+  );
+  const handleNext = useCallback(() => {
+    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 { errors, hasErrors } = validateVisibleFields(stepFields);
+      if (hasErrors) {
+        setInternalErrors((prev) => ({ ...prev, ...errors }));
+        if (onValidationChange) onValidationChange({ ...internalErrors, ...errors });
+        return;
+      }
+    }
+    if (steps[currentStep] && steps[currentStep].validate) {
+      const result = steps[currentStep].validate(formValues);
+      if (result !== true && result) {
+        setInternalErrors((prev) => ({ ...prev, ...result }));
+        return;
+      }
+    }
+    const nextStep = Math.min(currentStep + 1, steps.length - 1);
+    if (controlledStep != null) {
+      if (onStepChange) onStepChange(nextStep);
+    } else {
+      setInternalStep(nextStep);
+    }
+  }, [isMultiStep, validateStepOnNext, steps, currentStep, fields, formValues, validateVisibleFields, onValidationChange, internalErrors, controlledStep, onStepChange]);
+  const handleBack = useCallback(() => {
+    if (!isMultiStep) return;
+    const prevStep = Math.max(currentStep - 1, 0);
+    if (controlledStep != null) {
+      if (onStepChange) onStepChange(prevStep);
+    } else {
+      setInternalStep(prevStep);
+    }
+  }, [isMultiStep, currentStep, controlledStep, onStepChange]);
+  const handleGoTo = useCallback(
+    (stepIndex) => {
+      if (!isMultiStep) return;
+      const clamped = Math.max(0, Math.min(stepIndex, steps.length - 1));
+      if (controlledStep != null) {
+        if (onStepChange) onStepChange(clamped);
+      } else {
+        setInternalStep(clamped);
+      }
+    },
+    [isMultiStep, steps, controlledStep, onStepChange]
+  );
+  useImperativeHandle(ref, () => ({
+    submit: handleSubmit,
+    validate: () => {
+      const allVisible = fields.filter((f) => !f.visible || f.visible(formValues));
+      const { errors, hasErrors } = validateVisibleFields(allVisible);
+      setInternalErrors(errors);
+      return { valid: !hasErrors, errors };
+    },
+    reset: () => {
+      const fresh = computeInitialValues();
+      if (values == null) setInternalValues(fresh);
+      setInternalErrors({});
+      setTouchedFields({});
+      initialSnapshot.current = JSON.stringify(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);
+    }
+  }));
+  const renderField = (field) => {
+    const fieldValue = formValues[field.name];
+    const fieldError = internalErrors[field.name] || null;
+    const hasError = !!fieldError;
+    const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
+    const isReadOnly = field.readOnly || disabled || formReadOnly;
+    const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
+    if (field.type === "display") {
+      if (field.render) {
+        return field.render({ allValues: formValues });
+      }
+      return null;
+    }
+    if (field.type === "crmPropertyList") {
+      return /* @__PURE__ */ React.createElement(
+        CrmPropertyList,
+        {
+          properties: field.properties,
+          direction: field.direction,
+          ...field.objectId ? { objectId: field.objectId } : {},
+          ...field.objectTypeId ? { objectTypeId: field.objectTypeId } : {},
+          ...field.fieldProps || {}
+        }
+      );
+    }
+    if (field.type === "crmAssociationPropertyList") {
+      return /* @__PURE__ */ React.createElement(
+        CrmAssociationPropertyList,
+        {
+          objectTypeId: field.objectTypeId,
+          properties: field.properties,
+          ...field.associationLabels ? { associationLabels: field.associationLabels } : {},
+          ...field.filters ? { filters: field.filters } : {},
+          ...field.sort ? { sort: field.sort } : {},
+          ...field.fieldProps || {}
+        }
+      );
+    }
+    if (field.render) {
+      return field.render({
+        value: fieldValue,
+        onChange: fieldOnChange,
+        error: hasError,
+        allValues: formValues
+      });
+    }
+    const plugin = fieldTypes && fieldTypes[field.type];
+    if (plugin && plugin.render) {
+      return plugin.render({
+        value: fieldValue,
+        onChange: fieldOnChange,
+        error: hasError,
+        field,
+        allValues: formValues
+      });
+    }
+    const commonProps = {
+      name: field.name,
+      label: field.label,
+      description: field.description,
+      placeholder: field.placeholder,
+      tooltip: field.tooltip,
+      required: isRequired,
+      readOnly: isReadOnly,
+      error: hasError,
+      validationMessage: fieldError || void 0,
+      ...field.loading || validatingFields[field.name] ? { loading: true } : {},
+      ...field.fieldProps || {}
+    };
+    const options = resolveOptions(field, formValues);
+    switch (field.type) {
+      case "text":
+      case "password":
+        return /* @__PURE__ */ React.createElement(
+          Input,
+          {
+            ...commonProps,
+            type: field.type === "password" ? "password" : "text",
+            value: fieldValue || "",
+            onChange: fieldOnChange,
+            onInput: (v) => handleFieldInput(field.name, v),
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "textarea":
+        return /* @__PURE__ */ React.createElement(
+          TextArea,
+          {
+            ...commonProps,
+            value: fieldValue || "",
+            rows: field.rows,
+            cols: field.cols,
+            resize: field.resize,
+            maxLength: field.maxLength,
+            onChange: fieldOnChange,
+            onInput: (v) => handleFieldInput(field.name, v),
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "number":
+        return /* @__PURE__ */ React.createElement(
+          NumberInput,
+          {
+            ...commonProps,
+            value: fieldValue,
+            min: field.min,
+            max: field.max,
+            precision: field.precision,
+            formatStyle: field.formatStyle,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "stepper":
+        return /* @__PURE__ */ React.createElement(
+          StepperInput,
+          {
+            ...commonProps,
+            value: fieldValue,
+            min: field.min,
+            max: field.max,
+            precision: field.precision,
+            formatStyle: field.formatStyle,
+            stepSize: field.stepSize,
+            minValueReachedTooltip: field.minValueReachedTooltip,
+            maxValueReachedTooltip: field.maxValueReachedTooltip,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "currency":
+        return /* @__PURE__ */ React.createElement(
+          CurrencyInput,
+          {
+            ...commonProps,
+            currency: field.currency || "USD",
+            value: fieldValue,
+            min: field.min,
+            max: field.max,
+            precision: field.precision,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ React.createElement(
+          DateInput,
+          {
+            ...commonProps,
+            value: fieldValue,
+            format: field.format,
+            min: field.min,
+            max: field.max,
+            timezone: field.timezone,
+            clearButtonLabel: field.clearButtonLabel,
+            todayButtonLabel: field.todayButtonLabel,
+            minValidationMessage: field.minValidationMessage,
+            maxValidationMessage: field.maxValidationMessage,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "time":
+        return /* @__PURE__ */ React.createElement(
+          TimeInput,
+          {
+            ...commonProps,
+            value: fieldValue,
+            interval: field.interval,
+            min: field.min,
+            max: field.max,
+            timezone: field.timezone,
+            onChange: fieldOnChange,
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+      case "datetime": {
+        const dateVal = fieldValue ? fieldValue.date || fieldValue : void 0;
+        const timeVal = fieldValue ? fieldValue.time || void 0 : void 0;
+        return /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 1 }, /* @__PURE__ */ React.createElement(
+          DateInput,
+          {
+            ...commonProps,
+            name: `${field.name}-date`,
+            label: field.label,
+            format: field.format,
+            value: dateVal,
+            min: field.min,
+            max: field.max,
+            timezone: field.timezone,
+            clearButtonLabel: field.clearButtonLabel,
+            todayButtonLabel: field.todayButtonLabel,
+            minValidationMessage: field.minValidationMessage,
+            maxValidationMessage: field.maxValidationMessage,
+            onChange: (v) => {
+              handleFieldChange(field.name, { ...fieldValue, date: v, time: timeVal });
+            }
+          }
+        )), /* @__PURE__ */ React.createElement(Box, { flex: 1 }, /* @__PURE__ */ React.createElement(
+          TimeInput,
+          {
+            name: `${field.name}-time`,
+            label: "Time",
+            description: field.description,
+            tooltip: field.tooltip,
+            readOnly: isReadOnly,
+            error: hasError,
+            value: timeVal,
+            interval: field.interval,
+            timezone: field.timezone,
+            onChange: (v) => {
+              handleFieldChange(field.name, { ...fieldValue, date: dateVal, time: v });
+            }
+          }
+        )));
+      }
+      case "select":
+        return /* @__PURE__ */ React.createElement(
+          Select,
+          {
+            ...commonProps,
+            value: fieldValue,
+            options,
+            variant: field.variant,
+            onChange: fieldOnChange
+          }
+        );
+      case "multiselect":
+        return /* @__PURE__ */ React.createElement(
+          MultiSelect,
+          {
+            ...commonProps,
+            value: fieldValue || [],
+            options,
+            onChange: fieldOnChange
+          }
+        );
+      case "toggle":
+        return /* @__PURE__ */ React.createElement(
+          Toggle,
+          {
+            name: field.name,
+            label: field.label,
+            checked: !!fieldValue,
+            size: field.size || "md",
+            labelDisplay: field.labelDisplay || "top",
+            textChecked: field.textChecked,
+            textUnchecked: field.textUnchecked,
+            readonly: isReadOnly,
+            onChange: fieldOnChange,
+            ...field.fieldProps || {}
+          }
+        );
+      case "checkbox":
+        return /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            name: field.name,
+            checked: !!fieldValue,
+            description: field.description,
+            readOnly: isReadOnly,
+            inline: field.inline,
+            variant: field.variant,
+            onChange: fieldOnChange,
+            ...field.fieldProps || {}
+          },
+          field.label
+        );
+      case "checkboxGroup":
+        return /* @__PURE__ */ React.createElement(
+          ToggleGroup,
+          {
+            ...commonProps,
+            toggleType: "checkboxList",
+            value: fieldValue || [],
+            options,
+            inline: field.inline,
+            variant: field.variant,
+            onChange: fieldOnChange
+          }
+        );
+      case "radioGroup":
+        return /* @__PURE__ */ React.createElement(
+          ToggleGroup,
+          {
+            ...commonProps,
+            toggleType: "radioButtonList",
+            value: fieldValue,
+            options,
+            inline: field.inline,
+            variant: field.variant,
+            onChange: fieldOnChange
+          }
+        );
+      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 addRow = () => {
+          const emptyRow = {};
+          for (const sf of subFields) {
+            emptyRow[sf.name] = sf.defaultValue !== void 0 ? sf.defaultValue : getEmptyValue(sf);
+          }
+          handleFieldChange(field.name, [...rows, emptyRow]);
+        };
+        const removeRow = (idx) => {
+          handleFieldChange(field.name, rows.filter((_, i) => i !== idx));
+        };
+        const updateRow = (idx, subName, subValue) => {
+          const updated = rows.map(
+            (row, i) => i === idx ? { ...row, [subName]: subValue } : row
+          );
+          handleFieldChange(field.name, updated);
+        };
+        return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, field.label, isRequired ? " *" : ""), field.description && /* @__PURE__ */ React.createElement(Text, { variant: "microcopy" }, field.description), rows.map((row, rowIdx) => /* @__PURE__ */ React.createElement(Flex, { key: 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 sfProps = {
+            name: `${field.name}-${rowIdx}-${sf.name}`,
+            label: sfLabel,
+            placeholder: sf.placeholder,
+            readOnly: isReadOnly,
+            ...sf.fieldProps || {}
+          };
+          let sfElement;
+          switch (sf.type) {
+            case "select":
+              sfElement = /* @__PURE__ */ React.createElement(Select, { ...sfProps, value: sfValue, options: sfOptions, onChange: (v) => updateRow(rowIdx, sf.name, v) });
+              break;
+            case "number":
+              sfElement = /* @__PURE__ */ React.createElement(NumberInput, { ...sfProps, value: sfValue, onChange: (v) => updateRow(rowIdx, sf.name, v) });
+              break;
+            case "checkbox":
+              sfElement = /* @__PURE__ */ React.createElement(Checkbox, { ...sfProps, checked: !!sfValue, onChange: (v) => updateRow(rowIdx, sf.name, v) }, sf.label);
+              break;
+            default:
+              sfElement = /* @__PURE__ */ React.createElement(Input, { ...sfProps, value: sfValue || "", onChange: (v) => updateRow(rowIdx, sf.name, v) });
+          }
+          return /* @__PURE__ */ React.createElement(Box, { key: sf.name, flex: 1 }, sfElement);
+        }), canRemove && /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            variant: "secondary",
+            size: "xs",
+            onClick: () => removeRow(rowIdx)
+          },
+          "Remove"
+        ))), canAdd && /* @__PURE__ */ React.createElement(Button, { variant: "secondary", size: "sm", onClick: addRow }, "+ Add"), hasError && /* @__PURE__ */ React.createElement(Text, { variant: "microcopy" }, fieldError));
+      }
+      default:
+        return /* @__PURE__ */ React.createElement(
+          Input,
+          {
+            ...commonProps,
+            value: fieldValue || "",
+            onChange: fieldOnChange,
+            onInput: (v) => handleFieldInput(field.name, v),
+            onBlur: (v) => handleFieldBlur(field.name, v)
+          }
+        );
+    }
+  };
+  const getFieldColSpan = (field) => {
+    if (field.colSpan != null) return Math.min(field.colSpan, columns);
+    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 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 tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
+    return /* @__PURE__ */ React.createElement(Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ React.createElement(Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React.createElement(Tooltip, null, tooltipMessage) }, /* @__PURE__ */ React.createElement(Icon, { name: "info" })))), dependents.map((dep) => /* @__PURE__ */ React.createElement(React.Fragment, { key: dep.name }, renderField(dep)))));
+  };
+  const renderGridLayout = (fieldSubset) => {
+    const fieldList = fieldSubset || visibleFields;
+    const elements = [];
+    let currentRow = [];
+    let currentRowSpan = 0;
+    const flushRow = () => {
+      if (currentRow.length === 0) return;
+      const totalSpan = currentRow.reduce((s, f) => s + getFieldColSpan(f), 0);
+      const remainder = columns - totalSpan;
+      elements.push(
+        /* @__PURE__ */ React.createElement(Flex, { key: `row-${currentRow[0].name}`, direction: "row", gap }, currentRow.map((f) => /* @__PURE__ */ React.createElement(Box, { key: f.name, flex: getFieldColSpan(f) }, renderField(f))), remainder > 0 && /* @__PURE__ */ React.createElement(Box, { flex: remainder }))
+      );
+      currentRow = [];
+      currentRowSpan = 0;
+    };
+    for (const field of fieldList) {
+      if (isDependent(field)) continue;
+      const span = getFieldColSpan(field);
+      if (span >= columns) {
+        flushRow();
+        elements.push(
+          /* @__PURE__ */ React.createElement(React.Fragment, { key: field.name }, renderField(field))
+        );
+      } else {
+        if (currentRowSpan + span > columns) flushRow();
+        currentRow.push(field);
+        currentRowSpan += span;
+        if (currentRowSpan >= columns) flushRow();
+      }
+      const dependents = getDependents(field);
+      if (dependents.length > 0) {
+        flushRow();
+        elements.push(renderDependentGroup(field, dependents));
+      }
+    }
+    flushRow();
+    return elements;
+  };
+  const renderExplicitLayout = () => {
+    const elements = [];
+    const renderedNames = /* @__PURE__ */ new Set();
+    for (let rowIdx = 0; rowIdx < layout.length; rowIdx++) {
+      const row = layout[rowIdx];
+      const rowFields = [];
+      for (const entry of row) {
+        const fieldName = typeof entry === "string" ? entry : entry.field;
+        const flexValue = typeof entry === "string" ? 1 : entry.flex || 1;
+        const field = visibleFields.find((f) => f.name === fieldName);
+        if (!field) continue;
+        rowFields.push({ field, flex: flexValue });
+        renderedNames.add(fieldName);
+      }
+      if (rowFields.length === 0) continue;
+      if (rowFields.length === 1) {
+        elements.push(
+          /* @__PURE__ */ React.createElement(React.Fragment, { key: rowFields[0].field.name }, renderField(rowFields[0].field))
+        );
+      } else {
+        elements.push(
+          /* @__PURE__ */ React.createElement(Flex, { key: `layout-row-${rowIdx}`, direction: "row", gap }, rowFields.map(({ field, flex }) => /* @__PURE__ */ React.createElement(Box, { key: field.name, flex }, renderField(field))))
+        );
+      }
+      for (const { field } of rowFields) {
+        const dependents = getDependents(field).filter((d) => !renderedNames.has(d.name));
+        if (dependents.length > 0) {
+          elements.push(renderDependentGroup(field, dependents));
+          for (const dep of dependents) renderedNames.add(dep.name);
+        }
+      }
+    }
+    for (const field of visibleFields) {
+      if (renderedNames.has(field.name)) continue;
+      if (isDependent(field)) continue;
+      elements.push(
+        /* @__PURE__ */ React.createElement(React.Fragment, { key: field.name }, renderField(field))
+      );
+      renderedNames.add(field.name);
+      const dependents = getDependents(field).filter((d) => !renderedNames.has(d.name));
+      if (dependents.length > 0) {
+        elements.push(renderDependentGroup(field, dependents));
+        for (const dep of dependents) renderedNames.add(dep.name);
+      }
+    }
+    return elements;
+  };
+  const renderLegacyLayout = (fieldSubset) => {
+    const fieldList = fieldSubset || visibleFields;
+    const rows = [];
+    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) {
+        rows.push({ type: "pair", fields: [fieldList[i], fieldList[i + 1]] });
+        i += 2;
+      } else {
+        rows.push({ type: "single", field });
+        i++;
+      }
+    }
+    const elements = [];
+    const processedDeps = /* @__PURE__ */ new Set();
+    for (const row of rows) {
+      if (row.type === "pair") {
+        elements.push(
+          /* @__PURE__ */ React.createElement(Flex, { key: `pair-${row.fields[0].name}`, direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 1 }, renderField(row.fields[0])), /* @__PURE__ */ React.createElement(Box, { flex: 1 }, renderField(row.fields[1])))
+        );
+      } else {
+        const field = row.field;
+        if (processedDeps.has(field.name)) continue;
+        elements.push(
+          /* @__PURE__ */ React.createElement(React.Fragment, { key: field.name }, renderField(field))
+        );
+        const dependents = getDependents(field);
+        if (dependents.length > 0) {
+          for (const dep of dependents) processedDeps.add(dep.name);
+          elements.push(renderDependentGroup(field, dependents));
+        }
+      }
+    }
+    return elements;
+  };
+  const renderAutoGridLayout = (fieldSubset) => {
+    const fieldList = fieldSubset || visibleFields;
+    const elements = [];
+    let batch = [];
+    const flushBatch = () => {
+      if (batch.length === 0) return;
+      elements.push(
+        /* @__PURE__ */ React.createElement(AutoGrid, { key: `ag-${batch[0].name}`, columnWidth, flexible: true, gap }, batch.map((f) => /* @__PURE__ */ React.createElement(React.Fragment, { key: f.name }, renderField(f))))
+      );
+      batch = [];
+    };
+    for (const field of fieldList) {
+      if (isDependent(field)) continue;
+      batch.push(field);
+      const dependents = getDependents(field);
+      if (dependents.length > 0) {
+        flushBatch();
+        elements.push(renderDependentGroup(field, dependents));
+      }
+    }
+    flushBatch();
+    return elements;
+  };
+  const wrapWithGroups = (fieldList, renderFn) => {
+    const hasGroups = fieldList.some((f) => f.group);
+    if (!hasGroups) return renderFn(fieldList);
+    const chunks = [];
+    let currentGroup = void 0;
+    let currentChunk = [];
+    for (const field of fieldList) {
+      const fieldGroup = field.group || void 0;
+      if (fieldGroup !== currentGroup && currentChunk.length > 0) {
+        chunks.push({ group: currentGroup, fields: [...currentChunk] });
+        currentChunk = [];
+      }
+      currentGroup = fieldGroup;
+      currentChunk.push(field);
+    }
+    if (currentChunk.length > 0) {
+      chunks.push({ group: currentGroup, fields: currentChunk });
+    }
+    const elements = [];
+    for (let i = 0; i < chunks.length; i++) {
+      const chunk = chunks[i];
+      if (i > 0) {
+        elements.push(/* @__PURE__ */ React.createElement(Divider, { key: `group-div-${i}` }));
+      }
+      if (chunk.group) {
+        elements.push(
+          /* @__PURE__ */ React.createElement(Text, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, chunk.group)
+        );
+      }
+      const chunkElements = renderFn(chunk.fields);
+      if (Array.isArray(chunkElements)) {
+        elements.push(...chunkElements);
+      } else {
+        elements.push(chunkElements);
+      }
+    }
+    return elements;
+  };
+  const renderFieldSubset = (fieldSubset) => {
+    if (layout && fieldSubset === visibleFields) return renderExplicitLayout();
+    if (columnWidth) return renderAutoGridLayout(fieldSubset);
+    if (columns > 1) return renderGridLayout(fieldSubset);
+    return renderLegacyLayout(fieldSubset);
+  };
+  const renderSections = () => {
+    const hasSections = Array.isArray(sections) && sections.length > 0;
+    if (!hasSections) return null;
+    const sectionFieldNames = /* @__PURE__ */ new Set();
+    for (const sec of sections) {
+      if (sec.fields) for (const name of sec.fields) sectionFieldNames.add(name);
+    }
+    const elements = [];
+    for (const sec of sections) {
+      const sectionFields = sec.fields ? visibleFields.filter((f) => sec.fields.includes(f.name)) : [];
+      if (sectionFields.length === 0) continue;
+      const accordionContent = /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap }, renderFieldSubset(sectionFields));
+      const accordion = /* @__PURE__ */ React.createElement(
+        Accordion,
+        {
+          key: sec.id,
+          title: sec.label,
+          size: "sm",
+          defaultOpen: sec.defaultOpen !== false
+        },
+        accordionContent
+      );
+      if (sec.info) {
+        elements.push(
+          /* @__PURE__ */ React.createElement(Flex, { key: sec.id, direction: "row", align: "start", gap: "flush" }, /* @__PURE__ */ React.createElement(Box, { flex: 1 }, accordion), /* @__PURE__ */ React.createElement(Link, { overlay: /* @__PURE__ */ React.createElement(Tooltip, null, sec.info) }, /* @__PURE__ */ React.createElement(Icon, { name: "info", size: "sm", screenReaderText: sec.info })))
+        );
+      } else {
+        elements.push(accordion);
+      }
+    }
+    const unsectionedFields = visibleFields.filter(
+      (f) => !sectionFieldNames.has(f.name)
+    );
+    if (unsectionedFields.length > 0) {
+      elements.push(...renderFieldSubset(unsectionedFields));
+    }
+    return elements;
+  };
+  const renderFieldLayout = () => {
+    const hasSections = Array.isArray(sections) && sections.length > 0;
+    if (hasSections) return renderSections();
+    const hasGroups = visibleFields.some((f) => f.group);
+    if (hasGroups && !layout) {
+      return wrapWithGroups(visibleFields, renderFieldSubset);
+    }
+    if (layout) return renderExplicitLayout();
+    return renderFieldSubset(visibleFields);
+  };
+  const renderButtons = () => {
+    if (submitPosition === "none" || formReadOnly) return null;
+    const isLastStep = !isMultiStep || currentStep === steps.length - 1;
+    const isFirstStep = !isMultiStep || currentStep === 0;
+    if (isMultiStep) {
+      return /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "between", align: "center" }, !isFirstStep ? /* @__PURE__ */ React.createElement(Button, { variant: "secondary", onClick: handleBack, disabled }, "Back") : showCancel ? /* @__PURE__ */ React.createElement(Button, { variant: "secondary", onClick: onCancel, disabled }, cancelLabel) : /* @__PURE__ */ React.createElement(Text, null, " "), /* @__PURE__ */ React.createElement(Inline, { gap: "small" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy" }, "Step ", currentStep + 1, " of ", steps.length), isLastStep ? /* @__PURE__ */ React.createElement(
+        LoadingButton,
+        {
+          variant: submitVariant,
+          loading: isLoading,
+          onClick: handleSubmit,
+          disabled
+        },
+        submitLabel
+      ) : /* @__PURE__ */ React.createElement(Button, { variant: "primary", onClick: handleNext, disabled }, "Next")));
+    }
+    return /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: showCancel ? "between" : "start", gap: "sm" }, showCancel && /* @__PURE__ */ React.createElement(Button, { variant: "secondary", onClick: onCancel, disabled }, cancelLabel), /* @__PURE__ */ React.createElement(
+      LoadingButton,
+      {
+        variant: submitVariant,
+        type: noFormWrapper ? "button" : "submit",
+        loading: isLoading,
+        onClick: noFormWrapper ? handleSubmit : void 0,
+        disabled
+      },
+      submitLabel
+    ));
+  };
+  const formContent = /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap }, isMultiStep && showStepIndicator && /* @__PURE__ */ React.createElement(
+    StepIndicator,
+    {
+      currentStep,
+      stepNames: steps.map((s) => s.title)
+    }
+  ), formReadOnly && readOnlyMessage && /* @__PURE__ */ React.createElement(Alert, { title: "Read Only", variant: "warning" }, readOnlyMessage), formError && /* @__PURE__ */ React.createElement(Alert, { title: "Error", variant: "danger" }, typeof formError === "string" ? formError : void 0), formSuccess && /* @__PURE__ */ React.createElement(Alert, { title: "Success", variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
+    values: formValues,
+    goNext: handleNext,
+    goBack: handleBack,
+    goTo: handleGoTo
+  }) : (
+    /* Field layout */
+    renderFieldLayout()
+  ), renderButtons());
+  if (noFormWrapper) {
+    return formContent;
+  }
+  return /* @__PURE__ */ React.createElement(Form, { onSubmit: handleSubmit, autoComplete: props.autoComplete }, formContent);
+});
+export {
+  FormBuilder,
+  useFormPrefill
+};