themelia-ui 3.0.0 → 3.2.0

package/dist/{ui-provider-Cmoq6i_D.js → ui-provider-DpzLUD12.js}

@@ -36,7 +36,6 @@ function _(e, t = {}) {
 			...e.theme,
 			...t.theme,
 			colors: v(e.theme?.colors, t.theme?.colors),
-			palette: v(e.theme?.palette, t.theme?.palette),
 			vars: v(e.theme?.vars, t.theme?.vars)
 		},
 		typography: {
@@ -91,85 +90,127 @@ function y(e, t) {
 }
 //#endregion
 //#region src/lib/ui-provider/tokens.ts
-function b(e) {
-	let t = {}, n = (e, n) => {
-		n !== void 0 && (t[`--${e}`] = n);
-	}, { theme: r, typography: i, motion: a, overlay: o, scale: s } = e;
-	if (s !== void 0 && n("scale", String(s)), r) {
-		n("radius", r.radius), n("radius-sm", r.radiusSm);
-		for (let [e, t] of Object.entries(r.colors ?? {})) n(e, t);
-		for (let [e, t] of Object.entries(r.palette ?? {})) n(e, t);
-		for (let [e, t] of Object.entries(r.vars ?? {})) n(e, t);
+var b = {
+	compact: {
+		padding: .75,
+		"padding-sm": .375,
+		gap: .75,
+		"gap-sm": .375,
+		"control-height": 2,
+		"control-height-sm": 1.75
+	},
+	default: {
+		padding: 1,
+		"padding-sm": .5,
+		gap: 1,
+		"gap-sm": .5,
+		"control-height": 2.125,
+		"control-height-sm": 1.875
+	},
+	comfortable: {
+		padding: 1.25,
+		"padding-sm": .625,
+		gap: 1.25,
+		"gap-sm": .625,
+		"control-height": 2.25,
+		"control-height-sm": 2
+	}
+}, x = {
+	"icon-size": 1,
+	"icon-size-sm": .75
+}, S = {
+	xs: "calc(1 / 0.75)",
+	pxs: "calc(1.125 / 0.8125)",
+	sm: "calc(1.25 / 0.875)",
+	base: "1.5",
+	lg: "calc(1.75 / 1.125)",
+	xl: "calc(1.75 / 1.25)"
+};
+function C(e, t) {
+	let n = {}, r = (e, t) => {
+		t !== void 0 && (n[`--${e}`] = t);
+	}, { theme: i, typography: a, motion: o, overlay: s } = e, c = e.density !== void 0 && t && t.scale !== 1 ? t.scale : void 0, l = e.scale ?? c;
+	if (l !== void 0) {
+		let n = t?.density ?? e.density ?? "default";
+		for (let [e, t] of Object.entries({
+			...b[n],
+			...x
+		})) r(e, `round(${Number((t * l).toFixed(4))}rem, 1px)`);
+	}
+	let u = a?.scale ?? (l === void 0 ? void 0 : t?.typography.scale ?? l);
+	if (u !== void 0 && r("text-scale", String(u)), i) {
+		r("radius", i.radius), r("radius-sm", i.radiusSm);
+		for (let [e, t] of Object.entries(i.colors ?? {})) r(e, t);
+		for (let [e, t] of Object.entries(i.vars ?? {})) r(e, t);
 	}
-	let c = o?.backdropBlur;
-	if (c !== void 0 && c !== 0 && c !== "0" && c !== "" && n("overlay-backdrop-filter", `blur(${typeof c == "number" ? `${c}px` : c})`), i) {
-		i.scale !== void 0 && n("text-scale", String(i.scale));
-		for (let [e, t] of Object.entries(i.fonts ?? {})) n(`font-${e}`, t);
-		for (let [e, t] of Object.entries(i.sizes ?? {})) n(`text-${e}`, t);
-		if (i.defaultTextSize !== void 0 && i.defaultTextSize !== "inherit") {
-			let e = i.defaultTextSize === "xxs" ? "xs" : i.defaultTextSize;
-			n("text-default", `var(--text-${e})`), n("text-default--line-height", `var(--text-${e}--line-height)`);
+	let d = s?.backdropBlur;
+	if (d !== void 0 && d !== 0 && d !== "0" && d !== "" && r("overlay-backdrop-filter", `blur(${typeof d == "number" ? `${d}px` : d})`), a) {
+		for (let [e, t] of Object.entries(a.fonts ?? {})) r(`font-${e}`, t);
+		for (let [e, t] of Object.entries(a.sizes ?? {})) r(`text-${e}`, t);
+		if (a.defaultTextSize !== void 0 && a.defaultTextSize !== "inherit") {
+			let e = a.defaultTextSize;
+			r("text-default", `var(--text-${e})`), r("text-default--line-height", S[e]);
 		}
 	}
-	if (a) {
-		for (let [e, t] of Object.entries(a.durations ?? {})) n(`duration-${e}`, t);
-		a.reduced === !0 && (n("duration-instant", "0ms"), n("duration-fast", "0ms"), n("duration-normal", "0ms"));
+	if (o) {
+		for (let [e, t] of Object.entries(o.durations ?? {})) r(e === "normal" ? "duration" : `duration-${e}`, t);
+		o.reduced === !0 && (r("duration-fast", "0ms"), r("duration", "0ms"));
 	}
-	return t;
+	return n;
 }
-function x(e) {
+function w(e) {
 	let t = {};
 	return e.density && e.density !== "default" && (t["data-density"] = e.density), (e.colorScheme === "light" || e.colorScheme === "dark") && (t["data-theme"] = e.colorScheme), t;
 }
 //#endregion
 //#region src/lib/ui-provider/use-iphone-input-zoom.ts
-var S = () => () => {}, C = () => !1, w = () => typeof navigator < "u" && /iPhone/i.test(navigator.userAgent);
-function T(e) {
-	let t = o(S, w, C);
+var T = () => () => {}, E = () => !1, D = () => typeof navigator < "u" && /iPhone/i.test(navigator.userAgent);
+function O(e) {
+	let t = o(T, D, E);
 	return e === !0 && t;
 }
 //#endregion
 //#region src/lib/ui-provider/root.tsx
-var E = [
+var k = [
 	"data-theme",
 	"data-density",
 	"data-iphone-input-zoom"
-], D = /* @__PURE__ */ new Map(), O = 0, k = /* @__PURE__ */ new Map();
-function A(e) {
+], A = /* @__PURE__ */ new Map(), j = 0, M = /* @__PURE__ */ new Map();
+function N(e) {
 	return typeof document > "u" ? null : e === "body" ? document.body : document.documentElement;
 }
-function j(e) {
-	let t = A(e);
+function P(e) {
+	let t = N(e);
 	if (!t) return;
 	let n = null;
-	for (let t of D.values()) t.target === e && (n === null || t.order < n.order) && (n = t);
+	for (let t of A.values()) t.target === e && (n === null || t.order < n.order) && (n = t);
 	if (n === null) {
-		for (let [n, r] of k.get(e) ?? []) r === null ? t.removeAttribute(n) : t.setAttribute(n, r);
-		k.delete(e);
+		for (let [n, r] of M.get(e) ?? []) r === null ? t.removeAttribute(n) : t.setAttribute(n, r);
+		M.delete(e);
 		return;
 	}
-	k.has(e) || k.set(e, new Map(E.map((e) => [e, t.getAttribute(e)])));
-	for (let e of E) {
+	M.has(e) || M.set(e, new Map(k.map((e) => [e, t.getAttribute(e)])));
+	for (let e of k) {
 		let r = n.attributes[e];
 		r == null ? t.removeAttribute(e) : t.setAttribute(e, r);
 	}
 }
-function M({ config: e, documentTarget: a = !1, children: o }) {
-	let c = t(p), l = r(() => _(c, e), [c, e]), u = T(l.forms?.preventIPhoneZoom), d = i(null);
+function F({ config: e, documentTarget: a = !1, children: o }) {
+	let c = t(p), l = r(() => _(c, e), [c, e]), u = O(l.forms?.preventIPhoneZoom), d = i(null);
 	d.current ??= Symbol("ui-root");
 	let f = i(null);
-	return f.current ??= O++, n(() => {
+	return f.current ??= j++, n(() => {
 		if (a === !1 || typeof document > "u") return;
 		let e = a, t = d.current;
-		return D.set(t, {
+		return A.set(t, {
 			order: f.current,
 			target: e,
 			attributes: {
-				...x(l),
+				...w(l),
 				"data-iphone-input-zoom": String(u)
 			}
-		}), j(e), () => {
-			D.delete(t), j(e);
+		}), P(e), () => {
+			A.delete(t), P(e);
 		};
 	}, [
 		a,
@@ -185,11 +226,15 @@ function M({ config: e, documentTarget: a = !1, children: o }) {
 }
 //#endregion
 //#region src/lib/ui-provider/ui-scope.tsx
-function N({ config: e, transparent: n = !0, render: i, className: a, style: o, ...c }) {
-	let d = t(p), f = t(h), g = r(() => _(d, e), [d, e]), v = T(g.forms?.preventIPhoneZoom), y = r(() => ({
+function I({ config: e, transparent: n = !0, render: i, className: a, style: o, ...c }) {
+	let d = t(p), f = t(h), g = r(() => _(d, e), [d, e]), v = O(g.forms?.preventIPhoneZoom), y = r(() => ({
 		...f,
-		...b(e ?? {})
-	}), [f, e]), S = r(() => ({
+		...C(e ?? {}, g)
+	}), [
+		f,
+		e,
+		g
+	]), b = r(() => ({
 		...n ? { display: "contents" } : null,
 		...y,
 		...o
@@ -197,12 +242,15 @@ function N({ config: e, transparent: n = !0, render: i, className: a, style: o,
 		y,
 		n,
 		o
-	]), C = r(() => x(g), [g]), w = u({
+	]), x = e?.density === "default" && d.density !== "default", S = r(() => ({
+		...w(g),
+		...x ? { "data-density": "default" } : null
+	}), [g, x]), T = u({
 		defaultTagName: "div",
 		props: l({
 			className: a,
-			style: S,
-			...C,
+			style: b,
+			...S,
 			"data-ui-scope": "",
 			"data-iphone-input-zoom": String(v)
 		}, c),
@@ -214,24 +262,24 @@ function N({ config: e, transparent: n = !0, render: i, className: a, style: o,
 			value: y,
 			children: /* @__PURE__ */ s(m.Provider, {
 				value: !0,
-				children: w
+				children: T
 			})
 		})
 	});
 }
 //#endregion
 //#region src/lib/ui-provider/provider.tsx
-function P({ config: e, transparent: n = !0, className: r, style: i, children: a }) {
-	return t(m) ? /* @__PURE__ */ s(N, {
+function L({ config: e, transparent: n = !0, className: r, style: i, children: a }) {
+	return t(m) ? /* @__PURE__ */ s(I, {
 		config: e,
 		transparent: n,
 		className: r,
 		style: i,
 		children: a
-	}) : /* @__PURE__ */ s(M, {
+	}) : /* @__PURE__ */ s(F, {
 		config: e,
 		documentTarget: "documentElement",
-		children: /* @__PURE__ */ s(N, {
+		children: /* @__PURE__ */ s(I, {
 			config: e,
 			transparent: n,
 			className: r,
@@ -242,12 +290,12 @@ function P({ config: e, transparent: n = !0, className: r, style: i, children: a
 }
 //#endregion
 //#region src/lib/ui-provider/csp-provider.tsx
-function F(e) {
+function R(e) {
 	return /* @__PURE__ */ s(d, { ...e });
 }
 //#endregion
 //#region src/lib/ui-provider/scope.tsx
-function I({ vars: e, transparent: t = !0, render: n, className: r, style: i, ...a }) {
+function z({ vars: e, transparent: t = !0, render: n, className: r, style: i, ...a }) {
 	return u({
 		defaultTagName: "div",
 		props: l({
@@ -264,7 +312,7 @@ function I({ vars: e, transparent: t = !0, render: n, className: r, style: i, ..
 }
 //#endregion
 //#region src/lib/ui-provider/portal-host.tsx
-function L({ container: e, children: t }) {
+function B({ container: e, children: t }) {
 	let [n, r] = a(null);
 	return /* @__PURE__ */ c(g.Provider, {
 		value: e ?? n,
@@ -277,44 +325,44 @@ function L({ container: e, children: t }) {
 }
 //#endregion
 //#region src/lib/ui-provider/hooks.ts
-function R() {
+function V() {
 	return t(p);
 }
-function z() {
+function H() {
 	return t(p).formatting;
 }
-function B() {
+function U() {
 	return t(p).money;
 }
-function V() {
+function W() {
 	return t(p).dates;
 }
-function H() {
+function G() {
 	return t(p).overlay;
 }
-function U() {
+function K() {
 	return t(p).typography;
 }
-function W() {
+function q() {
 	let { density: e, scale: n } = t(p);
 	return {
 		density: e,
 		scale: n
 	};
 }
-function G() {
+function J() {
 	return t(p).scale;
 }
-function K(e, n) {
+function Y(e, n) {
 	let i = t(p).defaults?.[e];
 	return r(() => i ? {
 		...n,
 		...i
 	} : n, [n, i]);
 }
-function q(e) {
+function X(e) {
 	let n = t(g);
 	return e ?? n ?? void 0;
 }
 //#endregion
-export { f as S, x as _, B as a, m as b, U as c, L as d, I as f, M as g, N as h, z as i, R as l, P as m, K as n, H as o, F as p, W as r, G as s, V as t, q as u, b as v, _ as x, p as y };
+export { f as S, w as _, U as a, m as b, K as c, B as d, z as f, F as g, I as h, H as i, V as l, L as m, Y as n, G as o, R as p, q as r, J as s, W as t, X as u, C as v, _ as x, p as y };

package/dist/ui-provider.js

@@ -1,3 +1,3 @@
 "use client";
-import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./ui-provider-Cmoq6i_D.js";
+import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./ui-provider-DpzLUD12.js";
 export { m as CSPProvider, e as DEFAULT_UI_CONFIG, o as Scope, x as UIConfigContext, r as UINestedContext, a as UIPortalHost, d as UIProvider, s as UIRoot, c as UIScope, t as configToAttributes, y as configToCssVars, b as mergeUIConfig, _ as useDatesConfig, f as useDefaults, h as useDensity, l as useFormatting, n as useMoneyConfig, p as useOverlayConfig, g as useScale, i as useTypographyConfig, u as useUIConfig, v as useUIPortalContainer };