@coinbase/cdp-react 0.0.17 → 0.0.19

package/dist/components/FlowPhoneNumberOTP/index.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, Ref } from 'react';
+import { OTPFormProps } from '../OTPForm/OTPForm';
+import { PhoneNumberFormProps } from '../PhoneNumberForm/PhoneNumberForm';
+import { SwitchSlideTransitionRef } from '../SwitchSlideTransition/SwitchSlideTransition';
+export type Step = "phoneNumber" | "otp";
+export interface FlowPhoneNumberOTPProps extends Omit<PhoneNumberFormProps, "onSubmit">, Omit<OTPFormProps, "onSubmit"> {
+    animateHeight?: boolean;
+    children?: (props: {
+        step: Step;
+        Form: ReactNode;
+    }) => ReactNode;
+    className?: string;
+    onSubmitPhoneNumber: PhoneNumberFormProps["onSubmit"];
+    onSubmitOTP: OTPFormProps["onSubmit"];
+    step: Step;
+    transitionRef: Ref<SwitchSlideTransitionRef<Step>>;
+}
+export declare const FlowPhoneNumberOTP: ({ animateHeight, autoFocus, canResetOTP, children, className, countryCode, error, isPending, onCountryCodeChange, onOTPChange, onPhoneNumberChange, onResendOTP, onSubmitOTP, onSubmitPhoneNumber, otp, otpInputsRef, phoneNumber, resendCountdown, step, successMessage, transitionRef, }: FlowPhoneNumberOTPProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FlowPhoneNumberOTP/index.js

@@ -0,0 +1,75 @@
+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/Label/index.d.ts

@@ -0,0 +1,7 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+    as?: ElementType;
+    children?: ReactNode;
+}
+export declare const Label: ({ as: Component, children, className, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Label/index.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import '../../assets/Label.css';const t = "Label-module__label___RaRvM", b = {
+  label: t
+}, _ = ({
+  as: l = "label",
+  children: e,
+  className: a = "",
+  ...s
+}) => /* @__PURE__ */ o(l, { className: `${b.label} ${a}`, ...s, children: e });
+export {
+  _ as Label
+};

package/dist/components/OTP/index.d.ts

@@ -1,6 +1,9 @@
 import { OneTimePasswordFieldProps } from '@radix-ui/react-one-time-password-field';
+import { ReactNode } from 'react';
 type OTPProps = {
     error?: string | null;
+    successMessage?: string | null;
+    label?: ReactNode;
     passwordLength?: number;
 } & OneTimePasswordFieldProps;
 export declare const OTP: import('react').ForwardRefExoticComponent<Omit<OTPProps, "ref"> & import('react').RefAttributes<HTMLInputElement[]>>;

package/dist/components/OTP/index.js

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

package/dist/components/OTPForm/index.d.ts

@@ -0,0 +1,16 @@
+import { APIError } from '@coinbase/cdp-hooks';
+import { FormHTMLAttributes, Ref } from 'react';
+export interface OTPFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
+    canResetOTP?: boolean;
+    error?: string | APIError;
+    isPending?: boolean;
+    onClearServerErrors?: () => void;
+    onOTPChange?: (value: string) => void;
+    onResendOTP?: () => void;
+    otp?: string;
+    otpInputsRef?: Ref<HTMLInputElement[]>;
+    passwordLength?: number;
+    resendCountdown?: number | null;
+    successMessage?: string;
+}
+export declare const OTPForm: ({ canResetOTP, error, isPending, onOTPChange, onResendOTP, otp, otpInputsRef, passwordLength, resendCountdown, successMessage, ...props }: OTPFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/OTPForm/index.js

@@ -0,0 +1,76 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "@coinbase/cdp-hooks";
+import { Form as h, FormSubmit as u } from "@radix-ui/react-form";
+import "react";
+import { Button as v } from "../Button/index.js";
+import { LoadingSpinner as F } from "../LoadingSpinner/index.js";
+import { OTP as N } from "../OTP/index.js";
+import { VisuallyHidden as g } from "../VisuallyHidden/index.js";
+import { isApiError as P } from "../../utils/isApiError.js";
+import '../../assets/OTPForm.css';const o = {
+  "otp-form": "OTPForm-module__otp-form___jQN4H",
+  "form-footer": "OTPForm-module__form-footer___JhfLr",
+  "server-state-wrapper": "OTPForm-module__server-state-wrapper___PS7UP",
+  "loading-spinner": "OTPForm-module__loading-spinner___fJRqe",
+  "resend-wrapper": "OTPForm-module__resend-wrapper___HeIR2",
+  "reset-timer": "OTPForm-module__reset-timer___MEkQh"
+}, E = ({
+  canResetOTP: m,
+  error: t,
+  isPending: a,
+  onOTPChange: s,
+  onResendOTP: l,
+  otp: p,
+  otpInputsRef: n,
+  passwordLength: d,
+  resendCountdown: i,
+  successMessage: _,
+  ...c
+}) => /* @__PURE__ */ r(h, { ...c, children: [
+  /* @__PURE__ */ e(
+    N,
+    {
+      ref: n,
+      name: "otp",
+      "aria-label": "Enter code",
+      autoSubmit: !0,
+      passwordLength: d || 6,
+      value: p,
+      error: P(t) ? t.message : t,
+      onChange: (f) => f.preventDefault(),
+      onValueChange: s,
+      className: o["otp-form"],
+      successMessage: _
+    }
+  ),
+  /* @__PURE__ */ r("div", { className: o["form-footer"], children: [
+    a && !m && /* @__PURE__ */ e("div", { className: o["server-state-wrapper"], children: a && !m && /* @__PURE__ */ e(F, { className: o["loading-spinner"] }) }),
+    /* @__PURE__ */ r("div", { className: o["resend-wrapper"], children: [
+      m && /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e(
+        v,
+        {
+          type: "button",
+          onClick: l,
+          isPending: a,
+          variant: "linkPrimary",
+          children: "Resend code"
+        }
+      ) }),
+      !m && i !== null && /* @__PURE__ */ e("div", { className: o["reset-timer"], children: /* @__PURE__ */ r("p", { children: [
+        "Resend code in ",
+        /* @__PURE__ */ r("span", { "aria-hidden": "true", children: [
+          i,
+          "s"
+        ] }),
+        /* @__PURE__ */ r(g, { children: [
+          i,
+          " ",
+          i === 1 ? "second" : "seconds"
+        ] })
+      ] }) })
+    ] })
+  ] })
+] });
+export {
+  E as OTPForm
+};

