@medway-ui/native 1.7.1 → 1.8.0

package/README.md

@@ -1,31 +1,33 @@
 # @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:
+A sombra do card selecionado do `Choice` e do `SegmentControl` (`boxShadow`) e o gradiente do `Badge` freemium (`experimental_backgroundImage`) precisam do React Native 0.76+ com a nova arquitetura. Abaixo disso, o card fica sem sombra e o freemium fica com o fundo navy sólido.
+
+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 +35,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 +49,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 +70,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 +104,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 +120,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 +131,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 +150,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 +158,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 +185,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 +213,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 +226,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 +277,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 +299,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 +314,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 +326,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 +336,54 @@ 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 | ✅ | Primary, secondary e grandes áreas, cheias ou `-soft`; freemium, só ícone e ponto |
+| 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 |
+| SegmentControl | ✅ | SegmentControl, SegmentControlList, SegmentControlTrigger (ícone e badge), SegmentControlContent |
+| 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. |

package/lib/commonjs/components/Badge.js

@@ -13,58 +13,163 @@ var _classVarianceAuthority = require("class-variance-authority");
 var _utils = require("@/lib/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const ICON_ONLY_SIZES = {
-  sm: "h-4 w-4 p-0",
-  md: "h-5 w-5 p-0",
-  lg: "h-6 w-6 p-0",
-  xl: "h-7 w-7 p-0"
-};
-const CHAR_PADDING = {
-  sm: "px-1",
-  md: "px-1",
-  lg: "px-1",
-  xl: "px-1.5"
-};
-const badgeVariants = exports.badgeVariants = (0, _classVarianceAuthority.cva)("flex-row items-center justify-center rounded-full px-2", {
+// A dot has no content, so the types flag what it would drop.
+
+const badgeVariants = exports.badgeVariants = (0, _classVarianceAuthority.cva)("flex-row items-center justify-center rounded-pill", {
   variants: {
     variant: {
+      primary: "bg-primary-background-fill",
+      "primary-soft": "bg-surface-card",
+      secondary: "bg-secondary-background-fill",
+      "secondary-soft": "bg-surface-card",
       regular: "bg-secondary-background-fill",
+      cm: "bg-cm-background-fill",
+      "cm-soft": "bg-surface-card",
+      go: "bg-go-background-fill",
+      "go-soft": "bg-surface-card",
+      cir: "bg-cir-background-fill",
+      "cir-soft": "bg-surface-card",
+      // The design paints pediatrics with the warning tokens, all but the filled label.
+      ped: "bg-yellow-background-fill",
+      "ped-soft": "bg-surface-card",
+      prev: "bg-prev-background-fill",
+      "prev-soft": "bg-surface-card",
+      freemium: "bg-primary",
       error: "bg-red-background-soft",
       warning: "bg-yellow-background-soft",
-      freemium: "bg-primary-background-fill"
+      neutral: "bg-gray-background-soft"
     },
     size: {
-      sm: "min-h-4 min-w-4",
-      md: "min-h-5 min-w-5",
-      lg: "min-h-6 min-w-6",
-      xl: "min-h-7 min-w-7"
+      sm: "min-h-4 min-w-4 gap-1 px-1 py-0.5",
+      md: "min-h-5 min-w-5 gap-1 px-1 py-0.5",
+      lg: "min-h-6 min-w-6 gap-1.5 px-1.5 py-1",
+      xl: "min-h-7 min-w-7 gap-2 px-2 py-1"
     }
   },
+  compoundVariants: [{
+    variant: "freemium",
+    size: "md",
+    className: "px-1.5 py-1"
+  }, {
+    variant: "freemium",
+    size: "lg",
+    className: "px-2"
+  }, {
+    variant: "freemium",
+    size: "xl",
+    className: "px-2.5"
+  }],
   defaultVariants: {
-    variant: "regular",
+    variant: "secondary",
     size: "md"
   }
 });
-const badgeTextVariants = (0, _classVarianceAuthority.cva)("font-semibold", {
+// Laid over `surface-card`, as in the design, so a soft badge stays opaque on any surface.
+const SOFT_TINT = {
+  "primary-soft": "bg-primary-background-soft",
+  "secondary-soft": "bg-secondary-background-soft",
+  "cm-soft": "bg-cm-background-soft",
+  "go-soft": "bg-go-background-soft",
+  "cir-soft": "bg-cir-background-soft",
+  "ped-soft": "bg-yellow-background-soft",
+  "prev-soft": "bg-prev-background-soft"
+};
+const badgeTextVariants = (0, _classVarianceAuthority.cva)("font-bold", {
   variants: {
     variant: {
+      primary: "text-primary-foreground-onfill",
+      "primary-soft": "text-primary-foreground",
+      secondary: "text-secondary-foreground-onfill",
+      "secondary-soft": "text-secondary-foreground",
       regular: "text-secondary-foreground-onfill",
+      cm: "text-cm-foreground-onfill",
+      "cm-soft": "text-cm-foreground",
+      go: "text-go-foreground-onfill",
+      "go-soft": "text-go-foreground",
+      cir: "text-cir-foreground-onfill",
+      "cir-soft": "text-cir-foreground",
+      ped: "text-ped-foreground-onfill",
+      "ped-soft": "text-yellow-foreground",
+      prev: "text-prev-foreground-onfill",
+      "prev-soft": "text-prev-foreground",
+      // White, not the design's onfill token: that one turns dark in dark mode, on a fill that stays navy.
+      freemium: "font-semibold text-white",
       error: "text-red-stroke-emphasis",
       warning: "text-yellow-foreground",
-      freemium: "text-white"
+      neutral: "text-primary-foreground"
     },
     size: {
-      sm: "text-xs",
-      md: "text-xs",
-      lg: "text-xs",
-      xl: "text-sm"
+      sm: "text-xxs leading-xxs",
+      md: "text-xs leading-xs",
+      lg: "text-xs leading-xs",
+      xl: "text-sm leading-sm"
     }
   },
+  compoundVariants: [{
+    variant: "freemium",
+    size: "md",
+    className: "text-xxs leading-xxs"
+  }],
   defaultVariants: {
-    variant: "regular",
+    variant: "secondary",
     size: "md"
   }
 });
+const badgeDotVariants = (0, _classVarianceAuthority.cva)("rounded-circular", {
+  variants: {
+    variant: {
+      primary: "bg-primary-background-fill",
+      "primary-soft": "bg-primary-background-fill",
+      secondary: "bg-secondary-background-fill",
+      "secondary-soft": "bg-secondary-background-fill",
+      regular: "bg-secondary-background-fill",
+      cm: "bg-cm-background-fill",
+      "cm-soft": "bg-cm-background-fill",
+      go: "bg-go-background-fill",
+      "go-soft": "bg-go-background-fill",
+      cir: "bg-cir-background-fill",
+      "cir-soft": "bg-cir-background-fill",
+      ped: "bg-yellow-background-fill",
+      "ped-soft": "bg-yellow-background-fill",
+      prev: "bg-prev-background-fill",
+      "prev-soft": "bg-prev-background-fill",
+      freemium: "bg-primary",
+      error: "bg-red-background-fill",
+      warning: "bg-yellow-background-fill",
+      neutral: "bg-gray-background-fill"
+    },
+    size: {
+      sm: "size-1",
+      md: "size-2",
+      lg: "size-3",
+      xl: "size-4"
+    }
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "md"
+  }
+});
+
+// The design's 10, 12, 16 and 20px as a minimum: a bigger icon grows the badge instead of
+// spilling over its gap and padding.
+const ICON_BOX = {
+  sm: "min-h-2.5 min-w-2.5",
+  md: "min-h-3 min-w-3",
+  lg: "min-h-4 min-w-4",
+  xl: "min-h-5 min-w-5"
+};
+const ICON_ONLY_PADDING = {
+  sm: "p-0.5",
+  md: "px-1 py-0.5",
+  lg: "p-1",
+  xl: "p-1"
+};
+
+// Corner to corner like the design's at any width, unlike the web's fixed 46deg.
+const FREEMIUM_GRADIENT = {
+  experimental_backgroundImage: "radial-gradient(135.09% 111.8% at 0% 50%, rgba(24, 98, 188, 0.02) 0%, rgba(0, 32, 91, 0) 100%), linear-gradient(to top right, rgba(62, 218, 199, 0.56) 6.54%, rgba(24, 98, 188, 0.17) 85.21%)"
+};
 const SHINE_DURATION_MS = 2000;
 function BadgeShine() {
   const progress = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -89,7 +194,7 @@ function BadgeShine() {
   }, [progress]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     pointerEvents: "none",
-    className: "absolute inset-0 overflow-hidden rounded-full",
+    className: "absolute inset-0 overflow-hidden rounded-pill",
     onLayout: handleLayout,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
       className: "absolute bottom-0 top-0 bg-white-24",
@@ -103,28 +208,46 @@ function Badge({
   size,
   icon,
   animation,
+  layout = "tag",
+  style,
   children,
   ...props
 }) {
-  const childText = typeof children === "string" || typeof children === "number" ? String(children).trim() : "";
-  const isSingleAlphaNum = /^[A-Za-z0-9]$/.test(childText);
-  const isShortAlnumUpTo3 = /^[A-Za-z0-9]{2,3}$/.test(childText);
-  const isDigitsWithSuffix = /^\d{1,2}\S$/.test(childText);
-  const isIconOnly = !!icon && !children;
-  const isShortUpTo3 = isShortAlnumUpTo3 || isDigitsWithSuffix;
+  if (layout === "dot") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: (0, _utils.cn)(badgeDotVariants({
+        variant,
+        size
+      }), className),
+      style: style,
+      ...props
+    });
+  }
+  const resolvedSize = size ?? "md";
+  const tint = SOFT_TINT[variant ?? "secondary"];
+  const hasContent = children != null && typeof children !== "boolean" && children !== "";
+  const isIconOnly = !!icon && !hasContent;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     className: (0, _utils.cn)(badgeVariants({
       variant,
       size
-    }), (isIconOnly || isSingleAlphaNum) && ICON_ONLY_SIZES[size ?? "md"], !isIconOnly && isShortUpTo3 && CHAR_PADDING[size ?? "md"], className),
+    }), isIconOnly && ICON_ONLY_PADDING[resolvedSize], className),
+    style: variant === "freemium" ? [FREEMIUM_GRADIENT, style] : style,
     ...props,
-    children: [animation === "shine" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeShine, {}) : null, icon, children != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+    children: [tint ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      className: (0, _utils.cn)("absolute inset-0 rounded-pill", tint)
+    }) : null, animation === "shine" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeShine, {}) : null, icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: (0, _utils.cn)("items-center justify-center", ICON_BOX[resolvedSize]),
+      children: icon
+    }) : null, hasContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      numberOfLines: 1,
       className: (0, _utils.cn)(badgeTextVariants({
         variant,
         size
       })),
       children: children
-    })]
+    }) : null]
   });
 }
 //# sourceMappingURL=Badge.js.map