@maz-ui/mcp 5.0.1-beta.0 → 5.1.0-beta.1

package/docs/{src/composables → composables}/use-form-validator.md

@@ -1,15 +1,22 @@
 ---
-title: useFormValidator
-description: Vue composables for form validation with any Standard Schema library (Valibot, Zod, ArkType...) - useFormValidator and useFormField provide a flexible and typed approach to handle form validation in your Vue applications.
+title: "useFormValidator"
+description: "Vue composables for form validation with any Standard Schema library (Valibot, Zod, ArkType...) - useFormValidator and useFormField provide a flexible and typed approach to handle form validation in your Vue applications."
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-form-validator"
 ---
 
-# {{ $frontmatter.title }}
+# useFormValidator
 
-{{ $frontmatter.description }}
+> Vue composables for form validation with any Standard Schema library (Valibot, Zod, ArkType...) - useFormValidator and useFormField provide a flexible and typed approach to handle form validation in your Vue applications.
+
+- Package: `maz-ui`
+- Import: `import { useFormValidator } from 'maz-ui/composables/useFormValidator'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-form-validator
 
 ## Introduction
 
-`useFormValidator` and `useFormField` are two Vue composables that work together to provide powerful form validation. They are **validation library agnostic**: any library implementing [Standard Schema](https://standardschema.dev) works out of the box, like [Valibot](https://valibot.dev), [Zod](https://zod.dev) or [ArkType](https://arktype.io). See [Validation Libraries](#validation-libraries).
+`useFormValidator` and `useFormField` are two Vue composables that work together to provide powerful form validation. They are **validation library agnostic**: any library implementing [Standard Schema](https://standardschema.dev) works out of the box, like [Valibot](https://valibot.dev), [Zod](https://zod.dev) or [ArkType](https://arktype.io). See Validation Libraries.
 
 - **useFormValidator**: Initializes form validation for your entire form. Use it in your form's parent component.
 - **useFormField**: Manages individual field validation states. Use it when you need fine-grained control over a field or when fields are in child components.
@@ -25,8 +32,6 @@ description: Vue composables for form validation with any Standard Schema librar
 
 Install the validation library of your choice (Valibot is used in most examples of this page):
 
-::: code-group
-
 ```bash [valibot]
 pnpm add valibot
 ```
@@ -39,35 +44,8 @@ pnpm add zod
 pnpm add arktype
 ```
 
-:::
-
 Here's the simplest form you can create with `useFormValidator`:
 
