@astral/ui 4.74.0 → 4.76.0

package/components/DataGridInfinite/useLogic/useLogic.js

@@ -1,4 +1,5 @@
-import { useCallback, useMemo, useRef, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { EXPANDED_LEVEL_BY_DEFAULT, INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT, } from '../../DataGrid/constants';
 import { Variant } from '../../DataGrid/enums';
 import { useDataGridMobileLogic } from '../../DataGrid/useLogic/hooks';
 import { getDataGridCssVars, getFlattenColumns, getGridTemplateColumns, isGroupColumns, } from '../../DataGrid/utils';
@@ -6,17 +7,32 @@ import { useViewportType } from '../../useViewportType';
 import { prop } from '../../utils/prop';
 import { uniqueBy } from '../../utils/uniqueBy';
 import { dataGridInfiniteClassnames, VIRTUOSO_CONTAINER_ID, VIRTUOSO_LIST_ID, } from '../constants';
-export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', }) => {
+export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', }) => {
     const virtuoso = useRef(null);
     const scrollToTopButtonRef = useRef(null);
     const { isMobile } = useViewportType();
+    // Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
+    const selectedRowsRef = useRef(selectedRows);
+    useEffect(() => {
+        selectedRowsRef.current = selectedRows;
+    }, [selectedRows]);
     const [hasVerticalScroll, setHasVerticalScroll] = useState(false);
     const isNoData = Boolean(rows?.length);
     const isSelectable = Boolean(onSelectRow);
     const isDataGridDisabled = isDisabled || (!isNoData && isLoading);
-    const treeRenderConfig = Object.is(variant, Variant.Subrows)
-        ? { ...subrows, isInitialExpanded: true }
-        : tree;
+    const treeRenderConfig = useMemo(() => {
+        const config = Object.is(variant, Variant.Subrows)
+            ? { ...subrows, isInitialExpanded: true }
+            : tree;
+        if (isMobile) {
+            return {
+                ...config,
+                expandedLevel: EXPANDED_LEVEL_BY_DEFAULT,
+                initialVisibleChildrenCount: INITIAL_OPENED_NESTED_CHILDREN_COUNT_ON_MOBILE_BY_DEFAULT,
+            };
+        }
+        return config;
+    }, [variant, subrows, tree, isMobile]);
     const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
     const flattenColumns = useMemo(() => getFlattenColumns(columns), [columns]);
     const hasGroupedColumns = columns.some(isGroupColumns);
@@ -51,10 +67,10 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
             return;
         }
         if (event.target.checked) {
-            return onSelectRow([...selectedRows, row]);
+            return onSelectRow([...selectedRowsRef.current, row]);
         }
-        onSelectRow(selectedRows.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
-    }, [selectedRows, onSelectRow, keyId]);
+        onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
+    }, []);
     const handleScrollToTop = () => {
         virtuoso.current?.scrollIntoView({ index: 0, behavior: 'smooth' });
     };
@@ -68,12 +84,12 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
     const { mobileSkeletonProps } = useDataGridMobileLogic({
         columns: flattenColumns,
+        mobileDisplayVariant,
     });
     const containerCssVars = getDataGridCssVars(maxHeight);
     return {
         containerCssVars,
         mobileSkeletonProps,
-        flattenColumns,
         isNoData,
         isMobile,
         isDataGridDisabled,
@@ -82,6 +98,7 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
         isHideHead,
         hasGroupedColumns,
         gridViewMode,
+        gridColumns,
         virtuosoProps: {
             id: VIRTUOSO_CONTAINER_ID,
             ref: virtuoso,
@@ -100,11 +117,13 @@ export const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selecte
         rowProps: {
             isSelectable,
             gridColumns,
-            onSelectRow: handleSelectRow,
         },
         scrollToTopButtonProps: {
             onClick: handleScrollToTop,
             ref: scrollToTopButtonRef,
         },
+        handleSelectRow,
+        mobileDisplayVariant,
+        isSelfContained: mobileDisplayVariant === 'cards',
     };
 };

package/components/DialogActions/styles.js

