import { FieldsetHTMLAttributes } from 'react';
import { BreakpointCustomizable } from '../../types';
import { FieldsetProps } from '../Fieldset/Fieldset';
import { SegmentedControlOption, SegmentedControlSize, SegmentedControlVariant } from './SegmentedControl.utils';
export interface SegmentedControlProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
    /**
     * The `legend` prop describes the group of segments and is used as the accessible group name.
     * It can either be a simple `string` or an object with specific properties.
     * When provided as an object, it allows for more detailed configuration, including:
     * - `headingText: string` The text content for the legend.
     * - `headingSize?: 'x-large' | 'x-large-uppercase' | 'large' | 'large-uppercase' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, defaults to `'medium'`
     * - `headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` Specifies the HTML tag to be used for the heading, defaults to `'h2'`
     *
     * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
     */
    legend: FieldsetProps['legend'];
    /** Name of the underlying radio group. Required to group the segments. */
    name: string;
    /**
     * An array of segment options.
     * `{ label: string; value: string; disabled?: boolean; hideLabel?: boolean; iconName?: IconName; iconSource?: string; }[]`
     */
    options: SegmentedControlOption[];
    /** Value of the segment selected by default in an **uncontrolled** component. Falls back to the first enabled segment. */
    defaultValue?: string;
    /** Disables the entire segmented control, preventing user interaction.
     * @default false
     */
    disabled?: boolean;
    /** Hides the legend visually while keeping it accessible to screen readers, can be responsive.
     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
     * @default false
     */
    hideLegend?: FieldsetProps['hideLegend'];
    /** Shows an info button next to the legend that triggers a popover with the passed content. */
    popoverContent?: React.ReactNode;
    /** Popover info button props:
     *
     * `data-*`: Custom data attributes.
     *
     * `label`: Accessibility label for the default anchor button.
     * (default) 'Toggle popover'
     */
    popoverInfoButtonProps?: {
        [key: `data-${string}`]: string | undefined;
        label?: string;
    };
    /** Size of the segments.
     * @default 'medium'
     */
    size?: SegmentedControlSize;
    /** Stretches the segmented control over the parent's width, the segments share the width equally.
     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
     * @default false
     */
    stretched?: BreakpointCustomizable<boolean>;
    /** Value of the selected segment in a **controlled** component. */
    value?: string;
    /** Visual variant of the track. `'contrast'` uses a darker track background, e.g. on grey surfaces.
     * @default 'default'
     */
    variant?: SegmentedControlVariant;
    /** Callback function called when the selected segment changes. */
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
/**
 * The `DSSegmentedControl` lets users switch between 2–5 equivalent options.
 * It is built on top of `DSFieldset` and native radio inputs.
 * The selected segment stays active until another segment is selected.
 *
 * Design in Figma: [Segmented Control](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26075-11859&p=f&t=MtGizMdVdMCP5J3x-11)
 */
export declare const DSSegmentedControl: import('react').ForwardRefExoticComponent<SegmentedControlProps & import('react').RefAttributes<HTMLInputElement>>;