From a10c6fe8e6d92317e2064d7a3ad0d23962150777 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 27 Oct 2024 19:01:03 -0400
Subject: [PATCH] next: input otp component

---
 sites/docs/src/__registry__/index.js          | 16 +++++
 .../docs/src/content/components/input-otp.md  |  8 +++
 .../default/example/input-otp-form.svelte     | 59 +++++++++++++++++++
 .../new-york/example/input-otp-form.svelte    | 59 +++++++++++++++++++
 sites/docs/src/routes/(app)/+page.server.ts   |  2 +
 .../src/routes/(app)/docs/+layout.server.ts   |  2 +
 6 files changed, 146 insertions(+)
 create mode 100644 sites/docs/src/lib/registry/default/example/input-otp-form.svelte
 create mode 100644 sites/docs/src/lib/registry/new-york/example/input-otp-form.svelte

diff --git a/sites/docs/src/__registry__/index.js b/sites/docs/src/__registry__/index.js
index c998c852c..5669d0911 100644
--- a/sites/docs/src/__registry__/index.js
+++ b/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",
diff --git a/sites/docs/src/content/components/input-otp.md b/sites/docs/src/content/components/input-otp.md
index 2266cb7a6..0a03bd555 100644
--- a/sites/docs/src/content/components/input-otp.md
+++ b/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>
diff --git a/sites/docs/src/lib/registry/default/example/input-otp-form.svelte b/sites/docs/src/lib/registry/default/example/input-otp-form.svelte
new file mode 100644
index 000000000..f6f2000af
--- /dev/null
+++ b/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>
diff --git a/sites/docs/src/lib/registry/new-york/example/input-otp-form.svelte b/sites/docs/src/lib/registry/new-york/example/input-otp-form.svelte
new file mode 100644
index 000000000..aceff3f2e
--- /dev/null
+++ b/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>
diff --git a/sites/docs/src/routes/(app)/+page.server.ts b/sites/docs/src/routes/(app)/+page.server.ts
index 8dee6183d..f65a63bcc 100644
--- a/sites/docs/src/routes/(app)/+page.server.ts
+++ b/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) {
diff --git a/sites/docs/src/routes/(app)/docs/+layout.server.ts b/sites/docs/src/routes/(app)/docs/+layout.server.ts
index a9358f050..bd99042f6 100644
--- a/sites/docs/src/routes/(app)/docs/+layout.server.ts
+++ b/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)),
 	};
 };