@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-phone-input/index.es.js

@@ -0,0 +1,705 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Input as t } from "../input/index.es.js";
+import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../popover/index.es.js";
+import * as a from "react";
+import { AlertCircle as o, Check as s, ChevronDown as c, Copy as l, Phone as u, Search as d, X as f } from "lucide-react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/waka-phone-input/index.tsx
+var g = [
+	{
+		code: "US",
+		name: "United States",
+		dialCode: "+1",
+		flag: "🇺🇸",
+		format: "(###) ###-####",
+		priority: 1
+	},
+	{
+		code: "GB",
+		name: "United Kingdom",
+		dialCode: "+44",
+		flag: "🇬🇧",
+		format: "#### ######",
+		priority: 2
+	},
+	{
+		code: "CA",
+		name: "Canada",
+		dialCode: "+1",
+		flag: "🇨🇦",
+		format: "(###) ###-####",
+		priority: 3
+	},
+	{
+		code: "FR",
+		name: "France",
+		dialCode: "+33",
+		flag: "🇫🇷",
+		format: "# ## ## ## ##",
+		priority: 4
+	},
+	{
+		code: "DE",
+		name: "Germany",
+		dialCode: "+49",
+		flag: "🇩🇪",
+		format: "### #######",
+		priority: 5
+	},
+	{
+		code: "AF",
+		name: "Afghanistan",
+		dialCode: "+93",
+		flag: "🇦🇫",
+		format: "## ### ####"
+	},
+	{
+		code: "AL",
+		name: "Albania",
+		dialCode: "+355",
+		flag: "🇦🇱",
+		format: "## ### ####"
+	},
+	{
+		code: "DZ",
+		name: "Algeria",
+		dialCode: "+213",
+		flag: "🇩🇿",
+		format: "### ## ## ##"
+	},
+	{
+		code: "AR",
+		name: "Argentina",
+		dialCode: "+54",
+		flag: "🇦🇷",
+		format: "## ####-####"
+	},
+	{
+		code: "AU",
+		name: "Australia",
+		dialCode: "+61",
+		flag: "🇦🇺",
+		format: "### ### ###"
+	},
+	{
+		code: "AT",
+		name: "Austria",
+		dialCode: "+43",
+		flag: "🇦🇹",
+		format: "### #######"
+	},
+	{
+		code: "BE",
+		name: "Belgium",
+		dialCode: "+32",
+		flag: "🇧🇪",
+		format: "### ## ## ##"
+	},
+	{
+		code: "BR",
+		name: "Brazil",
+		dialCode: "+55",
+		flag: "🇧🇷",
+		format: "## #####-####"
+	},
+	{
+		code: "CN",
+		name: "China",
+		dialCode: "+86",
+		flag: "🇨🇳",
+		format: "### #### ####"
+	},
+	{
+		code: "CO",
+		name: "Colombia",
+		dialCode: "+57",
+		flag: "🇨🇴",
+		format: "### ### ####"
+	},
+	{
+		code: "HR",
+		name: "Croatia",
+		dialCode: "+385",
+		flag: "🇭🇷",
+		format: "## ### ####"
+	},
+	{
+		code: "CZ",
+		name: "Czech Republic",
+		dialCode: "+420",
+		flag: "🇨🇿",
+		format: "### ### ###"
+	},
+	{
+		code: "DK",
+		name: "Denmark",
+		dialCode: "+45",
+		flag: "🇩🇰",
+		format: "## ## ## ##"
+	},
+	{
+		code: "EG",
+		name: "Egypt",
+		dialCode: "+20",
+		flag: "🇪🇬",
+		format: "### ### ####"
+	},
+	{
+		code: "FI",
+		name: "Finland",
+		dialCode: "+358",
+		flag: "🇫🇮",
+		format: "## ### ####"
+	},
+	{
+		code: "GR",
+		name: "Greece",
+		dialCode: "+30",
+		flag: "🇬🇷",
+		format: "### ### ####"
+	},
+	{
+		code: "HK",
+		name: "Hong Kong",
+		dialCode: "+852",
+		flag: "🇭🇰",
+		format: "#### ####"
+	},
+	{
+		code: "HU",
+		name: "Hungary",
+		dialCode: "+36",
+		flag: "🇭🇺",
+		format: "## ### ####"
+	},
+	{
+		code: "IN",
+		name: "India",
+		dialCode: "+91",
+		flag: "🇮🇳",
+		format: "##### #####"
+	},
+	{
+		code: "ID",
+		name: "Indonesia",
+		dialCode: "+62",
+		flag: "🇮🇩",
+		format: "### ### ####"
+	},
+	{
+		code: "IE",
+		name: "Ireland",
+		dialCode: "+353",
+		flag: "🇮🇪",
+		format: "## ### ####"
+	},
+	{
+		code: "IL",
+		name: "Israel",
+		dialCode: "+972",
+		flag: "🇮🇱",
+		format: "## ### ####"
+	},
+	{
+		code: "IT",
+		name: "Italy",
+		dialCode: "+39",
+		flag: "🇮🇹",
+		format: "### ### ####"
+	},
+	{
+		code: "JP",
+		name: "Japan",
+		dialCode: "+81",
+		flag: "🇯🇵",
+		format: "## #### ####"
+	},
+	{
+		code: "KR",
+		name: "South Korea",
+		dialCode: "+82",
+		flag: "🇰🇷",
+		format: "## #### ####"
+	},
+	{
+		code: "MY",
+		name: "Malaysia",
+		dialCode: "+60",
+		flag: "🇲🇾",
+		format: "## ### ####"
+	},
+	{
+		code: "MX",
+		name: "Mexico",
+		dialCode: "+52",
+		flag: "🇲🇽",
+		format: "### ### ####"
+	},
+	{
+		code: "NL",
+		name: "Netherlands",
+		dialCode: "+31",
+		flag: "🇳🇱",
+		format: "# ## ## ## ##"
+	},
+	{
+		code: "NZ",
+		name: "New Zealand",
+		dialCode: "+64",
+		flag: "🇳🇿",
+		format: "## ### ####"
+	},
+	{
+		code: "NO",
+		name: "Norway",
+		dialCode: "+47",
+		flag: "🇳🇴",
+		format: "### ## ###"
+	},
+	{
+		code: "PK",
+		name: "Pakistan",
+		dialCode: "+92",
+		flag: "🇵🇰",
+		format: "### #######"
+	},
+	{
+		code: "PH",
+		name: "Philippines",
+		dialCode: "+63",
+		flag: "🇵🇭",
+		format: "### ### ####"
+	},
+	{
+		code: "PL",
+		name: "Poland",
+		dialCode: "+48",
+		flag: "🇵🇱",
+		format: "### ### ###"
+	},
+	{
+		code: "PT",
+		name: "Portugal",
+		dialCode: "+351",
+		flag: "🇵🇹",
+		format: "### ### ###"
+	},
+	{
+		code: "RO",
+		name: "Romania",
+		dialCode: "+40",
+		flag: "🇷🇴",
+		format: "### ### ###"
+	},
+	{
+		code: "RU",
+		name: "Russia",
+		dialCode: "+7",
+		flag: "🇷🇺",
+		format: "### ###-##-##"
+	},
+	{
+		code: "SA",
+		name: "Saudi Arabia",
+		dialCode: "+966",
+		flag: "🇸🇦",
+		format: "## ### ####"
+	},
+	{
+		code: "SG",
+		name: "Singapore",
+		dialCode: "+65",
+		flag: "🇸🇬",
+		format: "#### ####"
+	},
+	{
+		code: "ZA",
+		name: "South Africa",
+		dialCode: "+27",
+		flag: "🇿🇦",
+		format: "## ### ####"
+	},
+	{
+		code: "ES",
+		name: "Spain",
+		dialCode: "+34",
+		flag: "🇪🇸",
+		format: "### ### ###"
+	},
+	{
+		code: "SE",
+		name: "Sweden",
+		dialCode: "+46",
+		flag: "🇸🇪",
+		format: "## ### ## ##"
+	},
+	{
+		code: "CH",
+		name: "Switzerland",
+		dialCode: "+41",
+		flag: "🇨🇭",
+		format: "## ### ## ##"
+	},
+	{
+		code: "TW",
+		name: "Taiwan",
+		dialCode: "+886",
+		flag: "🇹🇼",
+		format: "### ### ###"
+	},
+	{
+		code: "TH",
+		name: "Thailand",
+		dialCode: "+66",
+		flag: "🇹🇭",
+		format: "## ### ####"
+	},
+	{
+		code: "TR",
+		name: "Turkey",
+		dialCode: "+90",
+		flag: "🇹🇷",
+		format: "### ### ####"
+	},
+	{
+		code: "UA",
+		name: "Ukraine",
+		dialCode: "+380",
+		flag: "🇺🇦",
+		format: "## ### ####"
+	},
+	{
+		code: "AE",
+		name: "United Arab Emirates",
+		dialCode: "+971",
+		flag: "🇦🇪",
+		format: "## ### ####"
+	},
+	{
+		code: "VN",
+		name: "Vietnam",
+		dialCode: "+84",
+		flag: "🇻🇳",
+		format: "## ### ####"
+	}
+];
+function _(e, t) {
+	if (!t) return e;
+	let n = e.replace(/\D/g, ""), r = "", i = 0;
+	for (let e = 0; e < t.length && i < n.length; e++) t[e] === "#" ? (r += n[i], i++) : r += t[e];
+	return i < n.length && (r += n.slice(i)), r;
+}
+function v(e) {
+	return e.replace(/\D/g, "");
+}
+function ee(e) {
+	return e.format ? e.format.replace(/#/g, "0") : "";
+}
+function y(e, t, n) {
+	let r = v(e);
+	if (r.length < 6 || r.length > 15) return !1;
+	if (t.format) {
+		let e = (t.format.match(/#/g) || []).length;
+		if (Math.abs(r.length - e) > 2) return !1;
+	}
+	return !0;
+}
+function b(e) {
+	return g.find((t) => t.code.toLowerCase() === e.toLowerCase());
+}
+function x(e) {
+	return g.find((t) => t.dialCode === e);
+}
+function te(e, t) {
+	let n = t?.map((e) => e.toUpperCase()) || [];
+	return [...e].sort((e, t) => {
+		let r = e.priority || 999, i = t.priority || 999, a = n.indexOf(e.code), o = n.indexOf(t.code);
+		return a !== -1 && o === -1 ? -1 : a === -1 && o !== -1 ? 1 : a !== -1 && o !== -1 ? a - o : r === i ? e.name.localeCompare(t.name) : r - i;
+	});
+}
+function S(e = {}) {
+	let { initialCountry: t = "US", initialValue: n = "", validate: r } = e, [i, o] = a.useState(t), [s, c] = a.useState(n), l = a.useMemo(() => b(i) || g[0], [i]), u = a.useMemo(() => _(s, l.format), [s, l.format]), d = a.useMemo(() => `${l.dialCode} ${u}`.trim(), [l.dialCode, u]), f = a.useMemo(() => {
+		let e = {
+			countryCode: l.code,
+			dialCode: l.dialCode,
+			nationalNumber: v(s),
+			fullNumber: d,
+			isValid: !0
+		};
+		return r ? r(e) : y(s, l);
+	}, [
+		s,
+		l,
+		d,
+		r
+	]), p = a.useMemo(() => ({
+		countryCode: l.code,
+		dialCode: l.dialCode,
+		nationalNumber: v(s),
+		fullNumber: d,
+		isValid: f
+	}), [
+		l,
+		s,
+		d,
+		f
+	]), m = a.useCallback((e) => {
+		o(e);
+	}, []), h = a.useCallback(() => {
+		c("");
+	}, []);
+	return {
+		country: l,
+		setCountry: m,
+		nationalNumber: u,
+		setNationalNumber: c,
+		value: p,
+		isValid: f,
+		format: a.useCallback((e) => _(e, l.format), [l.format]),
+		unformat: a.useCallback((e) => v(e), []),
+		clear: h,
+		getFullNumber: a.useCallback(() => d, [d])
+	};
+}
+function C({ value: x, onChange: S, defaultCountry: C = "US", placeholder: ne, disabled: T = !1, error: re = !1, size: E = "md", showCopy: ie = !0, showClear: ae = !0, onCopy: oe, countries: D, preferredCountries: O, validate: k, className: se, id: ce, name: A, required: le = !1, autoFocus: ue = !1 }) {
+	let [j, M] = a.useState(!1), [N, P] = a.useState(""), [F, I] = a.useState(() => b(C) || g[0]), [L, R] = a.useState(""), [z, B] = a.useState(!1), V = a.useRef(null), H = a.useRef(null);
+	a.useEffect(() => {
+		if (x) if (typeof x == "string") R(v(x));
+		else {
+			let e = b(x.countryCode);
+			e && I(e), R(x.nationalNumber);
+		}
+	}, []);
+	let U = a.useMemo(() => {
+		let e = g;
+		if (D && D.length > 0) {
+			let t = D.map((e) => e.toUpperCase());
+			e = g.filter((e) => t.includes(e.code));
+		}
+		return te(e, O);
+	}, [D, O]), W = a.useMemo(() => {
+		if (!N) return U;
+		let e = N.toLowerCase();
+		return U.filter((t) => t.name.toLowerCase().includes(e) || t.code.toLowerCase().includes(e) || t.dialCode.includes(e));
+	}, [U, N]), { popularCountries: G, otherCountries: K } = a.useMemo(() => ({
+		popularCountries: W.filter((e) => e.priority && e.priority <= 5),
+		otherCountries: W.filter((e) => !e.priority || e.priority > 5)
+	}), [W]), q = a.useMemo(() => _(L, F.format), [L, F.format]), J = a.useMemo(() => `${F.dialCode} ${q}`.trim(), [F.dialCode, q]), Y = a.useMemo(() => {
+		if (!L) return !1;
+		let e = {
+			countryCode: F.code,
+			dialCode: F.dialCode,
+			nationalNumber: v(L),
+			fullNumber: J,
+			isValid: !0
+		};
+		return k ? k(e) : y(L, F);
+	}, [
+		L,
+		F,
+		J,
+		k
+	]), X = a.useCallback((e, t) => {
+		let n = _(t, e.format), r = `${e.dialCode} ${n}`.trim(), i = v(t), a = {
+			countryCode: e.code,
+			dialCode: e.dialCode,
+			nationalNumber: i,
+			fullNumber: r,
+			isValid: y(t, e, k)
+		};
+		S?.(a);
+	}, [S, k]), de = (e) => {
+		let t = e.target.value, n = v(t);
+		R(n), X(F, n);
+	}, Z = (e) => {
+		I(e), M(!1), P(""), X(e, L), setTimeout(() => V.current?.focus(), 0);
+	}, fe = async () => {
+		let e = J;
+		try {
+			await navigator.clipboard.writeText(e), B(!0), oe?.(e), setTimeout(() => B(!1), 2e3);
+		} catch {
+			console.error("Failed to copy to clipboard");
+		}
+	}, pe = () => {
+		R(""), X(F, ""), V.current?.focus();
+	};
+	a.useEffect(() => {
+		j && setTimeout(() => H.current?.focus(), 0);
+	}, [j]);
+	let Q = {
+		sm: "h-8 text-xs",
+		md: "h-9 text-sm",
+		lg: "h-10 text-base"
+	}, $ = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}, me = {
+		sm: "px-2",
+		md: "px-3",
+		lg: "px-4"
+	}, he = ne || ee(F) || "Enter phone number", ge = L.length > 0;
+	return /* @__PURE__ */ h("div", {
+		className: e("relative", se),
+		children: [/* @__PURE__ */ h("div", {
+			className: e("flex items-center rounded-md border border-input bg-transparent shadow-sm transition-colors", "focus-within:ring-1 focus-within:ring-ring", re && "border-destructive focus-within:ring-destructive", T && "cursor-not-allowed opacity-50", Q[E]),
+			children: [
+				/* @__PURE__ */ h(n, {
+					open: j,
+					onOpenChange: M,
+					children: [/* @__PURE__ */ m(i, {
+						asChild: !0,
+						children: /* @__PURE__ */ h("button", {
+							type: "button",
+							disabled: T,
+							className: e("flex items-center gap-1 border-r border-input bg-muted/50 rounded-l-md transition-colors", "hover:bg-muted focus:outline-none focus:bg-muted", me[E], Q[E], T && "pointer-events-none"),
+							"aria-label": "Select country",
+							"aria-expanded": j,
+							children: [
+								/* @__PURE__ */ m("span", {
+									className: "text-base",
+									role: "img",
+									"aria-label": F.name,
+									children: F.flag
+								}),
+								/* @__PURE__ */ m("span", {
+									className: "text-xs text-muted-foreground",
+									children: F.dialCode
+								}),
+								/* @__PURE__ */ m(c, { className: e($[E], "text-muted-foreground transition-transform", j && "rotate-180") })
+							]
+						})
+					}), /* @__PURE__ */ h(r, {
+						className: "w-64 p-0",
+						align: "start",
+						sideOffset: 4,
+						children: [/* @__PURE__ */ h("div", {
+							className: "flex items-center border-b px-3 py-2",
+							children: [
+								/* @__PURE__ */ m(d, { className: "h-4 w-4 text-muted-foreground mr-2 flex-shrink-0" }),
+								/* @__PURE__ */ m("input", {
+									ref: H,
+									type: "text",
+									placeholder: "Search countries...",
+									value: N,
+									onChange: (e) => P(e.target.value),
+									className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+								}),
+								N && /* @__PURE__ */ m("button", {
+									type: "button",
+									onClick: () => P(""),
+									className: "text-muted-foreground hover:text-foreground",
+									children: /* @__PURE__ */ m(f, { className: "h-3 w-3" })
+								})
+							]
+						}), /* @__PURE__ */ h("div", {
+							className: "max-h-64 overflow-y-auto",
+							children: [
+								G.length > 0 && !N && /* @__PURE__ */ h(p, { children: [
+									/* @__PURE__ */ m("div", {
+										className: "px-3 py-1.5 text-xs font-medium text-muted-foreground",
+										children: "Popular"
+									}),
+									G.map((e) => /* @__PURE__ */ m(w, {
+										country: e,
+										isSelected: F.code === e.code,
+										onClick: () => Z(e)
+									}, `popular-${e.code}`)),
+									/* @__PURE__ */ m("div", { className: "mx-3 my-1 border-b" })
+								] }),
+								!N && K.length > 0 && /* @__PURE__ */ m("div", {
+									className: "px-3 py-1.5 text-xs font-medium text-muted-foreground",
+									children: "All Countries"
+								}),
+								(N ? W : K).map((e) => /* @__PURE__ */ m(w, {
+									country: e,
+									isSelected: F.code === e.code,
+									onClick: () => Z(e)
+								}, e.code)),
+								W.length === 0 && /* @__PURE__ */ m("div", {
+									className: "py-6 text-center text-sm text-muted-foreground",
+									children: "No countries found"
+								})
+							]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "flex items-center pl-2",
+					children: /* @__PURE__ */ m(u, { className: e($[E], "text-muted-foreground") })
+				}),
+				/* @__PURE__ */ m(t, {
+					ref: V,
+					id: ce,
+					name: A,
+					type: "tel",
+					inputMode: "tel",
+					value: q,
+					onChange: de,
+					placeholder: he,
+					disabled: T,
+					required: le,
+					autoFocus: ue,
+					autoComplete: "tel-national",
+					className: e("border-0 shadow-none focus-visible:ring-0 flex-1", Q[E]),
+					"aria-label": "Phone number"
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "flex items-center gap-1 pr-2",
+					children: [
+						ge && /* @__PURE__ */ m("div", {
+							className: e("flex items-center justify-center", Y ? "text-green-500" : "text-muted-foreground/50"),
+							children: Y ? /* @__PURE__ */ m(s, { className: $[E] }) : /* @__PURE__ */ m(o, { className: e($[E], "opacity-50") })
+						}),
+						ae && L && !T && /* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: pe,
+							className: "text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded",
+							"aria-label": "Clear phone number",
+							children: /* @__PURE__ */ m(f, { className: $[E] })
+						}),
+						ie && L && !T && /* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: fe,
+							className: e("transition-colors p-0.5 rounded", z ? "text-green-500" : "text-muted-foreground hover:text-foreground"),
+							"aria-label": z ? "Copied!" : "Copy phone number",
+							children: m(z ? s : l, { className: $[E] })
+						})
+					]
+				})
+			]
+		}), A && /* @__PURE__ */ m("input", {
+			type: "hidden",
+			name: `${A}_full`,
+			value: J
+		})]
+	});
+}
+function w({ country: t, isSelected: n, onClick: r }) {
+	return /* @__PURE__ */ h("button", {
+		type: "button",
+		onClick: r,
+		className: e("w-full flex items-center gap-3 px-3 py-2 text-sm transition-colors", "hover:bg-accent hover:text-accent-foreground", "focus:outline-none focus:bg-accent focus:text-accent-foreground", n && "bg-accent"),
+		children: [
+			/* @__PURE__ */ m("span", {
+				className: "text-base",
+				role: "img",
+				"aria-label": t.name,
+				children: t.flag
+			}),
+			/* @__PURE__ */ m("span", {
+				className: "flex-1 text-left truncate",
+				children: t.name
+			}),
+			/* @__PURE__ */ m("span", {
+				className: "text-xs text-muted-foreground",
+				children: t.dialCode
+			}),
+			n && /* @__PURE__ */ m(s, { className: "h-4 w-4 text-primary flex-shrink-0" })
+		]
+	});
+}
+//#endregion
+export { g as COUNTRIES, C as default, _ as formatPhoneNumber, b as getCountryByCode, x as getCountryByDialCode, v as unformatPhoneNumber, S as usePhoneInput };