@mkbabb/glass-ui 7.0.0 → 8.0.0

package/dist/axes.d.ts

@@ -1 +1 @@
-export * from "./components/_shared/axes";
+export * from "./components/_shared/axes.js";

package/dist/axes.js

@@ -35,27 +35,6 @@ var e = [
 	"click",
 	"hover",
 	"context"
-], c = ["scrim", "graded"], l = [
-	"SIZES",
-	"ORIENTATIONS",
-	"MOTIONS",
-	"SURFACES",
-	"SURFACE_TIERS",
-	"TONES",
-	"PLACEMENTS",
-	"TRIGGERS",
-	"BACKDROPS"
-], u = [
-	"Size",
-	"Orientation",
-	"Motion",
-	"Surface",
-	"SurfaceTier",
-	"Tone",
-	"Placement",
-	"Trigger",
-	"Backdrop"
-];
-[...l, ...u];
+], c = ["scrim", "graded"];
 //#endregion
 export { c as BACKDROPS, i as MOTIONS, r as ORIENTATIONS, o as PLACEMENTS, n as SIZES, e as SURFACES, t as SURFACE_TIERS, a as TONES, s as TRIGGERS };

package/dist/badge-owUOaaba.js

@@ -0,0 +1,63 @@
+import { n as e, t } from "./class-names-q-UGOkHH.js";
+import { computed as n, createElementBlock as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, unref as c } from "vue";
+//#region src/components/badge/Badge.vue?vue&type=script&setup=true&lang.ts
+var l = [
+	"data-variant",
+	"data-tone",
+	"data-size"
+], u = /* @__PURE__ */ i({
+	__name: "Badge",
+	props: {
+		variant: {},
+		tone: {},
+		size: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(e) {
+		let i = e, u = n(() => ({
+			variant: i.variant ?? h.variant,
+			tone: i.tone ?? h.tone,
+			size: i.size ?? h.size
+		}));
+		return (n, d) => (o(), r("div", {
+			"data-slot": "badge",
+			"data-variant": u.value.variant,
+			"data-tone": u.value.tone,
+			"data-size": u.value.size,
+			class: a(c(t)(c(g)({
+				variant: e.variant,
+				tone: e.tone,
+				size: e.size
+			}), i.class))
+		}, [s(n.$slots, "default")], 10, l));
+	}
+}), d = "badge-atom inline-flex items-center justify-center gap-1.5 rounded-badge font-semibold whitespace-nowrap [&_svg:not([class*=size-])]:size-[1em] [&_svg]:shrink-0 [&_svg]:pointer-events-none", f = {
+	default: "bg-primary text-primary-foreground",
+	secondary: "bg-secondary text-secondary-foreground",
+	outline: "badge-atom--outline text-foreground"
+}, p = {
+	neutral: "",
+	destructive: "bg-destructive text-destructive-foreground",
+	success: "bg-success text-success-foreground",
+	warning: "bg-warning text-warning-foreground",
+	info: "bg-info text-info-foreground"
+}, m = {
+	sm: "text-[length:var(--type-caption)] leading-[1.1] [--mark-pad-block:--spacing(1)] [--mark-pad-inline:--spacing(2)]",
+	md: "text-[length:var(--control-label)] leading-[1.1] [--mark-pad-block:--spacing(1)] [--mark-pad-inline:--spacing(3)]",
+	lg: "text-[length:var(--control-text)] leading-[1.1] [--mark-pad-block:--spacing(2)] [--mark-pad-inline:--spacing(3)]"
+}, h = {
+	variant: "default",
+	tone: "neutral",
+	size: "md"
+};
+function g(t = {}) {
+	return e(d, f[t.variant ?? h.variant], p[t.tone ?? h.tone], m[t.size ?? h.size], t.class, t.className);
+}
+//#endregion
+export { g as n, u as r, h as t };

package/dist/badge.d.ts

@@ -1 +1 @@
-export * from "./components/badge";
+export * from "./components/badge/index.js";

package/dist/badge.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./badge-u65NClWn.js";
-export { e as Badge, t as badgeVariants };
+import { n as e, r as t, t as n } from "./badge-owUOaaba.js";
+export { n as BADGE_AXIS_DEFAULTS, t as Badge, e as badgeVariants };

package/dist/blob-config.d.ts

@@ -1 +1 @@
-export * from "./components/blob/config";
+export * from "./components/blob/config.js";

package/dist/blob.d.ts

@@ -1 +1 @@
-export * from "./components/blob";
+export * from "./components/blob/index.js";

package/dist/blob.js

@@ -1,9 +1,9 @@
-import { t as e } from "./useResolveTokenColor-B2FfJnd9.js";
+import { t as e } from "./useResolveTokenColor-CspQv_ik.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as n } from "./usePointerVelocityField-DsIf7yyq.js";
 import { a as r, i, n as a, o, r as s, t as c } from "./presets-5myqNv59.js";
 import { cssToOklch as l, oklchToGammaRgb as u } from "./color.js";
-import { a as d, m as f, n as p, o as m, r as h, s as g, t as _, u as v } from "./color.wgsl-Ct5o9dpf.js";
+import { a as d, m as f, n as p, o as m, r as h, s as g, t as _, u as v } from "./color.wgsl-B0N3mKMb.js";
 import { a as y } from "./rendererStatus-BxUlBLVy.js";
 import { n as b, t as x } from "./compile-D7VYG3gi.js";
 import { n as S, t as C } from "./prng-2uS6J_A1.js";
@@ -1343,7 +1343,7 @@ function Ve(e) {
 			}]
 		}), g = Re();
 		function _(e) {
-			e && s(e);
+			s(e);
 		}
 		function v(o) {
 			let s = a(o);
@@ -1497,8 +1497,8 @@ function We(e) {
 			}),
 			setupGL: (e) => {
 				let { prog: n, vs: r, fs: i, vao: a, buf: o, locs: u } = Ne(e);
-				function d(n) {
-					n && p.recordBackingSize(n), e.viewport(0, 0, n?.w ?? t.width, n?.h ?? t.height);
+				function d(t) {
+					p.recordBackingSize(t), e.viewport(0, 0, t.w, t.h);
 				}
 				function f(r) {
 					let i = p.resolveFrame(r);

package/dist/button-yvGPb0Bx.js

@@ -0,0 +1,110 @@
+import { t as e } from "./class-names-q-UGOkHH.js";
+import { t } from "./DotRing-Blh4Mc3Q.js";
+import { t as n } from "./vSpecular-DMJo8pfD.js";
+import { t as r } from "./asElement-CRnm6A2v.js";
+import { t as i } from "./useLiquidPress-h1scrPtP.js";
+import { computed as a, createBlock as o, createCommentVNode as s, defineComponent as c, mergeProps as l, openBlock as u, ref as d, renderSlot as f, unref as p, useAttrs as m, withCtx as h, withDirectives as g } from "vue";
+import { Primitive as _ } from "reka-ui";
+//#endregion
+//#region src/components/button/Button.vue
+var v = /* @__PURE__ */ c({
+	__name: "Button",
+	props: {
+		emphasis: { default: "secondary" },
+		tone: { default: "neutral" },
+		size: { default: "md" },
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		type: {},
+		disabled: { type: [Boolean, String] },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		asChild: { type: Boolean },
+		as: { default: "button" }
+	},
+	setup(c) {
+		let v = c;
+		m();
+		let y = a(() => v.loading || v.disabled === !0 || v.disabled === "true"), b = a(() => v.disabled === !0 || v.disabled === "true"), x = a(() => !v.asChild && v.as === "button"), S = a(() => v.emphasis === "primary" || v.emphasis === "secondary"), C = a(() => S.value && !y.value), w = a(() => ({
+			type: x.value ? v.type ?? "button" : void 0,
+			disabled: x.value ? b.value : void 0,
+			"aria-disabled": !x.value && y.value ? "true" : void 0
+		})), T = d(null);
+		function E(e) {
+			T.value = r(e);
+		}
+		let D = i({
+			el: T,
+			disabled: () => y.value,
+			pressVar: "--glass-btn-press-t"
+		}), O = a(() => D.pressStyle.value), k = a(() => e("button tap-squish focus-ring", S.value && "glass-capsule glass-specular-track", v.emphasis === "primary" && "glass-deep", C.value && "glass-capsule-hover", v.class));
+		function A(e) {
+			y.value && (e.preventDefault(), e.stopImmediatePropagation());
+		}
+		return (e, r) => g((u(), o(p(_), l({
+			ref: E,
+			as: c.as,
+			"as-child": c.asChild,
+			"data-slot": "button",
+			"data-emphasis": c.emphasis,
+			"data-tone": c.tone,
+			"data-size": c.size,
+			"data-icon-only": c.iconOnly || void 0,
+			"data-control-target": "",
+			"data-loading": c.loading || void 0,
+			"data-press-armed": p(D).armed ? "" : void 0,
+			"aria-busy": c.loading || void 0
+		}, w.value, {
+			class: k.value,
+			style: O.value,
+			onClick: A,
+			onPointerdown: p(D).handlers.onPointerdown,
+			onPointerup: p(D).handlers.onPointerup,
+			onPointercancel: p(D).handlers.onPointercancel,
+			onPointerleave: p(D).handlers.onPointerleave,
+			onPointerenter: p(D).handlers.onPointerenter,
+			onKeydown: p(D).handlers.onKeydown,
+			onKeyup: p(D).handlers.onKeyup,
+			onBlur: p(D).handlers.onBlur
+		}), {
+			default: h(() => [c.loading ? (u(), o(t, {
+				key: 0,
+				class: "button-mark"
+			})) : s("", !0), f(e.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"as",
+			"as-child",
+			"data-emphasis",
+			"data-tone",
+			"data-size",
+			"data-icon-only",
+			"data-loading",
+			"data-press-armed",
+			"aria-busy",
+			"class",
+			"style",
+			"onPointerdown",
+			"onPointerup",
+			"onPointercancel",
+			"onPointerleave",
+			"onPointerenter",
+			"onKeydown",
+			"onKeyup",
+			"onBlur"
+		])), [[p(n), C.value]]);
+	}
+});
+//#endregion
+export { v as t };

package/dist/button.d.ts

@@ -1 +1 @@
-export * from "./components/button";
+export * from "./components/button/index.js";

package/dist/button.js

@@ -1,2 +1,2 @@
-import { t as e } from "./button-Bu9F4uU6.js";
+import { t as e } from "./button-yvGPb0Bx.js";
 export { e as Button };

package/dist/canvas.d.ts

@@ -1 +1 @@
-export * from "./composables/glass/canvas2d";
+export * from "./composables/glass/canvas2d/index.js";

package/dist/canvas.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./resolveCanvasColor-DS_6DBxA.js";
-export { n as resolveCanvasColor, e as useCanvas2D, t as useCanvasLifecycle };
+import { n as e, t } from "./resolveCanvasColor-6MCrswTB.js";
+export { t as resolveCanvasColor, e as useCanvas2D };

package/dist/{card-Bk96VI2R.js → card-3HFFpC7_.js}

@@ -1,46 +1,25 @@
-import { t as e } from "./class-names-Cpy5eaBk.js";
-import { t } from "./Surface-kFQeYrYv.js";
-import { t as n } from "./useScrollTrigger-BDdqptlc.js";
-import { computed as r, createBlock as i, createElementBlock as a, defineComponent as o, mergeProps as s, normalizeClass as c, openBlock as l, ref as u, renderSlot as d, resolveDynamicComponent as f, unref as p, useAttrs as m, watch as h, withCtx as g } from "vue";
+import { t as e } from "./class-names-q-UGOkHH.js";
+import { t } from "./Surface-i1tWC-Ga.js";
+import { t as n } from "./useScrollTrigger-Abe5dEeO.js";
+import { computed as r, createBlock as i, createElementBlock as a, defineComponent as o, mergeProps as s, normalizeClass as c, openBlock as l, ref as u, renderSlot as d, resolveDynamicComponent as f, unref as p, watch as m, withCtx as h } from "vue";
 //#endregion
 //#region src/components/card/Card.vue
-var _ = /* @__PURE__ */ o({
+var g = /* @__PURE__ */ o({
 	inheritAttrs: !1,
 	__name: "Card",
 	props: {
 		size: { default: "md" },
-		cartoon: {
-			type: Boolean,
-			default: !1
-		},
-		grid: {
-			type: Boolean,
-			default: !1
-		},
-		variant: {},
-		selected: {
-			type: Boolean,
-			default: !1
-		},
-		metal: { default: "gold" },
-		dataHue: {},
-		dataHueStrength: {},
-		material: { default: "elevated" },
-		tier: {},
-		surface: { default: "glass" },
-		deep: {
-			type: Boolean,
-			default: !1
-		},
 		shadow: {
 			type: Boolean,
 			default: !0
 		},
-		grain: {
+		selected: {
 			type: Boolean,
-			default: !0
+			default: void 0
 		},
-		specular: { default: "off" },
+		tier: {},
+		surface: {},
+		deep: { type: Boolean },
 		class: { type: [
 			Boolean,
 			null,
@@ -48,54 +27,45 @@ var _ = /* @__PURE__ */ o({
 			Object,
 			Array
 		] },
-		as: { default: "div" }
+		as: {}
 	},
 	setup(n) {
-		let a = n, o = m(), c = r(() => {
-			if (!(a.variant !== "selection" || a.dataHue == null)) return {
-				"--glass-accent": a.dataHue,
-				...a.dataHueStrength == null ? {} : { "--glass-accent-strength": a.dataHueStrength }
-			};
-		}), u = r(() => [o.style, c.value]), f = r(() => a.variant === "selection" && a.selected ? `metal-${a.metal}-border` : void 0);
-		return (r, o) => (l(), i(t, s(r.$attrs, {
+		let a = n, o = r(() => a.selected !== void 0);
+		return (r, c) => (l(), i(t, s(r.$attrs, {
 			"data-slot": "card",
-			material: n.material,
 			tier: n.tier,
 			surface: n.surface,
 			deep: n.deep,
-			shadow: n.shadow && !n.cartoon,
-			grain: n.grain,
-			specular: n.specular,
 			as: n.as,
+			"data-shadow": n.shadow || void 0,
 			"data-size": n.size,
-			"data-cartoon": n.cartoon || void 0,
-			"data-grid": n.grid || void 0,
-			"data-variant": n.variant,
-			"data-selected": n.variant === "selection" && n.selected ? "true" : void 0,
-			style: u.value,
-			class: p(e)("card rounded-card text-card-foreground scrollbar-hidden", n.cartoon && "cartoon-surface", n.grid && "paper-grid", f.value, a.class)
+			"data-selected": n.selected ? "true" : void 0,
+			role: o.value ? "option" : void 0,
+			tabindex: o.value ? 0 : void 0,
+			"aria-selected": o.value ? n.selected ? "true" : "false" : void 0,
+			class: p(e)("card", a.class)
 		}), {
-			default: g(() => [d(r.$slots, "default")]),
+			default: h(() => [d(r.$slots, "default")]),
 			_: 3
 		}, 16, [
-			"material",
 			"tier",
 			"surface",
 			"deep",
-			"shadow",
-			"grain",
-			"specular",
 			"as",
+			"data-shadow",
 			"data-size",
-			"data-cartoon",
-			"data-grid",
-			"data-variant",
 			"data-selected",
-			"style",
+			"role",
+			"tabindex",
+			"aria-selected",
 			"class"
 		]));
 	}
-}), v = ["data-condensed"], y = /* @__PURE__ */ o({
+}), _ = [
+	"data-condensed",
+	"data-shrink-glide",
+	"aria-live"
+], v = 20, y = 12, b = /* @__PURE__ */ o({
 	__name: "CardHeader",
 	props: {
 		shrink: { type: Boolean },
@@ -108,42 +78,44 @@ var _ = /* @__PURE__ */ o({
 		] }
 	},
 	setup(t) {
-		let i = t, o = u(null), s = u(!1), f = r(() => i.shrink ? o.value?.closest(".card-scroll-host") ?? null : null);
-		function m(e) {
+		let i = t, o = u(null), s = u(!1), f = u(!1), h = r(() => i.shrink ? o.value?.closest(".card-scroll-host") ?? null : null);
+		function g(e) {
 			let t = o.value;
-			return t ? e.scrollHeight - e.clientHeight > t.getBoundingClientRect().height / 2 + 24 : !1;
+			return t ? e.scrollHeight - e.clientHeight > t.getBoundingClientRect().height / 2 + v : !1;
 		}
-		function g() {
-			let e = f.value;
-			s.value = !!e && e.scrollTop >= 24 && m(e);
+		function b() {
+			let e = h.value;
+			f.value = !1, s.value = !!e && e.scrollTop >= v && g(e);
 		}
-		return n(f, {
+		return n(h, {
 			trackProgress: !1,
 			triggers: [{
-				at: 24,
+				at: v,
 				direction: "down",
 				id: "condense"
 			}, {
-				at: 12,
+				at: y,
 				direction: "up",
 				id: "expand"
 			}],
 			onCross(e) {
-				let t = f.value;
-				e === "condense" ? s.value = !!t && m(t) : s.value = !1;
+				let t = h.value, n = e === "condense" && !!t && g(t);
+				n !== s.value && (f.value = !0, s.value = n);
 			}
-		}), h(f, g, {
+		}), m(h, b, {
 			immediate: !0,
 			flush: "post"
 		}), (n, r) => (l(), a("div", {
 			ref_key: "root",
 			ref: o,
 			"data-slot": "card-header",
-			"data-condensed": s.value || void 0,
+			"data-condensed": t.shrink ? String(s.value) : void 0,
+			"data-shrink-glide": f.value || void 0,
+			"aria-live": t.shrink ? "polite" : void 0,
 			class: c(p(e)("card-header", t.shrink && "card-header--shrink", i.class))
-		}, [d(n.$slots, "default")], 10, v));
+		}, [d(n.$slots, "default")], 10, _));
 	}
-}), b = /* @__PURE__ */ o({
+}), x = /* @__PURE__ */ o({
 	__name: "CardTitle",
 	props: {
 		as: { default: "h3" },
@@ -161,11 +133,11 @@ var _ = /* @__PURE__ */ o({
 			"data-slot": "card-title",
 			class: c(p(e)("card-title", n.class))
 		}, {
-			default: g(() => [d(r.$slots, "default")]),
+			default: h(() => [d(r.$slots, "default")]),
 			_: 3
 		}, 8, ["class"]));
 	}
-}), x = /* @__PURE__ */ o({
+}), S = /* @__PURE__ */ o({
 	__name: "CardDescription",
 	props: { class: { type: [
 		Boolean,
@@ -181,7 +153,7 @@ var _ = /* @__PURE__ */ o({
 			class: c(p(e)("card-description", n.class))
 		}, [d(t.$slots, "default")], 2));
 	}
-}), S = /* @__PURE__ */ o({
+}), C = /* @__PURE__ */ o({
 	__name: "CardContent",
 	props: { class: { type: [
 		Boolean,
@@ -197,7 +169,7 @@ var _ = /* @__PURE__ */ o({
 			class: c(p(e)("card-content", n.class))
 		}, [d(t.$slots, "default")], 2));
 	}
-}), C = /* @__PURE__ */ o({
+}), w = /* @__PURE__ */ o({
 	__name: "CardFooter",
 	props: { class: { type: [
 		Boolean,
@@ -213,22 +185,6 @@ var _ = /* @__PURE__ */ o({
 			class: c(p(e)("card-footer", n.class))
 		}, [d(t.$slots, "default")], 2));
 	}
-}), w = /* @__PURE__ */ o({
-	__name: "CardAction",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, r) => (l(), a("div", {
-			"data-slot": "card-action",
-			class: c(p(e)("card-action", n.class))
-		}, [d(t.$slots, "default")], 2));
-	}
 });
 //#endregion
-export { b as a, x as i, C as n, y as o, S as r, _ as s, w as t };
+export { b as a, x as i, C as n, g as o, S as r, w as t };

package/dist/card.d.ts

@@ -1 +1 @@
-export * from "./components/card";
+export * from "./components/card/index.js";

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 "./card-Bk96VI2R.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, i as t, n, o as r, r as i, t as a } from "./card-3HFFpC7_.js";
+export { r as Card, n as CardContent, i as CardDescription, a as CardFooter, e as CardHeader, t as CardTitle };

package/dist/carousel.d.ts

@@ -1 +1 @@
-export * from "./components/carousel";
+export * from "./components/carousel/index.js";