cdslibrary 1.2.85 → 1.2.87

package/components/CDSImageButton.jsx

@@ -2,62 +2,105 @@ 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 }) => {
   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 });
+    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="center"
+      />
+    </>
+  );
+};
 
-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,8 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
                         object={item}
                         isActive={selectedId === item.id}
                         onPress={() => handlePress(item.id)}
+                        hasHelper={item.helper ? true : false}
+                        helperMessage={item.helper}
                     />
                 ))}
             </ScrollView>

package/components/CDSInput.jsx

@@ -5,66 +5,84 @@ import Animated, {
   useSharedValue,
   withSequence,
   withTiming,
+  withDelay,
   interpolateColor
 } from "react-native-reanimated";
 import { useTheme } from "../context/CDSThemeContext";
 
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
 export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeText, animationTrigger, returnKeyType, onFocus }) => {
   const { theme } = useTheme();
   const [isFocused, setIsFocused] = useState(false);
 
   const flashValue = useSharedValue(0);
+  const textHighlight = useSharedValue(0);
   const isInternalChange = useRef(false);
 
+  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 
+
   useEffect(() => {
-    if (!isInternalChange.current) {
-      flashValue.value = withSequence(
-        withTiming(1, { duration: 200 }),
+    // ELIMINAMOS la restricción de !isReadOnly para que se anime siempre
+    if (!isInternalChange.current && value) {
+      flashValue.value = withDelay(400, withSequence(
+        withTiming(1, { duration: 400 }),
+        withTiming(0, { duration: 600 })
+      ));
+
+      textHighlight.value = withSequence(
+        withTiming(1, { duration: 400 }),
         withTiming(0, { duration: 600 })
       );
     }
     isInternalChange.current = false;
-  }, [value, animationTrigger]);
-
-  const handleTextChange = (inputText) => {
-    isInternalChange.current = true;
-
-    if (keyboard === "decimal-pad") {
-      let cleaned = inputText.replace(',', '.').replace(/[^0-9.]/g, "");
-      const parts = cleaned.split('.');
-      if (parts.length > 2) cleaned = parts[0] + '.' + parts.slice(1).join('');
-      onChangeText && onChangeText(cleaned);
-    } else {
-      onChangeText && onChangeText(inputText);
-    }
-  };
+  }, [value, animationTrigger]); // Quitamos isReadOnly de las dependencias para evitar disparos extra
 
   const animatedBoxStyle = useAnimatedStyle(() => {
     const borderColor = interpolateColor(
       flashValue.value,
       [0, 1],
       [
-        isFocused ? theme.outline.neutral.focus : value ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary,
-        theme.outline.neutral.focus
+        isFocused ? colorFocus : value ? colorTertiary : colorPrimaryOutline,
+        colorFocus
       ]
     );
 
     return {
-      borderColor: borderColor,
-      // Quitamos el scale momentáneamente para asegurar que el layout no brinque
-      // transform: [{ scale: 1 + flashValue.value * 0.01 }], 
-      borderWidth: 1 + (flashValue.value * 1),
+      borderColor,
+      borderWidth: 1 + (flashValue.value * 2),
+      transform: [{ scale: 1 + (flashValue.value * 0.06) }]
     };
   });
 
+  const animatedTextStyle = useAnimatedStyle(() => {
+    // Definimos el color inicial según si es readOnly o no
+    const startColor = isReadOnly ? colorReadOnlyText : colorBase;
+
+    return {
+      color: interpolateColor(
+        textHighlight.value,
+        [0, 1],
+        [startColor, colorFocus] // El color de "brillo" sigue siendo el de foco
+      ),
+      letterSpacing: textHighlight.value * 1,
+      opacity: isReadOnly ? 0.85 + (textHighlight.value * 0.3) : 0.8 + (textHighlight.value * 0.2),
+    };
+  });
+
+  if (!theme) return null;
 
   return (
     <View style={styles.container}>
       {label && (
-        <Text style={[
-          theme.typography.label,
-          { color: theme.text.neutral.primary, marginBottom: theme.space.xs }
-        ]}>
+        <Text style={[theme.typography.label, { color: colorBase, marginBottom: theme.space?.xs || 4 }]}>
           {label}
         </Text>
       )}
@@ -73,35 +91,34 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
         styles.wrapper,
         animatedBoxStyle,
         {
-          backgroundColor: type === 'readOnly' ? theme.surface.neutral.primaryVariant : theme.surface.neutral.primary,
-          borderRadius: theme.radius.sm,
+          backgroundColor: isReadOnly ? theme.surface.neutral.primaryVariant : theme.surface.neutral.primary,
+          borderRadius: theme.radius?.sm || 8,
         }
       ]}>
