8-bit Checkbox

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