input-otp

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