@soroush.tech/design-system 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/Tabs/Tab.cjs

@@ -1,11 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-DzfwuzMZ.cjs");
-const require_Icon = require("../Icon-BE7bRsqR.cjs");
-const require_dividerLine = require("../dividerLine-BNljcGlv.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_theme = require("../theme-XJvMdOnY.cjs");
+const require_Icon = require("../Icon-C5Iz5ekp.cjs");
+const require_dividerLine = require("../dividerLine-DFuLn1zU.cjs");
+const require_tonalRadius = require("../tonalRadius-CU9GHoHx.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Tabs/Tab/Tab.tsx
+// src/Tabs/Tab/Tab.tsx
 const shouldForwardProp = (0, require("@soroush.tech/styled-system/should-forward-prop").createShouldForwardProp)([
 	"variant",
 	"color",
@@ -57,6 +58,16 @@ const getEnclosedEdgeStyle = (theme, main, lineMain, isSelected, isVertical, has
 		}
 	};
 };
+const groundOf = (theme, { variant, isSelected, main }, selectedBg, bg) => {
+	const groundKey = isSelected && selectedBg ? selectedBg : bg;
+	if (groundKey) return (0, require_src.src_exports.get)(theme, `background.${groundKey}`);
+	return variant === "tonal" && isSelected ? `${main}29` : "transparent";
+};
+const radiusOf = (theme, variant, borderRadius) => {
+	if (borderRadius) return theme.radii[borderRadius];
+	if (variant === "tonal") return require_tonalRadius.TONAL_RADIUS;
+	return variant === "boxed" || variant === "enclosed" ? theme.radii.sm : 0;
+};
 const TabRoot = require_src.styled("div", {
 	name: "Tab",
 	label: "Tab",
@@ -66,12 +77,12 @@ const TabRoot = require_src.styled("div", {
 	const isBoxed = variant === "boxed";
 	const outlineColor = isBoxed && isSelected ? `${main}59` : "transparent";
 	const raised = (0, require_src.src_exports.get)(theme, "background.paper");
-	const groundKey = isSelected && selectedBg ? selectedBg : bg;
-	const ground = groundKey ? (0, require_src.src_exports.get)(theme, `background.${groundKey}`) : "transparent";
-	const isRounded = isBoxed || variant === "enclosed";
-	let radius = 0;
-	if (borderRadius) radius = theme.radii[borderRadius];
-	else if (isRounded) radius = theme.radii.sm;
+	const ground = groundOf(theme, {
+		variant,
+		isSelected,
+		main
+	}, selectedBg, bg);
+	const radius = radiusOf(theme, variant, borderRadius);
 	return {
 		position: "relative",
 		display: "flex",
@@ -311,5 +322,4 @@ function Tab({ value: valueProp, label, icon, iconPosition = "top", isWrapped: i
 		]
 	});
 }
-//#endregion
 exports.Tab = Tab;

package/dist/Tabs/Tab.d.cts

@@ -1,7 +1,6 @@
-import { nt as Theme } from "../index-XN4-ZqTB.cjs";
-import { t as TabValue } from "../TabsContext-BYeGjSZK.cjs";
+import { nt as Theme } from "../index-Lsm4v8fB.cjs";
+import { t as TabValue } from "../TabsContext-MpMEEVuB.cjs";
 import { ElementType, MouseEvent, ReactNode } from "react";
-//#region src/Tabs/Tab/Tab.d.ts
 /** Where `icon` sits around a tab's label. */
 type TabIconPosition = 'start' | 'end' | 'top' | 'bottom';
 interface TabProps {
@@ -58,5 +57,4 @@ interface TabProps {
  * one. It takes one `icon`, which `iconPosition` places on a side of its label.
  */
 declare function Tab({ value: valueProp, label, icon, iconPosition, isWrapped: isWrappedProp, bg: bgProp, borderRadius: borderRadiusProp, color: colorProp, textColor: textColorProp, size: sizeProp, selectedBg: selectedBgProp, disabled, href, as, onClick, title, closeLabel, secondaryAction, className, 'data-testid': dataTestid }: Readonly<TabProps>): import("react").JSX.Element;
-//#endregion
 export { Tab, TabIconPosition, TabProps };

package/dist/Tabs/Tab.d.mts

@@ -1,7 +1,6 @@
-import { nt as Theme } from "../index-CRQ7XLri.mjs";
-import { t as TabValue } from "../TabsContext-D4YumTfD.mjs";
+import { nt as Theme } from "../index-CR8qkP8U.mjs";
+import { t as TabValue } from "../TabsContext-0ZtedNyH.mjs";
 import { ElementType, MouseEvent, ReactNode } from "react";
-//#region src/Tabs/Tab/Tab.d.ts
 /** Where `icon` sits around a tab's label. */
 type TabIconPosition = 'start' | 'end' | 'top' | 'bottom';
 interface TabProps {
@@ -58,5 +57,4 @@ interface TabProps {
  * one. It takes one `icon`, which `iconPosition` places on a side of its label.
  */
 declare function Tab({ value: valueProp, label, icon, iconPosition, isWrapped: isWrappedProp, bg: bgProp, borderRadius: borderRadiusProp, color: colorProp, textColor: textColorProp, size: sizeProp, selectedBg: selectedBgProp, disabled, href, as, onClick, title, closeLabel, secondaryAction, className, 'data-testid': dataTestid }: Readonly<TabProps>): import("react").JSX.Element;
-//#endregion
 export { Tab, TabIconPosition, TabProps };

package/dist/Tabs/Tab.mjs

@@ -1,10 +1,11 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { n as useDefaultProps } from "../theme-oBfFhJm9.mjs";
-import { t as Icon } from "../Icon-0hPpk-WZ.mjs";
-import { i as TabIndexContext, n as getDividerShadow, o as useTabsContext } from "../dividerLine-FahY-M6_.mjs";
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { n as useDefaultProps } from "../theme-DyyZQFzQ.mjs";
+import { t as Icon } from "../Icon-XpXU-SuF.mjs";
+import { i as TabIndexContext, n as getDividerShadow, o as useTabsContext } from "../dividerLine-BC8E38Ed.mjs";
+import { t as TONAL_RADIUS } from "../tonalRadius-CvXRueqT.mjs";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/Tabs/Tab/Tab.tsx
+// src/Tabs/Tab/Tab.tsx
 const shouldForwardProp = createShouldForwardProp([
 	"variant",
 	"color",
@@ -56,6 +57,16 @@ const getEnclosedEdgeStyle = (theme, main, lineMain, isSelected, isVertical, has
 		}
 	};
 };
+const groundOf = (theme, { variant, isSelected, main }, selectedBg, bg) => {
+	const groundKey = isSelected && selectedBg ? selectedBg : bg;
+	if (groundKey) return (0, src_exports.get)(theme, `background.${groundKey}`);
+	return variant === "tonal" && isSelected ? `${main}29` : "transparent";
+};
+const radiusOf = (theme, variant, borderRadius) => {
+	if (borderRadius) return theme.radii[borderRadius];
+	if (variant === "tonal") return TONAL_RADIUS;
+	return variant === "boxed" || variant === "enclosed" ? theme.radii.sm : 0;
+};
 const TabRoot = styled("div", {
 	name: "Tab",
 	label: "Tab",
@@ -65,12 +76,12 @@ const TabRoot = styled("div", {
 	const isBoxed = variant === "boxed";
 	const outlineColor = isBoxed && isSelected ? `${main}59` : "transparent";
 	const raised = (0, src_exports.get)(theme, "background.paper");
-	const groundKey = isSelected && selectedBg ? selectedBg : bg;
-	const ground = groundKey ? (0, src_exports.get)(theme, `background.${groundKey}`) : "transparent";
-	const isRounded = isBoxed || variant === "enclosed";
-	let radius = 0;
-	if (borderRadius) radius = theme.radii[borderRadius];
-	else if (isRounded) radius = theme.radii.sm;
+	const ground = groundOf(theme, {
+		variant,
+		isSelected,
+		main
+	}, selectedBg, bg);
+	const radius = radiusOf(theme, variant, borderRadius);
 	return {
 		position: "relative",
 		display: "flex",
@@ -310,5 +321,4 @@ function Tab({ value: valueProp, label, icon, iconPosition = "top", isWrapped: i
 		]
 	});
 }
-//#endregion
 export { Tab };

package/dist/Tabs/TabContext.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
+const require_TabsValueContext = require("../TabsValueContext-DklTSPKh.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Tabs/TabContext/TabContext.tsx
+// src/Tabs/TabContext/TabContext.tsx
 /**
 * @description Holds which tab is selected for a `Tabs` and the `TabPanel`s beside it, so
 * the two can sit apart in the tree - the tabs in a header, the panels in the body - and
@@ -30,5 +30,4 @@ function TabContext({ children, value: valueProp, defaultValue = null, onChange
 		children
 	});
 }
-//#endregion
 exports.TabContext = TabContext;

package/dist/Tabs/TabContext.d.cts

@@ -1,6 +1,5 @@
-import { t as TabValue } from "../TabsContext-BYeGjSZK.cjs";
+import { t as TabValue } from "../TabsContext-MpMEEVuB.cjs";
 import { ReactNode } from "react";
-//#region src/Tabs/TabContext/TabContext.d.ts
 interface TabContextProps {
   children?: ReactNode;
   /** The selected tab's value - `null` for none. Controlled with `onChange`. */
@@ -16,5 +15,4 @@ interface TabContextProps {
  * still be linked (`aria-controls`, `aria-labelledby`).
  */
 declare function TabContext({ children, value: valueProp, defaultValue, onChange }: Readonly<TabContextProps>): import("react").JSX.Element;
-//#endregion
 export { TabContext, TabContextProps };

package/dist/Tabs/TabContext.d.mts

@@ -1,6 +1,5 @@
-import { t as TabValue } from "../TabsContext-D4YumTfD.mjs";
+import { t as TabValue } from "../TabsContext-0ZtedNyH.mjs";
 import { ReactNode } from "react";
-//#region src/Tabs/TabContext/TabContext.d.ts
 interface TabContextProps {
   children?: ReactNode;
   /** The selected tab's value - `null` for none. Controlled with `onChange`. */
@@ -16,5 +15,4 @@ interface TabContextProps {
  * still be linked (`aria-controls`, `aria-labelledby`).
  */
 declare function TabContext({ children, value: valueProp, defaultValue, onChange }: Readonly<TabContextProps>): import("react").JSX.Element;
-//#endregion
 export { TabContext, TabContextProps };

package/dist/Tabs/TabContext.mjs

@@ -1,7 +1,7 @@
-import { t as TabsValueContext } from "../TabsValueContext-DvL3inf7.mjs";
+import { t as TabsValueContext } from "../TabsValueContext-C0vG9V7s.mjs";
 import { useCallback, useId, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Tabs/TabContext/TabContext.tsx
+// src/Tabs/TabContext/TabContext.tsx
 /**
 * @description Holds which tab is selected for a `Tabs` and the `TabPanel`s beside it, so
 * the two can sit apart in the tree - the tabs in a header, the panels in the body - and
@@ -29,5 +29,4 @@ function TabContext({ children, value: valueProp, defaultValue = null, onChange
 		children
 	});
 }
-//#endregion
 export { TabContext };

package/dist/Tabs/TabList.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
-const require_Tabs = require("../Tabs-Croeq9s2.cjs");
+const require_TabsValueContext = require("../TabsValueContext-DklTSPKh.cjs");
+const require_Tabs = require("../Tabs-BsbX0jFL.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Tabs/TabList/TabList.tsx
+// src/Tabs/TabList/TabList.tsx
 /**
 * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
 * and links each tab to its `TabPanel` - the tab `aria-controls` its panel, which is named by
@@ -27,5 +27,4 @@ function TabList({ onChange, ...rest }) {
 		})
 	});
 }
-//#endregion
 exports.TabList = TabList;

package/dist/Tabs/TabList.d.cts

@@ -1,5 +1,4 @@
-import { a as TabsProps } from "../index-Ebjbrbsk.cjs";
-//#region src/Tabs/TabList/TabList.d.ts
+import { a as TabsProps } from "../index-Bo45R0nD.cjs";
 type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
 /**
  * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
@@ -7,5 +6,4 @@ type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
  * the tab. Everything else is a `Tabs`'.
  */
 declare function TabList({ onChange, ...rest }: Readonly<TabListProps>): import("react").JSX.Element;
-//#endregion
 export { TabList, TabListProps };

package/dist/Tabs/TabList.d.mts

@@ -1,5 +1,4 @@
-import { a as TabsProps } from "../index-D_-DAAE7.mjs";
-//#region src/Tabs/TabList/TabList.d.ts
+import { a as TabsProps } from "../index-SotXsXXb.mjs";
 type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
 /**
  * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
@@ -7,5 +6,4 @@ type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
  * the tab. Everything else is a `Tabs`'.
  */
 declare function TabList({ onChange, ...rest }: Readonly<TabListProps>): import("react").JSX.Element;
-//#endregion
 export { TabList, TabListProps };

package/dist/Tabs/TabList.mjs

@@ -1,8 +1,8 @@
-import { n as useTabsValue } from "../TabsValueContext-DvL3inf7.mjs";
-import { n as TabListContext, t as Tabs } from "../Tabs-DMMP5aDj.mjs";
+import { n as useTabsValue } from "../TabsValueContext-C0vG9V7s.mjs";
+import { n as TabListContext, t as Tabs } from "../Tabs-JvjuCU8m.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Tabs/TabList/TabList.tsx
+// src/Tabs/TabList/TabList.tsx
 /**
 * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
 * and links each tab to its `TabPanel` - the tab `aria-controls` its panel, which is named by
@@ -26,5 +26,4 @@ function TabList({ onChange, ...rest }) {
 		})
 	});
 }
-//#endregion
 export { TabList };

package/dist/Tabs/TabPanel.cjs

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-DzfwuzMZ.cjs");
-const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
-const require_surfaceSystem = require("../surfaceSystem-BGQBoXv_.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_theme = require("../theme-XJvMdOnY.cjs");
+const require_TabsValueContext = require("../TabsValueContext-DklTSPKh.cjs");
+const require_surfaceSystem = require("../surfaceSystem-DI6bqK5F.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Tabs/TabPanel/TabPanel.tsx
+// src/Tabs/TabPanel/TabPanel.tsx
 const TabPanelRoot = require_src.styled("div", {
 	name: "TabPanel",
 	label: "TabPanel",
@@ -36,5 +36,4 @@ function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, c
 		children: isSelected || shouldKeepMounted ? children : null
 	});
 }
-//#endregion
 exports.TabPanel = TabPanel;

package/dist/Tabs/TabPanel.d.cts

@@ -1,8 +1,7 @@
-import { nt as Theme } from "../index-XN4-ZqTB.cjs";
-import { t as TabValue } from "../TabsContext-BYeGjSZK.cjs";
+import { nt as Theme } from "../index-Lsm4v8fB.cjs";
+import { t as TabValue } from "../TabsContext-MpMEEVuB.cjs";
 import { ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Tabs/TabPanel/TabPanel.d.ts
 interface TabPanelProps extends SpaceProps<Theme> {
   /** The value of the tab this panel belongs to. */
   value: TabValue;
@@ -23,5 +22,4 @@ interface TabPanelProps extends SpaceProps<Theme> {
  * `TabContext` beside the `Tabs`, which links the two.
  */
 declare function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabPanelProps>): import("react").JSX.Element;
-//#endregion
 export { TabPanel, TabPanelProps };

package/dist/Tabs/TabPanel.d.mts

@@ -1,8 +1,7 @@
-import { nt as Theme } from "../index-CRQ7XLri.mjs";
-import { t as TabValue } from "../TabsContext-D4YumTfD.mjs";
+import { nt as Theme } from "../index-CR8qkP8U.mjs";
+import { t as TabValue } from "../TabsContext-0ZtedNyH.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ReactNode } from "react";
-//#region src/Tabs/TabPanel/TabPanel.d.ts
 interface TabPanelProps extends SpaceProps<Theme> {
   /** The value of the tab this panel belongs to. */
   value: TabValue;
@@ -23,5 +22,4 @@ interface TabPanelProps extends SpaceProps<Theme> {
  * `TabContext` beside the `Tabs`, which links the two.
  */
 declare function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabPanelProps>): import("react").JSX.Element;
-//#endregion
 export { TabPanel, TabPanelProps };

package/dist/Tabs/TabPanel.mjs

@@ -1,9 +1,9 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { n as useDefaultProps } from "../theme-oBfFhJm9.mjs";
-import { n as useTabsValue } from "../TabsValueContext-DvL3inf7.mjs";
-import { n as getPanelId, r as getTabId, t as surfaceSystem } from "../surfaceSystem-D8TbmKy3.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { n as useDefaultProps } from "../theme-DyyZQFzQ.mjs";
+import { n as useTabsValue } from "../TabsValueContext-C0vG9V7s.mjs";
+import { n as getPanelId, r as getTabId, t as surfaceSystem } from "../surfaceSystem-4XDqbvf4.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/Tabs/TabPanel/TabPanel.tsx
+// src/Tabs/TabPanel/TabPanel.tsx
 const TabPanelRoot = styled("div", {
 	name: "TabPanel",
 	label: "TabPanel",
@@ -34,5 +34,4 @@ function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, c
 		children: isSelected || shouldKeepMounted ? children : null
 	});
 }
-//#endregion
 export { TabPanel };

package/dist/Tabs/TabScrollButton.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-DzfwuzMZ.cjs");
-const require_Icon = require("../Icon-BE7bRsqR.cjs");
-const require_dividerLine = require("../dividerLine-BNljcGlv.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_theme = require("../theme-XJvMdOnY.cjs");
+const require_Icon = require("../Icon-C5Iz5ekp.cjs");
+const require_dividerLine = require("../dividerLine-DFuLn1zU.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Tabs/TabScrollButton/TabScrollButton.tsx
+// src/Tabs/TabScrollButton/TabScrollButton.tsx
 const TabScrollButtonRoot = require_src.styled("button", {
 	name: "Tabs",
 	slot: "scrollButton",
@@ -89,5 +89,4 @@ function TabScrollButton({ direction, orientation, disabled, isHidden = false, c
 		})
 	});
 }
-//#endregion
 exports.TabScrollButton = TabScrollButton;

package/dist/Tabs/TabScrollButton.d.cts

@@ -1,2 +1,2 @@
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-BitQk7Hx.cjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-CQeTS_zL.cjs";
 export { TabScrollButton, TabScrollButtonProps, TabScrollDirection };

package/dist/Tabs/TabScrollButton.d.mts

@@ -1,2 +1,2 @@
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-CyLhEXYB.mjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-C_J58B_n.mjs";
 export { TabScrollButton, TabScrollButtonProps, TabScrollDirection };

package/dist/Tabs/TabScrollButton.mjs

@@ -1,10 +1,10 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { n as useDefaultProps, r as useTheme } from "../theme-oBfFhJm9.mjs";
-import { t as Icon } from "../Icon-0hPpk-WZ.mjs";
-import { a as TabsContext, r as getEnclosedPieceStyle } from "../dividerLine-FahY-M6_.mjs";
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { n as useDefaultProps, r as useTheme } from "../theme-DyyZQFzQ.mjs";
+import { t as Icon } from "../Icon-XpXU-SuF.mjs";
+import { a as TabsContext, r as getEnclosedPieceStyle } from "../dividerLine-BC8E38Ed.mjs";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Tabs/TabScrollButton/TabScrollButton.tsx
+// src/Tabs/TabScrollButton/TabScrollButton.tsx
 const TabScrollButtonRoot = styled("button", {
 	name: "Tabs",
 	slot: "scrollButton",
@@ -87,5 +87,4 @@ function TabScrollButton({ direction, orientation, disabled, isHidden = false, c
 		})
 	});
 }
-//#endregion
 export { TabScrollButton };

package/dist/Tabs/Tabs.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Tabs = require("../Tabs-Croeq9s2.cjs");
+const require_Tabs = require("../Tabs-BsbX0jFL.cjs");
 exports.Tabs = require_Tabs.Tabs;

package/dist/Tabs/Tabs.d.cts

@@ -1,3 +1,3 @@
-import { t as TabValue } from "../TabsContext-BYeGjSZK.cjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-Ebjbrbsk.cjs";
+import { t as TabValue } from "../TabsContext-MpMEEVuB.cjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-Bo45R0nD.cjs";
 export { type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs/Tabs.d.mts

@@ -1,3 +1,3 @@
-import { t as TabValue } from "../TabsContext-D4YumTfD.mjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-D_-DAAE7.mjs";
+import { t as TabValue } from "../TabsContext-0ZtedNyH.mjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-SotXsXXb.mjs";
 export { type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs/Tabs.mjs

@@ -1,2 +1 @@
-import { t as Tabs } from "../Tabs-DMMP5aDj.mjs";
-export { Tabs };
+export { t as Tabs } from "../Tabs-JvjuCU8m.mjs";

package/dist/{Tabs-Croeq9s2.cjs → Tabs-BsbX0jFL.cjs}

@@ -1,18 +1,19 @@
-const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-DzfwuzMZ.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_Icon = require("./Icon-BE7bRsqR.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_Icon = require("./Icon-C5Iz5ekp.cjs");
 const require_View = require("./View.cjs");
-const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
-const require_MenuItem = require("./MenuItem-EJ4u73f0.cjs");
-const require_Menu = require("./Menu-DXLjR9ga.cjs");
-const require_dividerLine = require("./dividerLine-BNljcGlv.cjs");
+const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
+const require_MenuItem = require("./MenuItem-DXRw3Yca.cjs");
+const require_Menu = require("./Menu-Bx9jaHOy.cjs");
+const require_dividerLine = require("./dividerLine-DFuLn1zU.cjs");
+require("./tonalRadius-CU9GHoHx.cjs");
 const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
-const require_surfaceSystem = require("./surfaceSystem-BGQBoXv_.cjs");
+const require_surfaceSystem = require("./surfaceSystem-DI6bqK5F.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Tabs/utils/fitTabs.ts
+// src/Tabs/utils/fitTabs.ts
 /**
 * The tabs that don't fit **whole** in `room` pixels along the row, with `gap` between them -
 * the ones its menu lists. The selected tab counts first, then the others in order while the
@@ -38,8 +39,7 @@ const fitTabs = (values, selected, sizes, room, gap) => {
 	}
 	return values.filter((value) => !shown.has(value));
 };
-//#endregion
-//#region src/Tabs/hooks/useTabsOverflow.ts
+// src/Tabs/hooks/useTabsOverflow.ts
 const px = (value) => Number.parseFloat(value) || 0;
 /**
 * The tabs of a row that don't fit whole in its list, for the row's menu - none unless
@@ -86,8 +86,7 @@ function useTabsOverflow(listRef, isEnabled, isVertical, values, selected) {
 		update: (0, react.useCallback)(() => measureRef.current(), [])
 	};
 }
-//#endregion
-//#region src/Tabs/hooks/useTabsScroll.ts
+// src/Tabs/hooks/useTabsScroll.ts
 const AT_REST = {
 	isOverflowing: false,
 	canScrollStart: false,
@@ -152,13 +151,11 @@ function useTabsScroll(listRef, isEnabled, isVertical) {
 		scrollByView
 	};
 }
-//#endregion
-//#region src/Tabs/TabListContext.ts
+// src/Tabs/TabListContext.ts
 const TabListContext = (0, react.createContext)(null);
 /** The `TabList` these tabs render for, if any - which links them to their panels. */
 const useTabList = () => (0, react.useContext)(TabListContext);
-//#endregion
-//#region src/Tabs/utils/getNextTab.ts
+// src/Tabs/utils/getNextTab.ts
 /** A tab the keys can reach: not disabled. */
 const isTabEnabled = (tab) => tab.getAttribute("aria-disabled") !== "true";
 /**
@@ -174,8 +171,7 @@ function getNextTab(tabs, current, step) {
 	const offset = step === "next" ? 1 : -1;
 	return enabled.at((index + offset) % enabled.length);
 }
-//#endregion
-//#region src/Tabs/Tabs/Tabs.tsx
+// src/Tabs/Tabs/Tabs.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"variant",
@@ -195,6 +191,11 @@ const TabsRoot = require_src.styled("div", {
 	const isVertical = orientation === "vertical";
 	return {
 		display: "flex",
+		...variant === "tonal" && {
+			padding: theme.space[.5],
+			borderRadius: "999px",
+			backgroundColor: (0, require_src.src_exports.get)(theme, "background.secondary")
+		},
 		flexDirection: isVertical ? "column" : "row",
 		alignItems: "stretch",
 		minWidth: 0,
@@ -235,7 +236,7 @@ const TabsList = require_src.styled("div", {
 		display: "flex",
 		flexDirection: isVertical ? "column" : "row",
 		justifyContent: isCentered ? "center" : "flex-start",
-		gap: variant === "boxed" ? theme.space[.5] : 0,
+		gap: variant === "boxed" || variant === "tonal" ? theme.space[.5] : 0,
 		flex: 1,
 		minWidth: 0,
 		...variant === "enclosed" && enclosedEnds,
@@ -379,7 +380,7 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 	const variant = variantProp ?? dp.variant ?? "underline";
 	const color = colorProp ?? dp.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
 	const size = sizeProp ?? dp.size ?? require_themeDefault.themeDefault(theme, "size", "md");
-	const hasDivider = hasDividerProp ?? dp.hasDivider ?? variant !== "boxed";
+	const hasDivider = hasDividerProp ?? dp.hasDivider ?? (variant !== "boxed" && variant !== "tonal");
 	const isFilled = variant === "boxed" || variant === "enclosed" && !hasDivider;
 	const selectedBg = selectedBgProp ?? dp.selectedBg ?? (isFilled ? "paper" : void 0);
 	const tabList = useTabList();
@@ -635,7 +636,6 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		})
 	});
 }
-//#endregion
 Object.defineProperty(exports, "TabListContext", {
 	enumerable: true,
 	get: function() {