maz-ui 4.0.0-beta.26 → 4.0.0-beta.27

package/dist/assets/MazInputPhoneNumber.DQKElfIM.css

@@ -0,0 +1 @@
+.m-input-phone-number[data-v-1180c2f2]{vertical-align:top;align-items:center;display:inline-flex;position:relative}.m-input-phone-number.--block[data-v-1180c2f2]{width:100%}.m-input-phone-number.--col[data-v-1180c2f2]{flex-direction:column}.m-input-phone-number.--col .m-input-phone-number__country-select[data-v-1180c2f2],.m-input-phone-number.--col .m-input-phone-number__country-select[data-v-1180c2f2] .m-select-country__select{min-width:100%}.m-input-phone-number.--col .m-input-phone-number__country-select[data-v-1180c2f2] .m-select-country__select .m-input-wrapper{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--maz-radius)}.m-input-phone-number.--row[data-v-1180c2f2]{flex-direction:row}.m-input-phone-number.--row .m-input-phone-number__country-select[data-v-1180c2f2] .m-select-country__select .m-input-wrapper{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.m-input-phone-number.--responsive[data-v-1180c2f2]{flex-direction:column}@media (min-width:576px){.m-input-phone-number.--responsive[data-v-1180c2f2]{flex-direction:row}}.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-1180c2f2]{min-width:100%}@media (min-width:576px){.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-1180c2f2]{min-width:inherit}}.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-1180c2f2] .m-select-country__select{min-width:100%}@media (min-width:576px){.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-1180c2f2] .m-select-country__select{min-width:inherit}}.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-1180c2f2] .m-input-wrapper{border-bottom-right-radius:0;border-bottom-left-radius:0}@media (min-width:576px){.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-1180c2f2] .m-input-wrapper{border-bottom-right-radius:var(--maz-radius);border-bottom-left-radius:var(--maz-radius);border-top-right-radius:0;border-bottom-right-radius:0}}.m-input-phone-number__country-list-code[data-v-1180c2f2]{text-align:center;--maz-tw-text-opacity:1;min-width:2rem;color:hsl(var(--maz-muted)/var(--maz-tw-text-opacity,1))}

package/dist/assets/{MazSelectCountry.D3fSImar.css → MazSelectCountry.EW8fKXFX.css}

@@ -1 +1 @@
-.m-select-country[data-v-2edc88d7]{display:inline-flex;position:relative}.m-select-country__country-flag[data-v-2edc88d7]{z-index:4;cursor:pointer;border:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:absolute;top:1.25rem;left:.813rem}.m-select-country__country-flag.--should-have-bottom-flag[data-v-2edc88d7]{bottom:2px}.m-select-country__select[data-v-2edc88d7] .m-input-label{padding:0!important}.m-select-country__select__item[data-v-2edc88d7]{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.5rem;width:100%;font-size:.875rem;line-height:1.25rem;display:flex;overflow:hidden}.m-select-country__select__item__flag-container[data-v-2edc88d7]{justify-content:center;align-items:center;display:flex}.m-select-country__select__item__list-flag[data-v-2edc88d7]{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-primary-500)/var(--maz-tw-bg-opacity,1));width:1.25rem;height:1.25rem;color:hsl(var(--maz-primary-foreground)/.8);border-radius:9999px;justify-content:center;align-items:center;font-size:.75rem;line-height:1;display:flex}
+.m-select-country[data-v-48f9a413]{display:inline-flex;position:relative}.m-select-country__country-flag[data-v-48f9a413]{z-index:4;cursor:pointer;border:none;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:absolute;top:1.25rem;left:.813rem}.m-select-country__country-flag.--should-have-bottom-flag[data-v-48f9a413]{bottom:2px}.m-select-country__select[data-v-48f9a413] .m-input-label{padding:0!important}.m-select-country__select__item[data-v-48f9a413]{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.5rem;width:100%;font-size:.875rem;line-height:1.25rem;display:flex;overflow:hidden}.m-select-country__select__item__flag-container[data-v-48f9a413]{justify-content:center;align-items:center;display:flex}.m-select-country__select__item__list-flag[data-v-48f9a413]{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-primary-500)/var(--maz-tw-bg-opacity,1));width:1.25rem;height:1.25rem;color:hsl(var(--maz-primary-foreground)/.8);border-radius:9999px;justify-content:center;align-items:center;font-size:.75rem;line-height:1;display:flex}

