@wallarm-org/design-system 0.32.0 → 0.32.1

package/dist/components/SimpleCharts/PieChart/PieChartCenter.d.ts

@@ -1,13 +1,54 @@
-import type { FC, HTMLAttributes, Ref } from 'react';
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type PieChartDatum } from './PieChartContext';
 export interface PieChartCenterProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
 }
 export declare const PieChartCenter: FC<PieChartCenterProps>;
 export interface PieChartCenterValueProps extends HTMLAttributes<HTMLSpanElement> {
     ref?: Ref<HTMLSpanElement>;
+    /**
+     * When `true` (default), hovering a slice or legend row replaces `children` with the
+     * hovered datum's value (formatted via `formatHoveredValue`). Set to `false` to keep
+     * `children` visible regardless of hover state — useful when the centre value should
+     * always reflect the unfiltered total.
+     */
+    hoverSync?: boolean;
+    /**
+     * Formatter applied to the hovered datum when `hoverSync` is enabled. Defaults to
+     * `datum.value.toLocaleString()`. Pass a custom formatter to keep the hover format
+     * aligned with whatever formatter produced `children` (e.g. compact notation, units).
+     */
+    formatHoveredValue?: (datum: PieChartDatum) => ReactNode;
 }
 export declare const PieChartCenterValue: FC<PieChartCenterValueProps>;
+/**
+ * CLDR plural categories supported by `Intl.PluralRules`. `other` is required as the
+ * fallback for any category the rules object does not define.
+ */
+export interface PieChartCenterLabelPluralRules {
+    zero?: ReactNode;
+    one?: ReactNode;
+    two?: ReactNode;
+    few?: ReactNode;
+    many?: ReactNode;
+    other: ReactNode;
+    /** BCP-47 locale tag forwarded to `Intl.PluralRules`. Defaults to `'en'`. */
+    locale?: string;
+}
 export interface PieChartCenterLabelProps extends HTMLAttributes<HTMLSpanElement> {
     ref?: Ref<HTMLSpanElement>;
+    /**
+     * When `true` (default), the label tracks the hovered slice/legend row — so a
+     * `pluralize` rules object picks the form for the hovered datum's value rather than
+     * the chart total. Has no effect when `pluralize` is omitted.
+     */
+    hoverSync?: boolean;
+    /**
+     * Optional pluralization rules. When provided, the label content is selected from
+     * the rules using `Intl.PluralRules` for the currently visible count (the hovered
+     * datum's value when `hoverSync` is on, otherwise the chart total). When omitted,
+     * `children` renders unchanged.
+     */
+    pluralize?: PieChartCenterLabelPluralRules;
 }
 export declare const PieChartCenterLabel: FC<PieChartCenterLabelProps>;

package/dist/components/SimpleCharts/PieChart/PieChartCenter.js

@@ -1,7 +1,9 @@
 import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { pieChartCenterClasses, pieChartCenterLabelClasses, pieChartCenterValueClasses } from "./classes.js";
