select

1"use client"
2 
3import * as React from "react"
4import { Select as SelectPrimitive } from "@base-ui/react/select"
5 
6import { cn } from "@/lib/utils"
7import { IconSelector, IconCheck, IconChevronUp, IconChevronDown } from "@tabler/icons-react"
8 
9type SelectSize = "xs" | "sm" | "default" | "lg" | "xl" | "2xl"
10 
11const SelectSizeContext = React.createContext<SelectSize>("default")
12 
13function Select<Value, Multiple extends boolean | undefined = false>({
14  size = "default",
15  ...props
16}: SelectPrimitive.Root.Props<Value, Multiple> & { size?: SelectSize }) {
17  return (
18    <SelectSizeContext.Provider value={size}>
19      <SelectPrimitive.Root {...props} />
20    </SelectSizeContext.Provider>
21  )
22}
23 
24function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
25  return (
26    <SelectPrimitive.Group
27      data-slot="select-group"
28      className={cn(
29        "scroll-my-1 p-1 group-data-[size=xs]/select-content:p-0.5 group-data-[size=xl]/select-content:p-1.5 group-data-[size=2xl]/select-content:p-2",
30        className
31      )}
32      {...props}
33    />
34  )
35}
36 
37function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
38  return (
39    <SelectPrimitive.Value
40      data-slot="select-value"
41      className={cn("flex flex-1 text-left", className)}
42      {...props}
43    />
44  )
45}
46 
47function SelectTrigger({
48  className,
49  size,
50  children,
51  ...props
52}: SelectPrimitive.Trigger.Props & {
53  size?: SelectSize
54}) {
55  const contextSize = React.useContext(SelectSizeContext)
56 
57  return (
58    <SelectPrimitive.Trigger
59      data-slot="select-trigger"
60      data-size={size ?? contextSize}
61      className={cn(
62// … truncated