@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/carousel.js

@@ -1,14 +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-D1W9PrzI.js";
-import { t as c } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { t as l } from "./useGooMorph-Cs13NgYL.js";
-import { computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, mergeProps as _, nextTick as v, normalizeClass as y, onBeforeUnmount as b, onMounted as x, openBlock as S, ref as C, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, watch as O, withCtx as k } from "vue";
-import { createInjectionState as A } from "@vueuse/core";
-import j from "embla-carousel-vue";
-//#region src/components/ui/carousel/useCarousel.ts
-var [M, N] = A(({ opts: e, orientation: t, plugins: n }, r) => {
-	let [i, a] = j({
+import { t as e } from "./class-names-5jotTFzp.js";
+import { n as t } from "./button-32mg6xA8.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, useMediaQuery as j } from "@vueuse/core";
+import M from "embla-carousel-vue";
+var [N, P] = A(({ opts: e, orientation: t, plugins: n }, r) => {
+	let [i, a] = M({
+		duration: 30,
 		...e,
 		axis: t === "horizontal" ? "x" : "y"
 	}, n);
@@ -18,11 +17,11 @@ var [M, N] = A(({ opts: e, orientation: t, plugins: n }, r) => {
 	function s() {
 		a.value?.scrollNext();
 	}
-	let c = C(!1), l = C(!1);
+	let c = g(!1), l = g(!1);
 	function u(e) {
 		c.value = e?.canScrollNext() || !1, l.value = e?.canScrollPrev() || !1;
 	}
-	return x(() => {
+	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,
@@ -34,16 +33,16 @@ var [M, N] = A(({ opts: e, orientation: t, plugins: n }, r) => {
 		orientation: t
 	};
 });
-function P() {
-	let e = N();
+function F() {
+	let e = P();
 	if (!e) throw Error("useCarousel must be used within a <Carousel />");
 	return e;
 }
 //#endregion
-//#region src/components/ui/carousel/Carousel.vue
-var F = /* @__PURE__ */ g({
+//#region src/components/carousel/Carousel.vue
+var I = /* @__PURE__ */ l({
 	__name: "Carousel",
-	props: {
+	props: /* @__PURE__ */ u({
 		opts: {},
 		plugins: {},
 		orientation: { default: "horizontal" },
@@ -54,191 +53,108 @@ var F = /* @__PURE__ */ g({
 			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: d } = M(i, r);
-		n({
-			canScrollNext: a,
-			canScrollPrev: o,
-			carouselApi: s,
-			carouselRef: c,
-			orientation: l,
-			scrollNext: u,
-			scrollPrev: d
+		let i = t, a = r, s = x(t, "active"), { canScrollNext: c, canScrollPrev: l, carouselApi: u, carouselRef: d, orientation: p, scrollNext: m, scrollPrev: g } = N(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 f(e) {
+		function y(e) {
 			let t = i.orientation === "vertical" ? "ArrowUp" : "ArrowLeft", n = i.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
 			if (e.key === t) {
-				e.preventDefault(), d();
+				e.preventDefault(), g();
 				return;
 			}
-			e.key === n && (e.preventDefault(), u());
+			e.key === n && (e.preventDefault(), m());
 		}
-		return (t, n) => (S(), p("div", {
+		return (t, n) => (h(), o("div", {
 			"data-slot": "carousel",
-			class: y(D(e)("relative", i.class)),
+			class: f(b(e)("relative", i.class)),
 			role: "region",
 			"aria-roledescription": "carousel",
+			"aria-label": "Carousel",
 			tabindex: "0",
-			onKeydown: f
-		}, [w(t.$slots, "default", {
-			canScrollNext: D(a),
-			canScrollPrev: D(o),
-			carouselApi: D(s),
-			carouselRef: D(c),
-			orientation: D(l),
-			scrollNext: D(u),
-			scrollPrev: D(d)
+			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));
 	}
-}), I = /* @__PURE__ */ c(/* @__PURE__ */ g({
+}), L = .035, R = .3, z = /* @__PURE__ */ n(/* @__PURE__ */ l({
 	inheritAttrs: !1,
 	__name: "CarouselContent",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
+	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(), o = u(() => a === "vertical"), s = C(null), c = C(null), d = C(null), f = C(null), h = C(null), g = C(0);
-		function T() {
-			let e = i.value, t = c.value, n = e?.slideNodes() ?? [];
-			if (n.length >= 2) {
-				let e = n[0].getBoundingClientRect(), t = n[1].getBoundingClientRect(), r = o.value ? Math.abs(t.top - e.top) : Math.abs(t.left - e.left);
-				if (r > 1) return r;
-			}
-			if (t) {
-				let e = t.getBoundingClientRect();
-				return Math.max(1, o.value ? e.height : e.width);
-			}
-			return 1;
-		}
-		function E(e) {
-			let t = c.value;
-			if (!t) return null;
-			let n = t.getBoundingClientRect(), r = o.value ? n.height : n.width, i = T();
-			return r / 2 + (e - j) * i;
-		}
-		function k() {
-			return Math.max(24, T());
-		}
-		let A = l({
-			barbellRefs: {
-				bodyARef: d,
-				bodyBRef: f,
-				neckRef: h
-			},
-			hostRef: c,
-			vertical: o,
-			centerOf: E,
-			restSize: k,
-			tokenPrefix: "carousel-goo",
-			neckGap: .78
-		}), j = 0;
-		function M() {
-			let e = c.value;
-			if (!e) return;
-			let t = k() / 1.618033988749895;
-			e.style.setProperty("--carousel-body-d", `${t.toFixed(2)}px`);
-		}
-		let N = !1, F = null;
-		function I() {
-			N = !0, F && clearTimeout(F), F = setTimeout(() => {
-				N = !1, F = null;
-			}, 600);
-		}
-		let L = null;
-		function R(e) {
-			let t = e.target;
-			L && t && L.contains(t) && I();
-		}
-		let z = null;
-		function B() {
-			let e = c.value;
-			if (!e) return;
-			e.setAttribute("data-traveling", ""), N ? e.removeAttribute("data-autoplay") : e.setAttribute("data-autoplay", ""), z && clearTimeout(z);
-			let t = (parseFloat(getComputedStyle(e).getPropertyValue("--carousel-goo-duration")) || .95) * 1e3;
-			z = setTimeout(() => {
-				e.removeAttribute("data-traveling"), z = null;
-			}, t + 80);
-		}
-		function V() {
+		let n = t, { carouselRef: r, carouselApi: i, orientation: a } = F(), c = g(null), l = j("(prefers-reduced-motion: reduce)");
+		function u() {
 			let e = i.value;
 			if (!e) return;
-			let t = e.selectedScrollSnap(), n = e.previousScrollSnap();
-			j = t, M(), n === t ? A.snap(t) : (B(), A.travel(n, t));
-		}
-		function H() {
-			let e = i.value;
-			if (!e) return;
-			let t = Math.max(1, g.value - 1), n = Math.min(1, Math.max(0, e.scrollProgress()));
-			n > .001 && n < .999 && B(), A.drive(n * t);
-		}
-		function U() {
-			let e = i.value;
-			g.value = e ? e.slideNodes().length : 0;
+			let t = e.slideNodes();
+			if (!n.arrival || l.value) {
+				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 - L * i).toFixed(4)})`, e.style.opacity = (1 - R * i).toFixed(4);
+			});
 		}
-		let W = null;
-		function G(e) {
-			!e || W === e || (W = e, U(), e.on("reInit", U), e.on("select", V), e.on("scroll", H), v(() => {
-				j = e.selectedScrollSnap(), M(), A.snap(j);
-			}));
+		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 O(i, (e) => G(e), { immediate: !0 }), x(() => {
-			v(() => G(i.value)), L = s.value?.closest("[data-slot=\"carousel\"]") ?? null, document.addEventListener("pointerdown", R, !0), document.addEventListener("keydown", R, !0);
-		}), b(() => {
-			z &&= (clearTimeout(z), null), F &&= (clearTimeout(F), null), document.removeEventListener("pointerdown", R, !0), document.removeEventListener("keydown", R, !0), L = null;
-			let e = W;
-			e && (e.off("reInit", U), e.off("select", V), e.off("scroll", H), W = null);
-		}), (t, i) => (S(), p("div", {
-			ref_key: "rootEl",
-			ref: s,
-			class: "carousel-content-root"
-		}, [
-			i[0] ||= m("svg", {
-				class: "carousel-neck-defs",
-				width: "0",
-				height: "0",
-				"aria-hidden": "true",
-				focusable: "false"
-			}, [m("defs", null, [m("clipPath", {
-				id: "carousel-neck-throat",
-				clipPathUnits: "objectBoundingBox"
-			}, [m("path", { d: "M0,0 C0.25,0 0.36,0.34 0.5,0.34 C0.64,0.34 0.75,0 1,0 L1,1 C0.75,1 0.64,0.66 0.5,0.66 C0.36,0.66 0.25,1 0,1 Z" })])])], -1),
-			m("div", {
-				ref_key: "gooLayerEl",
-				ref: c,
-				class: y(["carousel-goo-layer", D(a) === "vertical" ? "carousel-goo-layer--vertical" : ""]),
-				"aria-hidden": "true"
-			}, [
-				m("span", {
-					ref_key: "bodyAEl",
-					ref: d,
-					class: "carousel-goo-body"
-				}, null, 512),
-				m("span", {
-					ref_key: "neckEl",
-					ref: h,
-					class: "carousel-goo-neck"
-				}, null, 512),
-				m("span", {
-					ref_key: "bodyBEl",
-					ref: f,
-					class: "carousel-goo-body"
-				}, null, 512)
-			], 2),
-			m("div", {
-				ref_key: "carouselRef",
-				ref: r,
-				"data-slot": "carousel-content",
-				class: "carousel-viewport overflow-hidden"
-			}, [m("div", _({ class: D(e)("carousel-track flex", D(a) === "horizontal" ? "-ml-4" : "-mt-4 flex-col", n.class) }, t.$attrs), [w(t.$slots, "default", {}, void 0, !0)], 16)], 512)
-		], 512));
+		return S(i, (e) => m(e), { immediate: !0 }), S([() => n.arrival, l], () => 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: r,
+			"data-slot": "carousel-content",
+			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));
 	}
-}), [["__scopeId", "data-v-6fa0b5cc"]]), L = /* @__PURE__ */ g({
+}), [["__scopeId", "data-v-6f191733"]]), B = /* @__PURE__ */ l({
 	__name: "CarouselItem",
 	props: { class: { type: [
 		Boolean,
@@ -248,19 +164,19 @@ var F = /* @__PURE__ */ g({
 		Array
 	] } },
 	setup(t) {
-		let n = t, { orientation: r } = P();
-		return (t, i) => (S(), p("div", {
+		let n = t, { orientation: r } = F();
+		return (t, i) => (h(), o("div", {
 			"data-slot": "carousel-item",
 			role: "group",
 			"aria-roledescription": "slide",
-			class: y(D(e)("min-w-0 shrink-0 grow-0 basis-full", D(r) === "horizontal" ? "pl-4" : "pt-4", n.class))
-		}, [w(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));
 	}
-}), R = /* @__PURE__ */ g({
+}), V = /* @__PURE__ */ l({
 	__name: "CarouselNext",
 	props: {
 		variant: { default: "outline" },
-		size: { default: "icon" },
+		size: {},
 		class: { type: [
 			Boolean,
 			null,
@@ -270,16 +186,17 @@ var F = /* @__PURE__ */ g({
 		] }
 	},
 	setup(n) {
-		let r = n, { orientation: i, canScrollNext: a, scrollNext: o } = P();
-		return (c, l) => (S(), d(D(s), {
+		let r = n, { orientation: a, canScrollNext: o, scrollNext: l } = F();
+		return (u, d) => (h(), i(b(t), {
 			"data-slot": "carousel-next",
-			disabled: !D(a),
-			class: y(D(e)("absolute h-(--carousel-nav-size) w-(--carousel-nav-size) rounded-pill", D(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: D(o)
+			"icon-only": "",
+			onClick: b(l)
 		}, {
-			default: k(() => [w(c.$slots, "default", {}, () => [h(D(t)), l[0] ||= m("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",
@@ -289,11 +206,11 @@ var F = /* @__PURE__ */ g({
 			"onClick"
 		]));
 	}
-}), z = {
+}), H = {
 	key: 0,
 	"data-slot": "carousel-pager-counter",
 	class: "glass-pager-ring text-mono-caption tabular-nums"
-}, B = /* @__PURE__ */ g({
+}, U = /* @__PURE__ */ l({
 	__name: "CarouselPager",
 	props: {
 		showCounter: {
@@ -308,45 +225,45 @@ var F = /* @__PURE__ */ g({
 			Array
 		] }
 	},
-	setup(t) {
-		let i = t, { carouselApi: c, canScrollNext: l, canScrollPrev: m, orientation: g, scrollNext: _, scrollPrev: v } = P(), b = C(0), w = C(0);
+	setup(n) {
+		let s = n, { carouselApi: l, canScrollNext: u, canScrollPrev: d, orientation: p, scrollNext: _, scrollPrev: x } = F(), w = g(0), T = g(0);
 		function A() {
-			let e = c.value;
-			e && (b.value = e.selectedScrollSnap(), w.value = e.scrollSnapList().length);
+			let e = l.value;
+			e && (w.value = e.selectedScrollSnap(), T.value = e.scrollSnapList().length);
 		}
-		O(c, (e) => {
+		S(l, (e) => {
 			e && (A(), e.on("select", A), e.on("reInit", A));
-		}, { immediate: !0 }), x(A);
-		let j = u(() => g === "vertical" ? r : n), M = u(() => g === "vertical" ? a : o);
-		return (n, r) => (S(), p("div", {
+		}, { 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: y(D(e)("inline-flex items-center gap-2", D(g) === "vertical" && "flex-col", i.class))
+			class: f(b(e)("inline-flex items-center gap-2", b(p) === "vertical" && "flex-col", s.class))
 		}, [
-			h(D(s), {
+			c(b(t), {
 				variant: "ghost",
-				size: "icon",
-				disabled: !D(m),
-				"aria-label": D(g) === "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: D(v)
+				onClick: b(x)
 			}, {
-				default: k(() => [(S(), d(T(j.value), { class: "size-4" }))]),
+				default: C(() => [(h(), i(v(j.value), { class: "size-4" }))]),
 				_: 1
 			}, 8, [
 				"disabled",
 				"aria-label",
 				"onClick"
 			]),
-			t.showCounter && w.value > 0 ? (S(), p("span", z, E(b.value + 1) + " / " + E(w.value), 1)) : f("", !0),
-			h(D(s), {
+			n.showCounter && T.value > 0 ? (h(), o("span", H, y(w.value + 1) + " / " + y(T.value), 1)) : a("", !0),
+			c(b(t), {
 				variant: "ghost",
-				size: "icon",
-				disabled: !D(l),
-				"aria-label": D(g) === "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: D(_)
+				onClick: b(_)
 			}, {
-				default: k(() => [(S(), d(T(M.value), { class: "size-4" }))]),
+				default: C(() => [(h(), i(v(M.value), { class: "size-4" }))]),
 				_: 1
 			}, 8, [
 				"disabled",
@@ -355,11 +272,11 @@ var F = /* @__PURE__ */ g({
 			])
 		], 2));
 	}
-}), V = /* @__PURE__ */ g({
+}), W = /* @__PURE__ */ l({
 	__name: "CarouselPrevious",
 	props: {
 		variant: { default: "outline" },
-		size: { default: "icon" },
+		size: {},
 		class: { type: [
 			Boolean,
 			null,
@@ -368,17 +285,18 @@ var F = /* @__PURE__ */ g({
 			Array
 		] }
 	},
-	setup(t) {
-		let n = t, { orientation: r, canScrollPrev: a, scrollPrev: o } = P();
-		return (c, l) => (S(), d(D(s), {
+	setup(n) {
+		let r = n, { orientation: a, canScrollPrev: o, scrollPrev: l } = F();
+		return (u, d) => (h(), i(b(t), {
 			"data-slot": "carousel-previous",
-			disabled: !D(a),
-			class: y(D(e)("absolute h-(--carousel-nav-size) w-(--carousel-nav-size) rounded-pill", D(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: D(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: k(() => [w(c.$slots, "default", {}, () => [h(D(i)), l[0] ||= m("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",
@@ -388,76 +306,6 @@ var F = /* @__PURE__ */ g({
 			"onClick"
 		]));
 	}
-}), H = {
-	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"
-}, U = /* @__PURE__ */ g({
-	__name: "GlassCarouselPager",
-	props: {
-		index: {},
-		total: {},
-		orientation: { default: "horizontal" },
-		showCounter: {
-			type: Boolean,
-			default: !0
-		},
-		loop: {
-			type: Boolean,
-			default: !1
-		},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	emits: [
-		"prev",
-		"next",
-		"select"
-	],
-	setup(t, { emit: i }) {
-		let c = t, l = i, m = u(() => c.loop ? c.total > 1 : c.index > 0), g = u(() => c.loop ? c.total > 1 : c.index < c.total - 1);
-		function _() {
-			m.value && (c.loop ? l("select", (c.index - 1 + c.total) % c.total) : (l("prev"), l("select", Math.max(0, c.index - 1))));
-		}
-		function v() {
-			g.value && (c.loop ? l("select", (c.index + 1) % c.total) : (l("next"), l("select", Math.min(c.total - 1, c.index + 1))));
-		}
-		let b = u(() => c.orientation === "vertical" ? r : n), x = u(() => c.orientation === "vertical" ? a : o);
-		return (n, r) => (S(), p("div", {
-			"data-slot": "glass-carousel-pager",
-			class: y(D(e)("inline-flex items-center gap-2", t.orientation === "vertical" && "flex-col", "max-md:flex-wrap max-md:justify-center max-md:gap-2", c.class))
-		}, [
-			h(D(s), {
-				variant: "outline",
-				size: "icon",
-				disabled: !m.value,
-				"aria-label": t.orientation === "vertical" ? "Previous slide (up)" : "Previous slide",
-				"data-slot": "glass-carousel-pager-prev",
-				onClick: _
-			}, {
-				default: k(() => [(S(), d(T(b.value), { class: "size-4" }))]),
-				_: 1
-			}, 8, ["disabled", "aria-label"]),
-			t.showCounter && t.total > 0 ? (S(), p("span", H, E(t.index + 1) + " / " + E(t.total), 1)) : f("", !0),
-			h(D(s), {
-				variant: "outline",
-				size: "icon",
-				disabled: !g.value,
-				"aria-label": t.orientation === "vertical" ? "Next slide (down)" : "Next slide",
-				"data-slot": "glass-carousel-pager-next",
-				onClick: v
-			}, {
-				default: k(() => [(S(), d(T(x.value), { class: "size-4" }))]),
-				_: 1
-			}, 8, ["disabled", "aria-label"]),
-			w(n.$slots, "trailing")
-		], 2));
-	}
 });
 //#endregion
-export { F as Carousel, I as CarouselContent, L as CarouselItem, R as CarouselNext, B as CarouselPager, V as CarouselPrevious, U as GlassCarouselPager, P as useCarousel };
+export { I as Carousel, z as CarouselContent, B as CarouselItem, V as CarouselNext, U as CarouselPager, W as CarouselPrevious, F as useCarousel };

package/dist/chip.d.ts

@@ -0,0 +1 @@
+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-C-p6WdPe.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 };