### Install Formwerk

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/getting-started.mdx

Installs the Formwerk core library using different package managers.

```bash
npm install @formwerk/core
```

```bash
pnpm add @formwerk/core
```

```bash
bun add @formwerk/core
```

```bash
yarn add @formwerk/core
```

--------------------------------

### Basic OTP Field Setup

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/otp-fields.mdx

Demonstrates the basic setup of an OTP field component using Formwerk's `useOtpField` composable and binding it to DOM elements. This example shows how to integrate the OTP field into an application.

```vue
<script setup lang="ts">
import OtpField from './OtpField.vue';
</script>

<template>
  <OtpField label="Your code" />
</template>
```

--------------------------------

### App Component Usage

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/getting-started.mdx

Shows a simple Vue.js application component that uses the `TextField` component, demonstrating data binding with `v-model`.

```vue
<script setup>
import { TextField } from './TextField.vue';

const email = ref('');
</script>

<template>
  <TextField label="Email" type="email" v-model="email" />
</template>
```

--------------------------------

### Use TextField Composable

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/getting-started.mdx

Demonstrates how to import and use the `useTextField` composable from Formwerk in a Vue.js component. It shows how to bind props and handle input, labels, and error messages.

```vue
<script setup lang="ts">
import { TextFieldProps, useTextField } from '@formwerk/core';

const props = defineProps<TextFieldProps>();

const { inputProps, labelProps, errorMessage, errorMessageProps } = useTextField(props);
</script>

<template>
  <div>
    <label v-bind="labelProps">{{ label }}</label>
    <input v-bind="inputProps" />

    <div v-if="errorMessage" v-bind="errorMessageProps">
      {{ errorMessage }}
    </div>
  </div>
</template>
```

--------------------------------

### Package JSON Dependencies

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/README.md

Example of a package.json file, showing the dependencies required for an Astro project, including Starlight and its related packages.

```json
{
  "name": "my-starlight-docs",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/check": "^0.7.0",
    "@astrojs/starlight": "^0.23.0",
    "astro": "^4.7.0",
    "starlight-links-checker": "^0.7.0",
    "typescript": "^5.0.0",
    "wrangler": "^7.0.0"
  }
}
```

--------------------------------

### Slider Component Example with MdxRepl

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/sliders.mdx

Provides a complete example of integrating custom Slider and SliderThumb components within an application using MdxRepl. This showcases the practical usage and setup.

```vue
<script setup lang="ts">
import Slider from './Slider.vue';
</script>

<template>
  <Slider label="Volume" />
</template>
```

--------------------------------

### Nuxt SSR Integration Example

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/extras/ssr.mdx

Demonstrates how to import and use Formwerk composables within a Nuxt application for server-side rendering. This example highlights the out-of-the-box compatibility with Nuxt.

```javascript
import { useForm } from '@formwerk/vue';

// In your Nuxt page or component:
const { form, submit } = useForm({
  // Form configuration
});
```

--------------------------------

### Starlight Project Commands

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/README.md

Lists the essential npm commands for managing and running an Astro + Starlight project. These commands cover installation, local development, building for production, and previewing.

```bash
npm install
npm run dev
npm run build
npm run preview
npm run astro ...
npm run astro -- --help
```

--------------------------------

### Full Form Repeater Example with Fields

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/forms/form-repeater.mdx

This example demonstrates a complete form using repeaters, including text fields and checkboxes. It uses the `useForm` composable for form management and integrates a `FormRepeater` component with nested fields. The example also includes a submit button to process the form data.

```vue
<script setup lang="ts">
import { useForm } from '@formwerk/core';
import TextField from './TextField.vue';
import Checkbox from './Checkbox.vue';
import FormRepeater from './FormRepeater.vue';

const { handleSubmit } = useForm();

const onSubmit = handleSubmit((data) => {
  alert(JSON.stringify(data.toObject(), null, 2));
});
</script>

<template>
  <form @submit="onSubmit" novalidate>
    <FormRepeater name="users">
      <TextField name="email" label="Email Address" required type="email" />
      <Checkbox name="isAdmin" label="Is Admin" />
    </FormRepeater>

    <button type="submit">Submit</button>
  </form>
</template>
```

--------------------------------

### Dropzone Component Setup

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/file-fields.mdx

