@vezham/react 26.0.0-alpha.9 → 26.0.0-beta.2

package/dist/lib/components/panel/header/index.js

@@ -9,7 +9,7 @@ import { BookmarksTrigger } from "./bookmarks/index.js";
 import { StorageTrigger } from "./storage/index.js";
 import { useCallback, useState } from "react";
 import { Avatar, Button, Dropdown, Label, Separator, Surface, Tooltip, useMediaQuery } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AltArrowDown, Archive, Bookmark, Magnifier, SidebarMinimalistic } from "@vezham/icons-react";
 //#region src/lib/components/panel/header/index.tsx
 var Header = ({ users, showSearch = false, showBookamarks = false, showStorage = false, onAvatarClick, onSearchClick, isDockHidden = false, onToggleDock, isSidebarOpen = false, onToggleSidebar, extraActions, className, compact = false, hideSeparator = false, showMenuUtilities = true }) => {
@@ -95,7 +95,7 @@ var Header = ({ users, showSearch = false, showBookamarks = false, showStorage =
 			})]
 		})]
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Surface, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Surface, {
 		variant: "transparent",
 		className: `flex flex-row items-center gap-1 md:flex-col md:gap-3 ${className ?? ""}`,
 		"data-vx": "header",
@@ -190,7 +190,7 @@ var HeaderApplicationMenuContent = ({ onClose, onSearch, navigationLabel, onTogg
 				onPress: onClose,
 				children: /* @__PURE__ */ jsx(Label, { children: "Back to home" })
 			}),
-			showHistoryNavigation && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Dropdown.Item, {
+			showHistoryNavigation && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Dropdown.Item, {
 				id: "back",
 				textValue: "Back",
 				"aria-keyshortcuts": "Meta+ArrowLeft",
@@ -252,7 +252,7 @@ var HeaderApplicationMenuContent = ({ onClose, onSearch, navigationLabel, onTogg
 					})
 				]
 			}),
