MicroClub Input OTP

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