@bigbinary/neetoui-rn 0.0.86 → 0.0.90

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 _=require("./");var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["RightIcon","LeftIcon","fontFamily","color","fontSize","loadingText","isLoading","Loader","disabled","variant"];var _this=this,_jsxFileName="/Users/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=React.forwardRef(function(props,ref){var RightIcon=props.RightIcon,LeftIcon=props.LeftIcon,fontFamily=props.fontFamily,color=props.color,fontSize=props.fontSize,loadingText=props.loadingText,isLoading=props.isLoading,Loader=props.Loader,disabled=props.disabled,variant=props.variant,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var style=rest.style||{};if(disabled||isLoading){style=(0,_extends2.default)({},style,{opacity:0.5});}return React.createElement(_.Touchable,(0,_extends2.default)({ref:ref,flexDirection:"row",disabled:disabled||isLoading},rest,{variant:variant,style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:5}}),Loader&&isLoading&&React.createElement(_.Container,{mx:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:9}},React.createElement(Loader,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:11}})),LeftIcon&&React.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:20}}),React.createElement(_.Typography,{textAlign:"center",mx:1,color:color,fontFamily:fontFamily||"inter700",fontSize:fontSize||"s",textStyle:variant,__self:_this,__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:7}},isLoading?loadingText:rest.label),RightIcon&&React.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:21}}));});exports.Button=Button;Button.defaultProps={variant:"solid",p:12,alignItems:"center",justifyContent:"center",borderRadius:2,loadingText:"Loading…"};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","inverse","solid"]),RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,loadingText:_propTypes2.default.string,isLoading:_propTypes2.default.bool,Loader:_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 _=require("./");var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["RightIcon","LeftIcon","fontFamily","color","fontSize","loadingText","isLoading","Loader","disabled","variant"];var _this=this,_jsxFileName="/Users/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=React.forwardRef(function(props,ref){var RightIcon=props.RightIcon,LeftIcon=props.LeftIcon,fontFamily=props.fontFamily,color=props.color,fontSize=props.fontSize,loadingText=props.loadingText,isLoading=props.isLoading,Loader=props.Loader,disabled=props.disabled,variant=props.variant,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var style=rest.style||{};if(disabled||isLoading){style=(0,_extends2.default)({},style,{opacity:0.5});}return React.createElement(_.Touchable,(0,_extends2.default)({},variant==="solid"&&{rippleColor:"white"},{ref:ref,flexDirection:"row",disabled:disabled||isLoading},rest,{variant:variant,style:style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:5}}),Loader&&isLoading&&React.createElement(_.Container,{mx:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:9}},React.createElement(Loader,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:11}})),LeftIcon&&React.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:20}}),React.createElement(_.Typography,{textAlign:"center",mx:1,color:color,fontFamily:fontFamily||"inter700",fontSize:fontSize||"s",textStyle:variant,__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:7}},isLoading?loadingText:rest.label),RightIcon&&React.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:82,columnNumber:21}}));});exports.Button=Button;Button.defaultProps={variant:"solid",p:12,alignItems:"center",justifyContent:"center",borderRadius:2,loadingText:"Loading…"};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","inverse","solid"]),RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,loadingText:_propTypes2.default.string,isLoading:_propTypes2.default.bool,Loader:_propTypes2.default.elementType});