-        <TextInput
+        <AnimatedTextInput
           style={[
             styles.textBox,
-            theme.typography.inputText.value,
+            theme.typography.inputText?.value,
+            animatedTextStyle,
             {
-              paddingHorizontal: theme.space.sm,
-              color: type === 'readOnly' ? theme.text.neutral.secondary : theme.text.neutral.primary,
-              // Fix para web:
-              ...Platform.select({
-                web: { outlineStyle: 'none' }
-              })
+              paddingHorizontal: theme.space?.sm || 12,
+              fontWeight: '600',
+              ...Platform.select({ web: { outlineStyle: 'none' } })
             },
           ]}
           placeholder={placeholder}
           placeholderTextColor={theme.text.neutral.placeholder}
           keyboardType={keyboard}
-          onChangeText={handleTextChange}
+          onChangeText={(txt) => {
+            isInternalChange.current = true;
+            onChangeText && onChangeText(txt);
+          }}
           value={value}
-          editable={type !== 'readOnly'}
+          editable={!isReadOnly}
           secureTextEntry={type === "password"}
-          onFocus={() => { setIsFocused(true); onFocus }}
+          onFocus={() => { setIsFocused(true); onFocus && onFocus(); }}
           onBlur={() => setIsFocused(false)}
           underlineColorAndroid="transparent"
-          returnKeyType={returnKeyType}
-          dataSet={{ lpignore: "true" }}
         />
       </Animated.View>
     </View>
@@ -109,20 +126,14 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
 };
 
 const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    alignSelf: 'stretch',
-  },
+  container: { width: "100%", alignSelf: 'stretch' },
   wrapper: {
     width: '100%',
     height: 48,
-    flexDirection: 'row', // Asegura que el TextInput interno tenga un eje claro
+    flexDirection: 'row',
     alignItems: 'center',
     borderWidth: 1,
+    overflow: 'hidden'
   },
-  textBox: {
-    flex: 1,      // Esto es lo más importante: ocupa todo el espacio sobrante
-    height: '100%',
-    width: '100%',
-  },
+  textBox: { flex: 1, height: '100%', width: '100%' },
 });

package/components/CDSTooltip.jsx

@@ -0,0 +1,126 @@
+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 { useTheme } from "../context/CDSThemeContext";
+
+export const CDSTooltip = ({ message, visible, onDismiss, targetPosition = { x: 0, y: 0 }, arrowAlign = 'center' }) => {
+    const { theme } = useTheme();
+    const opacity = useSharedValue(0);
+    const scale = useSharedValue(1);
+
+    useEffect(() => {
+        if (visible) {
+            opacity.value = withTiming(1, { duration: 200 });
+            // scale.value = withSpring(1, { damping: 12 });
+        } else {
+            opacity.value = withTiming(0, { duration: 200 });
+            // scale.value = withTiming(0.8);
+        }
+    }, [visible]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        // transform: [{ scale: scale.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' };
+        }
+    };
+
+    // 2. Alineación del globo respecto al clic (x)
+    const getTooltipContainerStyle = () => {
+        const tooltipWidth = 200; // Ancho estimado o fijo
+        let leftPosition = targetPosition.x;
+
+        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;
+        }
+
+        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,
+        };
+    };
+
+    if (!visible && opacity.value === 0) 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 }
+                        ]} />
+
+                        {/* 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>
+        </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,
+    },
+    arrowUp: {
+        position: 'absolute',
+        top: -8,
+        width: 0,
+        height: 0,
+        borderLeftWidth: 8,
+        borderRightWidth: 8,
+        borderBottomWidth: 8,
+        borderStyle: 'solid',
+        backgroundColor: 'transparent',
+        borderLeftColor: 'transparent',
+        borderRightColor: '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.85",
+  "version": "1.2.87",
   "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],