import { JSX } from 'solid-js'; export interface SegmentedOption { value: string; label: string; /** Optional leading icon (a JSX node, e.g. a lucide-solid icon). */ icon?: JSX.Element; } export interface SegmentedProps { /** The selectable segments, left to right. */ options: SegmentedOption[]; /** The selected segment's `value` (controlled). */ value: string; /** Fires with the next `value` when a segment is chosen. */ onChange: (value: string) => void; /** Control density. Defaults to `md`. */ size?: 'sm' | 'md'; class?: string; } /** * `Segmented`: a single-select pill track (a.k.a. segmented / toggle-group). A * recessed `bg-surface-sunken` rail of segment buttons where the selected segment * lifts onto a raised `bg-background` chip. Token-driven, light + dark. * * a11y: `role="group"` of real `