@trilogy-ds/react 0.0.1-beta.9 → 0.0.1-fix-timepicker

package/lib/components/title/Title.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TitleProps } from './TitleProps';
+import React from 'react';
+import { TitleProps, TitleRef } from './TitleProps';
 /**
  * Title component
  * @param children {ReactNode} Title child
@@ -10,13 +10,15 @@ import { TitleProps } from './TitleProps';
  * @param skeleton {Boolean} Title Skeleton
  * @param accessibilityLabel {string} Accessibility label
  * @param testId {string} Test Id for Test Integration
- * - --------------- WEB PROPERTIES ----------------------------------
- * @param markup {string} h1 | h2 | h3 | h4 | h5 | h6 | p | span | div
- * @param className {string} Additionnal css classes
  * @param subtitle {boolean} Subtitle below title
  * @param overline {boolean} Overline above title
+ * - --------------- WEB PROPERTIES ----------------------------------
+ * @param markup {string} h1 | h2 | h3 | h4 | h5 | h6 | p | span | div
+ * @param className {string} Additional css classes
+ * @param marginless {boolean} delete margin
+ * @param htmlContent {string} Content Html In Title Component
  * - --------------- NATIVE PROPERTIES ----------------------------------
  * @param style {object} Additional styles
  */
-declare const Title: ({ level, markup, children, className, typo, skeleton, inverted, onClick, testId, accessibilityLabel, subtitle, overline, marginless, htmlContent, ...others }: TitleProps) => JSX.Element;
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<TitleRef>>;
 export default Title;

package/lib/components/title/Title.js

@@ -1,26 +1,28 @@
-import React, { useEffect, useState } from 'react';
+import { __assign, __rest } from "tslib";
+import React from 'react';
 import clsx from 'clsx';
 import { is } from '../../services';
 import { TitleLevels, TitleMarkup } from './TitleEnum';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
