baseline-kit 3.0.1 → 5.0.0

package/dist/guide.mjs

@@ -0,0 +1,589 @@
+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)",
+			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)"
+	}
+}, c = [
+	"baseline",
+	"guide",
+	"spacer",
+	"box",
+	"padder"
+], l = (e) => {
+	let { parentConfig: t, base: n } = e, r = {};
+	for (let n of c) r[n] = {
+		...t[n],
+		...e[n]
+	};
+	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 = e.createContext(s);
+d.displayName = "ConfigContext";
+var f = () => e.use(d);
+function p({ children: t, base: n, baseline: r, guide: i, spacer: o, box: s, padder: c }) {
+	let u = f();
+	return /* @__PURE__ */ a(d, {
+		value: e.useMemo(() => l({
+			parentConfig: u,
+			base: n,
+			baseline: r,
+			guide: i,
+			spacer: o,
+			box: s,
+			padder: c
+		}), [
+			u,
+			n,
+			r,
+			i,
+			o,
+			s,
+			c
+		]),
+		children: t
+	});
+}
+//#endregion
+//#region packages/core/src/utils/parse.ts
+function m(e) {
+	let t = e.trim().match(/^([+-]?[\d.]+)([a-zA-Z%]+)$/);
+	return t ? {
+		value: parseFloat(t[1]),
+		unit: t[2]
+	} : null;
+}
+function h(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 g = {
+	parentSize: 0,
+	viewportWidth: 1920,
+	viewportHeight: 1080,
+	rootFontSize: 16,
+	parentFontSize: 16
+}, _ = {
+	px: 1,
+	in: 96,
+	cm: 37.8,
+	mm: 3.78,
+	pt: 1.33,
+	pc: 16
+}, v = {
+	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 y(e, t) {
+	if (typeof e == "number") return e;
+	if (typeof e != "string") return null;
+	let n = m(e);
+	if (!n) return null;
+	let { value: r, unit: i } = n;
+	if (i in _) return r * _[i];
+	if (i === "auto") return null;
+	let a = v[i];
+	return a ? r * a({
+		...g,
+		...t
+	}) : null;
+}
+//#endregion
+//#region packages/core/src/utils/math.ts
+function b(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+//#endregion
+//#region packages/core/src/utils/normalize.ts
+function x(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 = y(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 : b(s, i.min ?? -Infinity, i.max ?? Infinity);
+}
+//#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 = x(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 ? h(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 = y(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 A({ 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 j = (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 M(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 = j(t, n.line), g = ["--bkgd-w", "--bkgd-h"], _ = h(a ?? "100%"), v = h(o ?? "100%"), y = {
+		...w({
+			key: "--bkgd-w",
+			value: _,
+			defaultStyles: m,
+			skipDimensions: { fullSize: g }
+		}),
+		...w({
+			key: "--bkgd-h",
+			value: v,
+			defaultStyles: m,
+			skipDimensions: { fullSize: g }
+		}),
+		...w({
+			key: "--bkgd-mw",
+			value: h(c || "none"),
+			defaultStyles: m
+		}),
+		...w({
+			key: "--bkgd-cw",
+			value: h(s || "60px"),
+			defaultStyles: m
+		}),
+		...w({
+			key: "--bkgd-n",
+			value: `${d}`,
+			defaultStyles: m
+		}),
+		...w({
+			key: "--bkgd-b",
+			value: "0",
+			defaultStyles: m
+		}),
+		...w({
+			key: "--bkgd-cl",
+			value: l ?? n.line,
+			defaultStyles: m
+		}),
+		...w({
+			key: "--bkgd-g",
+			value: `${f}px`,
+			defaultStyles: m
+		}),
+		...w({
+			key: "--bkgd-j",
+			value: i || "center",
+			defaultStyles: m
+		}),
+		...u && u !== "none" ? { "--bkgd-t": u } : {}
+	}, b = (r && r in n ? n[r] : void 0) ?? n.line, x = r === "line", S = ["gde", p ? "v" : "h"];
+	return x && S.push("line"), x && (y["--bkgd-line-color"] = l ?? n.line, y["--bkgd-line-period"] = `${f + 1}px`), {
+		containerStyle: y,
+		columnColor: b,
+		columnsCount: d,
+		calculatedGap: f,
+		template: u,
+		isVisible: p,
+		isLineVariant: x,
+		classTokens: S
+	};
+}
+//#endregion
+//#region packages/react/src/hooks/useConfig.ts
+function N(e) {
+	let t = f();
+	return n(() => Object.assign({ base: t.base }, t[e]), [t, e]);
+}
+//#endregion
+//#region packages/react/src/hooks/useDebug.ts
+function P(e, t) {
+	return n(() => C(e, t), [e, t]);
+}
+//#endregion
+//#region packages/dom/src/timing.ts
+var F = (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 I(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] = F(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 L = {
+	width: 0,
+	height: 0
+};
+function R(t) {
+	let [n, r] = e.useState(L), i = e.useRef(null);
+	e.useLayoutEffect(() => {
+		if (typeof window > "u" || !t.current) return;
+		let e = I(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 z() {
+	return typeof window > "u" ? {} : {
+		viewportWidth: window.innerWidth,
+		viewportHeight: window.innerHeight
+	};
+}
+//#endregion
+//#region packages/react/src/hooks/useGuide.ts
+function B(t, n) {
+	let { width: r } = R(t);
+	return e.useMemo(() => k(r, n, z()), [n, r]);
+}
+//#endregion
+//#region packages/react/src/hooks/useIsClient.ts
+function V() {
+	let [e, n] = r(!1);
+	return t(() => {
+		n(!0);
+	}, []), e;
+}
+//#endregion
+//#region packages/react/src/utils/ssr.tsx
+function H({ children: e, fallback: t = null }) {
+	return V() ? /* @__PURE__ */ a(i, { children: e }) : /* @__PURE__ */ a(i, { children: t });
+}
+//#endregion
+//#region packages/react/src/utils/merge.ts
+function U(...e) {
+	return Object.assign({}, ...e.filter(Boolean));
+}
+var W = {
+	gde: "gde_4PKz3",
+	v: "v_yAvN0",
+	h: "h_XcWcy",
+	line: "line_UaLjW",
+	cols: "cols_ibtT4",
+	col: "col_QPSDI",
+	ssr: "ssr_4UN4k"
+}, G = 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 = N("guide"), _ = r ?? g.variant, v = typeof o == "number" ? o : 0, { isShown: y } = P(t, g.debugging);
+	if (!y) return /* @__PURE__ */ a("div", {
+		className: S(W.gde, W.h, e),
+		style: n,
+		"data-testid": "guide",
+		"data-variant": _,
+		"aria-hidden": "true",
+		...h,
+		children: p
+	});
+	let b = /* @__PURE__ */ a("div", {
+		className: S(W.gde, W.h, W.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(H, {
+		fallback: b,
+		children: /* @__PURE__ */ a(K, {
+			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
+		})
+	});
+}), K = 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 _ = N("guide"), { isShown: v } = P(n, _.debugging), y = e.useRef(null);
+	R(y);
+	let b = i ?? _.variant, x = typeof c == "number" ? c : 0, { template: C, columnsCount: w, calculatedGap: T } = B(y, e.useMemo(() => A({
+		variant: b,
+		base: _.base,
+		gap: x,
+		columns: d,
+		columnWidth: f
+	}), [
+		b,
+		_.base,
+		x,
+		d,
+		f
+	])), E = e.useMemo(() => M({
+		base: _.base,
+		colors: _.colors,
+		variant: b,
+		align: s || "center",
+		width: u,
+		height: l,
+		columnWidth: f,
+		maxWidth: p,
+		color: m,
+		template: C,
+		columnsCount: w,
+		calculatedGap: T,
+		isVisible: v
+	}), [
+		_.base,
+		_.colors,
+		b,
+		s,
+		u,
+		l,
+		f,
+		p,
+		m,
+		C,
+		w,
+		T,
+		v
+	]), D = e.useMemo(() => U(E.containerStyle, r), [E.containerStyle, r]);
+	return /* @__PURE__ */ o("div", {
+		ref: y,
+		"data-testid": "guide",
+		"aria-hidden": "true",
+		className: S(...E.classTokens.map((e) => W[e]), t),
+		"data-variant": i,
+		style: D,
+		...g,
+		children: [v && /* @__PURE__ */ a("div", {
+			className: W.cols,
+			"data-variant": i,
+			children: !E.isLineVariant && Array.from({ length: E.columnsCount }, (e, t) => /* @__PURE__ */ a("div", {
+				className: W.col,
+				"data-column-index": t,
+				"data-variant": i,
+				style: { backgroundColor: E.columnColor }
+			}, t))
+		}), h]
+	});
+});
+//#endregion
+export { p as Config, G as Guide, u as createCSSVariables, l as mergeConfig };
+
+//# sourceMappingURL=guide.mjs.map