@coinbase/cdp-react 0.0.19 → 0.0.20

package/dist/components/FlowPhoneNumberOTP/index.js

@@ -1,75 +0,0 @@
-import { jsx as r, Fragment as x } from "react/jsx-runtime";
-import "react";
-import { OTPForm as g } from "../OTPForm/index.js";
-import { PhoneNumberForm as j } from "../PhoneNumberForm/index.js";
-import { SwitchSlideTransition as v } from "../SwitchSlideTransition/index.js";
-import '../../assets/FlowPhoneNumberOTP.css';const E = {
-  "step-wrapper": "FlowPhoneNumberOTP-module__step-wrapper___TtbeW"
-}, B = ({
-  animateHeight: u = !0,
-  autoFocus: l = !0,
-  canResetOTP: h,
-  children: m,
-  className: p = "",
-  countryCode: b,
-  error: i,
-  isPending: n,
-  onCountryCodeChange: s,
-  onOTPChange: a,
-  onPhoneNumberChange: c,
-  onResendOTP: f,
-  onSubmitOTP: F,
-  onSubmitPhoneNumber: d,
-  otp: w,
-  otpInputsRef: N,
-  phoneNumber: P,
-  resendCountdown: T,
-  step: o,
-  successMessage: _,
-  transitionRef: S
-}) => /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(
-  v,
-  {
-    autoFocus: l,
-    animateHeight: u,
-    items: ["phoneNumber", "otp"],
-    initialEntered: !0,
-    direction: o === "otp" ? "left" : "right",
-    transitionRef: S,
-    children: ({ itemKey: e, ...O }) => {
-      let t = null;
-      return e === "phoneNumber" && (t = /* @__PURE__ */ r(
-        j,
-        {
-          className: p,
-          countryCode: b,
-          error: o === "phoneNumber" ? i : "",
-          isPending: n,
-          onCountryCodeChange: s,
-          onPhoneNumberChange: c,
-          onSubmit: d,
-          phoneNumber: P
-        }
-      )), e === "otp" && (t = /* @__PURE__ */ r(
-        g,
-        {
-          autoFocus: o === "otp",
-          canResetOTP: h,
-          className: p,
-          error: o === "otp" ? i : "",
-          isPending: n,
-          onOTPChange: a,
-          onResendOTP: f,
-          onSubmit: F,
-          otp: w,
-          otpInputsRef: N,
-          resendCountdown: T,
-          successMessage: _
-        }
-      )), /* @__PURE__ */ r("div", { ...O, className: E["step-wrapper"], children: m ? m({ step: e, Form: t }) : t });
-    }
-  }
-) });
-export {
-  B as FlowPhoneNumberOTP
-};

package/dist/components/LoadingSkeleton/index.js

@@ -1,19 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import "react";
-import '../../assets/LoadingSkeleton.css';const i = "LoadingSkeleton-module__loading___ezIkq", t = {
-  loading: i
-}, s = ({
-  as: o = "div",
-  className: n = "",
-  style: e
-}) => /* @__PURE__ */ a(
-  o,
-  {
-    "aria-hidden": "true",
-    className: `${t.loading} ${n}`,
-    style: e
-  }
-);
-export {
-  s as LoadingSkeleton
-};

package/dist/components/OTP/index.js

@@ -1,65 +0,0 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { OneTimePasswordField as y, OneTimePasswordFieldInput as T, OneTimePasswordFieldHiddenInput as I } from "@radix-ui/react-one-time-password-field";
-import { forwardRef as v, useId as s, useMemo as w, useRef as N, useEffect as R } from "react";
-import { Error as $ } from "../Error/index.js";
-import { Input as E } from "../Input/index.js";
-import { Label as B } from "../Label/index.js";
-import { SuccessMessage as F } from "../SuccessMessage/index.js";
-import '../../assets/OTP.css';const j = "OTP-module__otp___EUcSo", x = "OTP-module__input___MEBPV", A = "OTP-module__label___71Oaw", o = {
-  otp: j,
-  "group-container": "OTP-module__group-container___rfrCo",
-  "input-container": "OTP-module__input-container___-yRBL",
-  input: x,
-  label: A
-}, C = v(
-  ({ error: e, successMessage: i, passwordLength: d = 6, className: b = "", label: l, ...m }, r) => {
-    const c = s(), p = s(), _ = s(), O = w(() => {
-      if (e)
-        return c;
-      if (i)
-        return p;
-    }, [e, c, i, p]), u = N(/* @__PURE__ */ new Map()), P = (a, n) => {
-      a ? u.current.set(n, a) : u.current.delete(n);
-    };
-    return R(() => {
-      const a = Array.from(u.current.values());
-      typeof r == "function" ? r(a) : r && (r.current = a);
-    }, [d, r]), /* @__PURE__ */ f("div", { className: `${o.otp} ${b}`, children: [
-      l && /* @__PURE__ */ t(B, { as: "p", id: _, className: o.label, "data-part": "label", children: l }),
-      /* @__PURE__ */ f(
-        y,
-        {
-          ...m,
-          className: o["group-container"],
-          "data-part": "input-group",
-          "aria-invalid": !!e,
-          "aria-describedby": O,
-          "aria-labelledby": l ? _ : void 0,
-          style: {
-            "--cdp-web-otp-input-width": `${Math.floor(100 / d)}%`
-          },
-          children: [
-            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(
-              E,
-              {
-                name: `${m.name || "otp"}-${n}`,
-                ref: (h) => P(h, n),
-                className: o.input,
-                "aria-invalid": !!e,
-                "data-part": "input",
-                "data-success": !!i
-              }
-            ) }) }, n)),
-            /* @__PURE__ */ t(I, {})
-          ]
-        }
-      ),
-      !!e && /* @__PURE__ */ t($, { id: c, "data-part": "error", children: e }),
-      !!i && /* @__PURE__ */ t(F, { id: p, "data-part": "success", children: i })
-    ] });
-  }
-);
-C.displayName = "OTP";
-export {
-  C as OTP
-};

