@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/PopoverContent-DOtszFWK.js

@@ -0,0 +1,251 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { t } from "./useSurfaceAxis-DudiZVOR.js";
+import { t as n } from "./createContext-BQ1Gy_LB.js";
+import { i as r } from "./dockContext-d-WpJN2Z.js";
+import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeProps as p, openBlock as m, renderSlot as h, unref as g, useModel as _, watch as v, withCtx as y } from "vue";
+import { HoverCardContent as b, HoverCardPortal as x, HoverCardRoot as S, HoverCardTrigger as C, PopoverContent as w, PopoverPortal as T, PopoverRoot as E, PopoverTrigger as D, useForwardPropsEmits as O } from "reka-ui";
+//#region src/components/popover/popoverContext.ts
+var k = n("glass-ui:popover-union");
+k.KEY;
+var A = k.provide, j = k.use, M = /* @__PURE__ */ u({
+	__name: "Popover",
+	props: /* @__PURE__ */ d({
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean },
+		trigger: { default: "click" },
+		openDelay: { default: 250 },
+		closeDelay: { default: 150 },
+		keepDockOpen: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: { type: Boolean },
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(e) {
+		let t = e, n = _(e, "open"), i = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(pointer: coarse)").matches, s = a(() => t.trigger === "hover" && !i);
+		A({ usesHoverRoot: s });
+		let c = r(), l = !1;
+		v(n, (e) => {
+			t.keepDockOpen && (e && !l ? (c?.keepOpen(), l = !0) : !e && l && (c?.release(), l = !1));
+		});
+		let u = a(() => ({
+			defaultOpen: t.defaultOpen,
+			modal: t.modal
+		}));
+		return (t, r) => s.value ? (m(), o(g(S), {
+			key: 0,
+			"data-slot": "popover",
+			open: n.value,
+			"onUpdate:open": r[0] ||= (e) => n.value = e,
+			"open-delay": e.openDelay,
+			"close-delay": e.closeDelay
+		}, {
+			default: y(() => [h(t.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"open",
+			"open-delay",
+			"close-delay"
+		])) : (m(), o(g(E), f({
+			key: 1,
+			"data-slot": "popover",
+			open: n.value,
+			"onUpdate:open": r[1] ||= (e) => n.value = e
+		}, u.value), {
+			default: y(() => [h(t.$slots, "default")]),
+			_: 3
+		}, 16, ["open"]));
+	}
+}), N = /* @__PURE__ */ u({
+	__name: "PopoverTrigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e, n = j(), r = a(() => n?.usesHoverRoot.value ?? !1);
+		return (e, n) => r.value ? (m(), o(g(C), {
+			key: 0,
+			as: t.as,
+			"as-child": t.asChild
+		}, {
+			default: y(() => [h(e.$slots, "default")]),
+			_: 3
+		}, 8, ["as", "as-child"])) : (m(), o(g(D), p(f({ key: 1 }, t)), {
+			default: y(() => [h(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), P = [
+	"data-glass-dock-portal",
+	"data-glass-dock-owner",
+	"data-surface",
+	"aria-label"
+], F = [
+	"data-glass-dock-portal",
+	"data-glass-dock-owner",
+	"data-surface",
+	"aria-label"
+], I = /* @__PURE__ */ u({
+	inheritAttrs: !1,
+	__name: "PopoverContent",
+	props: {
+		forceMount: { type: Boolean },
+		side: {},
+		sideOffset: { default: 4 },
+		sideFlip: { type: Boolean },
+		align: { default: "center" },
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: {},
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: { type: Boolean },
+		reference: {},
+		asChild: { type: Boolean },
+		as: {},
+		disableOutsidePointerEvents: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		portal: {
+			type: Boolean,
+			default: !0
+		},
+		surface: { default: "glass" },
+		role: {},
+		ariaLabel: {}
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(n, { emit: u }) {
+		let d = n, p = u, _ = j(), v = a(() => _?.usesHoverRoot.value ?? !1), S = a(() => {
+			let e = d.role ?? (v.value ? "card" : "dialog");
+			return v.value && e === "dialog" ? "card" : e;
+		}), C = a(() => !v.value && S.value === "card"), E = O(a(() => {
+			let { class: e, portal: t, surface: n, role: r, ariaLabel: i, ...a } = d;
+			return a;
+		}), p), D = a(() => ({
+			side: d.side,
+			sideOffset: d.sideOffset,
+			align: d.align,
+			alignOffset: d.alignOffset,
+			avoidCollisions: d.avoidCollisions,
+			collisionBoundary: d.collisionBoundary,
+			collisionPadding: d.collisionPadding,
+			arrowPadding: d.arrowPadding,
+			sticky: d.sticky,
+			hideWhenDetached: d.hideWhenDetached,
+			updatePositionStrategy: d.updatePositionStrategy
+		})), k = r(), A = a(() => t(d.surface)), M = a(() => e("popover-content z-popover w-72 glass-floating [--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block) glass-reveal", A.value, d.class)), N = a(() => k?.id ? "" : void 0);
+		return (e, t) => v.value ? (m(), o(g(x), { key: 0 }, {
+			default: y(() => [l(g(b), f({
+				...D.value,
+				...e.$attrs
+			}, {
+				"data-glass-dock-portal": N.value,
+				"data-glass-dock-owner": g(k)?.id,
+				"data-surface": d.surface,
+				"data-reveal": "menu",
+				role: S.value === "card" ? "group" : "dialog",
+				"aria-label": n.ariaLabel,
+				class: M.value
+			}), {
+				default: y(() => [h(e.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"data-glass-dock-portal",
+				"data-glass-dock-owner",
+				"data-surface",
+				"role",
+				"aria-label",
+				"class"
+			])]),
+			_: 3
+		})) : C.value ? (m(), s(i, { key: 1 }, [n.portal ? (m(), o(g(T), { key: 0 }, {
+			default: y(() => [l(g(w), f(g(E), { "as-child": "" }), {
+				default: y(() => [c("div", f(e.$attrs, {
+					"data-glass-dock-portal": N.value,
+					"data-glass-dock-owner": g(k)?.id,
+					"data-surface": d.surface,
+					"data-reveal": "menu",
+					role: "group",
+					"aria-label": n.ariaLabel,
+					class: M.value
+				}), [h(e.$slots, "default")], 16, P)]),
+				_: 3
+			}, 16)]),
+			_: 3
+		})) : (m(), o(g(w), f({ key: 1 }, g(E), { "as-child": "" }), {
+			default: y(() => [c("div", f(e.$attrs, {
+				"data-glass-dock-portal": N.value,
+				"data-glass-dock-owner": g(k)?.id,
+				"data-surface": d.surface,
+				"data-reveal": "menu",
+				role: "group",
+				"aria-label": n.ariaLabel,
+				class: M.value
+			}), [h(e.$slots, "default")], 16, F)]),
+			_: 3
+		}, 16))], 64)) : (m(), s(i, { key: 2 }, [n.portal ? (m(), o(g(T), { key: 0 }, {
+			default: y(() => [l(g(w), f({
+				...g(E),
+				...e.$attrs
+			}, {
+				"data-glass-dock-portal": N.value,
+				"data-glass-dock-owner": g(k)?.id,
+				"data-surface": d.surface,
+				"data-reveal": "menu",
+				class: M.value
+			}), {
+				default: y(() => [h(e.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"data-glass-dock-portal",
+				"data-glass-dock-owner",
+				"data-surface",
+				"class"
+			])]),
+			_: 3
+		})) : (m(), o(g(w), f({ key: 1 }, {
+			...g(E),
+			...e.$attrs
+		}, {
+			"data-glass-dock-portal": N.value,
+			"data-glass-dock-owner": g(k)?.id,
+			"data-surface": d.surface,
+			"data-reveal": "menu",
+			class: M.value
+		}), {
+			default: y(() => [h(e.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"data-glass-dock-portal",
+			"data-glass-dock-owner",
+			"data-surface",
+			"class"
+		]))], 64));
+	}
+});
+//#endregion
+export { N as n, M as r, I as t };

package/dist/Progress-uWLyXE7J.js

@@ -0,0 +1,308 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { t } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeProps as l, normalizeClass as u, normalizeStyle as d, openBlock as f, toRef as p, unref as m, watchEffect as h, withCtx as g } from "vue";
+import { ProgressIndicator as _, ProgressRoot as v } from "reka-ui";
+//#endregion
+//#region src/components/progress/ProgressDefault.vue
+var y = /* @__PURE__ */ c({
+	__name: "ProgressDefault",
+	props: {
+		modelValue: {},
+		max: {},
+		getValueLabel: { type: Function },
+		getValueText: { type: Function },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let i = t, a = n(() => {
+			let { class: e, ...t } = i;
+			return t;
+		});
+		return (t, n) => (f(), r(m(v), l({ "data-slot": "progress" }, a.value, { class: m(e)("relative h-4 w-full overflow-hidden rounded-pill bg-[var(--progress-track,var(--progress-track-on-glass))]", i.class) }), {
+			default: g(() => [s(m(_), {
+				class: "h-full w-full flex-1 rounded-pill [background:var(--progress-fill,var(--primary))] transition-transform",
+				style: d({ transform: `translateX(-${100 - (i.modelValue ?? 0)}%)` })
+			}, null, 8, ["style"])]),
+			_: 1
+		}, 16, ["class"]));
+	}
+}), b = /* @__PURE__ */ t(/* @__PURE__ */ c({
+	__name: "ProgressGradient",
+	props: {
+		modelValue: {},
+		max: {},
+		getValueLabel: { type: Function },
+		getValueText: { type: Function },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		indeterminate: { type: Boolean }
+	},
+	setup(t) {
+		let i = t, a = n(() => {
+			let { class: e, indeterminate: t, ...n } = i;
+			return n;
+		}), o = n(() => {
+			if (i.indeterminate) return "idle";
+			let e = i.modelValue ?? 0;
+			return e <= 0 ? "idle" : e >= 100 ? "complete" : e < 5 ? "loading" : "progressing";
+		}), c = n(() => {
+			if (i.indeterminate) return;
+			let e = i.modelValue ?? 0;
+			if (e < 85) return { "--progress-crescendo": "0%" };
+			let t = (e - 85) / 15 * 100;
+			return { "--progress-crescendo": `${Math.min(100, Math.max(0, t))}%` };
+		});
+		return (n, u) => (f(), r(m(v), l({ "data-slot": "progress" }, a.value, {
+			class: m(e)("relative h-4 w-full overflow-hidden rounded-pill bg-[var(--progress-track,var(--progress-track-on-glass))] progress-gradient-rail", i.class),
+			"data-lifecycle": o.value,
+			"data-indeterminate": t.indeterminate || void 0
+		}), {
+			default: g(() => [s(m(_), {
+				class: "h-full w-full flex-1 rounded-pill [background:var(--progress-fill,var(--primary))] transition-transform",
+				style: d({
+					transform: `translateX(-${100 - (i.modelValue ?? 0)}%)`,
+					...c.value ?? {}
+				})
+			}, null, 8, ["style"])]),
+			_: 1
+		}, 16, [
+			"class",
+			"data-lifecycle",
+			"data-indeterminate"
+		]));
+	}
+}), [["__scopeId", "data-v-a9a4b031"]]), x = /* @__PURE__ */ t(/* @__PURE__ */ c({
+	__name: "ProgressLiquid",
+	props: {
+		modelValue: {},
+		max: {},
+		getValueLabel: { type: Function },
+		getValueText: { type: Function },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let i = t, a = n(() => {
+			let { class: e, ...t } = i;
+			return t;
+		});
+		return (t, n) => (f(), r(m(v), l({ "data-slot": "progress" }, a.value, { class: m(e)("relative h-4 w-full overflow-hidden rounded-pill bg-[var(--progress-track,var(--progress-track-on-glass))]", i.class) }), {
+			default: g(() => [s(m(_), {
+				class: "glass-liquid-fill progress-liquid-fill h-full w-full flex-1 transition-transform",
+				style: d({ transform: `translateX(-${100 - (i.modelValue ?? 0)}%)` })
+			}, null, 8, ["style"])]),
+			_: 1
+		}, 16, ["class"]));
+	}
+}), [["__scopeId", "data-v-551fd9ce"]]);
+//#endregion
+//#region src/components/progress/useProgressGeometry.ts
+function S(e) {
+	let t = n(() => {
+		let t = e.segments.value;
+		if (t.length === 0) return [];
+		let n = t.map((e) => e.weight ?? 1), r = n.reduce((e, t) => e + t, 0) || 1, i = t.findIndex((t) => t.key === e.currentSegmentKey.value), a = 0;
+		return t.map((t, o) => {
+			let s = n[o] / r * 100, c = a, l = a + s;
+			a = l;
+			let u;
+			u = t.state ? t.state : i < 0 ? "pending" : o < i ? "completed" : o === i ? "active" : "pending";
+			let d = u === "completed" ? 1 : u === "active" ? Math.max(0, Math.min(1, e.activeProgress.value)) : 0;
+			return {
+				...t,
+				startPct: c,
+				endPct: l,
+				widthPct: s,
+				resolvedState: u,
+				fill: d
+			};
+		});
+	});
+	return {
+		cells: t,
+		aggregateValue: n(() => {
+			if (t.value.length === 0) return 0;
+			let e = 0;
+			for (let n of t.value) e += n.fill * n.widthPct;
+			return Math.max(0, Math.min(100, e));
+		})
+	};
+}
+//#endregion
+//#region src/components/progress/ProgressSectioned.vue?vue&type=script&setup=true&lang.ts
+var C = {
+	key: 0,
+	class: "progress-sectioned-sweep",
+	"aria-hidden": "true"
+}, w = 3.2, T = "14%", E = /* @__PURE__ */ t(/* @__PURE__ */ c({
+	__name: "ProgressSectioned",
+	props: {
+		max: {},
+		getValueLabel: {},
+		getValueText: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		segments: { default: () => [] },
+		currentSegmentKey: { default: null },
+		activeProgress: { default: 0 }
+	},
+	setup(t) {
+		let c = t, u = n(() => {
+			let { class: e, segments: t, currentSegmentKey: n, activeProgress: r, ...i } = c;
+			return i;
+		}), { cells: h, aggregateValue: y } = S({
+			segments: p(c, "segments"),
+			currentSegmentKey: p(c, "currentSegmentKey"),
+			activeProgress: p(c, "activeProgress")
+		}), b = n(() => {
+			let e = 0;
+			for (let t of h.value) {
+				let n = t.startPct + t.widthPct * t.fill;
+				n > e && (e = n);
+			}
+			return Math.max(0, Math.min(100, e));
+		}), x = n(() => h.value.find((e) => e.resolvedState === "active") ?? null), E = n(() => {
+			let e = b.value;
+			if (e <= 0) return "none";
+			let t = [];
+			for (let n of h.value) {
+				let r = n.startPct + n.widthPct * n.fill;
+				if (r <= n.startPct) continue;
+				let i = n.startPct / e * 100, a = r / e * 100;
+				t.push({
+					from: Math.max(0, i),
+					to: Math.min(100, a),
+					color: n.color
+				});
+			}
+			if (t.length === 0) return "none";
+			let n = [];
+			return t.forEach((e, r) => {
+				let i = t[r - 1], a = t[r + 1], o = i ? e.from + w : e.from, s = a ? e.to - w : e.to;
+				n.push(`${e.color} ${o.toFixed(2)}%`), n.push(`${e.color} ${Math.max(o, s).toFixed(2)}%`);
+			}), `linear-gradient(90deg, ${n.join(", ")})`;
+		}), D = n(() => {
+			let e = [];
+			for (let t of h.value) {
+				if (t.resolvedState === "completed" || t.resolvedState === "active" && t.fill >= 1) continue;
+				let n = `color-mix(in srgb, ${t.color} ${T}, transparent)`;
+				e.push(`${n} ${t.startPct.toFixed(2)}%`), e.push(`${n} ${t.endPct.toFixed(2)}%`);
+			}
+			return e.length === 0 ? "none" : `linear-gradient(90deg, ${e.join(", ")})`;
+		});
+		return (t, n) => (f(), r(m(v), l({ "data-slot": "progress" }, u.value, {
+			"model-value": m(y),
+			class: m(e)("relative h-[var(--progress-sectioned-height,0.875rem)] w-full overflow-hidden rounded-pill progress-sectioned-rail", c.class),
+			style: { "--progress-track-ghost": D.value }
+		}), {
+			default: g(() => [s(m(_), { class: "absolute inset-0 pointer-events-none opacity-0" }), o("div", {
+				class: "progress-sectioned-flow",
+				style: d({
+					width: b.value + "%",
+					"--flow-gradient": E.value,
+					"--front-color": x.value ? x.value.color : "transparent"
+				})
+			}, [x.value ? (f(), a("span", C)) : i("", !0)], 4)]),
+			_: 1
+		}, 16, [
+			"model-value",
+			"class",
+			"style"
+		]));
+	}
+}), [["__scopeId", "data-v-9afb2d87"]]), D = /* @__PURE__ */ c({
+	__name: "Progress",
+	props: {
+		modelValue: { default: 0 },
+		max: {},
+		getValueLabel: {},
+		getValueText: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		variant: { default: "default" },
+		segments: { default: () => [] },
+		currentSegmentKey: { default: null },
+		activeProgress: { default: 0 },
+		indeterminate: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e;
+		function n(e) {
+			let t = `[glass-ui] Progress: ${e}`;
+			console.error(t);
+		}
+		return h(() => {
+			let e = t.variant === "sectioned";
+			!e && t.segments.length > 0 && n(`\`segments\` is only valid on variant="sectioned" (got variant="${t.variant}"). The default/gradient variants are driven by \`modelValue\`.`), e && (t.modelValue ?? 0) !== 0 && n("variant=\"sectioned\" ignores `modelValue` — its value derives from the per-cell state map (segments + currentSegmentKey + activeProgress). Drive the fill via `activeProgress`/`currentSegmentKey`, not `modelValue`."), e && t.indeterminate && n("`indeterminate` is not compatible with variant=\"sectioned\". The sectioned variant's living motion is the active-cell sweep.");
+		}), (e, n) => t.variant === "sectioned" ? (f(), r(E, {
+			key: 0,
+			segments: t.segments,
+			"current-segment-key": t.currentSegmentKey,
+			"active-progress": t.activeProgress,
+			class: u(t.class)
+		}, null, 8, [
+			"segments",
+			"current-segment-key",
+			"active-progress",
+			"class"
+		])) : t.variant === "gradient" ? (f(), r(b, {
+			key: 1,
+			"model-value": t.modelValue,
+			indeterminate: t.indeterminate,
+			class: u(t.class)
+		}, null, 8, [
+			"model-value",
+			"indeterminate",
+			"class"
+		])) : t.variant === "liquid" ? (f(), r(x, {
+			key: 2,
+			"model-value": t.modelValue,
+			class: u(t.class)
+		}, null, 8, ["model-value", "class"])) : (f(), r(y, {
+			key: 3,
+			"model-value": t.modelValue,
+			class: u(t.class)
+		}, null, 8, ["model-value", "class"]));
+	}
+});
+//#endregion
+export { b as a, x as i, E as n, y as o, S as r, D as t };

package/dist/SelectGroup-BuEptUsa.js

@@ -0,0 +1,31 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { computed as t, createBlock as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
+import { SelectGroup as l } from "reka-ui";
+//#endregion
+//#region src/components/select/SelectGroup.vue
+var u = /* @__PURE__ */ r({
+	__name: "SelectGroup",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(r) {
+		let u = r, d = t(() => {
+			let { class: e, ...t } = u;
+			return t;
+		});
+		return (t, r) => (a(), n(s(l), i({ class: s(e)("p-1 w-full", u.class) }, d.value), {
+			default: c(() => [o(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+});
+//#endregion
+export { u as t };