@nexxtmove/ui 1.1.7 → 1.1.9

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

@@ -1,5 +1,5 @@
 interface NexxtChipProps {
-    variant?: 'default' | 'warning' | 'success' | 'danger' | 'neutral';
+    variant?: 'default' | 'warning' | 'success' | 'danger' | 'neutral' | 'accent';
     ghost?: boolean;
 }
 declare var __VLS_1: {}, __VLS_3: {};

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

@@ -1,8 +1,10 @@
 import { IconName } from '@awesome.me/kit-37b149f3ef/icons';
 type SwitchColor = 'blue' | 'green';
+type SwitchSize = 'sm' | 'md' | 'lg';
 interface NexxtSwitchProps {
     labelPosition?: 'before' | 'after';
     color?: SwitchColor;
+    size?: SwitchSize;
     iconOn?: IconName;
     iconOff?: IconName;
 }

package/dist/index.js

@@ -816,6 +816,11 @@ var tt = /* @__PURE__ */ p({
 					border: "border border-gray-600",
 					text: "text-gray-700"
 				};
+				case "accent": return {
+					bg: "bg-purple-50",
+					border: "border border-purple-500",
+					text: "text-purple-500"
+				};
 				default: return {
 					bg: "bg-cornflower-blue-50",
 					border: "border border-cornflower-blue-500",
@@ -843,6 +848,11 @@ var tt = /* @__PURE__ */ p({
 					border: "",
 					text: "text-white"
 				};
+				case "accent": return {
+					bg: "bg-purple-600",
+					border: "",
+					text: "text-white"
+				};
 				default: return {
 					bg: "bg-cornflower-blue-600",
 					border: "",
@@ -4332,13 +4342,14 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			"back-button-text"
 		]));
 	}
-}), Pa = { class: "inline-flex cursor-pointer items-center gap-2" }, Fa = { class: "relative inline-block h-8 w-15" }, Ia = /* @__PURE__ */ p({
+}), Pa = { class: "inline-flex cursor-pointer items-center gap-2" }, Fa = /* @__PURE__ */ p({
 	name: "NexxtSwitch",
 	inheritAttrs: !1,
 	__name: "Switch",
 	props: /*@__PURE__*/ g({
 		labelPosition: { default: "after" },
 		color: { default: "blue" },
+		size: { default: "lg" },
 		iconOn: {},
 		iconOff: {}
 	}, {
@@ -4350,32 +4361,56 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 		let t = M(e, "modelValue"), n = {
 			blue: "border-cornflower-blue-500 bg-cornflower-blue-500",
 			green: "border-green-400 bg-green-400"
+		}, r = {
+			sm: "h-5 w-9",
+			md: "h-6 w-11",
+			lg: "h-8 w-15"
+		}, i = {
+			sm: "top-0.5 left-0.5 h-3.5 w-3.5",
+			md: "top-0.5 left-0.5 h-4.5 w-4.5",
+			lg: "top-0.75 left-0.75 h-6 w-6"
+		}, l = {
+			sm: "translate-x-4",
+			md: "translate-x-5",
+			lg: "translate-x-7"
+		}, u = {
+			sm: "text-[8px]",
+			md: "text-[10px]",
+			lg: "text-xs"
 		};
-		return (r, i) => (w(), s("label", Pa, [
-			e.labelPosition === "before" ? D(r.$slots, "default", { key: 0 }) : o("", !0),
-			c("span", Fa, [z(c("input", _(r.$attrs, {
+		return (d, f) => (w(), s("label", Pa, [
+			e.labelPosition === "before" ? D(d.$slots, "default", { key: 0 }) : o("", !0),
+			c("span", { class: y(["relative inline-block", r[e.size]]) }, [z(c("input", _(d.$attrs, {
 				type: "checkbox",
 				class: "peer sr-only",
-				"onUpdate:modelValue": i[0] ||= (e) => t.value = e
-			}), null, 16), [[P, t.value]]), c("span", { class: y(["absolute inset-0 overflow-hidden rounded-[30px] border transition-colors duration-200", t.value ? n[e.color] : "border-gray-500 bg-gray-200"]) }, [c("span", { class: y(["absolute top-0.75 left-0.75 h-6 w-6 rounded-full bg-white transition-transform duration-400", t.value && "translate-x-7"]) }, null, 2), c("span", { class: y(["absolute top-0.75 left-0.75 flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform duration-300", t.value && "translate-x-7"]) }, [t.value && e.iconOn ? (w(), a(Z, {
+				"onUpdate:modelValue": f[0] ||= (e) => t.value = e
+			}), null, 16), [[P, t.value]]), c("span", { class: y(["absolute inset-0 overflow-hidden rounded-[30px] border transition-colors duration-200", t.value ? n[e.color] : "border-gray-500 bg-gray-200"]) }, [c("span", { class: y([
+				"absolute rounded-full bg-white transition-transform duration-400",
+				i[e.size],
+				t.value && l[e.size]
+			]) }, null, 2), c("span", { class: y([
+				"absolute flex items-center justify-center rounded-full bg-white transition-transform duration-300",
+				i[e.size],
+				t.value && l[e.size]
+			]) }, [t.value && e.iconOn ? (w(), a(Z, {
 				key: 0,
 				name: e.iconOn,
 				type: "solid",
-				class: "text-xs text-gray-600"
-			}, null, 8, ["name"])) : !t.value && e.iconOff ? (w(), a(Z, {
+				class: y(["text-gray-600", u[e.size]])
+			}, null, 8, ["name", "class"])) : !t.value && e.iconOff ? (w(), a(Z, {
 				key: 1,
 				name: e.iconOff,
-				class: "text-xs text-gray-600"
-			}, null, 8, ["name"])) : o("", !0)], 2)], 2)]),
-			e.labelPosition === "after" ? D(r.$slots, "default", { key: 1 }) : o("", !0)
+				class: y(["text-gray-600", u[e.size]])
+			}, null, 8, ["name", "class"])) : o("", !0)], 2)], 2)], 2),
+			e.labelPosition === "after" ? D(d.$slots, "default", { key: 1 }) : o("", !0)
 		]));
 	}
-}), La = ["aria-label"], Ra = [
+}), Ia = ["aria-label"], La = [
 	"aria-selected",
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], za = /* @__PURE__ */ p({
+], Ra = /* @__PURE__ */ p({
 	name: "NexxtTabs",
 	__name: "Tabs",
 	props: /*@__PURE__*/ g({
@@ -4435,7 +4470,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				class: y(["relative h-9 cursor-pointer rounded-full px-4 text-sm text-gray-950 transition-none", r.value === e ? "z-10" : "z-30"]),
 				onClick: (t) => r.value = e,
 				onKeydown: (e) => f(e, t)
-			}, k(e), 43, Ra))), 128)),
+			}, k(e), 43, La))), 128)),
 			c("div", {
 				"aria-hidden": "true",
 				class: y(["pointer-events-none absolute inset-0 z-20 flex", u.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
@@ -4444,9 +4479,9 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				key: e,
 				class: "flex h-9 items-center rounded-full px-4 text-sm text-white"
 			}, k(e), 1))), 128))], 6)
