antd-mobile 5.0.0-rc.4 → 5.0.0-rc.8

package/cjs/global/global.css

@@ -21,9 +21,6 @@ body {
   font-size: var(--adm-font-size-main);
   font-family: var(--adm-font-family);
 }
-* {
-  box-sizing: border-box;
-}
 a,
 button {
   cursor: pointer;

package/cjs/index.d.ts

@@ -41,6 +41,7 @@ export { default as NavBar } from './components/nav-bar';
 export { default as NoticeBar } from './components/notice-bar';
 export { default as NumberKeyboard } from './components/number-keyboard';
 export { default as PageIndicator } from './components/page-indicator';
+export { default as PasscodeInput } from './components/passcode-input';
 export { default as Picker } from './components/picker';
 export { default as PickerView } from './components/picker-view';
 export { default as Popover } from './components/popover';
@@ -57,6 +58,7 @@ export { default as Search } from './components/search-bar';
 export { default as SearchBar } from './components/search-bar';
 export { default as Selector } from './components/selector';
 export { default as SideBar } from './components/side-bar';
+export { default as Skeleton } from './components/skeleton';
 export { default as Slider } from './components/slider';
 export { default as Space } from './components/space';
 export { default as Stepper } from './components//stepper';

package/cjs/index.js

@@ -249,6 +249,12 @@ Object.defineProperty(exports, "PageIndicator", {
     return _pageIndicator["default"];
   }
 });
