@moontra/moonui-pro 3.4.7 → 3.4.8

package/dist/index.mjs

@@ -2572,21 +2572,31 @@ function useFramerScroll({
   const { scrollY } = useScroll();
   useMotionValueEvent(scrollY, "change", (latest) => {
     const previous = scrollY.getPrevious() || 0;
+    console.log("\u{1F50D} USE-FRAMER-SCROLL HOOK:", {
+      latest,
+      previous,
+      scrolledThreshold,
+      hiddenThreshold,
+      disableHiding,
+      willBeScrolled: latest > scrolledThreshold,
+      willBeHidden: !disableHiding && latest > previous && latest > hiddenThreshold
+    });
     if (latest > scrolledThreshold) {
       setIsScrolled(true);
     } else {
       setIsScrolled(false);
     }
     if (!disableHiding) {
-      if (latest < previous) {
-        setIsHidden(false);
-      } else if (latest > previous && latest > hiddenThreshold) {
+      if (latest > previous && latest > hiddenThreshold) {
         setIsHidden(true);
-      } else if (latest <= hiddenThreshold) {
+        console.log("\u2705 HIDING NAVBAR (auto-hide mode)");
+      } else {
         setIsHidden(false);
+        console.log("\u2705 SHOWING NAVBAR (auto-hide mode)");
       }
     } else {
       setIsHidden(false);
+      console.log("\u2705 STICKY MODE - NEVER HIDE");
     }
   });
   return {
@@ -78895,8 +78905,11 @@ function NavbarInternal({
         return "h-16";
     }
   };
+  const isFloatingVariant = variant === "floating-auto-hide" || variant === "floating-sticky";
   const navClasses = cn(
-    "moonui-pro transition-all duration-300 ease-in-out",
+    "moonui-pro",
+    // transition-all SADECE non-floating variant'larda kullan (Framer Motion ile çakışmasın)
+    !isFloatingVariant && "transition-all duration-300 ease-in-out",
     // w-full sadece floating-centered overlay olmadığında
     !(variant === "floating-centered" && overlayMode) && "w-full",
     // Base variant styles
@@ -78919,11 +78932,13 @@ function NavbarInternal({
       !containerMaxWidth && autoExpand && "max-w-max"
     ),
     variant === "floating-auto-hide" && cn(
-      "fixed top-0 z-50 w-full border-b transition-all duration-300",
+      "fixed top-0 z-50 w-full border-b",
+      // transition kaldırıldı - Framer Motion kullanıyor
       framerScroll.isScrolled ? "border-b bg-background/80 backdrop-blur-xl shadow-lg" : "border-b border-transparent bg-background/95 backdrop-blur"
     ),
     variant === "floating-sticky" && cn(
-      "fixed top-0 z-50 w-full border-b transition-all duration-300",
+      "fixed top-0 z-50 w-full border-b",
+      // transition kaldırıldı - Framer Motion kullanıyor
       framerScroll.isScrolled ? "border-b bg-background/80 backdrop-blur-xl shadow-lg" : "border-b border-transparent bg-background/95 backdrop-blur"
     ),
     variant === "minimal" && "bg-background",
@@ -78936,7 +78951,8 @@ function NavbarInternal({
     // Scroll states
     scrolled && sticky && variant !== "transparent" && "shadow-sm",
     scrolled && variant === "transparent" && "bg-background/95 backdrop-blur border-b",
-    scrollBehavior === "hide" && hidden && "-translate-y-full",
+    scrollBehavior === "hide" && hidden && !isFloatingVariant && "-translate-y-full",
+    // Floating'de Framer Motion kullan
     // Glass effect
     glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
     blur2 && "backdrop-blur-md",
@@ -78947,28 +78963,48 @@ function NavbarInternal({
     customStyles?.border,
     className
   );
-  const NavWrapper = variant === "floating-auto-hide" ? motion.nav : "nav";
-  const navMotionProps = variant === "floating-auto-hide" ? {
+  const NavWrapper = isFloatingVariant ? motion.nav : "nav";
+  console.log("\u{1F680} NAVBAR PACKAGE VERSION CHECK:", {
+    variant,
+    isFloatingVariant,
+    isHidden: framerScroll.isHidden,
+    isScrolled: framerScroll.isScrolled,
+    NavWrapper: NavWrapper === motion.nav ? "motion.nav \u2705" : "plain nav \u274C",
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  });
+  const navMotionProps = isFloatingVariant ? {
     animate: {
       y: framerScroll.isHidden ? -100 : 0,
+      // auto-hide: -100/0, sticky: always 0
       opacity: framerScroll.isHidden ? 0 : 1
+      // auto-hide: 0/1, sticky: always 1
     },
     transition: {
-      duration: 0.5,
-      // Daha smooth animasyon (0.3'ten 0.5'e çıktı)
+      duration: 0.3,
+      // Header ile aynı (0.5'ten 0.3'e döndü)
       ease: "easeInOut"
     }
   } : {};
+  console.log("\u{1F3AC} MOTION PROPS:", {
+    hasProps: Object.keys(navMotionProps).length > 0,
+    animate: navMotionProps.animate,
+    transition: navMotionProps.transition
+  });
+  const floatingClasses = isFloatingVariant ? cn(
+    "fixed top-0 z-50 w-full transition-all duration-300",
+    framerScroll.isScrolled ? "border-b bg-background/80 backdrop-blur-xl shadow-lg" : "border-b border-transparent bg-background/95 backdrop-blur"
+  ) : navClasses;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(NavWrapper, { ref: navRef, className: navClasses, ...navMotionProps, children: [
+    /* @__PURE__ */ jsxs(NavWrapper, { ref: navRef, className: floatingClasses, ...navMotionProps, children: [
       variant === "floating-auto-hide" || variant === "floating-sticky" ? (
         // Floating variants için iki katmanlı yapı (header.tsx pattern)
+        // IMPORTANT: container class yerine w-full kullan (Tailwind container max-width getiriyor)
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "container mx-auto transition-all duration-300",
-              framerScroll.isScrolled ? "max-w-6xl" : "max-w-full"
+              "transition-all duration-300",
+              framerScroll.isScrolled ? "max-w-6xl mx-auto px-2 sm:px-3 lg:px-4" : "w-full px-2 sm:px-3 lg:px-4"
             ),
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -79000,7 +79036,18 @@ function NavbarInternal({
                             className: "flex items-center gap-2",
                             children: [
                               branding.logo,
-                              branding.title && !isMobile && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
+                              /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: branding.title && !isMobile && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  className: "font-semibold text-lg overflow-hidden",
+                                  initial: { opacity: 0, width: 0 },
+                                  animate: { opacity: 1, width: "auto" },
+                                  exit: { opacity: 0, width: 0 },
+                                  transition: { duration: 0.2, ease: "easeInOut" },
+                                  children: branding.title
+                                },
+                                "logo-text"
+                              ) })
                             ]
                           }
                         )
@@ -79012,8 +79059,8 @@ function NavbarInternal({
                     {
                       className: cn(
                         "hidden md:flex",
-                        // Overflow handling - auto-expand veya horizontal scroll
-                        autoExpand ? "flex-nowrap" : "flex-wrap overflow-x-auto scrollbar-hide scroll-smooth",
+                        // Overflow handling - minimal için otomatik expand, diğerleri user tercih
+                        autoExpand || !isFloatingVariant && variant === "minimal" ? "flex-nowrap" : "flex-wrap overflow-x-auto scrollbar-hide scroll-smooth",
                         // Positioning - floating variants
                         navItemsPosition === "center" && "flex-1 justify-center mx-4",
                         navItemsPosition === "right" && "ml-auto",
@@ -79090,7 +79137,7 @@ function NavbarInternal({
                     }
                   ),
                   /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
-                    showSearch && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
+                    showSearch && !framerScroll.isScrolled && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
                       MoonUIButtonPro,
                       {
                         variant: "ghost",
@@ -79215,7 +79262,7 @@ function NavbarInternal({
                         )
                       ] })
                     ] })),
-                    notifications && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                    notifications && !framerScroll.isScrolled && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
                       /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
                         MoonUIButtonPro,
                         {
@@ -79338,7 +79385,7 @@ function NavbarInternal({
                         }
                       )
                     ] }),
-                    cta && /* @__PURE__ */ jsx(
+                    cta && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
                       MoonUIButtonPro,
                       {
                         variant: cta.variant || "primary",
@@ -79366,7 +79413,7 @@ function NavbarInternal({
                         children: cta.text
                       }
                     ),
-                    userMenu && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                    userMenu && !framerScroll.isScrolled && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
                       /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
                         MoonUIButtonPro,
                         {
@@ -79421,7 +79468,10 @@ function NavbarInternal({
               "transition-[height] duration-300 ease-in-out",
               getHeight(),
               // floating-centered için özel logic - outer nav zaten max-width kontrol ediyor
-              variant === "floating-centered" ? "w-full px-6" : fullWidth ? "w-full px-4 sm:px-6 lg:px-8" : maxWidth === "sm" && "container max-w-screen-sm" || maxWidth === "md" && "container max-w-screen-md" || maxWidth === "lg" && "container max-w-screen-lg" || maxWidth === "xl" && "container max-w-screen-xl" || maxWidth === "2xl" && "container max-w-screen-2xl" || maxWidth === "full" && "w-full px-4 sm:px-6 lg:px-8"
+              variant === "floating-centered" ? "w-full px-6" : (
+                // minimal variant için tam genişlik (menu'ler yayılsın)
+                variant === "minimal" ? "w-full px-4 sm:px-6 lg:px-8" : fullWidth ? "w-full px-4 sm:px-6 lg:px-8" : maxWidth === "sm" && "container max-w-screen-sm" || maxWidth === "md" && "container max-w-screen-md" || maxWidth === "lg" && "container max-w-screen-lg" || maxWidth === "xl" && "container max-w-screen-xl" || maxWidth === "2xl" && "container max-w-screen-2xl" || maxWidth === "full" && "w-full px-4 sm:px-6 lg:px-8"
+              )
             ),
             children: [
               branding && /* @__PURE__ */ jsxs(
@@ -79446,7 +79496,18 @@ function NavbarInternal({
                         className: "flex items-center gap-2",
                         children: [
                           branding.logo,
-                          branding.title && !isMobile && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
+                          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: branding.title && !isMobile && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
+                            motion.span,
+                            {
+                              className: "font-semibold text-lg overflow-hidden",
+                              initial: { opacity: 0, width: 0 },
+                              animate: { opacity: 1, width: "auto" },
+                              exit: { opacity: 0, width: 0 },
+                              transition: { duration: 0.2, ease: "easeInOut" },
+                              children: branding.title
+                            },
+                            "logo-text"
+                          ) })
                         ]
                       }
                     )
@@ -79458,8 +79519,10 @@ function NavbarInternal({
                 {
                   className: cn(
                     "hidden md:flex",
-                    // Overflow handling - auto-expand veya horizontal scroll
-                    autoExpand ? "flex-nowrap" : "flex-wrap overflow-x-auto scrollbar-hide scroll-smooth",
+                    // Minimal için tam genişlik + spacing
+                    variant === "minimal" && "flex-1 w-full",
+                    // Overflow handling - minimal için otomatik expand, diğerleri user tercih
+                    autoExpand || !isFloatingVariant && variant === "minimal" ? "flex-nowrap" : "flex-wrap overflow-x-auto scrollbar-hide scroll-smooth",
                     // Positioning
                     navItemsPosition === "center" && variant !== "floating-centered" && "flex-1 justify-center mx-4",
                     navItemsPosition === "center" && variant === "floating-centered" && "flex-1 justify-center",
@@ -79469,75 +79532,84 @@ function NavbarInternal({
                     isMinimal && minimalConfig?.centerOnScroll && navItemsPosition !== "center" && "flex-1 justify-center",
                     navItemsPosition === "center" && variant !== "floating-centered" && "absolute left-1/2 transform -translate-x-1/2"
                   ),
-                  children: /* @__PURE__ */ jsx(NavigationMenuList2, { children: sections.map((section) => /* @__PURE__ */ jsx(React64__default.Fragment, { children: section.items.map((item) => {
-                    const hasChildren = item.items && item.items.length > 0;
-                    const isActive2 = item.href === activePath;
-                    if (hasChildren) {
-                      return /* @__PURE__ */ jsxs(
-                        NavigationMenuItem2,
-                        {
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              NavigationMenuTrigger2,
+                  children: /* @__PURE__ */ jsx(
+                    NavigationMenuList2,
+                    {
+                      className: cn(
+                        // Minimal için item'ları yay
+                        variant === "minimal" && "w-full justify-between gap-1"
+                      ),
+                      children: sections.map((section) => /* @__PURE__ */ jsx(React64__default.Fragment, { children: section.items.map((item) => {
+                        const hasChildren = item.items && item.items.length > 0;
+                        const isActive2 = item.href === activePath;
+                        if (hasChildren) {
+                          return /* @__PURE__ */ jsxs(
+                            NavigationMenuItem2,
+                            {
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  NavigationMenuTrigger2,
+                                  {
+                                    className: cn(
+                                      isActive2 && "bg-accent text-accent-foreground",
+                                      item.disabled && "opacity-50 cursor-not-allowed"
+                                    ),
+                                    disabled: item.disabled,
+                                    children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                                      item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
+                                      item.title
+                                    ] })
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(NavigationMenuContent2, { children: item.items && renderMegaMenuContent(
+                                  item.items
+                                ) })
+                              ]
+                            },
+                            item.id
+                          );
+                        }
+                        return /* @__PURE__ */ jsx(
+                          NavigationMenuItem2,
+                          {
+                            children: /* @__PURE__ */ jsxs(
+                              NavigationMenuLink2,
                               {
                                 className: cn(
+                                  navigationMenuTriggerStyle(),
+                                  "cursor-pointer",
                                   isActive2 && "bg-accent text-accent-foreground",
                                   item.disabled && "opacity-50 cursor-not-allowed"
                                 ),
-                                disabled: item.disabled,
-                                children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                                  item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
-                                  item.title
-                                ] })
+                                onClick: () => !item.disabled && handleItemClick(
+                                  item
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                                    item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
+                                    item.title
+                                  ] }),
+                                  item.badge && /* @__PURE__ */ jsx(
+                                    MoonUIBadgePro,
+                                    {
+                                      variant: item.badgeVariant || "secondary",
+                                      className: "ml-2",
+                                      children: item.badge
+                                    }
+                                  )
+                                ]
                               }
-                            ),
-                            /* @__PURE__ */ jsx(NavigationMenuContent2, { children: item.items && renderMegaMenuContent(
-                              item.items
-                            ) })
-                          ]
-                        },
-                        item.id
-                      );
+                            )
+                          },
+                          item.id
+                        );
+                      }) }, section.id))
                     }
-                    return /* @__PURE__ */ jsx(
-                      NavigationMenuItem2,
-                      {
-                        children: /* @__PURE__ */ jsxs(
-                          NavigationMenuLink2,
-                          {
-                            className: cn(
-                              navigationMenuTriggerStyle(),
-                              "cursor-pointer",
-                              isActive2 && "bg-accent text-accent-foreground",
-                              item.disabled && "opacity-50 cursor-not-allowed"
-                            ),
-                            onClick: () => !item.disabled && handleItemClick(
-                              item
-                            ),
-                            children: [
-                              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                                item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
-                                item.title
-                              ] }),
-                              item.badge && /* @__PURE__ */ jsx(
-                                MoonUIBadgePro,
-                                {
-                                  variant: item.badgeVariant || "secondary",
-                                  className: "ml-2",
-                                  children: item.badge
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      },
-                      item.id
-                    );
-                  }) }, section.id)) })
+                  )
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
-                showSearch && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
+                showSearch && !framerScroll.isScrolled && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
                   MoonUIButtonPro,
                   {
                     variant: "ghost",
@@ -79662,7 +79734,7 @@ function NavbarInternal({
                     )
                   ] })
                 ] })),
-                notifications && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                notifications && !framerScroll.isScrolled && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
                   /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
                     MoonUIButtonPro,
                     {
@@ -79785,7 +79857,7 @@ function NavbarInternal({
                     }
                   )
                 ] }),
-                cta && /* @__PURE__ */ jsx(
+                cta && !framerScroll.isScrolled && /* @__PURE__ */ jsx(
                   MoonUIButtonPro,
                   {
                     variant: cta.variant || "primary",
@@ -79813,7 +79885,7 @@ function NavbarInternal({
                     children: cta.text
                   }
                 ),
-                userMenu && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                userMenu && !framerScroll.isScrolled && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
                   /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
                     MoonUIButtonPro,
                     {

package/package.json

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