@moontra/moonui-pro 3.4.33 → 3.4.35

package/dist/index.d.ts

@@ -5277,8 +5277,10 @@ interface MeteorsProps {
     containerClassName?: string;
     /** Number of meteors */
     number?: number;
-    /** Meteor color */
+    /** Meteor color for light mode */
     color?: string;
+    /** Meteor color for dark mode */
+    darkColor?: string;
     /** Animation duration range (seconds) */
     duration?: {
         min: number;
@@ -5327,12 +5329,18 @@ interface AuroraBackgroundProps {
     className?: string;
     /** Container CSS classes */
     containerClassName?: string;
-    /** Aurora gradient colors (hex or rgb) */
+    /** Aurora gradient colors for light mode (hex or rgb) */
     colors?: {
         primary?: string;
         secondary?: string;
         tertiary?: string;
     };
+    /** Aurora gradient colors for dark mode (hex or rgb) */
+    darkColors?: {
+        primary?: string;
+        secondary?: string;
+        tertiary?: string;
+    };
     /** Animation speed */
     speed?: 'slow' | 'normal' | 'fast';
     /** Background opacity (0-1) */

package/dist/index.mjs

@@ -87501,7 +87501,8 @@ var MeteorsInternal = ({
   className,
   containerClassName,
   number = 20,
-  color = "#ffffff",
+  color,
+  darkColor,
   duration = { min: 3, max: 7 },
   size: size4 = { min: 0.5, max: 1 },
   speed = "medium",
@@ -87513,6 +87514,18 @@ var MeteorsInternal = ({
   glow = true,
   glowSize = 10
 }) => {
+  const { theme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const currentTheme = mounted ? resolvedTheme || theme || "dark" : "dark";
+  const defaultDarkColor = "#ffffff";
+  const defaultLightColor = "#000000";
+  const finalColor = currentTheme === "dark" ? darkColor || color || defaultDarkColor : color || defaultLightColor;
+  if (!mounted) {
+    return null;
+  }
   const meteors = new Array(number).fill(true);
   const speedMultiplier = speed === "slow" ? 2 : speed === "fast" ? 0.5 : 1;
   const random = (min2, max2) => {
@@ -87554,11 +87567,11 @@ var MeteorsInternal = ({
                 top: `${initialTop}%`,
                 width: `${tailLength}px`,
                 height: `${meteorSize * 2}px`,
-                background: `linear-gradient(to right, ${color}, transparent)`,
+                background: `linear-gradient(to right, ${finalColor}, transparent)`,
                 transform: `rotate(${rotation}deg)`,
                 animation: `meteor ${animationDuration}s linear ${animationDelay}s infinite`,
                 opacity: meteorOpacity,
-                filter: glow ? `drop-shadow(0 0 ${glowSize}px ${color})` : void 0
+                filter: glow ? `drop-shadow(0 0 ${glowSize}px ${finalColor})` : void 0
               },
               children: /* @__PURE__ */ jsx(
                 "span",
@@ -87569,8 +87582,8 @@ var MeteorsInternal = ({
                     height: `${meteorSize * 4}px`,
                     borderRadius: "50%",
                     marginTop: `-${meteorSize}px`,
-                    background: color,
-                    boxShadow: glow ? `0 0 ${glowSize}px ${meteorSize}px ${color}33` : void 0
+                    background: finalColor,
+                    boxShadow: glow ? `0 0 ${glowSize}px ${meteorSize}px ${finalColor}33` : void 0
                   }
                 }
               )
@@ -87604,11 +87617,8 @@ var AuroraBackgroundInternal = ({
   children,
   className,
   containerClassName,
-  colors = {
-    primary: "#3b82f6",
-    secondary: "#8b5cf6",
-    tertiary: "#06b6d4"
-  },
+  colors,
+  darkColors,
   speed = "normal",
   opacity = 0.5,
   blur: blur2 = 80,
@@ -87619,10 +87629,44 @@ var AuroraBackgroundInternal = ({
   fixed = false,
   pauseWhenHidden = false
 }) => {
+  const { theme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
   const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
   const [isVisible, setIsVisible] = useState(true);
   const containerRef = useRef(null);
   const observerTimeoutRef = useRef(null);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const currentTheme = mounted ? resolvedTheme || theme || "dark" : "dark";
+  const themeDefaultColors = useMemo(() => {
+    if (currentTheme === "dark") {
+      return {
+        primary: "#6B46C1",
+        // Deep vibrant purple (darker, more saturated)
+        secondary: "#4C7FE0",
+        // Deep vibrant blue (darker, more saturated)
+        tertiary: "#0891B2"
+        // Deep vibrant cyan (darker, more saturated)
+      };
+    } else {
+      return {
+        primary: "#3D2680",
+        // Moontra dark purple
+        secondary: "#5B3FA0",
+        // Moontra medium purple
+        tertiary: "#00ACC1"
+        // Moontra cyan
+      };
+    }
+  }, [currentTheme]);
+  const finalColors = useMemo(() => {
+    if (currentTheme === "dark") {
+      return darkColors || colors || themeDefaultColors;
+    } else {
+      return colors || themeDefaultColors;
+    }
+  }, [currentTheme, colors, darkColors, themeDefaultColors]);
   const duration = useMemo(() => {
     switch (speed) {
       case "slow":
@@ -87637,26 +87681,26 @@ var AuroraBackgroundInternal = ({
     switch (variant) {
       case "subtle":
         return {
-          primary: colors.primary || "#94a3b8",
-          secondary: colors.secondary || "#cbd5e1",
-          tertiary: colors.tertiary || "#e2e8f0"
+          primary: finalColors.primary || "#94a3b8",
+          secondary: finalColors.secondary || "#cbd5e1",
+          tertiary: finalColors.tertiary || "#e2e8f0"
         };
       case "vibrant":
         return {
-          primary: colors.primary || "#f97316",
-          secondary: colors.secondary || "#ec4899",
-          tertiary: colors.tertiary || "#8b5cf6"
+          primary: finalColors.primary || "#f97316",
+          secondary: finalColors.secondary || "#ec4899",
+          tertiary: finalColors.tertiary || "#8b5cf6"
         };
       case "dark":
         return {
-          primary: colors.primary || "#1e293b",
-          secondary: colors.secondary || "#334155",
-          tertiary: colors.tertiary || "#475569"
+          primary: finalColors.primary || "#1e293b",
+          secondary: finalColors.secondary || "#334155",
+          tertiary: finalColors.tertiary || "#475569"
         };
       default:
-        return colors;
+        return finalColors;
     }
-  }, [variant, colors]);
+  }, [variant, finalColors]);
   const handleMouseMove2 = useCallback((e) => {
     if (!interactive)
       return;
@@ -87728,6 +87772,9 @@ var AuroraBackgroundInternal = ({
     filter: `blur(${blur2 * 0.5}px)`,
     mixBlendMode: "overlay"
   }), [blur2]);
+  if (!mounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/package.json

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