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

package/dist/Link.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BSqet8aO.cjs";
+import { a as TypographyProps } from "./index-K5exjvnX.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-ClZyaZrR.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-BTP7Ijwi.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 { Gt as PaperElevation, W as Theme } from "../index-DJ0f69wh.cjs";
+import "../index-BxVTIMnB.cjs";
+import { t as MenuItemValue } from "../MenuListContext-DKUOhNyw.cjs";
+import { n as MenuItemData } from "../index-CknoXDLQ.cjs";
+import { n as MenuCloseReason } from "../index-DWjz5ZzG.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 { Gt as PaperElevation, W as Theme } from "../index-CJhK7JND.mjs";
+import "../index-DaIIo5QU.mjs";
+import { t as MenuItemValue } from "../MenuListContext-x-7lH4CH.mjs";
+import { n as MenuItemData } from "../index-BkzZxHVj.mjs";
+import { n as MenuCloseReason } from "../index-DGnXJwLj.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 };

package/dist/Menu/ContextMenu.mjs

@@ -0,0 +1,145 @@
+import { o as styled } from "../src-DLGYOJMh.mjs";
+import { n as useDefaultProps, r as useTheme } from "../theme-Z9_QludW.mjs";
+import { o as MenuActivationContext, t as MenuList } from "../MenuList-B7msJ1IG.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "../MenuItem-DUn4IZKK.mjs";
+import { MenuItems } from "./MenuItems.mjs";
+import { Children, cloneElement, useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Menu/ContextMenu/ContextMenu.tsx
+const ContextMenuPaper = styled(MenuPaper, {
+	name: "ContextMenu",
+	slot: "paper",
+	label: "ContextMenuPaper"
+})();
+const ContextMenuRoot = 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 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 = 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 = useTheme();
+	const [point, setPoint] = useState(null);
+	const isOpen = point !== null;
+	const rootRef = useRef(null);
+	const surfaceRef = useRef(null);
+	const returnFocusRef = useRef(null);
+	const listId = useId();
+	const margin = Number.parseFloat(String(theme.space[marginThreshold]));
+	const menuContext = useMemo(() => ({
+		align: "start",
+		margin,
+		elevation,
+		layer
+	}), [
+		margin,
+		elevation,
+		layer
+	]);
+	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 = useCallback((event, reason) => {
+		setPoint(null);
+		onClose?.(event, reason);
+		if (reason !== "blur") returnFocusRef.current.focus();
+	}, [onClose]);
+	const handleActivate = 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 : Children.toArray(children).length > 0;
+	const rows = items ? /* @__PURE__ */ jsx(MenuItems, { items }) : children;
+	return /* @__PURE__ */ jsxs(ContextMenuRoot, {
+		ref: rootRef,
+		className,
+		"data-testid": dataTestid,
+		onBlur: handleBlur,
+		children: [/* @__PURE__ */ jsx(ContextMenuTarget, {
+			element: target,
+			onContextMenu: handleContextMenu,
+			onKeyDown: handleKeyDown
+		}), isOpen && /* @__PURE__ */ jsx(ContextMenuPaper, {
+			ref: surfaceRef,
+			elevation,
+			layer,
+			margin,
+			onKeyDown: handleSurfaceKeyDown,
+			children: /* @__PURE__ */ jsx(MenuContext.Provider, {
+				value: menuContext,
+				children: /* @__PURE__ */ jsx(MenuActivationContext.Provider, {
+					value: handleActivate,
+					children: /* @__PURE__ */ jsx(MenuList, {
+						id: listId,
+						"aria-label": ariaLabel,
+						shouldAutoFocus: true,
+						onSelect,
+						color,
+						textColor,
+						size,
+						dense,
+						width: "100%",
+						children: hasRows ? rows : emptyLabel != null && /* @__PURE__ */ jsx(MenuItem, {
+							disabled: true,
+							children: emptyLabel
+						})
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { ContextMenu };

package/dist/Menu/Menu.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Menu = require("../Menu-Cgg-sX4W.cjs");
+exports.Menu = require_Menu.Menu;

package/dist/Menu/Menu.d.cts

@@ -0,0 +1,2 @@
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "../index-DWjz5ZzG.cjs";
+export { Menu, type MenuAlign, MenuCloseReason, MenuProps, MenuStep };

package/dist/Menu/Menu.d.mts

@@ -0,0 +1,2 @@
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "../index-DGnXJwLj.mjs";
+export { Menu, type MenuAlign, MenuCloseReason, MenuProps, MenuStep };

package/dist/Menu/Menu.mjs

@@ -0,0 +1,2 @@
+import { t as Menu } from "../Menu-CrzHc_cn.mjs";
+export { Menu };

package/dist/Menu/MenuDivider.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-DU81aGy9.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Menu/MenuDivider/MenuDivider.tsx
+const MenuDividerRoot = require_src.styled("li", {
+	name: "MenuDivider",
+	label: "MenuDivider"
+})(({ theme }) => ({
+	listStyle: "none",
+	height: 0,
+	marginTop: theme.space[.5],
+	marginBottom: theme.space[.5],
+	borderTopWidth: theme.borderWidths.thin,
+	borderTopStyle: "solid",
+	borderTopColor: (0, require_src.src_exports.get)(theme, "border.light")
+}));
+/**
+* @description A `role="separator"` line between groups of rows in a `MenuList`. The
+* arrow keys pass over it.
+*/
+function MenuDivider({ className, "data-testid": dataTestid }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuDividerRoot, {
+		role: "separator",
+		className,
+		"data-testid": dataTestid
+	});
+}
+//#endregion
+exports.MenuDivider = MenuDivider;

package/dist/Menu/MenuDivider.d.cts

@@ -0,0 +1,12 @@
+//#region src/Menu/MenuDivider/MenuDivider.d.ts
+interface MenuDividerProps {
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `role="separator"` line between groups of rows in a `MenuList`. The
+ * arrow keys pass over it.
+ */
+declare function MenuDivider({ className, 'data-testid': dataTestid }: Readonly<MenuDividerProps>): import("react").JSX.Element;
+//#endregion
+export { MenuDivider, MenuDividerProps };

package/dist/Menu/MenuDivider.d.mts

@@ -0,0 +1,12 @@
+//#region src/Menu/MenuDivider/MenuDivider.d.ts
+interface MenuDividerProps {
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `role="separator"` line between groups of rows in a `MenuList`. The
+ * arrow keys pass over it.
+ */
+declare function MenuDivider({ className, 'data-testid': dataTestid }: Readonly<MenuDividerProps>): import("react").JSX.Element;
+//#endregion
+export { MenuDivider, MenuDividerProps };

package/dist/Menu/MenuDivider.mjs

@@ -0,0 +1,28 @@
+import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Menu/MenuDivider/MenuDivider.tsx
+const MenuDividerRoot = styled("li", {
+	name: "MenuDivider",
+	label: "MenuDivider"
+})(({ theme }) => ({
+	listStyle: "none",
+	height: 0,
+	marginTop: theme.space[.5],
+	marginBottom: theme.space[.5],
+	borderTopWidth: theme.borderWidths.thin,
+	borderTopStyle: "solid",
+	borderTopColor: (0, src_exports.get)(theme, "border.light")
+}));
+/**
+* @description A `role="separator"` line between groups of rows in a `MenuList`. The
+* arrow keys pass over it.
+*/
+function MenuDivider({ className, "data-testid": dataTestid }) {
+	return /* @__PURE__ */ jsx(MenuDividerRoot, {
+		role: "separator",
+		className,
+		"data-testid": dataTestid
+	});
+}
+//#endregion
+export { MenuDivider };

package/dist/Menu/MenuItems.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_MenuItem = require("../MenuItem-BTP7Ijwi.cjs");
+const require_Menu_MenuDivider = require("./MenuDivider.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Menu/MenuItems/MenuItems.tsx
+const isDivider = (item) => "type" in item && item.type === "divider";
+/**
+* @description Menu rows from data: each entry a `MenuItem` (its label as `label`, its
+* submenu as more entries) or `{ type: 'divider' }`. It renders the same rows JSX children
+* would, so the two behave alike - inside a `MenuList`, a `Menu` or a `ContextMenu`.
+*/
+function MenuItems({ items }) {
+	let dividers = 0;
+	return items.map((item, index) => {
+		if (isDivider(item)) {
+			dividers += 1;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu_MenuDivider.MenuDivider, {}, `divider-${dividers}`);
+		}
+		const { label, submenu, ...row } = item;
+		const submenuRows = submenu?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItems, { items: submenu }) : null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+			...row,
+			submenu: submenu === void 0 ? void 0 : submenuRows,
+			children: label
+		}, item.value ?? `row-${index}`);
+	});
+}
+//#endregion
+exports.MenuItems = MenuItems;

package/dist/Menu/MenuItems.d.cts

@@ -0,0 +1,2 @@
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "../index-CknoXDLQ.cjs";
+export { MenuDividerData, MenuItemData, MenuItemRowData, MenuItems, MenuItemsProps };

package/dist/Menu/MenuItems.d.mts

@@ -0,0 +1,2 @@
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "../index-BkzZxHVj.mjs";
+export { MenuDividerData, MenuItemData, MenuItemRowData, MenuItems, MenuItemsProps };

package/dist/Menu/MenuItems.mjs

@@ -0,0 +1,28 @@
+import { t as MenuItem } from "../MenuItem-DUn4IZKK.mjs";
+import { MenuDivider } from "./MenuDivider.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Menu/MenuItems/MenuItems.tsx
+const isDivider = (item) => "type" in item && item.type === "divider";
+/**
+* @description Menu rows from data: each entry a `MenuItem` (its label as `label`, its
+* submenu as more entries) or `{ type: 'divider' }`. It renders the same rows JSX children
+* would, so the two behave alike - inside a `MenuList`, a `Menu` or a `ContextMenu`.
+*/
+function MenuItems({ items }) {
+	let dividers = 0;
+	return items.map((item, index) => {
+		if (isDivider(item)) {
+			dividers += 1;
+			return /* @__PURE__ */ jsx(MenuDivider, {}, `divider-${dividers}`);
+		}
+		const { label, submenu, ...row } = item;
+		const submenuRows = submenu?.length ? /* @__PURE__ */ jsx(MenuItems, { items: submenu }) : null;
+		return /* @__PURE__ */ jsx(MenuItem, {
+			...row,
+			submenu: submenu === void 0 ? void 0 : submenuRows,
+			children: label
+		}, item.value ?? `row-${index}`);
+	});
+}
+//#endregion
+export { MenuItems };

package/dist/Menu/MenuList.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_MenuList = require("../MenuList-D4imLXAa.cjs");
+exports.MenuList = require_MenuList.MenuList;

package/dist/Menu/MenuList.d.cts

@@ -0,0 +1,38 @@
+import { W as Theme } from "../index-DJ0f69wh.cjs";
+import { t as MenuItemValue } from "../MenuListContext-DKUOhNyw.cjs";
+import { KeyboardEvent, ReactNode } from "react";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+//#region src/Menu/MenuList/MenuList.d.ts
+interface MenuListProps extends SpaceProps<Theme>, LayoutProps<Theme> {
+  /** `MenuItem` rows and `MenuDivider`s. */
+  children?: ReactNode;
+  /** Fired with a row's `value` when a row that has one is chosen. */
+  onSelect?: (value: MenuItemValue) => void;
+  /** Carry the arrow keys past the last row to the first, and back. Default: `true`. */
+  shouldWrap?: boolean;
+  /** Focus the selected row, or the first enabled one, on mount. Default: `false`. */
+  shouldAutoFocus?: boolean;
+  /** Accent color for every row - resolves to `theme.palette[color]`. A row's own value wins. */
+  color?: keyof Theme['palette'];
+  /** Base text color for every row - resolves against `theme.text`. A row's own value wins. */
+  textColor?: keyof Theme['text'];
+  /** Density token for every row - resolves against `theme.sizes`. A row's own value wins. */
+  size?: keyof Theme['sizes'];
+  /** Compact vertical padding for every row. */
+  dense?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A `role="menu"` list that owns the keyboard: the arrow keys, Home and End
+ * move focus between its own rows, skipping disabled ones; typing jumps to a row by its
+ * label. Rows are found in the DOM by their nearest `role="menu"`, so a nested submenu's
+ * rows are never this list's. Renders in place - `Menu` floats one next to a trigger.
+ */
+declare function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFocus, color, textColor, size, dense, onKeyDown, ...rest }: Readonly<MenuListProps>): import("react").JSX.Element;
+//#endregion
+export { type MenuItemValue, MenuList, MenuListProps };