baseline-kit 5.1.0 → 6.0.0

package/dist/guide.d.ts

@@ -58,6 +58,7 @@ type DebugColors = {
 };
 type ConfigSchema = {
     base: number;
+    domDiagnostics: boolean;
     baseline: {
         variant: BaselineVariant;
         debugging: DebuggingMode;
@@ -90,6 +91,7 @@ type PartialColors<T> = T extends {
 } : Partial<T>;
 type ConfigOverrides = {
     base?: number;
+    domDiagnostics?: boolean;
     baseline?: PartialColors<ConfigSchema['baseline']>;
     guide?: PartialColors<ConfigSchema['guide']>;
     spacer?: PartialColors<ConfigSchema['spacer']>;
@@ -116,7 +118,7 @@ type ConfigProps = ConfigOverrides & {
 /**
  * Configuration provider for baseline-kit components.
  */
-declare function Config({ children, base, baseline, guide, spacer, box, padder, }: ConfigProps): React.JSX.Element;
+declare function Config({ children, base, domDiagnostics, baseline, guide, spacer, box, padder, }: ConfigProps): React.JSX.Element;
 
 /**
  * Common props shared across library components.
@@ -127,7 +129,16 @@ type ComponentsProps = {
     style?: React.CSSProperties;
     height?: React.CSSProperties['height'];
     width?: React.CSSProperties['width'];
-} & SpacingProps;
+} & SpacingProps & React.AriaAttributes & {
+    id?: string;
+    title?: string;
+    role?: React.AriaRole;
+    tabIndex?: number;
+    lang?: string;
+    dir?: string;
+    hidden?: boolean;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
 
 type GuideProps = {
     align?: React.CSSProperties['justifyContent'];

package/dist/guide.mjs

@@ -4,6 +4,7 @@ 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,
+	domDiagnostics: !1,
 	baseline: {
 		variant: "line",
 		debugging: "hidden",
@@ -50,20 +51,21 @@ var s = {
 	"box",
 	"padder"
 ], l = (e) => {
-	let { parentConfig: t, base: n } = e, r = {};
+	let { parentConfig: t, base: n, domDiagnostics: r } = e, i = {};
 	for (let n of c) {
-		let i = e[n], a = t[n], o = {
+		let r = e[n], a = t[n], o = {
 			...a,
-			...i
+			...r
 		};
-		i && "colors" in i && i.colors && "colors" in a && (o.colors = {
+		r && "colors" in r && r.colors && "colors" in a && (o.colors = {
 			...a.colors,
-			...i.colors
-		}), r[n] = o;
+			...r.colors
+		}), i[n] = o;
 	}
 	return {
 		base: n ?? t.base,
-		...r
+		domDiagnostics: r ?? t.domDiagnostics ?? !1,
+		...i
 	};
 }, u = (e) => {
 	let { base: t, baseline: n, guide: r, spacer: i, box: a, padder: o } = e;
@@ -86,26 +88,28 @@ var s = {
 }, 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,
+function h({ children: t, base: n, domDiagnostics: r, baseline: i, guide: o, spacer: s, box: c, padder: u }) {
+	let d = m(), f = e.useMemo(() => l({
+		parentConfig: d,
 		base: n,
-		baseline: r,
-		guide: i,
-		spacer: o,
-		box: s,
-		padder: c
+		domDiagnostics: r,
+		baseline: i,
+		guide: o,
+		spacer: s,
+		box: c,
+		padder: u
 	}), [
-		u,
+		d,
 		n,
 		r,
 		i,
 		o,
 		s,
-		c
+		c,
+		u
 	]);
 	return /* @__PURE__ */ a(p, {
-		value: d,
+		value: f,
 		children: t
 	});
 }
@@ -262,7 +266,17 @@ function j(e, t, n) {
 }
 //#endregion
 //#region packages/core/src/descriptors/guide.ts
-function M({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
+function M(e) {
+	let t = /* @__PURE__ */ new Set([
+		"--bkgd-cl",
+		"--bkgd-cp",
+		"--bkgd-ca",
+		"--bkgd-cf",
+		"--bkgd-line-color"
+	]), n = e.style && Object.keys(e.style).some((e) => !t.has(e));
+	return !e.domDiagnostics && !e.className && !n && e.variant === "fixed" && e.columns === 4 && (e.columnWidth === void 0 || e.columnWidth === 60 || e.columnWidth === "60px") && e.gap === 0 && (e.align || "center") === "center";
+}
+function N({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 	switch (e) {
 		case "line": return {
 			variant: "line",
@@ -295,7 +309,7 @@ function M({ variant: e, base: t, gap: n, columns: r, columnWidth: i }) {
 		base: t
 	};
 }
-var N = (e, t) => ({
+var P = (e, t) => ({
 	"--bkgd-w": "100%",
 	"--bkgd-h": "100%",
 	"--bkgd-mw": "none",
@@ -306,8 +320,8 @@ var N = (e, t) => ({
 	"--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 = {
+function F(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 = P(t, n.line), h = {
 		"--bkgd-cl": l ?? n.line,
 		"--bkgd-cp": l ?? n.pattern,
 		"--bkgd-ca": l ?? n.auto,
@@ -364,18 +378,21 @@ function P(e) {
 }
 //#endregion
 //#region packages/react/src/hooks/useConfig.ts
-function F(e) {
+function I(e) {
 	let t = m();
-	return n(() => Object.assign({ base: t.base }, t[e]), [t, e]);
+	return n(() => Object.assign({
+		base: t.base,
+		domDiagnostics: t.domDiagnostics
+	}, t[e]), [t, e]);
 }
 //#endregion
 //#region packages/react/src/hooks/useDebug.ts
-function I(e, t) {
+function L(e, t) {
 	return n(() => T(e, t), [e, t]);
 }
 //#endregion
 //#region packages/dom/src/timing.ts
-var L = (e) => {
+var R = (e) => {
 	let t = null, n = null;
 	return [(...r) => {
 		n = r, t !== null && cancelAnimationFrame(t), t = requestAnimationFrame(() => {
@@ -387,7 +404,7 @@ var L = (e) => {
 };
 //#endregion
 //#region packages/dom/src/measure.ts
-function R(e, t) {
+function z(e, t) {
 	let n = {
 		width: 0,
 		height: 0
@@ -399,7 +416,7 @@ function R(e, t) {
 			};
 			(i.width !== n.width || i.height !== n.height) && (n = i, t(i));
 		} catch {}
-	}, [i, a] = L(r);
+	}, [i, a] = R(r);
 	r();
 	let o = new ResizeObserver(i);
 	return o.observe(e), {
@@ -411,15 +428,15 @@ function R(e, t) {
 }
 //#endregion
 //#region packages/react/src/hooks/useMeasure.ts
-var z = {
+var B = {
 	width: 0,
 	height: 0
 };
-function B(t) {
-	let [n, r] = e.useState(z), i = e.useRef(null);
+function V(t) {
+	let [n, r] = e.useState(B), i = e.useRef(null);
 	e.useLayoutEffect(() => {
 		if (typeof window > "u" || !t.current) return;
-		let e = R(t.current, (e) => {
+		let e = z(t.current, (e) => {
 			r((t) => t.width === e.width && t.height === e.height ? t : e);
 		});
 		return i.current = e, () => {
@@ -436,7 +453,7 @@ function B(t) {
 }
 //#endregion
 //#region packages/dom/src/viewport.ts
-function V() {
+function H() {
 	return typeof window > "u" ? {} : {
 		viewportWidth: window.innerWidth,
 		viewportHeight: window.innerHeight
@@ -444,13 +461,13 @@ function V() {
 }
 //#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]);
+function U(t, n) {
+	let { width: r } = V(t);
+	return e.useMemo(() => j(r, n, H()), [n, r]);
 }
 //#endregion
 //#region packages/react/src/hooks/useIsClient.ts
-function U() {
+function W() {
 	let [e, n] = r(!1);
 	return t(() => {
 		n(!0);
@@ -458,55 +475,68 @@ function U() {
 }
 //#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 });
+function G({ children: e, fallback: t = null }) {
+	return W() ? /* @__PURE__ */ a(i, { children: e }) : /* @__PURE__ */ a(i, { children: t });
 }
 //#endregion
 //#region packages/react/src/utils/merge.ts
-function G(...e) {
+function K(...e) {
 	return Object.assign({}, ...e.filter(Boolean));
 }
-var K = {
+//#endregion
+//#region packages/react/src/utils/dom.ts
+function q(e, t) {
+	return Object.fromEntries(Object.entries(e).filter(([e, n]) => t[e] !== n));
+}
+var J = {
 	gde: "gde_4PKz3",
 	v: "v_yAvN0",
 	h: "h_XcWcy",
 	line: "line_UaLjW",
 	cols: "cols_ibtT4",
 	col: "col_QPSDI",
+	pattern: "pattern_8ihi5",
+	auto: "auto_xzTBc",
+	fixed: "fixed_g2rOO",
+	compactFixed: "compactFixed_C3AMS",
 	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),
+}, Y = 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 = I("guide"), v = r ?? g.variant, y = typeof o == "number" ? o : 0, { isShown: b } = L(t, g.debugging);
+	if (!b) return /* @__PURE__ */ a("div", {
+		className: w(J.gde, J.h, J[v], e),
 		style: n,
-		"data-testid": "guide",
-		"data-variant": _,
+		"data-testid": g.domDiagnostics ? "guide" : void 0,
+		"data-variant": g.domDiagnostics ? v : void 0,
 		"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": _,
+	let x = /* @__PURE__ */ a("div", {
+		className: w(J.gde, J.h, J.ssr, J[v], e),
+		style: K(q({
+			width: _(c ?? "100%"),
+			height: _(s ?? "100%"),
+			maxWidth: _(d ?? "none")
+		}, {
+			width: "100%",
+			height: "100%",
+			maxWidth: "none"
+		}), n),
+		"data-testid": g.domDiagnostics ? "guide" : void 0,
+		"data-variant": g.domDiagnostics ? v : void 0,
 		"aria-hidden": "true",
+		...h,
 		children: p
 	});
-	return m ? b : /* @__PURE__ */ a(W, {
-		fallback: b,
-		children: /* @__PURE__ */ a(J, {
+	return m ? x : /* @__PURE__ */ a(G, {
+		fallback: x,
+		children: /* @__PURE__ */ a(X, {
 			className: e,
 			debugging: t,
 			style: n,
-			variant: _,
+			variant: v,
 			align: i,
-			gap: v,
+			gap: y,
 			height: s,
 			width: c,
 			columns: l,
@@ -517,70 +547,94 @@ var K = {
 			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
+}), X = e.memo(function({ className: t, debugging: n, style: r, variant: i, align: c = "center", gap: l, height: u, width: d, columns: f, columnWidth: p, maxWidth: m, color: h, children: g, ..._ }) {
+	let v = I("guide"), { isShown: y } = L(n, v.debugging), b = e.useRef(null);
+	V(b);
+	let x = i ?? v.variant, S = typeof l == "number" ? l : 0, { template: C, columnsCount: T, calculatedGap: E } = U(b, e.useMemo(() => N({
+		variant: x,
+		base: v.base,
+		gap: S,
+		columns: f,
+		columnWidth: p
 	}), [
-		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
+		v.base,
+		S,
+		f,
+		p
+	])), D = M({
+		variant: x,
+		columns: f,
+		columnWidth: p,
+		gap: S,
+		align: c,
+		domDiagnostics: v.domDiagnostics,
+		className: t,
+		style: r
+	}), O = e.useMemo(() => F({
+		base: v.base,
+		colors: v.colors,
+		variant: x,
+		align: c || "center",
+		width: d,
+		height: u,
+		columnWidth: p,
+		maxWidth: m,
+		color: h,
+		template: C,
+		columnsCount: T,
+		calculatedGap: E,
+		isVisible: y
 	}), [
-		_.base,
-		_.colors,
-		b,
-		s,
+		v.base,
+		v.colors,
+		x,
+		c,
+		d,
 		u,
-		l,
-		f,
 		p,
 		m,
-		S,
+		h,
 		C,
 		T,
-		v
-	]), D = e.useMemo(() => G(E.containerStyle, r), [E.containerStyle, r]);
+		E,
+		y
+	]), k = e.useMemo(() => K(q(O.containerStyle, {
+		"--bkgd-w": "100%",
+		"--bkgd-h": "100%",
+		"--bkgd-mw": "none",
+		"--bkgd-cw": "60px",
+		"--bkgd-n": "12",
+		"--bkgd-b": "0",
+		"--bkgd-cl": s.guide.colors.line,
+		"--bkgd-cp": s.guide.colors.pattern,
+		"--bkgd-ca": s.guide.colors.auto,
+		"--bkgd-cf": s.guide.colors.fixed,
+		"--bkgd-g": "0px",
+		"--bkgd-j": "center",
+		"--bkgd-t": "none",
+		"--bkgd-line-color": "var(--bkgd-cl)"
+	}), r), [O.containerStyle, r]);
 	return /* @__PURE__ */ o("div", {
-		ref: y,
-		"data-testid": "guide",
+		ref: b,
+		"data-testid": v.domDiagnostics ? "guide" : void 0,
 		"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
+		className: w(...O.classTokens.map((e) => J[e]), !O.classTokens.includes(x) && J[x], t),
+		"data-variant": v.domDiagnostics ? x : void 0,
+		style: k,
+		..._,
+		children: [y && /* @__PURE__ */ a("div", {
+			className: w(J.cols, J[x], D && J.compactFixed),
+			"data-variant": v.domDiagnostics ? x : void 0,
+			children: !O.isLineVariant && !D && Array.from({ length: O.columnsCount }, (e, t) => /* @__PURE__ */ a("div", {
+				className: w(J.col, J[x]),
+				"data-column-index": v.domDiagnostics ? t : void 0,
+				"data-variant": v.domDiagnostics ? x : void 0
 			}, t))
-		}), h]
+		}), g]
 	});
 });
 //#endregion
-export { h as Config, q as Guide, u as createCSSVariables, l as mergeConfig };
+export { h as Config, Y as Guide, u as createCSSVariables, l as mergeConfig };
 
 //# sourceMappingURL=guide.mjs.map