@ariakit/react-components 0.1.0

package/dist/menu/menu.js

@@ -0,0 +1,169 @@
+"use client";
+import { createDialogComponent } from "../dialog/dialog.js";
+import { useHovercard } from "../hovercard/hovercard.js";
+import { useMenuProviderContext } from "./menu-context.js";
+import { useMenuList } from "./menu-list.js";
+import { createElement, createHook, forwardRef, useMergeRefs } from "@ariakit/react-utils";
+import { fireEvent, hasFocusWithin, invariant, isFalsyBooleanCallback } from "@ariakit/utils";
+import { createRef, useEffect, useMemo, useRef, useState } from "react";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/menu/menu.tsx
+const TagName = "div";
+/**
+* Returns props to create a `Menu` component.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx
+* const store = useMenuStore();
+* const props = useMenu({ store });
+* <MenuButton store={store}>Edit</MenuButton>
+* <Role {...props}>
+*   <MenuItem>Undo</MenuItem>
+*   <MenuItem>Redo</MenuItem>
+* </Role>
+* ```
+*/
+const useMenu = createHook(function useMenu({ store, modal: modalProp = false, portal = modalProp, hideOnEscape = true, autoFocusOnShow = true, hideOnHoverOutside, alwaysVisible, ...props }) {
+	const context = useMenuProviderContext();
+	store = store || context;
+	invariant(store, "Menu must receive a `store` prop or be wrapped in a MenuProvider component.");
+	const ref = useRef(null);
+	const parentMenu = store.parent;
+	const parentMenubar = store.menubar;
+	const hasParentMenu = !!parentMenu;
+	const parentIsMenubar = !!parentMenubar && !hasParentMenu;
+	const modal = hasParentMenu ? false : modalProp;
+	props = {
+		...props,
+		ref: useMergeRefs(ref, props.ref)
+	};
+	const { "aria-labelledby": ariaLabelledBy, ...menuListProps } = useMenuList({
+		store,
+		alwaysVisible,
+		...props
+	});
+	props = menuListProps;
+	const [initialFocusRef, setInitialFocusRef] = useState();
+	const autoFocusOnShowState = useStoreState(store, "autoFocusOnShow");
+	const initialFocus = useStoreState(store, "initialFocus");
+	const baseElement = useStoreState(store, "baseElement");
+	const items = useStoreState(store, "renderedItems");
+	useEffect(() => {
+		let cleaning = false;
+		setInitialFocusRef((prevInitialFocusRef) => {
+			if (cleaning) return;
+			if (modal && prevInitialFocusRef?.current?.isConnected) return prevInitialFocusRef;
+			if (!autoFocusOnShowState) return;
+			let element;
+			switch (initialFocus) {
+				case "first":
+					element = items.find((item) => !item.disabled && item.element)?.element || null;
+					break;
+				case "last":
+					element = [...items].reverse().find((item) => !item.disabled && item.element)?.element || null;
+					break;
+				default: element = baseElement;
+			}
+			if (element && element === prevInitialFocusRef?.current) return prevInitialFocusRef;
+			const ref = createRef();
+			ref.current = element;
+			return ref;
+		});
+		return () => {
+			cleaning = true;
+		};
+	}, [
+		store,
+		modal,
+		autoFocusOnShowState,
+		initialFocus,
+		items,
+		baseElement
+	]);
+	const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || modal;
+	const autoFocusOnShowProp = autoFocusOnShow === false ? false : canAutoFocusOnShow && autoFocusOnShow;
+	const contentElement = useStoreState(store.combobox || store, "contentElement");
+	const parentContentElement = useStoreState(parentMenu?.combobox || parentMenu, "contentElement");
+	const preserveTabOrderAnchor = useMemo(() => {
+		if (!parentContentElement) return;
+		if (!contentElement) return;
+		const role = contentElement.getAttribute("role");
+		const parentRole = parentContentElement.getAttribute("role");
+		if ((parentRole === "menu" || parentRole === "menubar") && role === "menu") return;
+		return parentContentElement;
+	}, [contentElement, parentContentElement]);
+	if (preserveTabOrderAnchor !== void 0) props = {
+		preserveTabOrderAnchor,
+		...props
+	};
+	props = useHovercard({
+		store,
+		alwaysVisible,
+		initialFocus: initialFocusRef,
+		autoFocusOnShow: autoFocusOnShowProp,
+		...props,
+		hideOnEscape(event) {
+			if (isFalsyBooleanCallback(hideOnEscape, event)) return false;
+			store?.hideAll();
+			return true;
+		},
+		hideOnHoverOutside(event) {
+			const disclosureElement = store?.getState().disclosureElement;
+			const getHideOnHoverOutside = () => {
+				if (typeof hideOnHoverOutside === "function") return hideOnHoverOutside(event);
+				if (hideOnHoverOutside != null) return hideOnHoverOutside;
+				if (hasParentMenu) return true;
+				if (!parentIsMenubar) return false;
+				if (!disclosureElement) return true;
+				if (hasFocusWithin(disclosureElement)) return false;
+				return true;
+			};
+			if (!getHideOnHoverOutside()) return false;
+			if (event.defaultPrevented) return true;
+			if (!hasParentMenu) return true;
+			if (!disclosureElement) return true;
+			fireEvent(disclosureElement, "mouseout", event);
+			if (!hasFocusWithin(disclosureElement)) return true;
+			requestAnimationFrame(() => {
+				if (hasFocusWithin(disclosureElement)) return;
+				store?.hide();
+			});
+			return false;
+		},
+		modal,
+		portal,
+		backdrop: hasParentMenu ? false : props.backdrop
+	});
+	props = {
+		"aria-labelledby": ariaLabelledBy,
+		...props
+	};
+	return props;
+});
+/**
+* Renders a dropdown menu element that's controlled by a
+* [`MenuButton`](https://ariakit.com/reference/menu-button) component.
+*
+* This component uses the primitive
+* [`MenuList`](https://ariakit.com/reference/menu-list) component under the
+* hood. It renders a popover and automatically focuses on items when the menu
+* is shown.
+* @see https://ariakit.com/components/menu
+* @example
+* ```jsx {3-6}
+* <MenuProvider>
+*   <MenuButton>Edit</MenuButton>
+*   <Menu>
+*     <MenuItem>Undo</MenuItem>
+*     <MenuItem>Redo</MenuItem>
+*   </Menu>
+* </MenuProvider>
+* ```
+*/
+const Menu = createDialogComponent(forwardRef(function Menu(props) {
+	return createElement(TagName, useMenu(props));
+}), useMenuProviderContext);
+//#endregion
+export { Menu, useMenu };
+
+//# sourceMappingURL=menu.js.map

