@desource/phone-mask-vue 0.3.0 → 1.0.0

package/dist/index.js

@@ -9,67 +9,92 @@ var lib = (function(exports, vue) {
     const e2 = [...o2.toUpperCase()].map((t2) => (t2.codePointAt(0) ?? 0) + 127397);
     return String.fromCodePoint(...e2);
   };
-  const t = Object.entries(M), divideMask = (e2) => e2.split(/ (.*)/s);
+  const o$1 = "en", n = /* @__PURE__ */ new Map(), getDisplayNames = (e2) => {
+    const t2 = e2.toLowerCase(), s2 = n.get(t2);
+    if (s2) return s2;
+    const r = new Intl.DisplayNames([e2], { type: "region" });
+    if (n.size >= 10) {
+      for (const e3 of n.keys()) if (e3 !== o$1) {
+        n.delete(e3);
+        break;
+      }
+    }
+    return n.set(t2, r), r;
+  }, s$1 = Object.entries(M), divideMask = (e2) => e2.split(/ (.*)/s);
   function getCodeAndMask(e2) {
-    let n = "", t2 = "";
+    let t2 = "", o2 = "";
     if (Array.isArray(e2)) {
-      const o2 = [];
-      for (const t3 of e2) {
-        const [e3, s2] = divideMask(t3);
-        n || (n = e3), o2.push(s2);
+      const n2 = [];
+      for (const o3 of e2) {
+        const [e3, s2] = divideMask(o3);
+        t2 || (t2 = e3), n2.push(s2);
       }
-      t2 = o2;
+      o2 = n2;
     } else {
-      const [o2, s2] = divideMask(e2);
-      n = o2, t2 = s2;
+      const [n2, s2] = divideMask(e2);
+      t2 = n2, o2 = s2;
     }
-    return [n, t2];
+    return [t2, o2];
   }
-  t.map(([e2, n]) => ({ id: e2, mask: n }));
-  t.reduce((e2, [n, t2]) => {
-    const [o2, s2] = getCodeAndMask(t2);
-    return e2[n] = { code: o2, mask: s2 }, e2;
+  s$1.map(([e2, t2]) => ({ id: e2, mask: t2 }));
+  s$1.reduce((e2, [t2, o2]) => {
+    const [n2, s2] = getCodeAndMask(o2);
+    return e2[t2] = { code: n2, mask: s2 }, e2;
   }, {});
-  t.map(([e2, n]) => {
-    const [t2, o2] = getCodeAndMask(n);
-    return { id: e2, code: t2, mask: o2 };
+  s$1.map(([e2, t2]) => {
+    const [o2, n2] = getCodeAndMask(t2);
+    return { id: e2, code: o2, mask: n2 };
   });
-  t.reduce((e2, [t2, o2]) => {
-    const [s2, a] = getCodeAndMask(o2);
-    return e2[t2] = { code: s2, mask: a, flag: countryCodeEmoji(t2) }, e2;
+  s$1.reduce((e2, [o2, n2]) => {
+    const [s2, r] = getCodeAndMask(n2);
+    return e2[o2] = { code: s2, mask: r, flag: countryCodeEmoji(o2) }, e2;
   }, {});
-  t.map(([e2, t2]) => {
-    const [o2, s2] = getCodeAndMask(t2);
-    return { id: e2, code: o2, mask: s2, flag: countryCodeEmoji(e2) };
+  s$1.map(([e2, o2]) => {
+    const [n2, s2] = getCodeAndMask(o2);
+    return { id: e2, code: n2, mask: s2, flag: countryCodeEmoji(e2) };
   });
   const MasksFullMap = (e2) => {
-    const o2 = new Intl.DisplayNames([e2], { type: "region" });
-    return t.reduce((e3, [t2, s2]) => {
-      const [a, r] = getCodeAndMask(s2), d = o2.of(t2) ?? "";
-      return e3[t2] = { code: a, mask: r, name: d, flag: countryCodeEmoji(t2) }, e3;
+    const o2 = getDisplayNames(e2);
+    return s$1.reduce((e3, [n2, s2]) => {
+      const [r, a] = getCodeAndMask(s2), d = o2.of(n2) ?? "";
+      return e3[n2] = { code: r, mask: a, name: d, flag: countryCodeEmoji(n2) }, e3;
     }, {});
   }, MasksFull = (e2) => {
-    const o2 = new Intl.DisplayNames([e2], { type: "region" });
-    return t.map(([e3, t2]) => {
-      const [s2, a] = getCodeAndMask(t2);
-      return { id: e3, code: s2, mask: a, name: o2.of(e3) ?? "", flag: countryCodeEmoji(e3) };
+    const o2 = getDisplayNames(e2);
+    return s$1.map(([e3, n2]) => {
+      const [s2, r] = getCodeAndMask(n2);
+      return { id: e3, code: s2, mask: r, name: o2.of(e3) ?? "", flag: countryCodeEmoji(e3) };
     });
-  }, m = t.reduce((e2, [t2, o2]) => {
-    const [s2, a] = getCodeAndMask(o2), r = new Intl.DisplayNames(["en"], { type: "region" });
-    return e2[t2] = { code: s2, mask: a, name: r.of(t2) ?? "", flag: countryCodeEmoji(t2) }, e2;
-  }, {}), i = t.map(([e2, t2]) => {
-    const [o2, s2] = getCodeAndMask(t2);
-    return { id: e2, code: o2, mask: s2, name: new Intl.DisplayNames(["en"], { type: "region" }).of(e2) ?? "", flag: countryCodeEmoji(e2) };
-  }), g = countryCodeEmoji;
+  }, f = MasksFullMap(o$1);
+  MasksFull(o$1);
+  const k = countryCodeEmoji;
   function getNavigatorLang() {
     return "undefined" != typeof navigator && navigator.language || "en";
   }
-  function getMasksFullMapByLocale(e2) {
-    return e2.toLowerCase().startsWith("en") ? m : MasksFullMap(e2);
+  function detectCountryFromLocale() {
+    try {
+      const t2 = getNavigatorLang();
+      try {
+        const e3 = new Intl.Locale(t2);
+        if (e3.region) return e3.region.toUpperCase();
+      } catch {
+      }
+      const e2 = t2.split(/[-_]/);
+      if (e2.length > 1) return e2[1]?.toUpperCase() || null;
+    } catch {
+    }
+    return null;
   }
-  function getCountry(t2, n) {
-    const e2 = getMasksFullMapByLocale(n), r = t2.toUpperCase();
-    return r in e2 ? { id: r, ...e2[r] } : { id: "US", ...e2.US };
+  function hasCountry(t2) {
+    const r = f;
+    return t2.toUpperCase() in r;
+  }
+  function getCountry(e2, r) {
+    const n2 = MasksFullMap(r), o2 = e2.toUpperCase();
+    return o2 in n2 ? { id: o2, ...n2[o2] } : { id: "US", ...n2.US };
+  }
+  function parseCountryCode(t2, e2) {
+    return t2 && hasCountry(t2) ? t2.toUpperCase() : e2 || "";
   }
   function toArray(t2) {
     return Array.isArray(t2) ? t2 : [t2];
@@ -80,480 +105,488 @@ var lib = (function(exports, vue) {
   function removeCountryCodePrefix(t2) {
     return t2.replace(/^\+\d+\s?/, "");
   }
-  function pickMaskVariant(t2, n) {
+  function pickMaskVariant(t2, e2) {
     if (1 === t2.length) return t2[0];
-    const e2 = t2.map((t3) => ({ mask: t3, count: countPlaceholders(t3) })), r = e2.filter((t3) => t3.count >= n).sort((t3, n2) => t3.count - n2.count);
-    if (r.length > 0) return r[0].mask;
-    const o2 = e2.sort((t3, n2) => n2.count - t3.count)[0];
+    const r = t2.map((t3) => ({ mask: t3, count: countPlaceholders(t3) })), n2 = r.filter((t3) => t3.count >= e2).sort((t3, e3) => t3.count - e3.count);
+    if (n2.length > 0) return n2[0].mask;
+    const o2 = r.sort((t3, e3) => e3.count - t3.count)[0];
     return o2 ? o2.mask : t2[0];
   }
-  function formatDigitsWithMap(t2, n) {
-    let e2 = "";
-    const r = [];
+  function formatDigitsWithMap(t2, e2) {
+    let r = "";
+    const n2 = [];
     let o2 = 0;
-    const a = n.length, i2 = t2.length;
-    for (let u = 0; u < i2; u++) {
-      const i3 = t2[u];
-      if ("#" === i3) {
+    const a = e2.length, s2 = t2.length;
+    for (let c = 0; c < s2; c++) {
+      const s3 = t2[c];
+      if ("#" === s3) {
         if (!(o2 < a)) break;
-        e2 += n[o2], r.push(o2), o2++;
+        r += e2[o2], n2.push(o2), o2++;
       } else {
-        const n2 = -1 !== t2.indexOf("#", u + 1) && o2 < a;
-        (e2.length > 0 || n2) && (e2 += i3, r.push(-1));
+        const e3 = -1 !== t2.indexOf("#", c + 1) && o2 < a;
+        (r.length > 0 || e3) && (r += s3, n2.push(-1));
       }
     }
-    return { display: e2, map: r };
+    return { display: r, map: n2 };
+  }
+  function filterCountries(t2, e2) {
+    const r = e2.trim().toUpperCase();
+    if (!r) return t2;
+    const n2 = r.replace(/\D/g, ""), o2 = n2.length > 0;
+    return t2.map((t3) => {
+      const e3 = t3.name.toUpperCase(), a = t3.id.toUpperCase(), s2 = t3.code.toUpperCase(), c = t3.code.replace(/\D/g, "");
+      let i2 = 0;
+      return e3.startsWith(r) ? i2 = 1e3 : e3.includes(r) && (i2 = 500), s2.startsWith(r) ? i2 += 100 : s2.includes(r) && (i2 += 50), a === r ? i2 += 200 : a.startsWith(r) && (i2 += 150), o2 && c.startsWith(n2) ? i2 += 80 : o2 && c.includes(n2) && (i2 += 40), { country: t3, score: i2 };
+    }).filter((t3) => t3.score > 0).sort((t3, e3) => e3.score !== t3.score ? e3.score - t3.score : t3.country.name.localeCompare(e3.country.name)).map((t3) => t3.country);
+  }
+  const t = [" ", "-", "(", ")"], e$1 = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Tab"], i = /[^\d\s\-()]/;
+  function extractDigits(t2, e2) {
+    const i2 = t2.replace(/\D/g, "");
+    return e2 ? i2.slice(0, e2) : i2;
+  }
+  function getSelection(t2) {
+    return t2 ? [t2.selectionStart ?? 0, t2.selectionEnd ?? 0] : [0, 0];
+  }
+  function setCaret(t2, e2) {
+    if (t2) try {
+      t2.setSelectionRange(e2, e2);
+    } catch {
+    }
+  }
+  function processBeforeInput(t2) {
+    if (!t2.target) return;
+    const e2 = t2.target, n2 = t2.data;
+    "insertText" === t2.inputType && n2 && (i.test(n2) || " " === n2 && e2.value.endsWith(" ")) && t2.preventDefault();
+  }
+  function processInput(t2, e2) {
+    if (!t2.target) return;
+    const i2 = t2.target, { formatter: n2 } = e2, r = n2.getMaxDigits(), s2 = extractDigits(i2.value, r);
+    return { newDigits: s2, caretDigitIndex: s2.length };
+  }
+  function processKeydown(i2, n2) {
+    if (!i2.target) return;
+    const r = i2.target, { digits: s2, formatter: c } = n2;
+    if (i2.ctrlKey || i2.metaKey || i2.altKey || e$1.includes(i2.key)) return;
+    const [g, a] = getSelection(r);
+    if ("Backspace" !== i2.key) if ("Delete" !== i2.key) /^[0-9]$/.test(i2.key) ? s2.length >= c.getMaxDigits() && i2.preventDefault() : 1 === i2.key.length && i2.preventDefault();
+    else {
+      if (i2.preventDefault(), g !== a) {
+        const t2 = c.getDigitRange(s2, g, a);
+        if (t2) {
+          const [e2, i3] = t2;
+          return { newDigits: s2.slice(0, e2) + s2.slice(i3), caretDigitIndex: e2 };
+        }
+      }
+      if (g < r.value.length) {
+        const t2 = c.getDigitRange(s2, g, r.value.length);
+        if (t2) {
+          const [e2] = t2;
+          return { newDigits: s2.slice(0, e2) + s2.slice(e2 + 1), caretDigitIndex: e2 };
+        }
+      }
+    }
+    else {
+      if (i2.preventDefault(), g !== a) {
+        const t2 = c.getDigitRange(s2, g, a);
+        if (t2) {
+          const [e2, i3] = t2;
+          return { newDigits: s2.slice(0, e2) + s2.slice(i3), caretDigitIndex: e2 };
+        }
+      }
+      if (g > 0) {
+        const e2 = r.value;
+        let i3 = g - 1;
+        for (; i3 >= 0 && t.includes(e2[i3]); ) i3--;
+        if (i3 >= 0) {
+          const t2 = c.getDigitRange(s2, i3, i3 + 1);
+          if (t2) {
+            const [e3] = t2;
+            return { newDigits: s2.slice(0, e3) + s2.slice(e3 + 1), caretDigitIndex: e3 };
+          }
+        }
+      }
+    }
+  }
+  function processPaste(t2, e2) {
+    if (!t2.target) return;
+    t2.preventDefault();
+    const i2 = t2.target, { digits: n2, formatter: r } = e2, s2 = t2.clipboardData?.getData("text") || "", c = r.getMaxDigits(), g = extractDigits(s2, c);
+    if (0 === g.length) return;
+    const [a, o2] = getSelection(i2);
+    if (a !== o2) {
+      const t3 = r.getDigitRange(n2, a, o2);
+      if (t3) {
+        const [e3, i3] = t3;
+        return { newDigits: extractDigits(n2.slice(0, e3) + g + n2.slice(i3), c), caretDigitIndex: e3 + g.length };
+      }
+    }
+    const l = r.getDigitRange(n2, 0, a), f2 = l ? l[1] : 0;
+    return { newDigits: extractDigits(n2.slice(0, f2) + g + n2.slice(f2), c), caretDigitIndex: f2 + g.length };
+  }
+  function createPhoneFormatter(o2) {
+    const a = toArray(o2.mask), i2 = a.map((n2) => countPlaceholders(removeCountryCodePrefix(n2))), g = Math.max(...i2), getMask = (t2) => {
+      const n2 = pickMaskVariant(a, t2);
+      return removeCountryCodePrefix(n2);
+    };
+    return { formatDisplay: (t2) => {
+      const e2 = getMask(t2.length);
+      return formatDigitsWithMap(e2, t2).display;
+    }, getMaxDigits: () => g, getPlaceholder: () => getMask(0), getCaretPosition: (t2) => {
+      const e2 = getMask(t2), { display: r, map: l } = formatDigitsWithMap(e2, "0".repeat(t2));
+      for (let e3 = 0; e3 < l.length; e3++) if (l[e3] === t2) return e3;
+      if (t2 >= l.length) return r.length;
+      for (let e3 = 0; e3 < l.length; e3++) if (l[e3] > t2) return e3;
+      return r.length;
+    }, getDigitRange: (t2, e2, r) => {
+      const l = getMask(t2.length), { map: o3 } = formatDigitsWithMap(l, t2);
+      let a2 = 1 / 0, i3 = -1 / 0;
+      for (let t3 = e2; t3 < r && t3 < o3.length; t3++) {
+        const e3 = o3[t3];
+        void 0 !== e3 && e3 >= 0 && (a2 = Math.min(a2, e3), i3 = Math.max(i3, e3));
+      }
+      return a2 === 1 / 0 ? null : [a2, i3 + 1];
+    }, isComplete: (t2) => i2.includes(t2.length) };
   }
   const o = "https://ipapi.co/json/", e = 1500, p = "@desource/phone-mask:geo", s = 864e5;
-  async function detectCountryFromGeoIP(e$1 = o, r = e) {
-    const c = new AbortController(), n = setTimeout(() => c.abort(), r);
+  async function detectCountryFromGeoIP(t2 = o, r = e) {
+    const n2 = new AbortController(), c = setTimeout(() => n2.abort(), r);
     try {
-      const t2 = await fetch(e$1, { signal: c.signal, headers: { Accept: "application/json" } });
-      if (clearTimeout(n), !t2.ok) return null;
-      const o2 = await t2.json();
-      return (o2.country || o2.country_code || o2.countryCode || o2.country_code2 || "").toString().toUpperCase() || null;
+      const o2 = await fetch(t2, { signal: n2.signal, headers: { Accept: "application/json" } });
+      if (clearTimeout(c), !o2.ok) return null;
+      const e2 = await o2.json();
+      return (e2.country || e2.country_code || e2.countryCode || e2.country_code2 || "").toString().toUpperCase() || null;
     } catch {
-      return clearTimeout(n), null;
+      return clearTimeout(c), null;
     }
   }
-  async function detectByGeoIp(t2) {
+  async function detectByGeoIp() {
     try {
       const o3 = localStorage.getItem(p);
       if (o3) {
-        const c = JSON.parse(o3), n = Date.now() - c.ts > s;
-        if (!n && c.country_code && t2(c.country_code)) return c.country_code.toUpperCase();
-        n && localStorage.removeItem(p);
+        const e3 = JSON.parse(o3), c = Date.now() - e3.ts > s, a = parseCountryCode(e3.country_code);
+        if (a && !c) return a;
+        localStorage.removeItem(p);
       }
     } catch {
     }
-    const o2 = await detectCountryFromGeoIP();
-    if (o2 && t2(o2)) {
+    const o2 = await detectCountryFromGeoIP(), e2 = parseCountryCode(o2);
+    if (e2) {
       try {
-        localStorage.setItem(p, JSON.stringify({ country_code: o2, ts: Date.now() }));
+        const t2 = JSON.stringify({ country_code: e2, ts: Date.now() });
+        localStorage.setItem(p, t2);
       } catch {
       }
-      return o2;
+      return e2;
     }
     return null;
   }
-  const emptyCountry = { id: "", code: "", mask: "", flag: "", name: "" };
-  function useCountrySelector(usedLocale) {
-    const isEnLocale = vue.computed(() => usedLocale.value.toLowerCase().startsWith("en"));
-    const countries = vue.computed(() => isEnLocale.value ? i : MasksFull(usedLocale.value));
-    const countriesMap = vue.computed(() => isEnLocale.value ? m : MasksFullMap(usedLocale.value));
-    const selectedId = vue.ref(countries.value[0]?.id || "");
-    const dropdownOpened = vue.ref(false);
-    const hasDropdown = vue.ref(true);
-    const search = vue.ref("");
-    const focusedIndex = vue.ref(0);
-    const selected = vue.computed(() => {
-      const id = selectedId.value;
-      const found = countriesMap.value[id];
-      return found ? { id, ...found } : countries.value[0] || emptyCountry;
-    });
-    const hasCountry = (id) => {
-      const _id = id.toUpperCase();
-      return !!countriesMap.value[_id];
+  function useCountry({
+    country: countryOption,
+    locale: localeOption,
+    detect,
+    onCountryChange
+  } = {}) {
+    const locale = vue.computed(() => vue.toValue(localeOption) || getNavigatorLang());
+    const countryCode = vue.ref(parseCountryCode(vue.toValue(countryOption), "US"));
+    const country = vue.computed(() => getCountry(countryCode.value, locale.value));
+    const setCountry = (code) => {
+      const parsed = parseCountryCode(code);
+      if (parsed) {
+        countryCode.value = parsed;
+        return true;
+      }
+      return false;
     };
-    const filteredCountries = vue.computed(() => {
-      const q = search.value.trim().toUpperCase();
-      if (!q) return countries.value;
-      const qCodeDigits = q.replace(/\D/g, "");
-      const isNumericSearch = qCodeDigits.length > 0;
-      return countries.value.map((c) => {
-        const nameUpper = c.name.toUpperCase();
-        const idUpper = c.id.toUpperCase();
-        const codeDigits = c.code.replace(/\D/g, "");
-        let score = 0;
-        if (nameUpper.startsWith(q)) score = 1e3;
-        else if (nameUpper.includes(q)) score = 500;
-        if (c.code.startsWith(q)) score += 100;
-        else if (c.code.includes(q)) score += 50;
-        if (idUpper === q) score += 200;
-        else if (idUpper.startsWith(q)) score += 150;
-        if (isNumericSearch && codeDigits.startsWith(qCodeDigits)) score += 80;
-        else if (isNumericSearch && codeDigits.includes(qCodeDigits)) score += 40;
-        return { country: c, score };
-      }).filter(({ score }) => score > 0).sort((a, b) => {
-        if (b.score !== a.score) return b.score - a.score;
-        return a.country.name.localeCompare(b.country.name);
-      }).map(({ country }) => country);
+    const detectCountry = async () => {
+      const geoCountry = await detectByGeoIp();
+      if (setCountry(geoCountry)) return;
+      const localeCountry = detectCountryFromLocale();
+      setCountry(localeCountry);
+    };
+    vue.watchEffect(() => {
+      const newCountry = vue.toValue(countryOption);
+      if (newCountry && newCountry !== countryCode.value) {
+        setCountry(newCountry);
+      }
     });
-    const selectCountry = (id) => {
-      selectedId.value = id;
-      closeDropdown();
+    vue.watchEffect(() => {
+      if (vue.toValue(detect) && !vue.toValue(countryOption)) {
+        detectCountry();
+      }
+    });
+    vue.watchEffect(() => {
+      onCountryChange?.(country.value);
+    });
+    return { country, setCountry, locale };
+  }
+  function useFormatter({
+    country,
+    value,
+    onChange,
+    onPhoneChange,
+    onValidationChange
+  }) {
+    const formatter = vue.computed(() => createPhoneFormatter(vue.toValue(country)));
+    const maxDigits = vue.computed(() => formatter.value.getMaxDigits());
+    const digits = vue.computed(() => extractDigits(vue.toValue(value), maxDigits.value));
+    const displayPlaceholder = vue.computed(() => formatter.value.getPlaceholder());
+    const displayValue = vue.computed(() => formatter.value.formatDisplay(digits.value));
+    const full = vue.computed(() => digits.value ? `${vue.toValue(country).code}${digits.value}` : "");
+    const fullFormatted = vue.computed(() => displayValue.value ? `${vue.toValue(country).code} ${displayValue.value}` : "");
+    const isComplete = vue.computed(() => formatter.value.isComplete(digits.value));
+    const isEmpty = vue.computed(() => digits.value.length === 0);
+    const shouldShowWarn = vue.computed(() => !isEmpty.value && !isComplete.value);
+    const phoneData = vue.computed(() => ({
+      full: full.value,
+      fullFormatted: fullFormatted.value,
+      digits: digits.value
+    }));
+    vue.watchEffect(() => {
+      if (vue.toValue(value) !== digits.value) {
+        onChange(digits.value);
+      }
+    });
+    vue.watchEffect(() => {
+      onPhoneChange?.(phoneData.value);
+    });
+    vue.watchEffect(() => {
+      onValidationChange?.(isComplete.value);
+    });
+    return {
+      digits,
+      formatter,
+      displayPlaceholder,
+      displayValue,
+      full,
+      fullFormatted,
+      isComplete,
+      isEmpty,
+      shouldShowWarn
+    };
+  }
+  function useTimer() {
+    let timerRef = null;
+    const clear = () => {
+      if (timerRef) {
+        clearTimeout(timerRef);
+        timerRef = null;
+      }
     };
-    const toggleDropdown = async (searchRef) => {
-      dropdownOpened.value = !dropdownOpened.value;
-      if (!dropdownOpened.value) return;
-      await vue.nextTick();
-      searchRef.value?.focus({ preventScroll: true });
-      focusedIndex.value = 0;
+    const set = (callback, delay) => {
+      clear();
+      timerRef = setTimeout(callback, delay);
     };
-    const closeDropdown = () => {
-      dropdownOpened.value = false;
+    vue.onUnmounted(clear);
+    return { set, clear };
+  }
+  function useValidationHint() {
+    const showValidationHint = vue.ref(false);
+    const validationTimer = useTimer();
+    const clearValidationHint = (hideHint = true) => {
+      if (hideHint) showValidationHint.value = false;
+      validationTimer.clear();
     };
-    const focusNextOption = (scrollFn) => {
-      if (filteredCountries.value.length === 0) return;
-      focusedIndex.value = Math.min(filteredCountries.value.length - 1, focusedIndex.value + 1);
-      scrollFn?.();
+    const scheduleValidationHint = (delay) => {
+      showValidationHint.value = false;
+      validationTimer.set(() => {
+        showValidationHint.value = true;
+      }, delay);
     };
-    const focusPrevOption = (scrollFn) => {
-      if (filteredCountries.value.length === 0) return;
-      focusedIndex.value = Math.max(0, focusedIndex.value - 1);
-      scrollFn?.();
+    return { showValidationHint, clearValidationHint, scheduleValidationHint };
+  }
+  const HINT_DELAY_INPUT = 500;
+  const HINT_DELAY_ACTION = 300;
+  function useInputHandlers(options) {
+    const { formatter, digits, inactive, onChange, scheduleValidationHint } = options;
+    const scheduleCaretUpdate = (el, digitIndex) => {
+      vue.nextTick(() => {
+        if (!el) return;
+        const pos = vue.toValue(formatter).getCaretPosition(digitIndex);
+        setCaret(el, pos);
+      });
     };
-    const chooseFocusedOption = () => {
-      const item = filteredCountries.value[focusedIndex.value];
-      if (item) selectCountry(item.id);
+    const handleBeforeInput = (e2) => {
+      processBeforeInput(e2);
     };
-    const detectFromLocale = () => {
-      try {
-        const lang = getNavigatorLang();
-        try {
-          const loc = new Intl.Locale(lang);
-          if (loc.region && hasCountry(loc.region)) return loc.region.toUpperCase();
-        } catch {
-        }
-        const parts = lang.split(/[-_]/);
-        if (parts.length > 1 && hasCountry(parts[1])) return parts[1].toUpperCase();
-      } catch {
-      }
-      return null;
+    const handleInput = (e2) => {
+      if (vue.toValue(inactive)) return;
+      const result = processInput(e2, { formatter: vue.toValue(formatter) });
+      if (!result) return;
+      onChange?.(result.newDigits);
+      scheduleCaretUpdate(e2.target, result.caretDigitIndex);
+      scheduleValidationHint?.(HINT_DELAY_INPUT);
     };
-    const selectInitialCountry = (id, emitFn) => {
-      const previousId = selectedId.value;
-      selectedId.value = id;
-      if (previousId !== selectedId.value && emitFn) vue.nextTick(emitFn);
+    const handleKeydown = (e2) => {
+      if (vue.toValue(inactive)) return;
+      const result = processKeydown(e2, { digits: vue.toValue(digits), formatter: vue.toValue(formatter) });
+      if (!result) return;
+      onChange?.(result.newDigits);
+      scheduleCaretUpdate(e2.target, result.caretDigitIndex);
+      scheduleValidationHint?.(HINT_DELAY_ACTION);
     };
-    const initCountry = async (predefined, detect, emitFn) => {
-      hasDropdown.value = !predefined && countries.value.length > 1;
-      if (predefined && hasCountry(predefined)) {
-        selectInitialCountry(predefined.toUpperCase(), emitFn);
-        return;
-      }
-      if (!detect) return;
-      const geo = await detectByGeoIp(hasCountry);
-      if (geo) {
-        selectInitialCountry(geo, emitFn);
-        return;
-      }
-      const loc = detectFromLocale();
-      if (loc) {
-        selectInitialCountry(loc, emitFn);
-        return;
-      }
+    const handlePaste = (e2) => {
+      if (vue.toValue(inactive)) return;
+      const result = processPaste(e2, { digits: vue.toValue(digits), formatter: vue.toValue(formatter) });
+      if (!result) return;
+      onChange?.(result.newDigits);
+      scheduleCaretUpdate(e2.target, result.caretDigitIndex);
+      scheduleValidationHint?.(HINT_DELAY_ACTION);
     };
     return {
-      countries,
-      selectedId,
-      selected,
-      hasCountry,
-      // Dropdown
-      hasDropdown,
-      dropdownOpened,
-      search,
-      focusedIndex,
-      filteredCountries,
-      selectCountry,
-      toggleDropdown,
-      closeDropdown,
-      focusNextOption,
-      focusPrevOption,
-      chooseFocusedOption,
-      // Country Detection
-      initCountry
+      handleBeforeInput,
+      handleInput,
+      handleKeydown,
+      handlePaste
     };
   }
-  function createPhoneFormatter(country) {
-    const variants = toArray(country.mask);
-    const variantsDigits = variants.map((m2) => countPlaceholders(removeCountryCodePrefix(m2)));
-    const maxDigits = Math.max(...variantsDigits);
-    const getMask = (digitLength) => {
-      const mask = pickMaskVariant(variants, digitLength);
-      return removeCountryCodePrefix(mask);
+  function useCountrySelector({
+    rootRef,
+    dropdownRef,
+    searchRef,
+    selectorRef,
+    locale,
+    countryOption,
+    inactive,
+    onSelectCountry,
+    onAfterSelect
+  }) {
+    const search = vue.ref("");
+    const dropdownOpen = vue.ref(false);
+    const dropdownStyle = vue.shallowRef({});
+    const focusedIndex = vue.ref(0);
+    const countries = vue.computed(() => MasksFull(vue.toValue(locale)));
+    const filteredCountries = vue.computed(() => filterCountries(countries.value, search.value));
+    const hasDropdown = vue.computed(() => !vue.toValue(countryOption) && countries.value.length > 1);
+    const setFocusedIndex = (index2) => {
+      focusedIndex.value = index2;
     };
-    return {
-      formatDisplay: (digits) => {
-        const template = getMask(digits.length);
-        return formatDigitsWithMap(template, digits).display;
-      },
-      getMaxDigits: () => maxDigits,
-      getPlaceholder: () => {
-        const template = getMask(0);
-        return template;
-      },
-      getCaretPosition: (digitIndex) => {
-        const template = getMask(digitIndex);
-        const { display, map } = formatDigitsWithMap(template, "0".repeat(digitIndex));
-        for (let i2 = 0; i2 < map.length; i2++) {
-          if (map[i2] === digitIndex) return i2;
-        }
-        if (digitIndex >= map.length) return display.length;
-        for (let i2 = 0; i2 < map.length; i2++) {
-          if (map[i2] > digitIndex) return i2;
-        }
-        return display.length;
-      },
-      getDigitRange: (digits, selStart, selEnd) => {
-        const template = getMask(digits.length);
-        const { map } = formatDigitsWithMap(template, digits);
-        let min = Infinity;
-        let max = -Infinity;
-        for (let i2 = selStart; i2 < selEnd && i2 < map.length; i2++) {
-          const digitIdx = map[i2];
-          if (digitIdx !== void 0 && digitIdx >= 0) {
-            min = Math.min(min, digitIdx);
-            max = Math.max(max, digitIdx);
-          }
-        }
-        return min === Infinity ? null : [min, max + 1];
-      },
-      isComplete: (digits) => {
-        return variantsDigits.includes(digits.length);
+    const focusSearch = () => {
+      vue.nextTick(() => searchRef.value?.focus({ preventScroll: true }));
+    };
+    const closeDropdown = () => {
+      dropdownOpen.value = false;
+    };
+    const openDropdown = () => {
+      dropdownOpen.value = true;
+      setFocusedIndex(0);
+      focusSearch();
+    };
+    const toggleDropdown = () => {
+      if (vue.toValue(inactive) || !hasDropdown.value) return;
+      if (dropdownOpen.value) {
+        closeDropdown();
+      } else {
+        openDropdown();
       }
     };
-  }
-  function setCaret(el, position) {
-    if (!el) return;
-    try {
-      el.setSelectionRange(position, position);
-    } catch {
-    }
-  }
-  function extractDigits(value, maxLength) {
-    const digits = value.replace(/\D/g, "");
-    return maxLength ? digits.slice(0, maxLength) : digits;
-  }
-  function getSelection(el) {
-    if (!el) return [0, 0];
-    return [el.selectionStart ?? 0, el.selectionEnd ?? 0];
-  }
-  const Delimiters = [" ", "-", "(", ")"];
-  const NavigationKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Tab"];
-  const InvalidPattern = /[^\d\s\-()]/;
-  function useMask(selected, telRef) {
-    const digits = vue.ref("");
-    const displayValue = vue.ref("");
-    const validationTimer = vue.ref(null);
-    const showValidationHint = vue.ref(false);
-    const formatter = vue.computed(() => createPhoneFormatter(selected.value));
-    const displayPlaceholder = vue.computed(() => formatter.value.getPlaceholder());
-    const isComplete = vue.computed(() => formatter.value.isComplete(digits.value));
-    const isEmpty = vue.computed(() => digits.value.length === 0);
-    const maxDigits = vue.computed(() => formatter.value.getMaxDigits());
-    const shouldShowWarn = vue.computed(() => showValidationHint.value && !isEmpty.value && !isComplete.value);
-    const fullFormatted = vue.computed(() => {
-      if (!displayValue.value) return "";
-      return `${selected.value.code} ${displayValue.value}`;
-    });
-    const full = vue.computed(() => {
-      if (!digits.value) return "";
-      return `${selected.value.code}${digits.value}`;
-    });
-    const updateDisplay2 = () => {
-      displayValue.value = formatter.value.formatDisplay(digits.value);
+    const selectCountry = (code) => {
+      onSelectCountry(code);
+      closeDropdown();
+      search.value = "";
+      setFocusedIndex(0);
+      onAfterSelect?.();
     };
-    const setCaretToDigitPosition = (digitIndex) => {
-      const pos = formatter.value.getCaretPosition(digitIndex);
-      setCaret(telRef.value, pos);
+    const handleSearchChange = (e2) => {
+      search.value = e2.target.value;
+      setFocusedIndex(0);
     };
-    const removeDigitsRange = (startIdx, endIdx) => {
-      if (startIdx >= endIdx) return;
-      digits.value = digits.value.slice(0, startIdx) + digits.value.slice(endIdx);
+    const onDocClick = (ev) => {
+      const target = ev.target;
+      const dropdownEl = dropdownRef.value;
+      const selectorEl = selectorRef.value;
+      if (!target) return;
+      if (dropdownEl?.contains(target)) return;
+      if (selectorEl?.contains(target)) return;
+      closeDropdown();
     };
-    const handleBeforeInput = (e2) => {
-      const el = e2.target;
-      if (!el) return;
-      const data = e2.data;
-      if (e2.inputType !== "insertText" || !data) return;
-      if (InvalidPattern.test(data) || data === " " && el.value.endsWith(" ")) {
-        e2.preventDefault();
-      }
+    const positionDropdown = (e2) => {
+      if (e2?.type === "scroll" && e2.target && dropdownRef.value?.contains(e2.target)) return;
+      if (!rootRef.value) return;
+      const rect = rootRef.value.getBoundingClientRect();
+      dropdownStyle.value = {
+        top: `${rect.bottom + window.scrollY + 8}px`,
+        left: `${rect.left + window.scrollX}px`,
+        width: `${rect.width}px`
+      };
     };
-    const handleInput = (e2) => {
-      const el = e2.target;
-      if (!el) return;
-      const newDigits = extractDigits(el.value, maxDigits.value);
-      showValidationHint.value = false;
-      if (validationTimer.value) {
-        clearTimeout(validationTimer.value);
-      }
-      digits.value = newDigits;
-      updateDisplay2();
-      if (newDigits.length > 0) {
-        validationTimer.value = setTimeout(() => {
-          showValidationHint.value = true;
-        }, 500);
-      }
+    const scrollFocusedIntoView = () => {
       vue.nextTick(() => {
-        setCaretToDigitPosition(digits.value.length);
+        const list = dropdownRef.value?.lastElementChild;
+        const option = list?.children[focusedIndex.value];
+        if (!list || !option) return;
+        const listRect = list.getBoundingClientRect();
+        const optionRect = option.getBoundingClientRect();
+        let scrollAmount = 0;
+        if (optionRect.top < listRect.top) {
+          scrollAmount = list.scrollTop - (listRect.top - optionRect.top);
+        } else if (optionRect.bottom > listRect.bottom) {
+          scrollAmount = list.scrollTop + (optionRect.bottom - listRect.bottom);
+        } else {
+          return;
+        }
+        list.scrollTo({ top: scrollAmount, behavior: "smooth" });
       });
     };
-    const handleKeydownInternal = (e2) => {
-      const el = telRef.value ?? e2.target;
-      if (!el) return;
-      if (e2.ctrlKey || e2.metaKey || e2.altKey || NavigationKeys.includes(e2.key)) return;
-      const [selStart, selEnd] = getSelection(el);
-      if (e2.key === "Backspace") {
+    const handleSearchKeydown = (e2) => {
+      if (e2.key === "ArrowDown") {
         e2.preventDefault();
-        if (selStart !== selEnd) {
-          const range = formatter.value.getDigitRange(digits.value, selStart, selEnd);
-          if (range) {
-            const [start, end] = range;
-            removeDigitsRange(start, end);
-            updateDisplay2();
-            vue.nextTick(() => setCaretToDigitPosition(start));
-          }
-          return;
-        }
-        if (selStart > 0) {
-          const displayStr = displayValue.value;
-          let prevPos = selStart - 1;
-          while (prevPos >= 0 && Delimiters.includes(displayStr[prevPos])) {
-            prevPos--;
-          }
-          if (prevPos >= 0) {
-            const range = formatter.value.getDigitRange(digits.value, prevPos, prevPos + 1);
-            if (range) {
-              const [start] = range;
-              removeDigitsRange(start, start + 1);
-              updateDisplay2();
-              vue.nextTick(() => setCaretToDigitPosition(start));
-            }
-          }
-        }
-        return;
-      }
-      if (e2.key === "Delete") {
+        setFocusedIndex(Math.min(focusedIndex.value + 1, filteredCountries.value.length - 1));
+        scrollFocusedIntoView();
+      } else if (e2.key === "ArrowUp") {
         e2.preventDefault();
-        if (selStart !== selEnd) {
-          const range = formatter.value.getDigitRange(digits.value, selStart, selEnd);
-          if (range) {
-            const [start, end] = range;
-            removeDigitsRange(start, end);
-            updateDisplay2();
-            vue.nextTick(() => setCaretToDigitPosition(start));
-          }
-          return;
-        }
-        if (selStart < displayValue.value.length) {
-          const range = formatter.value.getDigitRange(digits.value, selStart, selStart + 1);
-          if (range) {
-            const [start] = range;
-            removeDigitsRange(start, start + 1);
-            updateDisplay2();
-            vue.nextTick(() => setCaretToDigitPosition(start));
-          }
-        }
-        return;
-      }
-      if (/^[0-9]$/.test(e2.key)) {
-        if (digits.value.length >= maxDigits.value) {
-          e2.preventDefault();
-        }
-        return;
-      }
-      if (e2.key.length === 1) {
+        setFocusedIndex(Math.max(focusedIndex.value - 1, 0));
+        scrollFocusedIntoView();
+      } else if (e2.key === "Enter" && filteredCountries.value[focusedIndex.value]) {
         e2.preventDefault();
+        selectCountry(filteredCountries.value[focusedIndex.value].id);
+      } else if (e2.key === "Escape") {
+        closeDropdown();
       }
     };
-    const handleKeydown = (e2) => {
-      showValidationHint.value = false;
-      if (validationTimer.value) {
-        clearTimeout(validationTimer.value);
-      }
-      handleKeydownInternal(e2);
-      if (validationTimer.value) clearTimeout(validationTimer.value);
-      validationTimer.value = setTimeout(() => {
-        if (!isComplete.value && !isEmpty.value) showValidationHint.value = true;
-      }, 300);
-    };
-    const handlePaste = (e2) => {
-      e2.preventDefault();
-      const text = e2.clipboardData?.getData("text") || "";
-      const pastedDigits = extractDigits(text, maxDigits.value);
-      if (pastedDigits.length === 0) return;
-      const el = telRef.value;
-      if (!el) return;
-      const [selStart, selEnd] = getSelection(el);
-      if (selStart !== selEnd) {
-        const range2 = formatter.value.getDigitRange(digits.value, selStart, selEnd);
-        if (range2) {
-          const [start, end] = range2;
-          const left2 = digits.value.slice(0, start);
-          const right2 = digits.value.slice(end);
-          digits.value = extractDigits(left2 + pastedDigits + right2, maxDigits.value);
-          updateDisplay2();
-          vue.nextTick(() => setCaretToDigitPosition(start + pastedDigits.length));
-          return;
-        }
-      }
-      const range = formatter.value.getDigitRange(digits.value, selStart, selStart);
-      const insertIndex = range ? range[0] : digits.value.length;
-      const left = digits.value.slice(0, insertIndex);
-      const right = digits.value.slice(insertIndex);
-      digits.value = extractDigits(left + pastedDigits + right, maxDigits.value);
-      updateDisplay2();
-      if (validationTimer.value) clearTimeout(validationTimer.value);
-      validationTimer.value = setTimeout(() => {
-        if (!isComplete.value && !isEmpty.value) showValidationHint.value = true;
-      }, 300);
-      vue.nextTick(() => setCaretToDigitPosition(insertIndex + pastedDigits.length));
-    };
-    const handleFocus = () => {
-      if (validationTimer.value) {
-        clearTimeout(validationTimer.value);
-      }
+    const removeListeners = () => {
+      window.removeEventListener("resize", positionDropdown);
+      window.removeEventListener("scroll", positionDropdown, true);
+      window.removeEventListener("click", onDocClick, true);
     };
-    const clear = () => {
-      digits.value = "";
-      displayValue.value = "";
-      showValidationHint.value = false;
-      if (validationTimer.value) {
-        clearTimeout(validationTimer.value);
-        validationTimer.value = null;
+    vue.watch(hasDropdown, (dropdownExists) => {
+      if (!dropdownExists && dropdownOpen.value) {
+        closeDropdown();
       }
-    };
-    vue.watch(selected, () => {
-      if (digits.value.length > maxDigits.value) {
-        digits.value = digits.value.slice(0, maxDigits.value);
+    });
+    vue.watch(dropdownOpen, (isOpen) => {
+      if (!isOpen) {
+        removeListeners();
+        return;
       }
-      updateDisplay2();
+      positionDropdown();
+      window.addEventListener("resize", positionDropdown);
+      window.addEventListener("scroll", positionDropdown, true);
+      window.addEventListener("click", onDocClick, true);
     });
-    updateDisplay2();
+    vue.onBeforeUnmount(removeListeners);
     return {
       // State
-      digits,
-      displayValue,
-      // Computed
-      displayPlaceholder,
-      isComplete,
-      isEmpty,
-      shouldShowWarn,
-      fullFormatted,
-      full,
-      // Handlers
-      handleBeforeInput,
-      handleInput,
-      handleKeydown,
-      handlePaste,
-      handleFocus,
-      // Methods
-      updateDisplayFromDigits: updateDisplay2,
-      clear
+      dropdownOpen,
+      search,
+      focusedIndex,
+      dropdownStyle,
+      // Derived
+      filteredCountries,
+      hasDropdown,
+      // Actions
+      openDropdown,
+      closeDropdown,
+      toggleDropdown,
+      selectCountry,
+      setFocusedIndex,
+      handleSearchChange,
+      handleSearchKeydown
     };
   }
-  function useClipboard() {
+  function useClipboard(delay = 1800) {
     const copied = vue.ref(false);
     const isCopying = vue.ref(false);
-    let copyTimer = null;
-    const clearTimer = () => {
-      if (copyTimer) {
-        clearTimeout(copyTimer);
-        copyTimer = null;
-      }
-    };
+    const copyTimer = useTimer();
     const copy = async (text) => {
       if (isCopying.value) return false;
       const trimmedText = text.trim();
@@ -562,11 +595,9 @@ var lib = (function(exports, vue) {
       try {
         await navigator.clipboard.writeText(trimmedText);
         copied.value = true;
-        clearTimer();
-        copyTimer = setTimeout(() => {
+        copyTimer.set(() => {
           copied.value = false;
-          copyTimer = null;
-        }, 1800);
+        }, delay);
         return true;
       } catch (err) {
         console.warn("Copy failed", err);
@@ -575,24 +606,71 @@ var lib = (function(exports, vue) {
         isCopying.value = false;
       }
     };
-    const onUnmount = () => {
-      clearTimer();
+    return { copied, isCopying, copy };
+  }
+  const DELAY = 1800;
+  function useCopyAction({ liveRef, fullFormatted, onCopy }) {
+    const liveTimer = useTimer();
+    const { copied, copy } = useClipboard(DELAY);
+    const copyAriaLabel = vue.computed(() => copied.value ? "Copied" : `Copy ${fullFormatted.value}`);
+    const copyButtonTitle = vue.computed(() => copied.value ? "Copied" : "Copy phone number");
+    const announceToScreenReader = (message) => {
+      if (!liveRef?.value) return;
+      liveRef.value.textContent = message;
+      liveTimer.set(() => {
+        if (liveRef.value) liveRef.value.textContent = "";
+      }, DELAY);
+    };
+    const onCopyClick = async () => {
+      const valueToCopy = fullFormatted.value.trim();
+      const success = await copy(valueToCopy);
+      if (success) {
+        onCopy?.(valueToCopy);
+        announceToScreenReader("Phone number copied to clipboard");
+      }
+    };
+    return {
+      copied,
+      copyAriaLabel,
+      copyButtonTitle,
+      onCopyClick
     };
-    return { copied, isCopying, copy, onUnmount };
   }
-  const _hoisted_1 = { class: "pi-selector" };
-  const _hoisted_2 = ["disabled", "tabindex", "aria-label", "aria-expanded", "aria-haspopup"];
-  const _hoisted_3 = ["aria-label"];
-  const _hoisted_4 = { class: "pi-code" };
-  const _hoisted_5 = { class: "pi-input-wrap" };
-  const _hoisted_6 = ["placeholder", "value", "disabled", "readonly", "aria-invalid"];
-  const _hoisted_7 = {
+  function useTheme({ theme }) {
+    const systemDark = vue.ref(false);
+    const themeClass = vue.computed(() => {
+      return vue.toValue(theme) !== "auto" ? `theme-${vue.toValue(theme)}` : systemDark.value ? "theme-dark" : "theme-light";
+    });
+    let mq = null;
+    const handler = (e2) => {
+      systemDark.value = e2.matches;
+    };
+    vue.onBeforeMount(() => {
+      if (typeof window === "undefined") return;
+      mq = window.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
+      if (!mq) return;
+      systemDark.value = mq.matches;
+      mq.addEventListener("change", handler);
+    });
+    vue.onBeforeUnmount(() => {
+      mq?.removeEventListener("change", handler);
+    });
+    return {
+      themeClass
+    };
+  }
+  const _hoisted_1 = ["disabled", "tabindex", "aria-label", "aria-expanded", "aria-haspopup"];
+  const _hoisted_2 = ["aria-label"];
+  const _hoisted_3 = { class: "pi-code" };
+  const _hoisted_4 = { class: "pi-input-wrap" };
+  const _hoisted_5 = ["placeholder", "value", "disabled", "readonly", "aria-invalid"];
+  const _hoisted_6 = {
     class: "pi-actions",
     role: "toolbar",
     "aria-label": "Phone input actions"
   };
-  const _hoisted_8 = ["aria-label", "title"];
-  const _hoisted_9 = {
+  const _hoisted_7 = ["aria-label", "title"];
+  const _hoisted_8 = {
     key: 1,
     width: "16",
     height: "16",
@@ -600,7 +678,7 @@ var lib = (function(exports, vue) {
     fill: "none",
     "aria-hidden": "true"
   };
-  const _hoisted_10 = {
+  const _hoisted_9 = {
     key: 2,
     width: "16",
     height: "16",
@@ -608,8 +686,8 @@ var lib = (function(exports, vue) {
     fill: "none",
     "aria-hidden": "true"
   };
-  const _hoisted_11 = ["aria-label", "title"];
-  const _hoisted_12 = {
+  const _hoisted_10 = ["aria-label", "title"];
+  const _hoisted_11 = {
     key: 0,
     width: "11",
     height: "11",
@@ -617,14 +695,14 @@ var lib = (function(exports, vue) {
     fill: "none",
     "aria-hidden": "true"
   };
-  const _hoisted_13 = { class: "pi-search-wrap" };
-  const _hoisted_14 = ["placeholder"];
-  const _hoisted_15 = ["aria-activedescendant"];
-  const _hoisted_16 = ["id", "aria-selected", "title", "onClick", "onMouseenter"];
-  const _hoisted_17 = ["aria-label"];
-  const _hoisted_18 = { class: "pi-opt-name" };
-  const _hoisted_19 = { class: "pi-opt-code" };
-  const _hoisted_20 = {
+  const _hoisted_12 = { class: "pi-search-wrap" };
+  const _hoisted_13 = ["value", "placeholder"];
+  const _hoisted_14 = ["aria-activedescendant"];
+  const _hoisted_15 = ["id", "aria-selected", "title", "onClick", "onMouseenter"];
+  const _hoisted_16 = ["aria-label"];
+  const _hoisted_17 = { class: "pi-opt-name" };
+  const _hoisted_18 = { class: "pi-opt-code" };
+  const _hoisted_19 = {
     key: 0,
     class: "pi-empty"
   };
@@ -647,238 +725,133 @@ var lib = (function(exports, vue) {
       dropdownClass: {},
       disableDefaultStyles: { type: Boolean, default: false }
     }, {
-      "modelValue": {},
+      "modelValue": { default: "" },
       "modelModifiers": {}
     }),
     emits: /* @__PURE__ */ vue.mergeModels(["change", "country-change", "validation-change", "focus", "blur", "copy", "clear"], ["update:modelValue"]),
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const slots = vue.useSlots();
-      const model = vue.useModel(__props, "modelValue");
       const emit = __emit;
+      const model = vue.useModel(__props, "modelValue");
+      const onChange = (v) => {
+        model.value = v;
+      };
+      const { country, setCountry, locale } = useCountry({
+        country: () => props.country,
+        locale: () => props.locale,
+        detect: () => props.detect,
+        onCountryChange: (c) => emit("country-change", c)
+      });
+      const {
+        digits,
+        formatter,
+        displayPlaceholder,
+        displayValue,
+        full,
+        fullFormatted,
+        isComplete,
+        isEmpty,
+        shouldShowWarn
+      } = useFormatter({
+        country,
+        value: model,
+        onChange,
+        onPhoneChange: (data) => emit("change", data),
+        onValidationChange: (complete) => emit("validation-change", complete)
+      });
+      const { showValidationHint, clearValidationHint, scheduleValidationHint } = useValidationHint();
       const rootRef = vue.useTemplateRef("rootRef");
       const telRef = vue.useTemplateRef("telRef");
-      const searchRef = vue.useTemplateRef("searchRef");
       const liveRef = vue.useTemplateRef("liveRef");
       const dropdownRef = vue.useTemplateRef("dropdownRef");
-      const usedLocale = vue.computed(() => {
-        return props.locale || getNavigatorLang();
+      const searchRef = vue.useTemplateRef("searchRef");
+      const selectorRef = vue.useTemplateRef("selectorRef");
+      const inactive = vue.computed(() => props.disabled || props.readonly);
+      const incomplete = vue.computed(() => showValidationHint.value && shouldShowWarn.value);
+      const showCopyButton = vue.computed(() => props.showCopy && !isEmpty.value && !props.disabled);
+      const showClearButton = vue.computed(() => props.showClear && !isEmpty.value && !inactive.value);
+      const { copied, copyAriaLabel, copyButtonTitle, onCopyClick } = useCopyAction({
+        liveRef,
+        fullFormatted,
+        onCopy: (v) => emit("copy", v)
       });
-      const dropdownStyle = vue.shallowRef({});
-      const countrySelector = useCountrySelector(usedLocale);
+      const focusInput = () => vue.nextTick(() => telRef.value?.focus());
       const {
+        dropdownOpen,
         search,
-        filteredCountries,
         focusedIndex,
-        selected,
-        dropdownOpened,
+        dropdownStyle,
+        filteredCountries,
         hasDropdown,
-        focusNextOption,
-        focusPrevOption,
-        chooseFocusedOption,
-        closeDropdown
-      } = countrySelector;
-      const mask = useMask(selected, telRef);
-      const { digits, displayValue, displayPlaceholder, isComplete, isEmpty, shouldShowWarn, full, fullFormatted } = mask;
-      const { copied, copy, onUnmount: onClipboardUnmount } = useClipboard();
-      const inactive = vue.computed(() => props.disabled || props.readonly);
-      const showCopyButton = vue.computed(() => props.showCopy && !isEmpty.value && !props.disabled);
-      const showClearButton = vue.computed(() => props.showClear && !isEmpty.value && !inactive.value);
-      const copyAriaLabel = vue.computed(() => copied.value ? "Copied" : `Copy ${selected.value.code} ${displayValue.value}`);
-      const copyButtonTitle = vue.computed(() => copied.value ? "Copied" : "Copy phone number");
-      const copyMessage = vue.computed(() => copied.value ? "Phone number copied to clipboard" : "");
-      const sizeClass = vue.computed(() => `size-${props.size}`);
-      const themeClass = vue.computed(() => {
-        if (props.theme !== "auto") return `theme-${props.theme}`;
-        if (typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
-          return "theme-dark";
-        }
-        return "theme-light";
+        closeDropdown,
+        toggleDropdown,
+        selectCountry,
+        setFocusedIndex,
+        handleSearchChange,
+        handleSearchKeydown
+      } = useCountrySelector({
+        rootRef,
+        dropdownRef,
+        searchRef,
+        selectorRef,
+        locale,
+        countryOption: () => props.country,
+        inactive,
+        onSelectCountry: setCountry,
+        onAfterSelect: focusInput
       });
-      const rootClasses = vue.computed(() => [
-        "phone-input",
-        sizeClass.value,
-        themeClass.value,
-        {
-          "is-disabled": props.disabled,
-          "is-readonly": props.readonly,
-          "is-unstyled": props.disableDefaultStyles,
-          "is-incomplete": props.withValidity && shouldShowWarn.value,
-          "is-complete": props.withValidity && isComplete.value
-        }
-      ]);
-      const rootStyles = vue.computed(() => ({
-        "--pi-actions-count": +showCopyButton.value + +showClearButton.value + (slots["actions-before"] ? 1 : 0)
-      }));
-      const emitModelUpdate = () => {
-        if (model.value === digits.value) return;
-        model.value = digits.value;
-        emit("change", {
-          full: full.value,
-          fullFormatted: fullFormatted.value,
-          digits: digits.value
-        });
-      };
-      const onInput = async (e2) => {
-        if (inactive.value) return;
-        mask.handleInput(e2);
-        await vue.nextTick();
-        emitModelUpdate();
-      };
-      const onKeydown = async (e2) => {
-        if (inactive.value) return;
-        mask.handleKeydown(e2);
-        await vue.nextTick();
-        emitModelUpdate();
-      };
-      const onPaste = async (e2) => {
-        if (inactive.value) return;
-        mask.handlePaste(e2);
-        await vue.nextTick();
-        emitModelUpdate();
-      };
-      const onFocus = (e2) => {
-        mask.handleFocus();
-        dropdownOpened.value = false;
+      const { handleBeforeInput, handleInput, handleKeydown, handlePaste } = useInputHandlers({
+        formatter,
+        digits,
+        inactive,
+        onChange,
+        scheduleValidationHint
+      });
+      const handleFocus = (e2) => {
+        clearValidationHint(false);
+        closeDropdown();
         emit("focus", e2);
       };
-      const onBlur = (e2) => emit("blur", e2);
-      const onSelectCountry = async (countryId) => {
-        countrySelector.selectCountry(countryId);
-        emit("country-change", selected.value);
-        await vue.nextTick();
-        telRef.value?.focus();
-      };
-      const onCopyClick = async () => {
-        const valueToCopy = fullFormatted.value;
-        const success = await copy(valueToCopy);
-        if (success) {
-          emit("copy", valueToCopy);
-        }
-      };
-      const onClearClick = async () => {
-        mask.clear();
-        model.value = "";
-        emit("change", {
-          full: "",
-          fullFormatted: "",
-          digits: ""
-        });
+      const handleBlur = (e2) => emit("blur", e2);
+      const clear = () => {
+        onChange("");
+        clearValidationHint();
         emit("clear");
-        await vue.nextTick();
-        telRef.value?.focus();
-      };
-      const positionDropdown = (e2) => {
-        if (e2?.type === "scroll" && e2.target && dropdownRef.value?.contains(e2.target)) return;
-        const root = rootRef.value;
-        if (!root) return;
-        const rect = root.getBoundingClientRect();
-        dropdownStyle.value = {
-          top: `${rect.bottom + window.scrollY + 8}px`,
-          left: `${rect.left + window.scrollX}px`,
-          width: `${rect.width}px`
-        };
       };
-      const removeDropdownListeners = () => {
-        window.removeEventListener("scroll", positionDropdown, true);
-        window.removeEventListener("click", onDocClick, true);
-        window.removeEventListener("resize", positionDropdown);
+      const onClearClick = () => {
+        clear();
+        focusInput();
       };
-      const toggleDropdown = async () => {
-        if (inactive.value || !hasDropdown.value) return;
-        await countrySelector.toggleDropdown(searchRef);
-        if (dropdownOpened.value) {
-          positionDropdown();
-          window.addEventListener("scroll", positionDropdown, true);
-          window.addEventListener("click", onDocClick, true);
-          window.addEventListener("resize", positionDropdown);
-        } else {
-          removeDropdownListeners();
-        }
-      };
-      const scrollFocusedIntoView = async () => {
-        await vue.nextTick();
-        const list = dropdownRef.value?.lastElementChild;
-        if (!list) return;
-        const option = list.children[focusedIndex.value];
-        if (!option) return;
-        const listRect = list.getBoundingClientRect();
-        const optionRect = option.getBoundingClientRect();
-        let scrollAmount = 0;
-        if (optionRect.top < listRect.top) {
-          scrollAmount = list.scrollTop - (listRect.top - optionRect.top);
-        } else if (optionRect.bottom > listRect.bottom) {
-          scrollAmount = list.scrollTop + (optionRect.bottom - listRect.bottom);
-        } else {
-          return;
-        }
-        list.scrollTo({ top: scrollAmount, behavior: "smooth" });
-      };
-      const onDocClick = (ev) => {
-        const dropdown = dropdownRef.value;
-        const selector = rootRef.value?.firstChild;
-        if (!(dropdown || selector)) return;
-        const target = ev.target;
-        if (!target || dropdown?.contains(target) || selector?.contains(target)) return;
-        dropdownOpened.value = false;
-      };
-      vue.watch(
-        model,
-        (newValue) => {
-          if (!newValue) {
-            if (!isEmpty.value) mask.clear();
-            return;
-          }
-          const currentDigits = digits.value;
-          if (newValue !== currentDigits) {
-            const incomingDigits = newValue.replace(/\D/g, "");
-            if (incomingDigits !== currentDigits) {
-              digits.value = incomingDigits;
-              mask.updateDisplayFromDigits();
-            }
-          }
-        },
-        { immediate: true }
-      );
-      vue.watch(
-        [() => props.country, () => props.detect],
-        async ([country, detect]) => {
-          await vue.nextTick();
-          await countrySelector.initCountry(country, detect, () => emit("country-change", selected.value));
-        },
-        { immediate: true }
-      );
-      vue.watch(
-        copyMessage,
-        (val) => {
-          if (liveRef.value && val) {
-            liveRef.value.textContent = val;
-          }
-        },
-        { flush: "post" }
-      );
-      vue.watch(
-        isComplete,
-        (valid) => {
-          emit("validation-change", valid);
-        },
-        { flush: "post" }
-      );
-      vue.onBeforeUnmount(() => {
-        removeDropdownListeners();
-        onClipboardUnmount();
-      });
       __expose({
-        focus: () => telRef.value?.focus(),
+        focus: focusInput,
         blur: () => telRef.value?.blur(),
-        clear: mask.clear,
-        selectCountry: countrySelector.selectCountry,
+        clear,
+        selectCountry,
         getFullNumber: () => full.value,
         getFullFormattedNumber: () => fullFormatted.value,
         getDigits: () => digits.value,
         isValid: () => isComplete.value,
         isComplete: () => isComplete.value
       });
+      const { themeClass } = useTheme({
+        theme: () => props.theme
+      });
+      const rootClasses = vue.computed(() => [
+        "phone-input",
+        `size-${props.size}`,
+        themeClass.value,
+        {
+          "is-disabled": props.disabled,
+          "is-readonly": props.readonly,
+          "is-unstyled": props.disableDefaultStyles,
+          "is-incomplete": props.withValidity && incomplete.value,
+          "is-complete": props.withValidity && isComplete.value
+        }
+      ]);
+      const rootStyles = vue.computed(() => ({
+        "--pi-actions-count": +showCopyButton.value + +showClearButton.value + (slots["actions-before"] ? 1 : 0)
+      }));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "rootRef",
@@ -888,36 +861,41 @@ var lib = (function(exports, vue) {
           class: vue.normalizeClass(rootClasses.value),
           style: vue.normalizeStyle(rootStyles.value)
         }, [
-          vue.createElementVNode("div", _hoisted_1, [
+          vue.createElementVNode("div", {
+            ref_key: "selectorRef",
+            ref: selectorRef,
+            class: "pi-selector"
+          }, [
             vue.createElementVNode("button", {
               type: "button",
               class: vue.normalizeClass(["pi-selector-btn", { "no-dropdown": !vue.unref(hasDropdown) || __props.readonly }]),
               disabled: __props.disabled,
               tabindex: inactive.value || !vue.unref(hasDropdown) ? -1 : void 0,
-              "aria-label": `Selected country: ${vue.unref(selected).name}`,
-              "aria-expanded": vue.unref(dropdownOpened),
+              "aria-label": `Selected country: ${vue.unref(country).name}`,
+              "aria-expanded": vue.unref(dropdownOpen),
               "aria-haspopup": vue.unref(hasDropdown) ? "listbox" : void 0,
-              onClick: toggleDropdown
+              onClick: _cache[0] || (_cache[0] = //@ts-ignore
+              (...args) => vue.unref(toggleDropdown) && vue.unref(toggleDropdown)(...args))
             }, [
               vue.createElementVNode("span", {
                 class: "pi-flag",
                 role: "img",
-                "aria-label": `${vue.unref(selected).name} flag`
+                "aria-label": `${vue.unref(country).name} flag`
               }, [
-                vue.renderSlot(_ctx.$slots, "flag", { country: vue.unref(selected) }, () => [
-                  vue.createTextVNode(vue.toDisplayString(vue.unref(selected).flag), 1)
+                vue.renderSlot(_ctx.$slots, "flag", { country: vue.unref(country) }, () => [
+                  vue.createTextVNode(vue.toDisplayString(vue.unref(country).flag), 1)
                 ], true)
-              ], 8, _hoisted_3),
-              vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(vue.unref(selected).code), 1),
+              ], 8, _hoisted_2),
+              vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(vue.unref(country).code), 1),
               !inactive.value && vue.unref(hasDropdown) ? (vue.openBlock(), vue.createElementBlock("svg", {
                 key: 0,
-                class: vue.normalizeClass(["pi-chevron", { "is-open": vue.unref(dropdownOpened) }]),
+                class: vue.normalizeClass(["pi-chevron", { "is-open": vue.unref(dropdownOpen) }]),
                 width: "12",
                 height: "12",
                 viewBox: "0 0 12 12",
                 fill: "none",
                 "aria-hidden": "true"
-              }, [..._cache[6] || (_cache[6] = [
+              }, [..._cache[8] || (_cache[8] = [
                 vue.createElementVNode("path", {
                   d: "M2.5 4.5L6 8L9.5 4.5",
                   stroke: "currentColor",
@@ -926,9 +904,9 @@ var lib = (function(exports, vue) {
                   "stroke-linejoin": "round"
                 }, null, -1)
               ])], 2)) : vue.createCommentVNode("", true)
-            ], 10, _hoisted_2)
-          ]),
-          vue.createElementVNode("div", _hoisted_5, [
+            ], 10, _hoisted_1)
+          ], 512),
+          vue.createElementVNode("div", _hoisted_4, [
             vue.createElementVNode("input", {
               ref_key: "telRef",
               ref: telRef,
@@ -943,16 +921,19 @@ var lib = (function(exports, vue) {
               value: vue.unref(displayValue),
               disabled: __props.disabled,
               readonly: __props.readonly,
-              "aria-invalid": vue.unref(shouldShowWarn),
-              onBeforeinput: _cache[0] || (_cache[0] = //@ts-ignore
-              (...args) => vue.unref(mask).handleBeforeInput && vue.unref(mask).handleBeforeInput(...args)),
-              onInput,
-              onKeydown,
-              onPaste,
-              onFocus,
-              onBlur
-            }, null, 40, _hoisted_6),
-            vue.createElementVNode("div", _hoisted_7, [
+              "aria-invalid": incomplete.value,
+              onBeforeinput: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => vue.unref(handleBeforeInput) && vue.unref(handleBeforeInput)(...args)),
+              onInput: _cache[2] || (_cache[2] = //@ts-ignore
+              (...args) => vue.unref(handleInput) && vue.unref(handleInput)(...args)),
+              onKeydown: _cache[3] || (_cache[3] = //@ts-ignore
+              (...args) => vue.unref(handleKeydown) && vue.unref(handleKeydown)(...args)),
+              onPaste: _cache[4] || (_cache[4] = //@ts-ignore
+              (...args) => vue.unref(handlePaste) && vue.unref(handlePaste)(...args)),
+              onFocus: handleFocus,
+              onBlur: handleBlur
+            }, null, 40, _hoisted_5),
+            vue.createElementVNode("div", _hoisted_6, [
               vue.createVNode(vue.Transition, { name: "fade-scale" }, {
                 default: vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "actions-before", {}, void 0, true)
@@ -964,26 +945,27 @@ var lib = (function(exports, vue) {
                   showCopyButton.value ? (vue.openBlock(), vue.createElementBlock("button", {
                     key: 0,
                     type: "button",
-                    class: vue.normalizeClass(["pi-btn", { "is-copied": vue.unref(copied) }]),
-                    "aria-label": copyAriaLabel.value,
-                    title: copyButtonTitle.value,
-                    onClick: onCopyClick
+                    class: vue.normalizeClass(["pi-btn", "pi-btn-copy", { "is-copied": vue.unref(copied) }]),
+                    "aria-label": vue.unref(copyAriaLabel),
+                    title: vue.unref(copyButtonTitle),
+                    onClick: _cache[5] || (_cache[5] = //@ts-ignore
+                    (...args) => vue.unref(onCopyClick) && vue.unref(onCopyClick)(...args))
                   }, [
                     slots["copy-svg"] ? vue.renderSlot(_ctx.$slots, "copy-svg", {
                       key: 0,
                       copied: vue.unref(copied)
-                    }, void 0, true) : !vue.unref(copied) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9, [..._cache[7] || (_cache[7] = [
+                    }, void 0, true) : !vue.unref(copied) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_8, [..._cache[9] || (_cache[9] = [
                       vue.createElementVNode("path", {
                         d: "M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z",
                         fill: "currentColor"
                       }, null, -1)
-                    ])])) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_10, [..._cache[8] || (_cache[8] = [
+                    ])])) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9, [..._cache[10] || (_cache[10] = [
                       vue.createElementVNode("path", {
                         d: "M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z",
                         fill: "currentColor"
                       }, null, -1)
                     ])]))
-                  ], 10, _hoisted_8)) : vue.createCommentVNode("", true)
+                  ], 10, _hoisted_7)) : vue.createCommentVNode("", true)
                 ]),
                 _: 3
               }),
@@ -992,18 +974,18 @@ var lib = (function(exports, vue) {
                   showClearButton.value ? (vue.openBlock(), vue.createElementBlock("button", {
                     key: 0,
                     type: "button",
-                    class: "pi-btn",
+                    class: "pi-btn pi-btn-clear",
                     "aria-label": __props.clearButtonLabel,
                     title: __props.clearButtonLabel,
                     onClick: onClearClick
                   }, [
-                    !slots["clear-svg"] ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_12, [..._cache[9] || (_cache[9] = [
+                    !slots["clear-svg"] ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_11, [..._cache[11] || (_cache[11] = [
                       vue.createElementVNode("path", {
                         d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",
                         fill: "currentColor"
                       }, null, -1)
                     ])])) : vue.renderSlot(_ctx.$slots, "clear-svg", { key: 1 }, void 0, true)
-                  ], 8, _hoisted_11)) : vue.createCommentVNode("", true)
+                  ], 8, _hoisted_10)) : vue.createCommentVNode("", true)
                 ]),
                 _: 3
               })
@@ -1012,42 +994,30 @@ var lib = (function(exports, vue) {
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
             vue.createVNode(vue.Transition, { name: "dropdown" }, {
               default: vue.withCtx(() => [
-                vue.unref(dropdownOpened) ? (vue.openBlock(), vue.createElementBlock("div", {
+                vue.unref(dropdownOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 0,
                   ref_key: "dropdownRef",
                   ref: dropdownRef,
-                  class: vue.normalizeClass(["phone-dropdown", [__props.dropdownClass, themeClass.value]]),
+                  class: vue.normalizeClass(["phone-dropdown", [__props.dropdownClass, vue.unref(themeClass)]]),
                   role: "dialog",
                   "aria-modal": "false",
                   "aria-label": "Select country",
-                  style: vue.normalizeStyle(dropdownStyle.value)
+                  style: vue.normalizeStyle(vue.unref(dropdownStyle))
                 }, [
-                  vue.createElementVNode("div", _hoisted_13, [
-                    vue.withDirectives(vue.createElementVNode("input", {
+                  vue.createElementVNode("div", _hoisted_12, [
+                    vue.createElementVNode("input", {
                       ref_key: "searchRef",
                       ref: searchRef,
-                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(search) ? search.value = $event : null),
+                      value: vue.unref(search),
                       type: "search",
                       class: "pi-search",
                       "aria-label": "Search countries",
                       placeholder: __props.searchPlaceholder,
-                      onKeydown: [
-                        _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(($event) => vue.unref(focusNextOption)(scrollFocusedIntoView), ["prevent"]), ["down"])),
-                        _cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers(($event) => vue.unref(focusPrevOption)(scrollFocusedIntoView), ["prevent"]), ["up"])),
-                        _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(
-                          //@ts-ignore
-                          (...args) => vue.unref(chooseFocusedOption) && vue.unref(chooseFocusedOption)(...args),
-                          ["prevent"]
-                        ), ["enter"])),
-                        _cache[5] || (_cache[5] = vue.withKeys(
-                          //@ts-ignore
-                          (...args) => vue.unref(closeDropdown) && vue.unref(closeDropdown)(...args),
-                          ["escape"]
-                        ))
-                      ]
-                    }, null, 40, _hoisted_14), [
-                      [vue.vModelText, vue.unref(search)]
-                    ])
+                      onKeydown: _cache[6] || (_cache[6] = //@ts-ignore
+                      (...args) => vue.unref(handleSearchKeydown) && vue.unref(handleSearchKeydown)(...args)),
+                      onInput: _cache[7] || (_cache[7] = //@ts-ignore
+                      (...args) => vue.unref(handleSearchChange) && vue.unref(handleSearchChange)(...args))
+                    }, null, 40, _hoisted_13)
                   ]),
                   vue.createElementVNode("ul", {
                     class: "pi-options",
@@ -1064,13 +1034,13 @@ var lib = (function(exports, vue) {
                           "pi-option",
                           {
                             "is-focused": idx === vue.unref(focusedIndex),
-                            "is-selected": c.id === vue.unref(selected).id
+                            "is-selected": c.id === vue.unref(country).id
                           }
                         ]),
-                        "aria-selected": c.id === vue.unref(selected).id,
+                        "aria-selected": c.id === vue.unref(country).id,
                         title: c.name,
-                        onClick: ($event) => onSelectCountry(c.id),
-                        onMouseenter: ($event) => focusedIndex.value = idx
+                        onClick: ($event) => vue.unref(selectCountry)(c.id),
+                        onMouseenter: ($event) => vue.unref(setFocusedIndex)(idx)
                       }, [
                         vue.createElementVNode("span", {
                           class: "pi-flag",
@@ -1080,13 +1050,13 @@ var lib = (function(exports, vue) {
                           vue.renderSlot(_ctx.$slots, "flag", { country: c }, () => [
                             vue.createTextVNode(vue.toDisplayString(c.flag), 1)
                           ], true)
-                        ], 8, _hoisted_17),
-                        vue.createElementVNode("span", _hoisted_18, vue.toDisplayString(c.name), 1),
-                        vue.createElementVNode("span", _hoisted_19, vue.toDisplayString(c.code), 1)
-                      ], 42, _hoisted_16);
+                        ], 8, _hoisted_16),
+                        vue.createElementVNode("span", _hoisted_17, vue.toDisplayString(c.name), 1),
+                        vue.createElementVNode("span", _hoisted_18, vue.toDisplayString(c.code), 1)
+                      ], 42, _hoisted_15);
                     }), 128)),
-                    vue.unref(filteredCountries).length === 0 ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_20, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true)
-                  ], 8, _hoisted_15)
+                    vue.unref(filteredCountries).length === 0 ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_19, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true)
+                  ], 8, _hoisted_14)
                 ], 6)) : vue.createCommentVNode("", true)
               ]),
               _: 3
@@ -1111,21 +1081,7 @@ var lib = (function(exports, vue) {
     }
     return target;
   };
-  const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-755b15ee"]]);
-  function detectCountryFromLocale() {
-    try {
-      const lang = getNavigatorLang();
-      try {
-        const loc = new Intl.Locale(lang);
-        if (loc.region) return loc.region.toUpperCase();
-      } catch {
-      }
-      const parts = lang.split(/[-_]/);
-      if (parts.length > 1) return parts[1]?.toUpperCase() || null;
-    } catch {
-    }
-    return null;
-  }
+  const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-33134720"]]);
   async function initState(binding) {
     const value = binding.value;
     let options = {};
@@ -1173,140 +1129,44 @@ var lib = (function(exports, vue) {
       });
     }
   }
-  function createBeforeInputHandler(el) {
-    return (e2) => {
-      const data = e2.data;
-      if (e2.inputType !== "insertText" || !data) return;
-      if (InvalidPattern.test(data) || data === " " && el.value.endsWith(" ")) {
-        e2.preventDefault();
-      }
-    };
-  }
   function createInputHandler(el, state) {
     return (e2) => {
-      const target = e2.target;
-      if (!target) return;
-      const raw = target.value || "";
-      const maxDigits = state.formatter.getMaxDigits();
-      state.digits = extractDigits(raw, maxDigits);
+      const result = processInput(e2, { formatter: state.formatter });
+      if (!result) return;
+      state.digits = result.newDigits;
       updateDisplay(el, state);
       vue.nextTick(() => {
-        const pos = state.formatter.getCaretPosition(state.digits.length);
+        const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
         setCaret(el, pos);
       });
     };
   }
   function createKeydownHandler(el, state) {
     return (e2) => {
-      if (e2.ctrlKey || e2.metaKey || e2.altKey || NavigationKeys.includes(e2.key)) return;
-      const [selStart, selEnd] = getSelection(el);
-      if (e2.key === "Backspace") {
-        e2.preventDefault();
-        if (selStart !== selEnd) {
-          const range = state.formatter.getDigitRange(state.digits, selStart, selEnd);
-          if (range) {
-            const [start, end] = range;
-            state.digits = state.digits.slice(0, start) + state.digits.slice(end);
-            updateDisplay(el, state);
-            vue.nextTick(() => {
-              const pos = state.formatter.getCaretPosition(start);
-              setCaret(el, pos);
-            });
-          }
-          return;
-        }
-        if (selStart > 0) {
-          const displayStr = el.value;
-          let prevPos = selStart - 1;
-          while (prevPos >= 0 && Delimiters.includes(displayStr[prevPos])) {
-            prevPos--;
-          }
-          if (prevPos >= 0) {
-            const range = state.formatter.getDigitRange(state.digits, prevPos, prevPos + 1);
-            if (range) {
-              const [start] = range;
-              state.digits = state.digits.slice(0, start) + state.digits.slice(start + 1);
-              updateDisplay(el, state);
-              vue.nextTick(() => {
-                const pos = state.formatter.getCaretPosition(start);
-                setCaret(el, pos);
-              });
-            }
-          }
-        }
-        return;
-      }
-      if (e2.key === "Delete") {
-        e2.preventDefault();
-        if (selStart !== selEnd) {
-          const range = state.formatter.getDigitRange(state.digits, selStart, selEnd);
-          if (range) {
-            const [start, end] = range;
-            state.digits = state.digits.slice(0, start) + state.digits.slice(end);
-            updateDisplay(el, state);
-            vue.nextTick(() => {
-              const pos = state.formatter.getCaretPosition(start);
-              setCaret(el, pos);
-            });
-          }
-          return;
-        }
-        if (selStart < el.value.length) {
-          const range = state.formatter.getDigitRange(state.digits, selStart, selStart + 1);
-          if (range) {
-            const [start] = range;
-            state.digits = state.digits.slice(0, start) + state.digits.slice(start + 1);
-            updateDisplay(el, state);
-            vue.nextTick(() => {
-              const pos = state.formatter.getCaretPosition(start);
-              setCaret(el, pos);
-            });
-          }
-        }
-        return;
-      }
-      if (/^[0-9]$/.test(e2.key)) {
-        if (state.digits.length >= state.formatter.getMaxDigits()) {
-          e2.preventDefault();
-        }
-        return;
-      }
-      if (e2.key.length === 1) {
-        e2.preventDefault();
-      }
+      const result = processKeydown(e2, {
+        digits: state.digits,
+        formatter: state.formatter
+      });
+      if (!result) return;
+      state.digits = result.newDigits;
+      updateDisplay(el, state);
+      vue.nextTick(() => {
+        const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
+        setCaret(el, pos);
+      });
     };
   }
   function createPasteHandler(el, state) {
     return (e2) => {
-      e2.preventDefault();
-      const text = e2.clipboardData?.getData("text") || "";
-      const maxDigits = state.formatter.getMaxDigits();
-      const pastedDigits = extractDigits(text, maxDigits);
-      if (pastedDigits.length === 0) return;
-      const [selStart, selEnd] = getSelection(el);
-      if (selStart !== selEnd) {
-        const range2 = state.formatter.getDigitRange(state.digits, selStart, selEnd);
-        if (range2) {
-          const [start, end] = range2;
-          const left2 = state.digits.slice(0, start);
-          const right2 = state.digits.slice(end);
-          state.digits = extractDigits(left2 + pastedDigits + right2, maxDigits);
-          updateDisplay(el, state);
-          vue.nextTick(() => {
-            const pos = state.formatter.getCaretPosition(start + pastedDigits.length);
-            setCaret(el, pos);
-          });
-          return;
-        }
-      }
-      const range = state.formatter.getDigitRange(state.digits, selStart, selStart);
-      const insertIndex = range ? range[0] : state.digits.length;
-      const left = state.digits.slice(0, insertIndex);
-      const right = state.digits.slice(insertIndex);
-      state.digits = extractDigits(left + pastedDigits + right, maxDigits);
+      const result = processPaste(e2, {
+        digits: state.digits,
+        formatter: state.formatter
+      });
+      if (!result) return;
+      state.digits = result.newDigits;
       updateDisplay(el, state);
       vue.nextTick(() => {
-        const pos = state.formatter.getCaretPosition(insertIndex + pastedDigits.length);
+        const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
         setCaret(el, pos);
       });
     };
@@ -1338,7 +1198,7 @@ var lib = (function(exports, vue) {
       state.inputHandler = createInputHandler(el, state);
       state.keydownHandler = createKeydownHandler(el, state);
       state.pasteHandler = createPasteHandler(el, state);
-      state.beforeInputHandler = createBeforeInputHandler(el);
+      state.beforeInputHandler = processBeforeInput;
       el.addEventListener("beforeinput", state.beforeInputHandler);
       el.addEventListener("input", state.inputHandler);
       el.addEventListener("keydown", state.keydownHandler);
@@ -1369,8 +1229,10 @@ var lib = (function(exports, vue) {
       if (newCountry && newCountry !== oldCountry) {
         await updateCountry(el, state, newCountry);
       }
-      const newDigits = extractDigits(el.value);
-      if (newDigits !== state.digits) {
+      const maxDigits = state.formatter.getMaxDigits();
+      const newDigits = extractDigits(el.value, maxDigits);
+      const normalizedDisplay = state.formatter.formatDisplay(newDigits);
+      if (newDigits !== state.digits || el.value !== normalizedDisplay) {
         state.digits = newDigits;
         updateDisplay(el, state);
       }
@@ -1385,6 +1247,82 @@ var lib = (function(exports, vue) {
       delete el.__phoneMaskState;
     }
   };
+  function usePhoneMask(options) {
+    const inputRef = vue.shallowRef(null);
+    const { country, setCountry } = useCountry({
+      country: options.country,
+      locale: options.locale,
+      detect: options.detect,
+      onCountryChange: options.onCountryChange
+    });
+    const {
+      digits,
+      formatter,
+      displayPlaceholder,
+      displayValue,
+      full,
+      fullFormatted,
+      isComplete,
+      isEmpty,
+      shouldShowWarn
+    } = useFormatter({
+      country,
+      value: options.value,
+      onChange: options.onChange,
+      onPhoneChange: options.onPhoneChange
+    });
+    const { handleBeforeInput, handleInput, handleKeydown, handlePaste } = useInputHandlers({
+      formatter,
+      digits,
+      onChange: options.onChange
+    });
+    vue.onMounted(() => {
+      const el = inputRef.value;
+      if (!el) return;
+      el.setAttribute("type", "tel");
+      el.setAttribute("inputmode", "tel");
+    });
+    vue.watchEffect(
+      () => {
+        const el = inputRef.value;
+        if (!el) return;
+        el.value = displayValue.value;
+        el.setAttribute("placeholder", displayPlaceholder.value);
+      },
+      { flush: "post" }
+    );
+    vue.onMounted(() => {
+      const el = inputRef.value;
+      if (!el) return;
+      el.addEventListener("beforeinput", handleBeforeInput);
+      el.addEventListener("input", handleInput);
+      el.addEventListener("keydown", handleKeydown);
+      el.addEventListener("paste", handlePaste);
+    });
+    vue.onUnmounted(() => {
+      const el = inputRef.value;
+      if (!el) return;
+      el.removeEventListener("beforeinput", handleBeforeInput);
+      el.removeEventListener("input", handleInput);
+      el.removeEventListener("keydown", handleKeydown);
+      el.removeEventListener("paste", handlePaste);
+    });
+    const clear = () => {
+      options.onChange("");
+    };
+    return {
+      inputRef,
+      digits,
+      full,
+      fullFormatted,
+      isComplete,
+      isEmpty,
+      shouldShowWarn,
+      country,
+      setCountry,
+      clear
+    };
+  }
   function install(app) {
     app.component("PhoneInput", PhoneInput);
     app.directive("phone-mask", vPhoneMask);
@@ -1393,7 +1331,7 @@ var lib = (function(exports, vue) {
     install
   };
   const PMaskHelpers = {
-    getFlagEmoji: g,
+    getFlagEmoji: k,
     countPlaceholders,
     formatDigitsWithMap,
     pickMaskVariant,
@@ -1404,6 +1342,7 @@ var lib = (function(exports, vue) {
   exports.PhoneInput = PhoneInput;
   exports.default = index;
   exports.install = install;
+  exports.usePhoneMask = usePhoneMask;
   exports.vPhoneMask = vPhoneMask;
   exports.vPhoneMaskSetCountry = updateCountry;
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });