cdslibrary 1.2.86 → 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

@@ -2,62 +2,121 @@ import React, { useState } from "react";
 import { Text, StyleSheet, TouchableOpacity, View, Image } from "react-native";
 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 }) => { // 👈 Añadimos isActive
+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) => {
+    // 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);
+  };
 
   return (
-    <TouchableOpacity
-    onPress={onPress}
-      style={[
-        styles.mainContainer,
-        {
-          backgroundColor: isActive 
-            ? theme.surface.neutral.primaryVariant // Color cuando está presionado
-            : theme.surface.neutral.primary,
-          gap: theme.space.sm,
-          padding: theme.space.sm,
-          // borderColor: isActive 
-          //   ? theme.outline.neutral.primary // Borde de color de marca si está activo
-          //   : theme.outline.neutral.primary,
-          borderRadius: theme.radius.md,
-          // Si está activo, quitamos la sombra o usamos una más pequeña (md)
-          ...(!isActive && theme.shadows.lg),
-          // Si quieres que se vea "hundido", podrías bajar la escala
-          transform: [{ scale: isActive ? 0.99 : 1 }] 
-        },
-      ]}
-    >
-      <Image
-        source={object.image}
-        resizeMode="cover"
-        style={{
-          flexGrow: 1,
-          width: "100%",
-          height: 80,
-          borderRadius: theme.radius.sm,
-        }}
-      />
-      <Text style={isActive ? theme.typography.semiBold.sm : theme.typography.regular.sm }>
-        {object.label}
-      </Text>
-    </TouchableOpacity>
-  );
-};
+    <>
+      <TouchableOpacity
+        onPress={onPress}
+        activeOpacity={0.7}
+        style={[
+          styles.mainContainer,
+          {
+            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,
+            borderRadius: theme.radius.md,
+            borderWidth: 1,
+            borderColor: isActive ? theme.outline.neutral.focus : 'transparent',
+            ...(!isActive && theme.shadows.lg),
+            transform: [{ scale: isActive ? 0.98 : 1 }]
+          },
+        ]}
+      >
+        <Image
+          source={object.image}
+          resizeMode="cover"
+          style={{
+            width: "100%",
+            height: 80,
+            borderRadius: theme.radius.sm,
+            marginBottom: 4
+          }}
+        />
 
+        {/* Contenedor de Texto + Ícono de ayuda */}
+        <View style={styles.labelContainer}>
+          <Text
+            numberOfLines={1}
+            style={[
+              isActive ? theme.typography.semiBold.sm : theme.typography.regular.sm,
+              { color: theme.text.neutral.primary }
+            ]}
+          >
+            {object.label}
+          </Text>
 
+          {hasHelper && (
+            <TouchableOpacity
+              onPress={handleHelperPress}
+              hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
+            >
+              <MaterialIcons
+                name="help-outline"
+                size={14}
+                color={theme.text.neutral.secondary}
+              />
+            </TouchableOpacity>
+          )}
+        </View>
+      </TouchableOpacity>
 
-const styles = StyleSheet.create ({
+      {/* Tooltip renderizado fuera del botón para evitar cortes de overflow */}
+      <CDSTooltip
+        visible={tooltipVisible}
+        message={helperMessage}
+        targetPosition={tooltipPos}
+        onDismiss={() => setTooltipVisible(false)}
+        arrowAlign={arrowAlignment}
+      />
+    </>
+  );
+};
 
-mainContainer:{
+const styles = StyleSheet.create({
+  mainContainer: {
     alignItems: 'center',
     flexGrow: 1,
     maxWidth: 160,
     minWidth: 96,
-    height: 'auto'
-}
-
-})
+  },
+  labelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4, // Espacio entre el texto y el ícono
+    width: '100%',
+  }
+});

package/components/CDSImageButtonGroup.jsx

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

package/components/CDSTooltip.jsx

@@ -0,0 +1,98 @@
+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";
+
+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 [shouldRender, setShouldRender] = useState(visible);
+
+    useEffect(() => {
+        if (visible) {
+            setShouldRender(true);
+            opacity.value = withTiming(1, { duration: 150 });
+        } else {
+            opacity.value = withTiming(0, { duration: 150 }, (finished) => {
+                if (finished) runOnJS(setShouldRender)(false);
+            });
+        }
+    }, [visible]);
+
+    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+    // --- LÓGICA DE POSICIONAMIENTO ---
+    const tooltipWidth = 320; // Ancho fijo para facilitar el cálculo de la flecha
+    const paddingScreen = 16;
+
+    // Centro horizontal del icono/botón
+    const targetCenterX = targetPosition.x + (targetPosition.width / 2);
+
+    // Calculamos el Left del contenedor
+    let leftPos = targetCenterX - (tooltipWidth / 2);
+    if (arrowAlign === 'left') leftPos = targetCenterX - 30;
+    if (arrowAlign === 'right') leftPos = targetCenterX - tooltipWidth + 30;
+
+    // Ajuste para que no choque con los bordes del celular/navegador
+    const finalLeft = Math.max(paddingScreen, Math.min(leftPos, SCREEN_WIDTH - tooltipWidth - paddingScreen));
+
+    // 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}>
+            <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 }
+                    ]} />
+
+                    <Text style={[
+                        theme.typography.regular.xs,
+                        { color: theme.text.neutral.contrast, textAlign: 'center' }
+                    ]}>
+                        {message}
+                    </Text>
+                </Animated.View>
+            </Pressable>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'transparent' },
+    tooltip: { position: 'absolute', zIndex: 10000 },
+    arrowUp: {
+        position: 'absolute',
+        top: -7,
+        width: 0,
+        height: 0,
+        borderLeftWidth: 8,
+        borderRightWidth: 8,
+        borderBottomWidth: 8,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderTopColor: 'transparent',
+        backgroundColor: 'transparent',
+    }
+});

package/index.js

@@ -25,6 +25,7 @@ export {CDSSnackBar} from './components/CDSSnackBar';
 export {CDSImageButton} from './components/CDSImageButton'
 export {CDSImageButtonGroup} from './components/CDSImageButtonGroup'
 export {CDSCheckbox} from './components/CDSCheckbox';
+export {CDSTooltip} from './components/CDSTooltip';
 
 
 export {CDSThemeProvider, useTheme} from './context/CDSThemeContext';

package/package.json

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

package/tokens/CDSsemanticColors.js

@@ -54,7 +54,7 @@ export const CDSsemanticColors = {
         overlay: CDSprimitiveColors.overlay.light,
         scroll: CDSprimitiveColors.neutral[400],
         snackbar: CDSprimitiveColors.neutral[700],
-        tooltip: CDSprimitiveColors.neutral[500],
+        tooltip: CDSprimitiveColors.neutral[600],
         progress: CDSprimitiveColors.brand[600],
         progressbarBg: CDSprimitiveColors.neutral[400],
         display: CDSprimitiveColors.neutral[800],