react-vant-nova 1.0.0-test

package/lib/number-keyboard/NumberKeyboard.js

@@ -0,0 +1,264 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _tslib() {
+  const data = require("tslib");
+  _tslib = function () {
+    return data;
+  };
+  return data;
+}
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+function _reactTransitionGroup() {
+  const data = require("react-transition-group");
+  _reactTransitionGroup = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../utils");
+var _NumberKeyboardKey = _interopRequireDefault(require("./NumberKeyboardKey"));
+var _hooks = require("../hooks");
+var _useClickAway = _interopRequireDefault(require("../hooks/use-click-away"));
+var _getDefaultProps = require("../utils/get-default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const [bem] = (0, _utils.createNamespace)('number-keyboard');
+const NumberKeyboard = _a => {
+  var {
+      className,
+      style
+    } = _a,
+    p = (0, _tslib().__rest)(_a, ["className", "style"]);
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    transition: true,
+    blurOnClose: true,
+    showDeleteKey: true,
+    hideOnClickOutside: true,
+    safeAreaInsetBottom: true,
+    theme: 'default',
+    value: '',
+    extraKey: '',
+    maxlength: Number.MAX_VALUE
+  });
+  const root = (0, _react().useRef)();
+  const genBasicKeys = () => {
+    const keys = Array(9).fill('').map((_, i) => ({
+      text: i + 1
+    }));
+    if (props.randomKeyOrder) {
+      keys.sort(() => Math.random() > 0.5 ? 1 : -1);
+    }
+    return keys;
+  };
+  const genDefaultKeys = () => [...genBasicKeys(), {
+    text: props.extraKey,
+    type: 'extra'
+  }, {
+    text: 0
+  }, {
+    text: props.showDeleteKey ? props.deleteButtonText : '',
+    type: props.showDeleteKey ? 'delete' : ''
+  }];
+  const genCustomKeys = () => {
+    const keys = genBasicKeys();
+    const {
+      extraKey
+    } = props;
+    const extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];
+    if (extraKeys.length === 1) {
+      keys.push({
+        text: 0,
+        wider: true
+      }, {
+        text: extraKeys[0],
+        type: 'extra'
+      });
+    } else if (extraKeys.length === 2) {
+      keys.push({
+        text: extraKeys[0],
+        type: 'extra'
+      }, {
+        text: 0
+      }, {
+        text: extraKeys[1],
+        type: 'extra'
+      });
+    }
+    return keys;
+  };
+  const keys = (0, _react().useMemo)(() => props.theme === 'custom' ? genCustomKeys() : genDefaultKeys(), [props.theme]);
+  const onBlur = () => {
+    var _a;
+    if (props.visible) {
+      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  };
+  const onClose = () => {
+    var _a;
+    (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    if (props.blurOnClose) {
+      onBlur();
+    }
+  };
+  const onAnimationEnd = () => {
+    var _a;
+    (_a = props[props.visible ? 'onShow' : 'onHide']) === null || _a === void 0 ? void 0 : _a.call(props);
+  };
+  const onPress = (text, type) => {
+    var _a, _b, _c, _d;
+    if (text === '') {
+      if (type === 'extra') {
+        onBlur();
+      }
+      return;
+    }
+    const {
+      value
+    } = props;
+    if (type === 'delete') {
+      (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);
+      (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value.slice(0, value.length - 1));
+    } else if (type === 'close') {
+      onClose();
+    } else if (value.length < props.maxlength) {
+      (_c = props.onInput) === null || _c === void 0 ? void 0 : _c.call(props, text);
+      (_d = props.onChange) === null || _d === void 0 ? void 0 : _d.call(props, value + text);
+    }
+  };
+  const renderTitle = () => {
+    const {
+      title,
+      theme,
+      closeButtonText
+    } = props;
+    const showClose = closeButtonText && theme === 'default';
+    const showTitle = title || showClose;
+    if (!showTitle) {
+      return null;
+    }
+    return (0, _jsxRuntime().jsxs)("div", Object.assign({
+      className: (0, _clsx().default)(bem('header'))
+    }, {
+      children: [title && (0, _jsxRuntime().jsx)("h2", Object.assign({
+        className: (0, _clsx().default)(bem('title'))
+      }, {
+        children: title
+      })), showClose && (0, _jsxRuntime().jsx)("button", Object.assign({
+        type: 'button',
+        className: (0, _clsx().default)(bem('close')),
+        onClick: onClose
+      }, {
+        children: closeButtonText
+      }))]
+    }));
+  };
+  const renderKeys = () => keys.map((key, i) => {
+    var _a, _b, _c;
+    let keySlots = null;
+    if (!key.type) {
+      keySlots = (_a = props.numberKeyRender) === null || _a === void 0 ? void 0 : _a.call(props, key);
+    }
+    if (key.type === 'delete') {
+      keySlots = (_b = props.deleteRender) === null || _b === void 0 ? void 0 : _b.call(props);
+    }
+    if (key.type === 'extra') {
+      keySlots = (_c = props.extraKeyRender) === null || _c === void 0 ? void 0 : _c.call(props);
+    }
+    return (0, _jsxRuntime().jsx)(_NumberKeyboardKey.default
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      text: key.text,
+      type: key.type,
+      wider: key.wider,
+      color: key.color,
+      onPress: onPress,
+      // eslint-disable-next-line react/no-children-prop
+      children: keySlots
+    }, i);
+  });
+  const renderSidebar = () => {
+    if (props.theme === 'custom') {
+      return (0, _jsxRuntime().jsxs)("div", Object.assign({
+        className: (0, _clsx().default)(bem('sidebar'))
+      }, {
+        children: [props.showDeleteKey && (0, _jsxRuntime().jsx)(_NumberKeyboardKey.default, {
+          large: true,
+          text: props.deleteButtonText,
+          type: 'delete',
+          onPress: onPress
+        }), (0, _jsxRuntime().jsx)(_NumberKeyboardKey.default, {
+          large: true,
+          text: props.closeButtonText,
+          type: 'close',
+          color: 'blue',
+          loading: props.closeButtonLoading,
+          onPress: onPress
+        })]
+      }));
+    }
+    return null;
+  };
+  (0, _hooks.useUpdateEffect)(() => {
+    var _a;
+    if (!props.transition) {
+      (_a = props[props.visible ? 'onShow' : 'onHide']) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, [props.visible]);
+  (0, _useClickAway.default)(root, props.hideOnClickOutside ? onBlur : _utils.noop, 'touchstart');
+  const Title = renderTitle();
+  const Content = (0, _jsxRuntime().jsx)(_reactTransitionGroup().CSSTransition, Object.assign({
+    mountOnEnter: true,
+    unmountOnExit: true,
+    nodeRef: root,
+    in: props.visible,
+    timeout: 300,
+    classNames: props.transition ? 'rv-slide-up' : '',
+    onExited: onAnimationEnd
+  }, {
+    children: (0, _jsxRuntime().jsxs)("div", Object.assign({
+      ref: root,
+      style: Object.assign(Object.assign({}, style), (0, _utils.getZIndexStyle)(props.zIndex)),
+      className: (0, _clsx().default)(className, bem({
+        unfit: !props.safeAreaInsetBottom,
+        'with-title': !!Title
+      })),
+      onTouchStart: _utils.stopPropagation
+    }, {
+      children: [Title, (0, _jsxRuntime().jsxs)("div", Object.assign({
+        className: (0, _clsx().default)(bem('body'))
+      }, {
+        children: [(0, _jsxRuntime().jsx)("div", Object.assign({
+          className: (0, _clsx().default)(bem('keys'))
+        }, {
+          children: renderKeys()
+        })), renderSidebar()]
+      }))]
+    }))
+  }));
+  return Content;
+};
+var _default = exports.default = NumberKeyboard;

package/lib/number-keyboard/NumberKeyboardKey.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NumberKeyboardKeyProps } from './PropsType';
+declare const NumberKeyboardKey: React.FC<NumberKeyboardKeyProps>;
+export default NumberKeyboardKey;

package/lib/number-keyboard/NumberKeyboardKey.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _tslib() {
+  const data = require("tslib");
+  _tslib = function () {
+    return data;
+  };
+  return data;
+}
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _loading = _interopRequireDefault(require("../loading"));
+var _hooks = require("../hooks");
+var _utils = require("../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CollapseIcon = ({
+  bem
+}) => (0, _jsxRuntime().jsx)("svg", Object.assign({
+  className: (0, _clsx().default)(bem('collapse-icon')),
+  viewBox: '0 0 30 24'
+}, {
+  children: (0, _jsxRuntime().jsx)("path", {
+    d: 'M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z',
+    fill: 'currentColor'
+  })
+}));
+const DeleteIcon = ({
+  bem
+}) => (0, _jsxRuntime().jsx)("svg", Object.assign({
+  className: (0, _clsx().default)(bem('delete-icon')),
+  viewBox: '0 0 32 22'
+}, {
+  children: (0, _jsxRuntime().jsx)("path", {
+    d: 'M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z',
+    fill: 'currentColor'
+  })
+}));
+const [bem] = (0, _utils.createNamespace)('key');
+const NumberKeyboardKey = _a => {
+  var {
+      children,
+      className,
+      style
+    } = _a,
+    props = (0, _tslib().__rest)(_a, ["children", "className", "style"]);
+  const [active, setActive] = (0, _react().useState)(false);
+  const touch = (0, _hooks.useTouch)();
+  const onTouchStart = event => {
+    touch.start(event);
+    setActive(true);
+  };
+  const onTouchMove = event => {
+    touch.move(event);
+    if (touch.direction.current) {
+      setActive(false);
+    }
+  };
+  const onTouchEnd = event => {
+    var _a;
+    if (active) {
+      // eliminate tap delay on safari
+      // see: https://github.com/youzan/vant/issues/6836
+      if (!children) {
+        event.preventDefault();
+      }
+      setActive(false);
+      (_a = props.onPress) === null || _a === void 0 ? void 0 : _a.call(props, props.text, props.type);
+    }
+  };
+  const renderContent = () => {
+    if (props.loading) {
+      return (0, _jsxRuntime().jsx)(_loading.default, {
+        className: (0, _clsx().default)(bem('loading-icon'))
+      });
+    }
+    const text = children || props.text;
+    switch (props.type) {
+      case 'delete':
+        return text || (0, _jsxRuntime().jsx)(DeleteIcon, {
+          bem: bem
+        });
+      case 'extra':
+        return text || (0, _jsxRuntime().jsx)(CollapseIcon, {
+          bem: bem
+        });
+      default:
+        return text;
+    }
+  };
+  return (0, _jsxRuntime().jsx)("div", Object.assign({
+    style: style,
+    className: (0, _clsx().default)(className, bem('wrapper', {
+      wider: props.wider
+    })),
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    onTouchCancel: onTouchEnd
+  }, {
+    children: (0, _jsxRuntime().jsx)("div", Object.assign({
+      role: 'button',
+      tabIndex: 0,
+      className: (0, _clsx().default)(bem([props.color, {
+        large: props.large,
+        active,
+        delete: props.type === 'delete'
+      }]))
+    }, {
+      children: renderContent()
+    }))
+  }));
+};
+var _default = exports.default = NumberKeyboardKey;

