@tap-payments/os-micro-frontend-shared 0.0.13 → 0.0.14

package/build/components/OTPInput/OTPInput.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { OtpInputProps } from 'react18-input-otp';
+interface OTPInputProps extends Omit<OtpInputProps, 'numInputs' | 'onChange'> {
+    numInputs?: number;
+    onChange?: (otp: string) => void;
+    onSubmitOtp?: (otp: string) => void;
+}
+declare function OTPInput({ numInputs, separateAfter, isInputSecure, isInputNum, onSubmitOtp, ...props }: OTPInputProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof OTPInput>;
+export default _default;

package/build/components/OTPInput/OTPInput.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, memo } from 'react';
+import Box from '@mui/material/Box';
+import OtpInput from 'react18-input-otp';
+import { inputFocusStyle, inputStyle, inputErrorStyle, Separator } from './style';
+function OTPInput(_a) {
+    var { numInputs = 6, separateAfter = 3, isInputSecure = true, isInputNum = true, onSubmitOtp } = _a, props = __rest(_a, ["numInputs", "separateAfter", "isInputSecure", "isInputNum", "onSubmitOtp"]);
+    const [otp, setOtp] = useState('');
+    const handleChange = (enteredOtp) => {
+        setOtp(enteredOtp);
+        if (enteredOtp.length === numInputs) {
+            onSubmitOtp === null || onSubmitOtp === void 0 ? void 0 : onSubmitOtp(enteredOtp);
+        }
+    };
+    return (_jsx(Box, Object.assign({ sx: {
+            '::selection': {
+                background: 'transparent',
+            },
+        } }, { children: _jsx(OtpInput, Object.assign({ inputStyle: Object.assign(Object.assign({}, inputStyle), props.inputProps), focusStyle: inputFocusStyle, errorStyle: inputErrorStyle, value: otp, separator: _jsx(Separator, { children: "-" }), isInputNum: isInputNum, isInputSecure: isInputSecure, numInputs: numInputs, separateAfter: separateAfter, shouldAutoFocus: true, onChange: handleChange }, props)) })));
+}
+export default memo(OTPInput);

package/build/components/OTPInput/index.d.ts

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

package/build/components/OTPInput/index.js

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

package/build/components/OTPInput/style.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const inputStyle: {
+    width: number;
+    height: number;
+    borderRadius: string;
+    fontSize: string;
+    border: string;
+    caretColor: string;
+    outline: string;
+    margin: string;
+    userSelect: string;
+    color: string;
+};
+export declare const inputFocusStyle: {
+    boxShadow: string;
+    border: string;
+    userSelect: string;
+};
+export declare const inputErrorStyle: {
+    border: string;
+    boxShadow: string;
+};
+export declare const Separator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/OTPInput/style.js

@@ -0,0 +1,29 @@
+import { styled } from '@mui/material/styles';
+export const inputStyle = {
+    width: 45,
+    height: 48,
+    borderRadius: '8px',
+    fontSize: '45px',
+    border: `1px solid #f2f2f2`,
+    caretColor: 'transparent',
+    outline: 'none',
+    margin: '0 4px',
+    userSelect: 'none !important',
+    color: '#20232B',
+};
+export const inputFocusStyle = {
+    boxShadow: '0px 0px 8px 0px #00000026',
+    border: '1px solid #1F88D0',
+    userSelect: 'none !important',
+};
+export const inputErrorStyle = {
+    border: '0.9px solid #FF3D00',
+    boxShadow: '0px 0px 3.59px 0px #00000040',
+};
+export const Separator = styled('span')(() => ({
+    marginInline: '5.25px',
+    fontWeight: 500,
+    fontSize: '14px',
+    lineHeight: '24px',
+    color: '#20232B',
+}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -53,6 +53,7 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
     "recharts": "^2.15.1"
   },
   "devDependencies": {