@dropi/react-native-design-system 0.3.23 → 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/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.23",
+  "version": "0.3.24",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",