Sort Dropdown Glass

1/**
2 * SortDropdownGlass Component
3 *
4 * Atomic sorting control built on DropdownMenuGlass primitives for data table and list sorting.
5 * Provides intuitive sort field selection with visual indicators for active sort and direction.
6 *
7 * ## Features
8 * - **4 Sort Fields:** commits, stars, name, contribution (configurable via `options` prop)
9 * - **2 Sort Orders:** ascending (asc) and descending (desc) with arrow indicators
10 * - **Responsive Design:** Compact mode for mobile, full mode for desktop
11 * - **Visual Indicators:** Check icon for selected field, arrow icons for sort direction
12 * - **Theme-Aware:** Unified glass styling via DropdownMenuGlass
13 * - **Smart Toggle:** Click same field to toggle order, click different field to switch
14 * - **Accessible:** ARIA menu pattern with keyboard navigation
15 * - **Compound API:** Built on shadcn/ui DropdownMenuGlass pattern
16 * - **Customizable Options:** Filter available sort fields via `options` prop
17 *
18 * ## CSS Variables
19 * Uses DropdownMenuGlass CSS variables (defined in `dropdown-content-styles.ts`):
20 * - `--dropdown-bg` - Dropdown trigger and content background
21 * - `--dropdown-border` - Dropdown border color
22 * - `--dropdown-glow` - Hover glow effect
23 * - `--dropdown-item-text` - Menu item text color
24 * - `--select-item-selected-bg` - Selected item background
25 * - `--text-accent` - Arrow icon color
26 * - `--text-muted` - Chevron icon color
27 *
28 * @example Basic usage
29 * ```tsx
30 * import { SortDropdownGlass } from 'shadcn-glass-ui'
31 *
32 * function DataTable() {
33 *   const [sortBy, setSortBy] = useState<SortField>('commits')
34 *   const [sortOrder, setSortOrder] = useState<SortOrder>('desc')
35 *
36 *   return (
37 *     <SortDropdownGlass
38 *       sortBy={sortBy}
39 *       sortOrder={sortOrder}
40 *       onSortChange={(field, order) => {
41 *         setSortBy(field)
42 *         setSortOrder(order)
43 *       }}
44 *     />
45 *   )
46 * }
47 * ```
48 *
49 * @example Compact mode for mobile
50 * ```tsx
51 * <SortDropdownGlass
52 *   sortBy="stars"
53 *   sortOrder="asc"
54 *   onSortChange={handleSortChange}
55 *   compact={true}
56 * />
57 * ```
58 *
59 * @example Limited sort options
60 * ```tsx
61 * <SortDropdownGlass
62 *   sortBy="name"
63 *   sortOrder="asc"
64 *   onSortChange={handleSortChange}
65 *   options={['name', 'stars']}
66 * />
67 * ```
68 *
69 * @example With custom styling
70 * ```tsx
71 * <SortDropdownGlass
72 *   sortBy="contribution"
73 *   sortOrder="desc"
74 *   onSortChange={handleSortChange}
75 *   className="md:ml-auto"
76 * />
77 * ```
78 *
79 * @accessibility
80// … truncated