OTP input

"use client";

import * as React from "react";
import { motion, useAnimate } from "motion/react";
import { cn } from "@/lib/utils";

export interface OtpInputProps {
  length?: number;
  value?: string;
  onValueChange?: (value: string) => void;
  /** Called once every box is filled. */
  onComplete?: (value: string) => void;
  /** Shakes the boxes and marks them invalid. Change the key to shake again. */
  error?: boolean;
  disabled?: boolean;
  className?: string;
  "aria-label"?: string;
}

export function OtpInput({ length = 6, value, onValueChange, onComplete, error, disabled, className, ...aria }: OtpInputProps) {
  const [internal, setInternal] = React.useState("");
  const code = (value ?? internal).slice(0, length);
  const [focused, setFocused] = React.useState(false);
  const inputRef = React.useRef<HTMLInputElement>(null);
  const [scope, animate] = useAnimate();

  React.useEffect(() => {
    if (error && scope.current) animate(scope.current, { x: [0, -8, 8, -5, 5, 0] }, { duration: 0.4 });
  }, [error, animate, scope]);

  const set = (raw: string) => {
    const next = raw.replace(/\D/g, "").slice(0, length);
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
    if (next.length === length) onComplete?.(next);
  };

  return (
    <div ref={scope} className={cn("relative inline-flex gap-2", className)} onClick={() => inputRef.current?.focus()}>
      {/* One real input handles typing, paste and autofill; the boxes are visual. */}
      <input
        ref={inputRef}
        value={code}
        onChange={(e) => set(e.target.value)}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        inputMode="numeric"
        autoComplete="one-time-code"
        maxLength={length}
        disabled={disabled}
        aria-label={aria["aria-label"] ?? "One-time code"}
        aria-invalid={error || undefined}
        className="absolute inset-0 z-10 cursor-text opacity-0"
      />
      {Array.from({ length }, (_, i) => {
        const char = code[i];
        const active = focused && (i === code.length || (i === length - 1 && code.length === length));
        return (
          <div
            key={i}
            className={cn(
              "relative grid h-12 w-10 place-items-center rounded-md border text-lg font-medium tabular-nums transition-colors",
              error ? "border-destructive" : active ? "border-foreground ring-2 ring-ring" : "border-input",
              disabled && "opacity-40",
            )}
          >
            {char && (
              <motion.span initial={{ y: 8, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ type: "spring", stiffness: 500, damping: 30 }}>
                {char}
              </motion.span>
            )}
            {active && !char && <span className="h-5 w-px animate-pulse bg-foreground" />}
          </div>
        );
      })}
    </div>
  );
}