package/dist/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":[],"sources":["../../src/menu/menu.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  fireEvent,\n  hasFocusWithin,\n  invariant,\n  isFalsyBooleanCallback,\n} from \"@ariakit/utils\";\nimport type { ElementType, MutableRefObject } from \"react\";\nimport { createRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createDialogComponent } from \"../dialog/dialog.tsx\";\nimport type { HovercardOptions } from \"../hovercard/hovercard.tsx\";\nimport { useHovercard } from \"../hovercard/hovercard.tsx\";\nimport { useMenuProviderContext } from \"./menu-context.tsx\";\nimport type { MenuListOptions } from \"./menu-list.tsx\";\nimport { useMenuList } from \"./menu-list.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `Menu` component.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx\n * const store = useMenuStore();\n * const props = useMenu({ store });\n * <MenuButton store={store}>Edit</MenuButton>\n * <Role {...props}>\n *   <MenuItem>Undo</MenuItem>\n *   <MenuItem>Redo</MenuItem>\n * </Role>\n * ```\n */\nexport const useMenu = createHook<TagName, MenuOptions>(function useMenu({\n  store,\n  modal: modalProp = false,\n  portal = modalProp,\n  hideOnEscape = true,\n  autoFocusOnShow = true,\n  hideOnHoverOutside,\n  alwaysVisible,\n  ...props\n}) {\n  const context = useMenuProviderContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"Menu must receive a `store` prop or be wrapped in a MenuProvider component.\",\n  );\n\n  const ref = useRef<HTMLType>(null);\n\n  const parentMenu = store.parent;\n  const parentMenubar = store.menubar;\n  const hasParentMenu = !!parentMenu;\n  const parentIsMenubar = !!parentMenubar && !hasParentMenu;\n  // If it's a submenu, it shouldn't behave like a modal dialog.\n  const modal = hasParentMenu ? false : modalProp;\n\n  props = {\n    ...props,\n    ref: useMergeRefs(ref, props.ref),\n  };\n\n  // The aria-labelledby prop on MenuList defaults to the MenuButton's id. On\n  // Dialog/Popover/Hovercard/Menu, we need to consider MenuHeading as well\n  // and it should take precedence. That's why we need to destructure this\n  // prop here and check if aria-labelledby is set later.\n  const { \"aria-labelledby\": ariaLabelledBy, ...menuListProps } = useMenuList({\n    store,\n    alwaysVisible,\n    ...props,\n  });\n\n  props = menuListProps;\n\n  const [initialFocusRef, setInitialFocusRef] =\n    useState<MutableRefObject<HTMLElement | null>>();\n\n  const autoFocusOnShowState = useStoreState(store, \"autoFocusOnShow\");\n  const initialFocus = useStoreState(store, \"initialFocus\");\n  const baseElement = useStoreState(store, \"baseElement\");\n  const items = useStoreState(store, \"renderedItems\");\n\n  // Sets the initial focus ref.\n  useEffect(() => {\n    let cleaning = false;\n    setInitialFocusRef((prevInitialFocusRef) => {\n      if (cleaning) return;\n      if (modal && prevInitialFocusRef?.current?.isConnected) {\n        return prevInitialFocusRef;\n      }\n      if (!autoFocusOnShowState) return;\n      let element: HTMLElement | null;\n      switch (initialFocus) {\n        // TODO: Refactor\n        case \"first\":\n          element =\n            items.find((item) => !item.disabled && item.element)?.element ||\n            null;\n          break;\n        case \"last\":\n          element =\n            [...items].reverse().find((item) => !item.disabled && item.element)\n              ?.element || null;\n          break;\n        default:\n          element = baseElement;\n      }\n      if (element && element === prevInitialFocusRef?.current) {\n        return prevInitialFocusRef;\n      }\n      const ref = createRef() as MutableRefObject<HTMLElement | null>;\n      ref.current = element;\n      return ref;\n    });\n    return () => {\n      cleaning = true;\n    };\n  }, [store, modal, autoFocusOnShowState, initialFocus, items, baseElement]);\n\n  // When the `autoFocusOnShow` prop is set to `true` (default), we'll only\n  // move focus to the menu when there's an initialFocusRef set or the menu is\n  // modal. Otherwise, users would have to manually call\n  // store.setAutoFocusOnShow(true) every time they want to open the menu.\n  // This differs from the usual dialog behavior that would automatically\n  // focus on the dialog container when no initialFocusRef is set.\n  const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || modal;\n  const autoFocusOnShowProp =\n    autoFocusOnShow === false ? false : canAutoFocusOnShow && autoFocusOnShow;\n\n  const contentElement = useStoreState(\n    store.combobox || store,\n    \"contentElement\",\n  );\n  const parentContentElement = useStoreState(\n    parentMenu?.combobox || parentMenu,\n    \"contentElement\",\n  );\n\n  // This ensures that, when the menu is nested in a non-menu wrapper, the tab\n  // order will be preserved from the parent content element rather than from\n  // the anchor element. This is because the preserveTabOrderAnchor feature\n  // will use aria-owns to fix the tab order on screen readers. The parent\n  // content element may have a role that does not allow this menu's role as a\n  // child. By passing the parent content element as the tab order anchor, the\n  // aria-owns element will be added as a sibling instead. TODO: Test this.\n  const preserveTabOrderAnchor = useMemo(() => {\n    if (!parentContentElement) return;\n    if (!contentElement) return;\n    const role = contentElement.getAttribute(\"role\");\n    const parentRole = parentContentElement.getAttribute(\"role\");\n    const parentIsMenuOrMenubar =\n      parentRole === \"menu\" || parentRole === \"menubar\";\n    if (parentIsMenuOrMenubar && role === \"menu\") return;\n    return parentContentElement;\n  }, [contentElement, parentContentElement]);\n\n  if (preserveTabOrderAnchor !== undefined) {\n    props = {\n      preserveTabOrderAnchor,\n      ...props,\n    };\n  }\n\n  props = useHovercard({\n    store,\n    alwaysVisible,\n    initialFocus: initialFocusRef,\n    autoFocusOnShow: autoFocusOnShowProp,\n    ...props,\n    hideOnEscape(event) {\n      if (isFalsyBooleanCallback(hideOnEscape, event)) return false;\n      store?.hideAll();\n      return true;\n    },\n    hideOnHoverOutside(event) {\n      const disclosureElement = store?.getState().disclosureElement;\n      const getHideOnHoverOutside = () => {\n        if (typeof hideOnHoverOutside === \"function\") {\n          return hideOnHoverOutside(event);\n        }\n        if (hideOnHoverOutside != null) return hideOnHoverOutside;\n        // Hide the menu when hovering outside if it's a submenu in a dropdown\n        // menu or if it's a menu in a menubar and the menu button doesn't\n        // have focus.\n        if (hasParentMenu) return true;\n        if (!parentIsMenubar) return false;\n        if (!disclosureElement) return true;\n        if (hasFocusWithin(disclosureElement)) return false;\n        return true;\n      };\n      if (!getHideOnHoverOutside()) return false;\n      if (event.defaultPrevented) return true;\n      if (!hasParentMenu) return true;\n      if (!disclosureElement) return true;\n      // This can be tested by hovering over a menu item (that's also a menu\n      // button), waiting for the menu to open, and then moving towards the\n      // menu, but stopping before reaching it. Then, move the mouse to the\n      // other direction. The menu should close, but since we've already left\n      // the menu button, the mouseout and therefore the blurOnHoverEnd\n      // behavior won't be fired. That's why we need to manually re-fire it\n      // here when the menu is closed by hovering away.\n      fireEvent(disclosureElement, \"mouseout\", event);\n      if (!hasFocusWithin(disclosureElement)) return true;\n      // When the focus is determined by the aria-activedescendant attribute\n      // (virtual focus), the mouseout event above won't update the state\n      // synchronously. That is, the hasFocusWithin function above (which also\n      // takes into account aria-activedescendant) will be true even though\n      // the mouseout event has blurred the menu button.\n      requestAnimationFrame(() => {\n        if (hasFocusWithin(disclosureElement)) return;\n        store?.hide();\n      });\n      return false;\n    },\n    modal,\n    portal,\n    backdrop: hasParentMenu ? false : props.backdrop,\n  });\n\n  props = {\n    \"aria-labelledby\": ariaLabelledBy,\n    ...props,\n  };\n\n  return props;\n});\n\n/**\n * Renders a dropdown menu element that's controlled by a\n * [`MenuButton`](https://ariakit.com/reference/menu-button) component.\n *\n * This component uses the primitive\n * [`MenuList`](https://ariakit.com/reference/menu-list) component under the\n * hood. It renders a popover and automatically focuses on items when the menu\n * is shown.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx {3-6}\n * <MenuProvider>\n *   <MenuButton>Edit</MenuButton>\n *   <Menu>\n *     <MenuItem>Undo</MenuItem>\n *     <MenuItem>Redo</MenuItem>\n *   </Menu>\n * </MenuProvider>\n * ```\n */\nexport const Menu = createDialogComponent(\n  forwardRef(function Menu(props: MenuProps) {\n    const htmlProps = useMenu(props);\n    return createElement(TagName, htmlProps);\n  }),\n  useMenuProviderContext,\n);\n\nexport interface MenuOptions<T extends ElementType = TagName>\n  extends MenuListOptions<T>, Omit<HovercardOptions<T>, \"store\"> {}\n\nexport type MenuProps<T extends ElementType = TagName> = Props<\n  T,\n  MenuOptions<T>\n>;\n"],"mappings":"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"}

