@alfalab/core-components-circular-progress-bar 2.3.4 → 2.4.3

package/dist/Component.d.ts

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-type CircularProgressBarProps = {
-    /**
-     * Уровень прогресса, %
-     */
-    value: number;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Основной текст
-     */
-    title?: ReactNode;
-    /**
-     * Дополнительный текст
-     */
-    subtitle?: ReactNode;
-    /**
-     * Цвет заполнения
-     */
-    view?: 'positive' | 'negative';
-    /**
-     * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
-     */
-    size?: 'l' | 'm' | 's';
-    /**
-     * Id компонента для тестов
-     */
-    dataTestId?: string;
-};
-/**
- * Компонент круглого прогресс бара.
- */
-declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { CircularProgressBarProps, CircularProgressBar };

package/dist/Component.js

@@ -1,57 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cn = require('classnames');
-var React = require('react');
-var coreComponentsTypography = require('@alfalab/core-components-typography');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var styles = {"component":"circular-progress-bar__component_17pfh","svg":"circular-progress-bar__svg_17pfh","title":"circular-progress-bar__title_17pfh","subtitle":"circular-progress-bar__subtitle_17pfh","l":"circular-progress-bar__l_17pfh","label":"circular-progress-bar__label_17pfh","m":"circular-progress-bar__m_17pfh","s":"circular-progress-bar__s_17pfh","backgroundCircle":"circular-progress-bar__backgroundCircle_17pfh","progressCircle":"circular-progress-bar__progressCircle_17pfh","positive":"circular-progress-bar__positive_17pfh","negative":"circular-progress-bar__negative_17pfh"};
-require('./index.css')
-
-var SIZES = {
-    s: 96,
-    m: 120,
-    l: 144,
-};
-/**
- * Компонент круглого прогресс бара.
- */
-var CircularProgressBar = function (_a) {
-    var value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, className = _a.className, dataTestId = _a.dataTestId, _d = _a.title, title = _d === void 0 ? value.toString() : _d, subtitle = _a.subtitle, children = _a.children;
-    var memorized = React.useMemo(function () {
-        var strokeWidth = 8;
-        var maxProgress = 100;
-        var minProgress = 0;
-        var width = SIZES[size];
-        var height = SIZES[size];
-        var center = width / 2;
-        var radius = center - strokeWidth / 2;
-        var circumference = Math.PI * radius * 2;
-        var progress = Math.min(Math.max(value, minProgress), maxProgress);
-        var strokeDasharray = circumference.toFixed(3);
-        var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
-        return {
-            width: width,
-            height: height,
-            center: center,
-            radius: radius,
-            strokeDasharray: strokeDasharray,
-            strokeDashoffset: strokeDashoffset,
-        };
-    }, [value, size]);
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[size], className), "data-test-id": dataTestId },
-        React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.width + " " + memorized.height, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
-            React__default['default'].createElement("circle", { className: styles.backgroundCircle, cx: memorized.center, cy: memorized.center, r: memorized.radius }),
-            React__default['default'].createElement("circle", { className: cn__default['default'](styles.progressCircle, styles[view]), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeDasharray: memorized.strokeDasharray, strokeDashoffset: memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
-        React__default['default'].createElement("div", { className: styles.label }, children || (React__default['default'].createElement(React__default['default'].Fragment, null,
-            typeof title === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Title, { className: styles.title, color: 'secondary', tag: 'div', view: size === 'l' ? 'small' : 'xsmall' }, title)) : (title),
-            typeof subtitle === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles.subtitle, color: 'primary', view: 'primary-small' }, subtitle)) : (subtitle))))));
-};
-
-exports.CircularProgressBar = CircularProgressBar;

package/dist/cssm/Component.d.ts

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-type CircularProgressBarProps = {
-    /**
-     * Уровень прогресса, %
-     */
-    value: number;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Основной текст
-     */
-    title?: ReactNode;
-    /**
-     * Дополнительный текст
-     */
-    subtitle?: ReactNode;
-    /**
-     * Цвет заполнения
-     */
-    view?: 'positive' | 'negative';
-    /**
-     * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
-     */
-    size?: 'l' | 'm' | 's';
-    /**
-     * Id компонента для тестов
-     */
-    dataTestId?: string;
-};
-/**
- * Компонент круглого прогресс бара.
- */
-declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { CircularProgressBarProps, CircularProgressBar };

package/dist/cssm/Component.js

