@alfalab/core-components-circular-progress-bar 3.8.3 → 3.9.0-snapshot-1393ffa

package/moderncssm/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sources":["../../src/consts.ts"],"sourcesContent":["export const SIZES = {\n    xs: 24,\n    s: 48,\n    m: 64,\n    l: 80,\n    xl: 128,\n    xxl: 144,\n    24: 24,\n    48: 48,\n    64: 64,\n    80: 80,\n    96: 96,\n    128: 128,\n    144: 144,\n};\n\nexport const STROKE = {\n    xs: 4,\n    s: 4,\n    m: 6,\n    l: 8,\n    xl: 10,\n    xxl: 12,\n    24: 4,\n    48: 4,\n    64: 6,\n    80: 8,\n    96: 8,\n    128: 10,\n    144: 12,\n};\n\nexport const VIEW_TITLE = {\n    xs: 'small',\n    s: 'small',\n    m: 'small',\n    l: 'xsmall',\n    xl: 'medium',\n    xxl: 'medium',\n    24: 'small',\n    48: 'small',\n    64: 'small',\n    80: 'xsmall',\n    96: 'xsmall',\n    128: 'medium',\n    144: 'medium',\n} as const;\n\nexport const VIEW_TEXT = {\n    xs: 'secondary-small',\n    s: 'secondary-small',\n    m: 'secondary-large',\n    l: 'secondary-large',\n    xl: 'secondary-large',\n    xxl: 'secondary-large',\n    24: 'secondary-small',\n    48: 'secondary-small',\n    64: 'secondary-large',\n    80: 'secondary-large',\n    96: 'secondary-large',\n    128: 'secondary-large',\n    144: 'secondary-large',\n} as const;\n\nexport const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];\n\nexport const SIZE_TO_CLASSNAME_MAP = {\n    xs: 'size-24',\n    s: 'size-48',\n    m: 'size-64',\n    l: 'size-80',\n    xl: 'size-128',\n    xxl: 'size-144',\n    24: 'size-24',\n    48: 'size-48',\n    64: 'size-64',\n    80: 'size-80',\n    96: 'size-96',\n    128: 'size-128',\n    144: 'size-144',\n};\n\nexport const MAX_PROGRESS_VALUE = 100;\n\nexport const MIN_TIMER_VALUE = 0;\nexport const MAX_TIMER_VALUE = 3599;\n"],"names":[],"mappings":"AAAa,MAAA,KAAK,GAAG;AACjB,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,GAAG,EAAE,GAAG;;AAGC,MAAA,MAAM,GAAG;AAClB,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,GAAG,EAAE,EAAE;;AAGE,MAAA,UAAU,GAAG;AACtB,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,CAAC,EAAE,OAAO;AACV,IAAA,CAAC,EAAE,OAAO;AACV,IAAA,CAAC,EAAE,QAAQ;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,GAAG,EAAE,QAAQ;;AAGJ,MAAA,SAAS,GAAG;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,GAAG,EAAE,iBAAiB;AACtB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,GAAG,EAAE,iBAAiB;AACtB,IAAA,GAAG,EAAE,iBAAiB;;AAGnB,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU;AAE9E,MAAA,qBAAqB,GAAG;AACjC,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,EAAE,EAAE,UAAU;AACd,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,GAAG,EAAE,UAAU;;AAGZ,MAAM,kBAAkB,GAAG;AAE3B,MAAM,eAAe,GAAG;AACxB,MAAM,eAAe,GAAG;;;;"}

package/moderncssm/index.js

@@ -1 +1,2 @@
 export { CircularProgressBar } from './Component.js';
+//# sourceMappingURL=index.js.map

package/moderncssm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/moderncssm/index.module.css

@@ -1,16 +1,7 @@
-/* */
-
 :root {
-    /* stroke */
     --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);
-
-    /* positive */
     --circular-progress-bar-positive-color: var(--color-light-status-positive);
-
-    /* negative */
     --circular-progress-bar-negative-color: var(--color-light-status-negative);
-
-    /* theme */
     --circular-progress-bar-font-family: var(--font-family-system);
     --circular-progress-bar-font-weight: 600;
 }

package/moderncssm/shared/index.js

