@skdx/react 0.27.0 → 0.29.0

package/dist/menu/types.d.ts

@@ -0,0 +1,397 @@
+import type * as React from 'react';
+import type { AutoFocusEvent } from '../utils/dismissal.js';
+import type { MenuSubContentProps as SharedMenuSubContentProps, MenuSubProps as SharedMenuSubProps, MenuSubTriggerProps as SharedMenuSubTriggerProps } from '../utils/menuSub.js';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { Align, PopperContentProps, Side } from '../utils/popper.js';
+import type { PortalProps } from '../utils/portal.js';
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
+/**
+ * Menu entry: plain action item, separator, checkbox, radio group, or submenu.
+ */
+export type MenuEntry = {
+    label: string;
+    /**
+     * Called when item is activated; fires before recipe's `onSelect`.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: (() => void) | undefined;
+    /**
+     * Keyboard hint rendered as `MenuShortcut`; aria-hidden.
+     * @default undefined — no shortcut is rendered.
+     */
+    shortcut?: string | undefined;
+    /**
+     * Marks item aria-disabled; blocks selection, stays focusable.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Text for typeahead matching; reflected to `data-text-value`.
+     * @default undefined — the item's rendered text is used.
+     */
+    textValue?: string | undefined;
+} | {
+    /** Renders a horizontal rule separating item groups. */
+    type: 'separator';
+} | {
+    type: 'checkbox';
+    label: string;
+    /**
+     * Checked state, always externally controlled via `onCheckedChange`.
+     * @default false
+     */
+    checked?: boolean | undefined;
+    /**
+     * Fires with new checked state when item is selected.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /**
+     * Keyboard hint rendered as `MenuShortcut`; aria-hidden.
+     * @default undefined — no shortcut is rendered.
+     */
+    shortcut?: string | undefined;
+    /**
+     * Marks item aria-disabled; blocks selection, stays focusable.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Text for typeahead matching; reflected to `data-text-value`.
+     * @default undefined — the item's rendered text is used.
+     */
+    textValue?: string | undefined;
+} | {
+    type: 'radio-group';
+    /**
+     * Selected option's `value`, externally controlled.
+     * @default undefined — no option is selected.
+     */
+    value?: string | undefined;
+    /**
+     * Fires with newly selected option's `value`.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: ((value: string) => void) | undefined;
+    items: {
+        label: string;
+        /** Compared against group's `value` for checked state and `onValueChange`. */
+        value: string;
+        /**
+         * Marks option aria-disabled; blocks selection, stays focusable.
+         * @default false
+         */
+        disabled?: boolean | undefined;
+        /**
+         * Text for typeahead matching; reflected to `data-text-value`.
+         * @default undefined — the option's rendered text is used.
+         */
+        textValue?: string | undefined;
+    }[];
+} | {
+    type: 'submenu';
+    label: string;
+    items: MenuEntry[];
+    /**
+     * Marks SubTrigger aria-disabled; blocks submenu open, stays focusable.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Text for typeahead matching on SubTrigger.
+     * @default undefined — the trigger's rendered text is used.
+     */
+    textValue?: string | undefined;
+} | {
+    type: 'group';
+    /**
+     * Heading rendered as `MenuLabel`; the only accessible name for the group.
+     * @default undefined — the group is rendered unnamed.
+     */
+    label?: string | undefined;
+    items: MenuEntry[];
+};
+/** Which end of item list the opening key asks focus to land: `first` (Enter/Space/ArrowDown) or `last` (ArrowUp). */
+export type MenuOpenIntent = 'first' | 'last';
+/** Which gesture opens the menu: a click on a trigger button, or a right-click/long-press on a region. */
+export type MenuOpenOn = 'click' | 'contextmenu';
+/** Viewport coordinates the panel is placed at under `openOn="contextmenu"`. */
+export interface Point {
+    /** Distance in CSS pixels from the left edge of the viewport. */
+    x: number;
+    /** Distance in CSS pixels from the top edge of the viewport. */
+    y: number;
+}
+/** @internal Shared state distributed from {@link Menu} to its parts via context. */
+export interface MenuContextValue {
+    triggerRef: React.RefObject<HTMLElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    /** Trigger's id; Content's `aria-labelledby` points at it for proper menu naming. */
+    triggerId: string;
+    open: boolean;
+    modal: boolean;
+    closeOnSelect: boolean;
+    /** Gesture the Trigger listens for, and the placement mode Content uses. */
+    openOn: MenuOpenOn;
+    /** Coordinates Content places itself at under `contextmenu`: the root's `point`, else the recorded pointer position. */
+    point: Point;
+    setPoint: (point: Point) => void;
+    onOpenChange: (open: boolean) => void;
+    /** Returns focus to Trigger, lifting `modal` inertness so trigger can receive it. */
+    focusTrigger: () => void;
+    /** Content's `onCloseAutoFocus` handler; ref so root can own focus movement. */
+    closeAutoFocusRef: React.RefObject<((event: AutoFocusEvent) => void) | undefined>;
+    /** Which end of menu the last open request asked for; ref read by Content's open effect. */
+    openIntentRef: React.RefObject<MenuOpenIntent>;
+    /** Resolved writing direction for portalled content via DirectionProvider or DOM attribute. */
+    dir: string;
+    /** Elements outside the panel that still count as inside its dismissal layer, such as a menubar's row of triggers. */
+    insideRefs?: readonly React.RefObject<Element | null>[] | undefined;
+    /** Bumped on every open request so re-requesting an already-open panel still moves focus back into it. */
+    openRequestId?: number | undefined;
+}
+/**
+ * Props for the {@link Menu} recipe.
+ * No `children`: the menu is `trigger` plus `items`. Use primitives for manual composition.
+ */
+export interface MenuProps extends PassThroughProps {
+    /**
+     * Element that opens the menu; decorated via `asChild` and merged directly.
+     * @default undefined — no trigger renders.
+     */
+    trigger?: React.ReactElement | undefined;
+    /**
+     * Menu's entries rendered into the `MenuContent` panel.
+     * @default undefined — an empty menu.
+     */
+    items?: MenuEntry[] | undefined;
+    /**
+     * Fires with the activated entry after its own callback.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: ((item: MenuEntry) => void) | undefined;
+    /**
+     * Which side of trigger the panel opens on.
+     * @default 'bottom'
+     */
+    side?: Side | undefined;
+    /**
+     * Alignment of the automatically rendered menu panel relative to the `side` it opens on.
+     * @default 'start'
+     */
+    align?: Align | undefined;
+    /**
+     * Render item contents in place of label; not called for separators or groups.
+     * @default undefined — the entry's `label` is rendered.
+     */
+    renderItem?: ((item: MenuEntry) => React.ReactNode) | undefined;
+    /**
+     * Whether menu is open; for controlled usage pair with `onOpenChange`.
+     * @default undefined — uncontrolled.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether menu is initially open for uncontrolled usage; under `contextmenu` with no `point` the panel opens clamped to the viewport's top-left corner.
+     * @default false
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Which gesture opens the menu: `click` anchors the panel to a trigger button and honours `side`/`align`; `contextmenu` turns the trigger into a right-clickable region opening the panel at the pointer.
+     * @default 'click'
+     */
+    openOn?: MenuOpenOn | undefined;
+    /**
+     * Viewport coordinates the panel is placed at under `openOn="contextmenu"`, overriding the recorded pointer position; ignored under `click`.
+     * @default undefined — the position of the pointer that opened the menu.
+     */
+    point?: Point | undefined;
+    /**
+     * Stands the derived trigger down so it opens nothing; under `openOn="contextmenu"` the native browser menu is let through instead.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the open menu marks outside content inert and locks body scroll; focus is never trapped, since Tab closes the menu per the WAI-ARIA pattern.
+     * @default true — false under `openOn="contextmenu"`.
+     */
+    modal?: boolean | undefined;
+    /**
+     * Whether selecting an item closes the menu, overridable per item; checkbox items stay open by default.
+     * @default true
+     */
+    closeOnSelect?: boolean | undefined;
+    /**
+     * Fires with new open state whenever menu opens or closes.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires once the open state change finishes on screen, after animation ends, for work that must not race the transition.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+    /**
+     * Panel density rung the skin reads, fed to the derived Content and SubContent.
+     * @default undefined — the skin's own default panel size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+}
+/** Props for {@link MenuTrigger}, the button (or, under `openOn="contextmenu"`, the right-clickable region) that opens the menu. */
+export interface MenuTriggerProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Stands the trigger down so it opens nothing; under `openOn="contextmenu"` the native browser menu is let through instead.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+/** Props for {@link MenuPortal}; teleports children to `document.body`. */
+export interface MenuPortalProps extends PortalProps {
+    /**
+     * Render portal while menu is closed instead of unmounting; for animation libraries.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
+}
+/** Props for {@link MenuContent}; extends popper positioning props. */
+export interface MenuContentProps extends PopperContentProps {
+    /**
+     * Panel density rung the skin reads, mirrored to `data-size` on the panel.
+     * @default undefined — the skin's own default panel size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+    /**
+     * Keep panel mounted while closed for animation libraries needing outgoing content.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
+    /**
+     * Whether Up/Down arrow-key navigation wraps from last item to first.
+     * @default true
+     */
+    loop?: boolean | undefined;
+    /**
+     * Fires when Escape is pressed while menu is open; call `preventDefault()` to stop close.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
+    /**
+     * Fires on pointer-down outside content; call `preventDefault()` to stop close.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
+    /**
+     * Fires when focus moves outside content, carrying the original `focusin` event as `detail`; call `preventDefault()` to stop close.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
+    /**
+     * Fires for either outside interaction (pointer-down or focus), before the specific handlers above; one `preventDefault()` here vetoes dismissal either way.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
+    /**
+     * Fires just before focus returns to trigger as menu closes; call `preventDefault()` to suppress.
+     * @default undefined — no-op if omitted.
+     */
+    onCloseAutoFocus?: ((event: AutoFocusEvent) => void) | undefined;
+}
+/** Props for a single {@link MenuItem}. */
+export interface MenuItemProps 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;
+    /**
+     * Marks item aria-disabled; blocks selection, stays focusable.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Text for typeahead matching, reflected to `data-text-value`; required for items rendering more than a label or icon-only items.
+     * @default undefined — the item's rendered text is used.
+     */
+    textValue?: string | undefined;
+    /**
+     * Called when item is activated; call `preventDefault()` to keep menu open.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: ((event: Event) => void) | undefined;
+    /**
+     * Whether selecting this item closes the menu, overriding the root's `closeOnSelect`; the item's own setting or `preventDefault()` can each veto independently.
+     * @default undefined — inherits root's `closeOnSelect`.
+     */
+    closeOnSelect?: boolean | undefined;
+}
+/** Props for {@link MenuCheckboxItem}, a toggleable menu item. */
+export interface MenuCheckboxItemProps extends MenuItemProps {
+    /**
+     * Whether the item is checked, mirroring the checkbox's checked/unchecked visual state.
+     * @default false
+     */
+    checked?: boolean | undefined;
+    /**
+     * Fires with the new checked state when the item is selected.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /**
+     * Whether selecting this item closes the menu; unlike other item types, checkbox items stay open by default since they exist to toggle multiple times.
+     * @default false
+     */
+    closeOnSelect?: boolean | undefined;
+}
+/** @internal Shared selected-value state distributed from {@link MenuRadioGroup} to its `MenuRadioItem`s via context. Not part of the public API. */
+export interface MenuRadioGroupContextValue {
+    value?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+}
+/** Props for {@link MenuRadioGroup}, a container coordinating a set of mutually-exclusive `MenuRadioItem`s. */
+export interface MenuRadioGroupProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Selected item's value; compared against each radio item's own `value`.
+     * @default undefined — no item is selected.
+     */
+    value?: string | undefined;
+    /**
+     * Fires with the new value when a `MenuRadioItem` in this group is selected.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: ((value: string) => void) | undefined;
+}
+/** Props for a single {@link MenuRadioItem} inside a `MenuRadioGroup`. */
+export interface MenuRadioItemProps extends MenuItemProps {
+    /** Unique identifier compared against the group's selected `value`. */
+    value: string;
+}
+/** Props for {@link MenuItemIndicator}, the checked-state glyph inside a checkbox/radio item. */
+export interface MenuItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Keep indicator mounted while unchecked for animation libraries needing outgoing content.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
+}
+/** Props for {@link MenuGroup}, a semantic grouping of related items. */
+export interface MenuGroupProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link MenuLabel}, a non-interactive heading for a group of items. */
+export interface MenuLabelProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link MenuSeparator}, a visual divider between items or groups. */
+export interface MenuSeparatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link MenuShortcut}, the keyboard hint at an item's trailing edge. */
+export interface MenuShortcutProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link MenuSub}, the root of a nested submenu. */
+export interface MenuSubProps extends SharedMenuSubProps {
+}
+/** Props for {@link MenuSubTrigger}, the parent-menu item that opens a submenu and anchors it. */
+export interface MenuSubTriggerProps extends SharedMenuSubTriggerProps {
+}
+/** Props for {@link MenuSubContent}, the submenu's floating panel. */
+export interface MenuSubContentProps extends SharedMenuSubContentProps {
+}

package/dist/menubar/Menubar.cjs

@@ -1 +1,2 @@
-"use strict";var ar=Object.create;var S=Object.defineProperty;var ur=Object.getOwnPropertyDescriptor;var ir=Object.getOwnPropertyNames;var mr=Object.getPrototypeOf,pr=Object.prototype.hasOwnProperty;var sr=(e,o)=>{for(var t in o)S(e,t,{get:o[t],enumerable:!0})},Q=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of ir(o))!pr.call(e,n)&&n!==t&&S(e,n,{get:()=>o[n],enumerable:!(r=ur(o,n))||r.enumerable});return e};var s=(e,o,t)=>(t=e!=null?ar(mr(e)):{},Q(o||!e||!e.__esModule?S(t,"default",{value:e,enumerable:!0}):t,e)),cr=e=>Q(S({},"__esModule",{value:!0}),e);var br={};sr(br,{Menubar:()=>oe,MenubarArrow:()=>te,MenubarCheckboxItem:()=>F,MenubarContent:()=>O,MenubarGroup:()=>z,MenubarItem:()=>V,MenubarItemIndicator:()=>A,MenubarLabel:()=>W,MenubarMenu:()=>D,MenubarPortal:()=>H,MenubarRadioGroup:()=>_,MenubarRadioItem:()=>q,MenubarRootProvider:()=>re,MenubarSeparator:()=>$,MenubarSub:()=>J,MenubarSubContent:()=>er,MenubarSubTrigger:()=>je,MenubarTrigger:()=>G,useMenubarContext:()=>C});module.exports=cr(br);var d=s(require("react"),1),Y=require("../utils/composeRefs.cjs"),Z=require("../utils/createContext.cjs"),w=require("../utils/part.cjs"),j=require("../utils/popper.cjs"),E=require("../utils/primitive.cjs"),ee=require("../utils/useControllableState.cjs"),h=require("../utils/useRovingFocus.cjs"),T=require("react/jsx-runtime"),X="[data-skdx-menubar-trigger]:not([data-disabled])",[re,C]=(0,Z.createSafeContext)("Menubar"),oe=d.forwardRef(({value:e,defaultValue:o="",onValueChange:t,...r},n)=>{let[m="",u]=(0,ee.useControllableState)({prop:e,defaultProp:o,onChange:t}),i=(0,h.useRovingFocus)({orientation:"horizontal",loop:!0,itemSelector:X,typeahead:!0}),[f,l]=d.useState(null),I=d.useRef(null),a=(0,Y.useComposedRefs)(n,I);return(0,h.useRovingTabStop)(I,X,"data-skdx-menubar-trigger",f,l),(0,T.jsx)(re,{value:m,onValueChange:u,currentTabStopId:f,setCurrentTabStopId:l,children:(0,T.jsx)(E.Primitive.div,{role:"menubar",...r,...(0,w.skdxPart)("menubar","root",r.className),ref:a,onKeyDown:(0,E.composeEventHandlers)(r.onKeyDown,i)})})});oe.displayName="Menubar";var te=d.forwardRef((e,o)=>(0,T.jsx)(j.PopperArrow,{...e,...(0,w.skdxPart)("menubar","arrow",e.className),ref:o}));te.displayName="MenubarArrow";var c=s(require("react"),1),ne=require("../utils/createContext.cjs"),ae=require("../utils/popper.cjs"),ue=require("../utils/useOpenChangeComplete.cjs");var N=require("react/jsx-runtime"),[fr,b]=(0,ne.createSafeContext)("MenubarMenu");function D({value:e,children:o,onOpenChangeComplete:t}){let r=C("MenubarMenu"),n=c.useRef(null),m=c.useRef(null),u=c.useRef(!1),i=r.value===e;(0,ue.useOpenChangeComplete)(i,m,t);let f=c.useCallback(()=>r.onValueChange(e),[r,e]),l=c.useCallback(()=>{u.current=!1,r.onValueChange("")},[r]);return(0,N.jsx)(ae.PopperRoot,{children:(0,N.jsx)(fr,{menuValue:e,triggerRef:n,contentRef:m,contentId:c.useId(),open:i,openedExplicitlyRef:u,onOpen:f,onClose:l,children:o})})}D.displayName="MenubarMenu";var k=s(require("react"),1),ie=require("../utils/composeRefs.cjs"),me=require("../utils/part.cjs"),pe=require("../utils/popper.cjs"),M=require("../utils/primitive.cjs"),se=require("../utils/useRovingFocus.cjs");var L=require("react/jsx-runtime"),G=k.forwardRef((e,o)=>{let t=C("MenubarTrigger"),r=b("MenubarTrigger"),n=(0,ie.useComposedRefs)(o,r.triggerRef),m=t.value!=="",u=k.useId();return(0,L.jsx)(pe.PopperAnchor,{asChild:!0,children:(0,L.jsx)(M.Primitive.button,{type:"button",role:"menuitem","aria-haspopup":"menu","aria-expanded":r.open,"aria-controls":r.contentId,"data-skdx-menubar-trigger":u,"data-state":r.open?"open":"closed","data-disabled":e.disabled?"":void 0,tabIndex:(0,se.rovingTabIndex)(t.currentTabStopId!==null,t.currentTabStopId===u,e.disabled),...e,...(0,me.skdxPart)("menubar","trigger",e.className),ref:n,onClick:(0,M.composeEventHandlers)(e.onClick,()=>{e.disabled||(r.open&&r.openedExplicitlyRef.current?(r.onClose(),r.openedExplicitlyRef.current=!1):(r.onOpen(),r.openedExplicitlyRef.current=!0))}),onPointerEnter:(0,M.composeEventHandlers)(e.onPointerEnter,i=>{e.disabled||i.pointerType==="touch"||m&&t.value!==r.menuValue&&(r.onOpen(),r.openedExplicitlyRef.current=!1)}),onFocus:(0,M.composeEventHandlers)(e.onFocus,()=>{t.setCurrentTabStopId(u),!e.disabled&&m&&t.value!==r.menuValue&&(r.onOpen(),r.openedExplicitlyRef.current=!1)}),onKeyDown:(0,M.composeEventHandlers)(e.onKeyDown,i=>{e.disabled||["ArrowDown","ArrowUp"," ","Enter"].includes(i.key)&&(i.preventDefault(),r.onOpen(),r.openedExplicitlyRef.current=!0)})})})});G.displayName="MenubarTrigger";var ce=require("../utils/portal.cjs");var fe=require("react/jsx-runtime"),H=({forceMount:e,children:o,...t})=>{let r=b("MenubarPortal");return e||r.open?(0,fe.jsx)(ce.Portal,{...t,children:o}):null};H.displayName="MenubarPortal";var R=s(require("react"),1),be=require("../utils/composeRefs.cjs"),de=require("../utils/menuSub.cjs"),Me=require("../utils/part.cjs"),Re=require("../utils/popper.cjs"),Pe=require("../utils/primitive.cjs"),xe=require("../utils/useDismiss.cjs"),Ce=require("../utils/useRovingFocus.cjs");var ge=require("react/jsx-runtime"),le='[role^="menuitem"]:not([data-disabled])',O=R.forwardRef(({forceMount:e,loop:o=!0,onEscapeKeyDown:t,onPointerDownOutside:r,onFocusOutside:n,onInteractOutside:m,side:u="bottom",align:i="start",sideOffset:f=4,...l},I)=>{let a=b("MenubarContent"),or=(0,be.useComposedRefs)(I,a.contentRef),tr=(0,Ce.useRovingFocus)({orientation:"vertical",loop:o,itemSelector:le,typeahead:!0}),nr=R.useMemo(()=>({get current(){return a.triggerRef.current?.closest('[role="menubar"]')??null}}),[a.triggerRef]);return(0,xe.useDismiss)({enabled:a.open,insideSelector:`[${de.MENU_BRANCH_ATTRIBUTE}]`,onEscapeKeyDown:p=>{t?.(p),p.defaultPrevented||(a.onClose(),a.triggerRef.current?.focus())},onInteractOutside:m,onPointerDownOutside:p=>{r?.(p),p.defaultPrevented||a.onClose()},onFocusOutside:p=>{n?.(p),p.defaultPrevented||a.onClose()}},[a.triggerRef,a.contentRef,nr]),R.useEffect(()=>{if(!a.open)return;let p=requestAnimationFrame(()=>{let v=a.contentRef.current;if(!v||v.contains(document.activeElement))return;(v.querySelector(le)??v).focus({preventScroll:!0})});return()=>cancelAnimationFrame(p)},[a.open,a.contentRef]),e||a.open?(0,ge.jsx)(Re.PopperContent,{component:"menubar",role:"menu","aria-orientation":"vertical",id:a.contentId,"data-state":a.open?"open":"closed",tabIndex:-1,side:u,align:i,sideOffset:f,...l,...(0,Me.skdxPart)("menubar","content",l.className),ref:or,onKeyDown:(0,Pe.composeEventHandlers)(l.onKeyDown,p=>{tr(p),p.key==="Tab"&&(p.preventDefault(),a.onClose(),a.triggerRef.current?.focus())})}):null});O.displayName="MenubarContent";var ye=s(require("react"),1),Ie=require("../utils/part.cjs"),ve=require("../utils/primitive.cjs"),Se=require("../utils/useMenuItem.cjs");var Te=require("react/jsx-runtime");function g({disabled:e,onSelect:o,props:t}){let r=b("MenubarItem");return(0,Se.useMenuItem)({disabled:e,onSelect:o,onSelected:()=>{r.onClose(),r.triggerRef.current?.focus()},contentRef:r.contentRef,props:t})}var V=ye.forwardRef(({disabled:e,onSelect:o,...t},r)=>{let n=g({disabled:e,onSelect:o,props:t});return(0,Te.jsx)(ve.Primitive.div,{role:"menuitem",...t,...n,...(0,Ie.skdxPart)("menubar","item",t.className),ref:r})});V.displayName="MenubarItem";var we=s(require("react"),1),Ne=require("../utils/part.cjs"),De=require("../utils/primitive.cjs");var P=s(require("react"),1),Ee=require("../utils/part.cjs"),he=require("../utils/primitive.cjs"),ke=require("react/jsx-runtime"),y=P.createContext(!1),A=P.forwardRef(({forceMount:e,...o},t)=>{let r=P.useContext(y);return e||r?(0,ke.jsx)(he.Primitive.span,{"data-state":r?"checked":"unchecked",...o,...(0,Ee.skdxPart)("menubar","item-indicator",o.className),ref:t}):null});A.displayName="MenubarItemIndicator";var K=require("react/jsx-runtime"),F=we.forwardRef(({checked:e=!1,onCheckedChange:o,disabled:t,onSelect:r,...n},m)=>{let u=g({disabled:t,onSelect:i=>{o?.(!e),r?.(i),i.preventDefault()},props:n});return(0,K.jsx)(y.Provider,{value:e,children:(0,K.jsx)(De.Primitive.div,{role:"menuitemcheckbox","aria-checked":e,"data-state":e?"checked":"unchecked",...n,...u,...(0,Ne.skdxPart)("menubar","checkbox-item",n.className),ref:m})})});F.displayName="MenubarCheckboxItem";var Le=s(require("react"),1),Ge=require("../utils/createContext.cjs"),He=require("../utils/part.cjs"),Oe=require("../utils/primitive.cjs"),B=require("react/jsx-runtime"),[lr,Ve]=(0,Ge.createSafeContext)("MenubarRadioGroup"),_=Le.forwardRef(({value:e,onValueChange:o,...t},r)=>(0,B.jsx)(lr,{value:e,onValueChange:o,children:(0,B.jsx)(Oe.Primitive.div,{role:"group",...t,...(0,He.skdxPart)("menubar","radio-group",t.className),ref:r})}));_.displayName="MenubarRadioGroup";var Ae=s(require("react"),1),Ke=require("../utils/part.cjs"),Fe=require("../utils/primitive.cjs");var U=require("react/jsx-runtime"),q=Ae.forwardRef(({value:e,disabled:o,onSelect:t,...r},n)=>{let m=Ve("MenubarRadioItem"),u=m.value===e,i=g({disabled:o,onSelect:f=>{m.onValueChange?.(e),t?.(f)},props:r});return(0,U.jsx)(y.Provider,{value:u,children:(0,U.jsx)(Fe.Primitive.div,{role:"menuitemradio","aria-checked":u,"data-state":u?"checked":"unchecked",...r,...i,...(0,Ke.skdxPart)("menubar","radio-item",r.className),ref:n})})});q.displayName="MenubarRadioItem";var Be=s(require("react"),1),_e=require("../utils/part.cjs"),Ue=require("../utils/primitive.cjs"),qe=require("react/jsx-runtime"),z=Be.forwardRef((e,o)=>(0,qe.jsx)(Ue.Primitive.div,{role:"group",...e,...(0,_e.skdxPart)("menubar","group",e.className),ref:o}));z.displayName="MenubarGroup";var ze=s(require("react"),1),We=require("../utils/part.cjs"),$e=require("../utils/primitive.cjs"),Je=require("react/jsx-runtime"),W=ze.forwardRef((e,o)=>(0,Je.jsx)($e.Primitive.div,{...e,...(0,We.skdxPart)("menubar","label",e.className),ref:o}));W.displayName="MenubarLabel";var Qe=s(require("react"),1),Xe=require("../utils/part.cjs"),Ye=require("../utils/primitive.cjs"),Ze=require("react/jsx-runtime"),$=Qe.forwardRef((e,o)=>(0,Ze.jsx)(Ye.Primitive.div,{role:"separator","aria-orientation":"horizontal",...e,...(0,Xe.skdxPart)("menubar","separator",e.className),ref:o}));$.displayName="MenubarSeparator";var x=require("../utils/menuSub.cjs"),rr=require("react/jsx-runtime");function J(e){return(0,rr.jsx)(x.MenuSub,{family:"menubar",...e})}J.displayName="MenubarSub";var je=x.MenuSubTrigger,er=x.MenuSubContent;0&&(module.exports={Menubar,MenubarArrow,MenubarCheckboxItem,MenubarContent,MenubarGroup,MenubarItem,MenubarItemIndicator,MenubarLabel,MenubarMenu,MenubarPortal,MenubarRadioGroup,MenubarRadioItem,MenubarRootProvider,MenubarSeparator,MenubarSub,MenubarSubContent,MenubarSubTrigger,MenubarTrigger,useMenubarContext});
+'use client';
+"use strict";var Be=Object.create;var N=Object.defineProperty;var Qe=Object.getOwnPropertyDescriptor;var Ye=Object.getOwnPropertyNames;var Ze=Object.getPrototypeOf,je=Object.prototype.hasOwnProperty;var er=(e,t)=>{for(var a in t)N(e,a,{get:t[a],enumerable:!0})},te=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of Ye(t))!je.call(e,u)&&u!==a&&N(e,u,{get:()=>t[u],enumerable:!(o=Qe(t,u))||o.enumerable});return e};var oe=(e,t,a)=>(a=e!=null?Be(Ze(e)):{},te(t||!e||!e.__esModule?N(a,"default",{value:e,enumerable:!0}):a,e)),rr=e=>te(N({},"__esModule",{value:!0}),e);var nr={};er(nr,{Menubar:()=>j,MenubarArrow:()=>Ue,MenubarCheckboxItem:()=>k,MenubarContent:()=>A,MenubarGroup:()=>w,MenubarItem:()=>O,MenubarItemIndicator:()=>C,MenubarLabel:()=>G,MenubarMenu:()=>v,MenubarMenuProvider:()=>ie,MenubarPortal:()=>D,MenubarRadioGroup:()=>V,MenubarRadioItem:()=>L,MenubarRoot:()=>Z,MenubarRootProvider:()=>$e,MenubarSeparator:()=>K,MenubarShortcut:()=>S,MenubarSub:()=>F,MenubarSubContent:()=>W,MenubarSubTrigger:()=>_,MenubarTrigger:()=>H,TRIGGER_SELECTOR:()=>P,useMenubarContext:()=>x,useMenubarMenuContext:()=>I});module.exports=rr(nr);var z=oe(require("react"),1),Fe=require("../utils/appearance.cjs"),He=require("../utils/composeRefs.cjs"),ze=require("../utils/createContext.cjs"),Y=require("../utils/part.cjs"),Je=require("../utils/popper.cjs"),J=require("../utils/primitive.cjs"),Xe=require("../utils/recipeAxis.cjs"),qe=require("../utils/useControllableState.cjs"),X=require("../utils/useRovingFocus.cjs");var Q=require("../utils/Glyph.cjs");var ne=require("../menu/Menu.cjs"),ae=require("react/jsx-runtime"),k=e=>(0,ae.jsx)(ne.MenuCheckboxItem,{...e});k.displayName="MenubarCheckboxItem";var be=require("../menu/Menu.cjs"),E=require("../utils/direction.cjs"),le=require("../utils/primitive.cjs");var i=oe(require("react"),1),T=require("../menu/Menu.cjs"),ue=require("../utils/createContext.cjs"),pe=require("../utils/direction.cjs"),se=require("../utils/dismissal.cjs"),me=require("../utils/popper.cjs"),ce=require("../utils/useOpenChangeComplete.cjs");var g=require("react/jsx-runtime"),[ie,I]=(0,ue.createSafeContext)("MenubarMenu"),tr={x:0,y:0},or=()=>{};function v({value:e,children:t,onOpenChangeComplete:a}){let o=x("MenubarMenu"),u=i.useRef(null),m=i.useRef(null),r=i.useRef(!1),p=i.useRef(void 0),n=i.useRef("first"),c=o.menu===e,[b,q]=i.useState(0),M=i.useId(),R=i.useId(),h=(0,pe.usePortalledDirection)(u);(0,ce.useOpenChangeComplete)(c,m,a);let y=i.useCallback(()=>{o.onMenuChange(e),q(U=>U+1)},[o,e]),$=i.useCallback(()=>{r.current=!1,o.onMenuChange("")},[o]),ee=i.useCallback(()=>{(0,se.autoFocusEvent)("close-auto-focus",p.current)&&u.current?.focus()},[]),_e=i.useCallback(U=>U?y():$(),[y,$]),re=i.useMemo(()=>({get current(){return u.current?.closest('[role="menubar"]')??null}}),[]),We=i.useMemo(()=>[re],[re]);return(0,g.jsx)(me.PopperRoot,{children:(0,g.jsx)(ie,{menuValue:e,triggerRef:u,contentRef:m,contentId:M,triggerId:R,open:c,openedExplicitlyRef:r,onOpen:y,onClose:$,focusTrigger:ee,closeAutoFocusRef:p,openIntentRef:n,openRequestId:b,children:(0,g.jsx)(T.MenuFamilyContext.Provider,{value:"menubar",children:(0,g.jsx)(T.MenuProvider,{triggerRef:u,contentRef:m,contentId:M,triggerId:R,open:c,modal:!1,closeOnSelect:!0,openOn:"click",point:tr,setPoint:or,onOpenChange:_e,focusTrigger:ee,closeAutoFocusRef:p,openIntentRef:n,dir:h,insideRefs:We,openRequestId:b,children:t})})})})}v.displayName="MenubarMenu";var de=require("react/jsx-runtime"),A=({align:e="start",sideOffset:t=4,...a})=>{let o=I("MenubarContent"),u=(0,E.usePortalledDirection)(o.triggerRef),m=p=>{let n=Array.from(o.triggerRef.current?.closest('[role="menubar"]')?.querySelectorAll(P)??[]),c=n.findIndex(b=>b===o.triggerRef.current);c!==-1&&n[(c+p+n.length)%n.length]?.focus()},r=(0,le.useComposedEventHandlers)(a.onKeyDown,p=>{let n=(0,E.directionalKey)(p.key,p.currentTarget,u);n!=="ArrowRight"&&n!=="ArrowLeft"||(p.preventDefault(),p.stopPropagation(),m(n==="ArrowRight"?1:-1))});return(0,de.jsx)(be.MenuContent,{...a,align:e,sideOffset:t,onKeyDown:r})};A.displayName="MenubarContent";var fe=require("../menu/Menu.cjs"),Me=require("react/jsx-runtime"),w=e=>(0,Me.jsx)(fe.MenuGroup,{...e});w.displayName="MenubarGroup";var Re=require("../menu/Menu.cjs"),ye=require("react/jsx-runtime"),O=e=>(0,ye.jsx)(Re.MenuItem,{...e});O.displayName="MenubarItem";var ge=require("../menu/Menu.cjs"),Ie=require("react/jsx-runtime"),C=e=>(0,Ie.jsx)(ge.MenuItemIndicator,{...e});C.displayName="MenubarItemIndicator";var xe=require("../menu/Menu.cjs"),Pe=require("react/jsx-runtime"),G=e=>(0,Pe.jsx)(xe.MenuLabel,{...e});G.displayName="MenubarLabel";var Ce=require("../menu/Menu.cjs"),Se=require("react/jsx-runtime"),D=e=>(0,Se.jsx)(Ce.MenuPortal,{...e});D.displayName="MenubarPortal";var he=require("../menu/Menu.cjs"),Ne=require("react/jsx-runtime"),V=e=>(0,Ne.jsx)(he.MenuRadioGroup,{...e});V.displayName="MenubarRadioGroup";var ke=require("../menu/Menu.cjs"),Te=require("react/jsx-runtime"),L=e=>(0,Te.jsx)(ke.MenuRadioItem,{...e});L.displayName="MenubarRadioItem";var ve=require("../menu/Menu.cjs"),Ee=require("react/jsx-runtime"),K=e=>(0,Ee.jsx)(ve.MenuSeparator,{...e});K.displayName="MenubarSeparator";var Ae=require("../menu/Menu.cjs"),we=require("react/jsx-runtime"),S=e=>(0,we.jsx)(Ae.MenuShortcut,{...e});S.displayName="MenubarShortcut";var d=require("../menu/Menu.cjs"),Oe=require("react/jsx-runtime");function F(e){return(0,Oe.jsx)(d.MenuSub,{...e})}F.displayName="MenubarSub";var _=d.MenuSubTrigger,W=d.MenuSubContent;var Ge=require("../utils/composeRefs.cjs"),De=require("../utils/part.cjs"),Ve=require("../utils/popper.cjs"),l=require("../utils/primitive.cjs"),Le=require("../utils/useRovingFocus.cjs");var B=require("react/jsx-runtime"),H=({ref:e,...t})=>{let a=x("MenubarTrigger"),o=I("MenubarTrigger"),{openIntentRef:u,openedExplicitlyRef:m}=o,r=(0,Ge.useComposedRefs)(e,o.triggerRef),p=a.menu!=="",n=o.triggerId;return(0,B.jsx)(Ve.PopperAnchor,{asChild:!0,children:(0,B.jsx)(l.Primitive.button,{type:"button",role:"menuitem",id:n,"aria-haspopup":"menu","aria-expanded":o.open,"aria-controls":o.contentId,"data-skdx-menubar-trigger":n,"data-state":o.open?"open":"closed","data-disabled":t.disabled?"":void 0,tabIndex:(0,Le.rovingTabIndex)(a.currentTabStopId!==null,a.currentTabStopId===n,t.disabled),...t,...(0,De.skdxPart)("menubar","trigger",t.className),ref:r,onClick:(0,l.useComposedEventHandlers)(t.onClick,()=>{u.current="first",!t.disabled&&(o.open&&m.current?(o.onClose(),m.current=!1):(o.onOpen(),m.current=!0))}),onPointerEnter:(0,l.useComposedEventHandlers)(t.onPointerEnter,c=>{t.disabled||c.pointerType==="touch"||(u.current="first",p&&a.menu!==o.menuValue&&(o.onOpen(),m.current=!1))}),onFocus:(0,l.useComposedEventHandlers)(t.onFocus,()=>{a.setCurrentTabStopId(n),!t.disabled&&(u.current="first",p&&a.menu!==o.menuValue&&(o.onOpen(),m.current=!1))}),onKeyDown:(0,l.useComposedEventHandlers)(t.onKeyDown,c=>{if(t.disabled)return;(a.orientation==="horizontal"?["ArrowDown","ArrowUp"," ","Enter"]:["ArrowRight"," ","Enter"]).includes(c.key)&&(u.current=c.key==="ArrowUp"?"last":"first",c.preventDefault(),o.onOpen(),m.current=!0)})})})};H.displayName="MenubarTrigger";var s=require("react/jsx-runtime"),Ke=({size:e,menus:t=[],onSelect:a,renderItem:o})=>{let u=r=>o?o(r):"label"in r?r.label:null,m=(r,p)=>{if(!("type"in r))return(0,s.jsxs)(O,{disabled:r.disabled,textValue:r.textValue??r.label,onSelect:()=>{r.onSelect?.(),a?.(r)},children:[u(r),r.shortcut?(0,s.jsx)(S,{children:r.shortcut}):null]},p);switch(r.type){case"separator":return(0,s.jsx)(K,{},p);case"checkbox":return(0,s.jsxs)(k,{checked:r.checked,onCheckedChange:r.onCheckedChange,disabled:r.disabled,textValue:r.textValue??r.label,onSelect:()=>a?.(r),children:[(0,s.jsx)(C,{"aria-hidden":"true",children:(0,s.jsx)(Q.Glyph,{name:"check"})}),u(r),r.shortcut?(0,s.jsx)(S,{children:r.shortcut}):null]},p);case"radio-group":return(0,s.jsx)(V,{value:r.value,onValueChange:r.onValueChange,children:r.items.map(n=>(0,s.jsxs)(L,{value:n.value,disabled:n.disabled,textValue:n.textValue??n.label,children:[(0,s.jsx)(C,{"aria-hidden":"true",children:(0,s.jsx)(Q.Glyph,{name:"dot"})}),n.label]},n.value))},p);case"submenu":return(0,s.jsxs)(F,{children:[(0,s.jsx)(_,{disabled:r.disabled,textValue:r.textValue??r.label,children:u(r)}),(0,s.jsx)(W,{size:e,children:r.items.map((n,c)=>m(n,`${p}.${c}`))})]},p);case"group":return(0,s.jsxs)(w,{children:[r.label?(0,s.jsx)(G,{children:r.label}):null,r.items.map((n,c)=>m(n,`${p}.${c}`))]},p)}};return(0,s.jsx)(s.Fragment,{children:t.map((r,p)=>{let n=r.value??String(p);return(0,s.jsxs)(v,{value:n,children:[(0,s.jsx)(H,{disabled:r.disabled,children:r.label}),(0,s.jsx)(D,{children:(0,s.jsx)(A,{children:r.items.map((c,b)=>m(c,String(b)))})})]},n)})})};var f=require("react/jsx-runtime"),P="[data-skdx-menubar-trigger]:not([data-disabled])",[$e,x]=(0,ze.createSafeContext)("Menubar"),Z=({menu:e,defaultMenu:t="",onMenuChange:a,orientation:o="horizontal",loop:u=!0,density:m,size:r,ref:p,...n})=>{let[c="",b]=(0,qe.useControllableState)({prop:e,defaultProp:t,onChange:a}),q=(0,X.useRovingFocus)({orientation:o,loop:u,itemSelector:P,typeahead:!0}),[M,R]=z.useState(null),h=z.useRef(null),y=(0,He.useComposedRefs)(p,h);return(0,X.useRovingTabStop)(h,P,"data-skdx-menubar-trigger",M,R),(0,f.jsx)($e,{menu:c,onMenuChange:b,orientation:o,currentTabStopId:M,setCurrentTabStopId:R,children:(0,f.jsx)(J.Primitive.div,{role:"menubar","aria-orientation":o,...n,...(0,Fe.appearanceAttrs)({density:m,size:r},n),...(0,Y.skdxPart)("menubar","root",n.className),ref:y,onKeyDown:(0,J.composeEventHandlers)(n.onKeyDown,q)})})};Z.displayName="MenubarRoot";var j=({menus:e,onSelect:t,renderItem:a,size:o,ref:u,...m})=>(0,f.jsx)(Z,{...m,size:o,ref:u,children:(0,f.jsx)(Ke,{size:(0,Xe.recipeAxis)(o,m,"data-size"),menus:e,onSelect:t,renderItem:a})});j.displayName="Menubar";var Ue=({ref:e,...t})=>(0,f.jsx)(Je.PopperArrow,{...t,...(0,Y.skdxPart)("menubar","arrow",t.className),ref:e});Ue.displayName="MenubarArrow";0&&(module.exports={Menubar,MenubarArrow,MenubarCheckboxItem,MenubarContent,MenubarGroup,MenubarItem,MenubarItemIndicator,MenubarLabel,MenubarMenu,MenubarMenuProvider,MenubarPortal,MenubarRadioGroup,MenubarRadioItem,MenubarRoot,MenubarRootProvider,MenubarSeparator,MenubarShortcut,MenubarSub,MenubarSubContent,MenubarSubTrigger,MenubarTrigger,TRIGGER_SELECTOR,useMenubarContext,useMenubarMenuContext});

package/dist/menubar/Menubar.d.cts

@@ -1,44 +1,51 @@
 import * as React from 'react';
 import { type PrimitivePropsWithRef } from '../utils/primitive.cjs';
 import type { MenubarContextValue, MenubarProps } from './types.cjs';
-export declare const MenubarRootProvider: {
-    (props: MenubarContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
+/** @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: React.FC<MenubarContextValue & {
+    children: React.ReactNode;
+}>, 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 | undefined;
+};
+/** Menubar's state primitive, owning which menu is open and managing roving focus and typeahead across triggers, rendered as `<div role="menubar">`. */
+export declare const MenubarRoot: {
+    ({ menu: menuProp, defaultMenu, onMenuChange, orientation, loop, density, size, ref: forwardedRef, ...props }: MenubarRootProps): React.ReactNode;
     displayName: string;
-}, useMenubarContext: (consumerName: string) => MenubarContextValue;
+};
 /**
- * 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`).
+ * Application-style menu bar rendering a row of menus with roving focus and typeahead, derived fully from `menus`.
  *
  * @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' }] },
+ *   ]}
+ * />
  * ```
  */
-export declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Menubar: {
+    ({ menus, onSelect, renderItem, size, ref: forwardedRef, ...rest }: MenubarProps): React.ReactNode;
+    displayName: string;
+};
 /**
- * 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, rendered as a direct child of `MenubarContent`.
  *
  * @example
  * ```tsx
@@ -48,4 +55,7 @@ export declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarProps,
  * </MenubarContent>
  * ```
  */
-export declare const MenubarArrow: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const MenubarArrow: {
+    ({ ref: forwardedRef, ...props }: PrimitivePropsWithRef<"span">): React.ReactNode;
+    displayName: string;
+};

package/dist/menubar/Menubar.d.ts

@@ -1,44 +1,51 @@
 import * as React from 'react';
 import { type PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { MenubarContextValue, MenubarProps } from './types.js';
-export declare const MenubarRootProvider: {
-    (props: MenubarContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
+/** @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: React.FC<MenubarContextValue & {
+    children: React.ReactNode;
+}>, 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 | undefined;
+};
+/** Menubar's state primitive, owning which menu is open and managing roving focus and typeahead across triggers, rendered as `<div role="menubar">`. */
+export declare const MenubarRoot: {
+    ({ menu: menuProp, defaultMenu, onMenuChange, orientation, loop, density, size, ref: forwardedRef, ...props }: MenubarRootProps): React.ReactNode;
     displayName: string;
-}, useMenubarContext: (consumerName: string) => MenubarContextValue;
+};
 /**
- * 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`).
+ * Application-style menu bar rendering a row of menus with roving focus and typeahead, derived fully from `menus`.
  *
  * @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' }] },
+ *   ]}
+ * />
  * ```
  */
-export declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Menubar: {
+    ({ menus, onSelect, renderItem, size, ref: forwardedRef, ...rest }: MenubarProps): React.ReactNode;
+    displayName: string;
+};
 /**
- * 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, rendered as a direct child of `MenubarContent`.
  *
  * @example
  * ```tsx
@@ -48,4 +55,7 @@ export declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarProps,
  * </MenubarContent>
  * ```
  */
-export declare const MenubarArrow: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const MenubarArrow: {
+    ({ ref: forwardedRef, ...props }: PrimitivePropsWithRef<"span">): React.ReactNode;
+    displayName: string;
+};