select

1import * as React from "react"
2import { Select as SelectPrimitive } from "@base-ui/react/select"
3 
4import { cn } from "@/lib/utils"
5import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
6 
7const Select = SelectPrimitive.Root
8 
9function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
10  return (
11    <SelectPrimitive.Group
12      data-slot="select-group"
13      className={cn("scroll-my-1", className)}
14      {...props}
15    />
16  )
17}
18 
19function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
20  return (
21    <SelectPrimitive.Value
22      data-slot="select-value"
23      className={cn("flex flex-1 text-left", className)}
24      {...props}
25    />
26  )
27}
28 
29function SelectTrigger({
30  className,
31  size = "default",
32  children,
33  ...props
34}: SelectPrimitive.Trigger.Props & {
35  size?: "sm" | "default"
36}) {
37  return (
38    <SelectPrimitive.Trigger
39      data-slot="select-trigger"
40      data-size={size}
41      className={cn(
42        "border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-sm *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
43        className
44      )}
45      {...props}
46    >
47      {children}
48      <SelectPrimitive.Icon
49        render={
50          <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
51        }
52      />
53    </SelectPrimitive.Trigger>
54  )
55}
56 
57function SelectContent({
58  className,
59  children,
60  side = "bottom",
61  sideOffset = 4,
62  align = "center",
63  alignOffset = 0,
64  alignItemWithTrigger = true,
65  ...props
66}: SelectPrimitive.Popup.Props &
67  Pick<
68    SelectPrimitive.Positioner.Props,
69    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
70  >) {
71  return (
72    <SelectPrimitive.Portal>
73// … truncated