@nexxtmove/ui 1.3.4 → 1.5.0

package/dist/components/ModalFooter/ModalFooter.vue.d.ts

@@ -1,5 +1,6 @@
 import { default as NexxtButton } from '../Button/Button.vue';
 type ButtonVariant = InstanceType<typeof NexxtButton>['$props']['variant'];
+type ButtonIcon = InstanceType<typeof NexxtButton>['$props']['icon'];
 interface NexxtModalFooterProps {
     /**
      * Label of the cancel button. Required: this library has no i18n layer, so
@@ -18,6 +19,8 @@ interface NexxtModalFooterProps {
      * NexxtButton's own default, so it renders like a plain `<NexxtButton>`.
      */
     confirmVariant?: ButtonVariant | (string & {});
+    /** Icon rendered on the action button, before its label. */
+    confirmIcon?: ButtonIcon;
     /** Put the action button in its loading state. */
     confirmLoading?: boolean;
     /** Disable the action button. */

package/dist/index.js

@@ -1419,7 +1419,7 @@ var dt = { funda: { render: ut } }, Z = /* @__PURE__ */ p({
 			e.label ? (w(), s("label", {
 				key: 0,
 				for: t,
-				class: "text-color-gray-700 justify-start body-normal text-sm"
+				class: "text-color-gray-700 justify-start small-normal"
 			}, [d(k(e.label) + " ", 1), e.required ? (w(), s("span", sn, "*")) : o("", !0)])) : o("", !0),
 			f($, {
 				placement: "bottom-start",
@@ -1670,7 +1670,7 @@ var dt = { funda: { render: ut } }, Z = /* @__PURE__ */ p({
 		return (t, i) => (w(), s("div", bn, [
 			e.label ? (w(), s("label", {
 				key: 0,
-				class: "text-color-gray-700 justify-start body-normal text-sm",
+				class: "text-color-gray-700 justify-start small-normal",
 				for: r
 			}, [d(k(e.label) + " ", 1), e.required ? (w(), s("span", xn, "*")) : o("", !0)])) : o("", !0),
 			c("div", { class: y(["group flex items-center gap-2 overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500", [e.error ? "ring-brick-400" : "ring-gray-200", {
@@ -2885,7 +2885,7 @@ var sr = /* @__PURE__ */ p({
 		return (i, l) => (w(), s("div", Zn, [
 			t.label ? (w(), s("label", {
 				key: 0,
-				class: "text-color-gray-700 justify-start body-normal text-sm",
+				class: "text-color-gray-700 justify-start small-normal",
 				for: A(r)
 			}, [d(k(t.label) + " ", 1), t.required ? (w(), s("span", $n, "*")) : o("", !0)], 8, Qn)) : o("", !0),
 			f($, {
@@ -3437,7 +3437,7 @@ var sr = /* @__PURE__ */ p({
 		return (r, i) => (w(), s("div", Fr, [
 			t.label ? (w(), s("label", {
 				key: 0,
-				class: "text-color-gray-700 justify-start body-normal text-sm",
+				class: "text-color-gray-700 justify-start small-normal",
 				for: A(l)
 			}, [d(k(t.label) + " ", 1), t.required ? (w(), s("span", Lr, "*")) : o("", !0)], 8, Ir)) : o("", !0),
 			c("div", { class: y(["group flex items-center overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500", [t.error ? "ring-brick-400" : "ring-gray-200", t.selectPosition === "after" ? "flex-row-reverse" : "flex-row"]]) }, [f($, { placement: t.selectPosition === "after" ? "bottom-end" : "bottom-start" }, {
@@ -3626,6 +3626,7 @@ var sr = /* @__PURE__ */ p({
 		},
 		confirmLabel: {},
 		confirmVariant: {},
+		confirmIcon: {},
 		confirmLoading: {
 			type: Boolean,
 			default: !1
@@ -3647,6 +3648,7 @@ var sr = /* @__PURE__ */ p({
 			_: 1
 		}, 8, ["disabled"]), f(Q, {
 			variant: e.confirmVariant,
+			icon: e.confirmIcon,
 			loading: e.confirmLoading,
 			disabled: e.confirmDisabled,
 			onClick: r[1] ||= (e) => n("confirm")
@@ -3655,6 +3657,7 @@ var sr = /* @__PURE__ */ p({
 			_: 1
 		}, 8, [
 			"variant",
+			"icon",
 			"loading",
 			"disabled"
 		])]));
@@ -4139,7 +4142,7 @@ var sr = /* @__PURE__ */ p({
 		}), (i, h) => (w(), s("div", Bi, [
 			t.label ? (w(), s("label", {
 				key: 0,
-				class: "text-color-gray-700 justify-start body-normal text-sm",
+				class: "text-color-gray-700 justify-start small-normal",
 				for: A(u)
 			}, [d(k(t.label) + " ", 1), t.required ? (w(), s("span", Hi, "*")) : o("", !0)], 8, Vi)) : o("", !0),
 			f($, {
@@ -5590,7 +5593,7 @@ var Pa = { render: Na }, Fa = { class: "flex items-center justify-end self-stret
 	}
 }), ls = { class: "flex flex-col gap-1" }, us = {
 	key: 0,
-	class: "text-color-gray-700 justify-start body-normal text-sm"
+	class: "text-color-gray-700 justify-start small-normal"
 }, ds = ["onClick"], fs = {
 	key: 1,
 	class: "extra-small-semibold"

package/package.json

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

package/src/components/ColorPicker/ColorPicker.vue

@@ -113,11 +113,7 @@ watch(
 
 <template>
   <div class="inline-flex flex-col gap-1" :class="{ 'w-full': fullWidth }">
-    <label
-      v-if="label"
-      :for="PICKER_ID"
-      class="text-color-gray-700 justify-start body-normal text-sm"
-    >
+    <label v-if="label" :for="PICKER_ID" class="text-color-gray-700 justify-start small-normal">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
     </label>

package/src/components/CountrySelect/CountrySelect.vue

@@ -72,11 +72,7 @@ const onOpen = async () => {
 
 <template>
   <div class="inline-flex flex-col gap-1">
-    <label
-      v-if="label"
-      class="text-color-gray-700 justify-start body-normal text-sm"
-      :for="selectId"
-    >
+    <label v-if="label" class="text-color-gray-700 justify-start small-normal" :for="selectId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
     </label>

package/src/components/InputField/InputField.vue

@@ -51,11 +51,7 @@ const decrement = () => {
 
 <template>
   <div class="inline-flex flex-col gap-1">
-    <label
-      v-if="label"
-      class="text-color-gray-700 justify-start body-normal text-sm"
-      :for="INPUT_ID"
-    >
+    <label v-if="label" class="text-color-gray-700 justify-start small-normal" :for="INPUT_ID">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
     </label>

package/src/components/InputSelect/InputSelect.vue

@@ -50,11 +50,7 @@ const select = (opt: SelectOption, close: () => void) => {
 
 <template>
   <div class="inline-flex flex-col gap-1">
-    <label
-      v-if="label"
-      class="text-color-gray-700 justify-start body-normal text-sm"
-      :for="fieldId"
-    >
+    <label v-if="label" class="text-color-gray-700 justify-start small-normal" :for="fieldId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
     </label>

package/src/components/ModalFooter/ModalFooter.vue

@@ -6,6 +6,10 @@ import NexxtButton from '../Button/Button.vue'
 // literal union rejecting it. The known values still autocomplete.
 type ButtonVariant = InstanceType<typeof NexxtButton>['$props']['variant']
 
+// Derived from NexxtButton rather than restated, so the two cannot drift when
+// the icon set changes.
+type ButtonIcon = InstanceType<typeof NexxtButton>['$props']['icon']
+
 interface NexxtModalFooterProps {
   /**
    * Label of the cancel button. Required: this library has no i18n layer, so
@@ -24,6 +28,8 @@ interface NexxtModalFooterProps {
    * NexxtButton's own default, so it renders like a plain `<NexxtButton>`.
    */
   confirmVariant?: ButtonVariant | (string & {})
+  /** Icon rendered on the action button, before its label. */
+  confirmIcon?: ButtonIcon
   /** Put the action button in its loading state. */
   confirmLoading?: boolean
   /** Disable the action button. */
@@ -60,6 +66,7 @@ const emit = defineEmits<{ cancel: []; confirm: [] }>()
     </NexxtButton>
     <NexxtButton
       :variant="confirmVariant as ButtonVariant"
+      :icon="confirmIcon"
       :loading="confirmLoading"
       :disabled="confirmDisabled"
       @click="emit('confirm')"

package/src/components/Select/Select.vue

@@ -123,11 +123,7 @@ watch(model, () => {
 
 <template>
   <div class="inline-flex flex-col gap-1">
-    <label
-      v-if="label"
-      class="text-color-gray-700 justify-start body-normal text-sm"
-      :for="selectId"
-    >
+    <label v-if="label" class="text-color-gray-700 justify-start small-normal" :for="selectId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
     </label>

package/src/components/ToggleGroup/ToggleGroup.vue

@@ -70,7 +70,7 @@ onMounted(async () => {
 
 <template>
   <div class="flex flex-col gap-1">
-    <label v-if="label" class="text-color-gray-700 justify-start body-normal text-sm">
+    <label v-if="label" class="text-color-gray-700 justify-start small-normal">
       {{ label }}
     </label>
     <div