@progress/kendo-react-buttons 10.2.0-develop.1 → 10.2.0-develop.10

package/index.d.mts

@@ -11,7 +11,7 @@ import { ButtonsClassStructure } from '@progress/kendo-react-common';
 import { default as default_2 } from 'prop-types';
 import { FormComponentProps } from '@progress/kendo-react-common';
 import { ForwardRefExoticComponent } from 'react';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { KendoMouse } from '@progress/kendo-react-common';
 import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
 import { PopupAnimation } from '@progress/kendo-react-popup';
@@ -23,7 +23,7 @@ import { SVGIcon } from '@progress/kendo-react-common';
 export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<ButtonHandle | null>>;
 
 export declare const ButtonGroup: {
-    (props: ButtonGroupProps): JSX_2.Element;
+    (props: ButtonGroupProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactElementLike | (default_2.ReactElementLike | null | undefined)[] | null | undefined>>;
         className: default_2.Requireable<string>;
@@ -72,10 +72,17 @@ declare interface ButtonGroupInterface {
 export declare interface ButtonGroupProps extends ButtonGroupInterface {
     /**
      * Sets the `className` of the ButtonGroup component.
+     * Specifies a list of CSS classes that will be added to the ButtonGroup element.
+     *
+     * @example
+     * ```jsx
+     * <ButtonGroup className="custom-group" />
+     * ```
      */
     className?: string;
     /**
      * @hidden
+     * Provides an option to use unstyled classes for the ButtonGroup component.
      */
     unstyled?: ButtonsClassStructure;
 }
@@ -433,79 +440,174 @@ export declare interface ChipListHandle {
 export declare interface ChipListProps extends FormComponentProps, KendoMouse<ChipListHandle, HTMLDivElement> {
     /**
      * Sets the `id` property of the top div element of the ChipList.
+     *
+     * @example
+     * ```jsx
+     * <ChipList id="chiplist1" />
+     * ```
      */
     id?: string;
     /**
      * Sets additional classes to the ChipList.
+     *
+     * @example
+     * ```jsx
+     * <ChipList className="custom-chiplist" />
+     * ```
      */
     className?: string;
     /**
      * Sets the `tabIndex` attribute.
+     *
+     * @example
+     * ```jsx
+     * <ChipList tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Sets additional CSS styles to the ChipList.
+     *
+     * @example
+     * ```jsx
+     * <ChipList style={{ margin: '10px' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
      * Represents Chip component.
+     *
+     * @example
+     * ```jsx
+     * <ChipList chip={CustomChip} />
+     * ```
      */
     chip?: React_2.ComponentType<ChipProps>;
     /**
      * Represents the data about the child Chips.
+     *
+     * @example
+     * ```jsx
+     * <ChipList data={[{ text: 'Chip1' }, { text: 'Chip2' }]} />
+     * ```
      */
     data?: any;
     /**
      * Represents the default data about the child Chips.
+     *
+     * @example
+     * ```jsx
+     * <ChipList defaultData={[{ text: 'DefaultChip1' }, { text: 'DefaultChip2' }]} />
+     * ```
      */
     defaultData?: any[];
     /**
      * Triggered after Chip data change.
+     *
+     * @example
+     * ```jsx
+     * <ChipList onDataChange={(event) => console.log(event.value)} />
+     * ```
      */
     onDataChange?: (event: ChipListDataChangeEvent) => void;
     /**
      * Represents the selection state of Chip component.
+     *
+     * @example
+     * ```jsx
+     * <ChipList value={[{ text: 'SelectedChip' }]} />
+     * ```
      */
     value?: any | any[];
     /**
      * Represents the default value of the selection state of Chip component.
+     *
+     * @example
+     * ```jsx
+     * <ChipList defaultValue={[{ text: 'DefaultSelectedChip' }]} />
+     * ```
      */
     defaultValue?: any | any[];
     /**
      * Triggered after value change.
+     *
+     * @example
+     * ```jsx
+     * <ChipList onChange={(event) => console.log(event.value)} />
+     * ```
      */
     onChange?: (event: ChipListChangeEvent) => void;
     /**
      * Represents the selection state of Chip component.
+     *
+     * @example
+     * ```jsx
+     * <ChipList selection="multiple" />
+     * ```
      */
     selection?: string;
     /**
      * Represents the `text` field of Chip, used for the `label`.
+     *
+     * @example
+     * ```jsx
+     * <ChipList textField="name" />
+     * ```
      */
     textField?: string;
     /**
      * Represents the `value` field of Chip, used for setting the Chip `id`.
+     *
+     * @example
+     * ```jsx
+     * <ChipList valueField="id" />
+     * ```
      */
     valueField?: string;
     /**
      * Determines of ChipList is disabled.
+     *
+     * @example
+     * ```jsx
+     * <ChipList disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * The ChipList direction 'ltr' as default or 'rtl'.
+     *
+     * @example
+     * ```jsx
+     * <ChipList dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Identifies the element(s) which will describe the component, similar to [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 error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <ChipList ariaDescribedBy="description" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <ChipList ariaLabelledBy="label" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
      * The accessible label of the component.
+     *
+     * @example
+     * ```jsx
+     * <ChipList ariaLabel="ChipList" />
+     * ```
      */
     ariaLabel?: string;
     /**
@@ -518,6 +620,11 @@ export declare interface ChipListProps extends FormComponentProps, KendoMouse<Ch
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <ChipList size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
 }
@@ -542,135 +649,306 @@ export declare interface ChipMouseEvent {
 export declare 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_2.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_2.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;
     /**
      * Triggered on Chip removing.
+     *
+     * @example
+     * ```jsx
+     * <Chip onRemove={(event) => console.log(event)} />
+     * ```
      */
     onRemove?: (event: ChipRemoveEvent) => void;
     /**
      * Triggered on `onClick` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onClick={(event) => console.log(event)} />
+     * ```
      */
     onClick?: (event: ChipMouseEvent) => void;
     /**
      * Triggered on `onMouseDown` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseDown={(event) => console.log(event)} />
+     * ```
      */
     onMouseDown?: (event: ChipMouseEvent) => void;
     /**
      * Triggered on `onMouseUp` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseUp={(event) => console.log(event)} />
+     * ```
      */
     onMouseUp?: (event: ChipMouseEvent) => void;
     /**
      * Triggered on `onDoubleClick` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onDoubleClick={(event) => console.log(event)} />
+     * ```
      */
     onDoubleClick?: (event: ChipMouseEvent) => void;
     /**
      * Triggered on `onMouseEnter` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseEnter={(event) => console.log(event)} />
+     * ```
      */
     onMouseEnter?: (event: ChipMouseEvent) => void;
     /**
      * Triggered on `onMouseLeave` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseLeave={(event) => console.log(event)} />
+     * ```
      */
     onMouseLeave?: (event: ChipMouseEvent) => void;
     /**
      * Triggered on `onMouseMove` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseMove={(event) => console.log(event)} />
+     * ```
      */
     onMouseMove?: (event: ChipMouseEvent) => void;
     /**
      * Triggered on `onMouseOut` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseOut={(event) => console.log(event)} />
+     * ```
      */
     onMouseOut?: (event: ChipMouseEvent) => void;
     /**
      * Triggered on `onMouseOver` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseOver={(event) => console.log(event)} />
+     * ```
      */
     onMouseOver?: (event: ChipMouseEvent) => void;
     /**
      * Triggered on `onKeyDown` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onKeyDown={(event) => console.log(event)} />
+     * ```
      */
     onKeyDown?: (event: ChipKeyboardEvent) => void;
     /**
      * Triggered on `onFocus` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onFocus={(event) => console.log(event)} />
+     * ```
      */
     onFocus?: (event: ChipFocusEvent) => void;
     /**
      * Triggered 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 will 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" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
@@ -679,56 +957,73 @@ export declare interface ChipProps {
     role?: string;
     /**
      * Configures the `size` of the Chip.
-     *
      * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
+     * - `small`
+     * - `medium`
+     * - `large`
+     * - `null` (removes built-in size styles)
      *
      * @default `medium`
+     * @example
+     * ```jsx
+     * <Chip size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
      * Configures the `roundness` of the Chip.
-     *
      * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - full
-     * - null&mdash;Does not set a rounded `className`.
+     * - `small`
+     * - `medium`
+     * - `large`
+     * - `full`
+     * - `null` (removes built-in roundness styles)
      *
      * @default `medium`
+     * @example
+     * ```jsx
+     * <Chip rounded="full" />
+     * ```
      */
     rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
      * Configures the `fillMode` of the Chip.
-     *
      * The available options are:
-     * - solid
-     * - outline
-     * - null&mdash;Does not set a fillMode `className`.
+     * - `solid`
+     * - `outline`
+     * - `null` (removes built-in fill mode styles)
      *
      * @default `solid`
+     * @example
+     * ```jsx
+     * <Chip fillMode="outline" />
+     * ```
      */
     fillMode?: null | 'solid' | 'outline';
     /**
      * Configures the `themeColor` of the Chip.
-     *
      * The available options are:
-     * - base
-     * - info
-     * - success
-     * - warning
-     * - error
-     * - null&mdash;Does not set a themeColor `className`.
+     * - `base`
+     * - `info`
+     * - `success`
+     * - `warning`
+     * - `error`
+     * - `null` (removes built-in theme color styles)
      *
      * @default `base`
+     * @example
+     * ```jsx
+     * <Chip themeColor="success" />
+     * ```
      */
     themeColor?: null | 'base' | 'info' | 'success' | 'warning' | 'error';
     /**
      * Represents the label of the Chip component.
+     *
+     * @example
+     * ```jsx
+     * <Chip ariaLabel="Chip Label" />
+     * ```
      */
     ariaLabel?: string;
 }
@@ -1098,7 +1393,7 @@ declare class DropDownButtonWithoutContext extends React_2.Component<DropDownBut
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     /**
      * @hidden
      */
@@ -1261,19 +1556,40 @@ export declare interface FloatingActionButtonItemHandle {
 export declare interface FloatingActionButtonItemProps {
     /**
      * Sets additional CSS styles to the FloatingActionButtonItem.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButtonItem style={{ margin: '10px' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
      * Specifies a list of CSS classes that will be added to the FloatingActionButtonItem.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButtonItem className="custom-item" />
+     * ```
      */
     className?: string;
     /**
      * Represents the children that are passed to the FloatingActionButtonItem.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButtonItem>Custom Content</FloatingActionButtonItem>
+     * ```
      */
     children?: any;
     /**
      * Specifies if the Floating Action Button Item is disabled [see example]({% slug disabled_floatingactionbuttonitem %}).
      * Defaults to `false`.
+     *
+     * @default false
+     * @example
+     * ```jsx
+     * <FloatingActionButtonItem disabled />
+     * ```
      */
     disabled?: boolean;
     /**
@@ -1371,43 +1687,90 @@ export declare type FloatingActionButtonPositionMode = 'absolute' | 'fixed';
 export declare interface FloatingActionButtonProps extends Omit_2<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. This is used to switch from LTR to RTL [see example]({% slug rtl_buttons %}).
+     * 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 Floating Action Button is disabled [see example]({% slug disabled_floatingactionbutton %}). Defaults to `false`.
+     * Disables the Floating Action Button.
+     *
+     * @default false
+     * @example
+     * ```jsx
+     * <FloatingActionButton disabled />
+     * ```
      */
     disabled?: boolean;
     /**
-     * Defines the icon rendered in the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
+     * Defines the icon rendered in the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton icon="k-icon k-i-plus" />
+     * ```
      */
     icon?: string;
     /**
-     * Defines the SVG icon rendered in the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
+     * Defines the SVG icon rendered in the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <FloatingActionButton svgIcon={gearIcon} />
+     * ```
      */
     svgIcon?: SVGIcon;
     /**
-     * Defines a CSS class or multiple classes separated by spaces which are applied
-     * to a `span` element inside the Floating Action Button. Allows the usage of custom icons.
+     * 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 [see example]({% slug contenttypes_floatingactionbutton %}).
+     * Specifies the text of the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton text="Click me" />
+     * ```
      */
     text?: string;
     /**
-     * Specifies the horizontal and vertical offset applied to the Floating Action Button
+     * Specifies the horizontal and vertical offset of the Floating Action Button.
      * [see example]({% slug positioning_floatingactionbutton %}).
      *
      * Normally, the floating button is positioned next to the boundaries of its container with a default offset of `16px`.
@@ -1421,10 +1784,14 @@ export declare interface FloatingActionButtonProps extends Omit_2<React.ButtonHT
      * * `x`&mdash;Sets the horizontal offset of the Floating Action Button.
      * * `y`&mdash;Sets the vertical offset of the Floating Action Button.
      *
+     * @example
+     * ```jsx
+     * <FloatingActionButton alignOffset={{ horizontal: 10, vertical: 20 }} />
+     * ```
      */
     alignOffset?: FloatingActionButtonAlignOffset;
     /**
-     * Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container
+     * Specifies the alignment of the Floating Action Button within its container.
      * [see example]({% slug positioning_floatingactionbutton %}).
      *
      * > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
@@ -1441,20 +1808,30 @@ export declare interface FloatingActionButtonProps extends Omit_2<React.ButtonHT
      *   * `middle`&mdash;Uses the middle point of the container.
      *   * `bottom`(Default)&mdash;Uses the bottom point of the container.
      *
+     * @example
+     * ```jsx
+     * <FloatingActionButton align="bottom end" />
+     * ```
      */
     align?: FloatingActionButtonAlign;
     /**
-     * Specifies the position mode of the Floating Action Button
+     * Specifies the position mode of the Floating Action Button.
      * [see example]({% slug positioning_floatingactionbutton %}). 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 Floating Action Button
+     * Specifies the size of the Floating Action Button.
      * [see example]({% slug appearance_floatingactionbutton %}).
      *
      * The possible values are:
@@ -1463,10 +1840,15 @@ export declare interface FloatingActionButtonProps extends Omit_2<React.ButtonHT
      * * `large`&mdash;Applies one and one half of the default padding, e.g. `24px`.
      * * `null`&mdash;Does not set a size `className`.
      *
+     * @default 'medium'
+     * @example
+     * ```jsx
+     * <FloatingActionButton size="large" />
+     * ```
      */
     size?: FloatingActionButtonSize;
     /**
-     * Specifies the rounding of the Floating Action Button.
+     * Configures the rounding of the Floating Action Button.
      *
      * The possible values are:
      * * `small`
@@ -1476,10 +1858,16 @@ export declare interface FloatingActionButtonProps extends Omit_2<React.ButtonHT
      * * `null`&mdash;Does not set a rounded `className`.
      *
      * @default `full`
+     *
+     * @default 'full'
+     * @example
+     * ```jsx
+     * <FloatingActionButton rounded="small" />
+     * ```
      */
     rounded?: FloatingActionButtonRounded;
     /**
-     * Specifies the theme color of the Floating Action Button
+     * Configures the theme color of the Floating Action Button.
      * [see example]({% slug appearance_floatingactionbutton %}).
      *
      * The possible values are:
@@ -1495,73 +1883,138 @@ export declare interface FloatingActionButtonProps extends Omit_2<React.ButtonHT
      * * `inverse`&mdash; Applies coloring based on the inverse theme color.
      * * `null`&mdash;Does not set a theme color `className`.
      *
+     * @default 'primary'
+     * @example
+     * ```jsx
+     * <FloatingActionButton themeColor="secondary" />
+     * ```
      */
     themeColor?: FloatingActionButtonThemeColor;
     /**
-     * The collection of items that will be rendered in the Floating Action Button
-     * [see example]({% slug databinding_floatingactionbutton %}).
+     * 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 visualizing a single item
-     * [see example]({% slug customization_floatingactionbutton %}#toc-items-rendering).
+     * Overrides the default component responsible for rendering items.
      *
-     * The default Component is: [FloatingActionButtonItem]({% slug api_buttons_floatingactionbuttonitem %}).
+     * @example
+     * ```jsx
+     * <FloatingActionButton item={CustomItemComponent} />
+     * ```
      */
     item?: React.ComponentType<FloatingActionButtonItemProps>;
     /**
-     * Represents the additional props that will be passed to the Popup inside the Floating Action Button
-     * [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
+     * Configures the popup settings for the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton popupSettings={{ animate: false }} />
+     * ```
      */
     popupSettings?: FloatingActionButtonPopupSettings;
     /**
-     * Specifies the `tabIndex` of the main button.
+     * Sets the `tabIndex` of the main button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
-     * Specifies the `accessKey` of the main button.
+     * Sets the `accessKey` of the main button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton accessKey="a" />
+     * ```
      */
     accessKey?: string;
     /**
-     * Specifies if the Floating Action Button will be modal by rendering an overlay under the component.
+     * Enables modal behavior by rendering an overlay under the Floating Action Button.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton modal />
+     * ```
      */
     modal?: boolean;
     /**
-     * Set styles to the Floating Action Button overlay element rendered when the `modal` prop is enabled.
+     * 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
-     * [see example]({% slug events_floatingactionbutton %}).
+     * 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
-     * [see example]({% slug events_floatingactionbutton %}).
+     * 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 the Floating Action Button Item is clicked
-     * [see example]({% slug events_floatingactionbutton %}).
+     * Fires when a Floating Action Button item is clicked.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onItemClick={(event) => console.log(event)} />
+     * ```
      */
     onItemClick?: (event: FloatingActionButtonItemEvent) => void;
     /**
-     * Triggers onKeyDown event
-     * [see example]({% slug events_floatingactionbutton %}).
+     * 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]({% slug events_floatingactionbutton %}).
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onOpen={(event) => console.log(event)} />
+     * ```
      */
     onOpen?: (event: FloatingActionButtonEvent) => void;
     /**
-     * Fires when the popup which contains the items is closed
-     * [see example]({% slug events_floatingactionbutton %}).
+     * Fires when the popup containing the items is closed.
+     *
+     * @example
+     * ```jsx
+     * <FloatingActionButton onClose={(event) => console.log(event)} />
+     * ```
      */
     onClose?: (event: FloatingActionButtonEvent) => void;
 }
@@ -1580,7 +2033,7 @@ export declare interface FloatingActionButtonProps extends Omit_2<React.ButtonHT
 export declare type FloatingActionButtonRounded = null | 'small' | 'medium' | 'large' | 'full';
 
 /**
- * Specifies the size of the Floating Action Button.
+ * Specifies the size of the FloatingActionButton.
  *
  * The possible values are:
  * * `small`&mdash;Applies half of the default padding, e.g. `8px`.
@@ -1702,7 +2155,7 @@ export declare class SplitButtonClassComponent extends React_2.Component<SplitBu
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     /**
      * @hidden
      */
@@ -2047,10 +2500,20 @@ export declare interface ToolbarItemHandle {
 export declare interface ToolbarItemProps extends KendoReactComponentBaseProps {
     /**
      * Sets additional classes to the ToolbarItem component.
+     *
+     * @example
+     * ```jsx
+     * <ToolbarItem className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets additional styles to the ToolbarItem component.
+     *
+     * @example
+     * ```jsx
+     * <ToolbarItem style={{ margin: '10px' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
 }
@@ -2105,30 +2568,65 @@ export declare interface ToolbarOverflowProps {
 export declare 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_2.CSSProperties;
     /**
      * Represents the `aria-label` HTML attribute of the Toolbar component.
+     *
+     * @example
+     * ```jsx
+     * <Toolbar ariaLabel="Main toolbar" />
+     * ```
      */
     ariaLabel?: string;
     /**
      * Specifies the `tabIndex` of the Toolbar.
+     *
+     * @example
+     * ```jsx
+     * <Toolbar tabIndex={0} />
+     * ```
      */
     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} />
+     * ```
      */
     keyboardNavigation?: boolean;
     /**
@@ -2146,7 +2644,6 @@ export declare interface ToolbarProps extends KendoReactComponentBaseProps, Tool
     buttons?: string[];
     /**
      * Configures the `size` of the Toolbar.
-     *
      * The available options are:
      * - `small`&mdash;Sets the padding of the component to 4px 4px.
      * - `medium`&mdash;Sets the padding of the component to 8px 8px.
@@ -2154,11 +2651,14 @@ export declare interface ToolbarProps extends KendoReactComponentBaseProps, Tool
      * - `null`&mdash;This option removes the the built-in size styles of the Toolbar. Allows for custom `padding`.
      *
      * @default `medium`
+     * @example
+     * ```jsx
+     * <Toolbar size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
      * Configures the `fillMode` of the Toolbar.
-     *
      * The available options are:
      * - `solid`&mdash;Applies a `background` color and `solid borders`.
      * - `flat`&mdash;Sets a `transparent background` and `solid bottom border`.
@@ -2166,6 +2666,10 @@ export declare interface ToolbarProps extends KendoReactComponentBaseProps, Tool
      * - `null`&mdash;This option removes the built-in fill mode styles of the Toolbar. Allows for custom `background` and `border` styles.
      *
      * @default `solid`
+     * @example
+     * ```jsx
+     * <Toolbar fillMode="flat" />
+     * ```
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
@@ -2196,7 +2700,7 @@ export declare interface ToolbarResizeEvent {
     nativeEvent: any;
 }
 
-export declare const ToolbarSeparator: (props: ToolbarSeparatorProps) => JSX_2.Element;
+export declare const ToolbarSeparator: (props: ToolbarSeparatorProps) => JSX.Element;
 
 /**
  * Represents the KendoReact Toolbar Separator component.