@wallarm-org/design-system 0.73.0 → 0.74.0

package/dist/components/SimpleCharts/HorizontalBarStack/HorizontalBarStack.js

@@ -0,0 +1,239 @@
+import { jsx, jsxs } 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 { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
+import { ChartHoverCard, ChartHoverCardRow } from "../internal/ChartHoverCard.js";
+import { resolveChartColor } from "../lib/chartPalette.js";
+import { makeIsHoverSyncTarget } from "../lib/hoverSync.js";
+import { horizontalBarStackBarClasses, horizontalBarStackBarWrapperClasses, horizontalBarStackHeaderClasses, horizontalBarStackLegendClasses, horizontalBarStackLegendDotClasses, horizontalBarStackLegendItemVariants, horizontalBarStackLegendLabelClasses, horizontalBarStackRemainderClasses, horizontalBarStackRootClasses, horizontalBarStackSegmentVariants, horizontalBarStackTooltipClasses } from "./classes.js";
+import { resolveSegments } from "./lib/resolveSegments.js";
+const isHoverSyncTarget = makeIsHoverSyncTarget([
+    'horizontal-bar-stack-segment',
+    'horizontal-bar-stack-legend-item'
+]);
+const EMPTY_SELECTION = new Set();
+const formatNumber = (n)=>n.toLocaleString('en-US');
+const HorizontalBarStack = ({ data, children, total, legend = true, activeName: controlledActiveName, onActiveNameChange, selectedNames, onSelect, className, ref, 'data-testid': testId, ...props })=>{
+    const segments = useMemo(()=>resolveSegments(data, total), [
+        data,
+        total
+    ]);
+    const slotTestId = (slot)=>testId ? `${testId}--${slot}` : void 0;
+    const legendSegments = useMemo(()=>segments.filter((s)=>!s.isRemainder), [
+        segments
+    ]);
+    const byName = useMemo(()=>{
+        const set = new Set();
+        for (const d of data)set.add(d.name);
+        return set;
+    }, [
+        data
+    ]);
+    const [activeNameValue, setInternalActiveName] = useControlled({
+        controlled: controlledActiveName,
+        default: null
+    });
+    const rawActiveName = activeNameValue ?? null;
+    const activeName = null !== rawActiveName && byName.has(rawActiveName) ? rawActiveName : null;
+    const setActive = useCallback((name)=>{
+        setInternalActiveName(name);
+        onActiveNameChange?.(name);
+    }, [
+        setInternalActiveName,
+        onActiveNameChange
+    ]);
+    useEffect(()=>{
+        if (null != controlledActiveName && !byName.has(controlledActiveName)) onActiveNameChange?.(null);
+    }, [
+        controlledActiveName,
+        byName,
+        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 interactive = 'function' == typeof onSelect;
+    const barAriaLabel = useMemo(()=>legend ? void 0 : legendSegments.length ? legendSegments.map((s)=>`${s.key} ${formatNumber(s.value)}`).join(', ') : void 0, [
+        legend,
+        legendSegments
+    ]);
+    const hasDuplicateNames = useMemo(()=>{
+        const seen = new Set();
+        for (const d of data){
+            if (seen.has(d.name)) return true;
+            seen.add(d.name);
+        }
+        return false;
+    }, [
+        data
+    ]);
+    useEffect(()=>{
+        if (hasDuplicateNames && 'production' !== process.env.NODE_ENV) console.warn("[HorizontalBarStack] `data` contains duplicate `name` values. Names are used as the React key and the `data-name` hook — duplicates cause key collisions and ambiguous selectors. Provide unique names.");
+    }, [
+        hasDuplicateNames
+    ]);
+    const hasBar = data.length > 0;
+    const isDimmed = (key)=>null !== activeName ? key !== activeName : selectedSet.size > 0 ? !selectedSet.has(key) : false;
+    const handleMouseLeave = useCallback((event)=>{
+        if (isHoverSyncTarget(event.relatedTarget)) return;
+        setActive(null);
+    }, [
+        setActive
+    ]);
+    const handleBlur = useCallback((event)=>{
+        if (isHoverSyncTarget(event.relatedTarget)) return;
+        setActive(null);
+    }, [
+        setActive
+    ]);
+    const handleKeyDown = useCallback((name)=>(event)=>{
+            if ('Enter' === event.key || ' ' === event.key) {
+                event.preventDefault();
+                onSelect?.(name);
+            }
+        }, [
+        onSelect
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "horizontal-bar-stack",
+        "data-testid": testId,
+        className: cn(horizontalBarStackRootClasses, className),
+        children: [
+            children && /*#__PURE__*/ jsx(TestIdProvider, {
+                value: testId,
+                children: /*#__PURE__*/ jsx("div", {
+                    "data-slot": "horizontal-bar-stack-header",
+                    className: horizontalBarStackHeaderClasses,
+                    children: children
+                })
+            }),
+            hasBar && /*#__PURE__*/ jsx("div", {
+                "data-slot": "horizontal-bar-stack-bar-wrapper",
+                className: horizontalBarStackBarWrapperClasses,
+                children: /*#__PURE__*/ jsx("div", {
+                    "data-slot": "horizontal-bar-stack-bar",
+                    "data-testid": slotTestId('bar'),
+                    "aria-hidden": legend ? 'true' : void 0,
+                    role: barAriaLabel ? 'img' : void 0,
+                    "aria-label": barAriaLabel,
+                    className: horizontalBarStackBarClasses,
+                    children: segments.map((seg)=>{
+                        const seriesSegment = !seg.isRemainder;
+                        const segment = /*#__PURE__*/ jsx("div", {
+                            "data-slot": "horizontal-bar-stack-segment",
+                            "data-testid": slotTestId('segment'),
+                            "data-name": seg.isRemainder ? void 0 : seg.key,
+                            "data-remainder": seg.isRemainder ? 'true' : void 0,
+                            "data-active": seriesSegment && activeName === seg.key ? 'true' : void 0,
+                            onMouseEnter: seriesSegment ? ()=>setActive(seg.key) : void 0,
+                            onMouseLeave: seriesSegment ? handleMouseLeave : void 0,
+                            className: cn(horizontalBarStackSegmentVariants({
+                                dimmed: isDimmed(seg.key)
+                            }), seg.isRemainder && horizontalBarStackRemainderClasses, seg.className),
+                            style: {
+                                flexGrow: seg.value,
+                                flexBasis: 0,
+                                backgroundColor: seg.isRemainder || seg.className ? void 0 : resolveChartColor(seg.color)
+                            }
+                        }, seg.key);
+                        if (!seriesSegment) return segment;
+                        return /*#__PURE__*/ jsxs(Tooltip, {
+                            openDelay: 150,
+                            closeDelay: 100,
+                            children: [
+                                /*#__PURE__*/ jsx(TooltipTrigger, {
+                                    asChild: true,
+                                    children: segment
+                                }),
+                                /*#__PURE__*/ jsx(TooltipContent, {
+                                    className: horizontalBarStackTooltipClasses,
+                                    children: /*#__PURE__*/ jsx(ChartHoverCard, {
+                                        children: /*#__PURE__*/ jsx(ChartHoverCardRow, {
+                                            color: seg.className ? void 0 : seg.color,
+                                            dotClassName: seg.className,
+                                            label: seg.key,
+                                            value: seg.value
+                                        })
+                                    })
+                                })
+                            ]
+                        }, seg.key);
+                    })
+                })
+            }),
+            legend && legendSegments.length > 0 && /*#__PURE__*/ jsx("div", {
+                "data-slot": "horizontal-bar-stack-legend",
+                "data-testid": slotTestId('legend'),
+                className: horizontalBarStackLegendClasses,
+                children: legendSegments.map((seg)=>{
+                    const active = activeName === seg.key;
+                    const selected = selectedSet.has(seg.key);
+                    const dimmed = !selected && !active && selectedSet.size > 0;
+                    const item = /*#__PURE__*/ jsxs("div", {
+                        "data-slot": "horizontal-bar-stack-legend-item",
+                        "data-testid": slotTestId('legend-item'),
+                        "data-name": seg.key,
+                        "data-active": active ? 'true' : void 0,
+                        "data-selected": selected ? 'true' : void 0,
+                        role: interactive ? 'button' : void 0,
+                        tabIndex: interactive ? 0 : void 0,
+                        "aria-current": selected ? 'true' : void 0,
+                        onClick: interactive ? ()=>onSelect?.(seg.key) : void 0,
+                        onKeyDown: interactive ? handleKeyDown(seg.key) : void 0,
+                        onMouseEnter: ()=>setActive(seg.key),
+                        onMouseLeave: handleMouseLeave,
+                        onFocus: ()=>setActive(seg.key),
+                        onBlur: handleBlur,
+                        className: horizontalBarStackLegendItemVariants({
+                            interactive,
+                            active,
+                            selected,
+                            dimmed
+                        }),
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                "data-slot": "horizontal-bar-stack-legend-dot",
+                                "data-testid": slotTestId('legend-dot'),
+                                "aria-hidden": "true",
+                                className: cn(horizontalBarStackLegendDotClasses, seg.className),
+                                style: {
+                                    backgroundColor: seg.className ? void 0 : resolveChartColor(seg.color)
+                                }
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: horizontalBarStackLegendLabelClasses,
+                                children: seg.key
+                            })
+                        ]
+                    }, seg.key);
+                    if (!interactive) return item;
+                    return /*#__PURE__*/ jsxs(Tooltip, {
+                        openDelay: 150,
+                        closeDelay: 100,
+                        children: [
+                            /*#__PURE__*/ jsx(TooltipTrigger, {
+                                asChild: true,
+                                children: item
+                            }),
+                            /*#__PURE__*/ jsx(TooltipContent, {
+                                children: selected ? 'Remove filter' : 'Click to filter'
+                            })
+                        ]
+                    }, seg.key);
+                })
+            })
+        ]
+    });
+};
+HorizontalBarStack.displayName = 'HorizontalBarStack';
+export { HorizontalBarStack };

