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

package/dist/{themes-D-knykK0.mjs → themes-D3yxQwT9.mjs}

@@ -22,11 +22,11 @@ const withBreakpointHelpers = (scale) => {
 	return sizes;
 };
 // src/theme/themes.ts
-const shadow$1 = {
+const shadow = {
 	color: "#000000",
 	opacity: .4
 };
-const shadows = Array.from({ length: 25 }, (_, elevation) => generateBoxShadow(elevation, alpha(shadow$1.color, shadow$1.opacity)));
+const shadows = Array.from({ length: 25 }, (_, elevation) => generateBoxShadow(elevation, alpha(shadow.color, shadow.opacity)));
 const radii = {
 	sq: "0",
 	sm: "4px",
@@ -133,7 +133,7 @@ const sizes = {
 		fontSize: 1
 	}
 };
-const space$1 = {
+const space = {
 	0: 0,
 	.125: spacing(.125),
 	.25: spacing(.25),
@@ -161,7 +161,7 @@ const breakpoints = withBreakpointHelpers({
 	lg: "1200px",
 	xl: "1600px"
 });
-const layout$1 = {
+const layout = {
 	xs: {
 		bars: { top: 8 },
 		panels: {
@@ -213,7 +213,7 @@ const layout$1 = {
 		content: { maxWidth: "1600px" }
 	}
 };
-const typography$1 = {
+const typography = {
 	h1: {
 		element: "h1",
 		fontSize: 6,
@@ -296,16 +296,16 @@ const baseTheme = {
 	borderWidths,
 	fontSizes,
 	lineHeights,
-	typography: typography$1,
+	typography,
 	letterSpacings,
 	fontWeights,
 	fonts,
 	avatar,
 	icon,
 	sizes,
-	space: space$1,
+	space,
 	breakpoints,
-	layout: layout$1,
+	layout,
 	zOrder,
 	transitions,
 	blur: "12px",
@@ -390,7 +390,7 @@ const baseTheme = {
 	logoFilter: "brightness(0) invert(1)",
 	portraitBlend: "screen",
 	portraitOpacity: .8,
-	shadow: shadow$1,
+	shadow,
 	shadows
 };
 /**
@@ -398,4 +398,4 @@ const baseTheme = {
 * breakpoints has the same helpers on `theme.breakpoints`.
 */
 const { up, down, only, between, not, containerQueries } = breakpoints;
-export { zOrder as C, up as S, radii as _, breakpoints as a, transitions as b, fontSizes as c, icon as d, layout$1 as f, only as g, not as h, borderWidths as i, fontWeights as l, lineHeights as m, baseTheme as n, containerQueries as o, letterSpacings as p, between as r, down as s, avatar as t, fonts as u, sizes as v, withBreakpointHelpers as w, typography$1 as x, space$1 as y };
+export { zOrder as C, up as S, radii as _, breakpoints as a, transitions as b, fontSizes as c, icon as d, layout as f, only as g, not as h, borderWidths as i, fontWeights as l, lineHeights as m, baseTheme as n, containerQueries as o, letterSpacings as p, between as r, down as s, avatar as t, fonts as u, sizes as v, withBreakpointHelpers as w, typography as x, space as y };

package/dist/{useTablePagination-DOLl6Ba7.d.cts → useTablePagination-Be__hayI.d.mts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-BYg-l1_n.cjs";
+import { n as TableSortLabelDirection } from "./index-CR-3ET8R.mjs";
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {
   isActive: boolean;

package/dist/{useTablePagination-bZTeweJ_.d.mts → useTableSort-DQWSd9Rf.d.cts}

@@ -1,25 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-BJIqJbF4.mjs";
-/** One column's sort state - spreads directly onto `TableSortLabel`. */
-interface TableSortEntry {
-  isActive: boolean;
-  direction: TableSortLabelDirection;
-  /** Activates the column and flips its stored direction. */
-  onClick: () => void;
-}
-type TableSortMap<K extends string = string> = Record<K, TableSortEntry>;
-/**
- * Column-keyed sort state for sortable tables. Each column remembers its own
- * direction (initially `'asc'`); clicking a column activates it AND flips its
- * stored direction - so the first click on a column sorts `'desc'`.
- * `keys` is read once on mount.
- *
- * ```tsx
- * const sort = useTableSort(['name', 'latency'])
- * <TableSortLabel {...sort.name}>Service</TableSortLabel>
- * <TableControl data={rows} sort={sort}>{(row) => ...}</TableControl>
- * ```
- */
-declare function useTableSort<K extends string>(keys: readonly K[], onChange?: (key: K, direction: TableSortLabelDirection) => void): TableSortMap<K>;
+import { TableSortLabelDirection } from "./Table/TableSortLabel.cjs";
 interface UseTablePaginationOptions {
   /** Initial zero-based page. Default: `0`. */
   defaultPage?: number;
@@ -44,4 +23,25 @@ interface TablePaginationState {
  * ```
  */
 declare function useTablePagination({ defaultPage, defaultRowsPerPage }?: UseTablePaginationOptions): TablePaginationState;
-export { TableSortMap as a, TableSortEntry as i, UseTablePaginationOptions as n, useTableSort as o, useTablePagination as r, TablePaginationState as t };
+/** One column's sort state - spreads directly onto `TableSortLabel`. */
+interface TableSortEntry {
+  isActive: boolean;
+  direction: TableSortLabelDirection;
+  /** Activates the column and flips its stored direction. */
+  onClick: () => void;
+}
+type TableSortMap<K extends string = string> = Record<K, TableSortEntry>;
+/**
+ * Column-keyed sort state for sortable tables. Each column remembers its own
+ * direction (initially `'asc'`); clicking a column activates it AND flips its
+ * stored direction - so the first click on a column sorts `'desc'`.
+ * `keys` is read once on mount.
+ *
+ * ```tsx
+ * const sort = useTableSort(['name', 'latency'])
+ * <TableSortLabel {...sort.name}>Service</TableSortLabel>
+ * <TableControl data={rows} sort={sort}>{(row) => ...}</TableControl>
+ * ```
+ */
+declare function useTableSort<K extends string>(keys: readonly K[], onChange?: (key: K, direction: TableSortLabelDirection) => void): TableSortMap<K>;
+export { UseTablePaginationOptions as a, TablePaginationState as i, TableSortMap as n, useTablePagination as o, useTableSort as r, TableSortEntry as t };

package/dist/{useTransition-DnOAXNav.d.cts → useTransition-CdObuV2M.d.cts}

@@ -1,4 +1,4 @@
-import { nt as Theme } from "./index-CK-uaK5U.cjs";
+import { nt as Theme } from "./index-MipJMh6w.cjs";
 import { ReactElement } from "react";
 /** How long a transition takes in milliseconds - one for both ways, or one for each. */
 type TransitionTimeout = number | {

package/dist/{useTransition-Dk84FQFT.d.mts → useTransition-DwlKWjUJ.d.mts}

@@ -1,4 +1,4 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
+import { nt as Theme } from "./index-nw0pvCoK.mjs";
 import { ReactElement } from "react";
 /** How long a transition takes in milliseconds - one for both ways, or one for each. */
 type TransitionTimeout = number | {

package/dist/{useTransitionChild-CFhlMm65.mjs → useTransitionChild-De79LIB9.mjs}

@@ -1,6 +1,6 @@
-import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
-import { t as useTransition } from "./useTransition-CWxiEqtC.mjs";
 import { t as useMergedRefs } from "./useMergedRefs-CdfwtmUd.mjs";
+import { r as useTheme } from "./theme-B6LFWZ98.mjs";
+import { t as useTransition } from "./useTransition-CWxiEqtC.mjs";
 import { cloneElement, useRef } from "react";
 // src/utils/useTransitionChild.ts
 const chain = (own, given) => (node) => {

package/dist/utils.d.cts

@@ -1,7 +1,7 @@
-declare const generateBoxShadow: (elevation: number, shadowColor: string) => string;
+export declare const generateBoxShadow: (elevation: number, shadowColor: string) => string;
 /** Clamps `value` to the inclusive range `[min, max]`. */
-declare function clamp(value: number, min: number, max: number): number;
-declare function luminance(hex: string): number;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function luminance(hex: string): number;
 /**
  * Appends an alpha channel to a 6-digit hex color, producing an 8-digit `#RRGGBBAA` hex.
  * @param color - 6-digit hex string, e.g. `'#4ade80'`
@@ -9,5 +9,4 @@ declare function luminance(hex: string): number;
  * @returns 8-digit hex string, e.g. `'#4ade801A'`
  * @example alpha('#4ade80', 0.1) // '#4ade801A'
  */
-declare const alpha: (color: string, opacity: number) => string;
-export { alpha, clamp, generateBoxShadow, luminance };
+export declare const alpha: (color: string, opacity: number) => string;

package/dist/utils.d.mts

@@ -1,7 +1,7 @@
-declare const generateBoxShadow: (elevation: number, shadowColor: string) => string;
+export declare const generateBoxShadow: (elevation: number, shadowColor: string) => string;
 /** Clamps `value` to the inclusive range `[min, max]`. */
-declare function clamp(value: number, min: number, max: number): number;
-declare function luminance(hex: string): number;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function luminance(hex: string): number;
 /**
  * Appends an alpha channel to a 6-digit hex color, producing an 8-digit `#RRGGBBAA` hex.
  * @param color - 6-digit hex string, e.g. `'#4ade80'`
@@ -9,5 +9,4 @@ declare function luminance(hex: string): number;
  * @returns 8-digit hex string, e.g. `'#4ade801A'`
  * @example alpha('#4ade80', 0.1) // '#4ade801A'
  */
-declare const alpha: (color: string, opacity: number) => string;
-export { alpha, clamp, generateBoxShadow, luminance };
+export declare const alpha: (color: string, opacity: number) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/design-system",
-  "version": "2.1.0",
+  "version": "2.1.2-rc.0",
   "description": "Emotion + @soroush.tech/styled-system React component library - token-driven light/dark themes, layout primitives, forms, and overlays.",
   "keywords": [
     "design-system",
@@ -727,7 +727,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@soroush.tech/styled-system": "^6.0.0"
+    "@soroush.tech/styled-system": "^6.0.1-rc.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -735,26 +735,26 @@
   },
   "devDependencies": {
     "@emotion/css": "^11.13.5",
-    "@storybook/addon-a11y": "^10.6.3",
-    "@storybook/addon-docs": "^10.6.3",
-    "@storybook/addon-vitest": "^10.6.3",
-    "@storybook/react-vite": "^10.6.3",
+    "@storybook/addon-a11y": "^10.6.7",
+    "@storybook/addon-docs": "^10.6.7",
+    "@storybook/addon-vitest": "^10.6.7",
+    "@storybook/react-vite": "^10.6.7",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@types/node": "^26.6.5",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@vitest/browser-playwright": "^5.0.5",
-    "@vitest/coverage-v8": "^5.0.5",
-    "jsdom": "^29.1.1",
-    "oxlint": "^1.89.0",
-    "playwright": "^1.64.1",
+    "@vitest/browser-playwright": "^5.1.0",
+    "@vitest/coverage-v8": "^5.1.0",
+    "jsdom": "^31.0.0",
+    "oxlint": "^1.93.0",
+    "playwright": "^1.65.0",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
-    "storybook": "^10.6.3",
-    "tsdown": "^0.22.14",
+    "storybook": "^10.6.7",
+    "tsdown": "^0.23.7",
     "typescript": "~7.0.2",
-    "vitest": "^5.0.5",
+    "vitest": "^5.1.0",
     "zod": "^4.6.7",
     "@soroush.tech/docs-content": "0.1.0",
     "@soroush.tech/eslint-config": "0.0.0"

package/dist/emotion-E3pBNlXd.mjs

@@ -1,5 +0,0 @@
-import { CacheProvider, Global, ThemeContext as EmotionThemeContext, ThemeProvider as EmotionThemeProvider, useTheme as useEmotionTheme } from "@emotion/react";
-// src/theme/emotion.ts
-/** `Global`, retyped against this package's own `Theme` (see `styled.ts`'s `StyledTags`). */
-const Global$1 = Global;
-export { useEmotionTheme as a, Global$1 as i, EmotionThemeContext as n, EmotionThemeProvider as r, CacheProvider as t };

package/dist/index-3-LXZL7g.d.mts

@@ -1,39 +0,0 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
-import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-BMeqk34D.mjs";
-import { SpaceProps } from "@soroush.tech/styled-system";
-import { ElementType, HTMLAttributes } from "react";
-type ButtonGroupOrientation = 'horizontal' | 'vertical';
-type ButtonGroupRadius = keyof Theme['radii'];
-interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, SpaceProps<Theme> {
-  /** Visual style for all child buttons. Default: `'outlined'`. */
-  variant?: ButtonVariant;
-  /** Color palette for all child buttons - resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
-  color?: ButtonColor;
-  /** Density for all child buttons - resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
-  size?: ButtonSize;
-  /** Layout flow direction. Default: `'horizontal'`. */
-  orientation?: ButtonGroupOrientation;
-  /** Group corner radius - rounds the group's outer corners only. Resolves against `theme.radii`. Default: 'md', overridable via `theme.defaults.borderRadius`. */
-  borderRadius?: ButtonGroupRadius;
-  /** Disables all child buttons. Default: `false`. */
-  disabled?: boolean;
-  /** Group fills its container; children share the width. Default: `false`. */
-  fullWidth?: boolean;
-  as?: ElementType;
-}
-/**
- * Groups related `Button` immediate children into a visually joined cluster and
- * broadcasts `variant` / `color` / `size` / `disabled` / `fullWidth` to them via
- * `ButtonGroupContext` (explicit props on a child win).
- */
-declare function ButtonGroup({ variant, color, size, orientation, borderRadius, disabled, fullWidth, as, children, ...rest }: Readonly<ButtonGroupProps>): import("react").JSX.Element;
-/** Group-wide defaults provided by `ButtonGroup` and consumed by `Button` (explicit props win). */
-interface ButtonGroupContextValue {
-  variant?: ButtonVariant;
-  color?: ButtonColor;
-  size?: ButtonSize;
-  disabled?: boolean;
-  fullWidth?: boolean;
-}
-declare const ButtonGroupContext: import("react").Context<ButtonGroupContextValue>;
-export { ButtonGroupProps as a, ButtonGroupOrientation as i, ButtonGroupContextValue as n, ButtonGroupRadius as o, ButtonGroup as r, ButtonGroupContext as t };

package/dist/index-BMeqk34D.d.mts

@@ -1,47 +0,0 @@
-import { U as PaletteColor, _ as ButtonVariants, nt as Theme } from "./index-B-1sp9oV.mjs";
-import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
-import { ButtonHTMLAttributes, ReactNode } from "react";
-/** Augmentable via the `ButtonVariants` interface - style new values through `theme.components.Button.variants`. */
-type ButtonVariant = keyof ButtonVariants;
-type ButtonColor = PaletteColor;
-type ButtonSize = keyof Theme['sizes'];
-type ButtonShape = 'square' | 'rounded' | 'pill';
-type ButtonLoadingPosition = 'start' | 'end' | 'center';
-/** Valid values for the gap prop - resolves against theme.space. */
-type GapToken = keyof Theme['space'];
-interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, SpaceProps<Theme>, LayoutProps<Theme>, BorderProps<Theme>, TypographyProps<Theme> {
-  /** Visual style - filled, stroked, or ghost. Default: `'contained'`, overridable via `theme.defaults.buttonVariant`. */
-  variant?: ButtonVariant;
-  /** Color palette - maps to `theme.palette[color]`. Default: `'primary'`, overridable via `theme.defaults.color`. */
-  color?: ButtonColor;
-  /** Size token - controls padding and font size. Default: `'md'`, overridable via `theme.defaults.size`. */
-  size?: ButtonSize;
-  /** Gap between icon and label - resolves against theme.space. Default: `1` (8px). */
-  gap?: GapToken;
-  /** Icon rendered before the label. */
-  startIcon?: ReactNode;
-  /** Icon rendered after the label. */
-  endIcon?: ReactNode;
-  /** Stretch button to full container width. */
-  fullWidth?: boolean;
-  /** Shows loading indicator and disables the button. */
-  loading?: boolean;
-  /** Custom loading element. Default: animated spinner. */
-  loadingIndicator?: ReactNode;
-  /**
-   * Corner shape - sets the default `borderRadius`.
-   * `"square"` → 0 · `"rounded"` → `theme.radii.md` (default) · `"pill"` → 9999px
-   * The `borderRadius` prop always overrides this.
-   */
-  shape?: ButtonShape;
-  /** Where the loading indicator appears. Default: `"center"`. */
-  loadingPosition?: ButtonLoadingPosition;
-  /** The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. */
-  href?: string;
-  /** Anchor `target` - only meaningful when `href` is set. */
-  target?: string;
-  /** Anchor `rel` - only meaningful when `href` is set. */
-  rel?: string;
-}
-declare function Button({ variant, color, size, shape, gap, fontWeight, letterSpacing, startIcon, endIcon, fullWidth, loading, loadingIndicator, loadingPosition, children, disabled, href, target, rel, ...rest }: Readonly<ButtonProps>): import("react").JSX.Element;
-export { ButtonShape as a, GapToken as c, ButtonProps as i, ButtonColor as n, ButtonSize as o, ButtonLoadingPosition as r, ButtonVariant as s, Button as t };

package/dist/index-BYg-l1_n.d.cts

@@ -1,23 +0,0 @@
-import { nt as Theme } from "./index-CK-uaK5U.cjs";
-import { n as IconProps, r as IconName } from "./index-CLTH0nFB.cjs";
-import { ButtonHTMLAttributes } from "react";
-import { SpaceProps } from "@soroush.tech/styled-system";
-type TableSortLabelDirection = 'asc' | 'desc';
-interface TableSortLabelProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, SpaceProps<Theme> {
-  /** Marks the currently-sorted column - shows the icon fully opaque. Default: `false`. */
-  isActive?: boolean;
-  /** Current sort direction - rotates the arrow. Default: `'asc'`. */
-  direction?: TableSortLabelDirection;
-  /**
-   * Hides the inactive sort icon, revealing it on hover/focus. Set `false` to
-   * keep it always visible (dimmed while inactive). Inherited from the
-   * enclosing `Table`'s `shouldHideSortIcon` via `TableContext`. Default: `true`.
-   */
-  shouldHideSortIcon?: boolean;
-  /** Sort arrow icon. Default: `'arrow_upward'`. */
-  iconName?: IconName;
-  /** Extra props for the sort arrow icon. */
-  iconProps?: Omit<IconProps, 'name'>;
-}
-declare function TableSortLabel({ isActive, direction, shouldHideSortIcon, iconName, iconProps, type, children, ...rest }: Readonly<TableSortLabelProps>): import("react").JSX.Element;
-export { TableSortLabelDirection as n, TableSortLabelProps as r, TableSortLabel as t };

package/dist/index-BbWQZ2Wj.d.mts

@@ -1,104 +0,0 @@
-import { nt as Theme, tt as TabsVariants } from "./index-B-1sp9oV.mjs";
-import "./index-C_K0hsEr.mjs";
-import { t as TabValue } from "./TabsContext-D5E7s9i5.mjs";
-import { n as TabScrollButtonProps } from "./index-DXUVsHux.mjs";
-import { SpaceProps } from "@soroush.tech/styled-system";
-import { ComponentType, ReactNode, Ref } from "react";
-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;
-  /**
-   * Names each closable tab's close button for assistive technology - and the one in the overflow
-   * menu - by its `closeLabel`, so it is a button a screen reader finds and presses by name, still
-   * out of the tab order. It is a sibling of the tab, not inside it, so a tablist of tabs and their
-   * close buttons is read as one. Without it, the button is the pointer's alone and Delete closes
-   * the focused tab. Default: `false`.
-   */
-  shouldAnnounceClose?: boolean;
-  /** `'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, the selected tab boxed, or `'tonal'` - the tabs in a rounded container, the selected one a tinted pill. 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, shouldAnnounceClose, 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;
-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-Bwry7fNj.d.mts

@@ -1,22 +0,0 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-C9jnQ-mQ.mjs";
-import { SpaceProps } from "@soroush.tech/styled-system";
-import { HTMLAttributes } from "react";
-type PaginationColor = PaginationItemColor;
-type PaginationVariant = PaginationItemVariant;
-type PaginationShape = PaginationItemShape;
-type PaginationSize = PaginationItemSize;
-interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onChange'>, UsePaginationProps, SpaceProps<Theme> {
-  /** Selected-item color - resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
-  color?: PaginationColor;
-  /** Item style - `text` or `outlined`. Default: `'text'`. */
-  variant?: PaginationVariant;
-  /** Item corner shape. Default: `'circular'`. */
-  shape?: PaginationShape;
-  /** Item density - resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
-  size?: PaginationSize;
-  /** Accessible name per item - important for screen readers. A sensible default is provided. */
-  getItemAriaLabel?: (type: PaginationItemType, page: number | null, isSelected: boolean) => string;
-}
-declare function Pagination({ count, page, defaultPage, siblingCount, boundaryCount, disabled, shouldShowFirstButton, shouldShowLastButton, shouldHidePrevButton, shouldHideNextButton, onChange, color, variant, shape, size, getItemAriaLabel, 'aria-label': ariaLabel, ...rest }: Readonly<PaginationProps>): import("react").JSX.Element;
-export { PaginationSize as a, PaginationShape as i, PaginationColor as n, PaginationVariant as o, PaginationProps as r, Pagination as t };

package/dist/index-C3D70-3U.d.mts

@@ -1,74 +0,0 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
-import { t as MenuItemValue } from "./MenuListContext-BN1VV12-.mjs";
-import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
-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: 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.
- */
-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;
-export { MenuItemSize as a, MenuItemRole as i, MenuItemColor as n, MenuItemTextColor as o, MenuItemProps as r, MenuItem as t };