/**
 * Web ToggleButtonGroup Component
 */
import React from 'react';
declare function ToggleButtonGroup(ownProps: ToggleButtonGroupProps): import("react/jsx-runtime").JSX.Element;
export default ToggleButtonGroup;
import type { ButtonSize } from '../Button';
import type { FormStatusBaseProps } from '../FormStatus';
import type { SkeletonShow } from '../Skeleton';
import type { SpacingProps, SpaceType } from '../../shared/types';
export type ToggleButtonGroupVariant = 'default' | 'checkbox' | 'radio';
export type ToggleButtonGroupSuffix = string | (() => React.ReactNode) | React.ReactNode;
export type ToggleButtonGroupLayoutDirection = 'column' | 'row';
export type ToggleButtonGroupValue = string | number | Record<string, unknown> | unknown[];
export type ToggleButtonGroupValues = string | ToggleButtonGroupValue[];
export type ToggleButtonGroupChildren = string | (() => React.ReactNode) | React.ReactNode;
export type ToggleButtonGroupChangeEvent = {
    value: ToggleButtonGroupValue;
    values: ToggleButtonGroupValues;
    event: React.SyntheticEvent;
};
export type ToggleButtonGroupProps = Omit<React.HTMLProps<HTMLElement>, 'label' | 'value' | 'children' | 'onChange' | 'size'> & Omit<SpacingProps, 'top' | 'right' | 'bottom' | 'left'> & FormStatusBaseProps & {
    /**
     * Use either the `label` property or provide a custom one.
     */
    label?: string | React.ReactNode;
    labelDirection?: 'horizontal' | 'vertical';
    labelSrOnly?: boolean;
    /**
     * The `title` of the input - describing it a bit further for accessibility reasons.
     */
    title?: string;
    /**
     * Determine whether the ToggleButtonGroup is checked or not. The default will be `false`.
     */
    checked?: boolean;
    variant?: ToggleButtonGroupVariant;
    leftComponent?: React.ReactNode;
    disabled?: boolean;
    /**
     * If set to `true`, an overlaying skeleton with animation will be shown.
     */
    skeleton?: SkeletonShow;
    id?: string;
    /**
     * Text describing the content of the ToggleButtonGroup more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButtonGroup component.
     */
    suffix?: ToggleButtonGroupSuffix;
    /**
     * Defines the `value` as a string. Use it to get the value during the `onChange` event listener callback in the **ToggleButtonGroup**.
     */
    value?: ToggleButtonGroupValue;
    /**
     * The size of the button. For now there is `small`, `medium`, `default` and `large`.
     */
    size?: ButtonSize;
    /**
     * Defines the layout direction of the ToggleButtonGroup. Set to `column` or `row`. Defaults to `row` if not set.
     */
    layoutDirection?: ToggleButtonGroupLayoutDirection;
    /**
     * Defines the `values` as a string. Use it to get the values during the `onChange` event listener callback in the **ToggleButtonGroup**.
     */
    values?: ToggleButtonGroupValues;
    readOnly?: boolean;
    className?: string;
    children?: ToggleButtonGroupChildren;
    onChange?: (event: ToggleButtonGroupChangeEvent) => void;
    top?: SpaceType;
    right?: SpaceType;
    bottom?: SpaceType;
    left?: SpaceType;
    multiselect?: boolean;
    name?: string;
    vertical?: boolean;
};