@x-plat/design-system 0.5.37 → 0.5.38

package/dist/index.js

@@ -6380,28 +6380,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;
@@ -6466,7 +6449,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);
@@ -6486,7 +6469,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;
@@ -6503,14 +6485,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();
         }
@@ -6578,7 +6558,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);
@@ -6598,7 +6578,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;
@@ -6615,14 +6594,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();
         }
@@ -6690,8 +6668,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);
@@ -6718,7 +6695,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;
@@ -6741,7 +6718,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}`
@@ -6829,14 +6807,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(() => {
@@ -6851,13 +6832,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 })
+      ]
     }
   );
 };
@@ -6900,8 +6888,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)]);
@@ -6909,13 +6897,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";
@@ -9435,18 +9423,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;
@@ -9891,11 +9955,11 @@ Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-import { Fragment as Fragment5, jsx as jsx354, jsxs as jsxs224 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx354, jsxs as jsxs224 } from "react/jsx-runtime";
 var Layout = (props) => {
   const { header, sideBar, children } = props;
   return /* @__PURE__ */ jsx354("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ jsx354(Fragment5, { children: sideBar }),
+    sideBar && /* @__PURE__ */ jsx354(Fragment6, { children: sideBar }),
     /* @__PURE__ */ jsxs224("div", { className: "lib-xplat-layout-content", children: [
       header && /* @__PURE__ */ jsx354("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.37",
+  "version": "0.5.38",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",