react-form-action 2.10.0 → 2.11.0

package/README.md

@@ -102,7 +102,6 @@ export function SubscribeForm() {
 
 ```tsx
 // app/subscribe/page.tsx
-
 import { Action } from "react-form-action/client";
 
 import { subscribeAction } from "./action";
@@ -232,112 +231,6 @@ export default function Page({
 }
 ```
 
-### Action Creator
-
-Low-level action creator, which provides the `success`, `failure` and `invalid` envelope constructors. With the `createFormAction` you must handle the native `FormData` by yourself.
-
-```ts
-"use server";
-
-import { createFormAction } from "react-form-action";
-import { z } from "zod";
-
-// Define custom serializable error & success data types
-type ErrorData = {
-  message: string;
-};
-
-type SuccessData = {
-  message: string;
-};
-
-type ValiationError = {
-  name?: string;
-};
-
-const updateUserSchema = z.object({ name: z.string() });
-
-export const updateUser = createFormAction<
-  SuccessData,
-  ErrorData,
-  ValiationError
->(({ success, failure, invalid }) =>
-  // success and failure helper functions create wrappers for success & error data respectively
-  async (prevState, formData) => {
-    if (prevState.type === "initial") {
-      // use the initialData passed to <Form /> here
-      // prevState.data === "foobar"
-    }
-
-    try {
-      const { name } = updateUserSchema.parse({
-        name: formData.get("name"),
-      });
-
-      const user = await updateCurrentUser(name);
-
-      if (user) {
-        // {type: "success", data: "Your profile has been updated.", error: null, validationError: null}
-        return success({
-          message: "Your profile has been updated.",
-        });
-      } else {
-        // {type: "error", data: null, error: { message: "No current user." }, validationError: null}
-        return failure({ message: "No current user." });
-      }
-    } catch (error) {
-      if (error instanceof ZodError) {
-        // {type: "invalid", data: null, error: null, validationError: {name: "Invalid input"}}
-        return invalid({
-          name: error.issues[0]?.message ?? "Validation error",
-        });
-      }
-
-      return failure({ message: "Failed to update user." });
-    }
-  },
-);
-```
-
-The action creator supports arguments binding:
-
-```ts
-export const updateUser = createFormAction(
-  (
-    { success, failure, invalid },
-    userId: string /* Here you can specify multiple arguments */,
-  ) =>
-    async (prevState, formData) => {
-      try {
-        const { name } = updateUserSchema.parse({
-          name: formData.get("name"),
-        });
-
-        const user = await db.users.findById(userId);
-
-        if (!user) {
-          return failure({ message: "No such user." });
-        }
-
-        const updated = await user.update({ name });
-
-        if (updated) {
-          return success({
-            message: "User has been updated.",
-          });
-        } else {
-          return failure({ message: "Failed to update." });
-        }
-      } catch (error) {
-        // handle error
-      }
-    },
-);
-
-// call bind as usuall, the "123" becomes the "userId"
-updateUser.bind(null, "123");
-```
-
 ### Action Context
 
 The `<Action>` components enables you to access your `action`'s state with the `useActionContext()` hook:
@@ -385,6 +278,63 @@ export function SignupForm() {
 }
 ```
 
+#### Client-side validation
+
+The `<Action validate={} />` prop enables you to tap into the `formData` before they are passed to the server action.
+
+```tsx
+"use client"; // NOTE: The <Action> renders a context provider (a client component)
+
+import type { PropsWithChildren } from "react";
+import { Action } from "react-form-action/client";
+import { z } from "zod";
+import { zfd } from "zod-form-data";
+import { signUp } from "./action";
+import { signUpSchema } from "./schema";
+
+export function SignUpAction({ children }: PropsWithChildren) {
+  return (
+    <Action
+      action={signUp}
+      initialData={undefined}
+      validate={(formData) => {
+        const result = zfd.formData(signUpSchema).safeParse(formData);
+
+        // NOTE: the return must be of the same type as your action's ValidationError type
+        if (result.error) {
+          return z.treeifyError(result.error);
+        }
+
+        return null;
+      }}
+    >
+      {children}
+    </Action>
+  );
+}
+```
+
+Use the `validateSchema` to avoid the zod-form-data boilerplate:
+
+```tsx
+import { validateSchema } from "react-form-action";
+
+import { signUpSchema } from "./schema";
+
+export function SignUpAction({ children }: PropsWithChildren) {
+  return (
+    <Action
+      action={signUp}
+      initialData={undefined}
+      validate={validateSchema(signUpSchema)}
+    >
+      {children}
+    </Action>
+  );
+}
+```
+
+
 ### `<Form>` Component
 
 The `<form>` submits the action in `onSubmit` handler to [prevent automatic form reset](https://github.com/facebook/react/issues/29034).
@@ -545,3 +495,111 @@ function SubmitButton() {
   );
 };
 ```
+
+
+
+### Action Creator
+
+Low-level action creator, which provides the `success`, `failure` and `invalid` envelope constructors. With the `createFormAction` you must handle the native `FormData` by yourself.
+
+```ts
+"use server";
+
+import { createFormAction } from "react-form-action";
+import { z } from "zod";
+
+// Define custom serializable error & success data types
+type ErrorData = {
+  message: string;
+};
+
+type SuccessData = {
+  message: string;
+};
+
+type ValiationError = {
+  name?: string;
+};
+
+const updateUserSchema = z.object({ name: z.string() });
+
+export const updateUser = createFormAction<
+  SuccessData,
+  ErrorData,
+  ValiationError
+>(({ success, failure, invalid }) =>
+  // success and failure helper functions create wrappers for success & error data respectively
+  async (prevState, formData) => {
+    if (prevState.type === "initial") {
+      // use the initialData passed to <Form /> here
+      // prevState.data === "foobar"
+    }
+
+    try {
+      const { name } = updateUserSchema.parse({
+        name: formData.get("name"),
+      });
+
+      const user = await updateCurrentUser(name);
+
+      if (user) {
+        // {type: "success", data: "Your profile has been updated.", error: null, validationError: null}
+        return success({
+          message: "Your profile has been updated.",
+        });
+      } else {
+        // {type: "error", data: null, error: { message: "No current user." }, validationError: null}
+        return failure({ message: "No current user." });
+      }
+    } catch (error) {
+      if (error instanceof ZodError) {
+        // {type: "invalid", data: null, error: null, validationError: {name: "Invalid input"}}
+        return invalid({
+          name: error.issues[0]?.message ?? "Validation error",
+        });
+      }
+
+      return failure({ message: "Failed to update user." });
+    }
+  },
+);
+```
+
+The action creator supports arguments binding:
+
+```ts
+export const updateUser = createFormAction(
+  (
+    { success, failure, invalid },
+    userId: string /* Here you can specify multiple arguments */,
+  ) =>
+    async (prevState, formData) => {
+      try {
+        const { name } = updateUserSchema.parse({
+          name: formData.get("name"),
+        });
+
+        const user = await db.users.findById(userId);
+
+        if (!user) {
+          return failure({ message: "No such user." });
+        }
+
+        const updated = await user.update({ name });
+
+        if (updated) {
+          return success({
+            message: "User has been updated.",
+          });
+        } else {
+          return failure({ message: "Failed to update." });
+        }
+      } catch (error) {
+        // handle error
+      }
+    },
+);
+
+// call bind as usuall, the "123" becomes the "userId"
+updateUser.bind(null, "123");
+```

package/dist/client.d.mts

@@ -35,20 +35,8 @@ type SpreadActionContext<Data = unknown, Error = unknown, ValidationError = unkn
 /**
  * A hook to consume the form action state from the context.
  */
-declare function useActionContext<Data, Error, ValidationError, Args extends unknown[] = []>(action?: FormAction<Data, Error, ValidationError, FormData, Args>): SpreadActionContext<Data, Error, ValidationError>;
-declare function Action<Data, Error, ValidationError, Args extends unknown[] = []>({ children, action: formAction, initialData, args, permalink, validate }: ActionProps<Data, Error, ValidationError, Args>): React$1.JSX.Element;
-//#endregion
-//#region src/Form.d.ts
-type FormProps = Omit<JSX.IntrinsicElements["form"], "action"> & {
-  /**
-   * Opt-in into automatic form reset by using the form "action" prop.
-   * By default, the onSubmit with a custom transition which opts-out of the implicit form reset.
-   * See for more. https://github.com/facebook/react/issues/29034
-   * @default false
-   */
-  autoReset?: boolean;
-};
-declare function Form({ autoReset, ...props }: FormProps): JSX.Element;
+declare function useActionContext<Data, Error, ValidationError, Args extends unknown[] = []>(_action?: FormAction<Data, Error, ValidationError, FormData, Args>): SpreadActionContext<Data, Error, ValidationError>;
+declare function Action<Data, Error, ValidationError, Args extends unknown[] = []>({ children, action: formAction, initialData, args, permalink, validate }: ActionProps<Data, Error, ValidationError, Args>): import("react").JSX.Element;
 //#endregion
 //#region src/ZodFieldError.d.ts
 declare const SEPARATOR: ".";
@@ -98,6 +86,18 @@ declare function createComponents<Data, Error, ValidationError extends $ZodError
   }) => React$1.ReactNode;
 };
 //#endregion
