cdslibrary 1.2.32 → 1.2.34

package/components/CDSBottomSheet.jsx

@@ -105,8 +105,11 @@ export const CDSBottomSheet = ({
         <View style={styles.scrollWrapper}>
           <ScrollView
             style={styles.scrollArea}
-            contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.md }]}
+            contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.xl }]}
             showsVerticalScrollIndicator={true}
+            bounces={true}
+            alwaysBounceVertical={false}
+            scrollEventThrottle={16}
           >
             {!!description && (
               <Text style={[theme.typography.regular.md, { marginBottom: theme.space.md }]}>

package/components/CDSSnackbar.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+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 }) => {
+    const { theme } = useTheme();
+
+    useEffect(() => {
+        let timer;
+        if (visible) {
+            // Configuramos el temporizador a 5000ms (5 segundos)
+            timer = setTimeout(() => {
+                if (onDismiss) onDismiss();
+            }, 5000);
+        }
+
+        // Limpieza: si el componente se desmonta o el usuario lo cierra antes, 
+        // cancelamos el timer para evitar fugas de memoria.
+        return () => clearTimeout(timer);
+    }, [visible, onDismiss]);
+
+    // Reanimated necesita que el componente se desmonte para ejecutar 'exiting'
+    if (!visible) return null;
+
+    return (
+        <Animated.View
+            entering={SlideInDown.duration(400)}
+            exiting={SlideOutDown.duration(300)}
+            style={[
+                styles.snackbar,
+                {
+                    backgroundColor: theme.surface.special.display,
+                    bottom: theme.space.lg,
+                    padding: theme.space.sm,
+                    borderRadius: theme.radius.sm,
+                }
+            ]}
+        >
+            <Text style={[
+                theme.typography.regular.sm, 
+                { color: theme.text.neutral.contrast, flex: 1 }
+            ]}>
+                {message}
+            </Text>
+
+            {hasClose && (
+                <TouchableOpacity onPress={onDismiss} style={styles.actionButton}>
+                    <Text style={{
+                        color: theme.colors?.brand?.secondary || theme.text.neutral.contrast,
+                        fontWeight: '700'
+                    }}>
+                        CERRAR
+                    </Text>
+                </TouchableOpacity>
+            )}
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    snackbar: {
+        alignSelf: 'center',
+        width: '90%',
+        maxWidth: 600,
+        position: 'absolute',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        zIndex: 1000,
+    },
+    actionButton: {
+        marginLeft: 16,
+    }
+});

package/components/CDSSwitch.jsx

@@ -1,21 +1,36 @@
-import React, { useState } from "react";
-import { View, Text, Switch, StyleSheet } from "react-native";
+import React from "react";
+import { View, Text, Switch, StyleSheet, Platform } from "react-native";
 import { useTheme } from "../context/CDSThemeContext";
-import {getSemanticTextStyles} from "../tokens/CDSsemanticTextStyles";
 
-export const CDSSwitch = ({ label }) => {
+export const CDSSwitch = ({ label, onValueChange, value }) => {
   const { theme } = useTheme();
-  
-  const [isEnabled, setIsEnabled] = useState(false);
-
-  const toggleSwitch = () => setIsEnabled((previousState) => !previousState);
 
   return (
-    <View style={styles.container}>
-      <Text style={theme.typography.label}>
-        {label}
-      </Text>
-      <Switch onValueChange={toggleSwitch} value={isEnabled} />
+    <View style={[styles.container, { marginVertical: theme.space.xs }]}>
+      {label && (
+        <Text style={[
+          theme.typography.label, 
+          { color: theme.text.neutral.primary, flex: 1, marginRight: theme.space.sm }
+        ]}>
+          {label}
+        </Text>
+      )}
+      <Switch
+        value={value}
+        onValueChange={onValueChange}
+        // Colores dinámicos basados en tu tema
+        trackColor={{ 
+          false: theme.outline.neutral.primary, 
+          true: theme.surface.special.progress 
+        }}
+        // Color del "círculo" (thumb)
+        thumbColor={Platform.OS === 'ios' 
+          ? undefined // En iOS es mejor dejar el blanco nativo
+          : theme.surface.neutral.primary
+        }
+        // Color de fondo para Android cuando está apagado
+        ios_backgroundColor={theme.outline.neutral.primary}
+      />
     </View>
   );
 }
@@ -25,5 +40,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
+    width: '100%',
+    minHeight: 40, // Mejora el área de toque
   },
-});
+});

package/index.js

@@ -20,5 +20,6 @@ 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 {CDSThemeProvider, useTheme} from './context/CDSThemeContext';

package/package.json

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