Select

1"use client";
2 
3import * as RadixSelect from "@radix-ui/react-select";
4import { Check, ChevronDown, ChevronUp } from "lucide-react";
5import { forwardRef } from "react";
6import { cn } from "@/lib/utils";
7import { focusRing, glass } from "@/lib/glass";
8 
9export const Select = RadixSelect.Root;
10 
11export const SelectTrigger = forwardRef<
12  HTMLButtonElement,
13  React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger>
14>(({ className, children, ...props }, ref) => (
15  <RadixSelect.Trigger
16    ref={ref}
17    className={cn(
18      glass,
19      focusRing,
20      "group text-left w-full px-4 py-2 rounded-full inline-flex items-center justify-between gap-2",
21      className,
22    )}
23    {...props}
24  >
25    {children}
26    <RadixSelect.Icon asChild>
27      <ChevronDown
28        className="size-4 shrink-0 opacity-60 transition-transform duration-200 group-data-[state=open]:rotate-180"
29        aria-hidden
30      />
31    </RadixSelect.Icon>
32  </RadixSelect.Trigger>
33));
34SelectTrigger.displayName = "SelectTrigger";
35 
36export const SelectValue = RadixSelect.Value;
37 
38const SelectScrollUpButton = forwardRef<
39  HTMLDivElement,
40  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollUpButton>
41>(({ className, ...props }, ref) => (
42  <RadixSelect.ScrollUpButton
43    ref={ref}
44    className={cn(
45      "flex h-7 w-full shrink-0 cursor-default items-center justify-center border-b border-black/[0.08] dark:border-white/10 bg-black/[0.03] dark:bg-white/[0.04] text-current/70",
46      "[&[data-state=hidden]]:hidden",
47      className,
48    )}
49    {...props}
50  >
51    <ChevronUp className="size-4" aria-hidden />
52  </RadixSelect.ScrollUpButton>
53));
54SelectScrollUpButton.displayName = RadixSelect.ScrollUpButton.displayName;
55 
56const SelectScrollDownButton = forwardRef<
57  HTMLDivElement,
58  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollDownButton>
59>(({ className, ...props }, ref) => (
60  <RadixSelect.ScrollDownButton
61    ref={ref}
62    className={cn(
63      "flex h-7 w-full shrink-0 cursor-default items-center justify-center border-t border-black/[0.08] dark:border-white/10 bg-black/[0.03] dark:bg-white/[0.04] text-current/70",
64      "[&[data-state=hidden]]:hidden",
65      className,
66    )}
67    {...props}
68  >
69    <ChevronDown className="size-4" aria-hidden />
70  </RadixSelect.ScrollDownButton>
71));
72SelectScrollDownButton.displayName = RadixSelect.ScrollDownButton.displayName;
73 
74export const SelectContent = forwardRef<
75  HTMLDivElement,
76  React.ComponentPropsWithoutRef<typeof RadixSelect.Content>
77>(
78  (
79    {
80// … truncated