package/lib/components/OtpInputs.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _theme=require("../theme");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.js";var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,textContainerStyle=_ref.textContainerStyle,textStyle=_ref.textStyle;var inputRef=_react.default.useRef();return _react.default.createElement(_.Container,{style:styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:5}},_react.default.createElement(_.Touchable,{onPress:function onPress(){_reactNative.Keyboard.dismiss();inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:45,columnNumber:7}},_react.default.createElement(_.Container,{style:styles.inputsContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,{key:index,style:[styles.textContainer,textContainerStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:17}},_react.default.createElement(_reactNative.Text,{testID:"otp",accessibilityLabel:"otp",style:[styles.otpInput,error===true?{color:_theme.theme.colors.font.danger}:{},textStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:19}},code[index]||""));}),_react.default.createElement(_reactNative.TextInput,{keyboardType:"phone-pad",selectionColor:"transparent",onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,style:styles.emptyViewStyle,value:code||"",__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:11}}))));};exports.OtpInputs=OtpInputs;OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,textContainerStyle:_propTypes.default.object,textStyle:_propTypes.default.object};var styles=_reactNative.StyleSheet.create({container:{marginTop:5,marginBottom:5},otpInput:(0,_extends2.default)({color:_theme.theme.colors.font.secondary,fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.inter700,textAlign:"center",minHeight:40,minWidth:40,textAlignVertical:"center",alignItems:"center"},_reactNative.Platform.select({ios:{paddingTop:5},android:{}}),{backgroundColor:"transparent"}),textContainer:{margin:5,borderRadius:6,borderWidth:1,borderColor:_theme.theme.colors.background.secondary,backgroundColor:_theme.theme.colors.background.white},inputsContainer:{flexDirection:"row",alignItems:"center",justifyContent:"center"},emptyViewStyle:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"}});exports.styles=styles;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _theme=require("../theme");var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.js";var styles={inputStyles:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"},defaultContainerStyles:{margin:2,borderRadius:6,borderWidth:1,borderColor:_theme.theme.colors.background.secondary,backgroundColor:_theme.theme.colors.background.white,justifyContent:"center",alignItems:"center",minHeight:45,minWidth:45},defaultTextStyles:{fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.inter700}};var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,containerStyles=_ref.containerStyles,textStyles=_ref.textStyles;var inputRef=_react.default.useRef();return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:5}},_react.default.createElement(_.Touchable,{onPress:function onPress(){inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:7}},_react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,(0,_extends2.default)({key:index},styles.defaultContainerStyles,containerStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({accessibilityLabel:"otp",color:error?_theme.theme.colors.font.danger:_theme.theme.colors.font.secondary},styles.defaultTextStyles,textStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:19}}),code[index]||""));}),_react.default.createElement(_.Input,(0,_extends2.default)({keyboardType:"phone-pad",selectionColor:"transparent",onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,value:code||""},styles.inputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:106,columnNumber:11}})))));};exports.OtpInputs=OtpInputs;OtpInputs.defaultProps={containerStyles:{},textStyles:{}};OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,containerStyles:_propTypes.default.object,textStyles:_propTypes.default.object};

