@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/button-Bu9F4uU6.js

@@ -0,0 +1,98 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./vSpecular-DMJo8pfD.js";
+import { t as n } from "./useLiquidPress-BOxuDkKa.js";
+import { computed as r, createBlock as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, unref as l, withCtx as u, withDirectives as d } from "vue";
+import { Primitive as f } from "reka-ui";
+//#endregion
+//#region src/components/button/Button.vue
+var p = /* @__PURE__ */ a({
+	__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(a) {
+		let p = a, m = r(() => p.loading || p.disabled === !0 || p.disabled === "true"), h = r(() => !p.asChild && p.as === "button"), g = r(() => p.tone === "neutral" && (p.emphasis === "primary" || p.emphasis === "secondary")), _ = r(() => g.value && !m.value), v = r(() => ({
+			type: h.value ? p.type ?? "button" : void 0,
+			disabled: h.value ? m.value : void 0,
+			"aria-disabled": !h.value && m.value ? "true" : void 0
+		})), y = n({
+			disabled: () => m.value,
+			pressVar: "--glass-btn-press-t"
+		}), b = r(() => y.pressStyle.value), x = r(() => e("button tap-squish focus-ring", g.value && "glass-wash glass-capsule", _.value && "glass-capsule-hover", p.class));
+		function S(e) {
+			h.value || !m.value || (e.preventDefault(), e.stopImmediatePropagation());
+		}
+		return (e, n) => d((s(), i(l(f), o({
+			as: a.as,
+			"as-child": a.asChild,
+			"data-slot": "button",
+			"data-emphasis": a.emphasis,
+			"data-tone": a.tone,
+			"data-size": a.size,
+			"data-icon-only": a.iconOnly || void 0,
+			"data-control-target": a.iconOnly ? "" : void 0,
+			"data-loading": a.loading || void 0,
+			"data-press-armed": l(y).armed ? "" : void 0,
+			"aria-busy": a.loading || void 0
+		}, v.value, {
+			class: x.value,
+			style: b.value,
+			onClick: S,
+			onPointerdown: l(y).handlers.onPointerdown,
+			onPointerup: l(y).handlers.onPointerup,
+			onPointercancel: l(y).handlers.onPointercancel,
+			onPointerleave: l(y).handlers.onPointerleave,
+			onPointerenter: l(y).handlers.onPointerenter,
+			onKeydown: l(y).handlers.onKeydown,
+			onKeyup: l(y).handlers.onKeyup,
+			onBlur: l(y).handlers.onBlur
+		}), {
+			default: u(() => [c(e.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"as",
+			"as-child",
+			"data-emphasis",
+			"data-tone",
+			"data-size",
+			"data-icon-only",
+			"data-control-target",
+			"data-loading",
+			"data-press-armed",
+			"aria-busy",
+			"class",
+			"style",
+			"onPointerdown",
+			"onPointerup",
+			"onPointercancel",
+			"onPointerleave",
+			"onPointerenter",
+			"onKeydown",
+			"onKeyup",
+			"onBlur"
+		])), [[l(t), _.value]]);
+	}
+});
+//#endregion
+export { p as t };

package/dist/button.js

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

package/dist/canvas.js

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

package/dist/card-Bk96VI2R.js

@@ -0,0 +1,234 @@
+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";
+//#endregion
+//#region src/components/card/Card.vue
+var _ = /* @__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: {
+			type: Boolean,
+			default: !0
+		},
+		specular: { default: "off" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		as: { default: "div" }
+	},
+	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, {
+			"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-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)
+		}), {
+			default: g(() => [d(r.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"material",
+			"tier",
+			"surface",
+			"deep",
+			"shadow",
+			"grain",
+			"specular",
+			"as",
+			"data-size",
+			"data-cartoon",
+			"data-grid",
+			"data-variant",
+			"data-selected",
+			"style",
+			"class"
+		]));
+	}
+}), v = ["data-condensed"], y = /* @__PURE__ */ o({
+	__name: "CardHeader",
+	props: {
+		shrink: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	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 t = o.value;
+			return t ? e.scrollHeight - e.clientHeight > t.getBoundingClientRect().height / 2 + 24 : !1;
+		}
+		function g() {
+			let e = f.value;
+			s.value = !!e && e.scrollTop >= 24 && m(e);
+		}
+		return n(f, {
+			trackProgress: !1,
+			triggers: [{
+				at: 24,
+				direction: "down",
+				id: "condense"
+			}, {
+				at: 12,
+				direction: "up",
+				id: "expand"
+			}],
+			onCross(e) {
+				let t = f.value;
+				e === "condense" ? s.value = !!t && m(t) : s.value = !1;
+			}
+		}), h(f, g, {
+			immediate: !0,
+			flush: "post"
+		}), (n, r) => (l(), a("div", {
+			ref_key: "root",
+			ref: o,
+			"data-slot": "card-header",
+			"data-condensed": s.value || void 0,
+			class: c(p(e)("card-header", t.shrink && "card-header--shrink", i.class))
+		}, [d(n.$slots, "default")], 10, v));
+	}
+}), b = /* @__PURE__ */ o({
+	__name: "CardTitle",
+	props: {
+		as: { default: "h3" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t;
+		return (r, a) => (l(), i(f(t.as), {
+			"data-slot": "card-title",
+			class: c(p(e)("card-title", n.class))
+		}, {
+			default: g(() => [d(r.$slots, "default")]),
+			_: 3
+		}, 8, ["class"]));
+	}
+}), x = /* @__PURE__ */ o({
+	__name: "CardDescription",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (l(), a("p", {
+			"data-slot": "card-description",
+			class: c(p(e)("card-description", n.class))
+		}, [d(t.$slots, "default")], 2));
+	}
+}), S = /* @__PURE__ */ o({
+	__name: "CardContent",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (l(), a("div", {
+			"data-slot": "card-content",
+			class: c(p(e)("card-content", n.class))
+		}, [d(t.$slots, "default")], 2));
+	}
+}), C = /* @__PURE__ */ o({
+	__name: "CardFooter",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (l(), a("div", {
+			"data-slot": "card-footer",
+			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 };

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 "./card-16xmzIr3.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 };
+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 };