"use client"; import { OTPInput, OTPInputContext } from "input-otp"; import * as React from "react"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { useDirection } from "@/hooks/registry/use-direction"; import { cn } from "@/lib/registry/cn"; function InputOTP({ className, containerClassName, ...props }: React.ComponentProps & { containerClassName?: string; }) { const direction = useDirection(); return (

); } function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) { return (

); } function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & { index: number; }) { const inputOTPContext = React.useContext(OTPInputContext); const direction = useDirection(); const isRtl = direction === "rtl"; const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}; const roundingClasses = isRtl ? "first:rounded-e-md first:rounded-s-0 last:rounded-s-md last:rounded-e-0" : "first:rounded-s-md first:rounded-e-0 last:rounded-e-md last:rounded-s-0"; return (

{char} {hasFakeCaret && (

)}

); } function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) { return ( ); } export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

Input OTP

Showcase

Input OTP