feat: add input-otp (#2919)

* feat: add input-otp

* feat: update input-otp and add examples

* feat(input-otp): add controlled and form examples

* chore(input-otp): update to latest

* docs(www): fix example code for input-otp

* fix(www): disable menu

apps/www/registry/default/example/input-otp-controlled.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/registry/default/ui/input-otp"
+
+export default function InputOTPControlled() {
+  const [value, setValue] = React.useState("")
+
+  return (
+    <div className="space-y-2">
+      <InputOTP
+        maxLength={6}
+        value={value}
+        onChange={(value) => setValue(value)}
+        render={({ slots }) => (
+          <InputOTPGroup>
+            {slots.map((slot, index) => (
+              <InputOTPSlot key={index} {...slot} />
+            ))}{" "}
+          </InputOTPGroup>
+        )}
+      />
+      <div className="text-center text-sm">
+        {value === "" ? (
+          <>Enter your one-time password.</>
+        ) : (
+          <>You entered: {value}</>
+        )}
+      </div>
+    </div>
+  )
+}

apps/www/registry/default/example/input-otp-demo.tsx

@@ -0,0 +1,29 @@
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/default/ui/input-otp"
+
+export default function InputOTPDemo() {
+  return (
+    <InputOTP
+      maxLength={6}
+      render={({ slots }) => (
+        <>
+          <InputOTPGroup>
+            {slots.slice(0, 3).map((slot, index) => (
+              <InputOTPSlot key={index} {...slot} />
+            ))}{" "}
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            {slots.slice(3).map((slot, index) => (
+              <InputOTPSlot key={index + 3} {...slot} />
+            ))}
+          </InputOTPGroup>
+        </>
+      )}
+    />
+  )
+}

apps/www/registry/default/example/input-otp-form.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/default/ui/form"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/registry/default/ui/input-otp"
+import { toast } from "@/registry/default/ui/use-toast"
+
+const FormSchema = z.object({
+  pin: z.string().min(6, {
+    message: "Your one-time password must be 6 characters.",
+  }),
+})
+
+export default function InputOTPForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      pin: "",
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="pin"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>One-Time Password</FormLabel>
+              <FormControl>
+                <InputOTP
+                  maxLength={6}
+                  render={({ slots }) => (
+                    <InputOTPGroup>
+                      {slots.map((slot, index) => (
+                        <InputOTPSlot key={index} {...slot} />
+                      ))}{" "}
+                    </InputOTPGroup>
+                  )}
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>
+                Please enter the one-time password sent to your phone.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}

apps/www/registry/default/example/input-otp-pattern.tsx

@@ -0,0 +1,23 @@
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/registry/default/ui/input-otp"
+
+export default function InputOTPPattern() {
+  return (
+    <InputOTP
+      maxLength={6}
+      pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+      render={({ slots }) => (
+        <InputOTPGroup>
+          {slots.map((slot, index) => (
+            <InputOTPSlot key={index} {...slot} />
+          ))}{" "}
+        </InputOTPGroup>
+      )}
+    />
+  )
+}

apps/www/registry/default/example/input-otp-separator.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/default/ui/input-otp"
+
+export default function InputOTPWithSeparator() {
+  return (
+    <InputOTP
+      maxLength={6}
+      render={({ slots }) => (
+        <InputOTPGroup className="gap-2">
+          {slots.map((slot, index) => (
+            <React.Fragment key={index}>
+              <InputOTPSlot className="rounded-md border" {...slot} />
+              {index !== slots.length - 1 && <InputOTPSeparator />}
+            </React.Fragment>
+          ))}{" "}
+        </InputOTPGroup>
+      )}
+    />
+  )
+}