@bigbinary/neetoui-rn 0.0.130 → 0.0.133

package/lib/components/Alert.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Alert=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Alert.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 useAlertHook=function useAlertHook(){var _React$useState=_react.default.useState(false),_React$useState2=(0,_slicedToArray2.default)(_React$useState,2),isVisible=_React$useState2[0],setIsVisible=_React$useState2[1];var _useState=(0,_react.useState)({}),_useState2=(0,_slicedToArray2.default)(_useState,2),params=_useState2[0],setParams=_useState2[1];var _params$title=params.title,title=_params$title===void 0?"":_params$title,_params$description=params.description,description=_params$description===void 0?"":_params$description,_params$isCancelable=params.isCancelable,isCancelable=_params$isCancelable===void 0?true:_params$isCancelable,onDismiss=params.onDismiss,_params$buttons=params.buttons,buttons=_params$buttons===void 0?[]:_params$buttons;var show=_react.default.useCallback(function(params){setParams(params);setIsVisible(true);},[]);var hide=_react.default.useCallback(function(){setIsVisible(false);},[]);var hideOnBackPressDrop=_react.default.useCallback(function(){if(isCancelable){hide();}if(onDismiss&&isCancelable){onDismiss();}},[hide,isCancelable,onDismiss]);return{isVisible:isVisible,show:show,hide:hide,hideOnBackPressDrop:hideOnBackPressDrop,title:title,description:description,isCancelable:isCancelable,buttons:buttons};};var rootLevelRef=null;var Alert=function Alert(){var _useAlertHook=useAlertHook(),isVisible=_useAlertHook.isVisible,show=_useAlertHook.show,hide=_useAlertHook.hide,buttons=_useAlertHook.buttons,hideOnBackPressDrop=_useAlertHook.hideOnBackPressDrop,title=_useAlertHook.title,description=_useAlertHook.description;var _buttons=(0,_slicedToArray2.default)(buttons,3),_buttons$=_buttons[0],button1=_buttons$===void 0?{label:"OK",onPress:function onPress(){}}:_buttons$,button2=_buttons[1],button3=_buttons[2];var ref=_react.default.useRef(null);_react.default.useImperativeHandle(ref,_react.default.useCallback(function(){return{show:show};},[show]));_react.default.useEffect(function(){rootLevelRef=ref.current;},[ref]);return _react.default.createElement(_reactNativeModal.default,{animationIn:"zoomInDown",animationOut:"zoomOutUp",animationInTiming:600,animationOutTiming:600,backdropTransitionInTiming:600,backdropTransitionOutTiming:600,style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hideOnBackPressDrop,useNativeDriver:true,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:5}},_react.default.createElement(_.Container,{bg:"background.primary",justifyContent:"center",alignItems:"center",width:"90%",padding:20,borderRadius:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:7}},_react.default.createElement(_.Typography,{fontFamily:"sf700",fontSize:"l",color:"font.grey800",__self:_this,__source:{fileName:_jsxFileName,lineNumber:163,columnNumber:9}},title),_react.default.createElement(_.Container,{alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:9}},_react.default.createElement(_.Typography,{textAlign:"center",py:20,fontFamily:"sf400",fontSize:"l",color:"font.grey600",__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:11}},description)),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",justifyContent:"space-around",__self:_this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:9}},button2&&_react.default.createElement(_.Button,{borderWidth:1,variant:"inverse",fontFamily:"sf400",fontSize:"m",borderRadius:50,minWidth:110,height:35,p:0,onPress:function onPress(){button2.onPress==null?void 0:button2.onPress();hide();},label:button2.label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:184,columnNumber:13}}),button1&&_react.default.createElement(_.Button,{fontFamily:"sf400",fontSize:"m",borderRadius:50,minWidth:110,onPress:function onPress(){button1.onPress==null?void 0:button1.onPress();hide();},label:button1.label,height:35,p:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:201,columnNumber:13}})),button3&&_react.default.createElement(_.Button,{mt:20,borderWidth:1,variant:"inverse",fontFamily:"sf400",fontSize:"m",borderRadius:50,minWidth:110,onPress:function onPress(){button3.onPress==null?void 0:button3.onPress();hide();},label:button3.label,height:35,p:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:217,columnNumber:11}})));};exports.Alert=Alert;var styles=_reactNative.StyleSheet.create({modalStyle:{alignItems:"center",justifyContent:"center"}});Alert.show=function(params){rootLevelRef.show(params);};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Alert=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Alert.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 useAlertHook=function useAlertHook(){var _React$useState=_react.default.useState(false),_React$useState2=(0,_slicedToArray2.default)(_React$useState,2),isVisible=_React$useState2[0],setIsVisible=_React$useState2[1];var _useState=(0,_react.useState)({}),_useState2=(0,_slicedToArray2.default)(_useState,2),params=_useState2[0],setParams=_useState2[1];var _params$title=params.title,title=_params$title===void 0?"":_params$title,_params$description=params.description,description=_params$description===void 0?"":_params$description,_params$isCancelable=params.isCancelable,isCancelable=_params$isCancelable===void 0?true:_params$isCancelable,onDismiss=params.onDismiss,_params$buttons=params.buttons,buttons=_params$buttons===void 0?[]:_params$buttons;var show=_react.default.useCallback(function(params){setParams(params);setIsVisible(true);},[]);var hide=_react.default.useCallback(function(){setIsVisible(false);},[]);var hideOnBackPressDrop=_react.default.useCallback(function(){if(isCancelable){hide();}if(onDismiss&&isCancelable){onDismiss();}},[hide,isCancelable,onDismiss]);return{isVisible:isVisible,show:show,hide:hide,hideOnBackPressDrop:hideOnBackPressDrop,title:title,description:description,isCancelable:isCancelable,buttons:buttons};};var rootLevelRef=null;var Alert=function Alert(){var _useAlertHook=useAlertHook(),isVisible=_useAlertHook.isVisible,show=_useAlertHook.show,hide=_useAlertHook.hide,buttons=_useAlertHook.buttons,hideOnBackPressDrop=_useAlertHook.hideOnBackPressDrop,title=_useAlertHook.title,description=_useAlertHook.description;var _buttons=(0,_slicedToArray2.default)(buttons,3),_buttons$=_buttons[0],button1=_buttons$===void 0?{label:"OK",onPress:function onPress(){},variant:"solid"}:_buttons$,button2=_buttons[1],button3=_buttons[2];var ref=_react.default.useRef(null);_react.default.useImperativeHandle(ref,_react.default.useCallback(function(){return{show:show};},[show]));_react.default.useEffect(function(){rootLevelRef=ref.current;},[ref]);return _react.default.createElement(_reactNativeModal.default,{animationIn:"zoomInDown",animationOut:"zoomOutUp",animationInTiming:600,animationOutTiming:600,backdropTransitionInTiming:600,backdropTransitionOutTiming:600,style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hideOnBackPressDrop,useNativeDriver:true,hideModalContentWhileAnimating:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:143,columnNumber:5}},_react.default.createElement(_.Container,{bg:"background.primary",justifyContent:"center",alignItems:"center",width:"90%",padding:20,borderRadius:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:7}},_react.default.createElement(_.Typography,{fontFamily:"sf700",fontSize:"l",color:"font.grey800",__self:_this,__source:{fileName:_jsxFileName,lineNumber:164,columnNumber:9}},title),_react.default.createElement(_.Container,{alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:9}},_react.default.createElement(_.Typography,{textAlign:"center",py:20,fontFamily:"sf400",fontSize:"l",color:"font.grey600",__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:11}},description)),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",justifyContent:"space-around",__self:_this,__source:{fileName:_jsxFileName,lineNumber:179,columnNumber:9}},button2&&_react.default.createElement(_.Button,{borderWidth:1,fontFamily:"sf400",fontSize:"m",borderRadius:50,minWidth:110,height:35,p:0,onPress:function onPress(){button2.onPress==null?void 0:button2.onPress();hide();},label:button2.label,width:undefined,variant:button2.variant||"text",__self:_this,__source:{fileName:_jsxFileName,lineNumber:185,columnNumber:13}}),button1&&_react.default.createElement(_.Button,{fontFamily:"sf400",fontSize:"m",borderRadius:50,minWidth:110,onPress:function onPress(){button1.onPress==null?void 0:button1.onPress();hide();},label:button1.label,height:35,p:0,width:undefined,variant:button1.variant,__self:_this,__source:{fileName:_jsxFileName,lineNumber:203,columnNumber:13}})),button3&&_react.default.createElement(_.Button,{mt:20,borderWidth:1,fontFamily:"sf400",fontSize:"m",borderRadius:50,minWidth:110,onPress:function onPress(){button3.onPress==null?void 0:button3.onPress();hide();},label:button3.label,height:35,p:0,variant:button3.variant,__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:11}})));};exports.Alert=Alert;var styles=_reactNative.StyleSheet.create({modalStyle:{alignItems:"center",justifyContent:"center"}});Alert.show=function(params){rootLevelRef.show(params);};

