@skdx/react 0.28.0 → 0.29.0

package/dist/menubar/types.d.ts

@@ -1,15 +1,11 @@
 import type * as React from 'react';
+import type { AutoFocusEvent } from '../utils/dismissal.js';
 import type { MenuSubContentProps, MenuSubProps, MenuSubTriggerProps } from '../utils/menuSub.js';
 import type { PopperContentProps } from '../utils/popper.js';
 import type { PortalProps } from '../utils/portal.js';
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
-import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
-/**
- * One menu entry: a discriminated union where the plain action variant carries no `type` field,
- * so `{ label: 'Cut', onSelect: cut }` needs no annotation. Narrow with `'type' in item`, never with a cast.
- * Submenus recurse through this same type, so nesting is unrestricted.
- */
+/** One menu entry — a discriminated union whose plain action variant carries no `type` field — narrowed with `'type' in item`, recursing for unlimited submenu nesting. */
 export type MenuItem = {
     /** Text rendered inside the item, and fallback typeahead. */
     label: string;
@@ -17,22 +13,22 @@ export type MenuItem = {
      * Called when this item is activated, before the recipe's own `onSelect`. Both fire.
      * @default undefined — no-op if omitted.
      */
-    onSelect?: () => void;
+    onSelect?: (() => void) | undefined;
     /**
      * Keyboard hint rendered as a `MenubarShortcut` at the item's trailing edge, `aria-hidden`.
      * @default undefined — no shortcut.
      */
-    shortcut?: string;
+    shortcut?: string | undefined;
     /**
      * Marks item `aria-disabled` and blocks selection, staying in roving order and focusable for discoverability.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Text typeahead matches this item by, reflected to `data-text-value`.
      * @default undefined — the item's rendered text is used.
      */
-    textValue?: string;
+    textValue?: string | undefined;
 } | {
     /** Renders a `MenubarSeparator`: a horizontal rule between item groups. */
     type: 'separator';
@@ -45,27 +41,27 @@ export type MenuItem = {
      * Checked state, externally controlled: reports state via `onCheckedChange`.
      * @default false
      */
-    checked?: boolean;
+    checked?: boolean | undefined;
     /**
      * Fires with the new checked state when the item is selected.
      * @default undefined — no-op if omitted.
      */
-    onCheckedChange?: (checked: boolean) => void;
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
     /**
      * Keyboard hint rendered as a `MenubarShortcut` at the item's trailing edge.
      * @default undefined — no shortcut.
      */
-    shortcut?: string;
+    shortcut?: string | undefined;
     /**
      * Marks item `aria-disabled` and blocks selection, staying focusable.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Text typeahead matches this item by, reflected to `data-text-value`.
      * @default undefined — the item's rendered text is used.
      */
-    textValue?: string;
+    textValue?: string | undefined;
 } | {
     /** Renders a `MenubarRadioGroup` of mutually-exclusive options. */
     type: 'radio-group';
@@ -73,12 +69,12 @@ export type MenuItem = {
      * Selected radio option's value, externally controlled.
      * @default undefined — no option selected.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Fires with the newly selected option's `value`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: ((value: string) => void) | undefined;
     /** The radio options, one `MenubarRadioItem` each. */
     items: {
         /** Text rendered inside the radio item. */
@@ -89,12 +85,12 @@ export type MenuItem = {
          * Marks option `aria-disabled` and blocks selection, staying focusable.
          * @default false
          */
-        disabled?: boolean;
+        disabled?: boolean | undefined;
         /**
          * Text typeahead matches this option by, reflected to `data-text-value`.
          * @default undefined — the option's rendered text is used.
          */
-        textValue?: string;
+        textValue?: string | undefined;
     }[];
 } | {
     /** Renders a nested submenu trio: `MenubarSubTrigger` and `MenubarSubContent`. */
@@ -107,12 +103,12 @@ export type MenuItem = {
      * Marks submenu trigger `aria-disabled` and blocks opening, staying focusable.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Text typeahead matches the trigger by, reflected to `data-text-value`.
      * @default undefined — the trigger's rendered text is used.
      */
-    textValue?: string;
+    textValue?: string | undefined;
 } | {
     /** Renders a `MenubarGroup` (`role="group"`) with optional `MenubarLabel` caption. */
     type: 'group';
@@ -120,7 +116,7 @@ export type MenuItem = {
      * Group heading rendered as `MenubarLabel`, the group's accessible name.
      * @default undefined — the group is unnamed.
      */
-    label?: string;
+    label?: string | undefined;
     /** Group entries, recursing through the `MenuItem` union. */
     items: MenuItem[];
 };
@@ -136,12 +132,12 @@ export interface MenubarMenu {
      * Identifier matched against the bar's open `menu` to open/report by name.
      * @default undefined — the menu's index, as a string.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Marks trigger disabled and skips it in the bar's roving focus.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /**
  * Which menu end focus lands on when opened: `'first'` (Enter/Space/ArrowDown)
@@ -150,7 +146,7 @@ export interface MenubarMenu {
 export type MenubarOpenIntent = 'first' | 'last';
 /** Axis the bar lays triggers on, reflected as `data-orientation`. */
 export type MenubarOrientation = 'horizontal' | 'vertical';
-/** @internal Shared state distributed from {@link Menubar} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Menubar} to its parts via context. */
 export interface MenubarContextValue {
     menu: string;
     onMenuChange: (menu: string) => void;
@@ -160,91 +156,84 @@ export interface MenubarContextValue {
     currentTabStopId: string | null;
     setCurrentTabStopId: (id: string) => void;
 }
-/**
- * Props for the {@link Menubar} recipe. Standard attributes pass to the `<div role="menubar">`.
- * For full manual composition use `MenubarRoot` from `@skdx/react/primitives/menubar`.
- */
+/** Props for the {@link Menubar} recipe, whose standard attributes pass to the `<div role="menubar">`; use `MenubarRoot` for manual composition. */
 export interface MenubarProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect' | 'children'> {
     /**
      * The bar's menus, one trigger and panel each.
      * @default undefined — an empty bar.
      */
-    menus?: MenubarMenu[];
+    menus?: MenubarMenu[] | undefined;
     /**
      * Fires with the activated entry (plain, checkbox, submenu item, or radio option)
      * after that entry's own `onSelect`/`onCheckedChange`/`onValueChange`.
      * @default undefined — no-op if omitted.
      */
-    onSelect?: (item: MenuItem) => void;
+    onSelect?: ((item: MenuItem) => void) | undefined;
     /**
      * Renders an entry's content in place of its `label`; the item element's role, id, wiring
      * and disabled state stay the library's. Not called for separators or groups.
      * @default undefined — renders the entry's `label`.
      */
-    renderItem?: (item: MenuItem) => React.ReactNode;
+    renderItem?: ((item: MenuItem) => React.ReactNode) | undefined;
     /**
      * Currently open menu, for controlled usage; pair with `onMenuChange`.
      * @default undefined — uncontrolled.
      */
-    menu?: string;
+    menu?: string | undefined;
     /**
      * Initially open menu's value, for uncontrolled usage.
      * @default ''
      */
-    defaultMenu?: string;
+    defaultMenu?: string | undefined;
     /**
      * Fires with the newly open menu's value, controlled or uncontrolled.
      * @default undefined — no-op if omitted.
      */
-    onMenuChange?: (menu: string) => void;
+    onMenuChange?: ((menu: string) => void) | undefined;
     /**
      * Layout axis for the bar, reflected as `aria-orientation`; sets which arrows rove
      * along the bar. An open menu is always vertical.
      * @default 'horizontal'
      */
-    orientation?: MenubarOrientation;
+    orientation?: MenubarOrientation | undefined;
     /**
      * Whether roving focus across the bar wraps from the last trigger to the first.
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
+    /**
+     * Spacing rung the skin reads for the bar's triggers, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'compact' | 'comfortable' | (string & {}) | undefined;
+    /**
+     * Size rung the skin reads for the bar, mirrored to `data-size` on the root and fed to derived SubContent panels.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
-/** @internal Per-menu state distributed from {@link MenubarMenu} to its descendants via context. Not part of the public API. */
+/** @internal Per-menu state distributed from {@link MenubarMenu} to its descendants via context. */
 export interface MenubarMenuContextValue {
     menuValue: string;
     triggerRef: React.RefObject<HTMLButtonElement | null>;
     contentRef: React.RefObject<HTMLDivElement | null>;
     contentId: string;
-    /**
-     * This menu's Trigger id, which Content points `aria-labelledby` at.
-     * Owned by `MenubarMenu` so `MenubarContent` can reach it.
-     */
+    /** This menu's Trigger id, which Content points `aria-labelledby` at. */
     triggerId: string;
     open: boolean;
     /** True once opened by explicit click vs. hover/focus. */
     openedExplicitlyRef: React.RefObject<boolean>;
     onOpen: () => void;
     onClose: () => void;
-    /**
-     * Returns focus to this menu's Trigger, firing `close-auto-focus`
-     * from Escape, Tab, and item selection.
-     */
+    /** Returns focus to this menu's Trigger, firing `close-auto-focus` from Escape, Tab, and item selection. */
     focusTrigger: () => void;
-    /**
-     * Content's `onCloseAutoFocus` handler, parked here so focusTrigger can reach it.
-     * A ref: Content declares the event but MenubarMenu owns the focus move.
-     */
+    /** Content's `onCloseAutoFocus` handler, parked here so `focusTrigger` can reach it. */
     closeAutoFocusRef: React.RefObject<((event: AutoFocusEvent) => void) | undefined>;
-    /**
-     * Which menu end the last open request asked for: `'first'` or `'last'`.
-     * Read once on open, never rendered.
-     */
+    /** Which menu end the last open request asked for: `'first'` or `'last'`, read once on open. */
     openIntentRef: React.RefObject<MenubarOpenIntent>;
     /**
-     * Bumped on every `onOpen()` call, including one that re-requests an
-     * already-open menu (e.g. `defaultMenu` pre-opened it, then its trigger is
-     * clicked). Content's auto-focus effect keys off this alongside `open` so a
-     * request that doesn't flip the boolean still moves focus into the panel.
+     * Bumped on every `onOpen()` call, including a re-request of an
+     * already-open menu, so the auto-focus effect can key off it alongside `open`.
      */
     openRequestId: number;
 }
@@ -256,12 +245,12 @@ export interface MenubarMenuProps {
      * The menu's trigger and content, typically `MenubarTrigger` with `MenubarPortal`/`MenubarContent`.
      * @default undefined — renders nothing.
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * Fires once the menu's open state change has finished on screen, after animation ends.
      * @default undefined — no-op if omitted.
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
 }
 /** Props for {@link MenubarTrigger}, the menubar item that opens its menu's content. */
 export interface MenubarTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -269,7 +258,7 @@ export interface MenubarTriggerProps extends PrimitivePropsWithRef<'button'> {
      * Disables trigger and excludes it from roving-focus navigation.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for {@link MenubarPortal}, which teleports menu content elsewhere in the DOM. */
 export interface MenubarPortalProps extends PortalProps {
@@ -277,7 +266,7 @@ export interface MenubarPortalProps extends PortalProps {
      * Keep portal mounted while closed, for animation libraries needing outgoing content during exit.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link MenubarContent}, the popover panel of menu items. */
 export interface MenubarContentProps extends PopperContentProps {
@@ -285,59 +274,68 @@ export interface MenubarContentProps extends PopperContentProps {
      * Keep panel mounted while closed, for animation libraries needing outgoing content during exit.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
      * Whether arrow-key navigation wraps from last item to first.
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
     /**
      * Fires on Escape press while open; call `preventDefault()` to keep open.
      * @default undefined — no-op if omitted.
      */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     /**
      * Fires on pointerdown outside content; call `preventDefault()` to keep open.
      * @default undefined — no-op if omitted.
      */
-    onPointerDownOutside?: (event: PointerEvent) => void;
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
     /**
      * Fires when focus moves outside content and menubar; call `preventDefault()` to keep open.
      * Receives a cancelable stand-in for `focusin` (not itself cancelable) carrying the original.
      * @default undefined — no-op if omitted.
      */
-    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
     /**
      * Fires for either outside interaction (pointerdown or focus) before specific handlers,
      * so one `preventDefault()` vetoes both paths.
      * @default undefined — no-op if omitted.
      */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
     /**
      * Fires just before focus returns to trigger on Escape, Tab, or item selection;
      * call `preventDefault()` to place focus yourself.
      * @default undefined — no-op if omitted.
      */
-    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+    onCloseAutoFocus?: ((event: AutoFocusEvent) => void) | undefined;
 }
 /** Props for a single {@link MenubarItem} entry. */
 export interface MenubarItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect'> {
+    /**
+     * Tag name from the library's allowlist instead of the default `<div>`; use `asChild` for elements needing their own attributes.
+     * @default 'div'
+     */
+    as?: PolymorphicTag | undefined;
+    /**
+     * Whether selecting this item closes the menu; `onSelect`'s `preventDefault()` can veto independently.
+     * @default undefined — selecting the item closes the menu.
+     */
+    closeOnSelect?: boolean | undefined;
     /**
      * Marks item `aria-disabled` and blocks selection, staying in roving order and focusable for discoverability.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Text typeahead matches this item by, reflected to `data-text-value`.
-     * Important for items rendering more than their label or icon-only items.
+     * Text typeahead matches this item by, reflected to `data-text-value`, important for icon-only or richly rendered items.
      * @default undefined — the item's rendered text is used.
      */
-    textValue?: string;
+    textValue?: string | undefined;
     /**
      * Called when the item is activated; call `preventDefault()` to keep menu open.
      * @default undefined — no-op if omitted, menu closes on select.
      */
-    onSelect?: (event: Event) => void;
+    onSelect?: ((event: Event) => void) | undefined;
 }
 /** Props for {@link MenubarCheckboxItem}, a toggleable menu item. */
 export interface MenubarCheckboxItemProps extends MenubarItemProps {
@@ -345,17 +343,17 @@ export interface MenubarCheckboxItemProps extends MenubarItemProps {
      * Whether the item renders as checked.
      * @default false
      */
-    checked?: boolean;
+    checked?: boolean | undefined;
     /**
      * Fires with the new checked state when the item is selected.
      * @default undefined — no-op if omitted.
      */
-    onCheckedChange?: (checked: boolean) => void;
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
 }
-/** @internal Shared state distributed from {@link MenubarRadioGroup} to its `MenubarRadioItem`s via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link MenubarRadioGroup} to its `MenubarRadioItem`s via context. */
 export interface MenuRadioGroupContextValue {
-    value?: string;
-    onValueChange?: (value: string) => void;
+    value?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
 }
 /** Props for {@link MenubarRadioGroup}, wrapping mutually-exclusive radio items. */
 export interface MenubarRadioGroupProps extends PrimitivePropsWithRef<'div'> {
@@ -363,12 +361,12 @@ export interface MenubarRadioGroupProps extends PrimitivePropsWithRef<'div'> {
      * Selected item's value; compared against each radio item's own `value`.
      * @default undefined — no item checked.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Fires with the new value when a radio item in this group is selected.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: ((value: string) => void) | undefined;
 }
 /** Props for a single {@link MenubarRadioItem} within a `MenubarRadioGroup`. */
 export interface MenubarRadioItemProps extends MenubarItemProps {
@@ -381,7 +379,7 @@ export interface MenubarItemIndicatorProps extends PrimitivePropsWithRef<'span'>
      * Keep indicator mounted while unchecked, for animation libraries needing outgoing content.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link MenubarGroup}, a grouping wrapper for related `MenubarItem`s. */
 export interface MenubarGroupProps extends PrimitivePropsWithRef<'div'> {

package/dist/navigation-menu/NavigationMenu.cjs

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

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

@@ -1,19 +1,10 @@
 import * as React from 'react';
 import type { NavigationMenuContextValue, NavigationMenuProps } from './types.cjs';
+export declare const NavigationMenuRootProvider: React.FC<NavigationMenuContextValue & {
+    children: React.ReactNode;
+}>, useNavigationMenuContext: (consumerName: string) => NavigationMenuContextValue;
 /**
- * `null` = nothing open. `undefined` = uncontrolled. Distinguishes uncontrolled
- * from controlled empty.
- */
-export declare const NavigationMenuRootProvider: {
-    (props: NavigationMenuContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useNavigationMenuContext: (consumerName: string) => NavigationMenuContextValue;
-/**
- * Hover/click-driven menu: owns open item, hands timers to parts. First hover
- * delayed by `delayDuration`, sibling switches instant within `skipDelayDuration`.
- * Controlled or uncontrolled. Derives from `items` or renders `children` verbatim.
+ * Hover- and click-driven menu that owns the open item and hands timers to its parts, derived from `items` or rendered via `children`.
  *
  * @example
  * ```tsx
@@ -24,20 +15,8 @@ export declare const NavigationMenuRootProvider: {
  *   ]}
  * />
  * ```
- *
- * @example Full manual composition — `@skdx/react/primitives/navigation-menu`.
- * ```tsx
- * <NavigationMenu>
- *   <NavigationMenuList>
- *     <NavigationMenuItem value="products">
- *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
- *       <NavigationMenuContent>
- *         <NavigationMenuLink href="/products/a">Product A</NavigationMenuLink>
- *       </NavigationMenuContent>
- *     </NavigationMenuItem>
- *   </NavigationMenuList>
- *   <NavigationMenuIndicator />
- * </NavigationMenu>
- * ```
  */
-export declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenuProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const NavigationMenu: {
+    ({ children, items, renderItem, value: valueProp, defaultValue, onValueChange, delayDuration, skipDelayDuration, closeDelayDuration, closeOnSelect, orientation, ref: forwardedRef, ...props }: NavigationMenuProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,19 +1,10 @@
 import * as React from 'react';
 import type { NavigationMenuContextValue, NavigationMenuProps } from './types.js';
+export declare const NavigationMenuRootProvider: React.FC<NavigationMenuContextValue & {
+    children: React.ReactNode;
+}>, useNavigationMenuContext: (consumerName: string) => NavigationMenuContextValue;
 /**
- * `null` = nothing open. `undefined` = uncontrolled. Distinguishes uncontrolled
- * from controlled empty.
- */
-export declare const NavigationMenuRootProvider: {
-    (props: NavigationMenuContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useNavigationMenuContext: (consumerName: string) => NavigationMenuContextValue;
-/**
- * Hover/click-driven menu: owns open item, hands timers to parts. First hover
- * delayed by `delayDuration`, sibling switches instant within `skipDelayDuration`.
- * Controlled or uncontrolled. Derives from `items` or renders `children` verbatim.
+ * Hover- and click-driven menu that owns the open item and hands timers to its parts, derived from `items` or rendered via `children`.
  *
  * @example
  * ```tsx
@@ -24,20 +15,8 @@ export declare const NavigationMenuRootProvider: {
  *   ]}
  * />
  * ```
- *
- * @example Full manual composition — `@skdx/react/primitives/navigation-menu`.
- * ```tsx
- * <NavigationMenu>
- *   <NavigationMenuList>
- *     <NavigationMenuItem value="products">
- *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
- *       <NavigationMenuContent>
- *         <NavigationMenuLink href="/products/a">Product A</NavigationMenuLink>
- *       </NavigationMenuContent>
- *     </NavigationMenuItem>
- *   </NavigationMenuList>
- *   <NavigationMenuIndicator />
- * </NavigationMenu>
- * ```
  */
-export declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenuProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const NavigationMenu: {
+    ({ children, items, renderItem, value: valueProp, defaultValue, onValueChange, delayDuration, skipDelayDuration, closeDelayDuration, closeOnSelect, orientation, ref: forwardedRef, ...props }: NavigationMenuProps): React.ReactNode;
+    displayName: string;
+};

package/dist/navigation-menu/NavigationMenu.js

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

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

@@ -1,13 +1,7 @@
 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
- */
+/** @internal The anatomy a {@link NavigationMenu} draws from `items`: the list, one `NavigationMenuItem` per entry, and the `NavigationMenuIndicator`. */
 export declare const NavigationMenuAnatomy: ({ items, renderItem, }: {
-    items?: NavigationMenuItemData[];
-    renderItem?: (item: NavigationMenuItemData) => React.ReactNode;
+    items?: NavigationMenuItemData[] | undefined;
+    renderItem?: ((item: NavigationMenuItemData) => React.ReactNode) | undefined;
 }) => React.JSX.Element;