@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,612 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { Check, ChevronDown, Search, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./phone-input.module.css";
+const country = (iso, name, dial, patterns, example, trunk = "0", areaCodes) => ({ iso, name, dial, patterns: Array.isArray(patterns) ? patterns : [patterns], example, trunk, areaCodes });
+const CA_AREA_CODES = "204 226 236 249 250 263 289 306 343 354 365 367 368 382 387 403 416 418 428 431 437 438 450 468 474 506 514 519 548 579 581 584 587 604 613 639 647 672 683 705 709 742 753 778 780 782 807 819 825 867 873 879 902 905".split(" ");
+export const PHONE_COUNTRIES = [
+    country("US", "United States", "1", "(###) ###-####", "2015550123", "1"),
+    country("CA", "Canada", "1", "(###) ###-####", "5065550123", "1", CA_AREA_CODES),
+    country("MX", "Mexico", "52", "## #### ####", "2221234567", ""),
+    country("BR", "Brazil", "55", ["(##) ####-####", "(##) #####-####"], "11961234567"),
+    country("AR", "Argentina", "54", "## ####-####", "1123456789"),
+    country("CO", "Colombia", "57", "### ### ####", "3211234567", ""),
+    country("CL", "Chile", "56", "# #### ####", "221234567", ""),
+    country("PE", "Peru", "51", "### ### ###", "912345678"),
+    country("GB", "United Kingdom", "44", "#### ######", "7400123456"),
+    country("IE", "Ireland", "353", "## ### ####", "850123456"),
+    country("FR", "France", "33", "# ## ## ## ##", "612345678"),
+    country("DE", "Germany", "49", ["### #######", "### ########"], "15123456789"),
+    country("ES", "Spain", "34", "### ## ## ##", "612345678", ""),
+    country("IT", "Italy", "39", ["### ### ###", "### ### ####"], "3123456789", ""),
+    country("PT", "Portugal", "351", "### ### ###", "912345678", ""),
+    country("NL", "Netherlands", "31", "# ########", "612345678"),
+    country("BE", "Belgium", "32", "### ## ## ##", "470123456"),
+    country("CH", "Switzerland", "41", "## ### ## ##", "781234567"),
+    country("AT", "Austria", "43", ["### #######", "### ########"], "6641234567"),
+    country("SE", "Sweden", "46", "## ### ## ##", "701234567"),
+    country("NO", "Norway", "47", "### ## ###", "40612345", ""),
+    country("DK", "Denmark", "45", "## ## ## ##", "32123456", ""),
+    country("FI", "Finland", "358", ["## ### ####", "## ### #####"], "412345678"),
+    country("PL", "Poland", "48", "### ### ###", "512345678", ""),
+    country("CZ", "Czechia", "420", "### ### ###", "601123456", ""),
+    country("GR", "Greece", "30", "### ### ####", "6912345678", ""),
+    country("UA", "Ukraine", "380", "## ### ## ##", "501234567"),
+    country("TR", "Turkey", "90", "### ### ## ##", "5012345678"),
+    country("IL", "Israel", "972", "##-###-####", "502345678"),
+    country("AE", "United Arab Emirates", "971", "## ### ####", "501234567"),
+    country("SA", "Saudi Arabia", "966", "## ### ####", "512345678"),
+    country("EG", "Egypt", "20", "### ### ####", "1001234567"),
+    country("NG", "Nigeria", "234", "### ### ####", "8021234567"),
+    country("KE", "Kenya", "254", "### ######", "712123456"),
+    country("ZA", "South Africa", "27", "## ### ####", "711234567"),
+    country("IN", "India", "91", "#####-#####", "8123456789"),
+    country("PK", "Pakistan", "92", "### #######", "3012345678"),
+    country("CN", "China", "86", "### #### ####", "13123456789"),
+    country("JP", "Japan", "81", "##-####-####", "9012345678"),
+    country("KR", "South Korea", "82", ["##-###-####", "##-####-####"], "1020000000"),
+    country("TW", "Taiwan", "886", "### ### ###", "912345678"),
+    country("HK", "Hong Kong", "852", "#### ####", "51234567", ""),
+    country("SG", "Singapore", "65", "#### ####", "81234567", ""),
+    country("PH", "Philippines", "63", "### ### ####", "9051234567"),
+    country("ID", "Indonesia", "62", ["###-###-####", "###-####-####", "###-####-#####"], "81234567890"),
+    country("TH", "Thailand", "66", "## ### ####", "812345678"),
+    country("VN", "Vietnam", "84", "## ### ## ##", "912345678"),
+    country("AU", "Australia", "61", "### ### ###", "412345678"),
+    country("NZ", "New Zealand", "64", ["# ### ####", "## ### ####", "## #### ####"], "211234567"),
+];
+const BY_ISO = new Map(PHONE_COUNTRIES.map(entry => [entry.iso, entry]));
+const capacity = (pattern) => pattern.split("#").length - 1;
+const lengthsOf = (entry) => entry.patterns.map(capacity);
+/** A typed trunk prefix earns its own room; without one the longest valid length is the cap. */
+const capDigits = (entry, digits) => digits.slice(0, splitTrunk(entry, digits)[0].length + Math.max(...lengthsOf(entry)));
+const onlyDigits = (text) => text.replace(/\D/g, "");
+/** Regional indicator letters. Platforms without flag glyphs show the two letters, which still read. */
+export const flagOf = (iso) => String.fromCodePoint(...[...iso.toUpperCase()].map(char => 0x1f1e6 + char.charCodeAt(0) - 65));
+function splitTrunk(entry, digits) {
+    return entry.trunk && digits.startsWith(entry.trunk) ? [entry.trunk, digits.slice(entry.trunk.length)] : ["", digits];
+}
+/** Separators only print while digits follow, so a half typed number never ends in a dangling ") " or "-". */
+function applyPattern(digits, pattern) {
+    let out = "", index = 0;
+    for (const char of pattern) {
+        if (index >= digits.length)
+            break;
+        out += char === "#" ? digits[index++] : char;
+    }
+    return out + digits.slice(index);
+}
+function patternFor(entry, length) {
+    return entry.patterns.find(pattern => capacity(pattern) >= length) ?? entry.patterns[entry.patterns.length - 1];
+}
+/** Formats national digits as typed, keeping a typed trunk prefix: "07911123456" in the UK reads "07911 123456". */
+export function formatNational(entry, digits) {
+    const [trunk, rest] = splitTrunk(entry, digits);
+    const pattern = patternFor(entry, rest.length);
+    const body = applyPattern(rest, pattern);
+    if (!trunk)
+        return body;
+    if (!rest)
+        return trunk;
+    return trunk + (/^#/.test(pattern) ? "" : " ") + body;
+}
+function statusOf(entry, digits) {
+    const length = splitTrunk(entry, digits)[1].length;
+    const lengths = lengthsOf(entry);
+    if (!length)
+        return "empty";
+    if (lengths.includes(length))
+        return "valid";
+    return length > Math.max(...lengths) ? "too-long" : "incomplete";
+}
+const toE164 = (entry, digits) => { const rest = splitTrunk(entry, digits)[1]; return rest ? `+${entry.dial}${rest}` : ""; };
+/** Reads "+44 (0)7911 123456", "0044 7911…", or "+14165550123" into a country and national digits. Longest calling code wins. */
+export function parsePhoneNumber(input, pool = PHONE_COUNTRIES) {
+    const trimmed = input.trim();
+    let digits = onlyDigits(trimmed);
+    if (!trimmed.startsWith("+")) {
+        if (!trimmed.startsWith("00"))
+            return null;
+        digits = digits.slice(2);
+    }
+    for (const size of [3, 2, 1]) {
+        const dial = digits.slice(0, size);
+        const matches = pool.filter(entry => entry.dial === dial);
+        if (!matches.length)
+            continue;
+        let rest = digits.slice(size);
+        const entry = matches.find(item => item.areaCodes?.some(code => rest.startsWith(code))) ?? matches.find(item => !item.areaCodes) ?? matches[0];
+        // "+44 (0)7911…" carries a trunk zero it should not; drop it when the rest is still a full number without it.
+        if (entry.trunk && rest.startsWith(entry.trunk) && rest.length - entry.trunk.length >= Math.min(...lengthsOf(entry)))
+            rest = rest.slice(entry.trunk.length);
+        return { country: entry, national: capDigits(entry, rest) };
+    }
+    return null;
+}
+/** Formats an E.164 number for display, such as "+44 7400 123456". Returns the input when it cannot be read. */
+export function formatPhoneNumber(e164) {
+    const parsed = parsePhoneNumber(e164);
+    return parsed ? `+${parsed.country.dial} ${formatNational(parsed.country, parsed.national)}` : e164;
+}
+const enterEase = [...motionTokens.ease.enter];
+const standardEase = [...motionTokens.ease.standard];
+const { blur } = motionTokens;
+/** Duration springs restated as stiffness and damping, so a retarget mid flight keeps the velocity it already has. */
+const physical = (visualDuration, bounce) => {
+    const root = (2 * Math.PI) / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+const GROW = physical(.4, .12), SHRINK = physical(.32, 0), GLIDE = physical(.28, .08), WIDTH = physical(.42, .16);
+const PANEL_MAX = 340, CLOSED_RADIUS = 17, OPEN_RADIUS = 22, PAGE = 8;
+const subscribe = () => () => { };
+function useReducedFlag() {
+    const hydrated = useSyncExternalStore(subscribe, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+/** The flag and calling code roll in the direction of the list: a country further down rises from below. */
+const layerVariants = {
+    enter: (dir) => ({ opacity: 0, y: `${dir * .6}em`, filter: `blur(${blur.soft}px)` }),
+    rest: { opacity: 1, y: 0, filter: "blur(0px)", transitionEnd: { filter: "none" } },
+    exit: (dir) => ({ opacity: 0, y: `${dir * -.5}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: .12, ease: standardEase } }),
+};
+const layerFade = { enter: { opacity: 0 }, rest: { opacity: 1, y: 0, filter: "none" }, exit: { opacity: 0, transition: { duration: .08 } } };
+function matchesQuery(entry, needle) {
+    if (!needle)
+        return true;
+    const digits = onlyDigits(needle);
+    if (digits && /^[+\d\s()-]+$/.test(needle))
+        return entry.dial.startsWith(digits) || digits.startsWith(entry.dial);
+    if (needle.replace("+", "") === "")
+        return true;
+    return entry.name.toLowerCase().includes(needle) || entry.iso.toLowerCase() === needle;
+}
+/** Position in the formatted text just after the nth digit. */
+/**
+ * A search that is really a whole international number: "+" and more digits than any calling code and area code take
+ * ("+1 202 555 0142" typed key by key after "+" opened the list). It belongs in the number field, under its country.
+ */
+function numberInSearch(query, pool) {
+    const text = query.trim();
+    if (!/^\+[\d\s().-]+$/.test(text))
+        return null;
+    const digits = onlyDigits(text);
+    if (digits.length < 5)
+        return null;
+    const parsed = parsePhoneNumber(`+${digits}`, pool);
+    return parsed && parsed.national ? parsed : null;
+}
+function caretAfterDigits(text, count) {
+    if (count <= 0) {
+        const first = text.search(/\d/);
+        return first < 0 ? text.length : Math.min(first, text.length);
+    }
+    let seen = 0;
+    for (let index = 0; index < text.length; index++)
+        if (/\d/.test(text[index]) && ++seen === count)
+            return index + 1;
+    return text.length;
+}
+function MessageRow({ id, text, tone }) {
+    const reduced = useReducedFlag();
+    return _jsx(motion.span, { className: styles.messageSlot, initial: reduced ? false : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant } } }, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast } }, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { id: id, className: tone === "error" ? styles.error : styles.hint, role: tone === "error" ? "alert" : undefined, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .1 } }, transition: { duration: reduced ? .12 : motionTokens.duration.standard, ease: enterEase }, children: text }, text) }) });
+}
+/**
+ * A phone number field with a country picker. The country button grows into a searchable list, the number formats as it is
+ * typed with a faint guide showing the rest of the expected shape, pasted or autofilled international numbers pick their own
+ * country, and the value comes out in E.164. Typing "+" in the number jumps into the picker with a calling code search.
+ */
+export const PhoneInput = forwardRef(function PhoneInput({ label, hideLabel = false, value, defaultValue, onValueChange, country: countryProp, defaultCountry = "US", onCountryChange, countries, preferredCountries = ["US", "CA", "GB"], description, error, validate = true, disabled = false, required, name, id, className, onBlur, }, forwardedRef) {
+    const reduced = useReducedFlag();
+    const uid = useId();
+    const inputId = id ?? `${uid}-number`;
+    const listId = `${uid}-list`;
+    const hintId = `${inputId}-hint`, errorId = `${inputId}-error`;
+    const optionId = (key) => `${uid}-opt-${key}`;
+    const pool = useMemo(() => countries?.length ? PHONE_COUNTRIES.filter(entry => countries.includes(entry.iso)) : PHONE_COUNTRIES, [countries]);
+    const fallback = BY_ISO.get(defaultCountry) ?? PHONE_COUNTRIES[0];
+    const [state, setState] = useState(() => {
+        const parsed = parsePhoneNumber(value ?? defaultValue ?? "", pool);
+        return parsed ? { iso: parsed.country.iso, digits: parsed.national } : { iso: fallback.iso, digits: "" };
+    });
+    const iso = countryProp ?? state.iso;
+    const current = BY_ISO.get(iso) ?? fallback;
+    const digits = state.digits;
+    const e164 = toE164(current, digits);
+    // A controlled value that differs from what the field last produced is read back in.
+    const [seenValue, setSeenValue] = useState(value);
+    if (value !== seenValue) {
+        setSeenValue(value);
+        if (value !== undefined && value !== e164) {
+            const parsed = parsePhoneNumber(value, pool);
+            setState(parsed ? { iso: parsed.country.iso, digits: parsed.national } : { iso, digits: "" });
+        }
+    }
+    const formatted = formatNational(current, digits);
+    const status = statusOf(current, digits);
+    const [touched, setTouched] = useState(false);
+    const lengths = lengthsOf(current);
+    const lengthCopy = lengths.length === 1 ? `${lengths[0]}` : `${lengths.slice(0, -1).join(", ")} or ${lengths[lengths.length - 1]}`;
+    const builtIn = validate && touched && (status === "incomplete" || status === "too-long") ? `Numbers in ${current.name} have ${lengthCopy} digits` : undefined;
+    const message = error ?? builtIn;
+    /* The guide: the rest of the example number, in the shape this country expects, drawn faintly after what was typed. */
+    const guide = useMemo(() => {
+        const [trunk, rest] = splitTrunk(current, digits);
+        if (rest.length >= current.example.length)
+            return "";
+        const full = formatNational(current, trunk + rest + current.example.slice(rest.length));
+        return full.startsWith(formatted) ? full.slice(formatted.length) : "";
+    }, [current, digits, formatted]);
+    const inputRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const pendingCaret = useRef(null);
+    const [, rerender] = useReducer((count) => count + 1, 0);
+    const emit = useCallback((entry, nextDigits) => {
+        const nextStatus = statusOf(entry, nextDigits);
+        onValueChange?.(toE164(entry, nextDigits), { country: entry, formatted: formatNational(entry, nextDigits), status: nextStatus, valid: nextStatus === "valid" });
+    }, [onValueChange]);
+    const setNumber = (nextDigits, caretDigits, entry = current) => {
+        const capped = capDigits(entry, nextDigits);
+        pendingCaret.current = caretDigits === null ? null : Math.min(caretDigits, capped.length);
+        if (entry.iso !== current.iso)
+            onCountryChange?.(entry.iso);
+        // Nothing changed (a refused digit): React restores the old text after this handler, so the caret is placed on the next render.
+        if (capped === digits && entry.iso === current.iso) {
+            rerender();
+            return;
+        }
+        setState({ iso: entry.iso, digits: capped });
+        emit(entry, capped);
+    };
+    function placeCaret() {
+        const input = inputRef.current, count = pendingCaret.current;
+        pendingCaret.current = null;
+        if (!input || count === null || document.activeElement !== input)
+            return;
+        const position = caretAfterDigits(input.value, count);
+        input.setSelectionRange(position, position);
+    }
+    useLayoutEffect(placeCaret);
+    const [announcement, setAnnouncement] = useState("");
+    /* ---------------------------------------------- Number entry ---------------------------------------------- */
+    function onNumberChange(input) {
+        const raw = input.value;
+        // Autofill and dropped text arrive as a change: an international number chooses its own country.
+        if (raw.includes("+") || (/^\s*00/.test(raw) && onlyDigits(raw).length > 6)) {
+            const parsed = parsePhoneNumber(raw.slice(Math.max(0, raw.indexOf("+"))), pool);
+            if (parsed && parsed.national) {
+                if (parsed.country.iso !== current.iso)
+                    setAnnouncement(`Country set to ${parsed.country.name}`);
+                setNumber(parsed.national, parsed.national.length, parsed.country);
+                return;
+            }
+        }
+        const caret = input.selectionStart ?? raw.length;
+        setNumber(onlyDigits(raw), onlyDigits(raw.slice(0, caret)).length);
+    }
+    function onNumberKeyDown(event) {
+        const input = event.currentTarget;
+        if (event.key === "+" && !event.metaKey && !event.ctrlKey) {
+            event.preventDefault();
+            openList("+");
+            return;
+        }
+        const start = input.selectionStart ?? 0, end = input.selectionEnd ?? 0;
+        if (start !== end || event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        // Deleting a separator deletes the digit beside it instead of doing nothing.
+        if (event.key === "Backspace" && start > 0 && !/\d/.test(input.value[start - 1])) {
+            event.preventDefault();
+            const index = onlyDigits(input.value.slice(0, start)).length;
+            if (index > 0)
+                setNumber(digits.slice(0, index - 1) + digits.slice(index), index - 1);
+        }
+        if (event.key === "Delete" && start < input.value.length && !/\d/.test(input.value[start])) {
+            event.preventDefault();
+            const index = onlyDigits(input.value.slice(0, start)).length;
+            setNumber(digits.slice(0, index) + digits.slice(index + 1), index);
+        }
+    }
+    function onPaste(event) {
+        const text = event.clipboardData.getData("text");
+        if (!text)
+            return;
+        event.preventDefault();
+        const input = event.currentTarget;
+        const parsed = /^\s*(\+|00)/.test(text) ? parsePhoneNumber(text, pool) : null;
+        if (parsed) {
+            if (parsed.country.iso !== current.iso)
+                setAnnouncement(`Country set to ${parsed.country.name}`);
+            setNumber(parsed.national, parsed.national.length, parsed.country);
+            return;
+        }
+        let pasted = onlyDigits(text);
+        // "1 415 555 0132" pasted into a US field: the leading calling code is dropped when the number would not fit otherwise.
+        if (pasted.startsWith(current.dial) && pasted.length > capDigits(current, pasted).length)
+            pasted = pasted.slice(current.dial.length);
+        // A whole number replaces what was there; a fragment goes in at the caret.
+        if (pasted.length >= Math.min(...lengthsOf(current))) {
+            setNumber(pasted, pasted.length);
+            return;
+        }
+        const a = onlyDigits(input.value.slice(0, input.selectionStart ?? 0)).length;
+        const b = onlyDigits(input.value.slice(0, input.selectionEnd ?? 0)).length;
+        setNumber(digits.slice(0, a) + pasted + digits.slice(b), a + pasted.length);
+    }
+    /* ---------------------------------------------- Country picker ---------------------------------------------- */
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(null);
+    const [roll, setRoll] = useState(1);
+    const needle = query.trim().toLowerCase();
+    const sections = useMemo(() => {
+        const sorted = [...pool].sort((a, b) => a.name.localeCompare(b.name));
+        if (needle && needle !== "+") {
+            const hits = sorted.filter(entry => matchesQuery(entry, needle));
+            const digitsOnly = onlyDigits(needle);
+            if (digitsOnly)
+                hits.sort((a, b) => Number(b.dial === digitsOnly) - Number(a.dial === digitsOnly) || a.dial.length - b.dial.length);
+            return [{ key: "results", rows: hits.map(entry => ({ key: `r-${entry.iso}`, entry })) }];
+        }
+        const preferred = preferredCountries.map(code => pool.find(entry => entry.iso === code)).filter((entry) => !!entry);
+        const all = { key: "all", label: preferred.length ? "All countries" : undefined, rows: sorted.map(entry => ({ key: `a-${entry.iso}`, entry })) };
+        return preferred.length ? [{ key: "preferred", label: "Suggested", rows: preferred.map(entry => ({ key: `p-${entry.iso}`, entry })) }, all] : [all];
+    }, [needle, pool, preferredCountries]);
+    const rows = useMemo(() => sections.flatMap(section => section.rows), [sections]);
+    const activeKey = active !== null && rows.some(row => row.key === active) ? active : rows[0]?.key ?? null;
+    const orderOf = useMemo(() => new Map([...pool].sort((a, b) => a.name.localeCompare(b.name)).map((entry, index) => [entry.iso, index])), [pool]);
+    const rootRef = useRef(null);
+    const controlRef = useRef(null);
+    const measureRef = useRef(null);
+    const listFaceRef = useRef(null);
+    const scrollRef = useRef(null);
+    const triggerRef = useRef(null);
+    const searchRef = useRef(null);
+    const rowRefs = useRef(new Map());
+    /* One surface whose width, height, and corners spring between the country button and the open list. */
+    const anchorW = useMotionValue("auto");
+    const shapeW = useMotionValue("100%"), shapeH = useMotionValue("100%"), radius = useMotionValue(CLOSED_RADIUS);
+    const sizes = useRef({ trigger: 0, lid: 0, panel: 0, list: 0 });
+    const live = useRef({ open: false, reduced: false, measured: false });
+    useLayoutEffect(() => { live.current.reduced = reduced; }, [reduced]);
+    const place = useCallback((animated) => {
+        const { trigger, lid, panel, list } = sizes.current;
+        if (!trigger || !lid)
+            return;
+        const isOpen = live.current.open;
+        const next = isOpen ? { w: Math.max(trigger, panel), h: lid + 2 + list, r: OPEN_RADIUS } : { w: trigger, h: lid, r: CLOSED_RADIUS };
+        if (!animated || live.current.reduced || !live.current.measured) {
+            anchorW.jump(trigger);
+            shapeW.jump(next.w);
+            shapeH.jump(next.h);
+            radius.jump(next.r);
+            live.current.measured = true;
+            return;
+        }
+        const growing = isOpen;
+        animate(anchorW, trigger, WIDTH);
+        animate(shapeW, next.w, growing ? GROW : SHRINK);
+        animate(shapeH, next.h, growing ? GROW : SHRINK);
+        animate(radius, next.r, growing ? GROW : SHRINK);
+    }, [anchorW, radius, shapeH, shapeW]);
+    const read = useCallback(() => {
+        const measure = measureRef.current, control = controlRef.current, face = listFaceRef.current, root = rootRef.current;
+        if (!measure || !control || !face || !root)
+            return false;
+        const panel = Math.min(PANEL_MAX, control.offsetWidth);
+        root.style.setProperty("--pi-panel-w", `${panel}px`);
+        const previous = sizes.current;
+        const next = { trigger: measure.offsetWidth, lid: control.clientHeight, panel, list: face.offsetHeight };
+        sizes.current = next;
+        return next.trigger !== previous.trigger || next.lid !== previous.lid || next.panel !== previous.panel || (live.current.open && next.list !== previous.list);
+    }, []);
+    useLayoutEffect(() => {
+        const measure = measureRef.current, control = controlRef.current, face = listFaceRef.current;
+        if (read())
+            place(live.current.measured);
+        if (!measure || !control || !face || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => { if (read())
+            place(live.current.measured); });
+        observer.observe(measure);
+        observer.observe(control);
+        observer.observe(face);
+        return () => observer.disconnect();
+    }, [place, read]);
+    const pendingFocus = useRef(null);
+    useLayoutEffect(() => {
+        if (live.current.open !== open) {
+            live.current.open = open;
+            read();
+            place(true);
+        }
+        const target = pendingFocus.current;
+        pendingFocus.current = null;
+        if (target === "search")
+            searchRef.current?.focus({ preventScroll: true });
+        if (target === "trigger")
+            triggerRef.current?.focus({ preventScroll: true });
+        if (target === "number") {
+            const input = inputRef.current;
+            input?.focus({ preventScroll: true });
+            input?.setSelectionRange(input.value.length, input.value.length);
+        }
+    }, [open, place, read]);
+    /* The highlight glides between rows on its own spring. */
+    const hy = useMotionValue(0), hh = useMotionValue(0), ho = useMotionValue(0);
+    const scrollIntent = useRef(false);
+    useLayoutEffect(() => {
+        const node = open && activeKey ? rowRefs.current.get(activeKey) : undefined;
+        if (!node) {
+            animate(ho, 0, { duration: reduced || !open ? 0 : .12, ease: standardEase });
+            return;
+        }
+        const top = node.offsetTop, height = node.offsetHeight;
+        if (ho.get() < .05 || reduced) {
+            hy.jump(top);
+            hh.jump(height);
+        }
+        else {
+            animate(hy, top, GLIDE);
+            animate(hh, height, GLIDE);
+        }
+        animate(ho, 1, { duration: reduced ? 0 : .12, ease: enterEase });
+        const scroller = scrollRef.current;
+        if (scroller && scrollIntent.current) {
+            scrollIntent.current = false;
+            const pad = 6;
+            if (top < scroller.scrollTop + pad)
+                scroller.scrollTop = top - pad;
+            else if (top + height > scroller.scrollTop + scroller.clientHeight - pad)
+                scroller.scrollTop = top + height - scroller.clientHeight + pad;
+        }
+    }, [activeKey, hh, ho, hy, open, reduced, sections]);
+    function openList(seed = "") {
+        if (disabled || open)
+            return;
+        setQuery(seed);
+        const selectedRow = seed ? null : sections.flatMap(section => section.rows).find(row => row.entry.iso === current.iso && !row.key.startsWith("p-")) ?? null;
+        setActive(selectedRow?.key ?? null);
+        scrollIntent.current = true;
+        pendingFocus.current = "search";
+        setAnnouncement("");
+        setOpen(true);
+    }
+    const close = useCallback((focus) => {
+        pendingFocus.current = focus;
+        setOpen(false);
+    }, [setOpen]);
+    function pick(entry) {
+        if (!entry)
+            return;
+        if (entry.iso !== current.iso) {
+            setRoll(Math.sign((orderOf.get(entry.iso) ?? 0) - (orderOf.get(current.iso) ?? 0)) || 1);
+            const nextDigits = capDigits(entry, digits);
+            if (countryProp === undefined)
+                setState({ iso: entry.iso, digits: nextDigits });
+            else
+                setState(last => ({ ...last, digits: nextDigits }));
+            onCountryChange?.(entry.iso);
+            emit(entry, nextDigits);
+            setAnnouncement(`${entry.name}, +${entry.dial}`);
+        }
+        close("number");
+    }
+    function move(key) {
+        if (!key)
+            return;
+        scrollIntent.current = true;
+        setActive(key);
+    }
+    function onSearchKeyDown(event) {
+        const at = rows.findIndex(row => row.key === activeKey);
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                move(rows[Math.min(rows.length - 1, at + 1)]?.key);
+                return;
+            case "ArrowUp":
+                event.preventDefault();
+                move(rows[Math.max(0, at - 1)]?.key);
+                return;
+            case "PageDown":
+                event.preventDefault();
+                move(rows[Math.min(rows.length - 1, at + PAGE)]?.key);
+                return;
+            case "PageUp":
+                event.preventDefault();
+                move(rows[Math.max(0, at - PAGE)]?.key);
+                return;
+            case "Home":
+                if (query)
+                    return;
+                event.preventDefault();
+                move(rows[0]?.key);
+                return;
+            case "End":
+                if (query)
+                    return;
+                event.preventDefault();
+                move(rows[rows.length - 1]?.key);
+                return;
+            case "Enter":
+                event.preventDefault();
+                pick(rows[at]?.entry);
+                return;
+            case "Escape":
+                event.preventDefault();
+                event.stopPropagation();
+                close("trigger");
+                return;
+            case "Tab":
+                close(null);
+                return;
+        }
+    }
+    function onTriggerKeyDown(event) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            openList();
+            return;
+        }
+        if (event.key.length === 1 && event.key !== " " && !event.metaKey && !event.ctrlKey && !event.altKey) {
+            event.preventDefault();
+            openList(event.key);
+        }
+    }
+    function onQuery(next) {
+        // Typing a whole number after "+" (the habit of writing "+1 202 555 0142") moves it into the number field as soon
+        // as it is more than a calling code, under its country; the rest of it goes on in the number field.
+        const typed = numberInSearch(next, pool);
+        if (typed) {
+            if (typed.country.iso !== current.iso)
+                setAnnouncement(`Country set to ${typed.country.name}`);
+            setNumber(typed.national, typed.national.length, typed.country);
+            setQuery("");
+            close("number");
+            return;
+        }
+        setQuery(next);
+        setActive(null);
+        if (scrollRef.current)
+            scrollRef.current.scrollTop = 0;
+        const text = next.trim().toLowerCase();
+        const count = text && text !== "+" ? pool.filter(entry => matchesQuery(entry, text)).length : pool.length;
+        setAnnouncement(text ? count ? `${count} ${count === 1 ? "country" : "countries"}` : "No matches" : "");
+    }
+    useEffect(() => {
+        if (!open)
+            return;
+        const down = (event) => { if (!rootRef.current?.contains(event.target))
+            close(null); };
+        document.addEventListener("pointerdown", down);
+        return () => document.removeEventListener("pointerdown", down);
+    }, [close, open]);
+    const onRootBlur = (event) => {
+        const next = event.relatedTarget;
+        if (open && next && !event.currentTarget.contains(next))
+            close(null);
+    };
+    const showCheck = status === "valid";
+    const invalid = !!message;
+    const describedBy = [description ? hintId : null, message ? errorId : null].filter(Boolean).join(" ") || undefined;
+    const rootStyle = { "--pi-closed-r": `${CLOSED_RADIUS}px` };
+    const face = (entry) => _jsxs(_Fragment, { children: [_jsx("span", { className: styles.flag, "aria-hidden": "true", children: flagOf(entry.iso) }), _jsxs("span", { className: styles.dial, children: ["+", entry.dial] })] });
+    return _jsxs("div", { ref: rootRef, className: [styles.field, className].filter(Boolean).join(" "), style: rootStyle, "data-open": open || undefined, "data-disabled": disabled || undefined, onBlur: onRootBlur, children: [_jsx("label", { htmlFor: inputId, className: hideLabel ? styles.srOnly : styles.label, children: label }), _jsxs("div", { ref: controlRef, className: styles.control, "data-invalid": invalid || undefined, children: [_jsxs(motion.div, { className: styles.anchor, style: { width: anchorW }, children: [_jsx("span", { ref: measureRef, className: `${styles.trigger} ${styles.measure}`, "aria-hidden": "true", children: face(current) }), _jsxs(motion.div, { className: styles.shape, style: { width: shapeW, height: shapeH, borderRadius: radius }, children: [_jsxs("div", { className: styles.lid, children: [_jsx("button", { ref: triggerRef, type: "button", className: styles.trigger, disabled: disabled, inert: open || undefined, tabIndex: open ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, "aria-label": `Country, ${current.name} +${current.dial}`, onClick: () => (open ? close("trigger") : openList()), onKeyDown: onTriggerKeyDown, children: _jsx("span", { className: styles.slot, "data-hidden": open || undefined, children: _jsx(AnimatePresence, { initial: false, custom: roll, children: _jsx(motion.span, { className: styles.layer, custom: roll, variants: reduced ? layerFade : layerVariants, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: .12 } : { y: GLIDE, opacity: { duration: .2, ease: enterEase }, filter: { duration: .22, ease: enterEase } }, children: face(current) }, current.iso) }) }) }), _jsxs(motion.div, { className: styles.searchRow, inert: !open || undefined, initial: false, animate: open ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: open ? { duration: .18, ease: enterEase, delay: reduced ? 0 : .05 } : { duration: .1, ease: standardEase }, children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ref: searchRef, className: styles.search, type: "text", role: "combobox", "aria-label": "Search countries or calling codes", "aria-expanded": open, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": open && activeKey ? optionId(activeKey) : undefined, placeholder: "Country or code", value: query, autoComplete: "off", spellCheck: false, onChange: event => onQuery(event.target.value), onKeyDown: onSearchKeyDown }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onPointerDown: event => event.preventDefault(), onClick: () => { onQuery(""); searchRef.current?.focus(); }, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: .1 } }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") }), _jsx("button", { type: "button", className: styles.closeHit, "aria-label": "Close country list", onClick: () => close("trigger") })] }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: open ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(motion.div, { ref: listFaceRef, className: styles.listFace, inert: !open || undefined, "aria-hidden": !open || undefined, initial: false, animate: open ? { opacity: 1, y: 0, filter: "blur(0px)" } : { opacity: 0, y: reduced ? 0 : -6, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: open ? { y: GROW, opacity: { duration: .2, ease: enterEase, delay: reduced ? 0 : .04 }, filter: { duration: .22, ease: enterEase, delay: .04 } } : { duration: .1, ease: standardEase }, children: _jsx("div", { ref: scrollRef, className: styles.scroll, children: _jsxs("div", { id: listId, className: styles.options, role: "listbox", "aria-label": "Countries", children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), sections.map(section => {
+                                                        const body = section.rows.map(row => {
+                                                            const selected = row.entry.iso === current.iso;
+                                                            return _jsxs("div", { id: optionId(row.key), role: "option", "aria-selected": selected, className: styles.option, "data-active": row.key === activeKey || undefined, ref: node => { if (node)
+                                                                    rowRefs.current.set(row.key, node);
+                                                                else
+                                                                    rowRefs.current.delete(row.key); }, onPointerMove: event => { if (event.pointerType === "mouse" && row.key !== activeKey)
+                                                                    setActive(row.key); }, onPointerDown: event => event.preventDefault(), onClick: () => pick(row.entry), children: [_jsx("span", { className: styles.flag, "aria-hidden": "true", children: flagOf(row.entry.iso) }), _jsx("span", { className: styles.name, children: row.entry.name }), _jsxs("span", { className: styles.meta, children: ["+", row.entry.dial] }), _jsx("span", { className: styles.check, "data-on": selected || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, row.key);
+                                                        });
+                                                        return section.label
+                                                            ? _jsxs("div", { role: "group", "aria-labelledby": `${uid}-${section.key}`, className: styles.group, children: [_jsx("div", { id: `${uid}-${section.key}`, className: styles.groupLabel, role: "presentation", children: section.label }), body] }, section.key)
+                                                            : _jsx("div", { role: "presentation", className: styles.group, children: body }, section.key);
+                                                    }), rows.length === 0 && _jsxs("p", { className: styles.empty, children: ["No countries match \u201C", query.trim(), "\u201D"] })] }) }) })] })] }), _jsxs("div", { className: styles.numberWrap, children: [_jsxs("span", { className: styles.guide, "aria-hidden": "true", children: [_jsx("span", { className: styles.guideTyped, children: formatted }), guide] }), _jsx("input", { ref: inputRef, id: inputId, className: styles.number, type: "tel", inputMode: "tel", autoComplete: "tel", value: formatted, disabled: disabled, required: required, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, "aria-label": hideLabel ? label : undefined, onChange: event => onNumberChange(event.currentTarget), onKeyDown: onNumberKeyDown, onPaste: onPaste, onBlur: event => { setTouched(digits.length > 0); onBlur?.(event); } }), _jsx(AnimatePresence, { initial: false, children: showCheck && _jsx(motion.span, { className: styles.valid, "aria-hidden": "true", initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .6, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: reduced ? 1 : .8, transition: { duration: .1 } }, transition: reduced ? { duration: .12 } : motionTokens.spring.snappy, children: _jsx(Check, { size: 16, strokeWidth: 2 }) }, "ok") })] })] }), _jsx(AnimatePresence, { initial: false, children: description && !message && _jsx(MessageRow, { id: hintId, text: description, tone: "hint" }, "hint") }), _jsx(AnimatePresence, { initial: false, children: message && _jsx(MessageRow, { id: errorId, text: message, tone: "error" }, "error") }), name && _jsx("input", { type: "hidden", name: name, value: e164 }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement || (showCheck ? `Valid ${current.name} number` : "") })] });
+});
+PhoneInput.displayName = "PhoneInput";
+export default PhoneInput;