next: input otp component

sites/docs/src/__registry__/index.js

@@ -539,6 +539,14 @@ export const Index = {
 			files: ["../lib/registry/default/example/input-otp-demo.svelte"],
 			raw: () => import("../lib/registry/default/example/input-otp-demo.svelte?raw").then((m) => m.default),
 		},
+		"input-otp-form": {
+			name: "input-otp-form",
+			type: "registry:example",
+			registryDependencies: ["input-otp","form"],
+			component: () => import("../lib/registry/default/example/input-otp-form.svelte").then((m) => m.default),
+			files: ["../lib/registry/default/example/input-otp-form.svelte"],
+			raw: () => import("../lib/registry/default/example/input-otp-form.svelte?raw").then((m) => m.default),
+		},
 		"input-otp-pattern": {
 			name: "input-otp-pattern",
 			type: "registry:example",
@@ -1596,6 +1604,14 @@ export const Index = {
 			files: ["../lib/registry/new-york/example/input-otp-demo.svelte"],
 			raw: () => import("../lib/registry/new-york/example/input-otp-demo.svelte?raw").then((m) => m.default),
 		},
+		"input-otp-form": {
+			name: "input-otp-form",
+			type: "registry:example",
+			registryDependencies: ["input-otp","form"],
+			component: () => import("../lib/registry/new-york/example/input-otp-form.svelte").then((m) => m.default),
+			files: ["../lib/registry/new-york/example/input-otp-form.svelte"],
+			raw: () => import("../lib/registry/new-york/example/input-otp-form.svelte?raw").then((m) => m.default),
+		},
 		"input-otp-pattern": {
 			name: "input-otp-pattern",
 			type: "registry:example",

sites/docs/src/content/components/input-otp.md

@@ -119,3 +119,11 @@ You can use the `InputOTP.Separator` component to add a separator between the gr
   {/snippet}
 </InputOTP.Root>
 ```
+
+### Form
+
+<ComponentPreview name="input-otp-form">
+
+<div></div>
+
+</ComponentPreview>

sites/docs/src/lib/registry/default/example/input-otp-form.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" module>
+	import { z } from "zod";
+	export const formSchema = z.object({
+		pin: z.string().min(6, {
+			message: "Your one-time password must be at least 6 characters.",
+		}),
+	});
+	export type FormSchema = typeof formSchema;
+</script>
+
+<script lang="ts">
+	import SuperDebug, { type Infer, type SuperValidated, superForm } from "sveltekit-superforms";
+	import { zodClient } from "sveltekit-superforms/adapters";
+	import { toast } from "svelte-sonner";
+	import { browser } from "$app/environment";
+	import * as InputOTP from "$lib/registry/default/ui/input-otp/index.js";
+	import * as Form from "$lib/registry/default/ui/form/index.js";
+	import { page } from "$app/stores";
+
+	let { form: data = $page.data.inputOtp }: { form: SuperValidated<Infer<FormSchema>> } =
+		$props();
+
+	const form = superForm(data, {
+		validators: zodClient(formSchema),
+		onUpdated: ({ form: f }) => {
+			if (f.valid) {
+				toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
+			} else {
+				toast.error("Please fix the errors in the form.");
+			}
+		},
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<form action="/?/inputOtp" method="POST" class="w-2/3 space-y-6" use:enhance>
+	<Form.Field {form} name="pin">
+		<Form.Control>
+			{#snippet children({ props })}
+				<InputOTP.Root maxlength={6} {...props} bind:value={$formData.pin}>
+					{#snippet children({ cells })}
+						<InputOTP.Group>
+							{#each cells as cell}
+								<InputOTP.Slot {cell} />
+							{/each}
+						</InputOTP.Group>
+					{/snippet}
+				</InputOTP.Root>
+			{/snippet}
+		</Form.Control>
+		<Form.Description>Please enter the one-time password sent to your phone.</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Button>Submit</Form.Button>
+	{#if browser}
+		<SuperDebug data={$formData} />
+	{/if}
+</form>

sites/docs/src/lib/registry/new-york/example/input-otp-form.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" module>
+	import { z } from "zod";
+	export const formSchema = z.object({
+		pin: z.string().min(6, {
+			message: "Your one-time password must be at least 6 characters.",
+		}),
+	});
+	export type FormSchema = typeof formSchema;
+</script>
+
+<script lang="ts">
+	import SuperDebug, { type Infer, type SuperValidated, superForm } from "sveltekit-superforms";
+	import { zodClient } from "sveltekit-superforms/adapters";
+	import { toast } from "svelte-sonner";
+	import { browser } from "$app/environment";
+	import * as InputOTP from "$lib/registry/new-york/ui/input-otp/index.js";
+	import * as Form from "$lib/registry/new-york/ui/form/index.js";
+	import { page } from "$app/stores";
+
+	let { form: data = $page.data.inputOtp }: { form: SuperValidated<Infer<FormSchema>> } =
+		$props();
+
+	const form = superForm(data, {
+		validators: zodClient(formSchema),
+		onUpdated: ({ form: f }) => {
+			if (f.valid) {
+				toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
+			} else {
+				toast.error("Please fix the errors in the form.");
+			}
+		},
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<form action="/?/inputOtp" method="POST" class="w-2/3 space-y-6" use:enhance>
+	<Form.Field {form} name="pin">
+		<Form.Control>
+			{#snippet children({ props })}
+				<InputOTP.Root maxlength={6} {...props} bind:value={$formData.pin}>
+					{#snippet children({ cells })}
+						<InputOTP.Group>
+							{#each cells as cell}
+								<InputOTP.Slot {cell} />
+							{/each}
+						</InputOTP.Group>
+					{/snippet}
+				</InputOTP.Root>
+			{/snippet}
+		</Form.Control>
+		<Form.Description>Please enter the one-time password sent to your phone.</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Button>Submit</Form.Button>
+	{#if browser}
+		<SuperDebug data={$formData} />
+	{/if}
+</form>

sites/docs/src/routes/(app)/+page.server.ts

@@ -13,6 +13,7 @@ import { formSchema as textareaSchema } from "$lib/registry/default/example/text
 import { formSchema as comboboxFormSchema } from "$lib/registry/default/example/combobox-form.svelte";
 import { formSchema as datePickerFormSchema } from "$lib/registry/default/example/date-picker-form.svelte";
 import { formSchema as checkboxMultipleSchema } from "$lib/registry/default/example/checkbox-form-multiple.svelte";
+import { formSchema as inputOtpSchema } from "$lib/registry/default/example/input-otp-form.svelte";
 
 export const actions: Actions = {
 	username: async (e) => handleForm(e, formSchema),
@@ -24,6 +25,7 @@ export const actions: Actions = {
 	textarea: async (e) => handleForm(e, textareaSchema),
 	combobox: async (e) => handleForm(e, comboboxFormSchema),
 	datePicker: async (e) => handleForm(e, datePickerFormSchema),
+	inputOtp: async (e) => handleForm(e, inputOtpSchema),
 };
 
 async function handleForm(event: RequestEvent, schema: AnyZodObject) {

sites/docs/src/routes/(app)/docs/+layout.server.ts

@@ -11,6 +11,7 @@ import { formSchema as textareaSchema } from "$lib/registry/default/example/text
 import { formSchema as comboboxFormSchema } from "$lib/registry/default/example/combobox-form.svelte";
 import { formSchema as datePickerFormSchema } from "$lib/registry/default/example/date-picker-form.svelte";
 import { formSchema as checkboxMultipleSchema } from "$lib/registry/default/example/checkbox-form-multiple.svelte";
+import { formSchema as inputOtpSchema } from "$lib/registry/default/example/input-otp-form.svelte";
 
 export const load: LayoutServerLoad = async () => {
 	return {
@@ -23,6 +24,7 @@ export const load: LayoutServerLoad = async () => {
 		textarea: await superValidate(zod(textareaSchema)),
 		combobox: await superValidate(zod(comboboxFormSchema)),
 		datePicker: await superValidate(zod(datePickerFormSchema)),
+		inputOtp: await superValidate(zod(inputOtpSchema)),
 	};
 };