@mkbabb/glass-ui 0.3.0 → 2.1.0

package/dist/sidebar.js

@@ -0,0 +1,304 @@
+import { computed as e, nextTick as t, onMounted as n, onUnmounted as r, reactive as i, ref as a, toValue as o, watch as s } from "vue";
+//#region src/composables/sidebar/useScrollTracker.ts
+function c(i, c, l) {
+	let u = l?.getChildren ?? ((e) => e.children), d = l?.rootMargin ?? "-20% 0px -60% 0px", f = l?.threshold ?? 0, p = a(null), m = /* @__PURE__ */ new Map(), h = null, g = /* @__PURE__ */ new Set(), _ = !1, v = !1;
+	function y() {
+		_ = !0;
+	}
+	function b() {
+		_ = !1;
+	}
+	let x = e(() => p.value ? o(c).get(p.value)?.parentId ?? null : null);
+	function S(e) {
+		for (let t of e) {
+			let e = u(t);
+			if (e) {
+				let t = S(e);
+				if (t) return t;
+			}
+			if (m.get(t.id)) return t.id;
+		}
+		return null;
+	}
+	function C() {
+		let e = S(o(i));
+		e && (p.value = e);
+	}
+	let w = null;
+	function T() {
+		if (w) return w;
+		let e = [];
+		function t(n) {
+			for (let r of n) {
+				e.push(r.id);
+				let n = u(r);
+				n && t(n);
+			}
+		}
+		return t(o(i)), w = e, e;
+	}
+	function E() {
+		w = null;
+	}
+	let D = 0;
+	function O() {
+		_ || D || (D = requestAnimationFrame(() => {
+			D = 0;
+			let e = l?.scrollContainer?.value, t = parseFloat(d.split(" ")[0]) / 100, n = e ? e.clientHeight : window.innerHeight, r = Math.abs(t) * n, i = e ? e.getBoundingClientRect().top : 0, a = T(), o = null, s = Infinity, c = null, u = 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 < u && (u = n, c = e);
+			}
+			let f = o ?? c;
+			f && f !== p.value && (m.clear(), m.set(f, !0), p.value = f);
+		}));
+	}
+	function k(e) {
+		for (let t of e) {
+			if (!g.has(t.id)) {
+				let e = document.getElementById(t.id);
+				e && (h?.observe(e), g.add(t.id));
+			}
+			let e = u(t);
+			e && k(e);
+		}
+	}
+	function A() {
+		h?.disconnect(), g.clear(), m.clear(), E();
+		let e = l?.scrollContainer?.value;
+		h = new IntersectionObserver((e) => {
+			if (!_) {
+				for (let t of e) m.set(t.target.id, t.isIntersecting);
+				C();
+			}
+		}, {
+			root: e ?? void 0,
+			rootMargin: d,
+			threshold: f
+		}), t(() => {
+			k(o(i));
+			let e = o(i);
+			!p.value && e.length > 0 && (p.value = e[0].id);
+		});
+	}
+	s(() => o(i), (e) => {
+		v && (p.value = e[0]?.id ?? null, A());
+	});
+	let j = null;
+	n(() => {
+		v = !0, A(), j = l?.scrollContainer?.value ?? document, j.addEventListener("scroll", O, { passive: !0 });
+	}), r(() => {
+		v = !1, h?.disconnect(), D && cancelAnimationFrame(D), j?.removeEventListener("scroll", O);
+	});
+	function M() {
+		m.clear(), D && cancelAnimationFrame(D), D = 0;
+		let e = l?.scrollContainer?.value, t = parseFloat(d.split(" ")[0]) / 100, n = e ? e.clientHeight : window.innerHeight, r = Math.abs(t) * n, i = e ? e.getBoundingClientRect().top : 0, a = T(), o = null, s = Infinity, c = null, u = 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 < u && (u = n, c = e);
+		}
+		let f = o ?? c;
+		f && (m.set(f, !0), p.value = f);
+	}
+	return {
+		activeId: p,
+		activeRootId: x,
+		forceRecalculate: M,
+		lockTracking: y,
+		unlockTracking: b
+	};
+}
+//#endregion
+//#region src/composables/sidebar/useSidebarFollow.ts
+function l(e) {
+	let i = e.damping ?? .22, a = 0, o = 0, c = null, l = null, u = null, d = !1, f = 0;
+	function p() {
+		d = !0, u = null, a &&= (cancelAnimationFrame(a), 0), o &&= (cancelAnimationFrame(o), 0);
+	}
+	function m(e) {
+		return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/["\\]/g, "\\$&");
+	}
+	function h() {
+		let t = e.sidebarEl.value, n = e.activeId.value ?? e.activeRootId?.value ?? null;
+		return !t || !n ? null : t.querySelector(`[data-toc-id="${m(n)}"]`);
+	}
+	function g(e, t) {
+		let n = e.clientHeight, r = t.offsetTop + t.offsetHeight / 2, i = Math.max(0, e.scrollHeight - n), a = n * .18, o = e.scrollTop + n / 2;
+		return Math.abs(r - o) <= a ? e.scrollTop : Math.max(0, Math.min(i, r - n / 2));
+	}
+	function _(e) {
+		f += 1;
+		try {
+			e();
+		} finally {
+			requestAnimationFrame(() => {
+				f = Math.max(0, f - 1);
+			});
+		}
+	}
+	function v() {
+		if (a = 0, d) return;
+		let t = e.sidebarEl.value, n = u;
+		if (!t || n == null) return;
+		let r = n - t.scrollTop;
+		if (Math.abs(r) < 1) {
+			_(() => {
+				t.scrollTop = n;
+			}), u = null;
+			return;
+		}
+		_(() => {
+			t.scrollTop += r * i;
+		}), a = requestAnimationFrame(v);
+	}
+	function y(t = !1) {
+		if (!t && d) return;
+		let n = e.sidebarEl.value, r = h();
+		if (!(!n || !r)) {
+			if (u = g(n, r), t) {
+				a &&= (cancelAnimationFrame(a), 0), _(() => {
+					n.scrollTop = u;
+				}), u = null;
+				return;
+			}
+			a ||= requestAnimationFrame(v);
+		}
+	}
+	function b() {
+		d && (d = !1, u = null), !o && (o = requestAnimationFrame(() => {
+			o = 0, y();
+		}));
+	}
+	function x() {
+		p();
+	}
+	function S() {
+		p();
+	}
+	function C(e) {
+		e.target?.closest("[data-toc-id], .sidebar-top-btn") || p();
+	}
+	function w(e) {
+		(e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "PageUp" || e.key === "PageDown" || e.key === "Home" || e.key === "End" || e.key === " ") && p();
+	}
+	function T() {
+		f > 0 || p();
+	}
+	function E(e) {
+		l !== e && (l?.removeEventListener("wheel", x), l?.removeEventListener("scroll", T), l?.removeEventListener("touchstart", S), l?.removeEventListener("pointerdown", C), l?.removeEventListener("keydown", w), l = e, l?.addEventListener("wheel", x, { passive: !0 }), l?.addEventListener("scroll", T, { passive: !0 }), l?.addEventListener("touchstart", S, { passive: !0 }), l?.addEventListener("pointerdown", C, { passive: !0 }), l?.addEventListener("keydown", w));
+	}
+	function D(e) {
+		c !== e && (c?.removeEventListener("scroll", b), c = e, c?.addEventListener("scroll", b, { passive: !0 }));
+	}
+	return n(() => {
+		D(e.scrollSource?.value ?? null), E(e.sidebarEl.value ?? null), t(() => y(!0)), window.addEventListener("resize", b);
+	}), s([e.activeId, e.activeRootId ?? { value: null }], () => {
+		t(() => y());
+	}, { flush: "post" }), s(e.sidebarEl, (e) => {
+		E(e);
+	}, { immediate: !0 }), s(() => e.scrollSource?.value ?? null, (e) => {
+		D(e);
+	}, { immediate: !0 }), r(() => {
+		a && cancelAnimationFrame(a), o && cancelAnimationFrame(o), c?.removeEventListener("scroll", b), l?.removeEventListener("wheel", x), l?.removeEventListener("scroll", T), l?.removeEventListener("touchstart", S), l?.removeEventListener("pointerdown", C), l?.removeEventListener("keydown", w), window.removeEventListener("resize", b);
+	}), { queueSidebarFollow: y };
+}
+//#endregion
+//#region src/composables/sidebar/useTreeIndex.ts
+function u(e, t) {
+	let n = t?.getChildren ?? ((e) => e.children), r = /* @__PURE__ */ new Map();
+	function i(t, a, o, s, c) {
+		for (let l of t) {
+			let t = a === 0 ? e.indexOf(l) : c, u = a === 0 ? l.id : s;
+			r.set(l.id, {
+				node: l,
+				depth: a,
+				rootId: u,
+				parentId: a === 0 ? l.id : o,
+				rootIndex: t
+			});
+			let d = n(l);
+			d && i(d, a + 1, a === 0 ? l.id : o, u, t);
+		}
+	}
+	i(e, 0, null, "", 0);
+	function a(e, t) {
+		return e === t;
+	}
+	function o(e, t) {
+		if (!t) return !1;
+		let n = r.get(t);
+		return n ? e === t || e === n.parentId ? !0 : r.get(e) ? s(t, e) : !1 : !1;
+	}
+	function s(e, t) {
+		let i = r.get(t);
+		if (!i) return !1;
+		let a = n(i.node);
+		if (!a) return !1;
+		for (let t of a) if (t.id === e || s(e, t.id)) return !0;
+		return !1;
+	}
+	return {
+		index: r,
+		isActive: a,
+		isInActiveChain: o,
+		isDescendant: s
+	};
+}
+function d(e) {
+	return u(e).index;
+}
+function f(e, t) {
+	return e === t;
+}
+function p(e, t, n, r) {
+	if (!t) return !1;
+	let i = n.get(t);
+	return i ? e === t || e === i.parentId ? !0 : n.get(e) ? m(t, e, n) : !1 : !1;
+}
+function m(e, t, n) {
+	let r = n.get(t);
+	if (!r) return !1;
+	let i = r.node.children;
+	if (!i) return !1;
+	for (let t of i) if (t.id === e || m(e, t.id, n)) return !0;
+	return !1;
+}
+//#endregion
+//#region src/composables/sidebar/useSidebarState.ts
+function h(t) {
+	let { index: n, isActive: r, isInActiveChain: a } = u(t.sections, { getChildren: t.getChildren }), s = i(/* @__PURE__ */ new Set()), c = i(/* @__PURE__ */ new Set());
+	function l(e) {
+		return c.has(e) ? !1 : s.has(e) ? !0 : o(t.activeRootId) === e;
+	}
+	function d(e) {
+		l(e) ? (s.delete(e), c.add(e)) : (c.delete(e), s.add(e));
+	}
+	function f(e) {
+		t.scrollTo(e);
+	}
+	function p(e) {
+		return r(e, o(t.activeId));
+	}
+	function m(e) {
+		return a(e, o(t.activeId));
+	}
+	let h = e(() => o(t.activeId)), g = e(() => o(t.activeRootId));
+	return {
+		sections: t.sections,
+		activeId: h,
+		activeRootId: g,
+		treeIndex: n,
+		isExpanded: l,
+		toggleSection: d,
+		navigateTo: f,
+		scrollToTop: t.scrollToTop,
+		isActive: p,
+		isInActiveChain: m
+	};
+}
+//#endregion
+export { d as buildTreeIndex, f as isActive, p as isInActiveChain, c as useScrollTracker, l as useSidebarFollow, h as useSidebarState, u as useTreeIndex };

package/dist/slider-BQaLYFLh.js

@@ -0,0 +1,133 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { t } from "./_plugin-vue_export-helper-n-_DRHWS.js";
+import { i as n } from "./dockContext-BDGSrwsV.js";
+import { t as r } from "./useTouchGate-BhhEMlwJ.js";
+import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createVNode as c, defineComponent as l, mergeProps as u, onBeforeUnmount as d, openBlock as f, renderList as p, unref as m, useTemplateRef as h, watch as g, withCtx as _ } from "vue";
+import { SliderRange as v, SliderRoot as y, SliderThumb as b, SliderTrack as x, useForwardPropsEmits as S } from "reka-ui";
+import { cva as C } from "class-variance-authority";
+//#endregion
+//#region src/components/ui/slider/Slider.vue
+var w = /* @__PURE__ */ t(/* @__PURE__ */ l({
+	__name: "Slider",
+	props: {
+		defaultValue: {},
+		modelValue: {},
+		disabled: { type: Boolean },
+		orientation: {},
+		dir: {},
+		inverted: { type: Boolean },
+		min: {},
+		max: {},
+		step: {},
+		minStepsBetweenThumbs: {},
+		thumbAlignment: {},
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		variant: {},
+		size: {},
+		keepDockOpen: { type: Boolean }
+	},
+	emits: ["update:modelValue", "valueCommit"],
+	setup(t, { emit: l }) {
+		let C = t, w = l, E = a(() => C.variant ?? "standard"), D = a(() => C.size ?? "md"), O = a(() => C.keepDockOpen ?? !0), k = S(a(() => {
+			let { class: e, variant: t, size: n, keepDockOpen: r, ...i } = C;
+			return (E.value === "timeline" || E.value === "glass-pill" || E.value === "glass-scrubber") && !i.thumbAlignment && (i.thumbAlignment = "contain"), i;
+		}), w), A = n(), j = !1;
+		function M() {
+			!O.value || j || (A?.keepOpen(), j = !0);
+		}
+		function N() {
+			j &&= (A?.release(), !1);
+		}
+		function P() {
+			if (M(), typeof window > "u") return;
+			let e = () => {
+				N(), window.removeEventListener("pointerup", e), window.removeEventListener("pointercancel", e);
+			};
+			window.addEventListener("pointerup", e), window.addEventListener("pointercancel", e);
+		}
+		let F = h("sliderRootRef"), I = r();
+		function L() {
+			let e = F.value;
+			return e ? e instanceof HTMLElement ? e : e.$el ?? null : null;
+		}
+		function R(e) {
+			let t = L(), n = e.touches[0];
+			!t || !n || I.handleTouchStart(t, n.clientY) || (e.preventDefault(), e.stopPropagation());
+		}
+		function z(e) {
+			I.handleScrollCheck(e);
+		}
+		function B() {
+			I.handleTouchEnd();
+		}
+		g(I.isActive, (e) => {
+			e ? M() : N();
+		}), d(N);
+		let V = a(() => A?.held.value === !0), H = a(() => I.isActive.value);
+		return (n, r) => (f(), o(m(y), u({
+			ref_key: "sliderRootRef",
+			ref: F,
+			class: m(e)(m(T)({
+				variant: E.value,
+				size: D.value
+			}), C.class),
+			"data-variant": E.value,
+			"data-size": D.value,
+			"data-held": V.value || void 0,
+			"data-touch-active": H.value || void 0
+		}, m(k), {
+			onPointerdown: P,
+			onTouchstart: R,
+			onTouchmove: z,
+			onTouchend: B
+		}), {
+			default: _(() => [c(m(x), { class: "slider-track" }, {
+				default: _(() => [c(m(v), { class: "slider-range" })]),
+				_: 1
+			}), (f(!0), s(i, null, p(t.modelValue, (e, t) => (f(), o(m(b), {
+				key: t,
+				"aria-label": n.$attrs["aria-label"] ?? void 0,
+				class: "slider-thumb"
+			}, null, 8, ["aria-label"]))), 128))]),
+			_: 1
+		}, 16, [
+			"class",
+			"data-variant",
+			"data-size",
+			"data-held",
+			"data-touch-active"
+		]));
+	}
+}), [["__scopeId", "data-v-41099404"]]), T = C("glass-slider focus-ring relative flex w-full touch-none select-none items-center transition-colors", {
+	variants: {
+		variant: {
+			standard: "",
+			spectrum: "",
+			timeline: "",
+			"glass-pill": "",
+			"glass-cartoon": "",
+			"glass-scrubber": ""
+		},
+		size: {
+			sm: "[--slider-track-height:0.25rem] [--slider-thumb-size:0.75rem]",
+			md: "[--slider-track-height:0.375rem] [--slider-thumb-size:1rem]",
+			lg: "[--slider-track-height:0.75rem] [--slider-thumb-size:1.5rem]"
+		}
+	},
+	defaultVariants: {
+		variant: "standard",
+		size: "md"
+	}
+});
+//#endregion
+export { w as n, T as t };

