@soroush.tech/design-system 2.1.0 → 2.1.2-rc.0

package/dist/Link.mjs

@@ -1,7 +1,7 @@
-import { o as styled } from "./src-B-rNjHIL.mjs";
-import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
-import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { o as styled } from "./src-BSo7bM2g.mjs";
+import { r as useTheme } from "./theme-B6LFWZ98.mjs";
 import { Typography } from "./Typography.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { t as getAnchorRel } from "./getAnchorRel-BLYap7aE.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/Menu/ContextMenu.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-yC1f5WR2.cjs");
+const require_src = require("../src-B1PmaZ-2.cjs");
 const require_theme = require("../theme-XJvMdOnY.cjs");
-const require_MenuList = require("../MenuList-CSaaR3jt.cjs");
-const require_MenuItem = require("../MenuItem-BWm8DC-S.cjs");
+const require_MenuList = require("../MenuList-Cr9L4x9N.cjs");
+const require_MenuItem = require("../MenuItem-Be4xFEww.cjs");
 const require_Menu_MenuItems = require("./MenuItems.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Menu/ContextMenu.d.cts

@@ -1,16 +1,16 @@
-import { cn as PaperElevation, nt as Theme } from "../index-CK-uaK5U.cjs";
-import "../index-fwRQcB91.cjs";
+import { cn as PaperElevation, nt as Theme } from "../index-MipJMh6w.cjs";
+import "../Paper.cjs";
 import { n as PopoverPosition } from "../computePopoverPosition-JgOwCM7k.cjs";
-import { t as MenuItemValue } from "../MenuListContext-BkQzp2DA.cjs";
-import { r as MenuListSlotProps } from "../index-DiQHPHUv.cjs";
-import { n as MenuItemData } from "../index-CykbbqeN.cjs";
-import { n as MenuCloseReason } from "../index-DA3M2w5w.cjs";
+import { MenuListSlotProps } from "./MenuList.cjs";
+import { MenuItemData } from "./MenuItems.cjs";
+import { t as MenuItemValue } from "../MenuListContext-BIcjLUEc.cjs";
+import { n as MenuCloseReason } from "../index-UdCNBn1j.cjs";
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, SyntheticEvent } from "react";
 interface TargetProps {
   onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
 }
