@krelborn/stylesui 0.8.1 → 0.9.0

package/dist/components/Listbox/useListbox.js

@@ -1,8 +1,8 @@
-import { targetIndexForKey as e } from "../../collections/targetIndexForKey.js";
-import { extendTypeAheadQuery as t, isTypeAheadQueryLive as n, typeAheadTarget as r } from "../../collections/typeAhead.js";
-import { renderedOptions as i } from "./renderedOptions.js";
+import { extendTypeAheadQuery as e, isTypeAheadQueryLive as t, typeAheadTarget as n } from "../../collections/typeAhead.js";
+import { renderedOptions as r } from "../../collections/renderedOptions.js";
+import { targetIndexForKey as i } from "../../collections/targetIndexForKey.js";
 import { useId as a, useRef as o, useState as s } from "react";
-//#region src/components/Listbox/useListbox.ts
+// src/components/Listbox/useListbox.ts
 var c = {
 	block: "nearest",
 	container: "nearest"
@@ -22,13 +22,13 @@ function l({ defaultValue: l, onAction: f, onValueChange: p, value: m }) {
 	function O(e) {
 		let t = v.current;
 		if (t === null) return;
-		let n = i(t), r = n.findIndex((t) => t.value === e);
-		r !== -1 && E(n, r);
+		let n = r(t), i = n.findIndex((t) => t.value === e);
+		i !== -1 && E(n, i);
 	}
 	function k(e) {
 		if (e.target !== e.currentTarget) return;
 		v.current = e.currentTarget;
-		let t = i(e.currentTarget);
+		let t = r(e.currentTarget);
 		if (t.length === 0) {
 			C(null), y.current = null;
 			return;
@@ -47,30 +47,30 @@ function l({ defaultValue: l, onAction: f, onValueChange: p, value: m }) {
 	}
 	function N(e) {
 		if (e.altKey || e.ctrlKey || e.metaKey) return;
-		let t = i(e.currentTarget), n = u(t, S, w), r = Date.now();
-		(P(e, t[n]) || F(e.key, t[n], r) || I(e.key, t, n) || L(e.key, t, n, r)) && e.preventDefault();
+		let t = r(e.currentTarget), n = u(t, S, w), i = Date.now();
+		(P(e, t[n]) || F(e.key, t[n], i) || I(e.key, t, n) || L(e.key, t, n, i)) && e.preventDefault();
 	}
 	function P(e, t) {
 		return e.key === "Enter" && (!e.repeat && t !== void 0 && !t.disabled && f?.(t.value), !0);
 	}
-	function F(e, t, r) {
-		return e !== " " || n(g.current, r) ? !1 : (t !== void 0 && !t.disabled && T(t.value), !0);
+	function F(e, n, r) {
+		return e !== " " || t(g.current, r) ? !1 : (n !== void 0 && !n.disabled && T(n.value), !0);
 	}
-	function I(t, n, r) {
-		let i = (r === -1 ? d(t, n.length, y.current) : null) ?? e({
-			count: n.length,
-			currentIndex: r,
-			key: t,
+	function I(e, t, n) {
+		let r = (n === -1 ? d(e, t.length, y.current) : null) ?? i({
+			count: t.length,
+			currentIndex: n,
+			key: e,
 			orientation: "vertical",
 			wraps: !1
 		});
-		return i !== null && (D(n, i), !0);
+		return r !== null && (D(t, r), !0);
 	}
-	function L(e, n, i, a) {
-		if (Array.from(e).length !== 1) return !1;
-		g.current = t(g.current, e, a);
-		let o = n.map((e) => e.textValue), s = r(o, i, g.current.text);
-		return s !== null && D(n, s), !0;
+	function L(t, r, i, a) {
+		if (Array.from(t).length !== 1) return !1;
+		g.current = e(g.current, t, a);
+		let o = r.map((e) => e.textValue), s = n(o, i, g.current.text);
+		return s !== null && D(r, s), !0;
 	}
 	function R(e) {
 		f?.(e);
@@ -100,5 +100,4 @@ function u(e, t, n) {
 function d(e, t, n) {
 	return n === null || t === 0 ? null : e === "ArrowDown" ? Math.min(n, t - 1) : e === "ArrowUp" ? Math.min(Math.max(n - 1, 0), t - 1) : null;
 }
-//#endregion
 export { l as useListbox };

package/dist/components/Listbox/useListboxContext.js

@@ -1,11 +1,10 @@
 import { MissingContextError as e } from "../../errors/MissingContextError.js";
 import { ListboxContext as t } from "./ListboxContext.js";
 import { useContext as n } from "react";
-//#region src/components/Listbox/useListboxContext.ts
+// src/components/Listbox/useListboxContext.ts
 function r(r) {
 	let i = n(t);
 	if (i === null) throw new e(r, "Listbox");
 	return i;
 }
-//#endregion
 export { r as useListboxContext };

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

@@ -0,0 +1,70 @@
+import type { JSX, ToggleEventHandler } from "react";
+import type { OverlayPlacement } from "../../overlays";
+import type { BoxProps } from "../Box";
+/**
+ * How tightly a menu's rows are spaced: `default` for menus from buttons, `compact` for menubars and dense tools
+ */
+export type MenuDensity = "compact" | "default";
+/**
+ * Props `getMenuProps` from `useMenu` returns, which every `Menu` takes
+ */
+export interface MenuOverlayProps {
+    /**
+     * `anchor-name` of the trigger the menu is positioned against. From `getMenuProps`.
+     */
+    anchorName: string;
+    /**
+     * Closes every open menu, as choosing an item does. From `getMenuProps`.
+     */
+    close: () => void;
+    /**
+     * The menu's id, which the trigger's `popoverTarget` and `aria-controls` point at. From `getMenuProps`.
+     */
+    id: string;
+    /**
+     * Cancels an opening the parent of a controlled menu has not asked for. From `getMenuProps`.
+     */
+    onBeforeToggle: ToggleEventHandler<HTMLElement>;
+    /**
+     * Keeps the hook's state in step with the browser and moves focus in as the menu opens. From `getMenuProps`.
+     */
+    onToggle: ToggleEventHandler<HTMLElement>;
+    /**
+     * Whether the menu is shown. From `getMenuProps`.
+     */
+    open: boolean;
+    /**
+     * Side of the trigger the menu opens on. From `getMenuProps`.
+     */
+    placement: OverlayPlacement;
+}
+/**
+ * Props for `Menu`: the props `getMenuProps` returns plus every `div` prop except those the menu pattern sets
+ */
+export interface MenuProps extends MenuOverlayProps, Omit<BoxProps<"div">, "aria-activedescendant" | "aria-orientation" | "as" | "popover" | "ref" | "role" | "tabIndex" | keyof MenuOverlayProps> {
+    /**
+     * How tightly the rows are spaced, which the menu's submenus share. Rows are at least 44px tall on a touch screen,
+     * whatever the density. Defaults to `default`.
+     */
+    density?: MenuDensity;
+}
+/**
+ * A menu of commands that opens from a button, such as the actions on a row or the options of a view. `useMenu`
+ * connects the two: spread `getTriggerProps()` on a `Button` or `IconButton` and `getMenuProps()` on the menu, inside
+ * the same `Theme`. Opened from the keyboard, focus moves to the first item; opened with a pointer, to the menu itself.
+ * Choosing an item runs its `onClick` and closes the menu, and Escape or a click outside closes it too. Focus then goes
+ * back to the trigger, unless a click outside put it elsewhere.
+ *
+ * The menu is named by its trigger. An `IconButton` takes its name from its tooltip, which the menu cannot reach, so
+ * give the menu the same name with `getMenuProps({ "aria-label": … })`.
+ *
+ * @example
+ * const menu = useMenu();
+ *
+ * <Button {...menu.getTriggerProps()} variant="secondary">Actions</Button>
+ * <Menu {...menu.getMenuProps()}>
+ *   <MenuItem onClick={edit}>Edit</MenuItem>
+ *   <MenuItem onClick={duplicate}>Duplicate</MenuItem>
+ * </Menu>
+ */
+export declare function Menu({ className, close, density, onKeyDown, onPointerMove, onPointerOut, onToggle, ...rest }: MenuProps): JSX.Element;

package/dist/components/Menu/Menu.js

@@ -0,0 +1,76 @@
+import { extendTypeAheadQuery as e, isTypeAheadQueryLive as t, typeAheadTarget as n } from "../../collections/typeAhead.js";
+import { targetIndexForKey as r } from "../../collections/targetIndexForKey.js";
+import { focusItem as i } from "../../menus/focusItem.js";
+import { hasModifier as a } from "../../menus/hasModifier.js";
+import { itemText as o } from "../../menus/itemText.js";
+import { renderedItems as s } from "../../menus/renderedItems.js";
+import c from "../MenuSurface/MenuSurface.module.js";
+import { Overlay as l } from "../Overlay/Overlay.js";
+import { MenuContext as u } from "./MenuContext.js";
+import { useMenuPointer as d } from "./useMenuPointer.js";
+import { clsx as f } from "clsx";
+import { useRef as p } from "react";
+import { jsx as m } from "react/jsx-runtime";
+// src/components/Menu/Menu.tsx
+function h({ className: h, close: g, density: _ = "default", onKeyDown: v, onPointerMove: y, onPointerOut: b, onToggle: x, ...S }) {
+	let C = p(null), w = p(!1), T = d();
+	function E() {
+		w.current || g();
+	}
+	function D(e) {
+		y?.(e), T.handlePointerMove(e);
+	}
+	function O(e) {
+		b?.(e), T.handlePointerOut(e);
+	}
+	function k(e) {
+		x(e), e.newState === "closed" && e.target === e.currentTarget && (C.current = null);
+	}
+	function A(e) {
+		v?.(e);
+		let t = e.currentTarget, n = e.target.closest("[role=\"menu\"]") !== t;
+		if (e.defaultPrevented || a(e) || n) return;
+		let r = s(t), i = r.indexOf(e.target), o = i === -1 ? void 0 : r[i];
+		(j(e.key, r, i) || M(e, o)) && e.preventDefault();
+	}
+	function j(e, t, n) {
+		let a = r({
+			count: t.length,
+			currentIndex: n,
+			key: e,
+			orientation: "vertical",
+			wraps: !0
+		}) ?? N(e, t, n);
+		return a != null && i(t[a]), a !== void 0;
+	}
+	function M(e, t) {
+		let n = t?.getAttribute("role") !== "menuitem";
+		return e.key !== " " || t === void 0 || !n && t instanceof HTMLButtonElement ? !1 : (e.repeat || (w.current = n, t.click(), w.current = !1), !0);
+	}
+	function N(r, i, a) {
+		let s = Date.now();
+		if (!(Array.from(r).length !== 1 || r === " " && !t(C.current, s))) return C.current = e(C.current, r, s), n(i.map(o), a, C.current.text);
+	}
+	return /* @__PURE__ */ m(u.Provider, {
+		value: {
+			closeAfterChoosing: E,
+			closeAll: g,
+			density: _,
+			startPointerGrace: T.startPointerGrace
+		},
+		children: /* @__PURE__ */ m(l, {
+			...S,
+			as: "div",
+			className: f(c.menu, h),
+			onKeyDown: A,
+			onPointerMove: D,
+			onPointerOut: O,
+			onToggle: k,
+			popover: "auto",
+			role: "menu",
+			tabIndex: 0,
+			"data-density": _
+		})
+	});
+}
+export { h as Menu };

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

@@ -0,0 +1,29 @@
+import type { Point } from "../../menus";
+import type { MenuDensity } from "./Menu";
+/**
+ * State a `Menu` shares with its items
+ */
+export interface MenuContextValue {
+    /**
+     * Closes every open menu once an item has been chosen, unless Space chose a checkbox or radio item, which leaves
+     * them open
+     */
+    closeAfterChoosing: () => void;
+    /**
+     * Closes every open menu, from the top menu down
+     */
+    closeAll: () => void;
+    /**
+     * How tightly the menu's rows are spaced, which its submenus share
+     */
+    density: MenuDensity;
+    /**
+     * Lets the pointer cross the menu's other items on its way into an open submenu, from the point where it left the
+     * submenu's item
+     */
+    startPointerGrace: (exit: Point, submenu: HTMLElement) => void;
+}
+/**
+ * Carries a `Menu`'s state to its items; null outside a `Menu`
+ */
+export declare const MenuContext: import("react").Context<MenuContextValue | null>;

package/dist/components/Menu/MenuContext.js

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

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

@@ -0,0 +1,22 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `MenuGroup`: its label plus every `div` prop except the role the menu pattern sets
+ */
+export interface MenuGroupProps extends Omit<BoxProps<"div">, "as" | "role"> {
+    /**
+     * A heading shown above the group's items, which names the group
+     */
+    label?: ReactNode;
+}
+/**
+ * Groups related items in a `Menu`, under a label that names them when it has one. The arrow keys and type-ahead move
+ * across groups as though the items were in one list. Put a `MenuSeparator` between groups to rule them apart.
+ *
+ * @example
+ * <MenuGroup label="Sort by">
+ *   <MenuItem onClick={sortByName}>Name</MenuItem>
+ *   <MenuItem onClick={sortBySize}>Size</MenuItem>
+ * </MenuGroup>
+ */
+export declare function MenuGroup({ children, className, label, "aria-labelledby": labelledBy, ...rest }: MenuGroupProps): JSX.Element;

package/dist/components/Menu/MenuGroup.js

@@ -0,0 +1,32 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "../MenuSurface/MenuSurface.module.js";
+import { useMenuContext as r } from "./useMenuContext.js";
+import { clsx as i } from "clsx";
+import { useId as a } from "react";
+import { c as o } from "react/compiler-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+// src/components/Menu/MenuGroup.tsx
+function l(l) {
+	let u = o(20), d, f, p, m, h;
+	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4], h = u[5]) : ({children: d, className: f, label: p, "aria-labelledby": m, ...h} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m, u[5] = h), r("MenuGroup");
+	let g = a(), _;
+	u[6] === p ? _ = u[7] : (_ = e(p), u[6] = p, u[7] = _);
+	let v = _, y;
+	u[8] === f ? y = u[9] : (y = i(n.group, f), u[8] = f, u[9] = y);
+	let b = v ? g : m, x;
+	u[10] !== v || u[11] !== p || u[12] !== g ? (x = v && /* @__PURE__ */ s(t, {
+		className: n.groupLabel,
+		id: g,
+		children: p
+	}), u[10] = v, u[11] = p, u[12] = g, u[13] = x) : x = u[13];
+	let S;
+	return u[14] !== d || u[15] !== h || u[16] !== y || u[17] !== b || u[18] !== x ? (S = /* @__PURE__ */ c(t, {
+		...h,
+		className: y,
+		role: "group",
+		"aria-labelledby": b,
+		children: [x, d]
+	}), u[14] = d, u[15] = h, u[16] = y, u[17] = b, u[18] = x, u[19] = S) : S = u[19], S;
+}
+export { l as MenuGroup };

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

@@ -0,0 +1,77 @@
+import type { JSX, ReactNode } from "react";
+import type { LinkOrButtonElement, LinkOrButtonProps } from "../../links";
+/**
+ * What a `MenuItem` can render: a button for an action, a link, or a component that renders an anchor, such as a
+ * router's link
+ */
+export type MenuItemElement = LinkOrButtonElement;
+interface MenuItemOwnProps {
+    /**
+     * Not accepted: the label names the item
+     */
+    "aria-label"?: never;
+    /**
+     * Not accepted: the label names the item
+     */
+    "aria-labelledby"?: never;
+    /**
+     * The label, which names the item
+     */
+    children: ReactNode;
+    /**
+     * A line of muted text below the label, which describes the item
+     */
+    description?: ReactNode;
+    /**
+     * Whether the item cannot be chosen. It stays reachable with the arrow keys, so its label is read, but clicks, Enter
+     * and Space do nothing: your `onClick` does not run and a link is not followed, nor opened by a middle click. A link
+     * given as `a` also loses its `href`, so its context menu cannot open it. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * An icon before the label, hidden from assistive technology. Once any item in the menu has one, every label lines
+     * up after the icons.
+     */
+    icon?: ReactNode;
+    /**
+     * A keyboard shortcut shown after the label, such as "⌘D". It is hidden from assistive technology: announce it with
+     * `aria-keyshortcuts`. The menu does not bind it.
+     */
+    shortcut?: string;
+    /**
+     * `danger` for an item that destroys something, which also needs to say so in its label
+     */
+    tone?: "danger";
+}
+interface MenuItemElementOwnProps<E extends MenuItemElement> {
+    /**
+     * What to render: `button`, `a`, or a component that renders an anchor. Defaults to `button`.
+     */
+    as?: E;
+    /**
+     * Class names merged with the item's base class
+     */
+    className?: string;
+}
+/**
+ * Props for `MenuItem`: its own props plus every other prop of the button, link or component given in `as`, except
+ * those the menu pattern sets. When `as` may be either a link or a button, only props both accept are allowed.
+ */
+export type MenuItemProps<E extends MenuItemElement = "button"> = E extends MenuItemElement ? MenuItemPropsFor<E> : never;
+type MenuItemPropsFor<E extends MenuItemElement> = MenuItemOwnProps & MenuItemElementOwnProps<E> & LinkOrButtonProps<E, "aria-disabled" | "dangerouslySetInnerHTML" | "disabled" | "role" | "tabIndex" | "type" | keyof MenuItemElementOwnProps<E> | keyof MenuItemOwnProps>;
+/**
+ * One command in a `Menu`: a button by default, or a link with `as="a"` or a router's link component. Choosing it,
+ * with a click, Enter or Space, runs your `onClick`, or follows the link, and then closes every open menu, returning
+ * focus to the trigger; calling `preventDefault()` in a button's `onClick` keeps the menus open. A component given in
+ * `as` must pass the props it is given on to its anchor, or the item is neither styled nor reachable.
+ *
+ * @example
+ * <MenuItem icon={<AddIcon />} onClick={duplicate} shortcut="⌘D" aria-keyshortcuts="Meta+D">
+ *   Duplicate
+ * </MenuItem>
+ *
+ * @example
+ * <MenuItem as="a" href="/settings">Settings</MenuItem>
+ */
+export declare function MenuItem<E extends MenuItemElement = "button">({ as, children, className, description, disabled, icon, shortcut, tone, ...rest }: MenuItemProps<E>): JSX.Element;
+export {};

package/dist/components/Menu/MenuItem.js

@@ -0,0 +1,54 @@
+import { Box as e } from "../Box/Box.js";
+import t from "../MenuSurface/MenuSurface.module.js";
+import { useMenuContext as n } from "./useMenuContext.js";
+import { useMenuItemContent as r } from "./useMenuItemContent.js";
+import { clsx as i } from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+// src/components/Menu/MenuItem.tsx
+function o({ as: e, children: a, className: o, description: c, disabled: l = !1, icon: u, shortcut: d, tone: f, ...p }) {
+	let m = n("MenuItem"), { "aria-describedby": h, href: g, onAuxClick: _, onClick: v, ...y } = p, b = r({
+		describedBy: h,
+		description: c,
+		label: a,
+		leading: u,
+		trailing: d
+	});
+	function x(e) {
+		l ? e.preventDefault() : (_?.(e), e.button === 1 && !e.defaultPrevented && e.currentTarget instanceof HTMLAnchorElement && m.closeAfterChoosing());
+	}
+	function S(e) {
+		l ? e.preventDefault() : (v?.(e), (!e.defaultPrevented || e.currentTarget instanceof HTMLAnchorElement) && m.closeAfterChoosing());
+	}
+	let C = g === void 0 || l && e === "a" ? {} : { href: g };
+	return s(e, {
+		...y,
+		...C,
+		"aria-describedby": b.describedBy,
+		"aria-disabled": l ? !0 : void 0,
+		"aria-labelledby": b.labelId,
+		children: b.content,
+		className: i(t.item, o),
+		"data-leading": b.hasLeading ? !0 : void 0,
+		"data-tone": f,
+		onAuxClick: x,
+		onClick: S,
+		role: "menuitem",
+		tabIndex: -1
+	});
+}
+function s(t, { children: n, ...r }) {
+	return t === void 0 || t === "button" ? /* @__PURE__ */ a(e, {
+		...r,
+		as: "button",
+		type: "button",
+		children: n
+	}) : t === "a" ? /* @__PURE__ */ a(e, {
+		...r,
+		as: "a",
+		children: n
+	}) : /* @__PURE__ */ a(t, {
+		...r,
+		children: n
+	});
+}
+export { o as MenuItem };

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

@@ -0,0 +1,61 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `MenuItemCheckbox`: its own props plus every native button prop except those the menu pattern sets and the
+ * name its label gives it
+ */
+export interface MenuItemCheckboxProps extends Omit<BoxProps<"button">, "aria-checked" | "aria-disabled" | "aria-label" | "aria-labelledby" | "as" | "children" | "dangerouslySetInnerHTML" | "defaultChecked" | "disabled" | "role" | "tabIndex" | "type"> {
+    /**
+     * Not accepted: the label names the item
+     */
+    "aria-label"?: never;
+    /**
+     * Not accepted: the label names the item
+     */
+    "aria-labelledby"?: never;
+    /**
+     * Controls whether the item is checked. Without it, the item holds its own state, starting from `defaultChecked`.
+     */
+    checked?: boolean;
+    /**
+     * The label, which names the item
+     */
+    children: ReactNode;
+    /**
+     * Whether an uncontrolled item starts checked. Defaults to `false`.
+     */
+    defaultChecked?: boolean;
+    /**
+     * A line of muted text below the label, which describes the item
+     */
+    description?: ReactNode;
+    /**
+     * Whether the item cannot be toggled. It stays reachable with the arrow keys, so its label and state are read, but
+     * clicks, Enter and Space do nothing. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Not accepted: the check takes the icon's place
+     */
+    icon?: never;
+    /**
+     * Called with the new state when the user toggles the item
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * A keyboard shortcut shown after the label, such as "⇧⌘H". It is hidden from assistive technology: announce it with
+     * `aria-keyshortcuts`. The menu does not bind it.
+     */
+    shortcut?: string;
+}
+/**
+ * An option in a `Menu` that is on or off, shown by a check before its label. A click or Enter toggles it and closes
+ * every open menu; Space toggles it and leaves them open, so several can be set at once. Your `onClick` runs first, and
+ * calling `preventDefault()` in it keeps the menus open.
+ *
+ * @example
+ * <MenuItemCheckbox checked={showArchived} onCheckedChange={setShowArchived}>
+ *   Show archived
+ * </MenuItemCheckbox>
+ */
+export declare function MenuItemCheckbox({ checked, children, className, defaultChecked, description, disabled, onCheckedChange, onClick, shortcut, "aria-describedby": describedBy, ...rest }: MenuItemCheckboxProps): JSX.Element;

package/dist/components/Menu/MenuItemCheckbox.js

@@ -0,0 +1,37 @@
+import { Box as e } from "../Box/Box.js";
+import { CheckIcon as t } from "../Icon/CheckIcon.js";
+import n from "../MenuSurface/MenuSurface.module.js";
+import { useMenuContext as r } from "./useMenuContext.js";
+import { useMenuItemContent as i } from "./useMenuItemContent.js";
+import { clsx as a } from "clsx";
+import { useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+// src/components/Menu/MenuItemCheckbox.tsx
+function c({ checked: c, children: l, className: u, defaultChecked: d = !1, description: f, disabled: p = !1, onCheckedChange: m, onClick: h, shortcut: g, "aria-describedby": _, ...v }) {
+	let y = r("MenuItemCheckbox"), [b, x] = o(d), S = c ?? b, C = i({
+		describedBy: _,
+		description: f,
+		label: l,
+		leading: /* @__PURE__ */ s(t, {}),
+		trailing: g
+	});
+	function w(e) {
+		p || (h?.(e), c === void 0 && x(!S), m?.(!S), e.defaultPrevented || y.closeAfterChoosing());
+	}
+	return /* @__PURE__ */ s(e, {
+		...v,
+		as: "button",
+		className: a(n.item, u),
+		onClick: w,
+		role: "menuitemcheckbox",
+		tabIndex: -1,
+		type: "button",
+		"aria-checked": S,
+		"aria-describedby": C.describedBy,
+		"aria-disabled": p ? !0 : void 0,
+		"aria-labelledby": C.labelId,
+		"data-leading": !0,
+		children: C.content
+	});
+}
+export { c as MenuItemCheckbox };

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

@@ -0,0 +1,47 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `MenuItemRadio`: its own props plus every native button prop except those the menu pattern sets and the
+ * name its label gives it
+ */
+export interface MenuItemRadioProps extends Omit<BoxProps<"button">, "aria-checked" | "aria-disabled" | "aria-label" | "aria-labelledby" | "as" | "children" | "dangerouslySetInnerHTML" | "disabled" | "role" | "tabIndex" | "type" | "value"> {
+    /**
+     * Not accepted: the label names the item
+     */
+    "aria-label"?: never;
+    /**
+     * Not accepted: the label names the item
+     */
+    "aria-labelledby"?: never;
+    /**
+     * The label, which names the item
+     */
+    children: ReactNode;
+    /**
+     * A line of muted text below the label, which describes the item
+     */
+    description?: ReactNode;
+    /**
+     * Whether the item cannot be checked. It stays reachable with the arrow keys, so its label and state are read, but
+     * clicks, Enter and Space do nothing. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * A keyboard shortcut shown after the label, such as "⌘1". It is hidden from assistive technology: announce it with
+     * `aria-keyshortcuts`. The menu does not bind it.
+     */
+    shortcut?: string;
+    /**
+     * The value this item stands for in its `MenuRadioGroup`
+     */
+    value: string;
+}
+/**
+ * One choice in a `MenuRadioGroup`, shown checked by a dot before its label. A click or Enter checks it and closes
+ * every open menu; Space checks it and leaves them open. Your `onClick` runs first, and calling `preventDefault()` in
+ * it keeps the menus open.
+ *
+ * @example
+ * <MenuItemRadio value="name">Name</MenuItemRadio>
+ */
+export declare function MenuItemRadio({ children, className, description, disabled, onClick, shortcut, value, "aria-describedby": describedBy, ...rest }: MenuItemRadioProps): JSX.Element;

package/dist/components/Menu/MenuItemRadio.js

@@ -0,0 +1,39 @@
+import { Box as e } from "../Box/Box.js";
+import t from "../MenuSurface/MenuSurface.module.js";
+import { useMenuContext as n } from "./useMenuContext.js";
+import { useMenuItemContent as r } from "./useMenuItemContent.js";
+import { useMenuRadioGroupContext as i } from "./useMenuRadioGroupContext.js";
+import { clsx as a } from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+// src/components/Menu/MenuItemRadio.tsx
+function s({ children: s, className: c, description: l, disabled: u = !1, onClick: d, shortcut: f, value: p, "aria-describedby": m, ...h }) {
+	let g = n("MenuItemRadio"), _ = i("MenuItemRadio"), v = r({
+		describedBy: m,
+		description: l,
+		label: s,
+		leading: /* @__PURE__ */ o(e, {
+			as: "span",
+			className: t.radioDot
+		}),
+		trailing: f
+	});
+	function y(e) {
+		u || (d?.(e), _.select(p), e.defaultPrevented || g.closeAfterChoosing());
+	}
+	return /* @__PURE__ */ o(e, {
+		...h,
+		as: "button",
+		className: a(t.item, c),
+		onClick: y,
+		role: "menuitemradio",
+		tabIndex: -1,
+		type: "button",
+		"aria-checked": _.value === p,
+		"aria-describedby": v.describedBy,
+		"aria-disabled": u ? !0 : void 0,
+		"aria-labelledby": v.labelId,
+		"data-leading": !0,
+		children: v.content
+	});
+}
+export { s as MenuItemRadio };