@moontra/moonui-pro 2.28.9 → 2.28.11

package/dist/index.mjs

@@ -85715,6 +85715,15 @@ function WidgetBase({
     cyan: "from-cyan-500/10 via-cyan-500/5 to-transparent border-cyan-500/20 dark:from-cyan-400/10 dark:via-cyan-400/5 dark:border-cyan-400/20",
     neutral: "from-gray-500/10 via-gray-500/5 to-transparent border-gray-500/20 dark:from-gray-400/10 dark:via-gray-400/5 dark:border-gray-400/20"
   };
+  const colorSchemeClassesColored = {
+    blue: "from-blue-500/20 via-blue-500/10 to-transparent border-blue-500/30 dark:from-blue-400/20 dark:via-blue-400/10 dark:border-blue-400/30",
+    green: "from-green-500/20 via-green-500/10 to-transparent border-green-500/30 dark:from-green-400/20 dark:via-green-400/10 dark:border-green-400/30",
+    purple: "from-purple-500/20 via-purple-500/10 to-transparent border-purple-500/30 dark:from-purple-400/20 dark:via-purple-400/10 dark:border-purple-400/30",
+    orange: "from-orange-500/20 via-orange-500/10 to-transparent border-orange-500/30 dark:from-orange-400/20 dark:via-orange-400/10 dark:border-orange-400/30",
+    pink: "from-pink-500/20 via-pink-500/10 to-transparent border-pink-500/30 dark:from-pink-400/20 dark:via-pink-400/10 dark:border-pink-400/30",
+    cyan: "from-cyan-500/20 via-cyan-500/10 to-transparent border-cyan-500/30 dark:from-cyan-400/20 dark:via-cyan-400/10 dark:border-cyan-400/30",
+    neutral: "from-gray-500/20 via-gray-500/10 to-transparent border-gray-500/30 dark:from-gray-400/20 dark:via-gray-400/10 dark:border-gray-400/30"
+  };
   const roundedClasses = {
     none: "rounded-none",
     sm: "rounded-sm",
@@ -85773,7 +85782,7 @@ function WidgetBase({
     glass: "bg-background/60 backdrop-blur-md border-white/10",
     bordered: "border-2 bg-card",
     gradient: `${gradientDirectionClasses[gradientDirection]} ${colorSchemeClasses[colorScheme]}`,
-    colored: `${gradientDirectionClasses[gradientDirection]} ${colorSchemeClasses[colorScheme]} border-2`,
+    colored: `${gradientDirectionClasses[gradientDirection]} ${colorSchemeClassesColored[colorScheme]} border-2`,
     overlay: "bg-card border relative overflow-hidden",
     floating: "bg-card border-0 shadow-2xl hover:shadow-3xl transform hover:-translate-y-1 transition-all duration-300 ring-1 ring-gray-200/50 dark:ring-gray-700/50"
   };
@@ -86075,29 +86084,27 @@ function ChartWidget2({
   const renderBarChart = () => {
     const values = data.values || [];
     const labels = data.labels || data.categories || [];
-    console.log("ChartWidget Debug:", { values, maxValue, labels });
-    return /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-end justify-between gap-1 pl-12 pr-4", style: { height: "200px" }, children: values.map((value, index2) => {
+    return /* @__PURE__ */ jsxs("div", { className: "relative h-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-end justify-between gap-1 pl-10 pr-2 pb-6", children: values.map((value, index2) => {
         const percentage = value / maxValue * 100;
         const isHovered = hoveredIndex === index2;
-        console.log(`Bar ${index2}:`, { value, percentage, maxValue });
         return /* @__PURE__ */ jsxs(
           motion.div,
           {
-            className: "flex flex-col items-center justify-end gap-2 min-w-0",
-            style: { height: "100%", flex: "1 1 0", position: "relative", zIndex: 2 },
+            className: "relative flex flex-col items-center justify-end min-w-0",
+            style: { height: "calc(100% - 24px)", flex: "1 1 0" },
             onMouseEnter: () => setHoveredIndex(index2),
             onMouseLeave: () => setHoveredIndex(null),
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
             transition: { delay: index2 * 0.05 },
             children: [
-              showDataLabels && /* @__PURE__ */ jsx(
+              showDataLabels && isHovered && /* @__PURE__ */ jsx(
                 motion.span,
                 {
-                  className: "text-xs font-medium",
+                  className: "absolute text-xs font-medium -top-5",
                   initial: { opacity: 0 },
-                  animate: { opacity: isHovered ? 1 : 0 },
+                  animate: { opacity: 1 },
                   children: formatNumber2(value)
                 }
               ),
@@ -86110,7 +86117,7 @@ function ChartWidget2({
                   ),
                   style: {
                     backgroundColor: chartColors[index2 % chartColors.length],
-                    minHeight: "4px"
+                    minHeight: "2px"
                   },
                   initial: { height: 0 },
                   animate: { height: `${percentage}%` },
@@ -86121,22 +86128,30 @@ function ChartWidget2({
                   },
                   onClick: () => onDataPointClick?.({ label: labels[index2], value })
                 }
-              ) }),
-              labels[index2] && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate max-w-full", children: labels[index2] })
+              ) })
             ]
           },
           index2
         );
       }) }),
-      showGrid && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 1 }, children: [0, 25, 50, 75, 100].map((percentage) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute w-full border-b border-muted/30",
-          style: { bottom: `${percentage}%`, left: 0, right: 0 },
-          children: /* @__PURE__ */ jsx("span", { className: "absolute -left-12 text-xs text-muted-foreground -translate-y-1/2 bg-background px-1 rounded", children: Math.round(percentage / 100 * maxValue).toLocaleString() })
-        },
-        percentage
-      )) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-10 right-0 flex justify-between gap-1 pr-2 h-6", children: labels.map((label, index2) => /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate", children: label }) }, index2)) }),
+      showGrid && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pb-6 pointer-events-none", children: [
+        [0, 25, 50, 75, 100].map((percentage) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute left-10 right-0 border-b border-muted/20",
+            style: { bottom: `calc(24px + ${percentage}% * (100% - 24px) / 100)` }
+          },
+          percentage
+        )),
+        /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-0 bottom-6 w-9 flex flex-col justify-between text-xs text-muted-foreground pr-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-right", children: formatNumber2(maxValue) }),
+          /* @__PURE__ */ jsx("span", { className: "text-right", children: formatNumber2(maxValue * 0.75) }),
+          /* @__PURE__ */ jsx("span", { className: "text-right", children: formatNumber2(maxValue * 0.5) }),
+          /* @__PURE__ */ jsx("span", { className: "text-right", children: formatNumber2(maxValue * 0.25) }),
+          /* @__PURE__ */ jsx("span", { className: "text-right", children: "0" })
+        ] })
+      ] })
     ] });
   };
   const renderLineChart = () => {
@@ -86150,7 +86165,7 @@ function ChartWidget2({
       return { x, y, value, label: labels[index2] };
     });
     const pathData = points.map((point, index2) => `${index2 === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
-    return /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "relative h-full overflow-hidden", children: [
       /* @__PURE__ */ jsxs(
         "svg",
         {
@@ -86214,10 +86229,10 @@ function ChartWidget2({
       showTooltip && hoveredIndex !== null && points[hoveredIndex] && /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "absolute bg-background border rounded px-2 py-1 text-xs pointer-events-none",
+          className: "absolute bg-background border rounded px-2 py-1 text-xs pointer-events-none z-10",
           style: {
-            left: `${points[hoveredIndex].x}%`,
-            top: `${points[hoveredIndex].y}%`,
+            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: [
@@ -86233,8 +86248,8 @@ function ChartWidget2({
     const labels = data.labels || data.categories || [];
     const total = values.reduce((sum, val) => sum + val, 0);
     let currentAngle = -90;
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative w-48 h-48", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 h-full overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative w-48 h-48 flex-shrink-0", children: [
         /* @__PURE__ */ jsxs("svg", { className: "w-full h-full transform", viewBox: "0 0 100 100", children: [
           values.map((value, index2) => {
             const percentage = value / total * 100;
@@ -86275,7 +86290,7 @@ function ChartWidget2({
           /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Total" })
         ] })
       ] }),
-      showLegend && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: values.map((value, index2) => {
+      showLegend && /* @__PURE__ */ jsx("div", { className: "space-y-1 overflow-y-auto flex-1 min-w-0", children: values.map((value, index2) => {
         const percentage = (value / total * 100).toFixed(1);
         return /* @__PURE__ */ jsxs(
           "div",
@@ -86290,11 +86305,11 @@ function ChartWidget2({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "w-3 h-3 rounded",
+                  className: "w-2 h-2 rounded flex-shrink-0",
                   style: { backgroundColor: chartColors[index2 % chartColors.length] }
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "text-sm", children: labels[index2] }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs truncate", children: labels[index2] }),
               /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
                 percentage,
                 "%"
@@ -86356,7 +86371,7 @@ function ChartWidget2({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { height: `${height}px` }, children: renderChart() })
+        /* @__PURE__ */ jsx("div", { className: "overflow-hidden", style: { height: `${height}px` }, children: renderChart() })
       ] })
     }
   );
@@ -86932,8 +86947,8 @@ function FunnelWidget({
                   children: /* @__PURE__ */ jsx("div", { style: { color }, children: icon })
                 }
               ),
-              index2 > 0 && showDropoff && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "destructive", className: "text-xs", children: [
-                /* @__PURE__ */ jsx(TrendingDown, { className: "h-3 w-3 mr-1" }),
+              index2 > 0 && showDropoff && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "destructive", className: "text-xs flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(TrendingDown, { className: "h-3 w-3" }),
                 formatNumber2(stage.dropoffPercentage),
                 "%"
               ] })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "2.28.9",
+    "version": "2.28.11",
     "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",