@@ -1,56 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cn = require('classnames');
-var React = require('react');
-var coreComponentsTypography = require('@alfalab/core-components-typography/dist/cssm');
-var styles = require('./index.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-var SIZES = {
-    s: 96,
-    m: 120,
-    l: 144,
-};
-/**
- * Компонент круглого прогресс бара.
- */
-var CircularProgressBar = function (_a) {
-    var value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, className = _a.className, dataTestId = _a.dataTestId, _d = _a.title, title = _d === void 0 ? value.toString() : _d, subtitle = _a.subtitle, children = _a.children;
-    var memorized = React.useMemo(function () {
-        var strokeWidth = 8;
-        var maxProgress = 100;
-        var minProgress = 0;
-        var width = SIZES[size];
-        var height = SIZES[size];
-        var center = width / 2;
-        var radius = center - strokeWidth / 2;
-        var circumference = Math.PI * radius * 2;
-        var progress = Math.min(Math.max(value, minProgress), maxProgress);
-        var strokeDasharray = circumference.toFixed(3);
-        var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
-        return {
-            width: width,
-            height: height,
-            center: center,
-            radius: radius,
-            strokeDasharray: strokeDasharray,
-            strokeDashoffset: strokeDashoffset,
-        };
-    }, [value, size]);
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][size], className), "data-test-id": dataTestId },
-        React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.width + " " + memorized.height, className: styles__default['default'].svg, xmlns: 'http://www.w3.org/2000/svg' },
-            React__default['default'].createElement("circle", { className: styles__default['default'].backgroundCircle, cx: memorized.center, cy: memorized.center, r: memorized.radius }),
-            React__default['default'].createElement("circle", { className: cn__default['default'](styles__default['default'].progressCircle, styles__default['default'][view]), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeDasharray: memorized.strokeDasharray, strokeDashoffset: memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
-        React__default['default'].createElement("div", { className: styles__default['default'].label }, children || (React__default['default'].createElement(React__default['default'].Fragment, null,
-            typeof title === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Title, { className: styles__default['default'].title, color: 'secondary', tag: 'div', view: size === 'l' ? 'small' : 'xsmall' }, title)) : (title),
-            typeof subtitle === 'string' ? (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default['default'].subtitle, color: 'primary', view: 'primary-small' }, subtitle)) : (subtitle))))));
-};
-
-exports.CircularProgressBar = CircularProgressBar;

package/dist/cssm/index.module.css

