@dropi/react-native-design-system 0.3.9 → 0.3.11

package/lib/molecules/InputField/Input.d.ts

@@ -2,25 +2,47 @@ type InputType = "text" | "number" | "email" | "password";
 type InputFactoryProps = {
     type: InputType;
 };
-export declare const Input: ({ type, ...props }: InputFactoryProps) => import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
-    type?: import("react-native").KeyboardTypeOptions;
+export declare const Input: ({ type, ...props }: InputFactoryProps) => (({ preIcon, helper, tooltip, value, onChange, hasError, errorMessage, readOnly, }: {
     preIcon?: import("dropi-lib-icons").IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly: boolean;
+}) => import("react/jsx-runtime").JSX.Element) | import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    preIcon?: import("dropi-lib-icons").IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChangeFunction: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+} & import("react").RefAttributes<import("react-native").TextInput>> | (({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, }: {
     label?: string;
+    preIcon?: import("dropi-lib-icons").IconName;
     helper?: string;
-    placeholder?: string;
     tooltip?: string;
+    placeholder?: string;
     value: string;
+    onChange: (value: string) => void;
     hasError: boolean;
     errorMessage?: string;
-    isFocus: boolean;
-} & import("react").RefAttributes<import("react-native").TextInput>> | (({ preIcon, helper, tooltip, value, onChange, hasError, errorMessage, readOnly, }: {
+    readOnly?: boolean;
+}) => import("react/jsx-runtime").JSX.Element) | (({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, allowDecimals, minValue, maxValue, }: {
+    label?: string;
     preIcon?: import("dropi-lib-icons").IconName;
     helper?: string;
     tooltip?: string;
+    placeholder?: string;
     value: string;
     onChange: (value: string) => void;
     hasError: boolean;
     errorMessage?: string;
-    readOnly: boolean;
+    readOnly?: boolean;
+    allowDecimals?: boolean;
+    minValue?: number;
+    maxValue?: number;
 }) => import("react/jsx-runtime").JSX.Element);
 export {};

package/lib/molecules/InputField/Input.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
-var _BaseInput = require("./BaseInput");
+var _TextInput = require("./TextInput");
+var _NumberInput = require("./NumberInput");
 var _EmailInput = require("./EmailInput");
-// import { PasswordInput } from "./PasswordInput"
-
+var _PasswordInput = require("./PasswordInput");
 const InputComponents = {
-  text: _BaseInput.BaseInput,
-  number: _BaseInput.BaseInput,
+  text: _TextInput.TextInput,
+  number: _NumberInput.NumberInput,
   email: _EmailInput.EmailInput,
-  password: _EmailInput.EmailInput
+  password: _PasswordInput.PasswordInput
 };
 const Input = ({
   type,

package/lib/molecules/InputField/NumberInput.d.ts

@@ -0,0 +1,19 @@
+import { IconName } from "dropi-lib-icons";
+type NumberInputProps = {
+    label?: string;
+    preIcon?: IconName;
+    helper?: string;
+    tooltip?: string;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    allowDecimals?: boolean;
+    minValue?: number;
+    maxValue?: number;
+};
+export declare const validateNumber: (value: string, allowDecimals?: boolean, minValue?: number, maxValue?: number) => boolean;
+export declare const NumberInput: ({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, allowDecimals, minValue, maxValue, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/NumberInput.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateNumber = exports.NumberInput = void 0;
+var _BaseInput = require("./BaseInput");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const validateNumber = (value, allowDecimals = true, minValue, maxValue) => {
+  if (value === "" || value === "-") return true;
+  const numberRegex = allowDecimals ? /^-?\d+\.?\d*$/ : /^-?\d+$/;
+  if (!numberRegex.test(value)) return false;
+  const numValue = parseFloat(value);
+  if (minValue !== undefined && numValue < minValue) return false;
+  if (maxValue !== undefined && numValue > maxValue) return false;
+  return true;
+};
+exports.validateNumber = validateNumber;
+const NumberInput = ({
+  label,
+  preIcon,
+  helper,
+  tooltip,
+  placeholder,
+  value,
+  onChange,
+  hasError,
+  errorMessage,
+  readOnly = false,
+  allowDecimals = true,
+  minValue,
+  maxValue
+}) => {
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const [invalidNumber, setInvalidNumber] = (0, _react.useState)(false);
+  const [wasVisited, setWasVisited] = (0, _react.useState)(false);
+  const onFocus = () => {
+    setFocus(true);
+  };
+  const onBlur = () => {
+    setFocus(false);
+    if (!wasVisited) {
+      setWasVisited(true);
+      if (value && !validateNumber(value, allowDecimals, minValue, maxValue)) {
+        setInvalidNumber(true);
+      }
+    }
+  };
+  const getErrorMessage = () => {
+    if (hasError) {
+      return errorMessage;
+    }
+    if (invalidNumber) {
+      if (!allowDecimals) {
+        return "Ingresa un número entero válido";
+      }
+      return "Ingresa un número válido";
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseInput.BaseInput, {
+    type: "decimal-pad",
+    label: label,
+    placeholder: placeholder || "Ingresa un número",
+    value: value,
+    preIcon: preIcon,
+    helper: helper,
+    tooltip: tooltip,
+    onChangeText: text => {
+      onChange(text);
+      if (wasVisited) {
+        if (text === "" || validateNumber(text, allowDecimals, minValue, maxValue)) {
+          setInvalidNumber(false);
+        } else {
+          setInvalidNumber(true);
+        }
+      }
+    },
+    hasError: hasError || invalidNumber,
+    errorMessage: getErrorMessage(),
+    autoCorrect: false,
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    isFocus: focus
+  });
+};
+exports.NumberInput = NumberInput;

package/lib/molecules/InputField/TextInput.d.ts

@@ -0,0 +1,15 @@
+import { IconName } from "dropi-lib-icons";
+type TextInputProps = {
+    label?: string;
+    preIcon?: IconName;
+    helper?: string;
+    tooltip?: string;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+};
+export declare const TextInput: ({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/TextInput.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = void 0;
+var _BaseInput = require("./BaseInput");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const TextInput = ({
+  label,
+  preIcon,
+  helper,
+  tooltip,
+  placeholder,
+  value,
+  onChange,
+  hasError,
+  errorMessage,
+  readOnly = false
+}) => {
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const onFocus = () => {
+    setFocus(true);
+  };
+  const onBlur = () => {
+    setFocus(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseInput.BaseInput, {
+    type: "default",
+    label: label,
+    placeholder: placeholder || "Ingresa texto",
+    value: value,
+    preIcon: preIcon,
+    helper: helper,
+    tooltip: tooltip,
+    onChangeText: text => {
+      onChange(text);
+    },
+    hasError: hasError,
+    errorMessage: errorMessage,
+    autoCorrect: false,
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    isFocus: focus
+  });
+};
+exports.TextInput = TextInput;

package/lib/molecules/InputField/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./EmailInput";
 export * from "./PasswordInput";
 export * from "./BaseInput";
+export * from "./TextInput";
+export * from "./NumberInput";

package/lib/molecules/InputField/index.js

@@ -35,4 +35,26 @@ Object.keys(_BaseInput).forEach(function (key) {
       return _BaseInput[key];
     }
   });
+});
+var _TextInput = require("./TextInput");
+Object.keys(_TextInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TextInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TextInput[key];
+    }
+  });
+});
+var _NumberInput = require("./NumberInput");
+Object.keys(_NumberInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NumberInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NumberInput[key];
+    }
+  });
 });

