cdslibrary 1.2.47 → 1.2.49

package/components/CDSBottomSheet.jsx

@@ -6,7 +6,6 @@ import { useTheme } from "../context/CDSThemeContext";
 import { LinearGradient } from 'expo-linear-gradient';
 
 const { height, width } = Dimensions.get("window");
-const isMobile = width <= 878;
 
 const bottomSheetRender = ({
   type,
@@ -21,6 +20,7 @@ const bottomSheetRender = ({
   onFinish,
 }, ref) => {
   const { theme } = useTheme();
+  const isMobile = theme.isMobile
   const [modalVisible, setModalVisible] = useState(isVisible);
   const [modalOpacity] = useState(new Animated.Value(0));
   const [slidePosition] = useState(new Animated.Value(isMobile ? height : width));

package/components/CDSButton.jsx

@@ -1,11 +1,8 @@
 import React from "react";
 import { Text, StyleSheet, TouchableOpacity } from "react-native";
-import { Dimensions, Platform } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 
-const { width } = Dimensions.get("window");
-const isMobile = width <= 768
 
 export const CDSButton = ({
   label,
@@ -17,7 +14,8 @@ export const CDSButton = ({
   flexend,
 }) => {
   const { theme } = useTheme();
-
+  const isMobile = theme.isMobile
+  
   const backgroundColor =
     type === "disabled"
       ? theme.surface.action.disabled

package/components/CDSCardFeedback.jsx

@@ -1,121 +1,127 @@
-import { useState, useRef } from "react";
+import React, { useState, useRef } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, Platform, Animated } from "react-native";
-
-
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 
 export const CDSCardFeedback = ({
-
     style,
     title,
     description,
     secondAction,
     onPressSecondAction,
-    onClose }) => {
+    onClose 
+}) => {
     const { theme } = useTheme();
-    const [isVisible, setIsVisible] = useState(true); // 3. Estado inicial: visible
+    const [isVisible, setIsVisible] = useState(true);
     const fadeAnim = useRef(new Animated.Value(1)).current;
-    // 4. Si isVisible es falso, no renderizamos nada (devolvemos null)
 
     const handleClose = () => {
-        // Iniciar la animación de desvanecimiento
+        // IMPORTANTE: useNativeDriver debe ser false para animar maxHeight y padding
         Animated.timing(fadeAnim, {
             toValue: 0,
             duration: 300,
-            useNativeDriver: Platform.OS !== 'web'
+            useNativeDriver: false 
         }).start(() => {
-            // Una vez que la animación termina, ocultar el componente
             setIsVisible(false);
-        })
-    }
+            if (onClose) onClose();
+        });
+    };
+
     if (!isVisible) return null;
 
     const feedbackStyles = {
-        success: {
-            bg: theme.surface.feedback.success,
-            border: theme.outline.feedback.success,
-            text: theme.text.feedback.success,
-            icon: 'check-circle',
-        },
-        warning: {
-            bg: theme.surface.feedback.warning,
-            border: theme.outline.feedback.warning,
-            text: theme.text.feedback.warning,
-            icon: 'warning',
-        },
-        error: {
-            bg: theme.surface.feedback.error,
-            border: theme.outline.feedback.error,
-            text: theme.text.feedback.error,
-            icon: 'error',
-        },
-        neutral: {
-            bg: theme.surface.neutral.primaryVariant,
-            border: theme.outline.tertiary,
-            text: theme.text.neutral.primary,
-            icon: 'lightbulb',
-        },
-        info: {
-            bg: theme.surface.feedback.info,
-            border: theme.outline.feedback.info,
-            text: theme.text.feedback.info,
-            icon: 'info',
-        }
-    }
+        success: { bg: theme.surface.feedback.success, border: theme.outline.feedback.success, text: theme.text.feedback.success, icon: 'check-circle' },
+        warning: { bg: theme.surface.feedback.warning, border: theme.outline.feedback.warning, text: theme.text.feedback.warning, icon: 'warning' },
+        error: { bg: theme.surface.feedback.error, border: theme.outline.feedback.error, text: theme.text.feedback.error, icon: 'error' },
+        neutral: { bg: theme.surface.neutral.primaryVariant, border: theme.outline.tertiary, text: theme.text.neutral.primary, icon: 'lightbulb' },
+        info: { bg: theme.surface.feedback.info, border: theme.outline.feedback.info, text: theme.text.feedback.info, icon: 'info' }
+    };
+    
     const currentStyle = feedbackStyles[style] || feedbackStyles.info;
 
+    // Interpolamos todos los valores físicos para que colapsen a 0
+    const animatedLayout = {
+        maxHeight: fadeAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 600] // Suficiente para el contenido
+        }),
+        opacity: fadeAnim,
+        // Animamos el padding y el margen para que no queden espacios vacíos al cerrar
+        paddingVertical: fadeAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, theme.space.md]
+        }),
+        marginBottom: fadeAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, theme.space.sm]
+        }),
+        borderWidth: 1,
+
+    };
+
     return (
-        <Animated.View style={[styles.container, {
-            backgroundColor: currentStyle.bg,
-            borderColor: currentStyle.border,
-            borderRadius: theme.radius.md,
-            padding: theme.space.md,
-            gap: theme.space.sm,
-            opacity: fadeAnim,
-            transform: [{
-                scale: fadeAnim.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0.95, 1] // Se encoge ligeramente al 95%
-                })
-            }]
-        }]}>
+        <Animated.View style={[
+            styles.container, 
+            animatedLayout,
+            {
+                backgroundColor: currentStyle.bg,
+                borderColor: currentStyle.border,
+                borderRadius: theme.radius.md,
+                paddingHorizontal: theme.space.md,
+                gap: theme.space.sm,
+                overflow: 'hidden', // Evita que el texto se salga mientras se achica
+            }
+        ]}>
+            {title && (
+                <View style={[styles.titleContainer, { gap: theme.space.sm }]}>
+                    <MaterialIcons
+                        name={currentStyle.icon}
+                        size={theme.typography.icon.md}
+                        color={currentStyle.text}
+                    />
+                    <Text style={[styles.title, theme.typography.bold.lg, { color: currentStyle.text }]}>
+                        {title}
+                    </Text>
+                </View>
+            )}
+            
+            {description && (
+                <Text style={[styles.description, theme.typography.regular.md, { color: currentStyle.text }]}>
+                    {description}
+                </Text>
+            )}
 
