@dropi/react-native-design-system 0.2.12 → 0.2.14

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/Chip/Chip.d.ts

@@ -0,0 +1,11 @@
+import { IconName } from "dropi-lib-icons";
+type ChipVariant = "primary" | "tertiary";
+type ChipProps = {
+    variant?: ChipVariant;
+    preIcon?: IconName;
+    label: string;
+    isDismissable?: boolean;
+    onDismiss?: () => void;
+};
+export declare const Chip: ({ variant, preIcon, label, isDismissable, onDismiss, }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Chip/Chip.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = void 0;
+var _reactNative = require("react-native");
+var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _constants = require("../../constants");
+var _styles = _interopRequireDefault(require("./styles"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Chip = ({
+  variant = "tertiary",
+  preIcon,
+  label,
+  isDismissable = false,
+  onDismiss
+}) => {
+  const containerStyle = variant === "primary" ? _styles.default.primaryContainer : _styles.default.tertiaryContainer;
+  const textStyle = variant === "primary" ? _styles.default.primaryText : _styles.default.tertiaryText;
+  const iconColor = variant === "primary" ? _constants.colors["Primary-500"].light : _constants.colors["Gray-600"].light;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [_styles.default.container, containerStyle],
+    children: [preIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+      name: preIcon,
+      size: _constants.sizes.s,
+      color: iconColor
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [_styles.default.text, textStyle],
+      children: label
+    }), isDismissable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onDismiss,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      activeOpacity: 0.7,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+        name: "cross-circle",
+        size: _constants.sizes.s,
+        color: iconColor
+      })
+    })]
+  });
+};
+exports.Chip = Chip;

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

@@ -0,0 +1 @@
+export * from "./Chip";

package/lib/molecules/Chip/index.js

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

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

@@ -0,0 +1,29 @@
+declare const _default: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        alignSelf: "flex-start";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        gap: number;
+    };
+    primaryContainer: {
+        backgroundColor: "#FEF8F1";
+    };
+    tertiaryContainer: {
+        backgroundColor: "#E6EAF2";
+    };
+    text: {
+        fontSize: number;
+        fontWeight: "700";
+        lineHeight: number;
+    };
+    primaryText: {
+        color: "#F49A3D";
+    };
+    tertiaryText: {
+        color: "#475066";
+    };
+};
+export default _default;

package/lib/molecules/Chip/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _constants = require("../../constants");
+var _default = exports.default = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    paddingHorizontal: _constants.spacing["size-2"],
+    paddingVertical: _constants.spacing["size-1"],
+    borderRadius: _constants.radius["border-1"],
+    gap: _constants.spacing["size-1"]
+  },
+  primaryContainer: {
+    backgroundColor: _constants.colors["Primary-50"].light
+  },
+  tertiaryContainer: {
+    backgroundColor: _constants.colors["Gray-100"].light
+  },
+  text: {
+    fontSize: _constants.sizes.xs,
+    fontWeight: _constants.weights.bold,
+    lineHeight: 14
+  },
+  primaryText: {
+    color: _constants.colors["Primary-500"].light
+  },
+  tertiaryText: {
+    color: _constants.colors["Gray-600"].light
+  }
+});

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

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

package/lib/molecules/InputField/index.js

@@ -24,4 +24,15 @@ Object.keys(_PasswordInput).forEach(function (key) {
       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/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 "./BottomSheet";
+export * from "./Chip";
 export * from "./EmptyState";
 export * from "./RadioButtons";
 export * from "./Search";
+export * from "./Select";
 export * from "./Tooltip";
 export * from "./Toasts";
 export * from "./Tags";

package/lib/molecules/index.js

@@ -14,6 +14,28 @@ 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 _Chip = require("./Chip");
+Object.keys(_Chip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Chip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Chip[key];
+    }
+  });
+});
 var _EmptyState = require("./EmptyState");
 Object.keys(_EmptyState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -47,6 +69,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -20,12 +20,15 @@
   ],
   "license": "MIT",
   "peerDependencies": {
+    "@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",
     "react": ">=19.0.0",
-    "react-native": ">=0.79.5"
+    "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,6 +36,7 @@
     "@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",
     "dropi-lib-icons": "^1.3.4",
     "expo-constants": ">=17.1.7",
@@ -40,6 +44,8 @@
     "lottie-react-native": ">=7.2.2",
     "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"
   }
 }