package/dist/assets/{PhoneInput.BJiKqOF6.css → PhoneInput.DCWA_-gC.css}

@@ -1 +1 @@
-.m-phone-input[data-v-c6ce171d]{flex:1;min-width:13rem}.m-phone-input.--error[data-v-c6ce171d],.m-phone-input.--focused[data-v-c6ce171d]{z-index:1}.m-input-phone-number[data-v-c6ce171d]{display:none}.m-input-phone-number.--responsive .m-phone-input[data-v-c6ce171d]{margin-top:calc(var(--maz-border-width)*-1);flex:none}@media (min-width:425px){.m-input-phone-number.--responsive .m-phone-input[data-v-c6ce171d]{margin-left:calc(var(--maz-border-width)*-1);flex:auto;margin-top:0}}.m-input-phone-number.--responsive .m-phone-input.--border-radius[data-v-c6ce171d] .m-input-wrapper{border-top-left-radius:0;border-top-right-radius:0}@media (min-width:425px){.m-input-phone-number.--responsive .m-phone-input.--border-radius[data-v-c6ce171d] .m-input-wrapper{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--maz-radius)}}.m-input-phone-number.--row .m-phone-input[data-v-c6ce171d]{margin-left:calc(var(--maz-border-width)*-1);flex:auto}.m-input-phone-number.--row .m-phone-input.--border-radius[data-v-c6ce171d] .m-input-wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.m-input-phone-number.--col .m-phone-input[data-v-c6ce171d]{margin-top:calc(var(--maz-border-width)*-1);flex:none;margin-left:0}.m-input-phone-number.--col .m-phone-input.--border-radius[data-v-c6ce171d] .m-input-wrapper{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:var(--maz-radius)}
+.m-phone-input[data-v-6446d93b]{flex:1;min-width:13rem}.m-phone-input.--error[data-v-6446d93b],.m-phone-input.--focused[data-v-6446d93b]{z-index:1}.m-input-phone-number[data-v-6446d93b]{display:none}.m-input-phone-number.--responsive .m-phone-input[data-v-6446d93b]{margin-top:calc(var(--maz-border-width)*-1);flex:none}@media (min-width:425px){.m-input-phone-number.--responsive .m-phone-input[data-v-6446d93b]{margin-left:calc(var(--maz-border-width)*-1);flex:auto;margin-top:0}}.m-input-phone-number.--responsive .m-phone-input.--border-radius[data-v-6446d93b] .m-input-wrapper{border-top-left-radius:0;border-top-right-radius:0}@media (min-width:425px){.m-input-phone-number.--responsive .m-phone-input.--border-radius[data-v-6446d93b] .m-input-wrapper{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--maz-radius)}}.m-input-phone-number.--row .m-phone-input[data-v-6446d93b]{margin-left:calc(var(--maz-border-width)*-1);flex:auto}.m-input-phone-number.--row .m-phone-input.--border-radius[data-v-6446d93b] .m-input-wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.m-input-phone-number.--col .m-phone-input[data-v-6446d93b]{margin-top:calc(var(--maz-border-width)*-1);flex:none;margin-left:0}.m-input-phone-number.--col .m-phone-input.--border-radius[data-v-6446d93b] .m-input-wrapper{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:var(--maz-radius)}

package/dist/chunks/{MazInputPhoneNumber.Ch-PCGiv.js → MazInputPhoneNumber.BVHi0OiN.js}

@@ -3,7 +3,7 @@ import { u as useTranslations } from "./useTranslations.D5aoYwD7.js";
 import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
 import { getCountryCallingCode, getCountries, isSupportedCountry, getExampleNumber, parsePhoneNumberFromString, AsYouType } from "libphonenumber-js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazInputPhoneNumber.CrXS7DOY.css';const examples = ref();
