react-simple-formkit 2.3.0 → 2.4.1

package/README.md

@@ -1,6 +1,6 @@
 # React Simple FormKit
 
-Supports managing forms as uncontrolled. State updates only when watched. Simple and quick to configure with outstanding efficiency.
+A lightweight library for managing forms as uncontrolled. State updates only when actively watched. Simple and quick to configure with outstanding efficiency.
 
 # Table of Contents
 
@@ -8,22 +8,25 @@ Supports managing forms as uncontrolled. State updates only when watched. Simple
 - [Features](#features)
 - [Quick start](#quick-start)
 - [Core concepts](#core-concepts)
-  - [Modes of input field](#modes-of-input-field)
+  - [Input Field Modes](#input-field-modes)
   - [Watching for updates](#watching-for-updates)
   - [The Power of watch (Unified Observation)](#the-power-of-watch-unified-observation)
-- [Manage values](#manage-values)
+- [Managing values](#managing-values)
   - [Get value](#get-value)
   - [Set value](#set-value)
   - [Default values and reset](#default-values-and-reset)
-- [Manage form state](#manage-form-state)
+- [Managing form state](#managing-form-state)
   - [Get form state](#get-form-state)
   - [Set form state](#set-form-state)
-- [Manage field states](#manage-field-states)
+- [Managing field states](#managing-field-states)
   - [Get field states](#get-field-states)
   - [Set field states](#set-field-states)
-- [Manage errors](#manage-errors)
+- [Managing errors](#managing-errors)
   - [Get field error](#get-field-error)
   - [Set field error](#set-field-error)
+- [Grouping fields (nested object)](#grouping-fields-nested-object)
+- [Utilities](#utilities)
+  - [restoreFromDotNotation](#restoreFromDotNotation)
 - [APIs](#apis)
   - [useForm](#useForm)
   - [Form](#form)
@@ -47,14 +50,15 @@ Supports managing forms as uncontrolled. State updates only when watched. Simple
 
 # Features
 
-- **Lightweight**: only ~**15KB**
-- **Easy setup**: simple and quick configuration
-- **Optimized for uncontrolled forms**: no unnecessary re-renders
+- **Lightweight**: Only ~**15KB**
+- **Easy setup**: Simple and quick configuration
+- **Optimized for uncontrolled forms**: No unnecessary re-renders
 - Comprehensive form management:
-  - [Values](#manage-values): get/set values, defaults, reset, ...
-  - [Form state](#manage-form-state): isDirty, isError, dirtyFields, touchedFields, errorFields, ...
-  - [Field states](#manage-field-states): isDirty, isTouched, isError, custom states, ...
-  - [Errors](#manage-errors): form errors, field errors, ...
+  - [Managing values](#managing-values): get/set values, defaults, reset, ...
+  - [Managing form state](#managing-form-state): isDirty, isError, dirtyFields, touchedFields, errorFields, ...
+  - [Managing field states](#managing-field-states): isDirty, isTouched, isError, custom states, ...
+  - [Managing errors](#managing-errors): form errors, field errors, ...
+  - [Grouping fields (nested object)](#grouping-fields-nested-object): Supports nested fields with dot notation.
 
 # Quick start
 
@@ -79,9 +83,7 @@ return (
 
 # Core concepts
 
-## Modes of input field
-
-React Simple FormKit provides three flexible modes to help you balance performance and feature requirements.
+## Input Field Modes
 
 ### 1. `Uncontrolled`:
 
@@ -89,7 +91,7 @@ React Simple FormKit provides three flexible modes to help you balance performan
 
 - **Use Cases**:
   - Standard HTML inputs (e.g. `<input>`, `<textarea>`, `<select>`...)
-  - UI library components that are simple wrappers around these native elements that still follow the browser's standard behavior
+  - UI library components that act as simple wrappers around native elements and follow standard browser behavior
 
 - **How it works**: The browser manages form by default. However, you still maintain **full visibility**: you can [watch](#watching-for-updates) the entire form state, field states, and values.
 
@@ -99,7 +101,8 @@ React Simple FormKit provides three flexible modes to help you balance performan
 
 **Best for**: Absolute control over input or complex UIs.
 
-**Use Cases**: Advanced UI components with complex **INPUT AND OUTPUT** . For example, a multiple select component expects an array as its input/output, but your form state might need to store the value as a string.
+- **Use Cases**:
+  - Advanced UI components with complex **INPUTS AND OUTPUTS**. For example, a multiple select component expects an array as its input/output, but your form state might need to store the value as a string.
 
 By using `Controller`, you can transform the value in both directions:
 
@@ -116,11 +119,12 @@ Example:
 ```
 <Controller
   name="multipleSelect"
-  render={({ value = "", onChange, name }) => {
+  render={({ value = "", onChange, onBlur, name }) => {
     return (
       <Select
         multiple
         name={name}
+        onBlur={onBlur}
         value={value.split(",")}
         onChange={(e) => {
           const value = e.target.value;
@@ -137,50 +141,44 @@ Example:
 />
 ```
 
-### `Full Example`
+Example `fieldState`:
 
-```
-const { control, actions } = useForm();
+- Only when you get `fieldState` from render props, `Controller` will auto subscribe to fieldState changes.
+- If you need to set custom `fieldState`, you can use [`actions.setFieldState`](#useform).
 
-return (
-  <Form control={control} onChange={console.log}>
-    {/* Uncontrolled */}
-    <input name="number1" placeholder="Enter a number" />
-    {/* Controlled by Controller. And the value at this field can be controlled by actions.setValue() */}
-    <Controller
-      name="multipleSelect"
-      render={({ value = "", onChange, name }) => {
-        return (
-          <Select
-            multiple
-            name={name}
-            value={value.split(",")}
-            onChange={(e) => {
-              const value = e.target.value;
-              // value as array by default but on autofill value as string
-              onChange(typeof value === "string" ? value : value.join(","));
-            }}
-          >
-            <MenuItem value="10">Ten</MenuItem>
-            <MenuItem value="20">Twenty</MenuItem>
-            <MenuItem value="30">Thirty</MenuItem>
-          </Select>
-        );
-      }}
-    />
-    <button type="button" onClick={() => alert(JSON.stringify(actions.getValues()))}>
-      Get value
-    </button>
-    <button type="submit">Submit</button>
-  </Form>
-)
 ```
-
-> **Rule\*:** All fields in the form must follow one of the three modes above to ensure the form works correctly
+<Controller
+  name="multipleSelect"
+  render={({ value = "", onChange, onBlur, name, fieldState }) => {
+    if(fieldState.hidden) return null
+    return (
+      <FormControl error={Boolean(fieldState.error)}>
+        <Select
+          multiple
+          name={name}
+          onBlur={onBlur}
+          value={value.split(",")}
+          error
+          onChange={(e) => {
+            const value = e.target.value;
+            // value as array by default but on autofill value as string
+            onChange(typeof value === "string" ? value : value.join(","));
+          }}
+        >
+          <MenuItem value="10">Ten</MenuItem>
+          <MenuItem value="20">Twenty</MenuItem>
+          <MenuItem value="30">Thirty</MenuItem>
+        </Select>
+        <FormHelperText>{fieldState.error}</FormHelperText>
+      </FormControl>
+    );
+  }}
+/>
+```
 
 ## Watching for updates
 
-State updates only when observed via `watch()`, `useWatch()`, `subscribe()`, or by tracking changes through the Form component's `onChange`, `onBlur` callbacks. You can watch Values, Form States, Field States, and Errors through the same interface.
+State updates only when observed via `watch()`, `useWatch()`, `subscribe()`, or by tracking changes through the Form component's `onChange`, `onBlur` callbacks. You can watch Values, Form States, Field States, and Errors through the same name interface.
 
 - [watch(name)](#watch) will trigger a re-render at the form level.
 - [useWatch({ name })](#usewatch) will trigger a re-render only in the component where it is called.
@@ -189,6 +187,7 @@ State updates only when observed via `watch()`, `useWatch()`, `subscribe()`, or
 - [onBlur](#form) is just a handler callback that is called when field blurred.
 - [actions.subscribe('onChange', callback)](#useform) subscribe onChange callback instead of passing `onChange` in [Form](#form) component.
 - [actions.subscribe('onBlur', callback)](#useform) subscribe onBlur callback instead of passing `onBlur` in [Form](#form) component.
+- [actions.trigger(name)](#actions.trigger) trigger watchers (e.g. `watch`, `useWatch`, `subscribe`) re-update values if needed.
 
 > **Rule\*:** By default, onBlur works automatically for uncontrolled fields. However, for controlled fields, you must explicitly pass the onBlur prop when rendering the field.
 
@@ -207,7 +206,7 @@ The `watch` function (and `useWatch`, `subscribe`) is the "brain" of your form.
 
 > **💡Why it matters\*:** This unified approach ensures you only need to learn one API to track the entire lifecycle of your form.
 
-# Manage values
+# Managing values
 
 ## Get value
 
@@ -289,7 +288,7 @@ return (
 );
 ```
 
-# Manage form state
+# Managing form state
 
 ## Set form state
 
@@ -317,7 +316,7 @@ console.log(actions.getFormState(["isDirty", "isError"]))
 
 > **Note\*:** watch(), useWatch(), and subscribe() share the same name format.
 
-# Manage field states
+# Managing field states
 
 ## Set field states
 
@@ -343,7 +342,7 @@ console.log(actions.getFieldStates(["fieldStates.fieldName.isDirty", "fieldState
 
 > **Note\*:** watch(), useWatch(), and subscribe() share the same name format.
 
-# Manage errors
+# Managing errors
 
 ## Get field error
 
@@ -379,6 +378,72 @@ return (
 )
 ```
 
+# Grouping fields (nested object)
+
+- **Use cases**: When you need to group multiple fields into an object. By registering these fields with dot notation, you can manage these fieldStates, errors, values as a nested object.
+
+- **Example**: Suppose an address has two fields, line1 and line2. You want to track their individual states (fieldStates, errors, values) separately, but you also need to group them under a single address object for easier management and form submission.
+
+## Registering
+
+```
+// uncontrolled
+<input name="address.line1" />
+<input name="address.line2" />
+<input name="address.line3" />
+// controlled
+<Controller
+  name="address.line4"
+  render={({ value = "", onChange }) => {
+    return <input value={value} onChange={onChange} />;
+  }}
+/>
+```
+
+> **Rule\***: Nested fields must be registered using dot notation through inputs or Controllers `name` prop. If not registered, the field will be treated as a regular field with an object type value.
+
+## Watching
+
+```
+const addressValue = watch("address")
+const addressLine1 = watch("address.line1")
+const addressLine1Error = watch("errors.address.line1")
+const addressLine1FieldState = watch("fieldStates.address.line1")
+```
+
+## Updating
+
+```
+const { actions } = useForm()
+actions.setValue("address.line1", "hello")
+actions.setError("address.line1", "error message")
+actions.setFieldState("address.line1", "hidden", true)
+actions.setFieldState("address.line1", "disabled", true)
+actions.setFieldState("address.line1", "custom", { hello: "world" })
+```
+
+> **Rule\***: If nested field is registered, all the fieldState, error, and value will be stored in the bottom level fields (leaf nodes). You cannot set a primitive value for a parent field.
+
+# Utilities
+
+## restoreFromDotNotation(object)
+
+Convert dot notation objects to nested objects
+
+```
+import { restoreFromDotNotation } from "react-simple-formkit";
+
+const dotNotationObject = watch(["errors.email", "errors.password"])
+const nestedObject = restoreFromDotNotation(dotNotationObject)
+// Output:
+// {
+//   "errors": {
+//     "email": "Email is required",
+//     "password": "Password is required",
+//   }
+// }
+```
+
 # APIs
 
 ## useForm
@@ -393,13 +458,13 @@ Generic props:
 Return:
 
 - `control`: contains methods and utilities to control the form.
-- `watch(name)`: `Function` [Example](#manage-values)
+- `watch(name)`: `Function` [Example](#managing-values)
 - `actions` is an object that contains utilities
   - `actions.reset()`: `(newDefaultValues?: Object, options?: { clearCustomFormStates?: Boolean, clearCustomFieldStates?: Boolean }) => void` [Example](#default-values-and-reset)
-  - `actions.getValues()`: `(name?: String | Array) => Object` [Example](#manage-values)
-  - `actions.getErrors()`: `(name?: String | Array) => Object` [Example](#manage-errors)
-  - `actions.getFormState()`: `(name?: String | Array) => Object` [Example](#manage-form-state)
-  - `actions.getFieldStates()`: `(name?: String | Array) => Object` [Example](#manage-field-states)
+  - `actions.getValues()`: `(name?: String | Array) => Object` [Example](#managing-values)
+  - `actions.getErrors()`: `(name?: String | Array) => Object` [Example](#managing-errors)
+  - `actions.getFormState()`: `(name?: String | Array) => Object` [Example](#managing-form-state)
+  - `actions.getFieldStates()`: `(name?: String | Array) => Object` [Example](#managing-field-states)
   - `actions.setValue()`: `(name: String, value: Any, options?: { shouldDirty?: Boolean, shouldTouched?: Boolean }) => void` [Example](#set-value)
   - `actions.setError()`: `(name: String, error: Any) => void` [Example](#set-field-error)
   - `actions.setFieldState()`: `(name: String, property: String, value: Any) => void` [Example](#set-field-states)
@@ -413,6 +478,7 @@ Return:
   - `actions.subscribeBlur()`: `(callback) => unsubscribe: Function()`
   - `actions.getNumberFields()`: `() => Array`
   - `actions.getDefaultValues()`: `() => Object`
+  - `actions.trigger(name)`: `(name: String | Array) => void` trigger watchers (e.g. `watch`, `useWatch`, `subscribe`) re-update values if needed.
 
 ## Form
 
@@ -442,7 +508,7 @@ Return: everything in render function above
 
 ## useWatch
 
-[Example](#manage-values)
+[Example](#managing-values)
 
 Generic props:
 
@@ -490,4 +556,4 @@ Return:
 
 # Contact
 
-For any ideas or issues, please get in touch with me at **anhhuy2000@gmail.com**
+For any ideas or issues, please contact me at **anhhuy2000@gmail.com**

package/dist/react-simple-formkit.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");var te={exports:{}},z={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");var ne={exports:{}},H={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var ie;function Se(){if(ie)return z;ie=1;var s=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function h(R,g,k){var d=null;if(k!==void 0&&(d=""+k),g.key!==void 0&&(d=""+g.key),"key"in g){k={};for(var C in g)C!=="key"&&(k[C]=g[C])}else k=g;return g=k.ref,{$$typeof:s,type:R,key:d,ref:g!==void 0?g:null,props:k}}return z.Fragment=o,z.jsx=h,z.jsxs=h,z}var G={};/**
+ */var ie;function ke(){if(ie)return H;ie=1;var u=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function o(i,a,f){var c=null;if(f!==void 0&&(c=""+f),a.key!==void 0&&(c=""+a.key),"key"in a){f={};for(var b in a)b!=="key"&&(f[b]=a[b])}else f=a;return a=f.ref,{$$typeof:u,type:i,key:c,ref:a!==void 0?a:null,props:f}}return H.Fragment=t,H.jsx=o,H.jsxs=o,H}var X={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var fe;function ye(){return fe||(fe=1,process.env.NODE_ENV!=="production"&&function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===B?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case N:return"Profiler";case A:return"StrictMode";case ne:return"Suspense";case ue:return"SuspenseList";case X:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case n:return"Portal";case I:return(e.displayName||"Context")+".Provider";case Y:return(e._context.displayName||"Context")+".Consumer";case se:var f=e.render;return e=e.displayName,e||(e=f.displayName||f.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case oe:return f=e.displayName||null,f!==null?f:s(e.type)||"Memo";case j:f=e._payload,e=e._init;try{return s(e(f))}catch{}}return null}function o(e){return""+e}function h(e){try{o(e);var f=!1}catch{f=!0}if(f){f=console;var S=f.error,F=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return S.call(f,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",F),o(e)}}function R(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===j)return"<...>";try{var f=s(e);return f?"<"+f+">":"<...>"}catch{return"<...>"}}function g(){var e=W.A;return e===null?null:e.getOwner()}function k(){return Error("react-stack-top-frame")}function d(e){if(L.call(e,"key")){var f=Object.getOwnPropertyDescriptor(e,"key").get;if(f&&f.isReactWarning)return!1}return e.key!==void 0}function C(e,f){function S(){Q||(Q=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",f))}S.isReactWarning=!0,Object.defineProperty(e,"key",{get:S,configurable:!0})}function v(){var e=s(this.type);return K[e]||(K[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function b(e,f,S,F,x,O,q,J){return S=O.ref,e={$$typeof:i,type:e,key:f,props:O,_owner:x},(S!==void 0?S:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:v}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function u(e,f,S,F,x,O,q,J){var T=f.children;if(T!==void 0)if(F)if(Z(T)){for(F=0;F<T.length;F++)c(T[F]);Object.freeze&&Object.freeze(T)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(T);if(L.call(f,"key")){T=s(e);var P=Object.keys(f).filter(function(ae){return ae!=="key"});F=0<P.length?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}",re[T+F]||(P=0<P.length?"{"+P.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var fe;function ye(){return fe||(fe=1,process.env.NODE_ENV!=="production"&&function(){function u(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===ue?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case v:return"Fragment";case j:return"Profiler";case F:return"StrictMode";case oe:return"Suspense";case Z:return"SuspenseList";case Q:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case S:return"Portal";case M:return(r.displayName||"Context")+".Provider";case N:return(r._context.displayName||"Context")+".Consumer";case U:var g=r.render;return r=r.displayName,r||(r=g.displayName||g.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case B:return g=r.displayName||null,g!==null?g:u(r.type)||"Memo";case y:g=r._payload,r=r._init;try{return u(r(g))}catch{}}return null}function t(r){return""+r}function o(r){try{t(r);var g=!1}catch{g=!0}if(g){g=console;var p=g.error,_=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return p.call(g,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",_),t(r)}}function i(r){if(r===v)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===y)return"<...>";try{var g=u(r);return g?"<"+g+">":"<...>"}catch{return"<...>"}}function a(){var r=J.A;return r===null?null:r.getOwner()}function f(){return Error("react-stack-top-frame")}function c(r){if(K.call(r,"key")){var g=Object.getOwnPropertyDescriptor(r,"key").get;if(g&&g.isReactWarning)return!1}return r.key!==void 0}function b(r,g){function p(){re||(re=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",g))}p.isReactWarning=!0,Object.defineProperty(r,"key",{get:p,configurable:!0})}function d(){var r=u(this.type);return x[r]||(x[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),r=this.props.ref,r!==void 0?r:null}function m(r,g,p,_,W,D,q,G){return p=D.ref,r={$$typeof:O,type:r,key:g,props:D,_owner:W},(p!==void 0?p:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:d}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:G}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function l(r,g,p,_,W,D,q,G){var A=g.children;if(A!==void 0)if(_)if(ee(A)){for(_=0;_<A.length;_++)R(A[_]);Object.freeze&&Object.freeze(A)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else R(A);if(K.call(g,"key")){A=u(r);var e=Object.keys(g).filter(function(E){return E!=="key"});_=0<e.length?"{key: someKey, "+e.join(": ..., ")+": ...}":"{key: someKey}",z[A+_]||(e=0<e.length?"{"+e.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,F,T,P,T),re[T+F]=!0)}if(T=null,S!==void 0&&(h(S),T=""+S),d(f)&&(h(f.key),T=""+f.key),"key"in f){S={};for(var D in f)D!=="key"&&(S[D]=f[D])}else S=f;return T&&C(S,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,T,O,x,g(),S,q,J)}function c(e){typeof e=="object"&&e!==null&&e.$$typeof===i&&e._store&&(e._store.validated=1)}var l=t,i=Symbol.for("react.transitional.element"),n=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),A=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),Y=Symbol.for("react.consumer"),I=Symbol.for("react.context"),se=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),ue=Symbol.for("react.suspense_list"),oe=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),X=Symbol.for("react.activity"),B=Symbol.for("react.client.reference"),W=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,Z=Array.isArray,U=console.createTask?console.createTask:function(){return null};l={"react-stack-bottom-frame":function(e){return e()}};var Q,K={},ee=l["react-stack-bottom-frame"].bind(l,k)(),_=U(R(k)),re={};G.Fragment=E,G.jsx=function(e,f,S,F,x){var O=1e4>W.recentlyCreatedOwnerStacks++;return u(e,f,S,!1,F,x,O?Error("react-stack-top-frame"):ee,O?U(R(e)):_)},G.jsxs=function(e,f,S,F,x){var O=1e4>W.recentlyCreatedOwnerStacks++;return u(e,f,S,!0,F,x,O?Error("react-stack-top-frame"):ee,O?U(R(e)):_)}}()),G}var de;function ve(){return de||(de=1,process.env.NODE_ENV==="production"?te.exports=Se():te.exports=ye()),te.exports}var be=ve();const y=()=>{},me=t.createContext({ref:null,watch:y,actions:{reset:y,resetField:y,setValue:y,getValues:y,getErrors:y,getFieldStates:y,getFormStates:y,setError:y,clearError:y,clearErrors:y,checkValidity:y,getNumberFields:y,getFieldValidity:y,getDefaultValues:y,setFieldState:y,resetFieldState:y,getControlledFields:y},registerController:y,registerHookWatcher:y,lastReloadedAt:y,loadFormValues:y,getWatchValue:y,channels:{}}),le=()=>t.useContext(me),pe=({id:s,control:o,method:h,action:R,children:g,onChange:k,onBlur:d,onSubmit:C=()=>{},onInput:v=()=>{},onReset:b=()=>{},numberFields:u=[],className:c,...l})=>{const i=t.useCallback(n=>{o.ref&&(o.ref.current=n,o.ref.current&&o.initForm())},[o]);return t.useEffect(()=>{let n=()=>{},E=()=>{};return k&&(n=o.channels.subscribe("onChange",k)),d&&(E=o.channels.subscribe("onBlur",d)),()=>{n(),E()}},[o.lastReloadedAt]),be.jsx(me.Provider,{value:o,children:be.jsx("form",{id:s,ref:i,action:R,method:h,className:c,onInput:v,onSubmit:n=>{h||n.preventDefault();const E=o.loadFormValues();C(E)},onChange:n=>{const E=n.target.name;!E||o.actions.getControlledFields().has(E)||o.actions.setValue(E,n.target.value)},onBlur:n=>{const E=n.target.name;if(!E||o.actions.getControlledFields().has(E))return;const A=n.target.value;o.channels.publish("onBlur",E,A,o.actions.getValues())},onReset:n=>{o.actions.reset(),b(n)},...l,children:g},o.lastReloadedAt)})},Re=({control:s,name:o,compute:h})=>{const{getWatchValue:R,registerHookWatcher:g}=s||le(),k=R({name:o,compute:h}),[d,C]=t.useState(k);return t.useEffect(()=>g({name:o,compute:h,value:d,setValue:C}),[]),d},ke=({name:s,defaultValue:o})=>{const{actions:h,registerController:R,channels:g}=le(),k=t.useRef(),d=h.getDefaultValues()[s]||o||"",[C,v]=t.useState(d),b=Re({name:`fieldStates.${s}`}),u=t.useCallback((l,{shouldDirty:i=!0,shouldOnChange:n=!0}={})=>{var A,N;let E=l;(A=l==null?void 0:l.target)!=null&&A.value&&(E=l.target.value),(N=l==null?void 0:l.target)!=null&&N.checked&&(E=l.target.checked+""),v(E),h.setValue(s,E,{shouldDirty:i,shouldOnChange:n})},[h.setValue]),c=t.useCallback(l=>{const i=h.getValues(),n=l??i[s];g.publish("onBlur",s,n,i)},[]);return t.useEffect(()=>R(s,v),[]),{ref:k,name:s,defaultValue:d,value:C,onChange:u,onBlur:c,fieldState:b}},Fe=({name:s,defaultValue:o,render:h=({ref:R,name:g,defaultValue:k,value:d,onChange:C,onBlur:v,fieldState:b})=>null})=>{const R=ke({name:s,defaultValue:o});return h(R)},Te=["errors","fieldStates","formState"],H=(s={},o="")=>o.split(".").reduce((h,R)=>h&&h[R]!==void 0?h[R]:void 0,s),Ee=(s={},o="",h)=>{const R={...s};let g=s;const k=o.split(".");return k.forEach((d,C)=>{C<k.length-1?(g[d]||(g[d]={}),R[d]={...g[d]},g=R[d]):g[d]=h}),R},V=s=>Te.some(o=>s.startsWith(o))?s:"values."+s,_e=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],ge=s=>{typeof s.setCustomValidity=="function"&&s.setCustomValidity("");let o=s.validity,h=_e.find(R=>o[R]);if(h)return{type:h,message:s.validationMessage}},we=()=>{const s=t.useRef(new Map),o=t.useRef(new Map),h=t.useCallback(()=>o.current,[]),R=t.useCallback(()=>s.current,[]),g=t.useCallback(()=>{s.current.clear(),o.current.clear()},[]),k=t.useCallback((b,...u)=>{const c=s.current.get(b),l=o.current.get(b);c&&c.forEach(i=>i(...u)),l&&l.forEach(i=>i(...u)),s.current.forEach((i,n)=>{n!==b&&b.startsWith(n)&&i.forEach(E=>E(...u))}),o.current.forEach((i,n)=>{n!==b&&b.startsWith(n)&&i.forEach(E=>E(...u))})},[]),d=t.useCallback(b=>{s.current.forEach((u,c)=>{c.startsWith(b)&&u.forEach(l=>l())}),o.current.forEach((u,c)=>{c.startsWith(b)&&u.forEach(l=>l())})},[]),C=t.useCallback((b,u)=>(s.current.has(b)||s.current.set(b,new Set),s.current.get(b).add(u),()=>{var c;return(c=s.current.get(b))==null?void 0:c.delete(u)}),[]),v=t.useCallback((b,u)=>{o.current.has(b)||(o.current.set(b,new Set),o.current.get(b).add(u))},[]);return{reset:g,publish:k,subscribe:C,subscribeWatch:v,getEvents:R,getWatchEvents:h,trigger:d}},Ae=()=>{const[s,o]=t.useState(),h=t.useCallback(()=>o(new Date().toString()),[]);return[s,h]},Oe=()=>{const[,s]=t.useState({});return t.useCallback(()=>s({}),[])},Pe=({channels:s,getValues:o,getErrors:h,getFieldStates:R,getFormState:g})=>{const k=Oe(),d=t.useCallback(({name:u,compute:c})=>{if(typeof c=="function")return c(o());if(Array.isArray(u)){const l={};return u.forEach(i=>{l[i]=d({name:i})}),l}return H({...o(),errors:{...h()},formState:{...g()},fieldStates:{...R()}},u)},[]),C=t.useCallback(u=>{if(!u)return s.subscribeWatch("values",()=>k()),o();if(typeof u=="string"){const c=V(u);return s.subscribeWatch(c,()=>k()),d({name:u})}if(Array.isArray(u)){const c={};return u.forEach(l=>{const i=V(l);s.subscribeWatch(i,()=>k()),c[l]=d({name:l})}),{...c}}throw new Error("Parameters of watch must be string or array of string")},[]),v=t.useCallback(({name:u,compute:c,setValue:l})=>{if(typeof c=="function")return s.subscribe("values",()=>{const n=d({compute:c});l(n)});if(!u)return s.subscribe("values",()=>{l(o())});if(typeof u=="string"){const i=V(u);return s.subscribe(i,()=>{const E=d({name:u});l(E)})}if(Array.isArray(u)){const i=d({name:u}),n=[];return u.forEach(E=>{const A=V(E),N=s.subscribe(A,()=>{const Y=d({name:E});i[E]=Y,l({...i})});n.push(N)}),()=>n.forEach(E=>E())}throw new Error("Parameters of name must be string or array of string or compute must be a function")},[]),b=t.useCallback((u,c)=>{if(!u)return s.subscribe("values",()=>c(o()));if(["onChange","onBlur"].includes(u))return s.subscribe(u,c);if(typeof u=="string"){const l=V(u);return s.subscribe(l,()=>c(d({name:u})))}if(Array.isArray(u)){const l={},i=[];return u.forEach(n=>{const E=V(n),A=s.subscribe(E,()=>{l[n]=d({name:n}),c({...l})});i.push(A)}),()=>i.forEach(n=>n())}throw new Error("Parameters of name must be string or array of string")},[]);return{watch:C,registerHookWatcher:v,getWatchValue:d,subscribe:b}},he={lastReset:null,isDirty:!1,isError:!1,errorFields:[],dirtyFields:[],touchedFields:[]},ce={isDirty:!1,isTouched:!1,error:null},je=[],xe={},Ne=({numberFields:s=je,defaultValues:o=xe,shouldUnRegister:h=!1,shouldConvertNumber:R=!1}={})=>{const[g,k]=Ae(),d=t.useRef(),C=t.useRef(s),v=t.useRef(new Map),b=t.useRef({}),u=t.useRef({}),c=t.useRef({...he}),l=t.useRef({...o}),i=t.useRef({...o}),n=we(),E=t.useCallback(r=>{u.current=Object.keys(i.current).reduce((a,m)=>({...a,[m]:{...r?{}:u.current[m]||{},...ce}}),{})},[]),A=t.useCallback((r={},{clearCustomFormStates:a=!1,clearCustomFieldStates:m=!1}={})=>{i.current={...i.current,...r},l.current={...i.current},v.current.forEach((p,$)=>{p(i.current[$]??"")}),b.current={},c.current={...a?{}:c.current,...he},C.current=s,v.current=new Map,n.reset(),E(m),s.length>0&&(R=!0),k()},[]),N=t.useCallback(()=>{const r=Object.fromEntries(new FormData(d.current));return v.current.forEach((m,p)=>{r[p]=l.current[p]}),R&&C.current.forEach(m=>r.hasOwnProperty(m)&&(r[m]=Number(r[m])||0)),{...l.current,...r}},[]),Y=t.useCallback(()=>!!Object.values(W()).find(r=>r.isDirty),[]),I=t.useCallback(()=>!!Object.values(B()).find(r=>!!r),[]),se=t.useCallback(r=>ge(r.target),[]),ne=t.useCallback(()=>i.current,[]),ue=t.useCallback(()=>C.current,[]),oe=t.useCallback(()=>v.current,[]),j=t.useCallback((r,a)=>a?Array.isArray(a)?a.reduce((m,p)=>({...m,[p]:H(r,p)}),{}):H(r,a):{...r},[]),X=t.useCallback(r=>j(l.current,r),[j]),B=t.useCallback(r=>j(b.current,r),[j]),W=t.useCallback(r=>j(u.current,r),[j]),L=t.useCallback(r=>j({...c.current,lastReset:g},r),[g]),{watch:Z,registerHookWatcher:U,getWatchValue:Q,subscribe:K}=Pe({channels:n,getValues:X,getErrors:B,getFieldStates:W,getFormState:L}),ee=t.useCallback((r,a)=>{const m=c.current;H(m,r)!==a&&(c.current=Ee(c.current,r,a),n.publish(`formState.${r}`,a))},[]),_=t.useCallback((r,a,m)=>{const p=u.current[r]||{...ce};H(p,a)!==m&&(u.current=Ee(u.current,`${r}.${a}`,m),n.publish(`fieldStates.${r}.${a}`,m),a==="error"&&(c.current.errorFields=Object.keys(b.current).filter(w=>!!b.current[w]),n.publish("formState.errorFields",c.current.errorFields)),a==="isDirty"&&(c.current.dirtyFields=Object.keys(u.current).filter(w=>u.current[w].isDirty),n.publish("formState.dirtyFields",c.current.dirtyFields)),a==="isTouched"&&(c.current.touchedFields=Object.keys(u.current).filter(w=>u.current[w].isTouched),n.publish("formState.touchedFields",c.current.touchedFields)))},[]),re=t.useCallback(r=>{_(r,"isDirty",!1),_(r,"isTouched",!1),_(r,"error",null)},[]),e=t.useCallback((r,a)=>{if(b.current[r]===a)return;b.current[r]=a,_(r,"error",a),n.publish(`errors.${r}`,a);const p=I();c.current.isError!==p&&(c.current.isError=p,n.publish("formState.isError",p))},[]),f=t.useCallback(r=>{if(!b.current[r])return;b.current[r]=null,_(r,"error",null),n.publish(`errors.${r}`,null);const a=I();c.current.isError!==a&&(c.current.isError=a,n.publish("formState.isError",a))},[]),S=t.useCallback(()=>{if(Object.keys(b.current)===0)return;Object.keys(b.current).forEach(a=>f(a)),b.current={};const r=I();c.current.isError!==r&&(c.current.isError=r,n.publish("formState.isError",r))},[]),F=t.useCallback(r=>{const a=ge(r.target);a?e(r.target.name,a):f(r.target.name)},[]),x=t.useCallback((r,a,{shouldDirty:m=!0,shouldOnChange:p=!0}={})=>{if(a===l.current[r])return;R&&C.current.includes(r)&&(a=Number(a)||void 0),_(r,"isTouched",!0);const $=a!==i.current[r];m&&u.current[r].isDirty!==$&&_(r,"isDirty",$);const w=Y();c.current.isDirty!==w&&(c.current.isDirty=w,n.publish("formState.isDirty",w)),l.current[r]=a;const M=v.current.get(r);M&&M(a),n.publish(`values.${r}`,a,{shouldDirty:m,shouldOnChange:p}),p&&n.publish("onChange",r,a,l.current)},[]),O=t.useCallback((r,a)=>(v.current.set(r,a),u.current[r]={...ce},()=>{h&&v.current.delete(r)}),[]),q=t.useCallback((r,{keepError:a,keepDirty:m,keepTouched:p,keepCustomState:$,defaultValue:w})=>{const M=v.current.get(r);if(!M)throw new Error(`Cannot reset "${r}" because it's uncontrolled field`);i.current[r]=w,l.current[r]=w,M&&M(w),a||f(r),m||_(r,"isDirty",!1),p||_(r,"isTouched",!1)},[]),J=t.useCallback(r=>{if(!r)return n.trigger("values");if(Array.isArray(r))return r.forEach(m=>{const p=V(m);n.trigger(p)});const a=V(r);n.trigger(a)},[]),T=t.useCallback((r,a=P.getValues(r))=>{n.publish("onBlur",r,a,P.getValues())},[]),P=t.useMemo(()=>({subscribe:K,reset:A,trigger:J,reload:k,resetField:q,setValue:x,getValues:X,getErrors:B,getFieldStates:W,getFormState:L,setError:e,clearError:f,clearErrors:S,checkValidity:F,getNumberFields:ue,getFieldValidity:se,getDefaultValues:ne,setFieldState:_,triggerFieldBlur:T,resetFieldState:re,getControlledFields:oe,setFormState:ee,getEvents:n.getEvents,getWatchEvents:n.getWatchEvents}),[g]),D=t.useCallback(()=>{[...d.current.querySelectorAll("[name]")].forEach(m=>{!m.defaultValue&&!v.current.has(m.name)&&i.current[m.name]&&(m.defaultValue=i.current[m.name]),m.type==="number"&&!C.current.includes(m.name)&&C.current.push(m.name)});const a=N();l.current={...a},i.current={...a}},[]),ae=t.useMemo(()=>({ref:d,watch:Z,actions:P,initForm:D,registerController:O,registerHookWatcher:U,lastReloadedAt:g,loadFormValues:N,getWatchValue:Q,channels:n}),[g]),Ce=t.useMemo(()=>({control:ae,actions:P,watch:Z}),[g]);return t.useLayoutEffect(()=>{d.current&&D()},[g]),t.useLayoutEffect(()=>{E(!1)},[]),Ce};exports.Controller=Fe;exports.Form=pe;exports.useController=ke;exports.useForm=Ne;exports.useFormContext=le;exports.useWatch=Re;
+  <%s key={someKey} {...props} />`,_,A,e,A),z[A+_]=!0)}if(A=null,p!==void 0&&(o(p),A=""+p),c(g)&&(o(g.key),A=""+g.key),"key"in g){p={};for(var n in g)n!=="key"&&(p[n]=g[n])}else p=g;return A&&b(p,typeof r=="function"?r.displayName||r.name||"Unknown":r),m(r,A,D,W,a(),p,q,G)}function R(r){typeof r=="object"&&r!==null&&r.$$typeof===O&&r._store&&(r._store.validated=1)}var C=s,O=Symbol.for("react.transitional.element"),S=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),F=Symbol.for("react.strict_mode"),j=Symbol.for("react.profiler"),N=Symbol.for("react.consumer"),M=Symbol.for("react.context"),U=Symbol.for("react.forward_ref"),oe=Symbol.for("react.suspense"),Z=Symbol.for("react.suspense_list"),B=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),Q=Symbol.for("react.activity"),ue=Symbol.for("react.client.reference"),J=C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,ee=Array.isArray,Y=console.createTask?console.createTask:function(){return null};C={"react-stack-bottom-frame":function(r){return r()}};var re,x={},te=C["react-stack-bottom-frame"].bind(C,f)(),se=Y(i(f)),z={};X.Fragment=v,X.jsx=function(r,g,p,_,W){var D=1e4>J.recentlyCreatedOwnerStacks++;return l(r,g,p,!1,_,W,D?Error("react-stack-top-frame"):te,D?Y(i(r)):se)},X.jsxs=function(r,g,p,_,W){var D=1e4>J.recentlyCreatedOwnerStacks++;return l(r,g,p,!0,_,W,D?Error("react-stack-top-frame"):te,D?Y(i(r)):se)}}()),X}var de;function Fe(){return de||(de=1,process.env.NODE_ENV==="production"?ne.exports=ke():ne.exports=ye()),ne.exports}var be=Fe();const k=()=>{},he=s.createContext({ref:null,watch:k,actions:{reset:k,resetField:k,setValue:k,getValues:k,getErrors:k,getFieldStates:k,getFormStates:k,setError:k,clearError:k,clearErrors:k,checkValidity:k,getNumberFields:k,getFieldValidity:k,getDefaultValues:k,setFieldState:k,resetFieldState:k,getControlledFields:k},registerController:k,registerHookWatcher:k,lastReloadedAt:k,loadFormValues:k,getWatchValue:k,channels:{}}),le=()=>s.useContext(he),Te=({id:u,control:t,method:o,action:i,children:a,onChange:f,onBlur:c,onSubmit:b=()=>{},onInput:d=()=>{},onReset:m=()=>{},numberFields:l=[],className:R,...C})=>{const O=s.useCallback(S=>{t.ref&&(t.ref.current=S,t.ref.current&&t.initForm())},[t]);return s.useEffect(()=>{let S=()=>{},v=()=>{};return f&&(S=t.channels.subscribe("onChange",f)),c&&(v=t.channels.subscribe("onBlur",c)),()=>{S(),v()}},[t.lastReloadedAt]),be.jsx(he.Provider,{value:t,children:be.jsx("form",{id:u,ref:O,action:i,method:o,className:R,onInput:d,onSubmit:S=>{o||S.preventDefault();const v=t.loadFormValues();b(v)},onChange:S=>{const v=S.target.name;!v||t.actions.getControlledFields().has(v)||t.actions.setValue(v,S.target.value)},onBlur:S=>{const v=S.target.name;if(!v||t.actions.getControlledFields().has(v))return;const F=S.target.value;t.channels.publish("onBlur",v,F,t.actions.getValues())},onReset:S=>{t.actions.reset(),m(S)},...C,children:a},t.lastReloadedAt)})},ae={isDirty:!1,isTouched:!1,error:null},Ee={lastReset:null,isDirty:!1,isError:!1,errorFields:[],dirtyFields:[],touchedFields:[]},_e={},Ae=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],P=(u={},t="")=>t.split(".").reduce((o,i)=>o&&o[i]!==void 0?o[i]:void 0,u),$=(u={},t="",o)=>{const i={...u};let a=i;const f=t.split(".");return f.forEach((c,b)=>{b<f.length-1?(a[c]||(a[c]={}),Array.isArray(a[c])?a[c]=[...a[c]]:a[c]={...a[c]},a=a[c]):a[c]=o}),i},me=u=>{let t={...u};return Object.keys(t).forEach(o=>{if(o.includes(".")){const i=P(t,o);t=$(t,o,i||""),delete t[o]}}),t},Oe=["errors","fieldStates","formState"],L=u=>Oe.some(t=>u.startsWith(t))?u:"values."+u,ge=u=>{typeof u.setCustomValidity=="function"&&u.setCustomValidity("");let t=u.validity,o=Ae.find(i=>t[i]);if(o)return{type:o,message:u.validationMessage}},Re=(u=new Set,t={},o="")=>Object.keys(t).reduce((i,a)=>{const f=t[a];return u.has(o+a)?[...i,...Re(u,f,o+a+".")]:f.isDirty?[...i,o+a]:i},[]),ve=(u=new Set,t={},o="")=>Object.keys(t).reduce((i,a)=>{const f=t[a];return u.has(o+a)?[...i,...ve(u,f,o+a+".")]:f.isTouched?[...i,o+a]:i},[]),Se=(u=new Set,t={},o="")=>Object.keys(t).reduce((i,a)=>{const f=t[a];return u.has(o+a)?[...i,...Se(u,f,o+a+".")]:f?[...i,o+a]:i},[]),je=({control:u,name:t,compute:o})=>{const{getWatchValue:i,registerHookWatcher:a}=u||le(),f=i({name:t,compute:o}),[c,b]=s.useState(f);return s.useEffect(()=>a({name:t,compute:o,value:c,setValue:b}),[]),c},Ce=({control:u,name:t,defaultValue:o})=>{const{actions:i,registerController:a,channels:f,getWatchValue:c}=u||le(),b=s.useRef(),d=s.useRef(),m=P(i.getDefaultValues(),t)||o||"",[l,R]=s.useState(m),[C,O]=s.useState({}),S=s.useCallback((F,{shouldDirty:j=!0,shouldOnChange:N=!0}={})=>{var U;let M=F;((U=F==null?void 0:F.target)==null?void 0:U.value)!==void 0&&(M=F.target.value),R(M),i.setValue(t,M,{shouldDirty:j,shouldOnChange:N})},[i.setValue]),v=s.useCallback(F=>{const j=i.getValues(),N=F??P(j,t);f.publish("onBlur",t,N,j)},[]);return s.useEffect(()=>{const F=a(t,R);return()=>{F(),d.current&&d.current()}},[]),new Proxy({ref:b,name:t,defaultValue:m,value:l,onChange:S,onBlur:v,fieldState:C},{get(F,j,N){return typeof j=="string"&&j==="fieldState"&&(d.current&&d.current(),d.current=i.subscribe(`fieldStates.${t}`,()=>{O(c({name:`fieldStates.${t}`}))})),Reflect.get(F,j,N)}})},we=({name:u,control:t,defaultValue:o,render:i=({ref:a,name:f,defaultValue:c,value:b,onChange:d,onBlur:m,fieldState:l})=>null})=>{const a=Ce({name:u,defaultValue:o,control:t});return i(a)},Pe=()=>{const[u,t]=s.useState(),o=s.useCallback(()=>t(new Date().toString()),[]);return[u,o]},Ne=()=>{const[,u]=s.useState({});return s.useCallback(()=>u({}),[])},De=({channels:u,getWatchValue:t})=>{const o=Ne(),i=s.useCallback(c=>{if(!c)return u.subscribeWatch("values",()=>o()),t();if(typeof c=="string"){const b=L(c);u.subscribeWatch(b,(d,m)=>{d!==m&&o()})}return Array.isArray(c)&&c.forEach(b=>{const d=L(b);u.subscribeWatch(d,(m,l)=>{m!==l&&o()})}),t({name:c})},[]),a=s.useCallback(({name:c,compute:b,setValue:d})=>{if(typeof b=="function")return u.subscribe("values",()=>{const l=t({compute:b});d(l)});if(!c)return u.subscribe("values",()=>{d(t())});if(typeof c=="string"){const m=L(c);return u.subscribe(m,()=>{const R=t({name:c});d(R)})}if(Array.isArray(c)){const m=[];return c.forEach(l=>{const R=L(l),C=u.subscribe(R,()=>{const O=t({name:c});d(O)});m.push(C)}),()=>m.forEach(l=>l())}throw new Error("Parameters of name must be string or array of string or compute must be a function")},[]),f=s.useCallback((c,b)=>{if(!c)return u.subscribe("values",()=>b(t()));if(["onChange","onBlur"].includes(c))return u.subscribe(c,b);if(typeof c=="string"){const d=L(c);return u.subscribe(d,()=>b(t({name:c})))}if(Array.isArray(c)){const d=[];return c.forEach(m=>{const l=L(m),R=u.subscribe(l,()=>{b(t({name:c}))});d.push(R)}),()=>d.forEach(m=>m())}throw new Error("Parameters of name must be string or array of string")},[]);return{watch:i,registerHookWatcher:a,getWatchValue:t,subscribe:f}},xe=({getWatchValue:u})=>{const t=s.useRef(new Map),o=s.useRef(new Map),i=s.useCallback(()=>o.current,[]),a=s.useCallback(()=>t.current,[]),f=s.useCallback(()=>{t.current.clear(),o.current.clear()},[]),c=s.useCallback((l,...R)=>{const C=t.current.get(l),O=o.current.get(l);C&&C.forEach(S=>S(...R)),O&&O.forEach(S=>S(...R)),t.current.forEach((S,v)=>{if(v!==l&&l.startsWith(v)){const F=u({name:v.replace("values.","").replace("values","")});S.forEach(j=>j($(F,l.replace(`${v}.`,""),R[0])))}}),o.current.forEach((S,v)=>{if(v!==l&&l.startsWith(v)){const F=u({name:v.replace("values.","").replace("values","")});S.forEach(j=>j($(F,l.replace(`${v}.`,""),R[0])))}})},[]),b=s.useCallback(l=>{t.current.forEach((R,C)=>{C.startsWith(l)&&R.forEach(O=>O(u({name:C.replace("values.","").replace("values","")})))}),o.current.forEach((R,C)=>{C.startsWith(l)&&R.forEach(O=>O(u({name:C.replace("values.","").replace("values","")})))})},[]),d=s.useCallback((l,R)=>(t.current.has(l)||t.current.set(l,new Set),t.current.get(l).add(R),()=>{var C;return(C=t.current.get(l))==null?void 0:C.delete(R)}),[]),m=s.useCallback((l,R)=>{o.current.has(l)||(o.current.set(l,new Set),o.current.get(l).add(R))},[]);return{reset:f,publish:c,subscribe:d,subscribeWatch:m,getEvents:a,getWatchEvents:i,trigger:b}},$e=({defaultValues:u=_e,shouldUnRegister:t=!1}={})=>{const[o,i]=Pe(),a=s.useRef(),f=s.useRef(new Map),c=s.useRef({}),b=s.useRef({}),d=s.useRef({...Ee}),m=s.useRef({...u}),l=s.useRef({...u}),R=s.useRef(new Set),C=s.useCallback((e,n=l.current)=>Object.keys(n).reduce((E,h)=>{if(typeof n[h]=="object")return{...E,[h]:C(e,n[h])};const w={...e?{}:b.current[h]||{},...ae};return{...E,[h]:w}},{}),[]),O=s.useCallback((e={},{clearCustomFormStates:n=!1,clearCustomFieldStates:E=!1}={})=>{l.current={...l.current,...e},m.current={...l.current},f.current.forEach((h,w)=>{h(P(l.current,w)??"")}),c.current={},f.current=new Map,d.current={...n?{}:d.current,...Ee},b.current=C(E),y.reset(),i()},[]),S=s.useCallback(()=>{let e=Object.fromEntries(new FormData(a.current));f.current.forEach((E,h)=>{e=$(e,h,P(m.current,h))});let n={...m.current,...e};return me(n)},[]),v=s.useCallback(e=>ge(e.target),[]),F=s.useCallback(()=>l.current,[]),j=s.useCallback(()=>f.current,[]),N=s.useCallback((e,n)=>n?Array.isArray(n)?n.reduce((E,h)=>({...E,[h]:P(e,h)}),{}):P(e,n):{...e},[]),M=s.useCallback(e=>N(m.current,e),[N]),U=s.useCallback(e=>N(c.current,e),[N]),oe=s.useCallback(e=>N(b.current,e),[N]),Z=s.useCallback(e=>N({...d.current,lastReset:o},e),[o]),B=s.useCallback(({name:e,compute:n}={})=>!e&&!n||e==="values"?M():typeof n=="function"?n(M()):Array.isArray(e)?e.reduce((E,h)=>({...E,[h]:B({name:h})}),{}):P({...m.current,errors:c.current,fieldStates:b.current,formState:Z()},e),[]),y=xe({getWatchValue:B}),{watch:Q,registerHookWatcher:ue,subscribe:J}=De({getWatchValue:B,channels:y}),K=s.useCallback((e,n)=>{const E=d.current,h=P(E,e);h!==n&&(d.current=$(d.current,e,n),y.publish(`formState.${e}`,n,h))},[]),ee=s.useCallback((e,n)=>{x(e,"error",n)},[]),Y=s.useCallback(e=>{x(e,"error",null)},[]),re=s.useCallback(()=>{d.current.isError&&Object.keys(c.current).forEach(e=>Y(e))},[]),x=s.useCallback((e,n,E)=>{try{if(typeof E=="function"&&(E=E(B({name:e}))),R.current.has(e))if(typeof E=="object"&&E!==null){Object.keys(E).forEach(T=>{x(`${e}.${T}`,n,E[T])});return}else return console.error(`Cannot set primitive value for nested parent field "${e}". Please set value for its children or provide an object.`);const h=P(b.current,e)||{...ae},w=P(h,n);if(w!==E){if(b.current=$(b.current,`${e}.${n}`,E),y.publish(`fieldStates.${e}.${n}`,E,w),n==="error"){const T=P(c.current,e),I=E||null;T!==I&&(c.current=$(c.current,e,I),y.publish(`errors.${e}`,I,T));const V=Se(R.current,c.current);d.current.errorFields=V,y.publish("formState.errorFields",V);const ce=V.length>0;if(d.current.isError!==ce){const pe=d.current.isError;d.current.isError=ce,y.publish("formState.isError",ce,pe)}}if(n==="isDirty"){const T=Re(R.current,b.current);d.current.dirtyFields=T,y.publish("formState.dirtyFields",T);const I=T.length>0;if(d.current.isDirty!==I){const V=d.current.isDirty;d.current.isDirty=I,y.publish("formState.isDirty",I,V)}}if(n==="isTouched"){const T=ve(R.current,b.current);d.current.touchedFields=T,y.publish("formState.touchedFields",T)}}}catch(h){console.log(h)}},[]),te=s.useCallback(e=>{x(e,"isDirty",!1),x(e,"isTouched",!1),x(e,"error",!1)},[]),se=s.useCallback(e=>{const n=ge(e.target);n?ee(e.target.name,n):Y(e.target.name)},[]),z=s.useCallback((e,n,{shouldDirty:E=!0,shouldOnChange:h=!0}={})=>{if(typeof n=="function"&&(n=n(M(e))),R.current.has(e)){typeof n=="object"&&n!==null?Object.keys(n).forEach(V=>{z(`${e}.${V}`,n[V],{shouldDirty:E,shouldOnChange:h})}):console.error(`Cannot set primitive value for nested parent field "${e}". Please set value for its children or provide an object.`);return}const w=P(m.current,e);if(n===w)return;m.current=$(m.current,e,n),y.publish(`values.${e}`,n,w);const T=f.current.get(e);T&&T(n),n&&x(e,"isTouched",!0);const I=n!==(P(l.current,e)||"");E&&x(e,"isDirty",I),h&&y.publish("onChange",e,n,w)},[]),r=s.useCallback(e=>{const n=e.split(".");let E="";n.forEach((h,w)=>{w<n.length-1&&(E=E?`${E}.${h}`:h,R.current.add(E))})},[]),g=s.useCallback((e="",n)=>(f.current.set(e,n),b.current=$(b.current,e,{...ae}),e.includes(".")&&r(e),()=>{t&&f.current.delete(e)}),[]),p=s.useCallback((e,{keepError:n,keepDirty:E,keepTouched:h,defaultValue:w})=>{const T=f.current.get(e);if(!T)throw new Error(`Cannot reset "${e}" because it's uncontrolled field`);l.current=$(l.current,e,w),m.current=$(m.current,e,w),T&&T(w),n||Y(e),E||x(e,"isDirty",!1),h||x(e,"isTouched",!1)},[]),_=s.useCallback(e=>{if(!e)return y.trigger("values");if(!Array.isArray(e)){const n=L(e);y.trigger(n);return}e.forEach(n=>{const E=L(n);y.trigger(E)})},[]),W=s.useCallback((e,n=D.getValues(e))=>{y.publish("onBlur",e,n,D.getValues())},[]),D=s.useMemo(()=>({subscribe:J,reset:O,trigger:_,reload:i,resetField:p,setValue:z,getValues:M,getErrors:U,getFieldStates:oe,getFormState:Z,setError:ee,clearError:Y,clearErrors:re,checkValidity:se,getFieldValidity:v,getDefaultValues:F,setFieldState:x,triggerFieldBlur:W,resetFieldState:te,getControlledFields:j,setFormState:K,getEvents:y.getEvents,getWatchEvents:y.getWatchEvents}),[o]),q=s.useCallback(()=>{[...a.current.querySelectorAll("[name]")].forEach(E=>{const h=E.name||"";h.includes(".")&&r(h),!E.defaultValue&&!f.current.has(h)&&P(l.current,h)&&(E.defaultValue=P(l.current,h))});const n=S();m.current={...n},l.current={...n}},[]),G=s.useMemo(()=>({ref:a,watch:Q,actions:D,initForm:q,registerController:g,registerHookWatcher:ue,lastReloadedAt:o,loadFormValues:S,getWatchValue:B,channels:y}),[o]),A=s.useMemo(()=>({control:G,actions:D,watch:Q}),[o]);return s.useLayoutEffect(()=>{a.current&&q()},[o]),s.useLayoutEffect(()=>{b.current=C(!1)},[]),A};exports.Controller=we;exports.Form=Te;exports.restoreFromDotNotation=me;exports.useController=Ce;exports.useForm=$e;exports.useFormContext=le;exports.useWatch=je;