react-simple-formkit 2.1.4 → 2.1.5

package/README.md

@@ -10,6 +10,7 @@ Supports managing forms as uncontrolled. State updates only when watched. Simple
 - [Core concepts](#core-concepts)
   - [Modes of input field](#modes-of-input-field)
   - [Watching for updates](#watching-for-updates)
+  - [The Power of watch (Unified Observation)](#the-power-of-watch-unified-observation)
 - [Manage values](#manage-values)
   - [Get value](#get-value)
   - [Set value](#set-value)
@@ -186,11 +187,29 @@ return (
 
 ## Watching for updates
 
-State updates only when observed via `watch()`, `useWatch()`, `subscribe()`, or by tracking changes through the Form component's `onChange`, `onBlur` callbacks.
+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.
 
 - `watch()` will trigger a re-render at the form level.
 - `useWatch()` will trigger a re-render only in the component where it is called.
 - `onChange` is just a handler callback that is called when field values change.
+- `onBlur` is just a handler callback that is called when field blurred.
+
+> **Rule\*:** onBlur works for uncontrolled fields by default. But for controlled fields, you need to use onBlur when rendering a field. For captured fields, you need to use `actions.triggerFieldBlur(fieldName)` to trigger onBlur event.
+
+### The Power of watch (Unified Observation)
+
+The `watch` function (and `useWatch`, `subscribe`) is the "brain" of your form. Instead of having multiple hooks for different states, you can observe anything in the form using a unified dot-notation syntax:
+
+| Target              | Syntax Example                                                                                                                                                                                                                                    | Description                                  |
+| :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------- |
+| **All Values**      | `watch()`                                                                                                                                                                                                                                         | Observe every field value in the form.       |
+| **Specific Value**  | `watch("email")`                                                                                                                                                                                                                                  | Observe changes for a specific field.        |
+| **Form State**      | `watch("formState")` <br/> `watch("formState.isDirty")` <br/> `watch("formState.isError")` <br/> `watch("formState.dirtyFields")` <br/> `watch("formState.touchedFields")` <br/> `watch("formState.errorFields")`                                 | Track if the form has been modified.         |
+| **Field States**    | `watch("fieldStates")` <br/> `watch("fieldStates.email")` <br/> `watch("fieldStates.email.isDirty")` <br/> `watch("fieldStates.email.isTouched")` <br/> `watch("fieldStates.email.isError")` <br/> `watch("fieldStates.email.customState")` <br/> | Monitor if a field has been interacted with. |
+| **Errors**          | `watch("errors")` <br/> `watch("errors.email")` <br/>                                                                                                                                                                                             | Get real-time validation error messages.     |
+| **Multiple values** | `watch(["email", "errors.email", "fieldStates.email", "formState.isDirty"])` <br/>                                                                                                                                                                | Get real-time validation error messages.     |
+
+> **💡Why it matters\*:** This unified approach ensures you only need to learn one API to track the entire lifecycle of your form.
 
 # Manage values
 
@@ -373,6 +392,7 @@ Return:
   - `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)
+  - `actions.triggerFieldBlur()`: `(name: String, value?: Any) => void`
   - `actions.resetFieldState()`: `(name: String) => void`
   - `actions.resetField()`: `(name: String) => void`
   - `actions.clearError()`: `(name: String | Array) => void`

package/dist/react-simple-formkit.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");var ne={exports:{}},K={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");var oe={exports:{}},ee={};/**
  * @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 ue;function me(){if(ue)return K;ue=1;var n=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function f(g,b,h){var E=null;if(h!==void 0&&(E=""+h),b.key!==void 0&&(E=""+b.key),"key"in b){h={};for(var C in b)C!=="key"&&(h[C]=b[C])}else h=b;return b=h.ref,{$$typeof:n,type:g,key:E,ref:b!==void 0?b:null,props:h}}return K.Fragment=o,K.jsx=f,K.jsxs=f,K}var ee={};/**
+ */var ae;function Ee(){if(ae)return ee;ae=1;var n=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function f(g,b,h){var E=null;if(h!==void 0&&(E=""+h),b.key!==void 0&&(E=""+b.key),"key"in b){h={};for(var p in b)p!=="key"&&(h[p]=b[p])}else h=b;return b=h.ref,{$$typeof:n,type:g,key:E,ref:b!==void 0?b:null,props:h}}return ee.Fragment=o,ee.jsx=f,ee.jsxs=f,ee}var re={};/**
  * @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 ae;function Ee(){return ae||(ae=1,process.env.NODE_ENV!=="production"&&function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case d:return"Fragment";case Y:return"Profiler";case _:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case j: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 i:return"Portal";case I:return(e.displayName||"Context")+".Provider";case W:return(e._context.displayName||"Context")+".Consumer";case q:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case se:return a=e.displayName||null,a!==null?a:n(e.type)||"Memo";case J:a=e._payload,e=e._init;try{return n(e(a))}catch{}}return null}function o(e){return""+e}function f(e){try{o(e);var a=!1}catch{a=!0}if(a){a=console;var R=a.error,v=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return R.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",v),o(e)}}function g(e){if(e===d)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===J)return"<...>";try{var a=n(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function b(){var e=P.A;return e===null?null:e.getOwner()}function h(){return Error("react-stack-top-frame")}function E(e){if(M.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function C(e,a){function R(){G||(G=!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)",a))}R.isReactWarning=!0,Object.defineProperty(e,"key",{get:R,configurable:!0})}function p(){var e=n(this.type);return H[e]||(H[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 T(e,a,R,v,w,A,L,D){return R=A.ref,e={$$typeof:u,type:e,key:a,props:A,_owner:w},(R!==void 0?R:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:p}):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:L}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function c(e,a,R,v,w,A,L,D){var F=a.children;if(F!==void 0)if(v)if(x(F)){for(v=0;v<F.length;v++)m(F[v]);Object.freeze&&Object.freeze(F)}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 m(F);if(M.call(a,"key")){F=n(e);var V=Object.keys(a).filter(function(s){return s!=="key"});v=0<V.length?"{key: someKey, "+V.join(": ..., ")+": ...}":"{key: someKey}",Z[F+v]||(V=0<V.length?"{"+V.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var ce;function ge(){return ce||(ce=1,process.env.NODE_ENV!=="production"&&function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case d:return"Fragment";case $:return"Profiler";case _:return"StrictMode";case te:return"Suspense";case se:return"SuspenseList";case j: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 i:return"Portal";case Y:return(e.displayName||"Context")+".Provider";case D:return(e._context.displayName||"Context")+".Consumer";case q:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ne:return a=e.displayName||null,a!==null?a:n(e.type)||"Memo";case J:a=e._payload,e=e._init;try{return n(e(a))}catch{}}return null}function o(e){return""+e}function f(e){try{o(e);var a=!1}catch{a=!0}if(a){a=console;var R=a.error,F=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return R.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",F),o(e)}}function g(e){if(e===d)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===J)return"<...>";try{var a=n(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function b(){var e=x.A;return e===null?null:e.getOwner()}function h(){return Error("react-stack-top-frame")}function E(e){if(W.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function p(e,a){function R(){G||(G=!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)",a))}R.isReactWarning=!0,Object.defineProperty(e,"key",{get:R,configurable:!0})}function v(){var e=n(this.type);return H[e]||(H[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 T(e,a,R,F,w,A,I,B){return R=A.ref,e={$$typeof:u,type:e,key:a,props:A,_owner:w},(R!==void 0?R: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:I}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:B}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function c(e,a,R,F,w,A,I,B){var k=a.children;if(k!==void 0)if(F)if(N(k)){for(F=0;F<k.length;F++)m(k[F]);Object.freeze&&Object.freeze(k)}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 m(k);if(W.call(a,"key")){k=n(e);var P=Object.keys(a).filter(function(r){return r!=="key"});F=0<P.length?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}",Z[k+F]||(P=0<P.length?"{"+P.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} />`,v,F,V,F),Z[F+v]=!0)}if(F=null,R!==void 0&&(f(R),F=""+R),E(a)&&(f(a.key),F=""+a.key),"key"in a){R={};for(var r in a)r!=="key"&&(R[r]=a[r])}else R=a;return F&&C(R,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,F,A,w,b(),R,L,D)}function m(e){typeof e=="object"&&e!==null&&e.$$typeof===u&&e._store&&(e._store.validated=1)}var l=t,u=Symbol.for("react.transitional.element"),i=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),Y=Symbol.for("react.profiler"),W=Symbol.for("react.consumer"),I=Symbol.for("react.context"),q=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),te=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),J=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),z=Symbol.for("react.client.reference"),P=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,x=Array.isArray,N=console.createTask?console.createTask:function(){return null};l={"react-stack-bottom-frame":function(e){return e()}};var G,H={},X=l["react-stack-bottom-frame"].bind(l,h)(),S=N(g(h)),Z={};ee.Fragment=d,ee.jsx=function(e,a,R,v,w){var A=1e4>P.recentlyCreatedOwnerStacks++;return c(e,a,R,!1,v,w,A?Error("react-stack-top-frame"):X,A?N(g(e)):S)},ee.jsxs=function(e,a,R,v,w){var A=1e4>P.recentlyCreatedOwnerStacks++;return c(e,a,R,!0,v,w,A?Error("react-stack-top-frame"):X,A?N(g(e)):S)}}()),ee}var ce;function ge(){return ce||(ce=1,process.env.NODE_ENV==="production"?ne.exports=me():ne.exports=Ee()),ne.exports}var le=ge();const k=()=>{},fe=t.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:{}}),oe=()=>t.useContext(fe),he=({id:n,control:o,method:f,action:g,children:b,onSubmit:h=()=>{},onInput:E=()=>{},onChange:C=()=>{},onBlur:p=()=>{},onReset:T=()=>{},numberFields:c=[],className:m,...l})=>(t.useEffect(()=>{const u=o.channels.subscribe("onChange",C),i=o.channels.subscribe("onBlur",p);return()=>{u(),i()}},[]),le.jsx(fe.Provider,{value:o,children:le.jsx("form",{id:n,ref:o.ref,action:g,method:f,className:m,onInput:E,onSubmit:u=>{f||u.preventDefault();const i=o.loadFormValues();h(i)},onChange:u=>{const i=u.target.name;o.actions.getControlledFields().has(i)||o.actions.setValue(i,u.target.value)},onBlur:u=>{const i=u.target.name;if(o.actions.getControlledFields().has(i))return;const d=u.target.value;o.channels.publish("onBlur",i,d,o.actions.getValues())},onReset:u=>{o.actions.reset(),T(u)},...l,children:b},o.lastReloadedAt)})),de=({control:n,name:o,compute:f})=>{const{getWatchValue:g,registerHookWatcher:b}=n||oe(),h=g({name:o,compute:f}),[E,C]=t.useState(h);return t.useEffect(()=>{const p=b({name:o,compute:f,value:E,setValue:C});return()=>p.forEach(T=>T())},[]),E},be=({name:n,defaultValue:o})=>{const{actions:f,registerController:g,channels:b}=oe(),h=t.useRef(),E=f.getDefaultValues()[n]||o,[C,p]=t.useState(E),T=de({name:`fieldStates.${n}.customState`}),c=t.useCallback(u=>{f.setFieldState(n,"customState",u)},[]),m=t.useCallback((u,{shouldDirty:i=!0,shouldOnChange:d=!0}={})=>{p(u),f.setValue(n,u,{shouldDirty:i,shouldOnChange:d})},[f.setValue]),l=t.useCallback(()=>{b.publish("onBlur",n,C,f.getValues())},[]);return t.useEffect(()=>g(n,p),[]),{ref:h,name:n,defaultValue:E,value:C,onChange:m,onBlur:l,customState:T,setCustomState:c}},Re=({name:n,defaultValue:o,render:f=({ref:g,name:b,defaultValue:h,value:E,onChange:C,onBlur:p,customState:T,setCustomState:c})=>null})=>{const g=be({name:n,defaultValue:o});return f(g)},ke=["errors","fieldStates","formState"],U=n=>ke.some(o=>n.startsWith(o))?n:"values."+n,Se=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],ie=n=>{typeof n.setCustomValidity=="function"&&n.setCustomValidity("");let o=n.validity,f=Se.find(g=>o[g]);if(f)return{type:f,message:n.validationMessage}};class Ce{constructor(){this.events=new Map}getEvents(){return this.events}subscribe(o,f){return this.events.has(o)||this.events.set(o,new Set),this.events.get(o).add(f),()=>{var g;return(g=this.events.get(o))==null?void 0:g.delete(f)}}publish(o,...f){const g=this.events.get(o);g&&g.forEach(b=>b(...f)),this.events.forEach((b,h)=>{o.includes(h)&&b.forEach(E=>E(...f))})}reset(){this.events.clear()}}const ye=()=>{const n=t.useRef(new Ce),o=t.useCallback((b,...h)=>{n.current.publish(b,...h)},[]),f=t.useCallback((b,h)=>n.current.subscribe(b,h),[]),g=t.useCallback(()=>{n.current.reset()},[]);return{publish:o,subscribe:f,reset:g}},pe=()=>{const[n,o]=t.useState(),f=t.useCallback(()=>o(new Date().toString()),[]);return[n,f]},ve=()=>{const[,n]=t.useState({});return t.useCallback(()=>n({}),[])},Fe=({channels:n,getValues:o,getErrors:f,getFieldStates:g,getFormState:b})=>{const h=ve(),E=t.useCallback(({name:c,compute:m})=>{if(typeof m=="function")return m(o());if(Array.isArray(c)){const l={};return c.forEach(u=>{l[u]=E({name:u})}),l}return c.replaceAll(/\[(\d+)\]/g,".$1").split(".").reduce((l,u)=>l&&l[u]!==void 0?l[u]:void 0,{...o(),errors:{...f()},formState:{...b()},fieldStates:{...g()}})},[]),C=t.useCallback(c=>{if(!c)return n.subscribe("values",()=>{h()}),o();if(typeof c=="string"){const m=U(c);return n.subscribe(m,()=>{h()}),E({name:c})}if(Array.isArray(c)){const m={};return c.forEach(l=>{const u=U(l);n.subscribe(u,()=>{h()}),m[l]=E({name:l})}),m}throw new Error("Parameters of watch must be string or array of string")},[]),p=t.useCallback(({name:c,compute:m,value:l,setValue:u})=>{if(typeof m=="function")return[n.subscribe("values",()=>{const d=E({compute:m});d!==l&&u(d)})];if(c)if(typeof c=="string"){const i=U(c);return[n.subscribe(i,()=>{const _=E({name:c});_!==l&&u(_)})]}else if(Array.isArray(c)){const i=E({name:c}),d=[];return c.forEach(_=>{const Y=U(_),W=n.subscribe(Y,()=>{const I=E({name:_});i[_]!==I&&(i[_]=I,u({...i}))});d.push(W)}),d}else throw new Error("Parameters of name must be string or array of string or compute must be a function");else return[n.subscribe("values",()=>{u(o())})]},[]),T=t.useCallback((c,m)=>{if(typeof c===void 0)return n.subscribe("values",m);if(typeof c=="string"){const l=U(c);return n.subscribe(l,m)}if(Array.isArray(c)){const l={},u=[];return c.forEach(i=>{const d=U(i),_=n.subscribe(d,()=>{l[i]=E({name:i}),m(l)});u.push(_)}),u}},[n]);return{watch:C,registerHookWatcher:p,getWatchValue:E,subscribe:T}},Te=[],_e={},Ae=({numberFields:n=Te,defaultValues:o=_e,shouldUnRegister:f=!1,shouldConvertNumber:g=!1}={})=>{const[b,h]=pe(),E=t.useRef(),C=t.useRef(!1),p=t.useRef(!1),T=t.useRef(n),c=t.useRef(new Map),m=t.useRef({}),l=t.useRef({}),u=t.useRef(o),i=t.useRef(o),d=ye(),_=t.useCallback(()=>{l.current=Object.keys(i.current).reduce((r,s)=>({...r,[s]:{isError:!1,isDirty:!1,isTouched:!1,customState:null}}),{})},[]),Y=t.useCallback((r={})=>{i.current={...i.current,...r},u.current={...i.current},c.current.forEach((s,y)=>{s(i.current[y])}),C.current=!1,m.current={},T.current=n,c.current=new Map,d.reset(),_(),n.length>0&&(g=!0),h()},[]),W=t.useCallback(()=>{const r=Object.fromEntries(new FormData(E.current));return c.current.forEach(y=>{r[y]=u.current[y]}),g&&T.current.forEach(y=>r.hasOwnProperty(y)&&(r[y]=Number(r[y])||0)),r},[]),I=t.useCallback(()=>!!Object.values(M()).find(r=>r.isDirty),[]),q=t.useCallback(()=>!!Object.values(P()).find(r=>!!r),[]),re=t.useCallback(r=>ie(r.target),[]),te=t.useCallback(()=>i.current,[]),se=t.useCallback(()=>T.current,[]),J=t.useCallback(()=>c.current,[]),j=t.useCallback((r,s)=>s?Array.isArray(s)?s.map(y=>r[y]):r[s]:{...r},[]),z=t.useCallback(r=>j(u.current,r),[j]),P=t.useCallback(r=>j(m.current,r),[j]),M=t.useCallback(r=>j(l.current,r),[j]),x=t.useCallback(r=>j({isDirty:C.current,isError:p.current,errorFields:Object.keys(m.current).filter(s=>!!m.current[s]),dirtyFields:Object.keys(l.current).filter(s=>l.current[s].isDirty),touchedFields:Object.keys(l.current).filter(s=>l.current[s].isTouched)},r),[j]),{watch:N,registerHookWatcher:G,getWatchValue:H,subscribe:X}=Fe({channels:d,getValues:z,getErrors:P,getFieldStates:M,getFormState:x}),S=t.useCallback((r,s,y)=>{const O=l.current[r];O[s]!==y&&(l.current[r]={...O,[s]:y},d.publish(`fieldStates.${r}.${s}`,y),s==="isError"&&d.publish("formState.errorFields",x("errorFields")),s==="isDirty"&&d.publish("formState.dirtyFields",x("dirtyFields")),s==="isTouched"&&d.publish("formState.touchedFields",x("touchedFields")))},[]),Z=t.useCallback(r=>{S(r,"isError",!1),S(r,"isDirty",!1),S(r,"isTouched",!1),S(r,"customState",null)},[S]),e=t.useCallback((r,s)=>{if(m.current[r]===s)return;m.current[r]=s,S(r,"isError",!!s),d.publish(`errors.${r}`,s);const O=q();p.current!==O&&(p.current=O,d.publish("formState.isError",O))},[S]),a=t.useCallback(r=>{if(!m.current[r])return;m.current[r]=null,S(r,"isError",!1),d.publish(`errors.${r}`,null);const s=q();p.current!==s&&(p.current=s,d.publish("formState.isError",s))},[S]),R=t.useCallback(()=>{if(Object.keys(m.current)===0)return;m.current={},d.publish("errors",m.current);const r=q();p.current!==r&&(p.current=r,d.publish("formState.isError",r))},[]),v=t.useCallback(r=>{const s=ie(r.target);s?e(r.target.name,s):a(r.target.name)},[e,a]),w=t.useCallback((r,s,{shouldDirty:y=!0,shouldOnChange:O=!0}={})=>{if(s===u.current[r])return;g&&T.current.includes(r)&&(s=Number(s)||void 0),S(r,"isTouched",!0);const Q=s!==i.current[r];y&&l.current[r].isDirty!==Q&&S(r,"isDirty",Q);const $=I();C.current!==$&&(C.current=$,d.publish("formState.isDirty",$)),u.current[r]=s;const B=c.current.get(r);B&&B(s),d.publish(`values.${r}`,s,{shouldDirty:y,shouldOnChange:O}),O&&d.publish("onChange",r,s,u.current)},[S]),A=t.useCallback((r,s)=>(c.current.set(r,s),()=>{f&&c.current.delete(r)}),[]),L=t.useCallback((r,{keepError:s,keepDirty:y,keepTouched:O,keepCustomState:Q,defaultValue:$})=>{const B=c.current.get(r);if(!B)throw new Error(`Cannot reset "${r}" because it's uncontrolled field`);i.current[r]=$,u.current[r]=$,B&&B($),s||a(r),y||S(r,"isDirty",!1),O||S(r,"isTouched",!1),Q||S(r,"customState",null)},[a,S]),D=t.useMemo(()=>({subscribe:X,reset:Y,resetField:L,setValue:w,getValues:z,getErrors:P,getFieldStates:M,getFormState:x,setError:e,clearError:a,clearErrors:R,checkValidity:v,getNumberFields:se,getFieldValidity:re,getDefaultValues:te,setFieldState:S,resetFieldState:Z,getControlledFields:J}),[X,Y,L,w,z,P,M,x,e,a,R,v,se,re,te,S,Z,J]),F=t.useMemo(()=>({ref:E,watch:N,actions:D,registerController:A,registerHookWatcher:G,lastReloadedAt:b,loadFormValues:W,getWatchValue:H,channels:d}),[E,N,D,A,G,b,W,H,d]),V=t.useMemo(()=>({control:F,actions:D,watch:N}),[b,F,D,N]);return t.useLayoutEffect(()=>{if([...E.current.querySelectorAll("[name]")].forEach(s=>{!s.defaultValue&&i.current[s.name]&&(s.defaultValue=i.current[s.name]),s.type==="number"&&!T.current.includes(s.name)&&T.current.push(s.name)}),E.current){const s=W();u.current={...s},i.current={...s}}},[b]),t.useLayoutEffect(()=>{_()},[]),V};exports.Controller=Re;exports.Form=he;exports.useController=be;exports.useForm=Ae;exports.useFormContext=oe;exports.useWatch=de;
