@epam/ai-dial-navigation-panel 1.3.0-dev.98 → 1.3.0-rc.1

package/index.js

@@ -1,98 +1,101 @@
 import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
-import { Avatar as n, BASE_ICON_SIZE as r, Button as i, DIAL_ICON_SIZE as a, DIAL_KIT_ICON_STROKE as o, Dropdown as s, DropdownItemType as c, EllipsisTooltip as l, IconButton as u, MenuItem as d, MenuItemMark as f } from "@epam/ai-dial-ui-kit";
-import { Fragment as p, createContext as m, memo as h, useCallback as g, useContext as _, useEffect as v, useId as y, useMemo as b, useState as x } from "react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { IconCheck as T, IconChevronRight as E, IconLogout as D, IconSettings as O, IconUser as k } from "@tabler/icons-react";
-import { BottomSheetShell as A } from "@epam/ai-dial-conversation-input";
+import { Avatar as n, BASE_ICON_SIZE as r, Button as i, DIAL_ICON_SIZE as a, DIAL_KIT_ICON_STROKE as o, Dropdown as s, DropdownItemType as c, ElementSize as l, EllipsisTooltip as u, GhostIconButton as d, IconButton as f, MenuItem as p, MenuItemMark as m, Tooltip as h } from "@epam/ai-dial-ui-kit";
+import { Fragment as g, createContext as _, memo as v, useCallback as y, useContext as b, useEffect as x, useId as S, useMemo as C, useRef as w, useState as T } from "react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { IconCheck as k, IconChevronDown as A, IconChevronRight as j, IconChevronUp as ee, IconLayoutSidebar as M, IconLogout as te, IconSettings as N, IconUser as P, IconX as ne } from "@tabler/icons-react";
+import { BottomSheetShell as F } from "@epam/ai-dial-conversation-input";
 //#region src/constants/public-class-names.ts
-var j = {
+var I = {
 	rail: "dial-navigation-panel-rail",
-	item: "dial-navigation-panel-item"
-}, M = {
+	item: "dial-navigation-panel-item",
+	sidebar: "dial-navigation-panel-sidebar",
+	sidebarItem: "dial-navigation-panel-sidebar-item",
+	sidebarFooter: "dial-navigation-panel-sidebar-footer"
+}, L = {
 	rail: "_rail_1hxk4_1",
 	item: "_item_1hxk4_6",
 	itemActive: "_itemActive_1hxk4_33",
 	itemFilled: "_itemFilled_1hxk4_38",
 	itemFilledOutline: "_itemFilledOutline_1hxk4_79"
-}, N = (e, t) => /* @__PURE__ */ C("a", {
+}, R = (e, t) => /* @__PURE__ */ D("a", {
 	href: e.href,
 	className: "contents",
 	children: t
-}), P = h(({ items: n, labels: r, logo: i, footer: s, renderLink: c = N, styles: l }) => {
-	let { colors: d, typography: f, className: m, cssVars: h } = l ?? {}, g = y().replace(/[^\w-]/g, ""), _ = `np-hover-gradient-${g}`, v = `np-active-gradient-${g}`, x = b(() => e({
-		"--np-bg": d?.background,
-		"--np-item-text": d?.itemText,
-		"--np-item-active-text": d?.itemActiveText,
-		"--np-item-selected-bg": d?.itemSelectedBackground,
-		"--np-item-hover-bg": d?.itemHoverBackground,
-		"--np-item-hover-icon": d?.itemHoverIcon ?? `url(#${_})`,
-		"--np-item-active-icon": d?.itemActiveIcon ?? `url(#${v})`,
-		"--np-item-active-bg": d?.itemActiveBackground,
-		"--np-font-family": f?.fontFamily
+}), z = v(({ items: n, labels: r, logo: i, footer: s, renderLink: c = R, styles: l }) => {
+	let { colors: u, typography: d, className: p, cssVars: m } = l ?? {}, h = S().replace(/[^\w-]/g, ""), _ = `np-hover-gradient-${h}`, v = `np-active-gradient-${h}`, y = C(() => e({
+		"--np-bg": u?.background,
+		"--np-item-text": u?.itemText,
+		"--np-item-active-text": u?.itemActiveText,
+		"--np-item-selected-bg": u?.itemSelectedBackground,
+		"--np-item-hover-bg": u?.itemHoverBackground,
+		"--np-item-hover-icon": u?.itemHoverIcon ?? `url(#${_})`,
+		"--np-item-active-icon": u?.itemActiveIcon ?? `url(#${v})`,
+		"--np-item-active-bg": u?.itemActiveBackground,
+		"--np-font-family": d?.fontFamily
 	}), [
-		d,
-		f?.fontFamily,
+		u,
+		d?.fontFamily,
 		_,
 		v
 	]);
-	return /* @__PURE__ */ w("nav", {
+	return /* @__PURE__ */ O("nav", {
 		"aria-label": r.ariaLabel,
 		style: {
-			...h,
-			...x
+			...m,
+			...y
 		},
-		className: t(M.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", f?.fontClassName, m, j.rail),
+		className: t(L.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", d?.fontClassName, p, I.rail),
 		children: [
-			/* @__PURE__ */ C("svg", {
+			/* @__PURE__ */ D("svg", {
 				"aria-hidden": !0,
 				className: "absolute size-0",
 				focusable: "false",
-				children: /* @__PURE__ */ w("defs", { children: [/* @__PURE__ */ w("linearGradient", {
+				children: /* @__PURE__ */ O("defs", { children: [/* @__PURE__ */ O("linearGradient", {
 					id: _,
 					gradientUnits: "userSpaceOnUse",
 					x1: "30.2",
 					y1: "-2.5",
 					x2: "-4.6",
 					y2: "25.2",
-					children: [/* @__PURE__ */ C("stop", {
+					children: [/* @__PURE__ */ D("stop", {
 						offset: "0",
 						stopColor: "#1d4ed8"
-					}), /* @__PURE__ */ C("stop", {
+					}), /* @__PURE__ */ D("stop", {
 						offset: "1",
 						stopColor: "#885df2"
 					})]
-				}), /* @__PURE__ */ w("linearGradient", {
+				}), /* @__PURE__ */ O("linearGradient", {
 					id: v,
 					gradientUnits: "userSpaceOnUse",
 					x1: "31.3",
 					y1: "-1.7",
 					x2: "0.2",
 					y2: "20.4",
-					children: [/* @__PURE__ */ C("stop", {
+					children: [/* @__PURE__ */ D("stop", {
 						offset: "0",
 						stopColor: "#1d4ed8"
-					}), /* @__PURE__ */ C("stop", {
+					}), /* @__PURE__ */ D("stop", {
 						offset: "1",
 						stopColor: "#885df2"
 					})]
 				})] })
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ O("div", {
 				className: "flex flex-col items-center",
-				children: [i && /* @__PURE__ */ C("a", {
+				children: [i && /* @__PURE__ */ D("a", {
 					href: i.href ?? "/",
 					"aria-label": i.ariaLabel,
 					className: "flex h-16 w-full shrink-0 items-center justify-center",
-					children: /* @__PURE__ */ C("span", {
+					children: /* @__PURE__ */ D("span", {
 						style: { backgroundImage: `url("${i.iconUrl}")` },
 						className: "h-6 w-6 bg-contain bg-center bg-no-repeat"
 					})
-				}), /* @__PURE__ */ C("div", {
+				}), /* @__PURE__ */ D("div", {
 					className: "flex flex-col items-center gap-2 p-2",
 					children: n.map((e) => {
-						let n = !!e.isActive && !!e.activeIcon;
-						return /* @__PURE__ */ C(p, { children: c(e, /* @__PURE__ */ C(u, {
-							icon: /* @__PURE__ */ C(n && e.activeIcon || e.icon, {
+						let n = !!e.isActive && !!e.activeIcon, r = n && e.activeIcon || e.icon;
+						return /* @__PURE__ */ D(g, { children: c(e, /* @__PURE__ */ D(f, {
+							icon: /* @__PURE__ */ D(r, {
 								size: a.LG,
 								stroke: o
 							}),
@@ -100,7 +103,7 @@ var j = {
 							"aria-current": e.isActive ? "page" : void 0,
 							tooltipProps: { tooltip: e.label },
 							tabIndex: -1,
-							className: t(M.item, "rounded-xl", e.isActive && M.itemActive, n && M.itemFilled, e.isActive && !n && M.itemFilledOutline, j.item)
+							className: t(L.item, "rounded-xl", e.isActive && L.itemActive, n && L.itemFilled, e.isActive && !n && L.itemFilledOutline, I.item)
 						})) }, e.id);
 					})
 				})]
@@ -108,93 +111,279 @@ var j = {
 			s
 		]
 	});
-}), F = { avatar: "_avatar_4hc9t_4" }, I = h(({ shortName: e, className: r, textClassName: i = "dial-tiny-text" }) => /* @__PURE__ */ C(n, {
+}), B = /* @__PURE__ */ function(e) {
+	return e.Sidebar = "sidebar", e.Drawer = "drawer", e;
+}({}), V = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]",
+	"[contenteditable=\"true\"]"
+].join(","), re = (e) => Array.from(e.querySelectorAll(V)).filter((e) => e.tabIndex >= 0 && !e.closest("[inert], [hidden], [aria-hidden=\"true\"]")), H = {
+	stopStart: "_stopStart_8i550_1",
+	stopEnd: "_stopEnd_8i550_5"
+}, ie = ({ activeGradientId: e }) => /* @__PURE__ */ D("svg", {
+	"aria-hidden": !0,
+	className: "absolute size-0",
+	focusable: "false",
+	children: /* @__PURE__ */ D("defs", { children: /* @__PURE__ */ O("linearGradient", {
+		id: e,
+		gradientUnits: "userSpaceOnUse",
+		x1: "31.3",
+		y1: "-1.7",
+		x2: "0.2",
+		y2: "20.4",
+		children: [/* @__PURE__ */ D("stop", {
+			offset: "0",
+			className: H.stopStart
+		}), /* @__PURE__ */ D("stop", {
+			offset: "1",
+			className: H.stopEnd
+		})]
+	}) })
+}), U = {
+	sidebar: "_sidebar_1w4pz_1",
+	sidebarColumn: "_sidebarColumn_1w4pz_7",
+	item: "_item_1w4pz_16",
+	itemActive: "_itemActive_1w4pz_21",
+	itemFilled: "_itemFilled_1w4pz_38",
+	itemFilledOutline: "_itemFilledOutline_1w4pz_45",
+	itemIcon: "_itemIcon_1w4pz_49",
+	footer: "_footer_1w4pz_55"
+}, ae = (e, t, n) => /* @__PURE__ */ D("a", {
+	href: e.href,
+	...n,
+	children: t
+}), oe = (e, t) => e ? "w-[320px] max-w-full" : t ? "w-[72px]" : "w-[336px]", se = (e, n) => e ? t("fixed inset-y-0 inset-s-0 z-50 flex flex-col overflow-hidden shadow-sm outline-none", "transition-[transform,visibility] duration-200 ease-in-out motion-reduce:transition-none", n ? "visible translate-x-0" : "invisible ltr:-translate-x-full rtl:translate-x-full") : t(U.sidebarColumn, "relative z-10 flex h-full shrink-0 flex-col overflow-hidden shadow-sm"), ce = v(({ items: n, labels: r, variant: i = B.Sidebar, isCollapsed: s = !1, onToggleCollapse: c, isOpen: u = !1, onClose: f, id: p, logo: m, renderLink: _ = ae, children: v, userMenu: y, footerActions: b, styles: T }) => {
+	let { colors: k, typography: A, className: j, cssVars: ee } = T ?? {}, te = A?.fontClassName ?? "dial-small-text", N = i === B.Drawer, P = !N && s, F = S(), L = p ?? F, R = `np-sidebar-gradient-${F.replace(/[^\w-]/g, "")}`, z = w(null), V = w(null), H = w(u);
+	x(() => {
+		let e = H.current;
+		H.current = u, N && (u && !e ? (V.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, z.current?.focus()) : !u && e && (V.current?.focus(), V.current = null));
+	}, [N, u]);
+	let ce = (e) => {
+		if (!e.currentTarget.contains(e.target)) return;
+		if (e.key === "Escape") {
+			f?.();
+			return;
+		}
+		if (e.key !== "Tab") return;
+		let t = re(e.currentTarget);
+		if (t.length === 0) {
+			e.preventDefault();
+			return;
+		}
+		let n = t[0], r = t[t.length - 1], i = document.activeElement;
+		e.shiftKey && (i === n || i === e.currentTarget) ? (e.preventDefault(), r.focus()) : !e.shiftKey && i === r && (e.preventDefault(), n.focus());
+	}, W = C(() => e({
+		"--np-sidebar-bg": k?.background,
+		"--np-sidebar-item-text": k?.itemText,
+		"--np-sidebar-item-hover-bg": k?.itemHoverBackground,
+		"--np-sidebar-item-selected-bg": k?.itemSelectedBackground,
+		"--np-sidebar-focus-outline": k?.focusOutline,
+		"--np-sidebar-gradient-start": k?.itemActiveGradientStart,
+		"--np-sidebar-gradient-end": k?.itemActiveGradientEnd,
+		"--np-sidebar-item-active-icon": k?.itemActiveIcon ?? `url(#${R})`,
+		"--np-sidebar-font-family": A?.fontFamily
+	}), [
+		k,
+		A?.fontFamily,
+		R
+	]), G = P ? r.expand ?? "Expand sidebar" : r.collapse ?? "Collapse sidebar", K = r.toggle ?? "Sidebar", q = r.close ?? "Close", J = (e, n) => /* @__PURE__ */ D("span", {
+		style: { backgroundImage: `url("${e}")` },
+		className: t("bg-contain bg-center bg-no-repeat", n)
+	}), le = () => /* @__PURE__ */ D(d, {
+		icon: /* @__PURE__ */ O("span", {
+			className: "relative block size-6 shrink-0",
+			children: [P && m && J(m.iconUrl, "absolute inset-0 transition-opacity group-focus-visible/toggle:opacity-0 group-hover/toggle:opacity-0"), /* @__PURE__ */ D(M, {
+				size: a.LG,
+				stroke: o,
+				className: t("absolute inset-0 rtl:scale-x-[-1]", P && m && "opacity-0 group-hover/toggle:opacity-100 group-focus-visible/toggle:opacity-100"),
+				"aria-hidden": !0
+			})]
+		}),
+		size: l.Large,
+		"aria-label": K,
+		"aria-expanded": !P,
+		"aria-controls": L,
+		tooltipProps: { tooltip: G },
+		onClick: c,
+		className: "group/toggle size-10! min-h-0! min-w-0! shrink-0 rounded-full! p-2!"
+	}), Y = () => /* @__PURE__ */ D(d, {
+		icon: /* @__PURE__ */ D(ne, {
+			size: a.LG,
+			stroke: o,
+			"aria-hidden": !0
+		}),
+		size: l.Large,
+		"aria-label": q,
+		tooltipProps: { tooltip: q },
+		onClick: f,
+		className: "size-10! min-h-0! min-w-0! shrink-0 rounded-full! p-2!"
+	}), X = () => m && /* @__PURE__ */ D("a", {
+		href: m.href ?? "/",
+		"aria-label": m.ariaLabel,
+		className: t("flex h-10 items-center", !N && "ps-2"),
+		children: J(P ? m.iconUrl : m.logoUrl ?? m.iconUrl, P ? "size-6" : "h-6 min-w-[116px]")
+	}), Z = () => /* @__PURE__ */ O("div", {
+		className: "flex shrink-0 items-center justify-between ps-4 pe-2 pt-3 pb-2",
+		children: [X(), f && Y()]
+	}), Q = () => /* @__PURE__ */ O(E, { children: [!(P && c) && X(), c && le()] }), $ = (e) => {
+		let n = !!e.isActive && !!e.activeIcon, r = n && e.activeIcon || e.icon, i = /* @__PURE__ */ D("span", {
+			className: t("flex size-6 shrink-0 items-center justify-center", U.itemIcon),
+			children: /* @__PURE__ */ D(r, {
+				size: a.LG,
+				stroke: o
+			})
+		}), s = _(e, /* @__PURE__ */ O(E, { children: [i, /* @__PURE__ */ D("span", {
+			className: P ? "sr-only" : te,
+			children: e.label
+		})] }), {
+			className: t("flex items-center rounded-full p-2 no-underline", P ? "size-10 justify-center" : "h-10 w-full gap-2", U.item, e.isActive && U.itemActive, n && U.itemFilled, e.isActive && !n && U.itemFilledOutline, I.sidebarItem),
+			"aria-current": e.isActive ? "page" : void 0
+		});
+		return /* @__PURE__ */ D("li", { children: P ? /* @__PURE__ */ D(h, {
+			tooltip: e.label,
+			asChild: !0,
+			children: s
+		}) : s }, e.id);
+	}, ue = P ? /* @__PURE__ */ O(g, { children: [b, y] }) : /* @__PURE__ */ O(g, { children: [y, b] });
+	return /* @__PURE__ */ O("nav", {
+		ref: z,
+		id: L,
+		"aria-label": r.ariaLabel,
+		tabIndex: N ? -1 : void 0,
+		inert: N && !u,
+		onKeyDown: N ? ce : void 0,
+		style: {
+			...ee,
+			...W
+		},
+		className: t(U.sidebar, se(N, u), oe(N, P), j, I.sidebar),
+		children: [
+			!k?.itemActiveIcon && /* @__PURE__ */ D(ie, { activeGradientId: R }),
+			N ? /* @__PURE__ */ O("div", {
+				className: "flex shrink-0 flex-col",
+				children: [Z(), /* @__PURE__ */ D("ul", {
+					className: "m-0 flex list-none flex-col gap-1 p-2",
+					children: n.map($)
+				})]
+			}) : /* @__PURE__ */ O("div", {
+				className: "flex shrink-0 flex-col gap-4 p-4",
+				children: [/* @__PURE__ */ D("div", {
+					className: "flex h-10 items-center justify-between",
+					children: Q()
+				}), /* @__PURE__ */ D("ul", {
+					className: "m-0 flex list-none flex-col gap-1 p-0",
+					children: n.map($)
+				})]
+			}),
+			/* @__PURE__ */ D("div", {
+				inert: P,
+				className: t("min-h-0 flex-1 overflow-hidden", P && "invisible"),
+				children: /* @__PURE__ */ D("div", {
+					className: t("flex h-full flex-col", N ? "w-full" : "w-[336px]"),
+					children: v
+				})
+			}),
+			/* @__PURE__ */ D("div", {
+				className: t("flex shrink-0 px-4 py-3 shadow-lg", U.footer, P ? "flex-col items-start gap-2" : "items-center justify-between gap-2", I.sidebarFooter),
+				children: ue
+			})
+		]
+	});
+}), W = /* @__PURE__ */ function(e) {
+	return e.Avatar = "avatar", e.Profile = "profile", e.Compact = "compact", e;
+}({}), G = { avatar: "_avatar_4hc9t_4" }, K = v(({ shortName: e, className: r, textClassName: i = "dial-tiny-text" }) => /* @__PURE__ */ D(n, {
 	name: e ?? "",
 	initials: e ?? "",
 	size: 28,
 	textClassName: i,
-	className: t(F.avatar, r)
-})), L = h(({ profile: e, alt: t }) => {
-	let r = e.isFallbackShown || !e.imageUrl;
-	return /* @__PURE__ */ C(n, {
+	className: t(G.avatar, r)
+})), q = v(({ profile: e, alt: t, size: r = 28, initialsClassName: i = "dial-tiny-text" }) => {
+	let a = e.isFallbackShown || !e.imageUrl;
+	return /* @__PURE__ */ D(n, {
 		name: e.displayName,
 		initials: e.shortName ?? "",
-		src: r ? void 0 : e.imageUrl,
-		alt: r ? "" : t,
-		size: 28,
-		textClassName: "dial-tiny-text",
-		className: F.avatar,
+		src: a ? void 0 : e.imageUrl,
+		alt: a ? "" : t,
+		size: r,
+		textClassName: i,
+		className: G.avatar,
 		onImageError: e.onImageError
 	});
-}), R = {
-	wrapper: "_wrapper_17aqp_1",
-	trigger: "_trigger_17aqp_5",
-	identityText: "_identityText_17aqp_18",
-	menuLabel: "_menuLabel_17aqp_22"
-}, z = h(({ profile: n, labels: r, groups: u, onLogout: d, onSettings: p, isTooltipHidden: m, styles: h }) => {
-	let { colors: g, typography: _, className: v, cssVars: y } = h ?? {}, x = _?.fontClassName ?? "dial-small-text", S = b(() => e({
-		"--np-avatar-bg": g?.avatarBackground,
-		"--np-avatar-text": g?.avatarText,
-		"--np-menu-text": g?.text,
-		"--np-trigger-hover-bg": g?.triggerHoverBackground,
-		"--np-font-family": _?.fontFamily
-	}), [g, _?.fontFamily]), T = b(() => t(R.menuLabel, x), [x]), E = b(() => {
-		let e = (u ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
+}), J = {
+	wrapper: "_wrapper_11e9t_1",
+	trigger: "_trigger_11e9t_5",
+	triggerOpen: "_triggerOpen_11e9t_18",
+	identityText: "_identityText_11e9t_22",
+	menuLabel: "_menuLabel_11e9t_26"
+}, le = v(({ profile: n, labels: r, groups: l, onLogout: d, onSettings: f, triggerVariant: p = W.Avatar, isTooltipHidden: h, isIdentityHidden: g = !1, styles: _ }) => {
+	let { colors: v, typography: y, className: b, cssVars: x } = _ ?? {}, [S, w] = T(!1), k = p === W.Profile, j = p === W.Compact, M = k || j, P = y?.fontClassName ?? "dial-small-text", ne = C(() => e({
+		"--np-avatar-bg": v?.avatarBackground,
+		"--np-avatar-text": v?.avatarText,
+		"--np-menu-text": v?.text,
+		"--np-trigger-hover-bg": v?.triggerHoverBackground,
+		"--np-trigger-open-bg": v?.triggerOpenBackground,
+		"--np-focus-outline": v?.focusOutline,
+		"--np-font-family": y?.fontFamily
+	}), [v, y?.fontFamily]), F = C(() => t(J.menuLabel, P), [P]), I = C(() => {
+		let e = (l ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
 			key: e,
-			label: /* @__PURE__ */ C("span", {
-				className: T,
+			label: /* @__PURE__ */ D("span", {
+				className: F,
 				children: t
 			}),
 			icon: n,
 			children: r.map((e) => ({
 				key: e.id,
-				label: /* @__PURE__ */ C("span", {
-					className: T,
+				label: /* @__PURE__ */ D("span", {
+					className: F,
 					children: e.label
 				}),
 				icon: e.icon,
-				mark: f.Check,
+				mark: m.Check,
 				checked: e.isActive,
 				onClick: e.onSelect
 			}))
-		}));
+		})), i = [...g ? [] : [{
+			key: "identity",
+			type: c.PlainText,
+			label: /* @__PURE__ */ O("div", {
+				className: "flex h-[40px] min-w-0 items-center gap-3",
+				children: [/* @__PURE__ */ D(K, { shortName: n.shortName }), /* @__PURE__ */ D(u, {
+					text: n.displayName,
+					className: t(J.identityText, P, "min-w-0 flex-1 truncate")
+				})]
+			})
+		}], ...e];
 		return [
-			{
-				key: "identity",
-				type: c.PlainText,
-				label: /* @__PURE__ */ w("div", {
-					className: "flex h-[40px] min-w-0 items-center gap-3",
-					children: [/* @__PURE__ */ C(I, { shortName: n.shortName }), /* @__PURE__ */ C(l, {
-						text: n.displayName,
-						className: t(R.identityText, x, "min-w-0 flex-1 truncate")
-					})]
-				})
-			},
-			...e,
-			{
+			...i,
+			...i.length > 0 ? [{
 				key: "divider-1",
 				type: c.Divider
-			},
-			...p ? [{
+			}] : [],
+			...f ? [{
 				key: "settings",
-				label: /* @__PURE__ */ C("span", {
-					className: T,
+				label: /* @__PURE__ */ D("span", {
+					className: F,
 					children: r.settings
 				}),
-				icon: /* @__PURE__ */ C(O, {
+				icon: /* @__PURE__ */ D(N, {
 					size: a.SM,
 					"aria-hidden": !0,
 					stroke: o
 				}),
-				onClick: p
+				onClick: f
 			}] : [],
 			{
 				key: "logout",
-				label: /* @__PURE__ */ C("span", {
-					className: T,
+				label: /* @__PURE__ */ D("span", {
+					className: F,
 					children: r.logOut
 				}),
-				icon: /* @__PURE__ */ C(D, {
+				icon: /* @__PURE__ */ D(te, {
 					size: a.SM,
 					"aria-hidden": !0,
 					stroke: o
@@ -203,52 +392,86 @@ var j = {
 			}
 		];
 	}, [
-		u,
-		x,
-		T,
+		l,
+		g,
+		P,
+		F,
 		r.logOut,
 		r.settings,
 		d,
-		p,
+		f,
 		n.displayName,
 		n.shortName
-	]);
-	return /* @__PURE__ */ C("div", {
+	]), L = () => {
+		if (!k) return /* @__PURE__ */ D(i, {
+			"aria-label": r.trigger,
+			tooltipProps: {
+				tooltip: n.email,
+				hideTooltip: h
+			},
+			iconBefore: /* @__PURE__ */ D(q, {
+				profile: n,
+				alt: r.avatarAlt,
+				size: j ? 24 : void 0,
+				initialsClassName: y?.avatarInitialsClassName
+			}),
+			className: t(j ? "size-10! min-h-0! min-w-0! gap-0 rounded-full! border-0! p-2!" : "size-[44px] gap-0 rounded-full! p-0", J.trigger, j && S && J.triggerOpen)
+		});
+		let e = S ? ee : A;
+		return /* @__PURE__ */ D(i, {
+			tooltipProps: {
+				tooltip: n.email,
+				hideTooltip: h
+			},
+			iconBefore: /* @__PURE__ */ D(q, {
+				profile: n,
+				alt: "",
+				size: 24,
+				initialsClassName: y?.avatarInitialsClassName
+			}),
+			label: /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(u, {
+				text: n.displayName,
+				className: t(J.identityText, P, "min-w-0 truncate")
+			}), /* @__PURE__ */ D("span", {
+				className: "sr-only",
+				children: r.trigger
+			})] }),
+			iconAfter: /* @__PURE__ */ D(e, {
+				size: a.SM,
+				stroke: o,
+				"aria-hidden": !0
+			}),
+			textClassName: "min-w-0",
+			className: t("h-10! min-h-0! max-w-full min-w-0! gap-2 rounded-full! border-0! p-2!", J.trigger, S && J.triggerOpen)
+		});
+	};
+	return /* @__PURE__ */ D("div", {
 		style: {
-			...y,
-			...S
+			...x,
+			...ne
 		},
-		className: t(R.wrapper, "flex size-[60px] items-center justify-center", v),
-		children: /* @__PURE__ */ C(s, {
-			placement: "top-end",
+		className: t(J.wrapper, M ? "flex min-w-0 items-center" : "flex size-[60px] items-center justify-center", k && "flex-1", b),
+		children: /* @__PURE__ */ D(s, {
+			className: M ? "max-w-full min-w-0" : void 0,
+			placement: M ? "top-start" : "top-end",
 			matchReferenceWidth: !1,
-			items: E,
-			children: /* @__PURE__ */ C(i, {
-				"aria-label": r.trigger,
-				tooltipProps: {
-					tooltip: n.email,
-					hideTooltip: m
-				},
-				iconBefore: /* @__PURE__ */ C(L, {
-					profile: n,
-					alt: r.avatarAlt
-				}),
-				className: t("size-[44px] gap-0 !rounded-full p-0", R.trigger)
-			})
+			items: I,
+			onOpenChange: w,
+			children: L()
 		})
 	});
-}), B = m(void 0), V = h(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
-	let [c, l] = x([]);
-	v(() => {
+}), Y = _(void 0), X = v(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
+	let [c, l] = T([]);
+	x(() => {
 		e || l([]);
 	}, [e]);
-	let u = g((e) => {
+	let u = y((e) => {
 		l((t) => [...t, e]);
-	}, []), d = g(() => {
+	}, []), d = y(() => {
 		l((e) => e.slice(0, -1));
-	}, []), f = g(() => {
+	}, []), f = y(() => {
 		l([]), t();
-	}, [t]), p = b(() => ({
+	}, [t]), p = C(() => ({
 		push: u,
 		pop: d,
 		close: f
@@ -257,9 +480,9 @@ var j = {
 		d,
 		f
 	]), m = c[c.length - 1];
-	return /* @__PURE__ */ C(B.Provider, {
+	return /* @__PURE__ */ D(Y.Provider, {
 		value: p,
-		children: /* @__PURE__ */ C(A, {
+		children: /* @__PURE__ */ D(F, {
 			isOpen: e,
 			onClose: f,
 			title: m?.title ?? r,
@@ -271,11 +494,11 @@ var j = {
 			children: m ? m.content : n
 		})
 	});
-}), H = () => {
-	let e = _(B);
+}), Z = () => {
+	let e = b(Y);
 	if (!e) throw Error("useSheetNavigation must be used within a NavigableBottomSheet");
 	return e;
-}, U = {
+}, Q = {
 	sheet: "_sheet_1k0ml_1",
 	row: "_row_1k0ml_12",
 	rowActive: "_rowActive_1k0ml_24",
@@ -283,145 +506,147 @@ var j = {
 	divider: "_divider_1k0ml_46",
 	mutedText: "_mutedText_1k0ml_50",
 	activeIcon: "_activeIcon_1k0ml_54"
-}, W = h(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ C("li", { children: /* @__PURE__ */ C(d, {
+}, $ = v(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ D("li", { children: /* @__PURE__ */ D(p, {
 	label: e,
 	labelClassName: s,
-	icon: r && /* @__PURE__ */ C("span", {
-		className: U.rowIcon,
+	icon: r && /* @__PURE__ */ D("span", {
+		className: Q.rowIcon,
 		children: r
 	}),
 	trailing: i,
-	mark: f.Highlight,
+	mark: m.Highlight,
 	selected: o,
 	"aria-current": a ? "true" : void 0,
-	className: t("h-auto gap-3 rounded-none px-4 py-[10px]", U.row, o && U.rowActive),
+	className: t("h-auto gap-3 rounded-none px-4 py-[10px]", Q.row, o && Q.rowActive),
 	onClick: n
-}) })), G = h(({ options: e, textClassName: t }) => {
-	let { pop: n } = H();
-	return /* @__PURE__ */ C("ul", {
+}) })), ue = v(({ options: e, textClassName: t }) => {
+	let { pop: n } = Z();
+	return /* @__PURE__ */ D("ul", {
 		className: "flex flex-col pb-4",
-		children: e.map((e) => /* @__PURE__ */ C(W, {
+		children: e.map((e) => /* @__PURE__ */ D($, {
 			label: e.label,
 			icon: e.icon,
 			textClassName: t,
 			isCurrent: e.isActive,
-			trailing: e.isActive ? /* @__PURE__ */ C(T, {
+			trailing: e.isActive ? /* @__PURE__ */ D(k, {
 				size: a.SM,
 				stroke: o,
 				"aria-hidden": !0,
-				className: U.activeIcon
+				className: Q.activeIcon
 			}) : void 0,
 			onClick: () => {
 				e.onSelect(), n();
 			}
 		}, e.id))
 	});
-}), K = h(({ profile: e, logOutLabel: n, onLogout: i, settingsLabel: a, onSettings: s, groups: c, textClassName: u = "dial-small-text" }) => {
-	let { push: d, close: f } = H(), p = (c ?? []).filter(({ options: e }) => e.length > 0);
-	return /* @__PURE__ */ w(S, { children: [
-		/* @__PURE__ */ w("div", {
+}), de = v(({ profile: e, logOutLabel: n, onLogout: i, settingsLabel: a, onSettings: s, groups: c, textClassName: l = "dial-small-text", avatarInitialsClassName: d }) => {
+	let { push: f, close: p } = Z(), m = (c ?? []).filter(({ options: e }) => e.length > 0);
+	return /* @__PURE__ */ O(E, { children: [
+		/* @__PURE__ */ O("div", {
 			className: "flex h-[56px] items-center gap-3 px-4 py-2",
-			children: [/* @__PURE__ */ C(L, {
+			children: [/* @__PURE__ */ D(q, {
 				profile: e,
-				alt: ""
-			}), /* @__PURE__ */ C(l, {
+				alt: "",
+				initialsClassName: d
+			}), /* @__PURE__ */ D(u, {
 				text: e.displayName,
-				className: t(U.mutedText, u, "min-w-0 flex-1 truncate")
+				className: t(Q.mutedText, l, "min-w-0 flex-1 truncate")
 			})]
 		}),
-		p.length > 0 && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("ul", {
+		m.length > 0 && /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("ul", {
 			className: "flex flex-col",
-			children: p.map((e) => /* @__PURE__ */ C(W, {
+			children: m.map((e) => /* @__PURE__ */ D($, {
 				label: e.label,
 				icon: e.icon,
-				textClassName: u,
-				trailing: /* @__PURE__ */ C(E, {
+				textClassName: l,
+				trailing: /* @__PURE__ */ D(j, {
 					size: r,
 					stroke: o,
 					"aria-hidden": !0,
-					className: t(U.rowIcon, "rtl:scale-x-[-1]")
+					className: t(Q.rowIcon, "rtl:scale-x-[-1]")
 				}),
-				onClick: () => d({
+				onClick: () => f({
 					title: e.label,
-					content: /* @__PURE__ */ C(G, {
+					content: /* @__PURE__ */ D(ue, {
 						options: e.options,
-						textClassName: u
+						textClassName: l
 					})
 				})
 			}, e.id))
-		}), /* @__PURE__ */ C("hr", { className: U.divider })] }),
-		/* @__PURE__ */ w("ul", {
+		}), /* @__PURE__ */ D("hr", { className: Q.divider })] }),
+		/* @__PURE__ */ O("ul", {
 			className: "flex flex-col pb-4",
-			children: [s && a && /* @__PURE__ */ C(W, {
+			children: [s && a && /* @__PURE__ */ D($, {
 				label: a,
-				textClassName: u,
-				icon: /* @__PURE__ */ C(O, {
+				textClassName: l,
+				icon: /* @__PURE__ */ D(N, {
 					size: r,
 					stroke: o,
 					"aria-hidden": !0
 				}),
 				onClick: () => {
-					f(), s?.();
+					p(), s?.();
 				}
-			}), /* @__PURE__ */ C(W, {
+			}), /* @__PURE__ */ D($, {
 				label: n,
-				textClassName: u,
-				icon: /* @__PURE__ */ C(D, {
+				textClassName: l,
+				icon: /* @__PURE__ */ D(te, {
 					size: r,
 					stroke: o,
 					"aria-hidden": !0
 				}),
 				onClick: () => {
-					f(), i();
+					p(), i();
 				}
 			})]
 		})
 	] });
-}), q = h(({ items: e, onSelectItem: t, profileLabel: n, logOutLabel: i, onLogout: a, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f }) => {
-	let { push: p, close: m } = H(), h = (e) => {
-		m(), t(e);
+}), fe = v(({ items: e, onSelectItem: t, profileLabel: n, logOutLabel: i, onLogout: a, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f, avatarInitialsClassName: p }) => {
+	let { push: m, close: h } = Z(), g = (e) => {
+		h(), t(e);
 	};
-	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("ul", {
+	return /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ O("ul", {
 		className: "flex flex-col pb-4",
 		children: [e.map((e) => {
 			let t = e.isActive && e.activeIcon || e.icon;
-			return /* @__PURE__ */ C(W, {
+			return /* @__PURE__ */ D($, {
 				label: e.label,
 				textClassName: f,
 				isCurrent: e.isActive,
 				isHighlighted: e.isActive,
-				icon: /* @__PURE__ */ C(t, {
+				icon: /* @__PURE__ */ D(t, {
 					size: r,
 					stroke: o
 				}),
-				onClick: () => h(e)
+				onClick: () => g(e)
 			}, e.id);
-		}), l && /* @__PURE__ */ C(W, {
+		}), l && /* @__PURE__ */ D($, {
 			label: n,
 			textClassName: f,
-			icon: /* @__PURE__ */ C(k, {
+			icon: /* @__PURE__ */ D(P, {
 				size: r,
 				stroke: o,
 				"aria-hidden": !0
 			}),
 			onClick: () => {
-				l && p({
+				l && m({
 					title: n,
-					content: /* @__PURE__ */ C(K, {
+					content: /* @__PURE__ */ D(de, {
 						profile: l,
 						groups: u,
 						logOutLabel: i,
 						onLogout: a,
 						settingsLabel: s,
 						onSettings: c,
-						textClassName: f
+						textClassName: f,
+						avatarInitialsClassName: p
 					})
 				});
 			}
 		})]
 	}), d] });
-}), J = h(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
-	let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, _ = b(() => e({
+}), pe = v(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
+	let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, _ = C(() => e({
 		"--np-sheet-text": p?.text,
 		"--np-sheet-item-hover": p?.itemHoverBackground,
 		"--np-sheet-item-active": p?.itemActiveBackground,
@@ -433,20 +658,21 @@ var j = {
 		"--np-avatar-bg": p?.avatarBackground,
 		"--np-avatar-text": p?.avatarText,
 		"--np-menu-active-icon": p?.activeIcon,
+		"--np-sheet-muted-text": p?.mutedText,
 		"--np-font-family": m?.fontFamily
 	}), [p, m?.fontFamily]);
-	return /* @__PURE__ */ C(V, {
+	return /* @__PURE__ */ D(X, {
 		isOpen: n,
 		onClose: r,
 		title: o.title,
 		closeLabel: o.close,
 		backLabel: o.back,
-		className: t(U.sheet, h),
+		className: t(Q.sheet, h),
 		style: {
 			...g,
 			..._
 		},
-		children: /* @__PURE__ */ C(q, {
+		children: /* @__PURE__ */ D(fe, {
 			items: i,
 			onSelectItem: a,
 			profileLabel: o.profile,
@@ -457,9 +683,10 @@ var j = {
 			profile: s,
 			groups: c,
 			footer: d,
-			textClassName: m?.fontClassName
+			textClassName: m?.fontClassName,
+			avatarInitialsClassName: m?.avatarInitialsClassName
 		})
 	});
 });
 //#endregion
-export { I as AvatarInitials, j as NAVIGATION_PANEL_CLASS, V as NavigableBottomSheet, q as NavigationMenuPage, P as NavigationPanel, J as NavigationSheet, G as OptionListPage, K as ProfilePage, W as SheetRow, L as UserAvatar, z as UserMenu, H as useSheetNavigation };
+export { K as AvatarInitials, I as NAVIGATION_PANEL_CLASS, X as NavigableBottomSheet, fe as NavigationMenuPage, z as NavigationPanel, pe as NavigationSheet, ce as NavigationSidebar, B as NavigationSidebarVariant, ue as OptionListPage, de as ProfilePage, $ as SheetRow, q as UserAvatar, le as UserMenu, W as UserMenuTriggerVariant, Z as useSheetNavigation };