@imfusion/web-ui 0.8.1-dev.58.g0912b389 → 0.8.1-dev.64.gbde1f63f

package/dist/tabs-DRyqtS04.js

@@ -0,0 +1,358 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { mh as t, pM as n } from "./icons-BsK_o-Cb.js";
+import { t as r } from "./meta-V_KyLeGn.js";
+import { l as i, u as a } from "./slider-Cqpreglu.js";
+import { cva as o } from "class-variance-authority";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Children as l, useCallback as u } from "react";
+import { Switch as d } from "@base-ui/react/switch";
+import { Toggle as f } from "@base-ui/react/toggle";
+import { ToggleGroup as p } from "@base-ui/react/toggle-group";
+import { Tabs as m } from "@base-ui/react/tabs";
+var h = {
+	flat: "imf-ui-kbd-module-flat",
+	icon: "imf-ui-kbd-module-icon",
+	primary: "imf-ui-kbd-module-primary",
+	root: "imf-ui-kbd-module-root"
+}, g = o(h.root, { variants: { variant: {
+	default: null,
+	primary: h.primary,
+	flat: h.flat
+} } });
+function _({ variant: e = "default", icon: r = !1, children: i, ...a }) {
+	return /* @__PURE__ */ c("kbd", {
+		...a,
+		"data-imf-ui-component": "Kbd",
+		className: g({
+			variant: e,
+			className: a.className
+		}),
+		children: [r && /* @__PURE__ */ s(n, {
+			glyph: t,
+			strokeWidth: 2,
+			"aria-hidden": !0,
+			className: h.icon
+		}), i]
+	});
+}
+//#endregion
+//#region src/components/kbd/kbd.meta.ts
+var ee = {
+	name: "Kbd",
+	category: r.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"]
+}, v = {
+	ctrl: "Control",
+	control: "Control",
+	cmd: "Meta",
+	"⌘": "Meta",
+	meta: "Meta",
+	opt: "Alt",
+	option: "Alt",
+	"⌥": "Alt",
+	alt: "Alt",
+	shift: "Shift",
+	"⇧": "Shift",
+	esc: "Escape",
+	escape: "Escape"
+};
+function y(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	if (t.length !== 0) return t.map((e) => v[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
+}
+var b = {
+	root: "imf-ui-switch-module-root",
+	thumb: "imf-ui-switch-module-thumb"
+}, x = /* @__PURE__ */ e({
+	Root: () => w,
+	Thumb: () => T
+}), S = o(b.root), C = o(b.thumb);
+function w(e) {
+	return /* @__PURE__ */ s(d.Root, {
+		...e,
+		"data-imf-ui-component": "Switch.Root",
+		className: (t) => S({ className: i(e.className, t) })
+	});
+}
+w.displayName = "Switch.Root";
+function T(e) {
+	return /* @__PURE__ */ s(d.Thumb, {
+		...e,
+		"data-imf-ui-component": "Switch.Thumb",
+		className: (t) => C({ className: i(e.className, t) })
+	});
+}
+T.displayName = "Switch.Thumb";
+var E = {
+	root: "imf-ui-toggle-module-root",
+	shortcut: "imf-ui-toggle-module-shortcut"
+}, te = o(E.root), D = 2;
+function O(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 += D);
+	}), t;
+}
+function k({ style: e, shortcut: t, children: n, ...r }) {
+	let o = {
+		"--glyph-count": O(n),
+		"--max-glyphs": D
+	};
+	return /* @__PURE__ */ c(f, {
+		"aria-keyshortcuts": t ? y(t) : void 0,
+		...r,
+		"data-imf-ui-component": "Toggle",
+		style: (t) => ({
+			...o,
+			...a(e, t)
+		}),
+		className: (e) => te({ className: i(r.className, e) }),
+		children: [n, t && /* @__PURE__ */ s(_, {
+			variant: "flat",
+			className: E.shortcut,
+			"aria-hidden": !0,
+			children: t
+		})]
+	});
+}
+//#endregion
+//#region src/components/toggle-group/toggle-group.tsx
+var A = o({ root: "imf-ui-toggle-group-module-root" }.root);
+function j(e) {
+	return /* @__PURE__ */ s(p, {
+		...e,
+		"data-imf-ui-component": "ToggleGroup",
+		className: (t) => A({ className: i(e.className, t) })
+	});
+}
+var M = {
+	alignCenter: "imf-ui-row-module-alignCenter",
+	alignEnd: "imf-ui-row-module-alignEnd",
+	alignStart: "imf-ui-row-module-alignStart",
+	alignStretch: "imf-ui-row-module-alignStretch",
+	gap1: "imf-ui-row-module-gap1",
+	gap10: "imf-ui-row-module-gap10",
+	gap2: "imf-ui-row-module-gap2",
+	gap3: "imf-ui-row-module-gap3",
+	gap4: "imf-ui-row-module-gap4",
+	gap5: "imf-ui-row-module-gap5",
+	gap6: "imf-ui-row-module-gap6",
+	gap7: "imf-ui-row-module-gap7",
+	gap8: "imf-ui-row-module-gap8",
+	gap9: "imf-ui-row-module-gap9",
+	justifyAround: "imf-ui-row-module-justifyAround",
+	justifyBetween: "imf-ui-row-module-justifyBetween",
+	justifyCenter: "imf-ui-row-module-justifyCenter",
+	justifyEnd: "imf-ui-row-module-justifyEnd",
+	justifyEvenly: "imf-ui-row-module-justifyEvenly",
+	justifyStart: "imf-ui-row-module-justifyStart",
+	root: "imf-ui-row-module-root",
+	wrap: "imf-ui-row-module-wrap"
+}, N = o(M.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
+	},
+	align: {
+		start: M.alignStart,
+		center: M.alignCenter,
+		end: M.alignEnd,
+		stretch: M.alignStretch
+	},
+	justify: {
+		start: M.justifyStart,
+		center: M.justifyCenter,
+		end: M.justifyEnd,
+		between: M.justifyBetween,
+		around: M.justifyAround,
+		evenly: M.justifyEvenly
+	},
+	wrap: {
+		true: M.wrap,
+		false: null
+	}
+} });
+function P({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r = !1, ...i }) {
+	return /* @__PURE__ */ s("div", {
+		...i,
+		"data-imf-ui-component": "Row",
+		className: N({
+			gap: e,
+			align: t,
+			justify: n,
+			wrap: r,
+			className: i.className
+		})
+	});
+}
+var F = {
+	alignCenter: "imf-ui-stack-module-alignCenter",
+	alignEnd: "imf-ui-stack-module-alignEnd",
+	alignStart: "imf-ui-stack-module-alignStart",
+	alignStretch: "imf-ui-stack-module-alignStretch",
+	gap0: "imf-ui-stack-module-gap0",
+	gap1: "imf-ui-stack-module-gap1",
+	gap10: "imf-ui-stack-module-gap10",
+	gap2: "imf-ui-stack-module-gap2",
+	gap3: "imf-ui-stack-module-gap3",
+	gap4: "imf-ui-stack-module-gap4",
+	gap5: "imf-ui-stack-module-gap5",
+	gap6: "imf-ui-stack-module-gap6",
+	gap7: "imf-ui-stack-module-gap7",
+	gap8: "imf-ui-stack-module-gap8",
+	gap9: "imf-ui-stack-module-gap9",
+	justifyAround: "imf-ui-stack-module-justifyAround",
+	justifyBetween: "imf-ui-stack-module-justifyBetween",
+	justifyCenter: "imf-ui-stack-module-justifyCenter",
+	justifyEnd: "imf-ui-stack-module-justifyEnd",
+	justifyEvenly: "imf-ui-stack-module-justifyEvenly",
+	justifyStart: "imf-ui-stack-module-justifyStart",
+	root: "imf-ui-stack-module-root"
+}, I = o(F.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
+	},
+	align: {
+		start: F.alignStart,
+		center: F.alignCenter,
+		end: F.alignEnd,
+		stretch: F.alignStretch
+	},
+	justify: {
+		start: F.justifyStart,
+		center: F.justifyCenter,
+		end: F.justifyEnd,
+		between: F.justifyBetween,
+		around: F.justifyAround,
+		evenly: F.justifyEvenly
+	}
+} });
+function L({ gap: e = "4", align: t = "stretch", justify: n = "start", ...r }) {
+	return /* @__PURE__ */ s("div", {
+		...r,
+		"data-imf-ui-component": "Stack",
+		className: I({
+			gap: e,
+			align: t,
+			justify: n,
+			className: r.className
+		})
+	});
+}
+var R = {
+	indicator: "imf-ui-tabs-module-indicator",
+	list: "imf-ui-tabs-module-list",
+	listFill: "imf-ui-tabs-module-listFill",
+	panel: "imf-ui-tabs-module-panel",
+	panelViewport: "imf-ui-tabs-module-panelViewport",
+	root: "imf-ui-tabs-module-root",
+	tab: "imf-ui-tabs-module-tab"
+}, z = /* @__PURE__ */ e({
+	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);
+function K(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function q(e) {
+	let t = new ResizeObserver(() => {
+		let t = e.dataset.orientation === "vertical" ? e.scrollHeight > e.clientHeight : e.scrollWidth > e.clientWidth;
+		e.toggleAttribute("data-overflowing", t);
+	}), n = () => {
+		t.disconnect(), t.observe(e);
+		for (let n of e.children) t.observe(n);
+	}, r = new MutationObserver(n);
+	return r.observe(e, { childList: !0 }), n(), () => {
+		t.disconnect(), r.disconnect();
+	};
+}
+function J(e) {
+	return /* @__PURE__ */ s(m.Root, {
+		...e,
+		"data-imf-ui-component": "Tabs.Root",
+		className: (t) => V({ className: i(e.className, t) })
+	});
+}
+J.displayName = "Tabs.Root";
+function Y({ fill: e = !1, ref: t, ...n }) {
+	let r = u((e) => {
+		if (!e) return;
+		K(t, e);
+		let n = q(e);
+		return () => {
+			n(), K(t, null);
+		};
+	}, [t]);
+	return /* @__PURE__ */ s(m.List, {
+		...n,
+		ref: r,
+		"data-imf-ui-component": "Tabs.List",
+		className: (t) => B({
+			fill: e,
+			className: i(n.className, t)
+		})
+	});
+}
+Y.displayName = "Tabs.List";
+function X(e) {
+	return /* @__PURE__ */ s(m.Tab, {
+		...e,
+		"data-imf-ui-component": "Tabs.Tab",
+		className: (t) => H({ className: i(e.className, t) })
+	});
+}
+X.displayName = "Tabs.Tab";
+function Z(e) {
+	return /* @__PURE__ */ s(m.Indicator, {
+		...e,
+		"data-imf-ui-component": "Tabs.Indicator",
+		className: (t) => U({ className: i(e.className, t) })
+	});
+}
+Z.displayName = "Tabs.Indicator";
+function Q(e) {
+	return /* @__PURE__ */ s("div", {
+		...e,
+		"data-imf-ui-component": "Tabs.PanelViewport",
+		className: W({ className: e.className })
+	});
+}
+Q.displayName = "Tabs.PanelViewport";
+function $(e) {
+	return /* @__PURE__ */ s(m.Panel, {
+		...e,
+		"data-imf-ui-component": "Tabs.Panel",
+		className: (t) => G({ className: i(e.className, t) })
+	});
+}
+$.displayName = "Tabs.Panel";
+//#endregion
+export { _, J as a, L as c, k as d, w as f, ee as g, y as h, Q as i, P as l, x as m, Y as n, X as o, T as p, $ as r, z as s, Z as t, j as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.8.1-dev.58.g0912b389",
+  "version": "0.8.1-dev.64.gbde1f63f",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -130,6 +130,7 @@
     "@storybook/addon-vitest": "10.6.2",
     "@storybook/react-vite": "10.6.2",
     "@tanstack/highlight": "0.1.0",
+    "@tanstack/react-hotkeys": "0.13.0",
     "@tanstack/react-pacer": "0.22.1",
     "@types/culori": "4.0.1",
     "@types/mdx": "2.0.13",

package/src/docgen/doc.gen.json

@@ -611,6 +611,13 @@
           "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."
         },
+        {
+          "name": "shortcut",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Key hint shown in the top corner at the end of the line, such as `\"S\"` or `\"Ctrl Z\"`. It also sets\n`aria-keyshortcuts` in its notation (`Control+Z`), which an explicit\n`aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys."
+        },
         {
           "name": "size",
           "required": false,
@@ -1471,6 +1478,13 @@
           "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."
         },
+        {
+          "name": "shortcut",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Key hint shown in the top corner at the end of the line, such as `\"S\"` or `\"Ctrl Z\"`. It also sets\n`aria-keyshortcuts` in its notation (`Control+Z`), which an explicit\n`aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys."
+        },
         {
           "name": "size",
           "required": false,
@@ -2667,6 +2681,13 @@
           "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."
         },
+        {
+          "name": "shortcut",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Key hint shown in the top corner at the end of the line, such as `\"S\"` or `\"Ctrl Z\"`. It also sets\n`aria-keyshortcuts` in its notation (`Control+Z`), which an explicit\n`aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys."
+        },
         {
           "name": "size",
           "required": false,
@@ -2771,6 +2792,36 @@
     },
     "subComponents": []
   },
+  "kbd": {
+    "root": {
+      "name": "Kbd",
+      "description": "Kbd — a keyboard key or shortcut, drawn as a keycap tinted from the surrounding text. A combination such as `Ctrl Z` goes\nin one Kbd. `flat` drops the side face for a hint inside a control.",
+      "props": [
+        {
+          "name": "icon",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Show a keyboard glyph before the key, to mark it as a shortcut in running text."
+        },
+        {
+          "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": "variant",
+          "required": false,
+          "type": "\"default\" | \"primary\" | \"flat\" | null",
+          "defaultValue": "default",
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "logo": {
     "root": {
       "name": "Logo",
@@ -8074,6 +8125,13 @@
           "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."
         },
+        {
+          "name": "shortcut",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Key hint shown in the top corner at the end of the line, such as `\"P\"` or `\"Ctrl Z\"`. It also sets\n`aria-keyshortcuts` in its notation (`Control+Z`), which an explicit\n`aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys."
+        },
         {
           "name": "style",
           "required": false,

package/src/llms/icon-catalog.gen.json

@@ -7259,6 +7259,14 @@
     "origin": "iconoir",
     "file": "regular/key-xmark.svg"
   },
+  {
+    "name": "Keyboard",
+    "category": "System",
+    "tags": ["keyboard", "shortcut", "key", "hotkey", "input"],
+    "style": "regular",
+    "origin": "imfusion",
+    "file": "regular/keyboard.svg"
+  },
   {
     "name": "Keyframe",
     "category": "Animations",

package/src/llms/llms.gen.txt

@@ -124,6 +124,11 @@ Single-line text input for form data entry. Also called a text field; it support
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .input (jq: jq '.input' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/input.md
 
+## Kbd
+- category: Display, status: experimental
+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.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .kbd (jq: jq '.kbd' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## Logo
 - category: Display, status: stable
 Renders a logo from a URL or inline React element with consistent sizing. Also called a wordmark or brand mark.

package/src/llms/skills/imf-web-ui/SKILL.md

@@ -62,7 +62,7 @@ props and the conventions `tokens` topic for exact token names and defaults.
 The host project's existing conventions win. The companion skills fill gaps; they do not justify refactoring a working
 styling system, state library, or folder structure.
 
-When a task needs TanStack Router, Query, Form, Table, or Store and the project has no incumbent, open
+When a task needs TanStack Router, Query, Form, Table, Store, or Hotkeys and the project has no incumbent, open
 `imf-web-ui-conventions` for the house position on that layer, then read the library's current documentation with
 `npx @tanstack/cli` before using it. The recommendation lives in the conventions topics, not here.
 

package/src/llms/skills/imf-web-ui-conventions/topics/tooling.md

@@ -4,27 +4,28 @@ Use the tool's current documentation rather than memory.
 
 ## Topic-to-tool map
 
-| Need                  | Default                                      |
-| --------------------- | -------------------------------------------- |
-| Toolchain             | Vite+ (`vite-plus`), driven through `vp`     |
-| Routing and URL state | TanStack Router                              |
-| Server state          | TanStack Query                               |
-| Forms                 | TanStack Form                                |
-| Data grids            | TanStack Table plus Web UI `Table` parts     |
-| App-wide client state | TanStack Store, after URL/server/local state |
-| Schema validation     | Zod at the boundary                          |
-| Tests                 | Vitest through `vp test`                     |
-| Format                | Oxfmt through `vp fmt`                       |
-| Lint                  | Oxlint through `vp lint`, type-aware         |
-| Types                 | `tsc --noEmit`                               |
-| Pre-commit checks     | `vp staged` against the staged state         |
-| Dead code             | Knip via `verify:knip`                       |
+| Need                  | Default                                                        | Docs                                      |
+| --------------------- | -------------------------------------------------------------- | ----------------------------------------- |
+| Toolchain             | Vite+ (`vite-plus`), driven through `vp`                       | https://viteplus.dev/guide                |
+| Routing and URL state | TanStack Router                                                | `npx @tanstack/cli`, library `router`     |
+| Server state          | TanStack Query                                                 | `npx @tanstack/cli`, library `query`      |
+| Forms                 | TanStack Form                                                  | `npx @tanstack/cli`, library `form`       |
+| Data grids            | TanStack Table plus Web UI `Table` parts                       | `npx @tanstack/cli`, library `table`      |
+| App-wide client state | TanStack Store, after URL/server/local state                   | `npx @tanstack/cli`, library `store`      |
+| Keyboard shortcuts    | TanStack Hotkeys; show the key with Web UI `shortcut` or `Kbd` | `npx @tanstack/cli`, library `hotkeys`    |
+| Schema validation     | Zod at the boundary                                            | https://zod.dev                           |
+| Tests                 | Vitest through `vp test`                                       | https://vitest.dev                        |
+| Format                | Oxfmt through `vp fmt`                                         | https://oxc.rs/docs/guide/usage/formatter |
+| Lint                  | Oxlint through `vp lint`, type-aware                           | https://oxc.rs/docs/guide/usage/linter    |
+| Types                 | `tsc --noEmit`                                                 | https://www.typescriptlang.org/docs       |
+| Pre-commit checks     | `vp staged` against the staged state                           | https://viteplus.dev/guide                |
+| Dead code             | Knip via `verify:knip`                                         | https://knip.dev                          |
 
 ## When a library owns a layer
 
 Use the library that already owns the problem. Adopt Form for form rules, Query for caching and refetching, Router for URL
-state, and Table for sorting and pagination instead of rebuilding those layers. Keep an existing project choice when it
-works.
+state, Table for sorting and pagination, and Hotkeys for keyboard shortcuts instead of rebuilding those layers. Web UI only
+shows a key; the app binds it. Keep an existing project choice when it works.
 
 ## Devtools
 
@@ -33,8 +34,10 @@ devtools package whenever a new TanStack dependency is added.
 
 ## Docs over memory
 
-Use `npx @tanstack/cli` for TanStack documentation. If TanStack Intent is configured, use it for the Agent Skills the
-TanStack package provides.
+Use `npx @tanstack/cli` for TanStack documentation, with the library id from the map: `search-docs "<query>" --library <id>`
+finds a page, and `doc <id> <path>` prints it, for example
+`npx @tanstack/cli doc hotkeys framework/react/reference/functions/useHotkey`. If TanStack Intent is configured, use it for
+the Agent Skills the TanStack package provides.
 
 ## Vite+