@moontra/moonui-pro 3.3.20 → 3.3.22

package/dist/index.d.ts

@@ -3987,7 +3987,15 @@ interface NavbarConfig {
     minimalConfig?: MinimalModeConfig;
     maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
     fullWidth?: boolean;
+    /** Overlay mode - navbar becomes absolute positioned, content doesn't shift down */
+    overlayMode?: boolean;
+    /** Auto-expand navbar when content overflows instead of showing scrollbar */
+    autoExpand?: boolean;
+    /** Container max-width for floating-centered variant (default: "5xl") */
+    containerMaxWidth?: "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full";
     enableNProgress?: boolean;
+    /** Position progress bar inside border-radius (default: true for professional look) */
+    progressBarInset?: boolean;
 }
 interface NavbarProps extends NavbarConfig {
     className?: string;

package/dist/index.mjs

@@ -78175,7 +78175,7 @@ TableRow2.displayName = "TableRow";
 var MoonUIDataTable = DataTable;
 
 // src/styles/nprogress.css
-styleInject("#nprogress {\n  pointer-events: none;\n}\n#nprogress .bar {\n  background: linear-gradient(90deg, #8b5cf6 0%, #d946ef 50%, #8b5cf6 100%);\n  background-size: 200% 100%;\n  animation: gradient-shift 2s ease infinite;\n  position: fixed;\n  z-index: 9999;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 5px rgba(217, 70, 239, 0.5);\n}\n#nprogress .peg {\n  display: block;\n  position: absolute;\n  right: 0px;\n  width: 100px;\n  height: 100%;\n  box-shadow: 0 0 15px rgba(139, 92, 246, 0.7), 0 0 8px rgba(217, 70, 239, 0.7);\n  opacity: 1.0;\n  transform: rotate(3deg) translate(0px, -4px);\n}\n#nprogress .spinner {\n  display: none;\n}\n@keyframes gradient-shift {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n.dark #nprogress .bar {\n  background: linear-gradient(90deg, #a78bfa 0%, #e879f9 50%, #a78bfa 100%);\n  box-shadow: 0 0 15px rgba(167, 139, 250, 0.6), 0 0 8px rgba(232, 121, 249, 0.6);\n}\n.dark #nprogress .peg {\n  box-shadow: 0 0 20px rgba(167, 139, 250, 0.8), 0 0 10px rgba(232, 121, 249, 0.8);\n}\n");
+styleInject("#nprogress {\n  pointer-events: none;\n}\n#nprogress .bar {\n  background: linear-gradient(90deg, #8b5cf6 0%, #d946ef 50%, #8b5cf6 100%);\n  background-size: 200% 100%;\n  animation: gradient-shift 2s ease infinite;\n  position: fixed;\n  z-index: 9999;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 5px rgba(217, 70, 239, 0.5);\n}\n#nprogress .peg {\n  display: block;\n  position: absolute;\n  right: 0px;\n  width: 100px;\n  height: 100%;\n  box-shadow: 0 0 15px rgba(139, 92, 246, 0.7), 0 0 8px rgba(217, 70, 239, 0.7);\n  opacity: 1.0;\n  transform: rotate(3deg) translate(0px, -4px);\n}\n#nprogress .spinner {\n  display: none;\n}\n@keyframes gradient-shift {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n.dark #nprogress .bar {\n  background: linear-gradient(90deg, #a78bfa 0%, #e879f9 50%, #a78bfa 100%);\n  box-shadow: 0 0 15px rgba(167, 139, 250, 0.6), 0 0 8px rgba(232, 121, 249, 0.6);\n}\n.dark #nprogress .peg {\n  box-shadow: 0 0 20px rgba(167, 139, 250, 0.8), 0 0 10px rgba(232, 121, 249, 0.8);\n}\n.scrollbar-hide::-webkit-scrollbar {\n  display: none;\n}\n.scrollbar-hide {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n.scroll-smooth {\n  scroll-behavior: smooth;\n}\n");
 var SearchInput = React71__default.memo(({
   searchInputRef,
   searchPlaceholder,
@@ -78934,7 +78934,11 @@ function NavbarInternal({
   minimalConfig = {},
   maxWidth = "2xl",
   fullWidth = false,
+  overlayMode = false,
+  autoExpand = false,
+  containerMaxWidth = "5xl",
   enableNProgress = true,
+  progressBarInset = true,
   className,
   activePath,
   onNavigate
@@ -79191,11 +79195,25 @@ function NavbarInternal({
     // Base variant styles
     variant === "default" && "border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
     variant === "floating" && "mx-4 mt-4 rounded-lg border bg-background/95 backdrop-blur shadow-lg",
-    variant === "floating-centered" && "mx-auto my-4 max-w-5xl rounded-2xl border border-border/40 bg-background/70 backdrop-blur-xl shadow-lg shadow-black/5 dark:shadow-black/20 px-6",
+    variant === "floating-centered" && cn(
+      "mx-auto rounded-2xl border border-border/40 bg-background/70 backdrop-blur-xl shadow-lg shadow-black/5 dark:shadow-black/20 px-6",
+      // Overlay mode kontrolü - absolute veya margin
+      overlayMode ? "absolute top-4 left-1/2 -translate-x-1/2 z-50" : "my-4",
+      // Dynamic max-width based on containerMaxWidth prop
+      containerMaxWidth === "3xl" && "max-w-3xl",
+      containerMaxWidth === "4xl" && "max-w-4xl",
+      containerMaxWidth === "5xl" && "max-w-5xl",
+      containerMaxWidth === "6xl" && "max-w-6xl",
+      containerMaxWidth === "7xl" && "max-w-7xl",
+      containerMaxWidth === "full" && "max-w-full px-8",
+      // Auto-expand mode - genişlik içeriğe göre ayarlanır
+      !containerMaxWidth && autoExpand && "max-w-max"
+    ),
     variant === "minimal" && "bg-background",
     variant === "transparent" && "bg-transparent",
-    // Sticky behavior
-    sticky && "sticky top-0 z-50",
+    // Positioning - overlay mode takes precedence over sticky
+    overlayMode && "absolute",
+    sticky && !overlayMode && "sticky top-0 z-50",
     // Scroll states
     scrolled && sticky && variant !== "transparent" && "shadow-sm",
     scrolled && variant === "transparent" && "bg-background/95 backdrop-blur border-b",
@@ -79255,6 +79273,9 @@ 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",
+                  // Positioning
                   navItemsPosition === "center" && variant !== "floating-centered" && "flex-1 justify-center mx-4",
                   navItemsPosition === "center" && variant === "floating-centered" && "flex-1 justify-center",
                   navItemsPosition === "right" && "ml-auto",
@@ -79668,13 +79689,37 @@ function NavbarInternal({
           }
         }
       ),
-      showScrollProgress && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 w-full h-0.5 bg-muted", children: /* @__PURE__ */ jsx(
+      showScrollProgress && /* @__PURE__ */ jsx(
         "div",
         {
-          className: "h-full bg-primary transition-all duration-150",
-          style: { width: `${scrollProgress}%` }
+          className: cn(
+            "absolute left-0 w-full h-0.5 bg-muted transition-all",
+            // progressBarInset kontrolü - border-radius içinde mi dışında mı
+            progressBarInset ? cn(
+              "bottom-1 mx-2",
+              // İçeriden margin
+              // Border-radius uyumu
+              rounded && "rounded-b-lg",
+              variant === "floating-centered" && "rounded-b-2xl",
+              variant === "floating" && "rounded-b-lg"
+            ) : "bottom-0"
+            // Dışarıdan (backward compat)
+          ),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "h-full bg-primary transition-all duration-150",
+                // Progress bar'ın sağ köşesi border-radius ile uyumlu
+                progressBarInset && rounded && "rounded-br-lg",
+                progressBarInset && variant === "floating-centered" && "rounded-br-2xl",
+                progressBarInset && variant === "floating" && "rounded-br-lg"
+              ),
+              style: { width: `${scrollProgress}%` }
+            }
+          )
         }
-      ) })
+      )
     ] }),
     /* @__PURE__ */ jsxs(
       MoonUICommandDialogPro,

package/dist/styles/nprogress.mjs

@@ -29,4 +29,4 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles/nprogress.css
-styleInject("#nprogress {\n  pointer-events: none;\n}\n#nprogress .bar {\n  background: linear-gradient(90deg, #8b5cf6 0%, #d946ef 50%, #8b5cf6 100%);\n  background-size: 200% 100%;\n  animation: gradient-shift 2s ease infinite;\n  position: fixed;\n  z-index: 9999;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 5px rgba(217, 70, 239, 0.5);\n}\n#nprogress .peg {\n  display: block;\n  position: absolute;\n  right: 0px;\n  width: 100px;\n  height: 100%;\n  box-shadow: 0 0 15px rgba(139, 92, 246, 0.7), 0 0 8px rgba(217, 70, 239, 0.7);\n  opacity: 1.0;\n  transform: rotate(3deg) translate(0px, -4px);\n}\n#nprogress .spinner {\n  display: none;\n}\n@keyframes gradient-shift {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n.dark #nprogress .bar {\n  background: linear-gradient(90deg, #a78bfa 0%, #e879f9 50%, #a78bfa 100%);\n  box-shadow: 0 0 15px rgba(167, 139, 250, 0.6), 0 0 8px rgba(232, 121, 249, 0.6);\n}\n.dark #nprogress .peg {\n  box-shadow: 0 0 20px rgba(167, 139, 250, 0.8), 0 0 10px rgba(232, 121, 249, 0.8);\n}\n");
+styleInject("#nprogress {\n  pointer-events: none;\n}\n#nprogress .bar {\n  background: linear-gradient(90deg, #8b5cf6 0%, #d946ef 50%, #8b5cf6 100%);\n  background-size: 200% 100%;\n  animation: gradient-shift 2s ease infinite;\n  position: fixed;\n  z-index: 9999;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 5px rgba(217, 70, 239, 0.5);\n}\n#nprogress .peg {\n  display: block;\n  position: absolute;\n  right: 0px;\n  width: 100px;\n  height: 100%;\n  box-shadow: 0 0 15px rgba(139, 92, 246, 0.7), 0 0 8px rgba(217, 70, 239, 0.7);\n  opacity: 1.0;\n  transform: rotate(3deg) translate(0px, -4px);\n}\n#nprogress .spinner {\n  display: none;\n}\n@keyframes gradient-shift {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n.dark #nprogress .bar {\n  background: linear-gradient(90deg, #a78bfa 0%, #e879f9 50%, #a78bfa 100%);\n  box-shadow: 0 0 15px rgba(167, 139, 250, 0.6), 0 0 8px rgba(232, 121, 249, 0.6);\n}\n.dark #nprogress .peg {\n  box-shadow: 0 0 20px rgba(167, 139, 250, 0.8), 0 0 10px rgba(232, 121, 249, 0.8);\n}\n.scrollbar-hide::-webkit-scrollbar {\n  display: none;\n}\n.scrollbar-hide {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n.scroll-smooth {\n  scroll-behavior: smooth;\n}\n");

package/package.json

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