mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-01 08:34:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

obscure pin code input closes #580

Browse source
This commit is contained in:
miloschwartz 2025-04-23 16:33:55 -04:00
parent 548a883e3f
commit 4dba75f913
No known key found for this signature in database
4 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/ui/input-otp.tsx
View file

@ -8,8 +8,8 @@ import { cn } from "@app/lib/cn"
const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>,
React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
React.ComponentPropsWithoutRef<typeof OTPInput> & { obscured?: boolean }
>(({ className, containerClassName, obscured = false, ...props }, ref) => (
<OTPInput
ref={ref}
containerClassName={cn(
@ -32,8 +32,8 @@ InputOTPGroup.displayName = "InputOTPGroup"
const InputOTPSlot = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
React.ComponentPropsWithoutRef<"div"> & { index: number; obscured?: boolean }
>(({ index, className, obscured = false, ...props }, ref) => {
const inputOTPContext = React.useContext(OTPInputContext)
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
@ -47,7 +47,7 @@ const InputOTPSlot = React.forwardRef<
)}
{...props}
>
{char}
{char && obscured ? "•" : char}
{hasFakeCaret && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />