@krelborn/stylesui 0.8.1 → 0.9.0

package/dist/components/Menu/MenuRadioGroup.d.ts

@@ -0,0 +1,34 @@
+import type { JSX, ReactNode } from "react";
+import type { MenuGroupProps } from "./MenuGroup";
+/**
+ * Props for `MenuRadioGroup`: its label and selection plus every `MenuGroup` prop
+ */
+export interface MenuRadioGroupProps extends Omit<MenuGroupProps, "defaultValue" | "label" | "onChange"> {
+    /**
+     * The value of the item checked at first when uncontrolled
+     */
+    defaultValue?: string;
+    /**
+     * A heading shown above the group's items, which names the group
+     */
+    label: ReactNode;
+    /**
+     * Called with the value of the item the user checks, when it differs from the checked one
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Controls which item is checked. Without it, the group holds its own choice, starting from `defaultValue`.
+     */
+    value?: string;
+}
+/**
+ * A named group of `MenuItemRadio`s in a `Menu`, of which one is checked, such as a sort order. A click or Enter
+ * checks an item and closes every open menu; Space checks it and leaves them open.
+ *
+ * @example
+ * <MenuRadioGroup label="Sort by" onValueChange={setSortOrder} value={sortOrder}>
+ *   <MenuItemRadio value="name">Name</MenuItemRadio>
+ *   <MenuItemRadio value="modified">Date modified</MenuItemRadio>
+ * </MenuRadioGroup>
+ */
+export declare function MenuRadioGroup({ defaultValue, onValueChange, value, ...rest }: MenuRadioGroupProps): JSX.Element;

package/dist/components/Menu/MenuRadioGroup.js

@@ -0,0 +1,27 @@
+import { MenuGroup as e } from "./MenuGroup.js";
+import { MenuRadioGroupContext as t } from "./MenuRadioGroupContext.js";
+import { useState as n } from "react";
+import { c as r } from "react/compiler-runtime";
+import { jsx as i } from "react/jsx-runtime";
+// src/components/Menu/MenuRadioGroup.tsx
+function a(a) {
+	let o = r(17), s, c, l, u;
+	o[0] === a ? (s = o[1], c = o[2], l = o[3], u = o[4]) : ({defaultValue: s, onValueChange: c, value: u, ...l} = a, o[0] = a, o[1] = s, o[2] = c, o[3] = l, o[4] = u);
+	let [d, f] = n(s), p = u ?? d, m;
+	o[5] !== p || o[6] !== c || o[7] !== u ? (m = function(e) {
+		e !== p && (u === void 0 && f(e), c?.(e));
+	}, o[5] = p, o[6] = c, o[7] = u, o[8] = m) : m = o[8];
+	let h = m, g;
+	o[9] !== p || o[10] !== h ? (g = {
+		select: h,
+		value: p
+	}, o[9] = p, o[10] = h, o[11] = g) : g = o[11];
+	let _;
+	o[12] === l ? _ = o[13] : (_ = /* @__PURE__ */ i(e, { ...l }), o[12] = l, o[13] = _);
+	let v;
+	return o[14] !== g || o[15] !== _ ? (v = /* @__PURE__ */ i(t.Provider, {
+		value: g,
+		children: _
+	}), o[14] = g, o[15] = _, o[16] = v) : v = o[16], v;
+}
+export { a as MenuRadioGroup };

package/dist/components/Menu/MenuRadioGroupContext.d.ts

@@ -0,0 +1,17 @@
+/**
+ * State a `MenuRadioGroup` shares with its radio items
+ */
+export interface MenuRadioGroupContextValue {
+    /**
+     * Checks the item with the given value, reporting it to `onValueChange` when it differs from the checked one
+     */
+    select: (value: string) => void;
+    /**
+     * The checked item's value, if any
+     */
+    value: string | undefined;
+}
+/**
+ * Carries a `MenuRadioGroup`'s state to its radio items; null outside a `MenuRadioGroup`
+ */
+export declare const MenuRadioGroupContext: import("react").Context<MenuRadioGroupContextValue | null>;

package/dist/components/Menu/MenuRadioGroupContext.js

@@ -0,0 +1,4 @@
+import { createContext as e } from "react";
+// src/components/Menu/MenuRadioGroupContext.ts
+var t = e(null);
+export { t as MenuRadioGroupContext };

package/dist/components/Menu/MenuSeparator.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `MenuSeparator`: every `hr` prop except children
+ */
+export interface MenuSeparatorProps extends Omit<BoxProps<"hr">, "as" | "children" | "dangerouslySetInnerHTML"> {
+}
+/**
+ * A rule across a `Menu` between groups of items. The arrow keys pass over it.
+ *
+ * @example
+ * <MenuItem onClick={archive}>Archive</MenuItem>
+ * <MenuSeparator />
+ * <MenuItem onClick={remove} tone="danger">Delete…</MenuItem>
+ */
+export declare function MenuSeparator({ className, ...rest }: MenuSeparatorProps): JSX.Element;

package/dist/components/Menu/MenuSeparator.js

@@ -0,0 +1,20 @@
+import { Box as e } from "../Box/Box.js";
+import t from "../MenuSurface/MenuSurface.module.js";
+import { useMenuContext as n } from "./useMenuContext.js";
+import { clsx as r } from "clsx";
+import { c as i } from "react/compiler-runtime";
+import { jsx as a } from "react/jsx-runtime";
+// src/components/Menu/MenuSeparator.tsx
+function o(o) {
+	let s = i(8), c, l;
+	s[0] === o ? (c = s[1], l = s[2]) : ({className: c, ...l} = o, s[0] = o, s[1] = c, s[2] = l), n("MenuSeparator");
+	let u;
+	s[3] === c ? u = s[4] : (u = r(t.separator, c), s[3] = c, s[4] = u);
+	let d;
+	return s[5] !== l || s[6] !== u ? (d = /* @__PURE__ */ a(e, {
+		...l,
+		as: "hr",
+		className: u
+	}), s[5] = l, s[6] = u, s[7] = d) : d = s[7], d;
+}
+export { o as MenuSeparator };

package/dist/components/Menu/Submenu.d.ts

@@ -0,0 +1,36 @@
+import type { JSX, ReactNode } from "react";
+/**
+ * Props for `Submenu`
+ */
+export interface SubmenuProps {
+    /**
+     * The submenu's items
+     */
+    children?: ReactNode;
+    /**
+     * Whether the submenu cannot be opened. Its item stays reachable with the arrow keys, so its label is read. Defaults
+     * to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * An icon before the label, hidden from assistive technology
+     */
+    icon?: ReactNode;
+    /**
+     * The label of the item that opens the submenu, which names both
+     */
+    label: ReactNode;
+}
+/**
+ * An item in a `Menu` that opens another menu beside it, such as "Move to" opening a list of folders. Right Arrow
+ * (Left Arrow in right-to-left text), Enter or Space opens it on its first item, and a click opens it with focus left
+ * on its item. Left Arrow (Right Arrow in right-to-left text) or Escape closes it and returns focus to its item.
+ * Choosing an item inside closes every open menu. Its items are any menu parts, including another `Submenu`.
+ *
+ * @example
+ * <Submenu label="Move to">
+ *   <MenuItem onClick={() => move("inbox")}>Inbox</MenuItem>
+ *   <MenuItem onClick={() => move("projects")}>Projects</MenuItem>
+ * </Submenu>
+ */
+export declare function Submenu({ children, disabled, icon, label }: SubmenuProps): JSX.Element;

package/dist/components/Menu/Submenu.js

