@moontra/moonui-pro 2.28.8 → 2.28.10

package/dist/index.mjs

@@ -85707,13 +85707,22 @@ function WidgetBase({
   overlay
 }) {
   const colorSchemeClasses = {
-    blue: "from-blue-500/30 via-blue-400/15 to-transparent border-blue-500/40 dark:from-blue-400/30 dark:via-blue-300/15 dark:to-transparent dark:border-blue-400/40",
-    green: "from-green-500/30 via-green-400/15 to-transparent border-green-500/40 dark:from-green-400/30 dark:via-green-300/15 dark:to-transparent dark:border-green-400/40",
-    purple: "from-purple-500/30 via-purple-400/15 to-transparent border-purple-500/40 dark:from-purple-400/30 dark:via-purple-300/15 dark:to-transparent dark:border-purple-400/40",
-    orange: "from-orange-500/30 via-orange-400/15 to-transparent border-orange-500/40 dark:from-orange-400/30 dark:via-orange-300/15 dark:to-transparent dark:border-orange-400/40",
-    pink: "from-pink-500/30 via-pink-400/15 to-transparent border-pink-500/40 dark:from-pink-400/30 dark:via-pink-300/15 dark:to-transparent dark:border-pink-400/40",
-    cyan: "from-cyan-500/30 via-cyan-400/15 to-transparent border-cyan-500/40 dark:from-cyan-400/30 dark:via-cyan-300/15 dark:to-transparent dark:border-cyan-400/40",
-    neutral: "from-gray-500/30 via-gray-400/15 to-transparent border-gray-500/40 dark:from-gray-400/30 dark:via-gray-300/15 dark:to-transparent dark:border-gray-400/40"
+    blue: "from-blue-500/10 via-blue-500/5 to-transparent border-blue-500/20 dark:from-blue-400/10 dark:via-blue-400/5 dark:border-blue-400/20",
+    green: "from-green-500/10 via-green-500/5 to-transparent border-green-500/20 dark:from-green-400/10 dark:via-green-400/5 dark:border-green-400/20",
+    purple: "from-purple-500/10 via-purple-500/5 to-transparent border-purple-500/20 dark:from-purple-400/10 dark:via-purple-400/5 dark:border-purple-400/20",
+    orange: "from-orange-500/10 via-orange-500/5 to-transparent border-orange-500/20 dark:from-orange-400/10 dark:via-orange-400/5 dark:border-orange-400/20",
+    pink: "from-pink-500/10 via-pink-500/5 to-transparent border-pink-500/20 dark:from-pink-400/10 dark:via-pink-400/5 dark:border-pink-400/20",
+    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",
@@ -85757,52 +85766,69 @@ function WidgetBase({
     "to-tl": "bg-gradient-to-tl"
     // top-left
   };
+  const gradientDirectionStyles = {
+    "to-t": { backgroundImage: "linear-gradient(to top, var(--tw-gradient-stops))" },
+    "to-tr": { backgroundImage: "linear-gradient(to top right, var(--tw-gradient-stops))" },
+    "to-r": { backgroundImage: "linear-gradient(to right, var(--tw-gradient-stops))" },
+    "to-br": { backgroundImage: "linear-gradient(to bottom right, var(--tw-gradient-stops))" },
+    "to-b": { backgroundImage: "linear-gradient(to bottom, var(--tw-gradient-stops))" },
+    "to-bl": { backgroundImage: "linear-gradient(to bottom left, var(--tw-gradient-stops))" },
+    "to-l": { backgroundImage: "linear-gradient(to left, var(--tw-gradient-stops))" },
+    "to-tl": { backgroundImage: "linear-gradient(to top left, var(--tw-gradient-stops))" }
+  };
   const variantClasses = {
     default: "bg-card border",
     minimal: "border-0 shadow-none bg-card/50",
     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"
   };
-  const content = /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn(
-    variantClasses[variant],
-    roundedClasses[rounded],
-    shadowClasses[shadow],
-    "transition-all duration-200 relative",
-    className
-  ), children: [
-    (variant === "overlay" || overlay) && overlay?.pattern && overlay.pattern !== "none" && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-0 pointer-events-none",
-        style: {
-          backgroundImage: overlayPatterns[overlay.pattern],
-          backgroundSize: overlay.pattern === "dots" ? "8px 8px" : overlay.pattern === "grid" ? "20px 20px" : overlay.pattern === "diagonal" ? "8px 8px" : overlay.pattern === "waves" ? "60px 60px" : "auto",
-          opacity: overlay.opacity || 0.1,
-          color: overlay.color || "currentColor"
-        }
-      }
-    ),
-    (title || subtitle || headerAction) && /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        title && /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base font-semibold", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
-      ] }),
-      headerAction && /* @__PURE__ */ jsx("div", { className: "ml-4", children: headerAction })
-    ] }),
-    /* @__PURE__ */ jsx(MoonUICardContentPro, { className: cn(
-      title || subtitle || headerAction ? "pt-0" : "pt-6"
-    ), children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-24 mx-auto" }),
-      /* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded w-16 mx-auto" })
-    ] }) }) : error ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8 text-center", children: /* @__PURE__ */ jsxs("div", { className: "text-destructive", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Error" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: error })
-    ] }) }) : children })
-  ] });
+  const content = /* @__PURE__ */ jsxs(
+    MoonUICardPro,
+    {
+      className: cn(
+        variantClasses[variant],
+        roundedClasses[rounded],
+        shadowClasses[shadow],
+        "transition-all duration-200 relative",
+        className
+      ),
+      style: variant === "gradient" || variant === "colored" ? gradientDirectionStyles[gradientDirection] : void 0,
+      children: [
+        (variant === "overlay" || overlay) && overlay?.pattern && overlay.pattern !== "none" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 pointer-events-none",
+            style: {
+              backgroundImage: overlayPatterns[overlay.pattern],
+              backgroundSize: overlay.pattern === "dots" ? "8px 8px" : overlay.pattern === "grid" ? "20px 20px" : overlay.pattern === "diagonal" ? "8px 8px" : overlay.pattern === "waves" ? "60px 60px" : "auto",
+              opacity: overlay.opacity || 0.1,
+              color: overlay.color || "currentColor"
+            }
+          }
+        ),
+        (title || subtitle || headerAction) && /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            title && /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base font-semibold", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
+          ] }),
+          headerAction && /* @__PURE__ */ jsx("div", { className: "ml-4", children: headerAction })
+        ] }),
+        /* @__PURE__ */ jsx(MoonUICardContentPro, { className: cn(
+          title || subtitle || headerAction ? "pt-0" : "pt-6"
+        ), children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-24 mx-auto" }),
+          /* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded w-16 mx-auto" })
+        ] }) }) : error ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8 text-center", children: /* @__PURE__ */ jsxs("div", { className: "text-destructive", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Error" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: error })
+        ] }) }) : children })
+      ]
+    }
+  );
   if (animate5) {
     return /* @__PURE__ */ jsx(
       motion.div,
@@ -86058,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)
                 }
               ),
@@ -86093,7 +86117,7 @@ function ChartWidget2({
                   ),
                   style: {
                     backgroundColor: chartColors[index2 % chartColors.length],
-                    minHeight: "4px"
+                    minHeight: "2px"
                   },
                   initial: { height: 0 },
                   animate: { height: `${percentage}%` },
@@ -86104,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 = () => {
@@ -86133,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",
         {
@@ -86197,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: [
@@ -86216,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-32 h-32 lg:w-40 lg:h-40 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;
@@ -86258,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",
@@ -86273,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,
                 "%"
@@ -86339,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() })
       ] })
     }
   );

package/package.json

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