8-bit Input

1import { type VariantProps, cva } from "class-variance-authority";
2 
3import { cn } from "@/lib/utils";
4 
5import { Input as ShadcnInput } from "@/components/ui/input";
6 
7import "@/components/ui/8bit/styles/retro.css";
8 
9export const inputVariants = cva("", {
10  variants: {
11    font: {
12      normal: "",
13      retro: "retro",
14    },
15  },
16  defaultVariants: {
17    font: "retro",
18  },
19});
20 
21export interface BitInputProps
22  extends React.InputHTMLAttributes<HTMLInputElement>,
23    VariantProps<typeof inputVariants> {
24  asChild?: boolean;
25}
26 
27function Input({ ...props }: BitInputProps) {
28  const { className, font } = props;
29 
30  return (
31    <div
32      className={cn(
33        "relative border-y-6 border-foreground dark:border-ring !p-0 flex items-center",
34        className
35      )}
36    >
37      <ShadcnInput
38        {...props}
39        className={cn(
40          "rounded-none ring-0 !w-full",
41          font !== "normal" && "retro",
42          className
43        )}
44      />
45 
46      <div
47        className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
48        aria-hidden="true"
49      />
50    </div>
51  );
52}
53 
54export { Input };