import { ReactNode, HTMLAttributes } from 'react';
import { FieldProps } from '../utils';
declare type BaseElement = HTMLDivElement;
declare type BaseProps = HTMLAttributes<BaseElement>;
export interface ToggleButtonGroupOption<T extends string | number> {
    /**
     * The id to associate with when selected.
     */
    readonly id: T;
    /**
     * Togglebutton content, can be e.g. Icon or Typography.
     */
    readonly content: ReactNode;
    /**
     * Use to disable toggle button
     * Default `false`
     */
    readonly disabled?: boolean;
}
export interface ToggleButtonGroupProps<T extends string | number> extends Omit<BaseProps, 'onChange'> {
    /**
     * `class` to be passed to the component.
     */
    readonly className?: BaseProps['className'];
    /**
     * ToggleButton options with ID, react node element as content and disabled.
     */
    readonly options: ReadonlyArray<ToggleButtonGroupOption<T>>;
    /**
     * Array of id values that should be toggled.
     */
    readonly values: ReadonlyArray<T>;
    /**
     * If `true`, only allow one of the child ToggleButton values to be selected.
     * @default false
     */
    readonly exclusive?: boolean;
    /**
     * Callback fired when user clicks a toggle button.
     * @param id The toggle button id prop
     */
    readonly onChange: (id: T) => void;
}
export declare function ToggleButtonGroup<T extends string | number>({ options, onChange, values, exclusive, ...props }: ToggleButtonGroupProps<T>): JSX.Element;
export declare const ToggleButtonGroupWithField: <T extends string | number>(props: Pick<FieldProps, "compact" | "label"> & ToggleButtonGroupProps<T>) => import("react").ReactElement<any, any> | null;
export {};