@postxl/ui-components 1.5.4 → 1.6.0

package/dist/index.js

@@ -91,11 +91,13 @@ import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, MeasuringStrateg
 import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import * as ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as ResizablePrimitive from "react-resizable-panels";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import useLocalStorageState from "use-local-storage-state";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { useDirection } from "@radix-ui/react-direction";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
@@ -9075,6 +9077,21 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 //#endregion
 //#region src/sidebar/sidebar-context-provider.tsx
+/**
+* Stabilises a small object prop by structural equality so that inline objects
+* (e.g. `defaultOpenSidebars={{ left: true }}`) don't trigger unnecessary
+* re-renders. Uses JSON serialisation — suitable for small, plain objects only.
+*/
+function useStableValue(value) {
+	const ref = React$13.useRef(value);
+	const serialized = JSON.stringify(value);
+	const prevSerialized = React$13.useRef(serialized);
+	if (prevSerialized.current !== serialized) {
+		prevSerialized.current = serialized;
+		ref.current = value;
+	}
+	return ref.current;
+}
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
@@ -9089,34 +9106,34 @@ const SIDEBAR_MAX_WIDTH = 600;
 const SidebarContext = React$13.createContext(null);
 /**
 * Context that identifies which sidebar a component belongs to.
-* Set by `<Sidebar sidebarId="...">`, consumed by `useSidebar()`.
+* Set by `<Sidebar side="...">`, consumed by `useSidebar()`.
 */
-const SidebarIdContext = React$13.createContext("default");
+const SidebarSideContext = React$13.createContext(null);
 /**
 * Returns the state and controls for a specific sidebar.
 *
-* @param sidebarId - Optional explicit sidebar ID. Falls back to the nearest
-*   `SidebarIdContext` (set by the parent `<Sidebar>`), then to `"default"`.
+* @param side - Optional explicit sidebar side. Falls back to the nearest
+*   `SidebarSideContext` (set by the parent `<Sidebar>`), then to `"left"`.
 */
-function useSidebar(sidebarId) {
+function useSidebar(side) {
 	const store = React$13.useContext(SidebarContext);
-	const ctxId = React$13.useContext(SidebarIdContext);
-	const id = sidebarId ?? ctxId;
+	const ctxSide = React$13.useContext(SidebarSideContext);
+	const resolvedSide = side ?? ctxSide ?? "left";
 	if (!store) throw new Error("useSidebar must be used within a SidebarProvider.");
-	const open = store.openStates[id] ?? store.defaultOpen;
-	const openMobile = store.mobileStates[id] ?? false;
-	const width = store.widthStates[id];
+	const open = store.openStates[resolvedSide] ?? store.defaultOpen;
+	const openMobile = store.mobileStates[resolvedSide] ?? false;
+	const width = store.widthStates[resolvedSide];
 	const { isMobile, isResizing } = store;
-	const registry = store.sidebarRegistry[id];
+	const registry = store.sidebarRegistry[resolvedSide];
 	const minWidth = registry?.minWidth ?? store.providerMinWidth;
 	const maxWidth = registry?.maxWidth ?? store.providerMaxWidth;
-	const setOpen = React$13.useCallback((value) => store.setOpen(id, value), [store.setOpen, id]);
-	const setOpenMobile = React$13.useCallback((value) => store.setOpenMobile(id, value), [store.setOpenMobile, id]);
-	const setWidth = React$13.useCallback((value) => store.setWidth(id, value), [store.setWidth, id]);
+	const setOpen = React$13.useCallback((value) => store.setOpen(resolvedSide, value), [store.setOpen, resolvedSide]);
+	const setOpenMobile = React$13.useCallback((value) => store.setOpenMobile(resolvedSide, value), [store.setOpenMobile, resolvedSide]);
+	const setWidth = React$13.useCallback((value) => store.setWidth(resolvedSide, value), [store.setWidth, resolvedSide]);
 	const toggleSidebar = React$13.useCallback(() => {
-		if (store.isMobile) store.setOpenMobile(id, !(store.mobileStates[id] ?? false));
-		else store.setOpen(id, !(store.openStates[id] ?? store.defaultOpen));
-	}, [store, id]);
+		if (store.isMobile) store.setOpenMobile(resolvedSide, !(store.mobileStates[resolvedSide] ?? false));
+		else store.setOpen(resolvedSide, !(store.openStates[resolvedSide] ?? store.defaultOpen));
+	}, [store, resolvedSide]);
 	const state = open ? "expanded" : "collapsed";
 	return React$13.useMemo(() => ({
 		state,
@@ -9147,118 +9164,119 @@ function useSidebar(sidebarId) {
 	]);
 }
 /**
-* Returns a list of all registered sidebars with their IDs and sides.
+* Returns a list of all registered sidebars with their sides.
 */
 function useRegisteredSidebars() {
 	const store = React$13.useContext(SidebarContext);
 	if (!store) throw new Error("useRegisteredSidebars must be used within a SidebarProvider.");
-	return React$13.useMemo(() => Object.entries(store.sidebarRegistry).map(([sidebarId, entry]) => ({
-		sidebarId,
-		side: entry.side
-	})), [store.sidebarRegistry]);
+	return React$13.useMemo(() => Object.keys(store.sidebarRegistry).map((side) => ({ side })), [store.sidebarRegistry]);
 }
-function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, width: widthProp, onWidthChange, minWidth = SIDEBAR_MIN_WIDTH, maxWidth = SIDEBAR_MAX_WIDTH, storageKey, defaultOpenSidebars, defaultWidths, keyboardShortcuts, className, style, children,...props }) {
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, controlledSide = "left", width: widthProp, onWidthChange, minWidth = SIDEBAR_MIN_WIDTH, maxWidth = SIDEBAR_MAX_WIDTH, storageKey, defaultOpenSidebars, defaultWidths, keyboardShortcuts, className, style, children,...props }) {
 	const isMobile = useIsMobile();
 	const [isResizing, setIsResizing] = React$13.useState(false);
-	const storedRef = React$13.useRef(null);
-	if (storedRef.current === null && storageKey) try {
-		storedRef.current = JSON.parse(localStorage.getItem(storageKey) ?? "{}");
-	} catch {
-		storedRef.current = {};
-	}
-	const [openStates, setOpenStates] = React$13.useState(() => {
-		const states = { default: defaultOpen };
-		if (defaultOpenSidebars) Object.assign(states, defaultOpenSidebars);
-		if (storedRef.current) {
-			for (const [id, data] of Object.entries(storedRef.current)) if (data && typeof data === "object" && "open" in data) states[id] = data.open;
-		}
-		return states;
+	const fallbackKey = React$13.useId();
+	const stableDefaultOpenSidebars = useStableValue(defaultOpenSidebars);
+	const stableDefaultWidths = useStableValue(defaultWidths);
+	const [storedStates, setStoredStates] = useLocalStorageState(storageKey ?? fallbackKey, {
+		defaultValue: () => {
+			const states = {};
+			if (stableDefaultOpenSidebars) for (const [side, open] of Object.entries(stableDefaultOpenSidebars)) states[side] = {
+				...states[side] ?? { open: defaultOpen },
+				open
+			};
+			if (stableDefaultWidths) for (const [side, width] of Object.entries(stableDefaultWidths)) states[side] = {
+				...states[side] ?? { open: defaultOpen },
+				width
+			};
+			return states;
+		},
+		storageSync: !!storageKey
 	});
+	const openStates = React$13.useMemo(() => {
+		const states = {};
+		if (stableDefaultOpenSidebars) Object.assign(states, stableDefaultOpenSidebars);
+		for (const [side, data] of Object.entries(storedStates)) if (data && typeof data === "object" && "open" in data) states[side] = data.open;
+		return states;
+	}, [storedStates, stableDefaultOpenSidebars]);
 	const [mobileStates, setMobileStates] = React$13.useState({});
-	React$13.useEffect(() => {
-		if (openProp !== void 0) setOpenStates((prev) => prev["default"] === openProp ? prev : {
-			...prev,
-			default: openProp
-		});
-	}, [openProp]);
 	const effectiveOpenStates = React$13.useMemo(() => {
 		if (openProp !== void 0) return {
 			...openStates,
-			default: openProp
+			[controlledSide]: openProp
 		};
 		return openStates;
-	}, [openStates, openProp]);
-	const [widthStates, setWidthStates] = React$13.useState(() => {
+	}, [
+		openStates,
+		openProp,
+		controlledSide
+	]);
+	const widthStates = React$13.useMemo(() => {
 		const states = {};
-		if (widthProp !== void 0) states["default"] = widthProp;
-		if (defaultWidths) Object.assign(states, defaultWidths);
-		if (storedRef.current) {
-			for (const [id, data] of Object.entries(storedRef.current)) if (data && typeof data === "object" && typeof data.width === "number") states[id] = data.width;
-		}
+		if (stableDefaultWidths) Object.assign(states, stableDefaultWidths);
+		for (const [side, data] of Object.entries(storedStates)) if (data && typeof data === "object" && typeof data.width === "number") states[side] = data.width;
 		return states;
-	});
-	React$13.useEffect(() => {
-		if (widthProp !== void 0) setWidthStates((prev) => prev["default"] === widthProp ? prev : {
-			...prev,
-			default: widthProp
-		});
-	}, [widthProp]);
+	}, [storedStates, stableDefaultWidths]);
 	const effectiveWidthStates = React$13.useMemo(() => {
 		if (widthProp !== void 0) return {
 			...widthStates,
-			default: widthProp
+			[controlledSide]: widthProp
 		};
 		return widthStates;
-	}, [widthStates, widthProp]);
-	React$13.useEffect(() => {
-		if (!storageKey) return;
-		const toStore = {};
-		const allIds = new Set([...Object.keys(openStates), ...Object.keys(widthStates)]);
-		for (const id of allIds) toStore[id] = {
-			open: openStates[id] ?? defaultOpen,
-			...widthStates[id] === void 0 ? {} : { width: widthStates[id] }
-		};
-		localStorage.setItem(storageKey, JSON.stringify(toStore));
 	}, [
-		storageKey,
-		openStates,
 		widthStates,
-		defaultOpen
+		widthProp,
+		controlledSide
 	]);
-	const setOpen = React$13.useCallback((id, open) => {
-		if (id === "default" && setOpenProp) setOpenProp(open);
-		setOpenStates((prev) => ({
+	const setOpen = React$13.useCallback((side, open) => {
+		if (side === controlledSide && setOpenProp) setOpenProp(open);
+		setStoredStates((prev) => ({
 			...prev,
-			[id]: open
+			[side]: {
+				...prev[side] ?? { open: defaultOpen },
+				open
+			}
 		}));
-	}, [setOpenProp]);
-	const setOpenMobile = React$13.useCallback((id, open) => {
+	}, [
+		controlledSide,
+		setOpenProp,
+		setStoredStates,
+		defaultOpen
+	]);
+	const setOpenMobile = React$13.useCallback((side, open) => {
 		setMobileStates((prev) => ({
 			...prev,
-			[id]: open
+			[side]: open
 		}));
 	}, []);
-	const setWidth = React$13.useCallback((id, width) => {
-		if (id === "default" && onWidthChange) onWidthChange(width);
-		setWidthStates((prev) => ({
+	const setWidth = React$13.useCallback((side, width) => {
+		if (side === controlledSide && onWidthChange) onWidthChange(width);
+		setStoredStates((prev) => ({
 			...prev,
-			[id]: width
+			[side]: {
+				...prev[side] ?? { open: defaultOpen },
+				width
+			}
 		}));
-	}, [onWidthChange]);
+	}, [
+		controlledSide,
+		onWidthChange,
+		setStoredStates,
+		defaultOpen
+	]);
 	const [sidebarRegistry, setSidebarRegistry] = React$13.useState({});
-	const registerSidebar = React$13.useCallback((id, config) => {
+	const registerSidebar = React$13.useCallback((side, config) => {
 		setSidebarRegistry((prev) => {
-			const existing = prev[id];
-			if (existing && existing.side === config.side && existing.minWidth === config.minWidth && existing.maxWidth === config.maxWidth) return prev;
+			const existing = prev[side];
+			if (existing && existing.minWidth === config.minWidth && existing.maxWidth === config.maxWidth) return prev;
 			return {
 				...prev,
-				[id]: config
+				[side]: config
 			};
 		});
 	}, []);
-	const unregisterSidebar = React$13.useCallback((id) => {
+	const unregisterSidebar = React$13.useCallback((side) => {
 		setSidebarRegistry((prev) => {
-			const { [id]: _,...rest } = prev;
+			const { [side]: _,...rest } = prev;
 			return rest;
 		});
 	}, []);
@@ -9266,22 +9284,22 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 	effectiveOpenStatesRef.current = effectiveOpenStates;
 	const resolvedShortcuts = React$13.useMemo(() => {
 		if (keyboardShortcuts === false) return {};
-		return keyboardShortcuts ?? { [SIDEBAR_KEYBOARD_SHORTCUT]: "default" };
+		return keyboardShortcuts ?? { [SIDEBAR_KEYBOARD_SHORTCUT]: "left" };
 	}, [keyboardShortcuts]);
 	React$13.useEffect(() => {
 		const entries = Object.entries(resolvedShortcuts);
 		if (entries.length === 0) return;
 		const handleKeyDown = (event) => {
 			if (!(event.metaKey || event.ctrlKey)) return;
-			for (const [key, sidebarId] of entries) if (event.key === key) {
+			for (const [key, side] of entries) if (event.key === key) {
 				event.preventDefault();
 				if (isMobile) setMobileStates((prev) => ({
 					...prev,
-					[sidebarId]: !(prev[sidebarId] ?? false)
+					[side]: !(prev[side] ?? false)
 				}));
 				else {
-					const currentOpen = effectiveOpenStatesRef.current[sidebarId] ?? defaultOpen;
-					setOpen(sidebarId, !currentOpen);
+					const currentOpen = effectiveOpenStatesRef.current[side] ?? defaultOpen;
+					setOpen(side, !currentOpen);
 				}
 				return;
 			}
@@ -9326,7 +9344,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		minWidth,
 		maxWidth
 	]);
-	const defaultWidth = effectiveWidthStates["default"];
+	const defaultWidth = effectiveWidthStates[controlledSide];
 	const sidebarWidthValue = defaultWidth ? `${defaultWidth}px` : SIDEBAR_WIDTH;
 	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
 		value: storeValue,
@@ -9349,22 +9367,20 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 
 //#endregion
 //#region src/sidebar/sidebar.tsx
-function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", sidebarId = "default", minWidth, maxWidth, className, children,...props }) {
-	const { isMobile, state, openMobile, setOpenMobile, width, isResizing } = useSidebar(sidebarId);
+function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", minWidth, maxWidth, className, children,...props }) {
+	const { isMobile, state, openMobile, setOpenMobile, width, isResizing } = useSidebar(side);
 	const store = React$12.useContext(SidebarContext);
 	const storeRef = React$12.useRef(store);
 	storeRef.current = store;
 	const effectiveMinWidth = minWidth ?? store?.providerMinWidth ?? SIDEBAR_MIN_WIDTH;
 	const effectiveMaxWidth = maxWidth ?? store?.providerMaxWidth ?? SIDEBAR_MAX_WIDTH;
 	React$12.useEffect(() => {
-		storeRef.current?.registerSidebar(sidebarId, {
-			side,
+		storeRef.current?.registerSidebar(side, {
 			minWidth: effectiveMinWidth,
 			maxWidth: effectiveMaxWidth
 		});
-		return () => storeRef.current?.unregisterSidebar(sidebarId);
+		return () => storeRef.current?.unregisterSidebar(side);
 	}, [
-		sidebarId,
 		side,
 		effectiveMinWidth,
 		effectiveMaxWidth
@@ -9374,8 +9390,8 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 		"--sidebar-width": sidebarWidthValue,
 		"--sidebar-width-icon": SIDEBAR_WIDTH_ICON
 	};
-	const wrappedChildren = /* @__PURE__ */ jsx(SidebarIdContext.Provider, {
-		value: sidebarId,
+	const wrappedChildren = /* @__PURE__ */ jsx(SidebarSideContext.Provider, {
+		value: side,
 		children
 	});
 	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
@@ -9436,13 +9452,11 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 		})]
 	});
 }
-function SidebarTrigger({ className, onClick, sidebarId, children,...props }) {
-	const { toggleSidebar } = useSidebar(sidebarId);
-	const store = React$12.useContext(SidebarContext);
-	const ctxId = React$12.useContext(SidebarIdContext);
-	const resolvedId = sidebarId ?? ctxId;
-	const side = store?.sidebarRegistry[resolvedId]?.side;
-	const Icon = side === "right" ? PanelRightIcon : PanelLeftIcon;
+function SidebarTrigger({ className, onClick, side, children,...props }) {
+	const ctxSide = React$12.useContext(SidebarSideContext);
+	const resolvedSide = side ?? ctxSide ?? "left";
+	const { toggleSidebar } = useSidebar(resolvedSide);
+	const Icon = resolvedSide === "right" ? PanelRightIcon : PanelLeftIcon;
 	return /* @__PURE__ */ jsx(Button, {
 		"data-sidebar": "trigger",
 		"data-slot": "sidebar-trigger",
@@ -9465,8 +9479,8 @@ function SidebarRail({ className,...props }) {
 	const store = React$12.useContext(SidebarContext);
 	const startXRef = React$12.useRef(0);
 	const hasDraggedRef = React$12.useRef(false);
-	const sidebarId = React$12.useContext(SidebarIdContext);
-	const isResizable = !!store?.sidebarRegistry[sidebarId];
+	const side = React$12.useContext(SidebarSideContext);
+	const isResizable = !!(side && store?.sidebarRegistry[side]);
 	const handleMouseDown = React$12.useCallback((e) => {
 		if (!isResizable) return;
 		e.preventDefault();
@@ -9475,11 +9489,11 @@ function SidebarRail({ className,...props }) {
 		store?.setIsResizing(true);
 		const sidebarEl = e.target.closest("[data-slot=\"sidebar-container\"]");
 		const sidebarLeft = sidebarEl?.getBoundingClientRect().left ?? 0;
-		const side = e.target.closest("[data-side]")?.getAttribute("data-side");
+		const side$1 = e.target.closest("[data-side]")?.getAttribute("data-side");
 		const handleMouseMove = (moveEvent) => {
 			if (Math.abs(moveEvent.clientX - startXRef.current) > 3) hasDraggedRef.current = true;
 			let newWidth;
-			if (side === "right") {
+			if (side$1 === "right") {
 				const sidebarRight = sidebarEl?.getBoundingClientRect().right ?? globalThis.innerWidth;
 				newWidth = sidebarRight - moveEvent.clientX;
 			} else newWidth = moveEvent.clientX - sidebarLeft;
@@ -9741,24 +9755,34 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
 //#endregion
 //#region src/sidebar/sidebar-tab-context-provider.tsx
 const SidebarTabsContext = React$11.createContext(null);
-function SidebarTabsProvider({ children }) {
+function SidebarTabsProvider({ children, storageKey }) {
 	const [tabsMap, setTabsMap] = React$11.useState({});
-	const [activeTab, setActiveTabState] = React$11.useState({});
-	const register = React$11.useCallback((side, tab) => {
-		setTabsMap((prev) => {
+	const [portalTargets, setPortalTargets] = React$11.useState({});
+	const fallbackKey = React$11.useId();
+	const [storedActiveTabs, setStoredActiveTabs] = useLocalStorageState(storageKey ?? fallbackKey, {
+		defaultValue: {},
+		storageSync: !!storageKey
+	});
+	const [activeTab, setActiveTabState] = React$11.useState(storedActiveTabs);
+	const setPortalTarget = React$11.useCallback((side, tabId, element) => {
+		setPortalTargets((prev) => {
 			const next = new Map(prev[side]);
-			next.set(tab.id, tab);
+			if (element) next.set(tabId, element);
+			else next.delete(tabId);
 			return {
 				...prev,
 				[side]: next
 			};
 		});
-		setActiveTabState((prev) => {
-			if (prev[side] === void 0 || prev[side] === null) return {
+	}, []);
+	const register = React$11.useCallback((side, tab) => {
+		setTabsMap((prev) => {
+			const next = new Map(prev[side]);
+			next.set(tab.id, tab);
+			return {
 				...prev,
-				[side]: tab.id
+				[side]: next
 			};
-			return prev;
 		});
 	}, []);
 	const unregister = React$11.useCallback((side, tabId) => {
@@ -9770,13 +9794,6 @@ function SidebarTabsProvider({ children }) {
 				[side]: next
 			};
 		});
-		setActiveTabState((prev) => {
-			if (prev[side] === tabId) return {
-				...prev,
-				[side]: null
-			};
-			return prev;
-		});
 	}, []);
 	const setActiveTab = React$11.useCallback((side, tabId) => {
 		setActiveTabState((prev) => {
@@ -9793,18 +9810,35 @@ function SidebarTabsProvider({ children }) {
 		for (const [side, map] of Object.entries(tabsMap)) result[side] = sort(map);
 		return result;
 	}, [tabsMap]);
+	const resolvedActiveTab = React$11.useMemo(() => {
+		const result = {};
+		for (const [side, tabs] of Object.entries(sortedTabs)) {
+			const desired = activeTab[side];
+			if (desired && tabs.some((t) => t.id === desired)) result[side] = desired;
+			else if (tabs.length > 0) result[side] = tabs[0].id;
+			else result[side] = null;
+		}
+		return result;
+	}, [sortedTabs, activeTab]);
+	React$11.useEffect(() => {
+		setStoredActiveTabs(resolvedActiveTab);
+	}, [resolvedActiveTab, setStoredActiveTabs]);
 	const value = React$11.useMemo(() => ({
 		tabs: sortedTabs,
-		activeTab,
+		activeTab: resolvedActiveTab,
 		register,
 		unregister,
-		setActiveTab
+		setActiveTab,
+		portalTargets,
+		setPortalTarget
 	}), [
 		sortedTabs,
-		activeTab,
+		resolvedActiveTab,
 		register,
 		unregister,
-		setActiveTab
+		setActiveTab,
+		portalTargets,
+		setPortalTarget
 	]);
 	return /* @__PURE__ */ jsx(SidebarTabsContext.Provider, {
 		value,
@@ -9833,21 +9867,17 @@ function useSidebarTabs(side) {
 
 //#endregion
 //#region src/sidebar/sidebar-tab.tsx
-function SidebarTab({ side, id, icon, label, render, order, badge }) {
+function SidebarTab({ side, id, icon, label, order, badge, children }) {
 	const ctx = React$10.useContext(SidebarTabsContext);
 	if (!ctx) throw new Error("SidebarTab must be used within a SidebarTabsProvider.");
 	const { register, unregister } = ctx;
-	const renderRef = React$10.useRef(render);
-	renderRef.current = render;
 	const iconRef = React$10.useRef(icon);
 	iconRef.current = icon;
-	const stableRender = React$10.useCallback(() => renderRef.current(), []);
 	React$10.useEffect(() => {
 		register(side, {
 			id,
 			icon: iconRef.current,
 			label,
-			render: stableRender,
 			order,
 			badge
 		});
@@ -9859,55 +9889,72 @@ function SidebarTab({ side, id, icon, label, render, order, badge }) {
 		order,
 		badge,
 		register,
-		unregister,
-		stableRender
+		unregister
 	]);
-	return null;
+	const target = ctx.portalTargets[side]?.get(id);
+	if (!target) return null;
+	return createPortal(children, target);
 }
 function DynamicTabbedSidebar({ side, orientation = "horizontal", collapsible = "offcanvas", className,...sidebarProps }) {
 	const ctx = React$10.useContext(SidebarTabsContext);
 	if (!ctx) throw new Error("DynamicTabbedSidebar must be used within a SidebarTabsProvider.");
-	const { setActiveTab } = ctx;
 	const tabs = ctx.tabs[side] ?? [];
 	const activeTabId = ctx.activeTab[side] ?? null;
-	const activeTab = tabs.find((t) => t.id === activeTabId);
-	React$10.useEffect(() => {
-		if (tabs.length > 0 && tabs[0] && !activeTab) setActiveTab(side, tabs[0].id);
-	}, [
-		tabs,
-		activeTab,
-		side,
-		setActiveTab
-	]);
 	const isVertical = orientation === "vertical";
 	const effectiveCollapsible = isVertical && collapsible === "offcanvas" ? "icon" : collapsible;
-	return /* @__PURE__ */ jsxs(Sidebar, {
+	if (tabs.length === 0) return null;
+	return /* @__PURE__ */ jsx(Sidebar, {
 		side,
-		sidebarId: side,
 		collapsible: effectiveCollapsible,
 		className,
 		...sidebarProps,
-		children: [/* @__PURE__ */ jsx(TabbedSidebarContent, {
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TabbedSidebarContent, {
 			side,
 			tabs,
 			activeTabId,
-			activeTab,
 			isVertical,
 			collapsible: effectiveCollapsible
-		}), /* @__PURE__ */ jsx(SidebarRail, {})]
+		}), /* @__PURE__ */ jsx(SidebarRail, {})] })
 	});
 }
-function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical, collapsible }) {
+function TabPortalTargets({ side, tabs, activeTabId, hidden }) {
+	const ctx = React$10.useContext(SidebarTabsContext);
+	const callbackRefs = React$10.useRef(new Map());
+	const getRef = (tabId) => {
+		let ref = callbackRefs.current.get(tabId);
+		if (!ref) {
+			ref = (el) => {
+				ctx.setPortalTarget(side, tabId, el);
+			};
+			callbackRefs.current.set(tabId, ref);
+		}
+		return ref;
+	};
+	return /* @__PURE__ */ jsx(Fragment, { children: tabs.map((tab) => {
+		const isVisible = !hidden && tab.id === activeTabId;
+		return /* @__PURE__ */ jsx("div", {
+			ref: getRef(tab.id),
+			hidden: !isVisible || void 0,
+			className: isVisible ? "flex flex-col flex-1 min-h-0" : void 0
+		}, tab.id);
+	}) });
+}
+function TabbedSidebarContent({ side, tabs, activeTabId, isVertical, collapsible }) {
 	const { state } = useSidebar(side);
 	const isCollapsed = state === "collapsed";
 	const isIconCollapsible = collapsible === "icon";
-	if (isCollapsed && isIconCollapsible) return /* @__PURE__ */ jsx("div", {
+	if (isCollapsed && isIconCollapsible) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col",
-		children: /* @__PURE__ */ jsx(VerticalTabBar, {
+		children: [/* @__PURE__ */ jsx(VerticalTabBar, {
 			side,
 			tabs,
 			activeTabId
-		})
+		}), /* @__PURE__ */ jsx(TabPortalTargets, {
+			side,
+			tabs,
+			activeTabId,
+			hidden: true
+		})]
 	});
 	if (isVertical) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-row",
@@ -9915,10 +9962,11 @@ function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical,
 			side,
 			tabs,
 			activeTabId
-		}), /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 flex-1 flex-col",
-			children: /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
-		})]
+		}), /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(TabPortalTargets, {
+			side,
+			tabs,
+			activeTabId
+		}) })]
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col",
@@ -9929,10 +9977,11 @@ function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical,
 				activeTabId
 			}),
 			tabs.length > 0 && /* @__PURE__ */ jsx(SidebarSeparator, {}),
-			/* @__PURE__ */ jsx("div", {
-				className: "flex min-w-0 flex-1 flex-col",
-				children: /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
-			})
+			/* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(TabPortalTargets, {
+				side,
+				tabs,
+				activeTabId
+			}) })
 		]
 	});
 }
@@ -11395,5 +11444,5 @@ const TreeView = React$1.forwardRef(({ data, onNodeSelect, onGroupSelect, onTogg
 TreeView.displayName = "TreeView";
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTabbedSidebar, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarIdContext, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTab, SidebarTabsContext, SidebarTabsProvider, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperSeparator, StepperTitle, StepperTrigger, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeView, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useRegisteredSidebars, useSidebar, useSidebarTabs, useStore as useStepper };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTabbedSidebar, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSideContext, SidebarTab, SidebarTabsContext, SidebarTabsProvider, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperSeparator, StepperTitle, StepperTrigger, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeView, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useRegisteredSidebars, useSidebar, useSidebarTabs, useStore as useStepper };
 //# sourceMappingURL=index.js.map