@imfusion/web-ui 0.6.4-dev.30.g1907865c → 0.6.4-dev.36.ga02df89a

package/dist/{tabs-DIe1Utiy.js → tabs-By5ir2pt.js}

@@ -7,7 +7,17 @@ import { Switch as a } from "@base-ui/react/switch";
 import { Toggle as o } from "@base-ui/react/toggle";
 import { ToggleGroup as s } from "@base-ui/react/toggle-group";
 import { Tabs as c } from "@base-ui/react/tabs";
-var l = {
+//#region src/utils/resolve-state-props.ts
+function l(e, t) {
+	return e instanceof Function ? e(t) : e;
+}
+function u(e, t) {
+	return l(e, t);
+}
+function d(e, t) {
+	return l(e, t);
+}
+var f = {
 	control: "imf-ui-slider-module-control",
 	indicator: "imf-ui-slider-module-indicator",
 	label: "imf-ui-slider-module-label",
@@ -15,21 +25,21 @@ var l = {
 	thumb: "imf-ui-slider-module-thumb",
 	track: "imf-ui-slider-module-track",
 	value: "imf-ui-slider-module-value"
-}, u = /* @__PURE__ */ e({
-	Control: () => x,
-	Indicator: () => C,
-	Label: () => y,
-	Root: () => v,
-	Thumb: () => w,
-	Track: () => S,
-	Value: () => b
-}), d = t(l.root), f = t(l.label), p = t(l.value), m = t(l.control), h = t(l.track), g = t(l.indicator), _ = t(l.thumb);
-function v({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, min: o = 0, max: s = 100, step: c = 1, largeStep: l = 10, minStepsBetweenValues: u = 0, disabled: f = !1, orientation: p = "horizontal", name: m, form: h, locale: g, thumbAlignment: _ = "edge", thumbCollisionBehavior: v = "push", format: y, className: b, ...x }) {
+}, p = /* @__PURE__ */ e({
+	Control: () => C,
+	Indicator: () => T,
+	Label: () => x,
+	Root: () => b,
+	Thumb: () => E,
+	Track: () => w,
+	Value: () => S
+}), ee = t(f.root), m = t(f.label), h = t(f.value), g = t(f.control), _ = t(f.track), v = t(f.indicator), y = t(f.thumb);
+function b({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, min: o = 0, max: s = 100, step: c = 1, largeStep: l = 10, minStepsBetweenValues: d = 0, disabled: f = !1, orientation: p = "horizontal", name: m, form: h, locale: g, thumbAlignment: _ = "edge", thumbCollisionBehavior: v = "push", format: y, ...b }) {
 	return /* @__PURE__ */ n(i.Root, {
-		...x,
+		...b,
 		"data-imf-ui-component": "Slider.Root",
 		"data-orientation": p,
-		className: (e) => d({ className: typeof b == "function" ? b(e) : b }),
+		className: (e) => ee({ className: u(b.className, e) }),
 		value: e,
 		defaultValue: t,
 		onValueChange: r,
@@ -38,7 +48,7 @@ function v({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, m
 		max: s,
 		step: c,
 		largeStep: l,
-		minStepsBetweenValues: u,
+		minStepsBetweenValues: d,
 		disabled: f,
 		orientation: p,
 		name: m,
@@ -46,124 +56,119 @@ function v({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, m
 		locale: g,
 		thumbAlignment: _,
 		thumbCollisionBehavior: v,
-		format: y,
-		children: x.children
+		format: y
 	});
 }
-v.displayName = "Slider.Root";
-function y({ className: e, ...t }) {
+b.displayName = "Slider.Root";
+function x(e) {
 	return /* @__PURE__ */ n(i.Label, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Label",
-		className: (t) => f({ className: typeof e == "function" ? e(t) : e }),
-		children: t.children
+		className: (t) => m({ className: u(e.className, t) })
 	});
 }
-y.displayName = "Slider.Label";
-function b({ className: e, children: t, ...r }) {
+x.displayName = "Slider.Label";
+function S({ children: e, ...t }) {
 	return /* @__PURE__ */ n(i.Value, {
-		...r,
+		...t,
 		"data-imf-ui-component": "Slider.Value",
-		className: (t) => p({ className: typeof e == "function" ? e(t) : e }),
-		children: t
+		className: (e) => h({ className: u(t.className, e) }),
+		children: e
 	});
 }
-b.displayName = "Slider.Value";
-function x({ className: e, ...t }) {
+S.displayName = "Slider.Value";
+function C(e) {
 	return /* @__PURE__ */ n(i.Control, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Control",
-		className: (t) => m({ className: typeof e == "function" ? e(t) : e }),
-		children: t.children
+		className: (t) => g({ className: u(e.className, t) })
 	});
 }
-x.displayName = "Slider.Control";
-function S({ className: e, ...t }) {
+C.displayName = "Slider.Control";
+function w(e) {
 	return /* @__PURE__ */ n(i.Track, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Track",
-		className: (t) => h({ className: typeof e == "function" ? e(t) : e }),
-		children: t.children
+		className: (t) => _({ className: u(e.className, t) })
 	});
 }
-S.displayName = "Slider.Track";
-function C({ className: e, ...t }) {
+w.displayName = "Slider.Track";
+function T(e) {
 	return /* @__PURE__ */ n(i.Indicator, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Indicator",
-		className: (t) => g({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => v({ className: u(e.className, t) })
 	});
 }
-C.displayName = "Slider.Indicator";
-function w({ index: e, className: t, ...r }) {
+T.displayName = "Slider.Indicator";
+function E({ index: e, ...t }) {
 	return /* @__PURE__ */ n(i.Thumb, {
-		...r,
+		...t,
 		"data-imf-ui-component": "Slider.Thumb",
-		className: (e) => _({ className: typeof t == "function" ? t(e) : t }),
+		className: (e) => y({ className: u(t.className, e) }),
 		index: e
 	});
 }
-w.displayName = "Slider.Thumb";
-var T = {
+E.displayName = "Slider.Thumb";
+var D = {
 	root: "imf-ui-switch-module-root",
 	thumb: "imf-ui-switch-module-thumb"
-}, E = /* @__PURE__ */ e({
-	Root: () => O,
-	Thumb: () => k
-}), D = t(T.root), ee = t(T.thumb);
-function O({ className: e, ...t }) {
+}, te = /* @__PURE__ */ e({
+	Root: () => A,
+	Thumb: () => j
+}), O = t(D.root), k = t(D.thumb);
+function A(e) {
 	return /* @__PURE__ */ n(a.Root, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Switch.Root",
-		className: (t) => D({ className: typeof e == "function" ? e(t) : e }),
-		children: t.children
+		className: (t) => O({ className: u(e.className, t) })
 	});
 }
-O.displayName = "Switch.Root";
-function k({ className: e, ...t }) {
+A.displayName = "Switch.Root";
+function j(e) {
 	return /* @__PURE__ */ n(a.Thumb, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Switch.Thumb",
-		className: (t) => ee({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => k({ className: u(e.className, t) })
 	});
 }
-k.displayName = "Switch.Thumb";
+j.displayName = "Switch.Thumb";
 //#endregion
 //#region src/components/toggle/toggle.tsx
-var A = t({ root: "imf-ui-toggle-module-root" }.root), j = 2;
-function M(e) {
+var M = t({ root: "imf-ui-toggle-module-root" }.root), N = 2;
+function P(e) {
 	let t = 0;
 	return r.forEach(e, (e) => {
-		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += j);
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += N);
 	}), t;
 }
-function N({ className: e, style: t, children: r, ...i }) {
-	let a = {
-		"--glyph-count": M(r),
-		"--max-glyphs": j
+function F({ style: e, children: t, ...r }) {
+	let i = {
+		"--glyph-count": P(t),
+		"--max-glyphs": N
 	};
 	return /* @__PURE__ */ n(o, {
-		...i,
+		...r,
 		"data-imf-ui-component": "Toggle",
-		style: (e) => ({
-			...a,
-			...typeof t == "function" ? t(e) : t
+		style: (t) => ({
+			...i,
+			...d(e, t)
 		}),
-		className: (t) => A({ className: typeof e == "function" ? e(t) : e }),
-		children: r
+		className: (e) => M({ className: u(r.className, e) }),
+		children: t
 	});
 }
 //#endregion
 //#region src/components/toggle-group/toggle-group.tsx
-var te = t({ root: "imf-ui-toggle-group-module-root" }.root);
-function ne({ className: e, ...t }) {
+var I = t({ root: "imf-ui-toggle-group-module-root" }.root);
+function L(e) {
 	return /* @__PURE__ */ n(s, {
-		...t,
+		...e,
 		"data-imf-ui-component": "ToggleGroup",
-		className: (t) => te({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => I({ className: u(e.className, t) })
 	});
 }
-var P = {
+var R = {
 	alignCenter: "imf-ui-row-module-alignCenter",
 	alignEnd: "imf-ui-row-module-alignEnd",
 	alignStart: "imf-ui-row-module-alignStart",
@@ -186,53 +191,52 @@ var P = {
 	justifyStart: "imf-ui-row-module-justifyStart",
 	root: "imf-ui-row-module-root",
 	wrap: "imf-ui-row-module-wrap"
-}, F = t(P.root, { variants: {
+}, z = t(R.root, { variants: {
 	gap: {
-		1: P.gap1,
-		2: P.gap2,
-		3: P.gap3,
-		4: P.gap4,
-		5: P.gap5,
-		6: P.gap6,
-		7: P.gap7,
-		8: P.gap8,
-		9: P.gap9,
-		10: P.gap10
+		1: R.gap1,
+		2: R.gap2,
+		3: R.gap3,
+		4: R.gap4,
+		5: R.gap5,
+		6: R.gap6,
+		7: R.gap7,
+		8: R.gap8,
+		9: R.gap9,
+		10: R.gap10
 	},
 	align: {
-		start: P.alignStart,
-		center: P.alignCenter,
-		end: P.alignEnd,
-		stretch: P.alignStretch
+		start: R.alignStart,
+		center: R.alignCenter,
+		end: R.alignEnd,
+		stretch: R.alignStretch
 	},
 	justify: {
-		start: P.justifyStart,
-		center: P.justifyCenter,
-		end: P.justifyEnd,
-		between: P.justifyBetween,
-		around: P.justifyAround,
-		evenly: P.justifyEvenly
+		start: R.justifyStart,
+		center: R.justifyCenter,
+		end: R.justifyEnd,
+		between: R.justifyBetween,
+		around: R.justifyAround,
+		evenly: R.justifyEvenly
 	},
 	wrap: {
-		true: P.wrap,
+		true: R.wrap,
 		false: null
 	}
 } });
-function I({ gap: e = "2", align: t = "stretch", justify: r = "start", wrap: i = !1, className: a, ...o }) {
+function B({ gap: e = "2", align: t = "stretch", justify: r = "start", wrap: i = !1, ...a }) {
 	return /* @__PURE__ */ n("div", {
-		...o,
+		...a,
 		"data-imf-ui-component": "Row",
-		className: F({
+		className: z({
 			gap: e,
 			align: t,
 			justify: r,
 			wrap: i,
-			className: a
-		}),
-		children: o.children
+			className: a.className
+		})
 	});
 }
-var L = {
+var V = {
 	alignCenter: "imf-ui-stack-module-alignCenter",
 	alignEnd: "imf-ui-stack-module-alignEnd",
 	alignStart: "imf-ui-stack-module-alignStart",
@@ -255,49 +259,48 @@ var L = {
 	justifyEvenly: "imf-ui-stack-module-justifyEvenly",
 	justifyStart: "imf-ui-stack-module-justifyStart",
 	root: "imf-ui-stack-module-root"
-}, R = t(L.root, { variants: {
+}, H = t(V.root, { variants: {
 	gap: {
-		0: L.gap0,
-		1: L.gap1,
-		2: L.gap2,
-		3: L.gap3,
-		4: L.gap4,
-		5: L.gap5,
-		6: L.gap6,
-		7: L.gap7,
-		8: L.gap8,
-		9: L.gap9,
-		10: L.gap10
+		0: V.gap0,
+		1: V.gap1,
+		2: V.gap2,
+		3: V.gap3,
+		4: V.gap4,
+		5: V.gap5,
+		6: V.gap6,
+		7: V.gap7,
+		8: V.gap8,
+		9: V.gap9,
+		10: V.gap10
 	},
 	align: {
-		start: L.alignStart,
-		center: L.alignCenter,
-		end: L.alignEnd,
-		stretch: L.alignStretch
+		start: V.alignStart,
+		center: V.alignCenter,
+		end: V.alignEnd,
+		stretch: V.alignStretch
 	},
 	justify: {
-		start: L.justifyStart,
-		center: L.justifyCenter,
-		end: L.justifyEnd,
-		between: L.justifyBetween,
-		around: L.justifyAround,
-		evenly: L.justifyEvenly
+		start: V.justifyStart,
+		center: V.justifyCenter,
+		end: V.justifyEnd,
+		between: V.justifyBetween,
+		around: V.justifyAround,
+		evenly: V.justifyEvenly
 	}
 } });
-function z({ gap: e = "4", align: t = "stretch", justify: r = "start", className: i, ...a }) {
+function U({ gap: e = "4", align: t = "stretch", justify: r = "start", ...i }) {
 	return /* @__PURE__ */ n("div", {
-		...a,
+		...i,
 		"data-imf-ui-component": "Stack",
-		className: R({
+		className: H({
 			gap: e,
 			align: t,
 			justify: r,
-			className: i
-		}),
-		children: a.children
+			className: i.className
+		})
 	});
 }
-var B = {
+var W = {
 	indicator: "imf-ui-tabs-module-indicator",
 	list: "imf-ui-tabs-module-list",
 	listFill: "imf-ui-tabs-module-listFill",
@@ -305,67 +308,67 @@ var B = {
 	panelViewport: "imf-ui-tabs-module-panelViewport",
 	root: "imf-ui-tabs-module-root",
 	tab: "imf-ui-tabs-module-tab"
-}, V = /* @__PURE__ */ e({
+}, G = /* @__PURE__ */ e({
 	Indicator: () => Z,
 	List: () => Y,
 	Panel: () => $,
 	PanelViewport: () => Q,
 	Root: () => J,
 	Tab: () => X
-}), H = t(B.list, { variants: { fill: {
-	true: B.listFill,
+}), K = t(W.list, { variants: { fill: {
+	true: W.listFill,
 	false: null
-} } }), U = t(B.root), W = t(B.tab), G = t(B.indicator), K = t(B.panelViewport), q = t(B.panel);
-function J({ className: e, ...t }) {
+} } }), q = t(W.root), ne = t(W.tab), re = t(W.indicator), ie = t(W.panelViewport), ae = t(W.panel);
+function J(e) {
 	return /* @__PURE__ */ n(c.Root, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.Root",
-		className: (t) => U({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => q({ className: u(e.className, t) })
 	});
 }
 J.displayName = "Tabs.Root";
-function Y({ fill: e = !1, className: t, ...r }) {
+function Y({ fill: e = !1, ...t }) {
 	return /* @__PURE__ */ n(c.List, {
-		...r,
+		...t,
 		"data-imf-ui-component": "Tabs.List",
-		className: (n) => H({
+		className: (n) => K({
 			fill: e,
-			className: typeof t == "function" ? t(n) : t
+			className: u(t.className, n)
 		})
 	});
 }
 Y.displayName = "Tabs.List";
-function X({ className: e, ...t }) {
+function X(e) {
 	return /* @__PURE__ */ n(c.Tab, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.Tab",
-		className: (t) => W({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => ne({ className: u(e.className, t) })
 	});
 }
 X.displayName = "Tabs.Tab";
-function Z({ className: e, ...t }) {
+function Z(e) {
 	return /* @__PURE__ */ n(c.Indicator, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.Indicator",
-		className: (t) => G({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => re({ className: u(e.className, t) })
 	});
 }
 Z.displayName = "Tabs.Indicator";
-function Q({ className: e, ...t }) {
+function Q(e) {
 	return /* @__PURE__ */ n("div", {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.PanelViewport",
-		className: K({ className: e })
+		className: ie({ className: e.className })
 	});
 }
 Q.displayName = "Tabs.PanelViewport";
-function $({ className: e, ...t }) {
+function $(e) {
 	return /* @__PURE__ */ n(c.Panel, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.Panel",
-		className: (t) => q({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => ae({ className: u(e.className, t) })
 	});
 }
 $.displayName = "Tabs.Panel";
 //#endregion
-export { u as S, y as _, J as a, S as b, z as c, N as d, O as f, C as g, x as h, Q as i, I as l, E as m, Y as n, X as o, k as p, $ as r, V as s, Z as t, ne as u, v, b as x, w as y };
+export { u as C, p as S, x as _, J as a, w as b, U as c, F as d, A as f, T as g, C as h, Q as i, B as l, te as m, Y as n, X as o, j as p, $ as r, G as s, Z as t, L as u, b as v, S as x, E as y };

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { resolveClassName, resolveStyle } from './resolve-state-props';

package/dist/utils/resolve-state-props.d.ts

@@ -0,0 +1,4 @@
+/** Resolves a Base UI `className` against the part's state. */
+export declare function resolveClassName<State>(className: string | ((state: State) => string | undefined) | undefined, state: State): string | undefined;
+/** Resolves a Base UI `style` against the part's state. */
+export declare function resolveStyle<State>(style: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined, state: State): React.CSSProperties | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.6.4-dev.30.g1907865c",
+  "version": "0.6.4-dev.36.ga02df89a",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -63,7 +63,7 @@
     "build": "npm run codegen && rm -rf dist && vite build && npm run codegen:docgen && npm run codegen:llms && npm run codegen:tokens",
     "build:storybook": "npm run codegen:storybook && storybook build",
     "ci:status": "teamcity run list --job WebSDK_WebUI_BuildTest --limit 3 --json=id,number,status,state,branchName,buildType.name,triggered.type,triggered.user.name,startDate,finishDate,webUrl | tsx scripts/ci-status.ts",
-    "storybook": "npm run codegen:storybook && storybook dev -p 6006 --no-open",
+    "storybook": "npm run codegen:storybook && storybook dev -p 6006 --no-open --ci",
     "storybook:free-ports": "tsx scripts/free-storybook-ports.ts",
     "codegen": "tsx src/codegen/run.ts",
     "codegen:watch": "tsx watch src/codegen/run.ts",