Input OTP

1"use client"
2 
3import * as React from "react"
4import {
5  InputOTP as BaseInputOTP,
6  InputOTPGroup as BaseInputOTPGroup,
7  InputOTPSeparator,
8  InputOTPSlot as BaseInputOTPSlot,
9} from "@/components/ui/input-otp"
10import { cn } from "@/lib/utils"
11 
12export interface InputOTPProps extends React.ComponentProps<typeof BaseInputOTP> {
13  glow?: boolean
14}
15 
16export interface InputOTPGroupProps extends React.ComponentProps<typeof BaseInputOTPGroup> {
17  glow?: boolean
18}
19 
20export interface InputOTPSlotProps extends React.ComponentProps<typeof BaseInputOTPSlot> {
21  glow?: boolean
22}
23 
24/**
25 * Glass UI Input OTP - Enhanced OTP input with glassy effects
26 */
27export const InputOTP = React.forwardRef<
28  React.ElementRef<typeof BaseInputOTP>,
29  InputOTPProps
30>(({ className, variant = "glass", glow = false, ...props }, ref) => {
31  return (
32    <BaseInputOTP
33      ref={ref}
34      variant={variant}
35      className={cn(
36        glow && "shadow-md shadow-purple-500/20",
37        className
38      )}
39      {...props}
40    />
41  )
42})
43InputOTP.displayName = "InputOTP"
44 
45export const InputOTPGroup = React.forwardRef<
46  HTMLDivElement,
47  InputOTPGroupProps
48>(({ className, variant = "glass", glow = false, ...props }, ref) => {
49  return (
50    <BaseInputOTPGroup
51      ref={ref}
52      variant={variant}
53      className={cn(
54        glow && "shadow-md shadow-purple-500/20",
55        className
56      )}
57      {...props}
58    />
59  )
60})
61InputOTPGroup.displayName = "InputOTPGroup"
62 
63export const InputOTPSlot = React.forwardRef<
64  HTMLDivElement,
65  InputOTPSlotProps
66>(({ className, variant = "glass", glow = false, ...props }, ref) => {
67  return (
68    <BaseInputOTPSlot
69      ref={ref}
70      variant={variant}
71      className={cn(
72        glow && "ring-1 ring-purple-500/20",
73        className
74      )}
75      {...props}
76    />
77  )
78})
79InputOTPSlot.displayName = "InputOTPSlot"
80 
81export {
82  InputOTPSeparator,
83}
84