@moontra/moonui-pro 2.25.10 → 2.25.12

package/dist/index.mjs

@@ -3606,10 +3606,10 @@ var moonUICardVariantsPro = cva(
         glow: "border border-border shadow-[0_0_30px_rgba(var(--primary),0.15)] dark:shadow-[0_0_40px_rgba(var(--primary),0.25)]"
       },
       size: {
-        default: "p-6",
-        sm: "p-4",
-        lg: "p-8",
-        xl: "p-10"
+        default: "",
+        sm: "",
+        lg: "",
+        xl: ""
       },
       radius: {
         default: "rounded-lg",
@@ -3712,7 +3712,7 @@ var MoonUICardHeaderPro = t.forwardRef(({ className, ...props }, ref) => /* @__P
   "div",
   {
     ref,
-    className: cn("flex flex-col space-y-1.5", className),
+    className: cn("flex flex-col space-y-1.5 p-6", className),
     ...props
   }
 ));
@@ -3735,13 +3735,13 @@ var MoonUICardDescriptionPro = t.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 MoonUICardDescriptionPro.displayName = "MoonUICardDescriptionPro";
-var MoonUICardContentPro = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("pt-0", className), ...props }));
+var MoonUICardContentPro = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 MoonUICardContentPro.displayName = "MoonUICardContentPro";
 var MoonUICardFooterPro = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
-    className: cn("flex items-center pt-4", className),
+    className: cn("flex items-center p-6 pt-0", className),
     ...props
   }
 ));
@@ -64323,10 +64323,10 @@ function DashboardGrid({
   className,
   glassmorphism = false,
   breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
-  cols = { lg: 12, md: 8, sm: 4, xs: 2, xxs: 1 },
+  cols = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
   rowHeight = 80,
-  margin = [16, 16],
-  containerPadding = [16, 16]
+  margin = [20, 20],
+  containerPadding = [20, 20]
 }) {
   const [layouts, setLayouts] = t__default.useState({});
   const [currentBreakpoint, setCurrentBreakpoint] = t__default.useState("lg");
@@ -64361,61 +64361,76 @@ function DashboardGrid({
     const baseLayout = widgets.map((widget, index2) => ({
       i: widget.id,
       x: widget.position?.x ?? index2 * 3 % 12,
-      y: widget.position?.y ?? Math.floor(index2 * 3 / 12) * 3,
+      y: widget.position?.y ?? Math.floor(index2 / 4) * 3,
       w: widget.size?.w ?? 3,
       h: widget.size?.h ?? 3,
-      minW: widget.size?.minW || 2,
+      minW: widget.size?.minW || 1,
       maxW: widget.size?.maxW || 12,
       minH: widget.size?.minH || 2,
       maxH: widget.size?.maxH || 8,
       isDraggable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canMove !== false,
       isResizable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canResize !== false
     }));
-    const sortedLayout = [...baseLayout].sort((a, b) => {
-      if (a.y === b.y)
-        return a.x - b.x;
-      return a.y - b.y;
-    });
+    const preventCollisions = (items, colCount) => {
+      const sorted = [...items].sort((a, b) => {
+        if (a.y === b.y)
+          return a.x - b.x;
+        return a.y - b.y;
+      });
+      let currentY = 0;
+      const positioned = [];
+      for (const item of sorted) {
+        const adjustedW = Math.min(item.w, colCount);
+        let finalY = currentY;
+        for (const prev of positioned) {
+          const prevBottom = prev.y + prev.h;
+          if (prev.x < adjustedW && prev.x + prev.w > 0 && prevBottom > finalY) {
+            finalY = prevBottom;
+          }
+        }
+        positioned.push({
+          ...item,
+          w: adjustedW,
+          x: 0,
+          y: finalY
+        });
+        currentY = finalY + item.h;
+      }
+      return positioned;
+    };
     return {
       lg: baseLayout,
-      md: sortedLayout.map((item, index2) => {
-        const maxW = Math.min(item.w, 4);
+      md: widgets.map((widget, index2) => {
         const row = Math.floor(index2 / 2);
-        const col = index2 % 2 * 4;
+        const col = index2 % 2 * 5;
         return {
-          ...item,
-          w: maxW,
+          i: widget.id,
+          w: Math.min(widget.size?.w ?? 5, 5),
+          h: widget.size?.h ?? 3,
           x: col,
-          y: row * 3,
-          h: Math.min(item.h, 3)
+          y: row * 4,
+          minW: 2,
+          minH: 2,
+          isDraggable: editMode && !lockedWidgets.has(widget.id),
+          isResizable: editMode && !lockedWidgets.has(widget.id)
         };
       }),
-      sm: sortedLayout.map((item, index2) => {
-        const maxW = Math.min(item.w, 4);
-        return {
-          ...item,
-          w: maxW,
-          x: 0,
-          y: index2 * 3,
-          h: Math.min(item.h, 3)
-        };
-      }),
-      xs: sortedLayout.map((item, index2) => ({
+      sm: preventCollisions(baseLayout.map((item) => ({
         ...item,
-        w: 2,
-        // Full width on mobile
-        x: 0,
-        y: index2 * 2,
-        h: Math.min(item.h, 2)
-      })),
-      xxs: sortedLayout.map((item, index2) => ({
+        w: Math.min(item.w, 6),
+        h: Math.min(item.h, 4)
+      })), 6),
+      xs: preventCollisions(baseLayout.map((item) => ({
         ...item,
-        w: 1,
+        w: Math.min(item.w, 4),
+        h: Math.min(item.h, 3)
+      })), 4),
+      xxs: preventCollisions(baseLayout.map((item) => ({
+        ...item,
+        w: 2,
         // Full width on extra small
-        x: 0,
-        y: index2 * 2,
-        h: Math.min(item.h, 2)
-      }))
+        h: Math.min(item.h, 3)
+      })), 2)
     };
   };
   const toggleWidgetLock = (widgetId) => {
@@ -64659,12 +64674,12 @@ function DashboardGrid({
           draggableHandle: ".drag-handle",
           isDraggable: editMode,
           isResizable: editMode,
-          compactType,
-          preventCollision: false,
+          compactType: "vertical",
+          preventCollision: true,
           useCSSTransforms: true,
           transformScale: 1,
           isDroppable: true,
-          autoSize: true,
+          autoSize: false,
           verticalCompact: true,
           children: widgets.map((widget) => /* @__PURE__ */ jsx("div", { children: renderWidget(widget) }, widget.id))
         }
@@ -65667,7 +65682,7 @@ var DASHBOARD_TEMPLATES = [
         type: "activity",
         title: "Recent Activity",
         size: { w: 3, h: 6 },
-        position: { x: 9, y: 0 },
+        position: { x: 6, y: 0 },
         data: {
           realtime: true,
           items: [
@@ -65944,7 +65959,7 @@ var DashboardInternal = t__default.memo(function DashboardInternal2({
     const newWidgets = template.widgets.map((w, index2) => ({
       ...w,
       id: `widget-${Date.now()}-${index2}`,
-      position: w.position || { x: index2 * 3 % 12, y: Math.floor(index2 * 3 / 12) * 3 },
+      position: w.position || { x: index2 * 3 % 12, y: Math.floor(index2 / 4) * 3 },
       size: w.size || { w: 3, h: 3 }
     }));
     setWidgets(newWidgets);

package/package.json

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