@nexxtmove/ui 0.1.27 → 0.1.28

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as F, ref as M, computed as Q, watch as vA, createBlock as V, openBlock as E, TransitionGroup as oe, withCtx as D, createElementBlock as I, Fragment as S, renderList as R, createVNode as z, Transition as $, toDisplayString as x, normalizeClass as c, createCommentVNode as B, renderSlot as Z, createElementVNode as g, normalizeProps as gA, guardReactiveProps as sA, onMounted as iA, unref as N, nextTick as cA, mergeModels as uA, useModel as WA, mergeProps as TA, createTextVNode as b, onUnmounted as me, watchEffect as Ee, normalizeStyle as Ie, withKeys as aA, withModifiers as zA, createStaticVNode as FA, resolveDynamicComponent as de, createSlots as ge } from "vue";
+import { defineComponent as F, ref as M, computed as z, watch as vA, createBlock as V, openBlock as E, TransitionGroup as oe, withCtx as D, createElementBlock as I, Fragment as S, renderList as R, createVNode as B, Transition as $, toDisplayString as x, normalizeClass as c, createCommentVNode as Q, renderSlot as Z, createElementVNode as g, normalizeProps as gA, guardReactiveProps as sA, onMounted as iA, unref as N, nextTick as cA, mergeModels as uA, useModel as WA, mergeProps as TA, createTextVNode as b, onUnmounted as me, watchEffect as Ee, normalizeStyle as Ie, withKeys as aA, withModifiers as zA, createStaticVNode as FA, resolveDynamicComponent as de, createSlots as ge } from "vue";
 import { TooltipProvider as se, TooltipRoot as ce, TooltipTrigger as ue, TooltipPortal as ze, TooltipContent as Qe } from "reka-ui";
 const Be = /* @__PURE__ */ F({
   name: "NexxtAnimatedNumber",
@@ -9,7 +9,7 @@ const Be = /* @__PURE__ */ F({
     easing: { default: "ease-out" }
   },
   setup(A) {
-    const e = M("up"), a = Q(() => String(A.value).split("")), t = Q(() => `duration-${A.duration}`);
+    const e = M("up"), a = z(() => String(A.value).split("")), t = z(() => `duration-${A.duration}`);
     return vA(
       () => A.value,
       (i, n) => {
@@ -31,7 +31,7 @@ const Be = /* @__PURE__ */ F({
           class: "relative inline-flex h-[1.5em] w-[1ch] items-center justify-center overflow-hidden",
           "aria-hidden": "true"
         }, [
-          z($, {
+          B($, {
             "enter-active-class": `transition-transform ${t.value} ${A.easing}`,
             "leave-active-class": `absolute inset-0 transition-transform ${t.value} ${A.easing}`,
             "enter-from-class": e.value === "up" ? "translate-y-full" : "-translate-y-full",
@@ -93,7 +93,7 @@ const Be = /* @__PURE__ */ F({
         key: 0,
         name: A.icon,
         class: c(["transition-all duration-200", { "order-last": A.iconRight, "opacity-0": A.loading }])
-      }, null, 8, ["name", "class"])) : B("", !0),
+      }, null, 8, ["name", "class"])) : Q("", !0),
       e.$slots.default ? (E(), I("span", {
         key: 1,
         class: c([
@@ -104,8 +104,8 @@ const Be = /* @__PURE__ */ F({
         ])
       }, [
         Z(e.$slots, "default")
-      ], 2)) : B("", !0),
-      z($, {
+      ], 2)) : Q("", !0),
+      B($, {
         "enter-active-class": "transition-opacity duration-200",
         "enter-from-class": "opacity-0",
         "enter-to-class": "opacity-100",
@@ -115,12 +115,12 @@ const Be = /* @__PURE__ */ F({
       }, {
         default: D(() => [
           A.loading ? (E(), I("div", le, [
-            z(h, {
+            B(h, {
               name: "spinner-third",
               type: "light",
               class: "fa-spin absolute text-sm"
             })
-          ])) : B("", !0)
+          ])) : Q("", !0)
         ]),
         _: 1
       })
@@ -2089,10 +2089,10 @@ const Wa = {
   },
   emits: ["prev", "next", "openMonthPicker", "openYearPicker", "closePicker"],
   setup(A, { emit: e }) {
-    const a = A, t = e, i = Q(() => {
+    const a = A, t = e, i = z(() => {
       const o = j(a.viewDate, "MMM", { locale: a.locale }).replace(".", "").trim();
       return o.charAt(0).toUpperCase() + o.slice(1) + ".";
-    }), n = Q(() => j(a.viewDate, "yyyy")), r = {
+    }), n = z(() => j(a.viewDate, "yyyy")), r = {
       enterActiveClass: "transition-all duration-200 ease-out",
       enterFromClass: "translate-y-full",
       leaveActiveClass: "transition-all duration-200 ease-out absolute inset-x-0 top-0",
@@ -2107,7 +2107,7 @@ const Wa = {
         onClick: m[0] || (m[0] = (d) => t("prev")),
         "aria-label": "Vorige maand"
       }, [
-        z(h, {
+        B(h, {
           name: "chevron-left",
           class: "text-xs"
         })
@@ -2118,14 +2118,14 @@ const Wa = {
         onClick: m[1] || (m[1] = (d) => t("closePicker")),
         "aria-label": "Terug naar maanden"
       }, [
-        z(h, {
+        B(h, {
           name: "arrow-left",
           class: "text-xs"
         })
       ])) : (E(), I("div", Tt)),
       g("div", Ft, [
         A.pickerView === "days" ? (E(), I("div", Xt, [
-          z($, gA(sA(r)), {
+          B($, gA(sA(r)), {
             default: D(() => [
               A.monthYearPicker ? (E(), I("button", {
                 key: `button-${i.value}`,
@@ -2139,9 +2139,9 @@ const Wa = {
             ]),
             _: 1
           }, 16)
-        ])) : B("", !0),
+        ])) : Q("", !0),
         A.pickerView !== "years" ? (E(), I("div", Dt, [
-          z($, gA(sA(r)), {
+          B($, gA(sA(r)), {
             default: D(() => [
               A.monthYearPicker ? (E(), I("button", {
                 key: `button-${n.value}`,
@@ -2155,8 +2155,8 @@ const Wa = {
             ]),
             _: 1
           }, 16)
-        ])) : B("", !0),
-        A.pickerView === "years" ? (E(), I("span", Ct, "Kies jaar")) : B("", !0)
+        ])) : Q("", !0),
+        A.pickerView === "years" ? (E(), I("span", Ct, "Kies jaar")) : Q("", !0)
       ]),
       A.pickerView === "days" ? (E(), I("button", {
         key: 3,
@@ -2166,7 +2166,7 @@ const Wa = {
         onClick: m[4] || (m[4] = (d) => t("next")),
         "aria-label": "Volgende maand"
       }, [
-        z(h, {
+        B(h, {
           name: "chevron-right",
           class: "text-xs"
         })
@@ -2196,12 +2196,12 @@ const Wa = {
     const t = A, i = a, n = M([]), r = (f) => {
       const T = X(f, t.timezone), u = X(/* @__PURE__ */ new Date(), t.timezone);
       return y(T, u);
-    }, o = (f) => t.modelValue ? y(f, t.modelValue) : !1, m = (f) => t.markedDates.some((T) => y(T, f)), d = Q(() => {
+    }, o = (f) => t.modelValue ? y(f, t.modelValue) : !1, m = (f) => t.markedDates.some((T) => y(T, f)), d = z(() => {
       const f = [];
       for (let T = 0; T < t.calendarDays.length; T += 7)
         f.push(t.calendarDays.slice(T, T + 7));
       return f;
-    }), s = Q(() => t.calendarDays.length === 0 ? [] : t.calendarDays.slice(0, 7).map((f) => {
+    }), s = z(() => t.calendarDays.length === 0 ? [] : t.calendarDays.slice(0, 7).map((f) => {
       const T = j(f, "EEEEEE", { locale: t.locale });
       return T.charAt(0).toUpperCase() + T.slice(1);
     })), p = (f, T) => {
@@ -2288,7 +2288,7 @@ const Wa = {
                 "absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full",
                 o(v) ? "bg-white" : "bg-cornflower-blue-500"
               ])
-            }, null, 2)) : B("", !0)
+            }, null, 2)) : Q("", !0)
           ], 42, Vt)
         ], 8, Mt))), 128))
       ]))), 128))
@@ -2310,7 +2310,7 @@ const Wa = {
   },
   emits: ["select"],
   setup(A, { emit: e }) {
-    const a = A, t = e, i = Q(
+    const a = A, t = e, i = z(
       () => Array.from({ length: 12 }, (m, d) => {
         const s = X(new Date(Date.UTC(a.viewYear, d, 1)), a.timezone), p = j(s, "LLL", { locale: a.locale }).replace(".", "").trim();
         return { index: d, label: p.charAt(0).toUpperCase() + p.slice(1) };
@@ -2351,7 +2351,7 @@ const Wa = {
   },
   emits: ["select"],
   setup(A, { emit: e }) {
-    const a = A, t = e, i = M(null), n = Q(() => {
+    const a = A, t = e, i = M(null), n = z(() => {
       const o = a.minDate ? X(a.minDate, a.timezone).getFullYear() : a.viewYear - 100, m = a.maxDate ? X(a.maxDate, a.timezone).getFullYear() : a.viewYear + 20;
       return Array.from({ length: m - o + 1 }, (d, s) => o + s);
     }), r = (o) => {
@@ -2409,7 +2409,7 @@ const Wa = {
     vA(a, (P) => {
       P && (i.value = X(new Date(P), A.timezone));
     });
-    const m = Q(() => {
+    const m = z(() => {
       const P = _(eA(i.value), { weekStartsOn: 1 }), w = Pe(pA(i.value), { weekStartsOn: 1 });
       return Ce({ start: P, end: w });
     }), d = (P) => {
@@ -2428,12 +2428,12 @@ const Wa = {
     }, f = (P) => {
       const w = X(new Date(Date.UTC(P, i.value.getUTCMonth(), 1)), A.timezone);
       i.value = w, n.value = "months";
-    }, T = Q(() => {
+    }, T = z(() => {
       if (n.value !== "days") return !1;
       if (!A.minDate) return !0;
       const P = VA(i.value);
       return !MA(pA(P), W(X(A.minDate, A.timezone)));
-    }), u = Q(() => {
+    }), u = z(() => {
       if (n.value !== "days") return !1;
       if (!A.maxDate) return !0;
       const P = QA(i.value, 1);
@@ -2466,11 +2466,11 @@ const Wa = {
         leaveActiveClass: "transition-all duration-200 ease-in absolute inset-0",
         leaveToClass: "translate-x-full opacity-0"
       }
-    }, ne = Q(
+    }, ne = z(
       () => o.value === "fade" ? te : ie[o.value]
     );
     return (P, w) => (E(), I("div", Kt, [
-      z(Nt, {
+      B(Nt, {
         "view-date": i.value,
         "picker-view": n.value,
         "month-year-picker": A.monthYearPicker,
@@ -2486,7 +2486,7 @@ const Wa = {
       g("div", {
         class: c(["relative", n.value === "days" && "overflow-hidden"])
       }, [
-        z($, TA(ne.value, {
+        B($, TA(ne.value, {
           mode: o.value === "fade" ? "out-in" : void 0
         }), {
           default: D(() => [
@@ -2519,7 +2519,7 @@ const Wa = {
               "max-date": A.maxDate,
               timezone: A.timezone,
               onSelect: f
-            }, null, 8, ["view-year", "min-date", "max-date", "timezone"])) : B("", !0)
+            }, null, 8, ["view-year", "min-date", "max-date", "timezone"])) : Q("", !0)
           ]),
           _: 1
         }, 16, ["mode"])
@@ -2533,7 +2533,7 @@ const Wa = {
     variant: { default: "default" }
   },
   setup(A) {
-    const e = Q(() => {
+    const e = z(() => {
       switch (A.variant) {
         case "warning":
           return "bg-orange-500";
@@ -2581,7 +2581,7 @@ const Wa = {
       Selectie: "handshake",
       Transactie: "pencil-mechanical",
       Wonen: "house-heart"
-    }, a = Q(() => A.title && e[A.title] || null), t = Q(() => {
+    }, a = z(() => A.title && e[A.title] || null), t = z(() => {
       const i = [];
       if (A.title && i.push(A.title), A.amount !== void 0 && i.push(`${A.amount} contacten`), A.percentage !== void 0) {
         const n = A.percentage > 0 ? "+" : "", r = A.percentageExplanaition ? ` ${A.percentageExplanaition}` : "";
@@ -2595,31 +2595,31 @@ const Wa = {
       class: c(["flex cursor-pointer rounded-xl bg-white outline outline-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500", a.value ? "gap-6 p-1.5" : "p-4"])
     }, [
       a.value ? (E(), I("div", jt, [
-        z(h, {
+        B(h, {
           name: a.value,
           class: "text-2xl text-purple-500",
           "aria-hidden": "true"
         }, null, 8, ["name"])
-      ])) : B("", !0),
+      ])) : Q("", !0),
       g("div", {
         class: c(["flex flex-col items-start gap-1", a.value ? "py-6 pr-4" : ""])
       }, [
-        A.title ? (E(), I("span", $t, x(A.title), 1)) : B("", !0),
+        A.title ? (E(), I("span", $t, x(A.title), 1)) : Q("", !0),
         A.amount ? (E(), I("span", {
           key: 1,
           class: c(["heading-1", a.value ? "text-purple-500" : "text-sapphire-900"])
-        }, x(A.amount), 3)) : B("", !0),
+        }, x(A.amount), 3)) : Q("", !0),
         A.percentage ? (E(), I("div", _t, [
           g("span", {
             class: c(["extra-small-semibold", A.percentage > 0 ? "text-green-500" : "text-brick-500"])
           }, [
             A.percentage > 0 ? (E(), I(S, { key: 0 }, [
               b("+")
-            ], 64)) : B("", !0),
+            ], 64)) : Q("", !0),
             b(x(A.percentage) + "%", 1)
           ], 2),
-          A.percentageExplanaition ? (E(), I("span", Ai, x(A.percentageExplanaition), 1)) : B("", !0)
-        ])) : B("", !0)
+          A.percentageExplanaition ? (E(), I("span", Ai, x(A.percentageExplanaition), 1)) : Q("", !0)
+        ])) : Q("", !0)
       ], 2)
     ], 10, Lt));
   }
@@ -2643,7 +2643,7 @@ const Wa = {
   }),
   emits: ["update:modelValue"],
   setup(A) {
-    const e = WA(A, "modelValue"), a = A, t = /* @__PURE__ */ new Set(["placeholder", "anchor", "autoClose"]), i = Q(() => ({
+    const e = WA(A, "modelValue"), a = A, t = /* @__PURE__ */ new Set(["placeholder", "anchor", "autoClose"]), i = z(() => ({
       timezone: "UTC",
       ...Object.fromEntries(
         Object.entries(a).filter(([O]) => !t.has(O))
@@ -2662,12 +2662,12 @@ const Wa = {
       r.value && !r.value.contains(u.target) && (n.value = !1);
     };
     iA(() => document.addEventListener("mousedown", p)), me(() => document.removeEventListener("mousedown", p));
-    const f = Q(() => ({
+    const f = z(() => ({
       "bottom-right": "top-full right-0 mt-2 origin-top-right",
       "bottom-left": "top-full left-0 mt-2 origin-top-left",
       "top-right": "bottom-full right-0 mb-2 origin-bottom-right",
       "top-left": "bottom-full left-0 mb-2 origin-bottom-left"
-    })[a.anchor]), T = Q(() => {
+    })[a.anchor]), T = z(() => {
       const u = a.anchor.startsWith("bottom"), O = {
         "bottom-left": "origin-top-left",
         "bottom-right": "origin-top-right",
@@ -2697,7 +2697,7 @@ const Wa = {
           isOpen: n.value,
           toggle: () => n.value = !n.value
         }, () => [
-          z(qA, {
+          B(qA, {
             icon: "calendar",
             variant: "secondary",
             "aria-expanded": n.value,
@@ -2711,7 +2711,7 @@ const Wa = {
           }, 8, ["aria-expanded"])
         ])
       ], 512),
-      z($, gA(sA(T.value)), {
+      B($, gA(sA(T.value)), {
         default: D(() => [
           n.value ? (E(), I("div", {
             key: 0,
@@ -2720,11 +2720,11 @@ const Wa = {
             tabindex: "-1",
             class: c(["absolute z-50 outline-none", f.value])
           }, [
-            z(Wt, TA({
+            B(Wt, TA({
               modelValue: e.value,
               "onUpdate:modelValue": O[1] || (O[1] = (v) => e.value = v)
             }, i.value, { onSelect: d }), null, 16, ["modelValue"])
-          ], 2)) : B("", !0)
+          ], 2)) : Q("", !0)
         ]),
         _: 1
       }, 16)
@@ -2738,7 +2738,7 @@ const Wa = {
   __name: "Header",
   props: {
     title: {},
-    backButtonText: { default: "Back" },
+    backButtonText: {},
     backButtonAction: { type: Function, default: () => {
       window.history.back();
     } }
@@ -2748,7 +2748,8 @@ const Wa = {
       class: c(["header flex items-center", e.$slots.center ? "grid grid-cols-3" : ""])
     }, [
       g("div", ei, [
-        z(qA, {
+        A.backButtonText ? (E(), V(qA, {
+          key: 0,
           class: "shrink-0",
           variant: "secondary",
           onClick: A.backButtonAction
@@ -2757,18 +2758,18 @@ const Wa = {
             b(x(A.backButtonText), 1)
           ]),
           _: 1
-        }, 8, ["onClick"]),
+        }, 8, ["onClick"])) : Q("", !0),
         g("span", ai, x(A.title), 1)
       ]),
       e.$slots.center ? (E(), I("div", ti, [
         Z(e.$slots, "center")
-      ])) : B("", !0),
+      ])) : Q("", !0),
       e.$slots.right ? (E(), I("div", {
         key: 1,
         class: c(e.$slots.center ? "col-span-1 col-start-3 flex justify-end" : "ml-auto")
       }, [
         Z(e.$slots, "right")
-      ], 2)) : B("", !0)
+      ], 2)) : Q("", !0)
     ], 2));
   }
 }), ni = { class: "p-5" }, on = /* @__PURE__ */ F({
@@ -2779,7 +2780,7 @@ const Wa = {
     color: { default: "green" }
   },
   setup(A) {
-    const e = Q(() => {
+    const e = z(() => {
       switch (A.color) {
         case "green":
           return {
@@ -2824,7 +2825,7 @@ const Wa = {
         g("div", {
           class: c(["flex aspect-square h-10 items-center justify-center rounded-3xl", e.value.icon])
         }, [
-          z(h, {
+          B(h, {
             name: A.icon,
             class: "text-xl text-white"
           }, null, 8, ["name"])
@@ -2854,7 +2855,7 @@ const Wa = {
   },
   emits: ["update:currentStep"],
   setup(A) {
-    const e = Q(() => Math.min(Math.max(0, A.currentStep), Math.max(0, A.steps - 1))), a = Q(() => A.steps > 0 ? e.value + 1 : 0), t = Q(() => A.steps <= 1 ? A.steps === 1 ? 100 : 0 : e.value / (A.steps - 1) * 100), i = Q(() => !!A.stepTitles?.length);
+    const e = z(() => Math.min(Math.max(0, A.currentStep), Math.max(0, A.steps - 1))), a = z(() => A.steps > 0 ? e.value + 1 : 0), t = z(() => A.steps <= 1 ? A.steps === 1 ? 100 : 0 : e.value / (A.steps - 1) * 100), i = z(() => !!A.stepTitles?.length);
     return Ee(() => {
       A.stepTitles && A.stepTitles.length !== A.steps && console.warn(
         `[NexxtProgressBar] The "stepTitles" array length (${A.stepTitles.length}) must match the "steps" prop (${A.steps}).`
@@ -2878,9 +2879,9 @@ const Wa = {
             }, null, 4)
           ], 8, Ei),
           i.value ? (E(), I("div", Ii, [
-            z(Be, { value: a.value }, null, 8, ["value"]),
+            B(Be, { value: a.value }, null, 8, ["value"]),
             g("span", null, "/" + x(A.steps), 1)
-          ])) : B("", !0)
+          ])) : Q("", !0)
         ]),
         i.value ? (E(), I("ol", di, [
           (E(!0), I(S, null, R(A.stepTitles, (o, m) => (E(), I("li", {
@@ -2899,7 +2900,7 @@ const Wa = {
               aA(zA((d) => m < e.value && n.$emit("update:currentStep", m), ["prevent"]), ["space"])
             ]
           }, x(o), 43, gi))), 128))
-        ])) : B("", !0)
+        ])) : Q("", !0)
       ])
     ]));
   }
@@ -2932,7 +2933,7 @@ const Wa = {
       x: "bg-brands-x",
       google: "bg-brands-google",
       tiktok: "bg-brands-tiktok"
-    }, i = Q(
+    }, i = z(
       () => a.filter((n) => e[n.name])
     );
     return (n, r) => (E(), I("ul", ci, [
@@ -2941,7 +2942,7 @@ const Wa = {
         class: c(["inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white", t[o.name]]),
         "aria-label": o.label
       }, [
-        z(h, {
+        B(h, {
           name: o.icon,
           type: "brands",
           class: "text-[10px] text-white",
@@ -3000,14 +3001,14 @@ const Wa = {
   },
   emits: ["click"],
   setup(A, { emit: e }) {
-    const a = e, t = M(null), i = Q(() => A.mediaType !== "video" ? void 0 : {
+    const a = e, t = M(null), i = z(() => A.mediaType !== "video" ? void 0 : {
       mp4: "video/mp4",
       webm: "video/webm",
       ogg: "video/ogg",
       mov: "video/quicktime",
       avi: "video/x-msvideo",
       mkv: "video/x-matroska"
-    }[A.mediaExtension || ""] || "video/mp4"), n = Q(() => A.aspectRatio ? A.aspectRatio.startsWith("aspect-") ? A.aspectRatio.replace(":", "/") : `aspect-${A.aspectRatio.replace(":", "/")}` : A.mediaType === "video" ? "aspect-9/16" : ""), r = () => {
+    }[A.mediaExtension || ""] || "video/mp4"), n = z(() => A.aspectRatio ? A.aspectRatio.startsWith("aspect-") ? A.aspectRatio.replace(":", "/") : `aspect-${A.aspectRatio.replace(":", "/")}` : A.mediaType === "video" ? "aspect-9/16" : ""), r = () => {
       t.value && t.value.play();
     }, o = () => {
       t.value && t.value.pause();
@@ -3060,7 +3061,7 @@ const Wa = {
         g("div", {
           class: c(["flex aspect-square items-center justify-center rounded-full px-2", A.variant === "video" ? "bg-purple-500" : "bg-cornflower-blue-500"])
         }, [
-          z(h, {
+          B(h, {
             name: "check",
             class: "ml-auto block shrink-0 text-3xl text-white"
           })
@@ -3073,7 +3074,7 @@ const Wa = {
           g("div", Xi, x(A.name), 1),
           g("div", Di, x(A.type), 1)
         ]),
-        z(h, {
+        B(h, {
           name: A.variant === "post" ? "image" : A.variant === "video" ? "play-circle" : "images",
           class: "mb-1 ml-auto block shrink-0 self-end text-lg"
         }, null, 8, ["name"])
@@ -3124,11 +3125,11 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
       post: "Post",
       reel: "TikTok & Reel",
       story: "Story"
-    }, i = Q(() => ({
+    }, i = z(() => ({
       post: wi,
       reel: Pi,
       story: Vi
-    })[A.variant]), n = Q(() => {
+    })[A.variant]), n = z(() => {
       if (A.icons)
         return A.icons.map((o) => o === "twitter" ? "x" : o).reduce(
           (o, m) => (o[m] = !0, o),
@@ -3170,8 +3171,8 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
             b(x(A.chip), 1)
           ]),
           _: 1
-        })) : B("", !0),
-        z(zi, TA({ class: "ml-auto" }, n.value, { "aria-hidden": "true" }), null, 16)
+        })) : Q("", !0),
+        B(zi, TA({ class: "ml-auto" }, n.value, { "aria-hidden": "true" }), null, 16)
       ]),
       g("div", Yi, [
         (E(), V(de(i.value), {
@@ -3190,7 +3191,7 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
               type: "solid",
               class: "absolute top-1/2 -translate-x-[calc(100%+4px)] -translate-y-[calc(50%+1px)] text-white",
               "aria-hidden": "true"
-            })) : B("", !0),
+            })) : Q("", !0),
             b(" " + x(A.label ?? t[A.variant]), 1)
           ])
         ])
@@ -3217,7 +3218,7 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
       A.steps ? {
         name: "center",
         fn: D(() => [
-          z(si, {
+          B(si, {
             class: "w-full",
             steps: A.steps.length,
             "step-titles": A.steps,
@@ -3439,7 +3440,7 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
       label: "Gebeurtenis",
       icon: "info",
       color: "bg-gray-500"
-    }, a = Q(() => bi[t.event.type] || { ...e, label: t.event.type }), t = A, i = Q(() => {
+    }, a = z(() => bi[t.event.type] || { ...e, label: t.event.type }), t = A, i = z(() => {
       const r = new Date(t.event.happened_at), o = r.toLocaleDateString("nl-NL", {
         day: "numeric",
         month: "short",
@@ -3449,7 +3450,7 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
         minute: "2-digit"
       });
       return `${o} om ${m}`;
-    }), n = Q(() => t.splitView && t.event.direction === "inbound");
+    }), n = z(() => t.splitView && t.event.direction === "inbound");
     return (r, o) => (E(), I("div", {
       "data-event-source": A.event.direction,
       "data-event-date": A.event.happened_at,
@@ -3471,7 +3472,7 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
         g("div", {
           class: c(["flex h-10 w-10 shrink-0 items-center justify-center rounded-full", [a.value.color]])
         }, [
-          z(h, {
+          B(h, {
             name: a.value.icon,
             type: a.value.icon === "whatsapp" ? "brands" : "light",
             class: "flex h-6 w-6 text-xl text-white"
@@ -3488,12 +3489,12 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
             class: "group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
           }, [
             g("span", Ji, x(A.event.description || A.event.url), 1),
-            z(h, {
+            B(h, {
               name: "external-link",
               class: "ml-1 h-4 w-4 text-gray-950"
             })
-          ], 8, Gi)) : B("", !0),
-          A.event.request_reason ? (E(), I("span", Ki, " Reden: " + x(A.event.request_reason), 1)) : B("", !0)
+          ], 8, Gi)) : Q("", !0),
+          A.event.request_reason ? (E(), I("span", Ki, " Reden: " + x(A.event.request_reason), 1)) : Q("", !0)
         ], 2)
       ], 2)
     ], 10, Ri));
@@ -3511,20 +3512,20 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
   setup(A) {
     return (e, a) => (E(), V(N(se), null, {
       default: D(() => [
-        z(N(ce), {
+        B(N(ce), {
           "delay-duration": A.delay,
           "disable-hoverable-content": A.disableHoverableContent
         }, {
           default: D(() => [
-            z(N(ue), { "as-child": "" }, {
+            B(N(ue), { "as-child": "" }, {
               default: D(() => [
                 Z(e.$slots, "default")
               ]),
               _: 3
             }),
-            z(N(ze), null, {
+            B(N(ze), null, {
               default: D(() => [
-                z(N(Qe), {
+                B(N(Qe), {
                   side: A.side,
                   "side-offset": A.sideOffset,
                   align: A.align,
@@ -3562,7 +3563,7 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
     isLast: { type: Boolean }
   },
   setup(A) {
-    const e = A, a = Q(() => {
+    const e = A, a = z(() => {
       const r = e.phase.phase.value, o = e.phases[e.index + 1];
       if (!o) return "";
       const m = J[r].fromColor, d = J[o.phase.value].toColor;
@@ -3593,12 +3594,12 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
         g("div", Li, [
           g("span", ji, [
             o[1] || (o[1] = b(" Outbound ", -1)),
-            z(KA, null, {
+            B(KA, null, {
               tooltip: D(() => [...o[0] || (o[0] = [
                 g("span", { class: "text-sm" }, "Vanuit Nexxtmove", -1)
               ])]),
               default: D(() => [
-                z(h, {
+                B(h, {
                   name: "circle-info",
                   class: "h-4 w-4 text-xs text-gray-600"
                 })
@@ -3608,12 +3609,12 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
           ]),
           g("span", $i, [
             o[3] || (o[3] = b(" Inbound ", -1)),
-            z(KA, { "as-child": "" }, {
+            B(KA, { "as-child": "" }, {
               tooltip: D(() => [...o[2] || (o[2] = [
                 g("span", { class: "text-sm" }, "Vanuit relatie", -1)
               ])]),
               default: D(() => [
-                z(h, {
+                B(h, {
                   name: "circle-info",
                   class: "h-4 w-4 text-xs text-gray-600"
                 })
@@ -3622,14 +3623,14 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
             })
           ])
         ])
-      ])) : B("", !0),
+      ])) : Q("", !0),
       g("div", {
         class: c(["absolute top-0 bottom-0 left-5 w-0 border-l", N(J)[A.phase.phase.value].color])
       }, null, 2),
       A.isSplitView ? (E(), I("div", {
         key: 1,
         class: c(["absolute top-0 right-5 bottom-0 w-0 border-l", N(J)[A.phase.phase.value].color])
-      }, null, 2)) : B("", !0),
+      }, null, 2)) : Q("", !0),
       (E(!0), I(S, null, R(A.phase.events, (m) => (E(), V(Wi, {
         key: m.id,
         event: m,
@@ -3647,22 +3648,22 @@ const Vi = { render: Mi }, Hi = { class: "flex items-center justify-end self-str
             key: 0,
             name: n() === "up" ? "arrow-up" : "arrow-down",
             class: "h-4 w-4 text-white"
-          }, null, 8, ["name"])) : B("", !0)
+          }, null, 8, ["name"])) : Q("", !0)
         ], 2),
         g("span", An, x(i()), 1),
         A.isSplitView ? (E(), I("div", {
           key: 0,
           class: c(["mt-4 h-px w-[75%]", N(J)[A.phase.phase.value].bgColor])
-        }, null, 2)) : B("", !0),
-        A.isLast ? B("", !0) : (E(), I("div", en)),
+        }, null, 2)) : Q("", !0),
+        A.isLast ? Q("", !0) : (E(), I("div", en)),
         g("div", {
           class: c(["absolute top-0 bottom-0 left-5 w-[1px] bg-linear-to-b", a.value])
         }, null, 2),
         A.isSplitView ? (E(), I("div", {
           key: 2,
           class: c(["absolute top-0 right-5 bottom-0 w-[1px] bg-linear-to-b", a.value])
-        }, null, 2)) : B("", !0)
-      ], 2)) : B("", !0)
+        }, null, 2)) : Q("", !0)
+      ], 2)) : Q("", !0)
     ], 8, qi));
   }
 });

package/package.json

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

package/src/components/Header/Header.stories.ts

@@ -23,6 +23,12 @@ export const Default: Story = {
   },
 }
 
+export const WithoutBackButton: Story = {
+  args: {
+    title: 'Header Title',
+  },
+}
+
 export const WithSlots: Story = {
   args: {
     title: 'Header Title',

package/src/components/Header/Header.test.ts

@@ -15,10 +15,11 @@ describe('Header', () => {
     expect(wrapper.find('span.heading-4').text()).toBe('My Page Title')
   })
 
-  it('renders the back button with default text', () => {
+  it('renders the back button with explicit text', () => {
     const wrapper = mount(Header, {
       props: {
         title: 'Test',
+        backButtonText: 'Back',
       },
     })
 
@@ -28,6 +29,17 @@ describe('Header', () => {
     expect(button.props('variant')).toBe('secondary')
   })
 
+  it('does not render the back button when backButtonText is not provided', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+    })
+
+    const button = wrapper.findComponent(Button)
+    expect(button.exists()).toBe(false)
+  })
+
   it('renders the back button with custom text', () => {
     const wrapper = mount(Header, {
       props: {
@@ -45,6 +57,7 @@ describe('Header', () => {
     const wrapper = mount(Header, {
       props: {
         title: 'Test',
+        backButtonText: 'Back',
         backButtonAction,
       },
     })
@@ -61,6 +74,7 @@ describe('Header', () => {
     const wrapper = mount(Header, {
       props: {
         title: 'Test',
+        backButtonText: 'Back',
       },
     })
 

package/src/components/Header/Header.vue

@@ -12,7 +12,7 @@ defineOptions({
 })
 
 const {
-  backButtonText = 'Back',
+  backButtonText,
   backButtonAction = () => {
     window.history.back()
   },
@@ -22,9 +22,13 @@ const {
 <template>
   <div class="header flex items-center" :class="$slots.center ? 'grid grid-cols-3' : ''">
     <div class="flex max-w-full items-center justify-start gap-4">
-      <Button class="shrink-0" variant="secondary" @click="backButtonAction">{{
-        backButtonText
-      }}</Button>
+      <Button
+        v-if="backButtonText"
+        class="shrink-0"
+        variant="secondary"
+        @click="backButtonAction"
+        >{{ backButtonText }}</Button
+      >
       <span class="block truncate heading-4 text-sapphire-500">
         {{ title }}
       </span>