@dropi/react-native-design-system 0.2.11 → 0.2.13

package/lib/molecules/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export type BottomSheetComponentRef = {
+    present: () => void;
+    close: () => void;
+    dismiss: () => void;
+};
+type BottomSheetComponentProps = {
+    children: ReactNode;
+    footer?: ReactNode;
+    title?: string;
+    snapPoints?: string[];
+    onDismiss?: () => void;
+};
+export declare const BottomSheetComponent: React.ForwardRefExoticComponent<BottomSheetComponentProps & React.RefAttributes<BottomSheetComponentRef>>;
+export {};

package/lib/molecules/BottomSheet/BottomSheet.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BottomSheetComponent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _bottomSheet = require("@gorhom/bottom-sheet");
+var _constants = require("../../constants");
+var _Heading = require("../../atoms/Text/Heading");
+var _TextButton = require("../../atoms/Buttons/TextButton");
+var _spacing = require("../../constants/spacing");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const BottomSheetComponent = exports.BottomSheetComponent = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  footer,
+  title,
+  snapPoints,
+  onDismiss
+}, ref) => {
+  const bottomSheetModalRef = (0, _react.useRef)(null);
+  const memoizedSnapPoints = (0, _react.useMemo)(() => snapPoints ?? ['70%', '90%'], [snapPoints]);
+  const handlePresentModalPress = (0, _react.useCallback)(() => {
+    bottomSheetModalRef.current?.present();
+  }, []);
+  const handleCloseModalPress = (0, _react.useCallback)(() => {
+    bottomSheetModalRef.current?.close();
+  }, []);
+  const handleDismissModalPress = (0, _react.useCallback)(() => {
+    bottomSheetModalRef.current?.dismiss();
+  }, []);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    present: handlePresentModalPress,
+    close: handleCloseModalPress,
+    dismiss: handleDismissModalPress
+  }));
+  const renderBackdrop = (0, _react.useCallback)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.BottomSheetBackdrop, {
+    ...props,
+    appearsOnIndex: 0,
+    disappearsOnIndex: -1,
+    opacity: 0.5
+  }), []);
+  const renderFooter = (0, _react.useCallback)(props => footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.BottomSheetFooter, {
+    ...props,
+    style: styles.footer,
+    children: footer
+  }) : null, [footer]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.BottomSheetModal, {
+    ref: bottomSheetModalRef,
+    snapPoints: memoizedSnapPoints,
+    backdropComponent: renderBackdrop,
+    enableDynamicSizing: false,
+    footerComponent: renderFooter,
+    onDismiss: onDismiss,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.BottomSheetView, {
+      style: styles.contentContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.innerContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.headerContainer, {
+            justifyContent: title ? 'space-between' : 'flex-end'
+          }],
+          children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.Heading, {
+              type: "h3",
+              style: {
+                color: 'black'
+              },
+              children: title
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextButton.TextButton, {
+            label: "",
+            size: "large",
+            variant: "secondary",
+            preIcon: 'close-large',
+            replaceColor: _constants.colors.Black.light,
+            onPress: () => bottomSheetModalRef.current?.dismiss()
+          })]
+        }), children]
+      })
+    })
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  contentContainer: {
+    height: '100%',
+    paddingBottom: _spacing.spacing['size-10']
+  },
+  innerContainer: {
+    flex: 1
+  },
+  headerContainer: {
+    paddingHorizontal: _spacing.spacing['size-5'],
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: _spacing.spacing['size-4'],
+    marginTop: _spacing.spacing['size-2']
+  },
+  footer: {
+    backgroundColor: 'white',
+    padding: _spacing.spacing['size-4'],
+    paddingBottom: _spacing.spacing['size-10']
+  }
+});

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

@@ -0,0 +1 @@
+export * from './BottomSheet';

package/lib/molecules/BottomSheet/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _BottomSheet = require("./BottomSheet");
+Object.keys(_BottomSheet).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BottomSheet[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BottomSheet[key];
+    }
+  });
+});

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

@@ -0,0 +1,14 @@
+import { TextInput, KeyboardTypeOptions, TextInputProps } from "react-native";
+import { IconName } from "dropi-lib-icons";
+export declare const BaseInput: import("react").ForwardRefExoticComponent<TextInputProps & {
+    type?: KeyboardTypeOptions;
+    preIcon?: IconName;
+    label?: string;
+    helper?: string;
+    placeholder?: string;
+    tooltip?: string;
+    value: string;
+    hasError: boolean;
+    errorMessage?: string;
+    isFocus: boolean;
+} & import("react").RefAttributes<TextInput>>;

