import { default as React } from 'react';
import { IconComponent } from '../../Icons/types';
type SegmentedButtonOptionBase = {
    value: string | number;
    icon?: IconComponent | React.ReactElement;
    /** Shown on hover via DS Tooltip. */
    tooltipText?: string;
};
export type SegmentedButtonOption = (SegmentedButtonOptionBase & {
    label: string;
    ariaLabel?: string;
}) | (SegmentedButtonOptionBase & {
    label?: undefined;
    icon: IconComponent | React.ReactElement;
    ariaLabel: string;
});
export type SegmentedButtonColor = "brand" | "neutral" | "error" | "success" | "warning" | "default" | "danger";
export interface SegmentedButtonProps {
    name: string;
    /**
     * Accessible name for the radio group. Falls back to `name`.
     * Prefer a human-readable label — `name` is often a form key like `"n"`.
     */
    ariaLabel?: string;
    size?: "small" | "medium" | "large";
    /**
     * Visual color variant.
     * Legacy aliases: `default` → `brand`, `danger` → `error`.
     */
    color?: SegmentedButtonColor;
    options: SegmentedButtonOption[];
    value: string | number;
    onChange?: (name: string, value: string | number) => void;
    /** Accepts an IconComponent (preferred) or a ReactElement (legacy). */
    icon?: IconComponent | React.ReactElement;
    /**
     * Layout mode for option widths (CSS Grid — no JS measurement).
     * - `false` (default): each option takes its natural width
     * - `true`: all options same width (widest max-content)
     * - `"fill"`: container fills parent, options distribute equally
     *
     * Legacy: `allowExpand={true}` → `equalWidth={false}`, `allowExpand={false}` → `equalWidth={true}`
     */
    equalWidth?: boolean | "fill";
    /** Legacy prop — use `equalWidth` instead. */
    allowExpand?: boolean;
    /**
     * Behavior when the rail doesn't fit its parent.
     * - `"truncate"` (default): options shrink, labels ellipsize, icons survive
     * - `"scroll"`: options keep their natural width, the rail scrolls horizontally
     * - `"collapse"`: labels are hidden below `collapseAt`, leaving icon-only options
     *
     * Precedence: `equalWidth="fill"` + `overflow="scroll"` → fill wins (scroll ignored).
     */
    overflow?: "truncate" | "scroll" | "collapse";
    /**
     * Available width (px) below which labels are hidden. Only for `overflow="collapse"`.
     * Defaults to a per-size constant — tune it to your content.
     */
    collapseAt?: number;
    /** Disables every transition of the component. Default: false. */
    disableAnimation?: boolean;
    /** Base duration in ms for the shared motion clock. Default: 300. Clamped to [0, 2000]. */
    animationDuration?: number;
    /**
     * Multiplier for the elastic deformation of the pill: 0 disables the bounce and keeps the travel.
     * Default: 1. Clamped to [0, 2].
     */
    animationIntensity?: number;
    disabled?: boolean;
    /** Class for the root rail (`role="radiogroup"`). */
    className?: string;
    /**
     * Class for the sliding pill (empty visual indicator).
     * Supported: radius, shadow, background, etc. Changing `position`,
     * `left`/`right` breaks the insets system and is not supported.
     */
    pillClassName?: string;
    /**
     * Class for the icon of the selected option.
     * (Historically "icon inside the pill"; the icon now lives on the option.)
     */
    iconClassName?: string;
    /**
     * Class for each option element.
     * Changing padding/font-size is supported. Forcing widths that fight
     * the CSS Grid layout is not.
     */
    optionClassName?: string;
    /** Class for the icons of unselected options. */
    optionIconClassName?: string;
}
declare const SegmentedButton: (props: SegmentedButtonProps) => React.JSX.Element;
export default SegmentedButton;