@x-plat/design-system 0.5.37 → 0.5.39

package/dist/components/Chart/index.cjs

@@ -186,28 +186,11 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = import_react.default.useCallback((svgX, svgY, content, svgEl) => {
-    if (!enabled) return;
-    const container = containerRef.current;
-    if (!container) return;
-    let x = svgX;
-    let y = svgY;
-    if (svgEl) {
-      const svgRect = svgEl.getBoundingClientRect();
-      const containerRect = container.getBoundingClientRect();
-      const vb = svgEl.viewBox.baseVal;
-      const scaleX = svgRect.width / (vb.width || 1);
-      const scaleY = svgRect.height / (vb.height || 1);
-      x = svgX * scaleX + (svgRect.left - containerRect.left);
-      y = svgY * scaleY + (svgRect.top - containerRect.top);
-    }
-    setTooltip({ visible: true, x, y, content });
-  }, [enabled]);
   const hide = import_react.default.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
-  return { tooltip, show, showAt, hide, move, containerRef };
+  return { tooltip, show, hide, move, containerRef };
 };
 var GridLines = import_react.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
@@ -272,7 +255,7 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+var LineChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -292,7 +275,6 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
     [entries, count, chartW, chartH, maxVal]
   );
   const clipRef = import_react.default.useRef(null);