+import { PieChartActiveContext, PieChartDataContext } from "./PieChartContext.js";
 const PieChartCenter = ({ className, ref, ...props })=>{
     const testId = useTestId('center');
     return /*#__PURE__*/ jsx("div", {
@@ -14,25 +16,48 @@ const PieChartCenter = ({ className, ref, ...props })=>{
     });
 };
 PieChartCenter.displayName = 'PieChartCenter';
-const PieChartCenterValue = ({ className, ref, ...props })=>{
+const defaultFormatHoveredValue = (datum)=>datum.value.toLocaleString();
+const PieChartCenterValue = ({ hoverSync = true, formatHoveredValue = defaultFormatHoveredValue, className, children, ref, ...props })=>{
     const testId = useTestId('center-value');
+    const dataCtx = useContext(PieChartDataContext);
+    const { activeName } = useContext(PieChartActiveContext);
+    const hoveredDatum = hoverSync && null !== activeName ? dataCtx?.byName.get(activeName) ?? null : null;
+    const content = hoveredDatum ? formatHoveredValue(hoveredDatum) : children;
     return /*#__PURE__*/ jsx("span", {
         ...props,
         ref: ref,
         "data-slot": "pie-chart-center-value",
         "data-testid": testId,
-        className: cn(pieChartCenterValueClasses, className)
+        "data-hovered": hoveredDatum ? 'true' : void 0,
+        className: cn(pieChartCenterValueClasses, className),
+        children: content
     });
 };
 PieChartCenterValue.displayName = 'PieChartCenterValue';
-const PieChartCenterLabel = ({ className, ref, ...props })=>{
+const PieChartCenterLabel = ({ hoverSync = true, pluralize, className, children, ref, ...props })=>{
     const testId = useTestId('center-label');
+    const dataCtx = useContext(PieChartDataContext);
+    const { activeName } = useContext(PieChartActiveContext);
+    const hasPluralize = !!pluralize;
+    const pluralLocale = pluralize?.locale ?? 'en';
+    const pluralRules = useMemo(()=>hasPluralize ? new Intl.PluralRules(pluralLocale) : null, [
+        hasPluralize,
+        pluralLocale
+    ]);
+    let content = children;
+    if (pluralize && pluralRules) {
+        const hoveredValue = hoverSync && null !== activeName ? dataCtx?.byName.get(activeName)?.value ?? null : null;
+        const count = hoveredValue ?? dataCtx?.total ?? 0;
+        const matched = pluralize[pluralRules.select(count)];
+        content = void 0 !== matched ? matched : pluralize.other;
+    }
     return /*#__PURE__*/ jsx("span", {
         ...props,
         ref: ref,
         "data-slot": "pie-chart-center-label",
         "data-testid": testId,
-        className: cn(pieChartCenterLabelClasses, className)
+        className: cn(pieChartCenterLabelClasses, className),
+        children: content
     });
 };
 PieChartCenterLabel.displayName = 'PieChartCenterLabel';

package/dist/components/SimpleCharts/PieChart/PieChartContext.d.ts

@@ -54,6 +54,7 @@ export interface PieChartItemContextValue {
     active: boolean;
 }
 export declare const EMPTY_SELECTION: Set<string>;
+export declare const isHoverSyncTarget: (target: EventTarget | null | undefined) => boolean;
 export declare const PieChartDataContext: import("react").Context<PieChartDataContextValue | null>;
 export declare const PieChartActiveContext: import("react").Context<PieChartActiveContextValue>;
 export declare const PieChartSelectionContext: import("react").Context<PieChartSelectionContextValue>;

package/dist/components/SimpleCharts/PieChart/PieChartContext.js

@@ -1,5 +1,7 @@
 import { createContext } from "react";
 const EMPTY_SELECTION = new Set();
+const HOVER_SYNC_SELECTOR = '[data-slot="pie-chart-legend-item"], [data-slot="pie-chart-slice"]';
+const isHoverSyncTarget = (target)=>target instanceof Element && null !== target.closest(HOVER_SYNC_SELECTOR);
 const PieChartDataContext = createContext(null);
 const PieChartActiveContext = createContext({
     activeName: null
@@ -8,4 +10,4 @@ const PieChartSelectionContext = createContext({
     selectedSet: EMPTY_SELECTION
 });
 const PieChartItemContext = createContext(null);
-export { EMPTY_SELECTION, PieChartActiveContext, PieChartDataContext, PieChartItemContext, PieChartSelectionContext };
+export { EMPTY_SELECTION, PieChartActiveContext, PieChartDataContext, PieChartItemContext, PieChartSelectionContext, isHoverSyncTarget };

package/dist/components/SimpleCharts/PieChart/PieChartDonut.js

@@ -5,7 +5,7 @@ import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { pieChartDonutClasses } from "./classes.js";
 import { PIE_DONUT_ANIMATION_BEGIN, PIE_DONUT_ANIMATION_DURATION, PIE_DONUT_CORNER_RADIUS, PIE_DONUT_INNER_RADIUS, PIE_DONUT_OUTER_RADIUS, PIE_DONUT_PADDING_ANGLE, PIE_DONUT_SIZE, PIE_SLICE_FILL } from "./constants.js";
-import { PieChartActiveContext, PieChartDataContext, PieChartSelectionContext } from "./PieChartContext.js";
+import { PieChartActiveContext, PieChartDataContext, PieChartSelectionContext, isHoverSyncTarget } from "./PieChartContext.js";
 const PLACEHOLDER_DATA = [
     {
         name: '',
@@ -24,7 +24,8 @@ const PieChartDonut = ({ inactiveOpacity = 0.3, disableAnimation = false, classN
     }, [
         dataCtx
     ]);
-    const handleLeave = useCallback(()=>{
+    const handleLeave = useCallback((_data, _index, event)=>{
+        if (event && isHoverSyncTarget(event.relatedTarget)) return;
         dataCtx?.setActive(null);
     }, [
         dataCtx

package/dist/components/SimpleCharts/PieChart/PieChartLegendItem.js

@@ -4,7 +4,7 @@ import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { clamp01 } from "../lib/clamp01.js";
 import { pieChartLegendItemVariants } from "./classes.js";
-import { PieChartActiveContext, PieChartDataContext, PieChartItemContext, PieChartSelectionContext } from "./PieChartContext.js";
+import { PieChartActiveContext, PieChartDataContext, PieChartItemContext, PieChartSelectionContext, isHoverSyncTarget } from "./PieChartContext.js";
 const PieChartLegendItem = ({ name, value, selected: selectedProp, className, children, ref, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props })=>{
     const testId = useTestId('legend-item');
     const dataCtx = useContext(PieChartDataContext);
@@ -50,6 +50,7 @@ const PieChartLegendItem = ({ name, value, selected: selectedProp, className, ch
     const handleMouseLeave = useCallback((event)=>{
         onMouseLeave?.(event);
         if (event.defaultPrevented) return;
+        if (isHoverSyncTarget(event.relatedTarget)) return;
         setActive?.(null);
     }, [
         onMouseLeave,
@@ -67,6 +68,7 @@ const PieChartLegendItem = ({ name, value, selected: selectedProp, className, ch
     const handleBlur = useCallback((event)=>{
         onBlur?.(event);
         if (event.defaultPrevented) return;
+        if (isHoverSyncTarget(event.relatedTarget)) return;
         setActive?.(null);
     }, [
         onBlur,

package/dist/components/SimpleCharts/PieChart/PieChartSkeleton.js

@@ -33,7 +33,8 @@ const PieChartSkeleton = ({ rows = 5, className, ref, 'data-testid': testId, ...
                     children: /*#__PURE__*/ jsx(Skeleton, {
                         width: "120px",
                         height: "120px",
-                        rounded: "full"
+                        rounded: "full",
+                        className: "mask-[radial-gradient(circle,transparent_48px,#000_49px)]"
                     })
                 }),
                 /*#__PURE__*/ jsx("div", {

package/dist/components/SimpleCharts/PieChart/constants.d.ts

@@ -1,8 +1,8 @@
 import type { ChartColor } from '../types';
 export declare const PIE_DONUT_SIZE = 120;
 export declare const PIE_DONUT_OUTER_RADIUS = 60;
-export declare const PIE_DONUT_INNER_RADIUS = 44;
-export declare const PIE_DONUT_CORNER_RADIUS = 4;
+export declare const PIE_DONUT_INNER_RADIUS = 48;
+export declare const PIE_DONUT_CORNER_RADIUS = 2;
 export declare const PIE_DONUT_PADDING_ANGLE = 2;
 export declare const PIE_DONUT_ANIMATION_DURATION = 400;
 export declare const PIE_DONUT_ANIMATION_BEGIN = 0;

package/dist/components/SimpleCharts/PieChart/constants.js

@@ -1,7 +1,7 @@
 const PIE_DONUT_SIZE = 120;
 const PIE_DONUT_OUTER_RADIUS = 60;
-const PIE_DONUT_INNER_RADIUS = 44;
-const PIE_DONUT_CORNER_RADIUS = 4;
+const PIE_DONUT_INNER_RADIUS = 48;
+const PIE_DONUT_CORNER_RADIUS = 2;
 const PIE_DONUT_PADDING_ANGLE = 2;
 const PIE_DONUT_ANIMATION_DURATION = 400;
 const PIE_DONUT_ANIMATION_BEGIN = 0;

package/dist/components/SimpleCharts/PieChart/index.d.ts

@@ -1,6 +1,6 @@
 export { LegendDot, type LegendDotProps } from './LegendDot';
 export { PieChart, type PieChartProps } from './PieChart';
-export { PieChartCenter, PieChartCenterLabel, type PieChartCenterLabelProps, type PieChartCenterProps, PieChartCenterValue, type PieChartCenterValueProps, } from './PieChartCenter';
+export { PieChartCenter, PieChartCenterLabel, type PieChartCenterLabelPluralRules, type PieChartCenterLabelProps, type PieChartCenterProps, PieChartCenterValue, type PieChartCenterValueProps, } from './PieChartCenter';
 export type { PieChartDatum } from './PieChartContext';
 export { PieChartDonut, type PieChartDonutProps } from './PieChartDonut';
 export { PieChartLegend, type PieChartLegendProps } from './PieChartLegend';

package/dist/components/SimpleCharts/index.d.ts

@@ -1,4 +1,4 @@
 export { BarList, BarListBar, type BarListBarProps, BarListItem, type BarListItemProps, BarListLabel, type BarListLabelProps, BarListPercent, type BarListPercentProps, type BarListProps, BarListSkeleton, type BarListSkeletonProps, BarListValue, type BarListValueProps, } from './BarList';
 export { Chart, ChartActions, type ChartActionsProps, ChartEmpty, type ChartEmptyProps, ChartHeader, type ChartHeaderProps, type ChartProps, ChartTitle, type ChartTitleProps, } from './Chart';
-export { LegendDot, type LegendDotProps, PieChart, PieChartCenter, PieChartCenterLabel, type PieChartCenterLabelProps, type PieChartCenterProps, PieChartCenterValue, type PieChartCenterValueProps, type PieChartDatum, PieChartDonut, type PieChartDonutProps, PieChartLegend, PieChartLegendItem, type PieChartLegendItemProps, PieChartLegendPercent, type PieChartLegendPercentProps, type PieChartLegendPercentVariant, type PieChartLegendProps, PieChartLegendValue, type PieChartLegendValueProps, type PieChartProps, PieChartSkeleton, type PieChartSkeletonProps, } from './PieChart';
+export { LegendDot, type LegendDotProps, PieChart, PieChartCenter, PieChartCenterLabel, type PieChartCenterLabelPluralRules, type PieChartCenterLabelProps, type PieChartCenterProps, PieChartCenterValue, type PieChartCenterValueProps, type PieChartDatum, PieChartDonut, type PieChartDonutProps, PieChartLegend, PieChartLegendItem, type PieChartLegendItemProps, PieChartLegendPercent, type PieChartLegendPercentProps, type PieChartLegendPercentVariant, type PieChartLegendProps, PieChartLegendValue, type PieChartLegendValueProps, type PieChartProps, PieChartSkeleton, type PieChartSkeletonProps, } from './PieChart';
 export type { ChartColor } from './types';

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.31.1",
-  "generatedAt": "2026-04-28T15:04:58.905Z",
+  "version": "0.32.0",
+  "generatedAt": "2026-05-04T09:33:04.349Z",
   "components": [
     {
       "name": "Alert",
@@ -28353,6 +28353,18 @@
         {
           "name": "PieChartCenterLabel",
           "props": [
+            {
+              "name": "hoverSync",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "When `true` (default), the label tracks the hovered slice/legend row — so a\n`pluralize` rules object picks the form for the hovered datum's value rather than\nthe chart total. Has no effect when `pluralize` is omitted."
+            },
+            {
+              "name": "pluralize",
+              "type": "PieChartCenterLabelPluralRules | undefined",
+              "required": false,
+              "description": "Optional pluralization rules. When provided, the label content is selected from\nthe rules using `Intl.PluralRules` for the currently visible count (the hovered\ndatum's value when `hoverSync` is on, otherwise the chart total). When omitted,\n`children` renders unchanged."
+            },
             {
               "name": "defaultChecked",
               "type": "boolean | undefined",
@@ -28903,6 +28915,18 @@
         {
           "name": "PieChartCenterValue",
           "props": [
+            {
+              "name": "hoverSync",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "When `true` (default), hovering a slice or legend row replaces `children` with the\nhovered datum's value (formatted via `formatHoveredValue`). Set to `false` to keep\n`children` visible regardless of hover state — useful when the centre value should\nalways reflect the unfiltered total."
+            },
+            {
+              "name": "formatHoveredValue",
+              "type": "((datum: PieChartDatum) => ReactNode) | undefined",
+              "required": false,
+              "description": "Formatter applied to the hovered datum when `hoverSync` is enabled. Defaults to\n`datum.value.toLocaleString()`. Pass a custom formatter to keep the hover format\naligned with whatever formatter produced `children` (e.g. compact notation, units)."
+            },
             {
               "name": "defaultChecked",
               "type": "boolean | undefined",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",