@coinbase/cdp-react 0.0.37 → 0.0.39

package/dist/theme/tokens.js

@@ -15,7 +15,7 @@ const e = {
   red500: "#cf202f",
   green500: "#098551",
   amber500: "#ed702f"
-}, l = {
+}, o = {
   bg: {
     default: { value: e.white },
     // background
@@ -23,9 +23,9 @@ const e = {
     // alternate background
     contrast: { value: "{colors.fg.default}" },
     // contrast background, used to mix with other backgrounds to create relative colors (i.e. for hover / pressed states)
-    overlay: { value: "{colors.bg.alternate}", modify: { type: "alpha", value: 0.33 } },
+    overlay: { value: "{colors.bg.alternate}", modify: { type: "color-alpha", value: 0.33 } },
     // overlay background
-    skeleton: { value: "{colors.fg.default}", modify: { type: "alpha", value: 0.1 } },
+    skeleton: { value: "{colors.fg.default}", modify: { type: "color-alpha", value: 0.1 } },
     // skeleton background
     primary: { value: e.blue500 },
     // primary color background
@@ -62,7 +62,7 @@ const e = {
     negative: { value: "{colors.fg.negative}" }
     // negative line color
   }
-}, o = {
+}, a = {
   page: {
     bg: {
       default: { value: "{colors.bg.default}" }
@@ -81,11 +81,11 @@ const e = {
         default: { value: "{colors.bg.primary}" },
         hover: {
           value: "{colors.bg.primary}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "15%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "15%"]] }
         },
         pressed: {
           value: "{colors.bg.primary}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "30%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "30%"]] }
         }
       },
       border: {
@@ -101,11 +101,11 @@ const e = {
         default: { value: "{colors.bg.secondary}" },
         hover: {
           value: "{colors.bg.secondary}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "10%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "10%"]] }
         },
         pressed: {
           value: "{colors.bg.secondary}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "20%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "20%"]] }
         }
       },
       border: {
@@ -123,11 +123,11 @@ const e = {
         default: { value: "{colors.fg.primary}" },
         hover: {
           value: "{colors.fg.primary}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "15%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "15%"]] }
         },
         pressed: {
           value: "{colors.fg.primary}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "30%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "30%"]] }
         }
       }
     },
@@ -136,11 +136,11 @@ const e = {
         default: { value: "{colors.fg.default}" },
         hover: {
           value: "{colors.fg.default}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "10%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "10%"]] }
         },
         pressed: {
           value: "{colors.fg.default}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "20%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "20%"]] }
         }
       }
     }
