cdslibrary 1.2.87 → 1.2.89

package/components/CDSBottomSheet.jsx

@@ -26,8 +26,10 @@ const bottomSheetRender = ({
   customSlot,
   primaryButtonLabel = "Aceptar",
   primaryButtonOnPress,
+  secondaryButtonOnPress,
   secondaryButtonLabel,
   onFinish,
+  closeOnSecondaryPress = true,
 }, ref) => {
   const { theme } = useTheme();
   const isMobile = theme.isMobile;
@@ -36,16 +38,28 @@ const bottomSheetRender = ({
   const translation = useSharedValue(startPos);
   const opacity = useSharedValue(0);
 
-  const triggerOnFinish = useCallback(() => {
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const [layoutHeight, setLayoutHeight] = React.useState(0);
+
+  // Comprobamos si el contenido desborda el contenedor
+  const isScrollable = contentHeight > layoutHeight;
+
+  const triggerOnFinish = useCallback((wasActionAlreadyDone = false) => {
     if (onFinish) onFinish();
-    if (primaryButtonOnPress) primaryButtonOnPress();
-  }, [onFinish, primaryButtonOnPress]);
 
-  const handleClose = useCallback(() => {
+    // SI NO se ha ejecutado la acción (se cerró por X, gesto o backdrop)
+    // Y SI NO hay botón secundario (es un modal de botón único)
+    if (!wasActionAlreadyDone && !secondaryButtonLabel && primaryButtonOnPress) {
+      primaryButtonOnPress();
+    }
+  }, [onFinish, secondaryButtonLabel, primaryButtonOnPress]);
+
+  // 2. handleClose recibe el parámetro y lo pasa al JS
+  const handleClose = useCallback((wasActionAlreadyDone = false) => {
     "worklet";
     translation.value = withTiming(startPos, { duration: 300 }, (finished) => {
       if (finished) {
-        runOnJS(triggerOnFinish)();
+        runOnJS(triggerOnFinish)(wasActionAlreadyDone);
       }
     });
     opacity.value = withTiming(0, { duration: 300 });
@@ -86,7 +100,7 @@ const bottomSheetRender = ({
     }
   }, [isVisible, startPos]); // Asegúrate de incluir startPos
 
-const animatedStyle = useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     return {
       opacity: opacity.value,
       // Ocultamos el layout completamente si terminó de salir
@@ -118,19 +132,19 @@ 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
         ]}
       >
-        <Pressable onPress={() => runOnJS(handleClose)()} style={{ flex: 1 }} />
+        <Pressable onPress={() => runOnJS(handleClose)(false)} style={{ flex: 1 }} />
       </Animated.View>
       <Animated.View
         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),
@@ -141,7 +155,6 @@ const animatedStyle = useAnimatedStyle(() => {
             } : {
               borderBottomLeftRadius: theme.radius.lg,
               borderTopLeftRadius: theme.radius.lg,
-              paddingBottom: theme.space.md,
             })
           }
         ]}
@@ -166,42 +179,65 @@ const animatedStyle = useAnimatedStyle(() => {
 
         {!!title && <Text style={[theme.typography.h3, { marginHorizontal: theme.space.md }]}>{title}</Text>}
 
-        <View style={styles.scrollWrapper}>
+        <View style={styles.scrollWrapper} onLayout={(e) => setLayoutHeight(e.nativeEvent.layout.height)}>
           <GestureDetector gesture={Gesture.Simultaneous(nativeGesture)}>
             <ScrollView
               ref={ref}
               style={styles.scrollArea}
-              contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.xl }]} // Tu padding original
+              scrollEnabled={isScrollable} // Desactiva el scroll si no es necesario
+              onContentSizeChange={(_, h) => setContentHeight(h)}
+              contentContainerStyle={[styles.scrollContent, {}]} // Tu padding original
               showsVerticalScrollIndicator={true}
               bounces={true}
               nestedScrollEnabled={true}
               scrollEventThrottle={16}
             >
               {!!description && (
-                <Text style={[theme.typography.regular.md, { padding: theme.space.md }]}>
+                <Text style={[theme.typography.regular.md, { paddingHorizontal: theme.space.md }]}>
                   {description}
                 </Text>
               )}
               {customSlot}
             </ScrollView>
           </GestureDetector>
