cdslibrary 1.2.39 → 1.2.41

package/components/CDSAccordion.jsx

@@ -89,7 +89,7 @@ export const CDSAccordion = ({ title, description, children, defaultExpanded = f
                     style={styles.measureContainer}
                     pointerEvents="none"
                 >
-                    <View style={{ paddingVertical: theme.space.sm, gap: theme.space.md }}>
+                    <View style={{ paddingVertical: theme.space.md, gap: theme.space.md }}>
                         {description && (
                             <Text style={[styles.description, theme.typography.regular.sm]}>
                                 {description}
@@ -100,7 +100,7 @@ export const CDSAccordion = ({ title, description, children, defaultExpanded = f
                 </View>
 
                 {/* CONTENEDOR VISIBLE: El que el usuario realmente ve animarse */}
-                <View style={{ paddingVertical: theme.space.sm, gap: theme.space.md }}>
+                <View style={{ paddingVertical: theme.space.md, gap: theme.space.md }}>
                     {description && (
                         <Text style={[styles.description, theme.typography.regular.sm]}>
                             {description}

package/components/CDSBottomSheet.jsx

@@ -76,9 +76,9 @@ export const CDSBottomSheet = ({
               isMobile ? { translateY: slidePosition } : { translateX: slidePosition }
             ],
             backgroundColor: theme.surface.neutral.primary,
-            paddingHorizontal: theme.space.sm,
+            paddingHorizontal: theme.space.md,
             paddingTop: theme.space.xl,
-            gap: theme.space.sm,
+            gap: theme.space.md,
             ...(isMobile ? {
               borderTopLeftRadius: theme.radius.lg,
               borderTopRightRadius: theme.radius.lg,
@@ -96,7 +96,7 @@ export const CDSBottomSheet = ({
             size={theme.typography.icon.lg}
             color={theme.text.neutral.primary}
             onPress={handleClose}
-            style={{ position: "absolute", right: theme.space.sm, top: theme.space.sm, zIndex: 10 }}
+            style={{ position: "absolute", right: theme.space.md, top: theme.space.md, zIndex: 10 }}
           />
         )}
 

package/components/CDSButton.jsx

@@ -38,7 +38,7 @@ export const CDSButton = ({
       activeOpacity={0.7}
       style={[
         styles.container,
-        { 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, },
+        { flexGrow: (variant === "fill" || isMobile ? 1 : 0), maxHeight: (variant === "fill" || isMobile ? 48 : 56), alignSelf: (variant === "fill" || isMobile) ? "stretch" : "center", paddingHorizontal: type === "icon" ? theme.space.sm : theme.space.md, paddingVertical: theme.space.sm, backgroundColor, borderRadius: theme.radius.full, gap: theme.space.sm, },
         flexend && { justifyContent: "flex-end", paddingHorizontal: 0 },
         type === "secondary" && {
           borderColor: theme.outline.action.primary,

package/components/CDSButtonGroup.jsx

@@ -24,9 +24,9 @@ export const CDSButtonGroup = ({ options, onSelect, label = 'Label', selected =
     };
 
     return (
-        <View style={[styles.container, { gap: theme.space.xs }]}>
+        <View style={[styles.container, { gap: theme.space.sm }]}>
             <Text style={[theme.typography.label]}>{label}</Text>
-            <View style={[styles.actionsContainer, { gap: theme.space.xs }]}>
+            <View style={[styles.actionsContainer, { gap: theme.space.sm }]}>
                 {options.map((option, index) => (
                     <CDSButton 
                         key={index} 

package/components/CDSCardFeedback.jsx

@@ -70,8 +70,8 @@ export const CDSCardFeedback = ({
             backgroundColor: currentStyle.bg,
             borderColor: currentStyle.border,
             borderRadius: theme.radius.md,
-            padding: theme.space.sm,
-            gap: theme.space.xs,
+            padding: theme.space.md,
+            gap: theme.space.sm,
             opacity: fadeAnim,
             transform: [{
                 scale: fadeAnim.interpolate({
@@ -81,7 +81,7 @@ export const CDSCardFeedback = ({
             }]
         }]}>
 
-            {title && <View style={[styles.titleContainer, { gap: theme.space.xs }]}>
+            {title && <View style={[styles.titleContainer, { gap: theme.space.sm }]}>
                 <MaterialIcons
                     name={currentStyle.icon}
                     size={theme.typography.icon.md}
@@ -90,7 +90,7 @@ export const CDSCardFeedback = ({
                 <Text style={[styles.title, theme.typography.bold.lg, { color: currentStyle.text }]}>{title}</Text>
             </View>}
             {description && <Text style={[styles.description, theme.typography.regular.md, { color: currentStyle.text }]}>{description}</Text>}
-            <View style={[styles.actionsContainer, { gap: theme.space.xs }]}>
+            <View style={[styles.actionsContainer, { gap: theme.space.sm }]}>
                 {secondAction && <TouchableOpacity onPress={onPressSecondAction}>{<Text style={[theme.typography.bold.sm, { color: currentStyle.text }]}>{secondAction}</Text>}</TouchableOpacity>}
                 <TouchableOpacity onPress={() => {
                     handleClose()

package/components/CDSImageButton.jsx

@@ -17,8 +17,8 @@ export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añad
           backgroundColor: isActive 
             ? theme.surface.neutral.primaryVariant // Color cuando está presionado
             : theme.surface.neutral.primary,
-          gap: theme.space.xs,
-          padding: theme.space.xs,
+          gap: theme.space.sm,
+          padding: theme.space.sm,
           // borderColor: isActive 
           //   ? theme.outline.neutral.primary // Borde de color de marca si está activo
           //   : theme.outline.neutral.primary,

package/components/CDSInput.jsx

@@ -25,7 +25,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
   };
 
   return (
-    <View style={[styles.container, { gap: theme.space.xs }]}>
+    <View style={[styles.container, { gap: theme.space.sm }]}>
       {label && (
         <Text style={[theme.typography.label, { color: theme.text.neutral.primary }]}>
           {label}
@@ -44,7 +44,7 @@ export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeTe
               : value ? theme.outline.neutral.tertiaryVariant // Cambiado 'text' por 'value'
                 : theme.outline.neutral.primary,
             borderRadius: theme.radius.sm,
-            paddingHorizontal: theme.space.xs,
+            paddingHorizontal: theme.space.sm,
             color: theme.text.neutral.primary,
             outlineStyle: 'none',
 

package/components/CDSOffer.jsx

@@ -12,19 +12,19 @@ export const CDSOffer = ({ description, minValue, maxValue }) => {
     const { theme } = useTheme();
     console.log(theme)
     return (
-        <View style={[styles.mainContainer, { gap: theme.space.sm }]}>
+        <View style={[styles.mainContainer, { gap: theme.space.md }]}>
             <Text style={theme.typography.regular.md}>Por tu</Text>
             <Text style={theme.typography.semiBold.lg}>{description}</Text>
             <Text style={theme.typography.regular.md}>Hoy podrías obtener:</Text>
             <View style={[styles.minMaxContainer, { flexDirection: isMobile ? 'column' : 'row' }]}>
-                <View style={[styles.containerMin, { backgroundColor: theme.surface.neutral.secondary, borderColor: theme.outline.neutral.tertiaryVariant, gap: theme.space.xs, padding: theme.space.sm, borderRadius: theme.radius.md }]}>
+                <View style={[styles.containerMin, { backgroundColor: theme.surface.neutral.secondary, borderColor: theme.outline.neutral.tertiaryVariant, gap: theme.space.sm, padding: theme.space.md, borderRadius: theme.radius.md }]}>
                     <Text style={[theme.typography.regular.md, { color: theme.text.neutral.primary }]}>Desde</Text>
                     <Text style={[theme.typography.h3, { textAlign: 'center', color: theme.text.neutral.primary }]}>{`$${parseFloat(minValue).toLocaleString('en-US', {
                         minimumFractionDigits: 2,
                         maximumFractionDigits: 2
                     })}`}</Text>
                 </View>
-                <View style={[styles.containerMax, { marginTop: isMobile ? -theme.space.xs : 0, marginLeft: isMobile ? 0 : -theme.space.xl, backgroundColor: theme.surface.brand.primaryVariant, borderColor: theme.outline.brand.secondary, gap: theme.space.xs, padding: theme.space.sm, borderRadius: theme.radius.md }]}>
+                <View style={[styles.containerMax, { marginTop: isMobile ? -theme.space.sm : 0, marginLeft: isMobile ? 0 : -theme.space.xl, backgroundColor: theme.surface.brand.primaryVariant, borderColor: theme.outline.brand.secondary, gap: theme.space.sm, padding: theme.space.md, borderRadius: theme.radius.md }]}>
                     <Text style={[theme.typography.regular.md, { color: theme.text.brand.primary }]}>Hasta</Text>
                     <Text style={[theme.typography.h1, { textAlign: 'center', color: theme.text.brand.primary }]}>{`$${parseFloat(maxValue).toLocaleString('en-US', {
                         minimumFractionDigits: 2,

package/components/CDSSelect.jsx

@@ -19,7 +19,7 @@ const SelectOption = ({ item, isSelected, onSelect, theme }) => {
             style={({ pressed }) => [
                 styles.optionItem,
                 {
-                    paddingHorizontal: theme.space.xs,
+                    paddingHorizontal: theme.space.sm,
                     backgroundColor: (pressed || isHovered)
                         ? theme.surface.neutral.secondary
                         : isSelected ? theme.surface.neutral.tertiary : 'transparent'
@@ -76,15 +76,23 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
         }
     };
 
-    const handleSelect = (item) => {
+const handleSelect = (item) => {
+        // 1. Actualizamos localmente PRIMERO para que el cambio sea instantáneo
         setSelectedItem(item);
+        
+        // 2. Cerramos el menú
         toggleDropdown();
-        if (onSelect) onSelect(item.value);
+        
+        // 3. Notificamos al padre
+        if (onSelect) {
+            // Enviamos el valor (o el objeto, según prefieras)
+            onSelect(item.value); 
+        }
     };
 
     return (
         <View style={styles.mainContainer} ref={containerRef} collapsable={false}>
-            {label && <Text style={[theme.typography.label, { color: theme.text.neutral.primary, marginBottom: theme.space.xs }]}>{label}</Text>}
+            {label && <Text style={[theme.typography.label, { color: theme.text.neutral.primary, marginBottom: theme.space.sm }]}>{label}</Text>}
 
             <TouchableOpacity
                 activeOpacity={0.8}
@@ -94,7 +102,7 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
                         backgroundColor: theme.surface.neutral.primary,
                         borderColor: selectedItem ? theme.outline.neutral.tertiaryVariant : theme.outline.neutral.primary,
                         borderRadius: theme.radius.sm,
-                        paddingHorizontal: theme.space.xs
+                        paddingHorizontal: theme.space.sm
                     }
                 ]}
                 onPress={toggleDropdown}
@@ -110,7 +118,7 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
                     style={[
                         styles.dropdownInline,
                         {
-                            marginTop: theme.space.xs,
+                            marginTop: theme.space.sm,
                             backgroundColor: theme.surface.neutral.primary,
                             borderRadius: theme.radius.sm,
                             borderColor: theme.outline.neutral.primary,
@@ -124,7 +132,7 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
                         renderItem={({ item }) => (
                             <SelectOption
                                 item={item}
-                                isSelected={item.value === selectedValue}
+                                isSelected={selectedItem?.value === item.value}
                                 onSelect={handleSelect}
                                 theme={theme}
                             />

package/components/CDSSnackBar.jsx

@@ -32,7 +32,7 @@ export const CDSSnackBar = ({ message, visible, onDismiss, hasClose }) => {
                 {
                     backgroundColor: theme.surface.special.display,
                     bottom: theme.space.lg,
-                    padding: theme.space.sm,
+                    padding: theme.space.md,
                     borderRadius: theme.radius.sm,
                 }
             ]}

package/components/CDSSwitch.jsx

@@ -6,11 +6,11 @@ export const CDSSwitch = ({ label, onValueChange, value }) => {
   const { theme } = useTheme();
 
   return (
-    <View style={[styles.container, { marginVertical: theme.space.xs }]}>
+    <View style={[styles.container, { marginVertical: theme.space.sm }]}>
       {label && (
         <Text style={[
           theme.typography.label,
-          { color: theme.text.neutral.primary, flex: 1, marginRight: theme.space.sm }
+          { color: theme.text.neutral.primary, flex: 1, marginRight: theme.space.md }
         ]}>
           {label}
         </Text>

package/components/CDSTable.jsx

@@ -31,7 +31,7 @@ export const CDSTable = ({ columns, data, breakpoint = 500 }) => {
                         key={`header-${index}`}
                         style={[
                             styles.cell, 
-                            { padding: theme.space.xs },
+                            { padding: theme.space.sm },
                             col.width ? { width: col.width } : { flex: 1 }
                         ]}
                     >
@@ -57,7 +57,7 @@ export const CDSTable = ({ columns, data, breakpoint = 500 }) => {
                             key={`cell-${rowIndex}-${colIndex}`}
                             style={[
                                 styles.cell, 
-                                { padding: theme.space.xs },
+                                { padding: theme.space.sm },
                                 col.width ? { width: col.width } : { flex: 1 }
                             ]}
                         >

package/package.json

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

package/tokens/CDSsemanticTextStyles.js

@@ -142,14 +142,14 @@ export const getSemanticTextStyles = (theme, isMobile) => {
     inputText: {
       placeholder: {
         fontFamily: CDSprimitiveFontValues.family.interRegular,
-        fontSize: getVal('size', 'sm'),
-        lineHeight: getVal('lineHeight', 'sm'),
+        fontSize: getVal('size', 'md'),
+        lineHeight: getVal('lineHeight', 'md'),
         color: theme.text.neutral.placeholder,
       },
       value: {
         fontFamily: CDSprimitiveFontValues.family.interRegular,
-        fontSize: getVal('size', 'sm'),
-        lineHeight: getVal('lineHeight', 'sm'),
+        fontSize: getVal('size', 'md'),
+        lineHeight: getVal('lineHeight', 'md'),
         color: theme.text.neutral.primary,
       },
     },