/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { FloatingActionButtonPopupSettings } from './FloatingActionButtonPopupSettings';
import { FloatingActionButtonItemProps } from '../FloatingActionButtonItem.js';
import { FloatingActionButtonAlign } from '../models/align';
import { FloatingActionButtonAlignOffset } from '../models/align-offset';
import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../models/events';
import { FloatingActionButtonPositionMode } from '../models/position-mode';
import { FloatingActionButtonSize } from '../models/size';
import { FloatingActionButtonThemeColor } from '../models/theme-color';
import { FloatingActionButtonRounded } from '../models/rounded';
import { SVGIcon } from '@progress/kendo-react-common';
/**
 * @hidden
 */
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
/**
 * Represents the props of the [KendoReact FloatingActionButton component](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton).
 */
export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onBlur' | 'onFocus' | 'onKeyDown' | 'onClick'> {
    /**
     * Sets additional CSS styles to the Floating Action Button.
     *
     * @example
     * ```jsx
     * <FloatingActionButton style={{ backgroundColor: 'blue' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Specifies a list of CSS classes that will be added to the Floating Action Button.
     *
     * @example
     * ```jsx
     * <FloatingActionButton className="custom-fab" />
     * ```
     */
    className?: string;
    /**
     * Represents the `dir` HTML attribute for text direction.
     *
     * @example
     * ```jsx
     * <FloatingActionButton dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Sets the `id` property of the root HTML element.
     *
     * @example
     * ```jsx
     * <FloatingActionButton id="fab1" />
     * ```
     */
    id?: string;
    /**
     * Specifies if the FloatingActionButton is disabled.
     *
     * @default false
     * @example
     * ```jsx
     * <FloatingActionButton disabled />
     * ```
     */
    disabled?: boolean;
    /**
     * Defines the icon that renders in the FloatingActionButton.
     *
     * @example
     * ```jsx
     * <FloatingActionButton icon="k-icon k-i-plus" />
     * ```
     */
    icon?: string;
    /**
     * Defines the SVG icon that renders in the FloatingActionButton.
     *
     * @example
     * ```jsx
     * import { gearIcon } from '@progress/kendo-svg-icons';
     *
     * <FloatingActionButton svgIcon={gearIcon} />
     * ```
     */
    svgIcon?: SVGIcon;
    /**
     * Defines a custom CSS class for the icon.
     *
     * @example
     * ```jsx
     * <FloatingActionButton iconClass="custom-icon-class" />
     * ```
     */
    iconClass?: string;
    /**
     * Specifies the text of the Floating Action Button.
     *
     * @example
     * ```jsx
     * <FloatingActionButton text="Click me" />
     * ```
     */
    text?: string;
    /**
     * Specifies the horizontal and vertical offset of the FloatingActionButton.
     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/positioning).
     *
     * Normally, the floating button positions next to the boundaries of its container with a default offset of `16px`.
     *
     * Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
     * not in a corner, can be moved along the container's boundary or towards the center of the container.
     *
     * A negative offset can force a button to overflow the boundaries of its container.
     *
     * The possible keys are:
     * * `x` — Sets the horizontal offset of the FloatingActionButton.
     * * `y` — Sets the vertical offset of the FloatingActionButton.
     *
     * @example
     * ```jsx
     * <FloatingActionButton alignOffset={{ horizontal: 10, vertical: 20 }} />
     * ```
     */
    alignOffset?: FloatingActionButtonAlignOffset;
    /**
     * Specifies the alignment of the FloatingActionButton within its container.
     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/positioning).
     *
     * > Centering the FloatingActionButton in both horizontal and vertical dimension is not a typical use case.
     * Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and vertical: "middle"
     * at the same time is not supported.
     *
     * The possible keys are:
     * * `horizontal` — Defines the possible horizontal alignment of the FloatingActionButton.
     *   * `start` — Uses the start point of the container.
     *   * `center` — Uses the center point of the container.
     *   * `end` (Default) — Uses the end point of the container
     * * `vertical` — Defines the possible vertical alignment of the FloatingActionButton.
     *   * `top` — Uses the top point of the container.
     *   * `middle` — Uses the middle point of the container.
     *   * `bottom` (Default) — Uses the bottom point of the container.
     *
     * @example
     * ```jsx
     * <FloatingActionButton align="bottom end" />
     * ```
     */
    align?: FloatingActionButtonAlign;
    /**
     * Specifies the position mode of the Floating Action Button.
     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/positioning). It is based on the
     * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
     *
     * * The possible values are:
     * * 'fixed' (Default)
     * * 'absolute'
     *
     * @default 'fixed'
     * @example
     * ```jsx
     * <FloatingActionButton positionMode="absolute" />
     * ```
     */
    positionMode?: FloatingActionButtonPositionMode;
    /**
     * Specifies the size of the FloatingActionButton.
     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/appearance).
     *
     * The possible values are:
     * * `small` — Applies half of the default padding, e.g. `8px`.
     * * `medium` — Applies the default padding, e.g. `16px`.
     * * `large` — Applies one and one half of the default padding, e.g. `24px`.
     *
     * @default undefined (theme-controlled)
     * @example
     * ```jsx
     * <FloatingActionButton size="large" />
     * ```
     */
    size?: FloatingActionButtonSize;
    /**
     * Configures the rounding of the Floating Action Button.
     *
     * The possible values are:
     * * `small`
     * * `medium`
     * * `large`
     * * `full`
     * * `none`
     *
     * @default undefined (theme-controlled)
     * @example
     * ```jsx
     * <FloatingActionButton rounded="small" />
     * ```
     */
    rounded?: FloatingActionButtonRounded;
    /**
     * Configures the theme color of the FloatingActionButton.
     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/appearance).
     *
     * The possible values are:
     * * `base`&mdash;Applies coloring based on the base theme color.
     * * `primary`&mdash;Applies coloring based on the primary theme color.
     * * `secondary`&mdash;Applies coloring based on the secondary theme color.
     * * `tertiary`&mdash; Applies coloring based on the tertiary theme color.
     *
     * @default undefined (theme-controlled)
     * @example
     * ```jsx
     * <FloatingActionButton themeColor="secondary" />
     * ```
     */
    themeColor?: FloatingActionButtonThemeColor;
    /**
     * Defines the collection of items rendered in the Floating Action Button.
     *
     * @example
     * ```jsx
     * <FloatingActionButton items={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
     * ```
     */
    items?: Array<FloatingActionButtonItemProps>;
    /**
     * Overrides the default component responsible for rendering items.
     *
     * @example
     * ```jsx
     * <FloatingActionButton item={CustomItemComponent} />
     * ```
     */
    item?: React.ComponentType<FloatingActionButtonItemProps>;
    /**
     * Configures the popup settings for the Floating Action Button.
     *
     * @example
     * ```jsx
     * <FloatingActionButton popupSettings={{ animate: false }} />
     * ```
     */
    popupSettings?: FloatingActionButtonPopupSettings;
    /**
     * Sets the `tabIndex` of the main button.
     *
     * @example
     * ```jsx
     * <FloatingActionButton tabIndex={0} />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    tabIndex?: number;
    /**
     * Sets the `accessKey` of the main button.
     *
     * @example
     * ```jsx
     * <FloatingActionButton accessKey="a" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    accessKey?: string;
    /**
     * Enables modal behavior by rendering an overlay under the Floating Action Button.
     *
     * @example
     * ```jsx
     * <FloatingActionButton modal />
     * ```
     */
    modal?: boolean;
    /**
     * Sets styles for the overlay element when the `modal` prop is enabled.
     *
     * @example
     * ```jsx
     * <FloatingActionButton overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />
     * ```
     */
    overlayStyle?: React.CSSProperties;
    /**
     * Fires when the Floating Action Button is focused.
     *
     * @example
     * ```jsx
     * <FloatingActionButton onFocus={(event) => console.log(event)} />
     * ```
     */
    onFocus?: (event: FloatingActionButtonEvent) => void;
    /**
     * Fires when the Floating Action Button is blurred.
     *
     * @example
     * ```jsx
     * <FloatingActionButton onBlur={(event) => console.log(event)} />
     * ```
     */
    onBlur?: (event: FloatingActionButtonEvent) => void;
    /**
     * Fires when the Floating Action Button is clicked.
     *
     * @example
     * ```jsx
     * <FloatingActionButton onClick={(event) => console.log(event)} />
     * ```
     */
    onClick?: (event: FloatingActionButtonEvent) => void;
    /**
     * Fires when a Floating Action Button item is clicked.
     *
     * @example
     * ```jsx
     * <FloatingActionButton onItemClick={(event) => console.log(event)} />
     * ```
     */
    onItemClick?: (event: FloatingActionButtonItemEvent) => void;
    /**
     * Fires when a key is pressed while the Floating Action Button is focused.
     *
     * @example
     * ```jsx
     * <FloatingActionButton onKeyDown={(event) => console.log(event)} />
     * ```
     */
    onKeyDown?: (event: FloatingActionButtonEvent) => void;
    /**
     * Fires when the popup which contains the items is opened
     * [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/events).
     *
     * @example
     * ```jsx
     * <FloatingActionButton onOpen={(event) => console.log(event)} />
     * ```
     */
    onOpen?: (event: FloatingActionButtonEvent) => void;
    /**
     * Fires when the popup containing the items is closed.
     *
     * @example
     * ```jsx
     * <FloatingActionButton onClose={(event) => console.log(event)} />
     * ```
     */
    onClose?: (event: FloatingActionButtonEvent) => void;
}
export {};