baseline-kit 3.0.2 → 5.1.0

package/dist/guide.mjs

@@ -0,0 +1,586 @@
+import * as e from "react";
+import { useEffect as t, useMemo as n, useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/core/src/config/defaults.ts
+var s = {
+	base: 8,
+	baseline: {
+		variant: "line",
+		debugging: "hidden",
+		colors: {
+			line: "var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, 0.15))",
+			flat: "var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, 0.2))"
+		}
+	},
+	guide: {
+		variant: "line",
+		debugging: "hidden",
+		colors: {
+			line: "var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, 0.15))",
+			pattern: "var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, 0.2))",
+			auto: "var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, 0.15))",
+			fixed: "var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, 0.15))"
+		}
+	},
+	spacer: {
+		variant: "line",
+		debugging: "hidden",
+		colors: {
+			line: "var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, 0.6))",
+			flat: "var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, 0.2))",
+			text: "var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1))"
+		}
+	},
+	box: {
+		debugging: "hidden",
+		colors: {
+			line: "var(--bk-box-color-line-theme, hsla(300, 60%, 40%, 0.6))",
+			flat: "var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, 0.2))",
+			text: "var(--bk-box-color-text-theme, hsla(300, 60%, 40%, 0.9))"
+		}
+	},
+	padder: {
+		debugging: "hidden",
+		color: "var(--bk-padder-color-theme, hsla(270, 60%, 40%, 0.6))"
+	}
+}, c = [
+	"baseline",
+	"guide",
+	"spacer",
+	"box",
+	"padder"
+], l = (e) => {
+	let { parentConfig: t, base: n } = e, r = {};
+	for (let n of c) {
+		let i = e[n], a = t[n], o = {
+			...a,
+			...i
+		};
+		i && "colors" in i && i.colors && "colors" in a && (o.colors = {
+			...a.colors,
+			...i.colors
+		}), r[n] = o;
+	}
+	return {
+		base: n ?? t.base,
+		...r
+	};
+}, u = (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
+	};
+}, d = "__baseline_kit_config_context__", f = globalThis, p = f[d] ?? (f[d] = e.createContext(s));
+p.displayName = "ConfigContext";
+var m = () => e.use(p);
+function h({ children: t, base: n, baseline: r, guide: i, spacer: o, box: s, padder: c }) {
+	let u = m(), d = e.useMemo(() => l({
+		parentConfig: u,
+		base: n,
+		baseline: r,
+		guide: i,
+		spacer: o,
+		box: s,
+		padder: c
+	}), [
+		u,
+		n,
+		r,
+		i,
+		o,
+		s,
+		c
+	]);
+	return /* @__PURE__ */ a(p, {
+		value: d,
+		children: t
+	});
+}
+//#endregion
+//#region packages/core/src/utils/parse.ts
+function g(e) {
+	let t = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
+	return t ? {
+		value: parseFloat(t[1]),
+		unit: t[2]
+	} : null;
+}
+function _(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 v = {
+	parentSize: 0,
+	viewportWidth: 1920,
+	viewportHeight: 1080,
+	rootFontSize: 16,
+	parentFontSize: 16
+}, y = {
+	px: 1,
+	in: 96,
+	cm: 37.8,
+	mm: 3.78,
+	pt: 1.33,
+	pc: 16
+}, b = {
+	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 x(e, t) {
+	if (typeof e == "number") return e;
+	if (typeof e != "string") return null;
+	let n = g(e);
+	if (!n) return null;
+	let { value: r, unit: i } = n;
+	if (i in y) return r * y[i];
+	if (i === "auto") return null;
+	let a = b[i];
+	return a ? r * a({
+		...v,
+		...t
+	}) : null;
+}
+//#endregion
+//#region packages/core/src/utils/math.ts
+function S(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+//#endregion
+//#region packages/core/src/utils/normalize.ts
+function C(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 = x(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 : S(s, i.min ?? -Infinity, i.max ?? Infinity);
+}
+//#endregion
+//#region packages/core/src/utils/merge.ts
+var w = (...e) => e.filter(Boolean).join(" ").trim();
+function T(e, t) {
+	let n = e ?? t;
+	return {
+		isShown: n === "visible",
+		isHidden: n === "hidden",
+		isNone: n === "none",
+		debugging: n
+	};
+}
+function E(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 D = /^\d*\.?\d+(?:fr|px|%|em|rem|vh|vw|vmin|vmax|pt|pc|in|cm|mm)$/, O = (e) => typeof e == "number" ? Number.isFinite(e) && e >= 0 : typeof e == "string" ? e === "auto" || e === "100%" || D.test(e) : !1, k = (e) => Array.isArray(e) && e.length > 0 && e.every(O), A = {
+	template: "none",
+	columnsCount: 0,
+	calculatedGap: 0,
+	isValid: !1
+};
+function j(e, t, n) {
+	let r = t.variant ?? "line", i = t.base ?? 8, a = C(t.gap ?? 0, {
+		base: i,
+		context: n
+	});
+	if (!e) return A;
+	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) || !k(t.columns)) return A;
+			let e = t.columns.map((e) => typeof e == "number" ? `${e}px` : e);
+			return e.some((e) => e === "0" || e === "0px") ? A : {
+				template: e.join(" "),
+				columnsCount: e.length,
+				calculatedGap: a,
+				isValid: !0
+			};
+		}
+		case "fixed": {
+			let e = typeof t.columns == "number" ? t.columns : 0;
+			return e < 1 ? A : {
+				template: `repeat(${e}, ${t.columnWidth ? _(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 = x(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
+			};
+		}
+	}
+}
+//#endregion
+//#region packages/core/src/descriptors/guide.ts
+function M({ 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
+			};
+		}
+	}
+	return {
+		variant: "auto",
+		columnWidth: i || "1fr",
+		gap: n,
+		base: t
+	};
+}
+var N = (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 P(e) {
+	let { base: t, colors: n, variant: r, align: i, width: a, height: o, columnWidth: s, maxWidth: c, color: l, template: u, columnsCount: d, calculatedGap: f, isVisible: p } = e, m = N(t, n.line), h = {
+		"--bkgd-cl": l ?? n.line,
+		"--bkgd-cp": l ?? n.pattern,
+		"--bkgd-ca": l ?? n.auto,
+		"--bkgd-cf": l ?? n.fixed,
+		"--bkgd-w": _(a ?? "100%"),
+		"--bkgd-h": _(o ?? "100%"),
+		...E({
+			key: "--bkgd-mw",
+			value: _(c || "none"),
+			defaultStyles: m
+		}),
+		...E({
+			key: "--bkgd-cw",
+			value: _(s || "60px"),
+			defaultStyles: m
+		}),
+		...E({
+			key: "--bkgd-n",
+			value: `${d}`,
+			defaultStyles: m
+		}),
+		...E({
+			key: "--bkgd-b",
+			value: "0",
+			defaultStyles: m
+		}),
+		...E({
+			key: "--bkgd-cl",
+			value: l ?? n.line,
+			defaultStyles: m
+		}),
+		...E({
+			key: "--bkgd-g",
+			value: `${f}px`,
+			defaultStyles: m
+		}),
+		...E({
+			key: "--bkgd-j",
+			value: i || "center",
+			defaultStyles: m
+		}),
+		...u && u !== "none" ? { "--bkgd-t": u } : {}
+	}, g = l ?? (r && r in n ? n[r] : void 0) ?? n.line, v = r === "line", y = ["gde", p ? "v" : "h"];
+	return v && y.push("line"), v && (h["--bkgd-line-color"] = "var(--bkgd-cl)", h["--bkgd-line-period"] = `${f + 1}px`), {
+		containerStyle: h,
+		columnColor: g,
+		columnsCount: d,
+		calculatedGap: f,
+		template: u,
+		isVisible: p,
+		isLineVariant: v,
+		classTokens: y
+	};
+}
+//#endregion
+//#region packages/react/src/hooks/useConfig.ts
+function F(e) {
+	let t = m();
+	return n(() => Object.assign({ base: t.base }, t[e]), [t, e]);
+}
+//#endregion
+//#region packages/react/src/hooks/useDebug.ts
+function I(e, t) {
+	return n(() => T(e, t), [e, t]);
+}
+//#endregion
+//#region packages/dom/src/timing.ts
+var L = (e) => {
+	let t = null, n = null;
+	return [(...r) => {
+		n = r, t !== null && cancelAnimationFrame(t), t = requestAnimationFrame(() => {
+			e(...n), t = null, n = null;
+		});
+	}, () => {
+		t !== null && (cancelAnimationFrame(t), t = null, n = null);
+	}];
+};
+//#endregion
+//#region packages/dom/src/measure.ts
+function R(e, t) {
+	let n = {
+		width: 0,
+		height: 0
+	}, r = () => {
+		try {
+			let r = e.getBoundingClientRect(), i = {
+				width: Math.round(r.width),
+				height: Math.round(r.height)
+			};
+			(i.width !== n.width || i.height !== n.height) && (n = i, t(i));
+		} catch {}
+	}, [i, a] = L(r);
+	r();
+	let o = new ResizeObserver(i);
+	return o.observe(e), {
+		refresh: i,
+		disconnect() {
+			o.disconnect(), a();
+		}
+	};
+}
+//#endregion
+//#region packages/react/src/hooks/useMeasure.ts
+var z = {
+	width: 0,
+	height: 0
+};
+function B(t) {
+	let [n, r] = e.useState(z), i = e.useRef(null);
+	e.useLayoutEffect(() => {
+		if (typeof window > "u" || !t.current) return;
+		let e = R(t.current, (e) => {
+			r((t) => t.width === e.width && t.height === e.height ? t : e);
+		});
+		return i.current = e, () => {
+			e.disconnect(), i.current = null;
+		};
+	}, [t]);
+	let a = e.useCallback(() => {
+		i.current?.refresh();
+	}, []);
+	return {
+		...n,
+		refresh: a
+	};
+}
+//#endregion
+//#region packages/dom/src/viewport.ts
+function V() {
+	return typeof window > "u" ? {} : {
+		viewportWidth: window.innerWidth,
+		viewportHeight: window.innerHeight
+	};
+}
+//#endregion
+//#region packages/react/src/hooks/useGuide.ts
+function H(t, n) {
+	let { width: r } = B(t);
+	return e.useMemo(() => j(r, n, V()), [n, r]);
+}
+//#endregion
+//#region packages/react/src/hooks/useIsClient.ts
+function U() {
+	let [e, n] = r(!1);
+	return t(() => {
+		n(!0);
+	}, []), e;
+}
+//#endregion
+//#region packages/react/src/utils/ssr.tsx
+function W({ children: e, fallback: t = null }) {
+	return U() ? /* @__PURE__ */ a(i, { children: e }) : /* @__PURE__ */ a(i, { children: t });
+}
+//#endregion
+//#region packages/react/src/utils/merge.ts
+function G(...e) {
+	return Object.assign({}, ...e.filter(Boolean));
+}
+var K = {
+	gde: "gde_4PKz3",
+	v: "v_yAvN0",
+	h: "h_XcWcy",
+	line: "line_UaLjW",
+	cols: "cols_ibtT4",
+	col: "col_QPSDI",
+	ssr: "ssr_4UN4k"
+}, q = e.memo(function({ className: e, debugging: t, style: n, variant: r, align: i = "center", gap: o, height: s, width: c, columns: l, columnWidth: u, maxWidth: d, color: f, children: p, ssrMode: m = !1, ...h }) {
+	let g = F("guide"), _ = r ?? g.variant, v = typeof o == "number" ? o : 0, { isShown: y } = I(t, g.debugging);
+	if (!y) return /* @__PURE__ */ a("div", {
+		className: w(K.gde, K.h, e),
+		style: n,
+		"data-testid": "guide",
+		"data-variant": _,
+		"aria-hidden": "true",
+		...h,
+		children: p
+	});
+	let b = /* @__PURE__ */ a("div", {
+		className: w(K.gde, K.h, K.ssr, e),
+		style: {
+			width: c ?? "100%",
+			height: s ?? "100%",
+			maxWidth: d ?? "none",
+			...n
+		},
+		"data-testid": "guide",
+		"data-variant": _,
+		"aria-hidden": "true",
+		children: p
+	});
+	return m ? b : /* @__PURE__ */ a(W, {
+		fallback: b,
+		children: /* @__PURE__ */ a(J, {
+			className: e,
+			debugging: t,
+			style: n,
+			variant: _,
+			align: i,
+			gap: v,
+			height: s,
+			width: c,
+			columns: l,
+			columnWidth: u,
+			maxWidth: d,
+			color: f,
+			...h,
+			children: p
+		})
+	});
+}), J = e.memo(function({ className: t, debugging: n, style: r, variant: i, align: s = "center", gap: c, height: l, width: u, columns: d, columnWidth: f, maxWidth: p, color: m, children: h, ...g }) {
+	let _ = F("guide"), { isShown: v } = I(n, _.debugging), y = e.useRef(null);
+	B(y);
+	let b = i ?? _.variant, x = typeof c == "number" ? c : 0, { template: S, columnsCount: C, calculatedGap: T } = H(y, e.useMemo(() => M({
+		variant: b,
+		base: _.base,
+		gap: x,
+		columns: d,
+		columnWidth: f
+	}), [
+		b,
+		_.base,
+		x,
+		d,
+		f
+	])), E = e.useMemo(() => P({
+		base: _.base,
+		colors: _.colors,
+		variant: b,
+		align: s || "center",
+		width: u,
+		height: l,
+		columnWidth: f,
+		maxWidth: p,
+		color: m,
+		template: S,
+		columnsCount: C,
+		calculatedGap: T,
+		isVisible: v
+	}), [
+		_.base,
+		_.colors,
+		b,
+		s,
+		u,
+		l,
+		f,
+		p,
+		m,
+		S,
+		C,
+		T,
+		v
+	]), D = e.useMemo(() => G(E.containerStyle, r), [E.containerStyle, r]);
+	return /* @__PURE__ */ o("div", {
+		ref: y,
+		"data-testid": "guide",
+		"aria-hidden": "true",
+		className: w(...E.classTokens.map((e) => K[e]), t),
+		"data-variant": i,
+		style: D,
+		...g,
+		children: [v && /* @__PURE__ */ a("div", {
+			className: K.cols,
+			"data-variant": i,
+			children: !E.isLineVariant && Array.from({ length: E.columnsCount }, (e, t) => /* @__PURE__ */ a("div", {
+				className: K.col,
+				"data-column-index": t,
+				"data-variant": i
+			}, t))
+		}), h]
+	});
+});
+//#endregion
+export { h as Config, q as Guide, u as createCSSVariables, l as mergeConfig };
+
+//# sourceMappingURL=guide.mjs.map