-interface ContextMenuProps {
+export interface ContextMenuProps {
   /** The element whose right-click opens the menu - the canvas, a row, a card. Its own `onContextMenu` / `onKeyDown` still run. Optional when the app opens the menu itself, with `isOpen` and `anchorPosition`. */
   target?: ReactElement<TargetProps>;
   /** Whether the menu is open, when the app decides: it then opens at `anchorPosition` - from a hit test, a shortcut, a toolbar button - and asks to close through `onClose`, whatever was right-clicked. Without it, the menu opens at the target's right-click or context-menu key, as before. */
@@ -58,5 +58,5 @@ interface ContextMenuProps {
  * `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, isOpen: isOpenProp, anchorPosition, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, slotProps, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
-export { ContextMenu, ContextMenuProps };
+export declare function ContextMenu({ target, isOpen: isOpenProp, anchorPosition, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, slotProps, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
+export {};

package/dist/Menu/ContextMenu.d.mts

@@ -1,16 +1,16 @@
-import { cn as PaperElevation, nt as Theme } from "../index-B-1sp9oV.mjs";
-import "../index-C_n4ZPpQ.mjs";
+import { cn as PaperElevation, nt as Theme } from "../index-nw0pvCoK.mjs";
+import "../index-BzWmnUjW.mjs";
 import { n as PopoverPosition } from "../computePopoverPosition-JgOwCM7k.mjs";
-import { t as MenuItemValue } from "../MenuListContext-BN1VV12-.mjs";
-import { r as MenuListSlotProps } from "../index-DOimZ1Wo.mjs";
-import { n as MenuItemData } from "../index-CRbfhyQ6.mjs";
-import { n as MenuCloseReason } from "../index-CPmemva9.mjs";
+import { r as MenuListSlotProps } from "../index-fbOIRIGi.mjs";
+import { n as MenuItemData } from "../index-DWPBIj3Q.mjs";
+import { t as MenuItemValue } from "../MenuListContext-D976fSth.mjs";
+import { n as MenuCloseReason } from "../index-DW6ItSg9.mjs";
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, SyntheticEvent } from "react";
 interface TargetProps {
   onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
 }
-interface ContextMenuProps {
+export interface ContextMenuProps {
   /** The element whose right-click opens the menu - the canvas, a row, a card. Its own `onContextMenu` / `onKeyDown` still run. Optional when the app opens the menu itself, with `isOpen` and `anchorPosition`. */
   target?: ReactElement<TargetProps>;
   /** Whether the menu is open, when the app decides: it then opens at `anchorPosition` - from a hit test, a shortcut, a toolbar button - and asks to close through `onClose`, whatever was right-clicked. Without it, the menu opens at the target's right-click or context-menu key, as before. */
@@ -58,5 +58,5 @@ interface ContextMenuProps {
  * `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, isOpen: isOpenProp, anchorPosition, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, slotProps, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
-export { ContextMenu, ContextMenuProps };
+export declare function ContextMenu({ target, isOpen: isOpenProp, anchorPosition, children, items, onClose, onSelect, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, slotProps, 'data-testid': dataTestid }: Readonly<ContextMenuProps>): import("react").JSX.Element;
+export {};

package/dist/Menu/ContextMenu.mjs

@@ -1,7 +1,7 @@
-import { o as styled } from "../src-B-rNjHIL.mjs";
-import { n as useDefaultProps, r as useTheme } from "../theme-DyyZQFzQ.mjs";
-import { o as MenuActivationContext, t as MenuList } from "../MenuList-D7Pvpn_K.mjs";
-import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "../MenuItem-hJeCsQZX.mjs";
+import { o as styled } from "../src-BSo7bM2g.mjs";
+import { n as useDefaultProps, r as useTheme } from "../theme-B6LFWZ98.mjs";
+import { o as MenuActivationContext, t as MenuList } from "../MenuList-CoLoldE2.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "../MenuItem-DfS3Q2Ha.mjs";
 import { MenuItems } from "./MenuItems.mjs";
 import { Children, cloneElement, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/Menu/Menu.cjs

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

package/dist/Menu/Menu.d.cts

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

package/dist/Menu/Menu.d.mts

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

package/dist/Menu/Menu.mjs

@@ -1 +1 @@
-export { t as Menu } from "../Menu-Cv887y7O.mjs";
+export { t as Menu } from "../Menu-31GXflmP.mjs";

package/dist/Menu/MenuDivider.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-yC1f5WR2.cjs");
+const require_src = require("../src-B1PmaZ-2.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/Menu/MenuDivider/MenuDivider.tsx
 const MenuDividerRoot = require_src.styled("li", {

package/dist/Menu/MenuDivider.d.cts

@@ -1,4 +1,4 @@
-interface MenuDividerProps {
+export interface MenuDividerProps {
   className?: string;
   'data-testid'?: string;
 }
@@ -6,5 +6,4 @@ interface MenuDividerProps {
  * @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;
-export { MenuDivider, MenuDividerProps };
+export declare function MenuDivider({ className, 'data-testid': dataTestid }: Readonly<MenuDividerProps>): import("react").JSX.Element;

package/dist/Menu/MenuDivider.d.mts

@@ -1,4 +1,4 @@
-interface MenuDividerProps {
+export interface MenuDividerProps {
   className?: string;
   'data-testid'?: string;
 }
@@ -6,5 +6,4 @@ interface MenuDividerProps {
  * @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;
-export { MenuDivider, MenuDividerProps };
+export declare function MenuDivider({ className, 'data-testid': dataTestid }: Readonly<MenuDividerProps>): import("react").JSX.Element;

package/dist/Menu/MenuDivider.mjs

@@ -1,4 +1,4 @@
-import { a as src_exports, o as styled } from "../src-B-rNjHIL.mjs";
+import { a as src_exports, o as styled } from "../src-BSo7bM2g.mjs";
 import { jsx } from "react/jsx-runtime";
 // src/Menu/MenuDivider/MenuDivider.tsx
 const MenuDividerRoot = styled("li", {

package/dist/Menu/MenuItems.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuItem = require("../MenuItem-BWm8DC-S.cjs");
 const require_Menu_MenuDivider = require("./MenuDivider.cjs");
+const require_MenuItem = require("../MenuItem-Be4xFEww.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/Menu/MenuItems/MenuItems.tsx
 const isDivider = (item) => "type" in item && item.type === "divider";

package/dist/Menu/MenuItems.d.cts

@@ -1,2 +1,32 @@
-import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "../index-CykbbqeN.cjs";
-export { MenuDividerData, MenuItemData, MenuItemRowData, MenuItems, MenuItemsProps };
+import { t as MenuItemValue } from "../MenuListContext-BIcjLUEc.cjs";
+import { MenuItemRole } from "../MenuItem.cjs";
+import { KeyboardEvent, MouseEvent, ReactNode } from "react";
+/** A menu row as data - what a `MenuItem` takes, with its label as `label`. */
+export 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. */
+export interface MenuDividerData {
+  type: 'divider';
+}
+export type MenuItemData = MenuItemRowData | MenuDividerData;
+export 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`.
+ */
+export declare function MenuItems({ items }: Readonly<MenuItemsProps>): import("react").JSX.Element[];

package/dist/Menu/MenuItems.d.mts

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

package/dist/Menu/MenuItems.mjs

@@ -1,5 +1,5 @@
-import { t as MenuItem } from "../MenuItem-hJeCsQZX.mjs";
 import { MenuDivider } from "./MenuDivider.mjs";
+import { t as MenuItem } from "../MenuItem-DfS3Q2Ha.mjs";
 import { jsx } from "react/jsx-runtime";
 // src/Menu/MenuItems/MenuItems.tsx
 const isDivider = (item) => "type" in item && item.type === "divider";

package/dist/Menu/MenuList.cjs

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

package/dist/Menu/MenuList.d.cts

@@ -1,3 +1,44 @@
-import { t as MenuItemValue } from "../MenuListContext-BkQzp2DA.cjs";
-import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "../index-DiQHPHUv.cjs";
-export { type MenuItemValue, MenuList, MenuListProps, MenuListSlotProps };
+import { nt as Theme } from "../index-MipJMh6w.cjs";
+import { t as MenuItemValue } from "../MenuListContext-BIcjLUEc.cjs";
+import { AriaAttributes, KeyboardEvent, ReactNode } from "react";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+export 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;
+}
+/**
+ * What an app may put on the `role="menu"` list a `Menu` or a `ContextMenu` renders, through
+ * `slotProps.list`: its marks (`data-*`), class, `aria-*` and an `onKeyDown`, which runs before the
+ * list's own. The list's `role`, `id` and name are the menu's, and win.
+ */
+export type MenuListSlotProps = Pick<MenuListProps, 'className' | 'data-testid' | 'onKeyDown'> & Omit<AriaAttributes, 'aria-label' | 'aria-labelledby'> & {
+  [name: `data-${string}`]: string | number | boolean | undefined;
+};
+/**
+ * @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.
+ */
+export declare function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFocus, color, textColor, size, dense, onKeyDown, ...rest }: Readonly<MenuListProps>): import("react").JSX.Element;
+export type { MenuItemValue };

package/dist/Menu/MenuList.d.mts

@@ -1,3 +1,3 @@
-import { t as MenuItemValue } from "../MenuListContext-BN1VV12-.mjs";
-import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "../index-DOimZ1Wo.mjs";
+import { t as MenuItemValue } from "../MenuListContext-D976fSth.mjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "../index-fbOIRIGi.mjs";
 export { type MenuItemValue, MenuList, MenuListProps, MenuListSlotProps };

package/dist/Menu/MenuList.mjs

@@ -1 +1 @@
-export { t as MenuList } from "../MenuList-D7Pvpn_K.mjs";
+export { t as MenuList } from "../MenuList-CoLoldE2.mjs";

package/dist/{Menu-Cv887y7O.mjs → Menu-31GXflmP.mjs}

@@ -1,9 +1,9 @@
-import { o as styled } from "./src-B-rNjHIL.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
-import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
-import { o as MenuActivationContext, t as MenuList } from "./MenuList-D7Pvpn_K.mjs";
-import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "./MenuItem-hJeCsQZX.mjs";
+import { o as styled } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-B6LFWZ98.mjs";
+import { o as MenuActivationContext, t as MenuList } from "./MenuList-CoLoldE2.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "./MenuItem-DfS3Q2Ha.mjs";
 import { MenuItems } from "./Menu/MenuItems.mjs";
+import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
 import { Children, cloneElement, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/Menu/utils/assignRef.ts

package/dist/{Menu-DOOK_gM9.cjs → Menu-CTqplttU.cjs}

@@ -1,9 +1,9 @@
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
-const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
-const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
-const require_MenuItem = require("./MenuItem-BWm8DC-S.cjs");
+const require_MenuList = require("./MenuList-Cr9L4x9N.cjs");
+const require_MenuItem = require("./MenuItem-Be4xFEww.cjs");
 const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
+const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/Menu/utils/assignRef.ts

package/dist/Menu.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
+const require_MenuList = require("./MenuList-Cr9L4x9N.cjs");
 const require_Menu_MenuDivider = require("./Menu/MenuDivider.cjs");
 const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
 const require_Menu_ContextMenu = require("./Menu/ContextMenu.cjs");
-const require_Menu = require("./Menu-DOOK_gM9.cjs");
+const require_Menu = require("./Menu-CTqplttU.cjs");
 exports.ContextMenu = require_Menu_ContextMenu.ContextMenu;
 exports.Menu = require_Menu.Menu;
 exports.MenuDivider = require_Menu_MenuDivider.MenuDivider;

package/dist/Menu.d.cts

@@ -1,7 +1,7 @@
-import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-BkQzp2DA.cjs";
-import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "./index-DiQHPHUv.cjs";
-import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CykbbqeN.cjs";
-import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-DA3M2w5w.cjs";
 import { ContextMenu, ContextMenuProps } from "./Menu/ContextMenu.cjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-UdCNBn1j.cjs";
 import { MenuDivider, MenuDividerProps } from "./Menu/MenuDivider.cjs";
+import { MenuDividerData, MenuItemData, MenuItemRowData, MenuItems, MenuItemsProps } from "./Menu/MenuItems.cjs";
+import { MenuList, MenuListProps, MenuListSlotProps } from "./Menu/MenuList.cjs";
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-BIcjLUEc.cjs";
 export { ContextMenu, ContextMenuProps, Menu, type MenuAlign, MenuCloseReason, MenuDivider, MenuDividerData, MenuDividerProps, MenuItemData, MenuItemRowData, MenuItemValue, MenuItems, MenuItemsProps, MenuList, MenuListContext, MenuListContextValue, MenuListProps, MenuListSlotProps, MenuProps, MenuStep, useMenuListContext };

package/dist/Menu.d.mts

@@ -1,7 +1,7 @@
-import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-BN1VV12-.mjs";
-import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "./index-DOimZ1Wo.mjs";
-import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-CRbfhyQ6.mjs";
-import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-CPmemva9.mjs";
 import { ContextMenu, ContextMenuProps } from "./Menu/ContextMenu.mjs";
+import { a as MenuAlign, i as MenuStep, n as MenuCloseReason, r as MenuProps, t as Menu } from "./index-DW6ItSg9.mjs";
+import { a as MenuItemsProps, i as MenuItems, n as MenuItemData, r as MenuItemRowData, t as MenuDividerData } from "./index-DWPBIj3Q.mjs";
+import { n as MenuListProps, r as MenuListSlotProps, t as MenuList } from "./index-fbOIRIGi.mjs";
+import { i as useMenuListContext, n as MenuListContext, r as MenuListContextValue, t as MenuItemValue } from "./MenuListContext-D976fSth.mjs";
 import { MenuDivider, MenuDividerProps } from "./Menu/MenuDivider.mjs";
 export { ContextMenu, ContextMenuProps, Menu, type MenuAlign, MenuCloseReason, MenuDivider, MenuDividerData, MenuDividerProps, MenuItemData, MenuItemRowData, MenuItemValue, MenuItems, MenuItemsProps, MenuList, MenuListContext, MenuListContextValue, MenuListProps, MenuListSlotProps, MenuProps, MenuStep, useMenuListContext };

package/dist/Menu.mjs

@@ -1,6 +1,6 @@
-import { a as useMenuListContext, i as MenuListContext, t as MenuList } from "./MenuList-D7Pvpn_K.mjs";
+import { a as useMenuListContext, i as MenuListContext, t as MenuList } from "./MenuList-CoLoldE2.mjs";
 import { MenuDivider } from "./Menu/MenuDivider.mjs";
 import { MenuItems } from "./Menu/MenuItems.mjs";
 import { ContextMenu } from "./Menu/ContextMenu.mjs";
-import { t as Menu } from "./Menu-Cv887y7O.mjs";
+import { t as Menu } from "./Menu-31GXflmP.mjs";
 export { ContextMenu, Menu, MenuDivider, MenuItems, MenuList, MenuListContext, useMenuListContext };

package/dist/{MenuItem-BWm8DC-S.cjs → MenuItem-Be4xFEww.cjs}

@@ -1,12 +1,12 @@
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_Icon = require("./Icon-C4QMiNHJ.cjs");
+const require_Tooltip = require("./Tooltip-Bzt4mirM.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
 const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_MenuList = require("./MenuList-Cr9L4x9N.cjs");
 const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
-const require_Icon = require("./Icon-C5Iz5ekp.cjs");
-const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
 const require_useAnchoredPlacement = require("./useAnchoredPlacement-BSfjNMut.cjs");
-const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
-const require_Tooltip = require("./Tooltip-rkGm1HnP.cjs");
+const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
 let react = 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");

package/dist/{MenuItem-hJeCsQZX.mjs → MenuItem-DfS3Q2Ha.mjs}

@@ -1,12 +1,12 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as Icon } from "./Icon-gVHlFgdH.mjs";
+import { n as Tooltip } from "./Tooltip-CqGB8Pgm.mjs";
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-B6LFWZ98.mjs";
 import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { a as useMenuListContext, n as getNextRow, r as getOwnRows, t as MenuList } from "./MenuList-CoLoldE2.mjs";
 import { t as getSurfaceRadius } from "./getSurfaceRadius-B1QE_VLa.mjs";
-import { t as Icon } from "./Icon-XpXU-SuF.mjs";
-import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
 import { t as useAnchoredPlacement } from "./useAnchoredPlacement-txSaWzfk.mjs";
-import { a as useMenuListContext, n as getNextRow, r as getOwnRows, t as MenuList } from "./MenuList-D7Pvpn_K.mjs";
-import { n as Tooltip } from "./Tooltip-Cx4ez9vY.mjs";
+import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
 import { Children, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/Menu/MenuPaper.ts

package/dist/MenuItem.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuItem = require("./MenuItem-BWm8DC-S.cjs");
+const require_MenuItem = require("./MenuItem-Be4xFEww.cjs");
 exports.MenuItem = require_MenuItem.MenuItem;

package/dist/MenuItem.d.cts

@@ -1,2 +1,73 @@
-import { a as MenuItemSize, i as MenuItemRole, n as MenuItemColor, o as MenuItemTextColor, r as MenuItemProps, t as MenuItem } from "./index-d5jm3kxO.cjs";
-export { MenuItem, MenuItemColor, MenuItemProps, MenuItemRole, MenuItemSize, MenuItemTextColor };
+import { nt as Theme } from "./index-MipJMh6w.cjs";
+import { t as MenuItemValue } from "./MenuListContext-BIcjLUEc.cjs";
+import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
+export type MenuItemColor = keyof Theme['palette'];
+export type MenuItemSize = keyof Theme['sizes'];
+export type MenuItemTextColor = keyof Theme['text'];
+/** A menu row's role: a command, the current choice of a group, or an on/off setting. */
+export type MenuItemRole = 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
+export 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: what a screen reader hears of the row's keys - the `aria-keyshortcuts` form, such as `Control+=` - where it differs from what `shortcut` shows (`Ctrl+=`). Without it, a string `shortcut` is announced as it is. */
+  'aria-keyshortcuts'?: string;
+  /** 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;
+  /** Menu only: leaves `secondaryAction` in the accessibility tree - a screen reader finds the control by its own name - rather than hidden from it. A menu owns rows alone, so a control beside a row is an exception a tool may report; name it, and keep it out of the tab order. Default: `false`. */
+  shouldAnnounceSecondaryAction?: boolean;
+  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.
+ */
+export 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, 'aria-keyshortcuts': keyShortcuts, note, onClick, submenu, emptyLabel, secondaryAction, shouldAnnounceSecondaryAction, id, className, 'data-testid': dataTestid }: Readonly<MenuItemProps>): import("react").JSX.Element;

package/dist/MenuItem.d.mts

@@ -1,2 +1,2 @@
-import { a as MenuItemSize, i as MenuItemRole, n as MenuItemColor, o as MenuItemTextColor, r as MenuItemProps, t as MenuItem } from "./index-C3D70-3U.mjs";
+import { a as MenuItemSize, i as MenuItemRole, n as MenuItemColor, o as MenuItemTextColor, r as MenuItemProps, t as MenuItem } from "./index-goQ0P1tj.mjs";
 export { MenuItem, MenuItemColor, MenuItemProps, MenuItemRole, MenuItemSize, MenuItemTextColor };

package/dist/MenuItem.mjs

@@ -1 +1 @@
-export { t as MenuItem } from "./MenuItem-hJeCsQZX.mjs";
+export { t as MenuItem } from "./MenuItem-DfS3Q2Ha.mjs";

package/dist/{MenuList-D7Pvpn_K.mjs → MenuList-CoLoldE2.mjs}

@@ -1,5 +1,5 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { n as useDefaultProps } from "./theme-DyyZQFzQ.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps } from "./theme-B6LFWZ98.mjs";
 import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -124,7 +124,7 @@ function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFo
 		const list = listRef.current;
 		if (!shouldAutoFocus || !list) return;
 		const rows = getOwnRows(list).filter(isRowEnabled);
-		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus();
+		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus({ preventScroll: true });
 	}, [shouldAutoFocus]);
 	const context = useMemo(() => ({
 		onActivate: (value, event) => {

package/dist/{MenuList-CSaaR3jt.cjs → MenuList-Cr9L4x9N.cjs}

@@ -1,4 +1,4 @@
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
 const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 let react = require("react");
@@ -125,7 +125,7 @@ function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFo
 		const list = listRef.current;
 		if (!shouldAutoFocus || !list) return;
 		const rows = getOwnRows(list).filter(isRowEnabled);
-		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus();
+		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus({ preventScroll: true });
 	}, [shouldAutoFocus]);
 	const context = (0, react.useMemo)(() => ({
 		onActivate: (value, event) => {

package/dist/{MenuListContext-BN1VV12-.d.mts → MenuListContext-BIcjLUEc.d.cts}

@@ -1,5 +1,5 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
-import "./index-C_K0hsEr.mjs";
+import { nt as Theme } from "./index-MipJMh6w.cjs";
+import "./theme.cjs";
 import { SyntheticEvent } from "react";
 type MenuItemValue = string | number;
 interface MenuListContextValue {

package/dist/{MenuListContext-BkQzp2DA.d.cts → MenuListContext-D976fSth.d.mts}

@@ -1,5 +1,5 @@
-import { nt as Theme } from "./index-CK-uaK5U.cjs";
-import "./index-CvV0TCBK.cjs";
+import { nt as Theme } from "./index-nw0pvCoK.mjs";
+import "./index-2yg1ycx-.mjs";
 import { SyntheticEvent } from "react";
 type MenuItemValue = string | number;
 interface MenuListContextValue {

package/dist/{Modal-gQcAJAKH.cjs → Modal-6SWc5gG5.cjs}

@@ -1,4 +1,4 @@
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_View = require("./View.cjs");
 const require_Portal = require("./Portal.cjs");
 const require_Backdrop = require("./Backdrop.cjs");

package/dist/{Modal-DR4TRQSH.mjs → Modal-EH6RduGc.mjs}

@@ -1,4 +1,4 @@
-import { o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
 import { View } from "./View.mjs";
 import { Portal } from "./Portal.mjs";
 import { Backdrop } from "./Backdrop.mjs";

package/dist/Modal.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Modal = require("./Modal-gQcAJAKH.cjs");
+const require_Modal = require("./Modal-6SWc5gG5.cjs");
 exports.Modal = require_Modal.Modal;
 exports.ModalManager = require_Modal.ModalManager;
 exports.exposeToAria = require_Modal.exposeToAria;