@nexxtmove/ui 0.1.8 → 0.1.10

package/dist/index.d.ts

@@ -6,11 +6,13 @@ import { PublicProps } from 'vue';
 
 declare const __VLS_component: DefineComponent<NexxtButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
-declare const __VLS_component_2: DefineComponent<NexxtHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component_2: DefineComponent<NexxtChipProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtChipProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
 
-declare const __VLS_component_3: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component_3: DefineComponent<NexxtHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_4: DefineComponent<NexxtStepperHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_4: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+
+declare const __VLS_component_5: DefineComponent<NexxtStepperHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:currentStep": (...args: any[]) => void;
 }, string, PublicProps, Readonly<NexxtStepperHeaderProps> & Readonly<{
 "onUpdate:currentStep"?: ((...args: any[]) => any) | undefined;
@@ -32,6 +34,15 @@ declare function __VLS_template(): {
 };
 
 declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+
+declare function __VLS_template_3(): {
     attrs: Partial<{}>;
     slots: {
         center?(_: {}): any;
@@ -41,7 +52,7 @@ declare function __VLS_template_2(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_3(): {
+declare function __VLS_template_4(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
@@ -50,7 +61,7 @@ declare function __VLS_template_3(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_4(): {
+declare function __VLS_template_5(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
@@ -67,6 +78,8 @@ declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
 
 declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
 
+declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -91,6 +104,12 @@ declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_5<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type EasingFunction = 'ease-linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
 
 declare type IconType = 'regular' | 'solid' | 'light' | 'duotone' | 'brands';
@@ -108,7 +127,13 @@ declare interface NexxtButtonProps {
     buttonType?: 'button' | 'submit' | 'reset';
 }
 
-export declare const NexxtHeader: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+export declare const NexxtChip: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+declare interface NexxtChipProps {
+    variant?: 'default' | 'warning' | 'success' | 'danger';
+}
+
+export declare const NexxtHeader: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
 declare interface NexxtHeaderProps {
     title: string;
@@ -123,7 +148,7 @@ declare interface NexxtIconProps {
     type?: IconType;
 }
 
-export declare const NexxtInfoBlock: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+export declare const NexxtInfoBlock: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 
 export declare const NexxtProgressBar: DefineComponent<NexxtProgressBarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:currentStep": (...args: any[]) => void;
@@ -138,7 +163,18 @@ declare interface NexxtProgressBarProps {
     stepTitles?: string[];
 }
 
-export declare const NexxtStepperHeader: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+export declare const NexxtSocialIcons: DefineComponent<NexxtSocialIconsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtSocialIconsProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLUListElement>;
+
+declare interface NexxtSocialIconsProps {
+    facebook?: boolean;
+    instagram?: boolean;
+    linkedin?: boolean;
+    x?: boolean;
+    google?: boolean;
+    tiktok?: boolean;
+}
+
+export declare const NexxtStepperHeader: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
 declare interface NexxtStepperHeaderProps {
     title: string;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as d, ref as j, computed as m, watch as C, createBlock as x, openBlock as a, TransitionGroup as A, withCtx as h, createElementBlock as n, Fragment as B, renderList as S, createVNode as c, Transition as T, toDisplayString as b, normalizeClass as o, createCommentVNode as u, renderSlot as p, createElementVNode as i, createTextVNode as N, watchEffect as H, normalizeStyle as I, withKeys as w, withModifiers as M, createSlots as P } from "vue";
-const V = /* @__PURE__ */ d({
+import { defineComponent as u, ref as j, computed as m, watch as C, createBlock as k, openBlock as a, TransitionGroup as I, withCtx as h, createElementBlock as s, Fragment as $, renderList as w, createVNode as f, Transition as T, toDisplayString as y, normalizeClass as o, createCommentVNode as b, renderSlot as p, createElementVNode as r, createTextVNode as B, watchEffect as A, normalizeStyle as H, withKeys as N, withModifiers as P, createSlots as M } from "vue";
+const V = /* @__PURE__ */ u({
   __name: "AnimatedNumber",
   props: {
     value: {},
@@ -7,39 +7,39 @@ const V = /* @__PURE__ */ d({
     easing: { default: "ease-out" }
   },
   setup(e) {
-    const t = j("up"), s = m(() => String(e.value).split("")), r = m(() => `duration-${e.duration}`);
+    const t = j("up"), n = m(() => String(e.value).split("")), l = m(() => `duration-${e.duration}`);
     return C(
       () => e.value,
-      (f, v) => {
-        t.value = f > v ? "up" : "down";
+      (c, v) => {
+        t.value = c > v ? "up" : "down";
       }
-    ), (f, v) => (a(), x(A, {
+    ), (c, v) => (a(), k(I, {
       tag: "div",
       class: "relative flex shrink-0 items-center tabular-nums",
       "aria-label": e.value,
-      "enter-active-class": `transition-all ${r.value} ${e.easing}`,
-      "leave-active-class": `absolute transition-all ${r.value} ${e.easing}`,
+      "enter-active-class": `transition-all ${l.value} ${e.easing}`,
+      "leave-active-class": `absolute transition-all ${l.value} ${e.easing}`,
       "enter-from-class": t.value === "up" ? "translate-y-full opacity-0" : "-translate-y-full opacity-0",
       "leave-to-class": t.value === "up" ? "-translate-y-full opacity-0" : "translate-y-full opacity-0",
       "move-class": "transition-all duration-500 ease-in-out"
     }, {
       default: h(() => [
-        (a(!0), n(B, null, S(s.value, (g, y) => (a(), n("div", {
-          key: y,
+        (a(!0), s($, null, w(n.value, (d, g) => (a(), s("div", {
+          key: g,
           class: "relative inline-flex h-[1.5em] w-[1ch] items-center justify-center overflow-hidden",
           "aria-hidden": "true"
         }, [
-          c(T, {
-            "enter-active-class": `transition-transform ${r.value} ${e.easing}`,
-            "leave-active-class": `absolute inset-0 transition-transform ${r.value} ${e.easing}`,
+          f(T, {
+            "enter-active-class": `transition-transform ${l.value} ${e.easing}`,
+            "leave-active-class": `absolute inset-0 transition-transform ${l.value} ${e.easing}`,
             "enter-from-class": t.value === "up" ? "translate-y-full" : "-translate-y-full",
             "leave-to-class": t.value === "up" ? "-translate-y-full" : "translate-y-full"
           }, {
             default: h(() => [
-              (a(), n("span", {
-                key: g,
+              (a(), s("span", {
+                key: d,
                 class: "flex h-full w-full items-center justify-center"
-              }, b(g), 1))
+              }, y(d), 1))
             ]),
             _: 2
           }, 1032, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
@@ -48,7 +48,7 @@ const V = /* @__PURE__ */ d({
       _: 1
     }, 8, ["aria-label", "enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"]));
   }
-}), $ = /* @__PURE__ */ d({
+}), x = /* @__PURE__ */ u({
   name: "NexxtIcon",
   __name: "Icon",
   props: {
@@ -56,14 +56,14 @@ const V = /* @__PURE__ */ d({
     type: { default: "light" }
   },
   setup(e) {
-    return (t, s) => (a(), n("i", {
+    return (t, n) => (a(), s("i", {
       class: o([`fa-${e.type}`, `fa-${e.name}`, "items-center", "justify-center"])
     }, null, 2));
   }
 }), z = ["type", "disabled", "data-variant"], K = {
   key: 0,
   class: /* @__PURE__ */ o(["absolute inset-0 flex items-center justify-center rounded-lg"])
-}, E = /* @__PURE__ */ d({
+}, L = /* @__PURE__ */ u({
   name: "NexxtButton",
   __name: "Button",
   props: {
@@ -75,7 +75,7 @@ const V = /* @__PURE__ */ d({
     buttonType: { default: "button" }
   },
   setup(e) {
-    return (t, s) => (a(), n("button", {
+    return (t, n) => (a(), s("button", {
       type: e.buttonType,
       disabled: e.disabled,
       class: o([
@@ -87,12 +87,12 @@ const V = /* @__PURE__ */ d({
       ]),
       "data-variant": e.variant
     }, [
-      e.icon ? (a(), x($, {
+      e.icon ? (a(), k(x, {
         key: 0,
         name: e.icon,
         class: o(["transition-all duration-200", { "order-last": e.iconRight, "opacity-0": e.loading }])
-      }, null, 8, ["name", "class"])) : u("", !0),
-      t.$slots.default ? (a(), n("span", {
+      }, null, 8, ["name", "class"])) : b("", !0),
+      t.$slots.default ? (a(), s("span", {
         key: 1,
         class: o([
           "inline-block transition-all duration-200",
@@ -102,8 +102,8 @@ const V = /* @__PURE__ */ d({
         ])
       }, [
         p(t.$slots, "default")
-      ], 2)) : u("", !0),
-      c(T, {
+      ], 2)) : b("", !0),
+      f(T, {
         "enter-active-class": "transition-opacity duration-200",
         "enter-from-class": "opacity-0",
         "enter-to-class": "opacity-100",
@@ -112,22 +112,51 @@ const V = /* @__PURE__ */ d({
         "leave-to-class": "opacity-0"
       }, {
         default: h(() => [
-          e.loading ? (a(), n("div", K, [
-            c($, {
+          e.loading ? (a(), s("div", K, [
+            f(x, {
               name: "spinner-third",
               type: "light",
               class: "fa-spin absolute text-sm"
             })
-          ])) : u("", !0)
+          ])) : b("", !0)
         ]),
         _: 1
       })
     ], 10, z));
   }
-}), L = { class: "flex max-w-full items-center justify-start gap-4" }, q = { class: "block truncate heading-4 text-sapphire-500" }, D = {
+}), E = { class: "justify-start text-center extra-small-semibold text-white" }, le = /* @__PURE__ */ u({
+  name: "NexxtChip",
+  __name: "Chip",
+  props: {
+    variant: { default: "default" }
+  },
+  setup(e) {
+    const t = m(() => {
+      switch (e.variant) {
+        case "warning":
+          return "bg-orange-500";
+        case "success":
+          return "bg-green-500";
+        case "danger":
+          return "bg-brick-500";
+        default:
+          return "bg-cornflower-blue-600";
+      }
+    });
+    return (n, l) => (a(), s("span", {
+      class: o(["inline-flex h-5 flex-col items-center justify-center gap-2.5 rounded-[200px] px-4", t.value])
+    }, [
+      r("span", E, [
+        p(n.$slots, "default", {}, () => [
+          l[0] || (l[0] = B("Chip", -1))
+        ])
+      ])
+    ], 2));
+  }
+}), F = { class: "flex max-w-full items-center justify-start gap-4" }, G = { class: "block truncate heading-4 text-sapphire-500" }, q = {
   key: 0,
   class: "col-span-1 col-start-2 flex justify-center"
-}, F = /* @__PURE__ */ d({
+}, D = /* @__PURE__ */ u({
   name: "NexxtHeader",
   __name: "Header",
   props: {
@@ -138,69 +167,70 @@ const V = /* @__PURE__ */ d({
     } }
   },
   setup(e) {
-    return (t, s) => (a(), n("div", {
+    return (t, n) => (a(), s("div", {
       class: o(["header flex items-center", t.$slots.center ? "grid grid-cols-3" : ""])
     }, [
-      i("div", L, [
-        c(E, {
+      r("div", F, [
+        f(L, {
           class: "shrink-0",
           variant: "secondary",
           onClick: e.backButtonAction
         }, {
           default: h(() => [
-            N(b(e.backButtonText), 1)
+            B(y(e.backButtonText), 1)
           ]),
           _: 1
         }, 8, ["onClick"]),
-        i("span", q, b(e.title), 1)
+        r("span", G, y(e.title), 1)
       ]),
-      t.$slots.center ? (a(), n("div", D, [
+      t.$slots.center ? (a(), s("div", q, [
         p(t.$slots, "center")
-      ])) : u("", !0),
-      t.$slots.right ? (a(), n("div", {
+      ])) : b("", !0),
+      t.$slots.right ? (a(), s("div", {
         key: 1,
         class: o(t.$slots.center ? "col-span-1 col-start-3 flex justify-end" : "ml-auto")
       }, [
         p(t.$slots, "right")
-      ], 2)) : u("", !0)
+      ], 2)) : b("", !0)
     ], 2));
   }
-}), G = {
+}), R = {
   class: "info-block flex rounded-xl",
   role: "note"
-}, R = {
+}, U = {
   class: "flex min-h-20 w-20 shrink-0 items-center justify-center bg-green-50",
   "aria-hidden": "true"
-}, U = { class: "flex aspect-square h-10 items-center justify-center rounded-full bg-green-500" }, J = { class: "p-5" }, ae = /* @__PURE__ */ d({
+}, X = { class: "flex aspect-square h-10 items-center justify-center rounded-full bg-green-500" }, J = { class: "p-5" }, ie = /* @__PURE__ */ u({
+  name: "NexxtInfoBlock",
   __name: "InfoBlock",
   setup(e) {
-    return (t, s) => (a(), n("div", G, [
-      i("div", R, [
-        i("div", U, [
-          c($, {
+    return (t, n) => (a(), s("div", R, [
+      r("div", U, [
+        r("div", X, [
+          f(x, {
             name: "thumbs-up",
             size: "lg",
             class: "text-white"
           })
         ])
       ]),
-      i("div", J, [
-        s[1] || (s[1] = i("span", { class: "body-semibold" }, "Tip!", -1)),
+      r("div", J, [
+        n[1] || (n[1] = r("span", { class: "body-semibold" }, "Tip!", -1)),
         p(t.$slots, "default", {}, () => [
-          s[0] || (s[0] = N(" Koopwoningen doen het goed als post of reel: zo geef je de woning genoeg aandacht én vergroot je het bereik. ", -1))
+          n[0] || (n[0] = B(" Koopwoningen doen het goed als post of reel: zo geef je de woning genoeg aandacht én vergroot je het bereik. ", -1))
         ])
       ])
     ]));
   }
-}), O = { class: "@container" }, Q = { class: "flex flex-col @md:gap-2" }, W = { class: "flex items-center justify-between gap-2" }, X = ["aria-label", "aria-valuenow", "aria-valuetext"], Y = {
+}), O = { class: "@container" }, Q = { class: "flex flex-col @md:gap-2" }, W = { class: "flex items-center justify-between gap-2" }, Y = ["aria-label", "aria-valuenow", "aria-valuetext"], Z = {
   key: 0,
   class: "flex items-center small-normal tabular-nums @md:hidden",
   "aria-hidden": "true"
-}, Z = {
+}, _ = {
   key: 0,
   class: "flex justify-between @max-md:order-first @max-md:justify-center",
   "aria-label": "Progress steps"
-}, _ = ["aria-current", "role", "tabindex", "aria-label", "onClick", "onKeydown"], ee = /* @__PURE__ */ d({
+}, ee = ["aria-current", "role", "tabindex", "aria-label", "onClick", "onKeydown"], te = /* @__PURE__ */ u({
   name: "NexxtProgressBar",
   __name: "ProgressBar",
   props: {
@@ -211,56 +241,96 @@ const V = /* @__PURE__ */ d({
   },
   emits: ["update:currentStep"],
   setup(e) {
-    const t = m(() => Math.min(Math.max(0, e.currentStep), Math.max(0, e.steps - 1))), s = m(() => e.steps > 0 ? t.value + 1 : 0), r = m(() => e.steps <= 1 ? e.steps === 1 ? 100 : 0 : t.value / (e.steps - 1) * 100), f = m(() => !!e.stepTitles?.length);
-    return H(() => {
+    const t = m(() => Math.min(Math.max(0, e.currentStep), Math.max(0, e.steps - 1))), n = m(() => e.steps > 0 ? t.value + 1 : 0), l = m(() => e.steps <= 1 ? e.steps === 1 ? 100 : 0 : t.value / (e.steps - 1) * 100), c = m(() => !!e.stepTitles?.length);
+    return A(() => {
       e.stepTitles && e.stepTitles.length !== e.steps && console.warn(
         `[NexxtProgressBar] The "stepTitles" array length (${e.stepTitles.length}) must match the "steps" prop (${e.steps}).`
       );
-    }), (v, g) => (a(), n("div", O, [
-      i("div", Q, [
-        i("div", W, [
-          i("div", {
+    }), (v, d) => (a(), s("div", O, [
+      r("div", Q, [
+        r("div", W, [
+          r("div", {
             class: "progress-bar progress-bar-bar h-2 w-full overflow-hidden rounded-full",
             role: "progressbar",
             "aria-label": e.progressLabel,
             "aria-valuemin": "0",
             "aria-valuemax": "100",
-            "aria-valuenow": Math.round(r.value),
-            "aria-valuetext": f.value && e.stepTitles?.[t.value] ? `Step ${s.value} of ${e.steps}: ${e.stepTitles[t.value]}` : `Step ${s.value} of ${e.steps}`
+            "aria-valuenow": Math.round(l.value),
+            "aria-valuetext": c.value && e.stepTitles?.[t.value] ? `Step ${n.value} of ${e.steps}: ${e.stepTitles[t.value]}` : `Step ${n.value} of ${e.steps}`
           }, [
-            i("div", {
+            r("div", {
               class: "progress-bar-progress h-full transition-all duration-500 ease-out",
-              style: I({ width: `${r.value}%` }),
+              style: H({ width: `${l.value}%` }),
               "aria-hidden": !0
             }, null, 4)
-          ], 8, X),
-          f.value ? (a(), n("div", Y, [
-            c(V, { value: s.value }, null, 8, ["value"]),
-            i("span", null, "/" + b(e.steps), 1)
-          ])) : u("", !0)
+          ], 8, Y),
+          c.value ? (a(), s("div", Z, [
+            f(V, { value: n.value }, null, 8, ["value"]),
+            r("span", null, "/" + y(e.steps), 1)
+          ])) : b("", !0)
         ]),
-        f.value ? (a(), n("ol", Z, [
-          (a(!0), n(B, null, S(e.stepTitles, (y, l) => (a(), n("li", {
-            key: y,
+        c.value ? (a(), s("ol", _, [
+          (a(!0), s($, null, w(e.stepTitles, (g, i) => (a(), s("li", {
+            key: g,
             class: o(["rounded-xs transition-colors duration-500 focus-visible:outline-3 @max-md:hidden @max-md:body-normal @min-md:small-normal", [
-              l === t.value ? "text-sapphire-500 @max-md:inline" : "",
-              l < t.value ? "cursor-pointer duration-200! hover:text-sapphire-400" : ""
+              i === t.value ? "text-sapphire-500 @max-md:inline" : "",
+              i < t.value ? "cursor-pointer duration-200! hover:text-sapphire-400" : ""
             ]]),
-            "aria-current": l === t.value ? "step" : void 0,
-            role: l < t.value ? "button" : void 0,
-            tabindex: l < t.value ? 0 : void 0,
-            "aria-label": l < t.value ? `Ga naar ${y}` : void 0,
-            onClick: (k) => l < t.value && v.$emit("update:currentStep", l),
+            "aria-current": i === t.value ? "step" : void 0,
+            role: i < t.value ? "button" : void 0,
+            tabindex: i < t.value ? 0 : void 0,
+            "aria-label": i < t.value ? `Ga naar ${g}` : void 0,
+            onClick: (S) => i < t.value && v.$emit("update:currentStep", i),
             onKeydown: [
-              w((k) => l < t.value && v.$emit("update:currentStep", l), ["enter"]),
-              w(M((k) => l < t.value && v.$emit("update:currentStep", l), ["prevent"]), ["space"])
+              N((S) => i < t.value && v.$emit("update:currentStep", i), ["enter"]),
+              N(P((S) => i < t.value && v.$emit("update:currentStep", i), ["prevent"]), ["space"])
             ]
-          }, b(y), 43, _))), 128))
-        ])) : u("", !0)
+          }, y(g), 43, ee))), 128))
+        ])) : b("", !0)
       ])
     ]));
   }
-}), se = /* @__PURE__ */ d({
+}), ae = {
+  class: "m-0 inline-flex list-none items-start justify-start gap-0.5 p-0",
+  "aria-label": "Sociale media kanalen"
+}, ne = ["aria-label"], re = /* @__PURE__ */ u({
+  name: "NexxtSocialIcons",
+  __name: "SocialIcons",
+  props: {
+    facebook: { type: Boolean },
+    instagram: { type: Boolean },
+    linkedin: { type: Boolean },
+    x: { type: Boolean },
+    google: { type: Boolean },
+    tiktok: { type: Boolean }
+  },
+  setup(e) {
+    const t = e, n = [
+      { name: "facebook", label: "Facebook", icon: "facebook-f" },
+      { name: "instagram", label: "Instagram", icon: "instagram" },
+      { name: "linkedin", label: "LinkedIn", icon: "linkedin-in" },
+      { name: "x", label: "X (voorheen Twitter)", icon: "x-twitter" },
+      { name: "google", label: "Google", icon: "google" },
+      { name: "tiktok", label: "TikTok", icon: "tiktok" }
+    ], l = m(
+      () => n.filter((c) => t[c.name])
+    );
+    return (c, v) => (a(), s("ul", ae, [
+      (a(!0), s($, null, w(l.value, (d) => (a(), s("li", {
+        key: d.name,
+        class: o(["inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white", `bg-brands-${d.name}`]),
+        "aria-label": d.label
+      }, [
+        f(x, {
+          name: d.icon,
+          type: "brands",
+          class: "text-[10px] text-white",
+          "aria-hidden": "true"
+        }, null, 8, ["name"])
+      ], 10, ne))), 128))
+    ]));
+  }
+}), oe = /* @__PURE__ */ u({
   name: "NexxtStepperHeader",
   __name: "StepperHeader",
   props: {
@@ -272,20 +342,20 @@ const V = /* @__PURE__ */ d({
   },
   emits: ["update:currentStep"],
   setup(e) {
-    return (t, s) => (a(), x(F, {
+    return (t, n) => (a(), k(D, {
       title: e.title,
       "back-button-action": e.backButtonAction,
       "back-button-text": e.backButtonText
-    }, P({ _: 2 }, [
+    }, M({ _: 2 }, [
       e.steps ? {
         name: "center",
         fn: h(() => [
-          c(ee, {
+          f(te, {
             class: "w-full",
             steps: e.steps.length,
             "step-titles": e.steps,
             "current-step": e.currentStep,
-            "onUpdate:currentStep": s[0] || (s[0] = (r) => t.$emit("update:currentStep", r))
+            "onUpdate:currentStep": n[0] || (n[0] = (l) => t.$emit("update:currentStep", l))
           }, null, 8, ["steps", "step-titles", "current-step"])
         ]),
         key: "0"
@@ -302,10 +372,12 @@ const V = /* @__PURE__ */ d({
 });
 export {
   V as NexxtAnimatedNumber,
-  E as NexxtButton,
-  F as NexxtHeader,
-  $ as NexxtIcon,
-  ae as NexxtInfoBlock,
-  ee as NexxtProgressBar,
-  se as NexxtStepperHeader
+  L as NexxtButton,
+  le as NexxtChip,
+  D as NexxtHeader,
+  x as NexxtIcon,
+  ie as NexxtInfoBlock,
+  te as NexxtProgressBar,
+  re as NexxtSocialIcons,
+  oe as NexxtStepperHeader
 };

package/package.json

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