@datum-cloud/datum-ui 2.1.0 → 2.3.0

package/dist/app-navigation/index.mjs

@@ -1,3 +1,3 @@
-import { C as SidebarProvider, S as SidebarGroupLabel, _ as SidebarMenuSubButton, a as SidebarInput, b as SidebarGroupAction, c as SidebarSeparator, d as SidebarMenuAction, f as SidebarMenuBadge, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, o as SidebarInset, p as SidebarMenuButton, r as SidebarFooter, s as SidebarRail, t as Sidebar, u as SidebarMenu, v as SidebarMenuSubItem, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "../sidebar-BRUNOqXi.mjs";
-import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "../app-navigation-CNig4Maj.mjs";
+import { C as SidebarProvider, S as SidebarGroupLabel, _ as SidebarMenuSubButton, a as SidebarInput, b as SidebarGroupAction, c as SidebarSeparator, d as SidebarMenuAction, f as SidebarMenuBadge, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, o as SidebarInset, p as SidebarMenuButton, r as SidebarFooter, s as SidebarRail, t as Sidebar, u as SidebarMenu, v as SidebarMenuSubItem, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "../sidebar-D6BoAr6C.mjs";
+import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "../app-navigation--tEBCrfl.mjs";
 export { AppNavigation, NavMenu, NavMenuItem, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, findItemByHref, hasActiveDescendant, isNavItemActive, normalizePath, useSidebar };

package/dist/{app-navigation-CNig4Maj.mjs → app-navigation--tEBCrfl.mjs}

@@ -1,7 +1,7 @@
 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-BRUNOqXi.mjs";
+import { 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-D6BoAr6C.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";
@@ -132,28 +132,66 @@ function NavSidebarMenuButton({ ref, item, isActive, disableTooltip, className,
 NavSidebarMenuButton.displayName = "NavSidebarMenuButton";
 //#endregion
 //#region src/components/features/app-navigation/nav-menu/nav-menu-item.tsx
+const COLLAPSIBLE_CONTAINER_VARIANTS = {
+	hidden: { opacity: 0 },
+	visible: {
+		opacity: 1,
+		transition: {
+			staggerChildren: .04,
+			delayChildren: .06
+		}
+	}
+};
+const COLLAPSIBLE_CHILD_VARIANTS = {
+	hidden: {
+		opacity: 0,
+		y: -4
+	},
+	visible: {
+		opacity: 1,
+		y: 0,
+		transition: {
+			duration: .2,
+			ease: [
+				.32,
+				.72,
+				0,
+				1
+			]
+		}
+	}
+};
 /** Stable React key for a rendered nav item at a given depth. */
 function itemKeyOf(item, level) {
 	return `${item.title}-${item.href || ""}-${level}`;
 }
 /**
+* Cloudflare-style nav status chip: short inline pill with a dashed border,
+* sitting immediately after the title (never overlapping / corner-pinned).
+* Uses `div` (not `span`) so SidebarMenuButton's `[&>span:last-child]:truncate`
+* does not clip the chip.
+*/
+function NavBadge({ badge }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-muted-foreground inline-flex shrink-0 items-center rounded-full border border-dashed px-1.5 py-px", "text-[10px] leading-none font-medium tracking-wide", "border-border/80"),
+		children: badge.label
+	});
+}
+/**
 * 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.
+*
+* Items with children use {@link NavCollapsibleItem}. Section headers use
+* {@link NavGroup} (always open, no dropdown).
 */
 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, {
+	if ((item.children || []).length > 0) return /* @__PURE__ */ jsx(NavCollapsibleItem, {
 		item,
 		level
 	});
@@ -163,116 +201,85 @@ const NavMenuItem = memo(({ item, level = 0 }) => {
 	});
 });
 NavMenuItem.displayName = "NavMenuItem";
-/** A labelled group of nav items (recurses into `NavMenuItem` for children). */
+/** A labelled group of nav items (always open — Vercel-style section headers). */
 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: [
+	const { pathname, isIconRail, isMobile } = ctx;
+	const hasActiveChild = item.children?.some((child) => hasActiveDescendant(child, pathname)) ?? false;
+	if (isIconRail && !isMobile) 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, {
+		/* @__PURE__ */ jsx(SidebarMenu, {
+			className: "px-2",
+			children: /* @__PURE__ */ jsx(NavSidebarMenuButton, {
 				item,
-				isActive,
+				isActive: hasActiveChild,
 				disableTooltip: ctx.disableTooltip,
-				className: ctx.itemClassName,
+				className: cn(ctx.itemClassName, hasActiveChild && "[&>svg:first-of-type]:text-primary"),
 				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}`);
+				onClick: () => ctx.setOpen(true)
+			})
+		}),
+		item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
+	] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
+		/* @__PURE__ */ jsxs(SidebarGroup, {
+			className: "mb-1 p-0! px-2",
+			children: [item.title && /* @__PURE__ */ jsx(SidebarMenu, {
+				className: "w-full",
+				children: /* @__PURE__ */ jsx(NavSidebarMenuButton, {
+					item,
+					isActive: hasActiveChild,
+					disableTooltip: true,
+					className: cn(ctx.itemClassName, hasActiveChild && "[&>svg:first-of-type]:text-primary", "pointer-events-none h-7 text-xs font-medium text-muted-foreground hover:bg-transparent", hasActiveChild && "text-primary"),
+					activeClassName: ctx.activeItemClassName,
+					children: /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: item.title
+					})
 				})
+			}), /* @__PURE__ */ jsx(SidebarGroupContent, {
+				className: "flex flex-col gap-0.5",
+				children: (item.children || []).map((child) => /* @__PURE__ */ jsx(NavMenuItem, {
+					item: child,
+					level: level + 1
+				}, itemKeyOf(child, level + 1)))
 			})]
-		}) }),
+		}),
 		item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
 	] });
 }
 /**
-* Expanded-sidebar rendering for an item with children: a collapsible section
-* whose contents recurse into `NavMenuItem`.
+* Collapsible section for items with children. Used in both expanded and
+* icon-collapsed sidebar modes so width animation does not remount the tree.
+* When the sidebar is icon-collapsed, the panel is forced closed; clicking the
+* parent expands the sidebar and opens this section.
 */
 function NavCollapsibleItem({ item, level }) {
 	const ctx = useNavMenuContext();
-	const { pathname, state, openItems, isInitialMount, previousOpenItems, previousState, previousPathname } = ctx;
+	const { pathname, state, isIconRail, isMobile, 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 sidebarCollapsed = isIconRail && !isMobile;
 	const isOpen = openItems[stateKey] !== void 0 ? openItems[stateKey] : hasActiveChild;
+	const panelOpen = sidebarCollapsed ? false : isOpen;
 	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,
+				open: panelOpen,
 				onOpenChange: (open) => {
+					if (sidebarCollapsed) {
+						ctx.setOpen(true);
+						ctx.setOpenItems((prev) => ({
+							...prev,
+							[stateKey]: true
+						}));
+						return;
+					}
 					ctx.setOpenItems((prev) => ({
 						...prev,
 						[stateKey]: open
@@ -286,55 +293,47 @@ function NavCollapsibleItem({ item, level }) {
 						className: "w-full",
 						children: /* @__PURE__ */ jsxs(NavSidebarMenuButton, {
 							item,
-							isActive,
+							isActive: isActive || sidebarCollapsed && hasActiveChild,
 							disableTooltip: ctx.disableTooltip,
-							className: ctx.itemClassName,
+							className: cn(ctx.itemClassName, hasActiveChild && "font-semibold [&>svg:first-of-type]:text-primary"),
 							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"
-							})]
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 truncate group-data-[collapsible=icon]:hidden",
+									children: item.title
+								}),
+								item.badge && /* @__PURE__ */ jsx("span", {
+									className: "group-data-[collapsible=icon]:hidden",
+									children: /* @__PURE__ */ jsx(NavBadge, { badge: item.badge })
+								}),
+								/* @__PURE__ */ jsx(Icon, {
+									icon: ChevronRight,
+									className: "ml-auto shrink-0 transition-transform duration-200 group-data-[collapsible=icon]:hidden 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",
+						className: "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden group-data-[collapsible=icon]: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
-										}
-									}
-								},
+								variants: COLLAPSIBLE_CONTAINER_VARIANTS,
 								initial: isInitialMount.current || previousOpenItems.current[stateKey] === openItems[stateKey] && previousState.current === state && previousPathname.current === pathname && !hasActiveChild ? "visible" : "hidden",
-								animate: isOpen ? "visible" : "hidden",
+								animate: panelOpen ? "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"
-												}
-											}
-										},
+										variants: COLLAPSIBLE_CHILD_VARIANTS,
 										children: /* @__PURE__ */ jsx(NavMenuItem, {
 											item: subItem,
 											level: level + 1
 										})
 									}, `${subItem.href}-${level}-${index}`))
 								})
-							}, `collapsible-${stateKey}-${isOpen}`)
+							}, `collapsible-${stateKey}-${panelOpen}`)
 						})
 					})]
 				})
@@ -360,31 +359,49 @@ function NavLeafItem({ item, level }) {
 					item,
 					isActive: isActive && !hasActiveChild,
 					disableTooltip: ctx.disableTooltip,
-					className: cn(level >= 1 && "h-6", ctx.itemClassName),
+					className: cn(level >= 1 && "h-7", item.muted && "[&_svg]:text-muted-foreground", 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, {
+						className: "flex min-w-0 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"
-						})]
+								className: "size-4 shrink-0 transition-all duration-300"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate group-data-[collapsible=icon]:hidden",
+								children: item.title
+							}),
+							item.badge ? /* @__PURE__ */ jsx("span", {
+								className: "group-data-[collapsible=icon]:hidden",
+								children: /* @__PURE__ */ jsx(NavBadge, { badge: item.badge })
+							}) : /* @__PURE__ */ jsx(Icon, {
+								icon: ExternalLinkIcon,
+								className: "ml-auto size-4 shrink-0 group-data-[collapsible=icon]:hidden"
+							})
+						]
 					}) : /* @__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 })]
+						className: "flex min-w-0 items-center gap-2",
+						children: [
+							item?.icon && /* @__PURE__ */ jsx(Icon, {
+								icon: item.icon,
+								className: "text-sidebar-primary shrink-0 transition-all duration-300"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate group-data-[collapsible=icon]:hidden",
+								children: item.title
+							}),
+							item.badge && /* @__PURE__ */ jsx("span", {
+								className: "group-data-[collapsible=icon]:hidden",
+								children: /* @__PURE__ */ jsx(NavBadge, { badge: item.badge })
+							})
+						]
 					})
 				})
 			})
@@ -396,12 +413,13 @@ function NavLeafItem({ item, level }) {
 //#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 { state: sidebarState, isIconRail: sidebarIsIconRail, isMobile, closeForNavigation, setOpen } = useSidebar();
 	const [openItems, setOpenItems] = useState({});
 	const isInitialMount = useRef(true);
 	const previousOpenItems = useRef({});
 	const previousPathname = useRef(pathname);
 	const state = overrideState ?? sidebarState;
+	const isIconRail = overrideState ? overrideState === "collapsed" : sidebarIsIconRail;
 	const previousState = useRef(state);
 	useEffect(() => {
 		previousOpenItems.current = openItems;
@@ -443,6 +461,7 @@ function NavMenu({ ref, className, items, currentPath, linkComponent: LinkComp =
 	const contextValue = useMemo(() => ({
 		pathname,
 		state,
+		isIconRail,
 		isMobile,
 		openItems,
 		setOpenItems,
@@ -460,6 +479,7 @@ function NavMenu({ ref, className, items, currentPath, linkComponent: LinkComp =
 	}), [
 		pathname,
 		state,
+		isIconRail,
 		isMobile,
 		openItems,
 		setOpen,
@@ -540,37 +560,33 @@ function AppNavigation({ navItems, title, closeOnNavigation, defaultOpen, curren
 	useEffect(() => {
 		if (defaultOpen === false) setOpen(false);
 	}, [defaultOpen, setOpen]);
-	return /* @__PURE__ */ jsx(Sidebar, {
+	return /* @__PURE__ */ jsxs(Sidebar, {
 		collapsible: props.collapsible ?? "offcanvas",
 		...props,
-		children: /* @__PURE__ */ jsxs(SidebarContent, {
+		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, {})
+			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: "border-sidebar-border shrink-0 border-t p-2",
+			children: /* @__PURE__ */ jsx(SidebarTrigger, {})
+		})]
 	});
 }
 //#endregion

package/dist/components/base/sidebar/context.d.ts

@@ -4,6 +4,8 @@ declare const SIDEBAR_WIDTH_MOBILE = "18rem";
 declare const SIDEBAR_WIDTH_ICON = "3rem";
 interface SidebarContext {
     state: 'expanded' | 'collapsed';
+    /** True when the sidebar is width-collapsed (icon rail). */
+    isIconRail: boolean;
     open: boolean;
     setOpen: (open: boolean) => void;
     openMobile: boolean;
@@ -12,6 +14,7 @@ interface SidebarContext {
     toggleSidebar: () => void;
     handleMouseEnter: () => void;
     handleMouseLeave: () => void;
+    cancelHoverLeave: () => void;
     forceClose: () => void;
     closeForNavigation: () => void;
     hasSubLayout: boolean;

package/dist/components/base/sidebar/shell.d.ts

@@ -12,7 +12,7 @@ declare function SidebarRail({ className, ...props }: React.ComponentProps<'butt
 declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): React.JSX.Element;
 declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
 declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarFooter({ className, onMouseEnter, onMouseLeave, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
-declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarContent({ className, onMouseEnter, onMouseLeave, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInput, SidebarInset, SidebarRail, SidebarSeparator, SidebarTrigger, };

package/dist/components/features/app-navigation/nav-menu/index.d.ts

@@ -1,4 +1,4 @@
 export { findItemByHref, hasActiveDescendant, isNavItemActive, normalizePath, } from './active-path';
 export { NavMenu } from './nav-menu';
 export { NavMenuItem } from './nav-menu-item';
-export type { NavItem } from './types';
+export type { NavItem, NavItemBadge } from './types';

package/dist/components/features/app-navigation/nav-menu/nav-menu-context.d.ts

@@ -11,6 +11,10 @@ export interface NavMenuContextValue {
     pathname: string;
     /** Resolved sidebar state (override wins over the sidebar provider). */
     state: 'expanded' | 'collapsed';
+    /**
+     * True when the sidebar is in icon-rail (collapsed) mode.
+     */
+    isIconRail: boolean;
     isMobile: boolean;
     openItems: Record<string, boolean>;
     setOpenItems: Dispatch<SetStateAction<Record<string, boolean>>>;

package/dist/components/features/app-navigation/nav-menu/nav-menu-item.d.ts

@@ -5,6 +5,9 @@ declare function itemKeyOf(item: NavItem, level: number): string;
  * 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.
+ *
+ * Items with children use {@link NavCollapsibleItem}. Section headers use
+ * {@link NavGroup} (always open, no dropdown).
  */
 export declare const NavMenuItem: import("react").MemoExoticComponent<({ item, level }: {
     item: NavItem;

package/dist/components/features/app-navigation/nav-menu/types.d.ts

@@ -1,4 +1,18 @@
 import type { LucideIcon } from 'lucide-react';
+import type { BadgeProps } from '../../../base/badge';
+/**
+ * Declarative status chip rendered inline after a nav item title
+ * (Cloudflare-style dashed pill: "Beta", "New", "Soon").
+ * Data-only so hosts/plugins never pass React nodes into the sidebar.
+ *
+ * `type` / `theme` are retained for API compatibility but unused — nav chips
+ * always use the shared dashed-pill treatment.
+ */
+export interface NavItemBadge {
+    label: string;
+    type?: BadgeProps['type'];
+    theme?: BadgeProps['theme'];
+}
 export interface NavItem {
     title: string;
     href: string | null;
@@ -11,6 +25,10 @@ export interface NavItem {
     hidden?: boolean;
     showSeparatorAbove?: boolean;
     showSeparatorBelow?: boolean;
+    /** Optional status badge (e.g. "Coming soon", "Beta"). */
+    badge?: NavItemBadge;
+    /** Soften label/icon color (e.g. planned services) without disabling the link. */
+    muted?: boolean;
     excludePaths?: string[];
     tabChildLinks?: string[];
     /** Called when the user hovers over the link (e.g. to prefetch route data). */

package/dist/index.mjs

@@ -33,7 +33,7 @@ import { t as useBreakpoint } from "./use-breakpoint-CwiUJSmk.mjs";
 import { t as ResponsiveDropdown } from "./responsive-dropdown-n0Txkax5.mjs";
 import { t as ResponsivePopover } from "./responsive-popover-C_1nzIvm.mjs";
 import { a as SelectLabel, c as SelectSeparator, i as SelectItem, l as SelectTrigger, n as SelectContent, o as SelectScrollDownButton, r as SelectGroup, s as SelectScrollUpButton, t as Select, u as SelectValue } from "./select-DCU44UO6.mjs";
-import { C as SidebarProvider, S as SidebarGroupLabel, _ as SidebarMenuSubButton, a as SidebarInput, b as SidebarGroupAction, c as SidebarSeparator, d as SidebarMenuAction, f as SidebarMenuBadge, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, o as SidebarInset, p as SidebarMenuButton, r as SidebarFooter, s as SidebarRail, t as Sidebar, u as SidebarMenu, v as SidebarMenuSubItem, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "./sidebar-BRUNOqXi.mjs";
+import { C as SidebarProvider, S as SidebarGroupLabel, _ as SidebarMenuSubButton, a as SidebarInput, b as SidebarGroupAction, c as SidebarSeparator, d as SidebarMenuAction, f as SidebarMenuBadge, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, o as SidebarInset, p as SidebarMenuButton, r as SidebarFooter, s as SidebarRail, t as Sidebar, u as SidebarMenu, v as SidebarMenuSubItem, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "./sidebar-D6BoAr6C.mjs";
 import { t as Tooltip } from "./tooltip-C_SL1imw.mjs";
 import { Skeleton } from "./skeleton/index.mjs";
 import { t as Switch } from "./switch-DPHr3TcN.mjs";
@@ -42,7 +42,7 @@ import { Tabs, TabsContent, TabsLinkTrigger, TabsList, TabsTrigger } from "./tab
 import { t as Textarea } from "./textarea-B6YhjFVC.mjs";
 import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "./typography-BXIBvq3-.mjs";
 import { t as VisuallyHidden } from "./visuallyhidden-D7L_qs8b.mjs";
-import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "./app-navigation-CNig4Maj.mjs";
+import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "./app-navigation--tEBCrfl.mjs";
 import { t as LoaderOverlay } from "./loader-overlay-DD94azZX.mjs";
 import { t as Autocomplete } from "./autocomplete-DZ_HSBak.mjs";
 import { Autosearch, defaultAutosearchValue } from "./autosearch/index.mjs";

package/dist/sidebar/index.mjs

@@ -1,2 +1,2 @@
-import { C as SidebarProvider, S as SidebarGroupLabel, _ as SidebarMenuSubButton, a as SidebarInput, b as SidebarGroupAction, c as SidebarSeparator, d as SidebarMenuAction, f as SidebarMenuBadge, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, o as SidebarInset, p as SidebarMenuButton, r as SidebarFooter, s as SidebarRail, t as Sidebar, u as SidebarMenu, v as SidebarMenuSubItem, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "../sidebar-BRUNOqXi.mjs";
+import { C as SidebarProvider, S as SidebarGroupLabel, _ as SidebarMenuSubButton, a as SidebarInput, b as SidebarGroupAction, c as SidebarSeparator, d as SidebarMenuAction, f as SidebarMenuBadge, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, o as SidebarInset, p as SidebarMenuButton, r as SidebarFooter, s as SidebarRail, t as Sidebar, u as SidebarMenu, v as SidebarMenuSubItem, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "../sidebar-D6BoAr6C.mjs";
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/{sidebar-BRUNOqXi.mjs → sidebar-D6BoAr6C.mjs}

@@ -78,18 +78,30 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		return () => mql.removeEventListener("change", onChange);
 	}, [isMobile, setOpen]);
 	const effectiveOpen = open || expandOnHover && isHovered;
+	const isIconRail = !effectiveOpen;
 	const handleMouseEnter = React.useCallback(() => {
 		if (!expandOnHover) return;
 		if (hoverLockRef.current) return;
-		if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
 		setIsHovered(true);
 	}, [expandOnHover]);
 	const handleMouseLeave = React.useCallback(() => {
 		if (!expandOnHover) return;
-		hoverTimeoutRef.current = setTimeout(() => {
-			setIsHovered(false);
-		}, expandBehavior === "overlay" ? 200 : 300);
-	}, [expandOnHover, expandBehavior]);
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
+		setIsHovered(false);
+	}, [expandOnHover]);
+	const cancelHoverLeave = React.useCallback(() => {
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
+	}, []);
 	const toggleSidebar = React.useCallback(() => {
 		if (isMobile) {
 			setOpenMobile((current) => !current);
@@ -154,6 +166,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 	const state = effectiveOpen ? "expanded" : "collapsed";
 	const contextValue = React.useMemo(() => ({
 		state,
+		isIconRail,
 		open: effectiveOpen,
 		setOpen,
 		isMobile,
@@ -162,6 +175,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		toggleSidebar,
 		handleMouseEnter,
 		handleMouseLeave,
+		cancelHoverLeave,
 		forceClose,
 		closeForNavigation,
 		hasSubLayout,
@@ -170,6 +184,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		showBackdrop
 	}), [
 		state,
+		isIconRail,
 		effectiveOpen,
 		setOpen,
 		isMobile,
@@ -178,6 +193,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		toggleSidebar,
 		handleMouseEnter,
 		handleMouseLeave,
+		cancelHoverLeave,
 		forceClose,
 		closeForNavigation,
 		hasSubLayout,
@@ -341,7 +357,7 @@ 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),
+		className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-0.5 border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
 		...props
 	});
 }
@@ -366,7 +382,7 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
 //#endregion
 //#region src/components/base/sidebar/shell.tsx
 function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
-	const { isMobile, state, openMobile, setOpenMobile, handleMouseEnter, handleMouseLeave, expandBehavior, showBackdrop, forceClose } = useSidebar();
+	const { isMobile, state, openMobile, setOpenMobile, expandBehavior, showBackdrop, forceClose } = useSidebar();
 	const sidebarRef = React.useRef(null);
 	const [showBackdropElement, setShowBackdropElement] = React.useState(false);
 	const [backdropVisible, setBackdropVisible] = React.useState(false);
@@ -422,18 +438,19 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 		"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", { className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "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),
+				className: cn("fixed inset-y-0 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", 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)]", expandBehavior === "overlay" ? "z-50" : "z-20", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "bg-sidebar group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
 				...props,
-				children: /* @__PURE__ */ jsx("div", {
+				children: /* @__PURE__ */ jsxs("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
+					className: cn("relative flex h-full w-full flex-col", variant === "floating" || variant === "inset" ? "bg-sidebar" : null, "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: [children, variant !== "floating" && variant !== "inset" && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: cn("bg-sidebar-border pointer-events-none absolute inset-y-0 z-20 w-px", side === "left" ? "right-0" : "left-0")
+					})]
 				})
 			}),
 			showBackdropElement && /* @__PURE__ */ jsx("div", {
@@ -512,11 +529,21 @@ function SidebarHeader({ className, ...props }) {
 		...props
 	});
 }
-function SidebarFooter({ className, ...props }) {
+function SidebarFooter({ className, onMouseEnter, onMouseLeave, ...props }) {
+	const { cancelHoverLeave, handleMouseLeave } = useSidebar();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar-footer",
 		"data-sidebar": "footer",
 		className: cn("flex flex-col gap-2 p-2", className),
+		onMouseEnter: (event) => {
+			cancelHoverLeave();
+			onMouseEnter?.(event);
+		},
+		onMouseLeave: (event) => {
+			const next = event.relatedTarget;
+			if (!(next instanceof Element && next.closest("[data-sidebar=\"content\"]"))) handleMouseLeave();
+			onMouseLeave?.(event);
+		},
 		...props
 	});
 }
@@ -528,11 +555,21 @@ function SidebarSeparator({ className, ...props }) {
 		...props
 	});
 }
-function SidebarContent({ className, ...props }) {
+function SidebarContent({ className, onMouseEnter, onMouseLeave, ...props }) {
+	const { handleMouseEnter, handleMouseLeave } = useSidebar();
 	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),
+		onMouseEnter: (event) => {
+			handleMouseEnter();
+			onMouseEnter?.(event);
+		},
+		onMouseLeave: (event) => {
+			const next = event.relatedTarget;
+			if (!(next instanceof Element && next.closest("[data-sidebar=\"footer\"]"))) handleMouseLeave();
+			onMouseLeave?.(event);
+		},
 		...props
 	});
 }

package/dist/styles/shadcn/animations.css

@@ -92,10 +92,10 @@
   }
 
   .animate-collapsible-down {
-    animation: collapsibleDown 0.2s ease-out;
+    animation: collapsibleDown 0.28s cubic-bezier(0.32, 0.72, 0, 1);
   }
 
   .animate-collapsible-up {
-    animation: collapsibleUp 0.2s ease-out;
+    animation: collapsibleUp 0.22s cubic-bezier(0.32, 0.72, 0, 1);
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"