cdslibrary 1.0.56 → 1.1.3

package/components/CDSBottomSheet.jsx

@@ -4,7 +4,9 @@ import { CDSButton } from "./CDSButton";
 
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
-import { getSemanticTextStyles } from "../tokens/CDSsemanticTextStyles";
+import { ScrollView } from "react-native-web";
+import { LinearGradient } from 'expo-linear-gradient';
+
 
 const { height, width } = Dimensions.get("window");
 
@@ -14,82 +16,119 @@ export const CDSBottomSheet = ({
   type,
   isVisible,
   hasClose,
-  title,
-  description ,
+  title = 'title',
+  description,
   customSlot,
-  primaryButtonLabel,
+  primaryButtonLabel = "Aceptar",
   primaryButtonOnPress,
   secondaryButtonLabel = "Cancelar",
   onFinish,
 }) => {
 
-  const [childHeight, setChildHeight] = useState(0);
   const handleLayout = (event) => {
     const { width } = event.nativeEvent.layout;
     setChildHeight(width);  // Guardamos el ancho en el estado
-};
+  };
 
   const { theme } = useTheme();
-  const textStyles = getSemanticTextStyles(theme);
 
   const [modalVisible, setModalVisible] = useState(isVisible);
   const [modalOpacity] = useState(new Animated.Value(0));
   const [slidePosition] = useState(new Animated.Value(height));
 
   useEffect(() => {
+    const targetValue = isMobile ? height : width; // Valor fuera de pantalla
+
     Animated.parallel([
       Animated.timing(modalOpacity, {
         toValue: modalVisible ? 1 : 0,
-        duration: 500,
+        duration: 400,
         useNativeDriver: false,
       }),
       Animated.timing(slidePosition, {
-        toValue: modalVisible ? 0 : height,
-        duration: modalVisible ? 500 : 800,
+        toValue: modalVisible ? 0 : targetValue, // 0 es visible, targetValue es oculto
+        duration: 400,
         useNativeDriver: false,
       }),
     ]).start();
-  }, [modalVisible]);
-
+  }, [modalVisible, isMobile]); // Añadimos isMobile a las dependencias
   return (
     <>
-      <Animated.View onLayout={handleLayout}
-        style={[isMobile ? styles.centeredView.typeBottomSheet : styles.centeredView.typeModal,
-        {opacity: modalOpacity,  transform: isMobile && [{ translateY: slidePosition }] },
-        ]}
+      <Animated.View
+        onLayout={handleLayout}
+        style={[
+          isMobile ? styles.container.typeBottomSheet : styles.container.typeDrawer,
+          {
+            opacity: modalOpacity,
+            transform: [
+              isMobile
+                ? { translateY: slidePosition } // Sube en móvil
+                : { translateX: slidePosition } // Entra lateral en desktop
+            ],
+            backgroundColor: theme.surface.neutral.primary, paddingHorizontal: theme.space.sm,
+            paddingTop: theme.space.xl,
+            gap: theme.space.sm,
+          }, isMobile ? [styles.container.typeBottomSheet, {
+            borderTopLeftRadius: theme.radius.lg,
+            borderTopRightRadius: theme.radius.lg,
+
+          }] : [styles.container.typeDrawer, {
+            borderBottomLeftRadius: theme.radius.lg, borderTopLeftRadius: theme.radius.lg, paddingBottom: theme.space.md,
+          },
+          ]]}
       >
-        <View style={[isMobile ? styles.container.typeBottomSheet : styles.container.typeModal, { backgroundColor: theme.surface.neutral.primary } ]}>
-          {hasClose && (
-            <MaterialIcons
-              name={"close"}
-              size={textStyles.icon.fontSize}
-              color={"red"}
-              style={{ position: "absolute", right: 16, top: 16 }}
-            />
-          )}
-          {title && <Text style={textStyles.bold.lg}>{title}</Text>}
-          {description && (
-            <Text style={textStyles.regular.md}>{description}</Text>
-          )}
-          {customSlot && <View style={{  height: childHeight,}}>{customSlot}</View>}
-          {type !== "informative" && (
-            <View style={styles.actionsContainer}>
-              <CDSButton
-                label={primaryButtonLabel}
-                onPress={
-                  onFinish
-                    ? () => settypeMVisible(!modalVisible)
-                    : primaryButtonOnPress
-                }
-              />
-              <CDSButton
-                label={secondaryButtonLabel}
-                type="ghost"
-                onPress={() => setModalVisible(!modalVisible)}
-              />
-            </View>
-          )}
+
+        {hasClose && (
+          <MaterialIcons
+            name={"close"}
+            size={theme.typography.icon.lg}
+            color={theme.text.neutral.primary}
+            onPress={() => setModalVisible(false)}
+            style={{ position: "absolute", right: theme.space.sm, top: theme.space.sm }}
+          />
+        )}
+        {title && <Text style={theme.typography.bold.lg}>{title}</Text>}
+        <View style={styles.scrollWrapper}> {/* 👈 Nuevo View para envolver */}
+          <ScrollView
+            style={styles.scrollArea}
+            contentContainerStyle={[styles.scrollContent, {
+              flexGrow: 0,
+              paddingBottom: theme.space.md
+            }]}
+            showsVerticalScrollIndicator={true}
+            persistentScrollbar={true}
+            indicatorStyle={theme.name === 'dark' ? 'white' : 'black'}
+          >
+            {description && (
+              <Text style={[theme.typography.regular.md, { marginBottom: theme.space.md }]}>{description}</Text>
+            )}
+            {customSlot && <View style={styles.customSlot}>{customSlot}</View>}
+          </ScrollView>
+
+          {/* El Gradiente */}
+          <LinearGradient
+            colors={['transparent', theme.surface.neutral.primary]} // Ajusta los colores
+            style={styles.fadeGradient}
+            pointerEvents="none" // Importante para que no bloquee el click en los botones debajo
+          />
         </View>
+        {type !== "informative" && (
+          <View style={isMobile ? styles.actionsContainer.typeBottomSheet : styles.actionsContainer.typeDrawer}>
+            <CDSButton
+              label={primaryButtonLabel}
+              onPress={
+                onFinish
+                  ? () => setModalVisible(!modalVisible)
+                  : primaryButtonOnPress
+              }
+            />
+            <CDSButton
+              label={secondaryButtonLabel}
+              type="ghost"
+              onPress={() => setModalVisible(!modalVisible)}
+            />
+          </View>
+        )}
       </Animated.View>
       <Animated.View
         style={[
@@ -111,51 +150,91 @@ const styles = StyleSheet.create({
     position: "absolute",
     top: 0,
     left: 0,
-    width: "110%",
-    height: "104.4%",
-    zIndex: 9,
+    width: "100%",
+    height: "100%"
   },
 
-  centeredView: {
+  container: {
     typeBottomSheet: {
+      maxHeight: '90%',
       flex: 1,
       justifyContent: "flex-end",
       alignItems: "center",
       zIndex: 99,
-      pointerEvents: "none",
       width: "100%",
+      position: "absolute",
+      bottom: 0,
     },
-    typeModal: {
+    typeDrawer: {
+      position: "absolute", // Clave para el Drawer
+      right: 0,            // Anclado a la derecha
+      top: 0,
+      bottom: 0,
       justifyContent: "center",
-      alignItems: "center",
       zIndex: 99,
+      width: 600,
     },
   },
-  container: {
+
+  scrollWrapper: {
+    flex: 1, // Ocupa todo el espacio vertical disponible
+    position: 'relative', // Para que el gradiente se posicione absolutamente dentro de él
+    width: '100%',
+  },
+  scrollArea: {
+    flexShrink: 1, 
+    flexGrow: 1,
+    width: '100%',  
+    paddingBottom: 20, 
+  },
+
+  scrollContent: {
+    paddingBottom: 20, // Aire al final del contenido
+    gap: 16,
+  },
+
+  fadeGradient: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 60, // Ajusta la altura del gradiente según tu diseño
+  },
+
+  infoContainer: {
     typeBottomSheet: {
       width: "100%",
-      borderTopLeftRadius: 16,
-      borderTopRightRadius: 16,
-      paddingHorizontal: 16,
-      paddingVertical: 24,
-      gap: 16,
       zIndex: 100,
       pointerEvents: "all",
     },
-    typeModal: {
-      width: 600,
-      borderRadius: 16,
-      paddingHorizontal: 16,
-      paddingVertical: 24,
-      gap: 16,
+    typeDrawer: {
+      flex: 1,             // Ocupa todo el alto disponible en el Drawer
+      width: "100%",
       zIndex: 100,
       pointerEvents: "all",
+      // Opcional: una sombra elegante para Desktop
+      ...Platform.select({
+        web: { boxShadow: '-10px 0px 15px rgba(0,0,0,0.2)' }
+      })
     },
   },
   actionsContainer: {
-    flex: "row",
-    width: "100%",
-    gap: 8,
+    typeBottomSheet: {
+      flex: "row",
+      width: "100%",
+      gap: 8,
+    },
+    typeDrawer: {
+      marginTop: 'auto',
+      flexDirection: "row-reverse",
+      width: "100%",
+      gap: 8,
+    },
+  },
+
+  customSlot: {
+    width: '100%',
+    height: 'auto',
   },
 
 });

package/components/CDSButton.jsx

@@ -3,7 +3,6 @@ import { Text, StyleSheet, TouchableOpacity } from "react-native";
 import { Dimensions, Platform } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
-import { getSemanticTextStyles } from "../tokens/CDSsemanticTextStyles";
 
 const { width } = Dimensions.get("window");
 const isMobile = width <= 768
@@ -11,13 +10,14 @@ const isMobile = width <= 768
 export const CDSButton = ({
   label,
   type = "primary",
+  variant,
   size,
   onPress,
   icon,
   flexend,
 }) => {
   const { theme } = useTheme();
-  const textStyles = getSemanticTextStyles(theme);
+
 
   const backgroundColor =
     type === "disabled"
@@ -38,11 +38,11 @@ export const CDSButton = ({
       onPress={type !== "disabled" ? onPress : null}
       activeOpacity={0.7}
       style={[
-        styles.container,
-        { backgroundColor },
+        styles.container, 
+        { flexGrow: (variant === "fill" ? 1 : 0), backgroundColor, borderRadius: theme.radius.full },
         flexend && { justifyContent: "flex-end", paddingHorizontal: 0 },
         {
-          paddingHorizontal: type === "icon" ? 12 : 24,
+          paddingHorizontal: type === "icon" ? theme.space.xs : theme.space.sm,
           ...(isMobile && { width: "100%" })
         },
         type === "secondary" && {
@@ -52,7 +52,6 @@ export const CDSButton = ({
         type === 'link' && {
           paddingHorizontal: 0,
           paddingVertical: 0,
-          width: 'auto',
           minWidth: 1,
         }
       ]}
@@ -62,9 +61,9 @@ export const CDSButton = ({
           style={[
             type === "link"
               ? size === "small"
-                ? textStyles.link.small
-                : textStyles.link.regular
-              : textStyles.buttonText,
+                ? theme.typography.link.small
+                : theme.typography.link.regular
+              : theme.typography.buttonText,
             { color: textColor },
           ]}
         >
@@ -74,7 +73,7 @@ export const CDSButton = ({
       {icon && (
         <MaterialIcons
           name={icon}
-          size={textStyles.icon.fontSize}
+          size={theme.typography.icon.sm}
           color={textColor}
         />
       )}
@@ -84,7 +83,7 @@ export const CDSButton = ({
 
 const styles = StyleSheet.create({
   container: {
-    width: 'auto',
+    alignSelf: "center",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",

package/components/CDSButtonGroup.jsx

@@ -0,0 +1,52 @@
+
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { Dimensions, Platform } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "../context/CDSThemeContext";
+import { CDSButton } from "./CDSButton";
+
+
+import React, { useState } from "react";
+
+export const CDSButtonGroup = ({ options, onSelect, label='Label' }) => {
+    const { theme } = useTheme();
+    const [selectedIndex, setSelectedIndex] = useState(null);
+
+    const handlePress = (index, label) => {
+        setSelectedIndex(index);
+        if (onSelect) onSelect(label);
+    };
+    
+    return (
+        <View style={[styles.container, { gap: theme.space.xs }]}>
+        <Text style={[theme.typography.label]}>{label}</Text>
+            <View style={[styles.actionsContainer, { gap: theme.space.xs }]}>
+                {options.map((option, index) => (
+                        <CDSButton key={index} variant={option.variant}
+                            label={option.label} 
+                            // Si está seleccionado es 'primary', si no 'secondary'
+                            type={selectedIndex === index ? "primary" : "secondary"}
+                            isActive={selectedIndex === index}
+                            onPress={() => handlePress(index, option.label)}
+                        />
+                    
+                ))}
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container:{
+        width: '100%',
+    },
+
+    actionsContainer: {
+        flex: 1,
+        flexDirection: 'row', 
+        width: '100%',
+        backgroundColor: 'red',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/components/CDSCardFeedback.jsx

@@ -0,0 +1,121 @@
+import { useState, useRef } from "react";
+import { View, Text, StyleSheet, TouchableOpacity, Platform, Animated } from "react-native";
+
+
+import { MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "../context/CDSThemeContext";
+
+export const CDSCardFeedback = ({
+
+    style,
+    title,
+    description,
+    secondAction,
+    onPressSecondAction,
+    onClose }) => {
+    const { theme } = useTheme();
+    const [isVisible, setIsVisible] = useState(true); // 3. Estado inicial: visible
+    const fadeAnim = useRef(new Animated.Value(1)).current;
+    // 4. Si isVisible es falso, no renderizamos nada (devolvemos null)
+
+    const handleClose = () => {
+        // Iniciar la animación de desvanecimiento
+        Animated.timing(fadeAnim, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: Platform.OS !== 'web'
+        }).start(() => {
+            // Una vez que la animación termina, ocultar el componente
+            setIsVisible(false);
+        })
+    }
+    if (!isVisible) return null;
+
+    const feedbackStyles = {
+        success: {
+            bg: theme.surface.feedback.success,
+            border: theme.outline.feedback.success,
+            text: theme.text.feedback.success,
+            icon: 'check-circle',
+        },
+        warning: {
+            bg: theme.surface.feedback.warning,
+            border: theme.outline.feedback.warning,
+            text: theme.text.feedback.warning,
+            icon: 'warning',
+        },
+        error: {
+            bg: theme.surface.feedback.error,
+            border: theme.outline.feedback.error,
+            text: theme.text.feedback.error,
+            icon: 'error',
+        },
+        neutral: {
+            bg: theme.surface.neutral.primaryVariant,
+            border: theme.outline.tertiary,
+            text: theme.text.neutral.primary,
+            icon: 'lightbulb',
+        },
+        info: {
+            bg: theme.surface.feedback.info,
+            border: theme.outline.feedback.info,
+            text: theme.text.feedback.info,
+            icon: 'info',
+        }
+    }
+    const currentStyle = feedbackStyles[style] || feedbackStyles.info;
+
+    return (
+        <Animated.View style={[styles.container, {
+            backgroundColor: currentStyle.bg,
+            borderColor: currentStyle.border,
+            borderRadius: theme.radius.md,
+            padding: theme.space.sm,
+            gap: theme.space.xs,
+            opacity: fadeAnim,
+            transform: [{
+                scale: fadeAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0.95, 1] // Se encoge ligeramente al 95%
+                })
+            }]
+        }]}>
+
+            <View style={[styles.titleContainer, { gap: theme.space.xs }]}>
+                <MaterialIcons
+                    name={currentStyle.icon}
+                    size={theme.typography.icon.md}
+                    color={currentStyle.text}
+                />
+                <Text style={[styles.title, theme.typography.bold.lg, { color: currentStyle.text }]}>{title || 'Title'}</Text>
+            </View>
+            {description && <Text style={[styles.description, theme.typography.regular.md, { color: currentStyle.text }]}>{description}</Text>}
+            <View style={[styles.actionsContainer, { gap: theme.space.xs }]}>
+                {secondAction && <TouchableOpacity onPress={onPressSecondAction}>{<Text style={[theme.typography.bold.sm, { color: currentStyle.text }]}>{secondAction}</Text>}</TouchableOpacity>}
+                <TouchableOpacity onPress={() => {
+                    handleClose()
+                }}>{<Text style={[theme.typography.bold.sm, { color: currentStyle.text }]}>{'Cerrar'}</Text>}</TouchableOpacity></View>
+        </Animated.View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        justifyContent: 'space-between',
+        borderWidth: 1,
+    },
+
+    titleContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    description: {
+    },
+    actionsContainer: {
+        flexDirection: 'row',
+        width: '100%',
+        justifyContent: 'flex-end',
+
+    },
+});

package/components/CDSInput.jsx

@@ -1,54 +1,61 @@
-import { StyleSheet, Text, TextInput, View } from "react-native";
+import React, { useState } from "react";
+import { View, Text, TextInput, StyleSheet } from "react-native";
 import { useTheme } from "../context/CDSThemeContext";
-import {getSemanticTextStyles} from "../tokens/CDSsemanticTextStyles";
-import { useState } from "react";
 
 export const CDSInput = ({ label, type, keyboard, placeholder }) => {
   const { theme } = useTheme();
-  const textStyles = getSemanticTextStyles(theme);
   const [text, setText] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
 
   return (
-    <View style={[styles.container]}>
-      <Text
-        style={[
-          textStyles.label,
-        ]}
-      >
-        {label}
-      </Text>
-      {text === "" && (
-        <Text style={[styles.fakePlaceholder, textStyles.inputText.placeholder]}>
-          {placeholder}
+    <View style={[styles.container, { gap: theme.space.xs }]}>
+      {label && (
+        <Text style={[theme.typography.label, { color: theme.text.neutral.primary }]}>
+          {label}
         </Text>
       )}
+
       <TextInput
-        style={[styles.textBox, textStyles.inputText.value, {backgroundColor:theme.surface.neutral.primary, borderColor: theme.outline.neutral.primary }]}
+        style={[
+          styles.textBox,
+          theme.typography.inputText.value, // La tipografía se aplica aquí y la hereda el placeholder
+          {
+            backgroundColor: theme.surface.neutral.primary,
+            // Cambia el color del borde si está en focus
+            borderColor: isFocused 
+              ? theme.outline.neutral.focus : text ? theme.outline.neutral.tertiaryVariant
+              : theme.outline.neutral.primary,
+            borderRadius: theme.radius.sm,
+            paddingHorizontal: theme.space.xs,
+            color: theme.text.neutral.primary,
+            // Elimina el borde azul en Web/Android
+            outlineStyle: 'none', 
+          },
+        ]}
+        placeholder={placeholder}
+        placeholderTextColor={theme.typography.inputText.placeholder}
         keyboardType={keyboard}
-        secureTextEntry={type === "password" ? true : false}
+        secureTextEntry={type === "password"}
         onChangeText={setText}
         value={text}
+        // Manejo de estados de Focus
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        underlineColorAndroid="transparent"
       />
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {
     width: "100%",
-    gap: 8,
-  },
-
-  fakePlaceholder: {
-    position: "absolute",
-    zIndex: 1,
-    left: 14,
-    top: 40,
   },
-
   textBox: {
-    padding: 12,
-    borderRadius: 8,
     borderWidth: 1,
+    height: 48,
+    // Asegura que la transición de color no sea brusca en web
+    transitionProperty: 'border-color',
+    transitionDuration: '0.2s',
   },
-});
+});