@nexxtmove/ui 1.0.13 → 1.0.15

package/dist/components/ToggleGroup/ToggleGroup.vue.d.ts

@@ -0,0 +1,21 @@
+import { IconName } from '@awesome.me/kit-37b149f3ef/icons';
+export interface NexxtToggleGroupOption {
+    value: string;
+    icon?: IconName;
+    label?: string;
+    tooltip?: string;
+}
+interface NexxtToggleGroupProps {
+    options: NexxtToggleGroupOption[];
+    label?: string;
+}
+type __VLS_Props = NexxtToggleGroupProps;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/Tooltip/Tooltip.vue.d.ts

@@ -4,6 +4,7 @@ interface NexxtTooltip {
     sideOffset?: number;
     align?: 'start' | 'center' | 'end';
     disableHoverableContent?: boolean;
+    disableClosingTrigger?: boolean;
 }
 declare var __VLS_14: {}, __VLS_24: {};
 type __VLS_Slots = {} & {

package/dist/index.d.ts

@@ -46,5 +46,6 @@ export { default as NexxtTimelineEvent } from './components/TimelineEvent/Timeli
 export { default as NexxtTimelinePhaseblock } from './components/TimelinePhaseblock/TimelinePhaseblock.vue';
 export { default as NexxtToast } from './components/Toast/Toast.vue';
 export { default as NexxtToaster } from './components/Toaster/Toaster.vue';
+export { default as NexxtToggleGroup } from './components/ToggleGroup/ToggleGroup.vue';
 export { default as NexxtTooltip } from './components/Tooltip/Tooltip.vue';
 export { default as NexxtVideoPlayer } from './components/VideoPlayer/VideoPlayer.vue';

package/dist/index.js

@@ -7921,13 +7921,18 @@ var Bl = { render: zl }, Vl = { class: "flex items-center justify-end self-stret
 		disableHoverableContent: {
 			type: Boolean,
 			default: !1
+		},
+		disableClosingTrigger: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	setup(e) {
 		return (t, n) => (A(), c(z(Ne), null, {
 			default: H(() => [h(z(Pe), {
 				"delay-duration": e.delay,
-				"disable-hoverable-content": e.disableHoverableContent
+				"disable-hoverable-content": e.disableHoverableContent,
+				"disable-closing-trigger": e.disableClosingTrigger
 			}, {
 				default: H(() => [h(z(Fe), { "as-child": "" }, {
 					default: H(() => [P(t.$slots, "default")]),
@@ -7949,7 +7954,11 @@ var Bl = { render: zl }, Vl = { class: "flex items-center justify-end self-stret
 					_: 3
 				})]),
 				_: 3
-			}, 8, ["delay-duration", "disable-hoverable-content"])]),
+			}, 8, [
+				"delay-duration",
+				"disable-hoverable-content",
+				"disable-closing-trigger"
+			])]),
 			_: 3
 		}));
 	}
@@ -8324,14 +8333,36 @@ function _d(e) {
 	let t = gd();
 	return s(() => (t.value, !!e()));
 }
-var vd = [
+function vd(e, t, n = {}) {
+	let { window: r = pd, ...i } = n, a, o = /* @__PURE__ */ _d(() => r && "ResizeObserver" in r), c = () => {
+		a &&= (a.disconnect(), void 0);
+	}, l = V(s(() => {
+		let t = R(e);
+		return Array.isArray(t) ? t.map((e) => hd(e)) : [hd(t)];
+	}), (e) => {
+		if (c(), o.value && r) {
+			a = new ResizeObserver(t);
+			for (let t of e) t && a.observe(t, i);
+		}
+	}, {
+		immediate: !0,
+		flush: "post"
+	}), u = () => {
+		c(), l();
+	};
+	return $u(u), {
+		isSupported: o,
+		stop: u
+	};
+}
+var yd = [
 	"fullscreenchange",
 	"webkitfullscreenchange",
 	"webkitendfullscreen",
 	"mozfullscreenchange",
 	"MSFullscreenChange"
 ];
-function yd(e, t = {}) {
+function bd(e, t = {}) {
 	let { document: n = md, autoExit: r = !1 } = t, i = s(() => hd(e) ?? n?.documentElement), a = I(!1), o = s(() => [
 		"requestFullscreen",
 		"webkitRequestFullscreen",
@@ -8394,7 +8425,7 @@ function yd(e, t = {}) {
 		capture: !1,
 		passive: !0
 	};
-	return $(n, vd, _, v), $(() => hd(i), vd, _, v), ud(_, !1), r && $u(m), {
+	return $(n, yd, _, v), $(() => hd(i), yd, _, v), ud(_, !1), r && $u(m), {
 		isSupported: d,
 		isFullscreen: a,
 		enter: h,
@@ -8402,15 +8433,15 @@ function yd(e, t = {}) {
 		toggle: g
 	};
 }
-function bd(e, t) {
+function xd(e, t) {
 	R(e) && t(R(e));
 }
-function xd(e) {
+function Sd(e) {
 	let t = [];
 	for (let n = 0; n < e.length; ++n) t = [...t, [e.start(n), e.end(n)]];
 	return t;
 }
-function Sd(e) {
+function Cd(e) {
 	return Array.from(e).map(({ label: e, kind: t, language: n, mode: r, activeCues: i, cues: a, inBandMetadataTrackDispatchType: o }, s) => ({
 		id: s,
 		label: e,
@@ -8422,17 +8453,17 @@ function Sd(e) {
 		inBandMetadataTrackDispatchType: o
 	}));
 }
-var Cd = {
+var wd = {
 	src: "",
 	tracks: []
 };
-function wd(e, t = {}) {
+function Td(e, t = {}) {
 	e = ad(e), t = {
-		...Cd,
+		...wd,
 		...t
 	};
 	let { document: n = md } = t, r = { passive: !0 }, i = I(0), a = I(0), o = I(!1), s = I(1), c = I(!1), l = I(!1), u = I(!1), d = I(1), f = I(!1), p = I([]), m = I([]), h = I(-1), g = I(!1), _ = I(!1), v = !!(n && "pictureInPictureEnabled" in n), y = ed(), b = ed(), x = (t) => {
-		bd(e, (e) => {
+		xd(e, (e) => {
 			if (t) {
 				let n = typeof t == "number" ? t : t.id;
 				e.textTracks[n].mode = "disabled";
@@ -8440,12 +8471,12 @@ function wd(e, t = {}) {
 			h.value = -1;
 		});
 	}, S = (t, n = !0) => {
-		bd(e, (e) => {
+		xd(e, (e) => {
 			let r = typeof t == "number" ? t : t.id;
 			n && x(), e.textTracks[r].mode = "showing", h.value = r;
 		});
 	}, C = () => new Promise((t, r) => {
-		bd(e, async (e) => {
+		xd(e, async (e) => {
 			v && (g.value ? n.exitPictureInPicture().then(t).catch(r) : e.requestPictureInPicture().then(t).catch(r));
 		});
 	});
@@ -8486,7 +8517,7 @@ function wd(e, t = {}) {
 			throw b.trigger(e), e;
 		}) : n.pause());
 	});
-	$(e, "timeupdate", () => w(() => i.value = R(e).currentTime), r), $(e, "durationchange", () => a.value = R(e).duration, r), $(e, "progress", () => p.value = xd(R(e).buffered), r), $(e, "seeking", () => o.value = !0, r), $(e, "seeked", () => o.value = !1, r), $(e, ["waiting", "loadstart"], () => {
+	$(e, "timeupdate", () => w(() => i.value = R(e).currentTime), r), $(e, "durationchange", () => a.value = R(e).duration, r), $(e, "progress", () => p.value = Sd(R(e).buffered), r), $(e, "seeking", () => o.value = !0, r), $(e, "seeked", () => o.value = !1, r), $(e, ["waiting", "loadstart"], () => {
 		c.value = !0, T(() => u.value = !1);
 	}, r), $(e, "loadeddata", () => c.value = !1, r), $(e, "playing", () => {
 		c.value = !1, l.value = !1, T(() => u.value = !0);
@@ -8496,7 +8527,7 @@ function wd(e, t = {}) {
 	}, r);
 	let E = [], D = V([e], () => {
 		let t = R(e);
-		t && (D(), E[0] = $(t.textTracks, "addtrack", () => m.value = Sd(t.textTracks), r), E[1] = $(t.textTracks, "removetrack", () => m.value = Sd(t.textTracks), r), E[2] = $(t.textTracks, "change", () => m.value = Sd(t.textTracks), r));
+		t && (D(), E[0] = $(t.textTracks, "addtrack", () => m.value = Cd(t.textTracks), r), E[1] = $(t.textTracks, "removetrack", () => m.value = Cd(t.textTracks), r), E[2] = $(t.textTracks, "change", () => m.value = Cd(t.textTracks), r));
 	});
 	return $u(() => E.forEach((e) => e())), {
 		currentTime: i,
@@ -8522,27 +8553,116 @@ function wd(e, t = {}) {
 	};
 }
 //#endregion
-//#region src/components/VideoPlayer/VideoPlayer.vue?vue&type=script&setup=true&lang.ts
-var Td = [
+//#region src/components/ToggleGroup/ToggleGroup.vue?vue&type=script&setup=true&lang.ts
+var Ed = { class: "flex flex-col gap-1" }, Dd = {
+	key: 0,
+	class: "text-color-gray-700 justify-start body-normal text-sm"
+}, Od = ["onClick"], kd = {
+	key: 1,
+	class: "extra-small-semibold"
+}, Ad = ["onClick"], jd = {
+	key: 1,
+	class: "extra-small-semibold"
+}, Md = {
+	key: 1,
+	class: "extra-small-semibold"
+}, Nd = /* @__PURE__ */ _({
+	name: "NexxtToggleGroup",
+	__name: "ToggleGroup",
+	props: /*@__PURE__*/ S({
+		options: {},
+		label: {}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = e, n = B(e, "modelValue"), i = M(null), a = M([]), o = M({
+			width: "0px",
+			transform: "translateX(0px)"
+		}), s = M("inset(0 100% 0 0 round 8px)"), f = M(!1), p = async () => {
+			await w();
+			let e = t.options.findIndex((e) => e.value === n.value), r = a.value[e];
+			if (!r || !i.value) return;
+			let c = i.value.getBoundingClientRect(), l = r.getBoundingClientRect(), u = l.left - c.left, d = l.width, f = c.width - u - d;
+			o.value = {
+				width: `${d}px`,
+				transform: `translateX(${u}px)`
+			}, s.value = `inset(0 ${f}px 0 ${u}px round 8px)`;
+		};
+		return V(n, async () => await p()), vd(i, () => p()), O(async () => {
+			await document.fonts.ready, await p(), await w(), f.value = !0;
+		}), (t, p) => (A(), u("div", Ed, [e.label ? (A(), u("label", Dd, L(e.label), 1)) : l("", !0), d("div", {
+			ref_key: "containerRef",
+			ref: i,
+			class: "relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1"
+		}, [
+			d("div", {
+				"aria-hidden": "true",
+				class: T(["absolute inset-y-1 left-0 rounded-lg bg-white", f.value ? "transition-transform duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
+				style: D(o.value)
+			}, null, 6),
+			(A(!0), u(r, null, N(e.options, (e, t) => (A(), u(r, { key: e.value }, [e.tooltip ? (A(), c(Fu, {
+				key: 0,
+				"disable-closing-trigger": ""
+			}, {
+				tooltip: H(() => [m(L(e.tooltip), 1)]),
+				default: H(() => [d("button", {
+					ref_for: !0,
+					ref: (e) => a.value[t] = e,
+					type: "button",
+					class: "relative z-10 flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 text-gray-500 hover:text-gray-700",
+					onClick: (t) => n.value = e.value
+				}, [e.icon ? (A(), c(G, {
+					key: 0,
+					name: e.icon
+				}, null, 8, ["name"])) : l("", !0), e.label ? (A(), u("span", kd, L(e.label), 1)) : l("", !0)], 8, Od)]),
+				_: 2
+			}, 1024)) : (A(), u("button", {
+				key: 1,
+				ref_for: !0,
+				ref: (e) => a.value[t] = e,
+				type: "button",
+				class: "relative z-10 flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 text-gray-500 hover:text-gray-700",
+				onClick: (t) => n.value = e.value
+			}, [e.icon ? (A(), c(G, {
+				key: 0,
+				name: e.icon
+			}, null, 8, ["name"])) : l("", !0), e.label ? (A(), u("span", jd, L(e.label), 1)) : l("", !0)], 8, Ad))], 64))), 128)),
+			d("div", {
+				"aria-hidden": "true",
+				class: T(["pointer-events-none absolute inset-0 z-20 flex gap-1 p-1", f.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
+				style: D({ clipPath: s.value })
+			}, [(A(!0), u(r, null, N(e.options, (e) => (A(), u("span", {
+				key: e.value,
+				class: "flex flex-1 items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 text-cornflower-blue-600"
+			}, [e.icon ? (A(), c(G, {
+				key: 0,
+				name: e.icon
+			}, null, 8, ["name"])) : l("", !0), e.label ? (A(), u("span", Md, L(e.label), 1)) : l("", !0)]))), 128))], 6)
+		], 512)]));
+	}
+}), Pd = [
 	"src",
 	"loop",
 	"aria-label"
-], Ed = {
+], Fd = {
 	key: 0,
 	role: "alert",
 	class: "absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-900 text-white"
-}, Dd = { class: "heading-4" }, Od = { class: "max-w-xs truncate extra-small-normal text-white/50" }, kd = {
+}, Id = { class: "heading-4" }, Ld = { class: "max-w-xs truncate extra-small-normal text-white/50" }, Rd = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 flex items-center justify-center"
-}, Ad = {
+}, zd = {
 	class: "flex h-16 w-16 items-center justify-center rounded-full bg-black/50 text-white",
 	"aria-hidden": "true"
-}, jd = [
+}, Bd = [
 	"aria-label",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext"
-], Md = { class: "flex items-center gap-2" }, Nd = ["aria-label"], Pd = { class: "extra-small-normal text-white/70 tabular-nums" }, Fd = ["aria-label"], Id = ["aria-label"], Ld = /* @__PURE__ */ _({
+], Vd = { class: "flex items-center gap-2" }, Hd = ["aria-label"], Ud = { class: "extra-small-normal text-white/70 tabular-nums" }, Wd = ["aria-label"], Gd = ["aria-label"], Kd = /* @__PURE__ */ _({
 	__name: "VideoPlayer",
 	props: {
 		src: {},
@@ -8564,7 +8684,7 @@ var Td = [
 			seek: "Seek",
 			video: "Video player",
 			...n.labels
-		})), i = I(null), { playing: o, buffered: c, currentTime: f, duration: p, muted: m, seeking: g } = wd(i, { src: s(() => n.src) }), { isFullscreen: _, toggle: v } = yd(i), y = M(!1), b = s(() => !o.value || y.value), x = M(!1);
+		})), i = I(null), { playing: o, buffered: c, currentTime: f, duration: p, muted: m, seeking: g } = Td(i, { src: s(() => n.src) }), { isFullscreen: _, toggle: v } = bd(i), y = M(!1), b = s(() => !o.value || y.value), x = M(!1);
 		V(() => n.src, () => {
 			x.value = !1;
 		});
@@ -8623,15 +8743,15 @@ var Td = [
 				"aria-label": r.value.video,
 				onError: n[0] ||= (e) => x.value = !0,
 				onClick: n[1] ||= (t) => e.showControls === !1 ? void 0 : j()
-			}, null, 42, Td),
-			x.value ? (A(), u("div", Ed, [
+			}, null, 42, Pd),
+			x.value ? (A(), u("div", Fd, [
 				h(G, {
 					name: "circle-exclamation",
 					class: "text-3xl text-red-400",
 					"aria-hidden": "true"
 				}),
-				d("p", Dd, L(r.value.error), 1),
-				d("p", Od, L(e.src), 1)
+				d("p", Id, L(r.value.error), 1),
+				d("p", Ld, L(e.src), 1)
 			])) : l("", !0),
 			h(a, {
 				"enter-active-class": "transition-opacity duration-100 ease-out",
@@ -8639,7 +8759,7 @@ var Td = [
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: H(() => [e.showControls !== !1 && S.value && !x.value ? (A(), u("div", kd, [d("div", Ad, [h(G, {
+				default: H(() => [e.showControls !== !1 && S.value && !x.value ? (A(), u("div", Rd, [d("div", zd, [h(G, {
 					name: S.value,
 					class: "text-2xl"
 				}, null, 8, ["name"])])])) : l("", !0)]),
@@ -8682,7 +8802,7 @@ var Td = [
 					class: "absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-sapphire-100 opacity-0 shadow transition-opacity group-hover/player:opacity-100",
 					style: D({ left: `${R.value}%` })
 				}, null, 4)
-			], 40, jd), d("div", Md, [
+			], 40, Bd), d("div", Vd, [
 				d("button", {
 					type: "button",
 					"aria-label": z(o) ? r.value.pause : r.value.play,
@@ -8692,8 +8812,8 @@ var Td = [
 					name: z(o) ? "pause" : "play",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Nd),
-				d("span", Pd, L(ee(ne.value)) + " / " + L(ee(z(p))), 1),
+				}, null, 8, ["name"])], 8, Hd),
+				d("span", Ud, L(ee(ne.value)) + " / " + L(ee(z(p))), 1),
 				n[7] ||= d("div", { class: "flex-1" }, null, -1),
 				d("button", {
 					type: "button",
@@ -8704,7 +8824,7 @@ var Td = [
 					name: z(m) ? "volume-xmark" : "volume-high",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Fd),
+				}, null, 8, ["name"])], 8, Wd),
 				d("button", {
 					type: "button",
 					"aria-label": z(_) ? r.value.exitFullscreen : r.value.enterFullscreen,
@@ -8714,10 +8834,10 @@ var Td = [
 					name: z(_) ? "compress" : "expand",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Id)
+				}, null, 8, ["name"])], 8, Gd)
 			])], 4)) : l("", !0)
 		], 32));
 	}
 });
 //#endregion
-export { Pt as NexxtAnimatedNumber, It as NexxtAnnouncement, Vt as NexxtAvatar, Ut as NexxtButton, Ni as NexxtCalendar, Ii as NexxtCard, Ri as NexxtCheckbox, zi as NexxtChip, Qo as NexxtColorPicker, bs as NexxtCombobox, ys as NexxtComboboxPanel, Ds as NexxtContactInfoCard, Bs as NexxtCountrySelect, Ks as NexxtCustomerJourneyTile, qs as NexxtDatePicker, tc as NexxtDoughnutChart, ac as NexxtDropdownButton, zo as NexxtFloatingPanel, cc as NexxtHeader, G as NexxtIcon, uc as NexxtInfoBlock, os as NexxtInputField, yc as NexxtInputSelect, Cc as NexxtModal, wc as NexxtPagination, Oc as NexxtPresenceIndicator, Lc as NexxtProgressBar, Jc as NexxtPropertyCard, Uc as NexxtPropertyListing, rl as NexxtSelect, ll as NexxtSidebarMenuItem, dl as NexxtSkeleton, hl as NexxtSkeletonPropertyCard, vl as NexxtSocialIcons, Sl as NexxtSocialMediaCustomTemplate, jl as NexxtSocialMediaTemplate, Gl as NexxtSocialMediaType, iu as NexxtSource, Bt as NexxtSquircle, au as NexxtStepperHeader, cu as NexxtSwitch, hu as NexxtTabbedContent, Ou as NexxtTable, du as NexxtTabs, Pu as NexxtTimelineEvent, Wu as NexxtTimelinePhaseblock, Zu as NexxtToast, Qu as NexxtToaster, Fu as NexxtTooltip, Ld as NexxtVideoPlayer, tu as SOURCE_MAP };
+export { Pt as NexxtAnimatedNumber, It as NexxtAnnouncement, Vt as NexxtAvatar, Ut as NexxtButton, Ni as NexxtCalendar, Ii as NexxtCard, Ri as NexxtCheckbox, zi as NexxtChip, Qo as NexxtColorPicker, bs as NexxtCombobox, ys as NexxtComboboxPanel, Ds as NexxtContactInfoCard, Bs as NexxtCountrySelect, Ks as NexxtCustomerJourneyTile, qs as NexxtDatePicker, tc as NexxtDoughnutChart, ac as NexxtDropdownButton, zo as NexxtFloatingPanel, cc as NexxtHeader, G as NexxtIcon, uc as NexxtInfoBlock, os as NexxtInputField, yc as NexxtInputSelect, Cc as NexxtModal, wc as NexxtPagination, Oc as NexxtPresenceIndicator, Lc as NexxtProgressBar, Jc as NexxtPropertyCard, Uc as NexxtPropertyListing, rl as NexxtSelect, ll as NexxtSidebarMenuItem, dl as NexxtSkeleton, hl as NexxtSkeletonPropertyCard, vl as NexxtSocialIcons, Sl as NexxtSocialMediaCustomTemplate, jl as NexxtSocialMediaTemplate, Gl as NexxtSocialMediaType, iu as NexxtSource, Bt as NexxtSquircle, au as NexxtStepperHeader, cu as NexxtSwitch, hu as NexxtTabbedContent, Ou as NexxtTable, du as NexxtTabs, Pu as NexxtTimelineEvent, Wu as NexxtTimelinePhaseblock, Zu as NexxtToast, Qu as NexxtToaster, Nd as NexxtToggleGroup, Fu as NexxtTooltip, Kd as NexxtVideoPlayer, tu as SOURCE_MAP };

package/dist/nuxt.js

@@ -47515,6 +47515,7 @@ var Hw, Uw, Ww, Gw, Kw, qw = t((() => {
 	NexxtTimelinePhaseblock: "components/TimelinePhaseblock/TimelinePhaseblock.vue",
 	NexxtToast: "components/Toast/Toast.vue",
 	NexxtToaster: "components/Toaster/Toaster.vue",
+	NexxtToggleGroup: "components/ToggleGroup/ToggleGroup.vue",
 	NexxtTooltip: "components/Tooltip/Tooltip.vue",
 	NexxtVideoPlayer: "components/VideoPlayer/VideoPlayer.vue"
 }, hj = u({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/ToggleGroup/ToggleGroup.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, nextTick } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtTooltip from '../Tooltip/Tooltip.vue'
+
+export interface NexxtToggleGroupOption {
+  value: string
+  icon?: IconName
+  label?: string
+  tooltip?: string
+}
+
+interface NexxtToggleGroupProps {
+  options: NexxtToggleGroupOption[]
+  label?: string
+}
+
+defineOptions({
+  name: 'NexxtToggleGroup',
+})
+
+const props = defineProps<NexxtToggleGroupProps>()
+
+const model = defineModel<string>({ required: true })
+
+const containerRef = ref<HTMLElement | null>(null)
+const buttonRefs = ref<HTMLButtonElement[]>([])
+const sliderStyle = ref({ width: '0px', transform: 'translateX(0px)' })
+const clipPath = ref('inset(0 100% 0 0 round 8px)')
+const ready = ref(false)
+
+const updateSlider = async () => {
+  await nextTick()
+  const index = props.options.findIndex((o) => o.value === model.value)
+  const button = buttonRefs.value[index]
+  if (!button || !containerRef.value) return
+
+  const containerRect = containerRef.value.getBoundingClientRect()
+  const buttonRect = button.getBoundingClientRect()
+
+  const left = buttonRect.left - containerRect.left
+  const width = buttonRect.width
+  const right = containerRect.width - left - width
+
+  sliderStyle.value = {
+    width: `${width}px`,
+    transform: `translateX(${left}px)`,
+  }
+
+  clipPath.value = `inset(0 ${right}px 0 ${left}px round 8px)`
+}
+
+watch(model, async () => await updateSlider())
+
+useResizeObserver(containerRef, () => updateSlider())
+
+onMounted(async () => {
+  await document.fonts.ready
+  await updateSlider()
+  await nextTick()
+  ready.value = true
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="label" class="text-color-gray-700 justify-start body-normal text-sm">
+      {{ label }}
+    </label>
+    <div ref="containerRef" class="relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1">
+      <!-- slider pill -->
+      <div
+        aria-hidden="true"
+        class="absolute inset-y-1 left-0 rounded-lg bg-white"
+        :class="
+          ready ? 'transition-transform duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]' : ''
+        "
+        :style="sliderStyle"
+      />
+
+      <!-- buttons with gray text underneath -->
+      <template v-for="(option, index) in options" :key="option.value">
+        <NexxtTooltip v-if="option.tooltip" disable-closing-trigger>
+          <button
+            :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
+            type="button"
+            class="relative z-10 flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 text-gray-500 hover:text-gray-700"
+            @click="model = option.value"
+          >
+            <NexxtIcon v-if="option.icon" :name="option.icon" />
+            <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          </button>
+          <template #tooltip>{{ option.tooltip }}</template>
+        </NexxtTooltip>
+        <button
+          v-else
+          :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
+          type="button"
+          class="relative z-10 flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 text-gray-500 hover:text-gray-700"
+          @click="model = option.value"
+        >
+          <NexxtIcon v-if="option.icon" :name="option.icon" />
+          <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+        </button>
+      </template>
+
+      <div
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-0 z-20 flex gap-1 p-1"
+        :class="
+          ready ? 'transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]' : ''
+        "
+        :style="{ clipPath }"
+      >
+        <span
+          v-for="option in options"
+          :key="option.value"
+          class="flex flex-1 items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 text-cornflower-blue-600"
+        >
+          <NexxtIcon v-if="option.icon" :name="option.icon" />
+          <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Tooltip/Tooltip.vue

@@ -17,6 +17,7 @@ interface NexxtTooltip {
   sideOffset?: number
   align?: 'start' | 'center' | 'end'
   disableHoverableContent?: boolean
+  disableClosingTrigger?: boolean
 }
 
 const {
@@ -25,12 +26,17 @@ const {
   sideOffset = 8,
   align = 'center',
   disableHoverableContent = false,
+  disableClosingTrigger = false,
 } = defineProps<NexxtTooltip>()
 </script>
 
 <template>
   <TooltipProvider>
-    <TooltipRoot :delay-duration="delay" :disable-hoverable-content="disableHoverableContent">
+    <TooltipRoot
+      :delay-duration="delay"
+      :disable-hoverable-content="disableHoverableContent"
+      :disable-closing-trigger="disableClosingTrigger"
+    >
       <TooltipTrigger as-child>
         <slot />
       </TooltipTrigger>

package/src/components.json

@@ -47,6 +47,7 @@
   "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",
   "NexxtToast": "components/Toast/Toast.vue",
   "NexxtToaster": "components/Toaster/Toaster.vue",
+  "NexxtToggleGroup": "components/ToggleGroup/ToggleGroup.vue",
   "NexxtTooltip": "components/Tooltip/Tooltip.vue",
   "NexxtVideoPlayer": "components/VideoPlayer/VideoPlayer.vue"
 }

package/src/index.ts

@@ -47,5 +47,6 @@ export { default as NexxtTimelineEvent } from './components/TimelineEvent/Timeli
 export { default as NexxtTimelinePhaseblock } from './components/TimelinePhaseblock/TimelinePhaseblock.vue'
 export { default as NexxtToast } from './components/Toast/Toast.vue'
 export { default as NexxtToaster } from './components/Toaster/Toaster.vue'
+export { default as NexxtToggleGroup } from './components/ToggleGroup/ToggleGroup.vue'
 export { default as NexxtTooltip } from './components/Tooltip/Tooltip.vue'
 export { default as NexxtVideoPlayer } from './components/VideoPlayer/VideoPlayer.vue'