@nexxtmove/ui 1.0.6 → 1.0.8

package/dist/index.d.ts

@@ -66,21 +66,27 @@ declare const __VLS_component_16: DefineComponent<NexxtStepperHeaderProps, {}, {
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_17: DefineComponent<__VLS_PublicProps_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:modelValue": (value: string) => any;
+"update:modelValue": (value: boolean) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps_9> & Readonly<{
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_18: DefineComponent<__VLS_PublicProps_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_10> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_18: DefineComponent<NexxtToastProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_19: DefineComponent<NexxtToastProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 dismiss: () => any;
 }, string, PublicProps, Readonly<NexxtToastProps> & Readonly<{
 onDismiss?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_19: DefineComponent<NexxtTooltip_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtTooltip_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-
 declare const __VLS_component_2: DefineComponent<NexxtButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
+declare const __VLS_component_20: DefineComponent<NexxtTooltip_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtTooltip_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
 declare const __VLS_component_3: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_4: DefineComponent<NexxtChipProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtChipProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
@@ -404,16 +410,18 @@ declare type __VLS_Props = {
     delay?: number;
 };
 
-declare type __VLS_Props_10 = NexxtTabbedContent_2;
+declare type __VLS_Props_10 = NexxtSwitchProps;
+
+declare type __VLS_Props_11 = NexxtTabbedContent_2;
 
-declare type __VLS_Props_11 = NexxtTabs_2;
+declare type __VLS_Props_12 = NexxtTabs_2;
 
-declare type __VLS_Props_12 = {
+declare type __VLS_Props_13 = {
     event: TimelineEvent;
     splitView?: boolean;
 };
 
-declare type __VLS_Props_13 = {
+declare type __VLS_Props_14 = {
     phase: TimelinePhase;
     /** Index within the filtered phases array (used to determine phase direction/date). */
     index: number;
@@ -444,9 +452,13 @@ declare type __VLS_PublicProps = {
 } & __VLS_Props_2;
 
 declare type __VLS_PublicProps_10 = {
-    modelValue?: typeof selected['value'];
+    modelValue?: string;
 } & __VLS_Props_11;
 
+declare type __VLS_PublicProps_11 = {
+    modelValue?: typeof selected['value'];
+} & __VLS_Props_12;
+
 declare type __VLS_PublicProps_2 = {
     modelValue?: boolean;
 } & __VLS_Props_3;
@@ -477,7 +489,7 @@ declare type __VLS_PublicProps_8 = {
 } & __VLS_Props_9;
 
 declare type __VLS_PublicProps_9 = {
-    modelValue?: string;
+    modelValue?: boolean;
 } & __VLS_Props_10;
 
 declare function __VLS_template(): {
@@ -521,6 +533,7 @@ declare function __VLS_template_12(): {
 declare function __VLS_template_13(): {
     attrs: Partial<{}>;
     slots: {
+        header?(_: {}): any;
         default?(_: {}): any;
         footer?(_: {}): any;
     };
@@ -556,13 +569,23 @@ declare function __VLS_template_16(): {
 };
 
 declare function __VLS_template_17(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_18(): {
     attrs: Partial<{}>;
     slots: Partial<Record<string, (_: {}) => any>>;
     refs: {};
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_18(): {
+declare function __VLS_template_19(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
@@ -571,23 +594,23 @@ declare function __VLS_template_18(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_19(): {
+declare function __VLS_template_2(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
-        tooltip?(_: {}): any;
     };
     refs: {};
-    rootEl: any;
+    rootEl: HTMLButtonElement;
 };
 
-declare function __VLS_template_2(): {
+declare function __VLS_template_20(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
+        tooltip?(_: {}): any;
     };
     refs: {};
-    rootEl: HTMLButtonElement;
+    rootEl: any;
 };
 
 declare function __VLS_template_3(): {
@@ -917,6 +940,8 @@ declare type __VLS_TemplateResult_19 = ReturnType<typeof __VLS_template_19>;
 
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
 
+declare type __VLS_TemplateResult_20 = ReturnType<typeof __VLS_template_20>;
+
 declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
 
 declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
@@ -1003,6 +1028,12 @@ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_20<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_3<T, S> = T & {
     new (): {
         $slots: S;
@@ -1768,7 +1799,16 @@ declare interface NexxtStepperHeaderProps {
     backButtonAction: InstanceType<typeof NexxtHeader>['backButtonAction'];
 }
 
-export declare const NexxtTabbedContent: __VLS_WithTemplateSlots_17<typeof __VLS_component_17, __VLS_TemplateResult_17["slots"]>;
+export declare const NexxtSwitch: __VLS_WithTemplateSlots_17<typeof __VLS_component_17, __VLS_TemplateResult_17["slots"]>;
+
+declare interface NexxtSwitchProps {
+    labelPosition?: 'before' | 'after';
+    color?: SwitchColor;
+    iconOn?: IconName;
+    iconOff?: IconName;
+}
+
+export declare const NexxtTabbedContent: __VLS_WithTemplateSlots_18<typeof __VLS_component_18, __VLS_TemplateResult_18["slots"]>;
 
 declare interface NexxtTabbedContent_2 {
     tabs: InstanceType<typeof NexxtTabs>['tabs'];
@@ -1814,9 +1854,9 @@ declare interface NexxtTableProps<TKey extends string = string, TRow extends Rec
     loading?: boolean;
 }
 
-export declare const NexxtTabs: DefineComponent<__VLS_PublicProps_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+export declare const NexxtTabs: DefineComponent<__VLS_PublicProps_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_10> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_PublicProps_11> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
 containerRef: HTMLDivElement;
@@ -1827,13 +1867,13 @@ declare interface NexxtTabs_2 {
     tablistLabel?: string;
 }
 
-export declare const NexxtTimelineEvent: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {
+export declare const NexxtTimelineEvent: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_13> & Readonly<{}>, {
 splitView: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const NexxtTimelinePhaseblock: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_13> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare const NexxtTimelinePhaseblock: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_14> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const NexxtToast: __VLS_WithTemplateSlots_18<typeof __VLS_component_18, __VLS_TemplateResult_18["slots"]>;
+export declare const NexxtToast: __VLS_WithTemplateSlots_19<typeof __VLS_component_19, __VLS_TemplateResult_19["slots"]>;
 
 export declare const NexxtToaster: DefineComponent<NexxtToasterProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 dismiss: (id: string) => any;
@@ -1854,7 +1894,7 @@ declare interface NexxtToastProps {
     autoClose?: number;
 }
 
-export declare const NexxtTooltip: __VLS_WithTemplateSlots_19<typeof __VLS_component_19, __VLS_TemplateResult_19["slots"]>;
+export declare const NexxtTooltip: __VLS_WithTemplateSlots_20<typeof __VLS_component_20, __VLS_TemplateResult_20["slots"]>;
 
 declare interface NexxtTooltip_2 {
     delay?: number;
@@ -1910,6 +1950,8 @@ export declare const SOURCE_MAP: {
     readonly dossier_data: "Dossier Data";
 };
 
+declare type SwitchColor = 'blue' | 'green';
+
 declare interface TableColumn<K extends string = string> {
     key: K;
     label: string;

package/dist/index.js

@@ -6359,19 +6359,23 @@ var ls = /* @__PURE__ */ g({
 						onEscapeKeyDown: s[2] ||= (t) => !e.dismissible && t.preventDefault()
 					}, {
 						default: F(() => [
-							e.title || n.value ? (D(), u("div", Ws, [d("div", null, [e.title ? (D(), c(N(pe), {
-								key: 0,
-								class: "heading-2"
-							}, {
-								default: F(() => [m(M(e.title), 1)]),
-								_: 1
-							})) : l("", !0), n.value ? (D(), c(N(le), {
-								key: 1,
-								class: "small-normal"
-							}, {
-								default: F(() => [m(M(n.value), 1)]),
-								_: 1
-							})) : l("", !0)]), e.showClose ? (D(), c(N(se), {
+							e.title || n.value || o.$slots.header ? (D(), u("div", Ws, [d("div", null, [
+								e.title ? (D(), c(N(pe), {
+									key: 0,
+									class: "heading-2"
+								}, {
+									default: F(() => [m(M(e.title), 1)]),
+									_: 1
+								})) : l("", !0),
+								n.value ? (D(), c(N(le), {
+									key: 1,
+									class: "small-normal"
+								}, {
+									default: F(() => [m(M(n.value), 1)]),
+									_: 1
+								})) : l("", !0),
+								A(o.$slots, "header")
+							]), e.showClose ? (D(), c(N(se), {
 								key: 0,
 								class: "ml-4 shrink-0 cursor-pointer rounded p-1 focus-visible:outline-2"
 							}, {
@@ -7169,12 +7173,50 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 			"back-button-text"
 		]));
 	}
-}), kl = ["aria-label"], Al = [
+}), kl = { class: "inline-flex cursor-pointer items-center gap-2" }, Al = { class: "relative inline-block h-8 w-15" }, jl = /* @__PURE__ */ g({
+	name: "NexxtSwitch",
+	inheritAttrs: !1,
+	__name: "Switch",
+	props: /* @__PURE__ */ b({
+		labelPosition: { default: "after" },
+		color: { default: "blue" },
+		iconOn: {},
+		iconOff: {}
+	}, {
+		modelValue: { type: Boolean },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = P(e, "modelValue"), n = {
+			blue: "border-cornflower-blue-500 bg-cornflower-blue-500",
+			green: "border-green-400 bg-green-400"
+		};
+		return (r, i) => (D(), u("label", kl, [
+			e.labelPosition === "before" ? A(r.$slots, "default", { key: 0 }) : l("", !0),
+			d("span", Al, [oe(d("input", x(r.$attrs, {
+				type: "checkbox",
+				class: "peer sr-only",
+				"onUpdate:modelValue": i[0] ||= (e) => t.value = e
+			}), null, 16), [[ne, t.value]]), d("span", { class: C(["absolute inset-0 overflow-hidden rounded-[30px] border transition-colors duration-200", t.value ? n[e.color] : "border-gray-500 bg-gray-200"]) }, [d("span", { class: C(["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), d("span", { class: C(["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 ? (D(), c(z, {
+				key: 0,
+				name: e.iconOn,
+				type: "solid",
+				class: "text-xs text-gray-600"
+			}, null, 8, ["name"])) : !t.value && e.iconOff ? (D(), c(z, {
+				key: 1,
+				name: e.iconOff,
+				class: "text-xs text-gray-600"
+			}, null, 8, ["name"])) : l("", !0)], 2)], 2)]),
+			e.labelPosition === "after" ? A(r.$slots, "default", { key: 1 }) : l("", !0)
+		]));
+	}
+}), Ml = ["aria-label"], Nl = [
 	"aria-selected",
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], jl = /* @__PURE__ */ g({
+], Pl = /* @__PURE__ */ g({
 	name: "NexxtTabs",
 	__name: "Tabs",
 	props: /* @__PURE__ */ b({
@@ -7234,7 +7276,7 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 				class: C(["relative h-9 cursor-pointer rounded-full px-4 text-sm text-gray-950 transition-none", n.value === e ? "z-10" : "z-30"]),
 				onClick: (t) => n.value = e,
 				onKeydown: (e) => f(e, t)
-			}, M(e), 43, Al))), 128)),
+			}, M(e), 43, Nl))), 128)),
 			d("div", {
 				"aria-hidden": "true",
 				class: C(["pointer-events-none absolute inset-0 z-20 flex", c.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
@@ -7243,9 +7285,9 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 				key: e,
 				class: "flex h-9 items-center rounded-full px-4 text-sm text-white"
 			}, M(e), 1))), 128))], 6)
-		], 8, kl));
+		], 8, Ml));
 	}
-}), Ml = { class: "flex flex-col items-center" }, Nl = { class: "relative w-full overflow-hidden" }, Pl = ["aria-labelledby"], Fl = /* @__PURE__ */ g({
+}), Fl = { class: "flex flex-col items-center" }, Il = { class: "relative w-full overflow-hidden" }, Ll = ["aria-labelledby"], Rl = /* @__PURE__ */ g({
 	name: "NexxtTabbedContent",
 	__name: "TabbedContent",
 	props: /* @__PURE__ */ b({
@@ -7270,7 +7312,7 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 			enterFromClass: r.value === "forward" ? "-translate-x-10 opacity-0" : "translate-x-10 opacity-0",
 			leaveToClass: r.value === "forward" ? "translate-x-10 opacity-0" : "-translate-x-10 opacity-0"
 		} : { mode: "out-in" });
-		return (t, r) => (D(), u("div", Ml, [h(jl, {
+		return (t, r) => (D(), u("div", Fl, [h(Pl, {
 			tabs: e.tabs,
 			modelValue: n.value,
 			"onUpdate:modelValue": r[0] ||= (e) => n.value = e,
@@ -7280,49 +7322,49 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 			"tabs",
 			"modelValue",
 			"tablist-label"
-		]), d("div", Nl, [h(a, w(v(c.value)), {
+		]), d("div", Il, [h(a, w(v(c.value)), {
 			default: F(() => [(D(), u("div", {
 				key: n.value,
 				role: "tabpanel",
 				"aria-labelledby": o(n.value),
 				class: "w-full"
-			}, [A(t.$slots, i(n.value))], 8, Pl))]),
+			}, [A(t.$slots, i(n.value))], 8, Ll))]),
 			_: 3
 		}, 16)])]));
 	}
-}), Il = { class: "flex flex-col gap-3" }, Ll = ["aria-colcount", "aria-rowcount"], Rl = { class: "sticky top-0 z-10 mb-0.5" }, zl = { key: 0 }, Bl = {
+}), zl = { class: "flex flex-col gap-3" }, Bl = ["aria-colcount", "aria-rowcount"], Vl = { class: "sticky top-0 z-10 mb-0.5" }, Hl = { key: 0 }, Ul = {
 	key: 0,
 	class: "flex items-center justify-center px-2 py-3",
 	role: "columnheader",
 	"aria-colindex": "1"
-}, Vl = [
+}, Wl = [
 	"aria-colindex",
 	"aria-sort",
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], Hl = {
+], Gl = {
 	role: "rowgroup",
 	class: "relative"
-}, Ul = [
+}, Kl = [
 	"aria-rowindex",
 	"aria-selected",
 	"onClick",
 	"onKeydown"
-], Wl = {
+], ql = {
 	key: 0,
 	class: "flex items-center justify-center px-2 py-4",
 	role: "gridcell",
 	"aria-colindex": 1
-}, Gl = ["aria-colindex"], Kl = {
+}, Jl = ["aria-colindex"], Yl = {
 	key: 0,
 	class: "px-4 py-8 text-center text-sm text-slate-400",
 	role: "row"
-}, ql = {
+}, Xl = {
 	key: 0,
 	"data-testid": "loading-overlay",
 	class: "absolute inset-0 flex items-center justify-center rounded-md bg-white/40 backdrop-blur-sm"
-}, Jl = /* @__PURE__ */ g({
+}, Zl = /* @__PURE__ */ g({
 	name: "NexxtTable",
 	__name: "Table",
 	props: /* @__PURE__ */ b({
@@ -7372,17 +7414,17 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 		}, te = (e, t) => e[t], ne = (e) => `cell-${e}`, re = (e, t) => {
 			e.key === "ArrowDown" ? (e.preventDefault(), _.value[Math.min(t + 1, i.rows.length - 1)]?.focus()) : e.key === "ArrowUp" && (e.preventDefault(), _.value[Math.max(t - 1, 0)]?.focus());
 		};
-		return (t, n) => (D(), u("div", Il, [d("div", {
+		return (t, n) => (D(), u("div", zl, [d("div", {
 			role: "grid",
 			"aria-colcount": e.columns.length + +!!e.selectable,
 			"aria-rowcount": e.rows.length + 1,
 			class: "min-w-full"
-		}, [d("div", Rl, [t.$slots.toolbar ? (D(), u("div", zl, [A(t.$slots, "toolbar")])) : l("", !0), d("div", {
+		}, [d("div", Vl, [t.$slots.toolbar ? (D(), u("div", Hl, [A(t.$slots, "toolbar")])) : l("", !0), d("div", {
 			class: "grid rounded-md bg-gray-50",
 			style: T({ gridTemplateColumns: E.value }),
 			role: "row",
 			"aria-rowindex": "1"
-		}, [e.selectable ? (D(), u("div", Bl, [e.selectionMode === "multiple" ? (D(), c(Si, {
+		}, [e.selectable ? (D(), u("div", Ul, [e.selectionMode === "multiple" ? (D(), c(Si, {
 			key: 0,
 			"model-value": v.value,
 			indeterminate: y.value,
@@ -7401,7 +7443,7 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 			key: 0,
 			name: p.value === t.key ? g.value === "asc" ? "angle-down" : "angle-up" : "angles-up-down",
 			class: C(["shrink-0 text-xs", p.value === t.key ? "text-cornflower-blue-600" : "text-slate-400"])
-		}, null, 8, ["name", "class"])) : l("", !0)], 42, Vl))), 128))], 4)]), d("div", Hl, [
+		}, null, 8, ["name", "class"])) : l("", !0)], 42, Wl))), 128))], 4)]), d("div", Gl, [
 			(D(!0), u(r, null, k(e.rows, (n, i) => (D(), u("div", {
 				key: i,
 				ref_for: !0,
@@ -7420,7 +7462,7 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 				tabindex: "0",
 				onClick: (e) => j(e, i),
 				onKeydown: (e) => re(e, i)
-			}, [e.selectable ? (D(), u("div", Wl, [h(Si, {
+			}, [e.selectable ? (D(), u("div", ql, [h(Si, {
 				"model-value": b(n),
 				"aria-label": `Select row ${i + 1}`,
 				"onUpdate:modelValue": (e) => S(n)
@@ -7436,30 +7478,30 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 			}, [A(t.$slots, ne(r.key), {
 				row: n,
 				value: te(n, r.key)
-			}, () => [m(M(te(n, r.key)), 1)])], 8, Gl))), 128))], 46, Ul))), 128)),
-			e.rows.length ? l("", !0) : (D(), u("div", Kl, [A(t.$slots, "empty", {}, () => [n[0] ||= m("Geen data beschikbaar", -1)])])),
+			}, () => [m(M(te(n, r.key)), 1)])], 8, Jl))), 128))], 46, Kl))), 128)),
+			e.rows.length ? l("", !0) : (D(), u("div", Yl, [A(t.$slots, "empty", {}, () => [n[0] ||= m("Geen data beschikbaar", -1)])])),
 			h(a, {
 				"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: F(() => [e.loading ? (D(), u("div", ql, [A(t.$slots, "loading", {}, () => [h(z, {
+				default: F(() => [e.loading ? (D(), u("div", Xl, [A(t.$slots, "loading", {}, () => [h(z, {
 					name: "spinner-third",
 					class: "fa-spin text-3xl text-purple-500"
 				})])])) : l("", !0)]),
 				_: 3
 			})
-		])], 8, Ll)]));
+		])], 8, Bl)]));
 	}