package/dist/components/SimpleCharts/HorizontalBarStack/HorizontalBarStackSkeleton.d.ts

@@ -0,0 +1,14 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+export interface HorizontalBarStackSkeletonProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Number of legend placeholder pills. Defaults to `3`. */
+    legendItems?: number;
+}
+/**
+ * Loading placeholder for `HorizontalBarStack`, matching `BarListSkeleton` /
+ * `PieChartSkeleton`. Mirrors the loaded layout — a value-sized block where the
+ * header sits, the 8px bar track, and legend pills — so the card doesn't jump
+ * when data arrives. Compose inside the `Chart` card in place of the chart.
+ */
+export declare const HorizontalBarStackSkeleton: FC<HorizontalBarStackSkeletonProps>;

package/dist/components/SimpleCharts/HorizontalBarStack/HorizontalBarStackSkeleton.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../../utils/testId.js";
+import { Skeleton } from "../../Skeleton/index.js";
+import { horizontalBarStackBarWrapperClasses, horizontalBarStackLegendClasses, horizontalBarStackRootClasses, horizontalBarStackSkeletonHeaderClasses } from "./classes.js";
+const HorizontalBarStackSkeletonLegendItem = ()=>{
+    const testId = useTestId('skeleton-legend-item');
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "horizontal-bar-stack-skeleton-legend-item",
+        "data-testid": testId,
+        children: /*#__PURE__*/ jsx(Skeleton, {
+            width: "72px",
+            height: "20px",
+            rounded: 6
+        })
+    });
+};
+HorizontalBarStackSkeletonLegendItem.displayName = 'HorizontalBarStackSkeletonLegendItem';
+const HorizontalBarStackSkeleton = ({ legendItems = 3, className, ref, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsxs("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "horizontal-bar-stack-skeleton",
+            "data-testid": testId,
+            "aria-busy": "true",
+            "aria-live": "polite",
+            className: cn(horizontalBarStackRootClasses, className),
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: horizontalBarStackSkeletonHeaderClasses,
+                    children: /*#__PURE__*/ jsx(Skeleton, {
+                        width: "72px",
+                        height: "36px",
+                        rounded: 6
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: horizontalBarStackBarWrapperClasses,
+                    children: /*#__PURE__*/ jsx(Skeleton, {
+                        width: "100%",
+                        height: "8px",
+                        rounded: 6
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: horizontalBarStackLegendClasses,
+                    children: Array.from({
+                        length: legendItems
+                    }, (_, i)=>/*#__PURE__*/ jsx(HorizontalBarStackSkeletonLegendItem, {}, i))
+                })
+            ]
+        })
+    });
+HorizontalBarStackSkeleton.displayName = 'HorizontalBarStackSkeleton';
+export { HorizontalBarStackSkeleton };

