cdslibrary 1.2.41 → 1.2.43

package/components/CDSAccordion.jsx

@@ -49,7 +49,7 @@ export const CDSAccordion = ({ title, description, children, defaultExpanded = f
             styles.container,
             {
                 backgroundColor: theme.surface.neutral.primary,
-                borderRadius: theme.radius.lg,
+                borderRadius: theme.radius.md,
                 borderColor: theme.outline.neutral.primary,
                 borderWidth: 1
             }
@@ -59,11 +59,11 @@ export const CDSAccordion = ({ title, description, children, defaultExpanded = f
                 style={[
                     styles.header,
                     {
-                        borderTopRightRadius: theme.radius.lg,
-                        borderTopLeftRadius: theme.radius.lg,
+                        borderTopRightRadius: theme.radius.md,
+                        borderTopLeftRadius: theme.radius.md,
                         // Si no está expandido, redondeamos también abajo
-                        borderBottomRightRadius: expanded ? 0 : theme.radius.lg,
-                        borderBottomLeftRadius: expanded ? 0 : theme.radius.lg,
+                        borderBottomRightRadius: expanded ? 0 : theme.radius.md,
+                        borderBottomLeftRadius: expanded ? 0 : theme.radius.md,
                     },
                     expanded && {
                         backgroundColor: theme.surface.brand.primary,

package/components/CDSInput.jsx

@@ -1,29 +1,64 @@
-import React, { useState } from "react";
-import { View, Text, TextInput, StyleSheet, Platform } from "react-native"; // Añadido Platform
+import React, { useState, useEffect, useRef } from "react";
+import { View, Text, TextInput, StyleSheet, Platform } from "react-native";
+import Animated, { 
+  useAnimatedStyle, 
+  useSharedValue, 
+  withSequence, 
+  withTiming, 
+  interpolateColor 
+} from "react-native-reanimated";
 import { useTheme } from "../context/CDSThemeContext";
 
-// Agregamos 'value' y 'onChangeText' a las props para que sea un "Controlled Component"
-export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeText }) => {
+export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeText, animationTrigger }) => {
   const { theme } = useTheme();
   const [isFocused, setIsFocused] = useState(false);
+  
+  // Valor animado para el "flash" (0 a 1)
+  const flashValue = useSharedValue(0);
+  // Ref para detectar si el cambio vino del teclado o del código
+  const isInternalChange = useRef(false);
+
+  useEffect(() => {
+    if (!isInternalChange.current) {
+      flashValue.value = withSequence(
+        withTiming(1, { duration: 200 }),
+        withTiming(0, { duration: 600 })
+      );
+    }
+    isInternalChange.current = false;
+  }, [value, animationTrigger]);
 
   const handleTextChange = (inputText) => {
+    isInternalChange.current = true; // Marcamos que el cambio es del usuario
+    
     if (keyboard === "numeric" || keyboard === "decimal-pad") {
-      let cleaned = inputText.replace(',', '.');
-      cleaned = cleaned.replace(/[^0-9.]/g, "");
-
+      let cleaned = inputText.replace(',', '.').replace(/[^0-9.]/g, "");
       const parts = cleaned.split('.');
-      if (parts.length > 2) {
-        cleaned = parts[0] + '.' + parts.slice(1).join('');
-      }
-
-      // Enviamos el valor limpio al padre (index.js)
+      if (parts.length > 2) cleaned = parts[0] + '.' + parts.slice(1).join('');
       onChangeText && onChangeText(cleaned);
     } else {
       onChangeText && onChangeText(inputText);
     }
   };
 
+  // Estilo animado para el borde y el fondo
+  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// Color del "brillo" (usamos el color de focus)
+      ]
+    );
+
+    return {
+      borderColor: borderColor,
+      transform: [{ scale: 1 + flashValue.value * 0.02 }], // Pequeño pulso
+      borderWidth: 1 + flashValue.value * 1,
+    };
+  });
+
   return (
     <View style={[styles.container, { gap: theme.space.sm }]}>
       {label && (
@@ -32,49 +67,51 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
         </Text>
       )}
 
-      <TextInput
-        pointerEvents={type === 'readOnly' && 'none'}
-        style={[
-          styles.textBox,
-          theme.typography.inputText.value,
-          {
+      <Animated.View style={[
+        styles.wrapper, 
+        animatedBoxStyle,
+        {
             backgroundColor: type === 'readOnly' ? theme.surface.action.disabled : theme.surface.neutral.primary,
-            borderColor: isFocused
-              ? theme.outline.neutral.focus
-              : value ? theme.outline.neutral.tertiaryVariant // Cambiado 'text' por 'value'
-                : theme.outline.neutral.primary,
             borderRadius: theme.radius.sm,
-            paddingHorizontal: theme.space.sm,
-            color: theme.text.neutral.primary,
-            outlineStyle: 'none',
-
-          },
-        ]}
-        placeholder={placeholder}
-        placeholderTextColor={theme.text.neutral.placeholder} // Usar el color directo del tema es más seguro
-        keyboardType={keyboard === "numeric" ? (Platform.OS === 'ios' ? 'decimal-pad' : 'numeric') : keyboard}
-        onChangeText={handleTextChange}
-        value={value} // Ahora recibe el valor del simulador
-        secureTextEntry={type === "password"}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
-        underlineColorAndroid="transparent"
-      />
+        }
+      ]}>
+        <TextInput
+          pointerEvents={type === 'readOnly' ? 'none' : 'auto'}
+          style={[
+            styles.textBox,
+            theme.typography.inputText.value,
+            {
+              paddingHorizontal: theme.space.sm,
+              color: theme.text.neutral.primary,
+              // @ts-ignore
+              outlineStyle: 'none',
+            },
+          ]}
+          placeholder={placeholder}
+          placeholderTextColor={theme.text.neutral.placeholder}
+          keyboardType={keyboard === "numeric" ? (Platform.OS === 'ios' ? 'decimal-pad' : 'numeric') : keyboard}
+          onChangeText={handleTextChange}
+          value={value}
+          editable={type !== 'readOnly'}
+          secureTextEntry={type === "password"}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          underlineColorAndroid="transparent"
+        />
+      </Animated.View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: { width: "100%" },
-  textBox: {
-    borderWidth: 1,
+  wrapper: {
     height: 48,
-    // transitionProperty solo funciona en Web, en móvil se ignora sin error
-    ...Platform.select({
-      web: {
-        transitionProperty: 'border-color',
-        transitionDuration: '0.2s',
-      }
-    })
+    borderWidth: 1,
+    justifyContent: 'center',
+  },
+  textBox: {
+    flex: 1,
+    height: '100%',
   },
 });

package/components/CDSSnackBar.jsx

@@ -1,60 +1,99 @@
 import React, { useEffect } from "react";
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
-import Animated, { SlideInDown, SlideOutDown } from "react-native-reanimated";
+import { StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";
+import Animated, { 
+    useSharedValue, 
+    useAnimatedStyle, 
+    withSpring, 
+    withTiming, 
+    runOnJS 
+} from "react-native-reanimated";
+import { GestureDetector, Gesture, } from "react-native-gesture-handler";
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSSnackBar = ({ message, visible, onDismiss, hasClose }) => {
+const { height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+export const CDSSnackBar = ({ message, visible, onDismiss, action }) => {
     const { theme } = useTheme();
+    const translateY = useSharedValue(100); // Empezamos fuera de pantalla
+
+    // Sincronizar visibilidad con animación
+    useEffect(() => {
+        if (visible) {
+            translateY.value = withSpring(0, { damping: 15 });
+        } else {
+            translateY.value = withTiming(150);
+        }
+    }, [visible]);
 
+    // Lógica de auto-ocultado
     useEffect(() => {
         let timer;
         if (visible) {
-            // Configuramos el temporizador a 5000ms (5 segundos)
             timer = setTimeout(() => {
                 if (onDismiss) onDismiss();
-            }, 5000);
+            }, 4000);
         }
-
-        // Limpieza: si el componente se desmonta o el usuario lo cierra antes, 
-        // cancelamos el timer para evitar fugas de memoria.
         return () => clearTimeout(timer);
     }, [visible, onDismiss]);
 
-    // Reanimated necesita que el componente se desmonte para ejecutar 'exiting'
-    if (!visible) return null;
+    // Configuración del Gesto (Pan Gesture)
+    const gesture = Gesture.Pan()
+        .onUpdate((event) => {
+            // Solo permitimos arrastrar hacia abajo (valores positivos de Y)
+            if (event.translationY > 0) {
+                translateY.value = event.translationY;
+            }
+        })
+        .onEnd((event) => {
+            // Si se arrastró más de 50px o la velocidad es alta, cerramos
+            if (event.translationY > 50 || event.velocityY > 500) {
+                translateY.value = withTiming(150, {}, () => {
+                    if (onDismiss) runOnJS(onDismiss)();
+                });
+            } else {
+                // Si no, regresa a su posición original
+                translateY.value = withSpring(0);
+            }
+        });
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+    }));
+
+    if (!visible && translateY.value >= 100) return null;
 
     return (
-        <Animated.View
-            entering={SlideInDown.duration(400)}
-            exiting={SlideOutDown.duration(300)}
-            style={[
-                styles.snackbar,
-                {
-                    backgroundColor: theme.surface.special.display,
-                    bottom: theme.space.lg,
-                    padding: theme.space.md,
-                    borderRadius: theme.radius.sm,
-                }
-            ]}
-        >
-            <Text style={[
-                theme.typography.regular.sm, 
-                { color: theme.text.neutral.contrast, flex: 1 }
-            ]}>
-                {message}
-            </Text>
+        <GestureDetector gesture={gesture}>
+            <Animated.View
+                style={[
+                    styles.snackbar,
+                    animatedStyle,
+                    {
+                        backgroundColor: theme.surface.special.snackbar,
+                        bottom: theme.space.lg,
+                        padding: theme.space.md,
+                        borderRadius: theme.radius.sm,
+                    }
+                ]}
+            >
+                <Text style={[
+                    theme.typography.regular.sm, 
+                    { color: theme.text.neutral.contrast, flex: 1 }
+                ]}>
+                    {message}
+                </Text>
 
-            {hasClose && (
-                <TouchableOpacity onPress={onDismiss} style={styles.actionButton}>
-                    <Text style={{
-                        color: theme.colors?.brand?.secondary || theme.text.neutral.contrast,
-                        fontWeight: '700'
-                    }}>
-                        CERRAR
-                    </Text>
-                </TouchableOpacity>
-            )}
-        </Animated.View>
+                {action && (
+                    <TouchableOpacity onPress={onDismiss} style={styles.actionButton}>
+                        <Text style={[theme.typography.label, {
+                            color: theme.text.neutral.contrast,
+                        }]}>
+                            {action}
+                        </Text>
+                    </TouchableOpacity>
+                )}
+            </Animated.View>
+        </GestureDetector>
     );
 };
 