package/dist/components/PhoneNumberForm/index.d.ts

@@ -0,0 +1,14 @@
+import { APIError } from '@coinbase/cdp-hooks';
+import { FormHTMLAttributes, ReactNode } from 'react';
+import { PhoneNumberInputProps } from '../PhoneNumberInput/PhoneNumberInput';
+export interface PhoneNumberFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
+    countryCode: PhoneNumberInputProps["countryCode"];
+    error?: string | APIError;
+    isPending?: boolean;
+    onClearServerErrors?: () => void;
+    onCountryCodeChange: PhoneNumberInputProps["onCountryCodeChange"];
+    onPhoneNumberChange: PhoneNumberInputProps["onPhoneNumberChange"];
+    phoneNumber: PhoneNumberInputProps["phoneNumber"];
+    submitLabel?: ReactNode;
+}
+export declare const PhoneNumberForm: ({ className, countryCode, error, isPending, onCountryCodeChange, onPhoneNumberChange, phoneNumber, submitLabel, ...props }: PhoneNumberFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PhoneNumberForm/index.js

@@ -0,0 +1,68 @@
+import { jsxs as _, jsx as e } from "react/jsx-runtime";
+import "@coinbase/cdp-hooks";
+import { Form as I, FormSubmit as F } from "@radix-ui/react-form";
+import { useMemo as g } from "react";
+import { Button as E } from "../Button/index.js";
+import { Field as S } from "../Field/index.js";
+import { PhoneNumberInput as x } from "../PhoneNumberInput/index.js";
+import { ServerError as C } from "../ServerError/index.js";
+import { usePhoneNumberValidators as U } from "../../hooks/usePhoneNumberValidators.js";
+import '../../assets/PhoneNumberForm.css';const y = "PhoneNumberForm-module__form___xIcYN", t = {
+  form: y,
+  "server-error": "PhoneNumberForm-module__server-error___-98Dt"
+}, V = ({
+  className: s = "",
+  countryCode: n = "US",
+  error: r,
+  isPending: u,
+  onCountryCodeChange: l,
+  onPhoneNumberChange: a,
+  phoneNumber: h,
+  submitLabel: d = "Continue",
+  ...p
+}) => {
+  const {
+    isInvalidCountry: v,
+    isInvalidLength: b,
+    isInvalidNumber: c,
+    isInvalidTooShort: f,
+    isInvalidTooLong: P,
+    isInvalidPhoneNumberError: i
+  } = U({ countryCode: n }), o = g(() => r && i(r) ? "Use a valid phone number" : "", [r, i]), N = !!r && !o;
+  return /* @__PURE__ */ _(I, { className: `${t.form} ${s}`, ...p, children: [
+    /* @__PURE__ */ e(
+      S,
+      {
+        label: "Phone number",
+        name: "phone",
+        inlineError: o,
+        validators: [
+          ["valueMissing", "Phone number is required"],
+          ["typeMismatch", "Use a valid phone number"],
+          [c, "Use a valid phone number"],
+          [v, "Country is not supported"],
+          [f, "Phone number is too short"],
+          [P, "Phone number is too long"],
+          [b, "Phone number is the wrong length"]
+        ],
+        children: (m) => /* @__PURE__ */ e(
+          x,
+          {
+            "aria-invalid": !(m === void 0 || m.valid) || !!o,
+            autoComplete: "tel-national",
+            phoneNumber: h,
+            onPhoneNumberChange: a,
+            countryCode: n,
+            onCountryCodeChange: l,
+            required: !0
+          }
+        )
+      }
+    ),
+    N && /* @__PURE__ */ e(C, { error: r, className: t["server-error"] }),
+    /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ e(E, { type: "submit", isPending: u, children: d }) })
+  ] });
+};
+export {
+  V as PhoneNumberForm
+};

package/dist/components/PhoneNumberInput/PhoneNumberMetadata.d.ts

@@ -0,0 +1,2 @@
+import { Metadata } from 'libphonenumber-js';
+export declare const PhoneNumberMetadata: Metadata;

package/dist/components/PhoneNumberInput/PhoneNumberMetadata.js

@@ -0,0 +1,5 @@
+import { Metadata as t } from "libphonenumber-js";
+const e = new t();
+export {
+  e as PhoneNumberMetadata
+};

package/dist/components/PhoneNumberInput/index.d.ts

@@ -0,0 +1,10 @@
+import { CountryCode } from 'libphonenumber-js';
+import { InputHTMLAttributes } from 'react';
+import { PhoneNumber } from '../../utils/parseValuesFromPhoneNumber';
+export interface PhoneNumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+    onCountryCodeChange: (newCountry: CountryCode) => void;
+    countryCode?: CountryCode;
+    onPhoneNumberChange: (phoneNumber: PhoneNumber) => void;
+    phoneNumber: PhoneNumber;
+}
+export declare const PhoneNumberInput: ({ autoComplete, className, countryCode, onCountryCodeChange, onPhoneNumberChange, phoneNumber, ...props }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PhoneNumberInput/index.js

@@ -0,0 +1,76 @@
+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/PhoneNumberInput/maskOverride.d.ts

@@ -0,0 +1,8 @@
+import { CountryCode } from 'libphonenumber-js';
+type MaskFormatOverride = {
+    prefix?: string;
+    maxLength?: number;
+    normalizer?: (value: string) => string;
+};
+export declare const getMaskOverride: (countryCode?: CountryCode) => MaskFormatOverride;
+export {};

package/dist/components/PhoneNumberInput/maskOverride.js

@@ -0,0 +1,61 @@
+import "libphonenumber-js";
+import { nonThrowingGetCountryCallingCode as e } from "../../data/countries.js";
+const n = (r) => r.startsWith("1") ? r.slice(1) : r, i = {
+  234: {
+    /**
+     * libphonenumber-js bug:
+     *
+     * Nigerial phone numbers require a 0 prefix for the mask to work.
+     */
+    prefix: "0"
+  },
+  33: {
+    /**
+     * libphonenumber-js bug:
+     *
+     * French phone numbers require a 0 prefix for the mask to work.
+     * On top of that, libphonenumber does not take that 0 into account on maxLength.
+     * This means that if the user types a number with the 0, the number will be cropped short.
+     *
+     * Example: 01 23 45 67 89 would be cropped to 01 23 45 67 8.
+     * Users could overcome this by omiting the 0, but this would mean the mask formatting would
+     * not work, and the input would look plain 123456789.
+     */
+    prefix: "0",
+    maxLength: 10
+  },
+  1: {
+    /**
+     * libphonenumber-js bug:
+     *
+     * Calling code 1 Phone numbers cannot start with 1.
+     * If we allow them to, the masks will show 1 (234) 567-890, and limit the length to 10
+     * The above is an invalid US number though, as phone numbers need to have 10 digits EXCLUDING
+     * the internation code 1.
+     *
+     * This does not introduce a bug because we already have the Country Code picker, so adding
+     * the international code to the Phone input is a user mistake.
+     */
+    normalizer: n
+  },
+  44: {
+    /**
+     * libphonenumber-js bug:
+     *
+     * GB has max 10 digit phone numbers AFTER A LEADING 0 (so actually 11)
+     * On top of that, the libphonenumber-js mask does not work without the leading 0.
+     *
+     * This will enforce adding the leading 0, and override the max length to 11 instead of 10.
+     */
+    prefix: "0",
+    maxLength: 11
+  }
+}, a = (r) => {
+  if (!r)
+    return {};
+  const t = e(r);
+  return t ? i[t] ?? {} : {};
+};
+export {
+  a as getMaskOverride
+};

package/dist/components/PhoneNumberInput/usePhoneNumberFormatter.d.ts

@@ -0,0 +1,7 @@
+import { CountryCode } from 'libphonenumber-js';
+export declare const usePhoneNumberFormatter: (phoneNumber: string, countryCode: CountryCode | undefined) => {
+    formatBeforePhoneNumberChange: (inputPhoneNumber: string) => import('../../utils/parseValuesFromPhoneNumber').PhoneNumber;
+    formatBeforeCountryCodeChange: (newCountryCode: CountryCode) => import('../../utils/parseValuesFromPhoneNumber').PhoneNumber;
+    placeholder: string | undefined;
+    formattedDisplayNumber: string;
+};

package/dist/components/PhoneNumberInput/usePhoneNumberFormatter.js

@@ -0,0 +1,52 @@
+import { parseIncompletePhoneNumber as I, getExampleNumber as l, AsYouType as K } from "libphonenumber-js";
+import { useCallback as S, useMemo as N } from "react";
+import { parseValuesFromPhoneNumber as B } from "../../utils/parseValuesFromPhoneNumber.js";
+import { getMaskOverride as L } from "./maskOverride.js";
+import { PhoneNumberMetadata as G } from "./PhoneNumberMetadata.js";
+const i = { AC: "40123", AD: "312345", AE: "501234567", AF: "701234567", AG: "2684641234", AI: "2642351234", AL: "672123456", AM: "77123456", AO: "923123456", AR: "91123456789", AS: "6847331234", AT: "664123456", AU: "412345678", AW: "5601234", AX: "412345678", AZ: "401234567", BA: "61123456", BB: "2462501234", BD: "1812345678", BE: "470123456", BF: "70123456", BG: "43012345", BH: "36001234", BI: "79561234", BJ: "0195123456", BL: "690001234", BM: "4413701234", BN: "7123456", BO: "71234567", BQ: "3181234", BR: "11961234567", BS: "2423591234", BT: "17123456", BW: "71123456", BY: "294911911", BZ: "6221234", CA: "5062345678", CC: "412345678", CD: "991234567", CF: "70012345", CG: "061234567", CH: "781234567", CI: "0123456789", CK: "71234", CL: "221234567", CM: "671234567", CN: "13123456789", CO: "3211234567", CR: "83123456", CU: "51234567", CV: "9911234", CW: "95181234", CX: "412345678", CY: "96123456", CZ: "601123456", DE: "15123456789", DJ: "77831001", DK: "34412345", DM: "7672251234", DO: "8092345678", DZ: "551234567", EC: "991234567", EE: "51234567", EG: "1001234567", EH: "650123456", ER: "7123456", ES: "612345678", ET: "911234567", FI: "412345678", FJ: "7012345", FK: "51234", FM: "3501234", FO: "211234", FR: "612345678", GA: "06031234", GB: "7400123456", GD: "4734031234", GE: "555123456", GF: "694201234", GG: "7781123456", GH: "231234567", GI: "57123456", GL: "221234", GM: "3012345", GN: "601123456", GP: "690001234", GQ: "222123456", GR: "6912345678", GT: "51234567", GU: "6713001234", GW: "955012345", GY: "6091234", HK: "51234567", HN: "91234567", HR: "921234567", HT: "34101234", HU: "201234567", ID: "812345678", IE: "850123456", IL: "502345678", IM: "7924123456", IN: "8123456789", IO: "3801234", IQ: "7912345678", IR: "9123456789", IS: "6111234", IT: "3123456789", JE: "7797712345", JM: "8762101234", JO: "790123456", JP: "9012345678", KE: "712123456", KG: "700123456", KH: "91234567", KI: "72001234", KM: "3212345", KN: "8697652917", KP: "1921234567", KR: "1020000000", KW: "50012345", KY: "3453231234", KZ: "7710009998", LA: "2023123456", LB: "71123456", LC: "7582845678", LI: "660234567", LK: "712345678", LR: "770123456", LS: "50123456", LT: "61234567", LU: "628123456", LV: "21234567", LY: "912345678", MA: "650123456", MC: "612345678", MD: "62112345", ME: "67622901", MF: "690001234", MG: "321234567", MH: "2351234", MK: "72345678", ML: "65012345", MM: "92123456", MN: "88123456", MO: "66123456", MP: "6702345678", MQ: "696201234", MR: "22123456", MS: "6644923456", MT: "96961234", MU: "52512345", MV: "7712345", MW: "991234567", MX: "2221234567", MY: "123456789", MZ: "821234567", NA: "811234567", NC: "751234", NE: "93123456", NF: "381234", NG: "8021234567", NI: "81234567", NL: "612345678", NO: "40612345", NP: "9841234567", NR: "5551234", NU: "8884012", NZ: "211234567", OM: "92123456", PA: "61234567", PE: "912345678", PF: "87123456", PG: "70123456", PH: "9051234567", PK: "3012345678", PL: "512345678", PM: "551234", PR: "7872345678", PS: "599123456", PT: "912345678", PW: "6201234", PY: "961456789", QA: "33123456", RE: "692123456", RO: "712034567", RS: "601234567", RU: "9123456789", RW: "720123456", SA: "512345678", SB: "7421234", SC: "2510123", SD: "911231234", SE: "701234567", SG: "81234567", SH: "51234", SI: "31234567", SJ: "41234567", SK: "912123456", SL: "25123456", SM: "66661212", SN: "701234567", SO: "71123456", SR: "7412345", SS: "977123456", ST: "9812345", SV: "70123456", SX: "7215205678", SY: "944567890", SZ: "76123456", TA: "8999", TC: "6492311234", TD: "63012345", TG: "90112345", TH: "812345678", TJ: "917123456", TK: "7290", TL: "77212345", TM: "66123456", TN: "20123456", TO: "7715123", TR: "5012345678", TT: "8682911234", TV: "901234", TW: "912345678", TZ: "621234567", UA: "501234567", UG: "712345678", US: "2015550123", UY: "94231234", UZ: "912345678", VA: "3123456789", VC: "7844301234", VE: "4121234567", VG: "2843001234", VI: "3406421234", VN: "912345678", VU: "5912345", WF: "821234", WS: "7212345", XK: "43201234", YE: "712345678", YT: "639012345", ZA: "711234567", ZM: "955123456", ZW: "712345678" }, u = (n, r) => {
+  const s = S(() => {
+    if (!G.numberingPlan || !r)
+      return 20;
+    const { maxLength: e } = L(r);
+    return e || (Math.max(...G.numberingPlan.possibleLengths()) ?? 20);
+  }, [r]), m = S(
+    (e, t) => {
+      const { prefix: M, normalizer: a } = L(t);
+      if (M && e && !e.startsWith(M))
+        return M + e;
+      const E = a ? a(e) : e;
+      return I(E);
+    },
+    []
+  ), T = S(
+    (e) => {
+      const t = s(), a = m(e, r).slice(0, t);
+      return B(a, r);
+    },
+    [r, s, m]
+  ), A = S(
+    (e) => {
+      G.selectNumberingPlan(e);
+      const t = s(), M = n.slice(0, t), a = m(M, e);
+      return B(a, e);
+    },
+    [n, s, m]
+  ), o = N(() => r ? l(r ?? "US", i)?.formatNational().replace(/\d/g, "0") : "", [r]), P = N(() => r ? new K(r).input(n) : n, [r, n]);
+  return N(
+    () => ({
+      formatBeforePhoneNumberChange: T,
+      formatBeforeCountryCodeChange: A,
+      placeholder: o,
+      formattedDisplayNumber: P
+    }),
+    [
+      A,
+      T,
+      P,
+      o
+    ]
+  );
+};
+export {
+  u as usePhoneNumberFormatter
+};