@evolve.ui/core-components 1.0.0

package/PhoneInput-B5pkpkdt.mjs

@@ -0,0 +1,398 @@
+import { t as nodeEnv } from "./nodeEnv-B4v61vkJ.mjs";
+import { CaretDown, CaretUp, Close } from "./Icons.mjs";
+import { BodyPrimary } from "./Typography/Text.mjs";
+import { t as effectEventListener } from "./effectEventListener-WApakaup.mjs";
+import { FormLabel, extractFormLabelProps } from "./formLabel.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import countryMapping from "i18n-iso-countries";
+import en from "i18n-iso-countries/langs/en.json" with { type: "json" };
+import ReactCountryFlag from "react-country-flag";
+import { getCountries, getCountryCallingCode, isPossiblePhoneNumber, isSupportedCountry, isValidPhoneNumber } from "react-phone-number-input";
+import RPhoneInput from "react-phone-number-input/input";
+//#region src/PhoneInput/useDropdownLogic.tsx
+const useDropdownLogic = ({ country, countryMenuOpen, disabled, setCountry, setCountryMenuOpen }) => {
+	const keyboardNavigatedCountryIndex = useRef(-1);
+	const dropdownMenuRef = useRef(null);
+	const [countrySearch, setCountrySearch] = useState("");
+	const searchInputRef = useRef(null);
+	useEffect(() => {
+		if (countryMenuOpen) if (disabled) setCountryMenuOpen(false);
+		else {
+			setTimeout(() => {
+				searchInputRef.current?.focus();
+			}, 0);
+			return effectEventListener(window, "click", () => {
+				setCountryMenuOpen(false);
+			});
+		}
+		else {
+			keyboardNavigatedCountryIndex.current = -1;
+			setCountrySearch("");
+		}
+	}, [
+		countryMenuOpen,
+		disabled,
+		keyboardNavigatedCountryIndex,
+		setCountryMenuOpen
+	]);
+	const onClick = useCallback((e, index) => {
+		if (!disabled) if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {
+			const target = dropdownMenuRef.current.children[index !== void 0 ? index : keyboardNavigatedCountryIndex.current];
+			if (target?.dataset.country) setCountry(target.dataset.country);
+			else setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);
+		} else setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);
+		e.stopPropagation();
+	}, [
+		disabled,
+		setCountry,
+		setCountryMenuOpen
+	]);
+	const dropdownMenuRefFunc = useCallback((ref) => {
+		if (ref) {
+			dropdownMenuRef.current = ref;
+			setTimeout(() => {
+				const possibleTarget = ref.querySelector(`[data-country=${country}]`);
+				if (possibleTarget) {
+					possibleTarget.scrollIntoView({
+						behavior: "instant",
+						block: "center"
+					});
+					for (let i = 0; i < ref.children.length; i++) if (ref.children[i].dataset.country === country) {
+						keyboardNavigatedCountryIndex.current = i;
+						break;
+					}
+				}
+			}, 0);
+		}
+	}, [country]);
+	const onKeydown = useCallback((e) => {
+		if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {
+			const children = dropdownMenuRef.current.children;
+			if (children[keyboardNavigatedCountryIndex.current]?.classList.contains("keyboard_hover")) children[keyboardNavigatedCountryIndex.current].classList.remove("keyboard_hover");
+			switch (e.key) {
+				case "ArrowDown":
+					if (keyboardNavigatedCountryIndex.current < children.length - 1) keyboardNavigatedCountryIndex.current += 1;
+					break;
+				case "ArrowUp":
+					if (keyboardNavigatedCountryIndex.current > 0) keyboardNavigatedCountryIndex.current -= 1;
+					break;
+				default:
+					const searchKey = e.key;
+					const keyIndex = Array.from(children).findIndex((child) => {
+						const childText = child.textContent;
+						if (childText) return childText[0].toLowerCase().includes(searchKey.toLowerCase());
+						return false;
+					});
+					if (keyIndex !== -1) {
+						children[keyIndex].classList.add("keyboard_hover");
+						children[keyIndex].scrollIntoView({
+							behavior: "instant",
+							block: "center"
+						});
+					}
+					break;
+			}
+		}
+	}, [dropdownMenuRef, keyboardNavigatedCountryIndex]);
+	useEffect(() => {
+		if (countryMenuOpen) return effectEventListener(document, "keydown", onKeydown);
+	}, [countryMenuOpen, onKeydown]);
+	return {
+		countrySearch,
+		dropdownMenuRefFunc,
+		onClick,
+		searchInputRef,
+		setCountrySearch
+	};
+};
+//#endregion
+//#region src/PhoneInput/PhoneInput.tsx
+countryMapping.registerLocale(en);
+const countries = getCountries().map((code) => ({
+	code,
+	name: countryMapping.getName(code, "en")
+})).filter((country) => Boolean(country.name)).sort((a, b) => a.name.localeCompare(b.name));
+const PhoneInput = (unfilteredProps) => {
+	const [formLabelProps, { disabled, dropdownPosition = "below", initialCountry = "US", onCountryCallingCodeChange, onCountryChange, onPhoneNumberChange, onValidChange, placeholder = "Enter Number", showErrorIfInvalid, usePortalMenu, validation = "strict", ...props }] = extractFormLabelProps(unfilteredProps);
+	if (nodeEnv === "development") {
+		if (!isSupportedCountry(initialCountry)) throw new Error(`Country ${initialCountry} is not supported`);
+	}
+	const [country, defaultSetCountry] = useState(initialCountry);
+	const [countryMenuOpen, setCountryMenuOpen] = useState(false);
+	const countryCallingCode = useMemo(() => {
+		const countryCallingCode = getCountryCallingCode(country);
+		onCountryCallingCodeChange?.(countryCallingCode);
+		return countryCallingCode;
+	}, [country, onCountryCallingCodeChange]);
+	const [phoneNumber, defaultSetPhoneNumber] = useState(useMemo(() => {
+		if (!props.initialPhoneNumber) return "";
+		if (!props.initialPhoneNumber.startsWith("+")) return `+${countryCallingCode}${props.initialPhoneNumber}`;
+		return props.initialPhoneNumber;
+	}, []));
+	const [isValid, setIsValid] = useState(false);
+	const isFormattingNumber = useRef(false);
+	const setPhoneNumber = useCallback((value = "") => {
+		if (isFormattingNumber.current) return;
+		isFormattingNumber.current = true;
+		defaultSetPhoneNumber(value);
+		onPhoneNumberChange?.(value);
+		setCountryMenuOpen(false);
+		let valid;
+		if (validation === "strict") valid = isValidPhoneNumber(value);
+		else valid = isPossiblePhoneNumber(value);
+		onValidChange?.(valid);
+		if (formLabelProps.hasError) valid = false;
+		else if (!showErrorIfInvalid) valid = true;
+		setIsValid(valid);
+		setTimeout(() => {
+			isFormattingNumber.current = false;
+		}, 0);
+	}, [
+		formLabelProps.hasError,
+		onPhoneNumberChange,
+		onValidChange,
+		showErrorIfInvalid,
+		validation
+	]);
+	const setCountry = useCallback((value) => {
+		defaultSetCountry(value);
+		onCountryChange?.(value);
+		setPhoneNumber("");
+		inputRef.current?.focus();
+	}, [onCountryChange, setPhoneNumber]);
+	const { countrySearch, dropdownMenuRefFunc, onClick, searchInputRef, setCountrySearch } = useDropdownLogic({
+		country,
+		countryMenuOpen,
+		disabled,
+		setCountry,
+		setCountryMenuOpen
+	});
+	const hasError = formLabelProps.hasError ?? !isValid;
+	const filteredCountries = useMemo(() => {
+		if (!countrySearch.trim()) return countries;
+		const searchTerm = countrySearch.toLowerCase();
+		return countries.filter(({ code, name }) => {
+			const countryName = name?.toLowerCase() || "";
+			const callingCode = getCountryCallingCode(code);
+			return countryName.includes(searchTerm) || callingCode.includes(searchTerm);
+		});
+	}, [countrySearch]);
+	const countryList = useMemo(() => filteredCountries.map(({ code, name }, index) => {
+		const isSelected = code === country;
+		return /* @__PURE__ */ jsxs("div", {
+			"aria-label": `Select ${name} / +${getCountryCallingCode(code)}`,
+			"aria-selected": isSelected,
+			className: cn("hui-text-body-primary flex h-[42px] min-h-[42px] w-full cursor-pointer items-center px-xs py-xs", "hover:bg-background-hover", "keyboard_hover:bg-background-hover", { "keyboard_hover:bg-background-inverse keyboard_hover:text-text-inverse cursor-default bg-background-inverse text-text-inverse hover:bg-background-inverse hover:text-text-inverse": isSelected }),
+			"data-country": code,
+			onClick: (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+				onClick(e, index);
+			},
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.stopPropagation();
+					e.preventDefault();
+					setCountry(code);
+					setCountryMenuOpen(false);
+				}
+			},
+			onTouchMove: (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+			},
+			onTouchStart: (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+			},
+			role: "option",
+			tabIndex: 0,
+			children: [
+				/* @__PURE__ */ jsx(ReactCountryFlag, {
+					className: "mr-sm !w-md select-none [-webkit-user-drag:none]",
+					countryCode: code,
+					role: "none",
+					svg: true
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "overflow-hidden overflow-ellipsis whitespace-nowrap pr-2xs",
+					children: name
+				}),
+				"(+",
+				getCountryCallingCode(code),
+				")"
+			]
+		}, code);
+	}), [
+		onClick,
+		country,
+		setCountry,
+		setCountryMenuOpen,
+		filteredCountries
+	]);
+	const inputRef = useRef(null);
+	const inputContainerRef = useRef(null);
+	const inputRowClasses = cn("relative flex w-full items-center rounded-input border border-border-secondary px-xs py-xs", {
+		"border-border-critical": hasError && !countryMenuOpen && !disabled,
+		"border-border-disabled bg-background-disabled": disabled,
+		"border-border-primary": countryMenuOpen && !disabled,
+		"focus-within:border-border-selected hover:border-border-hover": !disabled && !countryMenuOpen && !hasError
+	});
+	const [portalPosition, setPortalPosition] = useState(null);
+	useMemo(() => {
+		if (countryMenuOpen && usePortalMenu && inputContainerRef.current) {
+			const rect = inputContainerRef.current.getBoundingClientRect();
+			setPortalPosition({
+				left: rect.left + window.scrollX,
+				top: rect.bottom + window.scrollY + 4,
+				width: rect.width
+			});
+		} else setPortalPosition(null);
+	}, [countryMenuOpen, usePortalMenu]);
+	const countryDropdownContent = /* @__PURE__ */ jsxs("div", {
+		"aria-label": "Country list",
+		className: cn("flex max-h-[226px] flex-col bg-background-primary py-[4px]", "rounded-input border border-border-secondary shadow-03", {
+			"absolute left-0 right-0 z-[1]": !usePortalMenu,
+			"bottom-full mb-[4px]": dropdownPosition === "above" && !usePortalMenu,
+			"fixed z-[11111]": usePortalMenu,
+			"top-full mt-[4px]": dropdownPosition === "below" && !usePortalMenu
+		}),
+		role: "listbox",
+		style: usePortalMenu && portalPosition ? {
+			left: portalPosition.left,
+			top: portalPosition.top,
+			width: portalPosition.width
+		} : usePortalMenu ? {
+			maxWidth: "400px",
+			minWidth: "300px"
+		} : void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "px-xs pb-xs",
+			children: /* @__PURE__ */ jsx("input", {
+				"aria-label": "Search countries",
+				className: "rounded w-full border border-border-secondary bg-background-primary px-xs py-2xs !text-[16px] text-sm text-text-primary placeholder:text-[16px] placeholder:text-text-inactive focus:border-border-selected focus:outline-none",
+				onBlur: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+				},
+				onChange: (e) => setCountrySearch(e.target.value),
+				onClick: (e) => e.stopPropagation(),
+				onKeyDown: (e) => {
+					if (e.key === "Enter" && filteredCountries.length > 0) {
+						e.preventDefault();
+						e.stopPropagation();
+						setCountry(filteredCountries[0].code);
+						setCountryMenuOpen(false);
+					}
+				},
+				onTouchStart: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					searchInputRef.current?.blur();
+				},
+				placeholder: "Search countries...",
+				ref: searchInputRef,
+				type: "text",
+				value: countrySearch
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-y-auto overflow-x-hidden",
+			ref: dropdownMenuRefFunc,
+			children: countryList
+		})]
+	});
+	return /* @__PURE__ */ jsx(FormLabel, {
+		...formLabelProps,
+		hasError,
+		children: /* @__PURE__ */ jsxs("div", {
+			"aria-label": "Phone input",
+			className: inputRowClasses,
+			ref: inputContainerRef,
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					"aria-label": "Select country",
+					className: cn("flex cursor-pointer select-none items-center border-none bg-transparent p-0", "hui-focus-visible-outline", { "bg-background-disabled [&>img]:opacity-40": disabled }),
+					onClick: (e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						onClick(e);
+					},
+					tabIndex: 0,
+					type: "button",
+					children: [/* @__PURE__ */ jsx(ReactCountryFlag, {
+						className: "!w-md select-none [-webkit-user-drag:none]",
+						countryCode: country,
+						role: "none",
+						svg: true
+					}), /* @__PURE__ */ jsx("div", {
+						className: "px-xs",
+						children: countryMenuOpen ? /* @__PURE__ */ jsx(CaretUp, {
+							color: disabled ? "disabled" : "primary",
+							onClick: (e) => {
+								e.stopPropagation();
+								e.preventDefault();
+								onClick(e);
+							},
+							size: "xs"
+						}) : /* @__PURE__ */ jsx(CaretDown, {
+							color: disabled ? "disabled" : "primary",
+							onClick: (e) => {
+								e.stopPropagation();
+								e.preventDefault();
+								onClick(e);
+							},
+							size: "xs"
+						})
+					})]
+				}),
+				countryMenuOpen && (usePortalMenu && typeof document !== "undefined" ? createPortal(countryDropdownContent, document.getElementById("hui-modal-target") || document.body) : countryDropdownContent),
+				/* @__PURE__ */ jsx("div", { className: cn("mr-xs h-sm border-r border-border-secondary", { "border-border-disabled": disabled }) }),
+				/* @__PURE__ */ jsxs(BodyPrimary, {
+					className: "pr-xs",
+					color: disabled ? "disabled" : "primary",
+					children: ["+", countryCallingCode]
+				}),
+				/* @__PURE__ */ jsx(RPhoneInput, {
+					"aria-label": "Phone number",
+					className: cn("hui-text-body-primary flex-1 border-none bg-transparent outline-none", "placeholder:text-text-inactive", { "bg-background-disabled text-text-disabled placeholder:text-text-disabled": disabled }),
+					country,
+					disabled,
+					onBlur: () => {
+						props.onBlur?.();
+					},
+					onChange: setPhoneNumber,
+					onFocus: () => {
+						setCountryMenuOpen(false);
+						props.onFocus?.();
+					},
+					placeholder,
+					ref: inputRef,
+					value: phoneNumber
+				}),
+				phoneNumber && phoneNumber.length > 0 && /* @__PURE__ */ jsx("button", {
+					"aria-label": "Clear phone number",
+					className: cn("hui-focus-visible-outline ml-xs flex cursor-pointer items-center border-none bg-transparent p-0", { "bg-background-disabled": disabled }),
+					disabled,
+					onClick: (e) => {
+						e.stopPropagation();
+						e.preventDefault();
+						setPhoneNumber("");
+						inputRef.current?.focus();
+					},
+					tabIndex: 0,
+					children: /* @__PURE__ */ jsx(Close, {
+						color: disabled ? "disabled" : "primary",
+						size: "sm"
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { PhoneInput as t };
+
+//# sourceMappingURL=PhoneInput-B5pkpkdt.mjs.map

package/PhoneInput-B5pkpkdt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput-B5pkpkdt.mjs","names":[],"sources":["../src/PhoneInput/useDropdownLogic.tsx","../src/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\nimport { Country } from 'react-phone-number-input';\n\nimport { effectEventListener } from '../utils/effectEventListener';\n\nexport const useDropdownLogic = ({\n    country,\n    countryMenuOpen,\n    disabled,\n    setCountry,\n    setCountryMenuOpen,\n}: {\n    country: Country;\n    countryMenuOpen: boolean;\n    disabled?: boolean;\n    setCountry: (value: Country) => void;\n    setCountryMenuOpen: Dispatch<SetStateAction<boolean>>;\n}) => {\n    const keyboardNavigatedCountryIndex = useRef(-1);\n    const dropdownMenuRef = useRef<HTMLElement | null>(null);\n    const [countrySearch, setCountrySearch] = useState('');\n    const searchInputRef = useRef<HTMLInputElement | null>(null);\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            if (disabled) {\n                setCountryMenuOpen(false);\n            } else {\n                // Focus the search input when dropdown opens\n                setTimeout(() => {\n                    searchInputRef.current?.focus();\n                }, 0);\n\n                return effectEventListener(window, 'click', () => {\n                    setCountryMenuOpen(false);\n                });\n            }\n        } else {\n            keyboardNavigatedCountryIndex.current = -1;\n            // Clear search when dropdown closes\n            setCountrySearch('');\n        }\n        return undefined;\n    }, [countryMenuOpen, disabled, keyboardNavigatedCountryIndex, setCountryMenuOpen]);\n\n    const onClick = useCallback(\n        (e: React.MouseEvent, index?: number) => {\n            if (!disabled) {\n                if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                    // Same stale-index hazard as onKeydown: fall back to toggling the menu\n                    // when the tracked index no longer exists in the (filtered) list.\n                    const target = dropdownMenuRef.current.children[\n                        index !== undefined ? index : keyboardNavigatedCountryIndex.current\n                    ] as HTMLElement | undefined;\n\n                    if (target?.dataset.country) {\n                        setCountry(target.dataset.country as Country);\n                    } else {\n                        setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                    }\n                } else {\n                    setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                }\n            }\n            e.stopPropagation();\n        },\n        [disabled, setCountry, setCountryMenuOpen]\n    );\n\n    const dropdownMenuRefFunc = useCallback(\n        (ref: HTMLDivElement | null) => {\n            if (ref) {\n                dropdownMenuRef.current = ref;\n\n                // Use setTimeout to ensure the DOM is fully rendered\n                setTimeout(() => {\n                    const possibleTarget = ref.querySelector(`[data-country=${country}]`);\n\n                    if (possibleTarget) {\n                        const target = possibleTarget as HTMLElement;\n\n                        // Use scrollIntoView to properly center the selected country\n                        target.scrollIntoView({\n                            behavior: 'instant',\n                            block: 'center',\n                        });\n\n                        // Set keyboard navigation index\n                        for (let i = 0; i < ref.children.length; i++) {\n                            if ((ref.children[i] as HTMLElement).dataset.country === country) {\n                                keyboardNavigatedCountryIndex.current = i;\n                                break;\n                            }\n                        }\n                    }\n                }, 0);\n            }\n        },\n        [country]\n    );\n\n    const onKeydown = useCallback<EventListener>(\n        (e: Event) => {\n            if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                const children = dropdownMenuRef.current.children;\n\n                // The index can go stale (out of bounds) after the search input filters the\n                // list — hammer crashes uncaught here; guard instead of indexing blindly.\n                if (children[keyboardNavigatedCountryIndex.current]?.classList.contains('keyboard_hover')) {\n                    children[keyboardNavigatedCountryIndex.current].classList.remove('keyboard_hover');\n                }\n\n                switch ((e as KeyboardEvent).key) {\n                    case 'ArrowDown':\n                        if (keyboardNavigatedCountryIndex.current < children.length - 1) {\n                            keyboardNavigatedCountryIndex.current += 1;\n                        }\n                        break;\n                    case 'ArrowUp':\n                        if (keyboardNavigatedCountryIndex.current > 0) {\n                            keyboardNavigatedCountryIndex.current -= 1;\n                        }\n                        break;\n                    default:\n                        const searchKey = (e as KeyboardEvent).key;\n\n                        const keyIndex = Array.from(children).findIndex((child) => {\n                            const childText = (child as HTMLElement).textContent;\n                            if (childText) {\n                                return childText[0].toLowerCase().includes(searchKey.toLowerCase());\n                            }\n                            return false;\n                        });\n\n                        if (keyIndex !== -1) {\n                            children[keyIndex].classList.add('keyboard_hover');\n                            children[keyIndex].scrollIntoView({\n                                behavior: 'instant',\n                                block: 'center',\n                            });\n                        }\n                        break;\n                }\n            }\n        },\n        [dropdownMenuRef, keyboardNavigatedCountryIndex]\n    );\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            return effectEventListener(document, 'keydown', onKeydown);\n        }\n        return undefined;\n    }, [countryMenuOpen, onKeydown]);\n\n    return {\n        countrySearch,\n        dropdownMenuRefFunc,\n        onClick,\n        searchInputRef,\n        setCountrySearch,\n    };\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport countryMapping from 'i18n-iso-countries';\n// The import attribute keeps the emitted ESM valid under raw Node (bundlers accept it too)\nimport en from 'i18n-iso-countries/langs/en.json' with { type: 'json' };\nimport { Dispatch, SetStateAction, useCallback, useMemo, useRef, useState } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\nimport { createPortal } from 'react-dom';\nimport {\n    Country,\n    getCountries,\n    getCountryCallingCode,\n    isPossiblePhoneNumber,\n    isSupportedCountry,\n    isValidPhoneNumber,\n} from 'react-phone-number-input';\nimport RPhoneInput from 'react-phone-number-input/input';\n\nimport { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';\nimport { CaretDown, CaretUp, Close } from '../Icons';\nimport { BodyPrimary } from '../Typography/Text/Text';\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { useDropdownLogic } from './useDropdownLogic';\n\ncountryMapping.registerLocale(en);\n\nconst countries = getCountries()\n    .map((code) => ({ code, name: countryMapping.getName(code, 'en') }))\n    .filter((country) => Boolean(country.name))\n    .sort((a, b) => (a.name as string).localeCompare(b.name as string));\n\ntype Props = {\n    /**\n     * Position of the country dropdown relative to the input.\n     * @default 'below'\n     */\n    dropdownPosition?: 'above' | 'below';\n    /**\n     * The initial country. (Decides the country calling code)\n     */\n    initialCountry?: Country;\n    /**\n     * The initial phone number. (The bit after the country calling code)\n     */\n    initialPhoneNumber?: string;\n    /**\n     * Optional callback for when the input loses focus.\n     */\n    onBlur?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the country calling code.\n     */\n    onCountryCallingCodeChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<Country>` that indicates whether the phone number is valid.\n     */\n    onCountryChange?: Dispatch<SetStateAction<Country>>;\n    /**\n     * Optional callback for when the input gains focus.\n     */\n    onFocus?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the phone number.\n     */\n    onPhoneNumberChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<boolean>` that indicates whether the phone number is valid.\n     */\n    onValidChange?: Dispatch<SetStateAction<boolean>>;\n    placeholder?: string;\n    /**\n     * Whether to show the invalid state.\n     * This is so you can control the invalid visual from outside the component.\n     * Perfect for after trying to submit a form.\n     *\n     * To force an error state use `hasError`\n     */\n    showErrorIfInvalid?: boolean;\n    /**\n     * Position the country dropdown menu absolutely, relative to <body />.\n     * Useful in places like modals where the menu may get cut off\n     */\n    usePortalMenu?: boolean;\n    /**\n     * The validation mode to use.\n     * - `strict`: The phone number must be valid. (Follows certain country rules like don't start with 0)\n     * - `loose`: The phone number must be possible. (Only checks number of digits)\n     *\n     * @default 'strict'\n     */\n    validation?: 'loose' | 'strict';\n} & FormLabelProps;\n\nexport const PhoneInput = (unfilteredProps: Props) => {\n    const [\n        formLabelProps,\n        {\n            disabled,\n            dropdownPosition = 'below',\n            initialCountry = 'US',\n            onCountryCallingCodeChange,\n            onCountryChange,\n            onPhoneNumberChange,\n            onValidChange,\n            placeholder = 'Enter Number',\n            showErrorIfInvalid,\n            usePortalMenu,\n            validation = 'strict',\n            ...props\n        },\n    ] = extractFormLabelProps(unfilteredProps);\n\n    if (nodeEnv === 'development') {\n        if (!isSupportedCountry(initialCountry)) {\n            throw new Error(`Country ${initialCountry} is not supported`);\n        }\n    }\n\n    const [country, defaultSetCountry] = useState(initialCountry);\n    const [countryMenuOpen, setCountryMenuOpen] = useState(false);\n    const countryCallingCode = useMemo(() => {\n        const countryCallingCode = getCountryCallingCode(country);\n        onCountryCallingCodeChange?.(countryCallingCode);\n        return countryCallingCode;\n    }, [country, onCountryCallingCodeChange]);\n\n    const initialPhoneNumber = useMemo(() => {\n        if (!props.initialPhoneNumber) {\n            return '';\n        }\n\n        if (!props.initialPhoneNumber.startsWith('+')) {\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n            return `+${countryCallingCode}${props.initialPhoneNumber}`;\n        }\n\n        return props.initialPhoneNumber;\n\n        // Since it's only initial, rerunning is pointless\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const [phoneNumber, defaultSetPhoneNumber] = useState(initialPhoneNumber);\n\n    const [isValid, setIsValid] = useState(false);\n    const isFormattingNumber = useRef(false);\n\n    const setPhoneNumber = useCallback(\n        (value: string = '') => {\n            if (isFormattingNumber.current) {\n                return;\n            }\n\n            isFormattingNumber.current = true;\n\n            defaultSetPhoneNumber(value);\n            onPhoneNumberChange?.(value);\n            setCountryMenuOpen(false);\n\n            let valid: boolean;\n\n            if (validation === 'strict') {\n                valid = isValidPhoneNumber(value);\n            } else {\n                valid = isPossiblePhoneNumber(value);\n            }\n\n            onValidChange?.(valid);\n\n            if (formLabelProps.hasError) {\n                valid = false;\n            } else if (!showErrorIfInvalid) {\n                valid = true;\n            }\n\n            setIsValid(valid);\n\n            setTimeout(() => {\n                isFormattingNumber.current = false;\n            }, 0);\n        },\n        [formLabelProps.hasError, onPhoneNumberChange, onValidChange, showErrorIfInvalid, validation]\n    );\n\n    const setCountry = useCallback(\n        (value: Country) => {\n            defaultSetCountry(value);\n            onCountryChange?.(value);\n            setPhoneNumber('');\n            inputRef.current?.focus();\n        },\n        [onCountryChange, setPhoneNumber]\n    );\n\n    const { countrySearch, dropdownMenuRefFunc, onClick, searchInputRef, setCountrySearch } = useDropdownLogic({\n        country,\n        countryMenuOpen,\n        disabled,\n        setCountry,\n        setCountryMenuOpen,\n    });\n\n    const hasError = formLabelProps.hasError ?? !isValid;\n\n    const filteredCountries = useMemo(() => {\n        if (!countrySearch.trim()) {\n            return countries;\n        }\n\n        const searchTerm = countrySearch.toLowerCase();\n        return countries.filter(({ code, name }) => {\n            const countryName = name?.toLowerCase() || '';\n            const callingCode = getCountryCallingCode(code);\n            return countryName.includes(searchTerm) || callingCode.includes(searchTerm);\n        });\n    }, [countrySearch]);\n\n    const countryList = useMemo(\n        () =>\n            filteredCountries.map(({ code, name }, index) => {\n                const isSelected = code === country;\n                return (\n                    <div\n                        aria-label={`Select ${name} / +${getCountryCallingCode(code)}`}\n                        aria-selected={isSelected}\n                        className={cn(\n                            'hui-text-body-primary flex h-[42px] min-h-[42px] w-full cursor-pointer items-center px-xs py-xs',\n                            'hover:bg-background-hover',\n                            'keyboard_hover:bg-background-hover',\n                            {\n                                'keyboard_hover:bg-background-inverse keyboard_hover:text-text-inverse cursor-default bg-background-inverse text-text-inverse hover:bg-background-inverse hover:text-text-inverse':\n                                    isSelected,\n                            }\n                        )}\n                        data-country={code}\n                        key={code}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            onClick(e, index);\n                        }}\n                        onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                                e.stopPropagation();\n                                e.preventDefault();\n                                setCountry(code);\n                                setCountryMenuOpen(false);\n                            }\n                        }}\n                        onTouchMove={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        onTouchStart={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        role=\"option\"\n                        tabIndex={0}\n                    >\n                        <ReactCountryFlag\n                            className=\"mr-sm !w-md select-none [-webkit-user-drag:none]\"\n                            countryCode={code}\n                            role=\"none\"\n                            svg\n                        />\n                        <span className=\"overflow-hidden overflow-ellipsis whitespace-nowrap pr-2xs\">{name}</span>(+\n                        {getCountryCallingCode(code)})\n                    </div>\n                );\n            }),\n        [onClick, country, setCountry, setCountryMenuOpen, filteredCountries]\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const inputRowClasses = cn(\n        'relative flex w-full items-center rounded-input border border-border-secondary px-xs py-xs',\n        {\n            // Error state\n            'border-border-critical': hasError && !countryMenuOpen && !disabled,\n            // Disabled state\n            'border-border-disabled bg-background-disabled': disabled,\n            // Country menu open state\n            'border-border-primary': countryMenuOpen && !disabled,\n            // Default hover and focus states\n            'focus-within:border-border-selected hover:border-border-hover': !disabled && !countryMenuOpen && !hasError,\n        }\n    );\n\n    // Calculate dropdown position for portal\n    const [portalPosition, setPortalPosition] = useState<{ left: number; top: number; width: number } | null>(null);\n\n    // Update dropdown position when menu opens and usePortalMenu is true\n    useMemo(() => {\n        if (countryMenuOpen && usePortalMenu && inputContainerRef.current) {\n            const rect = inputContainerRef.current.getBoundingClientRect();\n            setPortalPosition({\n                left: rect.left + window.scrollX,\n                top: rect.bottom + window.scrollY + 4, // 4px gap below input\n                width: rect.width,\n            });\n        } else {\n            setPortalPosition(null);\n        }\n    }, [countryMenuOpen, usePortalMenu]);\n\n    // Create the country dropdown content\n    const countryDropdownContent = (\n        <div\n            aria-label=\"Country list\"\n            className={cn(\n                'flex max-h-[226px] flex-col bg-background-primary py-[4px]',\n                'rounded-input border border-border-secondary shadow-03',\n                {\n                    // When not using portal, position absolute relative to input\n                    'absolute left-0 right-0 z-[1]': !usePortalMenu,\n                    'bottom-full mb-[4px]': dropdownPosition === 'above' && !usePortalMenu,\n                    // When using portal, position fixed and use high z-index\n                    'fixed z-[11111]': usePortalMenu,\n                    'top-full mt-[4px]': dropdownPosition === 'below' && !usePortalMenu,\n                }\n            )}\n            role=\"listbox\"\n            style={\n                usePortalMenu && portalPosition\n                    ? {\n                          left: portalPosition.left,\n                          top: portalPosition.top,\n                          width: portalPosition.width,\n                      }\n                    : usePortalMenu\n                      ? {\n                            maxWidth: '400px',\n                            // Fallback positioning if we don't have position calculated yet\n                            minWidth: '300px',\n                        }\n                      : undefined\n            }\n        >\n            <div className=\"px-xs pb-xs\">\n                <input\n                    aria-label=\"Search countries\"\n                    className=\"rounded w-full border border-border-secondary bg-background-primary px-xs py-2xs !text-[16px] text-sm text-text-primary placeholder:text-[16px] placeholder:text-text-inactive focus:border-border-selected focus:outline-none\"\n                    onBlur={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                    }}\n                    onChange={(e) => setCountrySearch(e.target.value)}\n                    onClick={(e) => e.stopPropagation()}\n                    onKeyDown={(e) => {\n                        if (e.key === 'Enter' && filteredCountries.length > 0) {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            setCountry(filteredCountries[0].code);\n                            setCountryMenuOpen(false);\n                        }\n                    }}\n                    onTouchStart={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                        searchInputRef.current?.blur();\n                    }}\n                    placeholder=\"Search countries...\"\n                    ref={searchInputRef}\n                    type=\"text\"\n                    value={countrySearch}\n                />\n            </div>\n            <div\n                className=\"flex-1 overflow-y-auto overflow-x-hidden\"\n                ref={dropdownMenuRefFunc}\n            >\n                {countryList}\n            </div>\n        </div>\n    );\n\n    return (\n        <FormLabel\n            {...formLabelProps}\n            hasError={hasError}\n        >\n            <div\n                aria-label=\"Phone input\"\n                className={inputRowClasses}\n                ref={inputContainerRef}\n            >\n                <button\n                    aria-label=\"Select country\"\n                    className={cn(\n                        'flex cursor-pointer select-none items-center border-none bg-transparent p-0',\n                        'hui-focus-visible-outline',\n                        {\n                            'bg-background-disabled [&>img]:opacity-40': disabled,\n                        }\n                    )}\n                    onClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        onClick(e);\n                    }}\n                    tabIndex={0}\n                    type=\"button\"\n                >\n                    <ReactCountryFlag\n                        className=\"!w-md select-none [-webkit-user-drag:none]\"\n                        countryCode={country}\n                        role=\"none\"\n                        svg\n                    />\n\n                    <div className=\"px-xs\">\n                        {countryMenuOpen ? (\n                            <CaretUp\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        ) : (\n                            <CaretDown\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        )}\n                    </div>\n                </button>\n                {countryMenuOpen &&\n                    (usePortalMenu && typeof document !== 'undefined'\n                        ? createPortal(\n                              countryDropdownContent,\n                              document.getElementById('hui-modal-target') || document.body\n                          )\n                        : countryDropdownContent)}\n                <div\n                    className={cn('mr-xs h-sm border-r border-border-secondary', {\n                        'border-border-disabled': disabled,\n                    })}\n                />\n                <BodyPrimary\n                    className=\"pr-xs\"\n                    color={disabled ? 'disabled' : 'primary'}\n                >\n                    +{countryCallingCode}\n                </BodyPrimary>\n                <RPhoneInput\n                    aria-label=\"Phone number\"\n                    className={cn(\n                        'hui-text-body-primary flex-1 border-none bg-transparent outline-none',\n                        'placeholder:text-text-inactive',\n                        {\n                            'bg-background-disabled text-text-disabled placeholder:text-text-disabled': disabled,\n                        }\n                    )}\n                    country={country}\n                    disabled={disabled}\n                    onBlur={() => {\n                        props.onBlur?.();\n                    }}\n                    onChange={setPhoneNumber}\n                    onFocus={() => {\n                        setCountryMenuOpen(false);\n                        props.onFocus?.();\n                    }}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    value={phoneNumber}\n                />\n                {phoneNumber && phoneNumber.length > 0 && (\n                    <button\n                        aria-label=\"Clear phone number\"\n                        className={cn(\n                            'hui-focus-visible-outline ml-xs flex cursor-pointer items-center border-none bg-transparent p-0',\n                            {\n                                'bg-background-disabled': disabled,\n                            }\n                        )}\n                        disabled={disabled}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            setPhoneNumber('');\n                            inputRef.current?.focus();\n                        }}\n                        tabIndex={0}\n                    >\n                        <Close\n                            color={disabled ? 'disabled' : 'primary'}\n                            size=\"sm\"\n                        />\n                    </button>\n                )}\n            </div>\n        </FormLabel>\n    );\n};\n\nexport * from 'react-phone-number-input';\nexport * from 'i18n-iso-countries';\nexport * from 'react-country-flag';\n"],"mappings":"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"}

package/PhoneInput-BXnkBME4.d.mts

@@ -0,0 +1,70 @@
+import { n as FormLabelProps } from "./FormLabel-D4602qfd.mjs";
+import { Dispatch, SetStateAction } from "react";
+import { Country } from "react-phone-number-input";
+
+//#region src/PhoneInput/PhoneInput.d.ts
+type Props = {
+  /**
+   * Position of the country dropdown relative to the input.
+   * @default 'below'
+   */
+  dropdownPosition?: 'above' | 'below';
+  /**
+   * The initial country. (Decides the country calling code)
+   */
+  initialCountry?: Country;
+  /**
+   * The initial phone number. (The bit after the country calling code)
+   */
+  initialPhoneNumber?: string;
+  /**
+   * Optional callback for when the input loses focus.
+   */
+  onBlur?: () => void;
+  /**
+   * The setter of a `useState<string>` that indicates the country calling code.
+   */
+  onCountryCallingCodeChange?: Dispatch<SetStateAction<string>>;
+  /**
+   * The setter of a `useState<Country>` that indicates whether the phone number is valid.
+   */
+  onCountryChange?: Dispatch<SetStateAction<Country>>;
+  /**
+   * Optional callback for when the input gains focus.
+   */
+  onFocus?: () => void;
+  /**
+   * The setter of a `useState<string>` that indicates the phone number.
+   */
+  onPhoneNumberChange?: Dispatch<SetStateAction<string>>;
+  /**
+   * The setter of a `useState<boolean>` that indicates whether the phone number is valid.
+   */
+  onValidChange?: Dispatch<SetStateAction<boolean>>;
+  placeholder?: string;
+  /**
+   * Whether to show the invalid state.
+   * This is so you can control the invalid visual from outside the component.
+   * Perfect for after trying to submit a form.
+   *
+   * To force an error state use `hasError`
+   */
+  showErrorIfInvalid?: boolean;
+  /**
+   * Position the country dropdown menu absolutely, relative to <body />.
+   * Useful in places like modals where the menu may get cut off
+   */
+  usePortalMenu?: boolean;
+  /**
+   * The validation mode to use.
+   * - `strict`: The phone number must be valid. (Follows certain country rules like don't start with 0)
+   * - `loose`: The phone number must be possible. (Only checks number of digits)
+   *
+   * @default 'strict'
+   */
+  validation?: 'loose' | 'strict';
+} & FormLabelProps;
+declare const PhoneInput: (unfilteredProps: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { PhoneInput as t };
+//# sourceMappingURL=PhoneInput-BXnkBME4.d.mts.map

package/PhoneInput-BXnkBME4.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput-BXnkBME4.d.mts","names":[],"sources":["../src/PhoneInput/PhoneInput.tsx"],"mappings":";;;;;KA8BK,KAAA;;AAbqF;;;EAkBtF,gBAAA;EAgBsC;;;EAZtC,cAAA,GAAiB,OAAA;EAgBC;;;EAZlB,kBAAA;EAwBgB;;;EApBhB,MAAA;EAZA;;;EAgBA,0BAAA,GAA6B,QAAA,CAAS,cAAA;EAJtC;;;EAQA,eAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,OAAA;EAA1C;;;EAIA,OAAA;EAAA;;;EAIA,mBAAA,GAAsB,QAAA,CAAS,cAAA;EAI/B;;;EAAA,aAAA,GAAgB,QAAA,CAAS,cAAA;EACzB,WAAA;EAaA;;;;AASc;AAElB;;EAhBI,kBAAA;EAgB6C;;;;EAX7C,aAAA;EAuaH;AAAA;;;;;;EA/ZG,UAAA;AAAA,IACA,cAAA;AAAA,cAES,UAAA,GAAc,eAAA,EAAiB,KAAK,iCAAA,GAAA,CAAA,OAAA"}

package/PhoneInput-Bkrbrins.d.cts

@@ -0,0 +1,70 @@
+import { n as FormLabelProps } from "./FormLabel-D4602qfd.cjs";
+import { Dispatch, SetStateAction } from "react";
+import { Country } from "react-phone-number-input";
+
+//#region src/PhoneInput/PhoneInput.d.ts
+type Props = {
+  /**
+   * Position of the country dropdown relative to the input.
+   * @default 'below'
+   */
+  dropdownPosition?: 'above' | 'below';
+  /**
+   * The initial country. (Decides the country calling code)
+   */
+  initialCountry?: Country;
+  /**
+   * The initial phone number. (The bit after the country calling code)
+   */
+  initialPhoneNumber?: string;
+  /**
+   * Optional callback for when the input loses focus.
+   */
+  onBlur?: () => void;
+  /**
+   * The setter of a `useState<string>` that indicates the country calling code.
+   */
+  onCountryCallingCodeChange?: Dispatch<SetStateAction<string>>;
+  /**
+   * The setter of a `useState<Country>` that indicates whether the phone number is valid.
+   */
+  onCountryChange?: Dispatch<SetStateAction<Country>>;
+  /**
+   * Optional callback for when the input gains focus.
+   */
+  onFocus?: () => void;
+  /**
+   * The setter of a `useState<string>` that indicates the phone number.
+   */
+  onPhoneNumberChange?: Dispatch<SetStateAction<string>>;
+  /**
+   * The setter of a `useState<boolean>` that indicates whether the phone number is valid.
+   */
+  onValidChange?: Dispatch<SetStateAction<boolean>>;
+  placeholder?: string;
+  /**
+   * Whether to show the invalid state.
+   * This is so you can control the invalid visual from outside the component.
+   * Perfect for after trying to submit a form.
+   *
+   * To force an error state use `hasError`
+   */
+  showErrorIfInvalid?: boolean;
+  /**
+   * Position the country dropdown menu absolutely, relative to <body />.
+   * Useful in places like modals where the menu may get cut off
+   */
+  usePortalMenu?: boolean;
+  /**
+   * The validation mode to use.
+   * - `strict`: The phone number must be valid. (Follows certain country rules like don't start with 0)
+   * - `loose`: The phone number must be possible. (Only checks number of digits)
+   *
+   * @default 'strict'
+   */
+  validation?: 'loose' | 'strict';
+} & FormLabelProps;
+declare const PhoneInput: (unfilteredProps: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { PhoneInput as t };
+//# sourceMappingURL=PhoneInput-Bkrbrins.d.cts.map

package/PhoneInput-Bkrbrins.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput-Bkrbrins.d.cts","names":[],"sources":["../src/PhoneInput/PhoneInput.tsx"],"mappings":";;;;;KA8BK,KAAA;;AAbqF;;;EAkBtF,gBAAA;EAgBsC;;;EAZtC,cAAA,GAAiB,OAAA;EAgBC;;;EAZlB,kBAAA;EAwBgB;;;EApBhB,MAAA;EAZA;;;EAgBA,0BAAA,GAA6B,QAAA,CAAS,cAAA;EAJtC;;;EAQA,eAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,OAAA;EAA1C;;;EAIA,OAAA;EAAA;;;EAIA,mBAAA,GAAsB,QAAA,CAAS,cAAA;EAI/B;;;EAAA,aAAA,GAAgB,QAAA,CAAS,cAAA;EACzB,WAAA;EAaA;;;;AASc;AAElB;;EAhBI,kBAAA;EAgB6C;;;;EAX7C,aAAA;EAuaH;AAAA;;;;;;EA/ZG,UAAA;AAAA,IACA,cAAA;AAAA,cAES,UAAA,GAAc,eAAA,EAAiB,KAAK,iCAAA,GAAA,CAAA,OAAA"}