@moontra/moonui-pro 2.25.18 → 2.25.19

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: [
@@ -75560,34 +75573,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.19",
     "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",