input-otp

1"use client"
2 
3import * as React from "react"
4import { OTPInput, OTPInputContext } from "input-otp"
5import { MinusIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function InputOTP({
10  className,
11  containerClassName,
12  ...props
13}: React.ComponentProps<typeof OTPInput> & {
14  containerClassName?: string
15}) {
16  return (
17    <OTPInput
18      data-slot="input-otp"
19      containerClassName={cn(
20        "flex items-center gap-2 has-disabled:opacity-50",
21        containerClassName
22      )}
23      className={cn("disabled:cursor-not-allowed", className)}
24      {...props}
25    />
26  )
27}
28 
29function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
30  return (
31    <div
32      data-slot="input-otp-group"
33      className={cn("flex items-center", className)}
34      {...props}
35    />
36  )
37}
38 
39function InputOTPSlot({
40  index,
41  className,
42  ...props
43}: React.ComponentProps<"div"> & {
44  index: number
45}) {
46  const inputOTPContext = React.useContext(OTPInputContext)
47  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
48 
49  return (
50    <div
51      data-slot="input-otp-slot"
52      data-active={isActive}
53      className={cn(
54        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
55        className
56      )}
57      {...props}
58    >
59      {char}
60      {hasFakeCaret && (
61        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
62          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
63        </div>
64      )}
65    </div>
66  )
67}
68 
69function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
70  return (
71    <div data-slot="input-otp-separator" role="separator" {...props}>
72      <MinusIcon />
73    </div>
74  )
75}
76 
77export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }