cdslibrary 1.2.28 → 1.2.30

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/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';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cdslibrary",
   "license": "0BSD",
-  "version": "1.2.28",
+  "version": "1.2.30",
   "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,
   },
 });