cdslibrary 1.2.49 → 1.2.51

package/components/CDSBottomSheet.jsx

@@ -1,10 +1,22 @@
-import React, { useEffect, useState, forwardRef } from "react";
-import { View, Text, Animated, Dimensions, StyleSheet, Pressable, Platform, ScrollView } from "react-native";
+import React, { useEffect, forwardRef, useCallback } from "react";
+import { View, Text, Dimensions, StyleSheet, Pressable, Platform, ScrollView } from "react-native";
 import { CDSButton } from "./CDSButton";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 import { LinearGradient } from 'expo-linear-gradient';
 
+// --- NUEVO: Imports de Reanimated y Gesture Handler ---
+import Animated, { 
+  useSharedValue, 
+  useAnimatedStyle, 
+  withSpring, 
+  withTiming, 
+  runOnJS,
+  interpolate,
+  Extrapolation
+} from "react-native-reanimated";
+import { GestureDetector, Gesture } from "react-native-gesture-handler";
+
 const { height, width } = Dimensions.get("window");
 
 const bottomSheetRender = ({
@@ -20,145 +32,180 @@ const bottomSheetRender = ({
   onFinish,
 }, ref) => {
   const { theme } = useTheme();
-  const isMobile = theme.isMobile
-  const [modalVisible, setModalVisible] = useState(isVisible);
-  const [modalOpacity] = useState(new Animated.Value(0));
-  const [slidePosition] = useState(new Animated.Value(isMobile ? height : width));
-
-  // Función unificada para cerrar con animación
-  const handleClose = () => {
-    const targetValue = isMobile ? height : width;
-
-    Animated.parallel([
-      Animated.timing(modalOpacity, {
-        toValue: 0,
-        duration: 350,
-        useNativeDriver: false,
-      }),
-      Animated.timing(slidePosition, {
-        toValue: targetValue,
-        duration: 350,
-        useNativeDriver: false,
-      }),
-    ]).start(() => {
-      // Importante: onFinish se ejecuta SOLO cuando la animación termina
-      if (onFinish) onFinish();
-      if (primaryButtonOnPress) primaryButtonOnPress();
-      setModalVisible(false);
+  const isMobile = theme.isMobile;
+
+  // --- 1. Estado de Animación (Reanimated SharedValues) ---
+  const startPos = isMobile ? height : width; // Abajo en mobile, Derecha en desktop
+  const translation = useSharedValue(startPos);
+  const opacity = useSharedValue(0);
+
+  // --- 2. Funciones de Cierre (Wrapper para JS Thread) ---
+  const triggerOnFinish = useCallback(() => {
+    if (onFinish) onFinish();
+    if (primaryButtonOnPress) primaryButtonOnPress();
+  }, [onFinish, primaryButtonOnPress]);
+
+  const handleClose = useCallback(() => {
+    "worklet"; // Marca para ejecutar en UI thread
+    translation.value = withTiming(startPos, { duration: 300 }, (finished) => {
+      if (finished) {
+        runOnJS(triggerOnFinish)();
+      }
     });
-  };
+    opacity.value = withTiming(0, { duration: 300 });
+  }, [startPos, triggerOnFinish]);
 
+  // --- 3. Lógica del Gesto (Solo Mobile) ---
+  const pan = Gesture.Pan()
+    .enabled(isMobile) // Desactivamos gesto en Desktop
+    .onUpdate((event) => {
+      // Solo permitir arrastrar hacia abajo (valores positivos)
+      if (event.translationY > 0) {
+        translation.value = event.translationY;
+      }
+    })
+    .onEnd((event) => {
+      // Si arrastra más de 100px o hace un "flick" rápido -> CERRAR
+      if (event.translationY > 100 || event.velocityY > 600) {
+        handleClose();
+      } else {
+        // Si no, rebota a posición original
+        translation.value = withSpring(0, { damping: 15, stiffness: 100 });
+      }
+    });
+
+  // --- 4. Efectos de Entrada/Salida ---
   useEffect(() => {
-    if (modalVisible) {
-      Animated.parallel([
-        Animated.timing(modalOpacity, {
-          toValue: 1,
-          duration: 400,
-          useNativeDriver: false,
-        }),
-        Animated.timing(slidePosition, {
-          toValue: 0,
-          duration: 400,
-          useNativeDriver: false,
-        }),
-      ]).start();
+    if (isVisible) {
+      translation.value = withSpring(0, { damping: 15, stiffness: 90 });
+      opacity.value = withTiming(1, { duration: 300 });
+    } else {
+      // Si se controla false desde fuera
+      translation.value = withTiming(startPos, { duration: 300 });
+      opacity.value = withTiming(0, { duration: 300 });
     }
-  }, [modalVisible]);
+  }, [isVisible, isMobile]);
+
+  // --- 5. Estilos Animados ---
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+      transform: [
+        isMobile 
+          ? { translateY: translation.value } 
+          : { translateX: translation.value }
+      ],
+    };
+  });
+
+  const backdropStyle = useAnimatedStyle(() => {
+    // Interpolamos para que el fondo se aclare mientras arrastras
+    const currentY = translation.value;
+    const opacityVal = interpolate(currentY, [0, height], [1, 0], Extrapolation.CLAMP);
+    return {
+      opacity: opacityVal,
+    };
+  });
 
   return (
     <>
       <Animated.View
         style={[
-          isMobile ? styles.container.typeBottomSheet : styles.container.typeDrawer,
-          {
-            opacity: modalOpacity,
-            transform: [
-              isMobile ? { translateY: slidePosition } : { translateX: slidePosition }
-            ],
-            backgroundColor: theme.surface.neutral.primary,
-            paddingHorizontal: theme.space.md,
-            paddingTop: theme.space.xl,
-            gap: theme.space.md,
-            ...(isMobile ? {
-              borderTopLeftRadius: theme.radius.lg,
-              borderTopRightRadius: theme.radius.lg,
-            } : {
-              borderBottomLeftRadius: theme.radius.lg,
-              borderTopLeftRadius: theme.radius.lg,
-              paddingBottom: theme.space.md,
-            })
-          }
+          styles.overlay,
+          { backgroundColor: theme.surface.special.overlay },
+          backdropStyle // Aplicamos estilo animado aquí
         ]}
       >
-        {hasClose && (
-          <MaterialIcons
-            name="close"
-            size={theme.typography.icon.lg}
-            color={theme.text.neutral.primary}
-            onPress={handleClose}
-            style={{ position: "absolute", right: theme.space.md, top: theme.space.md, zIndex: 10 }}
-          />
-        )}
-
-        {!!title && <Text style={theme.typography.bold.lg}>{title}</Text>}
-
-        <View style={styles.scrollWrapper}>
-          <ScrollView
-            ref={ref}
-            style={styles.scrollArea}
-            contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.xl }]}
-            showsVerticalScrollIndicator={true}
-            bounces={true}
-            alwaysBounceVertical={false}
-            scrollEventThrottle={16}
-          >
-            {!!description && (
-              <Text style={[theme.typography.regular.md, { marginBottom: theme.space.md }]}>
-                {description}
-              </Text>
-            )}
-            {customSlot}
-          </ScrollView>
-          <LinearGradient
-            colors={['transparent', theme.surface.neutral.primary]}
-            style={styles.fadeGradient}
-            pointerEvents="none"
-          />
-        </View>
-
-        {type !== "informative" && (
-          <View style={isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer}>
-            <CDSButton
-              label={primaryButtonLabel}
-              onPress={() => {
-                handleClose();
-              }}
+        <Pressable onPress={() => runOnJS(handleClose)()} style={{ flex: 1 }} />
+      </Animated.View>
+
+      <GestureDetector gesture={pan}>
+        <Animated.View
+          style={[
+            isMobile ? styles.container.typeBottomSheet : styles.container.typeDrawer,
+            animatedStyle, // Inyectamos la animación de Reanimated
+            {
+              backgroundColor: theme.surface.neutral.primary,
+              // Mantenemos tu lógica exacta de padding y gaps
+              paddingTop: (hasClose ? theme.space['2xl'] : theme.space.md),
+              gap: theme.space.md,
+              ...(isMobile ? {
+                borderTopLeftRadius: theme.radius.lg,
+                borderTopRightRadius: theme.radius.lg,
+              } : {
+                borderBottomLeftRadius: theme.radius.lg,
+                borderTopLeftRadius: theme.radius.lg,
+                paddingBottom: theme.space.md,
+              })
+            }
+          ]}
+        >
+          {/* --- NUEVO: La línea visual (Handle) --- 
+              Se agrega position absolute para NO afectar tus paddings/espacios originales */}
+          {isMobile && (
+            <View style={styles.handleBarContainer}>
+               <View style={[styles.handleBarLine, { backgroundColor: theme.outline.neutral.tertiary }]} />
+            </View>
+          )}
+
+          {hasClose && (
+            <MaterialIcons
+              name="close"
+              size={theme.typography.icon.lg}
+              color={theme.text.neutral.primary}
+              // Usamos runOnJS porque onPress espera una función normal
+              onPress={() => runOnJS(handleClose)()} 
+              style={{ position: "absolute", right: theme.space.md, top: theme.space.md, zIndex: 10 }}
             />
-            <CDSButton
-              label={secondaryButtonLabel}
-              type="ghost"
-              onPress={handleClose}
+          )}
+
+          {!!title && <Text style={[theme.typography.h3, {marginHorizontal: theme.space.md}]}>{title}</Text>}
+
+          <View style={styles.scrollWrapper}>
+            <ScrollView
+              ref={ref}
+              style={styles.scrollArea}
+              contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.sm }]}
+              showsVerticalScrollIndicator={true}
+              bounces={true}
+              alwaysBounceVertical={false}
+              scrollEventThrottle={16}
+            >
+              {!!description && (
+                <Text style={[theme.typography.regular.md, { marginBottom: theme.space.md }]}>
+                  {description}
+                </Text>
+              )}
+              {customSlot}
+            </ScrollView>
+            <LinearGradient
+              colors={['transparent', theme.surface.neutral.primary]}
+              style={styles.fadeGradient}
+              pointerEvents="none"
             />
           </View>
