hookform-action-standalone 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 hookform-action contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.mts

@@ -0,0 +1,80 @@
+import { FieldValues } from 'react-hook-form';
+import { ActionResult, UseActionFormCoreOptions, UseActionFormCoreReturn } from 'hookform-action-core';
+export { ActionFormPlugin, ActionFormState, ActionResult, ClientValidationMode, ErrorMapper, FieldErrorRecord, Form, FormProps, OptimisticReducer, OptimisticState, SubmissionRecord, SubmitFunction, UseActionFormCoreOptions, UseActionFormCoreReturn, clearPersistedValues, defaultErrorMapper, hasUseOptimistic, loadPersistedValues, savePersistedValues, useActionFormCore, withZod } from 'hookform-action-core';
+
+/**
+ * A generic async submit function provided by the user.
+ * In standalone mode there are no Server Actions — the user provides
+ * a plain async function (e.g. wrapping fetch, axios, etc.).
+ */
+type StandaloneSubmitFunction<TFieldValues extends FieldValues, TResult> = (data: TFieldValues) => Promise<TResult>;
+/**
+ * Options for `useActionForm` in standalone mode.
+ * Identical to the core options but with `submit` as a required top-level option.
+ */
+interface UseStandaloneActionFormOptions<TFieldValues extends FieldValues = FieldValues, TResult = ActionResult, TOptimistic = undefined> extends UseActionFormCoreOptions<TFieldValues, TResult, TOptimistic> {
+    /**
+     * The async function that handles form submission.
+     *
+     * @example
+     * ```ts
+     * submit: async (data) => {
+     *   const res = await fetch('/api/submit', {
+     *     method: 'POST',
+     *     body: JSON.stringify(data),
+     *     headers: { 'Content-Type': 'application/json' },
+     *   })
+     *   return res.json()
+     * }
+     * ```
+     */
+    submit: StandaloneSubmitFunction<TFieldValues, TResult>;
+}
+/**
+ * Return type of `useActionForm` in standalone mode.
+ * Same as core return (no `formAction` since there are no Server Actions).
+ */
+type UseStandaloneActionFormReturn<TFieldValues extends FieldValues = FieldValues, TResult = ActionResult, TOptimistic = undefined> = UseActionFormCoreReturn<TFieldValues, TResult, TOptimistic>;
+/**
+ * `useActionForm` for standalone React apps (Vite, Remix, Astro, SPAs).
+ *
+ * Provides the same API as the Next.js version but instead of a Server Action,
+ * you pass a plain `submit` function.
+ *
+ * @example
+ * ```tsx
+ * import { useActionForm } from 'hookform-action-standalone'
+ * import { z } from 'zod'
+ *
+ * const schema = z.object({
+ *   email: z.string().email(),
+ *   password: z.string().min(8),
+ * })
+ *
+ * function LoginForm() {
+ *   const { register, handleSubmit, formState } = useActionForm({
+ *     submit: async (data) => {
+ *       const res = await fetch('/api/login', {
+ *         method: 'POST',
+ *         body: JSON.stringify(data),
+ *         headers: { 'Content-Type': 'application/json' },
+ *       })
+ *       return res.json()
+ *     },
+ *     schema,
+ *     validationMode: 'onChange',
+ *   })
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit()}>
+ *       <input {...register('email')} />
+ *       <input {...register('password')} type="password" />
+ *       <button disabled={formState.isPending}>Login</button>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare function useActionForm<TFieldValues extends FieldValues = FieldValues, TResult = ActionResult, TOptimistic = undefined>(options: UseStandaloneActionFormOptions<TFieldValues, TResult, TOptimistic>): UseStandaloneActionFormReturn<TFieldValues, TResult, TOptimistic>;
+
+export { type StandaloneSubmitFunction, type UseStandaloneActionFormOptions, type UseStandaloneActionFormReturn, useActionForm };

package/dist/index.d.ts

@@ -0,0 +1,80 @@
+import { FieldValues } from 'react-hook-form';
+import { ActionResult, UseActionFormCoreOptions, UseActionFormCoreReturn } from 'hookform-action-core';
+export { ActionFormPlugin, ActionFormState, ActionResult, ClientValidationMode, ErrorMapper, FieldErrorRecord, Form, FormProps, OptimisticReducer, OptimisticState, SubmissionRecord, SubmitFunction, UseActionFormCoreOptions, UseActionFormCoreReturn, clearPersistedValues, defaultErrorMapper, hasUseOptimistic, loadPersistedValues, savePersistedValues, useActionFormCore, withZod } from 'hookform-action-core';
+
+/**
+ * A generic async submit function provided by the user.
+ * In standalone mode there are no Server Actions — the user provides
+ * a plain async function (e.g. wrapping fetch, axios, etc.).
+ */
+type StandaloneSubmitFunction<TFieldValues extends FieldValues, TResult> = (data: TFieldValues) => Promise<TResult>;
+/**
+ * Options for `useActionForm` in standalone mode.
+ * Identical to the core options but with `submit` as a required top-level option.
+ */
+interface UseStandaloneActionFormOptions<TFieldValues extends FieldValues = FieldValues, TResult = ActionResult, TOptimistic = undefined> extends UseActionFormCoreOptions<TFieldValues, TResult, TOptimistic> {
+    /**
+     * The async function that handles form submission.
+     *
+     * @example
+     * ```ts
+     * submit: async (data) => {
+     *   const res = await fetch('/api/submit', {
+     *     method: 'POST',
+     *     body: JSON.stringify(data),
+     *     headers: { 'Content-Type': 'application/json' },
+     *   })
+     *   return res.json()
+     * }
+     * ```
+     */
+    submit: StandaloneSubmitFunction<TFieldValues, TResult>;
+}
+/**
+ * Return type of `useActionForm` in standalone mode.
+ * Same as core return (no `formAction` since there are no Server Actions).
+ */
+type UseStandaloneActionFormReturn<TFieldValues extends FieldValues = FieldValues, TResult = ActionResult, TOptimistic = undefined> = UseActionFormCoreReturn<TFieldValues, TResult, TOptimistic>;
+/**
+ * `useActionForm` for standalone React apps (Vite, Remix, Astro, SPAs).
+ *
+ * Provides the same API as the Next.js version but instead of a Server Action,
+ * you pass a plain `submit` function.
+ *
+ * @example
+ * ```tsx
+ * import { useActionForm } from 'hookform-action-standalone'
+ * import { z } from 'zod'
+ *
+ * const schema = z.object({
+ *   email: z.string().email(),
+ *   password: z.string().min(8),
+ * })
+ *
+ * function LoginForm() {
+ *   const { register, handleSubmit, formState } = useActionForm({
+ *     submit: async (data) => {
+ *       const res = await fetch('/api/login', {
+ *         method: 'POST',
+ *         body: JSON.stringify(data),
+ *         headers: { 'Content-Type': 'application/json' },
+ *       })
+ *       return res.json()
+ *     },
+ *     schema,
+ *     validationMode: 'onChange',
+ *   })
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit()}>
+ *       <input {...register('email')} />
+ *       <input {...register('password')} type="password" />
+ *       <button disabled={formState.isPending}>Login</button>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare function useActionForm<TFieldValues extends FieldValues = FieldValues, TResult = ActionResult, TOptimistic = undefined>(options: UseStandaloneActionFormOptions<TFieldValues, TResult, TOptimistic>): UseStandaloneActionFormReturn<TFieldValues, TResult, TOptimistic>;
+
+export { type StandaloneSubmitFunction, type UseStandaloneActionFormOptions, type UseStandaloneActionFormReturn, useActionForm };

package/dist/index.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var react = require('react');
+var hookformActionCore = require('hookform-action-core');
+
+function useActionForm(options) {
+  const { submit, ...coreOptions } = options;
+  const submitFn = react.useCallback(
+    async (data) => {
+      return submit(data);
+    },
+    [submit]
+  );
+  return hookformActionCore.useActionFormCore(submitFn, coreOptions);
+}
+
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () { return hookformActionCore.Form; }
+});
+Object.defineProperty(exports, "clearPersistedValues", {
+  enumerable: true,
+  get: function () { return hookformActionCore.clearPersistedValues; }
+});
+Object.defineProperty(exports, "defaultErrorMapper", {
+  enumerable: true,
+  get: function () { return hookformActionCore.defaultErrorMapper; }
+});
+Object.defineProperty(exports, "hasUseOptimistic", {
+  enumerable: true,
+  get: function () { return hookformActionCore.hasUseOptimistic; }
+});
+Object.defineProperty(exports, "loadPersistedValues", {
+  enumerable: true,
+  get: function () { return hookformActionCore.loadPersistedValues; }
+});
+Object.defineProperty(exports, "savePersistedValues", {
+  enumerable: true,
+  get: function () { return hookformActionCore.savePersistedValues; }
+});
+Object.defineProperty(exports, "useActionFormCore", {
+  enumerable: true,
+  get: function () { return hookformActionCore.useActionFormCore; }
+});
+Object.defineProperty(exports, "withZod", {
+  enumerable: true,
+  get: function () { return hookformActionCore.withZod; }
+});
+exports.useActionForm = useActionForm;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-action-form.ts"],"names":["useCallback","useActionFormCore"],"mappings":";;;;;AA2GO,SAAS,cAKd,OAAA,EACmE;AACnE,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,WAAA,EAAY,GAAI,OAAA;AAGnC,EAAA,MAAM,QAAA,GAAkDA,iBAAA;AAAA,IACtD,OAAO,IAAA,KAAuB;AAC5B,MAAA,OAAO,OAAO,IAAI,CAAA;AAAA,IACpB,CAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,OAAOC,oCAAA,CAAsD,UAAU,WAAW,CAAA;AACpF","file":"index.js","sourcesContent":["\"use client\";\n\nimport { useCallback } from \"react\";\nimport type { FieldValues } from \"react-hook-form\";\n\nimport {\n  type ActionResult,\n  type SubmitFunction,\n  type UseActionFormCoreOptions,\n  type UseActionFormCoreReturn,\n  useActionFormCore,\n} from \"hookform-action-core\";\n\n// ---------------------------------------------------------------------------\n// Standalone-specific types\n// ---------------------------------------------------------------------------\n\n/**\n * A generic async submit function provided by the user.\n * In standalone mode there are no Server Actions — the user provides\n * a plain async function (e.g. wrapping fetch, axios, etc.).\n */\nexport type StandaloneSubmitFunction<TFieldValues extends FieldValues, TResult> = (\n  data: TFieldValues,\n) => Promise<TResult>;\n\n/**\n * Options for `useActionForm` in standalone mode.\n * Identical to the core options but with `submit` as a required top-level option.\n */\nexport interface UseStandaloneActionFormOptions<\n  TFieldValues extends FieldValues = FieldValues,\n  TResult = ActionResult,\n  TOptimistic = undefined,\n> extends UseActionFormCoreOptions<TFieldValues, TResult, TOptimistic> {\n  /**\n   * The async function that handles form submission.\n   *\n   * @example\n   * ```ts\n   * submit: async (data) => {\n   *   const res = await fetch('/api/submit', {\n   *     method: 'POST',\n   *     body: JSON.stringify(data),\n   *     headers: { 'Content-Type': 'application/json' },\n   *   })\n   *   return res.json()\n   * }\n   * ```\n   */\n  submit: StandaloneSubmitFunction<TFieldValues, TResult>;\n}\n\n/**\n * Return type of `useActionForm` in standalone mode.\n * Same as core return (no `formAction` since there are no Server Actions).\n */\nexport type UseStandaloneActionFormReturn<\n  TFieldValues extends FieldValues = FieldValues,\n  TResult = ActionResult,\n  TOptimistic = undefined,\n> = UseActionFormCoreReturn<TFieldValues, TResult, TOptimistic>;\n\n// ---------------------------------------------------------------------------\n// useActionForm – Standalone adapter (v3)\n// ---------------------------------------------------------------------------\n\n/**\n * `useActionForm` for standalone React apps (Vite, Remix, Astro, SPAs).\n *\n * Provides the same API as the Next.js version but instead of a Server Action,\n * you pass a plain `submit` function.\n *\n * @example\n * ```tsx\n * import { useActionForm } from 'hookform-action-standalone'\n * import { z } from 'zod'\n *\n * const schema = z.object({\n *   email: z.string().email(),\n *   password: z.string().min(8),\n * })\n *\n * function LoginForm() {\n *   const { register, handleSubmit, formState } = useActionForm({\n *     submit: async (data) => {\n *       const res = await fetch('/api/login', {\n *         method: 'POST',\n *         body: JSON.stringify(data),\n *         headers: { 'Content-Type': 'application/json' },\n *       })\n *       return res.json()\n *     },\n *     schema,\n *     validationMode: 'onChange',\n *   })\n *\n *   return (\n *     <form onSubmit={handleSubmit()}>\n *       <input {...register('email')} />\n *       <input {...register('password')} type=\"password\" />\n *       <button disabled={formState.isPending}>Login</button>\n *     </form>\n *   )\n * }\n * ```\n */\nexport function useActionForm<\n  TFieldValues extends FieldValues = FieldValues,\n  TResult = ActionResult,\n  TOptimistic = undefined,\n>(\n  options: UseStandaloneActionFormOptions<TFieldValues, TResult, TOptimistic>,\n): UseStandaloneActionFormReturn<TFieldValues, TResult, TOptimistic> {\n  const { submit, ...coreOptions } = options;\n\n  // The submit function is already in the right shape for the core\n  const submitFn: SubmitFunction<TFieldValues, TResult> = useCallback(\n    async (data: TFieldValues) => {\n      return submit(data);\n    },\n    [submit],\n  );\n\n  return useActionFormCore<TFieldValues, TResult, TOptimistic>(submitFn, coreOptions);\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+import { useActionFormCore } from 'hookform-action-core';
+export { Form, clearPersistedValues, defaultErrorMapper, hasUseOptimistic, loadPersistedValues, savePersistedValues, useActionFormCore, withZod } from 'hookform-action-core';
+
+function useActionForm(options) {
+  const { submit, ...coreOptions } = options;
+  const submitFn = useCallback(
+    async (data) => {
+      return submit(data);
+    },
+    [submit]
+  );
+  return useActionFormCore(submitFn, coreOptions);
+}
+
+export { useActionForm };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-action-form.ts"],"names":[],"mappings":";;;;AA2GO,SAAS,cAKd,OAAA,EACmE;AACnE,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,WAAA,EAAY,GAAI,OAAA;AAGnC,EAAA,MAAM,QAAA,GAAkD,WAAA;AAAA,IACtD,OAAO,IAAA,KAAuB;AAC5B,MAAA,OAAO,OAAO,IAAI,CAAA;AAAA,IACpB,CAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,OAAO,iBAAA,CAAsD,UAAU,WAAW,CAAA;AACpF","file":"index.mjs","sourcesContent":["\"use client\";\n\nimport { useCallback } from \"react\";\nimport type { FieldValues } from \"react-hook-form\";\n\nimport {\n  type ActionResult,\n  type SubmitFunction,\n  type UseActionFormCoreOptions,\n  type UseActionFormCoreReturn,\n  useActionFormCore,\n} from \"hookform-action-core\";\n\n// ---------------------------------------------------------------------------\n// Standalone-specific types\n// ---------------------------------------------------------------------------\n\n/**\n * A generic async submit function provided by the user.\n * In standalone mode there are no Server Actions — the user provides\n * a plain async function (e.g. wrapping fetch, axios, etc.).\n */\nexport type StandaloneSubmitFunction<TFieldValues extends FieldValues, TResult> = (\n  data: TFieldValues,\n) => Promise<TResult>;\n\n/**\n * Options for `useActionForm` in standalone mode.\n * Identical to the core options but with `submit` as a required top-level option.\n */\nexport interface UseStandaloneActionFormOptions<\n  TFieldValues extends FieldValues = FieldValues,\n  TResult = ActionResult,\n  TOptimistic = undefined,\n> extends UseActionFormCoreOptions<TFieldValues, TResult, TOptimistic> {\n  /**\n   * The async function that handles form submission.\n   *\n   * @example\n   * ```ts\n   * submit: async (data) => {\n   *   const res = await fetch('/api/submit', {\n   *     method: 'POST',\n   *     body: JSON.stringify(data),\n   *     headers: { 'Content-Type': 'application/json' },\n   *   })\n   *   return res.json()\n   * }\n   * ```\n   */\n  submit: StandaloneSubmitFunction<TFieldValues, TResult>;\n}\n\n/**\n * Return type of `useActionForm` in standalone mode.\n * Same as core return (no `formAction` since there are no Server Actions).\n */\nexport type UseStandaloneActionFormReturn<\n  TFieldValues extends FieldValues = FieldValues,\n  TResult = ActionResult,\n  TOptimistic = undefined,\n> = UseActionFormCoreReturn<TFieldValues, TResult, TOptimistic>;\n\n// ---------------------------------------------------------------------------\n// useActionForm – Standalone adapter (v3)\n// ---------------------------------------------------------------------------\n\n/**\n * `useActionForm` for standalone React apps (Vite, Remix, Astro, SPAs).\n *\n * Provides the same API as the Next.js version but instead of a Server Action,\n * you pass a plain `submit` function.\n *\n * @example\n * ```tsx\n * import { useActionForm } from 'hookform-action-standalone'\n * import { z } from 'zod'\n *\n * const schema = z.object({\n *   email: z.string().email(),\n *   password: z.string().min(8),\n * })\n *\n * function LoginForm() {\n *   const { register, handleSubmit, formState } = useActionForm({\n *     submit: async (data) => {\n *       const res = await fetch('/api/login', {\n *         method: 'POST',\n *         body: JSON.stringify(data),\n *         headers: { 'Content-Type': 'application/json' },\n *       })\n *       return res.json()\n *     },\n *     schema,\n *     validationMode: 'onChange',\n *   })\n *\n *   return (\n *     <form onSubmit={handleSubmit()}>\n *       <input {...register('email')} />\n *       <input {...register('password')} type=\"password\" />\n *       <button disabled={formState.isPending}>Login</button>\n *     </form>\n *   )\n * }\n * ```\n */\nexport function useActionForm<\n  TFieldValues extends FieldValues = FieldValues,\n  TResult = ActionResult,\n  TOptimistic = undefined,\n>(\n  options: UseStandaloneActionFormOptions<TFieldValues, TResult, TOptimistic>,\n): UseStandaloneActionFormReturn<TFieldValues, TResult, TOptimistic> {\n  const { submit, ...coreOptions } = options;\n\n  // The submit function is already in the right shape for the core\n  const submitFn: SubmitFunction<TFieldValues, TResult> = useCallback(\n    async (data: TFieldValues) => {\n      return submit(data);\n    },\n    [submit],\n  );\n\n  return useActionFormCore<TFieldValues, TResult, TOptimistic>(submitFn, coreOptions);\n}\n"]}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "hookform-action-standalone",
+  "version": "4.0.0",
+  "description": "Standalone React adapter for hookform-action – use the same API without Next.js (Vite, Remix, Astro, SPAs).",
+  "keywords": [
+    "react",
+    "react-hook-form",
+    "form",
+    "validation",
+    "typescript",
+    "vite",
+    "remix",
+    "astro",
+    "standalone"
+  ],
+  "license": "MIT",
+  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gabpaesschulz/hookform-action",
+    "directory": "packages/standalone"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "hookform-action-core": "4.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": ">=7.50.0",
+    "zod": ">=3.22.0"
+  },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3",
+    "vitest": "^2.1.8",
+    "zod": "^3.24.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "biome check src/",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check-types": "tsc --noEmit"
+  }
+}