@mkbabb/glass-ui 8.0.0 → 10.0.0

package/dist/dom.js

@@ -1,10 +1,92 @@
 import { t as e } from "./useResizeObserver-CdUlm2QZ.js";
-import { n as t, r as n, t as r } from "./useResolveTokenColor-CspQv_ik.js";
-import { t as i } from "./useDragVelocity-C5BkKiNf.js";
+import { t } from "./useTimer-C3yfti4C.js";
+import { t as n } from "./useDragVelocity-C5BkKiNf.js";
+import { n as r, t as i } from "./useResolveTokenColor-B2FfJnd9.js";
 import { n as a, t as o } from "./useClipboard-D36OTaeT.js";
 import { getCurrentScope as s, onMounted as c, onScopeDispose as l, readonly as u, ref as d, toValue as f, watch as p } from "vue";
+//#region src/composables/dom/useTouchGate.ts
+var m = /* @__PURE__ */ new Set(), h = !1;
+function g(e) {
+	for (let t of m) {
+		if (!t.isActive()) continue;
+		let n = t.controlEl();
+		n && !n.contains(e.target) && t.deactivate();
+	}
+}
+function _() {
+	h || typeof document > "u" || (document.addEventListener("touchstart", g, { passive: !0 }), h = !0);
+}
+function v() {
+	m.size > 0 || !h || typeof document > "u" || (document.removeEventListener("touchstart", g), h = !1);
+}
+function y(e = 3e3) {
+	let n = d(!1), r = typeof window < "u" && "ontouchstart" in window, i = null, a = null, o = !1, c = !1, u = t(() => {
+		x();
+	}, e, { immediate: !1 }), f = t(() => {
+		o && i && (o = !1, a = null, y(i));
+	}, 150, { immediate: !1 });
+	function p() {
+		u.stop();
+	}
+	function h() {
+		f.stop(), o = !1, a = null;
+	}
+	function g() {
+		p(), u.start(e);
+	}
+	function y(e) {
+		n.value = !0, e.style.touchAction = "none", g();
+	}
+	function b(e) {
+		if (c = e, e) {
+			p();
+			return;
+		}
+		g();
+	}
+	function x() {
+		c || (p(), h(), n.value = !1, i &&= (i.style.touchAction = "", null));
+	}
+	function S(e, t) {
+		return r ? (i = e, n.value ? (g(), !0) : (h(), o = !0, a = t, f.start(150), !1)) : !0;
+	}
+	function C(e) {
+		if (!r || !o || a === null) return;
+		let t = e.touches[0]?.clientY ?? 0;
+		Math.abs(t - a) > 10 && h();
+	}
+	function w() {
+		if (r) {
+			if (o && i) {
+				h(), y(i);
+				return;
+			}
+			n.value && g();
+		}
+	}
+	let T = {
+		isActive: () => n.value,
+		controlEl: () => i,
+		deactivate: x
+	};
+	r && (m.add(T), _());
+	function E() {
+		p(), h(), r && (m.delete(T), v()), i &&= (i.style.touchAction = "", null);
+	}
+	return s() && l(E), {
+		isActive: n,
+		isTouchDevice: r,
+		handleTouchStart: S,
+		handleScrollCheck: C,
+		handleTouchEnd: w,
+		resetTimer: g,
+		deactivate: x,
+		suppressDeactivate: b
+	};
+}
+//#endregion
 //#region src/composables/dom/useTokenColor.ts