@@ -2,6 +2,8 @@ import DialogActions from '@mui/material/DialogActions';
 import { Grid } from '../Grid';
 import { styled } from '../styled';
 export const StyledDialogActions = styled(DialogActions) `
+  z-index: ${({ theme }) => theme.zIndex.modal};
+
   padding-top: ${({ theme }) => theme.spacing(6)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/components/DonutChart/DonutChart.d.ts

@@ -0,0 +1,2 @@
+import type { DonutChartProps } from './types';
+export declare const DonutChart: ({ value, maxValue, children, color, colorIntensity, className, style, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;

package/components/DonutChart/DonutChart.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../utils/classNames';
+import { donutChartClassnames } from './constants';
+import { Content, ProgressArc, Svg, TrackArc, Wrapper } from './styles';
+import { useLogic } from './useLogic';
+export const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', className, style, }) => {
+    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = useLogic({ value, maxValue, color, colorIntensity });
+    return (_jsxs(Wrapper, { ref: rootRef, className: classNames(donutChartClassnames.root, className), role: "meter", "aria-label": meterAriaValue.label, "aria-valuemin": meterAriaValue.min, "aria-valuemax": meterAriaValue.max, "aria-valuenow": meterAriaValue.now, style: { ...donutParams?.cssVars, ...style }, children: [donutParams && (_jsxs(Svg, { className: donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [_jsx(TrackArc, { className: donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), _jsx(ProgressArc, { className: donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && (_jsx(Content, { className: donutChartClassnames.content, children: children }))] }));
+};

package/components/DonutChart/constants.d.ts

@@ -0,0 +1,15 @@
+/** Нормализованная система координат SVG. Масштаб — через CSS 100%. */
+export declare const DONUT_CHART_VIEWBOX = 100;
+/** Центр дуги в координатах viewBox (cx, cy). */
+export declare const DONUT_CHART_VIEWBOX_CENTER: number;
+/** Толщина обводки на экране (px), пересчитывается в единицы viewBox через getGeometry. */
+export declare const DONUT_CHART_STROKE_WIDTH = 8;
+/** Атрибут viewBox SVG (квадрат DONUT_CHART_VIEWBOX × DONUT_CHART_VIEWBOX). */
+export declare const DONUT_CHART_SVG_VIEWBOX: "0 0 100 100";
+export declare const donutChartClassnames: {
+    root: string;
+    svg: string;
+    track: string;
+    progress: string;
+    content: string;
+};

package/components/DonutChart/constants.js

@@ -0,0 +1,16 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+/** Нормализованная система координат SVG. Масштаб — через CSS 100%. */
+export const DONUT_CHART_VIEWBOX = 100;
+/** Центр дуги в координатах viewBox (cx, cy). */
+export const DONUT_CHART_VIEWBOX_CENTER = DONUT_CHART_VIEWBOX / 2;
+/** Толщина обводки на экране (px), пересчитывается в единицы viewBox через getGeometry. */
+export const DONUT_CHART_STROKE_WIDTH = 8;
+/** Атрибут viewBox SVG (квадрат DONUT_CHART_VIEWBOX × DONUT_CHART_VIEWBOX). */
+export const DONUT_CHART_SVG_VIEWBOX = `0 0 ${DONUT_CHART_VIEWBOX} ${DONUT_CHART_VIEWBOX}`;
+export const donutChartClassnames = {
+    root: createUIKitClassname('donut-chart'),
+    svg: createUIKitClassname('donut-chart__svg'),
+    track: createUIKitClassname('donut-chart__track'),
+    progress: createUIKitClassname('donut-chart__progress'),
+    content: createUIKitClassname('donut-chart__content'),
+};

package/components/DonutChart/index.d.ts

@@ -0,0 +1,3 @@
+export { DonutChart } from './DonutChart';
+export type { DonutChartProps } from './types';
+export { donutChartClassnames } from './constants';

package/components/DonutChart/index.js

@@ -0,0 +1,2 @@
+export { DonutChart } from './DonutChart';
+export { donutChartClassnames } from './constants';

package/components/DonutChart/public.d.ts

@@ -0,0 +1,3 @@
+export { donutChartClassnames } from './constants';
+export { DonutChart } from './DonutChart';
+export type { DonutChartProps } from './types';

package/components/DonutChart/public.js

@@ -0,0 +1,2 @@
+export { donutChartClassnames } from './constants';
+export { DonutChart } from './DonutChart';

package/components/DonutChart/styles.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Svg: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const TrackArc: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGCircleElement>, {}>;
+export declare const ProgressArc: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").SVGProps<SVGPathElement>, {}>;
+export declare const Content: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DonutChart/styles.js

@@ -0,0 +1,41 @@
+import { styled } from '../styled';
+export const Wrapper = styled.div `
+  position: relative;
+
+  aspect-ratio: 1 / 1;
+  width: 100%;
+`;
+export const Svg = styled.svg `
+  /* Старт дуги (точка 3 часа) переносим наверх. */
+  transform: rotate(-90deg);
+
+  display: block;
+
+  width: 100%;
+  height: 100%;
+`;
+export const TrackArc = styled.circle `
+  fill: none;
+  stroke: ${({ theme }) => theme.palette.grey[100]};
+  stroke-linecap: round;
+  stroke-width: var(--donut-chart-stroke-width);
+`;
+export const ProgressArc = styled.path `
+  fill: none;
+  stroke: var(--donut-chart-progress-color);
+  stroke-linecap: round;
+  stroke-width: var(--donut-chart-stroke-width);
+
+  transition: stroke-dashoffset
+    ${({ theme }) => theme.transitions.duration.standard}ms ease-in-out;
+`;
+export const Content = styled.div `
+  position: absolute;
+  inset: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: ${({ theme }) => theme.spacing(4)};
+`;

package/components/DonutChart/types.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type DonutChartColor = 'primary' | 'success' | 'warning' | 'error' | 'grey' | 'red' | 'green' | 'yellow';
+export type DonutChartColorIntensity = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100';
+export type DonutChartProps = {
+    value: number;
+    maxValue: number;
+    /**
+     * Контент в центре. Можно передать другой `DonutChart`.
+     */
+    children?: ReactNode;
+    /**
+     * Цвет.
+     */
+    color?: DonutChartColor;
+    /**
+     * Интенсивность цвета.
+     */
+    colorIntensity?: DonutChartColorIntensity;
+    /**
+     * CSS-класс для корневого элемента.
+     */
+    className?: string;
+    /**
+     * Стили для корневого элемента.
+     */
+    style?: CSSProperties;
+};

package/components/DonutChart/types.js

@@ -0,0 +1 @@
+export {};

package/components/DonutChart/useLogic/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useRenderWidth';

package/components/DonutChart/useLogic/hooks/index.js

@@ -0,0 +1 @@
+export * from './useRenderWidth';

package/components/DonutChart/useLogic/hooks/useRenderWidth/index.d.ts

@@ -0,0 +1 @@
+export * from './useRenderWidth';

package/components/DonutChart/useLogic/hooks/useRenderWidth/index.js

@@ -0,0 +1 @@
+export * from './useRenderWidth';

package/components/DonutChart/useLogic/hooks/useRenderWidth/useRenderWidth.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Отслеживает ширину элемента и обновляет значение при resize.
+ * @returns Объект с ref для присоединения к элементу и текущей шириной в пикселях
+ */
+export declare const useRenderWidth: () => {
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    renderWidth: number | null;
+};

package/components/DonutChart/useLogic/hooks/useRenderWidth/useRenderWidth.js

@@ -0,0 +1,30 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+/**
+ * Отслеживает ширину элемента и обновляет значение при resize.
+ * @returns Объект с ref для присоединения к элементу и текущей шириной в пикселях
+ */
+export const useRenderWidth = () => {
+    const rootRef = useRef(null);
+    const [renderWidth, setRenderWidth] = useState(null);
+    useLayoutEffect(() => {
+        const node = rootRef.current;
+        if (!node) {
+            return;
+        }
+        const initialWidth = node.getBoundingClientRect().width;
+        if (initialWidth > 0) {
+            setRenderWidth(initialWidth);
+        }
+        const resizeObserver = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ?? 0;
+            if (width > 0) {
+                setRenderWidth(width);
+            }
+        });
+        resizeObserver.observe(node);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return { rootRef, renderWidth };
+};

package/components/DonutChart/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/DonutChart/useLogic/index.js

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/DonutChart/useLogic/useLogic.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { DonutChartProps } from '../types';
+export declare const useLogic: ({ value, maxValue, color, colorIntensity, }: DonutChartProps) => {
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    svgViewBox: "0 0 100 100";
+    arcCx: number;
+    arcCy: number;
+    donutParams: {
+        arcR: number;
+        arcPath: string;
+        progressOffset: number;
+        cssVars: import("react").CSSProperties;
+    } | null;
+    meterAriaValue: import("./utils/getMeterAriaValue").MeterAriaValue;
+};

package/components/DonutChart/useLogic/useLogic.js

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { useTheme } from '../../theme/hooks/useTheme';
+import { DONUT_CHART_SVG_VIEWBOX, DONUT_CHART_VIEWBOX_CENTER, } from '../constants';
+import { useRenderWidth } from './hooks';
+import { getDonutChartCssVars } from './utils/getDonutChartCssVars';
+import { getGeometry } from './utils/getGeometry';
+import { getMeterAriaValue } from './utils/getMeterAriaValue';
+import { getProgressCirclePath } from './utils/getProgressCirclePath';
+import { getProgressOffset } from './utils/getProgressOffset';
+import { getProgressPercent } from './utils/getProgressPercent';
+export const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', }) => {
+    const theme = useTheme();
+    const { rootRef, renderWidth } = useRenderWidth();
+    const progressPercent = getProgressPercent(value, maxValue);
+    const meterAriaValue = getMeterAriaValue(value, maxValue);
+    const donutParams = useMemo(() => {
+        if (renderWidth === null) {
+            return null;
+        }
+        const { stroke, radius, roundCapPercent } = getGeometry(renderWidth);
+        return {
+            arcR: radius,
+            arcPath: getProgressCirclePath(DONUT_CHART_VIEWBOX_CENTER, DONUT_CHART_VIEWBOX_CENTER, radius),
+            progressOffset: getProgressOffset(progressPercent, roundCapPercent),
+            cssVars: getDonutChartCssVars(theme, {
+                color,
+                colorIntensity,
+                strokeWidth: stroke,
+            }),
+        };
+    }, [renderWidth, progressPercent, color, colorIntensity, theme]);
+    return {
+        rootRef,
+        svgViewBox: DONUT_CHART_SVG_VIEWBOX,
+        arcCx: DONUT_CHART_VIEWBOX_CENTER,
+        arcCy: DONUT_CHART_VIEWBOX_CENTER,
+        donutParams,
+        meterAriaValue,
+    };
+};

package/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+import type { Theme } from '../../../../theme/types';
+import type { DonutChartColor, DonutChartColorIntensity } from '../../../types';
+type GetDonutChartCssVarsParams = {
+    color: DonutChartColor;
+    colorIntensity: DonutChartColorIntensity;
+    strokeWidth: number;
+};
+/**
+ * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
+ * @param theme - Объект темы с палитрой цветов
+ * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @returns CSS свойства для диаграммы
+ */
+export declare const getDonutChartCssVars: (theme: Theme, { color, colorIntensity, strokeWidth }: GetDonutChartCssVarsParams) => CSSProperties;
+export {};

package/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.js

@@ -0,0 +1,10 @@
+/**
+ * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
+ * @param theme - Объект темы с палитрой цветов
+ * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @returns CSS свойства для диаграммы
+ */
+export const getDonutChartCssVars = (theme, { color, colorIntensity, strokeWidth }) => ({
+    '--donut-chart-stroke-width': String(strokeWidth),
+    '--donut-chart-progress-color': theme.palette[color][colorIntensity],
+});

package/components/DonutChart/useLogic/utils/getDonutChartCssVars/index.d.ts

@@ -0,0 +1 @@
+export { getDonutChartCssVars } from './getDonutChartCssVars';

package/components/DonutChart/useLogic/utils/getDonutChartCssVars/index.js

@@ -0,0 +1 @@
+export { getDonutChartCssVars } from './getDonutChartCssVars';

package/components/DonutChart/useLogic/utils/getGeometry/getGeometry.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Вычисляет геометрию дуги в координатах viewBox по ширине контейнера.
+ * @param renderWidth - Ширина контейнера в пикселях
+ * @returns Геометрия дуги со stroke, радиусом и процентом round cap для расчетов
+ */
+export declare const getGeometry: (renderWidth: number) => {
+    stroke: number;
+    radius: number;
+    roundCapPercent: number;
+};

package/components/DonutChart/useLogic/utils/getGeometry/getGeometry.js

@@ -0,0 +1,13 @@
+import { DONUT_CHART_STROKE_WIDTH, DONUT_CHART_VIEWBOX, DONUT_CHART_VIEWBOX_CENTER, } from '../../../constants';
+/**
+ * Вычисляет геометрию дуги в координатах viewBox по ширине контейнера.
+ * @param renderWidth - Ширина контейнера в пикселях
+ * @returns Геометрия дуги со stroke, радиусом и процентом round cap для расчетов
+ */
+export const getGeometry = (renderWidth) => {
+    const stroke = (DONUT_CHART_STROKE_WIDTH * DONUT_CHART_VIEWBOX) / renderWidth;
+    const radius = DONUT_CHART_VIEWBOX_CENTER - stroke / 2;
+    const circumference = 2 * Math.PI * radius;
+    const roundCapPercent = (stroke / circumference) * 100;
+    return { stroke, radius, roundCapPercent };
+};

package/components/DonutChart/useLogic/utils/getGeometry/index.d.ts

@@ -0,0 +1 @@
+export { getGeometry } from './getGeometry';

package/components/DonutChart/useLogic/utils/getGeometry/index.js

@@ -0,0 +1 @@
+export { getGeometry } from './getGeometry';

package/components/DonutChart/useLogic/utils/getMeterAriaValue/getMeterAriaValue.d.ts

@@ -0,0 +1,13 @@
+export type MeterAriaValue = {
+    min: number;
+    max: number;
+    now: number;
+    label: string;
+};
+/**
+ * Нормализует value/maxValue для ARIA role="meter" с проверкой границ.
+ * @param value - Текущее значение
+ * @param maxValue - Максимальное значение (должно быть положительным и конечным)
+ * @returns ARIA атрибуты с свойствами min, max, now для role="meter"
+ */
+export declare const getMeterAriaValue: (value: number, maxValue: number) => MeterAriaValue;

package/components/DonutChart/useLogic/utils/getMeterAriaValue/getMeterAriaValue.js

@@ -0,0 +1,22 @@
+/**
+ * Нормализует value/maxValue для ARIA role="meter" с проверкой границ.
+ * @param value - Текущее значение
+ * @param maxValue - Максимальное значение (должно быть положительным и конечным)
+ * @returns ARIA атрибуты с свойствами min, max, now для role="meter"
+ */
+export const getMeterAriaValue = (value, maxValue) => {
+    const min = 0;
+    if (!Number.isFinite(maxValue) || maxValue <= 0) {
+        return { min, max: 1, now: 0, label: '0 / 1' };
+    }
+    if (!Number.isFinite(value)) {
+        return { min, max: maxValue, now: 0, label: `0 / ${maxValue}` };
+    }
+    const now = Math.max(min, Math.min(maxValue, value));
+    return {
+        min,
+        max: maxValue,
+        now,
+        label: `${now} / ${maxValue}`,
+    };
+};

package/components/DonutChart/useLogic/utils/getMeterAriaValue/index.d.ts

@@ -0,0 +1 @@
+export { getMeterAriaValue, type MeterAriaValue } from './getMeterAriaValue';

package/components/DonutChart/useLogic/utils/getMeterAriaValue/index.js

@@ -0,0 +1 @@
+export { getMeterAriaValue } from './getMeterAriaValue';

package/components/DonutChart/useLogic/utils/getProgressCirclePath/getProgressCirclePath.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Строит `d` полного круга из двух полудуг.
+ * Без `Z` — открытый путь без шва, поэтому нет 1px-артефакта на стыке.
+ * @param cx - Центр по X
+ * @param cy - Центр по Y
+ * @param r - Радиус
+ * @returns Значение атрибута `d`
+ */
+export declare const getProgressCirclePath: (cx: number, cy: number, r: number) => string;

package/components/DonutChart/useLogic/utils/getProgressCirclePath/getProgressCirclePath.js

@@ -0,0 +1,29 @@
+/** Точка на окружности по углу (0° — 3 часа, далее по часовой: y растёт вниз). */
+const polarToCartesian = (cx, cy, r, angleDeg) => {
+    const angleRad = (angleDeg * Math.PI) / 180;
+    return {
+        x: cx + r * Math.cos(angleRad),
+        y: cy + r * Math.sin(angleRad),
+    };
+};
+/**
+ * Строит `d` полного круга из двух полудуг.
+ * Без `Z` — открытый путь без шва, поэтому нет 1px-артефакта на стыке.
+ * @param cx - Центр по X
+ * @param cy - Центр по Y
+ * @param r - Радиус
+ * @returns Значение атрибута `d`
+ */
+export const getProgressCirclePath = (cx, cy, r) => {
+    const start = polarToCartesian(cx, cy, r, 0);
+    const half = polarToCartesian(cx, cy, r, 180);
+    // Округляем координаты.
+    const f = (n) => Number(n.toFixed(3));
+    // Две полудуги (0°→180°→360°). Конец совпадает со стартом, но без `Z` —
+    // путь остаётся открытым, поэтому шва-стыка (источник 1px) не возникает.
+    return [
+        `M ${f(start.x)} ${f(start.y)}`,
+        `A ${f(r)} ${f(r)} 0 0 1 ${f(half.x)} ${f(half.y)}`,
+        `A ${f(r)} ${f(r)} 0 0 1 ${f(start.x)} ${f(start.y)}`,
+    ].join(' ');
+};

package/components/DonutChart/useLogic/utils/getProgressCirclePath/index.d.ts

@@ -0,0 +1 @@
+export { getProgressCirclePath } from './getProgressCirclePath';

package/components/DonutChart/useLogic/utils/getProgressCirclePath/index.js

@@ -0,0 +1 @@
+export { getProgressCirclePath } from './getProgressCirclePath';

package/components/DonutChart/useLogic/utils/getProgressOffset/getProgressOffset.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Вычисляет stroke-dashoffset для SVG дуги с компенсацией round linecap.
+ * Выше 90% слегка уменьшает дисплей-процент, чтобы кэп не переливал за 100%.
+ * @param percent - Процент прогресса (0–100)
+ * @param roundCapPercent - Визуальная ширина round cap в процентах от окружности
+ * @returns Значение offset от 0 (полностью видно) до 1 (скрыто)
+ */
+export declare const getProgressOffset: (percent: number, roundCapPercent: number) => number;

package/components/DonutChart/useLogic/utils/getProgressOffset/getProgressOffset.js

@@ -0,0 +1,21 @@
+/** С какого процента начинаем компенсировать round linecap у конца дуги */
+const ROUND_CAP_RAMP_START = 90;
+/**
+ * Вычисляет stroke-dashoffset для SVG дуги с компенсацией round linecap.
+ * Выше 90% слегка уменьшает дисплей-процент, чтобы кэп не переливал за 100%.
+ * @param percent - Процент прогресса (0–100)
+ * @param roundCapPercent - Визуальная ширина round cap в процентах от окружности
+ * @returns Значение offset от 0 (полностью видно) до 1 (скрыто)
+ */
+export const getProgressOffset = (percent, roundCapPercent) => {
+    if (percent >= 100) {
+        return 0;
+    }
+    if (percent <= 0) {
+        return 1;
+    }
+    const roundCapRampProgress = Math.max(0, (percent - ROUND_CAP_RAMP_START) / (100 - ROUND_CAP_RAMP_START));
+    const displayPercent = percent - roundCapPercent * roundCapRampProgress;
+    const offset = 1 - displayPercent / 100;
+    return Math.round(offset * 1000) / 1000;
+};

package/components/DonutChart/useLogic/utils/getProgressOffset/index.d.ts

@@ -0,0 +1 @@
+export { getProgressOffset } from './getProgressOffset';

package/components/DonutChart/useLogic/utils/getProgressOffset/index.js

@@ -0,0 +1 @@
+export { getProgressOffset } from './getProgressOffset';

package/components/DonutChart/useLogic/utils/getProgressPercent/getProgressPercent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Преобразует value/maxValue в целый процент 0–100.
+ * Дробная часть отбрасывается вниз, некорректные значения дают 0.
+ * @param value - Текущее значение
+ * @param maxValue - Максимальное значение (должно быть положительным и конечным)
+ * @returns Целый процент от 0 до 100
+ */
+export declare const getProgressPercent: (value: number, maxValue: number) => number;

package/components/DonutChart/useLogic/utils/getProgressPercent/getProgressPercent.js

@@ -0,0 +1,16 @@
+/**
+ * Преобразует value/maxValue в целый процент 0–100.
+ * Дробная часть отбрасывается вниз, некорректные значения дают 0.
+ * @param value - Текущее значение
+ * @param maxValue - Максимальное значение (должно быть положительным и конечным)
+ * @returns Целый процент от 0 до 100
+ */
+export const getProgressPercent = (value, maxValue) => {
+    if (!Number.isFinite(maxValue) || maxValue <= 0) {
+        return 0;
+    }
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.max(0, Math.min(100, Math.floor((value / maxValue) * 100)));
+};

package/components/DonutChart/useLogic/utils/getProgressPercent/index.d.ts

@@ -0,0 +1 @@
+export { getProgressPercent } from './getProgressPercent';

package/components/DonutChart/useLogic/utils/getProgressPercent/index.js

@@ -0,0 +1 @@
+export { getProgressPercent } from './getProgressPercent';