@skdx/react 0.26.0 → 0.28.0

package/dist/navigation-menu/NavigationMenu.js

@@ -1 +1 @@
-import*as a from"react";import{createSafeContext as B}from"../utils/createContext.js";import{skdxPart as z}from"../utils/part.js";import{Primitive as A}from"../utils/primitive.js";import{useControllableState as G}from"../utils/useControllableState.js";import{jsx as w}from"react/jsx-runtime";var _=150,[F,g]=B("NavigationMenu"),U=a.forwardRef(({value:n,defaultValue:e,onValueChange:o,delayDuration:t=200,skipDelayDuration:i=300,...u},l)=>{let r=a.useRef(!0),c=a.useRef(0),s=a.useRef(0),R=a.useRef(0),[h="",m]=G({prop:n,defaultProp:e??"",onChange:v=>{window.clearTimeout(R.current),v?r.current=!1:R.current=window.setTimeout(()=>{r.current=!0},i),o?.(v)}});a.useEffect(()=>()=>{window.clearTimeout(c.current),window.clearTimeout(s.current),window.clearTimeout(R.current)},[]);let S=a.useCallback(v=>{window.clearTimeout(s.current),window.clearTimeout(c.current),r.current?c.current=window.setTimeout(()=>m(v),t):m(v)},[m,t]),P=a.useCallback(()=>{window.clearTimeout(c.current),window.clearTimeout(s.current),s.current=window.setTimeout(()=>m(""),_)},[m]),K=a.useCallback(()=>{window.clearTimeout(s.current)},[]),O=a.useCallback(v=>{window.clearTimeout(c.current),window.clearTimeout(s.current),m(v)},[m]),V=a.useCallback(()=>{window.clearTimeout(c.current),window.clearTimeout(s.current),m("")},[m]);return w(F,{value:h,onTriggerEnter:S,onTriggerLeave:P,onContentEnter:K,onContentLeave:P,onItemSelect:O,onClose:V,children:w(A.nav,{"aria-label":u["aria-label"]??"Main",...u,...z("navigation-menu","root",u.className),ref:l})})});U.displayName="NavigationMenu";import*as T from"react";import{skdxPart as Y}from"../utils/part.js";import{composeEventHandlers as q,Primitive as J}from"../utils/primitive.js";import{useRovingFocus as Q}from"../utils/useRovingFocus.js";import{jsx as X}from"react/jsx-runtime";var W="[data-skdx-nav-trigger]",y=T.forwardRef(({loop:n=!0,...e},o)=>{let t=Q({orientation:"horizontal",loop:n,itemSelector:W});return X(J.ul,{"data-orientation":"horizontal",...e,...Y("navigation-menu","list",e.className),ref:o,onKeyDown:q(e.onKeyDown,t)})});y.displayName="NavigationMenuList";import*as d from"react";import{createSafeContext as Z}from"../utils/createContext.js";import{skdxPart as $}from"../utils/part.js";import{Primitive as j}from"../utils/primitive.js";import{jsx as I}from"react/jsx-runtime";var[ee,p]=Z("NavigationMenuItem"),x=d.forwardRef(({value:n,...e},o)=>{let t=d.useId(),i=d.useId();return I(ee,{value:n,triggerId:t,contentId:i,children:I(j.li,{...e,...$("navigation-menu","item",e.className),ref:o})})});x.displayName="NavigationMenuItem";import*as M from"react";import{skdxPart as te}from"../utils/part.js";import{composeEventHandlers as N,Primitive as ne}from"../utils/primitive.js";import{jsx as oe}from"react/jsx-runtime";var L=M.forwardRef((n,e)=>{let o=g("NavigationMenuTrigger"),t=p("NavigationMenuTrigger"),i=o.value===t.value,u=M.useRef(!1),l=()=>{i&&!u.current?o.onClose():o.onItemSelect(t.value)};return oe(ne.button,{type:"button",id:t.triggerId,"aria-expanded":i,"aria-controls":t.contentId,"data-skdx-nav-trigger":"","data-state":i?"open":"closed",...n,...te("navigation-menu","trigger",n.className),ref:e,onPointerEnter:N(n.onPointerEnter,r=>{r.pointerType!=="touch"&&(u.current=!0,o.onTriggerEnter(t.value))}),onPointerLeave:N(n.onPointerLeave,r=>{r.pointerType!=="touch"&&(u.current=!1,o.onTriggerLeave())}),onClick:N(n.onClick,l),onKeyDown:N(n.onKeyDown,r=>{r.key==="Escape"?(o.onClose(),r.currentTarget.focus()):[" ","Enter"].includes(r.key)&&(r.preventDefault(),l())})})});L.displayName="NavigationMenuTrigger";import*as f from"react";import{useComposedRefs as ie}from"../utils/composeRefs.js";import{skdxPart as ae}from"../utils/part.js";import{composeEventHandlers as C,Primitive as re}from"../utils/primitive.js";import{useDismiss as ue}from"../utils/useDismiss.js";import{jsx as se}from"react/jsx-runtime";var E=f.forwardRef(({forceMount:n,...e},o)=>{let t=g("NavigationMenuContent"),i=p("NavigationMenuContent"),u=t.value===i.value,l=f.useRef(null),r=ie(o,l),c=f.useMemo(()=>({get current(){return typeof document>"u"?null:document.getElementById(i.triggerId)}}),[i.triggerId]);return ue({enabled:u,onPointerDownOutside:t.onClose},[l,c]),n||u?se(re.div,{role:"region",id:i.contentId,"aria-labelledby":i.triggerId,"data-state":u?"open":"closed",...e,...ae("navigation-menu","content",e.className),ref:r,onPointerEnter:C(e.onPointerEnter,t.onContentEnter),onPointerLeave:C(e.onPointerLeave,t.onContentLeave),onKeyDown:C(e.onKeyDown,s=>{s.key==="Escape"&&(t.onClose(),document.getElementById(i.triggerId)?.focus())})}):null});E.displayName="NavigationMenuContent";import*as k from"react";import{skdxPart as me}from"../utils/part.js";import{composeEventHandlers as ce,Primitive as ge}from"../utils/primitive.js";import{jsx as le}from"react/jsx-runtime";var b=k.forwardRef(({active:n,...e},o)=>{let t=g("NavigationMenuLink");return le(ge.a,{"data-skdx-nav-trigger":"","data-active":n?"":void 0,"aria-current":n?"page":void 0,...e,...me("navigation-menu","link",e.className),ref:o,onClick:ce(e.onClick,t.onClose)})});b.displayName="NavigationMenuLink";import*as D from"react";import{skdxPart as ve}from"../utils/part.js";import{Primitive as fe}from"../utils/primitive.js";import{jsx as de}from"react/jsx-runtime";var H=D.forwardRef(({forceMount:n,...e},o)=>{let i=g("NavigationMenuIndicator").value!=="";return n||i?de(fe.div,{"data-state":i?"visible":"hidden",...e,...ve("navigation-menu","indicator",e.className),ref:o}):null});H.displayName="NavigationMenuIndicator";export{U as NavigationMenu,E as NavigationMenuContent,H as NavigationMenuIndicator,x as NavigationMenuItem,b as NavigationMenuLink,y as NavigationMenuList,F as NavigationMenuRootProvider,L as NavigationMenuTrigger,g as useNavigationMenuContext};
+import*as a from"react";import{useComposedRefs as be}from"../utils/composeRefs.js";import{createSafeContext as he}from"../utils/createContext.js";import{skdxPart as De}from"../utils/part.js";import{Primitive as He}from"../utils/primitive.js";import{useControllableState as Se}from"../utils/useControllableState.js";import*as d from"react";import{useComposedRefs as se}from"../utils/composeRefs.js";import{skdxPart as me}from"../utils/part.js";import{composeEventHandlers as G,Primitive as ce}from"../utils/primitive.js";import{useDismiss as le}from"../utils/useDismiss.js";import*as M from"react";import{createSafeContext as ie}from"../utils/createContext.js";import{skdxPart as ae}from"../utils/part.js";import{Primitive as re}from"../utils/primitive.js";import{jsx as F}from"react/jsx-runtime";var[ue,y]=ie("NavigationMenuItem"),E=M.forwardRef(({value:i,...t},e)=>{let o=M.useId(),n=M.useId();return F(ue,{value:i,triggerId:o,contentId:n,children:F(re.li,{...t,...ae("navigation-menu","item",t.className),ref:e})})});E.displayName="NavigationMenuItem";import{jsx as ge}from"react/jsx-runtime";var b=d.forwardRef(({forceMount:i,...t},e)=>{let o=m("NavigationMenuContent"),n=y("NavigationMenuContent"),r=o.value===n.value,l=d.useRef(null),u=se(e,l),g=d.useMemo(()=>({get current(){return typeof document>"u"?null:document.getElementById(n.triggerId)}}),[n.triggerId]);return le({enabled:r,onEscapeKeyDown:()=>{o.onClose(),document.getElementById(n.triggerId)?.focus()},onPointerDownOutside:o.onClose,onFocusOutside:o.onClose},[l,g]),i||r?ge(ce.div,{role:"region",id:n.contentId,"aria-labelledby":n.triggerId,"data-state":r?"open":"closed",...t,...me("navigation-menu","content",t.className),ref:u,onPointerEnter:G(t.onPointerEnter,o.onContentEnter),onPointerLeave:G(t.onPointerLeave,o.onContentLeave)}):null});b.displayName="NavigationMenuContent";import*as _ from"react";import{skdxPart as fe}from"../utils/part.js";import{Primitive as ve}from"../utils/primitive.js";import{jsx as pe}from"react/jsx-runtime";var h=_.forwardRef(({forceMount:i,...t},e)=>{let n=m("NavigationMenuIndicator").value!==null;return i||n?pe(ve.div,{"data-state":n?"visible":"hidden",...t,...fe("navigation-menu","indicator",t.className),ref:e}):null});h.displayName="NavigationMenuIndicator";import*as $ from"react";import{skdxPart as de}from"../utils/part.js";import{composeEventHandlers as Ne,Primitive as Me}from"../utils/primitive.js";import{jsx as Re}from"react/jsx-runtime";var w=$.forwardRef(({active:i,...t},e)=>{let o=m("NavigationMenuLink");return Re(Me.a,{"data-skdx-nav-trigger":"","data-active":i?"":void 0,"aria-current":i?"page":void 0,...t,...de("navigation-menu","link",t.className),ref:e,onClick:Ne(t.onClick,o.onLinkSelect)})});w.displayName="NavigationMenuLink";import*as q from"react";import{skdxPart as Ce}from"../utils/part.js";import{composeEventHandlers as ye,Primitive as we}from"../utils/primitive.js";import{useRovingFocus as xe}from"../utils/useRovingFocus.js";import{jsx as Te}from"react/jsx-runtime";var Pe=":scope > li > [data-skdx-nav-trigger]",D=q.forwardRef(({loop:i=!0,...t},e)=>{let{orientation:o}=m("NavigationMenuList"),n=xe({orientation:o,loop:i,itemSelector:Pe});return Te(we.ul,{role:"list","data-orientation":o,...t,...Ce("navigation-menu","list",t.className),ref:e,onKeyDown:ye(t.onKeyDown,n)})});D.displayName="NavigationMenuList";import*as P from"react";import{skdxPart as Ie}from"../utils/part.js";import{composeEventHandlers as x,Primitive as Le}from"../utils/primitive.js";import{tabbablesWithin as ke}from"../utils/tabbable.js";import{jsx as Ee}from"react/jsx-runtime";var H=P.forwardRef((i,t)=>{let e=m("NavigationMenuTrigger"),o=y("NavigationMenuTrigger"),n=e.value===o.value,r=P.useRef(!1),l=()=>{n&&!r.current?e.onClose():e.onItemSelect(o.value)};return Ee(Le.button,{type:"button",id:o.triggerId,"aria-expanded":n,"aria-controls":o.contentId,"data-skdx-nav-trigger":"","data-state":n?"open":"closed",...i,...Ie("navigation-menu","trigger",i.className),ref:t,onPointerEnter:x(i.onPointerEnter,u=>{u.pointerType!=="touch"&&(r.current=!0,e.onTriggerEnter(o.value))}),onPointerLeave:x(i.onPointerLeave,u=>{u.pointerType!=="touch"&&(r.current=!1,e.onTriggerLeave())}),onClick:x(i.onClick,l),onKeyDown:x(i.onKeyDown,u=>{if([" ","Enter"].includes(u.key))u.preventDefault(),l();else if(u.key==="ArrowDown"&&n&&e.orientation==="horizontal"){let g=u.currentTarget.ownerDocument.getElementById(o.contentId),N=g&&ke(g)[0];if(!N)return;u.preventDefault(),u.stopPropagation(),N.focus()}})})});H.displayName="NavigationMenuTrigger";import{Fragment as U,jsx as v,jsxs as W}from"react/jsx-runtime";var Y=({items:i=[],renderItem:t})=>W(U,{children:[v(D,{children:i.map((e,o)=>{let n=e.value??String(o);return v(E,{value:n,children:"items"in e?W(U,{children:[v(H,{children:e.label}),v(b,{children:t?t(e):e.items.map(r=>v(w,{href:r.href,active:r.active,children:r.label},r.href))})]}):v(w,{href:e.href,active:e.active,children:t?t(e):e.label})},n)})}),v(h,{})]});import{jsx as S}from"react/jsx-runtime";var Be=150,[ze,m]=he("NavigationMenu"),J=a.forwardRef(({children:i,items:t,renderItem:e,value:o,defaultValue:n,onValueChange:r,delayDuration:l=200,skipDelayDuration:u=300,closeDelayDuration:g=Be,closeOnSelect:N=!0,orientation:R="horizontal",...B},Q)=>{let z=a.useRef(null),X=be(Q,z),T=a.useRef(!0),p=a.useRef(0),f=a.useRef(0),I=a.useRef(0),[L=null,c]=Se({prop:o,defaultProp:n,onChange:s=>{window.clearTimeout(I.current),s!==null?T.current=!1:I.current=window.setTimeout(()=>{T.current=!0},u),r?.(s)}});a.useEffect(()=>()=>{window.clearTimeout(p.current),window.clearTimeout(f.current),window.clearTimeout(I.current)},[]);let Z=a.useCallback(s=>{window.clearTimeout(f.current),window.clearTimeout(p.current),T.current?p.current=window.setTimeout(()=>c(s),l):c(s)},[c,l]),K=a.useCallback(()=>{window.clearTimeout(p.current),window.clearTimeout(f.current),f.current=window.setTimeout(()=>c(null),g)},[c,g]),j=a.useCallback(()=>{window.clearTimeout(f.current)},[]),ee=a.useCallback(s=>{window.clearTimeout(p.current),window.clearTimeout(f.current),c(s)},[c]),k=a.useCallback(()=>{window.clearTimeout(p.current),window.clearTimeout(f.current),c(null)},[c]),te=a.useCallback(()=>{N&&k()},[N,k]);return a.useLayoutEffect(()=>{let s=z.current;if(!s||L===null)return;let O=s.querySelector('[data-skdx-nav-trigger][data-state="open"]');if(!O)return;let A=s.getBoundingClientRect(),C=O.getBoundingClientRect(),V=R==="horizontal",oe=V?C.left-A.left:C.top-A.top,ne=V?C.width:C.height;s.style.setProperty("--skdx-navigation-menu-indicator-offset",`${oe}px`),s.style.setProperty("--skdx-navigation-menu-indicator-size",`${ne}px`)},[L,R]),S(ze,{value:L,orientation:R,onTriggerEnter:Z,onTriggerLeave:K,onContentEnter:j,onContentLeave:K,onItemSelect:ee,onClose:k,onLinkSelect:te,children:S(He.nav,{"data-orientation":R,...B,...De("navigation-menu","root",B.className),ref:X,children:i??S(Y,{items:t,renderItem:e})})})});J.displayName="NavigationMenu";export{J as NavigationMenu,b as NavigationMenuContent,h as NavigationMenuIndicator,E as NavigationMenuItem,ue as NavigationMenuItemProvider,w as NavigationMenuLink,D as NavigationMenuList,ze as NavigationMenuRootProvider,H as NavigationMenuTrigger,m as useNavigationMenuContext,y as useNavigationMenuItemContext};

package/dist/navigation-menu/NavigationMenuAnatomy.d.cts

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import type { NavigationMenuItem as NavigationMenuItemData } from './types.cjs';
+/**
+ * The anatomy a {@link NavigationMenu} draws from `items`: the list, one
+ * `NavigationMenuItem` per entry holding either a `NavigationMenuLink` or a `NavigationMenuTrigger` plus a `NavigationMenuContent`
+ * panel of links, and the `NavigationMenuIndicator` beside the list.
+ *
+ * @internal
+ */
+export declare const NavigationMenuAnatomy: ({ items, renderItem, }: {
+    items?: NavigationMenuItemData[];
+    renderItem?: (item: NavigationMenuItemData) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/navigation-menu/NavigationMenuAnatomy.d.ts

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import type { NavigationMenuItem as NavigationMenuItemData } from './types.js';
+/**
+ * The anatomy a {@link NavigationMenu} draws from `items`: the list, one
+ * `NavigationMenuItem` per entry holding either a `NavigationMenuLink` or a `NavigationMenuTrigger` plus a `NavigationMenuContent`
+ * panel of links, and the `NavigationMenuIndicator` beside the list.
+ *
+ * @internal
+ */
+export declare const NavigationMenuAnatomy: ({ items, renderItem, }: {
+    items?: NavigationMenuItemData[];
+    renderItem?: (item: NavigationMenuItemData) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/navigation-menu/NavigationMenuContent.d.cts

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import type { NavigationMenuContentProps } from './types.cjs';
 /**
- * Content panel revealed by a {@link NavigationMenuTrigger}: renders a
- * `<div role="region">` labelled by the trigger's `id`, with `data-state` of
- * `"open"` or `"closed"`, unmounted (unless `forceMount`) while closed.
- * Pointer-enter cancels the root's close timer, pointer-leave restarts it,
- * and Escape closes the menu and refocuses the trigger. Also dismisses on
- * outside pointerdown / outside focus.
+ * Content panel revealed by a {@link NavigationMenuTrigger}: renders `<div role="region">`
+ * labelled by trigger's `id`, with `data-state="open" | "closed"`, unmounted while closed (unless `forceMount`).
+ * Pointer-enter cancels root's close timer; pointer-leave restarts it. Escape closes menu and
+ * refocuses trigger through shared dismiss layer (works with focus anywhere on page; only topmost
+ * layer consumes key). Also dismisses on outside pointerdown and focus moving outside trigger/panel.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuContent.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import type { NavigationMenuContentProps } from './types.js';
 /**
- * Content panel revealed by a {@link NavigationMenuTrigger}: renders a
- * `<div role="region">` labelled by the trigger's `id`, with `data-state` of
- * `"open"` or `"closed"`, unmounted (unless `forceMount`) while closed.
- * Pointer-enter cancels the root's close timer, pointer-leave restarts it,
- * and Escape closes the menu and refocuses the trigger. Also dismisses on
- * outside pointerdown / outside focus.
+ * Content panel revealed by a {@link NavigationMenuTrigger}: renders `<div role="region">`
+ * labelled by trigger's `id`, with `data-state="open" | "closed"`, unmounted while closed (unless `forceMount`).
+ * Pointer-enter cancels root's close timer; pointer-leave restarts it. Escape closes menu and
+ * refocuses trigger through shared dismiss layer (works with focus anywhere on page; only topmost
+ * layer consumes key). Also dismisses on outside pointerdown and focus moving outside trigger/panel.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuIndicator.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { NavigationMenuIndicatorProps } from './types.cjs';
 /**
- * Optional visual pointer (e.g. an arrow/caret) tracking whether any menu
- * item is open: renders a `<div>` with `data-state` of `"visible"` or
- * `"hidden"`, unmounted (unless `forceMount`) while no item is open. Sizing
- * and positioning it under the active trigger is left to your CSS.
+ * Optional visual pointer tracking whether any menu item is open. Renders a
+ * `<div>` with `data-state` (`visible` or `hidden`), unmounted unless `forceMount`.
+ * Sizing and positioning is left to CSS.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuIndicator.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { NavigationMenuIndicatorProps } from './types.js';
 /**
- * Optional visual pointer (e.g. an arrow/caret) tracking whether any menu
- * item is open: renders a `<div>` with `data-state` of `"visible"` or
- * `"hidden"`, unmounted (unless `forceMount`) while no item is open. Sizing
- * and positioning it under the active trigger is left to your CSS.
+ * Optional visual pointer tracking whether any menu item is open. Renders a
+ * `<div>` with `data-state` (`visible` or `hidden`), unmounted unless `forceMount`.
+ * Sizing and positioning is left to CSS.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuItem.d.cts

@@ -7,9 +7,8 @@ export declare const NavigationMenuItemProvider: {
     displayName: string;
 }, useNavigationMenuItemContext: (consumerName: string) => NavigationMenuItemContextValue;
 /**
- * A single `<li>` entry in the menu: generates the `id`s that link its
- * `NavigationMenuTrigger` and `NavigationMenuContent` together and provides
- * `value` to them via context.
+ * A single `<li>` entry in the menu that generates `id`s linking its trigger
+ * and content, and provides `value` via context.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuItem.d.ts

@@ -7,9 +7,8 @@ export declare const NavigationMenuItemProvider: {
     displayName: string;
 }, useNavigationMenuItemContext: (consumerName: string) => NavigationMenuItemContextValue;
 /**
- * A single `<li>` entry in the menu: generates the `id`s that link its
- * `NavigationMenuTrigger` and `NavigationMenuContent` together and provides
- * `value` to them via context.
+ * A single `<li>` entry in the menu that generates `id`s linking its trigger
+ * and content, and provides `value` via context.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuLink.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { NavigationMenuLinkProps } from './types.cjs';
 /**
- * A plain navigable `<a>` usable both inside a `NavigationMenuList` item
- * (marked `data-skdx-nav-trigger` so it joins roving focus) and inside a
- * `NavigationMenuContent` panel. When `active`, sets `data-active` and
- * `aria-current="page"`. Clicking it closes the open menu.
+ * Plain navigable `<a>` for use in `NavigationMenuList` (joins roving focus)
+ * or `NavigationMenuContent`. When `active`, sets `data-active` and
+ * `aria-current="page"`. Closes menu on click unless root disables it.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuLink.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { NavigationMenuLinkProps } from './types.js';
 /**
- * A plain navigable `<a>` usable both inside a `NavigationMenuList` item
- * (marked `data-skdx-nav-trigger` so it joins roving focus) and inside a
- * `NavigationMenuContent` panel. When `active`, sets `data-active` and
- * `aria-current="page"`. Clicking it closes the open menu.
+ * Plain navigable `<a>` for use in `NavigationMenuList` (joins roving focus)
+ * or `NavigationMenuContent`. When `active`, sets `data-active` and
+ * `aria-current="page"`. Closes menu on click unless root disables it.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuList.d.cts

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import type { NavigationMenuListProps } from './types.cjs';
 /**
- * `<ul data-orientation="horizontal">` container for
- * {@link NavigationMenuItem}s. Provides roving-focus arrow-key navigation
- * (Left/Right) across items marked `data-skdx-nav-trigger`, wrapping by
- * default.
+ * `<ul data-orientation="…">` container for {@link NavigationMenuItem}s.
+ * Provides roving-focus arrow-key navigation across the top-level items marked
+ * `data-skdx-nav-trigger`, wrapping by default. Links rendered inside an open
+ * {@link NavigationMenuContent} are deliberately not part of that ring.
+ *
+ * The axis comes from the root's `orientation` prop: Left/Right when
+ * horizontal, Up/Down when vertical. Arrow keys that do not match the axis are
+ * left alone, so a vertical menu does not swallow Left/Right.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuList.d.ts

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import type { NavigationMenuListProps } from './types.js';
 /**
- * `<ul data-orientation="horizontal">` container for
- * {@link NavigationMenuItem}s. Provides roving-focus arrow-key navigation
- * (Left/Right) across items marked `data-skdx-nav-trigger`, wrapping by
- * default.
+ * `<ul data-orientation="…">` container for {@link NavigationMenuItem}s.
+ * Provides roving-focus arrow-key navigation across the top-level items marked
+ * `data-skdx-nav-trigger`, wrapping by default. Links rendered inside an open
+ * {@link NavigationMenuContent} are deliberately not part of that ring.
+ *
+ * The axis comes from the root's `orientation` prop: Left/Right when
+ * horizontal, Up/Down when vertical. Arrow keys that do not match the axis are
+ * left alone, so a vertical menu does not swallow Left/Right.
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuTrigger.d.cts

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import type { NavigationMenuTriggerProps } from './types.cjs';
 /**
- * Button that opens its item's {@link NavigationMenuContent}: renders a
- * `<button type="button">` marked `data-skdx-nav-trigger` (for the list's
- * roving focus), with `aria-expanded`, `aria-controls` pointing at the
- * content, and `data-state` of `"open"` or `"closed"`. Non-touch
- * pointer-enter/leave start the root's open/close hover timers; click or
- * Enter/Space opens the item, and closes it again when it was not a hover that
- * opened it — so touch and keyboard users can dismiss it, while a mouse click
- * following its own hover does not immediately undo itself. Escape closes and
- * refocuses the trigger.
+ * Button that opens its item's {@link NavigationMenuContent}: renders a `<button>` marked
+ * `data-skdx-nav-trigger` with `aria-expanded`, `aria-controls`, and `data-state="open" | "closed"`.
+ * Non-touch pointer-enter/leave start hover timers; click or Enter/Space opens, closes when not hover-opened
+ * (so touch/keyboard users can dismiss, mouse click after hover doesn't undo itself).
+ * Escape closes and refocuses the trigger.
+ *
+ * In horizontal menu, ArrowDown on *open* trigger moves focus to first tabbable in content panel
+ * (keyboard route in, Escape is route out). Vertical menu leaves key to list's top-level ring ("next entry").
  *
  * @example
  * ```tsx

package/dist/navigation-menu/NavigationMenuTrigger.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import type { NavigationMenuTriggerProps } from './types.js';
 /**
- * Button that opens its item's {@link NavigationMenuContent}: renders a
- * `<button type="button">` marked `data-skdx-nav-trigger` (for the list's
- * roving focus), with `aria-expanded`, `aria-controls` pointing at the
- * content, and `data-state` of `"open"` or `"closed"`. Non-touch
- * pointer-enter/leave start the root's open/close hover timers; click or
- * Enter/Space opens the item, and closes it again when it was not a hover that
- * opened it — so touch and keyboard users can dismiss it, while a mouse click
- * following its own hover does not immediately undo itself. Escape closes and
- * refocuses the trigger.
+ * Button that opens its item's {@link NavigationMenuContent}: renders a `<button>` marked
+ * `data-skdx-nav-trigger` with `aria-expanded`, `aria-controls`, and `data-state="open" | "closed"`.
+ * Non-touch pointer-enter/leave start hover timers; click or Enter/Space opens, closes when not hover-opened
+ * (so touch/keyboard users can dismiss, mouse click after hover doesn't undo itself).
+ * Escape closes and refocuses the trigger.
+ *
+ * In horizontal menu, ArrowDown on *open* trigger moves focus to first tabbable in content panel
+ * (keyboard route in, Escape is route out). Vertical menu leaves key to list's top-level ring ("next entry").
  *
  * @example
  * ```tsx

package/dist/navigation-menu/index.d.cts

@@ -1,8 +1,2 @@
-export * from './NavigationMenu.cjs';
-export { NavigationMenuList } from './NavigationMenuList.cjs';
-export { NavigationMenuItem } from './NavigationMenuItem.cjs';
-export { NavigationMenuTrigger } from './NavigationMenuTrigger.cjs';
-export { NavigationMenuContent } from './NavigationMenuContent.cjs';
-export { NavigationMenuLink } from './NavigationMenuLink.cjs';
-export { NavigationMenuIndicator } from './NavigationMenuIndicator.cjs';
-export type { NavigationMenuProps, NavigationMenuListProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps, NavigationMenuLinkProps, NavigationMenuIndicatorProps, } from './types.cjs';
+export { NavigationMenu } from './NavigationMenu.cjs';
+export type { NavigationMenuProps, NavigationMenuItem } from './types.cjs';

package/dist/navigation-menu/index.d.ts

@@ -1,8 +1,2 @@
-export * from './NavigationMenu.js';
-export { NavigationMenuList } from './NavigationMenuList.js';
-export { NavigationMenuItem } from './NavigationMenuItem.js';
-export { NavigationMenuTrigger } from './NavigationMenuTrigger.js';
-export { NavigationMenuContent } from './NavigationMenuContent.js';
-export { NavigationMenuLink } from './NavigationMenuLink.js';
-export { NavigationMenuIndicator } from './NavigationMenuIndicator.js';
-export type { NavigationMenuProps, NavigationMenuListProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps, NavigationMenuLinkProps, NavigationMenuIndicatorProps, } from './types.js';
+export { NavigationMenu } from './NavigationMenu.js';
+export type { NavigationMenuProps, NavigationMenuItem } from './types.js';

package/dist/navigation-menu/primitives.d.cts

@@ -0,0 +1,28 @@
+/**
+ * Primitives for `NavigationMenu` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator } from '@skdx/react/primitives/navigation-menu';
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="products">
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink href="/products/a">Product A</NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ *   <NavigationMenuIndicator />
+ * </NavigationMenu>
+ * ```
+ */
+export { NavigationMenu } from './NavigationMenu.cjs';
+export { NavigationMenuList } from './NavigationMenuList.cjs';
+export { NavigationMenuItem } from './NavigationMenuItem.cjs';
+export { NavigationMenuTrigger } from './NavigationMenuTrigger.cjs';
+export { NavigationMenuContent } from './NavigationMenuContent.cjs';
+export { NavigationMenuLink } from './NavigationMenuLink.cjs';
+export { NavigationMenuIndicator } from './NavigationMenuIndicator.cjs';
+export type { NavigationMenuProps, NavigationMenuListProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps, NavigationMenuLinkProps, NavigationMenuIndicatorProps, } from './types.cjs';

package/dist/navigation-menu/primitives.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Primitives for `NavigationMenu` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator } from '@skdx/react/primitives/navigation-menu';
+ *
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem value="products">
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink href="/products/a">Product A</NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ *   <NavigationMenuIndicator />
+ * </NavigationMenu>
+ * ```
+ */
+export { NavigationMenu } from './NavigationMenu.js';
+export { NavigationMenuList } from './NavigationMenuList.js';
+export { NavigationMenuItem } from './NavigationMenuItem.js';
+export { NavigationMenuTrigger } from './NavigationMenuTrigger.js';
+export { NavigationMenuContent } from './NavigationMenuContent.js';
+export { NavigationMenuLink } from './NavigationMenuLink.js';
+export { NavigationMenuIndicator } from './NavigationMenuIndicator.js';
+export type { NavigationMenuProps, NavigationMenuListProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps, NavigationMenuLinkProps, NavigationMenuIndicatorProps, } from './types.js';

package/dist/navigation-menu/types.d.cts

@@ -1,31 +1,100 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/**
+ * One entry of {@link NavigationMenuProps.items}: a plain link, or a trigger
+ * whose panel holds a list of links. Narrow with `'items' in item`.
+ */
+export type NavigationMenuItem = {
+    /** Text rendered inside the derived `NavigationMenuLink`. */
+    label: string;
+    /** Destination of the derived `NavigationMenuLink`. */
+    href: string;
+    /**
+     * Marks the link as the current page — `aria-current="page"` and `data-active`.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Identifier matched against the root's open `value`.
+     * @default undefined — the entry's index in `items`, as a string.
+     */
+    value?: string;
+} | {
+    /** Text rendered inside the derived `NavigationMenuTrigger`. */
+    label: string;
+    /**
+     * Identifier matched against the root's open `value`.
+     * @default undefined — the entry's index in `items`, as a string.
+     */
+    value?: string;
+    /** The links the derived panel holds. */
+    items: {
+        /** Text rendered inside the derived `NavigationMenuLink`. */
+        label: string;
+        /** Destination of the derived `NavigationMenuLink`. */
+        href: string;
+        /**
+         * Marks the link as the current page — `aria-current="page"` and `data-active`.
+         * @default false
+         */
+        active?: boolean;
+    }[];
+};
 /** @internal Shared state distributed from {@link NavigationMenu} to its parts via context. Not part of the public API. */
 export interface NavigationMenuContextValue {
-    value: string;
+    /** Value of the open item, or `null` when nothing is open. */
+    value: string | null;
+    /** Axis the list lays out and arrow-keys travel along. Set on the root. */
+    orientation: 'horizontal' | 'vertical';
     onTriggerEnter: (itemValue: string) => void;
     onTriggerLeave: () => void;
     onContentEnter: () => void;
     onContentLeave: () => void;
     onItemSelect: (itemValue: string) => void;
     onClose: () => void;
+    /** What a Link's click does — closes the menu, or nothing when `closeOnSelect` is false. */
+    onLinkSelect: () => void;
 }
-/** Props for the {@link NavigationMenu} root. */
-export interface NavigationMenuProps extends PrimitivePropsWithRef<'nav'> {
+/**
+ * Props for the {@link NavigationMenu} root. `defaultValue` redeclared to accept
+ * `null` (closed sentinel), which `HTMLAttributes` does not support.
+ */
+export interface NavigationMenuProps extends Omit<PrimitivePropsWithRef<'nav'>, 'defaultValue'> {
     /**
-     * Value of the currently open item, for controlled usage. Pair with `onValueChange`.
+     * The menu's entries, rendered into a derived list. Ignored when `children`
+     * is given, which switches to full manual composition.
+     * @default undefined — an empty menu.
+     */
+    items?: NavigationMenuItem[];
+    /**
+     * Render override for entry bodies (panel contents or link text). Called once
+     * per entry, never for nested links. Library owns roles, ids, href, aria-current.
+     * @default undefined — the panel's links, or the entry's `label`, is rendered.
+     */
+    renderItem?: (item: NavigationMenuItem) => React.ReactNode;
+    /**
+     * Axis the menu runs along; sets `data-orientation`, switches arrow keys, keys
+     * layout. Use `'vertical'` for sidebars, footers, or mobile.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Currently open item value (controlled). Pair with `onValueChange`; `null`
+     * means nothing is open. Use `null` not `''` to avoid ambiguity.
      * @default undefined — uncontrolled, tracks its own open item internally.
      */
-    value?: string;
+    value?: string | null;
     /**
-     * Initially open item's value, for uncontrolled usage.
-     * @default undefined — no item open initially.
+     * Initially open item's value, for uncontrolled usage. `null` starts closed.
+     * @default null — no item open initially.
      */
-    defaultValue?: string;
+    defaultValue?: string | null;
     /**
-     * Fires with the new value whenever the open item changes, controlled or not.
+     * Fires with the new value whenever the open item changes, controlled or
+     * not, and with `null` when everything closes.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: string | null) => void;
     /**
      * Delay before hovering a trigger opens its content (ms).
      * @default 200
@@ -36,6 +105,18 @@ export interface NavigationMenuProps extends PrimitivePropsWithRef<'nav'> {
      * @default 300
      */
     skipDelayDuration?: number;
+    /**
+     * Grace period after pointer leaves trigger or panel (ms). Accommodates layout
+     * gaps; too short closes panels while pointer travels between boxes.
+     * @default 150
+     */
+    closeDelayDuration?: number;
+    /**
+     * Whether activating a link closes the open panel. `false` keeps it open
+     * during route transitions. No menu event fires; link click is the event.
+     * @default true
+     */
+    closeOnSelect?: boolean;
 }
 /** Props for {@link NavigationMenuList}, the roving-focus container for `NavigationMenuItem`s. */
 export interface NavigationMenuListProps extends PrimitivePropsWithRef<'ul'> {