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

package/lib/components/scroll-view/index.js

@@ -1,3 +1,2 @@
-import ScrollView from './ScrollView';
-export { ScrollView };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Njcm9sbC12aWV3L2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sVUFBVSxNQUFNLGNBQWMsQ0FBQTtBQUVyQyxPQUFPLEVBQUUsVUFBVSxFQUFFLENBQUEifQ==
+export { default as ScrollView } from '../../components/scroll-view/ScrollView';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Njcm9sbC12aWV3L2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLElBQUksVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUEifQ==

package/lib/components/section/Section.d.ts

@@ -1,19 +1,4 @@
 import React from 'react';
-import { SectionProps } from './SectionProps';
-/**
- * Section Component - Manages the main margins of the page and takes up all the available width.
- * @param children {React.ReactNode}
- * @param backgroundColor {TrilogyColor} Section Background Color
- * @param backgroundSrc {string} Source of background Image
- * @param paddingless {boolean} remove padding
- * @param verticalPaddingless {boolean} remove vertical padding
- * @param fullwidth {boolean} Fullwidth section
- * - -------------- WEB PROPERTIES ---------------
- * @param className {string} Additionnal CSS Classes
- * @param inverted {boolean} Inverted Section Color
- * @param skeleton {boolean} Skeleton before loaded
- * - -------------- NATIVE PROPERTIES ---------------
- * @param autolayout {boolean} Apply auto-layout rules
- **/
-declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;
-export default Section;
+import { SectionProps } from '../../components/section/SectionProps';
+declare const _default: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/components/section/Section.js

@@ -1,10 +1,10 @@
 import { __assign, __rest } from "tslib";
-import React from 'react';
-import { has, is } from '../../services';
-import { getBackgroundClassName } from '../../objects';
 import clsx from 'clsx';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
+import React from 'react';
+import { useSection } from '../../components/section/hook/useSection';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { getBackgroundClassName } from '../../objects/atoms/Background';
+import { has, is } from '../../services/classify';
 /**
  * Section Component - Manages the main margins of the page and takes up all the available width.
  * @param children {React.ReactNode}
@@ -20,13 +20,13 @@ import { useTrilogyContext } from '../../context';
  * - -------------- NATIVE PROPERTIES ---------------
  * @param autolayout {boolean} Apply auto-layout rules
  **/
-var Section = React.forwardRef(function (props, ref) {
-    var className = props.className, id = props.id, skeleton = props.skeleton, backgroundColor = props.backgroundColor, backgroundSrc = props.backgroundSrc, inverted = props.inverted, others = __rest(props, ["className", "id", "skeleton", "backgroundColor", "backgroundSrc", "inverted"]);
-    var styled = useTrilogyContext().styled;
-    var _className = hashClass(styled, clsx('section', className, backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), inverted && is('inverted'), skeleton && is('loading')));
-    return (React.createElement("section", __assign({ id: id, ref: ref }, (backgroundSrc && {
+var Section = function (_a, ref) {
+    var className = _a.className, skeleton = _a.skeleton, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, paddingless = _a.paddingless, verticalPaddingless = _a.verticalPaddingless, fullwidth = _a.fullwidth, others = __rest(_a, ["className", "skeleton", "backgroundColor", "backgroundSrc", "inverted", "paddingless", "verticalPaddingless", "fullwidth"]);
+    var isLoading = useSection({ skeleton: skeleton }).isLoading;
+    var _className = hashClass(clsx('section', className, backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), inverted && is('inverted'), isLoading ? is('loading') : is('loaded'), fullwidth && is('fullwidth'), paddingless && is('paddingless'), verticalPaddingless && is('vertical-paddingless')));
+    return (React.createElement("section", __assign({ ref: ref }, (backgroundSrc && {
         style: { backgroundImage: "url(".concat(backgroundSrc, ")") },
     }), { className: _className }, others)));
-});
-export default Section;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNsRCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7Ozs7O0lBY0k7QUFDSixJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFDLFVBQUMsS0FBbUIsRUFBRSxHQUFvQztJQUNqRixJQUFBLFNBQVMsR0FBd0UsS0FBSyxVQUE3RSxFQUFFLEVBQUUsR0FBb0UsS0FBSyxHQUF6RSxFQUFFLFFBQVEsR0FBMEQsS0FBSyxTQUEvRCxFQUFFLGVBQWUsR0FBeUMsS0FBSyxnQkFBOUMsRUFBRSxhQUFhLEdBQTBCLEtBQUssY0FBL0IsRUFBRSxRQUFRLEdBQWdCLEtBQUssU0FBckIsRUFBSyxNQUFNLFVBQUssS0FBSyxFQUF4RiwrRUFBZ0YsQ0FBRixDQUFVO0lBRXRGLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sVUFBVSxHQUFHLFNBQVMsQ0FDMUIsTUFBTSxFQUNOLElBQUksQ0FDRixTQUFTLEVBQ1QsU0FBUyxFQUNULGVBQWUsSUFBSSxHQUFHLENBQUMsc0JBQXNCLENBQUMsZUFBZSxDQUFDLENBQUMsRUFDL0QsYUFBYSxJQUFJLEdBQUcsQ0FBQyxZQUFZLENBQUMsRUFDbEMsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsUUFBUSxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FDMUIsQ0FDRixDQUFBO0lBRUQsT0FBTyxDQUNMLDBDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sR0FBRyxFQUFFLEdBQUcsSUFDSixDQUFDLGFBQWEsSUFBSTtRQUNwQixLQUFLLEVBQUUsRUFBRSxlQUFlLEVBQUUsY0FBTyxhQUFhLE1BQUcsRUFBRTtLQUNwRCxDQUFDLElBQ0YsU0FBUyxFQUFFLFVBQVUsSUFDakIsTUFBTSxFQUNWLENBQ0gsQ0FBQTtBQUNILENBQUMsQ0FBQyxDQUFBO0FBRUYsZUFBZSxPQUFPLENBQUEifQ==
+};
+export default React.forwardRef(Section);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0NBQXNDLENBQUE7QUFFakUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQ25FLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7Ozs7O0lBY0k7QUFDSixJQUFNLE9BQU8sR0FBRyxVQUNkLEVBVWUsRUFDZixHQUE4QjtJQVY1QixJQUFBLFNBQVMsZUFBQSxFQUNULFFBQVEsY0FBQSxFQUNSLGVBQWUscUJBQUEsRUFDZixhQUFhLG1CQUFBLEVBQ2IsUUFBUSxjQUFBLEVBQ1IsV0FBVyxpQkFBQSxFQUNYLG1CQUFtQix5QkFBQSxFQUNuQixTQUFTLGVBQUEsRUFDTixNQUFNLGNBVFgsNEhBVUMsQ0FEVTtJQUlILElBQUEsU0FBUyxHQUFLLFVBQVUsQ0FBQyxFQUFFLFFBQVEsVUFBQSxFQUFFLENBQUMsVUFBN0IsQ0FBNkI7SUFFOUMsSUFBTSxVQUFVLEdBQUcsU0FBUyxDQUMxQixJQUFJLENBQ0YsU0FBUyxFQUNULFNBQVMsRUFDVCxlQUFlLElBQUksR0FBRyxDQUFDLHNCQUFzQixDQUFDLGVBQWUsQ0FBQyxDQUFDLEVBQy9ELGFBQWEsSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEVBQ2xDLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQzFCLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQ3hDLFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQzVCLFdBQVcsSUFBSSxFQUFFLENBQUMsYUFBYSxDQUFDLEVBQ2hDLG1CQUFtQixJQUFJLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQyxDQUNsRCxDQUNGLENBQUE7SUFFRCxPQUFPLENBQ0wsMENBQ0UsR0FBRyxFQUFFLEdBQUcsSUFDSixDQUFDLGFBQWEsSUFBSTtRQUNwQixLQUFLLEVBQUUsRUFBRSxlQUFlLEVBQUUsY0FBTyxhQUFhLE1BQUcsRUFBRTtLQUNwRCxDQUFDLElBQ0YsU0FBUyxFQUFFLFVBQVUsSUFDakIsTUFBTSxFQUNWLENBQ0gsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsS0FBSyxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQSJ9

package/lib/components/section/Section.native.d.ts

@@ -1,15 +1,5 @@
-/// <reference types="react" />
-import { SectionProps } from './SectionProps';
-import { ComponentName } from '../../components/enumsComponentsName';
-/**
- * Section Component - Manages the main margins of the page and takes up all the available width.
- * @param children {React.ReactNode}
- * @param backgroundColor {TrilogyColor} Section Background Color
- * @param backgroundSrc {string} Source of background Image
- * @param paddingless {boolean} remove padding
- **/
-declare const Section: {
-    ({ backgroundColor, backgroundSrc, children }: SectionProps): JSX.Element;
-    displayName: ComponentName;
-};
-export default Section;
+import React from 'react';
+import { View } from 'react-native';
+import { SectionProps } from '../../components/section/SectionProps';
+declare const _default: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<View>>;
+export default _default;

package/lib/components/section/Section.native.js

@@ -1,25 +1,30 @@
-import * as React from 'react';
+import { __assign } from "tslib";
+import React from 'react';
 import { ImageBackground, StyleSheet, View } from 'react-native';
-import { getColorStyle, TrilogyColor } from '../../objects';
+import { AutoLayoutWrapper } from '../../components/autolayout';
 import { ComponentName } from '../../components/enumsComponentsName';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 /**
  * Section Component - Manages the main margins of the page and takes up all the available width.
  * @param children {React.ReactNode}
  * @param backgroundColor {TrilogyColor} Section Background Color
  * @param backgroundSrc {string} Source of background Image
  * @param paddingless {boolean} remove padding
+ * @param verticalPaddingless {boolean} remove vertical padding
+ * @param fullwidth {boolean} Fullwidth section
+ * @param autolayout {boolean} Apply auto-layout rules
  **/
-var Section = function (_a) {
-    var backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, children = _a.children;
+var Section = function (_a, ref) {
+    var _b = _a.autolayout, autolayout = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, children = _a.children, paddingless = _a.paddingless, verticalPaddingless = _a.verticalPaddingless, fullwidth = _a.fullwidth;
     var colorBgc = getColorStyle(TrilogyColor.BACKGROUND);
     var styles = StyleSheet.create({
         section: {
             backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
-            paddingTop: 32,
-            paddingBottom: 32,
-            paddingRight: 24,
-            paddingLeft: 24,
-            width: 'auto',
+            paddingTop: paddingless || verticalPaddingless ? 0 : 32,
+            paddingBottom: paddingless || verticalPaddingless ? 0 : 32,
+            paddingRight: paddingless ? 0 : 24,
+            paddingLeft: paddingless ? 0 : 24,
+            width: fullwidth ? '100%' : 'auto',
         },
         sectionImage: {
             width: '100%',
@@ -27,8 +32,9 @@ var Section = function (_a) {
             height: 'auto',
         },
     });
-    return (React.createElement(View, { style: styles.section }, backgroundSrc ? (React.createElement(ImageBackground, { style: styles.sectionImage, source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc } }, children)) : (children)));
+    return (React.createElement(View, { style: styles.section, ref: ref }, backgroundSrc ? (React.createElement(ImageBackground, { style: styles.sectionImage, source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc } },
+        React.createElement(AutoLayoutWrapper, __assign({}, { autolayout: autolayout }), children))) : (React.createElement(AutoLayoutWrapper, __assign({}, { autolayout: autolayout }), children))));
 };
 Section.displayName = ComponentName.Section;
-export default Section;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlY3Rpb24vU2VjdGlvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxlQUFlLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN2RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEU7Ozs7OztJQU1JO0FBQ0osSUFBTSxPQUFPLEdBQUcsVUFBQyxFQUEwRDtRQUF4RCxlQUFlLHFCQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFFBQVEsY0FBQTtJQUN6RCxJQUFNLFFBQVEsR0FBRyxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0lBRXZELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsT0FBTyxFQUFFO1lBQ1AsZUFBZSxFQUFFLGVBQWUsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRO1lBQzVFLFVBQVUsRUFBRSxFQUFFO1lBQ2QsYUFBYSxFQUFFLEVBQUU7WUFDakIsWUFBWSxFQUFFLEVBQUU7WUFDaEIsV0FBVyxFQUFFLEVBQUU7WUFDZixLQUFLLEVBQUUsTUFBTTtTQUNkO1FBQ0QsWUFBWSxFQUFFO1lBQ1osS0FBSyxFQUFFLE1BQU07WUFDYixTQUFTLEVBQUUsR0FBRztZQUNkLE1BQU0sRUFBRSxNQUFNO1NBQ2Y7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsT0FBTyxJQUN4QixhQUFhLENBQUMsQ0FBQyxDQUFDLENBQ2Ysb0JBQUMsZUFBZSxJQUNkLEtBQUssRUFBRSxNQUFNLENBQUMsWUFBWSxFQUMxQixNQUFNLEVBQUUsT0FBTyxhQUFhLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLGFBQWEsRUFBRSxJQUVqRixRQUFRLENBQ08sQ0FDbkIsQ0FBQyxDQUFDLENBQUMsQ0FDRixRQUFRLENBQ1QsQ0FDSSxDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFFM0MsZUFBZSxPQUFPLENBQUEifQ==
+export default React.forwardRef(Section);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlY3Rpb24vU2VjdGlvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUFFLGVBQWUsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRWhFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBQzNELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXBFOzs7Ozs7Ozs7SUFTSTtBQUNKLElBQU0sT0FBTyxHQUFHLFVBQ2QsRUFRZSxFQUNmLEdBQW9CO1FBUmxCLGtCQUFpQixFQUFqQixVQUFVLG1CQUFHLElBQUksS0FBQSxFQUNqQixlQUFlLHFCQUFBLEVBQ2YsYUFBYSxtQkFBQSxFQUNiLFFBQVEsY0FBQSxFQUNSLFdBQVcsaUJBQUEsRUFDWCxtQkFBbUIseUJBQUEsRUFDbkIsU0FBUyxlQUFBO0lBSVgsSUFBTSxRQUFRLEdBQUcsYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsQ0FBQTtJQUV2RCxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLE9BQU8sRUFBRTtZQUNQLGVBQWUsRUFBRSxlQUFlLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLENBQUMsUUFBUTtZQUM1RSxVQUFVLEVBQUUsV0FBVyxJQUFJLG1CQUFtQixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDdkQsYUFBYSxFQUFFLFdBQVcsSUFBSSxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQzFELFlBQVksRUFBRSxXQUFXLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUNsQyxXQUFXLEVBQUUsV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDakMsS0FBSyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNO1NBQ25DO1FBQ0QsWUFBWSxFQUFFO1lBQ1osS0FBSyxFQUFFLE1BQU07WUFDYixTQUFTLEVBQUUsR0FBRztZQUNkLE1BQU0sRUFBRSxNQUFNO1NBQ2Y7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsT0FBTyxFQUFFLEdBQUcsRUFBRSxHQUFHLElBQ2xDLGFBQWEsQ0FBQyxDQUFDLENBQUMsQ0FDZixvQkFBQyxlQUFlLElBQ2QsS0FBSyxFQUFFLE1BQU0sQ0FBQyxZQUFZLEVBQzFCLE1BQU0sRUFBRSxPQUFPLGFBQWEsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsRUFBRSxHQUFHLEVBQUUsYUFBYSxFQUFFO1FBRWxGLG9CQUFDLGlCQUFpQixlQUFLLEVBQUUsVUFBVSxZQUFBLEVBQUUsR0FBRyxRQUFRLENBQXFCLENBQ3JELENBQ25CLENBQUMsQ0FBQyxDQUFDLENBQ0Ysb0JBQUMsaUJBQWlCLGVBQUssRUFBRSxVQUFVLFlBQUEsRUFBRSxHQUFHLFFBQVEsQ0FBcUIsQ0FDdEUsQ0FDSSxDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFFM0MsZUFBZSxLQUFLLENBQUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFBIn0=

package/lib/components/section/SectionProps.d.ts

@@ -1,8 +1,13 @@
-import type { BackgroundProps, ChildrenWithNoText } from '../../objects';
-import { CommonProps } from '../../objects/facets/CommonProps';
+import { BackgroundProps } from '../../objects/atoms/Background';
+import { ChildrenWithNoText } from '../../objects/facets/ChildrenWithNoText';
+import { Fullwidth } from '../../objects/facets/Fullwidth';
+import { Layout } from '../../objects/facets/Layout';
+import { Paddingless } from '../../objects/facets/Paddingless';
+import { VerticalPaddingless } from '../../objects/facets/VerticalPaddingless';
 /**
  * Section Interface
  */
-export interface SectionProps extends BackgroundProps, ChildrenWithNoText, CommonProps {
+export interface SectionProps extends Layout, Fullwidth, BackgroundProps, Paddingless, VerticalPaddingless, ChildrenWithNoText {
+    className?: string;
     skeleton?: boolean;
 }

package/lib/components/section/SectionPropsDefaults.js

@@ -1,4 +1,11 @@
 export default {
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "skeleton": {
     "type": "boolean",
     "values": [
@@ -7,6 +14,23 @@ export default {
       "true"
     ]
   },
+  "autolayout": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true",
+      "SpacingMatrix"
+    ]
+  },
+  "fullwidth": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "backgroundColor": {
     "type": "enum",
     "values": [
@@ -15,8 +39,6 @@ export default {
       "INFO",
       "WARNING",
       "ERROR",
-      "MAIN",
-      "ACCENT",
       "WHITE",
       "MAIN",
       "MAIN_FADE",
@@ -35,7 +57,9 @@ export default {
       "NEUTRAL",
       "NEUTRAL_FADE",
       "WHITE",
+      "MAIN",
       "MAIN_FADE",
+      "ACCENT",
       "FONT",
       "SUCCESS_FADE",
       "INFO_FADE",
@@ -62,29 +86,31 @@ export default {
       "true"
     ]
   },
-  "children": {
-    "type": "react",
+  "paddingless": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "null",
       "false",
-      "true",
-      "JSXElementConstructor<any>>",
-      "ArrayOfReactElementWithNoText"
+      "true"
     ]
   },
-  "id": {
-    "type": "string",
+  "verticalPaddingless": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "string"
+      "false",
+      "true"
     ]
   },
-  "className": {
-    "type": "string",
+  "children": {
+    "type": "react",
     "values": [
       "undefined",
-      "string"
+      "null",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ArrayOfReactElementWithNoText"
     ]
   }
 };

package/lib/components/section/hook/useSection.d.ts

@@ -0,0 +1,7 @@
+interface IParams {
+    skeleton?: boolean;
+}
+export declare const useSection: ({ skeleton }: IParams) => {
+    isLoading: boolean | undefined;
+};
+export {};

package/lib/components/section/hook/useSection.js

@@ -0,0 +1,16 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useSection = function (_a) {
+    var skeleton = _a.skeleton;
+    try {
+        var _b = __read(React.useState(skeleton || false), 2), isLoading = _b[0], setIsLoading_1 = _b[1];
+        React.useEffect(function () {
+            setIsLoading_1(skeleton || false);
+        }, [skeleton]);
+        return { isLoading: isLoading };
+    }
+    catch (_c) {
+        return { isLoading: skeleton };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VjdGlvbi9ob29rL3VzZVNlY3Rpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFNekIsTUFBTSxDQUFDLElBQU0sVUFBVSxHQUFHLFVBQUMsRUFBcUI7UUFBbkIsUUFBUSxjQUFBO0lBQ25DLElBQUk7UUFDSSxJQUFBLEtBQUEsT0FBNEIsS0FBSyxDQUFDLFFBQVEsQ0FBVSxRQUFRLElBQUksS0FBSyxDQUFDLElBQUEsRUFBckUsU0FBUyxRQUFBLEVBQUUsY0FBWSxRQUE4QyxDQUFBO1FBRTVFLEtBQUssQ0FBQyxTQUFTLENBQUM7WUFDZCxjQUFZLENBQUMsUUFBUSxJQUFJLEtBQUssQ0FBQyxDQUFBO1FBQ2pDLENBQUMsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUE7UUFFZCxPQUFPLEVBQUUsU0FBUyxXQUFBLEVBQUUsQ0FBQTtLQUNyQjtJQUFDLFdBQU07UUFDTixPQUFPLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxDQUFBO0tBQy9CO0FBQ0gsQ0FBQyxDQUFBIn0=

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

@@ -1,2 +1 @@
-import Section from './Section';
-export { Section };
+export { default as Section } from '../../components/section/Section';

package/lib/components/section/index.js

@@ -1,3 +1,2 @@
-import Section from './Section';
-export { Section };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlY3Rpb24vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxPQUFPLE1BQU0sV0FBVyxDQUFBO0FBRS9CLE9BQU8sRUFBRSxPQUFPLEVBQUUsQ0FBQSJ9
+export { default as Section } from '../../components/section/Section';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlY3Rpb24vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxPQUFPLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQSJ9

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

@@ -1,14 +1,4 @@
-/// <reference types="react" />
-import { SegmentControlProps } from './SegmentControlProps';
-/**
- * SegmentControl Component
- * @param children {ReactNode} Children for SegmentControl
- * @param onClick onClick event
- * @param activeIndex {number} default active SegmentControl index
- * @param disabled {boolean} disabled SegmentControl
- * - -------------- WEB PROPERTIES ---------------
- * @param className {string} Additionnal CSS Classes
- * - -------------- NATIVE PROPERTIES ---------------
- */
-declare const SegmentControl: ({ className, id, onClick, children, activeIndex, align }: SegmentControlProps) => JSX.Element;
-export default SegmentControl;
+import React from 'react';
+import { SegmentControlProps } from '../../components/segment-control/SegmentControlProps';
+declare const _default: React.ForwardRefExoticComponent<SegmentControlProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -1,25 +1,25 @@
-import { __read } from "tslib";
-import React, { useState } from 'react';
-import SegmentControlItem from './item';
-import { hashClass } from '../../helpers';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../context';
-import { getJustifiedClassName } from '../../objects';
+import React from 'react';
+import { useSegmentControl } from '../../components/segment-control/hook/useSegmentControl';
+import SegmentControlItem from '../../components/segment-control/item';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { is } from '../../services/classify';
 /**
  * SegmentControl Component
  * @param children {ReactNode} Children for SegmentControl
  * @param onClick onClick event
  * @param activeIndex {number} default active SegmentControl index
  * @param disabled {boolean} disabled SegmentControl
+ * @param marginless {boolean} delete margin
  * - -------------- WEB PROPERTIES ---------------
  * @param className {string} Additionnal CSS Classes
  * - -------------- NATIVE PROPERTIES ---------------
+ * @param inverted {boolean} invert color SegmentControl
  */
-var SegmentControl = function (_a) {
-    var className = _a.className, id = _a.id, onClick = _a.onClick, children = _a.children, activeIndex = _a.activeIndex, align = _a.align;
-    var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('segmented-control', align && getJustifiedClassName(align), className));
-    var _b = __read(useState(activeIndex || 0), 2), activateIndex = _b[0], setActivateIndex = _b[1];
+var SegmentControl = function (_a, ref) {
+    var className = _a.className, onClick = _a.onClick, disabled = _a.disabled, marginless = _a.marginless, children = _a.children, activeIndex = _a.activeIndex;
+    var classes = hashClass(clsx('segmented-control', marginless && is('marginless'), className));
+    var _b = useSegmentControl({ activeIndex: activeIndex, disabled: disabled, onClick: onClick }), activateIndex = _b.activateIndex, handleClick = _b.handleClick;
     var isActive = function (index, childPropsActive) {
         if (typeof childPropsActive !== 'undefined' && !activateIndex) {
             return childPropsActive;
@@ -28,33 +28,19 @@ var SegmentControl = function (_a) {
             return true;
         }
     };
-    var toggleActive = function (e, index) {
-        setActivateIndex(index);
-        if (onClick)
-            onClick(e);
-    };
-    React.useEffect(function () {
-        setActivateIndex(activateIndex);
-    }, [activateIndex]);
-    return (React.createElement("div", { id: id, className: classes }, children &&
+    return (React.createElement("div", { className: classes, ref: ref }, children &&
         Array.isArray(children) &&
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         children.map(function (child, index) {
             var props = {
                 active: Boolean(isActive(index, child.props.active)) || false,
                 disabled: child.props.disabled,
                 key: index,
-                onClick: function (event) {
-                    toggleActive(event, index);
-                    if (child) {
-                        if (child.props.onClick) {
-                            child.props.onClick(event);
-                        }
-                    }
-                },
+                onClick: handleClick
+                    ? function (e) { return handleClick(e, index, child); }
+                    : undefined,
             };
             return child && typeof child.valueOf() === 'string' ? (React.createElement(SegmentControlItem, { disabled: props.disabled, active: props.active, key: props.key, onClick: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); } }, child)) : (React.cloneElement(child, props));
         })));
 };
-export default SegmentControl;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9TZWdtZW50Q29udHJvbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3ZDLE9BQU8sa0JBQWtCLE1BQU0sUUFBUSxDQUFBO0FBRXZDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFakQ7Ozs7Ozs7OztHQVNHO0FBQ0gsSUFBTSxjQUFjLEdBQUcsVUFBQyxFQUE2RTtRQUEzRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxXQUFXLGlCQUFBLEVBQUUsS0FBSyxXQUFBO0lBQ3BFLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLG1CQUFtQixFQUFFLEtBQUssSUFBSSxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3hHLElBQUEsS0FBQSxPQUFvQyxRQUFRLENBQVMsV0FBVyxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQXJFLGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUFzQyxDQUFBO0lBRTVFLElBQU0sUUFBUSxHQUFHLFVBQUMsS0FBYSxFQUFFLGdCQUFpQztRQUNoRSxJQUFJLE9BQU8sZ0JBQWdCLEtBQUssV0FBVyxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQzdELE9BQU8sZ0JBQWdCLENBQUE7U0FDeEI7UUFDRCxJQUFJLEtBQUssS0FBSyxhQUFhLEVBQUU7WUFDM0IsT0FBTyxJQUFJLENBQUE7U0FDWjtJQUNILENBQUMsQ0FBQTtJQUVELElBQU0sWUFBWSxHQUFHLFVBQUMsQ0FBbUIsRUFBRSxLQUFhO1FBQ3RELGdCQUFnQixDQUFDLEtBQUssQ0FBQyxDQUFBO1FBQ3ZCLElBQUksT0FBTztZQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTtJQUN6QixDQUFDLENBQUE7SUFFRCxLQUFLLENBQUMsU0FBUyxDQUFDO1FBQ2QsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLENBQUE7SUFDakMsQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQTtJQUVuQixPQUFPLENBQ0wsNkJBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUM1QixRQUFRO1FBQ1AsS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUM7UUFDdkIsOERBQThEO1FBQzlELFFBQVEsQ0FBQyxHQUFHLENBQUMsVUFBQyxLQUFVLEVBQUUsS0FBYTtZQUNyQyxJQUFNLEtBQUssR0FBRztnQkFDWixNQUFNLEVBQUUsT0FBTyxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEtBQUs7Z0JBQzdELFFBQVEsRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVE7Z0JBQzlCLEdBQUcsRUFBRSxLQUFLO2dCQUNWLE9BQU8sRUFBRSxVQUFDLEtBQXVCO29CQUMvQixZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFBO29CQUMxQixJQUFJLEtBQUssRUFBRTt3QkFDVCxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFOzRCQUN2QixLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQTt5QkFDM0I7cUJBQ0Y7Z0JBQ0gsQ0FBQzthQUNGLENBQUE7WUFFRCxPQUFPLEtBQUssSUFBSSxPQUFPLEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQ3BELG9CQUFDLGtCQUFrQixJQUNqQixRQUFRLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFDeEIsTUFBTSxFQUFFLEtBQUssQ0FBQyxNQUFNLEVBQ3BCLEdBQUcsRUFBRSxLQUFLLENBQUMsR0FBRyxFQUNkLE9BQU8sRUFBRSxVQUFDLENBQVUsSUFBSyxPQUFBLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRyxDQUFDLENBQUMsRUFBWixDQUFZLElBRXBDLEtBQUssQ0FDYSxDQUN0QixDQUFDLENBQUMsQ0FBQyxDQUNGLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUNqQyxDQUFBO1FBQ0gsQ0FBQyxDQUFDLENBQ0EsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxjQUFjLENBQUEifQ==
+export default React.forwardRef(SegmentControl);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9TZWdtZW50Q29udHJvbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxxREFBcUQsQ0FBQTtBQUN2RixPQUFPLGtCQUFrQixNQUFNLG1DQUFtQyxDQUFBO0FBRWxFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFeEM7Ozs7Ozs7Ozs7O0dBV0c7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUNyQixFQUF3RixFQUN4RixHQUE4QjtRQUQ1QixTQUFTLGVBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsV0FBVyxpQkFBQTtJQUdqRSxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLG1CQUFtQixFQUFFLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUN6RixJQUFBLEtBQWlDLGlCQUFpQixDQUFDLEVBQUUsV0FBVyxhQUFBLEVBQUUsUUFBUSxVQUFBLEVBQUUsT0FBTyxTQUFBLEVBQUUsQ0FBQyxFQUFwRixhQUFhLG1CQUFBLEVBQUUsV0FBVyxpQkFBMEQsQ0FBQTtJQUU1RixJQUFNLFFBQVEsR0FBRyxVQUFDLEtBQWEsRUFBRSxnQkFBaUM7UUFDaEUsSUFBSSxPQUFPLGdCQUFnQixLQUFLLFdBQVcsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUM3RCxPQUFPLGdCQUFnQixDQUFBO1NBQ3hCO1FBQ0QsSUFBSSxLQUFLLEtBQUssYUFBYSxFQUFFO1lBQzNCLE9BQU8sSUFBSSxDQUFBO1NBQ1o7SUFDSCxDQUFDLENBQUE7SUFFRCxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFFLE9BQU8sRUFBRSxHQUFHLEVBQUUsR0FBRyxJQUM5QixRQUFRO1FBQ1AsS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUM7UUFDdkIsUUFBUSxDQUFDLEdBQUcsQ0FBQyxVQUFDLEtBQUssRUFBRSxLQUFLO1lBQ3hCLElBQU0sS0FBSyxHQUFHO2dCQUNaLE1BQU0sRUFBRSxPQUFPLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLElBQUksS0FBSztnQkFDN0QsUUFBUSxFQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsUUFBUTtnQkFDOUIsR0FBRyxFQUFFLEtBQUs7Z0JBQ1YsT0FBTyxFQUFFLFdBQVc7b0JBQ2xCLENBQUMsQ0FBQyxVQUFDLENBQXdDLElBQUssT0FBQSxXQUFXLENBQUMsQ0FBQyxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUMsRUFBNUIsQ0FBNEI7b0JBQzVFLENBQUMsQ0FBQyxTQUFTO2FBQ2QsQ0FBQTtZQUVELE9BQU8sS0FBSyxJQUFJLE9BQU8sS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FDcEQsb0JBQUMsa0JBQWtCLElBQ2pCLFFBQVEsRUFBRSxLQUFLLENBQUMsUUFBUSxFQUN4QixNQUFNLEVBQUUsS0FBSyxDQUFDLE1BQU0sRUFDcEIsR0FBRyxFQUFFLEtBQUssQ0FBQyxHQUFHLEVBQ2QsT0FBTyxFQUFFLFVBQUMsQ0FBVSxJQUFLLE9BQUEsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxFQUFaLENBQVksSUFFcEMsS0FBSyxDQUNhLENBQ3RCLENBQUMsQ0FBQyxDQUFDLENBQ0YsS0FBSyxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQ2pDLENBQUE7UUFDSCxDQUFDLENBQUMsQ0FDQSxDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEtBQUssQ0FBQyxVQUFVLENBQUMsY0FBYyxDQUFDLENBQUEifQ==

package/lib/components/segment-control/SegmentControl.native.d.ts

@@ -1,15 +1,5 @@
-/// <reference types="react" />
-import { SegmentControlProps } from './SegmentControlProps';
-import { ComponentName } from '../../components/enumsComponentsName';
-/**
- * SegmentControl Component
- * @param children {ReactNode} Children for SegmentControl
- * @param onClick onClick event
- * @param activeIndex {number} default active SegmentControl index
- * @param disabled {boolean} disabled SegmentControl
- */
-declare const SegmentControl: {
-    ({ children, onClick, activeIndex, ...others }: SegmentControlProps): JSX.Element;
-    displayName: ComponentName;
-};
-export default SegmentControl;
+import React from 'react';
+import type { View as ViewType } from 'react-native';
+import { SegmentControlProps } from '../../components/segment-control/SegmentControlProps';
+declare const _default: React.ForwardRefExoticComponent<SegmentControlProps & React.RefAttributes<ViewType>>;
+export default _default;

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

@@ -1,20 +1,22 @@
 import { __assign, __read, __rest } from "tslib";
 import React, { useState } from 'react';
 import { StyleSheet } from 'react-native';
-import { View } from '../../components/view';
+import { ComponentName } from '../../components/enumsComponentsName';
+import SegmentedControlItem from '../../components/segment-control/item';
 import { Text, TextLevels } from '../../components/text';
-import SegmentedControlItem from './item';
+import { View } from '../../components/view';
 import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * SegmentControl Component
  * @param children {ReactNode} Children for SegmentControl
  * @param onClick onClick event
  * @param activeIndex {number} default active SegmentControl index
  * @param disabled {boolean} disabled SegmentControl
+ * @param marginless {boolean} delete margin
+ * @param inverted {boolean} invert color SegmentControl
  */
-var SegmentControl = function (_a) {
-    var children = _a.children, onClick = _a.onClick, activeIndex = _a.activeIndex, others = __rest(_a, ["children", "onClick", "activeIndex"]);
+var SegmentControl = function (_a, ref) {
+    var children = _a.children, onClick = _a.onClick, activeIndex = _a.activeIndex, disabled = _a.disabled, marginless = _a.marginless, inverted = _a.inverted, others = __rest(_a, ["children", "onClick", "activeIndex", "disabled", "marginless", "inverted"]);
     var _b = __read(useState(activeIndex || 0), 2), activateIndex = _b[0], setActivateIndex = _b[1];
     var isActive = function (index, childPropsActive) {
         if (typeof childPropsActive !== 'undefined' && !activateIndex) {
@@ -25,6 +27,9 @@ var SegmentControl = function (_a) {
         }
     };
     var toggleActive = function (e, index) {
+        if (disabled) {
+            return false;
+        }
         setActivateIndex(index);
         if (onClick) {
             onClick(e);
@@ -32,8 +37,8 @@ var SegmentControl = function (_a) {
     };
     var styles = StyleSheet.create({
         padding: {
-            paddingLeft: 10,
-            paddingRight: 10,
+            paddingLeft: marginless ? 0 : 10,
+            paddingRight: marginless ? 0 : 10,
         },
         segmentedControl: {
             flexDirection: 'row',
@@ -44,12 +49,12 @@ var SegmentControl = function (_a) {
             paddingRight: -4,
         },
     });
-    return (React.createElement(View, { style: styles.padding },
+    return (React.createElement(View, { style: styles.padding, ref: ref },
         React.createElement(View, __assign({ style: styles.segmentedControl }, others), children &&
             Array.isArray(children) &&
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             children.map(function (child, index) {
                 var props = {
+                    inverted: Boolean(isActive(index, child.props.active) && inverted) || false,
                     active: Boolean(isActive(index, child.props.active)) || false,
                     disabled: child.props.disabled,
                     key: index,
@@ -70,5 +75,5 @@ var SegmentControl = function (_a) {
             }))));
 };
 SegmentControl.displayName = ComponentName.SegmentControl;
-export default SegmentControl;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvU2VnbWVudENvbnRyb2wubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLG9CQUFvQixNQUFNLFFBQVEsQ0FBQTtBQUN6QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUFDLEVBQWtFO0lBQWhFLElBQUEsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFLLE1BQU0sY0FBM0Msc0NBQTZDLENBQUY7SUFDM0QsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBQyxXQUFXLElBQUksQ0FBQyxDQUFDLElBQUEsRUFBN0QsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQThCLENBQUE7SUFFcEUsSUFBTSxRQUFRLEdBQUcsVUFBQyxLQUFhLEVBQUUsZ0JBQWlDO1FBQ2hFLElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0QsT0FBTyxnQkFBZ0IsQ0FBQTtTQUN4QjtRQUNELElBQUksS0FBSyxLQUFLLGFBQWEsRUFBRTtZQUMzQixPQUFPLElBQUksQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lB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
+export default React.forwardRef(SegmentControl);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvU2VnbWVudENvbnRyb2wubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxvQkFBb0IsTUFBTSxtQ0FBbUMsQ0FBQTtBQUVwRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3BELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXBFOzs7Ozs7OztHQVFHO0FBQ0gsSUFBTSxjQUFjLEdBQUcsVUFDckIsRUFBa0csRUFDbEcsR0FBd0I7SUFEdEIsSUFBQSxRQUFRLGNBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxXQUFXLGlCQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBM0UsNEVBQTZFLENBQUY7SUFHckUsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBQyxXQUFXLElBQUksQ0FBQyxDQUFDLElBQUEsRUFBN0QsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQThCLENBQUE7SUFFcEUsSUFBTSxRQUFRLEdBQUcsVUFBQyxLQUFhLEVBQUUsZ0JBQWlDO1FBQ2hFLElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0QsT0FBTyxnQkFBZ0IsQ0FBQTtTQUN4QjtRQUNELElBQUks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

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

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

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

@@ -13,6 +13,14 @@ export default {
       "ReactPortal"
     ]
   },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "activeIndex": {
     "type": "string",
     "values": [
@@ -20,37 +28,34 @@ export default {
       "number"
     ]
   },
-  "align": {
-    "type": "enum",
+  "marginless": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "false",
+      "true"
     ]
   },
-  "onClick": {
-    "type": "function",
+  "inverted": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ClickEvent"
+      "false",
+      "true"
     ]
   },
-  "id": {
+  "className": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
-    "type": "string",
+  "onClick": {
+    "type": "function",
     "values": [
       "undefined",
-      "string"
+      "ClickEvent"
     ]
   }
 };

package/lib/components/segment-control/hook/useSegmentControl.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ClickEvent } from '../../../events/OnClickEvent';
+interface IParams {
+    activeIndex?: number;
+    disabled?: boolean;
+    onClick?: ClickEvent;
+}
+export declare const useSegmentControl: ({ activeIndex, disabled, onClick }: IParams) => {
+    handleClick: (event: React.MouseEvent, index: number, child: React.ReactElement) => void;
+    activateIndex: number;
+} | {
+    activateIndex: number | undefined;
+    handleClick?: undefined;
+};
+export {};