Select

1"use client"
2 
3import * as React from "react"
4import * as SelectPrimitive from "@radix-ui/react-select"
5import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function Select({
10  ...props
11}: React.ComponentProps<typeof SelectPrimitive.Root>) {
12  return <SelectPrimitive.Root data-slot="select" {...props} />
13}
14 
15function SelectGroup({
16  ...props
17}: React.ComponentProps<typeof SelectPrimitive.Group>) {
18  return <SelectPrimitive.Group data-slot="select-group" {...props} />
19}
20 
21function SelectValue({
22  ...props
23}: React.ComponentProps<typeof SelectPrimitive.Value>) {
24  return <SelectPrimitive.Value data-slot="select-value" {...props} />
25}
26 
27function SelectTrigger({
28  className,
29  children,
30  ...props
31}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
32  return (
33    <SelectPrimitive.Trigger
34      data-slot="select-trigger"
35      className={cn(
36        "flex h-8 w-fit min-w-36 select-none items-center justify-between gap-3 whitespace-nowrap rounded-md border border-[#8b909a] bg-[linear-gradient(180deg,#fdfdfe_0%,#e4e7ec_48%,#d3d7de_52%,#eceef2_100%)] py-0 pl-3 pr-1 text-[13px] text-[#33383f] shadow-[inset_0_1px_1px_rgba(255,255,255,0.9),0_1px_2px_rgba(20,60,130,0.2)] outline-none transition-[filter] [text-shadow:0_1px_0_rgba(255,255,255,0.8)] hover:brightness-103 focus-visible:ring-[3px] focus-visible:ring-[var(--aqua-ring,#6cb0f7)]/70 active:brightness-95 disabled:pointer-events-none disabled:opacity-50 [&_[data-slot=select-value]]:truncate",
37        className
38      )}
39      {...props}
40    >
41      {children}
42      <span className="flex h-6 w-5 shrink-0 flex-col items-center justify-center rounded-[4px] border border-[var(--aqua-edge,#1c5fb8)] bg-[linear-gradient(180deg,var(--aqua-gel-hi,#a8d0f7)_0%,var(--aqua-gel-mid,#4a90ec)_50%,var(--aqua-gel-deep,#2a6fd0)_51%,var(--aqua-gel-light,#6aabf3)_100%)] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.6)]">
43        <ChevronUpIcon className="size-2.5" strokeWidth={3} />
44        <ChevronDownIcon className="size-2.5" strokeWidth={3} />
45      </span>
46    </SelectPrimitive.Trigger>
47  )
48}
49 
50function SelectContent({
51  className,
52  children,
53  position = "popper",
54  ...props
55}: React.ComponentProps<typeof SelectPrimitive.Content>) {
56  return (
57    <SelectPrimitive.Portal>
58      <SelectPrimitive.Content
59        data-slot="select-content"
60        position={position}
61        sideOffset={4}
62        className={cn(
63// … truncated