/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BottomNavigationItemProps } from './BottomNavigationItemProps';
import { BottomNavigationEvent, BottomNavigationSelectEvent } from './models/events';
/**
 * Represents the props of the [KendoReact BottomNavigation component](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation).
 */
export interface BottomNavigationProps {
    /**
     * Sets additional CSS classes to the BottomNavigation.
     *
     * @example
     * ```jsx
     * <BottomNavigation className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets additional CSS styles to the BottomNavigation.
     *
     * @example
     * ```jsx
     * <BottomNavigation style={{ backgroundColor: 'blue' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets the `id` property of the root BottomNavigation element.
     *
     * @example
     * ```jsx
     * <BottomNavigation id="bottomNav1" />
     * ```
     */
    id?: string;
    /**
     * Represents the `dir` HTML attribute. Use this to switch from LTR to RTL.
     *
     * @example
     * ```jsx
     * <BottomNavigation dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Specifies the BottomNavigation theme color
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-theme-color)).
     *
     * 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.
     * * `inverse` &mdash; Applies coloring based on the inverted theme color.
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <BottomNavigation themeColor="primary" />
     * ```
     */
    themeColor?: BottomNavigationThemeColor;
    /**
     * The BottomNavigation fill style
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-fill)).
     *
     * The possible values are:
     * * `flat` &mdash; Sets the theme color as the text color. The background will be white.
     * * `solid` &mdash; Sets the theme color as a background color.
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <BottomNavigation fillMode="solid" />
     * ```
     */
    fillMode?: BottomNavigationFill;
    /**
     * Specifies the BottomNavigation position and behavior when the page is scrolled
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/positioning#toc-position-mode)).
     *
     * The possible values are:
     * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
     * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
     * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
     * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
     *
     * @default fixed
     *
     * @example
     * ```jsx
     * <BottomNavigation positionMode="sticky" />
     * ```
     */
    positionMode?: BottomNavigationPositionMode;
    /**
     * Specifies how the icon and text label are positioned in each BottomNavigation item
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/content-types#toc-item-flow)).
     *
     * The possible values are:
     * * `vertical`(Default) &mdash; Renders the text below the icon.
     * * `horizontal` &mdash; Renders the text and the icon on the same line.
     *
     * @default vertical
     *
     * @example
     * ```jsx
     * <BottomNavigation itemFlow="horizontal" />
     * ```
     */
    itemFlow?: BottomNavigationItemFlow;
    /**
     * Sets a border to the BottomNavigation.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <BottomNavigation border={true} />
     * ```
     */
    border?: boolean;
    /**
     * Disables the whole BottomNavigation.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <BottomNavigation disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * The collection of items that will be rendered in the BottomNavigation ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation)).
     *
     * @example
     * ```jsx
     * const items = [{ text: 'Home', icon: 'home' }, { text: 'Profile', icon: 'user' }];
     * <BottomNavigation items={items} />
     * ```
     */
    items?: Array<BottomNavigationItemProps>;
    /**
     * Overrides the default component's content responsible for visualizing a single item
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/custom-rendering#toc-custom-rendering)).
     *
     * @example
     * ```jsx
     * const CustomItem = (props) => <div>{props.text}</div>;
     * <BottomNavigation item={CustomItem} />
     * ```
     */
    item?: React.ComponentType<BottomNavigationItemProps>;
    /**
     * Fires when a BottomNavigation item is about to be rendered
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/custom-rendering#toc-item-render-property)).
     * Used to override the default appearance of the items.
     */
    itemRender?: (span: React.ReactElement<HTMLSpanElement>, itemProps: BottomNavigationItemProps) => React.ReactNode;
    /**
     * Fires when a BottomNavigation item is selected.
     *
     * @example
     * ```jsx
     * <BottomNavigation onSelect={(e) => console.log(e.item)} />
     * ```
     */
    onSelect?: (event: BottomNavigationSelectEvent) => void;
    /**
     * Triggered on `onKeyDown` event.
     *
     * @example
     * ```jsx
     * <BottomNavigation onKeyDown={(e) => console.log('Key pressed')} />
     * ```
     */
    onKeyDown?: (event: BottomNavigationEvent) => void;
}
/**
 * The BottomNavigation fill style
 * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-fill)).
 *
 * The possible values are:
 * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
 * * `solid` &mdash; Sets the theme color as a background color.
 *
 */
export type BottomNavigationFill = 'solid' | 'flat';
/**
 * Specifies how the icon and text label are positioned in each BottomNavigation item
 * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/content-types#toc-item-flow)).
 *
 * The possible values are:
 * * `vertical`(Default) &mdash; Renders the text below the icon.
 * * `horizontal` &mdash; Renders the text and the icon on the same line.
 */
export type BottomNavigationItemFlow = 'vertical' | 'horizontal';
/**
 * Specifies the BottomNavigation theme color.
 * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-theme-color)).
 *
 * The possible values are:
 * * `primary` (Default) &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.
 * * `base` &mdash; Applies coloring based on the base theme color.
 * * `inverse` &mdash; Applies coloring based on the inverted theme color.
 */
export type BottomNavigationThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'inverse';
/**
 * Specifies the BottomNavigation position and behavior when the page is scrolled
 * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/positioning#toc-position-mode)).
 *
 * The possible values are:
 * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
 * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
 * static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
 * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
 */
export type BottomNavigationPositionMode = 'sticky' | 'fixed';