@etus/ui 0.1.0

package/src/components/forms/PhoneInput/README.md

@@ -0,0 +1,258 @@
+# PhoneInput
+
+## Visao Geral
+
+O **PhoneInput** e um componente de entrada de telefone internacional com seletor de pais. Formata automaticamente o numero de acordo com o pais selecionado e exibe a bandeira e codigo de discagem.
+
+### Casos de Uso
+
+- Cadastro de usuarios internacionais
+- Formularios de contato
+- Verificacao por SMS
+- Perfil de usuario com telefone
+- Checkout em e-commerce
+
+### Classificacao
+
+**Categoria:** Specialized Input
+**Dependencias:** lucide-react (ChevronDown)
+
+---
+
+## Design Specs
+
+### Estrutura
+
+```
+┌──────────────────────────────────────────────────┐
+│ ┌─────────────────┐ ┌──────────────────────────┐ │
+│ │ 🇧🇷 +55    ▼   │ │  (11) 99999-9999         │ │
+│ └─────────────────┘ └──────────────────────────┘ │
+└──────────────────────────────────────────────────┘
+
+Country Dropdown:
+┌─────────────────────────────────────────────────┐
+│ 🇧🇷 Brazil                              +55    │
+│ 🇺🇸 United States                        +1    │
+│ 🇵🇹 Portugal                           +351    │
+│ ...                                            │
+└─────────────────────────────────────────────────┘
+```
+
+### Tamanhos
+
+| Size | Height | Font |
+|------|--------|------|
+| sm | 32px | text-sm |
+| md | 40px | text-base |
+| lg | 48px | text-lg |
+
+### Variantes
+
+| Variante | Descricao |
+|----------|-----------|
+| default | Borda cinza, fundo transparente |
+| filled | Fundo `bg-muted` |
+| flushed | Apenas borda inferior |
+
+### Estados
+
+| Estado | Comportamento |
+|--------|---------------|
+| Default | Container fechado com pais selecionado |
+| Open | Dropdown de paises visivel |
+| Focus | Ring de foco no input |
+| Disabled | 50% opacidade, botao desabilitado |
+| Invalid | Borda e ring vermelhos |
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `value` | `string` | - | Numero controlado (somente digitos) |
+| `defaultValue` | `string` | `""` | Numero inicial |
+| `onChange` | `(value: string, country: Country) => void` | - | Callback de mudanca |
+| `onCountryChange` | `(country: Country) => void` | - | Callback de mudanca de pais |
+| `defaultCountry` | `string` | `"BR"` | Codigo ISO do pais padrao |
+| `countries` | `Country[]` | `defaultCountries` | Lista de paises |
+| `disabled` | `boolean` | `false` | Desabilita input |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Tamanho visual |
+| `variant` | `"default" \| "filled" \| "flushed"` | `"default"` | Variante visual |
+| `invalid` | `boolean` | `false` | Estado de erro |
+| `placeholder` | `string` | `"Phone number"` | Placeholder do input |
+
+### Tipo Country
+
+```typescript
+interface Country {
+  code: string      // "BR"
+  dialCode: string  // "+55"
+  name: string      // "Brazil"
+  flag: string      // "🇧🇷" (emoji)
+  format?: string   // "(##) #####-####"
+}
+```
+
+### Exemplos de Codigo
+
+```tsx
+import { PhoneInput } from "@etus/ui"
+
+// Basico (Brasil padrao)
+<PhoneInput placeholder="Numero de telefone" />
+
+// Outro pais padrao
+<PhoneInput defaultCountry="US" />
+
+// Controlado
+const [phone, setPhone] = useState("")
+const [country, setCountry] = useState(null)
+
+<PhoneInput
+  value={phone}
+  onChange={(value, country) => {
+    setPhone(value)
+    console.log(`Full: ${country.dialCode} ${value}`)
+  }}
+  onCountryChange={setCountry}
+/>
+
+// Com valor inicial
+<PhoneInput
+  defaultValue="11999999999"
+  defaultCountry="BR"
+/>
+
+// Lista de paises customizada
+const myCountries = [
+  { code: "BR", dialCode: "+55", name: "Brazil", flag: "🇧🇷" },
+  { code: "US", dialCode: "+1", name: "United States", flag: "🇺🇸" },
+]
+
+<PhoneInput countries={myCountries} />
+```
+
+### Formatacao
+
+O numero e formatado automaticamente baseado no pais:
+
+```tsx
+// Brasil: (11) 99999-9999
+// EUA: (555) 123-4567
+// Portugal: 912 345 678
+```
+
+---
+
+## Interacao
+
+### Seletor de Pais
+
+| Acao | Resultado |
+|------|-----------|
+| Click no botao | Abre dropdown |
+| Click em pais | Seleciona e fecha |
+| Escape | Fecha dropdown |
+| Click fora | Fecha dropdown |
+| ArrowDown (fechado) | Abre dropdown |
+
+### Input de Telefone
+
+| Acao | Resultado |
+|------|-----------|
+| Digitar | Adiciona digitos formatados |
+| Backspace | Remove digito |
+| Colar | Extrai apenas digitos |
+
+---
+
+## Acessibilidade
+
+### ARIA
+
+| Atributo | Elemento | Valor |
+|----------|----------|-------|
+| `aria-expanded` | Botao pais | `true/false` |
+| `aria-haspopup` | Botao pais | `listbox` |
+| `aria-label` | Botao pais | `"Select country, current: {name}"` |
+| `role` | Dropdown | `listbox` |
+| `role` | Opcao | `option` |
+| `aria-selected` | Opcao | `true/false` |
+| `type` | Input | `tel` |
+| `aria-invalid` | Input | `true/false` |
+
+### data-slot
+
+```html
+<div data-slot="phone-input">
+  <button data-slot="phone-input-country">...</button>
+  <input data-slot="phone-input-field" />
+  <div data-slot="phone-input-dropdown">
+    <div data-slot="phone-input-option">...</div>
+  </div>
+</div>
+```
+
+### Navegacao por Teclado
+
+| Tecla | Acao |
+|-------|------|
+| Tab | Move foco entre elementos |
+| ArrowDown | Abre dropdown (quando fechado) |
+| Escape | Fecha dropdown |
+| Enter/Space | Seleciona opcao |
+
+---
+
+## Paises Incluidos
+
+A lista padrao inclui paises comuns da America Latina e internacionais:
+
+| Pais | Codigo | Dial Code |
+|------|--------|-----------|
+| Argentina | AR | +54 |
+| Brazil | BR | +55 |
+| Chile | CL | +56 |
+| Colombia | CO | +57 |
+| Mexico | MX | +52 |
+| Portugal | PT | +351 |
+| Spain | ES | +34 |
+| United States | US | +1 |
+| ... | ... | ... |
+
+---
+
+## Comparativo com Design Systems
+
+| Design System | Componente Similar | Diferenca |
+|---------------|-------------------|-----------|
+| Chakra UI | Nao tem nativo | ETUS tem nativo |
+| MUI | MuiTelInput (terceiro) | MUI usa biblioteca externa |
+| Mantine | Nao tem nativo | ETUS tem nativo |
+| Ant Design | Nao tem nativo | ETUS tem nativo |
+| react-phone-number-input | - | Lib externa popular |
+
+---
+
+## Roadmap
+
+### Implementado
+
+- [x] Seletor de pais com bandeira emoji
+- [x] Formatacao automatica por pais
+- [x] 20+ paises incluidos
+- [x] Tres tamanhos e tres variantes
+- [x] Dropdown acessivel
+
+### Futuro
+
+- [ ] Busca de pais no dropdown
+- [ ] Validacao de formato
+- [ ] Deteccao automatica de pais
+- [ ] Integracao com libphonenumber-js
+- [ ] Suporte a mais paises
+- [ ] Formatacao E.164

