@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/chip.js

@@ -0,0 +1,81 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { t } from "./useAccentTone-D25DxviG.js";
+import { computed as n, createBlock as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, withCtx as l } from "vue";
+import { Toggle as u, useForwardPropsEmits as d } from "reka-ui";
+import { cva as f } from "class-variance-authority";
+//#region src/components/chip/chipVariants.ts
+var p = f([
+	"glass-chip glass-capsule glass-capsule-hover accent-tone",
+	"focus-ring select-none cursor-pointer outline-none font-sans",
+	"text-muted-foreground",
+	"disabled:opacity-disabled disabled:pointer-events-none disabled:cursor-not-allowed"
+].join(" "), {
+	variants: {
+		size: {
+			sm: "inline-flex items-center justify-center gap-1 px-2.5 py-1 text-caption",
+			md: "inline-flex items-center justify-center gap-1.5 px-3.5 py-1.5 text-small",
+			lg: "inline-flex items-center justify-center gap-2 px-5 py-2 text-base"
+		},
+		shape: {
+			pill: "",
+			cell: "glass-chip--cell flex flex-col items-center justify-center gap-1.5 px-2 py-2.5 text-micro"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		shape: "pill"
+	}
+}), m = /* @__PURE__ */ i({
+	name: "Chip",
+	__name: "Chip",
+	props: {
+		defaultValue: { type: Boolean },
+		modelValue: { type: [Boolean, null] },
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		shape: {},
+		size: {},
+		tone: {},
+		surface: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(i, { emit: f }) {
+		let m = i, h = f, { toneStyle: g } = t(() => m.tone ?? "var(--primary)"), _ = d(() => {
+			let { class: e, tone: t, size: n, shape: r, surface: i, ...a } = m;
+			return a;
+		}, h), v = n(() => e(p({
+			size: m.size,
+			shape: m.shape
+		}), m.class)), y = n(() => {
+			if (m.tone !== void 0) return {
+				...g.value,
+				"--glass-fill-tint": m.tone,
+				"--glass-fill-strength": "var(--chip-glass-strength, 12%)"
+			};
+		});
+		return (e, t) => (o(), r(c(u), a(c(_), {
+			class: v.value,
+			style: y.value,
+			"data-surface": m.surface
+		}), {
+			default: l(() => [s(e.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"class",
+			"style",
+			"data-surface"
+		]));
+	}
+});
+//#endregion
+export { m as Chip, p as chipVariants };

package/dist/class-names-5jotTFzp.js

@@ -0,0 +1,97 @@
+import { clsx as e } from "clsx";
+//#region src/components/_shared/class-names.ts
+function t(...t) {
+	return a(e(t));
+}
+var n = [
+	["font-size", /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/],
+	["font-size", /^text-(micro|small|caption|body|prose|admin-label|heading|subheading|title|display|display-hero|display-mega|display-audacious|display-2|display-3|display-4|display-5|hero|math|math-body|mono-caption|mono-small|mono-prose|mono-micro)$/],
+	["font-weight", /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/],
+	["font-family", /^font-(sans|serif|mono)$/],
+	["font-style", /^(italic|not-italic)$/],
+	["text-align", /^text-(left|center|right|justify|start|end)$/],
+	["text-transform", /^(uppercase|lowercase|capitalize|normal-case)$/],
+	["text-decoration", /^(underline|overline|line-through|no-underline)$/],
+	["text-color", /^text-/],
+	["padding-x", /^px-/],
+	["padding-y", /^py-/],
+	["padding-t", /^pt-/],
+	["padding-r", /^pr-/],
+	["padding-b", /^pb-/],
+	["padding-l", /^pl-/],
+	["padding-s", /^ps-/],
+	["padding-e", /^pe-/],
+	["padding", /^p-/],
+	["margin-x", /^-?mx-/],
+	["margin-y", /^-?my-/],
+	["margin-t", /^-?mt-/],
+	["margin-r", /^-?mr-/],
+	["margin-b", /^-?mb-/],
+	["margin-l", /^-?ml-/],
+	["margin-s", /^-?ms-/],
+	["margin-e", /^-?me-/],
+	["margin", /^-?m-/],
+	["gap-x", /^gap-x-/],
+	["gap-y", /^gap-y-/],
+	["gap", /^gap-/],
+	["width", /^w-/],
+	["height", /^h-/],
+	["min-width", /^min-w-/],
+	["min-height", /^min-h-/],
+	["max-width", /^max-w-/],
+	["max-height", /^max-h-/],
+	["size", /^size-/],
+	["bg-color", /^bg-/],
+	["border-color", /^border-(?:[a-z]+-\d+|black|white|transparent|current|inherit)/],
+	["border-width", /^border(?:-x|-y|-t|-r|-b|-l|-s|-e)?(?:-\d+|-0|)$/],
+	["ring-color", /^ring-(?:[a-z]+-\d+|black|white|transparent)/],
+	["ring-width", /^ring(?:-\d+|-0|)$/],
+	["rounded", /^rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full|t|r|b|l|tl|tr|bl|br))?$/],
+	["display", /^(block|inline-block|inline|flex|inline-flex|grid|inline-grid|table|hidden|contents|flow-root)$/],
+	["position", /^(static|fixed|absolute|relative|sticky)$/],
+	["overflow", /^overflow-(auto|hidden|clip|visible|scroll)$/],
+	["overflow-x", /^overflow-x-/],
+	["overflow-y", /^overflow-y-/],
+	["flex", /^flex-(1|auto|none|initial)$/],
+	["flex-direction", /^flex-(row|row-reverse|col|col-reverse)$/],
+	["flex-wrap", /^flex-(wrap|wrap-reverse|nowrap)$/],
+	["items", /^items-/],
+	["justify", /^justify-/],
+	["self", /^self-/],
+	["place-items", /^place-items-/],
+	["place-content", /^place-content-/],
+	["opacity", /^opacity-/],
+	["z-index", /^-?z-/],
+	["cursor", /^cursor-/],
+	["pointer-events", /^pointer-events-/],
+	["select", /^select-/],
+	["shadow", /^shadow(?:-|$)/]
+];
+function r(e) {
+	let t = e.lastIndexOf(":"), n = t === -1 ? "" : e.slice(0, t + 1), r = t === -1 ? e : e.slice(t + 1);
+	return r.startsWith("!") && (r = r.slice(1)), {
+		scope: n,
+		core: r
+	};
+}
+function i(e) {
+	for (let [t, r] of n) if (r.test(e)) return t;
+	return null;
+}
+function a(e) {
+	if (!e) return "";
+	let t = e.split(/\s+/).filter(Boolean);
+	if (t.length === 0) return "";
+	let n = /* @__PURE__ */ new Map(), a = Array(t.length).fill(!0);
+	for (let e = 0; e < t.length; e += 1) {
+		let o = t[e], { scope: s, core: c } = r(o), l = i(c);
+		if (l === null) continue;
+		let u = `${s}|${l}`, d = n.get(u);
+		d !== void 0 && (a[d] = !1), n.set(u, e);
+	}
+	let o = [];
+	for (let e = 0; e < t.length; e += 1) a[e] && o.push(t[e]);
+	return o.join(" ");
+}
+//#endregion
+export { t };

package/dist/coalesce-metric-B8o7zT9u.js

@@ -0,0 +1,13 @@
+//#region src/components/metric/coalesce-metric.ts
+var e = "—";
+function t(e, t = "—") {
+	return e == null || e === "" ? {
+		display: t,
+		isEmpty: !0
+	} : {
+		display: String(e),
+		isEmpty: !1
+	};
+}
+//#endregion
+export { t as n, e as t };

package/dist/collapsible.d.ts

@@ -1 +1 @@
-export * from "./components/ui/collapsible";
+export * from "./components/collapsible";

package/dist/collapsible.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./CollapsibleContent-D7UNsXQr.js";
+import { n as e, r as t, t as n } from "./CollapsibleContent-DiHcB_HH.js";
 export { t as Collapsible, n as CollapsibleContent, e as CollapsibleTrigger };

package/dist/color-Bp5jmv4Z.js

@@ -0,0 +1,86 @@
+import { colorUnit2 as e, gamutMapOKLab as t, interpolateHue as n, isInSRGBGamut as r, oklabToLinearSRGB as i, oklabToRgb255 as a, parseCSSColor as o, rawOklabToOklch as s, rawOklchToOklab as c, srgbToOKLab as l } from "@mkbabb/value.js";
+//#region src/composables/color/index.ts
+function u(e) {
+	let [t, n, r] = c(e.L, e.C, e.h), [a, o, s] = i(t, n, r);
+	return [
+		Math.max(0, a),
+		Math.max(0, o),
+		Math.max(0, s)
+	];
+}
+function d(e, t, n) {
+	if (!Number.isFinite(e) || !Number.isFinite(t) || !Number.isFinite(n)) throw Error(`warmCatchLight: non-finite OKLCh anchor (L=${e}, C=${t}, h=${n})`);
+	return u({
+		L: e,
+		C: t,
+		h: n
+	});
+}
+function f(e) {
+	let [t, n, r] = c(e.L, e.C, e.h), [i, o, s] = a(t, n, r), l = (e) => Math.min(1, Math.max(0, e / 255));
+	return [
+		l(i),
+		l(o),
+		l(s)
+	];
+}
+function p(t) {
+	let n = e(o(t), "rgb").value, [r, i, a] = l(Number(n.r), Number(n.g), Number(n.b)), [c, u, d] = s(r, i, a);
+	return {
+		L: c,
+		C: u,
+		h: d
+	};
+}
+function m(e) {
+	let [t, n, r] = c(e.L, e.C, e.h), [i, o, s] = a(t, n, r), l = (e) => Math.round(e).toString(16).padStart(2, "0");
+	return `#${l(i)}${l(o)}${l(s)}`;
+}
+var h = (e) => f(p(e)), g = {
+	complementary: "longer",
+	"split-complementary": "longer",
+	analogous: "shorter",
+	monochrome: "shorter",
+	triad: "increasing",
+	tetradic: "increasing"
+}, _ = (e) => (e % 360 + 360) % 360;
+function v(e, t, r, i) {
+	let a = g[t], o = (e, t) => _(n(_(e) / 360, _(t) / 360, i, a) * 360);
+	switch (t) {
+		case "monochrome": return _(e);
+		case "complementary": return o(e, e + 180);
+		case "split-complementary": return o(e + 150, e + 210);
+		case "triad": return o(e, e + 240);
+		case "tetradic": return o(e, e + 270);
+		default: return o(e - r, e + r);
+	}
+}
+function y(e) {
+	let [n, a, o] = c(e.L, e.C, e.h), [l, u, d] = t(n, a, o), [f, p, m] = s(l, u, d), h = p;
+	for (let e = 0; e < 6; e++) {
+		let [e, t, n] = c(f, h, m), [a, o, s] = i(e, t, n);
+		if (r(a, o, s)) break;
+		h *= .999;
+	}
+	return {
+		L: f,
+		C: h,
+		h: m
+	};
+}
+function b(e, t = {}) {
+	let n = typeof e == "string" ? p(e) : e, { stopCount: r = 3, harmony: i = "analogous", lightnessSpread: a = .18, hueSpread: o = 24, chromaBump: s = .03, chromaCeiling: c, bodyLightness: l, lightnessFloor: u } = t, d = l === void 0 ? n.L - a / 2 : l, f = u === void 0 ? .05 : u, m = Math.max(2, Math.min(4, Math.round(r))), h = [];
+	for (let e = 0; e < m; e++) {
+		let t = m === 1 ? 0 : e / (m - 1), r = d + a * t, l = Math.max(0, n.C + s * Math.sin(Math.PI * t));
+		c !== void 0 && (l = Math.min(l, c));
+		let u = v(n.h, i, o, t);
+		h.push(y({
+			L: Math.min(.98, Math.max(f, r)),
+			C: l,
+			h: u
+		}));
+	}
+	return h;
+}
+//#endregion
+export { y as a, u as c, v as i, d as l, h as n, m as o, b as r, f as s, p as t };

package/dist/color-swatch.d.ts

@@ -1 +1 @@
-export * from "./components/custom/color-swatch";
+export * from "./components/color-swatch";

package/dist/color-swatch.js

@@ -1,6 +1,6 @@
-import { t as e } from "./cn-DJXf4yaB.js";
+import { t as e } from "./class-names-5jotTFzp.js";
 import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, normalizeClass as c, normalizeStyle as l, openBlock as u, toDisplayString as d, unref as f, useModel as p } from "vue";
-//#region src/components/custom/color-swatch/ColorSwatch.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/color-swatch/ColorSwatch.vue?vue&type=script&setup=true&lang.ts
 var m = ["value"], h = {
 	key: 0,
 	class: "color-swatch__hex text-mono-caption tabular-nums uppercase text-muted-foreground"

package/dist/color.js

@@ -1,2 +1,3 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./color-B9jZdhJX.js";
-export { c as cssToOklch, i as defaultBlobColorResolver, o as deriveBlobPalette, n as deriveHue, e as gamutMapStop, a as oklchStopToHex, s as oklchToGammaRgb, t as oklchToLinear, l as useAccentTone, r as warmCatchLight };
+import { t as e } from "./useAccentTone-D25DxviG.js";
+import { a as t, c as n, i as r, l as i, n as a, o, r as s, s as c, t as l } from "./color-Bp5jmv4Z.js";
+export { l as cssToOklch, a as defaultBlobColorResolver, s as deriveBlobPalette, r as deriveHue, t as gamutMapStop, o as oklchStopToHex, c as oklchToGammaRgb, n as oklchToLinear, e as useAccentTone, i as warmCatchLight };

package/dist/command.d.ts

@@ -1 +1 @@
-export * from "./components/ui/command";
+export * from "./components/command";

package/dist/command.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./CommandShortcut-By-VQcLO.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./CommandShortcut-fmdbsEJL.js";
 export { r as Command, t as CommandDialog, s as CommandEmpty, a as CommandGroup, e as CommandInput, n as CommandItem, o as CommandList, i as CommandSeparator, c as CommandShortcut };

package/dist/completion-seal.d.ts

@@ -1 +1 @@
-export * from "./components/custom/completion-seal";
+export * from "./components/completion-seal";

package/dist/completion-seal.js

@@ -1,16 +1,16 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { computed as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeClass as a, onMounted as o, openBlock as s, readonly as c, ref as l, toDisplayString as u, toRef as d, unref as f, watch as p } from "vue";
-//#region src/components/custom/completion-seal/composables/useCompletionSeal.ts
-function m() {
+import { t as e } from "./class-names-5jotTFzp.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, onMounted as c, openBlock as l, readonly as u, ref as d, toDisplayString as f, toRef as p, unref as m, watch as h } from "vue";
+//#region src/components/completion-seal/composables/useCompletionSeal.ts
+function g() {
 	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function h(e) {
+function _(e) {
 	if (e != null) return typeof e == "function" ? e() : e.value;
 }
-function g(e = {}) {
-	let { play: n, respectReducedMotion: r = !0 } = e, i = l(!1), a = l(!1), s = t(() => r && m());
-	function u() {
-		if (s.value) {
+function v(e = {}) {
+	let { play: t, respectReducedMotion: r = !0 } = e, i = d(!1), a = d(!1), o = n(() => r && g());
+	function s() {
+		if (o.value) {
 			i.value = !1, a.value = !0;
 			return;
 		}
@@ -18,72 +18,106 @@ function g(e = {}) {
 			i.value = !0, a.value = !0;
 		}) : (i.value = !0, a.value = !0);
 	}
-	return n == null ? o(u) : (o(() => {
-		h(n) && u();
-	}), p(() => h(n), (e, t) => {
-		e && !t && u();
+	return t == null ? c(s) : (c(() => {
+		_(t) && s();
+	}), h(() => _(t), (e, t) => {
+		e && !t && s();
 	})), {
-		playing: c(i),
-		drawn: c(a),
-		reduced: c(s),
-		draw: u
+		playing: u(i),
+		drawn: u(a),
+		reduced: u(o),
+		draw: s
 	};
 }
-var _ = "0 0 64 64", v = {
+var y = "0 0 64 64", b = {
 	check: "M16 33 L28 45 L48 19",
 	wordmark: "M14 30 L26 42 L50 16 M14 50 L50 50"
-}, y = {
+}, x = {
 	cx: 32,
 	cy: 32,
 	r: 24
-}, b = [
+}, S = {
+	cx: 32,
+	cy: 32,
+	r: 21
+}, C = [
 	"data-shape",
+	"data-best",
 	"data-play",
 	"data-drawn"
-], x = ["viewBox"], S = [
+], w = ["viewBox"], T = [
+	"cx",
+	"cy",
+	"r"
+], E = [
 	"cx",
 	"cy",
 	"r"
-], C = ["d"], w = {
+], D = ["d"], O = [
+	"cx",
+	"cy",
+	"r"
+], k = ["d"], A = {
 	key: 0,
 	class: "sr-only"
-}, T = /* @__PURE__ */ i({
+}, j = /* @__PURE__ */ o({
 	name: "CompletionSeal",
 	__name: "CompletionSeal",
 	props: {
 		shape: {},
 		label: {},
 		play: { type: Boolean },
+		personalBest: { type: Boolean },
 		class: {}
 	},
-	setup(i) {
-		let o = i, c = t(() => o.shape ?? "check"), l = t(() => c.value === "wordmark" ? v.wordmark : v.check), { playing: p, drawn: m } = g({ play: o.play === void 0 ? void 0 : d(o, "play") });
-		return (t, i) => (s(), r("div", {
-			class: a(["completion-seal", f(e)(o.class)]),
-			"data-shape": c.value,
-			"data-play": f(p) ? "" : void 0,
-			"data-drawn": f(m) ? "" : void 0,
+	setup(o) {
+		let c = o, u = n(() => c.shape ?? "check"), d = n(() => u.value === "wordmark" ? b.wordmark : b.check), { playing: h, drawn: g } = v({ play: c.play === void 0 ? void 0 : p(c, "play") });
+		return (n, o) => (l(), i("div", {
+			class: s(["completion-seal", m(e)(c.class)]),
+			"data-shape": u.value,
+			"data-best": c.personalBest ? "" : void 0,
+			"data-play": m(h) ? "" : void 0,
+			"data-drawn": m(g) ? "" : void 0,
 			role: "status",
 			"aria-live": "polite"
-		}, [(s(), r("svg", {
+		}, [(l(), i("svg", {
 			class: "completion-seal__svg",
-			viewBox: f(_),
+			viewBox: m(y),
 			"aria-hidden": "true",
 			focusable: "false"
-		}, [c.value === "ring" ? (s(), r("circle", {
-			key: 0,
+		}, [u.value === "disc" ? (l(), i(t, { key: 0 }, [
+			a("circle", {
+				class: "completion-seal__disc",
+				cx: m(S).cx,
+				cy: m(S).cy,
+				r: m(S).r
+			}, null, 8, T),
+			a("circle", {
+				class: "completion-seal__mark completion-seal__ring",
+				cx: m(x).cx,
+				cy: m(x).cy,
+				r: m(x).r,
+				pathLength: "100"
+			}, null, 8, E),
+			a("path", {
+				class: "completion-seal__mark completion-seal__check",
+				d: m(b).check,
+				pathLength: "100"
+			}, null, 8, D)
+		], 64)) : u.value === "ring" ? (l(), i("circle", {
+			key: 1,
 			class: "completion-seal__mark",
-			cx: f(y).cx,
-			cy: f(y).cy,
-			r: f(y).r,
+			cx: m(x).cx,
+			cy: m(x).cy,
+			r: m(x).r,
 			pathLength: "100"
-		}, null, 8, S)) : (s(), r("path", {
-			key: 1,
+		}, null, 8, O)) : (l(), i("path", {
+			key: 2,
 			class: "completion-seal__mark",
-			d: l.value,
+			d: d.value,
 			pathLength: "100"
-		}, null, 8, C))], 8, x)), o.label ? (s(), r("span", w, u(o.label), 1)) : n("", !0)], 10, b));
+		}, null, 8, k))], 8, w)), c.label ? (l(), i("span", A, f(c.label), 1)) : r("", !0)], 10, C));
 	}
 });
 //#endregion
-export { T as CompletionSeal, g as useCompletionSeal };
+export { j as CompletionSeal, v as useCompletionSeal };

package/dist/components/_shared/axes.d.ts

@@ -0,0 +1,21 @@
+export type { Surface, SurfaceTier } from "./useSurfaceAxis";
+/** The scale axis — one honest ordinal; rung names ≡ the `--control-h-*` token cohort. */
+export declare const SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
+export type Size = (typeof SIZES)[number];
+/** The layout axis — the inline `"horizontal" | "vertical"` copies factor onto this, zero value change. */
+export declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type Orientation = (typeof ORIENTATIONS)[number];
+/** The motion-weight axis — opt-DOWN, not opt-in (liquid-weight universal). */
+export declare const MOTIONS: readonly ["full", "reduced", "off"];
+export type Motion = (typeof MOTIONS)[number];
+/** The surface-decoration axis — mirrors `useSurfaceAxis`'s `Surface` (gate-asserted ≡). */
+export declare const SURFACES: readonly ["glass", "veil", "opaque"];
+/** The tone axis — the semantic status register (`--<tone>` token cohort); NEVER a `variant` member. */
+export declare const TONES: readonly ["neutral", "success", "warning", "info", "destructive"];
+export type Tone = (typeof TONES)[number];
+/** The overlay-placement axis — Sheet's side-slide + Dialog center fold onto ONE placement. */
+export declare const PLACEMENTS: readonly ["center", "top", "right", "bottom", "left"];
+export type Placement = (typeof PLACEMENTS)[number];
+/** The overlay-trigger axis — click | hover | context (the sealed Popover Kronecker fold). */
+export declare const TRIGGERS: readonly ["click", "hover", "context"];
+export type Trigger = (typeof TRIGGERS)[number];

package/dist/components/_shared/class-names.d.ts

@@ -0,0 +1,27 @@
+import { type ClassValue } from "clsx";
+/**
+ * `cn()` — class-name compositor for glass-ui components.
+ *
+ * Rationale (W3.b.2 / A5 §3 Split 6): `tailwind-merge` ships ~22 KB
+ * gzipped of full Tailwind config to resolve every conflict pair across
+ * the framework. Glass-ui exercises a small, stable subset of Tailwind
+ * utilities; the conflict surface is enumerable. We replace twMerge with
+ * a hand-rolled deduplicator that handles the ~30 conflict pairs glass-ui
+ * actually relies on, paying ~0.5 KB gzipped instead.
+ *
+ * Semantics: clsx normalises the variadic argument shape (strings,
+ * arrays, conditional objects, falsy filtering). The deduplicator then
+ * walks the joined string left-to-right, computes each token's
+ * conflict-key (the CSS-property bucket the utility writes to), and
+ * keeps only the last token per bucket. Variant prefixes like
+ * `hover:`, `md:`, `dark:`, `[&::after]:` carry their own conflict
+ * scope: a bucket-key incorporates the prefix so `text-sm md:text-lg`
+ * keeps both. `!`-important tokens scope identically to their
+ * non-important twin (`!p-2 p-4` keeps `p-4` — last-write-wins ignores
+ * importance, mirroring twMerge's behaviour for the cases glass-ui hits).
+ *
+ * Tokens that don't match a known bucket pass through untouched (custom
+ * classes, arbitrary-value utilities like `[&::after]:hidden`, anything
+ * not in the conflict table).
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/components/_shared/index.d.ts

@@ -0,0 +1,6 @@
+export { menuItemVariants } from "./menuItemVariants";
+export type { MenuItemVariants } from "./menuItemVariants";
+export { surfaceClass, decorationClass } from "./useSurfaceAxis";
+export type { Surface, SurfaceTier } from "./useSurfaceAxis";
+export { controlSizeClass, switchSizeClass } from "./useControlSize";
+export type { ControlSize } from "./useControlSize";

package/dist/components/_shared/menuItemVariants.d.ts

@@ -0,0 +1,51 @@
+import { type VariantProps } from "class-variance-authority";
+/**
+ * `menuItemVariants` — canonical CVA shared by 9 menu-family + picker-family
+ * primitives. Promotes the four-state contract (hover / focus / data-highlighted /
+ * data-disabled) above reka-ui's base classes so consumer-side overrides win
+ * via `cn()`'s tailwind-merge ordering.
+ *
+ * Substrate composition:
+ * - `interactive-item` (utilities.css) provides `border-radius: var(--radius-lg)`,
+ *   the active-scale (`:active { transform: scale(0.98); }`), the focus-visible
+ *   box-shadow ring, and the `data-disabled` paint extension (V.W3 patch — the
+ *   :disabled pseudo doesn't fire on reka-ui's `data-disabled="true"` attr,
+ *   so utilities.css now paints both).
+ *
+ * Three input modes paint identical hover/focus accent:
+ * - `:hover` — pointer hover.
+ * - `:focus` — keyboard focus (also handled at the substrate via :focus-visible).
+ * - `[data-highlighted]` — reka-ui's internal navigation highlight (Combobox /
+ *   Command / Select families emit this attr instead of relying on browser focus).
+ *
+ * The CVA composes ABOVE reka-ui's base classes (R4 §4.2 pre-empt): consumer
+ * SFCs call `menuItemVariants(...)` last in the `cn()` chain so any radius /
+ * background / spacing the upstream library writes is overridden.
+ *
+ * Indicator slot variants reserve the gutter for radio-dot / check / chevron
+ * indicator spans the consumer SFCs render absolutely-positioned.
+ *
+ * Surface axis (BA.W-MENU-GLASS) — the menu-row's MATERIAL register, an
+ * EXPRESSION of the shared {glass·veil·opaque} surface-decoration axis
+ * (`_shared/useSurfaceAxis.ts` / `glass/surface-axis.css`), NOT a second axis:
+ * - `glass` (DEFAULT, glass-first canon AX.W54) — the `.glass-menu-row` recipe
+ *   (`src/styles/menu.css`): the hover / focus / `data-highlighted` / open states
+ *   paint the ELEMENT-LEVEL glass-quiet oklab tint (so the row darkens-over-light
+ *   AND lifts-over-dark per W-DARK-MATERIAL's tint arm) + a PRM-gated `translateY`
+ *   hover-lift, the 44px touch floor, the iOS-grade glassy hover-lift plate. The
+ *   flat `bg-accent` utilities are DROPPED on this arm — the cascade-trap-safe
+ *   shape: with no unlayered `hover:bg-accent` utility the ONLY background-painters
+ *   are the `@layer components` `.interactive-item:hover` accent rule and the
+ *   `.glass-menu-row` recipe (imported AFTER utilities.css so it source-order-wins
+ *   at equal specificity+layer — the AZ dock-rail `@layer`-loses-to-utility trap
+ *   pre-empted: never re-add an unlayered flat-accent utility here).
+ * - `accent` — the EXPLICIT flat-accent escape (the prior default's look). A clean
+ *   break, NOT a back-compat alias (BA inv-7): a consumer that wants the flat fill
+ *   opts in via `surface="accent"`.
+ */
+export declare const menuItemVariants: (props?: ({
+    surface?: "glass" | "accent" | null | undefined;
+    indicator?: "start" | "none" | "start-wide" | null | undefined;
+    size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MenuItemVariants = VariantProps<typeof menuItemVariants>;

package/dist/components/_shared/useControlSize.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The shared control-size axis — three rungs, ONE grammar. The meaningful
+ * control-size hierarchy rungs the input register needs (Button's `xs`/icon rungs
+ * are Button-specific — an input has no icon-only register, so they are NOT here).
+ *
+ *   sm      — the quieter/secondary control: the `--control-h-sm` height +
+ *             `--control-text-sm` font (shorter + quieter).
+ *   md      — the canonical golden pill: the `--control-h-md` height +
+ *             `--control-text` font (byte-identical to HEAD).
+ *   lg      — the primary/emphatic control: the `--control-h-lg` height with the
+ *             base `--control-text` font (taller, same workhorse weight — matching
+ *             Button's `lg`, where only the height grows).
+ */
+export type ControlSize = "sm" | "md" | "lg";
+/**
+ * Resolve a `ControlSize` to the element-level token-override class string the
+ * `.input-pill` recipe reads. The `md` rung emits NO override (so the recipe
+ * falls back to the cohort `--control-h-md` / `--control-text` — byte-identical to
+ * HEAD); `sm`/`lg` re-point `--control-pill-h` / `--control-pill-text` to the
+ * chosen cohort rung.
+ *
+ *   controlSizeClass()        → ""                                              (golden md rung)
+ *   controlSizeClass("sm")    → "[--control-pill-h:var(--control-h-sm)] [--control-pill-text:var(--control-text-sm)]"
+ *   controlSizeClass("lg")    → "[--control-pill-h:var(--control-h-lg)]"
+ *
+ * @param size the control-size rung (`sm` · `md` · `lg`)
+ */
+export declare function controlSizeClass(size?: ControlSize): string;
+/**
+ * The Switch geometry rung. A Switch is a control-height-DERIVED geometry (the
+ * track/thumb/throw are NOT the bare cohort height — a switch track is shorter
+ * than an input), so it derives its `--switch-track-h` from the chosen
+ * `--control-h-*` rung (×0.6, the iOS proportion) and the rest of the
+ * `--switch-*` quad follows in Switch.vue:
+ *
+ *   --switch-thumb   = --switch-track-h − 0.25rem   (the 2px×2 track border)
+ *   --switch-track-w = --switch-track-h × 11/6      (the iOS track aspect)
+ *   --switch-throw   = --switch-track-w − --switch-thumb − 0.25rem
+ *
+ * The `md` rung (`--control-h-md`) resolves the HEAD `h-6 w-11` track +
+ * `h-5 w-5` thumb + `translate-x-5` throw EXACTLY (byte-identical). `sm`/`lg`
+ * re-point the anchor `--switch-track-h` so the whole quad scales in lockstep.
+ *
+ * @param size the control-size rung (`sm` · `md` · `lg`)
+ */
+export declare function switchSizeClass(size?: ControlSize): string;