-		], 8, La));
+		], 8, Ia));
 	}
-}), Ba = { class: "flex flex-col items-center" }, Va = { class: "relative w-full overflow-hidden" }, Ha = ["aria-labelledby"], Ua = /* @__PURE__ */ p({
+}), za = { class: "flex flex-col items-center" }, Ba = { class: "relative w-full overflow-hidden" }, Va = ["aria-labelledby"], Ha = /* @__PURE__ */ p({
 	name: "NexxtTabbedContent",
 	__name: "TabbedContent",
 	props: /*@__PURE__*/ g({
@@ -4471,7 +4506,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			enterFromClass: a.value === "forward" ? "-translate-x-10 opacity-0" : "translate-x-10 opacity-0",
 			leaveToClass: a.value === "forward" ? "translate-x-10 opacity-0" : "-translate-x-10 opacity-0"
 		} : { mode: "out-in" });
-		return (t, i) => (w(), s("div", Ba, [f(za, {
+		return (t, i) => (w(), s("div", za, [f(Ra, {
 			tabs: e.tabs,
 			modelValue: r.value,
 			"onUpdate:modelValue": i[0] ||= (e) => r.value = e,
@@ -4481,49 +4516,49 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			"tabs",
 			"modelValue",
 			"tablist-label"
-		]), c("div", Va, [f(n, b(h(u.value)), {
+		]), c("div", Ba, [f(n, b(h(u.value)), {
 			default: R(() => [(w(), s("div", {
 				key: r.value,
 				role: "tabpanel",
 				"aria-labelledby": l(r.value),
 				class: "w-full"
-			}, [D(t.$slots, o(r.value))], 8, Ha))]),
+			}, [D(t.$slots, o(r.value))], 8, Va))]),
 			_: 3
 		}, 16)])]));
 	}
-}), Wa = { class: "flex flex-col gap-3" }, Ga = ["aria-colcount", "aria-rowcount"], Ka = { class: "sticky top-0 z-10 mb-0.5" }, qa = { key: 0 }, Ja = {
+}), Ua = { class: "flex flex-col gap-3" }, Wa = ["aria-colcount", "aria-rowcount"], Ga = { class: "sticky top-0 z-10 mb-0.5" }, Ka = { key: 0 }, qa = {
 	key: 0,
 	class: "flex items-center justify-center px-2 py-3",
 	role: "columnheader",
 	"aria-colindex": "1"
-}, Ya = [
+}, Ja = [
 	"aria-colindex",
 	"aria-sort",
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], Xa = {
+], Ya = {
 	role: "rowgroup",
 	class: "relative"
-}, Za = [
+}, Xa = [
 	"aria-rowindex",
 	"aria-selected",
 	"onClick",
 	"onKeydown"
-], Qa = {
+], Za = {
 	key: 0,
 	class: "flex items-center justify-center px-2 py-4",
 	role: "gridcell",
 	"aria-colindex": 1
-}, $a = ["aria-colindex"], eo = {
+}, Qa = ["aria-colindex"], $a = {
 	key: 0,
 	class: "px-4 py-8 text-center text-sm text-slate-400",
 	role: "row"
-}, to = {
+}, eo = {
 	key: 0,
 	"data-testid": "loading-overlay",
 	class: "absolute inset-0 flex items-center justify-center rounded-md bg-white/40 backdrop-blur-sm"
-}, no = /* @__PURE__ */ p({
+}, to = /* @__PURE__ */ p({
 	name: "NexxtTable",
 	__name: "Table",
 	props: /*@__PURE__*/ g({
@@ -4573,17 +4608,17 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 		}, I = (e, t) => e[t], L = (e) => `cell-${e}`, z = (e, t) => {
 			e.key === "ArrowDown" ? (e.preventDefault(), _.value?.[Math.min(t + 1, u.rows.length - 1)]?.focus()) : e.key === "ArrowUp" && (e.preventDefault(), _.value?.[Math.max(t - 1, 0)]?.focus());
 		};
-		return (r, i) => (w(), s("div", Wa, [c("div", {
+		return (r, i) => (w(), s("div", Ua, [c("div", {
 			role: "grid",
 			"aria-colcount": t.columns.length + +!!t.selectable,
 			"aria-rowcount": t.rows.length + 1,
 			class: "min-w-full"
-		}, [c("div", Ka, [r.$slots.toolbar ? (w(), s("div", qa, [D(r.$slots, "toolbar")])) : o("", !0), c("div", {
+		}, [c("div", Ga, [r.$slots.toolbar ? (w(), s("div", Ka, [D(r.$slots, "toolbar")])) : o("", !0), c("div", {
 			class: "grid rounded-md bg-gray-50",
 			style: x({ gridTemplateColumns: A.value }),
 			role: "row",
 			"aria-rowindex": "1"
-		}, [t.selectable ? (w(), s("div", Ja, [t.selectionMode === "multiple" ? (w(), a(qt, {
+		}, [t.selectable ? (w(), s("div", qa, [t.selectionMode === "multiple" ? (w(), a(qt, {
 			key: 0,
 			"model-value": v.value,
 			indeterminate: b.value,
@@ -4602,7 +4637,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			key: 0,
 			name: h.value === e.key ? g.value === "asc" ? "angle-down" : "angle-up" : "angles-up-down",
 			class: y(["shrink-0 text-xs", h.value === e.key ? "text-cornflower-blue-600" : "text-slate-400"])
-		}, null, 8, ["name", "class"])) : o("", !0)], 42, Ya))), 128))], 4)]), c("div", Xa, [
+		}, null, 8, ["name", "class"])) : o("", !0)], 42, Ja))), 128))], 4)]), c("div", Ya, [
 			(w(!0), s(e, null, E(t.rows, (n, i) => (w(), s("div", {
 				key: i,
 				ref_for: !0,
@@ -4621,7 +4656,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				tabindex: "0",
 				onClick: (e) => P(e, i),
 				onKeydown: (e) => z(e, i)
-			}, [t.selectable ? (w(), s("div", Qa, [f(qt, {
+			}, [t.selectable ? (w(), s("div", Za, [f(qt, {
 				"model-value": S(n),
 				"aria-label": `Select row ${i + 1}`,
 				"onUpdate:modelValue": (e) => T(n)
@@ -4637,23 +4672,23 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			}, [D(r.$slots, L(e.key), {
 				row: n,
 				value: I(n, e.key)
-			}, () => [d(k(I(n, e.key)), 1)])], 8, $a))), 128))], 46, Za))), 128)),
-			t.rows.length ? o("", !0) : (w(), s("div", eo, [D(r.$slots, "empty", {}, () => [i[0] ||= d("Geen data beschikbaar", -1)])])),
+			}, () => [d(k(I(n, e.key)), 1)])], 8, Qa))), 128))], 46, Xa))), 128)),
+			t.rows.length ? o("", !0) : (w(), s("div", $a, [D(r.$slots, "empty", {}, () => [i[0] ||= d("Geen data beschikbaar", -1)])])),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-200",
 				"leave-active-class": "transition-opacity duration-200",
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: R(() => [t.loading ? (w(), s("div", to, [D(r.$slots, "loading", {}, () => [f(Z, {
+				default: R(() => [t.loading ? (w(), s("div", eo, [D(r.$slots, "loading", {}, () => [f(Z, {
 					name: "spinner-third",
 					class: "fa-spin text-3xl text-purple-500"
 				})])])) : o("", !0)]),
 				_: 3
 			})
-		])], 8, Ga)]));
+		])], 8, Wa)]));
 	}
