@moontra/moonui-pro 3.3.18 → 3.3.20

package/dist/index.mjs

@@ -88920,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;
@@ -88997,13 +88962,13 @@ var MeshGradientInternal = ({
     points.forEach((point, index2) => {
       switch (animationType) {
         case "wave":
-          point.x += Math.sin(time + point.phase) * speed;
-          point.y += Math.cos(time + point.phase) * speed;
+          point.x += Math.sin(time + point.phase) * 0.5;
+          point.y += Math.cos(time + point.phase) * 0.5;
           break;
         case "morph":
           const morphAngle = time + point.phase;
-          point.x += Math.sin(morphAngle) * speed * 2;
-          point.y += Math.cos(morphAngle * 1.5) * speed * 2;
+          point.x += Math.sin(morphAngle) * 1;
+          point.y += Math.cos(morphAngle * 1.5) * 1;
           break;
         case "pulse":
           const pulseScale = 1 + Math.sin(time * 2 + point.phase) * 0.2;
@@ -89040,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) => {
@@ -89057,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);
@@ -89115,12 +89086,12 @@ var MeshGradientInternal = ({
     }
     lastFrameTimeRef.current = currentTime;
     if (animate4) {
-      timeRef.current += 1;
+      timeRef.current += speed * 2.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)
@@ -89167,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",
     {
@@ -89186,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.18",
+    "version": "3.3.20",
     "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",