@x-plat/design-system 0.5.36 → 0.5.38

package/dist/components/Chart/index.cjs

@@ -186,15 +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((x, y, content) => {
-    if (!enabled) return;
-    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;
@@ -259,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);
@@ -299,9 +295,8 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
       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)}`);
+        if (activeIndex !== null) {
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -369,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);
@@ -411,7 +406,7 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -479,7 +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 }) => {
+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);
@@ -529,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}`),
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -617,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(() => {
@@ -639,13 +638,20 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
     if (left < 0) left = 0;
     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 })
+      ]
     }
   );
 };
@@ -688,8 +694,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)]);
@@ -697,13 +703,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 === "bar" || 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 })
+    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, 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,15 +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((x, y, content) => {
-    if (!enabled) return;
-    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;
@@ -223,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);
@@ -263,9 +259,8 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onS
       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)}`);
+        if (activeIndex !== null) {
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -333,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);
@@ -375,7 +370,7 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
         handleMouseMove(e);
         if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
           const p = seriesPoints[0][activeIndex];
-          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
+          onHover(e, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -443,7 +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 }) => {
+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);
@@ -493,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}`),
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -581,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(() => {
@@ -603,13 +602,20 @@ var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
     if (left < 0) left = 0;
     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 })
+      ]
     }
   );
 };
@@ -652,8 +658,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)]);
@@ -661,13 +667,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 === "bar" || 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 })
+    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, 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;

package/dist/components/Tooltip/index.css

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

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

@@ -1,14 +1,12 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
 interface TooltipProps {
-    type?: "primary" | "secondary";
-    description: React.ReactNode;
-    children?: React.ReactNode;
+    type?: "dark" | "light";
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    disabled?: boolean;
 }
-declare const Tooltip: {
-    (props: TooltipProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare const Tooltip: React.FC<TooltipProps>;
 
 export { Tooltip };

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

@@ -1,14 +1,12 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
 interface TooltipProps {
-    type?: "primary" | "secondary";
-    description: React.ReactNode;
-    children?: React.ReactNode;
+    type?: "dark" | "light";
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    disabled?: boolean;
 }
-declare const Tooltip: {
-    (props: TooltipProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare const Tooltip: React.FC<TooltipProps>;
 
 export { Tooltip };