@xetwa/design-system 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.20",
+  "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/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';