primereact 10.6.1 → 10.6.3

package/inputotp/inputotp.cjs.js

@@ -0,0 +1,348 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hooks = require('primereact/hooks');
+var api = require('primereact/api');
+var componentbase = require('primereact/componentbase');
+var InputText = require('@/components/lib/inputtext/InputText');
+var utils = require('primereact/utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _readOnlyError(name) {
+  throw new TypeError("\"" + name + "\" is read-only");
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+var classes = {
+  root: 'p-inputotp p-component',
+  input: 'p-inputotp-input'
+};
+var InputOtpBase = componentbase.ComponentBase.extend({
+  defaultProps: {
+    __TYPE: 'InputOtp',
+    __parentMetadata: null,
+    className: null,
+    modelValue: false,
+    invalid: false,
+    disabled: false,
+    readOnly: false,
+    variant: null,
+    tabIndex: null,
+    length: 4,
+    mask: false,
+    integerOnly: false
+  },
+  css: {
+    classes: classes
+  }
+});
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var InputOtp = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/React__default["default"].forwardRef(function (inProps, ref) {
+  var _props$value, _props$value$split;
+  var elementRef = React.useRef(ref);
+  var mergeProps = hooks.useMergeProps();
+  var context = React.useContext(api.PrimeReactContext);
+  var props = InputOtpBase.getProps(inProps, context);
+  var _InputOtpBase$setMeta = InputOtpBase.setMetaData(_objectSpread(_objectSpread({
+      props: props
+    }, props.__parentMetadata), {}, {
+      context: {
+        disabled: props.disabled
+      }
+    })),
+    ptm = _InputOtpBase$setMeta.ptm,
+    cx = _InputOtpBase$setMeta.cx,
+    isUnstyled = _InputOtpBase$setMeta.isUnstyled;
+  componentbase.useHandleStyle(InputOtpBase.css.styles, isUnstyled, {
+    name: 'inputotp'
+  });
+  var defaultValue = props.value ? (_props$value = props.value) === null || _props$value === void 0 || (_props$value = _props$value.toString()) === null || _props$value === void 0 || (_props$value$split = _props$value.split) === null || _props$value$split === void 0 ? void 0 : _props$value$split.call(_props$value, '') : new Array(props.length);
+  var _useState = React.useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    tokens = _useState2[0],
+    setTokens = _useState2[1];
+  var findNextInput = function findNextInput(element) {
+    var nextInput = element.nextElementSibling;
+    if (!nextInput) return;
+    return nextInput.nodeName === 'INPUT' ? nextInput : findNextInput(nextInput);
+  };
+  var findPrevInput = function findPrevInput(element) {
+    var prevInput = element.previousElementSibling;
+    if (!prevInput) return;
+    return prevInput.nodeName === 'INPUT' ? prevInput : findPrevInput(prevInput);
+  };
+  var moveToNextInput = function moveToNextInput(event) {
+    var nextInput = findNextInput(event.target);
+    if (nextInput) {
+      nextInput.focus();
+      nextInput.select();
+    }
+  };
+  var moveToPrevInput = function moveToPrevInput(event) {
+    var prevInput = findPrevInput(event.target);
+    if (prevInput) {
+      prevInput.focus();
+      prevInput.select();
+    }
+  };
+  var onChange = function onChange(event, value) {
+    var _props$onChange;
+    props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, {
+      originalEvent: event,
+      value: value.join('')
+    });
+  };
+  var updateTokens = function updateTokens(event, index) {
+    var inputValue = event.target.value;
+    var newTokens = _toConsumableArray(tokens);
+    newTokens[index] = inputValue;
+    newTokens.join(''), _readOnlyError("newTokens");
+    newTokens ? newTokens.split('') : new Array(props.length), _readOnlyError("newTokens");
+    setTokens(newTokens);
+    onChange(event, newTokens);
+  };
+  var _onInput = function onInput(event, index) {
+    updateTokens(event, index);
+    if (event.nativeEvent.inputType === 'deleteContentBackward') {
+      moveToPrevInput(event);
+    } else if (event.nativeEvent.inputType === 'insertText' || event.nativeEvent.inputType === 'deleteContentForward') {
+      moveToNextInput(event);
+    }
+  };
+  var onPaste = function onPaste(event) {
+    var paste = event.clipboardData.getData('text');
+    if (paste.length) {
+      var pastedCode = paste.substring(0, props.length + 1);
+      if (!props.integerOnly || !isNaN(pastedCode)) {
+        var newTokens = pastedCode.split('');
+        setTokens(newTokens);
+        onChange(event, newTokens);
+      }
+    }
+  };
+  var onFocus = function onFocus(event) {
+    var _props$focus;
+    event.target.select();
+    props === null || props === void 0 || (_props$focus = props.focus) === null || _props$focus === void 0 || _props$focus.call(props, event);
+  };
+  var onBlur = function onBlur(event) {
+    var _props$blur;
+    props === null || props === void 0 || (_props$blur = props.blur) === null || _props$blur === void 0 || _props$blur.call(props, event);
+  };
+  var onKeydown = function onKeydown(event) {
+    switch (event.code) {
+      case 'ArrowLeft':
+        {
+          moveToPrevInput(event);
+          event.preventDefault();
+          break;
+        }
+      case 'ArrowRight':
+        {
+          moveToNextInput(event);
+          event.preventDefault();
+          break;
+        }
+      case 'Backspace':
+        {
+          var _event$target;
+          if (((_event$target = event.target) === null || _event$target === void 0 || (_event$target = _event$target.value) === null || _event$target === void 0 ? void 0 : _event$target.length) === 0) {
+            moveToPrevInput(event);
+            event.preventDefault();
+          }
+          break;
+        }
+      case 'ArrowUp':
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          break;
+        }
+      default:
+        {
+          // Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length
+          if (props !== null && props !== void 0 && props.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9) || tokens.join('').length >= props.length && event.code !== 'Delete') {
+            event.preventDefault();
+          }
+          break;
+        }
+    }
+  };
+  var createInputElements = function createInputElements(remainingInputs) {
+    if (remainingInputs <= 0) {
+      return [];
+    }
+    var inputElementIndex = props.length - remainingInputs;
+    var inputElementEvents = {
+      onInput: function onInput(event) {
+        return _onInput(event, inputElementIndex);
+      },
+      onKeyDown: onKeydown,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onPaste: onPaste
+    };
+    var inputElementProps = mergeProps({
+      id: inputElementIndex,
+      key: inputElementIndex,
+      value: tokens[inputElementIndex] || '',
+      inputMode: props !== null && props !== void 0 && props.integerOnly ? 'numeric' : 'text',
+      type: props !== null && props !== void 0 && props.mask ? 'password' : 'text',
+      variant: props === null || props === void 0 ? void 0 : props.variant,
+      readOnly: props === null || props === void 0 ? void 0 : props.readOnly,
+      disabled: props === null || props === void 0 ? void 0 : props.disabled,
+      invalid: props === null || props === void 0 ? void 0 : props.invalid,
+      tabIndex: props === null || props === void 0 ? void 0 : props.tabIndex,
+      unstyled: props === null || props === void 0 ? void 0 : props.unstyled,
+      className: cx('input')
+    }, ptm('input'));
+    var inputElement = props !== null && props !== void 0 && props.inputTemplate ? utils.ObjectUtils.getJSXElement(props === null || props === void 0 ? void 0 : props.inputTemplate, {
+      events: inputElementEvents,
+      props: inputElementProps
+    }) : /*#__PURE__*/React__default["default"].createElement(InputText.InputText, _extends({}, inputElementProps, inputElementEvents));
+    var inputElements = [inputElement].concat(_toConsumableArray(createInputElements(remainingInputs - 1)));
+    return inputElements;
+  };
+  var rootElementProps = mergeProps({
+    className: cx('root'),
+    ref: elementRef,
+    style: props === null || props === void 0 ? void 0 : props.style
+  }, ptm('root'));
+  return /*#__PURE__*/React__default["default"].createElement("div", rootElementProps, createInputElements(props.length));
+}));
+
+exports.InputOtp = InputOtp;

package/inputotp/inputotp.cjs.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),n=require("primereact/api"),r=require("primereact/componentbase"),o=require("@/components/lib/inputtext/InputText"),l=require("primereact/utils");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function s(e){if(Array.isArray(e))return c(e)}function p(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function f(e,t){if(e){if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(e,t):void 0}}function d(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function v(e){return s(e)||p(e)||f(e)||d()}function y(e){throw new TypeError('"'+e+'" is read-only')}function b(e){if(Array.isArray(e))return e}function m(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,l,a,i=[],u=!0,c=!1;try{if(l=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=l.call(n)).done)&&(i.push(r.value),i.length!==t);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw o}}return i}}function g(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function O(e,t){if("object"!==h(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==h(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function w(e){var t=O(e,"string");return"symbol"===h(t)?t:String(t)}var j=r.ComponentBase.extend({defaultProps:{__TYPE:"InputOtp",__parentMetadata:null,className:null,modelValue:!1,invalid:!1,disabled:!1,readOnly:!1,variant:null,tabIndex:null,length:4,mask:!1,integerOnly:!1},css:{classes:{root:"p-inputotp p-component",input:"p-inputotp-input"}}});function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function P(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?S(Object(n),!0).forEach((function(t){var r,o,l;r=e,l=n[t],(o=w(o=t))in r?Object.defineProperty(r,o,{value:l,enumerable:!0,configurable:!0,writable:!0}):r[o]=l})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}exports.InputOtp=i.default.memo(i.default.forwardRef((function(a,c){var s,p,d=e.useRef(c),h=t.useMergeProps(),O=e.useContext(n.PrimeReactContext),w=j.getProps(a,O),S=j.setMetaData(P(P({props:w},w.__parentMetadata),{},{context:{disabled:w.disabled}})),x=S.ptm,T=S.cx;r.useHandleStyle(j.css.styles,S.isUnstyled,{name:"inputotp"});var D,E,k=w.value?null===(s=w.value)||void 0===s||null===(s=s.toString())||void 0===s||null===(p=s.split)||void 0===p?void 0:p.call(s,""):new Array(w.length),A=e.useState(k),I=(E=2,b(D=A)||m(D,E)||f(D,E)||g()),N=I[0],_=I[1],C=function e(t){var n=t.nextElementSibling;if(n)return"INPUT"===n.nodeName?n:e(n)},M=function e(t){var n=t.previousElementSibling;if(n)return"INPUT"===n.nodeName?n:e(n)},q=function(e){var t=C(e.target);t&&(t.focus(),t.select())},U=function(e){var t=M(e.target);t&&(t.focus(),t.select())},B=function(e,t){var n;null==w||null===(n=w.onChange)||void 0===n||n.call(w,{originalEvent:e,value:t.join("")})},R=function(e,t){var n=e.target.value,r=v(N);r[t]=n,r.join(""),y("newTokens"),r?r.split(""):new Array(w.length),y("newTokens"),_(r),B(e,r)},F=function(e,t){R(e,t),"deleteContentBackward"===e.nativeEvent.inputType?U(e):"insertText"!==e.nativeEvent.inputType&&"deleteContentForward"!==e.nativeEvent.inputType||q(e)},W=function(e){var t=e.clipboardData.getData("text");if(t.length){var n=t.substring(0,w.length+1);if(!w.integerOnly||!isNaN(n)){var r=n.split("");_(r),B(e,r)}}},H=function(e){var t;e.target.select(),null==w||null===(t=w.focus)||void 0===t||t.call(w,e)},J=function(e){var t;null==w||null===(t=w.blur)||void 0===t||t.call(w,e)},K=function(e){switch(e.code){case"ArrowLeft":U(e),e.preventDefault();break;case"ArrowRight":q(e),e.preventDefault();break;case"Backspace":var t;0===(null===(t=e.target)||void 0===t||null===(t=t.value)||void 0===t?void 0:t.length)&&(U(e),e.preventDefault());break;case"ArrowUp":case"ArrowDown":e.preventDefault();break;default:(null!=w&&w.integerOnly&&!((e.code.startsWith("Digit")||e.code.startsWith("Numpad"))&&Number(e.key)>=0&&Number(e.key)<=9)||N.join("").length>=w.length&&"Delete"!==e.code)&&e.preventDefault()}},L=h({className:T("root"),ref:d,style:null==w?void 0:w.style},x("root"));return i.default.createElement("div",L,function e(t){if(t<=0)return[];var n=w.length-t,r={onInput:function(e){return F(e,n)},onKeyDown:K,onFocus:H,onBlur:J,onPaste:W},a=h({id:n,key:n,value:N[n]||"",inputMode:null!=w&&w.integerOnly?"numeric":"text",type:null!=w&&w.mask?"password":"text",variant:null==w?void 0:w.variant,readOnly:null==w?void 0:w.readOnly,disabled:null==w?void 0:w.disabled,invalid:null==w?void 0:w.invalid,tabIndex:null==w?void 0:w.tabIndex,unstyled:null==w?void 0:w.unstyled,className:T("input")},x("input"));return[null!=w&&w.inputTemplate?l.ObjectUtils.getJSXElement(null==w?void 0:w.inputTemplate,{events:r,props:a}):i.default.createElement(o.InputText,u({},a,r))].concat(v(e(t-1)))}(w.length))})));

package/inputotp/inputotp.d.ts

@@ -0,0 +1,177 @@
+/**
+ *
+ * InputOtp is an extension to standard input element with theming and keyfiltering.
+ *
+ * [Live Demo](https://www.primereact.org/inputotp/)
+ *
+ * @module inputotp
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { KeyFilterType } from '../keyfilter';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { PassThroughType, TemplateType } from '../utils/utils';
+
+export declare type InputOtpPassThroughType<T> = PassThroughType<T, InputOtpPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputOtpPassThroughMethodOptions {
+    props: InputOtpProps;
+    context: InputOtpContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputOtpProps.pt}
+ */
+export interface InputOtpPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputOtpPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Tooltip component.
+     * @see {@link TooltipPassThroughOptions}
+     */
+    input?: InputOtpPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in InputOtp component.
+ */
+export interface InputOtpContext {
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom change event
+ * @see {@link InputOtpProps.onChange}
+ * @event
+ */
+interface InputOtpChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value
+     */
+    value?: string | number | null;
+}
+
+/**
+ * Defines valid properties in InputOtp component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface InputOtpProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput' | 'ref' | 'value' | 'size' | 'onChange'> {
+    /**
+     * Specifies the value of the component.
+     * @defaultValue null
+     */
+    value?: string | number | null;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @defaultValue false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * Number of characters to initiate.
+     * @defaultValue 4
+     */
+    length?: number | undefined;
+    /**
+     * Mask pattern.
+     * @defaultValue false
+     */
+    mask?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is integer-only.
+     * @defaultValue false
+     */
+    integerOnly?: boolean | undefined;
+    /**
+     * Template of an item.
+     */
+    inputTemplate?: TemplateType<InputOtpProps> | undefined;
+    /**
+     * Callback to invoke while typing value on input
+     * @param {React.FormEvent<HTMLInputElement>} event - Browser event
+     */
+    onInput?(event: React.FormEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when autocomplete gets focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when autocomplete loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {InputOtpChangeEvent} event - Custom change event
+     */
+    onChange?(event: InputOtpChangeEvent): void;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputOtpPassThroughOptions}
+     */
+    pt?: InputOtpPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputOtp**
+ *
+ * _InputOtp is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/inputotp/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const InputOtp: React.ForwardRefExoticComponent<InputOtpProps & React.RefAttributes<HTMLInputElement>>;