+import '../assets/MazInputPhoneNumber.DQKElfIM.css';const examples = ref();
 function isCountryAvailable(locale) {
   try {
     const response = isSupportedCountry(locale);
@@ -57,9 +57,9 @@ function getPhoneNumberExample(countryCode) {
 }
 function getAsYouTypeFormat(countryCode, phoneNumber) {
   try {
-    return !phoneNumber || !countryCode ? void 0 : new AsYouType(countryCode).input(phoneNumber);
+    return !phoneNumber || !countryCode || typeof countryCode != "string" || countryCode.length !== 2 ? phoneNumber : new AsYouType(countryCode).input(phoneNumber);
   } catch (error) {
-    throw new Error(`[MazInputPhoneNumber](getAsYouTypeFormat) ${error}`);
+    return console.error(`[MazInputPhoneNumber](getAsYouTypeFormat) Error with countryCode: "${countryCode}", phoneNumber: "${phoneNumber}"`, error), phoneNumber;
   }
 }
 function isSameCountryCallingCode(countryCode, countryCode2) {
@@ -149,11 +149,18 @@ async function fetchCountryCode() {
     };
   }
 }
+function sanitizePhoneNumber(input) {
+  if (!input)
+    return "";
+  const regex = new RegExp(/[^\d ()+-]/g);
+  return input.replaceAll(regex, "").trim();
+}
 function useMazInputPhoneNumber() {
   return {
     fetchCountryCode,
     getBrowserLocale,
-    getCountryList
+    getCountryList,
+    sanitizePhoneNumber
   };
 }
 const _hoisted_1 = ["id"], _hoisted_2 = { class: "m-input-phone-number__country-list-code" }, _sfc_main = /* @__PURE__ */ defineComponent({
@@ -185,7 +192,7 @@ const _hoisted_1 = ["id"], _hoisted_2 = { class: "m-input-phone-number__country-
     hideCountrySelect: { type: Boolean, default: !1 },
     showCodeInList: { type: Boolean, default: !1 },
     customCountriesList: { default: void 0 },
-    autoFormat: { type: Boolean, default: !0 },
+    autoFormat: { type: [String, Boolean], default: "blur" },
     countryLocale: { default: void 0 },
     validationError: { type: Boolean, default: !0 },
     validationSuccess: { type: Boolean, default: !0 },
@@ -209,7 +216,7 @@ const _hoisted_1 = ["id"], _hoisted_2 = { class: "m-input-phone-number__country-
   },
   emits: ["update:model-value", "country-code", "update:country-code", "data"],
   setup(__props, { emit: __emit }) {
-    const props = __props, emits = __emit, MazSelectCountry = defineAsyncComponent(() => import("../components/MazSelectCountry.js")), PhoneInput = defineAsyncComponent(() => import("./PhoneInput.BzL1_XS5.js")), { fetchCountryCode: fetchCountryCode2, getBrowserLocale: getBrowserLocale2, getCountryList: getCountryList2 } = useMazInputPhoneNumber(), { isCountryAvailable: isCountryAvailable2, getPhoneNumberResults: getPhoneNumberResults2 } = useLibphonenumber(), instanceId = useInstanceUniqId({
+    const props = __props, emits = __emit, MazSelectCountry = defineAsyncComponent(() => import("../components/MazSelectCountry.js")), PhoneInput = defineAsyncComponent(() => import("./PhoneInput.D9vRIgS6.js")), { fetchCountryCode: fetchCountryCode2, getBrowserLocale: getBrowserLocale2, getCountryList: getCountryList2 } = useMazInputPhoneNumber(), { isCountryAvailable: isCountryAvailable2, getPhoneNumberResults: getPhoneNumberResults2 } = useLibphonenumber(), instanceId = useInstanceUniqId({
       componentName: "MazInputPhoneNumber",
       providedId: props.id
     }), phoneNumber = ref(), selectedCountry = ref(), { t } = useTranslations(), messages = computed(() => ({
@@ -222,7 +229,7 @@ const _hoisted_1 = ["id"], _hoisted_2 = { class: "m-input-phone-number__country-
         placeholder: props.translations?.phoneInput?.placeholder || t("inputPhoneNumber.phoneInput.placeholder"),
         example: props.translations?.phoneInput?.example
       }
-    })), isPhoneNumberInternalUpdate = ref(!1), isCountryInternalUpdate = ref(!1), hasAutoFormat = computed(() => props.autoFormat), results = ref({
+    })), isPhoneNumberInternalUpdate = ref(!1), isCountryInternalUpdate = ref(!1), results = ref({
       isValid: !1,
       countryCode: props.countryCode,
       phoneNumber: props.modelValue
@@ -273,7 +280,7 @@ const _hoisted_1 = ["id"], _hoisted_2 = { class: "m-input-phone-number__country-
       updateTheResults({ phone: newPhoneNumber }), results.value.parsedCountryCode && results.value.parsedCountryCode !== selectedCountry.value && onCountryChanged({
         countryCode: results.value.parsedCountryCode,
         updateResults: !1
-      }), results.value.isValid && hasAutoFormat.value ? phoneNumber.value = results.value.formatNational?.trim().replace(new RegExp(/\D/g), "") : phoneNumber.value = newPhoneNumber, isPhoneNumberInternalUpdate.value = !0, results.value.e164 ? emits("update:model-value", results.value.e164) : emits("update:model-value", results.value.phoneNumber), setTimeout(() => {
+      }), results.value.isValid && (props.autoFormat === "blur" || props.autoFormat === "typing") ? phoneNumber.value = results.value.formatNational?.trim().replace(new RegExp(/\D/g), "") : phoneNumber.value = newPhoneNumber, isPhoneNumberInternalUpdate.value = !0, results.value.e164 ? emits("update:model-value", results.value.e164) : emits("update:model-value", results.value.phoneNumber), setTimeout(() => {
         isPhoneNumberInternalUpdate.value = !1;
       }, 0);
     }
@@ -381,7 +388,7 @@ const _hoisted_1 = ["id"], _hoisted_2 = { class: "m-input-phone-number__country-
       }, { ..._ctx.$attrs, ..._ctx.phoneInputAttributes }, {
         color: _ctx.color,
         size: _ctx.size,
-        "auto-format": hasAutoFormat.value,
+        "auto-format": _ctx.autoFormat,
         example: _ctx.example,
         block: "",
         disabled: _ctx.disabled,
@@ -396,8 +403,9 @@ const _hoisted_1 = ["id"], _hoisted_2 = { class: "m-input-phone-number__country-
       }), null, 16, ["id", "model-value", "color", "size", "auto-format", "example", "disabled", "name", "has-radius", "success", "error", "locales", "label", "placeholder"])
     ], 14, _hoisted_1));
   }
-}), MazInputPhoneNumber = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-941c0e2b"]]);
+}), MazInputPhoneNumber = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1180c2f2"]]);
 export {
   MazInputPhoneNumber as M,
+  useMazInputPhoneNumber as a,
   useLibphonenumber as u
 };

