@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/Label-C84TaQiw.js

@@ -0,0 +1,36 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, unref as l, withCtx as u } from "vue";
+import { Label as d } from "reka-ui";
+//#region src/components/label/Label.vue?vue&type=script&setup=true&lang.ts
+var f = {
+	key: 0,
+	class: "text-destructive",
+	"aria-hidden": "true"
+}, p = /* @__PURE__ */ a({
+	__name: "Label",
+	props: {
+		for: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		required: { type: Boolean }
+	},
+	setup(a) {
+		let p = a, m = t(() => {
+			let { class: e, required: t, ...n } = p;
+			return n;
+		});
+		return (t, h) => (s(), n(l(d), o({ "data-slot": "label" }, m.value, { class: l(e)("text-small font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", p.class) }), {
+			default: u(() => [c(t.$slots, "default"), a.required ? (s(), i("span", f, " *")) : r("", !0)]),
+			_: 3
+		}, 16, ["class"]));
+	}
+});
+//#endregion
+export { p as t };

package/dist/Notification-DQv2cOh9.js

@@ -0,0 +1,43 @@
+import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { Fragment as t, TransitionGroup as n, createBlock as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderList as u, resolveDynamicComponent as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+import { AlertCircle as h, CheckCircle as g, Info as _, X as v, XCircle as y } from "@lucide/vue";
+//#region src/components/notification/Notification.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "flex-1 text-sm font-medium" }, x = ["onClick"], S = /* @__PURE__ */ e(/* @__PURE__ */ s({
+	__name: "Notification",
+	props: { notifications: {} },
+	emits: ["remove"],
+	setup(e) {
+		let s = {
+			success: "feedback-tone-success",
+			destructive: "feedback-tone-destructive",
+			warning: "feedback-tone-warning",
+			info: "feedback-tone-info"
+		}, S = {
+			success: g,
+			destructive: y,
+			warning: h,
+			info: _
+		};
+		return (h, g) => (l(), r(n, {
+			"data-slot": "notification",
+			name: "notification",
+			tag: "div",
+			class: "fixed bottom-4 right-4 z-toast flex flex-col gap-2"
+		}, {
+			default: m(() => [(l(!0), i(t, null, u(e.notifications, (e) => (l(), i("div", {
+				key: e.id,
+				class: c(["glass-floating feedback-tone flex items-center gap-3 rounded-panel px-4 py-3 text-foreground", [s[e.tone], "min-w-[300px] max-w-[500px]"]])
+			}, [
+				(l(), r(d(S[e.tone]), { class: "feedback-tone-glyph h-5 w-5 flex-shrink-0" })),
+				a("p", b, f(e.message), 1),
+				a("button", {
+					onClick: (t) => h.$emit("remove", e.id),
+					class: "rounded-button p-1 transition-colors hover:bg-white/10"
+				}, [o(p(v), { class: "h-4 w-4" })], 8, x)
+			], 2))), 128))]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-743f180c"]]);
+//#endregion
+export { S as t };

package/dist/NumberFieldContent-BkE7xPS9.js

@@ -0,0 +1,140 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { n as t } from "./button-BXzhydVB.js";
+import { t as n } from "./useControlSize-DJwe-7ZQ.js";
+import { computed as r, createBlock as i, createElementBlock as a, createVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, openBlock as u, renderSlot as d, unref as f, withCtx as p } from "vue";
+import { NumberFieldDecrement as m, NumberFieldIncrement as h, NumberFieldInput as g, NumberFieldRoot as _, useForwardProps as v, useForwardPropsEmits as y } from "reka-ui";
+import { Minus as b, Plus as x } from "@lucide/vue";
+//#endregion
+//#region src/components/number-field/NumberField.vue
+var S = /* @__PURE__ */ s({
+	__name: "NumberField",
+	props: {
+		defaultValue: {},
+		modelValue: {},
+		min: {},
+		max: {},
+		step: {},
+		stepSnapping: { type: Boolean },
+		focusOnChange: { type: Boolean },
+		formatOptions: {},
+		locale: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		disableWheelChange: { type: Boolean },
+		invertWheelChange: { type: Boolean },
+		id: {},
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: n }) {
+		let a = t, o = n, s = y(r(() => {
+			let { class: e, ...t } = a;
+			return t;
+		}), o);
+		return (t, n) => (u(), i(f(_), c({ "data-slot": "number-field" }, f(s), { class: f(e)("grid gap-1.5", a.class) }), {
+			default: p(() => [d(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), C = /* @__PURE__ */ s({
+	inheritAttrs: !1,
+	__name: "NumberFieldInput",
+	props: { size: {} },
+	setup(t) {
+		let r = t, a = { inputmode: "decimal" };
+		return (t, o) => (u(), i(f(g), c({
+			...a,
+			...t.$attrs
+		}, {
+			"data-slot": "input",
+			class: f(e)("input-pill glass-control-edge rounded-field px-9 py-2 text-center", f(n)(r.size))
+		}), null, 16, ["class"]));
+	}
+}), w = /* @__PURE__ */ s({
+	__name: "NumberFieldIncrement",
+	props: {
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(n) {
+		let a = n, s = v(r(() => {
+			let { class: e, ...t } = a;
+			return t;
+		}));
+		return (n, r) => (u(), i(f(h), c({ "data-slot": "increment" }, f(s), { "as-child": "" }), {
+			default: p(() => [o(f(t), {
+				variant: "ghost",
+				iconOnly: "",
+				class: l(f(e)("absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20", a.class))
+			}, {
+				default: p(() => [d(n.$slots, "default", {}, () => [o(f(x), { class: "size-icon-sm" })])]),
+				_: 3
+			}, 8, ["class"])]),
+			_: 3
+		}, 16));
+	}
+}), T = /* @__PURE__ */ s({
+	__name: "NumberFieldDecrement",
+	props: {
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(n) {
+		let a = n, s = v(r(() => {
+			let { class: e, ...t } = a;
+			return t;
+		}));
+		return (n, r) => (u(), i(f(m), c({ "data-slot": "decrement" }, f(s), { "as-child": "" }), {
+			default: p(() => [o(f(t), {
+				variant: "ghost",
+				iconOnly: "",
+				class: l(f(e)("absolute top-1/2 -translate-y-1/2 left-0 disabled:cursor-not-allowed disabled:opacity-20", a.class))
+			}, {
+				default: p(() => [d(n.$slots, "default", {}, () => [o(f(b), { class: "size-icon-sm" })])]),
+				_: 3
+			}, 8, ["class"])]),
+			_: 3
+		}, 16));
+	}
+}), E = /* @__PURE__ */ s({
+	__name: "NumberFieldContent",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (u(), a("div", { class: l(f(e)("relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5", n.class)) }, [d(t.$slots, "default")], 2));
+	}
+});
+//#endregion
+export { S as a, C as i, T as n, w as r, E as t };

package/dist/PagerDots-BP6jh7z4.js

@@ -0,0 +1,279 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { t } from "./useLiquidFlex-Ch4exNvN.js";
+import { t as n } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { t as r } from "./useResizeObserver-DDuoBeBo.js";
+import { t as i } from "./useLeadTrail-DOH4XkL1.js";
+import { Fragment as a, computed as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeModels as u, nextTick as d, normalizeClass as f, onMounted as p, openBlock as m, ref as h, renderList as g, unref as _, useModel as v, watch as y } from "vue";
+//#region src/components/pager-dots/pagerWindow.ts
+function b(e, t, n) {
+	let r = Math.max(1, Math.min(n, e)), i = e <= r ? 0 : Math.max(0, Math.min(t - Math.floor(r / 2), e - r)), a = Math.min(r, e), o = Array.from({ length: a }, (e, t) => i + t);
+	return {
+		shown: o,
+		clippedStart: o.length > 0 && o[0] > 0,
+		clippedEnd: o.length > 0 && o[o.length - 1] < e - 1
+	};
+}
+var x = .7;
+//#endregion
+//#region src/components/pager-dots/composables/usePagerWorm.ts
+function S(e, t, n) {
+	if (!e) return n;
+	let r = getComputedStyle(e).getPropertyValue(t).trim();
+	if (!r) return n;
+	if (r.endsWith("rem")) {
+		let e = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+		return (parseFloat(r) || .8125) * e;
+	}
+	return parseFloat(r) || n;
+}
+function C(e) {
+	let { rootEl: n, wormLayerEl: a, bodyAEl: o, bodyBEl: s, neckEl: c, bedDotEls: l, shown: u, vertical: f, active: m } = e, h = t({
+		from: 0,
+		to: 0,
+		axis: "width",
+		squishLaw: "linear",
+		maxStretch: () => S(n.value, "--pager-worm-max-stretch", 1.2) || 1.2
+	});
+	function g(e) {
+		let t = a.value;
+		if (!t) return null;
+		let n = l.get(e);
+		if (!n) {
+			let t = u.value;
+			if (t.length === 0) return null;
+			let r = t.reduce((t, n) => Math.abs(n - e) < Math.abs(t - e) ? n : t);
+			if (n = l.get(r), !n) return null;
+		}
+		let r = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+		return f.value ? i.top + i.height / 2 - r.top : i.left + i.width / 2 - r.left;
+	}
+	function _(e) {
+		let t = o.value, r = s.value, i = c.value, l = a.value;
+		if (!t || !r || !i || !l) return;
+		let u = f.value, d = S(n.value, "--pager-dot-size", 13), p = S(n.value, "--pager-dot-elongated", 36), m = e.hi - e.lo;
+		m > p && (m = p);
+		let g = (e.lo + e.hi) / 2, _ = g - m / 2, y = g + m / 2;
+		h.squish(p > 0 ? m / p : 0), l.style.setProperty("--stretch", h.stretch.value.toFixed(4)), t.style.translate = v(_, u), r.style.translate = v(y, u);
+		let b = d > 0 ? Math.max(m / d, 1e-4) : 1e-4;
+		i.style.translate = v(g, u), i.style.scale = u ? `${x.toFixed(4)} ${b.toFixed(4)}` : `${b.toFixed(4)} ${x.toFixed(4)}`, i.style.opacity = m > .5 ? "1" : "0";
+	}
+	function v(e, t) {
+		return t ? `0 ${e.toFixed(2)}px` : `${e.toFixed(2)}px 0`;
+	}
+	let b = i({ onFrame: _ });
+	function C() {
+		let e = g(m.value);
+		e != null && b.seat(e);
+	}
+	function w() {
+		let e = g(m.value);
+		e != null && b.drive(e);
+	}
+	y(m, () => {
+		d(w);
+	}), y(u, () => {
+		d(w);
+	}), r(n, () => {
+		d(C);
+	}), p(() => {
+		d(C);
+	});
+}
+//#endregion
+//#region src/components/pager-dots/PagerDots.vue?vue&type=script&setup=true&lang.ts
+var w = [
+	"role",
+	"aria-label",
+	"aria-orientation",
+	"data-orientation"
+], T = {
+	class: "pager-bed-layer",
+	"aria-hidden": "true"
+}, E = ["data-active", "data-edge"], D = [
+	"role",
+	"aria-selected",
+	"aria-current",
+	"aria-label",
+	"tabindex",
+	"data-active",
+	"data-edge",
+	"onClick"
+], O = /* @__PURE__ */ n(/* @__PURE__ */ l({
+	__name: "PagerDots",
+	props: /* @__PURE__ */ u({
+		count: {},
+		orientation: { default: "horizontal" },
+		windowFit: {},
+		ring: {
+			type: Boolean,
+			default: !0
+		},
+		pattern: { default: "tabs" },
+		ariaLabel: { default: "Pager" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	}, {
+		active: { default: 0 },
+		activeModifiers: {}
+	}),
+	emits: /* @__PURE__ */ u(["select"], ["update:active"]),
+	setup(t, { emit: n }) {
+		let r = t, i = n, l = v(t, "active"), u = h(null), p = h(null), x = h(null), S = h(null), O = h(null), k = /* @__PURE__ */ new Map();
+		function A(e, t) {
+			t ? k.set(e, t) : k.delete(e);
+		}
+		let j = /* @__PURE__ */ new Map();
+		function M(e, t) {
+			t ? j.set(e, t) : j.delete(e);
+		}
+		let N = o(() => r.orientation === "vertical"), P = o(() => r.windowFit && r.windowFit > 0 ? b(r.count, l.value, r.windowFit) : {
+			shown: Array.from({ length: Math.max(0, r.count) }, (e, t) => t),
+			clippedStart: !1,
+			clippedEnd: !1
+		}), F = o(() => P.value.shown);
+		C({
+			rootEl: u,
+			wormLayerEl: p,
+			bodyAEl: x,
+			bodyBEl: S,
+			neckEl: O,
+			bedDotEls: j,
+			shown: F,
+			vertical: N,
+			active: l
+		}), y(F, (e) => {
+			let t = u.value;
+			if (!t || !t.contains(document.activeElement)) return;
+			let n = document.activeElement;
+			e.some((e) => k.get(e) === n) || d(() => k.get(l.value)?.focus());
+		});
+		function I(e) {
+			l.value = e, i("select", e);
+		}
+		let L = o(() => {
+			let e = F.value;
+			return e.length === 0 ? -1 : e.includes(l.value) ? l.value : e[0];
+		});
+		function R(e) {
+			return e === L.value ? 0 : -1;
+		}
+		function z(e) {
+			I(e), d(() => k.get(e)?.focus());
+		}
+		function B(e, t) {
+			let n = r.count;
+			if (n !== 0) for (let r = 1; r <= n; r++) {
+				let i = (e + t * r + n * r) % n;
+				if (!k.get(i)?.disabled) {
+					z(i);
+					return;
+				}
+			}
+		}
+		function V(e) {
+			let t = r.count;
+			if (t === 0) return;
+			let n = e === "first" ? Array.from({ length: t }, (e, t) => t) : Array.from({ length: t }, (e, n) => t - 1 - n);
+			for (let e of n) if (!k.get(e)?.disabled) {
+				z(e);
+				return;
+			}
+		}
+		function H(e) {
+			let t = l.value, n = N.value ? "ArrowDown" : "ArrowRight", r = N.value ? "ArrowUp" : "ArrowLeft", i = !0;
+			switch (e.key) {
+				case n:
+					B(t, 1);
+					break;
+				case r:
+					B(t, -1);
+					break;
+				case "Home":
+					V("first");
+					break;
+				case "End":
+					V("last");
+					break;
+				default:
+					i = !1;
+					break;
+			}
+			i && (e.preventDefault(), e.stopPropagation());
+		}
+		return (n, i) => (m(), s("div", {
+			ref_key: "rootEl",
+			ref: u,
+			"data-slot": "pager-dots",
+			role: t.pattern === "group" ? "group" : "tablist",
+			"aria-label": t.ariaLabel,
+			"aria-orientation": t.pattern === "group" ? void 0 : t.orientation,
+			"data-orientation": t.orientation,
+			onKeydown: H,
+			class: f(_(e)("pager-dots inline-flex items-center justify-center gap-1.5", t.ring && "glass-pager-ring", t.orientation === "vertical" && "flex-col", r.class))
+		}, [
+			i[0] ||= c("svg", {
+				class: "pager-worm-defs",
+				width: "0",
+				height: "0",
+				"aria-hidden": "true",
+				focusable: "false"
+			}, [c("defs", null, [c("clipPath", {
+				id: "pager-neck-throat",
+				clipPathUnits: "objectBoundingBox"
+			}, [c("path", { d: "M0,0 C0.25,0 0.36,0.34 0.5,0.34 C0.64,0.34 0.75,0 1,0 L1,1 C0.75,1 0.64,0.66 0.5,0.66 C0.36,0.66 0.25,1 0,1 Z" })])])], -1),
+			c("div", T, [(m(!0), s(a, null, g(F.value, (e) => (m(), s("span", {
+				key: e,
+				ref_for: !0,
+				ref: (t) => M(e, t),
+				class: "goo-dot",
+				"data-active": e === l.value ? "" : void 0,
+				"data-edge": e === F.value[0] && P.value.clippedStart || e === F.value[F.value.length - 1] && P.value.clippedEnd ? "" : void 0
+			}, null, 8, E))), 128))]),
+			c("div", {
+				ref_key: "wormLayerEl",
+				ref: p,
+				class: "pager-worm-layer",
+				"aria-hidden": "true"
+			}, [
+				c("span", {
+					ref_key: "bodyAEl",
+					ref: x,
+					class: "goo-body"
+				}, null, 512),
+				c("span", {
+					ref_key: "neckEl",
+					ref: O,
+					class: "goo-neck"
+				}, null, 512),
+				c("span", {
+					ref_key: "bodyBEl",
+					ref: S,
+					class: "goo-body"
+				}, null, 512)
+			], 512),
+			(m(!0), s(a, null, g(F.value, (e, n) => (m(), s("button", {
+				key: e,
+				ref_for: !0,
+				ref: (t) => A(e, t),
+				type: "button",
+				role: t.pattern === "group" ? void 0 : "tab",
+				"aria-selected": t.pattern === "group" ? void 0 : e === l.value,
+				"aria-current": t.pattern === "group" && e === l.value ? "true" : void 0,
+				"aria-label": `Go to slide ${e + 1}`,
+				tabindex: R(e),
+				"data-active": e === l.value ? "" : void 0,
+				"data-edge": n === 0 && P.value.clippedStart || n === F.value.length - 1 && P.value.clippedEnd ? "" : void 0,
+				"data-slot": "pager-dot",
+				class: "pager-dot focus-ring tap-squish",
+				onClick: (t) => I(e)
+			}, null, 8, D))), 128))
+		], 42, w));
+	}
+}), [["__scopeId", "data-v-76ecc9b4"]]);
+//#endregion
+export { b as n, O as t };

package/dist/PaperBackdrop-BYwE8_kg.js

@@ -0,0 +1,31 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { computed as t, createElementBlock as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, openBlock as o, unref as s } from "vue";
+//#endregion
+//#region src/components/paper-backdrop/PaperBackdrop.vue
+var c = /* @__PURE__ */ r({
+	__name: "PaperBackdrop",
+	props: {
+		opacity: {},
+		frequency: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(r) {
+		let c = r, l = t(() => {
+			let e = {};
+			return c.opacity !== void 0 && (e.opacity = String(c.opacity)), c.frequency === "aged" && (e.backgroundImage = "var(--paper-aged-texture)"), e;
+		});
+		return (t, r) => (o(), n("div", {
+			class: i(s(e)("paper-underpaint", c.class)),
+			style: a(l.value),
+			"aria-hidden": "true"
+		}, null, 6));
+	}
+});
+//#endregion
+export { c as t };