Select

1import * as React from 'react'
2import * as SelectPrimitive from '@radix-ui/react-select'
3import { cn } from '@/lib/utils'
4 
5const Select       = SelectPrimitive.Root
6const SelectGroup  = SelectPrimitive.Group
7const SelectValue  = SelectPrimitive.Value
8 
9/* ── Trigger ── */
10const SelectTrigger = React.forwardRef<
11  React.ElementRef<typeof SelectPrimitive.Trigger>,
12  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
13>(({ className, children, ...props }, ref) => (
14  <SelectPrimitive.Trigger
15    ref={ref}
16    className={cn(
17      'flex h-9 w-full items-center justify-between',
18      'border border-[var(--border)] bg-[var(--surface)]',
19      'px-3 py-0',
20      'text-[0.8rem] font-mono text-[var(--text-secondary)]',
21      'rounded-none',
22      'outline-none',
23      'focus:border-[var(--border-active)] focus:shadow-[var(--glow-green)]',
24      'disabled:cursor-not-allowed disabled:opacity-40',
25      'data-[placeholder]:text-[var(--text-muted)]',
26      'transition-all duration-150',
27      '[&>span]:pointer-events-none',
28      className
29    )}
30    {...props}
31  >
32    {children}
33    <SelectPrimitive.Icon asChild>
34      <span style={{ color: 'var(--text-muted)', fontSize: '0.6rem', marginLeft: '0.5rem' }}>▼</span>
35    </SelectPrimitive.Icon>
36  </SelectPrimitive.Trigger>
37))
38SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
39 
40/* ── Content ── */
41const SelectContent = React.forwardRef<
42  React.ElementRef<typeof SelectPrimitive.Content>,
43  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
44>(({ className, children, position = 'popper', ...props }, ref) => (
45  <SelectPrimitive.Portal>
46    <SelectPrimitive.Content
47      ref={ref}
48      className={cn(
49        'relative z-50 min-w-[8rem] overflow-hidden',
50        'border border-[var(--border)] bg-[var(--surface-raised)]',
51        'rounded-none',
52        'shadow-[0_8px_24px_#07050F99]',
53        position === 'popper' && 'w-[var(--radix-select-trigger-width)]',
54        className
55      )}
56      position={position}
57      sideOffset={4}
58      {...props}
59    >
60      <SelectPrimitive.Viewport style={{ padding: '4px 0' }}>
61        {children}
62      </SelectPrimitive.Viewport>
63    </SelectPrimitive.Content>
64  </SelectPrimitive.Portal>
65))
66SelectContent.displayName = SelectPrimitive.Content.displayName
67 
68/* ── Label ── */
69const SelectLabel = React.forwardRef<
70  React.ElementRef<typeof SelectPrimitive.Label>,
71  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
72// … truncated