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

package/dist/Tabs/TabScrollButton.d.mts

@@ -1,2 +1,2 @@
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-CE5JG1us.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-Z9_QludW.mjs";
-import { t as Icon } from "../Icon-BihOAP4u.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-D4tWCq78.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-B_XHbjcS.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-WHFhjfgy.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-Dn2kqUwr.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-bpnLB_4K.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-BTNOJx5v.mjs";
-export { Tabs };
+export { t as Tabs } from "../Tabs-JvjuCU8m.mjs";

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

@@ -1,18 +1,19 @@
-const require_src = require("./src-DU81aGy9.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_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
-const require_Icon = require("./Icon-D-EWsBVg.cjs");
-const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
-const require_MenuItem = require("./MenuItem-BTP7Ijwi.cjs");
-const require_Menu = require("./Menu-Cgg-sX4W.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,
@@ -373,13 +374,13 @@ const STEP_BY_KEY = {
 * navigation, its current tab marked `aria-current="page"`. Content of the row's own sits
 * before and after the tabs.
 */
-function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, as = "div", orientation = "horizontal", variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth = false, isCentered = false, shouldSelectOnFocus = false, overflowBehavior = "none", overflowLabel, scrollButtons = "auto", shouldShowScrollButtonsOnMobile = false, hasVisibleScrollbar = false, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, className, "data-testid": dataTestid, ...spaceProps }) {
+function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, shouldAnnounceClose = false, as = "div", orientation = "horizontal", variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth = false, isCentered = false, shouldSelectOnFocus = false, overflowBehavior = "none", overflowLabel, scrollButtons = "auto", shouldShowScrollButtonsOnMobile = false, hasVisibleScrollbar = false, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, className, "data-testid": dataTestid, ...spaceProps }) {
 	const theme = require_theme.useTheme();
 	const dp = require_theme.useDefaultProps("Tabs");
 	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();
@@ -418,6 +419,7 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		focusableValue,
 		select,
 		onTabClose,
+		shouldAnnounceClose,
 		getTabId: (value) => require_surfaceSystem.getTabId(baseId, value),
 		getPanelId: (value) => tabList ? require_surfaceSystem.getPanelId(baseId, value) : void 0,
 		isNavigation,
@@ -440,6 +442,7 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		focusableValue,
 		select,
 		onTabClose,
+		shouldAnnounceClose,
 		baseId,
 		tabList,
 		isNavigation,
@@ -606,10 +609,12 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 						children: hiddenTabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
 							value: tab.value,
 							disabled: tab.disabled,
+							shouldAnnounceSecondaryAction: shouldAnnounceClose,
 							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowClose, {
 								type: "button",
 								color: selectedColor,
-								"aria-hidden": true,
+								"aria-hidden": shouldAnnounceClose ? void 0 : true,
+								"aria-label": shouldAnnounceClose ? tab.closeLabel : void 0,
 								title: tab.closeLabel,
 								tabIndex: -1,
 								onClick: () => onTabClose?.(tab.value),
@@ -631,7 +636,6 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		})
 	});
 }
