/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { SVGIcon } from '@progress/kendo-react-common';
import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from './../models/index';
import * as React from 'react';
/**
 * Represents the properties of [Chip](https://www.telerik.com/kendo-react-ui/components/buttons/api/chip) component.
 */
export interface ChipProps {
    /**
     * Sets the `id` property of the top div element of the Chip.
     *
     * @example
     * ```jsx
     * <Chip id="chip1" />
     * ```
     */
    id?: string;
    /**
     * Sets additional classes to the Chip.
     *
     * @example
     * ```jsx
     * <Chip className="custom-chip" />
     * ```
     */
    className?: string;
    /**
     * The React elements that will be rendered as custom content inside the Chip.
     *
     * @example
     * ```jsx
     * <Chip>Custom Content</Chip>
     * ```
     */
    children?: React.ReactNode;
    /**
     * Sets the `tabIndex` attribute.
     *
     * @example
     * ```jsx
     * <Chip tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Sets additional CSS styles to the Chip.
     *
     * @example
     * ```jsx
     * <Chip style={{ margin: '10px' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets the label text of the Chip.
     *
     * @example
     * ```jsx
     * <Chip text="Label" />
     * ```
     */
    text?: string;
    /**
     * Sets the `id` value of the Chip.
     *
     * @example
     * ```jsx
     * <Chip value="chip1" />
     * ```
     */
    value?: any;
    /**
     * The Chip direction 'ltr' as default or 'rtl'.
     *
     * @example
     * ```jsx
     * <Chip dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Determines if the Chip could be removed.
     *
     * @example
     * ```jsx
     * <Chip removable />
     * ```
     */
    removable?: boolean;
    /**
     * Determines if the Chip has custom font `removeIcon`.
     *
     * @example
     * ```jsx
     * <Chip removeIcon="k-i-close" />
     * ```
     */
    removeIcon?: string;
    /**
     * Determines if the Chip has custom SVG `removeIcon`.
     *
     * @example
     * ```jsx
     * import { gearIcon } from '@progress/kendo-svg-icons';
     *
     * <Chip removeSvgIcon={gearIcon} />
     * ```
     */
    removeSvgIcon?: SVGIcon;
    /**
     * Determines if the Chip is disabled.
     *
     * @example
     * ```jsx
     * <Chip disabled />
     * ```
     */
    disabled?: boolean;
    /**
     * Determines if the Chip has a font `icon`.
     *
     * @example
     * ```jsx
     * <Chip icon="k-i-user" />
     * ```
     */
    icon?: string;
    /**
     * Determines if the Chip has an SVG `icon`.
     *
     * @example
     * ```jsx
     * import { gearIcon } from '@progress/kendo-svg-icons';
     *
     * <Chip svgIcon={gearIcon} />
     * ```
     */
    svgIcon?: SVGIcon;
    /**
     * Determines if the Chip has an avatar.
     *
     * @example
     * ```jsx
     * <Chip avatar={{ image: 'avatar.png', imageAlt: 'Avatar' }} />
     * ```
     */
    avatar?: ChipAvatarProps;
    /**
     * Determines if the Chip has custom selection font `icon`.
     *
     * @example
     * ```jsx
     * <Chip selectedIcon="k-i-check" />
     * ```
     */
    selectedIcon?: string;
    /**
     * Determines if the Chip has custom selection SVG `icon`.
     *
     * @example
     * ```jsx
     * import { gearIcon } from '@progress/kendo-svg-icons';
     *
     * <Chip selectedSvgIcon={gearIcon} />
     * ```
     */
    selectedSvgIcon?: SVGIcon;
    /**
     * Fires on Chip removing.
     *
     * @example
     * ```jsx
     * <Chip onRemove={(event) => console.log(event)} />
     * ```
     */
    onRemove?: (event: ChipRemoveEvent) => void;
    /**
     * Fires on `onClick` event.
     *
     * @example
     * ```jsx
     * <Chip onClick={(event) => console.log(event)} />
     * ```
     */
    onClick?: (event: ChipMouseEvent) => void;
    /**
     * Fires on `onMouseDown` event.
     *
     * @example
     * ```jsx
     * <Chip onMouseDown={(event) => console.log(event)} />
     * ```
     */
    onMouseDown?: (event: ChipMouseEvent) => void;
    /**
     * Fires on `onMouseUp` event.
     *
     * @example
     * ```jsx
     * <Chip onMouseUp={(event) => console.log(event)} />
     * ```
     */
    onMouseUp?: (event: ChipMouseEvent) => void;
    /**
     * Fires on `onDoubleClick` event.
     *
     * @example
     * ```jsx
     * <Chip onDoubleClick={(event) => console.log(event)} />
     * ```
     */
    onDoubleClick?: (event: ChipMouseEvent) => void;
    /**
     * Fires on `onMouseEnter` event.
     *
     * @example
     * ```jsx
     * <Chip onMouseEnter={(event) => console.log(event)} />
     * ```
     */
    onMouseEnter?: (event: ChipMouseEvent) => void;
    /**
     * Fires on `onMouseLeave` event.
     *
     * @example
     * ```jsx
     * <Chip onMouseLeave={(event) => console.log(event)} />
     * ```
     */
    onMouseLeave?: (event: ChipMouseEvent) => void;
    /**
     * Fires on `onMouseMove` event.
     *
     * @example
     * ```jsx
     * <Chip onMouseMove={(event) => console.log(event)} />
     * ```
     */
    onMouseMove?: (event: ChipMouseEvent) => void;
    /**
     * Fires on `onMouseOut` event.
     *
     * @example
     * ```jsx
     * <Chip onMouseOut={(event) => console.log(event)} />
     * ```
     */
    onMouseOut?: (event: ChipMouseEvent) => void;
    /**
     * Fires on `onMouseOver` event.
     *
     * @example
     * ```jsx
     * <Chip onMouseOver={(event) => console.log(event)} />
     * ```
     */
    onMouseOver?: (event: ChipMouseEvent) => void;
    /**
     * Fires on `onKeyDown` event.
     *
     * @example
     * ```jsx
     * <Chip onKeyDown={(event) => console.log(event)} />
     * ```
     */
    onKeyDown?: (event: ChipKeyboardEvent) => void;
    /**
     * Fires on `onFocus` event.
     *
     * @example
     * ```jsx
     * <Chip onFocus={(event) => console.log(event)} />
     * ```
     */
    onFocus?: (event: ChipFocusEvent) => void;
    /**
     * Fires on `onBlur` event.
     *
     * @example
     * ```jsx
     * <Chip onBlur={(event) => console.log(event)} />
     * ```
     */
    onBlur?: (event: ChipFocusEvent) => void;
    /**
     * Represents the item data, coming from the `ChipList` component.
     *
     * @example
     * ```jsx
     * <Chip dataItem={{ text: 'Chip1' }} />
     * ```
     */
    dataItem?: any;
    /**
     * Determines if the Chip is selected.
     *
     * @example
     * ```jsx
     * <Chip selected />
     * ```
     */
    selected?: boolean;
    /**
     * Identifies the element(s) which describe the component, similar to an [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
     * For example, these elements could contain an error or a hint message.
     *
     * @example
     * ```jsx
     * <Chip ariaDescribedBy="description" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaDescribedBy?: string;
    /**
     * @hidden
     *
     * @remarks
     * This property is related to accessibility.
     */
    role?: string;
    /**
     * Configures the `size` of the Chip.
     * The available options are:
     * - `small`
     * - `medium`
     * - `large`
     *
     * @default undefined (theme-controlled)
     * @example
     * ```jsx
     * <Chip size="large" />
     * ```
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Configures the `roundness` of the Chip.
     * The available options are:
     * - `small`
     * - `medium`
     * - `large`
     * - `full`
     * - `none`
     *
     * @default undefined (theme-controlled)
     * @example
     * ```jsx
     * <Chip rounded="full" />
     * ```
     */
    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
    /**
     * Configures the `fillMode` of the Chip.
     * The available options are:
     * - `solid`
     * - `outline`
     *
     * @default undefined (theme-controlled)
     * @example
     * ```jsx
     * <Chip fillMode="outline" />
     * ```
     */
    fillMode?: 'solid' | 'outline';
    /**
     * Configures the `themeColor` of the Chip.
     * The available options are:
     * - `base`
     * - `info`
     * - `success`
     * - `warning`
     * - `error`
     *
     * @default undefined (theme-controlled)
     * @example
     * ```jsx
     * <Chip themeColor="success" />
     * ```
     */
    themeColor?: 'base' | 'info' | 'success' | 'warning' | 'error';
    /**
     * Represents the label of the Chip component.
     *
     * @example
     * ```jsx
     * <Chip ariaLabel="Chip Label" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaLabel?: string;
    /**
     * Sets the `aria-selected` attribute on the Chip.
     * When provided, overrides the internally computed selected state for the ARIA attribute.
     * Only applies when `role` is `"option"`.
     */
    ariaSelected?: boolean;
}
/**
 * Represents the target(element and props) of the ChipRemoveEvent.
 */
export interface ChipHandle {
    /**
     * The current element or `null` if there is no one.
     */
    element: HTMLDivElement | null;
    /**
     * The props values of the Chip.
     */
    props: ChipProps;
}
export interface ChipAvatarProps {
    /**
     * Sets the image of the avatar.
     */
    image: string;
    /**
     * Defines the alternative text of the avatar image.
     */
    imageAlt: string;
    /**
     * Configures the `roundness` of the avatar
     */
    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
    /**
     * Sets additional CSS styles to the avatar
     */
    style?: React.CSSProperties;
}
/**
 * Represents the Chip component.
 */
export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<ChipHandle | null>>;