react-simple-formkit 1.0.1 → 1.0.3

package/README.md

@@ -1,24 +1,287 @@
-# React EZ Form
+# React Simple FormKit
 
 Support form handling simply. Simple, fast and productive.
 
+# Peer dependencies
+
+```
+"peerDependencies": {
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+},
+```
+
 # Quick start
 
 ```
-import { Form, useForm } form 'react-ez-form'
+import { Form, useForm } form 'react-simple-formkit'
 
 const form = useForm();
-const { isDirty } = form;
+const { isDirty, actions } = form;
 
 const handleSubmit = (data) => {
-    console.log(data);
+    alert(JSON.stringify(data));
 };
 
 return (
     <Form form={form} onSubmit={handleSubmit}>
         <input required name="email" />
         <input required name="password" type="password" />
-        <button type="submit" disabled={!isDirty}>Submit</button>
+        <button type="button" disabled={!isDirty} onClick={() => actions.reset()}>
+            Reset
+        </button>
+        <button type="submit" disabled={!isDirty}>
+            Submit
+        </button>
+    </Form>
+);
+```
+
+# More kits
+
+## number fields
+
+- By default form, values are string at all. So, adding numberFields will catch the number value in on submit
+
+```
+const form = useForm( {numberFields: ['number'] } );
+
+return (
+    <Form form={form}>
+      <input name="number" placeholder=This is number field" />
+      <button type="submit" disabled={!isDirty || isError}>
+        Submit
+      </button>
+    </Form>
+);
+```
+
+## JS Built-in validate on blur
+
+```
+const form = useForm();
+const { isDirty, isError, errors, actions } = form;
+
+return (
+    <Form form={form}>
+      <input required name="email" placeholder="email" type="email" onBlur={actions.checkValidity} />
+      {errors.email && <span>{errors.email}</span>}
+
+      <button type="submit" disabled={!isDirty || isError}>
+        Submit
+      </button>
+    </Form>
+);
+```
+
+## Double validate on blur
+
+```
+const form = useForm();
+const { isDirty, isError, errors, actions } = form;
+
+return (
+    <Form form={form}>
+      <input
+        required
+        name="number"
+        onBlur={(e) => {
+          let error = null;
+          error = actions.getFieldValidity(e);
+
+          if (error) {
+            actions.changeError("number", error);
+            return;
+          }
+
+          const value = Number(e.target.value || 0);
+          if (value >= 10) error = "Number must be less than 10";
+          actions.changeError("number", error);
+          }}
+      />
+      {errors.number && <span className="error-message">{errors.number}</span>}
+
+      <button type="submit" disabled={!isDirty || isError}>
+        Submit
+      </button>
     </Form>
 );
 ```
+
+## Validate by other field
+
+```
+  const form = useForm();
+  const { isDirty, isError, errors, actions } = form;
+
+  return (
+    <Form form={form}>
+      <input required name="number" onBlur={actions.checkValidity} />
+      {errors.number && <span className="error-message">{errors.number}</span>}
+
+      <input
+        required
+        name="number2"
+        onBlur={(e) => {
+          let error = null;
+          error = actions.getFieldValidity(e);
+
+          if (error) {
+            actions.changeError("number2", error);
+            return;
+          }
+
+          const value = Number(e.target.value || 0);
+          const formState = actions.getFormState();
+          const number = Number(formState.number || 0);
+
+          if (value >= number) error = "Number 2 must be less than number 1";
+          actions.changeError("number2", error);
+        }}
+      />
+      {errors.number2 && <span className="error-message">{errors.number2}</span>}
+      <button type="submit" disabled={!isDirty || isError}>
+        Submit
+      </button>
+    </Form>
+  )
+```
+
+## Centralized processing with onChange
+
+```
+  const handleChange = ({ formState, isDirty }) => {
+    console.log({ formState, isDirty });
+  };
+
+  return (
+    <Form form={form} onChange={handleChange}>
+      <input required name="email" />
+      <input required name="password" type="password" />
+      <button type="submit" disabled={!isDirty}>
+        Submit
+      </button>
+    </Form>
+  );
+```
+
+# Support for third party library
+
+## Catch value instantly
+
+- Some input types like DatePicker, Select just change by click and don't dispatch input actions
+- You also catch this on submit, but cannot use for actions.getFormState() for validate and isDirty update
+- Just put the actions.instantChange where these components onchange
+
+```
+  const form = useForm();
+  const { isDirty, actions } = form;
+
+  return (
+    <Form form={form}>
+      <Select name="select" onChange={actions.instantChange}>
+        <MenuItem value={10}>Ten</MenuItem>
+        <MenuItem value={20}>Twenty</MenuItem>
+        <MenuItem value={30}>Thirty</MenuItem>
+      </Select>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker name="date" onChange={actions.instantChange} />
+      </LocalizationProvider>
+      <button type="button" onClick={() => alert(JSON.stringify(actions.getFormState()))}>
+        Get value
+      </button>
+      <button type="submit" disabled={!isDirty}>
+        Submit
+      </button>
+    </Form>
+  )
+```
+
+## More control with Controller
+
+- Control custom values like object and array
+- Make field assignable by actions.setValue
+
+```
+  import { Controller, Form, useForm } from "react-simple-formkit";
+
+  const form = useForm({ numberFields: ["number1", "number2"] });
+  const { isDirty, actions } = form;
+
+  return (
+    <Form form={form}>
+      {/* Custom value as array */}
+      <Controller
+        name="multipleSelect"
+        defaultValue={[]}
+        render={({ ref, value, setValue, name }) => (
+          <Select
+            multiple
+            ref={ref}
+            name={name}
+            labelId="demo-multiple-name-label"
+            id="demo-multiple-name"
+            value={value}
+            onChange={(e) => {
+              const value = e.target.value;
+              // On autofill we get a stringified value.
+              setValue(typeof value === "string" ? value.split(",") : value);
+              // instantChange by select
+              actions.instantChange();
+            }}
+            input={<OutlinedInput label="Name" />}
+          >
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+          </Select>
+        )}
+      />
+      {/* actions.setValue (target field of actions.setValue must use controller)*/}
+      <input
+        name="number1"
+        placeholder="number 1"
+        onBlur={(e) => {
+          const number1 = Number(e.target.value || 0);
+          const number2 = actions.getFormState().number2 || 0;
+          actions.setValue("sum", number1 + number2);
+        }}
+      />
+      <input
+        name="number2"
+        placeholder="number 2"
+        onBlur={(e) => {
+          const number2 = Number(e.target.value || 0);
+          const number1 = actions.getFormState().number1 || 0;
+          actions.setValue("sum", number1 + number2);
+        }}
+      />
+      <Controller
+        name="sum"
+        render={({ ref, value, setValue, name }) => (
+          <input
+            ref={ref}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            name={name}
+            placeholder="sum(number1, number2)"
+          />
+        )}
+      />
+      <button type="button" onClick={() => alert(JSON.stringify(actions.getFormState()))}>
+        Get value
+      </button>
+      <button type="submit" disabled={!isDirty}>
+        Submit
+      </button>
+    </Form>
+  )
+```
+
+# Examples
+
+- https://codesandbox.io/p/sandbox/react-simple-formkit-examples-rhmhjj
+
+# Contact
+
+For any ideas or issues, please get in touch with me at anhhuy2000@gmail.com

