@imfusion/web-ui 0.11.1-dev.33.gefbd75be → 0.11.1-dev.35.g0028b4dd

package/dist/{tabs-U3Cg6YAw.js → tabs-D5DTlk0d.js}

@@ -1,11 +1,11 @@
 import { a as e, o as t, s as n } from "./utils-RZJAXfcf.js";
 import { _M as r, mh as i } from "./icons-vc1WZCxX.js";
 import { t as a } from "./meta-V_KyLeGn.js";
-import { cva as o } from "class-variance-authority";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Children as l, createContext as u, useCallback as d, useContext as f } from "react";
-import { Toggle as p } from "@base-ui/react/toggle";
-import { ToggleGroup as ee } from "@base-ui/react/toggle-group";
+import { cva as o, cx as s } from "class-variance-authority";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Children as u, createContext as d, useCallback as f, useContext as p } from "react";
+import { Toggle as ee } from "@base-ui/react/toggle";
+import { ToggleGroup as te } from "@base-ui/react/toggle-group";
 import { Switch as m } from "@base-ui/react/switch";
 import { Tabs as h } from "@base-ui/react/tabs";
 var g = {
@@ -13,20 +13,20 @@ var g = {
 	icon: "imf-ui-kbd-module-icon",
 	primary: "imf-ui-kbd-module-primary",
 	root: "imf-ui-kbd-module-root"
-}, _ = o(g.root, { variants: { variant: {
+}, ne = o(g.root, { variants: { variant: {
 	default: null,
 	primary: g.primary,
 	flat: g.flat
 } } });
-function v({ variant: e = "default", icon: t = !1, children: n, ...a }) {
-	return /* @__PURE__ */ c("kbd", {
+function _({ variant: e = "default", icon: t = !1, children: n, ...a }) {
+	return /* @__PURE__ */ l("kbd", {
 		...a,
 		"data-imf-ui-component": "Kbd",
-		className: _({
+		className: ne({
 			variant: e,
 			className: a.className
 		}),
-		children: [t && /* @__PURE__ */ s(r, {
+		children: [t && /* @__PURE__ */ c(r, {
 			glyph: i,
 			strokeWidth: 2,
 			"aria-hidden": !0,
@@ -36,14 +36,14 @@ function v({ variant: e = "default", icon: t = !1, children: n, ...a }) {
 }
 //#endregion
 //#region src/components/kbd/kbd.meta.ts
-var te = {
+var v = {
 	name: "Kbd",
 	category: a.display,
 	status: "experimental",
 	description: "Shows a keyboard key or shortcut, such as the letter that activates a button. Also called a key hint; Button and Toggle render it through their `shortcut` prop.",
 	origin: "native",
 	internalDependencies: ["Icon"]
-}, y = {
+}, re = {
 	ctrl: "Control",
 	control: "Control",
 	cmd: "Meta",
@@ -58,65 +58,65 @@ var te = {
 	esc: "Escape",
 	escape: "Escape"
 };
-function b(e) {
+function y(e) {
 	let t = e.trim().split(/\s+/).filter(Boolean);
-	if (t.length !== 0) return t.map((e) => y[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
+	if (t.length !== 0) return t.map((e) => re[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
 }
 //#endregion
 //#region src/components/toggle-group/toggle-group-size.ts
-var x = u("md"), S = {
+var b = d("md"), x = {
 	root: "imf-ui-toggle-module-root",
 	shortcut: "imf-ui-toggle-module-shortcut",
 	sizeSm: "imf-ui-toggle-module-sizeSm"
-}, C = o(S.root, { variants: { size: {
-	sm: S.sizeSm,
+}, ie = o(x.root, { variants: { size: {
+	sm: x.sizeSm,
 	md: null
-} } }), w = 2;
-function T(e) {
+} } }), S = 2;
+function ae(e) {
 	let t = 0;
-	return l.forEach(e, (e) => {
-		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += w);
+	return u.forEach(e, (e) => {
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += S);
 	}), t;
 }
-function ne({ style: n, shortcut: r, size: i, children: a, ...o }) {
-	let l = f(x), u = {
-		"--glyph-count": T(a),
-		"--max-glyphs": w
+function C({ style: n, shortcut: r, size: i, children: a, ...o }) {
+	let s = p(b), u = {
+		"--glyph-count": ae(a),
+		"--max-glyphs": S
 	};
-	return /* @__PURE__ */ c(p, {
-		"aria-keyshortcuts": r ? b(r) : void 0,
+	return /* @__PURE__ */ l(ee, {
+		"aria-keyshortcuts": r ? y(r) : void 0,
 		...o,
 		"data-imf-ui-component": "Toggle",
 		style: (e) => ({
 			...u,
 			...t(n, e)
 		}),
-		className: (t) => C({
-			size: i ?? l,
+		className: (t) => ie({
+			size: i ?? s,
 			className: e(o.className, t)
 		}),
-		children: [a, r && /* @__PURE__ */ s(v, {
+		children: [a, r && /* @__PURE__ */ c(_, {
 			variant: "flat",
-			className: S.shortcut,
+			className: x.shortcut,
 			"aria-hidden": !0,
 			children: r
 		})]
 	});
 }
-var E = {
+var w = {
 	root: "imf-ui-toggle-group-module-root",
 	sizeSm: "imf-ui-toggle-group-module-sizeSm"
-}, re = o(E.root, { variants: { size: {
-	sm: E.sizeSm,
+}, T = o(w.root, { variants: { size: {
+	sm: w.sizeSm,
 	md: null
 } } });
-function ie({ size: t = "md", ...n }) {
-	return /* @__PURE__ */ s(x.Provider, {
+function E({ size: t = "md", ...n }) {
+	return /* @__PURE__ */ c(b.Provider, {
 		value: t ?? "md",
-		children: /* @__PURE__ */ s(ee, {
+		children: /* @__PURE__ */ c(te, {
 			...n,
 			"data-imf-ui-component": "ToggleGroup",
-			className: (r) => re({
+			className: (r) => T({
 				size: t,
 				className: e(n.className, r)
 			})
@@ -126,27 +126,27 @@ function ie({ size: t = "md", ...n }) {
 var D = {
 	root: "imf-ui-switch-module-root",
 	thumb: "imf-ui-switch-module-thumb"
-}, ae = /* @__PURE__ */ n({
-	Root: () => A,
-	Thumb: () => j
-}), O = o(D.root), k = o(D.thumb);
-function A(t) {
-	return /* @__PURE__ */ s(m.Root, {
+}, oe = /* @__PURE__ */ n({
+	Root: () => O,
+	Thumb: () => k
+}), se = o(D.root), ce = o(D.thumb);
+function O(t) {
+	return /* @__PURE__ */ c(m.Root, {
 		...t,
 		"data-imf-ui-component": "Switch.Root",
-		className: (n) => O({ className: e(t.className, n) })
+		className: (n) => se({ className: e(t.className, n) })
 	});
 }
-A.displayName = "Switch.Root";
-function j(t) {
-	return /* @__PURE__ */ s(m.Thumb, {
+O.displayName = "Switch.Root";
+function k(t) {
+	return /* @__PURE__ */ c(m.Thumb, {
 		...t,
 		"data-imf-ui-component": "Switch.Thumb",
-		className: (n) => k({ className: e(t.className, n) })
+		className: (n) => ce({ className: e(t.className, n) })
 	});
 }
-j.displayName = "Switch.Thumb";
-var M = {
+k.displayName = "Switch.Thumb";
+var A = {
 	alignCenter: "imf-ui-row-module-alignCenter",
 	alignEnd: "imf-ui-row-module-alignEnd",
 	alignStart: "imf-ui-row-module-alignStart",
@@ -169,43 +169,43 @@ var M = {
 	justifyStart: "imf-ui-row-module-justifyStart",
 	root: "imf-ui-row-module-root",
 	wrap: "imf-ui-row-module-wrap"
-}, N = o(M.root, { variants: {
+}, j = o(A.root, { variants: {
 	gap: {
-		1: M.gap1,
-		2: M.gap2,
-		3: M.gap3,
-		4: M.gap4,
-		5: M.gap5,
-		6: M.gap6,
-		7: M.gap7,
-		8: M.gap8,
-		9: M.gap9,
-		10: M.gap10
+		1: A.gap1,
+		2: A.gap2,
+		3: A.gap3,
+		4: A.gap4,
+		5: A.gap5,
+		6: A.gap6,
+		7: A.gap7,
+		8: A.gap8,
+		9: A.gap9,
+		10: A.gap10
 	},
 	align: {
-		start: M.alignStart,
-		center: M.alignCenter,
-		end: M.alignEnd,
-		stretch: M.alignStretch
+		start: A.alignStart,
+		center: A.alignCenter,
+		end: A.alignEnd,
+		stretch: A.alignStretch
 	},
 	justify: {
-		start: M.justifyStart,
-		center: M.justifyCenter,
-		end: M.justifyEnd,
-		between: M.justifyBetween,
-		around: M.justifyAround,
-		evenly: M.justifyEvenly
+		start: A.justifyStart,
+		center: A.justifyCenter,
+		end: A.justifyEnd,
+		between: A.justifyBetween,
+		around: A.justifyAround,
+		evenly: A.justifyEvenly
 	},
 	wrap: {
-		true: M.wrap,
+		true: A.wrap,
 		false: null
 	}
 } });
-function P({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r = !1, ...i }) {
-	return /* @__PURE__ */ s("div", {
+function M({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r = !1, ...i }) {
+	return /* @__PURE__ */ c("div", {
 		...i,
 		"data-imf-ui-component": "Row",
-		className: N({
+		className: j({
 			gap: e,
 			align: t,
 			justify: n,
@@ -214,7 +214,7 @@ function P({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r =
 		})
 	});
 }
-var F = {
+var N = {
 	alignCenter: "imf-ui-stack-module-alignCenter",
 	alignEnd: "imf-ui-stack-module-alignEnd",
 	alignStart: "imf-ui-stack-module-alignStart",
@@ -237,40 +237,40 @@ var F = {
 	justifyEvenly: "imf-ui-stack-module-justifyEvenly",
 	justifyStart: "imf-ui-stack-module-justifyStart",
 	root: "imf-ui-stack-module-root"
-}, I = o(F.root, { variants: {
+}, P = o(N.root, { variants: {
 	gap: {
-		0: F.gap0,
-		1: F.gap1,
-		2: F.gap2,
-		3: F.gap3,
-		4: F.gap4,
-		5: F.gap5,
-		6: F.gap6,
-		7: F.gap7,
-		8: F.gap8,
-		9: F.gap9,
-		10: F.gap10
+		0: N.gap0,
+		1: N.gap1,
+		2: N.gap2,
+		3: N.gap3,
+		4: N.gap4,
+		5: N.gap5,
+		6: N.gap6,
+		7: N.gap7,
+		8: N.gap8,
+		9: N.gap9,
+		10: N.gap10
 	},
 	align: {
-		start: F.alignStart,
-		center: F.alignCenter,
-		end: F.alignEnd,
-		stretch: F.alignStretch
+		start: N.alignStart,
+		center: N.alignCenter,
+		end: N.alignEnd,
+		stretch: N.alignStretch
 	},
 	justify: {
-		start: F.justifyStart,
-		center: F.justifyCenter,
-		end: F.justifyEnd,
-		between: F.justifyBetween,
-		around: F.justifyAround,
-		evenly: F.justifyEvenly
+		start: N.justifyStart,
+		center: N.justifyCenter,
+		end: N.justifyEnd,
+		between: N.justifyBetween,
+		around: N.justifyAround,
+		evenly: N.justifyEvenly
 	}
 } });
-function L({ gap: e = "4", align: t = "stretch", justify: n = "start", ...r }) {
-	return /* @__PURE__ */ s("div", {
+function F({ gap: e = "4", align: t = "stretch", justify: n = "start", ...r }) {
+	return /* @__PURE__ */ c("div", {
 		...r,
 		"data-imf-ui-component": "Stack",
-		className: I({
+		className: P({
 			gap: e,
 			align: t,
 			justify: n,
@@ -278,25 +278,51 @@ function L({ gap: e = "4", align: t = "stretch", justify: n = "start", ...r }) {
 		})
 	});
 }
-var R = {
+var I = {
+	item: "imf-ui-tabs-underline-module-item",
+	rule: "imf-ui-tabs-underline-module-rule"
+}, L = o(I.rule), R = o(I.item), z = {
 	indicator: "imf-ui-tabs-module-indicator",
+	indicatorUnderline: "imf-ui-tabs-module-indicatorUnderline",
 	list: "imf-ui-tabs-module-list",
 	listFill: "imf-ui-tabs-module-listFill",
+	listUnderline: "imf-ui-tabs-module-listUnderline",
 	panel: "imf-ui-tabs-module-panel",
+	panelUnderline: "imf-ui-tabs-module-panelUnderline",
 	panelViewport: "imf-ui-tabs-module-panelViewport",
+	panelViewportUnderline: "imf-ui-tabs-module-panelViewportUnderline",
 	root: "imf-ui-tabs-module-root",
-	tab: "imf-ui-tabs-module-tab"
-}, z = /* @__PURE__ */ n({
+	tab: "imf-ui-tabs-module-tab",
+	tabUnderline: "imf-ui-tabs-module-tabUnderline"
+}, B = /* @__PURE__ */ n({
 	Indicator: () => Z,
 	List: () => Y,
 	Panel: () => $,
 	PanelViewport: () => Q,
 	Root: () => J,
 	Tab: () => X
-}), B = o(R.list, { variants: { fill: {
-	true: R.listFill,
-	false: null
-} } }), V = o(R.root), H = o(R.tab), U = o(R.indicator), W = o(R.panelViewport), G = o(R.panel);
+}), V = o(z.list, { variants: {
+	fill: {
+		true: z.listFill,
+		false: null
+	},
+	appearance: {
+		boxed: null,
+		underline: s(z.listUnderline, L())
+	}
+} }), H = o(z.root), U = o(null, { variants: { appearance: {
+	boxed: z.tab,
+	underline: s(z.tabUnderline, R())
+} } }), W = o(null, { variants: { appearance: {
+	boxed: z.indicator,
+	underline: z.indicatorUnderline
+} } }), le = o(z.panelViewport, { variants: { appearance: {
+	boxed: null,
+	underline: z.panelViewportUnderline
+} } }), ue = o(z.panel, { variants: { appearance: {
+	boxed: null,
+	underline: z.panelUnderline
+} } }), G = d("boxed");
 function K(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
@@ -312,16 +338,20 @@ function q(e) {
 		t.disconnect(), r.disconnect();
 	};
 }
-function J(t) {
-	return /* @__PURE__ */ s(h.Root, {
-		...t,
-		"data-imf-ui-component": "Tabs.Root",
-		className: (n) => V({ className: e(t.className, n) })
+function J({ appearance: t = "boxed", ...n }) {
+	let r = n.orientation === "vertical" ? "boxed" : t;
+	return /* @__PURE__ */ c(G, {
+		value: r,
+		children: /* @__PURE__ */ c(h.Root, {
+			...n,
+			"data-imf-ui-component": "Tabs.Root",
+			className: (t) => H({ className: e(n.className, t) })
+		})
 	});
 }
 J.displayName = "Tabs.Root";
 function Y({ fill: t = !1, ref: n, ...r }) {
-	let i = d((e) => {
+	let i = p(G), a = f((e) => {
 		if (!e) return;
 		K(n, e);
 		let t = q(e);
@@ -329,48 +359,65 @@ function Y({ fill: t = !1, ref: n, ...r }) {
 			t(), K(n, null);
 		};
 	}, [n]);
-	return /* @__PURE__ */ s(h.List, {
+	return /* @__PURE__ */ c(h.List, {
 		...r,
-		ref: i,
+		ref: a,
 		"data-imf-ui-component": "Tabs.List",
-		className: (n) => B({
+		className: (n) => V({
 			fill: t,
+			appearance: i,
 			className: e(r.className, n)
 		})
 	});
 }
 Y.displayName = "Tabs.List";
 function X(t) {
-	return /* @__PURE__ */ s(h.Tab, {
+	let n = p(G);
+	return /* @__PURE__ */ c(h.Tab, {
 		...t,
 		"data-imf-ui-component": "Tabs.Tab",
-		className: (n) => H({ className: e(t.className, n) })
+		className: (r) => U({
+			appearance: n,
+			className: e(t.className, r)
+		})
 	});
 }
 X.displayName = "Tabs.Tab";
 function Z(t) {
-	return /* @__PURE__ */ s(h.Indicator, {
+	let n = p(G);
+	return /* @__PURE__ */ c(h.Indicator, {
 		...t,
 		"data-imf-ui-component": "Tabs.Indicator",
-		className: (n) => U({ className: e(t.className, n) })
+		className: (r) => W({
+			appearance: n,
+			className: e(t.className, r)
+		})
 	});
 }
 Z.displayName = "Tabs.Indicator";
 function Q(e) {
-	return /* @__PURE__ */ s("div", {
+	let t = p(G);
+	return /* @__PURE__ */ c("div", {
 		...e,
 		"data-imf-ui-component": "Tabs.PanelViewport",
-		className: W({ className: e.className })
+		className: le({
+			appearance: t,
+			className: e.className
+		})
 	});
 }
 Q.displayName = "Tabs.PanelViewport";
 function $(t) {
-	return /* @__PURE__ */ s(h.Panel, {
+	let n = p(G);
+	return /* @__PURE__ */ c(h.Panel, {
 		...t,
 		"data-imf-ui-component": "Tabs.Panel",
-		className: (n) => G({ className: e(t.className, n) })
+		className: (r) => ue({
+			appearance: n,
+			className: e(t.className, r)
+		})
 	});
 }
 $.displayName = "Tabs.Panel";
 //#endregion
-export { v as _, J as a, L as c, j as d, ae as f, te as g, b as h, Q as i, P as l, ne as m, Y as n, X as o, ie as p, $ as r, z as s, Z as t, A as u };
+export { y as _, J as a, R as c, M as d, O as f, C as g, E as h, Q as i, L as l, oe as m, Y as n, X as o, k as p, $ as r, B as s, Z as t, F as u, v, _ as y };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.33.gefbd75be",
+  "version": "0.11.1-dev.35.g0028b4dd",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/docgen/doc.gen.json

@@ -10799,6 +10799,57 @@
       }
     ]
   },
+  "tab-nav": {
+    "root": {
+      "name": "TabNav.Root",
+      "description": "TabNav.Root — a `<nav>` of links that draws the hairline under its items. Give it an `aria-label` that names the\nnavigation, such as \"Project\".\nNot based on any upstream component.",
+      "props": [
+        {
+          "name": "aria-label",
+          "required": true,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Names the navigation for screen readers, such as \"Project\"."
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLElement>",
+          "defaultValue": null,
+          "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "TabNav.Item",
+        "description": "TabNav.Item — a link in the row. Renders an `<a>`; pass a router link as `render` to navigate without a page load.",
+        "props": [
+          {
+            "name": "current",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Marks the item as the page the user is on: sets `aria-current=\"page\"` and `data-current`, and draws the bar."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, {}>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          }
+        ]
+      }
+    ]
+  },
   "table": {
     "root": {
       "name": "Table.Root",
@@ -10987,6 +11038,13 @@
       "name": "Tabs.Root",
       "description": "Tabs.Root — container that manages the active tab value and orientation context.",
       "props": [
+        {
+          "name": "appearance",
+          "required": false,
+          "type": "TabsAppearance",
+          "defaultValue": "boxed",
+          "description": "`\"boxed\"` outlines the active tab in a box that fuses into a framed panel. `\"underline\"` marks it with a bar under\nits label on a hairline rule, with an unframed panel. Underline is horizontal only: a vertical Tabs stays boxed."
+        },
         {
           "name": "className",
           "required": false,
@@ -11048,7 +11106,7 @@
     "subComponents": [
       {
         "name": "Tabs.Indicator",
-        "description": "Tabs.Indicator — the bordered box marking the active tab, positioned via\nthe `--active-tab-*` CSS custom properties Base UI writes onto it. Render\nonce per Tabs.List, after the Tabs.Tab list.",
+        "description": "Tabs.Indicator — the bordered box (boxed) or bar (underline) marking the active tab, positioned via\nthe `--active-tab-*` CSS custom properties Base UI writes onto it. Render\nonce per Tabs.List, after the Tabs.Tab list.",
         "props": [
           {
             "name": "className",
@@ -11192,7 +11250,7 @@
       },
       {
         "name": "Tabs.PanelViewport",
-        "description": "Tabs.PanelViewport — the shared frame Tabs.Panel elements render inside.\nNo Base UI equivalent exists; it's surfaced as a named part since its\nhairline border is what Tabs.Indicator visually fuses into.",
+        "description": "Tabs.PanelViewport — the shared frame Tabs.Panel elements render inside.\nNo Base UI equivalent exists; it's surfaced as a named part since its\nhairline border is what the boxed Tabs.Indicator visually fuses into. The underline appearance draws no frame.",
         "props": [
           {
             "name": "ref",

package/src/llms/llms.gen.txt

@@ -241,6 +241,11 @@ Two-state control for an on/off setting that takes effect immediately. Also call
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .switch (jq: jq '.switch' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/switch.md
 
+## TabNav
+- category: Display, status: experimental
+Row of links to routes with a bar under the current one, such as the sections of a project. Also called route tabs or link tabs; use Tabs to switch panels on one page.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .tab-nav (jq: jq '.tab-nav' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## Table
 - category: Display, status: stable
 Presentational table parts for static tabular data. Pair them with a headless table library for sorting, pagination, or selection.
@@ -248,7 +253,7 @@ Presentational table parts for static tabular data. Pair them with a headless ta
 
 ## Tabs
 - category: Display, status: stable
-Switches between related panels within one view. Also called a tab strip or tab bar; it supports horizontal and vertical layouts.
+Switches between related panels within one view. Also called a tab strip or tab bar; it supports horizontal and vertical layouts and a boxed or underline look. Use TabNav for links to routes.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .tabs (jq: jq '.tabs' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/tabs.md