@coinbase/cdp-react 0.0.0 → 0.0.2

package/dist/icons/IconExclamationCircle.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as r } from "./SvgIcon.js";
+const c = (e) => /* @__PURE__ */ o(r, { viewBox: "0 0 24 24", width: "24", height: "24", ...e, children: /* @__PURE__ */ o(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",
+    clipRule: "evenodd"
+  }
+) });
+export {
+  c as IconExclamationCircle
+};

package/dist/icons/IconLock.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const IconLock: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react").JSX.Element;

package/dist/icons/IconLock.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as t } from "./SvgIcon.js";
+const n = (r) => /* @__PURE__ */ o(t, { width: "11", height: "11", viewBox: "0 0 11 11", ...r, children: /* @__PURE__ */ o(
+  "path",
+  {
+    d: "M2.98877 4.49512V3.49512C2.98877 1.83826 4.33192 0.495117 5.98877 0.495117C7.64562 0.495117 8.98877 1.83826 8.98877 3.49512V4.49512H10.9888V10.4951H0.98877V4.49512H2.98877ZM7.78877 3.49512C7.78877 2.501 6.98288 1.69512 5.98877 1.69512C4.99466 1.69512 4.18877 2.501 4.18877 3.49512V4.49512H7.78877V3.49512Z",
+    fill: "currentColor"
+  }
+) });
+export {
+  n as IconLock
+};

package/dist/icons/IconXMark.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const IconXMark: (props: Omit<SVGProps<SVGSVGElement>, "viewBox">) => import("react").JSX.Element;

package/dist/icons/IconXMark.js

@@ -0,0 +1,13 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { SvgIcon as L } from "./SvgIcon.js";
+const n = (o) => /* @__PURE__ */ r(L, { width: "15", height: "14", viewBox: "0 0 15 14", ...o, children: /* @__PURE__ */ r(
+  "path",
+  {
+    d: "M6.85395 6.99516L0.98877 1.12998L2.12364 -0.00488281L7.98881 5.86029L13.854 -0.00488281L14.9889 1.12998L9.12368 6.99516L14.9888 12.8602L13.8539 13.9951L7.98881 8.13003L2.12372 13.9951L0.988857 12.8602L6.85395 6.99516Z",
+    fill: "currentColor"
+  }
+) });
+export {
+  n as IconXMark
+};

package/dist/icons/SvgIcon.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode, SVGProps } from 'react';
+export declare const SvgIcon: ({ children, ...props }: SVGProps<SVGSVGElement> & {
+    children: ReactNode;
+}) => import("react").JSX.Element;

package/dist/icons/SvgIcon.js

@@ -0,0 +1,19 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+const n = ({
+  children: o,
+  ...r
+}) => /* @__PURE__ */ i(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    role: "img",
+    "aria-hidden": r["aria-label"] ? void 0 : !0,
+    ...r,
+    children: o
+  }
+);
+export {
+  n as SvgIcon
+};

package/dist/icons/index.d.ts

@@ -0,0 +1,4 @@
+export * from './IconCheckCircle';
+export * from './IconExclamationCircle';
+export * from './IconLock';
+export * from './IconXMark';

package/dist/icons/index.js

@@ -0,0 +1,10 @@
+import { IconCheckCircle as c } from "./IconCheckCircle.js";
+import { IconExclamationCircle as m } from "./IconExclamationCircle.js";
+import { IconLock as t } from "./IconLock.js";
+import { IconXMark as f } from "./IconXMark.js";
+export {
+  c as IconCheckCircle,
+  m as IconExclamationCircle,
+  t as IconLock,
+  f as IconXMark
+};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './components/CDPReactProvider';
+export * from './components/AuthButton';
+export * from './components/SignIn';
+export * from './components/SignOutButton';
+export * from './components/SignInModal';
+export * from './components/ThemeProvider';
+export * from './theme';
+export * from './icons';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,48 @@
+import { CDPReactProvider as e, useAppConfig as t } from "./components/CDPReactProvider/index.js";
+import { AuthButton as m } from "./components/AuthButton/index.js";
+import { SignIn as f } from "./components/SignIn/index.js";
+import { useSignInReducer as x } from "./components/SignIn/useSignInReducer.js";
+import { SignOutButton as I } from "./components/SignOutButton/index.js";
+import { SignInModal as a } from "./components/SignInModal/index.js";
+import { ThemeProvider as l, useTheme as u } from "./components/ThemeProvider/index.js";
+import { flattenedTheme as C } from "./theme/theme.js";
+import { colors as h, tokens as T } from "./theme/tokens.js";
+import { flattenTokensObject as v, themeToCssVariables as A } from "./theme/utils.js";
+import { IconCheckCircle as P } from "./icons/IconCheckCircle.js";
+import { IconExclamationCircle as B } from "./icons/IconExclamationCircle.js";
+import { IconLock as M } from "./icons/IconLock.js";
+import { IconXMark as R } from "./icons/IconXMark.js";
+import { isEmailInvalid as F } from "./utils/isEmailInvalid.js";
+import { isApiError as V } from "./utils/isApiError.js";
+import { SignInDescription as q } from "./components/SignIn/SignInDescription.js";
+import { SignInForm as y } from "./components/SignIn/SignInForm.js";
+import { SignInImage as G } from "./components/SignIn/SignInImage.js";
+import { SignInTitle as J } from "./components/SignIn/SignInTitle.js";
+import { useSignInContext as N } from "./components/SignIn/SignInProvider.js";
+export {
+  m as AuthButton,
+  e as CDPReactProvider,
+  P as IconCheckCircle,
+  B as IconExclamationCircle,
+  M as IconLock,
+  R as IconXMark,
+  f as SignIn,
+  q as SignInDescription,
+  y as SignInForm,
+  G as SignInImage,
+  a as SignInModal,
+  J as SignInTitle,
+  I as SignOutButton,
+  l as ThemeProvider,
+  h as colors,
+  v as flattenTokensObject,
+  C as flattenedTheme,
+  V as isApiError,
+  F as isEmailInvalid,
+  A as themeToCssVariables,
+  T as tokens,
+  t as useAppConfig,
+  N as useSignInContext,
+  x as useSignInReducer,
+  u as useTheme
+};

package/dist/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme';
+export * from './tokens';
+export * from './utils';

package/dist/theme/index.js

@@ -0,0 +1,10 @@
+import { flattenedTheme as t } from "./theme.js";
+import { colors as s, tokens as f } from "./tokens.js";
+import { flattenTokensObject as a, themeToCssVariables as l } from "./utils.js";
+export {
+  s as colors,
+  a as flattenTokensObject,
+  t as flattenedTheme,
+  l as themeToCssVariables,
+  f as tokens
+};

package/dist/theme/theme.d.ts

@@ -0,0 +1,37 @@
+export declare const flattenedTheme: import('./utils').Flattened<{
+    colors: {
+        error: string;
+        success: string;
+        background: string;
+        backgroundOverlay: string;
+        text: string;
+        textSecondary: string;
+        primary: string;
+        primaryText: string;
+        primaryHoverBackground: string;
+        primaryHoverText: string;
+        primaryFocusRing: string;
+        secondary: string;
+        secondaryText: string;
+        secondaryHoverBackground: string;
+        secondaryHoverText: string;
+        secondaryFocusRing: string;
+        linkText: string;
+        linkHover: string;
+        linkSecondaryText: string;
+        linkSecondaryHover: string;
+        border: string;
+        inputBackground: string;
+        inputBorder: string;
+        inputFocusBorder: string;
+        inputLabel: string;
+        inputPlaceholder: string;
+        inputText: string;
+    };
+    fontFamily: {
+        sans: string;
+    };
+    fontSizeBase: number;
+}>;
+export type Theme = typeof flattenedTheme;
+export type ButtonVariant = "primary" | "secondary" | "transparentPrimary" | "transparentSecondary";

package/dist/theme/theme.js

@@ -0,0 +1,6 @@
+import { tokens as t } from "./tokens.js";
+import { flattenTokensObject as e } from "./utils.js";
+const n = e(t);
+export {
+  n as flattenedTheme
+};

package/dist/theme/tokens.d.ts

@@ -0,0 +1,50 @@
+export declare const colors: {
+    blue500: string;
+    blue550: string;
+    black: string;
+    white: string;
+    gray50: string;
+    gray100: string;
+    gray200: string;
+    gray500: string;
+    gray700: string;
+    gray900: string;
+    red500: string;
+    green500: string;
+};
+export declare const tokens: {
+    colors: {
+        error: string;
+        success: string;
+        background: string;
+        backgroundOverlay: string;
+        text: string;
+        textSecondary: string;
+        primary: string;
+        primaryText: string;
+        primaryHoverBackground: string;
+        primaryHoverText: string;
+        primaryFocusRing: string;
+        secondary: string;
+        secondaryText: string;
+        secondaryHoverBackground: string;
+        secondaryHoverText: string;
+        secondaryFocusRing: string;
+        linkText: string;
+        linkHover: string;
+        linkSecondaryText: string;
+        linkSecondaryHover: string;
+        border: string;
+        inputBackground: string;
+        inputBorder: string;
+        inputFocusBorder: string;
+        inputLabel: string;
+        inputPlaceholder: string;
+        inputText: string;
+    };
+    fontFamily: {
+        sans: string;
+    };
+    fontSizeBase: number;
+};
+export type Tokens = typeof tokens;

package/dist/theme/tokens.js

@@ -0,0 +1,63 @@
+const e = {
+  // Brand colors
+  blue500: "#0052ff",
+  blue550: "#014cec",
+  black: "#0a0b0d",
+  white: "#ffffff",
+  // grayscale
+  gray50: "#f9fafb",
+  gray100: "#eef0f3",
+  gray200: "#dcdfe4",
+  gray500: "#9397a0",
+  gray700: "#5b616e",
+  gray900: "#1a1d21",
+  // contextual
+  red500: "#cf202f",
+  green500: "#008531"
+}, r = {
+  colors: {
+    // Contextual
+    error: e.red500,
+    success: e.green500,
+    // Background
+    background: e.white,
+    backgroundOverlay: "rgba(255,255,255,0.5)",
+    // Foreground
+    text: e.black,
+    textSecondary: e.gray700,
+    // Primary action
+    primary: e.blue500,
+    primaryText: e.white,
+    primaryHoverBackground: e.blue550,
+    primaryHoverText: e.white,
+    primaryFocusRing: e.blue500,
+    // Secondary action
+    secondary: e.gray100,
+    secondaryText: e.black,
+    secondaryHoverBackground: e.gray200,
+    secondaryHoverText: e.black,
+    secondaryFocusRing: e.black,
+    // Link
+    linkText: e.blue500,
+    linkHover: e.blue550,
+    linkSecondaryText: e.black,
+    linkSecondaryHover: e.gray700,
+    // Borders and dividers
+    border: e.gray200,
+    // Input
+    inputBackground: e.white,
+    inputBorder: e.gray500,
+    inputFocusBorder: e.blue500,
+    inputLabel: e.black,
+    inputPlaceholder: e.gray700,
+    inputText: e.black
+  },
+  fontFamily: {
+    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+  },
+  fontSizeBase: 16
+};
+export {
+  e as colors,
+  r as tokens
+};

package/dist/theme/utils.d.ts

@@ -0,0 +1,11 @@
+export type KebabCasePaths<T> = T extends Record<string, unknown> ? {
+    [K in keyof T]: T[K] extends Record<string, unknown> ? `${K & string}-${KebabCasePaths<T[K]> & string}` : K & string;
+}[keyof T] : never;
+export type Flattened<T extends Record<string, unknown>> = {
+    [K in KebabCasePaths<T>]: string;
+};
+export declare function flattenTokensObject<T extends Record<string, unknown>>(obj: T, path?: string[]): Flattened<T>;
+export declare const themeToCssVariables: (theme: Record<string, string>) => CDPWebCSSVariables;
+export type CDPWebCSSVariables = {
+    [key: `--cdp-web-${string}`]: string;
+};

package/dist/theme/utils.js

