@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 {
    /**
     * Specifies the type of progress bar. Can be either `linear` or `circular`.
     *
     * Example:
     * ```jsx
     * <ProgressBar type="linear" />
     * ```
     *
     * @hidden
     */
    type?: 'linear' | 'circular';
    /**
     * Sets the current value of the progress bar. Must be between the `min` and `max` values. Defaults to `0`.
     * Set to `null` to enable the indeterminate state of the progress bar.
     * See examples ([here]({% slug overview_progressbar %})) and ([here]({% slug overview_chunkprogressbar %})).
     *
     * Example:
     * ```jsx
     * <ProgressBar value={50} />
     * ```
     */
    value?: number | null;
    /**
     * Specifies the minimum value of the progress bar. Defaults to `0`.
     *
     * Example:
     * ```jsx
     * <ProgressBar min={0} />
     * ```
     */
    min?: number;
    /**
     * Specifies the maximum value of the progress bar. Defaults to `100`.
     *
     * Example:
     * ```jsx
     * <ProgressBar max={100} />
     * ```
     */
    max?: number;
    /**
     * Sets the `dir` HTML attribute to switch between LTR and RTL directions.
     *
     * Example:
     * ```jsx
     * <ProgressBar dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Provides an accessible label for the component.
     *
     * Example:
     * ```jsx
     * <ProgressBar ariaLabel="Loading progress" />
     * ```
     */
    ariaLabel?: string;
    /**
     * Determines whether the progress bar is in a disabled state.
     * See examples ([here]({% slug progressbar_disabled %})) and ([here]({% slug chunkprogressbar_disabled %})).
     *
     * Example:
     * ```jsx
     * <ProgressBar disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Specifies the orientation of the progress bar. Can be `horizontal` or `vertical`. Defaults to `horizontal`.
     * See examples ([here]({% slug progressbar_orientation %})) and ([here]({% slug chunkprogressbar_orientation %})).
     *
     * Example:
     * ```jsx
     * <ProgressBar orientation="vertical" />
     * ```
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * If set to `true`, reverses the direction of the progress bar. Defaults to `false`.
     * See examples ([here]({% slug progressbar_direction %})) and ([here]({% slug chunkprogressbar_direction %})).
     *
     * Example:
     * ```jsx
     * <ProgressBar reverse={true} />
     * ```
     */
    reverse?: boolean;
    /**
     * Adds a list of CSS classes to the progress bar element.
     *
     * Example:
     * ```jsx
     * <ProgressBar className="custom-progress-bar" />
     * ```
     */
    className?: string;
    /**
     * Applies additional CSS styles to the progress bar.
     *
     * Example:
     * ```jsx
     * <ProgressBar style={{ backgroundColor: 'red' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Specifies the styles applied to the inner element representing the empty portion of the progress bar.
     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
     *
     * Example:
     * ```jsx
     * <ProgressBar emptyStyle={{ backgroundColor: 'lightgray' }} />
     * ```
     */
    emptyStyle?: React.CSSProperties;
    /**
     * Adds additional CSS classes to the inner element representing the empty portion of the progress bar.
     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
     *
     * Example:
     * ```jsx
     * <ProgressBar emptyClassName="custom-empty-class" />
     * ```
     */
    emptyClassName?: string;
    /**
     * Specifies the styles applied to the inner element representing the full portion of the progress bar.
     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
     *
     * Example:
     * ```jsx
     * <ProgressBar progressStyle={{ backgroundColor: 'green' }} />
     * ```
     */
    progressStyle?: React.CSSProperties;
    /**
     * Adds additional CSS classes to the inner element representing the full portion of the progress bar.
     * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
     *
     * Example:
     * ```jsx
     * <ProgressBar progressClassName="custom-progress-class" />
     * ```
     */
    progressClassName?: string;
    /**
     * Sets the `tabIndex` attribute of the progress bar for keyboard navigation.
     *
     * Example:
     * ```jsx
     * <ProgressBar tabIndex={0} />
     * ```
     */
    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 {
    /**
     * Defines the number of chunks into which the ChunkProgressBar is divided. Defaults to `5`.
     * Each chunk visually represents a portion of the progress bar.
     *
     * @example
     * ```jsx
     * <ChunkProgressBar chunkCount={10} />
     * ```
     */
    chunkCount?: number;
}

/**
 * An interface for the ProgressBar label.
 */
export declare interface LabelProps {
    /**
     * The current value of the ProgressBar. Can be a number or `null` for indeterminate state.
     */
    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 {
    /**
     * Configures the animation settings of the ProgressBar. Defaults to `false`.
     * If set to a boolean, it enables or disables the default animation.
     * If set to a `ProgressBarAnimation` object, it allows customization of the slide animation duration in milliseconds.
     *
     * @example
     * ```jsx
     * <ProgressBar animation={{ duration: 500 }} />
     * ```
     */
    animation?: boolean | ProgressBarAnimation;
    /**
     * Provides a custom label component for the ProgressBar ([see example]({% slug progressbar_label %})).
     *
     * @example
     * ```jsx
     * const CustomLabel = (props) => <span>{props.value}%</span>;
     * <ProgressBar label={CustomLabel} />
     * ```
     */
    label?: React.ComponentType<LabelProps>;
    /**
     * Determines whether the progress status label is visible. Defaults to `true`.
     *
     * @example
     * ```jsx
     * <ProgressBar labelVisible={false} />
     * ```
     */
    labelVisible?: boolean;
    /**
     * Specifies the position of the progress status label. Defaults to `end` ([see example]({% slug progressbar_label %})).
     *
     * @example
     * ```jsx
     * <ProgressBar labelPlacement="center" />
     * ```
     */
    labelPlacement?: 'start' | 'center' | 'end';
}

export { }