@greatapps/common 1.1.174 → 1.1.175

package/src/components/ui/form/PhoneInput.tsx

@@ -1,148 +1,205 @@
 'use client';
 
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
-import Image from 'next/image';
-import { ChevronDown } from 'lucide-react';
-import { Input } from './Input';
-import { Separator } from '../data-display/Separator';
-import { cn } from '../../../infra/utils/clsx';
-
-export interface PhoneCountry {
-  code: string;
-  label: string;
-  emoji: string;
+import { useState, useEffect, useRef } from 'react';
+import { AsYouType, CountryCode } from 'libphonenumber-js';
+import { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';
+import { IconChevronDown, IconSearch } from '@tabler/icons-react';
+import { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';
+
+function formatNational(digits: string, iso: string): string {
+  const raw = digits.replace(/\D/g, '');
+  if (!raw) return '';
+  return new AsYouType(iso as CountryCode).input(raw);
 }
 
-export const PHONE_COUNTRIES: PhoneCountry[] = [
-  { code: '+55', label: 'Brasil', emoji: '🇧🇷' },
-  { code: '+1', label: 'EUA', emoji: '🇺🇸' },
-  { code: '+351', label: 'Portugal', emoji: '🇵🇹' },
-  { code: '+54', label: 'Argentina', emoji: '🇦🇷' },
-  { code: '+56', label: 'Chile', emoji: '🇨🇱' },
-  { code: '+52', label: 'México', emoji: '🇲🇽' },
-  { code: '+44', label: 'Reino Unido', emoji: '🇬🇧' },
-  { code: '+34', label: 'Espanha', emoji: '🇪🇸' },
-  { code: '+49', label: 'Alemanha', emoji: '🇩🇪' },
-  { code: '+33', label: 'França', emoji: '🇫🇷' },
-  { code: '+57', label: 'Colômbia', emoji: '🇨🇴' },
-  { code: '+598', label: 'Uruguai', emoji: '🇺🇾' },
-];
-
-interface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type'> {
+interface PhoneInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
   label?: string;
   optional?: boolean;
   required?: boolean;
   hintMessage?: string;
   error?: boolean;
   errorMessage?: string;
-  countryCode?: string;
-  countryFlagSrc?: string;
-  countryFlagAlt?: string;
+  placeholder?: string;
+  disabled?: boolean;
   classnameContainer?: string;
-  selectedCountry?: PhoneCountry;
-  onCountryChange?: (country: PhoneCountry) => void;
+  className?: string;
 }
 
-const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
-  (
-    {
-      label,
-      optional = false,
-      required = false,
-      hintMessage,
-      error = false,
-      errorMessage,
-      countryCode = '+55',
-      countryFlagSrc = '/icons/brazil-flag.svg',
-      countryFlagAlt = 'Brazil flag',
-      className,
-      classnameContainer,
-      selectedCountry,
-      onCountryChange,
-      ...props
-    },
-    ref
-  ) => {
-    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
-    const showMessage = finalMessage && finalMessage.trim() !== '';
-
-    const displayCode = selectedCountry ? selectedCountry.code : countryCode;
-
-    return (
-      <div className={cn('flex flex-col gap-1.5')}>
-        {label && (
-          <div className="flex items-center gap-1 paragraph-xsmall-semibold">
-            <span className="text-gray-600">{label}</span>
-            {optional && <span className="text-gray-500">(Opcional)</span>}
-            {required && <span className="text-red-600">*</span>}
-          </div>
-        )}
+export default function PhoneInput({
+  value,
+  onChange,
+  label,
+  optional = false,
+  required = false,
+  hintMessage,
+  error = false,
+  errorMessage,
+  placeholder,
+  disabled = false,
+  classnameContainer,
+  className,
+}: PhoneInputProps) {
+  const parsed = parsePhoneValue(value ?? '');
+  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);
+  const [phoneNumber, setPhoneNumber] = useState(parsed.number);
+  const [search, setSearch] = useState('');
+  const [open, setOpen] = useState(false);
+  const prevValueRef = useRef(value);
+  const inputRef = useRef<HTMLInputElement>(null);
 
-        <div
-          className={cn(
-            'flex gap-2 items-center border rounded-lg h-10 transition-colors',
-            error
-              ? 'border-red-600 hover:border-red-700'
-              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950',
-            classnameContainer
-          )}
-        >
-          {onCountryChange ? (
-            <div className="relative flex items-center gap-2 px-4 cursor-pointer shrink-0">
-              <span className="text-base leading-none">{selectedCountry?.emoji ?? '🇧🇷'}</span>
-              <span className="paragraph-small-regular text-gray-950">{displayCode}</span>
-              <ChevronDown size={14} className="text-gray-500" />
-              <select
-                className="absolute inset-0 opacity-0 cursor-pointer w-full"
-                value={displayCode}
-                onChange={(e) => {
-                  const country = PHONE_COUNTRIES.find((c) => c.code === e.target.value);
-                  if (country) onCountryChange(country);
-                }}
-              >
-                {PHONE_COUNTRIES.map((c) => (
-                  <option key={c.code} value={c.code}>
-                    {c.emoji} {c.code} — {c.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          ) : (
-            <div className="flex items-center gap-2 px-4">
-              <Image
-                src={countryFlagSrc}
-                alt={countryFlagAlt}
-                width={20}
-                height={20}
-                className="h-5! w-5! rounded-full"
-              />
-              <span className="paragraph-small-regular text-gray-950">{countryCode}</span>
-            </div>
-          )}
+  useEffect(() => {
+    if (value !== prevValueRef.current) {
+      prevValueRef.current = value;
+      const p = parsePhoneValue(value ?? '');
+      setSelectedCountry(p.country);
+      setPhoneNumber(formatNational(p.number, p.country.iso));
+    }
+  }, [value]);
+
+  const emit = (country: Country, number: string) => {
+    onChange?.(`${country.dial} ${number}`);
+  };
+
+  const handleCountrySelect = (country: Country) => {
+    const reformatted = formatNational(phoneNumber, country.iso);
+    setSelectedCountry(country);
+    setPhoneNumber(reformatted);
+    setOpen(false);
+    setSearch('');
+    emit(country, reformatted);
+  };
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawInput = e.target.value;
+    const cursorPos = e.target.selectionStart ?? rawInput.length;
+    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\D/g, '').length;
+
+    const formatted = formatNational(rawInput, selectedCountry.iso);
+    setPhoneNumber(formatted);
+    emit(selectedCountry, formatted);
 
-          <Separator orientation="vertical" />
-
-          <Input
-            ref={ref}
-            type="tel"
-            className={cn(
-              'paragraph-small-medium w-full h-full text-gray-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',
-              className
-            )}
-            {...props}
-          />
+    requestAnimationFrame(() => {
+      if (!inputRef.current) return;
+      let digitCount = 0;
+      let newPos = formatted.length;
+      for (let i = 0; i < formatted.length; i++) {
+        if (/\d/.test(formatted[i])) {
+          digitCount++;
+          if (digitCount === digitsBeforeCursor) {
+            newPos = i + 1;
+            break;
+          }
+        }
+      }
+      inputRef.current.setSelectionRange(newPos, newPos);
+    });
+  };
+
+  const filtered = COUNTRIES.filter(
+    (c) =>
+      c.name.toLowerCase().includes(search.toLowerCase()) ||
+      c.dial.includes(search) ||
+      c.iso.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+  const showMessage = finalMessage && finalMessage.trim() !== '';
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {label && (
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
+          <span className="text-zinc-600">{label}</span>
+          {optional && <span className="text-zinc-500">(Opcional)</span>}
+          {required && <span className="text-red-600">*</span>}
         </div>
+      )}
 
-        {showMessage && (
-          <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-gray-600')}>
-            {finalMessage}
-          </span>
+      <div
+        className={cn(
+          'flex gap-2 items-center border rounded-lg h-10 transition-colors',
+          error
+            ? 'border-red-600 hover:border-red-700'
+            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',
+          disabled && 'opacity-50 cursor-not-allowed',
+          classnameContainer
         )}
-      </div>
-    );
-  }
-);
+      >
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className="flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none"
+              disabled={disabled}
+            >
+              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className="w-5 h-5 rounded-full" />
+              <span className="paragraph-small-regular text-zinc-950">{selectedCountry.dial}</span>
+              <IconChevronDown size={14} className={cn("text-zinc-500 transition-transform duration-200", open && "rotate-180")} />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="w-72 p-0" align="start">
+            <div className="flex items-center gap-2 p-2 border-b border-zinc-100">
+              <IconSearch size={14} className="text-zinc-400 shrink-0" />
+              <input
+                type="text"
+                className="flex-1 text-sm outline-none placeholder:text-zinc-400"
+                placeholder="Buscar país..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                autoFocus
+              />
+            </div>
+            <div className="max-h-60 overflow-y-auto overscroll-contain" onTouchMove={(e) => e.stopPropagation()}>
+              {filtered.map((country) => (
+                <button
+                  key={country.iso}
+                  type="button"
+                  className={cn(
+                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',
+                    selectedCountry.iso === country.iso && 'bg-zinc-100'
+                  )}
+                  onClick={() => handleCountrySelect(country)}
+                >
+                  <img src={flagUrl(country.iso)} alt={country.iso} className="w-5 h-5 rounded-full shrink-0" />
+                  <span className="paragraph-small-regular text-zinc-950 flex-1 truncate">
+                    {country.name}
+                  </span>
+                  <span className="paragraph-small-regular text-zinc-500 shrink-0">
+                    {country.dial}
+                  </span>
+                </button>
+              ))}
+              {filtered.length === 0 && (
+                <p className="text-sm text-zinc-500 p-3 text-center">Nenhum país encontrado</p>
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        <Separator orientation="vertical" />
 
-PhoneInput.displayName = 'PhoneInput';
+        <Input
+          ref={inputRef}
+          type="tel"
+          value={phoneNumber}
+          onChange={handleNumberChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={cn(
+            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',
+            disabled && 'cursor-not-allowed',
+            className
+          )}
+        />
+      </div>
 
-export default PhoneInput;
+      {showMessage && (
+        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>
+          {finalMessage}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/utils/countries.ts

@@ -0,0 +1,224 @@
+export interface Country {
+  iso: string;
+  name: string;
+  dial: string;
+}
+
+export function flagUrl(iso: string): string {
+  return `https://hatscripts.github.io/circle-flags/flags/${iso.toLowerCase()}.svg`;
+}
+
+export const COUNTRIES: Country[] = [
+  { iso: 'BR', name: 'Brasil', dial: '+55' },
+  { iso: 'US', name: 'United States', dial: '+1' },
+  { iso: 'PT', name: 'Portugal', dial: '+351' },
+  { iso: 'AF', name: 'Afghanistan', dial: '+93' },
+  { iso: 'AL', name: 'Albania', dial: '+355' },
+  { iso: 'DZ', name: 'Algeria', dial: '+213' },
+  { iso: 'AD', name: 'Andorra', dial: '+376' },
+  { iso: 'AO', name: 'Angola', dial: '+244' },
+  { iso: 'AG', name: 'Antigua and Barbuda', dial: '+1268' },
+  { iso: 'AR', name: 'Argentina', dial: '+54' },
+  { iso: 'AM', name: 'Armenia', dial: '+374' },
+  { iso: 'AU', name: 'Australia', dial: '+61' },
+  { iso: 'AT', name: 'Austria', dial: '+43' },
+  { iso: 'AZ', name: 'Azerbaijan', dial: '+994' },
+  { iso: 'BS', name: 'Bahamas', dial: '+1242' },
+  { iso: 'BH', name: 'Bahrain', dial: '+973' },
+  { iso: 'BD', name: 'Bangladesh', dial: '+880' },
+  { iso: 'BB', name: 'Barbados', dial: '+1246' },
+  { iso: 'BY', name: 'Belarus', dial: '+375' },
+  { iso: 'BE', name: 'Belgium', dial: '+32' },
+  { iso: 'BZ', name: 'Belize', dial: '+501' },
+  { iso: 'BJ', name: 'Benin', dial: '+229' },
+  { iso: 'BT', name: 'Bhutan', dial: '+975' },
+  { iso: 'BO', name: 'Bolivia', dial: '+591' },
+  { iso: 'BA', name: 'Bosnia and Herzegovina', dial: '+387' },
+  { iso: 'BW', name: 'Botswana', dial: '+267' },
+  { iso: 'BN', name: 'Brunei', dial: '+673' },
+  { iso: 'BG', name: 'Bulgaria', dial: '+359' },
+  { iso: 'BF', name: 'Burkina Faso', dial: '+226' },
+  { iso: 'BI', name: 'Burundi', dial: '+257' },
+  { iso: 'KH', name: 'Cambodia', dial: '+855' },
+  { iso: 'CM', name: 'Cameroon', dial: '+237' },
+  { iso: 'CA', name: 'Canada', dial: '+1' },
+  { iso: 'CV', name: 'Cape Verde', dial: '+238' },
+  { iso: 'CF', name: 'Central African Republic', dial: '+236' },
+  { iso: 'TD', name: 'Chad', dial: '+235' },
+  { iso: 'CL', name: 'Chile', dial: '+56' },
+  { iso: 'CN', name: 'China', dial: '+86' },
+  { iso: 'CO', name: 'Colombia', dial: '+57' },
+  { iso: 'KM', name: 'Comoros', dial: '+269' },
+  { iso: 'CG', name: 'Congo', dial: '+242' },
+  { iso: 'CD', name: 'Congo (DR)', dial: '+243' },
+  { iso: 'CR', name: 'Costa Rica', dial: '+506' },
+  { iso: 'HR', name: 'Croatia', dial: '+385' },
+  { iso: 'CU', name: 'Cuba', dial: '+53' },
+  { iso: 'CY', name: 'Cyprus', dial: '+357' },
+  { iso: 'CZ', name: 'Czech Republic', dial: '+420' },
+  { iso: 'DK', name: 'Denmark', dial: '+45' },
+  { iso: 'DJ', name: 'Djibouti', dial: '+253' },
+  { iso: 'DM', name: 'Dominica', dial: '+1767' },
+  { iso: 'DO', name: 'Dominican Republic', dial: '+1809' },
+  { iso: 'EC', name: 'Ecuador', dial: '+593' },
+  { iso: 'EG', name: 'Egypt', dial: '+20' },
+  { iso: 'SV', name: 'El Salvador', dial: '+503' },
+  { iso: 'GQ', name: 'Equatorial Guinea', dial: '+240' },
+  { iso: 'ER', name: 'Eritrea', dial: '+291' },
+  { iso: 'EE', name: 'Estonia', dial: '+372' },
+  { iso: 'SZ', name: 'Eswatini', dial: '+268' },
+  { iso: 'ET', name: 'Ethiopia', dial: '+251' },
+  { iso: 'FJ', name: 'Fiji', dial: '+679' },
+  { iso: 'FI', name: 'Finland', dial: '+358' },
+  { iso: 'FR', name: 'France', dial: '+33' },
+  { iso: 'GA', name: 'Gabon', dial: '+241' },
+  { iso: 'GM', name: 'Gambia', dial: '+220' },
+  { iso: 'GE', name: 'Georgia', dial: '+995' },
+  { iso: 'DE', name: 'Germany', dial: '+49' },
+  { iso: 'GH', name: 'Ghana', dial: '+233' },
+  { iso: 'GR', name: 'Greece', dial: '+30' },
+  { iso: 'GD', name: 'Grenada', dial: '+1473' },
+  { iso: 'GT', name: 'Guatemala', dial: '+502' },
+  { iso: 'GN', name: 'Guinea', dial: '+224' },
+  { iso: 'GW', name: 'Guinea-Bissau', dial: '+245' },
+  { iso: 'GY', name: 'Guyana', dial: '+592' },
+  { iso: 'HT', name: 'Haiti', dial: '+509' },
+  { iso: 'HN', name: 'Honduras', dial: '+504' },
+  { iso: 'HU', name: 'Hungary', dial: '+36' },
+  { iso: 'IS', name: 'Iceland', dial: '+354' },
+  { iso: 'IN', name: 'India', dial: '+91' },
+  { iso: 'ID', name: 'Indonesia', dial: '+62' },
+  { iso: 'IR', name: 'Iran', dial: '+98' },
+  { iso: 'IQ', name: 'Iraq', dial: '+964' },
+  { iso: 'IE', name: 'Ireland', dial: '+353' },
+  { iso: 'IL', name: 'Israel', dial: '+972' },
+  { iso: 'IT', name: 'Italy', dial: '+39' },
+  { iso: 'JM', name: 'Jamaica', dial: '+1876' },
+  { iso: 'JP', name: 'Japan', dial: '+81' },
+  { iso: 'JO', name: 'Jordan', dial: '+962' },
+  { iso: 'KZ', name: 'Kazakhstan', dial: '+7' },
+  { iso: 'KE', name: 'Kenya', dial: '+254' },
+  { iso: 'KI', name: 'Kiribati', dial: '+686' },
+  { iso: 'KW', name: 'Kuwait', dial: '+965' },
+  { iso: 'KG', name: 'Kyrgyzstan', dial: '+996' },
+  { iso: 'LA', name: 'Laos', dial: '+856' },
+  { iso: 'LV', name: 'Latvia', dial: '+371' },
+  { iso: 'LB', name: 'Lebanon', dial: '+961' },
+  { iso: 'LS', name: 'Lesotho', dial: '+266' },
+  { iso: 'LR', name: 'Liberia', dial: '+231' },
+  { iso: 'LY', name: 'Libya', dial: '+218' },
+  { iso: 'LI', name: 'Liechtenstein', dial: '+423' },
+  { iso: 'LT', name: 'Lithuania', dial: '+370' },
+  { iso: 'LU', name: 'Luxembourg', dial: '+352' },
+  { iso: 'MG', name: 'Madagascar', dial: '+261' },
+  { iso: 'MW', name: 'Malawi', dial: '+265' },
+  { iso: 'MY', name: 'Malaysia', dial: '+60' },
+  { iso: 'MV', name: 'Maldives', dial: '+960' },
+  { iso: 'ML', name: 'Mali', dial: '+223' },
+  { iso: 'MT', name: 'Malta', dial: '+356' },
+  { iso: 'MH', name: 'Marshall Islands', dial: '+692' },
+  { iso: 'MR', name: 'Mauritania', dial: '+222' },
+  { iso: 'MU', name: 'Mauritius', dial: '+230' },
+  { iso: 'MX', name: 'Mexico', dial: '+52' },
+  { iso: 'FM', name: 'Micronesia', dial: '+691' },
+  { iso: 'MD', name: 'Moldova', dial: '+373' },
+  { iso: 'MC', name: 'Monaco', dial: '+377' },
+  { iso: 'MN', name: 'Mongolia', dial: '+976' },
+  { iso: 'ME', name: 'Montenegro', dial: '+382' },
+  { iso: 'MA', name: 'Morocco', dial: '+212' },
+  { iso: 'MZ', name: 'Mozambique', dial: '+258' },
+  { iso: 'MM', name: 'Myanmar', dial: '+95' },
+  { iso: 'NA', name: 'Namibia', dial: '+264' },
+  { iso: 'NR', name: 'Nauru', dial: '+674' },
+  { iso: 'NP', name: 'Nepal', dial: '+977' },
+  { iso: 'NL', name: 'Netherlands', dial: '+31' },
+  { iso: 'NZ', name: 'New Zealand', dial: '+64' },
+  { iso: 'NI', name: 'Nicaragua', dial: '+505' },
+  { iso: 'NE', name: 'Niger', dial: '+227' },
+  { iso: 'NG', name: 'Nigeria', dial: '+234' },
+  { iso: 'KP', name: 'North Korea', dial: '+850' },
+  { iso: 'MK', name: 'North Macedonia', dial: '+389' },
+  { iso: 'NO', name: 'Norway', dial: '+47' },
+  { iso: 'OM', name: 'Oman', dial: '+968' },
+  { iso: 'PK', name: 'Pakistan', dial: '+92' },
+  { iso: 'PW', name: 'Palau', dial: '+680' },
+  { iso: 'PS', name: 'Palestine', dial: '+970' },
+  { iso: 'PA', name: 'Panama', dial: '+507' },
+  { iso: 'PG', name: 'Papua New Guinea', dial: '+675' },
+  { iso: 'PY', name: 'Paraguay', dial: '+595' },
+  { iso: 'PE', name: 'Peru', dial: '+51' },
+  { iso: 'PH', name: 'Philippines', dial: '+63' },
+  { iso: 'PL', name: 'Poland', dial: '+48' },
+  { iso: 'QA', name: 'Qatar', dial: '+974' },
+  { iso: 'RO', name: 'Romania', dial: '+40' },
+  { iso: 'RU', name: 'Russia', dial: '+7' },
+  { iso: 'RW', name: 'Rwanda', dial: '+250' },
+  { iso: 'KN', name: 'Saint Kitts and Nevis', dial: '+1869' },
+  { iso: 'LC', name: 'Saint Lucia', dial: '+1758' },
+  { iso: 'VC', name: 'Saint Vincent and the Grenadines', dial: '+1784' },
+  { iso: 'WS', name: 'Samoa', dial: '+685' },
+  { iso: 'SM', name: 'San Marino', dial: '+378' },
+  { iso: 'ST', name: 'São Tomé and Príncipe', dial: '+239' },
+  { iso: 'SA', name: 'Saudi Arabia', dial: '+966' },
+  { iso: 'SN', name: 'Senegal', dial: '+221' },
+  { iso: 'RS', name: 'Serbia', dial: '+381' },
+  { iso: 'SC', name: 'Seychelles', dial: '+248' },
+  { iso: 'SL', name: 'Sierra Leone', dial: '+232' },
+  { iso: 'SG', name: 'Singapore', dial: '+65' },
+  { iso: 'SK', name: 'Slovakia', dial: '+421' },
+  { iso: 'SI', name: 'Slovenia', dial: '+386' },
+  { iso: 'SB', name: 'Solomon Islands', dial: '+677' },
+  { iso: 'SO', name: 'Somalia', dial: '+252' },
+  { iso: 'ZA', name: 'South Africa', dial: '+27' },
+  { iso: 'KR', name: 'South Korea', dial: '+82' },
+  { iso: 'SS', name: 'South Sudan', dial: '+211' },
+  { iso: 'ES', name: 'Spain', dial: '+34' },
+  { iso: 'LK', name: 'Sri Lanka', dial: '+94' },
+  { iso: 'SD', name: 'Sudan', dial: '+249' },
+  { iso: 'SR', name: 'Suriname', dial: '+597' },
+  { iso: 'SE', name: 'Sweden', dial: '+46' },
+  { iso: 'CH', name: 'Switzerland', dial: '+41' },
+  { iso: 'SY', name: 'Syria', dial: '+963' },
+  { iso: 'TW', name: 'Taiwan', dial: '+886' },
+  { iso: 'TJ', name: 'Tajikistan', dial: '+992' },
+  { iso: 'TZ', name: 'Tanzania', dial: '+255' },
+  { iso: 'TH', name: 'Thailand', dial: '+66' },
+  { iso: 'TL', name: 'Timor-Leste', dial: '+670' },
+  { iso: 'TG', name: 'Togo', dial: '+228' },
+  { iso: 'TO', name: 'Tonga', dial: '+676' },
+  { iso: 'TT', name: 'Trinidad and Tobago', dial: '+1868' },
+  { iso: 'TN', name: 'Tunisia', dial: '+216' },
+  { iso: 'TR', name: 'Turkey', dial: '+90' },
+  { iso: 'TM', name: 'Turkmenistan', dial: '+993' },
+  { iso: 'TV', name: 'Tuvalu', dial: '+688' },
+  { iso: 'UG', name: 'Uganda', dial: '+256' },
+  { iso: 'UA', name: 'Ukraine', dial: '+380' },
+  { iso: 'AE', name: 'United Arab Emirates', dial: '+971' },
+  { iso: 'GB', name: 'United Kingdom', dial: '+44' },
+  { iso: 'UY', name: 'Uruguay', dial: '+598' },
+  { iso: 'UZ', name: 'Uzbekistan', dial: '+998' },
+  { iso: 'VU', name: 'Vanuatu', dial: '+678' },
+  { iso: 'VE', name: 'Venezuela', dial: '+58' },
+  { iso: 'VN', name: 'Vietnam', dial: '+84' },
+  { iso: 'YE', name: 'Yemen', dial: '+967' },
+  { iso: 'ZM', name: 'Zambia', dial: '+260' },
+  { iso: 'ZW', name: 'Zimbabwe', dial: '+263' },
+];
+
+// Sorted by dial code length desc for correct prefix matching
+const SORTED_BY_DIAL_LENGTH = [...COUNTRIES].sort(
+  (a, b) => b.dial.length - a.dial.length
+);
+
+const DEFAULT_COUNTRY = COUNTRIES[0]; // Brasil
+
+export function parsePhoneValue(value: string): { country: Country; number: string } {
+  if (!value) return { country: DEFAULT_COUNTRY, number: '' };
+  for (const country of SORTED_BY_DIAL_LENGTH) {
+    const prefix = country.dial + ' ';
+    if (value.startsWith(prefix)) {
+      return { country, number: value.slice(prefix.length) };
+    }
+  }
+  return { country: DEFAULT_COUNTRY, number: value };
+}