@astral/ui 4.108.0 → 4.109.0

package/components/DonutChart/DonutChart.d.ts

@@ -1,2 +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;
+export declare const DonutChart: ({ value, maxValue, children, color, colorIntensity, trackColorIntensity, className, style, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;

package/components/DonutChart/DonutChart.js

@@ -3,7 +3,7 @@ import { cn } from '../utils/cn';
 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 });
+export const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', className, style, }) => {
+    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = useLogic({ value, maxValue, color, colorIntensity, trackColorIntensity });
     return (_jsxs(Wrapper, { ref: rootRef, className: cn(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/styles.js

@@ -16,7 +16,7 @@ export const Svg = styled.svg `
 `;
 export const TrackArc = styled.circle `
   fill: none;
-  stroke: ${({ theme }) => theme.palette.grey[100]};
+  stroke: var(--donut-chart-track-color);
   stroke-linecap: round;
   stroke-width: var(--donut-chart-stroke-width);
 `;

package/components/DonutChart/types.d.ts

@@ -16,6 +16,11 @@ export type DonutChartProps = {
      * Интенсивность цвета.
      */
     colorIntensity?: DonutChartColorIntensity;
+    /**
+     * Интенсивность цвета для фонового кольца.
+     * @default '100'
+     */
+    trackColorIntensity?: DonutChartColorIntensity;
     /**
      * CSS-класс для корневого элемента.
      */

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DonutChartProps } from '../types';
-export declare const useLogic: ({ value, maxValue, color, colorIntensity, }: DonutChartProps) => {
+export declare const useLogic: ({ value, maxValue, color, colorIntensity, trackColorIntensity, }: DonutChartProps) => {
     rootRef: import("react").RefObject<HTMLDivElement | null>;
     svgViewBox: "0 0 100 100";
     arcCx: number;

package/components/DonutChart/useLogic/useLogic.js

@@ -8,7 +8,7 @@ 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', }) => {
+export const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', }) => {
     const theme = useTheme();
     const { rootRef, renderWidth } = useRenderWidth();
     const progressPercent = getProgressPercent(value, maxValue);
@@ -25,10 +25,18 @@ export const useLogic = ({ value, maxValue, color = 'primary', colorIntensity =
             cssVars: getDonutChartCssVars(theme, {
                 color,
                 colorIntensity,
+                trackColorIntensity,
                 strokeWidth: stroke,
             }),
         };
-    }, [renderWidth, progressPercent, color, colorIntensity, theme]);
+    }, [
+        renderWidth,
+        progressPercent,
+        color,
+        colorIntensity,
+        trackColorIntensity,
+        theme,
+    ]);
     return {
         rootRef,
         svgViewBox: DONUT_CHART_SVG_VIEWBOX,

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

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

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

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

package/node/components/DonutChart/DonutChart.d.ts

@@ -1,2 +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;
+export declare const DonutChart: ({ value, maxValue, children, color, colorIntensity, trackColorIntensity, className, style, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/DonutChart/DonutChart.js

@@ -6,8 +6,8 @@ const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
-const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', className, style, }) => {
-    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = (0, useLogic_1.useLogic)({ value, maxValue, color, colorIntensity });
+const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', className, style, }) => {
+    const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = (0, useLogic_1.useLogic)({ value, maxValue, color, colorIntensity, trackColorIntensity });
     return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: rootRef, className: (0, cn_1.cn)(constants_1.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 && ((0, jsx_runtime_1.jsxs)(styles_1.Svg, { className: constants_1.donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(styles_1.TrackArc, { className: constants_1.donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), (0, jsx_runtime_1.jsx)(styles_1.ProgressArc, { className: constants_1.donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && ((0, jsx_runtime_1.jsx)(styles_1.Content, { className: constants_1.donutChartClassnames.content, children: children }))] }));
 };
 exports.DonutChart = DonutChart;

package/node/components/DonutChart/styles.js

@@ -19,7 +19,7 @@ exports.Svg = styled_1.styled.svg `
 `;
 exports.TrackArc = styled_1.styled.circle `
   fill: none;
-  stroke: ${({ theme }) => theme.palette.grey[100]};
+  stroke: var(--donut-chart-track-color);
   stroke-linecap: round;
   stroke-width: var(--donut-chart-stroke-width);
 `;

package/node/components/DonutChart/types.d.ts

@@ -16,6 +16,11 @@ export type DonutChartProps = {
      * Интенсивность цвета.
      */
     colorIntensity?: DonutChartColorIntensity;
+    /**
+     * Интенсивность цвета для фонового кольца.
+     * @default '100'
+     */
+    trackColorIntensity?: DonutChartColorIntensity;
     /**
      * CSS-класс для корневого элемента.
      */

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DonutChartProps } from '../types';
-export declare const useLogic: ({ value, maxValue, color, colorIntensity, }: DonutChartProps) => {
+export declare const useLogic: ({ value, maxValue, color, colorIntensity, trackColorIntensity, }: DonutChartProps) => {
     rootRef: import("react").RefObject<HTMLDivElement | null>;
     svgViewBox: "0 0 100 100";
     arcCx: number;

package/node/components/DonutChart/useLogic/useLogic.js

@@ -11,7 +11,7 @@ const getMeterAriaValue_1 = require("./utils/getMeterAriaValue");
 const getProgressCirclePath_1 = require("./utils/getProgressCirclePath");
 const getProgressOffset_1 = require("./utils/getProgressOffset");
 const getProgressPercent_1 = require("./utils/getProgressPercent");
-const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', }) => {
+const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', trackColorIntensity = '100', }) => {
     const theme = (0, useTheme_1.useTheme)();
     const { rootRef, renderWidth } = (0, hooks_1.useRenderWidth)();
     const progressPercent = (0, getProgressPercent_1.getProgressPercent)(value, maxValue);
@@ -28,10 +28,18 @@ const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700',
             cssVars: (0, getDonutChartCssVars_1.getDonutChartCssVars)(theme, {
                 color,
                 colorIntensity,
+                trackColorIntensity,
                 strokeWidth: stroke,
             }),
         };
-    }, [renderWidth, progressPercent, color, colorIntensity, theme]);
+    }, [
+        renderWidth,
+        progressPercent,
+        color,
+        colorIntensity,
+        trackColorIntensity,
+        theme,
+    ]);
     return {
         rootRef,
         svgViewBox: constants_1.DONUT_CHART_SVG_VIEWBOX,

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.108.0",
+  "version": "4.109.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {