@lablup/ui-common 0.1.0-alpha.0

package/dist/components/StatusTag/StatusTag2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusTag2.js","names":[],"sources":["../../../src/components/StatusTag/StatusTag.tsx"],"sourcesContent":["/**\n * StatusTag Component (epic #2730 / issue #2738)\n *\n * Status badge with the canonical color semantics shared by every list /\n * table that has to render lifecycle state. Mirrors the Backend.AI WebUI\n * `SessionStatusTag` color choices so users carry a single mental model\n * across products: blue for transient/preparing, green for healthy\n * running, red for error, neutral for terminated, yellow for stopping.\n *\n * The component intentionally builds on the existing {@link Badge}\n * primitive — it does not duplicate Badge's color tokens. Instead it\n * adds:\n *\n * 1. A canonical `state` enum surface (`running`, `preparing`,\n *    `stopping`, `error`, `terminated`, `idle`, `busy`) so callers\n *    don't have to map their domain state onto Badge variants by hand.\n * 2. An optional pulsing dot indicator for transient states (preparing,\n *    stopping) so the UI visibly communicates \"in motion\" alongside\n *    the static color.\n *\n * This is a domain-agnostic primitive — it MUST NOT carry Session,\n * Model, Agent, or Squad-specific knowledge.\n */\n\nimport { memo } from \"react\";\nimport { Badge } from \"../Badge\";\nimport type { BadgeProps } from \"../Badge\";\nimport \"./StatusTag.css\";\n\n/**\n * Canonical lifecycle state surface accepted by {@link StatusTag}.\n *\n * The names are deliberately broad so domain types can map onto them:\n * - SessionState `\"starting\"`           → `\"preparing\"`\n * - SessionState `\"running\"` (healthy)  → `\"running\"`\n * - SessionState `\"idle\"`               → `\"idle\"`\n * - SessionState `\"busy\"`               → `\"busy\"`\n * - SessionState `\"stopping\"`           → `\"stopping\"`\n * - SessionState `\"terminated\"`         → `\"terminated\"`\n * - SessionState `\"error\"`              → `\"error\"`\n */\nexport type StatusKind =\n  \"running\" | \"preparing\" | \"idle\" | \"busy\" | \"stopping\" | \"terminated\" | \"error\";\n\nexport interface StatusTagProps {\n  /** Canonical lifecycle state. Drives color and indicator behavior. */\n  state: StatusKind;\n  /** Display label. Callers are responsible for i18n at the call site. */\n  label: string;\n  /** Override the underlying Badge size. Defaults to `\"small\"`. */\n  size?: BadgeProps[\"size\"];\n  /**\n   * When `true`, render a small pulsing dot before the label to\n   * communicate that the state is in motion. Defaults to a sensible\n   * choice based on `state` (transient states pulse, terminal ones\n   * don't).\n   */\n  pulse?: boolean;\n  /** Extra class names appended to the root span. */\n  className?: string;\n}\n\n/**\n * Map a {@link StatusKind} onto a {@link BadgeProps.variant}. Centralizes\n * the canonical color mapping so consumers can't drift.\n */\nfunction variantForState(state: StatusKind): BadgeProps[\"variant\"] {\n  switch (state) {\n    case \"running\":\n      return \"success\";\n    case \"preparing\":\n      return \"info\";\n    case \"idle\":\n      return \"default\";\n    case \"busy\":\n      return \"primary\";\n    case \"stopping\":\n      return \"warning\";\n    case \"terminated\":\n      return \"default\";\n    case \"error\":\n      return \"danger\";\n  }\n}\n\n/**\n * Default for the dot-pulse indicator. Transient states pulse, terminal\n * ones don't. Callers can override via the `pulse` prop.\n */\nfunction defaultPulseForState(state: StatusKind): boolean {\n  return state === \"preparing\" || state === \"stopping\" || state === \"busy\";\n}\n\nfunction StatusTagComponent({\n  state,\n  label,\n  size = \"small\",\n  pulse,\n  className = \"\",\n}: StatusTagProps) {\n  const showPulse = pulse ?? defaultPulseForState(state);\n  const composedClassName = [\"status-tag\", `status-tag--${state}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Badge variant={variantForState(state)} size={size} className={composedClassName}>\n      {showPulse && (\n        <span\n          className=\"status-tag__indicator\"\n          aria-hidden=\"true\"\n          data-testid=\"status-tag-indicator\"\n        />\n      )}\n      <span className=\"status-tag__label\">{label}</span>\n    </Badge>\n  );\n}\n\n/**\n * Memoized to avoid re-rendering rows that didn't change. The component\n * is a pure function of its props.\n */\nexport const StatusTag = memo(StatusTagComponent);\nexport default StatusTag;\n"],"mappings":";;;;;AAkEA,SAAS,EAAgB,GAA0C;CACjE,QAAQ,GAAR;EACE,KAAK,WACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,KAAK,YACH,OAAO;EACT,KAAK,cACH,OAAO;EACT,KAAK,SACH,OAAO;CACX;AACF;AAMA,SAAS,EAAqB,GAA4B;CACxD,OAAO,MAAU,eAAe,MAAU,cAAc,MAAU;AACpE;AAEA,SAAS,EAAmB,EAC1B,UACA,UACA,UAAO,SACP,UACA,eAAY,MACK;CACjB,IAAM,IAAY,KAAS,EAAqB,CAAK,GAC/C,IAAoB;EAAC;EAAc,eAAe;EAAS;CAAS,CAAC,CACxE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,GAAD;EAAO,SAAS,EAAgB,CAAK;EAAS;EAAM,WAAW;EAA/D,UAAA,CACG,KACC,kBAAC,QAAD;GACE,WAAU;GACV,eAAY;GACZ,eAAY;EACb,CAAA,GAEH,kBAAC,QAAD;GAAM,WAAU;GAAqB,UAAA;EAAY,CAAA,CAC5C;;AAEX;AAMA,IAAa,IAAY,EAAK,CAAkB"}

package/dist/components/StatusTag/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusTag, default } from './StatusTag';
+export type { StatusTagProps, StatusKind } from './StatusTag';

package/dist/components/StatusTag/index.js

@@ -0,0 +1,2 @@
+import { StatusTag as e } from "./StatusTag2.js";
+export { e as StatusTag, e as default };

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,107 @@
+import { ReactNode } from 'react';
+import { TabTagType, TabTagLabels } from './tabTags';
+export type { TabTagType, TabTagLabels } from './tabTags';
+export { TAG_CONFIG } from './tabTags';
+export interface TabItem {
+    id: string;
+    label: string;
+    content: ReactNode;
+    /**
+     * Show a "Required" badge next to the tab label.
+     * @deprecated Use `tag="required"` instead. Kept for backward compatibility.
+     */
+    required?: boolean;
+    /**
+     * Guide tag displayed after the tab label as a small badge.
+     * When set, takes precedence over the `required` boolean.
+     */
+    tag?: TabTagType;
+    /**
+     * Optional extra trailing node rendered next to the tab label (e.g. a
+     * count badge). Distinct from `tag` (which uses a fixed preset). Use this
+     * when migrating segmented controls that rendered their own inline count
+     * pill alongside the label.
+     */
+    labelExtra?: ReactNode;
+    /**
+     * Optional leading node rendered before the tab label (e.g. an icon).
+     * Useful when migrating segmented controls that prefix the label with
+     * an SVG glyph (e.g. ImportExportDialog source toggle: File / Paste / URL).
+     */
+    labelPrefix?: ReactNode;
+    /** Assign this tab to a group (used with the `groups` prop) */
+    groupId?: string;
+}
+export interface TabGroupMeta {
+    id: string;
+    label: string;
+}
+export type TabOverflowMode = "dropdown" | "menu";
+/**
+ * Visual variant of the tab bar.
+ *
+ * - `"underlined"` (default): pill container with raised active tab and scroll
+ *   arrows; used for primary page-level navigation that may overflow.
+ * - `"segmented"`: gray-background segmented control with raised active tab;
+ *   intended for short, fixed-arity in-page mode toggles.
+ * - `"compact"`: smaller segmented control with reduced padding; used where
+ *   the tab bar shares a row with other controls (e.g. StatisticsPage).
+ */
+export type TabVariant = "underlined" | "segmented" | "compact";
+export interface TabsProps {
+    tabs: TabItem[];
+    /** Group definitions for organizing tabs with separators and labels */
+    groups?: TabGroupMeta[];
+    defaultTab?: string;
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
+    className?: string;
+    panelClassName?: string;
+    ariaLabel?: string;
+    /** Show scroll arrows and overflow controls (default: true) */
+    showOverflowControls?: boolean;
+    /** Show group labels in the tab bar and overflow menu (default: true) */
+    showGroupLabels?: boolean;
+    /**
+     * Overflow strategy for small screens:
+     * - "dropdown": mobile dropdown trigger (< 480px) — default when no groups
+     * - "menu": overflow menu button (< 768px) — default when groups are provided
+     */
+    overflowMode?: TabOverflowMode;
+    /**
+     * Visual variant. Defaults to `"underlined"` (the original Tabs look).
+     * Use `"segmented"` for iOS-style pill toggles, `"compact"` for a smaller
+     * variant suitable for in-header use alongside other controls.
+     */
+    variant?: TabVariant;
+    /**
+     * When using `variant="segmented"` or `"compact"`, make each tab fill the
+     * container evenly (flex: 1 per tab). Useful for short, equal-arity mode
+     * toggles like the Models page tab bar. Defaults to false.
+     */
+    fillContainer?: boolean;
+    /**
+     * Render the tab panel (the active tab's `content`) below the tab list.
+     * Defaults to true. Set to false when the consumer manages its own panel
+     * rendering outside the Tabs component (e.g. pages that interleave panels
+     * with other in-header elements).
+     *
+     * When false, each `TabItem.content` is ignored — the consumer is expected
+     * to inspect `activeTab` / `onTabChange` and render its own panel.
+     */
+    renderPanel?: boolean;
+    /** Accessible label for the overflow-menu trigger button. Default: "More tabs" */
+    moreTabsLabel?: string;
+    /** Accessible label for the mobile dropdown trigger. Default: "Select tab" */
+    selectTabLabel?: string;
+    /** Accessible label for the left scroll-arrow button. Default: "Scroll left" */
+    scrollLeftLabel?: string;
+    /** Accessible label for the right scroll-arrow button. Default: "Scroll right" */
+    scrollRightLabel?: string;
+    /**
+     * English defaults for every guide-tag badge label (required / recommended
+     * / beta / experimental). Override individual entries to translate them.
+     */
+    tagLabels?: TabTagLabels;
+}
+export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, tagLabels, }: TabsProps): import("react").JSX.Element;

