@moontra/moonui-pro 2.25.20 → 2.26.2

package/dist/index.mjs

@@ -36,6 +36,7 @@ import 'react-grid-layout/css/styles.css';
 import { useForm } from 'react-hook-form';
 import confetti from 'canvas-confetti';
 import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
+import NProgress from 'nprogress';
 
 /**
  * @moontra/moonui-pro v2.0.9
@@ -74494,6 +74495,9 @@ var TableRow2 = t__default.memo(({
 });
 TableRow2.displayName = "TableRow";
 var MoonUIDataTablePro = 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");
 var SearchInput = t__default.memo(({
   searchInputRef,
   searchPlaceholder,
@@ -74574,6 +74578,7 @@ function SidebarInternal({
   onStateChange,
   customStyles,
   fullWidthItems = true,
+  enableNProgress = true,
   className,
   activePath,
   onNavigate
@@ -74585,6 +74590,17 @@ function SidebarInternal({
   const [currentSearchQuery, setCurrentSearchQuery] = useState(searchQuery);
   const [pinnedItems, setPinnedItems] = useState([]);
   const searchInputRef = useRef(null);
+  useEffect(() => {
+    if (enableNProgress) {
+      NProgress.configure({
+        easing: "ease",
+        speed: 800,
+        showSpinner: false,
+        trickleSpeed: 200,
+        minimum: 0.2
+      });
+    }
+  }, [enableNProgress]);
   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
   const springX = useSpring(mouseX, { stiffness: 300, damping: 30 });
@@ -74671,13 +74687,21 @@ function SidebarInternal({
   const handleItemClick = useCallback((item) => {
     if (item.action) {
       item.action();
-    } else if (item.href && onNavigate) {
-      onNavigate(item.href);
+    } else if (item.href) {
+      if (enableNProgress) {
+        NProgress.start();
+        setTimeout(() => NProgress.done(), 500);
+      }
+      if (onNavigate) {
+        onNavigate(item.href);
+      } else {
+        window.location.href = item.href;
+      }
       if (isMobile) {
         setIsOpen(false);
       }
     }
-  }, [onNavigate, isMobile]);
+  }, [onNavigate, isMobile, enableNProgress]);
   useEffect(() => {
     setCurrentSearchQuery(searchQuery);
   }, [searchQuery]);
@@ -75138,6 +75162,7 @@ function NavbarInternal({
   hideOnScroll = false,
   showScrollProgress = false,
   maxWidth = "2xl",
+  enableNProgress = true,
   className,
   activePath,
   onNavigate
@@ -75152,6 +75177,17 @@ function NavbarInternal({
   const [scrollProgress, setScrollProgress] = useState(0);
   const lastScrollY = useRef(0);
   const navRef = useRef(null);
+  useEffect(() => {
+    if (enableNProgress) {
+      NProgress.configure({
+        easing: "ease",
+        speed: 800,
+        showSpinner: false,
+        trickleSpeed: 200,
+        minimum: 0.2
+      });
+    }
+  }, [enableNProgress]);
   useEffect(() => {
     const checkMobile = () => {
       setIsMobile(window.innerWidth < mobileBreakpoint);
@@ -75202,13 +75238,21 @@ function NavbarInternal({
   const handleItemClick = useCallback((item) => {
     if (item.action) {
       item.action();
-    } else if (item.href && onNavigate) {
-      onNavigate(item.href);
+    } else if (item.href) {
+      if (enableNProgress) {
+        NProgress.start();
+        setTimeout(() => NProgress.done(), 500);
+      }
+      if (onNavigate) {
+        onNavigate(item.href);
+      } else {
+        window.location.href = item.href;
+      }
       if (isMobile) {
         setIsOpen(false);
       }
     }
-  }, [onNavigate, isMobile]);
+  }, [onNavigate, isMobile, enableNProgress]);
   const handleSearch = useCallback((value) => {
     setSearchValue(value);
     onSearch?.(value);

package/dist/styles/nprogress.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/styles/nprogress.mjs

@@ -0,0 +1,32 @@
+/**
+ * @moontra/moonui-pro v2.0.9
+ * Premium UI components for MoonUI
+ * (c) 2025 MoonUI. All rights reserved.
+ * @license Commercial - https://moonui.dev/license
+ */
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined")
+    return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// 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");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "2.25.20",
+    "version": "2.26.2",
     "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",
@@ -98,6 +98,7 @@
         "@radix-ui/react-tooltip": "^1.2.7",
         "@tanstack/react-table": "^8.20.5",
         "@types/crypto-js": "^4.2.2",
+        "@types/nprogress": "^0.2.3",
         "canvas-confetti": "^1.9.3",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -107,6 +108,7 @@
         "framer-motion": "^11.11.17",
         "fuse.js": "^7.0.0",
         "lucide-react": "^0.525.0",
+        "nprogress": "^0.2.0",
         "react-beautiful-dnd": "^13.1.1",
         "react-colorful": "^5.6.1",
         "react-day-picker": "^9.8.0",