@wallarm-org/design-system 0.31.1 → 0.32.0

package/dist/components/SimpleCharts/BarList/BarListItem.js

@@ -2,13 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback, useContext, useMemo } from "react";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
+import { clamp01 } from "../lib/clamp01.js";
 import { BarListContext, BarListItemContext } from "./BarListContext.js";
 import { barListItemVariants } from "./classes.js";
-const clamp01 = (n)=>{
-    if (n < 0) return 0;
-    if (n > 1) return 1;
-    return n;
-};
 const BarListItem = ({ value, selected = false, className, children, ref, onClick, onKeyDown, ...props })=>{
     const testId = useTestId('item');
     const listCtx = useContext(BarListContext);

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

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface LegendDotProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const LegendDot: FC<LegendDotProps>;

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { legendDotClasses } from "./classes.js";
+const LegendDot = ({ className, children, ref, ...props })=>{
+    const testId = useTestId('legend-dot');
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "legend-dot",
+        "data-testid": testId,
+        "aria-hidden": "true",
+        className: cn(legendDotClasses, className),
+        children: children ?? '·'
+    });
+};
+LegendDot.displayName = 'LegendDot';
+export { LegendDot };

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

@@ -0,0 +1,35 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+import { type PieChartDatum } from './PieChartContext';
+export interface PieChartProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Each datum's `name` is the join key used by `PieChartLegendItem` to sync hover/active state.
+     * Non-finite or negative `value`s are coerced to 0 so recharts can draw them.
+     */
+    data: PieChartDatum[];
+    /**
+     * Override for the value used to compute percentages and the centre total.
+     * Defaults to `sum(data.value)`. Pass an explicit value when the centre label
+     * should reflect a different denominator — e.g. the unfiltered total while
+     * the chart shows a filtered view.
+     */
+    total?: number;
+    /**
+     * Controlled active slice. When provided, the component does not manage hover state
+     * internally — the parent must update it via `onActiveNameChange`.
+     */
+    activeName?: string | null;
+    onActiveNameChange?: (name: string | null) => void;
+    /**
+     * Multi-selection set. When non-empty, donut slices and legend rows whose `name`
+     * is not in the set fade so emphasis lands on the chosen group. Hover
+     * (`activeName`) wins — while the user points at a specific slice, only that one
+     * stays bright. Names not present in `data` are ignored.
+     *
+     * Pass a stable reference (`useMemo`/state) — an inline array literal recreates
+     * on every parent render and invalidates the internal Set memo.
+     */
+    selectedNames?: string[];
+}
+export declare const PieChart: FC<PieChartProps>;

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

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

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

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Settings } from "../../../icons/index.js";
+import { Badge } from "../../Badge/index.js";
+import { Button } from "../../Button/index.js";
+import { Chart } from "../Chart/Chart.js";
+import { ChartActions } from "../Chart/ChartActions.js";
+import { ChartHeader } from "../Chart/ChartHeader.js";
+import { ChartTitle } from "../Chart/ChartTitle.js";
+import { LegendDot } from "./LegendDot.js";
+import { PieChart } from "./PieChart.js";
+import { PieChartCenter, PieChartCenterLabel, PieChartCenterValue } from "./PieChartCenter.js";
+import { PieChartDonut } from "./PieChartDonut.js";
+import { PieChartLegend } from "./PieChartLegend.js";
+import { PieChartLegendItem } from "./PieChartLegendItem.js";
+import { PieChartLegendPercent } from "./PieChartLegendPercent.js";
+import { PieChartLegendValue } from "./PieChartLegendValue.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-122167&m=dev';
+const sampleData = [
+    {
+        name: '4XX',
+        value: 35,
+        color: 'amber',
+        badgeColor: 'amber'
+    },
+    {
+        name: '2XX',
+        value: 30,
+        color: 'green',
+        badgeColor: 'green'
+    },
+    {
+        name: '5XX',
+        value: 15,
+        color: 'red',
+        badgeColor: 'red'
+    },
+    {
+        name: '3XX',
+        value: 12,
+        color: 'blue',
+        badgeColor: 'blue'
+    },
+    {
+        name: '1XX',
+        value: 8,
+        color: 'slate',
+        badgeColor: 'slate'
+    }
+];
+const sampleTotal = sampleData.reduce((sum, d)=>sum + d.value, 0);
+code_connect.connect(PieChart, figmaNodeUrl, {
+    props: {
+        title: code_connect.string('Title'),
+        state: code_connect["enum"]('State', {
+            Default: 'default',
+            Hovered: 'hovered',
+            Filtered: 'filtered'
+        })
+    },
+    example: ({ title, state })=>/*#__PURE__*/ jsxs(Chart, {
+            children: [
+                /*#__PURE__*/ jsxs(ChartHeader, {
+                    children: [
+                        /*#__PURE__*/ jsx(ChartTitle, {
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsx(ChartActions, {
+                            children: /*#__PURE__*/ jsx(Button, {
+                                variant: "ghost",
+                                color: "neutral",
+                                size: "small",
+                                "aria-label": "Settings",
+                                children: /*#__PURE__*/ jsx(Settings, {})
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(PieChart, {
+                    data: sampleData,
+                    total: sampleTotal,
+                    children: [
+                        /*#__PURE__*/ jsx(PieChartDonut, {
+                            children: /*#__PURE__*/ jsxs(PieChartCenter, {
+                                children: [
+                                    /*#__PURE__*/ jsx(PieChartCenterValue, {
+                                        children: sampleTotal
+                                    }),
+                                    /*#__PURE__*/ jsx(PieChartCenterLabel, {
+                                        children: "requests"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(PieChartLegend, {
+                            children: sampleData.map((d)=>/*#__PURE__*/ jsxs(PieChartLegendItem, {
+                                    name: d.name,
+                                    selected: 'filtered' === state && d.name === sampleData[0]?.name,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Badge, {
+                                            color: d.badgeColor,
+                                            type: "secondary",
+                                            textVariant: "code",
+                                            children: d.name
+                                        }),
+                                        /*#__PURE__*/ jsxs(PieChartLegendValue, {
+                                            children: [
+                                                d.value,
+                                                /*#__PURE__*/ jsx(LegendDot, {}),
+                                                /*#__PURE__*/ jsx(PieChartLegendPercent, {})
+                                            ]
+                                        })
+                                    ]
+                                }, d.name))
+                        })
+                    ]
+                })
+            ]
+        })
+});

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

@@ -0,0 +1,117 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo } from "react";
+import { useControlled } from "../../../hooks/index.js";
+import { cn } from "../../../utils/cn.js";
+import { TestIdProvider } from "../../../utils/testId.js";
+import { pieChartRootClasses } from "./classes.js";
+import { EMPTY_SELECTION, PieChartActiveContext, PieChartDataContext, PieChartSelectionContext } from "./PieChartContext.js";
+const sanitizeValue = (n)=>{
+    if ('number' != typeof n || !Number.isFinite(n) || n < 0) return 0;
+    return n;
+};
+const PieChart = ({ data, total, activeName: controlledActiveName, onActiveNameChange, selectedNames, className, children, ref, 'data-testid': testId, ...props })=>{
+    const sanitizedData = useMemo(()=>data.map((d)=>({
+                ...d,
+                value: sanitizeValue(d.value)
+            })), [
+        data
+    ]);
+    const { byName, computedTotal, hasDuplicateNames } = useMemo(()=>{
+        const map = new Map();
+        let sum = 0;
+        let duplicates = false;
+        for (const d of sanitizedData){
+            if (map.has(d.name)) duplicates = true;
+            map.set(d.name, d);
+            sum += d.value;
+        }
+        return {
+            byName: map,
+            computedTotal: sum,
+            hasDuplicateNames: duplicates
+        };
+    }, [
+        sanitizedData
+    ]);
+    useEffect(()=>{
+        if (hasDuplicateNames && 'production' !== process.env.NODE_ENV) console.warn("[PieChart] `data` contains duplicate `name` values. Names are used as the join key for percent lookup, hover sync, and React reconciliation — duplicates will produce incorrect percentages, ambiguous hover, and unstable rendering. Provide unique names.");
+    }, [
+        hasDuplicateNames
+    ]);
+    const resolvedTotal = 'number' == typeof total && Number.isFinite(total) ? total : computedTotal;
+    const isValidTotal = resolvedTotal > 0;
+    const [activeNameValue, setInternalActiveName] = useControlled({
+        controlled: controlledActiveName,
+        default: null
+    });
+    const rawActiveName = activeNameValue ?? null;
+    const activeName = null !== rawActiveName && byName.has(rawActiveName) ? rawActiveName : null;
+    useEffect(()=>{
+        if (null != controlledActiveName && !byName.has(controlledActiveName)) onActiveNameChange?.(null);
+    }, [
+        controlledActiveName,
+        byName,
+        onActiveNameChange
+    ]);
+    const setActive = useCallback((name)=>{
+        setInternalActiveName(name);
+        onActiveNameChange?.(name);
+    }, [
+        setInternalActiveName,
+        onActiveNameChange
+    ]);
+    const selectedSet = useMemo(()=>{
+        if (!selectedNames?.length) return EMPTY_SELECTION;
+        const set = new Set();
+        for (const name of selectedNames)if (byName.has(name)) set.add(name);
+        return set.size > 0 ? set : EMPTY_SELECTION;
+    }, [
+        selectedNames,
+        byName
+    ]);
+    const dataValue = useMemo(()=>({
+            data: sanitizedData,
+            byName,
+            total: resolvedTotal,
+            isValidTotal,
+            setActive
+        }), [
+        sanitizedData,
+        byName,
+        resolvedTotal,
+        isValidTotal,
+        setActive
+    ]);
+    const activeValue = useMemo(()=>({
+            activeName
+        }), [
+        activeName
+    ]);
+    const selectionValue = useMemo(()=>({
+            selectedSet
+        }), [
+        selectedSet
+    ]);
+    return /*#__PURE__*/ jsx(PieChartDataContext.Provider, {
+        value: dataValue,
+        children: /*#__PURE__*/ jsx(PieChartActiveContext.Provider, {
+            value: activeValue,
+            children: /*#__PURE__*/ jsx(PieChartSelectionContext.Provider, {
+                value: selectionValue,
+                children: /*#__PURE__*/ jsx(TestIdProvider, {
+                    value: testId,
+                    children: /*#__PURE__*/ jsx("div", {
+                        ...props,
+                        ref: ref,
+                        "data-slot": "pie-chart",
+                        "data-testid": testId,
+                        className: cn(pieChartRootClasses, className),
+                        children: children
+                    })
+                })
+            })
+        })
+    });
+};
+PieChart.displayName = 'PieChart';
+export { PieChart };

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

@@ -0,0 +1,13 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface PieChartCenterProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const PieChartCenter: FC<PieChartCenterProps>;
+export interface PieChartCenterValueProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const PieChartCenterValue: FC<PieChartCenterValueProps>;
+export interface PieChartCenterLabelProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const PieChartCenterLabel: FC<PieChartCenterLabelProps>;

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

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { pieChartCenterClasses, pieChartCenterLabelClasses, pieChartCenterValueClasses } from "./classes.js";
+const PieChartCenter = ({ className, ref, ...props })=>{
+    const testId = useTestId('center');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "pie-chart-center",
+        "data-testid": testId,
+        "aria-hidden": "true",
+        className: cn(pieChartCenterClasses, className)
+    });
+};
+PieChartCenter.displayName = 'PieChartCenter';
+const PieChartCenterValue = ({ className, ref, ...props })=>{
+    const testId = useTestId('center-value');
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "pie-chart-center-value",
+        "data-testid": testId,
+        className: cn(pieChartCenterValueClasses, className)
+    });
+};
+PieChartCenterValue.displayName = 'PieChartCenterValue';
+const PieChartCenterLabel = ({ className, ref, ...props })=>{
+    const testId = useTestId('center-label');
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "pie-chart-center-label",
+        "data-testid": testId,
+        className: cn(pieChartCenterLabelClasses, className)
+    });
+};
+PieChartCenterLabel.displayName = 'PieChartCenterLabel';
+export { PieChartCenter, PieChartCenterLabel, PieChartCenterValue };

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

@@ -0,0 +1,60 @@
+import type { ChartColor } from '../types';
+export interface PieChartDatum {
+    /**
+     * Stable identity string — **never rendered by the component**. Used as the join key
+     * for percent lookup, bidirectional hover sync between slice and legend row, recharts'
+     * sector reconciliation, and the `data-name` E2E hook on slice + row DOM.
+     *
+     * Must be unique within `data` — duplicates trigger a dev-only warning and produce
+     * incorrect percentages, ambiguous hover, and unstable rendering. The visible label
+     * comes from caller JSX inside `<PieChartLegendItem>` (e.g. `<Badge>{row.name}</Badge>`),
+     * so this string can be a slug, ID, or any opaque key when display ≠ identity.
+     */
+    name: string;
+    /**
+     * Slice magnitude. Non-finite or negative values are coerced to `0` before reaching
+     * recharts (which rejects negatives). Percent = `value / total`.
+     */
+    value: number;
+    /**
+     * Built-in palette token. Resolves to a slice-fill CSS variable via `PIE_SLICE_FILL`
+     * in `constants.ts` — most colours map to `--color-{color}-500`, with documented
+     * exceptions for `'brand'` and `'slate'`. Ignored when `className` is set.
+     */
+    color?: ChartColor;
+    /**
+     * Tailwind `fill-*` utility applied directly to the slice `<path>`. Wins over `color`.
+     * `bg-*` does NOT work — slices are SVG paths, not divs.
+     */
+    className?: string;
+}
+/** Static chart shape — recomputes only when data/total changes. */
+export interface PieChartDataContextValue {
+    data: PieChartDatum[];
+    byName: Map<string, PieChartDatum>;
+    total: number;
+    isValidTotal: boolean;
+    setActive: (name: string | null) => void;
+}
+/** Volatile hover state — recomputes on every hover, kept separate so static
+ * consumers (donut layout, legend rows that don't care about active) skip
+ * re-rendering when only the hover target changes. */
+export interface PieChartActiveContextValue {
+    activeName: string | null;
+}
+/** Multi-selection set pushed by the root. Empty when no selection is active. */
+export interface PieChartSelectionContextValue {
+    selectedSet: Set<string>;
+}
+export interface PieChartItemContextValue {
+    ratio: number;
+    selected: boolean;
+    interactive: boolean;
+    name: string;
+    active: boolean;
+}
+export declare const EMPTY_SELECTION: Set<string>;
+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>;
+export declare const PieChartItemContext: import("react").Context<PieChartItemContextValue | null>;

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

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+const EMPTY_SELECTION = new Set();
+const PieChartDataContext = createContext(null);
+const PieChartActiveContext = createContext({
+    activeName: null
+});
+const PieChartSelectionContext = createContext({
+    selectedSet: EMPTY_SELECTION
+});
+const PieChartItemContext = createContext(null);
+export { EMPTY_SELECTION, PieChartActiveContext, PieChartDataContext, PieChartItemContext, PieChartSelectionContext };

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

@@ -0,0 +1,15 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+export interface PieChartDonutProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Opacity applied to slices that are not currently hovered. Defaults to `0.3`.
+     * Set to `1` to disable the hover-dim effect.
+     */
+    inactiveOpacity?: number;
+    /**
+     * Disable the recharts mount/transition animation. Defaults to `false`.
+     * Set `true` in test/screenshot environments where deterministic frames matter.
+     */
+    disableAnimation?: boolean;
+}
+export declare const PieChartDonut: FC<PieChartDonutProps>;

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

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useContext } from "react";
+import { Pie, PieChart, Sector } from "recharts";
+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";
+const PLACEHOLDER_DATA = [
+    {
+        name: '',
+        value: 1
+    }
+];
+const PieChartDonut = ({ inactiveOpacity = 0.3, disableAnimation = false, className, children, ref, ...props })=>{
+    const testId = useTestId('donut');
+    const dataCtx = useContext(PieChartDataContext);
+    const { activeName } = useContext(PieChartActiveContext);
+    const { selectedSet } = useContext(PieChartSelectionContext);
+    const handleEnter = useCallback((_payload, index)=>{
+        if (!dataCtx?.isValidTotal) return;
+        const datum = dataCtx.data[index];
+        if (datum) dataCtx.setActive(datum.name);
+    }, [
+        dataCtx
+    ]);
+    const handleLeave = useCallback(()=>{
+        dataCtx?.setActive(null);
+    }, [
+        dataCtx
+    ]);
+    const isValidTotal = !!dataCtx?.isValidTotal;
+    const isMultiSlice = isValidTotal && dataCtx.data.length > 1;
+    const renderSlice = useCallback((sectorProps)=>{
+        const { isActive: _isActive, index: _index, payload, ...sectorRest } = sectorProps;
+        if (!isValidTotal) return /*#__PURE__*/ jsx(Sector, {
+            ...sectorRest,
+            fill: "var(--color-border-primary-light)",
+            opacity: 1,
+            stroke: "none"
+        });
+        const datum = payload;
+        const name = datum?.name ?? '';
+        const fill = datum?.className ? void 0 : PIE_SLICE_FILL[datum?.color ?? 'slate'];
+        const isActive = activeName === name;
+        const isSelected = selectedSet.has(name);
+        let opacity = 1;
+        if (null !== activeName) opacity = isActive ? 1 : inactiveOpacity;
+        else if (selectedSet.size > 0) opacity = isSelected ? 1 : inactiveOpacity;
+        return /*#__PURE__*/ jsx(Sector, {
+            ...sectorRest,
+            fill: fill,
+            opacity: opacity,
+            stroke: "none",
+            className: cn('outline-none transition-opacity duration-150 ease-out', datum?.className),
+            "data-slot": "pie-chart-slice",
+            "data-name": name,
+            "data-active": isActive ? 'true' : void 0
+        });
+    }, [
+        isValidTotal,
+        activeName,
+        inactiveOpacity,
+        selectedSet
+    ]);
+    const pieData = isValidTotal ? dataCtx.data : PLACEHOLDER_DATA;
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "pie-chart-donut",
+        "data-testid": testId,
+        "aria-hidden": "true",
+        className: cn(pieChartDonutClasses, className),
+        children: [
+            /*#__PURE__*/ jsx(PieChart, {
+                width: PIE_DONUT_SIZE,
+                height: PIE_DONUT_SIZE,
+                margin: {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                },
+                accessibilityLayer: false,
+                children: /*#__PURE__*/ jsx(Pie, {
+                    data: pieData,
+                    dataKey: "value",
+                    nameKey: "name",
+                    cx: "50%",
+                    cy: "50%",
+                    innerRadius: PIE_DONUT_INNER_RADIUS,
+                    outerRadius: PIE_DONUT_OUTER_RADIUS,
+                    startAngle: 90,
+                    endAngle: -270,
+                    cornerRadius: isMultiSlice ? PIE_DONUT_CORNER_RADIUS : 0,
+                    paddingAngle: isMultiSlice ? PIE_DONUT_PADDING_ANGLE : 0,
+                    stroke: "none",
+                    isAnimationActive: disableAnimation ? false : 'auto',
+                    animationBegin: PIE_DONUT_ANIMATION_BEGIN,
+                    animationDuration: PIE_DONUT_ANIMATION_DURATION,
+                    animationEasing: "ease-out",
+                    onMouseEnter: handleEnter,
+                    onMouseLeave: handleLeave,
+                    shape: renderSlice
+                })
+            }),
+            children
+        ]
+    });
+};
+PieChartDonut.displayName = 'PieChartDonut';
+export { PieChartDonut };

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

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface PieChartLegendProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const PieChartLegend: FC<PieChartLegendProps>;

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { pieChartLegendClasses } from "./classes.js";
+const PieChartLegend = ({ className, ref, ...props })=>{
+    const testId = useTestId('legend');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "pie-chart-legend",
+        "data-testid": testId,
+        className: cn(pieChartLegendClasses, className)
+    });
+};
+PieChartLegend.displayName = 'PieChartLegend';
+export { PieChartLegend };

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

@@ -0,0 +1,26 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+export interface PieChartLegendItemProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Identifier matching a `PieChartDatum.name` from the root `data` prop.
+     * Drives both the percent calculation and the bidirectional hover sync with the donut slice.
+     */
+    name: string;
+    /**
+     * Optional override for the value used in the percent calculation. Defaults to looking
+     * the value up from the root `data` array by `name`. Pass an explicit value when the
+     * legend renders entries that are not part of the donut (e.g. a synthetic "Other" row).
+     */
+    value?: number;
+    /**
+     * Visually marks the row as the selected/filtered datum — applies `bg-states-primary-active`
+     * and `aria-current`. When omitted, the row falls back to membership in the root's
+     * `selectedNames` set (if provided). When passed explicitly (`true` or `false`) it
+     * fully overrides the context — useful when the legend renders rows that aren't part
+     * of the chart's multi-selection (e.g. a single filtered view). The resolved value
+     * also feeds the dim calculation: a row resolved to `selected=false` while *some*
+     * peer is selected will fade like any other non-selected row.
+     */
+    selected?: boolean;
+}
+export declare const PieChartLegendItem: FC<PieChartLegendItemProps>;