From 208ba3ae4d7ec495264a31c1a5118be8b6ac63e5 Mon Sep 17 00:00:00 2001
From: Guilherme Rodz <gui.rodz.dev@gmail.com>
Date: Fri, 1 Nov 2024 15:46:39 -0300
Subject: [PATCH] feat(input): add placeholder

---
 apps/website/src/components/ui/input-otp.tsx | 12 ++++++++----
 packages/input-otp/src/input.tsx             |  5 +++++
 packages/input-otp/src/types.ts              |  1 +
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/website/src/components/ui/input-otp.tsx b/apps/website/src/components/ui/input-otp.tsx
index 90b0345..14bdd23 100644
--- a/apps/website/src/components/ui/input-otp.tsx
+++ b/apps/website/src/components/ui/input-otp.tsx
@@ -13,7 +13,7 @@ const InputOTP = React.forwardRef<
   <OTPInput
     ref={ref}
     containerClassName={cn(
-      'flex items-center gap-2 has-[:disabled]:opacity-50',
+      'group flex items-center gap-2 has-[:disabled]:opacity-50',
       containerClassName,
     )}
     className={cn('disabled:cursor-not-allowed', className)}
@@ -47,7 +47,9 @@ const InputOTPSlot = React.forwardRef<
       )}
       {...props}
     >
-      {slotProps.char}
+      <div className="group-has-[input[data-input-otp-empty]]:opacity-20">
+        {slotProps.char ?? slotProps.placeholderChar}
+      </div>
       {slotProps.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" />
@@ -61,7 +63,7 @@ InputOTPSlot.displayName = 'InputOTPSlot'
 const InputOTPRenderSlot = React.forwardRef<
   React.ElementRef<'div'>,
   SlotProps & React.ComponentPropsWithoutRef<'div'>
->(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {
+>(({ char, placeholderChar, hasFakeCaret, isActive, className, ...props }, ref) => {
   return (
     <div
       ref={ref}
@@ -72,7 +74,9 @@ const InputOTPRenderSlot = React.forwardRef<
       )}
       {...props}
     >
-      {char}
+      <div className="group-has-[input[data-input-otp-empty]]:opacity-20">
+        {char ?? placeholderChar}
+      </div>
       {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" />
diff --git a/packages/input-otp/src/input.tsx b/packages/input-otp/src/input.tsx
index e2b0a8c..5277b67 100644
--- a/packages/input-otp/src/input.tsx
+++ b/packages/input-otp/src/input.tsx
@@ -20,6 +20,7 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
       maxLength,
       textAlign = 'left',
       pattern = REGEXP_ONLY_DIGITS,
+      placeholder,
       inputMode = 'numeric',
       onComplete,
       pushPasswordManagerStrategy = 'increase-width',
@@ -408,10 +409,12 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
           autoComplete={props.autoComplete || 'one-time-code'}
           {...props}
           data-input-otp
+          data-input-otp-empty={value.length === 0 || undefined}
           data-input-otp-mss={mirrorSelectionStart}
           data-input-otp-mse={mirrorSelectionEnd}
           inputMode={inputMode}
           pattern={regexp?.source}
+          aria-placeholder={placeholder}
           style={inputStyle}
           maxLength={maxLength}
           value={value}
@@ -466,9 +469,11 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
               (slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd))
 
           const char = value[slotIdx] !== undefined ? value[slotIdx] : null
+          const placeholderChar = value[0] !== undefined ? null : placeholder?.[slotIdx] ?? null
 
           return {
             char,
+            placeholderChar,
             isActive,
             hasFakeCaret: isActive && char === null,
           }
diff --git a/packages/input-otp/src/types.ts b/packages/input-otp/src/types.ts
index 10ca6ef..ad81e96 100644
--- a/packages/input-otp/src/types.ts
+++ b/packages/input-otp/src/types.ts
@@ -1,6 +1,7 @@
 export interface SlotProps {
   isActive: boolean
   char: string | null
+  placeholderChar: string | null
   hasFakeCaret: boolean
 }
 export interface RenderProps {