Glass 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 
9const GlassInputOTP = React.forwardRef<
10  React.ComponentRef<typeof OTPInput>,
11  React.ComponentPropsWithoutRef<typeof OTPInput>
12>(({ className, containerClassName, ...props }, ref) => (
13  <OTPInput
14    ref={ref}
15    containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
16    className={cn('disabled:cursor-not-allowed', className)}
17    {...props}
18  />
19))
20GlassInputOTP.displayName = 'GlassInputOTP'
21 
22function GlassInputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
23  return <div className={cn('flex items-center gap-1.5', className)} {...props} />
24}
25GlassInputOTPGroup.displayName = 'GlassInputOTPGroup'
26 
27function GlassInputOTPSlot({
28  index,
29  className,
30  ...props
31}: React.ComponentProps<'div'> & { index: number }) {
32  const inputOTPContext = React.useContext(OTPInputContext)
33  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
34 
35  return (
36    <div
37      className={cn(
38        'relative flex size-10 items-center justify-center rounded-xl border border-border bg-glass font-mono text-sm backdrop-blur-md transition-all',
39        isActive && 'z-10 outline-none ring-2 ring-ring ring-offset-2 ring-offset-background',
40        className,
41      )}
42      {...props}
43    >
44      {char}
45      {hasFakeCaret && (
46        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
47          <div className="h-4 w-px animate-caret-blink bg-foreground motion-reduce:animate-none" />
48        </div>
49      )}
50    </div>
51  )
52}
53GlassInputOTPSlot.displayName = 'GlassInputOTPSlot'
54 
55function GlassInputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
56  return (
57    <div role="separator" {...props}>
58      <Minus className="size-3.5 text-faint" />
59    </div>
60  )
61}
62GlassInputOTPSeparator.displayName = 'GlassInputOTPSeparator'
63 
64export { GlassInputOTP, GlassInputOTPGroup, GlassInputOTPSlot, GlassInputOTPSeparator }