@moontra/moonui-pro 3.4.9 → 3.4.11

package/dist/index.d.ts

@@ -3930,6 +3930,12 @@ interface NavbarConfig {
     sections: NavbarSection[];
     branding?: {
         logo?: React__default.ReactNode;
+        /** Logo to show when navbar is scrolled (falls back to logo if not provided) */
+        logoSmall?: React__default.ReactNode;
+        /** Logo to show in light mode (falls back to logo if not provided) */
+        logoLight?: React__default.ReactNode;
+        /** Logo to show in dark mode (falls back to logo if not provided) */
+        logoDark?: React__default.ReactNode;
         title?: string;
         href?: string;
     };

package/dist/index.mjs

@@ -78992,6 +78992,7 @@ function NavbarInternal({
   const [isCommandOpen, setIsCommandOpen] = useState(false);
   const [searchValue, setSearchValue] = useState("");
   const [currentTheme, setCurrentTheme] = useState(theme);
+  const [isDarkMode, setIsDarkMode] = useState(false);
   const navRef = useRef(null);
   const { scrolled, hidden, scrollProgress, isMinimal } = useNavbarScroll({
     sticky,
@@ -79031,6 +79032,17 @@ function NavbarInternal({
       const isDark = root.classList.contains("dark");
       const currentDomTheme = isDark ? "dark" : "light";
       setCurrentTheme(theme || currentDomTheme);
+      setIsDarkMode(isDark);
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.attributeName === "class") {
+            const isDark2 = root.classList.contains("dark");
+            setIsDarkMode(isDark2);
+          }
+        });
+      });
+      observer.observe(root, { attributes: true });
+      return () => observer.disconnect();
     } else {
       setCurrentTheme(theme);
     }
@@ -79050,6 +79062,14 @@ function NavbarInternal({
     document.addEventListener("keydown", handleKeyDown3);
     return () => document.removeEventListener("keydown", handleKeyDown3);
   }, [keyboardShortcuts, enableCommandAI, onCommandAIOpen]);
+  const getActiveLogo = useCallback(() => {
+    if (!branding?.logo)
+      return null;
+    const isScrolled = framerScroll.isScrolled || scrolled;
+    const scrollLogo = isScrolled && branding.logoSmall ? branding.logoSmall : null;
+    const themeLogo = isDarkMode ? branding.logoDark || null : branding.logoLight || null;
+    return scrollLogo || themeLogo || branding.logo;
+  }, [branding, framerScroll.isScrolled, scrolled, isDarkMode]);
   const handleItemClick = useCallback(
     (item) => {
       if (item.action) {
@@ -79154,7 +79174,7 @@ function NavbarInternal({
     /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "icon", className: "md:hidden", children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" }) }) }),
     /* @__PURE__ */ jsx(SheetContent, { side: mobileMenuPosition, className: "w-80 p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center p-4 border-b", children: branding && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        branding.logo,
+        getActiveLogo(),
         branding.title && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: !hideNavItems && sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
@@ -79357,7 +79377,17 @@ function NavbarInternal({
                             },
                             className: "flex items-center gap-2",
                             children: [
-                              branding.logo,
+                              /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+                                motion.div,
+                                {
+                                  initial: { opacity: 0, scale: 0.9 },
+                                  animate: { opacity: 1, scale: 1 },
+                                  exit: { opacity: 0, scale: 0.9 },
+                                  transition: { duration: 0.2, ease: "easeInOut" },
+                                  children: getActiveLogo()
+                                },
+                                `logo-${framerScroll.isScrolled ? "scrolled" : "default"}-${isDarkMode ? "dark" : "light"}`
+                              ) }),
                               /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: branding.title && !isMobile && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
                                 motion.span,
                                 {
@@ -79817,7 +79847,17 @@ function NavbarInternal({
                         },
                         className: "flex items-center gap-2",
                         children: [
-                          branding.logo,
+                          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+                            motion.div,
+                            {
+                              initial: { opacity: 0, scale: 0.9 },
+                              animate: { opacity: 1, scale: 1 },
+                              exit: { opacity: 0, scale: 0.9 },
+                              transition: { duration: 0.2, ease: "easeInOut" },
+                              children: getActiveLogo()
+                            },
+                            `logo-${framerScroll.isScrolled ? "scrolled" : "default"}-${isDarkMode ? "dark" : "light"}`
+                          ) }),
                           /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: branding.title && !isMobile && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
                             motion.span,
                             {

package/package.json

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