@mkbabb/glass-ui 5.0.0 → 6.0.0

package/dist/controls.js

@@ -1,17 +1,13 @@
 import { t as e } from "./class-names-5jotTFzp.js";
 import { t } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { t as n } from "./useGlobalDark-DjKMEQE2.js";
-import { computed as r, createBlock as i, createElementVNode as a, defineComponent as o, mergeProps as s, openBlock as c, ref as l, resolveDynamicComponent as u, useAttrs as d, watchEffect as f, withCtx as p } from "vue";
-//#endregion
-//#region src/components/controls/DarkModeToggle.vue
-var m = /* @__PURE__ */ t(/* @__PURE__ */ o({
+import { i as n } from "./dark-DIH-blY1.js";
+import { computed as r, createElementBlock as i, createStaticVNode as a, defineComponent as o, mergeProps as s, onBeforeUnmount as c, openBlock as l, ref as u, useAttrs as d, watch as f, watchEffect as p } from "vue";
+import { useMediaQuery as m } from "@vueuse/core";
+//#region src/components/controls/DarkModeToggle.vue?vue&type=script&setup=true&lang.ts
+var h = ["data-size", "data-eclipsing"], g = /* @__PURE__ */ t(/* @__PURE__ */ o({
 	inheritAttrs: !1,
 	__name: "DarkModeToggle",
 	props: {
-		passive: {
-			type: Boolean,
-			default: !1
-		},
 		size: { default: "md" },
 		disableTransitions: {
 			type: Boolean,
@@ -23,69 +19,65 @@ var m = /* @__PURE__ */ t(/* @__PURE__ */ o({
 		}
 	},
 	setup(t) {
-		let o = t, m = d(), h = l(!1), g = typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches, _ = null, v = !1;
-		function y() {
-			_ !== null && (clearTimeout(_), _ = null);
+		let o = t, g = d(), _ = u(!1), v = m("(prefers-reduced-motion: reduce)"), y = null, b = null, x = !1;
+		function S() {
+			y !== null && (clearTimeout(y), y = null);
 		}
-		function b() {
-			!o.eclipse || o.passive || (v = !1, y(), _ = setTimeout(() => {
-				v = !0, _ = null, g || (h.value = !0, window.setTimeout(() => h.value = !1, 1700)), T();
+		function C() {
+			b !== null && (clearTimeout(b), b = null), _.value = !1;
+		}
+		function w() {
+			o.eclipse && (x = !1, S(), y = setTimeout(() => {
+				x = !0, y = null, v.value || (_.value = !0, b = window.setTimeout(C, 1700)), j();
 			}, 460));
 		}
-		function x() {
-			y();
+		function T() {
+			S();
+		}
+		function E(e) {
+			e.key === " " && !e.repeat && w();
 		}
-		function S(e) {
-			if (o.eclipse && v) {
-				e.preventDefault(), e.stopPropagation(), v = !1;
+		function D(e) {
+			e.key === " " && T();
+		}
+		function O(e) {
+			if (o.eclipse && x) {
+				e.preventDefault(), e.stopPropagation(), x = !1;
 				return;
 			}
-			o.passive || T();
+			j();
 		}
-		let C = r(() => e("dark-mode-toggle-button", "relative isolate inline-flex shrink-0 items-center justify-center", "cursor-pointer border-0 bg-transparent", "rounded-pill", "opacity-80", "focus-ring", m.class)), { isDark: w, toggleDark: T, setDisableTransitions: E } = n(), D = r(() => {
-			let { class: e, ...t } = m;
-			return o.passive ? t : {
-				type: "button",
-				"aria-label": w.value ? "Switch to light mode" : "Switch to dark mode",
-				"aria-pressed": w.value ? "true" : "false",
-				...t
+		f(v, (e) => {
+			e && C();
+		}), c(() => {
+			S(), C();
+		});
+		let k = r(() => e("dark-mode-toggle-button", "relative isolate inline-flex shrink-0 items-center justify-center", "cursor-pointer border-0 bg-transparent", "rounded-pill", "opacity-80", "focus-ring", g.class)), { isDark: A, toggleDark: j, setDisableTransitions: M } = n(), N = r(() => {
+			let { class: e, type: t, ...n } = g;
+			return {
+				"aria-label": A.value ? "Switch to light mode" : "Switch to dark mode",
+				"aria-pressed": A.value,
+				...n
 			};
 		});
-		return f(() => {
-			E(o.disableTransitions);
-		}), (e, n) => (c(), i(u(t.passive ? "div" : "button"), s({
-			class: C.value,
+		return p(() => {
+			M(o.disableTransitions);
+		}), (e, n) => (l(), i("button", s({
+			type: "button",
+			class: k.value,
 			"data-size": o.size,
-			"data-eclipsing": t.eclipse && h.value ? "true" : void 0
-		}, D.value, {
-			onClick: S,
-			onPointerdown: b,
-			onPointerup: x,
-			onPointerleave: x,
-			onPointercancel: x
-		}), {
-			default: p(() => [...n[0] ||= [a("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				viewBox: "0 0 472.39 472.39",
-				class: "block h-full w-full fill-foreground"
-			}, [a("g", {
-				class: "toggle-sun",
-				"data-allow-motion": ""
-			}, [a("path", { d: "M403.21,167V69.18H305.38L236.2,0,167,69.18H69.18V167L0,236.2l69.18,69.18v97.83H167l69.18,69.18,69.18-69.18h97.83V305.38l69.18-69.18Zm-167,198.17a129,129,0,1,1,129-129A129,129,0,0,1,236.2,365.19Z" })]), a("g", {
-				class: "toggle-circle",
-				"data-allow-motion": ""
-			}, [a("circle", {
-				cx: "236.2",
-				cy: "236.2",
-				r: "90"
-			})])], -1)]]),
-			_: 1
-		}, 16, [
-			"class",
-			"data-size",
-			"data-eclipsing"
-		]));
+			"data-eclipsing": t.eclipse && _.value ? "true" : void 0
+		}, N.value, {
+			onClick: O,
+			onPointerdown: w,
+			onPointerup: T,
+			onPointerleave: T,
+			onPointercancel: T,
+			onKeydown: E,
+			onKeyup: D,
+			onBlur: T
+		}), [...n[0] ||= [a("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 472.39 472.39\" class=\"block h-full w-full fill-foreground\" data-v-82cc93de><g class=\"toggle-sun\" data-allow-motion data-v-82cc93de><path d=\"M403.21,167V69.18H305.38L236.2,0,167,69.18H69.18V167L0,236.2l69.18,69.18v97.83H167l69.18,69.18,69.18-69.18h97.83V305.38l69.18-69.18Zm-167,198.17a129,129,0,1,1,129-129A129,129,0,0,1,236.2,365.19Z\" data-v-82cc93de></path></g><g class=\"toggle-circle\" data-allow-motion data-v-82cc93de><circle cx=\"236.2\" cy=\"236.2\" r=\"90\" data-v-82cc93de></circle></g></svg>", 1)]], 16, h));
 	}
-}), [["__scopeId", "data-v-8e7fc1f3"]]);
+}), [["__scopeId", "data-v-82cc93de"]]);
 //#endregion
-export { m as DarkModeToggle };
+export { g as DarkModeToggle };

package/dist/{createCanvasLifecycle-DlrcvWbb.js → createCanvasLifecycle-hsFkQVdl.js}

@@ -55,58 +55,58 @@ function t(e) {
 	function c() {
 		i?.removeEventListener("contentvisibilityautostatechange", a), i = null;
 	}
-	let l = null, u = !1;
-	function d() {
-		u || (u = !0, e.resize(), typeof requestAnimationFrame < "u" && requestAnimationFrame(() => {
-			e.isDisposed() || (e.resize(), requestAnimationFrame(() => {
-				e.isDisposed() || e.resize();
+	let l = null, u = !1, d = 0;
+	function f() {
+		u || (u = !0, e.resize(), typeof requestAnimationFrame < "u" && (d = requestAnimationFrame(() => {
+			d = 0, !e.isDisposed() && (e.resize(), d = requestAnimationFrame(() => {
+				d = 0, e.isDisposed() || e.resize();
 			}));
-		}), typeof ResizeObserver < "u" && !l && (l = new ResizeObserver(() => {
+		})), typeof ResizeObserver < "u" && !l && (l = new ResizeObserver(() => {
 			e.isDisposed() || e.resize();
 		}), l.observe(t)));
 	}
-	let f = null, p = !1;
-	function m() {
-		!e.composeIntersectionPark || f || typeof IntersectionObserver > "u" || (f = new IntersectionObserver((t) => {
+	let p = null, m = !1;
+	function h() {
+		!e.composeIntersectionPark || p || typeof IntersectionObserver > "u" || (p = new IntersectionObserver((t) => {
 			let n = t[t.length - 1];
-			n && (n.isIntersecting || n.intersectionRatio > 0 ? p && (p = !1, e.resume("off-screen-io"), e.isArmed() && e.hasHooks() && e.resize(), e.wake()) : (p = !0, e.suspend("off-screen-io")));
+			n && (n.isIntersecting || n.intersectionRatio > 0 ? m && (m = !1, e.resume("off-screen-io"), e.isArmed() && e.hasHooks() && e.resize(), e.wake()) : (m = !0, e.suspend("off-screen-io")));
 		}, {
 			rootMargin: e.intersectionRootMargin ?? "256px",
 			threshold: 0
-		}), f.observe(t));
-	}
-	function h() {
-		f?.disconnect(), f = null;
+		}), p.observe(t));
 	}
 	function g() {
-		s(), m();
+		p?.disconnect(), p = null;
 	}
-	let _ = !1, v = null;
-	function y() {
-		_ || (_ = !0, v?.disconnect(), v = null, !(e.isDisposed() || typeof t.setAttribute != "function") && t.setAttribute("data-substrate-reveal", ""));
+	function _() {
+		s(), h();
 	}
-	function b() {
-		if (!(!e.revealBloom || _ || e.isReducedMotion()) && typeof t.setAttribute == "function") {
+	let v = !1, y = null, b = 0;
+	function x() {
+		v || (v = !0, y?.disconnect(), y = null, !(e.isDisposed() || typeof t.setAttribute != "function") && t.setAttribute("data-substrate-reveal", ""));
+	}
+	function S() {
+		if (!(!e.revealBloom || v || e.isReducedMotion()) && typeof t.setAttribute == "function") {
 			if (typeof IntersectionObserver > "u") {
-				typeof requestAnimationFrame < "u" ? requestAnimationFrame(() => {
-					e.isDisposed() || y();
-				}) : y();
+				typeof requestAnimationFrame < "u" ? b = requestAnimationFrame(() => {
+					b = 0, e.isDisposed() || x();
+				}) : x();
 				return;
 			}
-			v = new IntersectionObserver((e) => {
+			y = new IntersectionObserver((e) => {
 				let t = e[e.length - 1];
-				t && (t.isIntersecting || t.intersectionRatio > 0) && y();
-			}, { threshold: 0 }), v.observe(t);
+				t && (t.isIntersecting || t.intersectionRatio > 0) && x();
+			}, { threshold: 0 }), y.observe(t);
 		}
 	}
-	function x() {
-		n && document.removeEventListener("visibilitychange", r), c(), h(), v?.disconnect(), v = null, l?.disconnect(), l = null;
+	function C() {
+		typeof cancelAnimationFrame < "u" && (d && cancelAnimationFrame(d), b && cancelAnimationFrame(b)), d = 0, b = 0, n && document.removeEventListener("visibilitychange", r), c(), g(), y?.disconnect(), y = null, l?.disconnect(), l = null;
 	}
 	return {
-		presize: d,
-		bindPark: g,
-		armRevealBloom: b,
-		dispose: x
+		presize: f,
+		bindPark: _,
+		armRevealBloom: S,
+		dispose: C
 	};
 }
 var n = 2e3;

package/dist/dark-DIH-blY1.js

@@ -0,0 +1,70 @@
+import { nextTick as e, ref as t, watch as n } from "vue";
+import { createGlobalState as r, useDark as i, useToggle as a } from "@vueuse/core";
+//#region src/composables/dark/useGlobalDark.ts
+var o, s = r(() => {
+	let e = i({
+		initialValue: o,
+		disableTransition: !1
+	}), r = a(e), s = t(!1);
+	function c() {
+		s.value && document.documentElement.classList.add("no-transition"), r(), s.value && requestAnimationFrame(() => {
+			document.documentElement.classList.remove("no-transition");
+		});
+	}
+	function l(e) {
+		s.value = e;
+	}
+	let u = /* @__PURE__ */ new Set(), d = !1, f = !1;
+	function p(e) {
+		if (u.size === 0 || (f = e, d)) return;
+		d = !0;
+		let t = () => {
+			d = !1;
+			let e = f;
+			for (let t of [...u]) t(e);
+		};
+		typeof requestAnimationFrame == "function" ? requestAnimationFrame(t) : setTimeout(t, 0);
+	}
+	function m(e) {
+		return u.add(e), () => {
+			u.delete(e);
+		};
+	}
+	return n(e, (e) => {
+		document.documentElement.style.colorScheme = e ? "dark" : "light";
+	}, { immediate: !0 }), n(e, (e) => {
+		p(e);
+	}), {
+		isDark: e,
+		toggleDark: c,
+		disableTransitions: s,
+		setDisableTransitions: l,
+		onFlipSettled: m
+	};
+});
+function c(e) {
+	if (e?.initialValue !== void 0) {
+		if (o === void 0) o = e.initialValue;
+		else if (o !== e.initialValue) throw Error(`[glass-ui] useGlobalDark({ initialValue: "${e.initialValue}" }) conflicts: the singleton was already constructed with initialValue "${o}". The seed is ONE-SHOT — set it on the FIRST useGlobalDark() call only.`);
+	}
+	return s();
+}
+//#endregion
+//#region src/composables/dark/installDarkModeSync.ts
+function l(t) {
+	let { isDark: r } = c();
+	n(r, () => {
+		e(() => {
+			requestAnimationFrame(t);
+		});
+	});
+}
+//#endregion
+//#region src/composables/dark/darkModeSyncScript.ts
+var u = "vueuse-color-scheme", d = "dark";
+function f(e = {}) {
+	let t = e.storageKey ?? "vueuse-color-scheme";
+	return `(function(){try{var m=localStorage.getItem(${JSON.stringify(t)});var d=m==="${d}"||((m===null||m==="auto")&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches);var e=document.documentElement;e.classList.toggle("${d}",d);e.style.colorScheme=d?"dark":"light";}catch(_){}})();`;
+}
+//#endregion
+export { c as i, f as n, l as r, u as t };

package/dist/dark.d.ts

@@ -1,2 +1 @@
-export { useGlobalDark, installDarkModeSync, darkModeSyncScript, DARK_MODE_STORAGE_KEY, } from "./composables/dark";
-export type { UseGlobalDarkOptions, UseGlobalDarkReturn, DarkFlipSettledCallback, DarkModeSyncScriptOptions, } from "./composables/dark";
+export * from "./composables/dark";

package/dist/dark.js

@@ -1,20 +1,2 @@
-import { t as e } from "./useGlobalDark-DjKMEQE2.js";
-import { nextTick as t, watch as n } from "vue";
-//#region src/composables/dark/installDarkModeSync.ts
-function r(r) {
-	let { isDark: i } = e();
-	n(i, () => {
-		t(() => {
-			requestAnimationFrame(r);
-		});
-	});
-}
-//#endregion
-//#region src/composables/dark/darkModeSyncScript.ts
-var i = "vueuse-color-scheme", a = "dark";
-function o(e = {}) {
-	let t = e.storageKey ?? "vueuse-color-scheme";
-	return `(function(){try{var m=localStorage.getItem(${JSON.stringify(t)});var d=m==="${a}"||((m===null||m==="auto")&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches);var e=document.documentElement;e.classList.toggle("${a}",d);e.style.colorScheme=d?"dark":"light";}catch(_){}})();`;
-}
-//#endregion
-export { i as DARK_MODE_STORAGE_KEY, o as darkModeSyncScript, r as installDarkModeSync, e as useGlobalDark };
+import { i as e, n as t, r as n, t as r } from "./dark-DIH-blY1.js";
+export { r as DARK_MODE_STORAGE_KEY, t as darkModeSyncScript, n as installDarkModeSync, e as useGlobalDark };