package/src/components/forms/PhoneInput/countries.ts

@@ -0,0 +1,134 @@
+/* eslint-disable sonarjs/no-duplicate-string -- Country data naturally has repeated format patterns */
+
+/**
+ * Country information for phone input
+ */
+export interface Country {
+  /** ISO 3166-1 alpha-2 country code */
+  code: string
+  /** International dial code */
+  dialCode: string
+  /** Flag emoji */
+  flag: string
+  /** Phone number format pattern (# = digit) */
+  format?: string
+  /** Country name in English */
+  name: string
+}
+
+/**
+ * Default list of countries with dial codes
+ * Prioritizes common countries at the top
+ */
+export const defaultCountries: Country[] = [
+  // Priority countries
+  { code: "BR", dialCode: "+55", name: "Brazil", flag: "🇧🇷", format: "(##) #####-####" },
+  { code: "US", dialCode: "+1", name: "United States", flag: "🇺🇸", format: "(###) ###-####" },
+  { code: "GB", dialCode: "+44", name: "United Kingdom", flag: "🇬🇧", format: "#### ######" },
+  { code: "CA", dialCode: "+1", name: "Canada", flag: "🇨🇦", format: "(###) ###-####" },
+  { code: "PT", dialCode: "+351", name: "Portugal", flag: "🇵🇹", format: "### ### ###" },
+  { code: "ES", dialCode: "+34", name: "Spain", flag: "🇪🇸", format: "### ### ###" },
+
+  // Latin America
+  { code: "AR", dialCode: "+54", name: "Argentina", flag: "🇦🇷", format: "## ####-####" },
+  { code: "CL", dialCode: "+56", name: "Chile", flag: "🇨🇱", format: "# #### ####" },
+  { code: "CO", dialCode: "+57", name: "Colombia", flag: "🇨🇴", format: "### #######" },
+  { code: "MX", dialCode: "+52", name: "Mexico", flag: "🇲🇽", format: "### ### ####" },
+  { code: "PE", dialCode: "+51", name: "Peru", flag: "🇵🇪", format: "### ### ###" },
+  { code: "UY", dialCode: "+598", name: "Uruguay", flag: "🇺🇾", format: "## ### ###" },
+  { code: "VE", dialCode: "+58", name: "Venezuela", flag: "🇻🇪", format: "### #######" },
+
+  // Europe
+  { code: "DE", dialCode: "+49", name: "Germany", flag: "🇩🇪", format: "#### #######" },
+  { code: "FR", dialCode: "+33", name: "France", flag: "🇫🇷", format: "# ## ## ## ##" },
+  { code: "IT", dialCode: "+39", name: "Italy", flag: "🇮🇹", format: "### #######" },
+  { code: "NL", dialCode: "+31", name: "Netherlands", flag: "🇳🇱", format: "# ########" },
+  { code: "BE", dialCode: "+32", name: "Belgium", flag: "🇧🇪", format: "### ## ## ##" },
+  { code: "CH", dialCode: "+41", name: "Switzerland", flag: "🇨🇭", format: "## ### ## ##" },
+  { code: "AT", dialCode: "+43", name: "Austria", flag: "🇦🇹", format: "### #######" },
+  { code: "PL", dialCode: "+48", name: "Poland", flag: "🇵🇱", format: "### ### ###" },
+  { code: "SE", dialCode: "+46", name: "Sweden", flag: "🇸🇪", format: "## ### ## ##" },
+  { code: "NO", dialCode: "+47", name: "Norway", flag: "🇳🇴", format: "### ## ###" },
+  { code: "DK", dialCode: "+45", name: "Denmark", flag: "🇩🇰", format: "## ## ## ##" },
+  { code: "FI", dialCode: "+358", name: "Finland", flag: "🇫🇮", format: "## ### ####" },
+  { code: "IE", dialCode: "+353", name: "Ireland", flag: "🇮🇪", format: "## #######" },
+
+  // Asia
+  { code: "JP", dialCode: "+81", name: "Japan", flag: "🇯🇵", format: "##-####-####" },
+  { code: "CN", dialCode: "+86", name: "China", flag: "🇨🇳", format: "### #### ####" },
+  { code: "IN", dialCode: "+91", name: "India", flag: "🇮🇳", format: "##### #####" },
+  { code: "KR", dialCode: "+82", name: "South Korea", flag: "🇰🇷", format: "##-####-####" },
+  { code: "SG", dialCode: "+65", name: "Singapore", flag: "🇸🇬", format: "#### ####" },
+  { code: "HK", dialCode: "+852", name: "Hong Kong", flag: "🇭🇰", format: "#### ####" },
+  { code: "TW", dialCode: "+886", name: "Taiwan", flag: "🇹🇼", format: "### ### ###" },
+  { code: "TH", dialCode: "+66", name: "Thailand", flag: "🇹🇭", format: "## ### ####" },
+  { code: "MY", dialCode: "+60", name: "Malaysia", flag: "🇲🇾", format: "##-### ####" },
+  { code: "ID", dialCode: "+62", name: "Indonesia", flag: "🇮🇩", format: "### ### ####" },
+  { code: "PH", dialCode: "+63", name: "Philippines", flag: "🇵🇭", format: "### ### ####" },
+  { code: "VN", dialCode: "+84", name: "Vietnam", flag: "🇻🇳", format: "## ### ## ##" },
+
+  // Middle East
+  { code: "AE", dialCode: "+971", name: "UAE", flag: "🇦🇪", format: "## ### ####" },
+  { code: "SA", dialCode: "+966", name: "Saudi Arabia", flag: "🇸🇦", format: "## ### ####" },
+  { code: "IL", dialCode: "+972", name: "Israel", flag: "🇮🇱", format: "##-###-####" },
+  { code: "TR", dialCode: "+90", name: "Turkey", flag: "🇹🇷", format: "### ### ## ##" },
+
+  // Oceania
+  { code: "AU", dialCode: "+61", name: "Australia", flag: "🇦🇺", format: "### ### ###" },
+  { code: "NZ", dialCode: "+64", name: "New Zealand", flag: "🇳🇿", format: "## ### ####" },
+
+  // Africa
+  { code: "ZA", dialCode: "+27", name: "South Africa", flag: "🇿🇦", format: "## ### ####" },
+  { code: "NG", dialCode: "+234", name: "Nigeria", flag: "🇳🇬", format: "### ### ####" },
+  { code: "EG", dialCode: "+20", name: "Egypt", flag: "🇪🇬", format: "## #### ####" },
+  { code: "KE", dialCode: "+254", name: "Kenya", flag: "🇰🇪", format: "### ######" },
+]
+
+/**
+ * Find country by ISO code
+ */
+export function findCountryByCode(code: string, countries = defaultCountries): Country | undefined {
+  return countries.find((c) => c.code.toLowerCase() === code.toLowerCase())
+}
+
+/**
+ * Find country by dial code
+ */
+export function findCountryByDialCode(dialCode: string, countries = defaultCountries): Country | undefined {
+  return countries.find((c) => c.dialCode === dialCode)
+}
+
+/**
+ * Format a phone number according to the country format
+ */
+export function formatPhoneNumber(value: string, country: Country): string {
+  // Remove all non-digit characters
+  const digits = value.replaceAll(/\D/g, "")
+
+  if (!country.format) {
+    return digits
+  }
+
+  let result = ""
+  let digitIndex = 0
+
+  for (const char of country.format) {
+    if (digitIndex >= digits.length) break
+
+    if (char === "#") {
+      result += digits[digitIndex] ?? ""
+      digitIndex++
+    } else {
+      result += char
+    }
+  }
+
+  return result
+}
+
+/**
+ * Get the raw digits from a formatted phone number
+ */
+export function getPhoneDigits(value: string): string {
+  return value.replaceAll(/\D/g, "")
+}

package/src/components/forms/PhoneInput/index.ts

@@ -0,0 +1,22 @@
+export * from './PhoneInput'
+export {
+  phoneInputCountryButtonVariants,
+  phoneInputDropdownVariants,
+  phoneInputInputVariants,
+  phoneInputOptionVariants,
+  type PhoneInputVariantProps,
+  phoneInputVariants,
+} from './PhoneInput.variants'
+export type {
+  Country,
+  PhoneInputProps,
+  PhoneInputSize,
+  PhoneInputVariant,
+} from './PhoneInput.types'
+export {
+  defaultCountries,
+  findCountryByCode,
+  findCountryByDialCode,
+  formatPhoneNumber,
+  getPhoneDigits,
+} from './countries'