package/dist/components/Tabs/Tabs2.js

@@ -0,0 +1,430 @@
+import { Badge as e } from "../Badge/Badge2.js";
+import { TAG_CONFIG as t } from "./tabTags.js";
+/* empty css     */
+import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/Tabs/Tabs.tsx
+var ee = {
+	required: "Required",
+	recommended: "Recommended",
+	beta: "Beta",
+	experimental: "Experimental"
+};
+function u({ tabs: u, groups: d = [], defaultTab: te, activeTab: f, onTabChange: p, className: m = "", panelClassName: h = "", ariaLabel: ne, showOverflowControls: g = !0, showGroupLabels: _ = !0, overflowMode: re, variant: v = "underlined", fillContainer: ie = !1, renderPanel: y = !0, moreTabsLabel: ae = "More tabs", selectTabLabel: oe = "Select tab", scrollLeftLabel: se = "Scroll left", scrollRightLabel: ce = "Scroll right", tagLabels: b = ee }) {
+	let x = re ?? (d.length > 0 ? "menu" : "dropdown"), [le, ue] = o(te || u[0]?.id || ""), [de, S] = o(!1), [fe, C] = o(!1), [w, pe] = o(!1), [T, E] = o(!1), [D, O] = o(!1), [me, k] = o(-1), A = a(null), j = a(/* @__PURE__ */ new Map()), M = a(null), N = a(null), P = a(null), F = a([]), I = a(null), L = a(0), R = a(0), z = f ?? le, B = i(() => d.length > 0 ? d.map((e) => ({
+		group: e,
+		tabs: u.filter((t) => t.groupId === e.id)
+	})) : [{
+		group: null,
+		tabs: u
+	}], [d, u]), V = i(() => B.flatMap(({ tabs: e }) => e), [B]), H = n((e) => {
+		f || ue(e), p?.(e), O(!1);
+	}, [f, p]), U = n((e, t) => {
+		let n;
+		switch (e.key) {
+			case "ArrowRight":
+				e.preventDefault(), n = t === u.length - 1 ? 0 : t + 1;
+				break;
+			case "ArrowLeft":
+				e.preventDefault(), n = t === 0 ? u.length - 1 : t - 1;
+				break;
+			case "Home":
+				e.preventDefault(), n = 0;
+				break;
+			case "End":
+				e.preventDefault(), n = u.length - 1;
+				break;
+			default: return;
+		}
+		let r = u[n];
+		r && (H(r.id), j.current.get(r.id)?.focus());
+	}, [u, H]), he = n((e, t) => {
+		t ? j.current.set(e, t) : j.current.delete(e);
+	}, []), W = n(() => {
+		let e = A.current;
+		if (!e || !g) {
+			S(!1), C(!1);
+			return;
+		}
+		let { scrollLeft: t, scrollWidth: n, clientWidth: r } = e;
+		S(t > 0), C(t + r < n - 1);
+	}, [g]), G = n((e) => {
+		let t = A.current;
+		if (!t) return;
+		let n = t.clientWidth * .75;
+		t.scrollBy({
+			left: e === "left" ? -n : n,
+			behavior: "smooth"
+		}), I.current !== null && clearTimeout(I.current), I.current = setTimeout(W, 300);
+	}, [W]), K = n(() => {
+		if (!A.current || w) return;
+		let e = j.current.get(z);
+		if (!e) return;
+		let t = A.current, n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+		n.left < r.left ? t.scrollLeft -= r.left - n.left + 8 : n.right > r.right && (t.scrollLeft += n.right - r.right + 8);
+	}, [z, w]), q = n(() => {
+		typeof window > "u" || x !== "dropdown" || pe(window.innerWidth < 480);
+	}, [x]), ge = n(() => {
+		E((e) => !e);
+	}, []), _e = n((e) => {
+		e.key === "Escape" && T && (e.preventDefault(), E(!1));
+	}, [T]), J = n((e) => {
+		e.touches[0] && (L.current = e.touches[0].clientX);
+	}, []), Y = n((e) => {
+		e.touches[0] && (R.current = e.touches[0].clientX);
+	}, []), X = n(() => {
+		if (!L.current || !R.current) return;
+		let e = L.current - R.current;
+		if (Math.abs(e) > 50) {
+			let t = u.findIndex((e) => e.id === z), n = u[t + 1], r = u[t - 1];
+			e > 0 && n ? H(n.id) : e < 0 && r && H(r.id);
+		}
+		L.current = 0, R.current = 0;
+	}, [
+		z,
+		u,
+		H
+	]), ve = n((e) => {
+		let t = V.length;
+		switch (e.key) {
+			case "Escape":
+				e.preventDefault(), O(!1), k(-1), P.current?.focus();
+				break;
+			case "ArrowDown":
+				e.preventDefault(), k((e) => {
+					let n = e >= t - 1 ? 0 : e + 1;
+					return F.current[n]?.focus(), n;
+				});
+				break;
+			case "ArrowUp":
+				e.preventDefault(), k((e) => {
+					let n = e <= 0 ? t - 1 : e - 1;
+					return F.current[n]?.focus(), n;
+				});
+				break;
+			case "Home":
+				e.preventDefault(), k(0), F.current[0]?.focus();
+				break;
+			case "End": e.preventDefault(), k(t - 1), F.current[t - 1]?.focus();
+		}
+	}, [V.length]), ye = n((e) => {
+		e.key === "Escape" && D && (e.preventDefault(), O(!1), k(-1));
+	}, [D]);
+	r(() => {
+		if (!T) return;
+		let e = (e) => {
+			M.current && !M.current.contains(e.target) && E(!1);
+		};
+		return document.addEventListener("mousedown", e), () => {
+			document.removeEventListener("mousedown", e);
+		};
+	}, [T]), r(() => {
+		if (!D) return;
+		let e = (e) => {
+			N.current && !N.current.contains(e.target) && (O(!1), k(-1));
+		}, t = (e) => {
+			e.key === "Escape" && (O(!1), k(-1), P.current?.focus());
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [D]), r(() => {
+		if (D && F.current.length > 0) {
+			let e = V.findIndex((e) => e.id === z), t = e >= 0 ? e : 0;
+			k(t), requestAnimationFrame(() => {
+				F.current[t]?.focus();
+			});
+		}
+	}, [
+		D,
+		V,
+		z
+	]), r(() => {
+		if (!u.find((e) => e.id === z)) {
+			let e = u[0];
+			e && H(e.id);
+		}
+	}, [
+		u,
+		z,
+		H
+	]), r(() => {
+		q(), W();
+		let e = () => {
+			q(), W();
+		};
+		return window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, [q, W]), r(() => {
+		K();
+	}, [z, K]), r(() => {
+		W();
+	}, [u, W]), r(() => () => {
+		I.current !== null && clearTimeout(I.current);
+	}, []);
+	let Z = u.find((e) => e.id === z)?.content, be = u.find((e) => e.id === z)?.label, xe = d.length > 0;
+	F.current = [];
+	let Q = (e) => e.tag ? e.tag : e.required ? "required" : null, Se = (n, r) => {
+		let i = n.id === z, a = Q(n), o = a ? t[a] : null, s = a ? b[a] : null;
+		return /* @__PURE__ */ l("button", {
+			ref: (e) => {
+				he(n.id, e);
+			},
+			role: "tab",
+			"aria-selected": i,
+			"aria-controls": y ? `tabpanel-${n.id}` : void 0,
+			id: `tab-${n.id}`,
+			tabIndex: i ? 0 : -1,
+			className: `tabs__tab${i ? " tabs__tab--active" : ""}`,
+			onClick: () => {
+				H(n.id);
+			},
+			onKeyDown: (e) => {
+				U(e, r), (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End") && e.stopPropagation();
+			},
+			children: [
+				n.labelPrefix,
+				/* @__PURE__ */ c("span", {
+					className: "tabs__tab-label",
+					children: n.label
+				}),
+				o && /* @__PURE__ */ c(e, {
+					variant: o.variant,
+					size: "small",
+					className: "tabs__tag-badge",
+					children: s
+				}),
+				n.labelExtra
+			]
+		}, n.id);
+	}, Ce = () => xe ? B.map(({ group: e, tabs: t }, n) => /* @__PURE__ */ l("div", {
+		className: "tabs__group",
+		children: [e && /* @__PURE__ */ l(s, { children: [n > 0 && /* @__PURE__ */ c("div", {
+			className: "tabs__separator",
+			role: "separator",
+			"aria-hidden": "true"
+		}), _ && /* @__PURE__ */ c("span", {
+			className: "tabs__group-label",
+			children: e.label
+		})] }), /* @__PURE__ */ c("div", {
+			className: "tabs__group-tabs",
+			children: t.map((e) => {
+				let t = u.findIndex((t) => t.id === e.id);
+				return Se(e, t);
+			})
+		})]
+	}, e?.id || "default")) : u.map((e, t) => Se(e, t)), we = () => x !== "menu" || !g ? null : /* @__PURE__ */ l("div", {
+		className: "tabs__overflow",
+		ref: N,
+		children: [/* @__PURE__ */ c("button", {
+			ref: P,
+			type: "button",
+			className: "tabs__overflow-btn",
+			onClick: () => {
+				O(!D);
+			},
+			onKeyDown: ye,
+			"aria-label": ae,
+			"aria-expanded": D,
+			"aria-haspopup": "menu",
+			children: /* @__PURE__ */ l("svg", {
+				width: "20",
+				height: "20",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: [
+					/* @__PURE__ */ c("circle", {
+						cx: "12",
+						cy: "12",
+						r: "1"
+					}),
+					/* @__PURE__ */ c("circle", {
+						cx: "12",
+						cy: "5",
+						r: "1"
+					}),
+					/* @__PURE__ */ c("circle", {
+						cx: "12",
+						cy: "19",
+						r: "1"
+					})
+				]
+			})
+		}), D && /* @__PURE__ */ c("div", {
+			className: "tabs__overflow-menu",
+			role: "menu",
+			onKeyDown: ve,
+			children: B.map(({ group: n, tabs: r }) => /* @__PURE__ */ l("div", {
+				className: "tabs__overflow-group",
+				children: [n && _ && /* @__PURE__ */ c("div", {
+					className: "tabs__overflow-group-label",
+					children: n.label
+				}), r.map((n) => {
+					let r = n.id === z, i = V.findIndex((e) => e.id === n.id), a = Q(n), o = a ? t[a] : null, s = a ? b[a] : null;
+					return /* @__PURE__ */ l("button", {
+						ref: (e) => {
+							e && (F.current[i] = e);
+						},
+						role: "menuitem",
+						tabIndex: me === i ? 0 : -1,
+						className: `tabs__overflow-item ${r ? "tabs__overflow-item--active" : ""}`,
+						onClick: () => {
+							H(n.id);
+						},
+						children: [
+							n.labelPrefix,
+							/* @__PURE__ */ c("span", { children: n.label }),
+							o && /* @__PURE__ */ c(e, {
+								variant: o.variant,
+								size: "small",
+								children: s
+							}),
+							n.labelExtra
+						]
+					}, n.id);
+				})]
+			}, n?.id || "default"))
+		})]
+	}), $ = v === "segmented" || v === "compact";
+	return x === "dropdown" && w && !$ ? /* @__PURE__ */ l("div", {
+		className: `tabs tabs--mobile-dropdown ${m}`,
+		children: [/* @__PURE__ */ l("div", {
+			className: "tabs__dropdown-container",
+			ref: M,
+			children: [/* @__PURE__ */ l("button", {
+				className: "tabs__dropdown-trigger",
+				onClick: ge,
+				onKeyDown: _e,
+				"aria-expanded": T,
+				"aria-haspopup": "listbox",
+				"aria-label": ne || oe,
+				children: [/* @__PURE__ */ c("span", {
+					className: "tabs__dropdown-label",
+					children: be
+				}), /* @__PURE__ */ c("svg", {
+					className: `tabs__dropdown-arrow ${T ? "tabs__dropdown-arrow--open" : ""}`,
+					width: "16",
+					height: "16",
+					viewBox: "0 0 16 16",
+					fill: "none",
+					xmlns: "http://www.w3.org/2000/svg",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ c("path", {
+						d: "M4 6L8 10L12 6",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				})]
+			}), T && /* @__PURE__ */ c("div", {
+				className: "tabs__dropdown-menu",
+				role: "listbox",
+				children: u.map((e) => /* @__PURE__ */ c("button", {
+					role: "option",
+					"aria-selected": e.id === z,
+					className: `tabs__dropdown-item ${e.id === z ? "tabs__dropdown-item--active" : ""}`,
+					onClick: () => {
+						H(e.id), E(!1);
+					},
+					children: e.label
+				}, e.id))
+			})]
+		}), y && /* @__PURE__ */ c("div", {
+			id: `tabpanel-${z}`,
+			role: "tabpanel",
+			"aria-labelledby": `tab-${z}`,
+			className: `tabs__panel ${h}`.trim(),
+			tabIndex: 0,
+			onTouchStart: J,
+			onTouchMove: Y,
+			onTouchEnd: X,
+			children: Z
+		})]
+	}) : /* @__PURE__ */ l("div", {
+		className: `tabs ${x === "menu" ? "tabs--overflow-menu" : ""} ${v === "segmented" ? "tabs--variant-segmented" : v === "compact" ? "tabs--variant-compact" : ""} ${$ && ie ? "tabs--fill-container" : ""} ${m}`.replace(/\s+/g, " ").trim(),
+		children: [/* @__PURE__ */ l("div", {
+			className: "tabs__container",
+			children: [
+				g && de && /* @__PURE__ */ c("button", {
+					className: "tabs__scroll-arrow tabs__scroll-arrow--left",
+					onClick: () => {
+						G("left");
+					},
+					"aria-label": se,
+					tabIndex: -1,
+					children: /* @__PURE__ */ c("svg", {
+						width: "20",
+						height: "20",
+						viewBox: "0 0 20 20",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ c("path", {
+							d: "M12 15L7 10L12 5",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				}),
+				/* @__PURE__ */ c("div", {
+					ref: A,
+					className: "tabs__list",
+					role: "tablist",
+					"aria-label": ne,
+					onScroll: W,
+					onKeyDown: (e) => {
+						let t = u.findIndex((e) => e.id === z);
+						t < 0 || U(e, t);
+					},
+					onTouchStart: x === "dropdown" ? J : void 0,
+					onTouchMove: x === "dropdown" ? Y : void 0,
+					onTouchEnd: x === "dropdown" ? X : void 0,
+					children: Ce()
+				}),
+				g && fe && /* @__PURE__ */ c("button", {
+					className: "tabs__scroll-arrow tabs__scroll-arrow--right",
+					onClick: () => {
+						G("right");
+					},
+					"aria-label": ce,
+					tabIndex: -1,
+					children: /* @__PURE__ */ c("svg", {
+						width: "20",
+						height: "20",
+						viewBox: "0 0 20 20",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ c("path", {
+							d: "M8 5L13 10L8 15",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				}),
+				we()
+			]
+		}), y && /* @__PURE__ */ c("div", {
+			id: `tabpanel-${z}`,
+			role: "tabpanel",
+			"aria-labelledby": `tab-${z}`,
+			className: `tabs__panel ${h}`.trim(),
+			tabIndex: 0,
+			children: Z
+		})]
+	});
+}
+//#endregion
+export { t as TAG_CONFIG, u as Tabs };
+
+//# sourceMappingURL=Tabs2.js.map

package/dist/components/Tabs/Tabs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs2.js","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/**\n * Tabs Component\n *\n * Unified tab navigation component with optional grouping, guide tag badges,\n * and responsive overflow handling. Follows WCAG 2.1 ARIA tab pattern.\n *\n * Features:\n * - Scroll arrows for overflow\n * - Mobile dropdown mode (overflowMode=\"dropdown\", < 480px)\n * - Overflow menu mode (overflowMode=\"menu\", < 768px)\n * - Tab grouping with separators and labels\n * - Guide tag badge support (required, recommended, beta, experimental)\n * - Touch swipe navigation (dropdown mode)\n * - Auto-scroll to active tab\n * - Full keyboard navigation (Arrow keys, Home, End)\n */\n\nimport {\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useMemo,\n  type ReactNode,\n  type KeyboardEvent,\n  type TouchEvent,\n} from \"react\";\nimport { Badge } from \"../Badge\";\nimport { type TabTagType, type TabTagLabels, TAG_CONFIG } from \"./tabTags\";\nimport \"./Tabs.css\";\n\n// Re-export for consumers that import from Tabs.tsx directly\nexport type { TabTagType, TabTagLabels } from \"./tabTags\";\nexport { TAG_CONFIG } from \"./tabTags\";\n\n/** English default for every {@link TabTagType} badge label. */\nconst DEFAULT_TAG_LABELS: TabTagLabels = {\n  required: \"Required\",\n  recommended: \"Recommended\",\n  beta: \"Beta\",\n  experimental: \"Experimental\",\n};\n\nexport interface TabItem {\n  id: string;\n  label: string;\n  content: ReactNode;\n  /**\n   * Show a \"Required\" badge next to the tab label.\n   * @deprecated Use `tag=\"required\"` instead. Kept for backward compatibility.\n   */\n  required?: boolean;\n  /**\n   * Guide tag displayed after the tab label as a small badge.\n   * When set, takes precedence over the `required` boolean.\n   */\n  tag?: TabTagType;\n  /**\n   * Optional extra trailing node rendered next to the tab label (e.g. a\n   * count badge). Distinct from `tag` (which uses a fixed preset). Use this\n   * when migrating segmented controls that rendered their own inline count\n   * pill alongside the label.\n   */\n  labelExtra?: ReactNode;\n  /**\n   * Optional leading node rendered before the tab label (e.g. an icon).\n   * Useful when migrating segmented controls that prefix the label with\n   * an SVG glyph (e.g. ImportExportDialog source toggle: File / Paste / URL).\n   */\n  labelPrefix?: ReactNode;\n  /** Assign this tab to a group (used with the `groups` prop) */\n  groupId?: string;\n}\n\nexport interface TabGroupMeta {\n  id: string;\n  label: string;\n}\n\nexport type TabOverflowMode = \"dropdown\" | \"menu\";\n\n/**\n * Visual variant of the tab bar.\n *\n * - `\"underlined\"` (default): pill container with raised active tab and scroll\n *   arrows; used for primary page-level navigation that may overflow.\n * - `\"segmented\"`: gray-background segmented control with raised active tab;\n *   intended for short, fixed-arity in-page mode toggles.\n * - `\"compact\"`: smaller segmented control with reduced padding; used where\n *   the tab bar shares a row with other controls (e.g. StatisticsPage).\n */\nexport type TabVariant = \"underlined\" | \"segmented\" | \"compact\";\n\nexport interface TabsProps {\n  tabs: TabItem[];\n  /** Group definitions for organizing tabs with separators and labels */\n  groups?: TabGroupMeta[];\n  defaultTab?: string;\n  activeTab?: string;\n  onTabChange?: (tabId: string) => void;\n  className?: string;\n  panelClassName?: string;\n  ariaLabel?: string;\n  /** Show scroll arrows and overflow controls (default: true) */\n  showOverflowControls?: boolean;\n  /** Show group labels in the tab bar and overflow menu (default: true) */\n  showGroupLabels?: boolean;\n  /**\n   * Overflow strategy for small screens:\n   * - \"dropdown\": mobile dropdown trigger (< 480px) — default when no groups\n   * - \"menu\": overflow menu button (< 768px) — default when groups are provided\n   */\n  overflowMode?: TabOverflowMode;\n  /**\n   * Visual variant. Defaults to `\"underlined\"` (the original Tabs look).\n   * Use `\"segmented\"` for iOS-style pill toggles, `\"compact\"` for a smaller\n   * variant suitable for in-header use alongside other controls.\n   */\n  variant?: TabVariant;\n  /**\n   * When using `variant=\"segmented\"` or `\"compact\"`, make each tab fill the\n   * container evenly (flex: 1 per tab). Useful for short, equal-arity mode\n   * toggles like the Models page tab bar. Defaults to false.\n   */\n  fillContainer?: boolean;\n  /**\n   * Render the tab panel (the active tab's `content`) below the tab list.\n   * Defaults to true. Set to false when the consumer manages its own panel\n   * rendering outside the Tabs component (e.g. pages that interleave panels\n   * with other in-header elements).\n   *\n   * When false, each `TabItem.content` is ignored — the consumer is expected\n   * to inspect `activeTab` / `onTabChange` and render its own panel.\n   */\n  renderPanel?: boolean;\n  /** Accessible label for the overflow-menu trigger button. Default: \"More tabs\" */\n  moreTabsLabel?: string;\n  /** Accessible label for the mobile dropdown trigger. Default: \"Select tab\" */\n  selectTabLabel?: string;\n  /** Accessible label for the left scroll-arrow button. Default: \"Scroll left\" */\n  scrollLeftLabel?: string;\n  /** Accessible label for the right scroll-arrow button. Default: \"Scroll right\" */\n  scrollRightLabel?: string;\n  /**\n   * English defaults for every guide-tag badge label (required / recommended\n   * / beta / experimental). Override individual entries to translate them.\n   */\n  tagLabels?: TabTagLabels;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function Tabs({\n  tabs,\n  groups = [],\n  defaultTab,\n  activeTab: controlledTab,\n  onTabChange,\n  className = \"\",\n  panelClassName = \"\",\n  ariaLabel,\n  showOverflowControls = true,\n  showGroupLabels = true,\n  overflowMode: explicitOverflowMode,\n  variant = \"underlined\",\n  fillContainer = false,\n  renderPanel = true,\n  moreTabsLabel = \"More tabs\",\n  selectTabLabel = \"Select tab\",\n  scrollLeftLabel = \"Scroll left\",\n  scrollRightLabel = \"Scroll right\",\n  tagLabels = DEFAULT_TAG_LABELS,\n}: TabsProps) {\n  // Auto-detect overflow mode from groups presence\n  const overflowMode =\n    explicitOverflowMode ?? (groups.length > 0 ? \"menu\" : \"dropdown\");\n\n  // ---- State ----\n  const [internalActiveTab, setInternalActiveTab] = useState(\n    defaultTab || tabs[0]?.id || \"\",\n  );\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  // Dropdown mode state (overflowMode === \"dropdown\")\n  const [isMobileDropdown, setIsMobileDropdown] = useState(false);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  // Overflow menu state (overflowMode === \"menu\")\n  const [showOverflowMenu, setShowOverflowMenu] = useState(false);\n  const [focusedMenuIndex, setFocusedMenuIndex] = useState(-1);\n\n  // ---- Refs ----\n  const tabListRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n  const dropdownContainerRef = useRef<HTMLDivElement>(null);\n  const overflowMenuRef = useRef<HTMLDivElement>(null);\n  const overflowButtonRef = useRef<HTMLButtonElement>(null);\n  const menuItemRefs = useRef<HTMLButtonElement[]>([]);\n  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const touchStartX = useRef<number>(0);\n  const touchEndX = useRef<number>(0);\n\n  // ---- Derived state ----\n  const activeTab = controlledTab ?? internalActiveTab;\n\n  // Group tabs by groupId\n  const groupedTabs = useMemo(() => {\n    return groups.length > 0\n      ? groups.map((group) => ({\n          group,\n          tabs: tabs.filter((tab) => tab.groupId === group.id),\n        }))\n      : [{ group: null as TabGroupMeta | null, tabs }];\n  }, [groups, tabs]);\n\n  // Flatten menu items for keyboard navigation\n  const flattenedMenuTabs = useMemo(() => {\n    return groupedTabs.flatMap(({ tabs: groupTabs }) => groupTabs);\n  }, [groupedTabs]);\n\n  // ---- Handlers ----\n\n  const handleTabClick = useCallback(\n    (tabId: string) => {\n      if (!controlledTab) {\n        setInternalActiveTab(tabId);\n      }\n      onTabChange?.(tabId);\n      setShowOverflowMenu(false);\n    },\n    [controlledTab, onTabChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (\n      e: KeyboardEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement>,\n      currentIndex: number,\n    ) => {\n      let targetIndex: number;\n\n      switch (e.key) {\n        case \"ArrowRight\":\n          e.preventDefault();\n          targetIndex = currentIndex === tabs.length - 1 ? 0 : currentIndex + 1;\n          break;\n        case \"ArrowLeft\":\n          e.preventDefault();\n          targetIndex = currentIndex === 0 ? tabs.length - 1 : currentIndex - 1;\n          break;\n        case \"Home\":\n          e.preventDefault();\n          targetIndex = 0;\n          break;\n        case \"End\":\n          e.preventDefault();\n          targetIndex = tabs.length - 1;\n          break;\n        default:\n          return;\n      }\n\n      const targetTab = tabs[targetIndex];\n      if (targetTab) {\n        handleTabClick(targetTab.id);\n        tabRefs.current.get(targetTab.id)?.focus();\n      }\n    },\n    [tabs, handleTabClick],\n  );\n\n  const setTabRef = useCallback((id: string, element: HTMLButtonElement | null) => {\n    if (element) {\n      tabRefs.current.set(id, element);\n    } else {\n      tabRefs.current.delete(id);\n    }\n  }, []);\n\n  // ---- Scroll controls ----\n\n  const checkScroll = useCallback(() => {\n    const container = tabListRef.current;\n    if (!container || !showOverflowControls) {\n      setCanScrollLeft(false);\n      setCanScrollRight(false);\n      return;\n    }\n\n    const { scrollLeft, scrollWidth, clientWidth } = container;\n    setCanScrollLeft(scrollLeft > 0);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, [showOverflowControls]);\n\n  const scrollTabs = useCallback(\n    (direction: \"left\" | \"right\") => {\n      const container = tabListRef.current;\n      if (!container) return;\n\n      const scrollAmount = container.clientWidth * 0.75;\n      container.scrollBy({\n        left: direction === \"left\" ? -scrollAmount : scrollAmount,\n        behavior: \"smooth\",\n      });\n\n      if (scrollTimeoutRef.current !== null) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n      scrollTimeoutRef.current = setTimeout(checkScroll, 300);\n    },\n    [checkScroll],\n  );\n\n  // ---- Auto-scroll to active tab ----\n\n  const scrollToActiveTab = useCallback(() => {\n    if (!tabListRef.current || isMobileDropdown) return;\n\n    const activeButton = tabRefs.current.get(activeTab);\n    if (!activeButton) return;\n\n    const container = tabListRef.current;\n    const buttonRect = activeButton.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n\n    if (buttonRect.left < containerRect.left) {\n      container.scrollLeft -= containerRect.left - buttonRect.left + 8;\n    } else if (buttonRect.right > containerRect.right) {\n      container.scrollLeft += buttonRect.right - containerRect.right + 8;\n    }\n  }, [activeTab, isMobileDropdown]);\n\n  // ---- Mobile dropdown mode ----\n\n  const checkMobileMode = useCallback(() => {\n    if (typeof window === \"undefined\" || overflowMode !== \"dropdown\") return;\n    setIsMobileDropdown(window.innerWidth < 480);\n  }, [overflowMode]);\n\n  const toggleDropdown = useCallback(() => {\n    setIsDropdownOpen((prev) => !prev);\n  }, []);\n\n  const handleDropdownKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === \"Escape\" && isDropdownOpen) {\n        e.preventDefault();\n        setIsDropdownOpen(false);\n      }\n    },\n    [isDropdownOpen],\n  );\n\n  // ---- Touch swipe (dropdown mode) ----\n\n  const handleTouchStart = useCallback((e: TouchEvent<HTMLDivElement>) => {\n    if (e.touches[0]) {\n      touchStartX.current = e.touches[0].clientX;\n    }\n  }, []);\n\n  const handleTouchMove = useCallback((e: TouchEvent<HTMLDivElement>) => {\n    if (e.touches[0]) {\n      touchEndX.current = e.touches[0].clientX;\n    }\n  }, []);\n\n  const handleTouchEnd = useCallback(() => {\n    if (!touchStartX.current || !touchEndX.current) return;\n\n    const diff = touchStartX.current - touchEndX.current;\n    const threshold = 50;\n\n    if (Math.abs(diff) > threshold) {\n      const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);\n      const nextTab = tabs[currentIndex + 1];\n      const prevTab = tabs[currentIndex - 1];\n\n      if (diff > 0 && nextTab) {\n        handleTabClick(nextTab.id);\n      } else if (diff < 0 && prevTab) {\n        handleTabClick(prevTab.id);\n      }\n    }\n\n    touchStartX.current = 0;\n    touchEndX.current = 0;\n  }, [activeTab, tabs, handleTabClick]);\n\n  // ---- Overflow menu (menu mode) ----\n\n  const handleOverflowMenuKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const menuItemCount = flattenedMenuTabs.length;\n\n      switch (e.key) {\n        case \"Escape\":\n          e.preventDefault();\n          setShowOverflowMenu(false);\n          setFocusedMenuIndex(-1);\n          overflowButtonRef.current?.focus();\n          break;\n        case \"ArrowDown\":\n          e.preventDefault();\n          setFocusedMenuIndex((prev) => {\n            const next = prev >= menuItemCount - 1 ? 0 : prev + 1;\n            menuItemRefs.current[next]?.focus();\n            return next;\n          });\n          break;\n        case \"ArrowUp\":\n          e.preventDefault();\n          setFocusedMenuIndex((prev) => {\n            const next = prev <= 0 ? menuItemCount - 1 : prev - 1;\n            menuItemRefs.current[next]?.focus();\n            return next;\n          });\n          break;\n        case \"Home\":\n          e.preventDefault();\n          setFocusedMenuIndex(0);\n          menuItemRefs.current[0]?.focus();\n          break;\n        case \"End\":\n          e.preventDefault();\n          setFocusedMenuIndex(menuItemCount - 1);\n          menuItemRefs.current[menuItemCount - 1]?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n    [flattenedMenuTabs.length],\n  );\n\n  const handleOverflowButtonKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === \"Escape\" && showOverflowMenu) {\n        e.preventDefault();\n        setShowOverflowMenu(false);\n        setFocusedMenuIndex(-1);\n      }\n    },\n    [showOverflowMenu],\n  );\n\n  // ---- Effects ----\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    if (!isDropdownOpen) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        dropdownContainerRef.current &&\n        !dropdownContainerRef.current.contains(event.target as Node)\n      ) {\n        setIsDropdownOpen(false);\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isDropdownOpen]);\n\n  // Close overflow menu when clicking outside\n  useEffect(() => {\n    if (!showOverflowMenu) return undefined;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        overflowMenuRef.current &&\n        !overflowMenuRef.current.contains(event.target as Node)\n      ) {\n        setShowOverflowMenu(false);\n        setFocusedMenuIndex(-1);\n      }\n    };\n\n    const handleEscapeKey = (event: globalThis.KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setShowOverflowMenu(false);\n        setFocusedMenuIndex(-1);\n        overflowButtonRef.current?.focus();\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    document.addEventListener(\"keydown\", handleEscapeKey);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n      document.removeEventListener(\"keydown\", handleEscapeKey);\n    };\n  }, [showOverflowMenu]);\n\n  // Focus menu item when overflow menu opens\n  useEffect(() => {\n    if (showOverflowMenu && menuItemRefs.current.length > 0) {\n      const activeIndex = flattenedMenuTabs.findIndex((tab) => tab.id === activeTab);\n      const indexToFocus = activeIndex >= 0 ? activeIndex : 0;\n      setFocusedMenuIndex(indexToFocus);\n      requestAnimationFrame(() => {\n        menuItemRefs.current[indexToFocus]?.focus();\n      });\n    }\n  }, [showOverflowMenu, flattenedMenuTabs, activeTab]);\n\n  // Ensure active tab is valid\n  useEffect(() => {\n    if (!tabs.find((tab) => tab.id === activeTab)) {\n      const firstTab = tabs[0];\n      if (firstTab) {\n        handleTabClick(firstTab.id);\n      }\n    }\n  }, [tabs, activeTab, handleTabClick]);\n\n  // Check mobile mode and scroll on mount/resize\n  useEffect(() => {\n    checkMobileMode();\n    checkScroll();\n\n    const handleResize = () => {\n      checkMobileMode();\n      checkScroll();\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [checkMobileMode, checkScroll]);\n\n  // Scroll to active tab when it changes\n  useEffect(() => {\n    scrollToActiveTab();\n  }, [activeTab, scrollToActiveTab]);\n\n  // Check scroll when tabs change\n  useEffect(() => {\n    checkScroll();\n  }, [tabs, checkScroll]);\n\n  // Cleanup scroll timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (scrollTimeoutRef.current !== null) {\n        clearTimeout(scrollTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  // ---- Render helpers ----\n\n  const activeTabContent = tabs.find((tab) => tab.id === activeTab)?.content;\n  const activeTabLabel = tabs.find((tab) => tab.id === activeTab)?.label;\n\n  const hasGroups = groups.length > 0;\n\n  // Reset menu item refs array each render\n  menuItemRefs.current = [];\n\n  /** Resolve the effective tag type for a tab (prefers `tag`, falls back to legacy `required`) */\n  const resolveTabTag = (tab: TabItem): TabTagType | null => {\n    if (tab.tag) return tab.tag;\n\n    if (tab.required) return \"required\";\n    return null;\n  };\n\n  /** Render a single tab button */\n  const renderTabButton = (tab: TabItem, globalIndex: number) => {\n    const isActive = tab.id === activeTab;\n    const effectiveTag = resolveTabTag(tab);\n    const tagConfig = effectiveTag ? TAG_CONFIG[effectiveTag] : null;\n    const tagLabel = effectiveTag ? tagLabels[effectiveTag] : null;\n\n    return (\n      <button\n        key={tab.id}\n        ref={(el) => {\n          setTabRef(tab.id, el);\n        }}\n        role=\"tab\"\n        aria-selected={isActive}\n        aria-controls={renderPanel ? `tabpanel-${tab.id}` : undefined}\n        id={`tab-${tab.id}`}\n        tabIndex={isActive ? 0 : -1}\n        className={`tabs__tab${isActive ? \" tabs__tab--active\" : \"\"}`}\n        onClick={() => {\n          handleTabClick(tab.id);\n        }}\n        onKeyDown={(e) => {\n          handleKeyDown(e, globalIndex);\n          // Prevent the tablist's onKeyDown from also firing (it runs the\n          // same Arrow/Home/End logic for synthetic tests / unusual focus\n          // setups where focus is on the tablist itself).\n          if (\n            e.key === \"ArrowLeft\" ||\n            e.key === \"ArrowRight\" ||\n            e.key === \"Home\" ||\n            e.key === \"End\"\n          ) {\n            e.stopPropagation();\n          }\n        }}\n      >\n        {tab.labelPrefix}\n        <span className=\"tabs__tab-label\">{tab.label}</span>\n        {tagConfig && (\n          <Badge variant={tagConfig.variant} size=\"small\" className=\"tabs__tag-badge\">\n            {tagLabel}\n          </Badge>\n        )}\n        {tab.labelExtra}\n      </button>\n    );\n  };\n\n  /** Render the tab list content (flat or grouped) */\n  const renderTabListContent = () => {\n    if (hasGroups) {\n      return groupedTabs.map(({ group, tabs: groupTabs }, groupIndex) => (\n        <div key={group?.id || \"default\"} className=\"tabs__group\">\n          {group && (\n            <>\n              {groupIndex > 0 && (\n                <div className=\"tabs__separator\" role=\"separator\" aria-hidden=\"true\" />\n              )}\n              {showGroupLabels && (\n                <span className=\"tabs__group-label\">{group.label}</span>\n              )}\n            </>\n          )}\n          <div className=\"tabs__group-tabs\">\n            {groupTabs.map((tab) => {\n              const globalIndex = tabs.findIndex((t) => t.id === tab.id);\n              return renderTabButton(tab, globalIndex);\n            })}\n          </div>\n        </div>\n      ));\n    }\n\n    return tabs.map((tab, index) => renderTabButton(tab, index));\n  };\n\n  /** Render the overflow menu (menu mode) */\n  const renderOverflowMenu = () => {\n    if (overflowMode !== \"menu\" || !showOverflowControls) return null;\n\n    return (\n      <div className=\"tabs__overflow\" ref={overflowMenuRef}>\n        <button\n          ref={overflowButtonRef}\n          type=\"button\"\n          className=\"tabs__overflow-btn\"\n          onClick={() => {\n            setShowOverflowMenu(!showOverflowMenu);\n          }}\n          onKeyDown={handleOverflowButtonKeyDown}\n          aria-label={moreTabsLabel}\n          aria-expanded={showOverflowMenu}\n          aria-haspopup=\"menu\"\n        >\n          <svg\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"1\" />\n            <circle cx=\"12\" cy=\"5\" r=\"1\" />\n            <circle cx=\"12\" cy=\"19\" r=\"1\" />\n          </svg>\n        </button>\n\n        {showOverflowMenu && (\n          <div\n            className=\"tabs__overflow-menu\"\n            role=\"menu\"\n            onKeyDown={handleOverflowMenuKeyDown}\n          >\n            {groupedTabs.map(({ group, tabs: groupTabs }) => (\n              <div key={group?.id || \"default\"} className=\"tabs__overflow-group\">\n                {group && showGroupLabels && (\n                  <div className=\"tabs__overflow-group-label\">{group.label}</div>\n                )}\n                {groupTabs.map((tab) => {\n                  const isActive = tab.id === activeTab;\n                  const flatIndex = flattenedMenuTabs.findIndex((t) => t.id === tab.id);\n                  const effectiveTag = resolveTabTag(tab);\n                  const tagConfig = effectiveTag ? TAG_CONFIG[effectiveTag] : null;\n                  const tagLabel = effectiveTag ? tagLabels[effectiveTag] : null;\n                  return (\n                    <button\n                      key={tab.id}\n                      ref={(el) => {\n                        if (el) {\n                          menuItemRefs.current[flatIndex] = el;\n                        }\n                      }}\n                      role=\"menuitem\"\n                      tabIndex={focusedMenuIndex === flatIndex ? 0 : -1}\n                      className={`tabs__overflow-item ${isActive ? \"tabs__overflow-item--active\" : \"\"}`}\n                      onClick={() => {\n                        handleTabClick(tab.id);\n                      }}\n                    >\n                      {tab.labelPrefix}\n                      <span>{tab.label}</span>\n                      {tagConfig && (\n                        <Badge variant={tagConfig.variant} size=\"small\">\n                          {tagLabel}\n                        </Badge>\n                      )}\n                      {tab.labelExtra}\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  // ---- Variant class helpers ----\n\n  // For segmented/compact variants we always want a single horizontal pill —\n  // there is no scrollable arrow affordance and the mobile dropdown trigger\n  // would visually conflict with the segmented look. Underlined remains the\n  // only variant that follows the historical \"scroll + dropdown\" behavior.\n  const isSegmentedFamily = variant === \"segmented\" || variant === \"compact\";\n  const variantClass =\n    variant === \"segmented\"\n      ? \"tabs--variant-segmented\"\n      : variant === \"compact\"\n        ? \"tabs--variant-compact\"\n        : \"\";\n  const fillContainerClass =\n    isSegmentedFamily && fillContainer ? \"tabs--fill-container\" : \"\";\n\n  // ---- Mobile dropdown render (overflowMode === \"dropdown\") ----\n\n  // Segmented/compact variants always render as a single inline tab bar — we\n  // skip the mobile-dropdown branch even when the viewport is narrow so the\n  // visual matches the existing per-page \"segmented control\" markup the\n  // migration replaces.\n  if (overflowMode === \"dropdown\" && isMobileDropdown && !isSegmentedFamily) {\n    return (\n      <div className={`tabs tabs--mobile-dropdown ${className}`}>\n        <div className=\"tabs__dropdown-container\" ref={dropdownContainerRef}>\n          <button\n            className=\"tabs__dropdown-trigger\"\n            onClick={toggleDropdown}\n            onKeyDown={handleDropdownKeyDown}\n            aria-expanded={isDropdownOpen}\n            aria-haspopup=\"listbox\"\n            aria-label={ariaLabel || selectTabLabel}\n          >\n            <span className=\"tabs__dropdown-label\">{activeTabLabel}</span>\n            <svg\n              className={`tabs__dropdown-arrow ${isDropdownOpen ? \"tabs__dropdown-arrow--open\" : \"\"}`}\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M4 6L8 10L12 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </button>\n\n          {isDropdownOpen && (\n            <div className=\"tabs__dropdown-menu\" role=\"listbox\">\n              {tabs.map((tab) => (\n                <button\n                  key={tab.id}\n                  role=\"option\"\n                  aria-selected={tab.id === activeTab}\n                  className={`tabs__dropdown-item ${tab.id === activeTab ? \"tabs__dropdown-item--active\" : \"\"}`}\n                  onClick={() => {\n                    handleTabClick(tab.id);\n                    setIsDropdownOpen(false);\n                  }}\n                >\n                  {tab.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {renderPanel && (\n          <div\n            id={`tabpanel-${activeTab}`}\n            role=\"tabpanel\"\n            aria-labelledby={`tab-${activeTab}`}\n            className={`tabs__panel ${panelClassName}`.trim()}\n            tabIndex={0}\n            onTouchStart={handleTouchStart}\n            onTouchMove={handleTouchMove}\n            onTouchEnd={handleTouchEnd}\n          >\n            {activeTabContent}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // ---- Desktop/tablet render ----\n\n  const modeClass = overflowMode === \"menu\" ? \"tabs--overflow-menu\" : \"\";\n\n  return (\n    <div\n      className={`tabs ${modeClass} ${variantClass} ${fillContainerClass} ${className}`\n        .replace(/\\s+/g, \" \")\n        .trim()}\n    >\n      <div className=\"tabs__container\">\n        {/* Scroll left arrow */}\n        {showOverflowControls && canScrollLeft && (\n          <button\n            className=\"tabs__scroll-arrow tabs__scroll-arrow--left\"\n            onClick={() => {\n              scrollTabs(\"left\");\n            }}\n            aria-label={scrollLeftLabel}\n            tabIndex={-1}\n          >\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M12 15L7 10L12 5\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </button>\n        )}\n\n        <div\n          ref={tabListRef}\n          className=\"tabs__list\"\n          role=\"tablist\"\n          aria-label={ariaLabel}\n          onScroll={checkScroll}\n          onKeyDown={(e) => {\n            // Mirror the per-button handler at the tablist level so synthetic\n            // tests (and unusual focus setups where the tablist itself owns\n            // the keyboard focus) get the same Arrow/Home/End behavior. Tab\n            // buttons are still the primary handler; this only fires when\n            // the event reaches the tablist without being handled by a tab.\n            const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);\n            if (currentIndex < 0) return;\n            handleKeyDown(e, currentIndex);\n          }}\n          onTouchStart={overflowMode === \"dropdown\" ? handleTouchStart : undefined}\n          onTouchMove={overflowMode === \"dropdown\" ? handleTouchMove : undefined}\n          onTouchEnd={overflowMode === \"dropdown\" ? handleTouchEnd : undefined}\n        >\n          {renderTabListContent()}\n        </div>\n\n        {/* Scroll right arrow */}\n        {showOverflowControls && canScrollRight && (\n          <button\n            className=\"tabs__scroll-arrow tabs__scroll-arrow--right\"\n            onClick={() => {\n              scrollTabs(\"right\");\n            }}\n            aria-label={scrollRightLabel}\n            tabIndex={-1}\n          >\n            <svg\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M8 5L13 10L8 15\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </button>\n        )}\n\n        {/* Overflow menu (menu mode) */}\n        {renderOverflowMenu()}\n      </div>\n\n      {renderPanel && (\n        <div\n          id={`tabpanel-${activeTab}`}\n          role=\"tabpanel\"\n          aria-labelledby={`tab-${activeTab}`}\n          className={`tabs__panel ${panelClassName}`.trim()}\n          tabIndex={0}\n        >\n          {activeTabContent}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAoCA,IAAM,KAAmC;CACvC,UAAU;CACV,aAAa;CACb,MAAM;CACN,cAAc;AAChB;AAiHA,SAAgB,EAAK,EACnB,SACA,YAAS,CAAC,GACV,gBACA,WAAW,GACX,gBACA,eAAY,IACZ,oBAAiB,IACjB,eACA,0BAAuB,IACvB,qBAAkB,IAClB,cAAc,IACd,aAAU,cACV,oBAAgB,IAChB,iBAAc,IACd,oBAAgB,aAChB,qBAAiB,cACjB,sBAAkB,eAClB,uBAAmB,gBACnB,eAAY,MACA;CAEZ,IAAM,IACJ,OAAyB,EAAO,SAAS,IAAI,SAAS,aAGlD,CAAC,IAAmB,MAAwB,EAChD,MAAc,EAAK,EAAE,EAAE,MAAM,EAC/B,GACM,CAAC,IAAe,KAAoB,EAAS,EAAK,GAClD,CAAC,IAAgB,KAAqB,EAAS,EAAK,GAGpD,CAAC,GAAkB,MAAuB,EAAS,EAAK,GACxD,CAAC,GAAgB,KAAqB,EAAS,EAAK,GAGpD,CAAC,GAAkB,KAAuB,EAAS,EAAK,GACxD,CAAC,IAAkB,KAAuB,EAAS,EAAE,GAGrD,IAAa,EAAuB,IAAI,GACxC,IAAU,kBAAuC,IAAI,IAAI,CAAC,GAC1D,IAAuB,EAAuB,IAAI,GAClD,IAAkB,EAAuB,IAAI,GAC7C,IAAoB,EAA0B,IAAI,GAClD,IAAe,EAA4B,CAAC,CAAC,GAC7C,IAAmB,EAA6C,IAAI,GACpE,IAAc,EAAe,CAAC,GAC9B,IAAY,EAAe,CAAC,GAG5B,IAAY,KAAiB,IAG7B,IAAc,QACX,EAAO,SAAS,IACnB,EAAO,KAAK,OAAW;EACrB;EACA,MAAM,EAAK,QAAQ,MAAQ,EAAI,YAAY,EAAM,EAAE;CACrD,EAAE,IACF,CAAC;EAAE,OAAO;EAA6B;CAAK,CAAC,GAChD,CAAC,GAAQ,CAAI,CAAC,GAGX,IAAoB,QACjB,EAAY,SAAS,EAAE,MAAM,QAAgB,CAAS,GAC5D,CAAC,CAAW,CAAC,GAIV,IAAiB,GACpB,MAAkB;EAKjB,AAJK,KACH,GAAqB,CAAK,GAE5B,IAAc,CAAK,GACnB,EAAoB,EAAK;CAC3B,GACA,CAAC,GAAe,CAAW,CAC7B,GAEM,IAAgB,GAElB,GACA,MACG;EACH,IAAI;EAEJ,QAAQ,EAAE,KAAV;GACE,KAAK;IAEH,AADA,EAAE,eAAe,GACjB,IAAc,MAAiB,EAAK,SAAS,IAAI,IAAI,IAAe;IACpE;GACF,KAAK;IAEH,AADA,EAAE,eAAe,GACjB,IAAc,MAAiB,IAAI,EAAK,SAAS,IAAI,IAAe;IACpE;GACF,KAAK;IAEH,AADA,EAAE,eAAe,GACjB,IAAc;IACd;GACF,KAAK;IAEH,AADA,EAAE,eAAe,GACjB,IAAc,EAAK,SAAS;IAC5B;GACF,SACE;EACJ;EAEA,IAAM,IAAY,EAAK;EACvB,AAAI,MACF,EAAe,EAAU,EAAE,GAC3B,EAAQ,QAAQ,IAAI,EAAU,EAAE,CAAC,EAAE,MAAM;CAE7C,GACA,CAAC,GAAM,CAAc,CACvB,GAEM,KAAY,GAAa,GAAY,MAAsC;EAC/E,AAAI,IACF,EAAQ,QAAQ,IAAI,GAAI,CAAO,IAE/B,EAAQ,QAAQ,OAAO,CAAE;CAE7B,GAAG,CAAC,CAAC,GAIC,IAAc,QAAkB;EACpC,IAAM,IAAY,EAAW;EAC7B,IAAI,CAAC,KAAa,CAAC,GAAsB;GAEvC,AADA,EAAiB,EAAK,GACtB,EAAkB,EAAK;GACvB;EACF;EAEA,IAAM,EAAE,eAAY,gBAAa,mBAAgB;EAEjD,AADA,EAAiB,IAAa,CAAC,GAC/B,EAAkB,IAAa,IAAc,IAAc,CAAC;CAC9D,GAAG,CAAC,CAAoB,CAAC,GAEnB,IAAa,GAChB,MAAgC;EAC/B,IAAM,IAAY,EAAW;EAC7B,IAAI,CAAC,GAAW;EAEhB,IAAM,IAAe,EAAU,cAAc;EAS7C,AARA,EAAU,SAAS;GACjB,MAAM,MAAc,SAAS,CAAC,IAAe;GAC7C,UAAU;EACZ,CAAC,GAEG,EAAiB,YAAY,QAC/B,aAAa,EAAiB,OAAO,GAEvC,EAAiB,UAAU,WAAW,GAAa,GAAG;CACxD,GACA,CAAC,CAAW,CACd,GAIM,IAAoB,QAAkB;EAC1C,IAAI,CAAC,EAAW,WAAW,GAAkB;EAE7C,IAAM,IAAe,EAAQ,QAAQ,IAAI,CAAS;EAClD,IAAI,CAAC,GAAc;EAEnB,IAAM,IAAY,EAAW,SACvB,IAAa,EAAa,sBAAsB,GAChD,IAAgB,EAAU,sBAAsB;EAEtD,AAAI,EAAW,OAAO,EAAc,OAClC,EAAU,cAAc,EAAc,OAAO,EAAW,OAAO,IACtD,EAAW,QAAQ,EAAc,UAC1C,EAAU,cAAc,EAAW,QAAQ,EAAc,QAAQ;CAErE,GAAG,CAAC,GAAW,CAAgB,CAAC,GAI1B,IAAkB,QAAkB;EACpC,OAAO,SAAW,OAAe,MAAiB,cACtD,GAAoB,OAAO,aAAa,GAAG;CAC7C,GAAG,CAAC,CAAY,CAAC,GAEX,KAAiB,QAAkB;EACvC,GAAmB,MAAS,CAAC,CAAI;CACnC,GAAG,CAAC,CAAC,GAEC,KAAwB,GAC3B,MAAwC;EACvC,AAAI,EAAE,QAAQ,YAAY,MACxB,EAAE,eAAe,GACjB,EAAkB,EAAK;CAE3B,GACA,CAAC,CAAc,CACjB,GAIM,IAAmB,GAAa,MAAkC;EACtE,AAAI,EAAE,QAAQ,OACZ,EAAY,UAAU,EAAE,QAAQ,EAAE,CAAC;CAEvC,GAAG,CAAC,CAAC,GAEC,IAAkB,GAAa,MAAkC;EACrE,AAAI,EAAE,QAAQ,OACZ,EAAU,UAAU,EAAE,QAAQ,EAAE,CAAC;CAErC,GAAG,CAAC,CAAC,GAEC,IAAiB,QAAkB;EACvC,IAAI,CAAC,EAAY,WAAW,CAAC,EAAU,SAAS;EAEhD,IAAM,IAAO,EAAY,UAAU,EAAU;EAG7C,IAAI,KAAK,IAAI,CAAI,IAAI,IAAW;GAC9B,IAAM,IAAe,EAAK,WAAW,MAAQ,EAAI,OAAO,CAAS,GAC3D,IAAU,EAAK,IAAe,IAC9B,IAAU,EAAK,IAAe;GAEpC,AAAI,IAAO,KAAK,IACd,EAAe,EAAQ,EAAE,IAChB,IAAO,KAAK,KACrB,EAAe,EAAQ,EAAE;EAE7B;EAGA,AADA,EAAY,UAAU,GACtB,EAAU,UAAU;CACtB,GAAG;EAAC;EAAW;EAAM;CAAc,CAAC,GAI9B,KAA4B,GAC/B,MAAqC;EACpC,IAAM,IAAgB,EAAkB;EAExC,QAAQ,EAAE,KAAV;GACE,KAAK;IAIH,AAHA,EAAE,eAAe,GACjB,EAAoB,EAAK,GACzB,EAAoB,EAAE,GACtB,EAAkB,SAAS,MAAM;IACjC;GACF,KAAK;IAEH,AADA,EAAE,eAAe,GACjB,GAAqB,MAAS;KAC5B,IAAM,IAAO,KAAQ,IAAgB,IAAI,IAAI,IAAO;KAEpD,OADA,EAAa,QAAQ,EAAK,EAAE,MAAM,GAC3B;IACT,CAAC;IACD;GACF,KAAK;IAEH,AADA,EAAE,eAAe,GACjB,GAAqB,MAAS;KAC5B,IAAM,IAAO,KAAQ,IAAI,IAAgB,IAAI,IAAO;KAEpD,OADA,EAAa,QAAQ,EAAK,EAAE,MAAM,GAC3B;IACT,CAAC;IACD;GACF,KAAK;IAGH,AAFA,EAAE,eAAe,GACjB,EAAoB,CAAC,GACrB,EAAa,QAAQ,EAAE,EAAE,MAAM;IAC/B;GACF,KAAK,OAGH,AAFA,EAAE,eAAe,GACjB,EAAoB,IAAgB,CAAC,GACrC,EAAa,QAAQ,IAAgB,EAAE,EAAE,MAAM;EAInD;CACF,GACA,CAAC,EAAkB,MAAM,CAC3B,GAEM,KAA8B,GACjC,MAAwC;EACvC,AAAI,EAAE,QAAQ,YAAY,MACxB,EAAE,eAAe,GACjB,EAAoB,EAAK,GACzB,EAAoB,EAAE;CAE1B,GACA,CAAC,CAAgB,CACnB;CAsGA,AAjGA,QAAgB;EACd,IAAI,CAAC,GAAgB;EAErB,IAAM,KAAsB,MAAsB;GAChD,AACE,EAAqB,WACrB,CAAC,EAAqB,QAAQ,SAAS,EAAM,MAAc,KAE3D,EAAkB,EAAK;EAE3B;EAGA,OADA,SAAS,iBAAiB,aAAa,CAAkB,SAC5C;GACX,SAAS,oBAAoB,aAAa,CAAkB;EAC9D;CACF,GAAG,CAAC,CAAc,CAAC,GAGnB,QAAgB;EACd,IAAI,CAAC,GAAkB;EAEvB,IAAM,KAAsB,MAAsB;GAChD,AACE,EAAgB,WAChB,CAAC,EAAgB,QAAQ,SAAS,EAAM,MAAc,MAEtD,EAAoB,EAAK,GACzB,EAAoB,EAAE;EAE1B,GAEM,KAAmB,MAAoC;GAC3D,AAAI,EAAM,QAAQ,aAChB,EAAoB,EAAK,GACzB,EAAoB,EAAE,GACtB,EAAkB,SAAS,MAAM;EAErC;EAIA,OAFA,SAAS,iBAAiB,aAAa,CAAkB,GACzD,SAAS,iBAAiB,WAAW,CAAe,SACvC;GAEX,AADA,SAAS,oBAAoB,aAAa,CAAkB,GAC5D,SAAS,oBAAoB,WAAW,CAAe;EACzD;CACF,GAAG,CAAC,CAAgB,CAAC,GAGrB,QAAgB;EACd,IAAI,KAAoB,EAAa,QAAQ,SAAS,GAAG;GACvD,IAAM,IAAc,EAAkB,WAAW,MAAQ,EAAI,OAAO,CAAS,GACvE,IAAe,KAAe,IAAI,IAAc;GAEtD,AADA,EAAoB,CAAY,GAChC,4BAA4B;IAC1B,EAAa,QAAQ,EAAa,EAAE,MAAM;GAC5C,CAAC;EACH;CACF,GAAG;EAAC;EAAkB;EAAmB;CAAS,CAAC,GAGnD,QAAgB;EACd,IAAI,CAAC,EAAK,MAAM,MAAQ,EAAI,OAAO,CAAS,GAAG;GAC7C,IAAM,IAAW,EAAK;GACtB,AAAI,KACF,EAAe,EAAS,EAAE;EAE9B;CACF,GAAG;EAAC;EAAM;EAAW;CAAc,CAAC,GAGpC,QAAgB;EAEd,AADA,EAAgB,GAChB,EAAY;EAEZ,IAAM,UAAqB;GAEzB,AADA,EAAgB,GAChB,EAAY;EACd;EAGA,OADA,OAAO,iBAAiB,UAAU,CAAY,SACjC;GACX,OAAO,oBAAoB,UAAU,CAAY;EACnD;CACF,GAAG,CAAC,GAAiB,CAAW,CAAC,GAGjC,QAAgB;EACd,EAAkB;CACpB,GAAG,CAAC,GAAW,CAAiB,CAAC,GAGjC,QAAgB;EACd,EAAY;CACd,GAAG,CAAC,GAAM,CAAW,CAAC,GAGtB,cACe;EACX,AAAI,EAAiB,YAAY,QAC/B,aAAa,EAAiB,OAAO;CAEzC,GACC,CAAC,CAAC;CAIL,IAAM,IAAmB,EAAK,MAAM,MAAQ,EAAI,OAAO,CAAS,CAAC,EAAE,SAC7D,KAAiB,EAAK,MAAM,MAAQ,EAAI,OAAO,CAAS,CAAC,EAAE,OAE3D,KAAY,EAAO,SAAS;CAGlC,EAAa,UAAU,CAAC;CAGxB,IAAM,KAAiB,MACjB,EAAI,MAAY,EAAI,MAEpB,EAAI,WAAiB,aAClB,MAIH,MAAmB,GAAc,MAAwB;EAC7D,IAAM,IAAW,EAAI,OAAO,GACtB,IAAe,EAAc,CAAG,GAChC,IAAY,IAAe,EAAW,KAAgB,MACtD,IAAW,IAAe,EAAU,KAAgB;EAE1D,OACE,kBAAC,UAAD;GAEE,MAAM,MAAO;IACX,GAAU,EAAI,IAAI,CAAE;GACtB;GACA,MAAK;GACL,iBAAe;GACf,iBAAe,IAAc,YAAY,EAAI,OAAO,KAAA;GACpD,IAAI,OAAO,EAAI;GACf,UAAU,IAAW,IAAI;GACzB,WAAW,YAAY,IAAW,uBAAuB;GACzD,eAAe;IACb,EAAe,EAAI,EAAE;GACvB;GACA,YAAY,MAAM;IAKhB,AAJA,EAAc,GAAG,CAAW,IAK1B,EAAE,QAAQ,eACV,EAAE,QAAQ,gBACV,EAAE,QAAQ,UACV,EAAE,QAAQ,UAEV,EAAE,gBAAgB;GAEtB;GA3BF,UAAA;IA6BG,EAAI;IACL,kBAAC,QAAD;KAAM,WAAU;KAAmB,UAAA,EAAI;IAAY,CAAA;IAClD,KACC,kBAAC,GAAD;KAAO,SAAS,EAAU;KAAS,MAAK;KAAQ,WAAU;KACvD,UAAA;IACI,CAAA;IAER,EAAI;GACC;EApCD,GAAA,EAAI,EAoCH;CAEZ,GAGM,WACA,KACK,EAAY,KAAK,EAAE,UAAO,MAAM,KAAa,MAClD,kBAAC,OAAD;EAAkC,WAAU;EAA5C,UAAA,CACG,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,IAAa,KACZ,kBAAC,OAAD;GAAK,WAAU;GAAkB,MAAK;GAAY,eAAY;EAAQ,CAAA,GAEvE,KACC,kBAAC,QAAD;GAAM,WAAU;GAAqB,UAAA,EAAM;EAAY,CAAA,CAEzD,EAAA,CAAA,GAEJ,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,EAAU,KAAK,MAAQ;IACtB,IAAM,IAAc,EAAK,WAAW,MAAM,EAAE,OAAO,EAAI,EAAE;IACzD,OAAO,GAAgB,GAAK,CAAW;GACzC,CAAC;EACE,CAAA,CACF;CAjBK,GAAA,GAAO,MAAM,SAiBlB,CACN,IAGI,EAAK,KAAK,GAAK,MAAU,GAAgB,GAAK,CAAK,CAAC,GAIvD,WACA,MAAiB,UAAU,CAAC,IAA6B,OAG3D,kBAAC,OAAD;EAAK,WAAU;EAAiB,KAAK;EAArC,UAAA,CACE,kBAAC,UAAD;GACE,KAAK;GACL,MAAK;GACL,WAAU;GACV,eAAe;IACb,EAAoB,CAAC,CAAgB;GACvC;GACA,WAAW;GACX,cAAY;GACZ,iBAAe;GACf,iBAAc;GAEd,UAAA,kBAAC,OAAD;IACE,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IARjB,UAAA;KAUE,kBAAC,UAAD;MAAQ,IAAG;MAAK,IAAG;MAAK,GAAE;KAAK,CAAA;KAC/B,kBAAC,UAAD;MAAQ,IAAG;MAAK,IAAG;MAAI,GAAE;KAAK,CAAA;KAC9B,kBAAC,UAAD;MAAQ,IAAG;MAAK,IAAG;MAAK,GAAE;KAAK,CAAA;IAC5B;;EACC,CAAA,GAEP,KACC,kBAAC,OAAD;GACE,WAAU;GACV,MAAK;GACL,WAAW;GAEV,UAAA,EAAY,KAAK,EAAE,UAAO,MAAM,QAC/B,kBAAC,OAAD;IAAkC,WAAU;IAA5C,UAAA,CACG,KAAS,KACR,kBAAC,OAAD;KAAK,WAAU;KAA8B,UAAA,EAAM;IAAW,CAAA,GAE/D,EAAU,KAAK,MAAQ;KACtB,IAAM,IAAW,EAAI,OAAO,GACtB,IAAY,EAAkB,WAAW,MAAM,EAAE,OAAO,EAAI,EAAE,GAC9D,IAAe,EAAc,CAAG,GAChC,IAAY,IAAe,EAAW,KAAgB,MACtD,IAAW,IAAe,EAAU,KAAgB;KAC1D,OACE,kBAAC,UAAD;MAEE,MAAM,MAAO;OACX,AAAI,MACF,EAAa,QAAQ,KAAa;MAEtC;MACA,MAAK;MACL,UAAU,OAAqB,IAAY,IAAI;MAC/C,WAAW,uBAAuB,IAAW,gCAAgC;MAC7E,eAAe;OACb,EAAe,EAAI,EAAE;MACvB;MAZF,UAAA;OAcG,EAAI;OACL,kBAAC,QAAD,EAAA,UAAO,EAAI,MAAY,CAAA;OACtB,KACC,kBAAC,GAAD;QAAO,SAAS,EAAU;QAAS,MAAK;QACrC,UAAA;OACI,CAAA;OAER,EAAI;MACC;KArBD,GAAA,EAAI,EAqBH;IAEZ,CAAC,CACE;GApCK,GAAA,GAAO,MAAM,SAoClB,CACN;EACE,CAAA,CAEJ;KAUH,IAAoB,MAAY,eAAe,MAAY;CA0FjE,OA1EI,MAAiB,cAAc,KAAoB,CAAC,IAEpD,kBAAC,OAAD;EAAK,WAAW,8BAA8B;EAA9C,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAA2B,KAAK;GAA/C,UAAA,CACE,kBAAC,UAAD;IACE,WAAU;IACV,SAAS;IACT,WAAW;IACX,iBAAe;IACf,iBAAc;IACd,cAAY,MAAa;IAN3B,UAAA,CAQE,kBAAC,QAAD;KAAM,WAAU;KAAwB,UAAA;IAAqB,CAAA,GAC7D,kBAAC,OAAD;KACE,WAAW,wBAAwB,IAAiB,+BAA+B;KACnF,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,OAAM;KACN,eAAY;KAEZ,UAAA,kBAAC,QAAD;MACE,GAAE;MACF,QAAO;MACP,aAAY;MACZ,eAAc;MACd,gBAAe;KAChB,CAAA;IACE,CAAA,CACC;GAEP,CAAA,GAAA,KACC,kBAAC,OAAD;IAAK,WAAU;IAAsB,MAAK;IACvC,UAAA,EAAK,KAAK,MACT,kBAAC,UAAD;KAEE,MAAK;KACL,iBAAe,EAAI,OAAO;KAC1B,WAAW,uBAAuB,EAAI,OAAO,IAAY,gCAAgC;KACzF,eAAe;MAEb,AADA,EAAe,EAAI,EAAE,GACrB,EAAkB,EAAK;KACzB;KAEC,UAAA,EAAI;IACC,GAVD,EAAI,EAUH,CACT;GACE,CAAA,CAEJ;EAEJ,CAAA,GAAA,KACC,kBAAC,OAAD;GACE,IAAI,YAAY;GAChB,MAAK;GACL,mBAAiB,OAAO;GACxB,WAAW,eAAe,IAAiB,KAAK;GAChD,UAAU;GACV,cAAc;GACd,aAAa;GACb,YAAY;GAEX,UAAA;EACE,CAAA,CAEJ;MASP,kBAAC,OAAD;EACE,WAAW,QAJG,MAAiB,SAAS,wBAAwB,GAInC,GA1F/B,MAAY,cACR,4BACA,MAAY,YACV,0BACA,GAsFyC,GApF/C,KAAqB,KAAgB,yBAAyB,GAoFO,GAAG,IACnE,QAAQ,QAAQ,GAAG,CAAC,CACpB,KAAK;EAHV,UAAA,CAKE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IAEG,KAAwB,MACvB,kBAAC,UAAD;KACE,WAAU;KACV,eAAe;MACb,EAAW,MAAM;KACnB;KACA,cAAY;KACZ,UAAU;KAEV,UAAA,kBAAC,OAAD;MACE,OAAM;MACN,QAAO;MACP,SAAQ;MACR,MAAK;MACL,OAAM;MACN,eAAY;MAEZ,UAAA,kBAAC,QAAD;OACE,GAAE;OACF,QAAO;OACP,aAAY;OACZ,eAAc;OACd,gBAAe;MAChB,CAAA;KACE,CAAA;IACC,CAAA;IAGV,kBAAC,OAAD;KACE,KAAK;KACL,WAAU;KACV,MAAK;KACL,cAAY;KACZ,UAAU;KACV,YAAY,MAAM;MAMhB,IAAM,IAAe,EAAK,WAAW,MAAQ,EAAI,OAAO,CAAS;MAC7D,IAAe,KACnB,EAAc,GAAG,CAAY;KAC/B;KACA,cAAc,MAAiB,aAAa,IAAmB,KAAA;KAC/D,aAAa,MAAiB,aAAa,IAAkB,KAAA;KAC7D,YAAY,MAAiB,aAAa,IAAiB,KAAA;KAE1D,UAAA,GAAqB;IACnB,CAAA;IAGJ,KAAwB,MACvB,kBAAC,UAAD;KACE,WAAU;KACV,eAAe;MACb,EAAW,OAAO;KACpB;KACA,cAAY;KACZ,UAAU;KAEV,UAAA,kBAAC,OAAD;MACE,OAAM;MACN,QAAO;MACP,SAAQ;MACR,MAAK;MACL,OAAM;MACN,eAAY;MAEZ,UAAA,kBAAC,QAAD;OACE,GAAE;OACF,QAAO;OACP,aAAY;OACZ,eAAc;OACd,gBAAe;MAChB,CAAA;KACE,CAAA;IACC,CAAA;IAIT,GAAmB;GACjB;EAEJ,CAAA,GAAA,KACC,kBAAC,OAAD;GACE,IAAI,YAAY;GAChB,MAAK;GACL,mBAAiB,OAAO;GACxB,WAAW,eAAe,IAAiB,KAAK;GAChD,UAAU;GAET,UAAA;EACE,CAAA,CAEJ;;AAET"}

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs, TAG_CONFIG } from './Tabs';
+export type { TabsProps, TabItem, TabGroupMeta, TabOverflowMode, TabTagType, TabTagLabels, TabVariant, } from './Tabs';