@xetwa/design-system 1.0.19 → 1.0.21

package/package.json

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

package/src/components/Buttons/WordChip/WordChip.tsx

@@ -21,6 +21,10 @@ export interface WordChipProps {
   style?: ViewStyle | ViewStyle[];
   /** Impede cliques. */
   disabled?: boolean;
+  /** Se verdadeiro, ocupa a largura total disponível. */
+  fullWidth?: boolean;
+  /** Tamanho do chip. */
+  size?: 'sm' | 'md' | 'lg';
 }
 
 export const WordChip = ({
@@ -29,6 +33,8 @@ export const WordChip = ({
   onPress,
   style,
   disabled = false,
+  fullWidth = false,
+  size = 'md',
 }: WordChipProps) => {
   const { scale, scaleText } = useResponsive();
   const [isPressed, setIsPressed] = useState(false);
@@ -103,7 +109,7 @@ export const WordChip = ({
         onPressOut={() => setIsPressed(false)}
         onPress={onPress}
         disabled={isDisabled}
-        style={{ alignSelf: 'flex-start' }}
+        style={{ alignSelf: fullWidth ? 'stretch' : 'flex-start' }}
       >
         <View style={[
           styles.shadowContainer,
@@ -120,16 +126,17 @@ export const WordChip = ({
               backgroundColor: currentStyles.bg,
               borderColor: currentStyles.border,
               borderRadius: scale(12),
-              paddingVertical: scale(9),
-              paddingHorizontal: scale(14),
-              minHeight: scale(44),
-            }
+              paddingVertical: scale(size === 'lg' ? 14 : size === 'sm' ? 6 : 9),
+              paddingHorizontal: scale(size === 'lg' ? 20 : size === 'sm' ? 10 : 14),
+              minHeight: scale(size === 'lg' ? 56 : size === 'sm' ? 36 : 44),
+            },
+            fullWidth && { width: '100%' }
           ]}>
             <Typography style={[
               styles.text,
               { 
                 color: currentStyles.text,
-                fontSize: scaleText(15),
+                fontSize: scaleText(size === 'lg' ? 17 : size === 'sm' ? 13 : 15),
               }
             ]}>
               {word}

package/src/components/Cards/PlanCard/PlanCard.tsx

@@ -72,8 +72,8 @@ export const PlanCard = ({
         };
       case 'explorateur':
         return {
-          borderWidth: 3, // Thicker border as seen in the image
-          borderColor: '#f2974b',
+          borderWidth: isSelected ? 3 : 1.5,
+          borderColor: isSelected ? '#f2974b' : '#efe2d6',
           backgroundColor: '#ffffff',
           borderRadius: scale(18),
           paddingVertical: scale(14),
@@ -81,13 +81,13 @@ export const PlanCard = ({
           shadow: 'none' as const,
           overflow: 'visible' as const,
           flatShadow: false,
-          customShadow: {
+          customShadow: isSelected ? {
             shadowColor: '#fce3ce', // light orange tint for shadow
             shadowOffset: { width: 4, height: 4 },
             shadowOpacity: 1,
             shadowRadius: 0,
             elevation: 4, // Android fallback
-          }
+          } : null
         };
       case 'fluent':
         return {
@@ -144,7 +144,11 @@ export const PlanCard = ({
         paddingHorizontal={config.paddingHorizontal}
         shadow={config.shadow}
         overflow={config.overflow}
-        isSelected={isSelected}
+        // Do not pass isSelected to BaseCard for explorateur if we manually manage it in config, 
+        // to prevent BaseCard from forcing its own activeBorderWidth (2).
+        // Wait, if decouverte uses BaseCard's isSelected, we can just pass it selectively or change BaseCard.
+        // Let's just NOT pass isSelected for explorateur since we computed the exact colors and width in config.
+        isSelected={tier === 'decouverte' ? isSelected : false}
         style={[
           config.flatShadow ? styles.fluentFlatShadow : null,
           config.customShadow ? config.customShadow : null,

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -177,7 +177,8 @@ const styles = StyleSheet.create({
   input: {
     flex: 1,
     height: '100%',
-
+    fontFamily: 'Fredoka-SemiBold',
+    fontWeight: '600',
     fontSize: 15,
     color: theme.colors.brown[800],
     padding: 0, // Reset RN default paddings

package/src/index.ts

@@ -23,6 +23,7 @@ export * from './components/DataDisplay/LevelBadge/LevelBadge';
 export * from './hooks/useResponsive';
 export * from './components/Mascots/Vava/Vava';
 export * from './components/Mascots/Yaya/Yaya';
+export * from './components/Buttons/WordChip/WordChip';
 export * from './components/Feedback/FeedbackBottomSheet/FeedbackBottomSheet';
 export * from './components/Headers/ProfileHeader/ProfileHeader';
 export * from './components/Inputs/FillInTheBlank/FillInTheBlank';