@trilogy-ds/react 0.0.1-beta.9 → 0.0.1-calendar

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

@@ -0,0 +1,176 @@
+export default {
+  "horizontal": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "icon": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa"
+    ]
+  },
+  "description": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "sticker": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "stickerVariant": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "INFO",
+      "MAIN",
+      "ACCENT",
+      "MAIN",
+      "ACCENT",
+      "INFO"
+    ]
+  },
+  "checked": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "readonly": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "onChange": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "RadioChangeEventHandler"
+    ]
+  },
+  "name": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "value": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "required": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/radio/tiles/tile/index.d.ts

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

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

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

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

@@ -1,21 +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 labelValueCursorMax {string} label to display next to value display
- * @param onChangeMin
- * @param onChangeMax
- * @param onChange {function} (Native) * @param nameMin {string} name input min
- * @param idMin {string} id input min
- * @param nameMax{string} name input max
- * @param idMax {string} id input max
+ * @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 valueCursorMin {number} number of input min
- * @param valueCursorMax {number} number of input max
+ * @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: ({ min, max, label, valueCursorMin, valueCursorMax, labelValueCursorMin, labelValueCursorMax, onChangeMin, onChangeMax, nameMin, idMin, nameMax, idMax, testId, gap, }: RangeProps) => JSX.Element;
+declare const Range: React.ForwardRefExoticComponent<RangeProps & React.RefAttributes<HTMLDivElement>>;
 export default Range;

package/lib/components/range/Range.js

@@ -1,77 +1,104 @@
-import React from 'react';
-import { getColorStyle, TrilogyColor } from '../../objects';
+import { __read } from "tslib";
+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 labelValueCursorMax {string} label to display next to value display
- * @param onChangeMin
- * @param onChangeMax
- * @param onChange {function} (Native) * @param nameMin {string} name input min
- * @param idMin {string} id input min
- * @param nameMax{string} name input max
- * @param idMax {string} id input max
+ * @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 valueCursorMin {number} number of input min
- * @param valueCursorMax {number} number of input max
+ * @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
  */
-const Range = ({ min, max, label, valueCursorMin, valueCursorMax, labelValueCursorMin, labelValueCursorMax, onChangeMin, onChangeMax, nameMin, idMin, nameMax, idMax, testId, gap = 0, }) => {
-    const { styled } = useTrilogyContext();
-    const [cursorMin, setCursorMin] = React.useState(valueCursorMin !== null && valueCursorMin !== void 0 ? valueCursorMin : 0);
-    const [cursorMax, setCursorMax] = React.useState(valueCursorMax !== null && valueCursorMax !== void 0 ? valueCursorMax : max);
-    const refTrack = React.useRef(null);
-    React.useEffect(() => {
+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 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) {
-            const track = refTrack.current;
-            track.style.background = `linear-gradient(to right, ${getColorStyle(TrilogyColor.GREY_LIGHT)} ${(cursorMin / max) * 100}% , ${getColorStyle(TrilogyColor.SECONDARY)} ${(cursorMin / max) * 100}% , ${getColorStyle(TrilogyColor.SECONDARY)} ${(cursorMax / max) * 100}%, ${getColorStyle(TrilogyColor.GREY_LIGHT)} ${(cursorMax / max) * 100}%) `;
+            var track = refTrack.current;
+            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]);
-    const handleChangeCursorMin = React.useCallback((e) => {
+    React.useEffect(function () {
+        setCursorMin(valueMin || 0);
+    }, [valueMin]);
+    React.useEffect(function () {
+        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]);
-    const handleChangeCursorMax = React.useCallback((e) => {
-        if (Number(e.target.value) > cursorMin + gap)
+    var handleChangeCursorMax = React.useCallback(function (e) {
+        if (Number(e.target.value) >= cursorMin + gap)
             setCursorMax(Number(e.target.value));
     }, [cursorMax, cursorMin]);
-    const handleMouseUpMin = React.useCallback(() => {
+    var handleMouseUpMin = React.useCallback(function () {
         if (onChangeMin) {
             onChangeMin({
-                inputName: nameMin,
+                inputName: name,
                 inputValue: cursorMin,
             });
         }
-    }, [onChangeMin, nameMin, cursorMin]);
-    const handleMouseUpMax = React.useCallback(() => {
-        if (onChangeMax) {
+    }, [onChangeMin, name, cursorMin]);
+    var handleMouseUpMax = React.useCallback(function () {
+        if (onChangeMax && !simple) {
             onChangeMax({
-                inputName: nameMax,
+                inputName: name,
                 inputValue: cursorMax,
             });
         }
-    }, [onChangeMax, nameMax, cursorMax]);
-    return (React.createElement("div", { "data-testid": testId, className: hashClass(styled, clsx('range-container')) },
+        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", { "data-testid": `${testId}_min`, className: hashClass(styled, clsx('range-cursor range-cursor-min')), onMouseUp: handleMouseUpMin, onChange: handleChangeCursorMin, value: cursorMin, type: 'range', min: min, max: max, name: nameMin, id: idMin, "aria-label": label }),
-            React.createElement("input", { "data-testid": `${testId}_max`, className: hashClass(styled, clsx('range-cursor range-cursor-max')), onMouseUp: handleMouseUpMax, onChange: handleChangeCursorMax, value: cursorMax, type: 'range', min: min, max: max, name: nameMax, id: idMax, "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),
-                labelValueCursorMin && React.createElement("span", null,
+                unit && React.createElement("span", null,
                     " ",
-                    labelValueCursorMin)),
+                    unit))),
             React.createElement("div", null,
-                React.createElement("span", { className: hashClass(styled, clsx('range-value-max')) }, cursorMax),
-                labelValueCursorMax && React.createElement("span", null,
+                React.createElement("span", { className: hashClass(styled, clsx(simple ? 'range-value' : 'range-value-max')) }, cursorMax),
+                unit && React.createElement("span", null,
                     " ",
-                    labelValueCursorMax)))));
-};
+                    unit)))));
+});
+Range.displayName = ComponentName.Range;
 export default Range;