-}), ro = /* @__PURE__ */ p({
+}), no = /* @__PURE__ */ p({
 	name: "NexxtTooltip",
 	__name: "Tooltip",
 	props: {
@@ -4705,16 +4740,16 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			_: 3
 		}));
 	}
-}), io = { class: "w-full max-w-105 rounded-xl border border-gray-200" }, ao = { class: "h-38 w-full" }, oo = ["src", "alt"], so = {
+}), ro = { class: "w-full max-w-105 rounded-xl border border-gray-200" }, io = { class: "h-38 w-full" }, ao = ["src", "alt"], oo = {
 	key: 1,
 	class: "flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100"
-}, co = { class: "rounded-b-xl px-8 pt-3.5 pb-4" }, lo = { class: "truncate heading-4 text-gray-900" }, uo = {
+}, so = { class: "rounded-b-xl px-8 pt-3.5 pb-4" }, co = { class: "truncate heading-4 text-gray-900" }, lo = {
 	key: 0,
 	class: "truncate body-normal text-gray-700"
-}, fo = {
+}, uo = {
 	key: 1,
 	class: "mt-3 flex flex-wrap gap-2"
-}, po = { class: "body-small text-gray-700" }, mo = /* @__PURE__ */ p({
+}, fo = { class: "body-small text-gray-700" }, po = /* @__PURE__ */ p({
 	name: "NexxtTemplateCard",
 	__name: "TemplateCard",
 	props: {
@@ -4755,33 +4790,33 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			...r,
 			...a.messages
 		}));
-		return (r, i) => (w(), s("div", io, [c("picture", ao, [t.image ? (w(), s("img", {
+		return (r, i) => (w(), s("div", ro, [c("picture", io, [t.image ? (w(), s("img", {
 			key: 0,
 			src: t.image,
 			alt: t.title,
 			loading: "lazy",
 			class: "w-full rounded-t-xl object-cover"
-		}, null, 8, oo)) : (w(), s("div", so, [f(Z, {
+		}, null, 8, ao)) : (w(), s("div", oo, [f(Z, {
 			name: "image",
 			class: "text-4xl text-gray-400"
-		})]))]), c("div", co, [
-			c("h3", lo, k(t.title), 1),
-			t.subtitle ? (w(), s("p", uo, k(t.subtitle), 1)) : o("", !0),
-			t.contentFeatures.length ? (w(), s("ul", fo, [(w(!0), s(e, null, E(t.contentFeatures, (e) => (w(), s("li", { key: e }, [f(ro, null, {
-				tooltip: R(() => [c("span", po, k(l.value[e]), 1)]),
+		})]))]), c("div", so, [
+			c("h3", co, k(t.title), 1),
+			t.subtitle ? (w(), s("p", lo, k(t.subtitle), 1)) : o("", !0),
+			t.contentFeatures.length ? (w(), s("ul", uo, [(w(!0), s(e, null, E(t.contentFeatures, (e) => (w(), s("li", { key: e }, [f(no, null, {
+				tooltip: R(() => [c("span", fo, k(l.value[e]), 1)]),
 				default: R(() => [c("div", { class: y([[n[e].backgroundColor, n[e].textColor], "flex size-8 items-center justify-center rounded-full"]) }, [f(Z, { name: n[e].icon }, null, 8, ["name"])], 2)]),
 				_: 2
 			}, 1024)]))), 128))])) : o("", !0)
 		])]));
 	}
-}), ho = [
+}), mo = [
 	"data-event-source",
 	"data-event-date",
 	"date-event-type"
-], go = { class: "heading-3" }, _o = ["href"], vo = { class: "truncate group-hover:underline" }, yo = {
+], ho = { class: "heading-3" }, go = ["href"], _o = { class: "truncate group-hover:underline" }, vo = {
 	key: 1,
 	class: "mt-1 text-sm text-gray-500"
-}, bo = /* @__PURE__ */ p({
+}, yo = /* @__PURE__ */ p({
 	name: "NexxtTimelineEvent",
 	__name: "TimelineEvent",
 	props: {
@@ -4819,26 +4854,26 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			name: n.value.icon,
 			class: "flex h-6 w-6 text-xl text-white"
 		}, null, 8, ["name"])], 2), c("div", { class: y(["flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8", { "max-w-lg": e.splitView }]) }, [
-			c("span", go, k(n.value.label), 1),
+			c("span", ho, k(n.value.label), 1),
 			e.event.url ? (w(), s("a", {
 				key: 0,
 				href: e.event.url,
 				target: "_blank",
 				class: "group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
-			}, [c("span", vo, k(e.event.description || e.event.url), 1), f(Z, {
+			}, [c("span", _o, k(e.event.description || e.event.url), 1), f(Z, {
 				name: "external-link",
 				class: "ml-1 h-4 w-4 text-gray-950"
-			})], 8, _o)) : o("", !0),
-			e.event.request_reason ? (w(), s("span", yo, " Reden: " + k(e.event.request_reason), 1)) : o("", !0)
-		], 2)], 2)], 10, ho));
+			})], 8, go)) : o("", !0),
+			e.event.request_reason ? (w(), s("span", vo, " Reden: " + k(e.event.request_reason), 1)) : o("", !0)
+		], 2)], 2)], 10, mo));
 	}
