import type { IconComponent } from '~/components/Icon/types'; export type SegmentedControlSegments = [Segment, Segment, ...Segment[]]; export interface SegmentedControlProps { /** * Segments to render within `SegmentedControl`. */ segments: SegmentedControlSegments; /** * Render `SegmentedControl` with 100% width. */ fluidWidth?: boolean; /** * onClick event to call on `SegmentedControl`. */ onClick: (index: number) => void; /** * Initial selected `Segment`. */ selectedIndex: number; /** * Size of SegmentedControl */ size?: 'sm' | 'md' | 'lg'; } type AriaAttributes = Omit & Required>; interface SegmentBase extends AriaAttributes { /** * Event to call when `Segment` is selected. */ onSelect?: () => void; } interface IconOnlySegment extends SegmentBase { /** * The icon to to display alongside text in a `Segment`. */ icon: IconComponent; } interface LabelOnlySegment extends SegmentBase { /** * Label of Segment. */ label: React.ReactNode; } export type Segment = IconOnlySegment | LabelOnlySegment | (IconOnlySegment & LabelOnlySegment); export {};