@imfusion/web-ui 0.10.1-dev.3.gc9ea991e → 0.10.1-dev.34.gb01a818e

package/dist/{tabs-DRyqtS04.js → tabs-CU46aGud.js}

@@ -1,50 +1,49 @@
-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 { n as e, r as t, t as n } from "./resolve-state-props-DQf9WiGv.js";
+import { mh as r, pM as i } from "./icons-BsK_o-Cb.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, 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 = {
+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 { Switch as m } from "@base-ui/react/switch";
+import { Tabs as h } from "@base-ui/react/tabs";
+var g = {
 	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: {
+}, _ = o(g.root, { variants: { variant: {
 	default: null,
-	primary: h.primary,
-	flat: h.flat
+	primary: g.primary,
+	flat: g.flat
 } } });
-function _({ variant: e = "default", icon: r = !1, children: i, ...a }) {
+function v({ variant: e = "default", icon: t = !1, children: n, ...a }) {
 	return /* @__PURE__ */ c("kbd", {
 		...a,
 		"data-imf-ui-component": "Kbd",
-		className: g({
+		className: _({
 			variant: e,
 			className: a.className
 		}),
-		children: [r && /* @__PURE__ */ s(n, {
-			glyph: t,
+		children: [t && /* @__PURE__ */ s(i, {
+			glyph: r,
 			strokeWidth: 2,
 			"aria-hidden": !0,
-			className: h.icon
-		}), i]
+			className: g.icon
+		}), n]
 	});
 }
 //#endregion
 //#region src/components/kbd/kbd.meta.ts
-var ee = {
+var te = {
 	name: "Kbd",
-	category: r.display,
+	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"]
-}, v = {
+}, y = {
 	ctrl: "Control",
 	control: "Control",
 	cmd: "Meta",
@@ -59,75 +58,94 @@ var ee = {
 	esc: "Escape",
 	escape: "Escape"
 };
-function y(e) {
+function b(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("+");
+	if (t.length !== 0) return t.map((e) => y[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 = {
+//#endregion
+//#region src/components/toggle-group/toggle-group-size.ts
+var x = u("md"), S = {
 	root: "imf-ui-toggle-module-root",
-	shortcut: "imf-ui-toggle-module-shortcut"
-}, te = o(E.root), D = 2;
-function O(e) {
+	shortcut: "imf-ui-toggle-module-shortcut",
+	sizeSm: "imf-ui-toggle-module-sizeSm"
+}, C = o(S.root, { variants: { size: {
+	sm: S.sizeSm,
+	md: null
+} } }), w = 2;
+function T(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);
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += w);
 	}), t;
 }
-function k({ style: e, shortcut: t, children: n, ...r }) {
-	let o = {
-		"--glyph-count": O(n),
-		"--max-glyphs": D
+function ne({ style: t, shortcut: r, size: i, children: a, ...o }) {
+	let l = f(x), u = {
+		"--glyph-count": T(a),
+		"--max-glyphs": w
 	};
-	return /* @__PURE__ */ c(f, {
-		"aria-keyshortcuts": t ? y(t) : void 0,
-		...r,
+	return /* @__PURE__ */ c(p, {
+		"aria-keyshortcuts": r ? b(r) : void 0,
+		...o,
 		"data-imf-ui-component": "Toggle",
-		style: (t) => ({
-			...o,
-			...a(e, t)
+		style: (n) => ({
+			...u,
+			...e(t, n)
+		}),
+		className: (e) => C({
+			size: i ?? l,
+			className: n(o.className, e)
 		}),
-		className: (e) => te({ className: i(r.className, e) }),
-		children: [n, t && /* @__PURE__ */ s(_, {
+		children: [a, r && /* @__PURE__ */ s(v, {
 			variant: "flat",
-			className: E.shortcut,
+			className: S.shortcut,
 			"aria-hidden": !0,
-			children: t
+			children: r
 		})]
 	});
 }
-//#endregion
-//#region src/components/toggle-group/toggle-group.tsx
-var A = o({ root: "imf-ui-toggle-group-module-root" }.root);
+var E = {
+	root: "imf-ui-toggle-group-module-root",
+	sizeSm: "imf-ui-toggle-group-module-sizeSm"
+}, re = o(E.root, { variants: { size: {
+	sm: E.sizeSm,
+	md: null
+} } });
+function ie({ size: e = "md", ...t }) {
+	return /* @__PURE__ */ s(x.Provider, {
+		value: e ?? "md",
+		children: /* @__PURE__ */ s(ee, {
+			...t,
+			"data-imf-ui-component": "ToggleGroup",
+			className: (r) => re({
+				size: e,
+				className: n(t.className, r)
+			})
+		})
+	});
+}
+var D = {
+	root: "imf-ui-switch-module-root",
+	thumb: "imf-ui-switch-module-thumb"
+}, ae = /* @__PURE__ */ t({
+	Root: () => A,
+	Thumb: () => j
+}), O = o(D.root), k = o(D.thumb);
+function A(e) {
+	return /* @__PURE__ */ s(m.Root, {
+		...e,
+		"data-imf-ui-component": "Switch.Root",
+		className: (t) => O({ className: n(e.className, t) })
+	});
+}
+A.displayName = "Switch.Root";
 function j(e) {
-	return /* @__PURE__ */ s(p, {
+	return /* @__PURE__ */ s(m.Thumb, {
 		...e,
-		"data-imf-ui-component": "ToggleGroup",
-		className: (t) => A({ className: i(e.className, t) })
+		"data-imf-ui-component": "Switch.Thumb",
+		className: (t) => k({ className: n(e.className, t) })
 	});
 }
+j.displayName = "Switch.Thumb";
 var M = {
 	alignCenter: "imf-ui-row-module-alignCenter",
 	alignEnd: "imf-ui-row-module-alignEnd",
@@ -268,7 +286,7 @@ var R = {
 	panelViewport: "imf-ui-tabs-module-panelViewport",
 	root: "imf-ui-tabs-module-root",
 	tab: "imf-ui-tabs-module-tab"
-}, z = /* @__PURE__ */ e({
+}, z = /* @__PURE__ */ t({
 	Indicator: () => Z,
 	List: () => Y,
 	Panel: () => $,
@@ -295,15 +313,15 @@ function q(e) {
 	};
 }
 function J(e) {
-	return /* @__PURE__ */ s(m.Root, {
+	return /* @__PURE__ */ s(h.Root, {
 		...e,
 		"data-imf-ui-component": "Tabs.Root",
-		className: (t) => V({ className: i(e.className, t) })
+		className: (t) => V({ className: n(e.className, t) })
 	});
 }
 J.displayName = "Tabs.Root";
-function Y({ fill: e = !1, ref: t, ...n }) {
-	let r = u((e) => {
+function Y({ fill: e = !1, ref: t, ...r }) {
+	let i = d((e) => {
 		if (!e) return;
 		K(t, e);
 		let n = q(e);
@@ -311,30 +329,30 @@ function Y({ fill: e = !1, ref: t, ...n }) {
 			n(), K(t, null);
 		};
 	}, [t]);
-	return /* @__PURE__ */ s(m.List, {
-		...n,
-		ref: r,
+	return /* @__PURE__ */ s(h.List, {
+		...r,
+		ref: i,
 		"data-imf-ui-component": "Tabs.List",
 		className: (t) => B({
 			fill: e,
-			className: i(n.className, t)
+			className: n(r.className, t)
 		})
 	});
 }
 Y.displayName = "Tabs.List";
 function X(e) {
-	return /* @__PURE__ */ s(m.Tab, {
+	return /* @__PURE__ */ s(h.Tab, {
 		...e,
 		"data-imf-ui-component": "Tabs.Tab",
-		className: (t) => H({ className: i(e.className, t) })
+		className: (t) => H({ className: n(e.className, t) })
 	});
 }
 X.displayName = "Tabs.Tab";
 function Z(e) {
-	return /* @__PURE__ */ s(m.Indicator, {
+	return /* @__PURE__ */ s(h.Indicator, {
 		...e,
 		"data-imf-ui-component": "Tabs.Indicator",
-		className: (t) => U({ className: i(e.className, t) })
+		className: (t) => U({ className: n(e.className, t) })
 	});
 }
 Z.displayName = "Tabs.Indicator";
@@ -347,12 +365,12 @@ function Q(e) {
 }
 Q.displayName = "Tabs.PanelViewport";
 function $(e) {
-	return /* @__PURE__ */ s(m.Panel, {
+	return /* @__PURE__ */ s(h.Panel, {
 		...e,
 		"data-imf-ui-component": "Tabs.Panel",
-		className: (t) => G({ className: i(e.className, t) })
+		className: (t) => G({ className: n(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 };
+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 };

package/docs/user-guide/UsagePatterns.mdx

@@ -120,4 +120,8 @@ component colors cannot disagree with them:
 <WebUIProvider colorScheme="dark">{children}</WebUIProvider>
 ```
 
+To let the user pick Light, System, or Dark, place a
+[`ColorSchemeToggle`](?path=/docs/primitives-inputs-colorschemetoggle--docs). It stores the choice and works only while
+the provider's `colorScheme` is unset.
+
 <PageNav />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.10.1-dev.3.gc9ea991e",
+  "version": "0.10.1-dev.34.gb01a818e",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -95,7 +95,7 @@
     "skills:eval:compare": "tsx src/llms/evals/runner/compare.ts",
     "skills:eval:affected": "tsx src/llms/evals/runner/affected.ts",
     "skills:eval:report": "tsx src/llms/evals/runner/report.ts",
-    "git:config": "git config core.hooksPath .githooks && git config pull.rebase true && git config merge.ff only"
+    "git:config": "git config core.hooksPath .vite-hooks/_ && vp config --no-agent && git config pull.rebase true && git config merge.ff only"
   },
   "peerDependencies": {
     "@imfusion/sdk": "*",