@structuralists/scaffolding 0.10.0 → 0.10.2

package/src/forms/state/useFormState/deriveErrors.test.ts

@@ -0,0 +1,76 @@
+import { describe, test, expect } from 'bun:test';
+import { deriveFormErrors } from './deriveErrors';
+import { matches, notEmpty } from '../validators/validators';
+
+// Direct, React-free tests of the pure derivation: values + constraints in,
+// structured `{ path, error }[]` out. Hook-level behavior (live re-derivation
+// across renders, submit gating) stays in useFormState.test.tsx.
+
+type SignupForm = {
+  email: string | undefined;
+  nickname: string | undefined;
+};
+
+const emptyForm: SignupForm = { email: undefined, nickname: undefined };
+
+describe('deriveFormErrors', () => {
+  test('no constraints yields no errors', () => {
+    expect(deriveFormErrors(emptyForm, undefined)).toEqual([]);
+  });
+
+  test('an empty constraints object yields no errors', () => {
+    expect(deriveFormErrors(emptyForm, {})).toEqual([]);
+  });
+
+  test('a failing field contributes one path-addressed entry', () => {
+    const errors = deriveFormErrors(emptyForm, { email: notEmpty('email') });
+    expect(errors).toEqual([
+      { path: ['email'], error: "'email' cannot be empty" },
+    ]);
+  });
+
+  test('a passing field contributes nothing', () => {
+    const errors = deriveFormErrors(
+      { email: 'a@b.co', nickname: undefined },
+      { email: notEmpty('email') },
+    );
+    expect(errors).toEqual([]);
+  });
+
+  test('every failing constrained field gets its own entry', () => {
+    const errors = deriveFormErrors(emptyForm, {
+      email: notEmpty('email'),
+      nickname: notEmpty('nickname'),
+    });
+    expect(errors).toEqual([
+      { path: ['email'], error: "'email' cannot be empty" },
+      { path: ['nickname'], error: "'nickname' cannot be empty" },
+    ]);
+  });
+
+  test('a validator array runs in order with first-error-wins', () => {
+    const constraints = {
+      email: [notEmpty('email'), matches('email', /@/, 'a valid email')],
+    };
+    expect(deriveFormErrors(emptyForm, constraints)).toEqual([
+      { path: ['email'], error: "'email' cannot be empty" },
+    ]);
+    expect(
+      deriveFormErrors({ email: 'nope', nickname: undefined }, constraints),
+    ).toEqual([{ path: ['email'], error: "'email' must be a valid email" }]);
+    expect(
+      deriveFormErrors({ email: 'a@b.co', nickname: undefined }, constraints),
+    ).toEqual([]);
+  });
+
+  test('an empty validator array passes', () => {
+    expect(deriveFormErrors(emptyForm, { email: [] })).toEqual([]);
+  });
+
+  test('a null constraint entry (possible from untyped JS) is skipped', () => {
+    const constraints = { email: null } as unknown as {
+      email: (val: string | undefined) => string | null;
+    };
+    expect(deriveFormErrors(emptyForm, constraints)).toEqual([]);
+  });
+});

package/src/forms/state/useFormState/deriveErrors.ts

@@ -0,0 +1,35 @@
+import type { Path } from '../path/types';
+import type { Validations } from '../validations/types';
+import { validateEntry } from '../validations/walk';
+import type { FlatConstraintEntry } from '../validations/walk';
+import type { FormError, FormValuesObject } from './types';
+
+// The pure half of the hook's error model: current values + constraints in,
+// structured `{ path, error }[]` out. Validation is live-derived (validators
+// are pure and cheap), so this runs every render — it must stay free of
+// React and of any per-call state. `isValid` is just this list's emptiness;
+// the hook derives it inline.
+export const deriveFormErrors = <T extends FormValuesObject>(
+  values: T,
+  constraints: Validations<T> | undefined,
+): FormError<T>[] => {
+  const errors: FormError<T>[] = [];
+  if (!constraints) return errors;
+
+  for (const key of Object.keys(constraints) as (keyof T & string)[]) {
+    // No cast: if the grammar grows a constraint form the walk doesn't
+    // understand, this assignment is the compile error that says so.
+    const entry: FlatConstraintEntry | undefined = constraints[key];
+    if (entry == null) continue;
+    const failure = validateEntry(entry, values[key], [key]);
+    if (failure == null) continue;
+    // The walk returns the address it was handed, and `[key]` — a key of
+    // a constraints object type-checked against T — is a valid single-key
+    // Path<T>. TS can't compute Path<T> for an unresolved generic T, so
+    // the correlation needs the same honest widening as the keys cast
+    // above.
+    errors.push({ path: failure.path as Path<T>, error: failure.error });
+  }
+
+  return errors;
+};

