/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
import { ToolbarOverflowProps } from './ToolbarOverflowProps';
import { ToolbarResizeEvent } from '../events/ToolbarResizeEvent';
import * as React from 'react';
/**
 * Represents the props of the [KendoReact Toolbar component](https://www.telerik.com/kendo-react-ui/components/buttons/toolbar).
 */
export interface ToolbarProps extends KendoReactComponentBaseProps, ToolbarOverflowProps {
    /**
     * Sets additional classes to the Toolbar.
     *
     * @example
     * ```jsx
     * <Toolbar className="custom-toolbar" />
     * ```
     */
    className?: string;
    /**
     * Represents the `dir` HTML attribute.
     *
     * @example
     * ```jsx
     * <Toolbar dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * The styles that are applied to the Toolbar.
     *
     * @example
     * ```jsx
     * <Toolbar style={{ backgroundColor: 'lightblue' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Represents the `aria-label` HTML attribute of the Toolbar component.
     *
     * @example
     * ```jsx
     * <Toolbar ariaLabel="Main toolbar" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaLabel?: string;
    /**
     * Specifies the `tabIndex` of the Toolbar.
     *
     * @example
     * ```jsx
     * <Toolbar tabIndex={0} />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    tabIndex?: number;
    /**
     * The `resize` event of the Toolbar.
     *
     * @example
     * ```jsx
     * <Toolbar onResize={(event) => console.log(event)} />
     * ```
     */
    onResize?: (event: ToolbarResizeEvent) => void;
    /**
     * If set to `false`, it will turn off the built-in keyboard navigation.
     *
     * @example
     * ```jsx
     * <Toolbar keyboardNavigation={false} />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    keyboardNavigation?: boolean;
    /**
     * @hidden
     *
     * The CSS selectors of the toolbar HTML elements used by built-in keyboard navigation.
     * Each selector needs to point to a focusable element.
     * Defaults to [
     *  'button',
     *  '.k-button-group > button',
     *  '.k-dropdown > .k-dropdown-wrap',
     *  '.k-colorpicker > .k-picker-wrap'
     * ].
     */
    buttons?: string[];
    /**
     * Configures the `size` of the Toolbar.
     * The available options are:
     * - `small` - Sets the padding of the component to 4px 4px.
     * - `medium` - Sets the padding of the component to 8px 8px.
     * - `large` - Sets the padding of the component to 10px 10px.
     *
     * @default undefined (theme-controlled)
     * @example
     * ```jsx
     * <Toolbar size="large" />
     * ```
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Configures the `fillMode` of the Toolbar.
     * The available options are:
     * - `solid` - Applies a `background` color and `solid borders`.
     * - `flat` - Sets a `transparent background` and `solid bottom border`.
     * - `outline` - Sets a `transparent background` and `solid borders`.
     *
     * @default undefined (theme-controlled)
     * @example
     * ```jsx
     * <Toolbar fillMode="flat" />
     * ```
     */
    fillMode?: 'solid' | 'flat' | 'outline';
    /**
     * @hidden
     *
     * @remarks
     * This property is related to accessibility.
     */
    role?: string;
    /**
     * @hidden
     *
     * @remarks
     * This property is related to accessibility.
     */
    _ariaControls?: string;
}