package/dist/chunks/{PhoneInput.BzL1_XS5.js → PhoneInput.D9vRIgS6.js}

@@ -1,10 +1,10 @@
-import { defineComponent, mergeModels, useModel, ref, computed, onMounted, watch, useTemplateRef, createBlock, openBlock, mergeProps, unref } from "vue";
+import { defineComponent, mergeModels, useModel, ref, computed, onMounted, useTemplateRef, createBlock, openBlock, mergeProps, unref } from "vue";
 import { u as useTranslations } from "./useTranslations.D5aoYwD7.js";
 import { useInjectStrict } from "../composables/useInjectStrict.js";
 import MazInput from "../components/MazInput.js";
-import { u as useLibphonenumber } from "./MazInputPhoneNumber.Ch-PCGiv.js";
+import { u as useLibphonenumber, a as useMazInputPhoneNumber } from "./MazInputPhoneNumber.BVHi0OiN.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/PhoneInput.BJiKqOF6.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/PhoneInput.DCWA_-gC.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PhoneInput",
   props: /* @__PURE__ */ mergeModels({
     style: {},
@@ -40,26 +40,22 @@ import '../assets/PhoneInput.BJiKqOF6.css';const _sfc_main = /* @__PURE__ */ def
     locales: {},
     example: { type: Boolean },
     hasRadius: { type: Boolean },
-    autoFormat: { type: Boolean }
+    autoFormat: { type: [String, Boolean] }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const { getPhoneNumberExample, getAsYouTypeFormat, loadExamples } = useLibphonenumber(), { results, selectedCountry } = useInjectStrict("mazInputPhoneNumberData"), modelValue = useModel(__props, "modelValue");
-    function extractRawDigits(input) {
-      return input ? input.replace(/\D/g, "") : "";
-    }
-    const rawValue = ref(extractRawDigits(modelValue.value)), inputFocused = ref(!1), asYouTypeFormatted = computed(() => {
-      const phoneNumberToFormat = rawValue.value;
-      return getAsYouTypeFormat(selectedCountry.value, rawValue.value) || phoneNumberToFormat;
-    }), displayedPhoneNumber = computed(() => __props.autoFormat ? asYouTypeFormatted.value : rawValue.value);
-    function handleInput(value) {
-      const rawDigits = extractRawDigits(value);
-      rawValue.value = rawDigits, modelValue.value = rawDigits;
-    }
-    const { t } = useTranslations();
+    const { getPhoneNumberExample, getAsYouTypeFormat, loadExamples } = useLibphonenumber(), { sanitizePhoneNumber } = useMazInputPhoneNumber(), { results, selectedCountry } = useInjectStrict("mazInputPhoneNumberData"), modelValue = useModel(__props, "modelValue"), inputFocused = ref(!1), asYouTypeFormatted = computed(() => {
+      const phoneNumberToFormat = results.value.isValid ? results.value.formatNational : modelValue.value;
+      return getAsYouTypeFormat(selectedCountry.value, phoneNumberToFormat) || phoneNumberToFormat;
+    }), displayedPhoneNumber = computed({
+      get: () => !inputFocused.value && __props.autoFormat === "blur" || __props.autoFormat === "typing" ? asYouTypeFormatted.value : modelValue.value,
+      set: (value) => {
+        modelValue.value = sanitizePhoneNumber(value);
+      }
+    }), { t } = useTranslations();
     function getCountryPhoneNumberExample(selectedCountry2) {
       const example = getPhoneNumberExample(selectedCountry2);
       if (example)
@@ -78,9 +74,6 @@ import '../assets/PhoneInput.BJiKqOF6.css';const _sfc_main = /* @__PURE__ */ def
     }), inputProps = computed(() => __props.placeholder ? { placeholder: inputLabelOrPlaceholder.value } : { label: inputLabelOrPlaceholder.value });
     onMounted(() => {
       __props.example && loadExamples();
-    }), watch(() => modelValue.value, (newValue) => {
-      const newRawValue = extractRawDigits(newValue);
-      newRawValue !== rawValue.value && (rawValue.value = newRawValue);
     });
     const inputRef = useTemplateRef("input");
     return __expose({
@@ -93,7 +86,8 @@ import '../assets/PhoneInput.BJiKqOF6.css';const _sfc_main = /* @__PURE__ */ def
       }
     }), (_ctx, _cache) => (openBlock(), createBlock(MazInput, mergeProps({ id: _ctx.id }, { ..._ctx.$attrs, ...inputProps.value }, {
       ref: "input",
-      "model-value": displayedPhoneNumber.value,
+      modelValue: displayedPhoneNumber.value,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => displayedPhoneNumber.value = $event),
       disabled: _ctx.disabled,
       color: _ctx.color,
       error: _ctx.error,
@@ -110,12 +104,11 @@ import '../assets/PhoneInput.BJiKqOF6.css';const _sfc_main = /* @__PURE__ */ def
           "--focused": inputFocused.value
         }
       ]],