package/lib/molecules/InputField/BaseInput.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseInput = void 0;
+var _reactNative = require("react-native");
+var _molecules = require("./molecules");
+var _styles = _interopRequireDefault(require("./styles"));
+var _react = require("react");
+var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BaseInput = exports.BaseInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  type = "default",
+  preIcon,
+  label,
+  helper,
+  placeholder,
+  tooltip,
+  value,
+  hasError,
+  errorMessage,
+  isFocus,
+  /** TextInput props */
+  ...rest
+}, ref) => {
+  const getBorderColor = () => {
+    if (hasError) {
+      return _constants.colors["Error-500"].light;
+    }
+    if (isFocus) {
+      return _constants.colors["Info-500"].light;
+    }
+    return _constants.colors["Gray-200"].light;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _styles.default.fieldContainer,
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputLabel, {
+      text: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_styles.default.searchbarContainer, {
+        borderColor: getBorderColor()
+      }],
+      children: [preIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputIcon, {
+        icon: preIcon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [_styles.default.searchContainer, {
+          marginLeft: preIcon ? _constants.spacing["size-2"] : 0
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: ref,
+          style: _styles.default.usernameInput,
+          placeholder: placeholder,
+          placeholderTextColor: _constants.colors["Gray-500"].light,
+          value: value,
+          keyboardType: type,
+          ...rest
+        })
+      })]
+    }), helper && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputHelper, {
+      helperText: helper
+    }), hasError && errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputError, {
+      errorMessage: errorMessage
+    })]
+  });
+});

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

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

