@alfalab/core-components-circular-progress-bar 3.1.0 → 3.2.0

package/Component.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ElementType, ReactNode } from "react";
+type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
 type CircularProgressBarProps = {
     /**
      * Уровень прогресса, %
@@ -17,7 +18,7 @@ type CircularProgressBarProps = {
     /**
      * Цвет контента
      */
-    contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
+    contentColor?: TypographyColor | string;
     /**
      * Дополнительный текст
      */
@@ -86,12 +87,20 @@ type CircularProgressBarProps = {
      */
     dataTestId?: string;
     /**
-     * Дочерние элементы.
+     * Дочерние элементы
      */
     children?: ReactNode;
+    /**
+     * Цвет прогресса
+     */
+    progressStrokeColor?: string;
+    /**
+     * Цвет заливки внутри круга
+     */
+    circleColor?: string;
 };
 /**
  * Компонент круглого прогресс бара.
  */
 declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { CircularProgressBarProps, CircularProgressBar };
+export { TypographyColor, CircularProgressBarProps, CircularProgressBar };

package/Component.js

@@ -6,59 +6,28 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsTypography = require('@alfalab/core-components-typography');
+var consts = require('./consts.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"circular-progress-bar__component_xzi53","svg":"circular-progress-bar__svg_xzi53","title":"circular-progress-bar__title_xzi53","subtitle":"circular-progress-bar__subtitle_xzi53","labelWrapper":"circular-progress-bar__labelWrapper_xzi53","label":"circular-progress-bar__label_xzi53","typography":"circular-progress-bar__typography_xzi53","xxl":"circular-progress-bar__xxl_xzi53","xl":"circular-progress-bar__xl_xzi53","l":"circular-progress-bar__l_xzi53","m":"circular-progress-bar__m_xzi53","s":"circular-progress-bar__s_xzi53","xs":"circular-progress-bar__xs_xzi53","backgroundCircle":"circular-progress-bar__backgroundCircle_xzi53","progressCircle":"circular-progress-bar__progressCircle_xzi53","positive":"circular-progress-bar__positive_xzi53","negative":"circular-progress-bar__negative_xzi53","stroke":"circular-progress-bar__stroke_xzi53","bg-positive":"circular-progress-bar__bg-positive_xzi53","bg-negative":"circular-progress-bar__bg-negative_xzi53","iconWrapper":"circular-progress-bar__iconWrapper_xzi53","icon-tertiary":"circular-progress-bar__icon-tertiary_xzi53","icon-positive":"circular-progress-bar__icon-positive_xzi53","icon-negative":"circular-progress-bar__icon-negative_xzi53","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_xzi53","icon-primary":"circular-progress-bar__icon-primary_xzi53","icon-secondary":"circular-progress-bar__icon-secondary_xzi53","icon":"circular-progress-bar__icon_xzi53"};
+var styles = {"component":"circular-progress-bar__component_kekau","bg-positive":"circular-progress-bar__bg-positive_kekau","bg-negative":"circular-progress-bar__bg-negative_kekau","svg":"circular-progress-bar__svg_kekau","title":"circular-progress-bar__title_kekau","subtitle":"circular-progress-bar__subtitle_kekau","labelWrapper":"circular-progress-bar__labelWrapper_kekau","label":"circular-progress-bar__label_kekau","typography":"circular-progress-bar__typography_kekau","xxl":"circular-progress-bar__xxl_kekau","xl":"circular-progress-bar__xl_kekau","l":"circular-progress-bar__l_kekau","m":"circular-progress-bar__m_kekau","s":"circular-progress-bar__s_kekau","xs":"circular-progress-bar__xs_kekau","backgroundCircle":"circular-progress-bar__backgroundCircle_kekau","progressCircle":"circular-progress-bar__progressCircle_kekau","positive":"circular-progress-bar__positive_kekau","negative":"circular-progress-bar__negative_kekau","stroke":"circular-progress-bar__stroke_kekau","iconWrapper":"circular-progress-bar__iconWrapper_kekau","icon-tertiary":"circular-progress-bar__icon-tertiary_kekau","icon-positive":"circular-progress-bar__icon-positive_kekau","icon-negative":"circular-progress-bar__icon-negative_kekau","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_kekau","icon-primary":"circular-progress-bar__icon-primary_kekau","icon-secondary":"circular-progress-bar__icon-secondary_kekau","icon":"circular-progress-bar__icon_kekau"};
 require('./index.css')
 
-var SIZES = {
-    xs: 24,
-    s: 48,
-    m: 64,
-    l: 80,
-    xl: 128,
-    xxl: 144,
-};
-var STROKE = {
-    xs: 4,
-    s: 4,
-    m: 6,
-    l: 8,
-    xl: 10,
-    xxl: 12,
-};
-var VIEW_TITLE = {
-    xs: 'small',
-    s: 'small',
-    m: 'small',
-    l: 'xsmall',
-    xl: 'medium',
-    xxl: 'medium',
-};
-var VIEW_TEXT = {
-    xs: 'secondary-small',
-    s: 'secondary-small',
-    m: 'secondary-large',
-    l: 'secondary-large',
-    xl: 'secondary-large',
-    xxl: 'secondary-large',
-};
 /**
  * Компонент круглого прогресс бара.
  */
 var CircularProgressBar = function (_a) {
     var _b, _c, _d;
-    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children;
+    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor;
     var memorized = React.useMemo(function () {
-        var strokeWidth = STROKE[size];
+        var strokeWidth = consts.STROKE[size];
         var maxProgress = 100;
         var minProgress = 0;
-        var widthSVG = SIZES[size];
-        var heightSVG = SIZES[size];
+        var widthSVG = consts.SIZES[size];
+        var heightSVG = consts.SIZES[size];
         var center = widthSVG / 2;
         var radius = center - strokeWidth / 2;
         var circumference = Math.PI * radius * 2;
@@ -79,12 +48,15 @@ var CircularProgressBar = function (_a) {
     var titleContent = titleComplete && isComplete ? titleComplete : title;
     var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
     var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
+    var typographyContentColor = consts.TYPOGRAPHY_COLOR.includes(contentColor)
+        ? contentColor
+        : undefined;
     var renderTitleString = function () {
-        return SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default.default(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent));
+        return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default.default(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
     };
     var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
     var renderSubTitle = function () {
-        return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
+        return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
     };
     var renderIcon = function () {
         var _a;
@@ -94,17 +66,17 @@ var CircularProgressBar = function (_a) {
     };
     var renderContent = function () {
         return Icon || (IconComplete && isComplete) ? (renderIcon()) : (React__default.default.createElement(React__default.default.Fragment, null,
-            SIZES[size] > 24 && renderTitle(),
-            SIZES[size] > 64 && renderSubTitle()));
+            consts.SIZES[size] > 24 && renderTitle(),
+            consts.SIZES[size] > 64 && renderSubTitle()));
     };
-    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, styles[size], className), style: tslib.__assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, styles[size], className, (_b = {},
+            _b[styles["bg-".concat(view)]] = fillComplete && isComplete,
+            _b)), style: tslib.__assign(tslib.__assign({}, (height && { height: height, width: height })), (circleColor && { backgroundColor: circleColor })), "data-test-id": dataTestId },
         React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
-            React__default.default.createElement("circle", { className: cn__default.default(styles.backgroundCircle, styles[size], (_b = {},
-                    _b[styles.stroke] = !stroke,
-                    _b)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
-            React__default.default.createElement("circle", { className: cn__default.default(styles.progressCircle, styles[view], styles[size], (_c = {},
-                    _c[styles["bg-".concat(view)]] = fillComplete && isComplete,
-                    _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
+            React__default.default.createElement("circle", { className: cn__default.default(styles.backgroundCircle, styles[size], (_c = {},
+                    _c[styles.stroke] = !stroke,
+                    _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
+            React__default.default.createElement("circle", { className: cn__default.default(styles.progressCircle, styles[view], styles[size]), style: tslib.__assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
                     ? -memorized.strokeDashoffset
                     : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
         React__default.default.createElement("div", { className: cn__default.default(styles.labelWrapper, (_d = {},

package/consts.d.ts

@@ -0,0 +1,34 @@
+declare const SIZES: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};
+declare const STROKE: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};
+declare const VIEW_TITLE: {
+    readonly xs: "small";
+    readonly s: "small";
+    readonly m: "small";
+    readonly l: "xsmall";
+    readonly xl: "medium";
+    readonly xxl: "medium";
+};
+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";
+};
+declare const TYPOGRAPHY_COLOR: string[];
+export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR };

package/consts.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SIZES = {
+    xs: 24,
+    s: 48,
+    m: 64,
+    l: 80,
+    xl: 128,
+    xxl: 144,
+};
+var STROKE = {
+    xs: 4,
+    s: 4,
+    m: 6,
+    l: 8,
+    xl: 10,
+    xxl: 12,
+};
+var VIEW_TITLE = {
+    xs: 'small',
+    s: 'small',
+    m: 'small',
+    l: 'xsmall',
+    xl: 'medium',
+    xxl: 'medium',
+};
+var VIEW_TEXT = {
+    xs: 'secondary-small',
+    s: 'secondary-small',
+    m: 'secondary-large',
+    l: 'secondary-large',
+    xl: 'secondary-large',
+    xxl: 'secondary-large',
+};
+var TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
+
+exports.SIZES = SIZES;
+exports.STROKE = STROKE;
+exports.TYPOGRAPHY_COLOR = TYPOGRAPHY_COLOR;
+exports.VIEW_TEXT = VIEW_TEXT;
+exports.VIEW_TITLE = VIEW_TITLE;

package/cssm/Component.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ElementType, ReactNode } from "react";
+type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
 type CircularProgressBarProps = {
     /**
      * Уровень прогресса, %
@@ -17,7 +18,7 @@ type CircularProgressBarProps = {
     /**
      * Цвет контента
      */
-    contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
+    contentColor?: TypographyColor | string;
     /**
      * Дополнительный текст
      */
@@ -86,12 +87,20 @@ type CircularProgressBarProps = {
      */
     dataTestId?: string;
     /**
-     * Дочерние элементы.
+     * Дочерние элементы
      */
     children?: ReactNode;
+    /**
+     * Цвет прогресса
+     */
+    progressStrokeColor?: string;
+    /**
+     * Цвет заливки внутри круга
+     */
+    circleColor?: string;
 };
 /**
  * Компонент круглого прогресс бара.
  */
 declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { CircularProgressBarProps, CircularProgressBar };
+export { TypographyColor, CircularProgressBarProps, CircularProgressBar };

package/cssm/Component.js

@@ -6,6 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
+var consts = require('./consts.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -14,50 +15,18 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-var SIZES = {
-    xs: 24,
-    s: 48,
-    m: 64,
-    l: 80,
-    xl: 128,
-    xxl: 144,
-};
-var STROKE = {
-    xs: 4,
-    s: 4,
-    m: 6,
-    l: 8,
-    xl: 10,
-    xxl: 12,
-};
-var VIEW_TITLE = {
-    xs: 'small',
-    s: 'small',
-    m: 'small',
-    l: 'xsmall',
-    xl: 'medium',
-    xxl: 'medium',
-};
-var VIEW_TEXT = {
-    xs: 'secondary-small',
-    s: 'secondary-small',
-    m: 'secondary-large',
-    l: 'secondary-large',
-    xl: 'secondary-large',
-    xxl: 'secondary-large',
-};
 /**
  * Компонент круглого прогресс бара.
  */
 var CircularProgressBar = function (_a) {
     var _b, _c, _d;
-    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children;
+    var value = _a.value, _e = _a.view, view = _e === void 0 ? 'positive' : _e, _f = _a.size, size = _f === void 0 ? 'm' : _f, className = _a.className, dataTestId = _a.dataTestId, _g = _a.title, title = _g === void 0 ? value ? value.toString() : '0' : _g, titleComplete = _a.titleComplete, subtitle = _a.subtitle, _h = _a.contentColor, contentColor = _h === void 0 ? 'secondary' : _h, subtitleComplete = _a.subtitleComplete, _j = _a.stroke, stroke = _j === void 0 ? true : _j, fillComplete = _a.fillComplete, Icon = _a.icon, IconComplete = _a.iconComplete, completeTextColor = _a.completeTextColor, _k = _a.completeIconColor, completeIconColor = _k === void 0 ? 'tertiary' : _k, _l = _a.direction, direction = _l === void 0 ? 'clockwise' : _l, height = _a.height, children = _a.children, progressStrokeColor = _a.progressStrokeColor, circleColor = _a.circleColor;
     var memorized = React.useMemo(function () {
-        var strokeWidth = STROKE[size];
+        var strokeWidth = consts.STROKE[size];
         var maxProgress = 100;
         var minProgress = 0;
-        var widthSVG = SIZES[size];
-        var heightSVG = SIZES[size];
+        var widthSVG = consts.SIZES[size];
+        var heightSVG = consts.SIZES[size];
         var center = widthSVG / 2;
         var radius = center - strokeWidth / 2;
         var circumference = Math.PI * radius * 2;
@@ -78,12 +47,15 @@ var CircularProgressBar = function (_a) {
     var titleContent = titleComplete && isComplete ? titleComplete : title;
     var subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
     var IconComponent = IconComplete && isComplete ? IconComplete : Icon;
+    var typographyContentColor = consts.TYPOGRAPHY_COLOR.includes(contentColor)
+        ? contentColor
+        : undefined;
     var renderTitleString = function () {
-        return SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default.default(styles__default.default.typography, styles__default.default.title), color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size] }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles__default.default.title, color: isCompleteTextColor ? completeTextColor : contentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size] }, titleContent));
+        return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default.default(styles__default.default.typography, styles__default.default.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles__default.default.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
     };
     var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
     var renderSubTitle = function () {
-        return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default.default.subtitle, color: isCompleteTextColor ? completeTextColor : contentColor, view: 'primary-small' }, subtitleContent)) : (subtitleContent);
+        return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default.default.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
     };
     var renderIcon = function () {
         var _a;
@@ -93,17 +65,17 @@ var CircularProgressBar = function (_a) {
     };
     var renderContent = function () {
         return Icon || (IconComplete && isComplete) ? (renderIcon()) : (React__default.default.createElement(React__default.default.Fragment, null,
-            SIZES[size] > 24 && renderTitle(),
-            SIZES[size] > 64 && renderSubTitle()));
+            consts.SIZES[size] > 24 && renderTitle(),
+            consts.SIZES[size] > 64 && renderSubTitle()));
     };
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[size], className), style: tslib.__assign({}, (height && { height: height, width: height })), "data-test-id": dataTestId },
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default[size], className, (_b = {},
+            _b[styles__default.default["bg-".concat(view)]] = fillComplete && isComplete,
+            _b)), style: tslib.__assign(tslib.__assign({}, (height && { height: height, width: height })), (circleColor && { backgroundColor: circleColor })), "data-test-id": dataTestId },
         React__default.default.createElement("svg", { viewBox: "0 0 ".concat(memorized.widthSVG, " ").concat(memorized.heightSVG), className: styles__default.default.svg, xmlns: 'http://www.w3.org/2000/svg' },
-            React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.backgroundCircle, styles__default.default[size], (_b = {},
-                    _b[styles__default.default.stroke] = !stroke,
-                    _b)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size] }),
-            React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.progressCircle, styles__default.default[view], styles__default.default[size], (_c = {},
-                    _c[styles__default.default["bg-".concat(view)]] = fillComplete && isComplete,
-                    _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
+            React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.backgroundCircle, styles__default.default[size], (_c = {},
+                    _c[styles__default.default.stroke] = !stroke,
+                    _c)), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size] }),
+            React__default.default.createElement("circle", { className: cn__default.default(styles__default.default.progressCircle, styles__default.default[view], styles__default.default[size]), style: tslib.__assign({}, (progressStrokeColor && { stroke: progressStrokeColor })), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeWidth: consts.STROKE[size], strokeDasharray: memorized.strokeDasharray, strokeDashoffset: direction === 'counter-clockwise'
                     ? -memorized.strokeDashoffset
                     : memorized.strokeDashoffset, transform: "rotate(".concat(-90, " ").concat(memorized.center, " ").concat(memorized.center, ")") })),
         React__default.default.createElement("div", { className: cn__default.default(styles__default.default.labelWrapper, (_d = {},

package/cssm/consts.d.ts

@@ -0,0 +1,34 @@
+declare const SIZES: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};
+declare const STROKE: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};
+declare const VIEW_TITLE: {
+    readonly xs: "small";
+    readonly s: "small";
+    readonly m: "small";
+    readonly l: "xsmall";
+    readonly xl: "medium";
+    readonly xxl: "medium";
+};
+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";
+};
+declare const TYPOGRAPHY_COLOR: string[];
+export { SIZES, STROKE, VIEW_TITLE, VIEW_TEXT, TYPOGRAPHY_COLOR };

package/cssm/consts.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SIZES = {
+    xs: 24,
+    s: 48,
+    m: 64,
+    l: 80,
+    xl: 128,
+    xxl: 144,
+};
+var STROKE = {
+    xs: 4,
+    s: 4,
+    m: 6,
+    l: 8,
+    xl: 10,
+    xxl: 12,
+};
+var VIEW_TITLE = {
+    xs: 'small',
+    s: 'small',
+    m: 'small',
+    l: 'xsmall',
+    xl: 'medium',
+    xxl: 'medium',
+};
+var VIEW_TEXT = {
+    xs: 'secondary-small',
+    s: 'secondary-small',
+    m: 'secondary-large',
+    l: 'secondary-large',
+    xl: 'secondary-large',
+    xxl: 'secondary-large',
+};
+var TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];
+
+exports.SIZES = SIZES;
+exports.STROKE = STROKE;
+exports.TYPOGRAPHY_COLOR = TYPOGRAPHY_COLOR;
+exports.VIEW_TEXT = VIEW_TEXT;
+exports.VIEW_TITLE = VIEW_TITLE;

