@xetwa/design-system 1.0.33 → 1.0.35

package/package.json

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

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

@@ -24,6 +24,7 @@ const meta = {
     tagLabel: { control: 'text' },
     progress: { control: 'number' },
     segments: { control: 'number' },
+    size: { control: 'radio', options: ['md', 'lg', 'xl'] },
   },
   decorators: [
     (Story) => (
@@ -94,7 +95,6 @@ export const Grid: Story = {
       />
       <ModuleCard 
         status="locked" 
-        number={3} 
         title="A minha família" 
         subtitle="5 lições" 
       />
@@ -106,3 +106,37 @@ export const Grid: Story = {
     </View>
   ),
 };
+
+export const Sizes: Story = {
+  args: {
+    status: 'active',
+    number: 1,
+    title: 'Tamanhos do Card',
+    subtitle: 'Compara os tamanhos disponíveis',
+  },
+  render: () => (
+    <View style={{ gap: 16, width: '100%' }}>
+      <ModuleCard 
+        status="active" 
+        number={1} 
+        title="Tamanho Médio (md)" 
+        subtitle="O padrão para a maioria das listas" 
+        size="md"
+      />
+      <ModuleCard 
+        status="active" 
+        number={2} 
+        title="Tamanho Grande (lg)" 
+        subtitle="Destaque moderado para ecrãs com espaço" 
+        size="lg"
+      />
+      <ModuleCard 
+        status="active" 
+        number={3} 
+        title="Tamanho Extra (xl)" 
+        subtitle="Máxima legibilidade e presença" 
+        size="xl"
+      />
+    </View>
+  ),
+};

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

@@ -30,6 +30,8 @@ export interface ModuleCardProps {
   progress?: number;
   /** Número de segmentos na barra de progresso. */
   segments?: number;
+  /** Tamanho do cartão (controla paddings, ícones e fontes). */
+  size?: 'md' | 'lg' | 'xl';
   onPress?: () => void;
   /** Cor customizada para o título. */
   titleColor?: string;
@@ -47,6 +49,7 @@ export const ModuleCard = ({
   tagLabel,
   progress,
   segments,
+  size = 'md',
   titleColor,
   subtitleColor,
   onPress,
@@ -112,7 +115,7 @@ export const ModuleCard = ({
   } : {};
 
   const renderLeftIconBox = () => {
-    const bSize = isMobileScreen ? 'xl' : 'xxl';
+    const bSize = size === 'xl' ? 'xxxl' : size === 'lg' ? 'xxl' : isMobileScreen ? 'xl' : 'xxl';
     if (status === 'locked') {
       return (
         <Badge
@@ -133,8 +136,8 @@ export const ModuleCard = ({
       );
     }
     if (status === 'dark') {
-      const boxSize = isMobileScreen ? scale(34) : scale(44);
-      const capSize = isMobileScreen ? scale(18) : scale(24);
+      const boxSize = size === 'xl' ? scale(54) : size === 'lg' ? scale(48) : isMobileScreen ? scale(34) : scale(44);
+      const capSize = size === 'xl' ? scale(30) : size === 'lg' ? scale(28) : isMobileScreen ? scale(18) : scale(24);
       return (
         <View style={[
           styles.darkIconBox,
@@ -148,16 +151,21 @@ export const ModuleCard = ({
         </View>
       );
     }
+    
     return (
       <Badge
         variant="primary"
-        size={bSize}
+        size={bSize as any}
         content={number}
       />
     );
   };
 
-  const colGap = isMobileScreen ? scale(8) : scale(12);
+  const colGap = size === 'xl' ? scale(16) : size === 'lg' ? scale(14) : isMobileScreen ? scale(8) : scale(12);
+  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 titleFontSize = size === 'xl' ? scaleText(18) : size === 'lg' ? scaleText(16) : isMobileScreen ? scaleText(14) : scaleText(16);
+  const subtitleFontSize = size === 'xl' ? scaleText(14) : size === 'lg' ? scaleText(13) : isMobileScreen ? scaleText(10) : scaleText(12);
 
   return (
     <Pressable
@@ -166,8 +174,8 @@ export const ModuleCard = ({
         containerStyle,
         status === 'active' && activeShadow,
         {
-          paddingVertical: isMobileScreen ? scale(10) : scale(14),
-          paddingHorizontal: isMobileScreen ? scale(12) : scale(15),
+          paddingVertical: cardPaddingV,
+          paddingHorizontal: cardPaddingH,
           borderRadius: scale(18),
         },
         style,
@@ -181,11 +189,11 @@ export const ModuleCard = ({
         </View>
 
         <View style={[styles.content, { marginLeft: colGap }]}>
-          <Typography style={[
+          <Typography variant="h2" style={[
             styles.title,
             {
               color: titleStyleColor,
-              fontSize: isMobileScreen ? scaleText(14) : scaleText(16),
+              fontSize: titleFontSize,
               marginBottom: scale(2),
             }
           ]}>
@@ -193,11 +201,11 @@ export const ModuleCard = ({
           </Typography>
 
           {(subtitle || subtext) && (
-            <Typography style={[
+            <Typography variant="bodyMd" style={[
               styles.subtitle,
               {
                 color: subtitleStyleColor,
-                fontSize: isMobileScreen ? scaleText(10) : scaleText(12),
+                fontSize: subtitleFontSize,
               }
             ]}>
               {subtitle}

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

@@ -58,6 +58,15 @@ export const Success: Story = {
   },
 };
 
+export const WithLabels: Story = {
+  args: {
+    progress: 0.82,
+    size: 'sm',
+    labelTopLeft: 'Compreensão',
+    labelTopRight: '82%',
+  },
+};
+
 export const Sizes: Story = {
   args: { progress: 0 },
   render: () => (

package/src/components/DataDisplay/ProgressBar/ProgressBar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { View, StyleSheet, Animated, Easing } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
 
 /**
  * Barra de progresso para exibir a percentagem de conclusão de uma tarefa ou módulo.
@@ -21,6 +22,10 @@ export interface ProgressBarProps {
   fillColor?: string;
   /** Cor customizada forçada do trilho vazio */
   trackColor?: string;
+  /** Label apresentada no canto superior esquerdo */
+  labelTopLeft?: string;
+  /** Label apresentada no canto superior direito (ex: percentagem) */
+  labelTopRight?: string;
   style?: ViewStyle | ViewStyle[];
 }
 
@@ -31,6 +36,8 @@ export const ProgressBar = ({
   segments = 1,
   fillColor,
   trackColor,
+  labelTopLeft,
+  labelTopRight,
   style,
 }: ProgressBarProps) => {
   const [animatedProgress] = useState(() => new Animated.Value(0));
@@ -60,8 +67,19 @@ export const ProgressBar = ({
   const segmentRange = 1 / safeSegments;
 
   return (
-    <View style={[styles.container, style]}>
-      {segmentsArray.map((_, index) => {
+    <View style={style}>
+      {(labelTopLeft || labelTopRight) && (
+        <View style={styles.labelsWrapper}>
+          {labelTopLeft ? (
+            <Typography variant="btnSm">{labelTopLeft}</Typography>
+          ) : <View />}
+          {labelTopRight ? (
+            <Typography variant="btnSm" color={defaultFillColor}>{labelTopRight}</Typography>
+          ) : <View />}
+        </View>
+      )}
+      <View style={styles.container}>
+        {segmentsArray.map((_, index) => {
         const start = index * segmentRange;
         const end = (index + 1) * segmentRange;
 
@@ -92,11 +110,18 @@ export const ProgressBar = ({
           </View>
         );
       })}
+      </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
+  labelsWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 6,
+  },
   container: {
     flexDirection: 'row',
     width: '100%',

package/src/components/DataDisplay/StatBadge/StatBadge.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'react';
-import { View, StyleSheet, Animated } from 'react-native';
-import { theme } from '../../../styles/theme';
 import { Flame, Heart } from 'lucide-react-native';
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
 import { useResponsive } from '../../../hooks/useResponsive';
+import { theme } from '../../../styles/theme';
 import { Typography } from '../../Typography/Typography';
 
 export type StatBadgeVariant = 'streak' | 'xp' | 'lives';