@rxdrag/website-lib-core 0.0.63 → 0.0.65

package/src/react/components/ContactForm/countryDialCodes.ts

@@ -0,0 +1,243 @@
+export type CountryDial = {
+  code: string; // ISO 3166-1 alpha-2
+  name: string; // English name
+  region?: string; // Continent/region label
+  dialCode: string; // +NN
+};
+
+// Note: Names follow common English naming used in international forms.
+// Region is a coarse grouping for search hints.
+export const countries: CountryDial[] = [
+  { code: "AF", name: "Afghanistan", region: "Asia", dialCode: "+93" },
+  { code: "AL", name: "Albania", region: "Europe", dialCode: "+355" },
+  { code: "DZ", name: "Algeria", region: "Africa", dialCode: "+213" },
+  { code: "AS", name: "American Samoa", region: "Oceania", dialCode: "+1" },
+  { code: "AD", name: "Andorra", region: "Europe", dialCode: "+376" },
+  { code: "AO", name: "Angola", region: "Africa", dialCode: "+244" },
+  { code: "AI", name: "Anguilla", region: "North America", dialCode: "+1" },
+  { code: "AG", name: "Antigua and Barbuda", region: "North America", dialCode: "+1" },
+  { code: "AR", name: "Argentina", region: "South America", dialCode: "+54" },
+  { code: "AM", name: "Armenia", region: "Asia", dialCode: "+374" },
+  { code: "AW", name: "Aruba", region: "North America", dialCode: "+297" },
+  { code: "AU", name: "Australia", region: "Oceania", dialCode: "+61" },
+  { code: "AT", name: "Austria", region: "Europe", dialCode: "+43" },
+  { code: "AZ", name: "Azerbaijan", region: "Asia", dialCode: "+994" },
+  { code: "BS", name: "Bahamas", region: "North America", dialCode: "+1" },
+  { code: "BH", name: "Bahrain", region: "Asia", dialCode: "+973" },
+  { code: "BD", name: "Bangladesh", region: "Asia", dialCode: "+880" },
+  { code: "BB", name: "Barbados", region: "North America", dialCode: "+1" },
+  { code: "BY", name: "Belarus", region: "Europe", dialCode: "+375" },
+  { code: "BE", name: "Belgium", region: "Europe", dialCode: "+32" },
+  { code: "BZ", name: "Belize", region: "North America", dialCode: "+501" },
+  { code: "BJ", name: "Benin", region: "Africa", dialCode: "+229" },
+  { code: "BM", name: "Bermuda", region: "North America", dialCode: "+1" },
+  { code: "BT", name: "Bhutan", region: "Asia", dialCode: "+975" },
+  { code: "BO", name: "Bolivia", region: "South America", dialCode: "+591" },
+  { code: "BA", name: "Bosnia and Herzegovina", region: "Europe", dialCode: "+387" },
+  { code: "BW", name: "Botswana", region: "Africa", dialCode: "+267" },
+  { code: "BR", name: "Brazil", region: "South America", dialCode: "+55" },
+  { code: "VG", name: "British Virgin Islands", region: "North America", dialCode: "+1" },
+  { code: "BN", name: "Brunei", region: "Asia", dialCode: "+673" },
+  { code: "BG", name: "Bulgaria", region: "Europe", dialCode: "+359" },
+  { code: "BF", name: "Burkina Faso", region: "Africa", dialCode: "+226" },
+  { code: "BI", name: "Burundi", region: "Africa", dialCode: "+257" },
+  { code: "KH", name: "Cambodia", region: "Asia", dialCode: "+855" },
+  { code: "CM", name: "Cameroon", region: "Africa", dialCode: "+237" },
+  { code: "CA", name: "Canada", region: "North America", dialCode: "+1" },
+  { code: "CV", name: "Cape Verde", region: "Africa", dialCode: "+238" },
+  { code: "KY", name: "Cayman Islands", region: "North America", dialCode: "+1" },
+  { code: "CF", name: "Central African Republic", region: "Africa", dialCode: "+236" },
+  { code: "TD", name: "Chad", region: "Africa", dialCode: "+235" },
+  { code: "CL", name: "Chile", region: "South America", dialCode: "+56" },
+  { code: "CN", name: "China", region: "Asia", dialCode: "+86" },
+  { code: "HK", name: "Hong Kong, China", region: "Asia", dialCode: "+852" },
+  { code: "MO", name: "Macao, China", region: "Asia", dialCode: "+853" },
+  { code: "TW", name: "Taiwan, China", region: "Asia", dialCode: "+886" },
+  { code: "CO", name: "Colombia", region: "South America", dialCode: "+57" },
+  { code: "KM", name: "Comoros", region: "Africa", dialCode: "+269" },
+  { code: "CG", name: "Congo", region: "Africa", dialCode: "+242" },
+  { code: "CD", name: "Congo (DRC)", region: "Africa", dialCode: "+243" },
+  { code: "CR", name: "Costa Rica", region: "North America", dialCode: "+506" },
+  { code: "CI", name: "Côte d’Ivoire", region: "Africa", dialCode: "+225" },
+  { code: "HR", name: "Croatia", region: "Europe", dialCode: "+385" },
+  { code: "CU", name: "Cuba", region: "North America", dialCode: "+53" },
+  { code: "CY", name: "Cyprus", region: "Europe", dialCode: "+357" },
+  { code: "CZ", name: "Czechia", region: "Europe", dialCode: "+420" },
+  { code: "DK", name: "Denmark", region: "Europe", dialCode: "+45" },
+  { code: "DJ", name: "Djibouti", region: "Africa", dialCode: "+253" },
+  { code: "DM", name: "Dominica", region: "North America", dialCode: "+1" },
+  { code: "DO", name: "Dominican Republic", region: "North America", dialCode: "+1" },
+  { code: "EC", name: "Ecuador", region: "South America", dialCode: "+593" },
+  { code: "EG", name: "Egypt", region: "Africa", dialCode: "+20" },
+  { code: "SV", name: "El Salvador", region: "North America", dialCode: "+503" },
+  { code: "GQ", name: "Equatorial Guinea", region: "Africa", dialCode: "+240" },
+  { code: "ER", name: "Eritrea", region: "Africa", dialCode: "+291" },
+  { code: "EE", name: "Estonia", region: "Europe", dialCode: "+372" },
+  { code: "SZ", name: "Eswatini", region: "Africa", dialCode: "+268" },
+  { code: "ET", name: "Ethiopia", region: "Africa", dialCode: "+251" },
+  { code: "FO", name: "Faroe Islands", region: "Europe", dialCode: "+298" },
+  { code: "FJ", name: "Fiji", region: "Oceania", dialCode: "+679" },
+  { code: "FI", name: "Finland", region: "Europe", dialCode: "+358" },
+  { code: "FR", name: "France", region: "Europe", dialCode: "+33" },
+  { code: "GF", name: "French Guiana", region: "South America", dialCode: "+594" },
+  { code: "PF", name: "French Polynesia", region: "Oceania", dialCode: "+689" },
+  { code: "GA", name: "Gabon", region: "Africa", dialCode: "+241" },
+  { code: "GM", name: "Gambia", region: "Africa", dialCode: "+220" },
+  { code: "GE", name: "Georgia", region: "Asia", dialCode: "+995" },
+  { code: "DE", name: "Germany", region: "Europe", dialCode: "+49" },
+  { code: "GH", name: "Ghana", region: "Africa", dialCode: "+233" },
+  { code: "GI", name: "Gibraltar", region: "Europe", dialCode: "+350" },
+  { code: "GR", name: "Greece", region: "Europe", dialCode: "+30" },
+  { code: "GL", name: "Greenland", region: "North America", dialCode: "+299" },
+  { code: "GD", name: "Grenada", region: "North America", dialCode: "+1" },
+  { code: "GP", name: "Guadeloupe", region: "North America", dialCode: "+590" },
+  { code: "GU", name: "Guam", region: "Oceania", dialCode: "+1" },
+  { code: "GT", name: "Guatemala", region: "North America", dialCode: "+502" },
+  { code: "GG", name: "Guernsey", region: "Europe", dialCode: "+44" },
+  { code: "GN", name: "Guinea", region: "Africa", dialCode: "+224" },
+  { code: "GW", name: "Guinea-Bissau", region: "Africa", dialCode: "+245" },
+  { code: "GY", name: "Guyana", region: "South America", dialCode: "+592" },
+  { code: "HT", name: "Haiti", region: "North America", dialCode: "+509" },
+  { code: "HN", name: "Honduras", region: "North America", dialCode: "+504" },
+  { code: "HU", name: "Hungary", region: "Europe", dialCode: "+36" },
+  { code: "IS", name: "Iceland", region: "Europe", dialCode: "+354" },
+  { code: "IN", name: "India", region: "Asia", dialCode: "+91" },
+  { code: "ID", name: "Indonesia", region: "Asia", dialCode: "+62" },
+  { code: "IR", name: "Iran", region: "Asia", dialCode: "+98" },
+  { code: "IQ", name: "Iraq", region: "Asia", dialCode: "+964" },
+  { code: "IE", name: "Ireland", region: "Europe", dialCode: "+353" },
+  { code: "IM", name: "Isle of Man", region: "Europe", dialCode: "+44" },
+  { code: "IL", name: "Israel", region: "Asia", dialCode: "+972" },
+  { code: "IT", name: "Italy", region: "Europe", dialCode: "+39" },
+  { code: "JM", name: "Jamaica", region: "North America", dialCode: "+1" },
+  { code: "JP", name: "Japan", region: "Asia", dialCode: "+81" },
+  { code: "JE", name: "Jersey", region: "Europe", dialCode: "+44" },
+  { code: "JO", name: "Jordan", region: "Asia", dialCode: "+962" },
+  { code: "KZ", name: "Kazakhstan", region: "Asia", dialCode: "+7" },
+  { code: "KE", name: "Kenya", region: "Africa", dialCode: "+254" },
+  { code: "KI", name: "Kiribati", region: "Oceania", dialCode: "+686" },
+  { code: "XK", name: "Kosovo", region: "Europe", dialCode: "+383" },
+  { code: "KW", name: "Kuwait", region: "Asia", dialCode: "+965" },
+  { code: "KG", name: "Kyrgyzstan", region: "Asia", dialCode: "+996" },
+  { code: "LA", name: "Laos", region: "Asia", dialCode: "+856" },
+  { code: "LV", name: "Latvia", region: "Europe", dialCode: "+371" },
+  { code: "LB", name: "Lebanon", region: "Asia", dialCode: "+961" },
+  { code: "LS", name: "Lesotho", region: "Africa", dialCode: "+266" },
+  { code: "LR", name: "Liberia", region: "Africa", dialCode: "+231" },
+  { code: "LY", name: "Libya", region: "Africa", dialCode: "+218" },
+  { code: "LI", name: "Liechtenstein", region: "Europe", dialCode: "+423" },
+  { code: "LT", name: "Lithuania", region: "Europe", dialCode: "+370" },
+  { code: "LU", name: "Luxembourg", region: "Europe", dialCode: "+352" },
+  { code: "MG", name: "Madagascar", region: "Africa", dialCode: "+261" },
+  { code: "MW", name: "Malawi", region: "Africa", dialCode: "+265" },
+  { code: "MY", name: "Malaysia", region: "Asia", dialCode: "+60" },
+  { code: "MV", name: "Maldives", region: "Asia", dialCode: "+960" },
+  { code: "ML", name: "Mali", region: "Africa", dialCode: "+223" },
+  { code: "MT", name: "Malta", region: "Europe", dialCode: "+356" },
+  { code: "MH", name: "Marshall Islands", region: "Oceania", dialCode: "+692" },
+  { code: "MQ", name: "Martinique", region: "North America", dialCode: "+596" },
+  { code: "MR", name: "Mauritania", region: "Africa", dialCode: "+222" },
+  { code: "MU", name: "Mauritius", region: "Africa", dialCode: "+230" },
+  { code: "YT", name: "Mayotte", region: "Africa", dialCode: "+262" },
+  { code: "MX", name: "Mexico", region: "North America", dialCode: "+52" },
+  { code: "FM", name: "Micronesia", region: "Oceania", dialCode: "+691" },
+  { code: "MD", name: "Moldova", region: "Europe", dialCode: "+373" },
+  { code: "MC", name: "Monaco", region: "Europe", dialCode: "+377" },
+  { code: "MN", name: "Mongolia", region: "Asia", dialCode: "+976" },
+  { code: "ME", name: "Montenegro", region: "Europe", dialCode: "+382" },
+  { code: "MS", name: "Montserrat", region: "North America", dialCode: "+1" },
+  { code: "MA", name: "Morocco", region: "Africa", dialCode: "+212" },
+  { code: "MZ", name: "Mozambique", region: "Africa", dialCode: "+258" },
+  { code: "MM", name: "Myanmar", region: "Asia", dialCode: "+95" },
+  { code: "NA", name: "Namibia", region: "Africa", dialCode: "+264" },
+  { code: "NR", name: "Nauru", region: "Oceania", dialCode: "+674" },
+  { code: "NP", name: "Nepal", region: "Asia", dialCode: "+977" },
+  { code: "NL", name: "Netherlands", region: "Europe", dialCode: "+31" },
+  { code: "NC", name: "New Caledonia", region: "Oceania", dialCode: "+687" },
+  { code: "NZ", name: "New Zealand", region: "Oceania", dialCode: "+64" },
+  { code: "NI", name: "Nicaragua", region: "North America", dialCode: "+505" },
+  { code: "NE", name: "Niger", region: "Africa", dialCode: "+227" },
+  { code: "NG", name: "Nigeria", region: "Africa", dialCode: "+234" },
+  { code: "NU", name: "Niue", region: "Oceania", dialCode: "+683" },
+  { code: "NF", name: "Norfolk Island", region: "Oceania", dialCode: "+672" },
+  { code: "KP", name: "North Korea", region: "Asia", dialCode: "+850" },
+  { code: "MK", name: "North Macedonia", region: "Europe", dialCode: "+389" },
+  { code: "MP", name: "Northern Mariana Islands", region: "Oceania", dialCode: "+1" },
+  { code: "NO", name: "Norway", region: "Europe", dialCode: "+47" },
+  { code: "OM", name: "Oman", region: "Asia", dialCode: "+968" },
+  { code: "PK", name: "Pakistan", region: "Asia", dialCode: "+92" },
+  { code: "PW", name: "Palau", region: "Oceania", dialCode: "+680" },
+  { code: "PS", name: "Palestine", region: "Asia", dialCode: "+970" },
+  { code: "PA", name: "Panama", region: "North America", dialCode: "+507" },
+  { code: "PG", name: "Papua New Guinea", region: "Oceania", dialCode: "+675" },
+  { code: "PY", name: "Paraguay", region: "South America", dialCode: "+595" },
+  { code: "PE", name: "Peru", region: "South America", dialCode: "+51" },
+  { code: "PH", name: "Philippines", region: "Asia", dialCode: "+63" },
+  { code: "PL", name: "Poland", region: "Europe", dialCode: "+48" },
+  { code: "PT", name: "Portugal", region: "Europe", dialCode: "+351" },
+  { code: "PR", name: "Puerto Rico", region: "North America", dialCode: "+1" },
+  { code: "QA", name: "Qatar", region: "Asia", dialCode: "+974" },
+  { code: "RE", name: "Réunion", region: "Africa", dialCode: "+262" },
+  { code: "RO", name: "Romania", region: "Europe", dialCode: "+40" },
+  { code: "RU", name: "Russia", region: "Europe", dialCode: "+7" },
+  { code: "RW", name: "Rwanda", region: "Africa", dialCode: "+250" },
+  { code: "BL", name: "Saint Barthélemy", region: "North America", dialCode: "+590" },
+  { code: "KN", name: "Saint Kitts and Nevis", region: "North America", dialCode: "+1" },
+  { code: "LC", name: "Saint Lucia", region: "North America", dialCode: "+1" },
+  { code: "MF", name: "Saint Martin", region: "North America", dialCode: "+590" },
+  { code: "PM", name: "Saint Pierre and Miquelon", region: "North America", dialCode: "+508" },
+  { code: "VC", name: "Saint Vincent and the Grenadines", region: "North America", dialCode: "+1" },
+  { code: "WS", name: "Samoa", region: "Oceania", dialCode: "+685" },
+  { code: "SM", name: "San Marino", region: "Europe", dialCode: "+378" },
+  { code: "ST", name: "São Tomé and Príncipe", region: "Africa", dialCode: "+239" },
+  { code: "SA", name: "Saudi Arabia", region: "Asia", dialCode: "+966" },
+  { code: "SN", name: "Senegal", region: "Africa", dialCode: "+221" },
+  { code: "RS", name: "Serbia", region: "Europe", dialCode: "+381" },
+  { code: "SC", name: "Seychelles", region: "Africa", dialCode: "+248" },
+  { code: "SL", name: "Sierra Leone", region: "Africa", dialCode: "+232" },
+  { code: "SG", name: "Singapore", region: "Asia", dialCode: "+65" },
+  { code: "SX", name: "Sint Maarten", region: "North America", dialCode: "+1" },
+  { code: "SK", name: "Slovakia", region: "Europe", dialCode: "+421" },
+  { code: "SI", name: "Slovenia", region: "Europe", dialCode: "+386" },
+  { code: "SB", name: "Solomon Islands", region: "Oceania", dialCode: "+677" },
+  { code: "SO", name: "Somalia", region: "Africa", dialCode: "+252" },
+  { code: "ZA", name: "South Africa", region: "Africa", dialCode: "+27" },
+  { code: "KR", name: "South Korea", region: "Asia", dialCode: "+82" },
+  { code: "SS", name: "South Sudan", region: "Africa", dialCode: "+211" },
+  { code: "ES", name: "Spain", region: "Europe", dialCode: "+34" },
+  { code: "LK", name: "Sri Lanka", region: "Asia", dialCode: "+94" },
+  { code: "SD", name: "Sudan", region: "Africa", dialCode: "+249" },
+  { code: "SR", name: "Suriname", region: "South America", dialCode: "+597" },
+  { code: "SE", name: "Sweden", region: "Europe", dialCode: "+46" },
+  { code: "CH", name: "Switzerland", region: "Europe", dialCode: "+41" },
+  { code: "SY", name: "Syria", region: "Asia", dialCode: "+963" },
+  { code: "TJ", name: "Tajikistan", region: "Asia", dialCode: "+992" },
+  { code: "TZ", name: "Tanzania", region: "Africa", dialCode: "+255" },
+  { code: "TH", name: "Thailand", region: "Asia", dialCode: "+66" },
+  { code: "TG", name: "Togo", region: "Africa", dialCode: "+228" },
+  { code: "TK", name: "Tokelau", region: "Oceania", dialCode: "+690" },
+  { code: "TO", name: "Tonga", region: "Oceania", dialCode: "+676" },
+  { code: "TT", name: "Trinidad and Tobago", region: "North America", dialCode: "+1" },
+  { code: "TN", name: "Tunisia", region: "Africa", dialCode: "+216" },
+  { code: "TR", name: "Türkiye", region: "Europe", dialCode: "+90" },
+  { code: "TM", name: "Turkmenistan", region: "Asia", dialCode: "+993" },
+  { code: "TC", name: "Turks and Caicos Islands", region: "North America", dialCode: "+1" },
+  { code: "TV", name: "Tuvalu", region: "Oceania", dialCode: "+688" },
+  { code: "UG", name: "Uganda", region: "Africa", dialCode: "+256" },
+  { code: "UA", name: "Ukraine", region: "Europe", dialCode: "+380" },
+  { code: "AE", name: "United Arab Emirates", region: "Asia", dialCode: "+971" },
+  { code: "GB", name: "United Kingdom", region: "Europe", dialCode: "+44" },
+  { code: "US", name: "United States", region: "North America", dialCode: "+1" },
+  { code: "UY", name: "Uruguay", region: "South America", dialCode: "+598" },
+  { code: "UZ", name: "Uzbekistan", region: "Asia", dialCode: "+998" },
+  { code: "VU", name: "Vanuatu", region: "Oceania", dialCode: "+678" },
+  { code: "VA", name: "Vatican City", region: "Europe", dialCode: "+39" },
+  { code: "VE", name: "Venezuela", region: "South America", dialCode: "+58" },
+  { code: "VN", name: "Vietnam", region: "Asia", dialCode: "+84" },
+  { code: "VI", name: "U.S. Virgin Islands", region: "North America", dialCode: "+1" },
+  { code: "WF", name: "Wallis and Futuna", region: "Oceania", dialCode: "+681" },
+  { code: "EH", name: "Western Sahara", region: "Africa", dialCode: "+212" },
+  { code: "YE", name: "Yemen", region: "Asia", dialCode: "+967" },
+  { code: "ZM", name: "Zambia", region: "Africa", dialCode: "+260" },
+  { code: "ZW", name: "Zimbabwe", region: "Africa", dialCode: "+263" },
+];

