@bigbinary/neetoui-rn 0.0.126 → 0.0.129

package/lib/components/BottomSheet.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));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 _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _theme=require("../theme");var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,searchText=_ref.searchText,setSearchText=_ref.setSearchText;var touchY;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isSearchBarOpen=_useState2[0],setSearchBarOpen=_useState2[1];(0,_react.useEffect)(function(){setSearchText("");},[isVisible,setSearchText]);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},pb:12,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple600",__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:15}},"Done")),canSearch&&!isSearchBarOpen&&_react.default.createElement(_.Touchable,{onPress:function onPress(){return setSearchBarOpen(true);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:13}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",color:_theme.theme.colors.background.grey700,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:15}}))),canSearch&&isSearchBarOpen&&_react.default.createElement(_.Container,{pt:12,flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:11}},_react.default.createElement(_.Container,{flex:6,mr:3,__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:13}},_react.default.createElement(_.Input,{value:searchText,onChangeText:function onChangeText(word){return setSearchText(word.toLowerCase());},placeholder:"Search",containerStyles:styles.inputContainerStyle,LeftIcon:function LeftIcon(){return _react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",size:20,color:_theme.theme.colors.background.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:21}});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:15}})),_react.default.createElement(_.Touchable,{onPress:function onPress(){setSearchText("");setSearchBarOpen(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:85,columnNumber:13}},_react.default.createElement(_.Typography,{fontSize:"l",fontFamily:"sf400",color:"font.grey800",__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:15}},"Cancel")))));};Title.propTypes={title:_propTypes.default.string,isVisible:_propTypes.default.boolean,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool,searchText:_propTypes.default.string,setSearchText:_propTypes.default.func};var BottomSheet=function BottomSheet(_ref2){var data=_ref2.data,title=_ref2.title,hide=_ref2.hide,isVisible=_ref2.isVisible,onItemPress=_ref2.onItemPress,selectedItemIndex=_ref2.selectedItemIndex,bg=_ref2.bg,children=_ref2.children,titleContainerStyle=_ref2.titleContainerStyle,titleTextStyle=_ref2.titleTextStyle,modalParams=_ref2.modalParams,HeaderComponent=_ref2.HeaderComponent,ContentRow=_ref2.ContentRow,contentType=_ref2.contentType,canSearch=_ref2.canSearch,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchText=_useState4[0],setSearchText=_useState4[1];return _react.default.createElement(_reactNativeModal.default,(0,_extends2.default)({style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,onRequestClose:hide},modalParams,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:5}}),_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,borderTopRightRadius:20,borderTopLeftRadius:20,px:24,py:24},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:183,columnNumber:7}}),_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:9}},_react.default.createElement(Title,{bg:bg,title:title,isVisible:isVisible,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,HeaderComponent:HeaderComponent,contentType:contentType,canSearch:canSearch,searchText:searchText,setSearchText:setSearchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:193,columnNumber:11}}),data&&_react.default.createElement(_reactNative.FlatList,{contentContainerStyle:styles.flatListContentContainerStyle,initialNumToRender:data.length,data:searchText?data.filter(function(word){return word.startsWith(searchText);}):data,renderItem:function renderItem(_ref3){var item=_ref3.item,index=_ref3.index;return _react.default.createElement(ContentRow,{isSelected:index===selectedItemIndex,key:index,onPress:function onPress(){!contentType&&hide();onItemPress(index);},id:index,label:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:208,columnNumber:13}}),children)));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary"};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,selectedItemIndex:_propTypes.default.number,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,modalParams:_propTypes.default.object,children:_propTypes.default.node,HeaderComponent:_propTypes.default.elementType,ContentRow:_propTypes.default.elementType.isRequired,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({flatListContentContainerStyle:{paddingBottom:70},modalStyle:{margin:0,alignItems:"flex-end",flexDirection:"row"},inputContainerStyle:{backgroundColor:"background.white",borderRadius:10}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));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 _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _theme=require("../theme");var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,searchText=_ref.searchText,setSearchText=_ref.setSearchText;var touchY;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isSearchBarOpen=_useState2[0],setSearchBarOpen=_useState2[1];(0,_react.useEffect)(function(){setSearchText("");},[isVisible,setSearchText]);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},pb:12,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple600",__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:15}},"Done")),canSearch&&!isSearchBarOpen&&_react.default.createElement(_.Touchable,{onPress:function onPress(){return setSearchBarOpen(true);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:13}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",color:_theme.theme.colors.background.grey700,__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:15}}))),canSearch&&isSearchBarOpen&&_react.default.createElement(_.Container,{pt:12,flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:11}},_react.default.createElement(_.Container,{flex:6,mr:3,__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:13}},_react.default.createElement(_.Input,{value:searchText,onChangeText:function onChangeText(word){return setSearchText(word.toLowerCase());},placeholder:"Search",containerStyles:styles.inputContainerStyle,LeftIcon:function LeftIcon(){return _react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",size:20,color:_theme.theme.colors.background.grey800,__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:21}});},__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:15}})),_react.default.createElement(_.Touchable,{onPress:function onPress(){setSearchText("");setSearchBarOpen(false);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:13}},_react.default.createElement(_.Typography,{fontSize:"l",fontFamily:"sf400",color:"font.grey800",__self:_this,__source:{fileName:_jsxFileName,lineNumber:90,columnNumber:15}},"Cancel")))));};Title.propTypes={title:_propTypes.default.string,isVisible:_propTypes.default.boolean,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool,searchText:_propTypes.default.string,setSearchText:_propTypes.default.func};var BottomSheet=function BottomSheet(_ref2){var data=_ref2.data,title=_ref2.title,hide=_ref2.hide,isVisible=_ref2.isVisible,onItemPress=_ref2.onItemPress,selectedItemIndex=_ref2.selectedItemIndex,bg=_ref2.bg,children=_ref2.children,titleContainerStyle=_ref2.titleContainerStyle,titleTextStyle=_ref2.titleTextStyle,modalParams=_ref2.modalParams,HeaderComponent=_ref2.HeaderComponent,ContentRow=_ref2.ContentRow,contentType=_ref2.contentType,canSearch=_ref2.canSearch,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchText=_useState4[0],setSearchText=_useState4[1];return _react.default.createElement(_reactNativeModal.default,(0,_extends2.default)({style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,onRequestClose:hide},modalParams,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,columnNumber:5}}),_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,flex:1,borderTopRightRadius:20,borderTopLeftRadius:20,px:24,py:24},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,columnNumber:7}}),_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:9}},_react.default.createElement(Title,{bg:bg,title:title,isVisible:isVisible,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,HeaderComponent:HeaderComponent,contentType:contentType,canSearch:canSearch,searchText:searchText,setSearchText:setSearchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:11}}),data&&_react.default.createElement(_reactNative.FlatList,{contentContainerStyle:styles.flatListContentContainerStyle,initialNumToRender:data.length,data:searchText?data.filter(function(word){return word.startsWith(searchText);}):data,renderItem:function renderItem(_ref3){var item=_ref3.item,index=_ref3.index;return _react.default.createElement(ContentRow,{isSelected:index===selectedItemIndex,key:index,onPress:function onPress(){!contentType&&hide();onItemPress(index);},id:index,label:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:217,columnNumber:19}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:13}}),children)));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary"};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,selectedItemIndex:_propTypes.default.number,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,modalParams:_propTypes.default.object,children:_propTypes.default.node,HeaderComponent:_propTypes.default.elementType,ContentRow:_propTypes.default.elementType.isRequired,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({flatListContentContainerStyle:{paddingBottom:70},modalStyle:{margin:0,alignItems:"flex-end",flexDirection:"row"},inputContainerStyle:{backgroundColor:"white",borderRadius:10}});

package/lib/components/Button.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Button=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _=require("./");var _excluded=["variant","label","labelStyle","RightIcon","LeftIcon","disabled"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Button.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 Button=function Button(props){var variant=props.variant,label=props.label,labelStyle=props.labelStyle,RightIcon=props.RightIcon,LeftIcon=props.LeftIcon,disabled=props.disabled,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var isTextVariant=variant==="text";return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:isTextVariant?"black":"white",disabled:disabled,bg:isTextVariant?"transparent":theme.colors.background[disabled?"grey400":"base"],height:45,width:isTextVariant?null:"100%",borderRadius:8,flexDirection:"row",alignItems:"center",justifyContent:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:5}}),LeftIcon&&_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:83,columnNumber:20}}),_react.default.createElement(_.Typography,(0,_extends2.default)({textAlign:"center",mx:2,color:theme.colors.font[isTextVariant?"primary":"white"],fontSize:"m",fontFamily:theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:7}}),label),RightIcon&&_react.default.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:21}}));};exports.Button=Button;Button.defaultProps={variant:"solid"};Button.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{label:_propTypes2.default.string.isRequired,variant:_propTypes2.default.oneOf(["text","solid"]),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Button=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _=require("./");var _excluded=["variant","label","labelStyle","RightIcon","LeftIcon","disabled","isLoading"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Button.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 Button=function Button(props){var variant=props.variant,label=props.label,labelStyle=props.labelStyle,RightIcon=props.RightIcon,LeftIcon=props.LeftIcon,disabled=props.disabled,isLoading=props.isLoading,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var width=variant==="text"||variant==="danger-text"?null:"100%";var getButtonColors=function getButtonColors(){switch(variant){case"solid":return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};case"text":return{bg:"transparent",border:"transparent",color:theme.colors.font.primary,ripple:"black"};case"danger":return{bg:theme.colors.background.danger,border:theme.colors.background.danger,color:theme.colors.background.white,ripple:"white"};case"danger-inverse":return{bg:theme.colors.background.white,border:theme.colors.background.danger,color:theme.colors.background.danger,ripple:"black"};case"danger-text":return{bg:"transparent",border:"transparent",color:theme.colors.background.danger,ripple:"black"};default:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};}};var renderOpacity=function renderOpacity(){if(["danger","danger-inverse","danger-text"].includes(variant)&&disabled)return 0.5;return 1;};var renderLoaderColor=function renderLoaderColor(){if(["text","danger","danger-inverse","danger-text"].includes(variant))return"base";return"white";};return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:getButtonColors().ripple,disabled:disabled,bg:getButtonColors().bg,height:45,width:width,borderRadius:8,flexDirection:"row",alignItems:"center",justifyContent:"center",borderColor:getButtonColors().border,borderWidth:1,opacity:renderOpacity()},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:138,columnNumber:5}}),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{color:theme.colors.background[renderLoaderColor()],__self:_this,__source:{fileName:_jsxFileName,lineNumber:154,columnNumber:9}}):_react.default.createElement(_react.default.Fragment,null,LeftIcon&&_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:159,columnNumber:24}}),_react.default.createElement(_.Typography,(0,_extends2.default)({textAlign:"center",mx:2,color:getButtonColors().color,fontSize:"m",fontFamily:theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:11}}),label),RightIcon&&_react.default.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:170,columnNumber:25}})));};exports.Button=Button;Button.defaultProps={variant:"solid",isLoading:false};Button.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{label:_propTypes2.default.string.isRequired,variant:_propTypes2.default.oneOf(["text","solid","danger","danger-inverse","danger-text"]),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,isLoading:_propTypes2.default.bool});

