import { type ComponentProps, type ReactNode } from "react";
/**
 * - `filled` (default): a soft surface-2 track; the active option is raised on
 *   the surface with a hairline and a small shadow. For settings and filters
 *   alike.
 * - `outlined`: a bordered button group; the active option takes the brand
 *   tint, like the app-wide selected highlight.
 * - `underline`: text options with a brand underline. Only for view filters.
 */
export type SegmentedControlVariant = "filled" | "outlined" | "underline";
/**
 * `md` is 36px tall (forms, page toolbars); `sm` is 32px (setting rows, list
 * toolbars), the same height as a select in a row.
 */
export type SegmentedControlSize = "md" | "sm";
export interface SegmentedControlOption<Value extends string = string> {
    value: Value;
    /** Short: one or two words. */
    label: ReactNode;
    /** A trailing 11px count, for filters ("Invited 2"). */
    count?: number | string | undefined;
    /** Optional 14px leading icon. */
    icon?: ReactNode | undefined;
    /** Hides the label visually (icon-only option); it stays the accessible name. */
    iconOnly?: boolean | undefined;
    disabled?: boolean | undefined;
    /**
     * Why this option can't be picked and who can fix it. With `disabled`, the
     * option stays focusable and shows the reason on hover, focus and tap.
     */
    disabledReason?: ReactNode | undefined;
}
export interface SegmentedControlProps<Value extends string = string> extends Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "dir" | "children"> {
    /** 2 to 4 options. Use a select for more. */
    options: readonly SegmentedControlOption<Value>[];
    value?: Value | undefined;
    defaultValue?: Value | undefined;
    onValueChange?: ((value: Value) => void) | undefined;
    variant?: SegmentedControlVariant | undefined;
    size?: SegmentedControlSize | undefined;
    /** Disables every option. */
    disabled?: boolean | undefined;
    /** Saving the new value: a spinner replaces the active option's label, which keeps its width. */
    pending?: boolean | undefined;
    /** Stretch the options to fill the width (phones, sheets). */
    fullWidth?: boolean | undefined;
}
export declare function SegmentedControl<Value extends string = string>({ options, value: valueProp, defaultValue, onValueChange, variant, size, disabled, pending, fullWidth, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledByProp, "aria-describedby": ariaDescribedByProp, ...props }: SegmentedControlProps<Value>): import("react").JSX.Element;