@xetwa/design-system 1.0.38 → 1.0.40

package/package.json

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

package/src/components/Buttons/WordChipIcon/WordChipIcon.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WordChipIcon } from './WordChipIcon';
+import { Calendar, Bell } from 'lucide-react';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Buttons/WordChipIcon',
+  component: WordChipIcon,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'O **WordChipIcon** é um WordChip que permite renderizar um ícone no lado esquerdo ou direito.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    word: { control: 'text' },
+    iconPosition: {
+      control: 'radio',
+      options: ['left', 'right'],
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'selected', 'correct', 'wrong', 'used'],
+    },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+} satisfies Meta<typeof WordChipIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    word: 'Calendário',
+    icon: <Calendar size={20} color="#cf7a30" />,
+    iconPosition: 'left',
+    state: 'default',
+  },
+};
+
+export const RightIcon: Story = {
+  args: {
+    word: 'Lembrete',
+    icon: <Bell size={20} color="#cf7a30" />,
+    iconPosition: 'right',
+    state: 'default',
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', maxWidth: '600px' }}>
+      <WordChipIcon word="Calendário" icon={<Calendar size={20} color="#cf7a30" />} state="default" />
+      <WordChipIcon word="Lembrete" icon={<Bell size={20} color="#cf7a30" />} state="selected" />
+      <WordChipIcon word="Alarme" icon={<Bell size={20} color="#cf7a30" />} state="correct" />
+      <WordChipIcon word="Erro" icon={<Calendar size={20} color="#cf7a30" />} state="wrong" />
+      <WordChipIcon word="Usado" icon={<Calendar size={20} color="#cf7a30" />} state="used" />
+    </div>
+  ),
+};

package/src/components/Buttons/WordChipIcon/WordChipIcon.tsx

@@ -0,0 +1,186 @@
+import { useState, useEffect, useRef } from 'react';
+import { View, StyleSheet, Pressable, Animated } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+import type { WordChipState } from '../WordChip/WordChip';
+
+export interface WordChipIconProps {
+  /** A palavra ou texto a apresentar. */
+  word: string;
+  /** O ícone a ser renderizado. */
+  icon: React.ReactNode;
+  /** A posição do ícone. Padrão: 'left' */
+  iconPosition?: 'left' | 'right';
+  /** Estado atual do chip. */
+  state?: WordChipState;
+  /** Função disparada ao clicar. */
+  onPress?: () => void;
+  /** Estilos adicionais para o container. */
+  style?: ViewStyle | ViewStyle[];
+  /** Impede cliques. */
+  disabled?: boolean;
+  /** Se verdadeiro, ocupa a largura total disponível. */
+  fullWidth?: boolean;
+  /** Tamanho do chip. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Largura personalizada. Ignora max-width e align-self flex-start. */
+  width?: number | string;
+}
+
+export const WordChipIcon = ({
+  word,
+  icon,
+  iconPosition = 'left',
+  state = 'default',
+  onPress,
+  style,
+  disabled = false,
+  fullWidth = false,
+  size = 'md',
+  width,
+}: WordChipIconProps) => {
+  const { scale } = useResponsive();
+  const [isPressed, setIsPressed] = useState(false);
+  const scaleAnim = useRef(new Animated.Value(state === 'selected' ? 0.96 : 1)).current;
+
+  // Animação ao entrar na resposta (bounce) quando o estado passa a 'selected'
+  useEffect(() => {
+    if (state === 'selected') {
+      scaleAnim.setValue(0.96);
+      Animated.spring(scaleAnim, {
+        toValue: 1,
+        friction: 4,
+        tension: 100,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      scaleAnim.setValue(1);
+    }
+  }, [state, scaleAnim]);
+
+  const getStateStyles = () => {
+    switch (state) {
+      case 'selected':
+        return {
+          bg: theme.colors.primaryLight,
+          border: theme.colors.primary,
+          shadow: 'rgba(242, 151, 75, 0.25)',
+          text: theme.colors.brown[800],
+        };
+      case 'correct':
+        return {
+          bg: '#eafaf2',
+          border: theme.colors.success,
+          shadow: 'rgba(22, 145, 90, 0.2)',
+          text: theme.colors.success,
+        };
+      case 'wrong':
+        return {
+          bg: '#fdf0ee',
+          border: theme.colors.error,
+          shadow: 'rgba(207, 91, 72, 0.2)',
+          text: theme.colors.error,
+        };
+      case 'used':
+        return {
+          bg: theme.colors.white,
+          border: theme.colors.brown[100],
+          shadow: theme.colors.brown[100],
+          text: theme.colors.brown[300],
+        };
+      case 'default':
+      default:
+        return {
+          bg: theme.colors.white,
+          border: theme.colors.brown[100],
+          shadow: theme.colors.brown[100],
+          text: theme.colors.brown[800],
+        };
+    }
+  };
+
+  const currentStyles = getStateStyles();
+  const isDisabled = disabled || state === 'used';
+  
+  // Press state visual adjustments
+  const showPressed = isPressed && !isDisabled;
+
+  const getTypographyVariant = () => {
+    switch (size) {
+      case 'lg': return 'btnLg';
+      case 'sm': return 'bodyMd';
+      case 'md':
+      default: return 'bodyLg';
+    }
+  };
+
+  return (
+    <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, width ? { width } : null, style]}>
+      <Pressable
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
+        onPress={onPress}
+        disabled={isDisabled}
+        style={{ alignSelf: width ? 'stretch' : (fullWidth ? 'stretch' : 'flex-start') }}
+      >
+        <View style={[
+          styles.shadowContainer,
+          { 
+            backgroundColor: currentStyles.shadow,
+            borderRadius: scale(12),
+            paddingBottom: showPressed ? 0 : scale(3),
+            marginTop: showPressed ? scale(3) : 0,
+          },
+          (fullWidth || width) ? { alignSelf: 'stretch', width: '100%' } : null
+        ]}>
+          <View style={[
+            styles.innerContainer,
+            {
+              backgroundColor: currentStyles.bg,
+              borderColor: currentStyles.border,
+              borderRadius: scale(12),
+              paddingVertical: scale(size === 'lg' ? 14 : size === 'sm' ? 6 : 9),
+              paddingHorizontal: scale(size === 'lg' ? 20 : size === 'sm' ? 10 : 14),
+              minHeight: scale(size === 'lg' ? 56 : size === 'sm' ? 36 : 44),
+            },
+            (fullWidth || width) ? { width: '100%' } : null
+          ]}>
+            <View style={[
+              styles.contentRow,
+              { flexDirection: iconPosition === 'right' ? 'row-reverse' : 'row' }
+            ]}>
+              {icon}
+              <Typography variant={getTypographyVariant()} style={[
+                styles.text,
+                { color: currentStyles.text }
+              ]}>
+                {word}
+              </Typography>
+            </View>
+          </View>
+        </View>
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  shadowContainer: {
+    alignSelf: 'flex-start',
+  },
+  innerContainer: {
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentRow: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});

package/src/components/Buttons/WordChipIcon/index.ts

@@ -0,0 +1 @@
+export * from './WordChipIcon';

package/src/components/Cards/BaseCard/BaseCard.tsx

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
-import { View, Pressable } from 'react-native';
-import type { ViewStyle, DimensionValue } from 'react-native';
+import type { DimensionValue, ViewStyle } from 'react-native';
+import { Pressable, View } from 'react-native';
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
-import { theme } from '../../../styles/theme';
 import { useResponsive } from '../../../hooks/useResponsive';
+import { theme } from '../../../styles/theme';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
@@ -15,41 +15,41 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export interface BaseCardProps {
   /** O conteúdo a ser renderizado dentro do cartão. */
   children?: ReactNode;
-  
+
   /** Variante de estilo do cartão */
   variant?: 'default' | 'soft';
-  
+
   // Container styling
   backgroundColor?: string;
   borderRadius?: number;
   borderWidth?: number;
   borderColor?: string;
   borderStyle?: 'solid' | 'dashed';
-  
+
   // Padding & Layout
   padding?: number;
   paddingVertical?: number;
   paddingHorizontal?: number;
-  
+
   // Sizing
   width?: DimensionValue;
   height?: DimensionValue;
   minHeight?: DimensionValue;
-  
+
   // Shadow presets: 'none' | 'sm' | 'md' | 'lg'
   shadow?: 'none' | 'sm' | 'md' | 'lg';
   shadowColor?: string;
-  
+
   // Interactive / Pressable behavior
   onPress?: () => void;
   disabled?: boolean;
-  
+
   // Selection state
   isSelected?: boolean;
   selectedBorderColor?: string;
   selectedBackgroundColor?: string;
   selectedShadowColor?: string;
-  
+
   // Opacity & other styles
   opacity?: number;
   overflow?: 'visible' | 'hidden';
@@ -107,12 +107,12 @@ export const BaseCard = ({
   const activeBorderWidth = isSelected ? 2 : borderWidth;
   const activeShadow = isSelected
     ? {
-        shadowColor: selectedShadowColor || '#f2974b',
-        shadowOffset: { width: 0, height: scale(4) },
-        shadowOpacity: 0.14,
-        shadowRadius: scale(14),
-        elevation: 4,
-      }
+      shadowColor: selectedShadowColor || '#f2974b',
+      shadowOffset: { width: 0, height: scale(4) },
+      shadowOpacity: 0.14,
+      shadowRadius: scale(14),
+      elevation: 4,
+    }
     : getShadowStyle();
 
   // Consolidate static card styles with responsive scaling

package/src/components/Cards/ModuleCard/ModuleCard.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
-    status: { control: 'radio', options: ['active', 'locked', 'completed', 'dark', 'active-dark'] },
+    status: { control: 'radio', options: ['active', 'locked', 'completed', 'dark', 'active-dark', 'completed-dark'] },
     number: { control: 'number' },
     title: { control: 'text' },
     subtitle: { control: 'text' },
@@ -75,6 +75,19 @@ export const ActiveDark: Story = {
     subtitle: 'Regatear, números, comida',
     subtext: '• 3/5',
     tagLabel: 'AULA MARCADA',
+    onSchedulePress: () => console.log('Agendar Aula'),
+    onReviewPress: () => console.log('Rever'),
+  },
+};
+
+export const ExamMode: Story = {
+  args: {
+    status: 'active-dark',
+    title: 'No mercado de Dakar',
+    subtitle: 'Exame de módulo',
+    subtext: '• 3/5',
+    tagLabel: 'POR FAZER',
+    onExamPress: () => console.log('Fazer Exame'),
   },
 };
 
@@ -88,6 +101,18 @@ export const Completed: Story = {
   },
 };
 
+export const CompletedDark: Story = {
+  args: {
+    status: 'completed-dark',
+    number: 1,
+    title: 'Saudações & teranga (Dark)',
+    subtitle: 'Concluído',
+    subtext: '• 5/5',
+    onReviewPress: () => console.log('Rever módulo'),
+    onNextCountryPress: () => console.log('Ir para próximo país'),
+  },
+};
+
 export const Grid: Story = {
   args: {
     status: 'active',
@@ -129,6 +154,23 @@ export const Grid: Story = {
         subtitle="Conversação e prática" 
         subtext="• 4/4"
         tagLabel="AULA MARCADA"
+        onSchedulePress={() => {}}
+        onReviewPress={() => {}}
+      />
+      <ModuleCard 
+        status="active-dark" 
+        title="No mercado de Dakar" 
+        subtitle="Exame de módulo" 
+        subtext="• 3/5"
+        tagLabel="POR FAZER"
+        onExamPress={() => {}}
+      />
+      <ModuleCard 
+        status="completed-dark" 
+        number={4}
+        title="Módulo Concluído Dark" 
+        subtitle="Concluído" 
+        subtext="• 5/5"
       />
     </View>
   ),

package/src/components/Cards/ModuleCard/ModuleCard.tsx

@@ -4,20 +4,20 @@ import { theme } from '../../../styles/theme';
 import { Tag } from '../../DataDisplay/Tag/Tag';
 import { ProgressBar } from '../../DataDisplay/ProgressBar/ProgressBar';
 import { Badge } from '../../DataDisplay/Badge/Badge';
-import { Lock, Check, GraduationCap, RotateCcw, CalendarPlus } from 'lucide-react-native';
+import { Lock, Check, GraduationCap, RotateCcw, CalendarPlus, PenTool } from 'lucide-react-native';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
 import React, { useRef } from 'react';
 
-export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark' | 'active-dark';
+export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark' | 'active-dark' | 'completed-dark';
 
 /**
  * Cartão que representa uma lição ou módulo no caminho de aprendizagem.
  * 
  * Regras de Animação e Clique:
  * - `active`: O cartão como um todo tem animação de escala e é clicável via `onPress`.
- * - `active-dark`: O cartão é estático. Apenas os botões internos de "Agendar" (`onSchedulePress`) e "Rever" (`onReviewPress`) têm animação individual.
- * - `completed`: O cartão é estático. Apenas o ícone/botão superior direito de "Rever" (`onReviewPress`) tem animação individual.
+ * - `active-dark`: O cartão é estático. Apenas os botões internos de "Agendar" (`onSchedulePress`), "Exame" (`onExamPress`) e "Rever" (`onReviewPress`) têm animação individual quando fornecidos.
+ * - `completed` / `completed-dark`: O cartão é estático. Apenas o ícone/botão superior direito de "Rever" (`onReviewPress`) tem animação individual.
  * - `locked` / `dark`: O cartão não é interativo.
  */
 export interface ModuleCardProps {
@@ -47,8 +47,14 @@ export interface ModuleCardProps {
   style?: ViewStyle | ViewStyle[];
   /** Função de clique no botão de Agendar (modo active/dark). */
   onSchedulePress?: () => void;
+  /** Função de clique no botão principal de Exame (modo active/dark). */
+  onExamPress?: () => void;
   /** Função de clique no botão de Rever (modo completed/active/dark). */
   onReviewPress?: () => void;
+  /** Função de clique no botão de Ir para o Próximo País (modo completed-dark). */
+  onNextCountryPress?: () => void;
+  /** Label do botão de próximo país. Padrão: "Seguir Viagem". */
+  nextCountryLabel?: string;
 }
 
 export const ModuleCard = ({
@@ -66,14 +72,19 @@ export const ModuleCard = ({
   onPress,
   style,
   onSchedulePress,
+  onExamPress,
   onReviewPress,
+  onNextCountryPress,
+  nextCountryLabel = 'Seguir Viagem',
 }: ModuleCardProps) => {
   const { scale, scaleText, width } = useResponsive();
   const isMobileScreen = width < 400;
 
   const scheduleScale = useRef(new Animated.Value(1)).current;
+  const examScale = useRef(new Animated.Value(1)).current;
   const reviewScale = useRef(new Animated.Value(1)).current;
   const completedReviewScale = useRef(new Animated.Value(1)).current;
+  const nextCountryScale = useRef(new Animated.Value(1)).current;
   const scaleAnim = useRef(new Animated.Value(1)).current;
 
   const handlePressIn = () => {
@@ -135,6 +146,7 @@ export const ModuleCard = ({
         };
       case 'dark':
       case 'active-dark':
+      case 'completed-dark':
         return {
           borderColor: theme.colors.brown[800],
           borderWidth: 0,
@@ -151,6 +163,7 @@ export const ModuleCard = ({
         return theme.colors.brown[400];
       case 'dark':
       case 'active-dark':
+      case 'completed-dark':
         return theme.colors.white;
       default:
         return theme.colors.brown[800];
@@ -159,7 +172,7 @@ export const ModuleCard = ({
 
   const containerStyle = getContainerStyle();
   const titleStyleColor = getTextColor();
-  const subtitleStyleColor = subtitleColor || (status === 'completed' ? theme.colors.success : status === 'locked' || status === 'dark' || status === 'active-dark' ? theme.colors.brown[300] : theme.colors.brown[500]);
+  const subtitleStyleColor = subtitleColor || (status === 'completed' || status === 'completed-dark' ? theme.colors.success : status === 'locked' || status === 'dark' || status === 'active-dark' ? theme.colors.brown[300] : theme.colors.brown[500]);
 
   const activeShadow = status === 'active' ? {
     shadowColor: theme.colors.primary,
@@ -180,7 +193,7 @@ export const ModuleCard = ({
         />
       );
     }
-    if (status === 'completed') {
+    if (status === 'completed' || status === 'completed-dark') {
       const checkSize = isMobileScreen ? scale(16) : scale(22);
       return (
         <Badge
@@ -290,9 +303,24 @@ export const ModuleCard = ({
           )}
         </View>
 
-        {(status === 'locked' || status === 'dark' || status === 'completed') && (
+        {(status === 'locked' || status === 'dark' || status === 'completed' || status === 'completed-dark') && (
           <View style={[styles.rightContent, { marginLeft: colGap }]}>
-            {status === 'completed' && (
+            {status === 'completed-dark' && onNextCountryPress ? (
+              <Animated.View style={{ transform: [{ scale: nextCountryScale }] }}>
+                <Pressable 
+                  onPress={onNextCountryPress}
+                  onPressIn={() => animateBtnIn(nextCountryScale)}
+                  onPressOut={() => animateBtnOut(nextCountryScale)}
+                  hitSlop={10}
+                >
+                  <Tag
+                    label={nextCountryLabel}
+                    variant="success"
+                    size={isMobileScreen ? 'xs' : 'sm'}
+                  />
+                </Pressable>
+              </Animated.View>
+            ) : (status === 'completed' || status === 'completed-dark') ? (
               <Animated.View style={{ transform: [{ scale: completedReviewScale }] }}>
                 <Pressable 
                   style={styles.reviewIconButton} 
@@ -305,7 +333,7 @@ export const ModuleCard = ({
                   <Typography variant="label" style={[styles.reviewIconText, { fontSize: scaleText(9) }]}>REVER</Typography>
                 </Pressable>
               </Animated.View>
-            )}
+            ) : null}
             {(status === 'locked' || status === 'dark') && (
               <Lock
                 stroke={status === 'dark' ? 'rgba(255,255,255,0.4)' : '#c3b1a4'}
@@ -329,31 +357,52 @@ export const ModuleCard = ({
 
       {status === 'active-dark' && (
         <View style={styles.compactDarkFooter}>
-          <Animated.View style={{ transform: [{ scale: scheduleScale }] }}>
-            <Pressable 
-              onPress={onSchedulePress || (() => {})}
-              onPressIn={() => animateBtnIn(scheduleScale)}
-              onPressOut={() => animateBtnOut(scheduleScale)}
-              hitSlop={8}
-              style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.colors.primary, paddingHorizontal: scale(14), paddingVertical: scale(6), borderRadius: 100 }}
-            >
-              <CalendarPlus stroke={theme.colors.white} strokeWidth={2.5} size={scale(14)} />
-              <Typography variant="label" style={{ color: theme.colors.white, fontSize: scaleText(12), fontWeight: 'bold', marginLeft: scale(6) }}>Agendar Aula</Typography>
-            </Pressable>
-          </Animated.View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: scale(8) }}>
+            {onSchedulePress && (
+              <Animated.View style={{ transform: [{ scale: scheduleScale }] }}>
+                <Pressable 
+                  onPress={onSchedulePress}
+                  onPressIn={() => animateBtnIn(scheduleScale)}
+                  onPressOut={() => animateBtnOut(scheduleScale)}
+                  hitSlop={8}
+                  style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.colors.primary, paddingHorizontal: scale(14), paddingVertical: scale(6), borderRadius: 100 }}
+                >
+                  <CalendarPlus stroke={theme.colors.white} strokeWidth={2.5} size={scale(14)} />
+                  <Typography variant="label" style={{ color: theme.colors.white, fontSize: scaleText(12), fontWeight: 'bold', marginLeft: scale(6) }}>Agendar Aula</Typography>
+                </Pressable>
+              </Animated.View>
+            )}
 
-          <Animated.View style={{ transform: [{ scale: reviewScale }] }}>
-            <Pressable 
-              style={styles.compactReviewBtn} 
-              onPress={onReviewPress || (() => {})}
-              onPressIn={() => animateBtnIn(reviewScale)}
-              onPressOut={() => animateBtnOut(reviewScale)}
-              hitSlop={8}
-            >
-              <RotateCcw stroke={theme.colors.primary} strokeWidth={2.5} size={scale(16)} />
-              <Typography variant="label" style={[styles.reviewIconText, { color: theme.colors.primary, fontSize: scaleText(10), marginLeft: scale(4), marginTop: 0 }]}>REVER</Typography>
-            </Pressable>
-          </Animated.View>
+            {onExamPress && (
+              <Animated.View style={{ transform: [{ scale: examScale }] }}>
+                <Pressable 
+                  onPress={onExamPress}
+                  onPressIn={() => animateBtnIn(examScale)}
+                  onPressOut={() => animateBtnOut(examScale)}
+                  hitSlop={8}
+                  style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.colors.primary, paddingHorizontal: scale(14), paddingVertical: scale(6), borderRadius: 100 }}
+                >
+                  <PenTool stroke={theme.colors.white} strokeWidth={2.5} size={scale(14)} />
+                  <Typography variant="label" style={{ color: theme.colors.white, fontSize: scaleText(12), fontWeight: 'bold', marginLeft: scale(6) }}>Fazer Exame</Typography>
+                </Pressable>
+              </Animated.View>
+            )}
+          </View>
+
+          {onReviewPress && (
+            <Animated.View style={{ transform: [{ scale: reviewScale }] }}>
+              <Pressable 
+                style={styles.compactReviewBtn} 
+                onPress={onReviewPress}
+                onPressIn={() => animateBtnIn(reviewScale)}
+                onPressOut={() => animateBtnOut(reviewScale)}
+                hitSlop={8}
+              >
+                <RotateCcw stroke={theme.colors.primary} strokeWidth={2.5} size={scale(16)} />
+                <Typography variant="label" style={[styles.reviewIconText, { color: theme.colors.primary, fontSize: scaleText(10), marginLeft: scale(4), marginTop: 0 }]}>REVER</Typography>
+              </Pressable>
+            </Animated.View>
+          )}
         </View>
       )}
 

package/src/components/Feedback/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Animated, Modal, Pressable } from 'react-native';
+import { Typography } from '../../Typography/Typography';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { X } from 'lucide-react-native';
+
+export interface BottomSheetProps {
+  /** Se o painel está visível */
+  isVisible: boolean;
+  /** Callback para fechar o painel */
+  onClose: () => void;
+  /** Título do painel */
+  title?: string;
+  /** Conteúdo do painel */
+  children: React.ReactNode;
+}
+
+/**
+ * Componente BottomSheet
+ * 
+ * Um painel que desliza desde a parte inferior do ecrã para mostrar
+ * conteúdos adicionais, como seletores, opções extras ou formulários.
+ */
+export const BottomSheet: React.FC<BottomSheetProps> = ({
+  isVisible,
+  onClose,
+  title,
+  children,
+}) => {
+  const { scale } = useResponsive();
+  const [renderModal, setRenderModal] = useState(isVisible);
+  const translateY = useRef(new Animated.Value(1000)).current;
+
+  // Sincronizar montagem do Modal com a animação
+  useEffect(() => {
+    if (isVisible) {
+      setRenderModal(true);
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+        easing: (value) => 1 - Math.pow(1 - value, 3), // ease-out
+      }).start();
+    } else if (renderModal) {
+      Animated.timing(translateY, {
+        toValue: 1000,
+        duration: 250,
+        useNativeDriver: true,
+      }).start(() => {
+        setRenderModal(false);
+      });
+    }
+  }, [isVisible, translateY, renderModal]);
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  if (!renderModal) return null;
+
+  return (
+    <Modal visible={renderModal} transparent animationType="fade" onRequestClose={handleClose}>
+      <View style={styles.overlay}>
+        <Pressable style={styles.backdrop} onPress={handleClose} />
+        <Animated.View style={[styles.sheet, { transform: [{ translateY }] }]}>
+          
+          <View style={[styles.header, { paddingVertical: scale(16), paddingHorizontal: scale(20) }]}>
+            {title ? (
+              <Typography variant="h2" style={styles.title}>{title}</Typography>
+            ) : <View />}
+            
+            <Pressable onPress={handleClose} style={({ pressed }) => [styles.closeBtn, pressed && { opacity: 0.5 }]}>
+              <X stroke="#9a8478" strokeWidth={2.5} size={scale(24)} />
+            </Pressable>
+          </View>
+          
+          <View style={[styles.content, { paddingHorizontal: scale(20), paddingBottom: scale(32) }]}>
+            {children}
+          </View>
+          
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  sheet: {
+    backgroundColor: theme.colors.white,
+    borderTopLeftRadius: theme.radius.xxl,
+    borderTopRightRadius: theme.radius.xxl,
+    width: '100%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    elevation: 10,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.brown[50], // #fbf6f0
+  },
+  title: {
+    color: theme.colors.brown[800],
+  },
+  closeBtn: {
+    padding: 4,
+  },
+  content: {
+    paddingTop: 16,
+  },
+});

package/src/components/Forms/CalendarPicker/CalendarPicker.stories.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarPicker } from './CalendarPicker';
+import { View } from 'react-native';
+
+const meta = {
+  title: 'Forms/CalendarPicker',
+  component: CalendarPicker,
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 20, backgroundColor: '#fbf6f0', flex: 1 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof CalendarPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [date, setDate] = useState<string | Date>(new Date());
+    return (
+      <CalendarPicker
+        selectedDate={date}
+        onSelectDate={(str) => setDate(str)}
+      />
+    );
+  }
+};

package/src/components/Forms/CalendarPicker/CalendarPicker.tsx

@@ -0,0 +1,220 @@
+import React, { useState, useMemo } from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import { Typography } from '../../Typography/Typography';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { ChevronLeft, ChevronRight } from 'lucide-react-native';
+
+export interface CalendarPickerProps {
+  /** Data atualmente selecionada (ex: '2024-03-24' ou Date object) */
+  selectedDate?: string | Date;
+  /** Callback quando uma data é escolhida */
+  onSelectDate: (dateString: string, date: Date) => void;
+}
+
+const WEEKDAYS = ['DOM', 'SEG', 'TER', 'QUA', 'QUI', 'SEX', 'SÁB'];
+const MONTHS = [
+  'JANEIRO', 'FEVEREIRO', 'MARÇO', 'ABRIL', 'MAIO', 'JUNHO',
+  'JULHO', 'AGOSTO', 'SETEMBRO', 'OUTUBRO', 'NOVEMBRO', 'DEZEMBRO'
+];
+
+/**
+ * Componente CalendarPicker
+ * Permite a seleção de uma data num calendário nativo customizado.
+ */
+export const CalendarPicker: React.FC<CalendarPickerProps> = ({
+  selectedDate,
+  onSelectDate,
+}) => {
+  const { scale } = useResponsive();
+
+  // Normalize selected date
+  const parsedSelectedDate = selectedDate
+    ? (typeof selectedDate === 'string' ? new Date(selectedDate) : selectedDate)
+    : null;
+
+  // Estado para o mês e ano visualizados
+  const [currentViewDate, setCurrentViewDate] = useState(
+    parsedSelectedDate || new Date()
+  );
+
+  const viewMonth = currentViewDate.getMonth();
+  const viewYear = currentViewDate.getFullYear();
+
+  const handlePrevMonth = () => {
+    setCurrentViewDate(new Date(viewYear, viewMonth - 1, 1));
+  };
+
+  const handleNextMonth = () => {
+    setCurrentViewDate(new Date(viewYear, viewMonth + 1, 1));
+  };
+
+  // Gerar dias do calendário
+  const daysInMonth = useMemo(() => {
+    const year = viewYear;
+    const month = viewMonth;
+    const date = new Date(year, month, 1);
+    const days: (Date | null)[] = [];
+
+    // Preencher dias vazios antes do dia 1 (para alinhar com o dia da semana correto)
+    const firstDayOfWeek = date.getDay(); // 0 = Sunday, 1 = Monday, etc.
+    for (let i = 0; i < firstDayOfWeek; i++) {
+      days.push(null);
+    }
+
+    // Preencher dias do mês
+    while (date.getMonth() === month) {
+      days.push(new Date(date));
+      date.setDate(date.getDate() + 1);
+    }
+
+    return days;
+  }, [viewYear, viewMonth]);
+
+  const isSameDay = (d1: Date, d2: Date) => {
+    return d1.getFullYear() === d2.getFullYear() &&
+           d1.getMonth() === d2.getMonth() &&
+           d1.getDate() === d2.getDate();
+  };
+
+  // Função para garantir formato YYYY-MM-DD local sem problema de fuso horário
+  const formatDateString = (date: Date) => {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header do Mês */}
+      <View style={styles.header}>
+        <Pressable onPress={handlePrevMonth} style={({ pressed }) => [styles.arrowBtn, pressed && { opacity: 0.5 }]}>
+          <ChevronLeft stroke={theme.colors.brown[800]} strokeWidth={2.5} size={scale(24)} />
+        </Pressable>
+        <Typography variant="h2" style={styles.monthText}>
+          {MONTHS[viewMonth]} {viewYear}
+        </Typography>
+        <Pressable onPress={handleNextMonth} style={({ pressed }) => [styles.arrowBtn, pressed && { opacity: 0.5 }]}>
+          <ChevronRight stroke={theme.colors.brown[800]} strokeWidth={2.5} size={scale(24)} />
+        </Pressable>
+      </View>
+
+      {/* Dias da Semana (D S T Q Q S S) */}
+      <View style={styles.weekdaysRow}>
+        {WEEKDAYS.map((day, index) => (
+          <View key={index} style={styles.weekdayCell}>
+            <Typography variant="label" style={styles.weekdayText}>
+              {day[0]}
+            </Typography>
+          </View>
+        ))}
+      </View>
+
+      {/* Grelha de Dias */}
+      <View style={styles.daysGrid}>
+        {daysInMonth.map((date, index) => {
+          if (!date) {
+            return <View key={`empty-${index}`} style={styles.dayCell} />;
+          }
+
+          const isSelected = parsedSelectedDate ? isSameDay(date, parsedSelectedDate) : false;
+          const isToday = isSameDay(date, new Date());
+          const isPast = date < new Date(new Date().setHours(0,0,0,0));
+
+          return (
+            <Pressable
+              key={index}
+              disabled={isPast}
+              onPress={() => onSelectDate(formatDateString(date), date)}
+              style={({ pressed }) => [
+                styles.dayCell,
+                pressed && !isPast && { opacity: 0.7 },
+                isPast && { opacity: 0.3 }
+              ]}
+            >
+              <View style={[
+                styles.dayCircle,
+                isSelected && styles.dayCircleSelected
+              ]}>
+                <Typography
+                  variant="bodyLg"
+                  weight={isSelected ? 'bold' : 'normal'}
+                  style={[
+                    styles.dayText,
+                    isSelected && styles.dayTextSelected,
+                    isToday && !isSelected && styles.dayTextToday
+                  ]}
+                >
+                  {date.getDate()}
+                </Typography>
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+    paddingHorizontal: 8,
+  },
+  monthText: {
+    color: theme.colors.brown[800],
+    textTransform: 'uppercase',
+  },
+  arrowBtn: {
+    padding: 4,
+  },
+  weekdaysRow: {
+    flexDirection: 'row',
+    marginBottom: 8,
+  },
+  weekdayCell: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  weekdayText: {
+    color: theme.colors.brown[400],
+  },
+  daysGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  dayCell: {
+    width: `${100 / 7}%`,
+    height: 44, // Altura fixa para garantir que o círculo interior fique centrado
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dayCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dayCircleSelected: {
+    backgroundColor: theme.colors.primary,
+  },
+  dayText: {
+    color: theme.colors.brown[700],
+  },
+  dayTextSelected: {
+    color: theme.colors.white,
+  },
+  dayTextToday: {
+    color: theme.colors.primary,
+    fontWeight: 'bold',
+  },
+});

package/src/components/Forms/DaySelector/DaySelector.tsx

@@ -4,6 +4,7 @@ import type { ViewStyle } from 'react-native';
 import { theme } from '../../../styles/theme';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
+import { Calendar } from 'lucide-react-native';
 
 /**
  * Interface para os dados de um dia disponível no DaySelector.
@@ -36,6 +37,8 @@ export interface DaySelectorProps {
   onSelectDay: (id: string, date: Date) => void;
   /** Estilo para o container exterior */
   style?: ViewStyle | ViewStyle[];
+  /** Callback chamado quando o utilizador clica no ícone de calendário (para ver mais datas) */
+  onCalendarPress?: () => void;
 }
 
 export const DaySelector = ({
@@ -43,6 +46,7 @@ export const DaySelector = ({
   selectedId,
   onSelectDay,
   style,
+  onCalendarPress,
 }: DaySelectorProps) => {
   const { scale, scaleText } = useResponsive();
 
@@ -110,6 +114,30 @@ export const DaySelector = ({
             </Pressable>
           );
         })}
+        
+        {onCalendarPress && (
+          <Pressable
+            onPress={onCalendarPress}
+            style={({ pressed }) => [
+              styles.item,
+              transitionStyle,
+              {
+                minWidth: scale(48),
+                paddingVertical: scale(8),
+                borderRadius: scale(13),
+                backgroundColor: '#fff',
+                borderWidth: scale(1.5),
+                borderColor: '#efe2d6',
+                borderStyle: 'dashed',
+              },
+              pressed && {
+                opacity: 0.7
+              }
+            ]}
+          >
+            <Calendar stroke="#9a8478" strokeWidth={2} size={scale(20)} />
+          </Pressable>
+        )}
       </ScrollView>
     </View>
   );

package/src/components/Forms/TimeSlot/TimeSlot.tsx

@@ -3,6 +3,7 @@ import type { ViewStyle } from 'react-native';
 import { theme } from '../../../styles/theme';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
+import { Plus } from 'lucide-react-native';
 
 /**
  * Interface para os dados de um horário disponível no TimeSlot.
@@ -31,6 +32,8 @@ export interface TimeSlotProps {
   onSelectTime: (id: string, time: string) => void;
   /** Estilo para o container exterior */
   style?: ViewStyle | ViewStyle[];
+  /** Callback chamado quando o utilizador clica em "Ver mais" */
+  onShowMorePress?: () => void;
 }
 
 export const TimeSlot = ({
@@ -38,6 +41,7 @@ export const TimeSlot = ({
   selectedId,
   onSelectTime,
   style,
+  onShowMorePress,
 }: TimeSlotProps) => {
   const { scale, scaleText } = useResponsive();
 
@@ -96,6 +100,31 @@ export const TimeSlot = ({
             </Pressable>
           );
         })}
+        {onShowMorePress && (
+          <Pressable
+            onPress={onShowMorePress}
+            style={({ pressed }) => [
+              styles.item,
+              transitionStyle,
+              {
+                paddingVertical: scale(9),
+                paddingHorizontal: scale(14),
+                borderRadius: scale(11),
+                backgroundColor: '#fff',
+                borderWidth: scale(1.5),
+                borderColor: '#efe2d6',
+                borderStyle: 'dashed',
+                minHeight: scale(44),
+                minWidth: scale(44),
+              },
+              pressed && {
+                opacity: 0.7
+              }
+            ]}
+          >
+            <Plus stroke="#9a8478" strokeWidth={2.5} size={scale(18)} />
+          </Pressable>
+        )}
       </View>
     </View>
   );

package/src/index.ts

@@ -1,43 +1,36 @@
-export * from './components/Headers/CountryHeader/CountryHeader';
-export * from './components/Buttons/MainButton/MainButton';
-export * from './components/Buttons/BaseButton/BaseButton';
 export * from './components/Buttons/BackButton/BackButton';
+export * from './components/Buttons/BaseButton/BaseButton';
 export * from './components/Buttons/FabButton/FabButton';
-export * from './components/Cards/ModuleCard/ModuleCard';
-export * from './components/Cards/ModuleCompletionCard/ModuleCompletionCard';
-export * from './components/Cards/AnswerOptionCard/AnswerOptionCard';
-export * from './components/DataDisplay/ProgressBar/ProgressBar';
-export * from './components/DataDisplay/Tag/Tag';
-export * from './components/DataDisplay/Badge/Badge';
-export * from './components/Inputs/TextInput/TextInput';
-export * from './components/Typography/Typography';
-export * from './components/Cards/BoardingPassCard/BoardingPassCard';
-export * from './components/Cards/SelectionCard/SelectionCard';
-export * from './components/Cards/PricingCard/PricingCard';
-export * from './components/DataDisplay/Flag/Flag';
-export * from './components/Cards/BaseCard/BaseCard';
-export * from './components/Cards/TeacherCard/TeacherCard';
-export * from './components/Cards/CountryCard/CountryCard';
-export * from './components/Cards/PlanCard/PlanCard';
-export * from './components/DataDisplay/LevelBadge/LevelBadge';
-export * from './hooks/useResponsive';
-export * from './components/Mascots/Vava/Vava';
-export * from './components/Mascots/Yaya/Yaya';
-export * from './components/Buttons/WordChip/WordChip';
-export * from './components/Feedback/FeedbackBottomSheet/FeedbackBottomSheet';
-export * from './components/Headers/ProfileHeader/ProfileHeader';
-export * from './components/Inputs/FillInTheBlank/FillInTheBlank';
-export * from './components/Charts/WeeklyProgressChart';
-export * from './components/Navigation/ProgressMap/ProgressMap';
 export * from './components/Buttons/IconButton/IconButton';
 export * from './components/Buttons/JourneyButton/JourneyButton';
+export * from './components/Buttons/MainButton/MainButton';
 export * from './components/Buttons/WordChip/WordChip';
+export * from './components/Buttons/WordChipIcon/WordChipIcon';
+export * from './components/Cards/AnswerOptionCard/AnswerOptionCard';
+export * from './components/Cards/BaseCard/BaseCard';
+export * from './components/Cards/BoardingPassCard/BoardingPassCard';
+export * from './components/Cards/CountryCard/CountryCard';
 export * from './components/Cards/LevelProgressCard/LevelProgressCard';
+export * from './components/Cards/ModuleCard/ModuleCard';
+export * from './components/Cards/ModuleCompletionCard/ModuleCompletionCard';
 export * from './components/Cards/Passport/PassportViewer';
+export * from './components/Cards/PlanCard/PlanCard';
+export * from './components/Cards/PricingCard/PricingCard';
+export * from './components/Cards/SelectionCard/SelectionCard';
+export * from './components/Cards/TeacherCard/TeacherCard';
+export * from './components/Charts/WeeklyProgressChart';
 export * from './components/DataDisplay/Avatar/Avatar';
+export * from './components/DataDisplay/Badge/Badge';
+export * from './components/DataDisplay/Flag/Flag';
 export * from './components/DataDisplay/InstructionBubble/InstructionBubble';
-export * from './components/DataDisplay/StatBadge/StatBadge';
+export * from './components/DataDisplay/LevelBadge/LevelBadge';
 export * from './components/DataDisplay/NumberBadge/NumberBadge';
+export * from './components/DataDisplay/ProgressBar/ProgressBar';
+export * from './components/DataDisplay/StatBadge/StatBadge';
+export * from './components/DataDisplay/Tag/Tag';
+export * from './components/Feedback/BottomSheet/BottomSheet';
+export * from './components/Feedback/FeedbackBottomSheet/FeedbackBottomSheet';
+export * from './components/Forms/CalendarPicker/CalendarPicker';
 export * from './components/Forms/Checkbox/Checkbox';
 export * from './components/Forms/DaySelector/DaySelector';
 export * from './components/Forms/Radio/Radio';
@@ -45,6 +38,16 @@ export * from './components/Forms/SegmentedToggle/SegmentedToggle';
 export * from './components/Forms/Select/Select';
 export * from './components/Forms/Switch/Switch';
 export * from './components/Forms/TimeSlot/TimeSlot';
+export * from './components/Headers/CountryHeader/CountryHeader';
+export * from './components/Headers/ProfileHeader/ProfileHeader';
+export * from './components/Inputs/FillInTheBlank/FillInTheBlank';
+export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Mascots/Vava/Vava';
+export * from './components/Mascots/Yaya/Yaya';
 export * from './components/Navigation/BottomTabBar/BottomTabBar';
 export * from './components/Navigation/PaginationDots/PaginationDots';
+export * from './components/Navigation/ProgressMap/ProgressMap';
 export * from './components/Navigation/WorldProgressMap/WorldProgressMap';
+export * from './components/Typography/Typography';
+export * from './hooks/useResponsive';
+

package/src/styles/theme.ts

@@ -5,7 +5,7 @@ const font = (family: string, webWeight: '400' | '500' | '600' | '700' | '800' |
   const webFamily = family.split('-')[0];
   return Platform.select({
     web: { fontFamily: webFamily, fontWeight: webWeight },
-    default: { fontFamily: family }
+    default: { fontFamily: family, fontWeight: webWeight }
   }) as { fontFamily: string; fontWeight?: '400' | '500' | '600' | '700' | '800' | '900' };
 };