@comitor/ui 2.0.0 → 3.0.0

package/dist/components/ui/phone-input.js

@@ -0,0 +1,742 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { defaultFilter } from "cmdk";
+import { Check, ChevronDown, Globe } from "lucide-react";
+import * as React from "react";
+import { useComitorLabels, useComitorLocale } from "../../i18n/locale-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useAsRef } from "../../lib/use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { useLazyRef } from "../../lib/use-lazy-ref.js";
+import { VisuallyHiddenInput } from "../../lib/visually-hidden-input.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
+import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+const ROOT_NAME = "PhoneInput";
+const COUNTRY_SELECT_NAME = "PhoneInputCountrySelect";
+const FIELD_NAME = "PhoneInputField";
+const COUNTRY_DATA = [
+  ["af", "93"],
+  ["ax", "358"],
+  ["al", "355"],
+  ["dz", "213"],
+  ["as", "1684"],
+  ["ad", "376"],
+  ["ao", "244"],
+  ["ai", "1264"],
+  ["ag", "1268"],
+  ["ar", "54"],
+  ["am", "374"],
+  ["aw", "297"],
+  ["au", "61"],
+  ["at", "43"],
+  ["az", "994"],
+  ["bs", "1242"],
+  ["bh", "973"],
+  ["bd", "880"],
+  ["bb", "1246"],
+  ["by", "375"],
+  ["be", "32"],
+  ["bz", "501"],
+  ["bj", "229"],
+  ["bm", "1441"],
+  ["bt", "975"],
+  ["bo", "591"],
+  ["ba", "387"],
+  ["bw", "267"],
+  ["br", "55"],
+  ["io", "246"],
+  ["vg", "1284"],
+  ["bn", "673"],
+  ["bg", "359"],
+  ["bf", "226"],
+  ["bi", "257"],
+  ["kh", "855"],
+  ["cm", "237"],
+  ["ca", "1"],
+  ["cv", "238"],
+  ["bq", "599"],
+  ["ky", "1345"],
+  ["cf", "236"],
+  ["td", "235"],
+  ["cl", "56"],
+  ["cn", "86"],
+  ["co", "57"],
+  ["km", "269"],
+  ["cd", "243"],
+  ["cg", "242"],
+  ["ck", "682"],
+  ["cr", "506"],
+  ["ci", "225"],
+  ["hr", "385"],
+  ["cu", "53"],
+  ["cw", "599"],
+  ["cy", "357"],
+  ["cz", "420"],
+  ["dk", "45"],
+  ["dj", "253"],
+  ["dm", "1767"],
+  ["do", "1"],
+  ["ec", "593"],
+  ["eg", "20"],
+  ["sv", "503"],
+  ["gq", "240"],
+  ["er", "291"],
+  ["ee", "372"],
+  ["et", "251"],
+  ["fk", "500"],
+  ["fo", "298"],
+  ["fj", "679"],
+  ["fi", "358"],
+  ["fr", "33"],
+  ["gf", "594"],
+  ["pf", "689"],
+  ["ga", "241"],
+  ["gm", "220"],
+  ["ge", "995"],
+  ["de", "49"],
+  ["gh", "233"],
+  ["gi", "350"],
+  ["gr", "30"],
+  ["gl", "299"],
+  ["gd", "1473"],
+  ["gp", "590"],
+  ["gu", "1671"],
+  ["gt", "502"],
+  ["gg", "44"],
+  ["gn", "224"],
+  ["gw", "245"],
+  ["gy", "592"],
+  ["ht", "509"],
+  ["hn", "504"],
+  ["hk", "852"],
+  ["hu", "36"],
+  ["is", "354"],
+  ["in", "91"],
+  ["id", "62"],
+  ["ir", "98"],
+  ["iq", "964"],
+  ["ie", "353"],
+  ["im", "44"],
+  ["il", "972"],
+  ["it", "39"],
+  ["jm", "1876"],
+  ["jp", "81"],
+  ["je", "44"],
+  ["jo", "962"],
+  ["kz", "7"],
+  ["ke", "254"],
+  ["ki", "686"],
+  ["xk", "383"],
+  ["kw", "965"],
+  ["kg", "996"],
+  ["la", "856"],
+  ["lv", "371"],
+  ["lb", "961"],
+  ["ls", "266"],
+  ["lr", "231"],
+  ["ly", "218"],
+  ["li", "423"],
+  ["lt", "370"],
+  ["lu", "352"],
+  ["mo", "853"],
+  ["mk", "389"],
+  ["mg", "261"],
+  ["mw", "265"],
+  ["my", "60"],
+  ["mv", "960"],
+  ["ml", "223"],
+  ["mt", "356"],
+  ["mh", "692"],
+  ["mq", "596"],
+  ["mr", "222"],
+  ["mu", "230"],
+  ["mx", "52"],
+  ["fm", "691"],
+  ["md", "373"],
+  ["mc", "377"],
+  ["mn", "976"],
+  ["me", "382"],
+  ["ms", "1664"],
+  ["ma", "212"],
+  ["mz", "258"],
+  ["mm", "95"],
+  ["na", "264"],
+  ["nr", "674"],
+  ["np", "977"],
+  ["nl", "31"],
+  ["nc", "687"],
+  ["nz", "64"],
+  ["ni", "505"],
+  ["ne", "227"],
+  ["ng", "234"],
+  ["nu", "683"],
+  ["nf", "672"],
+  ["kp", "850"],
+  ["mp", "1670"],
+  ["no", "47"],
+  ["om", "968"],
+  ["pk", "92"],
+  ["pw", "680"],
+  ["ps", "970"],
+  ["pa", "507"],
+  ["pg", "675"],
+  ["py", "595"],
+  ["pe", "51"],
+  ["ph", "63"],
+  ["pl", "48"],
+  ["pt", "351"],
+  ["pr", "1"],
+  ["qa", "974"],
+  ["re", "262"],
+  ["ro", "40"],
+  ["ru", "7"],
+  ["rw", "250"],
+  ["bl", "590"],
+  ["sh", "290"],
+  ["kn", "1869"],
+  ["lc", "1758"],
+  ["mf", "590"],
+  ["pm", "508"],
+  ["vc", "1784"],
+  ["ws", "685"],
+  ["sm", "378"],
+  ["st", "239"],
+  ["sa", "966"],
+  ["sn", "221"],
+  ["rs", "381"],
+  ["sc", "248"],
+  ["sl", "232"],
+  ["sg", "65"],
+  ["sx", "1721"],
+  ["sk", "421"],
+  ["si", "386"],
+  ["sb", "677"],
+  ["so", "252"],
+  ["za", "27"],
+  ["kr", "82"],
+  ["ss", "211"],
+  ["es", "34"],
+  ["lk", "94"],
+  ["sd", "249"],
+  ["sr", "597"],
+  ["sz", "268"],
+  ["se", "46"],
+  ["ch", "41"],
+  ["sy", "963"],
+  ["tw", "886"],
+  ["tj", "992"],
+  ["tz", "255"],
+  ["th", "66"],
+  ["tl", "670"],
+  ["tg", "228"],
+  ["tk", "690"],
+  ["to", "676"],
+  ["tt", "1868"],
+  ["tn", "216"],
+  ["tr", "90"],
+  ["tm", "993"],
+  ["tc", "1649"],
+  ["tv", "688"],
+  ["vi", "1340"],
+  ["ug", "256"],
+  ["ua", "380"],
+  ["ae", "971"],
+  ["gb", "44"],
+  ["us", "1"],
+  ["uy", "598"],
+  ["uz", "998"],
+  ["vu", "678"],
+  ["va", "39"],
+  ["ve", "58"],
+  ["vn", "84"],
+  ["wf", "681"],
+  ["eh", "212"],
+  ["ye", "967"],
+  ["zm", "260"],
+  ["zw", "263"]
+];
+function getCountryName(countryCode, regionNames) {
+  try {
+    return regionNames?.of(countryCode) ?? countryCode;
+  } catch {
+    return countryCode;
+  }
+}
+function getFlagEmoji(countryCode) {
+  const codePoints = countryCode.toUpperCase().split("").map((char) => 127397 + char.charCodeAt(0));
+  return String.fromCodePoint(...codePoints);
+}
+function getCountries(locale) {
+  let regionNames;
+  let collator;
+  try {
+    regionNames = new Intl.DisplayNames([locale], { type: "region" });
+    collator = new Intl.Collator(locale);
+  } catch {
+  }
+  return COUNTRY_DATA.map(([iso2, dialCode]) => {
+    const code = iso2.toUpperCase();
+    return {
+      code,
+      name: getCountryName(code, regionNames),
+      dialCode: `+${dialCode}`,
+      flag: getFlagEmoji(code)
+    };
+  }).sort((a, b) => collator ? collator.compare(a.name, b.name) : a.name.localeCompare(b.name));
+}
+function removeDiacritics(text) {
+  return text.normalize("NFD").replace(/\p{Diacritic}/gu, "").replace(/đ/g, "d").replace(/Đ/g, "D");
+}
+function filterCountries(value, search, keywords) {
+  return defaultFilter(removeDiacritics(value), removeDiacritics(search), keywords?.map(removeDiacritics));
+}
+const PRIMARY_COUNTRY_BY_DIAL_CODE = {
+  "+1": "US",
+  "+7": "RU",
+  "+39": "IT",
+  "+44": "GB",
+  "+212": "MA",
+  "+358": "FI",
+  "+590": "GP",
+  "+599": "CW"
+};
+function detectCountryFromNumber(value, countries, currentCode) {
+  if (!value?.startsWith("+")) return void 0;
+  const digits = value.slice(1).replace(/\D/g, "");
+  if (!digits) return void 0;
+  const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
+  const matches = [];
+  for (const country of sorted) {
+    const dialCode = country.dialCode.slice(1);
+    if (digits.startsWith(dialCode)) {
+      matches.push(country);
+    }
+  }
+  const best = matches[0];
+  if (!best) return void 0;
+  const tied = matches.filter((c) => c.dialCode === best.dialCode);
+  if (tied.length > 1) {
+    const current = tied.find((c) => c.code === currentCode);
+    if (current) return current;
+    const primary = tied.find((c) => c.code === PRIMARY_COUNTRY_BY_DIAL_CODE[best.dialCode]);
+    if (primary) return primary;
+  }
+  return best;
+}
+function formatPhoneNumber(value, countries) {
+  if (!value) return "";
+  const normalized = value.startsWith("+") ? value : `+${value}`;
+  const digits = normalized.slice(1).replace(/\D/g, "");
+  if (!digits) return "+";
+  const detected = detectCountryFromNumber(`+${digits}`, countries);
+  const dialCodeLength = detected ? detected.dialCode.slice(1).length : Math.min(digits.length, 3);
+  const countryCode = digits.slice(0, dialCodeLength);
+  const rest = digits.slice(dialCodeLength);
+  let formatted = `+${countryCode}`;
+  if (rest) {
+    formatted += " ";
+    for (let i = 0; i < rest.length; i++) {
+      if (i > 0 && i % 3 === 0) {
+        formatted += " ";
+      }
+      formatted += rest[i];
+    }
+  }
+  return formatted;
+}
+const NO_TRUNK_PREFIX_COUNTRIES = /* @__PURE__ */ new Set(["IT", "SM", "VA"]);
+const NATIONAL_INPUT_DISALLOWED = /[^\d\s().-]/g;
+function nationalToE164(nationalInput, country) {
+  let digits = nationalInput.replace(/\D/g, "");
+  if (digits.startsWith("0") && !NO_TRUNK_PREFIX_COUNTRIES.has(country.code)) {
+    digits = digits.slice(1);
+  }
+  return digits ? `${country.dialCode}${digits}` : "";
+}
+function getNationalInput(state, countries) {
+  const { nationalInput, country, value } = state;
+  if (nationalInput === null) return null;
+  const selected = countries.find((c) => c.code === country);
+  if (!selected || nationalToE164(nationalInput, selected) !== value) return null;
+  return nationalInput;
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStore(selector, ogStore) {
+  const contextStore = React.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+  if (!store) {
+    throw new Error(`\`usePhoneInput\` ph\u1EA3i \u0111\u01B0\u1EE3c g\u1ECDi b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const PhoneInputContext = React.createContext(null);
+function usePhoneInputContext(consumerName) {
+  const context = React.useContext(PhoneInputContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function PhoneInput(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    defaultCountry,
+    country: countryProp,
+    onValueChange,
+    onCountryChange,
+    countries: countriesProp,
+    name,
+    placeholder: placeholderProp,
+    locale: localeProp,
+    labels: labelsProp,
+    asChild,
+    disabled,
+    required,
+    readOnly,
+    invalid,
+    showFlag = true,
+    className,
+    id,
+    ref,
+    ...rootProps
+  } = props;
+  const { locale: providerLocale } = useComitorLocale();
+  const locale = localeProp ?? providerLocale;
+  const labels = useComitorLabels("phoneInput", labelsProp);
+  const placeholder = placeholderProp ?? labels.placeholder;
+  const instanceId = React.useId();
+  const rootId = id ?? instanceId;
+  const inputRef = React.useRef(null);
+  const countries = React.useMemo(() => countriesProp ?? getCountries(locale), [countriesProp, locale]);
+  const [formTrigger, setFormTrigger] = React.useState(null);
+  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+  const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => {
+    const initialValue = valueProp ?? defaultValue ?? "";
+    const initialCountry = countryProp ?? defaultCountry ?? "";
+    return {
+      value: initialValue,
+      country: initialCountry,
+      open: false,
+      startsWithPlus: initialValue.startsWith("+"),
+      nationalInput: null
+    };
+  });
+  const propsRef = useAsRef({
+    onValueChange,
+    onCountryChange,
+    countries
+  });
+  const store = React.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value2) => {
+        if (Object.is(stateRef.current[key], value2)) return;
+        if (key === "value" && typeof value2 === "string") {
+          stateRef.current.value = value2;
+          propsRef.current.onValueChange?.(value2);
+        } else if (key === "country" && typeof value2 === "string") {
+          const nationalInput2 = getNationalInput(stateRef.current, propsRef.current.countries);
+          stateRef.current.country = value2;
+          propsRef.current.onCountryChange?.(value2);
+          if (nationalInput2 !== null) {
+            const selected = propsRef.current.countries.find((c) => c.code === value2);
+            if (selected) {
+              const nextValue = nationalToE164(nationalInput2, selected);
+              if (nextValue !== stateRef.current.value) {
+                stateRef.current.value = nextValue;
+                propsRef.current.onValueChange?.(nextValue);
+              }
+            } else {
+              stateRef.current.nationalInput = null;
+            }
+          }
+        } else {
+          stateRef.current[key] = value2;
+        }
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    };
+  }, [listenersRef, stateRef, propsRef]);
+  const value = useStore((state) => state.value, store);
+  const country = useStore((state) => state.country, store);
+  useIsomorphicLayoutEffect(() => {
+    if (valueProp !== void 0) {
+      store.setState("value", valueProp);
+    }
+  }, [valueProp]);
+  useIsomorphicLayoutEffect(() => {
+    if (countryProp !== void 0) {
+      store.setState("country", countryProp);
+    }
+  }, [countryProp]);
+  const startsWithPlus = useStore((state) => state.startsWithPlus, store);
+  const nationalInput = useStore((state) => getNationalInput(state, countries), store);
+  React.useEffect(() => {
+    if (!value || nationalInput !== null) return;
+    const digits = value.slice(1).replace(/\D/g, "");
+    const shouldDetect = startsWithPlus || digits.length >= 10;
+    if (!shouldDetect) return;
+    const detected = detectCountryFromNumber(value, countries, country);
+    if (detected && detected.code !== country) {
+      store.setState("country", detected.code);
+    }
+  }, [value, countries, country, store, startsWithPlus, nationalInput]);
+  const contextValue = React.useMemo(
+    () => ({
+      rootId,
+      countries,
+      placeholder,
+      labels,
+      disabled,
+      readOnly,
+      required,
+      invalid,
+      showFlag,
+      inputRef
+    }),
+    [rootId, countries, placeholder, labels, disabled, required, readOnly, invalid, showFlag]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsxs(PhoneInputContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(
+      RootPrimitive,
+      {
+        role: "group",
+        "data-slot": "phone-input",
+        "data-disabled": disabled ? "" : void 0,
+        "data-invalid": invalid ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
+        id: rootId,
+        ...rootProps,
+        ref: composedRef,
+        className: cn(
+          /*
+           * ⚠ Khác thượng nguồn: khung mượn đúng vai trò màu của `Input` Comitor để đứng cạnh ô
+           * nhập thường trong một form không lệch (cao `h-9` thay vì `h-10`, nền `bg-background`
+           * thay vì `dark:bg-input/30` — viết thẳng thang màu thì bảng tương phản cao không đổi
+           * được). Số đo từng vai trò: chú thích đầu `input.tsx`.
+           *
+           * Focus: thượng nguồn soi `[data-slot=input-group-control]` — slot KHÔNG tồn tại trong
+           * component này, nên khung không bao giờ sáng. Ở đây soi đúng slot của ô số.
+           *
+           * Lỗi: HAI đường như `InputGroup` — `aria-invalid` trên ô số (prop `invalid`), hoặc
+           * trên CHÍNH gốc khi `<FormControl>` của `@comitor/ui/form` dán nó vào con trực tiếp.
+           * Viền lỗi là `--destructive-ink` (không phải `--destructive` — token TÔ NỀN).
+           *
+           * Vô hiệu: thượng nguồn làm mờ CẢ gốc (`data-disabled:opacity-50`) trong khi nút và ô
+           * số bên trong cũng tự mờ theo `:disabled` → nội dung còn 25%. Ở đây gốc KHÔNG mờ (như
+           * `InputGroup`); hai con tự mờ bằng `:disabled` gốc của HTML, gốc chỉ đổi nền theo ô số.
+           * `data-disabled` còn không được cổng tương phản coi là trạng thái vô hiệu — nó không
+           * chứng minh phần tử đã inert — còn `:disabled` thì có.
+           */
+          "relative flex h-9 w-full items-center rounded-md border border-input bg-background transition-colors duration-150 ease-out hover:border-control-edge-strong",
+          "has-[[data-slot=phone-input-field]:focus-visible]:border-primary-ink has-[[data-slot=phone-input-field]:focus-visible]:ring-2 has-[[data-slot=phone-input-field]:focus-visible]:ring-ring/50",
+          "has-[[data-slot][aria-invalid=true]]:border-destructive-ink has-[[data-slot][aria-invalid=true]]:ring-destructive/30",
+          "aria-invalid:border-destructive-ink aria-invalid:hover:border-destructive-ink aria-invalid:ring-destructive/30",
+          "data-disabled:cursor-not-allowed has-[[data-slot=phone-input-field]:disabled]:bg-muted",
+          className
+        )
+      }
+    ),
+    isFormControl && /* @__PURE__ */ jsx(
+      VisuallyHiddenInput,
+      {
+        type: "hidden",
+        control: formTrigger,
+        name,
+        value,
+        disabled,
+        readOnly,
+        required
+      }
+    )
+  ] }) });
+}
+function PhoneInputCountrySelect(props) {
+  const { disabled: disabledProp, className, children, onOpenChange: onOpenChangeProp, ...popoverProps } = props;
+  const { countries, inputRef, disabled, showFlag, labels } = usePhoneInputContext(COUNTRY_SELECT_NAME);
+  const store = useStoreContext(COUNTRY_SELECT_NAME);
+  const country = useStore((state) => state.country);
+  const open = useStore((state) => state.open);
+  const onOpenChangeRef = useAsRef(onOpenChangeProp);
+  const isDisabled = disabledProp || disabled;
+  const countryContext = countries.find((c) => c.code === country);
+  const onOpenChange = React.useCallback(
+    (open2) => {
+      store.setState("open", open2);
+      onOpenChangeRef.current?.(open2);
+    },
+    [store, onOpenChangeRef]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, ...popoverProps, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        "data-slot": "phone-input-country-select",
+        "aria-label": labels.countrySelect(countryContext),
+        disabled: isDisabled,
+        className: cn(
+          /*
+           * Hover `bg-muted` như nút `ghost` của gói. Viền focus cùng khuôn `Button`
+           * (`outline-ring`), nhưng THỤT VÀO trong (`-outline-offset-2`) vì nút nằm lọt trong khung
+           * của ô — viền đẩy ra ngoài sẽ đè lên khung và lên ô số bên cạnh.
+           */
+          "flex h-full shrink-0 items-center gap-2 rounded-l-md border-r border-input bg-transparent px-3 text-sm transition-colors duration-150 ease-out hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:-outline-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        children: [
+          !countryContext ? (
+            /*
+             * ⚠ Khác thượng nguồn: bản gốc vẽ một ô `bg-muted/50` trống — 1,00:1 trên nền hover
+             * `--muted`, tức biến mất đúng lúc người dùng rê chuột vào (cổng tương phản chặn). Quả
+             * địa cầu nói được "chưa chọn quốc gia"; giữ bề rộng `w-6` của lá cờ để chọn xong không
+             * xô lệch.
+             */
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex w-6 justify-center", children: /* @__PURE__ */ jsx(Globe, { className: "size-4 text-muted-foreground" }) })
+          ) : showFlag && countryContext.flag && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-6 text-lg leading-none", children: countryContext.flag }),
+          /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 text-muted-foreground" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[300px] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { filter: filterCountries, children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: labels.searchPlaceholder }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: countries.map((c) => /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: `${c.name} ${c.dialCode} ${c.code}`,
+            onSelect: () => {
+              store.setState("country", c.code);
+              store.setState("open", false);
+              requestAnimationFrame(() => {
+                inputRef.current?.focus();
+              });
+            },
+            children: [
+              showFlag && c.flag && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-lg", children: c.flag }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: c.name }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: c.dialCode }),
+              /* @__PURE__ */ jsx(
+                Check,
+                {
+                  "aria-hidden": "true",
+                  className: cn("size-4", country === c.code ? "opacity-100" : "opacity-0")
+                }
+              )
+            ]
+          },
+          c.code
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+function PhoneInputField(props) {
+  const {
+    onChange: onChangeProp,
+    className,
+    disabled: disabledProp,
+    readOnly: readOnlyProp,
+    required: requiredProp,
+    placeholder: placeholderProp,
+    ref,
+    ...inputProps
+  } = props;
+  const { inputRef, disabled, invalid, readOnly, required, placeholder, countries } = usePhoneInputContext(FIELD_NAME);
+  const store = useStoreContext(FIELD_NAME);
+  const value = useStore((state) => state.value);
+  const nationalInput = useStore((state) => getNationalInput(state, countries));
+  const composedRef = useComposedRefs(ref, inputRef);
+  const onChangeRef = useAsRef(onChangeProp);
+  const isDisabled = disabledProp || disabled;
+  const isReadOnly = readOnlyProp || readOnly;
+  const isRequired = requiredProp || required;
+  const onChange = React.useCallback(
+    (event) => {
+      if (isDisabled || isReadOnly) return;
+      onChangeRef.current?.(event);
+      if (event.defaultPrevented) return;
+      const inputValue = event.target.value;
+      const startsWithPlus = inputValue.trimStart().startsWith("+");
+      const selectedCountry = startsWithPlus ? void 0 : countries.find((c) => c.code === store.getState().country);
+      if (selectedCountry) {
+        const nextNationalInput = inputValue.replace(NATIONAL_INPUT_DISALLOWED, "");
+        if (nextNationalInput !== inputValue) {
+          const target = event.target;
+          const caret = target.selectionStart ?? inputValue.length;
+          const nextCaret = inputValue.slice(0, caret).replace(NATIONAL_INPUT_DISALLOWED, "").length;
+          target.value = nextNationalInput;
+          target.setSelectionRange(nextCaret, nextCaret);
+        }
+        store.setState("startsWithPlus", false);
+        store.setState("nationalInput", nextNationalInput);
+        store.setState("value", nationalToE164(nextNationalInput, selectedCountry));
+        return;
+      }
+      const digits = inputValue.replace(/\D/g, "");
+      const newValue = digits ? `+${digits}` : startsWithPlus ? "+" : "";
+      store.setState("startsWithPlus", startsWithPlus);
+      store.setState("nationalInput", null);
+      store.setState("value", newValue);
+    },
+    [store, countries, onChangeRef, isDisabled, isReadOnly]
+  );
+  const displayValue = React.useMemo(() => {
+    return nationalInput ?? formatPhoneNumber(value, countries);
+  }, [nationalInput, value, countries]);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      type: "tel",
+      inputMode: "tel",
+      "aria-required": isRequired,
+      "aria-invalid": invalid,
+      "data-slot": "phone-input-field",
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      ...inputProps,
+      ref: composedRef,
+      className: cn(
+        // Viền, quầng focus và nền (kể cả nền `--muted` lúc vô hiệu) đều do khung gốc vẽ; ô số
+        // trong suốt và phẳng. `focus:ring-0` chứ không `focus-visible:` — `Input` vẽ quầng bằng `focus:`.
+        "h-full flex-1 rounded-l-none rounded-r-md border-0 bg-transparent focus:ring-0 disabled:bg-transparent",
+        className
+      ),
+      placeholder: placeholderProp ?? placeholder,
+      value: displayValue,
+      onChange
+    }
+  );
+}
+export {
+  PhoneInput,
+  PhoneInputCountrySelect,
+  PhoneInputField,
+  useStore as usePhoneInput
+};
+//# sourceMappingURL=phone-input.js.map