@skdx/react 0.26.0 → 0.28.0

package/dist/menubar/Menubar.d.ts

@@ -1,44 +1,58 @@
 import * as React from 'react';
 import { type PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { MenubarContextValue, MenubarProps } from './types.js';
+/** @internal Selector for enabled menubar triggers, used for roving and arrow navigation. */
+export declare const TRIGGER_SELECTOR = "[data-skdx-menubar-trigger]:not([data-disabled])";
 export declare const MenubarRootProvider: {
     (props: MenubarContextValue & {
         children: React.ReactNode;
     }): React.JSX.Element;
     displayName: string;
 }, useMenubarContext: (consumerName: string) => MenubarContextValue;
+/** Props for {@link MenubarRoot}: manual composition without derived anatomy. */
+export type MenubarRootProps = Omit<MenubarProps, 'menus' | 'onSelect' | 'renderItem'> & {
+    /**
+     * Menubar menus: each a `MenubarMenu` pairing trigger with `MenubarPortal`/`MenubarContent`.
+     * @default undefined — an empty bar.
+     */
+    children?: React.ReactNode;
+};
 /**
- * Root of an application-style menu bar: owns which `MenubarMenu` is open and
- * hands it down via context. Renders a `<div role="menubar">` with
- * roving-focus, wrapping, typeahead arrow-key navigation (horizontal) across
- * triggers marked `data-skdx-menubar-trigger`.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Menubar's state primitive: owns which menu is open, manages roving focus and typeahead
+ * navigation across triggers. Renders `<div role="menubar">` with `aria-orientation`.
+ * Works controlled (`menu` + `onMenuChange`) or uncontrolled (`defaultMenu`).
+ * Supply `aria-label` or `aria-labelledby` — menubar takes no name from menuitem children.
+ */
+export declare const MenubarRoot: React.ForwardRefExoticComponent<Omit<MenubarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Application-style menu bar: a row of menus with roving focus and typeahead
+ * across triggers and inside panels. Derives full anatomy from `menus`.
+ * Works controlled or uncontrolled.
  *
  * @example
  * ```tsx
- * <Menubar>
- *   <MenubarMenu value="file">
- *     <MenubarTrigger>File</MenubarTrigger>
- *     <MenubarPortal>
- *       <MenubarContent>
- *         <MenubarItem onSelect={() => save()}>Save</MenubarItem>
- *         <MenubarSeparator />
- *         <MenubarCheckboxItem checked={wrap} onCheckedChange={setWrap}>
- *           <MenubarItemIndicator>✓</MenubarItemIndicator>
- *           Word Wrap
- *         </MenubarCheckboxItem>
- *       </MenubarContent>
- *     </MenubarPortal>
- *   </MenubarMenu>
- * </Menubar>
+ * <Menubar
+ *   aria-label="Application"
+ *   menus={[
+ *     {
+ *       label: 'File',
+ *       items: [
+ *         { label: 'Save', onSelect: save, shortcut: '⌘S' },
+ *         { type: 'separator' },
+ *         { type: 'submenu', label: 'Share', items: [{ label: 'Email' }] },
+ *       ],
+ *     },
+ *     { label: 'Edit', items: [{ label: 'Undo', shortcut: '⌘Z' }] },
+ *   ]}
+ * />
  * ```
+ *
+ * @example Full manual composition via `MenubarRoot` from `@skdx/react/primitives/menubar`.
  */
 export declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
- * Optional small triangle pointing from a `MenubarContent` panel back at its
- * `MenubarTrigger`. Renders inside the popper-positioned content; place it as
- * a direct child of `MenubarContent`.
+ * Optional small triangle pointing from a menu panel back at its trigger.
+ * Renders inside the popper-positioned content as a direct child of `MenubarContent`.
  *
  * @example
  * ```tsx

package/dist/menubar/Menubar.js

@@ -1 +1 @@
-import*as b from"react";import{useComposedRefs as te}from"../utils/composeRefs.js";import{createSafeContext as ne}from"../utils/createContext.js";import{skdxPart as T}from"../utils/part.js";import{PopperArrow as ae}from"../utils/popper.js";import{composeEventHandlers as ue,Primitive as ie}from"../utils/primitive.js";import{useControllableState as me}from"../utils/useControllableState.js";import{useRovingFocus as pe,useRovingTabStop as se}from"../utils/useRovingFocus.js";import{jsx as v}from"react/jsx-runtime";var S="[data-skdx-menubar-trigger]:not([data-disabled])",[ce,g]=ne("Menubar"),fe=b.forwardRef(({value:e,defaultValue:o="",onValueChange:t,...r},i)=>{let[m="",a]=me({prop:e,defaultProp:o,onChange:t}),u=pe({orientation:"horizontal",loop:!0,itemSelector:S,typeahead:!0}),[c,f]=b.useState(null),x=b.useRef(null),n=te(i,x);return se(x,S,"data-skdx-menubar-trigger",c,f),v(ce,{value:m,onValueChange:a,currentTabStopId:c,setCurrentTabStopId:f,children:v(ie.div,{role:"menubar",...r,...T("menubar","root",r.className),ref:n,onKeyDown:ue(r.onKeyDown,u)})})});fe.displayName="Menubar";var le=b.forwardRef((e,o)=>v(ae,{...e,...T("menubar","arrow",e.className),ref:o}));le.displayName="MenubarArrow";import*as s from"react";import{createSafeContext as be}from"../utils/createContext.js";import{PopperRoot as de}from"../utils/popper.js";import{useOpenChangeComplete as Me}from"../utils/useOpenChangeComplete.js";import{jsx as E}from"react/jsx-runtime";var[Re,l]=be("MenubarMenu");function h({value:e,children:o,onOpenChangeComplete:t}){let r=g("MenubarMenu"),i=s.useRef(null),m=s.useRef(null),a=s.useRef(!1),u=r.value===e;Me(u,m,t);let c=s.useCallback(()=>r.onValueChange(e),[r,e]),f=s.useCallback(()=>{a.current=!1,r.onValueChange("")},[r]);return E(de,{children:E(Re,{menuValue:e,triggerRef:i,contentRef:m,contentId:s.useId(),open:u,openedExplicitlyRef:a,onOpen:c,onClose:f,children:o})})}h.displayName="MenubarMenu";import*as I from"react";import{useComposedRefs as Pe}from"../utils/composeRefs.js";import{skdxPart as xe}from"../utils/part.js";import{PopperAnchor as Ce}from"../utils/popper.js";import{composeEventHandlers as y,Primitive as ge}from"../utils/primitive.js";import{rovingTabIndex as ye}from"../utils/useRovingFocus.js";import{jsx as k}from"react/jsx-runtime";var w=I.forwardRef((e,o)=>{let t=g("MenubarTrigger"),r=l("MenubarTrigger"),i=Pe(o,r.triggerRef),m=t.value!=="",a=I.useId();return k(Ce,{asChild:!0,children:k(ge.button,{type:"button",role:"menuitem","aria-haspopup":"menu","aria-expanded":r.open,"aria-controls":r.contentId,"data-skdx-menubar-trigger":a,"data-state":r.open?"open":"closed","data-disabled":e.disabled?"":void 0,tabIndex:ye(t.currentTabStopId!==null,t.currentTabStopId===a,e.disabled),...e,...xe("menubar","trigger",e.className),ref:i,onClick:y(e.onClick,()=>{e.disabled||(r.open&&r.openedExplicitlyRef.current?(r.onClose(),r.openedExplicitlyRef.current=!1):(r.onOpen(),r.openedExplicitlyRef.current=!0))}),onPointerEnter:y(e.onPointerEnter,u=>{e.disabled||u.pointerType==="touch"||m&&t.value!==r.menuValue&&(r.onOpen(),r.openedExplicitlyRef.current=!1)}),onFocus:y(e.onFocus,()=>{t.setCurrentTabStopId(a),!e.disabled&&m&&t.value!==r.menuValue&&(r.onOpen(),r.openedExplicitlyRef.current=!1)}),onKeyDown:y(e.onKeyDown,u=>{e.disabled||["ArrowDown","ArrowUp"," ","Enter"].includes(u.key)&&(u.preventDefault(),r.onOpen(),r.openedExplicitlyRef.current=!0)})})})});w.displayName="MenubarTrigger";import{Portal as Ie}from"../utils/portal.js";import{jsx as ve}from"react/jsx-runtime";var N=({forceMount:e,children:o,...t})=>{let r=l("MenubarPortal");return e||r.open?ve(Ie,{...t,children:o}):null};N.displayName="MenubarPortal";import*as d from"react";import{useComposedRefs as Se}from"../utils/composeRefs.js";import{MENU_BRANCH_ATTRIBUTE as Te}from"../utils/menuSub.js";import{skdxPart as Ee}from"../utils/part.js";import{PopperContent as he}from"../utils/popper.js";import{composeEventHandlers as ke}from"../utils/primitive.js";import{useDismiss as we}from"../utils/useDismiss.js";import{useRovingFocus as Ne}from"../utils/useRovingFocus.js";import{jsx as De}from"react/jsx-runtime";var D='[role^="menuitem"]:not([data-disabled])',L=d.forwardRef(({forceMount:e,loop:o=!0,onEscapeKeyDown:t,onPointerDownOutside:r,onFocusOutside:i,onInteractOutside:m,side:a="bottom",align:u="start",sideOffset:c=4,...f},x)=>{let n=l("MenubarContent"),ee=Se(x,n.contentRef),re=Ne({orientation:"vertical",loop:o,itemSelector:D,typeahead:!0}),oe=d.useMemo(()=>({get current(){return n.triggerRef.current?.closest('[role="menubar"]')??null}}),[n.triggerRef]);return we({enabled:n.open,insideSelector:`[${Te}]`,onEscapeKeyDown:p=>{t?.(p),p.defaultPrevented||(n.onClose(),n.triggerRef.current?.focus())},onInteractOutside:m,onPointerDownOutside:p=>{r?.(p),p.defaultPrevented||n.onClose()},onFocusOutside:p=>{i?.(p),p.defaultPrevented||n.onClose()}},[n.triggerRef,n.contentRef,oe]),d.useEffect(()=>{if(!n.open)return;let p=requestAnimationFrame(()=>{let C=n.contentRef.current;if(!C||C.contains(document.activeElement))return;(C.querySelector(D)??C).focus()});return()=>cancelAnimationFrame(p)},[n.open,n.contentRef]),e||n.open?De(he,{component:"menubar",role:"menu","aria-orientation":"vertical",id:n.contentId,"data-state":n.open?"open":"closed",tabIndex:-1,side:a,align:u,sideOffset:c,...f,...Ee("menubar","content",f.className),ref:ee,onKeyDown:ke(f.onKeyDown,p=>{re(p),p.key==="Tab"&&(p.preventDefault(),n.onClose(),n.triggerRef.current?.focus())})}):null});L.displayName="MenubarContent";import*as G from"react";import{skdxPart as Le}from"../utils/part.js";import{Primitive as Ge}from"../utils/primitive.js";import{useMenuItem as He}from"../utils/useMenuItem.js";import{jsx as Oe}from"react/jsx-runtime";function R({disabled:e,onSelect:o,props:t}){let r=l("MenubarItem");return He({disabled:e,onSelect:o,onSelected:()=>{r.onClose(),r.triggerRef.current?.focus()},contentRef:r.contentRef,props:t})}var H=G.forwardRef(({disabled:e,onSelect:o,...t},r)=>{let i=R({disabled:e,onSelect:o,props:t});return Oe(Ge.div,{role:"menuitem",...t,...i,...Le("menubar","item",t.className),ref:r})});H.displayName="MenubarItem";import*as A from"react";import{skdxPart as Fe}from"../utils/part.js";import{Primitive as Be}from"../utils/primitive.js";import*as M from"react";import{skdxPart as Ve}from"../utils/part.js";import{Primitive as Ae}from"../utils/primitive.js";import{jsx as Ke}from"react/jsx-runtime";var P=M.createContext(!1),O=M.forwardRef(({forceMount:e,...o},t)=>{let r=M.useContext(P);return e||r?Ke(Ae.span,{"data-state":r?"checked":"unchecked",...o,...Ve("menubar","item-indicator",o.className),ref:t}):null});O.displayName="MenubarItemIndicator";import{jsx as V}from"react/jsx-runtime";var K=A.forwardRef(({checked:e=!1,onCheckedChange:o,disabled:t,onSelect:r,...i},m)=>{let a=R({disabled:t,onSelect:u=>{o?.(!e),r?.(u),u.preventDefault()},props:i});return V(P.Provider,{value:e,children:V(Be.div,{role:"menuitemcheckbox","aria-checked":e,"data-state":e?"checked":"unchecked",...i,...a,...Fe("menubar","checkbox-item",i.className),ref:m})})});K.displayName="MenubarCheckboxItem";import*as B from"react";import{createSafeContext as _e}from"../utils/createContext.js";import{skdxPart as Ue}from"../utils/part.js";import{Primitive as qe}from"../utils/primitive.js";import{jsx as F}from"react/jsx-runtime";var[ze,_]=_e("MenubarRadioGroup"),U=B.forwardRef(({value:e,onValueChange:o,...t},r)=>F(ze,{value:e,onValueChange:o,children:F(qe.div,{role:"group",...t,...Ue("menubar","radio-group",t.className),ref:r})}));U.displayName="MenubarRadioGroup";import*as z from"react";import{skdxPart as We}from"../utils/part.js";import{Primitive as $e}from"../utils/primitive.js";import{jsx as q}from"react/jsx-runtime";var W=z.forwardRef(({value:e,disabled:o,onSelect:t,...r},i)=>{let m=_("MenubarRadioItem"),a=m.value===e,u=R({disabled:o,onSelect:c=>{m.onValueChange?.(e),t?.(c)},props:r});return q(P.Provider,{value:a,children:q($e.div,{role:"menuitemradio","aria-checked":a,"data-state":a?"checked":"unchecked",...r,...u,...We("menubar","radio-item",r.className),ref:i})})});W.displayName="MenubarRadioItem";import*as $ from"react";import{skdxPart as Je}from"../utils/part.js";import{Primitive as Qe}from"../utils/primitive.js";import{jsx as Xe}from"react/jsx-runtime";var J=$.forwardRef((e,o)=>Xe(Qe.div,{role:"group",...e,...Je("menubar","group",e.className),ref:o}));J.displayName="MenubarGroup";import*as Q from"react";import{skdxPart as Ye}from"../utils/part.js";import{Primitive as Ze}from"../utils/primitive.js";import{jsx as je}from"react/jsx-runtime";var X=Q.forwardRef((e,o)=>je(Ze.div,{...e,...Ye("menubar","label",e.className),ref:o}));X.displayName="MenubarLabel";import*as Y from"react";import{skdxPart as er}from"../utils/part.js";import{Primitive as rr}from"../utils/primitive.js";import{jsx as or}from"react/jsx-runtime";var Z=Y.forwardRef((e,o)=>or(rr.div,{role:"separator","aria-orientation":"horizontal",...e,...er("menubar","separator",e.className),ref:o}));Z.displayName="MenubarSeparator";import{MenuSub as tr,MenuSubContent as nr,MenuSubTrigger as ar}from"../utils/menuSub.js";import{jsx as mr}from"react/jsx-runtime";function j(e){return mr(tr,{family:"menubar",...e})}j.displayName="MenubarSub";var ur=ar,ir=nr;export{fe as Menubar,le as MenubarArrow,K as MenubarCheckboxItem,L as MenubarContent,J as MenubarGroup,H as MenubarItem,O as MenubarItemIndicator,X as MenubarLabel,h as MenubarMenu,N as MenubarPortal,U as MenubarRadioGroup,W as MenubarRadioItem,ce as MenubarRootProvider,Z as MenubarSeparator,j as MenubarSub,ir as MenubarSubContent,ur as MenubarSubTrigger,w as MenubarTrigger,g as useMenubarContext};
+import*as g from"react";import{useComposedRefs as hr}from"../utils/composeRefs.js";import{createSafeContext as vr}from"../utils/createContext.js";import{skdxPart as fe}from"../utils/part.js";import{PopperArrow as Sr}from"../utils/popper.js";import{composeEventHandlers as Tr,Primitive as kr}from"../utils/primitive.js";import{useControllableState as Er}from"../utils/useControllableState.js";import{useRovingFocus as wr,useRovingTabStop as Nr}from"../utils/useRovingFocus.js";import{CheckGlyph as Pr,DotGlyph as Ir}from"../utils/menuGlyph.js";import*as Z from"react";import{skdxPart as we}from"../utils/part.js";import{Primitive as Ne}from"../utils/primitive.js";import*as X from"react";import{skdxPart as Ce}from"../utils/part.js";import{Primitive as he}from"../utils/primitive.js";import{useMenuItem as ve}from"../utils/useMenuItem.js";import*as p from"react";import{createSafeContext as ge}from"../utils/createContext.js";import{PopperRoot as ye}from"../utils/popper.js";import{autoFocusEvent as xe}from"../utils/useFocusTrap.js";import{useOpenChangeComplete as Pe}from"../utils/useOpenChangeComplete.js";import{jsx as Q}from"react/jsx-runtime";var[Ie,M]=ge("MenubarMenu");function A({value:e,children:n,onOpenChangeComplete:o}){let t=k("MenubarMenu"),i=p.useRef(null),r=p.useRef(null),m=p.useRef(!1),a=p.useRef(void 0),l=p.useRef("first"),f=t.menu===e,[b,y]=p.useState(0);Pe(f,r,o);let u=p.useCallback(()=>{t.onMenuChange(e),y(G=>G+1)},[t,e]),C=p.useCallback(()=>{m.current=!1,t.onMenuChange("")},[t]),T=p.useCallback(()=>{xe("close-auto-focus",a.current)&&i.current?.focus()},[]);return Q(ye,{children:Q(Ie,{menuValue:e,triggerRef:i,contentRef:r,contentId:p.useId(),triggerId:p.useId(),open:f,openedExplicitlyRef:m,onOpen:u,onClose:C,focusTrigger:T,closeAutoFocusRef:a,openIntentRef:l,openRequestId:b,children:n})})}A.displayName="MenubarMenu";import{jsx as Se}from"react/jsx-runtime";function h({disabled:e,textValue:n,onSelect:o,props:t}){let i=M("MenubarItem");return ve({disabled:e,textValue:n,onSelect:o,onSelected:()=>{i.onClose(),i.focusTrigger()},contentRef:i.contentRef,props:t})}var H=X.forwardRef(({disabled:e,textValue:n,onSelect:o,...t},i)=>{let r=h({disabled:e,textValue:n,onSelect:o,props:t});return Se(he.div,{role:"menuitem",...t,...r,...Ce("menubar","item",t.className),ref:i})});H.displayName="MenubarItem";import*as P from"react";import{skdxPart as Te}from"../utils/part.js";import{Primitive as ke}from"../utils/primitive.js";import{jsx as Ee}from"react/jsx-runtime";var v=P.createContext(!1),E=P.forwardRef(({forceMount:e,...n},o)=>{let t=P.useContext(v);return e||t?Ee(ke.span,{"data-state":t?"checked":"unchecked",...n,...Te("menubar","item-indicator",n.className),ref:o}):null});E.displayName="MenubarItemIndicator";import{jsx as Y}from"react/jsx-runtime";var V=Z.forwardRef(({checked:e=!1,onCheckedChange:n,disabled:o,textValue:t,onSelect:i,...r},m)=>{let a=h({disabled:o,textValue:t,onSelect:l=>{n?.(!e),i?.(l),l.preventDefault()},props:r});return Y(v.Provider,{value:e,children:Y(Ne.div,{role:"menuitemcheckbox","aria-checked":e,"data-state":e?"checked":"unchecked",...r,...a,...we("menubar","checkbox-item",r.className),ref:m})})});V.displayName="MenubarCheckboxItem";import*as R from"react";import{useComposedRefs as De}from"../utils/composeRefs.js";import{directionalKey as Ge,usePortalledDirection as Le}from"../utils/direction.js";import{MENU_BRANCH_ATTRIBUTE as Ae}from"../utils/menuSub.js";import{skdxPart as He}from"../utils/part.js";import{PopperContent as Ve}from"../utils/popper.js";import{composeEventHandlers as Oe}from"../utils/primitive.js";import{useDismiss as Fe}from"../utils/useDismiss.js";import{useRovingFocus as Ke}from"../utils/useRovingFocus.js";import{jsx as qe}from"react/jsx-runtime";var j='[role^="menuitem"]',O=R.forwardRef(({forceMount:e,loop:n=!0,onEscapeKeyDown:o,onPointerDownOutside:t,onFocusOutside:i,onInteractOutside:r,onCloseAutoFocus:m,side:a="bottom",align:l="start",sideOffset:f=4,...b},y)=>{let u=M("MenubarContent");u.closeAutoFocusRef.current=m;let C=De(y,u.contentRef),T=Le(u.triggerRef),G=Ke({orientation:"vertical",loop:n,itemSelector:j,typeahead:!0,includeDisabled:!0}),L=R.useMemo(()=>({get current(){return u.triggerRef.current?.closest('[role="menubar"]')??null}}),[u.triggerRef]),Re=R.useCallback(s=>{let d=Array.from(L.current?.querySelectorAll(w)??[]),x=d.findIndex(J=>J===u.triggerRef.current);x!==-1&&d[(x+s+d.length)%d.length]?.focus()},[u.triggerRef,L]);return Fe({enabled:u.open,insideSelector:`[${Ae}]`,onEscapeKeyDown:s=>{o?.(s),s.defaultPrevented||(u.onClose(),u.focusTrigger())},onInteractOutside:r,onPointerDownOutside:s=>{t?.(s),s.defaultPrevented||u.onClose()},onFocusOutside:s=>{i?.(s),s.defaultPrevented||u.onClose()}},[u.triggerRef,u.contentRef,L]),R.useEffect(()=>{if(!u.open)return;let s=requestAnimationFrame(()=>{let d=u.contentRef.current;if(!d||d.contains(document.activeElement))return;let x=d.querySelectorAll(j);((u.openIntentRef.current==="last"?x[x.length-1]:x[0])??d).focus({preventScroll:!0})});return()=>cancelAnimationFrame(s)},[u.open,u.contentRef,u.openIntentRef,u.openRequestId]),e||u.open?qe(Ve,{component:"menubar",role:"menu","aria-orientation":"vertical",dir:T,"aria-labelledby":b["aria-label"]===void 0?u.triggerId:void 0,id:u.contentId,"data-state":u.open?"open":"closed",tabIndex:-1,side:a,align:l,sideOffset:f,...b,...He("menubar","content",b.className),ref:C,onKeyDown:Oe(b.onKeyDown,s=>{let d=Ge(s.key,s.currentTarget,T);if(d==="ArrowRight"||d==="ArrowLeft"){s.preventDefault(),s.stopPropagation(),Re(d==="ArrowRight"?1:-1);return}G(s),s.key==="Tab"&&(u.onClose(),u.focusTrigger())})}):null});O.displayName="MenubarContent";import*as re from"react";import{MenuGroupProvider as _e,useMenuGroupLabel as $e}from"../utils/menuGroup.js";import{skdxPart as Be}from"../utils/part.js";import{Primitive as Ue}from"../utils/primitive.js";import{jsx as ee}from"react/jsx-runtime";var F=re.forwardRef((e,n)=>{let{labelId:o,context:t}=$e();return ee(_e,{...t,children:ee(Ue.div,{role:"group","aria-labelledby":e["aria-label"]===void 0?o:void 0,...e,...Be("menubar","group",e.className),ref:n})})});F.displayName="MenubarGroup";import*as te from"react";import{useMenuLabelId as ze}from"../utils/menuGroup.js";import{skdxPart as We}from"../utils/part.js";import{Primitive as Je}from"../utils/primitive.js";import{jsx as Qe}from"react/jsx-runtime";var K=te.forwardRef((e,n)=>{let o=ze();return Qe(Je.div,{id:o,...e,...We("menubar","label",e.className),ref:n})});K.displayName="MenubarLabel";import{Portal as Xe}from"../utils/portal.js";import{jsx as Ye}from"react/jsx-runtime";var q=({forceMount:e,children:n,...o})=>{let t=M("MenubarPortal");return e||t.open?Ye(Xe,{...o,children:n}):null};q.displayName="MenubarPortal";import*as oe from"react";import{createSafeContext as Ze}from"../utils/createContext.js";import{MenuGroupProvider as je,useMenuGroupLabel as er}from"../utils/menuGroup.js";import{skdxPart as rr}from"../utils/part.js";import{Primitive as tr}from"../utils/primitive.js";import{jsx as _}from"react/jsx-runtime";var[or,ne]=Ze("MenubarRadioGroup"),$=oe.forwardRef(({value:e,onValueChange:n,...o},t)=>{let{labelId:i,context:r}=er();return _(or,{value:e,onValueChange:n,children:_(je,{...r,children:_(tr.div,{role:"group","aria-labelledby":o["aria-label"]===void 0?i:void 0,...o,...rr("menubar","radio-group",o.className),ref:t})})})});$.displayName="MenubarRadioGroup";import*as ue from"react";import{skdxPart as nr}from"../utils/part.js";import{Primitive as ar}from"../utils/primitive.js";import{jsx as ae}from"react/jsx-runtime";var B=ue.forwardRef(({value:e,disabled:n,textValue:o,onSelect:t,...i},r)=>{let m=ne("MenubarRadioItem"),a=m.value===e,l=h({disabled:n,textValue:o,onSelect:f=>{m.onValueChange?.(e),t?.(f)},props:i});return ae(v.Provider,{value:a,children:ae(ar.div,{role:"menuitemradio","aria-checked":a,"data-state":a?"checked":"unchecked",...i,...l,...nr("menubar","radio-item",i.className),ref:r})})});B.displayName="MenubarRadioItem";import*as ie from"react";import{skdxPart as ur}from"../utils/part.js";import{Primitive as ir}from"../utils/primitive.js";import{jsx as mr}from"react/jsx-runtime";var U=ie.forwardRef((e,n)=>mr(ir.div,{role:"separator","aria-orientation":"horizontal",...e,...ur("menubar","separator",e.className),ref:n}));U.displayName="MenubarSeparator";import*as me from"react";import{skdxPart as sr}from"../utils/part.js";import{Primitive as lr}from"../utils/primitive.js";import{jsx as pr}from"react/jsx-runtime";var N=me.forwardRef((e,n)=>pr(lr.span,{"aria-hidden":"true",...e,...sr("menubar","shortcut",e.className),ref:n}));N.displayName="MenubarShortcut";import{MenuSub as cr,MenuSubContent as dr,MenuSubTrigger as fr}from"../utils/menuSub.js";import{jsx as br}from"react/jsx-runtime";function z(e){return br(cr,{family:"menubar",...e})}z.displayName="MenubarSub";var se=fr,le=dr;import*as ce from"react";import{useComposedRefs as Mr}from"../utils/composeRefs.js";import{skdxPart as Rr}from"../utils/part.js";import{PopperAnchor as gr}from"../utils/popper.js";import{composeEventHandlers as D,Primitive as yr}from"../utils/primitive.js";import{rovingTabIndex as xr}from"../utils/useRovingFocus.js";import{jsx as pe}from"react/jsx-runtime";var W=ce.forwardRef((e,n)=>{let o=k("MenubarTrigger"),t=M("MenubarTrigger"),i=Mr(n,t.triggerRef),r=o.menu!=="",m=t.triggerId;return pe(gr,{asChild:!0,children:pe(yr.button,{type:"button",role:"menuitem",id:m,"aria-haspopup":"menu","aria-expanded":t.open,"aria-controls":t.contentId,"data-skdx-menubar-trigger":m,"data-state":t.open?"open":"closed","data-disabled":e.disabled?"":void 0,tabIndex:xr(o.currentTabStopId!==null,o.currentTabStopId===m,e.disabled),...e,...Rr("menubar","trigger",e.className),ref:i,onClick:D(e.onClick,()=>{t.openIntentRef.current="first",!e.disabled&&(t.open&&t.openedExplicitlyRef.current?(t.onClose(),t.openedExplicitlyRef.current=!1):(t.onOpen(),t.openedExplicitlyRef.current=!0))}),onPointerEnter:D(e.onPointerEnter,a=>{e.disabled||a.pointerType==="touch"||(t.openIntentRef.current="first",r&&o.menu!==t.menuValue&&(t.onOpen(),t.openedExplicitlyRef.current=!1))}),onFocus:D(e.onFocus,()=>{o.setCurrentTabStopId(m),!e.disabled&&(t.openIntentRef.current="first",r&&o.menu!==t.menuValue&&(t.onOpen(),t.openedExplicitlyRef.current=!1))}),onKeyDown:D(e.onKeyDown,a=>{if(e.disabled)return;(o.orientation==="horizontal"?["ArrowDown","ArrowUp"," ","Enter"]:["ArrowRight"," ","Enter"]).includes(a.key)&&(t.openIntentRef.current=a.key==="ArrowUp"?"last":"first",a.preventDefault(),t.onOpen(),t.openedExplicitlyRef.current=!0)})})})});W.displayName="MenubarTrigger";import{Fragment as Cr,jsx as c,jsxs as I}from"react/jsx-runtime";var de=({menus:e=[],onSelect:n,renderItem:o})=>{let t=r=>o?o(r):"label"in r?r.label:null,i=(r,m)=>{if(!("type"in r))return I(H,{disabled:r.disabled,textValue:r.textValue??r.label,onSelect:()=>{r.onSelect?.(),n?.(r)},children:[t(r),r.shortcut?c(N,{children:r.shortcut}):null]},m);switch(r.type){case"separator":return c(U,{},m);case"checkbox":return I(V,{checked:r.checked,onCheckedChange:r.onCheckedChange,disabled:r.disabled,textValue:r.textValue??r.label,onSelect:()=>n?.(r),children:[c(E,{"aria-hidden":"true",children:c(Pr,{})}),t(r),r.shortcut?c(N,{children:r.shortcut}):null]},m);case"radio-group":return c($,{value:r.value,onValueChange:r.onValueChange,children:r.items.map(a=>I(B,{value:a.value,disabled:a.disabled,textValue:a.textValue??a.label,children:[c(E,{"aria-hidden":"true",children:c(Ir,{})}),a.label]},a.value))},m);case"submenu":return I(z,{children:[c(se,{disabled:r.disabled,textValue:r.textValue??r.label,children:t(r)}),c(le,{children:r.items.map((a,l)=>i(a,`${m}.${l}`))})]},m);case"group":return I(F,{children:[r.label?c(K,{children:r.label}):null,r.items.map((a,l)=>i(a,`${m}.${l}`))]},m)}};return c(Cr,{children:e.map((r,m)=>{let a=r.value??String(m);return I(A,{value:a,children:[c(W,{disabled:r.disabled,children:r.label}),c(q,{children:c(O,{children:r.items.map((l,f)=>i(l,String(f)))})})]},a)})})};import{jsx as S}from"react/jsx-runtime";var w="[data-skdx-menubar-trigger]:not([data-disabled])",[Dr,k]=vr("Menubar"),be=g.forwardRef(({menu:e,defaultMenu:n="",onMenuChange:o,orientation:t="horizontal",loop:i=!0,...r},m)=>{let[a="",l]=Er({prop:e,defaultProp:n,onChange:o}),f=wr({orientation:t,loop:i,itemSelector:w,typeahead:!0}),[b,y]=g.useState(null),u=g.useRef(null),C=hr(m,u);return Nr(u,w,"data-skdx-menubar-trigger",b,y),S(Dr,{menu:a,onMenuChange:l,orientation:t,currentTabStopId:b,setCurrentTabStopId:y,children:S(kr.div,{role:"menubar","aria-orientation":t,...r,...fe("menubar","root",r.className),ref:C,onKeyDown:Tr(r.onKeyDown,f)})})});be.displayName="MenubarRoot";var Me=g.forwardRef(({menus:e,onSelect:n,renderItem:o,...t},i)=>S(be,{...t,ref:i,children:S(de,{menus:e,onSelect:n,renderItem:o})}));Me.displayName="Menubar";var Gr=g.forwardRef((e,n)=>S(Sr,{...e,...fe("menubar","arrow",e.className),ref:n}));Gr.displayName="MenubarArrow";export{v as ItemIndicatorContext,or as MenuRadioGroupProvider,Me as Menubar,Gr as MenubarArrow,V as MenubarCheckboxItem,O as MenubarContent,F as MenubarGroup,H as MenubarItem,E as MenubarItemIndicator,K as MenubarLabel,A as MenubarMenu,Ie as MenubarMenuProvider,q as MenubarPortal,$ as MenubarRadioGroup,B as MenubarRadioItem,be as MenubarRoot,Dr as MenubarRootProvider,U as MenubarSeparator,N as MenubarShortcut,z as MenubarSub,le as MenubarSubContent,se as MenubarSubTrigger,W as MenubarTrigger,w as TRIGGER_SELECTOR,ne as useMenuRadioGroupContext,k as useMenubarContext,h as useMenubarItem,M as useMenubarMenuContext};

package/dist/menubar/MenubarAnatomy.d.cts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { MenubarMenu as MenubarMenuData, MenuItem } from './types.cjs';
+/**
+ * Renders a {@link Menubar} from a `menus` array: one per entry with a
+ * trigger and portalled content panel supporting items, separators, checkbox
+ * and radio groups, submenus, and groups.
+ *
+ * @internal
+ */
+export declare const MenubarAnatomy: ({ menus, onSelect, renderItem, }: {
+    menus?: MenubarMenuData[];
+    onSelect?: (item: MenuItem) => void;
+    renderItem?: (item: MenuItem) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/menubar/MenubarAnatomy.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { MenubarMenu as MenubarMenuData, MenuItem } from './types.js';
+/**
+ * Renders a {@link Menubar} from a `menus` array: one per entry with a
+ * trigger and portalled content panel supporting items, separators, checkbox
+ * and radio groups, submenus, and groups.
+ *
+ * @internal
+ */
+export declare const MenubarAnatomy: ({ menus, onSelect, renderItem, }: {
+    menus?: MenubarMenuData[];
+    onSelect?: (item: MenuItem) => void;
+    renderItem?: (item: MenuItem) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/menubar/MenubarCheckboxItem.d.cts

@@ -1,11 +1,8 @@
 import * as React from 'react';
 import type { MenubarCheckboxItemProps } from './types.cjs';
 /**
- * A togglable `MenubarItem`: renders a `<div role="menuitemcheckbox">` with
- * `aria-checked` and `data-state` of `"checked"` or `"unchecked"`. Selecting
- * it flips `checked` via `onCheckedChange` and keeps the menu open (calls
- * `event.preventDefault()` internally). Pair with a `MenubarItemIndicator`
- * child to render a checkmark.
+ * A togglable `MenubarItem`: renders a `<div role="menuitemcheckbox">`.
+ * Selecting it flips `checked` via `onCheckedChange` and keeps the menu open.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarCheckboxItem.d.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
 import type { MenubarCheckboxItemProps } from './types.js';
 /**
- * A togglable `MenubarItem`: renders a `<div role="menuitemcheckbox">` with
- * `aria-checked` and `data-state` of `"checked"` or `"unchecked"`. Selecting
- * it flips `checked` via `onCheckedChange` and keeps the menu open (calls
- * `event.preventDefault()` internally). Pair with a `MenubarItemIndicator`
- * child to render a checkmark.
+ * A togglable `MenubarItem`: renders a `<div role="menuitemcheckbox">`.
+ * Selecting it flips `checked` via `onCheckedChange` and keeps the menu open.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarContent.d.cts

@@ -1,20 +1,15 @@
 import * as React from 'react';
 import type { MenubarContentProps } from './types.cjs';
 /**
- * Popover panel of menu items, positioned relative to its `MenubarTrigger`
- * via {@link PopperContent} (`side="bottom"`, `align="start"`,
- * `sideOffset={4}` by default). Renders `role="menu"` with `data-state` of
- * `"open"` or `"closed"`, unmounted (unless `forceMount`) while closed.
- * Auto-focuses its first item (or itself) on open. Supports roving,
- * typeahead arrow-key navigation (vertical) across items matching
- * `[role^="menuitem"]:not([data-disabled])`; Tab and Escape close it and
- * refocus the trigger, as does an outside interaction — pointer-down outside
- * or focus moving outside, each reported to `onPointerDownOutside`/
- * `onFocusOutside` and, just before them and with the same event, to
- * `onInteractOutside`. Any of those (or `onEscapeKeyDown`) calling
- * `event.preventDefault()` keeps it open. Focus moving between menubar
- * triggers is *not* outside: the whole menu bar counts as part of the layer,
- * so arrowing across it does not dismiss the open menu.
+ * Popover panel of menu items via {@link PopperContent} (bottom-start by default).
+ * Auto-focuses first item on open (last when ArrowUp opened it).
+ *
+ * Vertical roving + typeahead navigation. ArrowRight/ArrowLeft on items without
+ * submenu opens adjacent menu (wraps, RTL-aware). Escape or outside interaction
+ * closes; preventDefault() on handlers keeps open.
+ *
+ * Focus moving between menubar triggers stays *inside* layer (don't dismiss).
+ * Tab closes and returns focus to trigger without consuming key.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarContent.d.ts

@@ -1,20 +1,15 @@
 import * as React from 'react';
 import type { MenubarContentProps } from './types.js';
 /**
- * Popover panel of menu items, positioned relative to its `MenubarTrigger`
- * via {@link PopperContent} (`side="bottom"`, `align="start"`,
- * `sideOffset={4}` by default). Renders `role="menu"` with `data-state` of
- * `"open"` or `"closed"`, unmounted (unless `forceMount`) while closed.
- * Auto-focuses its first item (or itself) on open. Supports roving,
- * typeahead arrow-key navigation (vertical) across items matching
- * `[role^="menuitem"]:not([data-disabled])`; Tab and Escape close it and
- * refocus the trigger, as does an outside interaction — pointer-down outside
- * or focus moving outside, each reported to `onPointerDownOutside`/
- * `onFocusOutside` and, just before them and with the same event, to
- * `onInteractOutside`. Any of those (or `onEscapeKeyDown`) calling
- * `event.preventDefault()` keeps it open. Focus moving between menubar
- * triggers is *not* outside: the whole menu bar counts as part of the layer,
- * so arrowing across it does not dismiss the open menu.
+ * Popover panel of menu items via {@link PopperContent} (bottom-start by default).
+ * Auto-focuses first item on open (last when ArrowUp opened it).
+ *
+ * Vertical roving + typeahead navigation. ArrowRight/ArrowLeft on items without
+ * submenu opens adjacent menu (wraps, RTL-aware). Escape or outside interaction
+ * closes; preventDefault() on handlers keeps open.
+ *
+ * Focus moving between menubar triggers stays *inside* layer (don't dismiss).
+ * Tab closes and returns focus to trigger without consuming key.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarGroup.d.cts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import type { MenubarGroupProps } from './types.cjs';
 /**
- * Groups related `MenubarItem`s (typically preceded by a `MenubarLabel`) for
- * visual and semantic structure: renders a `<div role="group">`.
+ * Groups related `MenubarItem`s for visual and semantic structure: renders a
+ * `<div role="group">`. A `MenubarLabel` inside it captions *and* names the
+ * group — the Label takes a generated id and this element points
+ * `aria-labelledby` at it, which is the only accessible name a `role="group"`
+ * can have.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarGroup.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import type { MenubarGroupProps } from './types.js';
 /**
- * Groups related `MenubarItem`s (typically preceded by a `MenubarLabel`) for
- * visual and semantic structure: renders a `<div role="group">`.
+ * Groups related `MenubarItem`s for visual and semantic structure: renders a
+ * `<div role="group">`. A `MenubarLabel` inside it captions *and* names the
+ * group — the Label takes a generated id and this element points
+ * `aria-labelledby` at it, which is the only accessible name a `role="group"`
+ * can have.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarItem.d.cts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import type { MenubarItemProps } from './types.cjs';
-/** @internal Wires a {@link MenubarItem} into the shared menu-item interactions, closing the menu and refocusing the trigger on selection. */
-export declare function useMenubarItem({ disabled, onSelect, props, }: {
+/** @internal Wires menu-item interactions: closes menu and refocuses trigger on selection. */
+export declare function useMenubarItem({ disabled, textValue, onSelect, props, }: {
     disabled?: boolean;
+    textValue?: string;
     onSelect?: (event: Event) => void;
     props: MenubarItemProps;
 }): {
     'data-disabled': string | undefined;
+    'data-text-value': string | undefined;
     'aria-disabled': true | undefined;
-    tabIndex: number | undefined;
+    tabIndex: number;
     onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     onPointerEnter: (event: React.PointerEvent<HTMLDivElement>) => void;

package/dist/menubar/MenubarItem.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import type { MenubarItemProps } from './types.js';
-/** @internal Wires a {@link MenubarItem} into the shared menu-item interactions, closing the menu and refocusing the trigger on selection. */
-export declare function useMenubarItem({ disabled, onSelect, props, }: {
+/** @internal Wires menu-item interactions: closes menu and refocuses trigger on selection. */
+export declare function useMenubarItem({ disabled, textValue, onSelect, props, }: {
     disabled?: boolean;
+    textValue?: string;
     onSelect?: (event: Event) => void;
     props: MenubarItemProps;
 }): {
     'data-disabled': string | undefined;
+    'data-text-value': string | undefined;
     'aria-disabled': true | undefined;
-    tabIndex: number | undefined;
+    tabIndex: number;
     onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     onPointerEnter: (event: React.PointerEvent<HTMLDivElement>) => void;

package/dist/menubar/MenubarItemIndicator.d.cts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { MenubarItemIndicatorProps } from './types.cjs';
-/** @internal True inside a checkbox/radio item so its `ItemIndicator` knows whether the item is checked. */
+/** @internal True inside a checkbox/radio item so its `MenubarItemIndicator` knows whether the item is checked. */
 export declare const ItemIndicatorContext: React.Context<boolean>;
 /**
- * Renders inside a `MenubarCheckboxItem` or `MenubarRadioItem` to show a
- * checkmark: reads checked state from the nearest such item via context and
- * renders a `<span>` with `data-state` of `"checked"` or `"unchecked"`,
- * unmounted (unless `forceMount`) while unchecked.
+ * Checkmark indicator inside a checkbox or radio item. Reads state from context; unmounted when unchecked unless `forceMount`.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarItemIndicator.d.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { MenubarItemIndicatorProps } from './types.js';
-/** @internal True inside a checkbox/radio item so its `ItemIndicator` knows whether the item is checked. */
+/** @internal True inside a checkbox/radio item so its `MenubarItemIndicator` knows whether the item is checked. */
 export declare const ItemIndicatorContext: React.Context<boolean>;
 /**
- * Renders inside a `MenubarCheckboxItem` or `MenubarRadioItem` to show a
- * checkmark: reads checked state from the nearest such item via context and
- * renders a `<span>` with `data-state` of `"checked"` or `"unchecked"`,
- * unmounted (unless `forceMount`) while unchecked.
+ * Checkmark indicator inside a checkbox or radio item. Reads state from context; unmounted when unchecked unless `forceMount`.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarLabel.d.cts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import type { MenubarLabelProps } from './types.cjs';
 /**
- * A non-interactive heading inside a `MenubarContent` panel or
- * `MenubarGroup`: renders a plain `<div>`.
+ * A non-interactive heading inside a `MenubarContent` panel or `MenubarGroup`.
+ * Renders a plain `<div>`.
+ *
+ * Rendered *inside* a `MenubarGroup` or `MenubarRadioGroup` it takes a
+ * generated id and becomes that group's accessible name.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarLabel.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import type { MenubarLabelProps } from './types.js';
 /**
- * A non-interactive heading inside a `MenubarContent` panel or
- * `MenubarGroup`: renders a plain `<div>`.
+ * A non-interactive heading inside a `MenubarContent` panel or `MenubarGroup`.
+ * Renders a plain `<div>`.
+ *
+ * Rendered *inside* a `MenubarGroup` or `MenubarRadioGroup` it takes a
+ * generated id and becomes that group's accessible name.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarMenu.d.cts

@@ -7,9 +7,8 @@ export declare const MenubarMenuProvider: {
     displayName: string;
 }, useMenubarMenuContext: (consumerName: string) => MenubarMenuContextValue;
 /**
- * Groups a single menu's trigger, portal, and content, and provides the
- * popper anchor context they position against. Not a DOM element itself —
- * renders its `children` directly.
+ * Groups a single menu's trigger, portal, and content with popper anchor context.
+ * Not a DOM element itself.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarMenu.d.ts

@@ -7,9 +7,8 @@ export declare const MenubarMenuProvider: {
     displayName: string;
 }, useMenubarMenuContext: (consumerName: string) => MenubarMenuContextValue;
 /**
- * Groups a single menu's trigger, portal, and content, and provides the
- * popper anchor context they position against. Not a DOM element itself —
- * renders its `children` directly.
+ * Groups a single menu's trigger, portal, and content with popper anchor context.
+ * Not a DOM element itself.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarPortal.d.cts

@@ -1,8 +1,6 @@
 import type { MenubarPortalProps } from './types.cjs';
 /**
- * Teleports its `MenubarContent` into `document.body` (or a custom
- * `container`) via {@link Portal}, so the panel escapes clipping/stacking
- * contexts. Unmounted (unless `forceMount`) while the menu is closed.
+ * Teleports content to `document.body` or custom `container` via {@link Portal} to escape clipping contexts. Unmounts unless `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarPortal.d.ts

@@ -1,8 +1,6 @@
 import type { MenubarPortalProps } from './types.js';
 /**
- * Teleports its `MenubarContent` into `document.body` (or a custom
- * `container`) via {@link Portal}, so the panel escapes clipping/stacking
- * contexts. Unmounted (unless `forceMount`) while the menu is closed.
+ * Teleports content to `document.body` or custom `container` via {@link Portal} to escape clipping contexts. Unmounts unless `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarRadioGroup.d.cts

@@ -7,9 +7,7 @@ export declare const MenuRadioGroupProvider: {
     displayName: string;
 }, useMenuRadioGroupContext: (consumerName: string) => MenuRadioGroupContextValue;
 /**
- * Groups a set of mutually-exclusive {@link MenubarRadioItem}s: renders a
- * `<div role="group">` and distributes the checked `value` /
- * `onValueChange` to its items via context.
+ * Container for mutually-exclusive radio items. Distributes `value` and `onValueChange` via context.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarRadioGroup.d.ts

@@ -7,9 +7,7 @@ export declare const MenuRadioGroupProvider: {
     displayName: string;
 }, useMenuRadioGroupContext: (consumerName: string) => MenuRadioGroupContextValue;
 /**
- * Groups a set of mutually-exclusive {@link MenubarRadioItem}s: renders a
- * `<div role="group">` and distributes the checked `value` /
- * `onValueChange` to its items via context.
+ * Container for mutually-exclusive radio items. Distributes `value` and `onValueChange` via context.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarRadioItem.d.cts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { MenubarRadioItemProps } from './types.cjs';
 /**
- * A single option within a `MenubarRadioGroup`: renders a
- * `<div role="menuitemradio">` with `aria-checked` and `data-state` of
- * `"checked"` or `"unchecked"`, checked when its `value` matches the group's.
- * Selecting it calls the group's `onValueChange`. Pair with a
- * `MenubarItemIndicator` child to render the selected mark.
+ * Option in `MenubarRadioGroup`: `<div role="menuitemradio">` with
+ * `aria-checked` and `data-state`. Calls group's `onValueChange` on select.
+ * Pair with `MenubarItemIndicator` for the selected mark.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarRadioItem.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { MenubarRadioItemProps } from './types.js';
 /**
- * A single option within a `MenubarRadioGroup`: renders a
- * `<div role="menuitemradio">` with `aria-checked` and `data-state` of
- * `"checked"` or `"unchecked"`, checked when its `value` matches the group's.
- * Selecting it calls the group's `onValueChange`. Pair with a
- * `MenubarItemIndicator` child to render the selected mark.
+ * Option in `MenubarRadioGroup`: `<div role="menuitemradio">` with
+ * `aria-checked` and `data-state`. Calls group's `onValueChange` on select.
+ * Pair with `MenubarItemIndicator` for the selected mark.
  *
  * @example
  * ```tsx

package/dist/menubar/MenubarShortcut.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { MenubarShortcutProps } from './types.cjs';
+/**
+ * The keyboard hint at the trailing edge of an Item — "⌘K", "Ctrl+S".
+ * `aria-hidden="true"` so it doesn't affect the accessible name.
+ *
+ * @example
+ * ```tsx
+ * <MenubarItem>
+ *   Save
+ *   <MenubarShortcut>⌘S</MenubarShortcut>
+ * </MenubarItem>
+ * ```
+ */
+export declare const MenubarShortcut: React.ForwardRefExoticComponent<Omit<MenubarShortcutProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/menubar/MenubarShortcut.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { MenubarShortcutProps } from './types.js';
+/**
+ * The keyboard hint at the trailing edge of an Item — "⌘K", "Ctrl+S".
+ * `aria-hidden="true"` so it doesn't affect the accessible name.
+ *
+ * @example
+ * ```tsx
+ * <MenubarItem>
+ *   Save
+ *   <MenubarShortcut>⌘S</MenubarShortcut>
+ * </MenubarItem>
+ * ```
+ */
+export declare const MenubarShortcut: React.ForwardRefExoticComponent<Omit<MenubarShortcutProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/menubar/MenubarSub.d.cts

@@ -1,9 +1,7 @@
 import { type MenuSubProps } from '../utils/menuSub.cjs';
 /**
- * Root of a nested submenu inside `MenubarContent`: owns the submenu's own
- * open state (independent of which `MenubarMenu` the menubar has open) and
- * provides the popper anchor context its `MenubarSubTrigger` /
- * `MenubarSubContent` position against. Renders no DOM element itself.
+ * Root of nested submenu, owning its own open state and popper anchor.
+ * Renders no DOM element.
  *
  * @example
  * ```tsx
@@ -19,7 +17,7 @@ import { type MenuSubProps } from '../utils/menuSub.cjs';
  * </MenubarContent>
  * ```
  */
-export declare function MenubarSub(props: Omit<MenuSubProps, 'family'>): import("react").JSX.Element;
+export declare function MenubarSub(props: MenuSubProps): import("react").JSX.Element;
 export declare namespace MenubarSub {
     var displayName: string;
 }

package/dist/menubar/MenubarSub.d.ts

@@ -1,9 +1,7 @@
 import { type MenuSubProps } from '../utils/menuSub.js';
 /**
- * Root of a nested submenu inside `MenubarContent`: owns the submenu's own
- * open state (independent of which `MenubarMenu` the menubar has open) and
- * provides the popper anchor context its `MenubarSubTrigger` /
- * `MenubarSubContent` position against. Renders no DOM element itself.
+ * Root of nested submenu, owning its own open state and popper anchor.
+ * Renders no DOM element.
  *
  * @example
  * ```tsx
@@ -19,7 +17,7 @@ import { type MenuSubProps } from '../utils/menuSub.js';
  * </MenubarContent>
  * ```
  */
-export declare function MenubarSub(props: Omit<MenuSubProps, 'family'>): import("react").JSX.Element;
+export declare function MenubarSub(props: MenuSubProps): import("react").JSX.Element;
 export declare namespace MenubarSub {
     var displayName: string;
 }

package/dist/menubar/MenubarTrigger.d.cts

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import type { MenubarTriggerProps } from './types.cjs';
 /**
- * The menubar item that opens its {@link MenubarMenu}'s content: renders a
- * `<button type="button" role="menuitem">` marked `data-skdx-menubar-trigger`
- * (its own id, for roving focus — the menubar keeps exactly one trigger at
- * `tabIndex` 0), with `aria-haspopup="menu"`, `aria-expanded`,
- * `aria-controls`, and `data-state` of `"open"` or `"closed"`. Click toggles
- * its menu; hover or focus switches to it while a sibling menu is already
- * open (matching native app menu bars); Arrow Down/Up, Enter, or Space open it.
+ * The menubar item that opens its {@link MenubarMenu}'s content. Click
+ * toggles its menu; hover or focus switches to it while a sibling menu is
+ * already open, matching native app menu bars. Enter/Space/ArrowDown open on
+ * the first item, ArrowUp on the last — except in a vertical bar, where those
+ * two arrows rove along the bar instead and ArrowRight opens.
  *
  * @example
  * ```tsx