Input OTP

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