-          <LinearGradient
-            colors={['transparent', theme.surface.neutral.primary]}
-            style={[styles.fadeGradient, { pointerEvents: 'none' }]}
-          />
+          {isScrollable && (
+            <LinearGradient
+              colors={['transparent', theme.surface.neutral.primary]}
+              style={[styles.fadeGradient, {
+                pointerEvents: 'none',
+                marginLeft: !isMobile && theme.space.md,
+                borderBottomLeftRadius: !isMobile && 2
+              }]}
+            />
+          )}
         </View>
 
         {type !== "informative" && (
-          <View style={[isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer, { paddingHorizontal: theme.space.md, paddingVertical: theme.space.lg }]}>
+          <View style={[isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer, { margin: theme.space.md }]}>
+            {/* BOTÓN PRIMARIO */}
             <CDSButton
               label={primaryButtonLabel}
-              onPress={() => runOnJS(handleClose)()}
+              onPress={() => {
+                if (primaryButtonOnPress) primaryButtonOnPress();
+                runOnJS(handleClose)(true); // <--- TRUE: Acción ya hecha
+              }}
             />
-            {secondaryButtonLabel && (<CDSButton
-              label={secondaryButtonLabel}
-              type="ghost"
-              onPress={() => runOnJS(handleClose)()}
-            />)}
+
+            {/* BOTÓN SECUNDARIO (si existe) */}
+            {secondaryButtonLabel && (
+              <CDSButton
+                label={secondaryButtonLabel}
+                type="ghost"
+                onPress={() => {
+                  if (secondaryButtonOnPress) secondaryButtonOnPress();
+
+                  // Solo cerramos si no nos dijeron lo contrario
+                  if (closeOnSecondaryPress) {
+                    runOnJS(handleClose)(true);
+                  }
+                }}
+              />
+            )}
           </View>
         )}
       </Animated.View>
@@ -239,7 +275,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
         }
       })
@@ -250,27 +285,29 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   scrollArea: {
+
     width: '100%',
   },
   scrollContent: {
     gap: 16,
+
   },
   fadeGradient: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: 24,
+    height: 32,
   },
   actionsContainer: {
     typeBottomSheet: {
       flexDirection: "column",
-      width: "100%",
+      width: "auto",
       gap: 8,
     },
     typeDrawer: {
       flexDirection: "row-reverse",
-      width: "100%",
+      width: "auto",
       gap: 8,
       marginTop: 'auto',
     },

package/components/CDSButton.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from "react";
-import { Text, StyleSheet, TouchableOpacity, Animated } from "react-native";
+import { Text, StyleSheet, TouchableOpacity, Animated, View } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 
@@ -15,34 +15,6 @@ export const CDSButton = ({
   const { theme } = useTheme();
   const isMobile = theme.isMobile;
 
-  // 1. Referencia de animación
-  const animatedValue = useRef(new Animated.Value(0)).current;
-
-  // 2. Disparar entrada al montar
-  useEffect(() => {
-    Animated.timing(animatedValue, {
-      toValue: 1,
-      duration: 400,
-      useNativeDriver: false // Para manejar maxHeight y otros layouts
-    }).start();
-  }, []);
-
-  // 3. Estructura de animatedLayout unificada
-  const animatedLayout = {
-    opacity: animatedValue,
-    transform: [{
-      scale: animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0.95, 1]
-      })
-    }],
-    // Permite que el botón aparezca empujando suavemente
-    maxHeight: animatedValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, (variant === "fill" || isMobile ? 48 : 56)]
-    }),
-  };
-
   const backgroundColor =
     type === "disabled"
       ? theme.surface.action.disabled