package/lib/molecules/InputField/EmailInput.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateEmail = exports.EmailInput = void 0;
+var _BaseInput = require("./BaseInput");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const validateEmail = value => {
+  // Regular expression for validating email addresses
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(value);
+};
+exports.validateEmail = validateEmail;
+const EmailInput = ({
+  preIcon,
+  helper,
+  tooltip,
+  value,
+  onChange,
+  hasError,
+  errorMessage,
+  readOnly
+}) => {
+  const [incorrectEmail, setIncorrectEmail] = (0, _react.useState)(false);
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const [wasVisited, setWasVisited] = (0, _react.useState)(false);
+  const onFocus = () => {
+    setFocus(true);
+  };
+  const onBlur = () => {
+    setFocus(false);
+    if (!wasVisited) {
+      setWasVisited(true);
+      if (!validateEmail(value)) {
+        setIncorrectEmail(true);
+      }
+    }
+  };
+  const getErrorMessage = () => {
+    if (hasError) {
+      return errorMessage;
+    }
+    if (incorrectEmail) {
+      return "Ingresa un correo electrónico válido";
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseInput.BaseInput, {
+    type: "email-address",
+    label: "Correo electrónico",
+    placeholder: "Ingresa tu correo electrónico",
+    value: value,
+    preIcon: preIcon,
+    helper: helper,
+    tooltip: tooltip,
+    onChangeText: text => {
+      onChange(text);
+      if (wasVisited) {
+        if (validateEmail(value)) {
+          setIncorrectEmail(false);
+        } else {
+          setIncorrectEmail(true);
+        }
+      }
+    },
+    hasError: hasError || incorrectEmail,
+    errorMessage: getErrorMessage(),
+    autoCorrect: false,
+    autoCapitalize: "none",
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    isFocus: focus
+  });
+};
+exports.EmailInput = EmailInput;

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

@@ -0,0 +1,26 @@
+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;
+    preIcon?: import("dropi-lib-icons").IconName;
+    label?: string;
+    helper?: string;
+    placeholder?: string;
+    tooltip?: string;
+    value: string;
+    hasError: boolean;
+    errorMessage?: string;
+    isFocus: boolean;
+} & import("react").RefAttributes<import("react-native").TextInput>> | (({ 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);
+export {};

package/lib/molecules/InputField/Input.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+var _BaseInput = require("./BaseInput");
+var _EmailInput = require("./EmailInput");
+// import { PasswordInput } from "./PasswordInput"
+
+const InputComponents = {
+  text: _BaseInput.BaseInput,
+  number: _BaseInput.BaseInput,
+  email: _EmailInput.EmailInput,
+  password: _EmailInput.EmailInput
+};
+const Input = ({
+  type,
+  ...props
+}) => {
+  return InputComponents[type];
+};
+exports.Input = Input;

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

@@ -0,0 +1,11 @@
+import { TextInput, TextInputProps } from "react-native";
+import { IconName } from "dropi-lib-icons";
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<TextInputProps & {
+    preIcon?: IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChangeFunction: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+} & import("react").RefAttributes<TextInput>>;

package/lib/molecules/InputField/PasswordInput.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PasswordInput = void 0;
+var _reactNative = require("react-native");
+var _constants = require("./../../constants");
+var _molecules = require("./molecules");
+var _styles = _interopRequireDefault(require("./styles"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  preIcon,
+  helper,
+  tooltip,
+  value,
+  onChangeFunction,
+  hasError,
+  errorMessage,
+  /** TextInput props */
+  ...rest
+}, ref) => {
+  const [passwordVisibility, setPasswordVisibility] = (0, _react.useState)(false);
+  const [incorrectPasswordLength, setIncorrectPasswordLength] = (0, _react.useState)(false);
+  const [focus, setFocus] = (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.length < 4) {
+        setIncorrectPasswordLength(true);
+      }
+    }
+  };
+  const getBorderColor = () => {
+    if (hasError || incorrectPasswordLength) {
+      return _constants.colors["Error-500"].light;
+    }
+    if (focus) {
+      return _constants.colors["Info-500"].light;
+    }
+    return _constants.colors["Gray-200"].light;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _styles.default.fieldContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputLabel, {
+      text: "Contraseña"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_styles.default.searchbarContainer, {
+        borderColor: getBorderColor()
+      }],
+      children: [preIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputIcon, {
+        icon: preIcon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [_styles.default.searchContainer, {
+          marginLeft: preIcon ? _constants.spacing["size-2"] : 0
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: ref,
+          style: _styles.default.usernameInput,
+          placeholder: "Ingresa tu contraseña",
+          placeholderTextColor: _constants.colors["Gray-500"].light,
+          value: value,
+          secureTextEntry: !passwordVisibility,
+          onChangeText: text => {
+            onChangeFunction(text);
+            if (wasVisited) {
+              if (text.length < 4) {
+                setIncorrectPasswordLength(true);
+              } else {
+                setIncorrectPasswordLength(false);
+              }
+            }
+          },
+          onFocus: onFocus,
+          onBlur: onBlur,
+          ...rest
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputIcon, {
+        icon: passwordVisibility ? "eye-crossed" : "eye",
+        onClick: () => setPasswordVisibility(!passwordVisibility)
+      })]
+    }), helper && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputHelper, {
+      helperText: helper
+    }), incorrectPasswordLength && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputError, {
+      errorMessage: "La contraseña debe tener al menos 4 caracteres"
+    }), hasError && errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_molecules.InputError, {
+      errorMessage: errorMessage
+    })]
+  });
+});

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

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

package/lib/molecules/InputField/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _EmailInput = require("./EmailInput");
+Object.keys(_EmailInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EmailInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _EmailInput[key];
+    }
+  });
+});
+var _PasswordInput = require("./PasswordInput");
+Object.keys(_PasswordInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PasswordInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PasswordInput[key];
+    }
+  });
+});
+var _BaseInput = require("./BaseInput");
+Object.keys(_BaseInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BaseInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BaseInput[key];
+    }
+  });
+});

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

@@ -0,0 +1,5 @@
+type ErrorProps = {
+    errorMessage: string;
+};
+export declare const InputError: ({ errorMessage }: ErrorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/molecules/InputError.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputError = void 0;
+var _reactNative = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _reactNative2 = require("react-native");
+var _constants = require("../../../constants");
+var _atoms = require("../../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const InputError = ({
+  errorMessage
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative2.View, {
+  style: styles.errorContainer,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.View, {
+    style: styles.errorIcon,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.default, {
+      name: "warning-circle-outline",
+      size: _constants.sizes["s"],
+      color: _constants.colors["Error-500"].light
+    })
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+    type: "s-regular",
+    style: styles.errorText,
+    children: errorMessage
+  })]
+});
+exports.InputError = InputError;
+const styles = _reactNative2.StyleSheet.create({
+  errorContainer: {
+    marginTop: _constants.spacing["size-2"],
+    flexDirection: "row",
+    width: "100%"
+  },
+  errorIcon: {
+    alignItems: "center",
+    paddingTop: _constants.spacing["size-1"]
+  },
+  errorText: {
+    color: _constants.colors["Error-500"].light,
+    marginLeft: _constants.spacing["size-1"],
+    flex: 1
+  }
+});

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

@@ -0,0 +1,5 @@
+type HelperProps = {
+    helperText: string;
+};
+export declare const InputHelper: ({ helperText }: HelperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/molecules/InputHelper.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputHelper = void 0;
+var _reactNative = require("react-native");
+var _atoms = require("../../../atoms");
+var _constants = require("../../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+const InputHelper = ({
+  helperText
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: {
+    marginTop: _constants.spacing["size-2"]
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+    type: "s-regular",
+    style: {
+      color: _constants.colors["Gray-600"].light
+    },
+    children: helperText
+  })
+});
+exports.InputHelper = InputHelper;

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

@@ -0,0 +1,7 @@
+import { IconName } from "dropi-lib-icons";
+type IconProps = {
+    icon: IconName;
+    onClick?: () => void;
+};
+export declare const InputIcon: ({ icon, onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/molecules/InputIcon.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputIcon = void 0;
+var _reactNative = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _reactNative2 = require("react-native");
+var _constants = require("../../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const InputIcon = ({
+  icon,
+  onClick
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.TouchableOpacity, {
+  style: styles.userAvatarContainer,
+  onPress: onClick,
+  activeOpacity: onClick ? 0 : 1,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.default, {
+    name: icon,
+    size: _constants.sizes["xl"],
+    color: _constants.colors["Gray-400"].light
+  })
+});
+exports.InputIcon = InputIcon;
+const styles = _reactNative2.StyleSheet.create({
+  userAvatarContainer: {
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});

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

@@ -0,0 +1,5 @@
+type LabelProps = {
+    text: string;
+};
+export declare const InputLabel: ({ text }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/molecules/InputLabel.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputLabel = void 0;
+var _atoms = require("../../../atoms");
+var _constants = require("../../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+const InputLabel = ({
+  text
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+  type: "m-regular",
+  style: {
+    color: _constants.colors["Gray-600"].light
+  },
+  children: text
+});
+exports.InputLabel = InputLabel;

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

@@ -0,0 +1,4 @@
+export * from "./InputLabel";
+export * from "./InputIcon";
+export * from "./InputHelper";
+export * from "./InputError";

package/lib/molecules/InputField/molecules/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _InputLabel = require("./InputLabel");
+Object.keys(_InputLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputLabel[key];
+    }
+  });
+});
+var _InputIcon = require("./InputIcon");
+Object.keys(_InputIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputIcon[key];
+    }
+  });
+});
+var _InputHelper = require("./InputHelper");
+Object.keys(_InputHelper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputHelper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputHelper[key];
+    }
+  });
+});
+var _InputError = require("./InputError");
+Object.keys(_InputError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputError[key];
+    }
+  });
+});

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