-}), Yl = [
+}), Ql = [
 	"data-event-source",
 	"data-event-date",
 	"date-event-type"
-], Xl = { class: "heading-3" }, Zl = ["href"], Ql = { class: "truncate group-hover:underline" }, $l = {
+], $l = { class: "heading-3" }, eu = ["href"], tu = { class: "truncate group-hover:underline" }, nu = {
 	key: 1,
 	class: "mt-1 text-sm text-gray-500"
-}, eu = /* @__PURE__ */ g({
+}, ru = /* @__PURE__ */ g({
 	name: "NexxtTimelineEvent",
 	__name: "TimelineEvent",
 	props: {
@@ -7497,20 +7539,20 @@ var ll = { render: cl }, ul = { 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), d("div", { class: C(["flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8", { "max-w-lg": e.splitView }]) }, [
-			d("span", Xl, M(n.value.label), 1),
+			d("span", $l, M(n.value.label), 1),
 			e.event.url ? (D(), u("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"
-			}, [d("span", Ql, M(e.event.description || e.event.url), 1), h(z, {
+			}, [d("span", tu, M(e.event.description || e.event.url), 1), h(z, {
 				name: "external-link",
 				class: "ml-1 h-4 w-4 text-gray-950"
-			})], 8, Zl)) : l("", !0),
-			e.event.request_reason ? (D(), u("span", $l, " Reden: " + M(e.event.request_reason), 1)) : l("", !0)
-		], 2)], 2)], 10, Yl));
+			})], 8, eu)) : l("", !0),
+			e.event.request_reason ? (D(), u("span", nu, " Reden: " + M(e.event.request_reason), 1)) : l("", !0)
+		], 2)], 2)], 10, Ql));
 	}
