cdslibrary 1.2.88 → 1.2.90

package/components/CDSBottomSheet.jsx

@@ -26,8 +26,10 @@ const bottomSheetRender = ({
   customSlot,
   primaryButtonLabel = "Aceptar",
   primaryButtonOnPress,
+  secondaryButtonOnPress,
   secondaryButtonLabel,
   onFinish,
+  closeOnSecondaryPress = true,
 }, ref) => {
   const { theme } = useTheme();
   const isMobile = theme.isMobile;
@@ -36,16 +38,28 @@ const bottomSheetRender = ({
   const translation = useSharedValue(startPos);
   const opacity = useSharedValue(0);
 
-  const triggerOnFinish = useCallback(() => {
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const [layoutHeight, setLayoutHeight] = React.useState(0);
+
+  // Comprobamos si el contenido desborda el contenedor
+  const isScrollable = contentHeight > layoutHeight;
+
+  const triggerOnFinish = useCallback((wasActionAlreadyDone = false) => {
     if (onFinish) onFinish();
-    if (primaryButtonOnPress) primaryButtonOnPress();
-  }, [onFinish, primaryButtonOnPress]);
 
-  const handleClose = useCallback(() => {
+    // SI NO se ha ejecutado la acción (se cerró por X, gesto o backdrop)
+    // Y SI NO hay botón secundario (es un modal de botón único)
+    if (!wasActionAlreadyDone && !secondaryButtonLabel && primaryButtonOnPress) {
+      primaryButtonOnPress();
+    }
+  }, [onFinish, secondaryButtonLabel, primaryButtonOnPress]);
+
+  // 2. handleClose recibe el parámetro y lo pasa al JS
+  const handleClose = useCallback((wasActionAlreadyDone = false) => {
     "worklet";
     translation.value = withTiming(startPos, { duration: 300 }, (finished) => {
       if (finished) {
-        runOnJS(triggerOnFinish)();
+        runOnJS(triggerOnFinish)(wasActionAlreadyDone);
       }
     });
     opacity.value = withTiming(0, { duration: 300 });
@@ -86,7 +100,7 @@ const bottomSheetRender = ({
     }
   }, [isVisible, startPos]); // Asegúrate de incluir startPos
 
-const animatedStyle = useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     return {
       opacity: opacity.value,
       // Ocultamos el layout completamente si terminó de salir
@@ -120,11 +134,11 @@ const animatedStyle = useAnimatedStyle(() => {
       <Animated.View
         style={[
           styles.overlay,
-          {pointerEvents: isVisible ? "auto" : "none", backgroundColor: theme.surface.special.overlay },
+          { pointerEvents: isVisible ? "auto" : "none", backgroundColor: theme.surface.special.overlay },
           backdropStyle
         ]}
       >
-        <Pressable onPress={() => runOnJS(handleClose)()} style={{ flex: 1 }} />
+        <Pressable onPress={() => runOnJS(handleClose)(false)} style={{ flex: 1 }} />
       </Animated.View>
       <Animated.View
         style={[
@@ -141,7 +155,6 @@ const animatedStyle = useAnimatedStyle(() => {
             } : {
               borderBottomLeftRadius: theme.radius.lg,
               borderTopLeftRadius: theme.radius.lg,
-              paddingBottom: theme.space.md,
             })
           }
         ]}
@@ -166,42 +179,65 @@ const animatedStyle = useAnimatedStyle(() => {
 
         {!!title && <Text style={[theme.typography.h3, { marginHorizontal: theme.space.md }]}>{title}</Text>}
 
-        <View style={styles.scrollWrapper}>
+        <View style={styles.scrollWrapper} onLayout={(e) => setLayoutHeight(e.nativeEvent.layout.height)}>
           <GestureDetector gesture={Gesture.Simultaneous(nativeGesture)}>
             <ScrollView
               ref={ref}
               style={styles.scrollArea}
-              contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.xl }]} // Tu padding original
+              scrollEnabled={isScrollable} // Desactiva el scroll si no es necesario
+              onContentSizeChange={(_, h) => setContentHeight(h)}
+              contentContainerStyle={[styles.scrollContent, {}]} // Tu padding original
               showsVerticalScrollIndicator={true}
               bounces={true}
               nestedScrollEnabled={true}
               scrollEventThrottle={16}
             >
               {!!description && (
-                <Text style={[theme.typography.regular.md, { padding: theme.space.md }]}>
+                <Text style={[theme.typography.regular.md, { paddingHorizontal: theme.space.md }]}>
                   {description}
                 </Text>
               )}
               {customSlot}
             </ScrollView>
           </GestureDetector>
-          <LinearGradient
-            colors={['transparent', theme.surface.neutral.primary]}
-            style={[styles.fadeGradient, { pointerEvents: 'none' }]}
-          />
+          {isScrollable && (
+            <LinearGradient
+              colors={['transparent', theme.surface.neutral.primary]}
+              style={[styles.fadeGradient, {
+                pointerEvents: 'none',
+                marginLeft: !isMobile && theme.space.md,
+                borderBottomLeftRadius: !isMobile && 2
+              }]}
+            />
+          )}
         </View>
 
         {type !== "informative" && (
-          <View style={[isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer, { paddingHorizontal: theme.space.md, paddingVertical: theme.space.lg }]}>
+          <View style={[isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer, { margin: theme.space.md }]}>
+            {/* BOTÓN PRIMARIO */}
             <CDSButton
               label={primaryButtonLabel}
-              onPress={() => runOnJS(handleClose)()}
+              onPress={() => {
+                if (primaryButtonOnPress) primaryButtonOnPress();
+                runOnJS(handleClose)(true); // <--- TRUE: Acción ya hecha
+              }}
             />
-            {secondaryButtonLabel && (<CDSButton
-              label={secondaryButtonLabel}
-              type="ghost"
-              onPress={() => runOnJS(handleClose)()}
-            />)}
+
+            {/* BOTÓN SECUNDARIO (si existe) */}
+            {secondaryButtonLabel && (
+              <CDSButton
+                label={secondaryButtonLabel}
+                type="ghost"
+                onPress={() => {
+                  if (secondaryButtonOnPress) secondaryButtonOnPress();
+
+                  // Solo cerramos si no nos dijeron lo contrario
+                  if (closeOnSecondaryPress) {
+                    runOnJS(handleClose)(true);
+                  }
+                }}
+              />
+            )}
           </View>
         )}
       </Animated.View>
@@ -249,27 +285,29 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   scrollArea: {
+
     width: '100%',
   },
   scrollContent: {
     gap: 16,
+
   },
   fadeGradient: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: 24,
+    height: 32,
   },
   actionsContainer: {
     typeBottomSheet: {
       flexDirection: "column",
-      width: "100%",
+      width: "auto",
       gap: 8,
     },
     typeDrawer: {
       flexDirection: "row-reverse",
-      width: "100%",
+      width: "auto",
       gap: 8,
       marginTop: 'auto',
     },

package/components/CDSButton.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from "react";
-import { Text, StyleSheet, TouchableOpacity, Animated } from "react-native";
+import { Text, StyleSheet, TouchableOpacity, Animated, View } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 
@@ -15,34 +15,6 @@ export const CDSButton = ({
   const { theme } = useTheme();
   const isMobile = theme.isMobile;
 
-  // 1. Referencia de animación
-  const animatedValue = useRef(new Animated.Value(0)).current;
-
-  // 2. Disparar entrada al montar
-  useEffect(() => {
-    Animated.timing(animatedValue, {
-      toValue: 1,
-      duration: 400,
-      useNativeDriver: false // Para manejar maxHeight y otros layouts
-    }).start();
-  }, []);
-
-  // 3. Estructura de animatedLayout unificada
-  const animatedLayout = {
-    opacity: animatedValue,
-    transform: [{
-      scale: animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0.95, 1]
-      })
-    }],
-    // Permite que el botón aparezca empujando suavemente
-    maxHeight: animatedValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, (variant === "fill" || isMobile ? 48 : 56)]
-    }),
-  };
-
   const backgroundColor =
     type === "disabled"
       ? theme.surface.action.disabled
@@ -58,11 +30,10 @@ export const CDSButton = ({
         : theme.text.neutral.contrast;
 
   return (
-    <Animated.View style={[
-      animatedLayout,
+    <View style={[
       {
         overflow: 'hidden',
-        alignSelf: (variant === "fill" || isMobile) ? "stretch" : "center",
+        alignSelf: (variant === "fill" || isMobile) ? "stretch" : "",
         flexGrow: (variant === "fill" || isMobile ? 1 : 0),
       }
     ]}>
@@ -113,7 +84,7 @@ export const CDSButton = ({
           />
         )}
       </TouchableOpacity>
-    </Animated.View>
+    </View>
   );
 };
 

package/components/CDSButtonGroup.jsx

@@ -24,7 +24,7 @@ export const CDSButtonGroup = ({ options, onSelect, label = 'Label', selected =
     };
 
     return (
-        <View style={[styles.container, { gap: theme.space.sm }]}>
+        <View style={[styles.container, { gap: theme.space.sm, }]}>
             <Text style={[theme.typography.label]}>{label}</Text>
             <View style={[styles.actionsContainer, { gap: theme.space.sm }]}>
                 {options.map((option, index) => (

package/components/CDSCarousel.jsx

@@ -29,7 +29,7 @@ export const CDSCarousel = ({ activeIndex, scrollViewRef, onScroll, images }) =>
         onLayout={onLayout}
       >
         {images.map((image, index) => (
-          <View key={index} style={{ width: scrollViewWidth, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
+          <View key={index} style={{ width: scrollViewWidth, justifyContent: 'center', alignItems: 'center',}}>
             <Image
               source={image}
               style={{

package/components/CDSImageButtonGroup.jsx

@@ -35,7 +35,7 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
     };
 
     return (
-        <Animated.View style={[
+        <View style={[
             animatedLayout,
             { width: '100%' } // Asegura que el contenedor ocupe todo el ancho disponible
         ]}>
@@ -65,7 +65,7 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
                     />
                 ))}
             </ScrollView>
-        </Animated.View>
+        </View>
     );
 }
 

package/components/CDSInput.jsx

@@ -23,11 +23,33 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
   const isReadOnly = type === 'readOnly';
 
   // --- Colores de seguridad ---
-  const colorBase = theme?.text?.neutral?.primary 
-  const colorReadOnlyText = theme?.text?.neutral?.secondary 
-  const colorFocus = theme?.surface?.special?.progress
-  const colorTertiary = theme?.outline?.neutral?.tertiaryVariant 
-  const colorPrimaryOutline = theme?.outline?.neutral?.primary 
+  const colorBase = theme?.text?.neutral?.primary
+  const colorReadOnlyText = theme?.text?.neutral?.secondary
+  const colorFocus = theme?.outline?.neutral?.focus
+  const colorTertiary = theme?.outline?.neutral?.tertiaryVariant
+  const colorPrimaryOutline = theme?.outline?.neutral?.primary
+
+  const handleTextChange = (text) => {
+    let filteredText = text;
+
+    if (keyboard === 'numeric') {
+      // Elimina cualquier cosa que no sea un número del 0 al 9
+      filteredText = text.replace(/[^0-9]/g, '');
+    }
+    else if (keyboard === 'decimal-pad') {
+      // 1. Permite solo números y puntos
+      filteredText = text.replace(/[^0-9.]/g, '');
+
+      // 2. Evita que haya más de un punto decimal
+      const parts = filteredText.split('.');
+      if (parts.length > 2) {
+        filteredText = parts[0] + '.' + parts.slice(1).join('');
+      }
+    }
+
+    isInternalChange.current = true;
+    onChangeText && onChangeText(filteredText);
+  };
 
   useEffect(() => {
     // ELIMINAMOS la restricción de !isReadOnly para que se anime siempre
@@ -58,7 +80,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
     return {
       borderColor,
       borderWidth: 1 + (flashValue.value * 2),
-      transform: [{ scale: 1 + (flashValue.value * 0.06) }]
+      transform: [{ scale: 1 + (flashValue.value * 0.02) }]
     };
   });
 
@@ -109,10 +131,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
           placeholder={placeholder}
           placeholderTextColor={theme.text.neutral.placeholder}
           keyboardType={keyboard}
-          onChangeText={(txt) => {
-            isInternalChange.current = true;
-            onChangeText && onChangeText(txt);
-          }}
+          onChangeText={handleTextChange}
           value={value}
           editable={!isReadOnly}
           secureTextEntry={type === "password"}

package/components/CDSLoader.jsx

@@ -21,8 +21,8 @@ export const CDSLoader = ({ visible = false, message }) => {
       opacity.value = withTiming(1, { duration: 300 });
     } else {
       opacity.value = withDelay(
-        1000,
-        withTiming(0, { duration: 1200 }, (isFinished) => {
+        200,
+        withTiming(0, { duration: 200 }, (isFinished) => {
           if (isFinished) {
             runOnJS(setShouldRender)(false);
           }

package/components/CDSSelect.jsx

@@ -1,151 +1,122 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import {
     View, Text, TouchableOpacity, StyleSheet, ScrollView,
-    Animated, Pressable, Platform
+    Pressable, Modal, SafeAreaView
 } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 
-// Componente Interno para la Opción con soporte de Hover
-const SelectOption = ({ item, isSelected, onSelect, theme }) => {
-    const [isHovered, setIsHovered] = useState(false);
-
-    return (
-        <Pressable
-            onPress={() => onSelect(item)}
-            onMouseEnter={() => Platform.OS === 'web' && setIsHovered(true)}
-            onMouseLeave={() => Platform.OS === 'web' && setIsHovered(false)}
-            style={({ pressed }) => [
-                styles.optionItem,
-                {
-                    paddingHorizontal: theme.space.sm,
-                    backgroundColor: (pressed || isHovered)
-                        ? theme.surface.neutral.secondary
-                        : isSelected ? theme.surface.neutral.tertiary : 'transparent'
-                }
-            ]}
-        >
-            <View style={styles.optionContent}>
-                <Text style={[
-                    theme.typography.regular.sm,
-                    {
-                        color: theme.text.neutral.primary,
-                        fontWeight: isSelected ? '700' : '400'
-                    }
-                ]}>
-                    {item.label}
-                </Text>
-                {isSelected && <MaterialIcons name="check" size={18} color={theme.text.neutral.primary} />}
-            </View>
-        </Pressable>
-    );
-};
-
-export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null }) => {
+export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null, placeholder = 'Selecciona una opción' }) => {
     const { theme } = useTheme();
-    const [isOpen, setIsOpen] = useState(false);
-    const animatedValue = useRef(new Animated.Value(0)).current;
-    const containerRef = useRef(null);
-
+    const [modalVisible, setModalVisible] = useState(false);
     const [selectedItem, setSelectedItem] = useState(
         options.find(opt => opt.value === selectedValue) || null
     );
 
+    // Altura fija por cada fila (puedes ajustarla según tu diseño)
+    const ITEM_HEIGHT = 52; 
+    // Mostramos 7.5 opciones para que la última se vea cortada y sugiera scroll
+    const MAX_VISIBLE_OPTIONS = 7.5;
+    const MAX_HEIGHT = ITEM_HEIGHT * MAX_VISIBLE_OPTIONS;
+
     useEffect(() => {
         const found = options.find(opt => opt.value === selectedValue);
         setSelectedItem(found || null);
     }, [selectedValue, options]);
 
-    const toggleDropdown = () => {
-        if (isOpen) {
-            Animated.timing(animatedValue, {
-                toValue: 0,
-                duration: 250,
-                useNativeDriver: false 
-            }).start(() => setIsOpen(false));
-        } else {
-            setIsOpen(true);
-            requestAnimationFrame(() => {
-                Animated.timing(animatedValue, {
-                    toValue: 1,
-                    duration: 300,
-                    useNativeDriver: false
-                }).start();
-            });
-        }
-    };
-
     const handleSelect = (item) => {
         setSelectedItem(item);
-        toggleDropdown();
+        setModalVisible(false);
         if (onSelect) onSelect(item.value);
     };
 
-    const animatedLayout = {
-        maxHeight: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, 240] 
-        }),
-        opacity: animatedValue,
-        marginTop: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, theme.space.sm]
-        }),
-    };
-
     return (
-        <View style={styles.mainContainer} ref={containerRef} collapsable={false}>
+        <View style={styles.mainContainer}>
             {label && (
                 <Text style={[theme.typography.label, { color: theme.text.neutral.primary, marginBottom: theme.space.sm }]}>
                     {label}
                 </Text>
             )}
 
+            {/* Trigger del Select */}
             <TouchableOpacity
-                activeOpacity={0.8}
+                activeOpacity={0.7}
                 style={[
                     styles.inputContainer,
                     {
                         backgroundColor: theme.surface.neutral.primary,
-                        borderColor: selectedItem ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary,
+                        borderColor: theme.outline.neutral.primary,
                         borderRadius: theme.radius.sm,
                         paddingHorizontal: theme.space.sm
                     }
                 ]}
-                onPress={toggleDropdown}
+                onPress={() => setModalVisible(true)}
             >
                 <Text style={selectedItem ? theme.typography.inputText.value : theme.typography.inputText.placeholder}>
-                    {selectedItem ? selectedItem.label : 'Selecciona una opción'}
+                    {selectedItem ? selectedItem.label : placeholder}
                 </Text>
-                <MaterialIcons name={isOpen ? "expand-less" : "expand-more"} size={24} color={theme.text.neutral.primary} />
+                <MaterialIcons name="expand-more" size={24} color={theme.text.neutral.primary} />
             </TouchableOpacity>
 
-            {isOpen && (
-                <Animated.View
-                    style={[
-                        styles.dropdownInline,
-                        animatedLayout,
-                        {
-                            backgroundColor: theme.surface.neutral.primary,
-                            borderRadius: theme.radius.sm,
-                            borderColor: theme.outline.neutral.primary,
-                            overflow: 'hidden',
-                        }
-                    ]}
+            {/* Selector Nativo / Modal */}
+            <Modal
+                visible={modalVisible}
+                transparent={true}
+                animationType="fade"
+                onRequestClose={() => setModalVisible(false)}
+            >
+                <Pressable
+                    style={styles.modalOverlay}
+                    onPress={() => setModalVisible(false)}
                 >
-                    <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}
-                            />
-                        ))}
-                    </ScrollView>
-                </Animated.View>
-            )}
+                    <SafeAreaView style={styles.modalContent}>
+                        <View style={[
+                            styles.optionsContainer, 
+                            { 
+                                backgroundColor: theme.surface.neutral.primary, 
+                                borderRadius: theme.radius.md,
+                                maxHeight: MAX_HEIGHT + 60 // +60 para compensar el header del modal
+                            }
+                        ]}>
+                            {/* Header del Modal */}
+                            <View style={[styles.modalHeader, { borderBottomColor: theme.outline.neutral.primary }]}>
+                                <Text style={theme.typography.semiBold.md}>{'Selecciona una opción'}</Text>
+                                <TouchableOpacity onPress={() => setModalVisible(false)} hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}>
+                                    <MaterialIcons name="close" size={24} color={theme.text.neutral.primary} />
+                                </TouchableOpacity>
+                            </View>
+
+                            {/* Lista Scrolleable */}
+                            <ScrollView 
+                                bounces={false}
+                                showsVerticalScrollIndicator={true}
+                                nestedScrollEnabled={true}
+                            >
+                                {options.map((item, index) => (
+                                    <TouchableOpacity
+                                        key={item.value?.toString() || index.toString()}
+                                        onPress={() => handleSelect(item)}
+                                        style={[
+                                            styles.optionItem,
+                                            { 
+                                                height: ITEM_HEIGHT,
+                                                backgroundColor: selectedItem?.value === item.value ? theme.surface.neutral.secondary : 'transparent' 
+                                            }
+                                        ]}
+                                    >
+                                        <Text style={[theme.typography.regular.md, { color: theme.text.neutral.primary }]}>
+                                            {item.label}
+                                        </Text>
+                                        {selectedItem?.value === item.value && (
+                                            <MaterialIcons name="check" size={20} color={theme.text.neutral.primary} />
+                                        )}
+                                    </TouchableOpacity>
+                                ))}
+                            </ScrollView>
+                        </View>
+                    </SafeAreaView>
+                </Pressable>
+            </Modal>
         </View>
     );
 };
@@ -153,9 +124,37 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
 const styles = StyleSheet.create({
     mainContainer: { width: '100%' },
     inputContainer: { width: '100%', height: 48, borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
-    dropdownInline: { 
-        borderWidth: 1,
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.6)', // Un poco más oscuro para mejor enfoque
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24
+    },
+    modalContent: {
+        width: '100%',
+        maxWidth: 400,
+    },
+    optionsContainer: {
+        width: '100%',
+        overflow: 'hidden',
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4.65,
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 16,
+        borderBottomWidth: 1,
     },
-    optionItem: { height: 48, justifyContent: 'center' },
-    optionContent: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
+    optionItem: {
+        paddingHorizontal: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    }
 });

package/package.json

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