@coinbase/cdp-react 0.0.18 → 0.0.20

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-form": "^0.1.7",
-    "@radix-ui/react-one-time-password-field": "^0.1.7"
+    "@radix-ui/react-one-time-password-field": "^0.1.7",
+    "react-transition-state": "2.3.0",
+    "libphonenumber-js": "^1.12.10"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.18",
-    "@coinbase/cdp-hooks": "^0.0.18"
+    "@coinbase/cdp-core": "^0.0.20",
+    "@coinbase/cdp-hooks": "^0.0.20"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -31,6 +33,7 @@
     "glob": "^11.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "rollup-plugin-visualizer": "^6.0.3",
     "size-limit": "^11.2.0",
     "stylelint": "^16.22.0",
     "stylelint-config-standard": "^38.0.0",
@@ -38,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.18",
-    "@coinbase/cdp-hooks": "^0.0.18"
+    "@coinbase/cdp-core": "^0.0.20",
+    "@coinbase/cdp-hooks": "^0.0.20"
   },
   "size-limit": [
     {
@@ -47,7 +50,7 @@
       "path": "./dist/index.js",
       "import": "*",
       "running": false,
-      "limit": "65 KB"
+      "limit": "70 KB"
     },
     {
       "name": "single-component",
@@ -77,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",
@@ -105,6 +120,7 @@
   "scripts": {
     "build": "pnpm run check:types && vite build",
     "build:watch": "vite build --watch",
+    "analyze": "vite build --config vite-analyze.config.ts",
     "check:types": "tsc --noEmit",
     "clean": "rm -rf dist",
     "clean:all": "pnpm clean && rm -rf node_modules",

package/dist/components/Button/index.js

@@ -1,50 +0,0 @@
-import { jsx as n, jsxs as d, Fragment as y } from "react/jsx-runtime";
-import { forwardRef as c, useMemo as p } from "react";
-import "../../theme/theme.js";
-import { LoadingSpinner as u } from "../LoadingSpinner/index.js";
-import { VisuallyHidden as l } from "../VisuallyHidden/index.js";
-import '../../assets/Button.css';const k = "Button-module__btn___Fx11X", B = "Button-module__primary___s1sM6", f = "Button-module__secondary___R0waJ", r = {
-  btn: k,
-  "link-primary": "Button-module__link-primary___wROmv",
-  "link-secondary": "Button-module__link-secondary___5VErP",
-  primary: B,
-  secondary: f,
-  "transparent-primary": "Button-module__transparent-primary___Ah0yM",
-  "transparent-secondary": "Button-module__transparent-secondary___kk5sZ"
-}, h = c(
-  ({
-    children: t,
-    className: e = "",
-    isPending: o,
-    pendingLabel: s = "Loading...",
-    variant: a = "primary",
-    ...i
-  }, m) => {
-    const _ = p(() => {
-      switch (a) {
-        case "primary":
-          return r.primary;
-        case "secondary":
-          return r.secondary;
-        case "linkPrimary":
-          return r["link-primary"];
-        case "linkSecondary":
-          return r["link-secondary"];
-        case "transparentPrimary":
-          return r["transparent-primary"];
-        case "transparentSecondary":
-          return r["transparent-secondary"];
-        default:
-          return r.primary;
-      }
-    }, [a]);
-    return /* @__PURE__ */ n("button", { className: `${r.btn} ${_} ${e}`, ref: m, ...i, children: o ? /* @__PURE__ */ d(y, { children: [
-      /* @__PURE__ */ n(u, { "aria-hidden": "true" }),
-      /* @__PURE__ */ n(l, { children: s })
-    ] }) : t });
-  }
-);
-h.displayName = "Button";
-export {
-  h as Button
-};

package/dist/components/Error/index.js

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

package/dist/components/Field/index.js

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

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,50 +0,0 @@
-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,
-  "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);
-    };
-    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(
-        _,
-        {
-          ...c,
-          className: r["group-container"],
-          "aria-invalid": !!i,
-          "aria-describedby": i ? u : void 0,
-          style: {
-            "--cdp-web-otp-input-width": `${Math.floor(100 / s)}%`
-          },
-          children: [
-            Array.from({ length: s }, (e, t) => /* @__PURE__ */ o("div", { className: r["input-container"], children: /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(
-              I,
-              {
-                name: `${c.name || "otp"}-${t}`,
-                ref: (m) => p(m, t),
-                className: r.input
-              }
-            ) }) }, t)),
-            /* @__PURE__ */ o(P, {})
-          ]
-        }
-      ),
-      i && /* @__PURE__ */ o(v, { id: u, children: i })
-    ] });
-  }
-);
-R.displayName = "OTP";
-export {
-  R as OTP
-};