8-bit Radio Group

1"use client";
2 
3import type * as React from "react";
4 
5import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
6import { cva } from "class-variance-authority";
7 
8import { cn } from "@/lib/utils";
9 
10import { RadioGroup as ShadcnRadioGroup } from "@/components/ui/radio-group";
11 
12import "@/components/ui/8bit/styles/retro.css";
13 
14export const radioGroupVariants = cva("", {
15  variants: {
16    font: {
17      normal: "",
18      retro: "retro",
19    },
20  },
21  defaultVariants: {
22    font: "retro",
23  },
24});
25 
26function RadioGroup({
27  className,
28  ...props
29}: React.ComponentPropsWithoutRef<typeof ShadcnRadioGroup>) {
30  return <ShadcnRadioGroup className={cn("", className)} {...props} />;
31}
32 
33function RadioGroupItem({
34  className,
35  ref,
36  ...props
37}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
38  ref?: React.RefObject<React.ComponentRef<typeof RadioGroupPrimitive.Item>>;
39}) {
40  return (
41    <div className={cn("relative", className)}>
42      <RadioGroupPrimitive.Item
43        ref={ref}
44        className={cn(
45          "flex items-center justify-center rounded-none border-none py-3 peer border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 size-4 shrink-0 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
46          "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary",
47          className
48        )}
49        {...props}
50      >
51        <RadioGroupPrimitive.Indicator>
52          <svg
53            viewBox="0 0 256 256"
54            fill="currentColor"
55            xmlns="http://www.w3.org/2000/svg"
56            stroke="currentColor"
57            strokeWidth="0"
58            className="w-2.5"
59            aria-label="square"
60          >
61            <rect x="30" y="35" width="200" height="200" rx="0" />
62            <rect x="80" y="5" width="100" height="200" rx="0" />
63            <rect x="0" y="85" width="100" height="100" rx="0" />
64            <rect x="80" y="65" width="100" height="200" rx="0" />
65            <rect x="200" y="85" width="100" height="100" rx="0" />
66          </svg>
67        </RadioGroupPrimitive.Indicator>
68      </RadioGroupPrimitive.Item>
69 
70      <div className="absolute top-[0px] w-2.5 left-1.5 h-1 bg-foreground dark:bg-ring" />
71      <div className="absolute top-[0px] w-2.5 right-1.5 h-1 bg-foreground dark:bg-ring" />
72 
73// … truncated