@coinbase/cdp-react 0.0.19 → 0.0.21

package/dist/components/{Button → ui/Button}/index.js

@@ -1,30 +1,30 @@
 import { jsx as e, jsxs as c, Fragment as y } from "react/jsx-runtime";
-import { forwardRef as p, useMemo as s } from "react";
-import "../../theme/theme.js";
+import { forwardRef as p, useMemo as a } from "react";
 import { LoadingSpinner as B } from "../LoadingSpinner/index.js";
 import { VisuallyHidden as k } from "../VisuallyHidden/index.js";
-import '../../assets/Button.css';const g = "Button-module__btn___Fx11X", z = "Button-module__primary___s1sM6", f = "Button-module__secondary___R0waJ", r = {
-  btn: g,
-  "size-lg": "Button-module__size-lg___2sR8u",
-  "size-md": "Button-module__size-md___HBcrV",
-  "size-sm": "Button-module__size-sm___yph5g",
-  "link-primary": "Button-module__link-primary___wROmv",
-  "link-secondary": "Button-module__link-secondary___5VErP",
-  primary: z,
-  secondary: f,
-  "transparent-primary": "Button-module__transparent-primary___Ah0yM",
-  "transparent-secondary": "Button-module__transparent-secondary___kk5sZ"
+import "../../../theme/theme.js";
+import '../../../assets/Button.css';const f = "Button-module__btn___Wj6Dr", g = "Button-module__primary___WGT--", z = "Button-module__secondary___Fx0LJ", r = {
+  btn: f,
+  "size-lg": "Button-module__size-lg___WlcVE",
+  "size-md": "Button-module__size-md___-SMmD",
+  "size-sm": "Button-module__size-sm___Vnrq6",
+  "link-primary": "Button-module__link-primary___6Zgkh",
+  "link-secondary": "Button-module__link-secondary___S0Qdo",
+  primary: g,
+  secondary: z,
+  "transparent-primary": "Button-module__transparent-primary___iwWv5",
+  "transparent-secondary": "Button-module__transparent-secondary___GfRXu"
 }, h = p(
   ({
-    children: a,
+    children: s,
     className: o = "",
     isPending: i,
     pendingLabel: m = "Loading...",
     size: t = "lg",
     variant: n = "primary",
     ..._
-  }, u) => {
-    const d = s(() => {
+  }, d) => {
+    const u = a(() => {
       if (n === "linkPrimary" || n === "linkSecondary")
         return "";
       switch (t) {
@@ -37,7 +37,7 @@ import '../../assets/Button.css';const g = "Button-module__btn___Fx11X", z = "Bu
         default:
           return r["size-lg"];
       }
-    }, [t, n]), l = s(() => {
+    }, [t, n]), l = a(() => {
       switch (n) {
         case "primary":
           return r.primary;
@@ -58,13 +58,13 @@ import '../../assets/Button.css';const g = "Button-module__btn___Fx11X", z = "Bu
     return /* @__PURE__ */ e(
       "button",
       {
-        className: `${r.btn} ${d} ${l} ${o}`,
-        ref: u,
+        className: `${r.btn} ${u} ${l} ${o}`,
+        ref: d,
         ..._,
         children: i ? /* @__PURE__ */ c(y, { children: [
           /* @__PURE__ */ e(B, { "aria-hidden": "true" }),
           /* @__PURE__ */ e(k, { children: m })
-        ] }) : a
+        ] }) : s
       }
     );
   }

package/dist/components/ui/Error/index.js

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

package/dist/components/ui/LoadingSkeleton/index.js

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

package/dist/components/{LoadingSpinner → ui/LoadingSpinner}/index.js

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
-import '../../assets/LoadingSpinner.css';const i = "LoadingSpinner-module__spinner___X3Bl3", e = {
-  spinner: i,
-  "spinner-circle": "LoadingSpinner-module__spinner-circle___NCrsp"
-}, l = ({ className: r }) => /* @__PURE__ */ n(
+import '../../../assets/LoadingSpinner.css';const r = "LoadingSpinner-module__spinner___-zo6Y", e = {
+  spinner: r,
+  "spinner-circle": "LoadingSpinner-module__spinner-circle___9Jfm7"
+}, o = ({ className: i }) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12,7 +12,7 @@ import '../../assets/LoadingSpinner.css';const i = "LoadingSpinner-module__spinn
     width: "24",
     height: "24",
     stroke: "currentColor",
-    className: r,
+    className: i,
     children: /* @__PURE__ */ n("g", { className: e.spinner, children: /* @__PURE__ */ n(
       "circle",
       {
@@ -27,5 +27,5 @@ import '../../assets/LoadingSpinner.css';const i = "LoadingSpinner-module__spinn
   }
 );
 export {
-  l as LoadingSpinner
+  o as LoadingSpinner
 };

package/dist/components/ui/Modal/index.d.ts

@@ -0,0 +1,11 @@
+import { DialogContentProps } from '@radix-ui/react-dialog';
+import { HTMLAttributes } from 'react';
+interface ModalContentProps extends DialogContentProps, HTMLAttributes<HTMLDivElement> {
+}
+export declare const ModalContent: import('react').ForwardRefExoticComponent<ModalContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Modal: import('react').FC<import('@radix-ui/react-dialog').DialogProps>;
+export declare const ModalClose: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const ModalDescription: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
+export declare const ModalTitle: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const ModalTrigger: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/ui/Modal/index.js

@@ -0,0 +1,27 @@
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import { DialogPortal as i, DialogOverlay as c, DialogContent as d, Dialog as n, DialogClose as m, DialogDescription as _, DialogTitle as g, DialogTrigger as p } from "@radix-ui/react-dialog";
+import { forwardRef as M } from "react";
+import { useTheme as D } from "../../ThemeProvider/index.js";
+import '../../../assets/Modal.css';const f = "Modal-module__modal___MUsZA", y = "Modal-module__overlay___-RqGQ", v = "Modal-module__spacer___dIfOA", l = {
+  modal: f,
+  overlay: y,
+  spacer: v
+}, u = M(
+  ({ children: a, ...e }, s) => {
+    const { cssVariables: r } = D();
+    return /* @__PURE__ */ o(i, { children: /* @__PURE__ */ t(c, { className: l.overlay, style: r, children: [
+      /* @__PURE__ */ o("div", { className: l.spacer }),
+      /* @__PURE__ */ o(d, { ...e, ref: s, className: l.modal, children: a })
+    ] }) });
+  }
+);
+u.displayName = "ModalContent";
+const x = n, j = m, A = _, O = g, R = p;
+export {
+  x as Modal,
+  j as ModalClose,
+  u as ModalContent,
+  A as ModalDescription,
+  O as ModalTitle,
+  R as ModalTrigger
+};

package/dist/components/{ServerError → ui/ServerError}/index.js

@@ -2,7 +2,7 @@ import { jsx as s } from "react/jsx-runtime";
 import "@coinbase/cdp-hooks";
 import { forwardRef as t } from "react";
 import { Error as p } from "../Error/index.js";
-import { isApiError as f } from "../../utils/isApiError.js";
+import { isApiError as f } from "../../../utils/isApiError.js";
 const a = t(
   ({ error: r, id: o, className: e = "" }, m) => {
     const i = f(r) ? r.errorMessage : r;

package/dist/components/ui/SuccessMessage/index.js

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

package/dist/components/{SwitchFadeTransition → ui/SwitchFadeTransition}/index.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
 import { SwitchTransition as e } from "../SwitchTransition/index.js";
-import '../../assets/SwitchFadeTransition.css';const o = {
-  "switch-fade-transition": "SwitchFadeTransition-module__switch-fade-transition___0ACbj"
+import '../../../assets/SwitchFadeTransition.css';const o = {
+  "switch-fade-transition": "SwitchFadeTransition-module__switch-fade-transition___--lbT"
 }, c = ({
   children: t,
   className: i = "",

package/dist/components/{SwitchSlideTransition → ui/SwitchSlideTransition}/index.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import "react";
 import { SwitchTransition as o } from "../SwitchTransition/index.js";
-import '../../assets/SwitchSlideTransition.css';const a = {
-  "switch-slide-transition": "SwitchSlideTransition-module__switch-slide-transition___iPQKq"
+import '../../../assets/SwitchSlideTransition.css';const a = {
+  "switch-slide-transition": "SwitchSlideTransition-module__switch-slide-transition___FykQG"
 }, u = ({
   children: t,
   className: i = "",

package/dist/components/{SwitchTransition → ui/SwitchTransition}/index.d.ts

@@ -18,7 +18,7 @@ export interface SwitchTransitionProps<T extends Key> extends Omit<HTMLAttribute
         "data-parent": string;
     }) => ReactNode;
     className?: string;
-    items: T[];
+    items: readonly T[] | T[];
     transitionName: "fade" | "slide-left" | "slide-right" | string;
     transitionRef?: Ref<SwitchTransitionRef<T>>;
 }

package/dist/components/{SwitchTransition → ui/SwitchTransition}/index.js

@@ -1,9 +1,9 @@
-import { jsx as m, Fragment as W } from "react/jsx-runtime";
-import { useId as A, useState as R, useRef as B, useImperativeHandle as D, useLayoutEffect as _, useEffect as F } from "react";
-import { useTransitionMap as G } from "react-transition-state";
-import '../../assets/SwitchTransition.css';const H = {
-  "transition-wrapper": "SwitchTransition-module__transition-wrapper___UekKW"
-}, J = (h) => {
+import { jsx as m, Fragment as B } from "react/jsx-runtime";
+import { useId as D, useState as R, useRef as F, useImperativeHandle as G, useLayoutEffect as _, useEffect as H } from "react";
+import { useTransitionMap as J } from "react-transition-state";
+import '../../../assets/SwitchTransition.css';const P = {
+  "transition-wrapper": "SwitchTransition-module__transition-wrapper___jrI35"
+}, Q = (h) => {
   const {
     children: r,
     index: d,
@@ -15,18 +15,18 @@ import '../../assets/SwitchTransition.css';const H = {
     transitionName: v,
     parentKey: y
   } = h;
-  F(() => (u(i, { initialEntered: l }), () => {
+  H(() => (u(i, { initialEntered: l }), () => {
     f(i);
   }), [i, l, u, f]);
-  const { isEnter: p, isMounted: w, isResolved: I, status: x } = b.get(i) || {};
-  return w ? r({
+  const { isEnter: p, isMounted: I, isResolved: w, status: x } = b.get(i) || {};
+  return I ? r({
     "data-index": d,
     inert: !p,
     itemKey: i,
     "data-transition": v,
     "data-status": x,
     "data-is-enter": p,
-    "data-is-resolved": I,
+    "data-is-resolved": w,
     "data-parent": y
   }) : null;
 }, X = ({
@@ -41,33 +41,33 @@ import '../../assets/SwitchTransition.css';const H = {
   exit: v,
   items: y,
   mountOnEnter: p,
-  onStateChange: w,
-  preEnter: I,
+  onStateChange: I,
+  preEnter: w,
   preExit: x,
   style: j,
   timeout: e = 200,
   transitionName: T,
   transitionRef: q,
-  unmountOnExit: k,
+  unmountOnExit: z,
   ...$
 }) => {
-  const z = A(), s = $.id || z, [E, L] = R(null), [S, K] = R(null), g = B(null), o = G({
+  const L = D(), s = $.id || L, [E, N] = R(null), [S, C] = R(null), g = F(null), o = J({
     allowMultiple: h,
     initialEntered: !1,
     mountOnEnter: p,
-    unmountOnExit: k,
-    preEnter: I,
+    unmountOnExit: z,
+    preEnter: w,
     preExit: x,
     enter: b,
     exit: v,
     timeout: e,
-    onStateChange: w
+    onStateChange: I
   });
-  D(q, () => ({
+  G(q, () => ({
     transition: r || d ? {
       ...o,
       toggle: (t) => {
-        o.toggle(t), L(t);
+        o.toggle(t), N(t);
       }
     } : o
   })), _(() => {
@@ -84,10 +84,10 @@ import '../../assets/SwitchTransition.css';const H = {
       if (!a)
         return;
       const M = a?.scrollHeight ?? null;
-      M !== null && K(M), t = new ResizeObserver((N) => {
-        for (const O of N) {
-          const U = O.contentRect.height;
-          K(U);
+      M !== null && C(M), t = new ResizeObserver((O) => {
+        for (const k of O) {
+          const A = k.contentRect.height;
+          C(A);
         }
       }), t.observe(a);
     }, 0);
@@ -115,8 +115,8 @@ import '../../assets/SwitchTransition.css';const H = {
       n && clearTimeout(n);
     };
   }, [d, E, s, e]);
-  const C = /* @__PURE__ */ m(W, { children: y.map((t, n) => /* @__PURE__ */ m(
-    J,
+  const K = /* @__PURE__ */ m(B, { children: y.map((t, n) => /* @__PURE__ */ m(
+    Q,
     {
       index: n,
       itemKey: t,
@@ -138,7 +138,7 @@ import '../../assets/SwitchTransition.css';const H = {
       ref: g,
       "data-transition": T || void 0,
       "data-animate-height": r,
-      className: `${H["transition-wrapper"]} ${f}`,
+      className: `${P["transition-wrapper"]} ${f}`,
       style: {
         ...j,
         "--cdp-web-transition-enter-timeout": typeof e == "object" ? `${e.enter ?? 200}ms` : void 0,
@@ -146,7 +146,7 @@ import '../../assets/SwitchTransition.css';const H = {
         "--cdp-web-transition-timeout": typeof e == "number" ? `${e}ms` : void 0,
         "--cdp-web-transition-height": r && S ? `${S}px` : void 0
       },
-      children: r ? /* @__PURE__ */ m("div", { children: C }) : C
+      children: r ? /* @__PURE__ */ m("div", { children: K }) : K
     }
   );
 };

package/dist/components/{VisuallyHidden → ui/VisuallyHidden}/index.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import "react";
-import '../../assets/VisuallyHidden.css';const d = {
-  "visually-hidden": "VisuallyHidden-module__visually-hidden___qdUPg"
+import '../../../assets/VisuallyHidden.css';const d = {
+  "visually-hidden": "VisuallyHidden-module__visually-hidden___tD5Vj"
 }, a = ({ as: s = "span", children: l }) => l ? /* @__PURE__ */ i(s, { className: d["visually-hidden"], children: l }) : null;
 export {
   a as VisuallyHidden

package/dist/theme/theme.d.ts

@@ -226,7 +226,7 @@ export declare const theme: Flattened<{
     font: {
         readonly family: {
             readonly sans: {
-                readonly value: "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+                readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
             };
         };
         readonly size: {

package/dist/theme/tokens.d.ts

@@ -461,7 +461,7 @@ export declare const colors: {
 export declare const font: {
     readonly family: {
         readonly sans: {
-            readonly value: "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
         };
     };
     readonly size: {
@@ -696,7 +696,7 @@ export declare const tokens: {
     font: {
         readonly family: {
             readonly sans: {
-                readonly value: "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+                readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
             };
         };
         readonly size: {

package/dist/theme/tokens.js

@@ -147,7 +147,7 @@ const e = {
 }, r = {
   family: {
     sans: {
-      value: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+      value: '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
     }
   },
   size: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "type": "module",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
@@ -11,8 +11,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.19",
-    "@coinbase/cdp-hooks": "^0.0.19"
+    "@coinbase/cdp-core": "^0.0.21",
+    "@coinbase/cdp-hooks": "^0.0.21"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -41,8 +41,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.19",
-    "@coinbase/cdp-hooks": "^0.0.19"
+    "@coinbase/cdp-core": "^0.0.21",
+    "@coinbase/cdp-hooks": "^0.0.21"
   },
   "size-limit": [
     {
@@ -80,6 +80,18 @@
         "default": "./dist/components/*/index.js"
       }
     },
+    "./components/forms/*": {
+      "import": {
+        "types": "./dist/components/forms/*/index.d.ts",
+        "default": "./dist/components/forms/*/index.js"
+      }
+    },
+    "./components/ui/*": {
+      "import": {
+        "types": "./dist/components/ui/*/index.d.ts",
+        "default": "./dist/components/ui/*/index.js"
+      }
+    },
     "./icons": {
       "import": {
         "types": "./dist/icons/index.d.ts",

package/dist/assets/FlowEmailOTP.css

@@ -1 +0,0 @@
-.FlowEmailOTP-module__step-wrapper___Cdk60{display:flex;flex-direction:column}

package/dist/assets/FlowPhoneNumberOTP.css

@@ -1 +0,0 @@
-.FlowPhoneNumberOTP-module__step-wrapper___TtbeW{display:flex;flex-direction:column}

package/dist/components/Error/index.js

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

package/dist/components/Field/index.js

@@ -1,24 +0,0 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { FormField as F, FormLabel as f, FormValidityState as u, FormControl as C, FormMessage as d } from "@radix-ui/react-form";
-import "react";
-import { Error as o } from "../Error/index.js";
-import { Label as _ } from "../Label/index.js";
-import '../../assets/Field.css';const w = {
-  "field-wrapper": "Field-module__field-wrapper___0p4i7"
-}, $ = ({
-  children: i,
-  className: t = "",
-  inlineError: l,
-  label: m,
-  name: a,
-  style: s,
-  validators: p
-}) => /* @__PURE__ */ n(F, { name: a, className: `${t} ${w["field-wrapper"]}`, style: s, children: [
-  /* @__PURE__ */ r(f, { asChild: !0, children: /* @__PURE__ */ r(_, { children: m }) }),
-  /* @__PURE__ */ r(u, { children: (e) => i && /* @__PURE__ */ r(C, { asChild: !0, children: i(e) }) }),
-  p?.map(([e, h], c) => /* @__PURE__ */ r(d, { match: e, asChild: !0, children: /* @__PURE__ */ r(o, { children: h }) }, c)),
-  l && /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r(o, { children: l }) })
-] });
-export {
-  $ as Field
-};

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

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

package/dist/components/FlowEmailOTP/index.js

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

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

@@ -1,18 +0,0 @@
-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;