@xetwa/design-system 1.0.48 → 1.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "type": "module",
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View } from 'react-native';
+import { Stamp } from './Stamp';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/DataDisplay/Stamp',
+  component: Stamp,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `O componente **Stamp** reproduz visualmente um "carimbo de passaporte". É usado no ecrã da rota para representar módulos que estão em curso, concluídos, ou localidades visitadas.
+
+### Características
+- **Cores Livres:** Pode passar a propriedade \`color\` com qualquer cor (HEX, RGB) e o fundo é gerado automaticamente.
+- **Textos Flexíveis:** O carimbo aceita \`topLabel\`, \`title\` e \`bottomLabels\` para escrever o que quiser.
+## Notas de Uso
+- O componente possui três tamanhos pré-definidos: **sm** (100px), **md** (140px, padrão), e **lg** (180px).
+- Cada tamanho tem a sua própria escala de tipografia matematicamente calculada para garantir que as letras nunca ficam desproporcionais ao círculo.
+- Se a palavra do título for demasiado comprida, o tamanho de letra ajusta-se automaticamente (\`adjustsFontSizeToFit\`) sem quebrar o carimbo.
+
+### Exemplo de Uso
+\`\`\`tsx
+import { Stamp } from '@xetwa/design-system';
+
+// Carimbo estilo Paris (Azul)
+<Stamp 
+  topLabel="REPUBLIQUE"
+  title="PARIS"
+  bottomLabels={['NIVEAU A1', 'MAR 2026']} 
+  color="#2a6fc2"
+/>
+
+// Carimbo estilo Dakar com inclinação à direita
+<Stamp 
+  topLabel="SÉNÉGAL"
+  title="DAKAR" 
+  bottomLabels={['NIVEAU B1', 'EM CURSO']} 
+  color="#f2974b"
+  position="right"
+/>
+\`\`\`
+`,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 40, backgroundColor: theme.colors.brown[50], alignItems: 'center', justifyContent: 'center' }}>
+        <Story />
+      </View>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'color',
+      description: 'Cor principal do carimbo (texto e borda).',
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'md', 'lg'],
+      description: 'Tamanho pré-definido do carimbo.',
+    },
+    bgColor: {
+      control: 'color',
+      description: 'Cor de fundo do círculo interno (opcional).',
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'center', 'right'],
+      description: 'Inclinação do carimbo.',
+    },
+  },
+} satisfies Meta<typeof Stamp>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Carimbo Laranja, estilo Dakar (Em curso)
+ */
+export const Dakar: Story = {
+  render: (args) => <Stamp {...args} />,
+  args: {
+    topLabel: 'SÉNÉGAL',
+    title: 'DAKAR',
+    bottomLabels: ['NIVEAU B1', 'EM CURSO'],
+    color: theme.colors.primary,
+    position: 'left',
+  },
+};
+
+/**
+ * Carimbo Azul, estilo Paris (Concluído antigo)
+ */
+export const Paris: Story = {
+  render: (args) => <Stamp {...args} />,
+  args: {
+    topLabel: 'REPUBLIQUE',
+    title: 'PARIS',
+    bottomLabels: ['NIVEAU A1', 'MAR 2026'],
+    color: theme.colors.info,
+    position: 'right',
+  },
+};
+
+/**
+ * Carimbo Vermelho, estilo Lyon (Concluído recente)
+ */
+export const Lyon: Story = {
+  render: (args) => <Stamp {...args} />,
+  args: {
+    topLabel: 'FRANCE',
+    title: 'LYON',
+    bottomLabels: ['NIVEAU A1', 'ABR 2026'],
+    color: theme.colors.error,
+    position: 'center',
+  },
+};
+
+/**
+ * Demonstra a capacidade do componente se ajustar perfeitamente a diferentes escalas.
+ */
+export const Scalability: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 24, justifyContent: 'center', alignItems: 'center' }}>
+      <Stamp 
+        color="#8e44ad" 
+        title="GENEVE" 
+        topLabel="SUISSE"
+        size="sm"
+        bottomLabels={['NIVEAU A2']} 
+      />
+      <Stamp 
+        color="#d35400" 
+        title="MONTREAL" 
+        topLabel="CANADA"
+        size="md"
+        bottomLabels={['NIVEAU B1']} 
+      />
+      <Stamp 
+        color="#16a085" 
+        title="KINSHASA" 
+        topLabel="RD CONGO"
+        size="lg"
+        bottomLabels={['NIVEAU C2']} 
+      />
+    </View>
+  ),
+};

package/src/components/DataDisplay/Stamp/Stamp.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { Typography } from '../../Typography/Typography';
+
+export interface StampProps {
+  /** 
+   * Texto superior (ex: 'REPUBLIQUE', 'FRANCE', 'SÉNÉGAL').
+   */
+  topLabel?: string;
+  /** 
+   * Título central em destaque (ex: 'PARIS', 'LYON', 'DAKAR').
+   */
+  title: string;
+  /** 
+   * Textos inferiores, normalmente nível e data (ex: ['NIVEAU A1', 'MAR 2026']).
+   */
+  bottomLabels?: string[];
+  /** 
+   * Cor principal do carimbo (aplicada ao texto e borda).
+   */
+  color: string;
+  /** 
+   * Cor de fundo do círculo interno. Se não for fornecida, 
+   * calculará automaticamente 10% de opacidade se a cor principal for HEX.
+   */
+  bgColor?: string;
+  /**
+   * Tamanho do carimbo.
+   * - `sm`: 100px (ideal para ícones/badges)
+   * - `md`: 140px (tamanho padrão)
+   * - `lg`: 180px (grande destaque)
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /** 
+   * Posição (inclinação) do carimbo.
+   * - `left`: Inclinado para a esquerda (-8 graus)
+   * - `center`: Direito (0 graus)
+   * - `right`: Inclinado para a direita (8 graus)
+   * @default 'left'
+   */
+  position?: 'left' | 'center' | 'right';
+  /** 
+   * Estilos adicionais para o contentor exterior.
+   */
+  style?: ViewStyle | ViewStyle[];
+}
+
+/**
+ * **Stamp (Carimbo)**
+ * 
+ * Componente visual para representar módulos ou cidades concluídas/em curso na rota de aprendizagem.
+ * Possui um aspeto autêntico de carimbo de passaporte, com borda tracejada e textos proporcionais.
+ */
+export const Stamp = ({
+  topLabel,
+  title,
+  bottomLabels = [],
+  color,
+  bgColor,
+  size = 'md',
+  position = 'left',
+  style,
+}: StampProps) => {
+
+  const SIZE_MAP = {
+    sm: { base: 100, top: 9, title: 18, bottom1: 7, bottom2: 6 },
+    md: { base: 140, top: 11, title: 22, bottom1: 9, bottom2: 7 },
+    lg: { base: 180, top: 14, title: 26, bottom1: 11, bottom2: 8 },
+  };
+
+  const currentSize = SIZE_MAP[size];
+  const BASE_SIZE = currentSize.base;
+
+  // Determinar inclinação: aplicamos a rotação ao carimbo inteiro!
+  const rotation = position === 'right' ? 12 : position === 'center' ? 0 : -12;
+
+  // Determinar cor de fundo (injetar 10% de opacidade se for HEX)
+  const isHex = color.startsWith('#') && (color.length === 7 || color.length === 4);
+  const calculatedBgColor = bgColor || (isHex ? `${color}1A` : 'transparent');
+
+  // Cálculos dinâmicos de proporção baseados no tamanho
+  const innerSize = BASE_SIZE * 0.82;
+  const borderWidth = Math.max(2.5, BASE_SIZE * 0.035);
+
+  return (
+    <View style={[{ alignSelf: 'flex-start', transform: [{ rotate: `${rotation}deg` }] }, style]}>
+      <View
+        style={[
+          styles.outerCircle,
+          {
+            width: BASE_SIZE,
+            height: BASE_SIZE,
+            borderRadius: BASE_SIZE / 2,
+            borderColor: color,
+            borderWidth: borderWidth,
+          },
+        ]}
+      >
+        <View style={[
+          styles.innerCircle,
+          {
+            width: innerSize,
+            height: innerSize,
+            borderRadius: innerSize / 2,
+            backgroundColor: calculatedBgColor,
+          }
+        ]}>
+
+          {topLabel ? (
+            <View style={{ position: 'absolute', top: '22%', width: '100%', alignItems: 'center' }}>
+              <Typography
+                color={color}
+                variant="stampTop"
+                style={{ textAlign: 'center', fontSize: currentSize.top, lineHeight: currentSize.top + 2 }}
+              >
+                {topLabel}
+              </Typography>
+            </View>
+          ) : null}
+
+          <View style={[styles.contentWrapper, { paddingHorizontal: BASE_SIZE * 0.2 }]}>
+            <Typography
+              color={color}
+              variant="stampTitle"
+              style={{ textAlign: 'center', fontSize: currentSize.title, lineHeight: currentSize.title + 4 }}
+            >
+              {title}
+            </Typography>
+          </View>
+
+          {bottomLabels.length > 0 ? (
+            <View style={{ position: 'absolute', bottom: '15%', width: '100%', alignItems: 'center' }}>
+              {bottomLabels.map((label, index) => (
+                <Typography
+                  key={index}
+                  color={color}
+                  variant={index === 0 ? "stampBottom1" : "stampBottom2"}
+                  style={{
+                    marginTop: index > 0 ? 2 : 0,
+                    textAlign: 'center',
+                    fontSize: index === 0 ? currentSize.bottom1 : currentSize.bottom2,
+                    lineHeight: index === 0 ? currentSize.bottom1 + 2 : currentSize.bottom2 + 2,
+                  }}
+                >
+                  {label}
+                </Typography>
+              ))}
+            </View>
+          ) : null}
+
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  outerCircle: {
+    borderStyle: 'dashed',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  innerCircle: {
+    overflow: 'hidden',
+  },
+  contentWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+});

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

@@ -0,0 +1,275 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { StampCard } from './StampCard';
+import { theme } from '../../../styles/theme';
+
+/**
+ * \`StampCard\` é um contentor elegante que exibe um \`Stamp\` no topo e 
+ * informações de contexto (Bandeira, Local, e Subtítulo) na base.
+ * É perfeito para ser usado como card de conquista ou progresso numa grelha.
+ * 
+ * ### Características
+ * - **Modular:** Recebe diretamente as propriedades do \`Stamp\` interno.
+ * - **Design Alinhado:** A cor do local mapeia automaticamente com a cor do carimbo.
+ * - **Container Clean:** Borda redonda e fundo sólido.
+ */
+const meta = {
+  title: 'Components/Cards/StampCard',
+  component: StampCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `O \`StampCard\` é um contentor elegante que exibe um \`Stamp\` no topo e informações de contexto (Bandeira, Local, e Subtítulo) na base.
+É perfeito para ser usado como card de conquista ou progresso numa grelha.
+
+### Características
+- **Modular:** Recebe diretamente as propriedades do \`Stamp\` interno.
+- **Design Alinhado:** A cor do local mapeia automaticamente com a cor do carimbo.
+- **Container Clean:** Borda redonda e fundo sólido.
+
+### Exemplo de Uso
+\`\`\`tsx
+import { StampCard } from '@/components/DataDisplay/StampCard/StampCard';
+import { theme } from '@/styles/theme';
+
+<StampCard 
+  stamp={{
+    color: theme.colors.error,
+    title: 'PARIS',
+    topLabel: 'FRANCE',
+    bottomLabels: ['NIVEAU A1', 'ABR 2026'],
+    size: 'md',
+    position: 'center',
+  }}
+  countryCode="FR"
+  locationName="Paris"
+  subtitle="A1 • concluído"
+  variant="warning"
+  warningText="Visto a expirar!"
+/>
+\`\`\`
+`
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Largura do cartão (ex: 320 ou "100%").',
+    },
+    height: {
+      control: 'text',
+      description: 'Altura do cartão.',
+    },
+    variant: {
+      control: 'radio',
+      options: ['default', 'highlight', 'warning'],
+      description: 'Variante visual do cartão.',
+    },
+    warningText: {
+      control: 'text',
+      description: 'Texto exibido no topo quando variant="warning".',
+      if: { arg: 'variant', eq: 'warning' },
+    },
+    countryCode: {
+      control: 'text',
+      description: 'Código ISO ou nome do país para gerar a bandeira.',
+    },
+    locationName: {
+      control: 'text',
+      description: 'Nome do local em destaque.',
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtítulo cinzento/castanho inferior.',
+    },
+  },
+} satisfies Meta<typeof StampCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Exemplo padrão conforme a especificação do design.
+ */
+export const Default: Story = {
+  args: {
+    stamp: {
+      color: theme.colors.error,
+      title: 'LYON',
+      topLabel: 'FRANCE',
+      bottomLabels: ['NIVEAU A1', 'ABR 2026'],
+      size: 'md',
+      position: 'center',
+    },
+    countryCode: 'FR',
+    locationName: 'Lyon',
+    subtitle: 'A1 • concluído',
+    variant: 'default',
+  },
+};
+
+/**
+ * Exemplo de um cartão em destaque (highlight) com a borda espessa 
+ * que herda a cor do carimbo interno.
+ */
+export const Highlight: Story = {
+  args: {
+    stamp: {
+      color: theme.colors.primary,
+      title: 'DAKAR',
+      topLabel: 'SÉNÉGAL',
+      bottomLabels: ['NIVEAU B1', 'EM CURSO'],
+      size: 'md',
+      position: 'center',
+    },
+    countryCode: 'SN',
+    locationName: 'Dakar',
+    subtitle: 'B1 • em curso',
+    variant: 'highlight',
+  },
+};
+
+/**
+ * Exemplo de um cartão com aviso crítico (warning),
+ * sobrepondo uma badge no topo.
+ */
+export const Warning: Story = {
+  args: {
+    stamp: {
+      color: theme.colors.primaryDark,
+      title: 'BRUXELLES',
+      topLabel: 'BELGIQUE',
+      bottomLabels: ['NIVEAU A2', 'JUL 2026'],
+      size: 'md',
+      position: 'left',
+    },
+    countryCode: 'BE',
+    locationName: 'Bruxelles',
+    subtitle: 'A2 • renovar visto',
+    variant: 'warning',
+    warningText: 'Visto a expirar!',
+  },
+};
+
+/**
+ * Exemplo demonstrando o card num estado de progresso contínuo
+ * (Ex: ainda em curso).
+ */
+export const InProgress: Story = {
+  args: {
+    stamp: {
+      color: theme.colors.primary,
+      title: 'DAKAR',
+      topLabel: 'SÉNÉGAL',
+      bottomLabels: ['NIVEAU B1', 'EM CURSO'],
+      size: 'md',
+      position: 'left',
+    },
+    countryCode: 'SN',
+    locationName: 'Dakar',
+    subtitle: 'B1 • a decorrer',
+  },
+};
+
+/**
+ * Grelha de vários cards para testar a escalabilidade visual
+ * e mostrar como se comportam lado a lado.
+ */
+export const Grid: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 24, justifyContent: 'center' }}>
+      <StampCard 
+        stamp={{
+          color: theme.colors.info,
+          title: 'PARIS',
+          topLabel: 'FRANCE',
+          bottomLabels: ['NIVEAU A2'],
+          size: 'md',
+          position: 'right',
+        }}
+        countryCode="FR"
+        locationName="Paris"
+        subtitle="A2 • concluído"
+      />
+      <StampCard 
+        stamp={{
+          color: theme.colors.success,
+          title: 'GENEVE',
+          topLabel: 'SUISSE',
+          bottomLabels: ['NIVEAU C1'],
+          size: 'md',
+          position: 'left',
+        }}
+        countryCode="CH"
+        locationName="Geneve"
+        subtitle="C1 • em curso"
+        variant="highlight"
+      />
+      <StampCard 
+        stamp={{
+          color: theme.colors.error,
+          title: 'ROMA',
+          topLabel: 'ITALIA',
+          bottomLabels: ['NIVEAU B2'],
+          size: 'md',
+          position: 'center',
+        }}
+        countryCode="IT"
+        locationName="Roma"
+        subtitle="B2 • atrasado"
+        variant="warning"
+        warningText="Atenção necessária"
+      />
+    </View>
+  ),
+};
+
+/**
+ * Exemplo demonstrando a passagem de uma \`width\` customizada.
+ * O cartão estica-se para preencher a largura fornecida, mantendo 
+ * os elementos internos perfeitamente centrados.
+ */
+export const CustomWidth: Story = {
+  args: {
+    width: 320,
+    stamp: {
+      color: theme.colors.primary,
+      title: 'LISBOA',
+      topLabel: 'PORTUGAL',
+      bottomLabels: ['NIVEAU C2'],
+      size: 'lg',
+      position: 'center',
+    },
+    countryCode: 'PT',
+    locationName: 'Lisboa',
+    subtitle: 'C2 • concluído',
+    variant: 'default',
+  },
+};
+
+/**
+ * Exemplo demonstrando a passagem de uma \`height\` customizada.
+ * O cartão estica-se verticalmente, e o carimbo afasta-se das informações
+ * graças ao \`justifyContent: 'space-between'\`.
+ */
+export const CustomHeight: Story = {
+  args: {
+    height: 450,
+    stamp: {
+      color: theme.colors.success,
+      title: 'ZURICH',
+      topLabel: 'SUISSE',
+      bottomLabels: ['NIVEAU B2'],
+      size: 'lg',
+      position: 'right',
+    },
+    countryCode: 'CH',
+    locationName: 'Zurich',
+    subtitle: 'B2 • concluído',
+    variant: 'default',
+  },
+};

