Select

1'use client';
2 
3import { Select as SelectPrimitive } from '@base-ui/react/select';
4import * as React from 'react';
5 
6import { Icon } from '@/components/ui/icon';
7import { cn } from '@/lib/utils';
8 
9export type SelectSize = 'sm' | 'default' | 'lg';
10 
11interface SelectSizeContextValue {
12  size?: SelectSize;
13}
14 
15const SelectSizeContext = React.createContext<
16  SelectSizeContextValue | undefined
17>(undefined);
18 
19const useSelectSizeContext = () => {
20  return React.useContext(SelectSizeContext);
21};
22 
23type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
24  /**
25   * The size of the select and its items.
26   * @default "default"
27   */
28  size?: SelectSize;
29};
30 
31/**
32 * Select component for choosing from a list of options.
33 *
34 * Built on Base UI Select primitive. Supports single and multiple selection
35 * via the `multiple` prop.
36 *
37 * @example
38 * ```tsx
39 * <Select items={items}>
40 *   <SelectTrigger>
41 *     <SelectValue placeholder="Pick one" />
42 *   </SelectTrigger>
43 *   <SelectContent>
44 *     <SelectItem value="a">Option A</SelectItem>
45 *     <SelectItem value="b">Option B</SelectItem>
46 *   </SelectContent>
47 * </Select>
48 * ```
49 */
50function Select({ size = 'default', children, ...props }: SelectProps) {
51  return (
52    <SelectSizeContext.Provider value={{ size }}>
53      <SelectPrimitive.Root data-slot="select" {...props}>
54        {children}
55      </SelectPrimitive.Root>
56    </SelectSizeContext.Provider>
57  );
58}
59 
60function SelectValue(props: SelectPrimitive.Value.Props) {
61  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
62}
63 
64function SelectIcon({ className, ...props }: SelectPrimitive.Icon.Props) {
65  const sizeContext = useSelectSizeContext();
66  const size = sizeContext?.size ?? 'default';
67 
68  return (
69    <SelectPrimitive.Icon
70      data-slot="select-icon"
71      className={cn(
72        'text-fill-active shrink-0 opacity-60',
73        '[[data-disabled]>&]:opacity-30',
74        size === 'lg' ? 'size-6' : 'size-4',
75        className,
76      )}
77      {...props}
78    />
79  );
80}
81 
82function SelectTrigger({
83  className,
84  children,
85  ...props
86}: SelectPrimitive.Trigger.Props) {
87  const sizeContext = useSelectSizeContext();
88  const size = sizeContext?.size ?? 'default';
89 
90  return (
91    <SelectPrimitive.Trigger
92      data-slot="select-trigger"
93      className={cn(
94        'relative flex w-fit items-center justify-between whitespace-nowrap',
95        'bg-fill-onsurface-ui-3 transition-all outline-none',
96        'border border-transparent',
97// … truncated