themelia-react-ui 1.0.0 → 1.0.2

package/dist/message-SZUNB1eX.js

@@ -0,0 +1,127 @@
+"use client";
+import { useStrings as e } from "./lib/strings.js";
+import { t } from "./utils-BvH9PSmq.js";
+import { a as n } from "./typography-BxQgiZyw.js";
+import { t as r } from "./structure-CRdqVawd.js";
+import { n as i } from "./surface-recipes-Dd__PD-w.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/blocks/collaboration/message/message.types.ts
+var c = {
+	typing: "Typing…",
+	loading: "Loading message…"
+};
+//#endregion
+//#region src/components/blocks/collaboration/message/message.recipes.ts
+function l(e) {
+	return Array.isArray(e) ? e.some(l) : e != null && typeof e != "boolean" && e !== "";
+}
+var u = {
+	start: "grid-cols-[auto_minmax(0,1fr)]",
+	end: "grid-cols-[minmax(0,1fr)_auto]"
+}, d = {
+	start: "col-start-2",
+	end: "col-start-1"
+}, f = a(function({ className: e, ...n }, i) {
+	return /* @__PURE__ */ o(r, {
+		...n,
+		ref: i,
+		gap: "dense",
+		className: t("message--content min-w-0 max-w-full flex-1", e)
+	});
+}), p = a(function({ className: e, ...n }, i) {
+	return /* @__PURE__ */ o(r, {
+		...n,
+		ref: i,
+		direction: "horizontal",
+		align: "baseline",
+		gap: "sm",
+		wrap: !0,
+		className: t("message--header", e)
+	});
+}), m = a(function({ className: e, ...n }, i) {
+	return /* @__PURE__ */ o(r, {
+		...n,
+		ref: i,
+		direction: "horizontal",
+		align: "center",
+		gap: "xs",
+		wrap: !0,
+		className: t("message--actions", e)
+	});
+}), h = a(function({ tone: e = "muted", className: r, children: a, ...s }, c) {
+	let l = typeof a == "string" || typeof a == "number" || typeof a == "bigint";
+	return /* @__PURE__ */ o("div", {
+		...s,
+		ref: c,
+		"data-tone": e,
+		className: t("message--bubble min-w-0 max-w-full rounded-radius p-surface-xs break-words", e === "primary" ? "bg-primary text-primary-foreground" : e === "muted" ? "bg-muted text-muted-foreground" : e === "surface" ? t("bg-card text-card-foreground", i.frame.shell) : "text-foreground", r),
+		children: l ? /* @__PURE__ */ o(n, {
+			className: "text-inherit whitespace-pre-wrap",
+			lineHeight: "relaxed",
+			children: a
+		}) : a
+	});
+}), g = a(function({ children: e, className: r, ...i }, a) {
+	return /* @__PURE__ */ o("span", {
+		...i,
+		ref: a,
+		role: "status",
+		className: t("message--status", r),
+		children: /* @__PURE__ */ o(n, {
+			tag: "span",
+			size: "xs",
+			type: "secondary",
+			children: e
+		})
+	});
+}), _ = a(function({ align: i = "start", tone: a = "muted", avatar: _, author: v, timestamp: y, dateTime: b, actions: x, status: S, loading: C = !1, typing: w = !1, strings: T, children: E, className: D, ...O }, k) {
+	let A = e(c, T), j = l(_);
+	return /* @__PURE__ */ s(r, {
+		...O,
+		ref: k,
+		direction: "horizontal",
+		align: "start",
+		gap: "md",
+		"data-align": i,
+		"aria-busy": C || w || void 0,
+		className: t("message--component grid w-full min-w-0", j ? u[i] : "grid-cols-1", D),
+		children: [j && /* @__PURE__ */ o(r, {
+			direction: "horizontal",
+			align: "start",
+			gap: "md",
+			wrap: !1,
+			className: "message--avatar shrink-0",
+			children: _
+		}), /* @__PURE__ */ s(f, {
+			className: t("row-start-1", j && d[i], i === "end" && "items-end"),
+			children: [
+				(v !== void 0 || y !== void 0) && /* @__PURE__ */ s(p, { children: [v !== void 0 && /* @__PURE__ */ o(n, {
+					tag: "span",
+					weight: "medium",
+					children: v
+				}), y !== void 0 && /* @__PURE__ */ o("time", {
+					dateTime: b,
+					children: /* @__PURE__ */ o(n, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						className: "tabular-nums",
+						children: y
+					})
+				})] }),
+				/* @__PURE__ */ o(h, {
+					tone: a,
+					children: E
+				}),
+				(w || C || S !== void 0) && /* @__PURE__ */ o(g, { children: w ? A.typing : C ? A.loading : S }),
+				x !== void 0 && /* @__PURE__ */ o(m, { children: x })
+			]
+		})]
+	});
+});
+_.displayName = "Message";
+//#endregion
+export { p as a, u as c, f as i, d as l, m as n, g as o, h as r, l as s, _ as t, c as u };
+
+//# sourceMappingURL=message-SZUNB1eX.js.map

