@xetwa/design-system 1.0.40 → 1.0.42

package/package.json

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

package/src/components/Cards/BoardingPassCard/BoardingPassCard.tsx

@@ -132,17 +132,17 @@ export const BoardingPassCard = ({
       styles.container,
       {
         borderRadius: scale(20),
-        minHeight: scale(210),
+        minHeight: scale(240),
       },
       style
     ]}>
       {/* Top Section */}
       <View style={[
-        styles.topSection, 
-        { 
+        styles.topSection,
+        {
           backgroundColor: currentHeaderBg,
-          paddingTop: scale(16),
-          paddingBottom: scale(16),
+          paddingTop: scale(24),
+          paddingBottom: scale(24),
           paddingHorizontal: scale(18),
         }
       ]}>
@@ -158,7 +158,7 @@ export const BoardingPassCard = ({
         ]} />
 
         <View style={[styles.headerRow, { marginBottom: scale(16) }]}>
-          <Typography variant="caption" style={[styles.headerText]}>CARTÃO DE EMBARQUE</Typography>
+          <Typography variant="labelHeavy" style={[styles.headerText]}>CARTÃO DE EMBARQUE</Typography>
           <View style={styles.headerPlaneContainer}>
             <Plane stroke={theme.colors.white} strokeWidth={2.2} size={scale(22)} />
           </View>
@@ -166,8 +166,8 @@ export const BoardingPassCard = ({
 
         <View style={styles.routeRow}>
           <View style={styles.cityCol}>
-            <Typography variant="h1" style={[styles.cityCode]}>{originCode}</Typography>
-            <Typography variant="caption" style={[styles.cityName]}>{originName}</Typography>
+            <Typography variant="display2" style={[styles.cityCode]}>{originCode}</Typography>
+            <Typography variant="small" style={[styles.cityName]}>{originName}</Typography>
           </View>
 
           <View style={[styles.flightLineContainer, { height: scale(30), marginHorizontal: scale(12) }]}>
@@ -178,8 +178,8 @@ export const BoardingPassCard = ({
           </View>
 
           <View style={[styles.cityCol, { alignItems: 'flex-end' }]}>
-            <Typography variant="h1" style={[styles.cityCode]}>{destCode}</Typography>
-            <Typography variant="caption" style={[styles.cityName]}>{destName}</Typography>
+            <Typography variant="display2" style={[styles.cityCode]}>{destCode}</Typography>
+            <Typography variant="small" style={[styles.cityName]}>{destName}</Typography>
           </View>
         </View>
       </View>
@@ -188,7 +188,7 @@ export const BoardingPassCard = ({
       <View style={[
         styles.bottomSection,
         {
-          paddingVertical: scale(14),
+          paddingVertical: scale(20),
           paddingHorizontal: scale(18),
         }
       ]}>
@@ -205,8 +205,8 @@ export const BoardingPassCard = ({
             {flagIconNode ? flagIconNode : <Flag countryCode={countryName} size={scale(40)} />}
           </View>
           <View style={styles.countryContent}>
-            <Typography variant="h2" style={[styles.countryName]}>{countryName}</Typography>
-            <Typography variant="bodySm" style={[styles.countrySubtitle]}>{countrySubtitle}</Typography>
+            <Typography variant="subtitle1" style={[styles.countryName]}>{countryName}</Typography>
+            <Typography variant="label" style={[styles.countrySubtitle]}>{countrySubtitle}</Typography>
           </View>
         </View>
 
@@ -220,12 +220,12 @@ export const BoardingPassCard = ({
 
         <View style={[styles.footerRow, { gap: scale(14) }]}>
           <View style={styles.footerCol}>
-            <Typography variant="caption" style={[styles.footerLabel]}>MÓDULOS</Typography>
-            <Typography variant="h3" style={[styles.footerValue]}>{modulesCount}</Typography>
+            <Typography variant="labelHeavy" style={[styles.footerLabel]}>MÓDULOS</Typography>
+            <Typography variant="subtitle1" style={[styles.footerValue]}>{modulesCount}</Typography>
           </View>
           <View style={styles.footerCol}>
-            <Typography variant="caption" style={[styles.footerLabel]}>FOCO</Typography>
-            <Typography variant="h3" style={[styles.footerValue]}>{focusText}</Typography>
+            <Typography variant="labelHeavy" style={[styles.footerLabel]}>FOCO</Typography>
+            <Typography variant="subtitle1" style={[styles.footerValue]}>{focusText}</Typography>
           </View>
         </View>
       </View>
@@ -241,6 +241,10 @@ const styles = StyleSheet.create({
     minHeight: 230,
     ...theme.shadows.lg,
   },
+  headerText: {
+    color: theme.colors.white,
+    opacity: 0.9,
+  },
   topSection: {
     paddingTop: 16,
     paddingBottom: 16,
@@ -266,11 +270,6 @@ const styles = StyleSheet.create({
   headerPlaneContainer: {
     transform: [{ rotate: '0deg' }],
   },
-  headerText: {
-    letterSpacing: 1.2,
-    textTransform: 'uppercase',
-    color: 'rgba(255, 255, 255, 0.75)',
-  },
   routeRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -345,6 +344,10 @@ const styles = StyleSheet.create({
   countrySubtitle: {
     color: '#9a8478',
   },
+  footerLabel: {
+    color: theme.colors.brown[500],
+    marginBottom: 4,
+  },
   divider: {
     borderTopWidth: 1.5,
     borderColor: '#f3e7da',

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

@@ -235,9 +235,8 @@ export const ModuleCard = ({
   const cardPaddingV = size === 'xl' ? scale(20) : size === 'lg' ? scale(16) : isMobileScreen ? scale(10) : scale(14);
   const cardPaddingH = size === 'xl' ? scale(20) : size === 'lg' ? scale(18) : isMobileScreen ? scale(12) : scale(15);
   
-  const titleVariant = size === 'xl' ? 'h1' : size === 'lg' ? 'h2' : 'h3';
-
-  const subtitleVariant = size === 'xl' ? 'bodyLg' : size === 'lg' ? 'bodyMd' : 'bodySm';
+  const titleVariant = size === 'xl' ? 'h4' : size === 'lg' ? 'h6' : 'subtitle1';
+  const subtitleVariant = size === 'xl' ? 'bodySm' : size === 'lg' ? 'caption' : 'label';
 
 
 
@@ -330,7 +329,7 @@ export const ModuleCard = ({
                   hitSlop={10}
                 >
                   <RotateCcw stroke={theme.colors.primary} strokeWidth={2.5} size={isMobileScreen ? scale(20) : scale(24)} />
-                  <Typography variant="label" style={[styles.reviewIconText, { fontSize: scaleText(9) }]}>REVER</Typography>
+                  <Typography variant="smallHeavy" style={[styles.reviewIconText, { fontSize: scaleText(9) }]}>REVER</Typography>
                 </Pressable>
               </Animated.View>
             ) : null}
@@ -368,7 +367,7 @@ export const ModuleCard = ({
                   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>
+                  <Typography variant="bodySmHeavy" style={{ color: theme.colors.white, marginLeft: scale(6) }}>Agendar Aula</Typography>
                 </Pressable>
               </Animated.View>
             )}
@@ -383,7 +382,7 @@ export const ModuleCard = ({
                   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>
+                  <Typography variant="bodySmHeavy" style={{ color: theme.colors.white, marginLeft: scale(6) }}>Fazer Exame</Typography>
                 </Pressable>
               </Animated.View>
             )}
@@ -399,7 +398,7 @@ export const ModuleCard = ({
                 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>
+                <Typography variant="smallHeavy" style={[styles.reviewIconText, { color: theme.colors.primary, marginLeft: scale(4), marginTop: 0 }]}>REVER</Typography>
               </Pressable>
             </Animated.View>
           )}

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

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { TabBar } from './TabBar';
+
+const meta = {
+  title: 'Components/Navigation/TabBar',
+  component: TabBar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'TabBar component with 3 variants (A: Pill, B: Top Bar, C: Dot below) and notification badges.',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'radio', options: ['A', 'B', 'C'] },
+    safeAreaBottom: { control: 'number' },
+    activeItemId: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: '#f5f0eb' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof TabBar>;
+
+export default meta;
+type Story = StoryObj<typeof TabBar>;
+
+const defaultItems = [
+  { id: 'inicio', label: 'Início', icon: 'Home' },
+  { id: 'percurso', label: 'Percurso', icon: 'Compass' },
+  { id: 'aulas', label: 'Aulas', icon: 'GraduationCap' },
+  { id: 'dossier', label: 'Dossier', hasBadge: true, icon: 'FolderOpen' },
+  { id: 'perfil', label: 'Perfil', icon: 'User' },
+];
+
+export const VariantB: Story = {
+  args: {
+    items: defaultItems,
+    activeItemId: 'inicio',
+    variant: 'B',
+    safeAreaBottom: 20,
+  },
+  render: function Render(args) {
+    const [activeId, setActiveId] = useState(args.activeItemId);
+    return <TabBar {...args} activeItemId={activeId} onItemPress={setActiveId} />;
+  }
+};
+
+export const VariantA: Story = {
+  args: {
+    items: defaultItems,
+    activeItemId: 'inicio',
+    variant: 'A',
+    safeAreaBottom: 20,
+  },
+  render: function Render(args) {
+    const [activeId, setActiveId] = useState(args.activeItemId);
+    return <TabBar {...args} activeItemId={activeId} onItemPress={setActiveId} />;
+  }
+};
+
+export const VariantC: Story = {
+  args: {
+    items: defaultItems,
+    activeItemId: 'inicio',
+    variant: 'C',
+    safeAreaBottom: 20,
+  },
+  render: function Render(args) {
+    const [activeId, setActiveId] = useState(args.activeItemId);
+    return <TabBar {...args} activeItemId={activeId} onItemPress={setActiveId} />;
+  }
+};

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(11.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(30) : scale(26);
+  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

@@ -45,6 +45,7 @@ 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';

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, fontWeight: webWeight }
+    default: { fontFamily: family }
   }) as { fontFamily: string; fontWeight?: '400' | '500' | '600' | '700' | '800' | '900' };
 };
 
@@ -172,86 +172,167 @@ 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: {
+    subtitle1: {
+      ...font('Fredoka-SemiBold', '600'),
+      fontSize: 16,
+      lineHeight: 16, // line-height 1
+      desktopFontSize: 18,
+    },
+    subtitle2: {
+      ...font('Fredoka-Bold', '700'),
+      fontSize: 14,
+      lineHeight: 18,
+      desktopFontSize: 16,
+    },
+
+    // FAMÍLIA NUNITO (Corpo, Labels, Listas e Infos)
+    bodyLgHeavy: {
       ...font('Nunito-Black', '900'),
-      fontSize: 10,
-      lineHeight: 14,
-      letterSpacing: 1.2, // 10 * 0.12
-      desktopFontSize: 11,
+      fontSize: 16,
+      lineHeight: 24,
+      desktopFontSize: 18,
     },
     bodyLg: {
-      ...font('Nunito-Bold', '700'),
-      fontSize: 15,
+      ...font('Nunito-Black', '900'),
+      fontSize: 16,
       lineHeight: 24,
-      desktopFontSize: 17,
+      desktopFontSize: 18,
+    },
+    bodyMdHeavy: {
+      ...font('Nunito-Black', '900'),
+      fontSize: 15,
+      lineHeight: 22,
+      desktopFontSize: 16,
     },
     bodyMd: {
-      ...font('Nunito-Bold', '700'),
-      fontSize: 13.5,
+      ...font('Nunito-Black', '900'),
+      fontSize: 15,
       lineHeight: 22,
+      desktopFontSize: 16,
+    },
+    bodySmHeavy: {
+      ...font('Nunito-Black', '900'),
+      fontSize: 13.5,
+      lineHeight: 20,
       desktopFontSize: 15,
     },
     bodySm: {
-      ...font('Nunito-ExtraBold', '800'),
-      fontSize: 12,
-      lineHeight: 18,
-      desktopFontSize: 13,
+      ...font('Nunito-Black', '900'),
+      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-Black', '900'),
+      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,4 @@
-import { Play, Volume2, Volume1, ArrowRight, X, Check, ChevronRight, ChevronLeft, Info, AlertTriangle, Book, Mic } 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 } from 'lucide-react-native';
 
 /**
  * Para evitar que o Vite e o Metro (React Native) tentem empacotar os 1400+ ícones 
@@ -21,4 +21,12 @@ export const IconMap: Record<string, any> = {
   AlertTriangle,
   Book,
   Mic,
+  Home,
+  Compass,
+  GraduationCap,
+  FolderOpen,
+  User,
+  ShoppingCart,
+  FileText,
+  Wallet,
 };