package/dist/react-simple-formkit.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),te=(c,o)=>{let d=!1;return Object.keys(o).forEach(f=>{if(!(f in c)||d)return;const s=o[f],a=c[f];typeof s=="object"?te(a,s)&&(d=!0):s!==a&&(d=!0)}),d},ne=()=>{const[c,o]=n.useState({}),d=n.useMemo(()=>Object.values(c).filter(Boolean).length>0,[c]),f=n.useCallback((l,E)=>{o(p=>p[l]===E?p:{...p,[l]:E})},[]),s=n.useCallback(l=>{o(E=>({...E,...l}))},[]),a=n.useCallback(l=>{o(E=>E[l]?{...E,[l]:""}:E)},[]),b=n.useCallback(()=>{o({})},[]);return{isError:d,errors:c,changeError:f,changeErrors:s,clearError:a,clearErrors:b}},z={defaultValues:{},numberFields:[]},se=(c=z)=>{const{defaultValues:o=z.defaultValues,numberFields:d=z.numberFields}=c,{changeError:f,errors:s,changeErrors:a,clearError:b,clearErrors:l,isError:E}=ne(),[p,O]=n.useState(!1),_=n.useRef({}),k=n.useRef(o),C=n.useRef({}),g=n.useRef(),y=n.useCallback((t,{shouldDirty:v=!0}={})=>{if(Object.keys(t).forEach(i=>_.current[i]=t[i]),v){const i=te(_.current,k.current);i!==p&&O(i)}},[p]),F=n.useCallback(()=>{O(!1),l();const t=C.current;Object.values(t).forEach(i=>i("")),g.current.reset(),_.current=k.current},[l]),N=n.useCallback(t=>t?_.current[t]:_.current,[]),D=n.useCallback(()=>k.current,[]),j=n.useCallback(()=>setTimeout(()=>g.current.dispatchEvent(new Event("input",{bubbles:!0}))),[]),M=n.useCallback((t,v)=>{const i=C.current;return i[t]=v,()=>i[t]=null},[]),V=n.useCallback((t,v)=>{const i=C.current;if(typeof t=="string"){const h=i[t];if(!h)throw new Error(`${t} is uncontrolled, please use Controller for it!`);h(v),j()}typeof t=="object"&&(Object.entries(t).forEach(([h,Y])=>{const I=i[h];if(!I)throw new Error(`${h} is uncontrolled, please use Controller for it!`);I(Y)}),j())},[j]),P=n.useCallback(()=>{const t=Object.fromEntries(new FormData(g.current)),v=C.current;return Object.keys(v).map(i=>{t[i]=_.current[i]}),d.forEach(i=>t.hasOwnProperty(i)&&(t[i]=+t[i])),t},[]),L=n.useMemo(()=>({setValue:V,instantChange:j,getDefaultValues:D,getFormState:N,setFormState:y,changeError:f,changeErrors:a,clearError:b,clearErrors:l,loadFormValues:P,reset:F}),[V,j,D,N,y,f,a,b,P,F]);return n.useEffect(()=>{if(g.current){const t=P();k.current={...t,...o},_.current={...t,...o}}},[]),{ref:g,isDirty:p,isError:E,errors:s,numberFields:d,subscribe:M,actions:L}};var $={exports:{}},x={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),se=(o,a)=>{let b=!1;return Object.keys(a).forEach(i=>{if(!(i in o)||b)return;const c=a[i],s=o[i];(typeof c=="object"||c!==s)&&(b=!0)}),b},Q=o=>!o||typeof o.checkValidity!="function"||o.checkValidity()?null:o.validationMessage,ne=()=>{const[o,a]=n.useState({}),b=n.useMemo(()=>Object.values(o).filter(Boolean).length>0,[o]),i=n.useCallback((u,R)=>{a(m=>m[u]===R?m:{...m,[u]:R})},[]),c=n.useCallback(u=>{a(R=>({...R,...u}))},[]),s=n.useCallback(u=>{a(R=>R[u]?{...R,[u]:""}:R)},[]),E=n.useCallback(()=>{a({})},[]);return{isError:b,errors:o,changeError:i,changeErrors:c,clearError:s,clearErrors:E}},H={defaultValues:{},numberFields:[]},ce=(o=H)=>{const{defaultValues:a=H.defaultValues,numberFields:b=H.numberFields}=o,{changeError:i,errors:c,changeErrors:s,clearError:E,clearErrors:u,isError:R}=ne(),[m,T]=n.useState(!1),f=n.useRef({}),v=n.useRef(a),y=n.useRef({}),w=n.useRef(()=>{}),S=n.useRef(),Y=n.useCallback((t,{shouldDirty:_=!0}={})=>{let d=t;typeof t=="function"&&(d=t(f.current)),f.current=d;let g=m;_&&(g=se(f.current,v.current),g!==m&&T(g)),w.current({formState:f.current,isDirty:g})},[m]),I=n.useCallback(()=>{T(!1),u();const t=y.current;Object.values(t).forEach(d=>d("")),S.current.reset(),f.current=v.current},[u]),z=n.useCallback((t,_)=>{const d=y.current;return d[t]=_,()=>d[t]=null},[]),$=n.useCallback(t=>(w.current=t,()=>w.current=()=>{})),M=n.useCallback(t=>Q(t.target),[]),L=n.useCallback(t=>t?f.current[t]:f.current,[]),W=n.useCallback(()=>v.current,[]),j=n.useCallback(()=>{setTimeout(()=>S.current.dispatchEvent(new Event("input",{bubbles:!0})))},[]),P=n.useCallback(t=>{const _=Q(t.target);_?i(t.target.name,_):i(t.target.name,null)},[i]),U=n.useCallback((t,_,{shouldDirty:d=!0}={})=>{const g=y.current;if(typeof t=="string"){const O=g[t];if(!O)throw new Error(`${t} is uncontrolled, please use Controller for it!`);O(_,{shouldDirty:d}),j()}typeof t=="object"&&(Object.entries(t).forEach(([O,q])=>{const N=g[O];if(!N)throw new Error(`${O} is uncontrolled, please use Controller for it!`);N(q,{shouldDirty:d})}),j())},[j]),x=n.useCallback(()=>{const t=Object.fromEntries(new FormData(S.current)),_=y.current;return Object.keys(_).map(d=>{t[d]=f.current[d]}),b.forEach(d=>t.hasOwnProperty(d)&&(t[d]=+t[d])),t},[]),A=n.useMemo(()=>({setValue:U,instantChange:j,getDefaultValues:W,getFormState:L,setFormState:Y,changeError:i,changeErrors:s,clearError:E,clearErrors:u,loadFormValues:x,checkValidity:P,getFieldValidity:M,registerOnchange:$,reset:I}),[U,j,W,L,Y,i,s,E,x,M,P,$,I]);return n.useEffect(()=>{if(S.current){const t=x();v.current={...t,...a},f.current={...t,...a}}},[]),{ref:S,isDirty:m,isError:R,errors:c,numberFields:b,subscribe:z,actions:A}};var J={exports:{}},V={};/**
  * @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 Q;function ce(){if(Q)return x;Q=1;var c=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function d(f,s,a){var b=null;if(a!==void 0&&(b=""+a),s.key!==void 0&&(b=""+s.key),"key"in s){a={};for(var l in s)l!=="key"&&(a[l]=s[l])}else a=s;return s=a.ref,{$$typeof:c,type:f,key:b,ref:s!==void 0?s:null,props:a}}return x.Fragment=o,x.jsx=d,x.jsxs=d,x}var A={};/**
+ */var K;function ue(){if(K)return V;K=1;var o=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function b(i,c,s){var E=null;if(s!==void 0&&(E=""+s),c.key!==void 0&&(E=""+c.key),"key"in c){s={};for(var u in c)u!=="key"&&(s[u]=c[u])}else s=c;return c=s.ref,{$$typeof:o,type:i,key:E,ref:c!==void 0?c:null,props:s}}return V.Fragment=a,V.jsx=b,V.jsxs=b,V}var D={};/**
  * @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 K;function ue(){return K||(K=1,process.env.NODE_ENV!=="production"&&function(){function c(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===i?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case y:return"Fragment";case N:return"Profiler";case F:return"StrictMode";case V:return"Suspense";case P:return"SuspenseList";case v: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 g:return"Portal";case j:return(e.displayName||"Context")+".Provider";case D:return(e._context.displayName||"Context")+".Consumer";case M:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case L:return r=e.displayName||null,r!==null?r:c(e.type)||"Memo";case t:r=e._payload,e=e._init;try{return c(e(r))}catch{}}return null}function o(e){return""+e}function d(e){try{o(e);var r=!1}catch{r=!0}if(r){r=console;var u=r.error,m=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",m),o(e)}}function f(e){if(e===y)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===t)return"<...>";try{var r=c(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function s(){var e=h.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function b(e){if(Y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function l(e,r){function u(){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)",r))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function E(){var e=c(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 p(e,r,u,m,S,T,U,q){return u=T.ref,e={$$typeof:C,type:e,key:r,props:T,_owner:S},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):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:q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function O(e,r,u,m,S,T,U,q){var R=r.children;if(R!==void 0)if(m)if(I(R)){for(m=0;m<R.length;m++)_(R[m]);Object.freeze&&Object.freeze(R)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else _(R);if(Y.call(r,"key")){R=c(e);var w=Object.keys(r).filter(function(ae){return ae!=="key"});m=0<w.length?"{key: someKey, "+w.join(": ..., ")+": ...}":"{key: someKey}",Z[R+m]||(w=0<w.length?"{"+w.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var ee;function le(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===x?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case I:return"Profiler";case Y:return"StrictMode";case L:return"Suspense";case W:return"SuspenseList";case U: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 w:return"Portal";case $:return(e.displayName||"Context")+".Provider";case z:return(e._context.displayName||"Context")+".Consumer";case M:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case j:return r=e.displayName||null,r!==null?r:o(e.type)||"Memo";case P:r=e._payload,e=e._init;try{return o(e(r))}catch{}}return null}function a(e){return""+e}function b(e){try{a(e);var r=!1}catch{r=!0}if(r){r=console;var l=r.error,k=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",k),a(e)}}function i(e){if(e===S)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===P)return"<...>";try{var r=o(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=A.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function E(e){if(t.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function u(e,r){function l(){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)",r))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function R(){var e=o(this.type);return O[e]||(O[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 m(e,r,l,k,C,h,G,X){return l=h.ref,e={$$typeof:y,type:e,key:r,props:h,_owner:C},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):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:G}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,l,k,C,h,G,X){var p=r.children;if(p!==void 0)if(k)if(_(p)){for(k=0;k<p.length;k++)f(p[k]);Object.freeze&&Object.freeze(p)}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 f(p);if(t.call(r,"key")){p=o(e);var F=Object.keys(r).filter(function(oe){return oe!=="key"});k=0<F.length?"{key: someKey, "+F.join(": ..., ")+": ...}":"{key: someKey}",Z[p+k]||(F=0<F.length?"{"+F.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} />`,m,R,w,R),Z[R+m]=!0)}if(R=null,u!==void 0&&(d(u),R=""+u),b(r)&&(d(r.key),R=""+r.key),"key"in r){u={};for(var J in r)J!=="key"&&(u[J]=r[J])}else u=r;return R&&l(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),p(e,R,T,S,s(),u,U,q)}function _(e){typeof e=="object"&&e!==null&&e.$$typeof===C&&e._store&&(e._store.validated=1)}var k=n,C=Symbol.for("react.transitional.element"),g=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),F=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),D=Symbol.for("react.consumer"),j=Symbol.for("react.context"),M=Symbol.for("react.forward_ref"),V=Symbol.for("react.suspense"),P=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),t=Symbol.for("react.lazy"),v=Symbol.for("react.activity"),i=Symbol.for("react.client.reference"),h=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,I=Array.isArray,W=console.createTask?console.createTask:function(){return null};k={"react-stack-bottom-frame":function(e){return e()}};var G,X={},B=k["react-stack-bottom-frame"].bind(k,a)(),H=W(f(a)),Z={};A.Fragment=y,A.jsx=function(e,r,u,m,S){var T=1e4>h.recentlyCreatedOwnerStacks++;return O(e,r,u,!1,m,S,T?Error("react-stack-top-frame"):B,T?W(f(e)):H)},A.jsxs=function(e,r,u,m,S){var T=1e4>h.recentlyCreatedOwnerStacks++;return O(e,r,u,!0,m,S,T?Error("react-stack-top-frame"):B,T?W(f(e)):H)}}()),A}var ee;function le(){return ee||(ee=1,process.env.NODE_ENV==="production"?$.exports=ce():$.exports=ue()),$.exports}var re=le();const oe=n.createContext({}),ie=()=>n.useContext(oe),fe=({id:c,form:o,method:d,action:f,children:s,onSubmit:a=()=>{},onInput:b=()=>{},onChange:l=()=>{},numberFields:E=[],className:p,...O})=>re.jsx(oe.Provider,{value:o,children:re.jsx("form",{ref:o==null?void 0:o.ref,action:f,className:p,onSubmit:_=>{_.preventDefault();const k=o.actions.loadFormValues();a(k)},onChange:_=>{const k=o.actions.loadFormValues();o.actions.setFormState(k),l(k)},...O,children:s})}),de=({name:c,defaultValue:o,render:d=({ref:f,name:s,defaultValue:a,value:b,setValue:l})=>null})=>{const[f,s]=n.useState(),a=ie(),b=n.useRef(),l=n.useCallback(E=>{a.actions.setFormState({[c]:E},{shouldDirty:!1}),s(E)},[s,a.actions.setFormState]);return n.useEffect(()=>(a.actions.setFormState({[c]:o},{shouldDirty:!1}),a.subscribe(c,p=>{s(p),a.actions.setFormState({[c]:p},{shouldDirty:!0}),b.current&&typeof b.current.dispatchEvent=="function"&&b.current.dispatchEvent(new Event("change"))})),[]),d({ref:b,name:c,defaultValue:o,value:f,setValue:l})};exports.Controller=de;exports.Form=fe;exports.useForm=se;exports.useValidateForm=ne;
+  <%s key={someKey} {...props} />`,k,p,F,p),Z[p+k]=!0)}if(p=null,l!==void 0&&(b(l),p=""+l),E(r)&&(b(r.key),p=""+r.key),"key"in r){l={};for(var B in r)B!=="key"&&(l[B]=r[B])}else l=r;return p&&u(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),m(e,p,h,C,c(),l,G,X)}function f(e){typeof e=="object"&&e!==null&&e.$$typeof===y&&e._store&&(e._store.validated=1)}var v=n,y=Symbol.for("react.transitional.element"),w=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),Y=Symbol.for("react.strict_mode"),I=Symbol.for("react.profiler"),z=Symbol.for("react.consumer"),$=Symbol.for("react.context"),M=Symbol.for("react.forward_ref"),L=Symbol.for("react.suspense"),W=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),U=Symbol.for("react.activity"),x=Symbol.for("react.client.reference"),A=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,t=Object.prototype.hasOwnProperty,_=Array.isArray,d=console.createTask?console.createTask:function(){return null};v={"react-stack-bottom-frame":function(e){return e()}};var g,O={},q=v["react-stack-bottom-frame"].bind(v,s)(),N=d(i(s)),Z={};D.Fragment=S,D.jsx=function(e,r,l,k,C){var h=1e4>A.recentlyCreatedOwnerStacks++;return T(e,r,l,!1,k,C,h?Error("react-stack-top-frame"):q,h?d(i(e)):N)},D.jsxs=function(e,r,l,k,C){var h=1e4>A.recentlyCreatedOwnerStacks++;return T(e,r,l,!0,k,C,h?Error("react-stack-top-frame"):q,h?d(i(e)):N)}}()),D}var re;function ie(){return re||(re=1,process.env.NODE_ENV==="production"?J.exports=ue():J.exports=le()),J.exports}var te=ie();const ae=n.createContext({}),fe=()=>n.useContext(ae),de=({id:o,form:a,method:b,action:i,children:c,onSubmit:s=()=>{},onInput:E=()=>{},onChange:u=()=>{},numberFields:R=[],className:m,...T})=>(n.useEffect(()=>a.actions.registerOnchange(u),[u]),te.jsx(ae.Provider,{value:a,children:te.jsx("form",{ref:a==null?void 0:a.ref,action:i,className:m,onSubmit:f=>{b||f.preventDefault();const v=a.actions.loadFormValues();s(v)},onInput:f=>{if(f.target.tagName==="FORM"){const v=a.actions.loadFormValues();a.actions.setFormState(v)}else E(f)},onChange:()=>{const f=a.actions.loadFormValues();a.actions.setFormState(f)},...T,children:c})})),be=({name:o,defaultValue:a,render:b=({ref:i,name:c,defaultValue:s,value:E,setValue:u})=>null})=>{const[i,c]=n.useState(a),s=fe(),E=n.useRef(),u=n.useCallback((R,{shouldDirty:m=!1}={})=>{s.actions.setFormState(T=>({...T,[o]:R}),{shouldDirty:m}),c(R)},[c,s.actions.setFormState]);return n.useEffect(()=>(s.actions.setFormState(m=>({...m,[o]:a}),{shouldDirty:!1}),s.subscribe(o,(m,{shouldDirty:T=!0})=>{c(m),s.actions.setFormState(f=>({...f,[o]:m}),{shouldDirty:T}),E.current&&typeof E.current.dispatchEvent=="function"&&E.current.dispatchEvent(new Event("change"))})),[]),b({ref:E,name:o,defaultValue:a,value:i,setValue:u})};exports.Controller=be;exports.Form=de;exports.useForm=ce;exports.useValidateForm=ne;

package/dist/react-simple-formkit.mjs

@@ -1,101 +1,114 @@
-import le, { useState as X, useMemo as oe, useCallback as v, useRef as C, useEffect as se, createContext as ie, useContext as fe } from "react";
-const ae = (a, n) => {
-  let f = !1;
-  return Object.keys(n).forEach((i) => {
-    if (!(i in a) || f) return;
-    const s = n[i], o = a[i];
-    typeof s == "object" ? ae(o, s) && (f = !0) : s !== o && (f = !0);
-  }), f;
-}, de = () => {
-  const [a, n] = X({}), f = oe(() => Object.values(a).filter(Boolean).length > 0, [a]), i = v((u, E) => {
-    n((R) => R[u] === E ? R : { ...R, [u]: E });
-  }, []), s = v((u) => {
-    n((E) => ({ ...E, ...u }));
-  }, []), o = v((u) => {
-    n((E) => E[u] ? { ...E, [u]: "" } : E);
-  }, []), d = v(() => {
+import le, { useState as Q, useMemo as se, useCallback as _, useRef as A, useEffect as K, createContext as ie, useContext as fe } from "react";
+const de = (o, n) => {
+  let d = !1;
+  return Object.keys(n).forEach((l) => {
+    if (!(l in o) || d) return;
+    const s = n[l], a = o[l];
+    (typeof s == "object" || s !== a) && (d = !0);
+  }), d;
+}, re = (o) => !o || typeof o.checkValidity != "function" || o.checkValidity() ? null : o.validationMessage, Ee = () => {
+  const [o, n] = Q({}), d = se(() => Object.values(o).filter(Boolean).length > 0, [o]), l = _((c, b) => {
+    n((E) => E[c] === b ? E : { ...E, [c]: b });
+  }, []), s = _((c) => {
+    n((b) => ({ ...b, ...c }));
+  }, []), a = _((c) => {
+    n((b) => b[c] ? { ...b, [c]: "" } : b);
+  }, []), m = _(() => {
     n({});
   }, []);
-  return { isError: f, errors: a, changeError: i, changeErrors: s, clearError: o, clearErrors: d };
-}, G = {
+  return { isError: d, errors: o, changeError: l, changeErrors: s, clearError: a, clearErrors: m };
+}, Z = {
   defaultValues: {},
   numberFields: []
-}, _e = (a = G) => {
-  const { defaultValues: n = G.defaultValues, numberFields: f = G.numberFields } = a, { changeError: i, errors: s, changeErrors: o, clearError: d, clearErrors: u, isError: E } = de(), [R, O] = X(!1), _ = C({}), p = C(n), j = C({}), g = C(), y = v(
+}, ve = (o = Z) => {
+  const { defaultValues: n = Z.defaultValues, numberFields: d = Z.numberFields } = o, { changeError: l, errors: s, changeErrors: a, clearError: m, clearErrors: c, isError: b } = Ee(), [E, g] = Q(!1), i = A({}), v = A(n), j = A({}), F = A(() => {
+  }), O = A(), I = _(
     (t, { shouldDirty: T = !0 } = {}) => {
-      if (Object.keys(t).forEach((l) => _.current[l] = t[l]), T) {
-        const l = ae(_.current, p.current);
-        l !== R && O(l);
-      }
+      let f = t;
+      typeof t == "function" && (f = t(i.current)), i.current = f;
+      let h = E;
+      T && (h = de(i.current, v.current), h !== E && g(h)), F.current({ formState: i.current, isDirty: h });
     },
-    [R]
-  ), N = v(() => {
-    O(!1), u();
+    [E]
+  ), $ = _(() => {
+    g(!1), c();
     const t = j.current;
-    Object.values(t).forEach((l) => l("")), g.current.reset(), _.current = p.current;
-  }, [u]), D = v((t) => t ? _.current[t] : _.current, []), Y = v(() => p.current, []), w = v(
-    () => setTimeout(() => g.current.dispatchEvent(new Event("input", { bubbles: !0 }))),
-    []
-  ), M = v((t, T) => {
-    const l = j.current;
-    return l[t] = T, () => l[t] = null;
-  }, []), V = v(
-    (t, T) => {
-      const l = j.current;
+    Object.values(t).forEach((f) => f("")), O.current.reset(), i.current = v.current;
+  }, [c]), G = _((t, T) => {
+    const f = j.current;
+    return f[t] = T, () => f[t] = null;
+  }, []), M = _((t) => (F.current = t, () => F.current = () => {
+  })), L = _((t) => re(t.target), []), W = _((t) => t ? i.current[t] : i.current, []), U = _(() => v.current, []), w = _(() => {
+    setTimeout(() => O.current.dispatchEvent(new Event("input", { bubbles: !0 })));
+  }, []), P = _(
+    (t) => {
+      const T = re(t.target);
+      T ? l(t.target.name, T) : l(t.target.name, null);
+    },
+    [l]
+  ), q = _(
+    (t, T, { shouldDirty: f = !0 } = {}) => {
+      const h = j.current;
       if (typeof t == "string") {
-        const k = l[t];
-        if (!k)
+        const S = h[t];
+        if (!S)
           throw new Error(`${t} is uncontrolled, please use Controller for it!`);
-        k(T), w();
+        S(T, { shouldDirty: f }), w();
       }
-      typeof t == "object" && (Object.entries(t).forEach(([k, I]) => {
-        const $ = l[k];
-        if (!$)
-          throw new Error(`${k} is uncontrolled, please use Controller for it!`);
-        $(I);
+      typeof t == "object" && (Object.entries(t).forEach(([S, J]) => {
+        const V = h[S];
+        if (!V)
+          throw new Error(`${S} is uncontrolled, please use Controller for it!`);
+        V(J, { shouldDirty: f });
       }), w());
     },
     [w]
-  ), A = v(() => {
-    const t = Object.fromEntries(new FormData(g.current)), T = j.current;
-    return Object.keys(T).map((l) => {
-      t[l] = _.current[l];
-    }), f.forEach((l) => t.hasOwnProperty(l) && (t[l] = +t[l])), t;
-  }, []), W = oe(
+  ), C = _(() => {
+    const t = Object.fromEntries(new FormData(O.current)), T = j.current;
+    return Object.keys(T).map((f) => {
+      t[f] = i.current[f];
+    }), d.forEach((f) => t.hasOwnProperty(f) && (t[f] = +t[f])), t;
+  }, []), N = se(
     () => ({
-      setValue: V,
+      setValue: q,
       instantChange: w,
-      getDefaultValues: Y,
-      getFormState: D,
-      setFormState: y,
-      changeError: i,
-      changeErrors: o,
-      clearError: d,
-      clearErrors: u,
-      loadFormValues: A,
-      reset: N
+      getDefaultValues: U,
+      getFormState: W,
+      setFormState: I,
+      changeError: l,
+      changeErrors: a,
+      clearError: m,
+      clearErrors: c,
+      loadFormValues: C,
+      checkValidity: P,
+      getFieldValidity: L,
+      registerOnchange: M,
+      reset: $
     }),
     [
-      V,
+      q,
       w,
-      Y,
-      D,
-      y,
-      i,
-      o,
-      d,
-      A,
-      N
+      U,
+      W,
+      I,
+      l,
+      a,
+      m,
+      C,
+      L,
+      P,
+      M,
+      $
     ]
   );
-  return se(() => {
-    if (g.current) {
-      const t = A();
-      p.current = { ...t, ...n }, _.current = { ...t, ...n };
+  return K(() => {
+    if (O.current) {
+      const t = C();
+      v.current = { ...t, ...n }, i.current = { ...t, ...n };
     }
-  }, []), { ref: g, isDirty: R, isError: E, errors: s, numberFields: f, subscribe: M, actions: W };
+  }, []), { ref: O, isDirty: E, isError: b, errors: s, numberFields: d, subscribe: G, actions: N };
 };
-var L = { exports: {} }, P = {};
+var z = { exports: {} }, D = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -105,29 +118,29 @@ var L = { exports: {} }, P = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var ee;
-function Ee() {
-  if (ee) return P;
-  ee = 1;
-  var a = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-  function f(i, s, o) {
-    var d = null;
-    if (o !== void 0 && (d = "" + o), s.key !== void 0 && (d = "" + s.key), "key" in s) {
-      o = {};
-      for (var u in s)
-        u !== "key" && (o[u] = s[u]);
-    } else o = s;
-    return s = o.ref, {
-      $$typeof: a,
-      type: i,
-      key: d,
+var te;
+function me() {
+  if (te) return D;
+  te = 1;
+  var o = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+  function d(l, s, a) {
+    var m = null;
+    if (a !== void 0 && (m = "" + a), s.key !== void 0 && (m = "" + s.key), "key" in s) {
+      a = {};
+      for (var c in s)
+        c !== "key" && (a[c] = s[c]);
+    } else a = s;
+    return s = a.ref, {
+      $$typeof: o,
+      type: l,
+      key: m,
       ref: s !== void 0 ? s : null,
-      props: o
+      props: a
     };
   }
-  return P.Fragment = n, P.jsx = f, P.jsxs = f, P;
+  return D.Fragment = n, D.jsx = d, D.jsxs = d, D;
 }
-var F = {};
+var Y = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -137,47 +150,47 @@ var F = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var re;
-function me() {
-  return re || (re = 1, process.env.NODE_ENV !== "production" && function() {
-    function a(e) {
+var ne;
+function be() {
+  return ne || (ne = 1, process.env.NODE_ENV !== "production" && function() {
+    function o(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === l ? null : e.displayName || e.name || null;
+        return e.$$typeof === C ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case y:
+        case O:
           return "Fragment";
-        case D:
+        case $:
           return "Profiler";
-        case N:
+        case I:
           return "StrictMode";
-        case V:
+        case W:
           return "Suspense";
-        case A:
+        case U:
           return "SuspenseList";
-        case T:
+        case q:
           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 g:
+          case F:
             return "Portal";
-          case w:
+          case M:
             return (e.displayName || "Context") + ".Provider";
-          case Y:
+          case G:
             return (e._context.displayName || "Context") + ".Consumer";
-          case M:
+          case L:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case W:
-            return r = e.displayName || null, r !== null ? r : a(e.type) || "Memo";
-          case t:
+          case w:
+            return r = e.displayName || null, r !== null ? r : o(e.type) || "Memo";
+          case P:
             r = e._payload, e = e._init;
             try {
-              return a(e(r));
+              return o(e(r));
             } catch {
             }
         }
@@ -186,7 +199,7 @@ function me() {
     function n(e) {
       return "" + e;
     }
-    function f(e) {
+    function d(e) {
       try {
         n(e);
         var r = !1;
@@ -195,67 +208,67 @@ function me() {
       }
       if (r) {
         r = console;
-        var c = r.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return c.call(
+        var u = r.error, R = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          m
+          R
         ), n(e);
       }
     }
-    function i(e) {
-      if (e === y) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === t)
+    function l(e) {
+      if (e === O) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === P)
         return "<...>";
       try {
-        var r = a(e);
+        var r = o(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function s() {
-      var e = k.A;
+      var e = N.A;
       return e === null ? null : e.getOwner();
     }
-    function o() {
+    function a() {
       return Error("react-stack-top-frame");
     }
-    function d(e) {
-      if (I.call(e, "key")) {
+    function m(e) {
+      if (t.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function u(e, r) {
-      function c() {
-        B || (B = !0, console.error(
+    function c(e, r) {
+      function u() {
+        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)",
           r
         ));
       }
-      c.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: c,
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
         configurable: !0
       });
     }
-    function E() {
-      var e = a(this.type);
-      return H[e] || (H[e] = !0, console.error(
+    function b() {
+      var e = o(this.type);
+      return S[e] || (S[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 R(e, r, c, m, S, h, q, J) {
-      return c = h.ref, e = {
+    function E(e, r, u, R, y, k, X, B) {
+      return u = k.ref, e = {
         $$typeof: j,
         type: e,
         key: r,
-        props: h,
-        _owner: S
-      }, (c !== void 0 ? c : null) !== null ? Object.defineProperty(e, "ref", {
+        props: k,
+        _owner: y
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: E
+        get: b
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -270,158 +283,165 @@ function me() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: q
+        value: X
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: J
+        value: B
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function O(e, r, c, m, S, h, q, J) {
-      var b = r.children;
-      if (b !== void 0)
-        if (m)
-          if ($(b)) {
-            for (m = 0; m < b.length; m++)
-              _(b[m]);
-            Object.freeze && Object.freeze(b);
+    function g(e, r, u, R, y, k, X, B) {
+      var p = r.children;
+      if (p !== void 0)
+        if (R)
+          if (T(p)) {
+            for (R = 0; R < p.length; R++)
+              i(p[R]);
+            Object.freeze && Object.freeze(p);
           } 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 _(b);
-      if (I.call(r, "key")) {
-        b = a(e);
+        else i(p);
+      if (t.call(r, "key")) {
+        p = o(e);
         var x = Object.keys(r).filter(function(ue) {
           return ue !== "key";
         });
-        m = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", K[b + m] || (x = 0 < x.length ? "{" + x.join(": ..., ") + ": ...}" : "{}", console.error(
+        R = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", ee[p + R] || (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} />`,
-          m,
-          b,
+          R,
+          p,
           x,
-          b
-        ), K[b + m] = !0);
+          p
+        ), ee[p + R] = !0);
       }
-      if (b = null, c !== void 0 && (f(c), b = "" + c), d(r) && (f(r.key), b = "" + r.key), "key" in r) {
-        c = {};
-        for (var z in r)
-          z !== "key" && (c[z] = r[z]);
-      } else c = r;
-      return b && u(
-        c,
+      if (p = null, u !== void 0 && (d(u), p = "" + u), m(r) && (d(r.key), p = "" + r.key), "key" in r) {
+        u = {};
+        for (var H in r)
+          H !== "key" && (u[H] = r[H]);
+      } else u = r;
+      return p && c(
+        u,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), R(
+      ), E(
         e,
-        b,
-        h,
-        S,
+        p,
+        k,
+        y,
         s(),
-        c,
-        q,
-        J
+        u,
+        X,
+        B
       );
     }
-    function _(e) {
+    function i(e) {
       typeof e == "object" && e !== null && e.$$typeof === j && e._store && (e._store.validated = 1);
     }
-    var p = le, j = Symbol.for("react.transitional.element"), g = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), N = Symbol.for("react.strict_mode"), D = Symbol.for("react.profiler"), Y = Symbol.for("react.consumer"), w = Symbol.for("react.context"), M = Symbol.for("react.forward_ref"), V = Symbol.for("react.suspense"), A = Symbol.for("react.suspense_list"), W = Symbol.for("react.memo"), t = Symbol.for("react.lazy"), T = Symbol.for("react.activity"), l = Symbol.for("react.client.reference"), k = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, $ = Array.isArray, U = console.createTask ? console.createTask : function() {
+    var v = le, j = Symbol.for("react.transitional.element"), F = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), I = Symbol.for("react.strict_mode"), $ = Symbol.for("react.profiler"), G = Symbol.for("react.consumer"), M = Symbol.for("react.context"), L = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), U = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), C = Symbol.for("react.client.reference"), N = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, t = Object.prototype.hasOwnProperty, T = Array.isArray, f = console.createTask ? console.createTask : function() {
       return null;
     };
-    p = {
+    v = {
       "react-stack-bottom-frame": function(e) {
         return e();
       }
     };
-    var B, H = {}, Z = p["react-stack-bottom-frame"].bind(
-      p,
-      o
-    )(), Q = U(i(o)), K = {};
-    F.Fragment = y, F.jsx = function(e, r, c, m, S) {
-      var h = 1e4 > k.recentlyCreatedOwnerStacks++;
-      return O(
+    var h, S = {}, J = v["react-stack-bottom-frame"].bind(
+      v,
+      a
+    )(), V = f(l(a)), ee = {};
+    Y.Fragment = O, Y.jsx = function(e, r, u, R, y) {
+      var k = 1e4 > N.recentlyCreatedOwnerStacks++;
+      return g(
         e,
         r,
-        c,
+        u,
         !1,
-        m,
-        S,
-        h ? Error("react-stack-top-frame") : Z,
-        h ? U(i(e)) : Q
+        R,
+        y,
+        k ? Error("react-stack-top-frame") : J,
+        k ? f(l(e)) : V
       );
-    }, F.jsxs = function(e, r, c, m, S) {
-      var h = 1e4 > k.recentlyCreatedOwnerStacks++;
-      return O(
+    }, Y.jsxs = function(e, r, u, R, y) {
+      var k = 1e4 > N.recentlyCreatedOwnerStacks++;
+      return g(
         e,
         r,
-        c,
+        u,
         !0,
-        m,
-        S,
-        h ? Error("react-stack-top-frame") : Z,
-        h ? U(i(e)) : Q
+        R,
+        y,
+        k ? Error("react-stack-top-frame") : J,
+        k ? f(l(e)) : V
       );
     };
-  }()), F;
+  }()), Y;
 }
-var te;
-function be() {
-  return te || (te = 1, process.env.NODE_ENV === "production" ? L.exports = Ee() : L.exports = me()), L.exports;
+var oe;
+function Re() {
+  return oe || (oe = 1, process.env.NODE_ENV === "production" ? z.exports = me() : z.exports = be()), z.exports;
 }
-var ne = be();
-const ce = ie({}), Re = () => fe(ce), ve = ({
-  id: a,
+var ae = Re();
+const ce = ie({}), pe = () => fe(ce), Te = ({
+  id: o,
   form: n,
-  method: f,
-  action: i,
+  method: d,
+  action: l,
   children: s,
-  onSubmit: o = () => {
+  onSubmit: a = () => {
   },
-  onInput: d = () => {
+  onInput: m = () => {
   },
-  onChange: u = () => {
+  onChange: c = () => {
   },
-  numberFields: E = [],
-  className: R,
-  ...O
-}) => /* @__PURE__ */ ne.jsx(ce.Provider, { value: n, children: /* @__PURE__ */ ne.jsx(
+  numberFields: b = [],
+  className: E,
+  ...g
+}) => (K(() => n.actions.registerOnchange(c), [c]), /* @__PURE__ */ ae.jsx(ce.Provider, { value: n, children: /* @__PURE__ */ ae.jsx(
   "form",
   {
     ref: n == null ? void 0 : n.ref,
-    action: i,
-    className: R,
-    onSubmit: (_) => {
-      _.preventDefault();
-      const p = n.actions.loadFormValues();
-      o(p);
+    action: l,
+    className: E,
+    onSubmit: (i) => {
+      d || i.preventDefault();
+      const v = n.actions.loadFormValues();
+      a(v);
+    },
+    onInput: (i) => {
+      if (i.target.tagName === "FORM") {
+        const v = n.actions.loadFormValues();
+        n.actions.setFormState(v);
+      } else
+        m(i);
     },
-    onChange: (_) => {
-      const p = n.actions.loadFormValues();
-      n.actions.setFormState(p), u(p);
+    onChange: () => {
+      const i = n.actions.loadFormValues();
+      n.actions.setFormState(i);
     },
-    ...O,
+    ...g,
     children: s
   }
-) }), Te = ({ name: a, defaultValue: n, render: f = ({ ref: i, name: s, defaultValue: o, value: d, setValue: u }) => null }) => {
-  const [i, s] = X(), o = Re(), d = C(), u = v(
-    (E) => {
-      o.actions.setFormState({ [a]: E }, { shouldDirty: !1 }), s(E);
+) })), ge = ({ name: o, defaultValue: n, render: d = ({ ref: l, name: s, defaultValue: a, value: m, setValue: c }) => null }) => {
+  const [l, s] = Q(n), a = pe(), m = A(), c = _(
+    (b, { shouldDirty: E = !1 } = {}) => {
+      a.actions.setFormState((g) => ({ ...g, [o]: b }), { shouldDirty: E }), s(b);
     },
-    [s, o.actions.setFormState]
+    [s, a.actions.setFormState]
   );
-  return se(() => (o.actions.setFormState({ [a]: n }, { shouldDirty: !1 }), o.subscribe(a, (R) => {
-    s(R), o.actions.setFormState({ [a]: R }, { shouldDirty: !0 }), d.current && typeof d.current.dispatchEvent == "function" && d.current.dispatchEvent(new Event("change"));
-  })), []), f({ ref: d, name: a, defaultValue: n, value: i, setValue: u });
+  return K(() => (a.actions.setFormState((E) => ({ ...E, [o]: n }), { shouldDirty: !1 }), a.subscribe(o, (E, { shouldDirty: g = !0 }) => {
+    s(E), a.actions.setFormState((i) => ({ ...i, [o]: E }), { shouldDirty: g }), m.current && typeof m.current.dispatchEvent == "function" && m.current.dispatchEvent(new Event("change"));
+  })), []), d({ ref: m, name: o, defaultValue: n, value: l, setValue: c });
 };
 export {
-  Te as Controller,
-  ve as Form,
-  _e as useForm,
-  de as useValidateForm
+  ge as Controller,
+  Te as Form,
+  ve as useForm,
+  Ee as useValidateForm
 };

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

@@ -1,4 +1,4 @@
-(function(_,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],r):(_=typeof globalThis<"u"?globalThis:_||self,r(_.Name={},_.React))})(this,function(_,r){"use strict";const H=(c,o)=>{let d=!1;return Object.keys(o).forEach(f=>{if(!(f in c)||d)return;const s=o[f],a=c[f];typeof s=="object"?H(a,s)&&(d=!0):s!==a&&(d=!0)}),d},Z=()=>{const[c,o]=r.useState({}),d=r.useMemo(()=>Object.values(c).filter(Boolean).length>0,[c]),f=r.useCallback((l,m)=>{o(p=>p[l]===m?p:{...p,[l]:m})},[]),s=r.useCallback(l=>{o(m=>({...m,...l}))},[]),a=r.useCallback(l=>{o(m=>m[l]?{...m,[l]:""}:m)},[]),b=r.useCallback(()=>{o({})},[]);return{isError:d,errors:c,changeError:f,changeErrors:s,clearError:a,clearErrors:b}},W={defaultValues:{},numberFields:[]},se=(c=W)=>{const{defaultValues:o=W.defaultValues,numberFields:d=W.numberFields}=c,{changeError:f,errors:s,changeErrors:a,clearError:b,clearErrors:l,isError:m}=Z(),[p,j]=r.useState(!1),T=r.useRef({}),k=r.useRef(o),y=r.useRef({}),C=r.useRef(),w=r.useCallback((n,{shouldDirty:v=!0}={})=>{if(Object.keys(n).forEach(i=>T.current[i]=n[i]),v){const i=H(T.current,k.current);i!==p&&j(i)}},[p]),D=r.useCallback(()=>{j(!1),l();const n=y.current;Object.values(n).forEach(i=>i("")),C.current.reset(),T.current=k.current},[l]),V=r.useCallback(n=>n?T.current[n]:T.current,[]),Y=r.useCallback(()=>k.current,[]),g=r.useCallback(()=>setTimeout(()=>C.current.dispatchEvent(new Event("input",{bubbles:!0}))),[]),U=r.useCallback((n,v)=>{const i=y.current;return i[n]=v,()=>i[n]=null},[]),I=r.useCallback((n,v)=>{const i=y.current;if(typeof n=="string"){const S=i[n];if(!S)throw new Error(`${n} is uncontrolled, please use Controller for it!`);S(v),g()}typeof n=="object"&&(Object.entries(n).forEach(([S,M])=>{const L=i[S];if(!L)throw new Error(`${S} is uncontrolled, please use Controller for it!`);L(M)}),g())},[g]),x=r.useCallback(()=>{const n=Object.fromEntries(new FormData(C.current)),v=y.current;return Object.keys(v).map(i=>{n[i]=T.current[i]}),d.forEach(i=>n.hasOwnProperty(i)&&(n[i]=+n[i])),n},[]),J=r.useMemo(()=>({setValue:I,instantChange:g,getDefaultValues:Y,getFormState:V,setFormState:w,changeError:f,changeErrors:a,clearError:b,clearErrors:l,loadFormValues:x,reset:D}),[I,g,Y,V,w,f,a,b,x,D]);return r.useEffect(()=>{if(C.current){const n=x();k.current={...n,...o},T.current={...n,...o}}},[]),{ref:C,isDirty:p,isError:m,errors:s,numberFields:d,subscribe:U,actions:J}};var N={exports:{}},A={};/**
+(function(h,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],r):(h=typeof globalThis<"u"?globalThis:h||self,r(h.Name={},h.React))})(this,function(h,r){"use strict";const se=(o,a)=>{let b=!1;return Object.keys(a).forEach(i=>{if(!(i in o)||b)return;const c=a[i],s=o[i];(typeof c=="object"||c!==s)&&(b=!0)}),b},q=o=>!o||typeof o.checkValidity!="function"||o.checkValidity()?null:o.validationMessage,$=()=>{const[o,a]=r.useState({}),b=r.useMemo(()=>Object.values(o).filter(Boolean).length>0,[o]),i=r.useCallback((u,R)=>{a(m=>m[u]===R?m:{...m,[u]:R})},[]),c=r.useCallback(u=>{a(R=>({...R,...u}))},[]),s=r.useCallback(u=>{a(R=>R[u]?{...R,[u]:""}:R)},[]),E=r.useCallback(()=>{a({})},[]);return{isError:b,errors:o,changeError:i,changeErrors:c,clearError:s,clearErrors:E}},B={defaultValues:{},numberFields:[]},ce=(o=B)=>{const{defaultValues:a=B.defaultValues,numberFields:b=B.numberFields}=o,{changeError:i,errors:c,changeErrors:s,clearError:E,clearErrors:u,isError:R}=$(),[m,_]=r.useState(!1),f=r.useRef({}),v=r.useRef(a),j=r.useRef({}),x=r.useRef(()=>{}),O=r.useRef(),M=r.useCallback((n,{shouldDirty:T=!0}={})=>{let d=n;typeof n=="function"&&(d=n(f.current)),f.current=d;let g=m;T&&(g=se(f.current,v.current),g!==m&&_(g)),x.current({formState:f.current,isDirty:g})},[m]),L=r.useCallback(()=>{_(!1),u();const n=j.current;Object.values(n).forEach(d=>d("")),O.current.reset(),f.current=v.current},[u]),H=r.useCallback((n,T)=>{const d=j.current;return d[n]=T,()=>d[n]=null},[]),W=r.useCallback(n=>(x.current=n,()=>x.current=()=>{})),U=r.useCallback(n=>q(n.target),[]),J=r.useCallback(n=>n?f.current[n]:f.current,[]),z=r.useCallback(()=>v.current,[]),F=r.useCallback(()=>{setTimeout(()=>O.current.dispatchEvent(new Event("input",{bubbles:!0})))},[]),N=r.useCallback(n=>{const T=q(n.target);T?i(n.target.name,T):i(n.target.name,null)},[i]),G=r.useCallback((n,T,{shouldDirty:d=!0}={})=>{const g=j.current;if(typeof n=="string"){const y=g[n];if(!y)throw new Error(`${n} is uncontrolled, please use Controller for it!`);y(T,{shouldDirty:d}),F()}typeof n=="object"&&(Object.entries(n).forEach(([y,X])=>{const Y=g[y];if(!Y)throw new Error(`${y} is uncontrolled, please use Controller for it!`);Y(X,{shouldDirty:d})}),F())},[F]),V=r.useCallback(()=>{const n=Object.fromEntries(new FormData(O.current)),T=j.current;return Object.keys(T).map(d=>{n[d]=f.current[d]}),b.forEach(d=>n.hasOwnProperty(d)&&(n[d]=+n[d])),n},[]),D=r.useMemo(()=>({setValue:G,instantChange:F,getDefaultValues:z,getFormState:J,setFormState:M,changeError:i,changeErrors:s,clearError:E,clearErrors:u,loadFormValues:V,checkValidity:N,getFieldValidity:U,registerOnchange:W,reset:L}),[G,F,z,J,M,i,s,E,V,U,N,W,L]);return r.useEffect(()=>{if(O.current){const n=V();v.current={...n,...a},f.current={...n,...a}}},[]),{ref:O,isDirty:m,isError:R,errors:c,numberFields:b,subscribe:H,actions:D}};var I={exports:{}},P={};/**
  * @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 Q;function ce(){if(Q)return A;Q=1;var c=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function d(f,s,a){var b=null;if(a!==void 0&&(b=""+a),s.key!==void 0&&(b=""+s.key),"key"in s){a={};for(var l in s)l!=="key"&&(a[l]=s[l])}else a=s;return s=a.ref,{$$typeof:c,type:f,key:b,ref:s!==void 0?s:null,props:a}}return A.Fragment=o,A.jsx=d,A.jsxs=d,A}var F={};/**
+ */var ee;function ue(){if(ee)return P;ee=1;var o=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function b(i,c,s){var E=null;if(s!==void 0&&(E=""+s),c.key!==void 0&&(E=""+c.key),"key"in c){s={};for(var u in c)u!=="key"&&(s[u]=c[u])}else s=c;return c=s.ref,{$$typeof:o,type:i,key:E,ref:c!==void 0?c:null,props:s}}return P.Fragment=a,P.jsx=b,P.jsxs=b,P}var A={};/**
  * @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 K;function ue(){return K||(K=1,process.env.NODE_ENV!=="production"&&function(){function c(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===i?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case V:return"Profiler";case D:return"StrictMode";case I:return"Suspense";case x:return"SuspenseList";case v: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 C:return"Portal";case g:return(e.displayName||"Context")+".Provider";case Y:return(e._context.displayName||"Context")+".Consumer";case U:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case J:return t=e.displayName||null,t!==null?t:c(e.type)||"Memo";case n:t=e._payload,e=e._init;try{return c(e(t))}catch{}}return null}function o(e){return""+e}function d(e){try{o(e);var t=!1}catch{t=!0}if(t){t=console;var u=t.error,E=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",E),o(e)}}function f(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===n)return"<...>";try{var t=c(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function s(){var e=S.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function b(e){if(M.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function l(e,t){function u(){te||(te=!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)",t))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function m(){var e=c(this.type);return re[e]||(re[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 p(e,t,u,E,O,h,G,X){return u=h.ref,e={$$typeof:y,type:e,key:t,props:h,_owner:O},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:m}):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:G}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function j(e,t,u,E,O,h,G,X){var R=t.children;if(R!==void 0)if(E)if(L(R)){for(E=0;E<R.length;E++)T(R[E]);Object.freeze&&Object.freeze(R)}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 T(R);if(M.call(t,"key")){R=c(e);var P=Object.keys(t).filter(function(be){return be!=="key"});E=0<P.length?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}",ae[R+E]||(P=0<P.length?"{"+P.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var te;function le(){return te||(te=1,process.env.NODE_ENV!=="production"&&function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===V?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case O:return"Fragment";case L:return"Profiler";case M:return"StrictMode";case J:return"Suspense";case z:return"SuspenseList";case G: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 x:return"Portal";case W:return(e.displayName||"Context")+".Provider";case H:return(e._context.displayName||"Context")+".Consumer";case U:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case F:return t=e.displayName||null,t!==null?t:o(e.type)||"Memo";case N:t=e._payload,e=e._init;try{return o(e(t))}catch{}}return null}function a(e){return""+e}function b(e){try{a(e);var t=!1}catch{t=!0}if(t){t=console;var l=t.error,k=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",k),a(e)}}function i(e){if(e===O)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===N)return"<...>";try{var t=o(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function c(){var e=D.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function E(e){if(n.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function u(e,t){function l(){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)",t))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function R(){var e=o(this.type);return y[e]||(y[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 m(e,t,l,k,C,S,Z,Q){return l=S.ref,e={$$typeof:j,type:e,key:t,props:S,_owner:C},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):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:Z}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function _(e,t,l,k,C,S,Z,Q){var p=t.children;if(p!==void 0)if(k)if(T(p)){for(k=0;k<p.length;k++)f(p[k]);Object.freeze&&Object.freeze(p)}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 f(p);if(n.call(t,"key")){p=o(e);var w=Object.keys(t).filter(function(me){return me!=="key"});k=0<w.length?"{key: someKey, "+w.join(": ..., ")+": ...}":"{key: someKey}",oe[p+k]||(w=0<w.length?"{"+w.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} />`,E,R,P,R),ae[R+E]=!0)}if(R=null,u!==void 0&&(d(u),R=""+u),b(t)&&(d(t.key),R=""+t.key),"key"in t){u={};for(var B in t)B!=="key"&&(u[B]=t[B])}else u=t;return R&&l(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),p(e,R,h,O,s(),u,G,X)}function T(e){typeof e=="object"&&e!==null&&e.$$typeof===y&&e._store&&(e._store.validated=1)}var k=r,y=Symbol.for("react.transitional.element"),C=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),D=Symbol.for("react.strict_mode"),V=Symbol.for("react.profiler"),Y=Symbol.for("react.consumer"),g=Symbol.for("react.context"),U=Symbol.for("react.forward_ref"),I=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),J=Symbol.for("react.memo"),n=Symbol.for("react.lazy"),v=Symbol.for("react.activity"),i=Symbol.for("react.client.reference"),S=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,L=Array.isArray,z=console.createTask?console.createTask:function(){return null};k={"react-stack-bottom-frame":function(e){return e()}};var te,re={},ne=k["react-stack-bottom-frame"].bind(k,a)(),oe=z(f(a)),ae={};F.Fragment=w,F.jsx=function(e,t,u,E,O){var h=1e4>S.recentlyCreatedOwnerStacks++;return j(e,t,u,!1,E,O,h?Error("react-stack-top-frame"):ne,h?z(f(e)):oe)},F.jsxs=function(e,t,u,E,O){var h=1e4>S.recentlyCreatedOwnerStacks++;return j(e,t,u,!0,E,O,h?Error("react-stack-top-frame"):ne,h?z(f(e)):oe)}}()),F}var q;function le(){return q||(q=1,process.env.NODE_ENV==="production"?N.exports=ce():N.exports=ue()),N.exports}var $=le();const ee=r.createContext({}),ie=()=>r.useContext(ee),fe=({id:c,form:o,method:d,action:f,children:s,onSubmit:a=()=>{},onInput:b=()=>{},onChange:l=()=>{},numberFields:m=[],className:p,...j})=>$.jsx(ee.Provider,{value:o,children:$.jsx("form",{ref:o==null?void 0:o.ref,action:f,className:p,onSubmit:T=>{T.preventDefault();const k=o.actions.loadFormValues();a(k)},onChange:T=>{const k=o.actions.loadFormValues();o.actions.setFormState(k),l(k)},...j,children:s})}),de=({name:c,defaultValue:o,render:d=({ref:f,name:s,defaultValue:a,value:b,setValue:l})=>null})=>{const[f,s]=r.useState(),a=ie(),b=r.useRef(),l=r.useCallback(m=>{a.actions.setFormState({[c]:m},{shouldDirty:!1}),s(m)},[s,a.actions.setFormState]);return r.useEffect(()=>(a.actions.setFormState({[c]:o},{shouldDirty:!1}),a.subscribe(c,p=>{s(p),a.actions.setFormState({[c]:p},{shouldDirty:!0}),b.current&&typeof b.current.dispatchEvent=="function"&&b.current.dispatchEvent(new Event("change"))})),[]),d({ref:b,name:c,defaultValue:o,value:f,setValue:l})};_.Controller=de,_.Form=fe,_.useForm=se,_.useValidateForm=Z,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});
+  <%s key={someKey} {...props} />`,k,p,w,p),oe[p+k]=!0)}if(p=null,l!==void 0&&(b(l),p=""+l),E(t)&&(b(t.key),p=""+t.key),"key"in t){l={};for(var K in t)K!=="key"&&(l[K]=t[K])}else l=t;return p&&u(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),m(e,p,S,C,c(),l,Z,Q)}function f(e){typeof e=="object"&&e!==null&&e.$$typeof===j&&e._store&&(e._store.validated=1)}var v=r,j=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),M=Symbol.for("react.strict_mode"),L=Symbol.for("react.profiler"),H=Symbol.for("react.consumer"),W=Symbol.for("react.context"),U=Symbol.for("react.forward_ref"),J=Symbol.for("react.suspense"),z=Symbol.for("react.suspense_list"),F=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),G=Symbol.for("react.activity"),V=Symbol.for("react.client.reference"),D=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,n=Object.prototype.hasOwnProperty,T=Array.isArray,d=console.createTask?console.createTask:function(){return null};v={"react-stack-bottom-frame":function(e){return e()}};var g,y={},X=v["react-stack-bottom-frame"].bind(v,s)(),Y=d(i(s)),oe={};A.Fragment=O,A.jsx=function(e,t,l,k,C){var S=1e4>D.recentlyCreatedOwnerStacks++;return _(e,t,l,!1,k,C,S?Error("react-stack-top-frame"):X,S?d(i(e)):Y)},A.jsxs=function(e,t,l,k,C){var S=1e4>D.recentlyCreatedOwnerStacks++;return _(e,t,l,!0,k,C,S?Error("react-stack-top-frame"):X,S?d(i(e)):Y)}}()),A}var re;function ie(){return re||(re=1,process.env.NODE_ENV==="production"?I.exports=ue():I.exports=le()),I.exports}var ne=ie();const ae=r.createContext({}),fe=()=>r.useContext(ae),de=({id:o,form:a,method:b,action:i,children:c,onSubmit:s=()=>{},onInput:E=()=>{},onChange:u=()=>{},numberFields:R=[],className:m,..._})=>(r.useEffect(()=>a.actions.registerOnchange(u),[u]),ne.jsx(ae.Provider,{value:a,children:ne.jsx("form",{ref:a==null?void 0:a.ref,action:i,className:m,onSubmit:f=>{b||f.preventDefault();const v=a.actions.loadFormValues();s(v)},onInput:f=>{if(f.target.tagName==="FORM"){const v=a.actions.loadFormValues();a.actions.setFormState(v)}else E(f)},onChange:()=>{const f=a.actions.loadFormValues();a.actions.setFormState(f)},..._,children:c})})),be=({name:o,defaultValue:a,render:b=({ref:i,name:c,defaultValue:s,value:E,setValue:u})=>null})=>{const[i,c]=r.useState(a),s=fe(),E=r.useRef(),u=r.useCallback((R,{shouldDirty:m=!1}={})=>{s.actions.setFormState(_=>({..._,[o]:R}),{shouldDirty:m}),c(R)},[c,s.actions.setFormState]);return r.useEffect(()=>(s.actions.setFormState(m=>({...m,[o]:a}),{shouldDirty:!1}),s.subscribe(o,(m,{shouldDirty:_=!0})=>{c(m),s.actions.setFormState(f=>({...f,[o]:m}),{shouldDirty:_}),E.current&&typeof E.current.dispatchEvent=="function"&&E.current.dispatchEvent(new Event("change"))})),[]),b({ref:E,name:o,defaultValue:a,value:i,setValue:u})};h.Controller=be,h.Form=de,h.useForm=ce,h.useValidateForm=$,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-formkit",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "keywords": [
     "react formkit",
     "react ez formkit",
@@ -17,10 +17,6 @@
   ],
   "main": "dist/react-simple-formkit.js",
   "module": "dist/react-simple-formkit.mjs",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/huynguyen294/react-simple-formkit.git"
-  },
   "author": "huynguyen294",
   "license": "MIT",
   "scripts": {
@@ -31,9 +27,15 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^7.1.0",
+    "@mui/x-date-pickers": "^8.3.0",
     "@vitejs/plugin-react": "^4.4.1",
+    "dayjs": "^1.11.13",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-simple-formkit": "^1.0.1",
     "vite": "^6.0.7"
   },
   "peerDependencies": {