Input OTP

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