From bf36ee5fd4e089684b937fd1cdbd9b44e062faa6 Mon Sep 17 00:00:00 2001
From: Erij-Maherzia-BEN-BRAHIM <erijmaherziabenbrahim@gmail.com>
Date: Thu, 20 Nov 2025 19:43:40 +0100
Subject: [PATCH] feat(input-otp): add mask & maskChar props for secure OTP
 input

---
 apps/v4/registry/new-york-v4/ui/input-otp.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/v4/registry/new-york-v4/ui/input-otp.tsx b/apps/v4/registry/new-york-v4/ui/input-otp.tsx
index 614f70e383b..a0313888bf9 100644
--- a/apps/v4/registry/new-york-v4/ui/input-otp.tsx
+++ b/apps/v4/registry/new-york-v4/ui/input-otp.tsx
@@ -39,12 +39,17 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
 function InputOTPSlot({
   index,
   className,
+  mask,
+  maskChar = "•",
   ...props
 }: React.ComponentProps<"div"> & {
-  index: number
+  index: number,
+  mask?: boolean,
+  maskChar?: string
 }) {
   const inputOTPContext = React.useContext(OTPInputContext)
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+  const displayChar = mask && char ? maskChar : char
 
   return (
     <div
@@ -56,7 +61,7 @@ function InputOTPSlot({
       )}
       {...props}
     >
-      {char}
+      {displayChar}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
           <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />