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

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,31 @@
+declare const _default: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        alignSelf: "flex-start";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        gap: number;
+        borderWidth: number;
+        borderColor: "#C3C9D9";
+    };
+    primaryContainer: {
+        backgroundColor: "#FEF8F1";
+    };
+    tertiaryContainer: {
+        backgroundColor: "#F7F8FA";
+    };
+    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,38 @@
+"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"],
+    borderWidth: 1,
+    borderColor: _constants.colors["Gray-200"].light
+  },
+  primaryContainer: {
+    backgroundColor: _constants.colors["Primary-50"].light
+  },
+  tertiaryContainer: {
+    backgroundColor: _constants.colors["Gray-50"].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/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./Alert";
 export * from "./BottomSheet";
+export * from "./Chip";
 export * from "./EmptyState";
 export * from "./RadioButtons";
 export * from "./Search";

package/lib/molecules/index.js

@@ -25,6 +25,17 @@ Object.keys(_BottomSheet).forEach(function (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;

package/package.json

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