@@ -1,106 +0,0 @@
-:root {
-    --color-light-bg-tertiary: #e7e9eb;
-    --color-light-graphic-negative: #f15045;
-    --color-light-graphic-positive: #2fc26e;
-}
-
-:root {
-    /* bg */
-    --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
-
-    /* positive */
-    --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
-
-    /* negative */
-    --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
-}
-
-.component {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.svg {
-    display: block;
-    width: 100%;
-}
-
-.title,
-.subtitle {
-    overflow: hidden;
-    word-break: break-word;
-}
-
-.subtitle {
-    max-height: 40px;
-}
-
-.l {
-    width: 144px;
-    height: 144px
-}
-
-.l .label {
-        max-width: 120px;
-    }
-
-.l .title {
-        max-height: 32px;
-    }
-
-.m {
-    width: 120px;
-    height: 120px
-}
-
-.m .label {
-        max-width: 96px;
-    }
-
-.m .title {
-        max-height: 24px;
-    }
-
-.s {
-    width: 96px;
-    height: 96px
-}
-
-.s .label {
-        max-width: 72px;
-    }
-
-.s .title {
-        max-height: 24px;
-    }
-
-.label {
-    text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    transform: translate(-50%, -50%);
-}
-
-.backgroundCircle,
-.progressCircle {
-    width: 100%;
-    height: 100%;
-    fill: transparent;
-    stroke-width: 8;
-}
-
-.positive {
-    stroke: var(--circular-progress-bar-positive-color);
-}
-
-.negative {
-    stroke: var(--circular-progress-bar-negative-color);
-}
-
-.backgroundCircle {
-    stroke: var(--circular-progress-bar-bg-color);
-}

package/dist/esm/Component.d.ts

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-type CircularProgressBarProps = {
-    /**
-     * Уровень прогресса, %
-     */
-    value: number;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Основной текст
-     */
-    title?: ReactNode;
-    /**
-     * Дополнительный текст
-     */
-    subtitle?: ReactNode;
-    /**
-     * Цвет заполнения
-     */
-    view?: 'positive' | 'negative';
-    /**
-     * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
-     */
-    size?: 'l' | 'm' | 's';
-    /**
-     * Id компонента для тестов
-     */
-    dataTestId?: string;
-};
-/**
- * Компонент круглого прогресс бара.
- */
-declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { CircularProgressBarProps, CircularProgressBar };

package/dist/esm/Component.js

@@ -1,48 +0,0 @@
-import cn from 'classnames';
-import React, { useMemo } from 'react';
-import { Typography } from '@alfalab/core-components-typography/dist/esm';
-
-var styles = {"component":"circular-progress-bar__component_17pfh","svg":"circular-progress-bar__svg_17pfh","title":"circular-progress-bar__title_17pfh","subtitle":"circular-progress-bar__subtitle_17pfh","l":"circular-progress-bar__l_17pfh","label":"circular-progress-bar__label_17pfh","m":"circular-progress-bar__m_17pfh","s":"circular-progress-bar__s_17pfh","backgroundCircle":"circular-progress-bar__backgroundCircle_17pfh","progressCircle":"circular-progress-bar__progressCircle_17pfh","positive":"circular-progress-bar__positive_17pfh","negative":"circular-progress-bar__negative_17pfh"};
-require('./index.css')
-
-var SIZES = {
-    s: 96,
-    m: 120,
-    l: 144,
-};
-/**
- * Компонент круглого прогресс бара.
- */
-var CircularProgressBar = function (_a) {
-    var value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, className = _a.className, dataTestId = _a.dataTestId, _d = _a.title, title = _d === void 0 ? value.toString() : _d, subtitle = _a.subtitle, children = _a.children;
-    var memorized = useMemo(function () {
-        var strokeWidth = 8;
-        var maxProgress = 100;
-        var minProgress = 0;
-        var width = SIZES[size];
-        var height = SIZES[size];
-        var center = width / 2;
-        var radius = center - strokeWidth / 2;
-        var circumference = Math.PI * radius * 2;
-        var progress = Math.min(Math.max(value, minProgress), maxProgress);
-        var strokeDasharray = circumference.toFixed(3);
-        var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
-        return {
-            width: width,
-            height: height,
-            center: center,
-            radius: radius,
-            strokeDasharray: strokeDasharray,
-            strokeDashoffset: strokeDashoffset,
-        };
-    }, [value, size]);
-    return (React.createElement("div", { className: cn(styles.component, styles[size], className), "data-test-id": dataTestId },
-        React.createElement("svg", { viewBox: "0 0 " + memorized.width + " " + memorized.height, className: styles.svg, xmlns: 'http://www.w3.org/2000/svg' },
-            React.createElement("circle", { className: styles.backgroundCircle, cx: memorized.center, cy: memorized.center, r: memorized.radius }),
-            React.createElement("circle", { className: cn(styles.progressCircle, styles[view]), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeDasharray: memorized.strokeDasharray, strokeDashoffset: memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
-        React.createElement("div", { className: styles.label }, children || (React.createElement(React.Fragment, null,
-            typeof title === 'string' ? (React.createElement(Typography.Title, { className: styles.title, color: 'secondary', tag: 'div', view: size === 'l' ? 'small' : 'xsmall' }, title)) : (title),
-            typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: 'primary', view: 'primary-small' }, subtitle)) : (subtitle))))));
-};
-
-export { CircularProgressBar };

package/dist/esm/index.css

@@ -1,107 +0,0 @@
-/* hash: 1jvf0 */
-:root {
-    --color-light-bg-tertiary: #e7e9eb;
-    --color-light-graphic-negative: #f15045;
-    --color-light-graphic-positive: #2fc26e;
-}
-
-:root {
-    /* bg */
-    --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
-
-    /* positive */
-    --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
-
-    /* negative */
-    --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
-}
-
-.circular-progress-bar__component_17pfh {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.circular-progress-bar__svg_17pfh {
-    display: block;
-    width: 100%;
-}
-
-.circular-progress-bar__title_17pfh,
-.circular-progress-bar__subtitle_17pfh {
-    overflow: hidden;
-    word-break: break-word;
-}
-
-.circular-progress-bar__subtitle_17pfh {
-    max-height: 40px;
-}
-
-.circular-progress-bar__l_17pfh {
-    width: 144px;
-    height: 144px
-}
-
-.circular-progress-bar__l_17pfh .circular-progress-bar__label_17pfh {
-        max-width: 120px;
-    }
-
-.circular-progress-bar__l_17pfh .circular-progress-bar__title_17pfh {
-        max-height: 32px;
-    }
-
-.circular-progress-bar__m_17pfh {
-    width: 120px;
-    height: 120px
-}
-
-.circular-progress-bar__m_17pfh .circular-progress-bar__label_17pfh {
-        max-width: 96px;
-    }
-
-.circular-progress-bar__m_17pfh .circular-progress-bar__title_17pfh {
-        max-height: 24px;
-    }
-
-.circular-progress-bar__s_17pfh {
-    width: 96px;
-    height: 96px
-}
-
-.circular-progress-bar__s_17pfh .circular-progress-bar__label_17pfh {
-        max-width: 72px;
-    }
-
-.circular-progress-bar__s_17pfh .circular-progress-bar__title_17pfh {
-        max-height: 24px;
-    }
-
-.circular-progress-bar__label_17pfh {
-    text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    transform: translate(-50%, -50%);
-}
-
-.circular-progress-bar__backgroundCircle_17pfh,
-.circular-progress-bar__progressCircle_17pfh {
-    width: 100%;
-    height: 100%;
-    fill: transparent;
-    stroke-width: 8;
-}
-
-.circular-progress-bar__positive_17pfh {
-    stroke: var(--circular-progress-bar-positive-color);
-}
-
-.circular-progress-bar__negative_17pfh {
-    stroke: var(--circular-progress-bar-negative-color);
-}
-
-.circular-progress-bar__backgroundCircle_17pfh {
-    stroke: var(--circular-progress-bar-bg-color);
-}

package/dist/index.css

@@ -1,107 +0,0 @@
-/* hash: 1jvf0 */
-:root {
-    --color-light-bg-tertiary: #e7e9eb;
-    --color-light-graphic-negative: #f15045;
-    --color-light-graphic-positive: #2fc26e;
-}
-
-:root {
-    /* bg */
-    --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
-
-    /* positive */
-    --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
-
-    /* negative */
-    --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
-}
-
-.circular-progress-bar__component_17pfh {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.circular-progress-bar__svg_17pfh {
-    display: block;
-    width: 100%;
-}
-
-.circular-progress-bar__title_17pfh,
-.circular-progress-bar__subtitle_17pfh {
-    overflow: hidden;
-    word-break: break-word;
-}
-
-.circular-progress-bar__subtitle_17pfh {
-    max-height: 40px;
-}
-
-.circular-progress-bar__l_17pfh {
-    width: 144px;
-    height: 144px
-}
-
-.circular-progress-bar__l_17pfh .circular-progress-bar__label_17pfh {
-        max-width: 120px;
-    }
-
-.circular-progress-bar__l_17pfh .circular-progress-bar__title_17pfh {
-        max-height: 32px;
-    }
-
-.circular-progress-bar__m_17pfh {
-    width: 120px;
-    height: 120px
-}
-
-.circular-progress-bar__m_17pfh .circular-progress-bar__label_17pfh {
-        max-width: 96px;
-    }
-
-.circular-progress-bar__m_17pfh .circular-progress-bar__title_17pfh {
-        max-height: 24px;
-    }
-
-.circular-progress-bar__s_17pfh {
-    width: 96px;
-    height: 96px
-}
-
-.circular-progress-bar__s_17pfh .circular-progress-bar__label_17pfh {
-        max-width: 72px;
-    }
-
-.circular-progress-bar__s_17pfh .circular-progress-bar__title_17pfh {
-        max-height: 24px;
-    }
-
-.circular-progress-bar__label_17pfh {
-    text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    transform: translate(-50%, -50%);
-}
-
-.circular-progress-bar__backgroundCircle_17pfh,
-.circular-progress-bar__progressCircle_17pfh {
-    width: 100%;
-    height: 100%;
-    fill: transparent;
-    stroke-width: 8;
-}
-
-.circular-progress-bar__positive_17pfh {
-    stroke: var(--circular-progress-bar-positive-color);
-}
-
-.circular-progress-bar__negative_17pfh {
-    stroke: var(--circular-progress-bar-negative-color);
-}
-
-.circular-progress-bar__backgroundCircle_17pfh {
-    stroke: var(--circular-progress-bar-bg-color);
-}

package/dist/modern/Component.d.ts

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ReactNode } from "react";
-type CircularProgressBarProps = {
-    /**
-     * Уровень прогресса, %
-     */
-    value: number;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Основной текст
-     */
-    title?: ReactNode;
-    /**
-     * Дополнительный текст
-     */
-    subtitle?: ReactNode;
-    /**
-     * Цвет заполнения
-     */
-    view?: 'positive' | 'negative';
-    /**
-     * Размер (l — 144×144px, m — 120×120px, s — 96×96px)
-     */
-    size?: 'l' | 'm' | 's';
-    /**
-     * Id компонента для тестов
-     */
-    dataTestId?: string;
-};
-/**
- * Компонент круглого прогресс бара.
- */
-declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { CircularProgressBarProps, CircularProgressBar };