@datum-cloud/datum-ui 1.3.1 → 1.4.0

package/dist/app-navigation--mry98XV.mjs

@@ -0,0 +1,576 @@
+import { t as cn } from "./utils-Bu32wN-x.mjs";
+import { t as Icon } from "./icon-wrapper-DKfJlJd0.mjs";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible/index.mjs";
+import { S as SidebarGroupLabel, c as SidebarSeparator, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, p as SidebarMenuButton, r as SidebarFooter, t as Sidebar, u as SidebarMenu, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "./sidebar-Df6Po0K8.mjs";
+import { ChevronRight, ExternalLinkIcon } from "lucide-react";
+import { createContext, memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+//#region src/components/features/app-navigation/nav-menu/active-path.ts
+/**
+* Pure active-path predicates for the nav menu.
+*
+* These were previously trapped as closures inside the `NavMenu` render
+* function. Extracted here as plain functions of `(item, currentPath)` so the
+* routing logic can be unit-tested without rendering React.
+*/
+/**
+* Normalise a pathname for comparison: ensure a leading slash and strip a
+* trailing slash (except for the root path itself).
+*/
+function normalizePath(p) {
+	let result = p.startsWith("/") ? p : `/${p}`;
+	if (result !== "/" && result.endsWith("/")) result = result.slice(0, -1);
+	return result;
+}
+/**
+* Whether `item` itself should be rendered as the active nav entry for the
+* given `currentPath`.
+*
+* Rules:
+* - An item with no href is never directly active.
+* - The root item (`/`) is active only on the exact root path.
+* - A parent with children is active only on an exact match AND only when none
+*   of its descendants match (the deepest match wins).
+* - A leaf is active on exact match or a non-excluded sub-path, or when the
+*   path matches one of its `tabChildLinks`.
+*/
+function isNavItemActive(item, currentPath) {
+	const cleanCurrentPath = normalizePath(currentPath);
+	if (!item.href) return false;
+	const cleanNavPath = normalizePath(item.href);
+	if (cleanNavPath === "/") return cleanCurrentPath === "/";
+	const anyDescendantMatches = (navItem) => {
+		if (!navItem.children || navItem.children.length === 0) return false;
+		return navItem.children.some((child) => {
+			if (!child.href) return anyDescendantMatches(child);
+			const cleanChildPath = normalizePath(child.href);
+			if (cleanCurrentPath === cleanChildPath || cleanCurrentPath.startsWith(`${cleanChildPath}/`)) return true;
+			return anyDescendantMatches(child);
+		});
+	};
+	if ((item.children || []).length > 0) {
+		if (anyDescendantMatches(item)) return false;
+		return cleanCurrentPath === cleanNavPath;
+	}
+	const isExcluded = item.excludePaths?.some((excludePath) => {
+		const cleanExcludePath = normalizePath(excludePath);
+		return cleanCurrentPath === cleanExcludePath || cleanCurrentPath.startsWith(`${cleanExcludePath}/`);
+	}) ?? false;
+	const isDirectMatch = cleanCurrentPath === cleanNavPath || !isExcluded && cleanCurrentPath.startsWith(`${cleanNavPath}/`);
+	const isTabChildMatch = item.tabChildLinks?.some((childPath) => {
+		const cleanChildPath = normalizePath(childPath);
+		return cleanCurrentPath === cleanChildPath || cleanCurrentPath.startsWith(`${cleanChildPath}/`);
+	}) ?? false;
+	return isDirectMatch || isTabChildMatch;
+}
+/**
+* Whether `item` or any of its descendants is active for `currentPath`. Used to
+* decide which collapsible groups should be expanded / kept open.
+*/
+function hasActiveDescendant(item, currentPath) {
+	if (isNavItemActive(item, currentPath)) return true;
+	if (item.children) return item.children.some((child) => hasActiveDescendant(child, currentPath));
+	return false;
+}
+/** Depth-first search for the first item whose href matches `href` exactly. */
+function findItemByHref(items, href) {
+	for (const item of items) {
+		if (item.href === href) return item;
+		if (item.children) {
+			const found = findItemByHref(item.children, href);
+			if (found) return found;
+		}
+	}
+	return null;
+}
+//#endregion
+//#region src/components/features/app-navigation/nav-menu/nav-menu-context.ts
+const NavMenuContext = createContext(null);
+const NavMenuProvider = NavMenuContext.Provider;
+function useNavMenuContext() {
+	const ctx = use(NavMenuContext);
+	if (!ctx) throw new Error("NavMenuItem must be rendered within a NavMenu");
+	return ctx;
+}
+/**
+* Stable identity key for a nav item's open/closed state.
+* Uses type + title + href + level (not href alone) so that collapsible groups
+* with href:null can still be toggled and duplicate hrefs never collide.
+*/
+function getNavItemKey(item, level) {
+	return `${item.type}:${item.title}:${item.href ?? ""}:${level}`;
+}
+//#endregion
+//#region src/components/features/app-navigation/nav-menu/parts.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, activeClassName, 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, isActive && activeClassName),
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(NavIcon, { icon: item.icon }), children] })
+	});
+}
+NavSidebarMenuButton.displayName = "NavSidebarMenuButton";
+//#endregion
+//#region src/components/features/app-navigation/nav-menu/nav-menu-item.tsx
+/** Stable React key for a rendered nav item at a given depth. */
+function itemKeyOf(item, level) {
+	return `${item.title}-${item.href || ""}-${level}`;
+}
+/**
+* Recursive nav row. Dispatches to the correct presentational part based on the
+* item type and the current sidebar state, and renders itself for children.
+* Memoized so unchanged subtrees skip re-rendering when their props are stable.
+*/
+const NavMenuItem = memo(({ item, level = 0 }) => {
+	const { state, isMobile } = useNavMenuContext();
+	if (item.hidden) return null;
+	if (item.type === "group") return /* @__PURE__ */ jsx(NavGroup, {
+		item,
+		level
+	});
+	const hasChildren = (item.children || []).length > 0;
+	if (state === "collapsed" && !isMobile && level <= 2 && hasChildren) return /* @__PURE__ */ jsx(NavCollapsedItem, {
+		item,
+		level
+	});
+	if (hasChildren) return /* @__PURE__ */ jsx(NavCollapsibleItem, {
+		item,
+		level
+	});
+	return /* @__PURE__ */ jsx(NavLeafItem, {
+		item,
+		level
+	});
+});
+NavMenuItem.displayName = "NavMenuItem";
+/** A labelled group of nav items (recurses into `NavMenuItem` for children). */
+function NavGroup({ item, level }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { 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) => /* @__PURE__ */ jsx(NavMenuItem, {
+				item: child,
+				level: level + 1
+			}, itemKeyOf(child, level + 1)))
+		})]
+	}), /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2 hidden group-data-[state=collapsed]:block" })] });
+}
+/**
+* Collapsed-sidebar rendering for an item with children: the parent button
+* expands the sidebar, and active descendants are represented as dots.
+*/
+function NavCollapsedItem({ item, level }) {
+	const ctx = useNavMenuContext();
+	const { pathname, getLinkProps, handleNavigation } = ctx;
+	const stateKey = getNavItemKey(item, level);
+	const isActive = isNavItemActive(item, pathname);
+	const hasActiveChild = (item.children?.filter((child) => hasActiveDescendant(child, pathname)) || []).length > 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { 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: ctx.disableTooltip,
+				className: ctx.itemClassName,
+				activeClassName: ctx.activeItemClassName,
+				onClick: () => {
+					ctx.setOpen(true);
+					ctx.setOpenItems((prev) => ({
+						...prev,
+						[stateKey]: 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 = isNavItemActive(subItem, pathname);
+					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(ctx.linkComponent, {
+								className: "flex items-center justify-center",
+								...getLinkProps(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" })
+	] });
+}
+/**
+* Expanded-sidebar rendering for an item with children: a collapsible section
+* whose contents recurse into `NavMenuItem`.
+*/
+function NavCollapsibleItem({ item, level }) {
+	const ctx = useNavMenuContext();
+	const { pathname, state, openItems, isInitialMount, previousOpenItems, previousState, previousPathname } = ctx;
+	const stateKey = getNavItemKey(item, level);
+	const isActive = isNavItemActive(item, pathname);
+	const hasActiveChild = (item.children?.filter((child) => hasActiveDescendant(child, pathname)) || []).length > 0;
+	const isOpen = openItems[stateKey] !== void 0 ? openItems[stateKey] : hasActiveChild;
+	return /* @__PURE__ */ jsxs(Fragment$1, { 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) => {
+					ctx.setOpenItems((prev) => ({
+						...prev,
+						[stateKey]: open
+					}));
+				},
+				className: "group/collapsible",
+				children: /* @__PURE__ */ jsxs(SidebarMenuItem, {
+					className: "[&>*:first-child]:w-full",
+					children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+						asChild: true,
+						className: "w-full",
+						children: /* @__PURE__ */ jsxs(NavSidebarMenuButton, {
+							item,
+							isActive,
+							disableTooltip: ctx.disableTooltip,
+							className: ctx.itemClassName,
+							activeClassName: ctx.activeItemClassName,
+							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[stateKey] === openItems[stateKey] && 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: /* @__PURE__ */ jsx(NavMenuItem, {
+											item: subItem,
+											level: level + 1
+										})
+									}, `${subItem.href}-${level}-${index}`))
+								})
+							}, `collapsible-${stateKey}-${isOpen}`)
+						})
+					})]
+				})
+			}, `collapsed-item-drop-down-item-${item.title}-${level}`)
+		}),
+		item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
+	] });
+}
+/** A leaf nav item: an internal router link or an external link. */
+function NavLeafItem({ item, level }) {
+	const ctx = useNavMenuContext();
+	const { pathname, getLinkProps, handleNavigation } = ctx;
+	const isActive = isNavItemActive(item, pathname);
+	const hasActiveChild = (item.children?.filter((child) => hasActiveDescendant(child, pathname)) || []).length > 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
+		/* @__PURE__ */ jsx(SidebarMenu, {
+			className: cn(`level_${level} px-2`),
+			children: /* @__PURE__ */ jsx(SidebarMenuItem, {
+				className: "[&>*:first-child]:w-full",
+				children: /* @__PURE__ */ jsx(NavSidebarMenuButton, {
+					asChild: true,
+					item,
+					isActive: isActive && !hasActiveChild,
+					disableTooltip: ctx.disableTooltip,
+					className: cn(level >= 1 && "h-6", ctx.itemClassName),
+					activeClassName: ctx.activeItemClassName,
+					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(ctx.linkComponent, {
+						...getLinkProps(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" })
+	] });
+}
+//#endregion
+//#region src/components/features/app-navigation/nav-menu/nav-menu.tsx
+function NavMenu({ ref, className, items, currentPath, linkComponent: LinkComp = "a", overrideState, itemClassName, activeItemClassName, 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]);
+	useEffect(() => {
+		if (previousState.current === "expanded" && state === "collapsed") setOpenItems((prev) => {
+			const newOpenItems = {};
+			const keepActive = (navItems, level) => {
+				navItems.forEach((navItem) => {
+					const key = getNavItemKey(navItem, level);
+					if (prev[key] && hasActiveDescendant(navItem, pathname)) newOpenItems[key] = true;
+					if (navItem.children) keepActive(navItem.children, level + 1);
+				});
+			};
+			keepActive(items, 0);
+			return newOpenItems;
+		});
+		previousState.current = state;
+	}, [
+		state,
+		items,
+		pathname
+	]);
+	const getLinkProps = useCallback((href) => LinkComp === "a" ? { href } : {
+		to: href,
+		href
+	}, [LinkComp]);
+	const handleNavigation = useCallback(() => {
+		if (closeOnNavigation && !isMobile) closeForNavigation();
+	}, [
+		closeOnNavigation,
+		isMobile,
+		closeForNavigation
+	]);
+	return /* @__PURE__ */ jsx(NavMenuProvider, {
+		value: useMemo(() => ({
+			pathname,
+			state,
+			isMobile,
+			openItems,
+			setOpenItems,
+			setOpen,
+			disableTooltip,
+			itemClassName,
+			activeItemClassName,
+			linkComponent: LinkComp,
+			getLinkProps,
+			handleNavigation,
+			isInitialMount,
+			previousOpenItems,
+			previousState,
+			previousPathname
+		}), [
+			pathname,
+			state,
+			isMobile,
+			openItems,
+			setOpen,
+			disableTooltip,
+			itemClassName,
+			activeItemClassName,
+			LinkComp,
+			getLinkProps,
+			handleNavigation
+		]),
+		children: /* @__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) => /* @__PURE__ */ jsx(NavMenuItem, {
+				item,
+				level: 0
+			}, itemKeyOf(item, 0)))
+		})
+	});
+}
+NavMenu.displayName = "NavMenu";
+//#endregion
+//#region src/components/features/app-navigation/app-navigation.tsx
+/** Skeleton that mirrors the project nav layout: Home, separator, 6 items, separator, Project Settings */
+function NavSkeleton() {
+	return /* @__PURE__ */ jsxs("ul", {
+		className: "flex h-full w-full min-w-0 flex-col gap-0.5 py-2",
+		"data-sidebar": "menu",
+		children: [
+			/* @__PURE__ */ jsx(SidebarMenu, {
+				className: "px-2",
+				children: /* @__PURE__ */ jsx(SidebarMenuItem, {
+					className: "[&>*:first-child]:w-full",
+					children: /* @__PURE__ */ jsx(SidebarMenuSkeleton, {
+						showIcon: true,
+						className: "bg-sidebar-accent/60 h-8 rounded-xl **:data-[sidebar=menu-skeleton-text]:max-w-12"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
+			[
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			].map((i) => /* @__PURE__ */ jsx(SidebarMenu, {
+				className: "px-2",
+				children: /* @__PURE__ */ jsx(SidebarMenuItem, {
+					className: "[&>*:first-child]:w-full",
+					children: /* @__PURE__ */ jsx(SidebarMenuSkeleton, {
+						showIcon: true,
+						className: "h-8 rounded-xl"
+					})
+				})
+			}, i)),
+			/* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
+			/* @__PURE__ */ jsx(SidebarMenu, {
+				className: "px-2",
+				children: /* @__PURE__ */ jsx(SidebarMenuItem, {
+					className: "[&>*:first-child]:w-full",
+					children: /* @__PURE__ */ jsx(SidebarMenuSkeleton, {
+						showIcon: true,
+						className: "h-8 rounded-xl [&_[data-sidebar=menu-skeleton-text]]:max-w-28"
+					})
+				})
+			})
+		]
+	});
+}
+function AppNavigation({ navItems, title, closeOnNavigation, defaultOpen, currentPath, linkComponent, loading = false, itemClassName, activeItemClassName, ...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
+				}),
+				loading ? /* @__PURE__ */ jsx(SidebarGroup, {
+					className: "mb-2 p-0! px-0",
+					children: /* @__PURE__ */ jsx(SidebarGroupContent, {
+						className: "flex flex-col gap-0 py-0",
+						children: /* @__PURE__ */ jsx(NavSkeleton, {})
+					})
+				}) : navItems.length > 0 && /* @__PURE__ */ jsx(NavMenu, {
+					className: "h-fit py-2",
+					items: navItems,
+					currentPath,
+					linkComponent,
+					closeOnNavigation,
+					itemClassName,
+					activeItemClassName
+				}),
+				props.collapsible !== "none" && /* @__PURE__ */ jsx(SidebarFooter, {
+					className: "mt-auto p-2",
+					children: /* @__PURE__ */ jsx(SidebarTrigger, {})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { hasActiveDescendant as a, findItemByHref as i, NavMenu as n, isNavItemActive as o, NavMenuItem as r, normalizePath as s, AppNavigation as t };

package/dist/autocomplete/index.mjs

@@ -1,2 +1,2 @@
-import { t as Autocomplete } from "../autocomplete-Bg187x6x.mjs";
+import { t as Autocomplete } from "../autocomplete-G24AgvxU.mjs";
 export { Autocomplete };

package/dist/{autocomplete-Bg187x6x.mjs → autocomplete-G24AgvxU.mjs}

@@ -1,22 +1,25 @@
-import { t as cn } from "./cn-dlASUkDY.mjs";
-import { t as ResponsivePopover } from "./responsive-popover-CVFh3i33.mjs";
-import { t as LoaderOverlay } from "./loader-overlay-CumsP4Xh.mjs";
-import { n as OptionList, t as useOptionPicker } from "./use-option-picker-Cqzcr5f2.mjs";
+import { t as cn } from "./utils-Bu32wN-x.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-DJZgXWIE.mjs";
+import { t as LoaderOverlay } from "./loader-overlay-DD94azZX.mjs";
+import { n as OptionList, t as useOptionPicker } from "./use-option-picker-CV-9CyBV.mjs";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/features/autocomplete/trigger.tsx
-function Trigger({ ref, selectedOption, renderValue, placeholder, loading, disabled, open, id, className, ...rest }) {
+function Trigger({ ref, selectedOption, createdValue, renderValue, placeholder, loading, disabled, open, id, className, ...rest }) {
 	let displayContent;
-	if (!selectedOption) displayContent = /* @__PURE__ */ jsx("span", {
-		className: "text-muted-foreground",
-		children: placeholder
-	});
-	else if (renderValue) displayContent = renderValue(selectedOption);
-	else displayContent = /* @__PURE__ */ jsx("span", {
+	if (selectedOption) displayContent = renderValue ? renderValue(selectedOption) : /* @__PURE__ */ jsx("span", {
 		className: "truncate",
 		children: selectedOption.label
 	});
+	else if (createdValue) displayContent = /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: createdValue
+	});
+	else displayContent = /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: placeholder
+	});
 	return /* @__PURE__ */ jsxs("button", {
 		ref,
 		type: "button",
@@ -81,22 +84,9 @@ function Autocomplete({ options, value, onValueChange, onSearchChange, searchPla
 		open,
 		onOpenChange: setOpen
 	});
-	const flatOptions = React.useMemo(() => {
-		if (Array.isArray(options) && options.length > 0 && "options" in options[0]) return options.flatMap((g) => g.options);
-		return options;
-	}, [options]);
-	const displayOption = React.useMemo(() => {
-		const found = flatOptions.find((o) => o.value === value);
-		if (found) return found;
-		if (creatable && value) return {
-			value,
-			label: value
-		};
-	}, [
-		flatOptions,
-		value,
-		creatable
-	]);
+	const selectedValue = picker.selection[0];
+	const selectedOption = picker.selectedOptions[0];
+	const createdValue = !selectedOption && creatable && selectedValue ? selectedValue : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative", className),
 		children: [/* @__PURE__ */ jsx(ResponsivePopover, {
@@ -108,7 +98,8 @@ function Autocomplete({ options, value, onValueChange, onSearchChange, searchPla
 			contentClassName: cn("popover-content-width-full", contentClassName),
 			align: "start",
 			trigger: /* @__PURE__ */ jsx(Trigger, {
-				selectedOption: displayOption,
+				selectedOption,
+				createdValue,
 				renderValue,
 				placeholder,
 				loading,
@@ -132,7 +123,7 @@ function Autocomplete({ options, value, onValueChange, onSearchChange, searchPla
 		}), name && /* @__PURE__ */ jsx("input", {
 			type: "hidden",
 			name,
-			value: value ?? ""
+			value: selectedValue ?? ""
 		})]
 	});
 }