-      "onUpdate:modelValue": handleInput,
-      onFocus: _cache[0] || (_cache[0] = ($event) => inputFocused.value = !0),
-      onBlur: _cache[1] || (_cache[1] = ($event) => inputFocused.value = !1)
-    }), null, 16, ["id", "model-value", "disabled", "color", "error", "size", "success", "name", "inputmode", "autocomplete", "class"]));
+      onFocus: _cache[1] || (_cache[1] = ($event) => inputFocused.value = !0),
+      onBlur: _cache[2] || (_cache[2] = ($event) => inputFocused.value = !1)
+    }), null, 16, ["id", "modelValue", "disabled", "color", "error", "size", "success", "name", "inputmode", "autocomplete", "class"]));
   }
-}), PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c6ce171d"]]);
+}), PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6446d93b"]]);
 export {
   PhoneInput as default
 };

package/dist/components/MazInputPhoneNumber.js

@@ -1,4 +1,4 @@
-import { M } from "../chunks/MazInputPhoneNumber.Ch-PCGiv.js";
+import { M } from "../chunks/MazInputPhoneNumber.BVHi0OiN.js";
 import "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
 export {
   M as default

package/dist/components/MazSelectCountry.js

@@ -5,7 +5,7 @@ import { useDisplayNames } from "../composables/useDisplayNames.js";
 import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
 import MazSelect from "./MazSelect.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazSelectCountry.D3fSImar.css';function getBrowserLocale() {
+import '../assets/MazSelectCountry.EW8fKXFX.css';function getBrowserLocale() {
   try {
     return isServer() ? void 0 : globalThis.navigator.language;
   } catch (error) {
@@ -126,7 +126,7 @@ const _hoisted_1 = {
         required: _ctx.required,
         "search-function": _ctx.searchFunction,
         "format-input-value": _ctx.formatInputValue,
-        "search-placeholder": messages.value.searchPlaceholder,
+        translations: messages.value,
         "search-threshold": _ctx.searchThreshold,
         options: countriesOptions.value,
         hint: _ctx.hint,
@@ -191,10 +191,10 @@ const _hoisted_1 = {
           ], 2)
         ]),
         _: 3
-      }, 16, ["id", "model-value", "option-value-key", "option-label-key", "option-input-value-key", "max-list-width", "min-list-width", "disabled", "color", "placeholder", "label", "size", "list-position", "error", "warning", "success", "search", "block", "autocomplete", "item-height", "max-list-height", "min-list-height", "required", "search-function", "format-input-value", "search-placeholder", "search-threshold", "options", "hint", "open"])
+      }, 16, ["id", "model-value", "option-value-key", "option-label-key", "option-input-value-key", "max-list-width", "min-list-width", "disabled", "color", "placeholder", "label", "size", "list-position", "error", "warning", "success", "search", "block", "autocomplete", "item-height", "max-list-height", "min-list-height", "required", "search-function", "format-input-value", "translations", "search-threshold", "options", "hint", "open"])
     ], 6));
   }
