@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/carousel.js

@@ -1,12 +1,13 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { C as t, b as n, v as r, w as i, x as a, y as o } from "./vendor-B2qOlYY3.js";
-import { n as s } from "./button-5dY1Dvhd.js";
-import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, onMounted as _, openBlock as v, ref as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, watch as w, withCtx as T } from "vue";
-import { createInjectionState as E } from "@vueuse/core";
-import D from "embla-carousel-vue";
-//#region src/components/ui/carousel/useCarousel.ts
-var [O, k] = E(({ opts: e, orientation: t, plugins: n }, r) => {
-	let [i, a] = D({
+import { t as e } from "./class-names-5jotTFzp.js";
+import { n as t } from "./button-BXzhydVB.js";
+import { t as n } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, normalizeClass as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useModel as x, watch as S, withCtx as C } from "vue";
+import { ArrowLeft as w, ArrowRight as T, ChevronDown as E, ChevronLeft as D, ChevronRight as O, ChevronUp as k } from "@lucide/vue";
+import { createInjectionState as A } from "@vueuse/core";
+import j from "embla-carousel-vue";
+var [M, N] = A(({ opts: e, orientation: t, plugins: n }, r) => {
+	let [i, a] = j({
+		duration: 30,
 		...e,
 		axis: t === "horizontal" ? "x" : "y"
 	}, n);
@@ -16,11 +17,11 @@ var [O, k] = E(({ opts: e, orientation: t, plugins: n }, r) => {
 	function s() {
 		a.value?.scrollNext();
 	}
-	let c = y(!1), l = y(!1);
+	let c = g(!1), l = g(!1);
 	function u(e) {
 		c.value = e?.canScrollNext() || !1, l.value = e?.canScrollPrev() || !1;
 	}
-	return _(() => {
+	return m(() => {
 		a.value && (a.value?.on("init", u), a.value?.on("reInit", u), a.value?.on("select", u), r("init-api", a.value));
 	}), {
 		carouselRef: i,
@@ -32,16 +33,16 @@ var [O, k] = E(({ opts: e, orientation: t, plugins: n }, r) => {
 		orientation: t
 	};
 });
-function A() {
-	let e = k();
+function P() {
+	let e = N();
 	if (!e) throw Error("useCarousel must be used within a <Carousel />");
 	return e;
 }
 //#endregion
-//#region src/components/ui/carousel/Carousel.vue
-var j = /* @__PURE__ */ m({
+//#region src/components/carousel/Carousel.vue
+var F = /* @__PURE__ */ l({
 	__name: "Carousel",
-	props: {
+	props: /* @__PURE__ */ u({
 		opts: {},
 		plugins: {},
 		orientation: { default: "horizontal" },
@@ -52,64 +53,107 @@ var j = /* @__PURE__ */ m({
 			Object,
 			Array
 		] }
-	},
-	emits: ["init-api"],
+	}, {
+		active: { default: 0 },
+		activeModifiers: {}
+	}),
+	emits: /* @__PURE__ */ u(["init-api"], ["update:active"]),
 	setup(t, { expose: n, emit: r }) {
-		let i = t, { canScrollNext: a, canScrollPrev: o, carouselApi: s, carouselRef: c, orientation: l, scrollNext: u, scrollPrev: f } = O(i, r);
-		n({
-			canScrollNext: a,
-			canScrollPrev: o,
-			carouselApi: s,
-			carouselRef: c,
-			orientation: l,
-			scrollNext: u,
-			scrollPrev: f
+		let i = t, a = r, s = x(t, "active"), { canScrollNext: c, canScrollPrev: l, carouselApi: u, carouselRef: d, orientation: p, scrollNext: m, scrollPrev: g } = M(i, a);
+		function v(e) {
+			let t = e.selectedScrollSnap();
+			e.previousScrollSnap() !== t && t !== s.value && (s.value = t);
+		}
+		S(u, (e) => {
+			e && (e.selectedScrollSnap() !== s.value && (s.value = e.selectedScrollSnap()), e.on("select", v), e.on("reInit", v));
+		}, { immediate: !0 }), S(s, (e) => {
+			let t = u.value;
+			!t || !Number.isInteger(e) || t.selectedScrollSnap() !== e && t.scrollTo(e);
+		}), n({
+			canScrollNext: c,
+			canScrollPrev: l,
+			carouselApi: u,
+			carouselRef: d,
+			orientation: p,
+			scrollNext: m,
+			scrollPrev: g
 		});
-		function p(e) {
+		function y(e) {
 			let t = i.orientation === "vertical" ? "ArrowUp" : "ArrowLeft", n = i.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
 			if (e.key === t) {
-				e.preventDefault(), f();
+				e.preventDefault(), g();
 				return;
 			}
-			e.key === n && (e.preventDefault(), u());
+			e.key === n && (e.preventDefault(), m());
 		}
-		return (t, n) => (v(), d("div", {
+		return (t, n) => (h(), o("div", {
 			"data-slot": "carousel",
-			class: g(C(e)("relative", i.class)),
+			class: f(b(e)("relative", i.class)),
 			role: "region",
 			"aria-roledescription": "carousel",
 			tabindex: "0",
-			onKeydown: p
-		}, [b(t.$slots, "default", {
-			canScrollNext: C(a),
-			canScrollPrev: C(o),
-			carouselApi: C(s),
-			carouselRef: C(c),
-			orientation: C(l),
-			scrollNext: C(u),
-			scrollPrev: C(f)
+			onKeydown: y
+		}, [_(t.$slots, "default", {
+			canScrollNext: b(c),
+			canScrollPrev: b(l),
+			carouselApi: b(u),
+			carouselRef: b(d),
+			orientation: b(p),
+			scrollNext: b(m),
+			scrollPrev: b(g)
 		})], 34));
 	}
-}), M = /* @__PURE__ */ m({
+}), I = .035, L = .3, R = /* @__PURE__ */ n(/* @__PURE__ */ l({
 	inheritAttrs: !1,
 	__name: "CarouselContent",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t, { expose: n }) {
-		let r = t, { carouselRef: i, orientation: a } = A();
-		return n({ carouselRef: i }), (t, n) => (v(), d("div", {
+	props: {
+		arrival: {
+			type: Boolean,
+			default: !1
+		},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, { carouselRef: r, carouselApi: i, orientation: a } = P(), c = g(null), l = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		function u() {
+			let e = i.value;
+			if (!e) return;
+			let t = e.slideNodes();
+			if (!n.arrival || l) {
+				for (let e of t) e.style.transform = "", e.style.opacity = "";
+				return;
+			}
+			let r = e.scrollProgress(), a = e.scrollSnapList();
+			t.forEach((e, t) => {
+				let n = a[t] ?? r, i = Math.min(Math.abs(n - r) * (a.length - 1 || 1), 1);
+				e.style.transform = `scale(${(1 - I * i).toFixed(4)})`, e.style.opacity = (1 - L * i).toFixed(4);
+			});
+		}
+		let f = null;
+		function m(e) {
+			!e || f === e || (f = e, e.on("scroll", u), e.on("reInit", u), e.on("init", u), u());
+		}
+		return S(i, (e) => m(e), { immediate: !0 }), S(() => n.arrival, () => u()), p(() => {
+			let e = f;
+			e && (e.off("scroll", u), e.off("reInit", u), e.off("init", u), f = null);
+		}), (t, i) => (h(), o("div", {
 			ref_key: "carouselRef",
-			ref: i,
+			ref: r,
 			"data-slot": "carousel-content",
-			class: "overflow-hidden"
-		}, [f("div", h({ class: C(e)("flex", C(a) === "horizontal" ? "-ml-4" : "-mt-4 flex-col", r.class) }, t.$attrs), [b(t.$slots, "default")], 16)], 512));
+			class: "carousel-viewport overflow-hidden"
+		}, [s("div", d({
+			ref_key: "trackEl",
+			ref: c,
+			class: b(e)("carousel-track flex", b(a) === "horizontal" ? "-ml-4" : "-mt-4 flex-col", n.class)
+		}, t.$attrs), [_(t.$slots, "default", {}, void 0, !0)], 16)], 512));
 	}
-}), N = /* @__PURE__ */ m({
+}), [["__scopeId", "data-v-f78259db"]]), z = /* @__PURE__ */ l({
 	__name: "CarouselItem",
 	props: { class: { type: [
 		Boolean,
@@ -119,19 +163,19 @@ var j = /* @__PURE__ */ m({
 		Array
 	] } },
 	setup(t) {
-		let n = t, { orientation: r } = A();
-		return (t, i) => (v(), d("div", {
+		let n = t, { orientation: r } = P();
+		return (t, i) => (h(), o("div", {
 			"data-slot": "carousel-item",
 			role: "group",
 			"aria-roledescription": "slide",
-			class: g(C(e)("min-w-0 shrink-0 grow-0 basis-full", C(r) === "horizontal" ? "pl-4" : "pt-4", n.class))
-		}, [b(t.$slots, "default")], 2));
+			class: f(b(e)("min-w-0 shrink-0 grow-0 basis-full", b(r) === "horizontal" ? "pl-4" : "pt-4", n.class))
+		}, [_(t.$slots, "default")], 2));
 	}
-}), P = /* @__PURE__ */ m({
+}), B = /* @__PURE__ */ l({
 	__name: "CarouselNext",
 	props: {
 		variant: { default: "outline" },
-		size: { default: "icon" },
+		size: {},
 		class: { type: [
 			Boolean,
 			null,
@@ -141,16 +185,17 @@ var j = /* @__PURE__ */ m({
 		] }
 	},
 	setup(n) {
-		let r = n, { orientation: i, canScrollNext: a, scrollNext: o } = A();
-		return (c, u) => (v(), l(C(s), {
+		let r = n, { orientation: a, canScrollNext: o, scrollNext: l } = P();
+		return (u, d) => (h(), i(b(t), {
 			"data-slot": "carousel-next",
-			disabled: !C(a),
-			class: g(C(e)("absolute h-(--carousel-nav-size) w-(--carousel-nav-size) rounded-pill", C(i) === "horizontal" ? "top-1/2 -translate-y-1/2 right-[calc(-1*var(--carousel-nav-offset))]" : "left-1/2 -translate-x-1/2 rotate-90 bottom-[calc(-1*var(--carousel-nav-offset))]", r.class)),
+			disabled: !b(o),
+			class: f(b(e)("absolute h-(--carousel-nav-size) w-(--carousel-nav-size) rounded-pill", b(a) === "horizontal" ? "top-1/2 -translate-y-1/2 right-[calc(-1*var(--carousel-nav-offset))]" : "left-1/2 -translate-x-1/2 rotate-90 bottom-[calc(-1*var(--carousel-nav-offset))]", r.class)),
 			variant: n.variant,
 			size: n.size,
-			onClick: C(o)
+			"icon-only": "",
+			onClick: b(l)
 		}, {
-			default: T(() => [b(c.$slots, "default", {}, () => [p(C(t)), u[0] ||= f("span", { class: "sr-only" }, "Next Slide", -1)])]),
+			default: C(() => [_(u.$slots, "default", {}, () => [c(b(T)), d[0] ||= s("span", { class: "sr-only" }, "Next Slide", -1)])]),
 			_: 3
 		}, 8, [
 			"disabled",
@@ -160,11 +205,11 @@ var j = /* @__PURE__ */ m({
 			"onClick"
 		]));
 	}
-}), F = {
+}), V = {
 	key: 0,
 	"data-slot": "carousel-pager-counter",
 	class: "glass-pager-ring text-mono-caption tabular-nums"
-}, I = /* @__PURE__ */ m({
+}, H = /* @__PURE__ */ l({
 	__name: "CarouselPager",
 	props: {
 		showCounter: {
@@ -179,45 +224,45 @@ var j = /* @__PURE__ */ m({
 			Array
 		] }
 	},
-	setup(t) {
-		let i = t, { carouselApi: f, canScrollNext: m, canScrollPrev: h, orientation: b, scrollNext: E, scrollPrev: D } = A(), O = y(0), k = y(0);
-		function j() {
-			let e = f.value;
-			e && (O.value = e.selectedScrollSnap(), k.value = e.scrollSnapList().length);
+	setup(n) {
+		let s = n, { carouselApi: l, canScrollNext: u, canScrollPrev: d, orientation: p, scrollNext: _, scrollPrev: x } = P(), w = g(0), T = g(0);
+		function A() {
+			let e = l.value;
+			e && (w.value = e.selectedScrollSnap(), T.value = e.scrollSnapList().length);
 		}
-		w(f, (e) => {
-			e && (j(), e.on("select", j), e.on("reInit", j));
-		}, { immediate: !0 }), _(j);
-		let M = c(() => b === "vertical" ? r : n), N = c(() => b === "vertical" ? a : o);
-		return (n, r) => (v(), d("div", {
+		S(l, (e) => {
+			e && (A(), e.on("select", A), e.on("reInit", A));
+		}, { immediate: !0 }), m(A);
+		let j = r(() => p === "vertical" ? k : D), M = r(() => p === "vertical" ? E : O);
+		return (r, l) => (h(), o("div", {
 			"data-slot": "carousel-pager",
-			class: g(C(e)("inline-flex items-center gap-2", C(b) === "vertical" && "flex-col", i.class))
+			class: f(b(e)("inline-flex items-center gap-2", b(p) === "vertical" && "flex-col", s.class))
 		}, [
-			p(C(s), {
+			c(b(t), {
 				variant: "ghost",
-				size: "icon",
-				disabled: !C(h),
-				"aria-label": C(b) === "vertical" ? "Previous slide (up)" : "Previous slide",
+				iconOnly: "",
+				disabled: !b(d),
+				"aria-label": b(p) === "vertical" ? "Previous slide (up)" : "Previous slide",
 				"data-slot": "carousel-pager-prev",
-				onClick: C(D)
+				onClick: b(x)
 			}, {
-				default: T(() => [(v(), l(x(M.value), { class: "size-4" }))]),
+				default: C(() => [(h(), i(v(j.value), { class: "size-4" }))]),
 				_: 1
 			}, 8, [
 				"disabled",
 				"aria-label",
 				"onClick"
 			]),
-			t.showCounter && k.value > 0 ? (v(), d("span", F, S(O.value + 1) + " / " + S(k.value), 1)) : u("", !0),
-			p(C(s), {
+			n.showCounter && T.value > 0 ? (h(), o("span", V, y(w.value + 1) + " / " + y(T.value), 1)) : a("", !0),
+			c(b(t), {
 				variant: "ghost",
-				size: "icon",
-				disabled: !C(m),
-				"aria-label": C(b) === "vertical" ? "Next slide (down)" : "Next slide",
+				iconOnly: "",
+				disabled: !b(u),
+				"aria-label": b(p) === "vertical" ? "Next slide (down)" : "Next slide",
 				"data-slot": "carousel-pager-next",
-				onClick: C(E)
+				onClick: b(_)
 			}, {
-				default: T(() => [(v(), l(x(N.value), { class: "size-4" }))]),
+				default: C(() => [(h(), i(v(M.value), { class: "size-4" }))]),
 				_: 1
 			}, 8, [
 				"disabled",
@@ -226,11 +271,11 @@ var j = /* @__PURE__ */ m({
 			])
 		], 2));
 	}
-}), L = /* @__PURE__ */ m({
+}), U = /* @__PURE__ */ l({
 	__name: "CarouselPrevious",
 	props: {
 		variant: { default: "outline" },
-		size: { default: "icon" },
+		size: {},
 		class: { type: [
 			Boolean,
 			null,
@@ -239,17 +284,18 @@ var j = /* @__PURE__ */ m({
 			Array
 		] }
 	},
-	setup(t) {
-		let n = t, { orientation: r, canScrollPrev: a, scrollPrev: o } = A();
-		return (c, u) => (v(), l(C(s), {
+	setup(n) {
+		let r = n, { orientation: a, canScrollPrev: o, scrollPrev: l } = P();
+		return (u, d) => (h(), i(b(t), {
 			"data-slot": "carousel-previous",
-			disabled: !C(a),
-			class: g(C(e)("absolute h-(--carousel-nav-size) w-(--carousel-nav-size) rounded-pill", C(r) === "horizontal" ? "top-1/2 -translate-y-1/2 left-[calc(-1*var(--carousel-nav-offset))]" : "left-1/2 -translate-x-1/2 rotate-90 top-[calc(-1*var(--carousel-nav-offset))]", n.class)),
-			variant: t.variant,
-			size: t.size,
-			onClick: C(o)
+			disabled: !b(o),
+			class: f(b(e)("absolute h-(--carousel-nav-size) w-(--carousel-nav-size) rounded-pill", b(a) === "horizontal" ? "top-1/2 -translate-y-1/2 left-[calc(-1*var(--carousel-nav-offset))]" : "left-1/2 -translate-x-1/2 rotate-90 top-[calc(-1*var(--carousel-nav-offset))]", r.class)),
+			variant: n.variant,
+			size: n.size,
+			"icon-only": "",
+			onClick: b(l)
 		}, {
-			default: T(() => [b(c.$slots, "default", {}, () => [p(C(i)), u[0] ||= f("span", { class: "sr-only" }, "Previous Slide", -1)])]),
+			default: C(() => [_(u.$slots, "default", {}, () => [c(b(w)), d[0] ||= s("span", { class: "sr-only" }, "Previous Slide", -1)])]),
 			_: 3
 		}, 8, [
 			"disabled",
@@ -259,11 +305,11 @@ var j = /* @__PURE__ */ m({
 			"onClick"
 		]));
 	}
-}), R = {
+}), W = {
 	key: 0,
 	"data-slot": "glass-carousel-pager-counter",
 	class: "rounded-pill border border-border bg-card px-3 py-1 text-mono-caption tabular-nums shadow-cartoon-sm"
-}, z = /* @__PURE__ */ m({
+}, G = /* @__PURE__ */ l({
 	__name: "GlassCarouselPager",
 	props: {
 		index: {},
@@ -290,45 +336,45 @@ var j = /* @__PURE__ */ m({
 		"next",
 		"select"
 	],
-	setup(t, { emit: i }) {
-		let f = t, m = i, h = c(() => f.loop ? f.total > 1 : f.index > 0), _ = c(() => f.loop ? f.total > 1 : f.index < f.total - 1);
-		function y() {
-			h.value && (f.loop ? m("select", (f.index - 1 + f.total) % f.total) : (m("prev"), m("select", Math.max(0, f.index - 1))));
+	setup(n, { emit: s }) {
+		let l = n, u = s, d = r(() => l.loop ? l.total > 1 : l.index > 0), p = r(() => l.loop ? l.total > 1 : l.index < l.total - 1);
+		function m() {
+			d.value && (l.loop ? u("select", (l.index - 1 + l.total) % l.total) : (u("prev"), u("select", Math.max(0, l.index - 1))));
 		}
-		function w() {
-			_.value && (f.loop ? m("select", (f.index + 1) % f.total) : (m("next"), m("select", Math.min(f.total - 1, f.index + 1))));
+		function g() {
+			p.value && (l.loop ? u("select", (l.index + 1) % l.total) : (u("next"), u("select", Math.min(l.total - 1, l.index + 1))));
 		}
-		let E = c(() => f.orientation === "vertical" ? r : n), D = c(() => f.orientation === "vertical" ? a : o);
-		return (n, r) => (v(), d("div", {
+		let x = r(() => l.orientation === "vertical" ? k : D), S = r(() => l.orientation === "vertical" ? E : O);
+		return (r, s) => (h(), o("div", {
 			"data-slot": "glass-carousel-pager",
-			class: g(C(e)("inline-flex items-center gap-2", t.orientation === "vertical" && "flex-col", "max-md:flex-wrap max-md:justify-center max-md:gap-2", f.class))
+			class: f(b(e)("inline-flex items-center gap-2", n.orientation === "vertical" && "flex-col", "max-md:flex-wrap max-md:justify-center max-md:gap-2", l.class))
 		}, [
-			p(C(s), {
+			c(b(t), {
 				variant: "outline",
-				size: "icon",
-				disabled: !h.value,
-				"aria-label": t.orientation === "vertical" ? "Previous slide (up)" : "Previous slide",
+				iconOnly: "",
+				disabled: !d.value,
+				"aria-label": n.orientation === "vertical" ? "Previous slide (up)" : "Previous slide",
 				"data-slot": "glass-carousel-pager-prev",
-				onClick: y
+				onClick: m
 			}, {
-				default: T(() => [(v(), l(x(E.value), { class: "size-4" }))]),
+				default: C(() => [(h(), i(v(x.value), { class: "size-4" }))]),
 				_: 1
 			}, 8, ["disabled", "aria-label"]),
-			t.showCounter && t.total > 0 ? (v(), d("span", R, S(t.index + 1) + " / " + S(t.total), 1)) : u("", !0),
-			p(C(s), {
+			n.showCounter && n.total > 0 ? (h(), o("span", W, y(n.index + 1) + " / " + y(n.total), 1)) : a("", !0),
+			c(b(t), {
 				variant: "outline",
-				size: "icon",
-				disabled: !_.value,
-				"aria-label": t.orientation === "vertical" ? "Next slide (down)" : "Next slide",
+				iconOnly: "",
+				disabled: !p.value,
+				"aria-label": n.orientation === "vertical" ? "Next slide (down)" : "Next slide",
 				"data-slot": "glass-carousel-pager-next",
-				onClick: w
+				onClick: g
 			}, {
-				default: T(() => [(v(), l(x(D.value), { class: "size-4" }))]),
+				default: C(() => [(h(), i(v(S.value), { class: "size-4" }))]),
 				_: 1
 			}, 8, ["disabled", "aria-label"]),
-			b(n.$slots, "trailing")
+			_(r.$slots, "trailing")
 		], 2));
 	}
 });
 //#endregion
-export { j as Carousel, M as CarouselContent, N as CarouselItem, P as CarouselNext, I as CarouselPager, L as CarouselPrevious, z as GlassCarouselPager, A as useCarousel };
+export { F as Carousel, R as CarouselContent, z as CarouselItem, B as CarouselNext, H as CarouselPager, U as CarouselPrevious, G as GlassCarouselPager, P as useCarousel };

package/dist/chip.d.ts

@@ -0,0 +1,10 @@
+// @mkbabb/glass-ui/chip — the ONE folded chip (BI.W-CHIP-FOLD).
+//
+// The value.js-QUARANTINED leaf of the chip family: <Chip>'s tonal ink solve rides a
+// dynamic `import('./accent-tone-solve')` boundary INSIDE `useAccentTone` (the sync
+// value.js-free shell), so a plain-boolean toggle (a `var()` / unset tone) stays
+// value.js-free — but a concrete `#hex`/`oklch(…)` tone loads value.js. So <Chip>
+// ships as its OWN subpath leaf and is NOT on the value.js-FREE root barrel (the
+// SCC-trap discipline; the /border-progress + /easing precedent — a value.js-bearing
+// component carves OFF the value.js-free root). A consumer imports here.
+export * from "./components/chip";

package/dist/chip.js

@@ -0,0 +1,81 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { t } from "./useAccentTone-D25DxviG.js";
+import { computed as n, createBlock as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, withCtx as l } from "vue";
+import { Toggle as u, useForwardPropsEmits as d } from "reka-ui";
+import { cva as f } from "class-variance-authority";
+//#region src/components/chip/chipVariants.ts
+var p = f([
+	"glass-chip glass-capsule glass-capsule-hover accent-tone",
+	"focus-ring select-none cursor-pointer outline-none font-sans",
+	"text-muted-foreground",
+	"disabled:opacity-disabled disabled:pointer-events-none disabled:cursor-not-allowed"
+].join(" "), {
+	variants: {
+		size: {
+			sm: "inline-flex items-center justify-center gap-1 px-2.5 py-1 text-caption",
+			md: "inline-flex items-center justify-center gap-1.5 px-3.5 py-1.5 text-small",
+			lg: "inline-flex items-center justify-center gap-2 px-5 py-2 text-base"
+		},
+		shape: {
+			pill: "",
+			cell: "glass-chip--cell flex flex-col items-center justify-center gap-1.5 px-2 py-2.5 text-micro"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		shape: "pill"
+	}
+}), m = /* @__PURE__ */ i({
+	name: "Chip",
+	__name: "Chip",
+	props: {
+		defaultValue: { type: Boolean },
+		modelValue: { type: [Boolean, null] },
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		shape: {},
+		size: {},
+		tone: {},
+		surface: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(i, { emit: f }) {
+		let m = i, h = f, { toneStyle: g } = t(() => m.tone ?? "var(--primary)"), _ = d(() => {
+			let { class: e, tone: t, size: n, shape: r, surface: i, ...a } = m;
+			return a;
+		}, h), v = n(() => e(p({
+			size: m.size,
+			shape: m.shape
+		}), m.class)), y = n(() => {
+			if (m.tone !== void 0) return {
+				...g.value,
+				"--glass-fill-tint": m.tone,
+				"--glass-fill-strength": "var(--chip-glass-strength, 12%)"
+			};
+		});
+		return (e, t) => (o(), r(c(u), a(c(_), {
+			class: v.value,
+			style: y.value,
+			"data-surface": m.surface
+		}), {
+			default: l(() => [s(e.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"class",
+			"style",
+			"data-surface"
+		]));
+	}
+});
+//#endregion
+export { m as Chip, p as chipVariants };

package/dist/class-names-5jotTFzp.js

@@ -0,0 +1,97 @@
+import { clsx as e } from "clsx";
+//#region src/components/_shared/class-names.ts
+function t(...t) {
+	return a(e(t));
+}
+var n = [
+	["font-size", /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/],
+	["font-size", /^text-(micro|small|caption|body|prose|admin-label|heading|subheading|title|display|display-hero|display-mega|display-audacious|display-2|display-3|display-4|display-5|hero|math|math-body|mono-caption|mono-small|mono-prose|mono-micro)$/],
+	["font-weight", /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/],
+	["font-family", /^font-(sans|serif|mono)$/],
+	["font-style", /^(italic|not-italic)$/],
+	["text-align", /^text-(left|center|right|justify|start|end)$/],
+	["text-transform", /^(uppercase|lowercase|capitalize|normal-case)$/],
+	["text-decoration", /^(underline|overline|line-through|no-underline)$/],
+	["text-color", /^text-/],
+	["padding-x", /^px-/],
+	["padding-y", /^py-/],
+	["padding-t", /^pt-/],
+	["padding-r", /^pr-/],
+	["padding-b", /^pb-/],
+	["padding-l", /^pl-/],
+	["padding-s", /^ps-/],
+	["padding-e", /^pe-/],
+	["padding", /^p-/],
+	["margin-x", /^-?mx-/],
+	["margin-y", /^-?my-/],
+	["margin-t", /^-?mt-/],
+	["margin-r", /^-?mr-/],
+	["margin-b", /^-?mb-/],
+	["margin-l", /^-?ml-/],
+	["margin-s", /^-?ms-/],
+	["margin-e", /^-?me-/],
+	["margin", /^-?m-/],
+	["gap-x", /^gap-x-/],
+	["gap-y", /^gap-y-/],
+	["gap", /^gap-/],
+	["width", /^w-/],
+	["height", /^h-/],
+	["min-width", /^min-w-/],
+	["min-height", /^min-h-/],
+	["max-width", /^max-w-/],
+	["max-height", /^max-h-/],
+	["size", /^size-/],
+	["bg-color", /^bg-/],
+	["border-color", /^border-(?:[a-z]+-\d+|black|white|transparent|current|inherit)/],
+	["border-width", /^border(?:-x|-y|-t|-r|-b|-l|-s|-e)?(?:-\d+|-0|)$/],
+	["ring-color", /^ring-(?:[a-z]+-\d+|black|white|transparent)/],
+	["ring-width", /^ring(?:-\d+|-0|)$/],
+	["rounded", /^rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full|t|r|b|l|tl|tr|bl|br))?$/],
+	["display", /^(block|inline-block|inline|flex|inline-flex|grid|inline-grid|table|hidden|contents|flow-root)$/],
+	["position", /^(static|fixed|absolute|relative|sticky)$/],
+	["overflow", /^overflow-(auto|hidden|clip|visible|scroll)$/],
+	["overflow-x", /^overflow-x-/],
+	["overflow-y", /^overflow-y-/],
+	["flex", /^flex-(1|auto|none|initial)$/],
+	["flex-direction", /^flex-(row|row-reverse|col|col-reverse)$/],
+	["flex-wrap", /^flex-(wrap|wrap-reverse|nowrap)$/],
+	["items", /^items-/],
+	["justify", /^justify-/],
+	["self", /^self-/],
+	["place-items", /^place-items-/],
+	["place-content", /^place-content-/],
+	["opacity", /^opacity-/],
+	["z-index", /^-?z-/],
+	["cursor", /^cursor-/],
+	["pointer-events", /^pointer-events-/],
+	["select", /^select-/],
+	["shadow", /^shadow(?:-|$)/]
+];
+function r(e) {
+	let t = e.lastIndexOf(":"), n = t === -1 ? "" : e.slice(0, t + 1), r = t === -1 ? e : e.slice(t + 1);
+	return r.startsWith("!") && (r = r.slice(1)), {
+		scope: n,
+		core: r
+	};
+}
+function i(e) {
+	for (let [t, r] of n) if (r.test(e)) return t;
+	return null;
+}
+function a(e) {
+	if (!e) return "";
+	let t = e.split(/\s+/).filter(Boolean);
+	if (t.length === 0) return "";
+	let n = /* @__PURE__ */ new Map(), a = Array(t.length).fill(!0);
+	for (let e = 0; e < t.length; e += 1) {
+		let o = t[e], { scope: s, core: c } = r(o), l = i(c);
+		if (l === null) continue;
+		let u = `${s}|${l}`, d = n.get(u);
+		d !== void 0 && (a[d] = !1), n.set(u, e);
+	}
+	let o = [];
+	for (let e = 0; e < t.length; e += 1) a[e] && o.push(t[e]);
+	return o.join(" ");
+}
+//#endregion
+export { t };