package/src/forms/{useFormState → state/useFormState}/types.ts

@@ -90,7 +90,8 @@ export type FormError<T extends FormValuesObject> = {
 
 export type FormErrors<T extends FormValuesObject> = readonly FormError<T>[];
 
-// What the hook publishes to its Debugger after every commit. Snapshots are
+// What the hook publishes (via `useFormDebugger`) to its Debugger after
+// every commit. Snapshots are
 // replaced whole (never mutated) so `useSyncExternalStore` consumers can
 // rely on reference equality.
 export type FormDebugSnapshot<T extends FormValuesObject> = {

package/src/forms/state/useFormState/useFormDebugger.test.tsx

@@ -0,0 +1,57 @@
+import { afterEach, describe, test, expect } from 'bun:test';
+import { useState } from 'react';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+
+// The Debugger portals into document.body, so leftovers from a previous
+// test are visible to `screen` queries — clean up explicitly (bun:test has
+// no global afterEach for RTL's auto-cleanup to hook).
+afterEach(cleanup);
+import { useFormDebugger } from './useFormDebugger';
+
+// The debugger-plumbing boundary in isolation: the hook must hand back a
+// render-stable component wired to the latest published snapshot. The full
+// overlay behavior (open/close, live form wiring) is covered in
+// FormDebugger.test.tsx through useFormState.
+
+const Host = () => {
+  const [count, setCount] = useState(0);
+  const Debugger = useFormDebugger({
+    snapshot: {
+      values: { count },
+      errors: [],
+      isValid: true,
+      submitAttempted: false,
+    },
+  });
+
+  return (
+    <div>
+      <button type="button" onClick={() => setCount((prev) => prev + 1)}>
+        inc
+      </button>
+      <Debugger label="dbg" />
+    </div>
+  );
+};
+
+describe('useFormDebugger', () => {
+  test('returns a Debugger showing the current snapshot', () => {
+    render(<Host />);
+    fireEvent.click(screen.getByRole('button', { name: 'dbg' }));
+
+    expect(screen.getByText('count')).toBeTruthy();
+    expect(screen.getByText('0')).toBeTruthy();
+  });
+
+  test('the component identity survives re-renders and shows fresh snapshots', () => {
+    render(<Host />);
+    fireEvent.click(screen.getByRole('button', { name: 'dbg' }));
+
+    fireEvent.click(screen.getByRole('button', { name: 'inc' }));
+
+    // The window is still open (a remounted Debugger would have reset to
+    // closed) and reflects the snapshot published after the re-render.
+    expect(screen.getByText('1')).toBeTruthy();
+    expect(screen.queryByText('0')).toBeNull();
+  });
+});

package/src/forms/state/useFormState/useFormDebugger.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react';
+import { createFormDebugger } from './FormDebugger';
+import type { FormDebuggerComponent } from './FormDebugger';
+import { createSnapshotStore } from './snapshotStore';
+import type { SnapshotStore } from './snapshotStore';
+import type { FormDebugSnapshot, FormValuesObject } from './types';
+
+export type UseFormDebuggerArgs<T extends FormValuesObject> = {
+  snapshot: FormDebugSnapshot<T>;
+};
+
+// Debugger plumbing: one store + one component per hook instance, created
+// lazily on first render. The component's identity must be stable across
+// renders — recreated each render it would remount (and lose its
+// open/closed state) on every keystroke.
+export const useFormDebugger = <T extends FormValuesObject>(
+  args: UseFormDebuggerArgs<T>,
+): FormDebuggerComponent => {
+  const { snapshot } = args;
+
+  const debugRef = useRef<{
+    store: SnapshotStore<FormDebugSnapshot<T>>;
+    Debugger: FormDebuggerComponent;
+  } | null>(null);
+  if (debugRef.current === null) {
+    const store = createSnapshotStore(snapshot);
+    debugRef.current = { store, Debugger: createFormDebugger(store) };
+  }
+  const { store, Debugger } = debugRef.current;
+
+  // Publish after every commit. With no debugger window subscribed this is a
+  // field write and an empty notify loop — effectively free.
+  useEffect(() => {
+    store.publish(snapshot);
+  });
+
+  return Debugger;
+};

package/src/forms/{useFormState → state/useFormState}/useFormState.stories.tsx

@@ -5,10 +5,10 @@ import { useFormState } from './useFormState';
 import { errorAt } from './errorAt';
 import type { FormErrors } from './types';
 import { matches, minLength, notEmpty } from '../validators/validators';
-import { Field } from '../../components/Forms/Field';
-import { Input } from '../../components/Forms/Input';
-import { Button } from '../../components/Forms/Button';
-import { SingleSelect } from '../../components/Forms/Select';
+import { Field } from '../../elements/Field';
+import { Input } from '../../elements/Input';
+import { Button } from '../../elements/Button';
+import { SingleSelect } from '../../elements/Select';
 
 const meta: Meta = {
   title: 'Forms/useFormState',

package/src/forms/state/useFormState/useFormState.ts

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { deriveFormErrors } from './deriveErrors';
+import type {
+  FormHelpers,
+  FormValuesObject,
+  UnionPolicyCheck,
+} from './types';
+import { useFormDebugger } from './useFormDebugger';
+import { useFormSubmit } from './useFormSubmit';
+import type { Refine, Validations } from '../validations/types';
+
+// `const V` freezes the inferred type of an inline `constraints` object —
+// each validator's precise type and Refinement marker survive without any
+// `as const` at the call site. Constraint objects built outside the call
+// still need `as const satisfies Validations<T>` (see src/forms/CLAUDE.md).
+//
+// The `UnionPolicyCheck<T>` intersection enforces the union policy (see
+// "Union policy" in src/forms/CLAUDE.md) at the hook boundary: a form type
+// containing a disallowed union fails here, naming the offending keys,
+// rather than silently producing dead types deep inside a resolved path
+// later. It must stay OUT of the `initialValues` property type — an
+// intersection target there defeats literal widening during inference
+// (`b: 0` infers as `0`, not `number`).
+type Args<T extends FormValuesObject, V extends Validations<T>> = {
+  initialValues: T;
+  constraints?: V;
+  onSubmit?: (values: Refine<T, V>) => void;
+} & UnionPolicyCheck<T>;
+
+// Plumbing only: each slice of form state lives in its own pure function or
+// focused hook, and this hook just links them up and recomposes their
+// outputs into the `FormHelpers<T>` surface. Values state is the one slice
+// kept inline — today it is a bare `useState`, and the granular setters that
+// would earn it a module of its own arrive with the path-based grammar.
+export const useFormState = <
+  T extends FormValuesObject,
+  const V extends Validations<T> = Validations<T>,
+>(
+  args: Args<T, V>,
+): FormHelpers<T> => {
+  const { initialValues, constraints, onSubmit } = args;
+
+  const [values, onValueChanges] = useState<T>(initialValues);
+
+  const errors = deriveFormErrors(values, constraints);
+  const isValid = errors.length === 0;
+
+  // Explicit type arguments: V rides on `onSubmit`'s parameter type, which
+  // is not an inference site (see useFormSubmit.ts).
+  const { submitAttempted, submit } = useFormSubmit<T, V>({
+    values,
+    isValid,
+    onSubmit,
+  });
+
+  const Debugger = useFormDebugger({
+    snapshot: { values, errors, isValid, submitAttempted },
+  });
+
+  return {
+    values,
+    onValueChanges,
+    errors,
+    isValid,
+    submitAttempted,
+    submit,
+    Debugger,
+  };
+};

package/src/forms/state/useFormState/useFormSubmit.test.tsx

@@ -0,0 +1,86 @@
+import { describe, test, expect, mock } from 'bun:test';
+import { act, renderHook } from '@testing-library/react';
+import { useFormSubmit } from './useFormSubmit';
+
+// The submit-orchestration boundary in isolation: the attempt flag and the
+// validity gate, driven by whatever `isValid` the caller derived. Full-form
+// behavior (validity flipping as values change) stays in useFormState.test.tsx.
+
+type Form = { email: string | undefined };
+
+describe('useFormSubmit', () => {
+  test('starts with submitAttempted false', () => {
+    const { result } = renderHook(() =>
+      useFormSubmit<Form>({ values: { email: undefined }, isValid: true }),
+    );
+    expect(result.current.submitAttempted).toBe(false);
+  });
+
+  test('submit on an invalid form marks the attempt and skips onSubmit', () => {
+    const onSubmit = mock(() => {});
+    const { result } = renderHook(() =>
+      useFormSubmit<Form>({ values: { email: undefined }, isValid: false, onSubmit }),
+    );
+
+    act(() => {
+      result.current.submit();
+    });
+    expect(result.current.submitAttempted).toBe(true);
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  test('submit on a valid form calls onSubmit with the current values', () => {
+    const onSubmit = mock(() => {});
+    const { result } = renderHook(() =>
+      useFormSubmit<Form>({ values: { email: 'a@b.co' }, isValid: true, onSubmit }),
+    );
+
+    act(() => {
+      result.current.submit();
+    });
+    expect(result.current.submitAttempted).toBe(true);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith({ email: 'a@b.co' });
+  });
+
+  test('submit without an onSubmit handler is a no-op beyond the flag', () => {
+    const { result } = renderHook(() =>
+      useFormSubmit<Form>({ values: { email: 'a@b.co' }, isValid: true }),
+    );
+
+    act(() => {
+      result.current.submit();
+    });
+    expect(result.current.submitAttempted).toBe(true);
+  });
+
+  test('submitAttempted stays true once validity flips', () => {
+    const onSubmit = mock(() => {});
+    const initialProps: { isValid: boolean; email: string | undefined } = {
+      isValid: false,
+      email: undefined,
+    };
+    const { result, rerender } = renderHook(
+      (props: { isValid: boolean; email: string | undefined }) =>
+        useFormSubmit<Form>({
+          values: { email: props.email },
+          isValid: props.isValid,
+          onSubmit,
+        }),
+      { initialProps },
+    );
+
+    act(() => {
+      result.current.submit();
+    });
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    rerender({ isValid: true, email: 'a@b.co' });
+    expect(result.current.submitAttempted).toBe(true);
+
+    act(() => {
+      result.current.submit();
+    });
+    expect(onSubmit).toHaveBeenCalledWith({ email: 'a@b.co' });
+  });
+});

package/src/forms/state/useFormState/useFormSubmit.ts

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import type { Refine, Validations } from '../validations/types';
+import type { FormValuesObject } from './types';
+
+export type UseFormSubmitArgs<
+  T extends FormValuesObject,
+  V extends Validations<T>,
+> = {
+  values: T;
+  isValid: boolean;
+  onSubmit?: (values: Refine<T, V>) => void;
+};
+
+// Submit orchestration: owns the `submitAttempted` flag (UIs gate error
+// display on it) and the validity gate in front of `onSubmit`. This is the
+// home of the ONE sanctioned refinement cast (see the cast doctrine in
+// src/forms/CLAUDE.md). `V` is not inferable from `onSubmit`'s parameter
+// position, so `useFormState` applies both type arguments explicitly.
+export const useFormSubmit = <
+  T extends FormValuesObject,
+  V extends Validations<T> = Validations<T>,
+>(
+  args: UseFormSubmitArgs<T, V>,
+) => {
+  const { values, isValid, onSubmit } = args;
+
+  const [submitAttempted, setSubmitAttempted] = useState(false);
+
+  const submit = () => {
+    setSubmitAttempted(true);
+    if (!isValid) return;
+    // Every constrained field's validator just passed at runtime — exactly
+    // the guarantee Refine<T, V> encodes.
+    onSubmit?.(values as Refine<T, V>);
+  };
+
+  return { submitAttempted, submit };
+};

package/src/forms/{validations → state/validations}/walk.ts

@@ -19,8 +19,9 @@ export type ValidationError = {
 type AnyFieldValidator = (val: never) => string | null;
 
 // The walk's view of one entry in a `Validations<T>` object. This type is
-// what lets the compiler police the walk's assumptions: the hook assigns
-// `constraints[key]` to it WITHOUT a cast, so when the grammar grows a form
+// what lets the compiler police the walk's assumptions: the error derivation
+// (`useFormState/deriveErrors.ts`) assigns `constraints[key]` to it WITHOUT
+// a cast, so when the grammar grows a form
 // that is neither a function nor an array of them (nested spec, list `each`),
 // that assignment stops compiling and the walk must learn the new form —
 // instead of a stale walk misinterpreting it at runtime.

package/src/index.ts

@@ -3,26 +3,26 @@ export { Heading, type HeadingProps } from './components/Content/Heading';
 export { Link, type LinkProps } from './components/Content/Link';
 export { Stack, type StackProps } from './components/Layout/Stack';
 export { Grid, type GridProps } from './components/Layout/Grid';
-export { Button, type ButtonProps } from './components/Forms/Button';
+export { Button, type ButtonProps } from './forms/elements/Button';
 export {
   IconButton,
   type IconButtonProps,
   type IconButtonVariant,
   type IconButtonSize,
-} from './components/Forms/IconButton';
+} from './forms/elements/IconButton';
 export {
   Tooltip,
   type TooltipProps,
   type TooltipPlacement,
 } from './components/Overlays/Tooltip';
-export { Input, type InputProps } from './components/Forms/Input';
-export { SearchInput, type SearchInputProps } from './components/Forms/SearchInput';
-export { ColorInput, type ColorInputProps } from './components/Forms/ColorInput';
-export { Textarea, type TextareaProps } from './components/Forms/Textarea';
-export { SingleSelect, type SingleSelectProps } from './components/Forms/Select';
-export { MultiSelect, type MultiSelectProps } from './components/Forms/Select';
-export type { SelectOption, SelectSize } from './components/Forms/Select';
-export { Field, type FieldProps } from './components/Forms/Field';
+export { Input, type InputProps } from './forms/elements/Input';
+export { SearchInput, type SearchInputProps } from './forms/elements/SearchInput';
+export { ColorInput, type ColorInputProps } from './forms/elements/ColorInput';
+export { Textarea, type TextareaProps } from './forms/elements/Textarea';
+export { SingleSelect, type SingleSelectProps } from './forms/elements/Select';
+export { MultiSelect, type MultiSelectProps } from './forms/elements/Select';
+export type { SelectOption, SelectSize } from './forms/elements/Select';
+export { Field, type FieldProps } from './forms/elements/Field';
 export { MediumModal, LargeModal, ConfirmModal } from './components/Modals';
 export type { MediumModalProps, LargeModalProps, ConfirmModalProps } from './components/Modals';
 export { Divider } from './components/Layout/Divider';

package/src/storybook/Composition.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useRef, useState } from 'react';
-import { Button } from '../components/Forms/Button';
-import { Field } from '../components/Forms/Field';
-import { Input } from '../components/Forms/Input';
+import { Button } from '../forms/elements/Button';
+import { Field } from '../forms/elements/Field';
+import { Input } from '../forms/elements/Input';
 import { MediumModal } from '../components/Modals/MediumModal';
 import { Menu } from '../components/Content/Menu';
 import { Popover } from '../components/Overlays/Popover';
-import { SingleSelect } from '../components/Forms/Select/SingleSelect';
+import { SingleSelect } from '../forms/elements/Select/SingleSelect';
 import { Stack } from '../components/Layout/Stack';
 import { Text } from '../components/Content/Text';
 import { Tooltip } from '../components/Overlays/Tooltip';

package/src/storybook/_StoryUtils.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Lorem, Placeholder, Toggle, Repeat } from './index';
-import { Button } from '../components/Forms/Button';
+import { Button } from '../forms/elements/Button';
 import { Stack } from '../components/Layout/Stack';
 import { Text } from '../components/Content/Text';
 import { MediumModal } from '../components/Modals';

package/src/forms/useFormState/useFormState.ts

@@ -1,109 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { createFormDebugger } from './FormDebugger';
-import type { FormDebuggerComponent } from './FormDebugger';
-import { createSnapshotStore } from './snapshotStore';
-import type { SnapshotStore } from './snapshotStore';
-import type {
-  FormDebugSnapshot,
-  FormError,
-  FormHelpers,
-  FormValuesObject,
-  UnionPolicyCheck,
-} from './types';
-import type { Path } from '../path/types';
-import type { Refine, Validations } from '../validations/types';
-import { validateEntry } from '../validations/walk';
-import type { FlatConstraintEntry } from '../validations/walk';
-
-// `const V` freezes the inferred type of an inline `constraints` object —
-// each validator's precise type and Refinement marker survive without any
-// `as const` at the call site. Constraint objects built outside the call
-// still need `as const satisfies Validations<T>` (see src/forms/CLAUDE.md).
-//
-// The `UnionPolicyCheck<T>` intersection enforces the union policy (see
-// "Union policy" in src/forms/CLAUDE.md) at the hook boundary: a form type
-// containing a disallowed union fails here, naming the offending keys,
-// rather than silently producing dead types deep inside a resolved path
-// later. It must stay OUT of the `initialValues` property type — an
-// intersection target there defeats literal widening during inference
-// (`b: 0` infers as `0`, not `number`).
-type Args<T extends FormValuesObject, V extends Validations<T>> = {
-  initialValues: T;
-  constraints?: V;
-  onSubmit?: (values: Refine<T, V>) => void;
-} & UnionPolicyCheck<T>;
-
-export const useFormState = <
-  T extends FormValuesObject,
-  const V extends Validations<T> = Validations<T>,
->(
-  args: Args<T, V>,
-): FormHelpers<T> => {
-  const { initialValues, constraints, onSubmit } = args;
-
-  const [values, onValueChanges] = useState<T>(initialValues);
-  const [submitAttempted, setSubmitAttempted] = useState(false);
-
-  const errors: FormError<T>[] = [];
-  if (constraints) {
-    for (const key of Object.keys(constraints) as (keyof T & string)[]) {
-      // No cast: if the grammar grows a constraint form the walk doesn't
-      // understand, this assignment is the compile error that says so.
-      const entry: FlatConstraintEntry | undefined = constraints[key];
-      if (entry == null) continue;
-      const failure = validateEntry(entry, values[key], [key]);
-      if (failure == null) continue;
-      // The walk returns the address it was handed, and `[key]` — a key of
-      // a constraints object type-checked against T — is a valid single-key
-      // Path<T>. TS can't compute Path<T> for an unresolved generic T, so
-      // the correlation needs the same honest widening as the keys cast
-      // above.
-      errors.push({ path: failure.path as Path<T>, error: failure.error });
-    }
-  }
-
-  const isValid = errors.length === 0;
-
-  // Debugger plumbing: one store + one component per hook instance, created
-  // lazily on first render. The component's identity must be stable across
-  // renders — recreated each render it would remount (and lose its
-  // open/closed state) on every keystroke.
-  const debugRef = useRef<{
-    store: SnapshotStore<FormDebugSnapshot<T>>;
-    Debugger: FormDebuggerComponent;
-  } | null>(null);
-  if (debugRef.current === null) {
-    const store = createSnapshotStore<FormDebugSnapshot<T>>({
-      values,
-      errors,
-      isValid,
-      submitAttempted,
-    });
-    debugRef.current = { store, Debugger: createFormDebugger(store) };
-  }
-  const { store, Debugger } = debugRef.current;
-
-  // Publish after every commit. With no debugger window subscribed this is a
-  // field write and an empty notify loop — effectively free.
-  useEffect(() => {
-    store.publish({ values, errors, isValid, submitAttempted });
-  });
-
-  const submit = () => {
-    setSubmitAttempted(true);
-    if (!isValid) return;
-    // Every constrained field's validator just passed at runtime — exactly
-    // the guarantee Refine<T, V> encodes.
-    onSubmit?.(values as Refine<T, V>);
-  };
-
-  return {
-    values,
-    onValueChanges,
-    errors,
-    isValid,
-    submitAttempted,
-    submit,
-    Debugger,
-  };
-};