cdslibrary 1.2.81 → 1.2.84

package/components/CDSCardFeedback.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+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";
@@ -14,7 +14,16 @@ export const CDSCardFeedback = ({
 }) => {
     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
@@ -40,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]
@@ -56,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 (

package/components/CDSCheckbox.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons"; // O la librería que uses
+import { useTheme } from "../context/CDSThemeContext";
+
+export const CDSCheckbox = ({ label, onValueChange, value }) => {
+    const { theme } = useTheme();
+
+    const handlePress = () => {
+        if (onValueChange) {
+            onValueChange(!value);
+        }
+    };
+
+    return (
+        <TouchableOpacity
+            activeOpacity={0.7}
+            onPress={handlePress}
+            style={styles.container}
+        >
+            {/* Caja del Checkbox */}
+
+            {/* Label */}
+            {label && (
+                <Text style={[
+                    theme.typography.regular.md, // O el que prefieras
+                    {
+                        color: theme.text.neutral.primary,
+                        flex: 1,
+                        marginLeft: theme.space.sm
+                    }
+                ]}>
+                    {label}
+                </Text>
+            )}
+            <View style={[
+                styles.checkboxBase,
+                {
+                    borderColor: value ? theme.surface.special.progress : theme.outline.tertiary,
+                    backgroundColor: value ? theme.surface.special.progress : 'transparent',
+                    borderRadius: theme.radius.xs || 4, // Un poco menos redondo que el switch
+                }
+            ]}>
+                {value && (
+                    <MaterialIcons
+                        name="check"
+                        size={18}
+                        color={theme.text.neutral.onPrimary || '#FFFFFF'}
+                    />
+                )}
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        width: '100%',
+        minHeight: 40,
+        paddingVertical: 4,
+    },
+    checkboxBase: {
+        width: 24,
+        height: 24,
+        borderWidth: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

package/index.js

@@ -24,5 +24,7 @@ export {CDSAccordion} from './components/CDSAccordion';
 export {CDSSnackBar} from './components/CDSSnackBar';
 export {CDSImageButton} from './components/CDSImageButton'
 export {CDSImageButtonGroup} from './components/CDSImageButtonGroup'
+export {CDSCheckbox} from './components/CDSCheckbox';
+
 
 export {CDSThemeProvider, useTheme} from './context/CDSThemeContext';

package/package.json

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