package/dist/components/SimpleCharts/HorizontalBarStack/classes.d.ts

@@ -0,0 +1,19 @@
+export declare const horizontalBarStackRootClasses: string;
+export declare const horizontalBarStackBarWrapperClasses: string;
+export declare const horizontalBarStackBarClasses: string;
+export declare const horizontalBarStackRemainderClasses: string;
+export declare const horizontalBarStackHeaderClasses: string;
+export declare const horizontalBarStackSkeletonHeaderClasses: string;
+export declare const horizontalBarStackLegendClasses: string;
+export declare const horizontalBarStackLegendDotClasses: string;
+export declare const horizontalBarStackLegendLabelClasses: string;
+export declare const horizontalBarStackSegmentVariants: (props?: ({
+    dimmed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const horizontalBarStackLegendItemVariants: (props?: ({
+    interactive?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    dimmed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const horizontalBarStackTooltipClasses: string;

package/dist/components/SimpleCharts/HorizontalBarStack/classes.js

@@ -0,0 +1,49 @@
+import { cva } from "class-variance-authority";
+const horizontalBarStackRootClasses = "flex flex-col w-full";
+const horizontalBarStackBarWrapperClasses = "px-16 py-8 w-full";
+const horizontalBarStackBarClasses = "flex h-8 w-full overflow-hidden rounded-4";
+const horizontalBarStackRemainderClasses = "bg-bg-strong-primary";
+const horizontalBarStackHeaderClasses = "px-16 pt-8";
+const horizontalBarStackSkeletonHeaderClasses = horizontalBarStackHeaderClasses;
+const horizontalBarStackLegendClasses = "flex flex-row flex-wrap items-center gap-6 px-12 py-2";
+const horizontalBarStackLegendDotClasses = "inline-block size-8 rounded-2 shrink-0";
+const horizontalBarStackLegendLabelClasses = "text-xs font-mono text-text-primary";
+const horizontalBarStackSegmentVariants = cva('h-full min-w-px transition-opacity', {
+    variants: {
+        dimmed: {
+            true: 'opacity-30',
+            false: 'opacity-100'
+        }
+    },
+    defaultVariants: {
+        dimmed: false
+    }
+});
+const horizontalBarStackLegendItemVariants = cva("inline-flex items-center gap-4 px-4 py-2 rounded-4 transition-colors outline-none", {
+    variants: {
+        interactive: {
+            true: "cursor-pointer focus-visible:bg-states-primary-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-primary",
+            false: ''
+        },
+        active: {
+            true: 'bg-states-primary-hover',
+            false: 'hover:bg-states-primary-hover'
+        },
+        selected: {
+            true: 'bg-states-primary-active',
+            false: ''
+        },
+        dimmed: {
+            true: 'opacity-60',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        interactive: false,
+        active: false,
+        selected: false,
+        dimmed: false
+    }
+});
+const horizontalBarStackTooltipClasses = "bg-transparent p-0 shadow-none rounded-none overflow-visible";
+export { horizontalBarStackBarClasses, horizontalBarStackBarWrapperClasses, horizontalBarStackHeaderClasses, horizontalBarStackLegendClasses, horizontalBarStackLegendDotClasses, horizontalBarStackLegendItemVariants, horizontalBarStackLegendLabelClasses, horizontalBarStackRemainderClasses, horizontalBarStackRootClasses, horizontalBarStackSegmentVariants, horizontalBarStackSkeletonHeaderClasses, horizontalBarStackTooltipClasses };

package/dist/components/SimpleCharts/{HorizontalBar → HorizontalBarStack}/constants.d.ts

@@ -1,8 +1,8 @@
 import type { ChartColor } from '../types';
 /** Reserved key for the auto-generated remainder tail (must not collide with a datum name). */
-export declare const REMAINDER_KEY = "__horizontal-bar-remainder__";
+export declare const REMAINDER_KEY = "__horizontal-bar-stack-remainder__";
 /**
  * Auto-cycle order for data without an explicit `color`. Leads with the
  * warm hues used in the Figma reference (red → brand/w-orange → amber).
  */
-export declare const HORIZONTAL_BAR_PALETTE: ChartColor[];
+export declare const HORIZONTAL_BAR_STACK_PALETTE: ChartColor[];

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

@@ -0,0 +1,16 @@
+const REMAINDER_KEY = '__horizontal-bar-stack-remainder__';
+const HORIZONTAL_BAR_STACK_PALETTE = [
+    'red',
+    'brand',
+    'amber',
+    'blue',
+    'green',
+    'purple',
+    'teal',
+    'cyan',
+    'indigo',
+    'pink',
+    'rose',
+    'slate'
+];
+export { HORIZONTAL_BAR_STACK_PALETTE, REMAINDER_KEY };

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

@@ -0,0 +1,2 @@
+export { HorizontalBarStack, type HorizontalBarStackDatum, type HorizontalBarStackProps, } from './HorizontalBarStack';
+export { HorizontalBarStackSkeleton, type HorizontalBarStackSkeletonProps, } from './HorizontalBarStackSkeleton';

package/dist/components/SimpleCharts/HorizontalBarStack/index.js

@@ -0,0 +1,2 @@
+export { HorizontalBarStack } from "./HorizontalBarStack.js";
+export { HorizontalBarStackSkeleton } from "./HorizontalBarStackSkeleton.js";

package/dist/components/SimpleCharts/{HorizontalBar → HorizontalBarStack}/lib/resolveSegments.d.ts

@@ -1,5 +1,5 @@
 import type { ChartColor } from '../../types';
-import type { HorizontalBarDatum } from '../HorizontalBar';
+import type { HorizontalBarStackDatum } from '../HorizontalBarStack';
 export interface ResolvedSegment {
     key: string;
     value: number;
@@ -7,4 +7,4 @@ export interface ResolvedSegment {
     className?: string;
     isRemainder: boolean;
 }
-export declare function resolveSegments(data: HorizontalBarDatum[], total?: number): ResolvedSegment[];
+export declare function resolveSegments(data: HorizontalBarStackDatum[], total?: number): ResolvedSegment[];

package/dist/components/SimpleCharts/{HorizontalBar → HorizontalBarStack}/lib/resolveSegments.js

@@ -1,10 +1,10 @@
-import { HORIZONTAL_BAR_PALETTE, REMAINDER_KEY } from "../constants.js";
+import { HORIZONTAL_BAR_STACK_PALETTE, REMAINDER_KEY } from "../constants.js";
 const sanitize = (n)=>'number' == typeof n && Number.isFinite(n) && n > 0 ? n : 0;
 function resolveSegments(data, total) {
     const segments = data.map((d, i)=>({
             key: d.name,
             value: sanitize(d.value),
-            color: d.color ?? HORIZONTAL_BAR_PALETTE[i % HORIZONTAL_BAR_PALETTE.length],
+            color: d.color ?? HORIZONTAL_BAR_STACK_PALETTE[i % HORIZONTAL_BAR_STACK_PALETTE.length],
             className: d.className,
             isRemainder: false
         }));

package/dist/components/SimpleCharts/LineChart/LineChartHoverPopover.d.ts

@@ -2,4 +2,8 @@ import type { FC, HTMLAttributes, Ref } from 'react';
 export interface LineChartHoverPopoverProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
 }
+/**
+ * The line chart's hover popover — the shared `ChartHoverCard` surface with tooltip
+ * semantics (`role='tooltip'` + `aria-live`), positioned by the plotting-library tooltip.
+ */
 export declare const LineChartHoverPopover: FC<LineChartHoverPopoverProps>;

package/dist/components/SimpleCharts/LineChart/LineChartHoverPopover.js

@@ -1,14 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "../../../utils/cn.js";
-import { lineChartHoverPopoverClasses } from "./classes.js";
-const LineChartHoverPopover = ({ ref, className, children, ...props })=>/*#__PURE__*/ jsx("div", {
-        ...props,
+import { ChartHoverCard } from "../internal/ChartHoverCard.js";
+const LineChartHoverPopover = ({ ref, ...props })=>/*#__PURE__*/ jsx(ChartHoverCard, {
         ref: ref,
-        "data-slot": "line-chart-hover-popover",
         role: "tooltip",
         "aria-live": "polite",
-        className: cn(lineChartHoverPopoverClasses, className),
-        children: children
+        ...props
     });
 LineChartHoverPopover.displayName = 'LineChartHoverPopover';
 export { LineChartHoverPopover };

package/dist/components/SimpleCharts/LineChart/LineChartHoverPopoverDot.d.ts

@@ -1,14 +1,8 @@
-import type { FC, HTMLAttributes, Ref } from 'react';
-import type { ChartColor } from '../types';
-export interface LineChartHoverPopoverDotProps extends HTMLAttributes<HTMLSpanElement> {
-    ref?: Ref<HTMLSpanElement>;
-    /**
-     * Dot colour. Either a built-in palette token (`'brand'`, `'red'`, …) or any
-     * CSS colour string (`'var(--color-violet-500)'`, `'#8b5cf6'`, `'oklch(…)'`).
-     * Same shape as `LineChartSeries.color`, so passing `color={series.color}`
-     * keeps the dot in sync with its line. Consumer-supplied
-     * `style.backgroundColor` still wins when present.
-     */
-    color?: ChartColor | (string & {});
-}
+import type { FC } from 'react';
+import { type ChartHoverCardDotProps } from '../internal/ChartHoverCard';
+/**
+ * The hover popover's series dot — the shared `ChartHoverCardDot`. `color` accepts a palette
+ * token or any CSS colour, so `color={series.color}` keeps the dot in sync with its line.
+ */
+export type LineChartHoverPopoverDotProps = ChartHoverCardDotProps;
 export declare const LineChartHoverPopoverDot: FC<LineChartHoverPopoverDotProps>;

package/dist/components/SimpleCharts/LineChart/LineChartHoverPopoverDot.js

@@ -1,20 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "../../../utils/cn.js";
-import { lineChartHoverPopoverDotClasses } from "./classes.js";
-import { resolveSeriesColor } from "./constants.js";
-const LineChartHoverPopoverDot = ({ color, className, style, ref, ...props })=>{
-    const backgroundColor = style?.backgroundColor ?? resolveSeriesColor(color);
-    return /*#__PURE__*/ jsx("span", {
-        ...props,
-        ref: ref,
-        "data-slot": "line-chart-hover-popover-dot",
-        "aria-hidden": "true",
-        className: cn(lineChartHoverPopoverDotClasses, className),
-        style: {
-            ...style,
-            backgroundColor
-        }
+import { ChartHoverCardDot } from "../internal/ChartHoverCard.js";
+const LineChartHoverPopoverDot = (props)=>/*#__PURE__*/ jsx(ChartHoverCardDot, {
+        ...props
     });
-};
 LineChartHoverPopoverDot.displayName = 'LineChartHoverPopoverDot';
 export { LineChartHoverPopoverDot };

package/dist/components/SimpleCharts/LineChart/LineChartHoverPopoverRow.d.ts

@@ -6,7 +6,11 @@ export interface LineChartHoverPopoverRowProps extends HTMLAttributes<HTMLDivEle
     series: LineChartSeries;
     /** Raw datum value at the active index. `null`/`undefined` renders an em-dash. */
     value?: number | string | null;
-    /** Optional value formatter. Defaults to `Number.toLocaleString` / `String`. */
+    /** Optional value formatter. Defaults to the shared locale formatting. */
     formatValue?: (value: number | string | null | undefined) => ReactNode;
 }
+/**
+ * A hover popover row for one series — the shared `ChartHoverCardRow`, fed from a
+ * `LineChartSeries` and keyed by `series.key`.
+ */
 export declare const LineChartHoverPopoverRow: FC<LineChartHoverPopoverRowProps>;

package/dist/components/SimpleCharts/LineChart/LineChartHoverPopoverRow.js

@@ -1,33 +1,14 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../../utils/cn.js";
-import { lineChartHoverPopoverRowClasses, lineChartHoverPopoverRowDotClasses, lineChartHoverPopoverRowLabelClasses, lineChartHoverPopoverRowValueClasses } from "./classes.js";
-import { LineChartHoverPopoverDot } from "./LineChartHoverPopoverDot.js";
-const defaultFormatValue = (value)=>{
-    if (null == value) return '—';
-    return 'number' == typeof value ? value.toLocaleString() : String(value);
-};
-const LineChartHoverPopoverRow = ({ series, value, formatValue = defaultFormatValue, ref, className, children, ...props })=>/*#__PURE__*/ jsx("div", {
-        ...props,
+import { jsx } from "react/jsx-runtime";
+import { ChartHoverCardRow } from "../internal/ChartHoverCard.js";
+const LineChartHoverPopoverRow = ({ series, value, formatValue, children, ref, ...props })=>/*#__PURE__*/ jsx(ChartHoverCardRow, {
         ref: ref,
-        "data-slot": "line-chart-hover-popover-row",
         "data-key": series.key,
-        className: cn(lineChartHoverPopoverRowClasses, className),
-        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsx(LineChartHoverPopoverDot, {
-                    color: series.color ?? 'slate',
-                    className: lineChartHoverPopoverRowDotClasses
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: lineChartHoverPopoverRowLabelClasses,
-                    children: series.label
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: lineChartHoverPopoverRowValueClasses,
-                    children: formatValue(value)
-                })
-            ]
-        })
+        color: series.color ?? 'slate',
+        label: series.label,
+        value: value,
+        formatValue: formatValue,
+        ...props,
+        children: children
     });
 LineChartHoverPopoverRow.displayName = 'LineChartHoverPopoverRow';
 export { LineChartHoverPopoverRow };

package/dist/components/SimpleCharts/LineChart/classes.d.ts

@@ -12,13 +12,7 @@ export declare const lineChartLegendItemVariants: (props?: ({
     selected?: boolean | null | undefined;
     dimmed?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const lineChartHoverPopoverClasses: string;
 export declare const lineChartHoverPopoverTimestampClasses: string;
-export declare const lineChartHoverPopoverRowClasses: string;
-export declare const lineChartHoverPopoverRowDotClasses: string;
-export declare const lineChartHoverPopoverRowLabelClasses: string;
-export declare const lineChartHoverPopoverRowValueClasses: string;
-export declare const lineChartHoverPopoverDotClasses: string;
 export declare const lineChartZoomPopoverClasses: string;
 export declare const lineChartZoomPopoverRangeClasses: string;
 export declare const lineChartZoomPopoverConfirmClasses: string;

package/dist/components/SimpleCharts/LineChart/classes.js

@@ -78,13 +78,7 @@ const lineChartLegendItemVariants = cva("group/line-chart-legend-item relative f
         dimmed: false
     }
 });
-const lineChartHoverPopoverClasses = "bg-bg-surface-2 border border-border-primary-light rounded-12 shadow-md px-12 py-8 min-w-160 flex flex-col gap-4 pointer-events-none";
 const lineChartHoverPopoverTimestampClasses = "text-xs font-medium text-text-primary";
-const lineChartHoverPopoverRowClasses = "relative h-16 w-full pl-12 flex items-center gap-8 text-xs font-mono text-text-primary";
-const lineChartHoverPopoverRowDotClasses = "absolute left-0 top-4";
-const lineChartHoverPopoverRowLabelClasses = "truncate min-w-0 font-normal";
-const lineChartHoverPopoverRowValueClasses = "ml-auto shrink-0 font-medium";
-const lineChartHoverPopoverDotClasses = "inline-block size-8 rounded-2";
 const lineChartZoomPopoverClasses = "bg-bg-surface-2 border border-border-primary-light rounded-12 shadow-md px-12 py-8 min-w-160 flex flex-col gap-8";
 const lineChartZoomPopoverRangeClasses = "text-xs font-medium text-text-primary whitespace-nowrap";
 const lineChartZoomPopoverConfirmClasses = "inline-flex items-center justify-center h-24 px-8 w-full rounded-8 bg-states-brand-default-alt text-text-brand text-sm font-medium transition-colors outline-none hover:bg-states-brand-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-brand";
@@ -92,4 +86,4 @@ const lineChartTooltipCenterClasses = '-translate-y-1/2';
 const lineChartEmptyRootClasses = "relative w-full";
 const lineChartEmptyMessageClasses = "absolute top-0 left-0 right-0 flex items-center justify-center";
 const lineChartEmptyMessageTextClasses = "px-8 bg-bg-surface-1 text-xs font-mono text-text-secondary";
-export { lineChartBodyClasses, lineChartBodyZoomEnabledClasses, lineChartEmptyMessageClasses, lineChartEmptyMessageTextClasses, lineChartEmptyRootClasses, lineChartHoverPopoverClasses, lineChartHoverPopoverDotClasses, lineChartHoverPopoverRowClasses, lineChartHoverPopoverRowDotClasses, lineChartHoverPopoverRowLabelClasses, lineChartHoverPopoverRowValueClasses, lineChartHoverPopoverTimestampClasses, lineChartLegendItemVariants, lineChartLegendVariants, lineChartRootClasses, lineChartTooltipCenterClasses, lineChartZoomCursorPopoverClasses, lineChartZoomPopoverClasses, lineChartZoomPopoverConfirmClasses, lineChartZoomPopoverRangeClasses };
+export { lineChartBodyClasses, lineChartBodyZoomEnabledClasses, lineChartEmptyMessageClasses, lineChartEmptyMessageTextClasses, lineChartEmptyRootClasses, lineChartHoverPopoverTimestampClasses, lineChartLegendItemVariants, lineChartLegendVariants, lineChartRootClasses, lineChartTooltipCenterClasses, lineChartZoomCursorPopoverClasses, lineChartZoomPopoverClasses, lineChartZoomPopoverConfirmClasses, lineChartZoomPopoverRangeClasses };

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

@@ -0,0 +1,14 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+export interface MetricProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The family's compact stat, as a compound "brick set". Compose:
+ * `MetricHeader` (the shared value/total/delta row — also reused by `HorizontalBarStack`),
+ * `MetricValue`, `MetricTotal`, `MetricDelta`, and `MetricCaption`.
+ *
+ * Body-only: the card frame and "Title" header come from `Chart` / `ChartHeader` /
+ * `ChartTitle`, like every member of the family.
+ */
+export declare const Metric: FC<MetricProps>;

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

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