@telus-uds/components-base 1.29.0 → 1.30.1

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 07 Mar 2023 21:07:23 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Mar 2023 20:46:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.30.1
+
+Thu, 23 Mar 2023 20:46:10 GMT
+
+### Patches
+
+- Bump @telus-uds/system-theme-tokens to v2.14.0
+
+## 1.30.0
+
+Mon, 20 Mar 2023 19:48:47 GMT
+
+### Minor changes
+
+- Password variant added to PM, koodo, Telus and Rebrand-PM (akshay.pandey1@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.13.0
+
 ## 1.29.0
 
-Tue, 07 Mar 2023 21:07:23 GMT
+Tue, 07 Mar 2023 21:13:39 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -6,6 +6,20 @@
         "thickness": "border",
         "color": "color"
       },
+      "Badge": {
+        "fontWeight": "fontWeight",
+        "fontName": "fontName",
+        "backgroundColor": "color",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "borderWidth": "border",
+        "color": "color",
+        "gradient": "gradient",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size"
+      },
       "Box": {
         "backgroundColor": "color",
         "gradient": "gradient"
@@ -886,6 +900,8 @@
         "borderWidth": "border",
         "borderColor": "color",
         "borderRadius": "radius",
+        "passwordShowButtonIcon": "icon",
+        "passwordHideButtonIcon": "icon",
         "buttonSize": "size",
         "buttonsGap": "size",
         "buttonsPaddingRight": "size",
@@ -9716,6 +9732,55 @@
         }
       }
     },
+    "Validator": {
+      "docs": {
+        "description": "",
+        "props": {
+          "value": {
+            "defaultValue": {
+              "value": "''",
+              "computed": false
+            },
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize"
+          },
+          "tokens": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
+            "required": false
+          },
+          "variant": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
+            "required": false
+          },
+          "inactive": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, the component is inactive and non editable."
+          },
+          "onChange": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument."
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "ViewportProvider": {
       "docs": {
         "description": "Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook",
@@ -13061,6 +13126,8 @@
                 "borderWidth": "border",
                 "borderColor": "color",
                 "borderRadius": "radius",
+                "passwordShowButtonIcon": "icon",
+                "passwordHideButtonIcon": "icon",
                 "buttonSize": "size",
                 "buttonsGap": "size",
                 "buttonsPaddingRight": "size",
@@ -13170,6 +13237,8 @@
                 "borderWidth": "border",
                 "borderColor": "color",
                 "borderRadius": "radius",
+                "passwordShowButtonIcon": "icon",
+                "passwordHideButtonIcon": "icon",
                 "buttonSize": "size",
                 "buttonsGap": "size",
                 "buttonsPaddingRight": "size",

package/lib/TextInput/TextInputBase.js

@@ -183,6 +183,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     ...rest
   } = _ref6;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [showPassword, setShowPassword] = (0, _react.useState)(false);
 
   const handleFocus = event => {
     setIsFocused(true);
@@ -244,27 +245,35 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     inactive
   };
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
+
+  const handleClear = event => {
+    var _inputRef$current;
+
+    onClear === null || onClear === void 0 ? void 0 : onClear(event);
+    resetValue(event);
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  };
+
+  const handleShowOrHide = () => {
+    if (!variant.inactive) setShowPassword(!showPassword);
+  };
+
   const {
     buttonsGap,
     clearButtonIcon: ClearButtonIcon,
-    icon: IconComponent
+    icon: IconComponent,
+    passwordShowButtonIcon,
+    passwordHideButtonIcon
   } = themeTokens;
   const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
   const getCopy = (0, _utils.useCopy)({
     dictionary: _dictionary.default,
     copy
   });
+  const textInputButtons = buttons;
 
   if (onClear && isDirty) {
-    const handleClear = event => {
-      var _inputRef$current;
-
-      onClear === null || onClear === void 0 ? void 0 : onClear(event);
-      resetValue(event);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    };
-
-    buttons === null || buttons === void 0 ? void 0 : buttons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
       icon: ClearButtonIcon,
       onPress: handleClear,
@@ -274,6 +283,19 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     }, "clear"));
   }
 
+  if (variant.password) {
+    textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      accessibilityLabel: !showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
+      icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
+      onPress: handleShowOrHide,
+      variant: {
+        compact: true,
+        password: true,
+        inactive: !!variant.inactive
+      }
+    }, !showPassword ? 'hide' : 'show'));
+  }
+
   const inputProps = { ...selectProps(rest),
     editable: !inactive,
     onFocus: handleFocus,
@@ -297,6 +319,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
       ref: inputRef,
       style: nativeInputStyle,
+      secureTextEntry: variant.password && !showPassword,
       ...inputProps
     }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       pointerEvents: "none" // avoid hijacking input press events
@@ -311,7 +334,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
         direction: "row",
         space: buttonsGap,
-        children: buttons
+        children: textInputButtons
       })
     })]
   });

