@datum-cloud/datum-ui 2.0.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/autocomplete/index.mjs

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

package/dist/{autocomplete-DM6JYV4W.mjs → autocomplete-DZ_HSBak.mjs}

@@ -1,5 +1,5 @@
 import { t as cn } from "./utils-Bu32wN-x.mjs";
-import { t as ResponsivePopover } from "./responsive-popover-DJZgXWIE.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-C_1nzIvm.mjs";
 import { t as LoaderOverlay } from "./loader-overlay-DD94azZX.mjs";
 import { n as OptionList, t as useOptionPicker } from "./use-option-picker-s2bUYwXC.mjs";
 import { ChevronDown } from "lucide-react";

package/dist/autosearch/index.mjs

@@ -1,7 +1,7 @@
 import { t as cn } from "../utils-Bu32wN-x.mjs";
 import { t as Button } from "../button-A1qTjZ8U.mjs";
 import { t as Input } from "../input-j4tbmYYz.mjs";
-import { t as ResponsivePopover } from "../responsive-popover-DJZgXWIE.mjs";
+import { t as ResponsivePopover } from "../responsive-popover-C_1nzIvm.mjs";
 import { t as Tooltip } from "../tooltip-C_SL1imw.mjs";
 import { n as OptionList, t as useOptionPicker } from "../use-option-picker-s2bUYwXC.mjs";
 import { AlertCircle, Loader2, X } from "lucide-react";

package/dist/{calendar-date-picker-AzvSqjeS.mjs → calendar-date-picker-ynSGADfR.mjs}

@@ -1,5 +1,5 @@
-import { o as DateRangePicker } from "./picker-b5-x-EHs.mjs";
 import { t as useDeprecationWarning } from "./use-deprecation-warning-DXrGc0jX.mjs";
+import { a as DateRangePicker } from "./picker-raVuDxsh.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/features/calendar-date-picker/calendar-date-picker.tsx
 /**

package/dist/components/base/sheet/sheet.d.ts

@@ -7,8 +7,9 @@ interface SheetOverlayProps extends React.ComponentProps<typeof SheetPrimitive.O
 declare function SheetOverlay({ className, ...props }: SheetOverlayProps): React.JSX.Element;
 interface SheetContentProps extends React.ComponentProps<typeof SheetPrimitive.Content> {
     side?: 'top' | 'right' | 'bottom' | 'left';
+    showCloseButton?: boolean;
 }
-declare function SheetContent({ className, children, side, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetContentProps): React.JSX.Element;
 interface SheetComponent extends React.FC<React.ComponentProps<typeof ShadcnSheet>> {
     Trigger: typeof SheetTrigger;
     Content: typeof SheetContent;

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/components/features/date-time/date-time.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { DateTimeProps } from './types';
+/**
+ * Date display with the shared Datum hover tooltip (UTC, local zone, relative, epoch).
+ */
+export declare function DateTime({ date, variant, format, addSuffix, tooltip, timezone, disableTimezone, className, separator, timestamp, children, }: DateTimeProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;

package/dist/components/features/date-time/formatters.d.ts

@@ -0,0 +1,13 @@
+import type { FormatterOptions } from './types';
+/** e.g. "June 12th at 11:30 AM" — used for absolute / table dates. */
+export declare const DEFAULT_DATE_FORMAT = "MMMM do 'at' h:mm a";
+export declare function getBrowserTimezone(): string;
+export declare function parseDate(date: string | Date): Date | null;
+export declare function formatAbsoluteDate(date: Date, options: FormatterOptions): string;
+export declare function formatRelativeDate(date: Date, options: FormatterOptions): string;
+export declare function getTimezoneAbbreviation(date: Date, timezone: string): string;
+export declare function formatCombinedDate(date: Date, options: FormatterOptions, separator?: string): string;
+export declare function formatUTCDate(date: Date, format?: string): string;
+export declare function formatTimezoneDate(date: Date, timezone: string, format?: string): string;
+/** Microseconds since epoch, matching the Datum DateTime tooltip. */
+export declare function getTimestamp(date: Date): string;