cdslibrary 1.2.80 → 1.2.82

package/components/CDSCardFeedback.jsx

@@ -1,19 +1,29 @@
-import React, { useState, useRef } from "react";
-import { View, Text, StyleSheet, TouchableOpacity, Platform, Animated } from "react-native";
+import React, { useState, useRef, useEffect } from "react";
+import { View, Text, StyleSheet, TouchableOpacity,  Animated } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 
 export const CDSCardFeedback = ({
     style,
     title,
-    description,
+    message,
     secondAction,
     onPressSecondAction,
-    onClose 
+    onClose,
+    onCloseLabel = 'Cerrar'
 }) => {
     const { theme } = useTheme();
     const [isVisible, setIsVisible] = useState(true);
-    const fadeAnim = useRef(new Animated.Value(1)).current;
+
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 400, // Un poco más lento que la salida se siente mejor
+            useNativeDriver: false,
+        }).start();
+    }, []);
 
     const handleClose = () => {
         // IMPORTANTE: useNativeDriver debe ser false para animar maxHeight y padding
@@ -39,14 +49,12 @@ export const CDSCardFeedback = ({
     
     const currentStyle = feedbackStyles[style] || feedbackStyles.info;
 
-    // Interpolamos todos los valores físicos para que colapsen a 0
-    const animatedLayout = {
+const animatedLayout = {
+        opacity: fadeAnim,
         maxHeight: fadeAnim.interpolate({
             inputRange: [0, 1],
-            outputRange: [0, 600] // Suficiente para el contenido
+            outputRange: [0, 600]
         }),
-        opacity: fadeAnim,
-        // Animamos el padding y el margen para que no queden espacios vacíos al cerrar
         paddingVertical: fadeAnim.interpolate({
             inputRange: [0, 1],
             outputRange: [0, theme.space.md]
@@ -55,8 +63,13 @@ export const CDSCardFeedback = ({
             inputRange: [0, 1],
             outputRange: [0, theme.space.sm]
         }),
-        borderWidth: 1,
-
+        // También animamos la escala para un efecto más premium
+        transform: [{
+            scale: fadeAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.95, 1]
+            })
+        }]
     };
 
     return (
@@ -85,9 +98,9 @@ export const CDSCardFeedback = ({
                 </View>
             )}
             
-            {description && (
-                <Text style={[styles.description, theme.typography.regular.md, { color: currentStyle.text }]}>
-                    {description}
+            {message && (
+                <Text style={[styles.message, theme.typography.regular.md, { color: currentStyle.text }]}>
+                    {message}
                 </Text>
             )}
 
@@ -101,7 +114,7 @@ export const CDSCardFeedback = ({
                 )}
                 <TouchableOpacity onPress={handleClose}>
                     <Text style={[theme.typography.bold.sm, { color: currentStyle.text }]}>
-                        {'Cerrar'}
+                        {onCloseLabel}
                     </Text>
                 </TouchableOpacity>
             </View>
@@ -118,7 +131,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
     },
-    description: {},
+    message: {},
     actionsContainer: {
         flexDirection: 'row',
         width: '100%',

package/components/CDSSwitch.jsx

@@ -6,7 +6,7 @@ export const CDSSwitch = ({ label, onValueChange, value }) => {
   const { theme } = useTheme();
 
   return (
-    <View style={[styles.container, { marginVertical: theme.space.sm }]}>
+    <View style={[styles.container, { }]}>
       {label && (
         <Text style={[
           theme.typography.label,

package/package.json

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