package/lib/components/Calendar.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Calendar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _dayjs=_interopRequireDefault(require("dayjs"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNativeCalendars=require("react-native-calendars");var _excluded=["selectedDate"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Calendar.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 Calendar=function Calendar(props){var selectedDate=props.selectedDate,rest=(0,_objectWithoutProperties2.default)(props,_excluded);delete rest.markedDates;var theme=(0,_react.useContext)(_native.ThemeContext);var isCurrentDay=(0,_dayjs.default)(selectedDate).isSame((0,_dayjs.default)(),"D");return _react.default.createElement(_reactNativeCalendars.Calendar,(0,_extends2.default)({key:""+isCurrentDay,firstDay:1,markedDates:(0,_defineProperty2.default)({},(0,_dayjs.default)(selectedDate).format("YYYY-MM-DD"),{selected:true}),theme:{arrowColor:theme.colors.font.primary,dotStyle:{height:0,width:0,marginTop:0},"stylesheet.calendar.header":{week:{marginVertical:10,flexDirection:"row",justifyContent:"space-around",alignItems:"center",fontFamily:theme.fonts.sf600},dayHeader:{flex:1,textAlign:"center",fontFamily:theme.fonts.sf600,fontSize:theme.fontSizes.xs,color:theme.colors.font.grey500,textTransform:"uppercase"},monthText:{fontFamily:theme.fonts.sf400,fontSize:theme.fontSizes.l,color:theme.colors.font.primary}},"stylesheet.day.basic":{base:{alignItems:"center",justifyContent:"center",height:26,width:26,borderRadius:5,borderWidth:1,borderColor:"transparent"},today:{borderColor:isCurrentDay?"transparent":theme.colors.border.base},selected:{backgroundColor:"#5E5CE61A"},text:{fontFamily:theme.fonts.sf400,fontSize:theme.fontSizes.xs,color:theme.colors.font.primary,margin:0,padding:0},todayText:{color:theme.colors.font.base},selectedText:{fontFamily:theme.fonts.sf600,color:theme.colors.font.base},disabledText:{color:theme.colors.font.grey400}}}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:5}}));};exports.Calendar=Calendar;Calendar.propTypes={selectedDate:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.instanceOf(_dayjs.default)])};