package/lib/TextInput/dictionary.js

@@ -6,10 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = {
   en: {
-    clearButtonAccessibilityLabel: 'Clear'
+    clearButtonAccessibilityLabel: 'Clear',
+    showPasswordAccessibilityLabel: 'Show Password',
+    hidePasswordAccessibilityLabel: 'Hide Password'
   },
   fr: {
-    clearButtonAccessibilityLabel: 'Effacer'
+    clearButtonAccessibilityLabel: 'Effacer',
+    showPasswordAccessibilityLabel: 'montrer le mot de passe',
+    hidePasswordAccessibilityLabel: 'masquer le mot de passe'
   }
 };
 exports.default = _default;

package/lib/Validator/Validator.js

@@ -0,0 +1,272 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _utils = require("../utils");
+
+var _TextInput = require("../TextInput");
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _InputSupports = _interopRequireDefault(require("../InputSupports"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.inputSupportsProps]);
+
+const selectCodeTextInputTokens = _ref => {
+  let {
+    outerBorderColor,
+    outerBackgroundColor
+  } = _ref;
+  return {
+    outerBorderColor,
+    outerBackgroundColor,
+    icon: null
+  };
+};
+
+const Validator = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    value = '',
+    inactive,
+    onChange,
+    tokens = {},
+    variant = {},
+    ...rest
+  } = _ref2;
+  const defaultRef = (0, _react.useRef)();
+  const codeRef = ref !== null && ref !== void 0 ? ref : defaultRef;
+  const {
+    supportsProps
+  } = selectProps(rest);
+  const strValidation = supportsProps.validation;
+  const [individualCodes, setIndividualCodes] = (0, _react.useState)({});
+  const [text, setText] = (0, _react.useState)(value);
+  const validatorsLength = 6;
+  const prefix = 'code';
+  const sufixValidation = 'Validation';
+  const [isHover, setIsHover] = (0, _react.useState)(false);
+
+  const handleMouseOver = () => {
+    setIsHover(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsHover(false);
+  };
+
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, {
+    hover: isHover
+  });
+  const [codeReferences, singleCodes] = (0, _react.useMemo)(() => {
+    const codes = [];
+    const valueCodes = {};
+
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      codes[prefix + i] = /*#__PURE__*/(0, _react.createRef)();
+      valueCodes[prefix + i] = '';
+      valueCodes[prefix + i + sufixValidation] = '';
+    }
+
+    return [codes, valueCodes];
+  }, []);
+
+  const handleSingleCodes = (codeId, val, validation) => {
+    singleCodes[codeId] = val;
+    singleCodes[codeId + sufixValidation] = validation;
+    /* eslint-disable no-unused-expressions */
+
+    setIndividualCodes({ ...individualCodes,
+      [codeId]: val
+    });
+  };
+
+  const handleChangeCode = () => {
+    let code = '';
+
+    for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
+
+    if (typeof onChange === 'function') onChange(code, singleCodes);
+  };
+
+  const handleChangeCodeValues = (event, codeId, nextIndex) => {
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2, _codeElement$value3;
+
+    const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
+    const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+
+    if (Number(val).toString() === 'NaN') {
+      var _singleCodes$codeId;
+
+      codeElement.value = (_singleCodes$codeId = singleCodes[codeId]) !== null && _singleCodes$codeId !== void 0 ? _singleCodes$codeId : '';
+      return;
+    }
+
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 1) {
+      const oldValue = singleCodes[codeId];
+      const newValue = codeElement.value.replace(oldValue, '');
+      codeElement.value = newValue;
+      handleSingleCodes(codeId, codeElement.value, 'success');
+    }
+
+    handleSingleCodes(codeId, (_codeElement$value2 = codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) !== null && _codeElement$value2 !== void 0 ? _codeElement$value2 : singleCodes[codeId], 'success');
+    handleChangeCode();
+
+    if (nextIndex === validatorsLength) {
+      codeElement.blur();
+      return;
+    }
+
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value3 = codeElement.value) === null || _codeElement$value3 === void 0 ? void 0 : _codeElement$value3.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+  };
+
+  const handleKeyPress = (event, currentIndex, previousIndex) => {
+    if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
+
+    if (currentIndex > 0) {
+      codeReferences[prefix + currentIndex].current.value = '';
+      codeReferences[prefix + previousIndex].current.focus();
+    }
+
+    handleSingleCodes(prefix + currentIndex, '', '');
+    handleChangeCode();
+  };
+
+  const getCodeComponents = () => {
+    const components = [];
+
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      var _codeReferences$codeI2;
+
+      const codeId = prefix + i;
+      const codeInputProps = {
+        nativeID: codeId,
+        ref: (_codeReferences$codeI2 = codeReferences[codeId]) !== null && _codeReferences$codeI2 !== void 0 ? _codeReferences$codeI2 : null,
+        validation: strValidation || singleCodes[codeId + sufixValidation],
+        tokens: selectCodeTextInputTokens(themeTokens),
+        onFocus: () => codeReferences[codeId].current.select(),
+        onKeyPress: event => handleKeyPress(event, i, i - 1),
+        onMouseOver: handleMouseOver,
+        onMouseOut: handleMouseOut,
+        inactive
+      };
+      codeInputProps.validation || delete codeInputProps.validation;
+      components.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.codeInputWidth,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, { ...codeInputProps
+        })
+      }, codeId));
+    }
+
+    return components;
+  };
+
+  (0, _react.useEffect)(() => {
+    /* eslint-disable no-unused-expressions */
+    if (Number(value).toString() !== 'NaN') setText(value);
+  }, [value]);
+  /* eslint-disable react-hooks/exhaustive-deps */
+
+  (0, _react.useEffect)(() => {
+    for (let i = 0; i < validatorsLength; i += 1) {
+      var _text$i, _text$i2;
+
+      codeReferences[prefix + i].current.value = (_text$i = text[i]) !== null && _text$i !== void 0 ? _text$i : '';
+      handleSingleCodes(prefix + i, (_text$i2 = text[i]) !== null && _text$i2 !== void 0 ? _text$i2 : '', text[i] ? 'success' : '');
+    }
+  }, [text]);
+  /* eslint-disable react-hooks/exhaustive-deps */
+
+  (0, _react.useEffect)(() => {
+    const handlePasteCode = event => {
+      setText('');
+      const clipBoardText = event.clipboardData.getData('text');
+      if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText);
+    };
+
+    const handleCopy = event => {
+      let clipBoardText = '';
+
+      for (let i = 0; i < validatorsLength; i += 1) singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i]);
+
+      event.clipboardData.setData('text/plain', clipBoardText);
+      event.preventDefault();
+    };
+
+    if (_Platform.default.OS === 'web') {
+      for (let i = 0; i < validatorsLength; i += 1) {
+        codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode);
+        codeReferences[prefix + i].current.addEventListener('copy', handleCopy);
+        codeReferences[prefix + i].current.addEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+      }
+    }
+
+    return () => {
+      if (_Platform.default.oldValue === 'web') {
+        for (let i = 0; i < validatorsLength; i += 1) {
+          var _codeReferences, _codeReferences$curre, _codeReferences2, _codeReferences2$curr, _codeReferences3, _codeReferences3$curr;
+
+          (_codeReferences = codeReferences[prefix + i]) === null || _codeReferences === void 0 ? void 0 : (_codeReferences$curre = _codeReferences.current) === null || _codeReferences$curre === void 0 ? void 0 : _codeReferences$curre.removeEventListener('paste', handlePasteCode);
+          (_codeReferences2 = codeReferences[prefix + i]) === null || _codeReferences2 === void 0 ? void 0 : (_codeReferences2$curr = _codeReferences2.current) === null || _codeReferences2$curr === void 0 ? void 0 : _codeReferences2$curr.removeEventListener('copy', handleCopy);
+          (_codeReferences3 = codeReferences[prefix + i]) === null || _codeReferences3 === void 0 ? void 0 : (_codeReferences3$curr = _codeReferences3.current) === null || _codeReferences3$curr === void 0 ? void 0 : _codeReferences3$curr.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+        }
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      space: 2,
+      direction: "row",
+      ref: codeRef,
+      children: getCodeComponents()
+    })
+  });
+});
+Validator.displayName = 'Validator';
+Validator.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
+   */
+  value: _propTypes.default.string,
+
+  /**
+   * If true, the component is inactive and non editable.
+   */
+  inactive: _propTypes.default.bool,
+
+  /**
+   * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
+   */
+  onChange: _propTypes.default.func
+};
+var _default = Validator;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  codeInputWidth: {
+    width: 43
+  }
+});

package/lib/Validator/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Validator = _interopRequireDefault(require("./Validator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Validator.default;
+exports.default = _default;

package/lib/index.js

@@ -52,6 +52,7 @@ var _exportNames = {
   useA11yInfo: true,
   BaseProvider: true,
   useHydrationContext: true,
+  Validator: true,
   ViewportProvider: true,
   useViewport: true,
   ViewportContext: true,
@@ -353,6 +354,12 @@ Object.defineProperty(exports, "Typography", {
     return _Typography.default;
   }
 });
+Object.defineProperty(exports, "Validator", {
+  enumerable: true,
+  get: function () {
+    return _Validator.default;
+  }
+});
 Object.defineProperty(exports, "ViewportContext", {
   enumerable: true,
   get: function () {
@@ -654,6 +661,8 @@ var _BaseProvider = _interopRequireDefault(require("./BaseProvider"));
 
 var _HydrationContext = require("./BaseProvider/HydrationContext");
 
+var _Validator = _interopRequireDefault(require("./Validator"));
+
 var _ViewportProvider = _interopRequireWildcard(require("./ViewportProvider"));
 
 var _ThemeProvider = _interopRequireWildcard(require("./ThemeProvider"));

package/lib/utils/props/handlerProps.js

@@ -88,7 +88,12 @@ const textInputHandlerProps = {
     /**
      * onKeyDown handler (only supported on Web)
      */
-    onKeyDown: _propTypes.default.func
+    onMouseOver: _propTypes.default.func,
+
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onMouseOut: _propTypes.default.func
   }
 };
 exports.textInputHandlerProps = textInputHandlerProps;

package/lib-module/TextInput/TextInputBase.js

@@ -157,6 +157,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     ...rest
   } = _ref6;
   const [isFocused, setIsFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
   const handleFocus = event => {
     setIsFocused(true);
@@ -218,27 +219,35 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     inactive
   };
   const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
+
+  const handleClear = event => {
+    var _inputRef$current;
+
+    onClear === null || onClear === void 0 ? void 0 : onClear(event);
+    resetValue(event);
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  };
+
+  const handleShowOrHide = () => {
+    if (!variant.inactive) setShowPassword(!showPassword);
+  };
+
   const {
     buttonsGap,
     clearButtonIcon: ClearButtonIcon,
-    icon: IconComponent
+    icon: IconComponent,
+    passwordShowButtonIcon,
+    passwordHideButtonIcon
   } = themeTokens;
   const buttonsGapSize = useSpacingScale(buttonsGap);
   const getCopy = useCopy({
     dictionary,
     copy
   });
+  const textInputButtons = buttons;
 
   if (onClear && isDirty) {
-    const handleClear = event => {
-      var _inputRef$current;
-
-      onClear === null || onClear === void 0 ? void 0 : onClear(event);
-      resetValue(event);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    };
-
-    buttons === null || buttons === void 0 ? void 0 : buttons.unshift( /*#__PURE__*/_jsx(IconButton, {
+    textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
       icon: ClearButtonIcon,
       onPress: handleClear,
@@ -248,6 +257,19 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     }, "clear"));
   }
 
+  if (variant.password) {
+    textInputButtons === null || textInputButtons === void 0 ? void 0 : textInputButtons.unshift( /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: !showPassword ? getCopy('hidePasswordAccessibilityLabel') : getCopy('showPasswordAccessibilityLabel'),
+      icon: !showPassword ? passwordShowButtonIcon : passwordHideButtonIcon,
+      onPress: handleShowOrHide,
+      variant: {
+        compact: true,
+        password: true,
+        inactive: !!variant.inactive
+      }
+    }, !showPassword ? 'hide' : 'show'));
+  }
+
   const inputProps = { ...selectProps(rest),
     editable: !inactive,
     onFocus: handleFocus,
@@ -271,6 +293,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     children: [/*#__PURE__*/_jsx(NativeTextInput, {
       ref: inputRef,
       style: nativeInputStyle,
+      secureTextEntry: variant.password && !showPassword,
       ...inputProps
     }), IconComponent && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none" // avoid hijacking input press events
@@ -285,7 +308,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
       children: /*#__PURE__*/_jsx(StackView, {
         direction: "row",
         space: buttonsGap,
-        children: buttons
+        children: textInputButtons
       })
     })]
   });

