xiod-ui 1.0.0

package/dist/components/input-phone.js

@@ -0,0 +1,657 @@
+"use client";
+import { ScrollArea } from "./scroll-area.js";
+import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+import { cn } from "cn";
+import { ChevronDown } from "xiod-icons/icons/ChevronDown";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+import { Cancel } from "xiod-icons/icons/Cancel";
+import { Check } from "xiod-icons/icons/Check";
+import { Search } from "xiod-icons/icons/Search";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/input-phone.tsx
+const COUNTRIES = [
+	{
+		code: "US",
+		name: "United States",
+		dialCode: "+1",
+		flag: "🇺🇸",
+		mask: "(###) ###-####"
+	},
+	{
+		code: "GB",
+		name: "United Kingdom",
+		dialCode: "+44",
+		flag: "🇬🇧",
+		mask: "##### ######"
+	},
+	{
+		code: "IN",
+		name: "India",
+		dialCode: "+91",
+		flag: "🇮🇳",
+		mask: "##### #####"
+	},
+	{
+		code: "CA",
+		name: "Canada",
+		dialCode: "+1",
+		flag: "🇨🇦",
+		mask: "(###) ###-####"
+	},
+	{
+		code: "AU",
+		name: "Australia",
+		dialCode: "+61",
+		flag: "🇦🇺",
+		mask: "#### ### ###"
+	},
+	{
+		code: "DE",
+		name: "Germany",
+		dialCode: "+49",
+		flag: "🇩🇪",
+		mask: "#### ########"
+	},
+	{
+		code: "FR",
+		name: "France",
+		dialCode: "+33",
+		flag: "🇫🇷",
+		mask: "# ## ## ## ##"
+	},
+	{
+		code: "JP",
+		name: "Japan",
+		dialCode: "+81",
+		flag: "🇯🇵",
+		mask: "## #### ####"
+	},
+	{
+		code: "BR",
+		name: "Brazil",
+		dialCode: "+55",
+		flag: "🇧🇷",
+		mask: "(##) #####-####"
+	},
+	{
+		code: "CN",
+		name: "China",
+		dialCode: "+86",
+		flag: "🇨🇳",
+		mask: "### #### ####"
+	},
+	{
+		code: "ES",
+		name: "Spain",
+		dialCode: "+34",
+		flag: "🇪🇸",
+		mask: "### ## ## ##"
+	},
+	{
+		code: "IT",
+		name: "Italy",
+		dialCode: "+39",
+		flag: "🇮🇹",
+		mask: "### #######"
+	},
+	{
+		code: "MX",
+		name: "Mexico",
+		dialCode: "+52",
+		flag: "🇲🇽",
+		mask: "### ### ####"
+	},
+	{
+		code: "NL",
+		name: "Netherlands",
+		dialCode: "+31",
+		flag: "🇳🇱",
+		mask: "# ########"
+	},
+	{
+		code: "SG",
+		name: "Singapore",
+		dialCode: "+65",
+		flag: "🇸🇬",
+		mask: "#### ####"
+	},
+	{
+		code: "KR",
+		name: "South Korea",
+		dialCode: "+82",
+		flag: "🇰🇷",
+		mask: "## #### ####"
+	},
+	{
+		code: "ZA",
+		name: "South Africa",
+		dialCode: "+27",
+		flag: "🇿🇦",
+		mask: "## ### ####"
+	},
+	{
+		code: "AE",
+		name: "United Arab Emirates",
+		dialCode: "+971",
+		flag: "🇦🇪",
+		mask: "## ### ####"
+	},
+	{
+		code: "AR",
+		name: "Argentina",
+		dialCode: "+54",
+		flag: "🇦🇷",
+		mask: "### ###-####"
+	},
+	{
+		code: "CH",
+		name: "Switzerland",
+		dialCode: "+41",
+		flag: "🇨🇭",
+		mask: "## ### ## ##"
+	},
+	{
+		code: "SE",
+		name: "Sweden",
+		dialCode: "+46",
+		flag: "🇸🇪",
+		mask: "##-### ## ##"
+	},
+	{
+		code: "NO",
+		name: "Norway",
+		dialCode: "+47",
+		flag: "🇳🇴",
+		mask: "### ## ###"
+	},
+	{
+		code: "DK",
+		name: "Denmark",
+		dialCode: "+45",
+		flag: "🇩🇰",
+		mask: "## ## ## ##"
+	},
+	{
+		code: "FI",
+		name: "Finland",
+		dialCode: "+358",
+		flag: "🇫🇮",
+		mask: "## ### ## ##"
+	},
+	{
+		code: "NZ",
+		name: "New Zealand",
+		dialCode: "+64",
+		flag: "🇳🇿",
+		mask: "## ### ####"
+	},
+	{
+		code: "PL",
+		name: "Poland",
+		dialCode: "+48",
+		flag: "🇵🇱",
+		mask: "### ### ###"
+	},
+	{
+		code: "PT",
+		name: "Portugal",
+		dialCode: "+351",
+		flag: "🇵🇹",
+		mask: "### ### ###"
+	},
+	{
+		code: "IE",
+		name: "Ireland",
+		dialCode: "+353",
+		flag: "🇮🇪",
+		mask: "## ### ####"
+	},
+	{
+		code: "BE",
+		name: "Belgium",
+		dialCode: "+32",
+		flag: "🇧🇪",
+		mask: "### ## ## ##"
+	},
+	{
+		code: "AT",
+		name: "Austria",
+		dialCode: "+43",
+		flag: "🇦🇹",
+		mask: "#### ######"
+	},
+	{
+		code: "IL",
+		name: "Israel",
+		dialCode: "+972",
+		flag: "🇮🇱",
+		mask: "##-###-####"
+	},
+	{
+		code: "SA",
+		name: "Saudi Arabia",
+		dialCode: "+966",
+		flag: "🇸🇦",
+		mask: "## ### ####"
+	},
+	{
+		code: "TH",
+		name: "Thailand",
+		dialCode: "+66",
+		flag: "🇹🇭",
+		mask: "## #### ####"
+	},
+	{
+		code: "MY",
+		name: "Malaysia",
+		dialCode: "+60",
+		flag: "🇲🇾",
+		mask: "##-### ####"
+	},
+	{
+		code: "ID",
+		name: "Indonesia",
+		dialCode: "+62",
+		flag: "🇮🇩",
+		mask: "###-####-####"
+	},
+	{
+		code: "PH",
+		name: "Philippines",
+		dialCode: "+63",
+		flag: "🇵🇭",
+		mask: "### ### ####"
+	},
+	{
+		code: "VN",
+		name: "Vietnam",
+		dialCode: "+84",
+		flag: "🇻🇳",
+		mask: "### ### ####"
+	},
+	{
+		code: "GR",
+		name: "Greece",
+		dialCode: "+30",
+		flag: "🇬🇷",
+		mask: "### #######"
+	},
+	{
+		code: "TR",
+		name: "Turkey",
+		dialCode: "+90",
+		flag: "🇹🇷",
+		mask: "### ### ## ##"
+	},
+	{
+		code: "UA",
+		name: "Ukraine",
+		dialCode: "+380",
+		flag: "🇺🇦",
+		mask: "## ### ## ##"
+	},
+	{
+		code: "CZ",
+		name: "Czech Republic",
+		dialCode: "+420",
+		flag: "🇨🇿",
+		mask: "### ### ###"
+	},
+	{
+		code: "HU",
+		name: "Hungary",
+		dialCode: "+36",
+		flag: "🇭🇺",
+		mask: "## ### ####"
+	},
+	{
+		code: "RO",
+		name: "Romania",
+		dialCode: "+40",
+		flag: "🇷🇴",
+		mask: "### ### ###"
+	},
+	{
+		code: "CL",
+		name: "Chile",
+		dialCode: "+56",
+		flag: "🇨🇱",
+		mask: "# #### ####"
+	},
+	{
+		code: "CO",
+		name: "Colombia",
+		dialCode: "+57",
+		flag: "🇨🇴",
+		mask: "### ### ####"
+	},
+	{
+		code: "PE",
+		name: "Peru",
+		dialCode: "+51",
+		flag: "🇵🇪",
+		mask: "### ### ###"
+	},
+	{
+		code: "EG",
+		name: "Egypt",
+		dialCode: "+20",
+		flag: "🇪🇬",
+		mask: "## #### ####"
+	},
+	{
+		code: "NG",
+		name: "Nigeria",
+		dialCode: "+234",
+		flag: "🇳🇬",
+		mask: "### ### ####"
+	},
+	{
+		code: "KE",
+		name: "Kenya",
+		dialCode: "+254",
+		flag: "🇰🇪",
+		mask: "### ######"
+	}
+];
+function formatPhoneNumber(digits, mask) {
+	const clean = digits.replace(/\D/g, "");
+	if (!mask) return clean;
+	let formatted = "";
+	let digitIndex = 0;
+	for (let i = 0; i < mask.length && digitIndex < clean.length; i++) if (mask[i] === "#") {
+		formatted += clean[digitIndex];
+		digitIndex++;
+	} else formatted += mask[i];
+	if (digitIndex < clean.length) formatted += clean.slice(digitIndex);
+	return formatted;
+}
+function parseE164Number(e164, countries = COUNTRIES) {
+	if (!e164.startsWith("+")) return null;
+	const sortedCountries = countries.toSorted((a, b) => b.dialCode.length - a.dialCode.length);
+	for (const country of sortedCountries) if (e164.startsWith(country.dialCode)) return {
+		country,
+		nationalNumber: e164.slice(country.dialCode.length).replace(/\D/g, "")
+	};
+	return null;
+}
+const inputPhoneVariants = cva("w-full max-w-[15.5rem] sm:max-w-[15rem] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "",
+			filled: "bg-muted/40 border-transparent focus-within:bg-background",
+			ghost: "border-transparent bg-transparent shadow-none ring-0 focus-within:border-border"
+		},
+		size: {
+			default: "max-w-[15.5rem] sm:max-w-[15rem]",
+			sm: "max-w-[14.5rem] sm:max-w-[14rem]",
+			lg: "max-w-[17rem] sm:max-w-[16.5rem]"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const InputPhoneContext = React$1.createContext(null);
+function useInputPhone() {
+	const context = React$1.useContext(InputPhoneContext);
+	if (!context) throw new Error("useInputPhone must be used within an <InputPhone /> container.");
+	return context;
+}
+const usePhoneInput = useInputPhone;
+function InputPhone({ className, variant, size, defaultValue = "", value: valueProp, defaultCountry = "US", countries = COUNTRIES, disabled, readOnly, onChange, children, ...props }) {
+	const containerRef = React$1.useRef(null);
+	const initialCountry = React$1.useMemo(() => {
+		if (defaultValue) {
+			const parsed = parseE164Number(defaultValue, countries);
+			if (parsed) return parsed.country;
+		}
+		return countries.find((c) => c.code.toUpperCase() === defaultCountry.toUpperCase()) || countries[0];
+	}, [
+		defaultValue,
+		defaultCountry,
+		countries
+	]);
+	const initialNational = React$1.useMemo(() => {
+		if (defaultValue) {
+			const parsed = parseE164Number(defaultValue, countries);
+			if (parsed) return parsed.nationalNumber;
+		}
+		return "";
+	}, [defaultValue, countries]);
+	const [selectedCountry, setSelectedCountryState] = React$1.useState(initialCountry);
+	const [nationalNumber, setNationalNumberState] = React$1.useState(initialNational);
+	React$1.useEffect(() => {
+		if (valueProp !== void 0) {
+			const parsed = parseE164Number(valueProp, countries);
+			if (parsed) {
+				setSelectedCountryState(parsed.country);
+				setNationalNumberState(parsed.nationalNumber);
+			} else setNationalNumberState(valueProp.replace(/\D/g, ""));
+		}
+	}, [valueProp, countries]);
+	const e164Value = React$1.useMemo(() => {
+		const cleanDigits = nationalNumber.replace(/\D/g, "");
+		if (!cleanDigits) return "";
+		return `${selectedCountry.dialCode}${cleanDigits}`;
+	}, [selectedCountry, nationalNumber]);
+	const handleCountryChange = React$1.useCallback((newCountry) => {
+		setSelectedCountryState(newCountry);
+		const newE164 = nationalNumber.replace(/\D/g, "") ? `${newCountry.dialCode}${nationalNumber.replace(/\D/g, "")}` : "";
+		onChange?.(newE164, newCountry, nationalNumber);
+	}, [nationalNumber, onChange]);
+	const handleNationalNumberChange = React$1.useCallback((newNational) => {
+		if (newNational.trim().startsWith("+")) {
+			const parsed = parseE164Number(newNational.trim(), countries);
+			if (parsed) {
+				setSelectedCountryState(parsed.country);
+				setNationalNumberState(parsed.nationalNumber);
+				const newE164 = `${parsed.country.dialCode}${parsed.nationalNumber}`;
+				onChange?.(newE164, parsed.country, parsed.nationalNumber);
+				return;
+			}
+		}
+		const cleanDigits = newNational.replace(/\D/g, "");
+		setNationalNumberState(cleanDigits);
+		const newE164 = cleanDigits ? `${selectedCountry.dialCode}${cleanDigits}` : "";
+		onChange?.(newE164, selectedCountry, cleanDigits);
+	}, [
+		selectedCountry,
+		countries,
+		onChange
+	]);
+	const contextValue = React$1.useMemo(() => ({
+		containerRef,
+		selectedCountry,
+		setSelectedCountry: handleCountryChange,
+		nationalNumber,
+		setNationalNumber: handleNationalNumberChange,
+		e164Value,
+		disabled,
+		readOnly,
+		countries,
+		onChange
+	}), [
+		selectedCountry,
+		handleCountryChange,
+		nationalNumber,
+		handleNationalNumberChange,
+		e164Value,
+		disabled,
+		readOnly,
+		countries,
+		onChange
+	]);
+	return /* @__PURE__ */ jsx(InputGroup, {
+		ref: containerRef,
+		className: cn(inputPhoneVariants({
+			variant,
+			size
+		}), className),
+		"data-slot": "input-phone",
+		...props,
+		children: /* @__PURE__ */ jsx(InputPhoneContext.Provider, {
+			value: contextValue,
+			children: children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputPhoneCountrySelect, {}), /* @__PURE__ */ jsx(InputPhoneInput, {})] })
+		})
+	});
+}
+function InputPhoneCountrySelect({ className, render, ...props }) {
+	const { containerRef, selectedCountry, setSelectedCountry, disabled, readOnly, countries } = useInputPhone();
+	const [open, setOpen] = React$1.useState(false);
+	const [search, setSearch] = React$1.useState("");
+	const filteredCountries = React$1.useMemo(() => {
+		if (!search.trim()) return countries;
+		const query = search.toLowerCase().trim();
+		return countries.filter((c) => c.name.toLowerCase().includes(query) || c.code.toLowerCase().includes(query) || c.dialCode.includes(query));
+	}, [search, countries]);
+	const defaultTriggerProps = {
+		type: "button",
+		disabled: disabled || readOnly,
+		"aria-label": `Select country, current ${selectedCountry.name} (${selectedCountry.dialCode})`,
+		className: cn("inline-flex items-center gap-1.5 pe-2.5 ps-1 py-1 text-sm font-medium text-foreground hover:bg-muted/40 transition-colors select-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 shrink-0 border-r border-input/40", className),
+		"data-slot": "input-phone-country",
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-base leading-none select-none",
+				"data-slot": "input-phone-flag",
+				children: selectedCountry.flag
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs font-semibold text-muted-foreground",
+				children: selectedCountry.dialCode
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-60 shrink-0" })
+		] })
+	};
+	return /* @__PURE__ */ jsx(InputGroupAddon, {
+		align: "inline-start",
+		className: "pe-0",
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: useRender({
+				defaultTagName: "button",
+				props: mergeProps(defaultTriggerProps, props),
+				render
+			}) }), /* @__PURE__ */ jsxs(PopoverPopup, {
+				anchor: containerRef,
+				align: "start",
+				side: "bottom",
+				sideOffset: 4,
+				hideArrow: true,
+				collisionAvoidance: { fallbackAxisSide: "none" },
+				className: "w-(--anchor-width) **:data-[slot=popover-viewport]:p-2 **:data-[slot=popover-viewport]:[--viewport-inline-padding:--spacing(2)] z-50",
+				"data-slot": "input-phone-country-content",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative mb-1 flex items-center gap-1.5 px-2 py-1 border-b border-border/40 pb-1.5",
+					children: [
+						/* @__PURE__ */ jsx(Search, { className: "size-3.5 text-muted-foreground shrink-0" }),
+						/* @__PURE__ */ jsx("input", {
+							type: "text",
+							"aria-label": "Search countries",
+							placeholder: "Search country or code...",
+							value: search,
+							onChange: (e) => setSearch(e.target.value),
+							className: "w-full bg-transparent text-xs text-foreground placeholder:text-muted-foreground/60 outline-none border-0 p-0"
+						}),
+						search && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Clear country search",
+							onClick: () => setSearch(""),
+							className: "p-0.5 rounded text-muted-foreground hover:text-foreground",
+							children: /* @__PURE__ */ jsx(Cancel, { className: "size-3" })
+						})
+					]
+				}), /* @__PURE__ */ jsx(ScrollArea, {
+					className: "max-h-[min(11rem,calc(var(--available-height,11rem)-3.5rem))] flex flex-col gap-0.5 text-xs",
+					children: filteredCountries.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "p-2 text-center text-muted-foreground text-xs",
+						children: "No country found"
+					}) : filteredCountries.map((c, index) => {
+						const isSelected = c.code === selectedCountry.code;
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-pressed": isSelected,
+							onClick: () => {
+								setSelectedCountry(c);
+								setOpen(false);
+								setSearch("");
+							},
+							className: cn("flex items-center justify-between gap-2 px-2 py-1 rounded-md text-left transition-colors w-full", isSelected ? "bg-accent text-accent-foreground font-medium" : "hover:bg-muted/60 text-foreground"),
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5 truncate",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-xs leading-none",
+									children: c.flag
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate text-xs",
+									children: c.name
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1 shrink-0 font-mono text-[11px] text-muted-foreground",
+								children: [/* @__PURE__ */ jsx("span", { children: c.dialCode }), isSelected && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })]
+							})]
+						}, `${c.code}-${index}`);
+					})
+				})]
+			})]
+		})
+	});
+}
+function InputPhoneInput({ className, ...props }) {
+	const { selectedCountry, nationalNumber, setNationalNumber, disabled, readOnly } = useInputPhone();
+	const formattedDisplay = React$1.useMemo(() => {
+		return formatPhoneNumber(nationalNumber, selectedCountry.mask);
+	}, [nationalNumber, selectedCountry.mask]);
+	const handleChange = (e) => {
+		setNationalNumber(e.target.value);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputGroupInput, {
+		type: "tel",
+		value: formattedDisplay,
+		onChange: handleChange,
+		disabled,
+		readOnly,
+		placeholder: selectedCountry.mask || "Phone number",
+		"aria-label": "Phone number",
+		className: cn("w-full bg-transparent px-[calc(--spacing(3)-1px)] py-1.5 text-foreground placeholder:text-muted-foreground/60 font-mono border-0 shadow-none ring-0", className),
+		"data-slot": "input-phone-number",
+		...props
+	}), nationalNumber && !disabled && !readOnly && /* @__PURE__ */ jsx(InputGroupAddon, {
+		align: "inline-end",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setNationalNumber(""),
+			className: "p-1 rounded-full text-muted-foreground/60 hover:text-foreground hover:bg-muted/40 transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-8",
+			"aria-label": "Clear Phone Number",
+			children: /* @__PURE__ */ jsx(Cancel, { className: "size-3.5" })
+		})
+	})] });
+}
+function InputPhoneFlag({ className, code, render, children, ...props }) {
+	const context = React$1.useContext(InputPhoneContext);
+	const targetCountry = code ? COUNTRIES.find((c) => c.code.toUpperCase() === code.toUpperCase()) : context?.selectedCountry;
+	const defaultProps = {
+		className: cn("inline-flex items-center justify-center text-base leading-none select-none", className),
+		"data-slot": "input-phone-flag",
+		children: children || targetCountry?.flag || "🌐"
+	};
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+const PhoneInput = InputPhone;
+const PhoneInputCountrySelect = InputPhoneCountrySelect;
+const PhoneInputFlag = InputPhoneFlag;
+const PhoneInputInput = InputPhoneInput;
+const phoneInputVariants = inputPhoneVariants;
+//#endregion
+export { COUNTRIES, InputPhone, InputPhoneCountrySelect, InputPhoneFlag, InputPhoneInput, PhoneInput, PhoneInputCountrySelect, PhoneInputFlag, PhoneInputInput, formatPhoneNumber, inputPhoneVariants, parseE164Number, phoneInputVariants, useInputPhone, usePhoneInput };

package/dist/components/input-sensitive.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import { Input } from "@base-ui/react/input";
+//#region src/components/input-sensitive.d.ts
+type InputSensitiveProps = Omit<Input.Props, "size" | "className" | "style" | "type"> & {
+  size?: "sm" | "default" | "lg" | number;
+  className?: string;
+  style?: React$1.CSSProperties;
+  onCopy?: () => void;
+};
+declare function InputSensitive({ className, size, onCopy, onChange, onBlur, onKeyDown, disabled, readOnly, ...props }: InputSensitiveProps): React$1.JSX.Element;
+//#endregion
+export { InputSensitive, type InputSensitiveProps };