@trilogy-ds/react 0.0.9-beta-v4 → 0.0.9-calendar

package/lib/components/radio/tiles/tile/RadioTilePropsDefaults.js

@@ -73,6 +73,25 @@ export default {
       "ReactPortal"
     ]
   },
+  "sticker": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "stickerVariant": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "INFO",
+      "MAIN",
+      "ACCENT",
+      "MAIN",
+      "ACCENT",
+      "INFO"
+    ]
+  },
   "checked": {
     "type": "boolean",
     "values": [
@@ -125,6 +144,14 @@ export default {
       "string"
     ]
   },
+  "required": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "accessibilityLabel": {
     "type": "string",
     "values": [

package/lib/components/range/Range.d.ts

@@ -1,16 +1,27 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { RangeProps } from './RangeProps';
 /**
  * Range Component
+ * @param simple {boolean} display one cursor
+ * @param unit {string} display unit of values
  * - -------------------------- MOBILE PROPERTIES -------------------------------
  * @param min {number} min length
  * @param max {number} max length
  * @param label {string} label of range
  * @param labelValueCursorMin {string} label to display next to value display
+ * @param value {number[]} array of values
+ * @param onChange {function} on change cursors
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param gap {number} space max between min and max cursor
  * @param onChangeMin {function} on change min cursor
  * @param onChangeMax {function} on change max cursor
+ * @param value {number} only for slider
+ * @param onChange {function} on change cursor (works with simple prop)
+ * @param className {string} Additional CSS Classes
+ * @param id {string} id for Range
+ * @param valueMin {number} value min cursor
+ * @param valueMax {number} value max cursor
+ * @param name {string} input name
  */
-declare const Range: ({ className, id, min, max, label, valueMin, valueMax, unit, onChangeMin, onChangeMax, name, gap, }: RangeProps) => JSX.Element;
+declare const Range: React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLDivElement>>;
 export default Range;

package/lib/components/range/Range.js

@@ -1,45 +1,62 @@
 import { __read } from "tslib";
-import * as React from 'react';
-import { getColorStyle, TrilogyColor } from '../../objects';
+import { useTrilogyContext } from '../../context';
 import { hashClass } from '../../helpers';
+import { getColorStyle, TrilogyColor } from '../../objects';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../context';
+import * as React from 'react';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * Range Component
+ * @param simple {boolean} display one cursor
+ * @param unit {string} display unit of values
  * - -------------------------- MOBILE PROPERTIES -------------------------------
  * @param min {number} min length
  * @param max {number} max length
  * @param label {string} label of range
  * @param labelValueCursorMin {string} label to display next to value display
+ * @param value {number[]} array of values
+ * @param onChange {function} on change cursors
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param gap {number} space max between min and max cursor
  * @param onChangeMin {function} on change min cursor
  * @param onChangeMax {function} on change max cursor
+ * @param value {number} only for slider
+ * @param onChange {function} on change cursor (works with simple prop)
+ * @param className {string} Additional CSS Classes
+ * @param id {string} id for Range
+ * @param valueMin {number} value min cursor
+ * @param valueMax {number} value max cursor
+ * @param name {string} input name
  */
-var Range = function (_a) {
-    var className = _a.className, id = _a.id, min = _a.min, max = _a.max, label = _a.label, valueMin = _a.valueMin, valueMax = _a.valueMax, unit = _a.unit, onChangeMin = _a.onChangeMin, onChangeMax = _a.onChangeMax, name = _a.name, _b = _a.gap, gap = _b === void 0 ? 0 : _b;
+var Range = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.id, id = _b === void 0 ? React.useId() : _b, min = _a.min, max = _a.max, label = _a.label, valueMin = _a.valueMin, valueMax = _a.valueMax, unit = _a.unit, onChangeMin = _a.onChangeMin, onChangeMax = _a.onChangeMax, onChange = _a.onChange, name = _a.name, _c = _a.gap, gap = _c === void 0 ? 0 : _c, simple = _a.simple, value = _a.value;
     var styled = useTrilogyContext().styled;
-    var _c = __read(React.useState(valueMin !== null && valueMin !== void 0 ? valueMin : 0), 2), cursorMin = _c[0], setCursorMin = _c[1];
-    var _d = __read(React.useState(valueMax !== null && valueMax !== void 0 ? valueMax : max), 2), cursorMax = _d[0], setCursorMax = _d[1];
     var refTrack = React.useRef(null);
+    var _d = __read(React.useState(valueMin !== null && valueMin !== void 0 ? valueMin : 0), 2), cursorMin = _d[0], setCursorMin = _d[1];
+    var _e = __read(React.useState(simple ? value || 0 : valueMax !== null && valueMax !== void 0 ? valueMax : max), 2), cursorMax = _e[0], setCursorMax = _e[1];
     React.useEffect(function () {
         if (refTrack.current) {
             var track = refTrack.current;
-            track.style.background = "linear-gradient(to right, ".concat(getColorStyle(TrilogyColor.NEUTRAL_FADE), " ").concat((cursorMin / max) * 100, "% , ").concat(getColorStyle(TrilogyColor.MAIN_FADE), " ").concat((cursorMin / max) * 100, "% , ").concat(getColorStyle(TrilogyColor.MAIN_FADE), " ").concat((cursorMax / max) * 100, "%, ").concat(getColorStyle(TrilogyColor.NEUTRAL_FADE), " ").concat((cursorMax / max) * 100, "%) ");
+            track.style.background = "linear-gradient(to right, ".concat(getColorStyle(TrilogyColor.MAIN_FADE), " ").concat((cursorMin / max) * 100, "% , ").concat(getColorStyle(TrilogyColor.MAIN), " ").concat((cursorMin / max) * 100, "% , ").concat(getColorStyle(TrilogyColor.MAIN), " ").concat((cursorMax / max) * 100, "%, ").concat(getColorStyle(TrilogyColor.MAIN_FADE), " ").concat((cursorMax / max) * 100, "%) ");
         }
     }, [cursorMin, cursorMax]);
     React.useEffect(function () {
         setCursorMin(valueMin || 0);
     }, [valueMin]);
     React.useEffect(function () {
-        setCursorMax(valueMax || max);
-    }, [valueMax]);
+        if (!simple)
+            setCursorMax(valueMax || max);
+    }, [valueMax, simple]);
+    React.useEffect(function () {
+        if (simple && value !== undefined)
+            setCursorMax(value);
+    }, [value, simple]);
     var handleChangeCursorMin = React.useCallback(function (e) {
         if (Number(e.target.value) < cursorMax - gap)
             setCursorMin(Number(e.target.value));
     }, [cursorMax, cursorMin]);
     var handleChangeCursorMax = React.useCallback(function (e) {
-        if (Number(e.target.value) > cursorMin + gap)
+        if (Number(e.target.value) >= cursorMin + gap)
             setCursorMax(Number(e.target.value));
     }, [cursorMax, cursorMin]);
     var handleMouseUpMin = React.useCallback(function () {
@@ -51,30 +68,37 @@ var Range = function (_a) {
         }
     }, [onChangeMin, name, cursorMin]);
     var handleMouseUpMax = React.useCallback(function () {
-        if (onChangeMax) {
+        if (onChangeMax && !simple) {
             onChangeMax({
                 inputName: name,
                 inputValue: cursorMax,
             });
         }
-    }, [onChangeMax, name, cursorMax]);
-    return (React.createElement("div", { id: id, className: hashClass(styled, clsx('range-container', className)) },
+        if (onChange && simple) {
+            onChange({
+                inputName: name,
+                inputValue: cursorMax,
+            });
+        }
+    }, [onChangeMax, name, cursorMax, onChange, simple]);
+    return (React.createElement("div", { ref: ref, id: id, className: hashClass(styled, clsx('range-container', className)) },
         React.createElement("label", { className: hashClass(styled, clsx('range-label')) }, label),
         React.createElement("div", { className: hashClass(styled, clsx('range')) },
             React.createElement("div", { ref: refTrack, className: hashClass(styled, clsx('range-track')) }),
-            React.createElement("input", { className: hashClass(styled, clsx('range-cursor range-cursor-min')), onMouseUp: handleMouseUpMin, onChange: handleChangeCursorMin, value: cursorMin, type: 'range', min: min, max: max, name: name, id: "".concat(id, "-min"), "aria-label": label }),
-            React.createElement("input", { className: hashClass(styled, clsx('range-cursor range-cursor-max')), onMouseUp: handleMouseUpMax, onChange: handleChangeCursorMax, value: cursorMax, type: 'range', min: min, max: max, name: name, id: "".concat(id, "-max"), "aria-label": label })),
+            !simple && (React.createElement("input", { className: hashClass(styled, clsx('range-cursor range-cursor-min')), onTouchEnd: handleMouseUpMin, onMouseUp: handleMouseUpMin, onChange: handleChangeCursorMin, value: cursorMin, type: 'range', min: min, max: max, name: name, id: "".concat(id, "-min"), "aria-label": label })),
+            React.createElement("input", { className: hashClass(styled, clsx('range-cursor', !simple && 'range-cursor-max')), onTouchEnd: handleMouseUpMax, onMouseUp: handleMouseUpMax, onChange: handleChangeCursorMax, value: cursorMax, type: 'range', min: min, max: max, name: name, id: "".concat(id, "-max"), "aria-label": label })),
         React.createElement("div", { className: hashClass(styled, clsx('range-values')) },
-            React.createElement("div", null,
+            !simple && (React.createElement("div", null,
                 React.createElement("span", { className: hashClass(styled, clsx('range-value-min')) }, cursorMin),
                 unit && React.createElement("span", null,
                     " ",
-                    unit)),
+                    unit))),
             React.createElement("div", null,
-                React.createElement("span", { className: hashClass(styled, clsx('range-value-max')) }, cursorMax),
+                React.createElement("span", { className: hashClass(styled, clsx(simple ? 'range-value' : 'range-value-max')) }, cursorMax),
                 unit && React.createElement("span", null,
                     " ",
                     unit)))));
-};
+});
+Range.displayName = ComponentName.Range;
 export default Range;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFuZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3JhbmdlL1JhbmdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFdkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxLQUFLLEdBQUcsVUFBQyxFQWFGO1FBWlgsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsR0FBRyxTQUFBLEVBQ0gsR0FBRyxTQUFBLEVBQ0gsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osV0FBVyxpQkFBQSxFQUNYLFdBQVcsaUJBQUEsRUFDWCxJQUFJLFVBQUEsRUFDSixXQUFPLEVBQVAsR0FBRyxtQkFBRyxDQUFDLEtBQUE7SUFFQyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUVoQyxJQUFBLEtBQUEsT0FBNEIsS0FBSyxDQUFDLFFBQVEsQ0FBUyxRQUFRLGFBQVIsUUFBUSxjQUFSLFFBQVEsR0FBSSxDQUFDLENBQUMsSUFBQSxFQUFoRSxTQUFTLFFBQUEsRUFBRSxZQUFZLFFBQXlDLENBQUE7SUFDakUsSUFBQSxLQUFBLE9BQTRCLEtBQUssQ0FBQyxRQUFRLENBQVMsUUFBUSxhQUFSLFFBQVEsY0FBUixRQUFRLEdBQUksR0FBRyxDQUFDLElBQUEsRUFBbEUsU0FBUyxRQUFBLEVBQUUsWUFBWSxRQUEyQyxDQUFBO0lBQ3pFLElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxN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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFuZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3JhbmdlL1JhbmdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUd0RDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXNCRztBQUNILElBQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzVCLFVBQ0UsRUFnQkMsRUFDRCxHQUFHO1FBaEJELFNBQVMsZUFBQSxFQUNULFVBQWtCLEVBQWxCLEVBQUUsbUJBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxLQUFBLEVBQ2xCLEdBQUcsU0FBQSxFQUNILEdBQUcsU0FBQSxFQUNILEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLFdBQVcsaUJBQUEsRUFDWCxXQUFXLGlCQUFBLEVBQ1gsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osV0FBTyxFQUFQLEdBQUcsbUJBQUcsQ0FBQyxLQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sS0FBSyxXQUFBO0lBSUMsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxRQUFRLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUU3QixJQUFBLEtBQUEsT0FBNEIsS0FBSyxDQUFDLFFBQVEsQ0FBUyxRQUFRLGFBQVIs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

package/lib/components/range/Range.native.d.ts

@@ -1,18 +1,16 @@
-/// <reference types="react" />
-import { RangeProps } from './RangeProps';
-import { ComponentName } from '../../components/enumsComponentsName';
+import * as React from 'react';
+import { View } from 'react-native';
+import { RangeNativeProps } from './RangeProps';
 /**
  * Range Component
- * - -------------------------- MOBILE PROPERTIES -------------------------------
  * @param min {number} min length
  * @param max {number} max length
  * @param label {string} label of range
  * @param labelValueCursorMin {string} label to display next to value display
  * @param onChange {function}
- * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param value {number[]} array of values
+ * @param simple {boolean} display one cursor
+ * @param unit {string} display unit of values
  */
-declare const Range: {
-    ({ min, max, label, unit, onChange }: RangeProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Range: React.ForwardRefExoticComponent<RangeNativeProps & React.RefAttributes<View>>;
 export default Range;

package/lib/components/range/Range.native.js

@@ -1,23 +1,24 @@
 import { __read } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { getColorStyle, TrilogyColor, TypographyBold } from '../../objects';
+import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import { Text, TextLevels } from '../text';
-import { getColorStyle, TrilogyColor, TypographyBold } from '../../objects';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * Range Component
- * - -------------------------- MOBILE PROPERTIES -------------------------------
  * @param min {number} min length
  * @param max {number} max length
  * @param label {string} label of range
  * @param labelValueCursorMin {string} label to display next to value display
  * @param onChange {function}
- * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param value {number[]} array of values
+ * @param simple {boolean} display one cursor
+ * @param unit {string} display unit of values
  */
-var Range = function (_a) {
-    var min = _a.min, max = _a.max, label = _a.label, unit = _a.unit, onChange = _a.onChange;
-    var _b = __read(React.useState([0, 100]), 2), values = _b[0], setValues = _b[1];
+var Range = React.forwardRef(function (_a, ref) {
+    var min = _a.min, max = _a.max, label = _a.label, unit = _a.unit, onChange = _a.onChange, value = _a.value, simple = _a.simple;
+    var _b = __read(React.useState(value || simple ? [0] : [0, 100]), 2), values = _b[0], setValues = _b[1];
     var _c = __read(React.useState(0), 2), width = _c[0], setWidth = _c[1];
     var styles = StyleSheet.create({
         marker: {
@@ -41,16 +42,16 @@ var Range = function (_a) {
         },
     });
     var Marker = function () { return React.createElement(View, { style: styles.marker }); };
-    return (React.createElement(View, { onLayout: function (event) {
+    return (React.createElement(View, { ref: ref, onLayout: function (event) {
             var width = event.nativeEvent.layout.width;
             setWidth(width);
         } },
         React.createElement(View, { style: { marginBottom: -4 } },
             React.createElement(Text, { level: TextLevels.THREE }, label && label)),
-        React.createElement(MultiSlider, { values: [values[0], values[1]], sliderLength: width, onValuesChange: function (e) {
+        React.createElement(MultiSlider, { values: values, sliderLength: width, onValuesChange: function (e) {
                 setValues(e);
                 onChange && onChange({ inputName: 'range', inputValue: e });
-            }, min: min, max: max, step: 1, allowOverlap: false, snapped: true, customMarker: Marker, selectedStyle: {
+            }, min: min, max: max, step: 1, allowOverlap: simple, snapped: true, customMarker: Marker, selectedStyle: {
                 backgroundColor: getColorStyle(TrilogyColor.MAIN),
                 height: 4,
             }, unselectedStyle: {
@@ -61,10 +62,10 @@ var Range = function (_a) {
             React.createElement(View, { style: { flexDirection: 'row' } },
                 React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, values[0]),
                 unit && (React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, unit))),
-            React.createElement(View, { style: { flexDirection: 'row' } },
+            !simple && (React.createElement(View, { style: { flexDirection: 'row' } },
                 React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, values[1]),
-                unit && (React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, unit))))));
-};
+                unit && (React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, unit)))))));
+});
 Range.displayName = ComponentName.Range;
 export default Range;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFuZ2UubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9yYW5nZS9SYW5nZS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUvQyxPQUFPLFdBQVcsTUFBTSx1Q0FBdUMsQ0FBQTtBQUMvRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLFNBQVMsQ0FBQTtBQUMxQyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxjQUFjLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sS0FBSyxHQUFHLFVBQUMsRUFBK0M7UUFBN0MsR0FBRyxTQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsUUFBUSxjQUFBO0lBQ3hDLElBQUEsS0FBQSxPQUFzQixLQUFLLENBQUMsUUFBUSxDQUFXLENBQUMsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDLElBQUEsRUFBdkQsTUFBTSxRQUFBLEVBQUUsU0FBUyxRQUFzQyxDQUFBO0lBQ3hELElBQUEsS0FBQSxPQUFvQixLQUFLLENBQUMsUUFBUSxDQUFTLENBQUMsQ0FBQyxJQUFBLEVBQTVDLEtBQUssUUFBQSxFQUFFLFFBQVEsUUFBNkIsQ0FBQTtJQUVuRCxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLE1BQU0sRUFBRTtZQUNOLEtBQUssRUFBRSxFQUFFO1lBQ1QsTUFBTSxFQUFFLEVBQUU7WUFDVixZQUFZLEVBQUUsRUFBRTtZQUNoQixlQUFlLEVBQUUsT0FBTztZQUN4QixXQUFXLEVBQUUsTUFB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFuZ2UubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9yYW5nZS9SYW5nZS5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsY0FBYyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3ZFLE9BQU8sV0FBVyxNQUFNLHVDQUF1QyxDQUFBO0FBQy9ELE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQy9DLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sU0FBUyxDQUFBO0FBRzFDOzs7Ozs7Ozs7O0dBVUc7QUFDSCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM1QixVQUFDLEVBQWtELEVBQUUsR0FBRztRQUFyRCxHQUFHLFNBQUEsRUFBRSxHQUFHLFNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxJQUFJLFVBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxNQUFNLFlBQUE7SUFDekMsSUFBQSxLQUFBLE9BQXNCLEtBQUssQ0FBQyxRQUFRLENBQVcsS0FBSyxJQUFJLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUMsSUFBQSxFQUEvRSxNQUFNLFFBQUEsRUFBRSxTQUFTLFFBQThELENBQUE7SUFDaEYsSUFBQSxLQUFBLE9BQW9CLEtBQUssQ0FBQyxRQUFRLENBQVMsQ0FBQyxDQUFDLElBQUEsRUFBNUMsS0FBSyxRQUFBLEVBQUUsUUFBUSxRQUE2QixDQUFBO0lBRW5ELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFN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

package/lib/components/range/RangeNativePropsDefaults.js

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

package/lib/components/range/RangeProps.d.ts

@@ -1,11 +1,12 @@
 /**
  * range Interface
  */
+import { View } from 'react-native';
 import { Accessibility, Dev } from '../../objects';
 import { CommonProps } from '../../objects/facets/CommonProps';
 export type InputChangeEventHandlerNative = (event: {
-    inputValue: number[];
-    inputName: string;
+    inputValue: number[] | number;
+    inputName: string | undefined;
 }) => void;
 export type InputChangeEventHandlerWeb = (event: {
     inputValue: number;
@@ -15,6 +16,7 @@ export interface RangeProps extends Accessibility, Dev, CommonProps {
     min: number;
     max: number;
     label?: string;
+    value?: number;
     valueMin?: number;
     valueMax?: number;
     unit?: string;
@@ -23,4 +25,10 @@ export interface RangeProps extends Accessibility, Dev, CommonProps {
     name?: string;
     gap?: number;
     onChange?: InputChangeEventHandlerNative;
+    simple?: boolean;
+}
+export interface RangeNativeProps extends Omit<RangeProps, 'value'> {
+    value?: number[];
 }
+export type RangeRef = HTMLDivElement;
+export type RangeNativeRef = View;

package/lib/components/range/RangePropsDefaults.js

@@ -14,6 +14,13 @@ export default {
       "string"
     ]
   },
+  "value": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "number"
+    ]
+  },
   "valueMin": {
     "type": "string",
     "values": [
@@ -70,6 +77,14 @@ export default {
       "InputChangeEventHandlerNative"
     ]
   },
+  "simple": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "accessibilityLabel": {
     "type": "string",
     "values": [

package/lib/components/rows/Rows.d.ts

@@ -4,7 +4,7 @@ import { RowsProps } from './RowsProps';
  * Rows Component
  * @param children {React.ReactNode} Rows children
  * - ------------------- WEB PROPERTIES -------------------------
- * @param className {string} additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  */
-declare const Rows: ({ className, id, gap, ...others }: RowsProps) => React.JSX.Element;
+declare const Rows: React.ForwardRefExoticComponent<RowsProps & React.RefAttributes<HTMLDivElement>>;
 export default Rows;

package/lib/components/rows/Rows.js

@@ -4,16 +4,18 @@ import { hashClass } from '../../helpers';
 import clsx from 'clsx';
 import { useTrilogyContext } from '../../context';
 import { has, is } from '../../services';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * Rows Component
  * @param children {React.ReactNode} Rows children
  * - ------------------- WEB PROPERTIES -------------------------
- * @param className {string} additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  */
-var Rows = function (_a) {
+var Rows = React.forwardRef(function (_a, ref) {
     var className = _a.className, id = _a.id, gap = _a.gap, others = __rest(_a, ["className", "id", "gap"]);
     var styled = useTrilogyContext().styled;
-    return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('rows', gap && has("gap-".concat(gap)), typeof gap !== 'undefined' && gap === 0 && is('gapless'), className)) }, others)));
-};
+    return (React.createElement("div", __assign({ ref: ref, id: id, className: hashClass(styled, clsx('rows', gap && has("gap-".concat(gap)), typeof gap !== 'undefined' && gap === 0 && is('gapless'), className)) }, others)));
+});
+Rows.displayName = ComponentName.Rows;
 export default Rows;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcm93cy9Sb3dzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBRXBDOzs7OztHQUtHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsVUFBQyxFQUE0QztJQUExQyxJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLEdBQUcsU0FBQSxFQUFLLE1BQU0sY0FBL0IsMEJBQWlDLENBQUY7SUFDbkMsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLHNDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxJQUFJLEdBQUcsQ0FBQyxjQUFPLEdBQUcsQ0FBRSxDQUFDLEVBQUUsT0FBTyxHQUFHLEtBQUssV0FBVyxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUM1RyxJQUNHLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLElBQUksQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcm93cy9Sb3dzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUV0RDs7Ozs7R0FLRztBQUNILElBQU0sSUFBSSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQXFCLFVBQUMsRUFBaUMsRUFBRSxHQUFHO0lBQXBDLElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUssTUFBTSxjQUEvQiwwQkFBaUMsQ0FBRjtJQUN4RSxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxPQUFPLENBQ0wsc0NBQ0UsR0FBRyxFQUFFLEdBQUcsRUFDUixFQUFFLEVBQUUsRUFBRSxFQUNOLFNBQVMsRUFBRSxTQUFTLENBQ2xCLE1BQU0sRUFDTixJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsSUFBSSxHQUFHLENBQUMsY0FBTyxHQUFHLENBQUUsQ0FBQyxFQUFFLE9BQU8sR0FBRyxLQUFLLFdBQVcsSUFBSSxHQUFHLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FDNUcsSUFDRyxNQUFNLEVBQ1YsQ0FDSCxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixJQUFJLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUE7QUFDckMsZUFBZSxJQUFJLENBQUEifQ==

package/lib/components/rows/Rows.native.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { View } from 'react-native';
 import { RowsProps } from './RowsProps';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * Rows Component
  * @param children {React.ReactNode} Rows children
  * @param gapless {boolean} Delete margins between row
  */
-declare const Rows: {
-    ({ children, gap, ...others }: RowsProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Rows: React.ForwardRefExoticComponent<RowsProps & React.RefAttributes<View>>;
 export default Rows;

package/lib/components/rows/Rows.native.js

@@ -8,7 +8,7 @@ import { ColumnsGapValue } from '../../components/columns/ColumnsTypes';
  * @param children {React.ReactNode} Rows children
  * @param gapless {boolean} Delete margins between row
  */
-var Rows = function (_a) {
+var Rows = React.forwardRef(function (_a, ref) {
     var children = _a.children, gap = _a.gap, others = __rest(_a, ["children", "gap"]);
     var realGap = (typeof gap === 'undefined' && 16) || ColumnsGapValue[gap];
     var styles = StyleSheet.create({
@@ -19,8 +19,8 @@ var Rows = function (_a) {
             gap: realGap,
         },
     });
-    return (React.createElement(View, __assign({ style: styles.rows }, others), children));
-};
+    return (React.createElement(View, __assign({ ref: ref, style: styles.rows }, others), children));
+});
 Rows.displayName = ComponentName.Rows;
 export default Rows;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93cy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Jvd3MvUm93cy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGVBQWUsRUFBVyxNQUFNLG1DQUFtQyxDQUFBO0FBRTVFOzs7O0dBSUc7QUFDSCxJQUFNLElBQUksR0FBRyxVQUFDLEVBQXVDO0lBQXJDLElBQUEsUUFBUSxjQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUssTUFBTSxjQUExQixtQkFBNEIsQ0FBRjtJQUN0QyxJQUFNLE9BQU8sR0FBRyxDQUFDLE9BQU8sR0FBRyxLQUFLLFdBQVcsSUFBSSxFQUFFLENBQUMsSUFBSSxlQUFlLENBQUMsR0FBYyxDQUFDLENBQUE7SUFDckYsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixJQUFJLEVBQUU7WUFDSixPQUFPLEVBQUUsTUFBTTtZQUNmLGFBQWEsRUFBRSxRQUFRO1lBQ3ZCLElBQUksRUFBRSxDQUFDO1lBQ1AsR0FBRyxFQUFFLE9BQU87U0FDYjtLQUNGLENBQUMsQ0FBQTtJQUVGLE9BQU8sQ0FDTCxvQkFBQyxJQUFJLGFBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLElBQU0sTUFBTSxHQUNqQyxRQUFRLENBQ0osQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsSUFBSSxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsSUFBSSxDQUFBO0FBRXJDLGVBQWUsSUFBSSxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93cy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Jvd3MvUm93cy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGVBQWUsRUFBVyxNQUFNLG1DQUFtQyxDQUFBO0FBRTVFOzs7O0dBSUc7QUFDSCxJQUFNLElBQUksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUEyQixVQUFDLEVBQTRCLEVBQUUsR0FBRztJQUEvQixJQUFBLFFBQVEsY0FBQSxFQUFFLEdBQUcsU0FBQSxFQUFLLE1BQU0sY0FBMUIsbUJBQTRCLENBQUY7SUFDakYsSUFBTSxPQUFPLEdBQUcsQ0FBQyxPQUFPLEdBQUcsS0FBSyxXQUFXLElBQUksRUFBRSxDQUFDLElBQUksZUFBZSxDQUFDLEdBQWMsQ0FBQyxDQUFBO0lBQ3JGLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsSUFBSSxFQUFFO1lBQ0osT0FBTyxFQUFFLE1BQU07WUFDZixhQUFhLEVBQUUsUUFBUTtZQUN2QixJQUFJLEVBQUUsQ0FBQztZQUNQLEdBQUcsRUFBRSxPQUFPO1NBQ2I7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLElBQU0sTUFBTSxHQUMzQyxRQUFRLENBQ0osQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixJQUFJLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUE7QUFFckMsZUFBZSxJQUFJLENBQUEifQ==

package/lib/components/rows/RowsProps.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { CommonProps } from '../../objects/facets/CommonProps';
 import { GapSize } from '../../components/columns/ColumnsTypes';
+import { View } from 'react-native';
 /**
  * Rows Interface
  */
@@ -8,3 +9,5 @@ export interface RowsProps extends CommonProps {
     children?: React.ReactNode;
     gap?: GapSize;
 }
+export type RowsRef = HTMLDivElement;
+export type RowsNativeRef = View;

package/lib/components/rows/row/Row.d.ts

@@ -5,7 +5,7 @@ import { RowProps } from './RowProps';
  * @param narrow {boolean} Align same elements horizontaly
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------
- *  @param className {string} additionnal CSS Classes
+ *  @param className {string} Additional CSS Classes
  */
-declare const Row: ({ className, id, narrow, ...others }: RowProps) => React.JSX.Element;
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
 export default Row;

package/lib/components/rows/row/Row.js

@@ -4,18 +4,20 @@ import { is } from '../../../services/classify';
 import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
 import { useTrilogyContext } from '../../../context';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Rows Item Component
  * @param narrow {boolean} Align same elements horizontaly
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------
- *  @param className {string} additionnal CSS Classes
+ *  @param className {string} Additional CSS Classes
  */
-var Row = function (_a) {
+var Row = React.forwardRef(function (_a, ref) {
     var className = _a.className, id = _a.id, narrow = _a.narrow, others = __rest(_a, ["className", "id", "narrow"]);
     var styled = useTrilogyContext().styled;
     var classes = hashClass(styled, clsx('row', narrow && is('narrow'), className));
-    return React.createElement("div", __assign({ id: id, className: classes }, others));
-};
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
+});
+Row.displayName = ComponentName.Row;
 export default Row;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9yb3dzL3Jvdy9Sb3cudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7R0FNRztBQUNILElBQU0sR0FBRyxHQUFHLFVBQUMsRUFBOEM7SUFBNUMsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQWxDLDZCQUFvQyxDQUFGO0lBQ3JDLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxNQUFNLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDakYsT0FBTyxzQ0FBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDeEQsQ0FBQyxDQUFBO0FBRUQsZUFBZSxHQUFHLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9yb3dzL3Jvdy9Sb3cudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFtQixVQUFDLEVBQW9DLEVBQUUsR0FBRztJQUF2QyxJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFLLE1BQU0sY0FBbEMsNkJBQW9DLENBQUY7SUFDeEUsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLE1BQU0sSUFBSSxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUNqRixPQUFPLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQ2xFLENBQUMsQ0FBQyxDQUFBO0FBRUYsR0FBRyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsR0FBRyxDQUFBO0FBQ25DLGVBQWUsR0FBRyxDQUFBIn0=

package/lib/components/rows/row/Row.native.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { View } from 'react-native';
 import { RowProps } from './RowProps';
-import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Rows Item Component
  * @param narrow {boolean} Align same elements horizontaly
  * @param children {React.ReactNode}
  */
-declare const Row: {
-    ({ children, narrow, ...others }: RowProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<View>>;
 export default Row;

package/lib/components/rows/row/Row.native.js

@@ -7,7 +7,7 @@ import { ComponentName } from '../../../components/enumsComponentsName';
  * @param narrow {boolean} Align same elements horizontaly
  * @param children {React.ReactNode}
  */
-var Row = function (_a) {
+var Row = React.forwardRef(function (_a, ref) {
     var children = _a.children, narrow = _a.narrow, others = __rest(_a, ["children", "narrow"]);
     var styles = StyleSheet.create({
         row: {
@@ -15,8 +15,8 @@ var Row = function (_a) {
             flexShrink: 1,
         },
     });
-    return (React.createElement(View, __assign({ style: styles.row }, others), children));
-};
-Row.displayName = ComponentName.Rows;
+    return (React.createElement(View, __assign({ ref: ref, style: styles.row }, others), children));
+});
+Row.displayName = ComponentName.Row;
 export default Row;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcm93cy9yb3cvUm93Lm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRS9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7OztHQUlHO0FBQ0gsSUFBTSxHQUFHLEdBQUcsVUFBQyxFQUF5QztJQUF2QyxJQUFBLFFBQVEsY0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFLLE1BQU0sY0FBN0Isc0JBQStCLENBQUY7SUFDeEMsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixHQUFHLEVBQUU7WUFDSCxRQUFRLEVBQUUsQ0FBQyxNQUFNLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQztZQUM1QixVQUFVLEVBQUUsQ0FBQztTQUNkO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLElBQUksYUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLEdBQUcsSUFBTSxNQUFNLEdBQ2hDLFFBQVEsQ0FDSixDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxHQUFHLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUE7QUFFcEMsZUFBZSxHQUFHLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcm93cy9yb3cvUm93Lm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRS9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7OztHQUlHO0FBQ0gsSUFBTSxHQUFHLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBeUIsVUFBQyxFQUErQixFQUFFLEdBQUc7SUFBbEMsSUFBQSxRQUFRLGNBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQTdCLHNCQUErQixDQUFGO0lBQ2pGLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsR0FBRyxFQUFFO1lBQ0gsUUFBUSxFQUFFLENBQUMsTUFBTSxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUM7WUFDNUIsVUFBVSxFQUFFLENBQUM7U0FDZDtLQUNGLENBQUMsQ0FBQTtJQUVGLE9BQU8sQ0FDTCxvQkFBQyxJQUFJLGFBQUMsR0FBRyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsTUFBTSxDQUFDLEdBQUcsSUFBTSxNQUFNLEdBQzFDLFFBQVEsQ0FDSixDQUNSLENBQUE7QUFDSCxDQUFDLENBQUMsQ0FBQTtBQUVGLEdBQUcsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLEdBQUcsQ0FBQTtBQUVuQyxlQUFlLEdBQUcsQ0FBQSJ9

package/lib/components/rows/row/RowProps.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { View } from 'react-native';
 import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * Rows Interface
@@ -7,3 +8,5 @@ export interface RowProps extends CommonProps {
     children?: React.ReactNode;
     narrow?: boolean;
 }
+export type RowRef = HTMLDivElement;
+export type RowNativeRef = View;

package/lib/components/scroll-view/ScrollView.d.ts

@@ -6,7 +6,7 @@ import { ScrollViewProps } from "./ScrollViewProps";
  * @param id {string} Id for Web / TestID for Native
  * @param scrollDirection {Direction} Scroll vertically or horizontally
  * - -------------- WEB PROPERTIES -----------------
- * @param className {string} Additionnal css classes
+ * @param className {string} Additional css classes
  * - -------------- NATIVE PROPERTIES ---------------
  * @param footer {React.ReactNode} ScrollView footer
  * @param bounce {boolean} Bounce effect on scroll