@adiraku/react-native-ui 1.2.3-snapshot.8 → 1.2.3-snapshot.9

package/lib/commonjs/components/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "RoundedTab", {
     return _roundedTab.RoundedTab;
   }
 });
+Object.defineProperty(exports, "SearchInput", {
+  enumerable: true,
+  get: function () {
+    return _searchInput.SearchInput;
+  }
+});
 Object.defineProperty(exports, "SliderIndicator", {
   enumerable: true,
   get: function () {
@@ -227,6 +233,7 @@ var _Divider = require("./Divider/Divider.component");
 var _Tabs = require("./Tabs/Tabs.component");
 var _RadioButton = require("./RadioButton/RadioButton.component");
 var _BottomSheet = require("./BottomSheet/BottomSheet.component");
+var _searchInput = require("./search-input/search-input.component");
 var _RadioInput = require("./RadioInput/RadioInput.component");
 var _CheckBoxInput = require("./CheckBoxInput/CheckBoxInput.component");
 var _Checkbox = require("./Checkbox/Checkbox.component");

package/lib/commonjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/lib/commonjs/components/search-input/search-input.component.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchInput = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _themes = require("../../themes");
+var _icons = require("../../icons");
+var _searchInput = require("./search-input.style");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const SearchInput = props => {
+  const {
+    value = '',
+    onFocus = () => null,
+    onBlur = () => null,
+    trailingIcon,
+    onTraillingIconPress,
+    ...rest
+  } = props;
+  const computedStyle = (0, _searchInput.getStyles)();
+  const [focused, setFocused] = React.useState(false);
+  const handleOnFocus = event => {
+    setFocused(true);
+    onFocus(event);
+  };
+  const handleOnBlur = event => {
+    onBlur(event);
+    setFocused(false);
+  };
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [computedStyle.container, {
+      borderColor: focused ? _themes.Palettes.black[900] : _themes.Palettes.grey[300]
+    }]
+  }, /*#__PURE__*/React.createElement(_icons.IconSearch, {
+    width: 24,
+    height: 24
+  }), /*#__PURE__*/React.createElement(_reactNative.TextInput, _extends({
+    style: [computedStyle.textInput],
+    placeholderTextColor: _themes.Palettes.grey[400],
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
+    value: value
+  }, rest)), value.length > 0 && /*#__PURE__*/React.createElement(_reactNative.TouchableWithoutFeedback, {
+    onPress: onTraillingIconPress
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [computedStyle.trailingIconContainer]
+  }, trailingIcon || /*#__PURE__*/React.createElement(_icons.IconRoundClose, {
+    width: 16,
+    height: 16
+  }))));
+};
+exports.SearchInput = SearchInput;
+//# sourceMappingURL=search-input.component.js.map