package/src/react/components/ContactForm/factory.tsx

@@ -1,49 +1,60 @@
-import { FileUpload, FileUploadProps } from "./FileUpload";
-import { Input } from "./Input";
-import { Input2 } from "./Input2";
-import { Textarea } from "./Textarea";
-import { Textarea2 } from "./Textarea2";
-import { FieldStyle } from "./types";
-
-export const getControl = (controlName?: string, fieldStyle?: FieldStyle) => {
-  switch (controlName) {
-    case "Input":
-      return getInput(fieldStyle);
-    case "Textarea":
-      return getTextarea(fieldStyle);
-    default:
-      return getInput(fieldStyle);
-  }
-};
-
-export const getInput = (fieldStyle?: FieldStyle) => {
-  if (fieldStyle === "default") {
-    return Input;
-  } else if (fieldStyle === "label-inline") {
-    return Input2;
-  } else {
-    return Input;
-  }
-};
-
-export const getTextarea = (fieldStyle?: FieldStyle) => {
-  if (fieldStyle === "default") {
-    return Textarea;
-  } else if (fieldStyle === "label-inline") {
-    return Textarea2;
-  } else {
-    return Textarea;
-  }
-};
-
-export const getFileUpload = (
-  fieldStyle?: FieldStyle
-): React.FC<FileUploadProps> => {
-  if (fieldStyle === "default") {
-    return FileUpload;
-  } else if (fieldStyle === "label-inline") {
-    return FileUpload;
-  } else {
-    return FileUpload;
-  }
-};
+import { FileUpload2, FileUploadProps } from "./FileUpload2";
+import { Input } from "./Input";
+import { Input2 } from "./Input2";
+import { Textarea } from "./Textarea";
+import { Textarea2 } from "./Textarea2";
+import TelInput from "./TelInput";
+import TelInput2 from "./TelInput2";
+import { FieldStyle } from "./types";
+
+export const getControl = (controlName?: string, fieldStyle?: FieldStyle) => {
+  switch (controlName) {
+    case "Input":
+      return getInput(fieldStyle);
+    case "Textarea":
+      return getTextarea(fieldStyle);
+    case "TelInput":
+      return getTelInput(fieldStyle);
+    default:
+      return getInput(fieldStyle);
+  }
+};
+
+export const getInput = (fieldStyle?: FieldStyle) => {
+  if (fieldStyle === "default") {
+    return Input;
+  } else if (fieldStyle === "label-inline") {
+    return Input2;
+  } else {
+    return Input;
+  }
+};
+
+export const getTextarea = (fieldStyle?: FieldStyle) => {
+  if (fieldStyle === "default") {
+    return Textarea;
+  } else if (fieldStyle === "label-inline") {
+    return Textarea2;
+  } else {
+    return Textarea;
+  }
+};
+
+export const getTelInput = (fieldStyle?: FieldStyle) => {
+  if (fieldStyle === "label-inline") {
+    return TelInput2;
+  }
+  return TelInput;
+};
+
+export const getFileUpload = (
+  fieldStyle?: FieldStyle
+): React.FC<FileUploadProps> => {
+  if (fieldStyle === "default") {
+    return FileUpload2;
+  } else if (fieldStyle === "label-inline") {
+    return FileUpload2;
+  } else {
+    return FileUpload2;
+  }
+};

