"use client"; import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Check, ChevronDown, Phone, Search, ShieldCheck } from "lucide-react"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------ */ /* Flags, drawn with pure CSS, no emoji, no images */ /* ------------------------------------------------------------------ */ type FlagKind = | { t: "v"; c: [string, string, string] } // three vertical stripes | { t: "h"; c: [string, string, string] } // three horizontal stripes | { t: "h2"; c: [string, string] } // two horizontal stripes | { t: "spain" } // red / gold(2x) / red | { t: "circle"; base: string; dot: string } // Japan | { t: "nordic"; base: string; cross: string } // Sweden | { t: "union" } // United Kingdom | { t: "us" } | { t: "brazil" } | { t: "india" }; function FlagArt({ kind }: { kind: FlagKind }) { switch (kind.t) { case "v": return (

{kind.c.map((col, i) => (

))}

); case "h": return (

{kind.c.map((col, i) => (

))}

); case "h2": return (

{kind.c.map((col, i) => (

))}

); case "spain": return (

); case "circle": return ( <>

); case "nordic": return ( <>

); case "union": return (

); case "us": return ( <>

); case "brazil": return ( <>

); case "india": return ( <>

); } } function Flag({ kind, className }: { kind: FlagKind; className?: string }) { return (

); } /* ------------------------------------------------------------------ */ /* Data */ /* ------------------------------------------------------------------ */ export interface Country { code: string; // ISO-3166 alpha-2 name: string; dial: string; // "+1" flag: FlagKind; format: string; // "(###) ###-####" sample: string; // national digits used by the autoplay preview } export const COUNTRIES: Country[] = [ { code: "US", name: "United States", dial: "+1", flag: { t: "us" }, format: "(###) ###-####", sample: "2025550147" }, { code: "GB", name: "United Kingdom", dial: "+44", flag: { t: "union" }, format: "#### ### ###", sample: "7911123456" }, { code: "DE", name: "Germany", dial: "+49", flag: { t: "h", c: ["#000000", "#DD0000", "#FFCE00"] }, format: "#### ### ####", sample: "15123456789" }, { code: "FR", name: "France", dial: "+33", flag: { t: "v", c: ["#0055A4", "#ffffff", "#EF4135"] }, format: "# ## ## ## ##", sample: "612345678" }, { code: "JP", name: "Japan", dial: "+81", flag: { t: "circle", base: "#ffffff", dot: "#BC002D" }, format: "## #### ####", sample: "9012345678" }, { code: "IN", name: "India", dial: "+91", flag: { t: "india" }, format: "##### #####", sample: "9812345678" }, { code: "BR", name: "Brazil", dial: "+55", flag: { t: "brazil" }, format: "(##) #####-####", sample: "11987654321" }, { code: "IT", name: "Italy", dial: "+39", flag: { t: "v", c: ["#008C45", "#F4F5F0", "#CD212A"] }, format: "### ### ####", sample: "3123456789" }, { code: "ES", name: "Spain", dial: "+34", flag: { t: "spain" }, format: "### ## ## ##", sample: "612345678" }, { code: "NL", name: "Netherlands", dial: "+31", flag: { t: "h", c: ["#AE1C28", "#ffffff", "#21468B"] }, format: "# ## ## ## ##", sample: "612345678" }, { code: "SE", name: "Sweden", dial: "+46", flag: { t: "nordic", base: "#006AA7", cross: "#FECC00" }, format: "##-### ## ##", sample: "701234567" }, { code: "MX", name: "Mexico", dial: "+52", flag: { t: "v", c: ["#006847", "#ffffff", "#CE1126"] }, format: "## #### ####", sample: "5512345678" }, { code: "UA", name: "Ukraine", dial: "+380", flag: { t: "h2", c: ["#0057B7", "#FFD700"] }, format: "## ### ## ##", sample: "501234567" }, { code: "NG", name: "Nigeria", dial: "+234", flag: { t: "v", c: ["#008751", "#ffffff", "#008751"] }, format: "### ### ####", sample: "8021234567" }, { code: "AR", name: "Argentina", dial: "+54", flag: { t: "h", c: ["#74ACDF", "#ffffff", "#74ACDF"] }, format: "## ####-####", sample: "1123456789" }, { code: "PL", name: "Poland", dial: "+48", flag: { t: "h2", c: ["#ffffff", "#DC143C"] }, format: "### ### ###", sample: "512345678" }, { code: "IE", name: "Ireland", dial: "+353", flag: { t: "v", c: ["#169B62", "#ffffff", "#FF883E"] }, format: "## ### ####", sample: "851234567" }, ]; /* Countries the preview cycles through, by ISO code. */ const LOOP = ["US", "JP", "DE", "FR", "BR"]; /* ------------------------------------------------------------------ */ /* Helpers */ /* ------------------------------------------------------------------ */ function capacity(format: string): number { let n = 0; for (const ch of format) if (ch === "#") n++; return n; } function formatPhone(format: string, digits: string): string { let out = ""; let di = 0; for (const ch of format) { if (ch === "#") { if (di < digits.length) { out += digits[di]; di++; } else break; } else if (di < digits.length) { out += ch; } else break; } return out; } /* Deterministic jitter so the auto-typing never feels mechanical. */ function jitter(i: number): number { return Math.abs(Math.sin((i + 1) * 127.1)); } /* ------------------------------------------------------------------ */ /* Blinking caret */ /* ------------------------------------------------------------------ */ function Caret() { return ( ); } /* ------------------------------------------------------------------ */ /* PhoneInput */ /* ------------------------------------------------------------------ */ export interface PhoneInputProps { /** Country list to choose from. */ countries?: Country[]; /** ISO code selected on first render (ignored when `autoplay` is set). */ defaultCode?: string; /** * ISO codes the component cycles through on a loop, switching country and * typing that country's sample number. Hovering pauses the loop and hands * control back to the user; leaving resumes it. */ autoplay?: string[]; className?: string; } export function PhoneInput({ countries = COUNTRIES, defaultCode = "US", autoplay, className, }: PhoneInputProps) { const autoplayOn = Array.isArray(autoplay) && autoplay.length > 0; const [selectedIdx, setSelectedIdx] = useState(() => { const code = autoplayOn ? autoplay![0] : defaultCode; const idx = countries.findIndex((c) => c.code === code); return idx < 0 ? 0 : idx; }); const [open, setOpen] = useState(false); const [query, setQuery] = useState(""); const [digits, setDigits] = useState(""); const [activeIdx, setActiveIdx] = useState(selectedIdx); const [fieldFocused, setFieldFocused] = useState(false); const [interacting, setInteracting] = useState(false); const pausedRef = useRef(false); const selected = countries[selectedIdx] ?? countries[0]; const cap = capacity(selected.format); const formatted = formatPhone(selected.format, digits); const placeholder = selected.format.replace(/#/g, "0"); /* ---- autoplay loop ------------------------------------------------ */ useEffect(() => { if (!autoplayOn) return; const codes = autoplay!; let cancelled = false; const timers: number[] = []; const wait = (ms: number) => new Promise((res) => { const t = window.setTimeout(res, ms); timers.push(t); }); /* Hold here while the user is hovering / interacting. */ const gate = async () => { while (!cancelled && pausedRef.current) await wait(180); }; const findIdx = (code: string) => { const i = countries.findIndex((c) => c.code === code); return i < 0 ? 0 : i; }; const typeDigits = async (sample: string) => { for (let k = 1; k <= sample.length; k++) { if (cancelled) return; setDigits(sample.slice(0, k)); await wait(68 + Math.round(jitter(k) * 62)); } }; const typeQuery = async (text: string) => { for (let k = 1; k <= text.length; k++) { if (cancelled) return; setQuery(text.slice(0, k)); await wait(56 + Math.round(jitter(k + 4) * 48)); } }; async function run() { let i = 0; while (!cancelled) { await gate(); if (cancelled) return; const curIdx = findIdx(codes[i % codes.length]); const nextIdx = findIdx(codes[(i + 1) % codes.length]); setSelectedIdx(curIdx); setActiveIdx(curIdx); setOpen(false); setQuery(""); setDigits(""); await wait(280); await typeDigits(countries[curIdx].sample); if (cancelled) return; await wait(1500); await gate(); if (cancelled) return; // Open the list and search for the next country. setOpen(true); setQuery(""); setActiveIdx(nextIdx); await wait(420); const term = countries[nextIdx].name.slice( 0, Math.min(5, countries[nextIdx].name.length) ); await typeQuery(term); if (cancelled) return; setActiveIdx(nextIdx); await wait(700); // Commit the selection. setSelectedIdx(nextIdx); setActiveIdx(nextIdx); setOpen(false); setQuery(""); setDigits(""); await wait(520); i++; } } run(); return () => { cancelled = true; timers.forEach((t) => clearTimeout(t)); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [autoplayOn, autoplay, countries]); /* ---- interactive handlers ---------------------------------------- */ function toggleOpen() { setOpen((o) => { const next = !o; if (next) { setQuery(""); setActiveIdx(selectedIdx); } return next; }); } function selectCountry(i: number) { setSelectedIdx(i); setActiveIdx(i); setOpen(false); setQuery(""); } function onNumberKeyDown(e: React.KeyboardEvent) { if (e.key === "Backspace") { e.preventDefault(); setDigits((d) => d.slice(0, -1)); return; } if (/^[0-9]$/.test(e.key)) { e.preventDefault(); setDigits((d) => (d.length >= cap ? d : d + e.key)); } } const q = query.trim().toLowerCase(); const filtered = countries .map((c, i) => ({ c, i })) .filter( ({ c }) => q === "" || c.name.toLowerCase().includes(q) || c.dial.includes(q) || c.code.toLowerCase().includes(q) ); const activeRing = open || fieldFocused || interacting; const showCaret = autoplayOn ? !open : fieldFocused; return (

{ pausedRef.current = true; setInteracting(true); }} onMouseLeave={() => { pausedRef.current = false; setInteracting(false); }} > {/* Field ---------------------------------------------------------- */}

{/* Country selector */}

{/* Number */}

setFieldFocused(true)} onBlur={() => setFieldFocused(false)} className="flex min-w-0 flex-1 cursor-text items-center px-3 outline-none" > {digits.length === 0 ? (

{showCaret && } {placeholder}

) : (

{formatted} {showCaret && }

)}

{/* Dropdown ------------------------------------------------------- */} {open && (

setQuery(e.target.value)} placeholder="Search countries" spellCheck={false} className="w-full bg-transparent text-sm text-white outline-none placeholder:text-white/30" />

)}

); } /* ------------------------------------------------------------------ */ /* Demo */ /* ------------------------------------------------------------------ */ export default function Demo() { return (

Add your phone

We'll text a code to confirm it's really you.

Phone number

Standard carrier rates may apply. Never shared.

); }

Phone Input

Add your phone