@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/Toaster-C_-WeU9W.js

@@ -0,0 +1,281 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { n as t } from "./useSurfaceAxis-DudiZVOR.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useAttrs as y, withCtx as b } from "vue";
+import { ToastAction as x, ToastClose as S, ToastDescription as C, ToastPortal as w, ToastProvider as T, ToastRoot as E, ToastTitle as D, ToastViewport as O, useForwardPropsEmits as k } from "reka-ui";
+import { X as A } from "@lucide/vue";
+//#endregion
+//#region src/components/toast/Toast.vue
+var j = /* @__PURE__ */ u({
+	__name: "Toast",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		tone: { default: "neutral" },
+		surface: { default: "glass" },
+		defaultOpen: { type: Boolean },
+		forceMount: { type: Boolean },
+		type: {},
+		open: { type: Boolean },
+		duration: {},
+		asChild: { type: Boolean },
+		as: {}
+	},
+	emits: [
+		"escapeKeyDown",
+		"pause",
+		"resume",
+		"swipeStart",
+		"swipeMove",
+		"swipeCancel",
+		"swipeEnd",
+		"update:open"
+	],
+	setup(n, { emit: a }) {
+		let o = n, s = a, c = k(r(() => {
+			let { class: e, tone: t, surface: n, ...r } = o;
+			return r;
+		}), s);
+		return (r, a) => (p(), i(v(E), d({
+			"data-slot": "toast",
+			"data-tone": n.tone,
+			"data-surface": n.surface,
+			"data-reveal": "transient"
+		}, v(c), { class: v(e)(v(t)(n.surface, "floating"), "glass-reveal [--overlay-pad-inline:--spacing(6)] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-panel px-(--overlay-pad-inline) py-(--overlay-pad-block) pr-8 data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=move]:transition-none", "text-foreground", {
+			"feedback-tone [&_svg]:text-(--tone)": n.tone !== "neutral",
+			"feedback-tone-destructive": n.tone === "destructive",
+			"feedback-tone-success": n.tone === "success",
+			"feedback-tone-warning": n.tone === "warning",
+			"feedback-tone-info": n.tone === "info"
+		}, o.class) }), {
+			default: b(() => [g(r.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"data-tone",
+			"data-surface",
+			"class"
+		]));
+	}
+}), M = /* @__PURE__ */ u({
+	__name: "ToastAction",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		altText: {},
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(t) {
+		let n = t, a = r(() => {
+			let { class: e, ...t } = n;
+			return t;
+		});
+		return (t, r) => (p(), i(v(x), d(a.value, { class: v(e)("focus-ring inline-flex h-[calc(2rem*var(--ui-scale))] shrink-0 items-center justify-center rounded-button border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary disabled:pointer-events-none disabled:opacity-disabled group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground", n.class) }), {
+			default: b(() => [g(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), N = /* @__PURE__ */ u({
+	__name: "ToastClose",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(t) {
+		let n = t, a = y(), o = r(() => a["aria-label"] ?? "Dismiss"), s = r(() => {
+			let { class: e, ...t } = n;
+			return t;
+		});
+		return (t, r) => (p(), i(v(S), d(s.value, {
+			"aria-label": o.value,
+			class: v(e)("focus-ring absolute right-2 top-2 rounded-button p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 group-hover:opacity-100", n.class)
+		}), {
+			default: b(() => [l(v(A), {
+				class: "h-4 w-4",
+				"aria-hidden": "true"
+			})]),
+			_: 1
+		}, 16, ["aria-label", "class"]));
+	}
+}), P = /* @__PURE__ */ u({
+	__name: "ToastDescription",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(t) {
+		let n = t, a = r(() => {
+			let { class: e, ...t } = n;
+			return t;
+		});
+		return (t, r) => (p(), i(v(C), d(a.value, { class: v(e)("text-sm opacity-90", n.class) }), {
+			default: b(() => [g(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), F = /* @__PURE__ */ u({
+	__name: "ToastTitle",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(t) {
+		let n = t, a = r(() => {
+			let { class: e, ...t } = n;
+			return t;
+		});
+		return (t, r) => (p(), i(v(D), d(a.value, { class: v(e)("text-sm font-semibold", n.class) }), {
+			default: b(() => [g(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), I = 5, L = 1e6, R = /* @__PURE__ */ new Map();
+function z(e) {
+	if (R.has(e)) return;
+	let t = setTimeout(() => {
+		R.delete(e), V({
+			type: "REMOVE_TOAST",
+			toastId: e
+		});
+	}, L);
+	R.set(e, t);
+}
+var B = m([]);
+function V(e) {
+	switch (e.type) {
+		case "ADD_TOAST":
+			B.value = [e.toast, ...B.value].slice(0, I);
+			break;
+		case "UPDATE_TOAST":
+			B.value = B.value.map((t) => t.id === e.toast.id ? {
+				...t,
+				...e.toast
+			} : t);
+			break;
+		case "DISMISS_TOAST": {
+			let { toastId: t } = e;
+			t ? z(t) : B.value.forEach((e) => {
+				z(e.id);
+			}), B.value = B.value.map((e) => e.id === t || t === void 0 ? {
+				...e,
+				open: !1
+			} : e);
+			break;
+		}
+		case "REMOVE_TOAST":
+			e.toastId === void 0 ? B.value = [] : B.value = B.value.filter((t) => t.id !== e.toastId);
+			break;
+	}
+}
+var H = 0;
+function U() {
+	return H = (H + 1) % Number.MAX_VALUE, H.toString();
+}
+function W(e) {
+	let t = U(), n = (e) => V({
+		type: "UPDATE_TOAST",
+		toast: {
+			...e,
+			id: t
+		}
+	}), r = () => V({
+		type: "DISMISS_TOAST",
+		toastId: t
+	});
+	return V({
+		type: "ADD_TOAST",
+		toast: {
+			...e,
+			id: t,
+			open: !0,
+			"onUpdate:open": (e) => {
+				e || r();
+			}
+		}
+	}), {
+		id: t,
+		dismiss: r,
+		update: n
+	};
+}
+function G() {
+	return {
+		toasts: r(() => B.value),
+		toast: W,
+		dismiss: (e) => V({
+			type: "DISMISS_TOAST",
+			toastId: e
+		})
+	};
+}
+//#endregion
+//#region src/components/toast/Toaster.vue?vue&type=script&setup=true&lang.ts
+var K = { class: "grid gap-1" }, q = "fixed top-0 z-toast flex max-h-screen w-full", J = "p-4", Y = "md:max-w-[420px]", X = /* @__PURE__ */ u({
+	__name: "Toaster",
+	props: { position: { default: "bottom-right" } },
+	setup(t) {
+		let u = t, { toasts: m } = G(), g = {
+			"bottom-right": ["flex-col-reverse", "sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col"],
+			"bottom-left": ["flex-col-reverse", "sm:bottom-0 sm:left-0 sm:top-auto sm:flex-col"],
+			"bottom-center": ["flex-col-reverse", "sm:bottom-0 sm:left-1/2 sm:top-auto sm:-translate-x-1/2 sm:flex-col"],
+			"top-right": ["right-0 flex-col", ""],
+			"top-left": ["left-0 flex-col", ""],
+			"top-center": ["left-1/2 -translate-x-1/2 flex-col", ""]
+		}, y = r(() => {
+			let [t, n] = g[u.position];
+			return e(q, t, J, n, Y);
+		});
+		return (e, t) => (p(), i(v(T), null, {
+			default: b(() => [(p(!0), o(n, null, h(v(m), (e) => (p(), i(j, d({ key: e.id }, { ref_for: !0 }, e), {
+				default: b(() => [s("div", K, [e.title ? (p(), i(F, { key: 0 }, {
+					default: b(() => [c(_(e.title), 1)]),
+					_: 2
+				}, 1024)) : a("", !0), e.description ? (p(), i(P, { key: 1 }, {
+					default: b(() => [c(_(e.description), 1)]),
+					_: 2
+				}, 1024)) : a("", !0)]), l(N)]),
+				_: 2
+			}, 1040))), 128)), l(v(w), null, {
+				default: b(() => [l(v(O), {
+					class: f(y.value),
+					"aria-live": "polite",
+					"aria-atomic": "false"
+				}, null, 8, ["class"])]),
+				_: 1
+			})]),
+			_: 1
+		}));
+	}
+});
+//#endregion
+export { P as a, j as c, F as i, W as n, N as o, G as r, M as s, X as t };

package/dist/ToggleGroupItem-DNWx2aSW.js

@@ -0,0 +1,175 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { t } from "./createContext-BQ1Gy_LB.js";
+import { computed as n, createBlock as r, createElementVNode as i, defineComponent as a, mergeProps as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderSlot as u, unref as d, withCtx as f } from "vue";
+import { Toggle as p, ToggleGroupItem as m, ToggleGroupRoot as h, injectToggleGroupRootContext as g, useForwardProps as _, useForwardPropsEmits as v } from "reka-ui";
+import { cva as y } from "class-variance-authority";
+//#endregion
+//#region src/components/toggle/Toggle.vue
+var b = /* @__PURE__ */ a({
+	__name: "Toggle",
+	props: {
+		defaultValue: { type: Boolean },
+		modelValue: { type: [Boolean, null] },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		variant: { default: "default" },
+		size: { default: "md" }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: i }) {
+		let a = t, s = i, c = v(n(() => {
+			let { class: e, size: t, variant: n, ...r } = a;
+			return r;
+		}), s);
+		return (n, i) => (l(), r(d(p), o({
+			"data-slot": "toggle",
+			"data-variant": t.variant,
+			"data-size": t.size
+		}, d(c), { class: d(e)(d(x)({
+			variant: t.variant,
+			size: t.size
+		}), a.class) }), {
+			default: f(() => [u(n.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"data-variant",
+			"data-size",
+			"class"
+		]));
+	}
+}), x = y("tap-squish focus-ring inline-flex items-center justify-center gap-2 rounded-pill text-[length:var(--control-text)] font-medium transition-control hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-disabled data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg:not([class*=size-])]:size-(--ui-glyph) [&_svg]:shrink-0 [&_svg]:pointer-events-none", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "control-surface",
+			card: "rounded-card glass-card w-full transform-gpu cursor-pointer flex-col gap-4 p-8 text-center transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-fast ease-standard hover:bg-glass-quiet hover:text-foreground active:scale-95 data-[state=on]:border-glass-border-quiet data-[state=on]:bg-glass-quiet data-[state=on]:text-foreground data-[state=on]:shadow-glass-quiet"
+		},
+		size: {
+			md: "h-(--control-h-md) px-3",
+			sm: "h-(--control-h-sm) px-2.5",
+			lg: "h-(--control-h-lg) px-5"
+		}
+	},
+	compoundVariants: [{
+		variant: "card",
+		size: [
+			"md",
+			"sm",
+			"lg"
+		],
+		class: "h-auto"
+	}],
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+}), S = t("glass-ui:toggle-group");
+S.KEY;
+function C(e) {
+	S.provide(e);
+}
+var w = S.use, T = ["role"], E = /* @__PURE__ */ a({
+	__name: "ToggleGroup",
+	props: {
+		rovingFocus: { type: Boolean },
+		disabled: { type: Boolean },
+		orientation: {},
+		dir: {},
+		loop: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		type: {},
+		modelValue: {},
+		defaultValue: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		variant: {},
+		size: {}
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: a }) {
+		let p = t, m = a;
+		C({
+			variant: p.variant,
+			size: p.size
+		});
+		let g = n(() => p.type === "single" ? "radiogroup" : "group"), _ = n(() => p.type === "single" ? "glass-capsule-track p-1" : ""), y = n(() => p.type === "single" ? {
+			"--radius-inset": "0.25rem",
+			"--radius-ctx": p.variant === "card" ? "var(--radius-card)" : "var(--radius-pill)",
+			borderRadius: "calc(var(--radius-ctx) + var(--radius-inset))"
+		} : void 0), b = v(n(() => {
+			let { class: e, ...t } = p;
+			return t;
+		}), m);
+		return (t, n) => (l(), r(d(h), o(d(b), { "as-child": "" }), {
+			default: f(() => [i("div", {
+				"data-slot": "toggle-group",
+				role: g.value,
+				style: c(y.value),
+				class: s(d(e)("flex items-center justify-center gap-1", _.value, p.class))
+			}, [u(t.$slots, "default")], 14, T)]),
+			_: 3
+		}, 16));
+	}
+}), D = /* @__PURE__ */ a({
+	__name: "ToggleGroupItem",
+	props: {
+		value: {},
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		variant: {},
+		size: {}
+	},
+	setup(t) {
+		let i = t, a = w(), s = g(null), c = n(() => s?.isSingle?.value === !0), p = n(() => {
+			if (c.value) return s?.modelValue?.value === i.value;
+		}), h = _(n(() => {
+			let { class: e, variant: t, size: n, ...r } = i;
+			return r;
+		})), v = n(() => c.value ? {
+			role: "radio",
+			"aria-checked": p.value,
+			"aria-pressed": void 0
+		} : {}), y = n(() => ({
+			...h.value,
+			...v.value
+		}));
+		return (n, s) => (l(), r(d(m), o(y.value, { class: d(e)(d(x)({
+			variant: d(a)?.variant || t.variant,
+			size: d(a)?.size || t.size
+		}), i.class) }), {
+			default: f(() => [u(n.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+});
+//#endregion
+export { b as i, E as n, x as r, D as t };

package/dist/TooltipProvider-GtfYdSVf.js

@@ -0,0 +1,110 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { n as t } from "./useSurfaceAxis-DudiZVOR.js";
+import { computed as n, createBlock as r, createVNode as i, defineComponent as a, guardReactiveProps as o, mergeProps as s, normalizeProps as c, openBlock as l, renderSlot as u, unref as d, withCtx as f } from "vue";
+import { TooltipContent as p, TooltipPortal as m, TooltipProvider as h, TooltipRoot as g, TooltipTrigger as _, useForwardPropsEmits as v } from "reka-ui";
+//#endregion
+//#region src/components/tooltip/Tooltip.vue
+var y = /* @__PURE__ */ a({
+	__name: "Tooltip",
+	props: {
+		defaultOpen: { type: Boolean },
+		open: { type: Boolean },
+		delayDuration: {},
+		disableHoverableContent: { type: Boolean },
+		disableClosingTrigger: { type: Boolean },
+		disabled: { type: Boolean },
+		ignoreNonKeyboardFocus: { type: Boolean }
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let n = v(e, t);
+		return (e, t) => (l(), r(d(g), s({ "data-slot": "tooltip" }, d(n)), {
+			default: f(() => [u(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), b = /* @__PURE__ */ a({
+	inheritAttrs: !1,
+	__name: "TooltipContent",
+	props: {
+		forceMount: { type: Boolean },
+		ariaLabel: {},
+		asChild: { type: Boolean },
+		as: {},
+		side: {},
+		sideOffset: { default: 4 },
+		align: {},
+		alignOffset: {},
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: {},
+		arrowPadding: {},
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: { default: "glass" }
+	},
+	emits: ["escapeKeyDown", "pointerDownOutside"],
+	setup(a, { emit: o }) {
+		let c = a, h = o, g = v(n(() => {
+			let { class: e, surface: t, ...n } = c;
+			return n;
+		}), h);
+		return (n, a) => (l(), r(d(m), null, {
+			default: f(() => [i(d(p), s({
+				...d(g),
+				...n.$attrs
+			}, {
+				"data-surface": c.surface,
+				"data-reveal": "tooltip",
+				class: d(e)("z-tooltip overflow-hidden rounded-tooltip border text-popover-foreground glass-reveal", d(t)(c.surface, "floating"), "[--overlay-pad-inline:--spacing(2)] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block) text-(length:--tooltip-text)", c.class)
+			}), {
+				default: f(() => [u(n.$slots, "default")]),
+				_: 3
+			}, 16, ["data-surface", "class"])]),
+			_: 3
+		}));
+	}
+}), x = /* @__PURE__ */ a({
+	__name: "TooltipTrigger",
+	props: {
+		reference: {},
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (l(), r(d(_), c(o(t)), {
+			default: f(() => [u(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), S = /* @__PURE__ */ a({
+	__name: "TooltipProvider",
+	props: {
+		delayDuration: {},
+		skipDelayDuration: {},
+		disableHoverableContent: { type: Boolean },
+		disableClosingTrigger: { type: Boolean },
+		disabled: { type: Boolean },
+		ignoreNonKeyboardFocus: { type: Boolean },
+		content: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (l(), r(d(h), c(o(t)), {
+			default: f(() => [u(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+});
+//#endregion
+export { y as i, x as n, b as r, S as t };

package/dist/accent-tone-solve-CBw3L0cy.js

@@ -0,0 +1,20 @@
+import { t as e } from "./color-Bp5jmv4Z.js";
+import { OKLCHColor as t, rawOklchToOklab as n, safeAccentColor as r } from "@mkbabb/value.js";
+//#region src/composables/color/accent-tone-solve.ts
+var i = "hsl(36 48% 97%)", a = 4.5, o = .18;
+function s(e, t, r) {
+	let [i] = n(e.L, e.C, e.h), [a] = n(t.L, t.C, t.h);
+	return i * (1 - r) + a * r;
+}
+function c(n, c = {}) {
+	let l = c.bandStrength ?? o, u = c.inkContrast ?? a, d = c.surface || i, f, p;
+	try {
+		f = e(n), p = e(d);
+	} catch {
+		return "";
+	}
+	let m = s(p, f, l);
+	return r(new t(f.L, f.C, f.h), m, u * .1).toString();
+}
+//#endregion
+export { c as solveAccentInk };

package/dist/animated-digit.d.ts

@@ -1 +1 @@
-export * from "./components/custom/animated-digit";
+export * from "./components/animated-digit";

package/dist/animated-digit.js

@@ -1,8 +1,8 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { t as n } from "./useAnimatedNumber-BntskVdQ.js";
+import { t as e } from "./class-names-5jotTFzp.js";
+import { t } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { t as n } from "./useAnimatedNumber-2XC4aRB6.js";
 import { computed as r, createElementBlock as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, toDisplayString as l, unref as u } from "vue";
-//#region src/components/custom/animated-digit/AnimatedDigit.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/animated-digit/AnimatedDigit.vue?vue&type=script&setup=true&lang.ts
 var d = ["data-is-animating"], f = /* @__PURE__ */ t(/* @__PURE__ */ a({
 	__name: "AnimatedDigit",
 	props: {
@@ -39,6 +39,6 @@ var d = ["data-is-animating"], f = /* @__PURE__ */ t(/* @__PURE__ */ a({
 			"data-is-animating": u(f).isAnimating.value ? "true" : "false"
 		}, l(p.value), 15, d));
 	}
-}), [["__scopeId", "data-v-a6ca1136"]]);
+}), [["__scopeId", "data-v-30ebd230"]]);
 //#endregion
 export { f as AnimatedDigit };

package/dist/aurora.d.ts

@@ -1 +1 @@
-export * from "./components/custom/aurora";
+export * from "./components/aurora";