mimir-ui-kit 0.0.23 → 0.0.24
Sign up to get free protection for your applications and to get access to all the features.
package/dist/assets/OtpInput.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._otp_jnjdw_2{display:flex;align-items:center;width:100%;-moz-column-gap:var(--space-xs);column-gap:var(--space-xs)}@media (max-width: 767px){._otp_jnjdw_2{-moz-column-gap:4.65px;column-gap:4.65px}}._input-wrapper_jnjdw_14{flex:0 0 64px;padding:0}@media (max-width: 767px){._input-wrapper_jnjdw_14{flex:0 0 48px}}._input_jnjdw_14{text-align:center}._separator_jnjdw_28{display:block;flex:0 0 54px;align-self:center;height:1px;background-color:var(--black-100)}
|
|
@@ -3,12 +3,12 @@ import { forwardRef, useRef, useImperativeHandle, useMemo, Fragment } from "reac
|
|
|
3
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
4
4
|
import { Input } from "../Input/Input.js";
|
|
5
5
|
import { RE_DIGIT, ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
|
|
6
|
-
import '../../assets/OtpInput.css';const otp = "
|
|
7
|
-
const input = "
|
|
8
|
-
const separator = "
|
|
6
|
+
import '../../assets/OtpInput.css';const otp = "_otp_jnjdw_2";
|
|
7
|
+
const input = "_input_jnjdw_14";
|
|
8
|
+
const separator = "_separator_jnjdw_28";
|
|
9
9
|
const cls = {
|
|
10
10
|
otp,
|
|
11
|
-
"input-wrapper": "_input-
|
|
11
|
+
"input-wrapper": "_input-wrapper_jnjdw_14",
|
|
12
12
|
input,
|
|
13
13
|
separator
|
|
14
14
|
};
|
|
@@ -18,6 +18,7 @@ const OtpInput = forwardRef(
|
|
|
18
18
|
valueLength = DEFAULT_VALUE_LENGTH,
|
|
19
19
|
needSeparator = true,
|
|
20
20
|
onChange,
|
|
21
|
+
className,
|
|
21
22
|
...props
|
|
22
23
|
}, ref) => {
|
|
23
24
|
const inputRefs = useRef([]);
|
|
@@ -108,7 +109,7 @@ const OtpInput = forwardRef(
|
|
|
108
109
|
}
|
|
109
110
|
target.setSelectionRange(0, target.value.length);
|
|
110
111
|
};
|
|
111
|
-
return /* @__PURE__ */ jsx("div", { className: classNames(cls.otp), children: valueItems.map((digit, idx) => {
|
|
112
|
+
return /* @__PURE__ */ jsx("div", { className: classNames(cls.otp, className), children: valueItems.map((digit, idx) => {
|
|
112
113
|
const nextIndex = idx + 1;
|
|
113
114
|
const showSeparator = needSeparator && nextIndex % ITEMS_PER_SEPARATOR === 0 && nextIndex !== valueItems.length;
|
|
114
115
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|