Select

1"use client";
2
3import { ComponentProps } from "react";
4
5import { Select as SelectPrimitive } from "@base-ui/react/select";
6
7import { cn } from "@/lib/utils";
8import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
9
10const Select = SelectPrimitive.Root;
11
12function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
13  return (
14    <SelectPrimitive.Group
15      data-slot="select-group"
16      className={cn("scroll-my-1 p-4", className)}
17      {...props}
18    />
19  );
20}
21
22function SelectValue({ className, ...props }: SelectPrimitive.Value.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  children,
36  ...props
37}: SelectPrimitive.Trigger.Props & {
38  size?: "sm" | "default";
39}) {
40  return (
41    <SelectPrimitive.Trigger
42      data-slot="select-trigger"
43      data-size={size}
44      className={cn(
45        "data-placeholder:text-[#bec8d0] bg-input 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 flex w-fit items-center justify-between gap-1.5 rounded-lg border py-[.8rem] pr-3 pl-3 text-base whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:bg-secondary-200/10 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 data-[size=sm]:rounded-[min(var(--radius),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:outline-none focus:border-primary dark:focus:border-primary border-border",
46        className
47      )}
48      {...props}
49    >
50      {children}
51      <SelectPrimitive.Icon
52        render={
53          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
54        }
55      />
56    </SelectPrimitive.Trigger>
57  );
58}
59
60function SelectContent({
61  className,
62  children,
63  side = "bottom",
64  sideOffset = 4,
65  align = "center",
66  alignOffset = 0,
67  alignItemWithTrigger = true,
68  ...props
69}: SelectPrimitive.Popup.Props &
70  Pick<
71    SelectPrimitive.Positioner.Props,
72// … truncated