Select

1'use client';
2 
3import {
4  Content,
5  Group,
6  Icon,
7  Item,
8  ItemIndicator,
9  ItemText,
10  Label,
11  Portal,
12  Root,
13  ScrollDownButton,
14  ScrollUpButton,
15  Separator,
16  Trigger,
17  Value,
18  Viewport,
19} from '@radix-ui/react-select';
20import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
21import { cn } from '@/lib/classnames';
22import type { ComponentProps } from 'react';
23 
24function SelectRoot({ ...props }: ComponentProps<typeof Root>) {
25  return <Root data-slot='select' {...props} />;
26}
27 
28function SelectGroup({ ...props }: ComponentProps<typeof Group>) {
29  return <Group data-slot='select-group' {...props} />;
30}
31 
32function SelectValue({ ...props }: ComponentProps<typeof Value>) {
33  return <Value data-slot='select-value' {...props} />;
34}
35 
36function SelectTrigger({
37  className,
38  size = 'default',
39  children,
40  ...props
41}: ComponentProps<typeof Trigger> & {
42  size?: 'sm' | 'default';
43}) {
44  return (
45    <Trigger
46      className={cn(
47        "flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
48        className,
49      )}
50      data-size={size}
51      data-slot='select-trigger'
52      {...props}
53    >
54      {children}
55      <Icon asChild>
56        <ChevronDownIcon className='size-4 opacity-50' />
57      </Icon>
58    </Trigger>
59  );
60}
61 
62function SelectContent({
63  className,
64  children,
65  position = 'popper',
66  align = 'center',
67  ...props
68}: ComponentProps<typeof Content>) {
69  return (
70    <Portal>
71      <Content
72        align={align}
73        className={cn(
74// … truncated