@datum-cloud/datum-ui 0.2.0-alpha.3 → 0.2.0-alpha.5

package/dist/sidebar-DfqezV8t.mjs

@@ -0,0 +1,945 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as Separator } from "./separator-T2ppyD-8.mjs";
+import { t as Button } from "./button-AzpnV-WB.mjs";
+import { t as Icon } from "./icon-wrapper-9ticVbRL.mjs";
+import { n as CollapsibleContent, r as CollapsibleTrigger, t as Collapsible } from "./collapsible-Bt9UYfv3.mjs";
+import { t as Input } from "./input-fzXBheCN.mjs";
+import { a as SheetHeader, n as SheetContent, o as SheetTitle, r as SheetDescription, t as Sheet } from "./sheet-CtnP6gTD.mjs";
+import { t as Skeleton } from "./skeleton-vzbxA-DQ.mjs";
+import { i as TooltipProvider, t as Tooltip } from "./tooltip-Dd3ActSS.mjs";
+import { cva } from "class-variance-authority";
+import { ChevronRight, ExternalLinkIcon, PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react";
+import * as React$1 from "react";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { motion } from "motion/react";
+
+//#region src/components/features/sidebar/nav-main.tsx
+const NAV_STYLES = {
+	menuButton: "rounded-xl h-8 font-normal text-xs transition-all px-2 py-1 data-[active=true]:bg-sidebar data-[active=true]:text-foreground data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:text-primary hover:bg-sidebar hover:text-sidebar-primary hover:[&>svg]:text-sidebar-primary hover:bg-sidebar-accent data-[active=true]:bg-sidebar-accent hover:font-semibold data-[active=true]:hover:[&>svg]:text-sidebar-primary transition-colors duration-300 gap-2.5 text-foreground [&>svg]:text-icon-primary",
+	disabled: "pointer-events-none opacity-50",
+	icon: "duration-300 transition-all",
+	iconSmall: "size-4 duration-300 transition-all"
+};
+function NavIcon({ icon: IconComponent, className, size = "default" }) {
+	if (!IconComponent) return null;
+	return /* @__PURE__ */ jsx(Icon, {
+		icon: IconComponent,
+		className: cn(size === "small" ? NAV_STYLES.iconSmall : NAV_STYLES.icon, className)
+	});
+}
+NavIcon.displayName = "NavIcon";
+function NavSidebarMenuButton({ ref, item, isActive, disableTooltip, className, children, asChild, ...props }) {
+	return /* @__PURE__ */ jsx(SidebarMenuButton, {
+		ref,
+		tooltip: disableTooltip ? void 0 : item.title,
+		isActive,
+		disabled: item.disabled,
+		asChild,
+		className: cn(NAV_STYLES.menuButton, item.disabled && NAV_STYLES.disabled, className),
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(NavIcon, { icon: item.icon }), children] })
+	});
+}
+NavSidebarMenuButton.displayName = "NavSidebarMenuButton";
+function NavMain({ ref, className, items, currentPath, linkComponent: LinkComp = "a", overrideState, itemClassName, disableTooltip, closeOnNavigation, ...props }) {
+	const pathname = currentPath;
+	const { state: sidebarState, isMobile, closeForNavigation, setOpen } = useSidebar();
+	const [openItems, setOpenItems] = useState({});
+	const isInitialMount = useRef(true);
+	const previousOpenItems = useRef({});
+	const previousPathname = useRef(pathname);
+	const state = overrideState ?? sidebarState;
+	const previousState = useRef(state);
+	useEffect(() => {
+		previousOpenItems.current = openItems;
+		if (isInitialMount.current) isInitialMount.current = false;
+	}, [openItems]);
+	useEffect(() => {
+		previousPathname.current = pathname;
+	}, [pathname]);
+	const activeNavItem = useCallback((item) => {
+		const normalize = (p) => {
+			let result = p.startsWith("/") ? p : `/${p}`;
+			if (result !== "/" && result.endsWith("/")) result = result.slice(0, -1);
+			return result;
+		};
+		const cleanCurrentPath = normalize(pathname);
+		if (!item.href) return false;
+		const cleanNavPath = normalize(item.href);
+		if (cleanNavPath === "/") return cleanCurrentPath === "/";
+		const hasActiveDescendant = (navItem) => {
+			if (!navItem.children || navItem.children.length === 0) return false;
+			return navItem.children.some((child) => {
+				if (!child.href) return hasActiveDescendant(child);
+				const cleanChildPath = normalize(child.href);
+				if (cleanCurrentPath === cleanChildPath || cleanCurrentPath.startsWith(`${cleanChildPath}/`)) return true;
+				return hasActiveDescendant(child);
+			});
+		};
+		if ((item.children || []).length > 0) {
+			if (hasActiveDescendant(item)) return false;
+			return cleanCurrentPath === cleanNavPath;
+		}
+		const isExcluded = item.excludePaths?.some((excludePath) => {
+			const cleanExcludePath = normalize(excludePath);
+			return cleanCurrentPath === cleanExcludePath || cleanCurrentPath.startsWith(`${cleanExcludePath}/`);
+		}) ?? false;
+		const isDirectMatch = cleanCurrentPath === cleanNavPath || !isExcluded && cleanCurrentPath.startsWith(`${cleanNavPath}/`);
+		const isTabChildMatch = item.tabChildLinks?.some((childPath) => {
+			const cleanChildPath = normalize(childPath);
+			return cleanCurrentPath === cleanChildPath || cleanCurrentPath.startsWith(`${cleanChildPath}/`);
+		}) ?? false;
+		return isDirectMatch || isTabChildMatch;
+	}, [pathname]);
+	const hasActiveDescendant = useCallback((item) => {
+		if (activeNavItem(item)) return true;
+		if (item.children) return item.children.some((child) => hasActiveDescendant(child));
+		return false;
+	}, [activeNavItem]);
+	const findItemByHref = useCallback((href, items) => {
+		for (const item of items) {
+			if (item.href === href) return item;
+			if (item.children) {
+				const found = findItemByHref(href, item.children);
+				if (found) return found;
+			}
+		}
+		return null;
+	}, []);
+	useEffect(() => {
+		if (previousState.current === "expanded" && state === "collapsed") setOpenItems((prev) => {
+			const newOpenItems = {};
+			Object.keys(prev).forEach((itemHref) => {
+				const item = findItemByHref(itemHref, items);
+				if (item && hasActiveDescendant(item)) newOpenItems[itemHref] = true;
+			});
+			return newOpenItems;
+		});
+		previousState.current = state;
+	}, [
+		state,
+		items,
+		hasActiveDescendant,
+		findItemByHref
+	]);
+	const toggleItem = (itemId) => {
+		setOpenItems((prev) => ({
+			...prev,
+			[itemId]: !prev[itemId]
+		}));
+	};
+	const handleNavigation = useCallback(() => {
+		if (closeOnNavigation && !isMobile) closeForNavigation();
+	}, [
+		closeOnNavigation,
+		isMobile,
+		closeForNavigation
+	]);
+	const renderNavItem = (item, level = 0) => {
+		if ("hidden" in item && item.hidden) return null;
+		const itemKey = `${item.title}-${item.href || ""}-${level}`;
+		if ("type" in item && item.type === "group") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarGroup, {
+			className: "mb-2 p-0! px-2",
+			children: [item.title && /* @__PURE__ */ jsx(SidebarGroupLabel, {
+				className: "lowercase group-data-[state=collapsed]:hidden first-letter:uppercase",
+				children: item.title
+			}), /* @__PURE__ */ jsx(SidebarGroupContent, {
+				className: "flex flex-col gap-1",
+				children: (item.children || []).map((child) => renderNavItem(child, level + 1))
+			})]
+		}), /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2 hidden group-data-[state=collapsed]:block" })] }, itemKey);
+		const isActive = activeNavItem(item);
+		const pathnameExistInDropdowns = item.children?.filter((dropdownItem) => pathname.includes(dropdownItem.href)) || [];
+		const hasChildren = (item.children || []).length > 0;
+		const isOpen = openItems[item.href] !== void 0 ? openItems[item.href] : Boolean(pathnameExistInDropdowns.length);
+		const hasActiveChild = pathnameExistInDropdowns.length > 0;
+		if (state === "collapsed" && !isMobile && level <= 2 && hasChildren) return /* @__PURE__ */ jsxs(Fragment, { children: [
+			item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-1" }),
+			/* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col px-2",
+				children: [/* @__PURE__ */ jsx(NavSidebarMenuButton, {
+					item,
+					isActive,
+					disableTooltip,
+					className: itemClassName,
+					onClick: () => {
+						setOpen(true);
+						if (item.href) setOpenItems((prev) => ({
+							...prev,
+							[item.href]: true
+						}));
+					}
+				}), hasActiveChild && /* @__PURE__ */ jsx(motion.div, {
+					variants: {
+						hidden: { opacity: 0 },
+						visible: {
+							opacity: 1,
+							transition: {
+								staggerChildren: .05,
+								delayChildren: .1
+							}
+						}
+					},
+					initial: "hidden",
+					animate: "visible",
+					className: "flex flex-col gap-0.5",
+					children: item.children?.map((subItem) => {
+						const isSubItemActive = activeNavItem(subItem);
+						return /* @__PURE__ */ jsx(motion.div, {
+							variants: {
+								hidden: { opacity: 0 },
+								visible: {
+									opacity: 1,
+									transition: {
+										duration: .2,
+										ease: "easeOut"
+									}
+								}
+							},
+							children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+								tooltip: subItem.title,
+								isActive: isSubItemActive,
+								className: "h-6 p-0 group-data-[collapsible=icon]:h-6! group-data-[collapsible=icon]:p-0!",
+								asChild: true,
+								children: /* @__PURE__ */ jsx(LinkComp, {
+									className: "flex items-center justify-center",
+									...LinkComp === "a" ? { href: subItem.href || "" } : { to: subItem.href || "" },
+									onClick: () => {
+										handleNavigation();
+									},
+									children: /* @__PURE__ */ jsx("span", { className: cn("size-1 rounded-full", isSubItemActive ? "bg-primary" : "bg-sidebar-primary-foreground") })
+								})
+							})
+						}, `collapsed-dot-${subItem.href}-${level}`);
+					})
+				})]
+			}) }),
+			item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
+		] }, itemKey);
+		if (hasChildren && level <= 3) return /* @__PURE__ */ jsxs(Fragment, { children: [
+			item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
+			/* @__PURE__ */ jsx(SidebarMenu, {
+				className: "px-2",
+				children: /* @__PURE__ */ jsx(Collapsible, {
+					asChild: true,
+					open: isOpen,
+					onOpenChange: (open) => {
+						if (item.href) setOpenItems((prev) => ({
+							...prev,
+							[item.href]: open
+						}));
+					},
+					className: "group/collapsible",
+					children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+						asChild: true,
+						className: "w-full",
+						children: /* @__PURE__ */ jsxs(NavSidebarMenuButton, {
+							item,
+							isActive,
+							disableTooltip,
+							className: itemClassName,
+							children: [/* @__PURE__ */ jsx("span", { children: item.title }), /* @__PURE__ */ jsx(Icon, {
+								icon: ChevronRight,
+								className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+							})]
+						})
+					}), /* @__PURE__ */ jsx(CollapsibleContent, {
+						className: "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden",
+						children: /* @__PURE__ */ jsx("div", {
+							style: {
+								minHeight: 0,
+								overflow: "hidden"
+							},
+							children: /* @__PURE__ */ jsx(motion.div, {
+								variants: {
+									hidden: { opacity: 0 },
+									visible: {
+										opacity: 1,
+										transition: {
+											staggerChildren: .05,
+											delayChildren: .1
+										}
+									}
+								},
+								initial: isInitialMount.current || previousOpenItems.current[item.href] === openItems[item.href] && previousState.current === state && previousPathname.current === pathname && !hasActiveChild ? "visible" : "hidden",
+								animate: isOpen ? "visible" : "hidden",
+								children: /* @__PURE__ */ jsx(SidebarMenuSub, {
+									className: cn(level >= 1 ? "mr-0 pr-[.1rem]" : "", level === 2 ? "pl-4" : "", level === 3 ? "pl-6" : "", "mr-0 gap-0.5 pr-0"),
+									children: item.children?.map((subItem, index) => /* @__PURE__ */ jsx(motion.div, {
+										variants: {
+											hidden: { opacity: 0 },
+											visible: {
+												opacity: 1,
+												transition: {
+													duration: .2,
+													ease: "easeOut"
+												}
+											}
+										},
+										children: renderNavItem(subItem, level + 1)
+									}, `${subItem.href}-${level}-${index}`))
+								})
+							}, `collapsible-${item.href}-${isOpen}`)
+						})
+					})] })
+				}, `collapsed-item-drop-down-item-${item.title}-${level}`)
+			}),
+			item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
+		] }, itemKey);
+		const renderCollapsible = (currentItem, currentLevel) => {
+			const currentItemIsActive = activeNavItem(currentItem);
+			const currentItemPathnameExistInDropdowns = currentItem.children?.filter((dropdownItem) => pathname.includes(dropdownItem.href)) || [];
+			return /* @__PURE__ */ jsx(Collapsible, {
+				asChild: true,
+				open: openItems[currentItem.href] || Boolean(currentItemPathnameExistInDropdowns.length),
+				onOpenChange: (open) => {
+					if (currentItem.href) setOpenItems((prev) => ({
+						...prev,
+						[currentItem.href]: open
+					}));
+				},
+				className: "group/collapsible",
+				children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+					asChild: true,
+					className: "w-full",
+					children: /* @__PURE__ */ jsxs(NavSidebarMenuButton, {
+						item: currentItem,
+						isActive: currentItemIsActive,
+						disableTooltip,
+						className: itemClassName,
+						children: [/* @__PURE__ */ jsx("span", { children: currentItem.title }), /* @__PURE__ */ jsx(Icon, {
+							icon: ChevronRight,
+							className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+						})]
+					})
+				}), /* @__PURE__ */ jsx(CollapsibleContent, {
+					className: "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden",
+					children: /* @__PURE__ */ jsx("div", {
+						style: {
+							minHeight: 0,
+							overflow: "hidden"
+						},
+						children: /* @__PURE__ */ jsx(SidebarMenuSub, {
+							className: cn(currentLevel >= 1 ? "mr-0 pr-[.1rem]" : "", "gap-0.5"),
+							children: currentItem.children?.map((subItem) => renderNavItem(subItem, currentLevel + 1))
+						})
+					})
+				})] }, `collapsible-sidebar-${currentItem.title}-${currentLevel}`)
+			}, `collapsed-item-drop-down-item-${currentItem.title}-${currentLevel}`);
+		};
+		if (level <= 2 && hasChildren) return /* @__PURE__ */ jsxs(Fragment, { children: [
+			item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
+			/* @__PURE__ */ jsx(SidebarMenu, {
+				className: "px-2",
+				children: renderCollapsible(item, level)
+			}),
+			item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
+		] }, itemKey);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
+			/* @__PURE__ */ jsx(SidebarMenu, {
+				className: cn(`level_${level} px-2`),
+				children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(NavSidebarMenuButton, {
+					asChild: true,
+					item,
+					isActive: isActive && !hasActiveChild,
+					disableTooltip,
+					onClick: () => hasChildren && toggleItem(item.href),
+					className: cn(level >= 1 && "h-6", itemClassName),
+					children: item.type === "externalLink" ? /* @__PURE__ */ jsxs("a", {
+						href: item.href || "",
+						target: "_blank",
+						rel: "noopener noreferrer",
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [item?.icon && /* @__PURE__ */ jsx(Icon, {
+								icon: item.icon,
+								className: "size-4 transition-all duration-300"
+							}), /* @__PURE__ */ jsx("span", { children: item.title })]
+						}), /* @__PURE__ */ jsx(Icon, {
+							icon: ExternalLinkIcon,
+							className: "ml-auto size-4"
+						})]
+					}) : /* @__PURE__ */ jsxs(LinkComp, {
+						...LinkComp === "a" ? { href: item.href || "" } : { to: item.href || "" },
+						onClick: handleNavigation,
+						onMouseEnter: () => item.onPrefetch?.(),
+						children: [item?.icon && /* @__PURE__ */ jsx(Icon, {
+							icon: item.icon,
+							className: "text-sidebar-primary transition-all duration-300"
+						}), /* @__PURE__ */ jsx("span", { children: item.title })]
+					})
+				}) })
+			}),
+			item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
+		] }, itemKey);
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		"data-sidebar": "menu",
+		className: cn("flex h-full w-full min-w-0 flex-col gap-0.5 py-2", className),
+		...props,
+		children: (items || []).map((item) => renderNavItem(item))
+	});
+}
+NavMain.displayName = "NavMain";
+
+//#endregion
+//#region src/components/features/sidebar/app-sidebar.tsx
+function AppSidebar({ navItems, title, closeOnNavigation, defaultOpen, currentPath, linkComponent, ...props }) {
+	const { setOpen } = useSidebar();
+	useEffect(() => {
+		if (defaultOpen === false) setOpen(false);
+	}, [defaultOpen, setOpen]);
+	return /* @__PURE__ */ jsx(Sidebar, {
+		collapsible: props.collapsible ?? "offcanvas",
+		...props,
+		children: /* @__PURE__ */ jsxs(SidebarContent, {
+			className: "gap-0",
+			children: [
+				title && /* @__PURE__ */ jsx(SidebarHeader, {
+					className: "px-4 pt-4 pb-0",
+					children: title
+				}),
+				navItems.length > 0 && /* @__PURE__ */ jsx(NavMain, {
+					className: "h-fit py-2",
+					items: navItems,
+					currentPath,
+					linkComponent,
+					closeOnNavigation
+				}),
+				props.collapsible !== "none" && /* @__PURE__ */ jsx(SidebarFooter, {
+					className: "mt-auto p-2",
+					children: /* @__PURE__ */ jsx(SidebarTrigger, {})
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region ../shadcn/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React$1.useState(void 0);
+	React$1.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+
+//#endregion
+//#region src/components/features/sidebar/sidebar.tsx
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
+const SIDEBAR_WIDTH = "13rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SidebarContext = React$1.createContext(null);
+function useSidebar() {
+	const context = React$1.use(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+}
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, expandOnHover = false, expandBehavior = "push", showBackdrop = false, className, style, children, ...props }) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React$1.useState(false);
+	const [isHovered, setIsHovered] = React$1.useState(false);
+	const [hasSubLayout, setHasSubLayout] = React$1.useState(false);
+	const hoverTimeoutRef = React$1.useRef(null);
+	const hoverLockRef = React$1.useRef(false);
+	const userClosedSidebarRef = React$1.useRef(false);
+	const [_open, _setOpen] = React$1.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const LG_BREAKPOINT = 1024;
+	React$1.useLayoutEffect(() => {
+		if (isMobile) {
+			_setOpen(false);
+			setOpenMobile(false);
+		} else if (window.innerWidth < LG_BREAKPOINT) _setOpen(false);
+	}, [isMobile]);
+	React$1.useEffect(() => {
+		if (isMobile) userClosedSidebarRef.current = false;
+	}, [isMobile]);
+	React$1.useEffect(() => {
+		if (isMobile) return;
+		const mql = window.matchMedia(`(min-width: ${LG_BREAKPOINT}px)`);
+		const onChange = () => {
+			if (window.innerWidth >= LG_BREAKPOINT) {
+				if (!userClosedSidebarRef.current) _setOpen(true);
+			} else _setOpen(false);
+		};
+		mql.addEventListener("change", onChange);
+		return () => mql.removeEventListener("change", onChange);
+	}, [isMobile]);
+	const setOpen = React$1.useCallback((value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (setOpenProp) setOpenProp(openState);
+		else _setOpen(openState);
+		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	}, [setOpenProp, open]);
+	const handleMouseEnter = React$1.useCallback(() => {
+		if (!expandOnHover) return;
+		if (hoverLockRef.current) return;
+		if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+		setIsHovered(true);
+	}, [expandOnHover]);
+	const handleMouseLeave = React$1.useCallback(() => {
+		if (!expandOnHover) return;
+		const delay = expandBehavior === "overlay" ? 200 : 300;
+		hoverTimeoutRef.current = setTimeout(() => {
+			setIsHovered(false);
+		}, delay);
+	}, [expandOnHover, expandBehavior]);
+	const toggleSidebar = React$1.useCallback(() => {
+		if (isMobile) {
+			setOpenMobile((current) => !current);
+			return;
+		}
+		const newState = !open;
+		if (!newState) userClosedSidebarRef.current = true;
+		else userClosedSidebarRef.current = false;
+		setOpen(newState);
+		if (!newState && expandOnHover) {
+			setIsHovered(false);
+			if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+		}
+	}, [
+		isMobile,
+		setOpen,
+		open,
+		setOpenMobile,
+		expandOnHover
+	]);
+	const forceClose = React$1.useCallback(() => {
+		if (isMobile) {
+			setOpenMobile(false);
+			return;
+		}
+		userClosedSidebarRef.current = true;
+		setOpen(false);
+		setIsHovered(false);
+		if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+	}, [
+		isMobile,
+		setOpen,
+		setOpenMobile
+	]);
+	const closeForNavigation = React$1.useCallback(() => {
+		if (isMobile) {
+			setOpenMobile(false);
+			return;
+		}
+		setOpen(false);
+		setIsHovered(false);
+		if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+		hoverLockRef.current = true;
+		setTimeout(() => {
+			hoverLockRef.current = false;
+		}, 300);
+	}, [
+		isMobile,
+		setOpen,
+		setOpenMobile
+	]);
+	React$1.useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+	const effectiveOpen = open || expandOnHover && isHovered;
+	const state = effectiveOpen ? "expanded" : "collapsed";
+	return /* @__PURE__ */ jsx(SidebarContext, {
+		value: React$1.useMemo(() => ({
+			state,
+			open: effectiveOpen,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+			handleMouseEnter,
+			handleMouseLeave,
+			forceClose,
+			closeForNavigation,
+			hasSubLayout,
+			setHasSubLayout,
+			expandBehavior,
+			showBackdrop
+		}), [
+			state,
+			effectiveOpen,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+			handleMouseEnter,
+			handleMouseLeave,
+			forceClose,
+			closeForNavigation,
+			hasSubLayout,
+			setHasSubLayout,
+			expandBehavior,
+			showBackdrop
+		]),
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delayDuration: 0,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "sidebar-wrapper",
+				style: {
+					"--sidebar-width": SIDEBAR_WIDTH,
+					"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+					...style
+				},
+				className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
+				...props,
+				children
+			})
+		})
+	});
+}
+function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
+	const { isMobile, state, openMobile, setOpenMobile, handleMouseEnter, handleMouseLeave, expandBehavior, showBackdrop, forceClose } = useSidebar();
+	const sidebarRef = React$1.useRef(null);
+	const [showBackdropElement, setShowBackdropElement] = React$1.useState(false);
+	const [backdropVisible, setBackdropVisible] = React$1.useState(false);
+	React$1.useEffect(() => {
+		if (showBackdrop && expandBehavior === "overlay" && state === "expanded") {
+			setShowBackdropElement(true);
+			requestAnimationFrame(() => {
+				setBackdropVisible(true);
+			});
+		} else {
+			setBackdropVisible(false);
+			const timer = setTimeout(() => {
+				setShowBackdropElement(false);
+			}, 200);
+			return () => clearTimeout(timer);
+		}
+	}, [
+		showBackdrop,
+		expandBehavior,
+		state
+	]);
+	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar",
+		className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", side === "left" ? "border-r" : "border-l", className),
+		...props,
+		children
+	});
+	if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
+		open: openMobile,
+		onOpenChange: setOpenMobile,
+		...props,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			"data-sidebar": "sidebar",
+			"data-slot": "sidebar",
+			"data-mobile": "true",
+			onOpenAutoFocus: (e) => e.preventDefault(),
+			className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			side,
+			children: [/* @__PURE__ */ jsxs(SheetHeader, {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full flex-col",
+				children
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group peer text-sidebar-foreground hidden md:block",
+		"data-state": state,
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-variant": variant,
+		"data-side": side,
+		"data-slot": "sidebar",
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", expandBehavior === "overlay" ? variant === "floating" || variant === "inset" ? "w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "w-(--sidebar-width-icon)" : variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }),
+			/* @__PURE__ */ jsx("div", {
+				ref: sidebarRef,
+				className: cn("border-sidebar-border fixed inset-y-0 hidden w-(--sidebar-width) transition-[left,right,width] duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] md:flex", expandBehavior === "overlay" ? "z-50" : "z-10", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", 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", className),
+				...props,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-sidebar": "sidebar",
+					className: cn("bg-sidebar flex h-full w-full flex-col", "group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm", expandBehavior === "overlay" && state === "expanded" && "shadow-lg"),
+					children
+				})
+			}),
+			showBackdropElement && /* @__PURE__ */ jsx("div", {
+				className: cn("fixed inset-0 z-40 hidden bg-black/50 transition-opacity duration-200 ease-in-out md:block", backdropVisible ? "opacity-100" : "opacity-0"),
+				onMouseEnter: () => forceClose(),
+				onClick: () => forceClose(),
+				"aria-hidden": "true"
+			})
+		]
+	});
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+	const { toggleSidebar, open } = useSidebar();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		message: open ? "Close Sidebar" : "Open Sidebar",
+		side: "right",
+		align: "center",
+		delayDuration: 500,
+		children: /* @__PURE__ */ jsxs(Button, {
+			"data-sidebar": "trigger",
+			"data-slot": "sidebar-trigger",
+			variant: "ghost",
+			size: "icon",
+			className: cn("text-icon-primary hover:bg-sidebar hover:text-sidebar-primary h-8 w-8 rounded-lg transition-all", className),
+			onClick: (event) => {
+				onClick?.(event);
+				toggleSidebar();
+			},
+			...props,
+			children: [open ? /* @__PURE__ */ jsx(Icon, {
+				icon: PanelLeftCloseIcon,
+				className: "size-4"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				icon: PanelLeftOpenIcon,
+				className: "size-4"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Toggle Sidebar"
+			})]
+		})
+	});
+}
+function SidebarRail({ className, ...props }) {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: toggleSidebar,
+		title: "Toggle Sidebar",
+		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-[cubic-bezier(0.25,0.1,0.25,1)] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "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", "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		...props
+	});
+}
+function SidebarInset({ className, ...props }) {
+	return /* @__PURE__ */ jsx("main", {
+		"data-slot": "sidebar-inset",
+		className: cn("bg-background relative flex w-full min-w-0 flex-1 flex-col", "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),
+		...props
+	});
+}
+function SidebarInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "sidebar-input",
+		"data-sidebar": "input",
+		className: cn("bg-background h-8 w-full shadow-none", className),
+		...props
+	});
+}
+function SidebarHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-header",
+		"data-sidebar": "header",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+}
+function SidebarFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-footer",
+		"data-sidebar": "footer",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+}
+function SidebarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "sidebar-separator",
+		"data-sidebar": "separator",
+		className: cn("bg-sidebar-border w-full", className),
+		...props
+	});
+}
+function SidebarContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-content",
+		"data-sidebar": "content",
+		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
+		...props
+	});
+}
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group",
+		"data-sidebar": "group",
+		className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+		...props
+	});
+}
+function SidebarGroupLabel({ className, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		"data-slot": "sidebar-group-label",
+		"data-sidebar": "group-label",
+		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className),
+		...props
+	});
+}
+function SidebarGroupAction({ className, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		"data-slot": "sidebar-group-action",
+		"data-sidebar": "group-action",
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+function SidebarGroupContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group-content",
+		"data-sidebar": "group-content",
+		className: cn("w-full text-sm", className),
+		...props
+	});
+}
+function SidebarMenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu",
+		"data-sidebar": "menu",
+		className: cn("flex w-full min-w-0 flex-col gap-1", className),
+		...props
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-item",
+		"data-sidebar": "menu-item",
+		className: cn("group/menu-item relative", className),
+		...props
+	});
+}
+const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar data-[active=true]:text-sidebar-primary data-[state=open]:hover:bg-sidebar data-[state=open]:hover:text-sidebar-primary group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "",
+			outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(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({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
+	const button = /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "sidebar-menu-button",
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		className: cn(sidebarMenuButtonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+	if (!tooltip) return button;
+	const tooltipMessage = typeof tooltip === "string" || React$1.isValidElement(tooltip) || typeof tooltip === "object" && "message" in tooltip ? typeof tooltip === "string" || React$1.isValidElement(tooltip) ? tooltip : tooltip.message : null;
+	const tooltipProps = typeof tooltip === "object" && "message" in tooltip ? {
+		side: tooltip.side,
+		align: tooltip.align
+	} : {};
+	return /* @__PURE__ */ jsx(Tooltip, {
+		message: tooltipMessage,
+		side: "right",
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		...tooltipProps,
+		children: button
+	});
+}
+function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0", className),
+		...props
+	});
+}
+function SidebarMenuBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-menu-badge",
+		"data-sidebar": "menu-badge",
+		className: cn("text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+	const width = React$1.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sidebar-menu-skeleton",
+		"data-sidebar": "menu-skeleton",
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+		...props,
+		children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
+			className: "size-4 rounded-md",
+			"data-sidebar": "menu-skeleton-icon"
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { "--skeleton-width": width }
+		})]
+	});
+}
+function SidebarMenuSub({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu-sub",
+		"data-sidebar": "menu-sub",
+		className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col px-2.5", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+function SidebarMenuSubItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-sub-item",
+		"data-sidebar": "menu-sub-item",
+		className: cn("group/menu-sub-item relative", className),
+		...props
+	});
+}
+function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		"data-slot": "sidebar-menu-sub-button",
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+
+//#endregion
+export { SidebarTrigger as C, NavMain as E, SidebarSeparator as S, AppSidebar as T, SidebarMenuSub as _, SidebarGroupAction as a, SidebarProvider as b, SidebarHeader as c, SidebarMenu as d, SidebarMenuAction as f, SidebarMenuSkeleton as g, SidebarMenuItem as h, SidebarGroup as i, SidebarInput as l, SidebarMenuButton as m, SidebarContent as n, SidebarGroupContent as o, SidebarMenuBadge as p, SidebarFooter as r, SidebarGroupLabel as s, Sidebar as t, SidebarInset as u, SidebarMenuSubButton as v, useSidebar as w, SidebarRail as x, SidebarMenuSubItem as y };