@vezham/react 26.0.0-beta.1 → 26.0.0-beta.3

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/components/panel/menu/variant.d.ts

@@ -1,5 +1,5 @@
-import { VariantProps } from '@vezham/react-v3';
-declare const tva: import('tailwind-variants').TVReturnType<{
+import { type VariantProps } from '@vezham/react-v3';
+declare const tva: import("tailwind-variants").TVReturnType<{
     variant: {
         default: {
             base: string;
@@ -167,7 +167,7 @@ declare const tva: import('tailwind-variants').TVReturnType<{
     tooltip_trigger: string;
     tooltip_content: string;
     label: string;
-}, import('tailwind-variants').TVReturnTypeLike<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: {
             base: string;

package/dist/lib/components/responsive-toolbar-action/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 type ResponsiveToolbarActionContextValue = {
     action: ReactNode;
     setAction: (action: ReactNode) => void;

package/dist/lib/components/shortcut-key/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
 import { Button } from '@vezham/react-v3';
 type ShortcutKeyProps = {
     className?: string;

package/dist/lib/components/toolbar-actions/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type ToolbarActionEvent = {
     actionKey: string;
     pageKey: string;
@@ -13,7 +13,7 @@ export declare const createToolbarActions: () => {
     subscribe: (actionKey: string, handler: ToolbarActionHandler, scope?: Scope) => () => void;
     emit: (event: ToolbarActionEvent) => boolean;
 };
-export declare const ToolbarActionsContext: import('react').Context<{
+export declare const ToolbarActionsContext: import("react").Context<{
     subscribe: (actionKey: string, handler: ToolbarActionHandler, scope?: Scope) => () => void;
     emit: (event: ToolbarActionEvent) => boolean;
 } | null>;

package/dist/lib/components/workspace-navigation/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 type MobileSidebarControl = {
     isOpen: boolean;
     onToggle: () => void;

package/dist/lib/layouts/app/frame.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 export type AppFrameProps = {
     children: ReactNode;
     contentClassName?: string;

package/dist/lib/layouts/app/index.d.ts

@@ -1,9 +1,9 @@
-import { ReactElement, ReactNode } from 'react';
-import { AppMenuItem } from '../../components/app-menu';
-import { ControlCenterConfig, ControlCenterI18n } from '../../components/panel/footer/control-center/types';
-import { AppNavigationItem } from '../../navigation';
-import { User } from '../../store/users/useUserStore';
-import { AppFrameProps } from './frame';
+import { type ReactElement, type ReactNode } from 'react';
+import { type AppMenuItem } from '../../components/app-menu';
+import type { ControlCenterConfig, ControlCenterI18n } from '../../components/panel/footer/control-center/types';
+import type { AppNavigationItem } from '../../navigation';
+import { type User } from '../../store/users/useUserStore';
+import { type AppFrameProps } from './frame';
 export type AppLayoutProps = Omit<AppFrameProps, 'navigation' | 'children'> & {
     children?: ReactNode;
     navigationItems: AppNavigationItem[];

package/dist/lib/layouts/menu-layout/home-navigation-bubble.d.ts

@@ -1,4 +1,4 @@
-import { User } from '../../components/panel/header/types';
+import { type User } from '../../components/panel/header/types';
 declare const HomeNavigationBubble: ({ onToggleDock, users }: {
     onToggleDock: () => void;
     users: User;

package/dist/lib/layouts/menu-layout/index-md.d.ts

@@ -1,4 +1,4 @@
-import { MenuLayoutProps } from './index';
+import type { MenuLayoutProps } from './index';
 declare const MenuMD: ({ items, controlCenter }: MenuLayoutProps) => import("react").JSX.Element;
 export { MenuMD };
 //# sourceMappingURL=index-md.d.ts.map

package/dist/lib/layouts/menu-layout/index-sm.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { MenuLayoutProps } from './index';
+import React from 'react';
+import type { MenuLayoutProps } from './index';
 declare const MenuSM: ({ items, controlCenter }: MenuLayoutProps) => React.JSX.Element;
 export { MenuSM };
 //# sourceMappingURL=index-sm.d.ts.map

package/dist/lib/layouts/menu-layout/index.d.ts

@@ -1,5 +1,5 @@
-import { FooterActionsProps } from '../../components/panel/footer/types';
-import { AppNavigationItem } from '../../navigation';
+import type { FooterActionsProps } from '../../components/panel/footer/types';
+import type { AppNavigationItem } from '../../navigation';
 export type MenuLayoutProps = Pick<FooterActionsProps, 'controlCenter'> & {
     items: AppNavigationItem[];
 };

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

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-import { AppNavigationItem } from '../../navigation';
-import { SectionSort } from './sort-menu';
-import { SectionAction, SectionSearch, SectionViewAction } from './toolbar';
+import { type ReactNode } from 'react';
+import { type AppNavigationItem } from '../../navigation';
+import type { SectionSort } from './sort-menu';
+import { type SectionAction, type SectionSearch, type SectionViewAction } from './toolbar';
 export type SectionLayoutProps = {
     title: string;
     sectionKey?: string;

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;AAodD,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,12 +6,13 @@ 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 { 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
@@ -19,24 +20,7 @@ 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 }) => 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$1, { 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
 			})
 		})]
@@ -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,6 +185,9 @@ var SectionLayoutToolbar = ({ options, navigation, preferences, displayTabs, isC
 		viewMode,
 		onViewModeChange: setViewMode,
 		tabs: isCompactToolbar ? [] : displayTabs,
+		selectedTabKey: selectedTab?.key,
+		onPanelIdChange,
+		onTabChange,
 		isMenuOpen,
 		onMenuOpenChange: setIsMenuOpen,
 		search: toolbarSearch,
@@ -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$1, { 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/preferences.d.ts

@@ -1,5 +1,5 @@
-import { SectionSort } from './sort-menu';
-import { SectionFilterKey } from './toolbar';
+import { type SectionSort } from './sort-menu';
+import type { SectionFilterKey } from './toolbar';
 export declare const useSectionPreferences: (scope: string, onSortChange?: (value: SectionSort) => void) => {
     setSelectedFilters: (selectedFilters: SectionFilterKey[]) => void;
     handleSortChange: (sortValue: SectionSort) => void;

package/dist/lib/layouts/section/sidebar-state.d.ts

@@ -1,5 +1,5 @@
-import { SetStateAction } from 'react';
-import { AppNavigationItem } from '../../navigation';
+import { type SetStateAction } from 'react';
+import { type AppNavigationItem } from '../../navigation';
 export declare const useSectionSidebarState: (items: AppNavigationItem[], pathname: string) => {
     expandedKeys: Set<string>;
     setExpandedKeys: (update: SetStateAction<Set<string>>) => void;

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

@@ -1,5 +1,5 @@
-import { Dispatch, SetStateAction } from 'react';
-import { AppNavigationItem } from '../../navigation';
+import { type Dispatch, type SetStateAction } from 'react';
+import { type AppNavigationItem } from '../../navigation';
 export declare const SectionSidebar: ({ items, pathname, label, onNavigate, expandedKeys: controlledExpandedKeys, onExpandedChange }: {
     items: AppNavigationItem[];
     pathname: string;

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

@@ -0,0 +1,12 @@
+import type { 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,uCAuCP,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))
+			})
+		}, JSON.stringify(tabs.map((tab) => tab.key)))
+	});
+};
+//#endregion
+export { SectionTabNavigation };

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type SectionToolbarContent = {
     desktop: ReactNode;
     mobile?: ReactNode;

package/dist/lib/layouts/section/toolbar-more-sheet.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { SectionSort } from './sort-menu';
-import { SectionAction, SectionFilterKey, SectionViewAction, SectionViewMode } from './toolbar';
+import { type ReactNode } from 'react';
+import { type SectionSort } from './sort-menu';
+import type { SectionAction, SectionFilterKey, SectionViewAction, SectionViewMode } from './toolbar';
 type Props = {
     filterAction?: SectionAction;
     filterGroups: readonly {

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

@@ -1,6 +1,6 @@
-import { ReactNode, RefObject } from 'react';
-import { AppNavigationItem } from '../../navigation';
-import { SectionSort } from './sort-menu';
+import { type ReactNode, type RefObject } from 'react';
+import type { AppNavigationItem } from '../../navigation';
+import { type SectionSort } from './sort-menu';
 export type SectionAction = {
     key: string;
     label: string;
@@ -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,9 +3,10 @@ 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 { 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
@@ -468,7 +469,7 @@ var SectionToolbar = (props) => {
 		onMenuOpenChange(false);
 	}, [isMobile, onMenuOpenChange]);
 	return /* @__PURE__ */ jsxs("header", {
-		className: `bg-background sticky top-0 z-30 shrink-0 px-3 py-0 md:px-4 md:py-2 ${isNavigationCollapsed ? "md:pl-30" : ""}`,
+		className: `bg-background sticky top-0 z-30 shrink-0 px-2 py-0 md:py-2 ${isNavigationCollapsed ? "md:pl-30" : ""}`,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "grid min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 md:flex md:min-h-12 md:justify-between",
 			children: [/* @__PURE__ */ jsxs("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/layouts/settings/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export declare const SettingsLayout: ({ children }: {
     children: ReactNode;
 }) => import("react").JSX.Element;

package/dist/lib/navigation-toolbar.d.ts

@@ -1,4 +1,4 @@
-import { AppNavigationItem } from './navigation';
+import type { AppNavigationItem } from './navigation';
 export type NavigationAction = {
     key: string;
     label: string;

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

@@ -1,5 +1,5 @@
-import { ControlCenterConfig } from '../../components/panel/footer/control-center/types';
-import { SettingsSection } from './navigation';
+import type { ControlCenterConfig } from '../../components/panel/footer/control-center/types';
+import type { SettingsSection } from './navigation';
 export declare const validateSearch: (search: Record<string, unknown>) => {
     section: SettingsSection;
 };

package/dist/lib/pages/settings/navigation.d.ts

@@ -1,4 +1,4 @@
 export type SettingsSection = 'General' | 'Appearance' | 'Notifications' | 'Account' | 'Widget Center' | 'Control Center';
-export declare const SettingsNavigationContext: import('react').Context<((section: SettingsSection) => void) | null>;
+export declare const SettingsNavigationContext: import("react").Context<((section: SettingsSection) => void) | null>;
 export declare const useSettingsNavigation: () => ((section: SettingsSection) => void) | null;
 //# sourceMappingURL=navigation.d.ts.map

package/dist/lib/pages/settings/settings-content.d.ts

@@ -1,4 +1,4 @@
-import { SettingsSection } from './navigation';
+import type { SettingsSection } from './navigation';
 export declare const SettingsContent: ({ active }: {
     active: SettingsSection;
 }) => import("react").JSX.Element;

package/dist/lib/pages/settings/tile-gallery.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { EditorState } from '../../components/panel/footer/control-center/editor';
+import { type ReactNode } from 'react';
+import type { EditorState } from '../../components/panel/footer/control-center/editor';
 type GalleryShape = 'small' | 'medium' | 'large' | 'compact' | 'standard' | 'wide' | 'full';
 type GalleryTile = {
     id: string;

package/dist/lib/store/useBookmarks/action.d.ts

@@ -1,4 +1,4 @@
-import { BookmarksResponse, RQBookmarks } from './types';
+import type { BookmarksResponse, RQBookmarks } from './types';
 declare const Bookmarks: {
     list: (rq: RQBookmarks) => Promise<BookmarksResponse>;
 };

package/dist/lib/store/useBookmarks/data.d.ts

@@ -1,4 +1,4 @@
-import { BookmarksResponse, FavoriteItem } from './types';
+import type { BookmarksResponse, FavoriteItem } from './types';
 export declare const sampleFavorites: FavoriteItem[];
 export declare const bookmarksData: BookmarksResponse;
 //# sourceMappingURL=data.d.ts.map

package/dist/lib/store/useBookmarks/index.d.ts

@@ -1,8 +1,8 @@
-import { BookmarkItem, BookmarksResponse, FavoriteItem, RQBookmarks } from './types';
+import { type BookmarkItem, type BookmarksResponse, type FavoriteItem, type RQBookmarks } from './types';
 export * from './data';
 export * from './types';
 export declare const useBookmarks: {
-    list: (rq?: RQBookmarks) => import('@tanstack/react-query').DefinedUseQueryResult<BookmarksResponse, Error>;
+    list: (rq?: RQBookmarks) => import("@tanstack/react-query").DefinedUseQueryResult<BookmarksResponse, Error>;
     actions: (rq?: RQBookmarks) => {
         setFavorites: (items: FavoriteItem[]) => NoInfer<BookmarksResponse> | undefined;
         setPins: (items: FavoriteItem[]) => NoInfer<BookmarksResponse> | undefined;

package/dist/lib/store/useStorage/action.d.ts

@@ -1,4 +1,4 @@
-import { RQStorage, StorageResponse } from './types';
+import type { RQStorage, StorageResponse } from './types';
 declare const Storage: {
     list: (rq: RQStorage) => Promise<StorageResponse>;
 };

package/dist/lib/store/useStorage/data.d.ts

@@ -1,3 +1,3 @@
-import { StorageResponse } from './types';
+import type { StorageResponse } from './types';
 export declare const storageData: StorageResponse;
 //# sourceMappingURL=data.d.ts.map

package/dist/lib/store/useStorage/index.d.ts

@@ -1,7 +1,7 @@
-import { RQStorage } from './types';
+import type { RQStorage } from './types';
 export * from './data';
 export * from './types';
 export declare const useStorage: {
-    list: (rq?: RQStorage) => import('@tanstack/react-query').DefinedUseQueryResult<import('./types').StorageResponse, Error>;
+    list: (rq?: RQStorage) => import("@tanstack/react-query").DefinedUseQueryResult<import("./types").StorageResponse, Error>;
 };
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vezham/react",
-  "version": "26.0.0-beta.1",
+  "version": "26.0.0-beta.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vezham/vx-fe-pkgs.git",
@@ -109,7 +109,7 @@
   ],
   "dependencies": {
     "@tanstack/react-hotkeys": "^0.10.0",
-    "@vezham/hooks": "26.0.0-beta.1",
+    "@vezham/hooks": "26.0.0-beta.3",
     "react-aria-components": "1.21.1"
   }
 }