@xetwa/design-system 1.0.17 → 1.0.18

package/package.json

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

package/src/components/Cards/BaseCard/BaseCard.tsx

@@ -1,9 +1,12 @@
 import type { ReactNode } from 'react';
 import { View, Pressable } from 'react-native';
 import type { ViewStyle, DimensionValue } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import { theme } from '../../../styles/theme';
 import { useResponsive } from '../../../hooks/useResponsive';
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 /**
  * Cartão base e fundacional do Design System.
  * Fornece a estrutura comum de bordas, fundos, sombras e estados interativos
@@ -112,12 +115,9 @@ export const BaseCard = ({
       }
     : getShadowStyle();
 
-  // Consolidate card styles with responsive scaling
-  const cardStyle: ViewStyle = {
-    backgroundColor: activeBg,
+  // Consolidate static card styles with responsive scaling
+  const staticCardStyle: ViewStyle = {
     borderRadius: scale(borderRadius),
-    borderWidth: borderWidth === 0 && !isSelected ? 0 : activeBorderWidth,
-    borderColor: activeBorderColor,
     borderStyle,
     padding: padding !== undefined ? scale(padding) : undefined,
     paddingVertical: padding === undefined ? scale(paddingVertical) : undefined,
@@ -130,26 +130,35 @@ export const BaseCard = ({
     ...activeShadow,
   };
 
+  const animatedStyleProps = useAnimatedStyle(() => {
+    return {
+      backgroundColor: withTiming(activeBg, { duration: 250 }),
+      borderColor: withTiming(activeBorderColor, { duration: 250 }),
+      borderWidth: withTiming(borderWidth === 0 && !isSelected ? 0 : activeBorderWidth, { duration: 250 }),
+    };
+  }, [activeBg, activeBorderColor, activeBorderWidth, isSelected, borderWidth]);
+
   if (onPress) {
     return (
-      <Pressable
+      <AnimatedPressable
         onPress={onPress}
         disabled={disabled}
-        style={({ pressed }) => [
-          cardStyle,
-          pressed && !disabled && { opacity: 0.9 },
-          ...(Array.isArray(style) ? style : [style].filter(Boolean) as ViewStyle[]),
+        style={(state) => [
+          staticCardStyle,
+          animatedStyleProps,
+          state.pressed && !disabled && { opacity: 0.9 },
+          ...(Array.isArray(style) ? style : [style].filter(Boolean) as any[]),
         ]}
       >
         {children}
-      </Pressable>
+      </AnimatedPressable>
     );
   }
 
   return (
-    <View style={[cardStyle, style]}>
+    <Animated.View style={[staticCardStyle, animatedStyleProps, style]}>
       {children}
-    </View>
+    </Animated.View>
   );
 };
 

package/src/components/Cards/SelectionCard/SelectionCard.tsx

@@ -1,10 +1,13 @@
 import { View, StyleSheet, Pressable, Platform } from 'react-native';
 import type { ViewStyle } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import { theme } from '../../../styles/theme';
 import type { ReactNode } from 'react';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 /**
  * Cartão genérico para selecionar opções simples, usado frequentemente em formulários de Onboarding.
  */
@@ -29,35 +32,49 @@ export const SelectionCard = ({
 }: SelectionCardProps) => {
   const { scale, scaleText } = useResponsive();
 
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: withTiming(selected ? theme.colors.primaryLight : theme.colors.white, { duration: 250 }),
+      borderColor: withTiming(selected ? theme.colors.primary : theme.colors.brown[100], { duration: 250 }),
+    };
+  }, [selected]);
+
+  const iconBoxAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: withTiming(selected ? theme.colors.primary : theme.colors.brown[50], { duration: 250 }),
+    };
+  }, [selected]);
+
   return (
-    <Pressable
+    <AnimatedPressable
       style={[
         styles.container,
-        selected ? styles.selectedContainer : styles.defaultContainer,
+        selected && styles.selectedShadow,
         {
           padding: scale(16),
           borderRadius: scale(16),
         },
+        containerAnimatedStyle,
         style,
       ]}
       onPress={onPress}
     >
       {iconNode && (
-        <View style={[
+        <Animated.View style={[
           styles.iconBox,
-          selected ? styles.selectedIconBox : styles.defaultIconBox,
           {
             width: scale(44),
             height: scale(44),
             borderRadius: scale(12),
             marginRight: scale(16),
-          }
+          },
+          iconBoxAnimatedStyle
         ]}>
           {iconNode}
-        </View>
+        </Animated.View>
       )}
       <Typography weight="bold" style={[styles.label, { fontSize: scaleText(16) }]}>{label}</Typography>
-    </Pressable>
+    </AnimatedPressable>
   );
 };
 
@@ -72,12 +89,8 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   defaultContainer: {
-    borderColor: theme.colors.brown[100],
-    backgroundColor: theme.colors.white,
   },
-  selectedContainer: {
-    borderColor: theme.colors.primary,
-    backgroundColor: theme.colors.primaryLight,
+  selectedShadow: {
     ...Platform.select({
       web: { boxShadow: `0px 4px 0px rgba(242, 151, 75, 0.3)` },
       default: {
@@ -97,12 +110,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginRight: 16,
   },
-  defaultIconBox: {
-    backgroundColor: theme.colors.brown[50],
-  },
-  selectedIconBox: {
-    backgroundColor: theme.colors.primary,
-  },
   label: {
 
     fontSize: 16,