@mkbabb/glass-ui 4.0.0 → 4.0.1

package/dist/badge.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./badge-UILT_3pZ.js";
+import { n as e, t } from "./badge-D9XWW4GT.js";
 export { e as Badge, t as badgeVariants };

package/dist/border-progress.d.ts

@@ -0,0 +1 @@
+export * from "./components/custom/border-progress";

package/dist/border-progress.js

@@ -0,0 +1,106 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { o as t, t as n } from "./color-DweYl7pE.js";
+import { computed as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, ref as u, renderSlot as d, unref as f, watch as p } from "vue";
+import { interpolateHue as m } from "@mkbabb/value.js";
+//#region src/components/custom/border-progress/constants.ts
+var h = [
+	"var(--section-color-0)",
+	"var(--section-color-3)",
+	"var(--section-color-7)",
+	"var(--section-color-12)"
+], g = (e) => e < 0 ? 0 : e > 1 ? 1 : e, _ = (e, t, n) => e + (t - e) * n;
+function v(e, t) {
+	let n = e.length;
+	if (n === 0) return {
+		L: .7,
+		C: 0,
+		h: 0
+	};
+	if (n === 1) return e[0];
+	let r = g(t) * (n - 1), i = Math.min(n - 2, Math.floor(r)), a = r - i, o = e[i], s = e[i + 1], c = (m((o.h % 360 + 360) % 360 / 360, (s.h % 360 + 360) % 360 / 360, a, "shorter") * 360 % 360 + 360) % 360;
+	return {
+		L: _(o.L, s.L, a),
+		C: _(o.C, s.C, a),
+		h: c
+	};
+}
+function y(e, r = 24) {
+	let i = Math.max(2, Math.round(r));
+	if (e.some((e) => /var\(/.test(e))) return [...e];
+	let a = e.map((e) => n(e)), o = [];
+	for (let e = 0; e < i; e++) {
+		let n = i === 1 ? 0 : e / (i - 1);
+		o.push(t(v(a, n)));
+	}
+	return o;
+}
+//#endregion
+//#region src/components/custom/border-progress/BorderProgress.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"data-coverage",
+	"data-milestone",
+	"aria-valuenow",
+	"aria-valuemax"
+], x = { class: "border-progress__content" }, S = /* @__PURE__ */ o({
+	name: "BorderProgress",
+	__name: "BorderProgress",
+	props: {
+		value: {},
+		max: {},
+		coverage: {},
+		stops: {},
+		width: {},
+		radius: {},
+		milestones: {},
+		class: {}
+	},
+	emits: ["milestone"],
+	setup(t, { emit: n }) {
+		let o = t, m = n, g = r(() => o.max ?? 1), _ = r(() => {
+			let e = g.value || 1, t = o.value / e;
+			return t < 0 ? 0 : t > 1 ? 1 : t;
+		}), v = r(() => o.value), S = r(() => y(o.stops ?? h)), C = r(() => {
+			let e = S.value, t = e.length;
+			return t === 1 ? `${e[0]}, ${e[0]}` : e.map((e, n) => `${e} ${(n / (t - 1) * 100).toFixed(2)}%`).join(", ");
+		}), w = u(!1), T = u(_.value);
+		p(_, (e, t) => {
+			let n = o.milestones;
+			if (!n || n.length === 0) {
+				T.value = e;
+				return;
+			}
+			let r = g.value || 1;
+			for (let i of n) {
+				let n = i.at / r;
+				(t < n && e >= n || t > n && e <= n) && (m("milestone", {
+					milestone: i,
+					value: o.value
+				}), w.value = !0, requestAnimationFrame(() => {
+					w.value = !1;
+				}));
+			}
+			T.value = e;
+		});
+		let E = r(() => ({
+			"--border-progress-fill": `${(_.value * 100).toFixed(3)}%`,
+			"--border-progress-width": `${o.width ?? 12}px`,
+			"--border-progress-radius": `${o.radius ?? 16}px`,
+			"--border-progress-spectrum": C.value
+		}));
+		return (t, n) => (l(), i("div", {
+			class: s(["border-progress", f(e)(o.class)]),
+			"data-coverage": o.coverage ?? "full-ring",
+			"data-milestone": w.value ? "" : void 0,
+			style: c(E.value),
+			role: "progressbar",
+			"aria-valuenow": v.value,
+			"aria-valuemin": "0",
+			"aria-valuemax": g.value
+		}, [n[0] ||= a("div", {
+			class: "border-progress__ring",
+			"aria-hidden": "true"
+		}, null, -1), a("div", x, [d(t.$slots, "default")])], 14, b));
+	}
+});
+//#endregion
+export { S as BorderProgress, v as spectrumAt, y as spectrumStops };

package/dist/{button-BNDWhAZb.js → button-DYCUa-tH.js}

@@ -1,10 +1,13 @@
 import { t as e } from "./cn-DJXf4yaB.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 { Primitive as l } from "reka-ui";
-import { cva as u } from "class-variance-authority";
+import { t } from "./useSpringPress-BsqPr7FJ.js";
+import { t as n } from "./useLiquidFlex-mZPMiNXh.js";
+import { t as r } from "./vSpecular-CQFmLNzA.js";
+import { computed as i, createBlock as a, defineComponent as o, mergeProps as s, openBlock as c, renderSlot as l, unref as u, watch as d, withCtx as f, withDirectives as p } from "vue";
+import { Primitive as m } from "reka-ui";
+import { cva as h } from "class-variance-authority";
 //#endregion
 //#region src/components/ui/button/Button.vue
-var d = /* @__PURE__ */ r({
+var g = /* @__PURE__ */ o({
 	__name: "Button",
 	props: {
 		variant: {},
@@ -16,49 +19,91 @@ var d = /* @__PURE__ */ r({
 			Object,
 			Array
 		] },
+		surface: {},
+		liquid: { type: Boolean },
 		type: {},
 		disabled: { type: [Boolean, String] },
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
-	setup(r) {
-		let u = r, d = t(() => ({
-			type: u.type,
-			disabled: u.disabled
-		}));
-		return (t, p) => (a(), n(s(l), i({
-			as: r.as,
-			"as-child": r.asChild,
+	setup(o) {
+		let h = o, g = i(() => ({
+			type: h.type,
+			disabled: h.disabled
+		})), v = i(() => {
+			if (h.surface === "veil") return "veil-surface";
+			if (h.surface === "opaque") return "glass-opaque";
+		}), y = t({
+			response: .25,
+			dampingFraction: .7
+		}), b = n({
+			from: 0,
+			to: 1,
+			axis: "width",
+			maxStretch: 1.04,
+			squishLaw: "linear"
+		});
+		d(() => y.value.value, (e) => b.squish(e), {
+			immediate: !0,
+			flush: "sync"
+		});
+		let x = i(() => {
+			let e = y.value.value, t = b.stretch.value, n = 1 - e * .03, r = (n * t).toFixed(4), i = (n / t).toFixed(4), a = { "--glass-btn-press-t": e.toFixed(4) };
+			return e > .001 && (a.scale = `${r} ${i}`), a;
+		}), S = new Set([
+			"default",
+			"glass",
+			"glass-wash",
+			"primary-audacious",
+			"gold-audacious"
+		]), C = i(() => S.has(h.variant ?? "default")), w = i(() => ({ ...x.value })), T = i(() => h.liquid ? "glass-lens" : void 0);
+		return (t, n) => p((c(), a(u(m), s({
+			as: o.as,
+			"as-child": o.asChild,
 			"data-slot": "button",
-			"data-variant": r.variant,
-			"data-size": r.size
-		}, d.value, { class: s(e)(s(f)({
-			variant: r.variant,
-			size: r.size
-		}), u.class) }), {
-			default: c(() => [o(t.$slots, "default")]),
+			"data-variant": o.variant,
+			"data-size": o.size,
+			"data-surface": o.surface
+		}, g.value, {
+			class: u(e)(u(_)({
+				variant: o.variant,
+				size: o.size
+			}), v.value, T.value, h.class),
+			style: w.value,
+			onPointerdown: u(y).press,
+			onPointerup: u(y).release,
+			onPointercancel: u(y).release,
+			onPointerleave: u(y).release
+		}), {
+			default: f(() => [l(t.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"as",
 			"as-child",
 			"data-variant",
 			"data-size",
-			"class"
-		]));
+			"data-surface",
+			"class",
+			"style",
+			"onPointerdown",
+			"onPointerup",
+			"onPointercancel",
+			"onPointerleave"
+		])), [[u(r), C.value]]);
 	}
-}), f = u("btn-pill tap-squish focus-ring whitespace-nowrap text-[length:var(--control-text)] font-medium cursor-pointer active:scale-(--scale-press-btn) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-disabled [&_svg:not([class*=size-])]:size-(--ui-glyph) [&_svg]:shrink-0 [&_svg]:pointer-events-none", {
+}), _ = h("btn-pill tap-squish focus-ring whitespace-nowrap text-[length:var(--control-text)] font-medium cursor-pointer active:scale-(--scale-press-btn) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-disabled [&_svg:not([class*=size-])]:size-(--ui-glyph) [&_svg]:shrink-0 [&_svg]:pointer-events-none", {
 	variants: {
 		variant: {
-			default: "glass-wash btn-glass text-foreground hover:bg-(--glass-bg-resting) hover:border-(--glass-border-resting) active:bg-(--glass-bg-floating) active:border-(--glass-border-floating) aria-pressed:bg-[color-mix(in_srgb,var(--foreground)_10%,var(--glass-bg-resting))]",
+			default: "glass-wash btn-glass text-foreground hover:bg-(--glass-bg-resting-tinted) hover:border-(--glass-border-resting) active:bg-(--glass-bg-floating-tinted) active:border-(--glass-border-floating) aria-pressed:bg-[color-mix(in_srgb,var(--foreground)_10%,var(--glass-bg-resting-tinted))]",
 			solid: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 aria-pressed:bg-primary/85",
-			"primary-audacious": "glass-wash btn-glass text-foreground hover:bg-(--glass-bg-resting) hover:border-(--glass-border-resting) active:bg-(--glass-bg-floating) active:border-(--glass-border-floating) aria-pressed:bg-[color-mix(in_srgb,var(--foreground)_10%,var(--glass-bg-resting))] hover:scale-(--scale-hover-btn) aria-pressed:scale-(--scale-press-btn)",
+			"primary-audacious": "glass-wash btn-glass text-foreground hover:bg-(--glass-bg-resting-tinted) hover:border-(--glass-border-resting) active:bg-(--glass-bg-floating-tinted) active:border-(--glass-border-floating) aria-pressed:bg-[color-mix(in_srgb,var(--foreground)_10%,var(--glass-bg-resting-tinted))] hover:scale-(--scale-hover-btn) aria-pressed:scale-(--scale-press-btn)",
 			"gold-audacious": "glass-wash btn-glass text-foreground bg-[linear-gradient(135deg,color-mix(in_srgb,var(--color-gold)_10%,transparent),color-mix(in_srgb,var(--color-gold-light)_6%,transparent)_50%,color-mix(in_srgb,var(--color-gold)_10%,transparent))] hover:bg-[linear-gradient(135deg,color-mix(in_srgb,var(--color-gold)_16%,transparent),color-mix(in_srgb,var(--color-gold-light)_10%,transparent)_50%,color-mix(in_srgb,var(--color-gold)_16%,transparent))] hover:scale-(--scale-hover-btn) aria-pressed:scale-(--scale-press-btn)",
 			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80 aria-pressed:bg-destructive/85",
 			outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground active:bg-accent/80 aria-pressed:bg-accent aria-pressed:text-accent-foreground",
 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 aria-pressed:bg-secondary/60",
 			accent: "bg-accent text-accent-foreground border border-border/40 hover:bg-accent/80 active:bg-accent/70 aria-pressed:bg-accent/60",
 			ghost: "bg-transparent text-foreground/70 hover:bg-foreground/8 hover:text-foreground active:bg-foreground/12 aria-pressed:bg-foreground/10 aria-pressed:text-foreground",
-			glass: "glass-wash btn-glass text-foreground hover:bg-(--glass-bg-resting) hover:border-(--glass-border-resting) active:bg-(--glass-bg-floating) active:border-(--glass-border-floating) aria-pressed:bg-[color-mix(in_srgb,var(--foreground)_10%,var(--glass-bg-resting))]",
+			glass: "glass-wash btn-glass text-foreground hover:bg-(--glass-bg-resting-tinted) hover:border-(--glass-border-resting) active:bg-(--glass-bg-floating-tinted) active:border-(--glass-border-floating) aria-pressed:bg-[color-mix(in_srgb,var(--foreground)_10%,var(--glass-bg-resting-tinted))]",
 			"glass-wash": "glass-wash btn-glass text-foreground/70 hover:bg-foreground/[0.04] hover:border-(--surface-tint-22) hover:text-foreground active:bg-foreground/[0.08] aria-pressed:bg-foreground/[0.1] aria-pressed:text-foreground",
 			ai: "bg-amber-500/15 text-amber-700 hover:bg-amber-500/25 active:bg-amber-500/35 dark:text-amber-400 aria-pressed:bg-amber-500/30",
 			link: "text-primary underline-offset-4 hover:underline active:opacity-80 active:scale-100"
@@ -78,4 +123,4 @@ var d = /* @__PURE__ */ r({
 	}
 });
 //#endregion
-export { d as n, f as t };
+export { g as n, _ as t };

package/dist/button.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./button-BNDWhAZb.js";
+import { n as e, t } from "./button-DYCUa-tH.js";
 export { e as Button, t as buttonVariants };

package/dist/canvas.js

@@ -1,3 +1,3 @@
-import { n as e, t } from "./useCanvas2D-ClrQuZtp.js";
-import { t as n } from "./resolveCanvasColor-BBiYfp8g.js";
+import { n as e, t } from "./useCanvas2D-B8w_E3Rr.js";
+import { t as n } from "./resolveCanvasColor-CUyHr5Uu.js";
 export { n as resolveCanvasColor, t as useCanvas2D, e as useCanvasLifecycle };

package/dist/card.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./CardAction-XH4YBVEK.js";
-export { a as Card, o as CardAction, i as CardContent, t as CardDescription, n as CardFooter, r as CardHeader, e as CardTitle };
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./CardAction-CW7a0m8M.js";
+export { r as Card, c as CardAction, o as CardContent, n as CardDescription, i as CardFooter, t as CardHeader, e as CardTitle, s as ScrollCard, a as ScrollCardHeader };