@xetwa/design-system 1.0.21 → 1.0.23

package/package.json

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

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

@@ -25,6 +25,8 @@ export interface WordChipProps {
   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 = ({
@@ -35,6 +37,7 @@ export const WordChip = ({
   disabled = false,
   fullWidth = false,
   size = 'md',
+  width,
 }: WordChipProps) => {
   const { scale, scaleText } = useResponsive();
   const [isPressed, setIsPressed] = useState(false);
@@ -103,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: fullWidth ? 'stretch' : 'flex-start' }}
+        style={{ alignSelf: width ? 'stretch' : (fullWidth ? 'stretch' : 'flex-start') }}
       >
         <View style={[
           styles.shadowContainer,
@@ -118,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,
@@ -130,7 +134,7 @@ export const WordChip = ({
               paddingHorizontal: scale(size === 'lg' ? 20 : size === 'sm' ? 10 : 14),
               minHeight: scale(size === 'lg' ? 56 : size === 'sm' ? 36 : 44),
             },
-            fullWidth && { width: '100%' }
+            (fullWidth || width) ? { width: '100%' } : null
           ]}>
             <Typography style={[
               styles.text,

package/src/components/Cards/AnswerOptionCard/AnswerOptionCard.tsx

@@ -16,8 +16,10 @@ export interface AnswerOptionCardProps {
   status?: AnswerOptionStatus;
   /** O texto principal da opção. */
   label: string;
-  /** Nó renderizado à esquerda do texto (ex: letra 'A', 'B', 'C'). */
+  /** Nó renderizado à esquerda do texto (ex: ícones complexos). */
   prefixNode?: ReactNode;
+  /** Letra ou número a exibir automaticamente do lado esquerdo. */
+  prefix?: string | number;
   /** Nó renderizado à direita. Se omitido, renderiza automaticamente ícones de check/cross consoante o estado. */
   suffixNode?: ReactNode;
   /** Callback para o evento de clique. */
@@ -30,6 +32,7 @@ export const AnswerOptionCard = ({
   status = 'default',
   label,
   prefixNode,
+  prefix,
   suffixNode,
   onPress,
   style,
@@ -144,6 +147,17 @@ export const AnswerOptionCard = ({
       <View style={styles.contentRow}>
         <View style={styles.leftSection}>
           {prefixNode && <View style={[styles.prefixContainer, { marginRight: scale(12) }]}>{prefixNode}</View>}
+          {prefix && !prefixNode && (
+            <View style={[styles.prefixContainer, { marginRight: scale(12) }]}>
+              <Typography style={{ 
+                color: status === 'selected' || status === 'correct' ? theme.colors.primary : theme.colors.brown[400],
+                fontWeight: 'bold',
+                fontSize: scaleText(16)
+              }}>
+                {prefix}
+              </Typography>
+            </View>
+          )}
           <Typography
             style={[
               styles.label,

package/src/components/DataDisplay/NumberBadge/NumberBadge.tsx

@@ -0,0 +1,40 @@
+import { View } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+
+export interface NumberBadgeProps {
+  value: string | number;
+  selected?: boolean;
+  correct?: boolean;
+}
+
+export const NumberBadge = ({ value, selected = false, correct = false }: NumberBadgeProps) => {
+  let bgColor = theme.colors.brown[100];
+  let textColor = theme.colors.brown[500];
+
+  if (selected) {
+    bgColor = theme.colors.primary;
+    textColor = theme.colors.white;
+  } else if (correct) {
+    bgColor = theme.colors.success;
+    textColor = theme.colors.white;
+  }
+
+  return (
+    <View style={{
+      width: 28,
+      height: 28,
+      borderRadius: 14,
+      backgroundColor: bgColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}>
+      <Typography style={{
+        fontSize: 14,
+        color: textColor,
+      }}>
+        {value}
+      </Typography>
+    </View>
+  );
+};

package/src/index.ts

@@ -37,6 +37,7 @@ export * from './components/Cards/Passport/PassportViewer';
 export * from './components/DataDisplay/Avatar/Avatar';
 export * from './components/DataDisplay/InstructionBubble/InstructionBubble';
 export * from './components/DataDisplay/StatBadge/StatBadge';
+export * from './components/DataDisplay/NumberBadge/NumberBadge';
 export * from './components/Forms/Checkbox/Checkbox';
 export * from './components/Forms/DaySelector/DaySelector';
 export * from './components/Forms/Radio/Radio';