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 { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
8import { buttonVariants } from "@/registry/optics/button";
9 
10const Select = SelectPrimitive.Root;
11 
12function SelectGroup({ className = "", ...props }) {
13	return (
14		<SelectPrimitive.Group
15			data-slot="select-group"
16			className={cn("scroll-my-1 p-1", className)}
17			{...props}
18		/>
19	);
20}
21 
22function SelectValue({ className = "", ...props }) {
23	return (
24		<SelectPrimitive.Value
25			data-slot="select-value"
26			className={cn("flex flex-1 text-left", className)}
27			{...props}
28		/>
29	);
30}
31 
32function SelectTrigger({
33	className = "",
34	size = "default",
35	variant = "raised",
36	children = null,
37	...props
38}) {
39	return (
40		<SelectPrimitive.Trigger
41			data-slot="select-trigger"
42			data-size={size}
43			className={cn(
44				"border-input data-[placeholder]:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 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 px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 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]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
45				className,
46				variant &&
47					buttonVariants({
48						variant,
49						animation: "colors",
50					}),
51			)}
52			{...props}
53		>
54			{children}
55			<SelectPrimitive.Icon
56				render={
57					<ChevronDownIcon className="text-muted-foreground size-3.5 pointer-events-none" />
58				}
59			/>
60		</SelectPrimitive.Trigger>
61	);
62}
63 
64function SelectContent({
65	className = "",
66	children = null,
67	side = "bottom",
68	sideOffset = 4,
69	align = "center",
70	alignOffset = 0,
71	alignItemWithTrigger = false,
72	...props
73}) {
74	return (
75		<SelectPrimitive.Portal>
76			<SelectPrimitive.Positioner
77				side={side}
78				sideOffset={sideOffset}
79				align={align}
80				alignOffset={alignOffset}
81				alignItemWithTrigger={alignItemWithTrigger}
82				collisionPadding={8}
83// … truncated