-function m(e, t = {}) {
+function b(e, t = {}) {
 	let n = t.fallback ?? "", r = d(n), i = t.resolver ?? ((e, t) => getComputedStyle(t ?? document.documentElement).getPropertyValue(e));
 	function a() {
 		let r = f(e);
@@ -33,7 +115,7 @@ function m(e, t = {}) {
 }
 //#endregion
 //#region src/composables/dom/useUserInvalidAria.ts
-function h(e = {}) {
+function x(e = {}) {
 	return { bind: (e) => {
 		let t = /* @__PURE__ */ new WeakSet(), n = (e) => {
 			let t = e;
@@ -57,7 +139,7 @@ function h(e = {}) {
 }
 //#endregion
 //#region src/composables/dom/useBreakpoint.ts
-function g(e) {
+function S(e) {
 	let t = d(!1), n = null;
 	function r(e) {
 		t.value = e.matches;
@@ -75,7 +157,7 @@ function g(e) {
 }
 //#endregion
 //#region src/composables/dom/useIdleReady.ts
-function _(e = {}) {
+function C(e = {}) {
 	let t = e.timeout ?? 2e3, n = d(!1), r = null, i = null, a = !1;
 	function o() {
 		a || n.value || (n.value = !0, e.onReady?.(), c());
@@ -103,7 +185,7 @@ function _(e = {}) {
 }
 //#endregion
 //#region src/composables/dom/useViewportReady.ts
-function v(e, t = {}) {
+function w(e, t = {}) {
 	let n = t.rootMargin ?? "200px", r = t.idleTimeout ?? 1e4, i = t.threshold ?? .01, a = d(!1), o = null, c, u = null, f = null, m = !1;
 	function h() {
 		m || a.value || (a.value = !0, _());
@@ -153,4 +235,4 @@ function v(e, t = {}) {
 	};
 }
 //#endregion
-export { r as createTokenColorCache, t as resolveTokenColor, g as useBreakpoint, o as useClipboard, i as useDragVelocity, _ as useIdleReady, e as useResizeObserver, m as useTokenColor, n as useTouchGate, h as useUserInvalidAria, v as useViewportReady, a as writeClipboard };
+export { i as createTokenColorCache, r as resolveTokenColor, S as useBreakpoint, o as useClipboard, n as useDragVelocity, C as useIdleReady, e as useResizeObserver, b as useTokenColor, y as useTouchGate, x as useUserInvalidAria, w as useViewportReady, a as writeClipboard };

package/dist/easing.js

@@ -1,11 +1,11 @@
-import { t as e } from "./class-names-q-UGOkHH.js";
+import { t as e } from "./class-names-FlXcvRRT.js";
 import { t } from "./DotRing-Blh4Mc3Q.js";
 import { n } from "./useReducedMotion-vCXA_vyM.js";
-import { t as r } from "./button-yvGPb0Bx.js";
+import { t as r } from "./button-BOFTUPyU.js";
 import { t as i } from "./useClipboard-D36OTaeT.js";
-import { a, c as o, l as s, r as c, s as l } from "./select-CDgwGH_P.js";
-import { t as u } from "./slider-gsc8jDIo.js";
-import { t as d } from "./tabs-CYscnq5H.js";
+import { a, c as o, l as s, r as c, s as l } from "./select-fy3vtArm.js";
+import { t as u } from "./slider-5ChjjWSR.js";
+import { t as d } from "./tabs-rdRXKXxd.js";
 import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeModels as x, normalizeClass as S, onScopeDispose as C, onUnmounted as ee, openBlock as w, ref as T, renderList as E, toDisplayString as D, unref as O, useId as k, useModel as te, useTemplateRef as A, watch as ne, withCtx as j } from "vue";
 import { Check as re, Copy as ie, Play as ae, RotateCcw as oe, Square as se } from "@lucide/vue";
 import { parseTimingFunction as M } from "@mkbabb/value.js/css";

package/dist/expandable-container-CZUj9BzY.js

@@ -0,0 +1,142 @@
+import { registerShortcut as e } from "./keyboard.js";
+import { t } from "./focus-Duf7EpUu.js";
+import { Teleport as n, createBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, onUnmounted as u, openBlock as d, ref as f, renderSlot as p, unref as m, useModel as h, watch as g, withCtx as _ } from "vue";
+import { FocusScope as v } from "reka-ui";
+import { Maximize2 as y, Minimize2 as b } from "@lucide/vue";
+//#region src/components/expandable-container/ExpandableContainer.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"data-state",
+	"data-surface",
+	"role",
+	"aria-label",
+	"aria-modal"
+], S = ["hidden"], C = ["data-position", "aria-label"], w = ["hidden"], T = ["data-position", "aria-label"], E = { "data-part": "panel" }, D = 0, O = null;
+function k() {
+	return typeof document > "u" ? !1 : (D === 0 && (O = document.body.style.overflow, document.body.style.overflow = "hidden"), D += 1, !0);
+}
+function A() {
+	typeof document > "u" || D === 0 || (--D, D === 0 && (document.body.style.overflow = O ?? "", O = null));
+}
+//#endregion
+//#region src/components/expandable-container/ExpandableContainer.vue
+var j = /* @__PURE__ */ o({
+	inheritAttrs: !1,
+	__name: "ExpandableContainer",
+	props: /*@__PURE__*/ s({
+		buttonPosition: { default: "right" },
+		expandLabel: { default: "Fullscreen" },
+		collapseLabel: { default: "Exit fullscreen" },
+		surface: { default: "glass" }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(o) {
+		let s = h(o, "open"), D = f(null);
+		function O() {
+			let e = D.value?.$el;
+			return e instanceof HTMLElement ? e : null;
+		}
+		function j() {
+			s.value = !0;
+		}
+		function M() {
+			s.value = !1;
+		}
+		let N = !1, P = null, F = null;
+		function I(e) {
+			e && !N ? N = k() : !e && N && (A(), N = !1);
+		}
+		function L() {
+			(O()?.querySelector("[autofocus]") ?? O()?.querySelector("[data-mode=\"collapse\"]") ?? O()?.querySelector(t) ?? O())?.focus();
+		}
+		async function R() {
+			await l(), await l(), L();
+		}
+		let z = ["[data-mode=\"expand\"]", ...t.split(", ").map((e) => `.expandable-container__chrome:not([hidden]) ${e}`)].join(", ");
+		function B() {
+			let e = F?.isConnected ? F : O()?.querySelector(z);
+			F = null, e?.focus();
+		}
+		function V(e) {
+			e.preventDefault();
+		}
+		return g(s, (t, n) => {
+			if (I(t), t && !n) {
+				let t = typeof document < "u" ? document.activeElement : null;
+				F = t instanceof HTMLElement ? t : null, P = e("Escape", M, {
+					label: "Exit fullscreen",
+					group: "UI",
+					allowInInput: !0
+				}), R();
+			} else !t && n && (P?.(), P = null, l(B));
+		}, { immediate: !0 }), u(() => {
+			P?.(), P = null, I(!1);
+		}), (e, t) => (d(), r(n, {
+			to: "body",
+			disabled: !s.value
+		}, [a(m(v), {
+			ref_key: "scope",
+			ref: D,
+			"as-child": "",
+			loop: s.value,
+			trapped: s.value,
+			onMountAutoFocus: V
+		}, {
+			default: _(() => [i("div", c({
+				class: "expandable-container",
+				"data-state": s.value ? "expanded" : "collapsed",
+				"data-surface": s.value ? o.surface : void 0,
+				role: s.value ? "dialog" : void 0,
+				"aria-label": s.value ? o.expandLabel : void 0,
+				"aria-modal": s.value || void 0
+			}, e.$attrs), [
+				i("div", {
+					class: "expandable-container__chrome",
+					hidden: s.value
+				}, [p(e.$slots, "expand-trigger", {
+					expand: j,
+					label: o.expandLabel
+				}, () => [i("button", {
+					type: "button",
+					"data-part": "trigger",
+					"data-control-target": "",
+					"data-mode": "expand",
+					"data-position": o.buttonPosition,
+					"aria-label": o.expandLabel,
+					onClick: j
+				}, [a(m(y), {
+					class: "expandable-container__icon",
+					"aria-hidden": "true"
+				})], 8, C)])], 8, S),
+				i("div", {
+					class: "expandable-container__chrome",
+					hidden: !s.value
+				}, [p(e.$slots, "fullscreen-chrome", {
+					collapse: M,
+					label: o.collapseLabel,
+					fullscreen: !0
+				}, () => [i("button", {
+					type: "button",
+					"data-part": "trigger",
+					"data-control-target": "",
+					"data-mode": "collapse",
+					"data-position": o.buttonPosition,
+					"aria-label": o.collapseLabel,
+					onClick: M
+				}, [a(m(b), {
+					class: "expandable-container__icon",
+					"aria-hidden": "true"
+				})], 8, T)])], 8, w),
+				i("div", E, [p(e.$slots, "default", { fullscreen: s.value })])
+			], 16, x)]),
+			_: 3
+		}, 8, ["loop", "trapped"])], 8, ["disabled"]));
+	}
+});
+//#endregion
+export { j as t };

package/dist/expandable-container.js

@@ -1,142 +1,2 @@
-import { t as e } from "./focus-Duf7EpUu.js";
-import { registerShortcut as t } from "./keyboard.js";
-import { Teleport as n, createBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, onUnmounted as u, openBlock as d, ref as f, renderSlot as p, unref as m, useModel as h, watch as g, withCtx as _ } from "vue";
-import { FocusScope as v } from "reka-ui";
-import { Maximize2 as y, Minimize2 as b } from "@lucide/vue";
-//#region src/components/expandable-container/ExpandableContainer.vue?vue&type=script&setup=true&lang.ts
-var x = [
-	"data-state",
-	"data-surface",
-	"role",
-	"aria-label",
-	"aria-modal"
-], S = ["hidden"], C = ["data-position", "aria-label"], w = ["hidden"], T = ["data-position", "aria-label"], E = { "data-part": "panel" }, D = 0, O = null;
-function k() {
-	return typeof document > "u" ? !1 : (D === 0 && (O = document.body.style.overflow, document.body.style.overflow = "hidden"), D += 1, !0);
-}
-function A() {
-	typeof document > "u" || D === 0 || (--D, D === 0 && (document.body.style.overflow = O ?? "", O = null));
-}
-//#endregion
-//#region src/components/expandable-container/ExpandableContainer.vue
-var j = /* @__PURE__ */ o({
-	inheritAttrs: !1,
-	__name: "ExpandableContainer",
-	props: /*@__PURE__*/ s({
-		buttonPosition: { default: "right" },
-		expandLabel: { default: "Fullscreen" },
-		collapseLabel: { default: "Exit fullscreen" },
-		surface: { default: "glass" }
-	}, {
-		open: {
-			type: Boolean,
-			default: !1
-		},
-		openModifiers: {}
-	}),
-	emits: ["update:open"],
-	setup(o) {
-		let s = h(o, "open"), D = f(null);
-		function O() {
-			let e = D.value?.$el;
-			return e instanceof HTMLElement ? e : null;
-		}
-		function j() {
-			s.value = !0;
-		}
-		function M() {
-			s.value = !1;
-		}
-		let N = !1, P = null, F = null;
-		function I(e) {
-			e && !N ? N = k() : !e && N && (A(), N = !1);
-		}
-		function L() {
-			(O()?.querySelector("[autofocus]") ?? O()?.querySelector("[data-mode=\"collapse\"]") ?? O()?.querySelector(e) ?? O())?.focus();
-		}
-		async function R() {
-			await l(), await l(), L();
-		}
-		let z = ["[data-mode=\"expand\"]", ...e.split(", ").map((e) => `.expandable-container__chrome:not([hidden]) ${e}`)].join(", ");
-		function B() {
-			let e = F?.isConnected ? F : O()?.querySelector(z);
-			F = null, e?.focus();
-		}
-		function V(e) {
-			e.preventDefault();
-		}
-		return g(s, (e, n) => {
-			if (I(e), e && !n) {
-				let e = typeof document < "u" ? document.activeElement : null;
-				F = e instanceof HTMLElement ? e : null, P = t("Escape", M, {
-					label: "Exit fullscreen",
-					group: "UI",
-					allowInInput: !0
-				}), R();
-			} else !e && n && (P?.(), P = null, l(B));
-		}, { immediate: !0 }), u(() => {
-			P?.(), P = null, I(!1);
-		}), (e, t) => (d(), r(n, {
-			to: "body",
-			disabled: !s.value
-		}, [a(m(v), {
-			ref_key: "scope",
-			ref: D,
-			"as-child": "",
-			loop: s.value,
-			trapped: s.value,
-			onMountAutoFocus: V
-		}, {
-			default: _(() => [i("div", c({
-				class: ["expandable-container", { "glass-overlay": s.value }],
-				"data-state": s.value ? "expanded" : "collapsed",
-				"data-surface": s.value ? o.surface : void 0,
-				role: s.value ? "dialog" : void 0,
-				"aria-label": s.value ? o.expandLabel : void 0,
-				"aria-modal": s.value || void 0
-			}, e.$attrs), [
-				i("div", {
-					class: "expandable-container__chrome",
-					hidden: s.value
-				}, [p(e.$slots, "expand-trigger", {
-					expand: j,
-					label: o.expandLabel
-				}, () => [i("button", {
-					type: "button",
-					"data-part": "trigger",
-					"data-control-target": "",
-					"data-mode": "expand",
-					"data-position": o.buttonPosition,
-					"aria-label": o.expandLabel,
-					onClick: j
-				}, [a(m(y), {
-					class: "expandable-container__icon",
-					"aria-hidden": "true"
-				})], 8, C)])], 8, S),
-				i("div", {
-					class: "expandable-container__chrome",
-					hidden: !s.value
-				}, [p(e.$slots, "fullscreen-chrome", {
-					collapse: M,
-					label: o.collapseLabel,
-					fullscreen: !0
-				}, () => [i("button", {
-					type: "button",
-					"data-part": "trigger",
-					"data-control-target": "",
-					"data-mode": "collapse",
-					"data-position": o.buttonPosition,
-					"aria-label": o.collapseLabel,
-					onClick: M
-				}, [a(m(b), {
-					class: "expandable-container__icon",
-					"aria-hidden": "true"
-				})], 8, T)])], 8, w),
-				i("div", E, [p(e.$slots, "default", { fullscreen: s.value })])
-			], 16, x)]),
-			_: 3
-		}, 8, ["loop", "trapped"])], 8, ["disabled"]));
-	}
-});
-//#endregion
-export { j as ExpandableContainer };
+import { t as e } from "./expandable-container-CZUj9BzY.js";
+export { e as ExpandableContainer };