baseline-kit 3.0.1 → 5.0.0

package/dist/src-QHaSfgVe.js

@@ -0,0 +1,619 @@
+//#region packages/core/src/config/defaults.ts
+var e = {
+	base: 8,
+	baseline: {
+		variant: "line",
+		debugging: "hidden",
+		colors: {
+			line: "var(--bk-baseline-color-line-theme)",
+			flat: "var(--bk-baseline-color-flat-theme)"
+		}
+	},
+	guide: {
+		variant: "line",
+		debugging: "hidden",
+		colors: {
+			line: "var(--bk-guide-color-line-theme)",
+			pattern: "var(--bk-guide-color-pattern-theme)",
+			auto: "var(--bk-guide-color-auto-theme)",
+			fixed: "var(--bk-guide-color-fixed-theme)"
+		}
+	},
+	spacer: {
+		variant: "line",
+		debugging: "hidden",
+		colors: {
+			line: "var(--bk-spacer-color-line-theme)",
+			flat: "var(--bk-spacer-color-flat-theme)",
+			text: "var(--bk-spacer-color-text-theme)"
+		}
+	},
+	box: {
+		debugging: "hidden",
+		colors: {
+			line: "var(--bk-box-color-line-theme)",
+			flat: "var(--bk-box-color-flat-theme)",
+			text: "var(--bk-box-color-text-theme)"
+		}
+	},
+	padder: {
+		debugging: "hidden",
+		color: "var(--bk-padder-color-theme)"
+	}
+}, t = [
+	"baseline",
+	"guide",
+	"spacer",
+	"box",
+	"padder"
+], n = (e) => {
+	let { parentConfig: n, base: r } = e, i = {};
+	for (let r of t) i[r] = {
+		...n[r],
+		...e[r]
+	};
+	return {
+		base: r ?? n.base,
+		...i
+	};
+}, r = (e) => {
+	let { base: t, baseline: n, guide: r, spacer: i, box: a, padder: o } = e;
+	return {
+		"--bk-base": `${t}px`,
+		"--bkbl-cl": n.colors.line,
+		"--bkbl-cf": n.colors.flat,
+		"--bkgd-cl": r.colors.line,
+		"--bkgd-cp": r.colors.pattern,
+		"--bkgd-ca": r.colors.auto,
+		"--bkgd-cf": r.colors.fixed,
+		"--bksp-cl": i.colors.line,
+		"--bksp-cf": i.colors.flat,
+		"--bksp-ct": i.colors.text,
+		"--bkbx-cl": a.colors.line,
+		"--bkbx-cf": a.colors.flat,
+		"--bkbx-ct": a.colors.text,
+		"--bkpd-c": o.color
+	};
+}, i = [
+	"start",
+	"center",
+	"end"
+], a = ["line", "flat"];
+//#endregion
+//#region packages/core/src/utils/parse.ts
+function o(e) {
+	let t = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
+	return t ? {
+		value: parseFloat(t[1]),
+		unit: t[2]
+	} : null;
+}
+function s(e, t) {
+	return e === void 0 && t !== void 0 ? `${t}px` : e === "auto" || typeof e == "string" && /^(auto|100%|0|.*(fr|vh|vw|vmin|vmax|rem))$/.test(e) ? String(e) : typeof e == "number" ? `${e}px` : e ?? "";
+}
+//#endregion
+//#region packages/core/src/utils/convert.ts
+var c = {
+	parentSize: 0,
+	viewportWidth: 1920,
+	viewportHeight: 1080,
+	rootFontSize: 16,
+	parentFontSize: 16
+}, l = {
+	px: 1,
+	in: 96,
+	cm: 37.8,
+	mm: 3.78,
+	pt: 1.33,
+	pc: 16
+}, u = [
+	"em",
+	"rem",
+	"vh",
+	"vw",
+	"vmin",
+	"vmax",
+	"%"
+], d = {
+	em: (e) => e.parentFontSize,
+	rem: (e) => e.rootFontSize,
+	vh: (e) => e.viewportHeight / 100,
+	vw: (e) => e.viewportWidth / 100,
+	vmin: (e) => Math.min(e.viewportWidth, e.viewportHeight) / 100,
+	vmax: (e) => Math.max(e.viewportWidth, e.viewportHeight) / 100,
+	"%": (e) => e.parentSize / 100
+};
+function f(e, t) {
+	if (typeof e == "number") return e;
+	if (typeof e != "string") return null;
+	let n = o(e);
+	if (!n) return null;
+	let { value: r, unit: i } = n;
+	if (i in l) return r * l[i];
+	if (i === "auto") return null;
+	let a = d[i];
+	return a ? r * a({
+		...c,
+		...t
+	}) : null;
+}
+//#endregion
+//#region packages/core/src/utils/math.ts
+function p(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function m(e) {
+	let { height: t, top: n, bottom: r, base: i } = e, a = (t ?? 0) - (n + r);
+	return Math.max(1, Math.floor(a / i));
+}
+//#endregion
+//#region packages/core/src/utils/normalize.ts
+function h(e, t = {}) {
+	let { base: n = 8, round: r = !0, clamp: i, context: a } = t;
+	if (e === "auto") return n;
+	let o = null;
+	if (typeof e == "number" ? o = e : typeof e == "string" && (o = f(e, a) ?? n), o === null && (o = n), n <= 0) return o;
+	let s = r ? Math.round(o / n) * n : o;
+	return i === void 0 ? s : p(s, i.min ?? -Infinity, i.max ?? Infinity);
+}
+function g(e, t, n) {
+	return !e || e[0] === void 0 && e[1] === void 0 ? t : [e[0] === void 0 ? t[0] : h(e[0], n), e[1] === void 0 ? t[1] : h(e[1], n)];
+}
+//#endregion
+//#region packages/core/src/utils/padding.ts
+function _(e) {
+	if ("padding" in e && e.padding != null) return v(e.padding);
+	let t = "block" in e && e.block != null ? y(e.block) : {
+		top: 0,
+		bottom: 0
+	}, n = "inline" in e && e.inline != null ? b(e.inline) : {
+		left: 0,
+		right: 0
+	};
+	return {
+		top: t.top,
+		right: n.right,
+		bottom: t.bottom,
+		left: n.left
+	};
+}
+function v(e) {
+	if (typeof e == "number") return {
+		top: e,
+		right: e,
+		bottom: e,
+		left: e
+	};
+	if (Array.isArray(e)) {
+		let [t = 0, n = 0, r, i] = e;
+		return {
+			top: t,
+			right: n,
+			bottom: r ?? t,
+			left: i ?? n
+		};
+	}
+	return typeof e == "object" ? {
+		top: e.top ?? 0,
+		right: e.right ?? 0,
+		bottom: e.bottom ?? 0,
+		left: e.left ?? 0
+	} : {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+}
+function y(e) {
+	if (typeof e == "number") return {
+		top: e,
+		bottom: e
+	};
+	if (Array.isArray(e)) {
+		let [t, n] = e;
+		return {
+			top: t ?? 0,
+			bottom: n ?? 0
+		};
+	}
+	return typeof e == "object" ? {
+		top: e.start ?? 0,
+		bottom: e.end ?? 0
+	} : {
+		top: 0,
+		bottom: 0
+	};
+}
+function b(e) {
+	if (typeof e == "number") return {
+		left: e,
+		right: e
+	};
+	if (Array.isArray(e)) {
+		let [t, n] = e;
+		return {
+			left: t ?? 0,
+			right: n ?? 0
+		};
+	}
+	return typeof e == "object" ? {
+		left: e.start ?? 0,
+		right: e.end ?? 0
+	} : {
+		left: 0,
+		right: 0
+	};
+}
+//#endregion
+//#region packages/core/src/utils/snapping.ts
+function x(e, t, n, r) {
+	let i = _({ padding: n });
+	if (r === "none") return i;
+	if (r === "height") {
+		let n = e % t;
+		n !== 0 && (i.bottom += t - n);
+	}
+	if (r === "clamp") {
+		i.top %= t;
+		let n = e % t;
+		n !== 0 && (i.bottom += t - n), i.bottom %= t;
+	}
+	return i;
+}
+//#endregion
+//#region packages/core/src/utils/merge.ts
+var S = (...e) => e.filter(Boolean).join(" ").trim();
+function C(e, t) {
+	let n = e ?? t;
+	return {
+		isShown: n === "visible",
+		isHidden: n === "hidden",
+		isNone: n === "none",
+		debugging: n
+	};
+}
+function w(e, t, n) {
+	let r = typeof e == "string" ? e : e.key, i = typeof e == "string" ? t : e.value, a = typeof e == "string" ? n : e.defaultStyles, o = typeof e == "object" ? e.skipDimensions : void 0;
+	return o && (o.fitContent?.includes(r) && i === "fit-content" || o.auto?.includes(r) && i === "auto" || o.fullSize?.includes(r) && (i === "100%" || i === "100vh" || i === "100vw")) || i === a[r] ? {} : { [r]: i };
+}
+//#endregion
+//#region packages/core/src/validation/guide.ts
+var T = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, E = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || T.test(e) : !1, D = (e) => Array.isArray(e) && e.length > 0 && e.every(E), O = {
+	template: "none",
+	columnsCount: 0,
+	calculatedGap: 0,
+	isValid: !1
+};
+function k(e, t, n) {
+	let r = t.variant ?? "line", i = t.base ?? 8, a = h(t.gap ?? 0, {
+		base: i,
+		context: n
+	});
+	if (!e) return O;
+	switch (r) {
+		case "line": {
+			let t = a === 0 ? 0 : a - 1, n = t + 1, r = t === 0 ? Math.max(1, Math.floor(e) + 1) : Math.max(1, Math.floor((e + 1) / n) + 1);
+			return {
+				template: `repeat(${r}, 1px)`,
+				columnsCount: r,
+				calculatedGap: a > 0 ? a - 1 : a,
+				isValid: !0
+			};
+		}
+		case "pattern": {
+			if (!t.columns || !Array.isArray(t.columns) || !D(t.columns)) return O;
+			let e = t.columns.map((e) => typeof e == "number" ? `${e}px` : e);
+			return e.some((e) => e === "0" || e === "0px") ? O : {
+				template: e.join(" "),
+				columnsCount: e.length,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+		case "fixed": {
+			let e = typeof t.columns == "number" ? t.columns : 0;
+			return e < 1 ? O : {
+				template: `repeat(${e}, ${t.columnWidth ? s(t.columnWidth) : "1fr"})`,
+				columnsCount: e,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+		case "auto": {
+			let r = t.columnWidth ?? "auto";
+			if (r === "auto") return {
+				template: "repeat(auto-fill, minmax(0, 1fr))",
+				columnsCount: 1,
+				calculatedGap: a,
+				isValid: !0
+			};
+			let i = typeof r == "number" ? `${r}px` : r.toString(), o = f(i, n) ?? 0, s = o > 0 ? Math.max(1, Math.floor((e + a) / (o + a))) : 1;
+			return {
+				template: `repeat(auto-fill, ${i})`,
+				columnsCount: s,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+		default: {
+			let t = Math.max(1, Math.floor(e / (a + 1)) + 1);
+			return {
+				template: `repeat(${t}, 1px)`,
+				columnsCount: t,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+	}
+}
+var A = (e, t, n) => {
+	let r = {};
+	return e === void 0 ? (t !== void 0 && (r.gridColumn = `span ${t}`), n !== void 0 && (r.gridRow = `span ${n}`)) : (r.gridColumn = `span ${e}`, r.gridRow = `span ${e}`), r;
+};
+//#endregion
+//#region packages/core/src/descriptors/guide.ts
+function j({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
+	switch (e) {
+		case "line": return {
+			variant: "line",
+			gap: n,
+			base: t
+		};
+		case "pattern":
+			if (r && Array.isArray(r)) return {
+				variant: "pattern",
+				columns: r,
+				gap: n,
+				base: t
+			};
+			break;
+		case "fixed":
+			if (r !== void 0) {
+				let e = typeof r == "number" ? r : parseInt(String(r), 10);
+				return {
+					variant: "fixed",
+					columns: isNaN(e) ? 12 : e,
+					columnWidth: i || "60px",
+					gap: n,
+					base: t
+				};
+			}
+			break;
+	}
+	return {
+		variant: "auto",
+		columnWidth: i || "1fr",
+		gap: n,
+		base: t
+	};
+}
+var M = (e, t) => ({
+	"--bkgd-w": "100%",
+	"--bkgd-h": "100%",
+	"--bkgd-mw": "none",
+	"--bkgd-cw": "60px",
+	"--bkgd-gw": "24px",
+	"--bkgd-n": "12",
+	"--bkgd-b": `${e}px`,
+	"--bkgd-cl": t,
+	"--bkgd-g": "0"
+});
+function N(e) {
+	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: c, maxWidth: l, color: u, template: d, columnsCount: f, calculatedGap: p, isVisible: m } = e, h = M(t, n.line), g = ["--bkgd-w", "--bkgd-h"], _ = s(a ?? "100%"), v = s(o ?? "100%"), y = {
+		...w({
+			key: "--bkgd-w",
+			value: _,
+			defaultStyles: h,
+			skipDimensions: { fullSize: g }
+		}),
+		...w({
+			key: "--bkgd-h",
+			value: v,
+			defaultStyles: h,
+			skipDimensions: { fullSize: g }
+		}),
+		...w({
+			key: "--bkgd-mw",
+			value: s(l || "none"),
+			defaultStyles: h
+		}),
+		...w({
+			key: "--bkgd-cw",
+			value: s(c || "60px"),
+			defaultStyles: h
+		}),
+		...w({
+			key: "--bkgd-n",
+			value: `${f}`,
+			defaultStyles: h
+		}),
+		...w({
+			key: "--bkgd-b",
+			value: "0",
+			defaultStyles: h
+		}),
+		...w({
+			key: "--bkgd-cl",
+			value: u ?? n.line,
+			defaultStyles: h
+		}),
+		...w({
+			key: "--bkgd-g",
+			value: `${p}px`,
+			defaultStyles: h
+		}),
+		...w({
+			key: "--bkgd-j",
+			value: i || "center",
+			defaultStyles: h
+		}),
+		...d && d !== "none" ? { "--bkgd-t": d } : {}
+	}, b = (r && r in n ? n[r] : void 0) ?? n.line, x = r === "line", S = ["gde", m ? "v" : "h"];
+	return x && S.push("line"), x && (y["--bkgd-line-color"] = u ?? n.line, y["--bkgd-line-period"] = `${p + 1}px`), {
+		containerStyle: y,
+		columnColor: b,
+		columnsCount: f,
+		calculatedGap: p,
+		template: d,
+		isVisible: m,
+		isLineVariant: x,
+		classTokens: S
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/baseline.ts
+var P = (e, t, n) => ({
+	"--bkbl-w": "100%",
+	"--bkbl-h": "100%",
+	"--bkbl-b": `${e}px`,
+	"--bkbl-cl": t,
+	"--bkbl-cf": n
+});
+function F(e) {
+	let { base: t, colors: n, variant: r, width: i, height: a, color: o, containerWidth: c, containerHeight: l, spacing: u, isVisible: d } = e, [, f] = g([i, a], [c, l]), { top: p, right: h, bottom: v, left: y } = _(u), b = [
+		p,
+		h,
+		v,
+		y
+	].map((e) => e ? `${e}px` : "0").join(" "), x = b === "0 0 0 0" ? void 0 : b, S = m({
+		height: f,
+		top: p,
+		bottom: v,
+		base: t
+	}), C = o || (r === "line" ? n.line : n.flat), T = P(t, n.line, n.flat), E = ["--bkbl-w", "--bkbl-h"];
+	return {
+		containerStyle: {
+			...w({
+				key: "--bkbl-w",
+				value: s(i || "100%"),
+				defaultStyles: T,
+				skipDimensions: { fullSize: E }
+			}),
+			...w({
+				key: "--bkbl-h",
+				value: s(a || "100%"),
+				defaultStyles: T,
+				skipDimensions: { fullSize: E }
+			}),
+			...w({
+				key: "--bkbl-cl",
+				value: o || n.line,
+				defaultStyles: T
+			}),
+			...w({
+				key: "--bkbl-cf",
+				value: o || n.flat,
+				defaultStyles: T
+			}),
+			...x ? { padding: x } : {}
+		},
+		rowCount: S,
+		getRowStyle: (e) => ({
+			"--bkbl-rt": e === 0 ? "0px" : `${e * t}px`,
+			"--bkbl-rh": r === "line" ? "1px" : `${t}px`,
+			"--bkbl-c": C
+		}),
+		padding: x,
+		isVisible: d,
+		classTokens: ["bas", d ? "v" : "h"]
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/box.ts
+var I = (e, t) => ({
+	"--bkbx-w": "auto",
+	"--bkbx-h": "auto",
+	"--bkbx-cl": t,
+	"--bkbx-b": `${e}px`
+});
+function L(e) {
+	let { base: t, lineColor: n, width: r, height: i, span: a, colSpan: o, rowSpan: c, isVisible: l } = e, u = I(t, n), d = ["--bkbx-w", "--bkbx-h"], f = {
+		...w({
+			key: "--bkbx-w",
+			value: s(r || "fit-content"),
+			defaultStyles: u,
+			skipDimensions: { fitContent: d }
+		}),
+		...w({
+			key: "--bkbx-h",
+			value: s(i || "fit-content"),
+			defaultStyles: u,
+			skipDimensions: { fitContent: d }
+		})
+	}, p = A(a, o, c), m = ["box"];
+	return l && m.push("v"), {
+		boxStyle: f,
+		gridSpanStyle: p,
+		classTokens: m
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/spacer.ts
+var R = (e, t, n, r) => ({
+	"--bksp-w": "100%",
+	"--bksp-h": "100%",
+	"--bksp-b": `${e}px`,
+	"--bksp-ct": t,
+	"--bksp-cf": n,
+	"--bksp-cl": r
+});
+function z(e) {
+	let { base: t, colors: n, width: r, height: i, color: a, variant: o, isVisible: c } = e, [l, u] = g([r, i], [0, 0], {
+		base: t,
+		suppressWarnings: !0
+	}), d = R(t, n.text, n.flat, n.line), f = ["--bksp-w", "--bksp-h"], p = {
+		...w({
+			key: "--bksp-h",
+			value: s(u || "100%"),
+			defaultStyles: d,
+			skipDimensions: { fullSize: f }
+		}),
+		...w({
+			key: "--bksp-w",
+			value: s(l || "100%"),
+			defaultStyles: d,
+			skipDimensions: { fullSize: f }
+		}),
+		"--bksp-b": `${t}px`,
+		...w({
+			key: "--bksp-ct",
+			value: a ?? n.text,
+			defaultStyles: d
+		}),
+		...w({
+			key: "--bksp-cl",
+			value: a ?? n.line,
+			defaultStyles: d
+		}),
+		...w({
+			key: "--bksp-cf",
+			value: a ?? n.flat,
+			defaultStyles: d
+		})
+	}, m = ["spr"];
+	return c && m.push(o), {
+		style: p,
+		normWidth: l,
+		normHeight: u,
+		classTokens: m
+	};
+}
+//#endregion
+//#region packages/core/src/descriptors/padder.ts
+function B(e) {
+	let { base: t, color: n, width: r, height: i, padding: a, enableSpacers: o, isVisible: c } = e, l = {};
+	if (r !== void 0 && r !== "fit-content" && (l["--bkpd-w"] = s(r)), i !== void 0 && i !== "fit-content" && (l["--bkpd-h"] = s(i)), l["--bkpd-b"] = `${t}px`, l["--bkpd-c"] = n, !o) {
+		let { top: e, right: t, bottom: n, left: r } = a;
+		(e > 0 || n > 0) && (l.paddingBlock = `${e}px ${n}px`), (r > 0 || t > 0) && (l.paddingInline = `${r}px ${t}px`);
+	}
+	let u = ["pad"];
+	return c && o && u.push("v"), {
+		containerStyle: l,
+		classTokens: u
+	};
+}
+//#endregion
+export { s as C, r as D, a as E, n as O, f as S, i as T, g as _, j as a, l as b, A as c, w as d, S as f, h as g, _ as h, F as i, e as k, E as l, x as m, z as n, N as o, C as p, L as r, k as s, B as t, D as u, m as v, o as w, u as x, p as y };
+
+//# sourceMappingURL=src-QHaSfgVe.js.map