@@ -0,0 +1,18 @@
+function i(n, r = []) {
+  const t = {};
+  for (const [s, e] of Object.entries(n)) {
+    const o = [...r, s];
+    if (typeof e == "object" && e !== null && !Array.isArray(e))
+      Object.assign(t, i(e, o));
+    else {
+      const c = o.join("-");
+      Array.isArray(e) ? t[c] = e.join(" ") : t[c] = typeof e == "number" ? `${e}px` : String(e);
+    }
+  }
+  return t;
+}
+const a = (n) => Object.entries(n).reduce((r, [t, s]) => (r[`--cdp-web-${t}`] = s, r), {});
+export {
+  i as flattenTokensObject,
+  a as themeToCssVariables
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './isEmailInvalid';
+export * from './isApiError';

package/dist/utils/index.js

@@ -0,0 +1,6 @@
+import { isEmailInvalid as o } from "./isEmailInvalid.js";
+import { isApiError as p } from "./isApiError.js";
+export {
+  p as isApiError,
+  o as isEmailInvalid
+};

package/dist/utils/isApiError.d.ts

@@ -0,0 +1,6 @@
+export interface ApiError extends Error {
+    errorLink?: string;
+    errorMessage: string;
+    errorType: string;
+}
+export declare const isApiError: (error: unknown) => error is ApiError;

package/dist/utils/isApiError.js

@@ -0,0 +1,4 @@
+const e = (r) => r instanceof Error && "errorMessage" in r && "errorType" in r;
+export {
+  e as isApiError
+};

package/dist/utils/isEmailInvalid.d.ts

@@ -0,0 +1 @@
+export declare const isEmailInvalid: (value: string) => boolean;

package/dist/utils/isEmailInvalid.js

@@ -0,0 +1,4 @@
+const t = (s) => !/^[^\s@]+@([^\s@.]+\.)+[^\s@.]+$/.test(s);
+export {
+  t as isEmailInvalid
+};

package/package.json

@@ -1,8 +1,110 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.0",
-  "description": "Placeholder package",
-  "main": "index.js",
-  "author": "Coinbase Inc.",
-  "license": "Apache-2.0"
-}
+  "version": "0.0.2",
+  "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"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "@coinbase/cdp-core": "^0.0.2",
+    "@coinbase/cdp-hooks": "^0.0.2"
+  },
+  "devDependencies": {
+    "@size-limit/preset-big-lib": "^11.2.0",
+    "@size-limit/webpack": "^11.2.0",
+    "@size-limit/webpack-css": "^11.2.0",
+    "@size-limit/webpack-why": "^11.2.0",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "~16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/glob": "^9.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "glob": "^11.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "size-limit": "^11.2.0",
+    "vite": "^7.0.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "@coinbase/cdp-core": "^0.0.2",
+    "@coinbase/cdp-hooks": "^0.0.2"
+  },
+  "size-limit": [
+    {
+      "name": "full-package",
+      "path": "./dist/index.js",
+      "import": "*",
+      "limit": "65 KB"
+    },
+    {
+      "name": "single-component",
+      "path": "./dist/components/SignIn/index.js",
+      "import": "{ SignIn }",
+      "limit": "65 KB"
+    }
+  ],
+  "files": [
+    "dist/**",
+    "!dist/**/*.tsbuildinfo"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./components/*": {
+      "import": {
+        "types": "./dist/components/*/index.d.ts",
+        "default": "./dist/components/*/index.js"
+      }
+    },
+    "./icons": {
+      "import": {
+        "types": "./dist/icons/index.d.ts",
+        "default": "./dist/icons/index.js"
+      }
+    },
+    "./icons/*": {
+      "import": {
+        "types": "./dist/icons/*.d.ts",
+        "default": "./dist/icons/*.js"
+      }
+    },
+    "./theme": {
+      "import": {
+        "types": "./dist/theme/index.d.ts",
+        "default": "./dist/theme/index.js"
+      }
+    },
+    "./theme/*": {
+      "import": {
+        "types": "./dist/theme/*.d.ts",
+        "default": "./dist/theme/*.js"
+      }
+    }
+  },
+  "scripts": {
+    "build": "pnpm run check:types && vite build",
+    "build:watch": "vite build --watch",
+    "check:types": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "clean:all": "pnpm clean && rm -rf node_modules",
+    "size-limit": "size-limit",
+    "test": "vitest",
+    "test:run": "vitest --run",
+    "genc": "node ../../scripts/generate-component.mjs src/components"
+  }
+}

package/index.js

@@ -1 +0,0 @@
-console.log("Temporary package");