@trilogy-ds/react 0.0.1-beta-148 → 0.0.1-beta-149

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

@@ -7,10 +7,16 @@ import { TabsProps } from './TabsProps';
  * @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: ({ children, className, id, onClick, activeIndex, fullwidth, align, inverted, ...others }: TabsProps) => React.JSX.Element;
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;

package/lib/components/tabs/Tabs.js

@@ -1,9 +1,9 @@
-import { __read, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { useTrilogyContext } from '../../context/index';
 import { hashClass } from '../../helpers/hashClassesHelpers';
-import { is } from '../../services/classify';
+import { has, is } from '../../services/classify';
 /**
  * Tabs Component
  * @param children {ReactNode} Children for tabs
@@ -11,20 +11,65 @@ import { is } from '../../services/classify';
  * @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
  */
-var Tabs = function (_a) {
-    var children = _a.children, className = _a.className, id = _a.id, onClick = _a.onClick, activeIndex = _a.activeIndex, fullwidth = _a.fullwidth, align = _a.align, inverted = _a.inverted, others = __rest(_a, ["children", "className", "id", "onClick", "activeIndex", "fullwidth", "align", "inverted"]);
-    var _b = __read(useState(activeIndex || 0), 2), activateIndex = _b[0], setActivateIndex = _b[1];
+var Tabs = React.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, onClick = props.onClick, activeIndex = props.activeIndex, disabled = props.disabled, fullwidth = props.fullwidth, align = props.align, centered = props.centered, marginless = props.marginless, inverted = props.inverted, shadowless = props.shadowless, textAlign = props.textAlign, testId = props.testId, others = __rest(props, ["children", "className", "onClick", "activeIndex", "disabled", "fullwidth", "align", "centered", "marginless", "inverted", "shadowless", "textAlign", "testId"]);
+    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));
+    var _b = __read(React.useState(false), 2), isIcons = _b[0], setIsIcons = _b[1];
+    var classes = hashClass(styled, clsx('tabs', fullwidth && is('fullwidth'), centered && is('centered'), marginless && is('marginless'), isIcons && is('icons'), className));
+    var isActive = React.useCallback(function (index, childPropsActive) {
+        if (typeof childPropsActive !== 'undefined' && !activateIndex) {
+            return childPropsActive;
+        }
+        if (index === activateIndex) {
+            return true;
+        }
+    }, [activateIndex]);
+    var toggleActive = React.useCallback(function (e, index) {
+        if (disabled) {
+            return false;
+        }
+        setActivateIndex(index);
+        if (onClick) {
+            onClick(e);
+        }
+    }, [disabled]);
     useEffect(function () {
         setActivateIndex(activateIndex);
     }, [activeIndex]);
-    return (React.createElement("div", { id: id, className: classes, "data-tabs-context": "" }, children));
-};
+    return (React.createElement("div", { ref: ref, className: hashClass(styled, 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)) {
+                if (!isIcons && child.props.iconName)
+                    setIsIcons(true);
+                var active = Boolean(isActive(index, child.props.active)) || false;
+                var key = index;
+                var props_1 = {
+                    active: active,
+                    key: key,
+                    onClick: function (e) {
+                        toggleActive(e, index);
+                        if (child) {
+                            if (child.props.onClick) {
+                                child.props.onClick(e);
+                            }
+                        }
+                    },
+                };
+                return React.cloneElement(child, props_1);
+            }
+        }))));
+});
 export default Tabs;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9UYWJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBR3hDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsVUFBQyxFQUFtRztJQUFqRyxJQUFBLFFBQVEsY0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFdBQVcsaUJBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXRGLDJGQUF3RixDQUFGO0lBQzVGLElBQUEsS0FBQSxPQUFvQyxRQUFRLENBQVMsV0FBVyxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQXJFLGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUFzQyxDQUFBO0lBQ3BFLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRSxTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFeEYsU0FBUyxDQUFDO1FBQ1IsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLENBQUE7SUFDakMsQ0FBQyxFQUFFLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQTtJQUVqQixPQUFPLENBQ0wsNkJBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyx1QkFBb0IsRUFBRSxJQUNsRCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxJQUFJLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9UYWJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUc3Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQkc7QUFDSCxJQUFNLElBQUksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFDLFVBQUMsS0FBZ0IsRUFBRSxHQUFvQztJQUVqRixJQUFBLFFBQVEsR0FjTixLQUFLLFNBZEMsRUFDUixTQUFTLEdBYVAsS0FBSyxVQWJFLEVBQ1QsT0FBTyxHQVlMLEtBQUssUUFaQSxFQUNQLFdBQVcsR0FXVCxLQUFLLFlBWEksRUFDWCxRQUFRLEdBVU4sS0FBSyxTQVZDLEVBQ1IsU0FBUyxHQVNQLEtBQUssVUFURSxFQUNULEtBQUssR0FRSCxLQUFLLE1BUkYsRUFDTCxRQUFRLEdBT04sS0FBSyxTQVBDLEVBQ1IsVUFBVSxHQU1SLEtBQUssV0FORyxFQUNWLFFBQVEsR0FLTixLQUFLLFNBTEMsRUFDUixVQUFVLEdBSVIsS0FBSyxXQUpHLEVBQ1YsU0FBUyxHQUdQLEtBQUssVUFIRSxFQUNULE1BQU0sR0FFSixLQUFLLE9BRkQsRUFDSCxNQUFNLFVBQ1AsS0FBSyxFQWZILGdLQWVMLENBRFUsQ0FDRjtJQUVILElBQUEsS0FBQSxPQUFvQyxRQUFRLENBQVMsV0FBVyxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQXJFLGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUFz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

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { TabsProps } from './TabsProps';
+import { ComponentName } from '../../components/enumsComponentsName';
+/**
+ * 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
+ */
+declare const Tabs: {
+    ({ children, onClick, activeIndex, disabled, centered, inverted, ...others }: TabsProps): JSX.Element;
+    displayName: ComponentName;
+};
+export default Tabs;

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

@@ -0,0 +1,73 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { useState } from 'react';
+import { StyleSheet, ScrollView } from 'react-native';
+import { Text, TextLevels } from '../../components/text';
+import TabsItem from './item';
+import { getColorStyle, TrilogyColor } from '../../objects';
+import { ComponentName } from '../../components/enumsComponentsName';
+/**
+ * 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) {
+    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 }, others, { contentContainerStyle: centered && { justifyContent: "center", flexGrow: 1 } }), 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 Tabs;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvVGFicy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUVyRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3BELE9BQU8sUUFBUSxNQUFNLFFBQVEsQ0FBQTtBQUM3QixPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN2RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEU7Ozs7Ozs7OztHQVNHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsVUFBQyxFQUFzRjtJQUFwRixJQUFBLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFdBQVcsaUJBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXpFLDBFQUEyRSxDQUFGO0lBQy9FLElBQUEsS0FBQSxPQUFvQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUEsRUFBeEQsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQXlCLENBQUE7SUFDekQsSUFBQSxLQUFBLE9BQXdCLEtBQUssQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLElBQUEsRUFBNUMsT0FBTyxRQUFBLEVBQUUsVUFBVSxRQUF5QixDQUFBO0lBRW5ELElBQU0sUUFBUSxHQUFHLFVBQUMsS0FBYSxFQUFFLGdCQUFpQztRQUNoRSxJQUFJLE9BQU8sZ0JBQWdCLEtBQUssV0FBVyxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQzdELE9BQU8sZ0JBQWdCLENBQUE7U0FDeEI7UUFDRCxJQUFJ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

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

@@ -1,12 +1,19 @@
 /// <reference types="react" />
-import { Accessibility, AlignableProps, Clickable, Dev } from '../../objects';
-import { CommonProps } from '../../objects/facets/CommonProps';
+import { Accessibility, Clickable, Dev, TypographyAlign, TypographyAlignValues } from '../../objects';
+import { Centerable } from '../../objects/facets/Centerable';
+import { JustifiableProps } from '../../objects/facets/Justifiable';
 /**
  * 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/index.d.ts

@@ -1,6 +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 };
+import TabsItem from './item';
+export { Tabs, TabsItem };

package/lib/components/tabs/index.js

@@ -1,7 +1,4 @@
 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==
+import TabsItem from './item';
+export { Tabs, TabsItem };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxJQUFJLE1BQU0sUUFBUSxDQUFBO0FBQ3pCLE9BQU8sUUFBUSxNQUFNLFFBQVEsQ0FBQTtBQUU3QixPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxDQUFBIn0=

package/lib/components/tabs/{tab-list/tab/Tab.d.ts → item/TabsItem.d.ts}

@@ -1,5 +1,5 @@
-import React from 'react';
-import { TabProps } from './TabProps';
+import React from "react";
+import { TabsItemProps } from "./TabsItemProps";
 /**
  * Tabs Item Component
  * @param active {boolean} active tab item
@@ -14,5 +14,5 @@ import { TabProps } from './TabProps';
  * @param href {string} <a />
  * @param routerLink Custom Router Link as props
  */
-declare const Tab: ({ active, className, onClick, to, href, routerLink, iconName, label, disabled, testId, ...others }: TabProps) => React.JSX.Element;
-export default Tab;
+declare const TabsItem: React.ForwardRefExoticComponent<TabsItemProps & React.RefAttributes<any>>;
+export default TabsItem;

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

@@ -0,0 +1,65 @@
+import { __assign, __read, __rest } from "tslib";
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { hashClass } from "../../../helpers/hashClassesHelpers";
+import { useTrilogyContext } from "../../../context/index";
+import { Icon } from "../../../components/icon";
+/**
+ * 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 = React.forwardRef(function (props, ref) {
+    var active = props.active, children = props.children, className = props.className, onClick = props.onClick, to = props.to, href = props.href, routerLink = props.routerLink, iconName = props.iconName, disabled = props.disabled, testId = props.testId, others = __rest(props, ["active", "children", "className", "onClick", "to", "href", "routerLink", "iconName", "disabled", "testId"]);
+    var _a = __read(useState(active || false), 2), activeItem = _a[0], setActiveItem = _a[1];
+    var styled = useTrilogyContext().styled;
+    // accessibility
+    var a11y = {
+        a: {
+            "aria-selected": activeItem,
+            "data-tab-navigation": "",
+        },
+    };
+    useEffect(function () {
+        setActiveItem(active || false);
+    }, [active]);
+    var classes = hashClass(styled, clsx("tab", className, { "is-active": activeItem }));
+    if (routerLink && (to || href)) {
+        var RouterLink = (routerLink ? routerLink : "a");
+        return (React.createElement(RouterLink, __assign({ ref: ref, "data-testid": testId, tabIndex: 0 }, a11y.a, { to: to, href: href, className: classes }, others, { onClick: function (e) {
+                if (!disabled) {
+                    var target = e.target;
+                    setActiveItem(active || false);
+                    target.active = active;
+                    if (onClick) {
+                        onClick(e);
+                    }
+                }
+            } }),
+            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: function (e) {
+            if (!disabled) {
+                var target = e.target;
+                setActiveItem(active || false);
+                target.active = active;
+                if (onClick) {
+                    onClick(e);
+                }
+            }
+        } }),
+        React.createElement("div", { className: 'tab-icon' }, iconName && (React.createElement(Icon, { align: 'ALIGNED_CENTER', size: 'small', name: iconName }))),
+        children));
+});
+export default TabsItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFic0l0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaXRlbS9UYWJzSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBQ25ELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4Qzs7Ozs7Ozs7Ozs7OztHQWFHO0FBQ0gsSUFBTSxRQUFRLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQyxVQUFDLEtBQW9CLEVBQUUsR0FBeUI7SUFFOUUsSUFBQSxNQUFNLEdBV0osS0FBSyxPQVhELEVBQ04sUUFBUSxHQVVOLEtBQUssU0FWQyxFQUNSLFNBQVMsR0FTUCxLQUFLLFVBVEUsRUFDVCxPQUFPLEdBUUwsS0FBSyxRQVJBLEVBQ1AsRUFBRSxHQU9BLEtBQUssR0FQTCxFQUNGLElBQUksR0FNRixLQUFLLEtBTkgsRUFDSixVQUFVLEdBS1IsS0FBSyxXQUxHLEVBQ1YsUUFBUSxHQUlOLEtBQUssU0FKQyxFQUNSLFFBQVEsR0FHTixLQUFLLFNBSEMsRUFDUixNQUFNLEdBRUosS0FBSyxPQUZELEVBQ0gsTUFBTSxVQUNQLEtBQUssRUFaSCw0R0FZTCxDQURVLENBQ0Y7SUFFSCxJQUFBLEtBQUEsT0FBOEIsUUFBUSxDQUFVLE1BQU0sSUFBSSxLQUFLLENBQUMsSUFBQSxFQUEvRCxVQUFVLFFBQUEsRUFBRSxhQUFhLFFBQXNDLENBQUE7SUFDOUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsZ0JBQWdCO0lBQ2hCLElBQU0s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

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TabsItemProps } from "./TabsItemProps";
+import { ComponentName } from "../../../components/enumsComponentsName";
+/**
+ * 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
+ */
+declare const TabsItem: {
+    ({ active, children, onClick, iconName, inverted, disabled, ...others }: TabsItemProps): JSX.Element;
+    displayName: ComponentName;
+};
+export default TabsItem;

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 { getColorStyle, TrilogyColor } from "../../../objects/facets/Color";
+import { ComponentName } from "../../../components/enumsComponentsName";
+import { Icon } from "../../../components/icon";
+import { Text, TextLevels } from "../../../components/text";
+/**
+ * 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) {
+    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);
+                }
+            }
+        } }, 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 TabsItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFic0l0ZW0ubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL2l0ZW0vVGFic0l0ZW0ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ2xELE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUzRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUVwRDs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxRQUFRLEdBQUcsVUFBQyxFQVFnQjtJQVBkLElBQUEsTUFBTSxZQUFBLEVBQ04sUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ0wsTUFBTSxjQVBYLHFFQVFDLENBRFU7SUFFM0IsNkRBQTZEO0lBQ3ZELElBQUEsS0FBQSxPQUFvQixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQW5ELGFBQWEsUUFBc0MsQ0FBQTtJQUN0RCxJQUFBLEtBQUEsT0FBbUIsUUFBUSxDQUFVLEtBQUssQ0FBQyxJQUFBLEVBQXhDLFlBQVksUUFBNEIsQ0FBQTtJQUVqRCxJQUFNLG1CQUFtQixHQUFHO1FBQzFCLGlCQUFpQixFQUFFLE1BQU0sSUFBSSxDQUFDLElBQUksQ0FBQztLQUNwQyxDQUFBO0lBRUQsSUFBTSxZQUFZLEdBQUcs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

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { IconName, IconNameValues } from '../../../components/icon';
+import { Accessibility, Clickable, Dev } from '../../../objects';
+/**
+ * Tabs Item Interface
+ */
+export interface TabsItemProps extends Clickable, Accessibility, Dev {
+    children: React.ReactChild;
+    active?: boolean;
+    className?: string;
+    id?: string;
+    tabIndex?: number;
+    to?: string;
+    href?: string;
+    routerLink?: React.ElementType;
+    iconName?: IconNameValues | IconName;
+    disabled?: boolean;
+    inverted?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFic0l0ZW1Qcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9pdGVtL1RhYnNJdGVtUHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9