@moontra/moonui-pro 2.29.0 → 2.30.1

package/dist/index.mjs

@@ -86064,8 +86064,16 @@ function ChartWidget2({
     // red
     "#8b5cf6",
     // violet
-    "#ec4899"
+    "#ec4899",
     // pink
+    "#14b8a6",
+    // teal
+    "#f97316",
+    // orange
+    "#06b6d4",
+    // cyan
+    "#a855f7"
+    // purple
   ];
   const chartColors = colors || defaultColors2;
   const maxValue = t__default.useMemo(() => {
@@ -86101,12 +86109,43 @@ function ChartWidget2({
             animate: { opacity: 1, y: 0 },
             transition: { delay: index2 * 0.05 },
             children: [
-              showDataLabels && isHovered && /* @__PURE__ */ jsx(
+              isHovered && (() => {
+                const showInside = percentage > 70;
+                return /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    className: "absolute bg-background border rounded-lg px-3 py-2 text-xs pointer-events-none z-20 shadow-lg",
+                    style: showInside ? {
+                      top: "20px",
+                      left: "50%",
+                      transform: "translateX(-50%)"
+                    } : {
+                      bottom: `calc(${percentage}% + 8px)`,
+                      left: "50%",
+                      transform: "translateX(-50%)"
+                    },
+                    initial: { opacity: 0, y: showInside ? -10 : 10 },
+                    animate: { opacity: 1, y: 0 },
+                    transition: { duration: 0.2 },
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "font-medium", children: labels[index2] || `Item ${index2 + 1}` }),
+                      /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: formatNumber2(value) })
+                    ]
+                  }
+                );
+              })(),
+              showDataLabels && /* @__PURE__ */ jsx(
                 motion.span,
                 {
-                  className: "absolute text-xs font-medium -top-5",
+                  className: "absolute text-xs font-medium text-white mix-blend-difference",
+                  style: {
+                    bottom: `calc(${percentage}% / 2)`,
+                    left: "50%",
+                    transform: "translateX(-50%)"
+                  },
                   initial: { opacity: 0 },
                   animate: { opacity: 1 },
+                  transition: { delay: index2 * 0.1 + 0.6 },
                   children: formatNumber2(value)
                 }
               ),
