@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/sidebar.js

@@ -0,0 +1,2041 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Application sidebar on the motion of Arc's sidebar rail: the rail springs its width without
+* overshoot, labels fade and drift out of the icon rail, the active item's highlight glides between
+* items, hovered items only change color, submenus open their height on the smooth spring, and
+* small screens get a focus-trapped sheet that slides in from its edge. Links route through the `AstraUIProvider` adapter and the open state keeps the
+* `sidebar_state` cookie contract read by server entrypoints.
+*/
+import * as React from "react";
+import { ChevronRight, PanelLeftIcon } from "lucide-react";
+import { Slot } from "radix-ui";
+import { AnimatePresence, motion, PresenceContext } from "motion/react";
+import { createPortal } from "react-dom";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
+import { useIsMobile } from "../hooks/use-mobile.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 { cn } from "../lib/utils.js";
+import { MOTION_EASE, MOTION_EASE_STANDARD, MOTION_TIMING, SPRING_CHEVRON, SPRING_LAYOUT, SPRING_PANEL } 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";
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_ICON = "4.25rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+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 (Arc). */
+const SIDEBAR_LABEL_DRIFT_PX = 6;
+/** Chevron rotation, in degrees, of an expanded group. */
+const SIDEBAR_CHEVRON_EXPANDED_DEGREES = 90;
+/** Arc's sidebar sheet slides in and out on the smooth spring. */
+const PANEL_TRANSITION = SPRING_PANEL;
+/** Arc's scrim fades on the standard duration. */
+const SCRIM_TRANSITION = {
+	duration: MOTION_TIMING.standard,
+	ease: MOTION_EASE
+};
+/**
+* The desktop rail settles at a hard zero-width boundary, and its width reports the panel state. Arc's smooth spring
+* is critically damped, so it cannot overshoot, pause against that boundary and snap back during the final frame.
+*/
+const SIDEBAR_MORPH_TRANSITION = SPRING_PANEL;
+/** Arc's labels come back once the rail has mostly opened. */
+const LABEL_ENTER_TRANSITION = {
+	duration: MOTION_TIMING.standard,
+	delay: .1,
+	ease: MOTION_EASE
+};
+/** Arc's labels leave quickly, before the rail finishes folding. */
+const LABEL_EXIT_TRANSITION = {
+	duration: .14,
+	ease: MOTION_EASE_STANDARD
+};
+const REDUCED_TRANSITION = {
+	duration: .16,
+	ease: MOTION_EASE
+};
+const INSTANT_TRANSITION = { duration: 0 };
+/** Arc's submenu opens its height on the smooth spring while its items fade in just behind it. */
+const SUBMENU_OPEN_TRANSITION = {
+	height: SPRING_PANEL,
+	opacity: {
+		duration: MOTION_TIMING.standard,
+		delay: .06,
+		ease: MOTION_EASE
+	}
+};
+/** Arc's submenu folds on the same spring and fades out faster than it came in. */
+const SUBMENU_CLOSE_TRANSITION = {
+	height: SPRING_PANEL,
+	opacity: {
+		duration: .14,
+		ease: MOTION_EASE_STANDARD
+	}
+};
+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) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+	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(57);
+	let children;
+	let className;
+	let onOpenChange;
+	let onOpenMobileChange;
+	let openMobileProp;
+	let openProp;
+	let props;
+	let storageKey;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== 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] = 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];
+		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 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 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);
+			}
+			onOpenChange?.(nextOpen);
+			saveSidebarPreference(storageKey, nextOpen);
+			saveSidebarCookie(nextOpen, cookieName, cookieMaxAge);
+		};
+		$[14] = cookieMaxAge;
+		$[15] = cookieName;
+		$[16] = onOpenChange;
+		$[17] = openProp;
+		$[18] = storageKey;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	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 {
+		t6 = $[22];
+	}
+	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 (typeof event.key === "string" && event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+					event.preventDefault();
+					toggleSidebar();
+				}
+			};
+			window.addEventListener("keydown", handleShortcut);
+			return () => window.removeEventListener("keydown", handleShortcut);
+		};
+		t9 = [toggleSidebar];
+		$[29] = toggleSidebar;
+		$[30] = t8;
+		$[31] = t9;
+	} else {
+		t8 = $[30];
+		t9 = $[31];
+	}
+	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,
+			state,
+			toggleSidebar,
+			triggerRef
+		};
+		$[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-width-mobile": mobileWidth,
+			...style
+		};
+		$[43] = mobileWidth;
+		$[44] = style;
+		$[45] = t12;
+	} else {
+		t12 = $[45];
+	}
+	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 {
+		t13 = $[47];
+	}
+	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
+		});
+		$[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,
+				paddingRight: body.style.paddingRight,
+				position: body.style.position,
+				right: body.style.right,
+				top: body.style.top
+			};
+			const clientWidthBeforeLock = document.documentElement.clientWidth;
+			const bodyPaddingRight = Number.parseFloat(getComputedStyle(body).paddingRight) || 0;
+			body.style.position = "fixed";
+			body.style.top = `-${scrollY}px`;
+			body.style.left = "0";
+			body.style.right = "0";
+			body.style.overflow = "hidden";
+			const scrollbarWidth = document.documentElement.clientWidth - clientWidthBeforeLock;
+			if (scrollbarWidth > 0) {
+				body.style.paddingRight = `${bodyPaddingRight + scrollbarWidth}px`;
+			}
+			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;
+				body.style.paddingRight = previousBodyStyles.paddingRight;
+				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.defaultPrevented || !panelRef.current?.contains(event.target)) {
+				return;
+			}
+			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 = $[12];
+	}
+	const t11 = reduce ? REDUCED_TRANSITION : SCRIM_TRANSITION;
+	let t12;
+	if ($[13] !== setOpenMobile) {
+		t12 = () => setOpenMobile(false);
+		$[13] = setOpenMobile;
+		$[14] = t12;
+	} else {
+		t12 = $[14];
+	}
+	const t13 = openMobile ? "pointer-events-auto" : "pointer-events-none";
+	let t14;
+	if ($[15] !== t13) {
+		t14 = cn("fixed inset-0 bg-black/40", t13);
+		$[15] = t13;
+		$[16] = t14;
+	} else {
+		t14 = $[16];
+	}
+	let t15;
+	if ($[17] !== t10 || $[18] !== t11 || $[19] !== t12 || $[20] !== t14 || $[21] !== t8) {
+		t15 = /* @__PURE__ */ _jsx(motion.button, {
+			type: "button",
+			"aria-label": "Close sidebar",
+			"data-slot": "sidebar-overlay",
+			tabIndex: t8,
+			initial: false,
+			animate: t10,
+			transition: t11,
+			onClick: t12,
+			className: t14
+		});
+		$[17] = t10;
+		$[18] = t11;
+		$[19] = t12;
+		$[20] = t14;
+		$[21] = t8;
+		$[22] = t15;
+	} else {
+		t15 = $[22];
+	}
+	const t16 = !openMobile;
+	const t17 = !openMobile;
+	const t18 = openMobile ? "expanded" : "collapsed";
+	const t19 = reduce ? openMobile ? 1 : 0 : 1;
+	const t20 = reduce ? 0 : openMobile ? "0%" : closedOffset;
+	let t21;
+	if ($[23] !== t19 || $[24] !== t20) {
+		t21 = {
+			opacity: t19,
+			x: t20
+		};
+		$[23] = t19;
+		$[24] = t20;
+		$[25] = t21;
+	} else {
+		t21 = $[25];
+	}
+	let t22;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = () => {
+			if (!openMobileRef.current) {
+				setHidden(true);
+			}
+		};
+		$[26] = t22;
+	} else {
+		t22 = $[26];
+	}
+	let t23;
+	if ($[27] !== mobileWidth) {
+		t23 = { "--sidebar-width-mobile": mobileWidth };
+		$[27] = mobileWidth;
+		$[28] = t23;
+	} else {
+		t23 = $[28];
+	}
+	const t24 = t23;
+	const t25 = side === "left" ? "left-0 border-r" : "right-0 border-l";
+	const t26 = !openMobile && "pointer-events-none";
+	let t27;
+	if ($[29] !== className || $[30] !== t25 || $[31] !== t26) {
+		t27 = 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", t25, t26, className);
+		$[29] = className;
+		$[30] = t25;
+		$[31] = t26;
+		$[32] = t27;
+	} else {
+		t27 = $[32];
+	}
+	let t28;
+	if ($[33] !== side) {
+		t28 = {
+			collapsed: false,
+			collapsible: "none",
+			side
+		};
+		$[33] = side;
+		$[34] = t28;
+	} else {
+		t28 = $[34];
+	}
+	let t29;
+	if ($[35] !== children || $[36] !== t28) {
+		t29 = /* @__PURE__ */ _jsx(SidebarPanelContext.Provider, {
+			value: t28,
+			children
+		});
+		$[35] = children;
+		$[36] = t28;
+		$[37] = t29;
+	} else {
+		t29 = $[37];
+	}
+	let t30;
+	if ($[38] !== ariaLabel || $[39] !== side || $[40] !== t16 || $[41] !== t17 || $[42] !== t18 || $[43] !== t21 || $[44] !== t24 || $[45] !== t27 || $[46] !== t29 || $[47] !== transition || $[48] !== trapFocus) {
+		t30 = /* @__PURE__ */ _jsx(motion.div, {
+			ref: panelRef,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": ariaLabel,
+			"aria-hidden": t16,
+			inert: t17,
+			tabIndex: -1,
+			"data-slot": "sidebar",
+			"data-mobile": "true",
+			"data-state": t18,
+			"data-side": side,
+			initial: false,
+			animate: t21,
+			transition,
+			onAnimationComplete: t22,
+			onKeyDown: trapFocus,
+			style: t24,
+			className: t27,
+			children: t29
+		});
+		$[38] = ariaLabel;
+		$[39] = side;
+		$[40] = t16;
+		$[41] = t17;
+		$[42] = t18;
+		$[43] = t21;
+		$[44] = t24;
+		$[45] = t27;
+		$[46] = t29;
+		$[47] = transition;
+		$[48] = trapFocus;
+		$[49] = t30;
+	} else {
+		t30 = $[49];
+	}
+	let t31;
+	if ($[50] !== t15 || $[51] !== t30 || $[52] !== t7) {
+		t31 = createPortal(/* @__PURE__ */ _jsxs("div", {
+			className: t7,
+			children: [t15, t30]
+		}), document.body);
+		$[50] = t15;
+		$[51] = t30;
+		$[52] = t7;
+		$[53] = t31;
+	} else {
+		t31 = $[53];
+	}
+	return t31;
+}
+/**
+* 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(55);
+	let children;
+	let className;
+	let panelClassName;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({side: t1, variant: t2, collapsible: t3, ariaLabel: t4, children, className, panelClassName, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = panelClassName;
+		$[4] = props;
+		$[5] = style;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		children = $[1];
+		className = $[2];
+		panelClassName = $[3];
+		props = $[4];
+		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 ? "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] !== ariaLabel || $[11] !== children || $[12] !== className || $[13] !== side) {
+			t5 = /* @__PURE__ */ _jsx(MobileSidebar, {
+				ariaLabel,
+				className,
+				side,
+				children
+			});
+			$[10] = ariaLabel;
+			$[11] = children;
+			$[12] = className;
+			$[13] = side;
+			$[14] = t5;
+		} else {
+			t5 = $[14];
+		}
+		return t5;
+	}
+	const t5 = collapsed ? "collapsed" : "expanded";
+	let t6;
+	if ($[15] !== width) {
+		t6 = { width };
+		$[15] = width;
+		$[16] = t6;
+	} else {
+		t6 = $[16];
+	}
+	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 {
+		t21 = $[34];
+	}
+	let t22;
+	if ($[35] !== children || $[36] !== t21) {
+		t22 = /* @__PURE__ */ _jsx(SidebarPanelContext.Provider, {
+			value: t21,
+			children
+		});
+		$[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
+		});
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t20;
+		$[41] = t22;
+		$[42] = t23;
+	} else {
+		t23 = $[42];
+	}
+	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,
+			animate: t6,
+			transition: t7,
+			style,
+			className: t10,
+			children: t23
+		});
+		$[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" })
+	});
+}
+/**
+* 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, type: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = onClick;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		onClick = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	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);
+			if (event.defaultPrevented) {
+				return;
+			}
+			if (context.isMobile) {
+				context.setOpenMobile(false);
+			} else {
+				context.setOpen(false);
+			}
+		};
+		$[5] = context;
+		$[6] = onClick;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	let 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 {
+		t4 = $[9];
+	}
+	let t5;
+	if ($[10] !== props || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== type) {
+		t5 = /* @__PURE__ */ _jsx("button", {
+			...props,
+			type,
+			"aria-label": t2,
+			"data-slot": "sidebar-close",
+			onClick: t3,
+			className: t4
+		});
+		$[10] = props;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = type;
+		$[15] = t5;
+	} else {
+		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(17);
+	let className;
+	let onClick;
+	let props;
+	let t1;
+	if ($[0] !== 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 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 {
+		t4 = $[7];
+	}
+	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",
+			"data-side": t2,
+			"aria-label": t3,
+			title: "Toggle sidebar",
+			tabIndex: -1,
+			onClick: t4,
+			className: t5
+		});
+		$[10] = panel.side;
+		$[11] = props;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = type;
+		$[16] = t6;
+	} else {
+		t6 = $[16];
+	}
+	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;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== 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 {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(motion.main, {
+			...props,
+			"data-slot": "sidebar-inset",
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+function SidebarHeader(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("flex shrink-0 flex-col gap-2 p-3", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			"data-slot": "sidebar-header",
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+function SidebarContent(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== 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 {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			"data-slot": "sidebar-content",
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+function SidebarFooter(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== 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 {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			"data-slot": "sidebar-footer",
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* 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) {
+		({asChild: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const asChild = t1 === undefined ? false : t1;
+	const { collapsed } = useSidebarPanel();
+	if (collapsed) {
+		return null;
+	}
+	const Component = asChild ? Slot.Root : "span";
+	let t2;
+	if ($[3] !== Component || $[4] !== props) {
+		t2 = /* @__PURE__ */ _jsx(Component, {
+			"data-slot": "sidebar-label",
+			...props
+		});
+		$[3] = Component;
+		$[4] = props;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	return t2;
+}
+/**
+* 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) {
+		({icon, trailing, children, className, type: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = icon;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = trailing;
+	} else {
+		children = $[1];
+		className = $[2];
+		icon = $[3];
+		props = $[4];
+		t1 = $[5];
+		trailing = $[6];
+	}
+	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-medium 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 {
+		t4 = $[8];
+	}
+	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
+		});
+		$[9] = icon;
+		$[10] = t5;
+	} else {
+		t5 = $[10];
+	}
+	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);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("flex w-full min-w-0 flex-col px-1 py-1.5", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			"data-slot": "sidebar-group",
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	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;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { collapsed } = useSidebarPanel();
+	const t1 = collapsed ? "opacity-0" : "opacity-100";
+	let t2;
+	if ($[3] !== className || $[4] !== t1) {
+		t2 = cn("mb-1 h-7 overflow-hidden px-2 text-xs font-medium text-sidebar-foreground/70 transition-opacity", t1, className);
+		$[3] = className;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== collapsed || $[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			"aria-hidden": collapsed,
+			"data-slot": "sidebar-group-label",
+			className: t2
+		});
+		$[6] = collapsed;
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	return t3;
+}
+function SidebarGroupContent(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("w-full min-w-0", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			"data-slot": "sidebar-group-content",
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/** Menu list; hovered items answer in color, as in Arc's sidebar rail. */
+function SidebarMenu(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("flex w-full min-w-0 list-none flex-col gap-0.5", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("ul", {
+			...props,
+			"data-slot": "sidebar-menu",
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+function SidebarMenuItem(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("relative", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(motion.li, {
+			...props,
+			"data-slot": "sidebar-menu-item",
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* Height-animated wrapper of an open submenu. It clips overflow only while the height or the fade
+* runs, so the outward focus ring of its items is not cut once the submenu settles.
+* @param props - Reduced motion flag and the submenu list.
+* @returns The animated wrapper.
+*/
+function SidebarMenuSubRegion(t0) {
+	const $ = _c(14);
+	const { reduce, children } = t0;
+	const isMountedWithoutEntrance = React.useContext(PresenceContext)?.initial === false;
+	const [isSettled, setIsSettled] = React.useState(isMountedWithoutEntrance);
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== reduce) {
+		t1 = reduce ? { opacity: 0 } : {
+			height: 0,
+			opacity: 0
+		};
+		t2 = reduce ? { opacity: 1 } : {
+			height: "auto",
+			opacity: 1,
+			transition: SUBMENU_OPEN_TRANSITION
+		};
+		t3 = reduce ? { opacity: 0 } : {
+			height: 0,
+			opacity: 0,
+			transition: SUBMENU_CLOSE_TRANSITION
+		};
+		t4 = reduce ? { duration: MOTION_TIMING.exit } : undefined;
+		$[0] = reduce;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+		$[4] = t4;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+		t3 = $[3];
+		t4 = $[4];
+	}
+	const t5 = isSettled ? "overflow-visible" : "overflow-hidden";
+	let t6;
+	let t7;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => setIsSettled(false);
+		t7 = () => setIsSettled(true);
+		$[5] = t6;
+		$[6] = t7;
+	} else {
+		t6 = $[5];
+		t7 = $[6];
+	}
+	let t8;
+	if ($[7] !== children || $[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t4 || $[12] !== t5) {
+		t8 = /* @__PURE__ */ _jsx(motion.div, {
+			initial: t1,
+			animate: t2,
+			exit: t3,
+			transition: t4,
+			className: t5,
+			onAnimationStart: t6,
+			onAnimationComplete: t7,
+			children
+		});
+		$[7] = children;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t8;
+	} else {
+		t8 = $[13];
+	}
+	return t8;
+}
+/**
+* Nested list that opens its height on Arc's smooth spring.
+* @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;
+	if ($[0] !== t0) {
+		({open, children, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = open;
+		$[4] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		open = $[3];
+		props = $[4];
+	}
+	const context = useSidebar();
+	const panel = useSidebarPanel();
+	let t1;
+	if ($[5] !== children || $[6] !== className || $[7] !== context || $[8] !== open || $[9] !== panel || $[10] !== props) {
+		t1 = open && !panel.collapsed ? /* @__PURE__ */ _jsx(SidebarMenuSubRegion, {
+			reduce: context.reduce,
+			children: /* @__PURE__ */ _jsx(motion.ul, {
+				...props,
+				"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
+			})
+		}, "sidebar-submenu") : null;
+		$[5] = children;
+		$[6] = className;
+		$[7] = context;
+		$[8] = open;
+		$[9] = panel;
+		$[10] = props;
+		$[11] = t1;
+	} else {
+		t1 = $[11];
+	}
+	let t2;
+	if ($[12] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t1
+		});
+		$[12] = t1;
+		$[13] = t2;
+	} else {
+		t2 = $[13];
+	}
+	return t2;
+}
+function SidebarMenuSubItem(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("relative min-w-0", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(motion.li, {
+			...props,
+			"data-slot": "sidebar-menu-sub-item",
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/** Renders a menu action as a routed link or a button, both with the subtle press feedback. */
+function SidebarPressable(t0) {
+	const $ = _c(16);
+	const { slot, href, disabled, target, rel, isActive, ariaExpanded, ariaLabel, title, className, children, onClick } = t0;
+	const t1 = isActive ? "page" : undefined;
+	let 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 = $[8];
+	}
+	const sharedProps = t2;
+	let t3;
+	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
+		});
+		$[9] = children;
+		$[10] = disabled;
+		$[11] = href;
+		$[12] = rel;
+		$[13] = sharedProps;
+		$[14] = target;
+		$[15] = t3;
+	} else {
+		t3 = $[15];
+	}
+	const element = t3;
+	return element;
+}
+/**
+* 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 {
+		t4 = $[4];
+	}
+	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 {
+		t7 = $[8];
+	}
+	let t8;
+	if ($[9] !== icon) {
+		t8 = icon ?? /* @__PURE__ */ _jsx("span", { className: "size-1 rounded-full bg-current" });
+		$[9] = icon;
+		$[10] = t8;
+	} else {
+		t8 = $[10];
+	}
+	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 {
+		t9 = $[12];
+	}
+	let t10;
+	if ($[13] !== children) {
+		t10 = /* @__PURE__ */ _jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children
+		});
+		$[13] = children;
+		$[14] = t10;
+	} else {
+		t10 = $[14];
+	}
+	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]
+		});
+		$[15] = disabled;
+		$[16] = href;
+		$[17] = isActive;
+		$[18] = rel;
+		$[19] = select;
+		$[20] = t10;
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = target;
+		$[24] = t11;
+	} else {
+		t11 = $[24];
+	}
+	return t11;
+}
+/**
+* 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] !== 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 {
+		t3 = $[6];
+	}
+	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 hover-fine:bg-sidebar-accent/70", "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 {
+		t6 = $[10];
+	}
+	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 {
+		t7 = $[14];
+	}
+	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_CHEVRON,
+			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, SidebarBrandButton, SidebarClose, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar, useSidebarPanel };