@xetwa/design-system 1.0.48 → 1.0.50

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,21 +160,49 @@ 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 */}
       <ProgressBar
         progress={progress}
         segments={segments}
-        size="sm"
+        size="xs"
         variant="default" // Usa a cor primária (laranja)
         trackColor={theme.colors.brown[100]} // Fundo da barra um pouco mais escuro para ser visível
       />
@@ -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

@@ -22,11 +22,14 @@ 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/CircularProgress/CircularProgress';
 export * from './components/DataDisplay/Flag/Flag';
 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, Shield, Settings, CheckCheck, Users, ShieldAlert, Plus, Lock, MapPin, Clock, Smartphone } from 'lucide-react-native';
 
 /**
  * Para evitar que o Vite e o Metro (React Native) tentem empacotar os 1400+ ícones 
@@ -29,4 +29,16 @@ export const IconMap: Record<string, any> = {
   ShoppingCart,
   FileText,
   Wallet,
+  Bell,
+  Globe,
+  Shield,
+  Settings,
+  CheckCheck,
+  Users,
+  ShieldAlert,
+  Plus,
+  Lock,
+  MapPin,
+  Clock,
+  Smartphone,
 };