@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,659 +0,0 @@
-'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>
-  )
-} */
-
-
-