8-bit Progress

1import * as ProgressPrimitive from "@radix-ui/react-progress";
2import { type VariantProps, cva } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6import "@/components/ui/8bit/styles/retro.css";
7 
8export const progressVariants = cva("", {
9  variants: {
10    variant: {
11      default: "",
12      retro: "retro",
13    },
14    font: {
15      normal: "",
16      retro: "retro",
17    },
18  },
19  defaultVariants: {
20    font: "retro",
21  },
22});
23 
24export interface BitProgressProps
25  extends React.ComponentProps<typeof ProgressPrimitive.Root>,
26    VariantProps<typeof progressVariants> {
27  className?: string;
28  font?: VariantProps<typeof progressVariants>["font"];
29  progressBg?: string;
30}
31 
32function Progress({
33  className,
34  font,
35  variant,
36  value,
37  progressBg,
38  ...props
39}: BitProgressProps) {
40  // Extract height from className if present
41  const heightMatch = className?.match(/h-(\d+|\[.*?\])/);
42  const heightClass = heightMatch ? heightMatch[0] : "h-2";
43 
44  return (
45    <div className={cn("relative w-full", className)}>
46      <ProgressPrimitive.Root
47        data-slot="progress"
48        className={cn(
49          "bg-primary/20 relative w-full overflow-hidden",
50          heightClass,
51          font !== "normal" && "retro"
52        )}
53        value={value}
54        {...props}
55      >
56        <ProgressPrimitive.Indicator
57          data-slot="progress-indicator"
58          className={cn(
59            "h-full transition-all",
60            variant === "retro" ? "flex w-full" : "w-full flex-1",
61            variant !== "retro" && (progressBg || "bg-primary")
62          )}
63          style={
64            variant === "retro"
65              ? undefined
66              : { transform: `translateX(-${100 - (value || 0)}%)` }
67          }
68        >
69          {variant === "retro" && (
70            <div className="flex w-full">
71              {Array.from({ length: 20 }).map((_, i) => {
72                const filledSquares = Math.round(((value || 0) / 100) * 20);
73                return (
74                  <div
75                    key={i}
76                    className={cn(
77                      "flex-1 h-full mx-[1px]",
78                      i < filledSquares
79                        ? progressBg || "bg-primary"
80                        : "bg-transparent"
81                    )}
82                  />
83                );
84              })}
85            </div>
86          )}
87        </ProgressPrimitive.Indicator>
88      </ProgressPrimitive.Root>
89 
90      <div
91// … truncated