51: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"] 52: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"] 53:T4f63,"use client"; import * as React from "react"; import { AnimatePresence, MotionConfig, motion, useIsPresent, type HTMLMotionProps, } from "motion/react"; import { CheckIcon, ChevronDownIcon, SearchIcon, XIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { useControllableState } from "@/lib/use-controllable-state"; import { useListboxNavigation } from "@/lib/use-listbox-navigation"; export interface Country { /** ISO 3166-1 alpha-2 country code (e.g. "US") */ code: string; /** E.164 dial prefix, including the leading "+" */ dialCode: string; /** English country name */ name: string; /** Flag emoji */ flag: string; } /** Per-part class overrides, merged after the defaults with `cn`. */ export interface PhoneInputClassNames { /** The outer wrapper that positions the menu */ root?: string; /** The bordered field holding the country trigger and the number input */ field?: string; /** The country trigger segment */ trigger?: string; /** The number `` */ input?: string; /** The floating country menu panel */ content?: string; /** The search row, including its icon */ search?: string; /** The scrolling country list */ list?: string; /** Each country row */ item?: string; /** The empty-state message */ empty?: string; } export interface PhoneInputProps extends Omit< React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue" | "onChange" | "type" | "size" > { /** Phone number. Provide this to control the component. */ value?: string; /** Initial phone number when uncontrolled */ defaultValue?: string; /** Callback when the number or the selected country changes */ onValueChange?: (phone: string, country: Country) => void; /** ISO 3166-1 alpha-2 code of the initially selected country (default: "US") */ defaultCountry?: string; /** * Countries offered in the menu, in display order (default: `COUNTRIES`). * Pass a subset to restrict the list or reorder it to put common ones first. */ countries?: Country[]; /** Show the flag emoji beside the dial code (default: true) */ showFlags?: boolean; /** Accessible label for the field (default: "Phone number") */ label?: string; /** Max height of the scrolling country list, before it scrolls (default: "15rem") */ maxHeight?: number | string; /** Field size (default: "default") */ size?: "sm" | "default" | "lg"; /** Edge of the field the menu lines up with, in reading direction (default: "start") */ align?: "start" | "end"; /** * Preferred side for the menu (default: "bottom"). It flips to the other side * when there is not enough room in the viewport. */ side?: "top" | "bottom"; /** Placeholder for the country search field (default: "Search countries...") */ searchPlaceholder?: string; /** Content shown when the search matches nothing (default: "No countries found.") */ emptyMessage?: React.ReactNode; /** Per-part class overrides. `className` still targets the root. */ classNames?: PhoneInputClassNames; } const COUNTRIES: Country[] = [ { code: "US", dialCode: "+1", name: "United States", flag: "\u{1F1FA}\u{1F1F8}" }, { code: "GB", dialCode: "+44", name: "United Kingdom", flag: "\u{1F1EC}\u{1F1E7}" }, { code: "IN", dialCode: "+91", name: "India", flag: "\u{1F1EE}\u{1F1F3}" }, { code: "CA", dialCode: "+1", name: "Canada", flag: "\u{1F1E8}\u{1F1E6}" }, { code: "AU", dialCode: "+61", name: "Australia", flag: "\u{1F1E6}\u{1F1FA}" }, { code: "DE", dialCode: "+49", name: "Germany", flag: "\u{1F1E9}\u{1F1EA}" }, { code: "FR", dialCode: "+33", name: "France", flag: "\u{1F1EB}\u{1F1F7}" }, { code: "JP", dialCode: "+81", name: "Japan", flag: "\u{1F1EF}\u{1F1F5}" }, { code: "BR", dialCode: "+55", name: "Brazil", flag: "\u{1F1E7}\u{1F1F7}" }, { code: "CN", dialCode: "+86", name: "China", flag: "\u{1F1E8}\u{1F1F3}" }, { code: "RU", dialCode: "+7", name: "Russia", flag: "\u{1F1F7}\u{1F1FA}" }, { code: "KR", dialCode: "+82", name: "South Korea", flag: "\u{1F1F0}\u{1F1F7}" }, { code: "IT", dialCode: "+39", name: "Italy", flag: "\u{1F1EE}\u{1F1F9}" }, { code: "ES", dialCode: "+34", name: "Spain", flag: "\u{1F1EA}\u{1F1F8}" }, { code: "MX", dialCode: "+52", name: "Mexico", flag: "\u{1F1F2}\u{1F1FD}" }, { code: "NL", dialCode: "+31", name: "Netherlands", flag: "\u{1F1F3}\u{1F1F1}" }, { code: "SE", dialCode: "+46", name: "Sweden", flag: "\u{1F1F8}\u{1F1EA}" }, { code: "CH", dialCode: "+41", name: "Switzerland", flag: "\u{1F1E8}\u{1F1ED}" }, { code: "PL", dialCode: "+48", name: "Poland", flag: "\u{1F1F5}\u{1F1F1}" }, { code: "AR", dialCode: "+54", name: "Argentina", flag: "\u{1F1E6}\u{1F1F7}" }, { code: "ZA", dialCode: "+27", name: "South Africa", flag: "\u{1F1FF}\u{1F1E6}" }, { code: "NG", dialCode: "+234", name: "Nigeria", flag: "\u{1F1F3}\u{1F1EC}" }, { code: "EG", dialCode: "+20", name: "Egypt", flag: "\u{1F1EA}\u{1F1EC}" }, { code: "SA", dialCode: "+966", name: "Saudi Arabia", flag: "\u{1F1F8}\u{1F1E6}" }, { code: "AE", dialCode: "+971", name: "United Arab Emirates", flag: "\u{1F1E6}\u{1F1EA}" }, { code: "SG", dialCode: "+65", name: "Singapore", flag: "\u{1F1F8}\u{1F1EC}" }, { code: "MY", dialCode: "+60", name: "Malaysia", flag: "\u{1F1F2}\u{1F1FE}" }, { code: "TH", dialCode: "+66", name: "Thailand", flag: "\u{1F1F9}\u{1F1ED}" }, { code: "PH", dialCode: "+63", name: "Philippines", flag: "\u{1F1F5}\u{1F1ED}" }, { code: "ID", dialCode: "+62", name: "Indonesia", flag: "\u{1F1EE}\u{1F1E9}" }, { code: "VN", dialCode: "+84", name: "Vietnam", flag: "\u{1F1FB}\u{1F1F3}" }, { code: "TR", dialCode: "+90", name: "Turkey", flag: "\u{1F1F9}\u{1F1F7}" }, { code: "PK", dialCode: "+92", name: "Pakistan", flag: "\u{1F1F5}\u{1F1F0}" }, { code: "BD", dialCode: "+880", name: "Bangladesh", flag: "\u{1F1E7}\u{1F1E9}" }, { code: "KE", dialCode: "+254", name: "Kenya", flag: "\u{1F1F0}\u{1F1EA}" }, { code: "GH", dialCode: "+233", name: "Ghana", flag: "\u{1F1EC}\u{1F1ED}" }, { code: "ET", dialCode: "+251", name: "Ethiopia", flag: "\u{1F1EA}\u{1F1F9}" }, { code: "TZ", dialCode: "+255", name: "Tanzania", flag: "\u{1F1F9}\u{1F1FF}" }, { code: "IL", dialCode: "+972", name: "Israel", flag: "\u{1F1EE}\u{1F1F1}" }, { code: "HK", dialCode: "+852", name: "Hong Kong", flag: "\u{1F1ED}\u{1F1F0}" }, { code: "NZ", dialCode: "+64", name: "New Zealand", flag: "\u{1F1F3}\u{1F1FF}" }, { code: "IE", dialCode: "+353", name: "Ireland", flag: "\u{1F1EE}\u{1F1EA}" }, { code: "PT", dialCode: "+351", name: "Portugal", flag: "\u{1F1F5}\u{1F1F9}" }, { code: "CL", dialCode: "+56", name: "Chile", flag: "\u{1F1E8}\u{1F1F1}" }, { code: "CO", dialCode: "+57", name: "Colombia", flag: "\u{1F1E8}\u{1F1F4}" }, { code: "FI", dialCode: "+358", name: "Finland", flag: "\u{1F1EB}\u{1F1EE}" }, { code: "NO", dialCode: "+47", name: "Norway", flag: "\u{1F1F3}\u{1F1F4}" }, { code: "DK", dialCode: "+45", name: "Denmark", flag: "\u{1F1E9}\u{1F1F0}" }, { code: "AT", dialCode: "+43", name: "Austria", flag: "\u{1F1E6}\u{1F1F9}" }, { code: "BE", dialCode: "+32", name: "Belgium", flag: "\u{1F1E7}\u{1F1EA}" }, ]; /** * The menu panel. While it plays its exit animation it is still mounted, so it * leaves the accessibility tree first: a closing menu is not a menu. */ const MenuPanel = React.forwardRef>( function MenuPanel(props, ref) { const isPresent = useIsPresent(); return ( ); }, ); const FIELD_SIZES = { sm: "h-8", default: "h-9", lg: "h-10", } as const; const SEGMENT_SIZES = { sm: "gap-1 ps-2.5 pe-1.5", default: "gap-1.5 ps-3 pe-2", lg: "gap-1.5 ps-3.5 pe-2.5", } as const; const INPUT_SIZES = { sm: "px-2.5", default: "px-3", lg: "px-3.5", } as const; function getCountryByCode(code: string, list: Country[] = COUNTRIES): Country | undefined { return list.find((c) => c.code === code.toUpperCase()); } export const PhoneInput = React.forwardRef(function PhoneInput( { value, defaultValue, onValueChange, defaultCountry = "US", countries = COUNTRIES, placeholder = "Phone number", disabled = false, className, showFlags = true, label = "Phone number", maxHeight = "15rem", size = "default", align = "start", side: preferredSide = "bottom", searchPlaceholder = "Search countries...", emptyMessage = "No countries found.", classNames, ...rest }, forwardedRef, ) { const [selectedCountry, setSelectedCountry] = React.useState( () => getCountryByCode(defaultCountry, countries) ?? countries[0] ?? COUNTRIES[0], ); const [inputValue, setInputValue] = useControllableState(value, defaultValue ?? "", undefined); const [open, setOpen] = React.useState(false); const [search, setSearch] = React.useState(""); const [side, setSide] = React.useState(preferredSide); const ref = React.useRef(null); const inputRef = React.useRef(null); // The country search box needs its own ref. Sharing `inputRef` meant the search // field overwrote it whenever the dropdown opened, which pointed the forwarded // ref at the wrong element and sent focus to a node that was about to unmount. const searchRef = React.useRef(null); const triggerRef = React.useRef(null); const popupRef = React.useRef(null); React.useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement); const query = search.trim().toLowerCase(); const filtered = countries.filter( (c) => c.name.toLowerCase().includes(query) || c.dialCode.includes(query) || c.code.toLowerCase().includes(query), ); const nav = useListboxNavigation({ count: filtered.length, open, // Land on the current selection when the popup opens. initialIndex: filtered.findIndex((c) => c.code === selectedCountry.code), onClose: () => { setOpen(false); setSearch(""); }, onOpen: () => !disabled && setOpen(true), // Picking a country is half the task — typing the number is the other // half, so focus lands in the number field instead of back on the trigger. restoreFocusOnSelect: false, onSelect: (index) => { const picked = filtered[index]; if (!picked) return; setSelectedCountry(picked); onValueChange?.(inputValue, picked); inputRef.current?.focus(); }, triggerRef: () => triggerRef.current, }); React.useEffect(() => { function handleClickOutside(e: MouseEvent) { if (ref.current && !ref.current.contains(e.target as Node)) { setOpen(false); setSearch(""); } } document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); React.useEffect(() => { if (open) searchRef.current?.focus(); }, [open]); // Flip to the other side when the preferred one has no room. Measured before // paint, so the menu never flashes on the wrong side. React.useLayoutEffect(() => { if (!open) return; const field = ref.current; const popup = popupRef.current; if (!field || !popup) return; const rect = field.getBoundingClientRect(); const needed = popup.offsetHeight + 8; const below = window.innerHeight - rect.bottom; const above = rect.top; if (preferredSide === "bottom" && below < needed && above > below) setSide("top"); else if (preferredSide === "top" && above < needed && below > above) setSide("bottom"); else setSide(preferredSide); }, [open, preferredSide]); const handleInputChange = (e: React.ChangeEvent) => { const newValue = e.target.value; setInputValue(newValue); onValueChange?.(newValue, selectedCountry); }; const handleKeyDown = (event: React.KeyboardEvent) => { // While the menu is open the number field is still focusable: arrows and // Home / End belong to the caret there, and Enter is not a request to pick // a country. Escape and everything else keep going to the listbox. if ( open && event.target === inputRef.current && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Home" || event.key === "End" || event.key === "Enter") ) { return; } nav.onKeyDown(event); }; const offset = side === "bottom" ? -4 : 4; return (

{open && (

{ setSearch(e.target.value); nav.resetActive(); }} {...nav.comboboxProps} className="h-10 w-full min-w-0 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground" /> {search && ( )}

{/* The listbox owns the options only — the search field above sits outside it, per ARIA. It scrolls on its own: the page never does. */} )}

); }); export { COUNTRIES }; 50:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}],["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@babelize","registryDependencies":["https://elements.babelize.co/r/use-controllable-state.json","https://elements.babelize.co/r/use-listbox-navigation.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/phone-input.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]