Select

1import { cn } from "@/lib/utils";
2import { Select as BaseSelect } from "@base-ui/react";
3import { CheckIcon, ChevronDown, ChevronUp } from "lucide-react";
4import * as React from "react";
5 
6const Select = BaseSelect.Root;
7 
8function SelectTrigger({
9  className,
10  children,
11  iconLead,
12  inline,
13  addon,
14  ...props
15}: BaseSelect.Trigger.Props & {
16  iconLead?: React.ReactNode;
17  /** Borderless compact trigger for use inside `InputGroup` (e.g. after a divider). */
18  inline?: boolean;
19  /** Chevron-only trigger for the trailing `InputGroupAddon` slot. */
20  addon?: boolean;
21}) {
22  return (
23    <BaseSelect.Trigger
24      data-slot={addon ? "addon-select" : inline ? "inline-select" : undefined}
25      className={cn(
26        "group flex h-6 cursor-default items-center rounded-md outline-none",
27        addon
28          ? "size-6 shrink-0 justify-center border-0 bg-transparent p-0"
29          : inline
30            ? "w-auto shrink-0 gap-0.5 border-0 bg-transparent pl-1 pr-1.5"
31            : "min-w-0 flex-1 gap-1 border border-grey-300 pl-2 focus-visible:border-blue-500 dark:border-grey-700 dark:focus-visible:border-blue-500",
32        "has-data-[figui=select-icon-lead]:pl-0",
33        className,
34      )}
35      {...props}
36    >
37      {iconLead && (
38        <span
39          className="flex size-6 shrink-0 items-center justify-center [&_svg]:size-3 [&_svg]:shrink-0 [&_svg]:text-black-500 dark:[&_svg]:text-white-500"
40          data-figui="select-icon-lead"
41        >
42          {typeof iconLead === "string" ? (
43            <span className="typography-body-medium text-black-500 dark:text-white-500">
44              {iconLead}
45            </span>
46          ) : (
47            iconLead
48          )}
49        </span>
50      )}
51      {children}
52      <BaseSelect.Icon
53        className={cn(
54          "flex items-center justify-center [&_svg]:shrink-0 [&_svg]:text-black-800 group-data-disabled:[&_svg]:text-black-400 dark:[&_svg]:text-white-800 dark:group-data-disabled:[&_svg]:text-white-400",
55          addon || !inline ? "size-6 [&_svg]:size-3" : "size-4 [&_svg]:size-2.5",
56        )}
57      >
58        <ChevronDown />
59      </BaseSelect.Icon>
60    </BaseSelect.Trigger>
61  );
62}
63 
64function SelectContent({ className, children, ...props }: BaseSelect.Positioner.Props) {
65  return (
66    <BaseSelect.Portal>
67      <BaseSelect.Positioner
68        className={cn(
69          "overflow-hidden rounded-lg bg-grey-900 shadow-400 dark:inset-shadow-2xs dark:inset-shadow-white-100",
70          className,
71        )}
72// … truncated