@x-plat/design-system 0.5.33 → 0.5.35

package/dist/components/Chart/index.css

@@ -4,11 +4,14 @@
   width: 100%;
   height: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .lib-xplat-chart .chart-svg {
   display: block;
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   will-change: transform;
   contain: layout style paint;
 }

package/dist/components/Chart/index.js

@@ -1,6 +1,22 @@
 // src/components/Chart/Chart.tsx
+import React2 from "react";
+
+// src/tokens/hooks/Portal.tsx
 import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import ReactDOM from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var PortalContainerContext = React.createContext(null);
+var Portal = ({ children }) => {
+  const contextContainer = React.useContext(PortalContainerContext);
+  if (typeof document === "undefined") return null;
+  const container = contextContainer ?? document.body;
+  return ReactDOM.createPortal(children, container);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/components/Chart/Chart.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var CATEGORICAL_COUNT = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT }, (_, i) => {
   const n = i + 1;
@@ -46,11 +62,11 @@ var toSmoothPath = (points) => {
 };
 var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
-  const [size, setSize] = React.useState({ width: 0, height: 0 });
-  const settleTimer = React.useRef(0);
-  const committedSize = React.useRef({ width: 0, height: 0 });
-  const initialRef = React.useRef(true);
-  React.useEffect(() => {
+  const [size, setSize] = React2.useState({ width: 0, height: 0 });
+  const settleTimer = React2.useRef(0);
+  const committedSize = React2.useRef({ width: 0, height: 0 });
+  const initialRef = React2.useRef(true);
+  React2.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
@@ -92,10 +108,10 @@ var useChartSize = (ref) => {
 };
 var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 var useChartAnimation = (containerRef, dataKey) => {
-  const [animate, setAnimate] = React.useState(false);
-  const prevDataKey = React.useRef(dataKey);
-  const hasAnimated = React.useRef(false);
-  React.useEffect(() => {
+  const [animate, setAnimate] = React2.useState(false);
+  const prevDataKey = React2.useRef(dataKey);
+  const hasAnimated = React2.useRef(false);
+  React2.useEffect(() => {
     if (prefersReducedMotion()) return;
     const el = containerRef.current;
     if (!el) return;
@@ -111,27 +127,29 @@ var useChartAnimation = (containerRef, dataKey) => {
     observer.observe(el);
     return () => observer.disconnect();
   }, [containerRef]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (dataKey !== prevDataKey.current) {
       prevDataKey.current = dataKey;
       if (prefersReducedMotion()) return;
       setAnimate(false);
-      requestAnimationFrame(() => setAnimate(true));
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setAnimate(true));
+      });
     }
   }, [dataKey]);
   return animate || prefersReducedMotion();
 };
 var TOOLTIP_OFFSET = 12;
 var useChartTooltip = (enabled) => {
-  const [tooltip, setTooltip] = React.useState({
+  const [tooltip, setTooltip] = React2.useState({
     visible: false,
     clientX: 0,
     clientY: 0,
     content: ""
   });
-  const containerRef = React.useRef(null);
-  const rafRef = React.useRef(0);
-  const move = React.useCallback((e) => {
+  const containerRef = React2.useRef(null);
+  const rafRef = React2.useRef(0);
+  const move = React2.useCallback((e) => {
     if (!enabled) return;
     const cx = e.clientX;
     const cy = e.clientY;
@@ -140,22 +158,22 @@ var useChartTooltip = (enabled) => {
       setTooltip((prev) => ({ ...prev, clientX: cx, clientY: cy }));
     });
   }, [enabled]);
-  const show = React.useCallback((e, content) => {
+  const show = React2.useCallback((e, content) => {
     if (!enabled) return;
     setTooltip({ visible: true, clientX: e.clientX, clientY: e.clientY, content });
   }, [enabled]);
-  const hide = React.useCallback(() => {
+  const hide = React2.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var GridLines = React.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx(Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+var GridLines = React2.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx2(Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
   const val = Math.round(maxVal * ratio);
   return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-    /* @__PURE__ */ jsx("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+    /* @__PURE__ */ jsx2("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ jsx2("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
   ] }, ratio);
 }) }));
 GridLines.displayName = "GridLines";
@@ -165,18 +183,18 @@ var getLabelStep = (count, chartW) => {
   if (count <= maxLabels) return 1;
   return Math.ceil(count / maxLabels);
 };
-var AxisLabels = React.memo(({ labels, count, chartW, height }) => {
+var AxisLabels = React2.memo(({ labels, count, chartW, height }) => {
   const step = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsx(Fragment, { children: labels.map((label, i) => {
+  return /* @__PURE__ */ jsx2(Fragment, { children: labels.map((label, i) => {
     if (i % step !== 0) return null;
     const x = PADDING.left + i / (count - 1 || 1) * chartW;
-    return /* @__PURE__ */ jsx("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    return /* @__PURE__ */ jsx2("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
 var useCrosshair = (seriesPoints, entries, labels, chartH) => {
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const handleMouseMove = React.useCallback((e) => {
+  const [activeIndex, setActiveIndex] = React2.useState(null);
+  const handleMouseMove = React2.useCallback((e) => {
     const svg = e.currentTarget;
     const rect = svg.getBoundingClientRect();
     const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
@@ -195,17 +213,17 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
     }
     setActiveIndex(minDist <= threshold ? closest : null);
   }, [seriesPoints]);
-  const handleMouseLeave = React.useCallback(() => {
+  const handleMouseLeave = React2.useCallback(() => {
     setActiveIndex(null);
   }, []);
-  const tooltipContent = React.useMemo(() => {
+  const tooltipContent = React2.useMemo(() => {
     if (activeIndex === null) return "";
     return entries.map(([key], di) => {
       const p = seriesPoints[di]?.[activeIndex];
       return p ? `${key}: ${p.v}` : "";
     }).filter(Boolean).join(" / ");
   }, [activeIndex, entries, seriesPoints]);
-  const getTooltipAt = React.useCallback((idx) => {
+  const getTooltipAt = React2.useCallback((idx) => {
     return entries.map(([key], di) => {
       const p = seriesPoints[di]?.[idx];
       return p ? `${key}: ${p.v}` : "";
@@ -213,16 +231,16 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = React.useMemo(() => Object.entries(data), [data]);
-  const maxVal = React.useMemo(() => {
+var LineChart = React2.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = React2.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React2.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = React.useMemo(
+  const seriesPoints = React2.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -232,31 +250,18 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const lineRefs = React.useRef([]);
-  const clipRef = React.useRef(null);
+  const clipRef = React2.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
-  React.useEffect(() => {
-    if (!animate) return;
-    lineRefs.current.forEach((el) => {
-      if (!el) return;
-      const len = el.getTotalLength();
-      el.style.strokeDasharray = `${len}`;
-      el.style.strokeDashoffset = `${len}`;
-      requestAnimationFrame(() => {
-        el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
-        el.style.strokeDashoffset = "0";
-      });
+  React2.useEffect(() => {
+    if (!animate || !clipRef.current) return;
+    clipRef.current.setAttribute("width", "0");
+    requestAnimationFrame(() => {
+      if (clipRef.current) {
+        clipRef.current.style.transition = "width 1200ms ease-out 200ms";
+        clipRef.current.setAttribute("width", `${width}`);
+      }
     });
-    if (clipRef.current) {
-      clipRef.current.setAttribute("width", "0");
-      requestAnimationFrame(() => {
-        if (clipRef.current) {
-          clipRef.current.style.transition = "width 1200ms ease-out 200ms";
-          clipRef.current.setAttribute("width", `${width}`);
-        }
-      });
-    }
-  }, [animate, seriesPoints, width]);
+  }, [animate, width]);
   const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const lineClipId = "line-area-clip";
   return /* @__PURE__ */ jsxs(
@@ -292,9 +297,9 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
         onLeave();
       },
       children: [
-        animate && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: lineClipId, children: /* @__PURE__ */ jsx("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
-        /* @__PURE__ */ jsx(GridLines, { width, height, chartH, maxVal }),
-        /* @__PURE__ */ jsx(AxisLabels, { labels, count, chartW, height }),
+        animate && /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("clipPath", { id: lineClipId, children: /* @__PURE__ */ jsx2("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ jsx2(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ jsx2(AxisLabels, { labels, count, chartW, height }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -304,31 +309,15 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
           const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
           const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
           return /* @__PURE__ */ jsxs("g", { children: [
-            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+            /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+              /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
             ] }) }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: areaD,
-                fill: `url(#${gradientId})`,
-                clipPath: animate ? `url(#${lineClipId})` : void 0
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "polyline",
-              {
-                ref: (el) => {
-                  lineRefs.current[di] = el;
-                },
-                points: polyPoints,
-                fill: "none",
-                stroke: color,
-                strokeWidth: "2"
-              }
-            ),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
+              /* @__PURE__ */ jsx2("path", { d: areaD, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ jsx2("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
+            ] }),
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx2(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -340,7 +329,7 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ jsx(
+        activeX !== null && /* @__PURE__ */ jsx2(
           "line",
           {
             x1: activeX,
@@ -350,7 +339,7 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "rect",
           {
             x: PADDING.left,
@@ -366,16 +355,16 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = React.useMemo(() => Object.entries(data), [data]);
-  const maxVal = React.useMemo(() => {
+var CurveChart = React2.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = React2.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React2.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
-  const seriesPoints = React.useMemo(
+  const seriesPoints = React2.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
         x: PADDING.left + i / (count - 1 || 1) * chartW,
@@ -385,31 +374,18 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const lineRefs = React.useRef([]);
-  const curveClipRef = React.useRef(null);
+  const curveClipRef = React2.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
-  React.useEffect(() => {
-    if (!animate) return;
-    lineRefs.current.forEach((el) => {
-      if (!el) return;
-      const len = el.getTotalLength();
-      el.style.strokeDasharray = `${len}`;
-      el.style.strokeDashoffset = `${len}`;
-      requestAnimationFrame(() => {
-        el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
-        el.style.strokeDashoffset = "0";
-      });
+  React2.useEffect(() => {
+    if (!animate || !curveClipRef.current) return;
+    curveClipRef.current.setAttribute("width", "0");
+    requestAnimationFrame(() => {
+      if (curveClipRef.current) {
+        curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
+        curveClipRef.current.setAttribute("width", `${width}`);
+      }
     });
-    if (curveClipRef.current) {
-      curveClipRef.current.setAttribute("width", "0");
-      requestAnimationFrame(() => {
-        if (curveClipRef.current) {
-          curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
-          curveClipRef.current.setAttribute("width", `${width}`);
-        }
-      });
-    }
-  }, [animate, seriesPoints, width]);
+  }, [animate, width]);
   const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const curveClipId = "curve-area-clip";
   return /* @__PURE__ */ jsxs(
@@ -445,9 +421,9 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
         onLeave();
       },
       children: [
-        animate && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: curveClipId, children: /* @__PURE__ */ jsx("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
-        /* @__PURE__ */ jsx(GridLines, { width, height, chartH, maxVal }),
-        /* @__PURE__ */ jsx(AxisLabels, { labels, count, chartW, height }),
+        animate && /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("clipPath", { id: curveClipId, children: /* @__PURE__ */ jsx2("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ jsx2(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ jsx2(AxisLabels, { labels, count, chartW, height }),
         entries.map(([key], di) => {
           const palette = getPalette(LINE_BAR_PALETTES, di, key);
           const color = palette[2];
@@ -457,31 +433,15 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
           const linePath = toSmoothPath(points);
           const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
           return /* @__PURE__ */ jsxs("g", { children: [
-            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+            /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+              /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
             ] }) }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: areaPath,
-                fill: `url(#${gradientId})`,
-                clipPath: animate ? `url(#${curveClipId})` : void 0
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                ref: (el) => {
-                  lineRefs.current[di] = el;
-                },
-                d: linePath,
-                fill: "none",
-                stroke: color,
-                strokeWidth: "2"
-              }
-            ),
-            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
+              /* @__PURE__ */ jsx2("path", { d: areaPath, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ jsx2("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
+            ] }),
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx2(
               "circle",
               {
                 cx: points[activeIndex].x,
@@ -493,7 +453,7 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
             )
           ] }, di);
         }),
-        activeX !== null && /* @__PURE__ */ jsx(
+        activeX !== null && /* @__PURE__ */ jsx2(
           "line",
           {
             x1: activeX,
@@ -503,7 +463,7 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
             className: "chart-crosshair"
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "rect",
           {
             x: PADDING.left,
@@ -519,9 +479,9 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
   );
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
-  const entries = React.useMemo(() => Object.entries(data), [data]);
-  const maxVal = React.useMemo(() => {
+var BarChart = React2.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+  const entries = React2.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React2.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
@@ -533,7 +493,7 @@ var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onMo
   const barGap = groupCount > 1 ? 2 : 0;
   const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
   const baseline = PADDING.top + chartH;
-  const bars = React.useMemo(
+  const bars = React2.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
         const totalBarsW = barW * groupCount + barGap * (groupCount - 1);
@@ -547,10 +507,10 @@ var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onMo
   );
   const barLabelStep = getLabelStep(count, chartW);
   return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ jsx2(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
-      return /* @__PURE__ */ jsx("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ jsx2("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
@@ -559,7 +519,7 @@ var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onMo
         const r = Math.min(4, b.w / 2);
         const d = b.h <= r ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r} Q ${b.x} ${b.y} ${b.x + r} ${b.y} H ${b.x + b.w - r} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r} V ${b.y + b.h} Z`;
         const delay = 100 + i * 80;
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx2(
           "path",
           {
             d,
@@ -580,11 +540,11 @@ var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onMo
   ] });
 });
 BarChart.displayName = "BarChart";
-var PieDonutChart = React.memo(
+var PieDonutChart = React2.memo(
   ({ data, labels, width, height, animate, isDoughnut, onHover, onMove, onLeave }) => {
-    const entries = React.useMemo(() => Object.entries(data), [data]);
-    const values = React.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
-    const total = React.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
+    const entries = React2.useMemo(() => Object.entries(data), [data]);
+    const values = React2.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
+    const total = React2.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
     const size = Math.min(width, height);
     const cx = size / 2;
     const cy = size / 2;
@@ -592,10 +552,10 @@ var PieDonutChart = React.memo(
     const innerR = isDoughnut ? r * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
-    const maskRef = React.useRef(null);
+    const maskRef = React2.useRef(null);
     const maskR = r + 10;
     const maskCircumference = 2 * Math.PI * maskR;
-    React.useEffect(() => {
+    React2.useEffect(() => {
       if (!animate || !maskRef.current) return;
       const el = maskRef.current;
       el.style.strokeDasharray = `${maskCircumference}`;
@@ -605,7 +565,7 @@ var PieDonutChart = React.memo(
         el.style.strokeDashoffset = "0";
       });
     }, [animate, maskCircumference]);
-    const sliceData = React.useMemo(() => {
+    const sliceData = React2.useMemo(() => {
       let angle0 = -Math.PI / 2;
       let cumulativeAngle = 0;
       return values.map((v, i) => {
@@ -640,7 +600,7 @@ var PieDonutChart = React.memo(
     }, [values, total, cx, cy, r, innerR, labels]);
     const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
     return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
-      animate && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx(
+      animate && /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("mask", { id: maskId, children: /* @__PURE__ */ jsx2(
         "circle",
         {
           ref: maskRef,
@@ -653,7 +613,7 @@ var PieDonutChart = React.memo(
           transform: `rotate(-90 ${cx} ${cy})`
         }
       ) }) }),
-      /* @__PURE__ */ jsx("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ jsx2("g", { children: /* @__PURE__ */ jsx2(
         "path",
         {
           d: s.d,
@@ -664,7 +624,7 @@ var PieDonutChart = React.memo(
           onMouseLeave: onLeave
         }
       ) }, i)) }),
-      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ jsx(
+      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ jsx2(
         "text",
         {
           x: s.lx,
@@ -682,9 +642,9 @@ var PieDonutChart = React.memo(
 );
 PieDonutChart.displayName = "PieDonutChart";
 var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
-  const ref = React.useRef(null);
-  const [pos, setPos] = React.useState({ left: 0, top: 0 });
-  React.useLayoutEffect(() => {
+  const ref = React2.useRef(null);
+  const [pos, setPos] = React2.useState({ left: 0, top: 0 });
+  React2.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     const w = el.offsetWidth;
@@ -697,7 +657,7 @@ var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
     if (left < 8) left = 8;
     setPos({ left, top });
   }, [clientX, clientY]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       ref,
@@ -714,13 +674,13 @@ var ChartLegend = ({ data, labels, type }) => {
     const total = values.reduce((a, b) => a + b, 0) || 1;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
-    return /* @__PURE__ */ jsx("div", { className: "chart-legend", children: values.map((v, i) => {
+    return /* @__PURE__ */ jsx2("div", { className: "chart-legend", children: values.map((v, i) => {
       const pct = Math.round(v / total * 100);
       const color = PIE_COLORS[(i + colorOffset) % PIE_COLORS.length];
       return /* @__PURE__ */ jsxs("div", { className: "chart-legend-item", children: [
-        /* @__PURE__ */ jsx("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+        /* @__PURE__ */ jsx2("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
         /* @__PURE__ */ jsxs("div", { className: "chart-legend-text", children: [
-          /* @__PURE__ */ jsx("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
+          /* @__PURE__ */ jsx2("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
           /* @__PURE__ */ jsxs("span", { className: "chart-legend-value", children: [
             v.toLocaleString(),
             "(",
@@ -731,37 +691,37 @@ var ChartLegend = ({ data, labels, type }) => {
       ] }, i);
     }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "chart-legend", children: entries.map(([key], di) => {
+  return /* @__PURE__ */ jsx2("div", { className: "chart-legend", children: entries.map(([key], di) => {
     const palette = getPalette(LINE_BAR_PALETTES, di, key);
     const color = palette[2];
     const values = entries[di][1];
     const sum = values.reduce((a, b) => a + b, 0);
     return /* @__PURE__ */ jsxs("div", { className: "chart-legend-item", children: [
-      /* @__PURE__ */ jsx("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+      /* @__PURE__ */ jsx2("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
       /* @__PURE__ */ jsxs("div", { className: "chart-legend-text", children: [
-        /* @__PURE__ */ jsx("span", { className: "chart-legend-label", children: key }),
-        /* @__PURE__ */ jsx("span", { className: "chart-legend-value", children: sum.toLocaleString() })
+        /* @__PURE__ */ jsx2("span", { className: "chart-legend-label", children: key }),
+        /* @__PURE__ */ jsx2("span", { className: "chart-legend-value", children: sum.toLocaleString() })
       ] })
     ] }, di);
   }) });
 };
-var Chart = React.memo((props) => {
+var Chart = React2.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
-  const stableData = React.useMemo(() => data, [JSON.stringify(data)]);
-  const stableLabels = React.useMemo(() => labels, [JSON.stringify(labels)]);
-  const dataKey = React.useMemo(() => JSON.stringify(labels), [labels]);
+  const stableData = React2.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = React2.useMemo(() => labels, [JSON.stringify(labels)]);
+  const dataKey = React2.useMemo(() => JSON.stringify(labels), [labels]);
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.content && /* @__PURE__ */ jsx(ChartTooltipPortal, { clientX: tooltip.clientX, clientY: tooltip.clientY, visible: tooltip.visible, children: tooltip.content })
+    ready && type === "line" && /* @__PURE__ */ jsx2(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx2(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx2(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx2(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx2(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx2(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    tooltip.content && /* @__PURE__ */ jsx2(Portal_default, { children: /* @__PURE__ */ jsx2(ChartTooltipPortal, { clientX: tooltip.clientX, clientY: tooltip.clientY, visible: tooltip.visible, children: tooltip.content }) })
   ] });
 });
 Chart.displayName = "Chart";