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

@@ -3,31 +3,24 @@ import { type PrimitivePropsWithRef } from '../utils/primitive.cjs';
 import type { MenubarContextValue, MenubarProps } from './types.cjs';
 /** @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;
+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;
+    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;
 };
 /**
- * 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.
+ * Application-style menu bar rendering a row of menus with roving focus and typeahead, derived fully from `menus`.
  *
  * @example
  * ```tsx
@@ -46,13 +39,13 @@ export declare const MenubarRoot: React.ForwardRefExoticComponent<Omit<MenubarRo
  *   ]}
  * />
  * ```
- *
- * @example Full manual composition via `MenubarRoot` from `@skdx/react/primitives/menubar`.
  */
-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 menu panel back at its trigger.
- * Renders inside the popper-positioned content 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
@@ -62,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

@@ -3,31 +3,24 @@ 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;
+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;
+    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;
 };
 /**
- * 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.
+ * Application-style menu bar rendering a row of menus with roving focus and typeahead, derived fully from `menus`.
  *
  * @example
  * ```tsx
@@ -46,13 +39,13 @@ export declare const MenubarRoot: React.ForwardRefExoticComponent<Omit<MenubarRo
  *   ]}
  * />
  * ```
- *
- * @example Full manual composition via `MenubarRoot` from `@skdx/react/primitives/menubar`.
  */
-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 menu panel back at its trigger.
- * Renders inside the popper-positioned content 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
@@ -62,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;
+};