etendo-ui-library 1.2.41 → 1.2.43

package/dist-native/components/tab/Tab.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TabProps } from './Tab.types';
-declare const Tab: ({ data, currentIndex, onPressTab }: TabProps) => React.JSX.Element;
+declare const Tab: ({ data, currentIndex, onPressTab, typeStyle }: TabProps) => React.JSX.Element;
 export default Tab;

package/dist-native/components/tab/Tab.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _colors=require("../../styles/colors");var _Tab=require("./Tab.styles");var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/tab/Tab.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var Tab=function Tab(_ref){var data=_ref.data,currentIndex=_ref.currentIndex,onPressTab=_ref.onPressTab;var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),hoveredTab=_useState2[0],setHoveredTab=_useState2[1];var _useState3=(0,_react.useState)(0),_useState4=(0,_slicedToArray2.default)(_useState3,2),currentIndexSelected=_useState4[0],setCurrentIndexSelected=_useState4[1];(0,_react.useEffect)(function(){setCurrentIndexSelected(currentIndex);},[currentIndex]);var handleHoverIn=function handleHoverIn(index){setHoveredTab(index);};var handleHoverOut=function handleHoverOut(){setHoveredTab(null);};var handleOnPress=function handleOnPress(item,index){if(onPressTab){onPressTab(item.route,index);}setCurrentIndexSelected(index);};return _react.default.createElement(_reactNative.View,{style:_Tab.styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:5}},data==null?void 0:data.map(function(item,index){return _react.default.createElement(_reactNative.Pressable,{key:index,style:[_Tab.styles.tab,{backgroundColor:index===currentIndexSelected?_colors.PRIMARY_100:index===hoveredTab?_colors.TERTIARY_30:_colors.TERTIARY_50,borderTopColor:index===currentIndexSelected?_colors.SECONDARY_100:'transparent'}],onPress:function onPress(){return handleOnPress(item,index);},onHoverIn:function onHoverIn(){return handleHoverIn(index);},onHoverOut:handleHoverOut,__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:9}},_react.default.createElement(_reactNative.Text,{ellipsizeMode:"tail",numberOfLines:1,style:{color:index===currentIndexSelected?_colors.NEUTRAL_0:_colors.PRIMARY_100},__self:_this,__source:{fileName:_jsxFileName,lineNumber:59,columnNumber:11}},item.name));}));};var _default=exports.default=Tab;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _colors=require("../../styles/colors");var _Tab=require("./Tab.styles");var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/tab/Tab.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var Tab=function Tab(_ref){var data=_ref.data,currentIndex=_ref.currentIndex,onPressTab=_ref.onPressTab,typeStyle=_ref.typeStyle;var _useState=(0,_react.useState)(),_useState2=(0,_slicedToArray2.default)(_useState,2),hoveredTab=_useState2[0],setHoveredTab=_useState2[1];var _useState3=(0,_react.useState)(0),_useState4=(0,_slicedToArray2.default)(_useState3,2),currentIndexSelected=_useState4[0],setCurrentIndexSelected=_useState4[1];(0,_react.useEffect)(function(){setCurrentIndexSelected(currentIndex);},[currentIndex]);var handleHoverIn=function handleHoverIn(index){setHoveredTab(index);};var handleHoverOut=function handleHoverOut(){setHoveredTab(null);};var handleOnPress=function handleOnPress(item,index){if(onPressTab){onPressTab(item.route,index);}setCurrentIndexSelected(index);};var hoveredStyle=function hoveredStyle(index){var HoveredColor;if(index===hoveredTab){HoveredColor=_colors.TERTIARY_80;return HoveredColor;}else{HoveredColor=_colors.TERTIARY_50;return HoveredColor;}};var getPrimaryBorderColor=function getPrimaryBorderColor(index){if(index===currentIndexSelected){return _colors.PRIMARY_100;}else if(index===hoveredTab){return _colors.NEUTRAL_700;}else{return _colors.NEUTRAL_500;}};var getSecondaryBackgroundColor=function getSecondaryBackgroundColor(index){if(index===currentIndexSelected){return _colors.SECONDARY_100;}else if(index===hoveredTab){return _colors.TERTIARY_50;}else{return _colors.NEUTRAL_200;}};var getTabTextStyle=function getTabTextStyle(index){if(index===currentIndexSelected){return _Tab.TabStyleVariants[typeStyle].text;}else if(index===hoveredTab){return _Tab.TabStyleVariants[typeStyle].hoveredColor;}else{return _Tab.TabStyleVariants[typeStyle].textDisabled;}};var getTabStyle=function getTabStyle(index){switch(typeStyle){case'primary':return{borderBottomColor:getPrimaryBorderColor(index),borderBottomWidth:index===currentIndexSelected?2:1};case'secondary':return{backgroundColor:getSecondaryBackgroundColor(index)};case'terciary':return{backgroundColor:index===currentIndexSelected?_colors.PRIMARY_100:hoveredStyle(index),borderTopColor:index===currentIndexSelected?_colors.SECONDARY_100:'transparent'};}};var _useState5=(0,_react.useState)(false),_useState6=(0,_slicedToArray2.default)(_useState5,2),hasScroll=_useState6[0],setHasScroll=_useState6[1];var _useState7=(0,_react.useState)(0),_useState8=(0,_slicedToArray2.default)(_useState7,2),containerWidth=_useState8[0],setContainerWidth=_useState8[1];var _useState9=(0,_react.useState)(0),_useState10=(0,_slicedToArray2.default)(_useState9,2),mapContainer=_useState10[0],setMapContainer=_useState10[1];var handleContainerLayout=function handleContainerLayout(event){var width=event.nativeEvent.layout.width;setContainerWidth(width);};var handleMapContainerLayout=function handleMapContainerLayout(event){var width=event.nativeEvent.layout.width;setMapContainer(width);};(0,_react.useEffect)(function(){if(mapContainer>containerWidth){setHasScroll(true);}else{setHasScroll(false);}},[containerWidth]);return _react.default.createElement(_reactNative.ScrollView,{onLayout:handleContainerLayout,horizontal:true,contentContainerStyle:[_Tab.TabStyleVariants[typeStyle].container,!hasScroll&&{flex:1}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:124,columnNumber:5}},_react.default.createElement(_reactNative.View,{onLayout:handleMapContainerLayout,style:Object.assign({},_Tab.mapContainerViewStyle),__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:7}},data==null?void 0:data.map(function(item,index){return _react.default.createElement(_reactNative.Pressable,{key:item.route,style:function style(_ref2){var pressed=_ref2.pressed;return[_Tab.TabStyleVariants[typeStyle].tab,getTabStyle(index)];},onPress:function onPress(){return handleOnPress(item,index);},onHoverIn:function onHoverIn(){return handleHoverIn(index);},onHoverOut:handleHoverOut,__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:11}},_react.default.createElement(_reactNative.Text,{style:getTabTextStyle(index),__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:13}},item.name));})));};var _default=exports.default=Tab;

