@mkbabb/glass-ui 6.0.0 → 8.0.0

package/dist/drawer.js

@@ -1,443 +0,0 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { t } from "./motionTempo-CMS5b0Vu.js";
-import { t as n } from "./useSurfaceAxis-DudiZVOR.js";
-import { t as r } from "./createContext-FU0n5MGK.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, onScopeDispose as p, onUnmounted as m, openBlock as h, ref as g, renderSlot as _, toRef as v, unref as y, watch as b, withCtx as x } from "vue";
-import { DialogClose as S, DialogContent as C, DialogDescription as w, DialogOverlay as T, DialogPortal as E, DialogRoot as D, DialogTitle as O, DialogTrigger as k, useForwardPropsEmits as A } from "reka-ui";
-import { SpringProgress as j } from "@mkbabb/keyframes.js";
-//#region src/components/drawer/constants.ts
-var M = {
-	response: .32,
-	dampingFraction: .8
-}, N = [
-	.12,
-	.5,
-	1
-];
-function P(e) {
-	return e === "left" || e === "right" ? [] : N;
-}
-//#endregion
-//#region src/components/drawer/composables/drawerSnapContext.ts
-var F = r("glass-ui:drawer-snap-context"), { KEY: I } = F;
-function L(e) {
-	F.provide(e);
-}
-var R = F.use, z = /* @__PURE__ */ u({
-	__name: "Drawer",
-	props: {
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		defaultOpen: {
-			type: Boolean,
-			default: !1
-		},
-		modal: {
-			type: Boolean,
-			default: void 0
-		},
-		mode: { default: "modal" },
-		snapPoints: { default: void 0 },
-		activeSnapPoint: { default: void 0 },
-		direction: { default: "bottom" },
-		stage: { default: void 0 }
-	},
-	emits: ["update:open", "update:activeSnapPoint"],
-	setup(e, { emit: t }) {
-		let n = e, r = t, o = i(() => n.open !== void 0), s = g(n.open ?? n.defaultOpen);
-		b(() => n.open, (e) => {
-			e !== void 0 && (s.value = e);
-		});
-		function c(e) {
-			s.value = e, r("update:open", e);
-		}
-		let l = i(() => o.value ? n.open : s.value), u = i(() => n.mode === "live-behind"), d = i(() => n.modal ?? !u.value), f = typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, m = i(() => {
-			let e = n.stage ?? (u.value ? "none" : "scale");
-			return f && (e === "scale" || e === "immersive") ? "dim" : e;
-		});
-		function S(e) {
-			if (typeof document > "u") return;
-			let t = document.querySelector("[data-stage-wrapper]"), n = document.querySelector("[data-stage-scrim]"), r = e && (m.value === "scale" || m.value === "immersive"), i = e && m.value === "immersive";
-			t && t.toggleAttribute("data-stage-scale", r), n && n.toggleAttribute("data-stage-immersive", i);
-		}
-		b(() => l.value, (e) => S(e), { immediate: !0 }), b(m, () => S(l.value)), p(() => S(!1));
-		let C = i(() => n.snapPoints === void 0 ? u.value ? P(n.direction) : [] : n.snapPoints.map((e) => typeof e == "number" ? e : Number.parseFloat(e))), w = g(n.activeSnapPoint ?? null);
-		b(() => n.activeSnapPoint, (e) => {
-			e !== void 0 && (w.value = e);
-		}), b(w, (e) => r("update:activeSnapPoint", e));
-		let T = g(l.value);
-		return b(l, (e) => T.value = e), b(T, (e) => {
-			e !== l.value && c(e);
-		}), L({
-			open: T,
-			snapPoints: C,
-			direction: v(n, "direction"),
-			mode: v(n, "mode"),
-			activeSnapPoint: w
-		}), (e, t) => (h(), a(y(D), {
-			"data-slot": "drawer",
-			open: l.value,
-			modal: d.value,
-			"onUpdate:open": c
-		}, {
-			default: x(() => [_(e.$slots, "default")]),
-			_: 3
-		}, 8, ["open", "modal"]));
-	}
-}), B = /* @__PURE__ */ u({
-	__name: "DrawerOverlay",
-	props: {
-		forceMount: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(t) {
-		let n = t, r = i(() => {
-			let { class: e, ...t } = n;
-			return t;
-		});
-		return (t, i) => (h(), a(y(T), d(r.value, {
-			"data-stage-scrim": "",
-			class: y(e)("fixed inset-0 z-overlay [backdrop-filter:var(--glass-blur-wash)]", n.class)
-		}), null, 16, ["class"]));
-	}
-});
-//#endregion
-//#region src/components/drawer/composables/useDrawerSnap.ts
-function V(e) {
-	return e === "left" || e === "right";
-}
-function H(e, t) {
-	return e.length > 0 ? [...e].sort((e, t) => e - t) : V(t) ? [0, 1] : [1];
-}
-function U(e, t) {
-	let n = t[0], r = Math.abs(e - n);
-	for (let i of t) {
-		let t = Math.abs(e - i);
-		t < r && (n = i, r = t);
-	}
-	return n;
-}
-function W(e, t, n) {
-	let r = n.indexOf(e);
-	if (r === -1) return U(e, n);
-	let i = r + t;
-	return i < 0 || i >= n.length ? e : n[i];
-}
-function G(e) {
-	let { contentEl: n, handleEl: r, ctx: i } = e, a = g(!1), o = null, s = null, c = null;
-	function l() {
-		if (typeof document > "u") return [];
-		s?.isConnected || (s = document.querySelector("[data-stage-scrim]")), c?.isConnected || (c = document.querySelector("[data-stage-wrapper]"));
-		let e = [];
-		return s && e.push(s), c && e.push(c), e;
-	}
-	function u(e) {
-		let t = n();
-		t && (t.style.setProperty("--glass-drawer-t", `${e}`), t.style.setProperty("--stage-t", `${e}`));
-		for (let t of l()) t.style.setProperty("--stage-t", `${e}`);
-	}
-	function d() {
-		o &&= (o.dispose(), null);
-		let e = n();
-		e && e.style.removeProperty("--stage-t"), s && s.style.removeProperty("--stage-t"), c && c.style.removeProperty("--stage-t"), s = null, c = null;
-	}
-	function f(e) {
-		return o || (o = new j({
-			response: M.response * t(n()),
-			dampingFraction: M.dampingFraction,
-			initial: e ?? p(),
-			respectReducedMotion: !0
-		}), o.play((e) => u(e)), o);
-	}
-	function p() {
-		let e = i.activeSnapPoint.value;
-		if (typeof e == "number") return e;
-		if (typeof e == "string") {
-			let t = Number.parseFloat(e);
-			if (!Number.isNaN(t)) return t;
-		}
-		let t = H(i.snapPoints.value, i.direction.value);
-		return t[t.length - 1] ?? 1;
-	}
-	function h(e) {
-		let t = f();
-		t.play((e) => u(e)), t.target = e, i.activeSnapPoint.value = e;
-	}
-	function _(e) {
-		h(U(e, H(i.snapPoints.value, i.direction.value)));
-	}
-	let v = null, y = 0, x = 0, S = 0, C = 0, w = 0;
-	function T(e) {
-		let t = i.direction.value;
-		return t === "bottom" ? -e.clientY : t === "top" ? e.clientY : t === "left" ? e.clientX : -e.clientX;
-	}
-	let E = 1;
-	function D() {
-		let e = n();
-		if (!e) return 1;
-		let t = e.getBoundingClientRect();
-		return V(i.direction.value) ? t.width || 1 : t.height || 1;
-	}
-	function O(e) {
-		let t = r.value;
-		t && (o && o.stop(), a.value = !0, v = e.pointerId, y = T(e), S = y, C = e.timeStamp, x = p(), w = 0, E = D(), t.setPointerCapture?.(e.pointerId));
-	}
-	function k(e) {
-		if (v === null || e.pointerId !== v) return;
-		let t = T(e), n = (e.timeStamp - C) / 1e3;
-		n > 0 && (w = (t - S) / n), S = t, C = e.timeStamp;
-		let r = (t - y) / E, a = H(i.snapPoints.value, i.direction.value), o = a[0], s = a[a.length - 1];
-		u(Math.min(s, Math.max(o, x + r)));
-	}
-	function A(e) {
-		if (v === null || e.pointerId !== v) return;
-		r.value?.releasePointerCapture?.(e.pointerId), v = null, a.value = !1;
-		let t = H(i.snapPoints.value, i.direction.value), n = N();
-		f().reset(n, 0);
-		let o;
-		if (Math.abs(w) >= 450 && t.length > 1) {
-			let e = w > 0 ? 1 : -1;
-			o = W(U(n, t), e, t);
-		} else o = U(n, t);
-		if (o <= 0) {
-			i.open.value = !1;
-			return;
-		}
-		h(o);
-	}
-	function N() {
-		let e = n();
-		if (!e) return p();
-		let t = e.style.getPropertyValue("--glass-drawer-t"), r = Number.parseFloat(t);
-		return Number.isNaN(r) ? p() : r;
-	}
-	let P = null;
-	function F(e) {
-		e.addEventListener("pointerdown", O), e.addEventListener("pointermove", k), e.addEventListener("pointerup", A), e.addEventListener("pointercancel", A), P = () => {
-			e.removeEventListener("pointerdown", O), e.removeEventListener("pointermove", k), e.removeEventListener("pointerup", A), e.removeEventListener("pointercancel", A), P = null;
-		};
-	}
-	return b(r, (e) => {
-		P?.(), e && F(e);
-	}, { immediate: !0 }), b(i.open, (e) => {
-		e ? queueMicrotask(() => {
-			u(0), f(0), h(p());
-		}) : d();
-	}, { immediate: !0 }), b(i.activeSnapPoint, (e) => {
-		if (!i.open.value || a.value) return;
-		let t = typeof e == "number" ? e : typeof e == "string" ? Number.parseFloat(e) : NaN;
-		if (!Number.isNaN(t) && (!o || Math.abs(o.target - t) > .001)) {
-			let e = H(i.snapPoints.value, i.direction.value);
-			f().target = U(t, e);
-		}
-	}), m(() => {
-		P?.(), d();
-	}), {
-		dragging: a,
-		snapTo: _
-	};
-}
-//#endregion
-//#region src/components/drawer/DrawerContent.vue?vue&type=script&setup=true&lang.ts
-var K = [
-	"data-dragging",
-	"aria-orientation",
-	"aria-valuemin",
-	"aria-valuemax",
-	"aria-valuenow",
-	"aria-valuetext"
-], q = /* @__PURE__ */ u({
-	inheritAttrs: !1,
-	__name: "DrawerContent",
-	props: {
-		forceMount: { type: Boolean },
-		disableOutsidePointerEvents: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		showOverlay: {
-			type: Boolean,
-			default: !0
-		},
-		surface: { default: "glass" }
-	},
-	emits: [
-		"escapeKeyDown",
-		"pointerDownOutside",
-		"focusOutside",
-		"interactOutside",
-		"openAutoFocus",
-		"closeAutoFocus"
-	],
-	setup(t, { emit: r }) {
-		let u = t, f = r, p = A(i(() => {
-			let { class: e, showOverlay: t, surface: n, ...r } = u;
-			return r;
-		}), f), m = i(() => n(u.surface)), v = g(null), b = g(null), S = () => (v.value ?? b.value)?.closest("[data-glass-drawer]") ?? null, w = R(), T = w ? G({
-			contentEl: S,
-			handleEl: v,
-			ctx: w
-		}) : null, D = i(() => (w?.snapPoints.value.length ?? 0) > 1), O = i(() => [...w?.snapPoints.value ?? []].sort((e, t) => e - t)), k = i(() => {
-			let e = w?.activeSnapPoint.value, t = typeof e == "number" ? e : Number.parseFloat(String(e));
-			return Number.isNaN(t) ? Math.max(0, O.value.length - 1) : O.value.reduce((e, n, r) => Math.abs(n - t) < Math.abs(O.value[e] - t) ? r : e, 0);
-		}), j = i(() => O.value[k.value] ?? 1), M = i(() => `${Math.round(j.value * 100)}%, position ${k.value + 1} of ${O.value.length}`), N = i(() => w?.direction.value ?? "bottom"), P = i(() => w?.mode.value ?? "modal");
-		function F(e) {
-			if (!T || !D.value) return;
-			let t = O.value.length - 1, n = k.value;
-			if (e.key === "Home") n = 0;
-			else if (e.key === "End") n = t;
-			else if (e.key === "ArrowUp" || e.key === "ArrowRight") n = Math.min(t, n + 1);
-			else if (e.key === "ArrowDown" || e.key === "ArrowLeft") n = Math.max(0, n - 1);
-			else return;
-			e.preventDefault(), T.snapTo(O.value[n]);
-		}
-		let I = i(() => {
-			if (!w) return;
-			let e = N.value;
-			return e === "bottom" ? { transform: "translateY(calc((1 - var(--glass-drawer-t, 0)) * 100%))" } : e === "top" ? { transform: "translateY(calc((var(--glass-drawer-t, 0) - 1) * 100%))" } : e === "left" ? { transform: "translateX(calc((var(--glass-drawer-t, 0) - 1) * 100%))" } : { transform: "translateX(calc((1 - var(--glass-drawer-t, 0)) * 100%))" };
-		});
-		return (t, n) => (h(), a(y(E), null, {
-			default: x(() => [u.showOverlay ? (h(), a(B, { key: 0 })) : o("", !0), l(y(C), d({
-				...y(p),
-				...t.$attrs
-			}, {
-				"data-glass-drawer": "",
-				"data-mode": P.value,
-				"data-glass-drawer-snap-points": D.value ? "true" : void 0,
-				"data-glass-drawer-direction": N.value,
-				"data-surface": u.surface,
-				class: y(e)("glass-drawer glass-overlay", m.value, u.class),
-				"data-material": "transient-overlay",
-				style: I.value
-			}), {
-				default: x(() => [
-					c("span", {
-						ref_key: "contentAnchorEl",
-						ref: b,
-						hidden: ""
-					}, null, 512),
-					D.value ? (h(), s("div", {
-						key: 0,
-						ref_key: "handleEl",
-						ref: v,
-						class: "glass-drawer-handle",
-						"data-glass-drawer-handle": "",
-						"data-dragging": y(T)?.dragging.value ? "" : void 0,
-						role: "slider",
-						tabindex: "0",
-						"aria-label": "Drawer position",
-						"aria-orientation": N.value === "left" || N.value === "right" ? "horizontal" : "vertical",
-						"aria-valuemin": O.value[0],
-						"aria-valuemax": O.value[O.value.length - 1],
-						"aria-valuenow": j.value,
-						"aria-valuetext": M.value,
-						onKeydown: F
-					}, [...n[0] ||= [c("span", {
-						class: "glass-drawer-grip",
-						"aria-hidden": "true"
-					}, null, -1)]], 40, K)) : o("", !0),
-					_(t.$slots, "default")
-				]),
-				_: 3
-			}, 16, [
-				"data-mode",
-				"data-glass-drawer-snap-points",
-				"data-glass-drawer-direction",
-				"data-surface",
-				"class",
-				"style"
-			])]),
-			_: 3
-		}));
-	}
-}), J = /* @__PURE__ */ u({
-	__name: "DrawerHeader",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (h(), s("div", { class: f(y(e)("[--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] [--card-pad-title-gap:calc(var(--overlay-pad-inline)/2.618)]", "grid gap-(--card-pad-title-gap) px-(--overlay-pad-inline) pt-(--overlay-pad-block) pb-0 text-center sm:text-left", n.class)) }, [_(t.$slots, "default")], 2));
-	}
-}), Y = /* @__PURE__ */ u({
-	__name: "DrawerFooter",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (h(), s("div", { class: f(y(e)("[--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] [--card-pad-footer:calc(var(--overlay-pad-block)/1.618)]", "mt-auto flex flex-col gap-2 px-(--overlay-pad-inline) pt-(--card-pad-footer) pb-(--overlay-pad-block)", n.class)) }, [_(t.$slots, "default")], 2));
-	}
-}), X = /* @__PURE__ */ u({
-	__name: "DrawerTitle",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(t) {
-		let n = t, r = i(() => {
-			let { class: e, ...t } = n;
-			return t;
-		});
-		return (t, i) => (h(), a(y(O), d(r.value, { class: y(e)("text-subheading leading-none tracking-tight", n.class) }), {
-			default: x(() => [_(t.$slots, "default")]),
-			_: 3
-		}, 16, ["class"]));
-	}
-}), Z = /* @__PURE__ */ u({
-	__name: "DrawerDescription",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(t) {
-		let n = t, r = i(() => {
-			let { class: e, ...t } = n;
-			return t;
-		});
-		return (t, i) => (h(), a(y(w), d(r.value, { class: y(e)("text-sm text-muted-foreground", n.class) }), {
-			default: x(() => [_(t.$slots, "default")]),
-			_: 3
-		}, 16, ["class"]));
-	}
-});
-//#endregion
-export { z as Drawer, S as DrawerClose, q as DrawerContent, Z as DrawerDescription, Y as DrawerFooter, J as DrawerHeader, X as DrawerTitle, k as DrawerTrigger };