package/dist/menu-store-0CKKmNek.d.ts

@@ -0,0 +1,83 @@
+import { t as DisclosureStore } from "./disclosure-store-BsaBaRKv.js";
+import { i as CompositeStoreOptions, n as CompositeStoreFunctions, o as CompositeStoreState } from "./composite-store-DyJc-XRA.js";
+import { t as ComboboxStore } from "./combobox-store-DEVQ45mZ.js";
+import { a as HovercardStoreState, n as HovercardStoreFunctions, r as HovercardStoreOptions } from "./hovercard-store-gIeoQEn_.js";
+import { t as MenubarStore } from "./menubar-store-3h0eNIbS.js";
+import { BivariantCallback, PickRequired } from "@ariakit/utils";
+import { Store } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/menu/menu-store";
+
+//#region src/menu/menu-store.d.ts
+declare function useMenuStoreProps<T extends Core.MenuStore>(store: T, update: () => void, props: MenuStoreProps): T & {
+  disclosure: DisclosureStore | null | undefined;
+} & {
+  combobox: ComboboxStore<import("@ariakit/components/combobox/combobox-store").ComboboxStoreSelectedValue> | null | undefined;
+  parent: MenuStore<Core.MenuStoreValues> | null | undefined;
+  menubar: MenubarStore | null | undefined;
+};
+/**
+ * Creates a menu store to control the state of
+ * [Menu](https://ariakit.com/components/menu) components.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const menu = useMenuStore({ placement: "top" });
+ *
+ * <MenuButton store={menu}>Edit</MenuButton>
+ * <Menu store={menu}>
+ *   <MenuItem>Undo</MenuItem>
+ *   <MenuItem>Redo</MenuItem>
+ * </Menu>
+ * ```
+ */
+declare function useMenuStore<T extends MenuStoreValues = MenuStoreValues>(props: PickRequired<MenuStoreProps<T>, "values" | "defaultValues">): MenuStore<T>;
+declare function useMenuStore(props?: MenuStoreProps): MenuStore;
+type MenuStoreValues = Core.MenuStoreValues;
+interface MenuStoreState<T extends MenuStoreValues = MenuStoreValues> extends Core.MenuStoreState<T>, CompositeStoreState, HovercardStoreState {}
+interface MenuStoreFunctions<T extends MenuStoreValues = MenuStoreValues> extends Pick<MenuStoreOptions, "combobox" | "parent" | "menubar" | "disclosure">, Omit<Core.MenuStoreFunctions<T>, "combobox" | "parent" | "menubar" | "disclosure">, CompositeStoreFunctions, HovercardStoreFunctions {}
+interface MenuStoreOptions<T extends MenuStoreValues = MenuStoreValues> extends Omit<Core.MenuStoreOptions<T>, "disclosure">, CompositeStoreOptions, HovercardStoreOptions {
+  /**
+   * A callback that gets called when the
+   * [`values`](https://ariakit.com/reference/menu-provider#values) state
+   * changes.
+   *
+   * Live examples:
+   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   */
+  setValues?: BivariantCallback<(values: MenuStoreState<T>["values"]) => void>;
+  /**
+   * A reference to a [combobox
+   * store](https://ariakit.com/reference/use-combobox-store). It's
+   * automatically set when composing [Menu with
+   * Combobox](https://ariakit.com/examples/menu-combobox).
+   */
+  combobox?: ComboboxStore | null;
+  /**
+   * A reference to a parent menu store. It's automatically set when nesting
+   * menus in the React tree. You should manually set this if menus aren't
+   * nested in the React tree.
+   *
+   * Live examples:
+   * - [Menubar](https://ariakit.com/components/menubar)
+   * - [Submenu](https://ariakit.com/examples/menu-nested)
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   */
+  parent?: MenuStore | null;
+  /**
+   * A reference to a [menubar
+   * store](https://ariakit.com/reference/use-menubar-store). It's automatically
+   * set when rendering menus inside a
+   * [`Menubar`](https://ariakit.com/reference/menubar) in the React tree.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   */
+  menubar?: MenubarStore | null;
+}
+interface MenuStoreProps<T extends MenuStoreValues = MenuStoreValues> extends MenuStoreOptions<T>, Omit<Core.MenuStoreProps<T>, "combobox" | "parent" | "menubar" | "disclosure"> {}
+interface MenuStore<T extends MenuStoreValues = MenuStoreValues> extends MenuStoreFunctions<T>, Omit<Store<Core.MenuStore<T>>, "combobox" | "parent" | "menubar" | "disclosure"> {}
+//#endregion
+export { MenuStoreState as a, useMenuStoreProps as c, MenuStoreProps as i, MenuStoreFunctions as n, MenuStoreValues as o, MenuStoreOptions as r, useMenuStore as s, MenuStore as t };
+//# sourceMappingURL=menu-store-0CKKmNek.d.ts.map

package/dist/menu-store-0CKKmNek.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-store-0CKKmNek.d.ts","names":["Core","Store","BivariantCallback","PickRequired","ComboboxStore","CompositeStoreFunctions","CompositeStoreOptions","CompositeStoreState","HovercardStoreFunctions","HovercardStoreOptions","HovercardStoreState","MenubarStore","useMenuStoreProps","T","MenuStore","MenuStoreProps","_$___disclosure_disclosure_store_ts0","DisclosureStore","MenuStoreValues","store","update","props","disclosure","combobox","ComboboxStoreSelectedValue","parent","menubar","useMenuStore","MenuStoreState","MenuStoreFunctions","MenuStoreOptions","Pick","Omit","setValues","values"],"sources":["../src/menu/menu-store.d.ts"],"mappings":";;;;;;;;;;iBAOwBY,iBAAAA,WAA4BZ,IAAAA,CAAKc,SAAAA,CAAAA,CAAWK,KAAAA,EAAON,CAAAA,EAAGO,MAAAA,cAAoBC,KAAAA,EAAON,cAAAA,GAAiBF,CAAAA;EACtHS,UAAAA,EADuHN,eAAAA;AAAAA;EAGvHO,QAAAA,EAAUnB,aAAAA,uDAAoEoB,0BAAAA;EAC9EC,MAAAA,EAAQX,SAAAA,CAAUd,IAAAA,CAAKkB,eAAAA;EACvBQ,OAAAA,EAASf,YAAAA;AAAAA;;;;;;;;;;;;;;;;iBAiBWgB,YAAAA,WAAuBT,eAAAA,GAAkBA,eAAAA,CAAAA,CAAiBG,KAAAA,EAAOlB,YAAAA,CAAaY,cAAAA,CAAeF,CAAAA,iCAAkCC,SAAAA,CAAUD,CAAAA;AAAAA,iBACzIc,YAAAA,CAAaN,KAAAA,GAAQN,cAAAA,GAAiBD,SAAS;AAAA,KAC3DI,eAAAA,GAAkBlB,IAAAA,CAAKkB,eAAe;AAAA,UACjCU,cAAAA,WAAyBV,eAAAA,GAAkBA,eAAAA,UAAyBlB,IAAAA,CAAK4B,cAAAA,CAAef,CAAAA,GAAIN,mBAAAA,EAAqBG,mBAAAA;AAAAA,UAEjHmB,kBAAAA,WAA6BX,eAAAA,GAAkBA,eAAAA,UAAyBa,IAAAA,CAAKD,gBAAAA,qDAAqEE,IAAAA,CAAKhC,IAAAA,CAAK6B,kBAAAA,CAAmBhB,CAAAA,sDAAuDR,uBAAAA,EAAyBG,uBAAAA;AAAAA,UAE/PsB,gBAAAA,WAA2BZ,eAAAA,GAAkBA,eAAAA,UAAyBc,IAAAA,CAAKhC,IAAAA,CAAK8B,gBAAAA,CAAiBjB,CAAAA,kBAAmBP,qBAAAA,EAAuBG,qBAAAA;EA1B1Ee;;;;;;;;AAEzD;AAiBzB;EAkBIS,SAAAA,GAAY/B,iBAAAA,EAAmBgC,MAAAA,EAAQN,cAAAA,CAAef,CAAAA;EAlBtBA;;;;;;EAyBhCU,QAAAA,GAAWnB,aAAAA;EAzBwIU;;;;;;;;;;EAoCnJW,MAAAA,GAASX,SAAAA;EApCoJD;;AAAC;AAClK;;;;;;EA6CIa,OAAAA,GAAUf,YAAAA;AAAAA;AAAAA,UAEGI,cAAAA,WAAyBG,eAAAA,GAAkBA,eAAAA,UAAyBY,gBAAAA,CAAiBjB,CAAAA,GAAImB,IAAAA,CAAKhC,IAAAA,CAAKe,cAAAA,CAAeF,CAAAA;AAAAA,UAElHC,SAAAA,WAAoBI,eAAAA,GAAkBA,eAAAA,UAAyBW,kBAAAA,CAAmBhB,CAAAA,GAAImB,IAAAA,CAAK/B,KAAAA,CAAMD,IAAAA,CAAKc,SAAAA,CAAUD,CAAAA"}