@@ -58,11 +30,10 @@ export const CDSButton = ({
         : theme.text.neutral.contrast;
 
   return (
-    <Animated.View style={[
-      animatedLayout,
+    <View style={[
       {
         overflow: 'hidden',
-        alignSelf: (variant === "fill" || isMobile) ? "stretch" : "center",
+        alignSelf: (variant === "fill" || isMobile) ? "stretch" : "",
         flexGrow: (variant === "fill" || isMobile ? 1 : 0),
       }
     ]}>
@@ -113,7 +84,7 @@ export const CDSButton = ({
           />
         )}
       </TouchableOpacity>
-    </Animated.View>
+    </View>
   );
 };
 

package/components/CDSButtonGroup.jsx

@@ -24,7 +24,7 @@ export const CDSButtonGroup = ({ options, onSelect, label = 'Label', selected =
     };
 
     return (
-        <View style={[styles.container, { gap: theme.space.sm }]}>
+        <View style={[styles.container, { gap: theme.space.sm, }]}>
             <Text style={[theme.typography.label]}>{label}</Text>
             <View style={[styles.actionsContainer, { gap: theme.space.sm }]}>
                 {options.map((option, index) => (

package/components/CDSCarousel.jsx

@@ -29,7 +29,7 @@ export const CDSCarousel = ({ activeIndex, scrollViewRef, onScroll, images }) =>
         onLayout={onLayout}
       >
         {images.map((image, index) => (
-          <View key={index} style={{ width: scrollViewWidth, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
+          <View key={index} style={{ width: scrollViewWidth, justifyContent: 'center', alignItems: 'center',}}>
             <Image
               source={image}
               style={{

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

@@ -35,7 +35,7 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
     };
 
     return (
-        <Animated.View style={[
+        <View style={[
             animatedLayout,
             { width: '100%' } // Asegura que el contenedor ocupe todo el ancho disponible
         ]}>
@@ -61,10 +61,11 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
                         onPress={() => handlePress(item.id)}
                         hasHelper={item.helper ? true : false}
                         helperMessage={item.helper}
+                        arrowAlignment={item.arrowAlignment}
                     />
                 ))}
             </ScrollView>
-        </Animated.View>
+        </View>
     );
 }
 

package/components/CDSInput.jsx

@@ -23,11 +23,33 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
   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 
+  const colorBase = theme?.text?.neutral?.primary
+  const colorReadOnlyText = theme?.text?.neutral?.secondary
+  const colorFocus = theme?.outline?.neutral?.focus
+  const colorTertiary = theme?.outline?.neutral?.tertiaryVariant
+  const colorPrimaryOutline = theme?.outline?.neutral?.primary
+
+  const handleTextChange = (text) => {
+    let filteredText = text;
+
+    if (keyboard === 'numeric') {
+      // Elimina cualquier cosa que no sea un número del 0 al 9
+      filteredText = text.replace(/[^0-9]/g, '');
+    }
+    else if (keyboard === 'decimal-pad') {
+      // 1. Permite solo números y puntos
+      filteredText = text.replace(/[^0-9.]/g, '');
+
+      // 2. Evita que haya más de un punto decimal
+      const parts = filteredText.split('.');
+      if (parts.length > 2) {
+        filteredText = parts[0] + '.' + parts.slice(1).join('');
+      }
+    }
+
+    isInternalChange.current = true;
+    onChangeText && onChangeText(filteredText);
+  };
 
   useEffect(() => {
     // ELIMINAMOS la restricción de !isReadOnly para que se anime siempre
@@ -58,7 +80,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
     return {
       borderColor,
       borderWidth: 1 + (flashValue.value * 2),
-      transform: [{ scale: 1 + (flashValue.value * 0.06) }]
+      transform: [{ scale: 1 + (flashValue.value * 0.01) }]
     };
   });
 
@@ -109,10 +131,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
           placeholder={placeholder}
           placeholderTextColor={theme.text.neutral.placeholder}
           keyboardType={keyboard}
-          onChangeText={(txt) => {
-            isInternalChange.current = true;
-            onChangeText && onChangeText(txt);
-          }}
+          onChangeText={handleTextChange}
           value={value}
           editable={!isReadOnly}
           secureTextEntry={type === "password"}

package/components/CDSLoader.jsx

@@ -21,8 +21,8 @@ export const CDSLoader = ({ visible = false, message }) => {
       opacity.value = withTiming(1, { duration: 300 });
     } else {
       opacity.value = withDelay(
-        1000,
-        withTiming(0, { duration: 1200 }, (isFinished) => {
+        200,
+        withTiming(0, { duration: 200 }, (isFinished) => {
           if (isFinished) {
             runOnJS(setShouldRender)(false);
           }

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.89",
   "main": "index.js",
   "author": "Nat Viramontes",
   "description": "A library of components for the CDS project",