cdslibrary 1.2.84 → 1.2.86

package/components/CDSBottomSheet.jsx

@@ -73,17 +73,24 @@ const bottomSheetRender = ({
 
   useEffect(() => {
     if (isVisible) {
+      // Animación de Entrada
       translation.value = withTiming(0, {
         duration: 300,
         easing: Easing.out(Easing.exp),
       });
       opacity.value = withTiming(1, { duration: 200 });
+    } else {
+      // Animación de Salida (ESTO ES LO QUE FALTABA)
+      translation.value = withTiming(startPos, { duration: 300 });
+      opacity.value = withTiming(0, { duration: 300 });
     }
-  }, [isVisible]);
+  }, [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
+      display: (translation.value >= startPos && !isVisible) ? 'none' : 'flex',
       transform: [
         isMobile
           ? { translateY: translation.value }
@@ -94,15 +101,24 @@ const bottomSheetRender = ({
 
   const backdropStyle = useAnimatedStyle(() => {
     const currentY = translation.value;
-    const opacityVal = interpolate(currentY, [0, height], [1, 0], Extrapolation.CLAMP);
+    // Si está en la posición inicial (startPos), la opacidad es 0
+    const opacityVal = interpolate(
+      currentY,
+      [0, startPos],
+      [1, 0],
+      Extrapolation.CLAMP
+    );
+
     return {
       opacity: opacityVal,
+      display: opacityVal <= 0 ? 'none' : 'flex',
     };
   });
 
   return (
     <>
       <Animated.View
+        pointerEvents={isVisible ? "auto" : "none"} // Evita clics fantasma
         style={[
           styles.overlay,
           { backgroundColor: theme.surface.special.overlay },
@@ -111,7 +127,6 @@ const bottomSheetRender = ({
       >
         <Pressable onPress={() => runOnJS(handleClose)()} style={{ flex: 1 }} />
       </Animated.View>
-
       <Animated.View
         style={[
           isMobile ? styles.container.typeBottomSheet : styles.container.typeDrawer,
@@ -213,17 +228,20 @@ const styles = StyleSheet.create({
       left: 0,
       right: 0,
       zIndex: 99,
-      ...Platform.select({web:{maxHeight: '95%'}})
+      ...Platform.select({ web: { maxHeight: '95%' } })
     },
     typeDrawer: {
       position: "absolute",
       right: 0,
-      top: 0,
       bottom: 0,
       width: 600,
+      maxHeight: height * .95, // Evita que se salga de la pantalla si hay mucho texto
       zIndex: 99,
       ...Platform.select({
-        web: { boxShadow: '-10px 0px 15px rgba(0,0,0,0.1)' }
+        web: {
+          boxShadow: '-10px 0px 15px rgba(0,0,0,0.1)',
+          height: 'auto', // En web forzamos que sea auto
+        }
       })
     },
   },
@@ -232,7 +250,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   scrollArea: {
-    width: '100%', // Quitamos el flex: 1 de aquí para que sea dinámico
+    width: '100%',
   },
   scrollContent: {
     gap: 16,

package/components/CDSCardFeedback.jsx

@@ -80,6 +80,7 @@ const animatedLayout = {
                 backgroundColor: currentStyle.bg,
                 borderColor: currentStyle.border,
                 borderRadius: theme.radius.md,
+                borderWidth: 1,
                 paddingHorizontal: theme.space.md,
                 gap: theme.space.sm,
                 overflow: 'hidden', // Evita que el texto se salga mientras se achica

package/components/CDSInput.jsx

@@ -5,65 +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 === "numeric" || 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>
       )}
@@ -72,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 === "numeric" ? (Platform.OS === 'ios' ? 'decimal-pad' : 'numeric') : keyboard}
-          onChangeText={handleTextChange}
+          keyboardType={keyboard}
+          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>
@@ -108,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/CDSSwitch.jsx

@@ -9,7 +9,7 @@ export const CDSSwitch = ({ label, onValueChange, value }) => {
     <View style={[styles.container, { }]}>
       {label && (
         <Text style={[
-          theme.typography.label,
+          theme.typography.regular.md,
           { color: theme.text.neutral.primary, flex: 1, marginRight: theme.space.md }
         ]}>
           {label}

package/package.json

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