package/lib-module/TextInput/dictionary.js

@@ -1,8 +1,12 @@
 export default {
   en: {
-    clearButtonAccessibilityLabel: 'Clear'
+    clearButtonAccessibilityLabel: 'Clear',
+    showPasswordAccessibilityLabel: 'Show Password',
+    hidePasswordAccessibilityLabel: 'Hide Password'
   },
   fr: {
-    clearButtonAccessibilityLabel: 'Effacer'
+    clearButtonAccessibilityLabel: 'Effacer',
+    showPasswordAccessibilityLabel: 'montrer le mot de passe',
+    hidePasswordAccessibilityLabel: 'masquer le mot de passe'
   }
 };

package/lib-module/Validator/Validator.js

@@ -0,0 +1,246 @@
+import React, { forwardRef, createRef, useRef, useMemo, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { inputSupportsProps, selectSystemProps } from '../utils';
+import { TextInput } from '../TextInput';
+import StackView from '../StackView';
+import InputSupports from '../InputSupports';
+import { useThemeTokens } from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([inputSupportsProps]);
+
+const selectCodeTextInputTokens = _ref => {
+  let {
+    outerBorderColor,
+    outerBackgroundColor
+  } = _ref;
+  return {
+    outerBorderColor,
+    outerBackgroundColor,
+    icon: null
+  };
+};
+
+const Validator = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    value = '',
+    inactive,
+    onChange,
+    tokens = {},
+    variant = {},
+    ...rest
+  } = _ref2;
+  const defaultRef = useRef();
+  const codeRef = ref !== null && ref !== void 0 ? ref : defaultRef;
+  const {
+    supportsProps
+  } = selectProps(rest);
+  const strValidation = supportsProps.validation;
+  const [individualCodes, setIndividualCodes] = useState({});
+  const [text, setText] = useState(value);
+  const validatorsLength = 6;
+  const prefix = 'code';
+  const sufixValidation = 'Validation';
+  const [isHover, setIsHover] = useState(false);
+
+  const handleMouseOver = () => {
+    setIsHover(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsHover(false);
+  };
+
+  const themeTokens = useThemeTokens('TextInput', tokens, variant, {
+    hover: isHover
+  });
+  const [codeReferences, singleCodes] = useMemo(() => {
+    const codes = [];
+    const valueCodes = {};
+
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      codes[prefix + i] = /*#__PURE__*/createRef();
+      valueCodes[prefix + i] = '';
+      valueCodes[prefix + i + sufixValidation] = '';
+    }
+
+    return [codes, valueCodes];
+  }, []);
+
+  const handleSingleCodes = (codeId, val, validation) => {
+    singleCodes[codeId] = val;
+    singleCodes[codeId + sufixValidation] = validation;
+    /* eslint-disable no-unused-expressions */
+
+    setIndividualCodes({ ...individualCodes,
+      [codeId]: val
+    });
+  };
+
+  const handleChangeCode = () => {
+    let code = '';
+
+    for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
+
+    if (typeof onChange === 'function') onChange(code, singleCodes);
+  };
+
+  const handleChangeCodeValues = (event, codeId, nextIndex) => {
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2, _codeElement$value3;
+
+    const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
+    const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+
+    if (Number(val).toString() === 'NaN') {
+      var _singleCodes$codeId;
+
+      codeElement.value = (_singleCodes$codeId = singleCodes[codeId]) !== null && _singleCodes$codeId !== void 0 ? _singleCodes$codeId : '';
+      return;
+    }
+
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 1) {
+      const oldValue = singleCodes[codeId];
+      const newValue = codeElement.value.replace(oldValue, '');
+      codeElement.value = newValue;
+      handleSingleCodes(codeId, codeElement.value, 'success');
+    }
+
+    handleSingleCodes(codeId, (_codeElement$value2 = codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) !== null && _codeElement$value2 !== void 0 ? _codeElement$value2 : singleCodes[codeId], 'success');
+    handleChangeCode();
+
+    if (nextIndex === validatorsLength) {
+      codeElement.blur();
+      return;
+    }
+
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value3 = codeElement.value) === null || _codeElement$value3 === void 0 ? void 0 : _codeElement$value3.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+  };
+
+  const handleKeyPress = (event, currentIndex, previousIndex) => {
+    if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
+
+    if (currentIndex > 0) {
+      codeReferences[prefix + currentIndex].current.value = '';
+      codeReferences[prefix + previousIndex].current.focus();
+    }
+
+    handleSingleCodes(prefix + currentIndex, '', '');
+    handleChangeCode();
+  };
+
+  const getCodeComponents = () => {
+    const components = [];
+
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      var _codeReferences$codeI2;
+
+      const codeId = prefix + i;
+      const codeInputProps = {
+        nativeID: codeId,
+        ref: (_codeReferences$codeI2 = codeReferences[codeId]) !== null && _codeReferences$codeI2 !== void 0 ? _codeReferences$codeI2 : null,
+        validation: strValidation || singleCodes[codeId + sufixValidation],
+        tokens: selectCodeTextInputTokens(themeTokens),
+        onFocus: () => codeReferences[codeId].current.select(),
+        onKeyPress: event => handleKeyPress(event, i, i - 1),
+        onMouseOver: handleMouseOver,
+        onMouseOut: handleMouseOut,
+        inactive
+      };
+      codeInputProps.validation || delete codeInputProps.validation;
+      components.push( /*#__PURE__*/_jsx(View, {
+        style: staticStyles.codeInputWidth,
+        children: /*#__PURE__*/_jsx(TextInput, { ...codeInputProps
+        })
+      }, codeId));
+    }
+
+    return components;
+  };
+
+  useEffect(() => {
+    /* eslint-disable no-unused-expressions */
+    if (Number(value).toString() !== 'NaN') setText(value);
+  }, [value]);
+  /* eslint-disable react-hooks/exhaustive-deps */
+
+  useEffect(() => {
+    for (let i = 0; i < validatorsLength; i += 1) {
+      var _text$i, _text$i2;
+
+      codeReferences[prefix + i].current.value = (_text$i = text[i]) !== null && _text$i !== void 0 ? _text$i : '';
+      handleSingleCodes(prefix + i, (_text$i2 = text[i]) !== null && _text$i2 !== void 0 ? _text$i2 : '', text[i] ? 'success' : '');
+    }
+  }, [text]);
+  /* eslint-disable react-hooks/exhaustive-deps */
+
+  useEffect(() => {
+    const handlePasteCode = event => {
+      setText('');
+      const clipBoardText = event.clipboardData.getData('text');
+      if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText);
+    };
+
+    const handleCopy = event => {
+      let clipBoardText = '';
+
+      for (let i = 0; i < validatorsLength; i += 1) singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i]);
+
+      event.clipboardData.setData('text/plain', clipBoardText);
+      event.preventDefault();
+    };
+
+    if (Platform.OS === 'web') {
+      for (let i = 0; i < validatorsLength; i += 1) {
+        codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode);
+        codeReferences[prefix + i].current.addEventListener('copy', handleCopy);
+        codeReferences[prefix + i].current.addEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+      }
+    }
+
+    return () => {
+      if (Platform.oldValue === 'web') {
+        for (let i = 0; i < validatorsLength; i += 1) {
+          var _codeReferences, _codeReferences$curre, _codeReferences2, _codeReferences2$curr, _codeReferences3, _codeReferences3$curr;
+
+          (_codeReferences = codeReferences[prefix + i]) === null || _codeReferences === void 0 ? void 0 : (_codeReferences$curre = _codeReferences.current) === null || _codeReferences$curre === void 0 ? void 0 : _codeReferences$curre.removeEventListener('paste', handlePasteCode);
+          (_codeReferences2 = codeReferences[prefix + i]) === null || _codeReferences2 === void 0 ? void 0 : (_codeReferences2$curr = _codeReferences2.current) === null || _codeReferences2$curr === void 0 ? void 0 : _codeReferences2$curr.removeEventListener('copy', handleCopy);
+          (_codeReferences3 = codeReferences[prefix + i]) === null || _codeReferences3 === void 0 ? void 0 : (_codeReferences3$curr = _codeReferences3.current) === null || _codeReferences3$curr === void 0 ? void 0 : _codeReferences3$curr.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+        }
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
+    children: /*#__PURE__*/_jsx(StackView, {
+      space: 2,
+      direction: "row",
+      ref: codeRef,
+      children: getCodeComponents()
+    })
+  });
+});
+Validator.displayName = 'Validator';
+Validator.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
+   */
+  value: PropTypes.string,
+
+  /**
+   * If true, the component is inactive and non editable.
+   */
+  inactive: PropTypes.bool,
+
+  /**
+   * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
+   */
+  onChange: PropTypes.func
+};
+export default Validator;
+const staticStyles = StyleSheet.create({
+  codeInputWidth: {
+    width: 43
+  }
+});

