@xsolla/xui-input-phone 0.153.2 → 0.154.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-input-phone",
-  "version": "0.153.2",
+  "version": "0.154.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,8 +13,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.153.2",
-    "@xsolla/xui-primitives-core": "0.153.2",
+    "@xsolla/xui-core": "0.154.0",
+    "@xsolla/xui-primitives-core": "0.154.0",
     "libphonenumber-js": "^1.10.56"
   },
   "peerDependencies": {

package/web/index.d.mts

@@ -114,6 +114,8 @@ interface UsePhoneNumberReturn {
     country: Country | undefined;
     /** All available countries */
     countries: Country[];
+    /** Country-specific placeholder mask */
+    placeholder: string | undefined;
     /** Handle phone number input change */
     handlePhoneChange: (value: string) => void;
     /** Handle country selection change */
@@ -122,11 +124,13 @@ interface UsePhoneNumberReturn {
     setPhoneNumber: (value: string) => void;
 }
 /**
- * Hook for managing phone number input with formatting and country detection
+ * Hook for managing phone number input with formatting, country detection
+ * and a country-specific placeholder.
  *
  * @example
  * ```tsx
  * const {
+ *   placeholder,
  *   phoneNumber,
  *   formattedPhoneNumber,
  *   country,
@@ -158,9 +162,13 @@ declare const getCountryByCode: (code: string) => Country | undefined;
  * Get a country by its dial code
  */
 declare const getCountryByDialCode: (dialCode: string) => Country | undefined;
+/**
+ * Get a placeholder by country
+ */
+declare function getPlaceholderByCode(code?: string): string | undefined;
 /**
  * Default countries (commonly used)
  */
 declare const defaultCountries: Country[];
 
-export { type Country, InputPhone, type InputPhoneProps, type UsePhoneNumberOptions, type UsePhoneNumberReturn, allCountries, defaultCountries, getCountryByCode, getCountryByDialCode, getFlag, usePhoneNumber };
+export { type Country, InputPhone, type InputPhoneProps, type UsePhoneNumberOptions, type UsePhoneNumberReturn, allCountries, defaultCountries, getCountryByCode, getCountryByDialCode, getFlag, getPlaceholderByCode, usePhoneNumber };

package/web/index.d.ts

@@ -114,6 +114,8 @@ interface UsePhoneNumberReturn {
     country: Country | undefined;
     /** All available countries */
     countries: Country[];
+    /** Country-specific placeholder mask */
+    placeholder: string | undefined;
     /** Handle phone number input change */
     handlePhoneChange: (value: string) => void;
     /** Handle country selection change */
@@ -122,11 +124,13 @@ interface UsePhoneNumberReturn {
     setPhoneNumber: (value: string) => void;
 }
 /**
- * Hook for managing phone number input with formatting and country detection
+ * Hook for managing phone number input with formatting, country detection
+ * and a country-specific placeholder.
  *
  * @example
  * ```tsx
  * const {
+ *   placeholder,
  *   phoneNumber,
  *   formattedPhoneNumber,
  *   country,
@@ -158,9 +162,13 @@ declare const getCountryByCode: (code: string) => Country | undefined;
  * Get a country by its dial code
  */
 declare const getCountryByDialCode: (dialCode: string) => Country | undefined;
+/**
+ * Get a placeholder by country
+ */
+declare function getPlaceholderByCode(code?: string): string | undefined;
 /**
  * Default countries (commonly used)
  */
 declare const defaultCountries: Country[];
 
-export { type Country, InputPhone, type InputPhoneProps, type UsePhoneNumberOptions, type UsePhoneNumberReturn, allCountries, defaultCountries, getCountryByCode, getCountryByDialCode, getFlag, usePhoneNumber };
+export { type Country, InputPhone, type InputPhoneProps, type UsePhoneNumberOptions, type UsePhoneNumberReturn, allCountries, defaultCountries, getCountryByCode, getCountryByDialCode, getFlag, getPlaceholderByCode, usePhoneNumber };

package/web/index.js

@@ -36,6 +36,7 @@ __export(index_exports, {
   getCountryByCode: () => getCountryByCode,
   getCountryByDialCode: () => getCountryByDialCode,
   getFlag: () => getFlag,
+  getPlaceholderByCode: () => getPlaceholderByCode,
   usePhoneNumber: () => usePhoneNumber
 });
 module.exports = __toCommonJS(index_exports);
@@ -1804,6 +1805,8 @@ var svgContent246 = `<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.o
 var FlagZW = (props) => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(FlagIcon, { ...props, svgContent: svgContent246 });
 
 // src/countries.tsx
+var import_libphonenumber_js = require("libphonenumber-js");
+var import_examples_mobile = __toESM(require("libphonenumber-js/examples.mobile.json"));
 var import_jsx_runtime257 = require("react/jsx-runtime");
 var flagMap = {
   AD: FlagAD,
@@ -2320,6 +2323,19 @@ var getCountryByDialCode = (dialCode) => {
     (country) => country.dialCode === normalizedDialCode
   );
 };
+function getPlaceholderByCode(code) {
+  if (!code) return void 0;
+  try {
+    const example = (0, import_libphonenumber_js.getExampleNumber)(
+      code.toUpperCase(),
+      import_examples_mobile.default
+    );
+    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"),
@@ -3060,10 +3076,10 @@ InputPhone.displayName = "InputPhone";
 
 // src/usePhoneNumber.ts
 var import_react5 = require("react");
-var import_libphonenumber_js = require("libphonenumber-js");
+var import_libphonenumber_js2 = require("libphonenumber-js");
 var getNormalizedPhoneNumber = (phoneNumber) => {
   if (!phoneNumber) return "";
-  const asYouType = new import_libphonenumber_js.AsYouType();
+  const asYouType = new import_libphonenumber_js2.AsYouType();
   asYouType.input(phoneNumber);
   const parsed = asYouType.getNumber();
   if (parsed?.number) {
@@ -3081,7 +3097,7 @@ var detectCountryFromPhone = (phoneNumber, currentCountryCode) => {
   if (digitsOnly.length === 0) return currentCountryCode;
   const normalizedPhone = phoneNumber.startsWith("+") ? phoneNumber : `+${digitsOnly}`;
   try {
-    const parsed = (0, import_libphonenumber_js.parsePhoneNumber)(normalizedPhone, {
+    const parsed = (0, import_libphonenumber_js2.parsePhoneNumber)(normalizedPhone, {
       defaultCountry: currentCountryCode,
       extract: false
     });
@@ -3091,7 +3107,7 @@ var detectCountryFromPhone = (phoneNumber, currentCountryCode) => {
   } catch {
   }
   try {
-    const asYouType = new import_libphonenumber_js.AsYouType(currentCountryCode);
+    const asYouType = new import_libphonenumber_js2.AsYouType(currentCountryCode);
     asYouType.input(normalizedPhone);
     if (asYouType.country) {
       return asYouType.country;
@@ -3100,7 +3116,7 @@ var detectCountryFromPhone = (phoneNumber, currentCountryCode) => {
   }
   if (currentCountryCode) {
     try {
-      const callingCode = (0, import_libphonenumber_js.getCountryCallingCode)(
+      const callingCode = (0, import_libphonenumber_js2.getCountryCallingCode)(
         currentCountryCode
       );
       if (digitsOnly.startsWith(callingCode)) {
@@ -3133,7 +3149,7 @@ var usePhoneNumber = (options = {}) => {
   const [country, setCountry] = (0, import_react5.useState)(
     getInitialCountry
   );
-  const formattedPhoneNumber = phoneNumber ? (0, import_libphonenumber_js.formatIncompletePhoneNumber)(
+  const formattedPhoneNumber = phoneNumber ? (0, import_libphonenumber_js2.formatIncompletePhoneNumber)(
     phoneNumber,
     country?.code
   ) : "";
@@ -3218,11 +3234,16 @@ var usePhoneNumber = (options = {}) => {
       }
     }
   }, [initialValue]);
+  const placeholder = (0, import_react5.useMemo)(
+    () => getPlaceholderByCode(country?.code),
+    [country?.code]
+  );
   return {
     phoneNumber,
     formattedPhoneNumber,
     country,
     countries: allCountries,
+    placeholder,
     handlePhoneChange,
     handleCountryChange,
     setPhoneNumber
@@ -3236,6 +3257,7 @@ var usePhoneNumber = (options = {}) => {
   getCountryByCode,
   getCountryByDialCode,
   getFlag,
+  getPlaceholderByCode,
   usePhoneNumber
 });
 //# sourceMappingURL=index.js.map