cdslibrary 1.2.2 → 1.2.4

package/components/CDSButton.jsx

@@ -39,7 +39,7 @@ export const CDSButton = ({
       activeOpacity={0.7}
       style={[
         styles.container, 
-        { flexGrow: (variant === "fill" ? 1 : 0), backgroundColor, borderRadius: theme.radius.full },
+        { flexGrow: (variant === "fill" ? 1 : 0), paddingHorizontal: theme.space.sm, paddingVertical: theme.space.xs, backgroundColor, borderRadius: theme.radius.full, gap: theme.space.xs },
         flexend && { justifyContent: "flex-end", paddingHorizontal: 0 },
         {
           paddingHorizontal: type === "icon" ? theme.space.xs : theme.space.sm,
@@ -87,10 +87,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 8,
-    gap: 8,
   },
 });
 

package/components/CDSButtonGroup.jsx

@@ -1,7 +1,5 @@
 
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { Dimensions, Platform } from "react-native";
-import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
 import { CDSButton } from "./CDSButton";
 
@@ -45,7 +43,6 @@ const styles = StyleSheet.create({
         flex: 1,
         flexDirection: 'row', 
         width: '100%',
-        backgroundColor: 'red',
         alignItems: 'center',
         justifyContent: 'center',
     },

package/components/CDSInput.jsx

@@ -1,12 +1,29 @@
 import React, { useState } from "react";
-import { View, Text, TextInput, StyleSheet } from "react-native";
+import { View, Text, TextInput, StyleSheet, Platform } from "react-native"; // Añadido Platform
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSInput = ({ label, type, keyboard, placeholder }) => {
+// Agregamos 'value' y 'onChangeText' a las props para que sea un "Controlled Component"
+export const CDSInput = ({ label, type, keyboard, placeholder, value, onChangeText }) => {
   const { theme } = useTheme();
-  const [text, setText] = useState("");
   const [isFocused, setIsFocused] = useState(false);
 
+  const handleTextChange = (inputText) => {
+    if (keyboard === "numeric" || keyboard === "decimal-pad") {
+      let cleaned = inputText.replace(',', '.');
+      cleaned = cleaned.replace(/[^0-9.]/g, "");
+
+      const parts = cleaned.split('.');
+      if (parts.length > 2) {
+        cleaned = parts[0] + '.' + parts.slice(1).join('');
+      }
+      
+      // Enviamos el valor limpio al padre (index.js)
+      onChangeText && onChangeText(cleaned);
+    } else {
+      onChangeText && onChangeText(inputText);
+    }
+  };
+
   return (
     <View style={[styles.container, { gap: theme.space.xs }]}>
       {label && (
@@ -18,27 +35,26 @@ export const CDSInput = ({ label, type, keyboard, placeholder }) => {
       <TextInput
         style={[
           styles.textBox,
-          theme.typography.inputText.value, // La tipografía se aplica aquí y la hereda el placeholder
+          theme.typography.inputText.value,
           {
             backgroundColor: theme.surface.neutral.primary,
-            // Cambia el color del borde si está en focus
-            borderColor: isFocused 
-              ? theme.outline.neutral.focus : text ? theme.outline.neutral.tertiaryVariant
+            // Usamos 'value' (la prop) para decidir el color del borde
+            borderColor: isFocused
+              ? theme.outline.neutral.focus 
+              : value ? theme.outline.neutral.tertiaryVariant // Cambiado 'text' por 'value'
               : theme.outline.neutral.primary,
             borderRadius: theme.radius.sm,
             paddingHorizontal: theme.space.xs,
             color: theme.text.neutral.primary,
-            // Elimina el borde azul en Web/Android
-            outlineStyle: 'none', 
+            outlineStyle: 'none',
           },
         ]}
         placeholder={placeholder}
-        placeholderTextColor={theme.typography.inputText.placeholder}
-        keyboardType={keyboard}
+        placeholderTextColor={theme.text.neutral.placeholder} // Usar el color directo del tema es más seguro
+        keyboardType={keyboard === "numeric" ? (Platform.OS === 'ios' ? 'decimal-pad' : 'numeric') : keyboard}
+        onChangeText={handleTextChange}
+        value={value} // Ahora recibe el valor del simulador
         secureTextEntry={type === "password"}
-        onChangeText={setText}
-        value={text}
-        // Manejo de estados de Focus
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
         underlineColorAndroid="transparent"
@@ -48,14 +64,16 @@ export const CDSInput = ({ label, type, keyboard, placeholder }) => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-  },
+  container: { width: "100%" },
   textBox: {
     borderWidth: 1,
     height: 48,
-    // Asegura que la transición de color no sea brusca en web
-    transitionProperty: 'border-color',
-    transitionDuration: '0.2s',
+    // transitionProperty solo funciona en Web, en móvil se ignora sin error
+    ...Platform.select({
+      web: {
+        transitionProperty: 'border-color',
+        transitionDuration: '0.2s',
+      }
+    })
   },
 });

package/index.js

@@ -1,17 +1,23 @@
-// Exportaciones de Componentes
-export { CDSAccordion } from './components/CDSAccordion'; // ¡No olvides este!
-export { CDSBottomSheet } from './components/CDSBottomSheet';
-export { CDSButton } from './components/CDSButton';
-export { CDSInput } from './components/CDSInput';
-export { CDSSwitch } from './components/CDSSwitch';
-export { CDSNavBar } from './components/CDSNavBar';
-export { CDSCardFeedback } from './components/CDSCardFeedback';
-export { CDSSplashScreen } from './components/CDSSplashScreen';
-export { CDSButtonGroup } from './components/CDSButtonGroup';
-export { CDSSelect } from './components/CDSSelect';  
-export { CDSLoader } from './components/CDSLoader'; 
-export { CDSOffer } from './components/CDSOffer';
-export { CDSTable } from './components/CDSTable';
 
-// Exportaciones de Contexto y Hooks
-export { CDSThemeProvider, useTheme } from './context/CDSThemeContext';
+ import { registerRootComponent } from 'expo';
+
+import App from './App';
+registerRootComponent(App);
+
+export {CDSBottomSheet} from './components/CDSBottomSheet';
+export {CDSButton} from './components/CDSButton';
+// export {CDSCarousel} from './components/CDSCarousel';
+// export {CDSCarouselDots} from './components/CDSCarouselDots';
+export {CDSInput} from './components/CDSInput';
+// export {CDSOnboarding} from './components/CDSOnboarding';
+export {CDSSwitch} from './components/CDSSwitch';
+export {CDSNavBar} from './components/CDSNavBar';
+export {CDSCardFeedback} from './components/CDSCardFeedback';
+export {CDSSplashScreen} from './components/CDSSplashScreen';
+export {CDSButtonGroup} from './components/CDSButtonGroup';
+export {CDSSelect} from './components/CDSSelect';  
+export {CDSLoader} from './components/CDSLoader'; 
+export {CDSOffer} from './components/CDSOffer';
+export {CDSTable} from './components/CDSTable';
+
+export {CDSThemeProvider, useTheme} from './context/CDSThemeContext';

package/package.json

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