@@ -86114,12 +86153,14 @@ function ChartWidget2({
                 motion.div,
                 {
                   className: cn(
-                    "w-full rounded-t cursor-pointer",
-                    isHovered && "opacity-80"
+                    "w-full rounded-t cursor-pointer transition-all duration-200",
+                    "shadow-lg",
+                    isHovered && "brightness-110 scale-y-105"
                   ),
                   style: {
-                    backgroundColor: chartColors[index2 % chartColors.length],
-                    minHeight: "2px"
+                    background: `linear-gradient(to top, ${chartColors[index2 % chartColors.length]}, ${chartColors[index2 % chartColors.length]}dd)`,
+                    minHeight: "2px",
+                    boxShadow: isHovered ? `0 4px 20px ${chartColors[index2 % chartColors.length]}40` : "none"
                   },
                   initial: { height: 0 },
                   animate: { height: `${percentage}%` },
@@ -86161,9 +86202,12 @@ function ChartWidget2({
     const labels = data.labels || data.categories || [];
     if (values.length < 2)
       return null;
+    const padding = 5;
+    const chartWidth = 100 - padding * 2;
+    const chartHeight = 100 - padding * 2;
     const points = values.map((value, index2) => {
-      const x = index2 / (values.length - 1) * 100;
-      const y = 100 - value / maxValue * 100;
+      const x = padding + index2 / (values.length - 1) * chartWidth;
+      const y = padding + (chartHeight - value / maxValue * chartHeight);
       return { x, y, value, label: labels[index2] };
     });
     const pathData = points.map((point, index2) => `${index2 === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
@@ -86175,25 +86219,42 @@ function ChartWidget2({
           viewBox: "0 0 100 100",
           preserveAspectRatio: "none",
           children: [
-            showGrid && /* @__PURE__ */ jsx("g", { className: "opacity-20", children: [0, 25, 50, 75, 100].map((y) => /* @__PURE__ */ jsx(
-              "line",
-              {
-                x1: "0",
-                y1: y,
-                x2: "100",
-                y2: y,
-                stroke: "currentColor",
-                strokeWidth: "0.5"
-              },
-              y
-            )) }),
+            /* @__PURE__ */ jsxs("defs", { children: [
+              /* @__PURE__ */ jsxs("linearGradient", { id: "chartLineGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: chartColors[0], stopOpacity: "1" }),
+                /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: chartColors[1] || chartColors[0], stopOpacity: "1" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: chartColors[2] || chartColors[0], stopOpacity: "1" })
+              ] }),
+              /* @__PURE__ */ jsxs("linearGradient", { id: "chartAreaGradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: chartColors[0], stopOpacity: "0.3" }),
+                /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: chartColors[0], stopOpacity: "0.15" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: chartColors[0], stopOpacity: "0.05" })
+              ] })
+            ] }),
+            showGrid && /* @__PURE__ */ jsx("g", { className: "opacity-10", children: [25, 50, 75].map((percentage) => {
+              const y = 5 + percentage / 100 * 90;
+              return /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: "0",
+                  y1: y,
+                  x2: "100",
+                  y2: y,
+                  stroke: "currentColor",
+                  strokeWidth: "0.3"
+                },
+                percentage
+              );
+            }) }),
             /* @__PURE__ */ jsx(
               motion.path,
               {
                 d: pathData,
                 fill: "none",
-                stroke: chartColors[0],
-                strokeWidth: "2",
+                stroke: "url(#chartLineGradient)",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
                 initial: { pathLength: 0 },
                 animate: { pathLength: 1 },
                 transition: { duration: animate5 ? 1 : 0 }
@@ -86202,8 +86263,8 @@ function ChartWidget2({
             type === "area" && /* @__PURE__ */ jsx(
               motion.path,
               {
-                d: `${pathData} L 100 100 L 0 100 Z`,
-                fill: `${chartColors[0]}20`,
+                d: `${pathData} L ${90} ${90} L ${10} ${90} Z`,
+                fill: "url(#chartAreaGradient)",
                 initial: { opacity: 0 },
                 animate: { opacity: 1 },
                 transition: { duration: animate5 ? 0.5 : 0, delay: 0.5 }
@@ -86214,35 +86275,46 @@ function ChartWidget2({
               {
                 cx: point.x,
                 cy: point.y,
-                r: "2",
+                r: "1",
                 fill: chartColors[0],
-                initial: { r: 0 },
-                animate: { r: hoveredIndex === index2 ? 3 : 2 },
+                stroke: "white",
+                strokeWidth: "1.5",
+                initial: { r: 0, opacity: 0 },
+                animate: {
+                  r: hoveredIndex === index2 ? 2.5 : 1,
+                  opacity: 1,
+                  strokeWidth: hoveredIndex === index2 ? 2 : 1.5
+                },
                 onMouseEnter: () => setHoveredIndex(index2),
                 onMouseLeave: () => setHoveredIndex(null),
                 className: "cursor-pointer",
-                onClick: () => onDataPointClick?.(point)
+                onClick: () => onDataPointClick?.(point),
+                transition: { duration: 0.2 }
               },
               index2
             ))
           ]
         }
       ),
-      showTooltip && hoveredIndex !== null && points[hoveredIndex] && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "absolute bg-background border rounded px-2 py-1 text-xs pointer-events-none z-10",
-          style: {
-            left: `${Math.min(90, Math.max(10, points[hoveredIndex].x))}%`,
-            top: `${Math.min(85, Math.max(5, points[hoveredIndex].y))}%`,
-            transform: "translate(-50%, -150%)"
-          },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "font-medium", children: points[hoveredIndex].label }),
-            /* @__PURE__ */ jsx("div", { children: formatNumber2(points[hoveredIndex].value) })
-          ]
-        }
-      )
+      showTooltip && hoveredIndex !== null && points[hoveredIndex] && (() => {
+        const point = points[hoveredIndex];
+        const showBelow = point.y < 30;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "absolute bg-background border rounded px-2 py-1 text-xs pointer-events-none z-10 shadow-lg",
+            style: {
+              left: `${Math.min(90, Math.max(10, point.x))}%`,
+              top: showBelow ? `${point.y}%` : `${point.y}%`,
+              transform: showBelow ? "translate(-50%, 10px)" : "translate(-50%, calc(-100% - 10px))"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium", children: point.label }),
+              /* @__PURE__ */ jsx("div", { children: formatNumber2(point.value) })
+            ]
+          }
+        );
+      })()
     ] });
   };
   const renderPieChart = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "2.29.0",
+    "version": "2.30.1",
     "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
     "type": "module",
     "main": "dist/index.mjs",