@coinbase/cdp-react 0.0.19 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/Button.css +1 -1
- package/dist/assets/EmailForm.css +1 -1
- package/dist/assets/Error.css +1 -1
- package/dist/assets/Field.css +1 -1
- package/dist/assets/Input.css +1 -1
- package/dist/assets/Label.css +1 -1
- package/dist/assets/LoadingSkeleton.css +1 -1
- package/dist/assets/LoadingSpinner.css +1 -1
- package/dist/assets/Modal.css +1 -0
- package/dist/assets/OTP.css +1 -1
- package/dist/assets/OTPForm.css +1 -1
- package/dist/assets/PhoneNumberForm.css +1 -1
- package/dist/assets/PhoneNumberInput.css +1 -1
- package/dist/assets/SignInAuthMethodButtons.css +1 -1
- package/dist/assets/SignInModal.css +1 -1
- package/dist/assets/SuccessMessage.css +1 -1
- package/dist/assets/SwitchFadeTransition.css +1 -1
- package/dist/assets/SwitchSlideTransition.css +1 -1
- package/dist/assets/SwitchTransition.css +1 -1
- package/dist/assets/ThemeProvider.css +1 -1
- package/dist/assets/VisuallyHidden.css +1 -1
- package/dist/components/AuthButton/index.js +6 -6
- package/dist/components/SendTransactionButton/index.js +1 -1
- package/dist/components/SignIn/SignInAuthMethodButtons.js +21 -19
- package/dist/components/SignIn/SignInBackButton.js +1 -1
- package/dist/components/SignIn/SignInForm.d.ts +1 -1
- package/dist/components/SignIn/SignInForm.js +21 -15
- package/dist/components/SignIn/flows/SignInWithEmail.d.ts +1 -0
- package/dist/components/SignIn/flows/SignInWithEmail.js +68 -51
- package/dist/components/SignIn/flows/SignInWithSms.d.ts +3 -0
- package/dist/components/SignIn/flows/SignInWithSms.js +519 -502
- package/dist/components/SignInModal/index.js +48 -55
- package/dist/components/SignOutButton/index.js +1 -1
- package/dist/components/ThemeProvider/index.js +1 -1
- package/dist/components/{EmailForm → forms/EmailForm}/index.js +10 -10
- package/dist/components/forms/Field/index.js +24 -0
- package/dist/components/{Input → forms/Input}/index.js +1 -1
- package/dist/components/{Label → forms/Label}/index.js +1 -1
- package/dist/components/forms/OTP/index.js +65 -0
- package/dist/components/{OTPForm → forms/OTPForm}/index.js +28 -28
- package/dist/components/{PhoneNumberForm → forms/PhoneNumberForm}/index.js +19 -19
- package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/index.d.ts +1 -1
- package/dist/components/forms/PhoneNumberInput/index.js +76 -0
- package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/maskOverride.js +1 -1
- package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/usePhoneNumberFormatter.d.ts +2 -2
- package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/usePhoneNumberFormatter.js +1 -1
- package/dist/components/{Button → ui/Button}/index.d.ts +1 -1
- package/dist/components/{Button → ui/Button}/index.js +20 -20
- package/dist/components/ui/Error/index.js +16 -0
- package/dist/components/ui/LoadingSkeleton/index.js +19 -0
- package/dist/components/{LoadingSpinner → ui/LoadingSpinner}/index.js +6 -6
- package/dist/components/ui/Modal/index.d.ts +11 -0
- package/dist/components/ui/Modal/index.js +27 -0
- package/dist/components/{ServerError → ui/ServerError}/index.js +1 -1
- package/dist/components/ui/SuccessMessage/index.js +16 -0
- package/dist/components/{SwitchFadeTransition → ui/SwitchFadeTransition}/index.js +2 -2
- package/dist/components/{SwitchSlideTransition → ui/SwitchSlideTransition}/index.js +2 -2
- package/dist/components/{SwitchTransition → ui/SwitchTransition}/index.d.ts +1 -1
- package/dist/components/{SwitchTransition → ui/SwitchTransition}/index.js +27 -27
- package/dist/components/{VisuallyHidden → ui/VisuallyHidden}/index.js +2 -2
- package/dist/theme/theme.d.ts +1 -1
- package/dist/theme/tokens.d.ts +2 -2
- package/dist/theme/tokens.js +1 -1
- package/package.json +17 -5
- package/dist/assets/FlowEmailOTP.css +0 -1
- package/dist/assets/FlowPhoneNumberOTP.css +0 -1
- package/dist/components/Error/index.js +0 -16
- package/dist/components/Field/index.js +0 -24
- package/dist/components/FlowEmailOTP/index.d.ts +0 -18
- package/dist/components/FlowEmailOTP/index.js +0 -70
- package/dist/components/FlowPhoneNumberOTP/index.d.ts +0 -18
- package/dist/components/FlowPhoneNumberOTP/index.js +0 -75
- package/dist/components/LoadingSkeleton/index.js +0 -19
- package/dist/components/OTP/index.js +0 -65
- package/dist/components/PhoneNumberInput/index.js +0 -76
- package/dist/components/SuccessMessage/index.js +0 -16
- package/dist/utils/validatePhoneNumber.d.ts +0 -1
- package/dist/utils/validatePhoneNumber.js +0 -1
- /package/dist/components/{EmailForm → forms/EmailForm}/index.d.ts +0 -0
- /package/dist/components/{Field → forms/Field}/index.d.ts +0 -0
- /package/dist/components/{Input → forms/Input}/index.d.ts +0 -0
- /package/dist/components/{Label → forms/Label}/index.d.ts +0 -0
- /package/dist/components/{OTP → forms/OTP}/index.d.ts +0 -0
- /package/dist/components/{OTPForm → forms/OTPForm}/index.d.ts +0 -0
- /package/dist/components/{PhoneNumberForm → forms/PhoneNumberForm}/index.d.ts +0 -0
- /package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/PhoneNumberMetadata.d.ts +0 -0
- /package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/PhoneNumberMetadata.js +0 -0
- /package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/maskOverride.d.ts +0 -0
- /package/dist/components/{Error → ui/Error}/index.d.ts +0 -0
- /package/dist/components/{LoadingSkeleton → ui/LoadingSkeleton}/index.d.ts +0 -0
- /package/dist/components/{LoadingSpinner → ui/LoadingSpinner}/index.d.ts +0 -0
- /package/dist/components/{ServerError → ui/ServerError}/index.d.ts +0 -0
- /package/dist/components/{SuccessMessage → ui/SuccessMessage}/index.d.ts +0 -0
- /package/dist/components/{SwitchFadeTransition → ui/SwitchFadeTransition}/index.d.ts +0 -0
- /package/dist/components/{SwitchSlideTransition → ui/SwitchSlideTransition}/index.d.ts +0 -0
- /package/dist/components/{VisuallyHidden → ui/VisuallyHidden}/index.d.ts +0 -0
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { jsx as r, Fragment as x } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
|
-
import { OTPForm as g } from "../OTPForm/index.js";
|
|
4
|
-
import { PhoneNumberForm as j } from "../PhoneNumberForm/index.js";
|
|
5
|
-
import { SwitchSlideTransition as v } from "../SwitchSlideTransition/index.js";
|
|
6
|
-
import '../../assets/FlowPhoneNumberOTP.css';const E = {
|
|
7
|
-
"step-wrapper": "FlowPhoneNumberOTP-module__step-wrapper___TtbeW"
|
|
8
|
-
}, B = ({
|
|
9
|
-
animateHeight: u = !0,
|
|
10
|
-
autoFocus: l = !0,
|
|
11
|
-
canResetOTP: h,
|
|
12
|
-
children: m,
|
|
13
|
-
className: p = "",
|
|
14
|
-
countryCode: b,
|
|
15
|
-
error: i,
|
|
16
|
-
isPending: n,
|
|
17
|
-
onCountryCodeChange: s,
|
|
18
|
-
onOTPChange: a,
|
|
19
|
-
onPhoneNumberChange: c,
|
|
20
|
-
onResendOTP: f,
|
|
21
|
-
onSubmitOTP: F,
|
|
22
|
-
onSubmitPhoneNumber: d,
|
|
23
|
-
otp: w,
|
|
24
|
-
otpInputsRef: N,
|
|
25
|
-
phoneNumber: P,
|
|
26
|
-
resendCountdown: T,
|
|
27
|
-
step: o,
|
|
28
|
-
successMessage: _,
|
|
29
|
-
transitionRef: S
|
|
30
|
-
}) => /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(
|
|
31
|
-
v,
|
|
32
|
-
{
|
|
33
|
-
autoFocus: l,
|
|
34
|
-
animateHeight: u,
|
|
35
|
-
items: ["phoneNumber", "otp"],
|
|
36
|
-
initialEntered: !0,
|
|
37
|
-
direction: o === "otp" ? "left" : "right",
|
|
38
|
-
transitionRef: S,
|
|
39
|
-
children: ({ itemKey: e, ...O }) => {
|
|
40
|
-
let t = null;
|
|
41
|
-
return e === "phoneNumber" && (t = /* @__PURE__ */ r(
|
|
42
|
-
j,
|
|
43
|
-
{
|
|
44
|
-
className: p,
|
|
45
|
-
countryCode: b,
|
|
46
|
-
error: o === "phoneNumber" ? i : "",
|
|
47
|
-
isPending: n,
|
|
48
|
-
onCountryCodeChange: s,
|
|
49
|
-
onPhoneNumberChange: c,
|
|
50
|
-
onSubmit: d,
|
|
51
|
-
phoneNumber: P
|
|
52
|
-
}
|
|
53
|
-
)), e === "otp" && (t = /* @__PURE__ */ r(
|
|
54
|
-
g,
|
|
55
|
-
{
|
|
56
|
-
autoFocus: o === "otp",
|
|
57
|
-
canResetOTP: h,
|
|
58
|
-
className: p,
|
|
59
|
-
error: o === "otp" ? i : "",
|
|
60
|
-
isPending: n,
|
|
61
|
-
onOTPChange: a,
|
|
62
|
-
onResendOTP: f,
|
|
63
|
-
onSubmit: F,
|
|
64
|
-
otp: w,
|
|
65
|
-
otpInputsRef: N,
|
|
66
|
-
resendCountdown: T,
|
|
67
|
-
successMessage: _
|
|
68
|
-
}
|
|
69
|
-
)), /* @__PURE__ */ r("div", { ...O, className: E["step-wrapper"], children: m ? m({ step: e, Form: t }) : t });
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
) });
|
|
73
|
-
export {
|
|
74
|
-
B as FlowPhoneNumberOTP
|
|
75
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
|
-
import '../../assets/LoadingSkeleton.css';const i = "LoadingSkeleton-module__loading___ezIkq", t = {
|
|
4
|
-
loading: i
|
|
5
|
-
}, s = ({
|
|
6
|
-
as: o = "div",
|
|
7
|
-
className: n = "",
|
|
8
|
-
style: e
|
|
9
|
-
}) => /* @__PURE__ */ a(
|
|
10
|
-
o,
|
|
11
|
-
{
|
|
12
|
-
"aria-hidden": "true",
|
|
13
|
-
className: `${t.loading} ${n}`,
|
|
14
|
-
style: e
|
|
15
|
-
}
|
|
16
|
-
);
|
|
17
|
-
export {
|
|
18
|
-
s as LoadingSkeleton
|
|
19
|
-
};
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { jsxs as f, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { OneTimePasswordField as y, OneTimePasswordFieldInput as T, OneTimePasswordFieldHiddenInput as I } from "@radix-ui/react-one-time-password-field";
|
|
3
|
-
import { forwardRef as v, useId as s, useMemo as w, useRef as N, useEffect as R } from "react";
|
|
4
|
-
import { Error as $ } from "../Error/index.js";
|
|
5
|
-
import { Input as E } from "../Input/index.js";
|
|
6
|
-
import { Label as B } from "../Label/index.js";
|
|
7
|
-
import { SuccessMessage as F } from "../SuccessMessage/index.js";
|
|
8
|
-
import '../../assets/OTP.css';const j = "OTP-module__otp___EUcSo", x = "OTP-module__input___MEBPV", A = "OTP-module__label___71Oaw", o = {
|
|
9
|
-
otp: j,
|
|
10
|
-
"group-container": "OTP-module__group-container___rfrCo",
|
|
11
|
-
"input-container": "OTP-module__input-container___-yRBL",
|
|
12
|
-
input: x,
|
|
13
|
-
label: A
|
|
14
|
-
}, C = v(
|
|
15
|
-
({ error: e, successMessage: i, passwordLength: d = 6, className: b = "", label: l, ...m }, r) => {
|
|
16
|
-
const c = s(), p = s(), _ = s(), O = w(() => {
|
|
17
|
-
if (e)
|
|
18
|
-
return c;
|
|
19
|
-
if (i)
|
|
20
|
-
return p;
|
|
21
|
-
}, [e, c, i, p]), u = N(/* @__PURE__ */ new Map()), P = (a, n) => {
|
|
22
|
-
a ? u.current.set(n, a) : u.current.delete(n);
|
|
23
|
-
};
|
|
24
|
-
return R(() => {
|
|
25
|
-
const a = Array.from(u.current.values());
|
|
26
|
-
typeof r == "function" ? r(a) : r && (r.current = a);
|
|
27
|
-
}, [d, r]), /* @__PURE__ */ f("div", { className: `${o.otp} ${b}`, children: [
|
|
28
|
-
l && /* @__PURE__ */ t(B, { as: "p", id: _, className: o.label, "data-part": "label", children: l }),
|
|
29
|
-
/* @__PURE__ */ f(
|
|
30
|
-
y,
|
|
31
|
-
{
|
|
32
|
-
...m,
|
|
33
|
-
className: o["group-container"],
|
|
34
|
-
"data-part": "input-group",
|
|
35
|
-
"aria-invalid": !!e,
|
|
36
|
-
"aria-describedby": O,
|
|
37
|
-
"aria-labelledby": l ? _ : void 0,
|
|
38
|
-
style: {
|
|
39
|
-
"--cdp-web-otp-input-width": `${Math.floor(100 / d)}%`
|
|
40
|
-
},
|
|
41
|
-
children: [
|
|
42
|
-
Array.from({ length: d }, (a, n) => /* @__PURE__ */ t("div", { className: o["input-container"], "data-part": "input-container", children: /* @__PURE__ */ t(T, { asChild: !0, children: /* @__PURE__ */ t(
|
|
43
|
-
E,
|
|
44
|
-
{
|
|
45
|
-
name: `${m.name || "otp"}-${n}`,
|
|
46
|
-
ref: (h) => P(h, n),
|
|
47
|
-
className: o.input,
|
|
48
|
-
"aria-invalid": !!e,
|
|
49
|
-
"data-part": "input",
|
|
50
|
-
"data-success": !!i
|
|
51
|
-
}
|
|
52
|
-
) }) }, n)),
|
|
53
|
-
/* @__PURE__ */ t(I, {})
|
|
54
|
-
]
|
|
55
|
-
}
|
|
56
|
-
),
|
|
57
|
-
!!e && /* @__PURE__ */ t($, { id: c, "data-part": "error", children: e }),
|
|
58
|
-
!!i && /* @__PURE__ */ t(F, { id: p, "data-part": "success", children: i })
|
|
59
|
-
] });
|
|
60
|
-
}
|
|
61
|
-
);
|
|
62
|
-
C.displayName = "OTP";
|
|
63
|
-
export {
|
|
64
|
-
C as OTP
|
|
65
|
-
};
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { jsxs as o, jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import "libphonenumber-js";
|
|
3
|
-
import { useCallback as f, useEffect as P } from "react";
|
|
4
|
-
import { Input as y } from "../Input/index.js";
|
|
5
|
-
import { VisuallyHidden as C } from "../VisuallyHidden/index.js";
|
|
6
|
-
import { countries as $ } from "../../data/countries.js";
|
|
7
|
-
import { usePhoneNumberFormatter as j } from "./usePhoneNumberFormatter.js";
|
|
8
|
-
import '../../assets/PhoneNumberInput.css';const U = "PhoneNumberInput-module__invalid___qs2M2", V = "PhoneNumberInput-module__success___awnfm", k = "PhoneNumberInput-module__input___ZkUYh", l = {
|
|
9
|
-
"phone-number-input": "PhoneNumberInput-module__phone-number-input___c7QxX",
|
|
10
|
-
invalid: U,
|
|
11
|
-
success: V,
|
|
12
|
-
input: k,
|
|
13
|
-
"country-calling-code": "PhoneNumberInput-module__country-calling-code___xUjx5"
|
|
14
|
-
}, M = ({
|
|
15
|
-
autoComplete: a = "tel-national",
|
|
16
|
-
className: h = "",
|
|
17
|
-
countryCode: s = "US",
|
|
18
|
-
onCountryCodeChange: r,
|
|
19
|
-
onPhoneNumberChange: c,
|
|
20
|
-
phoneNumber: u,
|
|
21
|
-
...t
|
|
22
|
-
}) => {
|
|
23
|
-
const {
|
|
24
|
-
formatBeforePhoneNumberChange: m,
|
|
25
|
-
formatBeforeCountryCodeChange: d,
|
|
26
|
-
placeholder: v,
|
|
27
|
-
formattedDisplayNumber: b
|
|
28
|
-
} = j(u.value, s), g = f(
|
|
29
|
-
(e) => {
|
|
30
|
-
let n = e.target.value.replace(/\D/g, "");
|
|
31
|
-
n === u.value && (n = n.slice(0, -1));
|
|
32
|
-
const x = m(n);
|
|
33
|
-
c?.(x);
|
|
34
|
-
},
|
|
35
|
-
[m, c, u]
|
|
36
|
-
), _ = f(
|
|
37
|
-
(e) => {
|
|
38
|
-
const n = d(e);
|
|
39
|
-
r(e), c?.(n);
|
|
40
|
-
},
|
|
41
|
-
[d, r, c]
|
|
42
|
-
), p = $.find((e) => e.code === s), I = t["aria-invalid"] && t["aria-invalid"] !== "false", N = t["data-success"] && t["data-success"] !== "false";
|
|
43
|
-
return P(() => {
|
|
44
|
-
_(s);
|
|
45
|
-
}, [s, _]), /* @__PURE__ */ o(
|
|
46
|
-
"div",
|
|
47
|
-
{
|
|
48
|
-
className: `${l["phone-number-input"]} ${I ? l.invalid : ""} ${N ? l.success : ""} ${h}`,
|
|
49
|
-
children: [
|
|
50
|
-
p && /* @__PURE__ */ i(w, { country: p }),
|
|
51
|
-
/* @__PURE__ */ i(
|
|
52
|
-
y,
|
|
53
|
-
{
|
|
54
|
-
...t,
|
|
55
|
-
className: l.input,
|
|
56
|
-
autoComplete: a,
|
|
57
|
-
onChange: g,
|
|
58
|
-
placeholder: v,
|
|
59
|
-
type: "tel",
|
|
60
|
-
value: b
|
|
61
|
-
}
|
|
62
|
-
)
|
|
63
|
-
]
|
|
64
|
-
}
|
|
65
|
-
);
|
|
66
|
-
}, w = ({ country: a }) => /* @__PURE__ */ o("span", { className: l["country-calling-code"], children: [
|
|
67
|
-
/* @__PURE__ */ i("span", { "aria-hidden": "true", children: a.flag }),
|
|
68
|
-
/* @__PURE__ */ i(C, { children: a.name }),
|
|
69
|
-
/* @__PURE__ */ o("span", { children: [
|
|
70
|
-
"+",
|
|
71
|
-
a.callingCode
|
|
72
|
-
] })
|
|
73
|
-
] });
|
|
74
|
-
export {
|
|
75
|
-
M as PhoneNumberInput
|
|
76
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { jsxs as i, jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as m } from "react";
|
|
3
|
-
import { IconCheckCircle as u } from "../../icons/IconCheckCircle.js";
|
|
4
|
-
import '../../assets/SuccessMessage.css';const t = "SuccessMessage-module__success___ifqoT", _ = "SuccessMessage-module__icon___ClY26", c = {
|
|
5
|
-
success: t,
|
|
6
|
-
icon: _
|
|
7
|
-
}, l = m(
|
|
8
|
-
({ children: e, id: o, className: r = "", ...a }, n) => /* @__PURE__ */ i("p", { id: o, className: `${c.success} ${r}`, ref: n, ...a, children: [
|
|
9
|
-
/* @__PURE__ */ s(u, { className: c.icon }),
|
|
10
|
-
/* @__PURE__ */ s("span", { children: e })
|
|
11
|
-
] })
|
|
12
|
-
);
|
|
13
|
-
l.displayName = "SuccessMessage";
|
|
14
|
-
export {
|
|
15
|
-
l as SuccessMessage
|
|
16
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/dist/components/{PhoneNumberInput → forms/PhoneNumberInput}/PhoneNumberMetadata.d.ts
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|