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

package/lib/components/otp/Otp.js

@@ -1,130 +1,133 @@
-import { Text, TextMarkup } from '../text';
-import React, { useState, useMemo, useEffect } from 'react';
-import { TypographyColor } from '../../objects/Typography';
-import clsx from 'clsx';
+import { __assign, __read, __rest } from "tslib";
+import { Text, TextMarkup } from '../../components/text';
+import { useTrilogyContext } from '../../context/index';
 import { hashClass } from '../../helpers/hashClassesHelpers';
+import { TypographyColor } from '../../objects/Typography';
 import { is } from '../../services/classify';
-import { useTrilogyContext } from '../../context/index';
+import translation from '@trilogy-ds/locales/lib/otp';
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+import { ComponentName } from '../enumsComponentsName';
+var stringToCode = function (str, codeSize) {
+    if (!str)
+        return new Array(codeSize).fill(null);
+    return str.split('').map(function (char) { return (char === '' ? null : Number(char)); });
+};
+var codeToString = function (code) {
+    return code.map(function (char) { return (char === null ? '_' : char); }).join('');
+};
+var isCompleted = function (myCode) {
+    return myCode.every(function (code) { return code !== null; });
+};
+var focusToNextInput = function (target, value) {
+    var nextElementSibling = target.nextElementSibling;
+    if (nextElementSibling) {
+        if (value)
+            nextElementSibling.value = value;
+        if (target.value.length)
+            nextElementSibling.focus();
+    }
+    else {
+        target.focus();
+    }
+};
+var focusToPrevInput = function (target) {
+    var previousElementSibling = target.previousElementSibling;
+    if (previousElementSibling) {
+        previousElementSibling.focus();
+    }
+    else {
+        target.focus();
+    }
+};
+var updateCodeInput = function (value, index, code) {
+    var numberValue = Number(value);
+    if (isNaN(numberValue) || value.length < 1) {
+        return code;
+    }
+    var newCodeInput = code.map(function (code, idx) {
+        return idx === index ? Number(value.slice(0, 1)) : code;
+    });
+    return updateCodeInput(value.slice(1), index + 1, newCodeInput);
+};
+var inputOnKeyUp = function (e) {
+    var key = e.key;
+    var target = e.target;
+    if (key === 'ArrowRight' || key === 'ArrowDown') {
+        return focusToNextInput(target);
+    }
+    if (key === 'ArrowLeft' || key === 'ArrowUp') {
+        return focusToPrevInput(target);
+    }
+    if (key === 'Backspace') {
+        return target.value === '' && focusToPrevInput(target);
+    }
+    if (key >= '0' && key <= '9') {
+        focusToNextInput(target);
+    }
+};
+var formatTranslation = function (translation, x, y) {
+    return translation.replace(/:x/g, x).replace(/:y/g, y);
+};
 /**
  * OTP Code Component
- * @param className {string} Additionnal css classes
- * @param code {string} Code Text Input
- * @param codeSize {number} Code Size Number
+ * @param value {string} Code Text Input
+ * @param length {number} Code Size Number
  * @param disabled {boolean} Disabled OTP Code Input
  * @param error {boolean} OTP Code Input has error | Display error icon
  * @param onCompleted {Function} Return code input string
- * @param activated {boolean} Activated OTP
  * @param onChange {Function} onChange Input return current code
  * @param onFocus {Function} onFocus return if focused opt
  * @param autoFocus {boolean} Should auto focus otp
+ * @param label {string} Label for OTP
+ * @param help {string} error message to display
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional css classes
  */
-const Otp = ({ className, code, codeSize = 6, disabled, error, onCompleted, onChange, onFocus, activated, label, errorMessage, autoFocus, ...others }) => {
-    const [codeInput, setCodeInput] = useState(code || '');
-    const [, setFocused] = useState(false);
-    const { styled } = useTrilogyContext();
-    const testDigit = /^-?\d*\.?\d*$/;
-    const classes = hashClass(styled, clsx('otp-list', error && is('error'), activated && is('tertiary'), disabled && is('disabled'), className));
-    useEffect(() => {
-        if (!disabled && codeInput.length >= codeSize) {
-            onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeInput);
-        }
-    }, [codeSize, codeInput]);
-    const valueItems = useMemo(() => {
-        const valueArray = codeInput.split('');
-        const items = [];
-        for (let i = 0; i < codeSize; i++) {
-            const char = valueArray[i];
-            if (testDigit.test(char)) {
-                items.push(char);
-            }
-            else {
-                items.push('');
-            }
-        }
-        return items;
-    }, [codeInput, codeSize]);
-    const focusToNextInput = (target) => {
-        const nextElementSibling = target.nextElementSibling;
-        if (nextElementSibling) {
-            nextElementSibling.focus();
-        }
-    };
-    const focusToPrevInput = (target) => {
-        const previousElementSibling = target.previousElementSibling;
-        if (previousElementSibling) {
-            previousElementSibling.focus();
-        }
-    };
-    const inputOnChange = (e, idx) => {
-        const { target } = e;
-        let targetValue = target.value.trim();
-        const isTargetValueDigit = testDigit.test(targetValue);
-        if (!isTargetValueDigit && targetValue !== '') {
-            return;
+var Otp = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, value = _a.value, _b = _a.length, length = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, onCompleted = _a.onCompleted, onChange = _a.onChange, onFocus = _a.onFocus, label = _a.label, help = _a.help, autoFocus = _a.autoFocus, others = __rest(_a, ["className", "id", "value", "length", "disabled", "error", "onCompleted", "onChange", "onFocus", "label", "help", "autoFocus"]);
+    var _c = __read(useState(stringToCode(value, length) || new Array(length).fill(null)), 2), codeInput = _c[0], setCodeInput = _c[1];
+    var hasChanged = useRef(false);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('otp-list', error && is('error'), className));
+    useEffect(function () {
+        if (!disabled) {
+            isCompleted(codeInput) && (onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeToString(codeInput)));
         }
-        const nextInputEl = target.nextElementSibling;
-        if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== '') {
-            return;
+    }, [length, codeInput, onCompleted, disabled]);
+    useEffect(function () {
+        hasChanged.current = codeInput.find(function (code) { return code !== null; }) !== undefined;
+        if (hasChanged.current) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(codeToString(codeInput));
         }
-        targetValue = isTargetValueDigit ? targetValue : '';
-        const targetValueLength = targetValue.length;
-        if (targetValueLength === 1) {
-            const newValue = codeInput.substring(0, idx) + targetValue + codeInput.substring(idx + 1);
-            if (onChange) {
-                onChange(newValue);
-            }
-            setCodeInput(newValue);
-            if (!isTargetValueDigit) {
-                return;
-            }
-            focusToNextInput(target);
+    }, [codeInput]);
+    var inputOnChange = function (e, idx) {
+        var target = e.target;
+        var targetValue = target.value.trim();
+        if (targetValue.length > 0) {
+            setCodeInput(updateCodeInput(targetValue, idx, codeInput));
         }
-        else if (targetValueLength === codeSize) {
-            if (onChange) {
-                onChange(codeInput);
-            }
-            setCodeInput(targetValue);
-            target.blur();
+        else {
+            setCodeInput(codeInput.map(function (code, index) {
+                return index === idx ? null : code;
+            }));
         }
     };
-    const inputOnKeyDown = (e) => {
-        const { key } = e;
-        const target = e.target;
-        if (key === 'ArrowRight' || key === 'ArrowDown') {
-            e.preventDefault();
-            return focusToNextInput(target);
-        }
-        if (key === 'ArrowLeft' || key === 'ArrowUp') {
-            e.preventDefault();
-            return focusToPrevInput(target);
-        }
-        const targetValue = target.value;
-        target.setSelectionRange(0, targetValue.length);
-        if (e.key !== 'Backspace' || targetValue !== '') {
-            target.value = '';
-            return;
-        }
-        focusToPrevInput(target);
-    };
-    const inputOnFocus = (e) => {
-        const { target } = e;
-        const prevInputEl = target.previousElementSibling;
-        if (prevInputEl && prevInputEl.value === '') {
-            return prevInputEl.focus();
-        }
+    var inputOnFocus = function (e) {
+        var target = e.target;
         target.setSelectionRange(0, target.value.length);
     };
     return (React.createElement(React.Fragment, null,
-        label && (React.createElement(Text, { markup: TextMarkup.P, typo: (disabled && TypographyColor.TEXT_GREY) ||
+        label && (React.createElement(Text, { markup: TextMarkup.P, typo: (disabled && TypographyColor.TEXT_NEUTRAL) ||
                 (error && TypographyColor.TEXT_ERROR) ||
-                TypographyColor.TEXT_TERTIARY }, label)),
-        React.createElement("div", { "data-testid": 'otp-input', className: classes, onClick: () => {
+                TypographyColor.TEXT_MAIN }, label)),
+        React.createElement("div", { ref: ref, id: id, className: classes, onClick: function () {
                 if (!disabled) {
-                    setFocused(true);
                     onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
                 }
-            } }, valueItems.map((digit, idx) => (React.createElement("input", { key: idx, type: 'text', inputMode: 'numeric', autoComplete: 'one-time-code', autoFocus: idx === 0 && autoFocus, pattern: '\\d{1}', maxLength: codeSize, className: 'otp', value: digit, onKeyDown: inputOnKeyDown, onFocus: inputOnFocus, onChange: (e) => inputOnChange(e, idx), disabled: disabled, ...others })))),
-        errorMessage && (React.createElement(Text, { className: hashClass(styled, clsx('otp-error-message')), markup: TextMarkup.P, typo: (error && TypographyColor.TEXT_ERROR) || TypographyColor.TEXT_TERTIARY }, errorMessage))));
-};
+            } }, codeInput.map(function (digit, idx) { return (React.createElement("input", __assign({ "aria-disabled": disabled, key: idx, type: 'tel', inputMode: 'numeric', autoComplete: 'one-time-code', autoFocus: idx === 0 && autoFocus, pattern: '\\d{1}', maxLength: length, className: hashClass(styled, clsx('otp')), value: "".concat(digit !== null && digit !== void 0 ? digit : ''), onKeyUp: inputOnKeyUp, onFocus: inputOnFocus, onChange: function (e) { return inputOnChange(e, idx); }, disabled: disabled, title: formatTranslation(translation.inputTitle, String(idx + 1), String(length)) }, others))); })),
+        help && (React.createElement(Text, { className: hashClass(styled, clsx('help')), markup: TextMarkup.P, typo: (error && TypographyColor.TEXT_ERROR) || TypographyColor.TEXT_MAIN }, help))));
+});
+Otp.displayName = ComponentName.Otp;
 export default Otp;
-//# sourceMappingURL=Otp.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLFdBQVcsTUFBTSw2QkFBNkIsQ0FBQTtBQUNyRCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFLdEQsSUFBTSxZQUFZLEdBQUcsVUFBQyxHQUF1QixFQUFFLFFBQWdCO0lBQzdELElBQUksQ0FBQyxHQUFHO1FBQUUsT0FBTyxJQUFJLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUE7SUFDL0MsT0FBTyxHQUFHLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxVQUFDLElBQUksSUFBSyxPQUFBLENBQUMsSUFBSSxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBbkMsQ0FBbUMsQ0FBQyxDQUFBO0FBQ3pFLENBQUMsQ0FBQTtBQUVELElBQU0sWUFBWSxHQUFHLFVBQUMsSUFBb0I7SUFDeEMsT0FBTyxJQUFJLENBQUMsR0FBRyxD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

package/lib/components/otp/Otp.native.d.ts

@@ -1,19 +1,17 @@
-/// <reference types="react" />
+import React from 'react';
+import { SafeAreaView } from 'react-native';
 import { OtpProps } from './OtpProps';
-import { ComponentName } from '../enumsComponentsName';
 /**
  * OTP Code Component
- * @param code {string} Code Text Input
- * @param codeSize {number} Code Size Number
+ * @param value {string} Code Text Input
+ * @param length {number} Code Size Number
  * @param disabled {boolean} Disabled OTP Code Input
  * @param error {boolean} OTP Code Input has error | Display error icon
  * @param onCompleted {Function} Return code input string
  * @param onFocus {Function} onFocus return if focused opt
  * @param activated {boolean} Activated OTP
  * @param onChange {Function} onChange Input return current code
+ * @param label {string} Label for OTP
  */
-declare const Otp: {
-    ({ code, codeSize, disabled, error, onCompleted, onFocus, activated, onChange, label, ...others }: OtpProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Otp: React.ForwardRefExoticComponent<OtpProps & React.RefAttributes<SafeAreaView>>;
 export default Otp;

package/lib/components/otp/Otp.native.js

@@ -1,48 +1,47 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { SafeAreaView, StyleSheet, View, TextInput, Pressable } from 'react-native';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { Icon, IconSize, IconColor, IconName } from '../icon';
-import { Title, TitleLevels } from '../title';
-import { Text, TextLevels } from '../text';
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon, IconColor, IconName, IconSize } from '../../components/icon';
+import { Text, TextLevels } from '../../components/text';
+import { Title, TitleLevels } from '../../components/title';
 import { TypographyAlign } from '../../objects';
-import { ComponentName } from '../enumsComponentsName';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
+import React, { useEffect, useRef, useState } from 'react';
+import { Pressable, SafeAreaView, StyleSheet, TextInput, View } from 'react-native';
 /**
  * OTP Code Component
- * @param code {string} Code Text Input
- * @param codeSize {number} Code Size Number
+ * @param value {string} Code Text Input
+ * @param length {number} Code Size Number
  * @param disabled {boolean} Disabled OTP Code Input
  * @param error {boolean} OTP Code Input has error | Display error icon
  * @param onCompleted {Function} Return code input string
  * @param onFocus {Function} onFocus return if focused opt
  * @param activated {boolean} Activated OTP
  * @param onChange {Function} onChange Input return current code
+ * @param label {string} Label for OTP
  */
-const Otp = ({ code, codeSize = 6, disabled, error, onCompleted, onFocus, activated, onChange, label, ...others }) => {
-    const [codeInput, setCodeInput] = useState(code || '');
+var Otp = React.forwardRef(function (_a, ref) {
+    var value = _a.value, _b = _a.length, length = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, onCompleted = _a.onCompleted, onFocus = _a.onFocus, activated = _a.activated, onChange = _a.onChange, label = _a.label, others = __rest(_a, ["value", "length", "disabled", "error", "onCompleted", "onFocus", "activated", "onChange", "label"]);
+    var _c = __read(useState(value || ''), 2), codeInput = _c[0], setCodeInput = _c[1];
     // eslint-disable-next-line prefer-spread
-    const [codeDigitsArray] = useState(Array.apply(null, Array(codeSize)).map((_val, idx) => idx));
-    const [focused, setFocused] = useState(false);
-    const color = (disabled && getColorStyle(TrilogyColor.GREY)) ||
-        (activated && getColorStyle(TrilogyColor.GREY)) ||
-        (error && getColorStyle(TrilogyColor.ERROR)) ||
-        (focused && getColorStyle(TrilogyColor.TERTIARY)) ||
-        getColorStyle(TrilogyColor.GREY);
-    useEffect(() => {
+    var _d = __read(useState(__spreadArray([], __read(Array(length).keys()), false)), 1), codeDigitsArray = _d[0];
+    var _e = __read(useState(false), 2), focused = _e[0], setFocused = _e[1];
+    var color = getColorStyle(disabled ? TrilogyColor.DISABLED : error ? TrilogyColor.ERROR : TrilogyColor.MAIN);
+    useEffect(function () {
         if (/^-?\d*\.?\d*$/.test(codeInput) && !disabled) {
-            setCodeInput(code || '');
+            setCodeInput(value || '');
         }
-    }, [code]);
-    useEffect(() => {
-        if (!disabled && codeInput && codeInput.length >= codeSize) {
+    }, [value]);
+    useEffect(function () {
+        if (!disabled && codeInput && codeInput.length >= length) {
             onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeInput);
         }
-    }, [code, codeSize, codeInput]);
-    const ref = useRef(null);
-    const handleOnPress = () => {
+    }, [value, length, codeInput]);
+    var refInput = useRef(null);
+    var handleOnPress = function () {
         var _a;
-        (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const style = StyleSheet.create({
+    var style = StyleSheet.create({
         container: {
             flex: 1,
             alignItems: 'flex-start',
@@ -55,10 +54,13 @@ const Otp = ({ code, codeSize = 6, disabled, error, onCompleted, onFocus, activa
             alignItems: 'center',
         },
         inputContainer: {
-            borderColor: (disabled && getColorStyle(TrilogyColor.GREY)) ||
-                (activated && getColorStyle(TrilogyColor.GREY)) ||
-                (error && getColorStyle(TrilogyColor.ERROR)) ||
-                getColorStyle(TrilogyColor.GREY),
+            borderColor: getColorStyle(disabled
+                ? TrilogyColor.DISABLED
+                : activated
+                    ? TrilogyColor.MAIN
+                    : error
+                        ? TrilogyColor.ERROR
+                        : TrilogyColor.NEUTRAL),
             borderWidth: 1,
             borderRadius: 4,
             marginHorizontal: 5,
@@ -92,47 +94,47 @@ const Otp = ({ code, codeSize = 6, disabled, error, onCompleted, onFocus, activa
         currentInput: {
             width: 15,
             height: 1,
-            backgroundColor: (focused && getColorStyle(TrilogyColor.TERTIARY)) || 'transparent',
+            backgroundColor: getColorStyle(focused ? TrilogyColor.MAIN : 'transparent'),
         },
         text: {
             paddingLeft: 5,
-            marginBottom: 8,
             color: color,
         },
     });
-    const toDigitInput = (_value, idx) => {
-        const emptyInputChar = ' ';
-        const digit = codeInput[idx] || emptyInputChar;
+    var toDigitInput = function (_value, idx) {
+        var emptyInputChar = ' ';
+        var digit = codeInput[idx] || emptyInputChar;
         if (idx <= codeInput.length) {
             return (React.createElement(View, { key: idx, style: style.inputSelectedContainer },
-                React.createElement(Title, { typo: TypographyAlign.TEXT_CENTERED, level: TitleLevels.THREE }, digit),
+                React.createElement(Text, { typo: TypographyAlign.TEXT_CENTERED, level: TextLevels.TWO }, digit),
                 Boolean(idx === codeInput.length) && React.createElement(View, { style: style.currentInput })));
         }
         return (React.createElement(View, { key: idx, style: style.inputContainer },
-            React.createElement(Title, { level: TitleLevels.THREE }, digit)));
+            React.createElement(Title, { level: TitleLevels.FOUR }, digit)));
     };
-    return (React.createElement(SafeAreaView, { style: style.container, ...others },
-        React.createElement(View, { style: { flexDirection: 'row', alignItems: 'center' } },
-            Boolean(label) && (React.createElement(Text, { style: style.text, level: TextLevels.THREE }, label)),
-            error && (React.createElement(Icon, { style: style.icon, name: IconName.EXCLAMATION_CIRCLE, color: IconColor.ERROR, size: IconSize.SMALL }))),
-        React.createElement(Pressable, { style: style.inputsContainer, onPress: handleOnPress }, codeDigitsArray.map((_item, index) => (React.createElement(View, { key: index }, toDigitInput(index, index))))),
-        React.createElement(TextInput, { ref: ref, value: codeInput, onChangeText: (code) => {
+    return (React.createElement(SafeAreaView, __assign({ ref: ref, style: style.container }, others),
+        React.createElement(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 4, marginBottom: label ? 8 : undefined } },
+            Boolean(label) && (React.createElement(View, null,
+                React.createElement(Text, { style: style.text, level: TextLevels.FOUR }, label))),
+            error && React.createElement(Icon, { name: IconName.EXCLAMATION_CIRCLE, color: IconColor.ERROR, size: IconSize.SMALLER })),
+        React.createElement(Pressable, { style: style.inputsContainer, onPress: handleOnPress }, codeDigitsArray.map(function (_item, index) { return (React.createElement(View, { key: index }, toDigitInput(index, index))); })),
+        React.createElement(TextInput, { ref: refInput, value: codeInput, onChangeText: function (code) {
                 if (/^-?\d*\.?\d*$/.test(code) && !disabled) {
                     if (onChange) {
                         onChange(code);
                     }
                     setCodeInput(code);
                 }
-            }, keyboardType: 'numeric', returnKeyType: 'send', textContentType: 'oneTimeCode', maxLength: codeSize, onFocus: () => {
+            }, keyboardType: 'numeric', returnKeyType: 'send', textContentType: 'oneTimeCode', maxLength: length, onFocus: function () {
                 if (!disabled) {
                     setFocused(true);
                     onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
                 }
-            }, onBlur: () => {
+            }, onBlur: function () {
                 setFocused(false);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(false);
-            }, editable: !disabled, style: style.hiddenCodeInput })));
-};
+            }, editable: !disabled, style: style.hiddenCodeInput, testID: 'input-id' })));
+});
 Otp.displayName = ComponentName.Otp;
 export default Otp;
-//# sourceMappingURL=Otp.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvb3RwL090cC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3ZFLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUN2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzNDLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUduRjs7Ozs7Ozs7Ozs7R0FXRztBQUNILElBQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzFCLFVBQ0UsRUFBbUcsRUFDbkcsR0FBRztJQURELElBQUEsS0FBSyxXQUFBLEVBQUUsY0FBVSxFQUFWLE1BQU0sbUJBQUcsQ0FBQyxLQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLEtBQUssV0FBQSxFQUFLLE1BQU0sY0FBakcsb0dBQW1HLENBQUY7SUFHM0YsSUFBQSxLQUFBLE9BQTRCLFFBQVEsQ0FB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

package/lib/components/otp/OtpProps.d.ts

@@ -1,18 +1,20 @@
-/// <reference types="react" />
+import { SafeAreaView } from 'react-native';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Otp Interface
  */
-export interface OtpProps {
-    className?: string;
-    code?: string;
-    codeSize?: number;
+export interface OtpProps extends CommonProps {
+    value?: string;
+    length?: number;
     disabled?: boolean;
     error?: boolean;
+    help?: string;
     onCompleted?: (code?: string) => void;
     onFocus?: (focused: boolean) => void;
     onChange?: (code?: string) => void;
     activated?: boolean;
     label?: string;
-    errorMessage?: React.ReactNode | string;
     autoFocus?: boolean;
 }
+export type OtpRef = HTMLDivElement;
+export type OtpNativeRef = SafeAreaView;

package/lib/components/otp/OtpProps.js

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

package/lib/components/otp/OtpPropsDefaults.js

@@ -0,0 +1,97 @@
+export default {
+  "value": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "length": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "number"
+    ]
+  },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "error": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "help": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "onCompleted": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "(code?: string | undefined) => void"
+    ]
+  },
+  "onFocus": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "(focused: boolean) => void"
+    ]
+  },
+  "onChange": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "(code?: string | undefined) => void"
+    ]
+  },
+  "activated": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "autoFocus": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/otp/index.js

@@ -1,3 +1,3 @@
 import Otp from './Otp';
 export { Otp };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL290cC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxPQUFPLENBQUE7QUFFdkIsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFBIn0=

package/lib/components/pagination/Pagination.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
+import React from 'react';
 import { PaginationProps } from './PaginationProps';
 /**
  * Pagination Component
- * @param count {number} Number elements
+ * @param length {number} Number of pages
  * @param defaultPage {number} Current default active page (default is 1)
- * @param pageSize {number} Element per page (default is 10)
  * @param onClick {Function} Return pagination object
  * * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal css classes
+ * @param className {string} Additional css classes
  * @param href {Function} Function that generates a link for seo bots
+ * @param testId {string} Test Id for Test Integration
  */
-declare const Pagination: ({ className, count, defaultPage, pageSize, onClick, testId, href, ...others }: PaginationProps) => JSX.Element;
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
 export default Pagination;