@progress/kendo-react-progressbars 10.2.0-develop.6 → 10.2.0-develop.7

package/dist/cdn/js/kendo-react-progressbars.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-animation")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-animation"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactProgressbars={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactAnimation)}(this,(function(e,r,a,s,t){"use strict";function n(e){var r=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var s=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,s.get?s:{enumerable:!0,get:function(){return e[a]}})}})),r.default=e,Object.freeze(r)}var l=n(r);const o=(e,r,a)=>{const s=Math.abs((r-e)/100);return Math.abs((a-e)/s)},i=(e,r,a,s)=>{const t=Math.max(a,.01),n=100/t*100;e.current&&r.current&&(e.current.style.width=s?"100%":`${t}%`,r.current.style.width=s?"100%":`${n}%`,e.current.style.height=s?`${t}%`:"100%",r.current.style.height=s?`${n}%`:"100%")},c={name:"@progress/kendo-react-progressbars",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.6",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},u=l.forwardRef(((e,r)=>{const a=!s.validatePackage(c,{component:"ChunkProgressBar"}),{chunkCount:t=m.chunkCount,className:n,disabled:o=m.disabled,orientation:i,min:u=m.min,max:d=m.max,reverse:b=m.reverse,style:p,tabIndex:g,emptyStyle:k,emptyClassName:v,progressStyle:f,progressClassName:y}=e,h=l.useRef(null),N=l.useCallback((()=>{h.current&&h.current.focus()}),[]);l.useImperativeHandle(r,(()=>({element:h.current,focus:N})));const C=e.value||m.value,E=null===e.value,x=s.useRtl(h,e.dir),R="vertical"===i,I={className:s.classNames("k-progressbar k-chunk-progressbar",{"k-progressbar-horizontal":!R,"k-progressbar-vertical":R,"k-progressbar-reverse":b,"k-progressbar-indeterminate":E,"k-disabled":o},n),ref:h,dir:x,tabIndex:s.getTabIndex(g,o),role:"progressbar","aria-label":e.ariaLabel,"aria-valuemin":u,"aria-valuemax":d,"aria-valuenow":E?void 0:C,"aria-disabled":o,style:p},S=({count:e})=>{const r=[],a=100/e+"%",t=((e,r,a)=>Math.max((a-e)/(r-e),1e-5))(u,d,C),n=Math.floor(t*e),o=Array(e).fill(!1);for(let e=0;e<n;e++)o[e]=!0;for(let t=0;t<e;++t){const n=o[t],i=n?y:v,c={width:R?void 0:a,height:R?a:void 0,...n?f:k};r.push(l.createElement("li",{key:t,className:s.classNames("k-progressbar-chunk",{"k-first":0===t,"k-last":t===e-1,"k-selected":n},i),style:c}))}return l.createElement(l.Fragment,null,r)};return l.createElement(l.Fragment,null,l.createElement("div",{...I},l.createElement("ul",{className:"k-progressbar-chunks k-reset"},l.createElement(S,{count:t}))),a&&l.createElement(s.WatermarkOverlay,null))}));u.propTypes={chunkCount:a.number,ariaLabel:a.string,disabled:a.bool,reverse:a.bool,max:a.number,min:a.number,value:a.number,tabIndex:a.number,emptyStyle:a.object,emptyClassName:a.string,progressStyle:a.object,progressClassName:a.string};const m={chunkCount:5,min:0,max:100,value:0,disabled:!1,reverse:!1};u.displayName="KendoChunkProgressBar";const d=l.forwardRef(((e,r)=>{const{animation:a=b.animation,disabled:n=b.disabled,reverse:c=b.reverse,orientation:u,labelVisible:m=b.labelVisible,labelPlacement:d,max:p=b.max,min:g=b.min,tabIndex:k,className:v,style:f,emptyStyle:y,emptyClassName:h,progressStyle:N,progressClassName:C}=e,E=l.useRef(null),x=l.useRef(null),R=l.useRef(null),I=l.useCallback((()=>{E.current&&E.current.focus()}),[]);l.useImperativeHandle(r,(()=>({element:E.current,progressStatusElement:x.current,progressStatusWrapElement:R.current,focus:I})));const S=e.value||b.value,w=(e=>{const r=l.useRef(void 0);return l.useEffect((()=>{r.current=e})),r.current})(S),P=null===e.value,O=s.useRtl(E,e.dir),j="vertical"===u,T=(e=>{const r=e.toString().split(".");return 1===r.length?`${r[0]}`:`${r[0]}.${r[1].substr(0,3)}`})(S),K={value:S},$=m?e.label?l.createElement("span",{className:"k-progress-status"},l.createElement(e.label,{...K})):l.createElement("span",{className:"k-progress-status"},T):void 0,A={className:s.classNames("k-progressbar",{"k-progressbar-horizontal":!j,"k-progressbar-vertical":j,"k-progressbar-reverse":c,"k-progressbar-indeterminate":P,"k-disabled":n},v),ref:E,dir:O,tabIndex:s.getTabIndex(k,n),role:"progressbar","aria-label":e.ariaLabel,"aria-valuemin":g,"aria-valuemax":p,"aria-valuenow":P?void 0:S,"aria-disabled":n,style:f},B=s.classNames("k-progress-status-wrap",{"k-progress-start":"start"===d,"k-progress-center":"center"===d,"k-progress-end":"end"===d||void 0===d}),D="boolean"!=typeof a&&void 0!==a?a.duration:a?400:0,M=l.useCallback((()=>{const e=o(g,p,w);i(x,R,e,j)}),[j,p,g,w]),V=l.useCallback((e=>{const r=o(g,p,w+(S-w)*e);i(x,R,r,j)}),[g,p,w,S,j]),q=l.useCallback((()=>{const e=o(g,p,S);i(x,R,e,j)}),[j,p,g,S]);return t.useAnimation({duration:D,onStart:M,onUpdate:V,onEnd:q},[S,D]),l.createElement("div",{...A},l.createElement("span",{className:B+(h?" "+h:""),style:y},$),l.createElement("div",{className:"k-progressbar-value k-selected",style:N,ref:x},l.createElement("span",{className:B+(C?" "+C:""),ref:R},$)))}));d.propTypes={animation:a.any,ariaLabel:a.string,disabled:a.bool,reverse:a.bool,label:a.any,labelVisible:a.bool,labelPlacement:a.oneOf(["start","center","end"]),max:a.number,min:a.number,value:a.number,tabIndex:a.number,emptyStyle:a.object,emptyClassName:a.string,progressStyle:a.object,progressClassName:a.string};const b={animation:!1,min:0,max:100,value:0,disabled:!1,reverse:!1,labelVisible:!0};d.displayName="KendoProgressBar",e.ChunkProgressBar=u,e.ProgressBar=d}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-animation")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-animation"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactProgressbars={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactAnimation)}(this,(function(e,r,a,s,t){"use strict";function n(e){var r=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var s=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,s.get?s:{enumerable:!0,get:function(){return e[a]}})}})),r.default=e,Object.freeze(r)}var l=n(r);const o=(e,r,a)=>{const s=Math.abs((r-e)/100);return Math.abs((a-e)/s)},i=(e,r,a,s)=>{const t=Math.max(a,.01),n=100/t*100;e.current&&r.current&&(e.current.style.width=s?"100%":`${t}%`,r.current.style.width=s?"100%":`${n}%`,e.current.style.height=s?`${t}%`:"100%",r.current.style.height=s?`${n}%`:"100%")},c={name:"@progress/kendo-react-progressbars",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.7",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},u=l.forwardRef(((e,r)=>{const a=!s.validatePackage(c,{component:"ChunkProgressBar"}),{chunkCount:t=m.chunkCount,className:n,disabled:o=m.disabled,orientation:i,min:u=m.min,max:d=m.max,reverse:b=m.reverse,style:p,tabIndex:g,emptyStyle:k,emptyClassName:v,progressStyle:f,progressClassName:y}=e,h=l.useRef(null),N=l.useCallback((()=>{h.current&&h.current.focus()}),[]);l.useImperativeHandle(r,(()=>({element:h.current,focus:N})));const C=e.value||m.value,E=null===e.value,x=s.useRtl(h,e.dir),R="vertical"===i,I={className:s.classNames("k-progressbar k-chunk-progressbar",{"k-progressbar-horizontal":!R,"k-progressbar-vertical":R,"k-progressbar-reverse":b,"k-progressbar-indeterminate":E,"k-disabled":o},n),ref:h,dir:x,tabIndex:s.getTabIndex(g,o),role:"progressbar","aria-label":e.ariaLabel,"aria-valuemin":u,"aria-valuemax":d,"aria-valuenow":E?void 0:C,"aria-disabled":o,style:p},S=({count:e})=>{const r=[],a=100/e+"%",t=((e,r,a)=>Math.max((a-e)/(r-e),1e-5))(u,d,C),n=Math.floor(t*e),o=Array(e).fill(!1);for(let e=0;e<n;e++)o[e]=!0;for(let t=0;t<e;++t){const n=o[t],i=n?y:v,c={width:R?void 0:a,height:R?a:void 0,...n?f:k};r.push(l.createElement("li",{key:t,className:s.classNames("k-progressbar-chunk",{"k-first":0===t,"k-last":t===e-1,"k-selected":n},i),style:c}))}return l.createElement(l.Fragment,null,r)};return l.createElement(l.Fragment,null,l.createElement("div",{...I},l.createElement("ul",{className:"k-progressbar-chunks k-reset"},l.createElement(S,{count:t}))),a&&l.createElement(s.WatermarkOverlay,null))}));u.propTypes={chunkCount:a.number,ariaLabel:a.string,disabled:a.bool,reverse:a.bool,max:a.number,min:a.number,value:a.number,tabIndex:a.number,emptyStyle:a.object,emptyClassName:a.string,progressStyle:a.object,progressClassName:a.string};const m={chunkCount:5,min:0,max:100,value:0,disabled:!1,reverse:!1};u.displayName="KendoChunkProgressBar";const d=l.forwardRef(((e,r)=>{const{animation:a=b.animation,disabled:n=b.disabled,reverse:c=b.reverse,orientation:u,labelVisible:m=b.labelVisible,labelPlacement:d,max:p=b.max,min:g=b.min,tabIndex:k,className:v,style:f,emptyStyle:y,emptyClassName:h,progressStyle:N,progressClassName:C}=e,E=l.useRef(null),x=l.useRef(null),R=l.useRef(null),I=l.useCallback((()=>{E.current&&E.current.focus()}),[]);l.useImperativeHandle(r,(()=>({element:E.current,progressStatusElement:x.current,progressStatusWrapElement:R.current,focus:I})));const S=e.value||b.value,w=(e=>{const r=l.useRef(void 0);return l.useEffect((()=>{r.current=e})),r.current})(S),P=null===e.value,O=s.useRtl(E,e.dir),j="vertical"===u,T=(e=>{const r=e.toString().split(".");return 1===r.length?`${r[0]}`:`${r[0]}.${r[1].substr(0,3)}`})(S),K={value:S},$=m?e.label?l.createElement("span",{className:"k-progress-status"},l.createElement(e.label,{...K})):l.createElement("span",{className:"k-progress-status"},T):void 0,A={className:s.classNames("k-progressbar",{"k-progressbar-horizontal":!j,"k-progressbar-vertical":j,"k-progressbar-reverse":c,"k-progressbar-indeterminate":P,"k-disabled":n},v),ref:E,dir:O,tabIndex:s.getTabIndex(k,n),role:"progressbar","aria-label":e.ariaLabel,"aria-valuemin":g,"aria-valuemax":p,"aria-valuenow":P?void 0:S,"aria-disabled":n,style:f},B=s.classNames("k-progress-status-wrap",{"k-progress-start":"start"===d,"k-progress-center":"center"===d,"k-progress-end":"end"===d||void 0===d}),D="boolean"!=typeof a&&void 0!==a?a.duration:a?400:0,M=l.useCallback((()=>{const e=o(g,p,w);i(x,R,e,j)}),[j,p,g,w]),V=l.useCallback((e=>{const r=o(g,p,w+(S-w)*e);i(x,R,r,j)}),[g,p,w,S,j]),q=l.useCallback((()=>{const e=o(g,p,S);i(x,R,e,j)}),[j,p,g,S]);return t.useAnimation({duration:D,onStart:M,onUpdate:V,onEnd:q},[S,D]),l.createElement("div",{...A},l.createElement("span",{className:B+(h?" "+h:""),style:y},$),l.createElement("div",{className:"k-progressbar-value k-selected",style:N,ref:x},l.createElement("span",{className:B+(C?" "+C:""),ref:R},$)))}));d.propTypes={animation:a.any,ariaLabel:a.string,disabled:a.bool,reverse:a.bool,label:a.any,labelVisible:a.bool,labelPlacement:a.oneOf(["start","center","end"]),max:a.number,min:a.number,value:a.number,tabIndex:a.number,emptyStyle:a.object,emptyClassName:a.string,progressStyle:a.object,progressClassName:a.string};const b={animation:!1,min:0,max:100,value:0,disabled:!1,reverse:!1,labelVisible:!0};d.displayName="KendoProgressBar",e.ChunkProgressBar=u,e.ProgressBar=d}));

package/index.d.mts

@@ -12,80 +12,158 @@ import * as React_2 from 'react';
  */
 declare interface BaseProps {
     /**
-     * Sets one of the two visually distinct types of progress bar.
+     * Specifies the type of progress bar. Can be either `linear` or `circular`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar type="linear" />
+     * ```
      *
      * @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.
+     * 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;
     /**
-     * The minimum value of the progress bar. Defaults to `0`.
+     * Specifies the minimum value of the progress bar. Defaults to `0`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar min={0} />
+     * ```
      */
     min?: number;
     /**
-     * The maximum value of the progress bar. Defaults to `100`.
+     * Specifies the maximum value of the progress bar. Defaults to `100`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar max={100} />
+     * ```
      */
     max?: number;
     /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     * Sets the `dir` HTML attribute to switch between LTR and RTL directions.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
-     * The accessible label of the component.
+     * Provides an accessible label for the component.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar ariaLabel="Loading progress" />
+     * ```
      */
     ariaLabel?: string;
     /**
-     * Sets the disabled state of the progress bar.
+     * 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;
     /**
-     * Defines the orientation of the progress bar.
+     * 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 %})).
-     * Defaults to `horizontal`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar orientation="vertical" />
+     * ```
      */
     orientation?: 'horizontal' | 'vertical';
     /**
-     * If set to `true`, the progress bar will be reversed.
+     * 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 %})).
-     * Defaults to `false`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar reverse={true} />
+     * ```
      */
     reverse?: boolean;
     /**
-     * Specifies a list of CSS classes that will be added to the progress bar element.
+     * Adds a list of CSS classes to the progress bar element.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar className="custom-progress-bar" />
+     * ```
      */
     className?: string;
     /**
-     * Sets additional CSS styles to the progress bar.
+     * Applies additional CSS styles to the progress bar.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar style={{ backgroundColor: 'red' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * The styles that are applied to the inner element which represents the empty portion of the progress bar.
+     * 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;
     /**
-     * Sets additional classes to the inner element which represents the empty portion of the progress bar.
+     * 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;
     /**
-     * The styles that are applied to the inner element which represents the full portion of the progress bar.
+     * 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;
     /**
-     * Sets additional classes to the inner element which represents the full portion of the progress bar.
+     * 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` property of the progress bar.
+     * Sets the `tabIndex` attribute of the progress bar for keyboard navigation.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
 }
@@ -124,7 +202,13 @@ declare interface ChunkProgressBarHandle {
  */
 export declare interface ChunkProgressBarProps extends BaseProps {
     /**
-     * Sets the number of chunks into which the ChunkProgressBar will be split. Defaults to `5`.
+     * 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;
 }
@@ -134,7 +218,7 @@ export declare interface ChunkProgressBarProps extends BaseProps {
  */
 export declare interface LabelProps {
     /**
-     * Represents the current value of the ProgressBar.
+     * The current value of the ProgressBar. Can be a number or `null` for indeterminate state.
      */
     value?: number | null;
 }
@@ -191,21 +275,42 @@ export declare interface ProgressBarHandle {
  */
 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.
+     * 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;
     /**
-     * Overrides the default label ([see example]({% slug progressbar_label %})).
+     * 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>;
     /**
-     * Sets the visibility of the progress status label. Defaults to `true`.
+     * Determines whether the progress status label is visible. Defaults to `true`.
+     *
+     * @example
+     * ```jsx
+     * <ProgressBar labelVisible={false} />
+     * ```
      */
     labelVisible?: boolean;
     /**
-     * Sets the position of the progress status label. Defaults to `end` ([see example]({% slug progressbar_label %})).
+     * 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';
 }

package/index.d.ts

@@ -12,80 +12,158 @@ import * as React_2 from 'react';
  */
 declare interface BaseProps {
     /**
-     * Sets one of the two visually distinct types of progress bar.
+     * Specifies the type of progress bar. Can be either `linear` or `circular`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar type="linear" />
+     * ```
      *
      * @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.
+     * 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;
     /**
-     * The minimum value of the progress bar. Defaults to `0`.
+     * Specifies the minimum value of the progress bar. Defaults to `0`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar min={0} />
+     * ```
      */
     min?: number;
     /**
-     * The maximum value of the progress bar. Defaults to `100`.
+     * Specifies the maximum value of the progress bar. Defaults to `100`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar max={100} />
+     * ```
      */
     max?: number;
     /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     * Sets the `dir` HTML attribute to switch between LTR and RTL directions.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
-     * The accessible label of the component.
+     * Provides an accessible label for the component.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar ariaLabel="Loading progress" />
+     * ```
      */
     ariaLabel?: string;
     /**
-     * Sets the disabled state of the progress bar.
+     * 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;
     /**
-     * Defines the orientation of the progress bar.
+     * 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 %})).
-     * Defaults to `horizontal`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar orientation="vertical" />
+     * ```
      */
     orientation?: 'horizontal' | 'vertical';
     /**
-     * If set to `true`, the progress bar will be reversed.
+     * 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 %})).
-     * Defaults to `false`.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar reverse={true} />
+     * ```
      */
     reverse?: boolean;
     /**
-     * Specifies a list of CSS classes that will be added to the progress bar element.
+     * Adds a list of CSS classes to the progress bar element.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar className="custom-progress-bar" />
+     * ```
      */
     className?: string;
     /**
-     * Sets additional CSS styles to the progress bar.
+     * Applies additional CSS styles to the progress bar.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar style={{ backgroundColor: 'red' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * The styles that are applied to the inner element which represents the empty portion of the progress bar.
+     * 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;
     /**
-     * Sets additional classes to the inner element which represents the empty portion of the progress bar.
+     * 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;
     /**
-     * The styles that are applied to the inner element which represents the full portion of the progress bar.
+     * 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;
     /**
-     * Sets additional classes to the inner element which represents the full portion of the progress bar.
+     * 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` property of the progress bar.
+     * Sets the `tabIndex` attribute of the progress bar for keyboard navigation.
+     *
+     * Example:
+     * ```jsx
+     * <ProgressBar tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
 }
@@ -124,7 +202,13 @@ declare interface ChunkProgressBarHandle {
  */
 export declare interface ChunkProgressBarProps extends BaseProps {
     /**
-     * Sets the number of chunks into which the ChunkProgressBar will be split. Defaults to `5`.
+     * 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;
 }
@@ -134,7 +218,7 @@ export declare interface ChunkProgressBarProps extends BaseProps {
  */
 export declare interface LabelProps {
     /**
-     * Represents the current value of the ProgressBar.
+     * The current value of the ProgressBar. Can be a number or `null` for indeterminate state.
      */
     value?: number | null;
 }
@@ -191,21 +275,42 @@ export declare interface ProgressBarHandle {
  */
 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.
+     * 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;
     /**
-     * Overrides the default label ([see example]({% slug progressbar_label %})).
+     * 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>;
     /**
-     * Sets the visibility of the progress status label. Defaults to `true`.
+     * Determines whether the progress status label is visible. Defaults to `true`.
+     *
+     * @example
+     * ```jsx
+     * <ProgressBar labelVisible={false} />
+     * ```
      */
     labelVisible?: boolean;
     /**
-     * Sets the position of the progress status label. Defaults to `end` ([see example]({% slug progressbar_label %})).
+     * 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';
 }

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-progressbars",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1744621418,version:"10.2.0-develop.6",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-progressbars",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1744785606,version:"10.2.0-develop.7",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1744621418,
-  version: "10.2.0-develop.6",
+  publishDate: 1744785606,
+  version: "10.2.0-develop.7",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-progressbars",
-  "version": "10.2.0-develop.6",
+  "version": "10.2.0-develop.7",
   "description": "React ProgressBars offer a customizable interface for users to track and display the progress of a task. KendoReact ProgressBars package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,8 +26,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-animation": "10.2.0-develop.6",
-    "@progress/kendo-react-common": "10.2.0-develop.6",
+    "@progress/kendo-react-animation": "10.2.0-develop.7",
+    "@progress/kendo-react-common": "10.2.0-develop.7",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   },
@@ -56,7 +56,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1744621418,
+      "publishDate": 1744785606,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },