@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/dialog-TNRDkcE4.js

@@ -0,0 +1,385 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./resolveSurfaceClass-DCZ4PZcy.js";
+import { t as n } from "./createContext-BhkE9mLH.js";
+import { t as r } from "./useSpringMount-uQ8QL9Ff.js";
+import { t as i } from "./useMotionAxis-D-rtIhca.js";
+import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeClass as m, normalizeProps as h, normalizeStyle as g, onBeforeUnmount as _, onScopeDispose as v, openBlock as y, ref as b, renderSlot as x, unref as S, watch as C, withCtx as w } from "vue";
+import { DialogClose as T, DialogContent as E, DialogDescription as D, DialogOverlay as O, DialogPortal as k, DialogRoot as A, DialogTitle as j, DialogTrigger as M, injectDialogRootContext as N, useForwardPropsEmits as P } from "reka-ui";
+import { X as F } from "@lucide/vue";
+//#region src/components/dialog/dialogStageContext.ts
+var I = n("DialogStage");
+function L(e) {
+	I.provide(e);
+}
+var R = I.use, z = /* @__PURE__ */ d({
+	__name: "Dialog",
+	props: {
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean },
+		unmountOnHide: { type: Boolean }
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let n = P(e, t), r = b(null), i = b(null), a = b(null);
+		return C(r, (e) => {
+			i.value = e?.closest("[data-stage-wrapper]") ?? null;
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), _(() => {
+			i.value = null, a.value = null;
+		}), L({
+			wrapperEl: i,
+			scrimEl: a
+		}), (e, t) => (y(), o(S(A), p({ "data-slot": "dialog" }, S(n)), {
+			default: w(() => [l("span", {
+				ref_key: "stageAnchorEl",
+				ref: r,
+				hidden: ""
+			}, null, 512), x(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), B = /* @__PURE__ */ d({
+	__name: "DialogClose",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (y(), o(S(T), h(f(t)), {
+			default: w(() => [x(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), V = /* @__PURE__ */ d({
+	__name: "DialogTrigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (y(), o(S(M), h(f(t)), {
+			default: w(() => [x(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), H = /* @__PURE__ */ d({
+	__name: "DialogHeader",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (y(), c("div", { class: m(S(e)("flex flex-col gap-y-1.5 text-center sm:text-left", n.class)) }, [x(t.$slots, "default")], 2));
+	}
+}), U = /* @__PURE__ */ d({
+	__name: "DialogTitle",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (y(), o(S(j), { class: m(S(e)("text-subheading leading-none tracking-tight", n.class)) }, {
+			default: w(() => [x(t.$slots, "default")]),
+			_: 3
+		}, 8, ["class"]));
+	}
+}), W = /* @__PURE__ */ d({
+	__name: "DialogDescription",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (y(), o(S(D), { class: m(S(e)("text-sm text-muted-foreground", n.class)) }, {
+			default: w(() => [x(t.$slots, "default")]),
+			_: 3
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+//#region src/components/dialog/sheet-motion.ts
+function G(e, t) {
+	switch (e) {
+		case "right": return `${t * 100}% 0`;
+		case "left": return `${-t * 100}% 0`;
+		case "bottom": return `0 ${t * 100}%`;
+		case "top": return `0 ${-t * 100}%`;
+	}
+}
+function K(e) {
+	return Math.min(1, Math.max(0, 1 - e));
+}
+//#endregion
+//#region src/components/dialog/ModalOverlay.vue?vue&type=script&setup=true&lang.ts
+var q = {
+	key: 0,
+	"data-slot": "glass-graded-halo",
+	"aria-hidden": "true"
+}, J = /* @__PURE__ */ d({
+	__name: "ModalOverlay",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		scrim: { default: "glass" },
+		backdrop: { default: "scrim" },
+		slideT: { default: null },
+		forceMount: { type: Boolean }
+	},
+	setup(t) {
+		let n = t, r = a(() => n.backdrop === "graded"), i = {
+			glass: "bg-overlay-scrim",
+			clear: "bg-overlay-scrim-subtle",
+			dim: "bg-overlay-scrim-strong"
+		}, u = R(), d = b(null), f = null;
+		return C(d, (e) => {
+			u && (f = e?.parentElement ?? null, u.scrimEl.value = f);
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), v(() => {
+			u?.scrimEl.value === f && (u.scrimEl.value = null);
+		}), (t, a) => (y(), o(S(O), {
+			"force-mount": n.forceMount,
+			"data-backdrop": r.value ? "graded" : void 0,
+			class: m(S(e)(r.value ? "fixed inset-0 z-overlay" : "fixed inset-0 z-overlay [backdrop-filter:var(--glass-blur-wash)]", r.value ? "" : i[n.scrim], n.slideT == null ? "sheet-animate" : "", n.class)),
+			style: g(n.slideT == null ? void 0 : { opacity: S(K)(n.slideT) })
+		}, {
+			default: w(() => [
+				l("span", {
+					ref_key: "overlayAnchorEl",
+					ref: d,
+					hidden: ""
+				}, null, 512),
+				r.value ? (y(), c("span", q)) : s("", !0),
+				x(t.$slots, "default")
+			]),
+			_: 3
+		}, 8, [
+			"force-mount",
+			"data-backdrop",
+			"class",
+			"style"
+		]));
+	}
+}), ee = {
+	key: 1,
+	"data-slot": "glass-graded-halo",
+	"aria-hidden": "true"
+}, te = {
+	key: 2,
+	"data-slot": "dialog-content-region"
+}, ne = "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)", re = "-translate-x-1/2 -translate-y-1/2 glass-reveal", ie = "[--overlay-pad-inline:--spacing(6)] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block)", Y = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "DialogContent",
+	props: {
+		forceMount: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: { default: "glass" },
+		placement: { default: "center" },
+		motion: {},
+		springPreset: {},
+		showClose: {
+			type: Boolean,
+			default: !0
+		},
+		scroll: {
+			type: Boolean,
+			default: !1
+		},
+		stage: { default: "none" },
+		backdrop: { default: "scrim" }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(n, { emit: d }) {
+		let f = n, m = d, h = a(() => {
+			let { class: e, surface: t, placement: n, motion: r, springPreset: i, showClose: a, scroll: o, stage: s, backdrop: c, forceMount: l, ...u } = f;
+			return u;
+		}), g = a(() => f.placement ?? "center"), _ = a(() => g.value === "center"), D = i(() => f.motion), O = a(() => f.springPreset != null && D.resolved.value !== "off" && _.value), A = a(() => !_.value), j = a(() => A.value && D.resolved.value !== "off"), M = a(() => O.value || A.value), I = a(() => {
+			let e = f.stage;
+			return D.prefersReducedMotion.value && (e === "scale" || e === "immersive") ? "dim" : e;
+		}), L = N(), z = R(), B = 0, V = 0, H = null, U = null;
+		function W() {
+			typeof cancelAnimationFrame > "u" || (B && cancelAnimationFrame(B), V && cancelAnimationFrame(V), B = 0, V = 0);
+		}
+		function K() {
+			W();
+			for (let e of [H, U]) e && (e.removeAttribute("data-stage-flip"), e.style.removeProperty("--stage-t"));
+			H?.removeAttribute("data-stage-scale"), U?.removeAttribute("data-stage-immersive"), H = null, U = null;
+		}
+		function q(e) {
+			if (W(), typeof requestAnimationFrame > "u" || !e || f.stage === "none") {
+				K();
+				return;
+			}
+			B = requestAnimationFrame(() => {
+				H = z?.wrapperEl.value ?? null, U = z?.scrimEl.value ?? null;
+				let e = I.value === "scale" || I.value === "immersive", t = I.value === "immersive";
+				for (let e of [H, U]) e && (e.setAttribute("data-stage-flip", ""), e.style.setProperty("--stage-t", "0"));
+				H?.toggleAttribute("data-stage-scale", e), U?.toggleAttribute("data-stage-immersive", t), V = requestAnimationFrame(() => {
+					for (let e of [H, U]) e?.isConnected && e.style.setProperty("--stage-t", "1");
+				});
+			});
+		}
+		C([
+			() => L?.open.value,
+			() => z?.wrapperEl.value,
+			() => z?.scrimEl.value,
+			I
+		], ([e]) => q(!!e), {
+			immediate: !0,
+			flush: "post"
+		}), v(K);
+		let Y = P(h, m), X = a(() => e(t("floating"), "rounded-dialog")), ae = {
+			top: "rounded-b-dialog border-b",
+			bottom: "rounded-t-dialog border-t",
+			left: "rounded-r-dialog border-r",
+			right: "rounded-l-dialog border-l"
+		}, oe = a(() => f.scroll && _.value ? "max-h-[calc(100dvh-2rem)] overflow-y-auto" : ""), se = a(() => _.value ? e(ne, O.value ? "" : re, X.value, oe.value, f.class) : e(ie, ae[g.value], t("floating"), f.class)), ce = {
+			"--radius-ctx": "var(--radius-dialog)",
+			"--radius-inset": "var(--overlay-pad-inline)"
+		}, Z = M.value ? r({
+			open: L.open,
+			preset: f.springPreset ?? "smooth"
+		}) : null, le = a(() => {
+			if (!Z) return;
+			let e = Z.position.value;
+			if (j.value) return {
+				translate: G(g.value, e),
+				transform: "none",
+				animation: "none",
+				transition: "none"
+			};
+			if (!O.value) return;
+			let t = 1 - .05 * e;
+			return {
+				transform: "none",
+				translate: "-50% -50%",
+				scale: String(t),
+				opacity: String(1 - e),
+				animation: "none",
+				transition: "none"
+			};
+		}), Q = a(() => Z && (j.value || O.value) ? Z.present.value || L.open.value : f.forceMount), ue = a(() => (j.value || O.value) && !L.open.value ? "" : void 0), de = a(() => Z && j.value ? Z.position.value : null), fe = a(() => Z && j.value ? Z.present.value || L.open.value : void 0), $ = b(null), pe = () => $.value?.closest("[data-slot=\"dialog-content\"]") ?? null;
+		C(() => L.open.value, (e) => {
+			if (!j.value || e !== !1) return;
+			let t = document.activeElement;
+			t && pe()?.contains(t) && L.triggerElement.value?.focus({ preventScroll: !0 });
+		}, { flush: "sync" });
+		let me = { "--glass-bg-rung": "var(--glass-bg-dialog)" }, he = a(() => ({
+			...me,
+			..._.value ? {} : ce,
+			...D.hostStyle.value ?? {},
+			...le.value ?? {}
+		}));
+		return (e, t) => (y(), o(S(k), { "force-mount": Q.value }, {
+			default: w(() => [u(J, {
+				"data-stage-scrim": f.stage === "none" ? void 0 : "",
+				backdrop: _.value ? f.backdrop : void 0,
+				"slide-t": de.value,
+				"force-mount": fe.value
+			}, null, 8, [
+				"data-stage-scrim",
+				"backdrop",
+				"slide-t",
+				"force-mount"
+			]), u(S(E), p({
+				...S(Y),
+				...e.$attrs,
+				inert: ue.value
+			}, {
+				"force-mount": Q.value,
+				class: se.value,
+				style: he.value,
+				"data-surface": f.surface,
+				"data-slot": "dialog-content",
+				"data-material": "overlay",
+				"data-placement": _.value ? void 0 : g.value,
+				"data-scroll": f.scroll ? "" : void 0,
+				"data-reveal": _.value ? "overlay" : void 0,
+				"data-motion": S(D).dataMotion.value,
+				"data-spring": O.value ? f.springPreset ?? "smooth" : void 0
+			}), {
+				default: w(() => [
+					_.value ? s("", !0) : (y(), c("span", {
+						key: 0,
+						ref_key: "sideAnchorEl",
+						ref: $,
+						hidden: ""
+					}, null, 512)),
+					!_.value && f.surface === "glass" ? (y(), c("span", ee)) : s("", !0),
+					_.value ? x(e.$slots, "default", {}, void 0, void 0, 3) : (y(), c("div", te, [x(e.$slots, "default")])),
+					f.showClose ? (y(), o(S(T), {
+						key: 4,
+						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: w(() => [u(S(F), { class: "w-4 h-4" }), t[0] ||= l("span", { class: "sr-only" }, "Close", -1)]),
+						_: 1
+					})) : s("", !0)
+				]),
+				_: 3
+			}, 16, [
+				"force-mount",
+				"class",
+				"style",
+				"data-surface",
+				"data-placement",
+				"data-scroll",
+				"data-reveal",
+				"data-motion",
+				"data-spring"
+			])]),
+			_: 3
+		}, 8, ["force-mount"]));
+	}
+}), X = /* @__PURE__ */ d({
+	__name: "DialogFooter",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (y(), c("div", { class: m(S(e)("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2", n.class)) }, [x(t.$slots, "default")], 2));
+	}
+});
+//#endregion
+export { H as a, z as c, U as i, Y as n, V as o, W as r, B as s, X 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-TNRDkcE4.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 };