@@ -1 +1,2 @@
 export { getCircularProgressBarTestIds } from '../utils/get-circular-progress-bar-test-ids.js';
+//# sourceMappingURL=index.js.map

package/moderncssm/shared/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/{modern → moderncssm/src}/Component.d.ts

@@ -1,9 +1,7 @@
-/// <reference types="react" />
-import React from 'react';
-import { ElementType, ReactNode } from "react";
-import { ComponentSize } from "./types/component-size";
-import { TypographyColor } from "./types/typography-color";
-type CircularProgressBarProps = {
+import React, { ElementType, ReactNode } from 'react';
+import { ComponentSize } from './types/component-size';
+import { TypographyColor } from './types/typography-color';
+export declare type CircularProgressBarProps = {
     /**
      * Уровень прогресса, %
      */
@@ -21,6 +19,10 @@ type CircularProgressBarProps = {
          * @default backward
          */
         counting?: 'forward' | 'backward';
+        /**
+         * Обработчик завершения таймера
+         */
+        onFinish?: () => void;
     };
     /**
      * Дополнительный класс
@@ -138,5 +140,4 @@ type CircularProgressBarProps = {
 /**
  * Компонент круглого прогресс бара.
  */
-declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { CircularProgressBarProps, CircularProgressBar };
+export declare const CircularProgressBar: React.FC<CircularProgressBarProps>;

package/{cssm → moderncssm/src}/consts.d.ts

@@ -1,4 +1,4 @@
-declare const SIZES: {
+export declare const SIZES: {
     xs: number;
     s: number;
     m: number;
@@ -13,7 +13,7 @@ declare const SIZES: {
     128: number;
     144: number;
 };
-declare const STROKE: {
+export declare const STROKE: {
     xs: number;
     s: number;
     m: number;
@@ -28,7 +28,7 @@ declare const STROKE: {
     128: number;
     144: number;
 };
-declare const VIEW_TITLE: {
+export declare const VIEW_TITLE: {
     readonly xs: "small";
     readonly s: "small";
     readonly m: "small";
@@ -43,7 +43,7 @@ declare const VIEW_TITLE: {
     readonly 128: "medium";
     readonly 144: "medium";
 };
-declare const VIEW_TEXT: {
+export declare const VIEW_TEXT: {
     readonly xs: "secondary-small";
     readonly s: "secondary-small";
     readonly m: "secondary-large";
@@ -58,8 +58,8 @@ declare const VIEW_TEXT: {
     readonly 128: "secondary-large";
     readonly 144: "secondary-large";
 };
-declare const TYPOGRAPHY_COLOR: string[];
-declare const SIZE_TO_CLASSNAME_MAP: {
+export declare const TYPOGRAPHY_COLOR: string[];
+export declare const SIZE_TO_CLASSNAME_MAP: {
     xs: string;
     s: string;
     m: string;
@@ -74,7 +74,6 @@ declare const SIZE_TO_CLASSNAME_MAP: {
     128: string;
     144: string;
 };
-declare const MAX_PROGRESS_VALUE = 100;
-declare const MIN_TIMER_VALUE = 0;
-declare const MAX_TIMER_VALUE = 3599;
-export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, MAX_PROGRESS_VALUE, MIN_TIMER_VALUE, MAX_TIMER_VALUE };
+export declare const MAX_PROGRESS_VALUE = 100;
+export declare const MIN_TIMER_VALUE = 0;
+export declare const MAX_TIMER_VALUE = 3599;

package/moderncssm/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Component';
+export * from './types/typography-color';

package/moderncssm/src/shared/index.d.ts

@@ -0,0 +1 @@
+export { getCircularProgressBarTestIds } from '../utils/get-circular-progress-bar-test-ids';

package/moderncssm/src/types/component-size.d.ts

@@ -0,0 +1 @@
+export declare type ComponentSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;

package/moderncssm/src/types/typography-color.d.ts

@@ -0,0 +1 @@
+export declare type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';

package/moderncssm/src/use-timer.d.ts

@@ -0,0 +1 @@
+export declare function useTimer(time: number, active: boolean | undefined, counting: 'forward' | 'backward', onFinish: () => void, interval?: number, step?: number): [value: number, title: string];

package/moderncssm/{utils → src/utils}/get-circular-progress-bar-test-ids.d.ts

@@ -1,8 +1,7 @@
-declare function getCircularProgressBarTestIds(dataTestId: string): {
+export declare function getCircularProgressBarTestIds(dataTestId: string): {
     progressBar: string;
     title: string;
     subtitle: string;
     circleProgressBar: string;
     circleProgressValue: string;
 };
-export { getCircularProgressBarTestIds };

package/moderncssm/src/utils/is-typography-color.d.ts

@@ -0,0 +1,2 @@
+import { TypographyColor } from '../types/typography-color';
+export declare const isTypographyColor: (color: TypographyColor | string) => color is TypographyColor;

package/moderncssm/types/component-size.js

@@ -1 +1,2 @@
 
+//# sourceMappingURL=component-size.js.map

package/moderncssm/types/component-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-size.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/moderncssm/types/typography-color.js

@@ -1 +1,2 @@
 
+//# sourceMappingURL=typography-color.js.map

package/moderncssm/types/typography-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-color.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/moderncssm/use-timer.js

@@ -5,20 +5,24 @@ const MAX_PERSENT_VALUE = 100;
 function makeTitle(time) {
     return `${Math.trunc(time / 60)}:${`${time % 60}`.padStart(2, '0')}`;
 }
-function useTimer(time, active = true, counting, interval = 1000, step = 1) {
+function useTimer(time, active = true, counting, onFinish, interval = 1000, step = 1) {
     const [passedTime, setPassedTime] = useState(0);
     const isCompleted = passedTime === time;
     const persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);
     useEffect(() => {
         if (!active || isCompleted) {
+            if (isCompleted) {
+                onFinish();
+            }
             return noop;
         }
         const timer = setInterval(() => {
             setPassedTime((prevPassed) => prevPassed + step);
         }, interval);
         return () => clearInterval(timer);
-    }, [interval, isCompleted, active, step]);
+    }, [interval, isCompleted, active, step, onFinish]);
     return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];
 }
 
 export { useTimer };
+//# sourceMappingURL=use-timer.js.map

package/moderncssm/use-timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-timer.js","sources":["../../src/use-timer.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { noop } from '@alfalab/core-components-shared';\n\nconst MAX_PERSENT_VALUE = 100;\n\nfunction makeTitle(time: number) {\n    return `${Math.trunc(time / 60)}:${`${time % 60}`.padStart(2, '0')}`;\n}\n\nexport function useTimer(\n    time: number,\n    active = true,\n    counting: 'forward' | 'backward',\n    onFinish: () => void,\n    interval = 1000,\n    step = 1,\n): [value: number, title: string] {\n    const [passedTime, setPassedTime] = useState(0);\n    const isCompleted = passedTime === time;\n    const persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);\n\n    useEffect(() => {\n        if (!active || isCompleted) {\n            if (isCompleted) {\n                onFinish();\n            }\n\n            return noop;\n        }\n\n        const timer = setInterval(() => {\n            setPassedTime((prevPassed) => prevPassed + step);\n        }, interval);\n\n        return () => clearInterval(timer);\n    }, [interval, isCompleted, active, step, onFinish]);\n\n    return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,iBAAiB,GAAG,GAAG;AAE7B,SAAS,SAAS,CAAC,IAAY,EAAA;IAC3B,OAAO,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,CAAI,CAAA,EAAA,CAAA,EAAG,IAAI,GAAG,EAAE,CAAE,CAAA,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA,CAAE;AACxE;SAEgB,QAAQ,CACpB,IAAY,EACZ,MAAM,GAAG,IAAI,EACb,QAAgC,EAChC,QAAoB,EACpB,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,CAAC,EAAA;IAER,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC/C,IAAA,MAAM,WAAW,GAAG,UAAU,KAAK,IAAI;AACvC,IAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,IAAI,IAAI,iBAAiB,CAAC;IAExE,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,MAAM,IAAI,WAAW,EAAE;AACxB,YAAA,IAAI,WAAW,EAAE;AACb,gBAAA,QAAQ,EAAE;AACb;AAED,YAAA,OAAO,IAAI;AACd;AAED,QAAA,MAAM,KAAK,GAAG,WAAW,CAAC,MAAK;YAC3B,aAAa,CAAC,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC;SACnD,EAAE,QAAQ,CAAC;AAEZ,QAAA,OAAO,MAAM,aAAa,CAAC,KAAK,CAAC;AACrC,KAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAEnD,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,QAAQ,KAAK,UAAU,GAAG,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAC9F;;;;"}

package/moderncssm/utils/get-circular-progress-bar-test-ids.js

@@ -11,3 +11,4 @@ function getCircularProgressBarTestIds(dataTestId) {
 }
 
 export { getCircularProgressBarTestIds };
+//# sourceMappingURL=get-circular-progress-bar-test-ids.js.map

package/moderncssm/utils/get-circular-progress-bar-test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-circular-progress-bar-test-ids.js","sources":["../../../src/utils/get-circular-progress-bar-test-ids.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getCircularProgressBarTestIds(dataTestId: string) {\n    return {\n        progressBar: dataTestId,\n        title: getDataTestId(dataTestId, 'title'),\n        subtitle: getDataTestId(dataTestId, 'subtitle'),\n        circleProgressBar: getDataTestId(dataTestId, 'circle-progress-bar'),\n        circleProgressValue: getDataTestId(dataTestId, 'circle-progress-value'),\n    };\n}\n"],"names":[],"mappings":";;AAEM,SAAU,6BAA6B,CAAC,UAAkB,EAAA;IAC5D,OAAO;AACH,QAAA,WAAW,EAAE,UAAU;AACvB,QAAA,KAAK,EAAE,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC;AACzC,QAAA,QAAQ,EAAE,aAAa,CAAC,UAAU,EAAE,UAAU,CAAC;AAC/C,QAAA,iBAAiB,EAAE,aAAa,CAAC,UAAU,EAAE,qBAAqB,CAAC;AACnE,QAAA,mBAAmB,EAAE,aAAa,CAAC,UAAU,EAAE,uBAAuB,CAAC;KAC1E;AACL;;;;"}

package/moderncssm/utils/is-typography-color.js

@@ -3,3 +3,4 @@ import { TYPOGRAPHY_COLOR } from '../consts.js';
 const isTypographyColor = (color) => TYPOGRAPHY_COLOR.includes(color);
 
 export { isTypographyColor };
+//# sourceMappingURL=is-typography-color.js.map

package/moderncssm/utils/is-typography-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-typography-color.js","sources":["../../../src/utils/is-typography-color.ts"],"sourcesContent":["import { TYPOGRAPHY_COLOR } from '../consts';\nimport { TypographyColor } from '../types/typography-color';\n\nexport const isTypographyColor = (color: TypographyColor | string): color is TypographyColor =>\n    TYPOGRAPHY_COLOR.includes(color);\n"],"names":[],"mappings":";;AAGO,MAAM,iBAAiB,GAAG,CAAC,KAA+B,KAC7D,gBAAgB,CAAC,QAAQ,CAAC,KAAK;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-circular-progress-bar",
-    "version": "3.8.3",
+    "version": "3.9.0-snapshot-1393ffa",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -12,14 +12,14 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@alfalab/core-components-typography": "^4.13.0",
-        "@alfalab/core-components-shared": "^0.16.0",
+        "@alfalab/core-components-typography": "4.13.1-snapshot-1393ffa",
+        "@alfalab/core-components-shared": "0.16.1-snapshot-1393ffa",
         "classnames": "^2.5.1",
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
-    "themesVersion": "13.7.2",
-    "varsVersion": "9.20.0"
+    "themesVersion": "14.0.0-snapshot-1393ffa",
+    "varsVersion": "9.20.1-snapshot-1393ffa"
 }

package/shared/index.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var utils_getCircularProgressBarTestIds = require('../utils/get-circular-progress-bar-test-ids.js');
+var getCircularProgressBarTestIds = require('../utils/get-circular-progress-bar-test-ids.js');
 
 
 
-exports.getCircularProgressBarTestIds = utils_getCircularProgressBarTestIds.getCircularProgressBarTestIds;
+exports.getCircularProgressBarTestIds = getCircularProgressBarTestIds.getCircularProgressBarTestIds;
+//# sourceMappingURL=index.js.map

package/shared/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/src/Component.d.ts

@@ -0,0 +1,143 @@
+import React, { ElementType, ReactNode } from 'react';
+import { ComponentSize } from './types/component-size';
+import { TypographyColor } from './types/typography-color';
+export declare type CircularProgressBarProps = {
+    /**
+     * Уровень прогресса, %
+     */
+    value: number | {
+        /**
+         * Время таймера в секундах
+         * Минимальное значение 0
+         * Максимальное значение 3600
+         */
+        timer: number;
+        /**
+         * Направлние отсчета таймера
+         * forward: считаем от 0 до указанного значения
+         * backward: считаем от указанного значения до 0
+         * @default backward
+         */
+        counting?: 'forward' | 'backward';
+        /**
+         * Обработчик завершения таймера
+         */
+        onFinish?: () => void;
+    };
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Основной текст
+     */
+    title?: ReactNode;
+    /**
+     * Цвет контента
+     */
+    contentColor?: TypographyColor | string;
+    /**
+     * Цвет заголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    titleColor?: TypographyColor | string;
+    /**
+     * Цвет подзаголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    subtitleColor?: TypographyColor | string;
+    /**
+     * Дополнительный текст
+     */
+    subtitle?: ReactNode;
+    /**
+     * Основной текст при 100%
+     */
+    titleComplete?: ReactNode;
+    /**
+     * Дополнительный текст при 100%
+     */
+    subtitleComplete?: ReactNode;
+    /**
+     * Цвет заполнения
+     */
+    view?: 'positive' | 'negative';
+    /**
+     * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
+     * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64, 80, 128, 144 соответственно
+     * @default 64
+     */
+    size?: ComponentSize;
+    /**
+     * Наличие желоба
+     */
+    stroke?: boolean;
+    /**
+     * Заливка при 100%
+     */
+    fillComplete?: boolean;
+    /**
+     * Цвет текста при 100%
+     */
+    completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';
+    /**
+     * Цвет иконки при 100%
+     */
+    completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';
+    /**
+     * Компонент иконки
+     */
+    icon?: ElementType<{
+        className?: string;
+    }>;
+    /**
+     * Компонент иконки при 100%
+     */
+    iconComplete?: ElementType<{
+        className?: string;
+    }>;
+    /**
+     * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)
+     */
+    direction?: 'clockwise' | 'counter-clockwise';
+    /**
+     * Высота компонента, min = 24; max = 144
+     * использовать совместно с size :
+     * xxl от 144
+     * xl  от 128 до 143
+     * l   от 80 до 127
+     * m   от 64 до 79
+     * s   от 48 до 63
+     * xs  от 24 до 47
+     */
+    height?: number;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы
+     */
+    children?: ReactNode;
+    /**
+     * Цвет прогресса
+     */
+    progressStrokeColor?: string;
+    /**
+     * Цвет заливки внутри круга
+     */
+    circleColor?: string;
+    /**
+     * Цвет желоба
+     */
+    strokeColor?: string;
+    /**
+     * Направление заполнения круга
+     * @default desc
+     */
+    directionType?: 'asc' | 'desc';
+};
+/**
+ * Компонент круглого прогресс бара.
+ */
+export declare const CircularProgressBar: React.FC<CircularProgressBarProps>;

package/src/Component.tsx

@@ -2,7 +2,7 @@
 import React, { ElementType, ReactNode, useMemo } from 'react';
 import cn from 'classnames';
 
-import { getDataTestId, isObject } from '@alfalab/core-components-shared';
+import { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';
 import { Text, TitleMobile } from '@alfalab/core-components-typography';
 
 import { ComponentSize } from './types/component-size';
@@ -44,6 +44,10 @@ export type CircularProgressBarProps = {
                * @default backward
                */
               counting?: 'forward' | 'backward';
+              /**
+               * Обработчик завершения таймера
+               */
+              onFinish?: () => void;
           };
 
     /**
@@ -214,6 +218,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
         isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,
         isTimer,
         isTimer ? valueFromProps.counting ?? 'backward' : 'backward',
+        isTimer ? valueFromProps.onFinish ?? noop : noop,
     );
     let value: number;
     let title: React.ReactNode;

package/src/consts.d.ts

@@ -0,0 +1,79 @@
+export declare const SIZES: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+    24: number;
+    48: number;
+    64: number;
+    80: number;
+    96: number;
+    128: number;
+    144: number;
+};
+export declare const STROKE: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+    24: number;
+    48: number;
+    64: number;
+    80: number;
+    96: number;
+    128: number;
+    144: number;
+};
+export declare const VIEW_TITLE: {
+    readonly xs: "small";
+    readonly s: "small";
+    readonly m: "small";
+    readonly l: "xsmall";
+    readonly xl: "medium";
+    readonly xxl: "medium";
+    readonly 24: "small";
+    readonly 48: "small";
+    readonly 64: "small";
+    readonly 80: "xsmall";
+    readonly 96: "xsmall";
+    readonly 128: "medium";
+    readonly 144: "medium";
+};
+export declare const VIEW_TEXT: {
+    readonly xs: "secondary-small";
+    readonly s: "secondary-small";
+    readonly m: "secondary-large";
+    readonly l: "secondary-large";
+    readonly xl: "secondary-large";
+    readonly xxl: "secondary-large";
+    readonly 24: "secondary-small";
+    readonly 48: "secondary-small";
+    readonly 64: "secondary-large";
+    readonly 80: "secondary-large";
+    readonly 96: "secondary-large";
+    readonly 128: "secondary-large";
+    readonly 144: "secondary-large";
+};
+export declare const TYPOGRAPHY_COLOR: string[];
+export declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+    24: string;
+    48: string;
+    64: string;
+    80: string;
+    96: string;
+    128: string;
+    144: string;
+};
+export declare const MAX_PROGRESS_VALUE = 100;
+export declare const MIN_TIMER_VALUE = 0;
+export declare const MAX_TIMER_VALUE = 3599;

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Component';
+export * from './types/typography-color';

package/src/shared/index.d.ts

@@ -0,0 +1 @@
+export { getCircularProgressBarTestIds } from '../utils/get-circular-progress-bar-test-ids';

package/src/types/component-size.d.ts

@@ -0,0 +1 @@
+export declare type ComponentSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;

package/src/types/typography-color.d.ts

@@ -0,0 +1 @@
+export declare type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';

package/src/use-timer.d.ts

@@ -0,0 +1 @@
+export declare function useTimer(time: number, active: boolean | undefined, counting: 'forward' | 'backward', onFinish: () => void, interval?: number, step?: number): [value: number, title: string];

package/src/use-timer.ts

@@ -12,6 +12,7 @@ export function useTimer(
     time: number,
     active = true,
     counting: 'forward' | 'backward',
+    onFinish: () => void,
     interval = 1000,
     step = 1,
 ): [value: number, title: string] {
@@ -21,6 +22,10 @@ export function useTimer(
 
     useEffect(() => {
         if (!active || isCompleted) {
+            if (isCompleted) {
+                onFinish();
+            }
+
             return noop;
         }
 
@@ -29,7 +34,7 @@ export function useTimer(
         }, interval);
 
         return () => clearInterval(timer);
-    }, [interval, isCompleted, active, step]);
+    }, [interval, isCompleted, active, step, onFinish]);
 
     return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];
 }

package/src/utils/get-circular-progress-bar-test-ids.d.ts

@@ -0,0 +1,7 @@
+export declare function getCircularProgressBarTestIds(dataTestId: string): {
+    progressBar: string;
+    title: string;
+    subtitle: string;
+    circleProgressBar: string;
+    circleProgressValue: string;
+};

package/src/utils/is-typography-color.d.ts

@@ -0,0 +1,2 @@
+import { TypographyColor } from '../types/typography-color';
+export declare const isTypographyColor: (color: TypographyColor | string) => color is TypographyColor;

package/types/component-size.js

@@ -1,2 +1,3 @@
 'use strict';
 
+//# sourceMappingURL=component-size.js.map

package/types/component-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-size.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/types/typography-color.js

@@ -1,2 +1,3 @@
 'use strict';
 
+//# sourceMappingURL=typography-color.js.map

package/types/typography-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-color.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/use-timer.js

@@ -9,7 +9,7 @@ var MAX_PERSENT_VALUE = 100;
 function makeTitle(time) {
     return "".concat(Math.trunc(time / 60), ":").concat("".concat(time % 60).padStart(2, '0'));
 }
-function useTimer(time, active, counting, interval, step) {
+function useTimer(time, active, counting, onFinish, interval, step) {
     if (active === void 0) { active = true; }
     if (interval === void 0) { interval = 1000; }
     if (step === void 0) { step = 1; }
@@ -18,14 +18,18 @@ function useTimer(time, active, counting, interval, step) {
     var persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);
     React.useEffect(function () {
         if (!active || isCompleted) {
+            if (isCompleted) {
+                onFinish();
+            }
             return coreComponentsShared.noop;
         }
         var timer = setInterval(function () {
             setPassedTime(function (prevPassed) { return prevPassed + step; });
         }, interval);
         return function () { return clearInterval(timer); };
-    }, [interval, isCompleted, active, step]);
+    }, [interval, isCompleted, active, step, onFinish]);
     return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];
 }
 
 exports.useTimer = useTimer;
+//# sourceMappingURL=use-timer.js.map

package/use-timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-timer.js","sources":["../src/use-timer.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { noop } from '@alfalab/core-components-shared';\n\nconst MAX_PERSENT_VALUE = 100;\n\nfunction makeTitle(time: number) {\n    return `${Math.trunc(time / 60)}:${`${time % 60}`.padStart(2, '0')}`;\n}\n\nexport function useTimer(\n    time: number,\n    active = true,\n    counting: 'forward' | 'backward',\n    onFinish: () => void,\n    interval = 1000,\n    step = 1,\n): [value: number, title: string] {\n    const [passedTime, setPassedTime] = useState(0);\n    const isCompleted = passedTime === time;\n    const persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);\n\n    useEffect(() => {\n        if (!active || isCompleted) {\n            if (isCompleted) {\n                onFinish();\n            }\n\n            return noop;\n        }\n\n        const timer = setInterval(() => {\n            setPassedTime((prevPassed) => prevPassed + step);\n        }, interval);\n\n        return () => clearInterval(timer);\n    }, [interval, isCompleted, active, step, onFinish]);\n\n    return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];\n}\n"],"names":["useState","useEffect","noop"],"mappings":";;;;;;;AAIA,IAAM,iBAAiB,GAAG,GAAG;AAE7B,SAAS,SAAS,CAAC,IAAY,EAAA;IAC3B,OAAO,EAAA,CAAA,MAAA,CAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,MAAA,CAAG,IAAI,GAAG,EAAE,CAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAE;AACxE;AAEgB,SAAA,QAAQ,CACpB,IAAY,EACZ,MAAa,EACb,QAAgC,EAChC,QAAoB,EACpB,QAAe,EACf,IAAQ,EAAA;AAJR,IAAA,IAAA,MAAA,KAAA,MAAA,EAAA,EAAA,MAAa,GAAA,IAAA,CAAA;AAGb,IAAA,IAAA,QAAA,KAAA,MAAA,EAAA,EAAA,QAAe,GAAA,IAAA,CAAA;AACf,IAAA,IAAA,IAAA,KAAA,MAAA,EAAA,EAAA,IAAQ,GAAA,CAAA,CAAA;IAEF,IAAA,EAAA,GAA8BA,cAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAe;AAC/C,IAAA,IAAM,WAAW,GAAG,UAAU,KAAK,IAAI;AACvC,IAAA,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,IAAI,IAAI,iBAAiB,CAAC;AAExE,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAI,CAAC,MAAM,IAAI,WAAW,EAAE;AACxB,YAAA,IAAI,WAAW,EAAE;AACb,gBAAA,QAAQ,EAAE;AACb;AAED,YAAA,OAAOC,yBAAI;AACd;QAED,IAAM,KAAK,GAAG,WAAW,CAAC,YAAA;YACtB,aAAa,CAAC,UAAC,UAAU,EAAK,EAAA,OAAA,UAAU,GAAG,IAAI,CAAA,EAAA,CAAC;SACnD,EAAE,QAAQ,CAAC;QAEZ,OAAO,YAAA,EAAM,OAAA,aAAa,CAAC,KAAK,CAAC,CAAA,EAAA;AACrC,KAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAEnD,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,QAAQ,KAAK,UAAU,GAAG,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAC9F;;;;"}