@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/components/catalyst-ui/x/input-otp-x.tsx

@@ -0,0 +1,659 @@
+'use client'
+
+import React, { useId, useState, useEffect } from 'react'
+import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
+import { Dot } from 'lucide-react'
+import { cva } from 'class-variance-authority'
+import { cn } from '~/components/catalyst-ui'
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '~/components/catalyst-ui'
+import { Field, FieldLabel, FieldDescription, FieldError } from '~/components/catalyst-ui'
+
+// #region CVA VARIANTS
+export const inputOtpVariants = cva(
+  'flex items-center gap-2 has-[:disabled]:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: '',
+        outlined: 'gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border',
+        filled: '*:data-[slot=input-otp-slot]:bg-muted gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:border-transparent *:data-[slot=input-otp-slot]:shadow-none',
+        minimal: 'gap-2 *:data-[active=true]:ring-0 *:data-[slot=input-otp-slot]:rounded-none *:data-[slot=input-otp-slot]:border-0 *:data-[slot=input-otp-slot]:border-b-2 *:data-[slot=input-otp-slot]:shadow-none *:dark:data-[slot=input-otp-slot]:bg-transparent',
+      },
+      size: {
+        sm: '*:data-[slot=input-otp-slot]:h-8 *:data-[slot=input-otp-slot]:w-8 *:data-[slot=input-otp-slot]:text-xs',
+        default: '*:data-[slot=input-otp-slot]:h-10 *:data-[slot=input-otp-slot]:w-10',
+        lg: '*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+// #endregion
+
+// #region PARENT FUNCTION
+export function InputOtpX({ inputOtp = 'default', ...props }: any) {
+  switch (inputOtp) {
+    case 'Number':
+      return <Number {...props} />
+    case 'Alphanumeric':
+      return <Alphanumeric {...props} />
+    case 'WithResend':
+      return <WithResend {...props} />
+    case 'WithResendTimer':
+      return <WithResendTimer {...props} />
+    case 'Outlined':
+      return <Outlined {...props} />
+    case 'Filled':
+      return <Filled {...props} />
+    case 'Minimal':
+      return <Minimal {...props} />
+    case 'Grouped':
+      return <Grouped {...props} />
+    case 'OutlinedGrouped':
+      return <OutlinedGrouped {...props} />
+    case 'CustomSeparator':
+      return <CustomSeparator {...props} />
+    default:
+      return <DefaultInputOtp {...props} />
+  }
+}
+// #endregion
+
+// #region SUPPORTING FUNCTIONS
+const DefaultInputOtp = ({ label, description, error, variant, size, className, maxLength = 4, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='space-y-3'>
+      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+      <InputOTP id={id} maxLength={maxLength} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant, size }))}>
+          {Array.from({ length: maxLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const Number = ({ label = 'Input OTP number', description, error, variant, size, className, maxLength = 4, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} pattern={REGEXP_ONLY_DIGITS} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant, size }))}>
+          {Array.from({ length: maxLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const Alphanumeric = ({ label = 'Input OTP Alphanumeric', description, error, variant, size, className, maxLength = 4, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} pattern={REGEXP_ONLY_DIGITS_AND_CHARS} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant, size }))}>
+          {Array.from({ length: maxLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const WithResend = ({ label = 'Input OTP with resend', description, error, variant, size, className, maxLength = 4, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant, size }))}>
+          {Array.from({ length: maxLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      <p className='text-muted-foreground text-xs'>
+        Didn&apos;t get the code?{' '}
+        <a href='#' className='text-primary hover:underline'>
+          Resend code
+        </a>
+      </p>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const WithResendTimer = ({ label = 'Input OTP with resend timer', description, error, variant, size, className, maxLength = 4, initialTimer = 30, ...props }: any) => {
+  const [timeLeft, setTimeLeft] = useState(initialTimer)
+  const id = useId()
+
+  useEffect(() => {
+    if (timeLeft > 0) {
+      const timer = setTimeout(() => {
+        setTimeLeft(prev => prev - 1)
+      }, 1000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [timeLeft])
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+  }
+
+  const handleResend = () => {
+    setTimeLeft(60)
+  }
+
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant, size }))}>
+          {Array.from({ length: maxLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      <p className='text-muted-foreground text-xs'>
+        {timeLeft > 0 ? (
+          `Resend available in ${formatTime(timeLeft)}`
+        ) : (
+          <a
+            href='#'
+            onClick={e => {
+              e.preventDefault()
+              handleResend()
+            }}
+            className='hover:text-primary underline'
+          >
+            Resend code
+          </a>
+        )}
+      </p>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const Outlined = ({ label = 'Input OTP outlined', description, error, size, className, maxLength = 4, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant: 'outlined', size }))}>
+          {Array.from({ length: maxLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const Filled = ({ label = 'Input OTP filled', description, error, size, className, maxLength = 4, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant: 'filled', size }))}>
+          {Array.from({ length: maxLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const Minimal = ({ label = 'Input OTP minimal', description, error, size, className, maxLength = 4, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant: 'minimal', size }))}>
+          {Array.from({ length: maxLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const Grouped = ({ label = 'Input OTP Grouped', description, error, variant, size, className, maxLength = 6, ...props }: any) => {
+  const id = useId()
+  const halfLength = Math.floor(maxLength / 2)
+  
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant, size }))}>
+          {Array.from({ length: halfLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup className={cn(inputOtpVariants({ variant, size }))}>
+          {Array.from({ length: maxLength - halfLength }).map((_, index) => (
+            <InputOTPSlot key={index + halfLength} index={index + halfLength} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const OutlinedGrouped = ({ label = 'Input OTP Outline Grouped', description, error, size, className, maxLength = 6, ...props }: any) => {
+  const id = useId()
+  const halfLength = Math.floor(maxLength / 2)
+  
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant: 'outlined', size }))}>
+          {Array.from({ length: halfLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup className={cn(inputOtpVariants({ variant: 'outlined', size }))}>
+          {Array.from({ length: maxLength - halfLength }).map((_, index) => (
+            <InputOTPSlot key={index + halfLength} index={index + halfLength} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const CustomSeparator = ({ label = 'Input OTP Custom Separator', description, error, variant, size, className, maxLength = 6, ...props }: any) => {
+  const id = useId()
+  const halfLength = Math.floor(maxLength / 2)
+  
+  return (
+    <Field className='space-y-3'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <InputOTP id={id} maxLength={maxLength} className={className} {...props}>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant, size }))}>
+          {Array.from({ length: halfLength }).map((_, index) => (
+            <InputOTPSlot key={index} index={index} />
+          ))}
+        </InputOTPGroup>
+        <div role='separator' className='text-muted-foreground'>
+          <Dot />
+        </div>
+        <InputOTPGroup className={cn(inputOtpVariants({ variant, size }))}>
+          {Array.from({ length: maxLength - halfLength }).map((_, index) => (
+            <InputOTPSlot key={index + halfLength} index={index + halfLength} />
+          ))}
+        </InputOTPGroup>
+      </InputOTP>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+// #endregion
+
+// #region DEMO
+export function InputOtpXDemo() {
+  return (
+    <div className='space-y-12 p-6 max-w-3xl mx-auto'>
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Default</h3>
+        <InputOtpX label='Default OTP' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Number Only</h3>
+        <InputOtpX inputOtp='Number' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Alphanumeric</h3>
+        <InputOtpX inputOtp='Alphanumeric' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>With Resend</h3>
+        <InputOtpX inputOtp='WithResend' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>With Resend Timer</h3>
+        <InputOtpX inputOtp='WithResendTimer' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Outlined</h3>
+        <InputOtpX inputOtp='Outlined' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Filled</h3>
+        <InputOtpX inputOtp='Filled' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Minimal</h3>
+        <InputOtpX inputOtp='Minimal' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Grouped</h3>
+        <InputOtpX inputOtp='Grouped' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Outlined Grouped</h3>
+        <InputOtpX inputOtp='OutlinedGrouped' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Custom Separator</h3>
+        <InputOtpX inputOtp='CustomSeparator' />
+      </div>
+    </div>
+  )
+}
+// #endregion
+
+
+
+/**
+
+
+
+
+
+
+export function InputOtpX({ inputOtp = 'default', children, ...props }: any) {
+    switch (inputOtp) {
+        case 'Closable':
+            break
+        default:
+            break;
+    }
+}
+
+const InputOTPNumberDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP number</Label>
+      <InputOTP id={id} maxLength={4} pattern={REGEXP_ONLY_DIGITS}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+const InputOTPAlphanumericDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP Alphanumeric</Label>
+      <InputOTP id={id} maxLength={4} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+const InputOTPWithResendDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP with resend</Label>
+      <InputOTP id={id} maxLength={4}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+      <p className='text-muted-foreground text-xs'>
+        Didn&apos;t get the code?{' '}
+        <a href='#' className='text-primary hover:underline'>
+          Resend code
+        </a>
+      </p>
+    </div>
+  )
+}
+
+const InputOTPWithResendTimerDemo = () => {
+  const [timeLeft, setTimeLeft] = useState(30)
+  const id = useId()
+
+  useEffect(() => {
+    if (timeLeft > 0) {
+      const timer = setTimeout(() => {
+        setTimeLeft(prev => prev - 1)
+      }, 1000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [timeLeft])
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+  }
+
+  const handleResend = () => {
+    setTimeLeft(60)
+  }
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP with resend timer</Label>
+      <InputOTP id={id} maxLength={4}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+      <p className='text-muted-foreground text-xs'>
+        {timeLeft > 0 ? (
+          `Resend available in ${formatTime(timeLeft)}`
+        ) : (
+          <a
+            href='#'
+            onClick={e => {
+              e.preventDefault()
+              handleResend()
+            }}
+            className='hover:text-primary underline'
+          >
+            Resend code
+          </a>
+        )}
+      </p>
+    </div>
+  )
+}
+
+const InputOTPOutlinedDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP outlined</Label>
+      <InputOTP id={id} maxLength={4}>
+        <InputOTPGroup className='gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border'>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+const InputOTPFilledDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP filled</Label>
+      <InputOTP id={id} maxLength={4}>
+        <InputOTPGroup className='*:data-[slot=input-otp-slot]:bg-muted gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:border-transparent *:data-[slot=input-otp-slot]:shadow-none'>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+const InputOTPMinimalDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP minimal</Label>
+      <InputOTP id={id} maxLength={4}>
+        <InputOTPGroup className='gap-2 *:data-[active=true]:ring-0 *:data-[slot=input-otp-slot]:rounded-none *:data-[slot=input-otp-slot]:border-0 *:data-[slot=input-otp-slot]:border-b-2 *:data-[slot=input-otp-slot]:shadow-none *:dark:data-[slot=input-otp-slot]:bg-transparent'>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+const InputOTPGroupedDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP Grouped</Label>
+      <InputOTP id={id} maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+const InputOTPOutlinedGroupedDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP Outline Grouped</Label>
+      <InputOTP id={id} maxLength={6}>
+        <InputOTPGroup className='gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border'>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup className='gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border'>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+}
+
+const InputOTPCustomSeparatorDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='space-y-3'>
+      <Label htmlFor={id}>Input OTP Custom Separator</Label>
+      <InputOTP id={id} maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <div role='separator' className='text-muted-foreground'>
+          <DotIcon />
+        </div>
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  )
+} */
+
+
+