cdslibrary 1.2.100 → 1.2.102

package/components/CDSAccordion.jsx

@@ -10,7 +10,7 @@ import Animated, {
 import { useTheme } from "../context/CDSThemeContext";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 
-export const CDSAccordion = ({ title, description, children, defaultExpanded = false }) => {
+export const CDSAccordion = ({ title, description, children, defaultExpanded = false, onToggle }) => {
     const { theme } = useTheme();
     const [expanded, setExpanded] = useState(defaultExpanded);
     const [contentHeight, setContentHeight] = useState(0); // Altura real medida
@@ -21,6 +21,10 @@ export const CDSAccordion = ({ title, description, children, defaultExpanded = f
         const newValue = !expanded;
         setExpanded(newValue);
 
+        if (onToggle) {
+            onToggle(newValue);
+        }
+
         animation.value = withTiming(newValue ? 1 : 0, {
             duration: 250,
             easing: Easing.bezier(0.4, 0, 0.2, 1)
@@ -88,7 +92,7 @@ export const CDSAccordion = ({ title, description, children, defaultExpanded = f
                 {/* CONTENEDOR DE MEDICIÓN: Es invisible y absoluto, solo sirve para saber cuánto mide el children */}
                 <View
                     onLayout={onLayout}
-                    style={[styles.measureContainer, {pointerEvents: 'none'}]}
+                    style={[styles.measureContainer, { pointerEvents: 'none' }]}
                 >
                     <View style={{ paddingVertical: theme.space.md, gap: theme.space.md }}>
                         {description && (
@@ -136,7 +140,7 @@ const styles = StyleSheet.create({
         position: 'absolute',
         left: 16,
         right: 16,
-        opacity: 0, 
+        opacity: 0,
     },
     paddingWrapper: {
         paddingBottom: 16,

package/components/CDSImageButton.jsx

@@ -4,7 +4,7 @@ import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 import { CDSTooltip } from "./CDSTooltip"; // Asegúrate de importar tu Tooltip
 
-export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMessage, arrowAlignment, isGrid }) => {
+export const CDSImageButton = ({ object, isActive, onPress, hasHelper, onPressHelper, helperMessage, arrowAlignment, isGrid }) => {
   const { theme } = useTheme();
 
   // Estados para controlar el Tooltip interno
@@ -12,7 +12,9 @@ export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMes
   const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
 
   const handleHelperPress = (event) => {
-    // Si estamos en Web, usamos getBoundingClientRect para precisión total
+    if (onPressHelper) {
+      onPressHelper(object);
+    }
     if (event.target && event.target.getBoundingClientRect) {
       const rect = event.target.getBoundingClientRect();
       setTooltipPos({
@@ -42,7 +44,7 @@ export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMes
         style={[
           styles.mainContainer,
           {
-            width: isGrid ? 192 : 'auto' ,
+            width: isGrid ? 192 : 'auto',
             maxWidth: isGrid ? 192 : 160,
             backgroundColor: isActive
               ? theme.surface.neutral.primaryVariant

package/components/CDSImageButtonGroup.jsx

@@ -3,7 +3,7 @@ import { View, Animated, StyleSheet, ScrollView } from 'react-native';
 import { CDSImageButton } from './CDSImageButton';
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSImageButtonGroup = ({ array, onSelect, isCentered, isGrid }) => {
+export const CDSImageButtonGroup = ({ array, onSelect, isCentered, isGrid, onPressHelper }) => {
     const { theme } = useTheme();
     const isMobile = theme.isMobile
     const [selectedId, setSelectedId] = useState(null);
@@ -73,6 +73,7 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered, isGrid }) =>
                         onPress={() => handlePress(item.id)}
                         hasHelper={!!item.helper}
                         helperMessage={item.helper}
+                        onPressHelper={onPressHelper}
                         arrowAlignment={item.arrowAlignment}
                         // Opcional: Ajustar ancho en grid
                         style={isGrid ? { width: '47%' } : undefined}

package/components/CDSSnackBar.jsx

@@ -1,11 +1,12 @@
 import React, { useEffect } from "react";
-import { StyleSheet, Text, TouchableOpacity,  } from "react-native";
+import { StyleSheet, Text, TouchableOpacity, } from "react-native";
 import Animated, {
     useSharedValue,
     useAnimatedStyle,
     withSpring,
     withTiming,
-    runOnJS
+    runOnJS, 
+    interpolate
 } from "react-native-reanimated";
 import { GestureDetector, Gesture, } from "react-native-gesture-handler";
 import { useTheme } from "../context/CDSThemeContext";
@@ -13,61 +14,59 @@ import { useTheme } from "../context/CDSThemeContext";
 
 export const CDSSnackBar = ({ message, visible, onDismiss, action }) => {
     const { theme } = useTheme();
-    const translateY = useSharedValue(100); // Empezamos fuera de pantalla
+    const translateY = useSharedValue(150); // Empezamos ocultos abajo
 
-    // Sincronizar visibilidad con animación
+    // 1. UN SOLO useEffect para controlar la entrada y salida
     useEffect(() => {
-        if (visible) {
-            translateY.value = withSpring(0, { damping: 15 });
-        } else {
-            translateY.value = withTiming(150);
-        }
+        translateY.value = withTiming(visible ? 0 : 150, { 
+            duration: 300 
+        });
     }, [visible]);
 
-    // Lógica de auto-ocultado
+    // 2. Timer de auto-ocultado (solo si es visible)
     useEffect(() => {
-        let timer;
-        if (visible) {
-            timer = setTimeout(() => {
-                if (onDismiss) onDismiss();
-            }, 4000);
-        }
+        if (!visible) return;
+        
+        const timer = setTimeout(() => {
+            if (onDismiss) onDismiss();
+        }, 4000);
+        
         return () => clearTimeout(timer);
     }, [visible, onDismiss]);
 
-    // Configuración del Gesto (Pan Gesture)
     const gesture = Gesture.Pan()
         .onUpdate((event) => {
-            // Solo permitimos arrastrar hacia abajo (valores positivos de Y)
-            if (event.translationY > 0) {
-                translateY.value = event.translationY;
-            }
+            if (event.translationY > 0) translateY.value = event.translationY;
         })
         .onEnd((event) => {
-            // Si se arrastró más de 50px o la velocidad es alta, cerramos
             if (event.translationY > 50 || event.velocityY > 500) {
                 translateY.value = withTiming(150, {}, () => {
                     if (onDismiss) runOnJS(onDismiss)();
                 });
             } else {
-                // Si no, regresa a su posición original
                 translateY.value = withSpring(0);
             }
         });
 
-    const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        { translateY: translateY.value }
-      ],
-    };
-  });
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+        // OPCIONAL: Añadimos opacidad para que no se vea el "fantasma" si se queda trabado
+        opacity: interpolate(translateY.value, [0, 100], [1, 0]),
+    }));
 
-  useEffect(() => {
-    translateY.value = withTiming(visible ? 0 : 150, { duration: 400 });
-  }, [visible]);
+    // IMPORTANTE: Eliminamos el "if (!visible) return null" manual para dejar 
+    // que Reanimated maneje la salida. Si quieres optimizar, usa un estado local:
+    const [shouldRender, setShouldRender] = React.useState(visible);
 
-    if (!visible && translateY.value >= 100) return null;
+    useEffect(() => {
+        if (visible) setShouldRender(true);
+        else {
+            const timer = setTimeout(() => setShouldRender(false), 400);
+            return () => clearTimeout(timer);
+        }
+    }, [visible]);
+
+    if (!shouldRender) return null;
 
     return (
         <GestureDetector gesture={gesture}>
@@ -83,18 +82,12 @@ export const CDSSnackBar = ({ message, visible, onDismiss, action }) => {
                     }
                 ]}
             >
-                <Text style={[
-                    theme.typography.regular.sm,
-                    { color: theme.text.neutral.contrast, flex: 1 }
-                ]}>
+                <Text style={[theme.typography.regular.sm, { color: theme.text.neutral.contrast, flex: 1 }]}>
                     {message}
                 </Text>
-
                 {action && (
                     <TouchableOpacity onPress={onDismiss} style={styles.actionButton}>
-                        <Text style={[theme.typography.label, {
-                            color: theme.text.neutral.contrast,
-                        }]}>
+                        <Text style={[theme.typography.label, { color: theme.text.neutral.contrast }]}>
                             {action}
                         </Text>
                     </TouchableOpacity>
@@ -113,8 +106,8 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        bottom: 40, 
-        zIndex: 9999, 
+        bottom: 40,
+        zIndex: 9999,
         elevation: 10,
     },
     actionButton: {

package/package.json

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