package/src/components/DataDisplay/StampCard/StampCard.tsx

@@ -0,0 +1,196 @@
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle, DimensionValue } from 'react-native';
+import { Typography } from '../../Typography/Typography';
+import { Stamp } from '../Stamp/Stamp';
+import { Flag } from '../Flag/Flag';
+import { BaseCard } from '../../Cards/BaseCard/BaseCard';
+import { theme } from '../../../styles/theme';
+
+/**
+ * O \`StampCard\` é um cartão desenhado para exibir o progresso ou conquista num destino (carimbo).
+ * Usa o \`BaseCard\` como base, herda bordas e fundos do Design System, e disponibiliza 3 variantes visuais.
+ * 
+ * ### Exemplo de Uso
+ * \`\`\`tsx
+ * import { StampCard } from '@/components/DataDisplay/StampCard/StampCard';
+ * import { theme } from '@/styles/theme';
+ * 
+ * <StampCard 
+ *   stamp={{
+ *     color: theme.colors.error,
+ *     title: 'PARIS',
+ *     topLabel: 'FRANCE',
+ *     bottomLabels: ['NIVEAU A1', 'ABR 2026'],
+ *     size: 'md',
+ *     position: 'center',
+ *   }}
+ *   countryCode="FR"
+ *   locationName="Paris"
+ *   subtitle="A1 • concluído"
+ *   variant="warning"
+ *   warningText="Visto a expirar!"
+ * />
+ * \`\`\`
+ */
+export interface StampCardProps {
+  /** 
+   * Propriedades para configurar o carimbo que aparece dentro do card.
+   */
+  stamp: {
+    color: string;
+    title: string;
+    topLabel?: string;
+    bottomLabels?: string[];
+    size?: 'sm' | 'md' | 'lg';
+    position?: 'left' | 'center' | 'right';
+  };
+  /** 
+   * Código ISO do país ou nome para exibir a bandeira (ex: 'FR', 'France').
+   * Usa a componente Flag do sistema.
+   */
+  countryCode?: string;
+  /** 
+   * Nome do local que aparece ao lado da bandeira (ex: 'Lyon').
+   * Fica com a mesma cor principal do carimbo.
+   */
+  locationName: string;
+  /** 
+   * Subtítulo informativo (ex: 'A1 • concluído').
+   */
+  subtitle: string;
+  /**
+   * Largura customizada para o card.
+   */
+  width?: DimensionValue;
+  /**
+   * Altura customizada para o card.
+   */
+  height?: DimensionValue;
+  /**
+   * Variante visual do cartão:
+   * - `default`: Borda subtil neutra.
+   * - `highlight`: Borda espessa com a mesma cor do carimbo.
+   * - `warning`: Idêntico ao highlight, mas com badge a sobrepor no topo.
+   */
+  variant?: 'default' | 'highlight' | 'warning';
+  /**
+   * Texto para a badge de aviso (apenas renderizada se variant='warning').
+   * Opcional, por defeito será 'Visto a expirar!'.
+   */
+  warningText?: string;
+  /** 
+   * Estilo customizado para o card (opcional).
+   */
+  style?: ViewStyle;
+}
+
+export const StampCard = ({
+  stamp,
+  countryCode,
+  locationName,
+  subtitle,
+  width,
+  height,
+  variant = 'default',
+  warningText = 'Visto a expirar!',
+  style,
+}: StampCardProps) => {
+
+  const isHighlight = variant === 'highlight' || variant === 'warning';
+  const resolvedBorderColor = isHighlight ? stamp.color : theme.colors.brown[100];
+  const resolvedBorderWidth = isHighlight ? 4 : 2;
+
+  // Proteção contra inputs inválidos do painel do Storybook (ex: objetos vazios ou strings vazias)
+  const safeWidth = (typeof width === 'object' || width === '') ? undefined : width as DimensionValue;
+  const safeHeight = (typeof height === 'object' || height === '') ? undefined : height as DimensionValue;
+
+  return (
+    <BaseCard
+      width={safeWidth}
+      height={safeHeight}
+      borderColor={resolvedBorderColor}
+      borderWidth={resolvedBorderWidth}
+      borderRadius={theme.radius.xxl}
+      overflow="visible"
+      style={[
+        styles.card, 
+        variant === 'warning' && { paddingTop: 44 }, // Espaço extra para compensar a tag flutuante
+        style
+      ]}
+    >
+      
+      {variant === 'warning' ? (
+        <View style={[styles.warningBadge, { backgroundColor: stamp.color }]}>
+          <Typography variant="labelHeavy" color={theme.colors.white} style={{ textTransform: 'none' }}>
+            {warningText}
+          </Typography>
+        </View>
+      ) : null}
+
+      {/* Stamp Container */}
+      <View style={styles.stampContainer}>
+        <Stamp {...stamp} />
+      </View>
+
+      {/* Info Container */}
+      <View style={styles.infoContainer}>
+
+        <View style={styles.locationRow}>
+          {countryCode ? (
+            <Flag
+              countryCode={countryCode}
+              size={20}
+              style={{ marginRight: theme.spacing.xs }}
+            />
+          ) : null}
+          <Typography
+            variant="h5"
+            color={stamp.color}
+          >
+            {locationName}
+          </Typography>
+        </View>
+
+        <Typography
+          variant="subtitle1"
+          color={theme.colors.brown[500]}
+          style={{ marginTop: 2 }}
+        >
+          {subtitle}
+        </Typography>
+
+      </View>
+
+    </BaseCard>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    padding: theme.spacing.space8,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    alignSelf: 'flex-start', // Adapta-se ao conteúdo por defeito
+  },
+  warningBadge: {
+    position: 'absolute',
+    top: -18, // Sobe para quebrar a borda superior (ajustado para a nova borda branca)
+    alignSelf: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    borderRadius: theme.radius.full,
+    zIndex: 10,
+    borderWidth: 4,
+    borderColor: theme.colors.white,
+  },
+  stampContainer: {
+    marginBottom: theme.spacing.space6,
+  },
+  infoContainer: {
+    alignItems: 'center',
+  },
+  locationRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/components/Headers/RouteHeader/RouteHeader.stories.tsx

@@ -67,6 +67,13 @@ export const MapScreen = () => {
       control: 'radio',
       options: ['continuous', 'segmented'],
     },
+    variant: {
+      control: 'radio',
+      options: ['default', 'minimal'],
+    },
+    notificationCount: {
+      control: 'number',
+    },
   },
 } satisfies Meta<typeof RouteHeader>;
 
