@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Listbox/ListboxOption.js

@@ -0,0 +1,42 @@
+import { optionId as e } from "../../collections/optionId.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Listbox.module.js";
+import { useListboxContext as r } from "./useListboxContext.js";
+import { clsx as i } from "clsx";
+import { useEffectEvent as a, useLayoutEffect as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+// src/components/Listbox/ListboxOption.tsx
+function c({ className: c, disabled: l = !1, onClick: u, onDoubleClick: d, textValue: f, value: p, ...m }) {
+	let h = r("ListboxOption"), { setActiveValue: g } = h, _ = h.activeValue === p, v = h.selectedValue === p, y = a(h.claim);
+	o(() => {
+		if (_) return () => {
+			g((e) => e === p ? null : e);
+		};
+	}, [
+		_,
+		g,
+		p
+	]), o(() => {
+		v && y(p);
+	}, [v, p]);
+	function b(e) {
+		u?.(e), e.defaultPrevented || h.choose(e.currentTarget, p, l);
+	}
+	function x(e) {
+		d?.(e), !e.defaultPrevented && !l && h.act(p);
+	}
+	return /* @__PURE__ */ s(t, {
+		...m,
+		className: i(n.option, c),
+		id: e(h.baseId, p),
+		onClick: b,
+		onDoubleClick: x,
+		role: "option",
+		"aria-disabled": l ? !0 : void 0,
+		"aria-selected": v,
+		"data-active": _ ? "" : void 0,
+		"data-text-value": f,
+		"data-value": p
+	});
+}
+export { c as ListboxOption };

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

@@ -0,0 +1,4 @@
+export { Listbox } from "./Listbox";
+export type { ListboxProps } from "./Listbox";
+export { ListboxOption } from "./ListboxOption";
+export type { ListboxOptionProps } from "./ListboxOption";

package/dist/components/Listbox/useListbox.d.ts

@@ -0,0 +1,54 @@
+import type { FocusEvent, KeyboardEvent } from "react";
+import type { ListboxContextValue } from "./ListboxContext";
+interface UseListboxOptions {
+    /**
+     * The value selected at first when uncontrolled
+     */
+    defaultValue: string | null;
+    /**
+     * Called with an option's value when Enter or a double-click acts on it
+     */
+    onAction: ((value: string) => void) | undefined;
+    /**
+     * Called with the value of the option the user selects
+     */
+    onValueChange: ((value: string) => void) | undefined;
+    /**
+     * The selected value when controlled, or undefined when uncontrolled
+     */
+    value: string | null | undefined;
+}
+/**
+ * A listbox's state for its options, and the handlers for the listbox element
+ */
+export interface ListboxState extends ListboxContextValue {
+    /**
+     * Notes that focus has left, and forgets a press, so the next focus scrolls
+     */
+    handleBlur: () => void;
+    /**
+     * Makes the selected option, or the first, active as focus enters, and scrolls it into view unless a press or a
+     * click caused the focus
+     */
+    handleFocus: (event: FocusEvent<HTMLDivElement>) => void;
+    /**
+     * Handles the arrow keys, Home, End, Space, Enter and type-ahead
+     */
+    handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * Forgets a press the browser cancelled, so the next focus scrolls
+     */
+    handlePointerCancel: () => void;
+    /**
+     * Notes that a press has started, so the focus it causes does not scroll
+     */
+    handlePointerDown: () => void;
+}
+/**
+ * Holds a listbox's selection, controlled or uncontrolled, and its active option, and handles its keyboard
+ *
+ * @param options the selection props and callbacks
+ * @returns the state options read and the listbox element's handlers
+ */
+export declare function useListbox({ defaultValue, onAction, onValueChange, value }: UseListboxOptions): ListboxState;
+export {};

package/dist/components/Listbox/useListbox.js

@@ -0,0 +1,103 @@
+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";
+// src/components/Listbox/useListbox.ts
+var c = {
+	block: "nearest",
+	container: "nearest"
+};
+function l({ defaultValue: l, onAction: f, onValueChange: p, value: m }) {
+	let h = a(), g = o(null), _ = o(!1), v = o(null), y = o(null), [b, x] = s(l), [S, C] = s(null), w = m === void 0 ? b : m;
+	function T(e) {
+		e !== w && (m === void 0 && x(e), p?.(e));
+	}
+	function E(e, t) {
+		C(e[t].value), y.current = t;
+	}
+	function D(e, t) {
+		let n = e[t];
+		E(e, t), n.element.scrollIntoView(c), n.disabled || T(n.value);
+	}
+	function O(e) {
+		let t = v.current;
+		if (t === null) return;
+		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 = r(e.currentTarget);
+		if (t.length === 0) {
+			C(null), y.current = null;
+			return;
+		}
+		let n = Math.max(t.findIndex((e) => e.value === w), 0);
+		E(t, n), _.current || t[n].element.scrollIntoView(c);
+	}
+	function A() {
+		v.current = null, M();
+	}
+	function j() {
+		_.current = !0;
+	}
+	function M() {
+		_.current = !1;
+	}
+	function N(e) {
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		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, n, r) {
+		return e !== " " || t(g.current, r) ? !1 : (n !== void 0 && !n.disabled && T(n.value), !0);
+	}
+	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 r !== null && (D(t, r), !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);
+	}
+	function z(e, t, n) {
+		_.current = !0, e.closest("[role=\"listbox\"]")?.focus(), _.current = !1, O(t), n || T(t);
+	}
+	return {
+		act: R,
+		activeValue: S,
+		baseId: h,
+		choose: z,
+		claim: O,
+		handleBlur: A,
+		handleFocus: k,
+		handleKeyDown: N,
+		handlePointerCancel: M,
+		handlePointerDown: j,
+		selectedValue: w,
+		setActiveValue: C
+	};
+}
+function u(e, t, n) {
+	let r = e.findIndex((e) => e.value === t);
+	return r === -1 ? e.findIndex((e) => e.value === n) : r;
+}
+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;
+}
+export { l as useListbox };

package/dist/components/Listbox/useListboxContext.d.ts

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

package/dist/components/Listbox/useListboxContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { ListboxContext as t } from "./ListboxContext.js";
+import { useContext as n } from "react";
+// src/components/Listbox/useListboxContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Listbox");
+	return i;
+}
+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;