@mkbabb/glass-ui 4.0.1 → 4.2.0

package/dist/badge-Bt14yURi.js

@@ -0,0 +1,72 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { createCommentVNode as t, createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, unref as s } from "vue";
+import { cva as c } from "class-variance-authority";
+//#region src/components/ui/badge/Badge.vue?vue&type=script&setup=true&lang.ts
+var l = [
+	"data-variant",
+	"data-size",
+	"data-surface",
+	"data-cast"
+], u = {
+	key: 0,
+	class: "cartoon-cast",
+	"aria-hidden": "true"
+}, d = /* @__PURE__ */ r({
+	__name: "Badge",
+	props: {
+		variant: {},
+		size: {},
+		surface: {},
+		cast: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(r) {
+		let c = r;
+		return (d, p) => (a(), n("div", {
+			"data-slot": "badge",
+			"data-variant": r.variant,
+			"data-size": r.size,
+			"data-surface": r.surface === "glass" ? "glass" : void 0,
+			"data-cast": r.cast ? "" : void 0,
+			class: i(s(e)(s(f)({
+				variant: r.variant,
+				size: r.size,
+				surface: r.surface
+			}), c.class))
+		}, [r.cast ? (a(), n("span", u)) : t("", !0), o(d.$slots, "default")], 10, l));
+	}
+}), f = c("badge-atom focus-ring inline-flex items-center gap-1.5 rounded-badge font-semibold transition-control wrap-anywhere [&_svg:not([class*=size-])]:size-(--ui-glyph-sm) [&_svg]:shrink-0 [&_svg]:pointer-events-none", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 dark:bg-[hsl(0_70%_45%)] dark:hover:bg-[hsl(0_70%_45%)]/85",
+			outline: "badge-atom--outline text-foreground",
+			success: "bg-success text-success-foreground hover:bg-success/80",
+			warning: "bg-warning text-warning-foreground hover:bg-warning/80",
+			info: "bg-info text-info-foreground hover:bg-info/80"
+		},
+		size: {
+			sm: "text-[length:var(--control-text-sm)] leading-4 px-2 py-0.5",
+			md: "text-[length:var(--control-text)] leading-5 px-2.5 py-1",
+			lg: "text-[length:calc(var(--type-body)*var(--ui-scale))] leading-6 px-3 py-1.5"
+		},
+		surface: {
+			loud: "",
+			glass: "badge-atom--glass glass-capsule glass-atom"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+		surface: "loud"
+	}
+});
+//#endregion
+export { d as n, f as t };

package/dist/badge.js

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

package/dist/border-progress.js

@@ -1,47 +1,32 @@
 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";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, ref as c, renderSlot as l, unref as u, watch as d } from "vue";
 //#region src/components/custom/border-progress/constants.ts
