@progress/kendo-react-progressbars/index.d.mts

React ProgressBars offer a customizable interface for users to track and display the progress of a task. KendoReact ProgressBars package

/**
 * @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';

/**
 * @hidden
 */
declare interface BaseProps {
    /**
     * Sets one of the two visually distinct types of progress bar.
     *
     * @hidden
     */
    type?: 'linear' | 'circular';
    /**
     * Sets the value of the progress bar. Has to be between `min` and `max` values. Defaults to `0`.
     * Set `null` to enable the indeterminate state of the progress bar.
     * See examples ([here]({% slug overview_progressbar %})) and ([here]({% slug overview_chunkprogressbar %})).
     */
    value?: number | null;
    /**
     * The minimum value of the progress bar. Defaults to `0`.
     */
    min?: number;
    /**
     * The maximum value of the progress bar. Defaults to `100`.
     */
    max?: number;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     */
    dir?: string;
    /**
     * The accessible label of the component.
     */
    ariaLabel?: string;
    /**
     * Sets the disabled state of the progress bar.
     * See examples ([here]({% slug progressbar_disabled %})) and ([here]({% slug chunkprogressbar_disabled %})).
     */
    disabled?: boolean;
    /**
     * Defines the orientation of the progress bar.
     * See examples ([here]({% slug progressbar_orientation %})) and ([here]({% slug chunkprogressbar_orientation %})).
     * Defaults to `horizontal`.
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * If set to `true`, the progress bar will be reversed.
     * See examples ([here]({% slug progressbar_direction %})) and ([here]({% slug chunkprogressbar_direction %})).
     * Defaults to `false`.
     */
    reverse?: boolean;
    /**
     * Specifies a list of CSS classes that will be added to the progress bar element.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the progress bar.
     */
    style?: React.CSSProperties;
    /**
     * The styles that are applied to the inner element which represents the empty portion of the progress bar.
     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
     */
    emptyStyle?: React.CSSProperties;
    /**
     * Sets additional classes to the inner element which represents the empty portion of the progress bar.
     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
     */
    emptyClassName?: string;
    /**
     * The styles that are applied to the inner element which represents the full portion of the progress bar.
     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
     */
    progressStyle?: React.CSSProperties;
    /**
     * Sets additional classes to the inner element which represents the full portion of the progress bar.
     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
     */
    progressClassName?: string;
    /**
     * Sets the `tabIndex` property of the progress bar.
     */
    tabIndex?: number;
}

/**
 * Represents the [KendoReact ChunkProgressBar component]({% slug overview_chunkprogressbar %}).
 *
 * @example
 * ```jsx
 * const App = () => {
 *   return (
 *       <ChunkProgressBar value={40}/>
 *   );
 * };
 *    ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const ChunkProgressBar: React_2.ForwardRefExoticComponent<ChunkProgressBarProps & React_2.RefAttributes<ChunkProgressBarHandle | null>>;

/**
 * The ChunkProgressBar ref.
 */
declare interface ChunkProgressBarHandle {
    /**
     * The ChunkProgressBar element.
     */
    element: HTMLDivElement | null;
    /**
     * Focus the ChunkProgressBar.
     */
    focus: () => void;
}

/**
 * Represents the props of the [KendoReact ChunkProgressBar component]({% slug overview_chunkprogressbar %}).
 */
export declare interface ChunkProgressBarProps extends BaseProps {
    /**
     * Sets the number of chunks into which the ChunkProgressBar will be split. Defaults to `5`.
     */
    chunkCount?: number;
}

/**
 * An interface for the ProgressBar label.
 */
export declare interface LabelProps {
    /**
     * Represents the current value of the ProgressBar.
     */
    value?: number | null;
}

/**
 * Represents the [KendoReact ProgressBar component]({% slug overview_progressbar %}).
 *
 * @example
 * ```jsx
 * const App = () => {
 *   return (
 *       <ProgressBar value={75}/>
 *   );
 * };
 *    ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const ProgressBar: React_2.ForwardRefExoticComponent<ProgressBarProps & React_2.RefAttributes<ProgressBarHandle | null>>;

/**
 * Specifies the animation settings of the ProgressBar.
 */
export declare interface ProgressBarAnimation {
    /**
     * Specifies the duration of the ProgressBar animation. Defaults to `400`.
     */
    duration: number;
}

/**
 * The ProgressBar ref.
 */
export declare interface ProgressBarHandle {
    /**
     * The ProgressBar element.
     */
    element: HTMLDivElement | null;
    /**
     * The progress status element.
     */
    progressStatusElement: HTMLDivElement | null;
    /**
     * The progress status wrap element.
     */
    progressStatusWrapElement: HTMLSpanElement | null;
    /**
     * Focus the ProgressBar.
     */
    focus: () => void;
}

/**
 * Represents the props of the [KendoReact ProgressBar component]({% slug overview_progressbar %}).
 */
export declare interface ProgressBarProps extends BaseProps {
    /**
     * Specifies the animation settings of the ProgressBar. Defaults to `false`.
     * If boolean, enables or disables the default animation.
     * Use ProgressBarAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
     */
    animation?: boolean | ProgressBarAnimation;
    /**
     * Overrides the default label ([see example]({% slug progressbar_label %})).
     */
    label?: React.ComponentType<LabelProps>;
    /**
     * Sets the visibility of the progress status label. Defaults to `true`.
     */
    labelVisible?: boolean;
    /**
     * Sets the position of the progress status label. Defaults to `end` ([see example]({% slug progressbar_label %})).
     */
    labelPlacement?: 'start' | 'center' | 'end';
}

export { }