@xetwa/design-system 1.0.20 → 1.0.22

package/package.json

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

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

@@ -21,6 +21,12 @@ 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';
+  /** Largura personalizada. Ignora max-width e align-self flex-start. */
+  width?: number | string;
 }
 
 export const WordChip = ({
@@ -29,6 +35,9 @@ export const WordChip = ({
   onPress,
   style,
   disabled = false,
+  fullWidth = false,
+  size = 'md',
+  width,
 }: WordChipProps) => {
   const { scale, scaleText } = useResponsive();
   const [isPressed, setIsPressed] = useState(false);
@@ -97,13 +106,13 @@ export const WordChip = ({
   const showPressed = isPressed && !isDisabled;
 
   return (
-    <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, style]}>
+    <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, width ? { width } : null, style]}>
       <Pressable
         onPressIn={() => setIsPressed(true)}
         onPressOut={() => setIsPressed(false)}
         onPress={onPress}
         disabled={isDisabled}
-        style={{ alignSelf: 'flex-start' }}
+        style={{ alignSelf: width ? 'stretch' : (fullWidth ? 'stretch' : 'flex-start') }}
       >
         <View style={[
           styles.shadowContainer,
@@ -112,7 +121,8 @@ export const WordChip = ({
             borderRadius: scale(12),
             paddingBottom: showPressed ? 0 : scale(3),
             marginTop: showPressed ? scale(3) : 0,
-          }
+          },
+          (fullWidth || width) ? { alignSelf: 'stretch', width: '100%' } : null
         ]}>
           <View style={[
             styles.innerContainer,
@@ -120,16 +130,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) ? { width: '100%' } : null
           ]}>
             <Typography style={[
               styles.text,
               { 
                 color: currentStyles.text,
-                fontSize: scaleText(15),
+                fontSize: scaleText(size === 'lg' ? 17 : size === 'sm' ? 13 : 15),
               }
             ]}>
               {word}

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';