@formality-ui/react 0.0.0

package/dist/index.cjs

@@ -0,0 +1,1047 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var lodashEs = require('lodash-es');
+var core = require('@formality-ui/core');
+
+// src/context/ConfigContext.ts
+var defaultConfigContext = {
+  inputs: {},
+  formatters: {},
+  parsers: {},
+  validators: {},
+  errorMessages: {},
+  inputTemplates: {},
+  defaultSubscriptionPropName: "state",
+  defaultFieldProps: {}
+};
+var ConfigContext = react.createContext(defaultConfigContext);
+ConfigContext.displayName = "FormalityConfigContext";
+function useConfigContext() {
+  return react.useContext(ConfigContext);
+}
+var FormContext = react.createContext(null);
+FormContext.displayName = "FormalityFormContext";
+function useFormContext() {
+  const context = react.useContext(FormContext);
+  if (!context) {
+    throw new Error(
+      "useFormContext must be used within a Form component. Make sure your component is wrapped in a <Form> component."
+    );
+  }
+  return context;
+}
+var defaultGroupContext = {
+  state: {
+    isDisabled: false,
+    isVisible: true,
+    hasSetCondition: false,
+    setValue: void 0,
+    conditions: [],
+    subscriptions: []
+  },
+  subscriptions: [],
+  inferredInputs: [],
+  config: { conditions: [], subscribesTo: [] }
+};
+var GroupContext = react.createContext(defaultGroupContext);
+GroupContext.displayName = "FormalityGroupContext";
+function useGroupContext() {
+  return react.useContext(GroupContext);
+}
+function FormalityProvider({
+  children,
+  inputs,
+  formatters = {},
+  parsers = {},
+  validators = {},
+  errorMessages = {},
+  defaultInputTemplate,
+  inputTemplates = {},
+  defaultSubscriptionPropName = "state",
+  defaultFieldProps = {},
+  selectDefaultFieldProps
+}) {
+  const contextValue = react.useMemo(
+    () => ({
+      inputs,
+      formatters,
+      parsers,
+      validators,
+      errorMessages,
+      defaultInputTemplate,
+      inputTemplates,
+      defaultSubscriptionPropName,
+      defaultFieldProps,
+      selectDefaultFieldProps
+    }),
+    [
+      inputs,
+      formatters,
+      parsers,
+      validators,
+      errorMessages,
+      defaultInputTemplate,
+      inputTemplates,
+      defaultSubscriptionPropName,
+      defaultFieldProps,
+      selectDefaultFieldProps
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ConfigContext.Provider, { value: contextValue, children });
+}
+
+// src/utils/makeProxyState.ts
+function makeProxyState(source) {
+  const result = {};
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      Object.defineProperty(result, key, {
+        get: () => source[key],
+        enumerable: true,
+        configurable: true
+      });
+    }
+  }
+  return result;
+}
+function makeDeepProxyState(source) {
+  const result = {};
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      source[key];
+      Object.defineProperty(result, key, {
+        get: () => {
+          const currentValue = source[key];
+          if (currentValue !== null && typeof currentValue === "object" && !Array.isArray(currentValue)) {
+            return makeDeepProxyState(currentValue);
+          }
+          return currentValue;
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+  }
+  return result;
+}
+var defaultGroupContext2 = {
+  state: {
+    isDisabled: false,
+    isVisible: true,
+    hasSetCondition: false,
+    setValue: void 0,
+    conditions: [],
+    subscriptions: []
+  },
+  subscriptions: [],
+  inferredInputs: [],
+  config: { conditions: [], subscribesTo: [] }
+};
+function Form({
+  children,
+  config,
+  formConfig = {},
+  onSubmit,
+  record,
+  autoSave = false,
+  debounce: debounceMs = 1e3,
+  validate
+}) {
+  const providerConfig = useConfigContext();
+  const mergedInputs = react.useMemo(() => {
+    const formInputs = typeof formConfig.inputs === "function" ? formConfig.inputs(providerConfig.inputs) : formConfig.inputs ?? {};
+    const result = { ...providerConfig.inputs };
+    for (const [key, override] of Object.entries(formInputs)) {
+      if (result[key]) {
+        result[key] = { ...result[key], ...override };
+      }
+    }
+    return result;
+  }, [providerConfig.inputs, formConfig.inputs]);
+  const defaultValues = react.useMemo(() => {
+    return core.resolveAllInitialValues(config, mergedInputs, record ?? {});
+  }, [config, mergedInputs, record]);
+  const methods = reactHookForm.useForm({
+    mode: "onChange",
+    defaultValues,
+    values: record
+  });
+  const fieldRegistry = react.useRef(/* @__PURE__ */ new Set());
+  const [registeredFields, setRegisteredFields] = react.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const invertedSubscriptions = react.useRef(/* @__PURE__ */ new Map());
+  const watcherSetters = react.useRef(/* @__PURE__ */ new Map());
+  const pendingWatcherUpdates = react.useRef(/* @__PURE__ */ new Map());
+  const validatingFields = react.useRef(/* @__PURE__ */ new Map());
+  const pendingChangedFields = react.useRef(/* @__PURE__ */ new Set());
+  const pendingAffectedFields = react.useRef(/* @__PURE__ */ new Set());
+  const executionVersionRef = react.useRef(0);
+  const registerField = react.useCallback((name) => {
+    fieldRegistry.current.add(name);
+    setRegisteredFields(new Set(fieldRegistry.current));
+  }, []);
+  const unregisterField = react.useCallback((name) => {
+    fieldRegistry.current.delete(name);
+    setRegisteredFields(new Set(fieldRegistry.current));
+  }, []);
+  const addSubscription = react.useCallback((target, subscriber) => {
+    if (!invertedSubscriptions.current.has(target)) {
+      invertedSubscriptions.current.set(target, /* @__PURE__ */ new Set());
+    }
+    invertedSubscriptions.current.get(target).add(subscriber);
+    const setter = watcherSetters.current.get(target);
+    if (setter) {
+      setter((prev) => ({ ...prev, [subscriber]: true }));
+    } else {
+      if (!pendingWatcherUpdates.current.has(target)) {
+        pendingWatcherUpdates.current.set(target, /* @__PURE__ */ new Set());
+      }
+      pendingWatcherUpdates.current.get(target).add(subscriber);
+    }
+  }, []);
+  const removeSubscription = react.useCallback(
+    (target, subscriber) => {
+      invertedSubscriptions.current.get(target)?.delete(subscriber);
+      const setter = watcherSetters.current.get(target);
+      if (setter) {
+        setter((prev) => {
+          const next = { ...prev };
+          delete next[subscriber];
+          return next;
+        });
+      }
+    },
+    []
+  );
+  const registerWatcherSetter = react.useCallback(
+    (name, setter) => {
+      watcherSetters.current.set(name, setter);
+      const pending = pendingWatcherUpdates.current.get(name);
+      if (pending?.size) {
+        setter((prev) => {
+          const next = { ...prev };
+          pending.forEach((sub) => {
+            next[sub] = true;
+          });
+          return next;
+        });
+        pendingWatcherUpdates.current.delete(name);
+      }
+    },
+    []
+  );
+  const unregisterWatcherSetter = react.useCallback((name) => {
+    watcherSetters.current.delete(name);
+  }, []);
+  const getAffectedFields = react.useCallback((changedField) => {
+    const affected = /* @__PURE__ */ new Set();
+    const toProcess = [changedField];
+    while (toProcess.length > 0) {
+      const current = toProcess.pop();
+      const subscribers = invertedSubscriptions.current.get(current);
+      if (subscribers) {
+        for (const subscriber of subscribers) {
+          if (!affected.has(subscriber)) {
+            affected.add(subscriber);
+            toProcess.push(subscriber);
+          }
+        }
+      }
+    }
+    return affected;
+  }, []);
+  const changeField = react.useCallback(
+    (name, value) => {
+      if (autoSave) {
+        pendingChangedFields.current.add(name);
+        const affected = getAffectedFields(name);
+        for (const field of affected) {
+          pendingAffectedFields.current.add(field);
+        }
+        debouncedSubmit();
+      }
+    },
+    [autoSave, getAffectedFields]
+  );
+  const setFieldValidating = react.useCallback(
+    (name, isValidating) => {
+      validatingFields.current.set(name, isValidating);
+    },
+    []
+  );
+  const getFormState = react.useCallback(() => {
+    const values = methods.getValues();
+    const formState = methods.formState;
+    const fields = {};
+    Object.keys(config).forEach((name) => {
+      const fieldState = methods.getFieldState(name, formState);
+      fields[name] = makeProxyState({
+        value: values[name],
+        isTouched: fieldState.isTouched,
+        isDirty: fieldState.isDirty,
+        isValidating: validatingFields.current.get(name) ?? false,
+        error: fieldState.error ? {
+          type: fieldState.error.type,
+          message: fieldState.error.message
+        } : void 0,
+        invalid: fieldState.invalid
+      });
+    });
+    return {
+      fields,
+      record: record ?? {},
+      errors: formState.errors,
+      defaultValues,
+      touchedFields: formState.touchedFields,
+      dirtyFields: formState.dirtyFields,
+      isDirty: formState.isDirty,
+      isTouched: Object.keys(formState.touchedFields).length > 0,
+      isValid: formState.isValid,
+      isSubmitting: formState.isSubmitting
+    };
+  }, [methods, config, record, defaultValues]);
+  const handleSubmit = react.useCallback(
+    async (values) => {
+      for (const [, isValidating] of validatingFields.current) {
+        if (isValidating) return;
+      }
+      if (validate) {
+        const errors = await validate(values);
+        if (Object.keys(errors).length > 0) {
+          Object.entries(errors).forEach(([field, message]) => {
+            methods.setError(field, { message });
+          });
+          return;
+        }
+      }
+      const submitValues = transformValuesForSubmit(values, config, mergedInputs);
+      await onSubmit?.(submitValues);
+    },
+    [validate, methods, onSubmit, config, mergedInputs]
+  );
+  const debouncedSubmitRef = react.useRef();
+  const waitForFieldValidation = react.useCallback(
+    async (fields, version) => {
+      const maxWaitMs = 1e4;
+      const pollIntervalMs = 50;
+      const startTime = Date.now();
+      while (Date.now() - startTime < maxWaitMs) {
+        if (executionVersionRef.current !== version) {
+          return false;
+        }
+        const allDone = fields.every(
+          (field) => !validatingFields.current.get(field)
+        );
+        if (allDone) {
+          return true;
+        }
+        await new Promise((resolve) => setTimeout(resolve, pollIntervalMs));
+      }
+      return true;
+    },
+    []
+  );
+  const executeAutoSave = react.useCallback(async () => {
+    executionVersionRef.current++;
+    const executionVersion = executionVersionRef.current;
+    const changedFields = new Set(pendingChangedFields.current);
+    const affectedFields = new Set(pendingAffectedFields.current);
+    pendingChangedFields.current.clear();
+    pendingAffectedFields.current.clear();
+    if (changedFields.size === 0) {
+      return;
+    }
+    const fieldsToValidate = [...changedFields, ...affectedFields];
+    const validationsComplete = await waitForFieldValidation(
+      fieldsToValidate,
+      executionVersion
+    );
+    if (!validationsComplete || executionVersionRef.current !== executionVersion) {
+      return;
+    }
+    if (fieldsToValidate.length > 0) {
+      const isValid = await methods.trigger(fieldsToValidate);
+      if (executionVersionRef.current !== executionVersion) {
+        return;
+      }
+      if (!isValid) {
+        return;
+      }
+    }
+    const postTriggerComplete = await waitForFieldValidation(
+      fieldsToValidate,
+      executionVersion
+    );
+    if (!postTriggerComplete || executionVersionRef.current !== executionVersion) {
+      return;
+    }
+    const formState = methods.formState;
+    if (Object.keys(formState.errors).length > 0) {
+      return;
+    }
+    const values = methods.getValues();
+    await handleSubmit(values);
+  }, [methods, handleSubmit, waitForFieldValidation]);
+  react.useEffect(() => {
+    const debouncedFn = lodashEs.debounce(() => {
+      executeAutoSave();
+    }, debounceMs);
+    const fn = Object.assign(debouncedFn, {
+      pending: () => false
+      // lodash debounce handles this internally
+    });
+    debouncedSubmitRef.current = fn;
+    return () => {
+      debouncedFn.cancel();
+    };
+  }, [executeAutoSave, debounceMs]);
+  const debouncedSubmit = react.useCallback(() => {
+    debouncedSubmitRef.current?.();
+  }, []);
+  const submitImmediate = react.useCallback(() => {
+    debouncedSubmitRef.current?.flush();
+  }, []);
+  const unusedFields = react.useMemo(() => {
+    const allFields = Object.keys(config);
+    return allFields.filter((name) => !registeredFields.has(name));
+  }, [config, registeredFields]);
+  const resolvedTitle = react.useMemo(() => {
+    if (!formConfig.selectTitle && !formConfig.title) {
+      return void 0;
+    }
+    if (formConfig.selectTitle) {
+      const formState = getFormState();
+      const context = core.buildFormContext(
+        formState.fields,
+        formState.record,
+        formState.errors,
+        formState.defaultValues,
+        formState.touchedFields,
+        formState.dirtyFields
+      );
+      const evaluated = core.evaluateDescriptor(formConfig.selectTitle, context);
+      return core.resolveFormTitle(formConfig.title, evaluated);
+    }
+    return core.resolveFormTitle(formConfig.title);
+  }, [formConfig.title, formConfig.selectTitle, getFormState]);
+  const contextValue = react.useMemo(
+    () => ({
+      config,
+      formConfig,
+      record,
+      registerField,
+      unregisterField,
+      addSubscription,
+      removeSubscription,
+      registerWatcherSetter,
+      unregisterWatcherSetter,
+      changeField,
+      setFieldValidating,
+      getFormState,
+      onSubmit,
+      debouncedSubmit: debouncedSubmitRef.current,
+      submitImmediate,
+      unusedFields,
+      methods
+    }),
+    [
+      config,
+      formConfig,
+      record,
+      registerField,
+      unregisterField,
+      addSubscription,
+      removeSubscription,
+      registerWatcherSetter,
+      unregisterWatcherSetter,
+      changeField,
+      setFieldValidating,
+      getFormState,
+      onSubmit,
+      submitImmediate,
+      unusedFields,
+      methods
+    ]
+  );
+  const isRenderFunction = typeof children === "function";
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(GroupContext.Provider, { value: defaultGroupContext2, children: isRenderFunction ? children({
+    unusedFields,
+    formState: methods.formState,
+    methods,
+    resolvedTitle
+  }) : children }) }) });
+}
+function transformValuesForSubmit(values, config, inputs) {
+  const result = {};
+  for (const [name, value] of Object.entries(values)) {
+    const fieldConfig = config[name];
+    const type = fieldConfig?.type ?? "textField";
+    const inputConfig = inputs[type];
+    if (inputConfig) {
+      const submitName = core.transformFieldName(name, inputConfig.getSubmitField);
+      const submitValue = core.extractValueField(value, inputConfig.valueField);
+      result[submitName] = submitValue;
+    } else {
+      result[name] = value;
+    }
+  }
+  return result;
+}
+function useInferredInputs(options) {
+  const { selectProps, conditions = [], subscribesTo = [] } = options;
+  return react.useMemo(() => {
+    const inferred = [...subscribesTo];
+    if (selectProps) {
+      inferred.push(...core.inferFieldsFromDescriptor(selectProps));
+    }
+    if (conditions.length > 0) {
+      inferred.push(...core.inferFieldsFromConditions(conditions));
+    }
+    return [...new Set(inferred)];
+  }, [selectProps, conditions, subscribesTo]);
+}
+
+// src/hooks/useConditions.ts
+function useConditions(options) {
+  const { conditions, subscribesTo, props } = options;
+  const { record, methods } = useFormContext();
+  const watchFields = useInferredInputs({
+    conditions,
+    subscribesTo
+  });
+  const watchedValues = reactHookForm.useWatch({
+    control: methods.control,
+    name: watchFields.length > 0 ? watchFields : []
+  });
+  const fieldValues = react.useMemo(() => {
+    const values = {};
+    if (watchFields.length === 0) {
+      return values;
+    }
+    if (Array.isArray(watchedValues)) {
+      watchFields.forEach((field, i) => {
+        values[field] = watchedValues[i];
+      });
+    } else {
+      values[watchFields[0]] = watchedValues;
+    }
+    return values;
+  }, [watchFields, watchedValues]);
+  const fieldStates = react.useMemo(() => {
+    const states = {};
+    if (watchFields.length === 0) {
+      return states;
+    }
+    watchFields.forEach((fieldName) => {
+      const fieldState = methods.getFieldState(fieldName);
+      states[fieldName] = {
+        value: fieldValues[fieldName],
+        isTouched: fieldState.isTouched,
+        isDirty: fieldState.isDirty,
+        error: fieldState.error,
+        invalid: fieldState.invalid,
+        isValidating: false
+        // Not easily available per-field
+      };
+    });
+    return states;
+  }, [watchFields, fieldValues, methods]);
+  return react.useMemo(() => {
+    if (conditions.length === 0) {
+      return {
+        disabled: void 0,
+        visible: void 0,
+        setValue: void 0,
+        hasDisabledCondition: false,
+        hasVisibleCondition: false,
+        hasSetCondition: false
+      };
+    }
+    return core.evaluateConditions({
+      conditions,
+      fieldValues,
+      fieldStates,
+      record,
+      props
+    });
+  }, [conditions, fieldValues, fieldStates, record, props]);
+}
+function usePropsEvaluation(options) {
+  const { selectProps, subscribesTo, fieldName } = options;
+  const { record, methods } = useFormContext();
+  const watchFields = useInferredInputs({
+    selectProps,
+    subscribesTo
+  });
+  const watchedValues = reactHookForm.useWatch({
+    control: methods.control,
+    name: watchFields.length > 0 ? watchFields : []
+  });
+  const formState = react.useMemo(() => {
+    const fields = {};
+    if (watchFields.length > 0) {
+      const values = watchFields.length === 1 ? { [watchFields[0]]: watchedValues } : watchFields.reduce((acc, field, i) => {
+        acc[field] = watchedValues[i];
+        return acc;
+      }, {});
+      watchFields.forEach((name) => {
+        fields[name] = makeProxyState({
+          value: values[name],
+          isTouched: false,
+          isDirty: false,
+          isValidating: false,
+          error: void 0,
+          invalid: false
+        });
+      });
+    }
+    return {
+      fields,
+      record: record ?? {},
+      errors: {},
+      defaultValues: {},
+      touchedFields: {},
+      dirtyFields: {},
+      isDirty: false,
+      isTouched: false,
+      isValid: true,
+      isSubmitting: false
+    };
+  }, [watchFields, watchedValues, record]);
+  return react.useMemo(() => {
+    if (!selectProps) {
+      return {};
+    }
+    if (typeof selectProps === "function") {
+      const result2 = selectProps(formState, methods);
+      return result2 ?? {};
+    }
+    const context = core.buildFieldContext(formState, fieldName);
+    const result = core.evaluateDescriptor(selectProps, context);
+    return result ?? {};
+  }, [selectProps, formState, methods, fieldName]);
+}
+function useSubscriptions(fieldName, subscriptions) {
+  const { addSubscription, removeSubscription } = useFormContext();
+  const prevSubscriptionsRef = react.useRef([]);
+  react.useEffect(() => {
+    const prevSubscriptions = prevSubscriptionsRef.current;
+    const toRemove = prevSubscriptions.filter(
+      (target) => !subscriptions.includes(target)
+    );
+    const toAdd = subscriptions.filter(
+      (target) => !prevSubscriptions.includes(target)
+    );
+    toRemove.forEach((target) => {
+      removeSubscription(target, fieldName);
+    });
+    toAdd.forEach((target) => {
+      addSubscription(target, fieldName);
+    });
+    prevSubscriptionsRef.current = subscriptions;
+    return () => {
+      subscriptions.forEach((target) => {
+        removeSubscription(target, fieldName);
+      });
+    };
+  }, [fieldName, subscriptions, addSubscription, removeSubscription]);
+}
+function Field({
+  name,
+  type: typeProp,
+  disabled: disabledProp,
+  hidden: hiddenProp,
+  children,
+  shouldRegister = true,
+  ...restProps
+}) {
+  const {
+    config,
+    formConfig,
+    methods,
+    registerField,
+    unregisterField,
+    registerWatcherSetter,
+    unregisterWatcherSetter,
+    changeField,
+    setFieldValidating
+  } = useFormContext();
+  const providerConfig = useConfigContext();
+  const groupContext = useGroupContext();
+  const fieldConfig = config[name] ?? {};
+  const type = typeProp ?? fieldConfig.type ?? "textField";
+  const inputConfig = react.useMemo(() => {
+    const formInputs = typeof formConfig.inputs === "function" ? formConfig.inputs(providerConfig.inputs) : formConfig.inputs ?? {};
+    const mergedInputs = { ...providerConfig.inputs };
+    for (const [key, override] of Object.entries(formInputs)) {
+      if (mergedInputs[key]) {
+        mergedInputs[key] = { ...mergedInputs[key], ...override };
+      }
+    }
+    return core.resolveInputConfig(type, mergedInputs) ?? { component: "input", defaultValue: "" };
+  }, [type, providerConfig.inputs, formConfig.inputs]);
+  react.useEffect(() => {
+    if (shouldRegister) {
+      registerField(name);
+      return () => unregisterField(name);
+    }
+  }, [name, shouldRegister, registerField, unregisterField]);
+  const [watchers, setWatchers] = react.useState({});
+  react.useEffect(() => {
+    registerWatcherSetter(name, setWatchers);
+    return () => unregisterWatcherSetter(name);
+  }, [name, registerWatcherSetter, unregisterWatcherSetter]);
+  const inferredSubscriptions = useInferredInputs({
+    selectProps: fieldConfig.selectProps,
+    conditions: fieldConfig.conditions,
+    subscribesTo: fieldConfig.subscribesTo
+  });
+  const allSubscriptions = react.useMemo(() => {
+    return [.../* @__PURE__ */ new Set([...inferredSubscriptions, ...groupContext.subscriptions])];
+  }, [inferredSubscriptions, groupContext.subscriptions]);
+  useSubscriptions(name, allSubscriptions);
+  const conditionResult = useConditions({
+    conditions: fieldConfig.conditions ?? [],
+    subscribesTo: fieldConfig.subscribesTo,
+    props: { name }
+  });
+  const setValueRef = react.useRef(methods.setValue);
+  setValueRef.current = methods.setValue;
+  const getValuesRef = react.useRef(methods.getValues);
+  getValuesRef.current = methods.getValues;
+  const effectiveSetValue = react.useMemo(() => {
+    if (conditionResult.hasSetCondition) {
+      return { hasCondition: true, value: conditionResult.setValue };
+    }
+    if (groupContext.state.hasSetCondition) {
+      return { hasCondition: true, value: groupContext.state.setValue };
+    }
+    return { hasCondition: false, value: void 0 };
+  }, [
+    conditionResult.hasSetCondition,
+    conditionResult.setValue,
+    groupContext.state.hasSetCondition,
+    groupContext.state.setValue
+  ]);
+  react.useEffect(() => {
+    if (effectiveSetValue.hasCondition && effectiveSetValue.value !== void 0) {
+      const currentValue = getValuesRef.current(name);
+      if (currentValue !== effectiveSetValue.value) {
+        setValueRef.current(name, effectiveSetValue.value, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: false
+        });
+      }
+    }
+  }, [effectiveSetValue.hasCondition, effectiveSetValue.value, name]);
+  const isDisabled = react.useMemo(() => {
+    if (disabledProp !== void 0) return disabledProp;
+    if (fieldConfig.disabled !== void 0) return fieldConfig.disabled;
+    if (conditionResult.hasDisabledCondition)
+      return conditionResult.disabled ?? false;
+    if (groupContext.state.isDisabled) return true;
+    return false;
+  }, [
+    disabledProp,
+    fieldConfig.disabled,
+    conditionResult,
+    groupContext.state.isDisabled
+  ]);
+  const isVisible = react.useMemo(() => {
+    if (hiddenProp !== void 0) return !hiddenProp;
+    if (fieldConfig.hidden !== void 0) return !fieldConfig.hidden;
+    if (conditionResult.hasVisibleCondition)
+      return conditionResult.visible ?? true;
+    if (!groupContext.state.isVisible) return false;
+    return true;
+  }, [hiddenProp, fieldConfig.hidden, conditionResult, groupContext.state.isVisible]);
+  const evaluatedSelectProps = usePropsEvaluation({
+    selectProps: fieldConfig.selectProps,
+    subscribesTo: fieldConfig.subscribesTo,
+    fieldName: name
+  });
+  const label = react.useMemo(() => {
+    return core.resolveLabel(name, fieldConfig, evaluatedSelectProps, restProps);
+  }, [name, fieldConfig, evaluatedSelectProps, restProps]);
+  const validationRules = react.useMemo(() => {
+    return {
+      ...fieldConfig.rules,
+      validate: async (value) => {
+        setFieldValidating(name, true);
+        try {
+          if (fieldConfig.validator) {
+            const result = await core.runValidator(
+              fieldConfig.validator,
+              value,
+              methods.getValues(),
+              providerConfig.validators
+            );
+            if (result !== true && result !== void 0) {
+              return core.resolveErrorMessage(result, providerConfig.errorMessages);
+            }
+          }
+          if (inputConfig.validator) {
+            const result = await core.runValidator(
+              inputConfig.validator,
+              value,
+              methods.getValues(),
+              providerConfig.validators
+            );
+            if (result !== true && result !== void 0) {
+              return core.resolveErrorMessage(result, providerConfig.errorMessages);
+            }
+          }
+          return true;
+        } finally {
+          setFieldValidating(name, false);
+        }
+      }
+    };
+  }, [
+    fieldConfig.rules,
+    fieldConfig.validator,
+    inputConfig.validator,
+    methods,
+    providerConfig.validators,
+    providerConfig.errorMessages,
+    name,
+    setFieldValidating
+  ]);
+  const handleChange = react.useCallback(
+    (onChange) => (newValue) => {
+      const parsedValue = core.parse(
+        newValue,
+        inputConfig.parser,
+        providerConfig.parsers
+      );
+      onChange(parsedValue);
+      changeField(name, parsedValue);
+    },
+    [inputConfig.parser, providerConfig.parsers, changeField, name]
+  );
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      control: methods.control,
+      name,
+      rules: validationRules,
+      render: ({ field, fieldState, formState }) => {
+        const formattedValue = core.format(
+          field.value,
+          inputConfig.formatter,
+          providerConfig.formatters
+        );
+        const finalProps = core.mergeFieldProps({
+          providerDefaultFieldProps: providerConfig.defaultFieldProps,
+          providerSelectDefaultFieldProps: {},
+          // Evaluated at provider level if needed
+          formDefaultFieldProps: formConfig.defaultFieldProps,
+          formSelectDefaultFieldProps: {},
+          // Evaluated at form level if needed
+          inputProps: inputConfig.props,
+          fieldConfigProps: fieldConfig.props,
+          selectProps: evaluatedSelectProps,
+          componentProps: restProps,
+          coreProps: {
+            name,
+            label,
+            disabled: isDisabled,
+            error: fieldState.error?.message,
+            [inputConfig.inputFieldProp ?? "value"]: formattedValue,
+            onChange: handleChange(field.onChange),
+            onBlur: field.onBlur,
+            ref: field.ref
+          }
+        });
+        const Component = inputConfig.component;
+        const template = inputConfig.template ?? providerConfig.inputTemplates[type] ?? providerConfig.defaultInputTemplate;
+        const TemplateComponent = template;
+        const renderedField = TemplateComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+          TemplateComponent,
+          {
+            Field: Component,
+            fieldProps: finalProps,
+            fieldState,
+            formState
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(Component, { ...finalProps });
+        if (typeof children === "function") {
+          const result = children({
+            fieldState,
+            renderedField,
+            fieldProps: finalProps,
+            watchers,
+            formState
+          });
+          return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: result });
+        }
+        return renderedField;
+      }
+    }
+  );
+}
+function FieldGroup({ name, children }) {
+  const { formConfig } = useFormContext();
+  const parentContext = useGroupContext();
+  const groupConfig = formConfig.groups?.[name] ?? {
+    conditions: [],
+    subscribesTo: []
+  };
+  if (process.env.NODE_ENV !== "production" && !formConfig.groups?.[name]) {
+    console.warn(
+      `FieldGroup: No config found for group "${name}". Make sure to define it in formConfig.groups.`
+    );
+  }
+  const inferredInputs = useInferredInputs({
+    conditions: groupConfig.conditions,
+    subscribesTo: groupConfig.subscribesTo
+  });
+  const conditionResult = useConditions({
+    conditions: groupConfig.conditions ?? [],
+    subscribesTo: groupConfig.subscribesTo
+  });
+  const mergedState = react.useMemo(() => {
+    const isDisabled = (conditionResult.hasDisabledCondition ? conditionResult.disabled ?? false : false) || parentContext.state.isDisabled;
+    const isVisible = (conditionResult.hasVisibleCondition ? conditionResult.visible ?? true : true) && parentContext.state.isVisible;
+    const hasSetCondition = conditionResult.hasSetCondition || parentContext.state.hasSetCondition;
+    const setValue = conditionResult.hasSetCondition ? conditionResult.setValue : parentContext.state.setValue;
+    const conditions = [
+      ...parentContext.state.conditions,
+      ...groupConfig.conditions ?? []
+    ];
+    const subscriptions = [
+      ...parentContext.state.subscriptions,
+      ...groupConfig.subscribesTo ?? []
+    ];
+    return {
+      isDisabled,
+      isVisible,
+      hasSetCondition,
+      setValue,
+      conditions,
+      subscriptions
+    };
+  }, [conditionResult, parentContext.state, groupConfig]);
+  const contextValue = react.useMemo(
+    () => ({
+      state: mergedState,
+      subscriptions: mergedState.subscriptions,
+      inferredInputs,
+      config: groupConfig
+    }),
+    [mergedState, inferredInputs, groupConfig]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      style: { display: mergedState.isVisible ? void 0 : "none" },
+      "data-formality-group": name,
+      children
+    }
+  ) });
+}
+function UnusedFields({ children }) {
+  const { unusedFields, config } = useFormContext();
+  const sortedFields = react.useMemo(() => {
+    return core.sortFieldsByOrder(unusedFields, config);
+  }, [unusedFields, config]);
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sortedFields.map(
+      (name) => children({
+        name,
+        // CRITICAL: shouldRegister={false} prevents infinite loop (PRD 5.5, 18.9)
+        component: /* @__PURE__ */ jsxRuntime.jsx(Field, { name, shouldRegister: false }, name)
+      })
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sortedFields.map((name) => (
+    // CRITICAL: shouldRegister={false} prevents infinite loop (PRD 5.5, 18.9)
+    /* @__PURE__ */ jsxRuntime.jsx(Field, { name, shouldRegister: false }, name)
+  )) });
+}
+function useFormState(options) {
+  const rhfContext = reactHookForm.useFormContext();
+  let formalityContext = null;
+  try {
+    formalityContext = useFormContext();
+  } catch {
+  }
+  const fieldNames = react.useMemo(() => {
+    return Array.isArray(options.name) ? options.name : [options.name];
+  }, [options.name]);
+  const watchedValues = reactHookForm.useWatch({
+    control: rhfContext.control,
+    name: fieldNames
+  });
+  const fields = react.useMemo(() => {
+    const result2 = {};
+    if (fieldNames.length === 0) {
+      return result2;
+    }
+    const values = fieldNames.length === 1 ? [watchedValues] : watchedValues;
+    fieldNames.forEach((name, index) => {
+      const value = values[index];
+      result2[name] = makeProxyState({
+        value,
+        isTouched: false,
+        isDirty: false,
+        isValidating: false,
+        error: void 0,
+        invalid: false
+      });
+    });
+    return result2;
+  }, [fieldNames, watchedValues]);
+  const result = react.useMemo(() => {
+    const base = {
+      fields,
+      record: {},
+      // Will be overwritten by defineProperty
+      // Provide minimal form-level state that doesn't require subscriptions
+      isDirty: false,
+      isTouched: false,
+      isValid: true,
+      isSubmitting: false,
+      errors: {},
+      touchedFields: {},
+      dirtyFields: {},
+      defaultValues: {}
+    };
+    Object.defineProperty(base, "record", {
+      get: () => formalityContext?.record ?? {},
+      enumerable: true,
+      configurable: true
+    });
+    return base;
+  }, [fields, formalityContext?.record]);
+  return result;
+}
+
+exports.ConfigContext = ConfigContext;
+exports.Field = Field;
+exports.FieldGroup = FieldGroup;
+exports.Form = Form;
+exports.FormContext = FormContext;
+exports.FormalityProvider = FormalityProvider;
+exports.GroupContext = GroupContext;
+exports.UnusedFields = UnusedFields;
+exports.makeDeepProxyState = makeDeepProxyState;
+exports.makeProxyState = makeProxyState;
+exports.useConditions = useConditions;
+exports.useConfigContext = useConfigContext;
+exports.useFormContext = useFormContext;
+exports.useFormState = useFormState;
+exports.useGroupContext = useGroupContext;
+exports.useInferredInputs = useInferredInputs;
+exports.usePropsEvaluation = usePropsEvaluation;
+exports.useSubscriptions = useSubscriptions;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map