@moontra/moonui-pro 2.25.18 → 2.25.20

package/dist/index.mjs

@@ -1725,32 +1725,6 @@ var require_core = __commonJS({
     highlight.default = highlight;
   }
 });
-
-// #style-inject:#style-inject
-function styleInject(css2, { insertAt } = {}) {
-  if (!css2 || typeof document === "undefined")
-    return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style2 = document.createElement("style");
-  style2.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style2, head.firstChild);
-    } else {
-      head.appendChild(style2);
-    }
-  } else {
-    head.appendChild(style2);
-  }
-  if (style2.styleSheet) {
-    style2.styleSheet.cssText = css2;
-  } else {
-    style2.appendChild(document.createTextNode(css2));
-  }
-}
-
-// src/styles/components.css
-styleInject(".moonui-pro-sidebar {\n  isolation: isolate;\n}\n.moonui-pro-navbar {\n  isolation: isolate;\n}\n");
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -58114,6 +58088,29 @@ var SlashCommandsExtension = Extension.create({
   }
 });
 
+// #style-inject:#style-inject
+function styleInject(css2, { insertAt } = {}) {
+  if (!css2 || typeof document === "undefined")
+    return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style2 = document.createElement("style");
+  style2.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style2, head.firstChild);
+    } else {
+      head.appendChild(style2);
+    }
+  } else {
+    head.appendChild(style2);
+  }
+  if (style2.styleSheet) {
+    style2.styleSheet.cssText = css2;
+  } else {
+    style2.appendChild(document.createTextNode(css2));
+  }
+}
+
 // src/components/rich-text-editor/slash-commands.css
 styleInject(".slash-commands-menu {\n  border-radius: var(--radius);\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.slash-commands-menu:is(.dark *) {\n  --tw-border-opacity: 1;\n  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));\n}\n.slash-commands-menu {\n  max-height: 20rem;\n  min-width: 280px;\n  overflow-y: auto;\n  padding: 0.5rem;\n}\n.slash-command-item {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.75rem;\n  border-radius: calc(var(--radius) - 2px);\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.slash-command-item:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.slash-command-item:hover:is(.dark *) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));\n}\n.slash-command-item.selected {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.slash-command-item.selected:is(.dark *) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));\n}\n.slash-command-item svg {\n  height: 1rem;\n  width: 1rem;\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.slash-command-item svg:is(.dark *) {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.slash-command-item > div {\n  flex: 1 1 0%;\n}\n.slash-command-item .command-name {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 500;\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.slash-command-item .command-name:is(.dark *) {\n  --tw-text-opacity: 1;\n  color: rgb(243 244 246 / var(--tw-text-opacity, 1));\n}\n.slash-command-item .command-description {\n  margin-top: 0.125rem;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.slash-command-item .command-description:is(.dark *) {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.dark .slash-commands-menu {\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);\n}\n");
 
