cdslibrary 1.2.49 → 1.2.50

package/components/CDSImageButton.jsx

@@ -19,11 +19,11 @@ export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añad
             ? theme.surface.neutral.primaryVariant // Color cuando está presionado
             : theme.surface.neutral.primary,
           gap: theme.space.sm,
-          padding: theme.space.md,
+          padding: theme.space.sm,
           // borderColor: isActive 
           //   ? theme.outline.neutral.primary // Borde de color de marca si está activo
           //   : theme.outline.neutral.primary,
-          borderRadius: theme.radius.lg,
+          borderRadius: theme.radius.md,
           // 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
@@ -38,6 +38,7 @@ export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añad
           flexGrow: 1,
           width: "100%",
           height: 80,
+          borderRadius: theme.radius.sm,
         }}
       />
       <Text style={isActive ? theme.typography.semiBold.sm : theme.typography.regular.sm }>

package/components/CDSImageButtonGroup.jsx

@@ -3,8 +3,9 @@ import { View, Animated, StyleSheet, ScrollView } from 'react-native';
 import { CDSImageButton } from './CDSImageButton';
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSImageButtonGroup = ({ array, onSelect }) => {
+export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
     const { theme } = useTheme();
+    const isMobile = theme.isMobile
     const [selectedId, setSelectedId] = useState(null);
     const animatedValue = useRef(new Animated.Value(0)).current;
 
@@ -31,10 +32,6 @@ export const CDSImageButtonGroup = ({ array, onSelect }) => {
             outputRange: [0, 250] 
         }),
         opacity: animatedValue,
-        marginTop: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, theme.space.md]
-        })
     };
 
     return (
@@ -45,14 +42,15 @@ export const CDSImageButtonGroup = ({ array, onSelect }) => {
             <ScrollView 
                 horizontal={true} 
                 showsHorizontalScrollIndicator={false}
-                // IMPORTANTE: overflow visible para que no corte sombras, 
-                // pero necesitamos que el ScrollView sepa su límite
                 style={styles.scrollView}
                 contentContainerStyle={[
                     styles.scrollContent, 
                     { 
+                        justifyContent: (isCentered ? 'center' : 'flex-start'),
+
                         gap: theme.space.sm,
-                        paddingHorizontal: theme.space.md, 
+                        padding: theme.space.md,
+                        width: (isMobile ? 'auto' : '100%') 
                     }
                 ]}
             >
@@ -72,13 +70,11 @@ export const CDSImageButtonGroup = ({ array, onSelect }) => {
 const styles = StyleSheet.create({
     scrollView: {
         width: '100%',
-        overflow: 'visible'
+        overflow: 'visible',
     },
     scrollContent: {
-        // Quitamos el justifyContent: 'center' porque impide el scroll si hay pocos elementos
+        width: '100%',
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 10,
-        overflow: 'visible'
     }
 });

package/package.json

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