-}), tu = /* @__PURE__ */ g({
+}), iu = /* @__PURE__ */ g({
 	name: "NexxtTooltip",
 	__name: "Tooltip",
 	props: {
@@ -7553,13 +7595,13 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 			_: 3
 		}));
 	}
-}), nu = ["data-phase"], ru = {
+}), au = ["data-phase"], ou = {
 	key: 0,
 	class: "relative z-10"
-}, iu = { class: "flex items-center justify-between px-4 py-2" }, au = { class: "flex gap-1" }, ou = { class: "flex gap-1" }, su = { class: "text-sm font-semibold tracking-wider uppercase" }, cu = { class: "mt-2 font-medium text-xs text-gray-500" }, lu = {
+}, su = { class: "flex items-center justify-between px-4 py-2" }, cu = { class: "flex gap-1" }, lu = { class: "flex gap-1" }, uu = { class: "text-sm font-semibold tracking-wider uppercase" }, du = { class: "mt-2 font-medium text-xs text-gray-500" }, fu = {
 	key: 1,
 	class: "h-1"
-}, uu = /* @__PURE__ */ g({
+}, pu = /* @__PURE__ */ g({
 	name: "NexxtTimelinePhaseblock",
 	__name: "TimelinePhaseblock",
 	props: {
@@ -7595,14 +7637,14 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 			class: "relative z-10 flex flex-col gap-16",
 			"data-phase": e.phase.phase.value
 		}, [
-			e.index === 0 && e.isSplitView ? (D(), u("div", ru, [d("div", iu, [d("span", au, [i[1] ||= m(" Outbound ", -1), h(tu, null, {
+			e.index === 0 && e.isSplitView ? (D(), u("div", ou, [d("div", su, [d("span", cu, [i[1] ||= m(" Outbound ", -1), h(iu, null, {
 				tooltip: F(() => [...i[0] ||= [d("span", { class: "text-sm" }, "Vanuit Nexxtmove", -1)]]),
 				default: F(() => [h(z, {
 					name: "circle-info",
 					class: "h-4 w-4 text-xs text-gray-600"
 				})]),
 				_: 1
-			})]), d("span", ou, [i[3] ||= m(" Inbound ", -1), h(tu, { "as-child": "" }, {
+			})]), d("span", lu, [i[3] ||= m(" Inbound ", -1), h(iu, { "as-child": "" }, {
 				tooltip: F(() => [...i[2] ||= [d("span", { class: "text-sm" }, "Vanuit relatie", -1)]]),
 				default: F(() => [h(z, {
 					name: "circle-info",
@@ -7615,7 +7657,7 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 				key: 1,
 				class: C(["absolute right-5 bottom-0 w-0 border-l", [N(ds)[e.phase.phase.value].color, e.index === 0 ? "top-10" : "top-0"]])
 			}, null, 2)) : l("", !0),
-			(D(!0), u(r, null, k(e.phase.events, (t) => (D(), c(eu, {
+			(D(!0), u(r, null, k(e.phase.events, (t) => (D(), c(ru, {
 				key: t.id,
 				event: t,
 				"split-view": e.isSplitView
@@ -7624,36 +7666,36 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 				key: 2,
 				class: C(["relative flex flex-col items-center pt-8 pb-24 text-center", { "pl-16": !e.isSplitView }])
 			}, [
-				d("div", { class: C(["flex items-center gap-2 rounded-full px-12 py-4", [N(ds)[e.phase.phase.value].bgColor, N(ds)[e.phase.phase.value].textColor]]) }, [d("span", su, M(N(ds)[e.phase.phase.value].label), 1), o() ? (D(), c(z, {
+				d("div", { class: C(["flex items-center gap-2 rounded-full px-12 py-4", [N(ds)[e.phase.phase.value].bgColor, N(ds)[e.phase.phase.value].textColor]]) }, [d("span", uu, M(N(ds)[e.phase.phase.value].label), 1), o() ? (D(), c(z, {
 					key: 0,
 					name: o() === "up" ? "arrow-up" : "arrow-down",
 					class: "h-4 w-4 text-white"
 				}, null, 8, ["name"])) : l("", !0)], 2),
-				d("span", cu, M(a()), 1),
+				d("span", du, M(a()), 1),
 				e.isSplitView ? (D(), u("div", {
 					key: 0,
 					class: C(["mt-4 h-px w-[75%]", N(ds)[e.phase.phase.value].bgColor])
 				}, null, 2)) : l("", !0),
-				e.isLast ? l("", !0) : (D(), u("div", lu)),
+				e.isLast ? l("", !0) : (D(), u("div", fu)),
 				d("div", { class: C(["absolute top-0 bottom-0 left-5 w-px bg-linear-to-b", n.value]) }, null, 2),
 				e.isSplitView ? (D(), u("div", {
 					key: 2,
 					class: C(["absolute top-0 right-5 bottom-0 w-px bg-linear-to-b", n.value])
 				}, null, 2)) : l("", !0)
 			], 2))
-		], 8, nu));
+		], 8, au));
 	}
-}), du = ["role", "aria-live"], fu = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, pu = {
+}), mu = ["role", "aria-live"], hu = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, gu = {
 	key: 1,
 	class: "body-normal"
-}, mu = ["aria-label"], hu = {
+}, _u = ["aria-label"], vu = {
 	key: 0,
 	class: "absolute inset-0 -rotate-90 text-gray-400",
 	viewBox: "0 0 24 24",
 	width: "32",
 	height: "32",
 	"aria-hidden": "true"
-}, gu = 56.55, _u = /* @__PURE__ */ Wo(/* @__PURE__ */ g({
+}, yu = 56.55, bu = /* @__PURE__ */ Wo(/* @__PURE__ */ g({
 	name: "NexxtToast",
 	__name: "Toast",
 	props: {
@@ -7668,7 +7710,7 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 	},
 	emits: ["dismiss"],
 	setup(e, { emit: t }) {
-		te((e) => ({ v3e3d3e68: gu }));
+		te((e) => ({ v3e3d3e68: yu }));
 		let n = {
 			info: {
 				icon: "info",
@@ -7716,12 +7758,12 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 				name: a.value.icon,
 				class: "text-xl"
 			}, null, 8, ["name"])], 2),
-			d("div", fu, [
+			d("div", hu, [
 				e.title ? (D(), u("p", {
 					key: 0,
 					class: C(["heading-4", a.value.titleColor])
 				}, M(e.title), 3)) : l("", !0),
-				e.message ? (D(), u("p", pu, M(e.message), 1)) : l("", !0),
+				e.message ? (D(), u("p", gu, M(e.message), 1)) : l("", !0),
 				A(t.$slots, "default", {}, void 0, !0)
 			]),
 			e.dismissible ? (D(), u("button", {
@@ -7730,7 +7772,7 @@ var ll = { render: cl }, ul = { 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 ? (D(), u("svg", hu, [d("circle", {
+			}, [e.autoClose ? (D(), u("svg", vu, [d("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9",
@@ -7738,7 +7780,7 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 				stroke: "currentColor",
 				"stroke-width": "1.2",
 				"stroke-linecap": "round",
-				"stroke-dasharray": gu,
+				"stroke-dasharray": yu,
 				class: "timer-circle",
 				style: T({
 					animationDuration: `${e.autoClose}ms`,
@@ -7747,10 +7789,10 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 			}, null, 4)])) : l("", !0), h(z, {
 				name: "xmark",
 				class: "text-sm"
-			})], 8, mu)) : l("", !0)
-		], 42, du));
+			})], 8, _u)) : l("", !0)
+		], 42, mu));
 	}
-}), [["__scopeId", "data-v-89269eaa"]]), vu = /* @__PURE__ */ g({
+}), [["__scopeId", "data-v-89269eaa"]]), xu = /* @__PURE__ */ g({
 	name: "NexxtToaster",
 	__name: "Toaster",
 	props: {
@@ -7783,7 +7825,7 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 			default: F(() => [(D(!0), u(r, null, k(e.toasts, (e) => (D(), u("div", {
 				key: e.id,
 				class: "pointer-events-auto"
-			}, [h(_u, x({ ref_for: !0 }, e, { onDismiss: (t) => n("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
+			}, [h(bu, x({ ref_for: !0 }, e, { onDismiss: (t) => n("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
 			_: 1
 		}, 8, [
 			"class",
@@ -7793,4 +7835,4 @@ var ll = { render: cl }, ul = { class: "flex items-center justify-end self-stret
 	}
 });
 //#endregion
-export { xt as NexxtAnimatedNumber, Ct as NexxtAnnouncement, Ot as NexxtAvatar, At as NexxtButton, _i as NexxtCalendar, bi as NexxtCard, Si as NexxtCheckbox, Ci as NexxtChip, Uo as NexxtCombobox, Vo as NexxtComboboxPanel, Xo as NexxtContactInfoCard, ls as NexxtCountrySelect, hs as NexxtCustomerJourneyTile, gs as NexxtDatePicker, ws as NexxtDoughnutChart, Os as NexxtDropdownButton, yo as NexxtFloatingPanel, js as NexxtHeader, z as NexxtIcon, Ns as NexxtInfoBlock, Oo as NexxtInputField, Hs as NexxtInputSelect, Ks as NexxtModal, qs as NexxtPagination, Zs as NexxtPresenceIndicator, oc as NexxtProgressBar, _c as NexxtPropertyCard, fc as NexxtPropertyListing, Ec as NexxtSelect, Mc as NexxtSidebarMenuItem, Pc as NexxtSkeleton, Rc as NexxtSkeletonPropertyCard, Vc as NexxtSocialIcons, Gc as NexxtSocialMediaCustomTemplate, el as NexxtSocialMediaTemplate, ml as NexxtSocialMediaType, Dl as NexxtSource, Dt as NexxtSquircle, Ol as NexxtStepperHeader, Fl as NexxtTabbedContent, Jl as NexxtTable, jl as NexxtTabs, eu as NexxtTimelineEvent, uu as NexxtTimelinePhaseblock, _u as NexxtToast, vu as NexxtToaster, tu as NexxtTooltip, wl as SOURCE_MAP };
+export { xt as NexxtAnimatedNumber, Ct as NexxtAnnouncement, Ot as NexxtAvatar, At as NexxtButton, _i as NexxtCalendar, bi as NexxtCard, Si as NexxtCheckbox, Ci as NexxtChip, Uo as NexxtCombobox, Vo as NexxtComboboxPanel, Xo as NexxtContactInfoCard, ls as NexxtCountrySelect, hs as NexxtCustomerJourneyTile, gs as NexxtDatePicker, ws as NexxtDoughnutChart, Os as NexxtDropdownButton, yo as NexxtFloatingPanel, js as NexxtHeader, z as NexxtIcon, Ns as NexxtInfoBlock, Oo as NexxtInputField, Hs as NexxtInputSelect, Ks as NexxtModal, qs as NexxtPagination, Zs as NexxtPresenceIndicator, oc as NexxtProgressBar, _c as NexxtPropertyCard, fc as NexxtPropertyListing, Ec as NexxtSelect, Mc as NexxtSidebarMenuItem, Pc as NexxtSkeleton, Rc as NexxtSkeletonPropertyCard, Vc as NexxtSocialIcons, Gc as NexxtSocialMediaCustomTemplate, el as NexxtSocialMediaTemplate, ml as NexxtSocialMediaType, Dl as NexxtSource, Dt as NexxtSquircle, Ol as NexxtStepperHeader, jl as NexxtSwitch, Rl as NexxtTabbedContent, Zl as NexxtTable, Pl as NexxtTabs, ru as NexxtTimelineEvent, pu as NexxtTimelinePhaseblock, bu as NexxtToast, xu as NexxtToaster, iu as NexxtTooltip, wl as SOURCE_MAP };

package/dist/nuxt.js

@@ -42976,6 +42976,7 @@ var Vw, Hw, Uw, Ww, Gw, Kw = t((() => {
 	NexxtSource: "components/Source/Source.vue",
 	NexxtSquircle: "components/Squircle/Squircle.vue",
 	NexxtStepperHeader: "components/StepperHeader/StepperHeader.vue",
+	NexxtSwitch: "components/Switch/Switch.vue",
 	NexxtTabbedContent: "components/TabbedContent/TabbedContent.vue",
 	NexxtTable: "components/Table/Table.vue",
 	NexxtTabs: "components/Tabs/Tabs.vue",

package/package.json

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

package/src/components/Modal/Modal.vue

@@ -85,7 +85,7 @@ const sizeClass = {
             @escape-key-down="!dismissible && $event.preventDefault()"
           >
             <div
-              v-if="title || description"
+              v-if="title || description || $slots.header"
               class="flex items-start justify-between border-b border-gray-200 px-6 py-5"
             >
               <div>
@@ -93,6 +93,7 @@ const sizeClass = {
                 <DialogDescription v-if="description" class="small-normal">
                   {{ description }}
                 </DialogDescription>
+                <slot name="header" />
               </div>
               <DialogClose
                 v-if="showClose"

package/src/components/Switch/Switch.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
+import Icon from '../Icon/Icon.vue'
+
+type SwitchColor = 'blue' | 'green'
+
+interface NexxtSwitchProps {
+  labelPosition?: 'before' | 'after'
+  color?: SwitchColor
+  iconOn?: IconName
+  iconOff?: IconName
+}
+
+defineOptions({
+  name: 'NexxtSwitch',
+  inheritAttrs: false,
+})
+
+const { labelPosition = 'after', color = 'blue', iconOn, iconOff } = defineProps<NexxtSwitchProps>()
+
+const model = defineModel<boolean>()
+
+const checkedColorClasses: Record<SwitchColor, string> = {
+  blue: 'border-cornflower-blue-500 bg-cornflower-blue-500',
+  green: 'border-green-400 bg-green-400',
+}
+</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">
+      <input v-bind="$attrs" type="checkbox" class="peer sr-only" v-model="model" />
+      <span
+        :class="[
+          'absolute inset-0 overflow-hidden rounded-[30px] border transition-colors duration-200',
+          model ? checkedColorClasses[color] : 'border-gray-500 bg-gray-200',
+        ]"
+      >
+        <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',
+          ]"
+        />
+        <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',
+          ]"
+        >
+          <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" />
+        </span>
+      </span>
+    </span>
+    <slot v-if="labelPosition === 'after'" />
+  </label>
+</template>

package/src/components.json

@@ -38,6 +38,7 @@
   "NexxtSource": "components/Source/Source.vue",
   "NexxtSquircle": "components/Squircle/Squircle.vue",
   "NexxtStepperHeader": "components/StepperHeader/StepperHeader.vue",
+  "NexxtSwitch": "components/Switch/Switch.vue",
   "NexxtTabbedContent": "components/TabbedContent/TabbedContent.vue",
   "NexxtTable": "components/Table/Table.vue",
   "NexxtTabs": "components/Tabs/Tabs.vue",

package/src/index.ts

@@ -38,6 +38,7 @@ export { default as NexxtSocialMediaType } from './components/SocialMediaType/So
 export { default as NexxtSource, SOURCE_MAP } from './components/Source/Source.vue'
 export { default as NexxtSquircle } from './components/Squircle/Squircle.vue'
 export { default as NexxtStepperHeader } from './components/StepperHeader/StepperHeader.vue'
+export { default as NexxtSwitch } from './components/Switch/Switch.vue'
 export { default as NexxtTabbedContent } from './components/TabbedContent/TabbedContent.vue'
 export { default as NexxtTable } from './components/Table/Table.vue'
 export { default as NexxtTabs } from './components/Tabs/Tabs.vue'