@mkbabb/glass-ui 5.0.0 → 6.0.0

package/dist/deck.js

@@ -1,4 +1,4 @@
-import { t as e } from "./PagerDots-BP6jh7z4.js";
+import { t as e } from "./PagerDots-BoTQ7g5l.js";
 import { computed as t, createBlock as n, defineComponent as r, mergeModels as i, onBeforeUnmount as a, onMounted as o, openBlock as s, ref as c, toValue as l, useModel as u } from "vue";
 //#region src/components/deck/composables/useDeck.ts
 function d(e, n = {}) {
@@ -26,17 +26,14 @@ function d(e, n = {}) {
 }
 //#endregion
 //#region src/components/deck/constants.ts
-var f = {
-	response: .5,
-	dampingFraction: .85
-}, p = "button, a, input, textarea, select, [role=button]";
+var f = "button, a, input, textarea, select, [role=button]";
 //#endregion
 //#region src/components/deck/composables/useDeckKeyboard.ts
-function m(e) {
-	return !!e?.closest?.(p);
+function p(e) {
+	return !!e?.closest?.(f);
 }
-function h(e, t, n = {}) {
-	let r = (n.isControl ?? m)(e.target);
+function m(e, t, n = {}) {
+	let r = (n.isControl ?? p)(e.target);
 	switch (e.key) {
 		case "ArrowRight":
 		case "PageDown": return t.next(), e.preventDefault(), !0;
@@ -48,8 +45,8 @@ function h(e, t, n = {}) {
 		default: return e.key >= "1" && e.key <= "9" && !r ? (t.go(parseInt(e.key, 10) - 1), e.preventDefault(), !0) : !1;
 	}
 }
-function g(e, t = {}) {
-	let n = null, r = (n) => h(n, e, t);
+function h(e, t = {}) {
+	let n = null, r = (n) => m(n, e, t);
 	o(() => {
 		n = l(t.target) ?? (typeof window < "u" ? window : null), n?.addEventListener("keydown", r);
 	}), a(() => {
@@ -57,16 +54,8 @@ function g(e, t = {}) {
 	});
 }
 //#endregion
-//#region src/components/deck/composables/useDeckSpring.ts
-var _ = { fn: (e) => 1 - (1 - e) ** 3 }, v = !1;
-function y() {
-	v || typeof document > "u" || (v = !0, import("@mkbabb/keyframes.js").then(({ springTimingFunction: e }) => {
-		_.fn = e(f).fn;
-	}).catch(() => {}));
-}
-//#endregion
 //#region src/components/deck/DeckPager.vue
-var b = /* @__PURE__ */ r({
+var g = /* @__PURE__ */ r({
 	__name: "DeckPager",
 	props: /* @__PURE__ */ i({
 		total: {},
@@ -102,4 +91,4 @@ var b = /* @__PURE__ */ r({
 	}
 });
 //#endregion
-export { p as CONTROL_SELECTOR, f as DECK_SPRING, b as DeckPager, _ as deckEase, h as handleDeckKey, y as installDeckSpring, d as useDeck, g as useDeckKeyboard };
+export { f as CONTROL_SELECTOR, g as DeckPager, m as handleDeckKey, d as useDeck, h as useDeckKeyboard };

package/dist/dialog-BzQxKrUr.js

@@ -0,0 +1,281 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { n as t } from "./useSurfaceAxis-DudiZVOR.js";
+import { t as n } from "./useMotionAxis-DCCXMC-i.js";
+import { t as r } from "./useSpringMount-C6-DBx4e.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeClass as p, normalizeProps as m, normalizeStyle as h, onScopeDispose as g, openBlock as _, renderSlot 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, injectDialogRootContext as A, useForwardProps as j, useForwardPropsEmits as M } from "reka-ui";
+import { X as N } from "@lucide/vue";
+//#endregion
+//#region src/components/dialog/Dialog.vue
+var P = /* @__PURE__ */ u({
+	__name: "Dialog",
+	props: {
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean }
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let n = M(e, t);
+		return (e, t) => (_(), a(y(D), f({ "data-slot": "dialog" }, y(n)), {
+			default: x(() => [v(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), F = /* @__PURE__ */ u({
+	__name: "DialogClose",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (_(), a(y(S), m(d(t)), {
+			default: x(() => [v(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), I = /* @__PURE__ */ u({
+	__name: "DialogTrigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (_(), a(y(k), m(d(t)), {
+			default: x(() => [v(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), L = /* @__PURE__ */ u({
+	__name: "DialogHeader",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (_(), s("div", { class: p(y(e)("flex flex-col gap-y-1.5 text-center sm:text-left", n.class)) }, [v(t.$slots, "default")], 2));
+	}
+}), R = /* @__PURE__ */ u({
+	__name: "DialogTitle",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, r = j(i(() => {
+			let { class: e, ...t } = n;
+			return t;
+		}));
+		return (t, i) => (_(), a(y(O), f(y(r), { class: y(e)("text-subheading leading-none tracking-tight", n.class) }), {
+			default: x(() => [v(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), z = /* @__PURE__ */ u({
+	__name: "DialogDescription",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, r = j(i(() => {
+			let { class: e, ...t } = n;
+			return t;
+		}));
+		return (t, i) => (_(), a(y(w), f(y(r), { class: y(e)("text-sm text-muted-foreground", n.class) }), {
+			default: x(() => [v(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), B = /* @__PURE__ */ u({
+	__name: "ModalOverlay",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		scrim: { default: "glass" },
+		scrimAnimation: {}
+	},
+	setup(t) {
+		let n = t, r = {
+			glass: "bg-overlay-scrim",
+			clear: "bg-overlay-scrim-subtle",
+			dim: "bg-overlay-scrim-strong"
+		}, o = i(() => {
+			if (n.scrimAnimation) return { "--scrim-animation": n.scrimAnimation };
+		});
+		return (t, i) => (_(), a(y(T), {
+			class: p(y(e)("fixed inset-0 z-overlay [backdrop-filter:var(--glass-blur-wash)]", r[n.scrim], "sheet-animate", n.class)),
+			style: h(o.value),
+			"data-scrim-animation": n.scrimAnimation ? "" : void 0
+		}, {
+			default: x(() => [v(t.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"class",
+			"style",
+			"data-scrim-animation"
+		]));
+	}
+}), V = "fixed left-1/2 top-1/2 z-modal grid w-full max-w-lg gap-4 [--overlay-pad-inline:--spacing(6)] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block)", H = "-translate-x-1/2 -translate-y-1/2 glass-reveal", U = "grid gap-4 [--overlay-pad-inline:--spacing(6)] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block) transition ease-in-out sheet-animate", W = /* @__PURE__ */ u({
+	__name: "DialogContent",
+	props: {
+		forceMount: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: { default: "glass" },
+		placement: { default: "center" },
+		scrimAnimation: {},
+		motion: {},
+		springPreset: {},
+		showClose: {
+			type: Boolean,
+			default: !0
+		},
+		scroll: {
+			type: Boolean,
+			default: !1
+		},
+		stage: { default: "none" }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(s, { emit: u }) {
+		let d = s, p = u, m = i(() => {
+			let { class: e, surface: t, placement: n, scrimAnimation: r, motion: i, springPreset: a, showClose: o, scroll: s, stage: c, ...l } = d;
+			return l;
+		}), h = i(() => d.placement ?? "center"), w = i(() => h.value === "center"), T = n(() => d.motion), D = i(() => d.springPreset != null && T.resolved.value !== "off" && (d.placement ?? "center") === "center"), O = typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, k = i(() => {
+			let e = d.stage;
+			return O && (e === "scale" || e === "immersive") ? "dim" : e;
+		}), j = A();
+		function P(e) {
+			if (!(typeof document > "u" || d.stage === "none")) if (e) requestAnimationFrame(() => {
+				let e = document.querySelector("[data-stage-wrapper]"), t = document.querySelector("[data-stage-scrim]"), n = k.value === "scale" || k.value === "immersive", r = k.value === "immersive";
+				for (let n of [e, t]) n && (n.setAttribute("data-stage-flip", ""), n.style.setProperty("--stage-t", "0"));
+				e && e.toggleAttribute("data-stage-scale", n), t && t.toggleAttribute("data-stage-immersive", r), requestAnimationFrame(() => {
+					for (let n of [e, t]) n && n.style.setProperty("--stage-t", "1");
+				});
+			});
+			else {
+				let e = document.querySelector("[data-stage-wrapper]"), t = document.querySelector("[data-stage-scrim]");
+				for (let n of [e, t]) n && (n.removeAttribute("data-stage-flip"), n.style.removeProperty("--stage-t"));
+				e && e.removeAttribute("data-stage-scale"), t && t.removeAttribute("data-stage-immersive");
+			}
+		}
+		b(() => j?.open.value, (e) => P(!!e), { immediate: !0 }), g(() => P(!1));
+		let F = M(m, p), I = i(() => e(t(d.surface, "floating"), "rounded-dialog")), L = {
+			top: "rounded-b-dialog border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+			bottom: "rounded-t-dialog border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+			left: "rounded-r-dialog border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+			right: "rounded-l-dialog border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
+		}, R = i(() => d.scroll ? w.value ? "max-h-[calc(100dvh-2rem)] overflow-y-auto" : "overflow-y-auto" : ""), z = i(() => w.value ? e(V, D.value ? "" : H, I.value, R.value, d.class) : e(U, L[h.value], t(d.surface, "floating"), R.value, d.class)), W = {
+			"--radius-ctx": "var(--radius-dialog)",
+			"--radius-inset": "var(--overlay-pad-inline)"
+		}, G = D.value ? A() : null, K = D.value && G ? r({
+			open: G.open,
+			preset: d.springPreset ?? "smooth"
+		}) : null, q = i(() => {
+			if (!K) return;
+			let e = K.position.value, t = 1 - .05 * e;
+			return {
+				transform: "none",
+				translate: "-50% -50%",
+				scale: String(t),
+				opacity: String(1 - e),
+				animation: "none",
+				transition: "none"
+			};
+		}), J = { "--glass-bg-rung": "var(--glass-bg-dialog)" }, Y = i(() => ({
+			...J,
+			...w.value ? {} : W,
+			...T.hostStyle.value ?? {},
+			...q.value ?? {}
+		}));
+		return (e, t) => (_(), a(y(E), null, {
+			default: x(() => [l(B, { "scrim-animation": d.scrimAnimation }, null, 8, ["scrim-animation"]), l(y(C), f(y(F), {
+				class: z.value,
+				style: Y.value,
+				"data-surface": d.surface,
+				"data-slot": "dialog-content",
+				"data-material": "transient-overlay",
+				"data-placement": w.value ? void 0 : h.value,
+				"data-scroll": d.scroll ? "" : void 0,
+				"data-reveal": w.value ? "overlay" : void 0,
+				"data-motion": y(T).dataMotion.value,
+				"data-spring": D.value ? d.springPreset ?? "smooth" : void 0
+			}), {
+				default: x(() => [v(e.$slots, "default"), d.showClose ? (_(), a(y(S), {
+					key: 0,
+					class: "focus-ring absolute right-(--overlay-pad-inline) top-(--overlay-pad-block) rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+				}, {
+					default: x(() => [l(y(N), { class: "w-4 h-4" }), t[0] ||= c("span", { class: "sr-only" }, "Close", -1)]),
+					_: 1
+				})) : o("", !0)]),
+				_: 3
+			}, 16, [
+				"class",
+				"style",
+				"data-surface",
+				"data-placement",
+				"data-scroll",
+				"data-reveal",
+				"data-motion",
+				"data-spring"
+			])]),
+			_: 3
+		}));
+	}
+}), G = /* @__PURE__ */ u({
+	__name: "DialogFooter",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (_(), s("div", { class: p(y(e)("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2", n.class)) }, [v(t.$slots, "default")], 2));
+	}
+});
+//#endregion
+export { L as a, P as c, R as i, W as n, I as o, z as r, F as s, G as t };

package/dist/dialog.js

@@ -1,3 +1,2 @@
-import { r as e, t } from "./DialogContent-Bl4v10AC.js";
-import { a as n, i as r, n as i, o as a, r as o, s, t as c } from "./DialogFooter-C0v4Hz2F.js";
-export { e as Dialog, s as DialogClose, t as DialogContent, o as DialogDescription, c as DialogFooter, n as DialogHeader, i as DialogScrollContent, r as DialogTitle, a as DialogTrigger };
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./dialog-BzQxKrUr.js";
+export { t as Dialog, o as DialogClose, r as DialogContent, a as DialogDescription, s as DialogFooter, e as DialogHeader, n as DialogTitle, i as DialogTrigger };