beez-ui 0.9.1 → 0.11.0

package/dist/components/sidebar.js

@@ -1,40 +1,121 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/**
+* Animated application sidebar adapted from beui.dev/components/motion/animated-sidebar: the rail
+* morphs its width with a spring, labels fade out of the icon rail, a shared pill follows the
+* hovered and active items, submenus unfold with a stagger, and small screens get a focus-trapped
+* sheet. Links route through the `BeezUIProvider` adapter and the open state keeps the
+* `sidebar_state` cookie contract read by server entrypoints.
+*/
 import * as React from "react";
-import { cva } from "class-variance-authority";
+import { ChevronRight, PanelLeftIcon } from "lucide-react";
 import { Slot } from "radix-ui";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
-import { useSidebarPersistence, saveSidebarPreference } from "../hooks/use-sidebar-persistence.js";
-import { GlideSlot } from "../motion/glide-slot.js";
-import { MotionSlot } from "../motion/motion-slot.js";
-import { MOTION_EASE_DRAWER } from "../motion/tokens.js";
-import { cn } from "../lib/utils.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { saveSidebarCookie, saveSidebarPreference, useSidebarPersistence } from "../hooks/use-sidebar-persistence.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME } from "../constants/sidebar.js";
-import { Button } from "./button.js";
-import { Input } from "./input.js";
-import { Separator } from "./separator.js";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
-import { Skeleton } from "./skeleton.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
-import { PanelLeftIcon } from "lucide-react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { SharedLayoutBg } from "../motion/shared-layout-bg.js";
+import { MOTION_EASE, MOTION_EASE_DRAWER, MOTION_LIST_ITEM_DISTANCE, MOTION_TIMING, SPRING_LAYOUT } from "../motion/tokens.js";
+import { Link } from "./link.js";
+import { SidebarPanelContext } from "./sidebar-panel-context.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_ICON = "4.25rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-/** Drawer curve shared by the collapse transitions: quick start, long gentle settle. */
-const SIDEBAR_EASE = `cubic-bezier(${MOTION_EASE_DRAWER.join(", ")})`;
-const SIDEBAR_MENU_SKELETON_TEXT_WIDTH = "70%";
-function subscribeToClientMount() {
-	return () => {};
-}
-function getClientMountSnapshot() {
-	return true;
-}
-function getServerMountSnapshot() {
-	return false;
-}
+const EXTERNAL_LINK_TARGET = "_blank";
+const EXTERNAL_LINK_REL = "noreferrer noopener";
+/** Distance, in pixels, labels and chevrons drift while fading out of the icon rail. */
+const SIDEBAR_LABEL_DRIFT_PX = 4;
+/** Chevron rotation, in degrees, of an expanded group. */
+const SIDEBAR_CHEVRON_EXPANDED_DEGREES = 90;
+/** Blur, in pixels, submenu items shed as they unfold. */
+const SIDEBAR_SUBMENU_ITEM_BLUR_PX = 3;
+const PANEL_TRANSITION = {
+	duration: .36,
+	ease: MOTION_EASE_DRAWER
+};
+/**
+* The desktop rail settles at a hard zero-width boundary. Keep the spring critically damped so it
+* cannot overshoot, pause against that boundary, and then snap back during the final frame.
+*/
+const SIDEBAR_MORPH_TRANSITION = {
+	type: "spring",
+	stiffness: 380,
+	damping: 35,
+	mass: .75
+};
+const LABEL_ENTER_TRANSITION = {
+	duration: MOTION_TIMING.message,
+	delay: .08,
+	ease: MOTION_EASE
+};
+const LABEL_EXIT_TRANSITION = {
+	duration: MOTION_TIMING.exit,
+	ease: MOTION_EASE
+};
+const REDUCED_TRANSITION = {
+	duration: .16,
+	ease: MOTION_EASE
+};
+const INSTANT_TRANSITION = { duration: 0 };
+const SUBMENU_VARIANTS = {
+	closed: {
+		opacity: 0,
+		clipPath: "inset(0 0 100% 0 round 8px)",
+		transition: {
+			duration: MOTION_TIMING.fast,
+			ease: MOTION_EASE,
+			staggerChildren: .025,
+			staggerDirection: -1
+		}
+	},
+	open: {
+		opacity: 1,
+		clipPath: "inset(0 0 0% 0 round 8px)",
+		transition: {
+			duration: MOTION_TIMING.message,
+			delayChildren: MOTION_TIMING.listStagger,
+			ease: MOTION_EASE,
+			staggerChildren: .045
+		}
+	}
+};
+const SUBMENU_ITEM_VARIANTS = {
+	closed: {
+		opacity: 0,
+		y: -MOTION_LIST_ITEM_DISTANCE,
+		filter: `blur(${SIDEBAR_SUBMENU_ITEM_BLUR_PX}px)`
+	},
+	open: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)",
+		transition: {
+			duration: MOTION_TIMING.enter,
+			ease: MOTION_EASE
+		}
+	}
+};
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex='-1'])"
+].join(",");
 const SidebarContext = React.createContext(null);