@@ -180,11 +180,11 @@ const e = {
         default: { value: "{colors.bg.default}" },
         hover: {
           value: "{colors.bg.default}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "5%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "5%"]] }
         },
         pressed: {
           value: "{colors.bg.default}",
-          modify: { type: "mix", value: [["{colors.bg.contrast}", "7%"]] }
+          modify: { type: "color-mix", value: [["{colors.bg.contrast}", "7%"]] }
         }
       },
       border: {
@@ -221,7 +221,7 @@ const e = {
           default: { value: "{colors.bg.default}" },
           highlight: {
             value: "{colors.bg.default}",
-            modify: { type: "mix", value: [["{colors.bg.contrast}", "10%"]] }
+            modify: { type: "color-mix", value: [["{colors.bg.contrast}", "10%"]] }
           }
         },
         text: {
@@ -244,30 +244,122 @@ const e = {
       default: { value: "{colors.fg.default}" }
     }
   }
-}, a = {
-  ...l,
-  ...o
 }, r = {
+  ...o,
+  ...a
+}, l = {
   family: {
     mono: {
       value: '"DM Mono", monospace'
     },
     sans: {
       value: '"Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+    },
+    body: {
+      value: "{font.family.sans}"
+    },
+    interactive: {
+      value: "{font.family.sans}"
     }
   },
   size: {
     base: { value: 16 }
   }
 }, t = {
-  colors: a,
-  font: r
+  family: {
+    page: {
+      value: "{font.family.body}"
+    },
+    cta: {
+      value: "{font.family.interactive}"
+    },
+    link: {
+      value: "{font.family.interactive}"
+    },
+    input: {
+      value: "{font.family.interactive}"
+    },
+    select: {
+      value: "{font.family.interactive}"
+    },
+    code: {
+      value: "{font.family.mono}"
+    }
+  }
+}, u = {
+  family: {
+    ...l.family,
+    ...t.family
+  },
+  size: {
+    ...l.size
+  }
+}, s = {
+  none: {
+    value: 0
+  },
+  xs: {
+    value: "{font.size.base}",
+    modify: { type: "multiply", value: 0.25 }
+  },
+  sm: {
+    value: "{font.size.base}",
+    modify: { type: "multiply", value: 0.5 }
+  },
+  md: {
+    value: "{font.size.base}",
+    modify: { type: "multiply", value: 0.75 }
+  },
+  lg: {
+    value: "{font.size.base}",
+    modify: { type: "multiply", value: 1 }
+  },
+  xl: {
+    value: "{font.size.base}",
+    modify: { type: "multiply", value: 1.5 }
+  },
+  full: {
+    value: 99999
+  }
+}, c = {
+  cta: {
+    value: "{borderRadius.full}"
+  },
+  input: {
+    value: "{borderRadius.sm}"
+  },
+  link: {
+    value: "{borderRadius.full}"
+  },
+  modal: {
+    value: "{borderRadius.sm}"
+  },
+  select: {
+    trigger: {
+      value: "{borderRadius.sm}"
+    },
+    list: {
+      value: "{borderRadius.sm}"
+    }
+  }
+}, i = {
+  ...s,
+  ...c
+}, f = {
+  borderRadius: i,
+  colors: r,
+  font: u
 };
 export {
-  a as colors,
+  i as borderRadius,
+  c as borderRadiusComponents,
+  s as borderRadiusSemantic,
+  r as colors,
   e as colorsBase,
-  o as colorsComponents,
-  l as colorsSemantic,
-  r as font,
-  t as tokens
+  a as colorsComponents,
+  o as colorsSemantic,
+  u as font,
+  t as fontComponents,
+  l as fontSemantic,
+  f as tokens
 };

package/dist/theme/utils.d.ts

@@ -9,14 +9,17 @@ export type Flattened<T extends Record<string, unknown>> = {
 export type TokenValue = {
     value: string | number;
     modify?: {
-        type: "alpha";
+        type: "color-alpha";
         value: number | string;
     } | {
-        type: "hsl";
+        type: "color-hsl";
         value: [number, number, number];
     } | {
-        type: "mix";
+        type: "color-mix";
         value: ReadonlyArray<string | readonly [string, string]>;
+    } | {
+        type: "multiply";
+        value: number | string;
     };
 };
 export type NestedTokenObject = {

package/dist/theme/utils.js

@@ -1,42 +1,40 @@
-function a(t) {
+function u(t) {
   return typeof t == "object" && t !== null && "value" in t && (typeof t.value == "string" || typeof t.value == "number");
 }
 function p(t, e = "cdp-web") {
   const o = {};
   function n(r, c) {
-    for (const s in r)
-      if (Object.prototype.hasOwnProperty.call(r, s)) {
-        const f = [...c, s], i = r[s];
-        if (a(i)) {
-          const u = f.join("-");
-          o[u] = y(i, e);
+    for (const l in r)
+      if (Object.prototype.hasOwnProperty.call(r, l)) {
+        const f = [...c, l], i = r[l];
+        if (u(i)) {
+          const y = f.join("-");
+          o[y] = a(i, e);
         } else typeof i == "object" && i !== null && n(i, f);
       }
   }
   return n(t, []), o;
 }
-const l = (t, e) => t.startsWith("{") && t.endsWith("}") ? `var(--${e ? `${e}-` : ""}${t.slice(1, -1).replace(/\./g, "-")})` : t, y = (t, e) => {
-  if (typeof t.value == "number")
-    return `${t.value}px`;
-  const o = l(t.value, e);
-  if (t.modify?.type === "alpha")
+const s = (t, e) => t.startsWith("{") && t.endsWith("}") ? `var(--${e ? `${e}-` : ""}${t.slice(1, -1).replace(/\./g, "-")})` : t, a = (t, e) => {
+  const o = typeof t.value == "number" ? `${t.value}px` : s(t.value, e);
+  if (t.modify?.type === "color-alpha")
     return `color(from ${o} srgb r g b / ${t.modify.value ?? 1})`;
-  if (t.modify?.type === "hsl") {
+  if (t.modify?.type === "color-hsl") {
     const [n, r, c] = t.modify.value;
     return `hsl(from ${o} calc(h * ${n}) calc(s * ${r}) calc(l * ${c}))`;
   }
-  if (t.modify?.type === "mix") {
+  if (t.modify?.type === "color-mix") {
     let n = o;
     return t.modify.value.forEach((r) => {
       if (typeof r == "string")
-        n += `, ${l(r, e)}`;
+        n += `, ${s(r, e)}`;
       else {
-        const [c, s] = r;
-        n += `, ${l(c, e)} ${s}`;
+        const [c, l] = r;
+        n += `, ${s(c, e)} ${l}`;
       }
     }), `color-mix(in oklab, ${n})`;
   }
-  return o;
+  return t.modify?.type === "multiply" ? `calc(${o} * ${t.modify.value})` : o;
 }, m = (t) => Object.entries(t).reduce((e, [o, n]) => (e[`--cdp-web-${o}`] = n, e), {});
 export {
   p as flattenTokensObject,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -14,8 +14,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "@coinbase/cdp-core": "^0.0.37",
-    "@coinbase/cdp-hooks": "^0.0.37"
+    "@coinbase/cdp-core": "^0.0.39",
+    "@coinbase/cdp-hooks": "^0.0.39"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -45,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.37",
-    "@coinbase/cdp-hooks": "^0.0.37"
+    "@coinbase/cdp-core": "^0.0.39",
+    "@coinbase/cdp-hooks": "^0.0.39"
   },
   "size-limit": [
     {

package/dist/assets/SendTransactionButton.css

@@ -1 +0,0 @@
-.SendTransactionButton-module__send-transaction-button___-6UsN{padding-left:2em;padding-right:2em}

package/dist/components/SendTransactionButton/index.js

@@ -1,67 +0,0 @@
-import { jsx as b } from "react/jsx-runtime";
-import { useSendEvmTransaction as y, APIError as T } from "@coinbase/cdp-hooks";
-import { useState as _, useCallback as v } from "react";
-import { Button as w } from "../ui/Button/index.js";
-import "../../theme/theme.js";
-import { getMessageFromUnknownError as B } from "../../utils/getMessageFromUnknownError.js";
-import '../../assets/SendTransactionButton.css';const P = {
-  "send-transaction-button": "SendTransactionButton-module__send-transaction-button___-6UsN"
-}, N = ({
-  account: s,
-  children: f,
-  className: l = "",
-  network: r,
-  onClick: o,
-  onError: a,
-  onSuccess: i,
-  pendingLabel: u,
-  transaction: e,
-  variant: p = "primary",
-  ...g
-}) => {
-  const [h, c] = _(!1), { sendEvmTransaction: m } = y(), E = v(
-    async (d) => {
-      d.preventDefault(), o?.(d);
-      try {
-        if (!s || !r || !e) {
-          const n = [];
-          throw s || n.push("account"), r || n.push("network"), e || n.push("transaction"), new Error(`Missing required parameters: ${n.join(", ")}`);
-        }
-        c(!0);
-        const { transactionHash: t } = await m({
-          transaction: e,
-          evmAccount: s,
-          network: r
-        });
-        i?.(t);
-      } catch (t) {
-        let n;
-        if (t instanceof T || t instanceof Error)
-          n = t;
-        else {
-          const S = B(t);
-          n = new Error(S);
-        }
-        a?.(n);
-      } finally {
-        c(!1);
-      }
-    },
-    [s, r, o, a, i, m, e]
-  );
-  return /* @__PURE__ */ b(
-    w,
-    {
-      className: `${P["send-transaction-button"]} ${l}`,
-      isPending: h,
-      pendingLabel: u || "Sending transaction...",
-      onClick: E,
-      variant: p,
-      ...g,
-      children: f || "Send transaction"
-    }
-  );
-};
-export {
-  N as SendTransactionButton
-};