@soroush.tech/design-system 2.1.0-alpha.2 → 2.1.1

package/dist/Menu/ContextMenu.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-yC1f5WR2.cjs");
 const require_theme = require("../theme-XJvMdOnY.cjs");
-const require_MenuList = require("../MenuList-CSaaR3jt.cjs");
-const require_MenuItem = require("../MenuItem-BWm8DC-S.cjs");
+const require_MenuList = require("../MenuList-CpPmRGzw.cjs");
+const require_MenuItem = require("../MenuItem-BChqYIsh.cjs");
 const require_Menu_MenuItems = require("./MenuItems.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Menu/ContextMenu.mjs

@@ -1,7 +1,7 @@
 import { o as styled } from "../src-B-rNjHIL.mjs";
 import { n as useDefaultProps, r as useTheme } from "../theme-DyyZQFzQ.mjs";
-import { o as MenuActivationContext, t as MenuList } from "../MenuList-D7Pvpn_K.mjs";
-import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "../MenuItem-hJeCsQZX.mjs";
+import { o as MenuActivationContext, t as MenuList } from "../MenuList-BUTy11DW.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "../MenuItem-Kvciwc9F.mjs";
 import { MenuItems } from "./MenuItems.mjs";
 import { Children, cloneElement, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/Menu/Menu.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Menu = require("../Menu-DOOK_gM9.cjs");
+const require_Menu = require("../Menu-DiBVHD7B.cjs");
 exports.Menu = require_Menu.Menu;

package/dist/Menu/Menu.mjs

@@ -1 +1 @@
-export { t as Menu } from "../Menu-Cv887y7O.mjs";
+export { t as Menu } from "../Menu-ULMXG0BP.mjs";

package/dist/Menu/MenuItems.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuItem = require("../MenuItem-BWm8DC-S.cjs");
+const require_MenuItem = require("../MenuItem-BChqYIsh.cjs");
 const require_Menu_MenuDivider = require("./MenuDivider.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/Menu/MenuItems/MenuItems.tsx

package/dist/Menu/MenuItems.mjs

@@ -1,4 +1,4 @@
-import { t as MenuItem } from "../MenuItem-hJeCsQZX.mjs";
+import { t as MenuItem } from "../MenuItem-Kvciwc9F.mjs";
 import { MenuDivider } from "./MenuDivider.mjs";
 import { jsx } from "react/jsx-runtime";
 // src/Menu/MenuItems/MenuItems.tsx

package/dist/Menu/MenuList.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuList = require("../MenuList-CSaaR3jt.cjs");
+const require_MenuList = require("../MenuList-CpPmRGzw.cjs");
 exports.MenuList = require_MenuList.MenuList;

package/dist/Menu/MenuList.mjs

@@ -1 +1 @@
-export { t as MenuList } from "../MenuList-D7Pvpn_K.mjs";
+export { t as MenuList } from "../MenuList-BUTy11DW.mjs";

package/dist/{Menu-DOOK_gM9.cjs → Menu-DiBVHD7B.cjs}

@@ -1,8 +1,8 @@
 const require_src = require("./src-yC1f5WR2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
 const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
-const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
-const require_MenuItem = require("./MenuItem-BWm8DC-S.cjs");
+const require_MenuList = require("./MenuList-CpPmRGzw.cjs");
+const require_MenuItem = require("./MenuItem-BChqYIsh.cjs");
 const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/{Menu-Cv887y7O.mjs → Menu-ULMXG0BP.mjs}

@@ -1,8 +1,8 @@
 import { o as styled } from "./src-B-rNjHIL.mjs";
 import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
 import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
-import { o as MenuActivationContext, t as MenuList } from "./MenuList-D7Pvpn_K.mjs";
-import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "./MenuItem-hJeCsQZX.mjs";
+import { o as MenuActivationContext, t as MenuList } from "./MenuList-BUTy11DW.mjs";
+import { i as MenuPaper, n as useMenuPlacement, r as MenuContext, t as MenuItem } from "./MenuItem-Kvciwc9F.mjs";
 import { MenuItems } from "./Menu/MenuItems.mjs";
 import { Children, cloneElement, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/Menu.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
+const require_MenuList = require("./MenuList-CpPmRGzw.cjs");
 const require_Menu_MenuDivider = require("./Menu/MenuDivider.cjs");
 const require_Menu_MenuItems = require("./Menu/MenuItems.cjs");
 const require_Menu_ContextMenu = require("./Menu/ContextMenu.cjs");
-const require_Menu = require("./Menu-DOOK_gM9.cjs");
+const require_Menu = require("./Menu-DiBVHD7B.cjs");
 exports.ContextMenu = require_Menu_ContextMenu.ContextMenu;
 exports.Menu = require_Menu.Menu;
 exports.MenuDivider = require_Menu_MenuDivider.MenuDivider;

package/dist/Menu.mjs

@@ -1,6 +1,6 @@
-import { a as useMenuListContext, i as MenuListContext, t as MenuList } from "./MenuList-D7Pvpn_K.mjs";
+import { a as useMenuListContext, i as MenuListContext, t as MenuList } from "./MenuList-BUTy11DW.mjs";
 import { MenuDivider } from "./Menu/MenuDivider.mjs";
 import { MenuItems } from "./Menu/MenuItems.mjs";
 import { ContextMenu } from "./Menu/ContextMenu.mjs";
-import { t as Menu } from "./Menu-Cv887y7O.mjs";
+import { t as Menu } from "./Menu-ULMXG0BP.mjs";
 export { ContextMenu, Menu, MenuDivider, MenuItems, MenuList, MenuListContext, useMenuListContext };

package/dist/{MenuItem-BWm8DC-S.cjs → MenuItem-BChqYIsh.cjs}

@@ -5,7 +5,7 @@ const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
 const require_Icon = require("./Icon-C5Iz5ekp.cjs");
 const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
 const require_useAnchoredPlacement = require("./useAnchoredPlacement-BSfjNMut.cjs");
-const require_MenuList = require("./MenuList-CSaaR3jt.cjs");
+const require_MenuList = require("./MenuList-CpPmRGzw.cjs");
 const require_Tooltip = require("./Tooltip-rkGm1HnP.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/{MenuItem-hJeCsQZX.mjs → MenuItem-Kvciwc9F.mjs}

@@ -5,7 +5,7 @@ import { t as getSurfaceRadius } from "./getSurfaceRadius-B1QE_VLa.mjs";
 import { t as Icon } from "./Icon-XpXU-SuF.mjs";
 import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
 import { t as useAnchoredPlacement } from "./useAnchoredPlacement-txSaWzfk.mjs";
-import { a as useMenuListContext, n as getNextRow, r as getOwnRows, t as MenuList } from "./MenuList-D7Pvpn_K.mjs";
+import { a as useMenuListContext, n as getNextRow, r as getOwnRows, t as MenuList } from "./MenuList-BUTy11DW.mjs";
 import { n as Tooltip } from "./Tooltip-Cx4ez9vY.mjs";
 import { Children, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/MenuItem.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuItem = require("./MenuItem-BWm8DC-S.cjs");
+const require_MenuItem = require("./MenuItem-BChqYIsh.cjs");
 exports.MenuItem = require_MenuItem.MenuItem;

package/dist/MenuItem.mjs

@@ -1 +1 @@
-export { t as MenuItem } from "./MenuItem-hJeCsQZX.mjs";
+export { t as MenuItem } from "./MenuItem-Kvciwc9F.mjs";

package/dist/{MenuList-D7Pvpn_K.mjs → MenuList-BUTy11DW.mjs}

@@ -124,7 +124,7 @@ function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFo
 		const list = listRef.current;
 		if (!shouldAutoFocus || !list) return;
 		const rows = getOwnRows(list).filter(isRowEnabled);
-		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus();
+		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus({ preventScroll: true });
 	}, [shouldAutoFocus]);
 	const context = useMemo(() => ({
 		onActivate: (value, event) => {

package/dist/{MenuList-CSaaR3jt.cjs → MenuList-CpPmRGzw.cjs}

@@ -125,7 +125,7 @@ function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFo
 		const list = listRef.current;
 		if (!shouldAutoFocus || !list) return;
 		const rows = getOwnRows(list).filter(isRowEnabled);
-		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus();
+		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus({ preventScroll: true });
 	}, [shouldAutoFocus]);
 	const context = (0, react.useMemo)(() => ({
 		onActivate: (value, event) => {

package/dist/Sidebar/Sidebar.cjs

@@ -13,8 +13,8 @@ const SidebarRail = require_src.styled(require_Flex.Flex, {
 	name: "Sidebar",
 	slot: "rail",
 	label: "SidebarRail",
-	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "layout" && prop !== "expandedWidth" && prop !== "collapsedWidth" && prop !== "stackedWidth"
-})(({ isOpen, layout, expandedWidth, collapsedWidth, stackedWidth }) => layout === "stacked" ? {
+	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "railLayout" && prop !== "expandedWidth" && prop !== "collapsedWidth" && prop !== "stackedWidth"
+})(({ isOpen, railLayout, expandedWidth, collapsedWidth, stackedWidth }) => railLayout === "stacked" ? {
 	width: stackedWidth,
 	alignItems: "center"
 } : {
@@ -81,7 +81,7 @@ function Sidebar({ children, isOpen = false, anchor = "left", variant = "text",
 				gap: 1,
 				flexShrink: 0,
 				isOpen,
-				layout,
+				railLayout: layout,
 				expandedWidth,
 				collapsedWidth,
 				stackedWidth,

package/dist/Sidebar/Sidebar.mjs

@@ -12,8 +12,8 @@ const SidebarRail = styled(Flex, {
 	name: "Sidebar",
 	slot: "rail",
 	label: "SidebarRail",
-	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "layout" && prop !== "expandedWidth" && prop !== "collapsedWidth" && prop !== "stackedWidth"
-})(({ isOpen, layout, expandedWidth, collapsedWidth, stackedWidth }) => layout === "stacked" ? {
+	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "railLayout" && prop !== "expandedWidth" && prop !== "collapsedWidth" && prop !== "stackedWidth"
+})(({ isOpen, railLayout, expandedWidth, collapsedWidth, stackedWidth }) => railLayout === "stacked" ? {
 	width: stackedWidth,
 	alignItems: "center"
 } : {
@@ -80,7 +80,7 @@ function Sidebar({ children, isOpen = false, anchor = "left", variant = "text",
 				gap: 1,
 				flexShrink: 0,
 				isOpen,
-				layout,
+				railLayout: layout,
 				expandedWidth,
 				collapsedWidth,
 				stackedWidth,

package/dist/Tabs/TabList.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_TabsValueContext = require("../TabsValueContext-DklTSPKh.cjs");
-const require_Tabs = require("../Tabs-BTa2myRe.cjs");
+const require_Tabs = require("../Tabs-BqYnn6OV.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/Tabs/TabList/TabList.tsx

package/dist/Tabs/TabList.mjs

@@ -1,5 +1,5 @@
 import { n as useTabsValue } from "../TabsValueContext-C0vG9V7s.mjs";
-import { n as TabListContext, t as Tabs } from "../Tabs-CE8iDr0D.mjs";
+import { n as TabListContext, t as Tabs } from "../Tabs-t2KrGCQo.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/Tabs/TabList/TabList.tsx

package/dist/Tabs/Tabs.cjs

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

package/dist/Tabs/Tabs.mjs

@@ -1 +1 @@
-export { t as Tabs } from "../Tabs-CE8iDr0D.mjs";
+export { t as Tabs } from "../Tabs-t2KrGCQo.mjs";

package/dist/{Tabs-BTa2myRe.cjs → Tabs-BqYnn6OV.cjs}

@@ -5,8 +5,8 @@ const require_Icon = require("./Icon-C5Iz5ekp.cjs");
 const require_View = require("./View.cjs");
 const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
 const require_Tooltip = require("./Tooltip-rkGm1HnP.cjs");
-const require_MenuItem = require("./MenuItem-BWm8DC-S.cjs");
-const require_Menu = require("./Menu-DOOK_gM9.cjs");
+const require_MenuItem = require("./MenuItem-BChqYIsh.cjs");
+const require_Menu = require("./Menu-DiBVHD7B.cjs");
 const require_dividerLine = require("./dividerLine-DFuLn1zU.cjs");
 require("./tonalRadius-CU9GHoHx.cjs");
 const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
@@ -346,6 +346,10 @@ const OverflowClose = require_src.styled("button", {
 		"&:hover": { backgroundColor: `${main}1F` }
 	};
 });
+const overshoot = (start, end, viewStart, viewEnd) => {
+	if (start < viewStart) return start - viewStart;
+	return Math.max(end - viewEnd, 0);
+};
 const readTabs = (children) => react.Children.toArray(children).flatMap((child, index) => {
 	if (!(0, react.isValidElement)(child)) return [];
 	const { value, disabled, label, icon, closeLabel, color, size } = child.props;
@@ -505,12 +509,18 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 	}), [updateIndicator, updateOverflow]);
 	(0, react.useEffect)(() => {
 		if (!isScrolling) return;
-		const selected = listRef.current.querySelector("[data-tab-selected]");
-		if (typeof selected?.scrollIntoView === "function") selected.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	}, [isScrolling, selectedValue]);
+		const row = listRef.current;
+		const selected = row.querySelector("[data-tab-selected]");
+		if (!selected) return;
+		const rowBox = row.getBoundingClientRect();
+		const tabBox = selected.getBoundingClientRect();
+		if (isVertical) row.scrollTop += overshoot(tabBox.top, tabBox.bottom, rowBox.top, rowBox.bottom);
+		else row.scrollLeft += overshoot(tabBox.left, tabBox.right, rowBox.left, rowBox.right);
+	}, [
+		isScrolling,
+		isVertical,
+		selectedValue
+	]);
 	const hasScrollButtons = isScrolling && (scrollButtons === "always" || scrollButtons === "auto" && scroll.isOverflowing);
 	const ScrollButton = slots?.scrollButton ?? require_Tabs_TabScrollButton.TabScrollButton;
 	const renderScrollButton = (direction) => {

package/dist/{Tabs-CE8iDr0D.mjs → Tabs-t2KrGCQo.mjs}

@@ -5,8 +5,8 @@ import { t as Icon } from "./Icon-XpXU-SuF.mjs";
 import { View } from "./View.mjs";
 import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
 import { n as Tooltip } from "./Tooltip-Cx4ez9vY.mjs";
-import { t as MenuItem } from "./MenuItem-hJeCsQZX.mjs";
-import { t as Menu } from "./Menu-Cv887y7O.mjs";
+import { t as MenuItem } from "./MenuItem-Kvciwc9F.mjs";
+import { t as Menu } from "./Menu-ULMXG0BP.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";
@@ -345,6 +345,10 @@ const OverflowClose = styled("button", {
 		"&:hover": { backgroundColor: `${main}1F` }
 	};
 });
+const overshoot = (start, end, viewStart, viewEnd) => {
+	if (start < viewStart) return start - viewStart;
+	return Math.max(end - viewEnd, 0);
+};
 const readTabs = (children) => Children.toArray(children).flatMap((child, index) => {
 	if (!isValidElement(child)) return [];
 	const { value, disabled, label, icon, closeLabel, color, size } = child.props;
@@ -504,12 +508,18 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 	}), [updateIndicator, updateOverflow]);
 	useEffect(() => {
 		if (!isScrolling) return;
-		const selected = listRef.current.querySelector("[data-tab-selected]");
-		if (typeof selected?.scrollIntoView === "function") selected.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	}, [isScrolling, selectedValue]);
+		const row = listRef.current;
+		const selected = row.querySelector("[data-tab-selected]");
+		if (!selected) return;
+		const rowBox = row.getBoundingClientRect();
+		const tabBox = selected.getBoundingClientRect();
+		if (isVertical) row.scrollTop += overshoot(tabBox.top, tabBox.bottom, rowBox.top, rowBox.bottom);
+		else row.scrollLeft += overshoot(tabBox.left, tabBox.right, rowBox.left, rowBox.right);
+	}, [
+		isScrolling,
+		isVertical,
+		selectedValue
+	]);
 	const hasScrollButtons = isScrolling && (scrollButtons === "always" || scrollButtons === "auto" && scroll.isOverflowing);
 	const ScrollButton = slots?.scrollButton ?? TabScrollButton;
 	const renderScrollButton = (direction) => {

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-BTa2myRe.cjs");
+const require_Tabs = require("./Tabs-BqYnn6OV.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.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-CE8iDr0D.mjs";
+import { t as Tabs } from "./Tabs-t2KrGCQo.mjs";
 import { TabList } from "./Tabs/TabList.mjs";
 import { TabPanel } from "./Tabs/TabPanel.mjs";
 export { Tab, TabContext, TabList, TabPanel, TabScrollButton, Tabs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/design-system",
-  "version": "2.1.0-alpha.2",
+  "version": "2.1.1",
   "description": "Emotion + @soroush.tech/styled-system React component library - token-driven light/dark themes, layout primitives, forms, and overlays.",
   "keywords": [
     "design-system",