@xetwa/design-system 1.0.43 → 1.0.46

package/package.json

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

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

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { Chip } from './Chip';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/Buttons/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `O **Chip** é um elemento compacto utilizado para entrada de dados (filtros), atributos ou ações simples. É amplamente utilizado na "Wallet" para filtrar o histórico de transações.
+
+### Tipografia e Cores
+- **Fonte:** Utiliza rigorosamente a \`Nunito-Black\` (peso 900) para garantir leitura forte.
+- **Borda:** Por defeito herda a espessura de \`2.5\` e a cor standard do Design System para cartões (\`theme.colors.brown[100]\`), mas ambas podem ser sobrescritas por props.
+
+### Exemplo de Código (Filtros de Wallet)
+\`\`\`tsx
+import { Chip, theme } from '@xetwa/design-system';
+import { View } from 'react-native';
+
+export const FilterRow = () => {
+  return (
+    <View style={{ flexDirection: 'row', gap: 8 }}>
+      {/* Chip Ativo / Selecionado */}
+      <Chip 
+        label="Tudo" 
+        backgroundColor={theme.colors.brown[800]} 
+        textColor={theme.colors.white} 
+        borderColor={theme.colors.brown[800]} // Esconde a borda fundindo-a com o fundo
+      />
+      
+      {/* Chips Inativos (Usam os defaults: Fundo branco, borda brown[100]) */}
+      <Chip label="Ganhas" />
+      <Chip label="Gastas" />
+      <Chip label="Compras" />
+    </View>
+  );
+};
+\`\`\`
+`,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 20, backgroundColor: theme.colors.brown[50], flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+        <Story />
+      </View>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Ganhas',
+    size: 'md',
+  },
+};
+
+export const Active: Story = {
+  args: {
+    label: 'Tudo',
+    size: 'md',
+    backgroundColor: theme.colors.brown[800],
+    textColor: theme.colors.white,
+    borderColor: theme.colors.brown[800],
+    borderWidth: 2.5,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+      <Chip label="Small" size="sm" />
+      <Chip label="Medium" size="md" />
+      <Chip label="Large" size="lg" />
+    </View>
+  ),
+};
+
+export const WalletExample: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+      <Chip 
+        label="Tudo" 
+        size="md" 
+        backgroundColor={theme.colors.brown[800]} 
+        textColor={theme.colors.white} 
+        borderColor={theme.colors.brown[800]} 
+      />
+      <Chip label="Ganhas" size="md" />
+      <Chip label="Gastas" size="md" />
+      <Chip label="Compras" size="md" />
+    </View>
+  ),
+};

package/src/components/Buttons/Chip/Chip.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { Typography } from '../../Typography/Typography';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { theme } from '../../../styles/theme';
+
+export interface ChipProps {
+  /** Texto a ser exibido no chip */
+  label: string;
+  /** Função a executar ao pressionar */
+  onPress?: () => void;
+  /** Tamanho do chip (afeta paddings e fonte) */
+  size?: 'sm' | 'md' | 'lg';
+  /** Cor de fundo customizada */
+  backgroundColor?: string;
+  /** Cor do texto customizada */
+  textColor?: string;
+  /** Cor da borda customizada */
+  borderColor?: string;
+  /** Espessura da borda. Default: 2.5 */
+  borderWidth?: number;
+  /** Estilos adicionais do contentor */
+  style?: ViewStyle | ViewStyle[];
+}
+
+/**
+ * Componente Chip para seleção de filtros ou categorias.
+ * Permite costumizar cores e tamanhos via props.
+ */
+export const Chip = ({
+  label,
+  onPress,
+  size = 'md',
+  backgroundColor = theme.colors.white,
+  textColor = theme.colors.brown[500],
+  borderColor = theme.colors.brown[100],
+  borderWidth = 2.5,
+  style,
+}: ChipProps) => {
+  const { scale } = useResponsive();
+
+  const sizeStyles = {
+    sm: {
+      paddingVertical: scale(6),
+      paddingHorizontal: scale(12),
+      borderRadius: 999,
+    },
+    md: {
+      paddingVertical: scale(8),
+      paddingHorizontal: scale(16),
+      borderRadius: 999,
+    },
+    lg: {
+      paddingVertical: scale(12),
+      paddingHorizontal: scale(24),
+      borderRadius: 999,
+    },
+  }[size];
+
+  const typographyVariant = {
+    sm: 'smallHeavy',
+    md: 'bodySmHeavy',
+    lg: 'bodyMdHeavy',
+  }[size] as 'smallHeavy' | 'bodySmHeavy' | 'bodyMdHeavy';
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.container,
+        sizeStyles,
+        {
+          backgroundColor,
+          borderColor,
+          borderWidth,
+          opacity: pressed ? 0.7 : 1,
+        },
+        style,
+      ]}
+    >
+      <Typography variant={typographyVariant} color={textColor} style={{ textAlign: 'center' }}>
+        {label}
+      </Typography>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+});

