@etus/ui 0.1.1 → 0.1.2

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

@@ -1,258 +0,0 @@
-# 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

@@ -1,134 +0,0 @@
-/* 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

@@ -1,22 +0,0 @@
-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'