-            {title && <View style={[styles.titleContainer, { gap: theme.space.sm }]}>
-                <MaterialIcons
-                    name={currentStyle.icon}
-                    size={theme.typography.icon.md}
-                    color={currentStyle.text}
-                />
-                <Text style={[styles.title, theme.typography.bold.lg, { color: currentStyle.text }]}>{title}</Text>
-            </View>}
-            {description && <Text style={[styles.description, theme.typography.regular.md, { color: currentStyle.text }]}>{description}</Text>}
             <View style={[styles.actionsContainer, { gap: theme.space.sm }]}>
-                {secondAction && <TouchableOpacity onPress={onPressSecondAction}>{<Text style={[theme.typography.bold.sm, { color: currentStyle.text }]}>{secondAction}</Text>}</TouchableOpacity>}
-                <TouchableOpacity onPress={() => {
-                    handleClose()
-                }}>{<Text style={[theme.typography.bold.sm, { color: currentStyle.text }]}>{'Cerrar'}</Text>}</TouchableOpacity></View>
+                {secondAction && (
+                    <TouchableOpacity onPress={onPressSecondAction}>
+                        <Text style={[theme.typography.bold.sm, { color: currentStyle.text }]}>
+                            {secondAction}
+                        </Text>
+                    </TouchableOpacity>
+                )}
+                <TouchableOpacity onPress={handleClose}>
+                    <Text style={[theme.typography.bold.sm, { color: currentStyle.text }]}>
+                        {'Cerrar'}
+                    </Text>
+                </TouchableOpacity>
+            </View>
         </Animated.View>