Illustrates how to create a dropzone component using Formwerk's `useFileField` composable in Vue.js. This example shows the integration of a custom Dropzone component with a label.

```vue
<script setup lang="ts">
import Dropzone from './Dropzone.vue';
</script>

<template>
  <Dropzone label="Dropzone" />
</template>
```

--------------------------------

### Vue ComboBox Component Example

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/comboboxes.mdx

Demonstrates the basic structure of a ComboBox component in Vue.js, including importing and using `ComboBox` and `OptionItem` components. This example shows how to pass props like `label` and `placeholder`.

```vue
<script setup lang="ts">
import ComboBox from './ComboBox.vue';
import OptionItem from './OptionItem.vue';
</script>

<template>
  <ComboBox label="Select a drink" placeholder="Search...">
    <OptionItem label="Coffee ☕️" value="coffee" />
    <OptionItem label="Tea 🍵" value="tea" />
    <OptionItem label="Milk 🥛" value="milk" />
  </ComboBox>
</template>
```

--------------------------------

### Vue Checkbox Component Setup

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/checkboxes.mdx

Demonstrates how to set up a Vue.js checkbox component using the `useCheckbox` composable from Formwerk's core library. It shows importing necessary types and functions, defining props, and utilizing the composable to get label and input binding objects.

```typescript
import { CheckboxProps, useCheckbox } from '@formwerk/core';

const props = defineProps<CheckboxProps>();

const { labelProps, inputProps } = useCheckbox(props);
```

```vue
<input v-bind="inputProps" />
<label v-bind="labelProps">{{ label }}</label>
```

--------------------------------

### TextField Component Script Setup

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/extras/_partials/_textField.mdx

This script setup defines the TextField component using Vue 3's Composition API. It imports necessary types and hooks from '@formwerk/core', defines props, and utilizes the `useTextField` hook to manage input, label, error, and description properties.

```typescript
import { type TextFieldProps, useTextField } from '@formwerk/core';

const props = defineProps<TextFieldProps>();

const {
  inputProps,
  labelProps,
  errorMessage,
  errorMessageProps,
  descriptionProps,
} = useTextField(props);
```

--------------------------------

### Locale and Calendar Support Example

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/calendars.mdx

Shows how to specify a custom calendar and locale for the Calendar component using the `@internationalized/date` library. This example uses the Islamic Umalqura calendar and the Arabic Saudi locale.

```vue
<script setup lang="ts">
import {
  createCalendar,
  IslamicUmalquraCalendar,
} from '@internationalized/date';
import Calendar from './Calendar.vue';

// This will import all calendars available.
// Resulting in a larger bundle size.
const calendar = createCalendar('islamic-umalqura');

// This will import only the Islamic Umalqura calendar.
// This allows tree-shaking, reducing the bundle size.
// const calendar = IslamicUmalquraCalendar;
</script>

<template>
  <Calendar label="Calendar" :calendar="calendar" locale="ar-SA" />
</template>
```

--------------------------------

### Calendar as a Picker Example

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/calendars.mdx

Demonstrates using the Calendar component as a date picker, often paired with a date field. It utilizes the `usePicker` composable from `@formwerk/core` and the popover API for UI.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { usePicker } from '@formwerk/core';
import Calendar from './Calendar.vue';

const { pickerProps, pickerTriggerProps } = usePicker({
  label: 'Pick a date',
});

const date = ref();
</script>

<template>
  <pre>Selected date: {{ date || 'none' }}</pre>
  <button v-bind="pickerTriggerProps">Open Calendar</button>

  <div v-bind="pickerProps" popover>
    <Calendar label="Calendar" v-model="date" />
  </div>
</template>
```

--------------------------------

### Project Structure Overview

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/README.md

Illustrates the typical directory and file structure of an Astro project integrated with Starlight. It highlights key directories for content, assets, and configuration.

```bash
.\n├── public/\n├── src/\n│   ├── assets/\n│   ├── content/\n│   │   ├── docs/\n│   │   └── config.ts\n│   └── env.d.ts\n├── astro.config.mjs\n├── package.json\n└── tsconfig.json
```

--------------------------------

### Create Starlight Project

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/README.md

Command to create a new Astro project using the Starlight template. This is the initial step for setting up a documentation site with Starlight.

```bash
npm create astro@latest -- --template starlight
```

--------------------------------

### Generic Checkbox Component

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/checkboxes.mdx

Provides an example of creating a type-safe and flexible Checkbox component by applying generics (`TValue`) to the component's script setup and `CheckboxProps`.

```vue
<script setup lang="ts" generic="TValue">
import { useCheckbox, type CheckboxProps } from '@formwerk/core';

const props = defineProps<CheckboxProps<TValue>>();

//...
</script>
```

--------------------------------

### Starlight Content Configuration

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/README.md

Configuration file for Starlight, defining the structure and behavior of documentation content. This includes setting up navigation, sidebars, and other documentation-specific features.

```typescript
import { defineCollection, defineEntry } from 'astro:content';

const docsCollection = defineCollection({
  type: 'content',
  schema: ({ image }) =>
    defineEntry({
      type: 'data',
      schema: {
        title: String,
        description: String,
        editUrl: ({ sourceFile }) =>
          `https://github.com/withastro/starlight/edit/main/examples/basics/${sourceFile.filepath}`,
        tableOfContents: {
          maxHeadingLevel: 3,
          minHeadingLevel: 2,
        },
        hero: {
          image: {
            asset: image(),
            alt: String,
          },
          text: String,
        },
        sidebar: {
          label: String,
          order: Number,
          customProps: {
            // Example of custom props
            // You can add any key-value pairs here
            // that you want to use in your sidebar.
            // For example, to add an icon:
            // icon: 'star'
          },
        },
      },
    }),
});

export function collections({
  // The `getEntry` function is available when using the `content` collection type.
  getEntry,
}) {
  return {
    docs: docsCollection,
  };
}
```

--------------------------------

### Astro Configuration

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/README.md

Configuration file for Astro projects, specifying project settings, integrations, and output formats. This file is crucial for customizing the build process.

```javascript
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

// https://astro.build/config
export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
    }),
  ],
});
```

--------------------------------

### Radio Group with HTML Constraint Validation

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/radios.mdx

Shows how to apply HTML5 constraint validation, specifically the `required` attribute, to a `RadioGroup` component. This example demonstrates the setup in `App.vue` with `RadioGroup` and `Radio` components.

```vue
<script setup lang="ts">
import Radio from './Radio.vue';
import RadioGroup from './RadioGroup.vue';
</script>

<template>
  <RadioGroup label="Radio Group" required>
    <Radio label="Radio 1" value="1" />
    <Radio label="Radio 2" value="2" />
    <Radio label="Radio 3" value="3" />
  </RadioGroup>
</template>
```

--------------------------------

### Basic Form with useForm

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/forms/index.mdx

Demonstrates the most basic form creation using the `useForm` composable from Formwerk. It initializes a form context and provides a `handleSubmit` function for form submission.

```ts
import { useForm } from '@formwerk/core';

const { handleSubmit } = useForm();

const onSubmit = handleSubmit((data) => {
  console.log(data);
});
```

--------------------------------

### Radio Component with Input Element Base

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/radios.mdx

Illustrates building a `RadioItem` component using a native HTML `input` element as the base. This example shows a complete `App.vue` setup with `RadioGroup` and `RadioItem` components.

```vue
<script setup lang="ts">
import RadioItem from './RadioItem.vue';
import RadioGroup from './RadioGroup.vue';
</script>

<template>
  <RadioGroup label="Radio Group">
    <RadioItem label="Radio 1" value="1" />
    <RadioItem label="Radio 2" value="2" />
    <RadioItem label="Radio 3" value="3" />
  </RadioGroup>
</template>
```

--------------------------------

### PreviewCard Component Usage

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/showcase.mdx

Demonstrates the usage of the PreviewCard component to display project showcases. Each card includes a title, description, link to a demo, a video source, and an external link flag.

```vue
<PreviewCard
  title="Number Fields with NumberFlow"
  description="Showcase of a number field using the excellent `@number-flow/vue` to animate value transitions."
  link="https://stackblitz.com/edit/formwerk-numberflow"
  src="/thumbs/number-flow.mp4"
  external
  client:idle
/>

<PreviewCard
  title="Date/Time Fields with NumberFlow"
  description="Showcase of a date/time field using the excellent `@number-flow/vue` to animate value transitions."
  link="https://stackblitz.com/edit/formwerk-numberflow-datetime"
  src="/thumbs/numberflow-datetime.mp4"
  external
  client:idle
/>

<PreviewCard
  title="FM Radio"
  description="Showcase of a slider built to look like a FM radio dial."
  link="https://stackblitz.com/edit/formwerk-fm-radio"
  src="/thumbs/fm-radio.mp4"
  external
  client:idle
/>
```

--------------------------------

### Switch Component without Input Element

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/switches.mdx

Illustrates creating a switch component without a native input element, using a custom element like an SVG. This approach also leverages the `useSwitch` composable for binding and functionality. The example includes a Vue application setup with `v-model` binding.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import Switch from './Switch.vue';

const isOn = ref(false);
</script>

<template>
  <Switch label="Theme" v-model="isOn" />
  <div>Switch is: {{ isOn }}</div>
</template>
```

--------------------------------

### Vue.js Switch Component Implementation

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/_partials/_switch.mdx

This snippet shows the Vue 3 script setup for the Switch component. It imports the `useSwitch` composable from `@formwerk/core` and defines props based on `SwitchProps`. It then utilizes the composable to get input, label, and error message props for binding to the template elements.

```vue
<script setup lang="ts">
import { useSwitch, type SwitchProps } from '@formwerk/core';

const props = defineProps<SwitchProps>();

const { inputProps, labelProps, isPressed, errorMessage, errorMessageProps } = useSwitch(props);
</script>

<template>
  <div class="switch">
    <label v-bind="labelProps">
      <div class="switch-control">
        <div class="switch-knob"></div>
      </div>

      <input v-bind="inputProps" type="checkbox" class="sr-only" />

      {{ label }}
    </label>

    <div v-bind="errorMessageProps" class="error">
      {{ errorMessage }}
    </div>
  </div>
</template>
```

--------------------------------

### Option Component API

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/selects.mdx

API documentation for the Option component, detailing its props and return values from the `useOption` composable.

```APIDOC
Option Component API:

Props (useOption):
  - (Details not provided in source, refer to <MdxTableAPI typeName="OptionProps" />)

Returns (useOption):
  - (Details not provided in source, refer to <MdxTableAPI fnName="useOption" />)
```

--------------------------------

### Switch Component with HTML Constraint Validation

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/switches.mdx

Shows how to implement HTML constraint validation for a switch component, specifically when using an input[type="checkbox"] as the base. It highlights the use of the `required` attribute and its effect on the switch's validation state. The example includes a simple Vue application setup.

```vue
<script setup lang="ts">
import Switch from './Switch.vue';
</script>

<template>
  <Switch label="HTML Validation" required />
</template>
```

--------------------------------

### Grid Layout for Showcases

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/showcase.mdx

A responsive grid layout using Tailwind CSS classes to display project showcase cards. The grid adjusts the number of columns based on screen size.

```html
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <!-- PreviewCard components go here -->
</div>
```

--------------------------------

### Formwerk Radio Component - Vue Template and Script

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/_partials/_radioItem.mdx

This snippet shows the Vue 3 script setup for the Radio component, importing necessary types and hooks from '@formwerk/core'. It defines props and uses the `useRadio` hook to get label and input properties. The template renders a radio button with a circle indicator and a label, applying the props appropriately.

```vue
<script setup lang="ts">
import { type RadioProps, useRadio } from '@formwerk/core';

const props = defineProps<RadioProps>();

const { labelProps, inputProps } = useRadio(props);
</script>

<template>
  <div class="radio-item" v-bind="inputProps">
    <div class="radio-circle">
      <div class="radio-circle-inner"></div>
    </div>

    <span v-bind="labelProps">{{ label }}</span>
  </div>
</template>
```

--------------------------------

### Select Component API

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/selects.mdx

API documentation for the Select component, detailing its props and return values from the `useSelect` composable.

```APIDOC
Select Component API:

Props (useSelect):
  - (Details not provided in source, refer to <MdxTableAPI typeName="SelectProps" />)

Returns (useSelect):
  - (Details not provided in source, refer to <MdxTableAPI fnName="useSelect" />)
```

--------------------------------

### Disabling Calendar Views Example

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/calendars.mdx

Shows how to restrict the available views (e.g., years, months, weeks) in the Calendar component by using the `allowedViews` prop. This example disables the year view.

```vue
<script setup lang="ts">
import Calendar from './Calendar.vue';
</script>

<template>
  <Calendar label="Calendar" :allowed-views="['weeks', 'months']" />
</template>
```

--------------------------------

### Building an Option Component with useOption

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/selects.mdx

Demonstrates how to create an option component using the `useOption` composable from FormwerkJS. It highlights the use of `OptionProps` for defining component props and accessing the `label` for display.

```vue
<script setup lang="ts">
import { useOption } from 'formwerk';

interface OptionProps {
  label: string;
  value: any;
}

const { option } = useOption<OptionProps>();
</script>

<template>
  <li v-bind="option.attrs" :class="option.class">
    {{ option.label }}
  </li>
</template>
```

--------------------------------

### Step Form Navigation with `useStepFormFlow`

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/forms/stepped-form-flow.mdx

Demonstrates how to use the `useStepFormFlow` composable to manage a multi-step form. It includes logic for navigating between steps, highlighting the active step using `isCurrentStep`, and handling form submission with `onDone`. The example utilizes Zod for schema validation.

```vue
<script setup lang="ts">
import { z } from 'zod';
import { useStepFormFlow } from '@formwerk/core';
import TextField from './TextField.vue';
import Checkbox from './Checkbox.vue';

const {
  formProps,
  nextButtonProps,
  previousButtonProps,
  isLastStep,
  FormStep,
  onDone,
  goToStep,
  isCurrentStep,
} = useStepFormFlow();

const info = z.object({
  name: z.string().min(1),
  email: z.string().email(),
});

const address = z.object({
  city: z.string().min(1),
  zip: z.string().min(1),
});

const terms = z.object({
  terms: z.boolean().refine((val) => val, {
    message: 'You must agree to the terms and conditions',
  }),
});

onDone((data) => {
  console.log(JSON.stringify(data.toObject(), null, 2));
});
</script>

<template>
  <div>
    <button :data-active="isCurrentStep('info')" @click="goToStep('info')">
      Info
    </button>

    <button
      :data-active="isCurrentStep('address')"
      @click="goToStep('address')"
    >
      Address
    </button>

    <button :data-active="isCurrentStep('terms')" @click="goToStep('terms')">
      Terms
    </button>
  </div>

  <form v-bind="formProps">
    <FormStep name="info" :schema="info">
      <div>Step 1</div>
      <TextField name="name" label="Name" />
      <TextField name="email" label="Email" />
    </FormStep>

    <FormStep name="address" :schema="address">
      <div>Step 2</div>
      <TextField name="city" label="City" />
      <TextField name="zip" label="ZIP" />
    </FormStep>

    <FormStep name="terms" :schema="terms">
      <div>Step 3</div>
      <Checkbox name="terms" label="I agree to the terms and conditions" />
    </FormStep>

    <button v-bind="previousButtonProps">⬅️ Previous</button>

    <button v-bind="nextButtonProps">
      {{ isLastStep ? 'Submit' : 'Next ➡️' }}
    </button>
  </form>
</template>

<style>
button[data-active='true'] {
  background-color: #000;
  color: #fff;
}
</style>
```

--------------------------------

### Creating a Stepped Form Flow with useStepFormFlow

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/forms/stepped-form-flow.mdx

Demonstrates how to use the `useStepFormFlow` composable to create a multi-step form. It covers binding form properties, navigation buttons, handling the completion of the form, and structuring form steps.

```vue
<script setup lang="ts">
import { useStepFormFlow } from '@formwerk/core';
import TextField from './TextField.vue';
import Checkbox from './Checkbox.vue';

const {
  formProps,
  nextButtonProps,
  previousButtonProps,
  isLastStep,
  FormStep,
  onDone,
} = useStepFormFlow();

onDone((data) => {
  console.log(JSON.stringify(data.toObject(), null, 2));
});
</script>

<template>
  <form v-bind="formProps">
    <FormStep>
      <div>Step 1</div>
      <TextField name="name" label="Name" />
      <TextField name="email" label="Email" />
    </FormStep>

    <FormStep>
      <div>Step 2</div>
      <TextField name="city" label="City" />
      <TextField name="zip" label="ZIP" />
    </FormStep>

    <FormStep>
      <div>Step 3</div>
      <Checkbox name="terms" label="I agree to the terms and conditions" />
    </FormStep>

    <button v-bind="previousButtonProps">⬅️ Previous</button>

    <button v-bind="nextButtonProps">
      {{ isLastStep ? 'Submit' : 'Next ➡️' }}
    </button>
  </form>
</template>
```

