@soroush.tech/design-system 2.0.0-rc.1 → 2.0.0-rc.2

package/dist/FormControl.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
 const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");

package/dist/FormControl.d.cts

@@ -1,5 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import { s as ViewProps } from "./index-nB94D7UM.cjs";
+import { Qt as ViewProps, V as Theme } from "./index-DmJ7yWWi.cjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {

package/dist/FormControl.d.mts

@@ -1,5 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import { s as ViewProps } from "./index-cuv3o-L7.mjs";
+import { Qt as ViewProps, V as Theme } from "./index-CVNJEUwJ.mjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {

package/dist/FormControl.mjs

@@ -1,7 +1,7 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
 import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
 import { useContext, useId, useMemo, useState } from "react";

package/dist/FormHelperText.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BSqet8aO.cjs";
+import { a as TypographyProps } from "./index-IdMqR82e.cjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormHelperText.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-smqjMLAZ.mjs";
+import { a as TypographyProps } from "./index-BSA6SKao.mjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormLabel.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BSqet8aO.cjs";
+import { a as TypographyProps } from "./index-IdMqR82e.cjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {

package/dist/FormLabel.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-smqjMLAZ.mjs";
+import { a as TypographyProps } from "./index-BSA6SKao.mjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {

package/dist/Grid.d.cts

@@ -1,6 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { s as ViewProps } from "./index-nB94D7UM.cjs";
+import { Qt as ViewProps, V as Theme } from "./index-DmJ7yWWi.cjs";
 import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } from "@soroush.tech/styled-system";
 //#region src/Grid/Grid.d.ts
 /** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */

package/dist/Grid.d.mts

@@ -1,6 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { s as ViewProps } from "./index-cuv3o-L7.mjs";
+import { Qt as ViewProps, V as Theme } from "./index-CVNJEUwJ.mjs";
 import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } from "@soroush.tech/styled-system";
 //#region src/Grid/Grid.d.ts
 /** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */

package/dist/{Icon-CI6q2Eyi.cjs → Icon-Cvuhp9ek.cjs}

@@ -1,6 +1,6 @@
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
@@ -535,6 +535,15 @@ const SvgMenu = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" })
 });
 //#endregion
+//#region src/Icon/icons/MoreHoriz.tsx
+const SvgMoreHoriz = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" })
+});
+//#endregion
 //#region src/Icon/icons/Neurology.tsx
 const SvgNeurology = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	viewBox: "0 -960 960 960",
@@ -764,6 +773,7 @@ const icons = {
 	link: SvgLink,
 	lock: SvgLock,
 	menu: SvgMenu,
+	more_horiz: SvgMoreHoriz,
 	neurology: SvgNeurology,
 	psychology: SvgPsychology,
 	rebase_edit: SvgRebaseEdit,
@@ -802,7 +812,7 @@ const StyledIcon = require_src.styled("svg", {
 })({ fill: "currentColor" });
 function Icon({ name, color, size, ...rest }) {
 	const theme = require_theme.useTheme();
-	const resolvedSize = size ?? theme.icon[require_themeDefault.themeDefault(theme, "iconSize", "lg")];
+	const resolvedSize = (typeof size === "string" && Object.hasOwn(theme.icon, size) ? theme.icon[size] : size) ?? theme.icon[require_themeDefault.themeDefault(theme, "iconSize", "lg")];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon, {
 		as: icons[name],
 		color: color ?? require_themeDefault.themeDefault(theme, "accentTextColor", "primary"),

package/dist/{Icon-CH3asUJu.mjs → Icon-DlheCTJb.mjs}

@@ -1,6 +1,6 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Icon/icons/AccountTree.tsx
@@ -534,6 +534,15 @@ const SvgMenu = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" })
 });
 //#endregion
+//#region src/Icon/icons/MoreHoriz.tsx
+const SvgMoreHoriz = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" })
+});
+//#endregion
 //#region src/Icon/icons/Neurology.tsx
 const SvgNeurology = (props) => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 -960 960 960",
@@ -763,6 +772,7 @@ const icons = {
 	link: SvgLink,
 	lock: SvgLock,
 	menu: SvgMenu,
+	more_horiz: SvgMoreHoriz,
 	neurology: SvgNeurology,
 	psychology: SvgPsychology,
 	rebase_edit: SvgRebaseEdit,
@@ -801,7 +811,7 @@ const StyledIcon = styled("svg", {
 })({ fill: "currentColor" });
 function Icon({ name, color, size, ...rest }) {
 	const theme = useTheme();
-	const resolvedSize = size ?? theme.icon[themeDefault(theme, "iconSize", "lg")];
+	const resolvedSize = (typeof size === "string" && Object.hasOwn(theme.icon, size) ? theme.icon[size] : size) ?? theme.icon[themeDefault(theme, "iconSize", "lg")];
 	return /* @__PURE__ */ jsx(StyledIcon, {
 		as: icons[name],
 		color: color ?? themeDefault(theme, "accentTextColor", "primary"),

package/dist/Icon.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Icon = require("./Icon-CI6q2Eyi.cjs");
+const require_Icon = require("./Icon-Cvuhp9ek.cjs");
 exports.Icon = require_Icon.Icon;
 exports.icons = require_Icon.icons;

package/dist/Icon.d.cts

@@ -1,2 +1,2 @@
-import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-Ctqajtac.cjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-qlfNErNd.cjs";
 export { Icon, type IconName, IconProps, icons };

package/dist/Icon.d.mts

@@ -1,2 +1,2 @@
-import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-DO9J-Fla.mjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-BqpS_Huq.mjs";
 export { Icon, type IconName, IconProps, icons };

package/dist/Icon.mjs

@@ -1,2 +1,2 @@
-import { n as icons, t as Icon } from "./Icon-CH3asUJu.mjs";
+import { n as icons, t as Icon } from "./Icon-DlheCTJb.mjs";
 export { Icon, icons };

package/dist/Image.d.cts

@@ -1,5 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
+import { V as Theme } from "./index-DmJ7yWWi.cjs";
 import { CSSProperties, ImgHTMLAttributes } from "react";
 import { BackgroundProps, LayoutProps, PositionProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Image/Image.d.ts

package/dist/Image.d.mts

@@ -1,5 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
+import { V as Theme } from "./index-CVNJEUwJ.mjs";
 import { BackgroundProps, LayoutProps, PositionProps, SpaceProps } from "@soroush.tech/styled-system";
 import { CSSProperties, ImgHTMLAttributes } from "react";
 //#region src/Image/Image.d.ts

package/dist/LinearProgress.d.cts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as ButtonColor } from "./index-BhibLnZ0.cjs";
+import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { n as ButtonColor } from "./index-XxydXX8l.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/LinearProgress/LinearProgress.d.ts

package/dist/LinearProgress.d.mts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as ButtonColor } from "./index-DXvQ-JVZ.mjs";
+import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { n as ButtonColor } from "./index-Bxd9NOWb.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/LinearProgress/LinearProgress.d.ts

package/dist/Link.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_Typography = require("./Typography.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Link.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BSqet8aO.cjs";
+import { a as TypographyProps } from "./index-IdMqR82e.cjs";
 import { AnchorHTMLAttributes } from "react";
 //#region src/Link/Link.d.ts
 type LinkUnderline = 'always' | 'hover' | 'none';

package/dist/Link.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-smqjMLAZ.mjs";
+import { a as TypographyProps } from "./index-BSA6SKao.mjs";
 import { AnchorHTMLAttributes } from "react";
 //#region src/Link/Link.d.ts
 type LinkUnderline = 'always' | 'hover' | 'none';

package/dist/Link.mjs

@@ -1,6 +1,6 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import { Typography } from "./Typography.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/Menu/ContextMenu.cjs

@@ -0,0 +1,146 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-DU81aGy9.cjs");
+const require_theme = require("../theme-BxXuXRgQ.cjs");
+const require_MenuList = require("../MenuList-D4imLXAa.cjs");
+const require_MenuItem = require("../MenuItem-CfdN4axw.cjs");
+const require_Menu_MenuItems = require("./MenuItems.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Menu/ContextMenu/ContextMenu.tsx
+const ContextMenuPaper = require_src.styled(require_MenuItem.MenuPaper, {
+	name: "ContextMenu",
+	slot: "paper",
+	label: "ContextMenuPaper"
+})();
+const ContextMenuRoot = require_src.styled("div", {
+	name: "ContextMenu",
+	label: "ContextMenu"
+})({ display: "contents" });
+const isMenuKey = (event) => event.key === "ContextMenu" || event.key === "F10" && event.shiftKey;
+/** The element given, listening for a right-click and the context-menu keys. */
+function ContextMenuTarget({ element, onContextMenu, onKeyDown }) {
+	return (0, react.cloneElement)(element, {
+		onContextMenu,
+		onKeyDown
+	});
+}
+/**
+* @description A `MenuList` opened at the pointer by a right-click over its target, or at
+* the focused element by the context-menu key or Shift+F10. It is placed and closes as
+* `Menu` does - Escape, a chosen row or focus leaving - and gives focus back to where it
+* was. The browser's own menu is held back only when this one opens.
+*/
+function ContextMenu({ target, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, "aria-label": ariaLabel, className, "data-testid": dataTestid }) {
+	const dp = require_theme.useDefaultProps("ContextMenu");
+	const marginThreshold = marginThresholdProp ?? dp.marginThreshold ?? 2;
+	const elevation = elevationProp ?? dp.elevation ?? 8;
+	const layer = layerProp ?? dp.layer ?? "modal";
+	const color = colorProp ?? dp.color;
+	const textColor = textColorProp ?? dp.textColor;
+	const size = sizeProp ?? dp.size;
+	const dense = denseProp ?? dp.dense;
+	const theme = require_theme.useTheme();
+	const [point, setPoint] = (0, react.useState)(null);
+	const isOpen = point !== null;
+	const rootRef = (0, react.useRef)(null);
+	const surfaceRef = (0, react.useRef)(null);
+	const returnFocusRef = (0, react.useRef)(null);
+	const listId = (0, react.useId)();
+	const margin = Number.parseFloat(String(theme.space[marginThreshold]));
+	const menuContext = (0, react.useMemo)(() => ({
+		align: "start",
+		margin,
+		elevation,
+		layer
+	}), [
+		margin,
+		elevation,
+		layer
+	]);
+	require_MenuItem.useMenuPlacement({
+		isOpen,
+		anchorRef: rootRef,
+		anchorPosition: point,
+		surfaceRef,
+		placement: "below",
+		align: "start",
+		margin
+	});
+	const openAt = (top, left) => {
+		returnFocusRef.current = document.activeElement;
+		setPoint({
+			top,
+			left
+		});
+	};
+	const close = (0, react.useCallback)((event, reason) => {
+		setPoint(null);
+		onClose?.(event, reason);
+		if (reason !== "blur") returnFocusRef.current.focus();
+	}, [onClose]);
+	const handleActivate = (0, react.useCallback)((_value, event) => close(event, "select"), [close]);
+	const handleContextMenu = (event) => {
+		target.props.onContextMenu?.(event);
+		event.preventDefault();
+		openAt(event.clientY, event.clientX);
+	};
+	const handleKeyDown = (event) => {
+		target.props.onKeyDown?.(event);
+		if (!isMenuKey(event)) return;
+		event.preventDefault();
+		const { bottom, left } = event.target.getBoundingClientRect();
+		openAt(bottom, left);
+	};
+	const handleSurfaceKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close(event, "escapeKey");
+		}
+	};
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		if (isOpen && !event.currentTarget.contains(next)) close(event, "blur");
+	};
+	const hasRows = items ? items.length > 0 : react.Children.toArray(children).length > 0;
+	const rows = items ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu_MenuItems.MenuItems, { items }) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContextMenuRoot, {
+		ref: rootRef,
+		className,
+		"data-testid": dataTestid,
+		onBlur: handleBlur,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuTarget, {
+			element: target,
+			onContextMenu: handleContextMenu,
+			onKeyDown: handleKeyDown
+		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuPaper, {
+			ref: surfaceRef,
+			elevation,
+			layer,
+			margin,
+			onKeyDown: handleSurfaceKeyDown,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuContext.Provider, {
+				value: menuContext,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuActivationContext.Provider, {
+					value: handleActivate,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuList.MenuList, {
+						id: listId,
+						"aria-label": ariaLabel,
+						shouldAutoFocus: true,
+						onSelect,
+						color,
+						textColor,
+						size,
+						dense,
+						width: "100%",
+						children: hasRows ? rows : emptyLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+							disabled: true,
+							children: emptyLabel
+						})
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+exports.ContextMenu = ContextMenu;

package/dist/Menu/ContextMenu.d.cts

@@ -0,0 +1,52 @@
+import { V as Theme, Vt as PaperElevation } from "../index-DmJ7yWWi.cjs";
+import "../index-DBteSahY.cjs";
+import { t as MenuItemValue } from "../MenuListContext-vujGcRk9.cjs";
+import { n as MenuItemData } from "../index-DQcnJ5H4.cjs";
+import { n as MenuCloseReason } from "../index-CWnbCxgw.cjs";
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, SyntheticEvent } from "react";
+//#region src/Menu/ContextMenu/ContextMenu.d.ts
+interface TargetProps {
+  onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+}
+interface ContextMenuProps {
+  /** The element whose right-click opens the menu - the canvas, a row, a card. Its own `onContextMenu` / `onKeyDown` still run. */
+  target: ReactElement<TargetProps>;
+  /** `MenuItem` rows and `MenuDivider`s. */
+  children?: ReactNode;
+  /** The rows as data, in place of `children`. */
+  items?: readonly MenuItemData[];
+  /** Fired when the menu asks to close, with why. */
+  onClose?: (event: SyntheticEvent, reason: MenuCloseReason) => void;
+  /** Fired with a row's `value` when a row that has one is chosen. */
+  onSelect?: (value: MenuItemValue) => void;
+  /** The least room between the list and the window's edge - a `theme.space` key. Default: `2`. */
+  marginThreshold?: keyof Theme['space'];
+  /** Shadow depth of the surface. Default: `8`. */
+  elevation?: PaperElevation;
+  /** Stacking layer from `theme.zOrder`. Default: `'modal'`. */
+  layer?: keyof Theme['zOrder'];
+  /** Shown as one disabled row when the menu has no rows. Without it, the list stays empty. */
+  emptyLabel?: ReactNode;
+  /** Accent color for every row - resolves to `theme.palette[color]`. */
+  color?: keyof Theme['palette'];
+  /** Base text color for every row - resolves against `theme.text`. */
+  textColor?: keyof Theme['text'];
+  /** Density token for every row - resolves against `theme.sizes`. */
+  size?: keyof Theme['sizes'];
+  /** Compact vertical padding for every row. */
+  dense?: boolean;
+  /** Names the list. */
+  'aria-label'?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `MenuList` opened at the pointer by a right-click over its target, or at
+ * the focused element by the context-menu key or Shift+F10. It is placed and closes as
+ * `Menu` does - Escape, a chosen row or focus leaving - and gives focus back to where it
+ * was. The browser's own menu is held back only when this one opens.
+ */
+declare function ContextMenu({ target, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
+//#endregion
+export { ContextMenu, ContextMenuProps };

package/dist/Menu/ContextMenu.d.mts

@@ -0,0 +1,52 @@
+import { V as Theme, Vt as PaperElevation } from "../index-CVNJEUwJ.mjs";
+import "../index-_G1osn09.mjs";
+import { t as MenuItemValue } from "../MenuListContext-Dml16k0X.mjs";
+import { n as MenuItemData } from "../index-C3KrFPCj.mjs";
+import { n as MenuCloseReason } from "../index-DckSub2J.mjs";
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, SyntheticEvent } from "react";
+//#region src/Menu/ContextMenu/ContextMenu.d.ts
+interface TargetProps {
+  onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+}
+interface ContextMenuProps {
+  /** The element whose right-click opens the menu - the canvas, a row, a card. Its own `onContextMenu` / `onKeyDown` still run. */
+  target: ReactElement<TargetProps>;
+  /** `MenuItem` rows and `MenuDivider`s. */
+  children?: ReactNode;
+  /** The rows as data, in place of `children`. */
+  items?: readonly MenuItemData[];
+  /** Fired when the menu asks to close, with why. */
+  onClose?: (event: SyntheticEvent, reason: MenuCloseReason) => void;
+  /** Fired with a row's `value` when a row that has one is chosen. */
+  onSelect?: (value: MenuItemValue) => void;
+  /** The least room between the list and the window's edge - a `theme.space` key. Default: `2`. */
+  marginThreshold?: keyof Theme['space'];
+  /** Shadow depth of the surface. Default: `8`. */
+  elevation?: PaperElevation;
+  /** Stacking layer from `theme.zOrder`. Default: `'modal'`. */
+  layer?: keyof Theme['zOrder'];
+  /** Shown as one disabled row when the menu has no rows. Without it, the list stays empty. */
+  emptyLabel?: ReactNode;
+  /** Accent color for every row - resolves to `theme.palette[color]`. */
+  color?: keyof Theme['palette'];
+  /** Base text color for every row - resolves against `theme.text`. */
+  textColor?: keyof Theme['text'];
+  /** Density token for every row - resolves against `theme.sizes`. */
+  size?: keyof Theme['sizes'];
+  /** Compact vertical padding for every row. */
+  dense?: boolean;
+  /** Names the list. */
+  'aria-label'?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `MenuList` opened at the pointer by a right-click over its target, or at
+ * the focused element by the context-menu key or Shift+F10. It is placed and closes as
+ * `Menu` does - Escape, a chosen row or focus leaving - and gives focus back to where it
+ * was. The browser's own menu is held back only when this one opens.
+ */
+declare function ContextMenu({ target, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
+//#endregion
+export { ContextMenu, ContextMenuProps };