select

1import * as React from "react"
2import { Select as BaseSelect } from "@base-ui/react/select"
3import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6 
7function Select({ ...props }: React.ComponentProps<typeof BaseSelect.Root>) {
8	return <BaseSelect.Root data-slot="select" {...props} />
9}
10 
11function SelectGroup({
12	...props
13}: React.ComponentProps<typeof BaseSelect.Group>) {
14	return <BaseSelect.Group data-slot="select-group" {...props} />
15}
16 
17function SelectPortal({
18	...props
19}: React.ComponentProps<typeof BaseSelect.Portal>) {
20	return <BaseSelect.Portal data-slot="select-portal" {...props} />
21}
22 
23function SelectPositioner({
24	...props
25}: React.ComponentProps<typeof BaseSelect.Positioner>) {
26	return <BaseSelect.Positioner data-slot="select-positioner" {...props} />
27}
28 
29function SelectValue({
30	className,
31	...props
32}: React.ComponentProps<typeof BaseSelect.Value>) {
33	return (
34		<BaseSelect.Value
35			data-slot="select-value"
36			className={cn("text-sm", className)}
37			{...props}
38		/>
39	)
40}
41 
42function SelectTrigger({
43	className,
44	size = "default",
45	children,
46	...props
47}: React.ComponentProps<typeof BaseSelect.Trigger> & {
48	size?: "sm" | "default"
49}) {
50	return (
51		<BaseSelect.Trigger
52			data-slot="select-trigger"
53			data-size={size}
54			className={cn(
55				"group [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/50 aria-invalid:border-destructive bg-input hover:border-ring/70 flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow,border-color] outline-none select-none focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 data-popup-open:[&_*[data-slot=select-icon]]:rotate-180 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
56				className
57			)}
58			{...props}
59		>
60			{children}
61			<BaseSelect.Icon>
62				<ChevronDownIcon
63					data-slot="select-icon"
64					className="size-4 opacity-50 transition-transform"
65				/>
66			</BaseSelect.Icon>
67		</BaseSelect.Trigger>
68	)
69}
70 
71function SelectList({
72	className,
73	...props
74}: React.ComponentProps<typeof BaseSelect.List>) {
75	return (
76		<BaseSelect.List
77			data-slot="select-list"
78// … truncated