spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/ui/input-otp.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import * as React from "react"18import { OTPInput, OTPInputContext } from "input-otp"19import { Dot } from "lucide-react"2021import { cn } from "@/lib/utils"2223const InputOTP = React.forwardRef<24  React.ElementRef<typeof OTPInput>,25  React.ComponentPropsWithoutRef<typeof OTPInput>26>(({ className, containerClassName, ...props }, ref) => (27  <OTPInput28    ref={ref}29    containerClassName={cn(30      "flex items-center gap-2 has-[:disabled]:opacity-50",31      containerClassName32    )}33    className={cn("disabled:cursor-not-allowed", className)}34    {...props}35  />36))37InputOTP.displayName = "InputOTP"3839const InputOTPGroup = React.forwardRef<40  React.ElementRef<"div">,41  React.ComponentPropsWithoutRef<"div">42>(({ className, ...props }, ref) => (43  <div ref={ref} className={cn("flex items-center", className)} {...props} />44))45InputOTPGroup.displayName = "InputOTPGroup"4647const InputOTPSlot = React.forwardRef<48  React.ElementRef<"div">,49  React.ComponentPropsWithoutRef<"div"> & { index: number }50>(({ index, className, ...props }, ref) => {51  const inputOTPContext = React.useContext(OTPInputContext)52  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]5354  return (55    <div56      ref={ref}57      className={cn(58        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",59        isActive && "z-10 ring-2 ring-ring ring-offset-background",60        className61      )}62      {...props}63    >64      {char}65      {hasFakeCaret && (66        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">67          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />68        </div>69      )}70    </div>71  )72})73InputOTPSlot.displayName = "InputOTPSlot"7475const InputOTPSeparator = React.forwardRef<76  React.ElementRef<"div">,77  React.ComponentPropsWithoutRef<"div">78>(({ ...props }, ref) => (79  <div ref={ref} role="separator" {...props}>80    <Dot />81  </div>82))83InputOTPSeparator.displayName = "InputOTPSeparator"8485export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }86