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

package/dist/computePopoverPosition-BIprs_xo.mjs

@@ -0,0 +1,123 @@
+//#region src/Popover/utils/getOffset.ts
+/** Vertical offset within a rect for an anchor/transform origin keyword or explicit px. */
+function getOffsetTop(rect, vertical) {
+	if (typeof vertical === "number") return vertical;
+	if (vertical === "center") return rect.height / 2;
+	if (vertical === "bottom") return rect.height;
+	return 0;
+}
+/** Horizontal offset within a rect for an anchor/transform origin keyword or explicit px. */
+function getOffsetLeft(rect, horizontal) {
+	if (typeof horizontal === "number") return horizontal;
+	if (horizontal === "center") return rect.width / 2;
+	if (horizontal === "right") return rect.width;
+	return 0;
+}
+//#endregion
+//#region src/Popover/utils/getTransformOriginValue.ts
+/** Serializes a resolved transform origin (in px) to a CSS `transform-origin` value. */
+function getTransformOriginValue(origin) {
+	return `${origin.horizontal}px ${origin.vertical}px`;
+}
+//#endregion
+//#region src/Popover/utils/computePopoverPosition.ts
+/** Mirrors a keyword origin to the opposite edge; numbers and `center` are unchanged. */
+function flipVertical(origin) {
+	if (origin === "top") return "bottom";
+	if (origin === "bottom") return "top";
+	return origin;
+}
+function flipHorizontal(origin) {
+	if (origin === "left") return "right";
+	if (origin === "right") return "left";
+	return origin;
+}
+function resolveAxis({ anchorStart, anchorSize, anchorOrigin, transformOrigin, paperSize, viewportSize, margin, offset, flip }) {
+	const preferredTransform = offset(paperSize, transformOrigin);
+	const preferredPosition = anchorStart + offset(anchorSize, anchorOrigin) - preferredTransform;
+	let position = preferredPosition;
+	let transformOffset = preferredTransform;
+	if (margin != null) {
+		const fits = (candidate) => candidate >= margin && candidate + paperSize <= viewportSize - margin;
+		if (!fits(preferredPosition)) {
+			const flippedTransform = offset(paperSize, flip(transformOrigin));
+			const flippedPosition = anchorStart + offset(anchorSize, flip(anchorOrigin)) - flippedTransform;
+			if (fits(flippedPosition)) {
+				position = flippedPosition;
+				transformOffset = flippedTransform;
+			}
+		}
+		if (position < margin) {
+			const diff = position - margin;
+			position -= diff;
+			transformOffset += diff;
+		} else if (position + paperSize > viewportSize - margin) {
+			const diff = position + paperSize - (viewportSize - margin);
+			position -= diff;
+			transformOffset += diff;
+		}
+	}
+	return {
+		position,
+		transformOffset
+	};
+}
+/**
+* Places the paper so its `transformOrigin` meets the anchor's `anchorOrigin`, flipping
+* to the opposite side at a viewport edge and clamping as a fallback. Returns `null`
+* coordinates for `anchorReference === 'none'`.
+*/
+function computePopoverPosition(params) {
+	const { anchorReference, anchorRect, anchorPosition, paperRect, anchorOrigin, transformOrigin, viewport, marginThreshold } = params;
+	if (anchorReference === "none") return {
+		top: null,
+		left: null,
+		transformOrigin: getTransformOriginValue({
+			vertical: getOffsetTop(paperRect, transformOrigin.vertical),
+			horizontal: getOffsetLeft(paperRect, transformOrigin.horizontal)
+		})
+	};
+	const rect = anchorReference === "anchorPosition" ? {
+		top: anchorPosition?.top ?? 0,
+		left: anchorPosition?.left ?? 0,
+		width: 0,
+		height: 0
+	} : anchorRect ?? {
+		top: 0,
+		left: 0,
+		width: 0,
+		height: 0
+	};
+	const vertical = resolveAxis({
+		anchorStart: rect.top,
+		anchorSize: rect.height,
+		anchorOrigin: anchorOrigin.vertical,
+		transformOrigin: transformOrigin.vertical,
+		paperSize: paperRect.height,
+		viewportSize: viewport.height,
+		margin: marginThreshold,
+		offset: (size, origin) => getOffsetTop({ height: size }, origin),
+		flip: (origin) => flipVertical(origin)
+	});
+	const horizontal = resolveAxis({
+		anchorStart: rect.left,
+		anchorSize: rect.width,
+		anchorOrigin: anchorOrigin.horizontal,
+		transformOrigin: transformOrigin.horizontal,
+		paperSize: paperRect.width,
+		viewportSize: viewport.width,
+		margin: marginThreshold,
+		offset: (size, origin) => getOffsetLeft({ width: size }, origin),
+		flip: (origin) => flipHorizontal(origin)
+	});
+	return {
+		top: Math.floor(vertical.position),
+		left: Math.floor(horizontal.position),
+		transformOrigin: getTransformOriginValue({
+			vertical: vertical.transformOffset,
+			horizontal: horizontal.transformOffset
+		})
+	};
+}
+//#endregion
+export { computePopoverPosition as t };

package/dist/computePopoverPosition-DiyEOHnU.cjs

@@ -0,0 +1,128 @@
+//#region src/Popover/utils/getOffset.ts
+/** Vertical offset within a rect for an anchor/transform origin keyword or explicit px. */
+function getOffsetTop(rect, vertical) {
+	if (typeof vertical === "number") return vertical;
+	if (vertical === "center") return rect.height / 2;
+	if (vertical === "bottom") return rect.height;
+	return 0;
+}
+/** Horizontal offset within a rect for an anchor/transform origin keyword or explicit px. */
+function getOffsetLeft(rect, horizontal) {
+	if (typeof horizontal === "number") return horizontal;
+	if (horizontal === "center") return rect.width / 2;
+	if (horizontal === "right") return rect.width;
+	return 0;
+}
+//#endregion
+//#region src/Popover/utils/getTransformOriginValue.ts
+/** Serializes a resolved transform origin (in px) to a CSS `transform-origin` value. */
+function getTransformOriginValue(origin) {
+	return `${origin.horizontal}px ${origin.vertical}px`;
+}
+//#endregion
+//#region src/Popover/utils/computePopoverPosition.ts
+/** Mirrors a keyword origin to the opposite edge; numbers and `center` are unchanged. */
+function flipVertical(origin) {
+	if (origin === "top") return "bottom";
+	if (origin === "bottom") return "top";
+	return origin;
+}
+function flipHorizontal(origin) {
+	if (origin === "left") return "right";
+	if (origin === "right") return "left";
+	return origin;
+}
+function resolveAxis({ anchorStart, anchorSize, anchorOrigin, transformOrigin, paperSize, viewportSize, margin, offset, flip }) {
+	const preferredTransform = offset(paperSize, transformOrigin);
+	const preferredPosition = anchorStart + offset(anchorSize, anchorOrigin) - preferredTransform;
+	let position = preferredPosition;
+	let transformOffset = preferredTransform;
+	if (margin != null) {
+		const fits = (candidate) => candidate >= margin && candidate + paperSize <= viewportSize - margin;
+		if (!fits(preferredPosition)) {
+			const flippedTransform = offset(paperSize, flip(transformOrigin));
+			const flippedPosition = anchorStart + offset(anchorSize, flip(anchorOrigin)) - flippedTransform;
+			if (fits(flippedPosition)) {
+				position = flippedPosition;
+				transformOffset = flippedTransform;
+			}
+		}
+		if (position < margin) {
+			const diff = position - margin;
+			position -= diff;
+			transformOffset += diff;
+		} else if (position + paperSize > viewportSize - margin) {
+			const diff = position + paperSize - (viewportSize - margin);
+			position -= diff;
+			transformOffset += diff;
+		}
+	}
+	return {
+		position,
+		transformOffset
+	};
+}
+/**
+* Places the paper so its `transformOrigin` meets the anchor's `anchorOrigin`, flipping
+* to the opposite side at a viewport edge and clamping as a fallback. Returns `null`
+* coordinates for `anchorReference === 'none'`.
+*/
+function computePopoverPosition(params) {
+	const { anchorReference, anchorRect, anchorPosition, paperRect, anchorOrigin, transformOrigin, viewport, marginThreshold } = params;
+	if (anchorReference === "none") return {
+		top: null,
+		left: null,
+		transformOrigin: getTransformOriginValue({
+			vertical: getOffsetTop(paperRect, transformOrigin.vertical),
+			horizontal: getOffsetLeft(paperRect, transformOrigin.horizontal)
+		})
+	};
+	const rect = anchorReference === "anchorPosition" ? {
+		top: anchorPosition?.top ?? 0,
+		left: anchorPosition?.left ?? 0,
+		width: 0,
+		height: 0
+	} : anchorRect ?? {
+		top: 0,
+		left: 0,
+		width: 0,
+		height: 0
+	};
+	const vertical = resolveAxis({
+		anchorStart: rect.top,
+		anchorSize: rect.height,
+		anchorOrigin: anchorOrigin.vertical,
+		transformOrigin: transformOrigin.vertical,
+		paperSize: paperRect.height,
+		viewportSize: viewport.height,
+		margin: marginThreshold,
+		offset: (size, origin) => getOffsetTop({ height: size }, origin),
+		flip: (origin) => flipVertical(origin)
+	});
+	const horizontal = resolveAxis({
+		anchorStart: rect.left,
+		anchorSize: rect.width,
+		anchorOrigin: anchorOrigin.horizontal,
+		transformOrigin: transformOrigin.horizontal,
+		paperSize: paperRect.width,
+		viewportSize: viewport.width,
+		margin: marginThreshold,
+		offset: (size, origin) => getOffsetLeft({ width: size }, origin),
+		flip: (origin) => flipHorizontal(origin)
+	});
+	return {
+		top: Math.floor(vertical.position),
+		left: Math.floor(horizontal.position),
+		transformOrigin: getTransformOriginValue({
+			vertical: vertical.transformOffset,
+			horizontal: horizontal.transformOffset
+		})
+	};
+}
+//#endregion
+Object.defineProperty(exports, "computePopoverPosition", {
+	enumerable: true,
+	get: function() {
+		return computePopoverPosition;
+	}
+});

package/dist/dividerLine-BNljcGlv.cjs

@@ -0,0 +1,66 @@
+const require_src = require("./src-DU81aGy9.cjs");
+let react = require("react");
+//#region src/Tabs/TabsContext.ts
+const TabsContext = (0, react.createContext)(null);
+/** Each tab's position among its siblings - its value when it has none of its own. */
+const TabIndexContext = (0, react.createContext)(0);
+function useTabsContext() {
+	const tabs = (0, react.useContext)(TabsContext);
+	if (!tabs) throw new Error("A Tab must be inside Tabs.");
+	return tabs;
+}
+//#endregion
+//#region src/Tabs/utils/dividerLine.ts
+/**
+* The divider - the line along a row of tabs' foot, a column's end side - as an inset shadow,
+* so it adds no size and runs unbroken across the pieces that each draw a stretch of it.
+*/
+const getDividerShadow = (theme, isVertical, color) => {
+	const thin = theme.borderWidths.thin;
+	return `inset ${isVertical ? `-${thin} 0` : `0 -${thin}`} 0 ${color}`;
+};
+/** The divider's color: the accent in the enclosed look, which outlines the tab in it too. */
+const getDividerColor = (theme, variant, color) => variant === "enclosed" ? (0, require_src.src_exports.get)(theme, `palette.${color}.main`) : (0, require_src.src_exports.get)(theme, "border.light");
+/**
+* The stretch of the divider an enclosed row's piece draws - its content, a scroll button, an
+* end of the list. The enclosed look draws the line piece by piece, so the selected tab can
+* leave its own piece out.
+*/
+const getEnclosedPieceStyle = (theme, { variant, color, orientation, hasDivider }) => hasDivider && variant === "enclosed" ? { boxShadow: getDividerShadow(theme, orientation === "vertical", getDividerColor(theme, variant, color)) } : {};
+//#endregion
+Object.defineProperty(exports, "TabIndexContext", {
+	enumerable: true,
+	get: function() {
+		return TabIndexContext;
+	}
+});
+Object.defineProperty(exports, "TabsContext", {
+	enumerable: true,
+	get: function() {
+		return TabsContext;
+	}
+});
+Object.defineProperty(exports, "getDividerColor", {
+	enumerable: true,
+	get: function() {
+		return getDividerColor;
+	}
+});
+Object.defineProperty(exports, "getDividerShadow", {
+	enumerable: true,
+	get: function() {
+		return getDividerShadow;
+	}
+});
+Object.defineProperty(exports, "getEnclosedPieceStyle", {
+	enumerable: true,
+	get: function() {
+		return getEnclosedPieceStyle;
+	}
+});
+Object.defineProperty(exports, "useTabsContext", {
+	enumerable: true,
+	get: function() {
+		return useTabsContext;
+	}
+});

package/dist/dividerLine-FahY-M6_.mjs

@@ -0,0 +1,31 @@
+import { a as src_exports } from "./src-DLGYOJMh.mjs";
+import { createContext, useContext } from "react";
+//#region src/Tabs/TabsContext.ts
+const TabsContext = createContext(null);
+/** Each tab's position among its siblings - its value when it has none of its own. */
+const TabIndexContext = createContext(0);
+function useTabsContext() {
+	const tabs = useContext(TabsContext);
+	if (!tabs) throw new Error("A Tab must be inside Tabs.");
+	return tabs;
+}
+//#endregion
+//#region src/Tabs/utils/dividerLine.ts
+/**
+* The divider - the line along a row of tabs' foot, a column's end side - as an inset shadow,
+* so it adds no size and runs unbroken across the pieces that each draw a stretch of it.
+*/
+const getDividerShadow = (theme, isVertical, color) => {
+	const thin = theme.borderWidths.thin;
+	return `inset ${isVertical ? `-${thin} 0` : `0 -${thin}`} 0 ${color}`;
+};
+/** The divider's color: the accent in the enclosed look, which outlines the tab in it too. */
+const getDividerColor = (theme, variant, color) => variant === "enclosed" ? (0, src_exports.get)(theme, `palette.${color}.main`) : (0, src_exports.get)(theme, "border.light");
+/**
+* The stretch of the divider an enclosed row's piece draws - its content, a scroll button, an
+* end of the list. The enclosed look draws the line piece by piece, so the selected tab can
+* leave its own piece out.
+*/
+const getEnclosedPieceStyle = (theme, { variant, color, orientation, hasDivider }) => hasDivider && variant === "enclosed" ? { boxShadow: getDividerShadow(theme, orientation === "vertical", getDividerColor(theme, variant, color)) } : {};
+//#endregion
+export { TabsContext as a, TabIndexContext as i, getDividerShadow as n, useTabsContext as o, getEnclosedPieceStyle as r, getDividerColor as t };

package/dist/engine.d.cts

@@ -1,4 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
 import { CacheProvider, Interpolation } from "@emotion/react";
 import { ComponentType, RefAttributes } from "react";
 //#region src/theme/emotion.d.ts

package/dist/engine.d.mts

@@ -1,4 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
 import { CacheProvider, Interpolation } from "@emotion/react";
 import { ComponentType, RefAttributes } from "react";
 //#region src/theme/emotion.d.ts

package/dist/index-B1RFybA_.d.mts

@@ -0,0 +1,72 @@
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { t as MenuItemValue } from "./MenuListContext-x-7lH4CH.mjs";
+import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
+//#region src/MenuItem/MenuItem.d.ts
+type MenuItemColor = keyof Theme['palette'];
+type MenuItemSize = keyof Theme['sizes'];
+type MenuItemTextColor = keyof Theme['text'];
+/** A menu row's role: a command, the current choice of a group, or an on/off setting. */
+type MenuItemRole = 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
+interface MenuItemProps {
+  /** The value this row represents - reported to `Select`'s `onChange`, or `MenuList`'s `onSelect`. Required inside a `Select`. */
+  value?: MenuItemValue;
+  /** The row label. */
+  children: ReactNode;
+  /** The element used for the root node - a tag name or a component. Default: `'li'`. */
+  as?: ElementType;
+  /** Disables the row - it cannot be highlighted or chosen. In a menu the keys skip it. */
+  disabled?: boolean;
+  /** Marks the row as the current selection. Injected by `Select`; in a menu it sets `aria-checked` on `menuitemradio` / `menuitemcheckbox` rows. */
+  selected?: boolean;
+  /** Marks the option as the keyboard-highlighted row. Injected by `Select`. */
+  highlighted?: boolean;
+  /** Reserves a leading checkmark slot for multi-select menus. Injected by `Select`. */
+  multiple?: boolean;
+  /** Accent color - resolves to `theme.palette[color]`. Injected by `Select` or `MenuList`; the item's own value wins. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: MenuItemColor;
+  /** Base text color of the row - resolves against `theme.text`. When unset, falls back to the accent color's `main`. Injected by `Select` or `MenuList`; the item's own value wins. */
+  textColor?: MenuItemTextColor;
+  /** Density token - resolves against `theme.sizes`. Injected by `Select` or `MenuList`. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: MenuItemSize;
+  /** Compact vertical padding, independent of `size`. Default: `false`. */
+  dense?: boolean;
+  /** Remove the left and right padding. Default: `false`. */
+  disableGutters?: boolean;
+  /** Add a 1px bottom border to separate the row. Default: `false`. */
+  divider?: boolean;
+  /** Focus the row on first mount, and whenever `autoFocus` flips from `false` to `true`. Default: `false`. */
+  autoFocus?: boolean;
+  /** Class applied only while the row has keyboard focus - a `:focus-visible` hook. */
+  focusVisibleClassName?: string;
+  /** Fired with `value` when the option is chosen. Injected by `Select`. */
+  onSelect?: (value: MenuItemValue) => void;
+  /** Menu only: the row's role. Default: `'menuitem'`. */
+  role?: MenuItemRole;
+  /** Menu only: an icon in the leading column. Every row keeps the column, so labels line up; a selected checkable row shows a tick there. */
+  startIcon?: ReactNode;
+  /** Menu only: the row's keyboard shortcut, shown at its end. A string is also given to the row as `aria-keyshortcuts`. */
+  shortcut?: ReactNode;
+  /** Menu only: why the row is off - its tooltip and accessible description. */
+  note?: string;
+  /** Menu only: fired when the row is chosen, by a click, Enter or Space. */
+  onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+  /** Menu only: the rows of a submenu this row opens. `null` or `[]` is a submenu with nothing in it yet - see `emptyLabel`. */
+  submenu?: ReactNode;
+  /** Menu only: shown as one disabled row in an empty submenu ("Coming soon"). Without it, the submenu stays empty. */
+  emptyLabel?: ReactNode;
+  /** Menu only: a control of the row's own beside it - a close button. It sits in the row's `role="none"` entry, out of the arrow keys and hidden from assistive technology (a menu owns rows alone), so it is the pointer's: give it `tabIndex={-1}`, and the row a key of its own through `MenuList`'s `onKeyDown`. */
+  secondaryAction?: ReactNode;
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A row of a list. Inside a `MenuList` it is a menu row - a `menuitem`
+ * (or `menuitemradio` / `menuitemcheckbox`) with a leading icon column, its label and a
+ * trailing shortcut, chosen by a click, Enter or Space. Anywhere else it is `Select`'s
+ * `<li role="option">` (override via `as`), whose selection, highlight and density props
+ * `Select` injects; used on its own it renders a static, styled row.
+ */
+declare function MenuItem({ value, children, as, disabled, selected, highlighted, multiple, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, disableGutters, divider, autoFocus, focusVisibleClassName, onSelect, role, startIcon, shortcut, note, onClick, submenu, emptyLabel, secondaryAction, id, className, 'data-testid': dataTestid }: Readonly<MenuItemProps>): import("react").JSX.Element;
+//#endregion
+export { MenuItemSize as a, MenuItemRole as i, MenuItemColor as n, MenuItemTextColor as o, MenuItemProps as r, MenuItem as t };

package/dist/index-B4TeaB7b.d.cts

@@ -0,0 +1,72 @@
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { t as MenuItemValue } from "./MenuListContext-DKUOhNyw.cjs";
+import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
+//#region src/MenuItem/MenuItem.d.ts
+type MenuItemColor = keyof Theme['palette'];
+type MenuItemSize = keyof Theme['sizes'];
+type MenuItemTextColor = keyof Theme['text'];
+/** A menu row's role: a command, the current choice of a group, or an on/off setting. */
+type MenuItemRole = 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
+interface MenuItemProps {
+  /** The value this row represents - reported to `Select`'s `onChange`, or `MenuList`'s `onSelect`. Required inside a `Select`. */
+  value?: MenuItemValue;
+  /** The row label. */
+  children: ReactNode;
+  /** The element used for the root node - a tag name or a component. Default: `'li'`. */
+  as?: ElementType;
+  /** Disables the row - it cannot be highlighted or chosen. In a menu the keys skip it. */
+  disabled?: boolean;
+  /** Marks the row as the current selection. Injected by `Select`; in a menu it sets `aria-checked` on `menuitemradio` / `menuitemcheckbox` rows. */
+  selected?: boolean;
+  /** Marks the option as the keyboard-highlighted row. Injected by `Select`. */
+  highlighted?: boolean;
+  /** Reserves a leading checkmark slot for multi-select menus. Injected by `Select`. */
+  multiple?: boolean;
+  /** Accent color - resolves to `theme.palette[color]`. Injected by `Select` or `MenuList`; the item's own value wins. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: MenuItemColor;
+  /** Base text color of the row - resolves against `theme.text`. When unset, falls back to the accent color's `main`. Injected by `Select` or `MenuList`; the item's own value wins. */
+  textColor?: MenuItemTextColor;
+  /** Density token - resolves against `theme.sizes`. Injected by `Select` or `MenuList`. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: MenuItemSize;
+  /** Compact vertical padding, independent of `size`. Default: `false`. */
+  dense?: boolean;
+  /** Remove the left and right padding. Default: `false`. */
+  disableGutters?: boolean;
+  /** Add a 1px bottom border to separate the row. Default: `false`. */
+  divider?: boolean;
+  /** Focus the row on first mount, and whenever `autoFocus` flips from `false` to `true`. Default: `false`. */
+  autoFocus?: boolean;
+  /** Class applied only while the row has keyboard focus - a `:focus-visible` hook. */
+  focusVisibleClassName?: string;
+  /** Fired with `value` when the option is chosen. Injected by `Select`. */
+  onSelect?: (value: MenuItemValue) => void;
+  /** Menu only: the row's role. Default: `'menuitem'`. */
+  role?: MenuItemRole;
+  /** Menu only: an icon in the leading column. Every row keeps the column, so labels line up; a selected checkable row shows a tick there. */
+  startIcon?: ReactNode;
+  /** Menu only: the row's keyboard shortcut, shown at its end. A string is also given to the row as `aria-keyshortcuts`. */
+  shortcut?: ReactNode;
+  /** Menu only: why the row is off - its tooltip and accessible description. */
+  note?: string;
+  /** Menu only: fired when the row is chosen, by a click, Enter or Space. */
+  onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+  /** Menu only: the rows of a submenu this row opens. `null` or `[]` is a submenu with nothing in it yet - see `emptyLabel`. */
+  submenu?: ReactNode;
+  /** Menu only: shown as one disabled row in an empty submenu ("Coming soon"). Without it, the submenu stays empty. */
+  emptyLabel?: ReactNode;
+  /** Menu only: a control of the row's own beside it - a close button. It sits in the row's `role="none"` entry, out of the arrow keys and hidden from assistive technology (a menu owns rows alone), so it is the pointer's: give it `tabIndex={-1}`, and the row a key of its own through `MenuList`'s `onKeyDown`. */
+  secondaryAction?: ReactNode;
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A row of a list. Inside a `MenuList` it is a menu row - a `menuitem`
+ * (or `menuitemradio` / `menuitemcheckbox`) with a leading icon column, its label and a
+ * trailing shortcut, chosen by a click, Enter or Space. Anywhere else it is `Select`'s
+ * `<li role="option">` (override via `as`), whose selection, highlight and density props
+ * `Select` injects; used on its own it renders a static, styled row.
+ */
+declare function MenuItem({ value, children, as, disabled, selected, highlighted, multiple, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, disableGutters, divider, autoFocus, focusVisibleClassName, onSelect, role, startIcon, shortcut, note, onClick, submenu, emptyLabel, secondaryAction, id, className, 'data-testid': dataTestid }: Readonly<MenuItemProps>): import("react").JSX.Element;
+//#endregion
+export { MenuItemSize as a, MenuItemRole as i, MenuItemColor as n, MenuItemTextColor as o, MenuItemProps as r, MenuItem as t };

package/dist/{index-BUoVTCqX.d.mts → index-BGbTuHP9.d.mts}

@@ -1,5 +1,4 @@
-import { T as Theme, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
+import { P as PaletteColor, W as Theme } from "./index-CJhK7JND.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
 //#region src/Pagination/hooks/usePagination.d.ts

package/dist/{index-Celm-8iN.d.cts → index-BHKgEOZJ.d.cts}

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-DdqdSOct.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-ChXeKJCk.cjs";
 import { HTMLAttributes } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/Pagination.d.ts

package/dist/{index-Chg6pSrr.d.mts → index-BQWjh4rK.d.mts}

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-BUoVTCqX.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-BGbTuHP9.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/Pagination/Pagination.d.ts

package/dist/{index-B78VkB0-.d.cts → index-BelFIizY.d.cts}

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { t as TableCellPadding } from "./TableContext-BeCxbtHH.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { t as TableCellPadding } from "./TableContext-Duj1nVG7.cjs";
 import { ElementType, ThHTMLAttributes } from "react";
 import { BorderProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Table/TableSectionContext.d.ts

package/dist/index-BkzZxHVj.d.mts

@@ -0,0 +1,35 @@
+import { t as MenuItemValue } from "./MenuListContext-x-7lH4CH.mjs";
+import { i as MenuItemRole } from "./index-B1RFybA_.mjs";
+import { KeyboardEvent, MouseEvent, ReactNode } from "react";
+//#region src/Menu/MenuItems/MenuItems.d.ts
+/** A menu row as data - what a `MenuItem` takes, with its label as `label`. */
+interface MenuItemRowData {
+  value?: MenuItemValue;
+  label: ReactNode;
+  role?: MenuItemRole;
+  selected?: boolean;
+  disabled?: boolean;
+  startIcon?: ReactNode;
+  shortcut?: ReactNode;
+  note?: string;
+  onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+  /** The rows of this row's submenu; `null` or `[]` is an empty one. */
+  submenu?: MenuItemData[] | null;
+  emptyLabel?: ReactNode;
+}
+/** A divider between groups of rows. */
+interface MenuDividerData {
+  type: 'divider';
+}
+type MenuItemData = MenuItemRowData | MenuDividerData;
+interface MenuItemsProps {
+  items: readonly MenuItemData[];
+}
+/**
+ * @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`.
+ */
+declare function MenuItems({ items }: Readonly<MenuItemsProps>): import("react").JSX.Element[];
+//#endregion
+export { MenuItemsProps as a, MenuItems as i, MenuItemData as n, MenuItemRowData as r, MenuDividerData as t };

package/dist/{index-DbEnSf2m.d.cts → index-BrgwkY6z.d.mts}

@@ -1,8 +1,7 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-BhibLnZ0.cjs";
-import { ElementType, HTMLAttributes } from "react";
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-CG_1uPrD.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
+import { ElementType, HTMLAttributes } from "react";
 //#region src/ButtonGroup/ButtonGroup.d.ts
 type ButtonGroupOrientation = 'horizontal' | 'vertical';
 type ButtonGroupRadius = keyof Theme['radii'];

package/dist/{index-Wnv6jCR3.d.mts → index-Bx0-6yeX.d.mts}

@@ -1,5 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
 import { KeyboardEvent, MouseEvent, ReactNode, Ref, RefCallback, SyntheticEvent } from "react";
 //#region src/Modal/useModal.d.ts
 type ModalCloseReason = 'escapeKey' | 'backdropClick';

package/dist/index-BxVTIMnB.d.cts

@@ -0,0 +1 @@
+import "./index-DJ0f69wh.cjs";

package/dist/{index-BfZuh9c2.d.mts → index-ByYxVl9O.d.mts}

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { t as TableCellPadding } from "./TableContext-BiRiYkVZ.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { t as TableCellPadding } from "./TableContext-DhuRf6Wy.mjs";
 import { BorderProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 import { ElementType, ThHTMLAttributes } from "react";
 //#region src/Table/TableSectionContext.d.ts

package/dist/index-CE5JG1us.d.mts

@@ -0,0 +1,34 @@
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { MouseEvent, ReactNode } from "react";
+//#region src/Tabs/TabScrollButton/TabScrollButton.d.ts
+/** Which way a scroll button scrolls a row of tabs: towards its start, or its end. */
+type TabScrollDirection = 'start' | 'end';
+interface TabScrollButtonProps {
+  /** Which way it scrolls the row: towards its start, or its end. */
+  direction: TabScrollDirection;
+  /** The row's orientation. Default: its `Tabs`', else `'horizontal'`. */
+  orientation?: 'horizontal' | 'vertical';
+  /** There is nowhere further to scroll this way - kept, but off. */
+  disabled?: boolean;
+  /** There is nowhere further to scroll this way - hidden, keeping its room. */
+  isHidden?: boolean;
+  /** Its stretch of an enclosed row's divider - resolves to `theme.palette`. Default: the row's line, the selected tab's color. */
+  color?: keyof Theme['palette'];
+  /** The chevron's color - resolves against `theme.text`. Default: its `Tabs`' `textColor`, else `'primary'`. */
+  textColor?: keyof Theme['text'];
+  /** Fired when it is pressed. In a `Tabs`, it scrolls the row by its visible size. */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /** What it shows. Default: a chevron pointing the way it scrolls. */
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description The button that scrolls a row of tabs - a `Tabs` shows one at each end while its
+ * tabs overflow (`overflowBehavior="scroll"`). Out of the tab order and hidden from assistive
+ * technology: the arrow keys already reach every tab. A `Tabs` takes another in its place with
+ * `slots={{ scrollButton }}`, given these same props.
+ */
+declare function TabScrollButton({ direction, orientation, disabled, isHidden, color: colorProp, textColor: textColorProp, onClick, children, className, 'data-testid': dataTestid }: Readonly<TabScrollButtonProps>): import("react").JSX.Element;
+//#endregion
+export { TabScrollButtonProps as n, TabScrollDirection as r, TabScrollButton as t };