@paragrav/rhf-utils 0.0.116 → 0.0.118

package/README.md

@@ -14,8 +14,6 @@ To configure, create a file `config.tsx` with desired configuration settings. Th
 
 ```tsx
 export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
-  isDevelopment: import.meta.env.DEV,
-
   // defaults -- overridable per form instance
   defaults: {
     // globally relevant subset of RHF's `UseFormProps` options
@@ -25,61 +23,63 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
 
     // RhfUtilsFormOptions (see further below)
     utils: {
-      // enable dev tool
-      devTool: true,
+      // enable dev tool on dev env
+      devTool: import.meta.env.DEV,
     },
   },
 
   // optional (defaults to primitive HTML form)
   FormComponent: Form.Root,
 
+  // optional wrapper to inject your own hooks and components
+  // `children` prop is provided by RhfUtilsZodForm's Children prop
+  FormChildren: (
+    // UseRhfUtilsFormChildrenProps
+    {
+      formId, //          unique id string
+      formRef, //         ref
+      context, //         rhf UseFormReturn
+      options, //         RhfUtilsFormOptions
+      Controller, //      strictly-typed controller
+      FormSubmitError, // strictly-typed error class
+      children, //        RhfUtilsZodForm.Children
+    },
+  ) => {
+    // navigation blocker (using custom option)
+    useFormRouterBlocker(!!options?.prompter);
+
+    return (
+      <>
+        {/* specific form children -- e.g., fields, etc. */}
+        {children}
+
+        {/* global error list */}
+        <RootErrorsListFromFlatFieldErrorsContext />
+      </>
+    );
+  },
+
   // non-FormSubmitError throw in onSubmit
-  // use case: transform backend error
+  // example use case: transform backend error
   onSubmitUnknownError: (
     error, // unknown
   ) => {
     // if other error, re-throw to handle in ErrorBoundary
     if (!(error instanceof MyServerError)) throw error;
 
-    // return to be merged into RHF context errors
+    // return FormSubmitErrors object to be merged into RHF context errors
     return transformServerErrorToFormSubmitErrors(error);
   },
 
-  Children: {
-    top: (
-      // UseRhfUtilsFormChildrenProps
-      {
-        formId, //          unique id string
-        formRef, //         ref
-        context, //         rhf UseFormReturn
-        options, //         RhfUtilsFormOptions
-        Controller, //      strongly-typed controller
-        FormSubmitError, // strongly-typed error class
-      },
-    ) => {
-      // navigation blocker (using custom option)
-      useFormRouterBlocker(!!options?.prompter);
-
-      return null;
-    },
-
-    bottom: () => (
-      <>
-        {/* global error list */}
-        <RootErrorsListFromFlatFieldErrorsContext />
-      </>
-    ),
-  },
-
   errors: {
     output: {
       // callback to determine when to output form context errors to console ("debug" or "error")
-      console: ({ isDevelopment, hasOrphans }) =>
-        (hasOrphans && { type: 'error' }) || // report all orphan errors
-        (isDevelopment && { type: 'debug' }), // facilitate debugging on dev
+      console: ({ hasOrphans }) =>
+        (hasOrphans && { type: 'error' }) || // console error for reporting on prod
+        (import.meta.env.DEV && { type: 'debug' }), // facilitate debugging on dev
 
       // callback to determine when to throw an error based on context
-      throw: ({ isDevelopment, hasOrphans }) => isDevelopment && hasOrphans,
+      throw: ({ hasOrphans }) => import.meta.env.DEV && hasOrphans,
     },
   },
 };
@@ -108,7 +108,7 @@ Currently, only `zod` is supported.
   // submit handler
   onSubmit={async (
     data, //    schema output
-    context, // UseRhfUtilsFormOnSubmitContext (form id, form ref, context (rhf), utils options, strongly-typed FormSubmitError class)
+    context, // UseRhfUtilsFormOnSubmitContext (form id, form ref, context (rhf), utils options, strictly-typed FormSubmitError class)
     event, //   SubmitEvent
   ) => {
     await authLoginService(data);
@@ -129,12 +129,12 @@ Currently, only `zod` is supported.
     formRef, //         ref
     context, //         rhf UseFormReturn
     options, //         RhfUtilsFormOptions
-    Controller, //      strongly-typed controller
-    FormSubmitError, // strongly-typed error class
+    Controller, //      strictly-typed controller
+    FormSubmitError, // strictly-typed error class
   }) => (
     <>
       <Controller
-        name="email" // strongly-typed field name
+        name="email" // strictly-typed field name
         render={({ field, formState: { isSubmitting } }) => (
           <label>
             Email
@@ -161,9 +161,9 @@ function Children({...}: RhfUtilsUseFormChildrenZodProps<typeof schema>) { }
 
 ## `FormSubmitError`
 
-This is an `Error`-based class you can use to throw a structured error in your submit handler. It is strongly-typed, so it only allows field names in schema and `root`/`root.{string}` keys.
+This is an `Error`-based class you can use to throw a structured error in your submit handler. It is strictly-typed, so it only allows field names from your schema and `root`/`root.{string}` keys.
 
-It uses `FormSubmitErrors` shape, which is a flat (dot notation) equivalent of RHF's `FieldErrors`.
+It uses `FormSubmitErrors` type's structure, which is a flat, simplified version of RHF's `FieldErrors`.
 
 Example:
 
@@ -192,8 +192,7 @@ These options can be set globally and/or per form.
 ```ts
 type RhfUtilsFormOptions = {
   /**
-   * Control visibility of certain items via your own classes and styles.
-   * (Defaults merged with individual class names.)
+   * Style via your own classes.
    */
   classNames?: string[];
 
@@ -207,11 +206,12 @@ type RhfUtilsFormOptions = {
   stopSubmitPropagation?: boolean;
 
   /** Reset form after successful submit. */
-  resetFormAfterSubmitSuccessful?: Parameters<
-    typeof useResetFormAfterSubmitSuccessful
-  >[0];
+  resetFormAfterSubmitSuccessful?: UseResetFormAfterSubmitSuccessfulOptions;
 
-  /** Control dev tool options. (Lazy-loaded when `isDevelopment` is `true` and truthy value supplied. Zero bundle size in prod.) */
+  /**
+   * Control dev tool options.
+   * (Lazy-loaded when truthy value supplied.)
+   */
   devTool?: true | Pick<DevtoolUIProps, 'placement' | 'styles'>;
 };
 ```
@@ -261,10 +261,10 @@ Alternatively, you can use `FormErrorMessageByPath` to display error message to
 
 Example use case: Field array with minimum items. (When there are no items, the error is not associated with a field and is displayed separately.)
 
-Orphans are optionally exposed in a few places.
+Orphans are exposed in a few places.
 
-- In errors outputted via console. (Configured via `RhfUtilsClientConfig['errors']['output']`.)
-- And `useFlatFieldErrorsContext()` hook, which returns an object with divided into `all`, `root`, and `orphans` errors.
+- In errors outputted via console. (Configurable via `RhfUtilsClientConfig['errors']['output']`.)
+- And `useFlatFieldErrorsContext()` hook, which returns an object with errors grouped by `all`, `fields`, `root`, and `orphans`.
 - Boolean value from `useFlatFieldErrorsContextHasOnlyOrphans`.
 
 `FlatFieldErrors` is a flattened, simplified version of RHF's `FieldErrors`. Keys represent field paths flattened to dot notation.

package/dist/esm/client/config/useRhfUtilsClientConfigContext.mjs

@@ -1,10 +1,9 @@
-import t from "../../utils/createContext.mjs";
-const [
-  o,
-  ,
-  i
-] = t();
+import e from "../../utils/createContext.mjs";
+const {
+  Provider: o,
+  useMaybe: i
+} = e();
 export {
-  i as _RhfUtilsClientConfigContextProvider,
-  o as default
+  o as _RhfUtilsClientConfigContextProvider,
+  i as default
 };

package/dist/esm/client/index.mjs

@@ -4,28 +4,26 @@ import d from "../form/useRhfUtilsForm.mjs";
 const R = (e) => (r) => {
   const m = F(e, r);
   return {
-    useForm: (i, s) => {
-      const t = m(i, s);
+    useForm: (o, s) => {
+      const t = m(o, s);
       return {
         ...d(t),
-        FormWithProviders: ({
-          children: o
-        }) => /* @__PURE__ */ h(f, { ...t, children: o })
+        FormWithProviders: () => /* @__PURE__ */ h(f, { ...t })
       };
     },
     FormWithProviders: a(e, r)
   };
-}, F = (e, r) => function(i, s) {
-  var t, o, l, n, u;
+}, F = (e, r) => function(o, s) {
+  var t, i, l, n, u;
   return {
     ...s,
     rhf: {
       ...(t = r.defaults) == null ? void 0 : t.rhf,
       ...s.rhf,
-      resolver: e(i)
+      resolver: e(o)
     },
     utils: {
-      ...(o = r.defaults) == null ? void 0 : o.utils,
+      ...(i = r.defaults) == null ? void 0 : i.utils,
       ...s.utils,
       classNames: [
         ...((n = (l = r.defaults) == null ? void 0 : l.utils) == null ? void 0 : n.classNames) ?? [],
@@ -34,15 +32,15 @@ const R = (e) => (r) => {
     }
   };
 }, a = (e, r) => function({
-  schema: i,
+  schema: o,
   children: s,
   ...t
 }) {
-  const o = F(e, r);
+  const i = F(e, r);
   return /* @__PURE__ */ h(
     f,
     {
-      ...o(i, t),
+      ...i(o, t),
       children: s
     }
   );

package/dist/esm/client/zod/context/useRhfUtilsClientForZodContext.mjs

@@ -1,6 +1,9 @@
-import t from "../../../utils/createContext.mjs";
-const [, e, r] = t();
+import e from "../../../utils/createContext.mjs";
+const {
+  Provider: o,
+  useRequired: r
+} = e();
 export {
-  r as _RhfUtilsClientForZodContextProvider,
-  e as default
+  o as _RhfUtilsClientForZodContextProvider,
+  r as default
 };

package/dist/esm/errors/flat/context/FlatFieldErrorsContextProvider.mjs

@@ -1,21 +1,23 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import "react";
 import { useFormState as i } from "react-hook-form";
-import l from "../../orphan/getOrphansFromFlatFieldErrors.mjs";
-import F from "../../root/getRootsFromFlatFieldErrors.mjs";
-import a from "../getFlatFieldErrors.mjs";
-import { _FormErrorsFlatContextProvider as n } from "./useFlatFieldErrorsContext.mjs";
-const g = ({
+import l from "../../getRefdFromFlatFieldErrors.mjs";
+import F from "../../orphan/getOrphansFromFlatFieldErrors.mjs";
+import a from "../../root/getRootsFromFlatFieldErrors.mjs";
+import n from "../getFlatFieldErrors.mjs";
+import { _FormErrorsFlatContextProvider as p } from "./useFlatFieldErrorsContext.mjs";
+const h = ({
   formRef: o,
   children: t
 }) => {
-  const { errors: e } = i(), r = a(e), s = {
+  const { errors: e } = i(), r = n(e), m = {
     all: r,
-    roots: F(r),
-    orphans: o.current ? l(r, o.current) : {}
+    fields: l(r),
+    roots: a(r),
+    orphans: o.current ? F(r, o.current) : {}
   };
-  return /* @__PURE__ */ m(n, { value: s, children: t });
+  return /* @__PURE__ */ s(p, { value: m, children: t });
 };
 export {
-  g as default
+  h as default
 };

package/dist/esm/errors/flat/context/useFlatFieldErrorsContext.mjs

@@ -1,6 +1,9 @@
-import t from "../../../utils/createContext.mjs";
-const [, r, e] = t(), s = r;
+import r from "../../../utils/createContext.mjs";
+const {
+  Provider: o,
+  useRequired: e
+} = r(), s = e;
 export {
-  e as _FormErrorsFlatContextProvider,
+  o as _FormErrorsFlatContextProvider,
   s as default
 };

package/dist/esm/errors/flat/context/useFlatFieldErrorsContextOutput.mjs

@@ -1,29 +1,28 @@
 import h from "react";
 import { useFormContext as E } from "react-hook-form";
-import c from "../../../utils/isEmptyObject.mjs";
+import l from "../../../utils/isEmptyObject.mjs";
 import F from "../../output/consoleErrors.mjs";
 import x from "./useFlatFieldErrorsContext.mjs";
-const g = (e) => {
-  const i = E(), o = x();
+const n = (r) => {
+  const u = E(), t = x();
   h.useEffect(() => {
-    var p, r, l, u, t, a;
-    if (c(o.all))
+    var m, a;
+    if (l(t.all))
       return;
-    const m = {
-      isDevelopment: e.isDevelopment,
-      hasOrphans: !c(o.orphans)
-    }, s = (l = (r = (p = e.errors) == null ? void 0 : p.output) == null ? void 0 : r.console) == null ? void 0 : l.call(r, m);
-    s && F(
-      s.message ?? f,
-      i.getValues(),
-      o,
-      s.type
+    const o = {
+      hasOrphans: !l(t.orphans)
+    }, e = (m = r == null ? void 0 : r.console) == null ? void 0 : m.call(r, o);
+    e && F(
+      e.message ?? p,
+      u.getValues(),
+      t,
+      e.type
     );
-    const n = (a = (t = (u = e.errors) == null ? void 0 : u.output) == null ? void 0 : t.throw) == null ? void 0 : a.call(t, m);
-    if (n)
-      throw new Error(typeof n == "string" ? n : f);
-  }, [o]);
-}, f = "Form errors";
+    const s = (a = r == null ? void 0 : r.throw) == null ? void 0 : a.call(r, o);
+    if (s)
+      throw new Error(typeof s == "string" ? s : p);
+  }, [t]);
+}, p = "Form errors";
 export {
-  g as default
+  n as default
 };

package/dist/esm/errors/getRefdFromFlatFieldErrors.mjs

@@ -0,0 +1,8 @@
+import r from "./flat/filterFlatFieldErrors.mjs";
+import t from "./isFlatFieldErrorEntryRefd.mjs";
+const l = r(
+  t
+);
+export {
+  l as default
+};

package/dist/esm/errors/isFlatFieldErrorEntryRefd.mjs

@@ -0,0 +1,5 @@
+import e from "./isFieldErrorRefd.mjs";
+const t = ([, r]) => e(r);
+export {
+  t as default
+};

package/dist/esm/form/Form.mjs

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

package/dist/esm/form/FormWithProviders.mjs

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

package/dist/esm/form/context/group/index.mjs

@@ -1,11 +1,11 @@
-import o from "../../../utils/createContext.mjs";
-const [
-  t,
-  e,
-  m
-] = o();
+import e from "../../../utils/createContext.mjs";
+const {
+  Provider: r,
+  useRequired: t,
+  useMaybe: u
+} = e();
 export {
-  m as _FormGroupContextProvider,
-  e as _useFormGroupContext,
-  t as _useFormGroupContextMaybe
+  r as _FormGroupContextProvider,
+  t as _useFormGroupContext,
+  u as _useFormGroupContextMaybe
 };

package/dist/esm/form/context/utils/RhfUtilsContextProvider.mjs

@@ -1,33 +1,30 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import C from "../../../client/config/useRhfUtilsClientConfigContext.mjs";
 import F from "../../../errors/flat/context/useFlatFieldErrorsContextOutput.mjs";
 import x from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
 import O from "../../../submit/useResetFormOnSubmitError.mjs";
 import b from "../../../submit/useResetFormOnSubmitSuccessful.mjs";
 import h from "../../../submit/useSubmitFormOnChange.mjs";
-import { _RhfUtilsContextProvider as v } from "./useRhfUtilsContext.mjs";
-const y = ({
-  formId: l,
+import { _RhfUtilsContextProvider as d } from "./useRhfUtilsContext.mjs";
+const M = ({
+  formId: a,
   formRef: t,
-  onSubmitSuccessfulAndReset: m,
+  onSubmitSuccessfulAndReset: e,
   options: r,
-  children: a
+  children: f
 }) => {
   var u;
-  const e = C();
-  return F({
-    ...(u = e == null ? void 0 : e.errors) == null ? void 0 : u.output,
-    isDevelopment: e == null ? void 0 : e.isDevelopment
-  }), h(t, {
+  const m = C();
+  return F((u = m == null ? void 0 : m.errors) == null ? void 0 : u.output), h(t, {
     disabled: !(r != null && r.submitOnChange)
   }), O({
     disabled: !(r != null && r.resetValuesOnSubmitError)
   }), b(
-    (r == null ? void 0 : r.resetFormAfterSubmitSuccessful) || !!m
+    (r == null ? void 0 : r.resetFormAfterSubmitSuccessful) || !!e
   ), x(() => {
-    m == null || m();
-  }), /* @__PURE__ */ f(v, { value: { formId: l, formRef: t, options: r }, children: a });
+    e == null || e();
+  }), /* @__PURE__ */ l(d, { value: { formId: a, formRef: t, options: r }, children: f });
 };
 export {
-  y as default
+  M as default
 };

package/dist/esm/form/context/utils/useRhfUtilsContext.mjs

@@ -1,6 +1,6 @@
 import t from "../../../utils/createContext.mjs";
-const [, e, n] = t(), o = e, f = o;
+const { Provider: r, useRequired: e } = t(), o = e, i = o;
 export {
-  n as _RhfUtilsContextProvider,
-  f as default
+  r as _RhfUtilsContextProvider,
+  i as default
 };

package/dist/esm/utils/createContext.mjs

@@ -1,13 +1,17 @@
 import r from "react";
-function u() {
-  const t = r.createContext(void 0), e = () => r.useContext(t);
-  return [e, () => {
-    const o = e();
+function i() {
+  const e = r.createContext(void 0), t = () => r.useContext(e), n = () => {
+    const o = t();
     if (o === void 0)
       throw new Error();
     return o;
-  }, t.Provider];
+  };
+  return {
+    Provider: e.Provider,
+    useMaybe: t,
+    useRequired: n
+  };
 }
 export {
-  u as default
+  i as default
 };

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

@@ -1,7 +1,7 @@
 import { UseFormProps } from 'react-hook-form';
 import { FlatFieldErrorsOutputConfig } from '../../errors/flat/context/FlatFieldErrorsOutputConfig';
-import { FormChildrenSlots } from '../../form/Form';
 import { RhfUtilsFormOptions } from '../../form/RhfUtilsFormOptions';
+import { SafeFieldValues } from '../../form/SafeFieldValues';
 import { UseRhfUtilsFormChildrenProps } from '../../form/UseRhfUtilsFormChildrenProps';
 import { FormSubmitErrors } from '../../submit/error/FormSubmitErrors';
 
@@ -11,10 +11,6 @@ import { FormSubmitErrors } from '../../submit/error/FormSubmitErrors';
  * Options under `defaults` can be overridden at form level.
  */
 export type RhfUtilsClientConfig = {
-    /**
-     * Some behavior is dependent on environment.
-     */
-    isDevelopment?: boolean;
     /**
      * Default options for all forms. (Are overridden by form-specific options.)
      */
@@ -26,9 +22,9 @@ export type RhfUtilsClientConfig = {
          */
         rhf?: Pick<UseFormProps, 'mode' | 'reValidateMode' | 'resetOptions' | 'context' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'progressive' | 'criteriaMode' | 'delayError'>;
         /**
-         * Default global options settings.
+         * Global settings and defaults.
          *
-         * Extend this type to inject custom options/functionality via `Children` component.
+         * (Extend this type via `Register` type to inject custom options/functionality via `Children` component.)
          */
         utils?: RhfUtilsFormOptions;
     };
@@ -38,6 +34,14 @@ export type RhfUtilsClientConfig = {
      * By default, a primitive `<form>` element is used.
      */
     FormComponent?: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLFormElement>>>;
+    /**
+     * Wrap all form bodies with your own hooks, components, etc.
+     *
+     * Use cases:
+     * - custom hooks/behaviors based on `options`
+     * - shared header, footer
+     */
+    FormChildren?: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(props: React.PropsWithChildren<UseRhfUtilsFormChildrenProps<TFieldValues, TTransformedValues>>) => React.ReactNode;
     /**
      * Global submit error handler when/if submit handler throws an error other than {@link FormSubmitError}.
      *
@@ -49,14 +53,6 @@ export type RhfUtilsClientConfig = {
      * - if `undefined`: do nothing.
      */
     onSubmitUnknownError?: (error: unknown) => FormSubmitErrors | undefined;
-    /**
-     * Components injected by slot across all forms.
-     * (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<UseRhfUtilsFormChildrenProps>>>;
     errors?: {
         /**
          * Configure how/if errors should be outputted.

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

@@ -1,5 +1,5 @@
 import { RhfUtilsClientConfig } from './RhfUtilsClientConfig';
 
-declare const useRhfUtilsClientConfigMaybeContext: () => RhfUtilsClientConfig | undefined, _RhfUtilsClientConfigContextProvider: import('react').Provider<RhfUtilsClientConfig | undefined>;
+declare const _RhfUtilsClientConfigContextProvider: import('react').Provider<RhfUtilsClientConfig | undefined>, useRhfUtilsClientConfigMaybeContext: () => RhfUtilsClientConfig | undefined;
 export default useRhfUtilsClientConfigMaybeContext;
 export { _RhfUtilsClientConfigContextProvider };

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('../ZodTypeFieldValues').ZodTypeFieldValues, "_input", "_output">, _RhfUtilsClientForZodContextProvider: import('react').Provider<import('../..').CreateRhfUtilsClient<import('../ZodTypeFieldValues').ZodTypeFieldValues, "_input", "_output"> | undefined>;
+declare const _RhfUtilsClientForZodContextProvider: import('react').Provider<import('../..').CreateRhfUtilsClient<import('../ZodTypeFieldValues').ZodTypeFieldValues, "_input", "_output"> | undefined>, useRhfUtilsClientForZodContext: () => import('../..').CreateRhfUtilsClient<import('../ZodTypeFieldValues').ZodTypeFieldValues, "_input", "_output">;
 export default useRhfUtilsClientForZodContext;
 export { _RhfUtilsClientForZodContextProvider };

package/dist/types/errors/flat/context/useFlatFieldErrorsContext.d.ts

@@ -2,9 +2,10 @@ import { FlatFieldErrors } from '../types';
 
 export type FlatFieldErrorsContext = {
     all: FlatFieldErrors;
+    fields: FlatFieldErrors;
     roots: FlatFieldErrors;
     orphans: FlatFieldErrors;
 };
-declare const useFlatFieldErrorsContext: () => FlatFieldErrorsContext, _FormErrorsFlatContextProvider: import('react').Provider<FlatFieldErrorsContext | undefined>;
+declare const _FormErrorsFlatContextProvider: import('react').Provider<FlatFieldErrorsContext | undefined>, useFlatFieldErrorsContext: () => FlatFieldErrorsContext;
 export default useFlatFieldErrorsContext;
 export { _FormErrorsFlatContextProvider };

package/dist/types/errors/flat/context/useFlatFieldErrorsContextOutput.d.ts

@@ -1,7 +1,7 @@
-import { RhfUtilsClientConfig } from '../../../client/config/RhfUtilsClientConfig';
+import { FlatFieldErrorsOutputConfig } from './FlatFieldErrorsOutputConfig';
 
 /**
  * Outputs (e.g., console, throw) errors based on config.
  */
-declare const useFlatFieldErrorsContextOutput: (config: RhfUtilsClientConfig) => void;
+declare const useFlatFieldErrorsContextOutput: (config?: FlatFieldErrorsOutputConfig) => void;
 export default useFlatFieldErrorsContextOutput;

package/dist/types/errors/getRefdFromFlatFieldErrors.d.ts

@@ -0,0 +1,2 @@
+declare const getRefdFromFlatFieldErrors: (errors: import('./flat/types').FlatFieldErrors) => import('./flat/types').FlatFieldErrors;
+export default getRefdFromFlatFieldErrors;

package/dist/types/errors/isFlatFieldErrorEntryRefd.d.ts

@@ -1,7 +1,7 @@
 import { FlatFieldErrorEntry } from './flat/types';
 
 /**
- * Util wrapper for {@link isFieldErrorRefd} for usage with {@link FlatFieldErrorEntry}.
+ * Determine if {@link FieldError} is a `ref`'d field error.
  */
 declare const isFlatFieldErrorEntryRefd: ([, error]: FlatFieldErrorEntry) => boolean;
 export default isFlatFieldErrorEntryRefd;

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

@@ -3,9 +3,9 @@ import { SafeFieldValues } from './SafeFieldValues';
 import { UseRhfUtilsFormProps } from './UseRhfUtilsFormProps';
 
 export type FormChildrenSlots = 'top' | 'bottom';
-export type FormProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<{
+export type FormProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = {
     formId: string;
     formRef: React.RefObject<HTMLFormElement>;
-} & 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;
+} & 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, }: FormProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default _Form;

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

@@ -9,5 +9,5 @@ export type FormWithProvidersProps<TFieldValues extends SafeFieldValues, TTransf
  * 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;
+declare function FormWithProviders<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(props: FormWithProvidersProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default FormWithProviders;

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

@@ -1,5 +1,5 @@
 import { DevtoolUIProps } from '@hookform/devtools/dist/devToolUI';
-import { default as useResetFormAfterSubmitSuccessful } from '../submit/useResetFormOnSubmitSuccessful';
+import { UseResetFormAfterSubmitSuccessfulOptions } from '../submit/useResetFormOnSubmitSuccessful';
 import { Register } from '../register';
 
 /**
@@ -9,7 +9,7 @@ import { Register } from '../register';
  */
 export type RhfUtilsFormOptions = {
     /**
-     * Control visibility of certain items via your own classes and styles.
+     * Style via your own classes.
      * (Defaults merged with individual class names.)
      */
     classNames?: string[];
@@ -20,8 +20,12 @@ export type RhfUtilsFormOptions = {
     /** Stop propagation of submit event. Useful for portals. */
     stopSubmitPropagation?: boolean;
     /** Reset form after successful submit. */
-    resetFormAfterSubmitSuccessful?: Parameters<typeof useResetFormAfterSubmitSuccessful>[0];
-    /** Control dev tool options. (Lazy-loaded when `isDevelopment` is `true` and truthy value supplied. Zero bundle size in prod.) */
+    resetFormAfterSubmitSuccessful?: UseResetFormAfterSubmitSuccessfulOptions;
+    /**
+     * Control dev tool options.
+     * (Lazy-loaded when truthy value supplied.
+     * For zero bundle size in prod, be sure to check for dev environment.)
+     */
     devTool?: true | Pick<DevtoolUIProps, 'placement' | 'styles'>;
 } & (Register extends {
     RhfUtilsFormOptions: infer _RhfUtilsFormOptions;

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

@@ -1,10 +1,8 @@
 import { default as React } from 'react';
-import { RhfUtilsClientConfig } from '../client/config/RhfUtilsClientConfig';
 
 export type FormBaseProps = React.PropsWithChildren<React.HTMLAttributes<HTMLFormElement>> & {
+    Component?: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLFormElement>>>;
     formRef: React.RefObject<HTMLFormElement>;
-    config?: RhfUtilsClientConfig;
-    antiCsrfToken?: string;
 };
-declare const _FormBase: ({ config, formRef, antiCsrfToken, children, ...props }: FormBaseProps) => import("react/jsx-runtime").JSX.Element;
+declare const _FormBase: React.FC<FormBaseProps>;
 export default _FormBase;

package/dist/types/form/context/group/index.d.ts

@@ -12,4 +12,4 @@ export type FormGroupContext = {
         setIsBusy: (isBusy: boolean) => void;
     };
 };
-export declare const _useFormGroupContextMaybe: () => FormGroupContext | undefined, _useFormGroupContext: () => FormGroupContext, _FormGroupContextProvider: import('react').Provider<FormGroupContext | undefined>;
+export declare const _FormGroupContextProvider: import('react').Provider<FormGroupContext | undefined>, _useFormGroupContext: () => FormGroupContext, _useFormGroupContextMaybe: () => FormGroupContext | undefined;

package/dist/types/submit/useResetFormOnSubmitSuccessful.d.ts

@@ -1,7 +1,7 @@
 import { KeepStateOptions } from 'react-hook-form';
 import { SafeFieldValues } from '../form/SafeFieldValues';
 
-type Options = false | undefined | true | {
+export type UseResetFormAfterSubmitSuccessfulOptions = false | undefined | true | {
     values?: undefined | SafeFieldValues | {
         resetToCurrentValues: true;
     };
@@ -12,5 +12,5 @@ type Options = false | undefined | true | {
  * See `Rules` section: https://react-hook-form.com/api/useform/reset/
  * Specifically: "- It's recommended to reset inside useEffect after submission."
  */
-declare const useResetFormAfterSubmitSuccessful: (options: Options) => void;
+declare const useResetFormAfterSubmitSuccessful: (options: UseResetFormAfterSubmitSuccessfulOptions) => void;
 export default useResetFormAfterSubmitSuccessful;

package/dist/types/utils/createContext.d.ts

@@ -1,8 +1,12 @@
 import { default as React } from 'react';
 
 /**
- * Create a strongly-typed context that throws error if no provider is found.
+ * Create a strictly-typed context that throws error if no provider is found.
  * @returns A tuple with a function to get the context and the context provider.
  */
-declare function createContext<T = unknown>(): readonly [() => T | undefined, () => T & ({} | null), React.Provider<T | undefined>];
+declare function createContext<T = unknown>(): {
+    readonly Provider: React.Provider<T | undefined>;
+    readonly useMaybe: () => T | undefined;
+    readonly useRequired: () => T & ({} | null);
+};
 export default createContext;

package/package.json

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

package/dist/esm/form/_FormBase.mjs

@@ -1,18 +0,0 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import "react";
-const l = ({
-  config: e,
-  formRef: t,
-  antiCsrfToken: r,
-  children: o,
-  ...m
-}) => {
-  const n = (e == null ? void 0 : e.FormComponent) ?? "form";
-  return /* @__PURE__ */ p(n, { role: "form", ...m, ref: t, children: [
-    r && /* @__PURE__ */ s("input", { type: "hidden", name: "anticsrftoken", value: r }),
-    o
-  ] });
-};
-export {
-  l as default
-};