package/lib/components/ListItem.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ListItem=void 0;var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ListItem.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 ListItem=function ListItem(_ref){var LeftComponent=_ref.LeftComponent,label=_ref.label,RightComponent=_ref.RightComponent;return React.createElement(_.Container,{flexDirection:"row",bg:"background.secondary",width:"100%",p:3,m:3,borderRadius:6,alignItems:"center",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:34,columnNumber:5}},React.createElement(_.Container,{flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:7}},LeftComponent&&React.createElement(LeftComponent,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:45,columnNumber:27}}),React.createElement(_.Typography,{color:"font.grey800",fontSize:"l",fontFamily:"sf400",__self:_this,__source:{fileName:_jsxFileName,lineNumber:46,columnNumber:9}},label)),React.createElement(RightComponent,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:7}}));};exports.ListItem=ListItem;ListItem.propTypes={LeftComponent:_propTypes.default.elementType,label:_propTypes.default.string.isRequired,RightComponent:_propTypes.default.elementType.isRequired};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ListItem=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _propTypes2=_interopRequireDefault(require("@styled-system/prop-types"));var _=require("./");var _excluded=["LeftComponent","label","RightComponent"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ListItem.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 ListItem=function ListItem(_ref){var LeftComponent=_ref.LeftComponent,label=_ref.label,RightComponent=_ref.RightComponent,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",bg:"background.secondary",width:"100%",px:12,height:52,borderRadius:6,alignItems:"center",justifyContent:"space-between"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:35,columnNumber:5}}),React.createElement(_.Container,{flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:46,columnNumber:7}},LeftComponent&&React.createElement(LeftComponent,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:27}}),React.createElement(_.Typography,{color:"font.grey800",fontSize:"l",fontFamily:"sf400",__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:9}},label)),React.createElement(RightComponent,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:52,columnNumber:7}}));};exports.ListItem=ListItem;ListItem.propTypes=(0,_extends2.default)({},_propTypes2.default.flexbox,_propTypes2.default.space,_propTypes2.default.border,_propTypes2.default.color,_propTypes2.default.layout,{LeftComponent:_propTypes.default.elementType,label:_propTypes.default.string.isRequired,RightComponent:_propTypes.default.elementType.isRequired});

package/lib/theme/index.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#4557F8",danger:"#ff6969",menubackground:"#F6F6FA"};var toastBorderColors={success:"#00BA88",error:"#F56A58",info:"#276EF1",warning:"#F3CD82"};var greyVariants={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey700:"#49545C",grey800:"#2f3941"};var purpleVariants={purple800:"#342DF4",purple700:"#4557F8",purple600:"#7280FA",purple500:"#5E5CE6"};var greenVariants={green800:"#00956D",green700:"#00BA88",green600:"#33C8A0",green500:"#34C759"};var colors={font:(0,_extends2.default)({primary:"#2F3941",secondary:"#49545C"},defaultColors,greyVariants,purpleVariants,greenVariants),background:(0,_extends2.default)({parentView:"#ffffff",primary:"#ffffff",secondary:"#F6F6FA"},defaultColors,greyVariants,purpleVariants,greenVariants),border:(0,_extends2.default)({primary:"#E9EBED",secondary:"#C2C8CC"},greyVariants,defaultColors,purpleVariants),toast:(0,_extends2.default)({},toastBorderColors)};var baseTheme={colors:colors,fonts:{sf400:"SFProText-Regular",sf500:"SFProText-Medium",sf600:"SFProText-Semibold",sf700:"SFProText-Bold"},lineHeights:[24],fontSizes:{"3xs":10,"2xs":12,xs:13,s:14,m:15,l:16,xl:17,"2xl":18,"3xl":20,"4xl":22,"5xl":30}};baseTheme.lineHeights.note=baseTheme.lineHeights[0]+"px";var theme=(0,_extends2.default)({},baseTheme,{textStyles:{defaultTextStyle:{color:baseTheme.colors.font.primary},header:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes["3xl"],fontFamily:baseTheme.fonts.sf700},modalHeader:{color:baseTheme.colors.font.black,fontSize:baseTheme.fontSizes["xl"],fontFamily:baseTheme.fonts.sf600},body:{color:baseTheme.colors.font.grey500,fontSize:baseTheme.fontSizes.s},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes["2xs"]},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{border:2,borderColor:baseTheme.colors.background.base,backgroundColor:baseTheme.colors.background.base},inverse:{border:2,borderColor:baseTheme.colors.border.base,backgroundColor:baseTheme.colors.background.white},text:{color:baseTheme.colors.font.grey800,backgroundColor:baseTheme.colors.background.white}}});exports.theme=theme;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#4557F8",danger:"#ff6969",menubackground:"#F6F6FA"};var toastBorderColors={success:"#00BA88",error:"#F56A58",info:"#276EF1",warning:"#F3CD82"};var greyVariants={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey700:"#49545C",grey800:"#2f3941"};var purpleVariants={purple500:"#5E5CE6",purple600:"#7280FA",purple700:"#4557F8",purple800:"#342DF4"};var greenVariants={green500:"#34C759",green600:"#33C8A0",green700:"#00BA88",green800:"#00956D"};var colors={font:(0,_extends2.default)({primary:"#2F3941",secondary:"#49545C",danger:"#D95D4E"},defaultColors,greyVariants,purpleVariants,greenVariants),background:(0,_extends2.default)({parentView:"#ffffff",primary:"#ffffff",secondary:"#F6F6FA",danger:"#D95D4E"},defaultColors,greyVariants,purpleVariants,greenVariants),border:(0,_extends2.default)({primary:"#E9EBED",secondary:"#C2C8CC",danger:"#D95D4E"},greyVariants,defaultColors,purpleVariants),toast:(0,_extends2.default)({},toastBorderColors)};var baseTheme={colors:colors,fonts:{sf400:"SFProText-Regular",sf500:"SFProText-Medium",sf600:"SFProText-Semibold",sf700:"SFProText-Bold"},lineHeights:[24],fontSizes:{"3xs":10,"2xs":12,xs:13,s:14,m:15,l:16,xl:17,"2xl":18,"3xl":20,"4xl":22,"5xl":30}};baseTheme.lineHeights.note=baseTheme.lineHeights[0]+"px";var theme=(0,_extends2.default)({},baseTheme,{textStyles:{defaultTextStyle:{color:baseTheme.colors.font.primary},header:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes["3xl"],fontFamily:baseTheme.fonts.sf700},modalHeader:{color:baseTheme.colors.font.black,fontSize:baseTheme.fontSizes["xl"],fontFamily:baseTheme.fonts.sf600},body:{color:baseTheme.colors.font.grey500,fontSize:baseTheme.fontSizes.s},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes["2xs"]},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{border:2,borderColor:baseTheme.colors.background.base,backgroundColor:baseTheme.colors.background.base},inverse:{border:2,borderColor:baseTheme.colors.border.base,backgroundColor:baseTheme.colors.background.white},text:{color:baseTheme.colors.font.grey800,backgroundColor:baseTheme.colors.background.white}}});exports.theme=theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.126",
+  "version": "0.0.129",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/BottomSheet.js

@@ -68,7 +68,6 @@ const Title = ({
                 value={searchText}
                 onChangeText={word => setSearchText(word.toLowerCase())}
                 placeholder="Search"
-                // eslint-disable-next-line react-native/no-inline-styles
                 containerStyles={styles.inputContainerStyle}
                 LeftIcon={() => {
                   return (
@@ -301,7 +300,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
   },
   inputContainerStyle: {
-    backgroundColor: "background.white",
+    backgroundColor: "white",
     borderRadius: 10,
   },
 });

package/src/components/Button.js

@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
 import { ThemeContext } from "styled-components/native";
+import { ActivityIndicator } from "react-native";
 
 import { Typography, Touchable } from "@components";
 
@@ -58,46 +59,124 @@ import { Typography, Touchable } from "@components";
  */
 
 export const Button = props => {
-  const { variant, label, labelStyle, RightIcon, LeftIcon, disabled, ...rest } =
-    props;
+  const {
+    variant,
+    label,
+    labelStyle,
+    RightIcon,
+    LeftIcon,
+    disabled,
+    isLoading,
+    ...rest
+  } = props;
   const theme = useContext(ThemeContext);
-  const isTextVariant = variant === "text";
+  const width = variant === "text" || variant === "danger-text" ? null : "100%";
+
+  const getButtonColors = () => {
+    switch (variant) {
+      case "solid":
+        return {
+          bg: theme.colors.background[disabled ? "grey400" : "base"],
+          border: theme.colors.background[disabled ? "grey400" : "base"],
+          color: theme.colors.background.white,
+          ripple: "white",
+        };
+      case "text":
+        return {
+          bg: "transparent",
+          border: "transparent",
+          color: theme.colors.font.primary,
+          ripple: "black",
+        };
+      case "danger":
+        return {
+          bg: theme.colors.background.danger,
+          border: theme.colors.background.danger,
+          color: theme.colors.background.white,
+          ripple: "white",
+        };
+      case "danger-inverse":
+        return {
+          bg: theme.colors.background.white,
+          border: theme.colors.background.danger,
+          color: theme.colors.background.danger,
+          ripple: "black",
+        };
+      case "danger-text":
+        return {
+          bg: "transparent",
+          border: "transparent",
+          color: theme.colors.background.danger,
+          ripple: "black",
+        };
+      default:
+        return {
+          bg: theme.colors.background[disabled ? "grey400" : "base"],
+          border: theme.colors.background[disabled ? "grey400" : "base"],
+          color: theme.colors.background.white,
+          ripple: "white",
+        };
+    }
+  };
+
+  const renderOpacity = () => {
+    if (
+      ["danger", "danger-inverse", "danger-text"].includes(variant) &&
+      disabled
+    )
+      return 0.5;
+    return 1;
+  };
+
+  const renderLoaderColor = () => {
+    if (["text", "danger", "danger-inverse", "danger-text"].includes(variant))
+      return "base";
+    return "white";
+  };
 
   return (
     <Touchable
-      rippleColor={isTextVariant ? "black" : "white"}
+      rippleColor={getButtonColors().ripple}
       disabled={disabled}
-      bg={
-        isTextVariant
-          ? "transparent"
-          : theme.colors.background[disabled ? "grey400" : "base"]
-      }
+      bg={getButtonColors().bg}
       height={45}
-      width={isTextVariant ? null : "100%"}
+      width={width}
       borderRadius={8}
       flexDirection="row"
       alignItems="center"
       justifyContent="center"
+      borderColor={getButtonColors().border}
+      borderWidth={1}
+      opacity={renderOpacity()}
       {...rest}
     >
-      {LeftIcon && <LeftIcon />}
-      <Typography
-        textAlign="center"
-        mx={2}
-        color={theme.colors.font[isTextVariant ? "primary" : "white"]}
-        fontSize="m"
-        fontFamily={theme.fonts.sf500}
-        {...labelStyle}
-      >
-        {label}
-      </Typography>
-      {RightIcon && <RightIcon />}
+      {isLoading ? (
+        <ActivityIndicator
+          color={theme.colors.background[renderLoaderColor()]}
+        />
+      ) : (
+        <>
+          {LeftIcon && <LeftIcon />}
+          <Typography
+            textAlign="center"
+            mx={2}
+            color={getButtonColors().color}
+            fontSize="m"
+            fontFamily={theme.fonts.sf500}
+            {...labelStyle}
+          >
+            {label}
+          </Typography>
+          {RightIcon && <RightIcon />}
+        </>
+      )}
     </Touchable>
   );
 };
 
 Button.defaultProps = {
   variant: "solid",
+  isLoading: false,
 };
 
 Button.propTypes = {
@@ -119,7 +198,13 @@ Button.propTypes = {
    *    <li>solid - button with a background color.</li>
    *  </ul>
    */
-  variant: PropTypes.oneOf(["text", "solid"]),
+  variant: PropTypes.oneOf([
+    "text",
+    "solid",
+    "danger",
+    "danger-inverse",
+    "danger-text",
+  ]),
   /**
    * Enable or Disable the button.
    */
@@ -136,4 +221,8 @@ Button.propTypes = {
    * Render a component on the left side of the Label.
    */
   LeftIcon: PropTypes.elementType,
+  /**
+   * To show loading indicator on the button.
+   */
+  isLoading: PropTypes.bool,
 };

package/src/components/ListItem.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import PropTypes from "prop-types";
+import propTypes from "@styled-system/prop-types";
 
 import { Typography, Container } from "@components";
 
@@ -29,17 +30,18 @@ import { Typography, Container } from "@components";
  * ```
  */
 
-export const ListItem = ({ LeftComponent, label, RightComponent }) => {
+export const ListItem = ({ LeftComponent, label, RightComponent, ...rest }) => {
   return (
     <Container
       flexDirection="row"
       bg="background.secondary"
       width="100%"
-      p={3}
-      m={3}
+      px={12}
+      height={52}
       borderRadius={6}
       alignItems="center"
       justifyContent="space-between"
+      {...rest}
     >
       <Container flexDirection="row" alignItems="center">
         {LeftComponent && <LeftComponent />}
@@ -53,6 +55,11 @@ export const ListItem = ({ LeftComponent, label, RightComponent }) => {
 };
 
 ListItem.propTypes = {
+  ...propTypes.flexbox,
+  ...propTypes.space,
+  ...propTypes.border,
+  ...propTypes.color,
+  ...propTypes.layout,
   LeftComponent: PropTypes.elementType,
   label: PropTypes.string.isRequired,
   RightComponent: PropTypes.elementType.isRequired,

package/src/theme/index.js

@@ -26,23 +26,24 @@ const greyVariants = {
 };
 
 const purpleVariants = {
-  purple800: "#342DF4",
-  purple700: "#4557F8",
-  purple600: "#7280FA",
   purple500: "#5E5CE6",
+  purple600: "#7280FA",
+  purple700: "#4557F8",
+  purple800: "#342DF4",
 };
 
 const greenVariants = {
-  green800: "#00956D",
-  green700: "#00BA88",
-  green600: "#33C8A0",
   green500: "#34C759",
+  green600: "#33C8A0",
+  green700: "#00BA88",
+  green800: "#00956D",
 };
 
 const colors = {
   font: {
     primary: "#2F3941",
     secondary: "#49545C",
+    danger: "#D95D4E",
     ...defaultColors,
     ...greyVariants,
     ...purpleVariants,
@@ -52,6 +53,7 @@ const colors = {
     parentView: "#ffffff",
     primary: "#ffffff",
     secondary: "#F6F6FA",
+    danger: "#D95D4E",
     ...defaultColors,
     ...greyVariants,
     ...purpleVariants,
@@ -60,6 +62,7 @@ const colors = {
   border: {
     primary: "#E9EBED",
     secondary: "#C2C8CC",
+    danger: "#D95D4E",
     ...greyVariants,
     ...defaultColors,
     ...purpleVariants,