cdslibrary 1.2.92 → 1.2.94

package/components/CDSInput.jsx

@@ -12,7 +12,7 @@ import { useTheme } from "../context/CDSThemeContext";
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
-export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeText, animationTrigger, returnKeyType, onFocus }) => {
+export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeText, animationTrigger, onBlur, onFocus }) => {
   const { theme } = useTheme();
   const [isFocused, setIsFocused] = useState(false);
 
@@ -54,13 +54,13 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
   useEffect(() => {
     // ELIMINAMOS la restricción de !isReadOnly para que se anime siempre
     if (!isInternalChange.current && value) {
-      flashValue.value = withDelay(400, withSequence(
-        withTiming(1, { duration: 400 }),
+      flashValue.value = withDelay(300, withSequence(
+        withTiming(1, { duration: 300 }),
         withTiming(0, { duration: 600 })
       ));
 
       textHighlight.value = withSequence(
-        withTiming(1, { duration: 400 }),
+        withTiming(1, { duration: 300 }),
         withTiming(0, { duration: 600 })
       );
     }
@@ -79,8 +79,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
 
     return {
       borderColor,
-      borderWidth: 1 + (flashValue.value * 2),
-      transform: [{ scale: 1 + (flashValue.value * 0.02) }]
+      borderWidth: 1 + (flashValue.value * 3),
     };
   });
 
@@ -114,7 +113,8 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
         animatedBoxStyle,
         {
           backgroundColor: isReadOnly ? theme.surface.neutral.primaryVariant : theme.surface.neutral.primary,
-          borderRadius: theme.radius?.sm || 8,
+          borderRadius: theme.radius?.sm,
+          pointerEvents: isReadOnly ? 'none' : 'auto',
         }
       ]}>
         <AnimatedTextInput
@@ -136,7 +136,10 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
           editable={!isReadOnly}
           secureTextEntry={type === "password"}
           onFocus={() => { setIsFocused(true); onFocus && onFocus(); }}
-          onBlur={() => setIsFocused(false)}
+          onBlur={() => {
+            setIsFocused(false);
+            onBlur && onBlur(); 
+          }}
           underlineColorAndroid="transparent"
         />
       </Animated.View>
@@ -145,14 +148,17 @@ 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',
     alignItems: 'center',
-    borderWidth: 1,
     overflow: 'hidden'
+
   },
-  textBox: { flex: 1, height: '100%', width: '100%' },
+  textBox: { flex: 1, height: '100%', width: '100%', },
 });

package/components/CDSModal.jsx

