@trilogy-ds/react 0.0.1-beta-sc-2 → 0.0.1-beta-151

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

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

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

@@ -58,6 +58,8 @@ export default {
       "INFO",
       "WARNING",
       "ERROR",
+      "MAIN",
+      "ACCENT",
       "WHITE",
       "MAIN",
       "MAIN_FADE",
@@ -76,9 +78,7 @@ 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 '../../../components/table/tr/TableTr';
+import TableTr from './TableTr';
 export default TableTr;

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

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

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

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

package/lib/components/tabs/Tabs.js

@@ -1,10 +1,9 @@
-import { __assign, __rest } from "tslib";
+import { __read, __rest } from "tslib";
 import clsx from 'clsx';
-import React from 'react';
-import { ComponentName } from '../../components/enumsComponentsName';
-import { useTabs } from '../../components/tabs/hook/useTabs';
+import React, { useEffect, useState } from 'react';
+import { useTrilogyContext } from '../../context/index';
 import { hashClass } from '../../helpers/hashClassesHelpers';
-import { has, is } from '../../services/classify';
+import { is } from '../../services/classify';
 /**
  * Tabs Component
  * @param children {ReactNode} Children for tabs
@@ -12,35 +11,20 @@ import { has, 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 = React.forwardRef(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);
-            }
-        }))));
-});
-Tabs.displayName = ComponentName.Tabs;
+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 styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('tabs', fullwidth && is('fullwidth'), className));
+    useEffect(function () {
+        setActivateIndex(activateIndex);
+    }, [activeIndex]);
+    return (React.createElement("div", { id: id, className: classes, "data-tabs-context": "" }, children));
+};
 export default Tabs;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9UYWJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdDQUFnQyxDQUFBO0FBRXhELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRTdDOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQUNILElBQU0sSUFBSSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzNCLFVBQ0UsRUFlWSxFQUNaLEdBQW9DO0lBZmxDLElBQUEsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsT0FBTyxhQUFBLEVBQ1AsV0FBVyxpQkFBQSxFQUNYLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLFVBQVUsZ0JBQUEsRUFDVixRQUFRLGNBQUEsRUFDUixVQUFVLGdCQUFBLEVBQ1YsU0FBUyxlQUFBLEVBQ1QsTUFBTSxZQUFBLEVBQ0gsTUFBTSxjQWRYLGdLQWVDLENBRFU7SUFJTCxJQUFBLEtBQTRCLE9BQU8sQ0FBQyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsT0FBTyxTQUFBLEVBQUUsUUFBUSxVQUFBLEVBQUUsQ0FBQyxFQUFuRixRQUFRLGNBQUEsRUFBRSxXQUFXLGlCQUE4RCxDQUFBO0lBRTNGLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsSUFBSSxDQUFDLE1BQU0sRUFBRSxTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUFFLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQUUsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FDbEgsQ0FBQTtJQUVELE9BQU8sQ0FDTCw2QkFDRSxHQUFHLEVBQUUsR0FBRyxFQUNSLFNBQVMsRUFBRSxTQUFTLENBQ2xCLElBQUksQ0FDRixhQUFhLEVBQ2IsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsS0FBSyxJQUFJLEdBQUcsQ0FBQyxlQUFRLEtBQUssQ0FBRSxDQUFDLEVBQzdCLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQzlCLFNBQVMsSUFBSSxTQUFTLENBQ3ZCLENBQ0YsdUJBQ2lCLEVBQUUsaUJBQ1AsTUFBTTtRQUVuQixzQ0FBSyxTQUFTLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBQyxTQUFTLElBQUssTUFBTSxHQUMvQyxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsVUFBQyxLQUFLLEVBQUUsS0FBSztZQUN6QyxJQUFJLEtBQUssQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQy9CLElBQU0sTUFBTSxHQUFHLE9BQU8sQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUMsSUFBSSxLQUFLLENBQUE7Z0JBQ3BFLElBQU0sR0FBRyxHQUFHLEtBQUssQ0FBQTtnQkFDakIsSUFBTSxLQUFLLEdBQUc7b0JBQ1osTUFBTSxRQUFBO29CQUNOLEdBQUcsS0FBQTtvQkFDSCxPQUFPLEVBQUUsVUFBQyxDQUFtQixJQUFLLE9BQUEsV0FBVyxJQUFJLFdBQVcsQ0FBQyxDQUFDLEVBQUUsS0FBSyxFQUFFLEtBQUssQ0FBQyxFQUEzQyxDQUEyQztpQkFDOUUsQ0FBQTtnQkFDRCxPQUFPLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFBO2FBQ3hDO1FBQ0gsQ0FBQyxDQUFDLENBQ0UsQ0FDRixDQUNQLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELElBQUksQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLElBQUksQ0FBQTtBQUNyQyxlQUFlLElBQUksQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy9UYWJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBR3hDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsVUFBQyxFQUFtRztJQUFqRyxJQUFBLFFBQVEsY0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFdBQVcsaUJBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXRGLDJGQUF3RixDQUFGO0lBQzVGLElBQUEsS0FBQSxPQUFvQyxRQUFRLENBQVMsV0FBVyxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQXJFLGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUFzQyxDQUFBO0lBQ3BFLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRSxTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFeEYsU0FBUyxDQUFDO1FBQ1IsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLENBQUE7SUFDakMsQ0FBQyxFQUFFLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQTtJQUVqQixPQUFPLENBQ0wsNkJBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyx1QkFBb0IsRUFBRSxJQUNsRCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxJQUFJLENBQUEifQ==

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

@@ -1,22 +1,12 @@
 /// <reference types="react" />
-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';
+import { Accessibility, AlignableProps, Clickable, Dev } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Tabs Interface
  */
-export interface TabsProps extends Centerable, JustifiableProps, Clickable, Accessibility, Dev {
+export interface TabsProps extends AlignableProps, Clickable, Accessibility, Dev, CommonProps {
     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,14 +13,6 @@ export default {
       "ReactPortal"
     ]
   },
-  "disabled": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
   "activeIndex": {
     "type": "string",
     "values": [
@@ -36,21 +28,6 @@ export default {
       "true"
     ]
   },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "marginless": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
   "inverted": {
     "type": "boolean",
     "values": [
@@ -60,73 +37,58 @@ export default {
     ]
   },
   "align": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "center",
-      "left",
-      "right"
-    ]
-  },
-  "shadowless": {
-    "type": "boolean",
+    "type": "enum",
     "values": [
       "undefined",
-      "false",
-      "true"
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
     ]
   },
-  "textAlign": {
+  "verticalAlign": {
     "type": "enum",
     "values": [
       "undefined",
-      "has-text-centered",
-      "has-text-justified",
-      "has-text-left",
-      "has-text-right",
-      "has-text-centered",
-      "has-text-justified",
-      "has-text-left",
-      "has-text-right"
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
     ]
   },
-  "centered": {
-    "type": "boolean",
+  "onClick": {
+    "type": "function",
     "values": [
       "undefined",
-      "false",
-      "true"
+      "ClickEvent"
     ]
   },
-  "justify": {
-    "type": "enum",
+  "accessibilityLabel": {
+    "type": "string",
     "values": [
       "undefined",
-      "justified-center",
-      "justified-start",
-      "justified-end",
-      "space-between",
-      "JUSTIFIED_CENTER",
-      "JUSTIFIED_START",
-      "JUSTIFIED_END",
-      "SPACE_BETWEEN"
+      "string"
     ]
   },
-  "onClick": {
-    "type": "function",
+  "testId": {
+    "type": "string",
     "values": [
       "undefined",
-      "ClickEvent"
+      "string"
     ]
   },
-  "accessibilityLabel": {
+  "id": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "testId": {
+  "className": {
     "type": "string",
     "values": [
       "undefined",

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

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

package/lib/components/tabs/index.js

@@ -1,3 +1,7 @@
-export { default as TabsItem } from '../../components/tabs/item/TabsItem';
-export { default as Tabs } from '../../components/tabs/Tabs';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxRQUFRLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQTtBQUNyRSxPQUFPLEVBQUUsT0FBTyxJQUFJLElBQUksRUFBRSxNQUFNLHdCQUF3QixDQUFBIn0=
+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==

package/lib/components/tabs/tab-list/TabList.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TabListProps } from './TabListProps';
+/**
+ * Tabs Nav Component
+ * @param children {ReactChild} React Child Element
+ * @param className
+ * @param id
+ * @param testId
+ * @param align
+ * @param others
+ */
+declare const TabList: ({ children, className, id, testId, align, ...others }: TabListProps) => React.JSX.Element;
+export default TabList;

package/lib/components/tabs/tab-list/TabList.js

@@ -0,0 +1,24 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { hashClass } from '../../../helpers';
+import clsx from 'clsx';
+import { useTrilogyContext } from '../../../context';
+import { getAlignClassName } from '../../../objects';
+import { is } from '../../../services';
+/**
+ * Tabs Nav Component
+ * @param children {ReactChild} React Child Element
+ * @param className
+ * @param id
+ * @param testId
+ * @param align
+ * @param others
+ */
+var TabList = function (_a) {
+    var children = _a.children, className = _a.className, id = _a.id, testId = _a.testId, align = _a.align, others = __rest(_a, ["children", "className", "id", "testId", "align"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('tab-list', align && is(getAlignClassName(align)), className));
+    return (React.createElement("div", __assign({ id: id, "data-testid": testId, className: classes }, others), children));
+};
+export default TabList;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiTGlzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy90YWItbGlzdC9UYWJMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUUvQjs7Ozs7Ozs7R0FRRztBQUNILElBQU0sT0FBTyxHQUFHLFVBQUMsRUFBbUU7SUFBakUsSUFBQSxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxNQUFNLFlBQUEsRUFBRSxLQUFLLFdBQUEsRUFBSyxNQUFNLGNBQW5ELGtEQUFxRCxDQUFGO0lBQzFELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFVBQVUsRUFBRSxLQUFLLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUVyRyxPQUFPLENBQ0wsc0NBQUssRUFBRSxFQUFFLEVBQUUsaUJBQWUsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxHQUM3RCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxPQUFPLENBQUEifQ==

package/lib/components/tabs/tab-list/TabListProps.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Alignable, AlignableValues, Dev } from '../../../objects';
+import { CommonProps } from '../../../objects/facets/CommonProps';
+/**
+ * Tabs Item Interface
+ */
+export interface TabListProps extends Dev, CommonProps {
+    children: React.ReactNode;
+    align?: Alignable | AlignableValues;
+}

package/lib/components/tabs/tab-list/TabListProps.js

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

package/lib/components/{progress/item/ProgressItemPropsDefaults.js → tabs/tab-list/TabListPropsDefaults.js}

@@ -13,45 +13,25 @@ export default {
       "ReactPortal"
     ]
   },
-  "percent": {
-    "type": "string",
-    "values": []
-  },
-  "minPercent": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "number"
-    ]
-  },
-  "maxPercent": {
-    "type": "string",
+  "align": {
+    "type": "enum",
     "values": [
       "undefined",
-      "number"
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
     ]
   },
-  "className": {
+  "testId": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "status": {
-    "type": "enum",
-    "values": [
-      "undefined",
-      "SUCCESS",
-      "INFO",
-      "WARNING",
-      "ERROR",
-      "SUCCESS",
-      "INFO",
-      "WARNING",
-      "ERROR"
-    ]
-  },
   "id": {
     "type": "string",
     "values": [
@@ -59,7 +39,7 @@ export default {
       "string"
     ]
   },
-  "accessibilityLabel": {
+  "className": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/tabs/tab-list/index.d.ts

@@ -0,0 +1,2 @@
+import TabList from './TabList';
+export default TabList;

package/lib/components/tabs/tab-list/index.js

@@ -0,0 +1,3 @@
+import TabList from './TabList';
+export default TabList;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvdGFiLWxpc3QvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxPQUFPLE1BQU0sV0FBVyxDQUFBO0FBRS9CLGVBQWUsT0FBTyxDQUFBIn0=

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

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

package/lib/components/tabs/tab-list/tab/Tab.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 Tab = function (_a) {
+    var active = _a.active, className = _a.className, onClick = _a.onClick, to = _a.to, href = _a.href, routerLink = _a.routerLink, iconName = _a.iconName, label = _a.label, disabled = _a.disabled, testId = _a.testId, others = __rest(_a, ["active", "className", "onClick", "to", "href", "routerLink", "iconName", "label", "disabled", "testId"]);
+    var _b = __read(useState(active || false), 2), activeItem = _b[0], setActiveItem = _b[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({ "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 })),
+            label && label));
+    }
+    return (React.createElement("button", __assign({ "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 })),
+        label && label));
+};
+export default Tab;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1saXN0L3RhYi9UYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBRWxELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFeEM7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sR0FBRyxHQUFHLFVBQUMsRUFZVztJQVhULElBQUEsTUFBTSxZQUFBLEVBQ04sU0FBUyxlQUFBLEVBQ1QsT0FBTyxhQUFBLEVBQ1AsRUFBRSxRQUFBLEVBQ0YsSUFBSSxVQUFBLEVBQ0osVUFBVSxnQkFBQSxFQUNWLFFBQVEsY0FBQSxFQUNSLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQSxFQUNILE1BQU0sY0FYWCx5R0FZQyxDQURVO0lBR2hCLElBQUEsS0FBQSxPQUE4QixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBc0MsQ0FBQTtJQUM5RCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxnQkFBZ0I7SUFDaEIsSUFBTSxJQUFJLEdBQUc7UUFDWCxDQUFDLEVBQUU7WUFDRCxlQUFlLEVBQUUsVUFBVTtZQUMzQixxQkFBcUIsRUFBRSxFQUFFO1NBQzFCO0tBQ0YsQ0FBQTtJQUVELFNBQVMsQ0FBQztRQUNSLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7SUFDaEMsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtJQUVaLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxTQUFTLEVBQUUsRUFBRSxXQUFXLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQyxDQUFBO0lBRXRGLElBQUksVUFBVSxJQUFJLENBQUMsRUFBRSxJQUFJLElBQUksQ0FBQyxFQUFFO1FBQzlCLElBQU0sVUFBVSxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBc0IsQ0FBQTtRQUN2RSxPQUFPLENBQ0wsb0JBQUMsVUFBVSw0QkFDSSxNQUFNLEVBQ25CLFFBQVEsRUFBRSxDQUFDLElBQ1AsSUFBSSxDQUFDLENBQUMsSUFDVixFQUFFLEVBQUUsRUFBRSxFQUNOLElBQUksRUFBRSxJQUFJLEVBQ1YsU0FBUyxFQUFFLE9BQU8sSUFDZCxNQUFNLElBQ1YsT0FBTyxFQUFFLFVBQUMsQ0FBbUI7Z0JBQzNCLElBQUksQ0FBQyxRQUFRLEVBQUU7b0JBQ2IsSUFBTSxNQUFNLEdBQUcsQ0FBQyxDQUFDLE1BQXlCLENBQUE7b0JBQzFDLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7b0JBQzlCLE1BQU0sQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFBO29CQUN0QixJQUFJLE9BQU8sRUFBRTt3QkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7cUJBQ1g7aUJBQ0Y7WUFDSCxDQUFDO1lBRUQsNkJBQUssU0FBUyxFQUFDLFVBQVUsSUFBRSxRQUFRLElBQUksb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBQyxnQkFBZ0IsRUFBQyxJQUFJLEVBQUMsT0FBTyxFQUFDLElBQUksRUFBRSxRQUFRLEdBQUksQ0FBTztZQUN6RyxLQUFLLElBQUksS0FBSyxDQUNKLENBQ2QsQ0FBQTtLQUNGO0lBRUQsT0FBTyxDQUNMLDBEQUNpQixRQUFRLEVBQ3ZCLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFNBQVMsRUFBRSxPQUFPLEVBQ2xCLElBQUksRUFBQyxLQUFLLGlCQUNHLE1BQU0sSUFDZixJQUFJLENBQUMsQ0FBQyxFQUNOLE1BQU0sSUFDVixPQUFPLEVBQUUsVUFBQyxDQUFtQjtZQUMzQixJQUFJLENBQUMsUUFBUSxFQUFFO2dCQUNiLElBQU0sTUFBTSxHQUFHLENBQUMsQ0FBQyxNQUF5QixDQUFBO2dCQUMxQyxhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO2dCQUM5QixNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQTtnQkFDdEIsSUFBSSxPQUFPLEVBQUU7b0JBQ1gsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO2lCQUNYO2FBQ0Y7UUFDSCxDQUFDO1FBRUQsNkJBQUssU0FBUyxFQUFDLFVBQVUsSUFBRSxRQUFRLElBQUksb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBQyxnQkFBZ0IsRUFBQyxJQUFJLEVBQUMsT0FBTyxFQUFDLElBQUksRUFBRSxRQUFRLEdBQUksQ0FBTztRQUN6RyxLQUFLLElBQUksS0FBSyxDQUNSLENBQ1YsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsR0FBRyxDQUFBIn0=

package/lib/components/tabs/tab-list/tab/TabProps.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { IconName, IconNameValues } from '../../../../components/icon';
+import { Accessibility, Clickable, Dev } from '../../../../objects';
+import { CommonProps } from '../../../../objects/facets/CommonProps';
+/**
+ * Tabs Item Interface
+ */
+export interface TabProps extends Clickable, Accessibility, Dev, CommonProps {
+    active?: boolean;
+    to?: string;
+    href?: string;
+    routerLink?: React.ElementType;
+    iconName?: IconNameValues | IconName;
+    label?: string;
+    disabled?: boolean;
+}

package/lib/components/tabs/tab-list/tab/TabProps.js

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

package/lib/components/tabs/{item/TabsItemPropsDefaults.js → tab-list/tab/TabPropsDefaults.js}

@@ -1,12 +1,4 @@
 export default {
-  "children": {
-    "type": "react",
-    "values": [
-      "string",
-      "number",
-      "JSXElementConstructor<any>>"
-    ]
-  },
   "active": {
     "type": "boolean",
     "values": [
@@ -15,27 +7,6 @@ export default {
       "true"
     ]
   },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "tabIndex": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "number"
-    ]
-  },
   "to": {
     "type": "string",
     "values": [
@@ -288,15 +259,14 @@ export default {
       "tri-picto-payment-visa"
     ]
   },
-  "disabled": {
-    "type": "boolean",
+  "label": {
+    "type": "string",
     "values": [
       "undefined",
-      "false",
-      "true"
+      "string"
     ]
   },
-  "inverted": {
+  "disabled": {
     "type": "boolean",
     "values": [
       "undefined",
@@ -324,5 +294,19 @@ export default {
       "undefined",
       "string"
     ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };