@medway-ui/native 1.7.1 → 1.7.2

package/README.md

@@ -1,31 +1,31 @@
 # @medway-ui/native
 
-React Native components for iOS and Android (Expo). Same visual API as `@medway-ui/core`, built on NativeWind + `@rn-primitives`.
+Componentes React Native para iOS e Android (Expo). Mesma API visual do `@medway-ui/core`, construída sobre NativeWind + `@rn-primitives`.
 
-**Minimum recommended version for npm brownfield setup:** `1.1.2+`
+**Versão mínima recomendada para setup brownfield via npm:** `1.1.2+`
 
 ---
 
-## Installation
+## Instalação
 
 ```bash
 npm install @medway-ui/native @medway-ui/core @medway-ui/icons \
   class-variance-authority clsx tailwind-merge nativewind \
   react-native-reanimated react-native-svg
 
-# Expo (aligns versions with your SDK)
-# expo-linear-gradient + masked-view: optional peers for IndexLevel `animated` ring
-# and Toast gradient variants (solid color fallback when missing)
+# Expo (alinha as versões com o seu SDK)
+# expo-linear-gradient + masked-view: peers opcionais para o anel `animated` do IndexLevel
+# e as variantes com gradiente do Toast (fallback para cor sólida quando ausentes)
 npx expo install react-native-reanimated react-native-svg expo-linear-gradient @react-native-masked-view/masked-view
 ```
 
-`react-native-safe-area-context` is an optional peer used by `ToastProvider` for top inset. Expo apps usually already have it (and a root `SafeAreaProvider` via React Navigation). Without a provider, the toast falls back to the previous `pt-12` offset.
+`react-native-safe-area-context` é uma peer dependency opcional usada pelo `ToastProvider` para o inset superior. Apps Expo normalmente já têm (e um `SafeAreaProvider` na raiz via React Navigation). Sem um provider, o toast volta para o offset anterior de `pt-12`.
 
 ```bash
 npx expo install react-native-safe-area-context
 ```
 
-Brownfield apps that already use `babel-plugin-module-resolver` with `@/` aliases pointing at the app `src/` also need:
+Apps brownfield que já usam `babel-plugin-module-resolver` com aliases `@/` apontando para o `src/` do app também precisam de:
 
 ```bash
 npm install -D babel-plugin-module-resolver
@@ -33,11 +33,11 @@ npm install -D babel-plugin-module-resolver
 
 ---
 
-## Brownfield setup (Expo + legacy UI / Restyle)
+## Setup brownfield (Expo + UI legada / Restyle)
 
-NativeWind applies **only** to `@medway-ui/native` + screens/components that use the library (e.g. `src/pages/medway-ui/`, partially migrated features).
+O NativeWind se aplica **apenas** ao `@medway-ui/native` + telas/componentes que usam a biblioteca (ex.: `src/pages/medway-ui/`, features parcialmente migradas).
 
-Reference implementation: **test-prep-app** (`metro.config.js`, `babel.config.js`, `tailwind.config.js`, `src/pages/medway-ui/`).
+Implementação de referência: **test-prep-app** (`metro.config.js`, `babel.config.js`, `tailwind.config.js`, `src/pages/medway-ui/`).
 
 ### 1. `metro.config.js`
 
@@ -47,17 +47,17 @@ const { withMedwayUi } = require("@medway-ui/native/metro");
 
 module.exports = withMedwayUi(getDefaultConfig(__dirname), {
   projectRoot: __dirname,
-  // linkedMedwayUiRoot: auto-detected (npm or monorepo)
+  // linkedMedwayUiRoot: detectado automaticamente (npm ou monorepo)
 });
 ```
 
-| Scenario | `linkedMedwayUiRoot` |
+| Cenário | `linkedMedwayUiRoot` |
 | --- | --- |
-| npm packages (`npm install`) | **Omit** — auto-detects `node_modules/@medway-ui` |
-| Monorepo with local clone | `"../medway-ui"` (optional; also auto-detected) |
-| Symlink `file:../medway-ui/native` | Auto-detected as monorepo |
+| Pacotes npm (`npm install`) | **Omita**: detecta `node_modules/@medway-ui` automaticamente |
+| Monorepo com clone local | `"../medway-ui"` (opcional; também detectado automaticamente) |
+| Symlink `file:../medway-ui/native` | Detectado automaticamente como monorepo |
 
