Select

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