8-bit Select

1import type * as SelectPrimitive from "@radix-ui/react-select";
2import { type VariantProps, cva } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6import {
7  Select as ShadcnSelect,
8  SelectContent as ShadcnSelectContent,
9  SelectGroup as ShadcnSelectGroup,
10  SelectItem as ShadcnSelectItem,
11  SelectLabel as ShadcnSelectLabel,
12  SelectScrollDownButton as ShadcnSelectScrollDownButton,
13  SelectScrollUpButton as ShadcnSelectScrollUpButton,
14  SelectSeparator as ShadcnSelectSeparator,
15  SelectTrigger as ShadcnSelectTrigger,
16  SelectValue as ShadcnSelectValue,
17} from "@/components/ui/select";
18 
19import "@/components/ui/8bit/styles/retro.css";
20 
21export const inputVariants = cva("", {
22  variants: {
23    font: {
24      normal: "",
25      retro: "retro",
26    },
27  },
28  defaultVariants: {
29    font: "retro",
30  },
31});
32 
33export interface BitSelectProps
34  extends React.SelectHTMLAttributes<HTMLSelectElement>,
35    VariantProps<typeof inputVariants> {
36  asChild?: boolean;
37}
38 
39function Select({ ...props }: React.ComponentProps<typeof ShadcnSelect>) {
40  return <ShadcnSelect {...props} />;
41}
42 
43function SelectGroup({
44  ...props
45}: React.ComponentProps<typeof SelectPrimitive.Group>) {
46  return <ShadcnSelectGroup {...props} />;
47}
48 
49interface BitSelectValueProps
50  extends React.ComponentProps<typeof SelectPrimitive.Value>,
51    VariantProps<typeof inputVariants> {
52  asChild?: boolean;
53}
54 
55function SelectValue({ ...props }: BitSelectValueProps) {
56  const { font } = props;
57 
58  return (
59    <ShadcnSelectValue
60      className={cn(font !== "normal" && "retro")}
61      {...props}
62    />
63  );
64}
65 
66interface BitSelectTriggerProps
67  extends React.ComponentProps<typeof SelectPrimitive.Trigger>,
68    VariantProps<typeof inputVariants> {
69  asChild?: boolean;
70}
71 
72function SelectTrigger({ children, ...props }: BitSelectTriggerProps) {
73  const { className, font } = props;
74 
75  return (
76    <div
77      className={cn(
78        "relative border-y-6 border-foreground dark:border-ring",
79        className,
80        font !== "normal" && "retro"
81      )}
82    >
83      <ShadcnSelectTrigger
84        {...props}
85        className={cn("rounded-none ring-0 w-full border-0", className)}
86      >
87        {children}
88      </ShadcnSelectTrigger>
89 
90      <div
91        className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
92        aria-hidden="true"
93      />
94    </div>
95  );
96}
97 
98export interface BitSelectContentProps
99// … truncated