@espressif/dashboard-ui-components 1.10.0 → 1.11.1

package/dist/components/nav-bar/nav-bar.js

@@ -0,0 +1,449 @@
+import { cn } from "../../utils/cn.js";
+import { isPresetColor } from "../../utils/color.js";
+import { useControlledState } from "../../core/hooks/use-controlled-state.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
+import { Button } from "../../core/button.js";
+import { useIsMobile } from "../../core/hooks/use-mobile.js";
+import { useNavBarOverflow } from "./use-nav-bar-overflow.js";
+import { useNavBarScroll } from "./use-nav-bar-scroll.js";
+import { NavBarDetailsPanel } from "./nav-bar-details-panel.js";
+import { NavBarMobileMenu } from "./nav-bar-mobile-menu.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Menu, X } from "lucide-react";
+import { motion } from "motion/react";
+import { createPortal } from "react-dom";
+//#region src/components/nav-bar/nav-bar.tsx
+var PRESET_TEXT = {
+	primary: "text-primary",
+	secondary: "text-secondary",
+	error: "text-error",
+	info: "text-info",
+	success: "text-success",
+	warning: "text-warning",
+	disabled: "text-disabled",
+	gray: "text-gray",
+	mist: "text-mist"
+};
+var PRESET_HOVER_TEXT = {
+	primary: "hover:text-primary",
+	secondary: "hover:text-secondary",
+	error: "hover:text-error",
+	info: "hover:text-info",
+	success: "hover:text-success",
+	warning: "hover:text-warning",
+	disabled: "hover:text-disabled",
+	gray: "hover:text-gray",
+	mist: "hover:text-mist"
+};
+var PRESET_BG = {
+	primary: "bg-primary/10",
+	secondary: "bg-secondary/10",
+	error: "bg-error/10",
+	info: "bg-info/10",
+	success: "bg-success/10",
+	warning: "bg-warning/10",
+	disabled: "bg-disabled/10",
+	gray: "bg-gray/10",
+	mist: "bg-mist/10"
+};
+var PRESET_HOVER_BG = {
+	primary: "hover:bg-primary/5",
+	secondary: "hover:bg-secondary/5",
+	error: "hover:bg-error/5",
+	info: "hover:bg-info/5",
+	success: "hover:bg-success/5",
+	warning: "hover:bg-warning/5",
+	disabled: "hover:bg-disabled/5",
+	gray: "hover:bg-gray/5",
+	mist: "hover:bg-mist/5"
+};
+function resolveNavColor(color) {
+	if (isPresetColor(color)) return {
+		textClass: PRESET_TEXT[color],
+		hoverTextClass: PRESET_HOVER_TEXT[color],
+		bgClass: PRESET_BG[color],
+		hoverBgClass: PRESET_HOVER_BG[color]
+	};
+	return {
+		textClass: "",
+		hoverTextClass: "",
+		bgClass: "",
+		hoverBgClass: "",
+		textStyle: { color },
+		bgStyle: { backgroundColor: `color-mix(in srgb, ${color} 10%, transparent)` }
+	};
+}
+function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActiveId, onActiveChange, openDetailsId: openDetailsIdProp, onDetailsPanelChange, position = "sticky", height, morphOnScroll = false, morphScrollThreshold = 50, morphScrollContainer, moreLabel = "More", linkComponent, color = "primary", mobileMenuTitle, mobileMenuTrigger, className, itemsClassName }) {
+	const isMobile = useIsMobile();
+	const resolvedColor = resolveNavColor(color);
+	const navRef = React$1.useRef(null);
+	const [activeId, setActiveId] = useControlledState({
+		value: activeIdProp,
+		defaultValue: defaultActiveId,
+		onChange: onActiveChange
+	});
+	const [openDetailsId, setOpenDetailsId] = useControlledState({
+		value: openDetailsIdProp ?? void 0,
+		defaultValue: null,
+		onChange: onDetailsPanelChange
+	});
+	const [mobileMenuOpen, setMobileMenuOpen] = React$1.useState(false);
+	const [navRect, setNavRect] = React$1.useState({
+		bottom: 0,
+		width: 0,
+		left: 0
+	});
+	const { containerRef, measureRef, moreButtonMeasureRef, visibleIds, overflowIds, showMore, measuring } = useNavBarOverflow(items);
+	const { isScrolled } = useNavBarScroll({
+		enabled: morphOnScroll && !isMobile,
+		threshold: morphScrollThreshold,
+		scrollContainerRef: morphScrollContainer
+	});
+	React$1.useEffect(() => {
+		if (!openDetailsId || !navRef.current) return;
+		const updateRect = () => {
+			if (navRef.current) {
+				const rect = navRef.current.getBoundingClientRect();
+				setNavRect({
+					bottom: rect.bottom,
+					width: rect.width,
+					left: rect.left
+				});
+			}
+		};
+		updateRect();
+		window.addEventListener("scroll", updateRect, { passive: true });
+		window.addEventListener("resize", updateRect, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", updateRect);
+			window.removeEventListener("resize", updateRect);
+		};
+	}, [openDetailsId]);
+	React$1.useEffect(() => {
+		if (!openDetailsId) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") setOpenDetailsId(null);
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [openDetailsId, setOpenDetailsId]);
+	React$1.useEffect(() => {
+		if (!openDetailsId) return;
+		const handleMouseDown = (e) => {
+			if (navRef.current && !navRef.current.contains(e.target)) setOpenDetailsId(null);
+		};
+		document.addEventListener("mousedown", handleMouseDown);
+		return () => document.removeEventListener("mousedown", handleMouseDown);
+	}, [openDetailsId, setOpenDetailsId]);
+	const handleItemClick = React$1.useCallback((item) => {
+		item.onClick?.();
+		setActiveId(item.id);
+		if (item.details) setOpenDetailsId(openDetailsId === item.id ? null : item.id);
+		else setOpenDetailsId(null);
+	}, [
+		openDetailsId,
+		setActiveId,
+		setOpenDetailsId
+	]);
+	React$1.useEffect(() => {
+		if (isMobile) setOpenDetailsId(null);
+	}, [isMobile, setOpenDetailsId]);
+	const resolvedHeight = height ?? "var(--espd-navbar-height)";
+	const activeDetailsItem = openDetailsId ? items.find((i) => i.id === openDetailsId) : void 0;
+	const [overflowDetailsItem, setOverflowDetailsItem] = React$1.useState(null);
+	const overflowDetailsRef = React$1.useRef(null);
+	const moreButtonRef = React$1.useRef(null);
+	const [overflowPanelPos, setOverflowPanelPos] = React$1.useState({
+		top: 0,
+		right: 0
+	});
+	React$1.useEffect(() => {
+		if (!overflowDetailsItem || !moreButtonRef.current) return;
+		const rect = moreButtonRef.current.getBoundingClientRect();
+		setOverflowPanelPos({
+			top: rect.bottom + 8,
+			right: window.innerWidth - rect.right
+		});
+	}, [overflowDetailsItem]);
+	React$1.useEffect(() => {
+		if (!overflowDetailsItem) return;
+		const handleMouseDown = (e) => {
+			if (overflowDetailsRef.current && !overflowDetailsRef.current.contains(e.target) && moreButtonRef.current && !moreButtonRef.current.contains(e.target)) setOverflowDetailsItem(null);
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") setOverflowDetailsItem(null);
+		};
+		document.addEventListener("mousedown", handleMouseDown);
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", handleMouseDown);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [overflowDetailsItem]);
+	const hasActiveOverflowItem = overflowIds.some((id) => id === activeId);
+	const navClasses = cn("relative z-50 w-full", "backdrop-blur-md supports-[backdrop-filter]:bg-background/80", position === "sticky" && "sticky", position === "fixed" && "fixed left-0", morphOnScroll && "mx-auto overflow-hidden", isScrolled && morphOnScroll ? "border border-header-border" : "border-b border-header-border", className);
+	const morphAnimateProps = morphOnScroll ? {
+		initial: false,
+		animate: {
+			maxWidth: isScrolled ? 896 : 3e3,
+			borderRadius: isScrolled ? 9999 : 0,
+			top: isScrolled ? 12 : 0,
+			boxShadow: isScrolled ? "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)" : "0 0 0 0 rgba(0,0,0,0)"
+		},
+		transition: {
+			type: "spring",
+			stiffness: 300,
+			damping: 30
+		}
+	} : { style: { top: 0 } };
+	if (isMobile) return /* @__PURE__ */ jsxs("nav", {
+		ref: navRef,
+		className: cn("relative z-50 w-full border-b border-header-border", "backdrop-blur-md supports-[backdrop-filter]:bg-background/80", position === "sticky" && "sticky top-0", position === "fixed" && "fixed top-0 left-0", className),
+		"aria-label": "Main navigation",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 px-4",
+			style: { height: resolvedHeight },
+			children: [
+				mobileMenuTrigger ? /* @__PURE__ */ jsx("div", {
+					onClick: () => setMobileMenuOpen(true),
+					children: mobileMenuTrigger
+				}) : /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "icon",
+					className: "size-10 shrink-0",
+					onClick: () => setMobileMenuOpen(true),
+					children: [/* @__PURE__ */ jsx(Menu, { className: "!size-5" }), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Open menu"
+					})]
+				}),
+				logo && /* @__PURE__ */ jsx("div", {
+					className: "flex-1 min-w-0",
+					children: logo
+				}),
+				rightContent && /* @__PURE__ */ jsx("div", {
+					className: "shrink-0 flex items-center gap-2",
+					children: rightContent
+				})
+			]
+		}), /* @__PURE__ */ jsx(NavBarMobileMenu, {
+			items,
+			activeId,
+			onItemClick: handleItemClick,
+			open: mobileMenuOpen,
+			onOpenChange: setMobileMenuOpen,
+			linkComponent,
+			title: mobileMenuTitle,
+			colorClasses: {
+				textClass: resolvedColor.textClass,
+				bgClass: resolvedColor.bgClass,
+				hoverBgClass: resolvedColor.hoverBgClass,
+				textStyle: resolvedColor.textStyle,
+				bgStyle: resolvedColor.bgStyle
+			}
+		})]
+	});
+	return /* @__PURE__ */ jsxs(motion.nav, {
+		ref: navRef,
+		className: navClasses,
+		...morphAnimateProps,
+		"aria-label": "Main navigation",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-4 mx-auto w-full py-2 transition-[padding] duration-300", isScrolled && morphOnScroll ? "px-4 md:px-6 lg:px-8" : "px-4 lg:px-6"),
+			style: { minHeight: resolvedHeight },
+			children: [
+				logo && /* @__PURE__ */ jsx("div", {
+					className: "shrink-0",
+					children: logo
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					ref: containerRef,
+					className: cn("flex-1 flex items-center min-w-0", logo ? "justify-center" : "justify-start", itemsClassName),
+					children: [
+						/* @__PURE__ */ jsx("ul", {
+							ref: measureRef,
+							className: "flex items-center gap-1 list-none m-0 p-0 absolute invisible h-0 overflow-hidden whitespace-nowrap pointer-events-none",
+							"aria-hidden": "true",
+							children: items.map((item) => /* @__PURE__ */ jsx("li", {
+								"data-nav-item-id": item.id,
+								className: "shrink-0",
+								children: /* @__PURE__ */ jsx(NavBarItemTrigger, {
+									item,
+									isActive: false,
+									isDetailsOpen: false,
+									onClick: () => {},
+									tabIndex: -1
+								})
+							}, item.id))
+						}),
+						/* @__PURE__ */ jsx("div", {
+							ref: moreButtonMeasureRef,
+							className: "absolute invisible h-0 overflow-hidden pointer-events-none",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx(MoreButton, {
+								label: moreLabel,
+								hasActiveOverflowItem: false
+							})
+						}),
+						/* @__PURE__ */ jsx("ul", {
+							className: cn("flex items-center gap-1 list-none m-0 p-0", measuring && "opacity-0"),
+							role: "menubar",
+							"aria-label": "Main navigation",
+							children: items.filter((item) => visibleIds.includes(item.id)).map((item) => /* @__PURE__ */ jsx("li", {
+								role: "none",
+								className: "shrink-0",
+								children: /* @__PURE__ */ jsx(NavBarItemTrigger, {
+									item,
+									isActive: activeId === item.id,
+									isDetailsOpen: openDetailsId === item.id,
+									onClick: () => handleItemClick(item),
+									linkComponent,
+									resolvedColor,
+									isPill: isScrolled && morphOnScroll
+								})
+							}, item.id))
+						}),
+						showMore && /* @__PURE__ */ jsx("div", {
+							ref: moreButtonRef,
+							className: cn("shrink-0 ml-1", measuring && "opacity-0"),
+							children: /* @__PURE__ */ jsxs(DropdownMenu, {
+								onOpenChange: (open) => {
+									if (open) setOverflowDetailsItem(null);
+								},
+								children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(MoreButton, {
+										label: moreLabel,
+										hasActiveOverflowItem,
+										resolvedColor
+									})
+								}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+									align: "end",
+									sideOffset: 8,
+									children: items.filter((item) => overflowIds.includes(item.id)).map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+										onClick: () => {
+											item.onClick?.();
+											setActiveId(item.id);
+											setOpenDetailsId(null);
+											if (item.details) setOverflowDetailsItem(overflowDetailsItem?.id === item.id ? null : item);
+										},
+										className: cn(activeId === item.id && `${resolvedColor.textClass} ${resolvedColor.bgClass}`),
+										style: activeId === item.id && resolvedColor.textStyle ? {
+											...resolvedColor.textStyle,
+											...resolvedColor.bgStyle
+										} : void 0,
+										disabled: item.disabled,
+										children: [item.icon, item.label]
+									}, item.id))
+								})]
+							})
+						}),
+						overflowDetailsItem?.details && createPortal(/* @__PURE__ */ jsxs("div", {
+							ref: overflowDetailsRef,
+							className: cn("fixed z-50", "w-max max-w-[min(24rem,calc(100vw-2rem))]", "rounded-lg border border-border bg-background p-4 shadow-lg", "animate-in fade-in-0 zoom-in-95"),
+							style: {
+								top: overflowPanelPos.top,
+								right: overflowPanelPos.right
+							},
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setOverflowDetailsItem(null),
+								className: cn("absolute top-2 right-2 p-1 rounded-md", "text-foreground/40 hover:text-foreground hover:bg-foreground/5", "transition-colors cursor-pointer"),
+								"aria-label": "Close panel",
+								children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+							}), overflowDetailsItem.details]
+						}), document.body)
+					]
+				}),
+				rightContent && /* @__PURE__ */ jsx("div", {
+					className: "shrink-0 flex items-center gap-2",
+					children: rightContent
+				})
+			]
+		}), /* @__PURE__ */ jsx(NavBarDetailsPanel, {
+			item: activeDetailsItem,
+			openDetailsId: openDetailsId ?? null,
+			onClose: () => setOpenDetailsId(null),
+			navBottomOffset: navRect.bottom,
+			navWidth: navRect.width,
+			navLeft: navRect.left
+		})]
+	});
+}
+var MoreButton = React$1.forwardRef(function MoreButton({ label, hasActiveOverflowItem, resolvedColor, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		className: cn("inline-flex items-center gap-1 px-3 h-8 rounded-md", "text-sm font-medium whitespace-nowrap cursor-pointer", "transition-colors duration-150", "text-foreground/80 hover:text-foreground", resolvedColor ? resolvedColor.hoverBgClass : "hover:bg-foreground/5", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", hasActiveOverflowItem && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`),
+		style: hasActiveOverflowItem && resolvedColor?.textStyle ? {
+			...resolvedColor.textStyle,
+			...resolvedColor.bgStyle
+		} : void 0,
+		"aria-label": "More navigation items",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })]
+	});
+});
+function NavBarItemTrigger({ item, isActive, isDetailsOpen, onClick, linkComponent, tabIndex, resolvedColor, isPill }) {
+	const classes = cn("inline-flex items-center gap-1 px-3 h-8", isPill ? "rounded-full" : "rounded-md", "text-sm font-medium whitespace-nowrap cursor-pointer", "transition-colors duration-150", "text-foreground/80 hover:text-foreground", resolvedColor ? resolvedColor.hoverBgClass : "hover:bg-foreground/5", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`, isDetailsOpen && resolvedColor && `${resolvedColor.textClass} ${resolvedColor.bgClass}`, item.disabled && "opacity-50 pointer-events-none");
+	const colorStyle = resolvedColor?.textStyle && (isActive || isDetailsOpen) ? {
+		...resolvedColor.textStyle,
+		...resolvedColor.bgStyle
+	} : void 0;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		item.icon && /* @__PURE__ */ jsx("span", {
+			className: "shrink-0",
+			children: item.icon
+		}),
+		/* @__PURE__ */ jsx("span", { children: item.label }),
+		item.details && /* @__PURE__ */ jsx(ChevronDown, {
+			className: cn("size-3.5 transition-transform duration-200", isDetailsOpen && "rotate-180"),
+			"aria-hidden": "true"
+		})
+	] });
+	if (item.details) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: classes,
+		style: colorStyle,
+		onClick,
+		role: "menuitem",
+		"aria-expanded": isDetailsOpen,
+		"aria-haspopup": "true",
+		disabled: item.disabled,
+		tabIndex,
+		children: content
+	});
+	if (item.href) {
+		if (linkComponent) return /* @__PURE__ */ jsx(linkComponent, {
+			to: item.href,
+			className: classes,
+			style: colorStyle,
+			onClick,
+			role: "menuitem",
+			tabIndex,
+			children: content
+		});
+		return /* @__PURE__ */ jsx("a", {
+			href: item.href,
+			className: classes,
+			style: colorStyle,
+			onClick,
+			role: "menuitem",
+			tabIndex,
+			children: content
+		});
+	}
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: classes,
+		style: colorStyle,
+		onClick,
+		role: "menuitem",
+		disabled: item.disabled,
+		tabIndex,
+		children: content
+	});
+}
+//#endregion
+export { NavBar };

package/dist/components/nav-bar/use-nav-bar-overflow.js

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/nav-bar/use-nav-bar-overflow.ts
+var ITEM_GAP = 4;
+function useNavBarOverflow(items) {
+	const containerRef = useRef(null);
+	const measureRef = useRef(null);
+	const moreButtonMeasureRef = useRef(null);
+	const [state, setState] = useState({
+		visibleIds: items.map((i) => i.id),
+		overflowIds: []
+	});
+	const [measuring, setMeasuring] = useState(true);
+	const recalculate = useCallback(() => {
+		const container = containerRef.current;
+		const measureList = measureRef.current;
+		const moreButton = moreButtonMeasureRef.current;
+		if (!container || !measureList) return;
+		const containerWidth = container.clientWidth;
+		const moreButtonWidth = moreButton ? moreButton.getBoundingClientRect().width : 80;
+		const itemWidths = /* @__PURE__ */ new Map();
+		const measureItems = measureList.querySelectorAll("[data-nav-item-id]");
+		for (const li of measureItems) {
+			const id = li.getAttribute("data-nav-item-id");
+			if (id) itemWidths.set(id, li.getBoundingClientRect().width);
+		}
+		let totalWidth = 0;
+		for (let i = 0; i < items.length; i++) totalWidth += (itemWidths.get(items[i].id) ?? 0) + (i > 0 ? ITEM_GAP : 0);
+		if (totalWidth <= containerWidth) {
+			setState({
+				visibleIds: items.map((i) => i.id),
+				overflowIds: []
+			});
+			setMeasuring(false);
+			return;
+		}
+		const availableWidth = containerWidth - moreButtonWidth - ITEM_GAP;
+		let accumulatedWidth = 0;
+		let cutoffIndex = 0;
+		for (let i = 0; i < items.length; i++) {
+			const w = (itemWidths.get(items[i].id) ?? 0) + (i > 0 ? ITEM_GAP : 0);
+			if (accumulatedWidth + w > availableWidth) break;
+			accumulatedWidth += w;
+			cutoffIndex = i + 1;
+		}
+		setState({
+			visibleIds: items.slice(0, cutoffIndex).map((i) => i.id),
+			overflowIds: items.slice(cutoffIndex).map((i) => i.id)
+		});
+		setMeasuring(false);
+	}, [items]);
+	useLayoutEffect(() => {
+		recalculate();
+	}, [recalculate]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => {
+			recalculate();
+		});
+		ro.observe(container);
+		return () => ro.disconnect();
+	}, [recalculate]);
+	return {
+		containerRef,
+		measureRef,
+		moreButtonMeasureRef,
+		visibleIds: state.visibleIds,
+		overflowIds: state.overflowIds,
+		showMore: state.overflowIds.length > 0,
+		measuring
+	};
+}
+//#endregion
+export { useNavBarOverflow };

package/dist/components/nav-bar/use-nav-bar-scroll.js

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/nav-bar/use-nav-bar-scroll.ts
+function useNavBarScroll({ enabled, threshold, scrollContainerRef }) {
+	const [isScrolled, setIsScrolled] = useState(false);
+	const rafRef = useRef(null);
+	const getScrollTop = useCallback(() => {
+		if (scrollContainerRef?.current) return scrollContainerRef.current.scrollTop;
+		return window.scrollY;
+	}, [scrollContainerRef]);
+	const handleScroll = useCallback(() => {
+		if (rafRef.current !== null) return;
+		rafRef.current = requestAnimationFrame(() => {
+			setIsScrolled(getScrollTop() > threshold);
+			rafRef.current = null;
+		});
+	}, [threshold, getScrollTop]);
+	useEffect(() => {
+		if (!enabled) {
+			setIsScrolled(false);
+			return;
+		}
+		setIsScrolled(getScrollTop() > threshold);
+		const target = scrollContainerRef?.current ?? window;
+		target.addEventListener("scroll", handleScroll, { passive: true });
+		return () => {
+			target.removeEventListener("scroll", handleScroll);
+			if (rafRef.current !== null) {
+				cancelAnimationFrame(rafRef.current);
+				rafRef.current = null;
+			}
+		};
+	}, [
+		enabled,
+		handleScroll,
+		threshold,
+		getScrollTop,
+		scrollContainerRef
+	]);
+	return { isScrolled };
+}
+//#endregion
+export { useNavBarScroll };

package/dist/components/overflow-badge-list/overflow-badge-list.js

@@ -0,0 +1,58 @@
+import { cn } from "../../utils/cn.js";
+import Tooltip from "../tooltip/tooltip.js";
+import { StatusBadge } from "../status-badge/status-badge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/overflow-badge-list/overflow-badge-list.tsx
+function resolveBadge(item, index, defaultIcon, defaultColor) {
+	if (typeof item === "string") return {
+		key: `${item}-${index}`,
+		label: item,
+		icon: index === 0 ? defaultIcon : void 0,
+		color: defaultColor
+	};
+	return {
+		key: `${item.id ?? item.label}-${index}`,
+		label: item.label,
+		icon: item.icon,
+		color: item.color ?? defaultColor
+	};
+}
+function OverflowBadgeList({ items, icon, badgeColor, badgeVariant = "outline", badgeSize = "default", maxBadgesToShow = 1, noneLabel, andMoreLabel, className }) {
+	if (items.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: noneLabel
+	});
+	const badges = items.map((item, index) => resolveBadge(item, index, icon, badgeColor));
+	const visibleCount = Math.min(Math.max(1, maxBadgesToShow), badges.length);
+	const visibleBadges = badges.slice(0, visibleCount);
+	const hiddenCount = badges.length - visibleCount;
+	const tooltipContent = hiddenCount > 0 ? /* @__PURE__ */ jsx("ul", {
+		className: "max-h-48 max-w-xs list-disc space-y-1 overflow-y-auto pl-4 text-left text-sm",
+		children: badges.map((badge) => /* @__PURE__ */ jsx("li", {
+			className: "break-words",
+			children: badge.label
+		}, badge.key))
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-wrap items-center gap-2", className),
+		children: [visibleBadges.map((badge) => /* @__PURE__ */ jsx(StatusBadge, {
+			label: badge.label,
+			icon: badge.icon,
+			variant: badgeVariant,
+			color: badge.color,
+			size: badgeSize,
+			className: "max-w-[12rem]"
+		}, badge.key)), hiddenCount > 0 && tooltipContent ? /* @__PURE__ */ jsx(Tooltip, {
+			content: tooltipContent,
+			side: "top",
+			align: "start",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "cursor-default shrink-0 text-sm text-muted-foreground underline decoration-dotted underline-offset-2",
+				tabIndex: 0,
+				children: andMoreLabel
+			})
+		}) : null]
+	});
+}
+//#endregion
+export { OverflowBadgeList };