package/dist/message-SZUNB1eX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-SZUNB1eX.js","names":["Text","Stack","surfaceDividerRecipes","defaultMessageStrings","hasMessageMedia","media","messageColumns","messageContentColumn","MessageContent","forwardRef","props","cn","className","MessageHeader","MessageActions","MessageBubble","scalar","children","tone","MessageStatus","Message","stringsProp","strings","useStrings","hasAvatar","avatar","align","loading","typing","author","timestamp","status","actions"],"sources":["../src/components/blocks/collaboration/message/message.types.ts","../src/components/blocks/collaboration/message/message.recipes.ts","../src/components/blocks/collaboration/message/message.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport type { StringsProp } from '../../../../lib/strings';\nexport interface MessageStrings { typing: string; loading: string }\nexport const defaultMessageStrings: MessageStrings = { typing: 'Typing…', loading: 'Loading message…' };\nexport interface MessageProps extends ComponentPropsWithoutRef<'div'> {\n /** Message direction, independent of author or service role. */\n align?: 'start' | 'end';\n /** Bubble treatment. @default muted */\n tone?: 'muted' | 'primary' | 'plain' | 'surface';\n avatar?: ReactNode;\n author?: ReactNode;\n /** Caller-formatted time; datetime supplies machine-readable time when available. */\n timestamp?: ReactNode;\n dateTime?: string;\n actions?: ReactNode;\n status?: ReactNode;\n loading?: boolean;\n typing?: boolean;\n strings?: StringsProp<MessageStrings>;\n}\nexport interface MessagePartProps extends ComponentPropsWithoutRef<'div'> {}\nexport interface MessageBubbleProps extends MessagePartProps { tone?: 'muted' | 'primary' | 'plain' | 'surface' }\nexport interface MessageStatusProps extends ComponentPropsWithoutRef<'span'> {}\n","import type { ReactNode } from 'react';\n\n/** Obvious empty slot values have no media track; rich React nodes remain untouched. */\nexport function hasMessageMedia(media: ReactNode): boolean {\n\tif (Array.isArray(media)) return media.some(hasMessageMedia);\n\treturn media !== null && media !== undefined && typeof media !== 'boolean' && media !== '';\n}\n\n/** Transcript rows and their continuation regions share the actual media track. */\nexport const messageColumns = {\n\tstart: 'grid-cols-[auto_minmax(0,1fr)]',\n\tend: 'grid-cols-[minmax(0,1fr)_auto]',\n} as const;\n\nexport const messageContentColumn = {\n\tstart: 'col-start-2',\n\tend: 'col-start-1',\n} as const;\n","import { forwardRef } from 'react';\nimport { Stack } from '../../../base/structure';\nimport { Text } from '../../../typography';\nimport { surfaceDividerRecipes } from '../../../../lib/surface-recipes';\nimport { cn } from '../../../../lib/utils';\nimport { useStrings } from '../../../../lib/strings';\nimport { defaultMessageStrings, type MessageProps, type MessagePartProps, type MessageBubbleProps, type MessageStatusProps } from './message.types';\nimport { hasMessageMedia, messageColumns, messageContentColumn } from './message.recipes';\nexport const MessageContent = forwardRef<HTMLDivElement, MessagePartProps>(function MessageContent({ className, ...props }, ref) { return <Stack {...props} ref={ref} gap=\"dense\" className={cn('message--content min-w-0 max-w-full flex-1', className)} />; });\nexport const MessageHeader = forwardRef<HTMLDivElement, MessagePartProps>(function MessageHeader({ className, ...props }, ref) { return <Stack {...props} ref={ref} direction=\"horizontal\" align=\"baseline\" gap=\"sm\" wrap className={cn('message--header', className)} />; });\nexport const MessageActions = forwardRef<HTMLDivElement, MessagePartProps>(function MessageActions({ className, ...props }, ref) { return <Stack {...props} ref={ref} direction=\"horizontal\" align=\"center\" gap=\"xs\" wrap className={cn('message--actions', className)} />; });\nexport const MessageBubble = forwardRef<HTMLDivElement, MessageBubbleProps>(function MessageBubble({ tone = 'muted', className, children, ...props }, ref) {\n const scalar = typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint';\n return <div {...props} ref={ref} data-tone={tone} className={cn('message--bubble min-w-0 max-w-full rounded-radius p-surface-xs break-words', tone === 'primary' ? 'bg-primary text-primary-foreground' : tone === 'muted' ? 'bg-muted text-muted-foreground' : tone === 'surface' ? cn('bg-card text-card-foreground', surfaceDividerRecipes.frame.shell) : 'text-foreground', className)}>{scalar ? <Text className=\"text-inherit whitespace-pre-wrap\" lineHeight=\"relaxed\">{children}</Text> : children}</div>;\n});\nexport const MessageStatus = forwardRef<HTMLSpanElement, MessageStatusProps>(function MessageStatus({ children, className, ...props }, ref) { return <span {...props} ref={ref} role=\"status\" className={cn('message--status', className)}><Text tag=\"span\" size=\"xs\" type=\"secondary\">{children}</Text></span>; });\n/** Callback-free transcript presentation. Consumers own rich text, requests and delivery state. */\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(function Message({ align = 'start', tone = 'muted', avatar, author, timestamp, dateTime, actions, status, loading = false, typing = false, strings: stringsProp, children, className, ...props }, ref) {\n const strings = useStrings(defaultMessageStrings, stringsProp);\n const hasAvatar = hasMessageMedia(avatar);\n return <Stack {...props} ref={ref} direction=\"horizontal\" align=\"start\" gap=\"md\" data-align={align} aria-busy={loading || typing || undefined} className={cn('message--component grid w-full min-w-0', hasAvatar ? messageColumns[align] : 'grid-cols-1', className)}>\n  {hasAvatar && <Stack direction=\"horizontal\" align=\"start\" gap=\"md\" wrap={false} className=\"message--avatar shrink-0\">{avatar}</Stack>}\n  <MessageContent className={cn('row-start-1', hasAvatar && messageContentColumn[align], align === 'end' && 'items-end')}>\n   {(author !== undefined || timestamp !== undefined) && <MessageHeader>\n    {author !== undefined && <Text tag=\"span\" weight=\"medium\">{author}</Text>}\n    {timestamp !== undefined && <time dateTime={dateTime}><Text tag=\"span\" size=\"xs\" type=\"secondary\" className=\"tabular-nums\">{timestamp}</Text></time>}\n   </MessageHeader>}\n   <MessageBubble tone={tone}>{children}</MessageBubble>\n   {(typing || loading || status !== undefined) && <MessageStatus>{typing ? strings.typing : loading ? strings.loading : status}</MessageStatus>}\n   {actions !== undefined && <MessageActions>{actions}</MessageActions>}\n  </MessageContent>\n </Stack>;\n});\nMessage.displayName = 'Message';\n"],"mappings":"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"}

package/dist/{navigation-BTrEb5u4.js → navigation-DnQSNMT0.js}

