@moontra/moonui-pro 3.4.32 → 3.4.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cdn/index.global.js +180 -180
  2. package/dist/cdn/index.global.js.map +1 -1
  3. package/dist/index.mjs +117 -166
  4. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -79593,29 +79593,16 @@ function NavbarInternal({
79593
79593
  },
79594
79594
  className: "flex items-center gap-2",
79595
79595
  children: [
79596
- /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
79597
- motion.div,
79598
- {
79599
- initial: {
79600
- opacity: 0,
79601
- scale: 0.9
79602
- },
79603
- animate: {
79604
- opacity: 1,
79605
- scale: 1
79606
- },
79607
- exit: {
79608
- opacity: 0,
79609
- scale: 0.9
79610
- },
79611
- transition: {
79612
- duration: 0.2,
79613
- ease: "easeInOut"
79614
- },
79615
- children: getActiveLogo()
79616
- },
79617
- `logo-${framerScroll.isScrolled ? "scrolled" : "default"}-${isDarkMode ? "dark" : "light"}`
79618
- ) }),
79596
+ framerScroll.isScrolled && branding.logoSmall ? (
79597
+ // Show small logo when scrolled
79598
+ /* @__PURE__ */ jsx("div", { className: "transition-all duration-200", children: branding.logoSmall })
79599
+ ) : (
79600
+ // Show theme-based logos when not scrolled
79601
+ /* @__PURE__ */ jsxs(Fragment, { children: [
79602
+ /* @__PURE__ */ jsx("div", { className: "dark:hidden transition-all duration-200", children: branding.logoLight || branding.logo }),
79603
+ /* @__PURE__ */ jsx("div", { className: "hidden dark:block transition-all duration-200", children: branding.logoDark || branding.logo })
79604
+ ] })
79605
+ ),
79619
79606
  /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: branding.title && !isMobile && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
79620
79607
  motion.span,
