@classytic/fluid 0.4.1 → 0.5.0

package/dist/phone-input-B9_XPNvv.mjs

@@ -0,0 +1,429 @@
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+//#region src/components/phone-input.tsx
+const DEFAULT_COUNTRIES = [
+	{
+		code: "GB",
+		name: "United Kingdom",
+		dialCode: "+44",
+		flag: "🇬🇧"
+	},
+	{
+		code: "US",
+		name: "United States",
+		dialCode: "+1",
+		flag: "🇺🇸"
+	},
+	{
+		code: "IE",
+		name: "Ireland",
+		dialCode: "+353",
+		flag: "🇮🇪"
+	},
+	{
+		code: "FR",
+		name: "France",
+		dialCode: "+33",
+		flag: "🇫🇷"
+	},
+	{
+		code: "DE",
+		name: "Germany",
+		dialCode: "+49",
+		flag: "🇩🇪"
+	},
+	{
+		code: "IT",
+		name: "Italy",
+		dialCode: "+39",
+		flag: "🇮🇹"
+	},
+	{
+		code: "ES",
+		name: "Spain",
+		dialCode: "+34",
+		flag: "🇪🇸"
+	},
+	{
+		code: "NL",
+		name: "Netherlands",
+		dialCode: "+31",
+		flag: "🇳🇱"
+	},
+	{
+		code: "BE",
+		name: "Belgium",
+		dialCode: "+32",
+		flag: "🇧🇪"
+	},
+	{
+		code: "PT",
+		name: "Portugal",
+		dialCode: "+351",
+		flag: "🇵🇹"
+	},
+	{
+		code: "CH",
+		name: "Switzerland",
+		dialCode: "+41",
+		flag: "🇨🇭"
+	},
+	{
+		code: "AT",
+		name: "Austria",
+		dialCode: "+43",
+		flag: "🇦🇹"
+	},
+	{
+		code: "SE",
+		name: "Sweden",
+		dialCode: "+46",
+		flag: "🇸🇪"
+	},
+	{
+		code: "NO",
+		name: "Norway",
+		dialCode: "+47",
+		flag: "🇳🇴"
+	},
+	{
+		code: "DK",
+		name: "Denmark",
+		dialCode: "+45",
+		flag: "🇩🇰"
+	},
+	{
+		code: "PL",
+		name: "Poland",
+		dialCode: "+48",
+		flag: "🇵🇱"
+	},
+	{
+		code: "GR",
+		name: "Greece",
+		dialCode: "+30",
+		flag: "🇬🇷"
+	},
+	{
+		code: "CZ",
+		name: "Czech Republic",
+		dialCode: "+420",
+		flag: "🇨🇿"
+	},
+	{
+		code: "RO",
+		name: "Romania",
+		dialCode: "+40",
+		flag: "🇷🇴"
+	},
+	{
+		code: "HU",
+		name: "Hungary",
+		dialCode: "+36",
+		flag: "🇭🇺"
+	},
+	{
+		code: "AU",
+		name: "Australia",
+		dialCode: "+61",
+		flag: "🇦🇺"
+	},
+	{
+		code: "NZ",
+		name: "New Zealand",
+		dialCode: "+64",
+		flag: "🇳🇿"
+	},
+	{
+		code: "CA",
+		name: "Canada",
+		dialCode: "+1",
+		flag: "🇨🇦"
+	},
+	{
+		code: "IN",
+		name: "India",
+		dialCode: "+91",
+		flag: "🇮🇳"
+	},
+	{
+		code: "PK",
+		name: "Pakistan",
+		dialCode: "+92",
+		flag: "🇵🇰"
+	},
+	{
+		code: "BD",
+		name: "Bangladesh",
+		dialCode: "+880",
+		flag: "🇧🇩"
+	},
+	{
+		code: "AE",
+		name: "UAE",
+		dialCode: "+971",
+		flag: "🇦🇪"
+	},
+	{
+		code: "SA",
+		name: "Saudi Arabia",
+		dialCode: "+966",
+		flag: "🇸🇦"
+	},
+	{
+		code: "QA",
+		name: "Qatar",
+		dialCode: "+974",
+		flag: "🇶🇦"
+	},
+	{
+		code: "KW",
+		name: "Kuwait",
+		dialCode: "+965",
+		flag: "🇰🇼"
+	},
+	{
+		code: "SG",
+		name: "Singapore",
+		dialCode: "+65",
+		flag: "🇸🇬"
+	},
+	{
+		code: "MY",
+		name: "Malaysia",
+		dialCode: "+60",
+		flag: "🇲🇾"
+	},
+	{
+		code: "JP",
+		name: "Japan",
+		dialCode: "+81",
+		flag: "🇯🇵"
+	},
+	{
+		code: "KR",
+		name: "South Korea",
+		dialCode: "+82",
+		flag: "🇰🇷"
+	},
+	{
+		code: "CN",
+		name: "China",
+		dialCode: "+86",
+		flag: "🇨🇳"
+	},
+	{
+		code: "HK",
+		name: "Hong Kong",
+		dialCode: "+852",
+		flag: "🇭🇰"
+	},
+	{
+		code: "TW",
+		name: "Taiwan",
+		dialCode: "+886",
+		flag: "🇹🇼"
+	},
+	{
+		code: "TH",
+		name: "Thailand",
+		dialCode: "+66",
+		flag: "🇹🇭"
+	},
+	{
+		code: "PH",
+		name: "Philippines",
+		dialCode: "+63",
+		flag: "🇵🇭"
+	},
+	{
+		code: "VN",
+		name: "Vietnam",
+		dialCode: "+84",
+		flag: "🇻🇳"
+	},
+	{
+		code: "ID",
+		name: "Indonesia",
+		dialCode: "+62",
+		flag: "🇮🇩"
+	},
+	{
+		code: "ZA",
+		name: "South Africa",
+		dialCode: "+27",
+		flag: "🇿🇦"
+	},
+	{
+		code: "NG",
+		name: "Nigeria",
+		dialCode: "+234",
+		flag: "🇳🇬"
+	},
+	{
+		code: "EG",
+		name: "Egypt",
+		dialCode: "+20",
+		flag: "🇪🇬"
+	},
+	{
+		code: "BR",
+		name: "Brazil",
+		dialCode: "+55",
+		flag: "🇧🇷"
+	},
+	{
+		code: "MX",
+		name: "Mexico",
+		dialCode: "+52",
+		flag: "🇲🇽"
+	},
+	{
+		code: "AR",
+		name: "Argentina",
+		dialCode: "+54",
+		flag: "🇦🇷"
+	},
+	{
+		code: "TR",
+		name: "Turkey",
+		dialCode: "+90",
+		flag: "🇹🇷"
+	},
+	{
+		code: "RU",
+		name: "Russia",
+		dialCode: "+7",
+		flag: "🇷🇺"
+	},
+	{
+		code: "IL",
+		name: "Israel",
+		dialCode: "+972",
+		flag: "🇮🇱"
+	}
+];
+function PhoneInput({ className, onChange, value, defaultCountry = "GB", countries = DEFAULT_COUNTRIES, disabled, placeholder = "Phone number", ref, ...props }) {
+	const [isOpen, setIsOpen] = React$1.useState(false);
+	const [searchValue, setSearchValue] = React$1.useState("");
+	const getCountryByCode = React$1.useCallback((code) => countries.find((c) => c.code === code), [countries]);
+	const { country: selectedCountry, number } = React$1.useCallback((val) => {
+		const valString = val ? String(val) : "";
+		if (!valString) return {
+			country: getCountryByCode(defaultCountry) || countries[0],
+			number: ""
+		};
+		const cleanVal = valString.replace(/\s/g, "");
+		let bestMatch = null;
+		for (const country of countries) if (cleanVal.startsWith(country.dialCode)) {
+			if (!bestMatch || country.dialCode.length > bestMatch.dialCode.length) bestMatch = country;
+		}
+		if (bestMatch) return {
+			country: bestMatch,
+			number: cleanVal.slice(bestMatch.dialCode.length)
+		};
+		return {
+			country: getCountryByCode(defaultCountry) || countries[0],
+			number: cleanVal.replace(/^\+/, "")
+		};
+	}, [
+		defaultCountry,
+		countries,
+		getCountryByCode
+	])(value);
+	const handleCountryChange = (newCountry) => {
+		setIsOpen(false);
+		if (number) onChange?.(newCountry.dialCode + number);
+		else onChange?.(newCountry.dialCode);
+	};
+	const handleNumberChange = (e) => {
+		const newNumber = e.target.value.replace(/[^\d]/g, "");
+		if (newNumber) onChange?.(selectedCountry.dialCode + newNumber);
+		else onChange?.("");
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className,
+		children: [/* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-start",
+			className: "p-0 overflow-visible",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open: isOpen,
+				modal: true,
+				onOpenChange: (open) => {
+					setIsOpen(open);
+					if (open) setSearchValue("");
+				},
+				children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						className: "gap-1.5 rounded-none border-r px-3 focus:z-10 min-w-[90px] h-full",
+						disabled,
+						"aria-label": `Select country: ${selectedCountry.name} (${selectedCountry.dialCode})`
+					}),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-base leading-none",
+							children: selectedCountry.flag
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground tabular-nums",
+							children: selectedCountry.dialCode
+						}),
+						/* @__PURE__ */ jsx(ChevronDown, { className: "size-3 opacity-50" })
+					]
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					className: "w-[280px] p-0",
+					align: "start",
+					children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, {
+						value: searchValue,
+						onValueChange: setSearchValue,
+						placeholder: "Search country..."
+					}), /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsxs(ScrollArea, {
+						className: "h-64",
+						children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No country found." }), /* @__PURE__ */ jsx(CommandGroup, { children: countries.filter((c) => c.name.toLowerCase().includes(searchValue.toLowerCase()) || c.dialCode.includes(searchValue) || c.code.toLowerCase().includes(searchValue.toLowerCase())).map((c) => /* @__PURE__ */ jsxs(CommandItem, {
+							className: "gap-2 cursor-pointer",
+							onSelect: () => handleCountryChange(c),
+							value: `${c.name} ${c.code} ${c.dialCode}`,
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-base leading-none",
+									children: c.flag
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "flex-1 text-sm",
+									children: c.name
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-xs text-muted-foreground tabular-nums",
+									children: c.dialCode
+								}),
+								c.code === selectedCountry.code && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
+							]
+						}, c.code)) })]
+					}) })] })
+				})]
+			})
+		}), /* @__PURE__ */ jsx(InputGroupInput, {
+			ref,
+			type: "tel",
+			inputMode: "numeric",
+			className: "rounded-s-none",
+			placeholder,
+			value: number,
+			onChange: handleNumberChange,
+			disabled,
+			...props
+		})]
+	});
+}
+
+//#endregion
+export { PhoneInput as n, DEFAULT_COUNTRIES as t };

package/dist/phone-input-CLH_UjQZ.d.mts

@@ -0,0 +1,31 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/phone-input.d.ts
+interface PhoneCountry {
+  code: string;
+  name: string;
+  dialCode: string;
+  flag: string;
+}
+declare const DEFAULT_COUNTRIES: PhoneCountry[];
+interface PhoneInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  onChange?: (value: string) => void;
+  defaultCountry?: string;
+  /** Custom list of countries to show. Defaults to a built-in list of ~50 countries. */
+  countries?: PhoneCountry[];
+  ref?: React$1.Ref<HTMLInputElement>;
+}
+declare function PhoneInput({
+  className,
+  onChange,
+  value,
+  defaultCountry,
+  countries,
+  disabled,
+  placeholder,
+  ref,
+  ...props
+}: PhoneInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PhoneInputProps as i, PhoneCountry as n, PhoneInput as r, DEFAULT_COUNTRIES as t };

package/dist/{search-context-DR7DBs7S.mjs → search-context-1g3ZmOvx.mjs}

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/search/search-context.tsx
 const SearchContext = createContext(void 0);