@nucleux/navigation-menu 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @nucleux/navigation-menu
+
+Navigation menu with dropdown panels — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+## Install
+
+```bash
+pnpm add @nucleux/navigation-menu @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { NavigationMenu } from "@nucleux/navigation-menu";
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,139 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var NavContext = React__namespace.createContext(null);
+var ItemValueContext = React__namespace.createContext(null);
+var NavigationMenu = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const [openValue, setOpenValue] = React__namespace.useState(null);
+    React__namespace.useEffect(() => {
+      if (openValue === null) return;
+      const onKey = (e) => e.key === "Escape" && setOpenValue(null);
+      document.addEventListener("keydown", onKey);
+      return () => document.removeEventListener("keydown", onKey);
+    }, [openValue]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        ref,
+        className: utils.cn("relative flex justify-center", className),
+        onMouseLeave: () => setOpenValue(null),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value: { openValue, setOpenValue }, children })
+      }
+    );
+  }
+);
+NavigationMenu.displayName = "NavigationMenu";
+var NavigationMenuList = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("ul", { ref, className: utils.cn("flex items-center gap-1", className), ...props })
+);
+NavigationMenuList.displayName = "NavigationMenuList";
+var NavigationMenuItem = React__namespace.forwardRef(
+  ({ value, className, children, ...props }, ref) => {
+    const generated = React__namespace.useId();
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemValueContext.Provider, { value: value ?? generated, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: utils.cn("relative", className), ...props, children }) });
+  }
+);
+NavigationMenuItem.displayName = "NavigationMenuItem";
+var triggerBase = "inline-flex h-9 items-center gap-1 rounded-md px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring";
+var NavigationMenuTrigger = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const nav = React__namespace.useContext(NavContext);
+    const value = React__namespace.useContext(ItemValueContext);
+    if (!nav || value === null) throw new Error("NavigationMenuTrigger must be used within a NavigationMenuItem");
+    const open = nav.openValue === value;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        onMouseEnter: () => nav.setOpenValue(value),
+        onFocus: () => nav.setOpenValue(value),
+        onClick: () => nav.setOpenValue(open ? null : value),
+        className: utils.cn(triggerBase, open && "bg-accent", className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: utils.cn("h-4 w-4 transition-transform", open && "rotate-180") })
+        ]
+      }
+    );
+  }
+);
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+var NavigationMenuContent = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const nav = React__namespace.useContext(NavContext);
+    const value = React__namespace.useContext(ItemValueContext);
+    if (!nav || value === null) throw new Error("NavigationMenuContent must be used within a NavigationMenuItem");
+    if (nav.openValue !== value) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "menu",
+        className: utils.cn(
+          "absolute left-0 top-full z-50 mt-1.5 min-w-[16rem] animate-nx-fade-in rounded-lg border border-border bg-background p-2 text-foreground shadow-md",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+NavigationMenuContent.displayName = "NavigationMenuContent";
+var NavigationMenuLink = React__namespace.forwardRef(
+  ({ className, active = false, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      ref,
+      "aria-current": active ? "page" : void 0,
+      className: utils.cn(
+        "block rounded-md px-3 py-2 text-sm text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
+        active && "bg-accent font-medium",
+        className
+      ),
+      ...props
+    }
+  )
+);
+NavigationMenuLink.displayName = "NavigationMenuLink";
+
+exports.NavigationMenu = NavigationMenu;
+exports.NavigationMenuContent = NavigationMenuContent;
+exports.NavigationMenuItem = NavigationMenuItem;
+exports.NavigationMenuLink = NavigationMenuLink;
+exports.NavigationMenuList = NavigationMenuList;
+exports.NavigationMenuTrigger = NavigationMenuTrigger;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","cn","jsxs","ChevronDown"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\n\ninterface NavContextValue {\n  openValue: string | null;\n  setOpenValue: (v: string | null) => void;\n}\nconst NavContext = React.createContext<NavContextValue | null>(null);\nconst ItemValueContext = React.createContext<string | null>(null);\n\nexport type NavigationMenuProps = React.HTMLAttributes<HTMLElement>;\n\n/** A site navigation bar with hover/focus-revealed dropdown panels. */\nexport const NavigationMenu = React.forwardRef<HTMLElement, NavigationMenuProps>(\n  ({ className, children, ...props }, ref) => {\n    const [openValue, setOpenValue] = React.useState<string | null>(null);\n\n    React.useEffect(() => {\n      if (openValue === null) return;\n      const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && setOpenValue(null);\n      document.addEventListener(\"keydown\", onKey);\n      return () => document.removeEventListener(\"keydown\", onKey);\n    }, [openValue]);\n\n    return (\n      <nav\n        ref={ref}\n        className={cn(\"relative flex justify-center\", className)}\n        onMouseLeave={() => setOpenValue(null)}\n        {...props}\n      >\n        <NavContext.Provider value={{ openValue, setOpenValue }}>{children}</NavContext.Provider>\n      </nav>\n    );\n  },\n);\nNavigationMenu.displayName = \"NavigationMenu\";\n\nexport type NavigationMenuListProps = React.HTMLAttributes<HTMLUListElement>;\n\nexport const NavigationMenuList = React.forwardRef<HTMLUListElement, NavigationMenuListProps>(\n  ({ className, ...props }, ref) => (\n    <ul ref={ref} className={cn(\"flex items-center gap-1\", className)} {...props} />\n  ),\n);\nNavigationMenuList.displayName = \"NavigationMenuList\";\n\nexport interface NavigationMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  value?: string;\n}\n\n/** A single entry in the {@link NavigationMenuList}. */\nexport const NavigationMenuItem = React.forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n  ({ value, className, children, ...props }, ref) => {\n    const generated = React.useId();\n    return (\n      <ItemValueContext.Provider value={value ?? generated}>\n        <li ref={ref} className={cn(\"relative\", className)} {...props}>\n          {children}\n        </li>\n      </ItemValueContext.Provider>\n    );\n  },\n);\nNavigationMenuItem.displayName = \"NavigationMenuItem\";\n\nconst triggerBase =\n  \"inline-flex h-9 items-center gap-1 rounded-md px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring\";\n\nexport type NavigationMenuTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/** Opens the associated {@link NavigationMenuContent} on hover/focus. */\nexport const NavigationMenuTrigger = React.forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n  ({ className, children, ...props }, ref) => {\n    const nav = React.useContext(NavContext);\n    const value = React.useContext(ItemValueContext);\n    if (!nav || value === null) throw new Error(\"NavigationMenuTrigger must be used within a NavigationMenuItem\");\n    const open = nav.openValue === value;\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        onMouseEnter={() => nav.setOpenValue(value)}\n        onFocus={() => nav.setOpenValue(value)}\n        onClick={() => nav.setOpenValue(open ? null : value)}\n        className={cn(triggerBase, open && \"bg-accent\", className)}\n        {...props}\n      >\n        {children}\n        <ChevronDown aria-hidden className={cn(\"h-4 w-4 transition-transform\", open && \"rotate-180\")} />\n      </button>\n    );\n  },\n);\nNavigationMenuTrigger.displayName = \"NavigationMenuTrigger\";\n\nexport type NavigationMenuContentProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** The dropdown panel shown when its trigger is active. */\nexport const NavigationMenuContent = React.forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const nav = React.useContext(NavContext);\n    const value = React.useContext(ItemValueContext);\n    if (!nav || value === null) throw new Error(\"NavigationMenuContent must be used within a NavigationMenuItem\");\n    if (nav.openValue !== value) return null;\n    return (\n      <div\n        ref={ref}\n        role=\"menu\"\n        className={cn(\n          \"absolute left-0 top-full z-50 mt-1.5 min-w-[16rem] animate-nx-fade-in rounded-lg border border-border bg-background p-2 text-foreground shadow-md\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nNavigationMenuContent.displayName = \"NavigationMenuContent\";\n\nexport interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  active?: boolean;\n}\n\n/** A navigation link, usable at the top level or inside content panels. */\nexport const NavigationMenuLink = React.forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n  ({ className, active = false, ...props }, ref) => (\n    <a\n      ref={ref}\n      aria-current={active ? \"page\" : undefined}\n      className={cn(\n        \"block rounded-md px-3 py-2 text-sm text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring\",\n        active && \"bg-accent font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nNavigationMenuLink.displayName = \"NavigationMenuLink\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+type NavigationMenuProps = React.HTMLAttributes<HTMLElement>;
+/** A site navigation bar with hover/focus-revealed dropdown panels. */
+declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+type NavigationMenuListProps = React.HTMLAttributes<HTMLUListElement>;
+declare const NavigationMenuList: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+interface NavigationMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    value?: string;
+}
+/** A single entry in the {@link NavigationMenuList}. */
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+type NavigationMenuTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+/** Opens the associated {@link NavigationMenuContent} on hover/focus. */
+declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type NavigationMenuContentProps = React.HTMLAttributes<HTMLDivElement>;
+/** The dropdown panel shown when its trigger is active. */
+declare const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    active?: boolean;
+}
+/** A navigation link, usable at the top level or inside content panels. */
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+
+export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+type NavigationMenuProps = React.HTMLAttributes<HTMLElement>;
+/** A site navigation bar with hover/focus-revealed dropdown panels. */
+declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+type NavigationMenuListProps = React.HTMLAttributes<HTMLUListElement>;
+declare const NavigationMenuList: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+interface NavigationMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    value?: string;
+}
+/** A single entry in the {@link NavigationMenuList}. */
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+type NavigationMenuTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+/** Opens the associated {@link NavigationMenuContent} on hover/focus. */
+declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type NavigationMenuContentProps = React.HTMLAttributes<HTMLDivElement>;
+/** The dropdown panel shown when its trigger is active. */
+declare const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    active?: boolean;
+}
+/** A navigation link, usable at the top level or inside content panels. */
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+
+export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps };

package/dist/index.js

@@ -0,0 +1,112 @@
+"use client";
+import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@nucleux/utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/index.tsx
+var NavContext = React.createContext(null);
+var ItemValueContext = React.createContext(null);
+var NavigationMenu = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const [openValue, setOpenValue] = React.useState(null);
+    React.useEffect(() => {
+      if (openValue === null) return;
+      const onKey = (e) => e.key === "Escape" && setOpenValue(null);
+      document.addEventListener("keydown", onKey);
+      return () => document.removeEventListener("keydown", onKey);
+    }, [openValue]);
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        className: cn("relative flex justify-center", className),
+        onMouseLeave: () => setOpenValue(null),
+        ...props,
+        children: /* @__PURE__ */ jsx(NavContext.Provider, { value: { openValue, setOpenValue }, children })
+      }
+    );
+  }
+);
+NavigationMenu.displayName = "NavigationMenu";
+var NavigationMenuList = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", { ref, className: cn("flex items-center gap-1", className), ...props })
+);
+NavigationMenuList.displayName = "NavigationMenuList";
+var NavigationMenuItem = React.forwardRef(
+  ({ value, className, children, ...props }, ref) => {
+    const generated = React.useId();
+    return /* @__PURE__ */ jsx(ItemValueContext.Provider, { value: value ?? generated, children: /* @__PURE__ */ jsx("li", { ref, className: cn("relative", className), ...props, children }) });
+  }
+);
+NavigationMenuItem.displayName = "NavigationMenuItem";
+var triggerBase = "inline-flex h-9 items-center gap-1 rounded-md px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring";
+var NavigationMenuTrigger = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const nav = React.useContext(NavContext);
+    const value = React.useContext(ItemValueContext);
+    if (!nav || value === null) throw new Error("NavigationMenuTrigger must be used within a NavigationMenuItem");
+    const open = nav.openValue === value;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        onMouseEnter: () => nav.setOpenValue(value),
+        onFocus: () => nav.setOpenValue(value),
+        onClick: () => nav.setOpenValue(open ? null : value),
+        className: cn(triggerBase, open && "bg-accent", className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: cn("h-4 w-4 transition-transform", open && "rotate-180") })
+        ]
+      }
+    );
+  }
+);
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+var NavigationMenuContent = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const nav = React.useContext(NavContext);
+    const value = React.useContext(ItemValueContext);
+    if (!nav || value === null) throw new Error("NavigationMenuContent must be used within a NavigationMenuItem");
+    if (nav.openValue !== value) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "menu",
+        className: cn(
+          "absolute left-0 top-full z-50 mt-1.5 min-w-[16rem] animate-nx-fade-in rounded-lg border border-border bg-background p-2 text-foreground shadow-md",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+NavigationMenuContent.displayName = "NavigationMenuContent";
+var NavigationMenuLink = React.forwardRef(
+  ({ className, active = false, ...props }, ref) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref,
+      "aria-current": active ? "page" : void 0,
+      className: cn(
+        "block rounded-md px-3 py-2 text-sm text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
+        active && "bg-accent font-medium",
+        className
+      ),
+      ...props
+    }
+  )
+);
+NavigationMenuLink.displayName = "NavigationMenuLink";
+
+export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\n\ninterface NavContextValue {\n  openValue: string | null;\n  setOpenValue: (v: string | null) => void;\n}\nconst NavContext = React.createContext<NavContextValue | null>(null);\nconst ItemValueContext = React.createContext<string | null>(null);\n\nexport type NavigationMenuProps = React.HTMLAttributes<HTMLElement>;\n\n/** A site navigation bar with hover/focus-revealed dropdown panels. */\nexport const NavigationMenu = React.forwardRef<HTMLElement, NavigationMenuProps>(\n  ({ className, children, ...props }, ref) => {\n    const [openValue, setOpenValue] = React.useState<string | null>(null);\n\n    React.useEffect(() => {\n      if (openValue === null) return;\n      const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && setOpenValue(null);\n      document.addEventListener(\"keydown\", onKey);\n      return () => document.removeEventListener(\"keydown\", onKey);\n    }, [openValue]);\n\n    return (\n      <nav\n        ref={ref}\n        className={cn(\"relative flex justify-center\", className)}\n        onMouseLeave={() => setOpenValue(null)}\n        {...props}\n      >\n        <NavContext.Provider value={{ openValue, setOpenValue }}>{children}</NavContext.Provider>\n      </nav>\n    );\n  },\n);\nNavigationMenu.displayName = \"NavigationMenu\";\n\nexport type NavigationMenuListProps = React.HTMLAttributes<HTMLUListElement>;\n\nexport const NavigationMenuList = React.forwardRef<HTMLUListElement, NavigationMenuListProps>(\n  ({ className, ...props }, ref) => (\n    <ul ref={ref} className={cn(\"flex items-center gap-1\", className)} {...props} />\n  ),\n);\nNavigationMenuList.displayName = \"NavigationMenuList\";\n\nexport interface NavigationMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  value?: string;\n}\n\n/** A single entry in the {@link NavigationMenuList}. */\nexport const NavigationMenuItem = React.forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n  ({ value, className, children, ...props }, ref) => {\n    const generated = React.useId();\n    return (\n      <ItemValueContext.Provider value={value ?? generated}>\n        <li ref={ref} className={cn(\"relative\", className)} {...props}>\n          {children}\n        </li>\n      </ItemValueContext.Provider>\n    );\n  },\n);\nNavigationMenuItem.displayName = \"NavigationMenuItem\";\n\nconst triggerBase =\n  \"inline-flex h-9 items-center gap-1 rounded-md px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring\";\n\nexport type NavigationMenuTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/** Opens the associated {@link NavigationMenuContent} on hover/focus. */\nexport const NavigationMenuTrigger = React.forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n  ({ className, children, ...props }, ref) => {\n    const nav = React.useContext(NavContext);\n    const value = React.useContext(ItemValueContext);\n    if (!nav || value === null) throw new Error(\"NavigationMenuTrigger must be used within a NavigationMenuItem\");\n    const open = nav.openValue === value;\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        onMouseEnter={() => nav.setOpenValue(value)}\n        onFocus={() => nav.setOpenValue(value)}\n        onClick={() => nav.setOpenValue(open ? null : value)}\n        className={cn(triggerBase, open && \"bg-accent\", className)}\n        {...props}\n      >\n        {children}\n        <ChevronDown aria-hidden className={cn(\"h-4 w-4 transition-transform\", open && \"rotate-180\")} />\n      </button>\n    );\n  },\n);\nNavigationMenuTrigger.displayName = \"NavigationMenuTrigger\";\n\nexport type NavigationMenuContentProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** The dropdown panel shown when its trigger is active. */\nexport const NavigationMenuContent = React.forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const nav = React.useContext(NavContext);\n    const value = React.useContext(ItemValueContext);\n    if (!nav || value === null) throw new Error(\"NavigationMenuContent must be used within a NavigationMenuItem\");\n    if (nav.openValue !== value) return null;\n    return (\n      <div\n        ref={ref}\n        role=\"menu\"\n        className={cn(\n          \"absolute left-0 top-full z-50 mt-1.5 min-w-[16rem] animate-nx-fade-in rounded-lg border border-border bg-background p-2 text-foreground shadow-md\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nNavigationMenuContent.displayName = \"NavigationMenuContent\";\n\nexport interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  active?: boolean;\n}\n\n/** A navigation link, usable at the top level or inside content panels. */\nexport const NavigationMenuLink = React.forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n  ({ className, active = false, ...props }, ref) => (\n    <a\n      ref={ref}\n      aria-current={active ? \"page\" : undefined}\n      className={cn(\n        \"block rounded-md px-3 py-2 text-sm text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring\",\n        active && \"bg-accent font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nNavigationMenuLink.displayName = \"NavigationMenuLink\";\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@nucleux/navigation-menu",
+  "version": "0.2.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Navigation menu with dropdown panels — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "navigation-menu"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "lucide-react": "^0.469.0",
+    "@nucleux/utils": "0.2.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/navigation-menu"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
+}