package/lib-module/Validator/index.js

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

package/lib-module/index.js

@@ -52,6 +52,7 @@ export { default as Typography } from './Typography';
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
 export { useHydrationContext } from './BaseProvider/HydrationContext';
+export { default as Validator } from './Validator';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
 export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
 export * from './utils';

package/lib-module/utils/props/handlerProps.js

@@ -75,7 +75,12 @@ const textInputHandlerProps = {
     /**
      * onKeyDown handler (only supported on Web)
      */
-    onKeyDown: PropTypes.func
+    onMouseOver: PropTypes.func,
+
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onMouseOut: PropTypes.func
   }
 };
 const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types);

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.12.0",
+    "@telus-uds/system-theme-tokens": "^2.14.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.29.0"
+  "version": "1.30.1"
 }

package/src/TextInput/TextInputBase.jsx

@@ -157,6 +157,7 @@ const TextInputBase = forwardRef(
     ref
   ) => {
     const [isFocused, setIsFocused] = useState(false)
+    const [showPassword, setShowPassword] = useState(false)
     const handleFocus = (event) => {
       setIsFocused(true)
       if (typeof onFocus === 'function') onFocus(event)
@@ -206,16 +207,29 @@ const TextInputBase = forwardRef(
 
     const themeTokens = useThemeTokens('TextInput', tokens, variant, states)
 
-    const { buttonsGap, clearButtonIcon: ClearButtonIcon, icon: IconComponent } = themeTokens
+    const handleClear = (event) => {
+      onClear?.(event)
+      resetValue(event)
+      inputRef?.current?.focus()
+    }
+
+    const handleShowOrHide = () => {
+      if (!variant.inactive) setShowPassword(!showPassword)
+    }
+
+    const {
+      buttonsGap,
+      clearButtonIcon: ClearButtonIcon,
+      icon: IconComponent,
+      passwordShowButtonIcon,
+      passwordHideButtonIcon
+    } = themeTokens
     const buttonsGapSize = useSpacingScale(buttonsGap)
     const getCopy = useCopy({ dictionary, copy })
+    const textInputButtons = buttons
+
     if (onClear && isDirty) {
-      const handleClear = (event) => {
-        onClear?.(event)
-        resetValue(event)
-        inputRef?.current?.focus()
-      }
-      buttons?.unshift(
+      textInputButtons?.unshift(
         <IconButton
           accessibilityLabel={getCopy('clearButtonAccessibilityLabel')}
           icon={ClearButtonIcon}
@@ -226,6 +240,22 @@ const TextInputBase = forwardRef(
       )
     }
 
+    if (variant.password) {
+      textInputButtons?.unshift(
+        <IconButton
+          accessibilityLabel={
+            !showPassword
+              ? getCopy('hidePasswordAccessibilityLabel')
+              : getCopy('showPasswordAccessibilityLabel')
+          }
+          icon={!showPassword ? passwordShowButtonIcon : passwordHideButtonIcon}
+          key={!showPassword ? 'hide' : 'show'}
+          onPress={handleShowOrHide}
+          variant={{ compact: true, password: true, inactive: !!variant.inactive }}
+        />
+      )
+    }
+
     const inputProps = {
       ...selectProps(rest),
       editable: !inactive,
@@ -245,7 +275,12 @@ const TextInputBase = forwardRef(
 
     return (
       <View style={selectOuterBorderStyles(themeTokens)}>
-        <NativeTextInput ref={inputRef} style={nativeInputStyle} {...inputProps} />
+        <NativeTextInput
+          ref={inputRef}
+          style={nativeInputStyle}
+          secureTextEntry={variant.password && !showPassword}
+          {...inputProps}
+        />
         {IconComponent && (
           <View
             pointerEvents="none" // avoid hijacking input press events
@@ -260,7 +295,7 @@ const TextInputBase = forwardRef(
         {buttons?.length > 0 && (
           <View style={[staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)]}>
             <StackView direction="row" space={buttonsGap}>
-              {buttons}
+              {textInputButtons}
             </StackView>
           </View>
         )}

package/src/TextInput/dictionary.js

@@ -1,8 +1,12 @@
 export default {
   en: {
-    clearButtonAccessibilityLabel: 'Clear'
+    clearButtonAccessibilityLabel: 'Clear',
+    showPasswordAccessibilityLabel: 'Show Password',
+    hidePasswordAccessibilityLabel: 'Hide Password'
   },
   fr: {
-    clearButtonAccessibilityLabel: 'Effacer'
+    clearButtonAccessibilityLabel: 'Effacer',
+    showPasswordAccessibilityLabel: 'montrer le mot de passe',
+    hidePasswordAccessibilityLabel: 'masquer le mot de passe'
   }
 }

package/src/Validator/Validator.jsx

@@ -0,0 +1,217 @@
+import React, { forwardRef, createRef, useRef, useMemo, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform } from 'react-native'
+import { inputSupportsProps, selectSystemProps } from '../utils'
+import { TextInput } from '../TextInput'
+import StackView from '../StackView'
+import InputSupports from '../InputSupports'
+import { useThemeTokens } from '../ThemeProvider'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([inputSupportsProps])
+
+const selectCodeTextInputTokens = ({ outerBorderColor, outerBackgroundColor }) => {
+  return {
+    outerBorderColor,
+    outerBackgroundColor,
+    icon: null
+  }
+}
+
+const Validator = forwardRef(
+  ({ value = '', inactive, onChange, tokens = {}, variant = {}, ...rest }, ref) => {
+    const defaultRef = useRef()
+    const codeRef = ref ?? defaultRef
+
+    const { supportsProps } = selectProps(rest)
+    const strValidation = supportsProps.validation
+    const [individualCodes, setIndividualCodes] = useState({})
+    const [text, setText] = useState(value)
+    const validatorsLength = 6
+    const prefix = 'code'
+    const sufixValidation = 'Validation'
+
+    const [isHover, setIsHover] = useState(false)
+    const handleMouseOver = () => {
+      setIsHover(true)
+    }
+
+    const handleMouseOut = () => {
+      setIsHover(false)
+    }
+
+    const themeTokens = useThemeTokens('TextInput', tokens, variant, { hover: isHover })
+
+    const [codeReferences, singleCodes] = useMemo(() => {
+      const codes = []
+      const valueCodes = {}
+      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+        codes[prefix + i] = createRef()
+        valueCodes[prefix + i] = ''
+        valueCodes[prefix + i + sufixValidation] = ''
+      }
+      return [codes, valueCodes]
+    }, [])
+
+    const handleSingleCodes = (codeId, val, validation) => {
+      singleCodes[codeId] = val
+      singleCodes[codeId + sufixValidation] = validation
+      /* eslint-disable no-unused-expressions */
+      setIndividualCodes({
+        ...individualCodes,
+        [codeId]: val
+      })
+    }
+
+    const handleChangeCode = () => {
+      let code = ''
+      for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i]
+      if (typeof onChange === 'function') onChange(code, singleCodes)
+    }
+
+    const handleChangeCodeValues = (event, codeId, nextIndex) => {
+      const codeElement = codeReferences[codeId]?.current
+      const val = event.nativeEvent?.value || event.target?.value
+
+      if (Number(val).toString() === 'NaN') {
+        codeElement.value = singleCodes[codeId] ?? ''
+        return
+      }
+      if (codeElement?.value?.length > 1) {
+        const oldValue = singleCodes[codeId]
+        const newValue = codeElement.value.replace(oldValue, '')
+        codeElement.value = newValue
+        handleSingleCodes(codeId, codeElement.value, 'success')
+      }
+
+      handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success')
+      handleChangeCode()
+      if (nextIndex === validatorsLength) {
+        codeElement.blur()
+        return
+      }
+      if (codeElement?.value?.length > 0) codeReferences[prefix + nextIndex].current.focus()
+    }
+
+    const handleKeyPress = (event, currentIndex, previousIndex) => {
+      if (!(event.keyCode === 8 || event.code === 'Backspace')) return
+      if (currentIndex > 0) {
+        codeReferences[prefix + currentIndex].current.value = ''
+        codeReferences[prefix + previousIndex].current.focus()
+      }
+      handleSingleCodes(prefix + currentIndex, '', '')
+      handleChangeCode()
+    }
+
+    const getCodeComponents = () => {
+      const components = []
+
+      for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+        const codeId = prefix + i
+        const codeInputProps = {
+          nativeID: codeId,
+          ref: codeReferences[codeId] ?? null,
+          validation: strValidation || singleCodes[codeId + sufixValidation],
+          tokens: selectCodeTextInputTokens(themeTokens),
+          onFocus: () => codeReferences[codeId].current.select(),
+          onKeyPress: (event) => handleKeyPress(event, i, i - 1),
+          onMouseOver: handleMouseOver,
+          onMouseOut: handleMouseOut,
+          inactive
+        }
+        codeInputProps.validation || delete codeInputProps.validation
+
+        components.push(
+          <View key={codeId} style={staticStyles.codeInputWidth}>
+            <TextInput {...codeInputProps} />
+          </View>
+        )
+      }
+      return components
+    }
+
+    useEffect(() => {
+      /* eslint-disable no-unused-expressions */
+      if (Number(value).toString() !== 'NaN') setText(value)
+    }, [value])
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    useEffect(() => {
+      for (let i = 0; i < validatorsLength; i += 1) {
+        codeReferences[prefix + i].current.value = text[i] ?? ''
+        handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '')
+      }
+    }, [text])
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    useEffect(() => {
+      const handlePasteCode = (event) => {
+        setText('')
+        const clipBoardText = event.clipboardData.getData('text')
+        if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText)
+      }
+
+      const handleCopy = (event) => {
+        let clipBoardText = ''
+        for (let i = 0; i < validatorsLength; i += 1)
+          singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i])
+        event.clipboardData.setData('text/plain', clipBoardText)
+        event.preventDefault()
+      }
+
+      if (Platform.OS === 'web') {
+        for (let i = 0; i < validatorsLength; i += 1) {
+          codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode)
+          codeReferences[prefix + i].current.addEventListener('copy', handleCopy)
+          codeReferences[prefix + i].current.addEventListener('input', (event) =>
+            handleChangeCodeValues(event, prefix + i, i + 1)
+          )
+        }
+      }
+
+      return () => {
+        if (Platform.oldValue === 'web') {
+          for (let i = 0; i < validatorsLength; i += 1) {
+            codeReferences[prefix + i]?.current?.removeEventListener('paste', handlePasteCode)
+            codeReferences[prefix + i]?.current?.removeEventListener('copy', handleCopy)
+            codeReferences[prefix + i]?.current?.removeEventListener('input', (event) =>
+              handleChangeCodeValues(event, prefix + i, i + 1)
+            )
+          }
+        }
+      }
+    }, [])
+
+    return (
+      <InputSupports {...supportsProps}>
+        <StackView space={2} direction="row" ref={codeRef}>
+          {getCodeComponents()}
+        </StackView>
+      </InputSupports>
+    )
+  }
+)
+Validator.displayName = 'Validator'
+
+Validator.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
+   */
+  value: PropTypes.string,
+  /**
+   * If true, the component is inactive and non editable.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
+   */
+  onChange: PropTypes.func
+}
+
+export default Validator
+
+const staticStyles = StyleSheet.create({
+  codeInputWidth: {
+    width: 43
+  }
+})

package/src/Validator/index.js

@@ -0,0 +1,3 @@
+import Validator from './Validator'
+
+export default Validator

package/src/index.js

@@ -53,6 +53,7 @@ export { default as Typography } from './Typography'
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
 export { default as BaseProvider } from './BaseProvider'
 export { useHydrationContext } from './BaseProvider/HydrationContext'
+export { default as Validator } from './Validator'
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider'
 export {
   default as ThemeProvider,

package/src/utils/props/handlerProps.js

@@ -65,7 +65,11 @@ const textInputHandlerProps = {
     /**
      * onKeyDown handler (only supported on Web)
      */
-    onKeyDown: PropTypes.func
+    onMouseOver: PropTypes.func,
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onMouseOut: PropTypes.func
   }
 }
 const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types)