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

package/dist/index-DCmH5f9I.d.cts

@@ -0,0 +1,72 @@
+import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { t as MenuItemValue } from "./MenuListContext-vujGcRk9.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-VOsBSWEu.d.mts → index-DDJuUfL5.d.cts}

@@ -1,4 +1,4 @@
-import { I as ThemeLayout, M as ThemeDefaults, T as Theme, j as ThemeComponents } from "./themes-RX2UX5gD.mjs";
+import { J as ThemeDefaults, Q as ThemeLayout, V as Theme, q as ThemeComponents } from "./index-DmJ7yWWi.cjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/theme/ThemeProvider.d.ts
 interface ThemeProviderProps {

package/dist/{index-DdqdSOct.d.cts → index-DIC7HKpP.d.mts}

@@ -1,7 +1,6 @@
-import { T as Theme, x as PaletteColor } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
+import { M as PaletteColor, V as Theme } from "./index-CVNJEUwJ.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
+import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
 //#region src/Pagination/hooks/usePagination.d.ts
 type PaginationItemType = 'page' | 'first' | 'previous' | 'next' | 'last' | 'start-ellipsis' | 'end-ellipsis';
 /** One renderable pagination item - `Pagination` maps these onto `PaginationItem`s. */

package/dist/{index-BfZuh9c2.d.mts → index-DJCpnTH3.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 { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { t as TableCellPadding } from "./TableContext-6PgGpUzM.mjs";
 import { BorderProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 import { ElementType, ThHTMLAttributes } from "react";
 //#region src/Table/TableSectionContext.d.ts

package/dist/index-DQcnJ5H4.d.cts

@@ -0,0 +1,35 @@
+import { t as MenuItemValue } from "./MenuListContext-vujGcRk9.cjs";
+import { i as MenuItemRole } from "./index-DCmH5f9I.cjs";
+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-DNwF3DUX.d.cts → index-DXhMkjQ6.d.cts}

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as IconProps, r as IconName } from "./index-Ctqajtac.cjs";
+import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { n as IconProps, r as IconName } from "./index-qlfNErNd.cjs";
 import { ButtonHTMLAttributes } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Table/TableSortLabel/TableSortLabel.d.ts

package/dist/index-DckSub2J.d.mts

@@ -0,0 +1,72 @@
+import { V as Theme, Vt as PaperElevation } from "./index-CVNJEUwJ.mjs";
+import "./index-_G1osn09.mjs";
+import { t as MenuItemValue } from "./MenuListContext-Dml16k0X.mjs";
+import { n as MenuItemData } from "./index-C3KrFPCj.mjs";
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref, SyntheticEvent } from "react";
+//#region src/Menu/utils/getMenuOrigins.d.ts
+/** Which edge of its trigger a menu lines up with: the start edge, or the end edge. */
+type MenuAlign = 'start' | 'end';
+//#endregion
+//#region src/Menu/Menu/Menu.d.ts
+/** Why a menu closed: Escape, a chosen row, its trigger pressed again, or focus leaving it. */
+type MenuCloseReason = 'escapeKey' | 'select' | 'triggerClick' | 'blur';
+/** A step a menu bar takes from this menu to the previous (`-1`) or next (`1`) one. */
+type MenuStep = -1 | 1;
+interface TriggerProps {
+  id?: string;
+  ref?: Ref<HTMLElement>;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+}
+interface MenuProps {
+  /** The element that opens the menu - a `Button`, a `Pressable`... It is given `aria-haspopup`, `aria-expanded` and `aria-controls`, and must take a `ref` for focus to return to it. */
+  trigger: ReactElement<TriggerProps>;
+  /** `MenuItem` rows and `MenuDivider`s. */
+  children?: ReactNode;
+  /** The rows as data, in place of `children`. */
+  items?: readonly MenuItemData[];
+  /** Controlled open state. When set, the menu never opens or closes on its own - it asks through `onOpen` / `onClose`. */
+  isOpen?: boolean;
+  /** Uncontrolled initial open state. Default: `false`. */
+  defaultOpen?: boolean;
+  /** Fired when the menu asks to open. */
+  onOpen?: () => void;
+  /** Fired when the menu asks to close, with why. */
+  onClose?: (event: SyntheticEvent, reason: MenuCloseReason) => void;
+  /** Fired when Left or Right has nowhere further to go inside the menu - so an owner such as a menu bar can step to the next menu. Swapped in right-to-left pages. */
+  onStep?: (step: MenuStep) => void;
+  /** Fired with a row's `value` when a row that has one is chosen. */
+  onSelect?: (value: MenuItemValue) => void;
+  /** Which edge of the trigger the list lines up with. Mirrored in right-to-left pages. Default: `'start'`. */
+  align?: MenuAlign;
+  /** 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. Default: the trigger names it (`aria-labelledby`). */
+  'aria-label'?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A trigger and the `MenuList` it opens. Not modal: no focus trap, no scroll
+ * lock, nothing laid over the page, so the pointer passes over it freely. The list is
+ * placed `position: fixed` in the window next to the trigger, so a panel's overflow
+ * can't clip it, but stays inside the menu's own box in the DOM. Escape or a chosen row
+ * closes it and returns focus to the trigger; focus leaving it closes it where it went.
+ */
+declare function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen, onOpen, onClose, onStep, onSelect, align: alignProp, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid }: Readonly<MenuProps>): import("react").JSX.Element;
+//#endregion
+export { MenuAlign as a, MenuStep as i, MenuCloseReason as n, MenuProps as r, Menu as t };