-> Do **not** set `resolveNativeSource: false` — the compiled lib still references internal `@/` aliases. The default (`true`) resolves to `native/src` and works with npm.
+> **Não** defina `resolveNativeSource: false`: a lib compilada ainda referencia aliases internos `@/`. O padrão (`true`) resolve para `native/src` e funciona com npm.
 
 ### 2. `tailwind.config.js`
 
@@ -68,19 +68,19 @@ module.exports = createMedwayUiTailwindConfig({
   projectRoot: __dirname,
   content: [
     "./src/pages/medway-ui/**/*.{ts,tsx}",
-    // add extra folders that use className + @medway-ui/native:
+    // adicione pastas extras que usam className + @medway-ui/native:
     // "./src/pages/MyFeature/**/*.{ts,tsx}",
   ],
 });
 ```
 
-`createMedwayUiTailwindConfig` already includes globs for `node_modules/@medway-ui/native/src` and loads tokens from `@medway-ui/core` (Node 22+ compatible).
+`createMedwayUiTailwindConfig` já inclui os globs de `node_modules/@medway-ui/native/src` e carrega os tokens de `@medway-ui/core` (compatível com Node 22+).
 
 ### 3. `babel.config.js`
 
-The app default preset must **not** enable NativeWind globally. Use `createBrownfieldOverride` to scope NativeWind to the library + migrated screens folder.
+O preset padrão do app **não** deve habilitar o NativeWind globalmente. Use `createBrownfieldOverride` para restringir o NativeWind à biblioteca + pasta de telas migradas.
 
-If the app defines `@/` aliases for `./src/*` via `babel-plugin-module-resolver`, you **must** redirect `@/` imports from `@medway-ui/native` files to the library source — otherwise imports like `@/components/Badge` resolve to the app `src/` and break the bundle.
+Se o app define aliases `@/` para `./src/*` via `babel-plugin-module-resolver`, você **precisa** redirecionar os imports `@/` dos arquivos do `@medway-ui/native` para o código-fonte da biblioteca. Caso contrário, imports como `@/components/Badge` resolvem para o `src/` do app e quebram o bundle.
 
 ```js
 const {
@@ -102,14 +102,14 @@ module.exports = function (api) {
         alias: {
           "@/components": "./src/components",
           "@/pages": "./src/pages",
-          // ... other app aliases
+          // ... outros aliases do app
         },
         resolvePath(sourcePath, currentFile) {
           return resolveMedwayUiAlias(sourcePath, currentFile);
         },
       },
     ],
-    // other app plugins (no reanimated here)
+    // outros plugins do app (sem reanimated aqui)
   ];
 
   return {
@@ -118,10 +118,10 @@ module.exports = function (api) {
     overrides: [
       createBrownfieldOverride({
         projectRoot: __dirname,
-        appPagesDir: "medway-ui", // src/pages subfolder with NativeWind screens
+        appPagesDir: "medway-ui", // subpasta de src/pages com as telas NativeWind
         plugins: [
-          // repeat any plugins needed in the medway-ui scope
-          "react-native-reanimated/plugin", // always last
+          // repita os plugins necessários no escopo do medway-ui
+          "react-native-reanimated/plugin", // sempre por último
         ],
       }),
     ],
@@ -129,11 +129,11 @@ module.exports = function (api) {
 };
 ```
 
-Apps **without** `@/` Babel aliases do not need `createMedwayUiAliasResolver`.
+Apps **sem** aliases `@/` no Babel não precisam de `createMedwayUiAliasResolver`.
 
 ### 4. Provider + CSS
 
-Wrap the subtree that uses `@medway-ui/native` with `MedwayUiProvider` and import CSS once:
+Envolva a subárvore que usa `@medway-ui/native` com `MedwayUiProvider` e importe o CSS uma única vez:
 
 ```tsx
 import { MedwayUiProvider } from "@medway-ui/native/setup";
@@ -148,7 +148,7 @@ function MyScreen() {
 }
 ```
 
-**Dark mode:** pass `colorScheme="light" | "dark"` when the app already resolves theme (Redux, Zustand, etc.):
+**Dark mode:** passe `colorScheme="light" | "dark"` quando o app já resolve o tema (Redux, Zustand, etc.):
 
 ```tsx
 <MedwayUiProvider colorScheme={appColorScheme}>
@@ -156,13 +156,13 @@ function MyScreen() {
 </MedwayUiProvider>
 ```
 
-`MedwayUiProvider` includes `PortalHost` (required for Select, Dialog, Popover, Tooltip).
+`MedwayUiProvider` inclui o `PortalHost` (obrigatório para Select, Dialog, Popover, Tooltip).
 
-> Do **not** import `@medway-ui/core/tokens.css` directly — incompatible with NativeWind v4. Tokens come from `setup/global.css` + `setup/tokens.native.css`.
+> **Não** importe `@medway-ui/core/tokens.css` diretamente: é incompatível com o NativeWind v4. Os tokens vêm de `setup/global.css` + `setup/tokens.native.css`.
 
-### 5. Auto navigator (catalog / isolated screens)
+### 5. Navigator automático (catálogo / telas isoladas)
 
-Create once `src/pages/medway-ui/navigator.tsx`:
+Crie uma única vez `src/pages/medway-ui/navigator.tsx`:
 
 ```tsx
 import { createMedwayUiNavigator, MedwayUiProvider } from "@medway-ui/native/setup";
@@ -183,17 +183,17 @@ function MedwayUiRoot() {
 export { MedwayUiRoot, MedwayUiNavigator };
 ```
 
-Register in the app stack:
+Registre no stack do app:
 
 ```tsx
 <Stack.Screen name="MedwayUi" component={MedwayUiRoot} options={{ headerShown: false }} />
 ```
 
-New screen = new folder `src/pages/medway-ui/MyScreen/index.tsx` — no manual route registration.
+Nova tela = nova pasta `src/pages/medway-ui/MyScreen/index.tsx`, sem registro manual de rota.
 
-### 6. Using components in existing screens (Restyle + Medway UI mix)
+### 6. Usando componentes em telas existentes (mistura de Restyle + Medway UI)
 
-Pattern used in Content Hub and partially migrated features:
+Padrão usado no Content Hub e em features parcialmente migradas:
 
 ```tsx
 import { Button, CardNews } from "@medway-ui/native";
@@ -211,11 +211,11 @@ function ContentHubScreen() {
 }
 ```
 
-Add the feature folder to `content` in `tailwind.config.js`.
+Adicione a pasta da feature ao `content` do `tailwind.config.js`.
 
 ---
 
-## Monorepo development (`file:../medway-ui/native`)
+## Desenvolvimento em monorepo (`file:../medway-ui/native`)
 
 ```json
 {
@@ -224,32 +224,32 @@ Add the feature folder to `content` in `tailwind.config.js`.
 }
 ```
 
-Metro and Babel auto-detect the local clone. After library changes:
+Metro e Babel detectam o clone local automaticamente. Depois de mudanças na biblioteca:
 
 ```bash
-cd ../medway-ui/native && npm run build:lib   # if testing the compiled lib
+cd ../medway-ui/native && npm run build:lib   # se estiver testando a lib compilada
 ```
 
-Restart Metro with a clean cache: `npx expo start --clear`.
+Reinicie o Metro com cache limpo: `npx expo start --clear`.
 
 ---
 
-## Troubleshooting
+## Solução de problemas
 
-| Error | Cause | Fix |
+| Erro | Causa | Correção |
 | --- | --- | --- |
-| `Unable to resolve .../src/components/Badge` | App `@/` alias overrides lib `@/` | Add `createMedwayUiAliasResolver` in Babel |
-| `Unable to resolve @/lib/medwayIcons` | Bug in `@medway-ui/native@1.1.1` | Upgrade to `1.1.2+` |
-| `Unable to resolve ../../../../../src/...` from `lib/module/` | `resolveNativeSource: false` | Remove the option (use default `true`) |
-| Tokens / tailwind fail to load (Node 22+) | `require` of `.ts` inside `node_modules` | Use `@medway-ui/native@1.1.2+` (`createMedwayUiTailwindConfig` uses jiti fallback) |
-| NativeWind styles not applied | File outside brownfield scope | Move to `src/pages/medway-ui/` or add a tailwind glob |
-| Select/Dialog not opening | Missing `PortalHost` | Use `MedwayUiProvider` |
+| `Unable to resolve .../src/components/Badge` | Alias `@/` do app sobrescreve o `@/` da lib | Adicione `createMedwayUiAliasResolver` no Babel |
+| `Unable to resolve @/lib/medwayIcons` | Bug no `@medway-ui/native@1.1.1` | Atualize para `1.1.2+` |
+| `Unable to resolve ../../../../../src/...` a partir de `lib/module/` | `resolveNativeSource: false` | Remova a opção (use o padrão `true`) |
+| Tokens / tailwind não carregam (Node 22+) | `require` de `.ts` dentro de `node_modules` | Use `@medway-ui/native@1.1.2+` (`createMedwayUiTailwindConfig` usa fallback com jiti) |
+| Estilos do NativeWind não aplicados | Arquivo fora do escopo brownfield | Mova para `src/pages/medway-ui/` ou adicione um glob no tailwind |
+| Select/Dialog não abre | `PortalHost` ausente | Use `MedwayUiProvider` |
 
 ---
 
-## Greenfield setup (100% NativeWind app)
+## Setup greenfield (app 100% NativeWind)
 
-For new apps without legacy UI:
+Para apps novos, sem UI legada:
 
 ```js
 // babel.config.js
@@ -275,11 +275,11 @@ module.exports = withMedwayUi(getDefaultConfig(__dirname), {
 });
 ```
 
-Import `@medway-ui/native/setup/global.css` in the root layout.
+Importe `@medway-ui/native/setup/global.css` no layout raiz.
 
 ---
 
-## Usage
+## Uso
 
 ```tsx
 import {
@@ -297,11 +297,11 @@ export default function Screen() {
   return (
     <>
       <Button variant="regular" size="md" onPress={() => {}}>
-        Continue
+        Continuar
       </Button>
 
       <Input
-        label="Email"
+        label="E-mail"
         type="email"
         size="lg"
         value={email}
@@ -312,8 +312,8 @@ export default function Screen() {
       <Alert variant="success" onClose={() => {}}>
         <AlertContainer>
           <AlertContent>
-            <AlertTitle>Done</AlertTitle>
-            <AlertDescription>Operation completed successfully.</AlertDescription>
+            <AlertTitle>Pronto</AlertTitle>
+            <AlertDescription>Operação concluída com sucesso.</AlertDescription>
           </AlertContent>
         </AlertContainer>
       </Alert>
@@ -324,9 +324,9 @@ export default function Screen() {
 }
 ```
 
-## Icons
+## Ícones
 
-The `@medway-ui/icons` package includes a native entry point:
+O pacote `@medway-ui/icons` inclui um entry point nativo:
 
 ```tsx
 import { Check, CloseMd } from "@medway-ui/icons/native";
@@ -334,53 +334,53 @@ import { Check, CloseMd } from "@medway-ui/icons/native";
 
 ---
 
-## Components — status
+## Componentes: status
 
-| Component | Status | Notes |
+| Componente | Status | Notas |
 | --- | --- | --- |
-| Button | ✅ | Variants, loading, badge, alert dot |
+| Button | ✅ | Variantes, loading, badge, ponto de alerta |
 | Input | ✅ | text, email, password, numeric |
-| Alert | ✅ | Sub-components, all variants |
-| Badge | ✅ | Variants, icon-only |
-| Loading | ✅ | Reanimated spin |
-| LoadingOverlay | ✅ | Card + Modal overlay, custom center icon |
+| Alert | ✅ | Subcomponentes, todas as variantes |
+| Badge | ✅ | Variantes, só ícone |
+| Loading | ✅ | Spin com Reanimated |
+| LoadingOverlay | ✅ | Overlay de Card + Modal, ícone central customizável |
 | Checkbox | ✅ | @rn-primitives/checkbox |
 | RadioGroup | ✅ | @rn-primitives/radio-group |
 | Switch | ✅ | @rn-primitives/switch |
 | Select | ✅ | @rn-primitives/select |
 | Label | ✅ | Pressable + Text |
-| Separator | ✅ | View 1px |
+| Separator | ✅ | View de 1px |
 | Dialog | ✅ | @rn-primitives/dialog |
 | AlertDialog | ✅ | @rn-primitives/alert-dialog |
-| Sheet | ✅ | @rn-primitives/dialog (side-aware) |
-| Tag | ✅ | 16+ variants |
-| Toast | ✅ | useToast + toast(); gradient variants + safe-area inset |
+| Sheet | ✅ | @rn-primitives/dialog (ciente do lado) |
+| Tag | ✅ | 16+ variantes |
+| Toast | ✅ | useToast + toast(); variantes com gradiente + inset de safe area |
 | Tooltip | ✅ | @rn-primitives/tooltip |
 | Popover | ✅ | @rn-primitives/popover |
 | Skeleton | ✅ | Shimmer |
 | Avatar | ✅ | @rn-primitives/avatar |
 | FallbackImage | ✅ | react-native-svg |
-| CardNews | ✅ | Composable card (Content Hub) |
-| IndexLevel | ✅ | Levels p/h/m/l, variants, `animated` gradient ring |
+| CardNews | ✅ | Card composable (Content Hub) |
+| IndexLevel | ✅ | Níveis p/h/m/l, variantes, anel com gradiente `animated` |
 | Tabs | ✅ | Tabs, TabsList, TabsTrigger, TabsContent |
-| Chip | ✅ | Sizes and variants |
-| Choice | ✅ | Selectable pill with theme colors |
-| Filter | ✅ | Pill with criteria and dropdown indicator |
-| Text | ✅ | Montserrat font resolution |
-| ThemedIcon | ✅ | Icon colored by theme token |
+| Chip | ✅ | Tamanhos e variantes |
+| Choice | ✅ | Pill selecionável com cores do tema |
+| Filter | ✅ | Pill com critérios e indicador de dropdown |
+| Text | ✅ | Resolução da fonte Montserrat |
+| ThemedIcon | ✅ | Ícone colorido por token do tema |
 | DropdownMenu | ✅ | @rn-primitives/dropdown-menu |
-| Carousel | ✅ | Media and metric slides |
-| EmptyState | ✅ | Empty list/screen placeholder |
+| Carousel | ✅ | Slides de mídia e de métrica |
+| EmptyState | ✅ | Placeholder de lista/tela vazia |
 | Feed | ✅ | Feed, FeedTitle, FeedComposer |
-| FeedNotice | ✅ | Feed notice banner |
-| Feedback | ✅ | Feedback card |
-| InvitePopover | ✅ | Composable invite popover |
-| LeaderboardCard | ✅ | Header and ranked list |
-| MemberRow | ✅ | Member row with rank indicator |
-| PageHeader | ✅ | Screen header |
-| PostForm | ✅ | Composable post form (media, date/time, options) |
-| PrizeCollection | ✅ | Stats, shelf, rows and items |
-| SectionHeader | ✅ | Section title header |
+| FeedNotice | ✅ | Banner de aviso do feed |
+| Feedback | ✅ | Card de feedback |
+| InvitePopover | ✅ | Popover de convite composable |
+| LeaderboardCard | ✅ | Cabeçalho e lista ranqueada |
+| MemberRow | ✅ | Linha de membro com indicador de posição |
+| PageHeader | ✅ | Cabeçalho de tela |
+| PostForm | ✅ | Formulário de post composable (mídia, data/hora, opções) |
+| PrizeCollection | ✅ | Estatísticas, prateleira, linhas e itens |
+| SectionHeader | ✅ | Cabeçalho com título de seção |
 | Progress | 🔜 | @rn-primitives/progress |
 | ProgressCircle | 🔜 | react-native-svg |
 | Cards | 🔜 | CardModule, CardLesson, etc. |