@x-plat/design-system 0.5.7 → 0.5.9

package/dist/components/{Card → Box}/index.cjs

@@ -17,24 +17,45 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/Card/index.ts
-var Card_exports = {};
-__export(Card_exports, {
-  Card: () => Card_default
+// src/components/Box/index.ts
+var Box_exports = {};
+__export(Box_exports, {
+  Box: () => Box_default
 });
-module.exports = __toCommonJS(Card_exports);
+module.exports = __toCommonJS(Box_exports);
 
-// src/components/Card/Card.tsx
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Box/Box.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Card = ({ children, title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-card", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "content", children })
+var Box = ({
+  children,
+  title,
+  variant = "outlined",
+  padding = "md"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "box-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "box-content", children })
   ] });
 };
-Card.displayName = "Card";
-var Card_default = Card;
+Box.displayName = "Box";
+var Box_default = Box;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Card
+  Box
 });

package/dist/components/Box/index.css

@@ -0,0 +1,55 @@
+/* src/components/Box/box.scss */
+.lib-xplat-box {
+  contain: layout style;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  border-radius: var(--spacing-radius-xl);
+  background-color: var(--semantic-surface-neutral-default);
+  overflow: hidden;
+}
+.lib-xplat-box.outlined {
+  border: 1px solid var(--semantic-border-default);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+.lib-xplat-box.elevated {
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+.lib-xplat-box.flat {
+  border: none;
+  background-color: var(--semantic-surface-neutral-subtle);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+.lib-xplat-box > .box-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--semantic-text-strong);
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  border-bottom: 1px solid var(--semantic-border-subtle);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lib-xplat-box > .box-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.lib-xplat-box.pad-none > .box-content {
+  padding: 0;
+}
+.lib-xplat-box.pad-sm > .box-content {
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+}
+.lib-xplat-box.pad-md > .box-content {
+  padding: var(--spacing-space-4);
+}
+.lib-xplat-box.pad-lg > .box-content {
+  padding: var(--spacing-space-6);
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type BoxVariant = "outlined" | "elevated" | "flat";
+type BoxPadding = "none" | "sm" | "md" | "lg";
+interface BoxProps {
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    variant?: BoxVariant;
+    padding?: BoxPadding;
+}
+declare const Box: React.FC<BoxProps>;
+
+export { Box };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type BoxVariant = "outlined" | "elevated" | "flat";
+type BoxPadding = "none" | "sm" | "md" | "lg";
+interface BoxProps {
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    variant?: BoxVariant;
+    padding?: BoxPadding;
+}
+declare const Box: React.FC<BoxProps>;
+
+export { Box };

package/dist/components/Box/index.js

@@ -0,0 +1,34 @@
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Box/Box.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Box = ({
+  children,
+  title,
+  variant = "outlined",
+  padding = "md"
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-box", variant, `pad-${padding}`), children: [
+    title && /* @__PURE__ */ jsx("div", { className: "box-title", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "box-content", children })
+  ] });
+};
+Box.displayName = "Box";
+var Box_default = Box;
+export {
+  Box_default as Box
+};

package/dist/components/Button/index.css

@@ -1,6 +1,11 @@
 /* src/components/Button/button.scss */
 .lib-xplat-button {
   width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-space-2);
+  white-space: nowrap;
   border-radius: var(--spacing-radius-md);
   font-weight: 500;
   cursor: pointer;

package/dist/components/Chart/index.cjs

@@ -37,25 +37,65 @@ module.exports = __toCommonJS(Chart_exports);
 // src/components/Chart/Chart.tsx
 var import_react = __toESM(require("react"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-var LINE_BAR_PALETTES = [
-  ["var(--primitive-red-100)", "var(--primitive-red-200)", "var(--primitive-red-300)", "var(--primitive-red-400)", "var(--primitive-red-500)", "var(--primitive-red-600)"],
-  ["var(--primitive-orange-100)", "var(--primitive-orange-200)", "var(--primitive-orange-300)", "var(--primitive-orange-400)", "var(--primitive-orange-500)", "var(--primitive-orange-600)"],
-  ["var(--primitive-yellow-100)", "var(--primitive-yellow-200)", "var(--primitive-yellow-300)", "var(--primitive-yellow-400)", "var(--primitive-yellow-500)", "var(--primitive-yellow-600)"],
-  ["var(--primitive-green-100)", "var(--primitive-green-200)", "var(--primitive-green-300)", "var(--primitive-green-400)", "var(--primitive-green-500)", "var(--primitive-green-600)"],
-  ["var(--primitive-blue-100)", "var(--primitive-blue-200)", "var(--primitive-blue-300)", "var(--primitive-blue-400)", "var(--primitive-blue-500)", "var(--primitive-blue-600)"],
-  ["var(--primitive-light-blue-100)", "var(--primitive-light-blue-200)", "var(--primitive-light-blue-300)", "var(--primitive-light-blue-400)", "var(--primitive-light-blue-500)", "var(--primitive-light-blue-600)"],
-  ["var(--primitive-purple-100)", "var(--primitive-purple-200)", "var(--primitive-purple-300)", "var(--primitive-purple-400)", "var(--primitive-purple-500)", "var(--primitive-purple-600)"],
-  ["var(--primitive-pink-100)", "var(--primitive-pink-200)", "var(--primitive-pink-300)", "var(--primitive-pink-400)", "var(--primitive-pink-500)", "var(--primitive-pink-600)"]
-];
-var PIE_PALETTES = [
-  ["var(--primitive-orange-300)", "var(--primitive-red-300)", "var(--primitive-yellow-300)", "var(--primitive-green-300)", "var(--primitive-blue-300)", "var(--primitive-light-blue-300)"],
-  ["var(--primitive-orange-400)", "var(--primitive-red-400)", "var(--primitive-yellow-400)", "var(--primitive-green-400)", "var(--primitive-blue-400)", "var(--primitive-light-blue-400)"],
-  ["var(--primitive-orange-500)", "var(--primitive-red-500)", "var(--primitive-yellow-500)", "var(--primitive-green-500)", "var(--primitive-blue-500)", "var(--primitive-light-blue-500)"]
-];
-var getPalette = (palettes, index) => {
-  return palettes[index % palettes.length];
+var CATEGORICAL_COUNT = 8;
+var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT }, (_, i) => {
+  const n = i + 1;
+  return [
+    `var(--semantic-categorical-${n}-bg)`,
+    `var(--semantic-categorical-${n}-area)`,
+    `var(--semantic-categorical-${n}-fill)`,
+    `var(--semantic-categorical-${n}-text)`
+  ];
+});
+var PIE_COLORS = Array.from(
+  { length: CATEGORICAL_COUNT },
+  (_, i) => `var(--semantic-categorical-${i + 1}-fill)`
+);
+var hashString = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
+  }
+  return Math.abs(hash);
+};
+var getPalette = (palettes, index, key) => {
+  const offset = key ? hashString(key) : 0;
+  return palettes[(index + offset) % palettes.length];
 };
 var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