@@ -74,6 +81,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Continuous: Story = {
+  render: (args) => <RouteHeader {...args} />,
   args: {
     routeLabel: 'ROTA DA FRANCOFONIA',
     countryCode: 'SN',
@@ -88,6 +96,7 @@ export const Continuous: Story = {
 };
 
 export const Segmented: Story = {
+  render: (args) => <RouteHeader {...args} />,
   args: {
     routeLabel: 'ROTA DA FRANCOFONIA',
     stepLabel: 'paragem 5 de 8',
@@ -102,3 +111,22 @@ export const Segmented: Story = {
     safeAreaTop: 20,
   },
 };
+
+export const Minimal: Story = {
+  render: (args) => <RouteHeader {...args} />,
+  args: {
+    routeLabel: 'Francofonia',
+    stepLabel: '5/8',
+    countryCode: 'SN',
+    title: 'Dakar',
+    subtitle: 'B2',
+    progressText: '', 
+    progressSubText: '',
+    progress: 0.625,
+    progressType: 'segmented',
+    totalSegments: 8,
+    variant: 'minimal',
+    notificationCount: 3,
+    safeAreaTop: 20,
+  },
+};

package/src/components/Headers/RouteHeader/RouteHeader.tsx

@@ -5,6 +5,7 @@ import { theme } from '../../../styles/theme';
 import { Flag } from '../../DataDisplay/Flag/Flag';
 import { ProgressBar } from '../../DataDisplay/ProgressBar/ProgressBar';
 import { Typography } from '../../Typography/Typography';
+import { IconButton } from '../../Buttons/IconButton/IconButton';
 
 /**
  * Propriedades para o componente RouteHeader.
@@ -69,6 +70,19 @@ export interface RouteHeaderProps {
    * Deve receber o `insets.top` devolvido pelo hook `useSafeAreaInsets()`.
    */
   safeAreaTop?: number;
+  /** 
+   * Variante visual do cabeçalho.
+   * - `default`: Mostra o progresso em texto gigante à direita (ex: 63%).
+   * - `minimal`: Oculta o progresso em texto e pode mostrar ações contextuais à direita (ex: sino e globo).
+   * @default 'default'
+   */
+  variant?: 'default' | 'minimal';
+  /** Contagem de notificações não lidas. Requer variant="minimal" */
+  notificationCount?: number;
+  /** Callback ao clicar no sino de notificações. Requer variant="minimal" */
+  onNotificationPress?: () => void;
+  /** Callback ao clicar no mapa/globo. Requer variant="minimal" */
+  onGlobePress?: () => void;
   /** 
    * Estilos adicionais para o contentor exterior (ex: zIndex, position absolute). 
    */
@@ -98,6 +112,10 @@ export const RouteHeader = ({
   progress,
   totalSegments = 1,
   progressType = 'continuous',
+  variant = 'default',
+  notificationCount = 0,
+  onNotificationPress,
+  onGlobePress,
   safeAreaTop = 0,
   style,
 }: RouteHeaderProps) => {
@@ -109,14 +127,21 @@ export const RouteHeader = ({
     <View style={[styles.container, { paddingTop: safeAreaTop + scale(12), paddingHorizontal: scale(20), paddingBottom: scale(20) }, style]}>
       {/* Top Row: Labels */}
       <View style={[styles.topRow, { marginBottom: scale(10) }]}>
-        <Typography variant="bodySmHeavy" color={theme.colors.brown[500]} style={{ textTransform: 'uppercase', letterSpacing: 0.5 }}>
-          {routeLabel}
-        </Typography>
-        {stepLabel ? (
-          <Typography variant="smallHeavy" color={theme.colors.brown[500]}>
-            {stepLabel}
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Typography variant="bodySmHeavy" color={theme.colors.brown[500]} style={{ textTransform: 'uppercase', letterSpacing: 0.5 }}>
+            {routeLabel}
           </Typography>
-        ) : null}
+          {stepLabel ? (
+            <>
+              <Typography variant="bodySmHeavy" color={theme.colors.brown[400]} style={{ marginHorizontal: scale(6) }}>
+                •
+              </Typography>
+              <Typography variant="bodySmHeavy" color={theme.colors.brown[500]}>
+                {stepLabel}
+              </Typography>
+            </>
+          ) : null}
+        </View>
       </View>
 
       {/* Middle Row: Flag, Title, Progress Text */}
@@ -135,14 +160,42 @@ export const RouteHeader = ({
           </Typography>
         </View>
 
-        <View style={styles.progressTextContainer}>
-          <Typography variant="h4" color={theme.colors.primary}>
-            {progressText}
-          </Typography>
-          <Typography variant="smallHeavy" color={theme.colors.brown[500]}>
-            {progressSubText}
-          </Typography>
-        </View>
+        {variant === 'default' && (
+          <View style={styles.progressTextContainer}>
+            <Typography variant="h4" color={theme.colors.primary}>
+              {progressText}
+            </Typography>
+            <Typography variant="smallHeavy" color={theme.colors.brown[500]}>
+              {progressSubText}
+            </Typography>
+          </View>
+        )}
+
+        {variant === 'minimal' && (
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: scale(8) }}>
+            <View style={{ zIndex: 10, elevation: 10 }}>
+              <IconButton 
+                iconName="Bell" 
+                variant="secondary" 
+                size="sm" 
+                iconColor={theme.colors.primary}
+                onPress={onNotificationPress}
+              />
+              {!!notificationCount && notificationCount > 0 && (
+                <View style={styles.badgeContainer}>
+                  <Typography variant="smallHeavy" color={theme.colors.white}>{notificationCount > 99 ? '99+' : notificationCount}</Typography>
+                </View>
+              )}
+            </View>
+            <IconButton 
+              iconName="Globe" 
+              variant="secondary" 
+              size="sm" 
+              iconColor={theme.colors.brown[800]}
+              onPress={onGlobePress}
+            />
+          </View>
+        )}
       </View>
 
       {/* Bottom Row: Progress Bar */}
@@ -217,4 +270,20 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
     justifyContent: 'center',
   },
+  badgeContainer: {
+    position: 'absolute',
+    top: -4,
+    right: -4,
+    backgroundColor: theme.colors.error,
+    borderRadius: 10,
+    minWidth: 18,
+    height: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+    borderWidth: 1.5,
+    borderColor: theme.colors.white,
+    zIndex: 10,
+    elevation: 10,
+  }
 });

package/src/components/Navigation/PaginationDots/PaginationDots.stories.tsx

@@ -17,6 +17,13 @@ const meta = {
     }
   },
   tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'brown'],
+      description: 'Variante visual dos pontos.',
+    },
+  },
   decorators: [
     (Story) => (
       <View style={{ padding: 40, backgroundColor: theme.colors.cream }}>
@@ -30,16 +37,21 @@ export default meta;
 type Story = StoryObj<any>;
 
 export const Default: Story = {
-  args: { totalPages: 4, currentPage: 1 } as any,
+  args: { totalPages: 4, currentPage: 1, variant: 'default' } as any,
+  render: (args: any) => <PaginationDots {...args} />,
+};
+
+export const Brown: Story = {
+  args: { totalPages: 4, currentPage: 1, variant: 'brown' } as any,
   render: (args: any) => <PaginationDots {...args} />,
 };
 
-const InteractiveDots = ({ totalPages }: { totalPages: number }) => {
+const InteractiveDots = ({ totalPages, variant }: { totalPages: number, variant?: 'default' | 'brown' }) => {
   const [currentPage, setCurrentStep] = useState(0);
 
   return (
     <View style={{ alignItems: 'center' }}>
-      <PaginationDots totalPages={totalPages} currentPage={currentPage} />
+      <PaginationDots totalPages={totalPages} currentPage={currentPage} variant={variant} />
       
       <View style={{ flexDirection: 'row', gap: 20, marginTop: 20 }}>
         <Button 
@@ -58,5 +70,9 @@ const InteractiveDots = ({ totalPages }: { totalPages: number }) => {
 };
 
 export const Interactive: Story = {
-  render: () => <InteractiveDots totalPages={4} />,
+  render: () => <InteractiveDots totalPages={4} variant="default" />,
+};
+
+export const InteractiveBrown: Story = {
+  render: () => <InteractiveDots totalPages={4} variant="brown" />,
 };

package/src/components/Navigation/PaginationDots/PaginationDots.tsx

@@ -17,27 +17,41 @@ export interface PaginationDotsProps {
   inactiveColor?: string;
   /** Cor customizada do ponto ativo (opcional). */
   activeColor?: string;
+  /**
+   * Variante visual dos pontos.
+   * - `default`: Ponto ativo longo (primário), inativos redondos.
+   * - `brown`: Cores da paleta castanha, pontos inativos mais largos (em formato de traço curto).
+   */
+  variant?: 'default' | 'brown';
   style?: ViewStyle | ViewStyle[];
 }
 
 interface DotProps {
   isActive: boolean;
+  variant: 'default' | 'brown';
 }
 
-const Dot = ({ isActive }: DotProps) => {
+const Dot = ({ isActive, variant }: DotProps) => {
   const { scale } = useResponsive();
 
-  // Animação da largura: Inativo (6px) -> Ativo (20px)
-  const widthAnim = useRef(new Animated.Value(isActive ? scale(20) : scale(6))).current;
+  // Se for 'brown', os inativos são mais largos (traços curtos em vez de círculos perfeitos)
+  const inactiveWidth = variant === 'brown' ? scale(12) : scale(6);
+  const activeWidth = scale(20);
+
+  const activeColor = variant === 'brown' ? theme.colors.brown[500] : theme.colors.primary;
+  const inactiveColor = theme.colors.brown[100]; // Bolinhas cinzas inativas mantêm a cor padrão (brown[100])
+
+  // Animação da largura
+  const widthAnim = useRef(new Animated.Value(isActive ? activeWidth : inactiveWidth)).current;
 
   useEffect(() => {
     Animated.timing(widthAnim, {
-      toValue: isActive ? scale(20) : scale(6),
+      toValue: isActive ? activeWidth : inactiveWidth,
       duration: 250,
-      easing: Easing.bezier(0.175, 0.885, 0.32, 1.275), // Efeito "ease-bounce" semelhante ao CSS
+      easing: Easing.bezier(0.175, 0.885, 0.32, 1.275), // Efeito "ease-bounce"
       useNativeDriver: false, // Animating width requires useNativeDriver: false
     }).start();
-  }, [isActive, widthAnim, scale]);
+  }, [isActive, widthAnim, activeWidth, inactiveWidth]);
 
   return (
     <Animated.View
@@ -47,14 +61,14 @@ const Dot = ({ isActive }: DotProps) => {
           width: widthAnim,
           height: scale(6),
           borderRadius: scale(3),
-          backgroundColor: isActive ? theme.colors.primary : theme.colors.brown[100],
+          backgroundColor: isActive ? activeColor : inactiveColor,
         },
       ]}
     />
   );
 };
 
-export const PaginationDots = ({ totalPages, currentPage, style }: PaginationDotsProps) => {
+export const PaginationDots = ({ totalPages, currentPage, variant = 'default', style }: PaginationDotsProps) => {
   const { scale } = useResponsive();
 
   // Garantir que não crasha caso passem steps negativos
@@ -63,7 +77,7 @@ export const PaginationDots = ({ totalPages, currentPage, style }: PaginationDot
   return (
     <View style={[styles.container, { gap: scale(7), marginBottom: scale(24) }, style]}>
       {Array.from({ length: totalPages }).map((_, index) => (
-        <Dot key={index} isActive={index === safeCurrentStep} />
+        <Dot key={index} isActive={index === safeCurrentStep} variant={variant} />
       ))}
     </View>
   );

package/src/index.ts

@@ -27,6 +27,8 @@ export * from './components/DataDisplay/InstructionBubble/InstructionBubble';
 export * from './components/DataDisplay/LevelBadge/LevelBadge';
 export * from './components/DataDisplay/NumberBadge/NumberBadge';
 export * from './components/DataDisplay/ProgressBar/ProgressBar';
+export * from './components/DataDisplay/Stamp/Stamp';
+export * from './components/DataDisplay/StampCard/StampCard';
 export * from './components/DataDisplay/StatBadge/StatBadge';
 export * from './components/DataDisplay/Tag/Tag';
 export * from './components/Feedback/BottomSheet/BottomSheet';

package/src/styles/theme.ts

@@ -234,6 +234,40 @@ export const theme = {
       desktopFontSize: 16,
     },
 
+    // FAMÍLIA SERIF (Elementos Clássicos, Carimbos)
+    stampTop: {
+      ...font('IM Fell English', '400'),
+      fontStyle: 'italic',
+      fontSize: 12,
+      lineHeight: 14,
+      letterSpacing: 2.5,
+      textTransform: 'uppercase',
+      desktopFontSize: 16,
+    },
+    stampTitle: {
+      ...font('Fredoka-SemiBold', '600'),
+      fontSize: 24,
+      lineHeight: 28,
+      textTransform: 'uppercase',
+      desktopFontSize: 28,
+    },
+    stampBottom1: {
+      ...font('Nunito-Regular', '400'),
+      fontSize: 9,
+      lineHeight: 12,
+      letterSpacing: 2,
+      textTransform: 'uppercase',
+      desktopFontSize: 10,
+    },
+    stampBottom2: {
+      ...font('Nunito-Regular', '400'),
+      fontSize: 7,
+      lineHeight: 10,
+      letterSpacing: 0.5,
+      textTransform: 'uppercase',
+      desktopFontSize: 8,
+    },
+
     // FAMÍLIA NUNITO (Corpo, Labels, Listas e Infos)
     bodyLgHeavy: {
       ...font('Nunito-Black', '900'),

package/src/utils/iconMap.ts

@@ -1,4 +1,4 @@
-import { Play, Volume2, Volume1, ArrowRight, X, Check, ChevronRight, ChevronLeft, Info, AlertTriangle, Book, Mic, Home, Compass, GraduationCap, FolderOpen, User, ShoppingCart, FileText, Wallet } from 'lucide-react-native';
+import { Play, Volume2, Volume1, ArrowRight, X, Check, ChevronRight, ChevronLeft, Info, AlertTriangle, Book, Mic, Home, Compass, GraduationCap, FolderOpen, User, ShoppingCart, FileText, Wallet, Bell, Globe } from 'lucide-react-native';
 
 /**
  * Para evitar que o Vite e o Metro (React Native) tentem empacotar os 1400+ ícones 
@@ -29,4 +29,6 @@ export const IconMap: Record<string, any> = {
   ShoppingCart,
   FileText,
   Wallet,
+  Bell,
+  Globe,
 };