@x-plat/design-system 0.5.2 → 0.5.4

package/dist/components/Chart/index.cjs

@@ -90,14 +90,28 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var LineChart = ({ data, labels, onHover, onMove, onLeave }) => {
-  const entries = Object.entries(data);
-  const allValues = entries.flatMap(([, v]) => v);
-  const maxVal = Math.max(...allValues) * 1.2 || 1;
+var LineChart = import_react.default.memo(({ data, labels, 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 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 600 300", className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * (300 - PADDING.top - PADDING.bottom);
+      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" }),
@@ -105,17 +119,13 @@ var LineChart = ({ data, labels, onHover, onMove, onLeave }) => {
       ] }, ratio);
     }),
     labels.map((label, i) => {
-      const x = PADDING.left + i / (count - 1 || 1) * (600 - PADDING.left - PADDING.right);
+      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);
     }),
-    entries.map(([key, values], di) => {
+    entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di);
       const color = palette[4];
-      const points = values.map((v, i) => {
-        const x = PADDING.left + i / (count - 1 || 1) * (600 - PADDING.left - PADDING.right);
-        const y = PADDING.top + (1 - v / maxVal) * (300 - PADDING.top - PADDING.bottom);
-        return { x, y, v };
-      });
+      const points = seriesPoints[di];
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "polyline",
@@ -143,17 +153,31 @@ var LineChart = ({ data, labels, onHover, onMove, onLeave }) => {
       ] }, di);
     })
   ] });
-};
-var BarChart = ({ data, labels, onHover, onMove, onLeave }) => {
-  const entries = Object.entries(data);
-  const allValues = entries.flatMap(([, v]) => v);
-  const maxVal = Math.max(...allValues) * 1.2 || 1;
+});
+LineChart.displayName = "LineChart";
+var BarChart = import_react.default.memo(({ data, labels, 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 groupCount = entries.length;
   const chartW = 600 - PADDING.left - PADDING.right;
   const chartH = 300 - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
   const barW = Math.min(32, groupW * 0.7 / groupCount);
+  const bars = import_react.default.useMemo(
+    () => entries.map(
+      ([, values], di) => values.map((v, i) => {
+        const h = v / maxVal * chartH;
+        const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
+        const y = PADDING.top + chartH - h;
+        return { x, y, w: barW, h, v };
+      })
+    ),
+    [entries, maxVal, chartH, groupW, barW, groupCount]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
       const y = PADDING.top + (1 - ratio) * chartH;
@@ -164,85 +188,84 @@ var BarChart = ({ data, labels, onHover, onMove, onLeave }) => {
       ] }, 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)),
-    entries.map(([key, values], di) => {
+    entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di);
       const color = palette[4];
-      return values.map((v, i) => {
-        const h = v / maxVal * chartH;
-        const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
-        const y = PADDING.top + chartH - h;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "rect",
-          {
-            x,
-            y,
-            width: barW,
-            height: h,
-            rx: "2",
-            fill: color,
-            className: "chart-bar",
-            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${v}`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          },
-          `${di}-${i}`
-        );
-      });
+      return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "rect",
+        {
+          x: b.x,
+          y: b.y,
+          width: b.w,
+          height: b.h,
+          rx: "2",
+          fill: color,
+          className: "chart-bar",
+          onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        },
+        `${di}-${i}`
+      ));
     })
   ] });
-};
-var PieDonutChart = ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
-  const entries = Object.entries(data);
-  const values = entries.flatMap(([, v]) => v);
-  const total = values.reduce((a, b) => a + b, 0) || 1;
-  const cx = 150;
-  const cy = 150;
-  const r = 120;
-  const innerR = isDoughnut ? 60 : 0;
-  const palette = getPalette(PIE_PALETTES, 0);
-  let startAngle = -Math.PI / 2;
-  const slices = values.map((v, i) => {
-    const angle = v / total * Math.PI * 2;
-    const endAngle = startAngle + angle;
-    const largeArc = angle > Math.PI ? 1 : 0;
-    const x1 = cx + r * Math.cos(startAngle);
-    const y1 = cy + r * Math.sin(startAngle);
-    const x2 = cx + r * Math.cos(endAngle);
-    const y2 = cy + r * Math.sin(endAngle);
-    let d;
-    if (innerR > 0) {
-      const ix1 = cx + innerR * Math.cos(startAngle);
-      const iy1 = cy + innerR * Math.sin(startAngle);
-      const ix2 = cx + innerR * Math.cos(endAngle);
-      const iy2 = cy + innerR * Math.sin(endAngle);
-      d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerR} ${innerR} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
-    } else {
-      d = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;
-    }
-    const midAngle = startAngle + angle / 2;
-    const labelR = innerR > 0 ? (r + innerR) / 2 : r * 0.6;
-    const lx = cx + labelR * Math.cos(midAngle);
-    const ly = cy + labelR * Math.sin(midAngle);
-    const pct = Math.round(v / total * 100);
-    const label = labels[i] || `${i + 1}`;
-    startAngle = endAngle;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+});
+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]);
+    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 sliceData = import_react.default.useMemo(() => {
+      let angle0 = -Math.PI / 2;
+      return values.map((v, i) => {
+        const angle = v / total * Math.PI * 2;
+        const endAngle = angle0 + angle;
+        const largeArc = angle > Math.PI ? 1 : 0;
+        const x1 = cx + r * Math.cos(angle0);
+        const y1 = cy + r * Math.sin(angle0);
+        const x2 = cx + r * Math.cos(endAngle);
+        const y2 = cy + r * Math.sin(endAngle);
+        let d;
+        if (innerR > 0) {
+          const ix1 = cx + innerR * Math.cos(angle0);
+          const iy1 = cy + innerR * Math.sin(angle0);
+          const ix2 = cx + innerR * Math.cos(endAngle);
+          const iy2 = cy + innerR * Math.sin(endAngle);
+          d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerR} ${innerR} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
+        } else {
+          d = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+        }
+        const midAngle = angle0 + angle / 2;
+        const labelR = innerR > 0 ? (r + innerR) / 2 : r * 0.6;
+        const lx = cx + labelR * Math.cos(midAngle);
+        const ly = cy + labelR * Math.sin(midAngle);
+        const pct = Math.round(v / total * 100);
+        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: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "path",
         {
-          d,
+          d: s.d,
           fill: palette[i % palette.length],
           className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${label}: ${v} (${pct}%)`),
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
           onMouseMove: onMove,
           onMouseLeave: onLeave
         }
       ),
-      angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: lx, y: ly, className: "chart-pie-label", textAnchor: "middle", dominantBaseline: "central", children: v })
-    ] }, i);
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 300 300", className: "chart-svg chart-pie", children: slices });
-};
+      s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: s.lx, y: s.ly, className: "chart-pie-label", textAnchor: "middle", dominantBaseline: "central", children: s.v })
+    ] }, i)) });
+  }
+);
+PieDonutChart.displayName = "PieDonutChart";
 var Chart = (props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);

package/dist/components/Chart/index.css

@@ -1,6 +1,8 @@
 /* src/components/Chart/chart.scss */
 .lib-xplat-chart {
+  contain: content;
   width: 100%;
+  height: 100%;
   position: relative;
 }
 .lib-xplat-chart .chart-svg {

package/dist/components/Chart/index.js

@@ -54,14 +54,28 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var LineChart = ({ data, labels, onHover, onMove, onLeave }) => {
-  const entries = Object.entries(data);
-  const allValues = entries.flatMap(([, v]) => v);
-  const maxVal = Math.max(...allValues) * 1.2 || 1;
+var LineChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
+  const entries = React.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React.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 seriesPoints = React.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__ */ jsxs("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * (300 - PADDING.top - PADDING.bottom);
+      const y = PADDING.top + (1 - ratio) * chartH;
       const val = Math.round(maxVal * ratio);
       return /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx("line", { x1: PADDING.left, y1: y, x2: 600 - PADDING.right, y2: y, className: "chart-grid" }),
@@ -69,17 +83,13 @@ var LineChart = ({ data, labels, onHover, onMove, onLeave }) => {
       ] }, ratio);
     }),
     labels.map((label, i) => {
-      const x = PADDING.left + i / (count - 1 || 1) * (600 - PADDING.left - PADDING.right);
+      const x = PADDING.left + i / (count - 1 || 1) * chartW;
       return /* @__PURE__ */ jsx("text", { x, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
-    entries.map(([key, values], di) => {
+    entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di);
       const color = palette[4];
-      const points = values.map((v, i) => {
-        const x = PADDING.left + i / (count - 1 || 1) * (600 - PADDING.left - PADDING.right);
-        const y = PADDING.top + (1 - v / maxVal) * (300 - PADDING.top - PADDING.bottom);
-        return { x, y, v };
-      });
+      const points = seriesPoints[di];
       return /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx(
           "polyline",
@@ -107,17 +117,31 @@ var LineChart = ({ data, labels, onHover, onMove, onLeave }) => {
       ] }, di);
     })
   ] });
-};
-var BarChart = ({ data, labels, onHover, onMove, onLeave }) => {
-  const entries = Object.entries(data);
-  const allValues = entries.flatMap(([, v]) => v);
-  const maxVal = Math.max(...allValues) * 1.2 || 1;
+});
+LineChart.displayName = "LineChart";
+var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
+  const entries = React.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React.useMemo(() => {
+    const allValues = entries.flatMap(([, v]) => v);
+    return Math.max(...allValues) * 1.2 || 1;
+  }, [entries]);
   const count = labels.length;
   const groupCount = entries.length;
   const chartW = 600 - PADDING.left - PADDING.right;
   const chartH = 300 - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
   const barW = Math.min(32, groupW * 0.7 / groupCount);
+  const bars = React.useMemo(
+    () => entries.map(
+      ([, values], di) => values.map((v, i) => {
+        const h = v / maxVal * chartH;
+        const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
+        const y = PADDING.top + chartH - h;
+        return { x, y, w: barW, h, v };
+      })
+    ),
+    [entries, maxVal, chartH, groupW, barW, groupCount]
+  );
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
     [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
       const y = PADDING.top + (1 - ratio) * chartH;
@@ -128,85 +152,84 @@ var BarChart = ({ data, labels, onHover, onMove, onLeave }) => {
       ] }, ratio);
     }),
     labels.map((label, i) => /* @__PURE__ */ jsx("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
-    entries.map(([key, values], di) => {
+    entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di);
       const color = palette[4];
-      return values.map((v, i) => {
-        const h = v / maxVal * chartH;
-        const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
-        const y = PADDING.top + chartH - h;
-        return /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x,
-            y,
-            width: barW,
-            height: h,
-            rx: "2",
-            fill: color,
-            className: "chart-bar",
-            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${v}`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          },
-          `${di}-${i}`
-        );
-      });
+      return bars[di].map((b, i) => /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: b.x,
+          y: b.y,
+          width: b.w,
+          height: b.h,
+          rx: "2",
+          fill: color,
+          className: "chart-bar",
+          onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        },
+        `${di}-${i}`
+      ));
     })
   ] });
-};
-var PieDonutChart = ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
-  const entries = Object.entries(data);
-  const values = entries.flatMap(([, v]) => v);
-  const total = values.reduce((a, b) => a + b, 0) || 1;
-  const cx = 150;
-  const cy = 150;
-  const r = 120;
-  const innerR = isDoughnut ? 60 : 0;
-  const palette = getPalette(PIE_PALETTES, 0);
-  let startAngle = -Math.PI / 2;
-  const slices = values.map((v, i) => {
-    const angle = v / total * Math.PI * 2;
-    const endAngle = startAngle + angle;
-    const largeArc = angle > Math.PI ? 1 : 0;
-    const x1 = cx + r * Math.cos(startAngle);
-    const y1 = cy + r * Math.sin(startAngle);
-    const x2 = cx + r * Math.cos(endAngle);
-    const y2 = cy + r * Math.sin(endAngle);
-    let d;
-    if (innerR > 0) {
-      const ix1 = cx + innerR * Math.cos(startAngle);
-      const iy1 = cy + innerR * Math.sin(startAngle);
-      const ix2 = cx + innerR * Math.cos(endAngle);
-      const iy2 = cy + innerR * Math.sin(endAngle);
-      d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerR} ${innerR} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
-    } else {
-      d = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;
-    }
-    const midAngle = startAngle + angle / 2;
-    const labelR = innerR > 0 ? (r + innerR) / 2 : r * 0.6;
-    const lx = cx + labelR * Math.cos(midAngle);
-    const ly = cy + labelR * Math.sin(midAngle);
-    const pct = Math.round(v / total * 100);
-    const label = labels[i] || `${i + 1}`;
-    startAngle = endAngle;
-    return /* @__PURE__ */ jsxs("g", { children: [
+});
+BarChart.displayName = "BarChart";
+var PieDonutChart = React.memo(
+  ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
+    const values = React.useMemo(() => Object.entries(data).flatMap(([, v]) => v), [data]);
+    const total = React.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 sliceData = React.useMemo(() => {
+      let angle0 = -Math.PI / 2;
+      return values.map((v, i) => {
+        const angle = v / total * Math.PI * 2;
+        const endAngle = angle0 + angle;
+        const largeArc = angle > Math.PI ? 1 : 0;
+        const x1 = cx + r * Math.cos(angle0);
+        const y1 = cy + r * Math.sin(angle0);
+        const x2 = cx + r * Math.cos(endAngle);
+        const y2 = cy + r * Math.sin(endAngle);
+        let d;
+        if (innerR > 0) {
+          const ix1 = cx + innerR * Math.cos(angle0);
+          const iy1 = cy + innerR * Math.sin(angle0);
+          const ix2 = cx + innerR * Math.cos(endAngle);
+          const iy2 = cy + innerR * Math.sin(endAngle);
+          d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerR} ${innerR} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
+        } else {
+          d = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+        }
+        const midAngle = angle0 + angle / 2;
+        const labelR = innerR > 0 ? (r + innerR) / 2 : r * 0.6;
+        const lx = cx + labelR * Math.cos(midAngle);
+        const ly = cy + labelR * Math.sin(midAngle);
+        const pct = Math.round(v / total * 100);
+        angle0 = endAngle;
+        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
+      });
+    }, [values, total, innerR, labels]);
+    return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 300 300", className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "path",
         {
-          d,
+          d: s.d,
           fill: palette[i % palette.length],
           className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${label}: ${v} (${pct}%)`),
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
           onMouseMove: onMove,
           onMouseLeave: onLeave
         }
       ),
-      angle > 0.2 && /* @__PURE__ */ jsx("text", { x: lx, y: ly, className: "chart-pie-label", textAnchor: "middle", dominantBaseline: "central", children: v })
-    ] }, i);
-  });
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 300 300", className: "chart-svg chart-pie", children: slices });
-};
+      s.angle > 0.2 && /* @__PURE__ */ jsx("text", { x: s.lx, y: s.ly, className: "chart-pie-label", textAnchor: "middle", dominantBaseline: "central", children: s.v })
+    ] }, i)) });
+  }
+);
+PieDonutChart.displayName = "PieDonutChart";
 var Chart = (props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);

package/dist/components/DatePicker/index.cjs

@@ -1740,6 +1740,35 @@ var Modal_default = Modal;
 // src/components/DatePicker/RangePicker/index.tsx
 var import_react9 = __toESM(require("react"), 1);
 var import_jsx_runtime302 = require("react/jsx-runtime");
+var RangeDayCell = import_react9.default.memo(
+  ({
+    day,
+    disabled,
+    isStart,
+    isEnd,
+    inRange,
+    onClick
+  }) => /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+    "button",
+    {
+      type: "button",
+      className: clsx_default(
+        "datepicker-day",
+        !day.isCurrentMonth && "outside",
+        disabled && "disabled",
+        (isStart || isEnd) && "selected",
+        inRange && !isStart && !isEnd && "in-range",
+        day.isToday && "today",
+        day.isSunday && "sunday",
+        day.isSaturday && "saturday"
+      ),
+      disabled: disabled || !day.isCurrentMonth,
+      onClick,
+      children: day.day
+    }
+  )
+);
+RangeDayCell.displayName = "RangeDayCell";
 var RangePicker = (props) => {
   const {
     startDate,
@@ -1816,20 +1845,13 @@ var RangePicker = (props) => {
         const isEnd = isSameDay(day.date, endDate);
         const inRange = isInRange(day.date, startDate, endDate);
         return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
-          "button",
+          RangeDayCell,
           {
-            type: "button",
-            className: clsx_default(
-              "datepicker-day",
-              !day.isCurrentMonth && "outside",
-              disabled && "disabled",
-              (isStart || isEnd) && "selected",
-              inRange && !isStart && !isEnd && "in-range",
-              day.isToday && "today",
-              day.isSunday && "sunday",
-              day.isSaturday && "saturday"
-            ),
-            disabled: disabled || !day.isCurrentMonth,
+            day,
+            disabled,
+            isStart,
+            isEnd,
+            inRange,
             onClick: () => {
               if (!disabled && day.isCurrentMonth) {
                 if (type === "start") {
@@ -1840,8 +1862,7 @@ var RangePicker = (props) => {
                   onChange?.({ startDate, endDate: newEnd });
                 }
               }
-            },
-            children: day.day
+            }
           },
           idx
         );

package/dist/components/DatePicker/index.css

@@ -97,6 +97,7 @@
 
 /* src/components/DatePicker/datepicker.scss */
 .lib-xplat-datepicker {
+  contain: content;
   user-select: none;
   min-width: 200px;
   width: 100%;
@@ -346,6 +347,7 @@
 
 /* src/components/Button/button.scss */
 .lib-xplat-button {
+  width: 100%;
   border-radius: var(--spacing-radius-md);
   font-weight: 500;
   cursor: pointer;