Input Otp

1"use client";
2 
3import { OTPInput, OTPInputContext } from "input-otp";
4import { Minus } from "lucide-react";
5import { forwardRef, useContext } from "react";
6import { cn } from "@/lib/utils";
7import { focusRing, glass } from "@/lib/glass";
8 
9export const InputOTP = forwardRef<
10  HTMLInputElement,
11  React.ComponentPropsWithoutRef<typeof OTPInput>
12>(({ containerClassName, ...props }, ref) => (
13  <OTPInput
14    ref={ref}
15    containerClassName={cn(
16      "flex items-center gap-2 has-[:disabled]:opacity-45",
17      containerClassName,
18    )}
19    {...props}
20  />
21));
22InputOTP.displayName = "InputOTP";
23 
24export const InputOTPGroup = forwardRef<
25  HTMLDivElement,
26  React.ComponentProps<"div">
27>(({ className, ...props }, ref) => (
28  <div
29    ref={ref}
30    className={cn("flex items-center gap-1.5", className)}
31    {...props}
32  />
33));
34InputOTPGroup.displayName = "InputOTPGroup";
35 
36export const InputOTPSeparator = forwardRef<
37  HTMLDivElement,
38  React.ComponentProps<"div">
39>(({ className, ...props }, ref) => (
40  <div
41    ref={ref}
42    role="separator"
43    className={cn("text-current/35", className)}
44    {...props}
45  >
46    <Minus className="size-4" aria-hidden />
47  </div>
48));
49InputOTPSeparator.displayName = "InputOTPSeparator";
50 
51export const InputOTPSlot = forwardRef<
52  HTMLDivElement,
53  React.ComponentProps<"div"> & { index: number }
54>(({ index, className, ...props }, ref) => {
55  const ctx = useContext(OTPInputContext);
56  const slot = ctx?.slots[index];
57  const char = slot?.char ?? null;
58  const isActive = slot?.isActive ?? false;
59 
60  return (
61    <div
62      ref={ref}
63      className={cn(
64        glass,
65        focusRing,
66        "relative flex size-10 items-center justify-center rounded-xl border text-sm font-medium tabular-nums transition-all",
67        isActive && "z-10 ring-2 ring-blue-500/40",
68        className,
69      )}
70      {...props}
71    >
72      {char}
73      {slot?.hasFakeCaret && (
74        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
75          <div className="h-4 w-px animate-pulse bg-current duration-1000" />
76        </div>
77      )}
78    </div>
79  );
80});
81InputOTPSlot.displayName = "InputOTPSlot";