@x-plat/design-system 0.5.37 → 0.5.38

package/dist/components/index.css

@@ -2034,17 +2034,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;
@@ -4435,50 +4455,50 @@
 }
 
 /* src/components/Tooltip/tooltip.scss */
+.lib-xplat-tooltip-trigger {
+  display: inline-flex;
+}
 .lib-xplat-tooltip {
-  width: fit-content;
-  position: relative;
+  z-index: 1100;
+  padding: var(--spacing-space-3);
+  border-radius: var(--spacing-radius-md);
+  max-width: 240px;
+  pointer-events: none;
+  animation: tooltip-show 120ms ease-out;
 }
-.lib-xplat-tooltip > .tooltip-content {
-  width: fit-content;
-  height: fit-content;
+.lib-xplat-tooltip .tooltip-title {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
 }
-.lib-xplat-tooltip > .tooltip-wrapper {
-  position: absolute;
-  transform: translateX(-50%) scale(0.5);
-  left: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  white-space: nowrap;
-  border-radius: var(--spacing-radius-sm);
-  padding: var(--spacing-space-2) var(--spacing-space-2);
-  opacity: 0;
-  pointer-events: none;
-  bottom: 100%;
-  transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+.lib-xplat-tooltip .tooltip-desc {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 400;
 }
-.lib-xplat-tooltip > .tooltip-wrapper.primary {
-  color: var(--semantic-text-inverse);
+.lib-xplat-tooltip.dark {
   background-color: var(--semantic-surface-neutral-strong);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
-.lib-xplat-tooltip > .tooltip-wrapper.secondary {
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+.lib-xplat-tooltip.dark .tooltip-title,
+.lib-xplat-tooltip.dark .tooltip-desc {
+  color: var(--semantic-text-inverse);
 }
-.lib-xplat-tooltip.tooltip-bottom > .tooltip-wrapper {
-  top: 100%;
-  bottom: auto;
-  transform-origin: top center;
+.lib-xplat-tooltip.light {
+  background-color: var(--semantic-surface-neutral-default);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
-.lib-xplat-tooltip.tooltip-top > .tooltip-wrapper {
-  bottom: 100%;
-  top: auto;
-  transform-origin: bottom center;
+.lib-xplat-tooltip.light .tooltip-title,
+.lib-xplat-tooltip.light .tooltip-desc {
+  color: var(--semantic-text-subtle);
 }
-.lib-xplat-tooltip:hover > .tooltip-content + .tooltip-wrapper,
-.lib-xplat-tooltip > .tooltip-content:hover + .tooltip-wrapper {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateX(-50%) scale(1);
+@keyframes tooltip-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* src/components/Video/video.scss */

package/dist/components/index.js

@@ -2290,28 +2290,11 @@ var useChartTooltip = (enabled) => {
     if (!rect) return;
     setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
   }, [enabled]);
-  const showAt = React6.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 = React6.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
-  return { tooltip, show, showAt, hide, move, containerRef };
+  return { tooltip, show, hide, move, containerRef };
 };
 var GridLines = React6.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx307(Fragment2, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
@@ -2376,7 +2359,7 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React6.useMemo(() => Object.entries(data), [data]);
   const maxVal = React6.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2396,7 +2379,6 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
     [entries, count, chartW, chartH, maxVal]
   );
   const clipRef = React6.useRef(null);
-  const svgRef = React6.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React6.useEffect(() => {
     if (!animate || !clipRef.current) return;
@@ -2413,14 +2395,12 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
   return /* @__PURE__ */ jsxs197(
     "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();
         }
@@ -2488,7 +2468,7 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
+var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React6.useMemo(() => Object.entries(data), [data]);
   const maxVal = React6.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2508,7 +2488,6 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
     [entries, count, chartW, chartH, maxVal]
   );
   const curveClipRef = React6.useRef(null);
-  const curveSvgRef = React6.useRef(null);
   const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React6.useEffect(() => {
     if (!animate || !curveClipRef.current) return;
@@ -2525,14 +2504,13 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
   return /* @__PURE__ */ jsxs197(
     "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();
         }
@@ -2600,8 +2578,7 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
   );
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
-  const barSvgRef = React6.useRef(null);
+var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React6.useMemo(() => Object.entries(data), [data]);
   const maxVal = React6.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2628,7 +2605,7 @@ var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onS
     [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
-  return /* @__PURE__ */ jsxs197("svg", { ref: barSvgRef, viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
     labels.map((label, i) => {
       if (i % barLabelStep !== 0) return null;
@@ -2651,7 +2628,8 @@ var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onS
               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}`
@@ -2739,14 +2717,17 @@ var PieDonutChart = React6.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 = React6.useRef(null);
   const [pos, setPos] = React6.useState({ left: 0, top: 0 });
   React6.useLayoutEffect(() => {
@@ -2761,13 +2742,20 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
     if (left < 0) left = 0;
     setPos({ left, top });
   }, [x, y, containerWidth, containerHeight]);
-  return /* @__PURE__ */ jsx307(
+  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__ */ jsxs197(
     "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__ */ jsx307("div", { className: "chart-tooltip-title", children: title }),
+        desc && /* @__PURE__ */ jsx307("div", { className: "chart-tooltip-desc", children: desc })
+      ]
     }
   );
 };
@@ -2810,8 +2798,8 @@ var ChartLegend = ({ data, labels, type }) => {
   }) });
 };
 var Chart = React6.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 = React6.useMemo(() => data, [JSON.stringify(data)]);
   const stableLabels = React6.useMemo(() => labels, [JSON.stringify(labels)]);
@@ -2819,13 +2807,13 @@ var Chart = React6.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs197("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx307(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx307(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx307(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ jsx307(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx307(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx307(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx307(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.visible && tooltip.content && /* @__PURE__ */ jsx307(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
+    tooltip.visible && tooltip.content && /* @__PURE__ */ jsx307(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";
@@ -5332,18 +5320,94 @@ ToastProvider.displayName = "ToastProvider";
 
 // src/components/Tooltip/Tooltip.tsx
 import React39 from "react";
-import { jsx as jsx348, jsxs as jsxs221 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx348, jsxs as jsxs221 } from "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 = React39.useRef(null);
-  return /* @__PURE__ */ jsxs221("div", { className: "lib-xplat-tooltip", children: [
-    /* @__PURE__ */ jsx348("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ jsx348("div", { className: clsx_default("tooltip-wrapper", type), children: description })
-  ] });
+  const triggerRef = React39.useRef(null);
+  const tooltipRef = React39.useRef(null);
+  const [visible, setVisible] = React39.useState(false);
+  const [pos, setPos] = React39.useState({ left: 0, top: 0 });
+  const delayTimer = React39.useRef(0);
+  const calculatePos = React39.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 = React39.useCallback(() => {
+    if (disabled) return;
+    delayTimer.current = window.setTimeout(() => {
+      setVisible(true);
+    }, SHOW_DELAY);
+  }, [disabled]);
+  const handleMouseMove = React39.useCallback((e) => {
+    if (!visible) return;
+    calculatePos(e.clientX, e.clientY);
+  }, [visible, calculatePos]);
+  const handleMouseLeave = React39.useCallback(() => {
+    window.clearTimeout(delayTimer.current);
+    setVisible(false);
+  }, []);
+  const handleClick = React39.useCallback(() => {
+    window.clearTimeout(delayTimer.current);
+    setVisible(false);
+  }, []);
+  const handleFocus = React39.useCallback(() => {
+    if (disabled) return;
+    setVisible(true);
+  }, [disabled]);
+  const handleBlur = React39.useCallback(() => {
+    setVisible(false);
+  }, []);
+  React39.useLayoutEffect(() => {
+    if (!visible || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    calculatePos(rect.right, rect.top);
+  }, [visible, calculatePos]);
+  if (!title && !description) return /* @__PURE__ */ jsx348(Fragment5, { children });
+  return /* @__PURE__ */ jsxs221(
+    "div",
+    {
+      ref: triggerRef,
+      className: "lib-xplat-tooltip-trigger",
+      onMouseEnter: handleMouseEnter,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      children: [
+        children,
+        visible && /* @__PURE__ */ jsx348(Portal_default, { children: /* @__PURE__ */ jsxs221(
+          "div",
+          {
+            ref: tooltipRef,
+            className: clsx_default("lib-xplat-tooltip", type),
+            style: { position: "fixed", left: pos.left, top: pos.top },
+            children: [
+              title && /* @__PURE__ */ jsx348("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ jsx348("div", { className: "tooltip-desc", children: description })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 };
 Tooltip.displayName = "Tooltip";
 var Tooltip_default = Tooltip;