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

package/dist/index-WHFhjfgy.d.cts

@@ -0,0 +1,98 @@
+import { U as TabsVariants, W as Theme } from "./index-DJ0f69wh.cjs";
+import "./index-DchHf5cF.cjs";
+import { t as TabValue } from "./TabsContext-B_XHbjcS.cjs";
+import { n as TabScrollButtonProps } from "./index-KnXhlKMr.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-GpnmW6vu.d.mts → index-YKrfFC_I.d.cts}

@@ -1,7 +1,6 @@
-import { T as Theme, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { P as PaletteColor, W as Theme } from "./index-DJ0f69wh.cjs";
 import { ButtonHTMLAttributes, ElementType } from "react";
+import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Pressable/Pressable.d.ts
 /**
  * Press feedback: `none` leaves the wrapped content untouched, `opacity` dims it

package/dist/index-bpnLB_4K.d.mts

@@ -0,0 +1,98 @@
+import { U as TabsVariants, W as Theme } from "./index-CJhK7JND.mjs";
+import "./index-h4dYtVrp.mjs";
+import { t as TabValue } from "./TabsContext-Dn2kqUwr.mjs";
+import { n as TabScrollButtonProps } from "./index-CE5JG1us.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-VOsBSWEu.d.mts → index-h4dYtVrp.d.mts}

@@ -1,4 +1,4 @@
-import { I as ThemeLayout, M as ThemeDefaults, T as Theme, j as ThemeComponents } from "./themes-RX2UX5gD.mjs";
+import { W as Theme, X as ThemeComponents, Z as ThemeDefaults, tt as ThemeLayout } from "./index-CJhK7JND.mjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/theme/ThemeProvider.d.ts
 interface ThemeProviderProps {

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

@@ -1,9 +1,13 @@
-import { n as TextColorToken } from "./index-smqjMLAZ.mjs";
+import { et as ThemeIconSizes } from "./index-CJhK7JND.mjs";
+import { n as TextColorToken } from "./index-ClZyaZrR.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
+//#region src/Icon/icons/Add.d.ts
+declare const SvgAdd: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+//#endregion
 //#region src/Icon/icons/AdsClick.d.ts
 declare const SvgAdsClick: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
@@ -118,6 +122,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
@@ -130,6 +137,9 @@ declare const SvgRebaseEdit: (props: SVGProps<SVGSVGElement>) => import("react")
 //#region src/Icon/icons/Refresh.d.ts
 declare const SvgRefresh: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
+//#region src/Icon/icons/Remove.d.ts
+declare const SvgRemove: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+//#endregion
 //#region src/Icon/icons/Schema.d.ts
 declare const SvgSchema: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
@@ -151,6 +161,12 @@ declare const SvgSpeed: (props: SVGProps<SVGSVGElement>) => import("react").JSX.
 //#region src/Icon/icons/Stacks.d.ts
 declare const SvgStacks: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
+//#region src/Icon/icons/Star.d.ts
+declare const SvgStar: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+//#endregion
+//#region src/Icon/icons/StarBorder.d.ts
+declare const SvgStarBorder: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+//#endregion
 //#region src/Icon/icons/Table.d.ts
 declare const SvgTable: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
@@ -176,6 +192,7 @@ declare const SvgZoomOut: (props: SVGProps<SVGSVGElement>) => import("react").JS
 /** Registry of available icons, keyed by their asset file name. */
 declare const icons: {
   readonly account_tree: typeof SvgAccountTree;
+  readonly add: typeof SvgAdd;
   readonly ads_click: typeof SvgAdsClick;
   readonly analytics: typeof SvgAnalytics;
   readonly architecture: typeof SvgArchitecture;
@@ -214,10 +231,12 @@ 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;
   readonly refresh: typeof SvgRefresh;
+  readonly remove: typeof SvgRemove;
   readonly schema: typeof SvgSchema;
   readonly security: typeof SvgSecurity;
   readonly settings_input_component: typeof SvgSettingsInputComponent;
@@ -225,6 +244,8 @@ declare const icons: {
   readonly smartphone: typeof SvgSmartphone;
   readonly speed: typeof SvgSpeed;
   readonly stacks: typeof SvgStacks;
+  readonly star: typeof SvgStar;
+  readonly star_border: typeof SvgStarBorder;
   readonly table: typeof SvgTable;
   readonly terminal: typeof SvgTerminal;
   readonly visibility: typeof SvgVisibility;
@@ -242,8 +263,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

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

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

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

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

package/dist/index.d.cts

@@ -1,4 +1,3 @@
-import { T as Theme, a as CSSObject, x as PaletteColor } from "./themes-Kbk9h5cN.cjs";
-import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-DBUwu65Z.cjs";
+import { P as PaletteColor, W as Theme, a as ThemeCustomizationOptions, f as CSSObject, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-DJ0f69wh.cjs";
 export * from "@soroush.tech/styled-system";
 export { type CSSObject, type PaletteColor, type Theme, type ThemeCustomizationOptions, createShouldForwardProp, css, keyframes, props, styled };

package/dist/index.d.mts

@@ -1,4 +1,3 @@
-import { T as Theme, a as CSSObject, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
-import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-C1WqEDtQ.mjs";
+import { P as PaletteColor, W as Theme, a as ThemeCustomizationOptions, f as CSSObject, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-CJhK7JND.mjs";
 export * from "@soroush.tech/styled-system";
 export { type CSSObject, type PaletteColor, type Theme, type ThemeCustomizationOptions, createShouldForwardProp, css, keyframes, props, styled };

package/dist/isRtl-BJDtm86G.mjs

@@ -0,0 +1,7 @@
+//#region src/utils/isRtl.ts
+/** Whether an element sits in a right-to-left context - its nearest `dir` says so. */
+function isRtl(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+//#endregion
+export { isRtl as t };

package/dist/isRtl-DTkYHRPo.cjs

@@ -0,0 +1,12 @@
+//#region src/utils/isRtl.ts
+/** Whether an element sits in a right-to-left context - its nearest `dir` says so. */
+function isRtl(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+//#endregion
+Object.defineProperty(exports, "isRtl", {
+	enumerable: true,
+	get: function() {
+		return isRtl;
+	}
+});

package/dist/precision-B1lhxnnO.mjs

@@ -0,0 +1,25 @@
+//#region src/utils/precision.ts
+/** How many decimals a step has - `1e-8` has eight, `0.5` one, `1` none. */
+function getDecimalPrecision(step) {
+	const [mantissa, exponent] = step.toExponential().split("e");
+	const decimals = (mantissa.split(".")[1] ?? "").length;
+	return Math.max(0, decimals - Number(exponent));
+}
+/** The value rounded to the nearest step of `precision` - `null` stays `null`. */
+function roundToPrecision(value, precision) {
+	if (value === null) return null;
+	const nearest = Math.round(value / precision) * precision;
+	return Number(nearest.toFixed(getDecimalPrecision(precision)));
+}
+/** The number moved by `delta`, with no float noise - `0.1 + 0.2` is `0.3`. */
+function addExact(value, delta) {
+	const decimals = Math.max(getDecimalPrecision(value), getDecimalPrecision(delta));
+	return Number((value + delta).toFixed(decimals));
+}
+/** The nearest number on the grid of `step`, counted from `origin`. */
+function snapToStep(value, step, origin) {
+	const decimals = Math.max(getDecimalPrecision(step), getDecimalPrecision(origin));
+	return Number((Math.round((value - origin) / step) * step + origin).toFixed(decimals));
+}
+//#endregion
+export { snapToStep as i, getDecimalPrecision as n, roundToPrecision as r, addExact as t };

package/dist/precision-B58cTPB2.cjs

@@ -0,0 +1,48 @@
+//#region src/utils/precision.ts
+/** How many decimals a step has - `1e-8` has eight, `0.5` one, `1` none. */
+function getDecimalPrecision(step) {
+	const [mantissa, exponent] = step.toExponential().split("e");
+	const decimals = (mantissa.split(".")[1] ?? "").length;
+	return Math.max(0, decimals - Number(exponent));
+}
+/** The value rounded to the nearest step of `precision` - `null` stays `null`. */
+function roundToPrecision(value, precision) {
+	if (value === null) return null;
+	const nearest = Math.round(value / precision) * precision;
+	return Number(nearest.toFixed(getDecimalPrecision(precision)));
+}
+/** The number moved by `delta`, with no float noise - `0.1 + 0.2` is `0.3`. */
+function addExact(value, delta) {
+	const decimals = Math.max(getDecimalPrecision(value), getDecimalPrecision(delta));
+	return Number((value + delta).toFixed(decimals));
+}
+/** The nearest number on the grid of `step`, counted from `origin`. */
+function snapToStep(value, step, origin) {
+	const decimals = Math.max(getDecimalPrecision(step), getDecimalPrecision(origin));
+	return Number((Math.round((value - origin) / step) * step + origin).toFixed(decimals));
+}
+//#endregion
+Object.defineProperty(exports, "addExact", {
+	enumerable: true,
+	get: function() {
+		return addExact;
+	}
+});
+Object.defineProperty(exports, "getDecimalPrecision", {
+	enumerable: true,
+	get: function() {
+		return getDecimalPrecision;
+	}
+});
+Object.defineProperty(exports, "roundToPrecision", {
+	enumerable: true,
+	get: function() {
+		return roundToPrecision;
+	}
+});
+Object.defineProperty(exports, "snapToStep", {
+	enumerable: true,
+	get: function() {
+		return snapToStep;
+	}
+});

package/dist/style.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");
 //#region src/style/hooks/useStyle.ts

package/dist/style.d.cts

@@ -1,5 +1,5 @@
-import { T as Theme, a as CSSObject } from "./themes-Kbk9h5cN.cjs";
-import "./index-CrN4MSUF.cjs";
+import { W as Theme, f as CSSObject } from "./index-DJ0f69wh.cjs";
+import "./index-DchHf5cF.cjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/style/hooks/useStyle.d.ts
 type StyleFactory = {

package/dist/style.d.mts

@@ -1,5 +1,5 @@
-import { T as Theme, a as CSSObject } from "./themes-RX2UX5gD.mjs";
-import "./index-VOsBSWEu.mjs";
+import { W as Theme, f as CSSObject } from "./index-CJhK7JND.mjs";
+import "./index-h4dYtVrp.mjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/style/hooks/useStyle.d.ts
 type StyleFactory = {

package/dist/style.mjs

@@ -1,4 +1,4 @@
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import { n as EmotionThemeContext } from "./emotion-BAyqVw0c.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/style/hooks/useStyle.ts

package/dist/surfaceSystem-BGQBoXv_.cjs

@@ -0,0 +1,38 @@
+const require_src = require("./src-DU81aGy9.cjs");
+//#region src/Tabs/utils/tabIds.ts
+/** A tab's DOM id - what its panel's `aria-labelledby` names. */
+const getTabId = (baseId, value) => `${baseId}-tab-${value}`;
+/** A panel's DOM id - what its tab's `aria-controls` names. */
+const getPanelId = (baseId, value) => `${baseId}-panel-${value}`;
+//#endregion
+//#region src/Tabs/utils/surfaceSystem.ts
+/** `bg` → `theme.background`, `borderRadius` → `theme.radii`: a tab strip's or a panel's surface. */
+const surfaceSystem = (0, require_src.src_exports.system)({
+	bg: {
+		property: "backgroundColor",
+		scale: "background"
+	},
+	borderRadius: {
+		property: "borderRadius",
+		scale: "radii"
+	}
+});
+//#endregion
+Object.defineProperty(exports, "getPanelId", {
+	enumerable: true,
+	get: function() {
+		return getPanelId;
+	}
+});
+Object.defineProperty(exports, "getTabId", {
+	enumerable: true,
+	get: function() {
+		return getTabId;
+	}
+});
+Object.defineProperty(exports, "surfaceSystem", {
+	enumerable: true,
+	get: function() {
+		return surfaceSystem;
+	}
+});

package/dist/surfaceSystem-D8TbmKy3.mjs

@@ -0,0 +1,21 @@
+import { a as src_exports } from "./src-DLGYOJMh.mjs";
+//#region src/Tabs/utils/tabIds.ts
+/** A tab's DOM id - what its panel's `aria-labelledby` names. */
+const getTabId = (baseId, value) => `${baseId}-tab-${value}`;
+/** A panel's DOM id - what its tab's `aria-controls` names. */
+const getPanelId = (baseId, value) => `${baseId}-panel-${value}`;
+//#endregion
+//#region src/Tabs/utils/surfaceSystem.ts
+/** `bg` → `theme.background`, `borderRadius` → `theme.radii`: a tab strip's or a panel's surface. */
+const surfaceSystem = (0, src_exports.system)({
+	bg: {
+		property: "backgroundColor",
+		scale: "background"
+	},
+	borderRadius: {
+		property: "borderRadius",
+		scale: "radii"
+	}
+});
+//#endregion
+export { getPanelId as n, getTabId as r, surfaceSystem as t };