+//#region src/Form.d.ts
+type FormProps = Omit<JSX.IntrinsicElements["form"], "action"> & {
+  /**
+   * Opt-in into automatic form reset by using the form "action" prop.
+   * By default, the onSubmit with a custom transition which opts-out of the implicit form reset.
+   * See for more. https://github.com/facebook/react/issues/29034
+   * @default false
+   */
+  autoReset?: boolean;
+};
+declare function Form({ autoReset, ...props }: FormProps): JSX.Element;
+//#endregion
 //#region src/Pending.d.ts
 /**
  * Conditionally renders the children, when the form action is in the "pending" state.

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import{n as e,t}from"./createFormAction-BwMYAzm2.mjs";import n,{createContext as r,startTransition as i,use as a,useActionState as o}from"react";const s={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},c=r(null);function l(e){let t=a(c);if(!t)throw Error(`ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?`);return t}function u({children:r,action:i,initialData:a,args:l,permalink:u,validate:d}){let f=l?i.bind(null,...l):i,[p,m,h]=o(async(e,n)=>{if(d){let r=await t(({invalid:e,success:t})=>async(n,r)=>{let i=d(r);return i?e(i):t(!0)})(e,n);if(r.type===`invalid`)return r}return f(e,n)},e(a),u),g=p.type===`initial`?{...p,...s,action:m,isPending:h,isInitial:!0}:p.type===`invalid`?{...p,...s,action:m,isPending:h,isInvalid:!0}:p.type===`failure`?{...p,...s,action:m,isPending:h,isFailure:!0}:{...p,...s,action:m,isPending:h,isSuccess:!0};return n.createElement(c,{value:g},r)}function d({autoReset:e=!1,...t}){let{action:r}=l(),a=e?{action:r}:{onSubmit:e=>{e.preventDefault();let t=e.currentTarget;i(()=>{r(new FormData(t))})}};return n.createElement(`form`,{...a,...t})}const f=Object.freeze({errors:Object.freeze([])});function p({errors:e,name:t,children:r=({error:e})=>n.createElement(n.Fragment,null,e)}){if(t.length===0)return r({name:t,error:e.errors[0],errors:e.errors});let i=t.split(`.`),a=e;for(;i.length;){let e=i.shift();if(!a.properties){a=f;break}a=a.properties[e]??f}return r({name:t,error:a.errors[0],errors:a.errors})}function m(e){function t({name:t,children:r}){let{isInvalid:i,validationError:a}=l(e);return n.createElement(p,{errors:a??f,name:t},r??(({error:e})=>i&&n.createElement(n.Fragment,null,e)))}function r({children:t}){let{isSuccess:n,data:r}=l(e);return typeof t==`function`?t({isSuccess:n,data:r}):n&&t}function i({children:t}){let{isInvalid:n,validationError:r}=l(e);return typeof t==`function`?t({isInvalid:n,validationError:r}):n&&t}return{FieldError:t,Success:r,Invalid:i}}function h({children:e}){let{isPending:t}=l();return typeof e==`function`?e({isPending:t}):t&&e}export{u as Action,d as Form,h as Pending,p as ZodFieldError,m as createComponents,f as noError,l as useActionContext};
+"use client";import{n as e,t}from"./createFormAction-BwMYAzm2.mjs";import{createContext as n,startTransition as r,use as i,useActionState as a}from"react";import{Fragment as o,jsx as s}from"react/jsx-runtime";const c={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},l=n(null);function u(e){let t=i(l);if(!t)throw Error(`ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?`);return t}function d({children:n,action:r,initialData:i,args:o,permalink:u,validate:d}){let f=o?r.bind(null,...o):r,[p,m,h]=a(async(e,n)=>{if(d){let r=await t(({invalid:e,success:t})=>async(n,r)=>{let i=d(r);return i?e(i):t(!0)})(e,n);if(r.type===`invalid`)return r}return f(e,n)},e(i),u),g=p.type===`initial`?{...p,...c,action:m,isPending:h,isInitial:!0}:p.type===`invalid`?{...p,...c,action:m,isPending:h,isInvalid:!0}:p.type===`failure`?{...p,...c,action:m,isPending:h,isFailure:!0}:{...p,...c,action:m,isPending:h,isSuccess:!0};return s(l,{value:g,children:n})}const f=Object.freeze({errors:Object.freeze([])});function p({errors:e,name:t,children:n=({error:e})=>s(o,{children:e})}){if(t.length===0)return n({name:t,error:e.errors[0],errors:e.errors});let r=t.split(`.`),i=e;for(let e of r){if(!i.properties){i=f;break}i=i.properties[e]??f}return n({name:t,error:i.errors[0],errors:i.errors})}function m(e){function t({name:t,children:n}){let{isInvalid:r,validationError:i}=u(e);return s(p,{errors:i??f,name:t,children:n??(({error:e})=>r&&s(o,{children:e}))})}function n({children:t}){let{isSuccess:n,data:r}=u(e);return typeof t==`function`?t({isSuccess:n,data:r}):n&&t}function r({children:t}){let{isInvalid:n,validationError:r}=u(e);return typeof t==`function`?t({isInvalid:n,validationError:r}):n&&t}return{FieldError:t,Success:n,Invalid:r}}function h({autoReset:e=!1,...t}){let{action:n}=u();return s(`form`,{...e?{action:n}:{onSubmit:e=>{e.preventDefault();let t=e.currentTarget;r(()=>{n(new FormData(t))})}},...t})}function g({children:e}){let{isPending:t}=u();return typeof e==`function`?e({isPending:t}):t&&e}export{d as Action,h as Form,g as Pending,p as ZodFieldError,m as createComponents,f as noError,u as useActionContext};

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import { a as InvalidState, c as initial, i as InitialState, n as FailureState, o as SuccessState, r as FormAction, s as createFormAction, t as ActionState } from "./createFormAction-4p5Fvn2A.mjs";
 import { ZodObject, ZodTuple, ZodType, z } from "zod/v4";
+import { ZodObject as ZodObject$1, z as z$1 } from "zod";
 import { $ZodErrorTree, $ZodShape, $ZodType } from "zod/v4/core";
 //#region src/formAction.d.ts
 declare const emptyInput: unique symbol;
@@ -54,4 +55,12 @@ type FormActionBuilder<Schema extends ZodType | EmptyInput, Args extends $ZodTyp
 };
 declare const formAction: FormActionBuilder<typeof emptyInput, [], unknown, InitialContext, []>;
 //#endregion
-export { ActionState, FailureState, FormAction, InitialState, InvalidState, SuccessState, createFormAction, formAction, initial };
+//#region src/validateSchema.d.ts
+/**
+ * A helper to make a validate function for the client validation with <Action validate={} /> prop.
+ * @param schema z.object(...) schema
+ * @returns validate function
+ */
+declare function validateSchema<T extends ZodObject$1>(schema: T): (formData: FormData) => z$1.core.$ZodErrorTree<z$1.TypeOf<T>, string> | null;
+//#endregion
+export { ActionState, FailureState, FormAction, InitialState, InvalidState, SuccessState, createFormAction, formAction, initial, validateSchema };

