Input OTP

1"use client";
2
3import { createContext, useContext } from "react";
4import {
5  AnimatePresence,
6  motion,
7  MotionConfig,
8  TargetAndTransition,
9} from "motion/react";
10import { OTPInput, OTPInputContext as OTPInputContextBase } from "input-otp";
11import { tv } from "tailwind-variants";
12
13import { cn } from "@/lib/classes";
14
15type InputOTPSlotSize = "sm" | "md" | "lg";
16type InputOTPVariant = "bordered" | "underlined";
17
18type InputOTPContextType = {
19  variant?: InputOTPVariant;
20  slotSize?: InputOTPSlotSize;
21};
22
23const InputOTPContext = createContext<InputOTPContextType>({
24  variant: "bordered",
25  slotSize: "md",
26});
27
28export const useInputOTPContext = () => {
29  const context = useContext(InputOTPContext);
30  if (!context) {
31    throw new Error(
32      "useInputOTPContext must be used within a InputOTPProvider"
33    );
34  }
35  return context;
36};
37
38const InputOTPProvider = ({
39  children,
40  variant = "bordered",
41  slotSize = "md",
42}: InputOTPContextType & { children: React.ReactNode }) => {
43  return (
44    <InputOTPContext.Provider value={{ variant, slotSize }}>
45      {children}
46    </InputOTPContext.Provider>
47  );
48};
49
50type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
51  variant?: InputOTPVariant;
52  slotSize?: InputOTPSlotSize;
53};
54
55function InputOTP({
56  containerClassName,
57  className,
58  variant = "bordered",
59  slotSize = "md",
60  ...props
61}: InputOTPProps) {
62  return (
63    <InputOTPProvider variant={variant} slotSize={slotSize}>
64      <OTPInput
65        data-variant={variant}
66        data-slot="input-otp"
67        containerClassName={cn(
68          "flex items-center gap-2 has-disabled:opacity-50",
69          containerClassName
70        )}
71        className={cn("disabled:cursor-not-allowed", className)}
72        {...props}
73      />
74    </InputOTPProvider>
75  );
76}
77
78type InputOTPGroupProps = React.ComponentProps<"div">;
79
80function InputOTPGroup({ className, ...props }: InputOTPGroupProps) {
81  return (
82    <div
83      data-slot="input-otp-group"
84      className={cn("flex items-center gap-1", className)}
85      {...props}
86    />
87  );
88}
89
90type InputOTPAnimatedNumberProps = {
91  value: string | null;
92};
93
94function InputOTPAnimatedNumber({ value }: InputOTPAnimatedNumberProps) {
95  const animationProps: {
96    [key: string]: TargetAndTransition;
97  } = {
98    initial: { opacity: 0, y: 10 },
99    animate: {
100      opacity: 1,
101      y: 0,
102      transition: {
103        type: "tween",
104// … truncated