@underverse-ui/underverse 1.0.15 → 1.0.16

package/dist/index.cjs

@@ -17388,6 +17388,7 @@ function LineChart({
   className = ""
 }) {
   const svgRef = (0, import_react25.useRef)(null);
+  const clipId = (0, import_react25.useRef)(`line-clip-${Math.random().toString(36).slice(2, 8)}`).current;
   const padding = { top: 20, right: 20, bottom: 40, left: 40 };
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
@@ -17448,42 +17449,45 @@ function LineChart({
   }, [minValue, maxValue, chartHeight, padding.top]);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("rect", { x: padding.left, y: padding.top, width: chartWidth, height: chartHeight }) }) }),
       showGrid && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", fill: "currentColor", className: "text-muted-foreground", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
       ] }, i)) }),
-      processedSeries.map(
-        (s, si) => s.fillColor && s.areaPath && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { clipPath: `url(#${clipId})`, children: [
+        processedSeries.map(
+          (s, si) => s.fillColor && s.areaPath && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            "path",
+            {
+              d: s.areaPath,
+              fill: s.fillColor,
+              className: "transition-opacity duration-300",
+              opacity: hiddenSeries.has(s.name) ? 0 : 0.15,
+              style: animated ? { opacity: 0, animation: `fadeIn 0.6s ease-out ${si * 0.1}s forwards` } : void 0
+            },
+            `area-${si}`
+          )
+        ),
+        processedSeries.map((s, si) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "path",
           {
-            d: s.areaPath,
-            fill: s.fillColor,
+            d: s.linePath,
+            fill: "none",
+            stroke: s.color,
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
             className: "transition-opacity duration-300",
-            opacity: hiddenSeries.has(s.name) ? 0 : 0.15,
-            style: animated ? { opacity: 0, animation: `fadeIn 0.6s ease-out ${si * 0.1}s forwards` } : void 0
+            opacity: hiddenSeries.has(s.name) ? 0 : 1,
+            style: animated ? {
+              strokeDasharray: s.lineLength,
+              strokeDashoffset: s.lineLength,
+              animation: `drawLine 1s ease-out ${si * 0.15}s forwards`
+            } : void 0
           },
-          `area-${si}`
-        )
-      ),
-      processedSeries.map((s, si) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        "path",
-        {
-          d: s.linePath,
-          fill: "none",
-          stroke: s.color,
-          strokeWidth: 2,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          className: "transition-opacity duration-300",
-          opacity: hiddenSeries.has(s.name) ? 0 : 1,
-          style: animated ? {
-            strokeDasharray: s.lineLength,
-            strokeDashoffset: s.lineLength,
-            animation: `drawLine 1s ease-out ${si * 0.15}s forwards`
-          } : void 0
-        },
-        `line-${si}`
-      )),
+          `line-${si}`
+        ))
+      ] }),
       showDots && processedSeries.map(
         (s, si) => !hiddenSeries.has(s.name) && s.points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
           "g",
@@ -18063,6 +18067,7 @@ function AreaChart({
   className = ""
 }) {
   const containerRef = (0, import_react28.useRef)(null);
+  const clipId = (0, import_react28.useRef)(`area-clip-${Math.random().toString(36).slice(2, 8)}`).current;
   const padding = { top: 20, right: 20, bottom: 40, left: 50 };
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
@@ -18146,11 +18151,12 @@ function AreaChart({
   }, [series, chartWidth, chartHeight, padding, stacked, curved]);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ref: containerRef, className: `relative flex flex-col gap-4 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { width, height, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("rect", { x: padding.left, y: padding.top, width: chartWidth, height: chartHeight }) }) }),
       showGrid && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
       ] }, i)) }),
-      [...processedSeries].reverse().map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { clipPath: `url(#${clipId})`, children: [...processedSeries].reverse().map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           d: s.areaPath,
@@ -18163,8 +18169,8 @@ function AreaChart({
           } : void 0
         },
         `area-${i}`
-      )),
-      processedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { clipPath: `url(#${clipId})`, children: processedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           d: s.linePath,
@@ -18182,7 +18188,7 @@ function AreaChart({
           } : void 0
         },
         `line-${i}`
-      )),
+      )) }),
       showDots && processedSeries.map(
         (s, seriesIdx) => !hiddenSeries.has(s.name) && s.points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           "g",