@moontra/moonui-pro 3.4.37 → 3.4.38

package/dist/index.mjs

@@ -86994,18 +86994,19 @@ var GridPatternInternal = ({
   squares = [],
   strokeDasharray = "0",
   className,
-  strokeColor = "rgb(156 163 175 / 0.2)",
-  // gray-400/20
+  strokeColor,
+  darkStrokeColor,
   strokeWidth = 1,
-  maxOpacity = 0.4,
+  maxOpacity,
+  darkMaxOpacity,
   duration = 4e3,
   repeatDelay = 0,
   variant = "lines",
   gradient = false,
-  gradientFrom = "rgb(59 130 246)",
-  // blue-500
-  gradientTo = "rgb(147 51 234)",
-  // purple-500
+  gradientFrom,
+  darkGradientFrom,
+  gradientTo,
+  darkGradientTo,
   gradientDirection = "diagonal",
   animationType = "fade",
   blur: blur2 = false,
@@ -87017,12 +87018,65 @@ var GridPatternInternal = ({
   size: size4,
   performance: performance2 = "balanced"
 }) => {
+  const { theme } = useTheme();
   const uniqueId = useId();
   const patternId = `grid-pattern-${uniqueId}`;
   const gradientId = `grid-gradient-${uniqueId}`;
   const maskId = `grid-mask-${uniqueId}`;
   const noiseId = `grid-noise-${uniqueId}`;
   const containerRef = useRef(null);
+  const defaultStrokeColor = useMemo(() => {
+    if (theme === "dark") {
+      if (darkStrokeColor)
+        return darkStrokeColor;
+      if (strokeColor)
+        return strokeColor;
+      return "rgb(156 163 175 / 0.3)";
+    } else {
+      if (strokeColor)
+        return strokeColor;
+      return "rgb(156 163 175 / 0.15)";
+    }
+  }, [theme, strokeColor, darkStrokeColor]);
+  const defaultMaxOpacity = useMemo(() => {
+    if (theme === "dark") {
+      if (darkMaxOpacity !== void 0)
+        return darkMaxOpacity;
+      if (maxOpacity !== void 0)
+        return maxOpacity;
+      return 0.5;
+    } else {
+      if (maxOpacity !== void 0)
+        return maxOpacity;
+      return 0.3;
+    }
+  }, [theme, maxOpacity, darkMaxOpacity]);
+  const defaultGradientFrom = useMemo(() => {
+    if (theme === "dark") {
+      if (darkGradientFrom)
+        return darkGradientFrom;
+      if (gradientFrom)
+        return gradientFrom;
+      return "rgb(139 92 246)";
+    } else {
+      if (gradientFrom)
+        return gradientFrom;
+      return "rgb(168 85 247)";
+    }
+  }, [theme, gradientFrom, darkGradientFrom]);
+  const defaultGradientTo = useMemo(() => {
+    if (theme === "dark") {
+      if (darkGradientTo)
+        return darkGradientTo;
+      if (gradientTo)
+        return gradientTo;
+      return "rgb(59 130 246)";
+    } else {
+      if (gradientTo)
+        return gradientTo;
+      return "rgb(96 165 250)";
+    }
+  }, [theme, gradientTo, darkGradientTo]);
   useEffect(() => {
     if (!parallax || !containerRef.current)
       return;
@@ -87051,23 +87105,23 @@ var GridPatternInternal = ({
     switch (gradientDirection) {
       case "horizontal":
         return /* @__PURE__ */ jsxs("linearGradient", { ...gradientProps, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: gradientFrom }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientTo })
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: defaultGradientFrom }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: defaultGradientTo })
         ] });
       case "vertical":
         return /* @__PURE__ */ jsxs("linearGradient", { ...gradientProps, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: gradientFrom }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientTo })
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: defaultGradientFrom }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: defaultGradientTo })
         ] });
       case "radial":
         return /* @__PURE__ */ jsxs("radialGradient", { ...gradientProps, cx: "50%", cy: "50%", r: "50%", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: gradientFrom }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientTo })
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: defaultGradientFrom }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: defaultGradientTo })
         ] });
       default:
         return /* @__PURE__ */ jsxs("linearGradient", { ...gradientProps, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: gradientFrom }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientTo })
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: defaultGradientFrom }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: defaultGradientTo })
         ] });
     }
   };