package/cssm/index.js

@@ -7,6 +7,7 @@ require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/core-components-typography/cssm');
+require('./consts.js');
 require('./index.module.css');
 
 

package/cssm/index.module.css

@@ -17,6 +17,7 @@
 
     /* Hard up */
 } :root {
+    --border-radius-pill: 99px;
 } :root {
 } :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -40,7 +41,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
-} .svg {
+    border-radius: var(--border-radius-pill)
+} .component.bg-positive {
+        background: var(--circular-progress-bar-positive-color);
+    } .component.bg-negative {
+        background: var(--circular-progress-bar-negative-color);
+    } .svg {
     display: block;
     width: 100%;
 } .title,
@@ -123,12 +129,8 @@
 } .backgroundCircle.stroke {
         stroke: transparent;
     } .progressCircle {
-    stroke-linecap: round
-} .progressCircle.bg-positive {
-        fill: var(--circular-progress-bar-positive-color);
-    } .progressCircle.bg-negative {
-        fill: var(--circular-progress-bar-negative-color);
-    } .iconWrapper {
+    stroke-linecap: round;
+} .iconWrapper {
     display: flex;
     align-items: center;
     justify-content: center

package/esm/Component.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ElementType, ReactNode } from "react";
+type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
 type CircularProgressBarProps = {
     /**
      * Уровень прогресса, %
@@ -17,7 +18,7 @@ type CircularProgressBarProps = {
     /**
      * Цвет контента
      */
-    contentColor?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
+    contentColor?: TypographyColor | string;
     /**
      * Дополнительный текст
      */
@@ -86,12 +87,20 @@ type CircularProgressBarProps = {
      */
     dataTestId?: string;
     /**
-     * Дочерние элементы.
+     * Дочерние элементы
      */
     children?: ReactNode;
+    /**
+     * Цвет прогресса
+     */
+    progressStrokeColor?: string;
+    /**
+     * Цвет заливки внутри круга
+     */
+    circleColor?: string;
 };
 /**
  * Компонент круглого прогресс бара.
  */
 declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { CircularProgressBarProps, CircularProgressBar };
+export { TypographyColor, CircularProgressBarProps, CircularProgressBar };