package/lib/commonjs/components/search-input/search-input.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SearchInput","props","value","onFocus","onBlur","trailingIcon","onTraillingIconPress","rest","computedStyle","getStyles","focused","setFocused","React","useState","handleOnFocus","event","handleOnBlur","container","borderColor","Palettes","black","grey","textInput","length","trailingIconContainer"],"sourceRoot":"../../src","sources":["search-input.component.tsx"],"mappings":";;;;;;AAAA;AACA;AAGA;AACA;AACA;AAAiD;AAAA;AAAA;AAM1C,MAAMA,WAAW,GAAIC,KAAuB,IAAK;EACtD,MAAM;IACJC,KAAK,GAAG,EAAE;IACVC,OAAO,GAAG,MAAM,IAAI;IACpBC,MAAM,GAAG,MAAM,IAAI;IACnBC,YAAY;IACZC,oBAAoB;IACpB,GAAGC;EACL,CAAC,GAAGN,KAAK;EAET,MAAMO,aAAa,GAAG,IAAAC,sBAAS,GAAE;EAEjC,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EAEnD,MAAMC,aAAa,GACjBC,KAAoD,IACjD;IACHJ,UAAU,CAAC,IAAI,CAAC;IAChBR,OAAO,CAACY,KAAK,CAAC;EAChB,CAAC;EACD,MAAMC,YAAY,GAChBD,KAAoD,IACjD;IACHX,MAAM,CAACW,KAAK,CAAC;IACbJ,UAAU,CAAC,KAAK,CAAC;EACnB,CAAC;EACD,oBACE,oBAAC,iBAAI;IACH,KAAK,EAAE,CACLH,aAAa,CAACS,SAAS,EACvB;MAAEC,WAAW,EAAER,OAAO,GAAGS,gBAAQ,CAACC,KAAK,CAAC,GAAG,CAAC,GAAGD,gBAAQ,CAACE,IAAI,CAAC,GAAG;IAAE,CAAC;EACnE,gBAEF,oBAAC,iBAAU;IAAC,KAAK,EAAE,EAAG;IAAC,MAAM,EAAE;EAAG,EAAG,eAErC,oBAAC,sBAAS;IACR,KAAK,EAAE,CAACb,aAAa,CAACc,SAAS,CAAE;IACjC,oBAAoB,EAAEH,gBAAQ,CAACE,IAAI,CAAC,GAAG,CAAE;IACzC,MAAM,EAAEL,YAAa;IACrB,OAAO,EAAEF,aAAc;IACvB,KAAK,EAAEZ;EAAM,GACTK,IAAI,EACR,EAEDL,KAAK,CAACqB,MAAM,GAAG,CAAC,iBACf,oBAAC,qCAAwB;IAAC,OAAO,EAAEjB;EAAqB,gBACtD,oBAAC,iBAAI;IAAC,KAAK,EAAE,CAACE,aAAa,CAACgB,qBAAqB;EAAE,GAChDnB,YAAY,iBAAI,oBAAC,qBAAc;IAAC,KAAK,EAAE,EAAG;IAAC,MAAM,EAAE;EAAG,EAAG,CACrD,CAEV,CACI;AAEX,CAAC;AAAC"}

package/lib/commonjs/components/search-input/search-input.style.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStyles = void 0;
+var _reactNative = require("react-native");
+var _themes = require("../../themes");
+const getStyles = () => {
+  const style = {};
+  style.container = {
+    width: '100%',
+    maxHeight: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: _themes.Radius.full,
+    overflow: 'hidden',
+    borderWidth: 1.5,
+    paddingHorizontal: _themes.Spacing[12]
+  };
+  style.textInput = {
+    marginLeft: _themes.Spacing[8],
+    fontFamily: 'Montserrat-Regular',
+    flex: 1,
+    textAlignVertical: 'center',
+    color: _themes.Palettes.black[900]
+  };
+  style.trailingIconContainer = {
+    padding: _themes.Spacing[4]
+  };
+  return _reactNative.StyleSheet.create(style);
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=search-input.style.js.map

package/lib/commonjs/components/search-input/search-input.style.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getStyles","style","container","width","maxHeight","flexDirection","alignItems","borderRadius","Radius","full","overflow","borderWidth","paddingHorizontal","Spacing","textInput","marginLeft","fontFamily","flex","textAlignVertical","color","Palettes","black","trailingIconContainer","padding","StyleSheet","create"],"sourceRoot":"../../src","sources":["search-input.style.ts"],"mappings":";;;;;;AAAA;AACA;AASO,MAAMA,SAAS,GAAG,MAAM;EAC7B,MAAMC,KAAgB,GAAG,CAAC,CAAC;EAE3BA,KAAK,CAACC,SAAS,GAAG;IAChBC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE,EAAE;IACbC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAEC,cAAM,CAACC,IAAI;IACzBC,QAAQ,EAAE,QAAQ;IAClBC,WAAW,EAAE,GAAG;IAChBC,iBAAiB,EAAEC,eAAO,CAAC,EAAE;EAC/B,CAAC;EAEDZ,KAAK,CAACa,SAAS,GAAG;IAChBC,UAAU,EAAEF,eAAO,CAAC,CAAC,CAAC;IACtBG,UAAU,EAAE,oBAAoB;IAChCC,IAAI,EAAE,CAAC;IACPC,iBAAiB,EAAE,QAAQ;IAC3BC,KAAK,EAAEC,gBAAQ,CAACC,KAAK,CAAC,GAAG;EAC3B,CAAC;EAEDpB,KAAK,CAACqB,qBAAqB,GAAG;IAC5BC,OAAO,EAAEV,eAAO,CAAC,CAAC;EACpB,CAAC;EAED,OAAOW,uBAAU,CAACC,MAAM,CAACxB,KAAK,CAAC;AACjC,CAAC;AAAC"}

package/lib/commonjs/components/search-input/search-input.type.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=search-input.type.js.map

package/lib/commonjs/components/search-input/search-input.type.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["search-input.type.ts"],"mappings":""}

package/lib/module/components/index.js

@@ -12,6 +12,7 @@ export { Divider } from './Divider/Divider.component';
 export { Tabs } from './Tabs/Tabs.component';
 export { RadioButton } from './RadioButton/RadioButton.component';
 export { BottomSheet, BottomSheetHandler } from './BottomSheet/BottomSheet.component';
+export { SearchInput } from './search-input/search-input.component';
 export { RadioInput } from './RadioInput/RadioInput.component';
 export { CheckBoxInput } from './CheckBoxInput/CheckBoxInput.component';
 export { Checkbox } from './Checkbox/Checkbox.component';

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Button","Label","BaseComponent","Typography","Coachmark","TextLink","SliderIndicator","TextInput","TextArea","StepperCounter","Divider","Tabs","RadioButton","BottomSheet","BottomSheetHandler","RadioInput","CheckBoxInput","Checkbox","Appbar","Snackbar","SnackbarComponent","Switch","Dot","InformationBox","RoundedTab","Countdown","Mask","MaskArray","MaskInputProps","MaskItem","Masks","UseMaskedInputProps","createNumberMask","formatWithMask","useMaskedInputProps"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SAASA,MAAM,QAAQ,2BAA2B;AAClD,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,UAAU,QAAQ,mCAAmC;AAC9D,SAASC,SAAS,QAAQ,iCAAiC;AAC3D,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,eAAe,QAAQ,+CAA+C;AAC/E,SAASC,SAAS,QAAQ,iCAAiC;AAC3D,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,cAAc,QAAQ,2CAA2C;AAC1E,SAASC,OAAO,QAAQ,6BAA6B;AACrD,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,WAAW,QAAQ,qCAAqC;AACjE,SACEC,WAAW,EACXC,kBAAkB,QACb,qCAAqC;AAC5C,SAASC,UAAU,QAAQ,mCAAmC;AAC9D,SAASC,aAAa,QAAQ,yCAAyC;AACvE,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,QAAQ,EAAEC,iBAAiB,QAAQ,+BAA+B;AAC3E,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,GAAG,QAAQ,qBAAqB;AACzC,SAASC,cAAc,QAAQ,6CAA6C;AAC5E,SAASC,UAAU,QAAQ,qCAAqC;AAChE,SAASC,SAAS,QAAQ,iCAAiC;AAC3D,SACEC,IAAI,EACJC,SAAS,EACTC,cAAc,EACdC,QAAQ,EACRC,KAAK,EACLC,mBAAmB,EACnBC,gBAAgB,EAChBC,cAAc,EACdC,mBAAmB,QACd,yBAAyB"}
+{"version":3,"names":["Button","Label","BaseComponent","Typography","Coachmark","TextLink","SliderIndicator","TextInput","TextArea","StepperCounter","Divider","Tabs","RadioButton","BottomSheet","BottomSheetHandler","SearchInput","RadioInput","CheckBoxInput","Checkbox","Appbar","Snackbar","SnackbarComponent","Switch","Dot","InformationBox","RoundedTab","Countdown","Mask","MaskArray","MaskInputProps","MaskItem","Masks","UseMaskedInputProps","createNumberMask","formatWithMask","useMaskedInputProps"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SAASA,MAAM,QAAQ,2BAA2B;AAClD,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,UAAU,QAAQ,mCAAmC;AAC9D,SAASC,SAAS,QAAQ,iCAAiC;AAC3D,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,eAAe,QAAQ,+CAA+C;AAC/E,SAASC,SAAS,QAAQ,iCAAiC;AAC3D,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,cAAc,QAAQ,2CAA2C;AAC1E,SAASC,OAAO,QAAQ,6BAA6B;AACrD,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,WAAW,QAAQ,qCAAqC;AACjE,SACEC,WAAW,EACXC,kBAAkB,QACb,qCAAqC;AAC5C,SAASC,WAAW,QAAQ,uCAAuC;AACnE,SAASC,UAAU,QAAQ,mCAAmC;AAC9D,SAASC,aAAa,QAAQ,yCAAyC;AACvE,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,QAAQ,EAAEC,iBAAiB,QAAQ,+BAA+B;AAC3E,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,GAAG,QAAQ,qBAAqB;AACzC,SAASC,cAAc,QAAQ,6CAA6C;AAC5E,SAASC,UAAU,QAAQ,qCAAqC;AAChE,SAASC,SAAS,QAAQ,iCAAiC;AAC3D,SACEC,IAAI,EACJC,SAAS,EACTC,cAAc,EACdC,QAAQ,EACRC,KAAK,EACLC,mBAAmB,EACnBC,gBAAgB,EAChBC,cAAc,EACdC,mBAAmB,QACd,yBAAyB"}

package/lib/module/components/search-input/search-input.component.js

@@ -0,0 +1,50 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import { TextInput } from 'react-native';
+import { View } from 'react-native';
+import { Palettes } from '../../themes';
+import { IconRoundClose, IconSearch } from '../../icons';
+import { getStyles } from './search-input.style';
+import { TouchableWithoutFeedback } from 'react-native';
+export const SearchInput = props => {
+  const {
+    value = '',
+    onFocus = () => null,
+    onBlur = () => null,
+    trailingIcon,
+    onTraillingIconPress,
+    ...rest
+  } = props;
+  const computedStyle = getStyles();
+  const [focused, setFocused] = React.useState(false);
+  const handleOnFocus = event => {
+    setFocused(true);
+    onFocus(event);
+  };
+  const handleOnBlur = event => {
+    onBlur(event);
+    setFocused(false);
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [computedStyle.container, {
+      borderColor: focused ? Palettes.black[900] : Palettes.grey[300]
+    }]
+  }, /*#__PURE__*/React.createElement(IconSearch, {
+    width: 24,
+    height: 24
+  }), /*#__PURE__*/React.createElement(TextInput, _extends({
+    style: [computedStyle.textInput],
+    placeholderTextColor: Palettes.grey[400],
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
+    value: value
+  }, rest)), value.length > 0 && /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    onPress: onTraillingIconPress
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [computedStyle.trailingIconContainer]
+  }, trailingIcon || /*#__PURE__*/React.createElement(IconRoundClose, {
+    width: 16,
+    height: 16
+  }))));
+};
+//# sourceMappingURL=search-input.component.js.map

package/lib/module/components/search-input/search-input.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","TextInput","View","Palettes","IconRoundClose","IconSearch","getStyles","TouchableWithoutFeedback","SearchInput","props","value","onFocus","onBlur","trailingIcon","onTraillingIconPress","rest","computedStyle","focused","setFocused","useState","handleOnFocus","event","handleOnBlur","container","borderColor","black","grey","textInput","length","trailingIconContainer"],"sourceRoot":"../../src","sources":["search-input.component.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAASC,cAAc,EAAEC,UAAU,QAAQ,aAAa;AACxD,SAASC,SAAS,QAAQ,sBAAsB;AAIhD,SAASC,wBAAwB,QAAQ,cAAc;AAEvD,OAAO,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EACtD,MAAM;IACJC,KAAK,GAAG,EAAE;IACVC,OAAO,GAAG,MAAM,IAAI;IACpBC,MAAM,GAAG,MAAM,IAAI;IACnBC,YAAY;IACZC,oBAAoB;IACpB,GAAGC;EACL,CAAC,GAAGN,KAAK;EAET,MAAMO,aAAa,GAAGV,SAAS,EAAE;EAEjC,MAAM,CAACW,OAAO,EAAEC,UAAU,CAAC,GAAGlB,KAAK,CAACmB,QAAQ,CAAC,KAAK,CAAC;EAEnD,MAAMC,aAAa,GACjBC,KAAoD,IACjD;IACHH,UAAU,CAAC,IAAI,CAAC;IAChBP,OAAO,CAACU,KAAK,CAAC;EAChB,CAAC;EACD,MAAMC,YAAY,GAChBD,KAAoD,IACjD;IACHT,MAAM,CAACS,KAAK,CAAC;IACbH,UAAU,CAAC,KAAK,CAAC;EACnB,CAAC;EACD,oBACE,oBAAC,IAAI;IACH,KAAK,EAAE,CACLF,aAAa,CAACO,SAAS,EACvB;MAAEC,WAAW,EAAEP,OAAO,GAAGd,QAAQ,CAACsB,KAAK,CAAC,GAAG,CAAC,GAAGtB,QAAQ,CAACuB,IAAI,CAAC,GAAG;IAAE,CAAC;EACnE,gBAEF,oBAAC,UAAU;IAAC,KAAK,EAAE,EAAG;IAAC,MAAM,EAAE;EAAG,EAAG,eAErC,oBAAC,SAAS;IACR,KAAK,EAAE,CAACV,aAAa,CAACW,SAAS,CAAE;IACjC,oBAAoB,EAAExB,QAAQ,CAACuB,IAAI,CAAC,GAAG,CAAE;IACzC,MAAM,EAAEJ,YAAa;IACrB,OAAO,EAAEF,aAAc;IACvB,KAAK,EAAEV;EAAM,GACTK,IAAI,EACR,EAEDL,KAAK,CAACkB,MAAM,GAAG,CAAC,iBACf,oBAAC,wBAAwB;IAAC,OAAO,EAAEd;EAAqB,gBACtD,oBAAC,IAAI;IAAC,KAAK,EAAE,CAACE,aAAa,CAACa,qBAAqB;EAAE,GAChDhB,YAAY,iBAAI,oBAAC,cAAc;IAAC,KAAK,EAAE,EAAG;IAAC,MAAM,EAAE;EAAG,EAAG,CACrD,CAEV,CACI;AAEX,CAAC"}

package/lib/module/components/search-input/search-input.style.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius, Spacing } from '../../themes';
+export const getStyles = () => {
+  const style = {};
+  style.container = {
+    width: '100%',
+    maxHeight: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: Radius.full,
+    overflow: 'hidden',
+    borderWidth: 1.5,
+    paddingHorizontal: Spacing[12]
+  };
+  style.textInput = {
+    marginLeft: Spacing[8],
+    fontFamily: 'Montserrat-Regular',
+    flex: 1,
+    textAlignVertical: 'center',
+    color: Palettes.black[900]
+  };
+  style.trailingIconContainer = {
+    padding: Spacing[4]
+  };
+  return StyleSheet.create(style);
+};
+//# sourceMappingURL=search-input.style.js.map

package/lib/module/components/search-input/search-input.style.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","Palettes","Radius","Spacing","getStyles","style","container","width","maxHeight","flexDirection","alignItems","borderRadius","full","overflow","borderWidth","paddingHorizontal","textInput","marginLeft","fontFamily","flex","textAlignVertical","color","black","trailingIconContainer","padding","create"],"sourceRoot":"../../src","sources":["search-input.style.ts"],"mappings":"AAAA,SAASA,UAAU,QAAmB,cAAc;AACpD,SAASC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,QAAQ,cAAc;AASxD,OAAO,MAAMC,SAAS,GAAG,MAAM;EAC7B,MAAMC,KAAgB,GAAG,CAAC,CAAC;EAE3BA,KAAK,CAACC,SAAS,GAAG;IAChBC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE,EAAE;IACbC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAET,MAAM,CAACU,IAAI;IACzBC,QAAQ,EAAE,QAAQ;IAClBC,WAAW,EAAE,GAAG;IAChBC,iBAAiB,EAAEZ,OAAO,CAAC,EAAE;EAC/B,CAAC;EAEDE,KAAK,CAACW,SAAS,GAAG;IAChBC,UAAU,EAAEd,OAAO,CAAC,CAAC,CAAC;IACtBe,UAAU,EAAE,oBAAoB;IAChCC,IAAI,EAAE,CAAC;IACPC,iBAAiB,EAAE,QAAQ;IAC3BC,KAAK,EAAEpB,QAAQ,CAACqB,KAAK,CAAC,GAAG;EAC3B,CAAC;EAEDjB,KAAK,CAACkB,qBAAqB,GAAG;IAC5BC,OAAO,EAAErB,OAAO,CAAC,CAAC;EACpB,CAAC;EAED,OAAOH,UAAU,CAACyB,MAAM,CAACpB,KAAK,CAAC;AACjC,CAAC"}

package/lib/module/components/search-input/search-input.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=search-input.type.js.map

package/lib/module/components/search-input/search-input.type.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["search-input.type.ts"],"mappings":""}

package/lib/typescript/components/index.d.ts

@@ -12,6 +12,7 @@ export { Divider } from './Divider/Divider.component';
 export { Tabs } from './Tabs/Tabs.component';
 export { RadioButton } from './RadioButton/RadioButton.component';
 export { BottomSheet, BottomSheetHandler, } from './BottomSheet/BottomSheet.component';
+export { SearchInput } from './search-input/search-input.component';
 export { RadioInput } from './RadioInput/RadioInput.component';
 export { CheckBoxInput } from './CheckBoxInput/CheckBoxInput.component';
 export { Checkbox } from './Checkbox/Checkbox.component';
@@ -33,4 +34,5 @@ export type { TextAreaProps } from './TextArea/TextArea.type';
 export type { StepperCounterProps } from './StepperCounter/StepperCounter.type';
 export type { DividerProps } from './Divider/Divider.type';
 export type { TabsProps } from './Tabs/Tabs.type';
+export type { SearchInputProps } from './search-input/search-input.type';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EACL,WAAW,EACX,kBAAkB,GACnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EACL,IAAI,EACJ,SAAS,EACT,cAAc,EACd,QAAQ,EACR,KAAK,EACL,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AACrF,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAChF,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EACL,WAAW,EACX,kBAAkB,GACnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EACL,IAAI,EACJ,SAAS,EACT,cAAc,EACd,QAAQ,EACR,KAAK,EACL,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AACrF,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAChF,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC"}

package/lib/typescript/components/search-input/search-input.component.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SearchInputProps } from './search-input.type';
+export declare const SearchInput: (props: SearchInputProps) => JSX.Element;
+//# sourceMappingURL=search-input.component.d.ts.map

package/lib/typescript/components/search-input/search-input.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.component.d.ts","sourceRoot":"","sources":["../../../../src/components/search-input/search-input.component.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAKvD,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAqDlD,CAAC"}

package/lib/typescript/components/search-input/search-input.style.d.ts

@@ -0,0 +1,10 @@
+import { ViewStyle } from 'react-native';
+import { TextStyle } from 'react-native';
+declare type StyleType = {
+    container?: ViewStyle;
+    textInput?: TextStyle;
+    trailingIconContainer?: ViewStyle;
+};
+export declare const getStyles: () => StyleType;
+export {};
+//# sourceMappingURL=search-input.style.d.ts.map

package/lib/typescript/components/search-input/search-input.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.style.d.ts","sourceRoot":"","sources":["../../../../src/components/search-input/search-input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,aAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,SAAS,iBA2BrB,CAAC"}

package/lib/typescript/components/search-input/search-input.type.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { TextInputProps } from 'react-native';
+export interface SearchInputProps extends TextInputProps {
+    trailingIcon?: ReactNode;
+    onTraillingIconPress: () => void;
+}
+//# sourceMappingURL=search-input.type.d.ts.map

package/lib/typescript/components/search-input/search-input.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.type.d.ts","sourceRoot":"","sources":["../../../../src/components/search-input/search-input.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adiraku/react-native-ui",
-  "version": "1.2.3-snapshot.8",
+  "version": "1.2.3-snapshot.9",
   "description": "UI library for Adiraku apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/index.ts

@@ -15,6 +15,7 @@ export {
   BottomSheet,
   BottomSheetHandler,
 } from './BottomSheet/BottomSheet.component';
+export { SearchInput } from './search-input/search-input.component';
 export { RadioInput } from './RadioInput/RadioInput.component';
 export { CheckBoxInput } from './CheckBoxInput/CheckBoxInput.component';
 export { Checkbox } from './Checkbox/Checkbox.component';
@@ -47,3 +48,4 @@ export type { TextAreaProps } from './TextArea/TextArea.type';
 export type { StepperCounterProps } from './StepperCounter/StepperCounter.type';
 export type { DividerProps } from './Divider/Divider.type';
 export type { TabsProps } from './Tabs/Tabs.type';
+export type { SearchInputProps } from './search-input/search-input.type';

package/src/components/search-input/search-input.component.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { TextInput } from 'react-native';
+import { View } from 'react-native';
+
+import { Palettes } from '../../themes';
+import { IconRoundClose, IconSearch } from '../../icons';
+import { getStyles } from './search-input.style';
+import { SearchInputProps } from './search-input.type';
+import { NativeSyntheticEvent } from 'react-native';
+import { TextInputFocusEventData } from 'react-native';
+import { TouchableWithoutFeedback } from 'react-native';
+
+export const SearchInput = (props: SearchInputProps) => {
+  const {
+    value = '',
+    onFocus = () => null,
+    onBlur = () => null,
+    trailingIcon,
+    onTraillingIconPress,
+    ...rest
+  } = props;
+
+  const computedStyle = getStyles();
+
+  const [focused, setFocused] = React.useState(false);
+
+  const handleOnFocus = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    setFocused(true);
+    onFocus(event);
+  };
+  const handleOnBlur = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    onBlur(event);
+    setFocused(false);
+  };
+  return (
+    <View
+      style={[
+        computedStyle.container,
+        { borderColor: focused ? Palettes.black[900] : Palettes.grey[300] },
+      ]}
+    >
+      <IconSearch width={24} height={24} />
+
+      <TextInput
+        style={[computedStyle.textInput]}
+        placeholderTextColor={Palettes.grey[400]}
+        onBlur={handleOnBlur}
+        onFocus={handleOnFocus}
+        value={value}
+        {...rest}
+      />
+
+      {value.length > 0 && (
+        <TouchableWithoutFeedback onPress={onTraillingIconPress}>
+          <View style={[computedStyle.trailingIconContainer]}>
+            {trailingIcon || <IconRoundClose width={16} height={16} />}
+          </View>
+        </TouchableWithoutFeedback>
+      )}
+    </View>
+  );
+};

package/src/components/search-input/search-input.style.ts

@@ -0,0 +1,38 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { Palettes, Radius, Spacing } from '../../themes';
+import { TextStyle } from 'react-native';
+
+type StyleType = {
+  container?: ViewStyle;
+  textInput?: TextStyle;
+  trailingIconContainer?: ViewStyle;
+};
+
+export const getStyles = () => {
+  const style: StyleType = {};
+
+  style.container = {
+    width: '100%',
+    maxHeight: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: Radius.full,
+    overflow: 'hidden',
+    borderWidth: 1.5,
+    paddingHorizontal: Spacing[12],
+  };
+
+  style.textInput = {
+    marginLeft: Spacing[8],
+    fontFamily: 'Montserrat-Regular',
+    flex: 1,
+    textAlignVertical: 'center',
+    color: Palettes.black[900],
+  };
+
+  style.trailingIconContainer = {
+    padding: Spacing[4],
+  };
+
+  return StyleSheet.create(style);
+};

package/src/components/search-input/search-input.type.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { TextInputProps } from 'react-native';
+
+export interface SearchInputProps extends TextInputProps {
+  trailingIcon?: ReactNode;
+  onTraillingIconPress: () => void;
+}