package/lib/molecules/Toasts/ToastProvider/ToastProvider.js

@@ -22,6 +22,10 @@ const ToastProvider = ({
   const timeoutRef = (0, _react.useRef)(null);
   const animationRef = (0, _react.useRef)(null);
   const toastIdCounter = (0, _react.useRef)(0);
+  const isAnimatingRef = (0, _react.useRef)(false);
+  const processQueueRef = (0, _react.useRef)(null);
+  const animateInRef = (0, _react.useRef)(null);
+  const animateOutRef = (0, _react.useRef)(null);
 
   // Cleanup timers on unmount
   (0, _react.useEffect)(() => {
@@ -35,33 +39,31 @@ const ToastProvider = ({
     };
   }, []);
 
-  // Animate in the toast
-  const animateIn = (0, _react.useCallback)(() => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    slideAnim.setValue(-200); // Reset to initial position
+  // Keep isAnimatingRef in sync
+  (0, _react.useEffect)(() => {
+    isAnimatingRef.current = isAnimating;
+  }, [isAnimating]);
 
-    animationRef.current = _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
-      toValue: _reactNative.Platform.OS === 'ios' ? 100 : 50 + _utils.statusBarHeight,
-      duration: 300,
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(slideAnim, {
-      toValue: _reactNative.Platform.OS === 'ios' ? 80 : 30 + _utils.statusBarHeight,
-      duration: 120,
-      useNativeDriver: true
-    })]);
-    animationRef.current.start(({
-      finished
-    }) => {
-      if (finished) {
-        setIsAnimating(false);
-      }
-    });
-  }, [slideAnim, isAnimating]);
+  // Process the next toast in the queue
+  const processQueue = (0, _react.useCallback)(() => {
+    setTimeout(() => {
+      setQueue(prevQueue => {
+        if (prevQueue.length === 0) return prevQueue;
+        const [nextToast, ...remainingQueue] = prevQueue;
+        setCurrentToast(nextToast);
+        return remainingQueue;
+      });
+    }, 0);
+  }, []);
+
+  // Keep processQueueRef updated
+  (0, _react.useEffect)(() => {
+    processQueueRef.current = processQueue;
+  }, [processQueue]);
 
