@trilogy-ds/react 0.0.1-beta.8 → 0.0.3-beta-v4

package/lib/components/segment-control/SegmentControl.native.js

@@ -1,22 +1,22 @@
+import { __assign, __read, __rest } from "tslib";
 import React, { useState } from 'react';
 import { StyleSheet } from 'react-native';
-import { View } from '../view';
-import { Text, TextLevels } from '../text';
+import { View } from '../../components/view';
+import { Text, TextLevels } from '../../components/text';
 import SegmentedControlItem from './item';
-import { mixColors, TrilogyColor } from '../../objects/facets/Color';
-import { ComponentName } from '../enumsComponentsName';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
+import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * SegmentControl Component
- * @param children {ReactNode} Children for SegmentedControl
+ * @param children {ReactNode} Children for SegmentControl
  * @param onClick onClick event
- * @param activeIndex {number} default active SegmentedControl index
- * @param disabled {boolean} disabled SegmentedControl
- * @param inverted {boolean} invert color SegmentedControl
- * @param marginless {boolean} delete margin
+ * @param activeIndex {number} default active SegmentControl index
+ * @param disabled {boolean} disabled SegmentControl
  */
-const SegmentControl = ({ children, onClick, activeIndex, disabled, marginless, inverted, ...others }) => {
-    const [activateIndex, setActivateIndex] = useState(activeIndex || 0);
-    const isActive = (index, childPropsActive) => {
+var SegmentControl = function (_a) {
+    var children = _a.children, onClick = _a.onClick, activeIndex = _a.activeIndex, others = __rest(_a, ["children", "onClick", "activeIndex"]);
+    var _b = __read(useState(activeIndex || 0), 2), activateIndex = _b[0], setActivateIndex = _b[1];
+    var isActive = function (index, childPropsActive) {
         if (typeof childPropsActive !== 'undefined' && !activateIndex) {
             return childPropsActive;
         }
@@ -24,43 +24,37 @@ const SegmentControl = ({ children, onClick, activeIndex, disabled, marginless,
             return true;
         }
     };
-    const toggleActive = (e, index) => {
-        if (disabled) {
-            return false;
-        }
+    var toggleActive = function (e, index) {
         setActivateIndex(index);
         if (onClick) {
             onClick(e);
         }
     };
-    const styles = StyleSheet.create({
+    var styles = StyleSheet.create({
         padding: {
-            paddingLeft: marginless ? 0 : 10,
-            paddingRight: marginless ? 0 : 10,
+            paddingLeft: 10,
+            paddingRight: 10,
         },
         segmentedControl: {
             flexDirection: 'row',
             width: '100%',
-            backgroundColor: mixColors(TrilogyColor.GREY, -96),
+            backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_FADE),
             borderRadius: 4,
             padding: 4,
-            borderWidth: 1,
-            borderColor: mixColors(TrilogyColor.GREY, -80),
             paddingRight: -4,
         },
     });
     return (React.createElement(View, { style: styles.padding },
-        React.createElement(View, { style: styles.segmentedControl, ...others }, children &&
+        React.createElement(View, __assign({ style: styles.segmentedControl }, others), children &&
             Array.isArray(children) &&
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            children.map((child, index) => {
-                const props = {
-                    inverted: Boolean(isActive(index, child.props.active) && inverted) || false,
+            children.map(function (child, index) {
+                var props = {
                     active: Boolean(isActive(index, child.props.active)) || false,
                     disabled: child.props.disabled,
                     key: index,
                     tabIndex: index,
-                    onClick: (event) => {
+                    onClick: function (event) {
                         toggleActive(event, index);
                         if (child) {
                             if (child.props.onClick) {
@@ -70,11 +64,11 @@ const SegmentControl = ({ children, onClick, activeIndex, disabled, marginless,
                     },
                 };
                 if (index < 5) {
-                    return typeof child.valueOf() === 'string' ? (React.createElement(SegmentedControlItem, { disabled: props.disabled, active: props.active, onClick: (e) => onClick === null || onClick === void 0 ? void 0 : onClick(e) },
+                    return typeof child.valueOf() === 'string' ? (React.createElement(SegmentedControlItem, { disabled: props.disabled, active: props.active, onClick: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); } },
                         React.createElement(Text, { level: TextLevels.ONE }, String(child)))) : (React.cloneElement(child, props));
                 }
             }))));
 };
 SegmentControl.displayName = ComponentName.SegmentControl;
 export default SegmentControl;
-//# sourceMappingURL=SegmentControl.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvU2VnbWVudENvbnRyb2wubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLG9CQUFvQixNQUFNLFFBQVEsQ0FBQTtBQUN6QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUFDLEVBQWtFO0lBQWhFLElBQUEsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFLLE1BQU0sY0FBM0Msc0NBQTZDLENBQUY7SUFDM0QsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBQyxXQUFXLElBQUksQ0FBQyxDQUFDLElBQUEsRUFBN0QsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQThCLENBQUE7SUFFcEUsSUFBTSxRQUFRLEdBQUcsVUFBQyxLQUFhLEVBQUUsZ0JBQWlDO1FBQ2hFLElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0QsT0FBTyxnQkFBZ0IsQ0FBQTtTQUN4QjtRQUNELElBQUksS0FBSyxLQUFLLGFBQWEsRUFBRTtZQUMzQixPQUFPLElBQUksQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lB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

package/lib/components/segment-control/SegmentControlProps.d.ts

@@ -1,16 +1,12 @@
 /// <reference types="react" />
-import { Clickable } from './../../objects/facets/Clickable';
-import { Centerable } from '../../objects/facets/Centerable';
-import { AlignableProps } from '../../objects/facets/Alignable';
-import { JustifiableProps } from '../../objects/facets/Justifiable';
+import { Clickable } from '../../objects/facets/Clickable';
+import { CommonProps } from '../../objects/facets/CommonProps';
+import { Alignable, AlignableValues } from '../../objects';
 /**
  * SegmentedControl Interface
  */
-export interface SegmentControlProps extends Centerable, AlignableProps, JustifiableProps, Clickable {
+export interface SegmentControlProps extends Clickable, CommonProps {
     children: React.ReactNode;
-    disabled?: boolean;
     activeIndex?: number;
-    marginless?: boolean;
-    inverted?: boolean;
-    className?: string;
+    align?: Alignable | AlignableValues;
 }

package/lib/components/segment-control/SegmentControlProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=SegmentControlProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xQcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VnbWVudC1jb250cm9sL1NlZ21lbnRDb250cm9sUHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9

package/lib/components/segment-control/SegmentControlPropsDefaults.js

@@ -0,0 +1,56 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "activeIndex": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "number"
+    ]
+  },
+  "align": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/segment-control/index.js

@@ -1,4 +1,4 @@
 import SegmentControl from './SegmentControl';
 import SegmentControlItem from './item';
 export { SegmentControl, SegmentControlItem };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGNBQWMsTUFBTSxrQkFBa0IsQ0FBQTtBQUM3QyxPQUFPLGtCQUFrQixNQUFNLFFBQVEsQ0FBQTtBQUV2QyxPQUFPLEVBQUUsY0FBYyxFQUFFLGtCQUFrQixFQUFFLENBQUEifQ==

package/lib/components/segment-control/item/SegmentControlItem.d.ts

@@ -7,6 +7,8 @@ import { SegmentControlItemProps } from './SegmentControlItemProps';
  * @param onClick onClick Event
  * @param disabled {boolean} disable onClick on item
  * @param inverted {boolean} invert color of active item
+ * - -------------- WEB PROPERTIES ---------------
+ * @param className {string} Additionnal CSS Classes
  */
-declare const SegmentControlItem: ({ active, onClick, disabled, className, children, }: SegmentControlItemProps) => JSX.Element;
+declare const SegmentControlItem: ({ active, onClick, disabled, className, id, children, }: SegmentControlItemProps) => JSX.Element;
 export default SegmentControlItem;

package/lib/components/segment-control/item/SegmentControlItem.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { __read } from "tslib";
+import React, { useEffect, useState } from 'react';
 import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
 import { useTrilogyContext } from '../../../context';
@@ -9,15 +10,18 @@ import { useTrilogyContext } from '../../../context';
  * @param onClick onClick Event
  * @param disabled {boolean} disable onClick on item
  * @param inverted {boolean} invert color of active item
+ * - -------------- WEB PROPERTIES ---------------
+ * @param className {string} Additionnal CSS Classes
  */
-const SegmentControlItem = ({ active, onClick, disabled, className, children, }) => {
-    const [activeItem, setActiveItem] = useState(active || false);
-    const { styled } = useTrilogyContext();
-    useEffect(() => {
+var SegmentControlItem = function (_a) {
+    var active = _a.active, onClick = _a.onClick, disabled = _a.disabled, className = _a.className, id = _a.id, children = _a.children;
+    var _b = __read(useState(active || false), 2), activeItem = _b[0], setActiveItem = _b[1];
+    var styled = useTrilogyContext().styled;
+    useEffect(function () {
         setActiveItem(active || false);
     }, [active]);
-    return (React.createElement("button", { disabled: disabled, className: hashClass(styled, clsx('segmented-control-item', className, { 'is-active': activeItem })), onClick: (e) => {
-            const target = e.target;
+    return (React.createElement("button", { id: id, disabled: disabled, className: hashClass(styled, clsx('segmented-control-item', className, { 'is-active': activeItem })), onClick: function (e) {
+            var target = e.target;
             setActiveItem(active || false);
             target.active = active;
             if (onClick) {
@@ -26,4 +30,4 @@ const SegmentControlItem = ({ active, onClick, disabled, className, children, })
         } }, children));
 };
 export default SegmentControlItem;
-//# sourceMappingURL=SegmentControlItem.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9TZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sa0JBQWtCLEdBQUcsVUFBQyxFQU9GO1FBTnhCLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLFFBQVEsY0FBQTtJQUVGLElBQUEsS0FBQSxPQUE4QixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBc0MsQ0FBQTtJQUM5RCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxTQUFTLENBQUM7UUFDUixhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO0lBQ2hDLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUE7SUFFWixPQUFPLENBQ0wsZ0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsd0JBQXdCLEVBQUUsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUMsRUFDcEcsT0FBTyxFQUFFLFVBQUMsQ0FBbUI7WUFDM0IsSUFBTSxNQUFNLEdBQUcsQ0FBQyxDQUFDLE1BQXlCLENBQUE7WUFDMUMsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtZQUM5QixNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQTtZQUN0QixJQUFJLE9BQU8sRUFBRTtnQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7YUFDWDtRQUNILENBQUMsSUFFQSxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxrQkFBa0IsQ0FBQSJ9

package/lib/components/segment-control/item/SegmentControlItem.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SegmentControlItemProps } from './SegmentControlItemProps';
-import { ComponentName } from '../../enumsComponentsName';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * SegmentControlItem Item Component
  * @param active {boolean} active Segment Control item
@@ -10,7 +10,7 @@ import { ComponentName } from '../../enumsComponentsName';
  * @param inverted {boolean} invert color of active item
  */
 declare const SegmentControlItem: {
-    ({ active, children, onClick, inverted, disabled, ...others }: SegmentControlItemProps): JSX.Element;
+    ({ active, children, onClick, disabled, ...others }: SegmentControlItemProps): JSX.Element;
     displayName: ComponentName;
 };
 export default SegmentControlItem;

package/lib/components/segment-control/item/SegmentControlItem.native.js

@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { __assign, __read, __rest } from "tslib";
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
-import { ComponentName } from '../../enumsComponentsName';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * SegmentControlItem Item Component
  * @param active {boolean} active Segment Control item
@@ -10,25 +11,25 @@ import { ComponentName } from '../../enumsComponentsName';
  * @param disabled {boolean} disable onClick on item
  * @param inverted {boolean} invert color of active item
  */
-const SegmentControlItem = ({ active, children, onClick, inverted, disabled, ...others }) => {
-    const [activeItem, setActiveItem] = useState(active || false);
-    const styles = StyleSheet.create({
+var SegmentControlItem = function (_a) {
+    var active = _a.active, children = _a.children, onClick = _a.onClick, disabled = _a.disabled, others = __rest(_a, ["active", "children", "onClick", "disabled"]);
+    var _b = __read(useState(active || false), 2), activeItem = _b[0], setActiveItem = _b[1];
+    var styles = StyleSheet.create({
         tabsItem: {
             flexDirection: 'column',
             flex: 1,
             marginRight: 4,
             borderRadius: 4,
             alignItems: 'center',
-            backgroundColor: (activeItem && getColorStyle(TrilogyColor.SECONDARY)) ||
-                (inverted && getColorStyle(TrilogyColor.WHITE)) ||
-                (disabled && getColorStyle(TrilogyColor.GREY_DISABLED)) ||
-                getColorStyle(TrilogyColor.GREY_LIGHT),
+            backgroundColor: (activeItem && getColorStyle(TrilogyColor.MAIN)) ||
+                (disabled && getColorStyle(TrilogyColor.DISABLED_FADE)) ||
+                getColorStyle(TrilogyColor.NEUTRAL_FADE),
         },
         text: {
             paddingHorizontal: 16,
-            color: (activeItem && !inverted && getColorStyle(TrilogyColor.WHITE)) ||
-                (!activeItem && !inverted && disabled && getColorStyle(TrilogyColor.GREY_DISABLED)) ||
-                getColorStyle(TrilogyColor.TERTIARY),
+            color: (activeItem && getColorStyle(TrilogyColor.BACKGROUND)) ||
+                (!activeItem && disabled && getColorStyle(TrilogyColor.DISABLED)) ||
+                getColorStyle(TrilogyColor.MAIN),
             marginVertical: 10,
             fontSize: 16,
             textAlign: 'center',
@@ -36,18 +37,18 @@ const SegmentControlItem = ({ active, children, onClick, inverted, disabled, ...
             fontWeight: activeItem ? '600' : 'normal',
         },
     });
-    useEffect(() => {
+    useEffect(function () {
         setActiveItem(active || false);
     }, [active]);
-    return (React.createElement(TouchableOpacity, { disabled: disabled, style: [styles.tabsItem], onPress: (e) => {
+    return (React.createElement(TouchableOpacity, __assign({ disabled: disabled, style: [styles.tabsItem], onPress: function (e) {
             if (!disabled) {
                 setActiveItem(active || false);
                 if (onClick) {
                     onClick(e);
                 }
             }
-        }, ...others }, children && typeof children.valueOf() === 'string' && (React.createElement(Text, { style: styles.text, ellipsizeMode: 'tail', numberOfLines: 1 }, String(children)))));
+        } }, others), children && typeof children.valueOf() === 'string' && (React.createElement(Text, { style: styles.text, ellipsizeMode: 'tail', numberOfLines: 1 }, String(children)))));
 };
 SegmentControlItem.displayName = ComponentName.SegmentControlItem;
 export default SegmentControlItem;
-//# sourceMappingURL=SegmentControlItem.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VnbWVudC1jb250cm9sL2l0ZW0vU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUVqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxrQkFBa0IsR0FBRyxVQUFDLEVBTUY7SUFMeEIsSUFBQSxNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDTCxNQUFNLGNBTGlCLDZDQU0zQixDQURVO0lBRUgsSUFBQSxLQUFBLE9BQThCLFFBQVEsQ0FBVSxNQUFNLElBQUksS0FBSyxDQUFDLElBQUEsRUFBL0QsVUFBVSxRQUFBLEVBQUUsYUFBYSxRQUFzQyxDQUFBO0lBRXRFLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsUUFBUSxFQUFFO1lBQ1IsYUFBYSxFQUFFLFFBQVE7WUFDdkIsSUFBSSxFQUFFLENBQUM7WUFDUCxXQUFXLEVBQUUsQ0FBQztZQUNkLFlBQVksRUFBRSxDQUFDO1lBQ2YsVUFBVSxFQUFFLFFBQVE7WUFDcEIsZUFBZSxFQUNiLENBQUMsVUFBVSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ2hELENBQUMsUUFBUSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLENBQUM7Z0JBQ3ZELGFBQWEsQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDO1NBQzNDO1FBQ0QsSUFBSSxFQUFFO1lBQ0osaUJBQWlCLEVBQUUsRUFBRTtZQUNyQixLQUFLLEVBQ0gsQ0FBQyxVQUFVLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsQ0FBQztnQkFDdEQsQ0FBQyxDQUFDLFVBQVUsSUFBSSxRQUFRLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztnQkFDakUsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDbEMsY0FBYyxFQUFFLEVBQUU7WUFDbEIsUUFBUSxFQUFFLEVBQUU7WUFDWixTQUFTLEVBQUUsUUFBUTtZQUNuQixpQkFBaUIsRUFBRSxRQUFRO1lBQzNCLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsUUFBUTtTQUMxQztLQUNGLENBQUMsQ0FBQTtJQUVGLFNBQVMsQ0FBQztRQUNSLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7SUFDaEMsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtJQUVaLE9BQU8sQ0FDTCxvQkFBQyxnQkFBZ0IsYUFDZixRQUFRLEVBQUUsUUFBUSxFQUNsQixLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEVBQ3hCLE9BQU8sRUFBRSxVQUFDLENBQVc7WUFDbkIsSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDYixhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO2dCQUM5QixJQUFJLE9BQU8sRUFBRTtvQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7aUJBQ1g7YUFDRjtRQUNILENBQUMsSUFDRyxNQUFNLEdBRVQsUUFBUSxJQUFJLE9BQU8sUUFBUSxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsSUFBSSxDQUNyRCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxhQUFhLEVBQUUsQ0FBQyxJQUM5RCxNQUFNLENBQUMsUUFBUSxDQUFDLENBQ1osQ0FDUixDQUNnQixDQUNwQixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsa0JBQWtCLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQTtBQUVqRSxlQUFlLGtCQUFrQixDQUFBIn0=

package/lib/components/segment-control/item/SegmentControlItemProps.d.ts

@@ -1,13 +1,11 @@
 /// <reference types="react" />
 import { Clickable } from '../../../objects';
+import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * SegmentedControl Item Interface
  */
-export interface SegmentControlItemProps extends Clickable {
-    children: React.ReactChild;
+export interface SegmentControlItemProps extends Clickable, CommonProps {
+    children: React.ReactNode;
     active?: boolean;
     disabled?: boolean;
-    inverted?: boolean;
-    className?: string;
-    id?: string;
 }

package/lib/components/segment-control/item/SegmentControlItemProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=SegmentControlItemProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtUHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9pdGVtL1NlZ21lbnRDb250cm9sSXRlbVByb3BzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==

package/lib/components/segment-control/item/SegmentControlItemPropsDefaults.js

@@ -0,0 +1,53 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "active": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/segment-control/item/index.js

@@ -1,3 +1,3 @@
 import SegmentControlItem from './SegmentControlItem';
 export default SegmentControlItem;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9pdGVtL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sa0JBQWtCLE1BQU0sc0JBQXNCLENBQUE7QUFFckQsZUFBZSxrQkFBa0IsQ0FBQSJ9

package/lib/components/select/ISelectOptionDefaults.js

@@ -0,0 +1,23 @@
+export default {
+  "value": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "name": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/select/Select.d.ts

@@ -3,23 +3,9 @@ import { SelectProps } from './SelectProps';
 /**
  * Select Component
  * @param children {React.ReactNode} Children for Select
- * @param id {string} Select id
- * @param name {string} Select name
- * @param label {string} Select label
- * @param onChange {Function} onChange Event
- * @param selected {string|number} Selected OptionItem for Native
- * @param iconName {IconName} icon for left of selector
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
- * @param classNameOptions {string} Additionnal CSS Classes for wrapper option
- * @param nullable {boolean} Unselect Select Option Item
- * @param disabled {boolean} disable Select
- * @param onBlur {Function} onBlur Event
- * @param onFocus {Function} onFocus Event
- * @param testId {string} id for testing
  * @param native {boolean} Display native-old select web
  *  * - -------------------------- NATIVE PROPERTIES -------------------------------
- * @param placeholder {string} Select Placeholder
  */
-declare const Select: ({ children, className, label, onChange, disabled, onBlur, onFocus, id, name, iconName, classNameOptions, nullable, testId, selected, native, ...others }: SelectProps) => JSX.Element;
+declare const Select: ({ native, ...props }: SelectProps) => JSX.Element;
 export default Select;

package/lib/components/select/Select.js

@@ -1,42 +1,18 @@
-import React from 'react';
-import clsx from 'clsx';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
-import { SelectNative, SelectDynamic } from './web';
-import SelectNativeOption from './option/SelectNativeOption';
+import { __assign, __rest } from "tslib";
+import * as React from 'react';
+import { SelectDynamic, SelectNative } from './web';
 /**
  * Select Component
  * @param children {React.ReactNode} Children for Select
- * @param id {string} Select id
- * @param name {string} Select name
- * @param label {string} Select label
- * @param onChange {Function} onChange Event
- * @param selected {string|number} Selected OptionItem for Native
- * @param iconName {IconName} icon for left of selector
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
- * @param classNameOptions {string} Additionnal CSS Classes for wrapper option
- * @param nullable {boolean} Unselect Select Option Item
- * @param disabled {boolean} disable Select
- * @param onBlur {Function} onBlur Event
- * @param onFocus {Function} onFocus Event
- * @param testId {string} id for testing
  * @param native {boolean} Display native-old select web
  *  * - -------------------------- NATIVE PROPERTIES -------------------------------
- * @param placeholder {string} Select Placeholder
  */
-const Select = ({ children, className, label, onChange, disabled, onBlur, onFocus, id, name, iconName, classNameOptions, nullable, testId, selected, native, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const selecteClasses = React.useMemo(() => hashClass(styled, clsx('select', disabled && 'select-disabled', iconName && 'has-icon', native && 'select-native', className)), [styled, disabled, iconName, className]);
-    if (native) {
-        return (React.createElement(SelectNative, { selecteClasses: selecteClasses, onChange: onChange, onFocus: onFocus, onBlur: onBlur, id: id, name: name, disabled: disabled, label: label, iconName: iconName, styled: styled, testId: testId, selected: selected, ...others }, React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                return React.createElement(SelectNativeOption, { ...child.props });
-            }
-            return null;
-        })));
-    }
-    return (React.createElement(SelectDynamic, { styled: styled, onChange: onChange, nullable: nullable, disabled: disabled, onFocus: onFocus, onBlur: onBlur, selected: selected, name: name, id: id, testId: testId, classNameOptions: classNameOptions, selecteClasses: selecteClasses, label: label, iconName: iconName, ...others }, children));
+var Select = function (_a) {
+    var native = _a.native, props = __rest(_a, ["native"]);
+    if (native)
+        return React.createElement(SelectNative, __assign({}, props));
+    return React.createElement(SelectDynamic, __assign({}, props));
 };
 export default Select;
-//# sourceMappingURL=Select.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWxlY3QvU2VsZWN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUIsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFbkQ7Ozs7OztHQU1HO0FBQ0gsSUFBTSxNQUFNLEdBQUcsVUFBQyxFQUFpQztJQUEvQixJQUFBLE1BQU0sWUFBQSxFQUFLLEtBQUssY0FBbEIsVUFBb0IsQ0FBRjtJQUNoQyxJQUFJLE1BQU07UUFBRSxPQUFPLG9CQUFDLFlBQVksZUFBSyxLQUFLLEVBQUksQ0FBQTtJQUM5QyxPQUFPLG9CQUFDLGFBQWEsZUFBSyxLQUFLLEVBQUksQ0FBQTtBQUNyQyxDQUFDLENBQUE7QUFFRCxlQUFlLE1BQU0sQ0FBQSJ9

package/lib/components/select/Select.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { ComponentName } from '../../components/enumsComponentsName';
 import { SelectProps } from './SelectProps';
-import { ComponentName } from '../enumsComponentsName';
 /**
  * Select Component
  * @param id {string} Select id
@@ -9,10 +9,13 @@ import { ComponentName } from '../enumsComponentsName';
  * @param children {React.ReactNode} Children for Select
  * @param label {string} label for select
  * @param iconName {IconName} icon for left of selector
- * @param placeholder {string} Select Placeholder
+ * @param onChange {Function} onChange Event
+ * @param disabled {boolean} disable Select
+ * @param multiple {boolean} select multiple options
+ * @param nullable {boolean} Unselect Select Option Item
  */
 declare const Select: {
-    ({ children, name, id, selected, label, iconName, onChange, placeholder, disabled, ...others }: SelectProps): JSX.Element;
+    ({ children, id, selected, label, iconName, onChange, disabled, multiple, ...others }: SelectProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Select;