package/dist-native/components/tab/Tab.styles.d.ts

@@ -1,17 +1,4 @@
-export declare const styles: {
-    container: {
-        flexDirection: "row";
-        alignItems: "center";
-        height: number;
-    };
-    tab: {
-        justifyContent: "center";
-        alignItems: "center";
-        borderBottomWidth: number;
-        borderBottomColor: string;
-        borderTopWidth: number;
-        flex: number;
-        height: number;
-        paddingHorizontal: number;
-    };
-};
+import { tabStyleVariant } from './Tab.types';
+import { ViewStyle } from 'react-native';
+export declare const mapContainerViewStyle: ViewStyle;
+export declare const TabStyleVariants: tabStyleVariant;

package/dist-native/components/tab/Tab.styles.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({container:{flexDirection:'row',alignItems:'center',height:40},tab:{justifyContent:'center',alignItems:'center',borderBottomWidth:3,borderBottomColor:_colors.PRIMARY_100,borderTopWidth:4,flex:1,height:40,paddingHorizontal:10}});
+Object.defineProperty(exports,"__esModule",{value:true});exports.mapContainerViewStyle=exports.TabStyleVariants=void 0;var _colors=require("../../styles/colors");var commonTabStyles={alignItems:'center',justifyContent:'center'};var mapContainerViewStyle=exports.mapContainerViewStyle={display:'flex',flexDirection:'row',justifyContent:'center'};var TabStyleVariants=exports.TabStyleVariants={primary:{container:Object.assign({},commonTabStyles),tab:{justifyContent:'center',alignItems:'center',borderBottomWidth:3,height:40,paddingHorizontal:8},text:{color:_colors.PRIMARY_100,fontWeight:'600'},textDisabled:{color:_colors.NEUTRAL_500,fontWeight:'bold'},hoveredColor:{color:_colors.NEUTRAL_700,fontWeight:'bold'}},secondary:{container:Object.assign({},commonTabStyles,{backgroundColor:_colors.NEUTRAL_50,paddingHorizontal:16,paddingVertical:12}),tab:{justifyContent:'center',alignItems:'center',height:40,borderRadius:6,marginHorizontal:8,paddingHorizontal:8},text:{color:_colors.PRIMARY_100,fontWeight:'600'},textDisabled:{color:_colors.NEUTRAL_600,fontWeight:'bold'},hoveredColor:{color:_colors.PRIMARY_100,fontWeight:'bold'}},terciary:{container:Object.assign({},commonTabStyles),tab:{justifyContent:'center',alignItems:'center',borderBottomWidth:3,borderBottomColor:_colors.PRIMARY_100,borderTopWidth:4,height:40,paddingHorizontal:10},text:{color:_colors.NEUTRAL_0},textDisabled:{color:_colors.PRIMARY_100},hoveredColor:{}}};

package/dist-native/components/tab/Tab.types.d.ts

@@ -1,9 +1,19 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type TabItemType = {
     name: string;
     route: string;
 };
+export type TabStyleType = 'primary' | 'secondary' | 'terciary';
+export type tabStyleVariant = Record<TabStyleType, {
+    container: ViewStyle;
+    tab: ViewStyle;
+    text: StyleProp<TextStyle>;
+    textDisabled: TextStyle;
+    hoveredColor: StyleProp<TextStyle>;
+}>;
 export interface TabProps {
     data?: TabItemType[];
     currentIndex: number;
     onPressTab?: (route: string, index: number) => void;
+    typeStyle: TabStyleType;
 }

package/dist-native/styles/colors.d.ts

@@ -14,6 +14,7 @@ export declare const SECONDARY_300 = "#FDEC71";
 export declare const TERTIARY_10 = "#F2F5F9";
 export declare const TERTIARY_30 = "#EFF1F7";
 export declare const TERTIARY_50 = "#EDF1FF";
+export declare const TERTIARY_80 = "#E0E7FF";
 export declare const TERTIARY_100 = "#808695";
 export declare const TERTIARY_800 = "#151C7A";
 export declare const QUATERNARY_10 = "#F5F5FC";
@@ -29,8 +30,9 @@ export declare const NEUTRAL_100 = "#000000";
 export declare const NEUTRAL_200 = "#EEEEEE";
 export declare const NEUTRAL_300 = "#E0E0E0";
 export declare const NEUTRAL_400 = "#BDBDBD";
-export declare const NEUTRAL_500 = "#E0E0E0";
+export declare const NEUTRAL_500 = "#9E9E9E";
 export declare const NEUTRAL_600 = "#757575";
+export declare const NEUTRAL_700 = "#616161";
 export declare const INITIAL_10 = "#ECF5FF";
 export declare const INITIAL_100 = "#3E97FF";
 export declare const PROCESS_10 = "#FFF6EC";

package/dist-native/styles/colors.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.TERTIARY_800=exports.TERTIARY_50=exports.TERTIARY_30=exports.TERTIARY_100=exports.TERTIARY_10=exports.SUCCESS_100=exports.SUCCESS_10=exports.SECONDARY_50=exports.SECONDARY_300=exports.SECONDARY_30=exports.SECONDARY_100=exports.QUATERNARY_50=exports.QUATERNARY_100=exports.QUATERNARY_10=exports.PROCESS_100=exports.PROCESS_10=exports.PRIMARY_800=exports.PRIMARY_80=exports.PRIMARY_700=exports.PRIMARY_60=exports.PRIMARY_50=exports.PRIMARY_400=exports.PRIMARY_40=exports.PRIMARY_30=exports.PRIMARY_100=exports.OVERLAY=exports.NEUTRAL_600=exports.NEUTRAL_60=exports.NEUTRAL_500=exports.NEUTRAL_50=exports.NEUTRAL_5=exports.NEUTRAL_400=exports.NEUTRAL_40=exports.NEUTRAL_300=exports.NEUTRAL_200=exports.NEUTRAL_100=exports.NEUTRAL_10=exports.NEUTRAL_0=exports.INITIAL_100=exports.INITIAL_10=exports.DESTRUCTIVE_100=exports.DESTRUCTIVE_10=exports.DEFAULT_COLOR_THEME=void 0;var PRIMARY_30=exports.PRIMARY_30='#8689AA';var PRIMARY_40=exports.PRIMARY_40='#606380';var PRIMARY_50=exports.PRIMARY_50='#575A72';var PRIMARY_60=exports.PRIMARY_60='#4B539D';var PRIMARY_80=exports.PRIMARY_80='#303775';var PRIMARY_100=exports.PRIMARY_100='#202452';var PRIMARY_400=exports.PRIMARY_400='#525897';var PRIMARY_700=exports.PRIMARY_700='#10123B';var PRIMARY_800=exports.PRIMARY_800='#242D93';var SECONDARY_30=exports.SECONDARY_30='#FEF7D0';var SECONDARY_50=exports.SECONDARY_50='#FFEB7A';var SECONDARY_100=exports.SECONDARY_100='#FAD614';var SECONDARY_300=exports.SECONDARY_300='#FDEC71';var TERTIARY_10=exports.TERTIARY_10='#F2F5F9';var TERTIARY_30=exports.TERTIARY_30='#EFF1F7';var TERTIARY_50=exports.TERTIARY_50='#EDF1FF';var TERTIARY_100=exports.TERTIARY_100='#808695';var TERTIARY_800=exports.TERTIARY_800='#151C7A';var QUATERNARY_10=exports.QUATERNARY_10='#F5F5FC';var QUATERNARY_50=exports.QUATERNARY_50='#DDDFF6';var QUATERNARY_100=exports.QUATERNARY_100='#7182FF';var NEUTRAL_0=exports.NEUTRAL_0='#FFFFFF';var NEUTRAL_5=exports.NEUTRAL_5='#F2F2F2';var NEUTRAL_10=exports.NEUTRAL_10='#E5E5E5';var NEUTRAL_40=exports.NEUTRAL_40='#999999';var NEUTRAL_50=exports.NEUTRAL_50='#FAFAFA';var NEUTRAL_60=exports.NEUTRAL_60='#808080';var NEUTRAL_100=exports.NEUTRAL_100='#000000';var NEUTRAL_200=exports.NEUTRAL_200='#EEEEEE';var NEUTRAL_300=exports.NEUTRAL_300='#E0E0E0';var NEUTRAL_400=exports.NEUTRAL_400='#BDBDBD';var NEUTRAL_500=exports.NEUTRAL_500='#E0E0E0';var NEUTRAL_600=exports.NEUTRAL_600='#757575';var INITIAL_10=exports.INITIAL_10='#ECF5FF';var INITIAL_100=exports.INITIAL_100='#3E97FF';var PROCESS_10=exports.PROCESS_10='#FFF6EC';var PROCESS_100=exports.PROCESS_100='#FBA643';var SUCCESS_10=exports.SUCCESS_10='#E5F7ED';var SUCCESS_100=exports.SUCCESS_100='#00B34C';var DESTRUCTIVE_10=exports.DESTRUCTIVE_10='#FEF0EF';var DESTRUCTIVE_100=exports.DESTRUCTIVE_100='#F36A62';var OVERLAY=exports.OVERLAY='rgba(0,0,0,0.25)';var DEFAULT_COLOR_THEME=exports.DEFAULT_COLOR_THEME=PRIMARY_100;
+Object.defineProperty(exports,"__esModule",{value:true});exports.TERTIARY_800=exports.TERTIARY_80=exports.TERTIARY_50=exports.TERTIARY_30=exports.TERTIARY_100=exports.TERTIARY_10=exports.SUCCESS_100=exports.SUCCESS_10=exports.SECONDARY_50=exports.SECONDARY_300=exports.SECONDARY_30=exports.SECONDARY_100=exports.QUATERNARY_50=exports.QUATERNARY_100=exports.QUATERNARY_10=exports.PROCESS_100=exports.PROCESS_10=exports.PRIMARY_800=exports.PRIMARY_80=exports.PRIMARY_700=exports.PRIMARY_60=exports.PRIMARY_50=exports.PRIMARY_400=exports.PRIMARY_40=exports.PRIMARY_30=exports.PRIMARY_100=exports.OVERLAY=exports.NEUTRAL_700=exports.NEUTRAL_600=exports.NEUTRAL_60=exports.NEUTRAL_500=exports.NEUTRAL_50=exports.NEUTRAL_5=exports.NEUTRAL_400=exports.NEUTRAL_40=exports.NEUTRAL_300=exports.NEUTRAL_200=exports.NEUTRAL_100=exports.NEUTRAL_10=exports.NEUTRAL_0=exports.INITIAL_100=exports.INITIAL_10=exports.DESTRUCTIVE_100=exports.DESTRUCTIVE_10=exports.DEFAULT_COLOR_THEME=void 0;var PRIMARY_30=exports.PRIMARY_30='#8689AA';var PRIMARY_40=exports.PRIMARY_40='#606380';var PRIMARY_50=exports.PRIMARY_50='#575A72';var PRIMARY_60=exports.PRIMARY_60='#4B539D';var PRIMARY_80=exports.PRIMARY_80='#303775';var PRIMARY_100=exports.PRIMARY_100='#202452';var PRIMARY_400=exports.PRIMARY_400='#525897';var PRIMARY_700=exports.PRIMARY_700='#10123B';var PRIMARY_800=exports.PRIMARY_800='#242D93';var SECONDARY_30=exports.SECONDARY_30='#FEF7D0';var SECONDARY_50=exports.SECONDARY_50='#FFEB7A';var SECONDARY_100=exports.SECONDARY_100='#FAD614';var SECONDARY_300=exports.SECONDARY_300='#FDEC71';var TERTIARY_10=exports.TERTIARY_10='#F2F5F9';var TERTIARY_30=exports.TERTIARY_30='#EFF1F7';var TERTIARY_50=exports.TERTIARY_50='#EDF1FF';var TERTIARY_80=exports.TERTIARY_80='#E0E7FF';var TERTIARY_100=exports.TERTIARY_100='#808695';var TERTIARY_800=exports.TERTIARY_800='#151C7A';var QUATERNARY_10=exports.QUATERNARY_10='#F5F5FC';var QUATERNARY_50=exports.QUATERNARY_50='#DDDFF6';var QUATERNARY_100=exports.QUATERNARY_100='#7182FF';var NEUTRAL_0=exports.NEUTRAL_0='#FFFFFF';var NEUTRAL_5=exports.NEUTRAL_5='#F2F2F2';var NEUTRAL_10=exports.NEUTRAL_10='#E5E5E5';var NEUTRAL_40=exports.NEUTRAL_40='#999999';var NEUTRAL_50=exports.NEUTRAL_50='#FAFAFA';var NEUTRAL_60=exports.NEUTRAL_60='#808080';var NEUTRAL_100=exports.NEUTRAL_100='#000000';var NEUTRAL_200=exports.NEUTRAL_200='#EEEEEE';var NEUTRAL_300=exports.NEUTRAL_300='#E0E0E0';var NEUTRAL_400=exports.NEUTRAL_400='#BDBDBD';var NEUTRAL_500=exports.NEUTRAL_500='#9E9E9E';var NEUTRAL_600=exports.NEUTRAL_600='#757575';var NEUTRAL_700=exports.NEUTRAL_700='#616161';var INITIAL_10=exports.INITIAL_10='#ECF5FF';var INITIAL_100=exports.INITIAL_100='#3E97FF';var PROCESS_10=exports.PROCESS_10='#FFF6EC';var PROCESS_100=exports.PROCESS_100='#FBA643';var SUCCESS_10=exports.SUCCESS_10='#E5F7ED';var SUCCESS_100=exports.SUCCESS_100='#00B34C';var DESTRUCTIVE_10=exports.DESTRUCTIVE_10='#FEF0EF';var DESTRUCTIVE_100=exports.DESTRUCTIVE_100='#F36A62';var OVERLAY=exports.OVERLAY='rgba(0,0,0,0.25)';var DEFAULT_COLOR_THEME=exports.DEFAULT_COLOR_THEME=PRIMARY_100;

package/dist-web/components/tab/Tab.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TabProps } from './Tab.types';
-declare const Tab: ({ data, currentIndex, onPressTab }: TabProps) => React.JSX.Element;
+declare const Tab: ({ data, currentIndex, onPressTab, typeStyle }: TabProps) => React.JSX.Element;
 export default Tab;

package/dist-web/components/tab/Tab.js

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -6,14 +12,15 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // Imports
 import React, { useEffect, useState } from 'react';
-import { View, Text, Pressable } from "react-native-web";
-import { NEUTRAL_0, PRIMARY_100, SECONDARY_100, TERTIARY_30, TERTIARY_50 } from "../../styles/colors";
-import { styles } from "./Tab.styles";
+import { View, Text, Pressable, ScrollView } from "react-native-web";
+import { NEUTRAL_200, NEUTRAL_500, NEUTRAL_700, PRIMARY_100, SECONDARY_100, TERTIARY_50, TERTIARY_80 } from "../../styles/colors";
+import { TabStyleVariants, mapContainerViewStyle } from "./Tab.styles";
 var Tab = function Tab(_ref) {
   var data = _ref.data,
     currentIndex = _ref.currentIndex,
-    onPressTab = _ref.onPressTab;
-  var _useState = useState(null),
+    onPressTab = _ref.onPressTab,
+    typeStyle = _ref.typeStyle;
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     hoveredTab = _useState2[0],
     setHoveredTab = _useState2[1];
@@ -36,15 +43,104 @@ var Tab = function Tab(_ref) {
     }
     setCurrentIndexSelected(index);
   };
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.container
+  var hoveredStyle = function hoveredStyle(index) {
+    var HoveredColor;
+    if (index === hoveredTab) {
+      HoveredColor = TERTIARY_80;
+      return HoveredColor;
+    } else {
+      HoveredColor = TERTIARY_50;
+      return HoveredColor;
+    }
+  };
+  var getPrimaryBorderColor = function getPrimaryBorderColor(index) {
+    if (index === currentIndexSelected) {
+      return PRIMARY_100;
+    } else if (index === hoveredTab) {
+      return NEUTRAL_700;
+    } else {
+      return NEUTRAL_500;
+    }
+  };
+  var getSecondaryBackgroundColor = function getSecondaryBackgroundColor(index) {
+    if (index === currentIndexSelected) {
+      return SECONDARY_100;
+    } else if (index === hoveredTab) {
+      return TERTIARY_50;
+    } else {
+      return NEUTRAL_200;
+    }
+  };
+  var getTabTextStyle = function getTabTextStyle(index) {
+    if (index === currentIndexSelected) {
+      return TabStyleVariants[typeStyle].text;
+    } else if (index === hoveredTab) {
+      return TabStyleVariants[typeStyle].hoveredColor;
+    } else {
+      return TabStyleVariants[typeStyle].textDisabled;
+    }
+  };
+  var getTabStyle = function getTabStyle(index) {
+    switch (typeStyle) {
+      case 'primary':
+        return {
+          borderBottomColor: getPrimaryBorderColor(index),
+          borderBottomWidth: index === currentIndexSelected ? 2 : 1
+        };
+      case 'secondary':
+        return {
+          backgroundColor: getSecondaryBackgroundColor(index)
+        };
+      case 'terciary':
+        return {
+          backgroundColor: index === currentIndexSelected ? PRIMARY_100 : hoveredStyle(index),
+          borderTopColor: index === currentIndexSelected ? SECONDARY_100 : 'transparent'
+        };
+    }
+  };
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasScroll = _useState6[0],
+    setHasScroll = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    containerWidth = _useState8[0],
+    setContainerWidth = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    mapContainer = _useState10[0],
+    setMapContainer = _useState10[1];
+  var handleContainerLayout = function handleContainerLayout(event) {
+    var width = event.nativeEvent.layout.width;
+    setContainerWidth(width);
+  };
+  var handleMapContainerLayout = function handleMapContainerLayout(event) {
+    var width = event.nativeEvent.layout.width;
+    setMapContainer(width);
+  };
+  useEffect(function () {
+    if (mapContainer > containerWidth) {
+      setHasScroll(true);
+    } else {
+      setHasScroll(false);
+    }
+  }, [containerWidth]);
+  return /*#__PURE__*/React.createElement(ScrollView, {
+    onLayout: handleContainerLayout,
+    horizontal: true,
+    contentContainerStyle: [TabStyleVariants[typeStyle].container, !hasScroll && {
+      flex: 1
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    onLayout: handleMapContainerLayout,
+    style: _objectSpread({}, mapContainerViewStyle)
   }, data === null || data === void 0 ? void 0 : data.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Pressable, {
-      key: index,
-      style: [styles.tab, {
-        backgroundColor: index === currentIndexSelected ? PRIMARY_100 : index === hoveredTab ? TERTIARY_30 : TERTIARY_50,
-        borderTopColor: index === currentIndexSelected ? SECONDARY_100 : 'transparent'
-      }],
+      key: item.route,
+      style: function style(_ref2) {
+        var pressed = _ref2.pressed;
+        return [TabStyleVariants[typeStyle].tab, getTabStyle(index)];
+      },
       onPress: function onPress() {
         return handleOnPress(item, index);
       },
@@ -53,12 +149,8 @@ var Tab = function Tab(_ref) {
       },
       onHoverOut: handleHoverOut
     }, /*#__PURE__*/React.createElement(Text, {
-      ellipsizeMode: "tail",
-      numberOfLines: 1,
-      style: {
-        color: index === currentIndexSelected ? NEUTRAL_0 : PRIMARY_100
-      }
+      style: getTabTextStyle(index)
     }, item.name));
-  }));
+  })));
 };
 export default Tab;

package/dist-web/components/tab/Tab.styles.d.ts

@@ -1,17 +1,4 @@
-export declare const styles: {
-    container: {
-        flexDirection: "row";
-        alignItems: "center";
-        height: number;
-    };
-    tab: {
-        justifyContent: "center";
-        alignItems: "center";
-        borderBottomWidth: number;
-        borderBottomColor: string;
-        borderTopWidth: number;
-        flex: number;
-        height: number;
-        paddingHorizontal: number;
-    };
-};
+import { tabStyleVariant } from './Tab.types';
+import { ViewStyle } from 'react-native';
+export declare const mapContainerViewStyle: ViewStyle;
+export declare const TabStyleVariants: tabStyleVariant;

package/dist-web/components/tab/Tab.styles.js

@@ -1,19 +1,86 @@
-import { StyleSheet } from "react-native-web";
-import { PRIMARY_100 } from "../../styles/colors";
-export var styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: 40
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { NEUTRAL_0, NEUTRAL_50, NEUTRAL_500, NEUTRAL_600, NEUTRAL_700, PRIMARY_100 } from "../../styles/colors";
+var commonTabStyles = {
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+export var mapContainerViewStyle = {
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center'
+};
+export var TabStyleVariants = {
+  primary: {
+    container: _objectSpread({}, commonTabStyles),
+    tab: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderBottomWidth: 3,
+      height: 40,
+      paddingHorizontal: 8
+    },
+    text: {
+      color: PRIMARY_100,
+      fontWeight: '600'
+    },
+    textDisabled: {
+      color: NEUTRAL_500,
+      fontWeight: 'bold'
+    },
+    hoveredColor: {
+      color: NEUTRAL_700,
+      fontWeight: 'bold'
+    }
   },
-  tab: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderBottomWidth: 3,
-    borderBottomColor: PRIMARY_100,
-    borderTopWidth: 4,
-    flex: 1,
-    height: 40,
-    paddingHorizontal: 10
+  secondary: {
+    container: _objectSpread(_objectSpread({}, commonTabStyles), {}, {
+      backgroundColor: NEUTRAL_50,
+      paddingHorizontal: 16,
+      paddingVertical: 12
+    }),
+    tab: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: 40,
+      borderRadius: 6,
+      marginHorizontal: 8,
+      paddingHorizontal: 8
+    },
+    text: {
+      color: PRIMARY_100,
+      fontWeight: '600'
+    },
+    textDisabled: {
+      color: NEUTRAL_600,
+      fontWeight: 'bold'
+    },
+    hoveredColor: {
+      color: PRIMARY_100,
+      fontWeight: 'bold'
+    }
+  },
+  terciary: {
+    container: _objectSpread({}, commonTabStyles),
+    tab: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderBottomWidth: 3,
+      borderBottomColor: PRIMARY_100,
+      borderTopWidth: 4,
+      height: 40,
+      paddingHorizontal: 10
+    },
+    text: {
+      color: NEUTRAL_0
+    },
+    textDisabled: {
+      color: PRIMARY_100
+    },
+    hoveredColor: {}
   }
-});
+};

package/dist-web/components/tab/Tab.types.d.ts

@@ -1,9 +1,19 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type TabItemType = {
     name: string;
     route: string;
 };
+export type TabStyleType = 'primary' | 'secondary' | 'terciary';
+export type tabStyleVariant = Record<TabStyleType, {
+    container: ViewStyle;
+    tab: ViewStyle;
+    text: StyleProp<TextStyle>;
+    textDisabled: TextStyle;
+    hoveredColor: StyleProp<TextStyle>;
+}>;
 export interface TabProps {
     data?: TabItemType[];
     currentIndex: number;
     onPressTab?: (route: string, index: number) => void;
+    typeStyle: TabStyleType;
 }

package/dist-web/styles/colors.d.ts

@@ -14,6 +14,7 @@ export declare const SECONDARY_300 = "#FDEC71";
 export declare const TERTIARY_10 = "#F2F5F9";
 export declare const TERTIARY_30 = "#EFF1F7";
 export declare const TERTIARY_50 = "#EDF1FF";
+export declare const TERTIARY_80 = "#E0E7FF";
 export declare const TERTIARY_100 = "#808695";
 export declare const TERTIARY_800 = "#151C7A";
 export declare const QUATERNARY_10 = "#F5F5FC";
@@ -29,8 +30,9 @@ export declare const NEUTRAL_100 = "#000000";
 export declare const NEUTRAL_200 = "#EEEEEE";
 export declare const NEUTRAL_300 = "#E0E0E0";
 export declare const NEUTRAL_400 = "#BDBDBD";
-export declare const NEUTRAL_500 = "#E0E0E0";
+export declare const NEUTRAL_500 = "#9E9E9E";
 export declare const NEUTRAL_600 = "#757575";
+export declare const NEUTRAL_700 = "#616161";
 export declare const INITIAL_10 = "#ECF5FF";
 export declare const INITIAL_100 = "#3E97FF";
 export declare const PROCESS_10 = "#FFF6EC";

package/dist-web/styles/colors.js

@@ -14,6 +14,7 @@ export var SECONDARY_300 = '#FDEC71';
 export var TERTIARY_10 = '#F2F5F9';
 export var TERTIARY_30 = '#EFF1F7';
 export var TERTIARY_50 = '#EDF1FF';
+export var TERTIARY_80 = '#E0E7FF';
 export var TERTIARY_100 = '#808695';
 export var TERTIARY_800 = '#151C7A';
 export var QUATERNARY_10 = '#F5F5FC';
@@ -29,8 +30,9 @@ export var NEUTRAL_100 = '#000000';
 export var NEUTRAL_200 = '#EEEEEE';
 export var NEUTRAL_300 = '#E0E0E0';
 export var NEUTRAL_400 = '#BDBDBD';
-export var NEUTRAL_500 = '#E0E0E0';
+export var NEUTRAL_500 = '#9E9E9E';
 export var NEUTRAL_600 = '#757575';
+export var NEUTRAL_700 = '#616161';
 export var INITIAL_10 = '#ECF5FF';
 export var INITIAL_100 = '#3E97FF';
 export var PROCESS_10 = '#FFF6EC';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etendo-ui-library",
-  "version": "1.2.41",
+  "version": "1.2.43",
   "private": false,
   "scripts": {
     "android": "react-native run-android",