cdslibrary 1.2.87 → 1.2.88

package/components/CDSBottomSheet.jsx

@@ -118,10 +118,9 @@ const animatedStyle = useAnimatedStyle(() => {
   return (
     <>
       <Animated.View
-        pointerEvents={isVisible ? "auto" : "none"} // Evita clics fantasma
         style={[
           styles.overlay,
-          { backgroundColor: theme.surface.special.overlay },
+          {pointerEvents: isVisible ? "auto" : "none", backgroundColor: theme.surface.special.overlay },
           backdropStyle
         ]}
       >
@@ -131,6 +130,7 @@ const animatedStyle = useAnimatedStyle(() => {
         style={[
           isMobile ? styles.container.typeBottomSheet : styles.container.typeDrawer,
           animatedStyle,
+          theme.shadows.lg,
           {
             backgroundColor: theme.surface.neutral.primary,
             paddingTop: (hasClose ? theme.space['2xl'] : theme.space.xl),
@@ -239,7 +239,6 @@ const styles = StyleSheet.create({
       zIndex: 99,
       ...Platform.select({
         web: {
-          boxShadow: '-10px 0px 15px rgba(0,0,0,0.1)',
           height: 'auto', // En web forzamos que sea auto
         }
       })

package/components/CDSImageButton.jsx

@@ -4,17 +4,33 @@ 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 }) => {
+export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMessage, arrowAlignment }) => {
   const { theme } = useTheme();
-  
+
   // Estados para controlar el Tooltip interno
   const [tooltipVisible, setTooltipVisible] = useState(false);
   const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
 
   const handleHelperPress = (event) => {
-    // Capturamos la posición global para el tooltip
-    const { pageX, pageY } = event.nativeEvent;
-    setTooltipPos({ x: pageX, y: pageY });
+    // Si estamos en Web, usamos getBoundingClientRect para precisión total
+    if (event.target && event.target.getBoundingClientRect) {
+      const rect = event.target.getBoundingClientRect();
+      setTooltipPos({
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+      });
+    } else {
+      // Fallback para Mobile (Nativo)
+      const { pageX, pageY } = event.nativeEvent;
+      setTooltipPos({
+        x: pageX - 10, // Ajuste manual si no hay medida
+        y: pageY,
+        width: 20,
+        height: 20
+      });
+    }
     setTooltipVisible(true);
   };
 
@@ -26,8 +42,8 @@ export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMes
         style={[
           styles.mainContainer,
           {
-            backgroundColor: isActive 
-              ? theme.surface.neutral.primaryVariant 
+            backgroundColor: isActive
+              ? theme.surface.neutral.primaryVariant
               : theme.surface.neutral.primary,
             gap: theme.space.xs, // Reducimos un poco el gap para el label
             padding: theme.space.sm,
@@ -35,7 +51,7 @@ export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMes
             borderWidth: 1,
             borderColor: isActive ? theme.outline.neutral.focus : 'transparent',
             ...(!isActive && theme.shadows.lg),
-            transform: [{ scale: isActive ? 0.98 : 1 }] 
+            transform: [{ scale: isActive ? 0.98 : 1 }]
           },
         ]}
       >
@@ -52,7 +68,7 @@ export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMes
 
         {/* Contenedor de Texto + Ícono de ayuda */}
         <View style={styles.labelContainer}>
-          <Text 
+          <Text
             numberOfLines={1}
             style={[
               isActive ? theme.typography.semiBold.sm : theme.typography.regular.sm,
@@ -63,14 +79,14 @@ export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMes
           </Text>
 
           {hasHelper && (
-            <TouchableOpacity 
+            <TouchableOpacity
               onPress={handleHelperPress}
               hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
             >
-              <MaterialIcons 
-                name="help-outline" 
-                size={14} 
-                color={theme.text.neutral.secondary} 
+              <MaterialIcons
+                name="help-outline"
+                size={14}
+                color={theme.text.neutral.secondary}
               />
             </TouchableOpacity>
           )}
@@ -78,12 +94,12 @@ export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMes
       </TouchableOpacity>
 
       {/* Tooltip renderizado fuera del botón para evitar cortes de overflow */}
-      <CDSTooltip 
+      <CDSTooltip
         visible={tooltipVisible}
         message={helperMessage}
         targetPosition={tooltipPos}
         onDismiss={() => setTooltipVisible(false)}
-        arrowAlign="center"
+        arrowAlign={arrowAlignment}
       />
     </>
   );

package/components/CDSImageButtonGroup.jsx

@@ -61,6 +61,7 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
                         onPress={() => handlePress(item.id)}
                         hasHelper={item.helper ? true : false}
                         helperMessage={item.helper}
+                        arrowAlignment={item.arrowAlignment}
                     />
                 ))}
             </ScrollView>

package/components/CDSTooltip.jsx

@@ -1,126 +1,98 @@
-import React, { useEffect } from "react";
-import { StyleSheet, Text, View, Modal, TouchableWithoutFeedback } from "react-native";
-import Animated, {
-    useSharedValue,
-    useAnimatedStyle,
-    withSpring,
-    withTiming,
-} from "react-native-reanimated";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, Text, View, Modal, Pressable, Dimensions } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS } from "react-native-reanimated";
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSTooltip = ({ message, visible, onDismiss, targetPosition = { x: 0, y: 0 }, arrowAlign = 'center' }) => {
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export const CDSTooltip = ({ message, visible, onDismiss, targetPosition = { x: 0, y: 0, width: 0, height: 0 }, arrowAlign = 'center' }) => {
     const { theme } = useTheme();
     const opacity = useSharedValue(0);
-    const scale = useSharedValue(1);
+    const [shouldRender, setShouldRender] = useState(visible);
 
     useEffect(() => {
         if (visible) {
-            opacity.value = withTiming(1, { duration: 200 });
-            // scale.value = withSpring(1, { damping: 12 });
+            setShouldRender(true);
+            opacity.value = withTiming(1, { duration: 150 });
         } else {
-            opacity.value = withTiming(0, { duration: 200 });
-            // scale.value = withTiming(0.8);
+            opacity.value = withTiming(0, { duration: 150 }, (finished) => {
+                if (finished) runOnJS(setShouldRender)(false);
+            });
         }
     }, [visible]);
 
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: opacity.value,
-        // transform: [{ scale: scale.value }],
-    }));
+    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
 
-    // 1. Alineación de la flecha dentro del globo
-    const getArrowStyle = () => {
-        switch (arrowAlign) {
-            case 'left': return { left: 15 };
-            case 'right': return { right: 15 };
-            default: return { alignSelf: 'center' };
-        }
-    };
+    // --- LÓGICA DE POSICIONAMIENTO ---
+    const tooltipWidth = 320; // Ancho fijo para facilitar el cálculo de la flecha
+    const paddingScreen = 16;
 
-    // 2. Alineación del globo respecto al clic (x)
-    const getTooltipContainerStyle = () => {
-        const tooltipWidth = 200; // Ancho estimado o fijo
-        let leftPosition = targetPosition.x;
+    // Centro horizontal del icono/botón
+    const targetCenterX = targetPosition.x + (targetPosition.width / 2);
 
-        if (arrowAlign === 'center') {
-            leftPosition = targetPosition.x - (tooltipWidth / 2);
-        } else if (arrowAlign === 'right') {
-            leftPosition = targetPosition.x - tooltipWidth + 25; // 25 es el margen de la flecha
-        } else {
-            leftPosition = targetPosition.x - 25;
-        }
+    // Calculamos el Left del contenedor
+    let leftPos = targetCenterX - (tooltipWidth / 2);
+    if (arrowAlign === 'left') leftPos = targetCenterX - 30;
+    if (arrowAlign === 'right') leftPos = targetCenterX - tooltipWidth + 30;
 
-        return {
-            top: targetPosition.y + 24, // Debajo del clic
-            left: Math.max(10, leftPosition), // Evita que se salga de la pantalla por la izquierda
-            width: tooltipWidth,
-        };
-    };
+    // Ajuste para que no choque con los bordes del celular/navegador
+    const finalLeft = Math.max(paddingScreen, Math.min(leftPos, SCREEN_WIDTH - tooltipWidth - paddingScreen));
 
-    if (!visible && opacity.value === 0) return null;
+    // Calculamos dónde debe ir la flecha respecto al globo
+    const arrowLeft = targetCenterX - finalLeft - 8; // 8 es la mitad del ancho de la flecha
+
+    if (!shouldRender) return null;
 
     return (
         <Modal transparent visible={visible} animationType="none" onRequestClose={onDismiss}>
-            <TouchableWithoutFeedback onPress={onDismiss}>
-                <View style={styles.overlay}>
-                    <Animated.View
-                        style={[
-                            styles.tooltip,
-                            animatedStyle,
-                            getTooltipContainerStyle(),
-                            {
-                                backgroundColor: theme.surface.special.tooltip,
-                                borderRadius: theme.radius.sm,
-                                padding: theme.space.sm,
-                            }
-                        ]}
-                    >
-                        {/* La Flecha */}
-                        <View style={[
-                            styles.arrowUp,
-                            getArrowStyle(),
-                            { borderBottomColor: theme.surface.special.tooltip }
-                        ]} />
+            <Pressable style={styles.overlay} onPress={onDismiss}>
+                <Animated.View
+                    style={[
+                        styles.tooltip,
+                        animatedStyle,
+                        theme.shadows.lg,
+                        {
+                            top: targetPosition.y + targetPosition.height + 8,
+                            left: finalLeft,
+                            width: tooltipWidth,
+                            backgroundColor: theme.surface.special.tooltip,
+                            borderRadius: theme.radius.sm,
+                            padding: theme.space.sm,
+                        }
+                    ]}
+                >
+                    {/* Flecha dinámica */}
+                    <View style={[
+                        styles.arrowUp,
+                        { left: arrowLeft, borderBottomColor: theme.surface.special.tooltip }
+                    ]} />
 
-                        {/* El Texto con alineación dinámica */}
-                        <Text style={[
-                            theme.typography.regular.xs,
-                            {
-                                color: theme.text.neutral.contrast,
-                                textAlign: arrowAlign // 'left', 'right' o 'center'
-                            }
-                        ]}>
-                            {message}
-                        </Text>
-                    </Animated.View>
-                </View>
-            </TouchableWithoutFeedback>
+                    <Text style={[
+                        theme.typography.regular.xs,
+                        { color: theme.text.neutral.contrast, textAlign: 'center' }
+                    ]}>
+                        {message}
+                    </Text>
+                </Animated.View>
+            </Pressable>
         </Modal>
     );
 };
 
 const styles = StyleSheet.create({
-    overlay: { flex: 1, backgroundColor: 'transparent' },
-    tooltip: {
-        position: 'absolute',
-        zIndex: 10000,
-        elevation: 5,
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.2,
-        shadowRadius: 4,
-    },
+    overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'transparent' },
+    tooltip: { position: 'absolute', zIndex: 10000 },
     arrowUp: {
         position: 'absolute',
-        top: -8,
+        top: -7,
         width: 0,
         height: 0,
         borderLeftWidth: 8,
         borderRightWidth: 8,
         borderBottomWidth: 8,
-        borderStyle: 'solid',
-        backgroundColor: 'transparent',
         borderLeftColor: 'transparent',
         borderRightColor: 'transparent',
+        borderTopColor: 'transparent',
+        backgroundColor: 'transparent',
     }
 });

package/package.json

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