-}), MazSelectCountry = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2edc88d7"]]);
+}), MazSelectCountry = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-48f9a413"]]);
 export {
   MazSelectCountry as default
 };

package/dist/components/index.js

@@ -27,7 +27,7 @@ import { default as default23 } from "./MazIcon.js";
 import { default as default24 } from "./MazInput.js";
 import { default as default25 } from "./MazInputCode.js";
 import { _ as _4 } from "../chunks/MazInputNumber.vue_vue_type_style_index_0_lang.B6DYpHfi.js";
-import { M as M2 } from "../chunks/MazInputPhoneNumber.Ch-PCGiv.js";
+import { M as M2 } from "../chunks/MazInputPhoneNumber.BVHi0OiN.js";
 import { _ as _5 } from "../chunks/MazInputPrice.vue_vue_type_script_setup_true_lang.BA6TDX-T.js";
 import { default as default26 } from "./MazInputTags.js";
 import { default as default27 } from "./MazLazyImg.js";

package/dist/composables/useInstanceUniqId.js

@@ -1,9 +1,10 @@
-import { computed, useId } from "vue";
+import { useId, computed } from "vue";
 function useInstanceUniqId({
   componentName,
   providedId
 }) {
-  return computed(() => providedId ?? `${componentName}-${useId().replace(/:/g, "")}`);
+  const generatedId = useId();
+  return computed(() => providedId || `${componentName}-${generatedId.replace(/:/g, "")}`);
 }
 export {
   useInstanceUniqId

package/dist/types/components/MazInputPhoneNumber/PhoneInput.vue.d.ts

@@ -7,7 +7,7 @@ type PhoneInputProps = Omit<MazInputProps, 'modelValue'> & {
     };
     example: boolean;
     hasRadius: boolean;
-    autoFormat: boolean;
+    autoFormat: 'blur' | 'typing' | 'disabled' | false;
 };
 type __VLS_Props = PhoneInputProps;
 type __VLS_PublicProps = {

package/dist/types/components/MazInputPhoneNumber/useLibphonenumber.d.ts

@@ -8,7 +8,7 @@ declare function getPhoneNumberResults({ phoneNumber, countryCode, checkCountryC
 }): MazInputPhoneNumberData;
 declare function getPhoneNumberExamplesFile(): Promise<Examples>;
 declare function getPhoneNumberExample(countryCode?: CountryCode | undefined | null): string | undefined;
-declare function getAsYouTypeFormat(countryCode?: CountryCode | undefined | null, phoneNumber?: string | undefined | null): string | undefined;
+declare function getAsYouTypeFormat(countryCode?: CountryCode | undefined | null, phoneNumber?: string | undefined | null): string | undefined | null;
 declare function isSameCountryCallingCode(countryCode: CountryCode, countryCode2: CountryCode): boolean;
 declare function loadExamples(): Promise<void>;
 export declare function useLibphonenumber(): {

package/dist/types/components/MazInputPhoneNumber/useMazInputPhoneNumber.d.ts

@@ -16,9 +16,11 @@ declare function fetchCountryCode(): Promise<{
     data: undefined;
     error: Error;
 }>;
+declare function sanitizePhoneNumber(input?: string | undefined | null): string;
 export declare function useMazInputPhoneNumber(): {
     fetchCountryCode: typeof fetchCountryCode;
     getBrowserLocale: typeof getBrowserLocale;
     getCountryList: typeof getCountryList;
+    sanitizePhoneNumber: typeof sanitizePhoneNumber;
 };
 export {};

package/dist/types/components/MazInputPhoneNumber.vue.d.ts

@@ -171,12 +171,11 @@ export interface MazInputPhoneNumberProps {
     customCountriesList?: Record<CountryCode, string>;
     /**
      * Disabled auto-format when phone is valid
-     * @default true
+     * @default 'blur'
      */
-    autoFormat?: boolean;
+    autoFormat?: 'blur' | 'typing' | 'disabled' | false;
     /**
      * Locale of country list
-     * @type {string}
      * @example "fr-FR"
      */
     countryLocale?: string;
@@ -298,7 +297,7 @@ declare function __VLS_template(): {
             };
             example: boolean;
             hasRadius: boolean;
-            autoFormat: boolean;
+            autoFormat: "blur" | "typing" | "disabled" | false;
         }> & Readonly<{
             "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
         }>, {
@@ -324,7 +323,7 @@ declare function __VLS_template(): {
             };
             example: boolean;
             hasRadius: boolean;
-            autoFormat: boolean;
+            autoFormat: "blur" | "typing" | "disabled" | false;
         }> & Readonly<{
             "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
         }>, {
@@ -356,7 +355,7 @@ declare const __VLS_component: import('vue').DefineComponent<MazInputPhoneNumber
     searchThreshold: number;
     hideFlags: boolean;
     showCodeInList: boolean;
-    autoFormat: boolean;
+    autoFormat: "blur" | "typing" | "disabled" | false;
     hideCountrySelect: boolean;
     customCountriesList: Record<CountryCode, string>;
     countryLocale: string;
@@ -380,7 +379,7 @@ declare const __VLS_component: import('vue').DefineComponent<MazInputPhoneNumber
         };
         example: boolean;
         hasRadius: boolean;
-        autoFormat: boolean;
+        autoFormat: "blur" | "typing" | "disabled" | false;
     }> & Readonly<{
         "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
     }>, {
@@ -406,7 +405,7 @@ declare const __VLS_component: import('vue').DefineComponent<MazInputPhoneNumber
         };
         example: boolean;
         hasRadius: boolean;
-        autoFormat: boolean;
+        autoFormat: "blur" | "typing" | "disabled" | false;
     }> & Readonly<{
         "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
     }>, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maz-ui",
   "type": "module",
