@imfusion/web-ui 0.11.1-dev.6.gf4b6c627 → 0.11.1-dev.62.gfcd31b6e

package/dist/tabs-BqgyMmo6.js

@@ -0,0 +1,173 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t } from "./utils-J6vbjIt1.js";
+import { cva as n, cx as r } from "class-variance-authority";
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as a, useCallback as o, useContext as s } from "react";
+import { Switch as c } from "@base-ui/react/switch";
+import { Tabs as l } from "@base-ui/react/tabs";
+var u = {
+	root: "imf-ui-switch-module-root",
+	thumb: "imf-ui-switch-module-thumb"
+}, d = /* @__PURE__ */ e({
+	Root: () => m,
+	Thumb: () => h
+}), f = n(u.root), p = n(u.thumb);
+function m(e) {
+	return /* @__PURE__ */ i(c.Root, {
+		...e,
+		"data-imf-ui-component": "Switch.Root",
+		className: (n) => f({ className: t(e.className, n) })
+	});
+}
+m.displayName = "Switch.Root";
+function h(e) {
+	return /* @__PURE__ */ i(c.Thumb, {
+		...e,
+		"data-imf-ui-component": "Switch.Thumb",
+		className: (n) => p({ className: t(e.className, n) })
+	});
+}
+h.displayName = "Switch.Thumb";
+var g = {
+	item: "imf-ui-tabs-underline-module-item",
+	rule: "imf-ui-tabs-underline-module-rule"
+}, _ = n(g.rule), v = n(g.item), y = {
+	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",
+	tabUnderline: "imf-ui-tabs-module-tabUnderline"
+}, b = /* @__PURE__ */ e({
+	Indicator: () => N,
+	List: () => j,
+	Panel: () => F,
+	PanelViewport: () => P,
+	Root: () => A,
+	Tab: () => M
+}), x = n(y.list, { variants: {
+	fill: {
+		true: y.listFill,
+		false: null
+	},
+	appearance: {
+		boxed: null,
+		underline: r(y.listUnderline, _())
+	}
+} }), S = n(y.root), C = n(null, { variants: { appearance: {
+	boxed: y.tab,
+	underline: r(y.tabUnderline, v())
+} } }), w = n(null, { variants: { appearance: {
+	boxed: y.indicator,
+	underline: y.indicatorUnderline
+} } }), T = n(y.panelViewport, { variants: { appearance: {
+	boxed: null,
+	underline: y.panelViewportUnderline
+} } }), E = n(y.panel, { variants: { appearance: {
+	boxed: null,
+	underline: y.panelUnderline
+} } }), D = a("boxed");
+function O(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function k(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 A({ appearance: e = "boxed", ...n }) {
+	let r = n.orientation === "vertical" ? "boxed" : e;
+	return /* @__PURE__ */ i(D, {
+		value: r,
+		children: /* @__PURE__ */ i(l.Root, {
+			...n,
+			"data-imf-ui-component": "Tabs.Root",
+			className: (e) => S({ className: t(n.className, e) })
+		})
+	});
+}
+A.displayName = "Tabs.Root";
+function j({ fill: e = !1, ref: n, ...r }) {
+	let a = s(D), c = o((e) => {
+		if (!e) return;
+		O(n, e);
+		let t = k(e);
+		return () => {
+			t(), O(n, null);
+		};
+	}, [n]);
+	return /* @__PURE__ */ i(l.List, {
+		...r,
+		ref: c,
+		"data-imf-ui-component": "Tabs.List",
+		className: (n) => x({
+			fill: e,
+			appearance: a,
+			className: t(r.className, n)
+		})
+	});
+}
+j.displayName = "Tabs.List";
+function M(e) {
+	let n = s(D);
+	return /* @__PURE__ */ i(l.Tab, {
+		...e,
+		"data-imf-ui-component": "Tabs.Tab",
+		className: (r) => C({
+			appearance: n,
+			className: t(e.className, r)
+		})
+	});
+}
+M.displayName = "Tabs.Tab";
+function N(e) {
+	let n = s(D);
+	return /* @__PURE__ */ i(l.Indicator, {
+		...e,
+		"data-imf-ui-component": "Tabs.Indicator",
+		className: (r) => w({
+			appearance: n,
+			className: t(e.className, r)
+		})
+	});
+}
+N.displayName = "Tabs.Indicator";
+function P(e) {
+	let t = s(D);
+	return /* @__PURE__ */ i("div", {
+		...e,
+		"data-imf-ui-component": "Tabs.PanelViewport",
+		className: T({
+			appearance: t,
+			className: e.className
+		})
+	});
+}
+P.displayName = "Tabs.PanelViewport";
+function F(e) {
+	let n = s(D);
+	return /* @__PURE__ */ i(l.Panel, {
+		...e,
+		"data-imf-ui-component": "Tabs.Panel",
+		className: (r) => E({
+			appearance: n,
+			className: t(e.className, r)
+		})
+	});
+}
+F.displayName = "Tabs.Panel";
+//#endregion
+export { A as a, v as c, h as d, d as f, P as i, _ as l, j as n, M as o, F as r, b as s, N as t, m as u };

package/dist/toggle-group-Bhb3qicp.js

@@ -0,0 +1,31 @@
+import { t as e } from "./meta-V_KyLeGn.js";
+import "./toggle-group-eGr6_hgQ.js";
+//#region src/components/toggle/toggle.meta.ts
+var t = {
+	name: "Toggle",
+	category: e.inputs,
+	status: "experimental",
+	description: "Two-state button for a pressed or unpressed option. Compose several in ToggleGroup for a segmented control.",
+	origin: "adapted",
+	internalDependencies: ["Kbd"],
+	upstream: {
+		name: "Base UI",
+		websiteLink: "https://base-ui.com/",
+		docLink: "https://base-ui.com/react/components/toggle",
+		llmDocLink: "https://base-ui.com/react/components/toggle.md"
+	}
+}, n = {
+	name: "ToggleGroup",
+	category: e.inputs,
+	status: "experimental",
+	description: "Group of connected Toggle buttons that share a selection. Also called a segmented control; set `multiple` for more than one active option.",
+	origin: "adapted",
+	upstream: {
+		name: "Base UI",
+		websiteLink: "https://base-ui.com/",
+		docLink: "https://base-ui.com/react/components/toggle-group",
+		llmDocLink: "https://base-ui.com/react/components/toggle-group.md"
+	}
+};
+//#endregion
+export { t as n, n as t };

package/dist/toggle-group-eGr6_hgQ.js

@@ -0,0 +1,125 @@
+import { _M as e, mh as t } from "./icons-vc1WZCxX.js";
+import { t as n } from "./meta-V_KyLeGn.js";
+import { a as r, o as i } from "./utils-J6vbjIt1.js";
+import { cva as a } from "class-variance-authority";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Children as c, createContext as l, useContext as u } from "react";
+import { Toggle as d } from "@base-ui/react/toggle";
+import { ToggleGroup as f } from "@base-ui/react/toggle-group";
+var p = {
+	flat: "imf-ui-kbd-module-flat",
+	icon: "imf-ui-kbd-module-icon",
+	primary: "imf-ui-kbd-module-primary",
+	root: "imf-ui-kbd-module-root"
+}, m = a(p.root, { variants: { variant: {
+	default: null,
+	primary: p.primary,
+	flat: p.flat
+} } });
+function h({ variant: n = "default", icon: r = !1, children: i, ...a }) {
+	return /* @__PURE__ */ s("kbd", {
+		...a,
+		"data-imf-ui-component": "Kbd",
+		className: m({
+			variant: n,
+			className: a.className
+		}),
+		children: [r && /* @__PURE__ */ o(e, {
+			glyph: t,
+			strokeWidth: 2,
+			"aria-hidden": !0,
+			className: p.icon
+		}), i]
+	});
+}
+//#endregion
+//#region src/components/kbd/kbd.meta.ts
+var g = {
+	name: "Kbd",
+	category: n.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"]
+}, _ = {
+	ctrl: "Control",
+	control: "Control",
+	cmd: "Meta",
+	"⌘": "Meta",
+	meta: "Meta",
+	opt: "Alt",
+	option: "Alt",
+	"⌥": "Alt",
+	alt: "Alt",
+	shift: "Shift",
+	"⇧": "Shift",
+	esc: "Escape",
+	escape: "Escape"
+};
+function v(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	if (t.length !== 0) return t.map((e) => _[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
+}
+//#endregion
+//#region src/components/toggle-group/toggle-group-size.ts
+var y = l("md"), b = {
+	root: "imf-ui-toggle-module-root",
+	shortcut: "imf-ui-toggle-module-shortcut",
+	sizeSm: "imf-ui-toggle-module-sizeSm"
+}, x = a(b.root, { variants: { size: {
+	sm: b.sizeSm,
+	md: null
+} } }), S = 2;
+function C(e) {
+	let t = 0;
+	return c.forEach(e, (e) => {
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += S);
+	}), t;
+}
+function w({ style: e, shortcut: t, size: n, children: a, ...c }) {
+	let l = u(y), f = {
+		"--glyph-count": C(a),
+		"--max-glyphs": S
+	};
+	return /* @__PURE__ */ s(d, {
+		"aria-keyshortcuts": t ? v(t) : void 0,
+		...c,
+		"data-imf-ui-component": "Toggle",
+		style: (t) => ({
+			...f,
+			...i(e, t)
+		}),
+		className: (e) => x({
+			size: n ?? l,
+			className: r(c.className, e)
+		}),
+		children: [a, t && /* @__PURE__ */ o(h, {
+			variant: "flat",
+			className: b.shortcut,
+			"aria-hidden": !0,
+			children: t
+		})]
+	});
+}
+var T = {
+	root: "imf-ui-toggle-group-module-root",
+	sizeSm: "imf-ui-toggle-group-module-sizeSm"
+}, E = a(T.root, { variants: { size: {
+	sm: T.sizeSm,
+	md: null
+} } });
+function D({ size: e = "md", ...t }) {
+	return /* @__PURE__ */ o(y.Provider, {
+		value: e ?? "md",
+		children: /* @__PURE__ */ o(f, {
+			...t,
+			"data-imf-ui-component": "ToggleGroup",
+			className: (n) => E({
+				size: e,
+				className: r(t.className, n)
+			})
+		})
+	});
+}
+//#endregion
+export { h as a, g as i, w as n, v as r, D as t };

package/dist/utils/email.d.ts

@@ -3,5 +3,8 @@ export declare function splitEmail(email: string): {
     local: string;
     domain?: string;
 };
-/** Up to two initials from the email's local part, split at dots, dashes, and underscores: `m.rossi@…` gives `MR`. */
+/**
+ * One or two initials from the email's local part, split at dots, dashes, and underscores: `m.rossi@…` gives `MR`,
+ * `jkeller@…` gives `JK`.
+ */
 export declare function initialsFromEmail(email: string): string;

package/dist/utils/index.d.ts

@@ -1 +1,3 @@
 export { resolveClassName, resolveStyle } from './resolve-state-props';
+export { ItemPartsContext, useItemParts, useItemPartId } from './item-parts';
+export { useStablePopupHeight } from './stable-popup-height';

package/dist/utils/initials.d.ts

@@ -0,0 +1,4 @@
+/** One or two letters from words: the first letter of the first two, or the first two letters of a single word. */
+export declare function initialsFromWords(words: string[]): string;
+/** One or two initials from a display name, split at whitespace: `Mona Keller` gives `MK`, `Bob` gives `BO`. */
+export declare function initialsFromName(name: string): string;

package/dist/utils/item-parts.d.ts

@@ -0,0 +1,23 @@
+interface ItemParts {
+    labelId: string;
+    descriptionId: string;
+    setHasLabel: (has: boolean) => void;
+    setHasDescription: (has: boolean) => void;
+}
+export declare const ItemPartsContext: import('react').Context<ItemParts | null>;
+/** Creates the ids for one item. Spread `ariaProps` on the item and wrap its tree in `ItemPartsContext`. */
+export declare function useItemParts(): {
+    context: {
+        labelId: string;
+        descriptionId: string;
+        setHasLabel: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+        setHasDescription: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    };
+    ariaProps: {
+        "aria-labelledby": string | undefined;
+        "aria-describedby": string | undefined;
+    };
+};
+/** Returns the id an item's text or description part must render, or undefined outside an item. */
+export declare function useItemPartId(part: "label" | "description"): string | undefined;
+export {};

package/dist/utils/stable-popup-height.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Keeps a popup or inline list at the height it had when it mounted, so filtering does not shrink it under the pointer.
+ * Unmounting resets the height. Spread `style` before the consumer's style so theirs wins.
+ */
+export declare function useStablePopupHeight({ ref: forwardedRef }: {
+    ref?: React.Ref<HTMLDivElement>;
+}): {
+    ref: (node: HTMLDivElement | null) => void;
+    style: import('react').CSSProperties | undefined;
+};

package/dist/utils-J6vbjIt1.js

@@ -0,0 +1,46 @@
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useId as i, useMemo as a, useState as o } from "react";
+//#region src/utils/resolve-state-props.ts
+function s(e, t) {
+	return e instanceof Function ? e(t) : e;
+}
+function c(e, t) {
+	return s(e, t);
+}
+function l(e, t) {
+	return s(e, t);
+}
+//#endregion
+//#region src/utils/item-parts.tsx
+var u = e(null);
+function d() {
+	let e = i(), t = i(), [n, r] = o(!1), [s, c] = o(!1);
+	return {
+		context: a(() => ({
+			labelId: e,
+			descriptionId: t,
+			setHasLabel: r,
+			setHasDescription: c
+		}), [e, t]),
+		ariaProps: {
+			"aria-labelledby": n ? e : void 0,
+			"aria-describedby": s ? t : void 0
+		}
+	};
+}
+function f(e) {
+	let t = n(u), i = e === "label" ? t?.setHasLabel : t?.setHasDescription;
+	return r(() => (i?.(!0), () => i?.(!1)), [i]), e === "label" ? t?.labelId : t?.descriptionId;
+}
+//#endregion
+//#region src/utils/stable-popup-height.ts
+function p({ ref: e }) {
+	let [n, r] = o();
+	return {
+		ref: t((t) => {
+			typeof e == "function" ? e(t) : e && (e.current = t), t && r((e) => e ?? t.offsetHeight);
+		}, [e]),
+		style: n === void 0 ? void 0 : { minBlockSize: `min(${String(n)}px, var(--available-height, ${String(n)}px))` }
+	};
+}
+//#endregion
+export { c as a, d as i, u as n, l as o, f as r, p as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.6.gf4b6c627",
+  "version": "0.11.1-dev.62.gfcd31b6e",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -11,7 +11,7 @@
   },
   "type": "module",
   "engines": {
-    "node": "^22.22.1 || ^24.11 || >=26"
+    "node": "^24.14 || >=26"
   },
   "imports": {
     "#/*": "./src/*",
@@ -122,8 +122,8 @@
     "commander": "15.0.0"
   },
   "devDependencies": {
-    "@imfusion/sdk": "1.0.0",
-    "@imfusion/sdk-react": "1.0.0",
+    "@imfusion/sdk": "1.3.0",
+    "@imfusion/sdk-react": "1.3.0",
     "@storybook/addon-a11y": "10.6.2",
     "@storybook/addon-docs": "10.6.2",
     "@storybook/addon-mcp": "10.6.2",