-}), xo = ["data-phase"], So = {
+}), bo = ["data-phase"], xo = {
 	key: 0,
 	class: "relative z-10"
-}, Co = { class: "flex items-center justify-between px-4 py-2" }, wo = { class: "flex gap-1" }, To = { class: "flex gap-1" }, Eo = { class: "text-sm font-semibold tracking-wider uppercase" }, Do = { class: "mt-2 font-medium text-xs text-gray-500" }, Oo = {
+}, So = { class: "flex items-center justify-between px-4 py-2" }, Co = { class: "flex gap-1" }, wo = { class: "flex gap-1" }, To = { class: "text-sm font-semibold tracking-wider uppercase" }, Eo = { class: "mt-2 font-medium text-xs text-gray-500" }, Do = {
 	key: 1,
 	class: "h-1"
-}, ko = /* @__PURE__ */ p({
+}, Oo = /* @__PURE__ */ p({
 	name: "NexxtTimelinePhaseblock",
 	__name: "TimelinePhaseblock",
 	props: {
@@ -4874,14 +4909,14 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			class: "relative z-10 flex flex-col gap-16",
 			"data-phase": t.phase.phase.value
 		}, [
-			t.index === 0 && t.isSplitView ? (w(), s("div", So, [c("div", Co, [c("span", wo, [i[1] ||= d(" Outbound ", -1), f(ro, null, {
+			t.index === 0 && t.isSplitView ? (w(), s("div", xo, [c("div", So, [c("span", Co, [i[1] ||= d(" Outbound ", -1), f(no, null, {
 				tooltip: R(() => [...i[0] ||= [c("span", { class: "text-sm" }, "Vanuit Nexxtmove", -1)]]),
 				default: R(() => [f(Z, {
 					name: "circle-info",
 					class: "h-4 w-4 text-xs text-gray-600"
 				})]),
 				_: 1
-			})]), c("span", To, [i[3] ||= d(" Inbound ", -1), f(ro, { "as-child": "" }, {
+			})]), c("span", wo, [i[3] ||= d(" Inbound ", -1), f(no, { "as-child": "" }, {
 				tooltip: R(() => [...i[2] ||= [c("span", { class: "text-sm" }, "Vanuit relatie", -1)]]),
 				default: R(() => [f(Z, {
 					name: "circle-info",
@@ -4894,7 +4929,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				key: 1,
 				class: y(["absolute right-5 bottom-0 w-0 border-l", [A($)[t.phase.phase.value].color, t.index === 0 ? "top-10" : "top-0"]])
 			}, null, 2)) : o("", !0),
-			(w(!0), s(e, null, E(t.phase.events, (e) => (w(), a(bo, {
+			(w(!0), s(e, null, E(t.phase.events, (e) => (w(), a(yo, {
 				key: e.id,
 				event: e,
 				"split-view": t.isSplitView
@@ -4903,36 +4938,36 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				key: 2,
 				class: y(["relative flex flex-col items-center pt-8 pb-24 text-center", { "pl-16": !t.isSplitView }])
 			}, [
-				c("div", { class: y(["flex items-center gap-2 rounded-full px-12 py-4", [A($)[t.phase.phase.value].bgColor, A($)[t.phase.phase.value].textColor]]) }, [c("span", Eo, k(A($)[t.phase.phase.value].label), 1), p() ? (w(), a(Z, {
+				c("div", { class: y(["flex items-center gap-2 rounded-full px-12 py-4", [A($)[t.phase.phase.value].bgColor, A($)[t.phase.phase.value].textColor]]) }, [c("span", To, k(A($)[t.phase.phase.value].label), 1), p() ? (w(), a(Z, {
 					key: 0,
 					name: p() === "up" ? "arrow-up" : "arrow-down",
 					class: "h-4 w-4 text-white"
 				}, null, 8, ["name"])) : o("", !0)], 2),
-				c("span", Do, k(u()), 1),
+				c("span", Eo, k(u()), 1),
 				t.isSplitView ? (w(), s("div", {
 					key: 0,
 					class: y(["mt-4 h-px w-[75%]", A($)[t.phase.phase.value].bgColor])
 				}, null, 2)) : o("", !0),
-				t.isLast ? o("", !0) : (w(), s("div", Oo)),
+				t.isLast ? o("", !0) : (w(), s("div", Do)),
 				c("div", { class: y(["absolute top-0 bottom-0 left-5 w-px bg-linear-to-b", r.value]) }, null, 2),
 				t.isSplitView ? (w(), s("div", {
 					key: 2,
 					class: y(["absolute top-0 right-5 bottom-0 w-px bg-linear-to-b", r.value])
 				}, null, 2)) : o("", !0)
 			], 2))
-		], 8, xo));
+		], 8, bo));
 	}
-}), Ao = ["role", "aria-live"], jo = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, Mo = {
+}), ko = ["role", "aria-live"], Ao = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, jo = {
 	key: 1,
 	class: "body-normal"
-}, No = ["aria-label"], Po = {
+}, Mo = ["aria-label"], No = {
 	key: 0,
 	class: "absolute inset-0 -rotate-90 text-gray-400",
 	viewBox: "0 0 24 24",
 	width: "32",
 	height: "32",
 	"aria-hidden": "true"
-}, Fo = 56.55, Io = /*#__PURE__*/ Mn(/* @__PURE__ */ p({
+}, Po = 56.55, Fo = /*#__PURE__*/ Mn(/* @__PURE__ */ p({
 	name: "NexxtToast",
 	__name: "Toast",
 	props: {
@@ -4947,7 +4982,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 	},
 	emits: ["dismiss"],
 	setup(e, { emit: t }) {
-		j((e) => ({ v3e3d3e68: Fo }));
+		j((e) => ({ v3e3d3e68: Po }));
 		let n = {
 			info: {
 				icon: "info",
@@ -4995,12 +5030,12 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				name: l.value.icon,
 				class: "text-xl"
 			}, null, 8, ["name"])], 2),
-			c("div", jo, [
+			c("div", Ao, [
 				e.title ? (w(), s("p", {
 					key: 0,
 					class: y(["heading-4", l.value.titleColor])
 				}, k(e.title), 3)) : o("", !0),
-				e.message ? (w(), s("p", Mo, k(e.message), 1)) : o("", !0),
+				e.message ? (w(), s("p", jo, k(e.message), 1)) : o("", !0),
 				D(t.$slots, "default", {}, void 0, !0)
 			]),
 			e.dismissible ? (w(), s("button", {
@@ -5009,7 +5044,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				class: "relative flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center focus:outline-none",
 				"aria-label": e.autoClose ? `Sluiten (verdwijnt automatisch na ${e.autoClose / 1e3} seconden)` : "Sluiten",
 				onClick: n[0] ||= (e) => r("dismiss")
-			}, [e.autoClose ? (w(), s("svg", Po, [c("circle", {
+			}, [e.autoClose ? (w(), s("svg", No, [c("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9",
@@ -5017,7 +5052,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				stroke: "currentColor",
 				"stroke-width": "1.2",
 				"stroke-linecap": "round",
-				"stroke-dasharray": Fo,
+				"stroke-dasharray": Po,
 				class: "timer-circle",
 				style: x({
 					animationDuration: `${e.autoClose}ms`,
@@ -5026,10 +5061,10 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			}, null, 4)])) : o("", !0), f(Z, {
 				name: "xmark",
 				class: "text-sm"
-			})], 8, No)) : o("", !0)
-		], 42, Ao));
+			})], 8, Mo)) : o("", !0)
+		], 42, ko));
 	}
-}), [["__scopeId", "data-v-89269eaa"]]), Lo = /* @__PURE__ */ p({
+}), [["__scopeId", "data-v-89269eaa"]]), Io = /* @__PURE__ */ p({
 	name: "NexxtToaster",
 	__name: "Toaster",
 	props: {
@@ -5062,7 +5097,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			default: R(() => [(w(!0), s(e, null, E(n.toasts, (e) => (w(), s("div", {
 				key: e.id,
 				class: "pointer-events-auto"
-			}, [f(Io, _({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
+			}, [f(Fo, _({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
 			_: 1
 		}, 8, [
 			"class",
@@ -5070,19 +5105,19 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			"leave-to-class"
 		])], 2)]));
 	}
-}), Ro = { class: "flex flex-col gap-1" }, zo = {
+}), Lo = { class: "flex flex-col gap-1" }, Ro = {
 	key: 0,
 	class: "text-color-gray-700 justify-start body-normal text-sm"
-}, Bo = ["onClick"], Vo = {
+}, zo = ["onClick"], Bo = {
 	key: 1,
 	class: "extra-small-semibold"
-}, Ho = ["onClick"], Uo = {
+}, Vo = ["onClick"], Ho = {
 	key: 1,
 	class: "extra-small-semibold"
-}, Wo = {
+}, Uo = {
 	key: 1,
 	class: "extra-small-semibold"
-}, Go = /* @__PURE__ */ p({
+}, Wo = /* @__PURE__ */ p({
 	name: "NexxtToggleGroup",
 	__name: "ToggleGroup",
 	props: /*@__PURE__*/ g({
@@ -5113,7 +5148,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 		};
 		return I(r, async () => await m()), et(i, () => m()), S(async () => {
 			await document.fonts.ready, await m(), await v(), p.value = !0;
-		}), (n, m) => (w(), s("div", Ro, [t.label ? (w(), s("label", zo, k(t.label), 1)) : o("", !0), c("div", {
+		}), (n, m) => (w(), s("div", Lo, [t.label ? (w(), s("label", Ro, k(t.label), 1)) : o("", !0), c("div", {
 			ref_key: "containerRef",
 			ref: i,
 			class: y(["relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1", { "flex-wrap": !t.equalWidth }])
@@ -5123,7 +5158,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				class: y(["absolute inset-y-1 left-0 rounded-lg bg-white", p.value ? "transition-transform duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
 				style: x(u.value)
 			}, null, 6),
-			(w(!0), s(e, null, E(t.options, (n, i) => (w(), s(e, { key: n.value }, [n.tooltip ? (w(), a(ro, {
+			(w(!0), s(e, null, E(t.options, (n, i) => (w(), s(e, { key: n.value }, [n.tooltip ? (w(), a(no, {
 				key: 0,
 				"disable-closing-trigger": ""
 			}, {
@@ -5137,7 +5172,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				}, [n.icon ? (w(), a(Z, {
 					key: 0,
 					name: n.icon
-				}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Vo, k(n.label), 1)) : o("", !0)], 10, Bo)]),
+				}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Bo, k(n.label), 1)) : o("", !0)], 10, zo)]),
 				_: 2
 			}, 1024)) : (w(), s("button", {
 				key: 1,
@@ -5149,7 +5184,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			}, [n.icon ? (w(), a(Z, {
 				key: 0,
 				name: n.icon
-			}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Uo, k(n.label), 1)) : o("", !0)], 10, Ho))], 64))), 128)),
+			}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Ho, k(n.label), 1)) : o("", !0)], 10, Vo))], 64))), 128)),
 			c("div", {
 				"aria-hidden": "true",
 				class: y(["pointer-events-none absolute inset-0 z-20 flex gap-1 p-1", [p.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : "", { "flex-wrap": !t.equalWidth }]]),
@@ -5160,29 +5195,29 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 			}, [e.icon ? (w(), a(Z, {
 				key: 0,
 				name: e.icon
-			}, null, 8, ["name"])) : o("", !0), e.label ? (w(), s("span", Wo, k(e.label), 1)) : o("", !0)], 2))), 128))], 6)
+			}, null, 8, ["name"])) : o("", !0), e.label ? (w(), s("span", Uo, k(e.label), 1)) : o("", !0)], 2))), 128))], 6)
 		], 2)]));
 	}
-}), Ko = [
+}), Go = [
 	"src",
 	"loop",
 	"aria-label"
-], qo = {
+], Ko = {
 	key: 0,
 	role: "alert",
 	class: "absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-900 text-white"
-}, Jo = { class: "heading-4" }, Yo = { class: "max-w-xs truncate extra-small-normal text-white/50" }, Xo = {
+}, qo = { class: "heading-4" }, Jo = { class: "max-w-xs truncate extra-small-normal text-white/50" }, Yo = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 flex items-center justify-center"
-}, Zo = {
+}, Xo = {
 	class: "flex h-16 w-16 items-center justify-center rounded-full bg-black/50 text-white",
 	"aria-hidden": "true"
-}, Qo = [
+}, Zo = [
 	"aria-label",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext"
-], $o = { class: "flex items-center gap-2" }, es = ["aria-label"], ts = { class: "extra-small-normal text-white/70 tabular-nums" }, ns = ["aria-label"], rs = ["aria-label"], is = /* @__PURE__ */ p({
+], Qo = { class: "flex items-center gap-2" }, $o = ["aria-label"], es = { class: "extra-small-normal text-white/70 tabular-nums" }, ts = ["aria-label"], ns = ["aria-label"], rs = /* @__PURE__ */ p({
 	__name: "VideoPlayer",
 	props: {
 		src: {},
@@ -5263,15 +5298,15 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				"aria-label": a.value.video,
 				onError: r[0] ||= (e) => E.value = !0,
 				onClick: r[1] ||= (t) => e.showControls === !1 ? void 0 : L()
-			}, null, 42, Ko),
-			E.value ? (w(), s("div", qo, [
+			}, null, 42, Go),
+			E.value ? (w(), s("div", Ko, [
 				f(Z, {
 					name: "circle-exclamation",
 					class: "text-3xl text-red-400",
 					"aria-hidden": "true"
 				}),
-				c("p", Jo, k(a.value.error), 1),
-				c("p", Yo, k(e.src), 1)
+				c("p", qo, k(a.value.error), 1),
+				c("p", Jo, k(e.src), 1)
 			])) : o("", !0),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-100 ease-out",
@@ -5279,7 +5314,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: R(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", Xo, [c("div", Zo, [f(Z, {
+				default: R(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", Yo, [c("div", Xo, [f(Z, {
 					name: D.value,
 					class: "text-2xl"
 				}, null, 8, ["name"])])])) : o("", !0)]),