-//# sourceMappingURL=Range.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFuZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3JhbmdlL1JhbmdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUd0RDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXNCRztBQUNILElBQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzVCLFVBQ0UsRUFnQkMsRUFDRCxHQUFHO1FBaEJELFNBQVMsZUFBQSxFQUNULFVBQWtCLEVBQWxCLEVBQUUsbUJBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxLQUFBLEVBQ2xCLEdBQUcsU0FBQSxFQUNILEdBQUcsU0FBQSxFQUNILEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLFdBQVcsaUJBQUEsRUFDWCxXQUFXLGlCQUFBLEVBQ1gsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osV0FBTyxFQUFQLEdBQUcsbUJBQUcsQ0FBQyxLQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sS0FBSyxXQUFBO0lBSUMsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxRQUFRLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUU3QixJQUFBLEtBQUEsT0FBNEIsS0FBSyxDQUFDLFFBQVEsQ0FBUyxRQUFRLGFBQVIs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

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

@@ -1,26 +1,16 @@
-/// <reference types="react" />
-import { RangeProps } from './RangeProps';
-import { ComponentName } from '../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 labelValueCursorMax {string} label to display next to value display
  * @param onChange {function}
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param nameMin {string} name input min
- * @param idMin {string} id input min
- * @param nameMax{string} name input max
- * @param idMax {string} id input max
- * @param gap {number} space max between min and max cursor
- * @param valueCursorMin {number} number of input min
- * @param valueCursorMax {number} number of input max
+ * @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, labelValueCursorMin, labelValueCursorMax, 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,31 +1,26 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+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 { Text, TextLevels } from '../text';
-import { getColorStyle, TrilogyColor, TypographyBold } from '../../objects';
-import { ComponentName } from '../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 labelValueCursorMax {string} label to display next to value display
  * @param onChange {function}
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param nameMin {string} name input min
- * @param idMin {string} id input min
- * @param nameMax{string} name input max
- * @param idMax {string} id input max
- * @param gap {number} space max between min and max cursor
- * @param valueCursorMin {number} number of input min
- * @param valueCursorMax {number} number of input max
+ * @param value {number[]} array of values
+ * @param simple {boolean} display one cursor
+ * @param unit {string} display unit of values
  */
-const Range = ({ min, max, label, labelValueCursorMin, labelValueCursorMax, onChange }) => {
-    const [values, setValues] = React.useState([0, 100]);
-    const [width, setWidth] = React.useState(0);
-    const styles = StyleSheet.create({
+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: {
             width: 20,
             height: 20,
@@ -40,20 +35,24 @@ const Range = ({ min, max, label, labelValueCursorMin, labelValueCursorMax, onCh
             shadowRadius: 3.84,
             elevation: 5,
         },
-        markerLabels: { flexDirection: 'row', justifyContent: 'space-between', marginTop: -6 },
+        markerLabels: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginTop: -6,
+        },
     });
-    const Marker = () => React.createElement(View, { style: styles.marker });
-    return (React.createElement(View, { onLayout: (event) => {
-            const { width } = event.nativeEvent.layout;
+    var Marker = function () { return React.createElement(View, { style: styles.marker }); };
+    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: (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: {
-                backgroundColor: getColorStyle(TrilogyColor.SECONDARY),
+            }, min: min, max: max, step: 1, allowOverlap: simple, snapped: true, customMarker: Marker, selectedStyle: {
+                backgroundColor: getColorStyle(TrilogyColor.MAIN),
                 height: 4,
             }, unselectedStyle: {
                 backgroundColor: '#e1e1e1',
@@ -62,11 +61,11 @@ const Range = ({ min, max, label, labelValueCursorMin, labelValueCursorMax, onCh
         React.createElement(View, { style: styles.markerLabels },
             React.createElement(View, { style: { flexDirection: 'row' } },
                 React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, values[0]),
-                labelValueCursorMin && (React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, labelValueCursorMin))),
-            React.createElement(View, { style: { flexDirection: 'row' } },
+                unit && (React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, unit))),
+            !simple && (React.createElement(View, { style: { flexDirection: 'row' } },
                 React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, values[1]),
-                labelValueCursorMax && (React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, labelValueCursorMax))))));
-};
+                unit && (React.createElement(Text, { level: TextLevels.THREE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, unit)))))));
+});
 Range.displayName = ComponentName.Range;
 export default Range;
-//# sourceMappingURL=Range.native.js.map
+//# 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,29 +1,34 @@
 /**
  * range Interface
  */
-import { Accessibility } from '../../objects';
+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;
     inputName: string | undefined;
 }) => void;
-export interface RangeProps extends Accessibility {
+export interface RangeProps extends Accessibility, Dev, CommonProps {
     min: number;
     max: number;
     label?: string;
-    valueCursorMin?: number;
-    valueCursorMax?: number;
-    labelValueCursorMin?: string;
-    labelValueCursorMax?: string;
+    value?: number;
+    valueMin?: number;
+    valueMax?: number;
+    unit?: string;
     onChangeMin?: InputChangeEventHandlerWeb;
     onChangeMax?: InputChangeEventHandlerWeb;
-    nameMin?: string;
-    idMin?: string;
-    nameMax?: string;
-    idMax?: string;
+    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/RangeProps.js

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