@@ -0,0 +1,27 @@
+declare const _default: {
+    fieldContainer: {
+        marginBottom: number;
+        width: "100%";
+    };
+    searchbarContainer: {
+        width: "100%";
+        borderRadius: number;
+        borderWidth: number;
+        justifyContent: "space-between";
+        flexDirection: "row";
+        marginTop: number;
+        height: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    searchContainer: {
+        flex: number;
+        justifyContent: "center";
+    };
+    usernameInput: {
+        fontWeight: "400";
+        color: "#475066";
+        fontSize: number;
+    };
+};
+export default _default;

package/lib/molecules/InputField/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("./../../constants");
+var _reactNative = require("react-native");
+var _default = exports.default = _reactNative.StyleSheet.create({
+  fieldContainer: {
+    marginBottom: _constants.spacing["size-4"],
+    width: "100%"
+  },
+  searchbarContainer: {
+    width: "100%",
+    borderRadius: _constants.radius["border-2"],
+    borderWidth: 1,
+    justifyContent: "space-between",
+    flexDirection: "row",
+    marginTop: _constants.spacing["size-2"],
+    height: 48,
+    paddingHorizontal: _constants.spacing["size-3"],
+    paddingVertical: _constants.spacing["size-2"]
+  },
+  searchContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  usernameInput: {
+    fontWeight: _constants.weights.regular,
+    color: _constants.colors["Gray-600"].light,
+    fontSize: _constants.sizes.s
+  }
+});

package/lib/molecules/Select/Select.d.ts

@@ -0,0 +1,18 @@
+export type SelectOption = {
+    label: string;
+    value: string | number;
+};
+type SelectProps = {
+    options: SelectOption[];
+    value?: SelectOption | null;
+    onChange: (option: SelectOption) => void;
+    label?: string;
+    placeholder?: string;
+    helper?: string;
+    hasError?: boolean;
+    errorMessage?: string;
+    title?: string;
+    disabled?: boolean;
+};
+export declare const Select: ({ options, value, onChange, label, placeholder, helper, hasError, errorMessage, title, disabled, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Select/Select.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _atoms = require("../../atoms");
+var _BottomSheet = require("../BottomSheet");
+var _constants = require("../../constants/");
+var _RadioButtons = require("../RadioButtons");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Select = ({
+  options,
+  value = null,
+  onChange,
+  label,
+  placeholder = 'Seleccionar',
+  helper,
+  hasError = false,
+  errorMessage,
+  title,
+  disabled = false
+}) => {
+  const bottomSheetRef = (0, _react.useRef)(null);
+  const [isFocus, setIsFocus] = (0, _react.useState)(false);
+  const [draftSelection, setDraftSelection] = (0, _react.useState)(null);
+  const currentValue = value;
+  const getBorderColor = () => {
+    if (hasError) return _constants.colors['Error-500'].light;
+    if (isFocus) return _constants.colors['Info-500'].light;
+    return _constants.colors['Gray-200'].light;
+  };
+  const hasChanges = (0, _react.useMemo)(() => {
+    if (!draftSelection) return false;
+    return draftSelection.value !== currentValue?.value;
+  }, [draftSelection, currentValue]);
+  const handleOpen = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    setDraftSelection(currentValue);
+    setIsFocus(true);
+    bottomSheetRef.current?.present();
+  }, [disabled, currentValue]);
+  const handleDraftSelect = (0, _react.useCallback)(option => {
+    setDraftSelection(option);
+  }, []);
+  const handleSave = (0, _react.useCallback)(() => {
+    if (draftSelection) {
+      onChange(draftSelection);
+    }
+    bottomSheetRef.current?.dismiss();
+    setIsFocus(false);
+  }, [draftSelection, onChange]);
+  const handleDismiss = (0, _react.useCallback)(() => {
+    setIsFocus(false);
+    setDraftSelection(null);
+  }, []);
+  const renderOption = (0, _react.useCallback)(({
+    item
+  }) => {
+    const isSelected = draftSelection?.value === item.value;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtons.TitleDescription, {
+      title: item.label,
+      isActive: isSelected,
+      onPress: () => handleDraftSelect(item)
+    });
+  }, [draftSelection, handleDraftSelect]);
+  const footer = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+    label: "Guardar",
+    variant: "primary",
+    size: "large",
+    onPress: handleSave,
+    disabled: !hasChanges
+  }), [handleSave, hasChanges]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.fieldContainer,
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+      type: "m-regular",
+      style: {
+        color: _constants.colors['Gray-600'].light
+      },
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: [styles.selectButton, {
+        borderColor: getBorderColor()
+      }, disabled && styles.disabled],
+      onPress: handleOpen,
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "s-regular",
+        style: {
+          color: currentValue ? _constants.colors['Gray-600'].light : _constants.colors['Gray-500'].light,
+          flex: 1
+        },
+        children: currentValue?.label ?? placeholder
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+        name: "dropdown-down",
+        size: _constants.sizes.xl,
+        color: _constants.colors['Gray-400'].light
+      })]
+    }), helper && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginTop: _constants.spacing['size-2']
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "s-regular",
+        style: {
+          color: _constants.colors['Gray-600'].light
+        },
+        children: helper
+      })
+    }), hasError && errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.errorContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.errorIcon,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+          name: "warning-circle",
+          size: _constants.sizes.s,
+          color: _constants.colors['Error-500'].light
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "s-regular",
+        style: styles.errorText,
+        children: errorMessage
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomSheet.BottomSheetComponent, {
+      ref: bottomSheetRef,
+      title: title ?? label ?? 'Seleccionar',
+      snapPoints: ['50%', '70%', '90%'],
+      onDismiss: handleDismiss,
+      footer: footer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        data: options,
+        keyExtractor: item => String(item.value),
+        renderItem: renderOption,
+        contentContainerStyle: styles.optionsList,
+        showsVerticalScrollIndicator: false
+      })
+    })]
+  });
+};
+exports.Select = Select;
+const styles = _reactNative.StyleSheet.create({
+  fieldContainer: {
+    marginBottom: _constants.spacing['size-4'],
+    width: '100%'
+  },
+  selectButton: {
+    width: '100%',
+    borderRadius: _constants.radius['border-2'],
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: _constants.spacing['size-2'],
+    height: 48,
+    paddingHorizontal: _constants.spacing['size-3']
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  errorContainer: {
+    marginTop: _constants.spacing['size-2'],
+    flexDirection: 'row',
+    width: '100%'
+  },
+  errorIcon: {
+    alignItems: 'center',
+    paddingTop: _constants.spacing['size-1']
+  },
+  errorText: {
+    color: _constants.colors['Error-500'].light,
+    marginLeft: _constants.spacing['size-1'],
+    flex: 1
+  },
+  optionsList: {
+    paddingHorizontal: _constants.spacing['size-5']
+  }
+});

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

@@ -0,0 +1 @@
+export * from './Select';

package/lib/molecules/Select/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Select = require("./Select");
+Object.keys(_Select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Select[key];
+    }
+  });
+});