--------------------------------

### NumberFlow Date/Time Field Example

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/date-fields.mdx

Showcases a date/time field implementation using the `@number-flow/vue` library for animated value transitions. This example demonstrates advanced UI capabilities for date and time inputs.

```vue
<PreviewCard
  title="NumberFlow"
  description="Showcase of a date/time field using the excellent `@number-flow/vue` to animate value transitions."
  link="https://stackblitz.com/edit/formwerk-numberflow-datetime"
  src="/thumbs/numberflow-datetime.mp4"
  external
  client:idle
/>
```

--------------------------------

### Console Timing and Time Logging

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/components/Repl/srcdoc.html

Enhances console.time, console.timeLog, and console.timeEnd to record elapsed time and send it to the parent window. It uses a Map to store start times for each timer label.

```javascript
const timers = new Map();
const original_time = console.time;
const original_timelog = console.timeLog;
const original_timeend = console.timeEnd;

console.time = (label = 'default') => {
  original_time(label);
  timers.set(label, performance.now());
};

console.timeLog = (label = 'default') => {
  original_timelog(label);
  const now = performance.now();
  if (timers.has(label)) {
    parent.postMessage(
      {
        action: 'console',
        level: 'system-log',
        args: [`${label}: ${now - timers.get(label)}ms`]
      },
      '\*'
    );
  } else {
    parent.postMessage(
      {
        action: 'console',
        level: 'system-warn',
        args: [`Timer '${label}' does not exist`]
      },
      '\*'
    );
  }
};

console.timeEnd = (label = 'default') => {
  original_timeend(label);
  const now = performance.now();
  if (timers.has(label)) {
    parent.postMessage(
      {
        action: 'console',
        level: 'system-log',
        args: [`${label}: ${now - timers.get(label)}ms`]
      },
      '\*'
    );
  } else {
    parent.postMessage(
      {
        action: 'console',
        level: 'system-warn',
        args: [`Timer '${label}' does not exist`]
      },
      '\*'
    );
  }
  timers.delete(label);
};
```

--------------------------------

### Vue Component Implementation

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/_partials/_switchCustom.mdx

This snippet shows the Vue 3 `<script setup>` implementation for the Switch component. It imports necessary types and hooks from '@formwerk/core', defines props, and utilizes the `useSwitch` hook to manage component logic and state. The template renders the switch's visual elements and error messages.

```vue
<script setup lang="ts">
import { useSwitch, type SwitchProps } from '@formwerk/core';

const props = defineProps<SwitchProps>();

const { inputProps, labelProps, isPressed, errorMessage, errorMessageProps } = useSwitch(props);
</script>

<template>
  <div class="switch">
    <div class="switch-wrapper" v-bind="inputProps">
      <div class="switch-control">
        <div class="switch-knob"></div>
      </div>

      <div class="switch-label" v-bind="labelProps">{{ label }}</div>
    </div>

    <div v-bind="errorMessageProps" class="error">
      {{ errorMessage }}
    </div>
  </div>
</template>
```

--------------------------------

### Speak Field Component Example

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/custom-fields.mdx

Demonstrates the usage of a custom 'SpeakField' component within an App.vue file, showcasing how to pass props like 'name', 'label', and 'sentence'. This example illustrates the integration of a custom field into a Formwerk application.

```vue
<script setup lang="ts">
import SpeakField from './SpeakField.vue';
</script>

<template>
  <SpeakField name="challenge" label="Say the following" sentence="I went to the store" />
</template>
```

--------------------------------

### Option Group Component API

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/selects.mdx

API documentation for the Option Group component, detailing its props and return values from the `useOptionGroup` composable.

```APIDOC
Option Group Component API:

Props (useOptionGroup):
  - (Details not provided in source, refer to <MdxTableAPI typeName="OptionGroupProps" />)

Returns (useOptionGroup):
  - (Details not provided in source, refer to <MdxTableAPI fnName="useOptionGroup" />)
```

--------------------------------

### Disabled DateField Usage

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/date-fields.mdx

Provides an example of disabling the DateField component using the `disabled` prop. Disabled fields are not validated or submitted.

```vue
<script setup lang="ts">
import DateField from './DateField.vue';
</script>

<template>
  <DateField label="Disabled" :value="new Date('2025-02-11')" disabled />
</template>
```

--------------------------------

### TextField Disabled Example

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/text-fields.mdx

Demonstrates how to disable a TextField component, making it non-interactive and preventing validation and submission. Disabled fields cannot be modified by the user.

```vue
<script setup lang="ts">
import TextField from './TextField.vue';
</script>

<template>
  <TextField label="Disabled Field" disabled />
</template>
```

--------------------------------

### Formwerk ComboBox Component Ecosystem

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/comboboxes.mdx

Explains the core components provided by Formwerk for building ComboBox fields, including the main ComboBox component and its supporting Option and OptionGroup components. It also mentions the use of hooks like `useComboBox` for implementation.

```javascript
// Formwerk handles these parts and abstracts them into the following component ecosystem:
// - ComboBox: Contains the input, button, and listbox parts. You will use `useComboBox` to build it.
// - Option: Represents an option in the list. You will use `useOption` to build it.
// - OptionGroup: Represents a group of options in the list. You will use `useOptionGroup` to build it.

// Notice that the listbox is not a separate component. This is because popups today can be done in different ways, so Formwerk while offers the open state along with some accessability attributes, it does not have a specific popup component implementation. But we offer out of the box support for [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) if you happen to use one for the listbox element.
```

--------------------------------

### StepResolveContext API Reference

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/forms/stepped-form-flow.mdx

Provides details on the `StepResolveContext` object available within the `onBeforeStepResolve` callback. This context object contains information about the current step, form values, navigation direction, and methods to control the flow.

```APIDOC
StepResolveContext:
  currentStep: object
    - The current form step object.
  values: object
    - An object containing the current form values.
  next: function
    - A function that resolves to the next step object in the default flow.
    - Returns: Promise<Step>
  direction: 'next' | 'previous'
    - The direction of navigation.

Example Usage in onBeforeStepResolve:

onBeforeStepResolve(async ({ currentStep, values, next, direction }) => {
  const nextStep = await next();
  if (nextStep.name === 'school' && !values.isStudent) {
    return direction === 'next' ? 'address' : 'info';
  }
  return next();
});

// Related properties in StepResolveContext:
// - You can use `currentStep`, `values`, `direction` to make decisions.
// - The `next()` function is crucial for proceeding with the default flow or getting the next step's information.
// - Refer to the API reference for a complete list of properties and methods available in StepResolveContext.
```

--------------------------------

### Formatted Number Field with Currency

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/number-fields.mdx

Shows how to format the NumberField value using `formatOptions` compatible with Intl.NumberFormat. This example formats the number as currency.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import NumberField from './NumberField.vue';

const value = ref(1000);
</script>

<template>
  <NumberField
    label="Amount"
    v-model="value"
    step="100"
    :formatOptions="{ style: 'currency', currency: 'USD' }"
  />
</template>
```

--------------------------------

### Indeterminate Checkbox Example

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/checkboxes.mdx

Demonstrates how to use the `indeterminate` prop on a Checkbox component to create a tri-state checkbox, useful for checkbox groups with mixed states.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import Checkbox from './Checkbox.vue';
</script>

<template>
  <Checkbox label="Terms" indeterminate />
</template>
```

--------------------------------

### Switch Component with Input Element

Source: https://github.com/formwerkjs/formwerk.dev/blob/main/src/content/docs/guides/fields/switches.mdx

Demonstrates building a switch component using an input[type="checkbox"] as the base element. It shows how to use the `useSwitch` composable and bind its properties to the DOM elements for functionality and accessibility. Includes a basic Vue application setup with `v-model` binding.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import Switch from './Switch.vue';

const isOn = ref(false);
</script>

<template>
  <Switch label="Theme" v-model="isOn" />

  <div>Switch is: {{ isOn }}</div>
</template>
```