package/src/react/components/ContactForm/hooks/useInlineLabelPadding.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * 计算内联标签布局所需的 paddingLeft（= label 宽度 + 额外间距）
+ * - 返回 labelRef 供 <label ref={labelRef} /> 绑定
+ * - 返回 paddingLeft 用于内层输入/容器 style
+ */
+export function useInlineLabelPadding(extraSpace: number = 16) {
+  const labelRef = useRef<HTMLLabelElement>(null);
+  const [paddingLeft, setPaddingLeft] = useState<string>("3.5rem");
+
+  useEffect(() => {
+    if (labelRef.current) {
+      const width = labelRef.current.getBoundingClientRect().width;
+      setPaddingLeft(`${width + extraSpace}px`);
+    }
+  }, [extraSpace]);
+
+  return { labelRef, paddingLeft } as const;
+}

package/src/react/components/ContactForm/hooks/useTelControl.ts

@@ -0,0 +1,81 @@
+import { useEffect, useMemo, useState } from "react";
+import type { CountryDial } from "../countryDialCodes";
+import { countries as defaultCountries } from "../countryDialCodes";
+
+export interface UseTelControlOptions {
+  countries?: CountryDial[];
+  name: string;
+  value?: string | number | readonly string[] | undefined;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function useTelControl({ countries, name, value, onChange }: UseTelControlOptions) {
+  const allCountries = useMemo<CountryDial[]>(() => countries || defaultCountries, [countries]);
+
+  const [selected, setSelected] = useState<CountryDial | null>(null);
+  const [localNumber, setLocalNumber] = useState<string>("");
+
+  const toStringValue = (val?: string | number | readonly string[]) => {
+    if (typeof val === "string") return val;
+    if (typeof val === "number") return String(val);
+    if (Array.isArray(val)) return val[0] ?? "";
+    return "";
+  };
+
+  useEffect(() => {
+    const s = toStringValue(value).trim();
+    const m = s.match(/^\+\d{1,4}/);
+    const dial = m ? m[0] : "";
+    const number = s.slice(dial.length).trimStart();
+    setLocalNumber(number || "");
+    if (dial) {
+      const found = allCountries.find((c) => c.dialCode === dial) || null;
+      setSelected(found);
+    } else {
+      setSelected(null);
+    }
+  }, [value, allCountries]);
+
+  const emitChange = (combined: string) => {
+    if (!onChange) return;
+    const evt = {
+      target: { value: combined, name } as unknown,
+      currentTarget: { value: combined, name } as unknown,
+    } as unknown as React.ChangeEvent<HTMLInputElement>;
+    onChange(evt);
+  };
+
+  const filtered = (query: string) => {
+    if (!query) return allCountries;
+    const q = query.toLowerCase();
+    return allCountries.filter(
+      (c) =>
+        c.name.toLowerCase().includes(q) ||
+        (c.region && c.region.toLowerCase().includes(q)) ||
+        c.dialCode.replace("+", "").includes(q.replace("+", ""))
+    );
+  };
+
+  const onSelectCountry = (c: CountryDial) => {
+    setSelected(c);
+    const combined = `${c.dialCode} ${localNumber}`.trim();
+    emitChange(combined);
+  };
+
+  const onChangeLocal = (next: string) => {
+    setLocalNumber(next);
+    const combined = `${selected?.dialCode || ""} ${next}`.trim();
+    emitChange(combined);
+  };
+
+  return {
+    allCountries,
+    selected,
+    setSelected,
+    localNumber,
+    setLocalNumber,
+    filtered,
+    onSelectCountry,
+    onChangeLocal,
+  } as const;
+}

package/src/react/components/ContactForm/index.ts

@@ -1,5 +1,5 @@
 export * from "./ContactForm";
-export * from "./FileUpload";
+export * from "./FileUpload2";
 export * from "./Input";
 export * from "./Submit";
 export * from "./Textarea";

package/src/react/components/ReactModalTrigger.tsx

@@ -0,0 +1,44 @@
+import { useRef } from "react";
+import {
+  DATA_POPUP_CTA,
+  DATA_OPENABLE_ROLE,
+  OpenAble,
+  DATA_OPENABLE,
+  popover,
+} from "../../controller";
+
+export function ReactModalTrigger(props: {
+  className?: string;
+  openableKey?: string;
+  callToAction?: string;
+  children?: React.ReactNode;
+}) {
+  const {
+    className,
+    callToAction,
+    openableKey = "enquiry-modal",
+    children,
+  } = props;
+  const ref = useRef<HTMLButtonElement>(null);
+  const roleProps = {
+    [DATA_POPUP_CTA]: callToAction,
+    [DATA_OPENABLE_ROLE]: OpenAble.ModalTrigger,
+    [DATA_OPENABLE]: openableKey,
+  };
+
+  const handleClick = () => {
+    if (ref.current) {
+      popover.open(openableKey, ref.current);
+    }
+  };
+  return (
+    <button
+      ref={ref}
+      {...roleProps}
+      className={className}
+      onClick={handleClick}
+    >
+      {children || "Get a quote"}
+    </button>
+  );
+}