@alfalab/core-components-circular-progress-bar 3.6.8 → 3.7.0

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 11ahd */
+/* hash: 14q8x */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-500: #babbc2;
@@ -45,135 +45,145 @@
     /* theme */
     --circular-progress-bar-font-family: var(--font-family-system);
     --circular-progress-bar-font-weight: 600;
-} .circular-progress-bar__component_1bxdv {
+} .circular-progress-bar__component_1cf8i {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: var(--border-radius-pill)
-} .circular-progress-bar__component_1bxdv.circular-progress-bar__bg-positive_1bxdv {
+} .circular-progress-bar__component_1cf8i.circular-progress-bar__bg-positive_1cf8i {
         background: var(--circular-progress-bar-positive-color);
-    } .circular-progress-bar__component_1bxdv.circular-progress-bar__bg-negative_1bxdv {
+    } .circular-progress-bar__component_1cf8i.circular-progress-bar__bg-negative_1cf8i {
         background: var(--circular-progress-bar-negative-color);
-    } .circular-progress-bar__svg_1bxdv {
+    } .circular-progress-bar__svg_1cf8i {
     display: block;
     width: 100%;
-} .circular-progress-bar__title_1bxdv,
-.circular-progress-bar__subtitle_1bxdv {
+} .circular-progress-bar__title_1cf8i,
+.circular-progress-bar__subtitle_1cf8i {
     overflow: hidden;
     word-break: break-word;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: var(--gap-0) 6px;
-} .circular-progress-bar__subtitle_1bxdv {
+} .circular-progress-bar__subtitle_1cf8i {
     max-height: 40px;
-} .circular-progress-bar__labelWrapper_1bxdv {
+} .circular-progress-bar__labelWrapper_1cf8i {
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     transform: translate(-50%, -50%)
-} .circular-progress-bar__labelWrapper_1bxdv.circular-progress-bar__label_1bxdv {
+} .circular-progress-bar__labelWrapper_1cf8i.circular-progress-bar__label_1cf8i {
         display: flex;
         align-items: center;
         justify-content: center;
-    } .circular-progress-bar__typography_1bxdv {
+    } .circular-progress-bar__typography_1cf8i {
     font-feature-settings: 'ss01';
     font-weight: var(--circular-progress-bar-font-weight);
     font-family: var(--circular-progress-bar-font-family);
-} .circular-progress-bar__size-144_1bxdv {
+} .circular-progress-bar__size-144_1cf8i {
     width: 144px;
     height: 144px
-} .circular-progress-bar__size-144_1bxdv .circular-progress-bar__labelWrapper_1bxdv {
+} .circular-progress-bar__size-144_1cf8i .circular-progress-bar__labelWrapper_1cf8i {
         max-width: 128px;
-    } .circular-progress-bar__size-144_1bxdv .circular-progress-bar__title_1bxdv {
+    } .circular-progress-bar__size-144_1cf8i .circular-progress-bar__title_1cf8i {
         max-height: 32px;
-    } .circular-progress-bar__size-128_1bxdv {
+    } .circular-progress-bar__size-128_1cf8i {
     width: 128px;
     height: 128px
-} .circular-progress-bar__size-128_1bxdv .circular-progress-bar__labelWrapper_1bxdv {
+} .circular-progress-bar__size-128_1cf8i .circular-progress-bar__labelWrapper_1cf8i {
         max-width: 108px;
-    } .circular-progress-bar__size-128_1bxdv .circular-progress-bar__title_1bxdv {
+    } .circular-progress-bar__size-128_1cf8i .circular-progress-bar__title_1cf8i {
         max-height: 32px;
-    } .circular-progress-bar__size-80_1bxdv {
+    } .circular-progress-bar__size-96_1cf8i {
+    width: 96px;
+    height: 96px
+} .circular-progress-bar__size-96_1cf8i .circular-progress-bar__labelWrapper_1cf8i {
+        max-width: 64px;
+    } .circular-progress-bar__size-96_1cf8i .circular-progress-bar__title_1cf8i {
+        max-height: 20px;
+    } .circular-progress-bar__size-80_1cf8i {
     width: 80px;
     height: 80px
-} .circular-progress-bar__size-80_1bxdv .circular-progress-bar__labelWrapper_1bxdv {
+} .circular-progress-bar__size-80_1cf8i .circular-progress-bar__labelWrapper_1cf8i {
         max-width: 64px;
-    } .circular-progress-bar__size-80_1bxdv .circular-progress-bar__title_1bxdv {
+    } .circular-progress-bar__size-80_1cf8i .circular-progress-bar__title_1cf8i {
         max-height: 24px;
-    } .circular-progress-bar__size-64_1bxdv {
+    } .circular-progress-bar__size-64_1cf8i {
     width: 64px;
     height: 64px
-} .circular-progress-bar__size-64_1bxdv .circular-progress-bar__labelWrapper_1bxdv {
+} .circular-progress-bar__size-64_1cf8i .circular-progress-bar__labelWrapper_1cf8i {
         max-width: 48px;
-    } .circular-progress-bar__size-64_1bxdv .circular-progress-bar__title_1bxdv {
+    } .circular-progress-bar__size-64_1cf8i .circular-progress-bar__title_1cf8i {
         max-height: 16px;
         margin: var(--gap-0);
-    } .circular-progress-bar__size-48_1bxdv {
+    } .circular-progress-bar__size-48_1cf8i {
     width: 48px;
     height: 48px
-} .circular-progress-bar__size-48_1bxdv .circular-progress-bar__labelWrapper_1bxdv {
+} .circular-progress-bar__size-48_1cf8i .circular-progress-bar__labelWrapper_1cf8i {
         max-width: 40px;
-    } .circular-progress-bar__size-48_1bxdv .circular-progress-bar__title_1bxdv {
+    } .circular-progress-bar__size-48_1cf8i .circular-progress-bar__title_1cf8i {
         max-height: 16px;
         margin: var(--gap-0);
-    } .circular-progress-bar__size-24_1bxdv {
+    } .circular-progress-bar__size-24_1cf8i {
     width: 24px;
     height: 24px
-} .circular-progress-bar__size-24_1bxdv .circular-progress-bar__labelWrapper_1bxdv {
+} .circular-progress-bar__size-24_1cf8i .circular-progress-bar__labelWrapper_1cf8i {
         max-width: 24px;
-    } .circular-progress-bar__backgroundCircle_1bxdv,
-.circular-progress-bar__progressCircle_1bxdv {
+    } .circular-progress-bar__backgroundCircle_1cf8i,
+.circular-progress-bar__progressCircle_1cf8i {
     width: 100%;
     height: 100%;
     fill: transparent;
-} .circular-progress-bar__positive_1bxdv {
+} .circular-progress-bar__positive_1cf8i {
     stroke: var(--circular-progress-bar-positive-color);
-} .circular-progress-bar__negative_1bxdv {
+} .circular-progress-bar__negative_1cf8i {
     stroke: var(--circular-progress-bar-negative-color);
-} .circular-progress-bar__backgroundCircle_1bxdv {
+} .circular-progress-bar__backgroundCircle_1cf8i {
     stroke: var(--circular-progress-bar-stroke-color)
-} .circular-progress-bar__backgroundCircle_1bxdv.circular-progress-bar__stroke_1bxdv {
+} .circular-progress-bar__backgroundCircle_1cf8i.circular-progress-bar__stroke_1cf8i {
         stroke: transparent;
-    } .circular-progress-bar__progressCircle_1bxdv {
+    } .circular-progress-bar__progressCircle_1cf8i {
     stroke-linecap: round;
-} .circular-progress-bar__iconWrapper_1bxdv {
+} .circular-progress-bar__iconWrapper_1cf8i {
     display: flex;
     align-items: center;
     justify-content: center
-} .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__size-144_1bxdv {
+} .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__size-144_1cf8i {
         max-width: 64px;
         max-height: 64px;
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__size-128_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__size-128_1cf8i {
         max-width: 64px;
         max-height: 64px;
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__size-80_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__size-96_1cf8i {
+        max-width: 48px;
+        max-height: 48px;
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__size-80_1cf8i {
         max-width: 48px;
         max-height: 48px;
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__size-64_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__size-64_1cf8i {
         max-width: 36px;
         max-height: 36px;
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__size-48_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__size-48_1cf8i {
         max-width: 24px;
         max-height: 24px;
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__size-24_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__size-24_1cf8i {
         max-width: 16px;
         max-height: 16px;
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__icon-tertiary_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__icon-tertiary_1cf8i {
         color: var(--color-light-neutral-500);
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__icon-positive_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__icon-positive_1cf8i {
         color: var(--color-light-status-positive);
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__icon-negative_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__icon-negative_1cf8i {
         color: var(--color-light-status-negative);
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__icon-primary-inverted_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__icon-primary-inverted_1cf8i {
         color: var(--color-light-neutral-translucent-1300-inverted);
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__icon-primary_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__icon-primary_1cf8i {
         color: var(--color-light-neutral-translucent-1300);
-    } .circular-progress-bar__iconWrapper_1bxdv.circular-progress-bar__icon-secondary_1bxdv {
+    } .circular-progress-bar__iconWrapper_1cf8i.circular-progress-bar__icon-secondary_1cf8i {
         color: var(--color-light-neutral-700);
-    } .circular-progress-bar__icon_1bxdv {
+    } .circular-progress-bar__icon_1cf8i {
     width: 100%;
     height: 100%;
 }

package/modern/index.d.ts

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

package/modern/shared/index.d.ts

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

package/modern/shared/index.js

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

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

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

package/modern/types/component-size.js

@@ -0,0 +1 @@
+

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

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

package/modern/types/typography-color.js

@@ -0,0 +1 @@
+

package/modern/use-timer.d.ts

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

package/modern/use-timer.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import { noop } from '@alfalab/core-components-shared/modern';
+
+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) {
+    const [passedTime, setPassedTime] = useState(0);
+    const isCompleted = passedTime === time;
+    const persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);
+    useEffect(() => {
+        if (!active || isCompleted) {
+            return noop;
+        }
+        const timer = setInterval(() => {
+            setPassedTime((prevPassed) => prevPassed + step);
+        }, interval);
+        return () => clearInterval(timer);
+    }, [interval, isCompleted, active, step]);
+    return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];
+}
+
+export { useTimer };

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

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

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

@@ -0,0 +1,13 @@
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+
+function getCircularProgressBarTestIds(dataTestId) {
+    return {
+        progressBar: dataTestId,
+        title: getDataTestId(dataTestId, 'title'),
+        subtitle: getDataTestId(dataTestId, 'subtitle'),
+        circleProgressBar: getDataTestId(dataTestId, 'circle-progress-bar'),
+        circleProgressValue: getDataTestId(dataTestId, 'circle-progress-value'),
+    };
+}
+
+export { getCircularProgressBarTestIds };

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

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

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

@@ -0,0 +1,5 @@
+import { TYPOGRAPHY_COLOR } from '../consts.js';
+
+const isTypographyColor = (color) => TYPOGRAPHY_COLOR.includes(color);
+
+export { isTypographyColor };

package/moderncssm/Component.d.ts

@@ -1,12 +1,27 @@
 /// <reference types="react" />
 import React from 'react';
 import { ElementType, ReactNode } from "react";
-type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
+import { ComponentSize } from "./types/component-size";
+import { TypographyColor } from "./types/typography-color";
 type CircularProgressBarProps = {
     /**
      * Уровень прогресса, %
      */
-    value: number;
+    value: number | {
+        /**
+         * Время таймера в секундах
+         * Минимальное значение 0
+         * Максимальное значение 3600
+         */
+        timer: number;
+        /**
+         * Направлние отсчета таймера
+         * forward: считаем от 0 до указанного значения
+         * backward: считаем от указанного значения до 0
+         * @default backward
+         */
+        counting?: 'forward' | 'backward';
+    };
     /**
      * Дополнительный класс
      */
@@ -19,6 +34,16 @@ type CircularProgressBarProps = {
      * Цвет контента
      */
     contentColor?: TypographyColor | string;
+    /**
+     * Цвет заголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    titleColor?: TypographyColor | string;
+    /**
+     * Цвет подзаголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    subtitleColor?: TypographyColor | string;
     /**
      * Дополнительный текст
      */
@@ -37,9 +62,10 @@ type CircularProgressBarProps = {
     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 соответственно
+     * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64, 80, 128, 144 соответственно
+     * @default 64
      */
-    size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
+    size?: ComponentSize;
     /**
      * Наличие желоба
      */
@@ -103,9 +129,14 @@ type CircularProgressBarProps = {
      * Цвет желоба
      */
     strokeColor?: string;
+    /**
+     * Направление заполнения круга
+     * @default desc
+     */
+    directionType?: 'asc' | 'desc';
 };
 /**
  * Компонент круглого прогресс бара.
  */
 declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { TypographyColor, CircularProgressBarProps, CircularProgressBar };
+export { CircularProgressBarProps, CircularProgressBar };

package/moderncssm/Component.js

@@ -1,13 +1,30 @@
 import React, { useMemo } from 'react';
 import cn from 'classnames';
+import { isObject, getDataTestId } from '@alfalab/core-components-shared/moderncssm';
 import { Text, TitleMobile } from '@alfalab/core-components-typography/moderncssm';
-import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
+import { isTypographyColor } from './utils/is-typography-color.js';
+import { MIN_TIMER_VALUE, MAX_TIMER_VALUE, STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, MAX_PROGRESS_VALUE, VIEW_TITLE, VIEW_TEXT } from './consts.js';
+import { useTimer } from './use-timer.js';
 import styles from './index.module.css';
 
+/* eslint-disable complexity */
 /**
  * Компонент круглого прогресс бара.
  */
-const CircularProgressBar = ({ value, view = 'positive', size = 64, className, dataTestId, title = value ? value.toString() : '0', titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, progressStrokeColor, circleColor, strokeColor, }) => {
+const CircularProgressBar = ({ value: valueFromProps, view = 'positive', size = 64, className, dataTestId, title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`, titleComplete, subtitle, contentColor = 'secondary', subtitleComplete, stroke = true, fillComplete, icon: Icon, iconComplete: IconComplete, completeTextColor, completeIconColor = 'tertiary', direction = 'clockwise', height, children, progressStrokeColor, circleColor, strokeColor, directionType = 'asc', titleColor, subtitleColor, }) => {
+    const isTimer = isObject(valueFromProps);
+    const [timerValue, timerTitle] = useTimer(isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1, isTimer, isTimer ? valueFromProps.counting ?? 'backward' : 'backward');
+    let value;
+    let title;
+    if (isTimer) {
+        value = timerValue;
+        title = timerTitle;
+    }
+    else {
+        value = valueFromProps;
+        title = titleFromProps;
+    }
+    value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;
     const memorized = useMemo(() => {
         const strokeWidth = STROKE[size];
         const maxProgress = 100;
@@ -28,7 +45,7 @@ const CircularProgressBar = ({ value, view = 'positive', size = 64, className, d
             strokeDasharray,
             strokeDashoffset,
         };
-    }, [value, size]);
+    }, [size, value]);
     const isComplete = value === 100;
     const isCompleteTextColor = isComplete && completeTextColor;
     const titleContent = titleComplete && isComplete ? titleComplete : title;
@@ -37,14 +54,34 @@ const CircularProgressBar = ({ value, view = 'positive', size = 64, className, d
     const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
         ? contentColor
         : undefined;
-    const renderTitleString = () => SIZES[size] > 64 ? (React.createElement(TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: {
-            ...(!typographyContentColor && { color: contentColor }),
-        } }, titleContent)) : (React.createElement(Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
+    const getTextColor = (color) => {
+        if (isCompleteTextColor) {
+            return completeTextColor;
+        }
+        if (color) {
+            return isTypographyColor(color) ? color : undefined;
+        }
+        return typographyContentColor;
+    };
+    const getTextStyleColor = (color) => {
+        if (color) {
+            if (!isTypographyColor(color)) {
+                return { color };
+            }
+            return {};
+        }
+        return {
             ...(!typographyContentColor && { color: contentColor }),
-        } }, titleContent));
+        };
+    };
+    const renderTitleString = () => SIZES[size] > 64 ? (React.createElement(TitleMobile, { className: cn(styles.typography, styles.title), color: getTextColor(titleColor), tag: 'div', font: 'system', view: VIEW_TITLE[size], style: {
+            ...getTextStyleColor(titleColor),
+        }, dataTestId: getDataTestId(dataTestId, 'title') }, titleContent)) : (React.createElement(Text, { className: styles.title, color: getTextColor(titleColor), tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
+            ...getTextStyleColor(titleColor),
+        }, dataTestId: getDataTestId(dataTestId, 'title') }, titleContent));
     const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
-    const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
-            ...(!typographyContentColor && { color: contentColor }),
+    const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Text, { tag: 'div', className: styles.subtitle, color: getTextColor(subtitleColor), view: 'primary-small', dataTestId: getDataTestId(dataTestId, 'subtitle'), style: {
+            ...getTextStyleColor(subtitleColor),
         } }, subtitleContent)) : (subtitleContent);
     const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.tertiary, styles[`icon-${contentColor}`], {
             [styles[`icon-${completeIconColor}`]]: completeIconColor,
@@ -63,12 +100,12 @@ const CircularProgressBar = ({ value, view = 'positive', size = 64, className, d
                     [styles.stroke]: !stroke,
                 }), style: {
                     ...(strokeColor && stroke && { stroke: strokeColor }),
-                }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
+                }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], "data-test-id": getDataTestId(dataTestId, 'circle-progress-bar') }),
             React.createElement("circle", { className: cn(styles.progressCircle, styles[view], styles[SIZE_TO_CLASSNAME_MAP[size]]), style: {
                     ...(progressStrokeColor && { stroke: progressStrokeColor }),
                 }, cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
                     ? -memorized.strokeDashoffset
-                    : memorized.strokeDashoffset, transform: `rotate(${-90} ${memorized.center} ${memorized.center})` })),
+                    : memorized.strokeDashoffset, transform: `rotate(${-90} ${memorized.center} ${memorized.center})`, "data-test-id": getDataTestId(dataTestId, 'circle-progress-value') })),
         React.createElement("div", { className: cn(styles.labelWrapper, {
                 [styles.label]: Icon || IconComplete,
             }) }, children || renderContent())));

package/moderncssm/consts.d.ts

@@ -9,6 +9,7 @@ declare const SIZES: {
     48: number;
     64: number;
     80: number;
+    96: number;
     128: number;
     144: number;
 };
@@ -23,6 +24,7 @@ declare const STROKE: {
     48: number;
     64: number;
     80: number;
+    96: number;
     128: number;
     144: number;
 };
@@ -37,6 +39,7 @@ declare const VIEW_TITLE: {
     readonly 48: "small";
     readonly 64: "small";
     readonly 80: "xsmall";
+    readonly 96: "xsmall";
     readonly 128: "medium";
     readonly 144: "medium";
 };
@@ -51,6 +54,7 @@ declare const VIEW_TEXT: {
     readonly 48: "secondary-small";
     readonly 64: "secondary-large";
     readonly 80: "secondary-large";
+    readonly 96: "secondary-large";
     readonly 128: "secondary-large";
     readonly 144: "secondary-large";
 };
@@ -66,7 +70,11 @@ declare const SIZE_TO_CLASSNAME_MAP: {
     48: string;
     64: string;
     80: string;
+    96: string;
     128: string;
     144: string;
 };
-export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP };
+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 };

package/moderncssm/consts.js

@@ -9,6 +9,7 @@ const SIZES = {
     48: 48,
     64: 64,
     80: 80,
+    96: 96,
     128: 128,
     144: 144,
 };
@@ -23,6 +24,7 @@ const STROKE = {
     48: 4,
     64: 6,
     80: 8,
+    96: 8,
     128: 10,
     144: 12,
 };
@@ -37,6 +39,7 @@ const VIEW_TITLE = {
     48: 'small',
     64: 'small',
     80: 'xsmall',
+    96: 'xsmall',
     128: 'medium',
     144: 'medium',
 };
@@ -51,6 +54,7 @@ const VIEW_TEXT = {
     48: 'secondary-small',
     64: 'secondary-large',
     80: 'secondary-large',
+    96: 'secondary-large',
     128: 'secondary-large',
     144: 'secondary-large',
 };
@@ -66,8 +70,12 @@ const SIZE_TO_CLASSNAME_MAP = {
     48: 'size-48',
     64: 'size-64',
     80: 'size-80',
+    96: 'size-96',
     128: 'size-128',
     144: 'size-144',
 };
+const MAX_PROGRESS_VALUE = 100;
+const MIN_TIMER_VALUE = 0;
+const MAX_TIMER_VALUE = 3599;
 
-export { SIZES, SIZE_TO_CLASSNAME_MAP, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };
+export { MAX_PROGRESS_VALUE, MAX_TIMER_VALUE, MIN_TIMER_VALUE, SIZES, SIZE_TO_CLASSNAME_MAP, STROKE, TYPOGRAPHY_COLOR, VIEW_TEXT, VIEW_TITLE };

package/moderncssm/index.d.ts

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

package/moderncssm/index.module.css

@@ -96,6 +96,19 @@
         max-height: 32px;
     }
 
+.size-96 {
+    width: 96px;
+    height: 96px
+}
+
+.size-96 .labelWrapper {
+        max-width: 64px;
+    }
+
+.size-96 .title {
+        max-height: 20px;
+    }
+
 .size-80 {
     width: 80px;
     height: 80px
@@ -189,6 +202,11 @@
         max-height: 64px;
     }
 
+.iconWrapper.size-96 {
+        max-width: 48px;
+        max-height: 48px;
+    }
+
 .iconWrapper.size-80 {
         max-width: 48px;
         max-height: 48px;

package/moderncssm/shared/index.d.ts

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

package/moderncssm/shared/index.js

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

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

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

package/moderncssm/types/component-size.js

@@ -0,0 +1 @@
+

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

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

package/moderncssm/types/typography-color.js

@@ -0,0 +1 @@
+

package/moderncssm/use-timer.d.ts

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

package/moderncssm/use-timer.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import { noop } from '@alfalab/core-components-shared/moderncssm';
+
+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) {
+    const [passedTime, setPassedTime] = useState(0);
+    const isCompleted = passedTime === time;
+    const persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);
+    useEffect(() => {
+        if (!active || isCompleted) {
+            return noop;
+        }
+        const timer = setInterval(() => {
+            setPassedTime((prevPassed) => prevPassed + step);
+        }, interval);
+        return () => clearInterval(timer);
+    }, [interval, isCompleted, active, step]);
+    return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];
+}
+
+export { useTimer };