+  <%s key={someKey} {...props} />`,F,k,P,k),Z[k+F]=!0)}if(k=null,R!==void 0&&(f(R),k=""+R),E(a)&&(f(a.key),k=""+a.key),"key"in a){R={};for(var Q in a)Q!=="key"&&(R[Q]=a[Q])}else R=a;return k&&p(R,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,k,A,w,b(),R,I,B)}function m(e){typeof e=="object"&&e!==null&&e.$$typeof===u&&e._store&&(e._store.validated=1)}var l=t,u=Symbol.for("react.transitional.element"),i=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),$=Symbol.for("react.profiler"),D=Symbol.for("react.consumer"),Y=Symbol.for("react.context"),q=Symbol.for("react.forward_ref"),te=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ne=Symbol.for("react.memo"),J=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),z=Symbol.for("react.client.reference"),x=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,N=Array.isArray,V=console.createTask?console.createTask:function(){return null};l={"react-stack-bottom-frame":function(e){return e()}};var G,H={},X=l["react-stack-bottom-frame"].bind(l,h)(),C=V(g(h)),Z={};re.Fragment=d,re.jsx=function(e,a,R,F,w){var A=1e4>x.recentlyCreatedOwnerStacks++;return c(e,a,R,!1,F,w,A?Error("react-stack-top-frame"):X,A?V(g(e)):C)},re.jsxs=function(e,a,R,F,w){var A=1e4>x.recentlyCreatedOwnerStacks++;return c(e,a,R,!0,F,w,A?Error("react-stack-top-frame"):X,A?V(g(e)):C)}}()),re}var le;function he(){return le||(le=1,process.env.NODE_ENV==="production"?oe.exports=Ee():oe.exports=ge()),oe.exports}var ie=he();const S=()=>{},de=t.createContext({ref:null,watch:S,actions:{reset:S,resetField:S,setValue:S,getValues:S,getErrors:S,getFieldStates:S,getFormStates:S,setError:S,clearError:S,clearErrors:S,checkValidity:S,getNumberFields:S,getFieldValidity:S,getDefaultValues:S,setFieldState:S,resetFieldState:S,getControlledFields:S},registerController:S,registerHookWatcher:S,lastReloadedAt:S,loadFormValues:S,getWatchValue:S,channels:{}}),ue=()=>t.useContext(de),Re=({id:n,control:o,method:f,action:g,children:b,onSubmit:h=()=>{},onInput:E=()=>{},onChange:p=()=>{},onBlur:v=()=>{},onReset:T=()=>{},numberFields:c=[],className:m,...l})=>(t.useEffect(()=>{const u=o.channels.subscribe("onChange",p),i=o.channels.subscribe("onBlur",v);return()=>{u(),i()}},[]),ie.jsx(de.Provider,{value:o,children:ie.jsx("form",{id:n,ref:o.ref,action:g,method:f,className:m,onInput:E,onSubmit:u=>{f||u.preventDefault();const i=o.loadFormValues();h(i)},onChange:u=>{const i=u.target.name;o.actions.getControlledFields().has(i)||o.actions.setValue(i,u.target.value)},onBlur:u=>{const i=u.target.name;if(o.actions.getControlledFields().has(i))return;const d=u.target.value;o.channels.publish("onBlur",i,d,o.actions.getValues())},onReset:u=>{o.actions.reset(),T(u)},...l,children:b},o.lastReloadedAt)})),be=({control:n,name:o,compute:f})=>{const{getWatchValue:g,registerHookWatcher:b}=n||ue(),h=g({name:o,compute:f}),[E,p]=t.useState(h);return t.useEffect(()=>{const v=b({name:o,compute:f,value:E,setValue:p});return()=>v.forEach(T=>T())},[]),E},me=({name:n,defaultValue:o})=>{const{actions:f,registerController:g,channels:b}=ue(),h=t.useRef(),E=f.getDefaultValues()[n]||o,[p,v]=t.useState(E),T=be({name:`fieldStates.${n}.customState`}),c=t.useCallback(u=>{f.setFieldState(n,"customState",u)},[]),m=t.useCallback((u,{shouldDirty:i=!0,shouldOnChange:d=!0}={})=>{v(u),f.setValue(n,u,{shouldDirty:i,shouldOnChange:d})},[f.setValue]),l=t.useCallback(()=>{b.publish("onBlur",n,p,f.getValues())},[]);return t.useEffect(()=>g(n,v),[]),{ref:h,name:n,defaultValue:E,value:p,onChange:m,onBlur:l,customState:T,setCustomState:c}},ke=({name:n,defaultValue:o,render:f=({ref:g,name:b,defaultValue:h,value:E,onChange:p,onBlur:v,customState:T,setCustomState:c})=>null})=>{const g=me({name:n,defaultValue:o});return f(g)},Se=["errors","fieldStates","formState"],U=n=>Se.some(o=>n.startsWith(o))?n:"values."+n,Ce=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],fe=n=>{typeof n.setCustomValidity=="function"&&n.setCustomValidity("");let o=n.validity,f=Ce.find(g=>o[g]);if(f)return{type:f,message:n.validationMessage}};class pe{constructor(){this.events=new Map}getEvents(){return this.events}subscribe(o,f){return this.events.has(o)||this.events.set(o,new Set),this.events.get(o).add(f),()=>{var g;return(g=this.events.get(o))==null?void 0:g.delete(f)}}publish(o,...f){const g=this.events.get(o);g&&g.forEach(b=>b(...f)),this.events.forEach((b,h)=>{o.includes(h)&&b.forEach(E=>E(...f))})}reset(){this.events.clear()}}const ye=()=>{const n=t.useRef(new pe),o=t.useCallback((b,...h)=>{n.current.publish(b,...h)},[]),f=t.useCallback((b,h)=>n.current.subscribe(b,h),[]),g=t.useCallback(()=>{n.current.reset()},[]);return{publish:o,subscribe:f,reset:g}},ve=()=>{const[n,o]=t.useState(),f=t.useCallback(()=>o(new Date().toString()),[]);return[n,f]},Fe=()=>{const[,n]=t.useState({});return t.useCallback(()=>n({}),[])},Te=({channels:n,getValues:o,getErrors:f,getFieldStates:g,getFormState:b})=>{const h=Fe(),E=t.useCallback(({name:c,compute:m})=>{if(typeof m=="function")return m(o());if(Array.isArray(c)){const l={};return c.forEach(u=>{l[u]=E({name:u})}),l}return c.replaceAll(/\[(\d+)\]/g,".$1").split(".").reduce((l,u)=>l&&l[u]!==void 0?l[u]:void 0,{...o(),errors:{...f()},formState:{...b()},fieldStates:{...g()}})},[]),p=t.useCallback(c=>{if(!c)return n.subscribe("values",()=>{h()}),o();if(typeof c=="string"){const m=U(c);return n.subscribe(m,()=>{h()}),E({name:c})}if(Array.isArray(c)){const m={};return c.forEach(l=>{const u=U(l);n.subscribe(u,()=>{h()}),m[l]=E({name:l})}),m}throw new Error("Parameters of watch must be string or array of string")},[]),v=t.useCallback(({name:c,compute:m,value:l,setValue:u})=>{if(typeof m=="function")return[n.subscribe("values",()=>{const d=E({compute:m});d!==l&&u(d)})];if(c)if(typeof c=="string"){const i=U(c);return[n.subscribe(i,()=>{const _=E({name:c});_!==l&&u(_)})]}else if(Array.isArray(c)){const i=E({name:c}),d=[];return c.forEach(_=>{const $=U(_),D=n.subscribe($,()=>{const Y=E({name:_});i[_]!==Y&&(i[_]=Y,u({...i}))});d.push(D)}),d}else throw new Error("Parameters of name must be string or array of string or compute must be a function");else return[n.subscribe("values",()=>{u(o())})]},[]),T=t.useCallback((c,m)=>{if(typeof c===void 0)return n.subscribe("values",m);if(typeof c=="string"){const l=U(c);return n.subscribe(l,m)}if(Array.isArray(c)){const l={},u=[];return c.forEach(i=>{const d=U(i),_=n.subscribe(d,()=>{l[i]=E({name:i}),m(l)});u.push(_)}),u}},[n]);return{watch:p,registerHookWatcher:v,getWatchValue:E,subscribe:T}},_e=[],Ae={},we=({numberFields:n=_e,defaultValues:o=Ae,shouldUnRegister:f=!1,shouldConvertNumber:g=!1}={})=>{const[b,h]=ve(),E=t.useRef(),p=t.useRef(!1),v=t.useRef(!1),T=t.useRef(n),c=t.useRef(new Map),m=t.useRef({}),l=t.useRef({}),u=t.useRef(o),i=t.useRef(o),d=ye(),_=t.useCallback(()=>{l.current=Object.keys(i.current).reduce((r,s)=>({...r,[s]:{isError:!1,isDirty:!1,isTouched:!1,customState:null}}),{})},[]),$=t.useCallback((r={})=>{i.current={...i.current,...r},u.current={...i.current},c.current.forEach((s,y)=>{s(i.current[y])}),p.current=!1,m.current={},T.current=n,c.current=new Map,d.reset(),_(),n.length>0&&(g=!0),h()},[]),D=t.useCallback(()=>{const r=Object.fromEntries(new FormData(E.current));return c.current.forEach(y=>{r[y]=u.current[y]}),g&&T.current.forEach(y=>r.hasOwnProperty(y)&&(r[y]=Number(r[y])||0)),r},[]),Y=t.useCallback(()=>!!Object.values(W()).find(r=>r.isDirty),[]),q=t.useCallback(()=>!!Object.values(x()).find(r=>!!r),[]),te=t.useCallback(r=>fe(r.target),[]),se=t.useCallback(()=>i.current,[]),ne=t.useCallback(()=>T.current,[]),J=t.useCallback(()=>c.current,[]),j=t.useCallback((r,s)=>s?Array.isArray(s)?s.map(y=>r[y]):r[s]:{...r},[]),z=t.useCallback(r=>j(u.current,r),[j]),x=t.useCallback(r=>j(m.current,r),[j]),W=t.useCallback(r=>j(l.current,r),[j]),N=t.useCallback(r=>j({isDirty:p.current,isError:v.current,errorFields:Object.keys(m.current).filter(s=>!!m.current[s]),dirtyFields:Object.keys(l.current).filter(s=>l.current[s].isDirty),touchedFields:Object.keys(l.current).filter(s=>l.current[s].isTouched)},r),[j]),{watch:V,registerHookWatcher:G,getWatchValue:H,subscribe:X}=Te({channels:d,getValues:z,getErrors:x,getFieldStates:W,getFormState:N}),C=t.useCallback((r,s,y)=>{const O=l.current[r];O[s]!==y&&(l.current[r]={...O,[s]:y},d.publish(`fieldStates.${r}.${s}`,y),s==="isError"&&d.publish("formState.errorFields",N("errorFields")),s==="isDirty"&&d.publish("formState.dirtyFields",N("dirtyFields")),s==="isTouched"&&d.publish("formState.touchedFields",N("touchedFields")))},[]),Z=t.useCallback(r=>{C(r,"isError",!1),C(r,"isDirty",!1),C(r,"isTouched",!1),C(r,"customState",null)},[C]),e=t.useCallback((r,s)=>{if(m.current[r]===s)return;m.current[r]=s,C(r,"isError",!!s),d.publish(`errors.${r}`,s);const O=q();v.current!==O&&(v.current=O,d.publish("formState.isError",O))},[C]),a=t.useCallback(r=>{if(!m.current[r])return;m.current[r]=null,C(r,"isError",!1),d.publish(`errors.${r}`,null);const s=q();v.current!==s&&(v.current=s,d.publish("formState.isError",s))},[C]),R=t.useCallback(()=>{if(Object.keys(m.current)===0)return;m.current={},d.publish("errors",m.current);const r=q();v.current!==r&&(v.current=r,d.publish("formState.isError",r))},[]),F=t.useCallback(r=>{const s=fe(r.target);s?e(r.target.name,s):a(r.target.name)},[e,a]),w=t.useCallback((r,s,{shouldDirty:y=!0,shouldOnChange:O=!0}={})=>{if(s===u.current[r])return;g&&T.current.includes(r)&&(s=Number(s)||void 0),C(r,"isTouched",!0);const K=s!==i.current[r];y&&l.current[r].isDirty!==K&&C(r,"isDirty",K);const M=Y();p.current!==M&&(p.current=M,d.publish("formState.isDirty",M)),u.current[r]=s;const L=c.current.get(r);L&&L(s),d.publish(`values.${r}`,s,{shouldDirty:y,shouldOnChange:O}),O&&d.publish("onChange",r,s,u.current)},[C]),A=t.useCallback((r,s)=>(c.current.set(r,s),()=>{f&&c.current.delete(r)}),[]),I=t.useCallback((r,{keepError:s,keepDirty:y,keepTouched:O,keepCustomState:K,defaultValue:M})=>{const L=c.current.get(r);if(!L)throw new Error(`Cannot reset "${r}" because it's uncontrolled field`);i.current[r]=M,u.current[r]=M,L&&L(M),s||a(r),y||C(r,"isDirty",!1),O||C(r,"isTouched",!1),K||C(r,"customState",null)},[a,C]),B=t.useCallback((r,s=k.getValues(r))=>{d.publish("onBlur",r,s,k.getValues())},[]),k=t.useMemo(()=>({subscribe:X,reset:$,resetField:I,setValue:w,getValues:z,getErrors:x,getFieldStates:W,getFormState:N,setError:e,clearError:a,clearErrors:R,checkValidity:F,getNumberFields:ne,getFieldValidity:te,getDefaultValues:se,setFieldState:C,triggerFieldBlur:B,resetFieldState:Z,getControlledFields:J}),[X,$,I,w,z,x,W,N,e,a,R,F,ne,te,se,C,Z,B,J]),P=t.useMemo(()=>({ref:E,watch:V,actions:k,registerController:A,registerHookWatcher:G,lastReloadedAt:b,loadFormValues:D,getWatchValue:H,channels:d}),[E,V,k,A,G,b,D,H,d]),Q=t.useMemo(()=>({control:P,actions:k,watch:V}),[b,P,k,V]);return t.useLayoutEffect(()=>{if([...E.current.querySelectorAll("[name]")].forEach(s=>{!s.defaultValue&&i.current[s.name]&&(s.defaultValue=i.current[s.name]),s.type==="number"&&!T.current.includes(s.name)&&T.current.push(s.name)}),E.current){const s=D();u.current={...s},i.current={...s}}},[b]),t.useLayoutEffect(()=>{_()},[]),Q};exports.Controller=ke;exports.Form=Re;exports.useController=me;exports.useForm=we;exports.useFormContext=ue;exports.useWatch=be;

package/dist/react-simple-formkit.mjs

@@ -1,5 +1,5 @@
-import ge, { createContext as Re, useContext as Se, useEffect as ae, useState as ue, useRef as j, useCallback as f, useMemo as ce, useLayoutEffect as ie } from "react";
-var oe = { exports: {} }, ee = {};
+import Re, { createContext as Se, useContext as pe, useEffect as ie, useState as ce, useRef as j, useCallback as f, useMemo as ae, useLayoutEffect as le } from "react";
+var ue = { exports: {} }, re = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var oe = { exports: {} }, ee = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var le;
-function pe() {
-  if (le) return ee;
-  le = 1;
+var fe;
+function ye() {
+  if (fe) return re;
+  fe = 1;
   var s = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-  function l(h, b, g) {
+  function l(g, b, h) {
     var E = null;
-    if (g !== void 0 && (E = "" + g), b.key !== void 0 && (E = "" + b.key), "key" in b) {
-      g = {};
-      for (var y in b)
-        y !== "key" && (g[y] = b[y]);
-    } else g = b;
-    return b = g.ref, {
+    if (h !== void 0 && (E = "" + h), b.key !== void 0 && (E = "" + b.key), "key" in b) {
+      h = {};
+      for (var v in b)
+        v !== "key" && (h[v] = b[v]);
+    } else h = b;
+    return b = h.ref, {
       $$typeof: s,
-      type: h,
+      type: g,
       key: E,
       ref: b !== void 0 ? b : null,
-      props: g
+      props: h
     };
   }
-  return ee.Fragment = n, ee.jsx = l, ee.jsxs = l, ee;
+  return re.Fragment = n, re.jsx = l, re.jsxs = l, re;
 }
-var re = {};
+var te = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,9 +41,9 @@ var re = {};
  * 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() {
+var de;
+function ve() {
+  return de || (de = 1, process.env.NODE_ENV !== "production" && function() {
     function s(e) {
       if (e == null) return null;
       if (typeof e == "function")
@@ -52,13 +52,13 @@ function ye() {
       switch (e) {
         case d:
           return "Fragment";
-        case I:
+        case Y:
           return "Profiler";
         case A:
           return "StrictMode";
-        case te:
-          return "Suspense";
         case se:
+          return "Suspense";
+        case ne:
           return "SuspenseList";
         case P:
           return "Activity";
@@ -69,14 +69,14 @@ function ye() {
         ), e.$$typeof) {
           case i:
             return "Portal";
-          case B:
+          case I:
             return (e.displayName || "Context") + ".Provider";
-          case $:
+          case W:
             return (e._context.displayName || "Context") + ".Consumer";
           case J:
             var u = e.render;
             return e = e.displayName, e || (e = u.displayName || u.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case ne:
+          case oe:
             return u = e.displayName || null, u !== null ? u : s(e.type) || "Memo";
           case z:
             u = e._payload, e = e._init;
@@ -99,15 +99,15 @@ function ye() {
       }
       if (u) {
         u = console;
-        var R = u.error, F = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        var R = u.error, _ = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return R.call(
           u,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          F
+          _
         ), n(e);
       }
     }
-    function h(e) {
+    function g(e) {
       if (e === d) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === z)
         return "<...>";
@@ -119,20 +119,20 @@ function ye() {
       }
     }
     function b() {
-      var e = x.A;
+      var e = N.A;
       return e === null ? null : e.getOwner();
     }
-    function g() {
+    function h() {
       return Error("react-stack-top-frame");
     }
     function E(e) {
-      if (M.call(e, "key")) {
+      if ($.call(e, "key")) {
         var u = Object.getOwnPropertyDescriptor(e, "key").get;
         if (u && u.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function y(e, u) {
+    function v(e, u) {
       function R() {
         H || (H = !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)",
@@ -144,13 +144,13 @@ function ye() {
         configurable: !0
       });
     }
-    function T() {
+    function F() {
       var e = s(this.type);
       return X[e] || (X[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 k(e, u, R, F, O, w, L, V) {
+    function k(e, u, R, _, O, w, B, L) {
       return R = w.ref, e = {
         $$typeof: o,
         type: e,
@@ -159,7 +159,7 @@ function ye() {
         _owner: O
       }, (R !== void 0 ? R : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: T
+        get: F
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -174,68 +174,68 @@ function ye() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: L
+        value: B
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: V
+        value: L
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function c(e, u, R, F, O, w, L, V) {
-      var _ = u.children;
-      if (_ !== void 0)
-        if (F)
-          if (N(_)) {
-            for (F = 0; F < _.length; F++)
-              m(_[F]);
-            Object.freeze && Object.freeze(_);
+    function c(e, u, R, _, O, w, B, L) {
+      var S = u.children;
+      if (S !== void 0)
+        if (_)
+          if (V(S)) {
+            for (_ = 0; _ < S.length; _++)
+              m(S[_]);
+            Object.freeze && Object.freeze(S);
           } 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 m(_);
-      if (M.call(u, "key")) {
-        _ = s(e);
-        var W = Object.keys(u).filter(function(t) {
-          return t !== "key";
+        else m(S);
+      if ($.call(u, "key")) {
+        S = s(e);
+        var x = Object.keys(u).filter(function(r) {
+          return r !== "key";
         });
-        F = 0 < W.length ? "{key: someKey, " + W.join(": ..., ") + ": ...}" : "{key: someKey}", Q[_ + F] || (W = 0 < W.length ? "{" + W.join(": ..., ") + ": ...}" : "{}", console.error(
+        _ = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", Q[S + _] || (x = 0 < x.length ? "{" + x.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,
           _,
-          W,
-          _
-        ), Q[_ + F] = !0);
+          S,
+          x,
+          S
+        ), Q[S + _] = !0);
       }
-      if (_ = null, R !== void 0 && (l(R), _ = "" + R), E(u) && (l(u.key), _ = "" + u.key), "key" in u) {
+      if (S = null, R !== void 0 && (l(R), S = "" + R), E(u) && (l(u.key), S = "" + u.key), "key" in u) {
         R = {};
-        for (var r in u)
-          r !== "key" && (R[r] = u[r]);
+        for (var K in u)
+          K !== "key" && (R[K] = u[K]);
       } else R = u;
-      return _ && y(
+      return S && v(
         R,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
       ), k(
         e,
-        _,
+        S,
         w,
         O,
         b(),
         R,
-        L,
-        V
+        B,
+        L
       );
     }
     function m(e) {
       typeof e == "object" && e !== null && e.$$typeof === o && e._store && (e._store.validated = 1);
     }
-    var a = ge, o = Symbol.for("react.transitional.element"), i = Symbol.for("react.portal"), d = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), I = Symbol.for("react.profiler"), $ = Symbol.for("react.consumer"), B = Symbol.for("react.context"), J = Symbol.for("react.forward_ref"), te = Symbol.for("react.suspense"), se = Symbol.for("react.suspense_list"), ne = Symbol.for("react.memo"), z = Symbol.for("react.lazy"), P = Symbol.for("react.activity"), G = Symbol.for("react.client.reference"), x = a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, N = Array.isArray, D = console.createTask ? console.createTask : function() {
+    var a = Re, o = Symbol.for("react.transitional.element"), i = Symbol.for("react.portal"), d = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), Y = Symbol.for("react.profiler"), W = Symbol.for("react.consumer"), I = Symbol.for("react.context"), J = Symbol.for("react.forward_ref"), se = Symbol.for("react.suspense"), ne = Symbol.for("react.suspense_list"), oe = Symbol.for("react.memo"), z = Symbol.for("react.lazy"), P = Symbol.for("react.activity"), G = Symbol.for("react.client.reference"), N = a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, V = Array.isArray, D = console.createTask ? console.createTask : function() {
       return null;
     };
     a = {
@@ -245,106 +245,106 @@ React keys must be passed directly to JSX without using spread:
     };
     var H, X = {}, Z = a["react-stack-bottom-frame"].bind(
       a,
-      g
-    )(), p = D(h(g)), Q = {};
-    re.Fragment = d, re.jsx = function(e, u, R, F, O) {
-      var w = 1e4 > x.recentlyCreatedOwnerStacks++;
+      h
+    )(), y = D(g(h)), Q = {};
+    te.Fragment = d, te.jsx = function(e, u, R, _, O) {
+      var w = 1e4 > N.recentlyCreatedOwnerStacks++;
       return c(
         e,
         u,
         R,
         !1,
-        F,
+        _,
         O,
         w ? Error("react-stack-top-frame") : Z,
-        w ? D(h(e)) : p
+        w ? D(g(e)) : y
       );
-    }, re.jsxs = function(e, u, R, F, O) {
-      var w = 1e4 > x.recentlyCreatedOwnerStacks++;
+    }, te.jsxs = function(e, u, R, _, O) {
+      var w = 1e4 > N.recentlyCreatedOwnerStacks++;
       return c(
         e,
         u,
         R,
         !0,
-        F,
+        _,
         O,
         w ? Error("react-stack-top-frame") : Z,
-        w ? D(h(e)) : p
+        w ? D(g(e)) : y
       );
     };
-  }()), re;
+  }()), te;
 }
-var de;
-function ve() {
-  return de || (de = 1, process.env.NODE_ENV === "production" ? oe.exports = pe() : oe.exports = ye()), oe.exports;
+var be;
+function Te() {
+  return be || (be = 1, process.env.NODE_ENV === "production" ? ue.exports = ye() : ue.exports = ve()), ue.exports;
 }
-var be = ve();
-const S = () => {
-}, Ee = Re({
+var me = Te();
+const p = () => {
+}, ge = Se({
   ref: null,
-  watch: S,
+  watch: p,
   actions: {
-    reset: S,
-    resetField: S,
-    setValue: S,
-    getValues: S,
-    getErrors: S,
-    getFieldStates: S,
-    getFormStates: S,
-    setError: S,
-    clearError: S,
-    clearErrors: S,
-    checkValidity: S,
-    getNumberFields: S,
-    getFieldValidity: S,
-    getDefaultValues: S,
-    setFieldState: S,
-    resetFieldState: S,
-    getControlledFields: S
+    reset: p,
+    resetField: p,
+    setValue: p,
+    getValues: p,
+    getErrors: p,
+    getFieldStates: p,
+    getFormStates: p,
+    setError: p,
+    clearError: p,
+    clearErrors: p,
+    checkValidity: p,
+    getNumberFields: p,
+    getFieldValidity: p,
+    getDefaultValues: p,
+    setFieldState: p,
+    resetFieldState: p,
+    getControlledFields: p
   },
-  registerController: S,
-  registerHookWatcher: S,
-  lastReloadedAt: S,
-  loadFormValues: S,
-  getWatchValue: S,
+  registerController: p,
+  registerHookWatcher: p,
+  lastReloadedAt: p,
+  loadFormValues: p,
+  getWatchValue: p,
   channels: {}
-}), he = () => Se(Ee), Ve = ({
+}), he = () => pe(ge), We = ({
   id: s,
   control: n,
   method: l,
-  action: h,
+  action: g,
   children: b,
-  onSubmit: g = () => {
+  onSubmit: h = () => {
   },
   onInput: E = () => {
   },
-  onChange: y = () => {
+  onChange: v = () => {
   },
-  onBlur: T = () => {
+  onBlur: F = () => {
   },
   onReset: k = () => {
   },
   numberFields: c = [],
   className: m,
   ...a
-}) => (ae(() => {
-  const o = n.channels.subscribe("onChange", y), i = n.channels.subscribe("onBlur", T);
+}) => (ie(() => {
+  const o = n.channels.subscribe("onChange", v), i = n.channels.subscribe("onBlur", F);
   return () => {
     o(), i();
   };
-}, []), /* @__PURE__ */ be.jsx(Ee.Provider, { value: n, children: /* @__PURE__ */ be.jsx(
+}, []), /* @__PURE__ */ me.jsx(ge.Provider, { value: n, children: /* @__PURE__ */ me.jsx(
   "form",
   {
     id: s,
     ref: n.ref,
-    action: h,
+    action: g,
     method: l,
     className: m,
     onInput: E,
     onSubmit: (o) => {
       l || o.preventDefault();
       const i = n.loadFormValues();
-      g(i);
+      h(i);
     },
     onChange: (o) => {
       const i = o.target.name;
@@ -363,32 +363,32 @@ const S = () => {
     children: b
   },
   n.lastReloadedAt
-) })), Te = ({ control: s, name: n, compute: l }) => {
-  const { getWatchValue: h, registerHookWatcher: b } = s || he(), g = h({ name: n, compute: l }), [E, y] = ue(g);
-  return ae(() => {
-    const T = b({ name: n, compute: l, value: E, setValue: y });
-    return () => T.forEach((k) => k());
+) })), Fe = ({ control: s, name: n, compute: l }) => {
+  const { getWatchValue: g, registerHookWatcher: b } = s || he(), h = g({ name: n, compute: l }), [E, v] = ce(h);
+  return ie(() => {
+    const F = b({ name: n, compute: l, value: E, setValue: v });
+    return () => F.forEach((k) => k());
   }, []), E;
-}, Fe = ({ name: s, defaultValue: n }) => {
-  const { actions: l, registerController: h, channels: b } = he(), g = j(), E = l.getDefaultValues()[s] || n, [y, T] = ue(E), k = Te({ name: `fieldStates.${s}.customState` }), c = f((o) => {
+}, _e = ({ name: s, defaultValue: n }) => {
+  const { actions: l, registerController: g, channels: b } = he(), h = j(), E = l.getDefaultValues()[s] || n, [v, F] = ce(E), k = Fe({ name: `fieldStates.${s}.customState` }), c = f((o) => {
     l.setFieldState(s, "customState", o);
   }, []), m = f(
     (o, { shouldDirty: i = !0, shouldOnChange: d = !0 } = {}) => {
-      T(o), l.setValue(s, o, { shouldDirty: i, shouldOnChange: d });
+      F(o), l.setValue(s, o, { shouldDirty: i, shouldOnChange: d });
     },
     [l.setValue]
   ), a = f(() => {
-    b.publish("onBlur", s, y, l.getValues());
+    b.publish("onBlur", s, v, l.getValues());
   }, []);
-  return ae(() => h(s, T), []), { ref: g, name: s, defaultValue: E, value: y, onChange: m, onBlur: a, customState: k, setCustomState: c };
-}, We = ({
+  return ie(() => g(s, F), []), { ref: h, name: s, defaultValue: E, value: v, onChange: m, onBlur: a, customState: k, setCustomState: c };
+}, $e = ({
   name: s,
   defaultValue: n,
-  render: l = ({ ref: h, name: b, defaultValue: g, value: E, onChange: y, onBlur: T, customState: k, setCustomState: c }) => null
+  render: l = ({ ref: g, name: b, defaultValue: h, value: E, onChange: v, onBlur: F, customState: k, setCustomState: c }) => null
 }) => {
-  const h = Fe({ name: s, defaultValue: n });
-  return l(h);
-}, _e = ["errors", "fieldStates", "formState"], q = (s) => _e.some((n) => s.startsWith(n)) ? s : "values." + s, ke = [
+  const g = _e({ name: s, defaultValue: n });
+  return l(g);
+}, ke = ["errors", "fieldStates", "formState"], q = (s) => ke.some((n) => s.startsWith(n)) ? s : "values." + s, Ae = [
   "badInput",
   "customError",
   "patternMismatch",
@@ -399,12 +399,12 @@ const S = () => {
   "tooShort",
   "typeMismatch",
   "valueMissing"
-], me = (s) => {
+], Ee = (s) => {
   typeof s.setCustomValidity == "function" && s.setCustomValidity("");
-  let n = s.validity, l = ke.find((h) => n[h]);
+  let n = s.validity, l = Ae.find((g) => n[g]);
   if (l) return { type: l, message: s.validationMessage };
 };
-class Ae {
+class we {
   constructor() {
     this.events = /* @__PURE__ */ new Map();
   }
@@ -413,35 +413,35 @@ class Ae {
   }
   subscribe(n, l) {
     return this.events.has(n) || this.events.set(n, /* @__PURE__ */ new Set()), this.events.get(n).add(l), () => {
-      var h;
-      return (h = this.events.get(n)) == null ? void 0 : h.delete(l);
+      var g;
+      return (g = this.events.get(n)) == null ? void 0 : g.delete(l);
     };
   }
   publish(n, ...l) {
-    const h = this.events.get(n);
-    h && h.forEach((b) => b(...l)), this.events.forEach((b, g) => {
-      n.includes(g) && b.forEach((E) => E(...l));
+    const g = this.events.get(n);
+    g && g.forEach((b) => b(...l)), this.events.forEach((b, h) => {
+      n.includes(h) && b.forEach((E) => E(...l));
     });
   }
   reset() {
     this.events.clear();
   }
 }
-const we = () => {
-  const s = j(new Ae()), n = f((b, ...g) => {
-    s.current.publish(b, ...g);
-  }, []), l = f((b, g) => s.current.subscribe(b, g), []), h = f(() => {
+const Oe = () => {
+  const s = j(new we()), n = f((b, ...h) => {
+    s.current.publish(b, ...h);
+  }, []), l = f((b, h) => s.current.subscribe(b, h), []), g = f(() => {
     s.current.reset();
   }, []);
-  return { publish: n, subscribe: l, reset: h };
-}, Oe = () => {
-  const [s, n] = ue(), l = f(() => n((/* @__PURE__ */ new Date()).toString()), []);
-  return [s, l];
+  return { publish: n, subscribe: l, reset: g };
 }, Ce = () => {
-  const [, s] = ue({});
+  const [s, n] = ce(), l = f(() => n((/* @__PURE__ */ new Date()).toString()), []);
+  return [s, l];
+}, je = () => {
+  const [, s] = ce({});
   return f(() => s({}), []);
-}, je = ({ channels: s, getValues: n, getErrors: l, getFieldStates: h, getFormState: b }) => {
-  const g = Ce(), E = f(({ name: c, compute: m }) => {
+}, Pe = ({ channels: s, getValues: n, getErrors: l, getFieldStates: g, getFormState: b }) => {
+  const h = je(), E = f(({ name: c, compute: m }) => {
     if (typeof m == "function") return m(n());
     if (Array.isArray(c)) {
       const a = {};
@@ -455,18 +455,18 @@ const we = () => {
         ...n(),
         errors: { ...l() },
         formState: { ...b() },
-        fieldStates: { ...h() }
+        fieldStates: { ...g() }
       }
     );
-  }, []), y = f((c) => {
+  }, []), v = f((c) => {
     if (!c)
       return s.subscribe("values", () => {
-        g();
+        h();
       }), n();
     if (typeof c == "string") {
       const m = q(c);
       return s.subscribe(m, () => {
-        g();
+        h();
       }), E({ name: c });
     }
     if (Array.isArray(c)) {
@@ -474,12 +474,12 @@ const we = () => {
       return c.forEach((a) => {
         const o = q(a);
         s.subscribe(o, () => {
-          g();
+          h();
         }), m[a] = E({ name: a });
       }), m;
     }
     throw new Error("Parameters of watch must be string or array of string");
-  }, []), T = f(({ name: c, compute: m, value: a, setValue: o }) => {
+  }, []), F = f(({ name: c, compute: m, value: a, setValue: o }) => {
     if (typeof m == "function")
       return [s.subscribe("values", () => {
         const d = E({ compute: m });
@@ -495,11 +495,11 @@ const we = () => {
       } else if (Array.isArray(c)) {
         const i = E({ name: c }), d = [];
         return c.forEach((A) => {
-          const I = q(A), $ = s.subscribe(I, () => {
-            const B = E({ name: A });
-            i[A] !== B && (i[A] = B, o({ ...i }));
+          const Y = q(A), W = s.subscribe(Y, () => {
+            const I = E({ name: A });
+            i[A] !== I && (i[A] = I, o({ ...i }));
           });
-          d.push($);
+          d.push(W);
         }), d;
       } else
         throw new Error("Parameters of name must be string or array of string or compute must be a function");
@@ -526,34 +526,34 @@ const we = () => {
     },
     [s]
   );
-  return { watch: y, registerHookWatcher: T, getWatchValue: E, subscribe: k };
-}, Pe = [], xe = {}, $e = ({
-  numberFields: s = Pe,
-  defaultValues: n = xe,
+  return { watch: v, registerHookWatcher: F, getWatchValue: E, subscribe: k };
+}, xe = [], Ne = {}, Me = ({
+  numberFields: s = xe,
+  defaultValues: n = Ne,
   shouldUnRegister: l = !1,
-  shouldConvertNumber: h = !1
+  shouldConvertNumber: g = !1
 } = {}) => {
-  const [b, g] = Oe(), E = j(), y = j(!1), T = j(!1), k = j(s), c = j(/* @__PURE__ */ new Map()), m = j({}), a = j({}), o = j(n), i = j(n), d = we(), A = f(() => {
+  const [b, h] = Ce(), E = j(), v = j(!1), F = j(!1), k = j(s), c = j(/* @__PURE__ */ new Map()), m = j({}), a = j({}), o = j(n), i = j(n), d = Oe(), A = f(() => {
     a.current = Object.keys(i.current).reduce(
       (r, t) => ({ ...r, [t]: { isError: !1, isDirty: !1, isTouched: !1, customState: null } }),
       {}
     );
-  }, []), I = f((r = {}) => {
-    i.current = { ...i.current, ...r }, o.current = { ...i.current }, c.current.forEach((t, v) => {
-      t(i.current[v]);
-    }), y.current = !1, m.current = {}, k.current = s, c.current = /* @__PURE__ */ new Map(), d.reset(), A(), s.length > 0 && (h = !0), g();
-  }, []), $ = f(() => {
+  }, []), Y = f((r = {}) => {
+    i.current = { ...i.current, ...r }, o.current = { ...i.current }, c.current.forEach((t, T) => {
+      t(i.current[T]);
+    }), v.current = !1, m.current = {}, k.current = s, c.current = /* @__PURE__ */ new Map(), d.reset(), A(), s.length > 0 && (g = !0), h();
+  }, []), W = f(() => {
     const r = Object.fromEntries(new FormData(E.current));
-    return c.current.forEach((v) => {
-      r[v] = o.current[v];
-    }), h && k.current.forEach(
-      (v) => r.hasOwnProperty(v) && (r[v] = Number(r[v]) || 0)
+    return c.current.forEach((T) => {
+      r[T] = o.current[T];
+    }), g && k.current.forEach(
+      (T) => r.hasOwnProperty(T) && (r[T] = Number(r[T]) || 0)
     ), r;
-  }, []), B = f(() => !!Object.values(M()).find((r) => r.isDirty), []), J = f(() => !!Object.values(x()).find((r) => !!r), []), te = f((r) => me(r.target), []), se = f(() => i.current, []), ne = f(() => k.current, []), z = f(() => c.current, []), P = f((r, t) => t ? Array.isArray(t) ? t.map((v) => r[v]) : r[t] : { ...r }, []), G = f((r) => P(o.current, r), [P]), x = f((r) => P(m.current, r), [P]), M = f((r) => P(a.current, r), [P]), N = f(
+  }, []), I = f(() => !!Object.values($()).find((r) => r.isDirty), []), J = f(() => !!Object.values(N()).find((r) => !!r), []), se = f((r) => Ee(r.target), []), ne = f(() => i.current, []), oe = f(() => k.current, []), z = f(() => c.current, []), P = f((r, t) => t ? Array.isArray(t) ? t.map((T) => r[T]) : r[t] : { ...r }, []), G = f((r) => P(o.current, r), [P]), N = f((r) => P(m.current, r), [P]), $ = f((r) => P(a.current, r), [P]), V = f(
     (r) => P(
       {
-        isDirty: y.current,
-        isError: T.current,
+        isDirty: v.current,
+        isError: F.current,
         errorFields: Object.keys(m.current).filter((t) => !!m.current[t]),
         dirtyFields: Object.keys(a.current).filter((t) => a.current[t].isDirty),
         touchedFields: Object.keys(a.current).filter((t) => a.current[t].isTouched)
@@ -561,150 +561,154 @@ const we = () => {
       r
     ),
     [P]
-  ), { watch: D, registerHookWatcher: H, getWatchValue: X, subscribe: Z } = je({
+  ), { watch: D, registerHookWatcher: H, getWatchValue: X, subscribe: Z } = Pe({
     channels: d,
     getValues: G,
-    getErrors: x,
-    getFieldStates: M,
-    getFormState: N
-  }), p = f((r, t, v) => {
+    getErrors: N,
+    getFieldStates: $,
+    getFormState: V
+  }), y = f((r, t, T) => {
     const C = a.current[r];
-    C[t] !== v && (a.current[r] = { ...C, [t]: v }, d.publish(`fieldStates.${r}.${t}`, v), t === "isError" && d.publish("formState.errorFields", N("errorFields")), t === "isDirty" && d.publish("formState.dirtyFields", N("dirtyFields")), t === "isTouched" && d.publish("formState.touchedFields", N("touchedFields")));
+    C[t] !== T && (a.current[r] = { ...C, [t]: T }, d.publish(`fieldStates.${r}.${t}`, T), t === "isError" && d.publish("formState.errorFields", V("errorFields")), t === "isDirty" && d.publish("formState.dirtyFields", V("dirtyFields")), t === "isTouched" && d.publish("formState.touchedFields", V("touchedFields")));
   }, []), Q = f(
     (r) => {
-      p(r, "isError", !1), p(r, "isDirty", !1), p(r, "isTouched", !1), p(r, "customState", null);
+      y(r, "isError", !1), y(r, "isDirty", !1), y(r, "isTouched", !1), y(r, "customState", null);
     },
-    [p]
+    [y]
   ), e = f(
     (r, t) => {
       if (m.current[r] === t) return;
-      m.current[r] = t, p(r, "isError", !!t), d.publish(`errors.${r}`, t);
+      m.current[r] = t, y(r, "isError", !!t), d.publish(`errors.${r}`, t);
       const C = J();
-      T.current !== C && (T.current = C, d.publish("formState.isError", C));
+      F.current !== C && (F.current = C, d.publish("formState.isError", C));
     },
-    [p]
+    [y]
   ), u = f(
     (r) => {
       if (!m.current[r]) return;
-      m.current[r] = null, p(r, "isError", !1), d.publish(`errors.${r}`, null);
+      m.current[r] = null, y(r, "isError", !1), d.publish(`errors.${r}`, null);
       const t = J();
-      T.current !== t && (T.current = t, d.publish("formState.isError", t));
+      F.current !== t && (F.current = t, d.publish("formState.isError", t));
     },
-    [p]
+    [y]
   ), R = f(() => {
     if (Object.keys(m.current) === 0) return;
     m.current = {}, d.publish("errors", m.current);
     const r = J();
-    T.current !== r && (T.current = r, d.publish("formState.isError", r));
-  }, []), F = f(
+    F.current !== r && (F.current = r, d.publish("formState.isError", r));
+  }, []), _ = f(
     (r) => {
-      const t = me(r.target);
+      const t = Ee(r.target);
       t ? e(r.target.name, t) : u(r.target.name);
     },
     [e, u]
   ), O = f(
-    (r, t, { shouldDirty: v = !0, shouldOnChange: C = !0 } = {}) => {
+    (r, t, { shouldDirty: T = !0, shouldOnChange: C = !0 } = {}) => {
       if (t === o.current[r]) return;
-      h && k.current.includes(r) && (t = Number(t) || void 0), p(r, "isTouched", !0);
-      const K = t !== i.current[r];
-      v && a.current[r].isDirty !== K && p(r, "isDirty", K);
-      const Y = B();
-      y.current !== Y && (y.current = Y, d.publish("formState.isDirty", Y)), o.current[r] = t;
+      g && k.current.includes(r) && (t = Number(t) || void 0), y(r, "isTouched", !0);
+      const ee = t !== i.current[r];
+      T && a.current[r].isDirty !== ee && y(r, "isDirty", ee);
+      const M = I();
+      v.current !== M && (v.current = M, d.publish("formState.isDirty", M)), o.current[r] = t;
       const U = c.current.get(r);
-      U && U(t), d.publish(`values.${r}`, t, { shouldDirty: v, shouldOnChange: C }), C && d.publish("onChange", r, t, o.current);
+      U && U(t), d.publish(`values.${r}`, t, { shouldDirty: T, shouldOnChange: C }), C && d.publish("onChange", r, t, o.current);
     },
-    [p]
+    [y]
   ), w = f((r, t) => (c.current.set(r, t), () => {
     l && c.current.delete(r);
-  }), []), L = f(
-    (r, { keepError: t, keepDirty: v, keepTouched: C, keepCustomState: K, defaultValue: Y }) => {
+  }), []), B = f(
+    (r, { keepError: t, keepDirty: T, keepTouched: C, keepCustomState: ee, defaultValue: M }) => {
       const U = c.current.get(r);
       if (!U)
         throw new Error(`Cannot reset "${r}" because it's uncontrolled field`);
-      i.current[r] = Y, o.current[r] = Y, U && U(Y), t || u(r), v || p(r, "isDirty", !1), C || p(r, "isTouched", !1), K || p(r, "customState", null);
+      i.current[r] = M, o.current[r] = M, U && U(M), t || u(r), T || y(r, "isDirty", !1), C || y(r, "isTouched", !1), ee || y(r, "customState", null);
     },
-    [u, p]
-  ), V = ce(
+    [u, y]
+  ), L = f((r, t = S.getValues(r)) => {
+    d.publish("onBlur", r, t, S.getValues());
+  }, []), S = ae(
     () => ({
       subscribe: Z,
-      reset: I,
-      resetField: L,
+      reset: Y,
+      resetField: B,
       setValue: O,
       getValues: G,
-      getErrors: x,
-      getFieldStates: M,
-      getFormState: N,
+      getErrors: N,
+      getFieldStates: $,
+      getFormState: V,
       setError: e,
       clearError: u,
       clearErrors: R,
-      checkValidity: F,
-      getNumberFields: ne,
-      getFieldValidity: te,
-      getDefaultValues: se,
-      setFieldState: p,
+      checkValidity: _,
+      getNumberFields: oe,
+      getFieldValidity: se,
+      getDefaultValues: ne,
+      setFieldState: y,
+      triggerFieldBlur: L,
       resetFieldState: Q,
       getControlledFields: z
     }),
     [
       Z,
-      I,
-      L,
+      Y,
+      B,
       O,
       G,
-      x,
-      M,
       N,
+      $,
+      V,
       e,
       u,
       R,
-      F,
-      ne,
-      te,
+      _,
+      oe,
       se,
-      p,
+      ne,
+      y,
       Q,
+      L,
       z
     ]
-  ), _ = ce(
+  ), x = ae(
     () => ({
       ref: E,
       watch: D,
-      actions: V,
+      actions: S,
       registerController: w,
       registerHookWatcher: H,
       lastReloadedAt: b,
-      loadFormValues: $,
+      loadFormValues: W,
       getWatchValue: X,
       channels: d
     }),
     [
       E,
       D,
-      V,
+      S,
       w,
       H,
       b,
-      $,
+      W,
       X,
       d
     ]
-  ), W = ce(() => ({ control: _, actions: V, watch: D }), [b, _, V, D]);
-  return ie(() => {
+  ), K = ae(() => ({ control: x, actions: S, watch: D }), [b, x, S, D]);
+  return le(() => {
     if ([...E.current.querySelectorAll("[name]")].forEach((t) => {
       !t.defaultValue && i.current[t.name] && (t.defaultValue = i.current[t.name]), t.type === "number" && !k.current.includes(t.name) && k.current.push(t.name);
     }), E.current) {
-      const t = $();
+      const t = W();
       o.current = { ...t }, i.current = { ...t };
     }
-  }, [b]), ie(() => {
+  }, [b]), le(() => {
     A();
-  }, []), W;
+  }, []), K;
 };
 export {
-  We as Controller,
-  Ve as Form,
-  Fe as useController,
-  $e as useForm,
+  $e as Controller,
+  We as Form,
+  _e as useController,
+  Me as useForm,
   he as useFormContext,
-  Te as useWatch
+  Fe as useWatch
 };

package/dist/react-simple-formkit.umd.js

@@ -1,4 +1,4 @@
-(function(w,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],r):(w=typeof globalThis<"u"?globalThis:w||self,r(w.Name={},w.React))})(this,function(w,r){"use strict";var re={exports:{}},G={};/**
+(function(w,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],r):(w=typeof globalThis<"u"?globalThis:w||self,r(w.Name={},w.React))})(this,function(w,r){"use strict";var se={exports:{}},G={};/**
  * @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 ce;function Ee(){if(ce)return G;ce=1;var n=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function f(h,b,g){var E=null;if(g!==void 0&&(E=""+g),b.key!==void 0&&(E=""+b.key),"key"in b){g={};for(var y in b)y!=="key"&&(g[y]=b[y])}else g=b;return b=g.ref,{$$typeof:n,type:h,key:E,ref:b!==void 0?b:null,props:g}}return G.Fragment=o,G.jsx=f,G.jsxs=f,G}var H={};/**
+ */var ue;function he(){if(ue)return G;ue=1;var n=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function f(h,b,g){var E=null;if(g!==void 0&&(E=""+g),b.key!==void 0&&(E=""+b.key),"key"in b){g={};for(var y in b)y!=="key"&&(g[y]=b[y])}else g=b;return b=g.ref,{$$typeof:n,type:h,key:E,ref:b!==void 0?b:null,props:g}}return G.Fragment=o,G.jsx=f,G.jsxs=f,G}var H={};/**
  * @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 ue;function he(){return ue||(ue=1,process.env.NODE_ENV!=="production"&&function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Q?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case d:return"Fragment";case B:return"Profiler";case _:return"StrictMode";case se:return"Suspense";case ne:return"SuspenseList";case P: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 i:return"Portal";case U:return(e.displayName||"Context")+".Provider";case M:return(e._context.displayName||"Context")+".Consumer";case X:var c=e.render;return e=e.displayName,e||(e=c.displayName||c.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case oe:return c=e.displayName||null,c!==null?c:n(e.type)||"Memo";case Z:c=e._payload,e=e._init;try{return n(e(c))}catch{}}return null}function o(e){return""+e}function f(e){try{o(e);var c=!1}catch{c=!0}if(c){c=console;var R=c.error,v=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return R.call(c,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",v),o(e)}}function h(e){if(e===d)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Z)return"<...>";try{var c=n(e);return c?"<"+c+">":"<...>"}catch{return"<...>"}}function b(){var e=N.A;return e===null?null:e.getOwner()}function g(){return Error("react-stack-top-frame")}function E(e){if(Y.call(e,"key")){var c=Object.getOwnPropertyDescriptor(e,"key").get;if(c&&c.isReactWarning)return!1}return e.key!==void 0}function y(e,c){function R(){K||(K=!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)",c))}R.isReactWarning=!0,Object.defineProperty(e,"key",{get:R,configurable:!0})}function p(){var e=n(this.type);return q[e]||(q[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 F(e,c,R,v,O,A,J,V){return R=A.ref,e={$$typeof:a,type:e,key:c,props:A,_owner:O},(R!==void 0?R:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:p}):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:J}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function u(e,c,R,v,O,A,J,V){var T=c.children;if(T!==void 0)if(v)if(x(T)){for(v=0;v<T.length;v++)m(T[v]);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 m(T);if(Y.call(c,"key")){T=n(e);var W=Object.keys(c).filter(function(s){return s!=="key"});v=0<W.length?"{key: someKey, "+W.join(": ..., ")+": ...}":"{key: someKey}",ee[T+v]||(W=0<W.length?"{"+W.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var le;function ge(){return le||(le=1,process.env.NODE_ENV!=="production"&&function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Q?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case d:return"Fragment";case B:return"Profiler";case _:return"StrictMode";case ne:return"Suspense";case oe:return"SuspenseList";case P: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 i:return"Portal";case L:return(e.displayName||"Context")+".Provider";case W:return(e._context.displayName||"Context")+".Consumer";case X:var c=e.render;return e=e.displayName,e||(e=c.displayName||c.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ae:return c=e.displayName||null,c!==null?c:n(e.type)||"Memo";case Z:c=e._payload,e=e._init;try{return n(e(c))}catch{}}return null}function o(e){return""+e}function f(e){try{o(e);var c=!1}catch{c=!0}if(c){c=console;var R=c.error,T=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return R.call(c,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",T),o(e)}}function h(e){if(e===d)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Z)return"<...>";try{var c=n(e);return c?"<"+c+">":"<...>"}catch{return"<...>"}}function b(){var e=x.A;return e===null?null:e.getOwner()}function g(){return Error("react-stack-top-frame")}function E(e){if(M.call(e,"key")){var c=Object.getOwnPropertyDescriptor(e,"key").get;if(c&&c.isReactWarning)return!1}return e.key!==void 0}function y(e,c){function R(){K||(K=!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)",c))}R.isReactWarning=!0,Object.defineProperty(e,"key",{get:R,configurable:!0})}function v(){var e=n(this.type);return q[e]||(q[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 F(e,c,R,T,O,A,U,J){return R=A.ref,e={$$typeof:a,type:e,key:c,props:A,_owner:O},(R!==void 0?R: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:U}),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,c,R,T,O,A,U,J){var S=c.children;if(S!==void 0)if(T)if(V(S)){for(T=0;T<S.length;T++)m(S[T]);Object.freeze&&Object.freeze(S)}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 m(S);if(M.call(c,"key")){S=n(e);var N=Object.keys(c).filter(function(t){return t!=="key"});T=0<N.length?"{key: someKey, "+N.join(": ..., ")+": ...}":"{key: someKey}",ee[S+T]||(N=0<N.length?"{"+N.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} />`,v,T,W,T),ee[T+v]=!0)}if(T=null,R!==void 0&&(f(R),T=""+R),E(c)&&(f(c.key),T=""+c.key),"key"in c){R={};for(var t in c)t!=="key"&&(R[t]=c[t])}else R=c;return T&&y(R,typeof e=="function"?e.displayName||e.name||"Unknown":e),F(e,T,A,O,b(),R,J,V)}function m(e){typeof e=="object"&&e!==null&&e.$$typeof===a&&e._store&&(e._store.validated=1)}var l=r,a=Symbol.for("react.transitional.element"),i=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),B=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),U=Symbol.for("react.context"),X=Symbol.for("react.forward_ref"),se=Symbol.for("react.suspense"),ne=Symbol.for("react.suspense_list"),oe=Symbol.for("react.memo"),Z=Symbol.for("react.lazy"),P=Symbol.for("react.activity"),Q=Symbol.for("react.client.reference"),N=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,x=Array.isArray,D=console.createTask?console.createTask:function(){return null};l={"react-stack-bottom-frame":function(e){return e()}};var K,q={},$=l["react-stack-bottom-frame"].bind(l,g)(),S=D(h(g)),ee={};H.Fragment=d,H.jsx=function(e,c,R,v,O){var A=1e4>N.recentlyCreatedOwnerStacks++;return u(e,c,R,!1,v,O,A?Error("react-stack-top-frame"):$,A?D(h(e)):S)},H.jsxs=function(e,c,R,v,O){var A=1e4>N.recentlyCreatedOwnerStacks++;return u(e,c,R,!0,v,O,A?Error("react-stack-top-frame"):$,A?D(h(e)):S)}}()),H}var le;function ge(){return le||(le=1,process.env.NODE_ENV==="production"?re.exports=Ee():re.exports=he()),re.exports}var ie=ge();const k=()=>{},fe=r.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:{}}),ae=()=>r.useContext(fe),Re=({id:n,control:o,method:f,action:h,children:b,onSubmit:g=()=>{},onInput:E=()=>{},onChange:y=()=>{},onBlur:p=()=>{},onReset:F=()=>{},numberFields:u=[],className:m,...l})=>(r.useEffect(()=>{const a=o.channels.subscribe("onChange",y),i=o.channels.subscribe("onBlur",p);return()=>{a(),i()}},[]),ie.jsx(fe.Provider,{value:o,children:ie.jsx("form",{id:n,ref:o.ref,action:h,method:f,className:m,onInput:E,onSubmit:a=>{f||a.preventDefault();const i=o.loadFormValues();g(i)},onChange:a=>{const i=a.target.name;o.actions.getControlledFields().has(i)||o.actions.setValue(i,a.target.value)},onBlur:a=>{const i=a.target.name;if(o.actions.getControlledFields().has(i))return;const d=a.target.value;o.channels.publish("onBlur",i,d,o.actions.getValues())},onReset:a=>{o.actions.reset(),F(a)},...l,children:b},o.lastReloadedAt)})),de=({control:n,name:o,compute:f})=>{const{getWatchValue:h,registerHookWatcher:b}=n||ae(),g=h({name:o,compute:f}),[E,y]=r.useState(g);return r.useEffect(()=>{const p=b({name:o,compute:f,value:E,setValue:y});return()=>p.forEach(F=>F())},[]),E},be=({name:n,defaultValue:o})=>{const{actions:f,registerController:h,channels:b}=ae(),g=r.useRef(),E=f.getDefaultValues()[n]||o,[y,p]=r.useState(E),F=de({name:`fieldStates.${n}.customState`}),u=r.useCallback(a=>{f.setFieldState(n,"customState",a)},[]),m=r.useCallback((a,{shouldDirty:i=!0,shouldOnChange:d=!0}={})=>{p(a),f.setValue(n,a,{shouldDirty:i,shouldOnChange:d})},[f.setValue]),l=r.useCallback(()=>{b.publish("onBlur",n,y,f.getValues())},[]);return r.useEffect(()=>h(n,p),[]),{ref:g,name:n,defaultValue:E,value:y,onChange:m,onBlur:l,customState:F,setCustomState:u}},ke=({name:n,defaultValue:o,render:f=({ref:h,name:b,defaultValue:g,value:E,onChange:y,onBlur:p,customState:F,setCustomState:u})=>null})=>{const h=be({name:n,defaultValue:o});return f(h)},Se=["errors","fieldStates","formState"],L=n=>Se.some(o=>n.startsWith(o))?n:"values."+n,ye=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],me=n=>{typeof n.setCustomValidity=="function"&&n.setCustomValidity("");let o=n.validity,f=ye.find(h=>o[h]);if(f)return{type:f,message:n.validationMessage}};class Ce{constructor(){this.events=new Map}getEvents(){return this.events}subscribe(o,f){return this.events.has(o)||this.events.set(o,new Set),this.events.get(o).add(f),()=>{var h;return(h=this.events.get(o))==null?void 0:h.delete(f)}}publish(o,...f){const h=this.events.get(o);h&&h.forEach(b=>b(...f)),this.events.forEach((b,g)=>{o.includes(g)&&b.forEach(E=>E(...f))})}reset(){this.events.clear()}}const pe=()=>{const n=r.useRef(new Ce),o=r.useCallback((b,...g)=>{n.current.publish(b,...g)},[]),f=r.useCallback((b,g)=>n.current.subscribe(b,g),[]),h=r.useCallback(()=>{n.current.reset()},[]);return{publish:o,subscribe:f,reset:h}},ve=()=>{const[n,o]=r.useState(),f=r.useCallback(()=>o(new Date().toString()),[]);return[n,f]},Te=()=>{const[,n]=r.useState({});return r.useCallback(()=>n({}),[])},Fe=({channels:n,getValues:o,getErrors:f,getFieldStates:h,getFormState:b})=>{const g=Te(),E=r.useCallback(({name:u,compute:m})=>{if(typeof m=="function")return m(o());if(Array.isArray(u)){const l={};return u.forEach(a=>{l[a]=E({name:a})}),l}return u.replaceAll(/\[(\d+)\]/g,".$1").split(".").reduce((l,a)=>l&&l[a]!==void 0?l[a]:void 0,{...o(),errors:{...f()},formState:{...b()},fieldStates:{...h()}})},[]),y=r.useCallback(u=>{if(!u)return n.subscribe("values",()=>{g()}),o();if(typeof u=="string"){const m=L(u);return n.subscribe(m,()=>{g()}),E({name:u})}if(Array.isArray(u)){const m={};return u.forEach(l=>{const a=L(l);n.subscribe(a,()=>{g()}),m[l]=E({name:l})}),m}throw new Error("Parameters of watch must be string or array of string")},[]),p=r.useCallback(({name:u,compute:m,value:l,setValue:a})=>{if(typeof m=="function")return[n.subscribe("values",()=>{const d=E({compute:m});d!==l&&a(d)})];if(u)if(typeof u=="string"){const i=L(u);return[n.subscribe(i,()=>{const _=E({name:u});_!==l&&a(_)})]}else if(Array.isArray(u)){const i=E({name:u}),d=[];return u.forEach(_=>{const B=L(_),M=n.subscribe(B,()=>{const U=E({name:_});i[_]!==U&&(i[_]=U,a({...i}))});d.push(M)}),d}else throw new Error("Parameters of name must be string or array of string or compute must be a function");else return[n.subscribe("values",()=>{a(o())})]},[]),F=r.useCallback((u,m)=>{if(typeof u===void 0)return n.subscribe("values",m);if(typeof u=="string"){const l=L(u);return n.subscribe(l,m)}if(Array.isArray(u)){const l={},a=[];return u.forEach(i=>{const d=L(i),_=n.subscribe(d,()=>{l[i]=E({name:i}),m(l)});a.push(_)}),a}},[n]);return{watch:y,registerHookWatcher:p,getWatchValue:E,subscribe:F}},_e=[],Ae={},we=({numberFields:n=_e,defaultValues:o=Ae,shouldUnRegister:f=!1,shouldConvertNumber:h=!1}={})=>{const[b,g]=ve(),E=r.useRef(),y=r.useRef(!1),p=r.useRef(!1),F=r.useRef(n),u=r.useRef(new Map),m=r.useRef({}),l=r.useRef({}),a=r.useRef(o),i=r.useRef(o),d=pe(),_=r.useCallback(()=>{l.current=Object.keys(i.current).reduce((t,s)=>({...t,[s]:{isError:!1,isDirty:!1,isTouched:!1,customState:null}}),{})},[]),B=r.useCallback((t={})=>{i.current={...i.current,...t},a.current={...i.current},u.current.forEach((s,C)=>{s(i.current[C])}),y.current=!1,m.current={},F.current=n,u.current=new Map,d.reset(),_(),n.length>0&&(h=!0),g()},[]),M=r.useCallback(()=>{const t=Object.fromEntries(new FormData(E.current));return u.current.forEach(C=>{t[C]=a.current[C]}),h&&F.current.forEach(C=>t.hasOwnProperty(C)&&(t[C]=Number(t[C])||0)),t},[]),U=r.useCallback(()=>!!Object.values(Y()).find(t=>t.isDirty),[]),X=r.useCallback(()=>!!Object.values(N()).find(t=>!!t),[]),se=r.useCallback(t=>me(t.target),[]),ne=r.useCallback(()=>i.current,[]),oe=r.useCallback(()=>F.current,[]),Z=r.useCallback(()=>u.current,[]),P=r.useCallback((t,s)=>s?Array.isArray(s)?s.map(C=>t[C]):t[s]:{...t},[]),Q=r.useCallback(t=>P(a.current,t),[P]),N=r.useCallback(t=>P(m.current,t),[P]),Y=r.useCallback(t=>P(l.current,t),[P]),x=r.useCallback(t=>P({isDirty:y.current,isError:p.current,errorFields:Object.keys(m.current).filter(s=>!!m.current[s]),dirtyFields:Object.keys(l.current).filter(s=>l.current[s].isDirty),touchedFields:Object.keys(l.current).filter(s=>l.current[s].isTouched)},t),[P]),{watch:D,registerHookWatcher:K,getWatchValue:q,subscribe:$}=Fe({channels:d,getValues:Q,getErrors:N,getFieldStates:Y,getFormState:x}),S=r.useCallback((t,s,C)=>{const j=l.current[t];j[s]!==C&&(l.current[t]={...j,[s]:C},d.publish(`fieldStates.${t}.${s}`,C),s==="isError"&&d.publish("formState.errorFields",x("errorFields")),s==="isDirty"&&d.publish("formState.dirtyFields",x("dirtyFields")),s==="isTouched"&&d.publish("formState.touchedFields",x("touchedFields")))},[]),ee=r.useCallback(t=>{S(t,"isError",!1),S(t,"isDirty",!1),S(t,"isTouched",!1),S(t,"customState",null)},[S]),e=r.useCallback((t,s)=>{if(m.current[t]===s)return;m.current[t]=s,S(t,"isError",!!s),d.publish(`errors.${t}`,s);const j=X();p.current!==j&&(p.current=j,d.publish("formState.isError",j))},[S]),c=r.useCallback(t=>{if(!m.current[t])return;m.current[t]=null,S(t,"isError",!1),d.publish(`errors.${t}`,null);const s=X();p.current!==s&&(p.current=s,d.publish("formState.isError",s))},[S]),R=r.useCallback(()=>{if(Object.keys(m.current)===0)return;m.current={},d.publish("errors",m.current);const t=X();p.current!==t&&(p.current=t,d.publish("formState.isError",t))},[]),v=r.useCallback(t=>{const s=me(t.target);s?e(t.target.name,s):c(t.target.name)},[e,c]),O=r.useCallback((t,s,{shouldDirty:C=!0,shouldOnChange:j=!0}={})=>{if(s===a.current[t])return;h&&F.current.includes(t)&&(s=Number(s)||void 0),S(t,"isTouched",!0);const te=s!==i.current[t];C&&l.current[t].isDirty!==te&&S(t,"isDirty",te);const I=U();y.current!==I&&(y.current=I,d.publish("formState.isDirty",I)),a.current[t]=s;const z=u.current.get(t);z&&z(s),d.publish(`values.${t}`,s,{shouldDirty:C,shouldOnChange:j}),j&&d.publish("onChange",t,s,a.current)},[S]),A=r.useCallback((t,s)=>(u.current.set(t,s),()=>{f&&u.current.delete(t)}),[]),J=r.useCallback((t,{keepError:s,keepDirty:C,keepTouched:j,keepCustomState:te,defaultValue:I})=>{const z=u.current.get(t);if(!z)throw new Error(`Cannot reset "${t}" because it's uncontrolled field`);i.current[t]=I,a.current[t]=I,z&&z(I),s||c(t),C||S(t,"isDirty",!1),j||S(t,"isTouched",!1),te||S(t,"customState",null)},[c,S]),V=r.useMemo(()=>({subscribe:$,reset:B,resetField:J,setValue:O,getValues:Q,getErrors:N,getFieldStates:Y,getFormState:x,setError:e,clearError:c,clearErrors:R,checkValidity:v,getNumberFields:oe,getFieldValidity:se,getDefaultValues:ne,setFieldState:S,resetFieldState:ee,getControlledFields:Z}),[$,B,J,O,Q,N,Y,x,e,c,R,v,oe,se,ne,S,ee,Z]),T=r.useMemo(()=>({ref:E,watch:D,actions:V,registerController:A,registerHookWatcher:K,lastReloadedAt:b,loadFormValues:M,getWatchValue:q,channels:d}),[E,D,V,A,K,b,M,q,d]),W=r.useMemo(()=>({control:T,actions:V,watch:D}),[b,T,V,D]);return r.useLayoutEffect(()=>{if([...E.current.querySelectorAll("[name]")].forEach(s=>{!s.defaultValue&&i.current[s.name]&&(s.defaultValue=i.current[s.name]),s.type==="number"&&!F.current.includes(s.name)&&F.current.push(s.name)}),E.current){const s=M();a.current={...s},i.current={...s}}},[b]),r.useLayoutEffect(()=>{_()},[]),W};w.Controller=ke,w.Form=Re,w.useController=be,w.useForm=we,w.useFormContext=ae,w.useWatch=de,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
+  <%s key={someKey} {...props} />`,T,S,N,S),ee[S+T]=!0)}if(S=null,R!==void 0&&(f(R),S=""+R),E(c)&&(f(c.key),S=""+c.key),"key"in c){R={};for(var te in c)te!=="key"&&(R[te]=c[te])}else R=c;return S&&y(R,typeof e=="function"?e.displayName||e.name||"Unknown":e),F(e,S,A,O,b(),R,U,J)}function m(e){typeof e=="object"&&e!==null&&e.$$typeof===a&&e._store&&(e._store.validated=1)}var l=r,a=Symbol.for("react.transitional.element"),i=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),B=Symbol.for("react.profiler"),W=Symbol.for("react.consumer"),L=Symbol.for("react.context"),X=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),oe=Symbol.for("react.suspense_list"),ae=Symbol.for("react.memo"),Z=Symbol.for("react.lazy"),P=Symbol.for("react.activity"),Q=Symbol.for("react.client.reference"),x=l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,V=Array.isArray,D=console.createTask?console.createTask:function(){return null};l={"react-stack-bottom-frame":function(e){return e()}};var K,q={},$=l["react-stack-bottom-frame"].bind(l,g)(),C=D(h(g)),ee={};H.Fragment=d,H.jsx=function(e,c,R,T,O){var A=1e4>x.recentlyCreatedOwnerStacks++;return u(e,c,R,!1,T,O,A?Error("react-stack-top-frame"):$,A?D(h(e)):C)},H.jsxs=function(e,c,R,T,O){var A=1e4>x.recentlyCreatedOwnerStacks++;return u(e,c,R,!0,T,O,A?Error("react-stack-top-frame"):$,A?D(h(e)):C)}}()),H}var ie;function Re(){return ie||(ie=1,process.env.NODE_ENV==="production"?se.exports=he():se.exports=ge()),se.exports}var fe=Re();const k=()=>{},de=r.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:{}}),ce=()=>r.useContext(de),ke=({id:n,control:o,method:f,action:h,children:b,onSubmit:g=()=>{},onInput:E=()=>{},onChange:y=()=>{},onBlur:v=()=>{},onReset:F=()=>{},numberFields:u=[],className:m,...l})=>(r.useEffect(()=>{const a=o.channels.subscribe("onChange",y),i=o.channels.subscribe("onBlur",v);return()=>{a(),i()}},[]),fe.jsx(de.Provider,{value:o,children:fe.jsx("form",{id:n,ref:o.ref,action:h,method:f,className:m,onInput:E,onSubmit:a=>{f||a.preventDefault();const i=o.loadFormValues();g(i)},onChange:a=>{const i=a.target.name;o.actions.getControlledFields().has(i)||o.actions.setValue(i,a.target.value)},onBlur:a=>{const i=a.target.name;if(o.actions.getControlledFields().has(i))return;const d=a.target.value;o.channels.publish("onBlur",i,d,o.actions.getValues())},onReset:a=>{o.actions.reset(),F(a)},...l,children:b},o.lastReloadedAt)})),be=({control:n,name:o,compute:f})=>{const{getWatchValue:h,registerHookWatcher:b}=n||ce(),g=h({name:o,compute:f}),[E,y]=r.useState(g);return r.useEffect(()=>{const v=b({name:o,compute:f,value:E,setValue:y});return()=>v.forEach(F=>F())},[]),E},me=({name:n,defaultValue:o})=>{const{actions:f,registerController:h,channels:b}=ce(),g=r.useRef(),E=f.getDefaultValues()[n]||o,[y,v]=r.useState(E),F=be({name:`fieldStates.${n}.customState`}),u=r.useCallback(a=>{f.setFieldState(n,"customState",a)},[]),m=r.useCallback((a,{shouldDirty:i=!0,shouldOnChange:d=!0}={})=>{v(a),f.setValue(n,a,{shouldDirty:i,shouldOnChange:d})},[f.setValue]),l=r.useCallback(()=>{b.publish("onBlur",n,y,f.getValues())},[]);return r.useEffect(()=>h(n,v),[]),{ref:g,name:n,defaultValue:E,value:y,onChange:m,onBlur:l,customState:F,setCustomState:u}},Se=({name:n,defaultValue:o,render:f=({ref:h,name:b,defaultValue:g,value:E,onChange:y,onBlur:v,customState:F,setCustomState:u})=>null})=>{const h=me({name:n,defaultValue:o});return f(h)},Ce=["errors","fieldStates","formState"],I=n=>Ce.some(o=>n.startsWith(o))?n:"values."+n,ye=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],Ee=n=>{typeof n.setCustomValidity=="function"&&n.setCustomValidity("");let o=n.validity,f=ye.find(h=>o[h]);if(f)return{type:f,message:n.validationMessage}};class pe{constructor(){this.events=new Map}getEvents(){return this.events}subscribe(o,f){return this.events.has(o)||this.events.set(o,new Set),this.events.get(o).add(f),()=>{var h;return(h=this.events.get(o))==null?void 0:h.delete(f)}}publish(o,...f){const h=this.events.get(o);h&&h.forEach(b=>b(...f)),this.events.forEach((b,g)=>{o.includes(g)&&b.forEach(E=>E(...f))})}reset(){this.events.clear()}}const ve=()=>{const n=r.useRef(new pe),o=r.useCallback((b,...g)=>{n.current.publish(b,...g)},[]),f=r.useCallback((b,g)=>n.current.subscribe(b,g),[]),h=r.useCallback(()=>{n.current.reset()},[]);return{publish:o,subscribe:f,reset:h}},Te=()=>{const[n,o]=r.useState(),f=r.useCallback(()=>o(new Date().toString()),[]);return[n,f]},Fe=()=>{const[,n]=r.useState({});return r.useCallback(()=>n({}),[])},_e=({channels:n,getValues:o,getErrors:f,getFieldStates:h,getFormState:b})=>{const g=Fe(),E=r.useCallback(({name:u,compute:m})=>{if(typeof m=="function")return m(o());if(Array.isArray(u)){const l={};return u.forEach(a=>{l[a]=E({name:a})}),l}return u.replaceAll(/\[(\d+)\]/g,".$1").split(".").reduce((l,a)=>l&&l[a]!==void 0?l[a]:void 0,{...o(),errors:{...f()},formState:{...b()},fieldStates:{...h()}})},[]),y=r.useCallback(u=>{if(!u)return n.subscribe("values",()=>{g()}),o();if(typeof u=="string"){const m=I(u);return n.subscribe(m,()=>{g()}),E({name:u})}if(Array.isArray(u)){const m={};return u.forEach(l=>{const a=I(l);n.subscribe(a,()=>{g()}),m[l]=E({name:l})}),m}throw new Error("Parameters of watch must be string or array of string")},[]),v=r.useCallback(({name:u,compute:m,value:l,setValue:a})=>{if(typeof m=="function")return[n.subscribe("values",()=>{const d=E({compute:m});d!==l&&a(d)})];if(u)if(typeof u=="string"){const i=I(u);return[n.subscribe(i,()=>{const _=E({name:u});_!==l&&a(_)})]}else if(Array.isArray(u)){const i=E({name:u}),d=[];return u.forEach(_=>{const B=I(_),W=n.subscribe(B,()=>{const L=E({name:_});i[_]!==L&&(i[_]=L,a({...i}))});d.push(W)}),d}else throw new Error("Parameters of name must be string or array of string or compute must be a function");else return[n.subscribe("values",()=>{a(o())})]},[]),F=r.useCallback((u,m)=>{if(typeof u===void 0)return n.subscribe("values",m);if(typeof u=="string"){const l=I(u);return n.subscribe(l,m)}if(Array.isArray(u)){const l={},a=[];return u.forEach(i=>{const d=I(i),_=n.subscribe(d,()=>{l[i]=E({name:i}),m(l)});a.push(_)}),a}},[n]);return{watch:y,registerHookWatcher:v,getWatchValue:E,subscribe:F}},Ae=[],we={},Oe=({numberFields:n=Ae,defaultValues:o=we,shouldUnRegister:f=!1,shouldConvertNumber:h=!1}={})=>{const[b,g]=Te(),E=r.useRef(),y=r.useRef(!1),v=r.useRef(!1),F=r.useRef(n),u=r.useRef(new Map),m=r.useRef({}),l=r.useRef({}),a=r.useRef(o),i=r.useRef(o),d=ve(),_=r.useCallback(()=>{l.current=Object.keys(i.current).reduce((t,s)=>({...t,[s]:{isError:!1,isDirty:!1,isTouched:!1,customState:null}}),{})},[]),B=r.useCallback((t={})=>{i.current={...i.current,...t},a.current={...i.current},u.current.forEach((s,p)=>{s(i.current[p])}),y.current=!1,m.current={},F.current=n,u.current=new Map,d.reset(),_(),n.length>0&&(h=!0),g()},[]),W=r.useCallback(()=>{const t=Object.fromEntries(new FormData(E.current));return u.current.forEach(p=>{t[p]=a.current[p]}),h&&F.current.forEach(p=>t.hasOwnProperty(p)&&(t[p]=Number(t[p])||0)),t},[]),L=r.useCallback(()=>!!Object.values(M()).find(t=>t.isDirty),[]),X=r.useCallback(()=>!!Object.values(x()).find(t=>!!t),[]),ne=r.useCallback(t=>Ee(t.target),[]),oe=r.useCallback(()=>i.current,[]),ae=r.useCallback(()=>F.current,[]),Z=r.useCallback(()=>u.current,[]),P=r.useCallback((t,s)=>s?Array.isArray(s)?s.map(p=>t[p]):t[s]:{...t},[]),Q=r.useCallback(t=>P(a.current,t),[P]),x=r.useCallback(t=>P(m.current,t),[P]),M=r.useCallback(t=>P(l.current,t),[P]),V=r.useCallback(t=>P({isDirty:y.current,isError:v.current,errorFields:Object.keys(m.current).filter(s=>!!m.current[s]),dirtyFields:Object.keys(l.current).filter(s=>l.current[s].isDirty),touchedFields:Object.keys(l.current).filter(s=>l.current[s].isTouched)},t),[P]),{watch:D,registerHookWatcher:K,getWatchValue:q,subscribe:$}=_e({channels:d,getValues:Q,getErrors:x,getFieldStates:M,getFormState:V}),C=r.useCallback((t,s,p)=>{const j=l.current[t];j[s]!==p&&(l.current[t]={...j,[s]:p},d.publish(`fieldStates.${t}.${s}`,p),s==="isError"&&d.publish("formState.errorFields",V("errorFields")),s==="isDirty"&&d.publish("formState.dirtyFields",V("dirtyFields")),s==="isTouched"&&d.publish("formState.touchedFields",V("touchedFields")))},[]),ee=r.useCallback(t=>{C(t,"isError",!1),C(t,"isDirty",!1),C(t,"isTouched",!1),C(t,"customState",null)},[C]),e=r.useCallback((t,s)=>{if(m.current[t]===s)return;m.current[t]=s,C(t,"isError",!!s),d.publish(`errors.${t}`,s);const j=X();v.current!==j&&(v.current=j,d.publish("formState.isError",j))},[C]),c=r.useCallback(t=>{if(!m.current[t])return;m.current[t]=null,C(t,"isError",!1),d.publish(`errors.${t}`,null);const s=X();v.current!==s&&(v.current=s,d.publish("formState.isError",s))},[C]),R=r.useCallback(()=>{if(Object.keys(m.current)===0)return;m.current={},d.publish("errors",m.current);const t=X();v.current!==t&&(v.current=t,d.publish("formState.isError",t))},[]),T=r.useCallback(t=>{const s=Ee(t.target);s?e(t.target.name,s):c(t.target.name)},[e,c]),O=r.useCallback((t,s,{shouldDirty:p=!0,shouldOnChange:j=!0}={})=>{if(s===a.current[t])return;h&&F.current.includes(t)&&(s=Number(s)||void 0),C(t,"isTouched",!0);const re=s!==i.current[t];p&&l.current[t].isDirty!==re&&C(t,"isDirty",re);const Y=L();y.current!==Y&&(y.current=Y,d.publish("formState.isDirty",Y)),a.current[t]=s;const z=u.current.get(t);z&&z(s),d.publish(`values.${t}`,s,{shouldDirty:p,shouldOnChange:j}),j&&d.publish("onChange",t,s,a.current)},[C]),A=r.useCallback((t,s)=>(u.current.set(t,s),()=>{f&&u.current.delete(t)}),[]),U=r.useCallback((t,{keepError:s,keepDirty:p,keepTouched:j,keepCustomState:re,defaultValue:Y})=>{const z=u.current.get(t);if(!z)throw new Error(`Cannot reset "${t}" because it's uncontrolled field`);i.current[t]=Y,a.current[t]=Y,z&&z(Y),s||c(t),p||C(t,"isDirty",!1),j||C(t,"isTouched",!1),re||C(t,"customState",null)},[c,C]),J=r.useCallback((t,s=S.getValues(t))=>{d.publish("onBlur",t,s,S.getValues())},[]),S=r.useMemo(()=>({subscribe:$,reset:B,resetField:U,setValue:O,getValues:Q,getErrors:x,getFieldStates:M,getFormState:V,setError:e,clearError:c,clearErrors:R,checkValidity:T,getNumberFields:ae,getFieldValidity:ne,getDefaultValues:oe,setFieldState:C,triggerFieldBlur:J,resetFieldState:ee,getControlledFields:Z}),[$,B,U,O,Q,x,M,V,e,c,R,T,ae,ne,oe,C,ee,J,Z]),N=r.useMemo(()=>({ref:E,watch:D,actions:S,registerController:A,registerHookWatcher:K,lastReloadedAt:b,loadFormValues:W,getWatchValue:q,channels:d}),[E,D,S,A,K,b,W,q,d]),te=r.useMemo(()=>({control:N,actions:S,watch:D}),[b,N,S,D]);return r.useLayoutEffect(()=>{if([...E.current.querySelectorAll("[name]")].forEach(s=>{!s.defaultValue&&i.current[s.name]&&(s.defaultValue=i.current[s.name]),s.type==="number"&&!F.current.includes(s.name)&&F.current.push(s.name)}),E.current){const s=W();a.current={...s},i.current={...s}}},[b]),r.useLayoutEffect(()=>{_()},[]),te};w.Controller=Se,w.Form=ke,w.useController=me,w.useForm=Oe,w.useFormContext=ce,w.useWatch=be,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-formkit",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "keywords": [
     "react formkit",
     "react ez formkit",
@@ -36,7 +36,7 @@
     "dayjs": "^1.11.13",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-simple-formkit": "^2.0.4",
+    "react-simple-formkit": "^2.1.4",
     "vite": "^6.0.7"
   },
   "peerDependencies": {