@nexxtmove/ui 0.0.20 → 0.0.22

package/dist/index.d.ts

@@ -6,6 +6,12 @@ import { PublicProps } from 'vue';
 
 declare const __VLS_component: DefineComponent<NexxtButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
+declare type __VLS_Props = {
+    value: number;
+    duration?: number;
+    easing?: EasingFunction;
+};
+
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -23,8 +29,12 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
+declare type EasingFunction = 'ease-linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+
 declare type IconType = 'regular' | 'solid' | 'light' | 'duotone' | 'brands';
 
+export declare const NexxtAnimatedNumber: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
 export declare const NexxtButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
 declare interface NexxtButtonProps {
@@ -43,4 +53,13 @@ declare interface NexxtIconProps {
     type?: IconType;
 }
 
+export declare const NexxtProgressBar: DefineComponent<NexxtProgressBarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtProgressBarProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare interface NexxtProgressBarProps {
+    steps: number;
+    currentStep: number;
+    progressLabel?: string;
+    stepTitles?: string[];
+}
+
 export { }

package/dist/index.js

@@ -1,5 +1,54 @@
-import { defineComponent as c, createElementBlock as i, openBlock as a, normalizeClass as n, createBlock as d, createCommentVNode as o, createVNode as l, renderSlot as u, Transition as f, withCtx as m } from "vue";
-const s = /* @__PURE__ */ c({
+import { defineComponent as f, ref as T, computed as r, watch as B, createBlock as $, openBlock as a, TransitionGroup as N, withCtx as h, createElementBlock as l, Fragment as p, renderList as w, createVNode as v, Transition as k, toDisplayString as g, normalizeClass as o, createCommentVNode as u, renderSlot as S, watchEffect as j, createElementVNode as d, normalizeStyle as P } from "vue";
+const C = /* @__PURE__ */ f({
+  __name: "AnimatedNumber",
+  props: {
+    value: {},
+    duration: { default: 500 },
+    easing: { default: "ease-out" }
+  },
+  setup(e) {
+    const t = T("up"), s = r(() => String(e.value).split("")), n = r(() => `duration-${e.duration}`);
+    return B(
+      () => e.value,
+      (i, m) => {
+        t.value = i > m ? "up" : "down";
+      }
+    ), (i, m) => (a(), $(N, {
+      tag: "div",
+      class: "relative flex shrink-0 items-center tabular-nums",
+      "aria-label": e.value,
+      "enter-active-class": `transition-all ${n.value} ${e.easing}`,
+      "leave-active-class": `absolute transition-all ${n.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), l(p, null, w(s.value, (y, c) => (a(), l("div", {
+          key: c,
+          class: "relative inline-flex h-[1.5em] w-[1ch] items-center justify-center overflow-hidden",
+          "aria-hidden": "true"
+        }, [
+          v(k, {
+            "enter-active-class": `transition-transform ${n.value} ${e.easing}`,
+            "leave-active-class": `absolute inset-0 transition-transform ${n.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(), l("span", {
+                key: y,
+                class: "flex h-full w-full items-center justify-center"
+              }, g(y), 1))
+            ]),
+            _: 2
+          }, 1032, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
+        ]))), 128))
+      ]),
+      _: 1
+    }, 8, ["aria-label", "enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"]));
+  }
+}), b = /* @__PURE__ */ f({
   name: "NexxtIcon",
   __name: "Icon",
   props: {
@@ -7,14 +56,14 @@ const s = /* @__PURE__ */ c({
     type: { default: "light" }
   },
   setup(e) {
-    return (t, r) => (a(), i("i", {
-      class: n([`fa-${e.type}`, `fa-${e.name}`, "items-center", "justify-center"])
+    return (t, s) => (a(), l("i", {
+      class: o([`fa-${e.type}`, `fa-${e.name}`, "items-center", "justify-center"])
     }, null, 2));
   }
-}), y = ["type", "disabled", "data-variant"], v = {
+}), M = ["type", "disabled", "data-variant"], V = {
   key: 0,
-  class: /* @__PURE__ */ n(["absolute inset-0 flex items-center justify-center rounded-lg"])
-}, h = /* @__PURE__ */ c({
+  class: /* @__PURE__ */ o(["absolute inset-0 flex items-center justify-center rounded-lg"])
+}, q = /* @__PURE__ */ f({
   name: "NexxtButton",
   __name: "Button",
   props: {
@@ -26,10 +75,10 @@ const s = /* @__PURE__ */ c({
     buttonType: { default: "button" }
   },
   setup(e) {
-    return (t, r) => (a(), i("button", {
+    return (t, s) => (a(), l("button", {
       type: e.buttonType,
       disabled: e.disabled,
-      class: n([
+      class: o([
         "button relative flex h-10 cursor-pointer items-center justify-center overflow-hidden rounded-lg transition-colors duration-200 focus-visible:outline-3 disabled:cursor-not-allowed",
         `button-${e.variant}`,
         t.$slots.default ?? "w-10",
@@ -38,23 +87,23 @@ const s = /* @__PURE__ */ c({
       ]),
       "data-variant": e.variant
     }, [
-      e.icon ? (a(), d(s, {
+      e.icon ? (a(), $(b, {
         key: 0,
         name: e.icon,
-        class: n(["transition-all duration-200", { "order-last": e.iconRight, "opacity-0": e.loading }])
-      }, null, 8, ["name", "class"])) : o("", !0),
-      t.$slots.default ? (a(), i("span", {
+        class: o(["transition-all duration-200", { "order-last": e.iconRight, "opacity-0": e.loading }])
+      }, null, 8, ["name", "class"])) : u("", !0),
+      t.$slots.default ? (a(), l("span", {
         key: 1,
-        class: n([
+        class: o([
           "inline-block transition-all duration-200",
           { "opacity-0": e.loading },
           e.variant === "link" ? "underline underline-offset-1" : "",
           e.variant === "link" && !e.loading && !e.disabled ? "hover:underline-offset-2" : ""
         ])
       }, [
-        u(t.$slots, "default")
-      ], 2)) : o("", !0),
-      l(f, {
+        S(t.$slots, "default")
+      ], 2)) : u("", !0),
+      v(k, {
         "enter-active-class": "transition-opacity duration-200",
         "enter-from-class": "opacity-0",
         "enter-to-class": "opacity-100",
@@ -62,21 +111,77 @@ const s = /* @__PURE__ */ c({
         "leave-from-class": "opacity-100",
         "leave-to-class": "opacity-0"
       }, {
-        default: m(() => [
-          e.loading ? (a(), i("div", v, [
-            l(s, {
+        default: h(() => [
+          e.loading ? (a(), l("div", V, [
+            v(b, {
               name: "spinner-third",
               type: "light",
               class: "fa-spin absolute text-sm"
             })
-          ])) : o("", !0)
+          ])) : u("", !0)
         ]),
         _: 1
       })
-    ], 10, y));
+    ], 10, M));
+  }
+}), E = { class: "@container flex flex-col gap-2" }, I = { class: "flex items-center justify-between gap-2" }, L = ["aria-label", "aria-valuenow", "aria-valuetext"], z = {
+  key: 0,
+  class: "flex items-center tabular-nums @md:hidden",
+  "aria-hidden": "true"
+}, A = {
+  key: 0,
+  class: "flex justify-between @max-md:order-first @max-md:justify-center",
+  "aria-label": "Progress steps"
+}, D = ["aria-current"], F = /* @__PURE__ */ f({
+  name: "NexxtProgressBar",
+  __name: "ProgressBar",
+  props: {
+    steps: {},
+    currentStep: {},
+    progressLabel: { default: "Voortgang" },
+    stepTitles: {}
+  },
+  setup(e) {
+    const t = r(() => Math.min(Math.max(0, e.currentStep), Math.max(0, e.steps - 1))), s = r(() => e.steps > 0 ? t.value + 1 : 0), n = r(() => e.steps <= 1 ? e.steps === 1 ? 100 : 0 : t.value / (e.steps - 1) * 100), i = r(() => !!e.stepTitles?.length);
+    return j(() => {
+      e.stepTitles && e.stepTitles.length !== e.steps && console.warn(
+        `[NexxtProgressBar] The "stepTitles" array length (${e.stepTitles.length}) must match the "steps" prop (${e.steps}).`
+      );
+    }), (m, y) => (a(), l("div", E, [
+      d("div", I, [
+        d("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(n.value),
+          "aria-valuetext": i.value && e.stepTitles?.[t.value] ? `Step ${s.value} of ${e.steps}: ${e.stepTitles[t.value]}` : `Step ${s.value} of ${e.steps}`
+        }, [
+          d("div", {
+            class: "progress-bar-progress h-full transition-all duration-500 ease-out",
+            style: P({ width: `${n.value}%` }),
+            "aria-hidden": !0
+          }, null, 4)
+        ], 8, L),
+        i.value ? (a(), l("div", z, [
+          v(C, { value: s.value }, null, 8, ["value"]),
+          d("span", null, "/" + g(e.steps), 1)
+        ])) : u("", !0)
+      ]),
+      i.value ? (a(), l("ol", A, [
+        (a(!0), l(p, null, w(e.stepTitles, (c, x) => (a(), l("li", {
+          key: c,
+          class: o(["transition-colors duration-500 @max-md:hidden", x === t.value ? "font-medium text-sapphire-500 @max-md:inline" : ""]),
+          "aria-current": x === t.value ? "step" : void 0
+        }, g(c), 11, D))), 128))
+      ])) : u("", !0)
+    ]));
   }
 });
 export {
-  h as NexxtButton,
-  s as NexxtIcon
+  C as NexxtAnimatedNumber,
+  q as NexxtButton,
+  b as NexxtIcon,
+  F as NexxtProgressBar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -23,11 +23,11 @@
   "devDependencies": {
     "@awesome.me/kit-37b149f3ef": "^1.0.4",
     "@eslint/js": "^9.39.2",
-    "@storybook/addon-a11y": "^10.2.0",
-    "@storybook/addon-docs": "^10.2.0",
-    "@storybook/addon-vitest": "^10.2.0",
-    "@storybook/builder-vite": "^10.2.0",
-    "@storybook/vue3-vite": "^10.2.0",
+    "@storybook/addon-a11y": "^10.2.3",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-vitest": "^10.2.3",
+    "@storybook/builder-vite": "^10.2.3",
+    "@storybook/vue3-vite": "^10.2.3",
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.8",
@@ -49,12 +49,12 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.2.0",
+    "storybook": "^10.2.3",
     "typescript-eslint": "^8.52.0",
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.16",
-    "eslint-plugin-storybook": "10.2.0"
+    "eslint-plugin-storybook": "10.2.3"
   },
   "engines": {
     "node": ">=22.18.0"
@@ -67,7 +67,7 @@
     "generate:index": "node --experimental-strip-types ./scripts/generate-index.ts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "storybook:build": "storybook build"
   }
 }

package/tailwind/nexxtmove.tailwind.components.css

@@ -97,6 +97,10 @@
     }
   }
 
+  .progress-bar {
+    @apply border-progress-bar-border border border-solid;
+  }
+
   .progress-bar-bar {
     @apply bg-progress-bar-bg-bar;
   }
@@ -105,8 +109,8 @@
     @apply bg-progress-bar-bg-progress;
   }
 
-  .progress-nav {
-    @apply gap-(--progress-nav-gap);
+  .header {
+    @apply border-b-header-border-bottom h-(--header-height) px-(--header-padding-x) py-(--header-padding-y) gap-(--header-gap) border-b border-solid;
   }
 
 }

package/tailwind/nexxtmove.tailwind.theme.css

@@ -149,6 +149,8 @@
   --color-button-border-danger-focussed: var(--color-brick-100);
   --color-progress-bar-bg-progress: var(--color-cornflower-blue-500);
   --color-progress-bar-bg-bar: var(--color-gray-50);
+  --color-progress-bar-border: var(--color-gray-200);
+  --color-header-border-bottom: var(--color-gray-200);
   --text-xs: 0.75rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;
@@ -212,7 +214,10 @@
   --button-padding-link-y: var(--spacing-0\.5);
   --button-gap: var(--spacing-1);
   --button-border-radius: var(--radius-lg);
-  --progress-nav-gap: var(--spacing-3\.5);
+  --header-height: var(--spacing-24);
+  --header-padding-x: var(--spacing-10);
+  --header-padding-y: var(--spacing-6);
+  --header-gap: var(--spacing-6);
   --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-serif: 'Playfair Display', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;