import type { AriaToggleButtonGroupItemProps } from '@react-types/button';
import type { Key } from '@react-types/shared';
import React, { type ReactNode } from 'react';
import { type AriaToggleButtonGroupProps } from 'react-aria';
import type { TestIdProp } from '../../types';
import { type UseBoxProps } from '../Box/useBox/useBox';
export interface ToggleButtonsProps extends AriaToggleButtonGroupProps, UseBoxProps, TestIdProp {
    /**
     * The toggle buttons to display in the group
     * ```tsx
     * <ToggleButton id="option1">Option 1</ToggleButton>
     * <ToggleButton id="option2">Option 2</ToggleButton>
     * ```
     */
    children: ReactNode;
    /** Whether the buttons contain only icons (affects layout styling) */
    iconOnly?: boolean;
    /** Whether single or multiple selection is enabled. @default 'single' */
    selectionMode?: 'single' | 'multiple';
    /** Whether the collection allows empty selection. @default true */
    disallowEmptySelection?: boolean;
    /** The currently selected keys in the collection (controlled). */
    selectedKeys?: Iterable<Key>;
    /** The initial selected keys in the collection (uncontrolled). */
    defaultSelectedKeys?: Iterable<Key>;
    /** Handler that is called when the selection changes. */
    onSelectionChange?: (keys: Set<Key>) => void;
    /** Whether all toggle buttons are disabled. */
    isDisabled?: boolean;
    /** (_Not in use_) The orientation of the toggle button group. @default 'horizontal' */
    orientation?: 'horizontal' | 'vertical';
}
/**
 * ## ToggleButtons
 *
 * A toggle button group component that allows users to select one option from a set (multiple selection
 * configurable). The ToggleButtons component also exports `ToggleButton` which are the child contents.
 * Each `ToggleButton` item must be populated with an `id="[value]"` prop which is used to identify it
 * both for default selection and in the on-change event.
 *
 * ### Configuration Overview
 * - **Selection mode**: `selectionMode` - "single" or "multiple" behavior
 * - **Default selection**: `defaultSelectedKeys` - initial selected keys as `string[]` (uncontrolled)
 * - **Controlled mode**: `selectedKeys` + `onSelectionChange` - external state control
 * - **Icon-only**: `iconOnly` - changes layout for single icon content (ARIA label or hidden text label required)
 * - `disallowEmptySelection`: Prevents deselecting all options (**default**: `true`)
 * - `isDisabled`: Disables the entire group
 *
 * ### Responsive Behaviour
 * - For toggle buttons that are not `iconOnly` the layout will be vertical below tablet viewport width
 *
 * ### Accessibility
 * - **Group Label**: When the button group has a label, associate it with `aria-labelledby` to and `id` on the heading text.
 *   To add a label without a heading use `aria-label`
 * - **Button Label**: For icons and other visual-only buttons add `aria-label` or label text within VisuallyHidden
 *
 * ### Selection Handling
 * The `onSelectionChange` callback receives a `Set<Key>` containing the IDs of current selected buttons.
 * Since a Set is not seralizable, the common approach is to convert it to an array for operations:
 * ```tsx
 * onSelectionChange={(keys) => {
 *   console.log([...keys]); // Convert Set to array: ["option1", "option3"]
 *   setSelected(new Set(keys)); // Store as Set for controlled state
 * }}
 * ```
 * @example
 * ```tsx
 * // Uncontrolled (recommended)
 * <ToggleButtons
 *   defaultSelectedKeys={['confirm']}
 *   onSelectionChange={(keys) => handleChange(keys)}
 * >
 *   <ToggleButton id="confirm">Confirm</ToggleButton>
 *   <ToggleButton id="decline">Decline</ToggleButton>
 *   <ToggleButton id="change-date">Change date</ToggleButton>
 * </ToggleButtons>
 * ```
 *
 * @example
 * ```tsx
 * // Controlled mode
 * const [selected, setSelected] = useState(new Set(['list']));
 *
 * <ToggleButtons
 *   selectedKeys={selected}
 *   onSelectionChange={setSelected}
 * >
 *   <ToggleButton id="list">List</ToggleButton>
 *   <ToggleButton id="grid">Grid</ToggleButton>
 * </ToggleButtons>
 * ```
 *
 * @example
 * ```tsx
 * // Icon-only buttons
 * <ToggleButtons
 *   defaultSelectedKeys={['list']}
 *   iconOnly
 *   onSelectionChange={handleViewChange}
 * >
 *   <ToggleButton id="list" aria-label="List view">
 *     <Icon icon={ListIcon} />
 *   </ToggleButton>
 *   <ToggleButton id="map" aria-label="Map view">
 *     <Icon icon={MapIcon} />
 *   </ToggleButton>
 * </ToggleButtons>
 * ```
 */
export declare const ToggleButtons: React.ForwardRefExoticComponent<ToggleButtonsProps & React.RefAttributes<HTMLDivElement>>;
export declare const ToggleButton: React.ForwardRefExoticComponent<AriaToggleButtonGroupItemProps<"button"> & React.RefAttributes<HTMLButtonElement>>;
//# sourceMappingURL=ToggleButtons.d.ts.map