package/src/components/Headers/RouteHeader/RouteHeader.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
 import type { ViewStyle } from 'react-native';
-import { Typography } from '../../Typography/Typography';
+import { Platform, StyleSheet, View } from 'react-native';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { theme } from '../../../styles/theme';
 import { Flag } from '../../DataDisplay/Flag/Flag';
 import { ProgressBar } from '../../DataDisplay/ProgressBar/ProgressBar';
-import { theme } from '../../../styles/theme';
-import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
 
 /**
  * Propriedades para o componente RouteHeader.
@@ -107,37 +106,37 @@ export const RouteHeader = ({
   const segments = progressType === 'segmented' ? Math.max(1, totalSegments) : 1;
 
   return (
-    <View style={[styles.container, { paddingTop: safeAreaTop + scale(20), paddingHorizontal: scale(24), paddingBottom: scale(24) }, style]}>
+    <View style={[styles.container, { paddingTop: safeAreaTop + scale(12), paddingHorizontal: scale(20), paddingBottom: scale(20) }, style]}>
       {/* Top Row: Labels */}
-      <View style={[styles.topRow, { marginBottom: scale(16) }]}>
-        <Typography variant="bodySm" color={theme.colors.brown[500]} style={{ textTransform: 'uppercase', letterSpacing: 0.5 }}>
+      <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="bodySmHeavy" color={theme.colors.brown[500]}>
+          <Typography variant="smallHeavy" color={theme.colors.brown[500]}>
             {stepLabel}
           </Typography>
         ) : null}
       </View>
 
       {/* Middle Row: Flag, Title, Progress Text */}
-      <View style={[styles.middleRow, { marginBottom: scale(20) }]}>
+      <View style={[styles.middleRow, { marginBottom: scale(12) }]}>
         {/* Bandeira com anel "estás aqui" e shadow 3D */}
-        <View style={[styles.flagWrapper, { width: scale(64), height: scale(64) }, styles.flagShadow]}>
-          <Flag countryCode={countryCode} size={scale(48)} />
+        <View style={[styles.flagWrapper, { width: scale(44), height: scale(44) }, styles.flagShadow]}>
+          <Flag countryCode={countryCode} size={scale(32)} />
         </View>
 
-        <View style={[styles.titleContainer, { marginLeft: scale(16) }]}>
-          <Typography variant="h1" color={theme.colors.brown[800]}>
+        <View style={[styles.titleContainer, { marginLeft: scale(12) }]}>
+          <Typography variant="h3" color={theme.colors.brown[800]}>
             {title}
           </Typography>
-          <Typography variant="bodyMdHeavy" color={theme.colors.primary}>
+          <Typography variant="bodySmHeavy" color={theme.colors.primary} style={{ marginTop: -2 }}>
             {subtitle}
           </Typography>
         </View>
 
         <View style={styles.progressTextContainer}>
-          <Typography variant="h2" color={theme.colors.primary}>
+          <Typography variant="h4" color={theme.colors.primary}>
             {progressText}
           </Typography>
           <Typography variant="smallHeavy" color={theme.colors.brown[500]}>
@@ -150,8 +149,9 @@ export const RouteHeader = ({
       <ProgressBar
         progress={progress}
         segments={segments}
-        size="md"
+        size="sm"
         variant="default" // Usa a cor primária (laranja)
+        trackColor={theme.colors.brown[100]} // Fundo da barra um pouco mais escuro para ser visível
       />
     </View>
   );
@@ -162,6 +162,8 @@ const styles = StyleSheet.create({
     backgroundColor: theme.colors.brown[50], // cream color matching the image
     width: '100%',
     zIndex: 10,
+    borderBottomWidth: 1.5,
+    borderBottomColor: theme.colors.brown[100],
     // Soft shadow to separate from content below
     ...Platform.select({
       web: {
@@ -187,7 +189,7 @@ const styles = StyleSheet.create({
   },
   flagWrapper: {
     borderRadius: 999,
-    borderWidth: 2.5,
+    borderWidth: 2,
     borderColor: theme.colors.primary, // Anel laranja que significa "estás aqui"
     justifyContent: 'center',
     alignItems: 'center',

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

@@ -195,7 +195,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'flex-start',
-    backgroundColor: theme.colors.white,
+    backgroundColor: theme.colors.brown[50],
     borderTopWidth: 1.5,
     borderTopColor: theme.colors.brown[100],
     width: '100%',

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components/Buttons/BackButton/BackButton';
 export * from './components/Buttons/BaseButton/BaseButton';
+export * from './components/Buttons/Chip/Chip';
 export * from './components/Buttons/FabButton/FabButton';
 export * from './components/Buttons/IconButton/IconButton';
 export * from './components/Buttons/JourneyButton/JourneyButton';
@@ -52,4 +53,5 @@ export * from './components/Navigation/ProgressMap/ProgressMap';
 export * from './components/Navigation/WorldProgressMap/WorldProgressMap';
 export * from './components/Typography/Typography';
 export * from './hooks/useResponsive';
+export * from './styles/countryThemes';