@paragrav/rhf-utils 0.0.109 → 0.0.110

package/README.md

@@ -10,12 +10,13 @@ yarn add @paragrav/rhf-utils     # yarn
 
 ## Config
 
-To configure, create a file like `src/integrations/paragrav-rhf-utils/config.tsx` with desired config. This is global configuration across all forms.
+To configure, create a file `config.tsx` with desired configuration settings. This is global configuration across all forms.
 
 ```tsx
-export const config: RhfUtilsClientConfig = {
+export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
   isDevelopment: import.meta.env.DEV,
 
+  // defaults -- overridable per form instance
   defaults: {
     // globally relevant subset of RHF's `UseFormProps` options
     rhf: {
@@ -24,9 +25,8 @@ export const config: RhfUtilsClientConfig = {
 
     // RhfUtilsFormOptions (see further below)
     utils: {
-      devTool: {
-        placement: 'top-right',
-      },
+      // enable dev tool
+      devTool: true,
     },
   },
 
@@ -47,13 +47,14 @@ export const config: RhfUtilsClientConfig = {
 
   Children: {
     top: (
+      // UseRhfUtilsFormChildrenProps
       {
         formId, //     unique id string
         formRef, //    ref
         context, //    rhf UseFormReturn
         options, //    RhfUtilsFormOptions
         Controller, // strongly-typed controller
-      }, // UseFormFieldsProps
+      },
     ) => {
       // navigation blocker (using custom option)
       useFormRouterBlocker(!!options?.prompter);
@@ -88,11 +89,13 @@ export const config: RhfUtilsClientConfig = {
 And add the context provider to your stack:
 
 ```tsx
-<RhfUtilsClientForZodContextProvider config={config}>
+<RhfUtilsClientForZodContextProvider config={rhfUtilsClientConfig}>
   {children}
 </RhfUtilsClientForZodContextProvider>
 ```
 
+Currently, only `zod` is supported.
+
 ## Usage
 
 ```tsx
@@ -114,16 +117,15 @@ And add the context provider to your stack:
   }) => {
     onError(error);
   }}
-  // fields
-  Fields={(
-    {
-      formId, //     unique id string
-      formRef, //    ref
-      context, //    rhf UseFormReturn
-      options, //    RhfUtilsFormOptions
-      Controller, // strongly-typed controller
-    }, // UseFormFieldsProps
-  ) => (
+  // children/fields
+  Children={({
+    // UseRhfUtilsFormChildrenProps
+    formId, //     unique id string
+    formRef, //    ref
+    context, //    rhf UseFormReturn
+    options, //    RhfUtilsFormOptions
+    Controller, // strongly-typed controller
+  }) => (
     <>
       <Controller
         name="email" // strongly-typed field name
@@ -144,7 +146,13 @@ And add the context provider to your stack:
 />
 ```
 
-`Fields` is a component which is rendered as a child of the form. It receives `UseFormFieldsProps` as props, including type-safe `Controller`.
+`Children` is a component which is rendered as a child of the form. It receives `UseRhfUtilsFormChildrenProps` as props, including type-safe `Controller`.
+
+If you prefer to define your `Children` component as standalone:
+
+```tsx
+const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = () => {};
+```
 
 ## `RhfUtilsFormOptions`
 
@@ -172,14 +180,14 @@ type RhfUtilsFormOptions = {
     typeof useResetFormAfterSubmitSuccessful
   >[0];
 
-  /** Control dev tool options. */
-  devTool?: Pick<DevtoolUIProps, 'placement' | 'styles'> | 'disabled';
+  /** Control dev tool options. (Lazy-loaded when `isDevelopment` is `true` and truthy value supplied. Zero bundle size in prod.) */
+  devTool?: true | Pick<DevtoolUIProps, 'placement' | 'styles'>;
 };
 ```
 
 ## Extend `RhfUtilsFormOptions`
 
-Extend `RhfUtilsFormOptions` with custom options, which get passed to `Fields` component in `options` prop.
+Extend `RhfUtilsFormOptions` with custom options, which get passed to `Children` component in `options` prop.
 
 ```tsx
 import '@paragrav/rhf-utils';

package/dist/esm/src/client/index.mjs

@@ -1,25 +1,22 @@
 import { jsx as h } from "react/jsx-runtime";
-import F from "../form/FormWithProviders.mjs";
-import f from "../form/useForm.mjs";
-const W = (e) => (r) => {
-  const m = d(
-    e,
-    r
-  );
+import f from "../form/FormWithProviders.mjs";
+import d from "../form/useRhfUtilsForm.mjs";
+const R = (e) => (r) => {
+  const m = F(e, r);
   return {
     useForm: (i, s) => {
       const t = m(i, s);
       return {
-        ...f(t),
+        ...d(t),
         FormWithProviders: ({
           children: o
-        }) => /* @__PURE__ */ h(F, { ...t, children: o })
+        }) => /* @__PURE__ */ h(f, { ...t, children: o })
       };
     },
     FormWithProviders: a(e, r)
   };
-}, d = (e, r) => function(i, s) {
-  var t, o, n, u, l;
+}, F = (e, r) => function(i, s) {
+  var t, o, l, n, u;
   return {
     ...s,
     rhf: {
@@ -31,8 +28,8 @@ const W = (e) => (r) => {
       ...(o = r.defaults) == null ? void 0 : o.utils,
       ...s.utils,
       classNames: [
-        ...((u = (n = r.defaults) == null ? void 0 : n.utils) == null ? void 0 : u.classNames) ?? [],
-        ...((l = s.utils) == null ? void 0 : l.classNames) ?? []
+        ...((n = (l = r.defaults) == null ? void 0 : l.utils) == null ? void 0 : n.classNames) ?? [],
+        ...((u = s.utils) == null ? void 0 : u.classNames) ?? []
       ]
     }
   };
@@ -41,9 +38,9 @@ const W = (e) => (r) => {
   children: s,
   ...t
 }) {
-  const o = d(e, r);
+  const o = F(e, r);
   return /* @__PURE__ */ h(
-    F,
+    f,
     {
       ...o(i, t),
       children: s
@@ -51,5 +48,5 @@ const W = (e) => (r) => {
   );
 };
 export {
-  W as createRhfUtilsClient
+  R as createRhfUtilsClient
 };

package/dist/esm/src/client/zod/createRhfUtilsClientForZod.mjs

@@ -1,7 +1,6 @@
 import { zodResolver as t } from "@hookform/resolvers/zod";
-import "zod";
-import { createRhfUtilsClient as o } from "../index.mjs";
-const l = o(t);
+import { createRhfUtilsClient as e } from "../index.mjs";
+const i = e(t);
 export {
-  l as default
+  i as default
 };

package/dist/esm/src/devtool/LazyDevTool.mjs

@@ -5,10 +5,7 @@ const a = e.lazy(
   () => import("@hookform/devtools").then((o) => ({
     default: o.DevTool
   }))
-), s = ({
-  isDevelopment: o,
-  ...l
-}) => {
+), s = ({ isDevelopment: o, props: l }) => {
   if (!o)
     return null;
   const { control: r } = n();

package/dist/esm/src/exports.mjs

@@ -1,24 +1,24 @@
 import { default as e } from "./client/zod/context/RhfUtilsClientForZodContextProvider.mjs";
-import { default as a } from "./client/zod/context/useRhfUtilsClientForZodContext.mjs";
+import { default as s } from "./client/zod/context/useRhfUtilsClientForZodContext.mjs";
 import { default as f } from "./client/zod/context/useRhfUtilsZodForm.mjs";
 import { default as u } from "./client/zod/RhfUtilsZodForm.mjs";
 import { default as d } from "./devtool/LazyDevTool.mjs";
 import { default as x } from "./errors/flat/context/useFlatFieldErrorsContext.mjs";
 import { default as i } from "./errors/flat/FlatFieldErrorsList.mjs";
 import { default as E } from "./errors/message/FormErrorMessage.mjs";
-import { default as h } from "./errors/message/FormErrorMessageByPath.mjs";
+import { default as C } from "./errors/message/FormErrorMessageByPath.mjs";
 import { default as y } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
 import { default as M } from "./errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.mjs";
 import { default as T } from "./errors/orphan/useFormHasOnlyOrphanFieldErrorsMemo.mjs";
 import { default as I } from "./errors/orphan/useOrphanFormErrorsMemo.mjs";
-import { default as k } from "./errors/root/RootErrorsListFromFlatFieldErrorsContext.mjs";
-import { default as O } from "./errors/root/useRootFormFieldErrorsMemo.mjs";
-import { getOnSubmitTrpcClientErrorHandler as g } from "./errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs";
+import { default as R } from "./errors/root/RootErrorsListFromFlatFieldErrorsContext.mjs";
+import { default as B } from "./errors/root/useRootFormFieldErrorsMemo.mjs";
+import { getOnSubmitTrpcClientErrorHandler as U } from "./errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs";
 import { trpcClientErrorToFormSubmitErrorsSchemaTransformer as v } from "./errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs";
 import { default as A } from "./errors/useFormErrorsEffect.mjs";
 import { default as L } from "./errors/useFormErrorsIfAny.mjs";
 import { default as N } from "./form/FormWithProviders.mjs";
-import { default as W } from "./form/useForm.mjs";
+import { default as W } from "./form/useRhfUtilsForm.mjs";
 import { default as q } from "./form/context/utils/useFormUtilsContext.mjs";
 import { default as J } from "./form/context/group/FormGroupContextProvider.mjs";
 import { default as Q } from "./form/context/group/useFormGroupChildIsMountedTracker.mjs";
@@ -26,7 +26,7 @@ import { default as X } from "./form/context/group/useFormGroupChildIsSubmitting
 import { default as _ } from "./form/context/group/useFormGroupChildTracker.mjs";
 import { default as rr } from "./form/context/group/useFormGroupIsAnyBusy.mjs";
 import { default as er } from "./form/context/group/useFormGroupIsChildBusy.mjs";
-import { default as ar } from "./form/context/group/useFormGroupIsParentBusy.mjs";
+import { default as sr } from "./form/context/group/useFormGroupIsParentBusy.mjs";
 import { default as fr } from "./form/context/group/useFormGroupParentTracker.mjs";
 import { default as ur } from "./form/context/group/useFormOrParentIsBusy.mjs";
 import { default as dr } from "./form/utils/getSubmitterButtonData.mjs";
@@ -35,7 +35,7 @@ import { default as ir } from "./submit/useFormOnSubmitSuccessful.mjs";
 export {
   i as FlatFieldErrorsList,
   E as FormErrorMessage,
-  h as FormErrorMessageByPath,
+  C as FormErrorMessageByPath,
   J as FormGroupContextProvider,
   y as FormNonFieldErrorMarker,
   M as FormNonFieldErrorMarkerHtmlAttribute,
@@ -44,12 +44,11 @@ export {
   d as LazyDevTool,
   e as RhfUtilsClientForZodContextProvider,
   u as RhfUtilsZodForm,
-  k as RootErrorsListFromFlatFieldErrorsContext,
-  g as getOnSubmitTrpcClientErrorHandler,
+  R as RootErrorsListFromFlatFieldErrorsContext,
+  U as getOnSubmitTrpcClientErrorHandler,
   dr as getSubmitterButtonData,
   v as trpcClientErrorToFormSubmitErrorsSchemaTransformer,
   x as useFlatFieldErrorsContext,
-  W as useForm,
   A as useFormErrorsEffect,
   L as useFormErrorsIfAny,
   Q as useFormGroupChildIsMountedTracker,
@@ -57,14 +56,15 @@ export {
   _ as useFormGroupChildTracker,
   rr as useFormGroupIsAnyBusy,
   er as useFormGroupIsChildBusy,
-  ar as useFormGroupIsParentBusy,
+  sr as useFormGroupIsParentBusy,
   fr as useFormGroupParentTracker,
   T as useFormHasOnlyOrphanFieldErrorsMemo,
   ir as useFormOnSubmitSuccessful,
   ur as useFormOrParentIsBusy,
   q as useFormUtilsContext,
   I as useOrphanFormErrorsMemo,
-  a as useRhfUtilsClientForZodContext,
+  s as useRhfUtilsClientForZodContext,
+  W as useRhfUtilsForm,
   f as useRhfUtilsZodForm,
-  O as useRootFormFieldErrorsMemo
+  B as useRootFormFieldErrorsMemo
 };

package/dist/esm/src/form/Form.mjs

@@ -1,12 +1,12 @@
-import { jsxs as F, jsx as d } from "react/jsx-runtime";
+import { jsxs as j, jsx as d } from "react/jsx-runtime";
 import "react";
-import { useFormContext as _ } from "react-hook-form";
-import j from "../client/config/useRhfUtilsClientConfigContext.mjs";
-import D from "../devtool/LazyDevTool.mjs";
-import { FormSubmitError as N } from "../submit/error/FormSubmitError.mjs";
-import P from "../submit/error/setCtxErrorsByFormSubmitErrors.mjs";
-import S from "./_Controller.mjs";
-import T from "./_FormBase.mjs";
+import { useFormContext as B } from "react-hook-form";
+import T from "../client/config/useRhfUtilsClientConfigContext.mjs";
+import _ from "../devtool/LazyDevTool.mjs";
+import { FormSubmitError as D } from "../submit/error/FormSubmitError.mjs";
+import N from "../submit/error/setCtxErrorsByFormSubmitErrors.mjs";
+import P from "./_Controller.mjs";
+import S from "./_FormBase.mjs";
 function A({
   formId: x,
   formRef: c,
@@ -14,74 +14,73 @@ function A({
   onSubmit: p,
   onSubmitError: s,
   onSubmitInvalid: y,
-  Fields: C,
+  Children: l,
   //
   form: m,
   utils: o,
   //
   children: f
 }) {
-  const a = _(), e = j(), b = async (r) => {
-    o != null && o.stopSubmitPropagation && r.stopPropagation();
+  const a = B(), t = T(), v = async (e) => {
+    o != null && o.stopSubmitPropagation && e.stopPropagation();
     try {
-      await a.handleSubmit(v, y)(r);
-    } catch (t) {
-      B(t, r);
+      await a.handleSubmit(b, y)(e);
+    } catch (r) {
+      F(r, e);
     }
-  }, v = (r, t) => p == null ? void 0 : p(
-    r,
+  }, b = (e, r) => p == null ? void 0 : p(
+    e,
     a,
-    t
-  ), B = (r, t) => {
-    var i;
-    const n = r instanceof N ? (
+    r
+  ), F = (e, r) => {
+    var h;
+    const n = e instanceof D ? (
       // consumer can manually throw FormSubmitError (e.g., manual validation)
-      r.errors
+      e.errors
     ) : (
       // if error is not FormSubmitError, consumer can provide global handler
-      (i = e == null ? void 0 : e.onSubmitError) == null ? void 0 : i.call(e, r)
+      (h = t == null ? void 0 : t.onSubmitError) == null ? void 0 : h.call(t, e)
     );
-    n && P(a, n), s == null || s(
-      r,
+    n && N(a, n), s == null || s(
+      e,
       a,
-      t
+      r
     );
-  }, h = {
+  }, i = {
     formId: x,
     formRef: c,
     context: a,
     utils: o,
-    Controller: S
-  }, l = (r) => {
+    Controller: P
+  }, C = (e) => {
     var n;
-    const t = (n = e == null ? void 0 : e.Children) == null ? void 0 : n[r];
-    return t && /* @__PURE__ */ d(t, { ...h });
+    const r = (n = t == null ? void 0 : t.Children) == null ? void 0 : n[e];
+    return r && /* @__PURE__ */ d(r, { ...i });
   };
-  return /* @__PURE__ */ F(
-    T,
+  return /* @__PURE__ */ j(
+    S,
     {
       noValidate: !0,
       style: {
         position: "relative"
       },
-      config: e,
+      config: t,
       formRef: c,
       ...m,
       className: [o == null ? void 0 : o.classNames, m == null ? void 0 : m.className].filter(Boolean).join(" "),
-      onSubmit: b,
+      onSubmit: v,
       children: [
-        l("top"),
-        (o == null ? void 0 : o.devTool) !== "disabled" && /* @__PURE__ */ d(
-          D,
+        C("top"),
+        (o == null ? void 0 : o.devTool) && /* @__PURE__ */ d(
+          _,
           {
-            placement: "top-right",
-            isDevelopment: e == null ? void 0 : e.isDevelopment,
-            ...o == null ? void 0 : o.devTool
+            isDevelopment: t == null ? void 0 : t.isDevelopment,
+            props: typeof o.devTool == "object" ? o.devTool : void 0
           }
         ),
-        C && /* @__PURE__ */ d(C, { ...h }),
+        l && /* @__PURE__ */ d(l, { ...i }),
         f,
-        l("bottom")
+        C("bottom")
       ]
     }
   );

package/dist/esm/src/form/FormWithProviders.mjs

@@ -1,14 +1,14 @@
 import { jsx as o } from "react/jsx-runtime";
 import t from "./Form.mjs";
-import e from "./FormProviders.mjs";
-import f from "./useForm.mjs";
-function u({
+import f from "./RhfUtilsFormProviders.mjs";
+import s from "./useRhfUtilsForm.mjs";
+function h({
   children: m,
   ...i
 }) {
-  const r = f(i);
-  return /* @__PURE__ */ o(e, { ...r.providerProps, children: /* @__PURE__ */ o(t, { ...r.formProps, children: m }) });
+  const r = s(i);
+  return /* @__PURE__ */ o(f, { ...r.providerProps, children: /* @__PURE__ */ o(t, { ...r.formProps, children: m }) });
 }
 export {
-  u as default
+  h as default
 };

package/dist/esm/src/form/{useForm.mjs → useRhfUtilsForm.mjs}

@@ -1,43 +1,43 @@
-import e from "react";
-import { useForm as i } from "react-hook-form";
+import m from "react";
+import { useForm as d } from "react-hook-form";
 import { FormSubmitError as F } from "../submit/error/FormSubmitError.mjs";
-const a = ({
-  onSubmit: t,
+const R = ({
+  onSubmit: e,
   onSubmitError: f,
   onSubmitInvalid: n,
   defaultValues: p,
-  Fields: c,
-  rhf: u,
-  form: d,
+  Children: c,
+  rhf: i,
+  form: u,
   utils: s
 }) => {
-  const o = e.useId(), m = i({
-    ...u,
+  const o = m.useId(), t = d({
+    ...i,
     defaultValues: p
-  }), r = e.useRef(null);
+  }), r = m.useRef(null);
   return {
     id: o,
     ref: r,
-    context: m,
+    context: t,
     providerProps: {
       formId: o,
       formRef: r,
-      rhfForm: m,
+      rhfForm: t,
       utils: s
     },
     formProps: {
-      Fields: c,
-      onSubmit: t,
+      Children: c,
+      onSubmit: e,
       onSubmitError: f,
       onSubmitInvalid: n,
       formId: o,
       formRef: r,
-      form: d,
+      form: u,
       utils: s
     },
     FormSubmitError: F
   };
-}, I = a;
+}, x = R;
 export {
-  I as default
+  x as default
 };

package/dist/types/client/config/RhfUtilsClientConfig.d.ts

@@ -2,7 +2,7 @@ import { UseFormProps } from 'react-hook-form';
 import { RhfUtilsErrorsOutputConfigContext, RhfUtilsErrorsOutputConsoleConfig } from '../../errors/output/types';
 import { FormChildrenSlots } from '../../form/Form';
 import { RhfUtilsFormOptions } from '../../form/RhfUtilsFormOptions';
-import { UseFormFieldsProps } from '../../form/useForm';
+import { UseRhfUtilsFormChildrenProps } from '../../form/UseRhfUtilsFormChildrenProps';
 import { FormSubmitErrors } from '../../submit/error/FormSubmitErrors';
 
 /**
@@ -53,12 +53,12 @@ export type RhfUtilsClientConfig = {
     onSubmitError?: (error: unknown) => FormSubmitErrors | undefined;
     /**
      * Components injected by slot across all forms.
-     * (Per-form injection can be done via Fields prop.)
+     * (Per-form injection can be done via `Children` prop.)
      *
      * - `top`: e.g., block navigation on dirty form.
      * - `bottom`: e.g., root errors list.
      */
-    Children?: Partial<Record<FormChildrenSlots, React.FC<UseFormFieldsProps>>>;
+    Children?: Partial<Record<FormChildrenSlots, React.FC<UseRhfUtilsFormChildrenProps>>>;
     errors?: {
         /**
          * Configure how/if errors should be outputted.

package/dist/types/client/index.d.ts

@@ -2,7 +2,8 @@ import { Resolver } from 'react-hook-form';
 import { RhfUtilsClientConfig } from './config/RhfUtilsClientConfig';
 import { FormWithProvidersProps } from '../form/FormWithProviders';
 import { SafeFieldValues } from '../form/SafeFieldValues';
-import { UseFormProps, UseFormReturn } from '../form/useForm';
+import { UseRhfUtilsFormProps } from '../form/UseRhfUtilsFormProps';
+import { UseRhfUtilsFormReturn } from '../form/UseRhfUtilsFormReturn';
 
 /**
  * Generic object schema type.
@@ -13,7 +14,7 @@ export type ObjectSchema<TInputKey extends string, TOutputKey extends string> =
     [key in TOutputKey]: SafeFieldValues;
 };
 export type CreateRhfUtilsClient<TObjectSchema extends ObjectSchema<TObjectSchemaInputKey, TObjectSchemaOutputKey>, TObjectSchemaInputKey extends string, TObjectSchemaOutputKey extends string> = {
-    useForm: <TSchema extends TObjectSchema, TSchemaInput extends SafeFieldValues = TSchema[TObjectSchemaInputKey], TSchemaOutput extends SafeFieldValues = TSchema[TObjectSchemaOutputKey], UseFormPropsForm extends UseFormProps<TSchemaInput, TSchemaOutput> = UseFormProps<TSchemaInput, TSchemaOutput>>(schema: TSchema, form: Omit<UseFormPropsForm, 'config'>) => UseFormReturn<TSchemaInput, TSchemaOutput> & {
+    useForm: <TSchema extends TObjectSchema, TSchemaInput extends SafeFieldValues = TSchema[TObjectSchemaInputKey], TSchemaOutput extends SafeFieldValues = TSchema[TObjectSchemaOutputKey], UseRhfUtilsFormPropsForm extends UseRhfUtilsFormProps<TSchemaInput, TSchemaOutput> = UseRhfUtilsFormProps<TSchemaInput, TSchemaOutput>>(schema: TSchema, form: Omit<UseRhfUtilsFormPropsForm, 'config'>) => UseRhfUtilsFormReturn<TSchemaInput, TSchemaOutput> & {
         FormWithProviders: React.FC<React.PropsWithChildren>;
     };
     FormWithProviders: <TSchema extends TObjectSchema, TSchemaInput extends SafeFieldValues = TSchema[TObjectSchemaInputKey], TSchemaOutput extends SafeFieldValues = TSchema[TObjectSchemaOutputKey]>(props: {

package/dist/types/client/zod/RhfUtilsUseFormChildrenZodFC.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { RhfUtilsUseFormChildrenZodProps } from './RhfUtilsUseFormChildrenZodProps';
+import { ZodTypeFieldValues } from './ZodTypeFieldValues';
+
+/**
+ * {@link React.FC} for {@link RhfUtilsUseFormChildrenZodProps}.
+ *
+ * @example
+ * ```tsx
+ * const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = () => {};
+ * ```
+ */
+export type RhfUtilsUseFormChildrenZodFC<TSchema extends ZodTypeFieldValues> = React.FC<RhfUtilsUseFormChildrenZodProps<TSchema>>;

package/dist/types/client/zod/RhfUtilsUseFormChildrenZodProps.d.ts

@@ -0,0 +1,4 @@
+import { UseRhfUtilsFormChildrenProps } from '../../form/UseRhfUtilsFormChildrenProps';
+import { ZodTypeFieldValues } from './ZodTypeFieldValues';
+
+export type RhfUtilsUseFormChildrenZodProps<TSchema extends ZodTypeFieldValues> = UseRhfUtilsFormChildrenProps<TSchema['_input'], TSchema['_output']>;

package/dist/types/client/zod/RhfUtilsZodForm.d.ts

@@ -1,8 +1,8 @@
-import { UseFormProps } from '../../form/useForm';
-import { ZodTypeFieldValues } from './createRhfUtilsClientForZod';
+import { UseRhfUtilsFormProps } from '../../form/UseRhfUtilsFormProps';
+import { ZodTypeFieldValues } from './ZodTypeFieldValues';
 
 type Props<TSchema extends ZodTypeFieldValues> = {
     schema: TSchema;
-} & Omit<UseFormProps<TSchema['_input'], TSchema['_output']>, 'config'>;
+} & Omit<UseRhfUtilsFormProps<TSchema['_input'], TSchema['_output']>, 'config'>;
 declare function RhfUtilsZodForm<TSchema extends ZodTypeFieldValues>({ schema, ...props }: Props<TSchema>): import("react/jsx-runtime").JSX.Element;
 export default RhfUtilsZodForm;

package/dist/types/client/zod/ZodTypeFieldValues.d.ts

@@ -0,0 +1,4 @@
+import { z } from 'zod';
+import { SafeFieldValues } from '../../form/SafeFieldValues';
+
+export type ZodTypeFieldValues = z.ZodType<SafeFieldValues>;

package/dist/types/client/zod/context/useRhfUtilsClientForZodContext.d.ts

@@ -1,6 +1,6 @@
 import { default as createRhfUtilsClientForZod } from '../createRhfUtilsClientForZod';
 
 export type RhfUtilsClientForZodContext = ReturnType<typeof createRhfUtilsClientForZod>;
-declare const useRhfUtilsClientForZodContext: () => import('../..').CreateRhfUtilsClient<import('../createRhfUtilsClientForZod').ZodTypeFieldValues, "_input", "_output">, _RhfUtilsClientForZodContextProvider: import('react').Provider<import('../..').CreateRhfUtilsClient<import('../createRhfUtilsClientForZod').ZodTypeFieldValues, "_input", "_output"> | undefined>;
+declare const useRhfUtilsClientForZodContext: () => import('../..').CreateRhfUtilsClient<import('../ZodTypeFieldValues').ZodTypeFieldValues, "_input", "_output">, _RhfUtilsClientForZodContextProvider: import('react').Provider<import('../..').CreateRhfUtilsClient<import('../ZodTypeFieldValues').ZodTypeFieldValues, "_input", "_output"> | undefined>;
 export default useRhfUtilsClientForZodContext;
 export { _RhfUtilsClientForZodContextProvider };

package/dist/types/client/zod/context/useRhfUtilsZodForm.d.ts

@@ -1,7 +1,7 @@
-import { UseFormProps } from '../../../form/useForm';
-import { ZodTypeFieldValues } from '../createRhfUtilsClientForZod';
+import { UseRhfUtilsFormProps } from '../../../form/UseRhfUtilsFormProps';
+import { ZodTypeFieldValues } from '../ZodTypeFieldValues';
 
-declare const useRhfUtilsZodForm: <TSchema extends ZodTypeFieldValues>(schema: TSchema, form: Omit<UseFormProps<TSchema['_input'], TSchema['_output']>, 'config'>) => import('../../../form/useForm').UseFormReturn<TSchema["_input"], TSchema["_output"]> & {
+declare const useRhfUtilsZodForm: <TSchema extends ZodTypeFieldValues>(schema: TSchema, form: Omit<UseRhfUtilsFormProps<TSchema['_input'], TSchema['_output']>, 'config'>) => import('../../../form/UseRhfUtilsFormReturn').UseRhfUtilsFormReturn<TSchema["_input"], TSchema["_output"]> & {
     FormWithProviders: import('react').FC<{
         children?: import('react').ReactNode;
     }>;

package/dist/types/client/zod/createRhfUtilsClientForZod.d.ts

@@ -1,6 +1,4 @@
-import { z } from 'zod';
-import { SafeFieldValues } from '../../form/SafeFieldValues';
+import { ZodTypeFieldValues } from './ZodTypeFieldValues';
 
-export type ZodTypeFieldValues = z.ZodType<SafeFieldValues>;
 declare const createRhfUtilsClientForZod: (config: import('../config/RhfUtilsClientConfig').RhfUtilsClientConfig) => import('..').CreateRhfUtilsClient<ZodTypeFieldValues, "_input", "_output">;
 export default createRhfUtilsClientForZod;

package/dist/types/devtool/LazyDevTool.d.ts

@@ -1,8 +1,9 @@
 import { DevtoolUIProps } from '@hookform/devtools/dist/devToolUI';
 import { default as React } from 'react';
 
-export type LazyDevToolProps = Omit<DevtoolUIProps, 'control'> & {
+type LazyDevToolProps = {
     isDevelopment?: boolean;
+    props?: Omit<DevtoolUIProps, 'control'>;
 };
 /**
  * Lazy-loaded RHF DevTool.

package/dist/types/exports.d.ts

@@ -3,8 +3,9 @@ export type { RhfUtilsClientConfig } from './client/config/RhfUtilsClientConfig'
 export { default as RhfUtilsClientForZodContextProvider } from './client/zod/context/RhfUtilsClientForZodContextProvider';
 export { default as useRhfUtilsClientForZodContext } from './client/zod/context/useRhfUtilsClientForZodContext';
 export { default as useRhfUtilsZodForm } from './client/zod/context/useRhfUtilsZodForm';
+export type { RhfUtilsUseFormChildrenZodFC } from './client/zod/RhfUtilsUseFormChildrenZodFC';
+export type { RhfUtilsUseFormChildrenZodProps } from './client/zod/RhfUtilsUseFormChildrenZodProps';
 export { default as RhfUtilsZodForm } from './client/zod/RhfUtilsZodForm';
-export type { UseFormFieldsZodProps } from './client/zod/UseFormFieldsZodProps';
 export { default as LazyDevTool } from './devtool/LazyDevTool';
 export { default as useFlatFieldErrorsContext } from './errors/flat/context/useFlatFieldErrorsContext';
 export { default as FlatFieldErrorsList } from './errors/flat/FlatFieldErrorsList';
@@ -23,8 +24,8 @@ export { default as useFormErrorsIfAny } from './errors/useFormErrorsIfAny';
 export { default as FormWithProviders } from './form/FormWithProviders';
 export type { RhfUtilsFormOptions } from './form/RhfUtilsFormOptions';
 export type { SafeFieldValues } from './form/SafeFieldValues';
-export type { UseFormFieldsProps } from './form/useForm';
-export { default as useForm } from './form/useForm';
+export { default as useRhfUtilsForm } from './form/useRhfUtilsForm';
+export type { UseRhfUtilsFormChildrenProps } from './form/UseRhfUtilsFormChildrenProps';
 export { default as useFormUtilsContext } from './form/context/utils/useFormUtilsContext';
 export { default as FormGroupContextProvider } from './form/context/group/FormGroupContextProvider';
 export { default as useFormGroupChildIsMountedTracker } from './form/context/group/useFormGroupChildIsMountedTracker';

package/dist/types/form/Form.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
 import { SafeFieldValues } from './SafeFieldValues';
-import { UseFormProps } from './useForm';
+import { UseRhfUtilsFormProps } from './UseRhfUtilsFormProps';
 
 export type FormChildrenSlots = 'top' | 'bottom';
 export type FormProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<{
     formId: string;
     formRef: React.RefObject<HTMLFormElement>;
-} & Pick<UseFormProps<TFieldValues, TTransformedValues>, 'onSubmit' | 'onSubmitError' | 'onSubmitInvalid' | 'Fields' | 'form' | 'utils'>>;
-declare function _Form<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ formId, formRef, onSubmit, onSubmitError, onSubmitInvalid, Fields, form, utils, children, }: FormProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+} & Pick<UseRhfUtilsFormProps<TFieldValues, TTransformedValues>, 'onSubmit' | 'onSubmitError' | 'onSubmitInvalid' | 'Children' | 'form' | 'utils'>>;
+declare function _Form<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ formId, formRef, onSubmit, onSubmitError, onSubmitInvalid, Children, form, utils, children, }: FormProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default _Form;

package/dist/types/form/FormWithProviders.d.ts

@@ -1,12 +1,12 @@
 import { SafeFieldValues } from './SafeFieldValues';
-import { UseFormProps } from './useForm';
+import { UseRhfUtilsFormProps } from './UseRhfUtilsFormProps';
 
-export type FormWithProvidersProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<UseFormProps<TFieldValues, TTransformedValues>>;
+export type FormWithProvidersProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<UseRhfUtilsFormProps<TFieldValues, TTransformedValues>>;
 /**
  * Form providers (with utils) with immediate descendent {@link Form}.
- * (Syntactic sugar for {@link useForm}. Use this for most applications.)
+ * (Syntactic sugar for {@link useRhfUtilsForm}. Use this for most applications.)
  *
- * Use {@link useForm} if you need to specific nesting hierarchy.
+ * Use {@link useRhfUtilsForm} if you need to specific nesting hierarchy.
  * (e.g., wrapping `<tr>` with provider and nesting `<form>` within `<td>` to appease HTML rules.)
  */
 declare function FormWithProviders<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ children, ...props }: FormWithProvidersProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;

package/dist/types/form/RhfUtilsFormOptions.d.ts

@@ -21,8 +21,8 @@ export type RhfUtilsFormOptions = {
     stopSubmitPropagation?: boolean;
     /** Reset form after successful submit. */
     resetFormAfterSubmitSuccessful?: Parameters<typeof useResetFormAfterSubmitSuccessful>[0];
-    /** Control dev tool options. */
-    devTool?: Pick<DevtoolUIProps, 'placement' | 'styles'> | 'disabled';
+    /** Control dev tool options. (Lazy-loaded when `isDevelopment` is `true` and truthy value supplied. Zero bundle size in prod.) */
+    devTool?: true | Pick<DevtoolUIProps, 'placement' | 'styles'>;
 } & (Register extends {
     RhfUtilsFormOptions: infer _RhfUtilsFormOptions;
 } ? _RhfUtilsFormOptions : {});

package/dist/types/form/RhfUtilsFormProviders.d.ts

@@ -0,0 +1,12 @@
+import { UseFormReturn } from 'react-hook-form';
+import { RhfUtilsFormOptions } from './RhfUtilsFormOptions';
+import { SafeFieldValues } from './SafeFieldValues';
+
+export type RhfUtilsFormProvidersProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<{
+    formId: string;
+    formRef: React.RefObject<HTMLFormElement>;
+    rhfForm: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
+    utils?: RhfUtilsFormOptions;
+}>;
+declare function RhfUtilsFormProviders<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ formId, formRef, rhfForm, utils, children, }: RhfUtilsFormProvidersProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+export default RhfUtilsFormProviders;

package/dist/types/form/UseRhfUtilsFormChildrenProps.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { default as _Controller } from './_Controller';
+import { RhfUtilsFormOptions } from './RhfUtilsFormOptions';
+import { SafeFieldValues } from './SafeFieldValues';
+
+export type UseRhfUtilsFormChildrenProps<TFieldValues extends SafeFieldValues = SafeFieldValues, TTransformedValues extends SafeFieldValues = SafeFieldValues> = {
+    formId: string;
+    formRef: React.RefObject<HTMLFormElement>;
+    context: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
+    utils?: RhfUtilsFormOptions;
+    Controller: typeof _Controller<TFieldValues>;
+};

package/dist/types/form/UseRhfUtilsFormProps.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { SubmitErrorHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { RhfUtilsFormOptions } from './RhfUtilsFormOptions';
+import { SafeFieldValues } from './SafeFieldValues';
+import { UseRhfUtilsFormChildrenProps } from './UseRhfUtilsFormChildrenProps';
+
+export type UseRhfUtilsFormProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = {
+    onSubmit?: (values: TTransformedValues, context: UseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => unknown | Promise<unknown>;
+    /** Submit error handler. (Only for errors not of instance `FormError`, which are handled internally.) */
+    onSubmitError?: (error: unknown, context: UseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => void;
+    /** Submit handler when form is invalid. */
+    onSubmitInvalid?: SubmitErrorHandler<TFieldValues>;
+    defaultValues?: UseFormProps<TFieldValues>['defaultValues'];
+    Children?: React.FC<UseRhfUtilsFormChildrenProps<TFieldValues, TTransformedValues>>;
+    /** {@link RhfUseFormProps} props for RHF's {@link useForm}. */
+    rhf?: Omit<UseFormProps<TFieldValues>, 'defaultValues'>;
+    /** {@link FormProps} props for Form. */
+    form?: React.PropsWithoutRef<JSX.IntrinsicElements['form']>;
+    /** {@link RhfUtilsFormOptions} to enabled utils functionality. */
+    utils?: RhfUtilsFormOptions;
+};

package/dist/types/form/UseRhfUtilsFormReturn.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { FormSubmitError } from '../submit/error/FormSubmitError';
+import { FormProps } from './Form';
+import { RhfUtilsFormProvidersProps } from './RhfUtilsFormProviders';
+import { SafeFieldValues } from './SafeFieldValues';
+
+export type UseRhfUtilsFormReturn<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = {
+    id: string;
+    ref: React.RefObject<HTMLFormElement>;
+    context: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
+    providerProps: RhfUtilsFormProvidersProps<TFieldValues, TTransformedValues>;
+    formProps: FormProps<TFieldValues, TTransformedValues>;
+    FormSubmitError: typeof FormSubmitError<TFieldValues>;
+};

package/dist/types/form/useRhfUtilsForm.d.ts

@@ -0,0 +1,16 @@
+import { SafeFieldValues } from './SafeFieldValues';
+import { UseRhfUtilsFormProps } from './UseRhfUtilsFormProps';
+import { UseRhfUtilsFormReturn } from './UseRhfUtilsFormReturn';
+
+/**
+ * Core Rhf Form hook. Use `Form` in `index.ts` for most cases.
+ * Use this if you need to separate form components.
+ * e.g., a form for table row due to `form` being considered invalid HTML around `tr` tags.
+ * With this hook, you can wrap the `tr` tag with `form.Provider` and use `form.Form` inside
+ * one of the cells. Other components can be outside form while referring to form by its id via `form` attribute.
+ * see https://caniuse.com/?search=form%20attribute
+ * @returns Form provider and form.
+ */
+declare const useRhfUtilsForm: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ onSubmit, onSubmitError, onSubmitInvalid, defaultValues, Children, rhf, form, utils, }: UseRhfUtilsFormProps<TFieldValues, TTransformedValues>) => UseRhfUtilsFormReturn<TFieldValues, TTransformedValues>;
+export default useRhfUtilsForm;
+export type UseRhfUtilsForm<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = typeof useRhfUtilsForm<TFieldValues, TTransformedValues>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paragrav/rhf-utils",
   "author": "paragrav.dev",
   "license": "MIT",
-  "version": "0.0.109",
+  "version": "0.0.110",
   "description": "Integration utilities for react-hook-form.",
   "type": "module",
   "sideEffects": false,