tw adeptation

hanzoai · Mar 8, 2024 · c90d2ae · c90d2ae
1 parent 9e145e3
commit c90d2ae
Showing 1 changed file with 23 additions and 21 deletions.
diff --git a/packages/ui/primitives/input-otp.tsx b/packages/ui/primitives/input-otp.tsx
@@ -1,8 +1,9 @@
-"use client"
+'use client'
+import * as React from 'react'
+
+import { OTPInput, type SlotProps } from 'input-otp'
+import { Dot } from 'lucide-react'
 
-import * as React from "react"
-import { OTPInput, type SlotProps } from "input-otp"
-import { Dot } from "lucide-react"
 import { cn } from '../util'
 
 const InputOTP = React.forwardRef<
@@ -11,53 +12,54 @@ const InputOTP = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <OTPInput
     ref={ref}
-    containerClassName={cn("flex items-center gap-2", className)}
+    containerClassName={cn('flex items-center gap-2', className)}
     {...props}
   />
 ))
-InputOTP.displayName = "InputOTP"
+InputOTP.displayName = 'InputOTP'
 
 const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
 ))
-InputOTPGroup.displayName = "InputOTPGroup"
+InputOTPGroup.displayName = 'InputOTPGroup'
 
 const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  SlotProps & React.ComponentPropsWithoutRef<"div">
+  React.ElementRef<'div'>,
+  SlotProps & React.ComponentPropsWithoutRef<'div'>
 >(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {
   return (
     <div
       ref={ref}
       className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-2 ring-offset-background ring-ring",
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-muted-2 text-sm ',
+        'transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-10 ring-2 ring-muted', // TODO: couldn't find: 'ring-offset-background' 
         className
       )}
       {...props}
     >
       {char}
       {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
+          <div className='animate-caret-blink h-4 w-px bg-foreground duration-1000' />
         </div>
       )}
     </div>
   )
 })
-InputOTPSlot.displayName = "InputOTPSlot"
+InputOTPSlot.displayName = 'InputOTPSlot'
 
 const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
 >(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
+  <div ref={ref} role='separator' {...props}>
     <Dot />
   </div>
 ))
-InputOTPSeparator.displayName = "InputOTPSeparator"
+InputOTPSeparator.displayName = 'InputOTPSeparator'
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }