MicroClub Select

1'use client';
2 
3import * as React from 'react';
4import { Select as SelectPrimitive } from '@base-ui/react/select';
5import { CheckIcon, ChevronDownIcon, ChevronUpIcon, SearchIcon } from 'lucide-react';
6 
7import { cn } from '@/lib/utils';
8 
9export type McSelectVariant =
10  | 'default'
11  | 'icon-leading'
12  | 'avatar-leading'
13  | 'dot-leading'
14  | 'search';
15 
16const McSelect = SelectPrimitive.Root;
17 
18function McSelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
19  return (
20    <SelectPrimitive.Group
21      data-slot="select-group"
22      className={cn('scroll-my-1', className)}
23      {...props}
24    />
25  );
26}
27 
28function McSelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
29  return (
30    <SelectPrimitive.Value
31      data-slot="select-value"
32      className={cn('flex flex-1 text-left', className)}
33      {...props}
34    />
35  );
36}
37 
38function McSelectLabel({ className, children }: { className?: string; children: React.ReactNode }) {
39  return (
40    <label
41      className={cn(
42        'mb-1.5 block text-sm font-medium leading-5',
43        'text-muted-foreground',
44        className
45      )}
46    >
47      {children}
48    </label>
49  );
50}
51 
52interface McSelectTriggerProps extends SelectPrimitive.Trigger.Props {
53  size?: 'sm' | 'default';
54  variant?: McSelectVariant;
55 
56  leadingIcon?: React.ReactNode;
57 
58  leadingAvatar?: React.ReactNode;
59 
60  dotColor?: string;
61}
62 
63function McSelectTrigger({
64  className,
65  size = 'default',
66  variant = 'default',
67  leadingIcon,
68  leadingAvatar,
69  dotColor,
70  children,
71  ...props
72}: McSelectTriggerProps) {
73  const isSearch = variant === 'search';
74 
75  return (
76    <SelectPrimitive.Trigger
77      data-slot="select-trigger"
78      data-size={size}
79      data-variant={variant}
80      className={cn(
81        'flex w-80 items-center gap-2 rounded-lg outline-none select-none',
82        'px-3.5 py-2.5 text-sm whitespace-nowrap',
83        'transition-all duration-150',
84 
85        isSearch
86          ? ['bg-input', 'border border-border', 'shadow-sm']
87          : ['bg-input', 'border border-border', 'shadow-sm'],
88 
89        'data-placeholder:text-muted-foreground',
90 
91        'data-popup-open:border-ring',
92        'data-popup-open:ring-4 data-popup-open:ring-ring',
93        'focus-visible:border-ring',
94        'focus-visible:ring-4 focus-visible:ring-ring',
95 
96        'disabled:cursor-not-allowed disabled:opacity-50',
97        'aria-invalid:border-destructive aria-invalid:ring-4 aria-invalid:ring-destructive',
98 
99        'data-[size=default]:h-11',
100// … truncated