package/dist/index.mjs

@@ -1 +1 @@
-import{n as e,t}from"./createFormAction-BwMYAzm2.mjs";import{z as n}from"zod/v4";import{zfd as r}from"zod-form-data";const i=Symbol();function a(e,o=[],s,c){async function l(e){let t={formData:e};for(let e of o){let n=await e({ctx:t});t={...t,...n}}return t}return{args(t){return a(e,o,s,c?[...c,...t]:t)},input(t){if(e===i)return a(t,o,s,c);if(e._zod.def.checks)throw Error(`Previous input is not augmentable because it contains an effect.`);if(t._zod.def.checks)throw Error(`Your input contains effect which prevents merging it with the previous inputs.`);if(e._zod.def.type===`object`)return a(n.object({...e.shape,...t.shape}),o,s,c);throw Error(`Merging inputs works only for object schemas without effects.`)},use(t){return a(e,[...o,t],s,c)},error(t){return a(e,o,t,c)},run:e===i?e=>t(({success:t,failure:r,invalid:i},...a)=>async(o,u)=>{let d=await l(u);if(c){let e=n.tuple(c).safeParse(a);if(!e.success)return i(n.treeifyError(e.error))}try{return t(await e({args:a,ctx:d}))}catch(e){if(s)return r(await s({args:a,error:e,ctx:d}));throw e}}):e===i?void 0:i=>t(({success:t,failure:a,invalid:o},...u)=>{let d=r.formData(e);return async(e,r)=>{let f=await l(r);if(c){let e=n.tuple(c).safeParse(u);if(!e.success)return o(n.treeifyError(e.error))}let p=d.safeParse(r);if(!p.success)return o(n.treeifyError(p.error));let m=p.data;try{return t(await i({args:u,input:m,ctx:f}))}catch(e){if(s)return a(await s({args:u,error:e,ctx:f}));throw e}}})}}const o=a(i);export{t as createFormAction,o as formAction,e as initial};
+import{n as e,t}from"./createFormAction-BwMYAzm2.mjs";import{z as n}from"zod/v4";import{zfd as r}from"zod-form-data";import{z as i}from"zod";const a=Symbol();function o(e,i=[],s,c){async function l(e){let t={formData:e};for(let e of i){let n=await e({ctx:t});t={...t,...n}}return t}return{args(t){return o(e,i,s,c?[...c,...t]:t)},input(t){if(e===a)return o(t,i,s,c);if(e._zod.def.checks)throw Error(`Previous input is not augmentable because it contains an effect.`);if(t._zod.def.checks)throw Error(`Your input contains effect which prevents merging it with the previous inputs.`);if(e._zod.def.type===`object`)return o(n.object({...e.shape,...t.shape}),i,s,c);throw Error(`Merging inputs works only for object schemas without effects.`)},use(t){return o(e,[...i,t],s,c)},error(t){return o(e,i,t,c)},run:e===a?e=>t(({success:t,failure:r,invalid:i},...a)=>async(o,u)=>{let d=await l(u);if(c){let e=n.tuple(c).safeParse(a);if(!e.success)return i(n.treeifyError(e.error))}try{return t(await e({args:a,ctx:d}))}catch(e){if(s)return r(await s({args:a,error:e,ctx:d}));throw e}}):e===a?void 0:i=>t(({success:t,failure:a,invalid:o},...u)=>{let d=r.formData(e);return async(e,r)=>{let f=await l(r);if(c){let e=n.tuple(c).safeParse(u);if(!e.success)return o(n.treeifyError(e.error))}let p=d.safeParse(r);if(!p.success)return o(n.treeifyError(p.error));let m=p.data;try{return t(await i({args:u,input:m,ctx:f}))}catch(e){if(s)return a(await s({args:u,error:e,ctx:f}));throw e}}})}}const s=o(a);function c(e){return t=>{let n=r.formData(e).safeParse(t);return n.error?i.treeifyError(n.error):null}}export{t as createFormAction,s as formAction,e as initial,c as validateSchema};

