@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/select-BcBAyLXA.js

@@ -0,0 +1,336 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./resolveSurfaceClass-DCZ4PZcy.js";
+import { t as n } from "./selection-DqIULxRG.js";
+import { t as r } from "./primitive-B2t2jdqM.js";
+import { t as i } from "./floating-dB5TD88k.js";
+import { i as a } from "./dockContext-BUTlGRNJ.js";
+import { t as o } from "./menuRowClass-Nh7CtMON.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as x, withCtx as S } from "vue";
+import { SelectContent as C, SelectGroup as w, SelectIcon as T, SelectItem as E, SelectItemIndicator as D, SelectItemText as O, SelectLabel as k, SelectPortal as A, SelectRoot as j, SelectScrollDownButton as M, SelectScrollUpButton as N, SelectSeparator as P, SelectTrigger as F, SelectValue as I, SelectViewport as L, useForwardProps as R } from "reka-ui";
+import { ChevronDown as z, ChevronUp as B } from "@lucide/vue";
+//#endregion
+//#region src/components/select/Select.vue
+var V = /* @__PURE__ */ m({
+	name: "Select",
+	inheritAttrs: !1,
+	__name: "Select",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		nullableValue: {},
+		dir: {},
+		autocomplete: {},
+		disabled: { type: Boolean },
+		name: {},
+		required: { type: Boolean }
+	},
+	emits: ["update:modelValue", "update:open"],
+	setup(e, { emit: t }) {
+		let r = e, i = t, a = R(r);
+		function o(e) {
+			if (!n(e)) throw TypeError("[glass-ui] Select received a non-scalar value.");
+			i("update:modelValue", e);
+		}
+		return (e, t) => (_(), c(b(j), h({ "data-slot": "select" }, b(a), {
+			"onUpdate:modelValue": o,
+			"onUpdate:open": t[0] ||= (e) => i("update:open", e)
+		}), {
+			default: S(() => [v(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), H = /* @__PURE__ */ m({
+	name: "SelectValue",
+	inheritAttrs: !1,
+	__name: "SelectValue",
+	props: {
+		placeholder: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(e) {
+		let t = e, i = x(), a = s(() => r(i));
+		function o(e) {
+			if (e != null) {
+				if (!n(e)) throw TypeError("[glass-ui] SelectValue received a non-scalar value.");
+				return e;
+			}
+		}
+		return (e, n) => (_(), c(b(I), h(a.value, {
+			placeholder: t.placeholder,
+			class: t.class
+		}), {
+			default: S(({ selectedLabel: n, modelValue: r }) => [v(e.$slots, "default", {
+				selectedLabel: n,
+				modelValue: o(r)
+			}, () => [f(y(n.length ? n.join(", ") : t.placeholder), 1)])]),
+			_: 3
+		}, 16, ["placeholder", "class"]));
+	}
+}), U = /* @__PURE__ */ m({
+	name: "SelectTrigger",
+	inheritAttrs: !1,
+	__name: "SelectTrigger",
+	props: {
+		disabled: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		variant: { default: "default" },
+		size: { default: "default" }
+	},
+	setup(t) {
+		let n = t, i = x(), a = s(() => {
+			let { reference: e, ...t } = r(i);
+			return t;
+		}), o = s(() => n.variant === "ghost" ? "bg-transparent border-none shadow-none" : "control-surface glass-control-edge glass-capsule-hover"), l = s(() => {
+			switch (n.size) {
+				case "sm": return "h-(--control-h-sm)";
+				default: return "h-(--control-h-md)";
+			}
+		});
+		return (t, r) => (_(), c(b(F), h({ "data-slot": "select-trigger" }, a.value, {
+			disabled: n.disabled,
+			class: b(e)(o.value, l.value, "tap-squish focus-ring flex w-full items-center justify-between rounded-pill px-3 py-2 text-dropdown placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-disabled [&>span]:line-clamp-1 transition-control aria-invalid:border-(--destructive) user-invalid:border-(--destructive) focus-visible:aria-invalid:shadow-(--invalid-ring) focus-visible:user-invalid:shadow-(--invalid-ring)", n.class)
+		}), {
+			default: S(() => [v(t.$slots, "default"), p(b(T), { "as-child": "" }, {
+				default: S(() => [p(b(z), { class: "transition-disclosure in-data-[state=open]:rotate-180 h-4 w-4 shrink-0 opacity-(--select-chevron-opacity)" })]),
+				_: 1
+			})]),
+			_: 3
+		}, 16, ["disabled", "class"]));
+	}
+}), W = /* @__PURE__ */ m({
+	name: "SelectScrollDownButton",
+	inheritAttrs: !1,
+	__name: "SelectScrollDownButton",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t, i = x(), a = s(() => r(i));
+		return (t, r) => (_(), c(b(M), h(a.value, { class: b(e)("flex cursor-default items-center justify-center py-1", n.class) }), {
+			default: S(() => [v(t.$slots, "default", {}, () => [p(b(z), { class: "h-4 w-4" })])]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), G = /* @__PURE__ */ m({
+	name: "SelectScrollUpButton",
+	inheritAttrs: !1,
+	__name: "SelectScrollUpButton",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t, i = x(), a = s(() => r(i));
+		return (t, r) => (_(), c(b(N), h(a.value, { class: b(e)("flex cursor-default items-center justify-center py-1", n.class) }), {
+			default: S(() => [v(t.$slots, "default", {}, () => [p(b(B), { class: "h-4 w-4" })])]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), K = /* @__PURE__ */ m({
+	name: "SelectContent",
+	inheritAttrs: !1,
+	__name: "SelectContent",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: { default: "glass" },
+		fieldHue: {},
+		side: { default: "bottom" },
+		sideOffset: { default: 0 },
+		align: { default: "start" },
+		alignOffset: { default: 0 }
+	},
+	emits: [
+		"closeAutoFocus",
+		"escapeKeyDown",
+		"pointerDownOutside"
+	],
+	setup(n, { emit: r }) {
+		let o = n, l = r, u = x(), d = s(() => {
+			let { bodyLock: e, "body-lock": t, position: n, ...r } = i(u);
+			return r;
+		}), f = s(() => ({
+			position: "popper",
+			side: o.side,
+			sideOffset: o.sideOffset,
+			align: o.align,
+			alignOffset: o.alignOffset,
+			avoidCollisions: !0,
+			collisionPadding: 16
+		})), m = a(), y = s(() => o.fieldHue == null ? void 0 : { "--field-h": String(o.fieldHue) });
+		return (n, r) => (_(), c(b(A), null, {
+			default: S(() => [p(b(C), h({
+				...f.value,
+				...d.value
+			}, {
+				"data-glass-dock-portal": b(m)?.id ? "" : void 0,
+				"data-glass-dock-owner": b(m)?.id,
+				"data-surface": o.surface,
+				"data-material": "overlay",
+				"data-reveal": "menu",
+				"data-slot": "select-content",
+				class: b(e)("relative z-popover min-w-(--overlay-min-width) overflow-hidden rounded-panel border text-popover-foreground glass-reveal origin-(--reka-select-content-transform-origin)", "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", b(t)("floating"), "glass-field-portal", "[--overlay-pad-inline:--spacing(1)] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)]", o.class),
+				style: y.value,
+				onCloseAutoFocus: r[0] ||= (e) => l("closeAutoFocus", e),
+				onEscapeKeyDown: r[1] ||= (e) => l("escapeKeyDown", e),
+				onPointerDownOutside: r[2] ||= (e) => l("pointerDownOutside", e)
+			}), {
+				default: S(() => [
+					p(G),
+					p(b(L), {
+						"data-slot": "select-viewport",
+						class: g(b(e)("max-h-[inherit] overflow-y-auto px-(--overlay-pad-inline) py-(--overlay-pad-block) h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width)"))
+					}, {
+						default: S(() => [v(n.$slots, "default")]),
+						_: 3
+					}, 8, ["class"]),
+					p(W)
+				]),
+				_: 3
+			}, 16, [
+				"data-glass-dock-portal",
+				"data-glass-dock-owner",
+				"data-surface",
+				"class",
+				"style"
+			])]),
+			_: 3
+		}));
+	}
+}), q = /* @__PURE__ */ m({
+	name: "SelectGroup",
+	inheritAttrs: !1,
+	__name: "SelectGroup",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t, i = x(), a = s(() => r(i));
+		return (t, r) => (_(), c(b(w), h(a.value, { class: b(e)("p-1 w-full", n.class) }), {
+			default: S(() => [v(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), J = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
+}, Y = { class: "flex flex-col gap-0.5 min-w-0" }, X = /* @__PURE__ */ m({
+	name: "SelectItem",
+	inheritAttrs: !1,
+	__name: "SelectItem",
+	props: {
+		value: {},
+		disabled: { type: Boolean },
+		textValue: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		hideIndicator: { type: Boolean }
+	},
+	emits: ["select"],
+	setup(t, { emit: i }) {
+		let a = t, f = i, m = x(), g = s(() => r(m));
+		function y(e) {
+			if (!n(e.detail.value)) throw TypeError("[glass-ui] SelectItem received a non-scalar value.");
+			f("select", e);
+		}
+		let C = s(() => a.hideIndicator ? "none" : "start");
+		return (t, n) => (_(), c(b(E), h(g.value, {
+			value: a.value,
+			disabled: a.disabled,
+			"text-value": a.textValue,
+			class: b(e)(b(o)(C.value), a.class),
+			onSelect: y
+		}), {
+			default: S(() => [C.value === "none" ? l("", !0) : (_(), u("span", J, [p(b(D), null, {
+				default: S(() => [...n[0] ||= [d("span", {
+					class: "inline-block w-2 h-2 rounded-pill",
+					style: { "background-color": "var(\n                            --select-dot-color,\n                            var(--glass-accent, currentColor)\n                        )" }
+				}, null, -1)]]),
+				_: 1
+			})])), d("div", Y, [p(b(O), null, {
+				default: S(() => [v(t.$slots, "default")]),
+				_: 3
+			}), v(t.$slots, "description")])]),
+			_: 3
+		}, 16, [
+			"value",
+			"disabled",
+			"text-value",
+			"class"
+		]));
+	}
+}), Z = /* @__PURE__ */ m({
+	name: "SelectLabel",
+	inheritAttrs: !1,
+	__name: "SelectLabel",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t, i = x(), a = s(() => {
+			let { for: e, ...t } = r(i);
+			return t;
+		});
+		return (t, r) => (_(), c(b(k), h(a.value, { class: b(e)("py-1.5 pl-8 pr-2 text-dropdown-secondary font-semibold", n.class) }), {
+			default: S(() => [v(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), Q = /* @__PURE__ */ m({
+	name: "SelectSeparator",
+	inheritAttrs: !1,
+	__name: "SelectSeparator",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t, i = x(), a = s(() => r(i));
+		return (t, r) => (_(), c(b(P), h(a.value, { class: b(e)("-mx-1 my-1 h-px bg-[color-mix(in_srgb,var(--foreground)_12%,transparent)]", n.class) }), null, 16, ["class"]));
+	}
+});
+//#endregion
+export { K as a, V as c, q as i, Z as n, U as o, X as r, H as s, Q as t };

package/dist/select.js

@@ -1,4 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./SelectScrollDownButton-CDtwaWkZ.js";
-import { t as s } from "./SelectGroup-BuEptUsa.js";
-import { n as c, t as l } from "./SelectSeparator-4QGephvr.js";
-export { a as Select, t as SelectContent, s as SelectGroup, i as SelectItem, c as SelectLabel, o as SelectScrollDownButton, n as SelectScrollUpButton, l as SelectSeparator, e as SelectTrigger, r as SelectValue };
+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 "./select-BcBAyLXA.js";
+export { t as Select, e as SelectContent, n as SelectGroup, a as SelectItem, r as SelectLabel, s as SelectSeparator, i as SelectTrigger, o as SelectValue };

package/dist/selection-DqIULxRG.js

@@ -0,0 +1,6 @@
+//#region src/components/_shared/selection.ts
+function e(e) {
+	return typeof e == "string" || typeof e == "number";
+}
+//#endregion
+export { e as t };

package/dist/separator-CgZInrX-.js

@@ -0,0 +1,75 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeProps as s, openBlock as c, toDisplayString as l, unref as u, useAttrs as d, useId as f } from "vue";
+import { Separator as p } from "reka-ui";
+//#endregion
+//#region src/components/separator/Separator.vue
+var m = /*#__PURE__*/ t(/* @__PURE__ */ o({
+	inheritAttrs: !1,
+	__name: "Separator",
+	props: {
+		orientation: { default: "horizontal" },
+		decorative: {
+			type: Boolean,
+			default: !1
+		},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		label: {}
+	},
+	setup(t) {
+		let o = t, m = d(), h = `${f()}-label`, g = n(() => o.label?.trim()), _ = n(() => {
+			let { as: e, asChild: t, "as-child": n, ...r } = m;
+			return r;
+		}), v = n(() => {
+			let { class: e, label: t, ...n } = o;
+			return n;
+		}), y = n(() => {
+			let { role: e, "aria-orientation": t, "aria-label": n, "aria-labelledby": r, ...i } = _.value;
+			if (o.decorative) return {
+				...i,
+				role: "none",
+				"data-orientation": o.orientation
+			};
+			let a = typeof n == "string" && n.trim() ? n : void 0, s = typeof r == "string" && r.trim() ? r : a ? void 0 : h;
+			return {
+				...i,
+				role: "separator",
+				"data-orientation": o.orientation,
+				"aria-orientation": o.orientation === "vertical" ? "vertical" : void 0,
+				"aria-label": s ? void 0 : a,
+				"aria-labelledby": s
+			};
+		});
+		return (t, n) => g.value ? (c(), i("div", s({ key: 0 }, y.value, {
+			"data-slot": "separator",
+			class: u(e)("separator separator-labelled", o.class)
+		}), [
+			n[0] ||= a("span", {
+				class: "separator-segment",
+				"aria-hidden": "true"
+			}, null, -1),
+			a("span", {
+				id: h,
+				class: "separator-label"
+			}, l(g.value), 1),
+			n[1] ||= a("span", {
+				class: "separator-segment",
+				"aria-hidden": "true"
+			}, null, -1)
+		], 16)) : (c(), r(u(p), s({ key: 1 }, {
+			..._.value,
+			...v.value
+		}, {
+			"data-slot": "separator",
+			class: u(e)("separator", o.class)
+		}), null, 16, ["class"]));
+	}
+}), [["__scopeId", "data-v-13d05a1a"]]);
+//#endregion
+export { m as t };

package/dist/separator.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Separator-DqJ6PfOd.js";
+import { t as e } from "./separator-CgZInrX-.js";
 export { e as Separator };

package/dist/sidebar.js

@@ -1,4 +1,4 @@
-import { t as e } from "./scrollReader-DzYqPQ6V.js";
+import { t as e } from "./scrollReader-Brf5cQNo.js";
 import { computed as t, nextTick as n, onMounted as r, onScopeDispose as i, onUnmounted as a, reactive as o, ref as s, toValue as c, watch as l } from "vue";
 //#region src/composables/sidebar/useScrollTracker.ts
 function u(i, o, u) {
@@ -22,8 +22,13 @@ function u(i, o, u) {
 		return null;
 	}
 	function w() {
-		let e = C(c(i));
-		e && (m.value = e);
+		let e = O();
+		if (e) {
+			m.value = e;
+			return;
+		}
+		let t = C(c(i));
+		t && (m.value = t);
 	}
 	let T = null;
 	function E() {
@@ -42,70 +47,76 @@ function u(i, o, u) {
 		T = null;
 	}
 	function O() {
-		if (v) return;
-		let e = u?.scrollContainer?.value, t = parseFloat(f.split(" ")[0]) / 100, n = e ? e.clientHeight : window.innerHeight, r = Math.abs(t) * n, i = e ? e.getBoundingClientRect().top : 0, a = E(), o = null, s = Infinity, c = null, l = Infinity;
-		for (let e of a) {
+		let e = u?.scrollContainer?.value, t = e ? e.scrollTop : Math.max(window.scrollY, document.documentElement.scrollTop, document.body.scrollTop), n = e ? Math.max(0, e.scrollHeight - e.clientHeight) : Math.max(0, Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) - window.innerHeight);
+		if (n <= 0 || t < n - 1) return null;
+		let r = E();
+		for (let e = r.length - 1; e >= 0; --e) if (document.getElementById(r[e])?.isConnected) return r[e];
+		return null;
+	}
+	function k() {
+		let e = O();
+		if (e) return e;
+		let t = u?.scrollContainer?.value, n = parseFloat(f.split(" ")[0]) / 100, r = t ? t.clientHeight : window.innerHeight, i = Math.abs(n) * r, a = t ? t.getBoundingClientRect().top : 0, o = null, s = Infinity, c = null, l = Infinity;
+		for (let e of E()) {
 			let t = document.getElementById(e);
-			if (!t) continue;
-			let n = t.getBoundingClientRect().top - i - r;
+			if (!t?.isConnected) continue;
+			let n = t.getBoundingClientRect().top - a - i;
 			n <= 0 && Math.abs(n) < s && (s = Math.abs(n), o = e), n > 0 && n < l && (l = n, c = e);
 		}
-		let d = o ?? c;
-		d && d !== m.value && (h.clear(), h.set(d, !0), m.value = d);
+		return o ?? c;
 	}
-	function k(e) {
-		for (let t of e) {
-			if (!_.has(t.id)) {
-				let e = document.getElementById(t.id);
-				e && (g?.observe(e), _.add(t.id));
+	function A() {
+		if (v) return;
+		let e = k();
+		e && e !== m.value && (h.clear(), h.set(e, !0), m.value = e);
+	}
+	function j(e, t) {
+		if (!(!y || g !== t)) for (let n of e) {
+			if (!_.has(n.id)) {
+				let e = document.getElementById(n.id);
+				e?.isConnected && (t.observe(e), _.add(n.id));
 			}
-			let e = d(t);
-			e && k(e);
+			let e = d(n);
+			e && j(e, t);
 		}
 	}
-	function A() {
+	function M() {
 		g?.disconnect(), _.clear(), h.clear(), D();
-		let e = u?.scrollContainer?.value;
-		g = new IntersectionObserver((e) => {
-			if (!v) {
-				for (let t of e) h.set(t.target.id, t.isIntersecting);
+		let e = u?.scrollContainer?.value, t = new IntersectionObserver((e) => {
+			if (!(!y || g !== t || v)) {
+				for (let t of e) !t.target.isConnected || !_.has(t.target.id) || h.set(t.target.id, t.isIntersecting);
 				w();
 			}
 		}, {
 			root: e ?? void 0,
 			rootMargin: f,
 			threshold: p
-		}), n(() => {
-			k(c(i));
-			let e = c(i);
-			!m.value && e.length > 0 && (m.value = e[0].id);
+		});
+		g = t, n(() => {
+			if (!y || g !== t) return;
+			D(), j(c(i), t);
+			let e = c(i), n = new Set(E());
+			(!m.value || !n.has(m.value)) && (m.value = e[0]?.id ?? null);
 		});
 	}
-	l(() => c(i), (e) => {
-		y && (m.value = e[0]?.id ?? null, A());
+	l(() => c(i), () => {
+		y && M();
 	});
-	let j = null;
+	let N = null;
 	r(() => {
-		y = !0, A(), j = e(u?.scrollContainer?.value ?? null, () => O());
+		y = !0, M(), N = e(u?.scrollContainer?.value ?? null, () => A());
 	}), a(() => {
-		y = !1, g?.disconnect(), j?.stop(), j = null;
+		y = !1, g?.disconnect(), g = null, _.clear(), h.clear(), D(), N?.stop(), N = null;
 	});
-	function M() {
+	function P() {
 		h.clear();
-		let e = u?.scrollContainer?.value, t = parseFloat(f.split(" ")[0]) / 100, n = e ? e.clientHeight : window.innerHeight, r = Math.abs(t) * n, i = e ? e.getBoundingClientRect().top : 0, a = E(), o = null, s = Infinity, c = null, l = Infinity;
-		for (let e of a) {
-			let t = document.getElementById(e);
-			if (!t) continue;
-			let n = t.getBoundingClientRect().top - i - r;
-			n <= 0 && Math.abs(n) < s && (s = Math.abs(n), o = e), n > 0 && n < l && (l = n, c = e);
-		}
-		let d = o ?? c;
-		d && (h.set(d, !0), m.value = d);
+		let e = k();
+		e && (h.set(e, !0), m.value = e);
 	}
 	return {
 		activeId: m,
 		activeRootId: S,
-		forceRecalculate: M,
+		forceRecalculate: P,
 		lockTracking: b,
 		unlockTracking: x
 	};