Sort Dropdown
FFG-native controlled sort control — a chip-styled native select with leading sort glyph and trailing caret.
Installation
pnpm dlx shadcn@latest add @ffg/sort-dropdownUsage
import { SortDropdown } from "@/components/ui/sort-dropdown";
<SortDropdown value={value} onChange={setValue} options={SORT_OPTIONS} />A controlled native <select> wrapped in a chip-styled label. Pass value,
an onChange handler, and an options array of { id, label }. The optional
label prop overrides the leading caption (default "Sort by:").
The native select is made invisible (appearance-none, transparent) so the
chip supplies the chrome: a leading sort glyph, the caption, the select, and a
trailing caret.
Dark mode: the chip uses a faint border, transparent fill, and foreground text, while the flanking icons map to the muted token so they stay secondary against either background. The hover border deepens to the strong divider.