package/dist/{index-nc4Sxiy9.d.mts → index-DeDxYlSQ.d.mts}

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as IconProps, r as IconName } from "./index-DO9J-Fla.mjs";
+import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { n as IconProps, r as IconName } from "./index-BqpS_Huq.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes } from "react";
 //#region src/Table/TableSortLabel/TableSortLabel.d.ts

package/dist/{themes-Kbk9h5cN.d.cts → index-DmJ7yWWi.d.cts}

@@ -1,6 +1,71 @@
-import { CSSObject } from "@emotion/react";
-import { ElementType } from "react";
-import { ContainerQueries, QueryHelpers } from "@soroush.tech/styled-system";
+import { CreateStyledComponent, FilteringStyledOptions, Interpolation, StyledOptions } from "@emotion/styled";
+import { CSSObject, PropsOf, css, keyframes } from "@emotion/react";
+import { CSSProperties, ComponentClass, ComponentProps, ComponentType, ElementType, HTMLAttributes, JSX, ReactNode, Ref } from "react";
+import { BorderProps, ContainerQueries, FlexboxProps, LayoutFrameProps, LayoutProps, PositionProps, QueryHelpers, SpaceProps, SpanProps, TypographyProps } from "@soroush.tech/styled-system";
+import { createShouldForwardProp, props } from "@soroush.tech/styled-system/should-forward-prop";
+//#region src/View/View.d.ts
+/** Valid values for the color prop - derived from theme.text keys. */
+type ViewColorToken = keyof Theme['text'];
+/** Valid values for the bg prop - derived from theme.background keys. */
+type ViewBackgroundToken = keyof Theme['background'];
+/** Valid values for the borderColor prop - derived from theme.border keys. */
+type ViewBorderColorToken = keyof Theme['border'];
+/** Valid values for the borderWidth prop - derived from theme.borderWidths keys. */
+type ViewBorderWidthToken = keyof Theme['borderWidths'];
+/** Valid theme tokens for border-radius. Raw CSS pixel values (e.g. '6px', '9999px') are also accepted. */
+type ViewBorderRadiusToken = keyof Theme['radii'] | `${number}px`;
+interface ViewProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>, SpaceProps<Theme>, LayoutProps<Theme>, TypographyProps<Theme>, Omit<BorderProps<Theme>, 'borderColor' | 'borderWidth' | 'borderRadius'>, PositionProps<Theme>, SpanProps<Theme>, LayoutFrameProps<Theme> {
+  bg?: ViewBackgroundToken;
+  /** Resolves against theme.border - light · primary · dark */
+  borderColor?: ViewBorderColorToken;
+  /** Resolves against theme.borderWidths - none · thin · base · thick */
+  borderWidth?: ViewBorderWidthToken;
+  /** Theme tokens: sq · sm · md · lg. Also accepts raw CSS pixel values e.g. '6px', '9999px'. */
+  borderRadius?: ViewBorderRadiusToken;
+  opacity?: number;
+  cursor?: CSSProperties['cursor'];
+  /** CSS order for flex/grid item placement. Accepts responsive arrays. */
+  order?: FlexboxProps<Theme>['order'];
+}
+declare const View: import("@emotion/styled").StyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//#endregion
+//#region src/Flex/Flex.d.ts
+/** Valid values for the gap prop - derived from theme.space keys. */
+type GapToken = keyof Theme['space'];
+/**
+ * `layout` puts the flex container on the page frame, as on any View: the theme's margin and
+ * max width per breakpoint. The flexbox stays as set - a column by default, a row with
+ * `flexDirection="row"`. Columns are Grid's: content on the page columns uses `<Grid layout>`.
+ */
+interface FlexProps extends ViewProps, FlexboxProps<Theme> {}
+declare const Flex: import("@emotion/styled").StyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & FlexProps, {}, {}>;
+//#endregion
+//#region src/Paper/Paper.d.ts
+type PaperElevation = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+interface PaperProps extends FlexProps {
+  /** Shadow depth - 0 (flat) to 24 (highest). Resolves to theme.shadows[n]. Default: 1. */
+  elevation?: PaperElevation;
+  /** CSS transition for surface animations (e.g. hover elevation change). */
+  transition?: CSSProperties['transition'];
+  /** Resolves against theme.border - light · primary · dark */
+  borderColor?: keyof Theme['border'];
+  /** Resolves against theme.borderWidths - none · thin · base · thick */
+  borderWidth?: keyof Theme['borderWidths'];
+  /** CSS border-style value (e.g. 'solid', 'dashed'). */
+  borderStyle?: CSSProperties['borderStyle'];
+  /** Renders the surface as a different element (e.g. 'section'). */
+  as?: ElementType;
+}
+declare function Paper({ elevation, p, bg, borderRadius, ...rest }: Readonly<PaperProps>): import("react").JSX.Element;
+//#endregion
 //#region src/theme/breakpoints.d.ts
 /**
  * The query helpers a theme's breakpoint scale carries: `up` / `down` / `only` / `between` /
@@ -402,6 +467,15 @@ interface ButtonVariants {
   outlined: true;
   text: true;
 }
+/** The defaults a theme may set for every `Breadcrumbs` - its `expandLabel` gives a trail its language. */
+interface BreadcrumbsOwnerState {
+  separator?: ReactNode;
+  maxItems?: number;
+  itemsBeforeCollapse?: number;
+  itemsAfterCollapse?: number;
+  expandLabel?: string;
+  color?: keyof ThemeText;
+}
 /** The resolved props Button's styled roots receive - what `ownerState` exposes. */
 interface ButtonOwnerState {
   variant?: keyof ButtonVariants;
@@ -411,6 +485,69 @@ interface ButtonOwnerState {
   fullWidth?: boolean;
   disabled?: boolean;
 }
+/** Tabs' look values - augment to register new ones (then style them via `variants`). */
+interface TabsVariants {
+  underline: true;
+  boxed: true;
+  enclosed: true;
+}
+/** The resolved props Tabs' styled elements receive - what `ownerState` exposes. */
+interface TabsOwnerState {
+  variant?: keyof TabsVariants;
+  color?: keyof ThemePalette;
+  size?: keyof ThemeSizes;
+  orientation?: 'horizontal' | 'vertical';
+  fullWidth?: boolean;
+  hasDivider?: boolean;
+  selectedBg?: keyof ThemeBackground;
+}
+/** The defaults a theme may set for every `Menu`. */
+interface MenuOwnerState {
+  align?: 'start' | 'end';
+  marginThreshold?: keyof ThemeSpace;
+  elevation?: PaperElevation;
+  layer?: keyof ThemeZOrder;
+  color?: keyof ThemePalette;
+  textColor?: keyof ThemeText;
+  size?: keyof ThemeSizes;
+  dense?: boolean;
+}
+/** The defaults a theme may set for every `ContextMenu` - a `Menu`'s, placed at the pointer. */
+type ContextMenuOwnerState = Omit<MenuOwnerState, 'align'>;
+/** The defaults a theme may set for every `MenuList` - and so for its rows. */
+interface MenuListOwnerState {
+  color?: keyof ThemePalette;
+  textColor?: keyof ThemeText;
+  size?: keyof ThemeSizes;
+  dense?: boolean;
+  shouldWrap?: boolean;
+}
+/** The defaults a theme may set for every `MenuItem` - a list's own values win. */
+interface MenuItemOwnerState {
+  color?: keyof ThemePalette;
+  textColor?: keyof ThemeText;
+  size?: keyof ThemeSizes;
+  dense?: boolean;
+}
+/** The defaults a theme may set for every `Tab`. */
+interface TabOwnerState {
+  isWrapped?: boolean;
+  bg?: keyof ThemeBackground;
+  borderRadius?: keyof ThemeRadii;
+  color?: keyof ThemePalette;
+  textColor?: keyof ThemeText;
+  size?: keyof ThemeSizes;
+  selectedBg?: keyof ThemeBackground;
+}
+/** The defaults a theme may set for every `TabScrollButton`. */
+interface TabScrollButtonOwnerState {
+  color?: keyof ThemePalette;
+  textColor?: keyof ThemeText;
+}
+/** The defaults a theme may set for every `TabPanel`. */
+interface TabPanelOwnerState {
+  shouldKeepMounted?: boolean;
+}
 /** Token-typed Typography props a theme may set for Card's title/caption slots. */
 interface CardSlotTypographyProps {
   variant?: keyof ThemeTypographyVariants;
@@ -454,11 +591,13 @@ interface ThemeComponents {
   AppBar?: ComponentConfig;
   Avatar?: ComponentConfig<Record<string, unknown>, 'root' | 'img'>;
   Backdrop?: ComponentConfig;
+  Breadcrumbs?: ComponentConfig<BreadcrumbsOwnerState, 'root' | 'list' | 'item' | 'separator' | 'collapsed' | 'collapsedIcon'>;
   Button?: ComponentConfig<ButtonOwnerState, 'root' | 'label' | 'icon' | 'loader'>;
   ButtonGroup?: ComponentConfig;
   Card?: ComponentConfig<CardOwnerState, 'root' | 'title' | 'caption' | 'icon'>;
   Checkbox?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'icon'>;
   CircularProgress?: ComponentConfig<Record<string, unknown>, 'root' | 'track' | 'circle'>;
+  ContextMenu?: ComponentConfig<ContextMenuOwnerState, 'root' | 'paper'>;
   Drawer?: ComponentConfig;
   Flex?: ComponentConfig;
   FocusTrap?: ComponentConfig;
@@ -471,7 +610,10 @@ interface ThemeComponents {
   Image?: ComponentConfig;
   LinearProgress?: ComponentConfig<Record<string, unknown>, 'root' | 'track' | 'dash' | 'bar' | 'traveler' | 'segment' | 'secondaryBar'>;
   Link?: ComponentConfig;
-  MenuItem?: ComponentConfig<Record<string, unknown>, 'root' | 'check'>;
+  Menu?: ComponentConfig<MenuOwnerState, 'root' | 'paper'>;
+  MenuDivider?: ComponentConfig;
+  MenuItem?: ComponentConfig<MenuItemOwnerState, 'root' | 'check' | 'startIcon' | 'label' | 'shortcut' | 'submenuIcon' | 'entry' | 'secondaryAction'>;
+  MenuList?: ComponentConfig<MenuListOwnerState>;
   Modal?: ComponentConfig;
   NativeSelect?: ComponentConfig<Record<string, unknown>, 'root' | 'select' | 'icon'>;
   Pagination?: ComponentConfig<Record<string, unknown>, 'root' | 'list'>;
@@ -486,6 +628,7 @@ interface ThemeComponents {
   SidebarItem?: ComponentConfig;
   Skeleton?: ComponentConfig<Record<string, unknown>, 'root' | 'content'>;
   Switch?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'track' | 'thumb'>;
+  Tab?: ComponentConfig<TabOwnerState, 'root' | 'label' | 'icon' | 'secondaryAction' | 'close'>;
   Table?: ComponentConfig;
   TableBody?: ComponentConfig;
   TableCell?: ComponentConfig;
@@ -496,6 +639,9 @@ interface ThemeComponents {
   TablePaginationActions?: ComponentConfig;
   TableRow?: ComponentConfig;
   TableSortLabel?: ComponentConfig<Record<string, unknown>, 'root' | 'icon'>;
+  TabPanel?: ComponentConfig<TabPanelOwnerState>;
+  TabScrollButton?: ComponentConfig<TabScrollButtonOwnerState>;
+  Tabs?: ComponentConfig<TabsOwnerState, 'root' | 'list' | 'indicator' | 'startContent' | 'endContent' | 'scrollButton' | 'overflowButton' | 'overflowClose'>;
   TextInput?: ComponentConfig<Record<string, unknown>, 'root' | 'input'>;
   ToggleButton?: ComponentConfig;
   ToggleButtonGroup?: ComponentConfig;
@@ -616,4 +762,67 @@ declare const baseTheme: Theme;
  */
 declare const up: (from: import("@soroush.tech/styled-system").BreakpointInput) => string, down: (to: import("@soroush.tech/styled-system").BreakpointInput) => string, only: (key: string) => string, between: (from: import("@soroush.tech/styled-system").BreakpointInput, to: import("@soroush.tech/styled-system").BreakpointInput) => string, not: (key: string) => string, containerQueries: import("@soroush.tech/styled-system").ContainerQueries;
 //#endregion
-export { between as $, ThemeBreakpoints as A, ThemeRadii as B, PressableOwnerState as C, withBreakpointHelpers as Ct, ThemeBackground as D, ThemeAvatarSizes as E, ThemeIconSizes as F, ThemeSwitch as G, ThemeSizes as H, ThemeLayout as I, ThemeZOrder as J, ThemeText as K, ThemeLetterSpacings as L, ThemeDefaults as M, ThemeFontWeights as N, ThemeBorder as O, ThemeFonts as P, baseTheme as Q, ThemeLineHeights as R, PaletteEntry as S, BreakpointHelpers as St, Theme as T, ThemeSkeleton as U, ThemeShadow as V, ThemeSpace as W, TypographyVariantStyle as X, TypographyVariant as Y, avatar as Z, LayoutPanel as _, up as _t, CSSObject$1 as a, fontWeights as at, OpenScale as b, ThemeOverride as bt, CardSlotTypographyProps as c, layout as ct, ComponentVariant as d, not as dt, borderWidths as et, DefaultBreakpoints as f, only as ft, LayoutLength as g, typography as gt, LayoutEntry as h, space as ht, ButtonVariants as i, fontSizes as it, ThemeComponents as j, ThemeBorderWidths as k, ComponentConfig as l, letterSpacings as lt, LayoutContent as m, sizes as mt, BreakpointOverrides as n, containerQueries as nt, CardOwnerState as o, fonts as ot, LayoutBars as p, radii as pt, ThemeTypographyVariants as q, ButtonOwnerState as r, down as rt, CardSlotIconProps as s, icon as st, BreakpointKey as t, breakpoints as tt, ComponentStyle as u, lineHeights as ut, LayoutPanels as v, zOrder as vt, SizeEntry as w, PaletteColor as x, createTheme as xt, LayoutSpace as y, DeepPartial as yt, ThemePalette as z };
+//#region src/style/styled.d.ts
+/**
+ * Design-system additions to Emotion's styled options. A styled root that passes
+ * `name` becomes theme-customizable: `theme.components[name]` may contribute
+ * `styleOverrides` (per `slot`) and `variants`, appended after the component's
+ * own styles so the theme wins the cascade. Roots without `name` are plain
+ * Emotion - zero behavior change, zero cost.
+ */
+interface ThemeCustomizationOptions {
+  /** `theme.components` key enabling styleOverrides/variants for this root. */
+  name?: string;
+  /** The `styleOverrides` slot this root maps to. Default: `'root'`. */
+  slot?: string;
+  /**
+   * Styled-system prop parsers (`space`, `layout`, ...) appended AFTER the theme
+   * override resolver, so per-instance props (`m`, `p`, `width`, ...) always beat
+   * theme `styleOverrides`.
+   */
+  systemProps?: ReadonlyArray<Interpolation<never>>;
+  /**
+   * Custom mapping from render props to applied override styles - replaces the
+   * default `styleOverrides[slot]` lookup (for prop-keyed override keys).
+   */
+  overridesResolver?: (props: Record<string, unknown>, styleOverrides: Record<string, unknown>) => unknown;
+}
+/**
+ * The `styled.div`, `styled.span`, ... tag shorthands - mirrors Emotion's own
+ * `StyledTags`, retyped against this package's `Theme` instead of Emotion's
+ * (otherwise-empty) one, so `${({ theme }) => theme.space[2]}` template
+ * interpolations resolve to the real theme shape.
+ */
+type StyledTags = { [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+}, JSX.IntrinsicElements[Tag]>; };
+/** Overloads mirroring Emotion's, with the theme-customization options added. */
+interface CreateThemedStyled extends StyledTags {
+  <C extends ComponentClass<ComponentProps<C>>, ForwardedProps extends keyof ComponentProps<C> & string = keyof ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<ComponentProps<C>, ForwardedProps> & ThemeCustomizationOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+    theme?: Theme;
+  }, {}, {
+    ref?: Ref<InstanceType<C>>;
+  }>;
+  <C extends ComponentType<ComponentProps<C>>, ForwardedProps extends keyof ComponentProps<C> & string = keyof ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<ComponentProps<C>, ForwardedProps> & ThemeCustomizationOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+    theme?: Theme;
+  }>;
+  <C extends ComponentType<ComponentProps<C>>>(component: C, options?: StyledOptions<ComponentProps<C>> & ThemeCustomizationOptions): CreateStyledComponent<PropsOf<C> & {
+    theme?: Theme;
+  }>;
+  <Tag extends keyof JSX.IntrinsicElements, ForwardedProps extends keyof JSX.IntrinsicElements[Tag] & string = keyof JSX.IntrinsicElements[Tag] & string>(tag: Tag, options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps> & ThemeCustomizationOptions): CreateStyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+  }, Pick<JSX.IntrinsicElements[Tag], ForwardedProps>>;
+  <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<JSX.IntrinsicElements[Tag]> & ThemeCustomizationOptions): CreateStyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+  }, JSX.IntrinsicElements[Tag]>;
+}
+/**
+ * The design system's `styled` - Emotion's styled plus theme-level component
+ * customization (`theme.components[name].styleOverrides` / `.variants`).
+ */
+declare const styled: CreateThemedStyled;
+//#endregion
+export { ThemeLetterSpacings as $, MenuOwnerState as A, sizes as At, TabsVariants as B, Paper as Bt, LayoutEntry as C, icon as Ct, LayoutSpace as D, not as Dt, LayoutPanels as E, lineHeights as Et, SizeEntry as F, DeepPartial as Ft, ThemeBorderWidths as G, GapToken as Gt, ThemeAvatarSizes as H, PaperProps as Ht, TabOwnerState as I, ThemeOverride as It, ThemeDefaults as J, ViewBorderColorToken as Jt, ThemeBreakpoints as K, View as Kt, TabPanelOwnerState as L, createTheme as Lt, PaletteColor as M, typography as Mt, PaletteEntry as N, up as Nt, MenuItemOwnerState as O, only as Ot, PressableOwnerState as P, zOrder as Pt, ThemeLayout as Q, ViewProps as Qt, TabScrollButtonOwnerState as R, BreakpointHelpers as Rt, LayoutContent as S, fonts as St, LayoutPanel as T, letterSpacings as Tt, ThemeBackground as U, Flex as Ut, Theme as V, PaperElevation as Vt, ThemeBorder as W, FlexProps as Wt, ThemeFonts as X, ViewBorderWidthToken as Xt, ThemeFontWeights as Y, ViewBorderRadiusToken as Yt, ThemeIconSizes as Z, ViewColorToken as Zt, ComponentStyle as _, breakpoints as _t, ThemeCustomizationOptions as a, ThemeSkeleton as at, DefaultBreakpoints as b, fontSizes as bt, BreakpointKey as c, ThemeText as ct, ButtonVariants as d, TypographyVariant as dt, ThemeLineHeights as et, CSSObject$1 as f, TypographyVariantStyle as ft, ComponentConfig as g, borderWidths as gt, CardSlotTypographyProps as h, between as ht, props as i, ThemeSizes as it, OpenScale as j, space as jt, MenuListOwnerState as k, radii as kt, BreakpointOverrides as l, ThemeTypographyVariants as lt, CardSlotIconProps as m, baseTheme as mt, css as n, ThemeRadii as nt, styled as o, ThemeSpace as ot, CardOwnerState as p, avatar as pt, ThemeComponents as q, ViewBackgroundToken as qt, keyframes as r, ThemeShadow as rt, BreadcrumbsOwnerState as s, ThemeSwitch as st, createShouldForwardProp as t, ThemePalette as tt, ButtonOwnerState as u, ThemeZOrder as ut, ComponentVariant as v, containerQueries as vt, LayoutLength as w, layout as wt, LayoutBars as x, fontWeights as xt, ContextMenuOwnerState as y, down as yt, TabsOwnerState as z, withBreakpointHelpers as zt };

package/dist/{index-Wnv6jCR3.d.mts → index-DqjXDutI.d.mts}

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

package/dist/{index-GpnmW6vu.d.mts → index-DrVYWt-X.d.mts}

@@ -1,5 +1,4 @@
-import { T as Theme, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
+import { M as PaletteColor, V as Theme } from "./index-CVNJEUwJ.mjs";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes, ElementType } from "react";
 //#region src/Pressable/Pressable.d.ts

package/dist/{index-Belxmt1X.d.cts → index-DuVNRXP4.d.cts}

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

package/dist/{index-smqjMLAZ.d.mts → index-IdMqR82e.d.cts}

@@ -1,7 +1,6 @@
-import { T as Theme, Y as TypographyVariant } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { V as Theme, dt as TypographyVariant } from "./index-DmJ7yWWi.cjs";
 import { CSSProperties, ElementType, HTMLAttributes } from "react";
+import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Typography/Typography.d.ts
 type TypographyAlign = 'left' | 'right' | 'center' | 'justify' | 'inherit';
 /** Valid values for the color prop - derived from theme.text keys. */

package/dist/{index-DXvQ-JVZ.d.mts → index-XxydXX8l.d.cts}

@@ -1,7 +1,6 @@
-import { T as Theme, i as ButtonVariants, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { M as PaletteColor, V as Theme, d as ButtonVariants } from "./index-DmJ7yWWi.cjs";
 import { ButtonHTMLAttributes, ReactNode } from "react";
+import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Button/Button.d.ts
 /** Augmentable via the `ButtonVariants` interface - style new values through `theme.components.Button.variants`. */
 type ButtonVariant = keyof ButtonVariants;

package/dist/index-_G1osn09.d.mts

@@ -0,0 +1 @@
+import "./index-CVNJEUwJ.mjs";

package/dist/index-gnh-Oe0n.d.cts

@@ -0,0 +1,34 @@
+import { V as Theme } from "./index-DmJ7yWWi.cjs";
+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 };

package/dist/{index-DO9J-Fla.d.mts → index-qlfNErNd.d.cts}

@@ -1,6 +1,7 @@
-import { n as TextColorToken } from "./index-smqjMLAZ.mjs";
-import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { Z as ThemeIconSizes } from "./index-DmJ7yWWi.cjs";
+import { n as TextColorToken } from "./index-IdMqR82e.cjs";
 import { SVGProps } from "react";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Icon/icons/AccountTree.d.ts
 declare const SvgAccountTree: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
@@ -118,6 +119,9 @@ declare const SvgLock: (props: SVGProps<SVGSVGElement>) => import("react").JSX.E
 //#region src/Icon/icons/Menu.d.ts
 declare const SvgMenu: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
+//#region src/Icon/icons/MoreHoriz.d.ts
+declare const SvgMoreHoriz: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+//#endregion
 //#region src/Icon/icons/Neurology.d.ts
 declare const SvgNeurology: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
@@ -214,6 +218,7 @@ declare const icons: {
   readonly link: typeof SvgLink;
   readonly lock: typeof SvgLock;
   readonly menu: typeof SvgMenu;
+  readonly more_horiz: typeof SvgMoreHoriz;
   readonly neurology: typeof SvgNeurology;
   readonly psychology: typeof SvgPsychology;
   readonly rebase_edit: typeof SvgRebaseEdit;
@@ -242,8 +247,11 @@ interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'color' | 'ref' | 'wid
   name: IconName;
   /** Resolves against theme.text - applied as `color`, which the SVG inherits via `currentColor`. */
   color?: TextColorToken;
-  /** Sets both width and height (icons are square). */
-  size?: string | number;
+  /**
+   * Sets both width and height (icons are square): one of the theme's icon sizes (`'sm'`, `'md'`,
+   * `'lg'`), or any CSS length. Default: the theme's `iconSize`, else `'lg'`.
+   */
+  size?: keyof ThemeIconSizes | (string & {}) | number;
 }
 declare function Icon({ name, color, size, ...rest }: Readonly<IconProps>): import("react").JSX.Element;
 //#endregion