50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3475,"use client"; import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent, } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Check, ChevronDown, Search, AlertCircle } from "lucide-react"; import { cn } from "@/lib/utils"; export interface Country { iso: string; name: string; code: string; /** Maximum number of digits accepted for the local number. */ max: number; } export const COUNTRIES: Country[] = [ { iso: "US", name: "United States", code: "+1", max: 10 }, { iso: "CA", name: "Canada", code: "+1", max: 10 }, { iso: "MX", name: "Mexico", code: "+52", max: 10 }, { iso: "GB", name: "United Kingdom", code: "+44", max: 10 }, { iso: "FR", name: "France", code: "+33", max: 9 }, { iso: "DE", name: "Germany", code: "+49", max: 11 }, { iso: "IT", name: "Italy", code: "+39", max: 10 }, { iso: "ES", name: "Spain", code: "+34", max: 9 }, { iso: "NL", name: "Netherlands", code: "+31", max: 9 }, { iso: "SE", name: "Sweden", code: "+46", max: 9 }, { iso: "IE", name: "Ireland", code: "+353", max: 9 }, { iso: "PT", name: "Portugal", code: "+351", max: 9 }, { iso: "IN", name: "India", code: "+91", max: 10 }, { iso: "CN", name: "China", code: "+86", max: 11 }, { iso: "JP", name: "Japan", code: "+81", max: 10 }, { iso: "KR", name: "South Korea", code: "+82", max: 10 }, { iso: "SG", name: "Singapore", code: "+65", max: 8 }, { iso: "HK", name: "Hong Kong", code: "+852", max: 8 }, { iso: "AU", name: "Australia", code: "+61", max: 9 }, { iso: "NZ", name: "New Zealand", code: "+64", max: 9 }, { iso: "BR", name: "Brazil", code: "+55", max: 11 }, { iso: "AR", name: "Argentina", code: "+54", max: 10 }, { iso: "AE", name: "United Arab Emirates", code: "+971", max: 9 }, { iso: "SA", name: "Saudi Arabia", code: "+966", max: 9 }, { iso: "IL", name: "Israel", code: "+972", max: 9 }, { iso: "EG", name: "Egypt", code: "+20", max: 10 }, { iso: "ZA", name: "South Africa", code: "+27", max: 9 }, { iso: "TR", name: "Turkey", code: "+90", max: 10 }, { iso: "RU", name: "Russia", code: "+7", max: 10 }, ]; /** ISO 3166-1 alpha-2 → flag emoji via regional indicator symbols. */ function flagFromIso(iso: string): string { return iso .toUpperCase() .split("") .map((c) => String.fromCodePoint(127397 + c.charCodeAt(0))) .join(""); } /** Insert a space every 3 digits. Lightweight visual grouping that works for most locales. */ function formatDigits(digits: string): string { if (!digits) return ""; const groups: string[] = []; for (let i = 0; i < digits.length; i += 3) { groups.push(digits.slice(i, i + 3)); } return groups.join(" "); } export interface PhoneInputValue { iso: string; code: string; number: string; isValid: boolean; } export interface PhoneInputProps { /** ISO 3166-1 alpha-2 for the initially selected country. */ defaultCountry?: string; placeholder?: string; label?: string; /** Minimum digits required for a number to be considered valid. */ minDigits?: number; onChange?: (value: PhoneInputValue) => void; className?: string; } export function PhoneInput({ defaultCountry = "US", placeholder = "Phone number", label, minDigits = 7, onChange, className, }: PhoneInputProps) { const [selectedIso, setSelectedIso] = useState(defaultCountry); const [open, setOpen] = useState(false); const [search, setSearch] = useState(""); const [digits, setDigits] = useState(""); const [touched, setTouched] = useState(false); const [focused, setFocused] = useState(false); const containerRef = useRef(null); const phoneInputRef = useRef(null); const searchInputRef = useRef(null); const selected = useMemo( () => COUNTRIES.find((c) => c.iso === selectedIso) ?? COUNTRIES[0], [selectedIso], ); const isValid = digits.length >= minDigits; const hasError = touched && !focused && digits.length > 0 && !isValid; const filtered = useMemo(() => { const q = search.trim().toLowerCase(); if (!q) return COUNTRIES; return COUNTRIES.filter( (c) => c.name.toLowerCase().includes(q) || c.code.includes(q) || c.iso.toLowerCase().includes(q), ); }, [search]); // Emit changes useEffect(() => { onChange?.({ iso: selected.iso, code: selected.code, number: digits, isValid, }); }, [selected.iso, selected.code, digits, isValid, onChange]); // Outside click closes dropdown useEffect(() => { if (!open) return; const handler = (e: MouseEvent) => { if (!containerRef.current?.contains(e.target as Node)) { setOpen(false); setSearch(""); } }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [open]); // Escape closes dropdown useEffect(() => { if (!open) return; const handler = (e: globalThis.KeyboardEvent) => { if (e.key === "Escape") { setOpen(false); setSearch(""); } }; document.addEventListener("keydown", handler); return () => document.removeEventListener("keydown", handler); }, [open]); // Autofocus search when dropdown opens useEffect(() => { if (open) { const id = requestAnimationFrame(() => searchInputRef.current?.focus()); return () => cancelAnimationFrame(id); } }, [open]); const handleDigitsChange = useCallback( (e: ChangeEvent) => { const raw = e.target.value.replace(/\D/g, ""); setDigits(raw.slice(0, selected.max)); }, [selected.max], ); const handleSelect = useCallback((iso: string) => { setSelectedIso(iso); setOpen(false); setSearch(""); requestAnimationFrame(() => phoneInputRef.current?.focus()); }, []); const handleTriggerKey = (e: KeyboardEvent) => { if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen(true); } }; // Border / glow color reflects state (focus → primary, error → red, idle → gray) const ringColor = focused ? "rgb(99,102,241)" : hasError ? "rgb(239,68,68)" : "rgb(229,231,235)"; const ringShadow = focused ? "0 0 0 4px rgba(99,102,241,0.14), 0 1px 2px rgba(0,0,0,0.03)" : hasError ? "0 0 0 4px rgba(239,68,68,0.10)" : "0 1px 2px rgba(0,0,0,0.03)"; const surfaceBg = focused ? "rgb(255,255,255)" : "rgb(250,250,250)"; return (

{label && ( {label} )} {/* Country selector trigger */} {/* Phone number input */}

setFocused(true)} onBlur={() => { setFocused(false); setTouched(true); }} placeholder={placeholder} aria-label={label ?? "Phone number"} aria-invalid={hasError || undefined} aria-describedby={hasError ? "phone-input-error" : undefined} className="h-12 w-full bg-transparent px-3 pr-10 text-sm text-gray-900 outline-none placeholder:text-gray-400" /> {/* Validity check icon — only shown when valid and not focused */} {isValid && !focused && ( )}

{/* Error message */} {hasError && ( That number looks too short — please add the remaining digits. )} {/* Country dropdown */} {open && ( )}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react"}]]}]}]]}],["$","$L50",null,{"namespace":"@nexus-labs","registryDependencies":["https://www.nexus-ui.com/api/registry/nexus-font","utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"next-ui/phone-input/index.ts","content":"export { PhoneInput } from \"./phone-input\";\nexport type { PhoneInputProps, PhoneInputValue, Country } from \"./phone-input\";\n","type":"registry:lib","target":"components/phone-input/index.ts"},{"path":"next-ui/phone-input/phone-input.tsx","content":"$52","type":"registry:component","target":"components/phone-input/phone-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]