-  const svgRef = import_react.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react.default.useEffect(() => {
     if (!animate || !clipRef.current) return;
@@ -309,14 +291,12 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     {
-      ref: svgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
-          const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, svgRef.current);
+        if (activeIndex !== null) {
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -384,7 +364,7 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+var CurveChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -404,7 +384,6 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
     [entries, count, chartW, chartH, maxVal]
   );
   const curveClipRef = import_react.default.useRef(null);
-  const curveSvgRef = import_react.default.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react.default.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
@@ -421,14 +400,13 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     {
-      ref: curveSvgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, curveSvgRef.current);
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -496,8 +474,7 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
   );
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
-  const barSvgRef = import_react.default.useRef(null);
+var BarChart = import_react.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -524,7 +501,7 @@ var BarChart = import_react.default.memo(({ data, labels, width, height, animate
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
@@ -547,7 +524,8 @@ var BarChart = import_react.default.memo(({ data, labels, width, height, animate
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`, barSvgRef.current),
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -635,14 +613,17 @@ var PieDonutChart = import_react.default.memo(
         {
           d: s.d,
           fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice"
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label} \u2014 ${s.v.toLocaleString()} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
         }
       ) }, i)) })
     ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
+var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, children }) => {
   const ref = import_react.default.useRef(null);
   const [pos, setPos] = import_react.default.useState({ left: 0, top: 0 });
   import_react.default.useLayoutEffect(() => {
@@ -653,17 +634,25 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
     let left = x + TOOLTIP_OFFSET;
     let top = y - h - TOOLTIP_OFFSET;
     if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
-    if (top < 0) top = y + TOOLTIP_OFFSET;
     if (left < 0) left = 0;
+    if (top < 0) top = y + TOOLTIP_OFFSET;
+    if (top + h > containerHeight) top = containerHeight - h;
     setPos({ left, top });
   }, [x, y, containerWidth, containerHeight]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const content = typeof children === "string" ? children : "";
+  const sepIdx = content.indexOf(" \u2014 ");
+  const title = sepIdx >= 0 ? content.slice(0, sepIdx) : content;
+  const desc = sepIdx >= 0 ? content.slice(sepIdx + 3) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref,
-      className: "chart-tooltip chart-tooltip-show",
+      className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
       style: { left: pos.left, top: pos.top },
-      children
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "chart-tooltip-title", children: title }),
+        desc && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "chart-tooltip-desc", children: desc })
+      ]
     }
   );
 };
@@ -706,8 +695,8 @@ var ChartLegend = ({ data, labels, type }) => {
   }) });
 };
 var Chart = import_react.default.memo((props) => {
-  const { type, data, labels, tooltip: showTooltip = true } = props;
-  const { tooltip, show, showAt, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { type, data, labels, tooltip: showTooltip = true, tooltipType = "dark" } = props;
+  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = import_react.default.useMemo(() => data, [JSON.stringify(data)]);
   const stableLabels = import_react.default.useMemo(() => labels, [JSON.stringify(labels)]);
@@ -715,13 +704,13 @@ var Chart = import_react.default.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
+    tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";

package/dist/components/Chart/index.css

@@ -109,17 +109,37 @@
   position: absolute;
   z-index: 10;
   padding: var(--spacing-space-3);
-  background-color: var(--semantic-surface-neutral-strong);
-  color: var(--semantic-text-inverse);
-  font-size: 12px;
-  line-height: 18px;
-  font-weight: 500;
   border-radius: var(--spacing-radius-md);
   max-width: 240px;
   pointer-events: none;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   animation: chart-tooltip-in 120ms ease-out;
 }
+.lib-xplat-chart .chart-tooltip .chart-tooltip-title {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
+}
+.lib-xplat-chart .chart-tooltip .chart-tooltip-desc {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 400;
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-dark {
+  background-color: var(--semantic-surface-neutral-strong);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-title,
+.lib-xplat-chart .chart-tooltip.chart-tooltip-dark .chart-tooltip-desc {
+  color: var(--semantic-text-inverse);
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-light {
+  background-color: var(--semantic-surface-neutral-default);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-title,
+.lib-xplat-chart .chart-tooltip.chart-tooltip-light .chart-tooltip-desc {
+  color: var(--semantic-text-subtle);
+}
 .lib-xplat-chart .chart-legend {
   display: flex;
   flex-wrap: wrap;

package/dist/components/Chart/index.d.cts

@@ -5,6 +5,7 @@ interface ChartProps {
     data: Record<string, number[]>;
     labels: string[];
     tooltip?: boolean;
+    tooltipType?: "dark" | "light";
 }
 declare const Chart: React.NamedExoticComponent<ChartProps>;
 

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

@@ -5,6 +5,7 @@ interface ChartProps {
     data: Record<string, number[]>;
     labels: string[];
     tooltip?: boolean;
+    tooltipType?: "dark" | "light";
 }
 declare const Chart: React.NamedExoticComponent<ChartProps>;
 

package/dist/components/Chart/index.js

@@ -150,28 +150,11 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = React.useCallback((svgX, svgY, content, svgEl) => {
-    if (!enabled) return;
-    const container = containerRef.current;
-    if (!container) return;
-    let x = svgX;
-    let y = svgY;
-    if (svgEl) {
-      const svgRect = svgEl.getBoundingClientRect();
-      const containerRect = container.getBoundingClientRect();
-      const vb = svgEl.viewBox.baseVal;
-      const scaleX = svgRect.width / (vb.width || 1);
-      const scaleY = svgRect.height / (vb.height || 1);
-      x = svgX * scaleX + (svgRect.left - containerRect.left);
-      y = svgY * scaleY + (svgRect.top - containerRect.top);
-    }
-    setTooltip({ visible: true, x, y, content });
-  }, [enabled]);
   const hide = React.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
-  return { tooltip, show, showAt, hide, move, containerRef };
+  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) => {
   const y = PADDING.top + (1 - ratio) * chartH;
@@ -236,7 +219,7 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -256,7 +239,6 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onS
     [entries, count, chartW, chartH, maxVal]
   );
   const clipRef = React.useRef(null);
-  const svgRef = React.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React.useEffect(() => {
     if (!animate || !clipRef.current) return;
@@ -273,14 +255,12 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onS
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      ref: svgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
-          const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, svgRef.current);
+        if (activeIndex !== null) {
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -348,7 +328,7 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onS
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -368,7 +348,6 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
     [entries, count, chartW, chartH, maxVal]
   );
   const curveClipRef = React.useRef(null);
-  const curveSvgRef = React.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
@@ -385,14 +364,13 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      ref: curveSvgRef,
       viewBox: `0 0 ${width} ${height}`,
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`, curveSvgRef.current);
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -460,8 +438,7 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
   );
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
-  const barSvgRef = React.useRef(null);
+var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -488,7 +465,7 @@ var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onSh
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsxs("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+  return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ jsx(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
@@ -511,7 +488,8 @@ var BarChart = React.memo(({ data, labels, width, height, animate, onHover, onSh
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`, barSvgRef.current),
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -599,14 +577,17 @@ var PieDonutChart = React.memo(
         {
           d: s.d,
           fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice"
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label} \u2014 ${s.v.toLocaleString()} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
         }
       ) }, i)) })
     ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
+var ChartTooltip = ({ x, y, containerWidth, containerHeight, tooltipType, children }) => {
   const ref = React.useRef(null);
   const [pos, setPos] = React.useState({ left: 0, top: 0 });
   React.useLayoutEffect(() => {
@@ -617,17 +598,25 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
     let left = x + TOOLTIP_OFFSET;
     let top = y - h - TOOLTIP_OFFSET;
     if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
-    if (top < 0) top = y + TOOLTIP_OFFSET;
     if (left < 0) left = 0;
+    if (top < 0) top = y + TOOLTIP_OFFSET;
+    if (top + h > containerHeight) top = containerHeight - h;
     setPos({ left, top });
   }, [x, y, containerWidth, containerHeight]);
-  return /* @__PURE__ */ jsx(
+  const content = typeof children === "string" ? children : "";
+  const sepIdx = content.indexOf(" \u2014 ");
+  const title = sepIdx >= 0 ? content.slice(0, sepIdx) : content;
+  const desc = sepIdx >= 0 ? content.slice(sepIdx + 3) : "";
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      className: "chart-tooltip chart-tooltip-show",
+      className: `chart-tooltip chart-tooltip-show chart-tooltip-${tooltipType}`,
       style: { left: pos.left, top: pos.top },
-      children
+      children: [
+        title && /* @__PURE__ */ jsx("div", { className: "chart-tooltip-title", children: title }),
+        desc && /* @__PURE__ */ jsx("div", { className: "chart-tooltip-desc", children: desc })
+      ]
     }
   );
 };
@@ -670,8 +659,8 @@ var ChartLegend = ({ data, labels, type }) => {
   }) });
 };
 var Chart = React.memo((props) => {
-  const { type, data, labels, tooltip: showTooltip = true } = props;
-  const { tooltip, show, showAt, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { type, data, labels, tooltip: showTooltip = true, tooltipType = "dark" } = 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)]);
@@ -679,13 +668,13 @@ var Chart = React.memo((props) => {
   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, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    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 === "pie" || type === "doughnut") && /* @__PURE__ */ jsx(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.visible && tooltip.content && /* @__PURE__ */ jsx(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
+    tooltip.visible && tooltip.content && /* @__PURE__ */ jsx(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";

package/dist/components/Tooltip/index.cjs

@@ -35,7 +35,21 @@ __export(Tooltip_exports, {
 module.exports = __toCommonJS(Tooltip_exports);
 
 // src/components/Tooltip/Tooltip.tsx
+var import_react2 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/Portal.tsx
 var import_react = __toESM(require("react"), 1);
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var PortalContainerContext = import_react.default.createContext(null);
+var Portal = ({ children }) => {
+  const contextContainer = import_react.default.useContext(PortalContainerContext);
+  if (typeof document === "undefined") return null;
+  const container = contextContainer ?? document.body;
+  return import_react_dom.default.createPortal(children, container);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -54,18 +68,94 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var OFFSET = 12;
+var SHOW_DELAY = 300;
 var Tooltip = (props) => {
   const {
-    type = "primary",
+    type = "dark",
+    title,
     description,
-    children
+    children,
+    disabled = false
   } = props;
-  const iconRef = import_react.default.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
-  ] });
+  const triggerRef = import_react2.default.useRef(null);
+  const tooltipRef = import_react2.default.useRef(null);
+  const [visible, setVisible] = import_react2.default.useState(false);
+  const [pos, setPos] = import_react2.default.useState({ left: 0, top: 0 });
+  const delayTimer = import_react2.default.useRef(0);
+  const calculatePos = import_react2.default.useCallback((clientX, clientY) => {
+    const el = tooltipRef.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const vw = window.innerWidth;
+    let left = clientX + OFFSET;
+    let top = clientY - h - OFFSET;
+    if (left + w > vw - 8) left = clientX - w - OFFSET;
+    if (top < 8) top = clientY + OFFSET;
+    if (left < 8) left = 8;
+    setPos({ left, top });
+  }, []);
+  const handleMouseEnter = import_react2.default.useCallback(() => {
+    if (disabled) return;
+    delayTimer.current = window.setTimeout(() => {
+      setVisible(true);
+    }, SHOW_DELAY);
+  }, [disabled]);
+  const handleMouseMove = import_react2.default.useCallback((e) => {
+    if (!visible) return;
+    calculatePos(e.clientX, e.clientY);
+  }, [visible, calculatePos]);
+  const handleMouseLeave = import_react2.default.useCallback(() => {
+    window.clearTimeout(delayTimer.current);
+    setVisible(false);
+  }, []);
+  const handleClick = import_react2.default.useCallback(() => {
+    window.clearTimeout(delayTimer.current);
+    setVisible(false);
+  }, []);
+  const handleFocus = import_react2.default.useCallback(() => {
+    if (disabled) return;
+    setVisible(true);
+  }, [disabled]);
+  const handleBlur = import_react2.default.useCallback(() => {
+    setVisible(false);
+  }, []);
+  import_react2.default.useLayoutEffect(() => {
+    if (!visible || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    calculatePos(rect.right, rect.top);
+  }, [visible, calculatePos]);
+  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref: triggerRef,
+      className: "lib-xplat-tooltip-trigger",
+      onMouseEnter: handleMouseEnter,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      children: [
+        children,
+        visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            ref: tooltipRef,
+            className: clsx_default("lib-xplat-tooltip", type),
+            style: { position: "fixed", left: pos.left, top: pos.top },
+            children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tooltip-desc", children: description })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 };
 Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;