react-smart-fields 1.1.6 → 2.2.0

package/dist/index.js

@@ -1 +1,558 @@
-export { DynamicFields } from "./components/DynamicFields";
+// src/components/DynamicFields.tsx
+import React, { useEffect, useMemo, useRef, useState } from "react";
+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 = useRef(buildInitialValues(fields, defaultValues, value));
+  const [internalValues, setInternalValues] = useState(initialValuesRef.current);
+  const [fieldErrors, setFieldErrors] = useState({});
+  const [resolverErrors, setResolverErrors] = useState({});
+  const [touchedMap, setTouchedMap] = useState({});
+  const [dirtyMap, setDirtyMap] = useState({});
+  const [loadedOptions, setLoadedOptions] = useState({});
+  const [loadingOptionsMap, setLoadingOptionsMap] = useState({});
+  const resolverRunId = useRef(0);
+  const values = isControlled ? value ?? EMPTY_OBJECT : internalValues;
+  useEffect(() => {
+    if (!isControlled) {
+      const rebuilt = buildInitialValues(fields, defaultValues, void 0);
+      initialValuesRef.current = rebuilt;
+      setInternalValues(rebuilt);
+      setDirtyMap({});
+      setTouchedMap({});
+      setFieldErrors({});
+      setResolverErrors({});
+    }
+  }, [fields, defaultValues, isControlled]);
+  const visibleFields = 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;
+  };
+  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]);
+  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]);
+  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 = useMemo(() => ({ ...fieldErrors, ...resolverErrors }), [fieldErrors, resolverErrors]);
+  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__ */ React.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__ */ React.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__ */ React.createElement("option", { value: "", className: classes.option }, isLoadingOptions ? "Loading options..." : field.placeholder || "Select an option"),
+        options.map((option) => /* @__PURE__ */ React.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__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3" }, options.map((option) => /* @__PURE__ */ React.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__ */ React.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__ */ React.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__ */ React.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__ */ React.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__ */ React.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col space-y-1.5 pb-6 mb-6 border-b border-zinc-200 dark:border-zinc-800" }, /* @__PURE__ */ React.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ React.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ React.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__ */ React.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ React.createElement("span", { className: "text-red-500 ml-1" }, "*")) : null;
+    const helpNode = renderDescription ? renderDescription(context) : field.description ? /* @__PURE__ */ React.createElement("p", { className: classes.help }, field.description) : null;
+    const errorNode = canShowError ? renderError ? renderError(context) : /* @__PURE__ */ React.createElement("p", { className: classes.error, role: "alert" }, error) : null;
+    const controlNode = field.renderControl?.(context) ?? renderControl?.(context) ?? renderDefaultControl(context);
+    if (renderField) {
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: field.name }, renderField({
+        ...context,
+        labelNode,
+        helpNode,
+        errorNode,
+        controlNode
+      }));
+    }
+    if (field.type === "checkbox") {
+      return /* @__PURE__ */ React.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ React.createElement("label", { htmlFor: field.name, className: "inline-flex items-start gap-2 cursor-pointer select-none" }, controlNode, /* @__PURE__ */ React.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__ */ React.createElement("span", { className: "text-red-500 ml-1" }, "*"))), helpNode, errorNode);
+    }
+    return /* @__PURE__ */ React.createElement("div", { key: field.name, className: classes.field }, labelNode, helpNode, controlNode, errorNode);
+  })));
+};
+export {
+  DynamicFields
+};

package/package.json

@@ -1,23 +1,38 @@
 {
     "name": "react-smart-fields",
-    "version": "1.1.6",
-    "description": "> A flexible, customizable, and developer-friendly component to generate dynamic form fields in React. Supports all HTML inputs, validation, and styling out of the box.",
+    "version": "2.2.0",
+    "description": "A flexible and highly customizable dynamic form builder for React with validation, conditional fields, theming, and headless rendering.",
     "license": "MIT",
     "author": "Pratik Panchal",
-    "type": "commonjs",
-    "main": "dist/index.js",
+    "type": "module",
+    "main": "dist/index.cjs",
+    "module": "dist/index.js",
     "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "sideEffects": false,
     "scripts": {
-        "build": "tsc"
+        "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+        "build:types": "tsc --emitDeclarationOnly"
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/Pratikpanchal25/react-smart-fields"
+        "url": "git+https://github.com/Pratikpanchal25/react-smart-fields.git"
     },
     "keywords": [
         "DynamicFields",
         "React form generator",
         "dynamic form fields",
+        "headless form",
+        "react field renderer",
         "custom input components",
         "Tailwind CSS forms",
         "form validation react",
@@ -30,17 +45,13 @@
         "override styles",
         "react component"
     ],
-    "dependencies": {
-        "csstype": "^3.1.3",
-        "js-tokens": "^4.0.0",
-        "loose-envify": "^1.4.0",
-        "react": "^18.3.1"
-    },
+    "dependencies": {},
     "devDependencies": {
+        "@types/react": "^18.0.0",
         "typescript": "^5.0.0",
-        "@types/react": "^18.0.0"
+        "tsup": "^8.1.0"
     },
     "peerDependencies": {
-        "react": "^18.0.0"
+        "react": "^18.0.0 || ^19.0.0"
     }
 }

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/dist/components/DynamicFields.d.ts

@@ -1,31 +0,0 @@
-import React from "react";
-export interface FieldOption {
-    label: string;
-    value: string | number | boolean;
-}
-export interface FieldConfig {
-    name: string;
-    label?: string;
-    type: "text" | "number" | "select" | "radio" | "checkbox";
-    options?: FieldOption[];
-    required?: boolean;
-    placeholder?: string;
-    description?: string;
-}
-export interface DynamicFieldsProps {
-    fields: FieldConfig[];
-    onChange: (data: Record<string, any>) => void;
-    className?: string;
-    inputClassName?: string;
-    labelClassName?: string;
-    mainFieldClassName?: string;
-    fieldClassName?: string;
-    errorClassName?: string;
-    selectClassName?: string;
-    optionClassName?: string;
-    checkboxClassName?: string;
-    radioClassName?: string;
-    title?: string;
-    description?: string;
-}
-export declare const DynamicFields: React.FC<DynamicFieldsProps>;