cdslibrary 1.0.55 → 1.1.2

package/components/CDSNavBar.jsx

@@ -0,0 +1,81 @@
+
+import { View, Text,  Dimensions, StyleSheet, Image, TouchableOpacity } from "react-native";
+
+
+import { MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "../context/CDSThemeContext";
+import { getSemanticTextStyles } from "../tokens/CDSsemanticTextStyles";
+import { useNavigation } from "@react-navigation/native";
+
+const { height, width } = Dimensions.get("window");
+
+const isMobile = width <= 878;
+export const CDSNavBar = ({
+
+    type,
+    isExpanded,
+    hasClose,
+    title,
+    hasBack, }) => {
+
+    const { theme, isDarkMode } = useTheme();
+    
+    const navigation = useNavigation();
+
+    const handleBackPress = () => {
+        if (hasBack) {
+            navigation.goBack();
+        }
+    };
+
+    const handleClosePress = () => {
+        if (hasClose) {
+            navigation.goBack();
+        }
+    };
+
+    return (
+        <View style={[styles.container, { backgroundColor: theme.surface.neutral.primary, borderColor: theme.outline.brand.primary }]}>
+            <TouchableOpacity onPress={handleBackPress}>
+                <MaterialIcons name="arrow-back-ios" size={theme.typography.icon.md} color={theme.text.neutral.primary} style={{ cursor: hasBack ? 'pointer' : 'default', opacity: hasBack ? 1 : 0 }} />
+            </TouchableOpacity>
+            {type === 'title' ? <Text style={[styles.title, theme.typography.semiBold.lg]}>{title || 'title'}</Text> : <Image
+                source={
+                    isDarkMode
+                        ? require("../assets/images/logoMonteTW.png")
+                        : require("../assets/images/logoMonte.png")
+                }
+                style={styles.logo}
+                resizeMode="contain"
+            />}
+            <TouchableOpacity onPress={handleClosePress}>
+                <MaterialIcons name="close" size={theme.typography.icon.md} color={theme.text.neutral.primary} style={{ cursor: hasClose ? 'pointer' : 'default', opacity: hasClose ? 1 : 0 }} />
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: 56,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: '#E0E0E0',
+    },
+
+    title: {
+        width: '100%',
+        textAlign: 'center',
+    },
+
+    logo: {
+        flex: 1,
+        height: '80%',
+        resizeMode: 'contain',
+    },
+
+});

package/components/CDSOnboarding.jsx

@@ -3,7 +3,6 @@ import { Dimensions } from "react-native";
 import {CDSBottomSheet} from "./CDSBottomSheet";
 import {CDSCarousel} from "./CDSCarousel";
 import { useTheme } from "../context/CDSThemeContext";
-import { Onboarding } from "./Onboarding";
 const { width } = Dimensions.get("window");
 
 export const CDSOnboarding = () => {

package/components/CDSSelect.jsx

@@ -0,0 +1,134 @@
+import React, { useState, useRef } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, FlatList, Animated } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "../context/CDSThemeContext";
+
+export const CDSSelect = ({ label, options = [], onSelect, placeholder = "Selecciona una opción" }) => {
+    const { theme } = useTheme();
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(null);
+
+    // Referencias para la animación
+    const animatedValue = useRef(new Animated.Value(0)).current;
+
+    const toggleDropdown = () => {
+        if (isOpen) {
+            // Animación de cierre
+            Animated.timing(animatedValue, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }).start(() => setIsOpen(false));
+        } else {
+            setIsOpen(true);
+            // Animación de apertura
+            Animated.timing(animatedValue, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver: true,
+            }).start();
+        }
+    };
+
+    const handleSelect = (item) => {
+        setSelected(item);
+        toggleDropdown();
+        if (onSelect) onSelect(item.value);
+    };
+
+    // Interpolación para el desplazamiento y la opacidad
+    const dropdownStyle = {
+        opacity: animatedValue,
+        transform: [
+            {
+                translateY: animatedValue.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [-10, 0], // Sube 10px mientras desaparece
+                }),
+            },
+        ],
+    };
+    console.log(theme);
+    return (
+        <View style={[styles.mainContainer, { zIndex: isOpen ? 1000 : 1, gap: theme.space.xs }]}>
+            {label && <Text style={[theme.typography.label, { color: theme.text.neutral.primary }]}>{label}</Text>}
+
+            <TouchableOpacity
+                activeOpacity={0.8}
+                style={[
+                    styles.inputContainer,
+                    theme.typography.inputText.value, { backgroundColor: theme.surface.neutral.primary, borderColor: selected ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary, borderRadius: theme.radius.sm, paddingHorizontal: theme.space.xs }
+                ]}
+                onPress={toggleDropdown}
+            >
+                <Text style={selected ? theme.typography.inputText.value : theme.typography.inputText.placeholder}>
+                    {selected ? selected.label : placeholder}
+                </Text>
+                <MaterialIcons
+                    name={isOpen ? "expand-less" : "expand-more"}
+                    size={theme.typography.icon.md}
+                    color={theme.text.neutral.primary}
+                />
+            </TouchableOpacity>
+
+            {isOpen && (
+                <Animated.View style={[
+                    styles.dropdown,
+                    dropdownStyle,
+                    theme.shadows.lg,
+                    {
+                        backgroundColor: theme.surface.neutral.primary,
+                        borderRadius: theme.radius.sm,
+                        borderColor: theme.outline.neutral.primary,
+                        elevation: 8,
+                        maxHeight: 240,
+                    }
+                ]}>
+                    <FlatList
+                        data={options}
+                        keyExtractor={(item) => item.value.toString()}
+                        showsVerticalScrollIndicator={true}
+                        persistentScrollbar={true}
+                        renderItem={({ item }) => (
+                            <TouchableOpacity
+                                style={[styles.optionItem, { paddingHorizontal: theme.space.xs }]}
+                                onPress={() => handleSelect(item)}
+                            >
+                                <Text style={[theme.typography.regular.sm, { color: theme.text.neutral.primary }]}>
+                                    {item.label}
+                                </Text>
+                            </TouchableOpacity>
+                        )}
+                    />
+                </Animated.View>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    mainContainer: {
+        width: '100%',
+    },
+    inputContainer: {
+        height: 48,
+        borderWidth: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+
+
+    dropdown: {
+        position: 'absolute',
+        top: 90,
+        width: '100%',
+        borderWidth: 1,
+        overflow: 'hidden', // Necesario para que el contenido no se salga de los bordes redondeados
+    },
+    optionItem: {
+        height: 48, // 👈 Altura fija por ítem para controlar el límite de 5
+        paddingHorizontal: 18,
+        justifyContent: 'center'
+    }
+});

package/components/CDSSplashScreen.jsx

@@ -0,0 +1,81 @@
+import { View, StyleSheet } from "react-native";
+import LottieView from "lottie-react-native";
+import { useRef, useEffect } from "react";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated";
+import { useTheme } from "../context/CDSThemeContext";
+
+export const CDSSplashScreen = ({ navigation, nextScreen }) => {
+  const { theme } = useTheme();
+  const animation = useRef(null);
+  const translateY = useSharedValue(0); // Definir un sharedValue para la posición vertical.
+  const size = useSharedValue(200); // Definir un sharedValue para el tamaño inicial.
+  const backgroundOpacity = useSharedValue(1);
+  useEffect(() => {
+    // Después de 6 segundos, mover la animación hacia arriba y cambiar el tamaño.
+    setTimeout(() => {
+      translateY.value = withTiming(-350, { duration: 1000 }); // Mover hacia arriba
+      size.value = withTiming(120, { duration: 1000 }); // Reducir el tamaño
+      backgroundOpacity.value = withTiming(0, { duration: 1000 });
+      // Esperar 1 segundo más antes de hacer el cambio de pantalla
+      setTimeout(() => {
+        navigation.replace(nextScreen);
+      }, 600);
+    }, 6000); // Esperar 6 segundos antes de la animación
+  }, [translateY, size]);
+
+  // Aplicar el estilo animado para la animación
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      width: size.value, // Usar el tamaño animado
+      height: size.value, // Usar el tamaño animado
+    };
+  },[]);
+
+  return (
+    <View style={styles.background}>
+      <View
+        style={[
+          styles.animationContainer,
+          { backgroundColor: theme.surface.special.progress },
+        ]}
+      >
+        <Animated.View
+          style={[
+            { justifyContent: "center", alignItems: "center" },
+            animatedStyle,
+          ]}
+        >
+          <LottieView
+            autoPlay
+            loop={false}
+            source={require("../assets/animations/animation.json")}
+            style={{ width: "100%", height: "100%" }} // Usar 100% del tamaño del contenedor
+          />
+        </Animated.View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: 'blue',
+    width: "100%",
+  },
+  animationContainer: {
+    flex: 1,
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 16,
+    padding: 16,
+  },
+});

