@xetwa/design-system 1.0.22 → 1.0.24

package/package.json

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

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

@@ -16,12 +16,16 @@ 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. */
   onPress?: () => void;
+  /** Aumenta ligeiramente o tamanho do cartão quando selecionado. */
+  scaleOnSelect?: boolean;
   /** Estilos adicionais para o container. */
   style?: ViewStyle | ViewStyle[];
 }
@@ -30,8 +34,10 @@ export const AnswerOptionCard = ({
   status = 'default',
   label,
   prefixNode,
+  prefix,
   suffixNode,
   onPress,
+  scaleOnSelect = false,
   style,
 }: AnswerOptionCardProps) => {
   const { scale, scaleText } = useResponsive();
@@ -134,6 +140,7 @@ export const AnswerOptionCard = ({
           paddingHorizontal: scale(15),
           borderRadius: scale(12),
           minHeight: scale(56),
+          transform: scaleOnSelect && status === 'selected' ? [{ scale: 1.02 }] : [],
         },
         webShadow,
         style,
@@ -144,6 +151,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';