79621
79608
  {
@@ -79790,7 +79777,7 @@ function NavbarInternal({
79790
79777
  {
79791
79778
  whileTap: { scale: 0.95 },
79792
79779
  className: "relative",
79793
- children: /* @__PURE__ */ jsx(
79780
+ children: /* @__PURE__ */ jsxs(
79794
79781
  MoonUIButtonPro,
79795
79782
  {
79796
79783
  variant: "ghost",
@@ -79800,63 +79787,27 @@ function NavbarInternal({
79800
79787
  setTheme(newTheme);
79801
79788
  onThemeChange?.(newTheme);
79802
79789
  },
79803
- className: "relative overflow-hidden",
79804
- children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: currentTheme === "dark" ? /* @__PURE__ */ jsx(
79805
- motion.div,
79806
- {
79807
- initial: {
79808
- y: -20,
79809
- opacity: 0
79810
- },
79811
- animate: {
79812
- y: 0,
79813
- opacity: 1
79814
- },
79815
- exit: {
79816
- y: 20,
79817
- opacity: 0
79818
- },
79819
- transition: {
79820
- duration: 0.2
79821
- },
79822
- children: /* @__PURE__ */ jsx(
79823
- Moon,
79824
- {
79825
- className: getSizeClasses().iconSize
79826
- }
79827
- )
79828
- },
79829
- "moon"
79830
- ) : /* @__PURE__ */ jsx(
79831
- motion.div,
79832
- {
79833
- initial: {
79834
- y: -20,
79835
- opacity: 0,
79836
- rotate: -90
79837
- },
79838
- animate: {
79839
- y: 0,
79840
- opacity: 1,
79841
- rotate: 0
79842
- },
79843
- exit: {
79844
- y: 20,
79845
- opacity: 0,
79846
- rotate: 90
79847
- },
79848
- transition: {
79849
- duration: 0.2
79850
- },
79851
- children: /* @__PURE__ */ jsx(
79852
- Sun,
79853
- {
79854
- className: getSizeClasses().iconSize
79855
- }
79856
- )
79857
- },
79858
- "sun"
79859
- ) })
79790
+ className: "relative",
79791
+ children: [
79792
+ /* @__PURE__ */ jsx(
79793
+ Sun,
79794
+ {
79795
+ className: cn(
79796
+ getSizeClasses().iconSize,
79797
+ "dark:hidden transition-all duration-200"
79798
+ )
79799
+ }
79800
+ ),
79801
+ /* @__PURE__ */ jsx(
79802
+ Moon,
79803
+ {
79804
+ className: cn(
79805
+ getSizeClasses().iconSize,
79806
+ "hidden dark:block transition-all duration-200"
79807
+ )
79808
+ }
79809
+ )
79810
+ ]
79860
79811
  }
79861
79812
  )
79862
79813
  }
@@ -79867,9 +79818,8 @@ function NavbarInternal({
79867
79818
  variant: "ghost",
79868
79819
  size: "icon",
79869
79820
  children: [
79870
- currentTheme === "light" && /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5" }),
79871
- currentTheme === "dark" && /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5" }),
79872
- currentTheme === "system" && /* @__PURE__ */ jsx(Monitor, { className: "h-5 w-5" })
79821
+ /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5 dark:hidden" }),
79822
+ /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5 hidden dark:block" })
79873
79823
  ]
79874
79824
  }
79875
79825
  ) }),
@@ -80350,7 +80300,7 @@ function NavbarInternal({
80350
80300
  {
80351
80301
  whileTap: { scale: 0.95 },
80352
80302
  className: "relative",
80353
- children: /* @__PURE__ */ jsx(
80303
+ children: /* @__PURE__ */ jsxs(
80354
80304
  MoonUIButtonPro,
80355
80305
  {
80356
80306
  variant: "ghost",
@@ -80360,71 +80310,34 @@ function NavbarInternal({
80360
80310
  setTheme(newTheme);
80361
80311
  onThemeChange?.(newTheme);
80362
80312
  },
80363
- className: "relative overflow-hidden",
80364
- children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: currentTheme === "dark" ? /* @__PURE__ */ jsx(
80365
- motion.div,
80366
- {
80367
- initial: {
80368
- y: -20,
80369
- opacity: 0
80370
- },
80371
- animate: {
80372
- y: 0,
80373
- opacity: 1
80374
- },
80375
- exit: {
80376
- y: 20,
80377
- opacity: 0
80378
- },
80379
- transition: {
80380
- duration: 0.2
80381
- },
80382
- children: /* @__PURE__ */ jsx(
80383
- Moon,
80384
- {
80385
- className: getSizeClasses().iconSize
80386
- }
80387
- )
80388
- },
80389
- "moon"
80390
- ) : /* @__PURE__ */ jsx(
80391
- motion.div,
80392
- {
80393
- initial: {
80394
- y: -20,
80395
- opacity: 0,
80396
- rotate: -90
80397
- },
80398
- animate: {
80399
- y: 0,
80400
- opacity: 1,
80401
- rotate: 0
80402
- },
80403
- exit: {
80404
- y: 20,
80405
- opacity: 0,
80406
- rotate: 90
80407
- },
80408
- transition: {
80409
- duration: 0.2
80410
- },
80411
- children: /* @__PURE__ */ jsx(
80412
- Sun,
80413
- {
80414
- className: getSizeClasses().iconSize
80415
- }
80416
- )
80417
- },
80418
- "sun"
80419
- ) })
80313
+ className: "relative",
80314
+ children: [
80315
+ /* @__PURE__ */ jsx(
80316
+ Sun,
80317
+ {
80318
+ className: cn(
80319
+ getSizeClasses().iconSize,
80320
+ "dark:hidden transition-all duration-200"
80321
+ )
80322
+ }
80323
+ ),
80324
+ /* @__PURE__ */ jsx(
80325
+ Moon,
80326
+ {
80327
+ className: cn(
80328
+ getSizeClasses().iconSize,
80329
+ "hidden dark:block transition-all duration-200"
80330
+ )
80331
+ }
80332
+ )
80333
+ ]
80420
80334
  }
80421
80335
  )
80422
80336
  }
80423
80337
  ) : /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
80424
80338
  /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "icon", children: [
80425
- currentTheme === "light" && /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5" }),
80426
- currentTheme === "dark" && /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5" }),
80427
- currentTheme === "system" && /* @__PURE__ */ jsx(Monitor, { className: "h-5 w-5" })
80339
+ /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5 dark:hidden" }),
80340
+ /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5 hidden dark:block" })
80428
80341
  ] }) }),
