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

package/dist/{index-BhibLnZ0.d.cts → index-Bxd9NOWb.d.mts}

@@ -1,7 +1,6 @@
-import { T as Theme, i as ButtonVariants, x as PaletteColor } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { ButtonHTMLAttributes, ReactNode } from "react";
+import { M as PaletteColor, V as Theme, d as ButtonVariants } from "./index-CVNJEUwJ.mjs";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { ButtonHTMLAttributes, ReactNode } from "react";
 //#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-C3KrFPCj.d.mts

@@ -0,0 +1,35 @@
+import { t as MenuItemValue } from "./MenuListContext-Dml16k0X.mjs";
+import { i as MenuItemRole } from "./index-Cj5Rhh_9.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/{themes-RX2UX5gD.d.mts → index-CVNJEUwJ.d.mts}

@@ -1,6 +1,71 @@
-import { CSSObject } from "@emotion/react";
-import { ContainerQueries, QueryHelpers } from "@soroush.tech/styled-system";
-import { ElementType } from "react";
+import { CreateStyledComponent, FilteringStyledOptions, Interpolation, StyledOptions } from "@emotion/styled";
+import { CSSObject, PropsOf, css as css$1, keyframes } from "@emotion/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";
+import { CSSProperties, ComponentClass, ComponentProps, ComponentType, ElementType, HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#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;
@@ -601,10 +747,10 @@ declare const avatar: {
 };
 declare const icon: ThemeIconSizes;
 declare const sizes: ThemeSizes;
-declare const space: ThemeSpace;
+declare const space$1: ThemeSpace;
 declare const breakpoints: ThemeBreakpoints & BreakpointHelpers;
-declare const layout: ThemeLayout;
-declare const typography: ThemeTypographyVariants;
+declare const layout$1: ThemeLayout;
+declare const typography$1: ThemeTypographyVariants;
 /**
  * The package's complete default theme (dark-schemed). Raw hex only - palettes
  * belong to the consumer, who builds brand themes with `createTheme(baseTheme, ...)`.
@@ -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$1 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$1 as jt, MenuListOwnerState as k, radii as kt, BreakpointOverrides as l, ThemeTypographyVariants as lt, CardSlotIconProps as m, baseTheme as mt, css$1 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$1 as wt, LayoutBars as x, fontWeights as xt, ContextMenuOwnerState as y, down as yt, TabsOwnerState as z, withBreakpointHelpers as zt };

package/dist/index-CWnbCxgw.d.cts

@@ -0,0 +1,72 @@
+import { V as Theme, Vt as PaperElevation } from "./index-DmJ7yWWi.cjs";
+import "./index-DBteSahY.cjs";
+import { t as MenuItemValue } from "./MenuListContext-vujGcRk9.cjs";
+import { n as MenuItemData } from "./index-DQcnJ5H4.cjs";
+import { 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-Cj5Rhh_9.d.mts

@@ -0,0 +1,72 @@
+import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { t as MenuItemValue } from "./MenuListContext-Dml16k0X.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-CoEqjFYn.d.mts

@@ -0,0 +1,98 @@
+import { B as TabsVariants, V as Theme } from "./index-CVNJEUwJ.mjs";
+import "./index-BVPrG1L0.mjs";
+import { t as TabValue } from "./TabsContext-DqyxdmGW.mjs";
+import { n as TabScrollButtonProps } from "./index-BjPX49XA.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { ComponentType, ReactNode, Ref } from "react";
+//#region src/Tabs/Tabs/Tabs.d.ts
+type TabsVariant = keyof TabsVariants;
+type TabsOrientation = 'horizontal' | 'vertical';
+/** What the row does when its tabs don't fit: scroll, list the rest in a menu, or nothing. */
+type TabsOverflowBehavior = 'scroll' | 'menu' | 'none';
+/** When a scrolling row shows its scroll buttons. */
+type TabsScrollButtons = 'auto' | 'always' | 'never';
+/** What `action` exposes. */
+interface TabsActions {
+  /** Re-measures the selected tab for the indicator - after a font loads or a label changes. */
+  updateIndicator: () => void;
+  /** Re-reads whether the tabs overflow - for the scroll buttons, or which tabs go to the menu. */
+  updateOverflow: () => void;
+}
+interface TabsProps extends SpaceProps<Theme> {
+  /** `Tab`s. */
+  children?: ReactNode;
+  /** The selected tab's value - `null` for none. Controlled with `onChange`. */
+  value?: TabValue | null;
+  /** The selected tab's value at first, when uncontrolled. */
+  defaultValue?: TabValue | null;
+  /** Fired with a tab's value when it is chosen. */
+  onChange?: (value: TabValue) => void;
+  /** Fired with a closable tab's value when its close button, a middle click or Delete closes it. Removing the tab, and picking the next selection, are the app's. */
+  onTabClose?: (value: TabValue) => void;
+  /** `'nav'` makes it a navigation of links or buttons (`aria-current="page"`) rather than a `tablist`. Default: `'div'`. */
+  as?: 'div' | 'nav';
+  /** Default: `'horizontal'`. */
+  orientation?: TabsOrientation;
+  /** The look: an indicator under the selected tab, or the selected tab boxed. Default: `'underline'`, overridable via `theme.components.Tabs.defaultProps`. */
+  variant?: TabsVariant;
+  /** The indicator's or outline's color - resolves to `theme.palette[color]`. Default: `'primary'`. */
+  color?: keyof Theme['palette'];
+  /** The labels' color - resolves against `theme.text`. Default: `'primary'`. */
+  textColor?: keyof Theme['text'];
+  /** Density token - resolves against `theme.sizes`. Default: `'md'`. */
+  size?: keyof Theme['sizes'];
+  /** The tabs share the row's width equally. Default: `false`. */
+  fullWidth?: boolean;
+  /** The tabs sit in the middle of the row. Default: `false`. */
+  isCentered?: boolean;
+  /** Moving focus with the arrow keys selects as it goes. Default: `false` - Enter or Space selects. */
+  shouldSelectOnFocus?: boolean;
+  /** What the row does when its tabs don't fit: `'scroll'` - it scrolls, with scroll buttons; `'menu'` - it shows the tabs that fit whole and lists the rest in a menu. Default: `'none'`. */
+  overflowBehavior?: TabsOverflowBehavior;
+  /** With `overflowBehavior="menu"`: names the button that opens the menu of the tabs that don't fit ("More tabs"). */
+  overflowLabel?: string;
+  /** With `overflowBehavior="scroll"`: `'auto'` shows them while the tabs overflow, each only while tabs are out of view its way; `'always'` keeps both, disabled at an end; `'never'` hides them. Default: `'auto'`. */
+  scrollButtons?: TabsScrollButtons;
+  /** Show the scroll buttons on narrow screens too, where swiping does the job. Default: `false`. */
+  shouldShowScrollButtonsOnMobile?: boolean;
+  /** Show the list's scrollbar. Default: `false`. */
+  hasVisibleScrollbar?: boolean;
+  /**
+   * A line along the row's foot (a column's end side), under its own content too. In the
+   * enclosed look it runs round the selected tab. Default: `true`, but `false` in the boxed look.
+   */
+  hasDivider?: boolean;
+  /** The tab strip's ground - resolves against `theme.background`. */
+  bg?: keyof Theme['background'];
+  /**
+   * The selected tab's ground - resolves against `theme.background`. Give its `TabPanel` the same
+   * `bg` and the two read as one. Default: `'paper'` in the boxed look, and in the enclosed look
+   * without a divider; none otherwise.
+   */
+  selectedBg?: keyof Theme['background'];
+  /** Components in place of its own: `scrollButton` - a button that takes `TabScrollButton`'s props. */
+  slots?: {
+    scrollButton?: ComponentType<TabScrollButtonProps>;
+  };
+  /** Before the tabs - an icon, a button, any component. The arrow keys don't reach it. */
+  startContent?: ReactNode;
+  /** After the tabs - a toolbar, a "+" button, any component. The arrow keys don't reach it. */
+  endContent?: ReactNode;
+  /** Imperative handle - see `TabsActions`. */
+  action?: Ref<TabsActions>;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A row of tabs. By default a `tablist`: one tab in the page's tab order, the
+ * arrow keys of its orientation moving between tabs, Enter or Space selecting (or moving
+ * focus selecting, with `shouldSelectOnFocus`). With `as="nav"`, the same look as a
+ * navigation, its current tab marked `aria-current="page"`. Content of the row's own sits
+ * before and after the tabs.
+ */
+declare function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, as, orientation, variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth, isCentered, shouldSelectOnFocus, overflowBehavior, overflowLabel, scrollButtons, shouldShowScrollButtonsOnMobile, hasVisibleScrollbar, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, id, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabsProps>): import("react").JSX.Element;
+//#endregion
+export { TabsProps as a, TabsOverflowBehavior as i, TabsActions as n, TabsScrollButtons as o, TabsOrientation as r, TabsVariant as s, Tabs as t };

package/dist/{index-S-ClM6WM.d.mts → index-CrIxI8Na.d.mts}

@@ -1,5 +1,5 @@
-import { a as PaginationItemSize } from "./index-BUoVTCqX.mjs";
-import "./index-Chg6pSrr.mjs";
+import { a as PaginationItemSize } from "./index-DIC7HKpP.mjs";
+import "./index-BbgFYfX_.mjs";
 import { HTMLAttributes } from "react";
 //#region src/Table/TablePaginationActions/TablePaginationActions.d.ts
 type TablePaginationActionType = 'first' | 'previous' | 'next' | 'last';

package/dist/index-DBteSahY.d.cts

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