cdslibrary 1.1.2 → 1.1.3

package/components/CDSLoader.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import { View, StyleSheet, Modal } from "react-native";
+import LottieView from "lottie-react-native";
+import Animated, { 
+  useSharedValue, 
+  useAnimatedStyle, 
+  withTiming, 
+  withDelay, // 👈 Importamos withDelay
+  runOnJS 
+} from "react-native-reanimated";
+import { useTheme } from "../context/CDSThemeContext";
+
+export const CDSLoader = ({ visible = false }) => {
+  const { theme } = useTheme();
+  const [shouldRender, setShouldRender] = useState(visible);
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (visible) {
+      setShouldRender(true);
+      // Entrada rápida para que no se sienta lag al empezar
+      opacity.value = withTiming(1, { duration: 300 }); 
+    } else {
+      // 1. Espera 800ms antes de hacer nada (Sostenido)
+      // 2. Desvanece lentamente en 1200ms
+      opacity.value = withDelay(
+        1000, 
+        withTiming(0, { duration: 1200 }, (isFinished) => {
+          if (isFinished) {
+            runOnJS(setShouldRender)(false);
+          }
+        })
+      );
+    }
+  }, [visible]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  if (!shouldRender && !visible) return null;
+
+  return (
+    <Modal transparent visible={shouldRender} animationType="none">
+      <Animated.View style={[styles.overlay, animatedStyle, 
+            { backgroundColor: theme.overlay },]}>
+        <View
+          style={[
+            styles.loaderContainer,
+          ]}
+        >
+          <LottieView
+            autoPlay
+            loop
+            source={require("../assets/animations/animationLoaderWhite.json")}
+            resizeMode="contain"
+          />
+        </View>
+      </Animated.View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    height: '100%',
+    width: '100%',      
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1000,
+  },
+  loaderContainer: {
+    padding: 20, 
+    // O si usas fijos, asegúrate que sean mayores al estilo del Lottie
+    minWidth: 180, 
+    minHeight: 180,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/components/CDSSelect.jsx

@@ -48,7 +48,6 @@ export const CDSSelect = ({ label, options = [], onSelect, placeholder = "Selecc
             },
         ],
     };
-    console.log(theme);
     return (
         <View style={[styles.mainContainer, { zIndex: isOpen ? 1000 : 1, gap: theme.space.xs }]}>
             {label && <Text style={[theme.typography.label, { color: theme.text.neutral.primary }]}>{label}</Text>}

package/package.json

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

package/tokens/CDSsemanticColors.js

@@ -2,8 +2,8 @@ import { CDSprimitiveColors } from "./CDSprimitiveTokens";
 
 export const CDSsemanticColors = {
   light: {
-    logo:{
-      source:"../assets/logoMonte.png"
+    logo: {
+      source: "../assets/logoMonte.png"
     },
     icon: {
       neutral: {
@@ -104,10 +104,11 @@ export const CDSsemanticColors = {
         error: CDSprimitiveColors.scarlet[300],
       },
     },
+    overlay: CDSprimitiveColors.overlay.light,
   },
   dark: {
-    logo:{
-      source:'../assets/logoMonteW.png'
+    logo: {
+      source: '../assets/logoMonteW.png'
     },
     icon: {
       neutral: {
@@ -208,5 +209,6 @@ export const CDSsemanticColors = {
         error: CDSprimitiveColors.scarlet[350],
       },
     },
+    overlay: CDSprimitiveColors.overlay.dark,
   },
 };