package/lib/number-keyboard/PropsType.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type KeyType = '' | 'delete' | 'extra' | 'close';
+export declare type NumberKeyboardTheme = 'default' | 'custom';
+export declare type KeyConfig = {
+    text?: number | string;
+    type?: KeyType;
+    color?: string;
+    wider?: boolean;
+};
+export interface NumberKeyboardProps extends BaseTypeProps {
+    /** 是否显示键盘	 */
+    visible: boolean;
+    /** 键盘标题	 */
+    title?: React.ReactNode;
+    /** 自定义按键内容 */
+    numberKeyRender?: (item: KeyConfig) => React.ReactNode;
+    /** 自定义删除按键内容 */
+    deleteRender?: () => React.ReactNode;
+    /** 自定义左下角按键内容 */
+    extraKeyRender?: () => React.ReactNode;
+    /** 键盘 z-index 层级	 */
+    zIndex?: number;
+    /** 是否开启过场动画	 */
+    transition?: boolean;
+    /** 是否在点击关闭按钮时触发 blur 事件	 */
+    blurOnClose?: boolean;
+    /** 是否展示删除图标	 */
+    showDeleteKey?: boolean;
+    /** 是否将通过随机顺序展示按键	 */
+    randomKeyOrder?: boolean;
+    /** 关闭按钮文字，空则不展示	 */
+    closeButtonText?: number | string;
+    /** 删除按钮文字，空则展示删除图标	 */
+    deleteButtonText?: number | string;
+    /** 是否将关闭按钮设置为加载中状态，仅在 theme="custom" 时有效	 */
+    closeButtonLoading?: boolean;
+    /** 是否在点击外部时收起键盘	 */
+    hideOnClickOutside?: boolean;
+    /** 是否开启底部安全区适配	 */
+    safeAreaInsetBottom?: boolean;
+    /** 样式风格，可选值为 custom	 */
+    theme?: NumberKeyboardTheme;
+    /** 当前输入值	 */
+    value?: string;
+    /** 底部额外按键的内容	 */
+    extraKey?: string | string[];
+    /** 输入值最大长度	 */
+    maxlength?: number;
+    /** 弹出时的的父容器 */
+    teleport?: HTMLElement | (() => HTMLElement);
+    /** 键盘完全弹出时触发	 */
+    onShow?: () => void;
+    /** 键盘完全收起时触发		 */
+    onHide?: () => void;
+    /** 点击关闭按钮或非键盘区域时触发	 */
+    onBlur?: () => void;
+    /** 点击按键时触发	 */
+    onInput?: (key: string) => void;
+    /** 点击关闭按钮时触发	 */
+    onClose?: () => void;
+    /** 点击删除键时触发	 */
+    onDelete?: () => void;
+    /** 输入内容变化时触发 */
+    onChange?: (key: string) => void;
+}
+export interface NumberKeyboardKeyProps extends BaseTypeProps {
+    type?: KeyType;
+    text?: number | string;
+    color?: string;
+    wider?: boolean;
+    large?: boolean;
+    loading?: boolean;
+    onPress?: (text: any, type: any) => void;
+}

