@vezham/react 26.0.0-alpha.5 → 26.0.0-alpha.7

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

@@ -0,0 +1,285 @@
+import { AppIcon } from "../../components/app-icon/index.js";
+import { useMobileControls } from "../../components/mobile-controls/index.js";
+import { useSidebarShortcut, useWorkspaceNavigation } from "../../components/workspace-navigation/index.js";
+import { getSelectedMenuKey } from "../../navigation.js";
+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 { 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 { 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", {
+	className: "order-1 flex min-h-0 min-w-0 flex-1",
+	children: [hasSidebar && !isNavigationCollapsed && /* @__PURE__ */ jsx("aside", {
+		id: sidebarId,
+		className: "hidden w-56 shrink-0 overflow-y-auto md:block",
+		children: sidebar
+	}), /* @__PURE__ */ jsxs("main", {
+		className: `flex min-w-0 flex-1 flex-col gap-2 overflow-auto p-4 ${filter && selectedFilters.length > 0 ? "pt-2" : ""}`,
+		children: [filter && /* @__PURE__ */ jsx(SectionActiveFilters, {
+			selectedFilters,
+			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
+			})
+		})]
+	})]
+});
+var SectionNavigationControls = ({ isNavigationCollapsed, sidebarId, toggleNavigation }) => {
+	const router = useRouter();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		!isNavigationCollapsed && /* @__PURE__ */ jsx(ShortcutButton, {
+			className: "h-9 w-9 min-w-9 p-0",
+			label: "Hide Sidebar",
+			shortcut: "⌘ S",
+			"aria-keyshortcuts": "Meta+S",
+			"aria-controls": sidebarId,
+			"aria-expanded": true,
+			onPress: toggleNavigation,
+			children: /* @__PURE__ */ jsx(AppIcon, {
+				icon: "vx:sidebar",
+				size: 18,
+				"aria-hidden": "true"
+			})
+		}),
+		/* @__PURE__ */ jsx(ShortcutButton, {
+			className: "hidden h-9 w-9 min-w-9 p-0 lg:inline-flex",
+			label: "Back",
+			shortcut: "⌘ ←",
+			"aria-keyshortcuts": "Meta+ArrowLeft",
+			onPress: () => router.history.back(),
+			children: /* @__PURE__ */ jsx(AppIcon, {
+				icon: "vx:arrow-left",
+				size: 18,
+				"aria-hidden": "true"
+			})
+		}),
+		/* @__PURE__ */ jsx(ShortcutButton, {
+			className: "hidden h-9 w-9 min-w-9 p-0 lg:inline-flex",
+			label: "Forward",
+			shortcut: "⌘ →",
+			"aria-keyshortcuts": "Meta+ArrowRight",
+			onPress: () => router.history.forward(),
+			children: /* @__PURE__ */ jsx(AppIcon, {
+				icon: "vx:arrow-right",
+				size: 18,
+				"aria-hidden": "true"
+			})
+		})
+	] });
+};
+var getSectionTabs = (pathname, sidebarItems, tabs) => {
+	const displayTabs = sidebarItems.some((item) => item.childrenDisplay === "sidebar" && getSelectedMenuKey(pathname, [item])) ? [] : tabs;
+	return {
+		displayTabs,
+		selectedTab: displayTabs.find((tab) => matchesPath(pathname, tab.href)) ?? displayTabs[0]
+	};
+};
+var useSectionNavigation = (sidebarItems, sync, onSync) => {
+	const { pathname } = useLocation();
+	const navigate = useNavigate();
+	const router = useRouter();
+	const { isNavigationCollapsed, toggleNavigation, registerMobileSidebar } = useWorkspaceNavigation();
+	const { expandedKeys: expandedSidebarKeys, setExpandedKeys: setExpandedSidebarKeys } = useSectionSidebarState(sidebarItems, pathname);
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const hasSidebar = sidebarItems.length > 0;
+	const toggleMobileSidebar = useCallback(() => setIsDrawerOpen((open) => !open), []);
+	useEffect(() => {
+		if (hasSidebar) return registerMobileSidebar({
+			isOpen: isDrawerOpen,
+			onToggle: toggleMobileSidebar
+		});
+	}, [
+		hasSidebar,
+		isDrawerOpen,
+		registerMobileSidebar,
+		toggleMobileSidebar
+	]);
+	const sidebarId = useId();
+	const toggleSidebar = () => {
+		if (hasSidebar && !window.matchMedia("(min-width: 768px)").matches) toggleMobileSidebar();
+		else toggleNavigation();
+	};
+	useSidebarShortcut(toggleSidebar);
+	useHotkey("Meta+ArrowLeft", () => router.history.back());
+	useHotkey("Meta+ArrowRight", () => router.history.forward());
+	useHotkey("Meta+R", () => {
+		onSync?.();
+	}, { enabled: sync && Boolean(onSync) });
+	return {
+		pathname,
+		navigate,
+		isNavigationCollapsed,
+		toggleNavigation,
+		expandedSidebarKeys,
+		setExpandedSidebarKeys,
+		isDrawerOpen,
+		setIsDrawerOpen,
+		hasSidebar,
+		sidebarId
+	};
+};
+var getStateScope = (sectionKey, pathname, sidebarItems, tabs, title) => sectionKey ?? getSelectedMenuKey(pathname, sidebarItems) ?? (tabs.length > 0 ? JSON.stringify(tabs.map((tab) => tab.key)) : title);
+var SectionDrawer = ({ title, navigation, children }) => {
+	if (!navigation.hasSidebar) return null;
+	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		isOpen: navigation.isDrawerOpen,
+		onOpenChange: navigation.setIsDrawerOpen,
+		children: /* @__PURE__ */ jsx(Drawer.Content, {
+			placement: "left",
+			children: /* @__PURE__ */ jsxs(Drawer.Dialog, {
+				className: "bg-background w-[min(20rem,calc(100vw-2rem))]",
+				children: [/* @__PURE__ */ jsxs(Drawer.Header, { children: [/* @__PURE__ */ jsx(Drawer.Heading, { children: title }), /* @__PURE__ */ jsx(Drawer.CloseTrigger, { "aria-label": "Hide Sidebar" })] }), /* @__PURE__ */ jsx(Drawer.Body, { 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);
+	return search ? {
+		...search,
+		inputRef,
+		isOpen,
+		onOpenChange
+	} : void 0;
+};
+var SectionLayoutToolbar = ({ options, navigation, preferences, displayTabs, 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();
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const [viewMode, setViewMode] = useState("grid");
+	const toolbarSearch = useSectionSearch(search);
+	const handleSync = useCallback(() => onSync?.(), [onSync]);
+	return /* @__PURE__ */ jsx(SectionToolbar, {
+		title,
+		isNavigationCollapsed: navigation.isNavigationCollapsed,
+		sync,
+		filter,
+		sort,
+		sortValue,
+		onSortChange: handleSortChange,
+		view,
+		selectedFilters,
+		onSelectedFiltersChange: setSelectedFilters,
+		viewMode,
+		onViewModeChange: setViewMode,
+		tabs: isCompactToolbar ? [] : displayTabs,
+		isMenuOpen,
+		onMenuOpenChange: setIsMenuOpen,
+		search: toolbarSearch,
+		menuActions,
+		primaryAction: hideCompactControls ? void 0 : primaryAction,
+		toolbar: /* @__PURE__ */ jsxs(Fragment, { children: [toolbar, registeredToolbarContent.desktop] }),
+		mobileToolbar: registeredToolbarContent.mobile,
+		onSync: handleSync,
+		navigationControls: /* @__PURE__ */ jsx(SectionNavigationControls, {
+			isNavigationCollapsed: navigation.isNavigationCollapsed,
+			sidebarId: navigation.sidebarId,
+			toggleNavigation: navigation.toggleNavigation
+		})
+	});
+};
+var SectionLayoutContent = (props) => {
+	const { title, sectionKey, navigationLabel = `${title} sections`, sidebarItems = EMPTY_SIDEBAR_ITEMS, tabs, search, filter = false, onSortChange, primaryAction, children } = props;
+	const navigation = useSectionNavigation(sidebarItems, props.sync ?? true, props.onSync);
+	const { isFooterHidden } = useMobileControls();
+	const isCompactToolbar = useMediaQuery("(max-width: 767px)");
+	const shouldHideCompactControls = isCompactToolbar && isFooterHidden;
+	const preferences = useSectionPreferences(getStateScope(sectionKey, navigation.pathname, sidebarItems, tabs, title), onSortChange);
+	const { displayTabs, selectedTab } = getSectionTabs(navigation.pathname, sidebarItems, tabs);
+	const sidebar = /* @__PURE__ */ jsx(SectionSidebar, {
+		items: sidebarItems,
+		pathname: navigation.pathname,
+		label: navigationLabel,
+		expandedKeys: navigation.expandedSidebarKeys,
+		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, {
+			title,
+			navigation,
+			children: sidebar
+		})]
+	});
+};
+var SectionLayout = (props) => /* @__PURE__ */ jsx(SectionToolbarContentProvider, { children: /* @__PURE__ */ jsx(SectionLayoutContent, { ...props }) });
+//#endregion
+export { SectionLayout, useMobileToolbarNavigation, useSectionToolbarContent };

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

@@ -0,0 +1,10 @@
+import { SectionSort } from './sort-menu';
+import { SectionFilterKey } from './toolbar';
+export declare const useSectionPreferences: (scope: string, onSortChange?: (value: SectionSort) => void) => {
+    setSelectedFilters: (selectedFilters: SectionFilterKey[]) => void;
+    handleSortChange: (sortValue: SectionSort) => void;
+    scope: string;
+    selectedFilters: SectionFilterKey[];
+    sortValue: SectionSort;
+};
+//# sourceMappingURL=preferences.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preferences.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/preferences.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAA;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAEjD,eAAO,MAAM,qBAAqB,GAChC,OAAO,MAAM,EACb,eAAe,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI;0CAoBvB,gBAAgB,EAAE;kCAOxB,WAAW;;qBAvBA,gBAAgB,EAAE;;CA+B5C,CAAA"}

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

@@ -0,0 +1,41 @@
+import { DEFAULT_SORT } from "./sort-menu.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/lib/layouts/section/preferences.ts
+var useSectionPreferences = (scope, onSortChange) => {
+	const [state, setState] = useState({
+		scope,
+		selectedFilters: [],
+		sortValue: DEFAULT_SORT
+	});
+	if (state.scope !== scope) setState({
+		scope,
+		selectedFilters: [],
+		sortValue: DEFAULT_SORT
+	});
+	const previousScope = useRef(scope);
+	useEffect(() => {
+		if (previousScope.current === scope) return;
+		previousScope.current = scope;
+		onSortChange?.(DEFAULT_SORT);
+	}, [scope, onSortChange]);
+	const setSelectedFilters = useCallback((selectedFilters) => {
+		setState((current) => ({
+			...current,
+			selectedFilters
+		}));
+	}, []);
+	const handleSortChange = useCallback((sortValue) => {
+		setState((current) => ({
+			...current,
+			sortValue
+		}));
+		onSortChange?.(sortValue);
+	}, [onSortChange]);
+	return {
+		...state,
+		setSelectedFilters,
+		handleSortChange
+	};
+};
+//#endregion
+export { useSectionPreferences };

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

@@ -0,0 +1,7 @@
+import { SetStateAction } from 'react';
+import { AppNavigationItem } from '../../navigation';
+export declare const useSectionSidebarState: (items: AppNavigationItem[], pathname: string) => {
+    expandedKeys: Set<string>;
+    setExpandedKeys: (update: SetStateAction<Set<string>>) => void;
+};
+//# sourceMappingURL=sidebar-state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-state.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/sidebar-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAyB,MAAM,OAAO,CAAA;AAElE,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAmB7E,eAAO,MAAM,sBAAsB,GACjC,OAAO,iBAAiB,EAAE,EAC1B,UAAU,MAAM;;8BAc6B,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;CASzE,CAAA"}

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

@@ -0,0 +1,35 @@
+import { getSelectedMenuKey } from "../../navigation.js";
+import { useCallback, useState } from "react";
+//#region src/lib/layouts/section/sidebar-state.ts
+var expandActiveGroups = (items, pathname, expandedKeys) => {
+	const next = new Set(expandedKeys);
+	for (const item of items) {
+		if (item.childrenDisplay !== "sidebar" || !item.children?.length) continue;
+		if (!getSelectedMenuKey(pathname, [item])) continue;
+		next.add(item.key);
+		for (const key of expandActiveGroups(item.children, pathname, next)) next.add(key);
+	}
+	return next;
+};
+var useSectionSidebarState = (items, pathname) => {
+	const [state, setState] = useState(() => ({
+		pathname,
+		expandedKeys: expandActiveGroups(items, pathname, /* @__PURE__ */ new Set())
+	}));
+	if (state.pathname !== pathname) setState({
+		pathname,
+		expandedKeys: expandActiveGroups(items, pathname, state.expandedKeys)
+	});
+	const setExpandedKeys = useCallback((update) => {
+		setState((current) => ({
+			...current,
+			expandedKeys: typeof update === "function" ? update(current.expandedKeys) : update
+		}));
+	}, []);
+	return {
+		expandedKeys: state.expandedKeys,
+		setExpandedKeys
+	};
+};
+//#endregion
+export { useSectionSidebarState };

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

@@ -0,0 +1,11 @@
+import { Dispatch, SetStateAction } from 'react';
+import { AppNavigationItem } from '../../navigation';
+export declare const SectionSidebar: ({ items, pathname, label, onNavigate, expandedKeys: controlledExpandedKeys, onExpandedChange }: {
+    items: AppNavigationItem[];
+    pathname: string;
+    label: string;
+    onNavigate: () => void;
+    expandedKeys?: Set<string>;
+    onExpandedChange?: Dispatch<SetStateAction<Set<string>>>;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAS,MAAM,OAAO,CAAA;AAKjE,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAsG7E,eAAO,MAAM,cAAc,GAAI,gGAO5B;IACD,KAAK,EAAE,iBAAiB,EAAE,CAAA;IAC1B,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,gBAAgB,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CACzD,gCAqBA,CAAA"}

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

@@ -0,0 +1,84 @@
+import { AppIcon } from "../../components/app-icon/index.js";
+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 { AltArrowDown } from "@vezham/icons-react";
+//#region src/lib/layouts/section/sidebar.tsx
+var getEntryAppearance = (pathname, item) => {
+	const active = Boolean(getSelectedMenuKey(pathname, [item]));
+	const hasActiveChild = Boolean(item.children?.length && getSelectedMenuKey(pathname, item.children));
+	return {
+		active,
+		parentClass: active ? `text-foreground ${hasActiveChild ? "font-medium" : "font-bold"}` : "text-muted",
+		href: item.href ?? item.children?.[0]?.href ?? "/"
+	};
+};
+var SidebarEntryLabel = ({ item }) => /* @__PURE__ */ jsxs(Fragment, { children: [item.icon && /* @__PURE__ */ jsx(AppIcon, {
+	icon: item.icon,
+	size: 18,
+	className: "shrink-0",
+	"aria-hidden": "true"
+}), /* @__PURE__ */ jsx("span", {
+	className: "min-w-0 flex-1 truncate",
+	children: item.title
+})] });
+var SidebarEntry = ({ item, pathname, onNavigate, expandedKeys, setExpandedKeys }) => {
+	const { active, parentClass, href } = getEntryAppearance(pathname, item);
+	const expandable = item.childrenDisplay === "sidebar" && Boolean(item.children?.length);
+	const expanded = expandedKeys.has(item.key);
+	const childrenId = useId();
+	return /* @__PURE__ */ jsxs("div", { children: [expandable ? /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": item.title,
+		"aria-expanded": expanded,
+		"aria-controls": childrenId,
+		className: `hover:bg-surface-secondary flex w-full cursor-pointer items-center gap-3 rounded-full px-3 py-2 text-start text-sm ${parentClass}`,
+		onClick: () => setExpandedKeys((current) => {
+			const next = new Set(current);
+			if (next.has(item.key)) next.delete(item.key);
+			else next.add(item.key);
+			return next;
+		}),
+		children: [/* @__PURE__ */ jsx(SidebarEntryLabel, { item }), /* @__PURE__ */ jsx(AltArrowDown, {
+			size: 16,
+			className: `shrink-0 ${expanded ? "" : "-rotate-90"}`,
+			"aria-hidden": "true"
+		})]
+	}) : /* @__PURE__ */ jsx(Link, {
+		to: href,
+		"aria-current": active ? "page" : void 0,
+		onClick: onNavigate,
+		className: `flex items-center gap-3 rounded-full px-3 py-2 text-sm ${active ? "bg-surface-secondary text-foreground font-bold" : "text-muted hover:bg-surface-secondary"}`,
+		children: /* @__PURE__ */ jsx(SidebarEntryLabel, { item })
+	}), expandable && expanded && /* @__PURE__ */ jsx("div", {
+		id: childrenId,
+		className: "border-separator mt-1 ml-5 space-y-1 border-l pl-2",
+		children: item.children?.map((child) => /* @__PURE__ */ jsx(SidebarEntry, {
+			item: child,
+			pathname,
+			onNavigate,
+			expandedKeys,
+			setExpandedKeys
+		}, child.key))
+	})] });
+};
+var SectionSidebar = ({ items, pathname, label, onNavigate, expandedKeys: controlledExpandedKeys, onExpandedChange }) => {
+	const { expandedKeys: localExpandedKeys, setExpandedKeys: setLocalExpandedKeys } = useSectionSidebarState(items, pathname);
+	const expandedKeys = controlledExpandedKeys ?? localExpandedKeys;
+	const setExpandedKeys = onExpandedChange ?? setLocalExpandedKeys;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": label,
+		className: "space-y-1 p-2",
+		children: items.map((item) => /* @__PURE__ */ jsx(SidebarEntry, {
+			item,
+			pathname,
+			onNavigate,
+			expandedKeys,
+			setExpandedKeys
+		}, item.key))
+	});
+};
+//#endregion
+export { SectionSidebar };

package/dist/lib/layouts/section/sort-menu.d.ts

@@ -0,0 +1,27 @@
+export type SectionSort = {
+    by: 'name' | 'created' | 'updated';
+    direction: 'ascending' | 'descending';
+};
+export declare const DEFAULT_SORT: SectionSort;
+export declare const sortFields: readonly [{
+    readonly key: "name";
+    readonly label: "Name";
+}, {
+    readonly key: "created";
+    readonly label: "Created date";
+}, {
+    readonly key: "updated";
+    readonly label: "Updated date";
+}];
+export declare const sortDirections: readonly [{
+    readonly key: "ascending";
+    readonly label: "Ascending";
+}, {
+    readonly key: "descending";
+    readonly label: "Descending";
+}];
+export declare const SortMenu: ({ value, onChange }: {
+    value: SectionSort;
+    onChange?: (value: SectionSort) => void;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=sort-menu.d.ts.map

package/dist/lib/layouts/section/sort-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-menu.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/sort-menu.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;IAClC,SAAS,EAAE,WAAW,GAAG,YAAY,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,WAG1B,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;EAIb,CAAA;AAEV,eAAO,MAAM,cAAc;;;;;;EAGjB,CAAA;AAEV,eAAO,MAAM,QAAQ,GAAI,qBAGtB;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;CACxC,gCAmCA,CAAA"}

package/dist/lib/layouts/section/sort-menu.js

@@ -0,0 +1,72 @@
+import { Dropdown, Label, Separator } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/layouts/section/sort-menu.tsx
+var DEFAULT_SORT = {
+	by: "name",
+	direction: "ascending"
+};
+var sortFields = [
+	{
+		key: "name",
+		label: "Name"
+	},
+	{
+		key: "created",
+		label: "Created date"
+	},
+	{
+		key: "updated",
+		label: "Updated date"
+	}
+];
+var sortDirections = [{
+	key: "ascending",
+	label: "Ascending"
+}, {
+	key: "descending",
+	label: "Descending"
+}];
+var SortMenu = ({ value, onChange }) => /* @__PURE__ */ jsxs(Dropdown.Menu, {
+	"aria-label": "Sort options",
+	selectionMode: "multiple",
+	selectedKeys: [value.by, value.direction],
+	children: [
+		/* @__PURE__ */ jsx(Label, {
+			className: "text-muted px-3 pt-2",
+			children: "Sort by"
+		}),
+		/* @__PURE__ */ jsx(Dropdown.Section, {
+			"aria-label": "Sort by",
+			children: sortFields.map((option) => /* @__PURE__ */ jsxs(Dropdown.Item, {
+				id: option.key,
+				textValue: option.label,
+				shouldCloseOnSelect: false,
+				onPress: () => onChange?.({
+					...value,
+					by: option.key
+				}),
+				children: [option.label, /* @__PURE__ */ jsx(Dropdown.ItemIndicator, {})]
+			}, option.key))
+		}),
+		/* @__PURE__ */ jsx(Separator, {}),
+		/* @__PURE__ */ jsx(Label, {
+			className: "text-muted px-3 pt-2",
+			children: "Direction"
+		}),
+		/* @__PURE__ */ jsx(Dropdown.Section, {
+			"aria-label": "Direction",
+			children: sortDirections.map((option) => /* @__PURE__ */ jsxs(Dropdown.Item, {
+				id: option.key,
+				textValue: option.label,
+				shouldCloseOnSelect: false,
+				onPress: () => onChange?.({
+					...value,
+					direction: option.key
+				}),
+				children: [option.label, /* @__PURE__ */ jsx(Dropdown.ItemIndicator, {})]
+			}, option.key))
+		})
+	]
+});
+//#endregion
+export { DEFAULT_SORT, SortMenu, sortDirections, sortFields };

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type SectionToolbarContent = {
+    desktop: ReactNode;
+    mobile?: ReactNode;
+};
+export declare const SectionToolbarContentProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const useSectionToolbarContent: (content: SectionToolbarContent) => void;
+export declare const useRegisteredSectionToolbarContent: () => SectionToolbarContent;
+//# sourceMappingURL=toolbar-content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/toolbar-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAEd,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAcD,eAAO,MAAM,6BAA6B,GAAI,cAE3C;IACD,QAAQ,EAAE,SAAS,CAAA;CACpB,gCAWA,CAAA;AAaD,eAAO,MAAM,wBAAwB,GAAI,SAAS,qBAAqB,SAOtE,CAAA;AAED,eAAO,MAAM,kCAAkC,6BACJ,CAAA"}

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

@@ -0,0 +1,31 @@
+import { createContext, useContext, useLayoutEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/layouts/section/toolbar-content.tsx
+var EMPTY_SECTION_TOOLBAR_CONTENT = { desktop: null };
+var SectionToolbarContentContext = createContext(null);
+var SectionToolbarContentProvider = ({ children }) => {
+	const [content, setContent] = useState(EMPTY_SECTION_TOOLBAR_CONTENT);
+	const value = useMemo(() => ({
+		content,
+		setContent
+	}), [content]);
+	return /* @__PURE__ */ jsx(SectionToolbarContentContext.Provider, {
+		value,
+		children
+	});
+};
+var useSectionToolbarContentContext = () => {
+	const context = useContext(SectionToolbarContentContext);
+	if (!context) throw new Error("Section toolbar content requires SectionToolbarContentProvider");
+	return context;
+};
+var useSectionToolbarContent = (content) => {
+	const { setContent } = useSectionToolbarContentContext();
+	useLayoutEffect(() => {
+		setContent(content);
+		return () => setContent(EMPTY_SECTION_TOOLBAR_CONTENT);
+	}, [content, setContent]);
+};
+var useRegisteredSectionToolbarContent = () => useSectionToolbarContentContext().content;
+//#endregion
+export { SectionToolbarContentProvider, useRegisteredSectionToolbarContent, useSectionToolbarContent };