package/lib/components/Touchable.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Touchable=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _propTypes2=_interopRequireDefault(require("@styled-system/prop-types"));var _reactNativeMaterialRipple=_interopRequireDefault(require("react-native-material-ripple"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _utils=require("../utils/utils");var _excluded=["children","elevation"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Touchable.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 StyledRipple=(0,_native.default)(_reactNativeMaterialRipple.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);var Touchable=function Touchable(_ref){var children=_ref.children,elevation=_ref.elevation,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var shadowStyles=elevation?(0,_utils.getShadowStyles)(elevation):{};return React.createElement(StyledRipple,(0,_extends2.default)({rippleOpacity:0.09,rippleDuration:600,rippleContainerBorderRadius:rest.borderRadius?rest.borderRadius:0,style:shadowStyles},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:64,columnNumber:5}}),children);};exports.Touchable=Touchable;Touchable.propTypes=(0,_extends2.default)({},_propTypes2.default.flexbox,_propTypes2.default.space,_propTypes2.default.border,_propTypes2.default.layout,_propTypes2.default.color,_propTypes2.default.buttonStyle,{children:_propTypes.default.node});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Touchable=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _propTypes2=_interopRequireDefault(require("@styled-system/prop-types"));var _reactNativeMaterialRipple=_interopRequireDefault(require("react-native-material-ripple"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _utils=require("../utils/utils");var _excluded=["children","elevation"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Touchable.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 StyledRipple=(0,_native.default)(_reactNativeMaterialRipple.default)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.buttonStyle,_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.layout,_styledSystem.color);var Touchable=React.forwardRef(function(props,ref){var children=props.children,elevation=props.elevation,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var shadowStyles=elevation?(0,_utils.getShadowStyles)(elevation):{};return React.createElement(StyledRipple,(0,_extends2.default)({rippleOpacity:0.09,rippleDuration:600,rippleContainerBorderRadius:rest.borderRadius?rest.borderRadius:0,style:shadowStyles,ref:ref},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:5}}),children);});exports.Touchable=Touchable;Touchable.propTypes=(0,_extends2.default)({},_propTypes2.default.flexbox,_propTypes2.default.space,_propTypes2.default.border,_propTypes2.default.layout,_propTypes2.default.color,_propTypes2.default.buttonStyle,{children:_propTypes.default.node});

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:"#2f3941",danger:"#ff6969",menubackground:"#f4f5f7"};var toastBorderColors={success:"#5cb85c",error:"#d9534f",info:"#5bc0de",warning:"#f0ad4e"};var greyVarients={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey800:"#2f3941"};var colors={font:(0,_extends2.default)({primary:"#1b1f23",secondary:"#828282"},defaultColors,greyVarients),background:(0,_extends2.default)({parentView:"#ffffff",primary:"#ffffff",secondary:"#e4e4e7"},defaultColors,greyVarients),border:(0,_extends2.default)({primary:"#e4e4e7"},greyVarients,defaultColors),toast:(0,_extends2.default)({},toastBorderColors)};var baseTheme={colors:colors,fonts:{inter400:"Inter-Regular",inter700:"Inter-Bold"},lineHeights:[24],fontSizes:{xs:10,s:12,m:14,l:18,xl:24,xxl:32}};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.l,fontFamily:baseTheme.fonts.inter700},body:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.m},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.s},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{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:"#2f3941",danger:"#ff6969",menubackground:"#f4f5f7"};var toastBorderColors={success:"#5cb85c",error:"#d9534f",info:"#5bc0de",warning:"#f0ad4e"};var greyVarients={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey800:"#2f3941"};var colors={font:(0,_extends2.default)({primary:"#1b1f23",secondary:"#828282"},defaultColors,greyVarients),background:(0,_extends2.default)({parentView:"#ffffff",primary:"#ffffff",secondary:"#e4e4e7"},defaultColors,greyVarients),border:(0,_extends2.default)({primary:"#e4e4e7"},greyVarients,defaultColors),toast:(0,_extends2.default)({},toastBorderColors)};var baseTheme={colors:colors,fonts:{inter400:"Inter-Regular",inter700:"Inter-Bold"},lineHeights:[24],fontSizes:{xs:10,s:12,m:14,l:18,xl:24,xxl:32}};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.l,fontFamily:baseTheme.fonts.inter700},body:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.m},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.s},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{border:2,borderColor:"transparent",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.86",
+  "version": "0.0.90",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/Button.js

@@ -55,6 +55,7 @@ export const Button = React.forwardRef((props, ref) => {
 
   return (
     <Touchable
+      {...(variant === "solid" && { rippleColor: "white" })}
       ref={ref}
       flexDirection="row"
       disabled={disabled || isLoading}

package/src/components/OtpInputs.js

@@ -1,8 +1,9 @@
 import React from "react";
-import { Keyboard, StyleSheet, Text, TextInput, Platform } from "react-native";
-import { theme } from "../theme";
+import { Keyboard } from "react-native";
 import PropTypes from "prop-types";
-import { Container, Touchable } from "@components";
+
+import { theme } from "../theme";
+import { Container, Touchable, Typography, Input } from "@components";
 
 /**
  *
@@ -30,48 +31,79 @@ import { Container, Touchable } from "@components";
  * ```
  */
 
+const styles = {
+  inputStyles: {
+    fontSize: 0,
+    backgroundColor: "transparent",
+    color: "transparent",
+    width: "100%",
+    height: "100%",
+    position: "absolute",
+  },
+  defaultContainerStyles: {
+    margin: 2,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: theme.colors.background.secondary,
+    backgroundColor: theme.colors.background.white,
+    justifyContent: "center",
+    alignItems: "center",
+    minHeight: 45,
+    minWidth: 45,
+  },
+  defaultTextStyles: {
+    fontSize: theme.fontSizes.xl,
+    fontFamily: theme.fonts.inter700,
+  },
+};
+
 export const OtpInputs = ({
   handleChange = () => {},
   numberOfInputs = 4,
   error = false,
   code = "",
-  textContainerStyle,
-  textStyle,
+  containerStyles,
+  textStyles,
 }) => {
   const inputRef = React.useRef();
 
   return (
-    <Container style={styles.container}>
+    <Container>
       <Touchable
         onPress={() => {
-          Keyboard.dismiss();
           inputRef && inputRef.current.focus();
         }}
       >
-        <Container style={styles.inputsContainer}>
+        <Container
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="center"
+        >
           {Array(numberOfInputs)
             .fill()
             .map((number, index) => {
               return (
                 <Container
                   key={index}
-                  style={[styles.textContainer, textContainerStyle]}
+                  {...styles.defaultContainerStyles}
+                  {...containerStyles}
                 >
-                  <Text
-                    testID="otp"
+                  <Typography
                     accessibilityLabel="otp"
-                    style={[
-                      styles.otpInput,
-                      error === true ? { color: theme.colors.font.danger } : {},
-                      textStyle,
-                    ]}
+                    color={
+                      error
+                        ? theme.colors.font.danger
+                        : theme.colors.font.secondary
+                    }
+                    {...styles.defaultTextStyles}
+                    {...textStyles}
                   >
                     {code[index] || ""}
-                  </Text>
+                  </Typography>
                 </Container>
               );
             })}
-          <TextInput
+          <Input
             keyboardType="phone-pad"
             selectionColor="transparent"
             onChangeText={value => {
@@ -85,8 +117,8 @@ export const OtpInputs = ({
               }
             }}
             ref={inputRef}
-            style={styles.emptyViewStyle}
             value={code || ""}
+            {...styles.inputStyles}
           />
         </Container>
       </Touchable>
@@ -94,6 +126,11 @@ export const OtpInputs = ({
   );
 };
 
+OtpInputs.defaultProps = {
+  containerStyles: {},
+  textStyles: {},
+};
+
 OtpInputs.propTypes = {
   /**
    * This would be OTP code.
@@ -114,53 +151,9 @@ OtpInputs.propTypes = {
   /**
    * To change the styles of main container.
    */
-  textContainerStyle: PropTypes.object,
+  containerStyles: PropTypes.object,
   /**
    * To change the styles of OTP text.
    */
-  textStyle: PropTypes.object,
+  textStyles: PropTypes.object,
 };
-
-export const styles = StyleSheet.create({
-  container: {
-    marginTop: 5,
-    marginBottom: 5,
-  },
-  otpInput: {
-    color: theme.colors.font.secondary,
-    fontSize: theme.fontSizes.xl,
-    fontFamily: theme.fonts.inter700,
-    textAlign: "center",
-    minHeight: 40,
-    minWidth: 40,
-    textAlignVertical: "center",
-    alignItems: "center",
-    ...Platform.select({
-      ios: {
-        paddingTop: 5,
-      },
-      android: {},
-    }),
-    backgroundColor: "transparent",
-  },
-  textContainer: {
-    margin: 5,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: theme.colors.background.secondary,
-    backgroundColor: theme.colors.background.white,
-  },
-  inputsContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  emptyViewStyle: {
-    fontSize: 0,
-    backgroundColor: "transparent",
-    color: "transparent",
-    width: "100%",
-    height: "100%",
-    position: "absolute",
-  },
-});

package/src/components/Touchable.js

@@ -58,7 +58,8 @@ const StyledRipple = styled(Ripple)`
  *
  */
 
-export const Touchable = ({ children, elevation, ...rest }) => {
+export const Touchable = React.forwardRef((props, ref) => {
+  const { children, elevation, ...rest } = props;
   const shadowStyles = elevation ? getShadowStyles(elevation) : {};
   return (
     <StyledRipple
@@ -66,12 +67,13 @@ export const Touchable = ({ children, elevation, ...rest }) => {
       rippleDuration={600}
       rippleContainerBorderRadius={rest.borderRadius ? rest.borderRadius : 0}
       style={shadowStyles}
+      ref={ref}
       {...rest}
     >
       {children}
     </StyledRipple>
   );
-};
+});
 
 Touchable.propTypes = {
   ...propTypes.flexbox,

package/src/theme/index.js

@@ -112,6 +112,8 @@ export const theme = {
   },
   buttons: {
     solid: {
+      border: 2,
+      borderColor: "transparent",
       backgroundColor: baseTheme.colors.background.base,
     },
     inverse: {