@xsolla/xui-input-phone 0.153.2 → 0.154.0

package/web/index.mjs

@@ -1770,6 +1770,8 @@ var svgContent246 = `<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.o
 var FlagZW = (props) => /* @__PURE__ */ jsx256(FlagIcon, { ...props, svgContent: svgContent246 });
 
 // src/countries.tsx
+import { getExampleNumber } from "libphonenumber-js";
+import examples from "libphonenumber-js/examples.mobile.json";
 import { jsx as jsx257 } from "react/jsx-runtime";
 var flagMap = {
   AD: FlagAD,
@@ -2286,6 +2288,19 @@ var getCountryByDialCode = (dialCode) => {
     (country) => country.dialCode === normalizedDialCode
   );
 };
+function getPlaceholderByCode(code) {
+  if (!code) return void 0;
+  try {
+    const example = getExampleNumber(
+      code.toUpperCase(),
+      examples
+    );
+    if (!example) return void 0;
+    return "+" + example.countryCallingCode + example.formatInternational().slice(example.countryCallingCode.length + 1).replace(/\d/g, "0");
+  } catch {
+    return void 0;
+  }
+}
 var defaultCountries = [
   getCountryByCode("US"),
   getCountryByCode("GB"),
@@ -3025,7 +3040,7 @@ var InputPhone = forwardRef2(
 InputPhone.displayName = "InputPhone";
 
 // src/usePhoneNumber.ts
-import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
+import { useState as useState2, useEffect as useEffect2, useCallback, useMemo } from "react";
 import {
   AsYouType,
   formatIncompletePhoneNumber,
@@ -3189,11 +3204,16 @@ var usePhoneNumber = (options = {}) => {
       }
     }
   }, [initialValue]);
+  const placeholder = useMemo(
+    () => getPlaceholderByCode(country?.code),
+    [country?.code]
+  );
   return {
     phoneNumber,
     formattedPhoneNumber,
     country,
     countries: allCountries,
+    placeholder,
     handlePhoneChange,
     handleCountryChange,
     setPhoneNumber
@@ -3206,6 +3226,7 @@ export {
   getCountryByCode,
   getCountryByDialCode,
   getFlag,
+  getPlaceholderByCode,
   usePhoneNumber
 };
 //# sourceMappingURL=index.mjs.map