@trilogy-ds/react 0.0.1-beta-144 → 0.0.1-beta-sc-1

package/lib/components/table/tr/TableTrProps.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { Clickable, Referenceable, ReferenceableNative, TrilogyColor, TrilogyColorValues } from '../../../objects';
 import { TouchableOpacity } from 'react-native';
-import { CommonProps } from '../../../objects/facets/CommonProps';
+import { Clickable } from '../../../objects/facets/Clickable';
+import { TrilogyColor, TrilogyColorValues } from '../../../objects/facets/Color';
+import { Referenceable, ReferenceableNative } from '../../../objects/facets/Referenceable';
 interface TableTrPropsWeb extends Clickable {
     children: React.ReactNode;
     expandable?: boolean;
@@ -11,5 +12,5 @@ interface TableTrPropsWeb extends Clickable {
     color?: TrilogyColor | TrilogyColorValues;
 }
 export type TableTrPropsNative = TableTrPropsWeb & ReferenceableNative<TouchableOpacity>;
-export type TableTrProps = TableTrPropsWeb & Referenceable<HTMLTableRowElement> & CommonProps;
+export type TableTrProps = TableTrPropsWeb & Referenceable<HTMLTableRowElement>;
 export {};

package/lib/components/table/tr/TableTrPropsWebDefaults.js

@@ -58,8 +58,6 @@ export default {
       "INFO",
       "WARNING",
       "ERROR",
-      "MAIN",
-      "ACCENT",
       "WHITE",
       "MAIN",
       "MAIN_FADE",
@@ -78,7 +76,9 @@ export default {
       "NEUTRAL",
       "NEUTRAL_FADE",
       "WHITE",
+      "MAIN",
       "MAIN_FADE",
+      "ACCENT",
       "FONT",
       "SUCCESS_FADE",
       "INFO_FADE",

package/lib/components/table/tr/index.d.ts

@@ -1,2 +1,2 @@
-import TableTr from './TableTr';
+import TableTr from '../../../components/table/tr/TableTr';
 export default TableTr;

package/lib/components/table/tr/index.js

@@ -1,3 +1,3 @@
-import TableTr from './TableTr';
+import TableTr from '../../../components/table/tr/TableTr';
 export default TableTr;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYmxlL3RyL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sT0FBTyxNQUFNLFdBQVcsQ0FBQTtBQUUvQixlQUFlLE9BQU8sQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYmxlL3RyL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sT0FBTyxNQUFNLCtCQUErQixDQUFBO0FBRW5ELGVBQWUsT0FBTyxDQUFBIn0=

package/lib/components/tabs/Tabs.d.ts

@@ -1,22 +1,4 @@
 import React from 'react';
-import { TabsProps } from './TabsProps';
-/**
- * Tabs Component
- * @param children {ReactNode} Children for tabs
- * @param onClick onClick event
- * @param activeIndex {number} default active tab index
- * @param disabled {boolean} Disabled tabs
- * @param inverted {boolean} dark mode
- * @param shadowless {boolean} No shadow
- * @param centered {boolean} Centered tabs
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
- * @param fullwidth {boolean} Fullwidth tabs
- * @param leftAlign {boolean} Tabs left align
- * @param align { Alignable | AlignableValues} align content
- * @param marginless {boolean} delete margin
- * @param textAlign {TypographyAlign | TypographyAlignValues}
- * @param testId {string} Test Id for Test Integration
- */
-declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
-export default Tabs;
+import { TabsProps } from '../../components/tabs/TabsProps';
+declare const _default: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/components/tabs/Tabs.js

@@ -1,9 +1,9 @@
-import { __read, __rest } from "tslib";
+import { __assign, __rest } from "tslib";
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
-import { useTrilogyContext } from '../../context/index';
+import React from 'react';
+import { useTabs } from '../../components/tabs/hook/useTabs';
 import { hashClass } from '../../helpers/hashClassesHelpers';
-import { is } from '../../services/classify';
+import { has, is } from '../../services/classify';
 /**
  * Tabs Component
  * @param children {ReactNode} Children for tabs
@@ -22,15 +22,23 @@ import { is } from '../../services/classify';
  * @param textAlign {TypographyAlign | TypographyAlignValues}
  * @param testId {string} Test Id for Test Integration
  */
-var Tabs = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, id = props.id, onClick = props.onClick, activeIndex = props.activeIndex, fullwidth = props.fullwidth, align = props.align, inverted = props.inverted, others = __rest(props, ["children", "className", "id", "onClick", "activeIndex", "fullwidth", "align", "inverted"]);
-    var _a = __read(useState(activeIndex || 0), 2), activateIndex = _a[0], setActivateIndex = _a[1];
-    var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('tabs', fullwidth && is('fullwidth'), className));
-    useEffect(function () {
-        setActivateIndex(activateIndex);
-    }, [activeIndex]);
-    return (React.createElement("div", { id: id, ref: ref, className: classes, "data-tabs-context": '' }, children));
-});
-export default Tabs;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9UYWJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBR3hDOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQUNILElBQU0sSUFBSSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsVUFBQyxLQUFnQixFQUFFLEdBQW9DO0lBQzNFLElBQUEsUUFBUSxHQUFpRixLQUFLLFNBQXRGLEVBQUUsU0FBUyxHQUFzRSxLQUFLLFVBQTNFLEVBQUUsRUFBRSxHQUFrRSxLQUFLLEdBQXZFLEVBQUUsT0FBTyxHQUF5RCxLQUFLLFFBQTlELEVBQUUsV0FBVyxHQUE0QyxLQUFLLFlBQWpELEVBQUUsU0FBUyxHQUFpQyxLQUFLLFVBQXRDLEVBQUUsS0FBSyxHQUEwQixLQUFLLE1BQS9CLEVBQUUsUUFBUSxHQUFnQixLQUFLLFNBQXJCLEVBQUssTUFBTSxVQUFLLEtBQUssRUFBaEcsMkZBQXdGLENBQUYsQ0FBVTtJQUVoRyxJQUFBLEtBQUEsT0FBb0MsUUFBUSxDQUFTLFdBQVcsSUFBSSxDQUFDLENBQUMsSUFBQSxFQUFyRSxhQUFhLFFBQUEsRUFBRSxnQkFBZ0IsUUFBc0MsQ0FBQTtJQUNwRSxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsU0FBUyxJQUFJLEVBQUUsQ0FBQyxXQUFXLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRXhGLFNBQVMsQ0FBQztRQUNSLGdCQUFnQixDQUFDLGFBQWEsQ0FBQyxDQUFBO0lBQ2pDLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUE7SUFFakIsT0FBTyxDQUNMLDZCQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsT0FBTyx1QkFBb0IsRUFBRSxJQUM1RCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixlQUFlLElBQUksQ0FBQSJ9
+var Tabs = function (_a, ref) {
+    var children = _a.children, className = _a.className, onClick = _a.onClick, activeIndex = _a.activeIndex, disabled = _a.disabled, fullwidth = _a.fullwidth, align = _a.align, centered = _a.centered, marginless = _a.marginless, inverted = _a.inverted, shadowless = _a.shadowless, textAlign = _a.textAlign, testId = _a.testId, others = __rest(_a, ["children", "className", "onClick", "activeIndex", "disabled", "fullwidth", "align", "centered", "marginless", "inverted", "shadowless", "textAlign", "testId"]);
+    var _b = useTabs({ currentIndex: activeIndex, onClick: onClick, disabled: disabled }), isActive = _b.isActive, handleClick = _b.handleClick;
+    var classes = hashClass(clsx('tabs', fullwidth && is('fullwidth'), centered && is('centered'), marginless && is('marginless'), className));
+    return (React.createElement("div", { ref: ref, className: hashClass(clsx('tab-context', inverted && is('inverted'), align && has("text-".concat(align)), shadowless && is('shadowless'), textAlign && textAlign)), "data-tabs-context": '', "data-testid": testId },
+        React.createElement("div", __assign({ className: classes, role: 'tablist' }, others), React.Children.map(children, function (child, index) {
+            if (React.isValidElement(child)) {
+                var active = Boolean(isActive(index, child.props.active)) || false;
+                var key = index;
+                var props = {
+                    active: active,
+                    key: key,
+                    onClick: function (e) { return handleClick && handleClick(e, index, child); },
+                };
+                return React.cloneElement(child, props);
+            }
+        }))));
+};
+export default React.forwardRef(Tabs);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9UYWJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sZ0NBQWdDLENBQUE7QUFFeEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsVUFDWCxFQWVZLEVBQ1osR0FBb0M7SUFmbEMsSUFBQSxRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxPQUFPLGFBQUEsRUFDUCxXQUFXLGlCQUFBLEVBQ1gsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsVUFBVSxnQkFBQSxFQUNWLFFBQVEsY0FBQSxFQUNSLFVBQVUsZ0JBQUEsRUFDVixTQUFTLGVBQUEsRUFDVCxNQUFNLFlBQUEsRUFDSCxNQUFNLGNBZFgsZ0tBZUMsQ0FEVTtJQUlMLElBQUEsS0FBNEIsT0FBTyxDQUFDLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxPQUFPLFNBQUEsRUFBRSxRQUFRLFVBQUEsRUFBRSxDQUFDLEVBQW5GLFFBQVEsY0FBQSxFQUFFLFdBQVcsaUJBQThELENBQUE7SUFFM0YsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixJQUFJLENBQUMsTUFBTSxFQUFFLFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQUUsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFBRSxVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUNsSCxDQUFBO0lBRUQsT0FBTyxDQUNMLDZCQUNFLEdBQUcsRUFBRSxHQUFHLEVBQ1IsU0FBUyxFQUFFLFNBQVMsQ0FDbEIsSUFBSSxDQUNGLGFBQWEsRUFDYixRQUFRLElBQUksRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUMxQixLQUFLLElBQUksR0FBRyxDQUFDLGVBQVEsS0FBSyxDQUFFLENBQUMsRUFDN0IsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsU0FBUyxJQUFJLFNBQVMsQ0FDdkIsQ0FDRix1QkFDaUIsRUFBRSxpQkFDUCxNQUFNO1FBRW5CLHNDQUFLLFNBQVMsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFDLFNBQVMsSUFBSyxNQUFNLEdBQy9DLEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxVQUFDLEtBQUssRUFBRSxLQUFLO1lBQ3pDLElBQUksS0FBSyxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDL0IsSUFBTSxNQUFNLEdBQUcsT0FBTyxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEtBQUssQ0FBQTtnQkFDcEUsSUFBTSxHQUFHLEdBQUcsS0FBSyxDQUFBO2dCQUNqQixJQUFNLEtBQUssR0FBRztvQkFDWixNQUFNLFFBQUE7b0JBQ04sR0FBRyxLQUFBO29CQUNILE9BQU8sRUFBRSxVQUFDLENBQW1CLElBQUssT0FBQSxXQUFXLElBQUksV0FBVyxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFDLEVBQTNDLENBQTJDO2lCQUM5RSxDQUFBO2dCQUNELE9BQU8sS0FBSyxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUE7YUFDeEM7UUFDSCxDQUFDLENBQUMsQ0FDRSxDQUNGLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsS0FBSyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQSJ9

package/lib/components/tabs/Tabs.native.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { TabsProps } from '../../components/tabs/TabsProps';
+declare const _default: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<ScrollView>>;
+export default _default;

package/lib/components/tabs/Tabs.native.js

@@ -0,0 +1,73 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { useState } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { ComponentName } from '../../components/enumsComponentsName';
+import TabsItem from '../../components/tabs/item';
+import { Text, TextLevels } from '../../components/text';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
+/**
+ * Tabs Component
+ * @param children {ReactNode} Children for tabs
+ * @param onClick onClick event
+ * @param activeIndex {number} default active tab index
+ * @param disabled {boolean} Disabled tabs
+ * @param inverted {boolean} dark mode
+ * @param shadowless {boolean} No shadow
+ * @param centered {boolean} Centered tabs
+ */
+var Tabs = function (_a, ref) {
+    var children = _a.children, onClick = _a.onClick, activeIndex = _a.activeIndex, disabled = _a.disabled, centered = _a.centered, inverted = _a.inverted, others = __rest(_a, ["children", "onClick", "activeIndex", "disabled", "centered", "inverted"]);
+    var _b = __read(useState(activeIndex), 2), activateIndex = _b[0], setActivateIndex = _b[1];
+    var _c = __read(React.useState(false), 2), isIcons = _c[0], setIsIcons = _c[1];
+    var isActive = function (index, childPropsActive) {
+        if (typeof childPropsActive !== 'undefined' && !activateIndex) {
+            return childPropsActive;
+        }
+        if (index === activateIndex) {
+            return true;
+        }
+    };
+    var toggleActive = function (e, index) {
+        if (disabled) {
+            return false;
+        }
+        setActivateIndex(index);
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var styles = StyleSheet.create({
+        tabs: {
+            height: isIcons ? 64 : 48,
+            flexDirection: 'row',
+            backgroundColor: inverted ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.BACKGROUND),
+        },
+    });
+    return (React.createElement(ScrollView, __assign({ horizontal: true, showsHorizontalScrollIndicator: false, style: styles.tabs, contentContainerStyle: centered && { justifyContent: 'center', flexGrow: 1 }, ref: ref }, others), children &&
+        Array.isArray(children) &&
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        children.map(function (child, index) {
+            var _a;
+            if (!isIcons && child.props.iconName)
+                setIsIcons(true);
+            var props = {
+                active: (_a = child.props.active) !== null && _a !== void 0 ? _a : (Boolean(isActive(index, child.props.active)) || false),
+                key: index,
+                tabIndex: index,
+                inverted: inverted,
+                onClick: function (event) {
+                    toggleActive(event, index);
+                    if (child) {
+                        if (child.props.onClick) {
+                            child.props.onClick(event);
+                        }
+                    }
+                },
+            };
+            return typeof child.valueOf() === 'string' ? (React.createElement(TabsItem, { active: props.active, onClick: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); } },
+                React.createElement(Text, { level: TextLevels.THREE }, String(child)))) : (React.cloneElement(child, props));
+        })));
+};
+Tabs.displayName = ComponentName.Tabs;
+export default React.forwardRef(Tabs);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvVGFicy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUVyRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxRQUFRLE1BQU0sd0JBQXdCLENBQUE7QUFFN0MsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXBFOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sSUFBSSxHQUFHLFVBQ1gsRUFBc0YsRUFDdEYsR0FBMEI7SUFEeEIsSUFBQSxRQUFRLGNBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxXQUFXLGlCQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUF6RSwwRUFBMkUsQ0FBRjtJQUduRSxJQUFBLEtBQUEsT0FBb0MsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFBLEVBQXhELGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUF5QixDQUFBO0lBQ3pELElBQUEsS0FBQSxPQUF3QixLQUFLLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxJQUFBLEVBQTVDLE9BQU8sUUFBQSxFQUFFLFVBQVUsUUFBeUIsQ0FBQTtJQUVuRCxJQUFNLFFBQVEsR0FBRyxVQUFDLEtBQWEsRUFBRSxnQkFBaUM7UUFDaEUsSUFBSSxPQUFPLGdCQUFnQixLQUFLLFdBQVcsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUM3RCxPQUFPLGdCQUFnQixDQUFB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

package/lib/components/tabs/TabsProps.d.ts

@@ -1,12 +1,22 @@
 /// <reference types="react" />
-import { Accessibility, AlignableProps, Clickable, Dev } from '../../objects';
-import { CommonProps } from '../../objects/facets/CommonProps';
+import { Accessibility } from '../../objects/facets/Accessibility';
+import { Centerable } from '../../objects/facets/Centerable';
+import { Clickable } from '../../objects/facets/Clickable';
+import { Dev } from '../../objects/facets/Dev';
+import { JustifiableProps } from '../../objects/facets/Justifiable';
+import { TypographyAlign, TypographyAlignValues } from '../../objects/Typography/TypographyAlign';
 /**
  * Tabs Interface
  */
-export interface TabsProps extends AlignableProps, Clickable, Accessibility, Dev, CommonProps {
+export interface TabsProps extends Centerable, JustifiableProps, Clickable, Accessibility, Dev {
     children: React.ReactNode | string;
+    disabled?: boolean;
     activeIndex?: number;
     fullwidth?: boolean;
+    className?: string;
+    marginless?: boolean;
     inverted?: boolean;
+    align?: 'left' | 'right' | 'center';
+    shadowless?: boolean;
+    textAlign?: TypographyAlign | TypographyAlignValues;
 }

package/lib/components/tabs/TabsPropsDefaults.js

@@ -13,6 +13,14 @@ export default {
       "ReactPortal"
     ]
   },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "activeIndex": {
     "type": "string",
     "values": [
@@ -28,6 +36,21 @@ export default {
       "true"
     ]
   },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "marginless": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "inverted": {
     "type": "boolean",
     "values": [
@@ -37,58 +60,73 @@ export default {
     ]
   },
   "align": {
-    "type": "enum",
+    "type": "string",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "center",
+      "left",
+      "right"
     ]
   },
-  "verticalAlign": {
+  "shadowless": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "textAlign": {
     "type": "enum",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "has-text-centered",
+      "has-text-justified",
+      "has-text-left",
+      "has-text-right",
+      "has-text-centered",
+      "has-text-justified",
+      "has-text-left",
+      "has-text-right"
     ]
   },
-  "onClick": {
-    "type": "function",
+  "centered": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ClickEvent"
+      "false",
+      "true"
     ]
   },
-  "accessibilityLabel": {
-    "type": "string",
+  "justify": {
+    "type": "enum",
     "values": [
       "undefined",
-      "string"
+      "justified-center",
+      "justified-start",
+      "justified-end",
+      "space-between",
+      "JUSTIFIED_CENTER",
+      "JUSTIFIED_START",
+      "JUSTIFIED_END",
+      "SPACE_BETWEEN"
     ]
   },
-  "testId": {
-    "type": "string",
+  "onClick": {
+    "type": "function",
     "values": [
       "undefined",
-      "string"
+      "ClickEvent"
     ]
   },
-  "id": {
+  "accessibilityLabel": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
+  "testId": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/tabs/hook/useTabs.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ClickEvent } from '../../../events/OnClickEvent';
+interface IParams {
+    currentIndex?: number;
+    onClick?: ClickEvent;
+    disabled?: boolean;
+}
+export declare const useTabs: ({ currentIndex, onClick, disabled }: IParams) => {
+    isActive: (index: number, childPropsActive: React.ReactNode) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
+    handleClick: (e: React.MouseEvent, index: number, child: React.ReactElement) => void;
+} | {
+    isActive: (index: number, childPropsActive: React.ReactNode) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
+    handleClick: undefined;
+};
+export {};

package/lib/components/tabs/hook/useTabs.js

@@ -0,0 +1,46 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useTabs = function (_a) {
+    var currentIndex = _a.currentIndex, onClick = _a.onClick, disabled = _a.disabled;
+    try {
+        var _b = __read(React.useState(currentIndex || 0), 2), activateIndex_1 = _b[0], setActivateIndex_1 = _b[1];
+        var isActive = React.useCallback(function (index, childPropsActive) {
+            if (typeof childPropsActive !== 'undefined' && !activateIndex_1)
+                return childPropsActive;
+            if (index === activateIndex_1)
+                return true;
+        }, [activateIndex_1]);
+        var toggleActive_1 = React.useCallback(function (e, index) {
+            if (disabled)
+                return false;
+            setActivateIndex_1(index);
+            if (onClick)
+                onClick(e);
+        }, [disabled]);
+        var handleClick = React.useCallback(function (e, index, child) {
+            var _a;
+            toggleActive_1(e, index);
+            if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick)
+                child.props.onClick(e);
+        }, []);
+        React.useEffect(function () {
+            setActivateIndex_1(activateIndex_1);
+        }, [currentIndex]);
+        return {
+            isActive: isActive,
+            handleClick: handleClick,
+        };
+    }
+    catch (_c) {
+        return {
+            isActive: function (index, childPropsActive) {
+                if (typeof childPropsActive !== 'undefined' && !currentIndex)
+                    return childPropsActive;
+                if (index === currentIndex)
+                    return true;
+            },
+            handleClick: undefined,
+        };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9ob29rL3VzZVRhYnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFVekIsTUFBTSxDQUFDLElBQU0sT0FBTyxHQUFHLFVBQUMsRUFBNEM7UUFBMUMsWUFBWSxrQkFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFFBQVEsY0FBQTtJQUN2RCxJQUFJO1FBQ0ksSUFBQSxLQUFBLE9BQW9DLEtBQUssQ0FBQyxRQUFRLENBQVMsWUFBWSxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQTVFLGVBQWEsUUFBQSxFQUFFLGtCQUFnQixRQUE2QyxDQUFBO1FBRW5GLElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQ2hDLFVBQUMsS0FBYSxFQUFFLGdCQUFpQztZQUMvQyxJQUFJLE9BQU8sZ0JBQWdCLEtBQUssV0FBVyxJQUFJLENBQUMsZUFBYTtnQkFBRSxPQUFPLGdCQUFnQixDQUFBO1lBQ3RGLElBQUksS0FBSyxLQUFLLGVBQWE7Z0JBQUUsT0FBTyxJQUFJLENBQUE7UUFDMUMsQ0FBQyxFQUNELENBQUMsZUFBYSxDQUFDLENBQ2hCLENBQUE7UUFFRCxJQUFNLGNBQVksR0FBRyxLQUFLLENBQUMsV0FBVyxDQUNwQyxVQUFDLENBQW1CLEVBQUUsS0FBYTtZQUNqQyxJQUFJLFFBQVE7Z0JBQUUsT0FBTyxLQUFLLENBQUE7WUFDMUIsa0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUE7WUFDdkIsSUFBSSxPQUFPO2dCQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTtRQUN6QixDQUFDLEVBQ0QsQ0FBQyxRQUFRLENBQUMsQ0FDWCxDQUFBO1FBRUQsSUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQyxVQUFDLENBQW1CLEVBQUUsS0FBYSxFQUFFLEtBQXlCOztZQUNsRyxjQUFZLENBQUMsQ0FBQyxFQUFFLEtBQUssQ0FBQyxDQUFBO1lBQ3RCLElBQUksTUFBQSxLQUFLLGFBQUwsS0FBSyx1QkFBTCxLQUFLLENBQUUsS0FBSywwQ0FBRSxPQUFPO2dCQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ25ELENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQTtRQUVOLEtBQUssQ0FBQyxTQUFTLENBQUM7WUFDZCxrQkFBZ0IsQ0FBQyxlQUFhLENBQUMsQ0FBQTtRQUNqQyxDQUFDLEVBQUUsQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFBO1FBRWxCLE9BQU87WUFDTCxRQUFRLFVBQUE7WUFDUixXQUFXLGFBQUE7U0FDWixDQUFBO0tBQ0Y7SUFBQyxXQUFNO1FBQ04sT0FBTztZQUNMLFFBQVEsRUFBRSxVQUFDLEtBQWEsRUFBRSxnQkFBaUM7Z0JBQ3pELElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxZQUFZO29CQUFFLE9BQU8sZ0JBQWdCLENBQUE7Z0JBQ3JGLElBQUksS0FBSyxLQUFLLFlBQVk7b0JBQUUsT0FBTyxJQUFJLENBQUE7WUFDekMsQ0FBQztZQUNELFdBQVcsRUFBRSxTQUFTO1NBQ3ZCLENBQUE7S0FDRjtBQUNILENBQUMsQ0FBQSJ9

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

@@ -1,6 +1,2 @@
-import Tabs from './Tabs';
-import TabPanels from './tab-panels/TabPanels';
-import TabPanel from './tab-panels/tab-panel/TabPanel';
-import TabList from './tab-list/TabList';
-import Tab from './tab-list/tab/Tab';
-export { Tabs, TabPanel, TabPanels, TabList, Tab };
+export { default as TabsItem } from '../../components/tabs/item/TabsItem';
+export { default as Tabs } from '../../components/tabs/Tabs';

package/lib/components/tabs/index.js

@@ -1,7 +1,3 @@
-import Tabs from './Tabs';
-import TabPanels from './tab-panels/TabPanels';
-import TabPanel from './tab-panels/tab-panel/TabPanel';
-import TabList from './tab-list/TabList';
-import Tab from './tab-list/tab/Tab';
-export { Tabs, TabPanel, TabPanels, TabList, Tab };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxJQUFJLE1BQU0sUUFBUSxDQUFBO0FBQ3pCLE9BQU8sU0FBUyxNQUFNLHdCQUF3QixDQUFBO0FBQzlDLE9BQU8sUUFBUSxNQUFNLGlDQUFpQyxDQUFBO0FBQ3RELE9BQU8sT0FBTyxNQUFNLG9CQUFvQixDQUFBO0FBQ3hDLE9BQU8sR0FBRyxNQUFNLG9CQUFvQixDQUFBO0FBRXBDLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUEifQ==
+export { default as TabsItem } from '../../components/tabs/item/TabsItem';
+export { default as Tabs } from '../../components/tabs/Tabs';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxRQUFRLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQTtBQUNyRSxPQUFPLEVBQUUsT0FBTyxJQUFJLElBQUksRUFBRSxNQUFNLHdCQUF3QixDQUFBIn0=

package/lib/components/tabs/item/TabsItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabsItemProps } from '../../../components/tabs/item/TabsItemProps';
+declare const _default: React.ForwardRefExoticComponent<TabsItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export default _default;

package/lib/components/tabs/item/TabsItem.js

@@ -0,0 +1,43 @@
+import { __assign, __rest } from "tslib";
+import clsx from 'clsx';
+import React from 'react';
+import { Icon } from '../../../components/icon';
+import { useTabsItem } from '../../../components/tabs/item/hook/useTabsItem';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+/**
+ * Tabs Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param iconName {IconNameValues | IconName} add icon name
+ * @param disabled {boolean} disable tab item
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ * @param testId {string} Test Id for Test Integration
+ * @param to {string} Link
+ * @param href {string} <a />
+ * @param routerLink Custom Router Link as props
+ */
+var TabsItem = function (_a, ref) {
+    var active = _a.active, children = _a.children, className = _a.className, onClick = _a.onClick, to = _a.to, href = _a.href, routerLink = _a.routerLink, iconName = _a.iconName, disabled = _a.disabled, testId = _a.testId, others = __rest(_a, ["active", "children", "className", "onClick", "to", "href", "routerLink", "iconName", "disabled", "testId"]);
+    var _b = useTabsItem({ disabled: disabled, active: active, onClick: onClick }), activeItem = _b.activeItem, handleClick = _b.handleClick;
+    var classes = hashClass(clsx('tab', className, { 'is-active': activeItem }));
+    // accessibility
+    var a11y = {
+        a: {
+            'aria-selected': activeItem,
+            'data-tab-navigation': '',
+        },
+    };
+    if (routerLink && (to || href)) {
+        var RouterLink = (routerLink ? routerLink : 'a');
+        return (React.createElement(RouterLink, __assign({ ref: ref, "data-testid": testId, tabIndex: 0, to: to, href: href, className: classes, onClick: handleClick }, a11y.a, others),
+            React.createElement("div", { className: 'tab-icon' }, iconName && React.createElement(Icon, { align: 'ALIGNED_CENTER', size: 'small', name: iconName })),
+            children));
+    }
+    return (React.createElement("button", __assign({ ref: ref, "aria-disabled": disabled, disabled: disabled, className: classes, role: 'tab', "data-testid": testId }, a11y.a, others, { onClick: handleClick }),
+        React.createElement("div", { className: 'tab-icon' }, iconName && React.createElement(Icon, { align: 'ALIGNED_CENTER', size: 'small', name: iconName })),
+        children));
+};
+export default React.forwardRef(TabsItem);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFic0l0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaXRlbS9UYWJzSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekIsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRXhDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQTtBQUNyRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFFeEQ7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sUUFBUSxHQUFHLFVBQ2YsRUFBb0gsRUFDcEgsR0FBK0M7SUFEN0MsSUFBQSxNQUFNLFlBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxJQUFJLFVBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUFuRyw0R0FBcUcsQ0FBRjtJQUc3RixJQUFBLEtBQThCLFdBQVcsQ0FBQyxFQUFFLFFBQVEsVUFBQSxFQUFFLE1BQU0sUUFBQSxFQUFFLE9BQU8sU0FBQSxFQUFFLENBQUMsRUFBdEUsVUFBVSxnQkFBQSxFQUFFLFdBQVcsaUJBQStDLENBQUE7SUFDOUUsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUMsQ0FBQTtJQUU5RSxnQkFBZ0I7SUFDaEIsSUFBTSxJQUFJLEdBQUc7UUFDWCxDQUFDLEVBQUU7WUFDRCxlQUFlLEVBQUUsVUFBVTtZQUMzQixxQkFBcUIsRUFBRSxFQUFFO1NBQzFCO0tBQ0YsQ0FBQTtJQUVELElBQUksVUFBVSxJQUFJLENBQUMsRUFBRSxJQUFJLElBQUksQ0FBQyxFQUFFO1FBQzlCLElBQU0sVUFBVSxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBc0IsQ0FBQTtRQUN2RSxPQUFPLENBQ0wsb0JBQUMsVUFBVSxhQUNULEdBQUcsRUFBRSxHQUFHLGlCQUNLLE1BQU0sRUFDbkIsUUFBUSxFQUFFLENBQUMsRUFDWCxFQUFFLEVBQUUsRUFBRSxFQUNOLElBQUksRUFBRSxJQUFJLEVBQ1YsU0FBUyxFQUFFLE9BQU8sRUFDbEIsT0FBTyxFQUFFLFdBQVcsSUFDaEIsSUFBSSxDQUFDLENBQUMsRUFDTixNQUFNO1lBRVYsNkJBQUssU0FBUyxFQUFDLFVBQVUsSUFBRSxRQUFRLElBQUksb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBQyxnQkFBZ0IsRUFBQyxJQUFJLEVBQUMsT0FBTyxFQUFDLElBQUksRUFBRSxRQUFRLEdBQUksQ0FBTztZQUN6RyxRQUFRLENBQ0UsQ0FDZCxDQUFBO0tBQ0Y7SUFFRCxPQUFPLENBQ0wseUNBQ0UsR0FBRyxFQUFFLEdBQW1DLG1CQUN6QixRQUFRLEVBQ3ZCLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFNBQVMsRUFBRSxPQUFPLEVBQ2xCLElBQUksRUFBQyxLQUFLLGlCQUNHLE1BQU0sSUFDZixJQUFJLENBQUMsQ0FBQyxFQUNOLE1BQU0sSUFDVixPQUFPLEVBQUUsV0FBVztRQUVwQiw2QkFBSyxTQUFTLEVBQUMsVUFBVSxJQUFFLFFBQVEsSUFBSSxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFDLGdCQUFnQixFQUFDLElBQUksRUFBQyxPQUFPLEVBQUMsSUFBSSxFQUFFLFFBQVEsR0FBSSxDQUFPO1FBQ3pHLFFBQVEsQ0FDRixDQUNWLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEtBQUssQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLENBQUEifQ==

package/lib/components/tabs/item/TabsItem.native.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { TabsItemProps } from '../../../components/tabs/item/TabsItemProps';
+declare const _default: React.ForwardRefExoticComponent<TabsItemProps & React.RefAttributes<TouchableOpacity>>;
+export default _default;

package/lib/components/tabs/item/TabsItem.native.js

@@ -0,0 +1,87 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { useEffect, useState } from 'react';
+import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { Icon } from '../../../components/icon';
+import { Text, TextLevels } from '../../../components/text';
+import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
+/**
+ * Tabs Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param iconName {IconNameValues | IconName} add icon name
+ * @param disabled {boolean} disable tab item
+ */
+var TabsItem = function (_a, ref) {
+    var active = _a.active, children = _a.children, onClick = _a.onClick, iconName = _a.iconName, inverted = _a.inverted, disabled = _a.disabled, others = __rest(_a, ["active", "children", "onClick", "iconName", "inverted", "disabled"]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _b = __read(useState(active || false), 2), setActiveItem = _b[1];
+    var _c = __read(useState(false), 2), setInPressIn = _c[1];
+    var animatedBorderStyle = {
+        borderBottomWidth: (active && 2) || 0,
+    };
+    var getIconColor = React.useMemo(function () {
+        if (inverted) {
+            if (disabled)
+                return TrilogyColor.NEUTRAL_FADE;
+            return TrilogyColor.BACKGROUND;
+        }
+        if (disabled)
+            return TrilogyColor.DISABLED;
+        if (active)
+            return TrilogyColor.MAIN;
+        return TrilogyColor.MAIN;
+    }, [inverted, disabled, active]);
+    var getBorderColor = React.useMemo(function () {
+        if (disabled)
+            return 'transparent';
+        if (inverted) {
+            if (active)
+                return getColorStyle(TrilogyColor.BACKGROUND);
+        }
+        if (active)
+            return getColorStyle(TrilogyColor.MAIN);
+        return 'transparent';
+    }, [inverted, disabled, active]);
+    var styles = StyleSheet.create({
+        tabsItem: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingVertical: 6,
+            paddingHorizontal: 14,
+            position: 'relative',
+            height: iconName ? 60 : 44,
+        },
+        text: {
+            color: getColorStyle(getIconColor),
+            textAlign: 'center',
+        },
+        border: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            borderBottomColor: getBorderColor,
+        },
+    });
+    useEffect(function () {
+        setActiveItem(active || false);
+    }, [active]);
+    return (React.createElement(TouchableOpacity, __assign({ activeOpacity: 1, onPressIn: function () { return setInPressIn(true); }, onPressOut: function () { return setInPressIn(false); }, style: [styles.tabsItem], onPress: function (e) {
+            if (!disabled) {
+                setActiveItem(active || false);
+                if (onClick) {
+                    onClick(e);
+                }
+            }
+        }, ref: ref }, others),
+        iconName && (React.createElement(View, null,
+            React.createElement(Icon, { color: getIconColor, size: 'small', name: iconName }))),
+        children &&
+            (typeof children.valueOf() === 'string' ? (React.createElement(Text, { style: styles.text, level: TextLevels.TWO }, String(children))) : (children)),
+        React.createElement(Animated.View, { style: [styles.border, animatedBorderStyle] })));
+};
+TabsItem.displayName = ComponentName.TabsItem;
+export default React.forwardRef(TabsItem);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFic0l0ZW0ubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL2l0ZW0vVGFic0l0ZW0ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ2xELE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUzRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRXhDLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVwRTs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxRQUFRLEdBQUcsVUFDZixFQUFxRixFQUNyRixHQUFnQztJQUQ5QixJQUFBLE1BQU0sWUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBcEUscUVBQXNFLENBQUY7SUFHcEUsNkRBQTZEO0lBQ3ZELElBQUEsS0FBQSxPQUFvQixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQW5ELGFBQWEsUUFBc0MsQ0FBQTtJQUN0RCxJQUFBLEtBQUEsT0FBbUIsUUFBUSxDQUFVLEtBQUssQ0FBQyxJQUFBLEVBQXhDLFlBQVksUUFBNEIsQ0FBQTtJQUVqRCxJQUFNLG1CQUFtQixHQUFHO1FBQzFCLGlCQUFpQixFQUFFLENBQUMsTUFBTSxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUM7S0FDdEMs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