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

package/dist/computePopoverPosition-BIprs_xo.mjs

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

package/dist/computePopoverPosition-DiyEOHnU.cjs

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

package/dist/dividerLine-BNljcGlv.cjs

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

package/dist/dividerLine-FahY-M6_.mjs

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

package/dist/engine.d.cts

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

package/dist/engine.d.mts

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

package/dist/index-B3LIhqHR.d.cts

@@ -0,0 +1,98 @@
+import { B as TabsVariants, V as Theme } from "./index-DmJ7yWWi.cjs";
+import "./index-DDJuUfL5.cjs";
+import { t as TabValue } from "./TabsContext-C2agsLBN.cjs";
+import { n as TabScrollButtonProps } from "./index-gnh-Oe0n.cjs";
+import { ComponentType, ReactNode, Ref } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+//#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-DbEnSf2m.d.cts → index-B8DNxyEw.d.mts}

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

package/dist/{index-CxUsrlg1.d.cts → index-BCnKYNlZ.d.cts}

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

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

@@ -1,7 +1,6 @@
-import { T as Theme, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { SpaceProps } from "@soroush.tech/styled-system";
+import { M as PaletteColor, V as Theme } from "./index-DmJ7yWWi.cjs";
 import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
 //#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-BSqet8aO.d.cts → index-BSA6SKao.d.mts}

@@ -1,7 +1,6 @@
-import { T as Theme, Y as TypographyVariant } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { CSSProperties, ElementType, HTMLAttributes } from "react";
+import { V as Theme, dt as TypographyVariant } from "./index-CVNJEUwJ.mjs";
 import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { CSSProperties, ElementType, HTMLAttributes } from "react";
 //#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-CrN4MSUF.d.cts → index-BVPrG1L0.d.mts}

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

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

@@ -1,8 +1,7 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-DdqdSOct.cjs";
-import { HTMLAttributes } from "react";
+import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-DIC7HKpP.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
+import { HTMLAttributes } from "react";
 //#region src/Pagination/Pagination.d.ts
 type PaginationColor = PaginationItemColor;
 type PaginationVariant = PaginationItemVariant;

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

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

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

@@ -1,8 +1,7 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-BUoVTCqX.mjs";
-import { SpaceProps } from "@soroush.tech/styled-system";
+import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-BFruxTHv.cjs";
 import { HTMLAttributes } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/Pagination.d.ts
 type PaginationColor = PaginationItemColor;
 type PaginationVariant = PaginationItemVariant;

package/dist/index-BjPX49XA.d.mts

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

package/dist/{index-BB-dLv5V.d.mts → index-BjfPEP_5.d.cts}

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

package/dist/{index-Bid71KeF.d.cts → index-BlLH6rlE.d.cts}

@@ -1,5 +1,5 @@
-import { a as PaginationItemSize } from "./index-DdqdSOct.cjs";
-import "./index-Celm-8iN.cjs";
+import { a as PaginationItemSize } from "./index-BFruxTHv.cjs";
+import "./index-BiVvxOvj.cjs";
 import { HTMLAttributes } from "react";
 //#region src/Table/TablePaginationActions/TablePaginationActions.d.ts
 type TablePaginationActionType = 'first' | 'previous' | 'next' | 'last';

package/dist/{index-Ctqajtac.d.cts → index-BqpS_Huq.d.mts}

@@ -1,6 +1,7 @@
-import { n as TextColorToken } from "./index-BSqet8aO.cjs";
-import { SVGProps } from "react";
+import { Z as ThemeIconSizes } from "./index-CVNJEUwJ.mjs";
+import { n as TextColorToken } from "./index-BSA6SKao.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { SVGProps } from "react";
 //#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