Input OTP

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiMinus } from "@mdi/js";
5import { OTPInput, OTPInputContext } from "input-otp";
6import * as React from "react";
7 
8import { cn } from "@/lib/utils";
9 
10function InputOTP({
11  className,
12  containerClassName,
13  ...props
14}: React.ComponentProps<typeof OTPInput> & {
15  containerClassName?: string;
16}) {
17  return (
18    <OTPInput
19      data-slot="input-otp"
20      containerClassName={cn(
21        "flex items-center gap-2 has-disabled:opacity-50",
22        containerClassName,
23      )}
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
33      data-slot="input-otp-group"
34      className={cn("flex items-center", className)}
35      {...props}
36    />
37  );
38}
39 
40function InputOTPSlot({
41  index,
42  className,
43  ...props
44}: React.ComponentProps<"div"> & {
45  index: number;
46}) {
47  const inputOTPContext = React.useContext(OTPInputContext);
48  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
49 
50  return (
51    <div
52      data-slot="input-otp-slot"
53      data-active={isActive}
54      className={cn(
55        "bg-white data-[active=true]:border-ring data-[active=true]:ring-primary-500 data-[active=true]:aria-invalid:ring-destructive dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input text-md relative flex h-9 w-9 items-center justify-center border-y border-r transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[2px]",
56        className,
57      )}
58      {...props}
59    >
60      {char}
61      {hasFakeCaret && (
62        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
63          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
64        </div>
65      )}
66    </div>
67  );
68}
69 
70function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
71  return (
72    <div data-slot="input-otp-separator" role="separator" {...props}>
73      <Icon path={mdiMinus} className="text-muted-foreground size-6" />
74    </div>
75  );
76}
77 
78export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };