cdslibrary 1.2.38 → 1.2.40

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'
@@ -84,7 +84,7 @@ export const CDSSelect = ({ label, options = [], onSelect, selectedValue = null
 
     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 +94,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 +110,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,

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.38",
+  "version": "1.2.40",
   "main": "index.js",
   "author": "Nat Viramontes",
   "description": "A library of components for the CDS project",

package/tokens/CDSprimitiveTokens.js

@@ -90,35 +90,35 @@ export const CDSprimitiveFontValues = {
   size: {
     typography: {
       mobile: {
-        xs: 12,
-        sm: 14,
-        md: 17,
-        lg: 21,
-        xl: 25,
-        "2xl": 30,
-        "3xl": 36,
+        xs: 12,    // Captions
+        sm: 14,    // Etiquetas secundarias
+        md: 16,    // BASE: Inputs y Párrafos 
+        lg: 20,    // H3 / Títulos pequeños
+        xl: 25,    // H2 / Títulos medianos
+        "2xl": 31, // H1 / Títulos grandes
+        "3xl": 39, // Hero
       },
       desktop: {
         xs: 14,
         sm: 16,
-        md: 21,
-        lg: 27,
-        xl: 36,
-        "2xl": 47,
-        "3xl": 61,
+        md: 18,    // Base desktop más cómoda
+        lg: 24,
+        xl: 32,
+        "2xl": 48,
+        "3xl": 64,
       },
     },
     iconography: {
       mobile: {
-        xs: 14,
-        sm: 18,
-        md: 22,
-        lg: 40,
+        xs: 14, // Para acompañar texto xs/sm
+        sm: 20, // Estándar para botones pequeños
+        md: 24, // Estándar de la industria para botones y menú
+        lg: 32, // Iconos destacados
       },
       desktop: {
         xs: 16,
-        sm: 20,
-        md: 24,
+        sm: 24,
+        md: 32,
         lg: 48,
       },
     },
@@ -126,40 +126,45 @@ export const CDSprimitiveFontValues = {
 
   lineHeight: {
     mobile: {
-      sm: 18,
+      xs: 16,
+      sm: 20,
       md: 24,
       lg: 28,
-      xl: 31,
-      "2xl": 38,
-      "3xl": 44,
+      xl: 32,
+      "2xl": 40,
+      "3xl": 48,
     },
     desktop: {
-      sm: 18,
+      xs: 18,
+      sm: 24,
       md: 28,
-      lg: 35,
-      xl: 43,
+      lg: 32,
+      xl: 40,
       "2xl": 56,
-      "3xl": 71,
+      "3xl": 72,
     },
   },
 };
 
 export const CDSPrimiviteRadius = {
-  none: 0,
-  sm: 8,
-  md: 16,
-  lg: 24,
+none: 0,
+  xs: 4,    // Detalles mínimos
+  sm: 12,   // Botones e Inputs (más suave que 8px)
+  md: 20,   // Tarjetas y modales (se ve muy premium en móvil)
+  lg: 32,   // BottomSheets (el estándar de Apple para hojas que suben)
+  xl: 40,   // Contenedores muy grandes o secciones decorativas
   full: 9999,
 };
 
 export const CDSPrimitiveSpacing =
 {
   none: { mobile: 0, desktop: 0 },
-  xs: { mobile: 8, desktop: 16 },
-  sm: { mobile: 16, desktop: 24 },
-  md: { mobile: 24, desktop: 32 },
-  lg: { mobile: 32, desktop: 48 },
-  xl: { mobile: 48, desktop: 64 },
+  xs: { mobile: 4, desktop: 8 },   // Micro-ajustes (icon+text)
+  sm: { mobile: 8, desktop: 12 },  // Entre elementos pequeños
+  md: { mobile: 16, desktop: 24 },  // Padding interno de tarjetas
+  lg: { mobile: 24, desktop: 32 },  // Espacio entre secciones
+  xl: { mobile: 32, desktop: 48 },  // Márgenes de página
+  "2xl": { mobile: 48, desktop: 64 },  // Espacios hero
 };
 
 export const CDSPrimitiveShadows = (mode) => ({
@@ -168,7 +173,7 @@ export const CDSPrimitiveShadows = (mode) => ({
     boxShadow: `0px 2px 4px ${mode === 'dark' ? 'rgba(0,0,0,0.4)' : 'rgba(0,0,0,0.08)'}`,
     elevation: 3, // Indispensable para Android nativo
   },
-  
+
   lg: {
     // 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)'}`,
@@ -178,7 +183,7 @@ export const CDSPrimitiveShadows = (mode) => ({
 
 export const resolveTokens = (primitives, isMobile) => {
   const resolved = {};
-  
+
   for (const key in primitives) {
     const value = primitives[key];
     // Si el valor tiene la estructura { mobile, desktop }, elegimos uno

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,
       },
     },