package/dist/menubar/menubar-context.d.ts

@@ -0,0 +1,25 @@
+import { t as MenubarStore } from "../menubar-store-3h0eNIbS.js";
+
+//#region src/menubar/menubar-context.d.ts
+/**
+ * Returns the menubar store from the nearest menubar container.
+ * @example
+ * function Menubar() {
+ *   const store = useMenubarContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Menubar must be wrapped in MenubarProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const useMenubarContext: () => MenubarStore | undefined;
+declare const useMenubarScopedContext: (onlyScoped?: boolean) => MenubarStore | undefined;
+declare const useMenubarProviderContext: () => MenubarStore | undefined;
+declare const MenubarContextProvider: (props: import("react").ProviderProps<MenubarStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const MenubarScopedContextProvider: (props: import("react").ProviderProps<MenubarStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const MenuItemCheckedContext: import("react").Context<boolean | undefined>;
+//#endregion
+export { MenuItemCheckedContext, MenubarContextProvider, MenubarScopedContextProvider, useMenubarContext, useMenubarProviderContext, useMenubarScopedContext };
+//# sourceMappingURL=menubar-context.d.ts.map

package/dist/menubar/menubar-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar-context.d.ts","names":["MenubarStore","useMenubarContext","useMenubarScopedContext","onlyScoped","useMenubarProviderContext","MenubarContextProvider","ProviderProps","props","JSX","Element","MenubarScopedContextProvider","MenuItemCheckedContext","Context"],"sources":["../../src/menubar/menubar-context.d.ts"],"mappings":";;;;;AAcA;;;;AAA0D;AAC1D;;;;AAAoF;AACpF;cAFqBC,iBAAAA,QAAyBD,YAAY;AAAA,cACrCE,uBAAAA,GAA0BC,UAAAA,eAAyBH,YAAY;AAAA,cAC/DI,yBAAAA,QAAiCJ,YAAY;AAAA,cAC7CK,sBAAAA,GAAyBE,KAAAA,kBAAuBD,aAAAA,CAAcN,YAAY,8CAA8CQ,GAAAA,CAAIC,OAAAA;AAAAA,cAC5HC,4BAAAA,GAA+BH,KAAAA,kBAAuBD,aAAAA,CAAcN,YAAY,8CAA8CQ,GAAAA,CAAIC,OAAAA;AAAAA,cAClIE,sBAAAA,kBAAwCC,OAAO"}

package/dist/menubar/menubar-context.js

@@ -0,0 +1,29 @@
+"use client";
+import { CompositeContextProvider, CompositeScopedContextProvider } from "../composite/composite-context.js";
+import { createStoreContext } from "@ariakit/react-utils";
+import { createContext } from "react";
+//#region src/menubar/menubar-context.tsx
+const menubar = createStoreContext([CompositeContextProvider], [CompositeScopedContextProvider]);
+/**
+* Returns the menubar store from the nearest menubar container.
+* @example
+* function Menubar() {
+*   const store = useMenubarContext();
+*
+*   if (!store) {
+*     throw new Error("Menubar must be wrapped in MenubarProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useMenubarContext = menubar.useContext;
+const useMenubarScopedContext = menubar.useScopedContext;
+const useMenubarProviderContext = menubar.useProviderContext;
+const MenubarContextProvider = menubar.ContextProvider;
+const MenubarScopedContextProvider = menubar.ScopedContextProvider;
+const MenuItemCheckedContext = createContext(void 0);
+//#endregion
+export { MenuItemCheckedContext, MenubarContextProvider, MenubarScopedContextProvider, useMenubarContext, useMenubarProviderContext, useMenubarScopedContext };
+
+//# sourceMappingURL=menubar-context.js.map

package/dist/menubar/menubar-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar-context.js","names":[],"sources":["../../src/menubar/menubar-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport { createContext } from \"react\";\nimport {\n  CompositeContextProvider,\n  CompositeScopedContextProvider,\n} from \"../composite/composite-context.tsx\";\nimport type { MenubarStore } from \"./menubar-store.ts\";\n\nconst menubar = createStoreContext<MenubarStore>(\n  [CompositeContextProvider],\n  [CompositeScopedContextProvider],\n);\n\n/**\n * Returns the menubar store from the nearest menubar container.\n * @example\n * function Menubar() {\n *   const store = useMenubarContext();\n *\n *   if (!store) {\n *     throw new Error(\"Menubar must be wrapped in MenubarProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useMenubarContext = menubar.useContext;\n\nexport const useMenubarScopedContext = menubar.useScopedContext;\n\nexport const useMenubarProviderContext = menubar.useProviderContext;\n\nexport const MenubarContextProvider = menubar.ContextProvider;\n\nexport const MenubarScopedContextProvider = menubar.ScopedContextProvider;\n\nexport const MenuItemCheckedContext = createContext<boolean | undefined>(\n  undefined,\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA,MAAa,oBAAA,QAA0B;AAEvC,MAAa,0BAAA,QAA4B;AAEzC,MAAa,4BAAyB,QAAQ;AAE9C,MAAa,yBAAA,QAA+B;AAE5C,MAAa,+BAAyB,QACpC"}

package/dist/menubar/menubar-provider.d.ts

@@ -0,0 +1,37 @@
+import { i as MenubarStoreProps } from "../menubar-store-3h0eNIbS.js";
+import { ReactNode } from "react";
+
+//#region src/menubar/menubar-provider.d.ts
+/**
+ * Provides a menubar store to [Menubar](https://ariakit.com/components/menubar)
+ * components.
+ * @see https://ariakit.com/components/menubar
+ * @example
+ * ```jsx
+ * <MenubarProvider>
+ *   <Menubar>
+ *     <MenuProvider>
+ *       <MenuItem render={<MenuButton />}>File</MenuItem>
+ *       <Menu>
+ *         <MenuItem>New File</MenuItem>
+ *         <MenuItem>New Window</MenuItem>
+ *       </Menu>
+ *     </MenuProvider>
+ *     <MenuProvider>
+ *       <MenuItem render={<MenuButton />}>Edit</MenuItem>
+ *       <Menu>
+ *         <MenuItem>Undo</MenuItem>
+ *         <MenuItem>Redo</MenuItem>
+ *       </Menu>
+ *     </MenuProvider>
+ *   </Menubar>
+ * </MenubarProvider>
+ * ```
+ */
+declare function MenubarProvider(props?: MenubarProviderProps): import("react/jsx-runtime").JSX.Element;
+interface MenubarProviderProps extends MenubarStoreProps {
+  children?: ReactNode;
+}
+//#endregion
+export { MenubarProvider, MenubarProviderProps };
+//# sourceMappingURL=menubar-provider.d.ts.map

