@x-plat/design-system 0.5.18 → 0.5.20

package/dist/components/index.js

@@ -2109,6 +2109,37 @@ var useChartSize = (ref) => {
   }, [ref]);
   return size;
 };
+var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var useChartAnimation = (containerRef, dataKey) => {
+  const [animate, setAnimate] = React5.useState(false);
+  const prevDataKey = React5.useRef(dataKey);
+  const hasAnimated = React5.useRef(false);
+  React5.useEffect(() => {
+    if (prefersReducedMotion()) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !hasAnimated.current) {
+          hasAnimated.current = true;
+          setAnimate(true);
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [containerRef]);
+  React5.useEffect(() => {
+    if (dataKey !== prevDataKey.current) {
+      prevDataKey.current = dataKey;
+      if (prefersReducedMotion()) return;
+      setAnimate(false);
+      requestAnimationFrame(() => setAnimate(true));
+    }
+  }, [dataKey]);
+  return animate || prefersReducedMotion();
+};
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = React5.useState({
     visible: false,
@@ -2174,7 +2205,7 @@ var AxisLabels = React5.memo(({ labels, count, chartW, height }) => {
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
-var LineChart = React5.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
+var LineChart = React5.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React5.useMemo(() => Object.entries(data), [data]);
   const maxVal = React5.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2194,18 +2225,52 @@ var LineChart = React5.memo(({ data, labels, width, height, onHover, onMove, onL
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
+  const lineRefs = React5.useRef([]);
+  React5.useEffect(() => {
+    if (!animate) return;
+    lineRefs.current.forEach((el) => {
+      if (!el) return;
+      const len = el.getTotalLength();
+      el.style.strokeDasharray = `${len}`;
+      el.style.strokeDashoffset = `${len}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
+        el.style.strokeDashoffset = "0";
+      });
+    });
+  }, [animate, seriesPoints]);
   return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
     /* @__PURE__ */ jsx305(AxisLabels, { labels, count, chartW, height }),
     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 = `line-gradient-${di}`;
+      const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
+      const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
       return /* @__PURE__ */ jsxs196("g", { children: [
+        /* @__PURE__ */ jsx305("defs", { children: /* @__PURE__ */ jsxs196("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx305("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+          /* @__PURE__ */ jsx305("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ jsx305(
+          "path",
+          {
+            d: areaD,
+            fill: `url(#${gradientId})`,
+            className: "chart-area",
+            style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
+          }
+        ),
         /* @__PURE__ */ jsx305(
           "polyline",
           {
-            points: points.map((p) => `${p.x},${p.y}`).join(" "),
+            ref: (el) => {
+              lineRefs.current[di] = el;
+            },
+            points: polyPoints,
             fill: "none",
             stroke: color,
             strokeWidth: "2"
@@ -2230,7 +2295,7 @@ var LineChart = React5.memo(({ data, labels, width, height, onHover, onMove, onL
   ] });
 });
 LineChart.displayName = "LineChart";
-var CurveChart = React5.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
+var CurveChart = React5.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React5.useMemo(() => Object.entries(data), [data]);
   const maxVal = React5.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2250,6 +2315,20 @@ var CurveChart = React5.memo(({ data, labels, width, height, onHover, onMove, on
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
+  const lineRefs = React5.useRef([]);
+  React5.useEffect(() => {
+    if (!animate) return;
+    lineRefs.current.forEach((el) => {
+      if (!el) return;
+      const len = el.getTotalLength();
+      el.style.strokeDasharray = `${len}`;
+      el.style.strokeDashoffset = `${len}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
+        el.style.strokeDashoffset = "0";
+      });
+    });
+  }, [animate, seriesPoints]);
   return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ jsx305(GridLines, { width, height, chartH, maxVal }),
     /* @__PURE__ */ jsx305(AxisLabels, { labels, count, chartW, height }),
@@ -2266,8 +2345,27 @@ var CurveChart = React5.memo(({ data, labels, width, height, onHover, onMove, on
           /* @__PURE__ */ jsx305("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
           /* @__PURE__ */ jsx305("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
         ] }) }),
-        /* @__PURE__ */ jsx305("path", { d: areaPath, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ jsx305("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" }),
+        /* @__PURE__ */ jsx305(
+          "path",
+          {
+            d: areaPath,
+            fill: `url(#${gradientId})`,
+            className: "chart-area",
+            style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsx305(
+          "path",
+          {
+            ref: (el) => {
+              lineRefs.current[di] = el;
+            },
+            d: linePath,
+            fill: "none",
+            stroke: color,
+            strokeWidth: "2"
+          }
+        ),
         showPoints && points.map((p, i) => /* @__PURE__ */ jsx305(
           "circle",
           {
@@ -2287,7 +2385,7 @@ var CurveChart = React5.memo(({ data, labels, width, height, onHover, onMove, on
   ] });
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = React5.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
+var BarChart = React5.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React5.useMemo(() => Object.entries(data), [data]);
   const maxVal = React5.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -2300,6 +2398,7 @@ var BarChart = React5.memo(({ data, labels, width, height, onHover, onMove, onLe
   const groupW = chartW / count;
   const barGap = groupCount > 1 ? 2 : 0;
   const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
+  const baseline = PADDING.top + chartH;
   const bars = React5.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
@@ -2325,12 +2424,17 @@ var BarChart = React5.memo(({ data, labels, width, height, onHover, onMove, onLe
       return bars[di].map((b, i) => {
         const r2 = Math.min(4, b.w / 2);
         const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
+        const delay = 100 + i * 80;
         return /* @__PURE__ */ jsx305(
           "path",
           {
             d,
             fill: color,
-            className: "chart-bar",
+            className: `chart-bar ${animate ? "chart-bar-animate" : ""}`,
+            style: animate ? {
+              transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
+              animationDelay: `${delay}ms`
+            } : void 0,
             onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
             onMouseMove: onMove,
             onMouseLeave: onLeave
@@ -2343,7 +2447,7 @@ var BarChart = React5.memo(({ data, labels, width, height, onHover, onMove, onLe
 });
 BarChart.displayName = "BarChart";
 var PieDonutChart = React5.memo(
-  ({ data, labels, width, height, isDoughnut, onHover, onMove, onLeave }) => {
+  ({ data, labels, width, height, animate, isDoughnut, onHover, onMove, onLeave }) => {
     const entries = React5.useMemo(() => Object.entries(data), [data]);
     const values = React5.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
     const total = React5.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
@@ -2383,20 +2487,34 @@ var PieDonutChart = React5.memo(
         return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
-    return /* @__PURE__ */ jsx305("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ jsxs196("g", { children: [
-      /* @__PURE__ */ jsx305(
-        "path",
-        {
-          d: s.d,
-          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
-        }
-      ),
-      s.angle > 0.2 && /* @__PURE__ */ jsx305("text", { x: s.lx, y: s.ly, className: "chart-pie-label", textAnchor: "middle", dominantBaseline: "central", children: s.v })
-    ] }, i)) });
+    return /* @__PURE__ */ jsx305("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
+      const delay = i * 100;
+      return /* @__PURE__ */ jsxs196("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
+        /* @__PURE__ */ jsx305(
+          "path",
+          {
+            d: s.d,
+            fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
+            className: "chart-slice",
+            onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
+            onMouseMove: onMove,
+            onMouseLeave: onLeave
+          }
+        ),
+        s.angle > 0.2 && /* @__PURE__ */ jsx305(
+          "text",
+          {
+            x: s.lx,
+            y: s.ly,
+            className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
+            style: animate ? { animationDelay: `${delay + 150}ms` } : void 0,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            children: s.v
+          }
+        )
+      ] }, i);
+    }) });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
@@ -2430,13 +2548,15 @@ var Chart = React5.memo((props) => {
   const { width, height } = useChartSize(containerRef);
   const stableData = React5.useMemo(() => data, [JSON.stringify(data)]);
   const stableLabels = React5.useMemo(() => labels, [JSON.stringify(labels)]);
+  const dataKey = React5.useMemo(() => JSON.stringify(labels), [labels]);
+  const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs196("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx305(LineChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx305(CurveChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx305(BarChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ jsx305(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx305(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx305(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     tooltip.visible && /* @__PURE__ */ jsx305(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
 });
@@ -3333,6 +3453,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   React17.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
+    const raf = requestAnimationFrame(calculatePosition);
+    return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
   React17.useEffect(() => {
     if (!enabled) return;
@@ -4149,12 +4271,20 @@ var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 import { jsx as jsx333 } from "react/jsx-runtime";
-var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
+var SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ jsx333(
     "div",

package/dist/index.cjs

@@ -6608,6 +6608,37 @@ var useChartSize = (ref) => {
   }, [ref]);
   return size;
 };
+var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var useChartAnimation = (containerRef, dataKey) => {
+  const [animate, setAnimate] = import_react5.default.useState(false);
+  const prevDataKey = import_react5.default.useRef(dataKey);
+  const hasAnimated = import_react5.default.useRef(false);
+  import_react5.default.useEffect(() => {
+    if (prefersReducedMotion()) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !hasAnimated.current) {
+          hasAnimated.current = true;
+          setAnimate(true);
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [containerRef]);
+  import_react5.default.useEffect(() => {
+    if (dataKey !== prevDataKey.current) {
+      prevDataKey.current = dataKey;
+      if (prefersReducedMotion()) return;
+      setAnimate(false);
+      requestAnimationFrame(() => setAnimate(true));
+    }
+  }, [dataKey]);
+  return animate || prefersReducedMotion();
+};
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = import_react5.default.useState({
     visible: false,
@@ -6673,7 +6704,7 @@ var AxisLabels = import_react5.default.memo(({ labels, count, chartW, height })
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
-var LineChart = import_react5.default.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
+var LineChart = import_react5.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react5.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -6693,18 +6724,52 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, onHov
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
+  const lineRefs = import_react5.default.useRef([]);
+  import_react5.default.useEffect(() => {
+    if (!animate) return;
+    lineRefs.current.forEach((el) => {
+      if (!el) return;
+      const len = el.getTotalLength();
+      el.style.strokeDasharray = `${len}`;
+      el.style.strokeDashoffset = `${len}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
+        el.style.strokeDashoffset = "0";
+      });
+    });
+  }, [animate, seriesPoints]);
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
     /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(AxisLabels, { labels, count, chartW, height }),
     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 = `line-gradient-${di}`;
+      const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
+      const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
       return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          "path",
+          {
+            d: areaD,
+            fill: `url(#${gradientId})`,
+            className: "chart-area",
+            style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "polyline",
           {
-            points: points.map((p) => `${p.x},${p.y}`).join(" "),
+            ref: (el) => {
+              lineRefs.current[di] = el;
+            },
+            points: polyPoints,
             fill: "none",
             stroke: color,
             strokeWidth: "2"
@@ -6729,7 +6794,7 @@ var LineChart = import_react5.default.memo(({ data, labels, width, height, onHov
   ] });
 });
 LineChart.displayName = "LineChart";
-var CurveChart = import_react5.default.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
+var CurveChart = import_react5.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react5.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -6749,6 +6814,20 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, onHo
     [entries, count, chartW, chartH, maxVal]
   );
   const showPoints = count <= 100;
+  const lineRefs = import_react5.default.useRef([]);
+  import_react5.default.useEffect(() => {
+    if (!animate) return;
+    lineRefs.current.forEach((el) => {
+      if (!el) return;
+      const len = el.getTotalLength();
+      el.style.strokeDasharray = `${len}`;
+      el.style.strokeDashoffset = `${len}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
+        el.style.strokeDashoffset = "0";
+      });
+    });
+  }, [animate, seriesPoints]);
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(GridLines, { width, height, chartH, maxVal }),
     /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(AxisLabels, { labels, count, chartW, height }),
@@ -6765,8 +6844,27 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, onHo
           /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
           /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          "path",
+          {
+            d: areaPath,
+            fill: `url(#${gradientId})`,
+            className: "chart-area",
+            style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          "path",
+          {
+            ref: (el) => {
+              lineRefs.current[di] = el;
+            },
+            d: linePath,
+            fill: "none",
+            stroke: color,
+            strokeWidth: "2"
+          }
+        ),
         showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "circle",
           {
@@ -6786,7 +6884,7 @@ var CurveChart = import_react5.default.memo(({ data, labels, width, height, onHo
   ] });
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = import_react5.default.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
+var BarChart = import_react5.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react5.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -6799,6 +6897,7 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, onHove
   const groupW = chartW / count;
   const barGap = groupCount > 1 ? 2 : 0;
   const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
+  const baseline = PADDING.top + chartH;
   const bars = import_react5.default.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
@@ -6824,12 +6923,17 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, onHove
       return bars[di].map((b, i) => {
         const r2 = Math.min(4, b.w / 2);
         const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
+        const delay = 100 + i * 80;
         return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
           "path",
           {
             d,
             fill: color,
-            className: "chart-bar",
+            className: `chart-bar ${animate ? "chart-bar-animate" : ""}`,
+            style: animate ? {
+              transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
+              animationDelay: `${delay}ms`
+            } : void 0,
             onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
             onMouseMove: onMove,
             onMouseLeave: onLeave
@@ -6842,7 +6946,7 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, onHove
 });
 BarChart.displayName = "BarChart";
 var PieDonutChart = import_react5.default.memo(
-  ({ data, labels, width, height, isDoughnut, onHover, onMove, onLeave }) => {
+  ({ data, labels, width, height, animate, isDoughnut, onHover, onMove, onLeave }) => {
     const entries = import_react5.default.useMemo(() => Object.entries(data), [data]);
     const values = import_react5.default.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
     const total = import_react5.default.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
@@ -6882,20 +6986,34 @@ var PieDonutChart = import_react5.default.memo(
         return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
       });
     }, [values, total, cx, cy, r2, innerR, labels]);
-    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
-        "path",
-        {
-          d: s.d,
-          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
-        }
-      ),
-      s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("text", { x: s.lx, y: s.ly, className: "chart-pie-label", textAnchor: "middle", dominantBaseline: "central", children: s.v })
-    ] }, i)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
+      const delay = i * 100;
+      return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          "path",
+          {
+            d: s.d,
+            fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
+            className: "chart-slice",
+            onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
+            onMouseMove: onMove,
+            onMouseLeave: onLeave
+          }
+        ),
+        s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          "text",
+          {
+            x: s.lx,
+            y: s.ly,
+            className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
+            style: animate ? { animationDelay: `${delay + 150}ms` } : void 0,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            children: s.v
+          }
+        )
+      ] }, i);
+    }) });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
@@ -6929,13 +7047,15 @@ var Chart = import_react5.default.memo((props) => {
   const { width, height } = useChartSize(containerRef);
   const stableData = import_react5.default.useMemo(() => data, [JSON.stringify(data)]);
   const stableLabels = import_react5.default.useMemo(() => labels, [JSON.stringify(labels)]);
+  const dataKey = import_react5.default.useMemo(() => JSON.stringify(labels), [labels]);
+  const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
 });
@@ -7845,6 +7965,8 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   import_react18.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
+    const raf = requestAnimationFrame(calculatePosition);
+    return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
   import_react18.default.useEffect(() => {
     if (!enabled) return;
@@ -8661,12 +8783,20 @@ var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime333 = require("react/jsx-runtime");
-var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
+var SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",
@@ -9809,9 +9939,18 @@ var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime348 = require("react/jsx-runtime");
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
@@ -9819,9 +9958,18 @@ var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 var import_jsx_runtime349 = require("react/jsx-runtime");
+var GAP_MAP2 = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";