-  // Animate out the toast
+  // Animate out the toast - stable with useRef
   const animateOut = (0, _react.useCallback)(callback => {
-    if (isAnimating && animationRef.current) {
+    if (animationRef.current) {
       animationRef.current.stop();
     }
     setIsAnimating(true);
@@ -75,7 +77,6 @@ const ToastProvider = ({
     }) => {
       if (finished) {
         setIsAnimating(false);
-        // Defer state updates to avoid useInsertionEffect error
         requestAnimationFrame(() => {
           setCurrentToast(null);
           if (callback) {
@@ -84,22 +85,57 @@ const ToastProvider = ({
         });
       }
     });
-  }, [slideAnim, isAnimating]);
+  }, [slideAnim]);
 
-  // Process the next toast in the queue
-  const processQueue = (0, _react.useCallback)(() => {
-    // Use setTimeout to defer state update
-    setTimeout(() => {
-      setQueue(prevQueue => {
-        if (prevQueue.length === 0) return prevQueue;
-        const [nextToast, ...remainingQueue] = prevQueue;
-        setCurrentToast(nextToast);
-        return remainingQueue;
-      });
-    }, 0);
-  }, []);
+  // Keep animateOutRef updated
+  (0, _react.useEffect)(() => {
+    animateOutRef.current = animateOut;
+  }, [animateOut]);
+
+  // Animate in the toast - stable with useRef
+  const animateIn = (0, _react.useCallback)(() => {
+    if (isAnimatingRef.current) return;
+    setIsAnimating(true);
+    slideAnim.setValue(-200);
+    animationRef.current = _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
+      toValue: _reactNative.Platform.OS === 'ios' ? 100 : 50 + _utils.statusBarHeight,
+      duration: 300,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(slideAnim, {
+      toValue: _reactNative.Platform.OS === 'ios' ? 80 : 30 + _utils.statusBarHeight,
+      duration: 120,
+      useNativeDriver: true
+    })]);
+    animationRef.current.start(({
+      finished
+    }) => {
+      if (finished) {
+        setIsAnimating(false);
+      }
+    });
+  }, [slideAnim]);
+
+  // Keep animateInRef updated
+  (0, _react.useEffect)(() => {
+    animateInRef.current = animateIn;
+  }, [animateIn]);
+
+  // Auto-process queue when currentToast is null and queue has items
+  (0, _react.useEffect)(() => {
+    if (!currentToast && !isAnimating && queue.length > 0) {
+      // Defer to avoid state update during render
+      setTimeout(() => {
+        setQueue(prevQueue => {
+          if (prevQueue.length === 0) return prevQueue;
+          const [nextToast, ...remainingQueue] = prevQueue;
+          setCurrentToast(nextToast);
+          return remainingQueue;
+        });
+      }, 0);
+    }
+  }, [currentToast, isAnimating, queue.length]);
 
-  // Handle auto-dismiss
+  // Handle auto-dismiss - only depends on currentToast
   (0, _react.useEffect)(() => {
     if (!currentToast) return;
 
@@ -109,14 +145,14 @@ const ToastProvider = ({
       timeoutRef.current = null;
     }
 
-    // Animate in
-    animateIn();
+    // Animate in using ref
+    animateInRef.current?.();
 
     // Set auto-dismiss if duration > 0
     if (currentToast.duration && currentToast.duration > 0) {
       timeoutRef.current = setTimeout(() => {
-        animateOut(() => {
-          processQueue();
+        animateOutRef.current?.(() => {
+          processQueueRef.current?.();
         });
       }, currentToast.duration);
     }
@@ -126,7 +162,7 @@ const ToastProvider = ({
         timeoutRef.current = null;
       }
     };
-  }, [currentToast, animateIn, animateOut, processQueue]);
+  }, [currentToast]); // Solo depende de currentToast para evitar bucle infinito
 
   // Handle manual close
   const handleClose = (0, _react.useCallback)(() => {
@@ -135,9 +171,9 @@ const ToastProvider = ({
       timeoutRef.current = null;
     }
     animateOut(() => {
-      processQueue();
+      processQueueRef.current?.();
     });
-  }, [animateOut, processQueue]);
+  }, [animateOut]);
 
   // Public API: showToast
   const showToast = (0, _react.useCallback)(params => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",