-			showMenuUtilities && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Dropdown.Item, {
+			showMenuUtilities && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Dropdown.Item, {
 				id: "search",
 				textValue: "Search",
 				"aria-label": "Open command palette",
@@ -319,7 +319,7 @@ var HeaderApplicationMenuContent = ({ onClose, onSearch, navigationLabel, onTogg
 };
 var HeaderPanelMenuItems = ({ showBookamarks, showStorage, onClose }) => {
 	const { toggleInfoPanel, activeInfoPanel, isOpen } = useInfoPanel();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [showBookamarks && /* @__PURE__ */ jsxs(Dropdown.Item, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [showBookamarks && /* @__PURE__ */ jsxs(Dropdown.Item, {
 		id: "bookmarks",
 		textValue: "Bookmarks",
 		"aria-label": "Bookmarks",

package/dist/lib/components/panel/header/storage/types.d.ts

@@ -341,7 +341,7 @@ declare const useProps: (originalProps: Props) => {
             variant?: "dark" | "light" | "default" | "glass" | undefined;
         } & import('tailwind-variants').ClassProp<import('tailwind-variants').ClassValue>) | undefined) => string;
     };
-    classNames: Partial<Record<"tabs" | "base" | "search_input" | "search_input_wrapper" | "search_icon" | "empty_container" | "empty_icon" | "empty_title" | "empty_description" | "item" | "tabs_list_container" | "tabs_list" | "tab_archive" | "tab_trash" | "tab_indicator" | "container" | "actions_bar" | "actions_bar_with_gap" | "clear_all_button" | "restore_all_button" | "items_container" | "date_group" | "date_header" | "date_label" | "date_divider" | "items_list" | "item_favicon" | "item_fallback_icon" | "item_content" | "item_title" | "item_url" | "item_actions" | "unarchive_button" | "restore_button" | "delete_button" | "delete_permanent_button" | "action_icon" | "action_icon_success" | "action_icon_danger" | "action_icon_default", string>> | undefined;
+    classNames: Partial<Record<"tabs" | "base" | "container" | "search_input" | "search_input_wrapper" | "search_icon" | "empty_container" | "empty_icon" | "empty_title" | "empty_description" | "item" | "tabs_list_container" | "tabs_list" | "tab_archive" | "tab_trash" | "tab_indicator" | "actions_bar" | "actions_bar_with_gap" | "clear_all_button" | "restore_all_button" | "items_container" | "date_group" | "date_header" | "date_label" | "date_divider" | "items_list" | "item_favicon" | "item_fallback_icon" | "item_content" | "item_title" | "item_url" | "item_actions" | "unarchive_button" | "restore_button" | "delete_button" | "delete_permanent_button" | "action_icon" | "action_icon_success" | "action_icon_danger" | "action_icon_default", string>> | undefined;
     children: ReactNode;
     getTabsProps: () => {
         className: string;

package/dist/lib/components/panel/info-panel/container.module.js

@@ -1,8 +1,10 @@
+//#region src/lib/components/panel/info-panel/container.module.css
+var panel = "_panel_inr1p_1";
 var container_module_default = {
-	panel: "_panel_inr1p_1",
+	panel,
 	"panel-enter": "_panel-enter_inr1p_1",
 	"panel-exit": "_panel-exit_inr1p_1",
 	"panel-reduced": "_panel-reduced_inr1p_1"
 };
 //#endregion
-export { container_module_default as default };
+export { container_module_default as default, panel };

package/dist/lib/components/panel/menu/index.js

@@ -3,7 +3,7 @@ import { useProps } from "./types.js";
 import { useNavigate } from "@tanstack/react-router";
 import { forwardRef, useState } from "react";
 import { Drawer, ScrollShadow, Tooltip, cn } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/components/panel/menu/index.tsx
 var Menu = forwardRef((props, ref) => {
 	const navigate = useNavigate();
@@ -75,7 +75,7 @@ var Menu = forwardRef((props, ref) => {
 			children: item.submenu?.map((subItem) => renderSubMenuItem(subItem, depth + 1))
 		})] }, item.key);
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Component, {
 		...getBaseProps(),
 		children: /* @__PURE__ */ jsx(ScrollShadow, {
 			...getScrollProps(),

package/dist/lib/components/panel/menu/types.d.ts

@@ -1,14 +1,5 @@
 import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
 import { tvProps, tvSlots } from './variant';
-type SubMenuItem = {
-    key: string;
-    title: string;
-    href?: string;
-    icon?: string;
-    iconActive?: string;
-    endContent?: ReactNode;
-    submenu?: SubMenuItem[];
-};
 type MenuItem = {
     key: string;
     title: string;
@@ -186,7 +177,7 @@ declare const useProps: (originalProps: Props) => {
             itemRadius?: "none" | "lg" | "sm" | "md" | "full" | undefined;
         } & import('tailwind-variants').ClassProp<import('tailwind-variants').ClassValue>) | undefined) => string;
     };
-    classNames: Partial<Record<"label" | "icon" | "scroll" | "base" | "align" | "item" | "container" | "icon_wrapper" | "tooltip_trigger" | "tooltip_content", string>> | undefined;
+    classNames: Partial<Record<"label" | "icon" | "scroll" | "base" | "align" | "container" | "item" | "icon_wrapper" | "tooltip_trigger" | "tooltip_content", string>> | undefined;
     children: ReactNode;
     getBaseProps: () => {
         color?: string | undefined | undefined;
@@ -518,5 +509,5 @@ declare const useProps: (originalProps: Props) => {
     onSubmenuChange: ((state: SubmenuState) => void) | undefined;
 };
 export { useProps };
-export type { Props, MenuItem, SubMenuItem };
+export type { Props, MenuItem };
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/components/panel/menu/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI/E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAO,MAAM,WAAW,CAAA;AAEjD,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;CACxB,CAAA;AAED,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,UAAU,KACR,SAAQ,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/D,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAC7C,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;CAChD;AAED,QAAA,MAAM,QAAQ,GAAI,eAAe,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAgDjC;QACD,IAAI,EAAE,QAAQ,CAAA;QACd,QAAQ,EAAE,OAAO,CAAA;KAClB;;;;;;;;iCAYmC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;;kCAgBpB;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;qBApFzC,MAAM,KAAK,IAAI;8BAEN,YAAY,KAAK,IAAI;CA+GhD,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AACnB,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI/E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAO,MAAM,WAAW,CAAA;AAEjD,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,UAAU,KACR,SAAQ,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/D,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAC7C,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;CAChD;AAED,QAAA,MAAM,QAAQ,GAAI,eAAe,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAgDjC;QACD,IAAI,EAAE,QAAQ,CAAA;QACd,QAAQ,EAAE,OAAO,CAAA;KAClB;;;;;;;;iCAYmC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;;kCAgBpB;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;qBApFzC,MAAM,KAAK,IAAI;8BAEN,YAAY,KAAK,IAAI;CA+GhD,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AACnB,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAA"}

package/dist/lib/layouts/menu-layout/index-md.js

@@ -16,7 +16,7 @@ import { HomeNavigationBubble } from "./home-navigation-bubble.js";
 import { useLocation } from "@tanstack/react-router";
 import { useState } from "react";
 import { Surface } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/layouts/menu-layout/index-md.tsx
 var headerUsers = {
 	id: "1",
@@ -47,7 +47,7 @@ var MenuMD = ({ items, controlCenter }) => {
 	useSidebarShortcut(toggleDock, isHome);
 	const selectedKey = getSelectedMenuKey(location.pathname, items);
 	const { user } = useUser();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(NavigationPanel, {
 			collapsed: isNavigationCollapsed,
 			footerUser: {
@@ -93,7 +93,7 @@ var NavigationPanel = ({ collapsed, footerUser, items, controlCenter, navigation
 	variant: "transparent",
 	className: `border-default-300 sticky top-0 left-0 z-[10] flex h-[100dvh] shrink-0 flex-col overflow-hidden transition-[width,padding,gap] duration-300 ease-out ${navigationWidth} ${collapsed ? "border-0 p-0" : "gap-6 px-4 pt-3 pb-4"}`,
 	"data-vx": "menu-layout",
-	children: !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+	children: !collapsed && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(Header, {
 			users: headerUsers,
 			showSearch: true,

package/dist/lib/layouts/menu-layout/index-sm.js

@@ -18,7 +18,7 @@ import { getNavigationToolbar } from "../../navigation-toolbar.js";
 import { useLocation } from "@tanstack/react-router";
 import React, { useState } from "react";
 import { Surface, toast } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/layouts/menu-layout/index-sm.tsx
 var MenuSM = ({ items, controlCenter }) => {
 	const [selectedKey, setSelectedKey] = React.useState(items[0]?.key ?? "");
@@ -49,7 +49,7 @@ var MenuSM = ({ items, controlCenter }) => {
 		avatar: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"
 	};
 	const { user } = useUser();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "pointer-events-none fixed top-3 right-3 left-3 z-40 flex items-center justify-between gap-2",
 			children: [/* @__PURE__ */ jsx(Surface, {

package/dist/lib/layouts/section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAWd,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAI7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,aAAa,EAElB,KAAK,iBAAiB,EAEvB,MAAM,WAAW,CAAA;AAMlB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAClC,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAA;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAudD,QAAA,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAI/C,CAAA;AAED,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,aAAa,EAAE,CAAA;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA;AAEjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAWd,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAI7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,aAAa,EAElB,KAAK,iBAAiB,EAEvB,MAAM,WAAW,CAAA;AAMlB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAClC,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAA;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAmaD,QAAA,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAI/C,CAAA;AAED,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,aAAa,EAAE,CAAA;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA;AAEjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA"}

package/dist/lib/layouts/section/index.js

@@ -6,37 +6,21 @@ import { ShortcutButton } from "../../components/shortcut-key/index.js";
 import { useSectionPreferences } from "./preferences.js";
 import { useSectionSidebarState } from "./sidebar-state.js";
 import { SectionSidebar } from "./sidebar.js";
+import { SectionTabNavigation } from "./tab-navigation.js";
 import { useMobileToolbarNavigation } from "./toolbar-more-sheet.js";
 import { SectionActiveFilters, SectionToolbar } from "./toolbar.js";
 import { SectionToolbarContentProvider, useRegisteredSectionToolbarContent, useSectionToolbarContent } from "./toolbar-content.js";
 import { useLocation, useNavigate, useRouter } from "@tanstack/react-router";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { Drawer, Surface, Tabs, useMediaQuery } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Drawer, Surface, useMediaQuery } from "@vezham/react-v3";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useHotkey } from "@tanstack/react-hotkeys";
 //#region src/lib/layouts/section/index.tsx
 var EMPTY_SIDEBAR_ITEMS = [];
 var EMPTY_MENU_ACTIONS = [];
 var EMPTY_VIEW_ACTIONS = [];
 var matchesPath = (pathname, href) => Boolean(href && (pathname === href || pathname.startsWith(`${href}/`)));
-var CompactTabs = ({ title, displayTabs, search, primaryAction }) => /* @__PURE__ */ jsx(Fragment, { children: displayTabs.length > 0 && /* @__PURE__ */ jsx(Tabs.ListContainer, {
-	className: `scrollbar-hide order-2 mb-3 w-fit min-w-0 self-center overflow-x-auto rounded-full ${search && primaryAction ? "max-w-[calc(100%-9rem)]" : "max-w-[calc(100%-1.5rem)]"}`,
-	children: /* @__PURE__ */ jsx(Tabs.List, {
-		"aria-label": `${title} tabs`,
-		className: "flex min-w-max flex-nowrap *:whitespace-nowrap",
-		children: displayTabs.map((tab) => /* @__PURE__ */ jsxs(Tabs.Tab, {
-			id: tab.key,
-			className: "whitespace-nowrap",
-			children: [tab.title, /* @__PURE__ */ jsx(Tabs.Indicator, {})]
-		}, tab.key))
-	})
-}, JSON.stringify(displayTabs.map((tab) => tab.key))) });
-var SectionPanels = ({ displayTabs, selectedTab, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [displayTabs.length === 0 && children, displayTabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
-	id: tab.key,
-	className: "m-0 flex min-h-0 flex-1 flex-col p-0",
-	children: tab.key === selectedTab?.key && children
-}, tab.key))] });
-var SectionBody = ({ hasSidebar, isNavigationCollapsed, sidebarId, sidebar, filter, selectedFilters, setSelectedFilters, displayTabs, selectedTab, children }) => /* @__PURE__ */ jsxs("div", {
+var SectionBody = ({ hasSidebar, isNavigationCollapsed, sidebarId, sidebar, filter, selectedFilters, setSelectedFilters, panelId, selectedTab, children }) => /* @__PURE__ */ jsxs("div", {
 	className: "order-1 flex min-h-0 min-w-0 flex-1",
 	children: [hasSidebar && !isNavigationCollapsed && /* @__PURE__ */ jsx("aside", {
 		id: sidebarId,
@@ -49,9 +33,12 @@ var SectionBody = ({ hasSidebar, isNavigationCollapsed, sidebarId, sidebar, filt
 			onSelectedFiltersChange: setSelectedFilters
 		}), /* @__PURE__ */ jsx(Surface, {
 			className: "relative flex min-h-0 flex-1 flex-col rounded-lg p-4 sm:p-5",
-			children: /* @__PURE__ */ jsx(SectionPanels, {
-				displayTabs,
-				selectedTab,
+			children: /* @__PURE__ */ jsx("div", {
+				id: panelId,
+				role: selectedTab ? "tabpanel" : void 0,
+				"aria-label": selectedTab?.title,
+				tabIndex: selectedTab ? 0 : void 0,
+				className: "m-0 flex min-h-0 flex-1 flex-col p-0",
 				children
 			})
 		})]
@@ -59,7 +46,7 @@ var SectionBody = ({ hasSidebar, isNavigationCollapsed, sidebarId, sidebar, filt
 });
 var SectionNavigationControls = ({ isNavigationCollapsed, sidebarId, toggleNavigation }) => {
 	const router = useRouter();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		!isNavigationCollapsed && /* @__PURE__ */ jsx(ShortcutButton, {
 			className: "h-9 w-9 min-w-9 p-0",
 			label: "Hide Sidebar",
@@ -166,15 +153,6 @@ var SectionDrawer = ({ title, navigation, children }) => {
 		})
 	});
 };
-var SectionTabs = ({ displayTabs, selectedTab, navigate, children }) => /* @__PURE__ */ jsx(Tabs, {
-	selectedKey: selectedTab?.key ?? "",
-	onSelectionChange: (key) => {
-		const tab = displayTabs.find((item) => item.key === key);
-		if (tab?.href) navigate({ to: tab.href });
-	},
-	className: "flex min-h-0 min-w-0 flex-1 flex-col gap-0",
-	children
-});
 var useSectionSearch = (search) => {
 	const inputRef = useRef(null);
 	const [isOpen, onOpenChange] = useState(false);
@@ -185,7 +163,7 @@ var useSectionSearch = (search) => {
 		onOpenChange
 	} : void 0;
 };
-var SectionLayoutToolbar = ({ options, navigation, preferences, displayTabs, isCompactToolbar, hideCompactControls }) => {
+var SectionLayoutToolbar = ({ options, navigation, preferences, displayTabs, selectedTab, onPanelIdChange, onTabChange, isCompactToolbar, hideCompactControls }) => {
 	const { title, toolbar, search, sync = true, filter = false, sort = false, view = EMPTY_VIEW_ACTIONS, onSync, menuActions = EMPTY_MENU_ACTIONS, primaryAction } = options;
 	const { selectedFilters, setSelectedFilters, sortValue, handleSortChange } = preferences;
 	const registeredToolbarContent = useRegisteredSectionToolbarContent();
@@ -207,12 +185,15 @@ var SectionLayoutToolbar = ({ options, navigation, preferences, displayTabs, isC
 		viewMode,
 		onViewModeChange: setViewMode,
 		tabs: isCompactToolbar ? [] : displayTabs,
+		selectedTabKey: selectedTab?.key,
+		onPanelIdChange,
+		onTabChange,
 		isMenuOpen,
 		onMenuOpenChange: setIsMenuOpen,
 		search: toolbarSearch,
 		menuActions,
 		primaryAction: hideCompactControls ? void 0 : primaryAction,
-		toolbar: /* @__PURE__ */ jsxs(Fragment, { children: [toolbar, registeredToolbarContent.desktop] }),
+		toolbar: /* @__PURE__ */ jsxs(Fragment$1, { children: [toolbar, registeredToolbarContent.desktop] }),
 		mobileToolbar: registeredToolbarContent.mobile,
 		onSync: handleSync,
 		navigationControls: /* @__PURE__ */ jsx(SectionNavigationControls, {
@@ -230,6 +211,11 @@ var SectionLayoutContent = (props) => {
 	const shouldHideCompactControls = isCompactToolbar && isFooterHidden;
 	const preferences = useSectionPreferences(getStateScope(sectionKey, navigation.pathname, sidebarItems, tabs, title), onSortChange);
 	const { displayTabs, selectedTab } = getSectionTabs(navigation.pathname, sidebarItems, tabs);
+	const [panelId, setPanelId] = useState(useId());
+	const handleTabChange = useCallback((key) => {
+		const tab = displayTabs.find((item) => item.key === String(key));
+		if (tab?.href) navigation.navigate({ to: tab.href });
+	}, [displayTabs, navigation]);
 	const sidebar = /* @__PURE__ */ jsx(SectionSidebar, {
 		items: sidebarItems,
 		pathname: navigation.pathname,
@@ -238,42 +224,41 @@ var SectionLayoutContent = (props) => {
 		onExpandedChange: navigation.setExpandedSidebarKeys,
 		onNavigate: () => navigation.setIsDrawerOpen(false)
 	});
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(SectionLayoutToolbar, {
-			options: props,
-			navigation,
-			preferences,
-			displayTabs,
-			isCompactToolbar,
-			hideCompactControls: shouldHideCompactControls
-		}),
-		isCompactToolbar && !shouldHideCompactControls && /* @__PURE__ */ jsx(CompactTabs, {
-			title,
-			displayTabs,
-			search,
-			primaryAction
-		}),
-		/* @__PURE__ */ jsx(SectionBody, {
-			hasSidebar: navigation.hasSidebar,
-			isNavigationCollapsed: navigation.isNavigationCollapsed,
-			sidebarId: navigation.sidebarId,
-			sidebar,
-			filter,
-			selectedFilters: preferences.selectedFilters,
-			setSelectedFilters: preferences.setSelectedFilters,
-			displayTabs,
-			selectedTab,
-			children
-		})
-	] });
 	return /* @__PURE__ */ jsxs("div", {
 		className: "bg-background flex h-full min-h-0 min-w-0 flex-1 flex-col",
-		children: [/* @__PURE__ */ jsx(SectionTabs, {
-			displayTabs,
-			selectedTab,
-			navigate: navigation.navigate,
-			children: content
-		}), /* @__PURE__ */ jsx(SectionDrawer, {
+		children: [/* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(SectionLayoutToolbar, {
+				options: props,
+				navigation,
+				preferences,
+				displayTabs,
+				selectedTab,
+				onPanelIdChange: setPanelId,
+				onTabChange: handleTabChange,
+				isCompactToolbar,
+				hideCompactControls: shouldHideCompactControls
+			}),
+			isCompactToolbar && !shouldHideCompactControls && /* @__PURE__ */ jsx(SectionTabNavigation, {
+				title,
+				tabs: displayTabs,
+				selectedTabKey: selectedTab?.key,
+				onPanelIdChange: setPanelId,
+				onTabChange: handleTabChange,
+				className: `order-2 mb-3 w-fit min-w-0 self-center ${search && primaryAction ? "max-w-[calc(100%-9rem)]" : "max-w-[calc(100%-1.5rem)]"}`
+			}),
+			/* @__PURE__ */ jsx(SectionBody, {
+				hasSidebar: navigation.hasSidebar,
+				isNavigationCollapsed: navigation.isNavigationCollapsed,
+				sidebarId: navigation.sidebarId,
+				sidebar,
+				filter,
+				selectedFilters: preferences.selectedFilters,
+				setSelectedFilters: preferences.setSelectedFilters,
+				panelId,
+				selectedTab,
+				children
+			})
+		] }), /* @__PURE__ */ jsx(SectionDrawer, {
 			title,
 			navigation,
 			children: sidebar

package/dist/lib/layouts/section/sidebar.js

@@ -3,7 +3,7 @@ import { getSelectedMenuKey } from "../../navigation.js";
 import { useSectionSidebarState } from "./sidebar-state.js";
 import { Link } from "@tanstack/react-router";
 import { useId } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AltArrowDown } from "@vezham/icons-react";
 //#region src/lib/layouts/section/sidebar.tsx
 var getEntryAppearance = (pathname, item) => {
@@ -15,7 +15,7 @@ var getEntryAppearance = (pathname, item) => {
 		href: item.href ?? item.children?.[0]?.href ?? "/"
 	};
 };
-var SidebarEntryLabel = ({ item }) => /* @__PURE__ */ jsxs(Fragment, { children: [item.icon && /* @__PURE__ */ jsx(AppIcon, {
+var SidebarEntryLabel = ({ item }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon && /* @__PURE__ */ jsx(AppIcon, {
 	icon: item.icon,
 	size: 18,
 	className: "shrink-0",

package/dist/lib/layouts/section/tab-navigation.d.ts

@@ -0,0 +1,12 @@
+import { AppNavigationItem } from '../../navigation';
+type Props = {
+    title: string;
+    tabs: AppNavigationItem[];
+    selectedTabKey?: string;
+    onPanelIdChange?: (id: string) => void;
+    onTabChange?: (key: string) => void;
+    className?: string;
+};
+export declare const SectionTabNavigation: ({ title, tabs, selectedTabKey, onPanelIdChange, onTabChange, className }: Props) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=tab-navigation.d.ts.map

package/dist/lib/layouts/section/tab-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-navigation.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/tab-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,0EAOlC,KAAK,uCAqCP,CAAA"}

package/dist/lib/layouts/section/tab-navigation.js

@@ -0,0 +1,32 @@
+import { useCallback } from "react";
+import { Tabs } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/layouts/section/tab-navigation.tsx
+var SectionTabNavigation = ({ title, tabs, selectedTabKey, onPanelIdChange, onTabChange, className }) => {
+	const handleSelectedTabRef = useCallback((element) => {
+		const panelId = element?.getAttribute("aria-controls");
+		if (panelId) onPanelIdChange?.(panelId);
+	}, [onPanelIdChange]);
+	if (tabs.length === 0) return null;
+	return /* @__PURE__ */ jsx(Tabs, {
+		selectedKey: selectedTabKey,
+		className: "contents",
+		variant: "primary",
+		onSelectionChange: (key) => onTabChange?.(String(key)),
+		children: /* @__PURE__ */ jsx(Tabs.ListContainer, {
+			className: `max-w-full ${className ?? ""}`,
+			children: /* @__PURE__ */ jsx(Tabs.List, {
+				"aria-label": `${title} tabs`,
+				className: "min-w-max flex-nowrap",
+				children: tabs.map((tab) => /* @__PURE__ */ jsxs(Tabs.Tab, {
+					id: tab.key,
+					ref: tab.key === selectedTabKey ? handleSelectedTabRef : void 0,
+					className: "whitespace-nowrap",
+					children: [tab.title, /* @__PURE__ */ jsx(Tabs.Indicator, {})]
+				}, tab.key))
+			})
+		})
+	});
+};
+//#endregion
+export { SectionTabNavigation };

package/dist/lib/layouts/section/toolbar-more-sheet.js

@@ -3,7 +3,7 @@ import { MenuSheet } from "../../components/menu/sheet.js";
 import { sortDirections, sortFields } from "./sort-menu.js";
 import { createContext, useContext, useMemo, useState } from "react";
 import { Button, Label, Separator } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AltArrowLeft, AltArrowRight, CheckCircle, MenuDots, SortFromBottomToTop, SortFromTopToBottom } from "@vezham/icons-react";
 //#region src/lib/layouts/section/toolbar-more-sheet.tsx
 var MobileToolbarNavigationContext = createContext(null);
@@ -48,7 +48,7 @@ var SheetFilters = ({ filterGroups, selectedFilters, onToggleFilter }) => {
 		]
 	}, group.label));
 };
-var SheetSort = ({ sortValue, onSortChange }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+var SheetSort = ({ sortValue, onSortChange }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 	/* @__PURE__ */ jsx(Label, {
 		className: "text-muted px-3 pt-2",
 		children: "Sort by"
@@ -107,7 +107,7 @@ var SheetHome = ({ sync, onSync, filterAction, sort, sortValue, viewModeActions,
 		menuActions,
 		mobileToolbar
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		mobileToolbar,
 		separators.afterMobile && /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
 		sync && renderActions([{

package/dist/lib/layouts/section/toolbar.d.ts

@@ -30,6 +30,9 @@ type ToolbarSearch = SectionSearch & {
 type Props = {
     title: string;
     tabs: AppNavigationItem[];
+    selectedTabKey?: string;
+    onPanelIdChange?: (id: string) => void;
+    onTabChange?: (key: string) => void;
     navigationControls: ReactNode;
     isNavigationCollapsed?: boolean;
     toolbar?: ReactNode;

package/dist/lib/layouts/section/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/toolbar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/toolbar.tsx"],"names":[],"mappings":"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"}

package/dist/lib/layouts/section/toolbar.js

@@ -3,10 +3,11 @@ import "../../components/panel/responsive.js";
 import { useResponsiveToolbarAction } from "../../components/responsive-toolbar-action/index.js";
 import { ShortcutButton } from "../../components/shortcut-key/index.js";
 import { DEFAULT_SORT, SortMenu } from "./sort-menu.js";
+import { SectionTabNavigation } from "./tab-navigation.js";
 import { ToolbarMoreSheet } from "./toolbar-more-sheet.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button, Chip, CloseButton, Dropdown, Label, Popover, SearchField, Separator, Tabs, Tooltip, useMediaQuery } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Chip, CloseButton, Dropdown, Label, Popover, SearchField, Separator, Tooltip, useMediaQuery } from "@vezham/react-v3";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { SortFromBottomToTop, SortFromTopToBottom } from "@vezham/icons-react";
 //#region src/lib/layouts/section/toolbar.tsx
 var iconButtonClassName = "h-9 w-9 min-w-9 p-0";
@@ -241,7 +242,7 @@ var SectionSearchField = ({ search }) => {
 			/* @__PURE__ */ jsx(SearchField.ClearButton, { "aria-label": `Clear ${label.toLowerCase()}` })
 		] })
 	});
-	if (search.onSearch) return /* @__PURE__ */ jsxs(Fragment, { children: [input(true), /* @__PURE__ */ jsxs(Tooltip, {
+	if (search.onSearch) return /* @__PURE__ */ jsxs(Fragment$1, { children: [input(true), /* @__PURE__ */ jsxs(Tooltip, {
 		delay: 0,
 		children: [/* @__PURE__ */ jsx(Button, {
 			isIconOnly: true,
@@ -257,7 +258,7 @@ var SectionSearchField = ({ search }) => {
 			})
 		}), /* @__PURE__ */ jsx(Tooltip.Content, { children: "Search" })]
 	})] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [input(true), /* @__PURE__ */ jsxs(Popover, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [input(true), /* @__PURE__ */ jsxs(Popover, {
 		isOpen: search.isOpen,
 		onOpenChange: search.onOpenChange,
 		children: [/* @__PURE__ */ jsxs(Tooltip, {
@@ -352,7 +353,7 @@ var ToolbarActions = ({ search, toolbar, sync = true, onSync, filterAction, hasF
 				onChange: onSortChange
 			})
 		})] }),
-		viewModeActions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [(filterAction || sort) && /* @__PURE__ */ jsx(Separator, {
+		viewModeActions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [(filterAction || sort) && /* @__PURE__ */ jsx(Separator, {
 			orientation: "vertical",
 			className: "h-8"
 		}), /* @__PURE__ */ jsx("div", {
@@ -476,18 +477,14 @@ var SectionToolbar = (props) => {
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "col-start-1 row-start-1 hidden min-w-0 items-center gap-1 md:flex",
 					children: navigationControls
-				}), tabs.length > 0 && /* @__PURE__ */ jsx(Tabs.ListContainer, {
-					className: "scrollbar-hide col-span-2 row-start-2 mt-2 w-fit max-w-full min-w-0 justify-self-center overflow-x-auto rounded-full sm:mt-0 sm:max-w-fit sm:flex-1",
-					children: /* @__PURE__ */ jsx(Tabs.List, {
-						"aria-label": `${title} tabs`,
-						className: "flex min-w-max flex-nowrap *:whitespace-nowrap",
-						children: tabs.map((tab) => /* @__PURE__ */ jsxs(Tabs.Tab, {
-							id: tab.key,
-							className: "whitespace-nowrap",
-							children: [tab.title, /* @__PURE__ */ jsx(Tabs.Indicator, {})]
-						}, tab.key))
-					})
-				}, JSON.stringify(tabs.map((tab) => tab.key)))]
+				}), /* @__PURE__ */ jsx(SectionTabNavigation, {
+					title,
+					tabs,
+					selectedTabKey: props.selectedTabKey,
+					onPanelIdChange: props.onPanelIdChange,
+					onTabChange: props.onTabChange,
+					className: "col-span-2 row-start-2 mt-2 w-fit max-w-full min-w-0 justify-self-center sm:mt-0 sm:max-w-fit sm:flex-1"
+				})]
 			}), /* @__PURE__ */ jsx(ToolbarActions, {
 				...props,
 				isMobile,

package/dist/lib/pages/settings/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/pages/settings/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oDAAoD,CAAA;AAW7F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AA6BnD,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC9B;IAAE,OAAO,EAAE,eAAe,CAAA;CAI3B,CAAA;AAEF,eAAO,MAAM,aAAa,GAAI,mBAE3B;IACD,aAAa,CAAC,EAAE,mBAAmB,CAAA;CACpC,gCAcA,CAAA;AA6ED,eAAO,MAAM,YAAY,GAAI,qDAK1B;IACD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAA;IACpD,aAAa,CAAC,EAAE,mBAAmB,CAAA;CACpC,gCA8JA,CAAA;AAED,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/pages/settings/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oDAAoD,CAAA;AAa7F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AA6BnD,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC9B;IAAE,OAAO,EAAE,eAAe,CAAA;CAI3B,CAAA;AAEF,eAAO,MAAM,aAAa,GAAI,mBAE3B;IACD,aAAa,CAAC,EAAE,mBAAmB,CAAA;CACpC,gCAcA,CAAA;AAoID,eAAO,MAAM,YAAY,GAAI,qDAK1B;IACD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAA;IACpD,aAAa,CAAC,EAAE,mBAAmB,CAAA;CACpC,gCA8JA,CAAA;AAED,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}