fix(website): slot typing

guilhermerodz · Mar 12, 2024 · 2f3b5c0 · 2f3b5c0
1 parent 74cb1fd
commit 2f3b5c0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/apps/website/src/app/(local-pages)/shadcn/pwmb/page.tsx b/apps/website/src/app/(local-pages)/shadcn/pwmb/page.tsx
@@ -3,6 +3,7 @@
 import {
   InputOTP,
   InputOTPGroup,
+  InputOTPRenderSlot,
   InputOTPSeparator,
   InputOTPSlot,
 } from '@/components/ui/input-otp'
@@ -35,13 +36,13 @@ export default function ShadcnPage() {
           <>
             <InputOTPGroup>
               {slots.slice(0, 3).map((slot, index) => (
-                <InputOTPSlot key={index} {...slot} />
-              ))}{' '}
+                <InputOTPRenderSlot key={index} {...slot} />
+              ))}
             </InputOTPGroup>
             <InputOTPSeparator />
             <InputOTPGroup>
               {slots.slice(3).map((slot, index) => (
-                <InputOTPSlot key={index} {...slot} />
+                <InputOTPRenderSlot key={index} {...slot} />
               ))}
             </InputOTPGroup>
           </>

diff --git a/apps/website/src/components/ui/input-otp.tsx b/apps/website/src/components/ui/input-otp.tsx
@@ -12,7 +12,10 @@ const InputOTP = React.forwardRef<
 >(({ containerClassName, className, ...props }, ref) => (
   <OTPInput
     ref={ref}
-    containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
+    containerClassName={cn(
+      'flex items-center gap-2 has-[:disabled]:opacity-50',
+      containerClassName,
+    )}
     className={cn('disabled:cursor-not-allowed', className)}
     {...props}
   />
@@ -55,6 +58,31 @@ const InputOTPSlot = React.forwardRef<
 })
 InputOTPSlot.displayName = 'InputOTPSlot'
 
+const InputOTPRenderSlot = React.forwardRef<
+  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',
+        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>
+      )}
+    </div>
+  )
+})
+InputOTPRenderSlot.displayName = 'InputOTPRenderSlot'
+
 const InputOTPSeparator = React.forwardRef<
   React.ElementRef<'div'>,
   React.ComponentPropsWithoutRef<'div'>
@@ -65,4 +93,10 @@ const InputOTPSeparator = React.forwardRef<
 ))
 InputOTPSeparator.displayName = 'InputOTPSeparator'
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPRenderSlot,
+  InputOTPSlot,
+  InputOTPSeparator,
+}