package/package.json

@@ -1,76 +1,78 @@
-{
-  "name": "react-form-action",
-  "version": "2.10.0",
-  "description": "State management helpers for the react form actions.",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/MiroslavPetrik/react-form-action.git"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "files": [
-    "/dist"
-  ],
-  "scripts": {
-    "build": "tsdown src/index.ts src/client.ts --minify",
-    "test": "vitest",
-    "typecheck": "vitest --typecheck",
-    "format": "prettier . --write",
-    "format:check": "prettier . --check",
-    "ncu": "ncu --interactive --format group",
-    "pub:next": "npm publish --tag next"
-  },
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "module": "./dist/index.mjs",
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
-    },
-    "./client": {
-      "import": "./dist/client.mjs",
-      "module": "./dist/client.mjs",
-      "types": "./dist/client.d.mts",
-      "default": "./dist/client.mjs"
-    }
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "react",
-    "form-action",
-    "react-form-action",
-    "next",
-    "next-form-action",
-    "nextjs",
-    "server-action"
-  ],
-  "author": "Miroslav Petrik",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19",
-    "zod": "^3.25.0 || ^4.0.0",
-    "zod-form-data": "^3.0.0"
-  },
-  "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^7.0.0",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
-    "happy-dom": "^20.11.0",
-    "npm-check-updates": "^22.2.9",
-    "prettier": "^3.9.6",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "tsdown": "^0.22.12",
-    "typescript": "^6.0.3",
-    "vitest": "^4.1.10",
-    "zod": "^4.4.3",
-    "zod-form-data": "^3.0.3"
-  }
-}
+{
+  "name": "react-form-action",
+  "version": "2.11.0",
+  "description": "State management helpers for the react form actions.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MiroslavPetrik/react-form-action.git"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "build": "tsdown src/index.ts src/client.ts --minify",
+    "test": "vitest",
+    "typecheck": "vitest --typecheck",
+    "lint": "biome lint ./src",
+    "lint:write": "biome lint ./src --write",
+    "format": "biome format --write .",
+    "format:check": "biome check .",
+    "ncu": "ncu --interactive --format group",
+    "pub:next": "npm publish --tag next"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs",
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./client": {
+      "import": "./dist/client.mjs",
+      "module": "./dist/client.mjs",
+      "types": "./dist/client.d.mts",
+      "default": "./dist/client.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "form-action",
+    "react-form-action",
+    "next",
+    "next-form-action",
+    "nextjs",
+    "server-action"
+  ],
+  "author": "Miroslav Petrik",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "zod": "^3.25.0 || ^4.0.0",
+    "zod-form-data": "^3.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.8",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.4",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "happy-dom": "^20.11.2",
+    "npm-check-updates": "^23.0.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tsdown": "^0.22.14",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10",
+    "zod": "^4.4.3",
+    "zod-form-data": "^3.0.3"
+  }
+}