+/**
+* Reads the sidebar state shared by `SidebarProvider`.
+* @returns Open state for desktop and mobile, viewport and motion flags, and state setters.
+*/
 function useSidebar() {
 	const context = React.use(SidebarContext);
 	if (!context) {
@@ -42,502 +123,929 @@ function useSidebar() {
 	}
 	return context;
 }
+/**
+* Reads the state of the enclosing `Sidebar` panel, so product content can adapt to the icon rail
+* without depending on its DOM attributes.
+* @returns Whether the panel is collapsed to its icon rail (always false in the mobile sheet), its
+* collapse mode and its side.
+*/
+function useSidebarPanel() {
+	const context = React.use(SidebarPanelContext);
+	if (!context) {
+		throw new Error("useSidebarPanel must be used within a Sidebar.");
+	}
+	return context;
+}
+/**
+* Owns the open state of the sidebar, the ⌘B / Ctrl+B shortcut and the layout wrapper.
+* @param props - Controlled or default state for both viewports, persistence options and wrapper attributes.
+* @returns The wrapper that lays out the sidebar next to its inset.
+*/
 function SidebarProvider(t0) {
-	const $ = _c(38);
+	const $ = _c(57);
 	let children;
 	let className;
+	let onOpenChange;
+	let onOpenMobileChange;
+	let openMobileProp;
 	let openProp;
 	let props;
-	let setOpenProp;
 	let storageKey;
 	let style;
 	let t1;
+	let t2;
+	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({defaultOpen: t1, storageKey, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props} = t0);
+		({children, open: openProp, defaultOpen: t1, onOpenChange, openMobile: openMobileProp, defaultOpenMobile: t2, onOpenMobileChange, storageKey, cookieName: t3, cookieMaxAge: t4, className, style, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = openProp;
-		$[4] = props;
-		$[5] = setOpenProp;
-		$[6] = storageKey;
-		$[7] = style;
-		$[8] = t1;
+		$[3] = onOpenChange;
+		$[4] = onOpenMobileChange;
+		$[5] = openMobileProp;
+		$[6] = openProp;
+		$[7] = props;
+		$[8] = storageKey;
+		$[9] = style;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
 	} else {
 		children = $[1];
 		className = $[2];
-		openProp = $[3];
-		props = $[4];
-		setOpenProp = $[5];
-		storageKey = $[6];
-		style = $[7];
-		t1 = $[8];
+		onOpenChange = $[3];
+		onOpenMobileChange = $[4];
+		openMobileProp = $[5];
+		openProp = $[6];
+		props = $[7];
+		storageKey = $[8];
+		style = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		t4 = $[13];
 	}
 	const defaultOpen = t1 === undefined ? true : t1;
-	const isMobile = useIsMobile();
-	const [openMobile, setOpenMobile] = React.useState(false);
-	const [_open, _setOpen] = React.useState(null);
+	const defaultOpenMobile = t2 === undefined ? false : t2;
+	const cookieName = t3 === undefined ? SIDEBAR_COOKIE_NAME : t3;
+	const cookieMaxAge = t4 === undefined ? SIDEBAR_COOKIE_MAX_AGE : t4;
+	const [internalOpen, setInternalOpen] = React.useState(null);
+	const [internalOpenMobile, setInternalOpenMobile] = React.useState(defaultOpenMobile);
 	const persistedOpen = useSidebarPersistence(storageKey);
-	const open = openProp ?? _open ?? persistedOpen ?? defaultOpen;
-	let t2;
-	if ($[9] !== open || $[10] !== setOpenProp || $[11] !== storageKey) {
-		t2 = (value) => {
-			const openState = typeof value === "function" ? value(open) : value;
-			if (setOpenProp) {
-				setOpenProp(openState);
-			} else {
-				_setOpen(openState);
+	const isMobile = useIsMobile();
+	const reduce = usePrefersReducedMotion();
+	const generatedId = React.useId();
+	const triggerRef = React.useRef(null);
+	const open = openProp ?? internalOpen ?? persistedOpen ?? defaultOpen;
+	const openMobile = openMobileProp ?? internalOpenMobile;
+	const state = open ? "expanded" : "collapsed";
+	const mobileWidth = style?.["--sidebar-width-mobile"] ?? SIDEBAR_WIDTH_MOBILE;
+	let t5;
+	if ($[14] !== cookieMaxAge || $[15] !== cookieName || $[16] !== onOpenChange || $[17] !== openProp || $[18] !== storageKey) {
+		t5 = (nextOpen) => {
+			if (openProp === undefined) {
+				setInternalOpen(nextOpen);
 			}
-			saveSidebarPreference(storageKey, openState);
-			try {
-				document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}; SameSite=Lax`;
-			} catch {}
+			onOpenChange?.(nextOpen);
+			saveSidebarPreference(storageKey, nextOpen);
+			saveSidebarCookie(nextOpen, cookieName, cookieMaxAge);
 		};
-		$[9] = open;
-		$[10] = setOpenProp;
-		$[11] = storageKey;
-		$[12] = t2;
+		$[14] = cookieMaxAge;
+		$[15] = cookieName;
+		$[16] = onOpenChange;
+		$[17] = openProp;
+		$[18] = storageKey;
+		$[19] = t5;
 	} else {
-		t2 = $[12];
+		t5 = $[19];
 	}
-	const setOpen = t2;
-	let t3;
-	if ($[13] !== isMobile || $[14] !== setOpen) {
-		t3 = () => isMobile ? setOpenMobile(_temp) : setOpen(_temp2);
-		$[13] = isMobile;
-		$[14] = setOpen;
-		$[15] = t3;
+	const setOpen = t5;
+	let t6;
+	if ($[20] !== onOpenMobileChange || $[21] !== openMobileProp) {
+		t6 = (nextOpen_0) => {
+			if (openMobileProp === undefined) {
+				setInternalOpenMobile(nextOpen_0);
+			}
+			onOpenMobileChange?.(nextOpen_0);
+		};
+		$[20] = onOpenMobileChange;
+		$[21] = openMobileProp;
+		$[22] = t6;
 	} else {
-		t3 = $[15];
+		t6 = $[22];
 	}
-	const toggleSidebar = t3;
-	let t4;
-	let t5;
-	if ($[16] !== toggleSidebar) {
-		t4 = () => {
-			const handleKeyDown = (event) => {
-				if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+	const setOpenMobile = t6;
+	let t7;
+	if ($[23] !== isMobile || $[24] !== open || $[25] !== openMobile || $[26] !== setOpen || $[27] !== setOpenMobile) {
+		t7 = () => {
+			if (isMobile) {
+				setOpenMobile(!openMobile);
+			} else {
+				setOpen(!open);
+			}
+		};
+		$[23] = isMobile;
+		$[24] = open;
+		$[25] = openMobile;
+		$[26] = setOpen;
+		$[27] = setOpenMobile;
+		$[28] = t7;
+	} else {
+		t7 = $[28];
+	}
+	const toggleSidebar = t7;
+	let t8;
+	let t9;
+	if ($[29] !== toggleSidebar) {
+		t8 = () => {
+			const handleShortcut = (event) => {
+				if (event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
 					event.preventDefault();
 					toggleSidebar();
 				}
 			};
-			window.addEventListener("keydown", handleKeyDown);
-			return () => window.removeEventListener("keydown", handleKeyDown);
+			window.addEventListener("keydown", handleShortcut);
+			return () => window.removeEventListener("keydown", handleShortcut);
 		};
-		t5 = [toggleSidebar];
-		$[16] = toggleSidebar;
-		$[17] = t4;
-		$[18] = t5;
+		t9 = [toggleSidebar];
+		$[29] = toggleSidebar;
+		$[30] = t8;
+		$[31] = t9;
 	} else {
-		t4 = $[17];
-		t5 = $[18];
+		t8 = $[30];
+		t9 = $[31];
 	}
-	React.useEffect(t4, t5);
-	const state = open ? "expanded" : "collapsed";
-	let t6;
-	if ($[19] !== isMobile || $[20] !== open || $[21] !== openMobile || $[22] !== setOpen || $[23] !== state || $[24] !== toggleSidebar) {
-		t6 = {
-			state,
-			open,
-			setOpen,
+	React.useEffect(t8, t9);
+	const t10 = `${generatedId}-active`;
+	let t11;
+	if ($[32] !== isMobile || $[33] !== mobileWidth || $[34] !== open || $[35] !== openMobile || $[36] !== reduce || $[37] !== setOpen || $[38] !== setOpenMobile || $[39] !== state || $[40] !== t10 || $[41] !== toggleSidebar) {
+		t11 = {
 			isMobile,
+			layoutId: t10,
+			mobileWidth,
+			open,
 			openMobile,
+			reduce,
+			setOpen,
 			setOpenMobile,
-			toggleSidebar
+			state,
+			toggleSidebar,
+			triggerRef
 		};
-		$[19] = isMobile;
-		$[20] = open;
-		$[21] = openMobile;
-		$[22] = setOpen;
-		$[23] = state;
-		$[24] = toggleSidebar;
-		$[25] = t6;
-	} else {
-		t6 = $[25];
-	}
-	const contextValue = t6;
-	let t7;
-	if ($[26] !== style) {
-		t7 = {
+		$[32] = isMobile;
+		$[33] = mobileWidth;
+		$[34] = open;
+		$[35] = openMobile;
+		$[36] = reduce;
+		$[37] = setOpen;
+		$[38] = setOpenMobile;
+		$[39] = state;
+		$[40] = t10;
+		$[41] = toggleSidebar;
+		$[42] = t11;
+	} else {
+		t11 = $[42];
+	}
+	const contextValue = t11;
+	let t12;
+	if ($[43] !== mobileWidth || $[44] !== style) {
+		t12 = {
 			"--sidebar-width": SIDEBAR_WIDTH,
 			"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-			"--sidebar-ease": SIDEBAR_EASE,
+			"--sidebar-width-mobile": mobileWidth,
 			...style
 		};
-		$[26] = style;
-		$[27] = t7;
+		$[43] = mobileWidth;
+		$[44] = style;
+		$[45] = t12;
 	} else {
-		t7 = $[27];
+		t12 = $[45];
 	}
-	const t8 = t7;
-	let t9;
-	if ($[28] !== className) {
-		t9 = cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className);
-		$[28] = className;
-		$[29] = t9;
+	let t13;
+	if ($[46] !== className) {
+		t13 = cn("group/sidebar-wrapper flex min-h-svh w-full min-w-0 has-data-[variant=inset]:bg-sidebar", className);
+		$[46] = className;
+		$[47] = t13;
 	} else {
-		t9 = $[29];
+		t13 = $[47];
 	}
-	let t10;
-	if ($[30] !== children || $[31] !== props || $[32] !== t8 || $[33] !== t9) {
-		t10 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "sidebar-wrapper",
-			style: t8,
-			className: t9,
+	let t14;
+	if ($[48] !== children || $[49] !== props || $[50] !== state || $[51] !== t12 || $[52] !== t13) {
+		t14 = /* @__PURE__ */ _jsx("div", {
 			...props,
+			"data-slot": "sidebar-wrapper",
+			"data-state": state,
+			style: t12,
+			className: t13,
 			children
 		});
-		$[30] = children;
-		$[31] = props;
-		$[32] = t8;
-		$[33] = t9;
-		$[34] = t10;
+		$[48] = children;
+		$[49] = props;
+		$[50] = state;
+		$[51] = t12;
+		$[52] = t13;
+		$[53] = t14;
+	} else {
+		t14 = $[53];
+	}
+	let t15;
+	if ($[54] !== contextValue || $[55] !== t14) {
+		t15 = /* @__PURE__ */ _jsx(SidebarContext.Provider, {
+			value: contextValue,
+			children: t14
+		});
+		$[54] = contextValue;
+		$[55] = t14;
+		$[56] = t15;
+	} else {
+		t15 = $[56];
+	}
+	return t15;
+}
+/** Small-screen sheet: locks page scroll, traps focus and hands it back to the trigger on close. */
+function MobileSidebar(t0) {
+	const $ = _c(54);
+	const { ariaLabel, children, className, side } = t0;
+	const context = useSidebar();
+	const isHydrated = useIsHydrated();
+	const panelRef = React.useRef(null);
+	const [hidden, setHidden] = React.useState(!context.openMobile);
+	const openMobileRef = React.useRef(context.openMobile);
+	const { mobileWidth, openMobile, reduce, setOpenMobile, triggerRef } = context;
+	let t1;
+	let t2;
+	if ($[0] !== openMobile) {
+		t1 = () => {
+			openMobileRef.current = openMobile;
+			if (openMobile) {
+				setHidden(false);
+			}
+		};
+		t2 = [openMobile];
+		$[0] = openMobile;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[3] !== openMobile || $[4] !== triggerRef) {
+		t3 = () => {
+			if (!openMobile) {
+				return;
+			}
+			const body = document.body;
+			const scrollY = window.scrollY;
+			const previousBodyStyles = {
+				left: body.style.left,
+				overflow: body.style.overflow,
+				position: body.style.position,
+				right: body.style.right,
+				top: body.style.top
+			};
+			body.style.position = "fixed";
+			body.style.top = `-${scrollY}px`;
+			body.style.left = "0";
+			body.style.right = "0";
+			body.style.overflow = "hidden";
+			const restoreTriggerFocus = () => triggerRef.current?.focus({ preventScroll: true });
+			const focusFrame = requestAnimationFrame(() => {
+				const firstFocusable = panelRef.current?.querySelector(FOCUSABLE_SELECTOR);
+				(firstFocusable ?? panelRef.current)?.focus({ preventScroll: true });
+			});
+			return () => {
+				cancelAnimationFrame(focusFrame);
+				body.style.position = previousBodyStyles.position;
+				body.style.top = previousBodyStyles.top;
+				body.style.left = previousBodyStyles.left;
+				body.style.right = previousBodyStyles.right;
+				body.style.overflow = previousBodyStyles.overflow;
+				window.scrollTo(0, scrollY);
+				restoreTriggerFocus();
+			};
+		};
+		t4 = [openMobile, triggerRef];
+		$[3] = openMobile;
+		$[4] = triggerRef;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	React.useEffect(t3, t4);
+	if (!isHydrated) {
+		return null;
+	}
+	const closedOffset = side === "left" ? "-100%" : "100%";
+	const transition = reduce ? REDUCED_TRANSITION : PANEL_TRANSITION;
+	let t5;
+	if ($[7] !== setOpenMobile) {
+		t5 = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setOpenMobile(false);
+				return;
+			}
+			if (event.key !== "Tab") {
+				return;
+			}
+			const focusable = panelRef.current ? Array.from(panelRef.current.querySelectorAll(FOCUSABLE_SELECTOR)) : [];
+			if (focusable.length === 0) {
+				event.preventDefault();
+				panelRef.current?.focus();
+				return;
+			}
+			const firstFocusable_0 = focusable[0];
+			const lastFocusable = focusable[focusable.length - 1];
+			if (event.shiftKey && document.activeElement === firstFocusable_0) {
+				event.preventDefault();
+				lastFocusable.focus();
+			} else {
+				if (!event.shiftKey && document.activeElement === lastFocusable) {
+					event.preventDefault();
+					firstFocusable_0.focus();
+				}
+			}
+		};
+		$[7] = setOpenMobile;
+		$[8] = t5;
+	} else {
+		t5 = $[8];
+	}
+	const trapFocus = t5;
+	const t6 = hidden && !openMobile ? "invisible" : "visible";
+	let t7;
+	if ($[9] !== t6) {
+		t7 = cn("pointer-events-none fixed top-0 left-0 z-50 size-0 md:hidden", t6);
+		$[9] = t6;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	const t8 = openMobile ? 0 : -1;
+	const t9 = openMobile ? 1 : 0;
+	let t10;
+	if ($[11] !== t9) {
+		t10 = { opacity: t9 };
+		$[11] = t9;
+		$[12] = t10;
 	} else {
-		t10 = $[34];
+		t10 = $[12];
 	}
 	let t11;
-	if ($[35] !== contextValue || $[36] !== t10) {
-		t11 = /* @__PURE__ */ _jsx(SidebarContext.Provider, {
-			value: contextValue,
-			children: t10
+	if ($[13] !== setOpenMobile) {
+		t11 = () => setOpenMobile(false);
+		$[13] = setOpenMobile;
+		$[14] = t11;
+	} else {
+		t11 = $[14];
+	}
+	const t12 = openMobile ? "pointer-events-auto" : "pointer-events-none";
+	let t13;
+	if ($[15] !== t12) {
+		t13 = cn("fixed inset-0 bg-black/40", t12);
+		$[15] = t12;
+		$[16] = t13;
+	} else {
+		t13 = $[16];
+	}
+	let t14;
+	if ($[17] !== t10 || $[18] !== t11 || $[19] !== t13 || $[20] !== t8 || $[21] !== transition) {
+		t14 = /* @__PURE__ */ _jsx(motion.button, {
+			type: "button",
+			"aria-label": "Close sidebar",
+			"data-slot": "sidebar-overlay",
+			tabIndex: t8,
+			initial: false,
+			animate: t10,
+			transition,
+			onClick: t11,
+			className: t13
 		});
-		$[35] = contextValue;
-		$[36] = t10;
-		$[37] = t11;
+		$[17] = t10;
+		$[18] = t11;
+		$[19] = t13;
+		$[20] = t8;
+		$[21] = transition;
+		$[22] = t14;
+	} else {
+		t14 = $[22];
+	}
+	const t15 = !openMobile;
+	const t16 = !openMobile;
+	const t17 = openMobile ? "expanded" : "collapsed";
+	const t18 = reduce ? openMobile ? 1 : 0 : 1;
+	const t19 = reduce ? 0 : openMobile ? "0%" : closedOffset;
+	let t20;
+	if ($[23] !== t18 || $[24] !== t19) {
+		t20 = {
+			opacity: t18,
+			x: t19
+		};
+		$[23] = t18;
+		$[24] = t19;
+		$[25] = t20;
 	} else {
-		t11 = $[37];
+		t20 = $[25];
 	}
-	return t11;
-}
-function _temp2(open_1) {
-	return !open_1;
-}
-function _temp(open_0) {
-	return !open_0;
+	let t21;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = () => {
+			if (!openMobileRef.current) {
+				setHidden(true);
+			}
+		};
+		$[26] = t21;
+	} else {
+		t21 = $[26];
+	}
+	let t22;
+	if ($[27] !== mobileWidth) {
+		t22 = { "--sidebar-width-mobile": mobileWidth };
+		$[27] = mobileWidth;
+		$[28] = t22;
+	} else {
+		t22 = $[28];
+	}
+	const t23 = t22;
+	const t24 = side === "left" ? "left-0 border-r" : "right-0 border-l";
+	const t25 = !openMobile && "pointer-events-none";
+	let t26;
+	if ($[29] !== className || $[30] !== t24 || $[31] !== t25) {
+		t26 = cn("pointer-events-auto fixed inset-y-0 flex h-dvh w-(--sidebar-width-mobile) max-w-[88vw] flex-col overflow-hidden outline-none", "border-sidebar-border bg-sidebar text-sidebar-foreground shadow-2xl will-change-transform", t24, t25, className);
+		$[29] = className;
+		$[30] = t24;
+		$[31] = t25;
+		$[32] = t26;
+	} else {
+		t26 = $[32];
+	}
+	let t27;
+	if ($[33] !== side) {
+		t27 = {
+			collapsed: false,
+			collapsible: "none",
+			side
+		};
+		$[33] = side;
+		$[34] = t27;
+	} else {
+		t27 = $[34];
+	}
+	let t28;
+	if ($[35] !== children || $[36] !== t27) {
+		t28 = /* @__PURE__ */ _jsx(SidebarPanelContext.Provider, {
+			value: t27,
+			children
+		});
+		$[35] = children;
+		$[36] = t27;
+		$[37] = t28;
+	} else {
+		t28 = $[37];
+	}
+	let t29;
+	if ($[38] !== ariaLabel || $[39] !== side || $[40] !== t15 || $[41] !== t16 || $[42] !== t17 || $[43] !== t20 || $[44] !== t23 || $[45] !== t26 || $[46] !== t28 || $[47] !== transition || $[48] !== trapFocus) {
+		t29 = /* @__PURE__ */ _jsx(motion.div, {
+			ref: panelRef,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": ariaLabel,
+			"aria-hidden": t15,
+			inert: t16,
+			tabIndex: -1,
+			"data-slot": "sidebar",
+			"data-mobile": "true",
+			"data-state": t17,
+			"data-side": side,
+			initial: false,
+			animate: t20,
+			transition,
+			onAnimationComplete: t21,
+			onKeyDown: trapFocus,
+			style: t23,
+			className: t26,
+			children: t28
+		});
+		$[38] = ariaLabel;
+		$[39] = side;
+		$[40] = t15;
+		$[41] = t16;
+		$[42] = t17;
+		$[43] = t20;
+		$[44] = t23;
+		$[45] = t26;
+		$[46] = t28;
+		$[47] = transition;
+		$[48] = trapFocus;
+		$[49] = t29;
+	} else {
+		t29 = $[49];
+	}
+	let t30;
+	if ($[50] !== t14 || $[51] !== t29 || $[52] !== t7) {
+		t30 = createPortal(/* @__PURE__ */ _jsxs("div", {
+			className: t7,
+			children: [t14, t29]
+		}), document.body);
+		$[50] = t14;
+		$[51] = t29;
+		$[52] = t7;
+		$[53] = t30;
+	} else {
+		t30 = $[53];
+	}
+	return t30;
 }
+/**
+* Renders the sidebar: a width-morphing rail on desktop and a sheet on small screens.
+* @param props - Side, variant, collapse mode, accessible name and panel classes.
+* @returns The desktop rail, the mobile sheet portal, or an always-expanded panel.
+*/
 function Sidebar(t0) {
-	const $ = _c(48);
+	const $ = _c(55);
 	let children;
 	let className;
-	let dir;
+	let panelClassName;
 	let props;
+	let style;
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({side: t1, variant: t2, collapsible: t3, className, children, dir, ...props} = t0);
+		({side: t1, variant: t2, collapsible: t3, ariaLabel: t4, children, className, panelClassName, style, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = dir;
+		$[3] = panelClassName;
 		$[4] = props;
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
+		$[5] = style;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
 	} else {
 		children = $[1];
 		className = $[2];
-		dir = $[3];
+		panelClassName = $[3];
 		props = $[4];
-		t1 = $[5];
-		t2 = $[6];
-		t3 = $[7];
+		style = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+		t4 = $[9];
 	}
 	const side = t1 === undefined ? "left" : t1;
 	const variant = t2 === undefined ? "sidebar" : t2;
-	const collapsible = t3 === undefined ? "offcanvas" : t3;
-	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-	if (collapsible === "none") {
-		let t4;
-		if ($[8] !== className) {
-			t4 = cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className);
-			$[8] = className;
-			$[9] = t4;
-		} else {
-			t4 = $[9];
-		}
+	const collapsible = t3 === undefined ? "icon" : t3;
+	const ariaLabel = t4 === undefined ? "Sidebar" : t4;
+	const context = useSidebar();
+	const collapsed = collapsible !== "none" && !context.open;
+	const offcanvas = collapsed && collapsible === "offcanvas";
+	const width = offcanvas ? "0px" : collapsed ? "var(--sidebar-width-icon)" : "var(--sidebar-width)";
+	if (context.isMobile && collapsible !== "none") {
 		let t5;
-		if ($[10] !== children || $[11] !== props || $[12] !== t4) {
-			t5 = /* @__PURE__ */ _jsx("div", {
-				"data-slot": "sidebar",
-				className: t4,
-				...props,
+		if ($[10] !== ariaLabel || $[11] !== children || $[12] !== className || $[13] !== side) {
+			t5 = /* @__PURE__ */ _jsx(MobileSidebar, {
+				ariaLabel,
+				className,
+				side,
 				children
 			});
-			$[10] = children;
-			$[11] = props;
-			$[12] = t4;
-			$[13] = t5;
+			$[10] = ariaLabel;
+			$[11] = children;
+			$[12] = className;
+			$[13] = side;
+			$[14] = t5;
 		} else {
-			t5 = $[13];
+			t5 = $[14];
 		}
 		return t5;
 	}
-	if (isMobile) {
-		let t4;
-		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-			t4 = { "--sidebar-width": SIDEBAR_WIDTH_MOBILE };
-			$[14] = t4;
-		} else {
-			t4 = $[14];
-		}
-		let t5;
-		if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-			t5 = /* @__PURE__ */ _jsxs(SheetHeader, {
-				className: "sr-only",
-				children: [/* @__PURE__ */ _jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ _jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
-			});
-			$[15] = t5;
-		} else {
-			t5 = $[15];
-		}
-		let t6;
-		if ($[16] !== children) {
-			t6 = /* @__PURE__ */ _jsx("div", {
-				className: "flex h-full w-full flex-col",
-				children
-			});
-			$[16] = children;
-			$[17] = t6;
-		} else {
-			t6 = $[17];
-		}
-		let t7;
-		if ($[18] !== dir || $[19] !== side || $[20] !== t6) {
-			t7 = /* @__PURE__ */ _jsxs(SheetContent, {
-				dir,
-				"data-sidebar": "sidebar",
-				"data-slot": "sidebar",
-				"data-mobile": "true",
-				className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
-				style: t4,
-				side,
-				children: [t5, t6]
-			});
-			$[18] = dir;
-			$[19] = side;
-			$[20] = t6;
-			$[21] = t7;
-		} else {
-			t7 = $[21];
-		}
-		let t8;
-		if ($[22] !== openMobile || $[23] !== props || $[24] !== setOpenMobile || $[25] !== t7) {
-			t8 = /* @__PURE__ */ _jsx(Sheet, {
-				open: openMobile,
-				onOpenChange: setOpenMobile,
-				...props,
-				children: t7
-			});
-			$[22] = openMobile;
-			$[23] = props;
-			$[24] = setOpenMobile;
-			$[25] = t7;
-			$[26] = t8;
-		} else {
-			t8 = $[26];
-		}
-		return t8;
-	}
-	const t4 = state === "collapsed" ? collapsible : "";
-	const t5 = variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)";
+	const t5 = collapsed ? "collapsed" : "expanded";
 	let t6;
-	if ($[27] !== t5) {
-		t6 = cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-(--sidebar-ease)", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t5);
-		$[27] = t5;
-		$[28] = t6;
-	} else {
-		t6 = $[28];
-	}
-	let t7;
-	if ($[29] !== t6) {
-		t7 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "sidebar-gap",
-			className: t6
-		});
-		$[29] = t6;
-		$[30] = t7;
+	if ($[15] !== width) {
+		t6 = { width };
+		$[15] = width;
+		$[16] = t6;
 	} else {
-		t7 = $[30];
+		t6 = $[16];
 	}
-	const t8 = variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l";
-	let t9;
-	if ($[31] !== className || $[32] !== t8) {
-		t9 = cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-(--sidebar-ease) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", t8, className);
-		$[31] = className;
-		$[32] = t8;
-		$[33] = t9;
+	const t7 = context.reduce ? INSTANT_TRANSITION : SIDEBAR_MORPH_TRANSITION;
+	const t8 = collapsible === "none" ? "block" : "hidden md:block";
+	const t9 = side === "right" && "order-last";
+	let t10;
+	if ($[17] !== className || $[18] !== t8 || $[19] !== t9) {
+		t10 = cn("group/sidebar peer relative h-auto shrink-0 text-sidebar-foreground will-change-[width]", t8, t9, className);
+		$[17] = className;
+		$[18] = t8;
+		$[19] = t9;
+		$[20] = t10;
+	} else {
+		t10 = $[20];
+	}
+	const t11 = offcanvas ? 0 : 1;
+	const t12 = offcanvas ? side === "left" ? "-100%" : "100%" : "0%";
+	let t13;
+	if ($[21] !== t11 || $[22] !== t12) {
+		t13 = {
+			opacity: t11,
+			x: t12
+		};
+		$[21] = t11;
+		$[22] = t12;
+		$[23] = t13;
+	} else {
+		t13 = $[23];
+	}
+	const t14 = context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION;
+	const t15 = collapsible === "offcanvas" && "w-(--sidebar-width)";
+	const t16 = collapsible === "none" && "h-auto";
+	const t17 = variant === "sidebar" && (side === "left" ? "border-r border-sidebar-border" : "border-l border-sidebar-border");
+	const t18 = variant === "floating" && "m-2 h-[calc(100svh-1rem)] rounded-2xl border border-sidebar-border shadow-sm";
+	const t19 = variant === "inset" && "m-2 h-[calc(100svh-1rem)] rounded-2xl";
+	let t20;
+	if ($[24] !== panelClassName || $[25] !== t15 || $[26] !== t16 || $[27] !== t17 || $[28] !== t18 || $[29] !== t19) {
+		t20 = cn("sticky top-0 flex h-svh w-full flex-col overflow-hidden bg-sidebar", t15, t16, t17, t18, t19, panelClassName);
+		$[24] = panelClassName;
+		$[25] = t15;
+		$[26] = t16;
+		$[27] = t17;
+		$[28] = t18;
+		$[29] = t19;
+		$[30] = t20;
+	} else {
+		t20 = $[30];
+	}
+	let t21;
+	if ($[31] !== collapsed || $[32] !== collapsible || $[33] !== side) {
+		t21 = {
+			collapsed,
+			collapsible,
+			side
+		};
+		$[31] = collapsed;
+		$[32] = collapsible;
+		$[33] = side;
+		$[34] = t21;
 	} else {
-		t9 = $[33];
+		t21 = $[34];
 	}
-	let t10;
-	if ($[34] !== children) {
-		t10 = /* @__PURE__ */ _jsx("div", {
-			"data-sidebar": "sidebar",
-			"data-slot": "sidebar-inner",
-			className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
+	let t22;
+	if ($[35] !== children || $[36] !== t21) {
+		t22 = /* @__PURE__ */ _jsx(SidebarPanelContext.Provider, {
+			value: t21,
 			children
 		});
-		$[34] = children;
-		$[35] = t10;
-	} else {
-		t10 = $[35];
-	}
-	let t11;
-	if ($[36] !== props || $[37] !== side || $[38] !== t10 || $[39] !== t9) {
-		t11 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "sidebar-container",
-			"data-side": side,
-			className: t9,
-			...props,
-			children: t10
+		$[35] = children;
+		$[36] = t21;
+		$[37] = t22;
+	} else {
+		t22 = $[37];
+	}
+	let t23;
+	if ($[38] !== t13 || $[39] !== t14 || $[40] !== t20 || $[41] !== t22) {
+		t23 = /* @__PURE__ */ _jsx(motion.div, {
+			initial: false,
+			animate: t13,
+			transition: t14,
+			"data-slot": "sidebar-inner",
+			className: t20,
+			children: t22
 		});
-		$[36] = props;
-		$[37] = side;
-		$[38] = t10;
-		$[39] = t9;
-		$[40] = t11;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t20;
+		$[41] = t22;
+		$[42] = t23;
 	} else {
-		t11 = $[40];
+		t23 = $[42];
 	}
-	let t12;
-	if ($[41] !== side || $[42] !== state || $[43] !== t11 || $[44] !== t4 || $[45] !== t7 || $[46] !== variant) {
-		t12 = /* @__PURE__ */ _jsxs("div", {
-			className: "group peer hidden text-sidebar-foreground md:block",
-			"data-state": state,
-			"data-collapsible": t4,
+	let t24;
+	if ($[43] !== ariaLabel || $[44] !== collapsible || $[45] !== props || $[46] !== side || $[47] !== style || $[48] !== t10 || $[49] !== t23 || $[50] !== t5 || $[51] !== t6 || $[52] !== t7 || $[53] !== variant) {
+		t24 = /* @__PURE__ */ _jsx(motion.aside, {
+			...props,
+			initial: false,
+			"aria-label": ariaLabel,
+			"data-slot": "sidebar",
+			"data-state": t5,
+			"data-collapsible": collapsible,
 			"data-variant": variant,
 			"data-side": side,
-			"data-slot": "sidebar",
-			children: [t7, t11]
+			animate: t6,
+			transition: t7,
+			style,
+			className: t10,
+			children: t23
 		});
-		$[41] = side;
-		$[42] = state;
-		$[43] = t11;
-		$[44] = t4;
-		$[45] = t7;
-		$[46] = variant;
-		$[47] = t12;
-	} else {
-		t12 = $[47];
-	}
-	return t12;
+		$[43] = ariaLabel;
+		$[44] = collapsible;
+		$[45] = props;
+		$[46] = side;
+		$[47] = style;
+		$[48] = t10;
+		$[49] = t23;
+		$[50] = t5;
+		$[51] = t6;
+		$[52] = t7;
+		$[53] = variant;
+		$[54] = t24;
+	} else {
+		t24 = $[54];
+	}
+	return t24;
+}
+/**
+* Button that toggles the desktop rail or the mobile sheet; shows a panel icon unless given children.
+* @param props - Native button attributes.
+* @returns The toggle button.
+*/
+function SidebarTrigger({ children, className, onClick, ref, type = "button", ...props }) {
+	const context = useSidebar();
+	const expanded = context.isMobile ? context.openMobile : context.open;
+	return /* @__PURE__ */ _jsx("button", {
+		...props,
+		ref: (node) => {
+			context.triggerRef.current = node;
+			if (typeof ref === "function") return ref(node);
+			if (ref) ref.current = node;
+		},
+		type,
+		"aria-label": props["aria-label"] ?? "Toggle sidebar",
+		"aria-expanded": expanded,
+		"data-slot": "sidebar-trigger",
+		"data-state": expanded ? "expanded" : "collapsed",
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) context.toggleSidebar();
+		},
+		className: cn("inline-flex size-10 shrink-0 items-center justify-center rounded-xl outline-none [&_svg]:size-4", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className),
+		children: children ?? /* @__PURE__ */ _jsx(PanelLeftIcon, { "aria-hidden": "true" })
+	});
 }
-function SidebarTrigger(t0) {
-	const $ = _c(15);
+/**
+* Button that closes the sidebar on the current viewport.
+* @param props - Native button attributes; the content is the consumer's icon or text.
+* @returns The close button.
+*/
+function SidebarClose(t0) {
+	const $ = _c(16);
 	let className;
 	let onClick;
 	let props;
+	let t1;
 	if ($[0] !== t0) {
-		({className, onClick, ...props} = t0);
+		({className, onClick, type: t1, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = onClick;
 		$[3] = props;
+		$[4] = t1;
 	} else {
 		className = $[1];
 		onClick = $[2];
 		props = $[3];
+		t1 = $[4];
 	}
-	const { toggleSidebar } = useSidebar();
-	let t1;
-	if ($[4] !== className) {
-		t1 = cn(className);
-		$[4] = className;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	let t2;
-	if ($[6] !== onClick || $[7] !== toggleSidebar) {
-		t2 = (event) => {
+	const type = t1 === undefined ? "button" : t1;
+	const context = useSidebar();
+	const t2 = props["aria-label"] ?? "Close sidebar";
+	let t3;
+	if ($[5] !== context || $[6] !== onClick) {
+		t3 = (event) => {
 			onClick?.(event);
-			toggleSidebar();
+			if (event.defaultPrevented) {
+				return;
+			}
+			if (context.isMobile) {
+				context.setOpenMobile(false);
+			} else {
+				context.setOpen(false);
+			}
 		};
+		$[5] = context;
 		$[6] = onClick;
-		$[7] = toggleSidebar;
-		$[8] = t2;
+		$[7] = t3;
 	} else {
-		t2 = $[8];
+		t3 = $[7];
 	}
-	let t3;
 	let t4;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(PanelLeftIcon, {});
-		t4 = /* @__PURE__ */ _jsx("span", {
-			className: "sr-only",
-			children: "Toggle Sidebar"
-		});
-		$[9] = t3;
-		$[10] = t4;
+	if ($[8] !== className) {
+		t4 = cn("inline-flex size-10 shrink-0 items-center justify-center rounded-xl outline-none", "focus-visible:ring-2 focus-visible:ring-ring", className);
+		$[8] = className;
+		$[9] = t4;
 	} else {
-		t3 = $[9];
-		t4 = $[10];
+		t4 = $[9];
 	}
 	let t5;
-	if ($[11] !== props || $[12] !== t1 || $[13] !== t2) {
-		t5 = /* @__PURE__ */ _jsxs(Button, {
-			"data-sidebar": "trigger",
-			"data-slot": "sidebar-trigger",
-			variant: "ghost",
-			size: "icon-sm",
-			className: t1,
-			onClick: t2,
+	if ($[10] !== props || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== type) {
+		t5 = /* @__PURE__ */ _jsx("button", {
 			...props,
-			children: [t3, t4]
+			type,
+			"aria-label": t2,
+			"data-slot": "sidebar-close",
+			onClick: t3,
+			className: t4
 		});
-		$[11] = props;
-		$[12] = t1;
-		$[13] = t2;
-		$[14] = t5;
+		$[10] = props;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = type;
+		$[15] = t5;
 	} else {
-		t5 = $[14];
+		t5 = $[15];
 	}
 	return t5;
 }
+/**
+* Thin hit area on the sidebar edge that toggles it with the pointer.
+* @param props - Native button attributes.
+* @returns The rail button, outside the tab order.
+*/
 function SidebarRail(t0) {
-	const $ = _c(9);
+	const $ = _c(17);
 	let className;
+	let onClick;
 	let props;
+	let t1;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, onClick, type: t1, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = props;
+		$[2] = onClick;
+		$[3] = props;
+		$[4] = t1;
 	} else {
 		className = $[1];
-		props = $[2];
+		onClick = $[2];
+		props = $[3];
+		t1 = $[4];
 	}
-	const { toggleSidebar } = useSidebar();
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("absolute inset-y-0 z-20 hidden w-4 transition-all duration-300 ease-(--sidebar-ease) group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className);
-		$[3] = className;
-		$[4] = t1;
+	const type = t1 === undefined ? "button" : t1;
+	const context = useSidebar();
+	const panel = useSidebarPanel();
+	const t2 = panel.side;
+	const t3 = props["aria-label"] ?? "Toggle sidebar";
+	let t4;
+	if ($[5] !== context || $[6] !== onClick) {
+		t4 = (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) {
+				context.toggleSidebar();
+			}
+		};
+		$[5] = context;
+		$[6] = onClick;
+		$[7] = t4;
 	} else {
-		t1 = $[4];
+		t4 = $[7];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1 || $[7] !== toggleSidebar) {
-		t2 = /* @__PURE__ */ _jsx("button", {
-			"data-sidebar": "rail",
+	let t5;
+	if ($[8] !== className) {
+		t5 = cn("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 outline-none md:block", "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:bg-transparent after:transition-colors hover:after:bg-sidebar-border", "data-[side=left]:left-full data-[side=right]:right-0 data-[side=right]:translate-x-1/2", className);
+		$[8] = className;
+		$[9] = t5;
+	} else {
+		t5 = $[9];
+	}
+	let t6;
+	if ($[10] !== panel.side || $[11] !== props || $[12] !== t3 || $[13] !== t4 || $[14] !== t5 || $[15] !== type) {
+		t6 = /* @__PURE__ */ _jsx("button", {
+			...props,
+			type,
 			"data-slot": "sidebar-rail",
-			"aria-label": "Toggle Sidebar",
+			"data-side": t2,
+			"aria-label": t3,
+			title: "Toggle sidebar",
 			tabIndex: -1,
-			onClick: toggleSidebar,
-			title: "Toggle Sidebar",
-			className: t1,
-			...props
+			onClick: t4,
+			className: t5
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = toggleSidebar;
-		$[8] = t2;
+		$[10] = panel.side;
+		$[11] = props;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = type;
+		$[16] = t6;
 	} else {
-		t2 = $[8];
+		t6 = $[16];
 	}
-	return t2;
+	return t6;
 }
+/**
+* Main content area laid out next to the sidebar.
+* @param props - Motion-enabled `main` attributes.
+* @returns The content landmark.
+*/
 function SidebarInset(t0) {
 	const $ = _c(8);
 	let className;
@@ -553,7 +1061,7 @@ function SidebarInset(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className);
+		t1 = cn("relative flex min-h-svh min-w-0 flex-1 flex-col bg-background", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -561,10 +1069,10 @@ function SidebarInset(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("main", {
+		t2 = /* @__PURE__ */ _jsx(motion.main, {
+			...props,
 			"data-slot": "sidebar-inset",
-			className: t1,
-			...props
+			className: t1
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -574,7 +1082,7 @@ function SidebarInset(t0) {
 	}
 	return t2;
 }
-function SidebarInput(t0) {
+function SidebarHeader(t0) {
 	const $ = _c(8);
 	let className;
 	let props;
@@ -589,7 +1097,7 @@ function SidebarInput(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("h-8 w-full bg-background shadow-none", className);
+		t1 = cn("flex shrink-0 flex-col gap-2 p-3", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -597,11 +1105,10 @@ function SidebarInput(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(Input, {
-			"data-slot": "sidebar-input",
-			"data-sidebar": "input",
-			className: t1,
-			...props
+		t2 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			"data-slot": "sidebar-header",
+			className: t1
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -611,7 +1118,7 @@ function SidebarInput(t0) {
 	}
 	return t2;
 }
-function SidebarHeader(t0) {
+function SidebarContent(t0) {
 	const $ = _c(8);
 	let className;
 	let props;
@@ -626,7 +1133,7 @@ function SidebarHeader(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("flex flex-col gap-2 p-2", className);
+		t1 = cn("flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto overscroll-contain px-2 py-2", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -635,10 +1142,9 @@ function SidebarHeader(t0) {
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "sidebar-header",
-			"data-sidebar": "header",
-			className: t1,
-			...props
+			...props,
+			"data-slot": "sidebar-content",
+			className: t1
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -663,7 +1169,7 @@ function SidebarFooter(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("flex flex-col gap-2 p-2", className);
+		t1 = cn("flex shrink-0 flex-col gap-2 border-t border-sidebar-border p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -672,10 +1178,9 @@ function SidebarFooter(t0) {
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ _jsx("div", {
+			...props,
 			"data-slot": "sidebar-footer",
-			"data-sidebar": "footer",
-			className: t1,
-			...props
+			className: t1
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -685,79 +1190,143 @@ function SidebarFooter(t0) {
 	}
 	return t2;
 }
-function SidebarSeparator(t0) {
-	const $ = _c(8);
-	let className;
+/**
+* Product text that only makes sense in the expanded sidebar, such as a workspace name or an empty
+* state: it leaves the layout while the panel is the icon rail and always shows in the mobile sheet.
+* @param props - Span attributes, or `asChild` to keep the child element.
+* @returns The content, or nothing in the icon rail.
+*/
+function SidebarLabel(t0) {
+	const $ = _c(6);
 	let props;
+	let t1;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({asChild: t1, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = props;
+		$[2] = t1;
 	} else {
-		className = $[1];
-		props = $[2];
+		props = $[1];
+		t1 = $[2];
 	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("mx-2 w-auto bg-sidebar-border", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
+	const asChild = t1 === undefined ? false : t1;
+	const { collapsed } = useSidebarPanel();
+	if (collapsed) {
+		return null;
 	}
+	const Component = asChild ? Slot.Root : "span";
 	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(Separator, {
-			"data-slot": "sidebar-separator",
-			"data-sidebar": "separator",
-			className: t1,
+	if ($[3] !== Component || $[4] !== props) {
+		t2 = /* @__PURE__ */ _jsx(Component, {
+			"data-slot": "sidebar-label",
 			...props
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[3] = Component;
+		$[4] = props;
+		$[5] = t2;
 	} else {
-		t2 = $[7];
+		t2 = $[5];
 	}
 	return t2;
 }
-function SidebarContent(t0) {
-	const $ = _c(8);
+/**
+* Header row that identifies the workspace, often the trigger of a workspace switcher. It forwards
+* its props and ref to the `button`, so it works as `DropdownMenuTrigger asChild`, and keeps its tile
+* on the menu icon column while the label and trailing content leave in the icon rail.
+* @param props - Tile, label, trailing content and native button attributes.
+* @returns The brand button.
+*/
+function SidebarBrandButton(t0) {
+	const $ = _c(23);
+	let children;
 	let className;
+	let icon;
 	let props;
+	let t1;
+	let trailing;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({icon, trailing, children, className, type: t1, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = children;
+		$[2] = className;
+		$[3] = icon;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = trailing;
 	} else {
-		className = $[1];
-		props = $[2];
+		children = $[1];
+		className = $[2];
+		icon = $[3];
+		props = $[4];
+		t1 = $[5];
+		trailing = $[6];
 	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className);
-		$[3] = className;
-		$[4] = t1;
+	const type = t1 === undefined ? "button" : t1;
+	const { collapsed } = useSidebarPanel();
+	const textLabel = typeof children === "string" ? children : undefined;
+	const t2 = collapsed ? textLabel : undefined;
+	const t3 = collapsed ? textLabel : undefined;
+	let t4;
+	if ($[7] !== className) {
+		t4 = cn("flex min-h-10 w-full min-w-0 items-center gap-3 rounded-xl px-2 py-1.5 text-left text-sm font-semibold text-sidebar-foreground outline-none transition-colors", "hover:bg-sidebar-accent/70 focus-visible:bg-sidebar-accent/70 focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:bg-sidebar-accent/70", "disabled:cursor-not-allowed disabled:opacity-40", className);
+		$[7] = className;
+		$[8] = t4;
 	} else {
-		t1 = $[4];
+		t4 = $[8];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "sidebar-content",
-			"data-sidebar": "content",
-			className: t1,
-			...props
+	let t5;
+	if ($[9] !== icon) {
+		t5 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "sidebar-brand-icon",
+			className: "grid size-7 shrink-0 place-items-center overflow-hidden rounded-lg [&>img]:size-full [&>img]:object-cover",
+			children: icon
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[9] = icon;
+		$[10] = t5;
 	} else {
-		t2 = $[7];
+		t5 = $[10];
 	}
-	return t2;
+	let t6;
+	if ($[11] !== children || $[12] !== collapsed || $[13] !== trailing) {
+		t6 = collapsed ? null : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children
+		}), trailing ? /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			className: "grid size-4 shrink-0 place-items-center text-sidebar-foreground/70 [&_svg]:size-3.5",
+			children: trailing
+		}) : null] });
+		$[11] = children;
+		$[12] = collapsed;
+		$[13] = trailing;
+		$[14] = t6;
+	} else {
+		t6 = $[14];
+	}
+	let t7;
+	if ($[15] !== props || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6 || $[21] !== type) {
+		t7 = /* @__PURE__ */ _jsxs("button", {
+			"aria-label": t2,
+			title: t3,
+			...props,
+			type,
+			"data-slot": "sidebar-brand-button",
+			className: t4,
+			children: [t5, t6]
+		});
+		$[15] = props;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = type;
+		$[22] = t7;
+	} else {
+		t7 = $[22];
+	}
+	return t7;
 }
 function SidebarGroup(t0) {
 	const $ = _c(8);
@@ -774,7 +1343,7 @@ function SidebarGroup(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("relative flex w-full min-w-0 flex-col p-2", className);
+		t1 = cn("flex w-full min-w-0 flex-col px-1 py-1.5", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -783,10 +1352,9 @@ function SidebarGroup(t0) {
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ _jsx("div", {
+			...props,
 			"data-slot": "sidebar-group",
-			"data-sidebar": "group",
-			className: t1,
-			...props
+			className: t1
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -796,84 +1364,40 @@ function SidebarGroup(t0) {
 	}
 	return t2;
 }
+/** Section heading that fades out of the icon rail and is hidden from assistive technology there. */
 function SidebarGroupLabel(t0) {
 	const $ = _c(10);
 	let className;
 	let props;
-	let t1;
 	if ($[0] !== t0) {
-		({className, asChild: t1, ...props} = t0);
+		({className, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = props;
-		$[3] = t1;
 	} else {
 		className = $[1];
 		props = $[2];
-		t1 = $[3];
 	}
-	const asChild = t1 === undefined ? false : t1;
-	const Comp = asChild ? Slot.Root : "div";
+	const { collapsed } = useSidebarPanel();
+	const t1 = collapsed ? "opacity-0" : "opacity-100";
 	let t2;
-	if ($[4] !== className) {
-		t2 = cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-300 ease-(--sidebar-ease) group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className);
-		$[4] = className;
+	if ($[3] !== className || $[4] !== t1) {
+		t2 = cn("mb-1 h-7 overflow-hidden px-2 text-[10px] font-medium tracking-[0.14em] text-sidebar-foreground/70 uppercase transition-opacity", t1, className);
+		$[3] = className;
+		$[4] = t1;
 		$[5] = t2;
 	} else {
 		t2 = $[5];
 	}
 	let t3;
-	if ($[6] !== Comp || $[7] !== props || $[8] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(Comp, {
+	if ($[6] !== collapsed || $[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			"aria-hidden": collapsed,
 			"data-slot": "sidebar-group-label",
-			"data-sidebar": "group-label",
-			className: t2,
-			...props
+			className: t2
 		});
-		$[6] = Comp;
-		$[7] = props;
-		$[8] = t2;
-		$[9] = t3;
-	} else {
-		t3 = $[9];
-	}
-	return t3;
-}
-function SidebarGroupAction(t0) {
-	const $ = _c(10);
-	let className;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({className, asChild: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-	}
-	const asChild = t1 === undefined ? false : t1;
-	const Comp = asChild ? Slot.Root : "button";
-	let t2;
-	if ($[4] !== className) {
-		t2 = cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className);
-		$[4] = className;
-		$[5] = t2;
-	} else {
-		t2 = $[5];
-	}
-	let t3;
-	if ($[6] !== Comp || $[7] !== props || $[8] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(Comp, {
-			"data-slot": "sidebar-group-action",
-			"data-sidebar": "group-action",
-			className: t2,
-			...props
-		});
-		$[6] = Comp;
+		$[6] = collapsed;
 		$[7] = props;
 		$[8] = t2;
 		$[9] = t3;
@@ -897,7 +1421,7 @@ function SidebarGroupContent(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("w-full text-sm", className);
+		t1 = cn("w-full min-w-0", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -906,10 +1430,9 @@ function SidebarGroupContent(t0) {
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ _jsx("div", {
+			...props,
 			"data-slot": "sidebar-group-content",
-			"data-sidebar": "group-content",
-			className: t1,
-			...props
+			className: t1
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -919,6 +1442,7 @@ function SidebarGroupContent(t0) {
 	}
 	return t2;
 }
+/** Menu list whose items share a hover pill that glides between them. */
 function SidebarMenu(t0) {
 	const $ = _c(8);
 	let className;
@@ -934,7 +1458,7 @@ function SidebarMenu(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("flex w-full min-w-0 flex-col gap-1", className);
+		t1 = cn("flex w-full min-w-0 list-none flex-col gap-0.5", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -942,14 +1466,13 @@ function SidebarMenu(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(GlideSlot, {
-			preset: "sidebar",
-			children: /* @__PURE__ */ _jsx("ul", {
-				"data-slot": "sidebar-menu",
-				"data-sidebar": "menu",
-				className: t1,
-				...props
-			})
+		t2 = /* @__PURE__ */ _jsx(SharedLayoutBg, {
+			...props,
+			inset: 0,
+			pillClassName: "rounded-xl bg-sidebar-accent/70",
+			pillContainerClassName: "inset-y-auto top-0 h-9",
+			"data-slot": "sidebar-menu",
+			className: t1
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -974,7 +1497,7 @@ function SidebarMenuItem(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("group/menu-item relative", className);
+		t1 = cn("relative", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -982,11 +1505,12 @@ function SidebarMenuItem(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("li", {
+		t2 = /* @__PURE__ */ _jsx(motion.li, {
+			...props,
+			layout: "position",
+			transition: SPRING_LAYOUT,
 			"data-slot": "sidebar-menu-item",
-			"data-sidebar": "menu-item",
-			className: t1,
-			...props
+			className: t1
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -996,195 +1520,70 @@ function SidebarMenuItem(t0) {
 	}
 	return t2;
 }
-const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
-	variants: {
-		variant: {
-			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-			outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
-		},
-		size: {
-			default: "h-8 text-sm",
-			sm: "h-7 text-xs",
-			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-function SidebarMenuButton(t0) {
-	const $ = _c(28);
+/**
+* Nested list that unfolds with a clip and staggered items.
+* @param props - Open state and motion-enabled list attributes.
+* @returns The submenu while open and the sidebar is expanded.
+*/
+function SidebarMenuSub(t0) {
+	const $ = _c(14);
+	let children;
 	let className;
+	let open;
 	let props;
-	let t1;
-	let t2;
-	let t3;
-	let t4;
-	let tooltip;
 	if ($[0] !== t0) {
-		({asChild: t1, isActive: t2, variant: t3, size: t4, tooltip, className, ...props} = t0);
+		({open, children, className, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
-		$[6] = t4;
-		$[7] = tooltip;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
-		t4 = $[6];
-		tooltip = $[7];
-	}
-	const asChild = t1 === undefined ? false : t1;
-	const isActive = t2 === undefined ? false : t2;
-	const variant = t3 === undefined ? "default" : t3;
-	const size = t4 === undefined ? "default" : t4;
-	const Comp = asChild ? Slot.Root : "button";
-	const { isMobile, state } = useSidebar();
-	const hasMounted = React.useSyncExternalStore(subscribeToClientMount, getClientMountSnapshot, getServerMountSnapshot);
-	let t5;
-	if ($[8] !== className || $[9] !== size || $[10] !== variant) {
-		t5 = cn(sidebarMenuButtonVariants({
-			variant,
-			size
-		}), className);
-		$[8] = className;
-		$[9] = size;
-		$[10] = variant;
-		$[11] = t5;
-	} else {
-		t5 = $[11];
-	}
-	let t6;
-	if ($[12] !== Comp || $[13] !== isActive || $[14] !== props || $[15] !== size || $[16] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "subtle-press",
-			children: /* @__PURE__ */ _jsx(Comp, {
-				"data-slot": "sidebar-menu-button",
-				"data-sidebar": "menu-button",
-				"data-size": size,
-				"data-active": isActive,
-				className: t5,
-				...props
-			})
-		});
-		$[12] = Comp;
-		$[13] = isActive;
-		$[14] = props;
-		$[15] = size;
-		$[16] = t5;
-		$[17] = t6;
-	} else {
-		t6 = $[17];
-	}
-	const button = t6;
-	if (!tooltip || !hasMounted) {
-		return button;
-	}
-	if (typeof tooltip === "string") {
-		let t7;
-		if ($[18] !== tooltip) {
-			t7 = { children: tooltip };
-			$[18] = tooltip;
-			$[19] = t7;
-		} else {
-			t7 = $[19];
-		}
-		tooltip = t7;
-	}
-	let t7;
-	if ($[20] !== button) {
-		t7 = /* @__PURE__ */ _jsx(TooltipTrigger, {
-			asChild: true,
-			children: button
-		});
-		$[20] = button;
-		$[21] = t7;
-	} else {
-		t7 = $[21];
-	}
-	const t8 = state !== "collapsed" || isMobile;
-	let t9;
-	if ($[22] !== t8 || $[23] !== tooltip) {
-		t9 = /* @__PURE__ */ _jsx(TooltipContent, {
-			side: "right",
-			align: "center",
-			hidden: t8,
-			...tooltip
-		});
-		$[22] = t8;
-		$[23] = tooltip;
-		$[24] = t9;
-	} else {
-		t9 = $[24];
-	}
-	let t10;
-	if ($[25] !== t7 || $[26] !== t9) {
-		t10 = /* @__PURE__ */ _jsxs(Tooltip, { children: [t7, t9] });
-		$[25] = t7;
-		$[26] = t9;
-		$[27] = t10;
+		$[1] = children;
+		$[2] = className;
+		$[3] = open;
+		$[4] = props;
 	} else {
-		t10 = $[27];
+		children = $[1];
+		className = $[2];
+		open = $[3];
+		props = $[4];
 	}
-	return t10;
-}
-function SidebarMenuAction(t0) {
-	const $ = _c(12);
-	let className;
-	let props;
+	const context = useSidebar();
+	const panel = useSidebarPanel();
 	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({className, asChild: t1, showOnHover: t2, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-	}
-	const asChild = t1 === undefined ? false : t1;
-	const showOnHover = t2 === undefined ? false : t2;
-	const Comp = asChild ? Slot.Root : "button";
-	const t3 = showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0";
-	let t4;
-	if ($[5] !== className || $[6] !== t3) {
-		t4 = cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", t3, className);
-		$[5] = className;
-		$[6] = t3;
-		$[7] = t4;
+	if ($[5] !== children || $[6] !== className || $[7] !== context || $[8] !== open || $[9] !== panel || $[10] !== props) {
+		t1 = open && !panel.collapsed ? /* @__PURE__ */ _createElement(motion.ul, {
+			...props,
+			key: "sidebar-submenu",
+			variants: context.reduce ? undefined : SUBMENU_VARIANTS,
+			initial: context.reduce ? false : "closed",
+			animate: context.reduce ? { opacity: 1 } : "open",
+			exit: context.reduce ? { opacity: 0 } : "closed",
+			transition: context.reduce ? { duration: MOTION_TIMING.exit } : undefined,
+			"data-slot": "sidebar-menu-sub",
+			className: cn("relative mt-1 ml-5 flex min-w-0 flex-col gap-0.5 border-l border-sidebar-border pl-3", className)
+		}, children) : null;
+		$[5] = children;
+		$[6] = className;
+		$[7] = context;
+		$[8] = open;
+		$[9] = panel;
+		$[10] = props;
+		$[11] = t1;
 	} else {
-		t4 = $[7];
+		t1 = $[11];
 	}
-	let t5;
-	if ($[8] !== Comp || $[9] !== props || $[10] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(Comp, {
-			"data-slot": "sidebar-menu-action",
-			"data-sidebar": "menu-action",
-			className: t4,
-			...props
+	let t2;
+	if ($[12] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			children: t1
 		});
-		$[8] = Comp;
-		$[9] = props;
-		$[10] = t4;
-		$[11] = t5;
+		$[12] = t1;
+		$[13] = t2;
 	} else {
-		t5 = $[11];
+		t2 = $[13];
 	}
-	return t5;
+	return t2;
 }
-function SidebarMenuBadge(t0) {
+function SidebarMenuSubItem(t0) {
 	const $ = _c(8);
 	let className;
 	let props;
@@ -1199,7 +1598,7 @@ function SidebarMenuBadge(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className);
+		t1 = cn("relative min-w-0", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -1207,11 +1606,11 @@ function SidebarMenuBadge(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "sidebar-menu-badge",
-			"data-sidebar": "menu-badge",
-			className: t1,
-			...props
+		t2 = /* @__PURE__ */ _jsx(motion.li, {
+			...props,
+			variants: SUBMENU_ITEM_VARIANTS,
+			"data-slot": "sidebar-menu-sub-item",
+			className: t1
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -1221,208 +1620,379 @@ function SidebarMenuBadge(t0) {
 	}
 	return t2;
 }
-function SidebarMenuSkeleton(t0) {
-	const $ = _c(14);
-	let className;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({className, showIcon: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-	}
-	const showIcon = t1 === undefined ? false : t1;
+/** Renders a menu action as a routed link or a button, both with the subtle press feedback. */
+function SidebarPressable(t0) {
+	const $ = _c(19);
+	const { slot, href, disabled, target, rel, isActive, ariaExpanded, ariaLabel, title, className, children, onClick } = t0;
+	const t1 = isActive ? "page" : undefined;
 	let t2;
-	if ($[4] !== className) {
-		t2 = cn("flex h-8 items-center gap-2 rounded-md px-2", className);
-		$[4] = className;
-		$[5] = t2;
+	if ($[0] !== ariaExpanded || $[1] !== ariaLabel || $[2] !== className || $[3] !== isActive || $[4] !== onClick || $[5] !== slot || $[6] !== t1 || $[7] !== title) {
+		t2 = {
+			"data-slot": slot,
+			"data-active": isActive,
+			"aria-current": t1,
+			"aria-expanded": ariaExpanded,
+			"aria-label": ariaLabel,
+			title,
+			className,
+			onClick
+		};
+		$[0] = ariaExpanded;
+		$[1] = ariaLabel;
+		$[2] = className;
+		$[3] = isActive;
+		$[4] = onClick;
+		$[5] = slot;
+		$[6] = t1;
+		$[7] = title;
+		$[8] = t2;
 	} else {
-		t2 = $[5];
+		t2 = $[8];
 	}
+	const sharedProps = t2;
 	let t3;
-	if ($[6] !== showIcon) {
-		t3 = showIcon && /* @__PURE__ */ _jsx(Skeleton, {
-			className: "size-4 rounded-md",
-			"data-sidebar": "menu-skeleton-icon"
+	if ($[9] !== children || $[10] !== disabled || $[11] !== href || $[12] !== rel || $[13] !== sharedProps || $[14] !== target) {
+		t3 = href ? /* @__PURE__ */ _jsx(Link, {
+			...sharedProps,
+			href,
+			target,
+			rel: rel ?? (target === EXTERNAL_LINK_TARGET ? EXTERNAL_LINK_REL : undefined),
+			"aria-disabled": disabled || undefined,
+			tabIndex: disabled ? -1 : undefined,
+			children
+		}) : /* @__PURE__ */ _jsx("button", {
+			...sharedProps,
+			type: "button",
+			disabled,
+			children
 		});
-		$[6] = showIcon;
-		$[7] = t3;
+		$[9] = children;
+		$[10] = disabled;
+		$[11] = href;
+		$[12] = rel;
+		$[13] = sharedProps;
+		$[14] = target;
+		$[15] = t3;
 	} else {
-		t3 = $[7];
+		t3 = $[15];
 	}
+	const element = t3;
 	let t4;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = { "--skeleton-width": SIDEBAR_MENU_SKELETON_TEXT_WIDTH };
-		$[8] = t4;
-	} else {
-		t4 = $[8];
-	}
-	let t5;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ _jsx(Skeleton, {
-			className: "h-4 max-w-(--skeleton-width) flex-1",
-			"data-sidebar": "menu-skeleton-text",
-			style: t4
-		});
-		$[9] = t5;
-	} else {
-		t5 = $[9];
-	}
-	let t6;
-	if ($[10] !== props || $[11] !== t2 || $[12] !== t3) {
-		t6 = /* @__PURE__ */ _jsxs("div", {
-			"data-slot": "sidebar-menu-skeleton",
-			"data-sidebar": "menu-skeleton",
-			className: t2,
-			...props,
-			children: [t3, t5]
+	if ($[16] !== disabled || $[17] !== element) {
+		t4 = disabled ? element : /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "subtle-press",
+			children: element
 		});
-		$[10] = props;
-		$[11] = t2;
-		$[12] = t3;
-		$[13] = t6;
+		$[16] = disabled;
+		$[17] = element;
+		$[18] = t4;
 	} else {
-		t6 = $[13];
+		t4 = $[18];
 	}
-	return t6;
+	return t4;
 }
-function SidebarMenuSub(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+/**
+* Submenu entry; shows a dot when no icon is given.
+* @param props - Label, icon, link or select handler, active and disabled state.
+* @returns The submenu link or button.
+*/
+function SidebarMenuSubButton(t0) {
+	const $ = _c(25);
+	const { children, icon, href, isActive: t1, disabled: t2, closeOnSelect: t3, target, rel, onSelect, className } = t0;
+	const isActive = t1 === undefined ? false : t1;
+	const disabled = t2 === undefined ? false : t2;
+	const closeOnSelect = t3 === undefined ? true : t3;
+	const context = useSidebar();
+	let t4;
+	if ($[0] !== closeOnSelect || $[1] !== context || $[2] !== disabled || $[3] !== onSelect) {
+		t4 = (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onSelect?.();
+			if (context.isMobile && closeOnSelect) {
+				context.setOpenMobile(false);
+			}
+		};
+		$[0] = closeOnSelect;
+		$[1] = context;
+		$[2] = disabled;
+		$[3] = onSelect;
+		$[4] = t4;
 	} else {
-		className = $[1];
-		props = $[2];
+		t4 = $[4];
 	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className);
-		$[3] = className;
-		$[4] = t1;
+	const select = t4;
+	const t5 = isActive && "bg-sidebar-accent/70 text-sidebar-accent-foreground";
+	const t6 = disabled && "cursor-not-allowed opacity-40";
+	let t7;
+	if ($[5] !== className || $[6] !== t5 || $[7] !== t6) {
+		t7 = cn("flex min-h-8 w-full min-w-0 items-center gap-2 rounded-lg px-2 text-left text-xs outline-none", "text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground", "focus-visible:bg-sidebar-accent/70 focus-visible:ring-2 focus-visible:ring-sidebar-ring", t5, t6, className);
+		$[5] = className;
+		$[6] = t5;
+		$[7] = t6;
+		$[8] = t7;
 	} else {
-		t1 = $[4];
+		t7 = $[8];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("ul", {
-			"data-slot": "sidebar-menu-sub",
-			"data-sidebar": "menu-sub",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+	let t8;
+	if ($[9] !== icon) {
+		t8 = icon ?? /* @__PURE__ */ _jsx("span", { className: "size-1 rounded-full bg-current" });
+		$[9] = icon;
+		$[10] = t8;
 	} else {
-		t2 = $[7];
+		t8 = $[10];
 	}
-	return t2;
-}
-function SidebarMenuSubItem(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+	let t9;
+	if ($[11] !== t8) {
+		t9 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			className: "grid size-4 shrink-0 place-items-center",
+			children: t8
+		});
+		$[11] = t8;
+		$[12] = t9;
 	} else {
-		className = $[1];
-		props = $[2];
+		t9 = $[12];
 	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("group/menu-sub-item relative", className);
-		$[3] = className;
-		$[4] = t1;
+	let t10;
+	if ($[13] !== children) {
+		t10 = /* @__PURE__ */ _jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children
+		});
+		$[13] = children;
+		$[14] = t10;
 	} else {
-		t1 = $[4];
+		t10 = $[14];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("li", {
-			"data-slot": "sidebar-menu-sub-item",
-			"data-sidebar": "menu-sub-item",
-			className: t1,
-			...props
+	let t11;
+	if ($[15] !== disabled || $[16] !== href || $[17] !== isActive || $[18] !== rel || $[19] !== select || $[20] !== t10 || $[21] !== t7 || $[22] !== t9 || $[23] !== target) {
+		t11 = /* @__PURE__ */ _jsxs(SidebarPressable, {
+			slot: "sidebar-menu-sub-button",
+			href,
+			disabled,
+			target,
+			rel,
+			isActive,
+			onClick: select,
+			className: t7,
+			children: [t9, t10]
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[15] = disabled;
+		$[16] = href;
+		$[17] = isActive;
+		$[18] = rel;
+		$[19] = select;
+		$[20] = t10;
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = target;
+		$[24] = t11;
 	} else {
-		t2 = $[7];
+		t11 = $[24];
 	}
-	return t2;
+	return t11;
 }
-function SidebarMenuSubButton(t0) {
-	const $ = _c(14);
-	let className;
-	let props;
-	let t1;
-	let t2;
+/**
+* Top-level menu entry: the active one carries a pill that glides between entries, and the label
+* fades out of the icon rail, leaving a string label as accessible name and native tooltip.
+* @param props - Label, icon, badge, link or select handler, submenu and active state.
+* @returns The menu link or button.
+*/
+function SidebarMenuButton(t0) {
+	const $ = _c(50);
+	const { children, icon, badge, href, isActive: t1, ariaExpanded, disabled: t2, closeOnSelect, target, rel, onSelect, className } = t0;
+	const isActive = t1 === undefined ? false : t1;
+	const disabled = t2 === undefined ? false : t2;
+	const context = useSidebar();
+	const panel = useSidebarPanel();
+	const textLabel = typeof children === "string" ? children : undefined;
+	const collapsedLabel = panel.collapsed ? textLabel : undefined;
 	let t3;
-	if ($[0] !== t0) {
-		({asChild: t1, size: t2, isActive: t3, className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
+	if ($[0] !== ariaExpanded || $[1] !== closeOnSelect || $[2] !== context || $[3] !== disabled || $[4] !== onSelect || $[5] !== panel.collapsed) {
+		t3 = (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onSelect?.();
+			const shouldCloseOnSelect = closeOnSelect ?? ariaExpanded === undefined;
+			if (context.isMobile && shouldCloseOnSelect) {
+				context.setOpenMobile(false);
+			}
+			if (ariaExpanded !== undefined && panel.collapsed && !context.isMobile) {
+				context.setOpen(true);
+			}
+		};
+		$[0] = ariaExpanded;
+		$[1] = closeOnSelect;
+		$[2] = context;
+		$[3] = disabled;
+		$[4] = onSelect;
+		$[5] = panel.collapsed;
+		$[6] = t3;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
+		t3 = $[6];
 	}
-	const asChild = t1 === undefined ? false : t1;
-	const size = t2 === undefined ? "md" : t2;
-	const isActive = t3 === undefined ? false : t3;
-	const Comp = asChild ? Slot.Root : "a";
-	let t4;
-	if ($[6] !== className) {
-		t4 = cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className);
-		$[6] = className;
-		$[7] = t4;
+	const select = t3;
+	const t4 = isActive && "text-sidebar-accent-foreground";
+	const t5 = disabled && "cursor-not-allowed opacity-40";
+	let t6;
+	if ($[7] !== className || $[8] !== t4 || $[9] !== t5) {
+		t6 = cn("relative flex min-h-9 w-full min-w-0 items-center gap-2.5 overflow-hidden rounded-xl px-3 text-left text-sm font-medium outline-none", "text-sidebar-foreground/70 transition-colors hover:text-sidebar-accent-foreground", "focus-visible:bg-sidebar-accent/70 focus-visible:ring-2 focus-visible:ring-sidebar-ring", t4, t5, className);
+		$[7] = className;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
 	} else {
-		t4 = $[7];
+		t6 = $[10];
 	}
-	let t5;
-	if ($[8] !== Comp || $[9] !== isActive || $[10] !== props || $[11] !== size || $[12] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "subtle-press",
-			children: /* @__PURE__ */ _jsx(Comp, {
-				"data-slot": "sidebar-menu-sub-button",
-				"data-sidebar": "menu-sub-button",
-				"data-size": size,
-				"data-active": isActive,
-				className: t4,
-				...props
-			})
-		});
-		$[8] = Comp;
-		$[9] = isActive;
-		$[10] = props;
-		$[11] = size;
-		$[12] = t4;
-		$[13] = t5;
+	let t7;
+	if ($[11] !== context.layoutId || $[12] !== context.reduce || $[13] !== isActive) {
+		t7 = isActive ? /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "sidebar-menu-active-indicator",
+			layoutId: context.layoutId,
+			transition: context.reduce ? INSTANT_TRANSITION : SPRING_LAYOUT,
+			className: "absolute inset-0 rounded-xl bg-sidebar-accent"
+		}) : null;
+		$[11] = context.layoutId;
+		$[12] = context.reduce;
+		$[13] = isActive;
+		$[14] = t7;
 	} else {
-		t5 = $[13];
+		t7 = $[14];
 	}
-	return t5;
+	let t8;
+	if ($[15] !== icon) {
+		t8 = icon ? /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			className: "relative z-10 grid size-5 shrink-0 place-items-center [&_svg]:size-4",
+			children: icon
+		}) : null;
+		$[15] = icon;
+		$[16] = t8;
+	} else {
+		t8 = $[16];
+	}
+	const t9 = panel.collapsed ? 0 : 1;
+	const t10 = panel.collapsed ? -SIDEBAR_LABEL_DRIFT_PX : 0;
+	let t11;
+	if ($[17] !== t10 || $[18] !== t9) {
+		t11 = {
+			opacity: t9,
+			x: t10
+		};
+		$[17] = t10;
+		$[18] = t9;
+		$[19] = t11;
+	} else {
+		t11 = $[19];
+	}
+	const t12 = context.reduce ? REDUCED_TRANSITION : panel.collapsed ? LABEL_EXIT_TRANSITION : LABEL_ENTER_TRANSITION;
+	const t13 = panel.collapsed;
+	const t14 = panel.collapsed && "pointer-events-none";
+	let t15;
+	if ($[20] !== t14) {
+		t15 = cn("relative z-10 min-w-0 flex-1 truncate", t14);
+		$[20] = t14;
+		$[21] = t15;
+	} else {
+		t15 = $[21];
+	}
+	let t16;
+	if ($[22] !== children || $[23] !== panel.collapsed || $[24] !== t11 || $[25] !== t12 || $[26] !== t15) {
+		t16 = /* @__PURE__ */ _jsx(motion.span, {
+			initial: false,
+			animate: t11,
+			transition: t12,
+			"aria-hidden": t13,
+			className: t15,
+			children
+		});
+		$[22] = children;
+		$[23] = panel.collapsed;
+		$[24] = t11;
+		$[25] = t12;
+		$[26] = t15;
+		$[27] = t16;
+	} else {
+		t16 = $[27];
+	}
+	let t17;
+	if ($[28] !== badge || $[29] !== panel.collapsed) {
+		t17 = badge && !panel.collapsed ? /* @__PURE__ */ _jsx("span", {
+			className: "relative z-10 shrink-0 text-xs text-sidebar-foreground/70",
+			children: badge
+		}) : null;
+		$[28] = badge;
+		$[29] = panel.collapsed;
+		$[30] = t17;
+	} else {
+		t17 = $[30];
+	}
+	let t18;
+	if ($[31] !== ariaExpanded || $[32] !== context.reduce || $[33] !== panel.collapsed) {
+		t18 = ariaExpanded !== undefined ? /* @__PURE__ */ _jsx(motion.span, {
+			"aria-hidden": "true",
+			initial: false,
+			animate: {
+				opacity: panel.collapsed ? 0 : 1,
+				rotate: ariaExpanded ? SIDEBAR_CHEVRON_EXPANDED_DEGREES : 0,
+				x: panel.collapsed ? SIDEBAR_LABEL_DRIFT_PX : 0
+			},
+			transition: context.reduce ? INSTANT_TRANSITION : SPRING_LAYOUT,
+			className: "relative z-10 grid size-4 shrink-0 place-items-center text-sidebar-foreground/70",
+			children: /* @__PURE__ */ _jsx(ChevronRight, { className: "size-3.5" })
+		}) : null;
+		$[31] = ariaExpanded;
+		$[32] = context.reduce;
+		$[33] = panel.collapsed;
+		$[34] = t18;
+	} else {
+		t18 = $[34];
+	}
+	let t19;
+	if ($[35] !== ariaExpanded || $[36] !== collapsedLabel || $[37] !== disabled || $[38] !== href || $[39] !== isActive || $[40] !== rel || $[41] !== select || $[42] !== t16 || $[43] !== t17 || $[44] !== t18 || $[45] !== t6 || $[46] !== t7 || $[47] !== t8 || $[48] !== target) {
+		t19 = /* @__PURE__ */ _jsxs(SidebarPressable, {
+			slot: "sidebar-menu-button",
+			href,
+			disabled,
+			target,
+			rel,
+			isActive,
+			ariaExpanded,
+			ariaLabel: collapsedLabel,
+			title: collapsedLabel,
+			onClick: select,
+			className: t6,
+			children: [
+				t7,
+				t8,
+				t16,
+				t17,
+				t18
+			]
+		});
+		$[35] = ariaExpanded;
+		$[36] = collapsedLabel;
+		$[37] = disabled;
+		$[38] = href;
+		$[39] = isActive;
+		$[40] = rel;
+		$[41] = select;
+		$[42] = t16;
+		$[43] = t17;
+		$[44] = t18;
+		$[45] = t6;
+		$[46] = t7;
+		$[47] = t8;
+		$[48] = target;
+		$[49] = t19;
+	} else {
+		t19 = $[49];
+	}
+	return t19;
 }
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
+export { Sidebar, SidebarBrandButton, SidebarClose, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar, useSidebarPanel };