@nexxtmove/ui 0.1.4 → 0.1.6

package/dist/index.d.ts

@@ -8,7 +8,11 @@ declare const __VLS_component: DefineComponent<NexxtButtonProps, {}, {}, {}, {},
 
 declare const __VLS_component_2: DefineComponent<NexxtHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_3: DefineComponent<NexxtStepperHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtStepperHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component_3: DefineComponent<NexxtStepperHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:currentStep": (...args: any[]) => void;
+}, string, PublicProps, Readonly<NexxtStepperHeaderProps> & Readonly<{
+"onUpdate:currentStep"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare type __VLS_Props = {
     value: number;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as h, ref as j, computed as v, watch as C, createBlock as x, openBlock as s, TransitionGroup as A, withCtx as f, createElementBlock as l, Fragment as S, renderList as T, createVNode as m, Transition as N, toDisplayString as b, normalizeClass as r, createCommentVNode as u, renderSlot as g, createElementVNode as o, createTextVNode as H, watchEffect as M, normalizeStyle as P, withKeys as w, withModifiers as V, createSlots as E } from "vue";
-const I = /* @__PURE__ */ h({
+import { defineComponent as y, ref as N, computed as v, watch as j, createBlock as $, openBlock as a, TransitionGroup as C, withCtx as f, createElementBlock as s, Fragment as B, renderList as S, createVNode as m, Transition as T, toDisplayString as b, normalizeClass as r, createCommentVNode as u, renderSlot as p, createElementVNode as o, createTextVNode as A, watchEffect as H, normalizeStyle as M, withKeys as k, withModifiers as P, createSlots as V } from "vue";
+const E = /* @__PURE__ */ y({
   __name: "AnimatedNumber",
   props: {
     value: {},
@@ -7,39 +7,39 @@ const I = /* @__PURE__ */ h({
     easing: { default: "ease-out" }
   },
   setup(e) {
-    const t = j("up"), i = v(() => String(e.value).split("")), a = v(() => `duration-${e.duration}`);
-    return C(
+    const t = N("up"), n = v(() => String(e.value).split("")), i = v(() => `duration-${e.duration}`);
+    return j(
       () => e.value,
-      (c, y) => {
-        t.value = c > y ? "up" : "down";
+      (c, d) => {
+        t.value = c > d ? "up" : "down";
       }
-    ), (c, y) => (s(), x(A, {
+    ), (c, d) => (a(), $(C, {
       tag: "div",
       class: "relative flex shrink-0 items-center tabular-nums",
       "aria-label": e.value,
-      "enter-active-class": `transition-all ${a.value} ${e.easing}`,
-      "leave-active-class": `absolute transition-all ${a.value} ${e.easing}`,
+      "enter-active-class": `transition-all ${i.value} ${e.easing}`,
+      "leave-active-class": `absolute transition-all ${i.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: f(() => [
-        (s(!0), l(S, null, T(i.value, (d, $) => (s(), l("div", {
-          key: $,
+        (a(!0), s(B, null, S(n.value, (g, h) => (a(), s("div", {
+          key: h,
           class: "relative inline-flex h-[1.5em] w-[1ch] items-center justify-center overflow-hidden",
           "aria-hidden": "true"
         }, [
-          m(N, {
-            "enter-active-class": `transition-transform ${a.value} ${e.easing}`,
-            "leave-active-class": `absolute inset-0 transition-transform ${a.value} ${e.easing}`,
+          m(T, {
+            "enter-active-class": `transition-transform ${i.value} ${e.easing}`,
+            "leave-active-class": `absolute inset-0 transition-transform ${i.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: f(() => [
-              (s(), l("span", {
-                key: d,
+              (a(), s("span", {
+                key: g,
                 class: "flex h-full w-full items-center justify-center"
-              }, b(d), 1))
+              }, b(g), 1))
             ]),
             _: 2
           }, 1032, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
@@ -48,7 +48,7 @@ const I = /* @__PURE__ */ h({
       _: 1
     }, 8, ["aria-label", "enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"]));
   }
-}), B = /* @__PURE__ */ h({
+}), w = /* @__PURE__ */ y({
   name: "NexxtIcon",
   __name: "Icon",
   props: {
@@ -56,14 +56,14 @@ const I = /* @__PURE__ */ h({
     type: { default: "light" }
   },
   setup(e) {
-    return (t, i) => (s(), l("i", {
+    return (t, n) => (a(), s("i", {
       class: r([`fa-${e.type}`, `fa-${e.name}`, "items-center", "justify-center"])
     }, null, 2));
   }
-}), K = ["type", "disabled", "data-variant"], L = {
+}), I = ["type", "disabled", "data-variant"], K = {
   key: 0,
   class: /* @__PURE__ */ r(["absolute inset-0 flex items-center justify-center rounded-lg"])
-}, z = /* @__PURE__ */ h({
+}, L = /* @__PURE__ */ y({
   name: "NexxtButton",
   __name: "Button",
   props: {
@@ -75,7 +75,7 @@ const I = /* @__PURE__ */ h({
     buttonType: { default: "button" }
   },
   setup(e) {
-    return (t, i) => (s(), l("button", {
+    return (t, n) => (a(), s("button", {
       type: e.buttonType,
       disabled: e.disabled,
       class: r([
@@ -87,12 +87,12 @@ const I = /* @__PURE__ */ h({
       ]),
       "data-variant": e.variant
     }, [
-      e.icon ? (s(), x(B, {
+      e.icon ? (a(), $(w, {
         key: 0,
         name: e.icon,
         class: r(["transition-all duration-200", { "order-last": e.iconRight, "opacity-0": e.loading }])
       }, null, 8, ["name", "class"])) : u("", !0),
-      t.$slots.default ? (s(), l("span", {
+      t.$slots.default ? (a(), s("span", {
         key: 1,
         class: r([
           "inline-block transition-all duration-200",
@@ -101,9 +101,9 @@ const I = /* @__PURE__ */ h({
           e.variant === "link" && !e.loading && !e.disabled ? "hover:underline-offset-2" : ""
         ])
       }, [
-        g(t.$slots, "default")
+        p(t.$slots, "default")
       ], 2)) : u("", !0),
-      m(N, {
+      m(T, {
         "enter-active-class": "transition-opacity duration-200",
         "enter-from-class": "opacity-0",
         "enter-to-class": "opacity-100",
@@ -112,8 +112,8 @@ const I = /* @__PURE__ */ h({
         "leave-to-class": "opacity-0"
       }, {
         default: f(() => [
-          e.loading ? (s(), l("div", L, [
-            m(B, {
+          e.loading ? (a(), s("div", K, [
+            m(w, {
               name: "spinner-third",
               type: "light",
               class: "fa-spin absolute text-sm"
@@ -122,12 +122,12 @@ const I = /* @__PURE__ */ h({
         ]),
         _: 1
       })
-    ], 10, K));
+    ], 10, I));
   }
-}), D = { class: "flex max-w-full items-center justify-start gap-4" }, F = { class: "block truncate heading-4 text-sapphire-500" }, G = {
+}), z = { class: "flex max-w-full items-center justify-start gap-4" }, D = { class: "block truncate heading-4 text-sapphire-500" }, F = {
   key: 0,
   class: "col-span-1 col-start-2 flex justify-center"
-}, R = /* @__PURE__ */ h({
+}, G = /* @__PURE__ */ y({
   name: "NexxtHeader",
   __name: "Header",
   props: {
@@ -138,42 +138,42 @@ const I = /* @__PURE__ */ h({
     } }
   },
   setup(e) {
-    return (t, i) => (s(), l("div", {
+    return (t, n) => (a(), s("div", {
       class: r(["header flex items-center", t.$slots.center ? "grid grid-cols-3" : ""])
     }, [
-      o("div", D, [
-        m(z, {
+      o("div", z, [
+        m(L, {
           class: "shrink-0",
           variant: "secondary",
           onClick: e.backButtonAction
         }, {
           default: f(() => [
-            H(b(e.backButtonText), 1)
+            A(b(e.backButtonText), 1)
           ]),
           _: 1
         }, 8, ["onClick"]),
-        o("span", F, b(e.title), 1)
+        o("span", D, b(e.title), 1)
       ]),
-      t.$slots.center ? (s(), l("div", G, [
-        g(t.$slots, "center")
+      t.$slots.center ? (a(), s("div", F, [
+        p(t.$slots, "center")
       ])) : u("", !0),
-      t.$slots.right ? (s(), l("div", {
+      t.$slots.right ? (a(), s("div", {
         key: 1,
         class: r(t.$slots.center ? "col-span-1 col-start-3 flex justify-end" : "ml-auto")
       }, [
-        g(t.$slots, "right")
+        p(t.$slots, "right")
       ], 2)) : u("", !0)
     ], 2));
   }
-}), q = { class: "@container" }, J = { class: "flex flex-col @md:gap-2" }, O = { class: "flex items-center justify-between gap-2" }, Q = ["aria-label", "aria-valuenow", "aria-valuetext"], U = {
+}), R = { class: "@container" }, q = { class: "flex flex-col @md:gap-2" }, U = { class: "flex items-center justify-between gap-2" }, J = ["aria-label", "aria-valuenow", "aria-valuetext"], O = {
   key: 0,
   class: "flex items-center small-normal tabular-nums @md:hidden",
   "aria-hidden": "true"
-}, W = {
+}, Q = {
   key: 0,
   class: "flex justify-between @max-md:order-first @max-md:justify-center",
   "aria-label": "Progress steps"
-}, X = ["aria-current", "role", "tabindex", "aria-label", "onClick", "onKeydown"], Y = /* @__PURE__ */ h({
+}, W = ["aria-current", "role", "tabindex", "aria-label", "onClick", "onKeydown"], X = /* @__PURE__ */ y({
   name: "NexxtProgressBar",
   __name: "ProgressBar",
   props: {
@@ -183,57 +183,57 @@ const I = /* @__PURE__ */ h({
     stepTitles: {}
   },
   emits: ["update:currentStep"],
-  setup(e, { emit: t }) {
-    const i = t, a = v(() => Math.min(Math.max(0, e.currentStep), Math.max(0, e.steps - 1))), c = v(() => e.steps > 0 ? a.value + 1 : 0), y = v(() => e.steps <= 1 ? e.steps === 1 ? 100 : 0 : a.value / (e.steps - 1) * 100), d = v(() => !!e.stepTitles?.length);
-    return M(() => {
+  setup(e) {
+    const t = v(() => Math.min(Math.max(0, e.currentStep), Math.max(0, e.steps - 1))), n = v(() => e.steps > 0 ? t.value + 1 : 0), i = v(() => e.steps <= 1 ? e.steps === 1 ? 100 : 0 : t.value / (e.steps - 1) * 100), c = v(() => !!e.stepTitles?.length);
+    return H(() => {
       e.stepTitles && e.stepTitles.length !== e.steps && console.warn(
         `[NexxtProgressBar] The "stepTitles" array length (${e.stepTitles.length}) must match the "steps" prop (${e.steps}).`
       );
-    }), ($, Z) => (s(), l("div", q, [
-      o("div", J, [
-        o("div", O, [
+    }), (d, g) => (a(), s("div", R, [
+      o("div", q, [
+        o("div", U, [
           o("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(y.value),
-            "aria-valuetext": d.value && e.stepTitles?.[a.value] ? `Step ${c.value} of ${e.steps}: ${e.stepTitles[a.value]}` : `Step ${c.value} of ${e.steps}`
+            "aria-valuenow": Math.round(i.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}`
           }, [
             o("div", {
               class: "progress-bar-progress h-full transition-all duration-500 ease-out",
-              style: P({ width: `${y.value}%` }),
+              style: M({ width: `${i.value}%` }),
               "aria-hidden": !0
             }, null, 4)
-          ], 8, Q),
-          d.value ? (s(), l("div", U, [
-            m(I, { value: c.value }, null, 8, ["value"]),
+          ], 8, J),
+          c.value ? (a(), s("div", O, [
+            m(E, { value: n.value }, null, 8, ["value"]),
             o("span", null, "/" + b(e.steps), 1)
           ])) : u("", !0)
         ]),
-        d.value ? (s(), l("ol", W, [
-          (s(!0), l(S, null, T(e.stepTitles, (p, n) => (s(), l("li", {
-            key: p,
+        c.value ? (a(), s("ol", Q, [
+          (a(!0), s(B, null, S(e.stepTitles, (h, l) => (a(), s("li", {
+            key: h,
             class: r(["rounded-xs transition-colors duration-500 focus-visible:outline-3 @max-md:hidden @max-md:body-normal @min-md:small-normal", [
-              n === a.value ? "text-sapphire-500 @max-md:inline" : "",
-              n < a.value ? "cursor-pointer duration-200! hover:text-sapphire-400" : ""
+              l === t.value ? "text-sapphire-500 @max-md:inline" : "",
+              l < t.value ? "cursor-pointer duration-200! hover:text-sapphire-400" : ""
             ]]),
-            "aria-current": n === a.value ? "step" : void 0,
-            role: n < a.value ? "button" : void 0,
-            tabindex: n < a.value ? 0 : void 0,
-            "aria-label": n < a.value ? `Ga naar ${p}` : void 0,
-            onClick: (k) => n < a.value && i("update:currentStep", n),
+            "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 ${h}` : void 0,
+            onClick: (x) => l < t.value && d.$emit("update:currentStep", l),
             onKeydown: [
-              w((k) => n < a.value && i("update:currentStep", n), ["enter"]),
-              w(V((k) => n < a.value && i("update:currentStep", n), ["prevent"]), ["space"])
+              k((x) => l < t.value && d.$emit("update:currentStep", l), ["enter"]),
+              k(P((x) => l < t.value && d.$emit("update:currentStep", l), ["prevent"]), ["space"])
             ]
-          }, b(p), 43, X))), 128))
+          }, b(h), 43, W))), 128))
         ])) : u("", !0)
       ])
     ]));
   }
-}), ee = /* @__PURE__ */ h({
+}), Z = /* @__PURE__ */ y({
   name: "NexxtStepperHeader",
   __name: "StepperHeader",
   props: {
@@ -243,20 +243,22 @@ const I = /* @__PURE__ */ h({
     backButtonText: {},
     backButtonAction: {}
   },
+  emits: ["update:currentStep"],
   setup(e) {
-    return (t, i) => (s(), x(R, {
+    return (t, n) => (a(), $(G, {
       title: e.title,
       "back-button-action": e.backButtonAction,
       "back-button-text": e.backButtonText
-    }, E({ _: 2 }, [
+    }, V({ _: 2 }, [
       e.steps ? {
         name: "center",
         fn: f(() => [
-          m(Y, {
+          m(X, {
             class: "w-full",
             steps: e.steps.length,
             "step-titles": e.steps,
-            "current-step": e.currentStep
+            "current-step": e.currentStep,
+            "onUpdate:currentStep": n[0] || (n[0] = (i) => t.$emit("update:currentStep", i))
           }, null, 8, ["steps", "step-titles", "current-step"])
         ]),
         key: "0"
@@ -264,7 +266,7 @@ const I = /* @__PURE__ */ h({
       t.$slots.default ? {
         name: "right",
         fn: f(() => [
-          g(t.$slots, "default")
+          p(t.$slots, "default")
         ]),
         key: "1"
       } : void 0
@@ -272,10 +274,10 @@ const I = /* @__PURE__ */ h({
   }
 });
 export {
-  I as NexxtAnimatedNumber,
-  z as NexxtButton,
-  R as NexxtHeader,
-  B as NexxtIcon,
-  Y as NexxtProgressBar,
-  ee as NexxtStepperHeader
+  E as NexxtAnimatedNumber,
+  L as NexxtButton,
+  G as NexxtHeader,
+  w as NexxtIcon,
+  X as NexxtProgressBar,
+  Z as NexxtStepperHeader
 };

package/package.json

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

package/tailwind/nexxtmove.tailwind.components.css

@@ -113,4 +113,8 @@
     @apply border-b-header-border-bottom h-(--header-height) px-(--header-padding-x) gap-(--header-gap) border-b border-solid;
   }
 
+  .info-block {
+    @apply border-info-block-border bg-info-block-bg p-(--info-block-padding) border border-solid;
+  }
+
 }

package/tailwind/nexxtmove.tailwind.theme.css

@@ -152,6 +152,8 @@
   --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);
+  --color-info-block-border: var(--color-green-500);
+  --color-info-block-bg: var(--color-green-50);
   --text-xs: 0.75rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;
@@ -218,6 +220,7 @@
   --header-height: var(--spacing-24);
   --header-padding-x: var(--spacing-10);
   --header-gap: var(--spacing-6);
+  --info-block-padding: var(--spacing-1);
   --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: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

package/tailwind/nexxtmove.tailwind.utilities.css

@@ -22,6 +22,10 @@
   @apply font-sans text-base;
 }
 
+@utility body-semibold {
+  @apply font-sans font-semibold text-base;
+}
+
 @utility body-link {
   @apply font-sans text-base underline;
 }
@@ -34,6 +38,10 @@
   @apply font-sans text-sm;
 }
 
+@utility small-semibold {
+  @apply font-sans text-sm;
+}
+
 @utility small-link {
   @apply font-sans text-sm underline;
 }
@@ -46,6 +54,10 @@
   @apply font-sans text-xs;
 }
 
+@utility extra-small-semibold {
+  @apply font-sans font-semibold text-xs;
+}
+
 @utility extra-small-link {
   @apply font-sans text-xs underline;
 }
@@ -74,6 +86,10 @@
   @apply font-serif text-base;
 }
 
+@utility body-semibold-serif {
+  @apply font-serif font-semibold text-base;
+}
+
 @utility body-link-serif {
   @apply font-serif text-base underline;
 }
@@ -86,6 +102,10 @@
   @apply font-serif text-sm;
 }
 
+@utility small-semibold-serif {
+  @apply font-serif font-semibold text-sm;
+}
+
 @utility small-link-serif {
   @apply font-serif text-sm underline;
 }
@@ -98,6 +118,10 @@
   @apply font-serif text-xs;
 }
 
+@utility extra-small-semibold-serif {
+  @apply font-serif font-semibold text-xs;
+}
+
 @utility extra-small-link-serif {
   @apply font-serif text-xs underline;
 }
@@ -126,6 +150,10 @@
   @apply font-mono text-base;
 }
 
+@utility body-semibold-mono {
+  @apply font-mono font-bold text-base;
+}
+
 @utility body-link-mono {
   @apply font-mono text-base underline;
 }
@@ -138,6 +166,10 @@
   @apply font-mono text-sm;
 }
 
+@utility small-semibold-mono {
+  @apply font-mono font-bold text-sm;
+}
+
 @utility small-link-mono {
   @apply font-mono text-sm underline;
 }
@@ -150,6 +182,10 @@
   @apply font-mono text-xs;
 }
 
+@utility extra-small-semibold-mono {
+  @apply font-mono font-bold text-xs;
+}
+
 @utility extra-small-link-mono {
   @apply font-mono text-xs underline;
 }