-var h = [
+var f = [
 	"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
-	};
+], p = (e) => e.some((e) => /var\(/.test(e)), m = /* @__PURE__ */ new Map(), h = (e, t) => `${t}|${e.join("|")}`;
+function g(e) {
+	return [...e];
 }
-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;
+function _(e, t = 24, n) {
+	let r = Math.max(2, Math.round(t));
+	if (p(e)) return [...e];
+	let i = h(e, r);
+	return m.get(i) || (n && import("./spectrum-walk-cBNSx_zm.js").then(({ walkConcreteSpectrum: t }) => {
+		let a = t(e, r);
+		m.set(i, a), n(a);
+	}), g(e));
 }
 //#endregion
 //#region src/components/custom/border-progress/BorderProgress.vue?vue&type=script&setup=true&lang.ts
-var b = [
+var v = [
 	"data-coverage",
 	"data-milestone",
 	"aria-valuenow",
 	"aria-valuemax"
-], x = { class: "border-progress__content" }, S = /* @__PURE__ */ o({
+], y = { class: "border-progress__content" }, b = /* @__PURE__ */ i({
 	name: "BorderProgress",
 	__name: "BorderProgress",
 	props: {
@@ -55,52 +40,59 @@ var b = [
 		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;
+	setup(i, { emit: p }) {
+		let m = i, h = p, g = t(() => m.max ?? 1), b = t(() => {
+			let e = g.value || 1, t = m.value / e;
 			return t < 0 ? 0 : t > 1 ? 1 : t;
-		}), v = r(() => o.value), S = r(() => y(o.stops ?? h)), C = r(() => {
+		}), x = t(() => m.value), S = c([]), C = () => {
+			let e = m.stops ?? f;
+			S.value = _(e, void 0, (t) => {
+				(m.stops ?? f) === e && (S.value = t);
+			});
+		};
+		C(), d(() => m.stops, C);
+		let w = t(() => {
 			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;
+		}), T = c(!1), E = c(b.value);
+		d(b, (e, t) => {
+			let n = m.milestones;
 			if (!n || n.length === 0) {
-				T.value = e;
+				E.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", {
+				(t < n && e >= n || t > n && e <= n) && (h("milestone", {
 					milestone: i,
-					value: o.value
-				}), w.value = !0, requestAnimationFrame(() => {
-					w.value = !1;
+					value: m.value
+				}), T.value = !0, requestAnimationFrame(() => {
+					T.value = !1;
 				}));
 			}
-			T.value = e;
+			E.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
+		let D = t(() => ({
+			"--border-progress-fill": `${(b.value * 100).toFixed(3)}%`,
+			"--border-progress-width": `${m.width ?? 12}px`,
+			"--border-progress-radius": `${m.radius ?? 16}px`,
+			"--border-progress-spectrum": w.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),
+		return (t, i) => (s(), n("div", {
+			class: a(["border-progress", u(e)(m.class)]),
+			"data-coverage": m.coverage ?? "full-ring",
+			"data-milestone": T.value ? "" : void 0,
+			style: o(D.value),
 			role: "progressbar",
-			"aria-valuenow": v.value,
+			"aria-valuenow": x.value,
 			"aria-valuemin": "0",
 			"aria-valuemax": g.value
-		}, [n[0] ||= a("div", {
+		}, [i[0] ||= r("div", {
 			class: "border-progress__ring",
 			"aria-hidden": "true"
-		}, null, -1), a("div", x, [d(t.$slots, "default")])], 14, b));
+		}, null, -1), r("div", y, [l(t.$slots, "default")])], 14, v));
 	}
 });
 //#endregion
-export { S as BorderProgress, v as spectrumAt, y as spectrumStops };
+export { b as BorderProgress, _ as spectrumStops };

package/dist/button-D1W9PrzI.js

@@ -0,0 +1,130 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { t } from "./useSpringPress-VM9RgVq3.js";
+import { t as n } from "./useLiquidFlex-Cc6PjVJD.js";
+import { t as r } from "./vSpecular-EX7loENl.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, defineComponent as c, mergeProps as l, openBlock as u, renderSlot as d, unref as f, watch as p, withCtx as m, withDirectives as h } from "vue";
+import { Primitive as g } from "reka-ui";
+import { cva as _ } from "class-variance-authority";
+//#region src/components/ui/button/Button.vue?vue&type=script&setup=true&lang.ts
+var v = {
+	key: 0,
+	class: "cartoon-cast",
+	"aria-hidden": "true"
+}, y = /* @__PURE__ */ c({
+	__name: "Button",
+	props: {
+		variant: {},
+		size: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: {},
+		liquid: { type: Boolean },
+		punch: { type: Boolean },
+		type: {},
+		disabled: { type: [Boolean, String] },
+		asChild: { type: Boolean },
+		as: { default: "button" }
+	},
+	setup(c) {
+		let _ = c, y = i(() => ({
+			type: _.type,
+			disabled: _.disabled
+		})), x = i(() => {
+			if (_.surface === "veil") return "veil-surface";
+			if (_.surface === "opaque") return "glass-opaque";
+		}), S = new Set(["primary-audacious", "gold-audacious"]), C = i(() => _.punch === !0 || S.has(_.variant ?? "default")), w = i(() => C.value ? "btn-punch" : void 0), T = t(), E = n({
+			from: 0,
+			to: 1,
+			axis: "width",
+			maxStretch: () => C.value ? 1.09 : 1.04,
+			squishLaw: "linear"
+		});
+		p(() => T.value.value, (e) => E.squish(e), {
+			immediate: !0,
+			flush: "sync"
+		});
+		let D = i(() => {
+			let e = T.value.value, t = E.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 C.value && (a["--cartoon-press-t"] = e.toFixed(4)), e > .001 && (a.scale = `${r} ${i}`), a;
+		}), O = new Set([
+			"default",
+			"glass",
+			"glass-wash",
+			"primary-audacious",
+			"gold-audacious",
+			"outline",
+			"secondary",
+			"accent",
+			"ai"
+		]), k = i(() => O.has(_.variant ?? "default")), A = i(() => ({ ...D.value })), j = i(() => _.liquid ? "glass-lens" : void 0);
+		return (t, n) => h((u(), a(f(g), l({
+			as: c.as,
+			"as-child": c.asChild,
+			"data-slot": "button",
+			"data-variant": c.variant,
+			"data-size": c.size,
+			"data-surface": c.surface
+		}, y.value, {
+			class: f(e)(f(b)({
+				variant: c.variant,
+				size: c.size
+			}), x.value, j.value, w.value, _.class),
+			style: A.value,
+			onPointerdown: f(T).press,
+			onPointerup: f(T).release,
+			onPointercancel: f(T).release,
+			onPointerleave: f(T).release
+		}), {
+			default: m(() => [C.value ? (u(), s("span", v)) : o("", !0), d(t.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"as",
+			"as-child",
+			"data-variant",
+			"data-size",
+			"data-surface",
+			"class",
+			"style",
+			"onPointerdown",
+			"onPointerup",
+			"onPointercancel",
+			"onPointerleave"
+		])), [[f(r), k.value]]);
+	}
+}), b = _("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 glass-deep glass-capsule glass-capsule-hover text-foreground",
+			"primary-audacious": "glass-wash btn-glass glass-deep glass-capsule glass-capsule-hover btn-punch text-foreground",
+			"gold-audacious": "glass-wash btn-glass glass-capsule glass-capsule-hover btn-punch text-foreground [--glass-accent:var(--color-gold)] [--glass-accent-strength:32%]",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80 aria-pressed:bg-destructive/85",
+			outline: "glass-wash btn-glass glass-capsule glass-capsule-hover text-foreground border-(--glass-border-floating) [--glass-capsule-fill:var(--glass-bg-quiet-tinted)]",
+			secondary: "glass-wash btn-glass glass-capsule glass-capsule-hover text-foreground [--glass-capsule-fill:var(--glass-bg-quiet-tinted)]",
+			accent: "glass-wash btn-glass glass-capsule glass-capsule-hover text-foreground border-(--glass-border-resting) [--glass-capsule-fill:var(--glass-bg-quiet-tinted)]",
+			ghost: "glass-capsule-hover 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 glass-capsule glass-capsule-hover text-foreground",
+			"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: "glass-wash btn-glass glass-capsule glass-capsule-hover text-amber-700 dark:text-amber-400 [--glass-accent:oklch(0.78_0.14_75)] [--glass-accent-strength:34%]",
+			link: "text-primary underline-offset-4 hover:underline active:opacity-80 active:scale-100"
+		},
+		size: {
+			default: "h-(--control-h-md) px-4 py-2 has-[>svg]:px-3",
+			xs: "h-(--control-h-xs) rounded-pill px-2 text-[length:var(--control-text-sm)]",
+			sm: "h-(--control-h-sm) rounded-pill px-3",
+			lg: "h-(--control-h-lg) rounded-pill px-8 has-[>svg]:px-5",
+			icon: "h-(--control-h-md) w-(--control-h-md) p-0",
+			"icon-sm": "h-(--control-h-xs) w-(--control-h-xs) p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+//#endregion
+export { y as n, b as t };

package/dist/button.js

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

package/dist/canvas.js

@@ -1,3 +1,2 @@
-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 };
+import { n as e, r as t, t as n } from "./resolveCanvasColor-DsSJk06I.js";
+export { n as resolveCanvasColor, e as useCanvas2D, t as useCanvasLifecycle };

package/dist/card.js

@@ -1,2 +1,2 @@
-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";
+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-DlVP2evz.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 };