@moontra/moonui-pro 3.3.17 → 3.3.19

package/dist/index.d.ts

@@ -3968,7 +3968,7 @@ interface NavbarConfig {
         text?: string;
         hover?: string;
     };
-    variant?: "default" | "floating" | "minimal" | "transparent";
+    variant?: "default" | "floating" | "floating-centered" | "minimal" | "transparent";
     size?: "sm" | "md" | "lg";
     blur?: boolean;
     shadow?: boolean;

package/dist/index.mjs

@@ -79177,9 +79177,6 @@ function NavbarInternal({
     ] }) })
   ] });
   const getHeight = () => {
-    if (isMinimal && minimalConfig?.heightOnScroll) {
-      return minimalConfig.heightOnScroll;
-    }
     switch (size4) {
       case "sm":
         return "h-14";
@@ -79189,15 +79186,12 @@ function NavbarInternal({
         return "h-16";
     }
   };
-  const shouldHideInMinimal = (element) => {
-    return isMinimal && minimalConfig?.hideElements?.includes(element);
-  };
   const navClasses = cn(
-    "moonui-pro w-full transition-all",
-    `duration-${minimalConfig?.animationDuration || 300}`,
+    "moonui-pro w-full transition-all duration-300 ease-in-out",
     // Base variant styles
     variant === "default" && "border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
     variant === "floating" && "mx-4 mt-4 rounded-lg border bg-background/95 backdrop-blur shadow-lg",
+    variant === "floating-centered" && "mx-auto my-4 max-w-5xl rounded-2xl border border-border/40 bg-background/70 backdrop-blur-xl shadow-lg shadow-black/5 dark:shadow-black/20 px-6",
     variant === "minimal" && "bg-background",
     variant === "transparent" && "bg-transparent",
     // Sticky behavior
@@ -79206,9 +79200,6 @@ function NavbarInternal({
     scrolled && sticky && variant !== "transparent" && "shadow-sm",
     scrolled && variant === "transparent" && "bg-background/95 backdrop-blur border-b",
     scrollBehavior === "hide" && hidden && "-translate-y-full",
-    // Minimal mode styles
-    scrollBehavior === "minimal" && isMinimal && "shadow-md border-b",
-    scrollBehavior === "minimal" && isMinimal && minimalConfig?.centerOnScroll && "px-8",
     // Glass effect
     glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
     blur2 && "backdrop-blur-md",
@@ -79225,23 +79216,18 @@ function NavbarInternal({
         "div",
         {
           className: cn(
-            "flex items-center",
+            "flex items-center transition-[height] duration-300 ease-in-out",
             getHeight(),
             fullWidth ? "w-full px-4 sm:px-6 lg:px-8" : maxWidth === "sm" && "container max-w-screen-sm" || maxWidth === "md" && "container max-w-screen-md" || maxWidth === "lg" && "container max-w-screen-lg" || maxWidth === "xl" && "container max-w-screen-xl" || maxWidth === "2xl" && "container max-w-screen-2xl" || maxWidth === "full" && "w-full px-4 sm:px-6 lg:px-8"
           ),
           children: [
             branding && /* @__PURE__ */ jsxs(
-              motion.div,
+              "div",
               {
                 className: cn(
                   "flex items-center gap-2",
-                  logoPosition === "center" && !isMobile ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
+                  logoPosition === "center" && !isMobile && variant !== "floating-centered" ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
                 ),
-                animate: {
-                  scale: isMinimal ? 0.9 : 1,
-                  opacity: shouldHideInMinimal("logo-text") ? 0.8 : 1
-                },
-                transition: { duration: minimalConfig?.animationDuration ? minimalConfig.animationDuration / 1e3 : 0.3 },
                 children: [
                   logoPosition === "left" && mobileMenuPosition === "left" && /* @__PURE__ */ jsx(MobileMenu, {}),
                   /* @__PURE__ */ jsxs(
@@ -79257,18 +79243,7 @@ function NavbarInternal({
                       className: "flex items-center gap-2",
                       children: [
                         branding.logo,
-                        branding.title && !isMobile && !shouldHideInMinimal("logo-text") && /* @__PURE__ */ jsx(
-                          motion.span,
-                          {
-                            className: "font-semibold text-lg",
-                            animate: {
-                              opacity: shouldHideInMinimal("logo-text") ? 0 : 1,
-                              width: shouldHideInMinimal("logo-text") ? 0 : "auto"
-                            },
-                            transition: { duration: 0.3 },
-                            children: branding.title
-                          }
-                        )
+                        branding.title && !isMobile && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
                       ]
                     }
                   )
@@ -79280,12 +79255,13 @@ function NavbarInternal({
               {
                 className: cn(
                   "hidden md:flex",
-                  navItemsPosition === "center" && "flex-1 justify-center mx-4",
+                  navItemsPosition === "center" && variant !== "floating-centered" && "flex-1 justify-center mx-4",
+                  navItemsPosition === "center" && variant === "floating-centered" && "flex-1 justify-center",
                   navItemsPosition === "right" && "ml-auto",
                   navItemsPosition === "left" && "ml-4",
                   // Keep position consistent in minimal mode unless centerOnScroll is enabled
                   isMinimal && minimalConfig?.centerOnScroll && navItemsPosition !== "center" && "flex-1 justify-center",
-                  navItemsPosition === "center" && "absolute left-1/2 transform -translate-x-1/2"
+                  navItemsPosition === "center" && variant !== "floating-centered" && "absolute left-1/2 transform -translate-x-1/2"
                 ),
                 children: /* @__PURE__ */ jsx(NavigationMenuList2, { children: sections.map((section) => /* @__PURE__ */ jsx(React71__default.Fragment, { children: section.items.map((item) => {
                   const hasChildren = item.items && item.items.length > 0;
@@ -79355,7 +79331,7 @@ function NavbarInternal({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
-              showSearch && !shouldHideInMinimal("search") && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
+              showSearch && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
                 MoonUIButtonPro,
                 {
                   variant: "ghost",
@@ -79603,7 +79579,7 @@ function NavbarInternal({
                   }
                 )
               ] }),
-              cta && !shouldHideInMinimal("cta") && /* @__PURE__ */ jsx(
+              cta && /* @__PURE__ */ jsx(
                 MoonUIButtonPro,
                 {
                   variant: cta.variant || "primary",
@@ -88944,76 +88920,41 @@ var MeshGradientInternal = ({
     const canvas = canvasRef.current;
     if (!canvas)
       return;
+    const width = canvas.width > 0 ? canvas.width : 800;
+    const height = canvas.height > 0 ? canvas.height : 600;
     const points = [];
     const totalPoints = complexity;
     for (let i = 0; i < totalPoints; i++) {
       const angle = i / totalPoints * Math.PI * 2;
       const distance = Math.random() * 0.5 + 0.2;
       points.push({
-        x: canvas.width / 2 + Math.cos(angle) * distance * canvas.width,
-        y: canvas.height / 2 + Math.sin(angle) * distance * canvas.height,
+        x: width / 2 + Math.cos(angle) * distance * width,
+        y: height / 2 + Math.sin(angle) * distance * height,
         vx: (Math.random() - 0.5) * speed,
         vy: (Math.random() - 0.5) * speed,
         color: colors[i % colors.length],
-        radius: (canvas.width + canvas.height) / 4,
+        radius: Math.max(100, (width + height) / 4),
         phase: i / totalPoints * Math.PI * 2
       });
     }
     meshPointsRef.current = points;
   }, [colors, complexity, speed]);
-  const adjustColor = useCallback((color) => {
+  const adjustColor = useCallback((color, alpha2 = 1) => {
     const hex = color.replace("#", "");
     const r2 = parseInt(hex.substring(0, 2), 16);
     const g = parseInt(hex.substring(2, 4), 16);
     const b = parseInt(hex.substring(4, 6), 16);
-    const max2 = Math.max(r2, g, b);
-    const min2 = Math.min(r2, g, b);
-    const delta = max2 - min2;
-    let h2 = 0, s = 0, l = (max2 + min2) / 510;
-    if (delta !== 0) {
-      s = delta / (510 - Math.abs(max2 + min2 - 510));
-      if (max2 === r2)
-        h2 = ((g - b) / delta + (g < b ? 6 : 0)) / 6;
-      else if (max2 === g)
-        h2 = ((b - r2) / delta + 2) / 6;
-      else
-        h2 = ((r2 - g) / delta + 4) / 6;
-    }
-    s *= saturation;
-    l *= brightness;
-    const c2 = (1 - Math.abs(2 * l - 1)) * s;
-    const x = c2 * (1 - Math.abs(h2 * 6 % 2 - 1));
-    const m = l - c2 / 2;
-    let r1 = 0, g1 = 0, b1 = 0;
-    if (h2 < 1 / 6) {
-      r1 = c2;
-      g1 = x;
-      b1 = 0;
-    } else if (h2 < 2 / 6) {
-      r1 = x;
-      g1 = c2;
-      b1 = 0;
-    } else if (h2 < 3 / 6) {
-      r1 = 0;
-      g1 = c2;
-      b1 = x;
-    } else if (h2 < 4 / 6) {
-      r1 = 0;
-      g1 = x;
-      b1 = c2;
-    } else if (h2 < 5 / 6) {
-      r1 = x;
-      g1 = 0;
-      b1 = c2;
-    } else {
-      r1 = c2;
-      g1 = 0;
-      b1 = x;
-    }
-    const finalR = Math.round((r1 + m) * 255);
-    const finalG = Math.round((g1 + m) * 255);
-    const finalB = Math.round((b1 + m) * 255);
-    return `rgb(${finalR}, ${finalG}, ${finalB})`;
+    const adjustedR = Math.min(255, Math.max(0, r2 * brightness));
+    const adjustedG = Math.min(255, Math.max(0, g * brightness));
+    const adjustedB = Math.min(255, Math.max(0, b * brightness));
+    if (saturation !== 1) {
+      const gray = (adjustedR + adjustedG + adjustedB) / 3;
+      const finalR = Math.round(gray + (adjustedR - gray) * saturation);
+      const finalG = Math.round(gray + (adjustedG - gray) * saturation);
+      const finalB = Math.round(gray + (adjustedB - gray) * saturation);
+      return `rgba(${Math.min(255, Math.max(0, finalR))}, ${Math.min(255, Math.max(0, finalG))}, ${Math.min(255, Math.max(0, finalB))}, ${alpha2})`;
+    }
+    return `rgba(${Math.round(adjustedR)}, ${Math.round(adjustedG)}, ${Math.round(adjustedB)}, ${alpha2})`;
   }, [saturation, brightness]);
   const updateMeshPoints = useCallback((canvas) => {
     const points = meshPointsRef.current;
@@ -89064,12 +89005,16 @@ var MeshGradientInternal = ({
         const mdx = point.x - mouseRef.current.x;
         const mdy = point.y - mouseRef.current.y;
         const distance = Math.sqrt(mdx * mdx + mdy * mdy);
-        if (distance < mouseRadius) {
+        if (distance > 0 && distance < mouseRadius) {
           const force = (1 - distance / mouseRadius) * 3;
           point.x += mdx / distance * force;
           point.y += mdy / distance * force;
         }
       }
+      if (!isFinite(point.x))
+        point.x = canvas.width / 2;
+      if (!isFinite(point.y))
+        point.y = canvas.height / 2;
     });
   }, [animationType, speed, interactive, mouseRadius]);
   const drawMeshGradient = useCallback((ctx, canvas) => {
@@ -89081,28 +89026,30 @@ var MeshGradientInternal = ({
       ctx.filter = `blur(${blur2}px)`;
     }
     points.forEach((point, i) => {
+      const x = isFinite(point.x) ? point.x : canvas.width / 2;
+      const y = isFinite(point.y) ? point.y : canvas.height / 2;
+      const radius = isFinite(point.radius) && point.radius > 0 ? point.radius : 100;
       const gradient = ctx.createRadialGradient(
-        point.x,
-        point.y,
+        x,
+        y,
         0,
-        point.x,
-        point.y,
-        point.radius
+        x,
+        y,
+        radius
       );
-      const adjustedColor = adjustColor(point.color);
       if (interpolation === "smooth") {
-        gradient.addColorStop(0, adjustedColor);
-        gradient.addColorStop(0.5, adjustedColor + "80");
-        gradient.addColorStop(1, adjustedColor + "00");
+        gradient.addColorStop(0, adjustColor(point.color, 1));
+        gradient.addColorStop(0.5, adjustColor(point.color, 0.5));
+        gradient.addColorStop(1, adjustColor(point.color, 0));
       } else if (interpolation === "bezier") {
-        gradient.addColorStop(0, adjustedColor);
-        gradient.addColorStop(0.25, adjustedColor + "CC");
-        gradient.addColorStop(0.5, adjustedColor + "80");
-        gradient.addColorStop(0.75, adjustedColor + "40");
-        gradient.addColorStop(1, adjustedColor + "00");
+        gradient.addColorStop(0, adjustColor(point.color, 1));
+        gradient.addColorStop(0.25, adjustColor(point.color, 0.8));
+        gradient.addColorStop(0.5, adjustColor(point.color, 0.5));
+        gradient.addColorStop(0.75, adjustColor(point.color, 0.25));
+        gradient.addColorStop(1, adjustColor(point.color, 0));
       } else {
-        gradient.addColorStop(0, adjustedColor);
-        gradient.addColorStop(1, adjustedColor + "00");
+        gradient.addColorStop(0, adjustColor(point.color, 1));
+        gradient.addColorStop(1, adjustColor(point.color, 0));
       }
       ctx.fillStyle = gradient;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -89139,12 +89086,12 @@ var MeshGradientInternal = ({
     }
     lastFrameTimeRef.current = currentTime;
     if (animate4) {
-      timeRef.current += 1;
+      timeRef.current += 5;
     }
     updateMeshPoints(canvas);
     drawMeshGradient(ctx, canvas);
     animationRef.current = requestAnimationFrame(animateLoop);
-  }, [frameInterval, updateMeshPoints, drawMeshGradient]);
+  }, [frameInterval, updateMeshPoints, drawMeshGradient, animate4]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89191,7 +89138,7 @@ var MeshGradientInternal = ({
         cancelAnimationFrame(animationRef.current);
       }
     };
-  }, [initializeMeshPoints, handleResize, handleMouseMove2, animateLoop, drawMeshGradient, interactive]);
+  }, [initializeMeshPoints, handleResize, handleMouseMove2, animateLoop, drawMeshGradient, interactive, animate4]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -89210,7 +89157,7 @@ var MeshGradientInternal = ({
             )
           }
         ),
-        children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+        children && /* @__PURE__ */ jsx("div", { className: "relative z-10 h-full w-full", children })
       ]
     }
   );

package/package.json

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