@xetwa/design-system 1.0.2

package/src/components/DataDisplay/Flag/Flag.web.tsx

@@ -0,0 +1,334 @@
+import type { CSSProperties } from 'react';
+
+export interface FlagProps {
+  countryCode: string;
+  size?: number;
+  style?: CSSProperties;
+}
+
+const normalizeCountryCode = (input: string): string => {
+  const code = input.toLowerCase().trim();
+  
+  if (code === 'fr' || code === 'fra' || code === 'frança' || code === 'france') return 'FR';
+  if (code === 'be' || code === 'bel' || code === 'bélgica' || code === 'belgium') return 'BE';
+  if (code === 'ch' || code === 'che' || code === 'suíça' || code === 'switzerland') return 'CH';
+  if (code === 'lu' || code === 'lux' || code === 'luxemburgo' || code === 'luxembourg') return 'LU';
+  if (code === 'mc' || code === 'mco' || code === 'mónaco' || code === 'monaco') return 'MC';
+  if (code === 'ca' || code === 'can' || code === 'canadá' || code === 'canada') return 'CA';
+  if (code === 'ci' || code === 'civ' || code === "côte d'ivoire" || code === "cote d'ivoire" || code === 'marfim' || code === 'costa do marfim') return 'CI';
+  if (code === 'sn' || code === 'sen' || code === 'senegal') return 'SN';
+  if (code === 'cm' || code === 'cmr' || code === 'camarões' || code === 'cameroon') return 'CM';
+  if (code === 'cd' || code === 'cod' || code === 'rd congo' || code === 'republica democratica do congo' || code === 'república democrática do congo' || code === 'dr congo') return 'CD';
+  if (code === 'mg' || code === 'mdg' || code === 'madagascar') return 'MG';
+  if (code === 'bf' || code === 'bfa' || code === 'burkina faso') return 'BF';
+  if (code === 'ne' || code === 'ner' || code === 'níger' || code === 'niger') return 'NE';
+  if (code === 'ml' || code === 'mli' || code === 'mali') return 'ML';
+  if (code === 'td' || code === 'tcd' || code === 'chade' || code === 'chad') return 'TD';
+  if (code === 'gn' || code === 'gin' || code === 'guiné' || code === 'guinea') return 'GN';
+  if (code === 'rw' || code === 'rwa' || code === 'ruanda' || code === 'rwanda') return 'RW';
+  if (code === 'bi' || code === 'bdi' || code === 'burundi') return 'BI';
+  if (code === 'bj' || code === 'ben' || code === 'benim' || code === 'benin') return 'BJ';
+  if (code === 'tg' || code === 'tgo' || code === 'togo') return 'TG';
+  if (code === 'cf' || code === 'caf' || code === 'república centro-africana' || code === 'republica centro-africana' || code === 'central african republic') return 'CF';
+  if (code === 'cg' || code === 'cog' || code === 'congo' || code === 'república do congo' || code === 'republica do congo') return 'CG';
+  if (code === 'ga' || code === 'gab' || code === 'gabão' || code === 'gabon') return 'GA';
+  if (code === 'gq' || code === 'gnq' || code === 'guiné equatorial' || code === 'guine equatorial' || code === 'equatorial guinea') return 'GQ';
+  if (code === 'dj' || code === 'dji' || code === 'djibouti') return 'DJ';
+  if (code === 'km' || code === 'com' || code === 'comores' || code === 'comoros') return 'KM';
+  if (code === 'vu' || code === 'vut' || code === 'vanuatu') return 'VU';
+  if (code === 'sc' || code === 'syc' || code === 'seychelles') return 'SC';
+  if (code === 'ht' || code === 'hti' || code === 'haiti') return 'HT';
+
+  return 'UNKNOWN';
+};
+
+export const Flag = ({ countryCode, size = 40, style }: FlagProps) => {
+  const normalized = normalizeCountryCode(countryCode);
+
+  const renderFlagContent = () => {
+    switch (normalized) {
+      case 'FR': // França
+        return (
+          <>
+            <path fill="#00209F" d="M0 0h170.7v512H0z"/>
+            <path fill="#fff" d="M170.7 0h170.6v512H170.7z"/>
+            <path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'BE': // Bélgica
+        return (
+          <>
+            <path fill="#000" d="M0 0h170.7v512H0z"/>
+            <path fill="#FFE300" d="M170.7 0h170.6v512H170.7z"/>
+            <path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'CH': // Suíça
+        return (
+          <>
+            <path fill="#d52b1e" d="M0 0h512v512H0z"/>
+            <path fill="#fff" d="M236 116h40v280h-40zM116 236h280v-40H116z"/>
+          </>
+        );
+      case 'LU': // Luxemburgo
+        return (
+          <>
+            <path fill="#E8001F" d="M0 0h512v170.7H0z"/>
+            <path fill="#fff" d="M0 170.7h512v170.6H0z"/>
+            <path fill="#419ad6" d="M0 341.3h512V512H0z"/>
+          </>
+        );
+      case 'MC': // Mónaco
+        return (
+          <>
+            <path fill="#E8001F" d="M0 0h512v256H0z"/>
+            <path fill="#fff" d="M0 256h512v256H0z"/>
+          </>
+        );
+      case 'CA': // Canadá
+        return (
+          <>
+            <path fill="#fff" d="M128 0h256v512H128z"/>
+            <path fill="#d52b1e" d="M0 0h128v512H0zm384 0h128v512H384z"/>
+            <path fill="#d52b1e" d="M135.3 247.4l-14 4.8 65.4 57.5c5 14.8-1.7 19.1-6 26.9l71-9-1.8 71.5 14.8-.5-3.3-70.9 71.2 8.4c-4.4-9.3-8.3-14.2-4.3-29l65.4-54.5-11.4-4.1c-9.4-7.3 4-34.8 6-52.2 0 0-38.1 13.1-40.6 6.2l-9.9-18.5-34.6 38c-3.8 1-5.4-.6-6.3-3.8l16-79.7-25.4 14.3q-3.3 1.3-5.6-2.4l-24.5-49-25.2 50.9q-3 2.7-5.4.8l-24.2-13.6 14.5 79.2c-1.1 3-3.9 4-7.1 2.3l-33.3-37.8c-4.3 7-7.3 18.4-13 21-5.7 2.3-25-4.9-37.9-7.7 4.4 15.9 18.2 42.3 9.5 51z"/>
+          </>
+        );
+      case 'CI': // Côte d'Ivoire
+        return (
+          <>
+            <path fill="#F77F00" d="M0 0h170.7v512H0z"/>
+            <path fill="#fff" d="M170.7 0h170.6v512H170.7z"/>
+            <path fill="#009E60" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'SN': // Senegal
+        return (
+          <>
+            <path fill="#00E070" d="M0 0h170.7v512H0z"/>
+            <path fill="#FFDC00" d="M170.7 0h170.6v512H170.7z"/>
+            <path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+            <path fill="#00E070" d="M256 180l16 48h50l-40 30 15 48-41-30-41 30 15-48-40-30h50z"/>
+          </>
+        );
+      case 'CM': // Camarões
+        return (
+          <>
+            <path fill="#00E070" d="M0 0h170.7v512H0z"/>
+            <path fill="#E8001F" d="M170.7 0h170.6v512H170.7z"/>
+            <path fill="#FFE300" d="M341.3 0H512v512H341.3z"/>
+            <path fill="#FFE300" d="M256 180l16 48h50l-40 30 15 48-41-30-41 30 15-48-40-30h50z"/>
+          </>
+        );
+      case 'CD': // RD Congo
+        return (
+          <>
+            <path fill="#00A3E0" d="M0 0h512v512H0z"/>
+            <path fill="#FFDC00" d="M0 400L400 0h70L0 470z"/>
+            <path fill="#E8001F" d="M0 415L415 0h40L0 455z"/>
+            <path fill="#FFDC00" d="M70 60l8 24h25l-20 15 8 24-21-15-21 15 8-24-20-15h25z"/>
+          </>
+        );
+      case 'MG': // Madagascar
+        return (
+          <>
+            <path fill="#fff" d="M0 0h170.7v512H0z"/>
+            <path fill="#E8001F" d="M170.7 0H512v256H170.7z"/>
+            <path fill="#009E60" d="M170.7 256H512v256H170.7z"/>
+          </>
+        );
+      case 'BF': // Burkina Faso
+        return (
+          <>
+            <path fill="#E8001F" d="M0 0h512v256H0z"/>
+            <path fill="#009E60" d="M0 256h512v256H0z"/>
+            <path fill="#FFDC00" d="M256 210l10 30h32l-26 18 10 30-26-18-26 18 10-30-26-18h32z"/>
+          </>
+        );
+      case 'NE': // Níger
+        return (
+          <>
+            <path fill="#F77F00" d="M0 0h512v170.7H0z"/>
+            <path fill="#fff" d="M0 170.7h512v170.6H0z"/>
+            <path fill="#009E60" d="M0 341.3h512V512H0z"/>
+            <circle cx="256" cy="256" r="50" fill="#F77F00"/>
+          </>
+        );
+      case 'ML': // Mali
+        return (
+          <>
+            <path fill="#00E070" d="M0 0h170.7v512H0z"/>
+            <path fill="#FFDC00" d="M170.7 0h170.6v512H170.7z"/>
+            <path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'TD': // Chade
+        return (
+          <>
+            <path fill="#00209F" d="M0 0h170.7v512H0z"/>
+            <path fill="#FFDC00" d="M170.7 0h170.6v512H170.7z"/>
+            <path fill="#E8001F" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'GN': // Guiné
+        return (
+          <>
+            <path fill="#E8001F" d="M0 0h170.7v512H0z"/>
+            <path fill="#FFDC00" d="M170.7 0h170.6v512H170.7z"/>
+            <path fill="#00E070" d="M341.3 0H512v512H341.3z"/>
+          </>
+        );
+      case 'RW': // Ruanda
+        return (
+          <>
+            <path fill="#00A3E0" d="M0 0h512v256H0z"/>
+            <path fill="#FFDC00" d="M0 256h512v128H0z"/>
+            <path fill="#009E60" d="M0 384h512v128H0z"/>
+            <circle cx="400" cy="80" r="30" fill="#FFDC00"/>
+          </>
+        );
+      case 'BI': // Burundi
+        return (
+          <>
+            <path fill="#E8001F" d="M0 0h512v512H0z"/>
+            <path fill="#009E60" d="M0 0l256 256L0 512zm512 0L256 256l256 256z"/>
+            <path d="M0 0l512 512M0 512l512-512" stroke="#fff" strokeWidth="40"/>
+            <circle cx="256" cy="256" r="80" fill="#fff"/>
+            <circle cx="256" cy="225" r="10" fill="#e8001f" stroke="#009e60" strokeWidth="2"/>
+            <circle cx="226" cy="275" r="10" fill="#e8001f" stroke="#009e60" strokeWidth="2"/>
+            <circle cx="286" cy="275" r="10" fill="#e8001f" stroke="#009e60" strokeWidth="2"/>
+          </>
+        );
+      case 'BJ': // Benim
+        return (
+          <>
+            <path fill="#00E070" d="M0 0h192v512H0z"/>
+            <path fill="#FFDC00" d="M192 0h320v256H192z"/>
+            <path fill="#E8001F" d="M192 256h320v256H192z"/>
+          </>
+        );
+      case 'TG': // Togo
+        return (
+          <>
+            <path fill="#FFDC00" d="M0 0h512v512H0z"/>
+            <path fill="#009E60" d="M0 0h512v102.4H0zm0 204.8h512v102.4H0zm0 204.8h512v102.4H0z"/>
+            <path fill="#E8001F" d="M0 0h204.8v204.8H0z"/>
+            <path fill="#fff" d="M102.4 75l10 30h32l-26 18 10 30-26-18-26 18 10-30-26-18h32z"/>
+          </>
+        );
+      case 'CF': // Rep. Centro-Africana
+        return (
+          <>
+            <path fill="#00209F" d="M0 0h512v128H0z"/>
+            <path fill="#fff" d="M0 128h512v128H0z"/>
+            <path fill="#009E60" d="M0 256h512v128H0z"/>
+            <path fill="#FFDC00" d="M0 384h512v128H0z"/>
+            <path fill="#E8001F" d="M213.3 0h85.4v512h-85.4z"/>
+            <path fill="#FFDC00" d="M60 25l6 18h19l-15 11 6 18-15-11-15 11 6-18-15-11h19z"/>
+          </>
+        );
+      case 'CG': // Congo
+        return (
+          <>
+            <path fill="#FFDC00" d="M0 0h512v512H0z"/>
+            <path fill="#009E60" d="M0 0h341.3L0 341.3z"/>
+            <path fill="#E8001F" d="M512 512L170.7 512L512 170.7z"/>
+          </>
+        );
+      case 'GA': // Gabão
+        return (
+          <>
+            <path fill="#00E070" d="M0 0h512v170.7H0z"/>
+            <path fill="#FFDC00" d="M0 170.7h512v170.6H0z"/>
+            <path fill="#00209F" d="M0 341.3h512V512H0z"/>
+          </>
+        );
+      case 'GQ': // Guiné Equatorial
+        return (
+          <>
+            <path fill="#009E60" d="M0 0h512v170.7H0z"/>
+            <path fill="#fff" d="M0 170.7h512v170.6H0z"/>
+            <path fill="#E8001F" d="M0 341.3h512V512H0z"/>
+            <path fill="#00A3E0" d="M0 0l170.7 256L0 512z"/>
+            <path fill="#888" d="M246 236h20v40h-20z"/>
+            <path fill="#009E60" d="M256 216c5 0 5 15 5 20h-10c0-5 0-20 5-20z"/>
+          </>
+        );
+      case 'DJ': // Djibouti
+        return (
+          <>
+            <path fill="#00A3E0" d="M0 0h512v256H0z"/>
+            <path fill="#009E60" d="M0 256h512v256H0z"/>
+            <path fill="#fff" d="M0 0l216 256L0 512z"/>
+            <path fill="#E8001F" d="M70 230l5 15h16l-13 9 5 15-13-9-13 9 5-15-13-9h16z"/>
+          </>
+        );
+      case 'KM': // Comores
+        return (
+          <>
+            <path fill="#FFDC00" d="M0 0h512v128H0z"/>
+            <path fill="#fff" d="M0 128h512v128H0z"/>
+            <path fill="#E8001F" d="M0 256h512v128H0z"/>
+            <path fill="#00209F" d="M0 384h512v128H0z"/>
+            <path fill="#009E60" d="M0 0l216 256L0 512z"/>
+            <path fill="#fff" d="M45 220c15 0 25 15 25 36s-10 36-25 36c20 0 30-15 30-36s-10-36-30-36z"/>
+            <circle cx="76" cy="211" r="3" fill="#fff"/>
+            <circle cx="79" cy="236" r="3" fill="#fff"/>
+            <circle cx="79" cy="261" r="3" fill="#fff"/>
+            <circle cx="76" cy="286" r="3" fill="#fff"/>
+          </>
+        );
+      case 'VU': // Vanuatu
+        return (
+          <>
+            <path fill="#E8001F" d="M0 0h512v256H0z"/>
+            <path fill="#009E60" d="M0 256h512v256H0z"/>
+            <path fill="#FFDC00" d="M0 0l250 256L0 512z"/>
+            <path fill="#000" d="M0 30l210 226L0 482z"/>
+            <path fill="#FFDC00" d="M220 240h292v32H220z"/>
+            <path fill="#000" d="M230 246h282v20H230z"/>
+            <circle cx="65" cy="256" r="30" fill="none" stroke="#FFDC00" strokeWidth="6" strokeDasharray="140 50"/>
+          </>
+        );
+      case 'SC': // Seychelles
+        return (
+          <>
+            <path fill="#00209F" d="M0 512L0 0h170.7z"/>
+            <path fill="#FFDC00" d="M0 512L170.7 0h170.6z"/>
+            <path fill="#E8001F" d="M0 512L341.3 0H512v170.7z"/>
+            <path fill="#fff" d="M0 512L512 170.7v170.6z"/>
+            <path fill="#009E60" d="M0 512L512 341.3V512z"/>
+          </>
+        );
+      case 'HT': // Haiti
+        return (
+          <>
+            <path fill="#00209F" d="M0 0h512v256H0z"/>
+            <path fill="#E8001F" d="M0 256h512v256H0z"/>
+            <path fill="#fff" d="M220 220h72v72H220z"/>
+            <path fill="#51332d" d="M253 235h6v20h-6z"/>
+            <path fill="#009E60" d="M256 235c-8-6-15 4-15 4s7 3 15-4zm0 0c8-6 15 4 15 4s-7 3-15-4z"/>
+          </>
+        );
+      default: // Fallback gray
+        return (
+          <path fill="#ccc" d="M0 0h512v512H0z"/>
+        );
+    }
+  };
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 512 512"
+      style={{
+        display: 'block',
+        borderRadius: size / 2,
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      {renderFlagContent()}
+    </svg>
+  );
+};

package/src/components/DataDisplay/InstructionBubble/InstructionBubble.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { InstructionBubble } from './InstructionBubble';
+
+const meta = {
+  title: 'Components/DataDisplay/InstructionBubble',
+  component: InstructionBubble,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `O **InstructionBubble** é usado para apresentar uma instrução ou diálogo ao utilizador, sempre acompanhado pelo avatar da mascote Yaya.
+Suporta múltiplas expressões da Yaya através da propriedade \`yayaVariant\`.
+
+### Exemplo de Uso
+\`\`\`tsx
+<InstructionBubble
+  title="Eu bebo água"
+  subtitle="toca nas palavras pela ordem"
+  yayaVariant="falar"
+/>
+\`\`\`
+`
+      }
+    }
+  },
+  argTypes: {
+    yayaVariant: {
+      control: 'select',
+      options: ['neutra', 'feliz', 'errou', 'acertou', 'celebrar', 'dormir', 'falar', 'pensar', 'surpresa'],
+      description: 'A expressão da mascote Yaya',
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ backgroundColor: '#ffffff', width: '100%' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Falar: Story = {
+  name: 'Instrução Padrão (Falar)',
+  args: {
+    title: 'Eu bebo água',
+    subtitle: 'toca nas palavras pela ordem',
+    yayaVariant: 'falar',
+  },
+};
+
+export const Feliz: Story = {
+  name: 'Feedback Positivo (Feliz)',
+  args: {
+    title: 'Muito bem!',
+    subtitle: 'Acertaste em todas as palavras.',
+    yayaVariant: 'feliz',
+  },
+};
+
+export const Pensativa: Story = {
+  name: 'Dúvida ou Dica (Pensar)',
+  args: {
+    title: 'Será que está certo?',
+    subtitle: 'Revê a tua resposta antes de enviar.',
+    yayaVariant: 'pensar',
+  },
+};
+
+export const SemSubtitulo: Story = {
+  name: 'Apenas Título',
+  args: {
+    title: 'Bom trabalho!',
+    yayaVariant: 'celebrar',
+  },
+};

package/src/components/DataDisplay/InstructionBubble/InstructionBubble.tsx

@@ -0,0 +1,86 @@
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Yaya } from '../../Mascots/Yaya/Yaya';
+import type { YayaVariant } from '../../Mascots/Yaya/Yaya';
+import { Typography } from '../../Typography/Typography';
+
+export interface InstructionBubbleProps {
+  /** Título principal (ex: "Eu bebo água") */
+  title: string;
+  /** Subtítulo descritivo (ex: "toca nas palavras pela ordem") */
+  subtitle?: string;
+  /** Expressão/Variante da mascote Yaya */
+  yayaVariant?: YayaVariant;
+  /** Estilos customizados opcionais */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const InstructionBubble = ({
+  title,
+  subtitle,
+  yayaVariant = 'falar',
+  style,
+}: InstructionBubbleProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Avatar Yaya na Esquerda */}
+      <View style={[styles.avatarContainer, { marginRight: scale(16) }]}>
+        <Yaya variant={yayaVariant} avatarOnly size={scale(64)} />
+      </View>
+      
+      {/* Balão de Instrução (Bubble) */}
+      <View style={[
+        styles.bubble,
+        { 
+          paddingHorizontal: scale(20), 
+          paddingVertical: scale(16), 
+          borderTopRightRadius: scale(24),
+          borderBottomRightRadius: scale(24),
+          borderBottomLeftRadius: scale(4),
+          borderTopLeftRadius: scale(24),
+          borderWidth: scale(2),
+        }
+      ]}>
+        <Typography style={[styles.title, { fontSize: scaleText(22) }]}>
+          {title}
+        </Typography>
+        {subtitle && (
+          <Typography style={[styles.subtitle, { fontSize: scaleText(14), marginTop: scale(4) }]}>
+            {subtitle}
+          </Typography>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    maxWidth: 500,
+  },
+  avatarContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bubble: {
+    flexShrink: 1,
+    backgroundColor: theme.colors.brown[50], // #fdf3ea
+    borderColor: theme.colors.brown[100],   // #efe2d6
+    justifyContent: 'center',
+  },
+  title: {
+
+    color: theme.colors.brown[800],         // #51332d
+  },
+  subtitle: {
+
+    color: theme.colors.brown[500],         // #9a8478
+  },
+});

package/src/components/DataDisplay/LevelBadge/LevelBadge.stories.tsx

@@ -0,0 +1,99 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { LevelBadge } from './LevelBadge';
+import { Typography } from '../../Typography/Typography';
+
+const meta = {
+  title: 'Components/DataDisplay/LevelBadge',
+  component: LevelBadge,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **LevelBadge** exibe os níveis CEFR num formato retangular ou em pílula, usado nos ecrãs de progresso.\n\n### Exemplo de Uso\n```tsx\n<LevelBadge \n  level="B2"\n  variant="primary"\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    levelCode: { control: { type: 'select', options: ['A1', 'A2', 'B1', 'B2', 'C1'] } },
+    size: { control: { type: 'select', options: ['lg', 'sm'] } },
+    countryFlagName: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, maxWidth: 400, backgroundColor: '#f5f0eb', alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const LargeA1: Story = {
+  name: "Grande A1 (LG)",
+  args: {
+    levelCode: 'A1',
+    size: 'lg',
+    countryFlagName: 'França',
+  },
+};
+
+export const SmallA1: Story = {
+  name: "Pequeno A1 (SM)",
+  args: {
+    levelCode: 'A1',
+    size: 'sm',
+    countryFlagName: 'França',
+  },
+};
+
+export const LargeB2: Story = {
+  name: "Grande B2 (Senegal)",
+  args: {
+    levelCode: 'B2',
+    size: 'lg',
+    countryFlagName: 'Senegal',
+  },
+};
+
+export const LargeC1: Story = {
+  name: "Grande C1 (Canadá)",
+  args: {
+    levelCode: 'C1',
+    size: 'lg',
+    countryFlagName: 'Canadá',
+  },
+};
+
+export const Catalog: Story = {
+  name: "Catálogo de Níveis (All Levels)",
+  args: {
+    levelCode: 'A1',
+    size: 'lg',
+  },
+  render: () => (
+    <View style={{ gap: 20 }}>
+      <Typography style={{ fontWeight: 'bold', color: '#51332d', marginBottom: 4 }}>Tamanho Grande (LG)</Typography>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+        <LevelBadge levelCode="A1" size="lg" countryFlagName="França" />
+        <LevelBadge levelCode="A2" size="lg" countryFlagName="França" />
+        <LevelBadge levelCode="B1" size="lg" countryFlagName="França" />
+        <LevelBadge levelCode="B2" size="lg" countryFlagName="França" />
+        <LevelBadge levelCode="C1" size="lg" countryFlagName="França" />
+      </View>
+
+      <Typography style={{ fontWeight: 'bold', color: '#51332d', marginTop: 12, marginBottom: 4 }}>Tamanho Pequeno (SM)</Typography>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+        <LevelBadge levelCode="A1" size="sm" countryFlagName="França" />
+        <LevelBadge levelCode="A2" size="sm" countryFlagName="França" />
+        <LevelBadge levelCode="B1" size="sm" countryFlagName="França" />
+        <LevelBadge levelCode="B2" size="sm" countryFlagName="França" />
+        <LevelBadge levelCode="C1" size="sm" countryFlagName="França" />
+      </View>
+    </View>
+  ),
+};