package/dist/components/PhoneNumberInput/index.js

@@ -1,76 +0,0 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import "libphonenumber-js";
-import { useCallback as f, useEffect as P } from "react";
-import { Input as y } from "../Input/index.js";
-import { VisuallyHidden as C } from "../VisuallyHidden/index.js";
-import { countries as $ } from "../../data/countries.js";
-import { usePhoneNumberFormatter as j } from "./usePhoneNumberFormatter.js";
-import '../../assets/PhoneNumberInput.css';const U = "PhoneNumberInput-module__invalid___qs2M2", V = "PhoneNumberInput-module__success___awnfm", k = "PhoneNumberInput-module__input___ZkUYh", l = {
-  "phone-number-input": "PhoneNumberInput-module__phone-number-input___c7QxX",
-  invalid: U,
-  success: V,
-  input: k,
-  "country-calling-code": "PhoneNumberInput-module__country-calling-code___xUjx5"
-}, M = ({
-  autoComplete: a = "tel-national",
-  className: h = "",
-  countryCode: s = "US",
-  onCountryCodeChange: r,
-  onPhoneNumberChange: c,
-  phoneNumber: u,
-  ...t
-}) => {
-  const {
-    formatBeforePhoneNumberChange: m,
-    formatBeforeCountryCodeChange: d,
-    placeholder: v,
-    formattedDisplayNumber: b
-  } = j(u.value, s), g = f(
-    (e) => {
-      let n = e.target.value.replace(/\D/g, "");
-      n === u.value && (n = n.slice(0, -1));
-      const x = m(n);
-      c?.(x);
-    },
-    [m, c, u]
-  ), _ = f(
-    (e) => {
-      const n = d(e);
-      r(e), c?.(n);
-    },
-    [d, r, c]
-  ), p = $.find((e) => e.code === s), I = t["aria-invalid"] && t["aria-invalid"] !== "false", N = t["data-success"] && t["data-success"] !== "false";
-  return P(() => {
-    _(s);
-  }, [s, _]), /* @__PURE__ */ o(
-    "div",
-    {
-      className: `${l["phone-number-input"]} ${I ? l.invalid : ""} ${N ? l.success : ""} ${h}`,
-      children: [
-        p && /* @__PURE__ */ i(w, { country: p }),
-        /* @__PURE__ */ i(
-          y,
-          {
-            ...t,
-            className: l.input,
-            autoComplete: a,
-            onChange: g,
-            placeholder: v,
-            type: "tel",
-            value: b
-          }
-        )
-      ]
-    }
-  );
-}, w = ({ country: a }) => /* @__PURE__ */ o("span", { className: l["country-calling-code"], children: [
-  /* @__PURE__ */ i("span", { "aria-hidden": "true", children: a.flag }),
-  /* @__PURE__ */ i(C, { children: a.name }),
-  /* @__PURE__ */ o("span", { children: [
-    "+",
-    a.callingCode
-  ] })
-] });
-export {
-  M as PhoneNumberInput
-};

package/dist/components/SuccessMessage/index.js

@@ -1,16 +0,0 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { IconCheckCircle as u } from "../../icons/IconCheckCircle.js";
-import '../../assets/SuccessMessage.css';const t = "SuccessMessage-module__success___ifqoT", _ = "SuccessMessage-module__icon___ClY26", c = {
-  success: t,
-  icon: _
-}, l = m(
-  ({ children: e, id: o, className: r = "", ...a }, n) => /* @__PURE__ */ i("p", { id: o, className: `${c.success} ${r}`, ref: n, ...a, children: [
-    /* @__PURE__ */ s(u, { className: c.icon }),
-    /* @__PURE__ */ s("span", { children: e })
-  ] })
-);
-l.displayName = "SuccessMessage";
-export {
-  l as SuccessMessage
-};

package/dist/utils/validatePhoneNumber.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/utils/validatePhoneNumber.js

@@ -1 +0,0 @@
-