"use client" import * as React from "react" import { OTPInput, OTPInputContext } from "input-otp" import { Minus } from "lucide-react" import { cn } from "@/lib/utils" const InputOTP = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, containerClassName, ...props }, ref) => ( )) InputOTP.displayName = "InputOTP" const InputOTPGroup = React.forwardRef< React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div"> >(({ className, ...props }, ref) => (

)) InputOTPGroup.displayName = "InputOTPGroup" const InputOTPSlot = React.forwardRef< React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div"> & { index: number } >(({ index, className, ...props }, ref) => { const inputOTPContext = React.useContext(OTPInputContext) const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] return (

{char} {hasFakeCaret && (

)}

) }) InputOTPSlot.displayName = "InputOTPSlot" const InputOTPSeparator = React.forwardRef< React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div"> >(({ ...props }, ref) => (

)) InputOTPSeparator.displayName = "InputOTPSeparator" export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

Input Otp

Instalação

Dependências