input-otp

1"use client"
2 
3import * as React from "react"
4import { OTPInput, OTPInputContext } from "input-otp"
5import { Dot } 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-1 has-disabled:opacity-50",
21        containerClassName
22      )}
23      className={cn(
24        "disabled:cursor-not-allowed",
25        "text-base caret-transparent selection:bg-transparent selection:text-transparent file:bg-transparent file:text-transparent",
26        className
27      )}
28      {...props}
29    />
30  )
31}
32 
33function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
34  return (
35    <div
36      data-slot="input-otp-group"
37      className={cn("flex items-center gap-1 sm:gap-2", className)}
38      {...props}
39    />
40  )
41}
42 
43function InputOTPSlot({
44  index,
45  className,
46  variant = "default",
47  ...props
48}: React.ComponentProps<"div"> & {
49  index: number
50  variant?: "default" | "pill"
51}) {
52  const inputOTPContext = React.useContext(OTPInputContext)
53  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
54 
55  return (
56    <div
57      data-slot="input-otp-slot"
58      data-active={isActive}
59      className={cn(
60        "text-foreground relative flex h-10 w-10 items-center justify-center text-sm font-semibold",
61        // Default variant: matches shadcn input styling
62        variant === "default" && [
63          "dark:bg-input/30 border-input rounded-md border bg-transparent shadow-xs",
64          "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:ring-[3px]",
65          "aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 data-[active=true]:aria-invalid:border-destructive",
66        ],
67        // Pill variant: rounded with muted background
68        variant === "pill" && [
69          "border-input bg-muted rounded-lg border",
70          "data-[active=true]:ring-ring data-[active=true]:ring-offset-background data-[active=true]:z-10 data-[active=true]:ring-2 data-[active=true]:ring-offset-2",
71        ],
72        className
73      )}
74      {...props}
75    >
76      {char}
77      {hasFakeCaret && (
78        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
79// … truncated