@@ -5322,7 +5357,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 					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: x({ left: `${ee.value}%` })
 				}, null, 4)
-			], 40, Qo), c("div", $o, [
+			], 40, Zo), c("div", Qo, [
 				c("button", {
 					type: "button",
 					"aria-label": A(u) ? a.value.pause : a.value.play,
@@ -5332,8 +5367,8 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 					name: A(u) ? "pause" : "play",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, es),
-				c("span", ts, k(F(W.value)) + " / " + k(F(A(m))), 1),
+				}, null, 8, ["name"])], 8, $o),
+				c("span", es, k(F(W.value)) + " / " + k(F(A(m))), 1),
 				r[7] ||= c("div", { class: "flex-1" }, null, -1),
 				c("button", {
 					type: "button",
@@ -5344,7 +5379,7 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 					name: A(h) ? "volume-xmark" : "volume-high",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, ns),
+				}, null, 8, ["name"])], 8, ts),
 				c("button", {
 					type: "button",
 					"aria-label": A(_) ? a.value.exitFullscreen : a.value.enterFullscreen,
@@ -5354,10 +5389,10 @@ var ma = { render: pa }, ha = { class: "flex items-center justify-end self-stret
 					name: A(_) ? "compress" : "expand",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, rs)
+				}, null, 8, ["name"])], 8, ns)
 			])], 4)) : o("", !0)
 		], 32));
 	}
 });
 //#endregion
