@rxdrag/website-lib-core 0.0.62 → 0.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,9 +24,9 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
+    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/tsconfig": "0.2.0",
-    "@rxdrag/slate-preview": "1.2.58",
-    "@rxdrag/eslint-config-custom": "0.2.12"
+    "@rxdrag/slate-preview": "1.2.58"
   },
   "dependencies": {
     "clsx": "^2.1.0",
@@ -35,8 +35,8 @@
     "lodash-es": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/rxcms-models": "0.3.88",
-    "@rxdrag/entify-lib": "0.0.17"
+    "@rxdrag/entify-lib": "0.0.18",
+    "@rxdrag/rxcms-models": "0.3.89"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

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

@@ -1,6 +1,6 @@
 import { forwardRef, useState } from "react";
 import { Submit } from "./Submit";
-import { type UploadedFile } from "./FileUpload";
+import { type UploadedFile } from "./FileUpload2";
 import clsx from "clsx";
 import { modal } from "../../../controller";
 import { encrypt } from "./funcs";

package/src/react/components/ContactForm/{FileUpload.tsx → FileUpload2.tsx}

@@ -43,7 +43,7 @@ export type FileUploadProps = {
   maxSize?: number; // 最大文件大小（字节），默认 5MB
 };
 
-export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
+export const FileUpload2 = forwardRef<HTMLInputElement, FileUploadProps>(
   (props, ref) => {
     const {
       label,
@@ -320,7 +320,7 @@ export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
           ref={labelRef}
           htmlFor={name}
           className={clsx(
-            "absolute left-3 top-1/2 -translate-y-1/2 mt-1 text-gray-600 text-sm pointer-events-none whitespace-nowrap z-10",
+            "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap z-10",
             labelClassName
           )}
         >

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

@@ -7,6 +7,7 @@ export const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     label,
     name,
     required,
+    requiredClassName,
     className,
     labelClassName,
     inputClassName,
@@ -35,11 +36,12 @@ export const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         ref={labelRef}
         htmlFor={name}
         className={clsx(
-          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 text-gray-400 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
           labelClassName
         )}
       >
         {label}
+        {required ? <span className={requiredClassName}>*</span> : ""}
       </label>
       <input
         ref={ref}

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

@@ -32,7 +32,10 @@ export const Submit: React.FC<SubmitProps> = (props) => {
       >
         {submitting && spinner}
         {rawHtml ? (
-          <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
+          <div
+            style={{ display: "contents" }}
+            dangerouslySetInnerHTML={{ __html: rawHtml }}
+          />
         ) : (
           title
         )}

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

@@ -0,0 +1,215 @@
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { CountryDial } from "./countryDialCodes";
+import { useTelControl } from "./hooks/useTelControl";
+
+export interface TelInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: string;
+  name: string;
+  required?: boolean;
+  requiredClassName?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  countries?: CountryDial[];
+}
+
+export const TelInput = forwardRef<HTMLInputElement, TelInputProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      className,
+      labelClassName,
+      inputClassName,
+      countries,
+      placeholder,
+      value,
+      onChange,
+    } = props;
+
+    const { allCountries, selected, localNumber, onSelectCountry, onChangeLocal } =
+      useTelControl({ countries, name, value, onChange });
+
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const panelRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+    useEffect(() => {
+      const onDocClick = (e: MouseEvent) => {
+        const target = e.target as Node;
+        if (
+          open &&
+          panelRef.current &&
+          !panelRef.current.contains(target) &&
+          buttonRef.current &&
+          !buttonRef.current.contains(target)
+        ) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocClick);
+      return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+
+    // 使用 useTelControl 负责解析与变更回传
+
+    const filtered: CountryDial[] = useMemo(() => {
+      if (!query) return allCountries;
+      const q = query.toLowerCase();
+      return allCountries.filter(
+        (c: CountryDial) =>
+          c.name.toLowerCase().includes(q) ||
+          (c.region && c.region.toLowerCase().includes(q)) ||
+          c.dialCode.replace("+", "").includes(q.replace("+", ""))
+      );
+    }, [allCountries, query]);
+
+    return (
+      <div className={clsx("w-full", className)}>
+        {label ? (
+          <label
+            htmlFor={name}
+            className={clsx(
+              "mb-1 inline-flex items-center text-sm text-gray-600",
+              labelClassName
+            )}
+          >
+            {label}
+            {required ? <span className={requiredClassName}>*</span> : null}
+          </label>
+        ) : null}
+
+        <div
+          className={clsx(
+            "flex h-10 items-center gap-2 rounded-md focus-within:ring-2 focus-within:ring-primary-300 focus-within:ring-offset-0 bg-white",
+            inputClassName
+          )}
+        >
+          <div className="relative h-full">
+            <button
+              ref={buttonRef}
+              type="button"
+              aria-haspopup="listbox"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+              className={
+                "h-full min-w-[200px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"
+              }
+            >
+              <span className="truncate text-left leading-tight">
+                {selected ? (
+                  <>
+                    <span className="font-medium">{selected.name}</span>
+                    {selected.region ? (
+                      <span className="text-gray-500">, {selected.region}</span>
+                    ) : null}
+                    <span className="ml-1 text-gray-700">
+                      {selected.dialCode}
+                    </span>
+                  </>
+                ) : (
+                  "Select Country/Region"
+                )}
+              </span>
+              <svg
+                className="ml-2 h-4 w-4 text-gray-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+
+            {open ? (
+              <div
+                ref={panelRef}
+                className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg"
+              >
+                <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
+                  <input
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder="Enter Country/Region"
+                    className="h-8 w-full bg-transparent text-sm outline-none"
+                  />
+                  <svg
+                    className="h-4 w-4 text-gray-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+
+                <div className="mt-2 max-h-64 overflow-auto pr-1">
+                  {filtered.map((c: CountryDial) => (
+                    <button
+                      key={c.code}
+                      type="button"
+                      onClick={() => {
+                        onSelectCountry(c);
+                        setOpen(false);
+                      }}
+                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span
+                        className={clsx(
+                          "inline-block h-3 w-3 rounded-full border",
+                          selected?.code === c.code
+                            ? "border-primary-500 ring-4 ring-primary-200"
+                            : "border-gray-400"
+                        )}
+                      ></span>
+                      <span className="flex-1 truncate">
+                        {c.name}
+                        {c.region ? (
+                          <span className="text-gray-500">, {c.region}</span>
+                        ) : null}
+                      </span>
+                      <span className="text-gray-700">{c.dialCode}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          <input
+            ref={ref}
+            id={name}
+            name={name}
+            required={required}
+            placeholder={placeholder || "Phone number"}
+            inputMode="tel"
+            className={clsx("h-10 w-full px-3 py-0 text-sm leading-tight ring-0 outline-none rounded-md")}
+            value={localNumber}
+            onChange={(e) => {
+              const next = e.target.value;
+              onChangeLocal(next);
+            }}
+            autoComplete={name}
+            autoCorrect="off"
+            spellCheck={false}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TelInput;

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

@@ -0,0 +1,177 @@
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import type { CountryDial } from "./countryDialCodes";
+import { useInlineLabelPadding } from "./hooks/useInlineLabelPadding";
+import { useTelControl } from "./hooks/useTelControl";
+
+export interface TelInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: string;
+  name: string;
+  required?: boolean;
+  requiredClassName?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  countries?: CountryDial[];
+}
+
+export const TelInput2 = forwardRef<HTMLInputElement, TelInputProps>((props, ref) => {
+  const {
+    label,
+    name,
+    required,
+    requiredClassName,
+    className,
+    labelClassName,
+    inputClassName,
+    countries,
+    placeholder,
+    value,
+    onChange,
+  } = props;
+
+  const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+  const {
+    allCountries,
+    selected,
+    localNumber,
+    onSelectCountry,
+    onChangeLocal,
+  } = useTelControl({ countries, name, value, onChange });
+
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const filtered = useMemo(() => {
+    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("+", ""))
+    );
+  }, [allCountries, query]);
+
+  useEffect(() => {
+    const onDocClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        open &&
+        panelRef.current &&
+        !panelRef.current.contains(target) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(target)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, [open]);
+
+  return (
+    <div className={clsx("relative w-full", className)}>
+      <label
+        ref={labelRef}
+        htmlFor={name}
+        className={clsx(
+          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+          labelClassName
+        )}
+      >
+        {label}
+        {required ? <span className={requiredClassName}>*</span> : null}
+      </label>
+
+      <div
+        className={clsx(
+          "flex h-10 items-center gap-2 rounded-md shadow-sm focus-within:ring-2 focus-within:ring-primary-300",
+          inputClassName
+        )}
+        style={{ paddingLeft }}
+      >
+        <div className="relative h-full">
+          <button
+            ref={buttonRef}
+            type="button"
+            aria-haspopup="listbox"
+            aria-expanded={open}
+            onClick={() => setOpen((v) => !v)}
+            className={"h-full min-w-[100px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"}
+          >
+            <span className="truncate text-left leading-tight">
+              {selected ? (
+                <span className="font-medium">{selected.dialCode}</span>
+              ) : (
+                <span className="text-gray-500">+ Code</span>
+              )}
+            </span>
+            <svg className="ml-2 h-4 w-4 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z" clipRule="evenodd" />
+            </svg>
+          </button>
+
+          {open ? (
+            <div ref={panelRef} className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg">
+              <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
+                <input
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Enter Country/Region"
+                  className="h-8 w-full bg-transparent text-sm outline-none"
+                />
+                <svg className="h-4 w-4 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fillRule="evenodd" d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z" clipRule="evenodd" />
+                </svg>
+              </div>
+
+              <div className="mt-2 max-h-64 overflow-auto pr-1">
+                {filtered.map((c) => (
+                  <button
+                    key={c.code}
+                    type="button"
+                    onClick={() => {
+                      onSelectCountry(c);
+                      setOpen(false);
+                    }}
+                    className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
+                  >
+                    <span className={clsx("inline-block h-3 w-3 rounded-full border", selected?.code === c.code ? "border-primary-500 ring-4 ring-primary-200" : "border-gray-400")}></span>
+                    <span className="flex-1 truncate">
+                      {c.name}
+                      {c.region ? <span className="text-gray-500">, {c.region}</span> : null}
+                    </span>
+                    <span className="text-gray-700">{c.dialCode}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </div>
+
+        <input
+          ref={ref}
+          id={name}
+          name={name}
+          required={required}
+          placeholder={placeholder || "Phone number"}
+          inputMode="tel"
+          className={clsx(
+            "h-10 w-full appearance-none rounded-md border-0 bg-transparent px-3 py-0 text-sm leading-tight focus:outline-none",
+          )}
+          value={localNumber}
+          onChange={(e) => onChangeLocal(e.target.value)}
+          autoComplete={name}
+          autoCorrect="off"
+          spellCheck={false}
+        />
+      </div>
+    </div>
+  );
+});
+
+export default TelInput2;

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

@@ -7,6 +7,7 @@ export const Textarea2 = forwardRef<HTMLTextAreaElement, TextareaProps>(
       label,
       name,
       required,
+      requiredClassName,
       labelClassName,
       inputClassName,
       className,
@@ -33,11 +34,12 @@ export const Textarea2 = forwardRef<HTMLTextAreaElement, TextareaProps>(
           <label
             ref={labelRef}
             htmlFor={name}
-            className={`absolute left-3 top-2 text-gray-400 opacity-70 text-sm pointer-events-none ${
+            className={`absolute left-3 top-2 opacity-70 text-sm pointer-events-none ${
               labelClassName || ""
             }`}
           >
             {label}
+            {required ? <span className={requiredClassName}>*</span> : ""}
           </label>
           <textarea
             ref={ref}

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/ContactForm/useVisitorInfo.ts

@@ -1,31 +0,0 @@
-import { useEffect, useState } from "react";
-
-export interface VisitorInfo {
-  visitorId: string | null;
-  sessionId: string | null;
-}
-
-export function useVisitorInfo() {
-  const [visitorInfo, setVisitorInfo] = useState<VisitorInfo>({
-    visitorId: null,
-    sessionId: null,
-  });
-
-  useEffect(() => {
-    const getVisitorId = () => {
-      const match = document.cookie.match(/visitor_id=([^;]+)/);
-      return match ? match[1] : null;
-    };
-
-    const getSessionId = () => {
-      return sessionStorage.getItem("session_id");
-    };
-
-    setVisitorInfo({
-      visitorId: getVisitorId(),
-      sessionId: getSessionId(),
-    });
-  }, []);
-
-  return visitorInfo;
-}