cdslibrary 1.2.100 → 1.2.101

package/components/CDSAccordion.jsx

@@ -10,7 +10,7 @@ import Animated, {
 import { useTheme } from "../context/CDSThemeContext";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 
-export const CDSAccordion = ({ title, description, children, defaultExpanded = false }) => {
+export const CDSAccordion = ({ title, description, children, defaultExpanded = false, onToggle }) => {
     const { theme } = useTheme();
     const [expanded, setExpanded] = useState(defaultExpanded);
     const [contentHeight, setContentHeight] = useState(0); // Altura real medida
@@ -21,6 +21,10 @@ export const CDSAccordion = ({ title, description, children, defaultExpanded = f
         const newValue = !expanded;
         setExpanded(newValue);
 
+        if (onToggle) {
+            onToggle(newValue);
+        }
+
         animation.value = withTiming(newValue ? 1 : 0, {
             duration: 250,
             easing: Easing.bezier(0.4, 0, 0.2, 1)
@@ -88,7 +92,7 @@ export const CDSAccordion = ({ title, description, children, defaultExpanded = f
                 {/* CONTENEDOR DE MEDICIÓN: Es invisible y absoluto, solo sirve para saber cuánto mide el children */}
                 <View
                     onLayout={onLayout}
-                    style={[styles.measureContainer, {pointerEvents: 'none'}]}
+                    style={[styles.measureContainer, { pointerEvents: 'none' }]}
                 >
                     <View style={{ paddingVertical: theme.space.md, gap: theme.space.md }}>
                         {description && (
@@ -136,7 +140,7 @@ const styles = StyleSheet.create({
         position: 'absolute',
         left: 16,
         right: 16,
-        opacity: 0, 
+        opacity: 0,
     },
     paddingWrapper: {
         paddingBottom: 16,

package/components/CDSImageButton.jsx

@@ -4,7 +4,7 @@ import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 import { CDSTooltip } from "./CDSTooltip"; // Asegúrate de importar tu Tooltip
 
-export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMessage, arrowAlignment, isGrid }) => {
+export const CDSImageButton = ({ object, isActive, onPress, hasHelper, onPressHelper, helperMessage, arrowAlignment, isGrid }) => {
   const { theme } = useTheme();
 
   // Estados para controlar el Tooltip interno
@@ -12,7 +12,9 @@ export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMes
   const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
 
   const handleHelperPress = (event) => {
-    // Si estamos en Web, usamos getBoundingClientRect para precisión total
+    if (onPressHelper) {
+      onPressHelper(object);
+    }
     if (event.target && event.target.getBoundingClientRect) {
       const rect = event.target.getBoundingClientRect();
       setTooltipPos({
@@ -42,7 +44,7 @@ export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMes
         style={[
           styles.mainContainer,
           {
-            width: isGrid ? 192 : 'auto' ,
+            width: isGrid ? 192 : 'auto',
             maxWidth: isGrid ? 192 : 160,
             backgroundColor: isActive
               ? theme.surface.neutral.primaryVariant

package/components/CDSImageButtonGroup.jsx

@@ -3,7 +3,7 @@ import { View, Animated, StyleSheet, ScrollView } from 'react-native';
 import { CDSImageButton } from './CDSImageButton';
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSImageButtonGroup = ({ array, onSelect, isCentered, isGrid }) => {
+export const CDSImageButtonGroup = ({ array, onSelect, isCentered, isGrid, onPressHelper }) => {
     const { theme } = useTheme();
     const isMobile = theme.isMobile
     const [selectedId, setSelectedId] = useState(null);
@@ -73,6 +73,7 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered, isGrid }) =>
                         onPress={() => handlePress(item.id)}
                         hasHelper={!!item.helper}
                         helperMessage={item.helper}
+                        onPressHelper={onPressHelper}
                         arrowAlignment={item.arrowAlignment}
                         // Opcional: Ajustar ancho en grid
                         style={isGrid ? { width: '47%' } : undefined}

package/package.json

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