cdslibrary 1.2.29 → 1.2.31

package/components/CDSImageButton.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { Text, StyleSheet, TouchableOpacity, View, Image } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "../context/CDSThemeContext";
+
+
+
+export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añadimos isActive
+  const { theme } = useTheme();
+
+  return (
+    <TouchableOpacity
+    onPress={onPress}
+      style={[
+        styles.mainContainer,
+        {
+          backgroundColor: isActive 
+            ? theme.surface.neutral.primaryVariant // Color cuando está presionado
+            : theme.surface.neutral.primary,
+          gap: theme.space.xs,
+          padding: theme.space.xs,
+          // borderColor: isActive 
+          //   ? theme.outline.neutral.primary // Borde de color de marca si está activo
+          //   : theme.outline.neutral.primary,
+          borderRadius: theme.radius.lg,
+          // 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
+          transform: [{ scale: isActive ? 0.99 : 1 }] 
+        },
+      ]}
+    >
+      <Image
+        source={object.image}
+        resizeMode="cover"
+        style={{
+          width: "100%",
+          height: 60,
+        }}
+      />
+      <Text style={{ fontWeight: isActive ? 'bold' : 'normal' }}>
+        {object.label}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+
+
+const styles = StyleSheet.create ({
+
+mainContainer:{
+    alignItems: 'center',
+    flexGrow: 1,
+    maxWidth: 200,
+    height: 120
+}
+
+})

package/components/CDSImageButtonGroup.jsx

@@ -0,0 +1,37 @@
+import { StyleSheet, Text, View, Image } from 'react-native';
+import { CDSImageButton } from './CDSImageButton';
+import { useState } from 'react';
+
+
+export const CDSImageButtonGroup = ({ array, onSelect }) => {
+    const [selectedId, setSelectedId] = useState(null);
+
+    const handlePress = (id) => {
+        const nextId = id === selectedId ? null : id;
+        setSelectedId(nextId);
+
+        // Avisamos al padre qué objeto se seleccionó (o null si se deseleccionó)
+        if (onSelect) {
+            const selectedItem = array.find(item => item.id === nextId);
+            onSelect(selectedItem || null);
+        }
+    };
+
+    return (
+        <View style={{ width: '100%' }}>
+            <View style={{
+                flexDirection: 'row', gap: 10,
+                width: '100%', justifyContent: 'center'
+            }}>
+                {array.map((item) => (
+                    <CDSImageButton
+                        key={item.id}
+                        object={item}
+                        isActive={selectedId === item.id}
+                        onPress={() => handlePress(item.id)}
+                    />
+                ))}
+            </View>
+        </View>
+    );
+}

package/components/CDSSelect.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
-import { 
-    View, Text, TouchableOpacity, StyleSheet, FlatList, 
-    Animated, Modal, Pressable, Dimensions, Platform 
+import {
+    View, Text, TouchableOpacity, StyleSheet, FlatList,
+    Animated, Pressable, Platform
 } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
@@ -18,20 +18,20 @@ const SelectOption = ({ item, isSelected, onSelect, theme }) => {
             onMouseLeave={() => Platform.OS === 'web' && setIsHovered(false)}
             style={({ pressed }) => [
                 styles.optionItem,
-                { 
+                {
                     paddingHorizontal: theme.space.xs,
-                    backgroundColor: (pressed || isHovered) 
-                        ? theme.surface.neutral.secondary 
-                        : isSelected ? theme.surface.neutral.tertiary : 'transparent' 
+                    backgroundColor: (pressed || isHovered)
+                        ? theme.surface.neutral.secondary
+                        : isSelected ? theme.surface.neutral.tertiary : 'transparent'
                 }
             ]}
         >
             <View style={styles.optionContent}>
                 <Text style={[
-                    theme.typography.regular.sm, 
-                    { 
-                        color: theme.text.neutral.primary, 
-                        fontWeight: isSelected ? '700' : '400' 
+                    theme.typography.regular.sm,
+                    {
+                        color: theme.text.neutral.primary,
+                        fontWeight: isSelected ? '700' : '400'
                     }
                 ]}>
                     {item.label}
@@ -42,13 +42,13 @@ const SelectOption = ({ item, isSelected, onSelect, theme }) => {
     );
 };
 
-export const CDSSelect = ({ label, options = [], onSelect, placeholder, selectedValue = null }) => {
+export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null }) => {
     const { theme } = useTheme();
     const [isOpen, setIsOpen] = useState(false);
     const [dropdownTop, setDropdownTop] = useState(0);
     const [dropdownWidth, setDropdownWidth] = useState(0);
     const [dropdownLeft, setDropdownLeft] = useState(0);
-    
+
     const containerRef = useRef(null);
     const animatedValue = useRef(new Animated.Value(0)).current;
 
@@ -90,55 +90,50 @@ export const CDSSelect = ({ label, options = [], onSelect, placeholder, selected
                 activeOpacity={0.8}
                 style={[
                     styles.inputContainer,
-                    { 
-                        backgroundColor: theme.surface.neutral.primary, 
-                        borderColor: selectedItem ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary, 
-                        borderRadius: theme.radius.sm, 
-                        paddingHorizontal: theme.space.xs 
+                    {
+                        backgroundColor: theme.surface.neutral.primary,
+                        borderColor: selectedItem ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary,
+                        borderRadius: theme.radius.sm,
+                        paddingHorizontal: theme.space.xs
                     }
                 ]}
                 onPress={toggleDropdown}
             >
                 <Text style={selectedItem ? theme.typography.inputText.value : theme.typography.inputText.placeholder}>
-                    {selectedItem ? selectedItem.label : placeholder}
+                    {selectedItem ? selectedItem.label : 'Selecciona una opción'}
                 </Text>
                 <MaterialIcons name={isOpen ? "expand-less" : "expand-more"} size={24} color={theme.text.neutral.primary} />
             </TouchableOpacity>
 
-            <Modal transparent visible={isOpen} animationType="none" onRequestClose={toggleDropdown}>
-                <Pressable style={styles.modalOverlay} onPress={toggleDropdown}>
-                    <Animated.View 
-                        style={[
-                            styles.dropdown,
-                            {
-                                opacity: animatedValue,
-                                transform: [{ translateY: animatedValue.interpolate({ inputRange: [0, 1], outputRange: [-10, 0] }) }],
-                                backgroundColor: theme.surface.neutral.primary,
-                                borderRadius: theme.radius.sm,
-                                borderColor: theme.outline.neutral.primary,
-                                top: dropdownTop,
-                                width: dropdownWidth,
-                                left: dropdownLeft,
-                                elevation: 8,
-                                maxHeight: 240,
-                            }
-                        ]}
-                    >
-                        <FlatList
-                            data={options}
-                            keyExtractor={(item) => item.value.toString()}
-                            renderItem={({ item }) => (
-                                <SelectOption 
-                                    item={item} 
-                                    isSelected={item.value === selectedValue} 
-                                    onSelect={handleSelect} 
-                                    theme={theme}
-                                />
-                            )}
-                        />
-                    </Animated.View>
-                </Pressable>
-            </Modal>
+            {isOpen && (
+                <View
+                    style={[
+                        styles.dropdownInline,
+                        {
+                            marginTop: theme.space.xs,
+                            backgroundColor: theme.surface.neutral.primary,
+                            borderRadius: theme.radius.sm,
+                            borderColor: theme.outline.neutral.primary,
+                            maxHeight: 240,
+                        }
+                    ]}
+                >
+                    <FlatList
+                        data={options}
+                        keyExtractor={(item) => item.value.toString()}
+                        renderItem={({ item }) => (
+                            <SelectOption
+                                item={item}
+                                isSelected={item.value === selectedValue}
+                                onSelect={handleSelect}
+                                theme={theme}
+                            />
+                        )}
+                        // Importante para que el scroll funcione dentro de la lista expandida
+                        nestedScrollEnabled={true}
+                    />
+                </View>
+            )}
         </View>
     );
 };
@@ -146,8 +141,7 @@ export const CDSSelect = ({ label, options = [], onSelect, placeholder, selected
 const styles = StyleSheet.create({
     mainContainer: { width: '100%' },
     inputContainer: { height: 48, borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
-    modalOverlay: { flex: 1, backgroundColor: 'transparent' },
-    dropdown: { position: 'absolute', borderWidth: 1, overflow: 'hidden' },
+    dropdownInline: { borderWidth: 1},
     optionItem: { height: 48, justifyContent: 'center' },
     optionContent: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
 });

package/package.json

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

package/tokens/CDSprimitiveTokens.js

@@ -164,26 +164,15 @@ export const CDSPrimitiveSpacing =
 
 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
+    // Usamos el formato de string que entiende el nuevo motor
+    boxShadow: `0px 2px 4px ${mode === 'dark' ? 'rgba(0,0,0,0.4)' : 'rgba(0,0,0,0.08)'}`,
+    elevation: 3, // Indispensable para Android nativo
   },
   
-  // 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
+    // Sombra más elegante con más blur (8px) y desplazamiento (4px)
+    boxShadow: `0px 4px 12px ${mode === 'dark' ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.15)'}`,
+    elevation: 8,
   },
 });