@@ -1,12 +1,12 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-C2EKeIw3.js";
-import { n } from "./buttons-Co6GavvM.js";
-import { a as r } from "./typography-Cv8MT-82.js";
-import { t as i } from "./structure-BvW4vG4H.js";
-import { n as a } from "./action-menu-Cx3SdfbN.js";
-import { t as o } from "./badge-BZXZT9wd.js";
-import { a as s } from "./tabs-DY09eoZg.js";
+import { t } from "./utils-BvH9PSmq.js";
+import { a as n } from "./typography-BxQgiZyw.js";
+import { t as r } from "./button-BZDasD04.js";
+import { t as i } from "./structure-CRdqVawd.js";
+import { n as a } from "./action-menu-Drxw_vJk.js";
+import { t as o } from "./badge-CzId1Wlm.js";
+import { a as s } from "./tabs-BNgu7g0u.js";
 import { Fragment as c, forwardRef as l, useCallback as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 import { Globe as v, MoreHorizontal as y } from "lucide-react";
@@ -15,30 +15,39 @@ function b({ locales: e, onRenderLabel: a, variant: o = "buttons", onSelect: s }
 	let l = u((e, t) => {
 		t || s?.(e);
 	}, [s]);
-	return e.length === 0 ? null : o === "inline" ? /* @__PURE__ */ _("div", {
-		className: t("language-switcher--component", "flex items-center justify-center gap-2.5"),
+	return e.length === 0 ? null : o === "inline" ? /* @__PURE__ */ _(i, {
+		direction: "horizontal",
+		align: "center",
+		justify: "center",
+		gap: "md",
+		wrap: !1,
+		className: "language-switcher--component",
 		children: [/* @__PURE__ */ g(v, {
 			className: "size-icon text-muted-foreground/70",
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ g("div", {
-			className: "flex items-center justify-center gap-2.5",
-			children: e.map((n, i) => {
-				let o = a ? a(n) : n.nativeLabel;
+		}), /* @__PURE__ */ g(i, {
+			direction: "horizontal",
+			align: "center",
+			justify: "center",
+			gap: "md",
+			wrap: !1,
+			children: e.map((r, i) => {
+				let o = a ? a(r) : r.nativeLabel;
 				return /* @__PURE__ */ _(c, { children: [/* @__PURE__ */ g("button", {
 					type: "button",
-					onClick: () => l(n.value, n.active),
-					className: t("text-pxs transition-colors", n.active ? "text-primary-accent font-medium" : "text-muted-foreground hover:text-foreground"),
-					children: /* @__PURE__ */ g(r, {
+					onClick: () => l(r.value, r.active),
+					className: t("border-0 bg-transparent p-0 font-sans text-pxs transition-colors", r.active ? "text-primary-accent font-medium" : "text-muted-foreground hover:text-foreground"),
+					children: /* @__PURE__ */ g(n, {
 						tag: "span",
 						size: "pxs",
-						weight: n.active ? "medium" : "regular",
+						weight: r.active ? "medium" : "regular",
 						className: "text-inherit",
 						children: o
 					})
 				}), i < e.length - 1 && /* @__PURE__ */ g("span", {
 					"aria-hidden": "true",
 					className: "size-1 rounded-full bg-border"
-				})] }, n.value);
+				})] }, r.value);
 			})
 		})]
 	}) : /* @__PURE__ */ g(i, {
@@ -48,14 +57,14 @@ function b({ locales: e, onRenderLabel: a, variant: o = "buttons", onSelect: s }
 		wrap: !0,
 		gap: "md",
 		children: e.map((e) => {
-			let r = a ? a(e) : e.nativeLabel;
-			return /* @__PURE__ */ g(n, {
+			let n = a ? a(e) : e.nativeLabel;
+			return /* @__PURE__ */ g(r, {
 				type: "button",
 				tone: "secondary",
 				buttonStyle: e.active ? "solid" : "ghost",
 				onClick: () => l(e.value, e.active),
-				className: t("min-w-18 justify-center transition-colors", e.active ? "font-semibold text-primary-accent" : "text-muted-foreground"),
-				children: r
+				className: t("min-w-18 justify-center transition-colors", e.active ? "text-primary-accent" : "text-muted-foreground"),
+				children: n
 			}, e.value);
 		})
 	});
@@ -80,10 +89,10 @@ var C = l(function({ items: a, currentPath: c, variant: l = "default", scrollabl
 		direction: "horizontal",
 		gap: "2xs",
 		wrap: !1,
-		className: t("navigation-tabs--list w-max rounded-radius bg-muted p-space-2xs", y && "rounded-radius bg-muted/60"),
+		className: t("navigation-tabs--list w-max rounded-inner bg-muted p-space-2xs", y && "rounded-inner bg-muted/60"),
 		children: a.map((e) => {
 			let i = e.active ?? v === S(e.href), a = typeof e.icon == "string" ? void 0 : e.icon;
-			return /* @__PURE__ */ _(n, {
+			return /* @__PURE__ */ _(r, {
 				href: e.href,
 				disabled: e.disabled,
 				size: "sm",
@@ -91,14 +100,14 @@ var C = l(function({ items: a, currentPath: c, variant: l = "default", scrollabl
 				buttonStyle: i ? "solid" : "ghost",
 				icon: a,
 				"aria-current": i ? "page" : void 0,
-				className: t("navigation-tabs--item shrink-0", "rounded-radius", !y && i && "bg-background text-foreground shadow-sm hover:bg-background/90", !y && !i && "text-muted-foreground hover:bg-background/50 hover:text-foreground"),
+				className: t("navigation-tabs--item shrink-0", "rounded-inner", !y && i && "bg-background text-foreground shadow-sm hover:bg-background/90", !y && !i && "text-muted-foreground hover:bg-background/50 hover:text-foreground"),
 				children: [
 					typeof e.icon == "string" && /* @__PURE__ */ g("span", {
 						className: "navigation-tabs--icon text-inherit",
 						"aria-hidden": "true",
 						children: e.icon
 					}),
-					/* @__PURE__ */ g(r, {
+					/* @__PURE__ */ g(n, {
 						tag: "span",
 						size: "inherit",
 						weight: "medium",
@@ -131,48 +140,48 @@ C.displayName = "NavigationTabs";
 var w = {
 	more: "More",
 	navigationLabel: "Tab navigation"
-}, T = "inline-flex h-action shrink-0 items-center gap-space-sm rounded-radius-md px-control text-pxs font-medium whitespace-nowrap transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+}, T = "box-border inline-flex h-action shrink-0 items-center gap-space-sm rounded-inner px-control text-pxs font-medium whitespace-nowrap transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
 function E(e) {
 	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
 }
-var D = l(function({ items: n, value: i, onValueChange: s, className: c, tabClassName: l, activeTabClassName: u, strings: v, ...b }, x) {
-	let S = e(w, v), C = p(null), D = p(null), [O, k] = m(n.length);
+var D = l(function({ items: r, value: i, onValueChange: s, className: c, tabClassName: l, activeTabClassName: u, strings: v, ...b }, x) {
+	let S = e(w, v), C = p(null), D = p(null), [O, k] = m(r.length);
 	d(() => {
 		if (!C.current || !D.current) return;
-		let e = C.current, t = D.current, r = () => {
-			let r = e.clientWidth;
-			if (r === 0) {
-				k(n.length);
+		let e = C.current, t = D.current, n = () => {
+			let n = e.clientWidth;
+			if (n === 0) {
+				k(r.length);
 				return;
 			}
 			let i = Array.from(t.querySelectorAll("[data-tab-id]")), a = 0, o = 0;
 			for (let e of i) {
 				let t = e.offsetWidth + 4;
-				if (a + t + 72 <= r) a += t, o += 1;
+				if (a + t + 72 <= n) a += t, o += 1;
 				else break;
 			}
 			k(o === i.length ? o : Math.max(1, o));
 		};
-		if (r(), typeof ResizeObserver > "u") return;
-		let i = new ResizeObserver(r);
+		if (n(), typeof ResizeObserver > "u") return;
+		let i = new ResizeObserver(n);
 		return i.observe(e), () => i.disconnect();
-	}, [n]);
+	}, [r]);
 	let A = f(() => {
-		if (!i) return n;
-		let e = n.findIndex((e) => e.id === i);
-		if (e < 0 || e < O) return n;
-		let t = [...n], r = Math.max(0, O - 1);
-		return [t[e], t[r]] = [t[r], t[e]], t;
+		if (!i) return r;
+		let e = r.findIndex((e) => e.id === i);
+		if (e < 0 || e < O) return r;
+		let t = [...r], n = Math.max(0, O - 1);
+		return [t[e], t[n]] = [t[n], t[e]], t;
 	}, [
-		n,
+		r,
 		i,
 		O
 	]), j = A.slice(0, O), M = A.slice(O), N = (e) => {
 		s?.(e.id), e.onClick?.();
-	}, P = (e, n, a) => {
-		let s = e.icon, c = t(T, n ? t("bg-card text-foreground shadow-sm", u) : "text-muted-foreground hover:bg-muted/60", l), d = /* @__PURE__ */ _(h, { children: [
+	}, P = (e, r, a) => {
+		let s = e.icon, c = t(T, r ? t("bg-card text-foreground shadow-sm", u) : "text-muted-foreground hover:bg-muted/60", l), d = /* @__PURE__ */ _(h, { children: [
 			!!s && /* @__PURE__ */ g(s, { className: "size-icon-sm" }),
-			E(e.label) ? /* @__PURE__ */ g(r, {
+			E(e.label) ? /* @__PURE__ */ g(n, {
 				tag: "span",
 				size: "inherit",
 				weight: "medium",
@@ -183,7 +192,7 @@ var D = l(function({ items: n, value: i, onValueChange: s, className: c, tabClas
 			!!e.badge && /* @__PURE__ */ g(o, {
 				size: "sm",
 				tone: "secondary",
-				className: t("ml-space-sm", n ? "bg-primary/10 text-primary-accent" : "bg-muted-foreground/10 text-muted-foreground"),
+				className: t("ml-space-sm", r ? "bg-primary/10 text-primary-accent" : "bg-muted-foreground/10 text-muted-foreground"),
 				children: e.badge
 			})
 		] });
@@ -195,8 +204,8 @@ var D = l(function({ items: n, value: i, onValueChange: s, className: c, tabClas
 			href: e.href,
 			"data-tab-id": e.id,
 			role: "tab",
-			"aria-selected": n,
-			tabIndex: n || !i ? 0 : -1,
+			"aria-selected": r,
+			tabIndex: r || !i ? 0 : -1,
 			onClick: () => N(e),
 			className: t("overflow-tab-bar--tab", c),
 			children: d
@@ -204,8 +213,8 @@ var D = l(function({ items: n, value: i, onValueChange: s, className: c, tabClas
 			type: "button",
 			"data-tab-id": e.id,
 			role: "tab",
-			"aria-selected": n,
-			tabIndex: n || !i ? 0 : -1,
+			"aria-selected": r,
+			tabIndex: r || !i ? 0 : -1,
 			onClick: () => N(e),
 			className: t("overflow-tab-bar--tab", c),
 			children: d
@@ -219,10 +228,10 @@ var D = l(function({ items: n, value: i, onValueChange: s, className: c, tabClas
 			ref: D,
 			"aria-hidden": "true",
 			className: "pointer-events-none fixed left-0 top-0 z-[-1] flex h-0 w-0 items-center gap-space-xs overflow-hidden opacity-0",
-			children: n.map((e) => P(e, !1, { measure: !0 }))
+			children: r.map((e) => P(e, !1, { measure: !0 }))
 		}), /* @__PURE__ */ _("div", {
 			ref: C,
-			className: "overflow-tab-bar--viewport relative flex w-full min-w-0 max-w-full items-center gap-space-xs overflow-hidden rounded-radius bg-muted/40 p-space-xs",
+			className: "overflow-tab-bar--viewport relative flex w-full min-w-0 max-w-full items-center gap-space-xs overflow-hidden rounded-inner bg-muted/40 p-space-xs",
 			children: [/* @__PURE__ */ g("div", {
 				role: "tablist",
 				"aria-label": S.navigationLabel,
@@ -247,7 +256,7 @@ var D = l(function({ items: n, value: i, onValueChange: s, className: c, tabClas
 					type: "button",
 					"aria-label": S.more,
 					className: t(T, "text-muted-foreground hover:bg-muted/60"),
-					children: [/* @__PURE__ */ g(y, { className: "size-icon-sm" }), /* @__PURE__ */ g(r, {
+					children: [/* @__PURE__ */ g(y, { className: "size-icon-sm" }), /* @__PURE__ */ g(n, {
 						tag: "span",
 						size: "inherit",
 						weight: "medium",
@@ -264,4 +273,4 @@ D.displayName = "OverflowTabBar";
 //#endregion
 export { b as a, x as i, w as n, C as r, D as t };
 
-//# sourceMappingURL=navigation-BTrEb5u4.js.map
+//# sourceMappingURL=navigation-DnQSNMT0.js.map

package/dist/navigation-DnQSNMT0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-DnQSNMT0.js","names":["_Fragment","Text","Button","Stack","ActionMenu","Badge","TabScrollViewport","Fragment$1","LanguageSwitcher","handleSelect","useCallback","isActive","onSelect","value","locales","variant","Globe","label","onRenderLabel","locale","Fragment","cn","index","defaultNavigationTabsStrings","normalizePath","hashRouteIndex","rawUrl","origin","NavigationTabs","forwardRef","stringsProp","strings","useStrings","activePath","currentPath","prominent","list","items","item","Icon","scrollable","className","scrollStrings","defaultOverflowTabBarStrings","TAB_BUTTON_BASE","isSimpleText","OverflowTabBar","rootProps","containerRef","useRef","measureRef","visibleCount","setVisibleCount","useState","container","measure","compute","containerWidth","buttons","used","count","btn","w","observer","orderedItems","useMemo","activeIdx","i","next","lastVisibleIdx","visibleItems","overflowItems","onValueChange","renderTab","tabClasses","activeTabClassName","tabClassName","inner","options","MoreHorizontal"],"sources":["../src/components/base/navigation/language-switcher.tsx","../src/components/base/navigation/navigation-tabs.tsx","../src/components/base/navigation/overflow-tab-bar.tsx"],"sourcesContent":["/**\n * LanguageSwitcher — locale picker with two layouts: `buttons` (chunky\n * primary buttons) and `inline` (small text links separated by dots, prefixed\n * with a globe icon). Defaults to `buttons`.\n *\n * The library never navigates on its own. The consumer wires routing /\n * locale switching by passing `onSelect` (e.g. a Tanstack Router\n * `navigate(...)` or Inertia `router.visit(...)`). When `onSelect` is\n * absent the click is a no-op.\n */\nimport { Globe } from 'lucide-react';\nimport { Fragment, useCallback } from 'react';\n\nimport { Button } from '../buttons';\nimport { Text } from '../../typography';\nimport { Stack } from '../structure';\nimport { cn } from '../../../lib/utils';\nimport type { LocaleOption } from '../../../types/locale.types';\n\nexport interface LanguageSwitcherProps {\n\tlocales: LocaleOption[];\n\tonRenderLabel?: (options: LocaleOption) => string;\n\t/** Semantic tone. */\n\tvariant?: 'buttons' | 'inline';\n\tonSelect?: (value: string) => void;\n}\n\nexport function LanguageSwitcher({\n\tlocales,\n\tonRenderLabel,\n\tvariant = 'buttons',\n\tonSelect,\n}: LanguageSwitcherProps) {\n\tconst handleSelect = useCallback((value: string, isActive: boolean) => {\n\t\tif (isActive) {\n\t\t\treturn;\n\t\t}\n\n\t\tonSelect?.(value);\n\t}, [onSelect]);\n\n\tif (locales.length === 0) {\n\t\treturn null;\n\t}\n\n\tif (variant === 'inline') {\n\t\treturn (\n\t\t\t<Stack direction=\"horizontal\" align=\"center\" justify=\"center\" gap=\"md\" wrap={false} className=\"language-switcher--component\">\n\t\t\t\t<Globe className=\"size-icon text-muted-foreground/70\" aria-hidden=\"true\" />\n\t\t\t\t<Stack direction=\"horizontal\" align=\"center\" justify=\"center\" gap=\"md\" wrap={false}>\n\t\t\t\t\t{locales.map((locale, index) => {\n\t\t\t\t\t\tconst label = onRenderLabel\n\t\t\t\t\t\t\t? onRenderLabel(locale)\n\t\t\t\t\t\t\t: locale.nativeLabel;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Fragment key={locale.value}>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\t\thandleSelect(locale.value, locale.active)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t'border-0 bg-transparent p-0 font-sans text-pxs transition-colors',\n\t\t\t\t\t\t\t\t\t\tlocale.active\n\t\t\t\t\t\t\t\t\t\t\t? 'text-primary-accent font-medium'\n\t\t\t\t\t\t\t\t\t\t\t: 'text-muted-foreground hover:text-foreground',\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text tag=\"span\" size=\"pxs\" weight={locale.active ? 'medium' : 'regular'} className=\"text-inherit\">\n\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t{index < locales.length - 1 && (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-1 rounded-full bg-border\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Stack direction=\"horizontal\" align=\"center\" justify=\"center\" wrap gap=\"md\">\n\t\t\t{locales.map((locale) => {\n\t\t\t\tconst label = onRenderLabel ? onRenderLabel(locale) : locale.nativeLabel;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={locale.value}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\ttone=\"secondary\"\n\t\t\t\t\t\tbuttonStyle={locale.active ? 'solid' : 'ghost'}\n\t\t\t\t\t\tonClick={() => handleSelect(locale.value, locale.active)}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'min-w-18 justify-center transition-colors',\n\t\t\t\t\t\t\tlocale.active ? 'text-primary-accent' : 'text-muted-foreground',\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Stack>\n\t);\n}\n\nLanguageSwitcher.displayName = 'LanguageSwitcher';\n","/**\n * NavigationTabs — canonical route-tab navigation.\n *\n * The default compact treatment works for ordinary application navigation;\n * `variant=\"prominent\"` provides the stronger filled treatment without\n * introducing a second component or item vocabulary.\n */\nimport { forwardRef, type ReactNode } from 'react';\nimport type { LucideIcon } from 'lucide-react';\n\nimport { Badge } from '../badge';\nimport { Button } from '../buttons';\nimport { Stack } from '../structure';\nimport { Text } from '../../typography';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\nimport { TabScrollViewport, type TabsScrollStrings } from './tab-scroll-viewport';\n\nexport interface NavigationTabItem {\n\ttitle: string;\n\thref: string;\n\ticon?: LucideIcon | string;\n\tbadge?: ReactNode;\n\tactive?: boolean;\n\tdisabled?: boolean;\n}\n\nexport interface NavigationTabsStrings {\n\ttabsAria: string;\n}\n\nexport const defaultNavigationTabsStrings: NavigationTabsStrings = {\n\ttabsAria: 'Tab navigation',\n};\n\nexport type NavigationTabsVariant = 'default' | 'prominent';\n\nexport interface NavigationTabsProps {\n\t/** Tabs to render, in order. */\n\titems: readonly NavigationTabItem[];\n\t/** Path of the active route, used to mark the current tab. */\n\tcurrentPath?: string;\n\t/** Visual treatment of the tab row. */\n\tvariant?: NavigationTabsVariant;\n\t/** Show previous/next controls when route tabs overflow. Defaults to true. */\n\tscrollable?: boolean;\n\t/** Accessible labels for the previous/next scroll controls. */\n\tscrollStrings?: StringsProp<TabsScrollStrings>;\n\t/** Overrides the tab row's own copy. */\n\tstrings?: StringsProp<NavigationTabsStrings>;\n\tclassName?: string;\n}\n\nfunction normalizePath(rawUrl: string): string {\n\tconst hashRouteIndex = rawUrl.indexOf('#/');\n\tif (hashRouteIndex >= 0) {\n\t\treturn rawUrl.slice(hashRouteIndex).split('?')[0]?.replace(/\\/+$/, '') || '#/';\n\t}\n\n\ttry {\n\t\tconst origin = typeof window !== 'undefined' ? window.location.origin : 'http://localhost';\n\t\tconst parsed = new URL(rawUrl, origin);\n\t\treturn parsed.pathname.replace(/\\/+$/, '') || '/';\n\t} catch {\n\t\treturn rawUrl.split('?')[0]?.replace(/\\/+$/, '') || '/';\n\t}\n}\n\nexport const NavigationTabs = forwardRef<HTMLDivElement, NavigationTabsProps>(function NavigationTabs({\n\titems,\n\tcurrentPath,\n\tvariant = 'default',\n\tscrollable = true,\n\tscrollStrings,\n\tstrings: stringsProp,\n\tclassName,\n}: NavigationTabsProps, ref) {\n\tconst strings = useStrings(defaultNavigationTabsStrings, stringsProp);\n\tconst activePath = normalizePath(\n\t\tcurrentPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/'),\n\t);\n\tconst prominent = variant === 'prominent';\n\n\tconst list = <Stack\n\t\t\t\trender={<nav aria-label={strings.tabsAria} />}\n\t\t\t\tdirection=\"horizontal\"\n\t\t\t\tgap=\"2xs\"\n\t\t\t\twrap={false}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'navigation-tabs--list w-max rounded-inner bg-muted p-space-2xs',\n\t\t\t\t\tprominent && 'rounded-inner bg-muted/60',\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{items.map((item) => {\n\t\t\t\t\tconst isActive = item.active ?? activePath === normalizePath(item.href);\n\t\t\t\t\tconst Icon = typeof item.icon === 'string' ? undefined : item.icon;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={item.href}\n\t\t\t\t\t\t\thref={item.href}\n\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\ttone={isActive && prominent ? 'primary' : 'secondary'}\n\t\t\t\t\t\t\tbuttonStyle={isActive ? 'solid' : 'ghost'}\n\t\t\t\t\t\t\ticon={Icon}\n\t\t\t\t\t\t\taria-current={isActive ? 'page' : undefined}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t'navigation-tabs--item shrink-0',\n\t\t\t\t\t\t\t\t'rounded-inner',\n\t\t\t\t\t\t\t\t!prominent && isActive && 'bg-background text-foreground shadow-sm hover:bg-background/90',\n\t\t\t\t\t\t\t\t!prominent && !isActive && 'text-muted-foreground hover:bg-background/50 hover:text-foreground',\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{typeof item.icon === 'string' && (\n\t\t\t\t\t\t\t\t<span className=\"navigation-tabs--icon text-inherit\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\t\t\tsize=\"inherit\"\n\t\t\t\t\t\t\t\tweight=\"medium\"\n\t\t\t\t\t\t\t\tlineHeight=\"none\"\n\t\t\t\t\t\t\t\tclassName=\"navigation-tabs--title text-inherit\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t{item.badge !== undefined && item.badge !== null && (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\ttone=\"secondary\"\n\t\t\t\t\t\t\t\t\tclassName=\"navigation-tabs--badge\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.badge}\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Stack>;\n\treturn <div ref={ref} className={cn('navigation-tabs--component', 'w-full min-w-0', !scrollable && 'overflow-x-auto', className)}>\n\t\t{scrollable ? <TabScrollViewport strings={scrollStrings}>{list}</TabScrollViewport> : list}\n\t</div>;\n});\n\nNavigationTabs.displayName = 'NavigationTabs';\n","/**\n * OverflowTabBar — horizontal tab strip that gracefully degrades on narrow\n * containers. Tabs that would overflow are moved into a trailing \"More\"\n * dropdown so the strip never wraps. Uses a ResizeObserver to recompute on\n * container resize; the active tab is always kept visible by being moved\n * out of the overflow set when needed.\n *\n * Use `NavigationTabs` instead when a fixed route set cannot overflow.\n */\nimport { MoreHorizontal, type LucideIcon } from 'lucide-react';\nimport { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';\n\nimport { ActionMenu } from '../action-menu';\nimport { Badge } from '../badge';\nimport { Text } from '../../typography';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nexport interface OverflowTabBarStrings {\n\tmore: string;\n\tnavigationLabel: string;\n}\n\nexport const defaultOverflowTabBarStrings: OverflowTabBarStrings = {\n\tmore: 'More',\n\tnavigationLabel: 'Tab navigation',\n};\n\nexport interface OverflowTabItem {\n\t/** Stable identity for this entry. */\n\tid: string;\n\t/** Display label. */\n\tlabel: ReactNode;\n\t/** Destination for the entry, when it navigates. */\n\thref?: string;\n\t/** Leading glyph. */\n\ticon?: LucideIcon;\n\t/** Chip rendered beside the label. */\n\tbadge?: ReactNode;\n\tonClick?: () => void;\n}\n\nexport interface OverflowTabBarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n\t/** Entries to render, in order. */\n\titems: OverflowTabItem[];\n\t/** Currently active tab id. */\n\tvalue?: string;\n\t/** Fired with the id of the newly active tab. */\n\tonValueChange?: (id: string) => void;\n\ttabClassName?: string;\n\tactiveTabClassName?: string;\n\t/** Overrides this surface's own copy. */\n\tstrings?: StringsProp<OverflowTabBarStrings>;\n}\n\nconst TAB_BUTTON_BASE =\n\t'box-border inline-flex h-action shrink-0 items-center gap-space-sm rounded-inner px-control text-pxs font-medium whitespace-nowrap transition-colors ' +\n\t'hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';\n\nfunction isSimpleText(value: ReactNode): value is string | number | bigint {\n\treturn typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint';\n}\n\nexport const OverflowTabBar = forwardRef<HTMLDivElement, OverflowTabBarProps>(function OverflowTabBar({\n\titems,\n\tvalue,\n\tonValueChange,\n\tclassName,\n\ttabClassName,\n\tactiveTabClassName,\n\tstrings: stringsProp,\n\t...rootProps\n}, ref) {\n\tconst strings = useStrings(defaultOverflowTabBarStrings, stringsProp);\n\tconst containerRef = useRef<HTMLDivElement | null>(null);\n\tconst measureRef = useRef<HTMLDivElement | null>(null);\n\tconst [visibleCount, setVisibleCount] = useState(items.length);\n\n\t// Recompute how many tabs fit when container or items change.\n\tuseLayoutEffect(() => {\n\t\tif (!containerRef.current || !measureRef.current) return;\n\t\tconst container = containerRef.current;\n\t\tconst measure = measureRef.current;\n\n\t\tconst compute = () => {\n\t\t\tconst containerWidth = container.clientWidth;\n\t\t\tif (containerWidth === 0) {\n\t\t\t\tsetVisibleCount(items.length);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst moreReserve = 72; // approximate \"More\" trigger width\n\t\t\tconst buttons = Array.from(measure.querySelectorAll<HTMLElement>('[data-tab-id]'));\n\t\t\tlet used = 0;\n\t\t\tlet count = 0;\n\t\t\tfor (const btn of buttons) {\n\t\t\t\tconst w = btn.offsetWidth + 4; // gap allowance\n\t\t\t\tif (used + w + moreReserve <= containerWidth) {\n\t\t\t\t\tused += w;\n\t\t\t\t\tcount += 1;\n\t\t\t\t} else {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetVisibleCount(count === buttons.length ? count : Math.max(1, count));\n\t\t};\n\n\t\tcompute();\n\t\tif (typeof ResizeObserver === 'undefined') {\n\t\t\treturn;\n\t\t}\n\t\tconst observer = new ResizeObserver(compute);\n\t\tobserver.observe(container);\n\t\treturn () => observer.disconnect();\n\t}, [items]);\n\n\t// Ensure active tab is always visible; if it falls into the overflow set,\n\t// pull it forward by reducing the visible count to where it lives.\n\tconst orderedItems = useMemo(() => {\n\t\tif (!value) return items;\n\t\tconst activeIdx = items.findIndex((i) => i.id === value);\n\t\tif (activeIdx < 0 || activeIdx < visibleCount) return items;\n\t\t// Move active item into the visible window (swap with last visible).\n\t\tconst next = [...items];\n\t\tconst lastVisibleIdx = Math.max(0, visibleCount - 1);\n\t\t[next[activeIdx], next[lastVisibleIdx]] = [next[lastVisibleIdx], next[activeIdx]];\n\t\treturn next;\n\t}, [items, value, visibleCount]);\n\n\tconst visibleItems = orderedItems.slice(0, visibleCount);\n\tconst overflowItems = orderedItems.slice(visibleCount);\n\n\tconst handleSelect = (item: OverflowTabItem) => {\n\t\tonValueChange?.(item.id);\n\t\titem.onClick?.();\n\t};\n\n\tconst renderTab = (item: OverflowTabItem, isActive: boolean, options?: { measure?: boolean }) => {\n\t\tconst Icon = item.icon;\n\t\tconst tabClasses = cn(\n\t\t\tTAB_BUTTON_BASE,\n\t\t\tisActive\n\t\t\t\t? cn('bg-card text-foreground shadow-sm', activeTabClassName)\n\t\t\t\t: 'text-muted-foreground hover:bg-muted/60',\n\t\t\ttabClassName,\n\t\t);\n\t\tconst inner = (\n\t\t\t<>\n\t\t\t\t{!!Icon && <Icon className=\"size-icon-sm\" />}\n\t\t\t\t{isSimpleText(item.label) ? (\n\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" weight=\"medium\" lineHeight=\"tight\" className=\"text-inherit\">\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</Text>\n\t\t\t\t) : item.label}\n\t\t\t\t{!!item.badge && (\n\t\t\t\t\t<Badge\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\ttone=\"secondary\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'ml-space-sm',\n\t\t\t\t\t\t\tisActive ? 'bg-primary/10 text-primary-accent' : 'bg-muted-foreground/10 text-muted-foreground',\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.badge}\n\t\t\t\t\t</Badge>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t\tif (options?.measure) {\n\t\t\treturn (\n\t\t\t\t<span\n\t\t\t\t\tkey={item.id}\n\t\t\t\t\tdata-tab-id={item.id}\n\t\t\t\t\tclassName={cn('overflow-tab-bar--measure', tabClasses)}\n\t\t\t\t>\n\t\t\t\t\t{inner}\n\t\t\t\t</span>\n\t\t\t);\n\t\t}\n\t\tif (item.href) {\n\t\t\treturn (\n\t\t\t\t<a\n\t\t\t\t\tkey={item.id}\n\t\t\t\t\thref={item.href}\n\t\t\t\t\tdata-tab-id={item.id}\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\taria-selected={isActive}\n\t\t\t\t\ttabIndex={isActive || !value ? 0 : -1}\n\t\t\t\t\tonClick={() => handleSelect(item)}\n\t\t\t\t\tclassName={cn('overflow-tab-bar--tab', tabClasses)}\n\t\t\t\t>\n\t\t\t\t\t{inner}\n\t\t\t\t</a>\n\t\t\t);\n\t\t}\n\t\treturn (\n\t\t\t<button\n\t\t\t\tkey={item.id}\n\t\t\t\ttype=\"button\"\n\t\t\t\tdata-tab-id={item.id}\n\t\t\t\trole=\"tab\"\n\t\t\t\taria-selected={isActive}\n\t\t\t\ttabIndex={isActive || !value ? 0 : -1}\n\t\t\t\tonClick={() => handleSelect(item)}\n\t\t\t\tclassName={cn('overflow-tab-bar--tab', tabClasses)}\n\t\t\t>\n\t\t\t\t{inner}\n\t\t\t</button>\n\t\t);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn('overflow-tab-bar--component relative w-full min-w-0 max-w-full', className)}\n\t\t\t{...rootProps}\n\t\t>\n\t\t\t{/* Hidden measure row: always renders all tabs at native width so\n\t\t\t    we can measure how many fit. Visually hidden but laid out. */}\n\t\t\t<div\n\t\t\t\tref={measureRef}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"pointer-events-none fixed left-0 top-0 z-[-1] flex h-0 w-0 items-center gap-space-xs overflow-hidden opacity-0\"\n\t\t\t>\n\t\t\t\t{items.map((i) => renderTab(i, false, { measure: true }))}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tref={containerRef}\n\t\t\t\tclassName=\"overflow-tab-bar--viewport relative flex w-full min-w-0 max-w-full items-center gap-space-xs overflow-hidden rounded-inner bg-muted/40 p-space-xs\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\taria-label={strings.navigationLabel}\n\t\t\t\t\taria-orientation=\"horizontal\"\n\t\t\t\t\tclassName=\"overflow-tab-bar--tablist flex min-w-0 flex-1 items-center gap-space-xs overflow-hidden\"\n\t\t\t\t>\n\t\t\t\t\t{visibleItems.map((item) => renderTab(item, item.id === value))}\n\t\t\t\t</div>\n\t\t\t\t{overflowItems.length > 0 && (\n\t\t\t\t\t<ActionMenu\n\t\t\t\t\t\tactions={overflowItems.map((item) => ({\n\t\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\t\tlabel: item.label,\n\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t\tonClick: () => handleSelect(item),\n\t\t\t\t\t\t\t// Only the selected tint here; `density=\"table\"` carries the\n\t\t\t\t\t\t\t// compact type and inset, so the row stays on the token scale.\n\t\t\t\t\t\t\tclassName: cn(item.id === value && 'bg-primary/5 text-primary-accent'),\n\t\t\t\t\t\t}))}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tdensity=\"table\"\n\t\t\t\t\t\tcontentClassName=\"min-w-40\"\n\t\t\t\t\t\twidth=\"w-auto\"\n\t\t\t\t\t\tcloseOnSelect\n\t\t\t\t\t\tpreserveOrder\n\t\t\t\t\t\trenderTrigger={\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-label={strings.more}\n\t\t\t\t\t\t\t\tclassName={cn(TAB_BUTTON_BASE, 'text-muted-foreground hover:bg-muted/60')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MoreHorizontal className=\"size-icon-sm\" />\n\t\t\t\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" weight=\"medium\" lineHeight=\"tight\" className=\"text-inherit\">\n\t\t\t\t\t\t\t\t\t{strings.more}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nOverflowTabBar.displayName = 'OverflowTabBar';\n\n// useEffect is referenced indirectly through useLayoutEffect above; keep the\n// import so SSR builds that fall back to useEffect still compile cleanly.\nvoid useEffect;\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAAgBQ,EAAiB,EAChC,YACA,kBACA,aAAU,WACV,eACyB;CACzB,IAAMC,IAAeC,GAAa,GAAe,MAAsB;EACtE,AAAIC,KAIJC,IAAWC,CAAK;CACjB,GAAG,CAACD,CAAQ,CAAC;CAgDb,OA9CIE,EAAQ,WAAW,IACf,OAGJC,MAAY,WAEd,kBAACZ,GAAD;EAAO,WAAU;EAAa,OAAM;EAAS,SAAQ;EAAS,KAAI;EAAK,MAAM;EAAO,WAAU;EAA9F,UAAA,CACC,kBAACa,GAAD;GAAO,WAAU;GAAqC,eAAY;EAAQ,CAAA,GAC1E,kBAACb,GAAD;GAAO,WAAU;GAAa,OAAM;GAAS,SAAQ;GAAS,KAAI;GAAK,MAAM;GAC3E,UAAAW,EAAQ,KAAK,GAAQ,MAAU;IAC/B,IAAMG,IAAQC,IACXA,EAAcC,CAAM,IACpBA,EAAO;IAEV,OACC,kBAACC,GAAD,EAAA,UAAA,CACC,kBAAC,UAAD;KACC,MAAK;KACL,eACCX,EAAaU,EAAO,OAAOA,EAAO,MAAM;KAEzC,WAAWE,EACV,oEACAF,EAAO,SACJ,oCACA,6CACJ;KAEA,UAAA,kBAAClB,GAAD;MAAM,KAAI;MAAO,MAAK;MAAM,QAAQkB,EAAO,SAAS,WAAW;MAAW,WAAU;MAClF,UAAAF;KACI,CAAA;IACC,CAAA,GACPK,IAAQR,EAAQ,SAAS,KACzB,kBAAC,QAAD;KACC,eAAY;KACZ,WAAU;IACV,CAAA,CAEO,EAAA,GAvBKK,EAAO,KAuBZ;GAEZ,CAAC;EACK,CAAA,CACD;MAKR,kBAAChB,GAAD;EAAO,WAAU;EAAa,OAAM;EAAS,SAAQ;EAAS,MAAA;EAAK,KAAI;EACrE,UAAAW,EAAQ,KAAK,MAAW;GACxB,IAAMG,IAAQC,IAAgBA,EAAcC,CAAM,IAAIA,EAAO;GAE7D,OACC,kBAACjB,GAAD;IAEC,MAAK;IACL,MAAK;IACL,aAAaiB,EAAO,SAAS,UAAU;IACvC,eAAeV,EAAaU,EAAO,OAAOA,EAAO,MAAM;IACvD,WAAWE,EACV,6CACAF,EAAO,SAAS,wBAAwB,uBACzC;IAEC,UAAAF;GACM,GAXFE,EAAO,KAWL;EAEV,CAAC;CACK,CAAA;AAET;AAEA,EAAiB,cAAc;;;ACjF/B,IAAaI,IAAsD,EAClE,UAAU,iBACX;AAoBA,SAASC,EAAc,GAAwB;CAC9C,IAAMC,IAAiBC,EAAO,QAAQ,IAAI;CAC1C,IAAID,KAAkB,GACrB,OAAOC,EAAO,MAAMD,CAAc,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,QAAQ,QAAQ,EAAE,KAAK;CAG3E,IAAI;EACH,IAAME,IAAS,OAAO,SAAW,MAAc,OAAO,SAAS,SAAS;EAExE,OAAO,IADY,IAAID,GAAQC,CACxB,CAAA,CAAO,SAAS,QAAQ,QAAQ,EAAE,KAAK;CAC/C,QAAQ;EACP,OAAOD,EAAO,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,QAAQ,QAAQ,EAAE,KAAK;CACrD;AACD;AAEA,IAAaE,IAAiBC,EAAgD,SAAwB,EACrG,UACA,gBACA,aAAU,WACV,gBAAa,IACb,kBACA,SAASC,GACT,gBACuB,GAAK;CAC5B,IAAMC,IAAUC,EAAWT,GAA8BO,CAAW,GAC9DG,IAAaT,EAClBU,MAAgB,OAAO,SAAW,MAAc,OAAO,SAAS,WAAW,IAC5E,GACMC,IAAYpB,MAAY,aAExBqB,IAAO,kBAACjC,GAAD;EACV,QAAQ,kBAAC,OAAD,EAAK,cAAY4B,EAAQ,SAAW,CAAA;EAC5C,WAAU;EACV,KAAI;EACJ,MAAM;EACN,WAAWV,EACV,kEACAc,KAAa,2BACd;EAEC,UAAAE,EAAM,KAAK,MAAS;GACpB,IAAM1B,IAAW2B,EAAK,UAAUL,MAAeT,EAAcc,EAAK,IAAI,GAChEC,IAAO,OAAOD,EAAK,QAAS,WAAW,KAAA,IAAYA,EAAK;GAE9D,OACC,kBAACpC,GAAD;IAEC,MAAMoC,EAAK;IACX,UAAUA,EAAK;IACf,MAAK;IACL,MAAM3B,KAAYwB,IAAY,YAAY;IAC1C,aAAaxB,IAAW,UAAU;IAClC,MAAM4B;IACN,gBAAc5B,IAAW,SAAS,KAAA;IAClC,WAAWU,EACV,kCACA,iBACA,CAACc,KAAaxB,KAAY,kEAC1B,CAACwB,KAAa,CAACxB,KAAY,oEAC5B;IAdD,UAAA;KAgBE,OAAO2B,EAAK,QAAS,YACrB,kBAAC,QAAD;MAAM,WAAU;MAAqC,eAAY;MAC/D,UAAAA,EAAK;KACD,CAAA;KAEP,kBAACrC,GAAD;MACC,KAAI;MACJ,MAAK;MACL,QAAO;MACP,YAAW;MACX,WAAU;MAET,UAAAqC,EAAK;KACD,CAAA;KACLA,EAAK,UAAU,KAAA,KAAaA,EAAK,UAAU,QAC3C,kBAACjC,GAAD;MACC,MAAK;MACL,MAAK;MACL,WAAU;MAET,UAAAiC,EAAK;KACA,CAAA;IAED;GAtCF,GAAAA,EAAK,IAsCH;EAEV,CAAC;CACK,CAAA;CACT,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWjB,EAAG,8BAA8B,kBAAkB,CAACmB,KAAc,mBAAmBC,CAAS;EAC7H,UAAAD,IAAa,kBAAClC,GAAD;GAAmB,SAASoC;GAAgB,UAAAN;EAAwB,CAAA,IAAIA;CAClF,CAAA;AACN,CAAC;AAED,EAAe,cAAc;;;AC3H7B,IAAaO,IAAsD;CAClE,MAAM;CACN,iBAAiB;AAClB,GA6BMC,IACL;AAGD,SAASC,EAAa,GAAqD;CAC1E,OAAO,OAAOhC,KAAU,YAAY,OAAOA,KAAU,YAAY,OAAOA,KAAU;AACnF;AAEA,IAAaiC,IAAiBjB,EAAgD,SAAwB,EACrG,UACA,UACA,kBACA,cACA,iBACA,uBACA,SAASC,GACT,GAAGiB,KACD,GAAK;CACP,IAAMhB,IAAUC,EAAWW,GAA8Bb,CAAW,GAC9DkB,IAAeC,EAA8B,IAAI,GACjDC,IAAaD,EAA8B,IAAI,GAC/C,CAACE,GAAcC,KAAmBC,EAAShB,EAAM,MAAM;CAG7D,QAAsB;EACrB,IAAI,CAACW,EAAa,WAAW,CAACE,EAAW,SAAS;EAClD,IAAMI,IAAYN,EAAa,SACzBO,IAAUL,EAAW,SAErBM,UAAgB;GACrB,IAAMC,IAAiBH,EAAU;GACjC,IAAIG,MAAmB,GAAG;IACzB,EAAgBpB,EAAM,MAAM;IAC5B;GACD;GACA,IACMqB,IAAU,MAAM,KAAKH,EAAQ,iBAA8B,eAAe,CAAC,GAC7EI,IAAO,GACPC,IAAQ;GACZ,KAAK,IAAMC,KAAOH,GAAS;IAC1B,IAAMI,IAAID,EAAI,cAAc;IAC5B,IAAIF,IAAOG,IAAI,MAAeL,GAE7B,AADA,KAAQK,GACR,KAAS;SAET;GAEF;GACA,EAAgBF,MAAUF,EAAQ,SAASE,IAAQ,KAAK,IAAI,GAAGA,CAAK,CAAC;EACtE;EAGA,IADAJ,EAAQ,GACJ,OAAO,iBAAmB,KAC7B;EAED,IAAMO,IAAW,IAAI,eAAeP,CAAO;EAE3C,OADAO,EAAS,QAAQT,CAAS,SACbS,EAAS,WAAW;CAClC,GAAG,CAAC1B,CAAK,CAAC;CAIV,IAAM2B,IAAeC,QAAc;EAClC,IAAI,CAACpD,GAAO,OAAOwB;EACnB,IAAM6B,IAAY7B,EAAM,WAAW,MAAM8B,EAAE,OAAOtD,CAAK;EACvD,IAAIqD,IAAY,KAAKA,IAAYf,GAAc,OAAOd;EAEtD,IAAM+B,IAAO,CAAC,GAAG/B,CAAK,GAChBgC,IAAiB,KAAK,IAAI,GAAGlB,IAAe,CAAC;EAEnD,OADA,CAACiB,EAAKF,IAAYE,EAAKC,MAAmB,CAACD,EAAKC,IAAiBD,EAAKF,EAAU,GACzEE;CACR,GAAG;EAAC/B;EAAOxB;EAAOsC;CAAY,CAAC,GAEzBmB,IAAeN,EAAa,MAAM,GAAGb,CAAY,GACjDoB,IAAgBP,EAAa,MAAMb,CAAY,GAE/C1C,KAAgB,MAA0B;EAE/C,AADA+D,IAAgBlC,EAAK,EAAE,GACvBA,EAAK,UAAU;CAChB,GAEMmC,KAAa,GAAuB,GAAmB,MAAoC;EAChG,IAAMlC,IAAOD,EAAK,MACZoC,IAAarD,EAClBuB,GACAjC,IACGU,EAAG,qCAAqCsD,CAAkB,IAC1D,2CACHC,CACD,GACMC,IACL,kBAAA7E,GAAA,EAAA,UAAA;GACE,CAAC,CAACuC,KAAQ,kBAACA,GAAD,EAAM,WAAU,eAAgB,CAAA;GAC1CM,EAAaP,EAAK,KAAK,IACvB,kBAACrC,GAAD;IAAM,KAAI;IAAO,MAAK;IAAU,QAAO;IAAS,YAAW;IAAQ,WAAU;IAC3E,UAAAqC,EAAK;GACD,CAAA,IACHA,EAAK;GACR,CAAC,CAACA,EAAK,SACP,kBAACjC,GAAD;IACC,MAAK;IACL,MAAK;IACL,WAAWgB,EACV,eACAV,IAAW,sCAAsC,8CAClD;IAEC,UAAA2B,EAAK;GACA,CAAA;EAEP,EAAA,CAAA;EA6BH,OA3BIwC,GAAS,UAEX,kBAAC,QAAD;GAEC,eAAaxC,EAAK;GAClB,WAAWjB,EAAG,6BAA6BqD,CAAU;GAEpD,UAAAG;EACI,GALAvC,EAAK,EAKL,IAGJA,EAAK,OAEP,kBAAC,KAAD;GAEC,MAAMA,EAAK;GACX,eAAaA,EAAK;GAClB,MAAK;GACL,iBAAe3B;GACf,UAAUA,KAAY,CAACE,IAAQ,IAAI;GACnC,eAAeJ,EAAa6B,CAAI;GAChC,WAAWjB,EAAG,yBAAyBqD,CAAU;GAEhD,UAAAG;EACC,GAVGvC,EAAK,EAUR,IAIJ,kBAAC,UAAD;GAEC,MAAK;GACL,eAAaA,EAAK;GAClB,MAAK;GACL,iBAAe3B;GACf,UAAUA,KAAY,CAACE,IAAQ,IAAI;GACnC,eAAeJ,EAAa6B,CAAI;GAChC,WAAWjB,EAAG,yBAAyBqD,CAAU;GAEhD,UAAAG;EACM,GAVFvC,EAAK,EAUH;CAEV;CAEA,OACC,kBAAC,OAAD;EACM;EACL,WAAWjB,EAAG,kEAAkEoB,CAAS;EACzF,GAAIM;EAHL,UAAA,CAOC,kBAAC,OAAD;GACC,KAAKG;GACL,eAAY;GACZ,WAAU;GAET,UAAAb,EAAM,KAAK,MAAMoC,EAAUN,GAAG,IAAO,EAAE,SAAS,GAAK,CAAC,CAAC;EACpD,CAAA,GAEL,kBAAC,OAAD;GACC,KAAKnB;GACL,WAAU;GAFX,UAAA,CAIC,kBAAC,OAAD;IACC,MAAK;IACL,cAAYjB,EAAQ;IACpB,oBAAiB;IACjB,WAAU;IAET,UAAAuC,EAAa,KAAK,MAASG,EAAUnC,GAAMA,EAAK,OAAOzB,CAAK,CAAC;GAC1D,CAAA,GACJ0D,EAAc,SAAS,KACvB,kBAACnE,GAAD;IACC,SAASmE,EAAc,KAAK,OAAU;KACrC,IAAIjC,EAAK;KACT,OAAOA,EAAK;KACZ,MAAMA,EAAK;KACX,eAAe7B,EAAa6B,CAAI;KAGhC,WAAWjB,EAAGiB,EAAK,OAAOzB,KAAS,kCAAkC;IACtE,EAAE;IACF,OAAM;IACN,SAAQ;IACR,kBAAiB;IACjB,OAAM;IACN,eAAA;IACA,eAAA;IACA,eACC,kBAAC,UAAD;KACC,MAAK;KACL,cAAYkB,EAAQ;KACpB,WAAWV,EAAGuB,GAAiB,yCAAyC;KAHzE,UAAA,CAKC,kBAACmC,GAAD,EAAgB,WAAU,eAAgB,CAAA,GAC1C,kBAAC9E,GAAD;MAAM,KAAI;MAAO,MAAK;MAAU,QAAO;MAAS,YAAW;MAAQ,WAAU;MAC3E,UAAA8B,EAAQ;KACJ,CAAA,CACC;;GAET,CAAA,CAEE;EACD,CAAA,CAAA;;AAEP,CAAC;AAED,EAAe,cAAc"}