@alfalab/core-components-circular-progress-bar 5.0.6 → 5.0.7

package/Component.d.ts

@@ -63,7 +63,7 @@ export type CircularProgressBarProps = {
      */
     view?: 'positive' | 'negative';
     /**
-     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)
+     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px, 16 — 16×16px)
      * @default 64
      */
     size?: ComponentSize;
@@ -100,14 +100,15 @@ export type CircularProgressBarProps = {
      */
     direction?: 'clockwise' | 'counter-clockwise';
     /**
-     * Высота компонента, min = 24; max = 144
-     * использовать совместно с size :
+     * Высота компонента, min = 16; max = 144
+     * использовать совместно с size:
      * 144 от 144
      * 128 от 128 до 143
      * 80 от 80 до 127
      * 64 от 64 до 79
      * 48 от 48 до 63
      * 24 от 24 до 47
+     * 16 от 16 до 23
      */
     height?: number;
     /**

package/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n    MAX_PROGRESS_VALUE,\n    MAX_TIMER_VALUE,\n    MIN_TIMER_VALUE,\n    SIZE_TO_CLASSNAME_MAP,\n    SIZES,\n    STROKE,\n    TYPOGRAPHY_COLOR,\n    VIEW_TEXT,\n    VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n    /**\n     * Уровень прогресса, %\n     */\n    value:\n        | number\n        | {\n              /**\n               * Время таймера в секундах\n               * Минимальное значение 0\n               * Максимальное значение 3600\n               */\n              timer: number;\n              /**\n               * Направлние отсчета таймера\n               * forward: считаем от 0 до указанного значения\n               * backward: считаем от указанного значения до 0\n               * @default backward\n               */\n              counting?: 'forward' | 'backward';\n              /**\n               * Обработчик завершения таймера\n               */\n              onFinish?: () => void;\n          };\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Основной текст\n     */\n    title?: ReactNode;\n\n    /**\n     * Цвет контента\n     */\n    contentColor?: TypographyColor | string;\n\n    /**\n     * Цвет заголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    titleColor?: TypographyColor | string;\n\n    /**\n     * Цвет подзаголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    subtitleColor?: TypographyColor | string;\n\n    /**\n     * Дополнительный текст\n     */\n    subtitle?: ReactNode;\n\n    /**\n     * Основной текст при 100%\n     */\n    titleComplete?: ReactNode;\n\n    /**\n     * Дополнительный текст при 100%\n     */\n    subtitleComplete?: ReactNode;\n\n    /**\n     * Цвет заполнения\n     */\n    view?: 'positive' | 'negative';\n\n    /**\n     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)\n     * @default 64\n     */\n    size?: ComponentSize;\n\n    /**\n     * Наличие желоба\n     */\n    stroke?: boolean;\n\n    /**\n     * Заливка при 100%\n     */\n    fillComplete?: boolean;\n\n    /**\n     * Цвет текста при 100%\n     */\n    completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n    /**\n     * Цвет иконки при 100%\n     */\n    completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n    /**\n     * Компонент иконки\n     */\n    icon?: ElementType<{ className?: string }>;\n\n    /**\n     * Компонент иконки при 100%\n     */\n    iconComplete?: ElementType<{ className?: string }>;\n\n    /**\n     * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n     */\n    direction?: 'clockwise' | 'counter-clockwise';\n\n    /**\n     * Высота компонента, min = 24; max = 144\n     * использовать совместно с size :\n     * 144 от 144\n     * 128 от 128 до 143\n     * 80 от 80 до 127\n     * 64 от 64 до 79\n     * 48 от 48 до 63\n     * 24 от 24 до 47\n     */\n    height?: number;\n\n    /**\n     * Id компонента для тестов\n     */\n    dataTestId?: string;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Цвет прогресса\n     */\n    progressStrokeColor?: string;\n\n    /**\n     * Цвет заливки внутри круга\n     */\n    circleColor?: string;\n\n    /**\n     * Цвет желоба\n     */\n    strokeColor?: string;\n\n    /**\n     * Направление заполнения круга\n     * @default desc\n     */\n    directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n    value: valueFromProps,\n    view = 'positive',\n    size = 64,\n    className,\n    dataTestId,\n    title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n    titleComplete,\n    subtitle,\n    contentColor = 'secondary',\n    subtitleComplete,\n    stroke = true,\n    fillComplete,\n    icon: Icon,\n    iconComplete: IconComplete,\n    completeTextColor,\n    completeIconColor = 'tertiary',\n    direction = 'clockwise',\n    height,\n    children,\n    progressStrokeColor,\n    circleColor,\n    strokeColor,\n    directionType = 'asc',\n    titleColor,\n    subtitleColor,\n}) => {\n    const isTimer = isObject(valueFromProps);\n    const [timerValue, timerTitle] = useTimer(\n        isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n        isTimer,\n        isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n        isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n    );\n    let value: number;\n    let title: React.ReactNode;\n\n    if (isTimer) {\n        value = timerValue;\n        title = timerTitle;\n    } else {\n        value = valueFromProps;\n        title = titleFromProps;\n    }\n\n    value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n    const memorized = useMemo(() => {\n        const strokeWidth = STROKE[size];\n        const maxProgress = 100;\n        const minProgress = 0;\n        const widthSVG = SIZES[size];\n        const heightSVG = SIZES[size];\n        const center = widthSVG / 2;\n        const radius = center - strokeWidth / 2;\n        const circumference = Math.PI * radius * 2;\n        const progress = Math.min(Math.max(value, minProgress), maxProgress);\n        const strokeDasharray = circumference.toFixed(3);\n        const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n        return {\n            widthSVG,\n            heightSVG,\n            center,\n            radius,\n            strokeDasharray,\n            strokeDashoffset,\n        };\n    }, [size, value]);\n\n    const isComplete = value === 100;\n    const isCompleteTextColor = isComplete && completeTextColor;\n    const titleContent = titleComplete && isComplete ? titleComplete : title;\n    const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n    const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n    const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n        ? (contentColor as TypographyColor)\n        : undefined;\n\n    const getTextColor = (color?: TypographyColor | string) => {\n        if (isCompleteTextColor) {\n            return completeTextColor;\n        }\n\n        if (color) {\n            return isTypographyColor(color) ? color : undefined;\n        }\n\n        return typographyContentColor;\n    };\n\n    const getTextStyleColor = (color?: TypographyColor | string) => {\n        if (color) {\n            if (!isTypographyColor(color)) {\n                return { color };\n            }\n\n            return {};\n        }\n\n        return {\n            ...(!typographyContentColor && { color: contentColor }),\n        };\n    };\n\n    const renderTitleString = () =>\n        SIZES[size] > 64 ? (\n            <TypographyTitleMobile\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                font='system'\n                view={VIEW_TITLE[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyTitleMobile>\n        ) : (\n            <TypographyText\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                weight='bold'\n                view={VIEW_TEXT[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyText>\n        );\n\n    const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n    const renderSubTitle = () =>\n        typeof subtitle === 'string' ? (\n            <TypographyText\n                tag='div'\n                className={styles.subtitle}\n                color={getTextColor(subtitleColor)}\n                view='primary-small'\n                dataTestId={getDataTestId(dataTestId, 'subtitle')}\n                style={{\n                    ...getTextStyleColor(subtitleColor),\n                }}\n            >\n                {subtitleContent}\n            </TypographyText>\n        ) : (\n            subtitleContent\n        );\n\n    const renderIcon = () => (\n        <span\n            className={cn(\n                styles.iconWrapper,\n                styles[SIZE_TO_CLASSNAME_MAP[size]],\n                styles.tertiary,\n                styles[`icon-${contentColor}`],\n                {\n                    [styles[`icon-${completeIconColor}`]]: completeIconColor,\n                },\n            )}\n        >\n            {IconComponent && <IconComponent className={styles.icon} />}\n        </span>\n    );\n\n    const renderContent = () =>\n        Icon || (IconComplete && isComplete) ? (\n            renderIcon()\n        ) : (\n            <React.Fragment>\n                {SIZES[size] > 24 && renderTitle()}\n                {SIZES[size] > 64 && renderSubTitle()}\n            </React.Fragment>\n        );\n\n    return (\n        <div\n            className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n                [styles[`bg-${view}`]]: fillComplete && isComplete,\n            })}\n            style={{\n                ...(height && { height, width: height }),\n                ...(circleColor && { backgroundColor: circleColor }),\n            }}\n            data-test-id={dataTestId}\n        >\n            <svg\n                viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n                className={styles.svg}\n                xmlns='http://www.w3.org/2000/svg'\n            >\n                <circle\n                    className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n                        [styles.stroke]: !stroke,\n                    })}\n                    style={{\n                        ...(strokeColor && stroke && { stroke: strokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n                />\n                <circle\n                    className={cn(\n                        styles.progressCircle,\n                        styles[view],\n                        styles[SIZE_TO_CLASSNAME_MAP[size]],\n                    )}\n                    style={{\n                        ...(progressStrokeColor && { stroke: progressStrokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    strokeDasharray={memorized.strokeDasharray}\n                    strokeDashoffset={\n                        direction === 'counter-clockwise'\n                            ? -memorized.strokeDashoffset\n                            : memorized.strokeDashoffset\n                    }\n                    transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n                />\n            </svg>\n            <div\n                className={cn(styles.labelWrapper, {\n                    [styles.label]: Icon || IconComplete,\n                })}\n            >\n                {children || renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["isObject","useTimer","MIN_TIMER_VALUE","MAX_TIMER_VALUE","noop","MAX_PROGRESS_VALUE","useMemo","STROKE","SIZES","TYPOGRAPHY_COLOR","isTypographyColor","__assign","React","TypographyTitleMobile","styles","VIEW_TITLE","getDataTestId","TypographyText","VIEW_TEXT","cn","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n    MAX_PROGRESS_VALUE,\n    MAX_TIMER_VALUE,\n    MIN_TIMER_VALUE,\n    SIZE_TO_CLASSNAME_MAP,\n    SIZES,\n    STROKE,\n    TYPOGRAPHY_COLOR,\n    VIEW_TEXT,\n    VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n    /**\n     * Уровень прогресса, %\n     */\n    value:\n        | number\n        | {\n              /**\n               * Время таймера в секундах\n               * Минимальное значение 0\n               * Максимальное значение 3600\n               */\n              timer: number;\n              /**\n               * Направлние отсчета таймера\n               * forward: считаем от 0 до указанного значения\n               * backward: считаем от указанного значения до 0\n               * @default backward\n               */\n              counting?: 'forward' | 'backward';\n              /**\n               * Обработчик завершения таймера\n               */\n              onFinish?: () => void;\n          };\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Основной текст\n     */\n    title?: ReactNode;\n\n    /**\n     * Цвет контента\n     */\n    contentColor?: TypographyColor | string;\n\n    /**\n     * Цвет заголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    titleColor?: TypographyColor | string;\n\n    /**\n     * Цвет подзаголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    subtitleColor?: TypographyColor | string;\n\n    /**\n     * Дополнительный текст\n     */\n    subtitle?: ReactNode;\n\n    /**\n     * Основной текст при 100%\n     */\n    titleComplete?: ReactNode;\n\n    /**\n     * Дополнительный текст при 100%\n     */\n    subtitleComplete?: ReactNode;\n\n    /**\n     * Цвет заполнения\n     */\n    view?: 'positive' | 'negative';\n\n    /**\n     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px, 16 — 16×16px)\n     * @default 64\n     */\n    size?: ComponentSize;\n\n    /**\n     * Наличие желоба\n     */\n    stroke?: boolean;\n\n    /**\n     * Заливка при 100%\n     */\n    fillComplete?: boolean;\n\n    /**\n     * Цвет текста при 100%\n     */\n    completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n    /**\n     * Цвет иконки при 100%\n     */\n    completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n    /**\n     * Компонент иконки\n     */\n    icon?: ElementType<{ className?: string }>;\n\n    /**\n     * Компонент иконки при 100%\n     */\n    iconComplete?: ElementType<{ className?: string }>;\n\n    /**\n     * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n     */\n    direction?: 'clockwise' | 'counter-clockwise';\n\n    /**\n     * Высота компонента, min = 16; max = 144\n     * использовать совместно с size:\n     * 144 от 144\n     * 128 от 128 до 143\n     * 80 от 80 до 127\n     * 64 от 64 до 79\n     * 48 от 48 до 63\n     * 24 от 24 до 47\n     * 16 от 16 до 23\n     */\n    height?: number;\n\n    /**\n     * Id компонента для тестов\n     */\n    dataTestId?: string;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Цвет прогресса\n     */\n    progressStrokeColor?: string;\n\n    /**\n     * Цвет заливки внутри круга\n     */\n    circleColor?: string;\n\n    /**\n     * Цвет желоба\n     */\n    strokeColor?: string;\n\n    /**\n     * Направление заполнения круга\n     * @default desc\n     */\n    directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n    value: valueFromProps,\n    view = 'positive',\n    size = 64,\n    className,\n    dataTestId,\n    title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n    titleComplete,\n    subtitle,\n    contentColor = 'secondary',\n    subtitleComplete,\n    stroke = true,\n    fillComplete,\n    icon: Icon,\n    iconComplete: IconComplete,\n    completeTextColor,\n    completeIconColor = 'tertiary',\n    direction = 'clockwise',\n    height,\n    children,\n    progressStrokeColor,\n    circleColor,\n    strokeColor,\n    directionType = 'asc',\n    titleColor,\n    subtitleColor,\n}) => {\n    const isTimer = isObject(valueFromProps);\n    const [timerValue, timerTitle] = useTimer(\n        isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n        isTimer,\n        isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n        isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n    );\n    let value: number;\n    let title: React.ReactNode;\n\n    if (isTimer) {\n        value = timerValue;\n        title = timerTitle;\n    } else {\n        value = valueFromProps;\n        title = titleFromProps;\n    }\n\n    value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n    const memorized = useMemo(() => {\n        const strokeWidth = STROKE[size];\n        const maxProgress = 100;\n        const minProgress = 0;\n        const widthSVG = SIZES[size];\n        const heightSVG = SIZES[size];\n        const center = widthSVG / 2;\n        const radius = center - strokeWidth / 2;\n        const circumference = Math.PI * radius * 2;\n        const progress = Math.min(Math.max(value, minProgress), maxProgress);\n        const strokeDasharray = circumference.toFixed(3);\n        const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n        return {\n            widthSVG,\n            heightSVG,\n            center,\n            radius,\n            strokeDasharray,\n            strokeDashoffset,\n        };\n    }, [size, value]);\n\n    const isComplete = value === 100;\n    const isCompleteTextColor = isComplete && completeTextColor;\n    const titleContent = titleComplete && isComplete ? titleComplete : title;\n    const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n    const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n    const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n        ? (contentColor as TypographyColor)\n        : undefined;\n\n    const getTextColor = (color?: TypographyColor | string) => {\n        if (isCompleteTextColor) {\n            return completeTextColor;\n        }\n\n        if (color) {\n            return isTypographyColor(color) ? color : undefined;\n        }\n\n        return typographyContentColor;\n    };\n\n    const getTextStyleColor = (color?: TypographyColor | string) => {\n        if (color) {\n            if (!isTypographyColor(color)) {\n                return { color };\n            }\n\n            return {};\n        }\n\n        return {\n            ...(!typographyContentColor && { color: contentColor }),\n        };\n    };\n\n    const renderTitleString = () =>\n        SIZES[size] > 64 ? (\n            <TypographyTitleMobile\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                font='system'\n                view={VIEW_TITLE[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyTitleMobile>\n        ) : (\n            <TypographyText\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                weight='bold'\n                view={VIEW_TEXT[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyText>\n        );\n\n    const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n    const renderSubTitle = () =>\n        typeof subtitle === 'string' ? (\n            <TypographyText\n                tag='div'\n                className={styles.subtitle}\n                color={getTextColor(subtitleColor)}\n                view='primary-small'\n                dataTestId={getDataTestId(dataTestId, 'subtitle')}\n                style={{\n                    ...getTextStyleColor(subtitleColor),\n                }}\n            >\n                {subtitleContent}\n            </TypographyText>\n        ) : (\n            subtitleContent\n        );\n\n    const renderIcon = () => (\n        <span\n            className={cn(\n                styles.iconWrapper,\n                styles[SIZE_TO_CLASSNAME_MAP[size]],\n                styles.tertiary,\n                styles[`icon-${contentColor}`],\n                {\n                    [styles[`icon-${completeIconColor}`]]: completeIconColor,\n                },\n            )}\n        >\n            {IconComponent && <IconComponent className={styles.icon} />}\n        </span>\n    );\n\n    const renderContent = () =>\n        Icon || (IconComplete && isComplete) ? (\n            renderIcon()\n        ) : (\n            <React.Fragment>\n                {SIZES[size] > 24 && renderTitle()}\n                {SIZES[size] > 64 && renderSubTitle()}\n            </React.Fragment>\n        );\n\n    return (\n        <div\n            className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n                [styles[`bg-${view}`]]: fillComplete && isComplete,\n            })}\n            style={{\n                ...(height && { height, width: height }),\n                ...(circleColor && { backgroundColor: circleColor }),\n            }}\n            data-test-id={dataTestId}\n        >\n            <svg\n                viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n                className={styles.svg}\n                xmlns='http://www.w3.org/2000/svg'\n            >\n                <circle\n                    className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n                        [styles.stroke]: !stroke,\n                    })}\n                    style={{\n                        ...(strokeColor && stroke && { stroke: strokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n                />\n                <circle\n                    className={cn(\n                        styles.progressCircle,\n                        styles[view],\n                        styles[SIZE_TO_CLASSNAME_MAP[size]],\n                    )}\n                    style={{\n                        ...(progressStrokeColor && { stroke: progressStrokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    strokeDasharray={memorized.strokeDasharray}\n                    strokeDashoffset={\n                        direction === 'counter-clockwise'\n                            ? -memorized.strokeDashoffset\n                            : memorized.strokeDashoffset\n                    }\n                    transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n                />\n            </svg>\n            <div\n                className={cn(styles.labelWrapper, {\n                    [styles.label]: Icon || IconComplete,\n                })}\n            >\n                {children || renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["isObject","useTimer","MIN_TIMER_VALUE","MAX_TIMER_VALUE","noop","MAX_PROGRESS_VALUE","useMemo","STROKE","SIZES","TYPOGRAPHY_COLOR","isTypographyColor","__assign","React","TypographyTitleMobile","styles","VIEW_TITLE","getDataTestId","TypographyText","VIEW_TEXT","cn","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}

package/consts.d.ts

@@ -5,6 +5,7 @@ export declare const SIZES: {
     l: number;
     xl: number;
     xxl: number;
+    16: number;
     24: number;
     48: number;
     64: number;
@@ -20,6 +21,7 @@ export declare const STROKE: {
     l: number;
     xl: number;
     xxl: number;
+    16: number;
     24: number;
     48: number;
     64: number;
@@ -35,6 +37,7 @@ export declare const VIEW_TITLE: {
     readonly l: "xsmall";
     readonly xl: "medium";
     readonly xxl: "medium";
+    readonly 16: "small";
     readonly 24: "small";
     readonly 48: "small";
     readonly 64: "small";
@@ -50,6 +53,7 @@ export declare const VIEW_TEXT: {
     readonly l: "secondary-large";
     readonly xl: "secondary-large";
     readonly xxl: "secondary-large";
+    readonly 16: "secondary-small";
     readonly 24: "secondary-small";
     readonly 48: "secondary-small";
     readonly 64: "secondary-large";
@@ -66,6 +70,7 @@ export declare const SIZE_TO_CLASSNAME_MAP: {
     l: string;
     xl: string;
     xxl: string;
+    16: string;
     24: string;
     48: string;
     64: string;

package/consts.js

@@ -9,6 +9,7 @@ var SIZES = {
     l: 80,
     xl: 128,
     xxl: 144,
+    16: 16,
     24: 24,
     48: 48,
     64: 64,
@@ -24,6 +25,7 @@ var STROKE = {
     l: 8,
     xl: 10,
     xxl: 12,
+    16: 2,
     24: 4,
     48: 4,
     64: 6,
@@ -39,6 +41,7 @@ var VIEW_TITLE = {
     l: 'xsmall',
     xl: 'medium',
     xxl: 'medium',
+    16: 'small',
     24: 'small',
     48: 'small',
     64: 'small',
@@ -54,6 +57,7 @@ var VIEW_TEXT = {
     l: 'secondary-large',
     xl: 'secondary-large',
     xxl: 'secondary-large',
+    16: 'secondary-small',
     24: 'secondary-small',
     48: 'secondary-small',
     64: 'secondary-large',
@@ -70,6 +74,7 @@ var SIZE_TO_CLASSNAME_MAP = {
     l: 'size-80',
     xl: 'size-128',
     xxl: 'size-144',
+    16: 'size-16',
     24: 'size-24',
     48: 'size-48',
     64: 'size-64',

package/consts.js.map

@@ -1 +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,IAAA,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,IAAA,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,IAAA,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,IAAA,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,IAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU;AAE9E,IAAA,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,IAAM,kBAAkB,GAAG;AAE3B,IAAM,eAAe,GAAG;AACxB,IAAM,eAAe,GAAG;;;;;;;;;;;;"}
+{"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    16: 16,\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    16: 2,\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    16: 'small',\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    16: 'secondary-small',\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    16: 'size-16',\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":"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"}

package/cssm/Component.d.ts

@@ -63,7 +63,7 @@ export type CircularProgressBarProps = {
      */
     view?: 'positive' | 'negative';
     /**
-     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)
+     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px, 16 — 16×16px)
      * @default 64
      */
     size?: ComponentSize;
@@ -100,14 +100,15 @@ export type CircularProgressBarProps = {
      */
     direction?: 'clockwise' | 'counter-clockwise';
     /**
-     * Высота компонента, min = 24; max = 144
-     * использовать совместно с size :
+     * Высота компонента, min = 16; max = 144
+     * использовать совместно с size:
      * 144 от 144
      * 128 от 128 до 143
      * 80 от 80 до 127
      * 64 от 64 до 79
      * 48 от 48 до 63
      * 24 от 24 до 47
+     * 16 от 16 до 23
      */
     height?: number;
     /**

package/cssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n    MAX_PROGRESS_VALUE,\n    MAX_TIMER_VALUE,\n    MIN_TIMER_VALUE,\n    SIZE_TO_CLASSNAME_MAP,\n    SIZES,\n    STROKE,\n    TYPOGRAPHY_COLOR,\n    VIEW_TEXT,\n    VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n    /**\n     * Уровень прогресса, %\n     */\n    value:\n        | number\n        | {\n              /**\n               * Время таймера в секундах\n               * Минимальное значение 0\n               * Максимальное значение 3600\n               */\n              timer: number;\n              /**\n               * Направлние отсчета таймера\n               * forward: считаем от 0 до указанного значения\n               * backward: считаем от указанного значения до 0\n               * @default backward\n               */\n              counting?: 'forward' | 'backward';\n              /**\n               * Обработчик завершения таймера\n               */\n              onFinish?: () => void;\n          };\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Основной текст\n     */\n    title?: ReactNode;\n\n    /**\n     * Цвет контента\n     */\n    contentColor?: TypographyColor | string;\n\n    /**\n     * Цвет заголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    titleColor?: TypographyColor | string;\n\n    /**\n     * Цвет подзаголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    subtitleColor?: TypographyColor | string;\n\n    /**\n     * Дополнительный текст\n     */\n    subtitle?: ReactNode;\n\n    /**\n     * Основной текст при 100%\n     */\n    titleComplete?: ReactNode;\n\n    /**\n     * Дополнительный текст при 100%\n     */\n    subtitleComplete?: ReactNode;\n\n    /**\n     * Цвет заполнения\n     */\n    view?: 'positive' | 'negative';\n\n    /**\n     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)\n     * @default 64\n     */\n    size?: ComponentSize;\n\n    /**\n     * Наличие желоба\n     */\n    stroke?: boolean;\n\n    /**\n     * Заливка при 100%\n     */\n    fillComplete?: boolean;\n\n    /**\n     * Цвет текста при 100%\n     */\n    completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n    /**\n     * Цвет иконки при 100%\n     */\n    completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n    /**\n     * Компонент иконки\n     */\n    icon?: ElementType<{ className?: string }>;\n\n    /**\n     * Компонент иконки при 100%\n     */\n    iconComplete?: ElementType<{ className?: string }>;\n\n    /**\n     * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n     */\n    direction?: 'clockwise' | 'counter-clockwise';\n\n    /**\n     * Высота компонента, min = 24; max = 144\n     * использовать совместно с size :\n     * 144 от 144\n     * 128 от 128 до 143\n     * 80 от 80 до 127\n     * 64 от 64 до 79\n     * 48 от 48 до 63\n     * 24 от 24 до 47\n     */\n    height?: number;\n\n    /**\n     * Id компонента для тестов\n     */\n    dataTestId?: string;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Цвет прогресса\n     */\n    progressStrokeColor?: string;\n\n    /**\n     * Цвет заливки внутри круга\n     */\n    circleColor?: string;\n\n    /**\n     * Цвет желоба\n     */\n    strokeColor?: string;\n\n    /**\n     * Направление заполнения круга\n     * @default desc\n     */\n    directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n    value: valueFromProps,\n    view = 'positive',\n    size = 64,\n    className,\n    dataTestId,\n    title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n    titleComplete,\n    subtitle,\n    contentColor = 'secondary',\n    subtitleComplete,\n    stroke = true,\n    fillComplete,\n    icon: Icon,\n    iconComplete: IconComplete,\n    completeTextColor,\n    completeIconColor = 'tertiary',\n    direction = 'clockwise',\n    height,\n    children,\n    progressStrokeColor,\n    circleColor,\n    strokeColor,\n    directionType = 'asc',\n    titleColor,\n    subtitleColor,\n}) => {\n    const isTimer = isObject(valueFromProps);\n    const [timerValue, timerTitle] = useTimer(\n        isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n        isTimer,\n        isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n        isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n    );\n    let value: number;\n    let title: React.ReactNode;\n\n    if (isTimer) {\n        value = timerValue;\n        title = timerTitle;\n    } else {\n        value = valueFromProps;\n        title = titleFromProps;\n    }\n\n    value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n    const memorized = useMemo(() => {\n        const strokeWidth = STROKE[size];\n        const maxProgress = 100;\n        const minProgress = 0;\n        const widthSVG = SIZES[size];\n        const heightSVG = SIZES[size];\n        const center = widthSVG / 2;\n        const radius = center - strokeWidth / 2;\n        const circumference = Math.PI * radius * 2;\n        const progress = Math.min(Math.max(value, minProgress), maxProgress);\n        const strokeDasharray = circumference.toFixed(3);\n        const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n        return {\n            widthSVG,\n            heightSVG,\n            center,\n            radius,\n            strokeDasharray,\n            strokeDashoffset,\n        };\n    }, [size, value]);\n\n    const isComplete = value === 100;\n    const isCompleteTextColor = isComplete && completeTextColor;\n    const titleContent = titleComplete && isComplete ? titleComplete : title;\n    const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n    const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n    const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n        ? (contentColor as TypographyColor)\n        : undefined;\n\n    const getTextColor = (color?: TypographyColor | string) => {\n        if (isCompleteTextColor) {\n            return completeTextColor;\n        }\n\n        if (color) {\n            return isTypographyColor(color) ? color : undefined;\n        }\n\n        return typographyContentColor;\n    };\n\n    const getTextStyleColor = (color?: TypographyColor | string) => {\n        if (color) {\n            if (!isTypographyColor(color)) {\n                return { color };\n            }\n\n            return {};\n        }\n\n        return {\n            ...(!typographyContentColor && { color: contentColor }),\n        };\n    };\n\n    const renderTitleString = () =>\n        SIZES[size] > 64 ? (\n            <TypographyTitleMobile\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                font='system'\n                view={VIEW_TITLE[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyTitleMobile>\n        ) : (\n            <TypographyText\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                weight='bold'\n                view={VIEW_TEXT[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyText>\n        );\n\n    const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n    const renderSubTitle = () =>\n        typeof subtitle === 'string' ? (\n            <TypographyText\n                tag='div'\n                className={styles.subtitle}\n                color={getTextColor(subtitleColor)}\n                view='primary-small'\n                dataTestId={getDataTestId(dataTestId, 'subtitle')}\n                style={{\n                    ...getTextStyleColor(subtitleColor),\n                }}\n            >\n                {subtitleContent}\n            </TypographyText>\n        ) : (\n            subtitleContent\n        );\n\n    const renderIcon = () => (\n        <span\n            className={cn(\n                styles.iconWrapper,\n                styles[SIZE_TO_CLASSNAME_MAP[size]],\n                styles.tertiary,\n                styles[`icon-${contentColor}`],\n                {\n                    [styles[`icon-${completeIconColor}`]]: completeIconColor,\n                },\n            )}\n        >\n            {IconComponent && <IconComponent className={styles.icon} />}\n        </span>\n    );\n\n    const renderContent = () =>\n        Icon || (IconComplete && isComplete) ? (\n            renderIcon()\n        ) : (\n            <React.Fragment>\n                {SIZES[size] > 24 && renderTitle()}\n                {SIZES[size] > 64 && renderSubTitle()}\n            </React.Fragment>\n        );\n\n    return (\n        <div\n            className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n                [styles[`bg-${view}`]]: fillComplete && isComplete,\n            })}\n            style={{\n                ...(height && { height, width: height }),\n                ...(circleColor && { backgroundColor: circleColor }),\n            }}\n            data-test-id={dataTestId}\n        >\n            <svg\n                viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n                className={styles.svg}\n                xmlns='http://www.w3.org/2000/svg'\n            >\n                <circle\n                    className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n                        [styles.stroke]: !stroke,\n                    })}\n                    style={{\n                        ...(strokeColor && stroke && { stroke: strokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n                />\n                <circle\n                    className={cn(\n                        styles.progressCircle,\n                        styles[view],\n                        styles[SIZE_TO_CLASSNAME_MAP[size]],\n                    )}\n                    style={{\n                        ...(progressStrokeColor && { stroke: progressStrokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    strokeDasharray={memorized.strokeDasharray}\n                    strokeDashoffset={\n                        direction === 'counter-clockwise'\n                            ? -memorized.strokeDashoffset\n                            : memorized.strokeDashoffset\n                    }\n                    transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n                />\n            </svg>\n            <div\n                className={cn(styles.labelWrapper, {\n                    [styles.label]: Icon || IconComplete,\n                })}\n            >\n                {children || renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["isObject","useTimer","MIN_TIMER_VALUE","MAX_TIMER_VALUE","noop","MAX_PROGRESS_VALUE","useMemo","STROKE","SIZES","TYPOGRAPHY_COLOR","isTypographyColor","__assign","React","TypographyTitleMobile","styles","VIEW_TITLE","getDataTestId","TypographyText","VIEW_TEXT","cn","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n    MAX_PROGRESS_VALUE,\n    MAX_TIMER_VALUE,\n    MIN_TIMER_VALUE,\n    SIZE_TO_CLASSNAME_MAP,\n    SIZES,\n    STROKE,\n    TYPOGRAPHY_COLOR,\n    VIEW_TEXT,\n    VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n    /**\n     * Уровень прогресса, %\n     */\n    value:\n        | number\n        | {\n              /**\n               * Время таймера в секундах\n               * Минимальное значение 0\n               * Максимальное значение 3600\n               */\n              timer: number;\n              /**\n               * Направлние отсчета таймера\n               * forward: считаем от 0 до указанного значения\n               * backward: считаем от указанного значения до 0\n               * @default backward\n               */\n              counting?: 'forward' | 'backward';\n              /**\n               * Обработчик завершения таймера\n               */\n              onFinish?: () => void;\n          };\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Основной текст\n     */\n    title?: ReactNode;\n\n    /**\n     * Цвет контента\n     */\n    contentColor?: TypographyColor | string;\n\n    /**\n     * Цвет заголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    titleColor?: TypographyColor | string;\n\n    /**\n     * Цвет подзаголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    subtitleColor?: TypographyColor | string;\n\n    /**\n     * Дополнительный текст\n     */\n    subtitle?: ReactNode;\n\n    /**\n     * Основной текст при 100%\n     */\n    titleComplete?: ReactNode;\n\n    /**\n     * Дополнительный текст при 100%\n     */\n    subtitleComplete?: ReactNode;\n\n    /**\n     * Цвет заполнения\n     */\n    view?: 'positive' | 'negative';\n\n    /**\n     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px, 16 — 16×16px)\n     * @default 64\n     */\n    size?: ComponentSize;\n\n    /**\n     * Наличие желоба\n     */\n    stroke?: boolean;\n\n    /**\n     * Заливка при 100%\n     */\n    fillComplete?: boolean;\n\n    /**\n     * Цвет текста при 100%\n     */\n    completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n    /**\n     * Цвет иконки при 100%\n     */\n    completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n    /**\n     * Компонент иконки\n     */\n    icon?: ElementType<{ className?: string }>;\n\n    /**\n     * Компонент иконки при 100%\n     */\n    iconComplete?: ElementType<{ className?: string }>;\n\n    /**\n     * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n     */\n    direction?: 'clockwise' | 'counter-clockwise';\n\n    /**\n     * Высота компонента, min = 16; max = 144\n     * использовать совместно с size:\n     * 144 от 144\n     * 128 от 128 до 143\n     * 80 от 80 до 127\n     * 64 от 64 до 79\n     * 48 от 48 до 63\n     * 24 от 24 до 47\n     * 16 от 16 до 23\n     */\n    height?: number;\n\n    /**\n     * Id компонента для тестов\n     */\n    dataTestId?: string;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Цвет прогресса\n     */\n    progressStrokeColor?: string;\n\n    /**\n     * Цвет заливки внутри круга\n     */\n    circleColor?: string;\n\n    /**\n     * Цвет желоба\n     */\n    strokeColor?: string;\n\n    /**\n     * Направление заполнения круга\n     * @default desc\n     */\n    directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n    value: valueFromProps,\n    view = 'positive',\n    size = 64,\n    className,\n    dataTestId,\n    title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n    titleComplete,\n    subtitle,\n    contentColor = 'secondary',\n    subtitleComplete,\n    stroke = true,\n    fillComplete,\n    icon: Icon,\n    iconComplete: IconComplete,\n    completeTextColor,\n    completeIconColor = 'tertiary',\n    direction = 'clockwise',\n    height,\n    children,\n    progressStrokeColor,\n    circleColor,\n    strokeColor,\n    directionType = 'asc',\n    titleColor,\n    subtitleColor,\n}) => {\n    const isTimer = isObject(valueFromProps);\n    const [timerValue, timerTitle] = useTimer(\n        isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n        isTimer,\n        isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n        isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n    );\n    let value: number;\n    let title: React.ReactNode;\n\n    if (isTimer) {\n        value = timerValue;\n        title = timerTitle;\n    } else {\n        value = valueFromProps;\n        title = titleFromProps;\n    }\n\n    value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n    const memorized = useMemo(() => {\n        const strokeWidth = STROKE[size];\n        const maxProgress = 100;\n        const minProgress = 0;\n        const widthSVG = SIZES[size];\n        const heightSVG = SIZES[size];\n        const center = widthSVG / 2;\n        const radius = center - strokeWidth / 2;\n        const circumference = Math.PI * radius * 2;\n        const progress = Math.min(Math.max(value, minProgress), maxProgress);\n        const strokeDasharray = circumference.toFixed(3);\n        const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n        return {\n            widthSVG,\n            heightSVG,\n            center,\n            radius,\n            strokeDasharray,\n            strokeDashoffset,\n        };\n    }, [size, value]);\n\n    const isComplete = value === 100;\n    const isCompleteTextColor = isComplete && completeTextColor;\n    const titleContent = titleComplete && isComplete ? titleComplete : title;\n    const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n    const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n    const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n        ? (contentColor as TypographyColor)\n        : undefined;\n\n    const getTextColor = (color?: TypographyColor | string) => {\n        if (isCompleteTextColor) {\n            return completeTextColor;\n        }\n\n        if (color) {\n            return isTypographyColor(color) ? color : undefined;\n        }\n\n        return typographyContentColor;\n    };\n\n    const getTextStyleColor = (color?: TypographyColor | string) => {\n        if (color) {\n            if (!isTypographyColor(color)) {\n                return { color };\n            }\n\n            return {};\n        }\n\n        return {\n            ...(!typographyContentColor && { color: contentColor }),\n        };\n    };\n\n    const renderTitleString = () =>\n        SIZES[size] > 64 ? (\n            <TypographyTitleMobile\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                font='system'\n                view={VIEW_TITLE[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyTitleMobile>\n        ) : (\n            <TypographyText\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                weight='bold'\n                view={VIEW_TEXT[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyText>\n        );\n\n    const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n    const renderSubTitle = () =>\n        typeof subtitle === 'string' ? (\n            <TypographyText\n                tag='div'\n                className={styles.subtitle}\n                color={getTextColor(subtitleColor)}\n                view='primary-small'\n                dataTestId={getDataTestId(dataTestId, 'subtitle')}\n                style={{\n                    ...getTextStyleColor(subtitleColor),\n                }}\n            >\n                {subtitleContent}\n            </TypographyText>\n        ) : (\n            subtitleContent\n        );\n\n    const renderIcon = () => (\n        <span\n            className={cn(\n                styles.iconWrapper,\n                styles[SIZE_TO_CLASSNAME_MAP[size]],\n                styles.tertiary,\n                styles[`icon-${contentColor}`],\n                {\n                    [styles[`icon-${completeIconColor}`]]: completeIconColor,\n                },\n            )}\n        >\n            {IconComponent && <IconComponent className={styles.icon} />}\n        </span>\n    );\n\n    const renderContent = () =>\n        Icon || (IconComplete && isComplete) ? (\n            renderIcon()\n        ) : (\n            <React.Fragment>\n                {SIZES[size] > 24 && renderTitle()}\n                {SIZES[size] > 64 && renderSubTitle()}\n            </React.Fragment>\n        );\n\n    return (\n        <div\n            className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n                [styles[`bg-${view}`]]: fillComplete && isComplete,\n            })}\n            style={{\n                ...(height && { height, width: height }),\n                ...(circleColor && { backgroundColor: circleColor }),\n            }}\n            data-test-id={dataTestId}\n        >\n            <svg\n                viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n                className={styles.svg}\n                xmlns='http://www.w3.org/2000/svg'\n            >\n                <circle\n                    className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n                        [styles.stroke]: !stroke,\n                    })}\n                    style={{\n                        ...(strokeColor && stroke && { stroke: strokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n                />\n                <circle\n                    className={cn(\n                        styles.progressCircle,\n                        styles[view],\n                        styles[SIZE_TO_CLASSNAME_MAP[size]],\n                    )}\n                    style={{\n                        ...(progressStrokeColor && { stroke: progressStrokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    strokeDasharray={memorized.strokeDasharray}\n                    strokeDashoffset={\n                        direction === 'counter-clockwise'\n                            ? -memorized.strokeDashoffset\n                            : memorized.strokeDashoffset\n                    }\n                    transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n                />\n            </svg>\n            <div\n                className={cn(styles.labelWrapper, {\n                    [styles.label]: Icon || IconComplete,\n                })}\n            >\n                {children || renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["isObject","useTimer","MIN_TIMER_VALUE","MAX_TIMER_VALUE","noop","MAX_PROGRESS_VALUE","useMemo","STROKE","SIZES","TYPOGRAPHY_COLOR","isTypographyColor","__assign","React","TypographyTitleMobile","styles","VIEW_TITLE","getDataTestId","TypographyText","VIEW_TEXT","cn","SIZE_TO_CLASSNAME_MAP"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwLA;;AAEG;AACI,IAAM,mBAAmB,GAAuC,UAAC,EA0BvE,EAAA;;;QAzBU,cAAc,GAAA,EAAA,CAAA,KAAA,EACrB,EAAA,GAAA,EAAA,CAAA,IAAiB,EAAjB,IAAI,GAAG,EAAA,KAAA,MAAA,GAAA,UAAU,GAAA,EAAA,EACjB,EAAS,GAAA,EAAA,CAAA,IAAA,EAAT,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAA6E,GAAA,EAAA,CAAA,KAAA,EAAtE,cAAc,GAAA,EAAA,KAAA,MAAA,GAAGA,aAAQ,CAAC,cAAc,CAAC,GAAG,IAAI,GAAG,EAAG,CAAA,MAAA,CAAA,cAAc,CAAE,GAAA,EAAA,EAC7E,aAAa,mBAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAA0B,GAAA,EAAA,CAAA,YAAA,EAA1B,YAAY,GAAA,EAAA,KAAA,MAAA,GAAG,WAAW,GAAA,EAAA,EAC1B,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,cAAa,EAAb,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EACb,YAAY,GAAA,EAAA,CAAA,YAAA,EACN,IAAI,GAAA,EAAA,CAAA,IAAA,EACI,YAAY,GAAA,EAAA,CAAA,YAAA,EAC1B,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,EAAA,GAAA,EAAA,CAAA,iBAA8B,EAA9B,iBAAiB,GAAG,EAAA,KAAA,MAAA,GAAA,UAAU,GAAA,EAAA,EAC9B,EAAuB,GAAA,EAAA,CAAA,SAAA,EAAvB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,WAAW,GAAA,EAAA,EACvB,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,EAAA,GAAA,EAAA,CAAA,aAAqB,EAArB,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,GAAA,EAAA,EACrB,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,aAAa,GAAA,EAAA,CAAA,aAAA;AAEb,IAAA,IAAM,OAAO,GAAGA,aAAQ,CAAC,cAAc,CAAC;AAClC,IAAA,IAAA,EAA2B,GAAAC,iBAAQ,CACrC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,EAAEC,sBAAe,CAAC,EAAEC,sBAAe,CAAC,GAAG,EAAE,EACzF,OAAO,EACP,OAAO,IAAI,CAAA,EAAA,GAAA,cAAc,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,UAAU,IAAI,UAAU,EAC9D,OAAO,IAAI,CAAA,EAAA,GAAA,cAAc,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIC,SAAI,IAAIA,SAAI,CACrD,EALM,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,QAK5B;AACD,IAAA,IAAI,KAAa;AACjB,IAAA,IAAI,KAAsB;IAE1B,IAAI,OAAO,EAAE;QACT,KAAK,GAAG,UAAU;QAClB,KAAK,GAAG,UAAU;;SACf;QACH,KAAK,GAAG,cAAc;QACtB,KAAK,GAAG,cAAc;;AAG1B,IAAA,KAAK,GAAG,aAAa,KAAK,MAAM,GAAGC,yBAAkB,GAAG,KAAK,GAAG,KAAK;IAErE,IAAM,SAAS,GAAGC,aAAO,CAAC,YAAA;AACtB,QAAA,IAAM,WAAW,GAAGC,aAAM,CAAC,IAAI,CAAC;QAChC,IAAM,WAAW,GAAG,GAAG;QACvB,IAAM,WAAW,GAAG,CAAC;AACrB,QAAA,IAAM,QAAQ,GAAGC,YAAK,CAAC,IAAI,CAAC;AAC5B,QAAA,IAAM,SAAS,GAAGA,YAAK,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAM,MAAM,GAAG,QAAQ,GAAG,CAAC;AAC3B,QAAA,IAAM,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,CAAC;QACvC,IAAM,aAAa,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,GAAG,CAAC;AAC1C,QAAA,IAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,WAAW,CAAC;QACpE,IAAM,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;QAChD,IAAM,gBAAgB,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,QAAQ,IAAI,GAAG,IAAI,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;QAE9E,OAAO;AACH,YAAA,QAAQ,EAAA,QAAA;AACR,YAAA,SAAS,EAAA,SAAA;AACT,YAAA,MAAM,EAAA,MAAA;AACN,YAAA,MAAM,EAAA,MAAA;AACN,YAAA,eAAe,EAAA,eAAA;AACf,YAAA,gBAAgB,EAAA,gBAAA;SACnB;AACL,KAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAEjB,IAAA,IAAM,UAAU,GAAG,KAAK,KAAK,GAAG;AAChC,IAAA,IAAM,mBAAmB,GAAG,UAAU,IAAI,iBAAiB;AAC3D,IAAA,IAAM,YAAY,GAAG,aAAa,IAAI,UAAU,GAAG,aAAa,GAAG,KAAK;AACxE,IAAA,IAAM,eAAe,GAAG,gBAAgB,IAAI,UAAU,GAAG,gBAAgB,GAAG,QAAQ;AACpF,IAAA,IAAM,aAAa,GAAG,YAAY,IAAI,UAAU,GAAG,YAAY,GAAG,IAAI;AAEtE,IAAA,IAAM,sBAAsB,GAAGC,uBAAgB,CAAC,QAAQ,CAAC,YAAY;AACjE,UAAG;UACD,SAAS;IAEf,IAAM,YAAY,GAAG,UAAC,KAAgC,EAAA;QAClD,IAAI,mBAAmB,EAAE;AACrB,YAAA,OAAO,iBAAiB;;QAG5B,IAAI,KAAK,EAAE;AACP,YAAA,OAAOC,mCAAiB,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,SAAS;;AAGvD,QAAA,OAAO,sBAAsB;AACjC,KAAC;IAED,IAAM,iBAAiB,GAAG,UAAC,KAAgC,EAAA;QACvD,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,CAACA,mCAAiB,CAAC,KAAK,CAAC,EAAE;AAC3B,gBAAA,OAAO,EAAE,KAAK,EAAA,KAAA,EAAE;;AAGpB,YAAA,OAAO,EAAE;;QAGb,OACOC,cAAA,CAAA,EAAA,GAAC,CAAC,sBAAsB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,EACxD;AACN,KAAC;AAED,IAAA,IAAM,iBAAiB,GAAG,YAAA;QACtB,OAAAH,YAAK,CAAC,IAAI,CAAC,GAAG,EAAE,IACZI,sBAAC,CAAA,aAAA,CAAAC,4BAAqB,IAClB,SAAS,EAAEC,uBAAM,CAAC,KAAK,EACvB,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,EAC/B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,QAAQ,EACb,IAAI,EAAEC,iBAAU,CAAC,IAAI,CAAC,EACtB,KAAK,EACEJ,cAAA,CAAA,EAAA,EAAA,iBAAiB,CAAC,UAAU,CAAC,CAAA,EAEpC,UAAU,EAAEK,kBAAa,CAAC,UAAU,EAAE,OAAO,CAAC,IAE7C,YAAY,CACO,KAExBJ,sBAAC,CAAA,aAAA,CAAAK,qBAAc,EACX,EAAA,SAAS,EAAEH,uBAAM,CAAC,KAAK,EACvB,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,EAC/B,GAAG,EAAC,KAAK,EACT,MAAM,EAAC,MAAM,EACb,IAAI,EAAEI,gBAAS,CAAC,IAAI,CAAC,EACrB,KAAK,EACEP,cAAA,CAAA,EAAA,EAAA,iBAAiB,CAAC,UAAU,CAAC,CAEpC,EAAA,UAAU,EAAEK,kBAAa,CAAC,UAAU,EAAE,OAAO,CAAC,EAAA,EAE7C,YAAY,CACA,CACpB;AA5BD,KA4BC;IAEL,IAAM,WAAW,GAAG,YAAM,EAAA,QAAC,OAAO,KAAK,KAAK,QAAQ,GAAG,iBAAiB,EAAE,GAAG,YAAY,EAA/D,EAAgE;AAE1F,IAAA,IAAM,cAAc,GAAG,YAAA;QACnB,OAAA,OAAO,QAAQ,KAAK,QAAQ,IACxBJ,sBAAA,CAAA,aAAA,CAACK,qBAAc,EAAA,EACX,GAAG,EAAC,KAAK,EACT,SAAS,EAAEH,uBAAM,CAAC,QAAQ,EAC1B,KAAK,EAAE,YAAY,CAAC,aAAa,CAAC,EAClC,IAAI,EAAC,eAAe,EACpB,UAAU,EAAEE,kBAAa,CAAC,UAAU,EAAE,UAAU,CAAC,EACjD,KAAK,EAAAL,cAAA,CAAA,EAAA,EACE,iBAAiB,CAAC,aAAa,CAAC,CAAA,EAAA,EAGtC,eAAe,CACH,KAEjB,eAAe,CAClB;AAfD,KAeC;AAEL,IAAA,IAAM,UAAU,GAAG,YAAA;;QAAM,QACrBC,sBACI,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEO,mBAAE,CACTL,uBAAM,CAAC,WAAW,EAClBA,uBAAM,CAACM,4BAAqB,CAAC,IAAI,CAAC,CAAC,EACnCN,uBAAM,CAAC,QAAQ,EACfA,uBAAM,CAAC,OAAA,CAAA,MAAA,CAAQ,YAAY,CAAE,CAAC,GAAA,EAAA,GAAA,EAAA;AAE1B,gBAAA,EAAA,CAACA,uBAAM,CAAC,OAAA,CAAA,MAAA,CAAQ,iBAAiB,CAAE,CAAC,IAAG,iBAAiB;AAE/D,gBAAA,EAAA,EAAA,EAAA,EAEA,aAAa,IAAIF,sBAAC,CAAA,aAAA,CAAA,aAAa,EAAC,EAAA,SAAS,EAAEE,uBAAM,CAAC,IAAI,EAAI,CAAA,CACxD;AAbc,KAcxB;AAED,IAAA,IAAM,aAAa,GAAG,YAAA;QAClB,OAAA,IAAI,KAAK,YAAY,IAAI,UAAU,CAAC,IAChC,UAAU,EAAE,KAEZF,sBAAA,CAAA,aAAA,CAACA,sBAAK,CAAC,QAAQ,EAAA,IAAA;AACV,YAAAJ,YAAK,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,WAAW,EAAE;YACjCA,YAAK,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,cAAc,EAAE,CACxB,CACpB;AAPD,KAOC;AAEL,IAAA,QACII,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEO,mBAAE,CAACL,uBAAM,CAAC,SAAS,EAAEA,uBAAM,CAACM,4BAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;YAC1E,EAAC,CAAAN,uBAAM,CAAC,KAAM,CAAA,MAAA,CAAA,IAAI,CAAE,CAAC,CAAA,GAAG,YAAY,IAAI,UAAU;gBACpD,EACF,KAAK,EACEH,cAAA,CAAAA,cAAA,CAAA,EAAA,GAAC,MAAM,IAAI,EAAE,MAAM,EAAA,MAAA,EAAE,KAAK,EAAE,MAAM,EAAE,EAAC,GACpC,WAAW,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,EAAC,EAAA,cAAA,EAE1C,UAAU,EAAA;QAExBC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAE,MAAO,CAAA,MAAA,CAAA,SAAS,CAAC,QAAQ,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,SAAS,CAAC,SAAS,CAAE,EAC3D,SAAS,EAAEE,uBAAM,CAAC,GAAG,EACrB,KAAK,EAAC,4BAA4B,EAAA;AAElC,YAAAF,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAEO,mBAAE,CAACL,uBAAM,CAAC,gBAAgB,EAAEA,uBAAM,CAACM,4BAAqB,CAAC,IAAI,CAAC,CAAC,GAAA,EAAA,GAAA,EAAA;AACtE,oBAAA,EAAA,CAACN,uBAAM,CAAC,MAAM,CAAA,GAAG,CAAC,MAAM;wBAC1B,EACF,KAAK,sBACG,WAAW,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAExD,EAAE,EAAE,SAAS,CAAC,MAAM,EACpB,EAAE,EAAE,SAAS,CAAC,MAAM,EACpB,CAAC,EAAE,SAAS,CAAC,MAAM,EACnB,WAAW,EAAEP,aAAM,CAAC,IAAI,CAAC,EACX,cAAA,EAAAS,kBAAa,CAAC,UAAU,EAAE,qBAAqB,CAAC,EAChE,CAAA;AACF,YAAAJ,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAEO,mBAAE,CACTL,uBAAM,CAAC,cAAc,EACrBA,uBAAM,CAAC,IAAI,CAAC,EACZA,uBAAM,CAACM,4BAAqB,CAAC,IAAI,CAAC,CAAC,CACtC,EACD,KAAK,EACET,cAAA,CAAA,EAAA,GAAC,mBAAmB,IAAI,EAAE,MAAM,EAAE,mBAAmB,EAAE,EAAC,EAE/D,EAAE,EAAE,SAAS,CAAC,MAAM,EACpB,EAAE,EAAE,SAAS,CAAC,MAAM,EACpB,CAAC,EAAE,SAAS,CAAC,MAAM,EACnB,WAAW,EAAEJ,aAAM,CAAC,IAAI,CAAC,EACzB,eAAe,EAAE,SAAS,CAAC,eAAe,EAC1C,gBAAgB,EACZ,SAAS,KAAK;AACV,sBAAE,CAAC,SAAS,CAAC;sBACX,SAAS,CAAC,gBAAgB,EAEpC,SAAS,EAAE,SAAU,CAAA,MAAA,CAAA,GAAG,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,SAAS,CAAC,MAAM,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,SAAS,CAAC,MAAM,EAAA,GAAA,CAAG,EACrD,cAAA,EAAAS,kBAAa,CAAC,UAAU,EAAE,uBAAuB,CAAC,EAAA,CAClE,CACA;AACN,QAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEO,mBAAE,CAACL,uBAAM,CAAC,YAAY,GAAA,EAAA,GAAA,EAAA;AAC7B,gBAAA,EAAA,CAACA,uBAAM,CAAC,KAAK,CAAG,GAAA,IAAI,IAAI,YAAY;AACtC,gBAAA,EAAA,EAAA,EAAA,EAED,QAAQ,IAAI,aAAa,EAAE,CAC1B,CACJ;AAEd;;;;"}

package/cssm/consts.d.ts

@@ -5,6 +5,7 @@ export declare const SIZES: {
     l: number;
     xl: number;
     xxl: number;
+    16: number;
     24: number;
     48: number;
     64: number;
@@ -20,6 +21,7 @@ export declare const STROKE: {
     l: number;
     xl: number;
     xxl: number;
+    16: number;
     24: number;
     48: number;
     64: number;
@@ -35,6 +37,7 @@ export declare const VIEW_TITLE: {
     readonly l: "xsmall";
     readonly xl: "medium";
     readonly xxl: "medium";
+    readonly 16: "small";
     readonly 24: "small";
     readonly 48: "small";
     readonly 64: "small";
@@ -50,6 +53,7 @@ export declare const VIEW_TEXT: {
     readonly l: "secondary-large";
     readonly xl: "secondary-large";
     readonly xxl: "secondary-large";
+    readonly 16: "secondary-small";
     readonly 24: "secondary-small";
     readonly 48: "secondary-small";
     readonly 64: "secondary-large";
@@ -66,6 +70,7 @@ export declare const SIZE_TO_CLASSNAME_MAP: {
     l: string;
     xl: string;
     xxl: string;
+    16: string;
     24: string;
     48: string;
     64: string;

package/cssm/consts.js

@@ -9,6 +9,7 @@ var SIZES = {
     l: 80,
     xl: 128,
     xxl: 144,
+    16: 16,
     24: 24,
     48: 48,
     64: 64,
@@ -24,6 +25,7 @@ var STROKE = {
     l: 8,
     xl: 10,
     xxl: 12,
+    16: 2,
     24: 4,
     48: 4,
     64: 6,
@@ -39,6 +41,7 @@ var VIEW_TITLE = {
     l: 'xsmall',
     xl: 'medium',
     xxl: 'medium',
+    16: 'small',
     24: 'small',
     48: 'small',
     64: 'small',
@@ -54,6 +57,7 @@ var VIEW_TEXT = {
     l: 'secondary-large',
     xl: 'secondary-large',
     xxl: 'secondary-large',
+    16: 'secondary-small',
     24: 'secondary-small',
     48: 'secondary-small',
     64: 'secondary-large',
@@ -70,6 +74,7 @@ var SIZE_TO_CLASSNAME_MAP = {
     l: 'size-80',
     xl: 'size-128',
     xxl: 'size-144',
+    16: 'size-16',
     24: 'size-24',
     48: 'size-48',
     64: 'size-64',

package/cssm/consts.js.map

@@ -1 +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,IAAA,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,IAAA,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,IAAA,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,IAAA,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,IAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU;AAE9E,IAAA,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,IAAM,kBAAkB,GAAG;AAE3B,IAAM,eAAe,GAAG;AACxB,IAAM,eAAe,GAAG;;;;;;;;;;;;"}
+{"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    16: 16,\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    16: 2,\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    16: 'small',\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    16: 'secondary-small',\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    16: 'size-16',\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":"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"}

package/cssm/index.module.css

@@ -129,6 +129,13 @@
 .size-24 .labelWrapper {
         max-width: 24px;
     }
+.size-16 {
+    width: 16px;
+    height: 16px;
+}
+.size-16 .labelWrapper {
+        max-width: 16px;
+    }
 .backgroundCircle,
 .progressCircle {
     width: 100%;

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

@@ -1 +1 @@
-export type ComponentSize = 24 | 48 | 64 | 80 | 128 | 144;
+export type ComponentSize = 16 | 24 | 48 | 64 | 80 | 128 | 144;

package/esm/Component.d.ts

@@ -63,7 +63,7 @@ export type CircularProgressBarProps = {
      */
     view?: 'positive' | 'negative';
     /**
-     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)
+     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px, 16 — 16×16px)
      * @default 64
      */
     size?: ComponentSize;
@@ -100,14 +100,15 @@ export type CircularProgressBarProps = {
      */
     direction?: 'clockwise' | 'counter-clockwise';
     /**
-     * Высота компонента, min = 24; max = 144
-     * использовать совместно с size :
+     * Высота компонента, min = 16; max = 144
+     * использовать совместно с size:
      * 144 от 144
      * 128 от 128 до 143
      * 80 от 80 до 127
      * 64 от 64 до 79
      * 48 от 48 до 63
      * 24 от 24 до 47
+     * 16 от 16 до 23
      */
     height?: number;
     /**

package/esm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n    MAX_PROGRESS_VALUE,\n    MAX_TIMER_VALUE,\n    MIN_TIMER_VALUE,\n    SIZE_TO_CLASSNAME_MAP,\n    SIZES,\n    STROKE,\n    TYPOGRAPHY_COLOR,\n    VIEW_TEXT,\n    VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n    /**\n     * Уровень прогресса, %\n     */\n    value:\n        | number\n        | {\n              /**\n               * Время таймера в секундах\n               * Минимальное значение 0\n               * Максимальное значение 3600\n               */\n              timer: number;\n              /**\n               * Направлние отсчета таймера\n               * forward: считаем от 0 до указанного значения\n               * backward: считаем от указанного значения до 0\n               * @default backward\n               */\n              counting?: 'forward' | 'backward';\n              /**\n               * Обработчик завершения таймера\n               */\n              onFinish?: () => void;\n          };\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Основной текст\n     */\n    title?: ReactNode;\n\n    /**\n     * Цвет контента\n     */\n    contentColor?: TypographyColor | string;\n\n    /**\n     * Цвет заголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    titleColor?: TypographyColor | string;\n\n    /**\n     * Цвет подзаголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    subtitleColor?: TypographyColor | string;\n\n    /**\n     * Дополнительный текст\n     */\n    subtitle?: ReactNode;\n\n    /**\n     * Основной текст при 100%\n     */\n    titleComplete?: ReactNode;\n\n    /**\n     * Дополнительный текст при 100%\n     */\n    subtitleComplete?: ReactNode;\n\n    /**\n     * Цвет заполнения\n     */\n    view?: 'positive' | 'negative';\n\n    /**\n     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px)\n     * @default 64\n     */\n    size?: ComponentSize;\n\n    /**\n     * Наличие желоба\n     */\n    stroke?: boolean;\n\n    /**\n     * Заливка при 100%\n     */\n    fillComplete?: boolean;\n\n    /**\n     * Цвет текста при 100%\n     */\n    completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n    /**\n     * Цвет иконки при 100%\n     */\n    completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n    /**\n     * Компонент иконки\n     */\n    icon?: ElementType<{ className?: string }>;\n\n    /**\n     * Компонент иконки при 100%\n     */\n    iconComplete?: ElementType<{ className?: string }>;\n\n    /**\n     * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n     */\n    direction?: 'clockwise' | 'counter-clockwise';\n\n    /**\n     * Высота компонента, min = 24; max = 144\n     * использовать совместно с size :\n     * 144 от 144\n     * 128 от 128 до 143\n     * 80 от 80 до 127\n     * 64 от 64 до 79\n     * 48 от 48 до 63\n     * 24 от 24 до 47\n     */\n    height?: number;\n\n    /**\n     * Id компонента для тестов\n     */\n    dataTestId?: string;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Цвет прогресса\n     */\n    progressStrokeColor?: string;\n\n    /**\n     * Цвет заливки внутри круга\n     */\n    circleColor?: string;\n\n    /**\n     * Цвет желоба\n     */\n    strokeColor?: string;\n\n    /**\n     * Направление заполнения круга\n     * @default desc\n     */\n    directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n    value: valueFromProps,\n    view = 'positive',\n    size = 64,\n    className,\n    dataTestId,\n    title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n    titleComplete,\n    subtitle,\n    contentColor = 'secondary',\n    subtitleComplete,\n    stroke = true,\n    fillComplete,\n    icon: Icon,\n    iconComplete: IconComplete,\n    completeTextColor,\n    completeIconColor = 'tertiary',\n    direction = 'clockwise',\n    height,\n    children,\n    progressStrokeColor,\n    circleColor,\n    strokeColor,\n    directionType = 'asc',\n    titleColor,\n    subtitleColor,\n}) => {\n    const isTimer = isObject(valueFromProps);\n    const [timerValue, timerTitle] = useTimer(\n        isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n        isTimer,\n        isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n        isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n    );\n    let value: number;\n    let title: React.ReactNode;\n\n    if (isTimer) {\n        value = timerValue;\n        title = timerTitle;\n    } else {\n        value = valueFromProps;\n        title = titleFromProps;\n    }\n\n    value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n    const memorized = useMemo(() => {\n        const strokeWidth = STROKE[size];\n        const maxProgress = 100;\n        const minProgress = 0;\n        const widthSVG = SIZES[size];\n        const heightSVG = SIZES[size];\n        const center = widthSVG / 2;\n        const radius = center - strokeWidth / 2;\n        const circumference = Math.PI * radius * 2;\n        const progress = Math.min(Math.max(value, minProgress), maxProgress);\n        const strokeDasharray = circumference.toFixed(3);\n        const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n        return {\n            widthSVG,\n            heightSVG,\n            center,\n            radius,\n            strokeDasharray,\n            strokeDashoffset,\n        };\n    }, [size, value]);\n\n    const isComplete = value === 100;\n    const isCompleteTextColor = isComplete && completeTextColor;\n    const titleContent = titleComplete && isComplete ? titleComplete : title;\n    const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n    const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n    const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n        ? (contentColor as TypographyColor)\n        : undefined;\n\n    const getTextColor = (color?: TypographyColor | string) => {\n        if (isCompleteTextColor) {\n            return completeTextColor;\n        }\n\n        if (color) {\n            return isTypographyColor(color) ? color : undefined;\n        }\n\n        return typographyContentColor;\n    };\n\n    const getTextStyleColor = (color?: TypographyColor | string) => {\n        if (color) {\n            if (!isTypographyColor(color)) {\n                return { color };\n            }\n\n            return {};\n        }\n\n        return {\n            ...(!typographyContentColor && { color: contentColor }),\n        };\n    };\n\n    const renderTitleString = () =>\n        SIZES[size] > 64 ? (\n            <TypographyTitleMobile\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                font='system'\n                view={VIEW_TITLE[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyTitleMobile>\n        ) : (\n            <TypographyText\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                weight='bold'\n                view={VIEW_TEXT[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyText>\n        );\n\n    const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n    const renderSubTitle = () =>\n        typeof subtitle === 'string' ? (\n            <TypographyText\n                tag='div'\n                className={styles.subtitle}\n                color={getTextColor(subtitleColor)}\n                view='primary-small'\n                dataTestId={getDataTestId(dataTestId, 'subtitle')}\n                style={{\n                    ...getTextStyleColor(subtitleColor),\n                }}\n            >\n                {subtitleContent}\n            </TypographyText>\n        ) : (\n            subtitleContent\n        );\n\n    const renderIcon = () => (\n        <span\n            className={cn(\n                styles.iconWrapper,\n                styles[SIZE_TO_CLASSNAME_MAP[size]],\n                styles.tertiary,\n                styles[`icon-${contentColor}`],\n                {\n                    [styles[`icon-${completeIconColor}`]]: completeIconColor,\n                },\n            )}\n        >\n            {IconComponent && <IconComponent className={styles.icon} />}\n        </span>\n    );\n\n    const renderContent = () =>\n        Icon || (IconComplete && isComplete) ? (\n            renderIcon()\n        ) : (\n            <React.Fragment>\n                {SIZES[size] > 24 && renderTitle()}\n                {SIZES[size] > 64 && renderSubTitle()}\n            </React.Fragment>\n        );\n\n    return (\n        <div\n            className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n                [styles[`bg-${view}`]]: fillComplete && isComplete,\n            })}\n            style={{\n                ...(height && { height, width: height }),\n                ...(circleColor && { backgroundColor: circleColor }),\n            }}\n            data-test-id={dataTestId}\n        >\n            <svg\n                viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n                className={styles.svg}\n                xmlns='http://www.w3.org/2000/svg'\n            >\n                <circle\n                    className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n                        [styles.stroke]: !stroke,\n                    })}\n                    style={{\n                        ...(strokeColor && stroke && { stroke: strokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n                />\n                <circle\n                    className={cn(\n                        styles.progressCircle,\n                        styles[view],\n                        styles[SIZE_TO_CLASSNAME_MAP[size]],\n                    )}\n                    style={{\n                        ...(progressStrokeColor && { stroke: progressStrokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    strokeDasharray={memorized.strokeDasharray}\n                    strokeDashoffset={\n                        direction === 'counter-clockwise'\n                            ? -memorized.strokeDashoffset\n                            : memorized.strokeDashoffset\n                    }\n                    transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n                />\n            </svg>\n            <div\n                className={cn(styles.labelWrapper, {\n                    [styles.label]: Icon || IconComplete,\n                })}\n            >\n                {children || renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { type ElementType, type ReactNode, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId, isObject, noop } from '@alfalab/core-components-shared';\nimport { TypographyText, TypographyTitleMobile } from '@alfalab/core-components-typography';\n\nimport { type ComponentSize } from './types/component-size';\nimport { type TypographyColor } from './types/typography-color';\nimport { isTypographyColor } from './utils/is-typography-color';\nimport {\n    MAX_PROGRESS_VALUE,\n    MAX_TIMER_VALUE,\n    MIN_TIMER_VALUE,\n    SIZE_TO_CLASSNAME_MAP,\n    SIZES,\n    STROKE,\n    TYPOGRAPHY_COLOR,\n    VIEW_TEXT,\n    VIEW_TITLE,\n} from './consts';\nimport { useTimer } from './use-timer';\n\nimport styles from './index.module.css';\n\nexport type CircularProgressBarProps = {\n    /**\n     * Уровень прогресса, %\n     */\n    value:\n        | number\n        | {\n              /**\n               * Время таймера в секундах\n               * Минимальное значение 0\n               * Максимальное значение 3600\n               */\n              timer: number;\n              /**\n               * Направлние отсчета таймера\n               * forward: считаем от 0 до указанного значения\n               * backward: считаем от указанного значения до 0\n               * @default backward\n               */\n              counting?: 'forward' | 'backward';\n              /**\n               * Обработчик завершения таймера\n               */\n              onFinish?: () => void;\n          };\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Основной текст\n     */\n    title?: ReactNode;\n\n    /**\n     * Цвет контента\n     */\n    contentColor?: TypographyColor | string;\n\n    /**\n     * Цвет заголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    titleColor?: TypographyColor | string;\n\n    /**\n     * Цвет подзаголовка\n     * Приоритет выше чем у `contentColor`\n     */\n    subtitleColor?: TypographyColor | string;\n\n    /**\n     * Дополнительный текст\n     */\n    subtitle?: ReactNode;\n\n    /**\n     * Основной текст при 100%\n     */\n    titleComplete?: ReactNode;\n\n    /**\n     * Дополнительный текст при 100%\n     */\n    subtitleComplete?: ReactNode;\n\n    /**\n     * Цвет заполнения\n     */\n    view?: 'positive' | 'negative';\n\n    /**\n     * Размер (144 — 144×144px, 128 — 128×128px, 80 — 80×80px, 64 — 64×64px, 48 — 48×48px, 24 — 24×24px, 16 — 16×16px)\n     * @default 64\n     */\n    size?: ComponentSize;\n\n    /**\n     * Наличие желоба\n     */\n    stroke?: boolean;\n\n    /**\n     * Заливка при 100%\n     */\n    fillComplete?: boolean;\n\n    /**\n     * Цвет текста при 100%\n     */\n    completeTextColor?: 'primary' | 'primary-inverted' | 'positive' | 'negative';\n\n    /**\n     * Цвет иконки при 100%\n     */\n    completeIconColor?: 'primary-inverted' | 'positive' | 'negative' | 'tertiary';\n\n    /**\n     * Компонент иконки\n     */\n    icon?: ElementType<{ className?: string }>;\n\n    /**\n     * Компонент иконки при 100%\n     */\n    iconComplete?: ElementType<{ className?: string }>;\n\n    /**\n     * Направление прогресса (clockwise - по часовой стрелке, counter-clockwise - против часовой стрелки)\n     */\n    direction?: 'clockwise' | 'counter-clockwise';\n\n    /**\n     * Высота компонента, min = 16; max = 144\n     * использовать совместно с size:\n     * 144 от 144\n     * 128 от 128 до 143\n     * 80 от 80 до 127\n     * 64 от 64 до 79\n     * 48 от 48 до 63\n     * 24 от 24 до 47\n     * 16 от 16 до 23\n     */\n    height?: number;\n\n    /**\n     * Id компонента для тестов\n     */\n    dataTestId?: string;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Цвет прогресса\n     */\n    progressStrokeColor?: string;\n\n    /**\n     * Цвет заливки внутри круга\n     */\n    circleColor?: string;\n\n    /**\n     * Цвет желоба\n     */\n    strokeColor?: string;\n\n    /**\n     * Направление заполнения круга\n     * @default desc\n     */\n    directionType?: 'asc' | 'desc';\n};\n\n/**\n * Компонент круглого прогресс бара.\n */\nexport const CircularProgressBar: React.FC<CircularProgressBarProps> = ({\n    value: valueFromProps,\n    view = 'positive',\n    size = 64,\n    className,\n    dataTestId,\n    title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,\n    titleComplete,\n    subtitle,\n    contentColor = 'secondary',\n    subtitleComplete,\n    stroke = true,\n    fillComplete,\n    icon: Icon,\n    iconComplete: IconComplete,\n    completeTextColor,\n    completeIconColor = 'tertiary',\n    direction = 'clockwise',\n    height,\n    children,\n    progressStrokeColor,\n    circleColor,\n    strokeColor,\n    directionType = 'asc',\n    titleColor,\n    subtitleColor,\n}) => {\n    const isTimer = isObject(valueFromProps);\n    const [timerValue, timerTitle] = useTimer(\n        isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,\n        isTimer,\n        isTimer ? (valueFromProps.counting ?? 'backward') : 'backward',\n        isTimer ? (valueFromProps.onFinish ?? noop) : noop,\n    );\n    let value: number;\n    let title: React.ReactNode;\n\n    if (isTimer) {\n        value = timerValue;\n        title = timerTitle;\n    } else {\n        value = valueFromProps;\n        title = titleFromProps;\n    }\n\n    value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;\n\n    const memorized = useMemo(() => {\n        const strokeWidth = STROKE[size];\n        const maxProgress = 100;\n        const minProgress = 0;\n        const widthSVG = SIZES[size];\n        const heightSVG = SIZES[size];\n        const center = widthSVG / 2;\n        const radius = center - strokeWidth / 2;\n        const circumference = Math.PI * radius * 2;\n        const progress = Math.min(Math.max(value, minProgress), maxProgress);\n        const strokeDasharray = circumference.toFixed(3);\n        const strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);\n\n        return {\n            widthSVG,\n            heightSVG,\n            center,\n            radius,\n            strokeDasharray,\n            strokeDashoffset,\n        };\n    }, [size, value]);\n\n    const isComplete = value === 100;\n    const isCompleteTextColor = isComplete && completeTextColor;\n    const titleContent = titleComplete && isComplete ? titleComplete : title;\n    const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;\n    const IconComponent = IconComplete && isComplete ? IconComplete : Icon;\n\n    const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)\n        ? (contentColor as TypographyColor)\n        : undefined;\n\n    const getTextColor = (color?: TypographyColor | string) => {\n        if (isCompleteTextColor) {\n            return completeTextColor;\n        }\n\n        if (color) {\n            return isTypographyColor(color) ? color : undefined;\n        }\n\n        return typographyContentColor;\n    };\n\n    const getTextStyleColor = (color?: TypographyColor | string) => {\n        if (color) {\n            if (!isTypographyColor(color)) {\n                return { color };\n            }\n\n            return {};\n        }\n\n        return {\n            ...(!typographyContentColor && { color: contentColor }),\n        };\n    };\n\n    const renderTitleString = () =>\n        SIZES[size] > 64 ? (\n            <TypographyTitleMobile\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                font='system'\n                view={VIEW_TITLE[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyTitleMobile>\n        ) : (\n            <TypographyText\n                className={styles.title}\n                color={getTextColor(titleColor)}\n                tag='div'\n                weight='bold'\n                view={VIEW_TEXT[size]}\n                style={{\n                    ...getTextStyleColor(titleColor),\n                }}\n                dataTestId={getDataTestId(dataTestId, 'title')}\n            >\n                {titleContent}\n            </TypographyText>\n        );\n\n    const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);\n\n    const renderSubTitle = () =>\n        typeof subtitle === 'string' ? (\n            <TypographyText\n                tag='div'\n                className={styles.subtitle}\n                color={getTextColor(subtitleColor)}\n                view='primary-small'\n                dataTestId={getDataTestId(dataTestId, 'subtitle')}\n                style={{\n                    ...getTextStyleColor(subtitleColor),\n                }}\n            >\n                {subtitleContent}\n            </TypographyText>\n        ) : (\n            subtitleContent\n        );\n\n    const renderIcon = () => (\n        <span\n            className={cn(\n                styles.iconWrapper,\n                styles[SIZE_TO_CLASSNAME_MAP[size]],\n                styles.tertiary,\n                styles[`icon-${contentColor}`],\n                {\n                    [styles[`icon-${completeIconColor}`]]: completeIconColor,\n                },\n            )}\n        >\n            {IconComponent && <IconComponent className={styles.icon} />}\n        </span>\n    );\n\n    const renderContent = () =>\n        Icon || (IconComplete && isComplete) ? (\n            renderIcon()\n        ) : (\n            <React.Fragment>\n                {SIZES[size] > 24 && renderTitle()}\n                {SIZES[size] > 64 && renderSubTitle()}\n            </React.Fragment>\n        );\n\n    return (\n        <div\n            className={cn(styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {\n                [styles[`bg-${view}`]]: fillComplete && isComplete,\n            })}\n            style={{\n                ...(height && { height, width: height }),\n                ...(circleColor && { backgroundColor: circleColor }),\n            }}\n            data-test-id={dataTestId}\n        >\n            <svg\n                viewBox={`0 0 ${memorized.widthSVG} ${memorized.heightSVG}`}\n                className={styles.svg}\n                xmlns='http://www.w3.org/2000/svg'\n            >\n                <circle\n                    className={cn(styles.backgroundCircle, styles[SIZE_TO_CLASSNAME_MAP[size]], {\n                        [styles.stroke]: !stroke,\n                    })}\n                    style={{\n                        ...(strokeColor && stroke && { stroke: strokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}\n                />\n                <circle\n                    className={cn(\n                        styles.progressCircle,\n                        styles[view],\n                        styles[SIZE_TO_CLASSNAME_MAP[size]],\n                    )}\n                    style={{\n                        ...(progressStrokeColor && { stroke: progressStrokeColor }),\n                    }}\n                    cx={memorized.center}\n                    cy={memorized.center}\n                    r={memorized.radius}\n                    strokeWidth={STROKE[size]}\n                    strokeDasharray={memorized.strokeDasharray}\n                    strokeDashoffset={\n                        direction === 'counter-clockwise'\n                            ? -memorized.strokeDashoffset\n                            : memorized.strokeDashoffset\n                    }\n                    transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}\n                    data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}\n                />\n            </svg>\n            <div\n                className={cn(styles.labelWrapper, {\n                    [styles.label]: Icon || IconComplete,\n                })}\n            >\n                {children || renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}