80429
80342
  /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
80430
80343
  /* @__PURE__ */ jsxs(
@@ -87588,7 +87501,7 @@ var MeteorsInternal = ({
87588
87501
  className,
87589
87502
  containerClassName,
87590
87503
  number = 20,
87591
- color = "#ffffff",
87504
+ color,
87592
87505
  duration = { min: 3, max: 7 },
87593
87506
  size: size4 = { min: 0.5, max: 1 },
87594
87507
  speed = "medium",
@@ -87600,6 +87513,17 @@ var MeteorsInternal = ({
87600
87513
  glow = true,
87601
87514
  glowSize = 10
87602
87515
  }) => {
87516
+ const { theme, resolvedTheme } = useTheme();
87517
+ const [mounted, setMounted] = useState(false);
87518
+ useEffect(() => {
87519
+ setMounted(true);
87520
+ }, []);
87521
+ const currentTheme = mounted ? resolvedTheme || theme || "dark" : "dark";
87522
+ const defaultColor = currentTheme === "dark" ? "#ffffff" : "#000000";
87523
+ const finalColor = color || defaultColor;
87524
+ if (!mounted) {
87525
+ return null;
87526
+ }
87603
87527
  const meteors = new Array(number).fill(true);
87604
87528
  const speedMultiplier = speed === "slow" ? 2 : speed === "fast" ? 0.5 : 1;
87605
87529
  const random = (min2, max2) => {
@@ -87641,11 +87565,11 @@ var MeteorsInternal = ({
87641
87565
  top: `${initialTop}%`,
87642
87566
  width: `${tailLength}px`,
87643
87567
  height: `${meteorSize * 2}px`,
87644
- background: `linear-gradient(to right, ${color}, transparent)`,
87568
+ background: `linear-gradient(to right, ${finalColor}, transparent)`,
87645
87569
  transform: `rotate(${rotation}deg)`,
87646
87570
  animation: `meteor ${animationDuration}s linear ${animationDelay}s infinite`,
87647
87571
  opacity: meteorOpacity,
87648
- filter: glow ? `drop-shadow(0 0 ${glowSize}px ${color})` : void 0
87572
+ filter: glow ? `drop-shadow(0 0 ${glowSize}px ${finalColor})` : void 0
87649
87573
  },
87650
87574
  children: /* @__PURE__ */ jsx(
87651
87575
  "span",
@@ -87656,8 +87580,8 @@ var MeteorsInternal = ({
87656
87580
  height: `${meteorSize * 4}px`,
87657
87581
  borderRadius: "50%",
87658
87582
  marginTop: `-${meteorSize}px`,
87659
- background: color,
87660
- boxShadow: glow ? `0 0 ${glowSize}px ${meteorSize}px ${color}33` : void 0
87583
+ background: finalColor,
87584
+ boxShadow: glow ? `0 0 ${glowSize}px ${meteorSize}px ${finalColor}33` : void 0
87661
87585
  }
87662
87586
  }
87663
87587
  )
@@ -87691,11 +87615,7 @@ var AuroraBackgroundInternal = ({
87691
87615
  children,
87692
87616
  className,
87693
87617
  containerClassName,
87694
- colors = {
87695
- primary: "#3b82f6",
87696
- secondary: "#8b5cf6",
87697
- tertiary: "#06b6d4"
87698
- },
87618
+ colors,
87699
87619
  speed = "normal",
87700
87620
  opacity = 0.5,
87701
87621
  blur: blur2 = 80,
@@ -87706,10 +87626,38 @@ var AuroraBackgroundInternal = ({
87706
87626
  fixed = false,
87707
87627
  pauseWhenHidden = false
87708
87628
  }) => {
87629
+ const { theme, resolvedTheme } = useTheme();
87630
+ const [mounted, setMounted] = useState(false);
87709
87631
  const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
87710
87632
  const [isVisible, setIsVisible] = useState(true);
87711
87633
  const containerRef = useRef(null);
87712
87634
  const observerTimeoutRef = useRef(null);
87635
+ useEffect(() => {
87636
+ setMounted(true);
87637
+ }, []);
87638
+ const currentTheme = mounted ? resolvedTheme || theme || "dark" : "dark";
87639
+ const themeDefaultColors = useMemo(() => {
87640
+ if (currentTheme === "dark") {
87641
+ return {
87642
+ primary: "#9D7FD1",
87643
+ // Medium pastel purple
87644
+ secondary: "#7B9FF0",
87645
+ // Medium pastel blue
87646
+ tertiary: "#6BC9D4"
87647
+ // Medium pastel cyan
87648
+ };
87649
+ } else {
87650
+ return {
87651
+ primary: "#3D2680",
87652
+ // Moontra dark purple
87653
+ secondary: "#5B3FA0",
87654
+ // Moontra medium purple
87655
+ tertiary: "#00ACC1"
87656
+ // Moontra cyan
87657
+ };
87658
+ }
87659
+ }, [currentTheme]);
87660
+ const finalColors = colors || themeDefaultColors;
87713
87661
  const duration = useMemo(() => {
87714
87662
  switch (speed) {
87715
87663
  case "slow":
@@ -87724,26 +87672,26 @@ var AuroraBackgroundInternal = ({
87724
87672
  switch (variant) {
87725
87673
  case "subtle":
87726
87674
  return {
87727
- primary: colors.primary || "#94a3b8",
87728
- secondary: colors.secondary || "#cbd5e1",
87729
- tertiary: colors.tertiary || "#e2e8f0"
87675
+ primary: finalColors.primary || "#94a3b8",
87676
+ secondary: finalColors.secondary || "#cbd5e1",
87677
+ tertiary: finalColors.tertiary || "#e2e8f0"
87730
87678
  };
87731
87679
  case "vibrant":
87732
87680
  return {
87733
- primary: colors.primary || "#f97316",
87734
- secondary: colors.secondary || "#ec4899",
87735
- tertiary: colors.tertiary || "#8b5cf6"
87681
+ primary: finalColors.primary || "#f97316",
87682
+ secondary: finalColors.secondary || "#ec4899",
87683
+ tertiary: finalColors.tertiary || "#8b5cf6"
87736
87684
  };
87737
87685
  case "dark":
87738
87686
  return {
87739
- primary: colors.primary || "#1e293b",
87740
- secondary: colors.secondary || "#334155",
87741
- tertiary: colors.tertiary || "#475569"
87687
+ primary: finalColors.primary || "#1e293b",
87688
+ secondary: finalColors.secondary || "#334155",
87689
+ tertiary: finalColors.tertiary || "#475569"
87742
87690
  };
87743
87691
  default:
87744
- return colors;
87692
+ return finalColors;
87745
87693
  }
87746
- }, [variant, colors]);
87694
+ }, [variant, finalColors]);
87747
87695
  const handleMouseMove2 = useCallback((e) => {
87748
87696
  if (!interactive)
87749
87697
  return;
@@ -87815,6 +87763,9 @@ var AuroraBackgroundInternal = ({
87815
87763
  filter: `blur(${blur2 * 0.5}px)`,
87816
87764
  mixBlendMode: "overlay"
87817
87765
  }), [blur2]);
87766
+ if (!mounted) {
87767
+ return null;
87768
+ }
87818
87769
  return /* @__PURE__ */ jsxs(
87819
87770
  "div",
87820
87771
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moontra/moonui-pro",
3
- "version": "3.4.32",
3
+ "version": "3.4.34",
4
4
  "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
5
5
  "type": "module",
6
6
  "main": "dist/index.mjs",