-//#endregion
 Object.defineProperty(exports, "TabListContext", {
 	enumerable: true,
 	get: function() {

package/dist/{Tabs-BTNOJx5v.mjs → Tabs-JvjuCU8m.mjs}

@@ -1,17 +1,18 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { a as src_exports, i as props, 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 themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { t as Icon } from "./Icon-XpXU-SuF.mjs";
 import { View } from "./View.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
-import { t as Icon } from "./Icon-BihOAP4u.mjs";
-import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
-import { t as MenuItem } from "./MenuItem-DUn4IZKK.mjs";
-import { t as Menu } from "./Menu-CrzHc_cn.mjs";
-import { a as TabsContext, i as TabIndexContext, n as getDividerShadow, r as getEnclosedPieceStyle, t as getDividerColor } from "./dividerLine-FahY-M6_.mjs";
+import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
+import { t as MenuItem } from "./MenuItem-vXHGPK8g.mjs";
+import { t as Menu } from "./Menu-D4AIpdJv.mjs";
+import { a as TabsContext, i as TabIndexContext, n as getDividerShadow, r as getEnclosedPieceStyle, t as getDividerColor } from "./dividerLine-BC8E38Ed.mjs";
+import "./tonalRadius-CvXRueqT.mjs";
 import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
-import { n as getPanelId, r as getTabId, t as surfaceSystem } from "./surfaceSystem-D8TbmKy3.mjs";
+import { n as getPanelId, r as getTabId, t as surfaceSystem } from "./surfaceSystem-4XDqbvf4.mjs";
 import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#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
@@ -37,8 +38,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
@@ -85,8 +85,7 @@ function useTabsOverflow(listRef, isEnabled, isVertical, values, selected) {
 		update: useCallback(() => measureRef.current(), [])
 	};
 }
-//#endregion
-//#region src/Tabs/hooks/useTabsScroll.ts
+// src/Tabs/hooks/useTabsScroll.ts
 const AT_REST = {
 	isOverflowing: false,
 	canScrollStart: false,
@@ -151,13 +150,11 @@ function useTabsScroll(listRef, isEnabled, isVertical) {
 		scrollByView
 	};
 }
-//#endregion
-//#region src/Tabs/TabListContext.ts
+// src/Tabs/TabListContext.ts
 const TabListContext = createContext(null);
 /** The `TabList` these tabs render for, if any - which links them to their panels. */
 const useTabList = () => 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";
 /**
@@ -173,8 +170,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 = createShouldForwardProp([
 	...props,
 	"variant",
@@ -194,6 +190,11 @@ const TabsRoot = styled("div", {
 	const isVertical = orientation === "vertical";
 	return {
 		display: "flex",
+		...variant === "tonal" && {
+			padding: theme.space[.5],
+			borderRadius: "999px",
+			backgroundColor: (0, src_exports.get)(theme, "background.secondary")
+		},
 		flexDirection: isVertical ? "column" : "row",
 		alignItems: "stretch",
 		minWidth: 0,
@@ -234,7 +235,7 @@ const TabsList = 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,
@@ -372,13 +373,13 @@ const STEP_BY_KEY = {
 * navigation, its current tab marked `aria-current="page"`. Content of the row's own sits
 * before and after the tabs.
 */
-function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, as = "div", orientation = "horizontal", variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth = false, isCentered = false, shouldSelectOnFocus = false, overflowBehavior = "none", overflowLabel, scrollButtons = "auto", shouldShowScrollButtonsOnMobile = false, hasVisibleScrollbar = false, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, className, "data-testid": dataTestid, ...spaceProps }) {
+function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, shouldAnnounceClose = false, as = "div", orientation = "horizontal", variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth = false, isCentered = false, shouldSelectOnFocus = false, overflowBehavior = "none", overflowLabel, scrollButtons = "auto", shouldShowScrollButtonsOnMobile = false, hasVisibleScrollbar = false, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, className, "data-testid": dataTestid, ...spaceProps }) {
 	const theme = useTheme();
 	const dp = useDefaultProps("Tabs");
 	const variant = variantProp ?? dp.variant ?? "underline";
 	const color = colorProp ?? dp.color ?? themeDefault(theme, "color", "primary");
 	const size = sizeProp ?? dp.size ?? 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();
@@ -417,6 +418,7 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		focusableValue,
 		select,
 		onTabClose,
+		shouldAnnounceClose,
 		getTabId: (value) => getTabId(baseId, value),
 		getPanelId: (value) => tabList ? getPanelId(baseId, value) : void 0,
 		isNavigation,
@@ -439,6 +441,7 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		focusableValue,
 		select,
 		onTabClose,
+		shouldAnnounceClose,
 		baseId,
 		tabList,
 		isNavigation,
@@ -605,10 +608,12 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 						children: hiddenTabs.map((tab) => /* @__PURE__ */ jsx(MenuItem, {
 							value: tab.value,
 							disabled: tab.disabled,
+							shouldAnnounceSecondaryAction: shouldAnnounceClose,
 							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ jsx(OverflowClose, {
 								type: "button",
 								color: selectedColor,
-								"aria-hidden": true,
+								"aria-hidden": shouldAnnounceClose ? void 0 : true,
+								"aria-label": shouldAnnounceClose ? tab.closeLabel : void 0,
 								title: tab.closeLabel,
 								tabIndex: -1,
 								onClick: () => onTabClose?.(tab.value),
@@ -630,5 +635,4 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		})
 	});
 }
-//#endregion
 export { TabListContext as n, Tabs as t };

package/dist/Tabs.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Tabs_Tab = require("./Tabs/Tab.cjs");
 const require_Tabs_TabContext = require("./Tabs/TabContext.cjs");
 const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
-const require_Tabs = require("./Tabs-D4tWCq78.cjs");
+const require_Tabs = require("./Tabs-BsbX0jFL.cjs");
 const require_Tabs_TabList = require("./Tabs/TabList.cjs");
 const require_Tabs_TabPanel = require("./Tabs/TabPanel.cjs");
 exports.Tab = require_Tabs_Tab.Tab;

package/dist/Tabs.d.cts

@@ -1,8 +1,8 @@
-import { t as TabValue } from "./TabsContext-B_XHbjcS.cjs";
+import { t as TabValue } from "./TabsContext-MpMEEVuB.cjs";
 import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.cjs";
 import { TabContext, TabContextProps } from "./Tabs/TabContext.cjs";
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-KnXhlKMr.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-WHFhjfgy.cjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-CQeTS_zL.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";
 import { TabList, TabListProps } from "./Tabs/TabList.cjs";
 import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.cjs";
 export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.d.mts

@@ -1,8 +1,8 @@
-import { t as TabValue } from "./TabsContext-Dn2kqUwr.mjs";
+import { t as TabValue } from "./TabsContext-0ZtedNyH.mjs";
 import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.mjs";
 import { TabContext, TabContextProps } from "./Tabs/TabContext.mjs";
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-CE5JG1us.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-bpnLB_4K.mjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-C_J58B_n.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";
 import { TabList, TabListProps } from "./Tabs/TabList.mjs";
 import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.mjs";
 export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.mjs

@@ -1,7 +1,7 @@
 import { Tab } from "./Tabs/Tab.mjs";
 import { TabContext } from "./Tabs/TabContext.mjs";
 import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
-import { t as Tabs } from "./Tabs-BTNOJx5v.mjs";
+import { t as Tabs } from "./Tabs-JvjuCU8m.mjs";
 import { TabList } from "./Tabs/TabList.mjs";
 import { TabPanel } from "./Tabs/TabPanel.mjs";
 export { Tab, TabContext, TabList, TabPanel, TabScrollButton, Tabs };

package/dist/{TabsContext-B_XHbjcS.d.cts → TabsContext-0ZtedNyH.d.mts}

@@ -1,6 +1,4 @@
-import "./index-DchHf5cF.cjs";
-//#region src/Tabs/TabsContext.d.ts
+import "./index-CF_pl72E.mjs";
 /** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
 type TabValue = string | number;
-//#endregion
 export { TabValue as t };

package/dist/{TabsContext-Dn2kqUwr.d.mts → TabsContext-MpMEEVuB.d.cts}

@@ -1,6 +1,4 @@
-import "./index-h4dYtVrp.mjs";
-//#region src/Tabs/TabsContext.d.ts
+import "./index-CfB7OceY.cjs";
 /** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
 type TabValue = string | number;
-//#endregion
 export { TabValue as t };

package/dist/{TabsValueContext-DvL3inf7.mjs → TabsValueContext-C0vG9V7s.mjs}

@@ -1,8 +1,7 @@
 import { createContext, useContext } from "react";
-//#region src/Tabs/TabsValueContext.ts
+// src/Tabs/TabsValueContext.ts
 /** Set by a `TabContext`. */
 const TabsValueContext = createContext(null);
 /** The surrounding `TabContext`'s value, if there is one. */
 const useTabsValue = () => useContext(TabsValueContext);
-//#endregion
 export { useTabsValue as n, TabsValueContext as t };

package/dist/{TabsValueContext-D40zGCpE.cjs → TabsValueContext-DklTSPKh.cjs}

@@ -1,10 +1,9 @@
 let react = require("react");
-//#region src/Tabs/TabsValueContext.ts
+// src/Tabs/TabsValueContext.ts
 /** Set by a `TabContext`. */
 const TabsValueContext = (0, react.createContext)(null);
 /** The surrounding `TabContext`'s value, if there is one. */
 const useTabsValue = () => (0, react.useContext)(TabsValueContext);
-//#endregion
 Object.defineProperty(exports, "TabsValueContext", {
 	enumerable: true,
 	get: function() {

package/dist/TextInput.cjs

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-DhClkDHY.cjs");
 const require_FormControl = require("./FormControl.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.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/TextInput/TextAreaAutoResize.tsx
+// src/TextInput/TextAreaAutoResize.tsx
 const adjust = (el, minRows, maxRows) => {
 	const style = getComputedStyle(el);
 	const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2;
@@ -48,8 +48,7 @@ const TextAreaAutoResize = (0, react.forwardRef)(function TextAreaAutoResize({ v
 		...rest
 	});
 });
-//#endregion
-//#region src/TextInput/TextInput.tsx
+// src/TextInput/TextInput.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"as",
@@ -77,18 +76,14 @@ const backgroundStyle = ({ theme, textColor, color = require_themeDefault.themeD
 const colorBorder = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => {
 	return { borderColor: error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.light`) };
 };
-const focusVisibleRing = ({ theme }) => {
-	return { "&:has(:focus-visible)": {
-		outline: `2px solid ${(0, require_src.src_exports.get)(theme, `palette.${require_themeDefault.themeDefault(theme, "color", "primary")}.main`)}`,
-		outlineOffset: "2px"
-	} };
-};
+const focusVisibleRing = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => ({ "&:has(:focus-visible)": require_inputVariantStyles.getFocusRing(theme, color, error) });
 const focusWithinColor = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => ({ "&:focus-within": { borderColor: error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`) } });
 const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
 	if (v === "underline" || v === "text" || !borderRadius) return {};
 	return { borderRadius: (0, require_src.src_exports.get)(theme, `radii.${borderRadius}`) };
 };
-const layoutStyles = ({ fullWidth, disabled }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: require_inputVariantStyles.getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -205,14 +200,18 @@ function TextInput({ autoComplete, autoFocus, borderRadius, classes, components,
 	};
 	let inputElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledInput, {
 		inputComponent: resolvedInputComponent,
-		inputSize,
+		inputSize: inputSize ?? (resolvedInputComponent ? void 0 : 1),
 		...inputElProps
 	});
 	if (isTextarea) inputElement = isAutoResize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAutoResizeTextarea, {
 		...inputElProps,
+		cols: 1,
 		minRows: minRows ?? rows,
 		maxRows
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTextarea, { ...inputElProps });
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTextarea, {
+		...inputElProps,
+		cols: 1
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputRoot, {
 		as: components?.Root,
 		color,
@@ -228,5 +227,4 @@ function TextInput({ autoComplete, autoFocus, borderRadius, classes, components,
 		children: inputElement
 	});
 }
-//#endregion
 exports.TextInput = TextInput;

package/dist/TextInput.d.cts

@@ -1,7 +1,6 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/TextInput/TextInput.d.ts
 type TextInputColor = keyof Theme['palette'];
 type TextInputTextColor = keyof Theme['text'];
 type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
@@ -76,5 +75,4 @@ interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'wi
   'data-testid'?: string;
 }
 declare function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline, name, onChange, placeholder, readOnly, required: requiredProp, resize, rows, size: sizeProp, type, value, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TextInputProps>): import("react").JSX.Element;
-//#endregion
 export { TextInput, TextInputClasses, TextInputColor, TextInputProps, TextInputSize, TextInputTextColor, TextInputVariant };

package/dist/TextInput.d.mts

@@ -1,7 +1,6 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
-//#region src/TextInput/TextInput.d.ts
 type TextInputColor = keyof Theme['palette'];
 type TextInputTextColor = keyof Theme['text'];
 type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
@@ -76,5 +75,4 @@ interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'wi
   'data-testid'?: string;
 }
 declare function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline, name, onChange, placeholder, readOnly, required: requiredProp, resize, rows, size: sizeProp, type, value, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TextInputProps>): import("react").JSX.Element;
-//#endregion
 export { TextInput, TextInputClasses, TextInputColor, TextInputProps, TextInputSize, TextInputTextColor, TextInputVariant };

package/dist/TextInput.mjs

@@ -1,11 +1,11 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-DCGRUY9c.mjs";
 import { useFormControl } from "./FormControl.mjs";
-import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/TextInput/TextAreaAutoResize.tsx
+// src/TextInput/TextAreaAutoResize.tsx
 const adjust = (el, minRows, maxRows) => {
 	const style = getComputedStyle(el);
 	const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2;
@@ -46,8 +46,7 @@ const TextAreaAutoResize = forwardRef(function TextAreaAutoResize({ value, onCha
 		...rest
 	});
 });
-//#endregion
-//#region src/TextInput/TextInput.tsx
+// src/TextInput/TextInput.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"as",
@@ -75,18 +74,14 @@ const backgroundStyle = ({ theme, textColor, color = themeDefault(theme, "color"
 const colorBorder = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
 	return { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.light`) };
 };
-const focusVisibleRing = ({ theme }) => {
-	return { "&:has(:focus-visible)": {
-		outline: `2px solid ${(0, src_exports.get)(theme, `palette.${themeDefault(theme, "color", "primary")}.main`)}`,
-		outlineOffset: "2px"
-	} };
-};
+const focusVisibleRing = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => ({ "&:has(:focus-visible)": getFocusRing(theme, color, error) });
 const focusWithinColor = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => ({ "&:focus-within": { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`) } });
 const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
 	if (v === "underline" || v === "text" || !borderRadius) return {};
 	return { borderRadius: (0, src_exports.get)(theme, `radii.${borderRadius}`) };
 };
-const layoutStyles = ({ fullWidth, disabled }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -203,14 +198,18 @@ function TextInput({ autoComplete, autoFocus, borderRadius, classes, components,
 	};
 	let inputElement = /* @__PURE__ */ jsx(StyledInput, {
 		inputComponent: resolvedInputComponent,
-		inputSize,
+		inputSize: inputSize ?? (resolvedInputComponent ? void 0 : 1),
 		...inputElProps
 	});
 	if (isTextarea) inputElement = isAutoResize ? /* @__PURE__ */ jsx(StyledAutoResizeTextarea, {
 		...inputElProps,
+		cols: 1,
 		minRows: minRows ?? rows,
 		maxRows
-	}) : /* @__PURE__ */ jsx(StyledTextarea, { ...inputElProps });
+	}) : /* @__PURE__ */ jsx(StyledTextarea, {
+		...inputElProps,
+		cols: 1
+	});
 	return /* @__PURE__ */ jsx(TextInputRoot, {
 		as: components?.Root,
 		color,
@@ -226,5 +225,4 @@ function TextInput({ autoComplete, autoFocus, borderRadius, classes, components,
 		children: inputElement
 	});
 }
-//#endregion
 export { TextInput };