cdslibrary 1.2.84 → 1.2.85

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

@@ -29,7 +29,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
   const handleTextChange = (inputText) => {
     isInternalChange.current = true;
 
-    if (keyboard === "numeric" || keyboard === "decimal-pad") {
+    if (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('');
@@ -57,6 +57,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
     };
   });
 
+
   return (
     <View style={styles.container}>
       {label && (
@@ -91,7 +92,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
           ]}
           placeholder={placeholder}
           placeholderTextColor={theme.text.neutral.placeholder}
-          keyboardType={keyboard === "numeric" ? (Platform.OS === 'ios' ? 'decimal-pad' : 'numeric') : keyboard}
+          keyboardType={keyboard}
           onChangeText={handleTextChange}
           value={value}
           editable={type !== 'readOnly'}

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.85",
   "main": "index.js",
   "author": "Nat Viramontes",
   "description": "A library of components for the CDS project",