+Object.defineProperty(exports, "PasscodeInput", {
+  enumerable: true,
+  get: function get() {
+    return _passcodeInput["default"];
+  }
+});
 Object.defineProperty(exports, "Picker", {
   enumerable: true,
   get: function get() {
@@ -345,6 +351,12 @@ Object.defineProperty(exports, "SideBar", {
     return _sideBar["default"];
   }
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton["default"];
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function get() {
@@ -526,6 +538,8 @@ var _numberKeyboard = _interopRequireDefault(require("./components/number-keyboa
 
 var _pageIndicator = _interopRequireDefault(require("./components/page-indicator"));
 
+var _passcodeInput = _interopRequireDefault(require("./components/passcode-input"));
+
 var _picker = _interopRequireDefault(require("./components/picker"));
 
 var _pickerView = _interopRequireDefault(require("./components/picker-view"));
@@ -556,6 +570,8 @@ var _selector = _interopRequireDefault(require("./components/selector"));
 
 var _sideBar = _interopRequireDefault(require("./components/side-bar"));
 
+var _skeleton = _interopRequireDefault(require("./components/skeleton"));
+
 var _slider = _interopRequireDefault(require("./components/slider"));
 
 var _space = _interopRequireDefault(require("./components/space"));

package/cjs/utils/use-mutation-effect.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _ahooks = require("ahooks");
 
 function useMutationEffect(effect, targetRef, options) {
-  var fn = (0, _ahooks.usePersistFn)(effect);
+  var fn = (0, _ahooks.useMemoizedFn)(effect);
   (0, _react.useEffect)(function () {
     var observer = new MutationObserver(function () {
       fn();

package/cjs/utils/use-props-value.js

@@ -20,7 +20,7 @@ function usePropsValue(options) {
     stateRef.current = value;
   }
 
-  var setState = (0, _ahooks.usePersistFn)(function (v) {
+  var setState = (0, _ahooks.useMemoizedFn)(function (v) {
     if (value === undefined) {
       stateRef.current = v;
       update();

package/cjs/utils/use-resize-effect.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _ahooks = require("ahooks");
 
 function useResizeEffect(effect, targetRef) {
-  var fn = (0, _ahooks.usePersistFn)(effect);
+  var fn = (0, _ahooks.useMemoizedFn)(effect);
   (0, _react.useLayoutEffect)(function () {
     var target = targetRef.current;
     if (!target) return;

package/es/components/checkbox/checkbox.css

@@ -67,7 +67,7 @@
   background-color: currentColor;
 }
 .adm-checkbox-content {
-  flex: none;
+  flex: 0 1 auto;
   font-size: var(--font-size);
   padding-left: var(--gap);
 }

package/es/components/collapse/collapse.d.ts

@@ -7,14 +7,14 @@ export declare type CollapsePanelProps = {
     forceRender?: boolean;
     destroyOnClose?: boolean;
     onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
-    arrow?: React.ReactNode;
+    arrow?: React.ReactNode | ((active: boolean) => React.ReactNode);
 } & NativeProps;
 export declare const CollapsePanel: FC<CollapsePanelProps>;
 declare type ValueProps<T> = {
     activeKey?: T;
     defaultActiveKey?: T;
     onChange?: (activeKey: T) => void;
-    arrow?: React.ReactNode;
+    arrow?: React.ReactNode | ((active: boolean) => React.ReactNode);
 };
 export declare type CollapseProps = (({
     accordion?: false;

package/es/components/collapse/collapse.js

@@ -142,7 +142,7 @@ export var Collapse = function Collapse(props) {
         arrow = panel.props.arrow;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return typeof arrow === 'function' ? arrow(active) : /*#__PURE__*/React.createElement("div", {
         className: classNames(classPrefix + "-arrow", (_classNames = {}, _classNames[classPrefix + "-arrow-active"] = active, _classNames))
       }, arrow);
     };

package/es/components/date-picker/date-picker.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import Picker from '../picker';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
@@ -31,7 +31,7 @@ export var DatePicker = function DatePicker(p) {
   var onConfirm = useCallback(function (val) {
     setValue(convertStringArrayToDate(val, props.precision));
   }, [setValue, props.precision]);
-  var onSelect = usePersistFn(function (val) {
+  var onSelect = useMemoizedFn(function (val) {
     var _a;
 
     var date = convertStringArrayToDate(val, props.precision);

package/es/components/dialog/dialog.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type DialogProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/es/components/dialog/dialog.js

@@ -38,6 +38,7 @@ import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
 import Space from '../space';
+import { renderToContainer } from '../../utils/render-to-container';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
 import AutoCenter from '../auto-center';
 import { useSpring, animated } from '@react-spring/web';
@@ -48,7 +49,8 @@ var defaultProps = {
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false,
-  stopPropagation: ['click']
+  stopPropagation: ['click'],
+  getContainer: null
 };
 export var Dialog = function Dialog(p) {
   var props = mergeProps(defaultProps, p);
@@ -66,13 +68,15 @@ export var Dialog = function Dialog(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });
@@ -81,14 +85,13 @@ export var Dialog = function Dialog(p) {
       active = _useState[0],
       setActive = _useState[1];
 
-  return withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  var node = withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classPrefix,
     style: {
       display: active ? 'unset' : 'none'
     }
   }, /*#__PURE__*/React.createElement(Mask, {
     visible: props.visible,
-    getContainer: props.getContainer,
     onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
     style: props.maskStyle,
     className: classNames(classPrefix + "-mask", props.maskClassName)
@@ -158,5 +161,6 @@ export var Dialog = function Dialog(p) {
         }
       });
     }));
-  })))))));
+  }))))));
+  return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
 };

package/es/components/form/form-item.css

@@ -18,7 +18,7 @@
 .adm-form-item-footer {
   color: var(--adm-color-danger);
 }
-.adm-form-item-hidden {
+.adm-form-item.adm-form-item-hidden {
   display: none;
 }
 .adm-form-vertical .adm-form-item-label {

package/es/components/form/index.css

@@ -24,7 +24,7 @@
 .adm-form-item-footer {
   color: var(--adm-color-danger);
 }
-.adm-form-item-hidden {
+.adm-form-item.adm-form-item-hidden {
   display: none;
 }
 .adm-form-vertical .adm-form-item-label {

package/es/components/image/lazy-detector.js

@@ -2,7 +2,10 @@ import React, { useEffect, useRef } from 'react';
 import { useInViewport } from 'ahooks';
 export var LazyDetector = function LazyDetector(props) {
   var ref = useRef(null);
-  var inViewport = useInViewport(ref);
+
+  var _useInViewport = useInViewport(ref),
+      inViewport = _useInViewport[0];
+
   useEffect(function () {
     if (inViewport) {
       props.onActive();

package/es/components/image-uploader/image-uploader.js

@@ -36,7 +36,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
 import PreviewItem from './preview-item';
 import { usePropsValue } from '../../utils/use-props-value';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import Space from '../space';
 import { withNativeProps } from '../../utils/native-props';
 var classPrefix = "adm-image-uploader";
@@ -56,7 +56,7 @@ export var ImageUploader = function ImageUploader(p) {
       value = _usePropsValue[0],
       setValue = _usePropsValue[1];
 
-  var updateValue = usePersistFn(function (updater) {
+  var updateValue = useMemoizedFn(function (updater) {
     setValue(updater(value));
   });
 
@@ -167,9 +167,15 @@ export var ImageUploader = function ImageUploader(p) {
                             });
                           });
                           updateValue(function (prev) {
-                            return [].concat(prev, [{
+                            var newVal = {
                               url: result.url
-                            }]);
+                            };
+
+                            if (result.extra !== undefined) {
+                              newVal.extra = result.extra;
+                            }
+
+                            return [].concat(prev, [newVal]);
                           });
                           _context.next = 12;
                           break;

package/es/components/image-viewer/slide.js

@@ -92,11 +92,6 @@ export var Slide = function Slide(props) {
       }
     },
     pinch: {
-      transform: function transform(_ref) {
-        var d = _ref[0],
-            a = _ref[1];
-        return [d < 0 ? d * 0.5 : d * 2, 0];
-      },
       from: function from() {
         return [zoom.get(), 0];
       }

package/es/components/index-bar/index-bar.css

@@ -52,7 +52,7 @@
 }
 .adm-index-bar-sidebar-row {
   cursor: pointer;
-  width: 100%;
+  width: auto;
   text-align: right;
   position: relative;
   padding: 0 12px;

package/es/components/infinite-scroll/infinite-scroll.js

@@ -1,6 +1,6 @@
 import { mergeProps } from '../../utils/with-default-props';
 import React, { useEffect, useRef } from 'react';
-import { useLockFn, usePersistFn } from 'ahooks';
+import { useLockFn, useMemoizedFn } from 'ahooks';
 import { withNativeProps } from '../../utils/native-props';
 import { getScrollParent } from '../../utils/get-scroll-parent';
 import Loading from '../loading';
@@ -25,7 +25,7 @@ export var InfiniteScroll = function InfiniteScroll(p) {
   });
   var elementRef = useRef(null);
   var checkTimeoutRef = useRef();
-  var check = usePersistFn(function () {
+  var check = useMemoizedFn(function () {
     window.clearTimeout(checkTimeoutRef.current);
     checkTimeoutRef.current = window.setTimeout(function () {
       if (!props.hasMore) return;

package/es/components/input/input.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -19,7 +19,7 @@ export declare type InputRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "autoComplete" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/es/components/list/list.css

@@ -10,9 +10,6 @@
   overflow: hidden;
   font-size: 17px;
 }
-.adm-list-inner {
-  margin-bottom: -1px;
-}
 .adm-list-default {
   border-top: var(--border-top);
   border-bottom: var(--border-bottom);
@@ -22,9 +19,13 @@
   border-radius: 8px;
 }
 .adm-list-item {
+  margin-bottom: -1px;
   display: block;
   padding-left: var(--padding-left);
 }
+.adm-list-item:not(:first-child) {
+  padding-top: 1px;
+}
 .adm-list-item-title,
 .adm-list-item-description {
   color: var(--adm-color-weak);

package/es/components/list/list.js

@@ -10,7 +10,5 @@ export var List = function List(p) {
   var props = mergeProps(defaultProps, p);
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classNames(classPrefix, classPrefix + "-" + props.mode)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-inner"
-  }, props.children)));
+  }, props.children));
 };

package/es/components/mask/mask.js

@@ -77,9 +77,10 @@ export var Mask = function Mask(p) {
   var node = withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/React.createElement(animated.div, {
     className: classPrefix,
     ref: ref,
-    style: Object.assign(Object.assign({}, props.style), {
+    style: Object.assign(Object.assign({
       background: background,
-      opacity: opacity,
+      opacity: opacity
+    }, props.style), {
       display: active ? 'unset' : 'none'
     })
   }, props.onMaskClick && /*#__PURE__*/React.createElement("div", {

package/es/components/modal/modal.d.ts

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type ModalProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

package/es/components/modal/modal.js

@@ -68,13 +68,15 @@ export var Modal = function Modal(p) {
       setActive(true);
     },
     onRest: function onRest() {
-      var _a;
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });

package/es/components/notice-bar/notice-bar.css

@@ -1,5 +1,6 @@
 .adm-notice-bar {
   height: 30px;
+  box-sizing: border-box;
   font-size: 14px;
   line-height: 30px;
   padding: 0 12px;

package/es/components/number-keyboard/number-keyboard.css

@@ -3,8 +3,7 @@
   flex-wrap: wrap;
   flex: 1;
 }
-.adm-number-keyboard.confirmed-style {
-  width: 75%;
+.adm-number-keyboard-main.confirmed-style .sign-key {
   background-color: var(--adm-color-white);
 }
 .adm-number-keyboard-popup.adm-popup {
@@ -105,6 +104,7 @@
   color: var(--adm-color-white);
   height: 144px;
   font-size: 16px;
+  border: none;
 }
 .adm-number-keyboard-bs-key {
   height: 20px;

package/es/components/number-keyboard/number-keyboard.js

@@ -6,7 +6,7 @@ import { shuffle } from '../../utils/shuffle';
 import Popup from '../popup';
 import { withNativeProps } from '../../utils/native-props';
 import SafeArea from '../safe-area';
-import { usePersistFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 var classPrefix = 'adm-number-keyboard';
 var defaultProps = {
   defaultVisible: false,
@@ -43,7 +43,7 @@ export var NumberKeyboard = function NumberKeyboard(p) {
   }, [customKey, confirmText, randomOrder, randomOrder && visible]);
   var timeoutRef = useRef(-1);
   var intervalRef = useRef(-1);
-  var onDelete = usePersistFn(function () {
+  var onDelete = useMemoizedFn(function () {
     var _a;
 
     (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);

package/es/components/passcode-input/index.d.ts

@@ -0,0 +1,4 @@
+import './passcode-input.less';
+import { PasscodeInput } from './passcode-input';
+export type { PasscodeInputProps } from './passcode-input';
+export default PasscodeInput;

package/es/components/passcode-input/index.js

@@ -0,0 +1,3 @@
+import "./passcode-input.css";
+import { PasscodeInput } from './passcode-input';
+export default PasscodeInput;

package/es/components/passcode-input/passcode-input.css

@@ -0,0 +1,136 @@
+.adm-passcode-input {
+  position: relative;
+  display: inline-block;
+  --cell-size: 40px;
+  --cell-gap: 6px;
+  --dot-size: 10px;
+  --border-color: #e5e5e5;
+  --border-radius: 8px;
+}
+.adm-passcode-input-cell-container {
+  display: inline-flex;
+  vertical-align: top;
+}
+.adm-passcode-input-cell {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-size: 18px;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  background: var(--adm-color-white);
+}
+.adm-passcode-input:not(.seperated) {
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+}
+.adm-passcode-input:not(.seperated) .adm-passcode-input-cell:not(:last-child) {
+  border-right: 1px solid var(--border-color);
+}
+.adm-passcode-input:not(.seperated).focused {
+  border-color: var(--adm-color-primary);
+  box-shadow: 0 0 2px 0 var(--adm-color-primary);
+  outline: none;
+}
+.adm-passcode-input:not(.seperated).error {
+  border-color: var(--adm-color-danger);
+  box-shadow: 0 0 2px 0 var(--adm-color-danger);
+  animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
+}
+.adm-passcode-input.seperated .adm-passcode-input-cell {
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+}
+.adm-passcode-input.seperated .adm-passcode-input-cell:not(:last-child) {
+  margin-right: var(--cell-gap);
+}
+.adm-passcode-input.seperated .adm-passcode-input-cell.focused {
+  border-color: var(--adm-color-primary);
+  box-shadow: 0 0 2px 0 var(--adm-color-primary);
+}
+.adm-passcode-input.seperated.focused {
+  outline: none;
+}
+.adm-passcode-input.seperated.error {
+  animation: 100ms ease-in-out 0s 3 normal none running adm-shake-horizontal;
+}
+.adm-passcode-input.seperated.error .adm-passcode-input-cell {
+  border-color: var(--adm-color-danger);
+  box-shadow: 0 0 2px 0 var(--adm-color-danger);
+}
+.adm-passcode-input-cell.dot::before {
+  content: '';
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: 50%;
+  background: var(--adm-color-text);
+}
+.adm-passcode-input-cell.caret::after {
+  content: '';
+  width: 2px;
+  height: 1.1em;
+  margin-left: 1px;
+  background: var(--adm-color-primary);
+  animation: 1s linear infinite adm-caret-blink;
+}
+.adm-passcode-input > .adm-passcode-input-native-input {
+  position: absolute;
+  left: -200vw;
+  top: 0;
+  display: block;
+  width: 50px;
+  height: 20px;
+  opacity: 0.5;
+}
+@keyframes adm-shake-horizontal {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(-4px);
+  }
+  20% {
+    transform: translateX(5px);
+  }
+  30% {
+    transform: translateX(-1px);
+  }
+  40% {
+    transform: translateX(8px);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  60% {
+    transform: translateX(-8px);
+  }
+  70% {
+    transform: translateX(1px);
+  }
+  80% {
+    transform: translateX(-5px);
+  }
+  90% {
+    transform: translateX(4px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes adm-caret-blink {
+  from {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/es/components/passcode-input/passcode-input.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import type { NumberKeyboardProps } from '../number-keyboard';
+export declare type PasscodeInputProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (val: string) => void;
+    length?: number;
+    plain?: boolean;
+    error?: boolean;
+    caret?: boolean;
+    seperated?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    keyboard?: ReactElement<NumberKeyboardProps>;
+    onFill?: (val: string) => void;
+} & NativeProps<'--cell-gap' | '--cell-size'>;
+export declare type PasscodeInputRef = {
+    focus: () => void;
+    blur: () => void;
+};
+export declare const PasscodeInput: React.ForwardRefExoticComponent<{
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onChange?: ((val: string) => void) | undefined;
+    length?: number | undefined;
+    plain?: boolean | undefined;
+    error?: boolean | undefined;
+    caret?: boolean | undefined;
+    seperated?: boolean | undefined;
+    onBlur?: (() => void) | undefined;
+    onFocus?: (() => void) | undefined;
+    keyboard?: React.ReactElement<NumberKeyboardProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    onFill?: ((val: string) => void) | undefined;
+} & NativeProps<"--cell-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;