8-bit Button

1import { type VariantProps, cva } from "class-variance-authority";
2import { Slot } from "radix-ui";
3import type { ButtonHTMLAttributes, Ref } from "react";
4 
5import { Button as ShadcnButton } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7 
8import "@/components/ui/8bit/styles/retro.css";
9 
10export const buttonVariants = cva("", {
11  variants: {
12    font: {
13      normal: "",
14      retro: "retro",
15    },
16    variant: {
17      default: "bg-foreground",
18      destructive: "bg-foreground",
19      outline: "bg-foreground",
20      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
21      ghost: "hover:bg-accent hover:text-accent-foreground",
22      link: "text-primary underline-offset-4 hover:underline",
23    },
24    size: {
25      default: "",
26      sm: "",
27      lg: "",
28      icon: "",
29    },
30  },
31  defaultVariants: {
32    variant: "default",
33    size: "default",
34  },
35});
36 
37export interface BitButtonProps
38  extends ButtonHTMLAttributes<HTMLButtonElement>,
39    VariantProps<typeof buttonVariants> {
40  asChild?: boolean;
41  ref?: Ref<HTMLButtonElement>;
42}
43 
44interface ButtonDecorationsProps {
45  size: BitButtonProps["size"];
46  variant: BitButtonProps["variant"];
47}
48 
49function ButtonDecorations({ size, variant }: ButtonDecorationsProps) {
50  return (
51    <span
52      aria-hidden="true"
53      className="pointer-events-none contents"
54      data-slot="button-decorations"
55    >
56      {variant !== "ghost" && variant !== "link" && size !== "icon" && (
57        <>
58          {/* Pixelated border */}
59          <span className="absolute -top-1.5 left-1.5 h-1.5 w-1/2 bg-foreground dark:bg-ring" />
60          <span className="absolute -top-1.5 right-1.5 h-1.5 w-1/2 bg-foreground dark:bg-ring" />
61          <span className="absolute -bottom-1.5 left-1.5 h-1.5 w-1/2 bg-foreground dark:bg-ring" />
62          <span className="absolute -bottom-1.5 right-1.5 h-1.5 w-1/2 bg-foreground dark:bg-ring" />
63          <span className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
64          <span className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
65          <span className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
66          <span className="absolute right-0 bottom-0 size-1.5 bg-foreground dark:bg-ring" />
67          <span className="absolute top-1.5 -left-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground dark:bg-ring" />
68// … truncated