@patreon/studio/module/components/SegmentedControl/types.d.ts

Patreon Studio Design System

import type { IconComponent } from '../Icon/types';
export declare 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';
}
export declare type AriaAttributes = Omit<React.AriaAttributes, 'aria-label'> & Required<Pick<React.AriaAttributes, 'aria-label'>>;
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 declare type Segment = IconOnlySegment | LabelOnlySegment | (IconOnlySegment & LabelOnlySegment);
export {};