@@ -67,11 +106,6 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        elevation: 5,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
         zIndex: 1000,
     },
     actionButton: {

package/index.js

@@ -1,8 +1,9 @@
 
-//  import { registerRootComponent } from 'expo';
+import 'react-native-gesture-handler';
+ import { registerRootComponent } from 'expo';
 
-// import App from './App';
-// registerRootComponent(App);
+import App from './App';
+registerRootComponent(App);
 
 export {CDSBottomSheet} from './components/CDSBottomSheet';
 export {CDSButton} from './components/CDSButton';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cdslibrary",
   "license": "0BSD",
-  "version": "1.2.41",
+  "version": "1.2.43",
   "main": "index.js",
   "author": "Nat Viramontes",
   "description": "A library of components for the CDS project",
@@ -25,7 +25,7 @@
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
-    "react-native-gesture-handler": "*",
+    "react-native-gesture-handler": "^2.30.0",
     "react-native-reanimated": ">=3.0.0",
     "react-native-safe-area-context": "*",
     "react-native-screens": "*"

package/tokens/CDSsemanticColors.js

@@ -53,6 +53,7 @@ export const CDSsemanticColors = {
       special: {
         overlay: CDSprimitiveColors.overlay.light,
         scroll: CDSprimitiveColors.neutral[400],
+        snackbar: CDSprimitiveColors.neutral[700],
         tooltip: CDSprimitiveColors.neutral[500],
         progress: CDSprimitiveColors.brand[600],
         progressbarBg: CDSprimitiveColors.neutral[400],
@@ -164,6 +165,7 @@ export const CDSsemanticColors = {
       special: {
         overlay: CDSprimitiveColors.overlay.dark,
         scroll: CDSprimitiveColors.neutral[400],
+        snackbar: CDSprimitiveColors.neutral[400],
         tooltip: CDSprimitiveColors.neutral[500],
         progress: CDSprimitiveColors.brand[600],
         progressbarBg: CDSprimitiveColors.neutral[400],