@coinbase/cdp-react 0.0.23 → 0.0.25

package/dist/theme/tokens.d.ts

@@ -11,6 +11,7 @@ export declare const colorsBase: {
     readonly gray900: "#1a1d21";
     readonly red500: "#cf202f";
     readonly green500: "#098551";
+    readonly amber500: "#ed702f";
 };
 export declare const colorsSemantic: {
     readonly bg: {
@@ -63,6 +64,9 @@ export declare const colorsSemantic: {
         readonly negative: {
             readonly value: "#cf202f";
         };
+        readonly warning: {
+            readonly value: "#ed702f";
+        };
     };
     readonly line: {
         readonly default: {
@@ -235,6 +239,116 @@ export declare const colorsComponents: {
             };
         };
     };
+    readonly select: {
+        readonly label: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+        readonly trigger: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+                readonly error: {
+                    readonly value: "{colors.line.negative}";
+                };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
+            };
+            readonly placeholder: {
+                readonly default: {
+                    readonly value: "{colors.fg.muted}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+            readonly errorText: {
+                readonly default: {
+                    readonly value: "{colors.fg.negative}";
+                };
+            };
+            readonly successText: {
+                readonly default: {
+                    readonly value: "{colors.fg.positive}";
+                };
+            };
+        };
+        readonly list: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+                readonly error: {
+                    readonly value: "{colors.line.negative}";
+                };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
+            };
+            readonly item: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                    readonly highlight: {
+                        readonly value: "{colors.bg.secondary}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                    readonly muted: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                    readonly onHighlight: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                    readonly mutedOnHighlight: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                };
+            };
+        };
+    };
+    readonly code: {
+        readonly bg: {
+            readonly default: {
+                readonly value: "{colors.bg.alternate}";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly value: "{colors.line.heavy}";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+    };
 };
 export declare const colors: {
     readonly page: {
@@ -389,6 +503,116 @@ export declare const colors: {
             };
         };
     };
+    readonly select: {
+        readonly label: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+        readonly trigger: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+                readonly error: {
+                    readonly value: "{colors.line.negative}";
+                };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
+            };
+            readonly placeholder: {
+                readonly default: {
+                    readonly value: "{colors.fg.muted}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+            readonly errorText: {
+                readonly default: {
+                    readonly value: "{colors.fg.negative}";
+                };
+            };
+            readonly successText: {
+                readonly default: {
+                    readonly value: "{colors.fg.positive}";
+                };
+            };
+        };
+        readonly list: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.default}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+                readonly focus: {
+                    readonly value: "{colors.line.primary}";
+                };
+                readonly error: {
+                    readonly value: "{colors.line.negative}";
+                };
+                readonly success: {
+                    readonly value: "{colors.line.positive}";
+                };
+            };
+            readonly item: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                    readonly highlight: {
+                        readonly value: "{colors.bg.secondary}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                    readonly muted: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                    readonly onHighlight: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                    readonly mutedOnHighlight: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                };
+            };
+        };
+    };
+    readonly code: {
+        readonly bg: {
+            readonly default: {
+                readonly value: "{colors.bg.alternate}";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly value: "{colors.line.heavy}";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly value: "{colors.fg.default}";
+            };
+        };
+    };
     readonly bg: {
         readonly default: {
             readonly value: "#ffffff";
@@ -439,6 +663,9 @@ export declare const colors: {
         readonly negative: {
             readonly value: "#cf202f";
         };
+        readonly warning: {
+            readonly value: "#ed702f";
+        };
     };
     readonly line: {
         readonly default: {
@@ -460,6 +687,9 @@ export declare const colors: {
 };
 export declare const font: {
     readonly family: {
+        readonly mono: {
+            readonly value: "\"DM Mono\", monospace";
+        };
         readonly sans: {
             readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
         };
@@ -624,6 +854,116 @@ export declare const tokens: {
                 };
             };
         };
+        readonly select: {
+            readonly label: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+            readonly trigger: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                };
+                readonly border: {
+                    readonly default: {
+                        readonly value: "{colors.line.heavy}";
+                    };
+                    readonly focus: {
+                        readonly value: "{colors.line.primary}";
+                    };
+                    readonly error: {
+                        readonly value: "{colors.line.negative}";
+                    };
+                    readonly success: {
+                        readonly value: "{colors.line.positive}";
+                    };
+                };
+                readonly placeholder: {
+                    readonly default: {
+                        readonly value: "{colors.fg.muted}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.default}";
+                    };
+                };
+                readonly errorText: {
+                    readonly default: {
+                        readonly value: "{colors.fg.negative}";
+                    };
+                };
+                readonly successText: {
+                    readonly default: {
+                        readonly value: "{colors.fg.positive}";
+                    };
+                };
+            };
+            readonly list: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.default}";
+                    };
+                };
+                readonly border: {
+                    readonly default: {
+                        readonly value: "{colors.line.heavy}";
+                    };
+                    readonly focus: {
+                        readonly value: "{colors.line.primary}";
+                    };
+                    readonly error: {
+                        readonly value: "{colors.line.negative}";
+                    };
+                    readonly success: {
+                        readonly value: "{colors.line.positive}";
+                    };
+                };
+                readonly item: {
+                    readonly bg: {
+                        readonly default: {
+                            readonly value: "{colors.bg.default}";
+                        };
+                        readonly highlight: {
+                            readonly value: "{colors.bg.secondary}";
+                        };
+                    };
+                    readonly text: {
+                        readonly default: {
+                            readonly value: "{colors.fg.default}";
+                        };
+                        readonly muted: {
+                            readonly value: "{colors.fg.muted}";
+                        };
+                        readonly onHighlight: {
+                            readonly value: "{colors.fg.default}";
+                        };
+                        readonly mutedOnHighlight: {
+                            readonly value: "{colors.fg.muted}";
+                        };
+                    };
+                };
+            };
+        };
+        readonly code: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.alternate}";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly value: "{colors.line.heavy}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.default}";
+                };
+            };
+        };
         readonly bg: {
             readonly default: {
                 readonly value: "#ffffff";
@@ -674,6 +1014,9 @@ export declare const tokens: {
             readonly negative: {
                 readonly value: "#cf202f";
             };
+            readonly warning: {
+                readonly value: "#ed702f";
+            };
         };
         readonly line: {
             readonly default: {
@@ -695,6 +1038,9 @@ export declare const tokens: {
     };
     font: {
         readonly family: {
+            readonly mono: {
+                readonly value: "\"DM Mono\", monospace";
+            };
             readonly sans: {
                 readonly value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
             };

package/dist/theme/tokens.js

@@ -13,8 +13,9 @@ const e = {
   gray900: "#1a1d21",
   // contextual
   red500: "#cf202f",
-  green500: "#098551"
-}, a = {
+  green500: "#098551",
+  amber500: "#ed702f"
+}, l = {
   bg: {
     default: { value: e.white },
     // background
@@ -42,8 +43,10 @@ const e = {
     // text on secondary color
     positive: { value: e.green500 },
     // positive color text
-    negative: { value: e.red500 }
+    negative: { value: e.red500 },
     // negative color text
+    warning: { value: e.amber500 }
+    // warning color text
   },
   line: {
     default: { value: e.gray200 },
@@ -57,7 +60,7 @@ const e = {
     negative: { value: "{colors.fg.negative}" }
     // negative line color
   }
-}, l = {
+}, a = {
   page: {
     bg: {
       default: { value: "{colors.bg.default}" }
@@ -140,12 +143,77 @@ const e = {
     successText: {
       default: { value: "{colors.fg.positive}" }
     }
+  },
+  select: {
+    label: {
+      default: { value: "{colors.fg.default}" }
+    },
+    trigger: {
+      bg: {
+        default: { value: "{colors.bg.default}" }
+      },
+      border: {
+        default: { value: "{colors.line.heavy}" },
+        focus: { value: "{colors.line.primary}" },
+        error: { value: "{colors.line.negative}" },
+        success: { value: "{colors.line.positive}" }
+      },
+      placeholder: {
+        default: { value: "{colors.fg.muted}" }
+      },
+      text: {
+        default: { value: "{colors.fg.default}" }
+      },
+      errorText: {
+        default: { value: "{colors.fg.negative}" }
+      },
+      successText: {
+        default: { value: "{colors.fg.positive}" }
+      }
+    },
+    list: {
+      bg: {
+        default: { value: "{colors.bg.default}" }
+      },
+      border: {
+        default: { value: "{colors.line.heavy}" },
+        focus: { value: "{colors.line.primary}" },
+        error: { value: "{colors.line.negative}" },
+        success: { value: "{colors.line.positive}" }
+      },
+      item: {
+        bg: {
+          default: { value: "{colors.bg.default}" },
+          highlight: { value: "{colors.bg.secondary}" }
+        },
+        text: {
+          default: { value: "{colors.fg.default}" },
+          muted: { value: "{colors.fg.muted}" },
+          onHighlight: { value: "{colors.fg.default}" },
+          mutedOnHighlight: { value: "{colors.fg.muted}" }
+        }
+      }
+    }
+  },
+  code: {
+    bg: {
+      default: { value: "{colors.bg.alternate}" }
+    },
+    border: {
+      default: { value: "{colors.line.heavy}" }
+    },
+    text: {
+      default: { value: "{colors.fg.default}" }
+    }
   }
 }, o = {
-  ...a,
-  ...l
+  ...l,
+  ...a
 }, r = {
   family: {
+    mono: {
+      value: '"DM Mono", monospace'
+    },
     sans: {
       value: '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
     }
@@ -160,8 +228,8 @@ const e = {
 export {
   o as colors,
   e as colorsBase,
-  l as colorsComponents,
-  a as colorsSemantic,
+  a as colorsComponents,
+  l as colorsSemantic,
   r as font,
   u as tokens
 };

package/dist/utils/formatFiat.d.ts

@@ -0,0 +1 @@
+export declare const formatFiat: (value: number, currency?: string, decimalPlaces?: number, locale?: string) => string;

package/dist/utils/formatFiat.js

@@ -0,0 +1,13 @@
+import { DEFAULT_LOCALE as n } from "../data/locale.js";
+const F = (t, i = "USD", r = 2, m = n) => {
+  const o = Math.floor(t) === t;
+  return new Intl.NumberFormat(m, {
+    style: "currency",
+    currency: i,
+    minimumFractionDigits: o ? 0 : r,
+    maximumFractionDigits: o ? 0 : r
+  }).format(t);
+};
+export {
+  F as formatFiat
+};

package/dist/utils/openPopup.d.ts

@@ -0,0 +1,7 @@
+export type OpenPopupParams = {
+    url: string;
+    height: number;
+    width: number;
+    target?: string;
+};
+export declare const openPopup: ({ url, target, height, width }: OpenPopupParams) => Window | null;

package/dist/utils/openPopup.js

@@ -0,0 +1,15 @@
+const l = ({ url: d, target: r, height: e, width: n }) => {
+  const o = window.screenLeft !== void 0 ? window.screenLeft : window.screenX, t = window.screenTop !== void 0 ? window.screenTop : window.screenY, s = o >= 0 && o < window.screen.width && t >= 0 && t < window.screen.height;
+  let i, w;
+  if (s)
+    i = Math.round((window.screen.width - n) / 2), w = Math.round((window.screen.height - e) / 2);
+  else {
+    const h = window.outerWidth || window.innerWidth || document.documentElement.clientWidth || window.screen.width, u = window.outerHeight || window.innerHeight || document.documentElement.clientHeight || window.screen.height;
+    i = Math.round(o + (h - n) / 2), w = Math.round(t + (u - e) / 2);
+  }
+  const c = `width=${n},height=${e},resizable,scrollbars=yes,status=1,left=${i},top=${w}`;
+  return window.open(d, r, c);
+};
+export {
+  l as openPopup
+};

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
     "@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-select": "^2.2.6",
     "big.js": "7.0.1",
     "libphonenumber-js": "^1.12.10",
     "react-transition-state": "2.3.0"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.23",
-    "@coinbase/cdp-hooks": "^0.0.23"
+    "@coinbase/cdp-core": "^0.0.25",
+    "@coinbase/cdp-hooks": "^0.0.25"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -44,8 +45,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.23",
-    "@coinbase/cdp-hooks": "^0.0.23"
+    "@coinbase/cdp-core": "^0.0.25",
+    "@coinbase/cdp-hooks": "^0.0.25"
   },
   "size-limit": [
     {
@@ -53,7 +54,7 @@
       "path": "./dist/index.js",
       "import": "*",
       "running": false,
-      "limit": "70 KB"
+      "limit": "100 KB"
     },
     {
       "name": "single-component",

package/dist/assets/SignInFooter.css

@@ -1 +0,0 @@
-.SignInFooter-module__footer___DLNrl{color:var(--cdp-web-colors-page-text-muted);display:flex;align-items:center;justify-content:center;gap:.5em;line-height:1;padding:1em 2em 0}.SignInFooter-module__footer___DLNrl:first-child{border-top:0}.SignInFooter-module__footer___DLNrl p{display:flex;align-items:center;font-size:.75em;gap:.25em;margin:0}.SignInFooter-module__icon___hFhfx{height:auto;width:.75em}.SignInFooter-module__coinbase-icon___NeFOp{height:1em;width:auto}