cdslibrary 1.2.78 → 1.2.80

package/components/CDSAccordion.jsx

@@ -136,7 +136,7 @@ const styles = StyleSheet.create({
         position: 'absolute',
         left: 16,
         right: 16,
-        opacity: 0, // No se ve, pero ocupa espacio para onLayout
+        opacity: 0, 
     },
     paddingWrapper: {
         paddingBottom: 16,

package/components/CDSBottomSheet.jsx

@@ -32,19 +32,17 @@ const bottomSheetRender = ({
   const { theme } = useTheme();
   const isMobile = theme.isMobile;
 
-  // --- 1. Estado de Animación (Reanimated SharedValues) ---
-  const startPos = isMobile ? height : width; // Abajo en mobile, Derecha en desktop
+  const startPos = isMobile ? height : width;
   const translation = useSharedValue(startPos);
   const opacity = useSharedValue(0);
 
-  // --- 2. Funciones de Cierre (Wrapper para JS Thread) ---
   const triggerOnFinish = useCallback(() => {
     if (onFinish) onFinish();
     if (primaryButtonOnPress) primaryButtonOnPress();
   }, [onFinish, primaryButtonOnPress]);
 
   const handleClose = useCallback(() => {
-    "worklet"; // Marca para ejecutar en UI thread
+    "worklet";
     translation.value = withTiming(startPos, { duration: 300 }, (finished) => {
       if (finished) {
         runOnJS(triggerOnFinish)();
@@ -53,18 +51,15 @@ const bottomSheetRender = ({
     opacity.value = withTiming(0, { duration: 300 });
   }, [startPos, triggerOnFinish]);
 
-  // --- 3. Lógica del Gesto (Solo Mobile) ---
   const pan = Gesture.Pan()
-    .enabled(isMobile) // Desactivamos gesto en Desktop
+    .enabled(isMobile)
     .onUpdate((event) => {
-      // Solo permitir arrastrar hacia abajo (valores positivos)
       if (event.translationY > 0) {
         translation.value = event.translationY;
       }
     })
     .onEnd((event) => {
-      // Si arrastra más de 100px o hace un "flick" rápido -> CERRAR
-      if (event.translationY > 200 || event.velocityY > 2000) {
+      if (event.translationY > 150 || event.velocityY > 2000) {
         handleClose();
       } else {
         translation.value = withTiming(0, {
@@ -74,10 +69,10 @@ const bottomSheetRender = ({
       }
     });
 
-  // --- 4. Efectos de Entrada/Salida ---
+  const nativeGesture = Gesture.Native();
+
   useEffect(() => {
     if (isVisible) {
-      // Usamos una curva Bezier suave (out-expo) que se frena al final
       translation.value = withTiming(0, {
         duration: 300,
         easing: Easing.out(Easing.exp),
@@ -86,7 +81,6 @@ const bottomSheetRender = ({
     }
   }, [isVisible]);
 
-  // --- 5. Estilos Animados ---
   const animatedStyle = useAnimatedStyle(() => {
     return {
       opacity: opacity.value,
@@ -99,7 +93,6 @@ const bottomSheetRender = ({
   });
 
   const backdropStyle = useAnimatedStyle(() => {
-    // Interpolamos para que el fondo se aclare mientras arrastras
     const currentY = translation.value;
     const opacityVal = interpolate(currentY, [0, height], [1, 0], Extrapolation.CLAMP);
     return {
@@ -113,62 +106,60 @@ const bottomSheetRender = ({
         style={[
           styles.overlay,
           { backgroundColor: theme.surface.special.overlay },
-          backdropStyle // Aplicamos estilo animado aquí
+          backdropStyle
         ]}
       >
         <Pressable onPress={() => runOnJS(handleClose)()} style={{ flex: 1 }} />
       </Animated.View>
 
-      <GestureDetector gesture={pan}>
-        <Animated.View
-          style={[
-            isMobile ? styles.container.typeBottomSheet : styles.container.typeDrawer,
-            animatedStyle, // Inyectamos la animación de Reanimated
-            {
-              backgroundColor: theme.surface.neutral.primary,
-              // Mantenemos tu lógica exacta de padding y gaps
-              paddingTop: (hasClose ? theme.space['2xl'] : theme.space.xl),
-              gap: theme.space.md,
-              ...(isMobile ? {
-                borderTopLeftRadius: theme.radius.lg,
-                borderTopRightRadius: theme.radius.lg,
-              } : {
-                borderBottomLeftRadius: theme.radius.lg,
-                borderTopLeftRadius: theme.radius.lg,
-                paddingBottom: theme.space.md,
-              })
-            }
-          ]}
-        >
-          {/* --- NUEVO: La línea visual (Handle) --- 
-              Se agrega position absolute para NO afectar tus paddings/espacios originales */}
-          {isMobile && (
+      <Animated.View
+        style={[
+          isMobile ? styles.container.typeBottomSheet : styles.container.typeDrawer,
+          animatedStyle,
+          {
+            backgroundColor: theme.surface.neutral.primary,
+            paddingTop: (hasClose ? theme.space['2xl'] : theme.space.xl),
+            gap: theme.space.md, // Mantengo tu gap original
+            ...(isMobile ? {
+              borderTopLeftRadius: theme.radius.lg,
+              borderTopRightRadius: theme.radius.lg,
+            } : {
+              borderBottomLeftRadius: theme.radius.lg,
+              borderTopLeftRadius: theme.radius.lg,
+              paddingBottom: theme.space.md,
+            })
+          }
+        ]}
+      >
+        {isMobile && (
+          <GestureDetector gesture={pan}>
             <View style={styles.handleBarContainer}>
               <View style={[styles.handleBarLine, { backgroundColor: theme.outline.neutral.tertiary }]} />
             </View>
-          )}
+          </GestureDetector>
+        )}
 
-          {hasClose && (
-            <MaterialIcons
-              name="close"
-              size={theme.typography.icon.lg}
-              color={theme.text.neutral.primary}
-              // Usamos runOnJS porque onPress espera una función normal
-              onPress={() => runOnJS(handleClose)()}
-              style={{ position: "absolute", right: theme.space.md, top: theme.space.md, zIndex: 10 }}
-            />
-          )}
+        {hasClose && (
+          <MaterialIcons
+            name="close"
+            size={theme.typography.icon.lg}
+            color={theme.text.neutral.primary}
+            onPress={() => runOnJS(handleClose)()}
+            style={{ position: "absolute", right: theme.space.md, top: theme.space.md, zIndex: 10 }}
+          />
+        )}
 
-          {!!title && <Text style={[theme.typography.h3, { marginHorizontal: theme.space.md }]}>{title}</Text>}
+        {!!title && <Text style={[theme.typography.h3, { marginHorizontal: theme.space.md }]}>{title}</Text>}
 
-          <View style={[styles.scrollWrapper,]}>
+        <View style={styles.scrollWrapper}>
+          <GestureDetector gesture={Gesture.Simultaneous(nativeGesture)}>
             <ScrollView
               ref={ref}
               style={styles.scrollArea}
-              contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.xl }]}
+              contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.xl }]} // Tu padding original
               showsVerticalScrollIndicator={true}
               bounces={true}
-              alwaysBounceVertical={false}
+              nestedScrollEnabled={true}
               scrollEventThrottle={16}
             >
               {!!description && (
@@ -178,33 +169,32 @@ const bottomSheetRender = ({
               )}
               {customSlot}
             </ScrollView>
-            <LinearGradient
-              colors={['transparent', theme.surface.neutral.primary]}
-              style={[styles.fadeGradient, {pointerEvents: 'none'}]}
+          </GestureDetector>
+          <LinearGradient
+            colors={['transparent', theme.surface.neutral.primary]}
+            style={[styles.fadeGradient, { pointerEvents: 'none' }]}
+          />
+        </View>
+
+        {type !== "informative" && (
+          <View style={[isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer, { paddingHorizontal: theme.space.md, paddingVertical: theme.space.lg }]}>
+            <CDSButton
+              label={primaryButtonLabel}
+              onPress={() => runOnJS(handleClose)()}
             />
+            {secondaryButtonLabel && (<CDSButton
+              label={secondaryButtonLabel}
+              type="ghost"
+              onPress={() => runOnJS(handleClose)()}
+            />)}
           </View>
-
-          {type !== "informative" && (
-            <View style={[isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer, { paddingHorizontal: theme.space.md, paddingVertical: theme.space.lg }]}>
-              <CDSButton
-                label={primaryButtonLabel}
-                onPress={() => runOnJS(handleClose)()}
-              />
-              {secondaryButtonLabel && (<CDSButton
-                label={secondaryButtonLabel}
-                type="ghost"
-                onPress={() => runOnJS(handleClose)()}
-              />)}
-            </View>
-          )}
-        </Animated.View>
-      </GestureDetector>
+        )}
+      </Animated.View>
     </>
   );
 };
 
 const styles = StyleSheet.create({
-  // --- Estilos originales intactos ---
   overlay: {
     position: "absolute",
     top: 0,
@@ -215,13 +205,15 @@ const styles = StyleSheet.create({
   },
   container: {
     typeBottomSheet: {
-      maxHeight: '95%',
+      flexShrink: 1,
+      maxHeight: height * 0.83,
       width: "100%",
       position: "absolute",
       bottom: 0,
       left: 0,
       right: 0,
       zIndex: 99,
+      ...Platform.select({web:{maxHeight: '95%'}})
     },
     typeDrawer: {
       position: "absolute",
@@ -236,15 +228,11 @@ const styles = StyleSheet.create({
     },
   },
   scrollWrapper: {
-    overflow: 'visible',
-    flex: 1,
-    position: 'relative',
+    flexShrink: 1, // CLAVE: Permite encogerse si el contenido es mucho
     width: '100%',
-    paddingBottom: 1
   },
   scrollArea: {
-    flex: 1,
-    width: '100%',
+    width: '100%', // Quitamos el flex: 1 de aquí para que sea dinámico
   },
   scrollContent: {
     gap: 16,
@@ -269,13 +257,15 @@ const styles = StyleSheet.create({
       marginTop: 'auto',
     },
   },
-  // --- NUEVOS ESTILOS PARA EL HANDLE ---
   handleBarContainer: {
     position: 'absolute',
-    top: 8, // Un poco de margen superior
-    width: '100%',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 30,
     alignItems: 'center',
-    zIndex: 1, // Debajo del botón de cerrar
+    justifyContent: 'center',
+    zIndex: 20,
   },
   handleBarLine: {
     width: 40,

package/components/CDSButtonGroup.jsx

@@ -45,11 +45,13 @@ export const CDSButtonGroup = ({ options, onSelect, label = 'Label', selected =
 const styles = StyleSheet.create({
     container: {
         width: '100%',
+        
     },
 
     actionsContainer: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
+        width: '100%'
     },
 });

package/components/CDSInput.jsx

@@ -1,21 +1,19 @@
 import React, { useState, useEffect, useRef } from "react";
 import { View, Text, TextInput, StyleSheet, Platform } from "react-native";
-import Animated, { 
-  useAnimatedStyle, 
-  useSharedValue, 
-  withSequence, 
-  withTiming, 
-  interpolateColor 
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+  interpolateColor
 } from "react-native-reanimated";
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeText, animationTrigger }) => {
+export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeText, animationTrigger, returnKeyType, onFocus }) => {
   const { theme } = useTheme();
   const [isFocused, setIsFocused] = useState(false);
-  
-  // Valor animado para el "flash" (0 a 1)
+
   const flashValue = useSharedValue(0);
-  // Ref para detectar si el cambio vino del teclado o del código
   const isInternalChange = useRef(false);
 
   useEffect(() => {
@@ -29,8 +27,8 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
   }, [value, animationTrigger]);
 
   const handleTextChange = (inputText) => {
-    isInternalChange.current = true; // Marcamos que el cambio es del usuario
-    
+    isInternalChange.current = true;
+
     if (keyboard === "numeric" || keyboard === "decimal-pad") {
       let cleaned = inputText.replace(',', '.').replace(/[^0-9.]/g, "");
       const parts = cleaned.split('.');
@@ -41,49 +39,54 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
     }
   };
 
-  // Estilo animado para el borde y el fondo
   const animatedBoxStyle = useAnimatedStyle(() => {
     const borderColor = interpolateColor(
       flashValue.value,
       [0, 1],
       [
         isFocused ? theme.outline.neutral.focus : value ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary,
-        theme.outline.neutral.focus// Color del "brillo" (usamos el color de focus)
+        theme.outline.neutral.focus
       ]
     );
 
     return {
       borderColor: borderColor,
-      transform: [{ scale: 1 + flashValue.value * 0.02 }], // Pequeño pulso
-      borderWidth: 1 + flashValue.value * 1,
+      // Quitamos el scale momentáneamente para asegurar que el layout no brinque
+      // transform: [{ scale: 1 + flashValue.value * 0.01 }], 
+      borderWidth: 1 + (flashValue.value * 1),
     };
   });
-  
+
   return (
-    <View style={[styles.container, { gap: theme.space.sm }]}>
+    <View style={styles.container}>
       {label && (
-        <Text style={[theme.typography.label, { color: theme.text.neutral.primary }]}>
+        <Text style={[
+          theme.typography.label,
+          { color: theme.text.neutral.primary, marginBottom: theme.space.xs }
+        ]}>
           {label}
         </Text>
       )}
 
       <Animated.View style={[
-        styles.wrapper, 
+        styles.wrapper,
         animatedBoxStyle,
         {
-            backgroundColor: type === 'readOnly' ? theme.surface.neutral.primaryVariant : theme.surface.neutral.primary,
-            borderRadius: theme.radius.sm,
+          backgroundColor: type === 'readOnly' ? theme.surface.neutral.primaryVariant : theme.surface.neutral.primary,
+          borderRadius: theme.radius.sm,
         }
       ]}>
         <TextInput
           style={[
             styles.textBox,
             theme.typography.inputText.value,
-            { pointerEvents: (type === 'readOnly' ? 'none' : 'auto'),
+            {
               paddingHorizontal: theme.space.sm,
-              color: (type === 'readOnly' ? theme.text.neutral.secondary :theme.text.neutral.primary),
-              // @ts-ignore
-              outlineStyle: 'none',
+              color: type === 'readOnly' ? theme.text.neutral.secondary : theme.text.neutral.primary,
+              // Fix para web:
+              ...Platform.select({
+                web: { outlineStyle: 'none' }
+              })
             },
           ]}
           placeholder={placeholder}
@@ -93,9 +96,11 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
           value={value}
           editable={type !== 'readOnly'}
           secureTextEntry={type === "password"}
-          onFocus={() => setIsFocused(true)}
+          onFocus={() => { setIsFocused(true); onFocus }}
           onBlur={() => setIsFocused(false)}
           underlineColorAndroid="transparent"
+          returnKeyType={returnKeyType}
+          dataSet={{ lpignore: "true" }}
         />
       </Animated.View>
     </View>
@@ -103,14 +108,20 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
 };
 
 const styles = StyleSheet.create({
-  container: { width: "100%" },
+  container: {
+    width: "100%",
+    alignSelf: 'stretch',
+  },
   wrapper: {
+    width: '100%',
     height: 48,
+    flexDirection: 'row', // Asegura que el TextInput interno tenga un eje claro
+    alignItems: 'center',
     borderWidth: 1,
-    justifyContent: 'center',
   },
   textBox: {
-    flex: 1,
+    flex: 1,      // Esto es lo más importante: ocupa todo el espacio sobrante
     height: '100%',
+    width: '100%',
   },
 });

package/components/CDSLoader.jsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { View, StyleSheet, Modal, Text } from "react-native";
+import { View, StyleSheet, Modal, Text, Platform } from "react-native";
 import LottieView from "lottie-react-native";
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
   withTiming,
-  withDelay, // 👈 Importamos withDelay
+  withDelay,
   runOnJS
 } from "react-native-reanimated";
 import { useTheme } from "../context/CDSThemeContext";
@@ -18,11 +18,8 @@ export const CDSLoader = ({ visible = false, message }) => {
   useEffect(() => {
     if (visible) {
       setShouldRender(true);
-      // Entrada rápida para que no se sienta lag al empezar
       opacity.value = withTiming(1, { duration: 300 });
     } else {
-      // 1. Espera 800ms antes de hacer nada (Sostenido)
-      // 2. Desvanece lentamente en 1200ms
       opacity.value = withDelay(
         1000,
         withTiming(0, { duration: 1200 }, (isFinished) => {
@@ -38,26 +35,38 @@ export const CDSLoader = ({ visible = false, message }) => {
     opacity: opacity.value,
   }));
 
-  if (!shouldRender && !visible) return null;
+  if (!shouldRender) return null;
+
   return (
-    <Modal transparent visible={shouldRender} animationType="none">
-      <Animated.View style={[styles.overlay, animatedStyle,
-      { backgroundColor: theme.surface.special.overlay },]}>
-        <View
-          style={[
-            styles.loaderContainer,
-          ]}
-        >
+    <Modal transparent visible={true} animationType="none">
+      <Animated.View style={[
+        styles.overlay,
+        animatedStyle,
+        { backgroundColor: theme.surface.special.overlay }
+      ]}>
+        <View style={styles.loaderContainer}>
           <LottieView
             autoPlay
             loop
             source={require("../assets/animations/animationLoaderWhite.json")}
+            // CLAVE: Definimos un tamaño que funcione en ambos, 
+            // pero limitado para que en Web no explote
+            style={styles.lottie}
             resizeMode="contain"
           />
-          {message && <Text
-            style={[theme.typography.semiBold.md, { textAlign: 'center', width:'100%', color: theme.text.special.loader }]}>
-            {message}
-          </Text>}
+          {message && (
+            <Text style={[
+              theme.typography.semiBold.md,
+              {
+                textAlign: 'center',
+                color: theme.text.special.loader,
+                marginTop: 10,
+                paddingHorizontal: 20
+              }
+            ]}>
+              {message}
+            </Text>
+          )}
         </View>
       </Animated.View>
     </Modal>
@@ -66,19 +75,26 @@ export const CDSLoader = ({ visible = false, message }) => {
 
 const styles = StyleSheet.create({
   overlay: {
-    height: '100%',
-    width: '100%',
+    flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    zIndex: 1000,
   },
   loaderContainer: {
-    padding: 20,
-    // O si usas fijos, asegúrate que sean mayores al estilo del Lottie
-    minWidth: 180,
-    minHeight: 180,
-    maxWidth: 400,
+    // Evita que el contenedor se estire en pantallas grandes (Web)
+    width: '100%',
+    maxWidth: 300,
     justifyContent: "center",
     alignItems: "center",
   },
+  lottie: {
+    // Tamaño controlado para móvil y Web
+    width: 150,
+    height: 150,
+    // En Web a veces necesita una alineación extra
+    ...Platform.select({
+      web: {
+        alignSelf: 'center',
+      }
+    })
+  },
 });

package/components/CDSNavBar.jsx

@@ -1,56 +1,76 @@
-
-import { View, Text,  StyleSheet, Image, TouchableOpacity } from "react-native";
-
-
+import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 import { useNavigation } from "@react-navigation/native";
 
 export const CDSNavBar = ({
-    
     type,
     isExpanded,
     hasClose,
     title,
-    hasBack, }) => {
-        
-        const { theme, isDarkMode } = useTheme();
-        const isMobile = theme.isMobile
-    
+    hasBack,
+}) => {
+    const { theme, isDarkMode } = useTheme();
     const navigation = useNavigation();
 
     const handleBackPress = () => {
-        if (hasBack) {
-            navigation.goBack();
-        }
+        if (hasBack) navigation.goBack();
     };
 
     const handleClosePress = () => {
-        if (hasClose) {
-            navigation.goBack();
-        }
+        if (hasClose) navigation.goBack();
     };
 
     return (
-        <View style={[styles.container, { backgroundColor: theme.surface.neutral.primary, borderColor: theme.outline.brand.primary }]}>
-            <TouchableOpacity onPress={handleBackPress}>
-                <MaterialIcons name="arrow-back-ios" size={theme.typography.icon.md} color={theme.text.neutral.primary} style={{ cursor: hasBack ? 'pointer' : 'default', opacity: hasBack ? 1 : 0 }} />
+        <View style={[styles.container, {
+            backgroundColor: theme.surface.neutral.primary,
+            borderBottomColor: theme.outline.neutral.primary // Usando tu variable de tema
+        }]}>
+
+            {/* Contenedor del título o logo (Capa absoluta para centrado perfecto) */}
+            <View style={styles.centerContainer}>
+                {type === 'title' ? (
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.title, theme.typography.semiBold.lg, { color: theme.text.neutral.primary }]}
+                    >
+                        {title || 'title'}
+                    </Text>
+                ) : (
+                    <Image
+                        source={
+                            isDarkMode
+                                ? require("../assets/images/logoMonteTW.png")
+                                : require("../assets/images/logoMonte.png")
+                        }
+                        style={styles.logo}
+                        resizeMode="contain"
+                    />
+                )}
+            </View>
+
+            {/* Icono Izquierdo */}
+            <TouchableOpacity onPress={handleBackPress} disabled={!hasBack}>
+                <MaterialIcons
+                    name="arrow-back-ios"
+                    size={theme.typography.icon.md}
+                    color={theme.text.neutral.primary}
+                    style={{ opacity: hasBack ? 1 : 0 }}
+                />
             </TouchableOpacity>
-            {type === 'title' ? <Text style={[styles.title, theme.typography.semiBold.lg]}>{title || 'title'}</Text> : <Image
-                source={
-                    isDarkMode
-                        ? require("../assets/images/logoMonteTW.png")
-                        : require("../assets/images/logoMonte.png")
-                }
-                style={styles.logo}
-                resizeMode="contain"
-            />}
-            <TouchableOpacity onPress={handleClosePress}>
-                <MaterialIcons name="close" size={theme.typography.icon.md} color={theme.text.neutral.primary} style={{ cursor: hasClose ? 'pointer' : 'default', opacity: hasClose ? 1 : 0 }} />
+
+            {/* Icono Derecho */}
+            <TouchableOpacity onPress={handleClosePress} disabled={!hasClose}>
+                <MaterialIcons
+                    name="close"
+                    size={theme.typography.icon.md}
+                    color={theme.text.neutral.primary}
+                    style={{ opacity: hasClose ? 1 : 0 }}
+                />
             </TouchableOpacity>
         </View>
-    )
-}
+    );
+};
 
 const styles = StyleSheet.create({
     container: {
@@ -61,18 +81,23 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         paddingHorizontal: 16,
         borderBottomWidth: 1,
-        borderBottomColor: '#E0E0E0',
     },
-
+    centerContainer: {
+        // Esta capa flota detrás de los botones y ocupa todo el ancho
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 48, // Evita que el texto choque con los iconos
+    },
     title: {
-        width: '100%',
         textAlign: 'center',
     },
-
     logo: {
-        flex: 1,
-        height: '80%',
-        resizeMode: 'contain',
+        height: '60%',
+        width: 150, // Ajusta según tu logo
     },
-
-});
+});

package/components/CDSSelect.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import {
-    View, Text, TouchableOpacity, StyleSheet, FlatList,
+    View, Text, TouchableOpacity, StyleSheet, ScrollView,
     Animated, Pressable, Platform
 } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
@@ -81,7 +81,6 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
         if (onSelect) onSelect(item.value);
     };
 
-    // Estructura idéntica a CardFeedback para mantener consistencia
     const animatedLayout = {
         maxHeight: animatedValue.interpolate({
             inputRange: [0, 1],
@@ -125,7 +124,7 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
                 <Animated.View
                     style={[
                         styles.dropdownInline,
-                        animatedLayout, // Aplicamos el objeto de animación aquí
+                        animatedLayout,
                         {
                             backgroundColor: theme.surface.neutral.primary,
                             borderRadius: theme.radius.sm,
@@ -134,19 +133,17 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
                         }
                     ]}
                 >
-                    <FlatList
-                        data={options}
-                        keyExtractor={(item) => item.value.toString()}
-                        renderItem={({ item }) => (
+                    <ScrollView bounces={false} nestedScrollEnabled={true}>
+                        {options.map((item, index) => (
                             <SelectOption
+                                key={item.value?.toString() || index.toString()}
                                 item={item}
                                 isSelected={selectedItem?.value === item.value}
                                 onSelect={handleSelect}
                                 theme={theme}
                             />
-                        )}
-                        nestedScrollEnabled={true}
-                    />
+                        ))}
+                    </ScrollView>
                 </Animated.View>
             )}
         </View>
@@ -155,7 +152,7 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
 
 const styles = StyleSheet.create({
     mainContainer: { width: '100%' },
-    inputContainer: { height: 48, borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+    inputContainer: { width: '100%', height: 48, borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
     dropdownInline: { 
         borderWidth: 1,
     },

package/components/CDSTable.jsx

@@ -1,41 +1,51 @@
 import React from 'react';
-import { View, Text, StyleSheet, ScrollView, useWindowDimensions } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, useWindowDimensions, Platform } from 'react-native';
 import { useTheme } from '../context/CDSThemeContext';
 
 export const CDSTable = ({ columns, data, breakpoint = 500 }) => {
     const { theme } = useTheme();
     const { width: screenWidth } = useWindowDimensions();
 
-    // Aquí definimos que "Mobile" es cualquier pantalla menor al breakpoint
     const isSmallScreen = screenWidth < breakpoint;
 
     const TableContent = (
         <View style={[
             styles.tableContainer,
-            { 
-                borderColor: theme.outline.neutral.primary, 
+            {
+                borderColor: theme.outline.neutral.primary,
                 borderRadius: theme.radius.md,
-                // Si es pantalla pequeña, ancho libre para que crezca a la derecha.
-                // Si es pantalla grande, ocupa el 100% del padre.
-                width: isSmallScreen ? undefined : '100%',
+                // Asegura el 100% en desktop y auto-ajuste en móvil
+                width: isSmallScreen ? 'auto' : '100%',
+                minWidth: '100%',
             }
         ]}>
             {/* Encabezado */}
             <View style={[
-                styles.row, 
-                styles.header, 
-                { backgroundColor: theme.surface.neutral.primaryVariant, borderBottomColor: theme.outline.neutral.primary }
+                styles.row,
+                styles.header,
+                {
+                    backgroundColor: theme.surface.neutral.primaryVariant,
+                    borderBottomColor: theme.outline.neutral.primary
+                }
             ]}>
                 {columns.map((col, index) => (
-                    <View 
+                    <View
                         key={`header-${index}`}
                         style={[
-                            styles.cell, 
+                            styles.cell,
                             { padding: theme.space.sm },
-                            col.width ? { width: col.width } : { flex: 1 }
+                            col.width ? { width: col.width } : { flex: 1 },
+                            // Alinea el contenedor según la propiedad align de la columna
+                            col.align === 'right' ? { alignItems: 'flex-end' } : { alignItems: 'flex-start' }
                         ]}
                     >
-                        <Text style={[styles.headerText, theme.typography.semiBold.md]}>
+                        <Text style={[
+                            theme.typography.semiBold.md,
+                            {
+                                color: theme.text.neutral.primary,
+                                textAlign: col.align || 'left'
+                            }
+                        ]}>
                             {col.title}
                         </Text>
                     </View>
@@ -53,15 +63,25 @@ export const CDSTable = ({ columns, data, breakpoint = 500 }) => {
                     ]}
                 >
                     {columns.map((col, colIndex) => (
-                        <View 
+                        <View
                             key={`cell-${rowIndex}-${colIndex}`}
                             style={[
-                                styles.cell, 
+                                styles.cell,
                                 { padding: theme.space.sm },
-                                col.width ? { width: col.width } : { flex: 1 }
+                                col.width ? { width: col.width } : { flex: 1 },
+                                // Alinea el contenedor para móvil (Expo Go)
+                                col.align === 'right' ? { alignItems: 'flex-end' } : { alignItems: 'flex-start' }
                             ]}
                         >
-                            <Text style={[styles.cellText, theme.typography.regular.md]}>
+                            <Text style={[
+                                theme.typography.regular.md,
+                                {
+                                    color: theme.text.neutral.secondary,
+                                    textAlign: col.align || 'left',
+                                    // Tabular-nums asegura que los números tengan el mismo ancho (perfecto para precios)
+                                    fontVariant: col.align === 'right' ? ['tabular-nums'] : [],
+                                }
+                            ]}>
                                 {item[col.key]}
                             </Text>
                         </View>
@@ -73,11 +93,10 @@ export const CDSTable = ({ columns, data, breakpoint = 500 }) => {
 
     if (isSmallScreen) {
         return (
-            <View style={styles.scrollWrapper}> 
-                <ScrollView 
-                    horizontal 
-                    showsHorizontalScrollIndicator={true}
-                    // Importante: No ponemos alignItems: 'flex-start' aquí para que no muerda el final
+            <View style={styles.scrollWrapper}>
+                <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
                     contentContainerStyle={styles.scrollContent}
                 >
                     {TableContent}
@@ -98,9 +117,7 @@ const styles = StyleSheet.create({
         width: '100%',
     },
     scrollContent: {
-        // Asegura que la tabla pueda expandirse horizontalmente sin restricciones
-        minWidth: '100%',
-        paddingRight: 20, // Espacio extra al final del scroll para que la última columna no pegue
+        flexGrow: 1,
     },
     fullWidthContainer: {
         width: '100%',
@@ -111,19 +128,15 @@ const styles = StyleSheet.create({
     },
     row: {
         flexDirection: 'row',
+        width: '100%',
+        // Importante para que el fondo del header no se corte en scroll horizontal
+        minWidth: '100%',
     },
     header: {
         borderBottomWidth: 1,
     },
     cell: {
         justifyContent: 'center',
-        // Ancho mínimo por columna para que siempre sea legible en scroll
-        minWidth: 100, 
-    },
-    headerText: {
-        textAlign: 'center',
-    },
-    cellText: {
-        textAlign: 'center',
+        minWidth: 100, // Un poco más de aire para evitar saltos de línea agresivos
     },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cdslibrary",
   "license": "0BSD",
-  "version": "1.2.78",
+  "version": "1.2.80",
   "main": "index.js",
   "author": "Nat Viramontes",
   "description": "A library of components for the CDS project",