+var toSmoothPath = (points) => {
+  if (points.length < 2) return "";
+  const p = points;
+  let d = `M ${p[0].x} ${p[0].y}`;
+  for (let i = 0; i < p.length - 1; i++) {
+    const p0 = p[Math.max(0, i - 1)];
+    const p1 = p[i];
+    const p2 = p[i + 1];
+    const p3 = p[Math.min(p.length - 1, i + 2)];
+    const cp1x = p1.x + (p2.x - p0.x) / 6;
+    const cp1y = p1.y + (p2.y - p0.y) / 6;
+    const cp2x = p2.x - (p3.x - p1.x) / 6;
+    const cp2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+  }
+  return d;
+};
+var useChartSize = (ref) => {
+  const [size, setSize] = import_react.default.useState({ width: 0, height: 0 });
+  import_react.default.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      setSize({ width: Math.floor(width), height: Math.floor(height) });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+};
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = import_react.default.useState({
     visible: false,
@@ -90,15 +130,15 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var LineChart = import_react.default.memo(({ data, labels, onHover, onMove, onLeave }) => {
+var LineChart = import_react.default.memo(({ data, labels, width, height, 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);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
-  const chartW = 600 - PADDING.left - PADDING.right;
-  const chartH = 300 - PADDING.top - PADDING.bottom;
+  const chartW = width - PADDING.left - PADDING.right;
+  const chartH = height - PADDING.top - PADDING.bottom;
   const seriesPoints = import_react.default.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
@@ -109,22 +149,22 @@ var LineChart = import_react.default.memo(({ data, labels, onHover, onMove, onLe
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
       const y = PADDING.top + (1 - ratio) * chartH;
       const val = Math.round(maxVal * ratio);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: 600 - PADDING.right, y2: y, className: "chart-grid" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
       ] }, ratio);
     }),
     labels.map((label, i) => {
       const x = PADDING.left + i / (count - 1 || 1) * chartW;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
-      const palette = getPalette(LINE_BAR_PALETTES, di);
-      const color = palette[4];
+      const palette = getPalette(LINE_BAR_PALETTES, di, key);
+      const color = palette[2];
       const points = seriesPoints[di];
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -155,7 +195,73 @@ var LineChart = import_react.default.memo(({ data, labels, onHover, onMove, onLe
   ] });
 });
 LineChart.displayName = "LineChart";
-var BarChart = import_react.default.memo(({ data, labels, onHover, onMove, onLeave }) => {
+var CurveChart = import_react.default.memo(({ data, labels, width, height, 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);
+    return Math.max(...allValues) * 1.2 || 1;
+  }, [entries]);
+  const count = labels.length;
+  const chartW = width - PADDING.left - PADDING.right;
+  const chartH = height - PADDING.top - PADDING.bottom;
+  const seriesPoints = import_react.default.useMemo(
+    () => entries.map(
+      ([, values]) => values.map((v, i) => ({
+        x: PADDING.left + i / (count - 1 || 1) * chartW,
+        y: PADDING.top + (1 - v / maxVal) * chartH,
+        v
+      }))
+    ),
+    [entries, count, chartW, chartH, maxVal]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
+    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+      const y = PADDING.top + (1 - ratio) * chartH;
+      const val = Math.round(maxVal * ratio);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+      ] }, ratio);
+    }),
+    labels.map((label, i) => {
+      const x = PADDING.left + i / (count - 1 || 1) * chartW;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+    }),
+    entries.map(([key], di) => {
+      const palette = getPalette(LINE_BAR_PALETTES, di, key);
+      const color = palette[2];
+      const areaColor = palette[0];
+      const points = seriesPoints[di];
+      const gradientId = `curve-gradient-${di}`;
+      const linePath = toSmoothPath(points);
+      const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" }),
+        points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: p.x,
+            cy: p.y,
+            r: "4",
+            fill: color,
+            className: "chart-point",
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${p.v}`),
+            onMouseMove: onMove,
+            onMouseLeave: onLeave
+          },
+          i
+        ))
+      ] }, di);
+    })
+  ] });
+});
+CurveChart.displayName = "CurveChart";
+var BarChart = import_react.default.memo(({ data, labels, width, height, 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);
@@ -163,8 +269,8 @@ var BarChart = import_react.default.memo(({ data, labels, onHover, onMove, onLea
   }, [entries]);
   const count = labels.length;
   const groupCount = entries.length;
-  const chartW = 600 - PADDING.left - PADDING.right;
-  const chartH = 300 - PADDING.top - PADDING.bottom;
+  const chartW = width - PADDING.left - PADDING.right;
+  const chartH = height - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
   const barW = Math.min(32, groupW * 0.7 / groupCount);
   const bars = import_react.default.useMemo(
@@ -178,19 +284,19 @@ var BarChart = import_react.default.memo(({ data, labels, onHover, onMove, onLea
     ),
     [entries, maxVal, chartH, groupW, barW, groupCount]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
       const y = PADDING.top + (1 - ratio) * chartH;
       const val = Math.round(maxVal * ratio);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: 600 - PADDING.right, y2: y, className: "chart-grid" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
       ] }, ratio);
     }),
-    labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
+    labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
     entries.map(([key], di) => {
-      const palette = getPalette(LINE_BAR_PALETTES, di);
-      const color = palette[4];
+      const palette = getPalette(LINE_BAR_PALETTES, di, key);
+      const color = palette[2];
       return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "rect",
         {
@@ -198,7 +304,7 @@ var BarChart = import_react.default.memo(({ data, labels, onHover, onMove, onLea
           y: b.y,
           width: b.w,
           height: b.h,
-          rx: "2",
+          rx: Math.min(4, b.w / 2),
           fill: color,
           className: "chart-bar",
           onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
@@ -212,14 +318,17 @@ var BarChart = import_react.default.memo(({ data, labels, onHover, onMove, onLea
 });
 BarChart.displayName = "BarChart";
 var PieDonutChart = import_react.default.memo(
-  ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
-    const values = import_react.default.useMemo(() => Object.entries(data).flatMap(([, v]) => v), [data]);
+  ({ data, labels, width, height, isDoughnut, onHover, onMove, onLeave }) => {
+    const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
+    const values = import_react.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
     const total = import_react.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
-    const cx = 150;
-    const cy = 150;
-    const r = 120;
-    const innerR = isDoughnut ? 60 : 0;
-    const palette = getPalette(PIE_PALETTES, 0);
+    const size = Math.min(width, height);
+    const cx = size / 2;
+    const cy = size / 2;
+    const r = size * 0.4;
+    const innerR = isDoughnut ? r * 0.5 : 0;
+    const firstKey = entries[0]?.[0] ?? "";
+    const colorOffset = hashString(firstKey);
     const sliceData = import_react.default.useMemo(() => {
       let angle0 = -Math.PI / 2;
       return values.map((v, i) => {
@@ -248,13 +357,13 @@ var PieDonutChart = import_react.default.memo(
         angle0 = endAngle;
         return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
       });
-    }, [values, total, innerR, labels]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 300 300", className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    }, [values, total, cx, cy, r, innerR, labels]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "path",
         {
           d: s.d,
-          fill: palette[i % palette.length],
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
           className: "chart-slice",
           onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
           onMouseMove: onMove,
@@ -266,22 +375,42 @@ var PieDonutChart = import_react.default.memo(
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
+var TooltipBubble = ({ x, y, containerWidth, children }) => {
+  const ref = import_react.default.useRef(null);
+  const [adjustedX, setAdjustedX] = import_react.default.useState(x);
+  import_react.default.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const half = w / 2;
+    const margin = 8;
+    let nx = x;
+    if (x - half < margin) nx = half + margin;
+    else if (x + half > containerWidth - margin) nx = containerWidth - half - margin;
+    setAdjustedX(nx);
+  }, [x, containerWidth]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: "chart-tooltip",
+      style: { left: adjustedX, top: y },
+      children
+    }
+  );
+};
 var Chart = (props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { width, height } = useChartSize(containerRef);
+  const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    type === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data, labels, onHover: show, onMove: move, onLeave: hide }),
-    type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data, labels, onHover: show, onMove: move, onLeave: hide }),
-    type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data, labels, onHover: show, onMove: move, onLeave: hide }),
-    type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data, labels, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: "chart-tooltip",
-        style: { left: tooltip.x, top: tooltip.y },
-        children: tooltip.content
-      }
-    )
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurveChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data, labels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
 };
 Chart.displayName = "Chart";

package/dist/components/Chart/index.css

@@ -1,13 +1,14 @@
 /* src/components/Chart/chart.scss */
 .lib-xplat-chart {
-  contain: content;
+  contain: layout style;
   width: 100%;
   height: 100%;
   position: relative;
 }
 .lib-xplat-chart .chart-svg {
+  display: block;
   width: 100%;
-  height: auto;
+  height: 100%;
 }
 .lib-xplat-chart .chart-grid {
   stroke: var(--semantic-border-subtle);
@@ -29,29 +30,44 @@
 }
 .lib-xplat-chart .chart-point {
   cursor: pointer;
-  transition: r 0.15s;
+  r: 0;
+  opacity: 0;
+  transition: r 0.15s, opacity 0.15s;
 }
 .lib-xplat-chart .chart-point:hover {
-  r: 6;
+  r: 5;
+  opacity: 1;
+}
+.lib-xplat-chart .chart-svg:hover .chart-point {
+  r: 3;
+  opacity: 0.6;
 }
 .lib-xplat-chart .chart-bar {
   cursor: pointer;
-  transition: opacity 0.15s;
+  transition: opacity 0.15s, filter 0.15s;
 }
 .lib-xplat-chart .chart-bar:hover {
-  opacity: 0.8;
+  opacity: 0.85;
+  filter: brightness(1.08);
 }
 .lib-xplat-chart .chart-slice {
   cursor: pointer;
-  transition: opacity 0.15s;
+  stroke: var(--semantic-surface-neutral-default);
+  stroke-width: 2;
+  transition:
+    opacity 0.15s,
+    filter 0.15s,
+    transform 0.15s;
+  transform-origin: center;
 }
 .lib-xplat-chart .chart-slice:hover {
-  opacity: 0.85;
+  opacity: 0.9;
+  filter: brightness(1.05) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
 }
 .lib-xplat-chart .chart-tooltip {
   position: absolute;
   transform: translate(-50%, -100%);
-  padding: var(--spacing-space-2) var(--spacing-space-2);
+  padding: var(--spacing-space-2) var(--spacing-space-3);
   background-color: var(--semantic-surface-neutral-strong);
   color: var(--semantic-text-inverse);
   font-size: 12px;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface ChartProps {
-    type: "line" | "bar" | "pie" | "doughnut";
+    type: "line" | "curve" | "bar" | "pie" | "doughnut";
     data: Record<string, number[]>;
     labels: string[];
     tooltip?: boolean;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface ChartProps {
-    type: "line" | "bar" | "pie" | "doughnut";
+    type: "line" | "curve" | "bar" | "pie" | "doughnut";
     data: Record<string, number[]>;
     labels: string[];
     tooltip?: boolean;