package/dist/menubar/menubar-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar-provider.d.ts","names":["ReactNode","MenubarStoreProps","MenubarProvider","MenubarProviderProps","props","JSX","Element","children"],"sources":["../../src/menubar/menubar-provider.d.ts"],"mappings":";;;;;;AA4BA;;;;;;;;;AAA8G;AAC9G;;;;;;;;AACwB;;;;;;iBAFAE,eAAAA,CAAgBE,KAAAA,GAAQD,oBAAoB,+BAA+BE,GAAAA,CAAIC,OAAAA;AAAAA,UACtFH,oBAAAA,SAA6BF,iBAAiB;EAC3DM,QAAAA,GAAWP,SAAAA;AAAAA"}

package/dist/menubar/menubar-provider.js

@@ -0,0 +1,41 @@
+"use client";
+import { MenubarContextProvider } from "./menubar-context.js";
+import { useMenubarStore } from "./menubar-store.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/menubar/menubar-provider.tsx
+/**
+* Provides a menubar store to [Menubar](https://ariakit.com/components/menubar)
+* components.
+* @see https://ariakit.com/components/menubar
+* @example
+* ```jsx
+* <MenubarProvider>
+*   <Menubar>
+*     <MenuProvider>
+*       <MenuItem render={<MenuButton />}>File</MenuItem>
+*       <Menu>
+*         <MenuItem>New File</MenuItem>
+*         <MenuItem>New Window</MenuItem>
+*       </Menu>
+*     </MenuProvider>
+*     <MenuProvider>
+*       <MenuItem render={<MenuButton />}>Edit</MenuItem>
+*       <Menu>
+*         <MenuItem>Undo</MenuItem>
+*         <MenuItem>Redo</MenuItem>
+*       </Menu>
+*     </MenuProvider>
+*   </Menubar>
+* </MenubarProvider>
+* ```
+*/
+function MenubarProvider(props = {}) {
+	return /* @__PURE__ */ jsx(MenubarContextProvider, {
+		value: useMenubarStore(props),
+		children: props.children
+	});
+}
+//#endregion
+export { MenubarProvider };
+
+//# sourceMappingURL=menubar-provider.js.map

package/dist/menubar/menubar-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar-provider.js","names":[],"sources":["../../src/menubar/menubar-provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { MenubarContextProvider } from \"./menubar-context.tsx\";\nimport type { MenubarStoreProps } from \"./menubar-store.ts\";\nimport { useMenubarStore } from \"./menubar-store.ts\";\n\n/**\n * Provides a menubar store to [Menubar](https://ariakit.com/components/menubar)\n * components.\n * @see https://ariakit.com/components/menubar\n * @example\n * ```jsx\n * <MenubarProvider>\n *   <Menubar>\n *     <MenuProvider>\n *       <MenuItem render={<MenuButton />}>File</MenuItem>\n *       <Menu>\n *         <MenuItem>New File</MenuItem>\n *         <MenuItem>New Window</MenuItem>\n *       </Menu>\n *     </MenuProvider>\n *     <MenuProvider>\n *       <MenuItem render={<MenuButton />}>Edit</MenuItem>\n *       <Menu>\n *         <MenuItem>Undo</MenuItem>\n *         <MenuItem>Redo</MenuItem>\n *       </Menu>\n *     </MenuProvider>\n *   </Menubar>\n * </MenubarProvider>\n * ```\n */\nexport function MenubarProvider(props: MenubarProviderProps = {}) {\n  const store = useMenubarStore(props);\n  return (\n    <MenubarContextProvider value={store}>\n      {props.children}\n    </MenubarContextProvider>\n  );\n}\n\nexport interface MenubarProviderProps extends MenubarStoreProps {\n  children?: ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkCI,gBAAA,QAAC,CAAA,GAAA;QAFW,oBAAgB,wBAEO;yBAC1B,KAAA;EACe,UAAA,MAAA;CAE5B,CAAA"}

package/dist/menubar/menubar-store.d.ts

@@ -0,0 +1,2 @@
+import { a as MenubarStoreState, i as MenubarStoreProps, n as MenubarStoreFunctions, o as useMenubarStore, r as MenubarStoreOptions, s as useMenubarStoreProps, t as MenubarStore } from "../menubar-store-3h0eNIbS.js";
+export { MenubarStore, MenubarStoreFunctions, MenubarStoreOptions, MenubarStoreProps, MenubarStoreState, useMenubarStore, useMenubarStoreProps };

package/dist/menubar/menubar-store.js

@@ -0,0 +1,27 @@
+"use client";
+import { useCompositeStoreProps } from "../composite/composite-store.js";
+import { useStore } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/menubar/menubar-store";
+//#region src/menubar/menubar-store.ts
+function useMenubarStoreProps(store, update, props) {
+	return useCompositeStoreProps(store, update, props);
+}
+/**
+* Creates a menubar store to control the state of
+* [Menubar](https://ariakit.com/components/menubar) components.
+* @see https://ariakit.com/components/menubar
+* @example
+* ```jsx
+* const menu = useMenubarStore();
+*
+* <Menubar store={menu} />
+* ```
+*/
+function useMenubarStore(props = {}) {
+	const [store, update] = useStore(Core.createMenubarStore, props);
+	return useMenubarStoreProps(store, update, props);
+}
+//#endregion
+export { useMenubarStore, useMenubarStoreProps };
+
+//# sourceMappingURL=menubar-store.js.map

package/dist/menubar/menubar-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar-store.js","names":[],"sources":["../../src/menubar/menubar-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/menubar/menubar-store\";\nimport { useStore } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport type {\n  CompositeStoreFunctions,\n  CompositeStoreOptions,\n  CompositeStoreState,\n} from \"../composite/composite-store.ts\";\nimport { useCompositeStoreProps } from \"../composite/composite-store.ts\";\n\nexport function useMenubarStoreProps<T extends Core.MenubarStore>(\n  store: T,\n  update: () => void,\n  props: MenubarStoreProps,\n) {\n  return useCompositeStoreProps(store, update, props);\n}\n\n/**\n * Creates a menubar store to control the state of\n * [Menubar](https://ariakit.com/components/menubar) components.\n * @see https://ariakit.com/components/menubar\n * @example\n * ```jsx\n * const menu = useMenubarStore();\n *\n * <Menubar store={menu} />\n * ```\n */\nexport function useMenubarStore(props: MenubarStoreProps = {}): MenubarStore {\n  const [store, update] = useStore(Core.createMenubarStore, props);\n  return useMenubarStoreProps(store, update, props);\n}\n\nexport interface MenubarStoreState\n  extends Core.MenubarStoreState, CompositeStoreState {}\n\nexport interface MenubarStoreFunctions\n  extends Core.MenubarStoreFunctions, CompositeStoreFunctions {}\n\nexport interface MenubarStoreOptions\n  extends Core.MenubarStoreOptions, CompositeStoreOptions {}\n\nexport interface MenubarStoreProps\n  extends MenubarStoreOptions, Core.MenubarStoreProps {}\n\nexport interface MenubarStore\n  extends MenubarStoreFunctions, Store<Core.MenubarStore> {}\n"],"mappings":";;;;;SAeS,qBAAA,OAAuB,QAAO,OAAa;CACpD,OAAA,uBAAA,OAAA,QAAA,KAAA;;;;;;;;;;;;;SAcS,gBAAiB,QAAA,CAAS,GAAA;CACjC,MAAA,CAAO,OAAA,UAAA,SAAqB,KAAO,oBAAa,KAAA;CAClD,OAAA,qBAAA,OAAA,QAAA,KAAA"}

package/dist/menubar/menubar.d.ts

@@ -0,0 +1,71 @@
+import { n as CompositeOptions } from "../composite-DLvyFHMq.js";
+import { i as MenubarStoreProps, t as MenubarStore } from "../menubar-store-3h0eNIbS.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/menubar/menubar.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Menubar` component.
+ * @see https://ariakit.com/components/menubar
+ * @example
+ * ```jsx
+ * const store = useMenubarStore();
+ * const menubarProps = useMenubar({ store });
+ * const fileProps = useMenuItem({ store });
+ * const fileMenu = useMenuStore();
+ * <Role {...menubarProps}>
+ *   <MenuButton {...fileProps} store={fileMenu}>
+ *     File
+ *   </MenuButton>
+ *   <Menu store={fileMenu}>
+ *     <MenuItem>New File</MenuItem>
+ *     <MenuItem>New Window</MenuItem>
+ *   </Menu>
+ * </Role>
+ * ```
+ */
+declare const useMenubar: import("@ariakit/react-utils").Hook<"div", MenubarOptions<"div">>;
+/**
+ * Renders a menubar that may contain a group of
+ * [`MenuItem`](https://ariakit.com/reference/menu-item) elements that control
+ * other submenus.
+ * @see https://ariakit.com/components/menubar
+ * @example
+ * ```jsx
+ * <Menubar>
+ *   <MenuProvider>
+ *     <MenuItem render={<MenuButton />}>File</MenuItem>
+ *     <Menu>
+ *       <MenuItem>New File</MenuItem>
+ *       <MenuItem>New Window</MenuItem>
+ *     </Menu>
+ *   </MenuProvider>
+ *   <MenuProvider>
+ *     <MenuItem render={<MenuButton />}>Edit</MenuItem>
+ *     <Menu>
+ *       <MenuItem>Undo</MenuItem>
+ *       <MenuItem>Redo</MenuItem>
+ *     </Menu>
+ *   </MenuProvider>
+ * </Menubar>
+ * ```
+ */
+declare const Menubar: (props: MenubarProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface MenubarOptions<T extends ElementType = TagName> extends CompositeOptions<T>, Pick<MenubarStoreProps, "focusLoop" | "orientation" | "rtl" | "virtualFocus"> {
+  /**
+   * Object returned by the
+   * [`useMenubarStore`](https://ariakit.com/reference/use-menubar-store) hook.
+   * If not provided, the closest
+   * [`MenubarProvider`](https://ariakit.com/reference/menubar-provider)
+   * component context will be used. If the component is not wrapped in a
+   * [`MenubarProvider`](https://ariakit.com/reference/menubar-provider)
+   * component, an internal store will be used.
+   */
+  store?: MenubarStore;
+}
+type MenubarProps<T extends ElementType = TagName> = Props<T, MenubarOptions<T>>;
+//#endregion
+export { Menubar, MenubarOptions, MenubarProps, useMenubar };
+//# sourceMappingURL=menubar.d.ts.map

package/dist/menubar/menubar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.d.ts","names":["Props","ElementType","CompositeOptions","MenubarStore","MenubarStoreProps","TagName","useMenubar","MenubarOptions","Hook","Menubar","MenubarProps","props","ReactElement","JSXElementConstructor","T","Pick","store"],"sources":["../../src/menubar/menubar.d.ts"],"mappings":";;;;;;cAIcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF6C;;;;AACrD;AAAA;;;;AACQ;AAqB7B;;;;AAA0F;AA0B1F;;;;;AAjD0E,cAuBrDC,UAAAA,iCAA2CE,IAAAA,QAAYD,cAAc;;;;AA0B6C;AACvI;;;;;;;;;;;;;;;;;;;;;cADqBE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACjGN,cAAAA,WAAyBN,WAAAA,GAAcI,OAAAA,UAAiBH,gBAAAA,CAAiBY,CAAAA,GAAIC,IAAAA,CAAKX,iBAAAA;EAYvFM;;;;;;;;;EAFRM,KAAAA,GAAQb,YAAAA;AAAAA;AAAAA,KAEAO,YAAAA,WAAuBT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,cAAAA,CAAeO,CAAAA"}

package/dist/menubar/menubar.js

@@ -0,0 +1,88 @@
+"use client";
+import { useComposite } from "../composite/composite.js";
+import { MenubarScopedContextProvider, useMenubarProviderContext } from "./menubar-context.js";
+import { useMenubarStore } from "./menubar-store.js";
+import { createElement, createHook, forwardRef, useWrapElement } from "@ariakit/react-utils";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/menubar/menubar.tsx
+const TagName = "div";
+/**
+* Returns props to create a `Menubar` component.
+* @see https://ariakit.com/components/menubar
+* @example
+* ```jsx
+* const store = useMenubarStore();
+* const menubarProps = useMenubar({ store });
+* const fileProps = useMenuItem({ store });
+* const fileMenu = useMenuStore();
+* <Role {...menubarProps}>
+*   <MenuButton {...fileProps} store={fileMenu}>
+*     File
+*   </MenuButton>
+*   <Menu store={fileMenu}>
+*     <MenuItem>New File</MenuItem>
+*     <MenuItem>New Window</MenuItem>
+*   </Menu>
+* </Role>
+* ```
+*/
+const useMenubar = createHook(function useMenubar({ store: storeProp, composite = true, orientation: orientationProp, virtualFocus, focusLoop, rtl, ...props }) {
+	const context = useMenubarProviderContext();
+	storeProp = storeProp || context;
+	const store = useMenubarStore({
+		store: storeProp,
+		orientation: orientationProp,
+		virtualFocus,
+		focusLoop,
+		rtl
+	});
+	const orientation = useStoreState(store, (state) => !composite || state.orientation === "both" ? void 0 : state.orientation);
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(MenubarScopedContextProvider, {
+		value: store,
+		children: element
+	}), [store]);
+	if (composite) props = {
+		role: "menubar",
+		"aria-orientation": orientation,
+		...props
+	};
+	props = useComposite({
+		store,
+		composite,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a menubar that may contain a group of
+* [`MenuItem`](https://ariakit.com/reference/menu-item) elements that control
+* other submenus.
+* @see https://ariakit.com/components/menubar
+* @example
+* ```jsx
+* <Menubar>
+*   <MenuProvider>
+*     <MenuItem render={<MenuButton />}>File</MenuItem>
+*     <Menu>
+*       <MenuItem>New File</MenuItem>
+*       <MenuItem>New Window</MenuItem>
+*     </Menu>
+*   </MenuProvider>
+*   <MenuProvider>
+*     <MenuItem render={<MenuButton />}>Edit</MenuItem>
+*     <Menu>
+*       <MenuItem>Undo</MenuItem>
+*       <MenuItem>Redo</MenuItem>
+*     </Menu>
+*   </MenuProvider>
+* </Menubar>
+* ```
+*/
+const Menubar = forwardRef(function Menubar(props) {
+	return createElement(TagName, useMenubar(props));
+});
+//#endregion
+export { Menubar, useMenubar };
+
+//# sourceMappingURL=menubar.js.map