-export { tt as NexxtAnimatedNumber, rt as NexxtAnnouncement, ct as NexxtAvatar, ut as NexxtButton, Ht as NexxtCalendar, Gt as NexxtCard, qt as NexxtCheckbox, Jt as NexxtChip, ln as NexxtColorPicker, jn as NexxtCombobox, An as NexxtComboboxPanel, Rn as NexxtContactInfoCard, Zn as NexxtCountrySelect, nr as NexxtCustomerJourneyTile, rr as NexxtDatePicker, dr as NexxtDoughnutChart, gr as NexxtDropdownButton, yr as NexxtEnergyLabel, Q as NexxtFloatingPanel, Sr as NexxtHeader, Z as NexxtIcon, wr as NexxtInfoBlock, _n as NexxtInputField, Nr as NexxtInputSelect, Lr as NexxtModal, Rr as NexxtPagination, Hr as NexxtPresenceIndicator, Yr as NexxtProgressBar, oi as NexxtPropertyCard, ti as NexxtPropertyListing, Si as NexxtReferenceCard, ji as NexxtSelect, Li as NexxtSidebarMenuItem, zi as NexxtSkeleton, Ui as NexxtSkeletonPropertyCard, Ki as NexxtSocialIcons, Xi as NexxtSocialMediaCustomTemplate, aa as NexxtSocialMediaTemplate, ya as NexxtSocialMediaType, Ma as NexxtSource, st as NexxtSquircle, Na as NexxtStepperHeader, Ia as NexxtSwitch, Ua as NexxtTabbedContent, no as NexxtTable, za as NexxtTabs, mo as NexxtTemplateCard, bo as NexxtTimelineEvent, ko as NexxtTimelinePhaseblock, Io as NexxtToast, Lo as NexxtToaster, Go as NexxtToggleGroup, ro as NexxtTooltip, is as NexxtVideoPlayer, ka as SOURCE_MAP };
+export { tt as NexxtAnimatedNumber, rt as NexxtAnnouncement, ct as NexxtAvatar, ut as NexxtButton, Ht as NexxtCalendar, Gt as NexxtCard, qt as NexxtCheckbox, Jt as NexxtChip, ln as NexxtColorPicker, jn as NexxtCombobox, An as NexxtComboboxPanel, Rn as NexxtContactInfoCard, Zn as NexxtCountrySelect, nr as NexxtCustomerJourneyTile, rr as NexxtDatePicker, dr as NexxtDoughnutChart, gr as NexxtDropdownButton, yr as NexxtEnergyLabel, Q as NexxtFloatingPanel, Sr as NexxtHeader, Z as NexxtIcon, wr as NexxtInfoBlock, _n as NexxtInputField, Nr as NexxtInputSelect, Lr as NexxtModal, Rr as NexxtPagination, Hr as NexxtPresenceIndicator, Yr as NexxtProgressBar, oi as NexxtPropertyCard, ti as NexxtPropertyListing, Si as NexxtReferenceCard, ji as NexxtSelect, Li as NexxtSidebarMenuItem, zi as NexxtSkeleton, Ui as NexxtSkeletonPropertyCard, Ki as NexxtSocialIcons, Xi as NexxtSocialMediaCustomTemplate, aa as NexxtSocialMediaTemplate, ya as NexxtSocialMediaType, Ma as NexxtSource, st as NexxtSquircle, Na as NexxtStepperHeader, Fa as NexxtSwitch, Ha as NexxtTabbedContent, to as NexxtTable, Ra as NexxtTabs, po as NexxtTemplateCard, yo as NexxtTimelineEvent, Oo as NexxtTimelinePhaseblock, Fo as NexxtToast, Io as NexxtToaster, Wo as NexxtToggleGroup, no as NexxtTooltip, rs as NexxtVideoPlayer, ka as SOURCE_MAP };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -34,12 +34,12 @@
     "@eslint/js": "^10.0.1",
     "@nuxt/kit": "^4.4.8",
     "@nuxt/schema": "^4.4.4",
-    "@storybook/addon-a11y": "^10.5.2",
+    "@storybook/addon-a11y": "^10.5.4",
     "@storybook/addon-designs": "^11.1.4",
-    "@storybook/addon-docs": "^10.5.2",
-    "@storybook/addon-vitest": "^10.5.2",
-    "@storybook/builder-vite": "^10.5.2",
-    "@storybook/vue3-vite": "^10.5.2",
+    "@storybook/addon-docs": "^10.5.4",
+    "@storybook/addon-vitest": "^10.5.4",
+    "@storybook/builder-vite": "^10.5.4",
+    "@storybook/vue3-vite": "^10.5.4",
     "@tailwindcss/vite": "^4.3.1",
     "@types/node": "^26.0.1",
     "@types/react": "^19.2.17",
@@ -53,7 +53,7 @@
     "eslint": "^10.6.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-storybook": "10.5.2",
+    "eslint-plugin-storybook": "10.5.4",
     "eslint-plugin-vue": "^10.9.2",
     "flag-icons": "^7.5.0",
     "globals": "^17.7.0",
@@ -63,7 +63,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.5.2",
+    "storybook": "^10.5.4",
     "typescript-eslint": "^8.62.0",
     "vite": "^8.1.0",
     "vite-plugin-dts": "^5.0.3",