package/components/CDSSwitch.jsx

@@ -5,14 +5,14 @@ import {getSemanticTextStyles} from "../tokens/CDSsemanticTextStyles";
 
 export const CDSSwitch = ({ label }) => {
   const { theme } = useTheme();
-  const textStyles = getSemanticTextStyles(theme);
+  
   const [isEnabled, setIsEnabled] = useState(false);
 
   const toggleSwitch = () => setIsEnabled((previousState) => !previousState);
 
   return (
     <View style={styles.container}>
-      <Text style={textStyles.label}>
+      <Text style={theme.typography.label}>
         {label}
       </Text>
       <Switch onValueChange={toggleSwitch} value={isEnabled} />

package/components/onboardingItem.jsx

@@ -4,13 +4,13 @@ import { useTheme } from "../context/CDSThemeContext";
 export const OnboardingItem = ({ item, parentWidth }) => {
 
     const { theme } = useTheme();
-    const textStyles = getSemanticTextStyles(theme);
+    
 
     return (
         <View style={[styles.container, {width: parentWidth}]}>
             <View style={[styles.textContainer]}>
-                <Text style={textStyles.bold.lg}>{item.title}</Text>
-                <Text style={textStyles.regular.md}>{item.description}</Text>
+                <Text style={theme.typography.bold.lg}>{item.title}</Text>
+                <Text style={theme.typography.regular.md}>{item.description}</Text>
             </View>
             <Image source={item.image} resizeMode="contain" style={[styles.image,]} />
         </View>

package/context/CDSThemeContext.js

@@ -1,52 +1,85 @@
 import React, { createContext, useState, useContext, useEffect } from 'react';
-import { Appearance, Platform } from 'react-native';
-import {CDSsemanticColors} from '../tokens/CDSsemanticColors';
+import { Appearance, Platform, Dimensions } from 'react-native';
 
+// Importa tus tokens
+import { CDSsemanticColors } from '../tokens/CDSsemanticColors';
+import { getSemanticTextStyles } from '../tokens/CDSsemanticTextStyles';
+import { CDSPrimitiveShadows, CDSPrimitiveSpacing, CDSPrimiviteRadius } from '../tokens/CDSprimitiveTokens';
 
 const ThemeContext = createContext();
 
+// Función para limpiar los objetos {mobile, desktop}
+const resolveTokens = (primitives, isMobile) => {
+  const resolved = {};
+  for (const key in primitives) {
+    const value = primitives[key];
+    resolved[key] = (value && typeof value === 'object' && 'mobile' in value)
+      ? (isMobile ? value.mobile : value.desktop)
+      : value;
+  }
+  return resolved;
+};
+
 export const CDSThemeProvider = ({ children }) => {
+  // 1. Definimos la función para obtener el tema inicial antes del estado
 
-  const getSystemTheme = () => {
+  useEffect(() => {
+    const dimensionsSub = Dimensions.addEventListener('change', ({ window }) => {
+      setWindowWidth(window.width); // Esto es lo que dispara el re-render
+    });
+    return () => dimensionsSub.remove();
+  }, []);
+  const getInitialThemeMode = () => {
     if (Platform.OS === 'web') {
       return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
     return Appearance.getColorScheme() || 'light';
   };
 
-  const [theme, setTheme] = useState(getSystemTheme);
+  // 2. Estados principales
+  const [mode, setMode] = useState(getInitialThemeMode()); // Aquí es donde estaba el error
+  const [windowWidth, setWindowWidth] = useState(Dimensions.get('window').width);
+
+  const isMobile = windowWidth <= 768;
+
+  // 3. Efectos para cambios globales
+  useEffect(() => {
+    const themeSub = Appearance.addChangeListener(({ colorScheme }) => {
+      setMode(colorScheme || 'light');
+    });
+
+    const dimensionsSub = Dimensions.addEventListener('change', ({ window }) => {
+      setWindowWidth(window.width);
+    });
+
+    return () => {
+      themeSub.remove();
+      dimensionsSub.remove();
+    };
+  }, []);
 
   const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    setMode(prev => (prev === 'light' ? 'dark' : 'light'));
   };
 
-  const isDarkMode = theme === 'dark';
+  // 4. Construcción del objeto final (IMPORTANTE: colors primero)
+  const colors = CDSsemanticColors[mode];
 
-  useEffect(() => {
-    if (Platform.OS === 'web') {
-      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-      const handleChange = (e) => {
-        setTheme(e.matches ? 'dark' : 'light');
-      };
-      mediaQuery.addEventListener('change', handleChange);
-
-      return () => {
-        mediaQuery.removeEventListener('change', handleChange);
-      };
-    } else {
-      const subscription = Appearance.addChangeListener(({ colorScheme }) => {
-        setTheme(colorScheme);
-      });
-
-      return () => subscription.remove();
-    }
-  }, []);
+  const themeValue = {
+    ...colors,
+    mode: mode,
+    isMobile,
+    space: resolveTokens(CDSPrimitiveSpacing, isMobile),
+    radius: CDSPrimiviteRadius,
+    typography: getSemanticTextStyles(colors, isMobile),
+    shadows: CDSPrimitiveShadows(mode),
+  };
 
   return (
-    <ThemeContext.Provider value={{ theme: CDSsemanticColors[theme], toggleTheme, isDarkMode }}>
+    <ThemeContext.Provider value={{ theme: themeValue, toggleTheme, isDarkMode: mode === 'dark' }}>
       {children}
     </ThemeContext.Provider>
   );
 };
 
-export const useTheme = () => useContext(ThemeContext);
+export const useTheme = () => useContext(ThemeContext);

package/index.js

@@ -1,8 +1,8 @@
 
-// import { registerRootComponent } from 'expo';
+ import { registerRootComponent } from 'expo';
 
-// import App from './App';
-// registerRootComponent(App);
+import App from './App';
+registerRootComponent(App);
 
 export {CDSBottomSheet} from './components/CDSBottomSheet';
 export {CDSButton} from './components/CDSButton';
@@ -11,8 +11,10 @@ export {CDSCarousel} from './components/CDSCarousel';
 export {CDSInput} from './components/CDSInput';
 export {CDSOnboarding} from './components/CDSOnboarding';
 export {CDSSwitch} from './components/CDSSwitch';
-
+export {CDSNavBar} from './components/CDSNavBar';
+export {CDSCardFeedback} from './components/CDSCardFeedback';
+export {CDSSplashScreen} from './components/CDSSplashScreen';
+export {CDSButtonGroup} from './components/CDSButtonGroup';
+export {CDSSelect} from './components/CDSSelect';   
 
 export {CDSThemeProvider, useTheme} from './context/CDSThemeContext';
-export {getSemanticTextStyles} from './tokens/CDSsemanticTextStyles';
-export {CDSsemanticColors} from './tokens/CDSsemanticColors';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cdslibrary",
   "license": "0BSD",
-  "version": "1.0.55",
+  "version": "1.1.2",
   "main": "index.js",
   "author": "Nat Viramontes",
   "description": "A library of components for the CDS project",
@@ -13,17 +13,25 @@
   },
   "dependencies": {
     "@expo-google-fonts/inter": "^0.2.3",
-    "@expo/metro-runtime": "~4.0.1",
-    "@expo/vector-icons": "^14.0.4",
+    "@expo/metro-runtime": "~6.1.2",
+    "@expo/vector-icons": "^15.0.3",
+    "@lottiefiles/dotlottie-react": "^0.13.5",
+    "@react-navigation/native": "^7.1.28",
     "cli": "^1.0.1",
-    "expo": "~52.0.38",
-    "expo-status-bar": "~2.0.1",
-    "react": "18.3.1",
-    "react-native": "0.76.7",
-    "react-native-web": "~0.19.13"
+    "expo": "^54.0.31",
+    "expo-linear-gradient": "~15.0.8",
+    "expo-status-bar": "~3.0.9",
+    "lottie-react-native": "^7.3.5",
+    "react": "19.1.0",
+    "react-dom": "^19.1.0",
+    "react-native": "0.81.5",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "^0.21.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0"
+    "@babel/core": "^7.28.6"
   },
   "private": false
 }

package/tokens/CDSprimitiveTokens.js

@@ -70,7 +70,8 @@ export const CDSprimitiveColors = {
     900: "#3D292C",
     950: "#382E2F",
   },
-  overlay: {light:"rgba(0, 0, 0, 0.50)",
+  overlay: {
+    light: "rgba(0, 0, 0, 0.50)",
     dark: 'rgba(0,0,0,0.75)'
   },
 };
@@ -79,7 +80,7 @@ export const CDSprimitiveColors = {
 
 
 export const CDSprimitiveFontValues = {
-  
+
   family: {
     interRegular: 'Inter_400Regular',
     interSemiBold: 'Inter_600SemiBold',
@@ -125,8 +126,7 @@ export const CDSprimitiveFontValues = {
 
   lineHeight: {
     mobile: {
-      xs: 18,
-      sm: 20,
+      sm: 18,
       md: 24,
       lg: 28,
       xl: 31,
@@ -134,8 +134,7 @@ export const CDSprimitiveFontValues = {
       "3xl": 44,
     },
     desktop: {
-      xs: 18,
-      sm: 22,
+      sm: 18,
       md: 28,
       lg: 35,
       xl: 43,
@@ -144,3 +143,62 @@ export const CDSprimitiveFontValues = {
     },
   },
 };
+
+export const CDSPrimiviteRadius = {
+  none: 0,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  full: 9999,
+};
+
+export const CDSPrimitiveSpacing =
+{
+  none: { mobile: 0, desktop: 0 },
+  xs: { mobile: 8, desktop: 16 },
+  sm: { mobile: 16, desktop: 24 },
+  md: { mobile: 24, desktop: 32 },
+  lg: { mobile: 32, desktop: 48 },
+  xl: { mobile: 48, desktop: 64 },
+};
+
+export const CDSPrimitiveShadows = (mode) => ({
+  md: {
+    shadowColor: CDSprimitiveColors.neutral[1000],
+    shadowOffset: { 
+      width: 0, 
+      height: mode==='dark' ? 8 : 2 
+    },
+    shadowOpacity: mode==='dark' ? 0.4 : 0.1,
+    shadowRadius: 6,
+    elevation: 3, // Valor aproximado para Android
+  },
+  
+  // Basado en tu captura "lg": Y: 4, Blur: 8
+  lg: {
+    shadowColor: CDSprimitiveColors.neutral[1000],
+    shadowOffset: { 
+      width: 0, 
+      height: mode==='dark' ? 10 : 4
+    },
+    shadowOpacity: mode==='dark' ? 0.5 : 0.1,
+    shadowRadius: 8,
+    elevation: 5, // Valor aproximado para Android
+  },
+});
+
+export const resolveTokens = (primitives, isMobile) => {
+  const resolved = {};
+  
+  for (const key in primitives) {
+    const value = primitives[key];
+    // Si el valor tiene la estructura { mobile, desktop }, elegimos uno
+    if (value && typeof value === 'object' && 'mobile' in value) {
+      resolved[key] = isMobile ? value.mobile : value.desktop;
+    } else {
+      // Si es un valor simple (como un color o radius), se queda igual
+      resolved[key] = value;
+    }
+  }
+  return resolved;
+};

package/tokens/CDSsemanticColors.js

@@ -1,6 +1,4 @@
 import { CDSprimitiveColors } from "./CDSprimitiveTokens";
-import { Dimensions, Platform } from "react-native";
-const { width } = Dimensions.get("window");
 
 export const CDSsemanticColors = {
   light: {
@@ -30,7 +28,7 @@ export const CDSsemanticColors = {
       action: {
         disabled: CDSprimitiveColors.neutral[400],
         primary: CDSprimitiveColors.neutral[800],
-        pressed: CDSprimitiveColors.neutral[200],
+        pressed: CDSprimitiveColors.neutral[1000],
       },
       feedback: {
         info: CDSprimitiveColors.blue[100],
@@ -134,6 +132,7 @@ export const CDSsemanticColors = {
       action: {
         disabled: CDSprimitiveColors.neutral[600],
         primary: CDSprimitiveColors.neutral[200],
+        pressed: CDSprimitiveColors.neutral[100],
       },
       feedback: {
         info: CDSprimitiveColors.blue[250],