diff options
Diffstat (limited to 'apps/web/src/components/ui/input-otp.tsx')
| -rw-r--r-- | apps/web/src/components/ui/input-otp.tsx | 90 |
1 files changed, 45 insertions, 45 deletions
diff --git a/apps/web/src/components/ui/input-otp.tsx b/apps/web/src/components/ui/input-otp.tsx index 1bffc451..d8348449 100644 --- a/apps/web/src/components/ui/input-otp.tsx +++ b/apps/web/src/components/ui/input-otp.tsx @@ -7,68 +7,68 @@ import { Minus } from "lucide-react"; import { cn } from "../../lib/utils"; const InputOTP = React.forwardRef< - React.ElementRef<typeof OTPInput>, - React.ComponentPropsWithoutRef<typeof OTPInput> + React.ElementRef<typeof OTPInput>, + React.ComponentPropsWithoutRef<typeof OTPInput> >(({ className, containerClassName, ...props }, ref) => ( - <OTPInput - ref={ref} - containerClassName={cn( - "flex items-center justify-between gap-2 w-full has-[:disabled]:opacity-50", - containerClassName - )} - className={cn("disabled:cursor-not-allowed", className)} - {...props} - /> + <OTPInput + ref={ref} + containerClassName={cn( + "flex items-center justify-between gap-2 w-full has-[:disabled]:opacity-50", + containerClassName, + )} + className={cn("disabled:cursor-not-allowed", className)} + {...props} + /> )); 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 flex-1 gap-2", className)} - {...props} - /> + <div + ref={ref} + className={cn("flex items-center flex-1 gap-2", className)} + {...props} + /> )); InputOTPGroup.displayName = "InputOTPGroup"; const InputOTPSlot = React.forwardRef< - React.ElementRef<"div">, - React.ComponentPropsWithoutRef<"div"> & { index: number } + React.ElementRef<"div">, + React.ComponentPropsWithoutRef<"div"> & { index: number } >(({ index, className, ...props }, ref) => { - const inputOTPContext = React.useContext(OTPInputContext); - const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]; + const inputOTPContext = React.useContext(OTPInputContext); + const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]; - return ( - <div - ref={ref} - className={cn( - "relative flex aspect-square flex-1 min-w-[36px] items-center justify-center border border-input text-lg shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md", - isActive && "z-10 ring-1 ring-ring", - className - )} - {...props} - > - {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" /> - </div> - )} - </div> - ); + return ( + <div + ref={ref} + className={cn( + "relative flex aspect-square flex-1 min-w-[36px] items-center justify-center border border-input text-lg shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md", + isActive && "z-10 ring-1 ring-ring", + className, + )} + {...props} + > + {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" /> + </div> + )} + </div> + ); }); 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}> - <Minus /> - </div> + <div ref={ref} role="separator" {...props}> + <Minus /> + </div> )); InputOTPSeparator.displayName = "InputOTPSeparator"; |