-  "version": "4.0.0-beta.26",
+  "version": "4.0.0-beta.27",
   "description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -162,7 +162,7 @@
     "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
   "peerDependencies": {
-    "nuxt": "^3.4.0",
+    "nuxt": ">=3.4.0 <5.0.0",
     "unplugin-auto-import": ">=19.0.0 <20.0.0",
     "unplugin-vue-components": ">=28.0.0 <29.0.0",
     "vue": "^3.5.0",
@@ -184,11 +184,11 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
-    "@maz-ui/cli": "4.0.0-beta.26",
-    "@maz-ui/icons": "4.0.0-beta.26",
-    "@maz-ui/themes": "4.0.0-beta.25",
-    "@maz-ui/translations": "4.0.0-beta.25",
-    "@maz-ui/utils": "4.0.0-beta.25",
+    "@maz-ui/cli": "4.0.0-beta.27",
+    "@maz-ui/icons": "4.0.0-beta.27",
+    "@maz-ui/themes": "4.0.0-beta.27",
+    "@maz-ui/translations": "4.0.0-beta.27",
+    "@maz-ui/utils": "4.0.0-beta.27",
     "chart.js": "^4.5.0",
     "dayjs": "^1.11.13",
     "libphonenumber-js": "^1.12.10",
@@ -197,7 +197,7 @@
   },
   "devDependencies": {
     "@maz-ui/eslint-config": "4.0.0-beta.25",
-    "@maz-ui/node": "4.0.0-beta.26",
+    "@maz-ui/node": "4.0.0-beta.27",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-v8": "^3.2.4",
     "@vue/compiler-sfc": "^3.5.18",
@@ -238,5 +238,5 @@
     "*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix",
     "*.{vue,css,scss,postcss,pcss}": "stylelint --fix --allow-empty-input"
   },