@@ -31,7 +31,7 @@ export const CDSModal = ({
             onRequestClose={onClose}
         >
             <Pressable
-                style={styles.modalOverlay}
+                style={[styles.modalOverlay, {backgroundColor: theme.surface.special.overlay, padding: theme.space.lg}]}
                 onPress={onClose}
             >
                 <Pressable style={styles.modalContent} onPress={(e) => e.stopPropagation()}>
@@ -40,20 +40,21 @@ export const CDSModal = ({
                         {
                             backgroundColor: theme.surface.neutral.primary,
                             borderRadius: theme.radius.md,
+                            boxShadow: theme.shadows.lg
                         }
                     ]}>
                         {/* Header */}
-                        <View style={[styles.modalHeader, { borderBottomColor: theme.outline.neutral.primary }]}>
+                        <View style={[styles.modalHeader, { borderBottomColor: theme.outline.neutral.primary, paddingVertical: theme.space.md, paddingHorizontal: theme.space.sm }]}>
                             <Text style={[theme.typography.semiBold.md, { color: theme.text.neutral.primary, flex: 1 }]}>
                                 {title}
                             </Text>
-                            <TouchableOpacity onPress={onClose} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+                            <TouchableOpacity onPress={onClose} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}>
                                 <MaterialIcons name="close" size={24} color={theme.text.neutral.primary} />
                             </TouchableOpacity>
                         </View>
 
                         {/* Body */}
-                        <ScrollView style={styles.body} bounces={false}>
+                        <ScrollView style={[styles.body, {padding: theme.space.sm}]} bounces={false}>
                             {message && (
                                 <Text style={[
                                     theme.typography.regular.md,
@@ -67,7 +68,7 @@ export const CDSModal = ({
 
                         {/* Footer - Solo se muestra si es interactive */}
                         {type === 'interactive' && (
-                            <View style={[styles.footer, { gap: theme.space.sm }]}>
+                            <View style={[styles.footer, { gap: theme.space.sm, padding: theme.space.sm }]}>
                                 {onPressSecondary && (
                                     <CDSButton
                                         label={labelSecondary}
@@ -92,10 +93,8 @@ export const CDSModal = ({
 const styles = StyleSheet.create({
     modalOverlay: {
         flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.6)',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: 24
     },
     modalContent: {
         width: '100%',
@@ -104,37 +103,19 @@ const styles = StyleSheet.create({
     optionsContainer: {
         width: '100%',
         overflow: 'hidden',
-        elevation: 5,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 4.65,
     },
     modalHeader: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        padding: 16,
         borderBottomWidth: 1,
     },
     body: {
-        padding: 16,
         maxHeight: 400,
     },
     footer: {
         flexDirection: 'row',
         justifyContent: 'flex-end',
-        padding: 16,
         alignItems: 'center'
     },
-    primaryBtn: {
-        paddingVertical: 10,
-        paddingHorizontal: 16,
-        minWidth: 100,
-        alignItems: 'center'
-    },
-    secondaryBtn: {
-        paddingVertical: 10,
-        paddingHorizontal: 16,
-    }
 });

package/components/CDSSelect.jsx

@@ -14,7 +14,7 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null,
     );
 
     // Altura fija por cada fila (puedes ajustarla según tu diseño)
-    const ITEM_HEIGHT = 52; 
+    const ITEM_HEIGHT = 48; 
     // Mostramos 7.5 opciones para que la última se vea cortada y sugiera scroll
     const MAX_VISIBLE_OPTIONS = 7.5;
     const MAX_HEIGHT = ITEM_HEIGHT * MAX_VISIBLE_OPTIONS;
@@ -66,20 +66,21 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null,
                 onRequestClose={() => setModalVisible(false)}
             >
                 <Pressable
-                    style={styles.modalOverlay}
+                    style={[styles.modalOverlay, {backgroundColor: theme.surface.special.overlay, padding: theme.space.lg}]}
                     onPress={() => setModalVisible(false)}
                 >
                     <SafeAreaView style={styles.modalContent}>
                         <View style={[
                             styles.optionsContainer, 
                             { 
+                                boxShadow: theme.shadows.lg,
                                 backgroundColor: theme.surface.neutral.primary, 
                                 borderRadius: theme.radius.md,
-                                maxHeight: MAX_HEIGHT + 60 // +60 para compensar el header del modal
+                                maxHeight: MAX_HEIGHT + 54 
                             }
                         ]}>
                             {/* Header del Modal */}
-                            <View style={[styles.modalHeader, { borderBottomColor: theme.outline.neutral.primary }]}>
+                            <View style={[styles.modalHeader, { borderBottomColor: theme.outline.neutral.primary, padding: theme.space.sm }]}>
                                 <Text style={theme.typography.semiBold.md}>{'Selecciona una opción'}</Text>
                                 <TouchableOpacity onPress={() => setModalVisible(false)} hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}>
                                     <MaterialIcons name="close" size={24} color={theme.text.neutral.primary} />
@@ -100,7 +101,9 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null,
                                             styles.optionItem,
                                             { 
                                                 height: ITEM_HEIGHT,
-                                                backgroundColor: selectedItem?.value === item.value ? theme.surface.neutral.secondary : 'transparent' 
+                                                backgroundColor: selectedItem?.value === item.value ? theme.surface.neutral.secondary : 'transparent',
+                                                paddingHorizontal: theme.space.sm
+                                                
                                             }
                                         ]}
                                     >
@@ -126,10 +129,8 @@ const styles = StyleSheet.create({
     inputContainer: { width: '100%', height: 48, borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
     modalOverlay: {
         flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.6)', // Un poco más oscuro para mejor enfoque
         justifyContent: 'center',
         alignItems: 'center',
-        padding: 24
     },
     modalContent: {
         width: '100%',
@@ -138,21 +139,14 @@ const styles = StyleSheet.create({
     optionsContainer: {
         width: '100%',
         overflow: 'hidden',
-        elevation: 5,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 4.65,
     },
     modalHeader: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        padding: 16,
         borderBottomWidth: 1,
     },
     optionItem: {
-        paddingHorizontal: 16,
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',

package/package.json

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