Input OTP

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