-    )
-}
+    );
+};
 
 const styles = StyleSheet.create({
     container: {
         width: '100%',
         justifyContent: 'space-between',
-        borderWidth: 1,
     },
-
     titleContainer: {
         flexDirection: 'row',
         alignItems: 'center',
     },
-    description: {
-    },
+    description: {},
     actionsContainer: {
         flexDirection: 'row',
         width: '100%',
         justifyContent: 'flex-end',
-
     },
-});
+});

package/components/CDSImageButton.jsx

@@ -8,6 +8,7 @@ import { useTheme } from "../context/CDSThemeContext";
 export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añadimos isActive
   const { theme } = useTheme();
 
+  console.log(theme.typography)
   return (
     <TouchableOpacity
     onPress={onPress}
@@ -18,7 +19,7 @@ export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añad
             ? theme.surface.neutral.primaryVariant // Color cuando está presionado
             : theme.surface.neutral.primary,
           gap: theme.space.sm,
-          padding: theme.space.sm,
+          padding: theme.space.md,
           // borderColor: isActive 
           //   ? theme.outline.neutral.primary // Borde de color de marca si está activo
           //   : theme.outline.neutral.primary,
@@ -34,11 +35,12 @@ export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añad
         source={object.image}
         resizeMode="cover"
         style={{
+          flexGrow: 1,
           width: "100%",
-          height: 60,
+          height: 80,
         }}
       />
-      <Text style={{ fontWeight: isActive ? 'bold' : 'normal' }}>
+      <Text style={isActive ? theme.typography.semiBold.sm : theme.typography.regular.sm }>
         {object.label}
       </Text>
     </TouchableOpacity>
@@ -52,8 +54,9 @@ const styles = StyleSheet.create ({
 mainContainer:{
     alignItems: 'center',
     flexGrow: 1,
-    maxWidth: 200,
-    height: 120
+    maxWidth: 160,
+    minWidth: 120,
+    height: 'auto'
 }
 
 })

package/components/CDSImageButtonGroup.jsx

@@ -1,28 +1,61 @@
-import { StyleSheet, Text, View, Image } from 'react-native';
+import React, { useState, useRef, useEffect } from 'react';
+import { View, Animated, StyleSheet, ScrollView } from 'react-native';
 import { CDSImageButton } from './CDSImageButton';
-import { useState } from 'react';
-
+import { useTheme } from "../context/CDSThemeContext";
 
 export const CDSImageButtonGroup = ({ array, onSelect }) => {
+    const { theme } = useTheme();
     const [selectedId, setSelectedId] = useState(null);
+    const animatedValue = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.timing(animatedValue, {
+            toValue: 1,
+            duration: 400,
+            useNativeDriver: false
+        }).start();
+    }, []);
 
     const handlePress = (id) => {
         const nextId = id === selectedId ? null : id;
         setSelectedId(nextId);
-
-        // Avisamos al padre qué objeto se seleccionó (o null si se deseleccionó)
         if (onSelect) {
             const selectedItem = array.find(item => item.id === nextId);
             onSelect(selectedItem || null);
         }
     };
 
