react-smart-fields 1.1.6 → 2.2.0

package/dist/index.cjs

@@ -0,0 +1,595 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DynamicFields: () => DynamicFields
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/DynamicFields.tsx
+var import_react = __toESM(require("react"), 1);
+var EMPTY_OBJECT = {};
+var cn = (...values) => values.filter(Boolean).join(" ").trim();
+var parsePath = (path) => {
+  const segments = path.match(/[^.[\]]+/g) ?? [];
+  return segments.map((segment) => /^\d+$/.test(segment) ? Number(segment) : segment);
+};
+var getIn = (source, path) => {
+  const segments = parsePath(path);
+  let current = source;
+  for (const segment of segments) {
+    if (current === null || current === void 0) {
+      return void 0;
+    }
+    current = current[segment];
+  }
+  return current;
+};
+var setIn = (source, path, value) => {
+  const segments = parsePath(path);
+  if (!segments.length) {
+    return source;
+  }
+  const result = Array.isArray(source) ? [...source] : { ...source };
+  let currentResult = result;
+  let currentSource = source;
+  for (let index = 0; index < segments.length - 1; index += 1) {
+    const segment = segments[index];
+    const nextSegment = segments[index + 1];
+    const sourceValue = currentSource?.[segment];
+    let nextValue;
+    if (Array.isArray(sourceValue)) {
+      nextValue = [...sourceValue];
+    } else if (sourceValue && typeof sourceValue === "object") {
+      nextValue = { ...sourceValue };
+    } else {
+      nextValue = typeof nextSegment === "number" ? [] : {};
+    }
+    currentResult[segment] = nextValue;
+    currentResult = nextValue;
+    currentSource = sourceValue;
+  }
+  const lastSegment = segments[segments.length - 1];
+  currentResult[lastSegment] = value;
+  return result;
+};
+var isEmptyValue = (value) => {
+  if (value === null || value === void 0) {
+    return true;
+  }
+  if (typeof value === "string") {
+    return value.trim() === "";
+  }
+  if (Array.isArray(value)) {
+    return value.length === 0;
+  }
+  return false;
+};
+var toComparable = (value) => {
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+var buildInitialValues = (fields, defaultValues, controlledValues) => {
+  const seed = { ...defaultValues ?? EMPTY_OBJECT, ...controlledValues ?? EMPTY_OBJECT };
+  return fields.reduce((accumulator, field) => {
+    const existing = getIn(accumulator, field.name);
+    if (existing !== void 0) {
+      return accumulator;
+    }
+    const fallbackValue = field.defaultValue !== void 0 ? field.defaultValue : field.type === "checkbox" ? false : "";
+    return setIn(accumulator, field.name, fallbackValue);
+  }, seed);
+};
+var baseTheme = {
+  default: {
+    wrapper: "w-full max-w-2xl mx-auto p-6 bg-white dark:bg-zinc-950 rounded-lg border border-zinc-200 dark:border-zinc-800 shadow-sm",
+    title: "text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
+    description: "text-sm text-zinc-500 dark:text-zinc-400",
+    fieldsContainer: "space-y-4",
+    field: "w-full space-y-2",
+    label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
+    help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
+    control: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
+    textarea: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 transition-colors min-h-[80px] resize-none",
+    select: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
+    option: "text-zinc-950 dark:text-zinc-50 bg-white dark:bg-zinc-950",
+    checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-900 dark:border-zinc-50 bg-white dark:bg-zinc-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
+    radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-900 dark:border-zinc-50 bg-white dark:bg-zinc-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-white dark:ring-offset-zinc-950 disabled:cursor-not-allowed disabled:opacity-50",
+    error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
+  },
+  minimal: {
+    wrapper: "w-full max-w-2xl mx-auto",
+    title: "text-xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
+    description: "text-sm text-zinc-500 dark:text-zinc-400",
+    fieldsContainer: "space-y-4",
+    field: "w-full space-y-2",
+    label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
+    help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
+    control: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
+    textarea: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors min-h-[80px] resize-none",
+    select: "w-full rounded-md border border-zinc-200 dark:border-zinc-800 bg-transparent text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
+    option: "text-zinc-950 dark:text-zinc-50",
+    checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-200 dark:border-zinc-800 bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-200 dark:border-zinc-800 bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
+  },
+  filled: {
+    wrapper: "w-full max-w-2xl mx-auto p-6 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-zinc-100 dark:border-zinc-800",
+    title: "text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
+    description: "text-sm text-zinc-500 dark:text-zinc-400",
+    fieldsContainer: "space-y-4",
+    field: "w-full space-y-2",
+    label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
+    help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
+    control: "w-full rounded-md border border-zinc-100 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
+    textarea: "w-full rounded-md border border-zinc-100 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50 transition-colors min-h-[80px] resize-none",
+    select: "w-full rounded-md border border-zinc-100 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
+    option: "text-zinc-950 dark:text-zinc-50 bg-white dark:bg-zinc-900",
+    checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-200 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50",
+    radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 ring-offset-zinc-50 dark:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-50",
+    error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
+  },
+  underline: {
+    wrapper: "w-full max-w-2xl mx-auto py-4",
+    title: "text-xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50",
+    description: "text-sm text-zinc-500 dark:text-zinc-400",
+    fieldsContainer: "space-y-4",
+    field: "w-full space-y-2",
+    label: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50",
+    help: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
+    control: "w-full border-0 border-b border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 rounded-none focus-visible:outline-none focus-visible:ring-0 focus-visible:border-zinc-950 dark:focus-visible:border-zinc-300 disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-0",
+    textarea: "w-full border-0 border-b border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-950 dark:text-zinc-50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 rounded-none focus-visible:outline-none focus-visible:ring-0 focus-visible:border-zinc-950 dark:focus-visible:border-zinc-300 disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-0 min-h-[80px] resize-none",
+    select: "w-full border-0 border-b border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-950 dark:text-zinc-50 focus-visible:outline-none focus-visible:ring-0 focus-visible:border-zinc-950 dark:focus-visible:border-zinc-300 disabled:cursor-not-allowed disabled:opacity-50 transition-colors rounded-none px-0",
+    option: "text-zinc-950 dark:text-zinc-50",
+    checkbox: "h-4 w-4 shrink-0 rounded-sm border border-zinc-200 dark:border-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    radio: "h-4 w-4 shrink-0 rounded-full border border-zinc-200 dark:border-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 dark:focus-visible:ring-zinc-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    error: "text-[0.8rem] font-medium text-red-500 dark:text-red-400"
+  }
+};
+var sizeMap = {
+  sm: {
+    control: "px-3 py-1.5 text-xs",
+    label: "text-xs",
+    help: "text-[0.7rem]",
+    error: "text-xs"
+  },
+  md: {
+    control: "px-3 py-2 text-sm",
+    label: "text-sm",
+    help: "text-[0.8rem]",
+    error: "text-[0.8rem]"
+  },
+  lg: {
+    control: "px-4 py-2.5 text-base",
+    label: "text-base",
+    help: "text-sm",
+    error: "text-sm"
+  }
+};
+var DynamicFields = ({
+  fields,
+  onChange,
+  value,
+  defaultValues,
+  resolver,
+  validateMode = "change",
+  showErrorWhen = "touched",
+  headless = false,
+  theme = "default",
+  size = "md",
+  ui,
+  stateClassNames,
+  className = "",
+  inputClassName = "",
+  labelClassName = "",
+  mainFieldClassName = "",
+  fieldClassName = "",
+  errorClassName = "",
+  selectClassName = "",
+  optionClassName = "",
+  checkboxClassName = "",
+  radioClassName = "",
+  title,
+  description,
+  renderLabel,
+  renderDescription,
+  renderError,
+  renderControl,
+  renderField
+}) => {
+  const isControlled = value !== void 0;
+  const initialValuesRef = (0, import_react.useRef)(buildInitialValues(fields, defaultValues, value));
+  const [internalValues, setInternalValues] = (0, import_react.useState)(initialValuesRef.current);
+  const [fieldErrors, setFieldErrors] = (0, import_react.useState)({});
+  const [resolverErrors, setResolverErrors] = (0, import_react.useState)({});
+  const [touchedMap, setTouchedMap] = (0, import_react.useState)({});
+  const [dirtyMap, setDirtyMap] = (0, import_react.useState)({});
+  const [loadedOptions, setLoadedOptions] = (0, import_react.useState)({});
+  const [loadingOptionsMap, setLoadingOptionsMap] = (0, import_react.useState)({});
+  const resolverRunId = (0, import_react.useRef)(0);
+  const values = isControlled ? value ?? EMPTY_OBJECT : internalValues;
+  (0, import_react.useEffect)(() => {
+    if (!isControlled) {
+      const rebuilt = buildInitialValues(fields, defaultValues, void 0);
+      initialValuesRef.current = rebuilt;
+      setInternalValues(rebuilt);
+      setDirtyMap({});
+      setTouchedMap({});
+      setFieldErrors({});
+      setResolverErrors({});
+    }
+  }, [fields, defaultValues, isControlled]);
+  const visibleFields = (0, import_react.useMemo)(
+    () => fields.filter((field) => field.showWhen ? field.showWhen(values) : true),
+    [fields, values]
+  );
+  const runFieldValidation = (field, nextValues) => {
+    const valueAtPath = getIn(nextValues, field.name);
+    const isRequired = field.requiredWhen ? field.requiredWhen(nextValues) : Boolean(field.required);
+    if (isRequired && isEmptyValue(valueAtPath)) {
+      return field.requiredMessage || "This field is required";
+    }
+    if (isEmptyValue(valueAtPath)) {
+      return void 0;
+    }
+    if (typeof valueAtPath === "number") {
+      if (typeof field.min === "number" && valueAtPath < field.min) {
+        return `Minimum value is ${field.min}`;
+      }
+      if (typeof field.max === "number" && valueAtPath > field.max) {
+        return `Maximum value is ${field.max}`;
+      }
+    }
+    if (typeof valueAtPath === "string") {
+      if (typeof field.minLength === "number" && valueAtPath.length < field.minLength) {
+        return `Minimum length is ${field.minLength}`;
+      }
+      if (typeof field.maxLength === "number" && valueAtPath.length > field.maxLength) {
+        return `Maximum length is ${field.maxLength}`;
+      }
+      if (field.pattern && !field.pattern.test(valueAtPath)) {
+        return field.patternMessage || "Invalid format";
+      }
+    }
+    if (field.validate) {
+      return field.validate(valueAtPath, nextValues) || void 0;
+    }
+    return void 0;
+  };
+  const validateVisibleFields = (nextValues) => {
+    const nextErrors = {};
+    visibleFields.forEach((field) => {
+      const error = runFieldValidation(field, nextValues);
+      if (error) {
+        nextErrors[field.name] = error;
+      }
+    });
+    return nextErrors;
+  };
+  (0, import_react.useEffect)(() => {
+    const fieldsToLoad = fields.filter((field) => field.type === "select" && field.loadOptions && field.loadOptionsOn !== "change");
+    if (!fieldsToLoad.length) {
+      return;
+    }
+    fieldsToLoad.forEach((field) => {
+      const fieldName = field.name;
+      setLoadingOptionsMap((previous) => ({ ...previous, [fieldName]: true }));
+      field.loadOptions?.({ values, field }).then((result) => {
+        setLoadedOptions((previous) => ({ ...previous, [fieldName]: result }));
+      }).finally(() => {
+        setLoadingOptionsMap((previous) => ({ ...previous, [fieldName]: false }));
+      });
+    });
+  }, [fields]);
+  (0, import_react.useEffect)(() => {
+    const fieldsToLoad = fields.filter((field) => field.type === "select" && field.loadOptions && field.loadOptionsOn === "change");
+    if (!fieldsToLoad.length) {
+      return;
+    }
+    fieldsToLoad.forEach((field) => {
+      const fieldName = field.name;
+      setLoadingOptionsMap((previous) => ({ ...previous, [fieldName]: true }));
+      field.loadOptions?.({ values, field }).then((result) => {
+        setLoadedOptions((previous) => ({ ...previous, [fieldName]: result }));
+      }).finally(() => {
+        setLoadingOptionsMap((previous) => ({ ...previous, [fieldName]: false }));
+      });
+    });
+  }, [fields, values]);
+  (0, import_react.useEffect)(() => {
+    if (!resolver) {
+      setResolverErrors({});
+      return;
+    }
+    const runId = resolverRunId.current + 1;
+    resolverRunId.current = runId;
+    Promise.resolve(resolver(values)).then((errors) => {
+      if (resolverRunId.current === runId) {
+        setResolverErrors(errors ?? {});
+      }
+    }).catch(() => {
+      if (resolverRunId.current === runId) {
+        setResolverErrors({});
+      }
+    });
+  }, [resolver, values]);
+  const combinedErrors = (0, import_react.useMemo)(() => ({ ...fieldErrors, ...resolverErrors }), [fieldErrors, resolverErrors]);
+  (0, import_react.useEffect)(() => {
+    onChange(values, {
+      errors: combinedErrors,
+      touched: touchedMap,
+      dirty: dirtyMap
+    });
+  }, [values, combinedErrors, touchedMap, dirtyMap, onChange]);
+  const updateValues = (nextValues) => {
+    if (!isControlled) {
+      setInternalValues(nextValues);
+    }
+    if (validateMode === "change") {
+      setFieldErrors(validateVisibleFields(nextValues));
+    }
+  };
+  const handleFieldChange = (field, rawValue) => {
+    const transformedValue = field.transformOut ? field.transformOut(rawValue, values) : rawValue;
+    const nextValues = setIn(values, field.name, transformedValue);
+    const initialValue = getIn(initialValuesRef.current, field.name);
+    const isDirty = toComparable(initialValue) !== toComparable(transformedValue);
+    setDirtyMap((previous) => ({ ...previous, [field.name]: isDirty }));
+    updateValues(nextValues);
+  };
+  const handleFieldBlur = (field) => {
+    setTouchedMap((previous) => ({ ...previous, [field.name]: true }));
+    if (validateMode === "blur") {
+      const nextError = runFieldValidation(field, values);
+      setFieldErrors((previous) => {
+        const updated = { ...previous };
+        if (nextError) {
+          updated[field.name] = nextError;
+        } else {
+          delete updated[field.name];
+        }
+        return updated;
+      });
+    }
+  };
+  const defaultUi = headless ? {
+    wrapper: "",
+    title: "",
+    description: "",
+    fieldsContainer: "",
+    field: "",
+    label: "",
+    help: "",
+    control: "",
+    textarea: "",
+    select: "",
+    option: "",
+    checkbox: "",
+    radio: "",
+    error: ""
+  } : baseTheme[theme];
+  const sizeClasses = sizeMap[size];
+  const resolveUi = (field) => ({
+    wrapper: cn(defaultUi.wrapper, ui?.wrapper, className),
+    title: cn(defaultUi.title, ui?.title),
+    description: cn(defaultUi.description, ui?.description),
+    fieldsContainer: cn(defaultUi.fieldsContainer, ui?.fieldsContainer, mainFieldClassName),
+    field: cn(defaultUi.field, fieldClassName, field?.className, ui?.field, field?.ui?.field),
+    label: cn(defaultUi.label, sizeClasses.label, labelClassName, ui?.label, field?.labelClassName, field?.ui?.label),
+    help: cn(defaultUi.help, sizeClasses.help, ui?.help, field?.ui?.help),
+    control: cn(defaultUi.control, sizeClasses.control, inputClassName, ui?.control, field?.inputClassName, field?.ui?.control),
+    textarea: cn(defaultUi.textarea, sizeClasses.control, inputClassName, ui?.textarea, field?.inputClassName, field?.ui?.textarea),
+    select: cn(defaultUi.select, sizeClasses.control, selectClassName, ui?.select, field?.ui?.select),
+    option: cn(defaultUi.option, optionClassName, ui?.option, field?.ui?.option),
+    checkbox: cn(defaultUi.checkbox, checkboxClassName, ui?.checkbox, field?.ui?.checkbox),
+    radio: cn(defaultUi.radio, radioClassName, ui?.radio, field?.ui?.radio),
+    error: cn(defaultUi.error, sizeClasses.error, errorClassName, field?.errorClassName, ui?.error, field?.ui?.error)
+  });
+  const buildStateClassName = (field, hasError, disabled, readOnly) => cn(
+    hasError && (stateClassNames?.invalid ?? "border-red-500 dark:border-red-500 focus-visible:ring-red-500 dark:focus-visible:ring-red-500"),
+    disabled && stateClassNames?.disabled,
+    readOnly && stateClassNames?.readonly,
+    dirtyMap[field.name] && stateClassNames?.dirty,
+    touchedMap[field.name] && stateClassNames?.touched
+  );
+  const shouldShowError = (fieldName) => {
+    if (showErrorWhen === "always") {
+      return true;
+    }
+    if (showErrorWhen === "dirty") {
+      return Boolean(dirtyMap[fieldName]);
+    }
+    return Boolean(touchedMap[fieldName]);
+  };
+  const renderDefaultControl = (context) => {
+    const { field, value: value2, options, isLoadingOptions, classes, handleChange, handleBlur, disabled, readOnly, error } = context;
+    const showsError = Boolean(error) && shouldShowError(field.name);
+    const controlStateClass = buildStateClassName(field, showsError, disabled, readOnly);
+    if (field.type === "textarea") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "textarea",
+        {
+          id: field.name,
+          name: field.name,
+          value: value2 ?? "",
+          placeholder: field.placeholder,
+          onChange: (event) => handleChange(event.target.value),
+          onBlur: handleBlur,
+          disabled,
+          readOnly,
+          className: cn(classes.textarea, controlStateClass)
+        }
+      );
+    }
+    if (field.type === "select") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "select",
+        {
+          id: field.name,
+          name: field.name,
+          value: value2 ?? "",
+          onChange: (event) => handleChange(event.target.value),
+          onBlur: handleBlur,
+          disabled: disabled || isLoadingOptions,
+          className: cn(classes.select, controlStateClass)
+        },
+        /* @__PURE__ */ import_react.default.createElement("option", { value: "", className: classes.option }, isLoadingOptions ? "Loading options..." : field.placeholder || "Select an option"),
+        options.map((option) => /* @__PURE__ */ import_react.default.createElement(
+          "option",
+          {
+            key: `${field.name}-${String(option.value)}`,
+            value: String(option.value ?? ""),
+            disabled: option.disabled,
+            className: classes.option
+          },
+          option.label
+        ))
+      );
+    }
+    if (field.type === "radio") {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3" }, options.map((option) => /* @__PURE__ */ import_react.default.createElement(
+        "label",
+        {
+          key: `${field.name}-${String(option.value)}`,
+          htmlFor: `${field.name}-${String(option.value)}`,
+          className: "flex items-center gap-2 cursor-pointer select-none"
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "input",
+          {
+            id: `${field.name}-${String(option.value)}`,
+            type: "radio",
+            name: field.name,
+            value: String(option.value ?? ""),
+            checked: toComparable(value2) === toComparable(option.value),
+            onChange: () => handleChange(option.value),
+            onBlur: handleBlur,
+            disabled: disabled || option.disabled,
+            readOnly,
+            className: cn(classes.radio, controlStateClass)
+          }
+        ),
+        /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, option.label)
+      )));
+    }
+    if (field.type === "checkbox") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        {
+          id: field.name,
+          name: field.name,
+          type: "checkbox",
+          checked: Boolean(value2),
+          onChange: (event) => handleChange(event.target.checked),
+          onBlur: handleBlur,
+          disabled,
+          readOnly,
+          className: cn(classes.checkbox, controlStateClass)
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        id: field.name,
+        name: field.name,
+        type: field.type,
+        value: value2 ?? "",
+        placeholder: field.placeholder,
+        onChange: (event) => {
+          if (field.type === "number") {
+            const nextValue = event.target.value === "" ? "" : Number(event.target.value);
+            handleChange(Number.isNaN(nextValue) ? "" : nextValue);
+            return;
+          }
+          handleChange(event.target.value);
+        },
+        onBlur: handleBlur,
+        disabled,
+        readOnly,
+        className: cn(classes.control, controlStateClass)
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col space-y-1.5 pb-6 mb-6 border-b border-zinc-200 dark:border-zinc-800" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ import_react.default.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().fieldsContainer }, visibleFields.map((field) => {
+    const classes = resolveUi(field);
+    const storedValue = getIn(values, field.name);
+    const renderedValue = field.transformIn ? field.transformIn(storedValue, values) : storedValue;
+    const options = loadedOptions[field.name] ?? field.options ?? [];
+    const isLoadingOptions = Boolean(loadingOptionsMap[field.name]);
+    const disabled = field.disableWhen ? field.disableWhen(values) : Boolean(field.disabled);
+    const readOnly = Boolean(field.readOnly);
+    const error = combinedErrors[field.name];
+    const canShowError = Boolean(error) && shouldShowError(field.name);
+    const isTouched = Boolean(touchedMap[field.name]);
+    const isDirty = Boolean(dirtyMap[field.name]);
+    const context = {
+      field,
+      value: renderedValue,
+      values,
+      error,
+      isTouched,
+      isDirty,
+      disabled,
+      readOnly,
+      options,
+      isLoadingOptions,
+      classes,
+      handleChange: (nextValue) => handleFieldChange(field, nextValue),
+      handleBlur: () => handleFieldBlur(field)
+    };
+    const requiredMark = field.required || field.requiredWhen?.(values);
+    const labelNode = field.type === "checkbox" ? null : renderLabel ? renderLabel(context) : field.label ? /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "text-red-500 ml-1" }, "*")) : null;
+    const helpNode = renderDescription ? renderDescription(context) : field.description ? /* @__PURE__ */ import_react.default.createElement("p", { className: classes.help }, field.description) : null;
+    const errorNode = canShowError ? renderError ? renderError(context) : /* @__PURE__ */ import_react.default.createElement("p", { className: classes.error, role: "alert" }, error) : null;
+    const controlNode = field.renderControl?.(context) ?? renderControl?.(context) ?? renderDefaultControl(context);
+    if (renderField) {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: field.name }, renderField({
+        ...context,
+        labelNode,
+        helpNode,
+        errorNode,
+        controlNode
+      }));
+    }
+    if (field.type === "checkbox") {
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: "inline-flex items-start gap-2 cursor-pointer select-none" }, controlNode, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm font-medium leading-none text-zinc-950 dark:text-zinc-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "text-red-500 ml-1" }, "*"))), helpNode, errorNode);
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { key: field.name, className: classes.field }, labelNode, helpNode, controlNode, errorNode);
+  })));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DynamicFields
+});