@desource/phone-mask-vue 0.3.0 → 1.1.0

package/dist/index.cjs

@@ -10,67 +10,92 @@ const t$1 = /^[a-z]{2}$/i, countryCodeEmoji = (o2) => {
   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$1 = /* @__PURE__ */ new Map(), getDisplayNames = (e2) => {
+  const t2 = e2.toLowerCase(), s2 = n$1.get(t2);
+  if (s2) return s2;
+  const r = new Intl.DisplayNames([e2], { type: "region" });
+  if (n$1.size >= 10) {
+    for (const e3 of n$1.keys()) if (e3 !== o$1) {
+      n$1.delete(e3);
+      break;
+    }
+  }
+  return n$1.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";
+  return globalThis.navigator?.language || "en";
 }
-function getMasksFullMapByLocale(e2) {
-  return e2.toLowerCase().startsWith("en") ? m : MasksFullMap(e2);
+function detectCountryFromLocale() {
+  try {
+    const t2 = getNavigatorLang();
+    try {
+      const r2 = new Intl.Locale(t2);
+      if (r2.region) return r2.region.toUpperCase();
+    } catch {
+    }
+    const r = t2.split(/[-_]/);
+    if (r.length > 1) return r[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 e2 = f;
+  return t2.toUpperCase() in e2;
+}
+function getCountry(r, e2) {
+  const n2 = MasksFullMap(e2), o2 = r.toUpperCase();
+  return o2 in n2 ? { id: o2, ...n2[o2] } : { id: "US", ...n2.US };
+}
+function parseCountryCode(t2, r) {
+  return t2 && hasCountry(t2) ? t2.toUpperCase() : r || "";
 }
 function toArray(t2) {
   return Array.isArray(t2) ? t2 : [t2];
@@ -81,480 +106,478 @@ function countPlaceholders(t2) {
 function removeCountryCodePrefix(t2) {
   return t2.replace(/^\+\d+\s?/, "");
 }
-function pickMaskVariant(t2, n) {
+function pickMaskVariant(t2, r) {
+  if (!t2.length) return "";
   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 e2 = t2.map((t3) => ({ mask: t3, count: countPlaceholders(t3) })), n2 = e2.filter((t3) => t3.count >= r).sort((t3, r2) => t3.count - r2.count);
+  if (n2.length > 0) return n2[0].mask;
+  const o2 = e2.sort((t3, r2) => r2.count - t3.count)[0];
   return o2 ? o2.mask : t2[0];
 }
-function formatDigitsWithMap(t2, n) {
+function formatDigitsWithMap(t2, r) {
   let e2 = "";
-  const 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 = r.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++;
+      e2 += r[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 r2 = -1 !== t2.indexOf("#", c + 1) && o2 < a;
+      (e2.length > 0 || r2) && (e2 += s3, n2.push(-1));
+    }
+  }
+  return { display: e2, map: n2 };
+}
+function filterCountries(t2, r) {
+  const e2 = r.trim().toUpperCase();
+  if (!e2) return t2;
+  const n2 = e2.replace(/\D/g, ""), o2 = n2.length > 0;
+  return t2.map((t3) => {
+    const r2 = t3.name.toUpperCase(), a = t3.id.toUpperCase(), s2 = t3.code.toUpperCase(), c = t3.code.replace(/\D/g, "");
+    let i = 0;
+    return r2.startsWith(e2) ? i = 1e3 : r2.includes(e2) && (i = 500), s2.startsWith(e2) ? i += 100 : s2.includes(e2) && (i += 50), a === e2 ? i += 200 : a.startsWith(e2) && (i += 150), o2 && c.startsWith(n2) ? i += 80 : o2 && c.includes(n2) && (i += 40), { country: t3, score: i };
+  }).filter((t3) => t3.score > 0).sort((t3, r2) => r2.score === t3.score ? t3.country.name.localeCompare(r2.country.name) : r2.score - t3.score).map((t3) => t3.country);
+}
+const e$1 = [" ", "-", "(", ")"], t = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "Tab"], n = /[^\d\s\-()]/;
+function removeDigitsRange(e2, t2, n2) {
+  return { newDigits: e2.slice(0, t2) + e2.slice(n2), caretDigitIndex: t2 };
+}
+function removeSelectedDigits(e2, t2, n2, i) {
+  if (n2 === i) return;
+  const r = t2.getDigitRange(e2, n2, i);
+  if (!r) return;
+  const [s2, g] = r;
+  return removeDigitsRange(e2, s2, g);
+}
+function extractDigits(e2, t2) {
+  const n2 = e2.replace(/\D/g, "");
+  return t2 ? n2.slice(0, t2) : n2;
+}
+function getSelection(e2) {
+  return e2 ? [e2.selectionStart ?? 0, e2.selectionEnd ?? 0] : [0, 0];
+}
+function setCaret(e2, t2) {
+  if (e2) try {
+    e2.setSelectionRange(t2, t2);
+  } catch {
+  }
+}
+function processBeforeInput(e2) {
+  if (!e2.target) return;
+  const t2 = e2.target, i = e2.data;
+  "insertText" === e2.inputType && i && (n.test(i) || " " === i && t2.value.endsWith(" ")) && e2.preventDefault();
+}
+function processInput(e2, t2) {
+  if (!e2.target) return;
+  const n2 = e2.target, { formatter: i } = t2, r = i.getMaxDigits(), s2 = extractDigits(n2.value, r);
+  return { newDigits: s2, caretDigitIndex: s2.length };
+}
+function processKeydown(n2, i) {
+  if (!n2.target) return;
+  const r = n2.target, { digits: s2, formatter: g } = i;
+  if ((function shouldIgnoreKeydown(e2) {
+    return e2.ctrlKey || e2.metaKey || e2.altKey || t.includes(e2.key);
+  })(n2)) return;
+  const [o2, c] = getSelection(r), a = r.value;
+  return "Backspace" === n2.key ? (n2.preventDefault(), removeSelectedDigits(s2, g, o2, c) ?? (function removePreviousDigit(t2, n3, i2, r2) {
+    if (r2 <= 0) return;
+    let s3 = r2 - 1;
+    for (; s3 >= 0 && e$1.includes(i2[s3]); ) s3--;
+    if (s3 < 0) return;
+    const g2 = n3.getDigitRange(t2, s3, s3 + 1);
+    if (!g2) return;
+    const [o3] = g2;
+    return removeDigitsRange(t2, o3, o3 + 1);
+  })(s2, g, a, o2)) : "Delete" === n2.key ? (n2.preventDefault(), removeSelectedDigits(s2, g, o2, c) ?? (function removeNextDigit(e2, t2, n3, i2) {
+    if (i2 >= n3.length) return;
+    const r2 = t2.getDigitRange(e2, i2, n3.length);
+    if (!r2) return;
+    const [s3] = r2;
+    return removeDigitsRange(e2, s3, s3 + 1);
+  })(s2, g, a, o2)) : void (/^\d$/.test(n2.key) ? s2.length >= g.getMaxDigits() && n2.preventDefault() : 1 === n2.key.length && n2.preventDefault());
+}
+function processPaste(e2, t2) {
+  if (!e2.target) return;
+  e2.preventDefault();
+  const n2 = e2.target, { digits: i, formatter: r } = t2, s2 = e2.clipboardData?.getData("text") || "", g = r.getMaxDigits(), o2 = extractDigits(s2, g);
+  if (0 === o2.length) return;
+  const [c, a] = getSelection(n2);
+  if (c !== a) {
+    const e3 = r.getDigitRange(i, c, a);
+    if (e3) {
+      const [t3, n3] = e3;
+      return { newDigits: extractDigits(i.slice(0, t3) + o2 + i.slice(n3), g), caretDigitIndex: t3 + o2.length };
     }
   }
-  return { display: e2, map: r };
+  const u = r.getDigitRange(i, 0, c), l = u ? u[1] : 0;
+  return { newDigits: extractDigits(i.slice(0, l) + o2 + i.slice(l), g), caretDigitIndex: l + o2.length };
+}
+function createPhoneFormatter(o2) {
+  const i = toArray(o2.mask), l = i.map((n2) => countPlaceholders(removeCountryCodePrefix(n2))), s2 = Math.max(...l), getMask = (t2) => {
+    const n2 = pickMaskVariant(i, t2);
+    return removeCountryCodePrefix(n2);
+  };
+  return { formatDisplay: (t2) => {
+    const e2 = getMask(t2.length);
+    return formatDigitsWithMap(e2, t2).display;
+  }, getMaxDigits: () => s2, getPlaceholder: () => getMask(0), getCaretPosition: (t2) => {
+    const e2 = Math.max(0, t2);
+    if (0 === e2) return 0;
+    const r = getMask(e2), { display: a } = formatDigitsWithMap(r, "0".repeat(e2));
+    return a.length;
+  }, getDigitRange: (t2, e2, r) => {
+    const a = getMask(t2.length), { map: o3 } = formatDigitsWithMap(a, t2);
+    let i2 = 1 / 0, l2 = -1 / 0;
+    for (let t3 = e2; t3 < r && t3 < o3.length; t3++) {
+      const e3 = o3[t3];
+      void 0 !== e3 && e3 >= 0 && (i2 = Math.min(i2, e3), l2 = Math.max(l2, e3));
+    }
+    return i2 === 1 / 0 ? null : [i2, l2 + 1];
+  }, isComplete: (t2) => l.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 setCountry2 = (code) => {
+    const parsed = parseCountryCode(code);
+    if (parsed) {
+      countryCode.value = parsed;
+      return true;
+    }
+    return false;
+  };
+  const detectCountry = async () => {
+    const geoCountry = await detectByGeoIp();
+    if (setCountry2(geoCountry)) return;
+    const localeCountry = detectCountryFromLocale();
+    setCountry2(localeCountry);
   };
-  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);
+  vue.watchEffect(() => {
+    const newCountry = vue.toValue(countryOption);
+    if (newCountry && newCountry !== countryCode.value) {
+      setCountry2(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: setCountry2, 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
   };
-  const toggleDropdown = async (searchRef) => {
-    dropdownOpened.value = !dropdownOpened.value;
-    if (!dropdownOpened.value) return;
-    await vue.nextTick();
-    searchRef.value?.focus({ preventScroll: true });
-    focusedIndex.value = 0;
+}
+function useTimer() {
+  let timerRef = null;
+  const clear = () => {
+    if (timerRef) {
+      clearTimeout(timerRef);
+      timerRef = null;
+    }
   };
-  const closeDropdown = () => {
-    dropdownOpened.value = false;
+  const set = (callback, delay) => {
+    clear();
+    timerRef = setTimeout(callback, delay);
   };
-  const focusNextOption = (scrollFn) => {
-    if (filteredCountries.value.length === 0) return;
-    focusedIndex.value = Math.min(filteredCountries.value.length - 1, focusedIndex.value + 1);
-    scrollFn?.();
+  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 focusPrevOption = (scrollFn) => {
-    if (filteredCountries.value.length === 0) return;
-    focusedIndex.value = Math.max(0, focusedIndex.value - 1);
-    scrollFn?.();
+  const scheduleValidationHint = (delay) => {
+    showValidationHint.value = false;
+    validationTimer.set(() => {
+      showValidationHint.value = true;
+    }, delay);
   };
-  const chooseFocusedOption = () => {
-    const item = filteredCountries.value[focusedIndex.value];
-    if (item) selectCountry(item.id);
+  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 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 handleBeforeInput = (e2) => {
+    processBeforeInput(e2);
   };
-  const selectInitialCountry = (id, emitFn) => {
-    const previousId = selectedId.value;
-    selectedId.value = id;
-    if (previousId !== selectedId.value && emitFn) vue.nextTick(emitFn);
+  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 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 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 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 + globalThis.scrollY + 8}px`,
+      left: `${rect.left + globalThis.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 removeListeners = () => {
+    globalThis.removeEventListener("resize", positionDropdown);
+    globalThis.removeEventListener("scroll", positionDropdown, true);
+    globalThis.removeEventListener("click", onDocClick, true);
   };
-  const handleFocus = () => {
-    if (validationTimer.value) {
-      clearTimeout(validationTimer.value);
+  vue.watch(hasDropdown, (dropdownExists) => {
+    if (!dropdownExists && dropdownOpen.value) {
+      closeDropdown();
     }
-  };
-  const clear = () => {
-    digits.value = "";
-    displayValue.value = "";
-    showValidationHint.value = false;
-    if (validationTimer.value) {
-      clearTimeout(validationTimer.value);
-      validationTimer.value = null;
-    }
-  };
-  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();
+    globalThis.addEventListener("resize", positionDropdown);
+    globalThis.addEventListener("scroll", positionDropdown, true);
+    globalThis.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();
@@ -563,11 +586,9 @@ function useClipboard() {
     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);
@@ -576,24 +597,74 @@ function useClipboard() {
       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(() => {
+    const resolvedTheme = vue.toValue(theme);
+    if (resolvedTheme === "auto") {
+      return systemDark.value ? "theme-dark" : "theme-light";
+    }
+    return `theme-${resolvedTheme}`;
+  });
+  let mq = null;
+  const handler = (e2) => {
+    systemDark.value = e2.matches;
+  };
+  vue.onBeforeMount(() => {
+    mq = globalThis.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",
@@ -601,7 +672,7 @@ const _hoisted_9 = {
   fill: "none",
   "aria-hidden": "true"
 };
-const _hoisted_10 = {
+const _hoisted_9 = {
   key: 2,
   width: "16",
   height: "16",
@@ -609,8 +680,8 @@ const _hoisted_10 = {
   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",
@@ -618,14 +689,13 @@ const _hoisted_12 = {
   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", "aria-activedescendant", "placeholder"];
+const _hoisted_14 = ["id", "aria-selected", "title", "onClick", "onMouseenter"];
+const _hoisted_15 = ["aria-label"];
+const _hoisted_16 = { class: "pi-opt-name" };
+const _hoisted_17 = { class: "pi-opt-code" };
+const _hoisted_18 = {
   key: 0,
   class: "pi-empty"
 };
@@ -648,238 +718,139 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     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: setCountry2, 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 dropdownId = vue.getCurrentInstance()?.uid ?? 0;
+    const listboxId = `pi-options-${dropdownId}`;
+    const getOptionId = (idx) => `pi-option-${dropdownId}-${idx}`;
+    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: setCountry2,
+      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 activeOptionId = vue.computed(
+      () => dropdownOpen.value && filteredCountries.value[focusedIndex.value] ? getOptionId(focusedIndex.value) : void 0
+    );
+    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",
@@ -889,36 +860,41 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         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",
@@ -927,9 +903,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 "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,
@@ -944,16 +920,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             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)
@@ -965,26 +944,27 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 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
             }),
@@ -993,18 +973,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 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
             })
@@ -1013,65 +993,55 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         (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",
+                    "aria-controls": listboxId,
+                    "aria-activedescendant": activeOptionId.value,
                     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", {
+                  id: listboxId,
                   class: "pi-options",
                   role: "listbox",
-                  "aria-activedescendant": `option-${vue.unref(focusedIndex)}`,
                   tabindex: "-1"
                 }, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(filteredCountries), (c, idx) => {
                     return vue.openBlock(), vue.createElementBlock("li", {
-                      id: `option-${idx}`,
+                      id: getOptionId(idx),
                       key: c.id,
                       role: "option",
                       class: vue.normalizeClass([
                         "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",
@@ -1081,13 +1051,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         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_15),
+                      vue.createElementVNode("span", _hoisted_16, vue.toDisplayString(c.name), 1),
+                      vue.createElementVNode("span", _hoisted_17, vue.toDisplayString(c.code), 1)
+                    ], 42, _hoisted_14);
                   }), 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_18, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true)
+                ])
               ], 6)) : vue.createCommentVNode("", true)
             ]),
             _: 3
@@ -1112,61 +1082,18 @@ const _export_sfc = (sfc, props) => {
   }
   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-d730aa54"]]);
+function parseParams(params) {
+  if (typeof params === "string") return { country: params };
+  if (params && typeof params === "object") return params;
+  return {};
 }
-async function initState(binding) {
-  const value = binding.value;
-  let options = {};
-  if (typeof value === "string") {
-    options = { country: value };
-  } else if (typeof value === "object" && value !== null) {
-    options = value;
-  }
-  const locale = options.locale || getNavigatorLang();
-  let country;
-  if (options.country) {
-    country = getCountry(options.country, locale);
-  } else if (options.detect) {
-    const geoCountry = await detectCountryFromGeoIP();
-    if (geoCountry) {
-      country = getCountry(geoCountry, locale);
-    } else {
-      const localeCountry = detectCountryFromLocale();
-      if (localeCountry) {
-        country = getCountry(localeCountry, locale);
-      } else {
-        country = getCountry("US", locale);
-      }
-    }
-  } else {
-    country = getCountry("US", locale);
-  }
-  return {
-    country,
-    formatter: createPhoneFormatter(country),
-    digits: "",
-    locale,
-    options
-  };
-}
-function updateDisplay(el, state) {
+function updateDigits(el, state, digits) {
+  state.digits = digits;
   el.value = state.formatter.formatDisplay(state.digits);
   if (state.options.onChange) {
-    const fullNumberFormatted = `${state.country.code} ${el.value}`;
-    const fullNumber = `${state.country.code}${state.digits}`;
+    const fullNumberFormatted = el.value ? `${state.country.code} ${el.value}` : "";
+    const fullNumber = state.digits ? `${state.country.code}${state.digits}` : "";
     state.options.onChange({
       full: fullNumber,
       fullFormatted: fullNumberFormatted,
@@ -1174,207 +1101,92 @@ function updateDisplay(el, state) {
     });
   }
 }
-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);
-    updateDisplay(el, state);
-    vue.nextTick(() => {
-      const pos = state.formatter.getCaretPosition(state.digits.length);
-      setCaret(el, pos);
-    });
-  };
+function checkDigitsUpdate(el, state) {
+  const maxDigits = state.formatter.getMaxDigits();
+  const digits = extractDigits(el.value, maxDigits);
+  const displayValue = state.formatter.formatDisplay(digits);
+  if (digits !== state.digits || el.value !== displayValue) {
+    updateDigits(el, state, digits);
+  }
 }
-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();
-    }
-  };
+function checkCountryUpdate(el, state) {
+  const oldCountry = state.country.id;
+  const newCountry = parseCountryCode(state.options.country);
+  if (newCountry && newCountry !== oldCountry) {
+    setCountry(el, state, newCountry);
+  }
 }
-function createPasteHandler(el, state) {
+function createHandler(el, state, handler) {
   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);
-    updateDisplay(el, state);
+    const result = handler(e2, state);
+    if (!result) return;
+    updateDigits(el, state, result.newDigits);
     vue.nextTick(() => {
-      const pos = state.formatter.getCaretPosition(insertIndex + pastedDigits.length);
+      const pos = state.formatter.getCaretPosition(result.caretDigitIndex);
       setCaret(el, pos);
     });
   };
 }
-async function updateCountry(el, state, newCountryCode) {
-  const newCountry = getCountry(newCountryCode, state.locale);
+async function detectInitialCountry(options) {
+  const countryOption = parseCountryCode(options.country);
+  if (countryOption) return countryOption;
+  if (options.detect) {
+    const geoCountry = parseCountryCode(await detectByGeoIp());
+    if (geoCountry) return geoCountry;
+    const localeCountry = parseCountryCode(detectCountryFromLocale());
+    if (localeCountry) return localeCountry;
+  }
+  return "US";
+}
+function setCountry(el, state, newCountryCode) {
+  const parsed = parseCountryCode(newCountryCode);
+  if (!parsed) return;
+  const newCountry = getCountry(parsed, state.locale);
   state.country = newCountry;
+  state.options.onCountryChange?.(newCountry);
   state.formatter = createPhoneFormatter(newCountry);
   el.placeholder = state.formatter.getPlaceholder();
-  const maxDigits = state.formatter.getMaxDigits();
-  if (state.digits.length > maxDigits) {
-    state.digits = state.digits.slice(0, maxDigits);
-  }
-  updateDisplay(el, state);
-  if (state.options.onCountryChange) {
-    state.options.onCountryChange(newCountry);
-  }
+  checkDigitsUpdate(el, state);
 }
 const vPhoneMask = {
-  async mounted(el, binding) {
+  mounted(el, binding) {
     if (el.tagName !== "INPUT") {
       console.warn("[v-phone-mask] Directive can only be used on input elements");
       return;
     }
     el.setAttribute("type", "tel");
     el.setAttribute("inputmode", "tel");
-    const state = await initState(binding);
+    el.setAttribute("placeholder", "");
+    const options = parseParams(binding.value);
+    const locale = options.locale || getNavigatorLang();
+    const country = getCountry(parseCountryCode(options.country, "US"), locale);
+    const state = {
+      country,
+      formatter: createPhoneFormatter(country),
+      digits: "",
+      locale,
+      options
+    };
     el.__phoneMaskState = state;
-    state.inputHandler = createInputHandler(el, state);
-    state.keydownHandler = createKeydownHandler(el, state);
-    state.pasteHandler = createPasteHandler(el, state);
-    state.beforeInputHandler = createBeforeInputHandler(el);
+    state.inputHandler = createHandler(el, state, processInput);
+    state.keydownHandler = createHandler(el, state, processKeydown);
+    state.pasteHandler = createHandler(el, state, processPaste);
+    state.beforeInputHandler = processBeforeInput;
     el.addEventListener("beforeinput", state.beforeInputHandler);
     el.addEventListener("input", state.inputHandler);
     el.addEventListener("keydown", state.keydownHandler);
     el.addEventListener("paste", state.pasteHandler);
-    el.setAttribute("placeholder", state.formatter.getPlaceholder());
-    if (state.options.onCountryChange) {
-      state.options.onCountryChange(state.country);
-    }
-    if (el.value) {
-      const maxDigits = state.formatter.getMaxDigits();
-      state.digits = extractDigits(el.value, maxDigits);
-      updateDisplay(el, state);
-    }
+    detectInitialCountry(options).then((countryCode) => {
+      if (el.__phoneMaskState !== state) return;
+      setCountry(el, state, countryCode);
+    });
   },
-  async updated(el, binding) {
+  updated(el, binding) {
     const state = el.__phoneMaskState;
     if (!state) return;
-    const value = binding.value;
-    let newOptions = {};
-    if (typeof value === "string") {
-      newOptions = { country: value };
-    } else if (typeof value === "object" && value !== null) {
-      newOptions = value;
-    }
-    const oldCountry = state.options.country;
-    state.options = newOptions;
-    const newCountry = newOptions.country;
-    if (newCountry && newCountry !== oldCountry) {
-      await updateCountry(el, state, newCountry);
-    }
-    const newDigits = extractDigits(el.value);
-    if (newDigits !== state.digits) {
-      state.digits = newDigits;
-      updateDisplay(el, state);
-    }
+    state.options = parseParams(binding.value);
+    checkCountryUpdate(el, state);
+    checkDigitsUpdate(el, state);
   },
   unmounted(el) {
     const state = el.__phoneMaskState;
@@ -1386,6 +1198,83 @@ const vPhoneMask = {
     delete el.__phoneMaskState;
   }
 };
+function usePhoneMask(options) {
+  const inputRef = vue.shallowRef(null);
+  const { country, setCountry: setCountry2 } = 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,
+    formatter,
+    full,
+    fullFormatted,
+    isComplete,
+    isEmpty,
+    shouldShowWarn,
+    country,
+    setCountry: setCountry2,
+    clear
+  };
+}
 function install(app) {
   app.component("PhoneInput", PhoneInput);
   app.directive("phone-mask", vPhoneMask);
@@ -1394,7 +1283,7 @@ const index = {
   install
 };
 const PMaskHelpers = {
-  getFlagEmoji: g,
+  getFlagEmoji: k,
   countPlaceholders,
   formatDigitsWithMap,
   pickMaskVariant,
@@ -1405,5 +1294,6 @@ exports.PMaskHelpers = PMaskHelpers;
 exports.PhoneInput = PhoneInput;
 exports.default = index;
 exports.install = install;
+exports.usePhoneMask = usePhoneMask;
 exports.vPhoneMask = vPhoneMask;
-exports.vPhoneMaskSetCountry = updateCountry;
+exports.vPhoneMaskSetCountry = setCountry;