+    const animatedLayout = {
+        maxHeight: animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 250] 
+        }),
+        opacity: animatedValue,
+        marginTop: animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, theme.space.md]
+        })
+    };
+
     return (
-        <View style={{ width: '100%' }}>
-            <View style={{
-                flexDirection: 'row', gap: 10,
-                width: '100%', justifyContent: 'center'
-            }}>
+        <Animated.View style={[
+            animatedLayout,
+            { width: '100%' } // Asegura que el contenedor ocupe todo el ancho disponible
+        ]}>
+            <ScrollView 
+                horizontal={true} 
+                showsHorizontalScrollIndicator={false}
+                // IMPORTANTE: overflow visible para que no corte sombras, 
+                // pero necesitamos que el ScrollView sepa su límite
+                style={styles.scrollView}
+                contentContainerStyle={[
+                    styles.scrollContent, 
+                    { 
+                        gap: theme.space.sm,
+                        paddingHorizontal: theme.space.md, 
+                    }
+                ]}
+            >
                 {array.map((item) => (
                     <CDSImageButton
                         key={item.id}
@@ -31,7 +64,21 @@ export const CDSImageButtonGroup = ({ array, onSelect }) => {
                         onPress={() => handlePress(item.id)}
                     />
                 ))}
-            </View>
-        </View>
+            </ScrollView>
+        </Animated.View>
     );
-}
+}
+
+const styles = StyleSheet.create({
+    scrollView: {
+        width: '100%',
+        overflow: 'visible'
+    },
+    scrollContent: {
+        // Quitamos el justifyContent: 'center' porque impide el scroll si hay pocos elementos
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 10,
+        overflow: 'visible'
+    }
+});

package/components/CDSNavBar.jsx

@@ -1,24 +1,21 @@
 
-import { View, Text,  Dimensions, 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 { getSemanticTextStyles } from "../tokens/CDSsemanticTextStyles";
 import { useNavigation } from "@react-navigation/native";
 
-const { height, width } = Dimensions.get("window");
-
-const isMobile = width <= 878;
 export const CDSNavBar = ({
-
+    
     type,
     isExpanded,
     hasClose,
     title,
     hasBack, }) => {
-
-    const { theme, isDarkMode } = useTheme();
+        
+        const { theme, isDarkMode } = useTheme();
+        const isMobile = theme.isMobile
     
     const navigation = useNavigation();
 

package/components/CDSOffer.jsx

@@ -1,16 +1,14 @@
 
 import { View, Text, StyleSheet, } from "react-native";
 import { useTheme } from "../context/CDSThemeContext";
-import { Dimensions } from "react-native";
 
 
-const { width } = Dimensions.get("window");
-const isMobile = width <= 768
 
 export const CDSOffer = ({ description, minValue, maxValue }) => {
-
+    
     const { theme } = useTheme();
-    console.log(theme)
+    const isMobile = theme.isMobile
+
     return (
         <View style={[styles.mainContainer, { gap: theme.space.md }]}>
             <Text style={theme.typography.regular.md}>Por tu</Text>

package/components/CDSSelect.jsx

@@ -13,7 +13,6 @@ const SelectOption = ({ item, isSelected, onSelect, theme }) => {
     return (
         <Pressable
             onPress={() => onSelect(item)}
-            // Eventos de Hover para Web
             onMouseEnter={() => Platform.OS === 'web' && setIsHovered(true)}
             onMouseLeave={() => Platform.OS === 'web' && setIsHovered(false)}
             style={({ pressed }) => [
@@ -45,12 +44,8 @@ const SelectOption = ({ item, isSelected, onSelect, theme }) => {
 export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null }) => {
     const { theme } = useTheme();
     const [isOpen, setIsOpen] = useState(false);
-    const [dropdownTop, setDropdownTop] = useState(0);
-    const [dropdownWidth, setDropdownWidth] = useState(0);
-    const [dropdownLeft, setDropdownLeft] = useState(0);
-
-    const containerRef = useRef(null);
     const animatedValue = useRef(new Animated.Value(0)).current;
+    const containerRef = useRef(null);
 
     const [selectedItem, setSelectedItem] = useState(
         options.find(opt => opt.value === selectedValue) || null
@@ -63,36 +58,49 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
 
     const toggleDropdown = () => {
         if (isOpen) {
-            Animated.timing(animatedValue, { toValue: 0, duration: 200, useNativeDriver: true })
-                .start(() => setIsOpen(false));
+            Animated.timing(animatedValue, {
+                toValue: 0,
+                duration: 250,
+                useNativeDriver: false 
+            }).start(() => setIsOpen(false));
         } else {
-            containerRef.current.measure((fx, fy, width, height, px, py) => {
-                setDropdownTop(py + height);
-                setDropdownWidth(width);
-                setDropdownLeft(px); // Usamos px para alineación exacta en X
-                setIsOpen(true);
-                Animated.timing(animatedValue, { toValue: 1, duration: 300, useNativeDriver: true }).start();
+            setIsOpen(true);
+            requestAnimationFrame(() => {
+                Animated.timing(animatedValue, {
+                    toValue: 1,
+                    duration: 300,
+                    useNativeDriver: false
+                }).start();
             });
         }
     };
 
-const handleSelect = (item) => {
-        // 1. Actualizamos localmente PRIMERO para que el cambio sea instantáneo
+    const handleSelect = (item) => {
         setSelectedItem(item);
-        
-        // 2. Cerramos el menú
         toggleDropdown();
-        
-        // 3. Notificamos al padre
-        if (onSelect) {
-            // Enviamos el valor (o el objeto, según prefieras)
-            onSelect(item.value); 
-        }
+        if (onSelect) onSelect(item.value);
+    };
+
+    // Estructura idéntica a CardFeedback para mantener consistencia
+    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}>
-            {label && <Text style={[theme.typography.label, { color: theme.text.neutral.primary, marginBottom: theme.space.sm }]}>{label}</Text>}
+            {label && (
+                <Text style={[theme.typography.label, { color: theme.text.neutral.primary, marginBottom: theme.space.sm }]}>
+                    {label}
+                </Text>
+            )}
 
             <TouchableOpacity
                 activeOpacity={0.8}
@@ -114,15 +122,15 @@ const handleSelect = (item) => {
             </TouchableOpacity>
 
             {isOpen && (
-                <View
+                <Animated.View
                     style={[
                         styles.dropdownInline,
+                        animatedLayout, // Aplicamos el objeto de animación aquí
                         {
-                            marginTop: theme.space.sm,
                             backgroundColor: theme.surface.neutral.primary,
                             borderRadius: theme.radius.sm,
                             borderColor: theme.outline.neutral.primary,
-                            maxHeight: 240,
+                            overflow: 'hidden',
                         }
                     ]}
                 >
@@ -137,10 +145,9 @@ const handleSelect = (item) => {
                                 theme={theme}
                             />
                         )}
-                        // Importante para que el scroll funcione dentro de la lista expandida
                         nestedScrollEnabled={true}
                     />
-                </View>
+                </Animated.View>
             )}
         </View>
     );
@@ -149,7 +156,9 @@ const handleSelect = (item) => {
 const styles = StyleSheet.create({
     mainContainer: { width: '100%' },
     inputContainer: { height: 48, borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
-    dropdownInline: { borderWidth: 1},
+    dropdownInline: { 
+        borderWidth: 1,
+    },
     optionItem: { height: 48, justifyContent: 'center' },
     optionContent: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
 });

package/package.json

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

package/tokens/CDSsemanticTextStyles.js

@@ -1,5 +1,3 @@
-import { useFonts, Inter_400Regular, Inter_600SemiBold, Inter_700Bold } from "@expo-google-fonts/inter";
-
 import { CDSprimitiveFontValues } from "./CDSprimitiveTokens";
 
 
@@ -67,7 +65,7 @@ export const getSemanticTextStyles = (theme, isMobile) => {
       sm: {
         fontFamily: CDSprimitiveFontValues.family.interRegular,
         fontSize: getVal('size', 'sm'),
-        lineHeight: getVal('lineHeight', 'xs'), // Usando xs ya que sm no estaba en tu lista
+        lineHeight: getVal('lineHeight', 'sm'), // Usando xs ya que sm no estaba en tu lista
         color: theme.text.neutral.primary,
       },
       xs: {