package/lib/molecules/index.d.ts

@@ -1,7 +1,10 @@
-export * from './Alert';
-export * from './EmptyState';
-export * from './RadioButtons';
-export * from './Search';
-export * from './Tooltip';
-export * from './Toasts';
-export * from './Tags';
+export * from "./Alert";
+export * from "./BottomSheet";
+export * from "./EmptyState";
+export * from "./RadioButtons";
+export * from "./Search";
+export * from "./Select";
+export * from "./Tooltip";
+export * from "./Toasts";
+export * from "./Tags";
+export * from "./InputField";

package/lib/molecules/index.js

@@ -14,6 +14,17 @@ Object.keys(_Alert).forEach(function (key) {
     }
   });
 });
+var _BottomSheet = require("./BottomSheet");
+Object.keys(_BottomSheet).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BottomSheet[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BottomSheet[key];
+    }
+  });
+});
 var _EmptyState = require("./EmptyState");
 Object.keys(_EmptyState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -47,6 +58,17 @@ Object.keys(_Search).forEach(function (key) {
     }
   });
 });
+var _Select = require("./Select");
+Object.keys(_Select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Select[key];
+    }
+  });
+});
 var _Tooltip = require("./Tooltip");
 Object.keys(_Tooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -79,4 +101,15 @@ Object.keys(_Tags).forEach(function (key) {
       return _Tags[key];
     }
   });
+});
+var _InputField = require("./InputField");
+Object.keys(_InputField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InputField[key];
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -20,12 +20,15 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-native": ">=0.79.5",
-    "dropi-lib-icons": ">=1.2.5",
+    "@gorhom/bottom-sheet": ">=5.2.6",
+    "dropi-lib-icons": ">=1.3.4",
+    "expo-constants": ">=17.1.7",
     "expo-image": ">=2.4.0",
     "lottie-react-native": ">=7.2.2",
-    "expo-constants": ">=17.1.7"
+    "react": ">=19.0.0",
+    "react-native": ">=0.79.5",
+    "react-native-gesture-handler": ">=2.24.0",
+    "react-native-reanimated": ">=3.19.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
@@ -33,13 +36,16 @@
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
+    "@gorhom/bottom-sheet": "^5.2.6",
     "@types/react": "^19.2.3",
-    "react": "^19.2.0",
-    "react-native": "^0.82.1",
-    "typescript": "^5.6.0",
-    "dropi-lib-icons": "^1.2.5",
+    "dropi-lib-icons": "^1.3.4",
+    "expo-constants": ">=17.1.7",
     "expo-image": ">=2.4.0",
     "lottie-react-native": ">=7.2.2",
-    "expo-constants": ">=17.1.7"
+    "react": "^19.2.0",
+    "react-native": "^0.82.1",
+    "react-native-gesture-handler": "^2.24.0",
+    "react-native-reanimated": "^3.19.1",
+    "typescript": "^5.6.0"
   }
 }