@dropi/react-native-design-system 0.3.22 → 0.3.24

package/lib/molecules/Checkbox/Checkbox.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    title: string;
+    description?: string;
+    isChecked: boolean;
+    useCard?: boolean;
+    onToggle: () => void;
+};
+export declare const Checkbox: ({ title, description, isChecked, useCard, onToggle }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Checkbox/Checkbox.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = void 0;
+var _reactNative = require("react-native");
+var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _constants = require("../../constants");
+var _atoms = require("../../atoms");
+var _utils = require("../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Checkbox = ({
+  title,
+  description,
+  isChecked,
+  useCard = true,
+  onToggle
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [styles.container, useCard && styles.useCard, isChecked && useCard && styles.checkedContainer],
+    onPress: onToggle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "m-regular",
+        children: title
+      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+        type: "s-regular",
+        children: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.checkbox, isChecked && styles.checkedCheckbox],
+      children: isChecked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+        name: "check",
+        size: 16,
+        color: _constants.colors.White.light
+      })
+    })]
+  });
+};
+exports.Checkbox = Checkbox;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: _constants.spacing['size-4'],
+    marginTop: _constants.spacing['size-4']
+  },
+  checkedContainer: {
+    backgroundColor: _constants.colors['Primary-50'].light,
+    borderColor: _constants.colors['Primary-500'].light,
+    borderWidth: 1
+  },
+  useCard: {
+    borderRadius: _constants.radius['border-2'],
+    borderWidth: 1,
+    borderColor: _constants.colors['Gray-200'].light
+  },
+  checkbox: {
+    width: !_utils.isTablet ? 24 : 32,
+    height: !_utils.isTablet ? 24 : 32,
+    borderRadius: _constants.radius['border-1'],
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: _constants.colors['Gray-200'].light
+  },
+  checkedCheckbox: {
+    backgroundColor: _constants.colors['Primary-500'].light,
+    borderColor: _constants.colors['Primary-500'].light
+  }
+});

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

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

package/lib/molecules/Checkbox/index.js

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

package/lib/molecules/DialogModal/DialogModal.js

@@ -42,7 +42,7 @@ const DialogModal = ({
       case "warning":
         return {
           lottieFile: require("../../../assets/lottie/alerta.json"),
-          iconName: "warning-circle",
+          iconName: "warning-circle-outline",
           color: _constants.colors["Warning-500"].light
         };
       case "info":

package/lib/molecules/Select/Select.js

@@ -118,7 +118,7 @@ const Select = ({
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
         type: "m-regular",
         style: {
-          color: currentValue ? _constants.colors["Gray-600"].light : _constants.colors["Gray-400"].light,
+          color: currentValue?.value ? _constants.colors["Gray-600"].light : _constants.colors["Gray-500"].light,
           flex: 1
         },
         numberOfLines: 1,

package/lib/molecules/index.d.ts

@@ -10,3 +10,4 @@ export * from "./Toasts";
 export * from "./Tags";
 export * from "./InputField";
 export * from "./DialogModal";
+export * from "./Checkbox";

package/lib/molecules/index.js

@@ -134,4 +134,15 @@ Object.keys(_DialogModal).forEach(function (key) {
       return _DialogModal[key];
     }
   });
+});
+var _Checkbox = require("./Checkbox");
+Object.keys(_Checkbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Checkbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Checkbox[key];
+    }
+  });
 });

package/package.json

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