@xetwa/design-system 1.0.39 → 1.0.41

package/src/components/Navigation/TabBar/TabBar.tsx

@@ -0,0 +1,245 @@
+import React, { useRef, useEffect } from 'react';
+import { View, StyleSheet, Pressable, Animated, Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { IconMap } from '../../../utils/iconMap';
+
+export type TabBarVariant = 'A' | 'B' | 'C';
+
+export interface TabBarItem {
+  id: string;
+  label: string;
+  icon: string;
+  hasBadge?: boolean;
+}
+
+export interface TabBarProps {
+  items: TabBarItem[];
+  activeItemId: string;
+  onItemPress: (id: string) => void;
+  variant?: TabBarVariant;
+  safeAreaBottom?: number;
+  style?: ViewStyle | ViewStyle[];
+}
+
+const TabBarItemComponent = ({
+  item,
+  isActive,
+  variant,
+  iconSize,
+  onItemPress,
+}: {
+  item: TabBarItem;
+  isActive: boolean;
+  variant: TabBarVariant;
+  iconSize: number;
+  onItemPress: (id: string) => void;
+}) => {
+  const { scale, scaleText } = useResponsive();
+  const color = isActive ? theme.colors.primary : theme.colors.brown[300];
+
+  // Animação de escala ao pressionar
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  const handlePressIn = () => {
+    Animated.timing(scaleAnim, {
+      toValue: 0.9,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      friction: 4,
+      tension: 40,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  // Animação de transição quando se torna ativo
+  const activeAnim = useRef(new Animated.Value(isActive ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.spring(activeAnim, {
+      toValue: isActive ? 1 : 0,
+      friction: 7,
+      tension: 60,
+      useNativeDriver: true,
+    }).start();
+  }, [isActive]);
+
+  return (
+    <Pressable
+      onPress={() => onItemPress(item.id)}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      style={styles.itemContainer}
+    >
+      <Animated.View style={[styles.itemInner, { transform: [{ scale: scaleAnim }] }]}>
+        {/* Variante B: Barra no topo */}
+        {variant === 'B' && (
+          <Animated.View 
+            style={[
+              styles.indicatorB, 
+              { 
+                width: scale(28), 
+                height: scale(4),
+                opacity: activeAnim,
+                transform: [
+                  { translateY: activeAnim.interpolate({ inputRange: [0, 1], outputRange: [-4, 0] }) },
+                  { scaleX: activeAnim.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }) }
+                ]
+              }
+            ]} 
+          />
+        )}
+
+        {/* Variante A: Pill no ícone */}
+        <View
+          style={[
+            styles.iconWrapper,
+            variant === 'A' && isActive && styles.pillA,
+            variant === 'A' && isActive && { paddingHorizontal: scale(16), paddingVertical: scale(6), borderRadius: scale(100) },
+          ]}
+        >
+          {(() => {
+            const IconComponent = IconMap[item.icon];
+            if (!IconComponent) return null;
+            return <IconComponent color={color} size={iconSize} strokeWidth={2.5} />;
+          })()}
+          
+          {/* Badge de Notificação */}
+          {item.hasBadge && (
+            <View
+              style={[
+                styles.badge,
+                {
+                  width: scale(9),
+                  height: scale(9),
+                  borderRadius: scale(4.5),
+                  borderWidth: scale(2),
+                  top: scale(-3),
+                  right: scale(-4),
+                  // Adjust badge position for pill
+                  ...(variant === 'A' && isActive && { top: scale(3), right: scale(8) })
+                }
+              ]}
+            />
+          )}
+        </View>
+
+        <Typography
+          variant="smallHeavy"
+          style={[
+            styles.label,
+            { color, fontSize: scaleText(9.5) },
+            variant === 'C' && { marginBottom: scale(4) }
+          ]}
+        >
+          {item.label}
+        </Typography>
+
+        {/* Variante C: Dot abaixo da label */}
+        {variant === 'C' && isActive && (
+          <View style={[styles.dotC, { width: scale(4), height: scale(4), borderRadius: scale(2) }]} />
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+export const TabBar = ({
+  items,
+  activeItemId,
+  onItemPress,
+  variant = 'B',
+  safeAreaBottom = 0,
+  style,
+}: TabBarProps) => {
+  const { scale, scaleText, width } = useResponsive();
+  const isDesktop = width >= 768;
+
+  const iconSize = isDesktop ? scale(22) : scale(21);
+  const bottomPadding = Math.max(scale(14), safeAreaBottom);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          paddingBottom: bottomPadding,
+          paddingHorizontal: scale(6),
+        },
+        style,
+      ]}
+    >
+      {items.map((item) => (
+        <TabBarItemComponent
+          key={item.id}
+          item={item}
+          isActive={activeItemId === item.id}
+          variant={variant}
+          iconSize={iconSize}
+          onItemPress={onItemPress}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'flex-start',
+    backgroundColor: theme.colors.white,
+    borderTopWidth: 1.5,
+    borderTopColor: theme.colors.brown[100],
+    width: '100%',
+    minHeight: 56,
+  },
+  itemContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    minWidth: 60,
+  },
+  itemInner: {
+    alignItems: 'center',
+    paddingTop: 9, // Espaço entre border-top e ícone (Variant B spec)
+    position: 'relative',
+    width: '100%',
+  },
+  iconWrapper: {
+    position: 'relative',
+    marginBottom: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pillA: {
+    backgroundColor: theme.colors.primaryLight,
+  },
+  indicatorB: {
+    position: 'absolute',
+    top: 0,
+    backgroundColor: theme.colors.primary,
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4,
+  },
+  label: {
+    textAlign: 'center',
+  },
+  dotC: {
+    position: 'absolute',
+    bottom: -6,
+    backgroundColor: theme.colors.primary,
+  },
+  badge: {
+    position: 'absolute',
+    backgroundColor: theme.colors.error,
+    borderColor: theme.colors.white,
+  },
+});

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,17 @@ 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/TabBar/TabBar';
 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' };
 };
 
@@ -172,86 +172,161 @@ export const theme = {
   },
 
   typography: {
+    // FAMÍLIA FREDOKA (Títulos e Destaques)
     display1: {
       ...font('Fredoka-Bold', '700'),
       fontSize: 28,
-      lineHeight: 34,
-      desktopFontSize: 42,
+      lineHeight: 28, // ajustado para line-height 1 se não especificado
+      desktopFontSize: 34,
     },
     display2: {
       ...font('Fredoka-Bold', '700'),
-      fontSize: 24,
-      lineHeight: 30,
-      desktopFontSize: 34,
+      fontSize: 27,
+      lineHeight: 27,
+      desktopFontSize: 32,
     },
     h1: {
       ...font('Fredoka-Bold', '700'),
       fontSize: 22,
-      lineHeight: 28,
+      lineHeight: 22,
       desktopFontSize: 28,
     },
     h2: {
-      ...font('Fredoka-SemiBold', '600'),
-      fontSize: 18,
-      lineHeight: 24,
-      desktopFontSize: 22,
+      ...font('Fredoka-Bold', '700'),
+      fontSize: 20,
+      lineHeight: 20,
+      desktopFontSize: 24,
     },
     h3: {
       ...font('Fredoka-SemiBold', '600'),
-      fontSize: 16,
+      fontSize: 20,
+      lineHeight: 24, // Sem line-height fixo no spec, 1.2
+      desktopFontSize: 24,
+    },
+    h4: {
+      ...font('Fredoka-SemiBold', '600'),
+      fontSize: 19,
       lineHeight: 22,
+      desktopFontSize: 22,
+    },
+    h5: {
+      ...font('Fredoka-Bold', '700'),
+      fontSize: 18,
+      lineHeight: 22,
+      desktopFontSize: 20,
+    },
+    h6: {
+      ...font('Fredoka-SemiBold', '600'),
+      fontSize: 17,
+      lineHeight: 18.7, // line-height 1.1 * 17
       desktopFontSize: 19,
     },
-    label: {
-      ...font('Nunito-Black', '900'),
-      fontSize: 10,
-      lineHeight: 14,
-      letterSpacing: 1.2, // 10 * 0.12
-      desktopFontSize: 11,
+    subtitle1: {
+      ...font('Fredoka-SemiBold', '600'),
+      fontSize: 16,
+      lineHeight: 16, // line-height 1
+      desktopFontSize: 18,
     },
-    bodyLg: {
-      ...font('Nunito-Bold', '700'),
-      fontSize: 15,
+    subtitle2: {
+      ...font('Fredoka-Bold', '700'),
+      fontSize: 14,
+      lineHeight: 18,
+      desktopFontSize: 16,
+    },
+
+    // FAMÍLIA NUNITO (Corpo, Labels, Listas e Infos)
+    bodyLgHeavy: {
+      ...font('Nunito-ExtraBold', '800'),
+      fontSize: 16,
       lineHeight: 24,
-      desktopFontSize: 17,
+      desktopFontSize: 18,
+    },
+    bodyMdHeavy: {
+      ...font('Nunito-ExtraBold', '800'),
+      fontSize: 15,
+      lineHeight: 22,
+      desktopFontSize: 16,
     },
     bodyMd: {
-      ...font('Nunito-Bold', '700'),
-      fontSize: 13.5,
+      ...font('Nunito-SemiBold', '600'),
+      fontSize: 15,
       lineHeight: 22,
+      desktopFontSize: 16,
+    },
+    bodySmHeavy: {
+      ...font('Nunito-ExtraBold', '800'),
+      fontSize: 13.5,
+      lineHeight: 20,
       desktopFontSize: 15,
     },
     bodySm: {
-      ...font('Nunito-ExtraBold', '800'),
-      fontSize: 12,
-      lineHeight: 18,
-      desktopFontSize: 13,
+      ...font('Nunito-Bold', '700'),
+      fontSize: 13.5,
+      lineHeight: 20,
+      desktopFontSize: 15,
+    },
+    captionItalic: {
+      ...font('Nunito-SemiBoldItalic', '600'),
+      fontSize: 12.5,
+      lineHeight: 18.75, // line-height 1.5 * 12.5
+      desktopFontSize: 14,
+      fontStyle: 'italic',
     },
     caption: {
+      ...font('Nunito-Bold', '700'),
+      fontSize: 12.5,
+      lineHeight: 18,
+      desktopFontSize: 14,
+    },
+    labelHeavy: {
+      ...font('Nunito-Black', '900'), // O spec diz 800, mas no Nunito "Black" (900) dá melhor leitura p/ labels, ou podemos usar ExtraBold (800). Vamos usar ExtraBold (800) como no spec:
+      // wait, refiz para respeitar o 800
       ...font('Nunito-ExtraBold', '800'),
-      fontSize: 10,
+      fontSize: 11,
       lineHeight: 16,
+      letterSpacing: 0.88, // 11 * 0.08em
+      textTransform: 'uppercase',
+      desktopFontSize: 12,
+    },
+    label: {
+      ...font('Nunito-Bold', '700'),
+      fontSize: 11,
+      lineHeight: 16,
+      desktopFontSize: 12,
+    },
+    smallHeavy: {
+      ...font('Nunito-ExtraBold', '800'),
+      fontSize: 10,
+      lineHeight: 14,
       desktopFontSize: 11,
     },
+    small: {
+      ...font('Nunito-Bold', '700'),
+      fontSize: 10,
+      lineHeight: 14,
+      desktopFontSize: 11,
+    },
+
+    // Botões (mantemos originais porque são usados no MainButton)
     btnLg: {
       ...font('Nunito-Black', '900'),
       fontSize: 16,
       lineHeight: 20,
-      letterSpacing: 0.64, // 16 * 0.04
+      letterSpacing: 0.64,
       desktopFontSize: 17,
     },
     btnMd: {
       ...font('Nunito-Black', '900'),
       fontSize: 14,
       lineHeight: 18,
-      letterSpacing: 0.56, // 14 * 0.04
+      letterSpacing: 0.56,
       desktopFontSize: 15,
     },
     btnSm: {
       ...font('Nunito-Black', '900'),
       fontSize: 12,
       lineHeight: 16,
-      letterSpacing: 0.48, // 12 * 0.04
+      letterSpacing: 0.48,
       desktopFontSize: 12,
     },
   },

package/src/utils/iconMap.ts

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