@@ -87111,7 +87165,7 @@ var GridPatternInternal = ({
   };
   const renderPattern = () => {
     const baseProps = {
-      stroke: gradient ? `url(#${gradientId})` : strokeColor,
+      stroke: gradient ? `url(#${gradientId})` : defaultStrokeColor,
       strokeWidth,
       strokeDasharray,
       fill: "none"
@@ -87124,7 +87178,7 @@ var GridPatternInternal = ({
             cx: width / 2,
             cy: height / 2,
             r: Math.max(strokeWidth, 1),
-            fill: gradient ? `url(#${gradientId})` : strokeColor,
+            fill: gradient ? `url(#${gradientId})` : defaultStrokeColor,
             strokeWidth: 0
           }
         );
@@ -87240,8 +87294,8 @@ var GridPatternInternal = ({
                   y: squareY * height + y,
                   width,
                   height,
-                  fill: gradient ? `url(#${gradientId})` : strokeColor,
-                  opacity: maxOpacity,
+                  fill: gradient ? `url(#${gradientId})` : defaultStrokeColor,
+                  opacity: defaultMaxOpacity,
                   style: {
                     animation: animationType === "fade" ? `grid-square-fade ${duration}ms ease-in-out infinite ${index2 * 100}ms` : void 0
                   }
@@ -87254,7 +87308,7 @@ var GridPatternInternal = ({
         animationType === "fade" && squares.length > 0 && /* @__PURE__ */ jsx("style", { children: `
           @keyframes grid-square-fade {
             0%, 20% { opacity: 0; }
-            50% { opacity: ${maxOpacity}; }
+            50% { opacity: ${defaultMaxOpacity}; }
             80%, 100% { opacity: 0; }
           }
         ` }),
@@ -87833,20 +87887,23 @@ var ParticlesInternal = ({
   className,
   count: count3 = 50,
   size: size4 = { min: 1, max: 3 },
-  colors = ["#ffffff", "#00d4ff", "#ff00ff", "#ffff00"],
+  colors,
+  darkColors,
   speed = 0.5,
   interactive = true,
   mouseRadius = 100,
   connectDistance = 100,
   showConnections = true,
   lineWidth = 0.5,
-  lineOpacity = 0.2,
+  lineOpacity,
+  darkLineOpacity,
   shape = "circle",
   parallax = false,
   parallaxFactor = 0.5,
   fps = 60,
   performanceMode = false,
-  backgroundColor = "transparent",
+  backgroundColor,
+  darkBackgroundColor,
   blur: blur2 = 0,
   containerClassName,
   glow = true,
@@ -87857,6 +87914,7 @@ var ParticlesInternal = ({
   opacity = { min: 0.3, max: 1 },
   pauseWhenHidden = false
 }) => {
+  const { theme } = useTheme();
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   const animationRef = useRef(void 0);
@@ -87866,6 +87924,45 @@ var ParticlesInternal = ({
   const frameInterval = 1e3 / fps;
   const [isVisible, setIsVisible] = useState(true);
   const observerTimeoutRef = useRef(null);
+  const defaultColors2 = useMemo(() => {
+    if (theme === "dark") {
+      if (darkColors)
+        return darkColors;
+      if (colors)
+        return colors;
+      return ["#8b5cf6", "#ec4899", "#3b82f6", "#10b981"];
+    } else {
+      if (colors)
+        return colors;
+      return ["#a855f7", "#f472b6", "#60a5fa", "#34d399"];
+    }
+  }, [theme, colors, darkColors]);
+  const defaultBg = useMemo(() => {
+    if (theme === "dark") {
+      if (darkBackgroundColor)
+        return darkBackgroundColor;
+      if (backgroundColor)
+        return backgroundColor;
+      return "transparent";
+    } else {
+      if (backgroundColor)
+        return backgroundColor;
+      return "transparent";
+    }
+  }, [theme, backgroundColor, darkBackgroundColor]);
+  const defaultLineOpacity = useMemo(() => {
+    if (theme === "dark") {
+      if (darkLineOpacity !== void 0)
+        return darkLineOpacity;
+      if (lineOpacity !== void 0)
+        return lineOpacity;
+      return 0.4;
+    } else {
+      if (lineOpacity !== void 0)
+        return lineOpacity;
+      return 0.2;
+    }
+  }, [theme, lineOpacity, darkLineOpacity]);
   const drawParticle = useCallback((ctx, particle) => {
     ctx.save();
     ctx.translate(particle.x, particle.y);
@@ -87994,7 +88091,7 @@ var ParticlesInternal = ({
         const dy = particles[i].y - particles[j].y;
         const distance = Math.sqrt(dx * dx + dy * dy);
         if (distance < connectDistance) {
-          const opacity2 = (1 - distance / connectDistance) * lineOpacity;
+          const opacity2 = (1 - distance / connectDistance) * defaultLineOpacity;
           ctx.strokeStyle = `rgba(255, 255, 255, ${opacity2})`;
           ctx.lineWidth = lineWidth;
           ctx.beginPath();
@@ -88004,7 +88101,7 @@ var ParticlesInternal = ({
         }
       }
     }
-  }, [connectDistance, lineOpacity, lineWidth]);
+  }, [connectDistance, defaultLineOpacity, lineWidth]);
   const animate4 = useCallback((currentTime) => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d", {
@@ -88051,7 +88148,7 @@ var ParticlesInternal = ({
         vx: (Math.random() - 0.5) * speed,
         vy: (Math.random() - 0.5) * speed,
         size: Math.random() * (size4.max - size4.min) + size4.min,
-        color: colors[Math.floor(Math.random() * colors.length)],
+        color: defaultColors2[Math.floor(Math.random() * defaultColors2.length)],
         opacity: Math.random() * (opacity.max - opacity.min) + opacity.min,
         angle: Math.random() * Math.PI * 2,
         rotationSpeed: (Math.random() - 0.5) * 0.02,
@@ -88061,7 +88158,7 @@ var ParticlesInternal = ({
       newParticles.push(particle);
     }
     particlesRef.current = newParticles;
-  }, [count3, size4, colors, speed, opacity]);
+  }, [count3, size4, defaultColors2, speed, opacity]);
   const handleMouseMove2 = useCallback((e) => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -88117,7 +88214,7 @@ var ParticlesInternal = ({
           vx: (Math.random() - 0.5) * speed,
           vy: (Math.random() - 0.5) * speed,
           size: Math.random() * (size4.max - size4.min) + size4.min,
-          color: colors[Math.floor(Math.random() * colors.length)],
+          color: defaultColors2[Math.floor(Math.random() * defaultColors2.length)],
           opacity: Math.random() * (opacity.max - opacity.min) + opacity.min,
           angle: Math.random() * Math.PI * 2,
           rotationSpeed: (Math.random() - 0.5) * 0.02,
@@ -88140,7 +88237,7 @@ var ParticlesInternal = ({
         cancelAnimationFrame(animationRef.current);
       }
     };
-  }, [handleResize, handleMouseMove2, animate4, interactive, count3, size4, colors, speed, opacity]);
+  }, [handleResize, handleMouseMove2, animate4, interactive, count3, size4, defaultColors2, speed, opacity]);
   const canvasStyle = useMemo(() => ({
     willChange: "transform",
     transform: "translate3d(0, 0, 0)",
@@ -88157,7 +88254,7 @@ var ParticlesInternal = ({
         containerClassName
       ),
       style: {
-        backgroundColor
+        backgroundColor: defaultBg
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -88196,9 +88293,11 @@ var StarfieldInternal = ({
   className,
   fullWidth = false,
   starCount = 500,
-  starColor = "#ffffff",
+  starColor,
+  darkStarColor,
   speed = 1,
-  backgroundColor = "#000000",
+  backgroundColor,
+  darkBackgroundColor,
   mouseParallax = true,
   parallaxIntensity = 0.5,
   starSize = { min: 0.5, max: 2 },
@@ -88215,10 +88314,12 @@ var StarfieldInternal = ({
   trails = false,
   trailLength = 5,
   nebula = false,
-  nebulaColors = ["#ff00ff20", "#00ffff20", "#ffff0020"],
+  nebulaColors,
+  darkNebulaColors,
   direction = "forward",
   spiralSpeed = 1e-3
 }) => {
+  const { theme } = useTheme();
   const canvasRef = useRef(null);
   const animationRef = useRef(void 0);
   const starsRef = useRef([]);
@@ -88234,7 +88335,46 @@ var StarfieldInternal = ({
   const [isVisible, setIsVisible] = useState(true);
   const observerTimeoutRef = useRef(null);
   const containerRef = useRef(null);
-  const starColors = Array.isArray(starColor) ? starColor : [starColor];
+  const defaultStarColor = useMemo(() => {
+    if (theme === "dark") {
+      if (darkStarColor)
+        return darkStarColor;
+      if (starColor)
+        return starColor;
+      return "#ffffff";
+    } else {
+      if (starColor)
+        return starColor;
+      return "#1f2937";
+    }
+  }, [theme, starColor, darkStarColor]);
+  const defaultBg = useMemo(() => {
+    if (theme === "dark") {
+      if (darkBackgroundColor)
+        return darkBackgroundColor;
+      if (backgroundColor)
+        return backgroundColor;
+      return "#000000";
+    } else {
+      if (backgroundColor)
+        return backgroundColor;
+      return "#f9fafb";
+    }
+  }, [theme, backgroundColor, darkBackgroundColor]);
+  const defaultNebulaColors = useMemo(() => {
+    if (theme === "dark") {
+      if (darkNebulaColors)
+        return darkNebulaColors;
+      if (nebulaColors)
+        return nebulaColors;
+      return ["#ff00ff20", "#00ffff20", "#ffff0020"];
+    } else {
+      if (nebulaColors)
+        return nebulaColors;
+      return ["#db278610", "#06b6d410", "#eab30810"];
+    }
+  }, [theme, nebulaColors, darkNebulaColors]);
+  const starColors = Array.isArray(defaultStarColor) ? defaultStarColor : [defaultStarColor];
   const initializeShootingStars = useCallback(() => {
     const shootingStars2 = [];
     for (let i = 0; i < 5; i++) {
@@ -88399,7 +88539,7 @@ var StarfieldInternal = ({
     }
   };
   const drawNebula = (ctx, canvas) => {
-    nebulaColors.forEach((color, i) => {
+    defaultNebulaColors.forEach((color, i) => {
       const gradient = ctx.createRadialGradient(
         canvas.width / 2 + Math.sin(Date.now() * 1e-4 + i) * 100,
         canvas.height / 2 + Math.cos(Date.now() * 1e-4 + i) * 100,
@@ -88433,7 +88573,7 @@ var StarfieldInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime - deltaTime % frameInterval;
-    ctx.fillStyle = backgroundColor;
+    ctx.fillStyle = defaultBg;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     if (nebula) {
       drawNebula(ctx, canvas);
@@ -88457,7 +88597,7 @@ var StarfieldInternal = ({
     }
     animationRef.current = requestAnimationFrame(animate4);
   }, [
-    backgroundColor,
+    defaultBg,
     frameInterval,
     speed,
     warpSpeed,
@@ -88468,7 +88608,7 @@ var StarfieldInternal = ({
     depthBlur,
     trails,
     nebula,
-    nebulaColors,
+    defaultNebulaColors,
     shootingStars,
     direction,
     spiralSpeed,
@@ -88649,8 +88789,10 @@ var DotPatternInternal = ({
   containerClassName,
   dotSize = 4,
   gap = 20,
-  color = "#ffffff",
-  opacity = 0.3,
+  color,
+  darkColor,
+  opacity,
+  darkOpacity,
   animated = false,
   animationType = "pulse",
   animationDuration = 3,
@@ -88661,7 +88803,8 @@ var DotPatternInternal = ({
   gradientDirection = "radial",
   gradientAngle = 45,
   blur: blur2 = 0,
-  backgroundColor = "transparent",
+  backgroundColor,
+  darkBackgroundColor,
   maskFade = false,
   maskFadeDirection = "bottom",
   parallax = false,
@@ -88669,9 +88812,49 @@ var DotPatternInternal = ({
   density = 1,
   responsive = true
 }) => {
+  const { theme } = useTheme();
   const containerRef = useRef(null);
   const patternRef = useRef(null);
   const mouseRef = useRef({ x: 0, y: 0 });
+  const defaultColor = useMemo(() => {
+    if (theme === "dark") {
+      if (darkColor)
+        return darkColor;
+      if (color)
+        return color;
+      return "#ffffff";
+    } else {
+      if (color)
+        return color;
+      return "#1f2937";
+    }
+  }, [theme, color, darkColor]);
+  const defaultOpacity = useMemo(() => {
+    if (theme === "dark") {
+      if (darkOpacity !== void 0)
+        return darkOpacity;
+      if (opacity !== void 0)
+        return opacity;
+      return 0.4;
+    } else {
+      if (opacity !== void 0)
+        return opacity;
+      return 0.25;
+    }
+  }, [theme, opacity, darkOpacity]);
+  const defaultBg = useMemo(() => {
+    if (theme === "dark") {
+      if (darkBackgroundColor)
+        return darkBackgroundColor;
+      if (backgroundColor)
+        return backgroundColor;
+      return "transparent";
+    } else {
+      if (backgroundColor)
+        return backgroundColor;
+      return "transparent";
+    }
+  }, [theme, backgroundColor, darkBackgroundColor]);
   const responsiveDotSize = dotSize * 0.4;
   useMemo(
     () => `dot-pattern-${Math.random().toString(36).substr(2, 9)}`,
@@ -88758,17 +88941,17 @@ var DotPatternInternal = ({
           if (distance < hoverRadius) {
             const scale = 1 + (1 - distance / hoverRadius) * 2;
             dot.setAttribute("transform", `scale(${scale})`);
-            dot.style.opacity = String(Math.min(1, opacity + (1 - distance / hoverRadius) * 0.5));
+            dot.style.opacity = String(Math.min(1, defaultOpacity + (1 - distance / hoverRadius) * 0.5));
           } else {
             dot.setAttribute("transform", "scale(1)");
-            dot.style.opacity = String(opacity);
+            dot.style.opacity = String(defaultOpacity);
           }
         });
       }
     };
     window.addEventListener("mousemove", handleMouseMove2);
     return () => window.removeEventListener("mousemove", handleMouseMove2);
-  }, [hoverEffect, hoverRadius, opacity]);
+  }, [hoverEffect, hoverRadius, defaultOpacity]);
   useEffect(() => {
     if (!parallax || !containerRef.current)
       return;
@@ -88810,7 +88993,7 @@ var DotPatternInternal = ({
         return "";
     }
   };
-  const processedColors = Array.isArray(color) ? color : [color];
+  const processedColors = Array.isArray(defaultColor) ? defaultColor : [defaultColor];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -88820,7 +89003,7 @@ var DotPatternInternal = ({
         containerClassName
       ),
       style: {
-        backgroundColor
+        backgroundColor: defaultBg
       },
       children: [
         /* @__PURE__ */ jsxs(
@@ -88953,7 +89136,7 @@ var DotPatternInternal = ({
                   cy: dot.y,
                   r: responsiveDotSize,
                   fill: gradient ? `url(#${gradientId})` : processedColors[0],
-                  opacity,
+                  opacity: defaultOpacity,
                   style: {
                     transformOrigin: `${dot.x} ${dot.y}`,
                     transition: hoverEffect ? "all 0.3s ease" : void 0,
@@ -88972,8 +89155,8 @@ var DotPatternInternal = ({
         }
 
         @keyframes dot-pattern-fade {
-          0%, 100% { opacity: ${opacity}; }
-          50% { opacity: ${opacity * 0.3}; }
+          0%, 100% { opacity: ${defaultOpacity}; }
+          50% { opacity: ${defaultOpacity * 0.3}; }
         }
 
         @keyframes dot-pattern-scale {
@@ -89402,12 +89585,15 @@ var WavesInternal = ({
   className,
   containerClassName,
   layers = 3,
-  colors = ["#0066cc", "#0052a3", "#003d7a"],
+  colors,
+  darkColors,
   amplitude = 50,
   frequency = 2,
   speed = 0.5,
-  opacity = 0.5,
-  backgroundColor = "transparent",
+  opacity,
+  darkOpacity,
+  backgroundColor,
+  darkBackgroundColor,
   waveStyle = "smooth",
   parallax = true,
   parallaxIntensity = 0.5,
@@ -89421,6 +89607,7 @@ var WavesInternal = ({
   fps = 60,
   pauseWhenHidden = false
 }) => {
+  const { theme } = useTheme();
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   const animationRef = useRef(void 0);
@@ -89431,6 +89618,45 @@ var WavesInternal = ({
   const frameInterval = 1e3 / fps;
   const [isVisible, setIsVisible] = useState(true);
   const observerTimeoutRef = useRef(null);
+  const defaultColors2 = useMemo(() => {
+    if (theme === "dark") {
+      if (darkColors)
+        return darkColors;
+      if (colors)
+        return colors;
+      return ["#8b5cf6", "#ec4899", "#3b82f6"];
+    } else {
+      if (colors)
+        return colors;
+      return ["#a855f7", "#f472b6", "#60a5fa"];
+    }
+  }, [theme, colors, darkColors]);
+  const defaultOpacity = useMemo(() => {
+    if (theme === "dark") {
+      if (darkOpacity !== void 0)
+        return darkOpacity;
+      if (opacity !== void 0)
+        return opacity;
+      return 0.6;
+    } else {
+      if (opacity !== void 0)
+        return opacity;
+      return 0.4;
+    }
+  }, [theme, opacity, darkOpacity]);
+  const defaultBg = useMemo(() => {
+    if (theme === "dark") {
+      if (darkBackgroundColor)
+        return darkBackgroundColor;
+      if (backgroundColor)
+        return backgroundColor;
+      return "transparent";
+    } else {
+      if (backgroundColor)
+        return backgroundColor;
+      return "transparent";
+    }
+  }, [theme, backgroundColor, darkBackgroundColor]);
   const initializeWaves = useCallback(() => {
     const waveLayers = [];
     for (let i = 0; i < layers; i++) {
@@ -89440,11 +89666,11 @@ var WavesInternal = ({
         frequency: frequency * (1 + layerIndex * 0.2),
         speed: speed * (1 - layerIndex * (parallax ? parallaxIntensity * 0.5 : 0)),
         phase: Math.PI * 2 * i / layers,
-        color: colors[i % colors.length]
+        color: defaultColors2[i % defaultColors2.length]
       });
     }
     waveLayersRef.current = waveLayers;
-  }, [layers, amplitude, frequency, speed, parallax, parallaxIntensity, colors]);
+  }, [layers, amplitude, frequency, speed, parallax, parallaxIntensity, defaultColors2]);
   const calculateWavePoint = (x, layer, time, mouseEffect = 0) => {
     let y = 0;
     switch (waveStyle) {
@@ -89502,10 +89728,10 @@ var WavesInternal = ({
         const rgbaMatch = layer.color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
         if (rgbaMatch) {
           colorBase = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
-          colorWithAlpha = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${opacity})`;
+          colorWithAlpha = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${defaultOpacity})`;
         }
       } else if (layer.color.startsWith("#")) {
-        const alphaHex = Math.floor(opacity * 255).toString(16).padStart(2, "0");
+        const alphaHex = Math.floor(defaultOpacity * 255).toString(16).padStart(2, "0");
         colorBase = layer.color + "00";
         colorWithAlpha = layer.color + alphaHex;
       } else {
@@ -89518,7 +89744,7 @@ var WavesInternal = ({
       ctx.fillStyle = grad;
     } else {
       ctx.fillStyle = layer.color;
-      ctx.globalAlpha = opacity * (1 - index2 * 0.2 / layers);
+      ctx.globalAlpha = defaultOpacity * (1 - index2 * 0.2 / layers);
     }
     ctx.beginPath();
     if (direction === "vertical") {
@@ -89679,7 +89905,7 @@ var WavesInternal = ({
         containerClassName
       ),
       style: {
-        backgroundColor
+        backgroundColor: defaultBg
       },
       children: [
         /* @__PURE__ */ jsx(

package/package.json

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