Input OTP

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