-        )}
-      </Animated.View>
 
-      <Animated.View
-        style={[
-          styles.overlay,
-          {
-            opacity: modalOpacity,
-            backgroundColor: theme.surface.special.overlay,
-          },
-        ]}
-      >
-        <Pressable onPress={handleClose} style={{ flex: 1 }} />
-      </Animated.View>
+          {type !== "informative" && (
+            <View style={[isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer, {paddingHorizontal: theme.space.md, paddingVertical: theme.space.lg}]}>
+              <CDSButton
+                label={primaryButtonLabel}
+                onPress={() => runOnJS(handleClose)()}
+              />
+              {secondaryButtonLabel && (<CDSButton
+                label={secondaryButtonLabel}
+                type="ghost"
+                onPress={() => runOnJS(handleClose)()}
+              />)}
+            </View>
+          )}
+        </Animated.View>
+      </GestureDetector>
     </>
   );
 };
 
 const styles = StyleSheet.create({
+  // --- Estilos originales intactos ---
   overlay: {
     position: "absolute",
     top: 0,
@@ -214,7 +261,6 @@ const styles = StyleSheet.create({
       flexDirection: "column",
       width: "100%",
       gap: 8,
-      paddingBottom: 20,
     },
     typeDrawer: {
       flexDirection: "row-reverse",
@@ -223,7 +269,20 @@ const styles = StyleSheet.create({
       marginTop: 'auto',
     },
   },
+  // --- NUEVOS ESTILOS PARA EL HANDLE ---
+  handleBarContainer: {
+    position: 'absolute',
+    top: 8, // Un poco de margen superior
+    width: '100%',
+    alignItems: 'center',
+    zIndex: 1, // Debajo del botón de cerrar
+  },
+  handleBarLine: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    opacity: 0.5,
+  }
 });
 
-
 export const CDSBottomSheet = forwardRef(bottomSheetRender);

package/components/CDSButton.jsx

@@ -1,9 +1,8 @@
-import React from "react";
-import { Text, StyleSheet, TouchableOpacity } from "react-native";
+import React, { useRef, useEffect } from "react";
+import { Text, StyleSheet, TouchableOpacity, Animated } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 
-
 export const CDSButton = ({
   label,
   type = "primary",
@@ -14,8 +13,36 @@ export const CDSButton = ({
   flexend,
 }) => {
   const { theme } = useTheme();
-  const isMobile = theme.isMobile
-  
+  const isMobile = theme.isMobile;
+
+  // 1. Referencia de animación
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  // 2. Disparar entrada al montar
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: false // Para manejar maxHeight y otros layouts
+    }).start();
+  }, []);
+
+  // 3. Estructura de animatedLayout unificada
+  const animatedLayout = {
+    opacity: animatedValue,
+    transform: [{
+      scale: animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.95, 1]
+      })
+    }],
+    // Permite que el botón aparezca empujando suavemente
+    maxHeight: animatedValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, (variant === "fill" || isMobile ? 48 : 56)]
+    }),
+  };
+
   const backgroundColor =
     type === "disabled"
       ? theme.surface.action.disabled
@@ -31,46 +58,62 @@ export const CDSButton = ({
         : theme.text.neutral.contrast;
 
   return (
-    <TouchableOpacity
-      onPress={type !== "disabled" ? onPress : null}
-      activeOpacity={0.7}
-      style={[
-        styles.container,
-        { flexGrow: (variant === "fill" || isMobile ? 1 : 0), maxHeight: (variant === "fill" || isMobile ? 48 : 56), alignSelf: (variant === "fill" || isMobile) ? "stretch" : "center", paddingHorizontal: type === "icon" ? theme.space.sm : theme.space.md, paddingVertical: theme.space.sm, backgroundColor, borderRadius: theme.radius.full, gap: theme.space.sm, },
-        flexend && { justifyContent: "flex-end", paddingHorizontal: 0 },
-        type === "secondary" && {
-          borderColor: theme.outline.action.primary,
-          borderWidth: 1,
-        },
-        type === 'link' && {
-          paddingHorizontal: 0,
-          paddingVertical: 0,
-          minWidth: 1,
-        }
-      ]}
-    >
-      {type !== "icon" && (
-        <Text
-          style={[
-            type === "link"
-              ? size === "small"
-                ? theme.typography.link.small
-                : theme.typography.link.regular
-              : theme.typography.buttonText,
-            { color: textColor },
-          ]}
-        >
-          {label}
-        </Text>
-      )}
-      {icon && (
-        <MaterialIcons
-          name={icon}
-          size={theme.typography.icon.sm}
-          color={textColor}
-        />
-      )}
-    </TouchableOpacity>
+    <Animated.View style={[
+      animatedLayout,
+      {
+        overflow: 'hidden',
+        alignSelf: (variant === "fill" || isMobile) ? "stretch" : "center",
+        flexGrow: (variant === "fill" || isMobile ? 1 : 0),
+      }
+    ]}>
+      <TouchableOpacity
+        onPress={type !== "disabled" ? onPress : null}
+        activeOpacity={0.7}
+        style={[
+          styles.container,
+          {
+            paddingHorizontal: type === "icon" ? theme.space.sm : theme.space.md,
+            paddingVertical: theme.space.sm,
+            backgroundColor,
+            borderRadius: theme.radius.full,
+            gap: theme.space.sm,
+            height: (variant === "fill" || isMobile ? 48 : 56), // Altura fija interna
+          },
+          flexend && { justifyContent: "flex-end", paddingHorizontal: 0 },
+          type === "secondary" && {
+            borderColor: theme.outline.action.primary,
+            borderWidth: 1,
+          },
+          type === 'link' && {
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+            minWidth: 1,
+          }
+        ]}
+      >
+        {type !== "icon" && (
+          <Text
+            style={[
+              type === "link"
+                ? size === "small"
+                  ? theme.typography.link.small
+                  : theme.typography.link.regular
+                : theme.typography.buttonText,
+              { color: textColor },
+            ]}
+          >
+            {label}
+          </Text>
+        )}
+        {icon && (
+          <MaterialIcons
+            name={icon}
+            size={theme.typography.icon.sm}
+            color={textColor}
+          />
+        )}
+      </TouchableOpacity>
+    </Animated.View>
   );
 };
 
@@ -80,5 +123,4 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-});
-
+});

package/components/CDSImageButton.jsx

@@ -8,7 +8,7 @@ import { useTheme } from "../context/CDSThemeContext";
 export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añadimos isActive
   const { theme } = useTheme();
 
-  console.log(theme.typography)
+
   return (
     <TouchableOpacity
     onPress={onPress}
@@ -19,11 +19,11 @@ export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añad
             ? theme.surface.neutral.primaryVariant // Color cuando está presionado
             : theme.surface.neutral.primary,
           gap: theme.space.sm,
-          padding: theme.space.md,
+          padding: theme.space.sm,
           // borderColor: isActive 
           //   ? theme.outline.neutral.primary // Borde de color de marca si está activo
           //   : theme.outline.neutral.primary,
-          borderRadius: theme.radius.lg,
+          borderRadius: theme.radius.md,
           // Si está activo, quitamos la sombra o usamos una más pequeña (md)
           ...(!isActive && theme.shadows.lg),
           // Si quieres que se vea "hundido", podrías bajar la escala
@@ -38,6 +38,7 @@ export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añad
           flexGrow: 1,
           width: "100%",
           height: 80,
+          borderRadius: theme.radius.sm,
         }}
       />
       <Text style={isActive ? theme.typography.semiBold.sm : theme.typography.regular.sm }>
@@ -55,7 +56,7 @@ mainContainer:{
     alignItems: 'center',
     flexGrow: 1,
     maxWidth: 160,
-    minWidth: 120,
+    minWidth: 96,
     height: 'auto'
 }
 

package/components/CDSImageButtonGroup.jsx

@@ -3,8 +3,9 @@ import { View, Animated, StyleSheet, ScrollView } from 'react-native';
 import { CDSImageButton } from './CDSImageButton';
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSImageButtonGroup = ({ array, onSelect }) => {
+export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
     const { theme } = useTheme();
+    const isMobile = theme.isMobile
     const [selectedId, setSelectedId] = useState(null);
     const animatedValue = useRef(new Animated.Value(0)).current;
 
@@ -31,10 +32,6 @@ export const CDSImageButtonGroup = ({ array, onSelect }) => {
             outputRange: [0, 250] 
         }),
         opacity: animatedValue,
-        marginTop: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, theme.space.md]
-        })
     };
 
     return (
@@ -45,14 +42,15 @@ export const CDSImageButtonGroup = ({ array, onSelect }) => {
             <ScrollView 
                 horizontal={true} 
                 showsHorizontalScrollIndicator={false}
-                // IMPORTANTE: overflow visible para que no corte sombras, 
-                // pero necesitamos que el ScrollView sepa su límite
                 style={styles.scrollView}
                 contentContainerStyle={[
                     styles.scrollContent, 
                     { 
+                        justifyContent: (isCentered ? 'center' : 'flex-start'),
+
                         gap: theme.space.sm,
-                        paddingHorizontal: theme.space.md, 
+                        padding: theme.space.md,
+                        width: (isMobile ? 'auto' : '100%') 
                     }
                 ]}
             >
@@ -72,13 +70,11 @@ export const CDSImageButtonGroup = ({ array, onSelect }) => {
 const styles = StyleSheet.create({
     scrollView: {
         width: '100%',
-        overflow: 'visible'
+        overflow: 'visible',
     },
     scrollContent: {
-        // Quitamos el justifyContent: 'center' porque impide el scroll si hay pocos elementos
+        width: '100%',
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 10,
-        overflow: 'visible'
     }
 });

package/package.json

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

package/components/CustomSlotDebug.jsx

@@ -1,14 +0,0 @@
-import React, { useEffect } from 'react';
-import { Platform } from 'react-native';
-
-const CustomSlotDebug = ({ customSlot, isVisible }) => {
-    useEffect(() => {
-        console.log('Platform:', Platform.OS);
-        console.log('Custom Slot:', customSlot);
-        console.log('Is Visible:', isVisible);
-    }, [customSlot, isVisible]);
-
-    return <>{customSlot}</>;
-};
-
-export default CustomSlotDebug;