/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import * as React_2 from 'react'; /** * Represents the [KendoReact Badge component]({% slug overview_badge %}). * * @example * ```jsx * const App = () => { * return ( * 99+ * ); * }; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const Badge: React_2.ForwardRefExoticComponent>; /** * Specifies the horizontal and vertical alignment of the Badge in a relation to the element. */ export declare interface BadgeAlign { /** * Defines the possible horizontal alignment of the Badge. * * The available values are: * - `start`—Uses the start point of the parent element. * - `end`(Default)—Uses the end point of the parent element. */ horizontal: 'start' | 'end'; /** * Defines the possible vertical alignment of the Badge. * * The available values are: * - `top`(Default)—Uses the top point of the parent element. * - `bottom`—Uses the bottom point of the parent element. */ vertical: 'top' | 'bottom'; } /** * Represents the [KendoReact BadgeContainer component]({% slug overview_badge %}). * * @example * ```jsx * const App = () => { * return ( * * * * * * * ); * }; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const BadgeContainer: React_2.ForwardRefExoticComponent>; /** * The BadgeContainer ref. */ export declare interface BadgeContainerHandle { /** * The BadgeContainer element. */ element: HTMLSpanElement | null; /** * Focus the BadgeContainer. */ focus: () => void; } /** * Represents the props of the [KendoReact BadgeContainer component]({% slug overview_badge %}). */ export declare interface BadgeContainerProps { /** * The React elements that will be rendered inside the BadgeContainer. */ children?: React.ReactNode; /** * Specifies a list of CSS classes that will be added to the BadgeContainer. */ className?: string; /** * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL. */ dir?: string; /** * Sets additional CSS styles to the BadgeContainer. */ style?: React.CSSProperties; } /** * Specifies the appearance fill style of the Badge. * * The possible values are: * * `solid` (Default) * * `outline` * */ export declare type BadgeFill = 'solid' | 'outline'; /** * The Badge ref. */ export declare interface BadgeHandle { /** * The Badge element. */ element: HTMLSpanElement | null; /** * Focus the Badge. */ focus: () => void; } /** * Specifies the position of the Badge relative to the edge of the container element. * * The possible values are: * * `edge` (Default)—The center of the Badge is positioned on the edge of the container element. * * `outside`—The Badge is entirely positioned outside the edge of the container element. * * `inside`—The Badge is entirely positioned inside the edge of the the container element. * */ export declare type BadgePosition = 'edge' | 'outside' | 'inside'; /** * Represents the props of the [KendoReact Badge component]({% slug overview_badge %}). */ export declare interface BadgeProps { /** * The React elements that will be rendered inside the Badge. */ children?: React.ReactNode; /** * Specifies a list of CSS classes that will be added to the Badge. */ className?: string; /** * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL. */ dir?: string; /** * Sets additional CSS styles to the Badge. */ style?: React.CSSProperties; /** * Specifies the size of the Badge. * * The possible values are: * * `small` * * `medium` (Default) * * `large` * * null—Does not set a size `className` * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * Specifies the roundness of the Badge. * * The possible values are: * - small * - medium (Default) * - large * - full * - null—Does not set a rounded `className` * * @default `medium` */ rounded?: null | 'small' | 'medium' | 'large' | 'full'; /** * Specifies the appearance fill style of the Badge. * * The possible values are: * * `solid` (Default) * * `outline` * * null—Does not set a fillMode `className` * * @default `solid` */ fillMode?: null | 'solid' | 'outline'; /** * Specifies the theme color of the Badge. * * The possible values are: * * `base` —Applies coloring based on the `base` theme color. * * `primary` (Default)—Applies coloring based on primary theme color. * * `secondary`—Applies coloring based on secondary theme color. * * `tertiary`— Applies coloring based on tertiary theme color. * * `inherit`— Applies inherited coloring value. * * `info`—Applies coloring based on info theme color. * * `success`— Applies coloring based on success theme color. * * `warning`— Applies coloring based on warning theme color. * * `error`— Applies coloring based on error theme color. * * `dark`— Applies coloring based on dark theme color. * * `light`— Applies coloring based on light theme color. * * `inverse`— Applies coloring based on inverse theme color. * * null—Does not set a themeColor `className`. * * @default `primary` */ themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'inherit'; /** * Specifies the alignment of the Badge. * * The possible keys are: * * `horizontal`— Defines the possible horizontal alignment of the Badge. * * `'start'`—Uses the start point of the parent element. * * `'end'`(Default)—Uses the end point of the parent element. * * `null` No horizontal alignment. * * `vertical`— Defines the possible vertical alignment of the Badge. * * `'top'`(Default)—Uses the top point of the parent element. * * `'bottom'`—Uses the bottom point of the parent element. * * `null` No horizontal alignment. */ align?: { /** * Defines the possible horizontal alignment of the Badge. * * The available values are: * - `'start'`—Uses the start point of the parent element. * - `'end'`(Default)—Uses the end point of the parent element. * - `null` — No horizontal alignment. */ horizontal: 'start' | 'end' | null; /** * Defines the possible vertical alignment of the Badge. * * The available values are: * - `'top'`(Default)—Uses the top point of the parent element. * - `'bottom'`—Uses the bottom point of the parent element. * - `null` — No horizontal alignment. */ vertical: 'top' | 'bottom' | null; }; /** * Specifies the position of the Badge relative to the edge of the container element. * * The possible values are: * * `'edge'` (Default)—The center of the Badge is positioned on the edge of the container element. * * `'outside'`—The Badge is entirely positioned outside the edge of the container element. * * `'inside'`—The Badge is entirely positioned inside the edge of the the container element. * * `null` — No position class is applied. * * @default `edge` */ position?: 'edge' | 'outside' | 'inside' | null; /** * Specifies wether or not to render additional "cutout" border around the Badge. * * The possible values are: * * `true` * * `false` (Default) * */ cutoutBorder?: boolean; } /** * Specifies the size of the Badge. * * The possible values are: * * `small` * * `medium` (Default) * * `large` * */ export declare type BadgeSize = 'small' | 'medium' | 'large'; /** * Specifies the theme color of the Badge. * * The possible values are: * * `base` —Applies coloring based on the `base` theme color. * * `primary` (Default)—Applies coloring based on `primary` theme color. * * `secondary`—Applies coloring based on `secondary` theme color. * * `tertiary`— Applies coloring based on `tertiary` theme color. * * `inherit`— Applies inherited coloring value. * * `info`—Applies coloring based on `info` theme color. * * `success`— Applies coloring based on `success` theme color. * * `warning`— Applies coloring based on `warning` theme color. * * `error`— Applies coloring based on `error` theme color. * * `dark`— Applies coloring based on `dark` theme color. * * `light`— Applies coloring based on `light` theme color. * * `inverse`— Applies coloring based on `inverse` theme color. * */ export declare type BadgeThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'inherit'; /** * Represents the [KendoReact Loader component]({% slug overview_loader %}). * * @example * ```jsx * const App = () => { * return ( * * ); * }; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const Loader: React_2.ForwardRefExoticComponent>; /** * The Loader ref. */ export declare interface LoaderHandle { /** * The Loader element. */ element: HTMLSpanElement | null; /** * Focus the Loader. */ focus: () => void; } /** * Represents the props of the [KendoReact Loader component]({% slug overview_loader %}). */ export declare interface LoaderProps { /** * Specifies a list of CSS classes that will be added to the Loader. */ className?: string; /** * Sets additional CSS styles to the Loader. */ style?: React.CSSProperties; /** * Specifies the size of the Loader. * * The possible values are: * * `small` * * `medium` (Default) * * `large` * */ size?: LoaderSize; /** * Specifies the theme color of the Loader. * * The possible values are: * * `primary` (Default)—Applies coloring based on primary theme color. * * `secondary`—Applies coloring based on secondary theme color. * * `tertiary`— Applies coloring based on tertiary theme color. * * `info`—Applies coloring based on info theme color. * * `success`— Applies coloring based on success theme color. * * `warning`— Applies coloring based on warning theme color. * * `error`— Applies coloring based on error theme color. * * `dark`— Applies coloring based on dark theme color. * * `light`— Applies coloring based on light theme color. * * `inverse`— Applies coloring based on inverse theme color. */ themeColor?: LoaderThemeColor; /** * Specifies the Loader animation type. * * The possible values are: * - `pulsing` (default) * - `infinite-spinner` * - `converging-spinner` */ type?: LoaderType; } /** * Specifies the size of the Loader * ([see example]({% slug appearance_loader %}#toc-size)). * * The possible values are: * * `small` * * `medium` (Default) * * `large` * */ export declare type LoaderSize = 'small' | 'medium' | 'large'; /** * Specifies the theme color of the Loader. * ([see example]({% slug appearance_loader %}#toc-theme-color)). * * The possible values are: * * `primary` (Default)—Applies coloring based on primary theme color. * * `secondary`—Applies coloring based on secondary theme color. * * `tertiary`— Applies coloring based on tertiary theme color. * * `info`—Applies coloring based on info theme color. * * `success`— Applies coloring based on success theme color. * * `warning`— Applies coloring based on warning theme color. * * `error`— Applies coloring based on error theme color. * * `dark`— Applies coloring based on dark theme color. * * `light`— Applies coloring based on light theme color. * * `inverse`— Applies coloring based on inverted theme color. * */ export declare type LoaderThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse'; /** * Specifies the Loader animation type. * * The possible values are: * - `pulsing` (default) * - `infinite-spinner` * - `converging-spinner` * */ export declare type LoaderType = 'pulsing' | 'infinite-spinner' | 'converging-spinner'; /** * Represents the [KendoReact Skeleton component]({% slug overview_skeleton %}). * * @example * ```jsx * const App = () => { * return ( * * ); * }; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const Skeleton: React_2.ForwardRefExoticComponent>; /** * Specifies the animation settings of the Skeleton. */ export declare interface SkeletonAnimation { /** * Specifies the type of the Skeleton animation. Defaults to `pulse`. */ type?: 'wave' | 'pulse'; } /** * The Skeleton ref. */ export declare interface SkeletonHandle { /** * The Skeleton element. */ element: HTMLSpanElement | null; /** * Focus the Skeleton. */ focus: () => void; } /** * Represents the props of the [KendoReact Skeleton component]({% slug overview_skeleton %}). */ export declare interface SkeletonProps { /** * Specifies a list of CSS classes that will be added to the Skeleton. * * @example * ```jsx * * ``` */ className?: string; /** * Sets additional CSS styles to the Skeleton. * * @example * ```jsx * * ``` */ style?: React.CSSProperties; /** * Specifies the animation settings of the Skeleton. * * The possible keys are: * * `type`—Defines the type of the Skeleton animation. * * `wave`—Shows wave animation effect. * * `pulse`(Default)—Shows pulse animation effect. * * To disable the animation, set the property to `false`. * * @example * ```jsx * * ``` */ animation?: boolean | SkeletonAnimation; /** * Specifies the shape of the Skeleton. * * The possible values are: * * `circle`—Renders a circular Skeleton. * * `text`(Default)—Renders a line Skeleton. * * `rectangle`—Renders a rectangular Skeleton. * * @example * ```jsx * * ``` */ shape?: SkeletonShape; } /** * Specifies the shape of the Skeleton. * * The possible values are: * * `circle`—Renders a circular Skeleton. * * `text`(Default)—Renders a line Skeleton. * * `rectangle`—Renders a rectangular Skeleton. * */ export declare type SkeletonShape = 'circle' | 'text' | 'rectangle'; export { }