package/src/components/Chip/Chip.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 interface NexxtChipProps {
-  variant?: 'default' | 'warning' | 'success' | 'danger' | 'neutral'
+  variant?: 'default' | 'warning' | 'success' | 'danger' | 'neutral' | 'accent'
   ghost?: boolean
 }
 
@@ -23,6 +23,8 @@ const styles = computed(() => {
         return { bg: 'bg-brick-100/20', border: 'border border-brick-500', text: 'text-brick-500' }
       case 'neutral':
         return { bg: 'bg-gray-100', border: 'border border-gray-600', text: 'text-gray-700' }
+      case 'accent':
+        return { bg: 'bg-purple-50', border: 'border border-purple-500', text: 'text-purple-500' }
       default:
         return {
           bg: 'bg-cornflower-blue-50',
@@ -40,6 +42,8 @@ const styles = computed(() => {
       return { bg: 'bg-brick-500', border: '', text: 'text-white' }
     case 'neutral':
       return { bg: 'bg-gray-700', border: '', text: 'text-white' }
+    case 'accent':
+      return { bg: 'bg-purple-600', border: '', text: 'text-white' }
     default:
       return { bg: 'bg-cornflower-blue-600', border: '', text: 'text-white' }
   }

package/src/components/Switch/Switch.vue

@@ -3,10 +3,12 @@ import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
 import Icon from '../Icon/Icon.vue'
 
 type SwitchColor = 'blue' | 'green'
+type SwitchSize = 'sm' | 'md' | 'lg'
 
 interface NexxtSwitchProps {
   labelPosition?: 'before' | 'after'
   color?: SwitchColor
+  size?: SwitchSize
   iconOn?: IconName
   iconOff?: IconName
 }
@@ -16,7 +18,13 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { labelPosition = 'after', color = 'blue', iconOn, iconOff } = defineProps<NexxtSwitchProps>()
+const {
+  labelPosition = 'after',
+  color = 'blue',
+  size = 'lg',
+  iconOn,
+  iconOff,
+} = defineProps<NexxtSwitchProps>()
 
 const model = defineModel<boolean>()
 
@@ -24,12 +32,36 @@ const checkedColorClasses: Record<SwitchColor, string> = {
   blue: 'border-cornflower-blue-500 bg-cornflower-blue-500',
   green: 'border-green-400 bg-green-400',
 }
+
+const trackClasses: Record<SwitchSize, string> = {
+  sm: 'h-5 w-9',
+  md: 'h-6 w-11',
+  lg: 'h-8 w-15',
+}
+
+const knobClasses: Record<SwitchSize, string> = {
+  sm: 'top-0.5 left-0.5 h-3.5 w-3.5',
+  md: 'top-0.5 left-0.5 h-4.5 w-4.5',
+  lg: 'top-0.75 left-0.75 h-6 w-6',
+}
+
+const knobTranslateClasses: Record<SwitchSize, string> = {
+  sm: 'translate-x-4',
+  md: 'translate-x-5',
+  lg: 'translate-x-7',
+}
+
+const iconSizeClasses: Record<SwitchSize, string> = {
+  sm: 'text-[8px]',
+  md: 'text-[10px]',
+  lg: 'text-xs',
+}
 </script>
 
 <template>
   <label class="inline-flex cursor-pointer items-center gap-2">
     <slot v-if="labelPosition === 'before'" />
-    <span class="relative inline-block h-8 w-15">
+    <span :class="['relative inline-block', trackClasses[size]]">
       <input v-bind="$attrs" type="checkbox" class="peer sr-only" v-model="model" />
       <span
         :class="[
@@ -39,18 +71,29 @@ const checkedColorClasses: Record<SwitchColor, string> = {
       >
         <span
           :class="[
-            'absolute top-0.75 left-0.75 h-6 w-6 rounded-full bg-white transition-transform duration-400',
-            model && 'translate-x-7',
+            'absolute rounded-full bg-white transition-transform duration-400',
+            knobClasses[size],
+            model && knobTranslateClasses[size],
           ]"
         />
         <span
           :class="[
-            'absolute top-0.75 left-0.75 flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform duration-300',
-            model && 'translate-x-7',
+            'absolute flex items-center justify-center rounded-full bg-white transition-transform duration-300',
+            knobClasses[size],
+            model && knobTranslateClasses[size],
           ]"
         >
-          <Icon v-if="model && iconOn" :name="iconOn" type="solid" class="text-xs text-gray-600" />
-          <Icon v-else-if="!model && iconOff" :name="iconOff" class="text-xs text-gray-600" />
+          <Icon
+            v-if="model && iconOn"
+            :name="iconOn"
+            type="solid"
+            :class="['text-gray-600', iconSizeClasses[size]]"
+          />
+          <Icon
+            v-else-if="!model && iconOff"
+            :name="iconOff"
+            :class="['text-gray-600', iconSizeClasses[size]]"
+          />
         </span>
       </span>
     </span>