@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/watercolor-dot.js

@@ -1,95 +1,83 @@
-import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { t } from "./useRAFLoop-CvOo_kgb.js";
-import { n, t as r } from "./prng-B0PLRmR6.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderSlot as m, resolveDynamicComponent as h, toRef as g, useId as _, watch as v, withCtx as y } from "vue";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t } from "./useRAFLoop-B3YlWK4M.js";
+import { n, t as r } from "./prng-2uS6J_A1.js";
+import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, toRef as p, unref as m, useAttrs as h, useId as g, watch as _ } from "vue";
 //#region src/components/watercolor-dot/prng.ts
-function b(e, t, n) {
+function v(e, t, n) {
 	let r = [];
 	for (let i = 0; i < 8; i++) r.push(t + e() * (n - t));
 	return r;
 }
-function x(e) {
+function y(e) {
 	return `${e[0]}% ${e[1]}% ${e[2]}% ${e[3]}% / ${e[4]}% ${e[5]}% ${e[6]}% ${e[7]}%`;
 }
 //#endregion
 //#region src/components/watercolor-dot/useWatercolorBlob.ts
-var S = [
+var b = [
 	"scaleX",
 	"scaleY",
 	"skewX",
 	"skewY",
 	"rotate"
-], C = {
+], x = {
 	scaleX: .045,
 	scaleY: .045,
 	skewX: 1.6,
 	skewY: 1.6,
 	rotate: 1.4
 };
-function w(e, i = {}) {
-	let { animate: a = !1, cycleDuration: o = 4e3, range: s = [20, 80], seed: c = "" } = i, l = p(""), u = p(""), d = p("none"), f = n(r((typeof e == "function" ? e : () => e.value)() + c));
-	l.value = x(b(f, s[0], s[1])), u.value = x(b(f, s[0], s[1]));
-	let m = () => {};
-	if (!a) return typeof e != "function" && v(e, (e) => {
+function S(e, i = {}) {
+	let { animate: a = !1, cycleDuration: o = 4e3, range: s = [20, 80], seed: c = "" } = i, l = f(""), u = f("none"), d = n(r((typeof e == "function" ? e : () => e.value)() + c));
+	if (l.value = y(v(d, s[0], s[1])), !a) return typeof e != "function" && _(e, (e) => {
 		let t = n(r(e + c));
-		l.value = x(b(t, s[0], s[1])), u.value = x(b(t, s[0], s[1]));
+		l.value = y(v(t, s[0], s[1]));
 	}), {
 		borderRadius: l,
-		hoverBorderRadius: u,
-		transform: d,
-		nudge: m
+		transform: u
 	};
-	let h = [];
-	for (let e = 0; e < S.length; e++) {
-		let t = C[S[e] ?? "scaleX"], n = .5 + f() * 1.3, r = f();
-		h.push({
+	let p = [];
+	for (let e = 0; e < b.length; e++) {
+		let t = x[b[e] ?? "scaleX"], n = .5 + d() * 1.3, r = d();
+		p.push({
 			from: 0,
-			to: -1 + f() * 2,
+			to: -1 + d() * 2,
 			startTime: -r * o * n,
 			duration: o * n,
 			amp: t
 		});
 	}
-	let g = 0, _ = h.map(() => 0);
-	function y() {
-		let e = 1 + _[0] * h[0].amp, t = 1 + _[1] * h[1].amp, n = _[2] * h[2].amp, r = _[3] * h[3].amp, i = _[4] * h[4].amp;
+	let m = p.map(() => 0);
+	function h() {
+		let e = 1 + m[0] * p[0].amp, t = 1 + m[1] * p[1].amp, n = m[2] * p[2].amp, r = m[3] * p[3].amp, i = m[4] * p[4].amp;
 		return `scale(${e.toFixed(4)}, ${t.toFixed(4)}) skew(${n.toFixed(3)}deg, ${r.toFixed(3)}deg) rotate(${i.toFixed(3)}deg)`;
 	}
-	function w(e) {
-		g = e;
-		for (let t = 0; t < h.length; t++) {
-			let n = h[t];
+	function g(e) {
+		for (let t = 0; t < p.length; t++) {
+			let n = p[t];
 			if (!n) continue;
 			let r = (e - n.startTime) / n.duration;
-			r >= 1 && (n.from = n.to, n.to = -1 + f() * 2, n.duration = o * (.5 + f() * 1.3), n.startTime = e, r = 0);
+			r >= 1 && (n.from = n.to, n.to = -1 + d() * 2, n.duration = o * (.5 + d() * 1.3), n.startTime = e, r = 0);
 			let i = .5 - .5 * Math.cos(Math.PI * r);
-			_[t] = n.from + i * (n.to - n.from);
+			m[t] = n.from + i * (n.to - n.from);
 		}
-		d.value = y();
+		u.value = h();
 	}
-	return m = () => {
-		let e = g || performance.now();
-		for (let t = 0; t < h.length; t++) {
-			let n = h[t];
-			n && (n.from = _[t] ?? n.from, n.to = -1 + f() * 2, n.duration = o * (.25 + f() * .25), n.startTime = e);
-		}
-	}, t((e) => w(e.now), {
+	return t((e) => g(e.now), {
 		pauseWhenHidden: !0,
 		respectReducedMotion: !0
 	}), {
 		borderRadius: l,
-		hoverBorderRadius: u,
-		transform: d,
-		nudge: m
+		transform: u
 	};
 }
 //#endregion
 //#region src/components/watercolor-dot/WatercolorDot.vue?vue&type=script&setup=true&lang.ts
-var T = {
+var C = ["data-variant"], w = {
 	class: "watercolor-filter-host",
 	"aria-hidden": "true",
 	focusable: "false"
-}, E = ["seed"], D = /* @__PURE__ */ e(/* @__PURE__ */ l({
+}, T = ["seed"], E = /*#__PURE__*/ e(/* @__PURE__ */ c({
+	inheritAttrs: !1,
 	__name: "WatercolorDot",
 	props: {
 		color: {},
@@ -98,76 +86,64 @@ var T = {
 			type: Boolean,
 			default: !1
 		},
-		tag: { default: "div" },
 		cycleDuration: { default: 4e3 },
 		range: { default: () => [20, 80] },
 		seed: { default: "" }
 	},
 	setup(e) {
-		let t = e, n = `watercolor-filter-${_().replace(/[^a-zA-Z0-9_-]/g, "")}`, l = i(() => `url(#${n})`), v = i(() => r(t.color + t.seed) % 256), b = g(t, "color"), x = p(!1), S = w(b, {
+		let t = e, n = h(), c = i(() => n.class), f = i(() => n.style), _ = `watercolor-filter-${g().replace(/[^a-zA-Z0-9_-]/g, "")}`, v = i(() => `url(#${_})`), y = i(() => r(t.color + t.seed) % 256), { borderRadius: b, transform: x } = S(p(t, "color"), {
 			animate: t.animate,
 			cycleDuration: t.cycleDuration,
 			range: t.range,
 			seed: t.seed
 		});
-		function C() {
-			x.value = !0, t.animate && S.nudge();
-		}
-		let D = i(() => t.animate ? S.borderRadius.value : x.value ? S.hoverBorderRadius.value : S.borderRadius.value), O = i(() => t.animate ? S.transform.value : "none");
-		return (t, r) => (f(), a(h(e.tag), {
-			class: u(["watercolor-swatch", e.animate && "watercolor-animated"]),
+		return (t, n) => (d(), o("span", {
+			"aria-hidden": "true",
+			class: l([
+				c.value,
+				"watercolor-swatch",
+				e.animate && "watercolor-animated"
+			]),
 			"data-testid": "watercolor-swatch",
 			"data-variant": e.variant,
-			style: d({
+			style: u([f.value, {
 				backgroundColor: e.variant === "ghost" ? void 0 : e.color,
-				borderRadius: D.value,
+				borderRadius: m(b),
+				pointerEvents: "none",
 				"--watercolor-color": e.color,
-				"--watercolor-filter": l.value,
-				"--watercolor-wobble": O.value
-			}),
-			onMouseenter: C,
-			onMouseleave: r[0] ||= (e) => x.value = !1
-		}, {
-			default: y(() => [
-				(f(), s("svg", T, [c("defs", null, [c("filter", {
-					id: n,
-					x: "-15%",
-					y: "-15%",
-					width: "130%",
-					height: "130%",
-					"color-interpolation-filters": "linearRGB"
-				}, [c("feTurbulence", {
-					type: "fractalNoise",
-					baseFrequency: "0.05",
-					numOctaves: "5",
-					seed: v.value,
-					stitchTiles: "stitch",
-					result: "noise"
-				}, null, 8, E), r[1] ||= c("feDisplacementMap", {
-					in: "SourceGraphic",
-					in2: "noise",
-					scale: "1.3",
-					xChannelSelector: "R",
-					yChannelSelector: "G"
-				}, null, -1)])])])),
-				e.variant === "ghost" ? (f(), s("div", {
-					key: 0,
-					class: "watercolor-ghost-stroke",
-					"aria-hidden": "true",
-					style: d({
-						borderRadius: D.value,
-						filter: l.value
-					})
-				}, null, 4)) : o("", !0),
-				m(t.$slots, "default", {}, void 0, !0)
-			]),
-			_: 3
-		}, 40, [
-			"class",
-			"data-variant",
-			"style"
-		]));
+				"--watercolor-filter": v.value,
+				"--watercolor-wobble": m(x)
+			}])
+		}, [(d(), o("svg", w, [s("defs", null, [s("filter", {
+			id: _,
+			x: "-15%",
+			y: "-15%",
+			width: "130%",
+			height: "130%",
+			"color-interpolation-filters": "linearRGB"
+		}, [s("feTurbulence", {
+			type: "fractalNoise",
+			baseFrequency: "0.05",
+			numOctaves: "5",
+			seed: y.value,
+			stitchTiles: "stitch",
+			result: "noise"
+		}, null, 8, T), n[0] ||= s("feDisplacementMap", {
+			in: "SourceGraphic",
+			in2: "noise",
+			scale: "1.3",
+			xChannelSelector: "R",
+			yChannelSelector: "G"
+		}, null, -1)])])])), e.variant === "ghost" ? (d(), o("span", {
+			key: 0,
+			class: "watercolor-ghost-stroke",
+			"aria-hidden": "true",
+			style: u({
+				borderRadius: m(b),
+				filter: v.value
+			})
+		}, null, 4)) : a("", !0)], 14, C));
 	}
-}), [["__scopeId", "data-v-a8dd9e80"]]);
+}), [["__scopeId", "data-v-292b9032"]]);
 //#endregion
-export { D as WatercolorDot, r as hashString, n as mulberry32, x as radiiToCSS, b as randomRadii, w as useWatercolorBlob };
+export { E as WatercolorDot, r as hashString, n as mulberry32, y as radiiToCSS, v as randomRadii, S as useWatercolorBlob };