-  "gitHead": "bfbe28abf5a3c3aae95b64833c681ff6cbe5bd42"
+  "gitHead": "fc5b5e42f115cc8b7fe4d6436defb078e3f36662"
 }

package/dist/assets/MazInputPhoneNumber.CrXS7DOY.css

@@ -1 +0,0 @@
-.m-input-phone-number[data-v-941c0e2b]{vertical-align:top;align-items:center;display:inline-flex;position:relative}.m-input-phone-number.--block[data-v-941c0e2b]{width:100%}.m-input-phone-number.--col[data-v-941c0e2b]{flex-direction:column}.m-input-phone-number.--col .m-input-phone-number__country-select[data-v-941c0e2b],.m-input-phone-number.--col .m-input-phone-number__country-select[data-v-941c0e2b] .m-select-country__select{min-width:100%}.m-input-phone-number.--col .m-input-phone-number__country-select[data-v-941c0e2b] .m-select-country__select .m-input-wrapper{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--maz-radius)}.m-input-phone-number.--row[data-v-941c0e2b]{flex-direction:row}.m-input-phone-number.--row .m-input-phone-number__country-select[data-v-941c0e2b] .m-select-country__select .m-input-wrapper{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.m-input-phone-number.--responsive[data-v-941c0e2b]{flex-direction:column}@media (min-width:576px){.m-input-phone-number.--responsive[data-v-941c0e2b]{flex-direction:row}}.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-941c0e2b]{min-width:100%}@media (min-width:576px){.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-941c0e2b]{min-width:inherit}}.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-941c0e2b] .m-select-country__select{min-width:100%}@media (min-width:576px){.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-941c0e2b] .m-select-country__select{min-width:inherit}}.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-941c0e2b] .m-input-wrapper{border-bottom-right-radius:0;border-bottom-left-radius:0}@media (min-width:576px){.m-input-phone-number.--responsive .m-input-phone-number__country-select[data-v-941c0e2b] .m-input-wrapper{border-bottom-right-radius:var(--maz-radius);border-bottom-left-radius:var(--maz-radius);border-top-right-radius:0;border-bottom-right-radius:0}}.m-input-phone-number__country-list-code[data-v-941c0e2b]{text-align:center;--maz-tw-text-opacity:1;min-width:2rem;color:hsl(var(--maz-muted)/var(--maz-tw-text-opacity,1))}