-const getTitleLevel = (level) => {
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { useTrilogyContext } from '../../context/index';
+import { ComponentName } from '../enumsComponentsName';
+var getTitleLevel = function (level) {
     if (level) {
         switch (level) {
             case TitleLevels.ONE:
-                return is(`level-1`);
+                return is("level-1");
             case TitleLevels.TWO:
-                return is(`level-2`);
+                return is("level-2");
             case TitleLevels.THREE:
-                return is(`level-3`);
+                return is("level-3");
             case TitleLevels.FOUR:
-                return is(`level-4`);
+                return is("level-4");
             case TitleLevels.FIVE:
-                return is(`level-5`);
+                return is("level-5");
             case TitleLevels.SIX:
-                return is(`level-6`);
+                return is("level-6");
             default:
-                return is(`level-${level}`);
+                return is("level-".concat(level));
         }
     }
 };
@@ -30,7 +32,7 @@ const getTitleLevel = (level) => {
  * for string enum (as in this case) we need to use Object.values.includes for JS usage
  * string enum aren't reverse mapped so the first solution doesn't work
  */
-const isCorrectMarkup = (stringMarkup) => {
+var isCorrectMarkup = function (stringMarkup) {
     return stringMarkup in TitleMarkup || Object.values(TitleMarkup).includes(stringMarkup);
 };
 /**
@@ -43,32 +45,32 @@ const isCorrectMarkup = (stringMarkup) => {
  * @param skeleton {Boolean} Title Skeleton
  * @param accessibilityLabel {string} Accessibility label
  * @param testId {string} Test Id for Test Integration
- * - --------------- WEB PROPERTIES ----------------------------------
- * @param markup {string} h1 | h2 | h3 | h4 | h5 | h6 | p | span | div
- * @param className {string} Additionnal css classes
  * @param subtitle {boolean} Subtitle below title
  * @param overline {boolean} Overline above title
+ * - --------------- WEB PROPERTIES ----------------------------------
+ * @param markup {string} h1 | h2 | h3 | h4 | h5 | h6 | p | span | div
+ * @param className {string} Additional css classes
+ * @param marginless {boolean} delete margin
+ * @param htmlContent {string} Content Html In Title Component
  * - --------------- NATIVE PROPERTIES ----------------------------------
  * @param style {object} Additional styles
  */
-const Title = ({ level = TitleLevels.ONE, markup, children, className, typo, skeleton, inverted, onClick, testId, accessibilityLabel, subtitle, overline, marginless, htmlContent, ...others }) => {
-    const [isLoading, setIsLoading] = useState(skeleton || false);
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('title', level && getTitleLevel(level), typo, isLoading ? is('loading') : is('loaded'), inverted && is('inverted'), marginless && is('marginless'), className));
-    const subtitleClasses = hashClass(styled, clsx('subtitle', className));
-    const overlineClasses = hashClass(styled, clsx('overline', className));
-    useEffect(() => {
-        setIsLoading(skeleton || false);
-    }, [skeleton]);
-    const Tag = markup && isCorrectMarkup(markup) ? markup : 'div';
-    const getClassname = () => {
+var Title = React.forwardRef(function (_a, ref) {
+    var _b = _a.level, level = _b === void 0 ? TitleLevels.ONE : _b, markup = _a.markup, children = _a.children, className = _a.className, id = _a.id, typo = _a.typo, skeleton = _a.skeleton, inverted = _a.inverted, onClick = _a.onClick, accessibilityLabel = _a.accessibilityLabel, subtitle = _a.subtitle, overline = _a.overline, marginless = _a.marginless, testId = _a.testId, others = __rest(_a, ["level", "markup", "children", "className", "id", "typo", "skeleton", "inverted", "onClick", "accessibilityLabel", "subtitle", "overline", "marginless", "testId"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('title', level && getTitleLevel(level), typo, skeleton && is('loading'), inverted && is('inverted'), marginless && is('marginless'), className));
+    var subtitleClasses = hashClass(styled, clsx('subtitle', typo, className));
+    var overlineClasses = hashClass(styled, clsx('overline', typo, className));
+    var Tag = markup && isCorrectMarkup(markup) ? markup : 'p';
+    var getClassname = function () {
         if (subtitle)
             return subtitleClasses;
         if (overline)
             return overlineClasses;
         return classes;
     };
-    return (React.createElement(Tag, { "data-testid": testId, "aria-label": accessibilityLabel, onClick: onClick, className: getClassname(), ...(htmlContent && { dangerouslySetInnerHTML: { __html: htmlContent } }), ...others }, children));
-};
+    return (React.createElement(Tag, __assign({ ref: ref, id: id, "aria-label": accessibilityLabel, onClick: onClick, className: getClassname(), "data-testid": testId }, others), children));
+});
+Title.displayName = ComponentName.Title;
 export default Title;
-//# sourceMappingURL=Title.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGl0bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RpdGxlL1RpdGxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sRUFBRSxXQUFXLEVBQW9CLFdBQVcsRUFBcUIsTUFBTSxhQUFhLENBQUE7QUFDM0YsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBQ25ELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUV0RCxJQUFNLGFBQWEsR0FBRyxVQUFDLEtBQXFDO0lBQzFELElBQUksS0FBSyxFQUFFO1FBQ1QsUUFBUSxLQUFLLEVBQUU7WUFDYixLQUFLLFdBQVcsQ0FBQyxHQUFHO2dCQUNsQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxHQUFHO2dCQUNsQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxLQUFLO2dCQUNwQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxJQUFJO2dCQUNuQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxJQUFJO2dCQUNuQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QixLQUFLLFdBQVcsQ0FBQyxHQUFHO2dCQUNsQixPQUFPLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN0QjtnQkFDRSxPQUFPLEVBQUUsQ0FBQyxnQkFBUyxLQUFLLENBQUUs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

package/lib/components/title/Title.native.d.ts

@@ -1,20 +1,19 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { Text as TextNative } from 'react-native';
 import { TitleProps } from './TitleProps';
-import { ComponentName } from '../enumsComponentsName';
 /**
- * Title Native Component
- * @param children {ReactNode} Text child
- * @param level {TextLevels|number} Title size : 1-4
+ * Title component
+ * @param children {ReactNode} Title child
+ * @param level {TitleLevels | TitleLevel | number} Title size : 1-3
  * @param inverted {Boolean} Title white color
  * @param typo {TypographyColor | TypographyTransform | TypographyBold | TypographyAlign} Typos
  * @param onClick {Function} onClick Event
- * @param style {Object} Additional styles
  * @param skeleton {Boolean} Title Skeleton
- * @param testId {string} Test Id for Test Integration
  * @param accessibilityLabel {string} Accessibility label
+ * @param testId {string} Test Id for Test Integration
+ * @param style {object} Additional styles
+ * @param subtitle {boolean} Subtitle below title
+ * @param overline {boolean} Overline above title
  */
-declare const Title: {
-    ({ children, level, style, inverted, typo, onClick, skeleton, testId, accessibilityLabel, subtitle, overline, ...others }: TitleProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<TextNative>>;
 export default Title;

package/lib/components/title/Title.native.js

@@ -1,41 +1,54 @@
-import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View, Platform } from 'react-native';
-import ContentLoader, { Rect } from 'react-content-loader/native';
-import { setTypographyAlign, setTypographyColor } from '../../objects';
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { StatesContext } from '../../context/providerStates';
+import { getTypographyBoldStyle, setTypographyAlign, setTypographyColor, TypographyBold } from '../../objects';
 import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { ComponentName } from '../enumsComponentsName';
+import * as React from 'react';
+import { useContext } from 'react';
+import { StyleSheet, Text as TextNative, TouchableOpacity } from 'react-native';
+import { Skeleton } from '../skeleton';
+import { TitleLevels } from './TitleEnum';
 /**
- * Title Native Component
- * @param children {ReactNode} Text child
- * @param level {TextLevels|number} Title size : 1-4
+ * Title component
+ * @param children {ReactNode} Title child
+ * @param level {TitleLevels | TitleLevel | number} Title size : 1-3
  * @param inverted {Boolean} Title white color
  * @param typo {TypographyColor | TypographyTransform | TypographyBold | TypographyAlign} Typos
  * @param onClick {Function} onClick Event
- * @param style {Object} Additional styles
  * @param skeleton {Boolean} Title Skeleton
- * @param testId {string} Test Id for Test Integration
  * @param accessibilityLabel {string} Accessibility label
+ * @param testId {string} Test Id for Test Integration
+ * @param style {object} Additional styles
+ * @param subtitle {boolean} Subtitle below title
+ * @param overline {boolean} Overline above title
  */
-const Title = ({ children, level, style, inverted, typo, onClick, skeleton, testId, accessibilityLabel, subtitle, overline, ...others }) => {
-    const titlesLevels = () => {
+var Title = React.forwardRef(function (_a, ref) {
+    var children = _a.children, level = _a.level, style = _a.style, inverted = _a.inverted, typo = _a.typo, onClick = _a.onClick, skeleton = _a.skeleton, accessibilityLabel = _a.accessibilityLabel, subtitle = _a.subtitle, overline = _a.overline, others = __rest(_a, ["children", "level", "style", "inverted", "typo", "onClick", "skeleton", "accessibilityLabel", "subtitle", "overline"]);
+    var statesContext = useContext(StatesContext);
+    var color = setTypographyColor(typo, inverted || statesContext.inverted, skeleton);
+    var colorOverline = getColorStyle(TrilogyColor.MAIN);
+    var fontFamily = level && [TitleLevels.ONE, TitleLevels.TWO].includes(level)
+        ? TypographyBold.TEXT_WEIGHT_BOLD
+        : TypographyBold.TEXT_WEIGHT_SEMIBOLD;
+    var titlesLevels = function () {
         switch (level) {
-            case 'ONE':
+            case TitleLevels.ONE:
                 return 32;
-            case 'TWO':
+            case TitleLevels.TWO:
                 return 28;
-            case 'THREE':
+            case TitleLevels.THREE:
                 return 22;
-            case 'FOUR':
+            case TitleLevels.FOUR:
                 return 20;
-            case 'FIVE':
+            case TitleLevels.FIVE:
                 return 18;
-            case 'SIX':
+            case TitleLevels.SIX:
                 return 16;
             default:
                 return 16;
         }
     };
-    const getAlignSelf = () => {
+    var getAlignSelf = function () {
         switch (true) {
             case setTypographyAlign(typo) === 'left':
                 return 'flex-start';
@@ -47,18 +60,11 @@ const Title = ({ children, level, style, inverted, typo, onClick, skeleton, test
                 return 'flex-start';
         }
     };
-    const getFontFamily = () => {
-        if (level && ['ONE', 'TWO'].includes(level))
-            return 'poppins-bold';
-        return 'poppins-semibold';
-    };
-    const styles = StyleSheet.create({
+    var styles = StyleSheet.create({
         text: {
-            fontFamily: getFontFamily(),
+            fontFamily: getTypographyBoldStyle(fontFamily),
             fontSize: titlesLevels(),
-            color: (((overline || subtitle) && !level) && getColorStyle(TrilogyColor.SECONDARY))
-                || (!skeleton && setTypographyColor(typo, inverted)) ||
-                'transparent',
+            color: ((overline || subtitle) && !level && colorOverline) || color,
             textAlign: setTypographyAlign(typo),
             textTransform: overline && !level ? 'uppercase' : undefined,
             alignSelf: getAlignSelf(),
@@ -68,26 +74,22 @@ const Title = ({ children, level, style, inverted, typo, onClick, skeleton, test
             alignSelf: getAlignSelf(),
             borderRadius: 5,
             borderWidth: 0.1,
-            borderColor: getColorStyle(TrilogyColor.GREY_LIGHTER),
+            borderColor: getColorStyle(TrilogyColor.NEUTRAL_FADE),
             overflow: 'hidden',
             height: titlesLevels(),
         },
     });
-    const titleTestId = testId ? testId : typeof children === 'string' ? children : 'NotSpecified';
-    const titleAccessibilityLabel = accessibilityLabel
+    var titleAccessibilityLabel = accessibilityLabel
         ? accessibilityLabel
         : typeof children === 'string'
             ? children
             : undefined;
-    let titleView = (React.createElement(Text, { maxFontSizeMultiplier: 1.3, accessible: !!titleAccessibilityLabel, accessibilityLabel: titleAccessibilityLabel, testID: titleTestId, style: [styles.text, style], ...others }, children));
+    var titleView = (React.createElement(TextNative, __assign({ ref: ref, maxFontSizeMultiplier: 1.3, accessible: !!titleAccessibilityLabel, accessibilityLabel: titleAccessibilityLabel, style: [styles.text, style] }, others), children));
     if (skeleton) {
-        titleView = (React.createElement(ContentLoader, { style: styles.skeleton },
-            titleView,
-            Platform.OS === 'android' && (React.createElement(View, null,
-                React.createElement(Rect, { rx: '15', ry: '15', width: '100%', height: '100%' })))));
+        titleView = (React.createElement(Skeleton, { style: styles.skeleton, height: titlesLevels(), borderRadius: 5 }, titleView));
     }
     return onClick ? (React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView)) : (titleView);
-};
+});
 Title.displayName = ComponentName.Title;
 export default Title;
-//# sourceMappingURL=Title.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGl0bGUubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy90aXRsZS9UaXRsZS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBRXhELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxrQkFBa0IsRUFBRSxrQkFBa0IsRUFBRSxjQUFjLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDMUcsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ2xDLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxJQUFJLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUMvRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sYUFBYSxDQUFBO0FBQ3RDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxhQUFhLENBQUE7QUFHekM7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQTZCLFVBQUMsRUFZM0QsRUFBRSxHQUFHO0lBWEosSUFBQSxRQUFRLGNBQUEsRUFDUixLQUFLLFdBQUEsRUFDTCxLQUFLLFdBQUEsRUFDTCxRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixrQkFBa0Isd0JBQUEsRUFDbEIsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ0wsTUFBTSxjQVhpRCx1SEFZM0QsQ0FEVTtJQUVULElBQU0sYUFBYSxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQTtJQUMvQyxJQUFNLEtBQUssR0FBRyxrQkFBa0IsQ0FBQyxJQUFJLEVBQUUsUUFBUSxJQUFJLGFBQWEsQ0FBQyxRQUFRLEVBQUUsUUFBUSxDQUFDLENBQUE7SUFDcEYsSUFBTSxhQUFhLEdBQUcsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUV0RCxJQUFNLFVBQVUsR0FDZCxLQUFLLElBQUksQ0FBQyxXQUFXLENBQUMsR0FBRyxFQUFFLFdBQVcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDO1FBQ3pELENBQUMsQ0FBQyxjQUFjLENBQUMsZ0JBQWdCO1FBQ2pDLENBQUMsQ0FBQyxjQUFjLENBQUMsb0JBQW9CLENBQUE7SUFFekMsSUFBTSxZQUFZLEdBQUc7UUFDbkIsUUFBUSxLQUFLLEVBQUU7WUFDYixLQUFLLFdBQVcsQ0FBQyxHQUFHO2dCQUNsQixPQUFPLEVBQUUsQ0FBQTtZQUNYLEtBQUssV0FBVyxDQUFDLEdBQUc7Z0JBQ2xCLE9BQU8sRUFBRSxDQUFBO1lBQ1gsS0FBSyxXQUFXLENBQUMsS0FBSztnQkFDcEIsT0FBTyxFQUFFLENBQUE7WUFDWCxLQUFLLFdBQVcsQ0FBQyxJQUFJO2dCQUNuQixPQUFPLEVBQUUsQ0FBQTtZQUNYLEtBQUssV0FBVyxDQUFDLElBQUk7Z0JBQ25CLE9BQU8sRUFBRSxDQUFBO1lBQ1gsS0FBSyxXQUFXLENBQUMsR0FBRztnQkFDbEIsT0FBTyxFQUFFLENBQUE7WUFDWDtnQkFDRSxPQUFPLEVBQUUsQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lBRUQsSUFBTSxZQUFZLEdBQUc7UUFDbkIsUUFBUSxJQUFJLEVBQUU7WUFDWixLQUFLLGtCQUFrQixDQUFDLElBQUksQ0FBQyxLQUFLLE1BQU07Z0JBQ3RDLE9BQU8sWUFBWSxDQUFBO1lBQ3JCLEtBQUssa0JBQWtCLENBQUMsSUFBSSxDQUFDLEtBQUssUUFBUTtnQkFDeEMsT0FBTyxRQUFRLENBQUE7WUFDakIsS0FBSyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxPQUFPO2dCQUN2QyxPQUFPLFVBQVUsQ0FBQTtZQUNuQjtnQkFDRSxPQUFPLFlBQVksQ0FBQTtTQUN0QjtJQUNILENBQUMsQ0FBQTtJQUVELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsSUFBSSxFQUFFO1lBQ0osVUFBVSxFQUFFLHNCQUFzQixDQUFDLFVBQVUsQ0FBQztZQUM5QyxRQUFRLEVBQUUsWUFBWSxFQUFFO1lBQ3hCLEtBQUssRUFBRSxDQUFDLENBQUMsUUFBUSxJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLGFBQWEsQ0FBQyxJQUFJLEtBQUs7WUFDbkUsU0FBUyxFQUFFLGtCQUFrQixDQUFDLElBQUksQ0FBQztZQUNuQyxhQUFhLEVBQUUsUUFBUSxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLFNBQVM7WUFDM0QsU0FBUyxFQUFFLFlBQVksRUFBRTtTQUMxQjtRQUNELFFBQVEsRUFBRTtZQUNSLFFBQVEsRUFBRSxFQUFFO1lBQ1osU0FBUyxFQUFFLFlBQVksRUFBRTtZQUN6QixZQUFZLEVBQUUsQ0FBQztZQUNmLFdBQVcsRUFBRSxHQUFHO1lBQ2hCLFdBQVcsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLFlBQVksQ0FBQztZQUNyRCxRQUFRLEVBQUUsUUFBUTtZQUNsQixNQUFNLEVBQUUsWUFBWSxFQUFFO1NBQ3ZCO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsSUFBTSx1QkFBdUIsR0FBRyxrQkFBa0I7UUFDaEQsQ0FBQyxDQUFDLGtCQUFrQjtRQUNwQixDQUFDLENBQUMsT0FBTyxRQUFRLEtBQUssUUFBUTtZQUM5QixDQUFDLENBQUMsUUFBUTtZQUNWLENBQUMsQ0FBQyxTQUFTLENBQUE7SUFFYixJQUFJLFNBQVMsR0FBRyxDQUNkLG9CQUFDLFVBQVUsYUFDVCxHQUFHLEVBQUUsR0FBRyxFQUNSLHFCQUFxQixFQUFFLEdBQUcsRUFDMUIsVUFBVSxFQUFFLENBQUMsQ0FBQyx1QkFBdUIsRUFDckMsa0JBQWtCLEVBQUUsdUJBQXVCLEVBQzNDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLElBQ3ZCLE1BQU0sR0FFVCxRQUFRLENBQ0UsQ0FDZCxDQUFBO0lBRUQsSUFBSSxRQUFRLEVBQUU7UUFDWixTQUFTLEdBQUcsQ0FDVixvQkFBQyxRQUFRLElBQ1AsS0FBSyxFQUFFLE1BQU0sQ0FBQyxRQUFRLEVBQ3RCLE1BQU0sRUFBRSxZQUFZLEVBQUUsRUFDdEIsWUFBWSxFQUFFLENBQUMsSUFFZCxTQUFTLENBQ0QsQ0FDWixDQUFBO0tBQ0Y7SUFFRCxPQUFPLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FDZixvQkFBQyxnQkFBZ0IsSUFBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxJQUFJLElBQ3BELFNBQVMsQ0FDTyxDQUNwQixDQUFDLENBQUMsQ0FBQyxDQUNGLFNBQVMsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixLQUFLLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxLQUFLLENBQUE7QUFFdkMsZUFBZSxLQUFLLENBQUEifQ==

package/lib/components/title/TitleEnum.d.ts

@@ -2,17 +2,17 @@
  * New Title Levels
  */
 export declare enum TitleLevels {
-    ONE = "ONE",
-    TWO = "TWO",
-    THREE = "THREE",
-    FOUR = "FOUR",
-    FIVE = "FIVE",
-    SIX = "SIX"
+    ONE = 1,
+    TWO = 2,
+    THREE = 3,
+    FOUR = 4,
+    FIVE = 5,
+    SIX = 6
 }
 /**
  * Titles size values
  */
-export type TitleLevelValues = `${TitleLevels}`;
+export type TitleLevelValues = TitleLevels;
 export declare enum TitleMarkup {
     H1 = "h1",
     H2 = "h2",

package/lib/components/title/TitleEnum.js

@@ -3,12 +3,12 @@
  */
 export var TitleLevels;
 (function (TitleLevels) {
-    TitleLevels["ONE"] = "ONE";
-    TitleLevels["TWO"] = "TWO";
-    TitleLevels["THREE"] = "THREE";
-    TitleLevels["FOUR"] = "FOUR";
-    TitleLevels["FIVE"] = "FIVE";
-    TitleLevels["SIX"] = "SIX";
+    TitleLevels[TitleLevels["ONE"] = 1] = "ONE";
+    TitleLevels[TitleLevels["TWO"] = 2] = "TWO";
+    TitleLevels[TitleLevels["THREE"] = 3] = "THREE";
+    TitleLevels[TitleLevels["FOUR"] = 4] = "FOUR";
+    TitleLevels[TitleLevels["FIVE"] = 5] = "FIVE";
+    TitleLevels[TitleLevels["SIX"] = 6] = "SIX";
 })(TitleLevels || (TitleLevels = {}));
 export var TitleMarkup;
 (function (TitleMarkup) {
@@ -22,4 +22,4 @@ export var TitleMarkup;
     TitleMarkup["SPAN"] = "span";
     TitleMarkup["DIV"] = "div";
 })(TitleMarkup || (TitleMarkup = {}));
-//# sourceMappingURL=TitleEnum.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGl0bGVFbnVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy90aXRsZS9UaXRsZUVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxNQUFNLENBQU4sSUFBWSxXQU9YO0FBUEQsV0FBWSxXQUFXO0lBQ3JCLDJDQUFPLENBQUE7SUFDUCwyQ0FBTyxDQUFBO0lBQ1AsK0NBQVMsQ0FBQTtJQUNULDZDQUFRLENBQUE7SUFDUiw2Q0FBUSxDQUFBO0lBQ1IsMkNBQU8sQ0FBQTtBQUNULENBQUMsRUFQVyxXQUFXLEtBQVgsV0FBVyxRQU90QjtBQU9ELE1BQU0sQ0FBTixJQUFZLFdBVVg7QUFWRCxXQUFZLFdBQVc7SUFDckIsd0JBQVMsQ0FBQTtJQUNULHdCQUFTLENBQUE7SUFDVCx3QkFBUyxDQUFBO0lBQ1Qsd0JBQVMsQ0FBQTtJQUNULHdCQUFTLENBQUE7SUFDVCx3QkFBUyxDQUFBO0lBQ1Qsc0JBQU8sQ0FBQTtJQUNQLDRCQUFhLENBQUE7SUFDYiwwQkFBVyxDQUFBO0FBQ2IsQ0FBQyxFQVZXLFdBQVcsS0FBWCxXQUFXLFFBVXRCIn0=

package/lib/components/title/TitleProps.d.ts

@@ -1,24 +1,24 @@
 /// <reference types="react" />
+import { Accessibility, Clickable, Dev, Invertable, Marginless, TypographyAlign, TypographyAlignValues, TypographyBold, TypographyBoldValues, TypographyColor, TypographyColorValues, TypographyTransform, TypographyTransformValues } from '../../objects';
 import { TitleLevels, TitleLevelValues, TitleMarkup, TitleMarkupValues } from './TitleEnum';
-import { TypographyColor, TypographyColorValues, TypographyTransform, TypographyTransformValues, TypographyBold, TypographyBoldValues, TypographyAlign, TypographyAlignValues, Accessibility, Invertable, Marginless, Clickable } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
+import { Text } from 'react-native';
 type Styles = {
     [key: string]: unknown;
 };
 /**
  * Title Interface
  */
-export interface TitleProps extends Invertable, Accessibility, Clickable, Marginless {
+export interface TitleProps extends Invertable, Accessibility, Clickable, Marginless, Dev, CommonProps {
     children?: React.ReactNode;
     level?: TitleLevelValues | TitleLevels;
-    loading?: boolean;
     typo?: TypographyColor | TypographyColorValues | TypographyTransform | TypographyTransformValues | TypographyBold | TypographyBoldValues | TypographyAlign | TypographyAlignValues | Array<string> | string;
     skeleton?: boolean;
-    className?: string;
-    href?: string;
     markup?: TitleMarkup | TitleMarkupValues;
     style?: Styles;
-    htmlContent?: string;
     subtitle?: boolean;
     overline?: boolean;
 }
+export type TitleRef = HTMLParagraphElement | HTMLHeadingElement | HTMLDivElement;
+export type TitleNativeRef = Text;
 export {};

package/lib/components/title/TitleProps.js

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

package/lib/components/title/TitlePropsDefaults.js

@@ -0,0 +1,142 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "level": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      1,
+      2,
+      3,
+      4,
+      5,
+      6
+    ]
+  },
+  "typo": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string",
+      "string[]"
+    ]
+  },
+  "skeleton": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "markup": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "p",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "div",
+      "h1",
+      "span",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "span",
+      "div"
+    ]
+  },
+  "style": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "Styles"
+    ]
+  },
+  "subtitle": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "overline": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "inverted": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "marginless": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/title/index.js

@@ -1,4 +1,4 @@
 import Title from './Title';
 export * from './TitleEnum';
 export { Title };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RpdGxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLFNBQVMsQ0FBQTtBQUUzQixjQUFjLGFBQWEsQ0FBQTtBQUMzQixPQUFPLEVBQUUsS0FBSyxFQUFFLENBQUEifQ==

package/lib/components/view/View.d.ts

@@ -1,23 +1,24 @@
-/// <reference types="react" />
-import { ViewProps } from './ViewProps';
+import * as React from "react";
+import { ViewProps } from "./ViewProps";
 /**
  * View Component (DIV EQUIVALENT)
  * @param children {ReactNode} View child
  * @param flexable {boolean} Flexable view
  * @param style {CSSProperties} View custom style
  * @param onClick {Function} Click Event
- * @param color {TrilogyColor} View backgroud color
+ * @param backgroundColor {TrilogyColor} View backgroud color
  * @param backgroundSrc {string} View backgroud image source
  * @param id {string} Id for Web / TestID for Native
  * @param fullwidth {boolean} true by default
  * @param justify {JustifiableProps.justify?} Justifiable | "JUSTIFIED_CENTER" | "JUSTIFIED_START" | "JUSTIFIED_END" | "SPACE_BETWEEN" | undefined
- * @param align {AlignableProps.center?} AlignableProps | "ALIGNED_CENTER" | "ALIGNED_START" | "ALIGNED_END" | undefined
+ * @param align {AlignableProps.center?} AlignableProps | "ALIGNED_CENTER" | "ALIGNED_START" | "ALIGNED_END" | "ALIGNED_STRETCH" | undefined
  * - ------------------ WEB PROPERTIES ---------------
- * @param className {string} Additionnal css classes
+ * @param className {string} Additional css classes
  * @param loading {Loading} Loading View
  * @param markup {ViewMarkup} Markup for View
+ * @param inverted {boolean} Inverted View Color
  * - ------------------ NATIVE PROPERTIES ------------
  * @param bottom {boolean} Bottom position
  */
-declare const View: ({ children, style, className, loading, onClick, backgroundSrc, color, fullwidth, markup, flexable, justify, align, ...others }: ViewProps) => JSX.Element;
+declare const View: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<any>>;
 export default View;