@ladder-ui/navigation-menu 0.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ivan Avila
+
+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/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { NavigationMenu, type NavigationMenuProps } from "./navigation-menu";
+export { NavigationMenuList, type NavigationMenuListProps, } from "./navigation-menu";
+export { NavigationMenuItem, type NavigationMenuItemProps, } from "./navigation-menu";
+export { NavigationMenuTrigger, type NavigationMenuTriggerProps, } from "./navigation-menu";
+export { NavigationMenuContent, type NavigationMenuContentProps, } from "./navigation-menu";
+export { NavigationMenuLink, type NavigationMenuLinkProps, } from "./navigation-menu";
+export { NavigationMenuViewport, type NavigationMenuViewportProps, } from "./navigation-menu";
+export { NavigationMenuIndicator, type NavigationMenuIndicatorProps, } from "./navigation-menu";
+export { NavigationMenu as default } from "./navigation-menu";

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("@ladder-ui/core/concatClassNames"),a=require("@ladder-ui/core");const i=n.createContext(null);function r(){const e=n.use(i);if(!e)throw new Error("NavigationMenu subcomponents must be used inside <NavigationMenu>");return e}const o=n.createContext(null);function u(){const e=n.use(o);if(!e)throw new Error("This component must be used inside <NavigationMenuItem>");return e}function s({ref:a,className:r,children:o,value:u,defaultValue:s,onValueChange:l,orientation:c="horizontal",delayDuration:d=200,skipDelayDuration:v=300,...m}){const f=n.useId(),g=n.useRef(null),p=n.useRef(0),N=n.useRef(void 0),h=n.useRef(void 0),x=void 0!==u,[y,k]=n.useState(s),w=x?u:y,_=n.useCallback(e=>{x||k(e),l?.(e),void 0===e&&(p.current=Date.now())},[x,l]),b=n.useCallback(e=>{g.current=e,"function"==typeof a?a(e):a&&"current"in a&&(a.current=e)},[a]);n.useEffect(()=>{const e=e=>{g.current&&!g.current.contains(e.target)&&_(void 0)};return document.addEventListener("pointerdown",e),()=>document.removeEventListener("pointerdown",e)},[_]),n.useEffect(()=>()=>{clearTimeout(N.current),clearTimeout(h.current)},[]);const M=n.useCallback(e=>{const n=g.current;if(!n)return;const t=Array.from(n.querySelectorAll('[data-slot="navigation-menu-trigger"]:not(:disabled)'));if(0===t.length)return;const a=document.activeElement,i=t.indexOf(a);if("Escape"===e.key)return _(void 0),void t[i]?.focus();const r="horizontal"===c,o=r?"ArrowRight":"ArrowDown",u=r?"ArrowLeft":"ArrowUp";if(e.key===o){e.preventDefault();const n=(i+1)%t.length;t[n]?.focus()}else if(e.key===u){e.preventDefault();const n=(i-1+t.length)%t.length;t[n]?.focus()}else if("Home"===e.key)e.preventDefault(),t[0]?.focus();else if("End"===e.key)e.preventDefault(),t[t.length-1]?.focus();else if("ArrowDown"===e.key&&r&&i>=0){e.preventDefault();const n=t[i],a=n?.getAttribute("aria-controls");if(a){const e=document.getElementById(a),n=e?.querySelector('a, button, [tabindex]:not([tabindex="-1"])');n?.focus()}}m.onKeyDown?.(e)},[c,_,m]),D=t("lui-navigation-menu","vertical"===c&&"lui-navigation-menu--vertical",r);return e.jsx(i,{value:{activeValue:w,setActiveValue:_,menuId:f,orientation:c,delayDuration:d,skipDelayDuration:v,lastCloseRef:p,openTimerRef:N,closeTimerRef:h},children:e.jsx("nav",{ref:b,className:D,"aria-label":m["aria-label"]??"Main navigation","data-slot":"navigation-menu","data-orientation":c,onKeyDown:M,...m,children:o})})}function l({ref:n,className:a,children:i,...o}){const{orientation:u}=r();return e.jsx("ul",{ref:n,className:t("lui-navigation-menu__list",a),"data-slot":"navigation-menu-list","data-orientation":u,...o,children:i})}function c({ref:a,className:i,children:u,value:s,...l}){const c=n.useId(),d=s??c,{menuId:v,setActiveValue:m,delayDuration:f,skipDelayDuration:g,lastCloseRef:p,openTimerRef:N,closeTimerRef:h}=r(),x=`${v}-trigger-${d}`,y=`${v}-content-${d}`,k=n.useCallback(()=>{clearTimeout(h.current),clearTimeout(N.current);const e=Date.now()-p.current<g?0:f;0===e?m(d):N.current=setTimeout(()=>{m(d)},e)},[m,d,f,g,p,N,h]),w=n.useCallback(()=>{clearTimeout(N.current),clearTimeout(h.current),h.current=setTimeout(()=>{m(void 0)},150)},[m,N,h]);return e.jsx(o,{value:{value:d,triggerId:x,contentId:y},children:e.jsx("li",{ref:a,className:t("lui-navigation-menu__item",i),"data-slot":"navigation-menu-item",onPointerEnter:k,onPointerLeave:w,...l,children:u})})}function d({ref:n,className:a,children:i,...o}){const{activeValue:s,setActiveValue:l}=r(),{value:c,triggerId:d,contentId:v}=u(),m=s===c;return e.jsxs("button",{ref:n,id:d,type:"button","aria-haspopup":"true","aria-expanded":m,"aria-controls":v,"data-slot":"navigation-menu-trigger","data-state":m?"open":"closed",className:t("lui-navigation-menu__trigger",m&&"lui-navigation-menu__trigger--open",a),onClick:()=>{o.disabled||l(m?void 0:c)},...o,children:[i,e.jsx("span",{"aria-hidden":"true",className:"lui-navigation-menu__trigger-icon",children:e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",focusable:"false",children:e.jsx("path",{d:"M2 4L6 8L10 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})}function v({ref:n,className:a,children:i,...o}){const{activeValue:s}=r(),{value:l,triggerId:c,contentId:d}=u();return s===l?e.jsx("div",{ref:n,id:d,"aria-labelledby":c,"data-slot":"navigation-menu-content","data-state":"open",className:t("lui-navigation-menu__content",a),...o,children:i}):null}function m({ref:n,className:i,children:r,active:o,href:u,rel:s,...l}){const c=null==u||a.isSafeHref(u),d=c?"a":"span",v="a"!==d||s?s:"noopener noreferrer";return e.jsx(d,{ref:n,href:c?u:void 0,rel:v,"aria-current":o?"page":void 0,"data-slot":"navigation-menu-link","data-active":o?"true":void 0,className:t("lui-navigation-menu__link",o&&"lui-navigation-menu__link--active",i),...l,children:r})}function f({ref:n,className:a,children:i,...o}){const{activeValue:u}=r();return e.jsx("div",{ref:n,"data-slot":"navigation-menu-viewport","data-state":u?"open":"closed",className:t("lui-navigation-menu__viewport",a),...o,children:i})}function g({ref:n,className:a,...i}){const{activeValue:o}=r();return o?e.jsx("div",{ref:n,"aria-hidden":"true","data-slot":"navigation-menu-indicator",className:t("lui-navigation-menu__indicator",a),...i,children:e.jsx("div",{className:"lui-navigation-menu__indicator-arrow"})}):null}s.displayName="NavigationMenu",l.displayName="NavigationMenuList",c.displayName="NavigationMenuItem",d.displayName="NavigationMenuTrigger",v.displayName="NavigationMenuContent",m.displayName="NavigationMenuLink",f.displayName="NavigationMenuViewport",g.displayName="NavigationMenuIndicator",exports.NavigationMenu=s,exports.NavigationMenuContent=v,exports.NavigationMenuIndicator=g,exports.NavigationMenuItem=c,exports.NavigationMenuLink=m,exports.NavigationMenuList=l,exports.NavigationMenuTrigger=d,exports.NavigationMenuViewport=f,exports.default=s;

package/dist/index.mjs

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{createContext as t,useId as a,useRef as i,useState as r,useCallback as o,useEffect as l,use as u}from"react";import c from"@ladder-ui/core/concatClassNames";import{isSafeHref as s}from"@ladder-ui/core";const d=t(null);function m(){const e=u(d);if(!e)throw new Error("NavigationMenu subcomponents must be used inside <NavigationMenu>");return e}const v=t(null);function f(){const e=u(v);if(!e)throw new Error("This component must be used inside <NavigationMenuItem>");return e}function g({ref:n,className:t,children:u,value:s,defaultValue:m,onValueChange:v,orientation:f="horizontal",delayDuration:g=200,skipDelayDuration:p=300,...h}){const N=a(),y=i(null),w=i(0),_=i(void 0),D=i(void 0),k=void 0!==s,[b,T]=r(m),M=k?s:b,I=o(e=>{k||T(e),v?.(e),void 0===e&&(w.current=Date.now())},[k,v]),A=o(e=>{y.current=e,"function"==typeof n?n(e):n&&"current"in n&&(n.current=e)},[n]);l(()=>{const e=e=>{y.current&&!y.current.contains(e.target)&&I(void 0)};return document.addEventListener("pointerdown",e),()=>document.removeEventListener("pointerdown",e)},[I]),l(()=>()=>{clearTimeout(_.current),clearTimeout(D.current)},[]);const V=o(e=>{const n=y.current;if(!n)return;const t=Array.from(n.querySelectorAll('[data-slot="navigation-menu-trigger"]:not(:disabled)'));if(0===t.length)return;const a=document.activeElement,i=t.indexOf(a);if("Escape"===e.key)return I(void 0),void t[i]?.focus();const r="horizontal"===f,o=r?"ArrowRight":"ArrowDown",l=r?"ArrowLeft":"ArrowUp";if(e.key===o){e.preventDefault();const n=(i+1)%t.length;t[n]?.focus()}else if(e.key===l){e.preventDefault();const n=(i-1+t.length)%t.length;t[n]?.focus()}else if("Home"===e.key)e.preventDefault(),t[0]?.focus();else if("End"===e.key)e.preventDefault(),t[t.length-1]?.focus();else if("ArrowDown"===e.key&&r&&i>=0){e.preventDefault();const n=t[i],a=n?.getAttribute("aria-controls");if(a){const e=document.getElementById(a),n=e?.querySelector('a, button, [tabindex]:not([tabindex="-1"])');n?.focus()}}h.onKeyDown?.(e)},[f,I,h]),L=c("lui-navigation-menu","vertical"===f&&"lui-navigation-menu--vertical",t);return e(d,{value:{activeValue:M,setActiveValue:I,menuId:N,orientation:f,delayDuration:g,skipDelayDuration:p,lastCloseRef:w,openTimerRef:_,closeTimerRef:D},children:e("nav",{ref:A,className:L,"aria-label":h["aria-label"]??"Main navigation","data-slot":"navigation-menu","data-orientation":f,onKeyDown:V,...h,children:u})})}function p({ref:n,className:t,children:a,...i}){const{orientation:r}=m();return e("ul",{ref:n,className:c("lui-navigation-menu__list",t),"data-slot":"navigation-menu-list","data-orientation":r,...i,children:a})}function h({ref:n,className:t,children:i,value:r,...l}){const u=a(),s=r??u,{menuId:d,setActiveValue:f,delayDuration:g,skipDelayDuration:p,lastCloseRef:h,openTimerRef:N,closeTimerRef:y}=m(),w=`${d}-trigger-${s}`,_=`${d}-content-${s}`,D=o(()=>{clearTimeout(y.current),clearTimeout(N.current);const e=Date.now()-h.current<p?0:g;0===e?f(s):N.current=setTimeout(()=>{f(s)},e)},[f,s,g,p,h,N,y]),k=o(()=>{clearTimeout(N.current),clearTimeout(y.current),y.current=setTimeout(()=>{f(void 0)},150)},[f,N,y]);return e(v,{value:{value:s,triggerId:w,contentId:_},children:e("li",{ref:n,className:c("lui-navigation-menu__item",t),"data-slot":"navigation-menu-item",onPointerEnter:D,onPointerLeave:k,...l,children:i})})}function N({ref:t,className:a,children:i,...r}){const{activeValue:o,setActiveValue:l}=m(),{value:u,triggerId:s,contentId:d}=f(),v=o===u;return n("button",{ref:t,id:s,type:"button","aria-haspopup":"true","aria-expanded":v,"aria-controls":d,"data-slot":"navigation-menu-trigger","data-state":v?"open":"closed",className:c("lui-navigation-menu__trigger",v&&"lui-navigation-menu__trigger--open",a),onClick:()=>{r.disabled||l(v?void 0:u)},...r,children:[i,e("span",{"aria-hidden":"true",className:"lui-navigation-menu__trigger-icon",children:e("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",focusable:"false",children:e("path",{d:"M2 4L6 8L10 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})}function y({ref:n,className:t,children:a,...i}){const{activeValue:r}=m(),{value:o,triggerId:l,contentId:u}=f();return r===o?e("div",{ref:n,id:u,"aria-labelledby":l,"data-slot":"navigation-menu-content","data-state":"open",className:c("lui-navigation-menu__content",t),...i,children:a}):null}function w({ref:n,className:t,children:a,active:i,href:r,rel:o,...l}){const u=null==r||s(r),d=u?"a":"span";return e(d,{ref:n,href:u?r:void 0,rel:"a"!==d||o?o:"noopener noreferrer","aria-current":i?"page":void 0,"data-slot":"navigation-menu-link","data-active":i?"true":void 0,className:c("lui-navigation-menu__link",i&&"lui-navigation-menu__link--active",t),...l,children:a})}function _({ref:n,className:t,children:a,...i}){const{activeValue:r}=m();return e("div",{ref:n,"data-slot":"navigation-menu-viewport","data-state":r?"open":"closed",className:c("lui-navigation-menu__viewport",t),...i,children:a})}function D({ref:n,className:t,...a}){const{activeValue:i}=m();return i?e("div",{ref:n,"aria-hidden":"true","data-slot":"navigation-menu-indicator",className:c("lui-navigation-menu__indicator",t),...a,children:e("div",{className:"lui-navigation-menu__indicator-arrow"})}):null}g.displayName="NavigationMenu",p.displayName="NavigationMenuList",h.displayName="NavigationMenuItem",N.displayName="NavigationMenuTrigger",y.displayName="NavigationMenuContent",w.displayName="NavigationMenuLink",_.displayName="NavigationMenuViewport",D.displayName="NavigationMenuIndicator";export{g as NavigationMenu,y as NavigationMenuContent,D as NavigationMenuIndicator,h as NavigationMenuItem,w as NavigationMenuLink,p as NavigationMenuList,N as NavigationMenuTrigger,_ as NavigationMenuViewport,g as default};

package/dist/navigation-menu.css

@@ -0,0 +1 @@
+@layer components{.lui-navigation-menu{align-items:center;display:flex;font-family:var(--lui-font-family);position:relative}.lui-navigation-menu--vertical{align-items:stretch;flex-direction:column}.lui-navigation-menu__list{align-items:center;display:flex;flex-direction:row;gap:var(--lui-navigation-menu-gap);list-style:none;margin:0;padding:0}.lui-navigation-menu--vertical .lui-navigation-menu__list{align-items:stretch;flex-direction:column}.lui-navigation-menu__item{align-items:center;display:flex;position:relative}.lui-navigation-menu--vertical .lui-navigation-menu__item{align-items:stretch;flex-direction:column}.lui-navigation-menu__trigger{align-items:center;background-color:var(--lui-navigation-menu-trigger-bg);border:none;border-radius:var(--lui-navigation-menu-trigger-radius);color:var(--lui-navigation-menu-trigger-text);cursor:pointer;display:inline-flex;font-family:var(--lui-font-family);font-size:var(--lui-navigation-menu-trigger-font-size);font-weight:var(--lui-navigation-menu-trigger-font-weight);gap:.375rem;line-height:1.25;padding-block:var(--lui-navigation-menu-trigger-padding-y);padding-inline:var(--lui-navigation-menu-trigger-padding-x);transition:var(--lui-transition);user-select:none;white-space:nowrap}.lui-navigation-menu__trigger:hover:not(:disabled){background-color:var(--lui-navigation-menu-trigger-bg-hover)}.lui-navigation-menu__trigger[data-state=open]{background-color:var(--lui-navigation-menu-trigger-bg-active)}.lui-navigation-menu__trigger:focus-visible{box-shadow:0 0 0 2px var(--lui-bg-surface),0 0 0 4px var(--lui-border-focus);outline:none}.lui-navigation-menu__trigger:disabled,.lui-navigation-menu__trigger[aria-disabled=true]{cursor:var(--lui-disabled-cursor);opacity:var(--lui-disabled-opacity);pointer-events:none}@media (prefers-reduced-motion:reduce){.lui-navigation-menu__trigger{transition:none}}.lui-navigation-menu__trigger-icon{align-items:center;color:var(--lui-text-secondary);display:inline-flex;transition:transform .2s ease}.lui-navigation-menu__trigger[data-state=open] .lui-navigation-menu__trigger-icon{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.lui-navigation-menu__trigger-icon{transition:none}}.lui-navigation-menu__content{animation:lui-navigation-menu-in .15s ease;background-color:var(--lui-navigation-menu-content-bg);border:1px solid var(--lui-navigation-menu-content-border);border-radius:var(--lui-navigation-menu-content-radius);box-shadow:var(--lui-navigation-menu-content-shadow);inset-inline-start:0;margin-block-start:.375rem;min-width:var(--lui-navigation-menu-content-min-width);padding:var(--lui-navigation-menu-content-padding);position:absolute;top:100%;z-index:var(--lui-z-dropdown)}@keyframes lui-navigation-menu-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.lui-navigation-menu__content{animation:none}}.lui-navigation-menu--vertical .lui-navigation-menu__content{border-bottom:none;border-inline-start:2px solid var(--lui-navigation-menu-content-border);border-radius:0;border-right:none;border-top:none;box-shadow:none;inset-inline-start:auto;margin-block-start:0;padding-inline-start:.875rem;position:static;top:auto}.lui-navigation-menu__link{align-items:center;border-radius:var(--lui-navigation-menu-link-radius);color:var(--lui-navigation-menu-link-text);cursor:pointer;display:flex;font-family:var(--lui-font-family);font-size:var(--lui-navigation-menu-link-font-size);font-weight:500;padding-block:var(--lui-navigation-menu-link-padding-y);padding-inline:var(--lui-navigation-menu-link-padding-x);text-decoration:none;transition:var(--lui-transition);user-select:none;white-space:nowrap}.lui-navigation-menu__link:hover{background-color:var(--lui-navigation-menu-link-bg-hover);text-decoration:none}.lui-navigation-menu__link:focus-visible{box-shadow:0 0 0 2px var(--lui-bg-surface),0 0 0 4px var(--lui-border-focus);outline:none}.lui-navigation-menu__link.lui-navigation-menu__link--active,.lui-navigation-menu__link[data-active=true]{background-color:var(--lui-navigation-menu-link-bg-hover);color:var(--lui-navigation-menu-link-text-active)}@media (prefers-reduced-motion:reduce){.lui-navigation-menu__link{transition:none}}.lui-navigation-menu__viewport{inset-inline-start:0;overflow:hidden;position:absolute;top:100%;width:100%}.lui-navigation-menu__viewport[data-state=closed]{display:none}.lui-navigation-menu__indicator{align-items:flex-end;animation:lui-navigation-menu-in .15s ease;display:flex;height:var(--lui-navigation-menu-indicator-size);inset-block-start:100%;justify-content:center;overflow:hidden;position:absolute;z-index:calc(var(--lui-z-dropdown) + 1)}@media (prefers-reduced-motion:reduce){.lui-navigation-menu__indicator{animation:none}}.lui-navigation-menu__indicator-arrow{background-color:var(--lui-navigation-menu-indicator-bg);border-block-start:1px solid var(--lui-navigation-menu-indicator-border);border-inline-start:1px solid var(--lui-navigation-menu-indicator-border);border-radius:2px 0 0 0;height:var(--lui-navigation-menu-indicator-size);position:relative;top:70%;transform:rotate(45deg);width:var(--lui-navigation-menu-indicator-size)}}

package/dist/navigation-menu.d.ts

@@ -0,0 +1,73 @@
+import type { Ref } from "react";
+export interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    /** Controlled active item value. Pass `undefined` to close all items. */
+    value?: string;
+    /** Default active item value (uncontrolled) */
+    defaultValue?: string;
+    /** Called when the active item changes. Receives `undefined` when closed. */
+    onValueChange?: (value: string | undefined) => void;
+    /** Layout orientation of the menu list */
+    orientation?: "horizontal" | "vertical";
+    /** Delay in ms before opening on hover. Default 200. */
+    delayDuration?: number;
+    /** After close, skip open-delay for this many ms. Default 300. */
+    skipDelayDuration?: number;
+}
+export declare function NavigationMenu({ ref, className, children, value: controlledValue, defaultValue, onValueChange, orientation, delayDuration, skipDelayDuration, ...props }: NavigationMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavigationMenu {
+    var displayName: string;
+}
+export interface NavigationMenuListProps extends React.HTMLAttributes<HTMLUListElement> {
+    ref?: Ref<HTMLUListElement>;
+}
+export declare function NavigationMenuList({ ref, className, children, ...props }: NavigationMenuListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavigationMenuList {
+    var displayName: string;
+}
+export interface NavigationMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    ref?: Ref<HTMLLIElement>;
+    /** Unique identifier for this menu item. Auto-generated if omitted. */
+    value?: string;
+}
+export declare function NavigationMenuItem({ ref, className, children, value: propValue, ...props }: NavigationMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavigationMenuItem {
+    var displayName: string;
+}
+export interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function NavigationMenuTrigger({ ref, className, children, ...props }: NavigationMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavigationMenuTrigger {
+    var displayName: string;
+}
+export interface NavigationMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function NavigationMenuContent({ ref, className, children, ...props }: NavigationMenuContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace NavigationMenuContent {
+    var displayName: string;
+}
+export interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    ref?: Ref<HTMLAnchorElement>;
+    /** Marks this link as the current page (sets aria-current="page") */
+    active?: boolean;
+}
+export declare function NavigationMenuLink({ ref, className, children, active, href, rel, ...props }: NavigationMenuLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavigationMenuLink {
+    var displayName: string;
+}
+export interface NavigationMenuViewportProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function NavigationMenuViewport({ ref, className, children, ...props }: NavigationMenuViewportProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavigationMenuViewport {
+    var displayName: string;
+}
+export interface NavigationMenuIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function NavigationMenuIndicator({ ref, className, ...props }: NavigationMenuIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace NavigationMenuIndicator {
+    var displayName: string;
+}

package/dist/navigation-menu.vars.css

@@ -0,0 +1 @@
+:root{--lui-navigation-menu-height:2.5rem;--lui-navigation-menu-gap:0.25rem;--lui-navigation-menu-trigger-bg:transparent;--lui-navigation-menu-trigger-bg-hover:var(--lui-bg-surface-raised);--lui-navigation-menu-trigger-bg-active:var(--lui-bg-surface-raised);--lui-navigation-menu-trigger-text:var(--lui-text-primary);--lui-navigation-menu-trigger-radius:var(--lui-radius-sm);--lui-navigation-menu-trigger-padding-x:0.875rem;--lui-navigation-menu-trigger-padding-y:0.5rem;--lui-navigation-menu-trigger-font-size:0.875rem;--lui-navigation-menu-trigger-font-weight:500;--lui-navigation-menu-content-bg:var(--lui-bg-surface);--lui-navigation-menu-content-border:var(--lui-border-default);--lui-navigation-menu-content-radius:var(--lui-radius-md);--lui-navigation-menu-content-shadow:0 4px 24px 0 rgba(0,0,0,.12);--lui-navigation-menu-content-padding:0.75rem;--lui-navigation-menu-content-min-width:14rem;--lui-navigation-menu-link-bg-hover:var(--lui-bg-surface-raised);--lui-navigation-menu-link-text:var(--lui-text-primary);--lui-navigation-menu-link-text-active:var(--lui-bg-interactive);--lui-navigation-menu-link-radius:var(--lui-radius-sm);--lui-navigation-menu-link-padding-x:0.875rem;--lui-navigation-menu-link-padding-y:0.5rem;--lui-navigation-menu-link-font-size:0.875rem;--lui-navigation-menu-indicator-bg:var(--lui-bg-surface);--lui-navigation-menu-indicator-border:var(--lui-border-default);--lui-navigation-menu-indicator-size:0.625rem}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@ladder-ui/navigation-menu",
+  "version": "0.10.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*.css": "./dist/*.css",
+    "./styles/*.css": "./dist/*.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "nodejs",
+    "react",
+    "ui",
+    "components",
+    "library"
+  ],
+  "author": "Ivan Avila <ivelaval@gmail.com> - https://www.vennet.dev",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/navigation-menu"
+  },
+  "bugs": {
+    "url": "https://github.com/ivelaval/ladder-ui/issues"
+  },
+  "homepage": "https://github.com/ivelaval/ladder-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^19.0.0",
+    "rollup": "^4.9.6",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.90.0",
+    "typescript": "^5.3.3",
+    "tslib": "^2.6.2",
+    "@ladder-ui/core": "0.10.0"
+  },
+  "peerDependencies": {
+    "@ladder-ui/core": ">=0.0.1",
+    "react": ">=18.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "pnpm clean && rollup -c",
+    "dev": "rollup -c -w",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}