@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260926063530 → 0.8.1-dev.20260930053845

package/dist/{InputControlClient-K6GXQEJD.mjs → InputControlClient-QMFSUGTK.mjs}

@@ -18,7 +18,7 @@ import {
   SelectWithSearchInput_default,
   Select_default,
   TimeInput_default
-} from "./chunk-LDS5ZLVG.mjs";
+} from "./chunk-JT7G3DNR.mjs";
 import {
   Hyperlink,
   Icon_default,

package/dist/{chunk-LDS5ZLVG.mjs → chunk-JT7G3DNR.mjs}

@@ -351,12 +351,328 @@ var PercentageInput = (props) => {
 };
 var PercentageInput_default = PercentageInput;
 
+// src/components/utilities/CountryCodes.tsx
+var COUNTRY_CODES = [
+  { name: "Afghanistan", iso2: "AF", dialCode: "+93" },
+  { name: "\xC5land Islands", iso2: "AX", dialCode: "+358" },
+  { name: "Albania", iso2: "AL", dialCode: "+355" },
+  { name: "Algeria", iso2: "DZ", dialCode: "+213" },
+  { name: "American Samoa", iso2: "AS", dialCode: "+1684" },
+  { name: "Andorra", iso2: "AD", dialCode: "+376" },
+  { name: "Angola", iso2: "AO", dialCode: "+244" },
+  { name: "Anguilla", iso2: "AI", dialCode: "+1264" },
+  { name: "Antigua and Barbuda", iso2: "AG", dialCode: "+1268" },
+  { name: "Argentina", iso2: "AR", dialCode: "+54" },
+  { name: "Armenia", iso2: "AM", dialCode: "+374" },
+  { name: "Aruba", iso2: "AW", dialCode: "+297" },
+  { name: "Australia", iso2: "AU", dialCode: "+61" },
+  { name: "Austria", iso2: "AT", dialCode: "+43" },
+  { name: "Azerbaijan", iso2: "AZ", dialCode: "+994" },
+  { name: "Bahamas", iso2: "BS", dialCode: "+1242" },
+  { name: "Bahrain", iso2: "BH", dialCode: "+973" },
+  { name: "Bangladesh", iso2: "BD", dialCode: "+880" },
+  { name: "Barbados", iso2: "BB", dialCode: "+1246" },
+  { name: "Belarus", iso2: "BY", dialCode: "+375" },
+  { name: "Belgium", iso2: "BE", dialCode: "+32" },
+  { name: "Belize", iso2: "BZ", dialCode: "+501" },
+  { name: "Benin", iso2: "BJ", dialCode: "+229" },
+  { name: "Bermuda", iso2: "BM", dialCode: "+1441" },
+  { name: "Bhutan", iso2: "BT", dialCode: "+975" },
+  { name: "Bolivia", iso2: "BO", dialCode: "+591" },
+  { name: "Bosnia and Herzegovina", iso2: "BA", dialCode: "+387" },
+  { name: "Botswana", iso2: "BW", dialCode: "+267" },
+  { name: "Brazil", iso2: "BR", dialCode: "+55" },
+  { name: "British Indian Ocean Territory", iso2: "IO", dialCode: "+246" },
+  { name: "British Virgin Islands", iso2: "VG", dialCode: "+1284" },
+  { name: "Brunei", iso2: "BN", dialCode: "+673" },
+  { name: "Bulgaria", iso2: "BG", dialCode: "+359" },
+  { name: "Burkina Faso", iso2: "BF", dialCode: "+226" },
+  { name: "Burundi", iso2: "BI", dialCode: "+257" },
+  { name: "Cambodia", iso2: "KH", dialCode: "+855" },
+  { name: "Cameroon", iso2: "CM", dialCode: "+237" },
+  { name: "Canada", iso2: "CA", dialCode: "+1" },
+  { name: "Cape Verde", iso2: "CV", dialCode: "+238" },
+  { name: "Caribbean Netherlands", iso2: "BQ", dialCode: "+599" },
+  { name: "Cayman Islands", iso2: "KY", dialCode: "+1345" },
+  { name: "Central African Republic", iso2: "CF", dialCode: "+236" },
+  { name: "Chad", iso2: "TD", dialCode: "+235" },
+  { name: "Chile", iso2: "CL", dialCode: "+56" },
+  { name: "China", iso2: "CN", dialCode: "+86" },
+  { name: "Christmas Island", iso2: "CX", dialCode: "+61" },
+  { name: "Cocos (Keeling) Islands", iso2: "CC", dialCode: "+61" },
+  { name: "Colombia", iso2: "CO", dialCode: "+57" },
+  { name: "Comoros", iso2: "KM", dialCode: "+269" },
+  { name: "Congo", iso2: "CG", dialCode: "+242" },
+  { name: "Congo (DRC)", iso2: "CD", dialCode: "+243" },
+  { name: "Cook Islands", iso2: "CK", dialCode: "+682" },
+  { name: "Costa Rica", iso2: "CR", dialCode: "+506" },
+  { name: "C\xF4te d'Ivoire", iso2: "CI", dialCode: "+225" },
+  { name: "Croatia", iso2: "HR", dialCode: "+385" },
+  { name: "Cuba", iso2: "CU", dialCode: "+53" },
+  { name: "Cura\xE7ao", iso2: "CW", dialCode: "+599" },
+  { name: "Cyprus", iso2: "CY", dialCode: "+357" },
+  { name: "Czech Republic", iso2: "CZ", dialCode: "+420" },
+  { name: "Denmark", iso2: "DK", dialCode: "+45" },
+  { name: "Djibouti", iso2: "DJ", dialCode: "+253" },
+  { name: "Dominica", iso2: "DM", dialCode: "+1767" },
+  { name: "Dominican Republic", iso2: "DO", dialCode: "+1" },
+  { name: "Ecuador", iso2: "EC", dialCode: "+593" },
+  { name: "Egypt", iso2: "EG", dialCode: "+20" },
+  { name: "El Salvador", iso2: "SV", dialCode: "+503" },
+  { name: "Equatorial Guinea", iso2: "GQ", dialCode: "+240" },
+  { name: "Eritrea", iso2: "ER", dialCode: "+291" },
+  { name: "Estonia", iso2: "EE", dialCode: "+372" },
+  { name: "Eswatini", iso2: "SZ", dialCode: "+268" },
+  { name: "Ethiopia", iso2: "ET", dialCode: "+251" },
+  { name: "Falkland Islands", iso2: "FK", dialCode: "+500" },
+  { name: "Faroe Islands", iso2: "FO", dialCode: "+298" },
+  { name: "Fiji", iso2: "FJ", dialCode: "+679" },
+  { name: "Finland", iso2: "FI", dialCode: "+358" },
+  { name: "France", iso2: "FR", dialCode: "+33" },
+  { name: "French Guiana", iso2: "GF", dialCode: "+594" },
+  { name: "French Polynesia", iso2: "PF", dialCode: "+689" },
+  { name: "Gabon", iso2: "GA", dialCode: "+241" },
+  { name: "Gambia", iso2: "GM", dialCode: "+220" },
+  { name: "Georgia", iso2: "GE", dialCode: "+995" },
+  { name: "Germany", iso2: "DE", dialCode: "+49" },
+  { name: "Ghana", iso2: "GH", dialCode: "+233" },
+  { name: "Gibraltar", iso2: "GI", dialCode: "+350" },
+  { name: "Greece", iso2: "GR", dialCode: "+30" },
+  { name: "Greenland", iso2: "GL", dialCode: "+299" },
+  { name: "Grenada", iso2: "GD", dialCode: "+1473" },
+  { name: "Guadeloupe", iso2: "GP", dialCode: "+590" },
+  { name: "Guam", iso2: "GU", dialCode: "+1671" },
+  { name: "Guatemala", iso2: "GT", dialCode: "+502" },
+  { name: "Guernsey", iso2: "GG", dialCode: "+44" },
+  { name: "Guinea", iso2: "GN", dialCode: "+224" },
+  { name: "Guinea-Bissau", iso2: "GW", dialCode: "+245" },
+  { name: "Guyana", iso2: "GY", dialCode: "+592" },
+  { name: "Haiti", iso2: "HT", dialCode: "+509" },
+  { name: "Honduras", iso2: "HN", dialCode: "+504" },
+  { name: "Hong Kong", iso2: "HK", dialCode: "+852" },
+  { name: "Hungary", iso2: "HU", dialCode: "+36" },
+  { name: "Iceland", iso2: "IS", dialCode: "+354" },
+  { name: "India", iso2: "IN", dialCode: "+91" },
+  { name: "Indonesia", iso2: "ID", dialCode: "+62" },
+  { name: "Iran", iso2: "IR", dialCode: "+98" },
+  { name: "Iraq", iso2: "IQ", dialCode: "+964" },
+  { name: "Ireland", iso2: "IE", dialCode: "+353" },
+  { name: "Isle of Man", iso2: "IM", dialCode: "+44" },
+  { name: "Israel", iso2: "IL", dialCode: "+972" },
+  { name: "Italy", iso2: "IT", dialCode: "+39" },
+  { name: "Jamaica", iso2: "JM", dialCode: "+1876" },
+  { name: "Japan", iso2: "JP", dialCode: "+81" },
+  { name: "Jersey", iso2: "JE", dialCode: "+44" },
+  { name: "Jordan", iso2: "JO", dialCode: "+962" },
+  { name: "Kazakhstan", iso2: "KZ", dialCode: "+7" },
+  { name: "Kenya", iso2: "KE", dialCode: "+254" },
+  { name: "Kiribati", iso2: "KI", dialCode: "+686" },
+  { name: "Kosovo", iso2: "XK", dialCode: "+383" },
+  { name: "Kuwait", iso2: "KW", dialCode: "+965" },
+  { name: "Kyrgyzstan", iso2: "KG", dialCode: "+996" },
+  { name: "Laos", iso2: "LA", dialCode: "+856" },
+  { name: "Latvia", iso2: "LV", dialCode: "+371" },
+  { name: "Lebanon", iso2: "LB", dialCode: "+961" },
+  { name: "Lesotho", iso2: "LS", dialCode: "+266" },
+  { name: "Liberia", iso2: "LR", dialCode: "+231" },
+  { name: "Libya", iso2: "LY", dialCode: "+218" },
+  { name: "Liechtenstein", iso2: "LI", dialCode: "+423" },
+  { name: "Lithuania", iso2: "LT", dialCode: "+370" },
+  { name: "Luxembourg", iso2: "LU", dialCode: "+352" },
+  { name: "Macau", iso2: "MO", dialCode: "+853" },
+  { name: "Madagascar", iso2: "MG", dialCode: "+261" },
+  { name: "Malawi", iso2: "MW", dialCode: "+265" },
+  { name: "Malaysia", iso2: "MY", dialCode: "+60" },
+  { name: "Maldives", iso2: "MV", dialCode: "+960" },
+  { name: "Mali", iso2: "ML", dialCode: "+223" },
+  { name: "Malta", iso2: "MT", dialCode: "+356" },
+  { name: "Marshall Islands", iso2: "MH", dialCode: "+692" },
+  { name: "Martinique", iso2: "MQ", dialCode: "+596" },
+  { name: "Mauritania", iso2: "MR", dialCode: "+222" },
+  { name: "Mauritius", iso2: "MU", dialCode: "+230" },
+  { name: "Mayotte", iso2: "YT", dialCode: "+262" },
+  { name: "Mexico", iso2: "MX", dialCode: "+52" },
+  { name: "Micronesia", iso2: "FM", dialCode: "+691" },
+  { name: "Moldova", iso2: "MD", dialCode: "+373" },
+  { name: "Monaco", iso2: "MC", dialCode: "+377" },
+  { name: "Mongolia", iso2: "MN", dialCode: "+976" },
+  { name: "Montenegro", iso2: "ME", dialCode: "+382" },
+  { name: "Montserrat", iso2: "MS", dialCode: "+1664" },
+  { name: "Morocco", iso2: "MA", dialCode: "+212" },
+  { name: "Mozambique", iso2: "MZ", dialCode: "+258" },
+  { name: "Myanmar", iso2: "MM", dialCode: "+95" },
+  { name: "Namibia", iso2: "NA", dialCode: "+264" },
+  { name: "Nauru", iso2: "NR", dialCode: "+674" },
+  { name: "Nepal", iso2: "NP", dialCode: "+977" },
+  { name: "Netherlands", iso2: "NL", dialCode: "+31" },
+  { name: "New Caledonia", iso2: "NC", dialCode: "+687" },
+  { name: "New Zealand", iso2: "NZ", dialCode: "+64" },
+  { name: "Nicaragua", iso2: "NI", dialCode: "+505" },
+  { name: "Niger", iso2: "NE", dialCode: "+227" },
+  { name: "Nigeria", iso2: "NG", dialCode: "+234" },
+  { name: "Niue", iso2: "NU", dialCode: "+683" },
+  { name: "Norfolk Island", iso2: "NF", dialCode: "+672" },
+  { name: "North Korea", iso2: "KP", dialCode: "+850" },
+  { name: "North Macedonia", iso2: "MK", dialCode: "+389" },
+  { name: "Northern Mariana Islands", iso2: "MP", dialCode: "+1670" },
+  { name: "Norway", iso2: "NO", dialCode: "+47" },
+  { name: "Oman", iso2: "OM", dialCode: "+968" },
+  { name: "Pakistan", iso2: "PK", dialCode: "+92" },
+  { name: "Palau", iso2: "PW", dialCode: "+680" },
+  { name: "Palestine", iso2: "PS", dialCode: "+970" },
+  { name: "Panama", iso2: "PA", dialCode: "+507" },
+  { name: "Papua New Guinea", iso2: "PG", dialCode: "+675" },
+  { name: "Paraguay", iso2: "PY", dialCode: "+595" },
+  { name: "Peru", iso2: "PE", dialCode: "+51" },
+  { name: "Philippines", iso2: "PH", dialCode: "+63" },
+  { name: "Poland", iso2: "PL", dialCode: "+48" },
+  { name: "Portugal", iso2: "PT", dialCode: "+351" },
+  { name: "Puerto Rico", iso2: "PR", dialCode: "+1" },
+  { name: "Qatar", iso2: "QA", dialCode: "+974" },
+  { name: "R\xE9union", iso2: "RE", dialCode: "+262" },
+  { name: "Romania", iso2: "RO", dialCode: "+40" },
+  { name: "Russia", iso2: "RU", dialCode: "+7" },
+  { name: "Rwanda", iso2: "RW", dialCode: "+250" },
+  { name: "Saint Barth\xE9lemy", iso2: "BL", dialCode: "+590" },
+  { name: "Saint Helena", iso2: "SH", dialCode: "+290" },
+  { name: "Saint Kitts and Nevis", iso2: "KN", dialCode: "+1869" },
+  { name: "Saint Lucia", iso2: "LC", dialCode: "+1758" },
+  { name: "Saint Martin", iso2: "MF", dialCode: "+590" },
+  { name: "Saint Pierre and Miquelon", iso2: "PM", dialCode: "+508" },
+  { name: "Saint Vincent and the Grenadines", iso2: "VC", dialCode: "+1784" },
+  { name: "Samoa", iso2: "WS", dialCode: "+685" },
+  { name: "San Marino", iso2: "SM", dialCode: "+378" },
+  { name: "S\xE3o Tom\xE9 and Pr\xEDncipe", iso2: "ST", dialCode: "+239" },
+  { name: "Saudi Arabia", iso2: "SA", dialCode: "+966" },
+  { name: "Senegal", iso2: "SN", dialCode: "+221" },
+  { name: "Serbia", iso2: "RS", dialCode: "+381" },
+  { name: "Seychelles", iso2: "SC", dialCode: "+248" },
+  { name: "Sierra Leone", iso2: "SL", dialCode: "+232" },
+  { name: "Singapore", iso2: "SG", dialCode: "+65" },
+  { name: "Sint Maarten", iso2: "SX", dialCode: "+1721" },
+  { name: "Slovakia", iso2: "SK", dialCode: "+421" },
+  { name: "Slovenia", iso2: "SI", dialCode: "+386" },
+  { name: "Solomon Islands", iso2: "SB", dialCode: "+677" },
+  { name: "Somalia", iso2: "SO", dialCode: "+252" },
+  { name: "South Africa", iso2: "ZA", dialCode: "+27" },
+  { name: "South Korea", iso2: "KR", dialCode: "+82" },
+  { name: "South Sudan", iso2: "SS", dialCode: "+211" },
+  { name: "Spain", iso2: "ES", dialCode: "+34" },
+  { name: "Sri Lanka", iso2: "LK", dialCode: "+94" },
+  { name: "Sudan", iso2: "SD", dialCode: "+249" },
+  { name: "Suriname", iso2: "SR", dialCode: "+597" },
+  { name: "Svalbard and Jan Mayen", iso2: "SJ", dialCode: "+47" },
+  { name: "Sweden", iso2: "SE", dialCode: "+46" },
+  { name: "Switzerland", iso2: "CH", dialCode: "+41" },
+  { name: "Syria", iso2: "SY", dialCode: "+963" },
+  { name: "Taiwan", iso2: "TW", dialCode: "+886" },
+  { name: "Tajikistan", iso2: "TJ", dialCode: "+992" },
+  { name: "Tanzania", iso2: "TZ", dialCode: "+255" },
+  { name: "Thailand", iso2: "TH", dialCode: "+66" },
+  { name: "Timor-Leste", iso2: "TL", dialCode: "+670" },
+  { name: "Togo", iso2: "TG", dialCode: "+228" },
+  { name: "Tokelau", iso2: "TK", dialCode: "+690" },
+  { name: "Tonga", iso2: "TO", dialCode: "+676" },
+  { name: "Trinidad and Tobago", iso2: "TT", dialCode: "+1868" },
+  { name: "Tunisia", iso2: "TN", dialCode: "+216" },
+  { name: "Turkey", iso2: "TR", dialCode: "+90" },
+  { name: "Turkmenistan", iso2: "TM", dialCode: "+993" },
+  { name: "Turks and Caicos Islands", iso2: "TC", dialCode: "+1649" },
+  { name: "Tuvalu", iso2: "TV", dialCode: "+688" },
+  { name: "Uganda", iso2: "UG", dialCode: "+256" },
+  { name: "Ukraine", iso2: "UA", dialCode: "+380" },
+  { name: "United Arab Emirates", iso2: "AE", dialCode: "+971" },
+  { name: "United Kingdom", iso2: "GB", dialCode: "+44" },
+  { name: "United States", iso2: "US", dialCode: "+1" },
+  { name: "U.S. Virgin Islands", iso2: "VI", dialCode: "+1340" },
+  { name: "Uruguay", iso2: "UY", dialCode: "+598" },
+  { name: "Uzbekistan", iso2: "UZ", dialCode: "+998" },
+  { name: "Vanuatu", iso2: "VU", dialCode: "+678" },
+  { name: "Vatican City", iso2: "VA", dialCode: "+39" },
+  { name: "Venezuela", iso2: "VE", dialCode: "+58" },
+  { name: "Vietnam", iso2: "VN", dialCode: "+84" },
+  { name: "Wallis and Futuna", iso2: "WF", dialCode: "+681" },
+  { name: "Western Sahara", iso2: "EH", dialCode: "+212" },
+  { name: "Yemen", iso2: "YE", dialCode: "+967" },
+  { name: "Zambia", iso2: "ZM", dialCode: "+260" },
+  { name: "Zimbabwe", iso2: "ZW", dialCode: "+263" }
+];
+var PRIMARY_COUNTRY_BY_DIAL_CODE = {
+  "+1": "US",
+  "+7": "RU",
+  "+39": "IT",
+  "+44": "GB",
+  "+47": "NO",
+  "+61": "AU",
+  "+212": "MA",
+  "+262": "RE",
+  "+358": "FI",
+  "+590": "GP",
+  "+599": "CW"
+};
+var findCountryByDialCode = (dialCode) => {
+  const primaryIso2 = PRIMARY_COUNTRY_BY_DIAL_CODE[dialCode];
+  return primaryIso2 && COUNTRY_CODES.find((c) => c.iso2 === primaryIso2) || COUNTRY_CODES.find((c) => c.dialCode === dialCode);
+};
+var findCountryByIso2 = (iso2) => {
+  if (!iso2) return void 0;
+  const normalized = iso2.trim().toUpperCase();
+  return COUNTRY_CODES.find((c) => c.iso2 === normalized);
+};
+var getDialCodeByCountryCode = (iso2) => findCountryByIso2(iso2)?.dialCode;
+var resolveCountry = (codeOrDialCode) => {
+  const value = codeOrDialCode?.trim();
+  if (!value) return void 0;
+  return value.startsWith("+") ? findCountryByDialCode(value) : findCountryByIso2(value);
+};
+var getCountryFlag = (iso2) => iso2.toUpperCase().replace(/./g, (char) => String.fromCodePoint(127397 + char.charCodeAt(0)));
+var splitPhoneNumber = (value) => {
+  const trimmed = (value ?? "").trim();
+  if (!trimmed.startsWith("+")) {
+    return { number: trimmed };
+  }
+  const [head, ...rest] = trimmed.split(/\s+/);
+  const digits = trimmed.replace(/[^\d+]/g, "");
+  const prefixMatch = [...COUNTRY_CODES].sort((a, b) => b.dialCode.length - a.dialCode.length).find((c) => digits.startsWith(c.dialCode));
+  const country = (rest.length > 0 ? findCountryByDialCode(head) : void 0) ?? (prefixMatch ? findCountryByDialCode(prefixMatch.dialCode) : void 0);
+  if (!country) {
+    return { number: trimmed };
+  }
+  const number = rest.length > 0 && head === country.dialCode ? rest.join(" ") : digits.slice(country.dialCode.length);
+  return { country, number };
+};
+
 // src/components/controls/edit/PhoneInput.tsx
-import React6 from "react";
+import React6, { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_DIAL_CODE = "+91";
 var PhoneInput = (props) => {
-  const textChangeHandler = (event) => {
-    const text = event.target.value;
+  const hasFixedPrefix = props.prefix !== void 0 && props.prefix !== null;
+  let value = "";
+  if (props.value !== void 0 && props.value !== null) {
+    value = props.value;
+  }
+  const parsed = useMemo(
+    () => hasFixedPrefix ? { number: value } : splitPhoneNumber(String(value)),
+    [hasFixedPrefix, value]
+  );
+  const defaultCountry = resolveCountry(props?.attributes?.defaultCountryCode) ?? findCountryByDialCode(DEFAULT_DIAL_CODE);
+  const hasUserPickedCountry = useRef(false);
+  const [selectedIso2, setSelectedIso2] = useState2(
+    parsed.country?.iso2 ?? defaultCountry.iso2
+  );
+  const selectedCountry = COUNTRY_CODES.find((c) => c.iso2 === selectedIso2) ?? defaultCountry;
+  useEffect2(() => {
+    if (parsed.country && parsed.country.dialCode !== selectedCountry.dialCode) {
+      setSelectedIso2(parsed.country.iso2);
+    }
+  }, [parsed.country, selectedCountry.dialCode]);
+  useEffect2(() => {
+    if (!parsed.country && !parsed.number && !hasUserPickedCountry.current) {
+      setSelectedIso2(defaultCountry.iso2);
+    }
+  }, [defaultCountry.iso2, parsed.country, parsed.number]);
+  const emit = (text) => {
     if (props.callback !== void 0) {
       props.callback(
         {
@@ -368,31 +684,69 @@ var PhoneInput = (props) => {
       );
     }
   };
-  let value = "";
-  if (props.value !== void 0 && props.value !== null) {
-    value = props.value;
-  }
+  const combine = (dialCode, number) => number ? `${dialCode} ${number}` : "";
+  const textChangeHandler = (event) => {
+    const text = event.target.value;
+    if (hasFixedPrefix) {
+      emit(text);
+      return;
+    }
+    emit(combine(selectedCountry.dialCode, text.replace(/\D/g, "")));
+  };
+  const countryChangeHandler = (event) => {
+    const country = COUNTRY_CODES.find((c) => c.iso2 === event.target.value);
+    if (!country) return;
+    hasUserPickedCountry.current = true;
+    setSelectedIso2(country.iso2);
+    if (parsed.number) {
+      emit(combine(country.dialCode, parsed.number));
+    }
+  };
+  const isReadOnly = props?.attributes?.readOnly;
   return /* @__PURE__ */ jsx6(React6.Fragment, { children: /* @__PURE__ */ jsxs6("label", { className: "block mb-1", children: [
     /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
     " ",
     props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx6("span", { className: "bg-error-weak", children: "*" }),
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center rounded border ", children: [
-      /* @__PURE__ */ jsx6("span", { className: "px-3", children: props.prefix }),
+      hasFixedPrefix ? /* @__PURE__ */ jsx6("span", { className: "px-3", children: props.prefix }) : /* @__PURE__ */ jsxs6("span", { className: "relative flex items-center gap-1 self-stretch px-3 border-r whitespace-nowrap", children: [
+        /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: getCountryFlag(selectedCountry.iso2) }),
+        /* @__PURE__ */ jsx6("span", { children: selectedCountry.dialCode }),
+        /* @__PURE__ */ jsx6("svg", { "aria-hidden": "true", className: "w-3 h-3 opacity-60", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx6("path", { fillRule: "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z", clipRule: "evenodd" }) }),
+        /* @__PURE__ */ jsx6(
+          "select",
+          {
+            "aria-label": "Country code",
+            value: selectedCountry.iso2,
+            onChange: countryChangeHandler,
+            disabled: isReadOnly,
+            className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed",
+            children: COUNTRY_CODES.map((country) => /* @__PURE__ */ jsxs6("option", { value: country.iso2, children: [
+              getCountryFlag(country.iso2),
+              " ",
+              country.name,
+              " (",
+              country.dialCode,
+              ")"
+            ] }, country.iso2))
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx6(
         "input",
         {
-          type: "text",
+          type: hasFixedPrefix ? "text" : "tel",
+          inputMode: hasFixedPrefix ? void 0 : "numeric",
           name: props.name,
           id: props.name,
-          value,
+          value: parsed.number,
           onChange: textChangeHandler,
           required: props?.attributes?.required,
           placeholder: props?.attributes?.placeholder,
           maxLength: props?.attributes?.maxLength,
           pattern: props?.attributes?.pattern,
-          disabled: props?.attributes?.readOnly,
+          disabled: isReadOnly,
           minLength: props?.attributes?.minLength,
-          className: "py-1.5 block w-full outline-none border-0 mr-0.5"
+          className: `py-1.5 block w-full outline-none border-0 mr-0.5 ${hasFixedPrefix ? "" : "pl-3"}`
         }
       )
     ] }),
@@ -641,7 +995,7 @@ var DateTimeInput = (props) => {
 var DateTimeInput_default = DateTimeInput;
 
 // src/components/controls/edit/ColorInput.tsx
-import React11, { useEffect as useEffect2 } from "react";
+import React11, { useEffect as useEffect3 } from "react";
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_COLOR = "#3b82f6";
 var isValidHex = (val) => typeof val === "string" && /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(val.trim());
@@ -656,7 +1010,7 @@ var ColorInput = (props) => {
   const [color, setColor] = React11.useState(
     () => normalizeColor(props.value)
   );
-  useEffect2(() => {
+  useEffect3(() => {
     const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
     if (!hasValue && props.callback && !isReadOnly) {
       props.callback({
@@ -667,7 +1021,7 @@ var ColorInput = (props) => {
       });
     }
   }, [isReadOnly]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (props.value !== void 0 && props.value !== null && props.value !== "") {
       if (typeof props.value === "string") {
         setColor(normalizeColor(props.value));
@@ -735,16 +1089,16 @@ var ColorInput = (props) => {
 var ColorInput_default = ColorInput;
 
 // src/components/controls/edit/SelectWithSearchInput.tsx
-import React12, { useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import React12, { useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var SelectWithSearchInput = (props) => {
-  const [isOpen, setIsOpen] = useState2(false);
-  const [searchTerm, setSearchTerm] = useState2("");
-  const [highlightedIndex, setHighlightedIndex] = useState2(-1);
-  const [selectedItem, setSelectedItem] = useState2(
+  const [isOpen, setIsOpen] = useState3(false);
+  const [searchTerm, setSearchTerm] = useState3("");
+  const [highlightedIndex, setHighlightedIndex] = useState3(-1);
+  const [selectedItem, setSelectedItem] = useState3(
     null
   );
-  const [list, setList] = useState2([]);
+  const [list, setList] = useState3([]);
   const loadData = React12.useCallback(async () => {
     if (props.dataset) {
       setList(props.dataset);
@@ -770,10 +1124,10 @@ var SelectWithSearchInput = (props) => {
     props.dataSourceDependsOn,
     props.dependentValue
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     loadData();
   }, [loadData]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (props.value && list.length && props.dataKeyFieldName && props.dataTextFieldName) {
       const selected = list.find(
         (x) => String(x[props.dataKeyFieldName]) === String(props.value)
@@ -820,8 +1174,8 @@ var SelectWithSearchInput = (props) => {
       handleSelect(e, filteredItems[highlightedIndex]);
     }
   };
-  const dropdownRef = useRef(null);
-  useEffect3(() => {
+  const dropdownRef = useRef2(null);
+  useEffect4(() => {
     if (highlightedIndex >= 0 && dropdownRef.current) {
       const highlightedItem = dropdownRef.current.children[highlightedIndex];
       highlightedItem?.scrollIntoView({
@@ -1026,7 +1380,7 @@ var TimeInput = (props) => {
 var TimeInput_default = TimeInput;
 
 // src/components/controls/edit/DateInput.tsx
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/components/utilities/DateTimeUtility.tsx
 var DateTimeUtility = class {
@@ -1107,7 +1461,7 @@ var DateTimeUtility_default = DateTimeUtility;
 // src/components/controls/edit/DateInput.tsx
 import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 var DateInput = (props) => {
-  const value = useMemo(() => {
+  const value = useMemo2(() => {
     if (props.value === void 0 || props.value === null || props.value === "") {
       return "";
     }
@@ -1163,11 +1517,11 @@ var DateInput = (props) => {
 var DateInput_default = DateInput;
 
 // src/components/controls/edit/RadioInput.tsx
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect5, useState as useState4 } from "react";
 import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var RadioInput = (props) => {
-  const [list, setList] = useState3([]);
-  useEffect4(() => {
+  const [list, setList] = useState4([]);
+  useEffect5(() => {
     async function loadData() {
       if (props.dataset) {
         setList(props.dataset);
@@ -1257,6 +1611,13 @@ export {
   MoneyInput_default,
   Select_default,
   PercentageInput_default,
+  COUNTRY_CODES,
+  findCountryByDialCode,
+  findCountryByIso2,
+  getDialCodeByCountryCode,
+  resolveCountry,
+  getCountryFlag,
+  splitPhoneNumber,
   PhoneInput_default,
   NumberInput_default,
   CheckboxInput_default,

package/dist/index.d.mts

@@ -174,6 +174,7 @@ interface InputControlProps {
         helpText?: string;
         autoFocus?: boolean;
         heading?: string;
+        defaultCountryCode?: string;
     };
 }
 
@@ -260,6 +261,35 @@ declare const PercentageInput: React__default.FC<InputControlProps>;
 
 declare const PhoneInput: React__default.FC<InputControlProps>;
 
+interface CountryCode {
+    name: string;
+    iso2: string;
+    dialCode: string;
+}
+declare const COUNTRY_CODES: CountryCode[];
+/** Returns the country for a dial code, preferring the primary country for shared codes. */
+declare const findCountryByDialCode: (dialCode: string) => CountryCode | undefined;
+/** Returns the country for an ISO 3166-1 alpha-2 code such as "IN" (as returned by the Geo API). */
+declare const findCountryByIso2: (iso2?: string | null) => CountryCode | undefined;
+/** Maps an ISO alpha-2 country code to its dial code: "IN" → "+91". */
+declare const getDialCodeByCountryCode: (iso2?: string | null) => string | undefined;
+/**
+ * Resolves either a dial code ("+91") or an ISO alpha-2 country code ("IN") to a country,
+ * so callers can pass the Geo API's countryCode straight through.
+ */
+declare const resolveCountry: (codeOrDialCode?: string | null) => CountryCode | undefined;
+/** Converts an ISO 3166-1 alpha-2 code into its flag emoji. */
+declare const getCountryFlag: (iso2: string) => string;
+/**
+ * Splits a stored phone value like "+91 9534822376" into its country and number.
+ * Picks the longest matching dial code, so "+1684..." resolves to American Samoa, not "+1".
+ * Values without a leading "+" are treated as a bare number.
+ */
+declare const splitPhoneNumber: (value: string) => {
+    country?: CountryCode;
+    number: string;
+};
+
 declare const NumberInput: React__default.FC<InputControlProps>;
 
 declare const CheckboxInput: React__default.FC<InputControlProps>;
@@ -479,4 +509,4 @@ interface DataFormRendererProps {
 }
 declare const DataFormRenderer: ({ formDefinition, dataItem, params, tabs, apiBaseUrl, session, widgetProps, onSave, onDelete, onCancelAdd, isAddPage, entityId, }: DataFormRendererProps) => React.JSX.Element | null;
 
-export { type ActionResponse$1 as ActionResponse, Button, CheckboxInput, ColorInput, DataFormRenderer, DataList, DataListRenderer, DateInput, DateTimeInput, EmailInput, EnterAnimationHydrator, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, RadioInput, Select, StyleTypes, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };
+export { type ActionResponse$1 as ActionResponse, Button, COUNTRY_CODES, CheckboxInput, ColorInput, type CountryCode, DataFormRenderer, DataList, DataListRenderer, DateInput, DateTimeInput, EmailInput, EnterAnimationHydrator, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, RadioInput, Select, StyleTypes, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes, findCountryByDialCode, findCountryByIso2, getCountryFlag, getDialCodeByCountryCode, resolveCountry, splitPhoneNumber };

package/dist/index.d.ts

@@ -174,6 +174,7 @@ interface InputControlProps {
         helpText?: string;
         autoFocus?: boolean;
         heading?: string;
+        defaultCountryCode?: string;
     };
 }
 
@@ -260,6 +261,35 @@ declare const PercentageInput: React__default.FC<InputControlProps>;
 
 declare const PhoneInput: React__default.FC<InputControlProps>;
 
+interface CountryCode {
+    name: string;
+    iso2: string;
+    dialCode: string;
+}
+declare const COUNTRY_CODES: CountryCode[];
+/** Returns the country for a dial code, preferring the primary country for shared codes. */
+declare const findCountryByDialCode: (dialCode: string) => CountryCode | undefined;
+/** Returns the country for an ISO 3166-1 alpha-2 code such as "IN" (as returned by the Geo API). */
+declare const findCountryByIso2: (iso2?: string | null) => CountryCode | undefined;
+/** Maps an ISO alpha-2 country code to its dial code: "IN" → "+91". */
+declare const getDialCodeByCountryCode: (iso2?: string | null) => string | undefined;
+/**
+ * Resolves either a dial code ("+91") or an ISO alpha-2 country code ("IN") to a country,
+ * so callers can pass the Geo API's countryCode straight through.
+ */
+declare const resolveCountry: (codeOrDialCode?: string | null) => CountryCode | undefined;
+/** Converts an ISO 3166-1 alpha-2 code into its flag emoji. */
+declare const getCountryFlag: (iso2: string) => string;
+/**
+ * Splits a stored phone value like "+91 9534822376" into its country and number.
+ * Picks the longest matching dial code, so "+1684..." resolves to American Samoa, not "+1".
+ * Values without a leading "+" are treated as a bare number.
+ */
+declare const splitPhoneNumber: (value: string) => {
+    country?: CountryCode;
+    number: string;
+};
+
 declare const NumberInput: React__default.FC<InputControlProps>;
 
 declare const CheckboxInput: React__default.FC<InputControlProps>;
@@ -479,4 +509,4 @@ interface DataFormRendererProps {
 }
 declare const DataFormRenderer: ({ formDefinition, dataItem, params, tabs, apiBaseUrl, session, widgetProps, onSave, onDelete, onCancelAdd, isAddPage, entityId, }: DataFormRendererProps) => React.JSX.Element | null;
 
-export { type ActionResponse$1 as ActionResponse, Button, CheckboxInput, ColorInput, DataFormRenderer, DataList, DataListRenderer, DateInput, DateTimeInput, EmailInput, EnterAnimationHydrator, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, RadioInput, Select, StyleTypes, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };
+export { type ActionResponse$1 as ActionResponse, Button, COUNTRY_CODES, CheckboxInput, ColorInput, type CountryCode, DataFormRenderer, DataList, DataListRenderer, DateInput, DateTimeInput, EmailInput, EnterAnimationHydrator, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, RadioInput, Select, StyleTypes, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes, findCountryByDialCode, findCountryByIso2, getCountryFlag, getDialCodeByCountryCode, resolveCountry, splitPhoneNumber };