@@ -0,0 +1,122 @@
+import { focusItem as e } from "../../menus/focusItem.js";
+import { hasModifier as t } from "../../menus/hasModifier.js";
+import { renderedItems as n } from "../../menus/renderedItems.js";
+import { anchorNameFor as r } from "../../overlays/anchorNameFor.js";
+import { Box as i } from "../Box/Box.js";
+import { ChevronRightIcon as a } from "../Icon/ChevronRightIcon.js";
+import o from "../MenuSurface/MenuSurface.module.js";
+import { Menu as s } from "./Menu.js";
+import { useMenuContext as c } from "./useMenuContext.js";
+import { useMenuItemContent as l } from "./useMenuItemContent.js";
+import { useEffect as u, useId as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+// src/components/Menu/Submenu.tsx
+var g = 100;
+function _({ children: e, disabled: n = !1, icon: _, label: S }) {
+	let C = c("Submenu"), w = d(), T = d(), E = r(T), [D, O] = p(!1), k = f(!1), A = f(void 0), j = l({
+		describedBy: void 0,
+		description: void 0,
+		label: S,
+		leading: _,
+		trailing: /* @__PURE__ */ m(a, {})
+	});
+	u(() => () => clearTimeout(A.current), []), n && D && O(!1);
+	function M(e, t) {
+		let r = e.getElementById(T);
+		n || r === null || (D && t && y(r), k.current = t, O(!0));
+	}
+	function N(e) {
+		M(e.currentTarget.ownerDocument, e.detail === 0);
+	}
+	function P(e) {
+		let t = e.currentTarget.ownerDocument;
+		e.pointerType !== "touch" && !D && A.current === void 0 && (A.current = setTimeout(() => {
+			A.current = void 0, M(t, !1);
+		}, g));
+	}
+	function F(e) {
+		let t = e.currentTarget.ownerDocument.getElementById(T);
+		V(), D && t !== null && C.startPointerGrace({
+			x: e.clientX,
+			y: e.clientY
+		}, t);
+	}
+	function I(e) {
+		e.key === b(e.currentTarget) && !t(e) && (e.preventDefault(), M(e.currentTarget.ownerDocument, !0));
+	}
+	function L(e) {
+		e.defaultPrevented || e.key !== x(e.currentTarget) || t(e) || (e.preventDefault(), O(!1), e.currentTarget.ownerDocument.getElementById(w)?.focus());
+	}
+	function R(e) {
+		v(e);
+	}
+	function z(e) {
+		let t = e.currentTarget;
+		v(e), e.target === t && (e.newState === "open" ? (O(!0), k.current && y(t)) : (O(!1), H(t)), k.current = !1);
+	}
+	function B(e) {
+		let t = e.relatedTarget;
+		t !== null && e.currentTarget.contains(t) || V(), t !== null && !e.currentTarget.contains(t) && O(!1);
+	}
+	function V() {
+		clearTimeout(A.current), A.current = void 0;
+	}
+	function H(e) {
+		let t = e.ownerDocument, n = t.getElementById(w), r = t.activeElement, i = r === null || r === t.body || e.contains(r);
+		n?.closest("[role=\"menu\"]")?.matches(":popover-open") === !0 && i && n.focus();
+	}
+	return /* @__PURE__ */ h(i, {
+		className: o.submenu,
+		onBlur: B,
+		role: "none",
+		children: [/* @__PURE__ */ m(i, {
+			as: "button",
+			className: o.item,
+			id: w,
+			onClick: N,
+			onKeyDown: I,
+			onPointerLeave: F,
+			onPointerMove: P,
+			popoverTarget: n ? void 0 : T,
+			popoverTargetAction: "show",
+			role: "menuitem",
+			style: { anchorName: E },
+			tabIndex: -1,
+			type: "button",
+			"aria-controls": T,
+			"aria-disabled": n ? !0 : void 0,
+			"aria-expanded": D,
+			"aria-haspopup": "menu",
+			"aria-labelledby": j.labelId,
+			"data-leading": j.hasLeading ? !0 : void 0,
+			children: j.content
+		}), /* @__PURE__ */ m(s, {
+			anchorName: E,
+			className: o.submenuMenu,
+			close: C.closeAll,
+			density: C.density,
+			id: T,
+			onBeforeToggle: R,
+			onKeyDown: L,
+			onToggle: z,
+			open: D,
+			placement: "end",
+			"aria-labelledby": j.labelId,
+			children: e
+		})]
+	});
+}
+function v(e) {
+	e.stopPropagation();
+}
+function y(t) {
+	let r = n(t).at(0);
+	r === void 0 ? t.focus() : e(r);
+}
+function b(e) {
+	return e.matches(":dir(rtl)") ? "ArrowLeft" : "ArrowRight";
+}
+function x(e) {
+	return e.matches(":dir(rtl)") ? "ArrowRight" : "ArrowLeft";
+}
+export { _ as Submenu };

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,18 @@
+export { Menu } from "./Menu";
+export type { MenuDensity, MenuOverlayProps, MenuProps } from "./Menu";
+export { MenuGroup } from "./MenuGroup";
+export type { MenuGroupProps } from "./MenuGroup";
+export { MenuItem } from "./MenuItem";
+export type { MenuItemElement, MenuItemProps } from "./MenuItem";
+export { MenuItemCheckbox } from "./MenuItemCheckbox";
+export type { MenuItemCheckboxProps } from "./MenuItemCheckbox";
+export { MenuItemRadio } from "./MenuItemRadio";
+export type { MenuItemRadioProps } from "./MenuItemRadio";
+export { MenuRadioGroup } from "./MenuRadioGroup";
+export type { MenuRadioGroupProps } from "./MenuRadioGroup";
+export { MenuSeparator } from "./MenuSeparator";
+export type { MenuSeparatorProps } from "./MenuSeparator";
+export { Submenu } from "./Submenu";
+export type { SubmenuProps } from "./Submenu";
+export { useMenu } from "./useMenu";
+export type { UseMenuOptions, UseMenuResult } from "./useMenu";

package/dist/components/Menu/useMenu.d.ts

@@ -0,0 +1,18 @@
+import type { UseMenuOptions, UseMenuResult } from "./useMenuButton";
+export type { UseMenuOptions, UseMenuResult } from "./useMenuButton";
+/**
+ * Connects a `Menu` to the button that opens it. Clicking the button toggles the menu, and Escape or a click outside
+ * closes it, all handled by the browser. Opened from the keyboard, or by a controlled `open`, focus moves to the first
+ * item; opened with a pointer, to the menu itself, so no item is highlighted under a pointer still on the button.
+ * Closing the menu with focus inside returns focus to the button.
+ *
+ * @param options open state, the change callback and placement
+ * @returns prop getters for the trigger and the `Menu`, whether it is open, and `close`
+ *
+ * @example
+ * const menu = useMenu({ placement: "bottom-end" });
+ *
+ * <IconButton {...menu.getTriggerProps()} label="Row actions"><MoreHorizontalIcon /></IconButton>
+ * <Menu {...menu.getMenuProps({ "aria-label": "Row actions" })}>…</Menu>
+ */
+export declare function useMenu(options?: UseMenuOptions): UseMenuResult;

package/dist/components/Menu/useMenu.js

@@ -0,0 +1,20 @@
+import { useMenuButton as e } from "./useMenuButton.js";
+import { c as t } from "react/compiler-runtime";
+// src/components/Menu/useMenu.ts
+function n(n) {
+	let r = t(9), i;
+	r[0] === n ? i = r[1] : (i = n === void 0 ? {} : n, r[0] = n, r[1] = i);
+	let a = i, o;
+	r[2] === a ? o = r[3] : (o = {
+		...a,
+		pointerOpeningFocus: "menu"
+	}, r[2] = a, r[3] = o);
+	let { close: s, getMenuProps: c, getTriggerProps: l, open: u } = e(o), d;
+	return r[4] !== s || r[5] !== c || r[6] !== l || r[7] !== u ? (d = {
+		close: s,
+		getMenuProps: c,
+		getTriggerProps: l,
+		open: u
+	}, r[4] = s, r[5] = c, r[6] = l, r[7] = u, r[8] = d) : d = r[8], d;
+}
+export { n as useMenu };

package/dist/components/Menu/useMenuButton.d.ts

@@ -0,0 +1,124 @@
+import type { CSSProperties, KeyboardEvent, MouseEvent } from "react";
+import type { OpeningFocus } from "../../menus";
+import type { OverlayPlacement } from "../../overlays";
+import type { MenuOverlayProps } from "./Menu";
+/**
+ * Options for `useMenu`
+ */
+export interface UseMenuOptions {
+    /**
+     * Whether the menu starts open when uncontrolled. Defaults to `false`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called with the new open state when the menu opens or closes; when controlled, also with `true` when the user
+     * asks to open it
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controls whether the menu is open. The hook then cancels openings and reports them through `onOpenChange`; a close
+     * the browser makes is reported after it happens, and the menu shows again if `open` stays true.
+     */
+    open?: boolean;
+    /**
+     * Side of the trigger the menu opens on. It flips to the opposite side when there is no room. Defaults to
+     * `bottom-start`.
+     */
+    placement?: OverlayPlacement;
+}
+/**
+ * Props `getTriggerProps` sets on the trigger
+ */
+interface MenuTriggerProps {
+    /**
+     * The menu's id
+     */
+    "aria-controls": string;
+    /**
+     * Whether the menu is open
+     */
+    "aria-expanded": boolean;
+    /**
+     * Says the trigger opens a menu
+     */
+    "aria-haspopup": "menu";
+    /**
+     * The trigger's id, which names the menu
+     */
+    id: string;
+    /**
+     * Notes whether a pointer or the keyboard is opening the menu
+     */
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Opens the menu on its first item with Down, or its last with Up
+     */
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * The menu's id, which makes the button open and close it without script
+     */
+    popoverTarget: string;
+    /**
+     * Names the trigger as the menu's anchor
+     */
+    style: CSSProperties;
+}
+/**
+ * Where focus goes as a menu button's menu opens: its first or last item, the menu itself, or the trigger, which keeps
+ * it
+ */
+export type MenuButtonOpeningFocus = OpeningFocus | "trigger";
+/**
+ * Options for `useMenuButton`
+ */
+export interface UseMenuButtonOptions extends UseMenuOptions {
+    /**
+     * Where focus goes when a pointer's click opens the menu
+     */
+    pointerOpeningFocus: MenuButtonOpeningFocus;
+}
+/**
+ * Prop getters for a menu's trigger and the `Menu`, whether it is open, and a way to close it
+ */
+export interface UseMenuResult {
+    /**
+     * Closes the menu, returning focus to the trigger as choosing an item does, and reports `false` through
+     * `onOpenChange`
+     */
+    close: () => void;
+    /**
+     * Returns the props to spread on the `Menu`, merged with any given. The menu is named by its trigger unless an
+     * `aria-label` is given, which an `IconButton` trigger needs.
+     */
+    getMenuProps: <Props extends object>(props?: Props & Partial<MenuOverlayProps>) => Omit<Props, keyof MenuOverlayProps> & MenuOverlayProps;
+    /**
+     * Returns the props to spread on the trigger, which must be a button, merged with any given: where both set a
+     * handler, both run, the given one first, and `style` objects merge
+     */
+    getTriggerProps: <Props extends object>(props?: Props & Partial<MenuTriggerProps>) => Omit<Props, keyof MenuTriggerProps> & MenuTriggerProps;
+    /**
+     * Whether the menu is open
+     */
+    open: boolean;
+}
+/**
+ * What `useMenuButton` returns: `useMenu`'s result and a way to open the menu with focus where its caller chooses
+ */
+export interface UseMenuButtonResult extends UseMenuResult {
+    /**
+     * Opens the menu, or moves focus in if it is already open
+     *
+     * @param trigger the trigger, which finds the menu in its document
+     * @param openingFocus where focus goes
+     */
+    show: (trigger: HTMLElement, openingFocus: MenuButtonOpeningFocus) => void;
+}
+/**
+ * Connects a `Menu` to the button that opens it, as `useMenu` does, with where focus goes when a pointer opens the menu
+ * left to the caller
+ *
+ * @param options open state, the change callback, placement and where a pointer's opening puts focus
+ * @returns `useMenu`'s result and `show`
+ */
+export declare function useMenuButton({ defaultOpen, onOpenChange, open, placement, pointerOpeningFocus, }: UseMenuButtonOptions): UseMenuButtonResult;
+export {};

package/dist/components/Menu/useMenuButton.js

@@ -0,0 +1,92 @@
+import { closeWhenFocusLeaves as e } from "../../menus/closeWhenFocusLeaves.js";
+import { focusOnOpening as t } from "../../menus/focusOnOpening.js";
+import { hasModifier as n } from "../../menus/hasModifier.js";
+import { leaveMenuOnTab as r } from "../../menus/leaveMenuOnTab.js";
+import { watchRemovals as i } from "../../menus/watchRemovals.js";
+import { mergeProps as a } from "../../overlays/mergeProps.js";
+import { syncPopover as o } from "../../overlays/syncPopover.js";
+import { usePopover as s } from "../Popover/usePopover.js";
+import { useEffect as c, useId as l, useRef as u } from "react";
+// src/components/Menu/useMenuButton.ts
+var d = {
+	ArrowDown: "first",
+	ArrowUp: "last"
+};
+function f({ defaultOpen: f, onOpenChange: m, open: h, placement: g = "bottom-start", pointerOpeningFocus: _ }) {
+	let v = l(), y = s({
+		defaultOpen: f,
+		onOpenChange: m,
+		open: h,
+		placement: g
+	}), b = u("first"), x = u(null), S = y.getTriggerProps().popoverTarget;
+	c(() => () => x.current?.(), []);
+	function C(e) {
+		b.current = e.detail === 0 ? "first" : _;
+		let t = e.currentTarget.ownerDocument.getElementById(S);
+		e.defaultPrevented && t !== null && k(t);
+	}
+	function w(e) {
+		let t = d[e.key], r = e.currentTarget.ownerDocument.getElementById(S);
+		t === void 0 || r === null || e.defaultPrevented || n(e) || (e.preventDefault(), E(r, t));
+	}
+	function T(e, t) {
+		let n = e.ownerDocument.getElementById(S);
+		n !== null && E(n, t);
+	}
+	function E(e, t) {
+		e.matches(":popover-open") ? D(e, t) : (b.current = t, o(e, !0));
+	}
+	function D(e, n) {
+		n === "trigger" ? e.ownerDocument.getElementById(v)?.focus() : t(e, n);
+	}
+	function O(e) {
+		let t = e.currentTarget;
+		e.newState === "open" && e.target === t && k(t);
+	}
+	function k(e) {
+		setTimeout(() => {
+			e.matches(":popover-open") || (b.current = "first");
+		}, 0);
+	}
+	function A(e) {
+		let t = e.currentTarget;
+		e.target === t && (x.current?.(), x.current = null, e.newState === "open" && (x.current = i(t), D(t, b.current)), b.current = "first");
+	}
+	function j(e) {
+		r(e, e.currentTarget.ownerDocument.getElementById(v), y.close);
+	}
+	function M(t) {
+		e(t.currentTarget, t.relatedTarget, (e) => e.id === v);
+	}
+	function N(e) {
+		let t = a(e, {
+			"aria-labelledby": p(e) ? void 0 : v,
+			close: y.close,
+			onBeforeToggle: O,
+			onBlur: M,
+			onKeyDown: j,
+			onToggle: A
+		});
+		return y.getOverlayProps(t);
+	}
+	function P(e) {
+		let t = a(e, {
+			"aria-haspopup": "menu",
+			id: v,
+			onClick: C,
+			onKeyDown: w
+		});
+		return y.getTriggerProps(t);
+	}
+	return {
+		close: y.close,
+		getMenuProps: N,
+		getTriggerProps: P,
+		open: y.open,
+		show: T
+	};
+}
+function p(e) {
+	return e !== void 0 && "aria-label" in e && typeof e["aria-label"] == "string" && e["aria-label"] !== "";
+}
+export { f as useMenuButton };

package/dist/components/Menu/useMenuContext.d.ts

@@ -0,0 +1,9 @@
+import type { MenuContextValue } from "./MenuContext";
+/**
+ * Reads the state of the surrounding `Menu`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding `Menu`'s state
+ * @throws MissingContextError when the part is not inside a `Menu`
+ */
+export declare function useMenuContext(part: string): MenuContextValue;

package/dist/components/Menu/useMenuContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { MenuContext as t } from "./MenuContext.js";
+import { useContext as n } from "react";
+// src/components/Menu/useMenuContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Menu");
+	return i;
+}
+export { r as useMenuContext };

