8-bit Input-OTP

1import { type VariantProps, cva } from "class-variance-authority";
2 
3import { cn } from "@/lib/utils";
4 
5import {
6  InputOTP as ShadcnInputOTP,
7  InputOTPGroup as ShadcnInputOTPGroup,
8  InputOTPSeparator as ShadcnInputOTPSeparator,
9  InputOTPSlot as ShadcnInputOTPSlot,
10} from "@/components/ui/input-otp";
11 
12import "@/components/ui/8bit/styles/retro.css";
13 
14export const inputVariants = cva("", {
15  variants: {
16    font: {
17      normal: "",
18      retro: "retro",
19    },
20  },
21  defaultVariants: {
22    font: "retro",
23  },
24});
25 
26interface SharedProps
27  extends React.ComponentProps<"div">,
28    VariantProps<typeof inputVariants> {
29  className?: string;
30  children?: React.ReactNode;
31}
32 
33interface InputOTPProps {
34  maxLength: number;
35  value?: string;
36  onChange?: (value: string) => unknown;
37  children?: React.ReactNode;
38  className?: string;
39  font?: "normal" | "retro";
40}
41 
42export const InputOTP = ({
43  className,
44  font,
45  maxLength,
46  value,
47  onChange,
48  children,
49  ...otherProps
50}: InputOTPProps) => {
51  return (
52    <div className={cn("relative w-fit", className)}>
53      <ShadcnInputOTP
54        maxLength={maxLength}
55        value={value}
56        onChange={onChange}
57        {...otherProps}
58        className={cn(font !== "normal" && "retro", className)}
59      >
60        {children}
61      </ShadcnInputOTP>
62    </div>
63  );
64};
65 
66export const InputOTPGroup = ({ className, ...props }: SharedProps) => {
67  return (
68    <ShadcnInputOTPGroup {...props} className={cn("flex gap-2", className)} />
69  );
70};
71 
72export const InputOTPSlot = ({
73  className,
74  font,
75  index = 0,
76  ...props
77}: SharedProps & { index?: number }) => {
78  return (
79    <div className="relative size-12 border-y-6 border-foreground dark:border-ring">
80      <ShadcnInputOTPSlot
81        index={index}
82        {...props}
83        className={cn(
84          "pl-1 size-full text-center text-xl tracking-widest z-0 ring-0 border-transparent ",
85          font !== "normal" && "retro",
86          className
87        )}
88      />
89 
90      <div
91        className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
92        aria-hidden="true"
93      />
94    </div>
95  );
96};
97 
98export const InputOTPSeparator = ({ className, ...props }: SharedProps) => {
99  return <ShadcnInputOTPSeparator {...props} className={cn("", className)} />;
100};