package/lib/number-keyboard/PropsType.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/number-keyboard/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import NumberKeyboard from './NumberKeyboard';
+export default NumberKeyboard;
+export { NumberKeyboard };
+export type { NumberKeyboardProps, NumberKeyboardTheme, KeyType, KeyConfig, } from './PropsType';

package/lib/number-keyboard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NumberKeyboard", {
+  enumerable: true,
+  get: function () {
+    return _NumberKeyboard.default;
+  }
+});
+exports.default = void 0;
+require("./style/index.css");
+var _NumberKeyboard = _interopRequireDefault(require("./NumberKeyboard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _NumberKeyboard.default;

package/lib/number-keyboard/style/index.css

@@ -0,0 +1,134 @@
+:root {
+  --rv-number-keyboard-background-color: var(--rv-gray-2);
+  --rv-number-keyboard-key-height: 48px;
+  --rv-number-keyboard-key-font-size: 28px;
+  --rv-number-keyboard-key-active-color: var(--rv-gray-3);
+  --rv-number-keyboard-key-background-color: var(--rv-white);
+  --rv-number-keyboard-delete-font-size: var(--rv-font-size-lg);
+  --rv-number-keyboard-title-color: var(--rv-gray-7);
+  --rv-number-keyboard-title-height: 34px;
+  --rv-number-keyboard-title-font-size: var(--rv-font-size-lg);
+  --rv-number-keyboard-close-padding: 0 var(--rv-padding-md);
+  --rv-number-keyboard-close-color: var(--rv-text-link-color);
+  --rv-number-keyboard-close-font-size: var(--rv-font-size-md);
+  --rv-number-keyboard-button-text-color: var(--rv-white);
+  --rv-number-keyboard-button-background-color: var(--rv-primary-color);
+  --rv-number-keyboard-z-index: 100;
+}
+.rv-number-keyboard {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: var(--rv-number-keyboard-z-index);
+  width: 100%;
+  padding-bottom: 22px;
+  background-color: var(--rv-number-keyboard-background-color);
+  user-select: none;
+}
+.rv-number-keyboard--with-title {
+  border-radius: 20px 20px 0 0;
+}
+.rv-number-keyboard__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  height: var(--rv-number-keyboard-title-height);
+  padding-top: 6px;
+  color: var(--rv-number-keyboard-title-color);
+  font-size: var(--rv-number-keyboard-title-font-size);
+}
+.rv-number-keyboard__title {
+  display: inline-block;
+  font-weight: normal;
+}
+.rv-number-keyboard__title-left {
+  position: absolute;
+  left: 0;
+}
+.rv-number-keyboard__body {
+  display: flex;
+  padding: 6px 0 0 6px;
+}
+.rv-number-keyboard__keys {
+  display: flex;
+  flex: 3;
+  flex-wrap: wrap;
+}
+.rv-number-keyboard__close {
+  position: absolute;
+  right: 0;
+  height: 100%;
+  padding: var(--rv-number-keyboard-close-padding);
+  color: var(--rv-number-keyboard-close-color);
+  font-size: var(--rv-number-keyboard-close-font-size);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+.rv-number-keyboard__close:active {
+  opacity: var(--rv-active-opacity);
+}
+.rv-number-keyboard__sidebar {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.rv-number-keyboard--unfit {
+  padding-bottom: 0;
+}
+.rv-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--rv-number-keyboard-key-height);
+  font-size: var(--rv-number-keyboard-key-font-size);
+  line-height: 1.5;
+  background-color: var(--rv-number-keyboard-key-background-color);
+  border-radius: var(--rv-border-radius-lg);
+  cursor: pointer;
+}
+.rv-key--large {
+  position: absolute;
+  top: 0;
+  right: 6px;
+  bottom: 6px;
+  left: 0;
+  height: auto;
+}
+.rv-key--blue,
+.rv-key--delete {
+  font-size: var(--rv-number-keyboard-delete-font-size);
+}
+.rv-key--active {
+  background-color: var(--rv-number-keyboard-key-active-color);
+}
+.rv-key--blue {
+  color: var(--rv-number-keyboard-button-text-color);
+  background-color: var(--rv-number-keyboard-button-background-color);
+}
+.rv-key--blue.rv-key--active {
+  opacity: var(--rv-active-opacity);
+}
+.rv-key__wrapper {
+  position: relative;
+  flex: 1;
+  flex-basis: 33%;
+  box-sizing: border-box;
+  padding: 0 6px 6px 0;
+}
+.rv-key__wrapper--wider {
+  flex-basis: 66%;
+}
+.rv-key__delete-icon {
+  width: 32px;
+  height: 22px;
+}
+.rv-key__collapse-icon {
+  width: 30px;
+  height: 24px;
+}
+.rv-key__loading-icon {
+  color: var(--rv-number-keyboard-button-text-color);
+}

package/lib/overlay/Overlay.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { OverlayProps } from './PropsType';
+declare const Overlay: React.FC<OverlayProps>;
+export default Overlay;