package/lib/components/Input.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Input=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 _styledSystem=require("styled-system");var _reactNative=require("react-native");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _excluded=["label","value","onChangeHandle","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(props){var label=props.label,_props$value=props.value,value=_props$value===void 0?"":_props$value,_props$onChangeHandle=props.onChangeHandle,onChangeHandle=_props$onChangeHandle===void 0?function(){}:_props$onChangeHandle,_props$errorMessage=props.errorMessage,errorMessage=_props$errorMessage===void 0?null:_props$errorMessage,PrefixIcon=props.PrefixIcon,SuffixIcon=props.SuffixIcon,_props$autoFocus=props.autoFocus,autoFocus=_props$autoFocus===void 0?false:_props$autoFocus,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=new _reactNative.Animated.Value(0);(0,_react.useEffect)(function(){if(autoFocus||value){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start();inputRef.current&&inputRef.current.setNativeProps({style:{top:isFocused?10:0}});};var handleStyles=(0,_react.useCallback)(function(isFocused){containerRef.current&&containerRef.current.setNativeProps({borderColor:errorMessage?colors.border.danger:isFocused?colors.border.purple700:colors.border.grey300,borderWidth:errorMessage||isFocused?2:1});},[]);var labelStyles={fontSize:animatedController.interpolate({inputRange:[0,1],outputRange:[18,14]}),top:animatedController.interpolate({inputRange:[0,1],outputRange:[16,6]})};var handleFocusBlur=function handleFocusBlur(isFocused){if(!value)handleLabelAnimation(isFocused);handleStyles(isFocused);};return _react.default.createElement(View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:5}},_react.default.createElement(View,{borderRadius:5,borderWidth:1,borderColor:errorMessage?"border.danger":"border.grey300",ref:containerRef,alignItems:"center",flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:7}},!!PrefixIcon&&_react.default.createElement(View,{pl:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:11}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:13}})),_react.default.createElement(View,{flex:1,left:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:170,columnNumber:9}},_react.default.createElement(AnimatedLabel,{color:disabled?"font.grey400":"font.grey600",position:"absolute",zIndex:1,style:labelStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:171,columnNumber:11}},label),_react.default.createElement(TextInput,(0,_extends2.default)({ref:inputRef,value:value,onChangeText:onChangeHandle,autoFocus:autoFocus,editable:!disabled,onFocus:function onFocus(){handleFocusBlur(true);},onBlur:function onBlur(){handleFocusBlur(false);},color:disabled?"font.grey500":"font.grey800",fontSize:18,py:3,px:0,top:0,zIndex:2},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:179,columnNumber:11}}))),!!SuffixIcon&&_react.default.createElement(View,{px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:201,columnNumber:11}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:202,columnNumber:13}}))),!!errorMessage&&_react.default.createElement(Typography,{py:2,color:"font.danger",__self:_this,__source:{fileName:_jsxFileName,lineNumber:207,columnNumber:9}},errorMessage));};exports.Input=Input;Input.propTypes={label:_propTypes.default.string,value:_propTypes.default.string.isRequired,onChangeHandle:_propTypes.default.func.isRequired,errorMessage:_propTypes.default.string,disabled:_propTypes.default.bool,autoFocus:_propTypes.default.bool,PrefixIcon:_propTypes.default.elementType,SuffixIcon:_propTypes.default.elementType};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Input=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 _styledSystem=require("styled-system");var _reactNative=require("react-native");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _excluded=["label","value","onChangeText","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(props){var _rest$inputProps;var label=props.label,_props$value=props.value,value=_props$value===void 0?"":_props$value,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$errorMessage=props.errorMessage,errorMessage=_props$errorMessage===void 0?null:_props$errorMessage,PrefixIcon=props.PrefixIcon,SuffixIcon=props.SuffixIcon,_props$autoFocus=props.autoFocus,autoFocus=_props$autoFocus===void 0?false:_props$autoFocus,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){if(autoFocus||value){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start();inputRef.current&&inputRef.current.setNativeProps({style:{top:isFocused?10:0}});};var handleStyles=(0,_react.useCallback)(function(isFocused){containerRef.current&&containerRef.current.setNativeProps({borderColor:errorMessage?colors.border.danger:isFocused?colors.border.purple500:colors.border.grey400,borderWidth:errorMessage||isFocused?1.5:1});},[]);var labelStyles={fontSize:animatedController.interpolate({inputRange:[0,1],outputRange:[17,13]}),top:animatedController.interpolate({inputRange:[0,1],outputRange:[16,6]})};var handleFocusBlur=function handleFocusBlur(isFocused){if(!value)handleLabelAnimation(isFocused);handleStyles(isFocused);};return _react.default.createElement(View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:5}},_react.default.createElement(View,(0,_extends2.default)({ref:containerRef,borderRadius:8,borderWidth:1,borderColor:errorMessage?"border.danger":"border.grey400",alignItems:"center",flexDirection:"row",justifyContent:"space-between"},!(rest!=null&&(_rest$inputProps=rest.inputProps)!=null&&_rest$inputProps.multiline)&&{height:58},{__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:7}}),!!PrefixIcon&&_react.default.createElement(View,{pl:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:11}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:168,columnNumber:13}})),_react.default.createElement(View,{flex:1,left:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:171,columnNumber:9}},_react.default.createElement(AnimatedLabel,{color:disabled?"font.grey400":"font.grey600",position:"absolute",zIndex:1,style:labelStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,columnNumber:11}},label),_react.default.createElement(TextInput,(0,_extends2.default)({ref:inputRef,value:value,onChangeText:onChangeText,autoFocus:autoFocus,editable:!disabled,onFocus:function onFocus(){handleFocusBlur(true);},onBlur:function onBlur(){handleFocusBlur(false);},color:disabled?"font.grey500":"font.primary",fontSize:17,py:3,pr:3,top:0,zIndex:2},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:180,columnNumber:11}}))),!!SuffixIcon&&_react.default.createElement(View,{px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:202,columnNumber:11}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:203,columnNumber:13}}))),!!errorMessage&&_react.default.createElement(Typography,{py:2,color:"font.danger",__self:_this,__source:{fileName:_jsxFileName,lineNumber:208,columnNumber:9}},errorMessage));};exports.Input=Input;Input.propTypes={label:_propTypes.default.string,value:_propTypes.default.string.isRequired,onChangeText:_propTypes.default.func.isRequired,errorMessage:_propTypes.default.string,disabled:_propTypes.default.bool,autoFocus:_propTypes.default.bool,PrefixIcon:_propTypes.default.elementType,SuffixIcon:_propTypes.default.elementType};

package/lib/components/SearchBar.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _excluded=["placeholder","onChangeText","debounceDelay"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.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 SearchBar=function SearchBar(props){var _props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?"Search":_props$placeholder,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$debounceDelay=props.debounceDelay,debounceDelay=_props$debounceDelay===void 0?1000:_props$debounceDelay,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText,Number(debounceDelay));var searchAnimationController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.timing(searchAnimationController,{toValue:val,duration:350,useNativeDriver:false}).start();};var searchInputWidth=searchAnimationController.interpolate({inputRange:[0,1],outputRange:["100%","85%"]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();};return _react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:5}},_react.default.createElement(_reactNative.Animated.View,{style:(0,_extends2.default)({},styles.inputContainerStyles,{width:searchInputWidth}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:7}},_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-search-line",size:20,color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:11}})),_react.default.createElement(_reactNative.TextInput,(0,_extends2.default)({ref:inputRef,value:searchText,onChangeText:setSearchText,onFocus:function onFocus(){animateSearchInput(1);},onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},placeholder:placeholder,fontSize:16,flex:1,placeholderTextColor:_theme.theme.colors.font.grey600,color:"font.primary"},rest.searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:9}}))),_react.default.createElement(_reactNative.Animated.View,{style:{opacity:searchAnimationController},__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:7}},_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:9}})));};exports.SearchBar=SearchBar;var styles=_reactNative.StyleSheet.create({inputContainerStyles:{height:42,borderWidth:1,borderColor:_theme.theme.colors.border.grey400,borderRadius:8,flexDirection:"row",alignItems:"center"}});SearchBar.propTypes={placeholder:_propTypes.default.string,onChangeText:_propTypes.default.func.isRequired,debounceDelay:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string])};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _excluded=["placeholder","onChangeText","debounceDelay"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.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 SearchBar=function SearchBar(props){var _props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?"Search":_props$placeholder,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$debounceDelay=props.debounceDelay,debounceDelay=_props$debounceDelay===void 0?1000:_props$debounceDelay,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText,Number(debounceDelay));var searchAnimationController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.timing(searchAnimationController,{toValue:val,duration:350,useNativeDriver:false}).start();};var searchInputWidth=searchAnimationController.interpolate({inputRange:[0,1],outputRange:["100%","85%"]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();};return _react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"center"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:5}}),_react.default.createElement(_reactNative.Animated.View,{style:(0,_extends2.default)({},styles.inputContainerStyles,{width:searchInputWidth}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:7}},_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-search-line",size:20,color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:11}})),_react.default.createElement(_reactNative.TextInput,(0,_extends2.default)({ref:inputRef,value:searchText,onChangeText:setSearchText,onFocus:function onFocus(){animateSearchInput(1);},onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},placeholder:placeholder,fontSize:16,flex:1,placeholderTextColor:_theme.theme.colors.font.grey600,color:"font.primary"},rest.searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:81,columnNumber:9}}))),_react.default.createElement(_reactNative.Animated.View,{style:{opacity:searchAnimationController},__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:7}},_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:9}})));};exports.SearchBar=SearchBar;var styles=_reactNative.StyleSheet.create({inputContainerStyles:{height:42,borderWidth:1,borderColor:_theme.theme.colors.border.grey400,borderRadius:8,flexDirection:"row",alignItems:"center"}});SearchBar.propTypes={placeholder:_propTypes.default.string,onChangeText:_propTypes.default.func.isRequired,debounceDelay:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),searchbarProps:_propTypes.default.object};

package/lib/components/SegmentPicker.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SegmentPicker=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentPicker.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 defaultShadowStyle={shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:0.23,shadowRadius:2.62,elevation:4};var DEFAULT_SPRING_CONFIG={stiffness:150,damping:20,mass:1,overshootClamping:false,restSpeedThreshold:0.001,restDisplacementThreshold:0.001};var width=_reactNative.Dimensions.get("screen").width-32;var SegmentPicker=function SegmentPicker(_ref){var tabs=_ref.tabs,onChange=_ref.onChange,currentIndex=_ref.currentIndex,inactiveSegmentStyle=_ref.inactiveSegmentStyle,activeSegmentStyle=_ref.activeSegmentStyle,activeTextStyle=_ref.activeTextStyle,inactiveTextStyle=_ref.inactiveTextStyle,py=_ref.py;var translateValue=(width-4)/(tabs==null?void 0:tabs.length);var tabTranslateValue=(0,_reactNativeReanimated.useSharedValue)(0);var memoizedTabPressCallback=(0,_react.useCallback)(function(index){onChange(index);},[onChange]);(0,_react.useEffect)(function(){tabTranslateValue.value=(0,_reactNativeReanimated.withSpring)(currentIndex*(translateValue*1),DEFAULT_SPRING_CONFIG);},[currentIndex]);var tabTranslateAnimatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{transform:[{translateX:tabTranslateValue.value}]};};_f._closure={tabTranslateValue:tabTranslateValue};_f.asString="function _f(){const{tabTranslateValue}=jsThis._closure;{return{transform:[{translateX:tabTranslateValue.value}]};}}";_f.__workletHash=13055522218631;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentPicker.js (96:54)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.defaultSegmentedControlWrapper,inactiveSegmentStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:103,columnNumber:5}},_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.movingSegmentStyle,activeSegmentStyle,defaultShadowStyle,_reactNative.StyleSheet.absoluteFill,{width:width/(tabs==null?void 0:tabs.length)},tabTranslateAnimatedStyles],__self:_this,__source:{fileName:_jsxFileName,lineNumber:106,columnNumber:7}}),tabs.map(function(label,index){var currentIndexTextStyle=currentIndex===index?activeTextStyle:inactiveTextStyle;return _react.default.createElement(_.Touchable,{key:index,flex:1,elevation:6,onPress:function onPress(){return memoizedTabPressCallback(index);},py:py,activeOpacity:0.7,__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:11}},_react.default.createElement(_.Typography,(0,_extends2.default)({fontSize:"xs",textAlign:"center",color:"font.grey800",fontFamily:"sf500"},currentIndexTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:13}}),label));}));};exports.SegmentPicker=SegmentPicker;var styles=_reactNative.StyleSheet.create({segmentedControlWrapper:{display:"flex",flexDirection:"row",alignItems:"center",borderRadius:8,width:width},defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:8,backgroundColor:"#E5E5EA",width:width},movingSegmentStyle:{top:0,marginVertical:2,marginHorizontal:2,borderRadius:6,backgroundColor:"#FFFFFF"}});SegmentPicker.propTypes={tabs:_propTypes.default.arrayOf(_propTypes.default.string).isRequired,onChange:_propTypes.default.func.isRequired,currentIndex:_propTypes.default.number.isRequired,inactiveSegmentStyle:_propTypes.default.object,activeSegmentStyle:_propTypes.default.object,inactiveTextStyle:_propTypes.default.object,activeTextStyle:_propTypes.default.object,py:_propTypes.default.number};SegmentPicker.defaultProps={tabs:[],onChange:function onChange(){},currentIndex:0,py:12};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SegmentPicker=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _=require("./");var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentPicker.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 defaultShadowStyle={shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:0.23,shadowRadius:2.62,elevation:4};var DEFAULT_SPRING_CONFIG={stiffness:150,damping:20,mass:1,overshootClamping:false,restSpeedThreshold:0.001,restDisplacementThreshold:0.001};var width=_reactNative.Dimensions.get("screen").width-32;var SegmentPicker=function SegmentPicker(_ref){var tabs=_ref.tabs,onChange=_ref.onChange,currentIndex=_ref.currentIndex,inactiveSegmentStyle=_ref.inactiveSegmentStyle,activeSegmentStyle=_ref.activeSegmentStyle,activeTextStyle=_ref.activeTextStyle,inactiveTextStyle=_ref.inactiveTextStyle,height=_ref.height;var translateValue=(width-4)/(tabs==null?void 0:tabs.length);var tabTranslateValue=(0,_reactNativeReanimated.useSharedValue)(0);var memoizedTabPressCallback=(0,_react.useCallback)(function(index){onChange(index);},[onChange]);(0,_react.useEffect)(function(){tabTranslateValue.value=(0,_reactNativeReanimated.withSpring)(currentIndex*(translateValue*1),DEFAULT_SPRING_CONFIG);},[currentIndex]);var tabTranslateAnimatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{transform:[{translateX:tabTranslateValue.value}]};};_f._closure={tabTranslateValue:tabTranslateValue};_f.asString="function _f(){const{tabTranslateValue}=jsThis._closure;{return{transform:[{translateX:tabTranslateValue.value}]};}}";_f.__workletHash=13055522218631;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SegmentPicker.js (96:54)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.defaultSegmentedControlWrapper,inactiveSegmentStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:103,columnNumber:5}},_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.movingSegmentStyle,activeSegmentStyle,defaultShadowStyle,_reactNative.StyleSheet.absoluteFill,{width:width/(tabs==null?void 0:tabs.length)},tabTranslateAnimatedStyles],__self:_this,__source:{fileName:_jsxFileName,lineNumber:106,columnNumber:7}}),tabs.map(function(label,index){var currentIndexTextStyle=currentIndex===index?activeTextStyle:inactiveTextStyle;return _react.default.createElement(_.Touchable,{key:index,flex:1,elevation:6,onPress:function onPress(){return memoizedTabPressCallback(index);},height:height,justifyContent:"center",activeOpacity:0.7,__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:11}},_react.default.createElement(_.Typography,(0,_extends2.default)({fontSize:"xs",textAlign:"center",color:"font.grey800",fontFamily:"sf500"},currentIndexTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:13}}),label));}));};exports.SegmentPicker=SegmentPicker;var styles=_reactNative.StyleSheet.create({segmentedControlWrapper:{display:"flex",flexDirection:"row",alignItems:"center",borderRadius:8,width:width},defaultSegmentedControlWrapper:{position:"relative",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:8,backgroundColor:"#E5E5EA",width:width},movingSegmentStyle:{top:0,marginVertical:2,marginHorizontal:2,borderRadius:6,backgroundColor:"#FFFFFF"}});SegmentPicker.propTypes={tabs:_propTypes.default.arrayOf(_propTypes.default.string).isRequired,onChange:_propTypes.default.func.isRequired,currentIndex:_propTypes.default.number.isRequired,inactiveSegmentStyle:_propTypes.default.object,activeSegmentStyle:_propTypes.default.object,inactiveTextStyle:_propTypes.default.object,activeTextStyle:_propTypes.default.object,height:_propTypes.default.number};SegmentPicker.defaultProps={tabs:[],onChange:function onChange(){},currentIndex:0,height:32};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});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,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});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,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});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,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentPicker",{enumerable:true,get:function get(){return _SegmentPicker.SegmentPicker;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});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 _SocialButton=require("./SocialButton");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");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentPicker=require("./SegmentPicker");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Accordion",{enumerable:true,get:function get(){return _Accordion.Accordion;}});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,"Calendar",{enumerable:true,get:function get(){return _Calendar.Calendar;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Carousel",{enumerable:true,get:function get(){return _Carousel.Carousel;}});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,"Divider",{enumerable:true,get:function get(){return _Divider.Divider;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"FlatList",{enumerable:true,get:function get(){return _FlatList.FlatList;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ListItem",{enumerable:true,get:function get(){return _ListItem.ListItem;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OnBoarding",{enumerable:true,get:function get(){return _OnBoarding.OnBoarding;}});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,"ScrollView",{enumerable:true,get:function get(){return _ScrollView.ScrollView;}});Object.defineProperty(exports,"SearchBar",{enumerable:true,get:function get(){return _SearchBar.SearchBar;}});Object.defineProperty(exports,"SegmentPicker",{enumerable:true,get:function get(){return _SegmentPicker.SegmentPicker;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"SocialButton",{enumerable:true,get:function get(){return _SocialButton.SocialButton;}});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 _SocialButton=require("./SocialButton");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");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");var _Divider=require("./Divider");var _FlatList=require("./FlatList");var _ScrollView=require("./ScrollView");var _SegmentPicker=require("./SegmentPicker");var _ListItem=require("./ListItem");var _Carousel=require("./Carousel");var _OnBoarding=require("./OnBoarding");var _SearchBar=require("./SearchBar");var _Accordion=require("./Accordion");var _Calendar=require("./Calendar");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.130",
+  "version": "0.0.133",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -48,6 +48,8 @@
   "dependencies": {
     "@react-native-community/hooks": "^2.8.1",
     "@styled-system/prop-types": "^5.1.5",
+    "dayjs": "^1.11.4",
+    "react-native-calendars": "^1.1285.0",
     "react-native-gesture-handler": "^2.4.0",
     "react-native-material-ripple": "^0.9.1",
     "react-native-modal": "^13.0.0",

package/src/components/Alert.js

@@ -117,6 +117,7 @@ export const Alert = () => {
     button1 = {
       label: "OK",
       onPress: () => {},
+      variant: "solid",
     },
     button2,
     button3,
@@ -183,7 +184,6 @@ export const Alert = () => {
           {button2 && (
             <Button
               borderWidth={1}
-              variant="inverse"
               fontFamily="sf400"
               fontSize="m"
               borderRadius={50}
@@ -195,6 +195,8 @@ export const Alert = () => {
                 hide();
               }}
               label={button2.label}
+              width={undefined}
+              variant={button2.variant || "text"}
             />
           )}
           {button1 && (
@@ -210,6 +212,8 @@ export const Alert = () => {
               label={button1.label}
               height={35}
               p={0}
+              width={undefined}
+              variant={button1.variant}
             />
           )}
         </Container>
@@ -217,7 +221,6 @@ export const Alert = () => {
           <Button
             mt={20}
             borderWidth={1}
-            variant="inverse"
             fontFamily="sf400"
             fontSize="m"
             borderRadius={50}
@@ -229,6 +232,7 @@ export const Alert = () => {
             label={button3.label}
             height={35}
             p={0}
+            variant={button3.variant}
           />
         )}
       </Container>

package/src/components/Calendar.js

@@ -0,0 +1,124 @@
+import React, { useContext, useState } from "react";
+import dayjs from "dayjs";
+import PropTypes from "prop-types";
+import { ThemeContext } from "styled-components/native";
+import { Calendar as RNCalender } from "react-native-calendars";
+
+/**
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/calendar/calendar.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import dayjs from "dayjs";
+ * import { Calendar } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  const [selectedDate, setSelectedDate] = useState(dayjs());
+ *  return (
+ *    <Calendar
+ *      selectedDate={selectedDate}
+ *      onDayPress={({ dateString }) => setSelectedDate(dateString)}
+ *    />
+ *  );
+ * }
+ * ```
+ *
+ * Checkout <a href=" https://www.npmjs.com/package/react-native-calendars">react-native-calendars</a> package for all the available props
+ */
+
+export const Calendar = props => {
+  const { selectedDate, ...rest } = props;
+  delete rest.markedDates;
+  const theme = useContext(ThemeContext);
+  const isCurrentDay = dayjs(selectedDate).isSame(dayjs(), "D");
+
+  return (
+    <RNCalender
+      key={`${isCurrentDay}`}
+      firstDay={1}
+      markedDates={{
+        [dayjs(selectedDate).format("YYYY-MM-DD")]: {
+          selected: true,
+        },
+      }}
+      theme={{
+        arrowColor: theme.colors.font.primary,
+        dotStyle: {
+          height: 0,
+          width: 0,
+          marginTop: 0,
+        },
+        "stylesheet.calendar.header": {
+          week: {
+            marginVertical: 10,
+            flexDirection: "row",
+            justifyContent: "space-around",
+            alignItems: "center",
+            fontFamily: theme.fonts.sf600,
+          },
+          dayHeader: {
+            flex: 1,
+            textAlign: "center",
+            fontFamily: theme.fonts.sf600,
+            fontSize: theme.fontSizes.xs,
+            color: theme.colors.font.grey500,
+            textTransform: "uppercase",
+          },
+          monthText: {
+            fontFamily: theme.fonts.sf400,
+            fontSize: theme.fontSizes.l,
+            color: theme.colors.font.primary,
+          },
+        },
+        "stylesheet.day.basic": {
+          base: {
+            alignItems: "center",
+            justifyContent: "center",
+            height: 26,
+            width: 26,
+            borderRadius: 5,
+            borderWidth: 1,
+            borderColor: "transparent",
+          },
+          today: {
+            borderColor: isCurrentDay
+              ? "transparent"
+              : theme.colors.border.base,
+          },
+          selected: {
+            backgroundColor: "#5E5CE61A",
+          },
+          text: {
+            fontFamily: theme.fonts.sf400,
+            fontSize: theme.fontSizes.xs,
+            color: theme.colors.font.primary,
+            margin: 0,
+            padding: 0,
+          },
+          todayText: {
+            color: theme.colors.font.base,
+          },
+          selectedText: {
+            fontFamily: theme.fonts.sf600,
+            color: theme.colors.font.base,
+          },
+          disabledText: {
+            color: theme.colors.font.grey400,
+          },
+        },
+      }}
+      {...rest}
+    />
+  );
+};
+
+Calendar.propTypes = {
+  selectedDate: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.instanceOf(dayjs),
+  ]),
+};

package/src/components/Input.js

@@ -51,7 +51,7 @@ const Typography = styled.Text`
 `;
 
 /**
- *
+ * Input component allow users to input custom text entries with a keyboard.
  * This component supports below props categories from [styled-system ](/styled-system).
  * <ul>
  * <li>flexbox</li>
@@ -70,7 +70,7 @@ const Typography = styled.Text`
  * export default function Main() {
  *  return (
  *    <Container>
- *     <Input value="Oliver Smith" onChangeHandle={()=>{}} label="Name" />
+ *     <Input value="Oliver Smith" onChangeText={()=>{}} label="Name" />
  *    </Container>
  *  );
  * }
@@ -84,7 +84,7 @@ export const Input = props => {
   const {
     label,
     value = "",
-    onChangeHandle = () => {},
+    onChangeText = () => {},
     errorMessage = null,
     PrefixIcon,
     SuffixIcon,
@@ -96,7 +96,7 @@ export const Input = props => {
   const colors = useContext(ThemeContext).colors;
   const inputRef = useRef();
   const containerRef = useRef();
-  const animatedController = new Animated.Value(0);
+  const animatedController = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     if (autoFocus || value) {
@@ -128,9 +128,9 @@ export const Input = props => {
         borderColor: errorMessage
           ? colors.border.danger
           : isFocused
-          ? colors.border.purple700
-          : colors.border.grey300,
-        borderWidth: errorMessage || isFocused ? 2 : 1,
+          ? colors.border.purple500
+          : colors.border.grey400,
+        borderWidth: errorMessage || isFocused ? 1.5 : 1,
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -138,7 +138,7 @@ export const Input = props => {
   const labelStyles = {
     fontSize: animatedController.interpolate({
       inputRange: [0, 1],
-      outputRange: [18, 14],
+      outputRange: [17, 13],
     }),
     top: animatedController.interpolate({
       inputRange: [0, 1],
@@ -154,13 +154,14 @@ export const Input = props => {
   return (
     <View>
       <View
-        borderRadius={5}
-        borderWidth={1}
-        borderColor={errorMessage ? "border.danger" : "border.grey300"}
         ref={containerRef}
+        borderRadius={8}
+        borderWidth={1}
+        borderColor={errorMessage ? "border.danger" : "border.grey400"}
         alignItems="center"
         flexDirection="row"
         justifyContent="space-between"
+        {...(!rest?.inputProps?.multiline && { height: 58 })}
       >
         {!!PrefixIcon && (
           <View pl={2}>
@@ -179,7 +180,7 @@ export const Input = props => {
           <TextInput
             ref={inputRef}
             value={value}
-            onChangeText={onChangeHandle}
+            onChangeText={onChangeText}
             autoFocus={autoFocus}
             editable={!disabled}
             onFocus={() => {
@@ -188,10 +189,10 @@ export const Input = props => {
             onBlur={() => {
               handleFocusBlur(false);
             }}
-            color={disabled ? "font.grey500" : "font.grey800"}
-            fontSize={18}
+            color={disabled ? "font.grey500" : "font.primary"}
+            fontSize={17}
             py={3}
-            px={0}
+            pr={3}
             top={0}
             zIndex={2}
             {...rest.inputProps}
@@ -224,7 +225,7 @@ Input.propTypes = {
   /**
    * Func to set the current value.
    */
-  onChangeHandle: PropTypes.func.isRequired,
+  onChangeText: PropTypes.func.isRequired,
   /**
    * To display error/info messages
    */

package/src/components/SearchBar.js

@@ -64,7 +64,7 @@ export const SearchBar = props => {
   };
 
   return (
-    <Container flexDirection="row" alignItems="center">
+    <Container flexDirection="row" alignItems="center" {...rest.containerProps}>
       <Animated.View
         style={{
           ...styles.inputContainerStyles,
@@ -131,4 +131,8 @@ SearchBar.propTypes = {
    * Takes numeric value which is used to set the debounce delay
    */
   debounceDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Takes an object and accepts all the props accepted by TextInput component from React Native.
+   */
+  searchbarProps: PropTypes.object,
 };

package/src/components/SegmentPicker.js

@@ -72,7 +72,7 @@ export const SegmentPicker = ({
   activeSegmentStyle,
   activeTextStyle,
   inactiveTextStyle,
-  py,
+  height,
 }) => {
   const translateValue = (width - 4) / tabs?.length;
   const tabTranslateValue = useSharedValue(0);
@@ -125,7 +125,8 @@ export const SegmentPicker = ({
             flex={1}
             elevation={6}
             onPress={() => memoizedTabPressCallback(index)}
-            py={py}
+            height={height}
+            justifyContent="center"
             activeOpacity={0.7}
           >
             <Typography
@@ -199,12 +200,12 @@ SegmentPicker.propTypes = {
    * To change the active segment font style.
    */
   activeTextStyle: PropTypes.object,
-  py: PropTypes.number,
+  height: PropTypes.number,
 };
 
 SegmentPicker.defaultProps = {
   tabs: [],
   onChange: () => {},
   currentIndex: 0,
-  py: 12,
+  height: 32,
 };

package/src/components/index.js

@@ -32,3 +32,4 @@ export { Carousel } from "./Carousel";
 export { OnBoarding } from "./OnBoarding";
 export { SearchBar } from "./SearchBar";
 export { Accordion } from "./Accordion";
+export { Calendar } from "./Calendar";