cdslibrary 1.2.16 → 1.2.18

package/components/CDSButton.jsx

@@ -18,8 +18,6 @@ export const CDSButton = ({
 }) => {
   const { theme } = useTheme();
 
-  console.log(isMobile)
-
   const backgroundColor =
     type === "disabled"
       ? theme.surface.action.disabled
@@ -40,7 +38,7 @@ export const CDSButton = ({
       activeOpacity={0.7}
       style={[
         styles.container,
-        { width: (variant === "fill" || isMobile) ? '100%' : 'auto', alignSelf: (variant === "fill" || isMobile) ? "stretch" : "center", paddingHorizontal: type === "icon" ? theme.space.xs : theme.space.sm, paddingVertical: theme.space.xs, backgroundColor, borderRadius: theme.radius.full, gap: theme.space.xs, },
+        { flexGrow: (variant === "fill" || isMobile ? 1 : 0), maxHeight: (variant === "fill" || isMobile ? 48 : 56), alignSelf: (variant === "fill" || isMobile) ? "stretch" : "center", paddingHorizontal: type === "icon" ? theme.space.xs : theme.space.sm, paddingVertical: theme.space.xs, backgroundColor, borderRadius: theme.radius.full, gap: theme.space.xs, },
         flexend && { justifyContent: "flex-end", paddingHorizontal: 0 },
         type === "secondary" && {
           borderColor: theme.outline.action.primary,

package/components/CDSButtonGroup.jsx

@@ -1,46 +1,54 @@
 
-import { View, Text, StyleSheet,} from "react-native";
+import { View, Text, StyleSheet, } from "react-native";
 import { useTheme } from "../context/CDSThemeContext";
 import { CDSButton } from "./CDSButton";
 
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
-export const CDSButtonGroup = ({ options, onSelect, label='Label' }) => {
+export const CDSButtonGroup = ({ options, onSelect, label = 'Label', selected = null }) => {
     const { theme } = useTheme();
-    const [selectedIndex, setSelectedIndex] = useState(null);
+    // Buscamos el índice que coincide con el valor 'selected'
+    const initialIndex = options.findIndex(opt => opt.value === selected);
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex);
 
-    const handlePress = (index, label) => {
-        setSelectedIndex(index);
-        if (onSelect) onSelect(label);
+    // ESCENCIAL: Sincronizar cuando 'selected' cambia desde afuera
+    useEffect(() => {
+        const newIndex = options.findIndex(opt => opt.value === selected);
+        setSelectedIndex(newIndex);
+    }, [selected, options]);
+
+    const handlePress = (index, value) => {
+        // No actualizamos el índice aquí manualmente para dejar que la prop mande
+        if (onSelect) onSelect(value);
     };
-    
+
     return (
         <View style={[styles.container, { gap: theme.space.xs }]}>
-        <Text style={[theme.typography.label]}>{label}</Text>
+            <Text style={[theme.typography.label]}>{label}</Text>
             <View style={[styles.actionsContainer, { gap: theme.space.xs }]}>
                 {options.map((option, index) => (
-                        <CDSButton key={index} variant={'fill'}
-                            label={option.label} 
-                            // Si está seleccionado es 'primary', si no 'secondary'
-                            type={selectedIndex === index ? "primary" : "secondary"}
-                            isActive={selectedIndex === index}
-                            onPress={() => handlePress(index, option.value)}
-                        />
-                    
+                    <CDSButton 
+                        key={index} 
+                        variant={'fill'}
+                        label={option.label}
+                        // Comparamos el valor de la opción con el valor seleccionado
+                        type={option.value === selected ? "primary" : "secondary"}
+                        onPress={() => handlePress(index, option.value)}
+                    />
                 ))}
             </View>
         </View>
     );
-}
+};
 
 const styles = StyleSheet.create({
-    container:{
+    container: {
         width: '100%',
     },
 
     actionsContainer: {
-        flexDirection: 'row', 
+        flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
     },

package/package.json

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