@bigbinary/neetoui-rn 0.0.96 → 0.0.99

package/README.md

@@ -1,8 +1,9 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/1772e21c-61b9-4100-9b2e-9b0d1ce6a210/deploy-status)](https://app.netlify.com/sites/neetoui-rn/deploys)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/717761ba-353e-4417-9860-86e49b78ac36/deploy-status)](https://app.netlify.com/sites/neetoui-rn-docs/deploys)
 
-**neetoUI-RN** is the library that drives the experience in all [neeto product's](https://neeto.com/) React
-Native application built at [BigBinary](https://www.bigbinary.com).
+**neetoUI-RN** is the library that drives the experience in all
+[neeto product's](https://neeto.com/) React Native application built at
+[BigBinary](https://www.bigbinary.com).
 
 ## Documentation
 
@@ -80,8 +81,8 @@ You can use below commands for running storybook in different platforms:
 ## Auto Publish to NPM
 
 neetoUI-RN version gets patched, auto-incremented and auto-published to npm on
-new commit to master. You can checkout the `publish` workflow in Github actions to
-get a live update.
+new commit to master. You can checkout the `publish` workflow in Github actions
+to get a live update.
 
 ## Building Storybook
 

package/lib/components/CheckBox.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CheckBox=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["selected","onSelect","checkedComponent","checkedItemProp","disabled","label","labelComponent","labelProp","labelPosition","checkboxContainerProp"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/CheckBox.js";var LABEL_POSITIONS=["left","right"];var LabelComponent=function LabelComponent(_ref){var label=_ref.label,labelComponent=_ref.labelComponent,labelProp=_ref.labelProp;return labelComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},labelProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:28}}),label);};var CheckBox=function CheckBox(_ref2){var _ref2$selected=_ref2.selected,selected=_ref2$selected===void 0?false:_ref2$selected,_ref2$onSelect=_ref2.onSelect,onSelect=_ref2$onSelect===void 0?function(){}:_ref2$onSelect,_ref2$checkedComponen=_ref2.checkedComponent,checkedComponent=_ref2$checkedComponen===void 0?null:_ref2$checkedComponen,_ref2$checkedItemProp=_ref2.checkedItemProp,checkedItemProp=_ref2$checkedItemProp===void 0?{}:_ref2$checkedItemProp,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled,_ref2$label=_ref2.label,label=_ref2$label===void 0?"Option":_ref2$label,_ref2$labelComponent=_ref2.labelComponent,labelComponent=_ref2$labelComponent===void 0?null:_ref2$labelComponent,_ref2$labelProp=_ref2.labelProp,labelProp=_ref2$labelProp===void 0?{}:_ref2$labelProp,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?"right":_ref2$labelPosition,_ref2$checkboxContain=_ref2.checkboxContainerProp,checkboxContainerProp=_ref2$checkboxContain===void 0?{}:_ref2$checkboxContain,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,onPress:onSelect,opacity:disabled?0.5:1,flexDirection:"row",alignItems:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:5}}),labelPosition===LABEL_POSITIONS[0]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({mr:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}}):null,_react.default.createElement(_.Container,(0,_extends2.default)({borderColor:"background.base",borderWidth:1,borderRadius:5,justifyContent:"center",alignItems:"center",width:20,height:20},checkboxContainerProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:7}}),selected&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:11}},checkedComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},checkedItemProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:93,columnNumber:15}}),"\u2713"))),labelPosition===LABEL_POSITIONS[1]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({ml:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:9}}):null);};exports.CheckBox=CheckBox;CheckBox.propTypes={selected:_propTypes.default.bool.isRequired,onSelect:_propTypes.default.func.isRequired,disabled:_propTypes.default.bool,checkedComponent:_propTypes.default.element,checkedItemProp:_propTypes.default.object,label:_propTypes.default.string,labelProp:_propTypes.default.object,labelComponent:_propTypes.default.element,labelPosition:_propTypes.default.oneOf(LABEL_POSITIONS),checkboxContainerProp:_propTypes.default.object};LabelComponent.propTypes={label:_propTypes.default.string,labelComponent:_propTypes.default.element,labelProp:_propTypes.default.object};

package/lib/components/RadioButton.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.RadioButton=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["radioButtonWidth","radioButtonSelectedWidth","containerBg","innerActiveBg","innerInActiveBg","onSelect","selected","density","label","labelComponent","labelProp","labelPosition","disabled"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RadioButton.js";var LABEL_POSITIONS=["left","right"];var LabelComponent=function LabelComponent(_ref){var label=_ref.label,labelComponent=_ref.labelComponent,labelProp=_ref.labelProp;return labelComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},labelProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:28}}),label);};var RadioButton=function RadioButton(_ref2){var _ref2$radioButtonWidt=_ref2.radioButtonWidth,radioButtonWidth=_ref2$radioButtonWidt===void 0?20:_ref2$radioButtonWidt,_ref2$radioButtonSele=_ref2.radioButtonSelectedWidth,radioButtonSelectedWidth=_ref2$radioButtonSele===void 0?10:_ref2$radioButtonSele,_ref2$containerBg=_ref2.containerBg,containerBg=_ref2$containerBg===void 0?"background.grey":_ref2$containerBg,_ref2$innerActiveBg=_ref2.innerActiveBg,innerActiveBg=_ref2$innerActiveBg===void 0?"background.base":_ref2$innerActiveBg,_ref2$innerInActiveBg=_ref2.innerInActiveBg,innerInActiveBg=_ref2$innerInActiveBg===void 0?"background.secondary":_ref2$innerInActiveBg,_ref2$onSelect=_ref2.onSelect,onSelect=_ref2$onSelect===void 0?function(){}:_ref2$onSelect,_ref2$selected=_ref2.selected,selected=_ref2$selected===void 0?null:_ref2$selected,_ref2$density=_ref2.density,density=_ref2$density===void 0?5:_ref2$density,_ref2$label=_ref2.label,label=_ref2$label===void 0?"Option":_ref2$label,_ref2$labelComponent=_ref2.labelComponent,labelComponent=_ref2$labelComponent===void 0?null:_ref2$labelComponent,_ref2$labelProp=_ref2.labelProp,labelProp=_ref2$labelProp===void 0?{}:_ref2$labelProp,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?"right":_ref2$labelPosition,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,opacity:disabled?0.5:1,onPress:onSelect,flexDirection:"row",alignItems:"center",py:1},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:5}}),labelPosition===LABEL_POSITIONS[0]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({mr:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:73,columnNumber:9}}):null,_react.default.createElement(_.Container,{bg:containerBg,height:radioButtonWidth,width:radioButtonWidth,borderRadius:radioButtonWidth/2,justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:7}},_react.default.createElement(_.Container,{height:radioButtonSelectedWidth+density,width:radioButtonSelectedWidth+density,borderRadius:(radioButtonSelectedWidth+density)/2,bg:"background.white",justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:87,columnNumber:9}},_react.default.createElement(_.Container,{bg:selected?innerActiveBg:innerInActiveBg,height:radioButtonSelectedWidth,width:radioButtonSelectedWidth,borderRadius:radioButtonSelectedWidth/2,m:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:11}}))),labelPosition===LABEL_POSITIONS[1]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({ml:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:105,columnNumber:9}}):null);};exports.RadioButton=RadioButton;RadioButton.propTypes={onSelect:_propTypes.default.func.isRequired,selected:_propTypes.default.any.isRequired,label:_propTypes.default.string,labelProp:_propTypes.default.object,labelComponent:_propTypes.default.element,labelPosition:_propTypes.default.oneOf(LABEL_POSITIONS),disabled:_propTypes.default.bool,radioButtonWidth:_propTypes.default.number,radioButtonSelectedWidth:_propTypes.default.number,containerBg:_propTypes.default.string,innerActiveBg:_propTypes.default.string,innerInActiveBg:_propTypes.default.string,density:_propTypes.default.number};LabelComponent.propTypes={label:_propTypes.default.string,labelComponent:_propTypes.default.element,labelProp:_propTypes.default.object};

package/lib/components/TopBar.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TopBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _theme=require("../theme");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/TopBar.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TopBar=function TopBar(_ref){var data=_ref.data,_ref$activeIndex=_ref.activeIndex,activeIndex=_ref$activeIndex===void 0?0:_ref$activeIndex,_ref$onActiveTabChang=_ref.onActiveTabChange,onActiveTabChange=_ref$onActiveTabChang===void 0?function(){}:_ref$onActiveTabChang,activeTabTextStyle=_ref.activeTabTextStyle,activeTabContainerStyle=_ref.activeTabContainerStyle,inActiveTabTextStyle=_ref.inActiveTabTextStyle,inActiveTabContainerStyle=_ref.inActiveTabContainerStyle,tabContainerStyle=_ref.tabContainerStyle;var _useState=(0,_react.useState)(activeIndex),_useState2=(0,_slicedToArray2.default)(_useState,2),selectedIndex=_useState2[0],setSelectedIndex=_useState2[1];(0,_react.useEffect)(function(){onActiveTabChange(selectedIndex);},[selectedIndex]);(0,_react.useEffect)(function(){setSelectedIndex(activeIndex);},[activeIndex]);return _react.default.createElement(_.Container,{height:50,style:[styles.defaultTabContainerStyle,tabContainerStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:5}},_react.default.createElement(_reactNative.ScrollView,{horizontal:true,showsHorizontalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:34,columnNumber:7}},data.map(function(item,index){return _react.default.createElement(_.Touchable,{key:index,onPress:function onPress(){return setSelectedIndex(index);},style:selectedIndex===index?(0,_extends2.default)({},styles.defaultActiveContainerStyle,activeTabContainerStyle):(0,_extends2.default)({},styles.defaultInActiveTabContainerStyle,inActiveTabContainerStyle),justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:36,columnNumber:11}},_react.default.createElement(_.Typography,{style:selectedIndex===index?(0,_extends2.default)({},styles.defaultActiveTabTextStyle,activeTabTextStyle):(0,_extends2.default)({},styles.defaultInActiveTabTextStyle,inActiveTabTextStyle),__self:_this,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:13}},item));})));};exports.TopBar=TopBar;var styles=_reactNative.StyleSheet.create({defaultActiveContainerStyle:{backgroundColor:_theme.theme.colors.background.grey800,marginHorizontal:10,paddingHorizontal:10,marginVertical:5,borderRadius:5},defaultInActiveTabContainerStyle:{backgroundColor:_theme.theme.colors.background.white,marginHorizontal:20},defaultActiveTabTextStyle:{color:_theme.theme.colors.font.white},defaultInActiveTabTextStyle:{color:_theme.theme.colors.font.black},defaultTabContainerStyle:{backgroundColor:_theme.theme.colors.font.white}});TopBar.propTypes={data:_propTypes.default.array.isRequired,activeIndex:_propTypes.default.number,onActiveTabChange:_propTypes.default.func.isRequired,activeTabTextStyle:_propTypes.default.object,activeTabContainerStyle:_propTypes.default.object,inActiveTabTextStyle:_propTypes.default.object,inActiveTabContainerStyle:_propTypes.default.object,tabContainerStyle:_propTypes.default.object};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.96",
+  "version": "0.0.99",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "assets"
   ],
   "lint-staged": {
-    "src/**/*.{js,es6,jsx,ts,tsx}": [
+    "src/**/*.{js,es6,jsx,ts,tsx}|storybook/stories**/*.js": [
       "./node_modules/prettier/bin-prettier.js --write",
       "prettier --write",
       "eslint --fix"

package/src/components/CheckBox.js

@@ -0,0 +1,156 @@
+import React from "react";
+import Proptypes from "prop-types";
+
+import { Container, Typography, Touchable } from "@components";
+const LABEL_POSITIONS = ["left", "right"];
+
+const LabelComponent = ({ label, labelComponent, labelProp }) => {
+  return labelComponent || <Typography {...labelProp}>{label}</Typography>;
+};
+
+/**
+ *
+ * This component supports below props categories from [styled-system ](/styled-system).
+ * <ul>
+ * <li>flexbox</li>
+ * <li>space</li>
+ * <li>border</li>
+ * <li>layout</li>
+ * <li>color</li>
+ * <li>buttonStyle</li>
+ * </ul>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from "react";
+ * import { Container, CheckBox, Typography } from "@bigbinary/neetoui-rn";
+ *
+ * export default function Main() {
+ *  const [selected, setSelected] = React.useState(false);
+ *
+ *
+ *  return (
+ *    <Container>
+ *      <Container flexDirection="row" my={2}>
+ *        <CheckBox
+ *          selected={selected}
+ *          onSelect={() => setSelected(!selected)}
+ *          checkedComponent={
+ *            <Container width={10} height={10} bg="background.base" />
+ *          }
+ *          label="Agree"
+ *        />
+ *      </Container>
+ *    </Container>
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const CheckBox = ({
+  selected = false,
+  onSelect = () => {},
+  checkedComponent = null,
+  checkedItemProp = {},
+  disabled = false,
+  label = "Option",
+  labelComponent = null,
+  labelProp = {},
+  labelPosition = "right",
+  checkboxContainerProp = {},
+  ...rest
+}) => {
+  return (
+    <Touchable
+      disabled={disabled}
+      onPress={onSelect}
+      opacity={disabled ? 0.5 : 1}
+      flexDirection="row"
+      alignItems="center"
+      {...rest}
+    >
+      {labelPosition === LABEL_POSITIONS[0] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ mr: 2, ...labelProp }}
+        />
+      ) : null}
+      <Container
+        borderColor="background.base"
+        borderWidth={1}
+        borderRadius={5}
+        justifyContent="center"
+        alignItems="center"
+        width={20}
+        height={20}
+        {...checkboxContainerProp}
+      >
+        {selected && (
+          <Container>
+            {checkedComponent || (
+              <Typography {...checkedItemProp}>✓</Typography>
+            )}
+          </Container>
+        )}
+      </Container>
+      {labelPosition === LABEL_POSITIONS[1] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ ml: 2, ...labelProp }}
+        />
+      ) : null}
+    </Touchable>
+  );
+};
+
+CheckBox.propTypes = {
+  /**
+   * Whether checkbox is selected.
+   */
+  selected: Proptypes.bool.isRequired,
+  /**
+   * Function to execute on press.
+   */
+  onSelect: Proptypes.func.isRequired,
+  /**
+   * To disable the component.
+   */
+  disabled: Proptypes.bool,
+  /**
+   * Render custom checked component.
+   */
+  checkedComponent: Proptypes.element,
+  /**
+   * Check mark style.
+   */
+  checkedItemProp: Proptypes.object,
+  /**
+   * Text label to be shown with radio button.
+   */
+  label: Proptypes.string,
+  /**
+   * Props for the label.
+   */
+  labelProp: Proptypes.object,
+  /**
+   * Label can passed as a component as well.
+   */
+  labelComponent: Proptypes.element,
+  /**
+   * Position of label relative to the radio button. It can be either `left` or `right`
+   */
+  labelPosition: Proptypes.oneOf(LABEL_POSITIONS),
+  /**
+   * Extra param to customize checkbox container
+   */
+  checkboxContainerProp: Proptypes.object,
+};
+
+LabelComponent.propTypes = {
+  label: Proptypes.string,
+  labelComponent: Proptypes.element,
+  labelProp: Proptypes.object,
+};

package/src/components/RadioButton.js

@@ -0,0 +1,174 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Container, Touchable, Typography } from "@components";
+const LABEL_POSITIONS = ["left", "right"];
+
+const LabelComponent = ({ label, labelComponent, labelProp }) => {
+  return labelComponent || <Typography {...labelProp}>{label}</Typography>;
+};
+
+/**
+ *
+ * This component supports below props categories from [styled-system ](/styled-system).
+ * <ul>
+ * <li>flexbox</li>
+ * <li>space</li>
+ * <li>border</li>
+ * <li>layout</li>
+ * <li>color</li>
+ * <li>buttonStyle</li>
+ * </ul>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from "react";
+ * import { Container, RadioButton } from "@bigbinary/neetoui-rn";
+ *
+ * export default function Main() {
+ *  const [selected, setSelected] = useState(false);
+ *
+ *   return (
+ *     <Container>
+ *      <RadioButton
+ *       selected={selected}
+ *       onSelect={() => setSelected(!selected)}
+ *       label="option label 1"
+ *       labelPosition="left"
+ *      />
+ *     </Container>
+ *   );
+ *  }
+ * ```
+ *
+ */
+
+export const RadioButton = ({
+  radioButtonWidth = 20,
+  radioButtonSelectedWidth = 10,
+  containerBg = "background.grey",
+  innerActiveBg = "background.base",
+  innerInActiveBg = "background.secondary",
+  onSelect = () => {},
+  selected = null,
+  density = 5,
+  label = "Option",
+  labelComponent = null,
+  labelProp = {},
+  labelPosition = "right",
+  disabled = false,
+  ...rest
+}) => {
+  return (
+    <Touchable
+      disabled={disabled}
+      opacity={disabled ? 0.5 : 1}
+      onPress={onSelect}
+      flexDirection="row"
+      alignItems="center"
+      py={1}
+      {...rest}
+    >
+      {labelPosition === LABEL_POSITIONS[0] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ mr: 2, ...labelProp }}
+        />
+      ) : null}
+      <Container
+        bg={containerBg}
+        height={radioButtonWidth}
+        width={radioButtonWidth}
+        borderRadius={radioButtonWidth / 2}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Container
+          height={radioButtonSelectedWidth + density}
+          width={radioButtonSelectedWidth + density}
+          borderRadius={(radioButtonSelectedWidth + density) / 2}
+          bg="background.white"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Container
+            bg={selected ? innerActiveBg : innerInActiveBg}
+            height={radioButtonSelectedWidth}
+            width={radioButtonSelectedWidth}
+            borderRadius={radioButtonSelectedWidth / 2}
+            m={1}
+          />
+        </Container>
+      </Container>
+      {labelPosition === LABEL_POSITIONS[1] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ ml: 2, ...labelProp }}
+        />
+      ) : null}
+    </Touchable>
+  );
+};
+
+RadioButton.propTypes = {
+  /**
+   * Function to execute on press.
+   */
+  onSelect: PropTypes.func.isRequired,
+  /**
+   * Whether radio is selected.
+   */
+  selected: PropTypes.any.isRequired,
+  /**
+   * Text label to be shown with radio button.
+   */
+  label: PropTypes.string,
+  /**
+   * Props for the label.
+   */
+  labelProp: PropTypes.object,
+  /**
+   * Label can passed as a component as well.
+   */
+  labelComponent: PropTypes.element,
+  /**
+   * Position of label relative to the radio button. It can be either `left` or `right`
+   */
+  labelPosition: PropTypes.oneOf(LABEL_POSITIONS),
+  /**
+   * Whether radio is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Size of radio button.
+   */
+  radioButtonWidth: PropTypes.number,
+  /**
+   * Size of radio button when selected.
+   */
+  radioButtonSelectedWidth: PropTypes.number,
+  /**
+   * Background color of radio button.
+   */
+  containerBg: PropTypes.string,
+  /**
+   * Color of radio button when selected.
+   */
+  innerActiveBg: PropTypes.string,
+  /**
+   * Color of radio button when not selected.
+   */
+  innerInActiveBg: PropTypes.string,
+  /**
+   * Thickness of radio button container component.
+   */
+  density: PropTypes.number,
+};
+
+LabelComponent.propTypes = {
+  label: PropTypes.string,
+  labelComponent: PropTypes.element,
+  labelProp: PropTypes.object,
+};