package/dist/slider.d.ts

@@ -0,0 +1 @@
+export * from "./components/ui/slider";

package/dist/slider.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./slider-BQaLYFLh.js";
+export { e as Slider, t as sliderVariants };

package/dist/sortable-list.d.ts

@@ -0,0 +1 @@
+export * from "./components/custom/sortable-list";

package/dist/sortable-list.js

@@ -0,0 +1,85 @@
+import { t as e } from "./_plugin-vue_export-helper-n-_DRHWS.js";
+import { t } from "./useSortable-Ck0rBJ4g.js";
+import { computed as n, createBlock as r, defineComponent as i, inject as a, mergeProps as o, openBlock as s, provide as c, renderSlot as l, resolveDynamicComponent as u, toRef as d, unref as f, withCtx as p } from "vue";
+//#region src/components/custom/sortable-list/context.ts
+var m = Symbol("glass-ui:sortable");
+function h(e) {
+	c(m, e);
+}
+function g() {
+	let e = a(m);
+	if (!e) throw Error("[glass-ui:sortable] <SortableItem> must be used inside <SortableList>");
+	return e;
+}
+//#endregion
+//#region src/components/custom/sortable-list/SortableList.vue
+var _ = /* @__PURE__ */ i({
+	__name: "SortableList",
+	props: {
+		items: {},
+		getId: {},
+		group: {},
+		handleSelector: { default: "[data-sortable-handle]" },
+		axis: { default: "y" },
+		as: { default: "div" }
+	},
+	emits: ["reorder", "insert"],
+	setup(e, { expose: n, emit: i }) {
+		let a = e, c = i, m = t({
+			items: d(a, "items"),
+			getId: a.getId,
+			group: a.group,
+			handleSelector: a.handleSelector,
+			axis: a.axis,
+			onReorder: (e) => c("reorder", e),
+			onInsert: (e, t) => c("insert", e, t)
+		});
+		return h(m), n({
+			isDragging: m.isDragging,
+			dragId: m.dragId
+		}), (t, n) => (s(), r(u(e.as), o({ ref: f(m).container.ref }, f(m).container.dataAttrs), {
+			default: p(() => [l(t.$slots, "default", {
+				isDragging: f(m).isDragging.value,
+				dragId: f(m).dragId.value
+			})]),
+			_: 3
+		}, 16));
+	}
+}), v = /* @__PURE__ */ e(/* @__PURE__ */ i({
+	__name: "SortableItem",
+	props: {
+		id: {},
+		as: { default: "div" }
+	},
+	setup(e) {
+		let t = e, i = g(), a = n(() => i.registerItem(t.id)), c = n(() => i.dragId.value === t.id);
+		return (t, n) => (s(), r(u(e.as), o({
+			ref: a.value.ref,
+			class: [
+				"sortable-item",
+				a.value.class.value,
+				{ "is-sortable-dragging": c.value }
+			]
+		}, a.value.dataAttrs, { onPointerdown: a.value.onPointerdown }), {
+			default: p(() => [l(t.$slots, "default", { isBeingDragged: c.value }, void 0, !0)]),
+			_: 3
+		}, 16, ["class", "onPointerdown"]));
+	}
+}), [["__scopeId", "data-v-ca5cd3d7"]]), y = /* @__PURE__ */ e(/* @__PURE__ */ i({
+	__name: "SortableHandle",
+	props: { as: { default: "span" } },
+	setup(e) {
+		let t = e, i = n(() => t.as === "span");
+		return (t, n) => (s(), r(u(e.as), {
+			class: "sortable-handle",
+			"data-sortable-handle": "",
+			role: i.value ? "button" : void 0,
+			tabindex: i.value ? 0 : void 0
+		}, {
+			default: p(() => [l(t.$slots, "default", {}, void 0, !0)]),
+			_: 3
+		}, 8, ["role", "tabindex"]));
+	}
+}), [["__scopeId", "data-v-695f8df8"]]);
+//#endregion
+export { m as SORTABLE_CONTEXT, y as SortableHandle, v as SortableItem, _ as SortableList, h as provideSortableContext, g as useSortableContext };

package/dist/stacked-icons.d.ts

@@ -0,0 +1 @@
+export * from "./components/custom/stacked-icons";

package/dist/stacked-icons.js

@@ -0,0 +1,83 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, withCtx as m } from "vue";
+//#region src/components/custom/stacked-icons/StackedIconGroup.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	key: 1,
+	style: { zIndex: 0 }
+}, g = /* @__PURE__ */ o({
+	__name: "StackedIconGroup",
+	props: {
+		items: {},
+		maxVisible: { default: 3 },
+		direction: { default: "horizontal" },
+		reversed: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		expandOnHover: {
+			type: Boolean,
+			default: !0
+		},
+		as: { default: "div" },
+		keyFn: {}
+	},
+	setup(o) {
+		let g = o, _ = t(() => {
+			switch (g.size) {
+				case "sm": return "h-6 w-6";
+				case "md": return "h-8 w-8";
+				case "lg": return "h-10 w-10";
+			}
+		}), v = t(() => {
+			if (g.direction === "vertical") switch (g.size) {
+				case "sm": return "-mt-[var(--stack-overlap-sm)]";
+				case "md": return "-mt-[var(--stack-overlap-md)]";
+				case "lg": return "-mt-[var(--stack-overlap-lg)]";
+			}
+			switch (g.size) {
+				case "sm": return "-ml-[var(--stack-overlap-sm)]";
+				case "md": return "-ml-[var(--stack-overlap-md)]";
+				case "lg": return "-ml-[var(--stack-overlap-lg)]";
+			}
+		}), y = t(() => g.items.slice(0, g.maxVisible)), b = t(() => Math.max(0, g.items.length - g.maxVisible));
+		return (t, g) => (l(), n(f(o.as), { class: s([
+			"group/stack relative isolate flex",
+			o.direction === "vertical" ? "flex-col" : "items-center",
+			o.reversed ? o.direction === "vertical" ? "flex-col-reverse" : "flex-row-reverse" : ""
+		]) }, {
+			default: m(() => [
+				(l(!0), i(e, null, u(y.value, (e, n) => (l(), i("div", {
+					key: o.keyFn?.(e, n) ?? n,
+					class: s([
+						_.value,
+						"relative flex items-center justify-center rounded-pill transform-gpu",
+						"transition-[transform,box-shadow,opacity] duration-[var(--duration-fast)] ease-[var(--spring-snappy)]",
+						n > 0 ? v.value : "",
+						o.expandOnHover && n > 0 ? o.direction === "vertical" ? "group-hover/stack:translate-y-1.5 group-hover/stack:scale-105" : "group-hover/stack:translate-x-1.5 group-hover/stack:scale-105" : ""
+					]),
+					style: c({ zIndex: y.value.length + 1 - n })
+				}, [d(t.$slots, "icon", {
+					item: e,
+					index: n
+				})], 6))), 128)),
+				b.value > 0 ? (l(), i("div", {
+					key: 0,
+					class: s([
+						_.value,
+						"relative flex items-center justify-center rounded-pill",
+						"border-2 border-background bg-[color-mix(in_srgb,var(--background)_96%,transparent)] text-xs font-semibold text-muted-foreground/60 shadow-cartoon-sm",
+						"transform-gpu transition-[background-color,color,transform,box-shadow] duration-[var(--duration-fast)] ease-[var(--spring-snappy)]",
+						"hover:bg-background hover:text-muted-foreground hover:shadow-cartoon-md",
+						v.value,
+						o.expandOnHover ? o.direction === "vertical" ? "group-hover/stack:translate-y-1.5 group-hover/stack:scale-105" : "group-hover/stack:translate-x-1.5 group-hover/stack:scale-105" : ""
+					]),
+					style: { zIndex: 1 }
+				}, [d(t.$slots, "overflow", { count: b.value }, () => [a(" +" + p(b.value), 1)])], 2)) : r("", !0),
+				b.value === 0 && t.$slots.info ? (l(), i("div", h, [d(t.$slots, "info")])) : r("", !0)
+			]),
+			_: 3
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { g as StackedIconGroup };

package/dist/status-dot.d.ts

@@ -0,0 +1 @@
+export * from "./components/custom/status-dot";

package/dist/status-dot.js

@@ -0,0 +1,58 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, toDisplayString as l, unref as u } from "vue";
+//#region src/components/custom/status-dot/StatusDot.vue?vue&type=script&setup=true&lang.ts
+var d = ["role"], f = {
+	key: 0,
+	class: "text-xs leading-none text-muted-foreground"
+}, p = /* @__PURE__ */ a({
+	name: "StatusDot",
+	__name: "StatusDot",
+	props: {
+		variant: { default: "active" },
+		color: {},
+		pulse: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "sm" },
+		label: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(a) {
+		let p = a, m = t(() => {
+			switch (p.size) {
+				case "xs": return "h-1.5 w-1.5";
+				case "md": return "h-2.5 w-2.5";
+				default: return "h-2 w-2";
+			}
+		}), h = t(() => p.variant === "custom" ? p.color ?? "var(--muted-foreground)" : {
+			active: "var(--color-status-active, hsl(142 71% 45%))",
+			paused: "var(--color-status-paused, hsl(48 96% 53%))",
+			idle: "var(--color-status-idle, var(--muted-foreground))",
+			error: "var(--color-status-error, var(--destructive))"
+		}[p.variant]), g = t(() => ({ backgroundColor: h.value })), _ = t(() => ({ backgroundColor: h.value }));
+		return (t, h) => (c(), r("span", {
+			role: t.$attrs["aria-label"] == null ? void 0 : "img",
+			class: o(u(e)("inline-flex items-center gap-1.5 align-middle", p.class))
+		}, [i("span", {
+			class: o(u(e)("relative inline-flex shrink-0 rounded-pill", m.value)),
+			style: s(g.value)
+		}, [a.pulse ? (c(), r("span", {
+			key: 0,
+			"aria-hidden": "true",
+			class: "absolute inset-0 rounded-pill opacity-60 motion-safe:animate-ping",
+			style: s(_.value)
+		}, null, 4)) : n("", !0), i("span", {
+			class: "relative inline-block h-full w-full rounded-pill",
+			style: s(g.value)
+		}, null, 4)], 6), a.label ? (c(), r("span", f, l(a.label), 1)) : n("", !0)], 10, d));
+	}
+});
+//#endregion
+export { p as StatusDot };