react-simple-formkit 1.0.1 → 1.0.2

package/README.md

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

package/dist/react-simple-formkit.mjs

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