package/src/components/TopBar.js

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from "react";
+import { ScrollView, StyleSheet } from "react-native";
+import PropTypes from "prop-types";
+
+import { Container, Touchable, Typography } from "@components";
+import { theme } from "@theme";
+
+export const TopBar = ({
+  data,
+  activeIndex = 0,
+  onActiveTabChange = () => {},
+  activeTabTextStyle,
+  activeTabContainerStyle,
+  inActiveTabTextStyle,
+  inActiveTabContainerStyle,
+  tabContainerStyle,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(activeIndex);
+
+  useEffect(() => {
+    onActiveTabChange(selectedIndex);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedIndex]);
+
+  useEffect(() => {
+    setSelectedIndex(activeIndex);
+  }, [activeIndex]);
+
+  return (
+    <Container
+      height={50}
+      style={[styles.defaultTabContainerStyle, tabContainerStyle]}
+    >
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        {data.map((item, index) => (
+          <Touchable
+            key={index}
+            onPress={() => setSelectedIndex(index)}
+            style={
+              selectedIndex === index
+                ? {
+                    ...styles.defaultActiveContainerStyle,
+                    ...activeTabContainerStyle,
+                  }
+                : {
+                    ...styles.defaultInActiveTabContainerStyle,
+                    ...inActiveTabContainerStyle,
+                  }
+            }
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Typography
+              style={
+                selectedIndex === index
+                  ? {
+                      ...styles.defaultActiveTabTextStyle,
+                      ...activeTabTextStyle,
+                    }
+                  : {
+                      ...styles.defaultInActiveTabTextStyle,
+                      ...inActiveTabTextStyle,
+                    }
+              }
+            >
+              {item}
+            </Typography>
+          </Touchable>
+        ))}
+      </ScrollView>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  defaultActiveContainerStyle: {
+    backgroundColor: theme.colors.background.grey800,
+    marginHorizontal: 10,
+    paddingHorizontal: 10,
+    marginVertical: 5,
+    borderRadius: 5,
+  },
+  defaultInActiveTabContainerStyle: {
+    backgroundColor: theme.colors.background.white,
+    marginHorizontal: 20,
+  },
+  defaultActiveTabTextStyle: {
+    color: theme.colors.font.white,
+  },
+  defaultInActiveTabTextStyle: {
+    color: theme.colors.font.black,
+  },
+  defaultTabContainerStyle: {
+    backgroundColor: theme.colors.font.white,
+  },
+});
+
+TopBar.propTypes = {
+  data: PropTypes.array.isRequired,
+  activeIndex: PropTypes.number,
+  onActiveTabChange: PropTypes.func.isRequired,
+  activeTabTextStyle: PropTypes.object,
+  activeTabContainerStyle: PropTypes.object,
+  inActiveTabTextStyle: PropTypes.object,
+  inActiveTabContainerStyle: PropTypes.object,
+  tabContainerStyle: PropTypes.object,
+};

package/src/components/index.js

@@ -17,3 +17,6 @@ export { OtpInputs } from "./OtpInputs";
 export { Popover } from "./Popover";
 export { Touchable } from "./Touchable";
 export { Card } from "./Card";
+export { TopBar } from "./TopBar";
+export { RadioButton } from "./RadioButton";
+export { CheckBox } from "./CheckBox";