cdslibrary 1.2.37 → 1.2.39

package/components/{CDSSnackbar.jsx → CDSSnackBar.jsx}

@@ -3,7 +3,7 @@ import { StyleSheet, Text, TouchableOpacity } from "react-native";
 import Animated, { SlideInDown, SlideOutDown } from "react-native-reanimated";
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSSnackbar = ({ message, visible, onDismiss, hasClose }) => {
+export const CDSSnackBar = ({ message, visible, onDismiss, hasClose }) => {
     const { theme } = useTheme();
 
     useEffect(() => {

package/index.js

@@ -19,7 +19,9 @@ export {CDSSelect} from './components/CDSSelect';
 export {CDSLoader} from './components/CDSLoader'; 
 export {CDSOffer} from './components/CDSOffer';
 export {CDSTable} from './components/CDSTable';
-export {CDSAccordion} from './components/CDSAccordion'
-export {CDSSnackbar} from './components/CDSSnackbar'
+export {CDSAccordion} from './components/CDSAccordion';
+export {CDSSnackBar} from './components/CDSSnackBar';
+export {CDSImageButton} from './components/CDSImageButton'
+export {CDSImageButtonGroup} from './components/CDSImageButtonGroup'
 
 export {CDSThemeProvider, useTheme} from './context/CDSThemeContext';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cdslibrary",
   "license": "0BSD",
-  "version": "1.2.37",
+  "version": "1.2.39",
   "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