Animated O T P Input

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { OTPInput, OTPInputContext } from "input-otp";
5import { MinusIcon } from "lucide-react";
6import { AnimatePresence, motion, useReducedMotion } from "motion/react";
7import { type ReactNode, useContext, useEffect, useState } from "react";
8 
9// Animation constants
10const EASE_OUT_QUINT_X1 = 0.22;
11const EASE_OUT_QUINT_Y1 = 1;
12const EASE_OUT_QUINT_X2 = 0.36;
13const EASE_OUT_QUINT_Y2 = 1;
14const EASE_OUT_QUINT = [
15  EASE_OUT_QUINT_X1,
16  EASE_OUT_QUINT_Y1,
17  EASE_OUT_QUINT_X2,
18  EASE_OUT_QUINT_Y2,
19] as const;
20const ANIMATION_DURATION_SHORT = 0.1;
21const ANIMATION_DURATION_MEDIUM = 0.15;
22const ANIMATION_DURATION_STANDARD = 0.2;
23const ANIMATION_DURATION_LONG = 0.3;
24const STAGGER_DELAY = 0.05;
25const SCALE_FILLED = 1.05;
26const SCALE_HOVER = 1.02;
27const SCALE_TAP = 0.98;
28const INITIAL_SCALE = 0.8;
29const INITIAL_Y = 10;
30const SEPARATOR_DELAY = 0.15;
31 
32export interface AnimatedInputOTPProps {
33  "aria-describedby"?: string;
34  "aria-label"?: string;
35  className?: string;
36  containerClassName?: string;
37  maxLength?: number;
38  onChange?: (value: string) => void;
39  onComplete?: (value: string) => void;
40  value?: string;
41}
42 
43function AnimatedInputOTP({
44  className,
45  containerClassName,
46  value,
47  onChange,
48  onComplete,
49  maxLength = 6,
50  children,
51  ...props
52}: AnimatedInputOTPProps & { children: ReactNode }) {
53  const handleChange = (newValue: string) => {
54    // Only allow numeric characters
55    const numericValue = newValue.replace(/[^0-9]/g, "");
56    onChange?.(numericValue);
57  };
58 
59  return (
60    <OTPInput
61      aria-describedby={props["aria-describedby"]}
62      aria-label={props["aria-label"] || "One-time password input"}
63      className={cn("disabled:cursor-not-allowed", className)}
64      containerClassName={cn(
65        "flex items-center gap-2 has-disabled:opacity-50",
66        containerClassName
67      )}
68      data-slot="input-otp"
69      maxLength={maxLength}
70      onChange={handleChange}
71      onComplete={onComplete}
72      value={value}
73      {...props}
74    >
75      {children}
76    </OTPInput>
77  );
78}
79 
80interface AnimatedInputOTPGroupProps {
81  children?: ReactNode;
82  className?: string;
83}
84 
85function AnimatedInputOTPGroup({
86  className,
87  children,
88}: AnimatedInputOTPGroupProps) {
89  const shouldReduceMotion = useReducedMotion();
90  return (
91    <motion.div
92      animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
93      className={cn("flex items-center gap-2", className)}
94      data-slot="input-otp-group"
95// … truncated