package/dist/components/Menu/useMenuItemContent.d.ts

@@ -0,0 +1,55 @@
+import type { JSX, ReactNode } from "react";
+/**
+ * What a menu item shows
+ */
+interface MenuItemContentOptions {
+    /**
+     * The consumer's own `aria-describedby`, listed after the description
+     */
+    describedBy: string | undefined;
+    /**
+     * A line of muted text below the label
+     */
+    description: ReactNode;
+    /**
+     * The label
+     */
+    label: ReactNode;
+    /**
+     * What sits in the leading slot, such as an icon or a check; nothing leaves the item without one
+     */
+    leading: ReactNode;
+    /**
+     * What sits after the label, such as a shortcut or a submenu's chevron
+     */
+    trailing: ReactNode;
+}
+/**
+ * A menu item's content and the ids that name and describe it
+ */
+interface MenuItemContent {
+    /**
+     * The leading slot, label, description and trailing slot, in that order
+     */
+    content: JSX.Element;
+    /**
+     * The ids for the item's `aria-describedby`: the description's, then the consumer's; undefined for neither
+     */
+    describedBy: string | undefined;
+    /**
+     * Whether the item has a leading slot, for its `data-leading`, which gives its menu an icon column
+     */
+    hasLeading: boolean;
+    /**
+     * The id for the item's `aria-labelledby`, which names it by its label alone
+     */
+    labelId: string;
+}
+/**
+ * Lays out the content every kind of menu item shares
+ *
+ * @param options the label, description, leading and trailing slots and the consumer's `aria-describedby`
+ * @returns the content and the ids to name and describe the item by
+ */
+export declare function useMenuItemContent({ describedBy, description, label, leading, trailing, }: MenuItemContentOptions): MenuItemContent;
+export {};