@@ -75010,7 +75007,7 @@ function SidebarInternal({
     ] });
   });
   const sidebarClasses = cn(
-    "moonui-pro-sidebar flex h-full flex-col bg-background border-r",
+    "moonui-pro flex h-full flex-col bg-background border-r",
     glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
     collapsed && !isMobile && "w-16",
     !collapsed && !isMobile && "w-64",
@@ -75038,7 +75035,7 @@ function SidebarInternal({
           children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
         }
       ),
-      /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-80 p-0", children: /* @__PURE__ */ jsxs("div", { className: cn(sidebarClasses, "h-full overflow-y-auto"), children: [
+      /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-80 p-0", children: /* @__PURE__ */ jsxs("div", { className: cn(sidebarClasses, "sidebar-container flex flex-col"), children: [
         animatedBackground && /* @__PURE__ */ jsx(
           motion.div,
           {
@@ -75064,7 +75061,7 @@ function SidebarInternal({
       ] }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("aside", { className: cn(sidebarClasses, "hidden md:flex"), children: [
+  return /* @__PURE__ */ jsxs("aside", { className: cn(sidebarClasses, "sidebar-container hidden md:flex flex-col"), children: [
     animatedBackground && /* @__PURE__ */ jsx(
       motion.div,
       {
@@ -75111,6 +75108,12 @@ function NavbarInternal({
   sections,
   branding,
   showSearch = true,
+  enableCommandAI = false,
+  commandAIShortcut = "\u2318K",
+  commandAIPlaceholder = "Search commands...",
+  onCommandAIOpen,
+  onCommandAIClose,
+  onCommandAISelect,
   searchPlaceholder = "Search...",
   onSearch,
   showThemeToggle = false,
@@ -75182,17 +75185,20 @@ function NavbarInternal({
     return () => window.removeEventListener("scroll", handleScroll);
   }, [sticky, hideOnScroll, showScrollProgress]);
   useEffect(() => {
-    if (!keyboardShortcuts)
+    if (!keyboardShortcuts && !enableCommandAI)
       return;
     const handleKeyDown3 = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
         setIsCommandOpen(true);
+        if (enableCommandAI) {
+          onCommandAIOpen?.();
+        }
       }
     };
     document.addEventListener("keydown", handleKeyDown3);
     return () => document.removeEventListener("keydown", handleKeyDown3);
-  }, [keyboardShortcuts]);
+  }, [keyboardShortcuts, enableCommandAI, onCommandAIOpen]);
   const handleItemClick = useCallback((item) => {
     if (item.action) {
       item.action();
@@ -75343,7 +75349,7 @@ function NavbarInternal({
     className
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("nav", { ref: navRef, className: cn("moonui-pro-navbar", navClasses), children: [
+    /* @__PURE__ */ jsxs("nav", { ref: navRef, className: navClasses, children: [
       /* @__PURE__ */ jsxs("div", { className: cn(
         "flex items-center",
         getHeight(),
@@ -75434,15 +75440,22 @@ function NavbarInternal({
               {
                 type: "search",
                 placeholder: searchPlaceholder,
-                className: "w-64 pl-9 pr-4 h-9",
+                className: "w-64 pl-9 pr-4 h-9 cursor-pointer",
                 value: searchValue,
-                onChange: (e) => handleSearch(e.target.value)
+                onChange: (e) => handleSearch(e.target.value),
+                onClick: () => {
+                  if (enableCommandAI) {
+                    setIsCommandOpen(true);
+                    onCommandAIOpen?.();
+                  }
+                },
+                readOnly: enableCommandAI
               }
             ),
-            keyboardShortcuts && /* @__PURE__ */ jsxs("kbd", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex", children: [
+            (keyboardShortcuts || enableCommandAI) && /* @__PURE__ */ jsx("kbd", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex", children: enableCommandAI ? commandAIShortcut : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
               "K"
-            ] })
+            ] }) })
           ] }) }),
           showThemeToggle && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
             /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "icon", children: [
@@ -75468,37 +75481,91 @@ function NavbarInternal({
           notifications && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
             /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "icon", className: "relative", children: [
               /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
-              notifications.count && notifications.count > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground flex items-center justify-center", children: notifications.count })
+              notifications.count && notifications.count > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 min-w-[18px] h-[18px] rounded-full bg-red-500 text-[11px] font-medium text-white flex items-center justify-center px-1", children: notifications.count > 9 ? "9+" : notifications.count })
             ] }) }),
-            /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", className: "w-80", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4", children: [
-                /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Notifications" }),
-                notifications.count && notifications.count > 0 && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", children: [
-                  notifications.count,
-                  " new"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
-              /* @__PURE__ */ jsx("div", { className: "max-h-[300px] overflow-y-auto", children: notifications.items && notifications.items.length > 0 ? notifications.items.map((notification) => /* @__PURE__ */ jsxs(
-                MoonUIDropdownMenuItemPro,
-                {
-                  className: "flex flex-col items-start p-4 cursor-pointer",
-                  onClick: () => notifications.onNotificationClick?.(notification.id),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start justify-between", children: [
-                      /* @__PURE__ */ jsx("p", { className: cn(
-                        "text-sm font-medium",
-                        !notification.read && "text-primary"
-                      ), children: notification.title }),
-                      !notification.read && /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary" })
+            /* @__PURE__ */ jsxs(
+              MoonUIDropdownMenuContentPro,
+              {
+                align: "end",
+                className: "w-[380px] p-0",
+                sideOffset: 8,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("h4", { className: "text-base font-semibold", children: "Notifications" }),
+                      notifications.count && notifications.count > 0 && /* @__PURE__ */ jsxs(
+                        MoonUIBadgePro,
+                        {
+                          variant: "secondary",
+                          className: "h-5 px-2 rounded-full bg-primary/10 text-primary border-0",
+                          children: [
+                            notifications.count,
+                            " new"
+                          ]
+                        }
+                      )
                     ] }),
-                    notification.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: notification.description }),
-                    notification.time && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-2", children: notification.time })
-                  ]
-                },
-                notification.id
-              )) : /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No notifications" }) })
-            ] })
+                    notifications.items && notifications.items.length > 0 && /* @__PURE__ */ jsx(
+                      MoonUIButtonPro,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        className: "text-xs h-7 px-2 text-muted-foreground hover:text-foreground",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          console.log("Mark all as read");
+                        },
+                        children: "Mark all read"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "max-h-[400px] overflow-y-auto", children: notifications.items && notifications.items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "py-1", children: notifications.items.map((notification, index2) => /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: cn(
+                          "w-full px-4 py-3 text-left hover:bg-muted/50 transition-colors",
+                          "focus:outline-none focus:bg-muted/50",
+                          !notification.read && "bg-primary/5 hover:bg-primary/10"
+                        ),
+                        onClick: () => notifications.onNotificationClick?.(notification.id),
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+                          /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx("div", { className: cn(
+                            "h-2 w-2 rounded-full",
+                            !notification.read ? "bg-primary" : "bg-transparent"
+                          ) }) }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+                            /* @__PURE__ */ jsx("p", { className: cn(
+                              "text-sm leading-tight",
+                              !notification.read ? "font-medium" : "font-normal"
+                            ), children: notification.title }),
+                            notification.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: notification.description }),
+                            notification.time && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 mt-1", children: notification.time })
+                          ] })
+                        ] })
+                      }
+                    ),
+                    index2 < (notifications.items?.length || 0) - 1 && /* @__PURE__ */ jsx("div", { className: "mx-4 border-b" })
+                  ] }, notification.id)) }) : /* @__PURE__ */ jsxs("div", { className: "py-12 text-center", children: [
+                    /* @__PURE__ */ jsx(Bell, { className: "h-10 w-10 mx-auto text-muted-foreground/30 mb-3" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "No new notifications" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 mt-1", children: "You're all caught up!" })
+                  ] }) }),
+                  notifications.items && notifications.items.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx(
+                    MoonUIButtonPro,
+                    {
+                      variant: "ghost",
+                      className: "w-full h-8 text-xs text-muted-foreground hover:text-foreground",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        console.log("View all notifications");
+                      },
+                      children: "View all notifications"
+                    }
+                  ) })
+                ]
+              }
+            )
           ] }),
           cta && /* @__PURE__ */ jsx(
             MoonUIButtonPro,
@@ -75560,34 +75627,52 @@ function NavbarInternal({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs(MoonUICommandDialogPro, { open: isCommandOpen, onOpenChange: setIsCommandOpen, children: [
-      /* @__PURE__ */ jsx(
-        MoonUICommandInputPro,
-        {
-          placeholder: searchPlaceholder,
-          value: searchValue,
-          onValueChange: handleSearch
-        }
-      ),
-      /* @__PURE__ */ jsxs(MoonUICommandListPro, { children: [
-        /* @__PURE__ */ jsx(MoonUICommandEmptyPro, { children: "No results found." }),
-        sections.map((section) => /* @__PURE__ */ jsx(MoonUICommandGroupPro, { children: section.items.map((item) => /* @__PURE__ */ jsx(
-          MoonUICommandItemPro,
-          {
-            disabled: item.disabled,
-            onSelect: () => {
-              handleItemClick(item);
-              setIsCommandOpen(false);
-            },
-            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-              item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
-              item.title
-            ] })
-          },
-          item.id
-        )) }, section.id))
-      ] })
-    ] })
+    /* @__PURE__ */ jsxs(
+      MoonUICommandDialogPro,
+      {
+        open: isCommandOpen,
+        onOpenChange: (open) => {
+          setIsCommandOpen(open);
+          if (!open) {
+            onCommandAIClose?.();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            MoonUICommandInputPro,
+            {
+              placeholder: enableCommandAI ? commandAIPlaceholder : searchPlaceholder,
+              value: searchValue,
+              onValueChange: handleSearch
+            }
+          ),
+          /* @__PURE__ */ jsxs(MoonUICommandListPro, { children: [
+            /* @__PURE__ */ jsx(MoonUICommandEmptyPro, { children: "No results found." }),
+            sections.map((section) => /* @__PURE__ */ jsx(MoonUICommandGroupPro, { heading: enableCommandAI ? "Commands" : void 0, children: section.items.map((item) => /* @__PURE__ */ jsxs(
+              MoonUICommandItemPro,
+              {
+                disabled: item.disabled,
+                onSelect: () => {
+                  if (enableCommandAI) {
+                    onCommandAISelect?.(item);
+                  }
+                  handleItemClick(item);
+                  setIsCommandOpen(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                    item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
+                    item.title
+                  ] }),
+                  item.description && enableCommandAI && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: item.description })
+                ]
+              },
+              item.id
+            )) }, section.id))
+          ] })
+        ]
+      }
+    )
   ] });
 }
 function Navbar(props) {

package/package.json

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