-<ComponentDemo>
-  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitQuickStart">
-    <MazInput
-      v-model="quickStartModel.email"
-      label="Email"
-      type="email"
-      :hint="quickStartErrors.email"
-      :error="!!quickStartErrors.email"
-      :success="quickStartStates.email.valid"
-    />
-    <MazInput
-      v-model="quickStartModel.password"
-      label="Password"
-      type="password"
-      :hint="quickStartErrors.password"
-      :error="!!quickStartErrors.password"
-      :success="quickStartStates.password.valid"
-    />
-    <MazBtn type="submit" :loading="quickStartSubmitting">
-      Login
-    </MazBtn>
-  </form>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator } from 'maz-ui/composables'
@@ -119,9 +97,6 @@ const onSubmit = handleSubmit((data) => {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Validation Libraries
 
 `useFormValidator` relies on [Standard Schema](https://standardschema.dev), a common interface shared by the main validation libraries. Maz-UI does not ship any validation library: install the one you prefer and pass its schemas. Valibot, Zod and ArkType are declared as optional peer dependencies of `maz-ui`, so your package manager warns you if the installed version is not supported.
@@ -137,8 +112,6 @@ The `schema` option is always a **plain object** where each key is a field name
 
 ### Same form, different libraries
 
-::: code-group
-
 ```ts [valibot]
 import { useFormValidator } from 'maz-ui/composables'
 import { email, minLength, nonEmpty, pipe, string } from 'valibot'
@@ -175,34 +148,8 @@ const { model, errorMessages, handleSubmit } = useFormValidator({
 })
 ```
 
-:::
-
 ### Live example with Zod
 
-<ComponentDemo>
-  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitZod">
-    <MazInput
-      v-model="zodModel.username"
-      label="Username"
-      :hint="zodErrors.username"
-      :error="!!zodErrors.username"
-      :success="zodStates.username.valid"
-    />
-    <MazInput
-      v-model="zodModel.age"
-      label="Age"
-      type="number"
-      :hint="zodErrors.age"
-      :error="!!zodErrors.age"
-      :success="zodStates.age.valid"
-    />
-    <MazBtn type="submit" :loading="zodSubmitting">
-      Submit
-    </MazBtn>
-  </form>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator } from 'maz-ui/composables'
@@ -251,9 +198,6 @@ const onSubmit = handleSubmit((data) => {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Mixing libraries
 
 Each field is validated by its own schema, so you can mix libraries in the same form (useful during a progressive migration from one library to another):
@@ -335,36 +279,6 @@ Each field in `fieldsStates` contains:
 | `validated` | `boolean` | Validation has run at least once |
 | `validating` | `boolean` | Async validation is in progress |
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitState">
-      <MazInput
-        v-model="stateModel.name"
-        label="Name (min 3 characters)"
-        :hint="stateErrors.name"
-        :error="!!stateErrors.name"
-        :success="stateFields.name.valid"
-      />
-      <MazInput
-        v-model="stateModel.age"
-        label="Age (18-100)"
-        type="number"
-        :hint="stateErrors.age"
-        :error="!!stateErrors.age"
-        :success="stateFields.age.valid"
-      />
-      <MazBtn type="submit">Submit</MazBtn>
-    </form>
-    <div class="maz:rounded-md">
-      <p class="maz:font-semibold maz:mb-2">Form State:</p>
-      <pre class="maz:text-xs maz:bg-surface-600/70 maz:dark:bg-surface-600/60 maz:p-2 maz:rounded-md">{{ JSON.stringify({ isValid: stateValid, isDirty: stateDirty, isSubmitted: stateSubmitted, isSubmitting: stateSubmitting }, null, 2) }}</pre>
-      <p class="maz:font-semibold maz:mb-2 maz:mt-4">Fields States:</p>
-      <pre class="maz:text-xs maz:bg-surface-600/70 maz:dark:bg-surface-600/60 maz:p-2 maz:rounded-md">{{ JSON.stringify(stateFields, null, 2) }}</pre>
-    </div>
-  </div>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator } from 'maz-ui/composables'
@@ -403,9 +317,6 @@ const onSubmit = handleSubmit((data) => {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Validation Modes
 
 Validation modes control **when** validation runs and **when** errors are displayed. Choose the mode that best fits your UX needs.
@@ -418,41 +329,14 @@ Validation modes control **when** validation runs and **when** errors are displa
 | `blur` | Only on blur | After blur | Minimal interruption |
 | `progressive` | Silently, shows on blur if invalid | After blur or validation | Optimal UX |
 
-::: tip
+**Tip:**
+
 For `eager`, `blur`, and `progressive` modes, you must use `useFormField` with the `ref` option or `validationEvents` to capture blur events.
-:::
 
 ### Lazy Mode (Default)
 
 The default mode. Validates when field values change. Errors only appear if the field is not empty.
 
-<ComponentDemo>
-  <div class="maz:mb-4">
-    <p class="maz:text-sm maz:text-muted">Type in the field and clear it - notice the error appears only when there's content.</p>
-  </div>
-  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitLazy">
-    <MazInput
-      v-model="lazyModel.name"
-      label="Name (min 3 characters)"
-      :hint="lazyErrors.name"
-      :error="!!lazyErrors.name"
-      :success="lazyStates.name.valid"
-      :class="{ 'has-error-lazy': !!lazyErrors.name }"
-    />
-    <MazInput
-      v-model="lazyModel.email"
-      label="Email"
-      type="email"
-      :hint="lazyErrors.email"
-      :error="!!lazyErrors.email"
-      :success="lazyStates.email.valid"
-      :class="{ 'has-error-lazy': !!lazyErrors.email }"
-    />
-    <MazBtn type="submit" :loading="lazySubmitting">Submit</MazBtn>
-  </form>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator } from 'maz-ui/composables'
@@ -477,38 +361,10 @@ const onSubmit = handleSubmit((data) => {
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Aggressive Mode
 
 Validates all fields immediately when the form is created and on every change. Errors are always displayed.
 
-<ComponentDemo>
-  <div class="maz:mb-4">
-    <p class="maz:text-sm maz:text-muted">Notice all fields show errors immediately, even before any interaction.</p>
-  </div>
-  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitAggressive">
-    <MazInput
-      v-model="aggressiveModel.name"
-      label="Name (min 3 characters)"
-      :hint="aggressiveErrors.name"
-      :error="!!aggressiveErrors.name"
-      :success="aggressiveStates.name.valid"
-    />
-    <MazInput
-      v-model="aggressiveModel.email"
-      label="Email"
-      type="email"
-      :hint="aggressiveErrors.email"
-      :error="!!aggressiveErrors.email"
-      :success="aggressiveStates.email.valid"
-    />
-    <MazBtn type="submit" :loading="aggressiveSubmitting">Submit</MazBtn>
-  </form>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator } from 'maz-ui/composables'
@@ -528,45 +384,13 @@ const { model, errorMessages, fieldsStates, isSubmitting, handleSubmit } = useFo
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Eager Mode (Recommended)
 
 Validates on blur first (if the field is not empty), then on every change. This provides a good balance between immediate feedback and not overwhelming the user.
 
-::: warning
-Requires `useFormField` with `ref` option or `validationEvents`.
-:::
-
-<ComponentDemo>
-  <div class="maz:mb-4">
-    <p class="maz:text-sm maz:text-muted">Type something, then click outside the field (blur) to see validation. After that, errors update as you type.</p>
-  </div>
-  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitEager">
-    <MazInput
-      ref="eagerNameRef"
-      v-model="eagerName"
-      label="Name (min 3 characters)"
-      :hint="eagerNameError"
-      :error="eagerNameHasError"
-      :success="eagerNameValid"
-      :class="{ 'has-error-eager': eagerNameHasError }"
-    />
-    <MazInput
-      ref="eagerEmailRef"
-      v-model="eagerEmail"
-      label="Email"
-      type="email"
-      :hint="eagerEmailError"
-      :error="eagerEmailHasError"
-      :success="eagerEmailValid"
-      :class="{ 'has-error-eager': eagerEmailHasError }"
-    />
-    <MazBtn type="submit" :loading="eagerSubmitting" :disabled="!eagerIsValid">Submit</MazBtn>
-  </form>
+**Warning:**
 
-  <template #code>
+Requires `useFormField` with `ref` option or `validationEvents`.
 
 ```vue
 <script lang="ts" setup>
@@ -634,46 +458,14 @@ const {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Blur Mode
 
-::: warning
+**Warning:**
+
 Requires `useFormField` with `ref` option or `validationEvents`.
-:::
 
 Validates only when the field loses focus. Errors are only shown after blur.
 
-<ComponentDemo>
-  <div class="maz:mb-4">
-    <p class="maz:text-sm maz:text-muted">Type in the field, then click outside. Errors only appear after blur, and don't update while typing.</p>
-  </div>
-  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitBlur">
-    <MazInput
-      ref="blurNameRef"
-      v-model="blurName"
-      label="Name (min 3 characters)"
-      :hint="blurNameError"
-      :error="blurNameHasError"
-      :success="blurNameValid"
-      :class="{ 'has-error-blur': blurNameHasError }"
-    />
-    <MazInput
-      ref="blurEmailRef"
-      v-model="blurEmail"
-      label="Email"
-      type="email"
-      :hint="blurEmailError"
-      :error="blurEmailHasError"
-      :success="blurEmailValid"
-      :class="{ 'has-error-blur': blurEmailHasError }"
-    />
-    <MazBtn type="submit" :loading="blurSubmitting">Submit</MazBtn>
-  </form>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator, useFormField } from 'maz-ui/composables'
@@ -705,55 +497,14 @@ const { value: email, hasError: emailHasError, errorMessage: emailError, isValid
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Progressive Mode
 
-::: warning
+**Warning:**
+
 Requires `useFormField` with `ref` option or `validationEvents`.
-:::
 
 The most user-friendly mode. Validates silently in the background. Shows errors only on blur if the field is invalid. Once valid, it stays valid until it becomes invalid again.
 
-<ComponentDemo>
-  <div class="maz:mb-4">
-    <p class="maz:text-sm maz:text-muted">Start typing - the field becomes valid (green) as soon as validation passes. Errors only show after blur.</p>
-  </div>
-  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitProgressive">
-    <MazInput
-      ref="progressiveNameRef"
-      v-model="progressiveName"
-      label="Name (min 3 characters)"
-      :hint="progressiveNameError"
-      :error="progressiveNameHasError"
-      :success="progressiveNameValid"
-      :class="{ 'has-error-progressive': progressiveNameHasError }"
-    />
-    <MazInput
-      ref="progressiveEmailRef"
-      v-model="progressiveEmail"
-      label="Email"
-      type="email"
-      :hint="progressiveEmailError"
-      :error="progressiveEmailHasError"
-      :success="progressiveEmailValid"
-      :class="{ 'has-error-progressive': progressiveEmailHasError }"
-    />
-    <MazCheckbox
-      ref="progressiveAgreeRef"
-      v-model="progressiveAgree"
-      :hint="progressiveAgreeError"
-      :error="progressiveAgreeHasError"
-      :class="{ 'has-error-progressive': progressiveAgreeHasError }"
-    >
-      I agree to the terms and conditions
-    </MazCheckbox>
-    <MazBtn type="submit" :loading="progressiveSubmitting">Submit</MazBtn>
-  </form>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator, useFormField } from 'maz-ui/composables'
@@ -782,9 +533,6 @@ const { value: name, hasError, errorMessage, isValid } = useFormField<string>('n
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## useFormField for Child Components
 
 `useFormField` is essential when:
@@ -918,7 +666,8 @@ const { value } = useFormField<string>('name', { formIdentifier: 'my-form' })
 // value is typed as WritableComputedRef<string>
 ```
 
-::: warning Common TypeScript Errors
+**Warning: Common TypeScript Errors**
+
 If you get circular reference errors with `useTemplateRef`, use the classic `ref()` instead:
 
 ```ts
@@ -939,8 +688,6 @@ const { value: email } = useFormField<string>('email', {
 })
 ```
 
-:::
-
 ## Async Validation
 
 Async validations (like checking username availability) are supported by every library: Valibot's `pipeAsync` and `checkAsync`, Zod's async `refine`, etc. The example below uses Valibot, here is the Zod equivalent of the schema:
@@ -961,26 +708,6 @@ const schema = {
 }
 ```
 
-<ComponentDemo>
-  <div class="maz:mb-4">
-    <p class="maz:text-sm maz:text-muted">Try typing "taken" - the async validator will reject it after a 2-second delay.</p>
-  </div>
-  <form class="maz:flex maz:gap-4" @submit="onSubmitAsync">
-    <MazInput
-      ref="asyncUsernameRef"
-      v-model="asyncUsername"
-      label="Username"
-      :hint="asyncUsernameError"
-      :error="asyncUsernameHasError"
-      :success="asyncUsernameValid"
-      :loading="asyncUsernameValidating"
-      class="maz:flex-1"
-    />
-    <MazBtn type="submit" :loading="asyncSubmitting">Submit</MazBtn>
-  </form>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator, useFormField } from 'maz-ui/composables'
@@ -1029,9 +756,6 @@ const {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Throttling and Debouncing
 
 For expensive validations (like API calls), use throttling or debouncing to limit how often validation runs.
@@ -1041,31 +765,6 @@ For expensive validations (like API calls), use throttling or debouncing to limi
 | `debouncedFields` | Waits until user stops typing | 300ms | Search fields, API calls |
 | `throttledFields` | Runs at most once per interval | 1000ms | Rate-limited APIs |
 
-<ComponentDemo>
-  <div class="maz:mb-4">
-    <p class="maz:text-sm maz:text-muted">Name has 500ms debounce, Age has 1000ms throttle. Watch the console to see validation timing.</p>
-  </div>
-  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitDebounced">
-    <MazInput
-      v-model="debouncedModel.name"
-      label="Name (debounced 500ms)"
-      :hint="debouncedErrors.name"
-      :error="debouncedStates.name.error"
-      :success="debouncedStates.name.valid"
-    />
-    <MazInput
-      v-model="debouncedModel.age"
-      label="Age (throttled 1000ms)"
-      type="number"
-      :hint="debouncedErrors.age"
-      :error="debouncedStates.age.error"
-      :success="debouncedStates.age.valid"
-    />
-    <MazBtn type="submit" :loading="debouncedSubmitting">Submit</MazBtn>
-  </form>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator } from 'maz-ui/composables'
@@ -1087,38 +786,10 @@ const { model, errorMessages, fieldsStates, isSubmitting, handleSubmit } = useFo
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Reset Form
 
 Use `resetForm()` to reset the form to its initial state, or set `resetOnSuccess` to automatically reset after successful submission.
 
-<ComponentDemo>
-  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitReset">
-    <MazInput
-      v-model="resetModel.name"
-      label="Name"
-      :hint="resetErrors.name"
-      :error="resetStates.name.error"
-      :success="resetStates.name.valid"
-    />
-    <MazInput
-      v-model="resetModel.age"
-      label="Age"
-      type="number"
-      :hint="resetErrors.age"
-      :error="resetStates.age.error"
-      :success="resetStates.age.valid"
-    />
-    <div class="maz:flex maz:gap-2">
-      <MazBtn type="submit" :loading="resetSubmitting">Submit</MazBtn>
-      <MazBtn type="button" color="destructive" @click="resetFormFn">Reset</MazBtn>
-    </div>
-  </form>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useFormValidator } from 'maz-ui/composables'
@@ -1149,9 +820,6 @@ function handleReset() {
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Multiple Forms on Same Page
 
 Use the `identifier` option to have multiple independent forms on the same page. Make sure to match the identifier in both `useFormValidator` and `useFormField`.
@@ -1453,345 +1121,3 @@ const { value } = useFormField<string>('email', {
   formIdentifier: 'my-form', // ...must match this one
 })
 ```
-
-<script lang="ts" setup>
-import { ref, useTemplateRef } from 'vue'
-import { useFormValidator } from 'maz-ui/composables/useFormValidator'
-import { useFormField } from 'maz-ui/composables/useFormField'
-import { useToast } from 'maz-ui/composables/useToast'
-import { sleep } from '@maz-ui/utils'
-import {
-  string,
-  nonEmpty,
-  pipe,
-  number,
-  minValue,
-  maxValue,
-  boolean,
-  literal,
-  minLength,
-  email,
-  pipeAsync,
-  checkAsync,
-} from 'valibot'
-import { z } from 'zod'
-
-const toast = useToast()
-
-// Zod Demo
-const zodSchema = {
-  username: z.string().min(1, 'Username is required').min(3, 'Min 3 characters'),
-  age: z.number({ error: 'Age is required' }).min(18, 'Min 18').max(100, 'Max 100'),
-}
-
-const {
-  model: zodModel,
-  errorMessages: zodErrors,
-  fieldsStates: zodStates,
-  isSubmitting: zodSubmitting,
-  handleSubmit: handleZod,
-} = useFormValidator({ schema: zodSchema })
-
-const onSubmitZod = handleZod(async (data) => {
-  await sleep(1000)
-  toast.success(`Welcome ${data.username} (${data.age})!`, { position: 'top' })
-})
-
-// Quick Start Demo
-const quickStartSchema = {
-  email: pipe(string(), nonEmpty('Email is required'), email('Invalid email')),
-  password: pipe(string(), nonEmpty('Password is required'), minLength(8, 'Min 8 characters')),
-}
-
-const {
-  model: quickStartModel,
-  errorMessages: quickStartErrors,
-  fieldsStates: quickStartStates,
-  isSubmitting: quickStartSubmitting,
-  handleSubmit: handleQuickStart,
-} = useFormValidator({ schema: quickStartSchema })
-
-const onSubmitQuickStart = handleQuickStart(async () => {
-  await sleep(1000)
-  toast.success('Login successful!', { position: 'top' })
-})
-
-// Form State Demo
-const stateSchema = {
-  name: pipe(string(), nonEmpty('Required'), minLength(3, 'Min 3 characters')),
-  age: pipe(number('Must be a number'), minValue(18, 'Min 18'), maxValue(100, 'Max 100')),
-}
-
-const {
-  model: stateModel,
-  errorMessages: stateErrors,
-  fieldsStates: stateFields,
-  isValid: stateValid,
-  isDirty: stateDirty,
-  isSubmitted: stateSubmitted,
-  isSubmitting: stateSubmitting,
-  handleSubmit: handleState,
-} = useFormValidator({ schema: stateSchema })
-
-const onSubmitState = handleState(() => {
-  toast.success('Submitted!', { position: 'top' })
-})
-
-// Lazy Mode Demo
-const lazySchema = {
-  name: pipe(string(), nonEmpty('Required'), minLength(3, 'Min 3 characters')),
-  email: pipe(string(), nonEmpty('Required'), email('Invalid email')),
-}
-
-const {
-  model: lazyModel,
-  errorMessages: lazyErrors,
-  fieldsStates: lazyStates,
-  isSubmitting: lazySubmitting,
-  handleSubmit: handleLazy,
-} = useFormValidator({
-  schema: lazySchema,
-  options: { mode: 'lazy', scrollToError: '.has-error-lazy' },
-})
-
-const onSubmitLazy = handleLazy(async () => {
-  await sleep(1000)
-  toast.success('Submitted!', { position: 'top' })
-})
-
-// Aggressive Mode Demo
-const aggressiveSchema = {
-  name: pipe(string(), nonEmpty('Required'), minLength(3, 'Min 3 characters')),
-  email: pipe(string(), nonEmpty('Required'), email('Invalid email')),
-}
-
-const {
-  model: aggressiveModel,
-  errorMessages: aggressiveErrors,
-  fieldsStates: aggressiveStates,
-  isSubmitting: aggressiveSubmitting,
-  handleSubmit: handleAggressive,
-} = useFormValidator({
-  schema: aggressiveSchema,
-  options: { mode: 'aggressive' },
-})
-
-const onSubmitAggressive = handleAggressive(async () => {
-  await sleep(1000)
-  toast.success('Submitted!', { position: 'top' })
-})
-
-// Eager Mode Demo
-const eagerSchema = {
-  name: pipe(string(), nonEmpty('Required'), minLength(3, 'Min 3 characters')),
-  email: pipe(string(), nonEmpty('Required'), email('Invalid email')),
-}
-
-const {
-  isSubmitting: eagerSubmitting,
-  handleSubmit: handleEager,
-  isValid: eagerIsValid,
-} = useFormValidator({
-  schema: eagerSchema,
-  options: { mode: 'eager', scrollToError: '.has-error-eager', identifier: 'form-eager' },
-})
-
-const {
-  value: eagerName,
-  hasError: eagerNameHasError,
-  errorMessage: eagerNameError,
-  isValid: eagerNameValid,
-} = useFormField<string>('name', {
-  ref: useTemplateRef<HTMLInputElement>('eagerNameRef'),
-  formIdentifier: 'form-eager',
-})
-
-const {
-  value: eagerEmail,
-  hasError: eagerEmailHasError,
-  errorMessage: eagerEmailError,
-  isValid: eagerEmailValid,
-} = useFormField<string>('email', {
-  ref: useTemplateRef<HTMLInputElement>('eagerEmailRef'),
-  formIdentifier: 'form-eager',
-})
-
-const onSubmitEager = handleEager(async () => {
-  await sleep(1000)
-  toast.success('Submitted!', { position: 'top' })
-})
-
-// Blur Mode Demo
-const blurSchema = {
-  name: pipe(string(), nonEmpty('Required'), minLength(3, 'Min 3 characters')),
-  email: pipe(string(), nonEmpty('Required'), email('Invalid email')),
-}
-
-const {
-  isSubmitting: blurSubmitting,
-  handleSubmit: handleBlur,
-} = useFormValidator({
-  schema: blurSchema,
-  options: { mode: 'blur', scrollToError: '.has-error-blur', identifier: 'form-blur' },
-})
-
-const {
-  value: blurName,
-  hasError: blurNameHasError,
-  errorMessage: blurNameError,
-  isValid: blurNameValid,
-} = useFormField<string>('name', {
-  ref: useTemplateRef<HTMLInputElement>('blurNameRef'),
-  formIdentifier: 'form-blur',
-})
-
-const {
-  value: blurEmail,
-  hasError: blurEmailHasError,
-  errorMessage: blurEmailError,
-  isValid: blurEmailValid,
-} = useFormField<string>('email', {
-  ref: useTemplateRef<HTMLInputElement>('blurEmailRef'),
-  formIdentifier: 'form-blur',
-})
-
-const onSubmitBlur = handleBlur(async () => {
-  await sleep(1000)
-  toast.success('Submitted!', { position: 'top' })
-})
-
-// Progressive Mode Demo
-const progressiveSchema = {
-  name: pipe(string(), nonEmpty('Required'), minLength(3, 'Min 3 characters')),
-  email: pipe(string(), nonEmpty('Required'), email('Invalid email')),
-  agree: pipe(boolean(), literal(true, 'You must agree')),
-}
-
-const {
-  isSubmitting: progressiveSubmitting,
-  handleSubmit: handleProgressive,
-} = useFormValidator({
-  schema: progressiveSchema,
-  options: { mode: 'progressive', scrollToError: '.has-error-progressive', identifier: 'form-progressive' },
-})
-
-const {
-  value: progressiveName,
-  hasError: progressiveNameHasError,
-  errorMessage: progressiveNameError,
-  isValid: progressiveNameValid,
-} = useFormField<string>('name', {
-  ref: useTemplateRef<HTMLInputElement>('progressiveNameRef'),
-  formIdentifier: 'form-progressive',
-})
-
-const {
-  value: progressiveEmail,
-  hasError: progressiveEmailHasError,
-  errorMessage: progressiveEmailError,
-  isValid: progressiveEmailValid,
-} = useFormField<string>('email', {
-  ref: useTemplateRef<HTMLInputElement>('progressiveEmailRef'),
-  formIdentifier: 'form-progressive',
-})
-
-const {
-  value: progressiveAgree,
-  hasError: progressiveAgreeHasError,
-  errorMessage: progressiveAgreeError,
-} = useFormField<boolean>('agree', {
-  ref: useTemplateRef<HTMLInputElement>('progressiveAgreeRef'),
-  formIdentifier: 'form-progressive',
-})
-
-const onSubmitProgressive = handleProgressive(async () => {
-  await sleep(1000)
-  toast.success('Submitted!', { position: 'top' })
-})
-
-// Async Validation Demo
-const asyncSchema = {
-  username: pipeAsync(
-    string(),
-    nonEmpty('Username is required'),
-    minLength(3, 'Min 3 characters'),
-    checkAsync(async (value) => {
-      await sleep(2000)
-      return value !== 'taken'
-    }, 'Username is already taken'),
-  ),
-}
-
-const {
-  isSubmitting: asyncSubmitting,
-  handleSubmit: handleAsync,
-} = useFormValidator({
-  schema: asyncSchema,
-  options: { mode: 'eager', identifier: 'form-async' },
-})
-
-const {
-  value: asyncUsername,
-  hasError: asyncUsernameHasError,
-  errorMessage: asyncUsernameError,
-  isValid: asyncUsernameValid,
-  isValidating: asyncUsernameValidating,
-} = useFormField<string>('username', {
-  ref: useTemplateRef<HTMLInputElement>('asyncUsernameRef'),
-  formIdentifier: 'form-async',
-})
-
-const onSubmitAsync = handleAsync(async () => {
-  await sleep(1000)
-  toast.success('Submitted!', { position: 'top' })
-})
-
-// Debounce/Throttle Demo
-const debouncedSchema = {
-  name: pipe(string(), nonEmpty('Required'), minLength(3, 'Min 3 characters')),
-  age: pipe(number('Must be a number'), minValue(18, 'Must be 18+')),
-}
-
-const {
-  model: debouncedModel,
-  errorMessages: debouncedErrors,
-  fieldsStates: debouncedStates,
-  isSubmitting: debouncedSubmitting,
-  handleSubmit: handleDebounced,
-} = useFormValidator({
-  schema: debouncedSchema,
-  options: {
-    debouncedFields: { name: 500 },
-    throttledFields: { age: 1000 },
-  },
-})
-
-const onSubmitDebounced = handleDebounced(async () => {
-  await sleep(1000)
-  toast.success('Submitted!', { position: 'top' })
-})
-
-// Reset Form Demo
-const resetSchema = {
-  name: pipe(string(), nonEmpty('Required'), minLength(3, 'Min 3 characters')),
-  age: pipe(number('Must be a number'), minValue(18, 'Must be 18+')),
-}
-
-const {
-  model: resetModel,
-  errorMessages: resetErrors,
-  fieldsStates: resetStates,
-  isSubmitting: resetSubmitting,
-  handleSubmit: handleReset,
-  resetForm: resetFormFn,
-} = useFormValidator({
-  schema: resetSchema,
-  defaultValues: { name: 'John', age: 25 },
-  options: { resetOnSuccess: false },
-})
-
-const onSubmitReset = handleReset(async () => {
-  await sleep(1000)
-  toast.success('Submitted!', { position: 'top' })
-})
-</script>