@coinbase/cdp-react 0.0.0 → 0.0.1

package/README.md

@@ -0,0 +1,99 @@
+This package contains ready-made, customizable React UI components that wrap
+the CDP frontend SDK. 
+
+## Components
+
+ - {@link SignInModal | `SignInModal`} - a button that triggers a modal with the sign-in flow
+ - {@link SignIn | `SignIn`} - the forms for the sign in flow, a logo, heading, and description text
+ - {@link SignOutButton | `SignOutButton`} - a sign out button
+ - {@link AuthButton | `AuthButton`} - the `SignOutButton` when logged in, and the `SignInModal` when logged out
+
+## Quickstart
+
+This guide will help you get started with `@coinbase/cdp-react`. You'll learn how to install the package, set up the provider, and render your first component.
+
+### Installation
+
+First, add the package to your project using your preferred package manager.
+
+```bash
+# With pnpm
+pnpm add @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks
+
+# With yarn
+yarn add @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks
+
+# With npm
+npm install @coinbase/cdp-react @coinbase/cdp-core @coinbase/cdp-hooks
+```
+
+### Gather your CDP Project information
+
+1. Sign in or create an account on the [CDP Portal](https://portal.cdp.coinbase.com)
+2. On your dashboard, select a project from the dropdown at the at the top, and copy the Project ID
+
+### Setup Provider
+
+Next, you need to wrap your application with the `CDPReactProvider`.
+
+`CDPReactProvider` provides the necessary context for hooks and components to work correctly. It also provides access to config data and theming.
+
+Update your main application file (e.g., `main.tsx` or `App.tsx`) to include the provider:
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App'; // Your main App component
+import { CDPReactProvider, type Theme } from '@coinbase/cdp-react';
+
+// Your CDP config
+const cdpConfig = {
+  projectId: "your-project-id", // Copy your Project ID here.
+}
+
+// Global config for your dapp
+const appConfig = {
+  name: "My app", // the name of your application
+  logoUrl: "https://picsum.photos/64", // logo will be displayed in select components
+}
+
+
+// You can customize the theme by overriding theme variables
+const themeOverrides: Partial<Theme> = {
+  "colors-background": "black";
+  "colors-backgroundOverlay": "rgba(0,0,0,0.5)",
+  "colors-text": "white";
+  "colors-textSecondary": "#999999";
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
+      <App />
+    </CDPReactProvider>
+  </React.StrictMode>,
+);
+```
+
+### Render a Component
+
+Now you can use the components from the library. Let's add the `AuthButton` component to your application. This component handles both sign-in and sign-out functionality.
+
+```tsx
+// In your App.tsx or any other component
+import { AuthButton } from '@coinbase/cdp-react/components/AuthButton';
+
+function App() {
+  return (
+    <div>
+      <h1>Welcome</h1>
+      <AuthButton />
+    </div>
+  );
+}
+
+export default App;
+
+```
+
+That's it! You've successfully installed `@coinbase/cdp-react`, set up the provider, and rendered your first component. 

package/dist/assets/Button.css

@@ -0,0 +1 @@
+.Button-module__btn___Fx11X{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;box-shadow:inset 0 0 0 var(--cdp-web-button-ring-inset-width) var(--cdp-web-button-ring-inset-color),0 0 0 var(--cdp-web-button-ring-width) var(--cdp-web-button-ring-color);display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1em;border-radius:9999em;border:0;background-color:transparent;color:var(--cdp-web-colors-text);font-size:1em;font-weight:500;line-height:1.5;text-decoration:none;cursor:pointer;transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.Button-module__primary___s1sM6{background-color:var(--cdp-web-colors-primary);color:var(--cdp-web-colors-primaryText)}.Button-module__primary___s1sM6:hover{background-color:var(--cdp-web-colors-primaryHoverBackground);color:var(--cdp-web-colors-primaryHoverText)}.Button-module__primary___s1sM6:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-primaryFocusRing);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-background);outline:none}.Button-module__secondary___R0waJ{background-color:var(--cdp-web-colors-secondary);color:var(--cdp-web-colors-secondaryText)}.Button-module__secondary___R0waJ:hover{background-color:var(--cdp-web-colors-secondaryHoverBackground);color:var(--cdp-web-colors-secondaryHoverText)}.Button-module__secondary___R0waJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-secondaryFocusRing);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-background);outline:none}.Button-module__transparentPrimary___o7JPs{background-color:transparent;color:var(--cdp-web-colors-linkText)}.Button-module__transparentPrimary___o7JPs:hover{color:var(--cdp-web-colors-linkHover)}.Button-module__transparentPrimary___o7JPs:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-linkText);outline:none}.Button-module__transparentSecondary___4ehOz{background-color:transparent;color:var(--cdp-web-colors-linkSecondaryText)}.Button-module__transparentSecondary___4ehOz:hover{color:var(--cdp-web-colors-linkSecondaryHover)}.Button-module__transparentSecondary___4ehOz:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-linkSecondaryText);outline:none}

package/dist/assets/Error.css

@@ -0,0 +1 @@
+.Error-module__error___mRFLG{color:var(--cdp-web-colors-error);font-size:.875em;line-height:1.43;display:flex;align-items:center;gap:.25em;margin:0}.Error-module__icon___web4F{width:1em;height:1em}

package/dist/assets/Field.css

@@ -0,0 +1 @@
+.Field-module__fieldWrapper___K-oJB{display:flex;flex-direction:column;gap:.375em}.Field-module__label___LAQio{font-size:.875em;line-height:1.43;font-weight:500;color:var(--cdp-web-colors-inputLabel)}

package/dist/assets/Input.css

@@ -0,0 +1 @@
+.Input-module__input___WjT81{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-inputBorder);font-size:1em;padding:.75em;border-radius:.5em;border:1px solid transparent;background-color:var(--cdp-web-colors-inputBackground);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color);color:var(--cdp-web-colors-inputText);transition:all .15s ease-in-out;width:100%}.Input-module__input___WjT81::placeholder{color:var(--cdp-web-colors-inputPlaceholder)}.Input-module__input___WjT81:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-inputFocusBorder);--cdp-web-input-ring-width: 2px}.Input-module__input___WjT81[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-error)}

package/dist/assets/LoadingSpinner.css

@@ -0,0 +1 @@
+.LoadingSpinner-module__spinner___X3Bl3{transform-origin:center;animation:LoadingSpinner-module__spinner___X3Bl3 2s linear infinite}.LoadingSpinner-module__spinnerCircle___ZQ0yQ{stroke-linecap:round;animation:LoadingSpinner-module__spinnerCircle___ZQ0yQ 1.5s ease-in-out infinite}@keyframes LoadingSpinner-module__spinner___X3Bl3{to{transform:rotate(360deg)}}@keyframes LoadingSpinner-module__spinnerCircle___ZQ0yQ{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,to{stroke-dasharray:42 150;stroke-dashoffset:-59}}

package/dist/assets/OTP.css

@@ -0,0 +1 @@
+.OTP-module__groupContainer___cVyAa{display:flex;gap:.5em}.OTP-module__inputContainer___39Wld{width:var(--cdp-web-otp-input-width)}.OTP-module__input___MEBPV{text-align:center}

package/dist/assets/SignIn.css

@@ -0,0 +1 @@
+.SignIn-module__signIn___cS7KU{border-radius:.75em;font:var(--cdp-web-fontSizeBase) / 1.5 var(--cdp-web-fontFamily-sans);background-color:var(--cdp-web-colors-background);color:var(--cdp-web-colors-text);display:flex;flex-direction:column;gap:1em;max-width:38.25em;padding:1em 2em;width:100%}.SignIn-module__heading___nzF-H{font-size:1.75em;line-height:1.29;margin:0}.SignIn-module__description___6bRpF{color:var(--cdp-web-colors-textSecondary);margin:0}.SignIn-module__medium___rfGKj{font-weight:500}.SignIn-module__form___MXCq6{display:flex;flex-direction:column;gap:1em}.SignIn-module__logo___9j5Y-{display:block;margin:0;width:64px;height:64px;border-radius:9999em;object-fit:cover}.SignIn-module__formFooter___Rasrs{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center;gap:.5em;min-height:1.5em}.SignIn-module__serverStateWrapper___GML6w{min-height:1.5em}.SignIn-module__loadingSpinner___JnMDX{color:var(--cdp-web-colors-linkText);display:block;margin:0 auto}.SignIn-module__formFooter___Rasrs button{width:100%}.SignIn-module__serverError___p4Z3K{justify-content:center}.SignIn-module__resetTimer___s-bUu{color:var(--cdp-web-colors-textSecondary);font-size:.875em;font-weight:500;line-height:1em;padding:1.5em 0;text-align:center}.SignIn-module__resetTimer___s-bUu p{margin:0}.SignIn-module__successIcon___2a7me{color:var(--cdp-web-colors-success);display:block;height:4em;width:4em}.SignIn-module__footer___3Gkbc{color:var(--cdp-web-colors-textSecondary);display:flex;align-items:center;justify-content:center;gap:.5em;font-size:.75em;line-height:1;padding:.5em 2em 1em}.SignIn-module__coinbaseIcon___cOnQb{color:var(--cdp-web-colors-linkText);height:1em;width:auto}.SignIn-module__footer___3Gkbc p{display:flex;align-items:center;gap:.25em;margin:0}.SignIn-module__hr___WFRgK{border:0;border-top:1px solid var(--cdp-web-colors-border);width:100%}

package/dist/assets/SignInModal.css

@@ -0,0 +1 @@
+.SignInModal-module__trigger___IcJ8x{padding-left:2em;padding-right:2em}.SignInModal-module__modal___PErrT{--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);box-shadow:var(--shadow-md);width:100%;max-width:38.25em;background:var(--cdp-web-colors-background);border-radius:.5em;outline:1px solid var(--cdp-web-colors-border);position:relative}.SignInModal-module__modal___PErrT[data-state=open]{animation:SignInModal-module__slideIn___7GyWR .2s ease-out,SignInModal-module__fadeIn___-TaAT .2s ease-out}.SignInModal-module__modal___PErrT[data-state=closed]{animation:SignInModal-module__slideOut___Ntrrb .2s ease-in,SignInModal-module__fadeOut___bzuhB .2s ease-in}.SignInModal-module__signIn___hQuJk{height:100%}.SignInModal-module__signInForm___6-UdI,.SignInModal-module__signInForm___6-UdI form{flex-grow:1}.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu{text-align:center}.SignInModal-module__signInImage___hMBda{display:flex;justify-content:center;align-items:center;flex-grow:1;margin:2em 0}.SignInModal-module__closeWrapper___cx8Zq{display:flex;justify-content:flex-end;align-items:center}.SignInModal-module__closeButton___yf-ZW{position:relative;left:1em;width:3em}.SignInModal-module__closeButton___yf-ZW svg{height:1em;width:1em}.SignInModal-module__overlay___-0rmi{background:var(--cdp-web-colors-backgroundOverlay);-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);display:grid;grid-template-rows:auto 1fr;inset:0;overflow-y:auto;place-items:end center;position:fixed;z-index:1000}.SignInModal-module__overlay___-0rmi[data-state=open]{animation:SignInModal-module__fadeIn___-TaAT .2s ease-out}.SignInModal-module__overlay___-0rmi[data-state=closed]{animation:SignInModal-module__fadeOut___bzuhB .2s ease-in}.SignInModal-module__spacer___x-lRH{height:1em}@keyframes SignInModal-module__fadeIn___-TaAT{0%{opacity:0}to{opacity:1}}@keyframes SignInModal-module__fadeOut___bzuhB{0%{opacity:1}to{opacity:0}}@keyframes SignInModal-module__slideIn___7GyWR{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slideOut___Ntrrb{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.SignInModal-module__overlay___-0rmi{padding:.5rem}}@media (min-width: 600px){.SignInModal-module__overlay___-0rmi{place-items:center;padding:1rem;grid-template-rows:1fr}.SignInModal-module__modal___PErrT{height:auto}.SignInModal-module__spacer___x-lRH{display:none}.SignInModal-module__signIn___hQuJk{padding-left:0;padding-right:0}.SignInModal-module__closeWrapper___cx8Zq,.SignInModal-module__signInImage___hMBda,.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu,.SignInModal-module__signInForm___6-UdI>form,.SignInModal-module__signInForm___6-UdI>div{padding-left:2.5em;padding-right:2.5em}.SignInModal-module__signInImage___hMBda{align-self:flex-start;margin:0}.SignInModal-module__signInTitle___AF-XA,.SignInModal-module__signInDescription___SZjXu{text-align:left}@keyframes SignInModal-module__slideIn___7GyWR{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes SignInModal-module__slideOut___Ntrrb{0%{transform:translateY(0)}to{transform:translateY(10%)}}}

package/dist/assets/SignOutButton.css

@@ -0,0 +1 @@
+.SignOutButton-module__signOutButton___WNhmy{padding-left:2em;padding-right:2em}

package/dist/assets/ThemeProvider.css

@@ -0,0 +1 @@
+.ThemeProvider-module__wrapper___aXwhZ{width:100%}

package/dist/assets/VisuallyHidden.css

@@ -0,0 +1 @@
+.VisuallyHidden-module__visuallyHidden___KiAzg{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

package/dist/chunks/SignIn.module.Dl3CqKQ_.js

@@ -0,0 +1,20 @@
+import '../assets/SignIn.css';const n = "SignIn-module__signIn___cS7KU", _ = "SignIn-module__heading___nzF-H", o = "SignIn-module__description___6bRpF", e = "SignIn-module__medium___rfGKj", r = "SignIn-module__form___MXCq6", s = "SignIn-module__logo___9j5Y-", i = "SignIn-module__formFooter___Rasrs", c = "SignIn-module__serverStateWrapper___GML6w", t = "SignIn-module__loadingSpinner___JnMDX", m = "SignIn-module__serverError___p4Z3K", g = "SignIn-module__resetTimer___s-bUu", d = "SignIn-module__successIcon___2a7me", I = "SignIn-module__footer___3Gkbc", l = "SignIn-module__coinbaseIcon___cOnQb", u = "SignIn-module__hr___WFRgK", S = {
+  signIn: n,
+  heading: _,
+  description: o,
+  medium: e,
+  form: r,
+  logo: s,
+  formFooter: i,
+  serverStateWrapper: c,
+  loadingSpinner: t,
+  serverError: m,
+  resetTimer: g,
+  successIcon: d,
+  footer: I,
+  coinbaseIcon: l,
+  hr: u
+};
+export {
+  S as s
+};

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

@@ -0,0 +1 @@
+export declare const AuthButton: () => import("react").JSX.Element;

package/dist/components/AuthButton/index.js

@@ -0,0 +1,20 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useIsSignedIn as m, useEvmAddress as f } from "@coinbase/cdp-hooks";
+import { useState as n } from "react";
+import { SignInModal as h } from "../SignInModal/index.js";
+import { SignOutButton as l } from "../SignOutButton/index.js";
+const A = () => {
+  const o = m(), i = f(), u = o && !!i, [r, t] = n(u), [c, e] = n(!1), S = () => {
+    setTimeout(() => {
+      e(!1);
+    }, 300), setTimeout(() => {
+      t(!0);
+    }, 500);
+  }, d = () => {
+    t(!1);
+  };
+  return r ? /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s(l, { onSuccess: d }) }) : /* @__PURE__ */ s(h, { open: c, setIsOpen: e, onSuccess: S });
+};
+export {
+  A as AuthButton
+};

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

@@ -0,0 +1,8 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonVariant } from '../../theme/theme';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    isPending?: boolean;
+    pendingLabel?: ReactNode;
+    variant?: ButtonVariant;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/index.js

@@ -0,0 +1,28 @@
+import { jsx as r, jsxs as i, Fragment as d } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import "../../theme/theme.js";
+import { LoadingSpinner as c } from "../LoadingSpinner/index.js";
+import { VisuallyHidden as u } from "../VisuallyHidden/index.js";
+import '../../assets/Button.css';const y = "Button-module__btn___Fx11X", l = "Button-module__primary___s1sM6", B = "Button-module__secondary___R0waJ", f = "Button-module__transparentPrimary___o7JPs", b = "Button-module__transparentSecondary___4ehOz", n = {
+  btn: y,
+  primary: l,
+  secondary: B,
+  transparentPrimary: f,
+  transparentSecondary: b
+}, h = p(
+  ({
+    children: t,
+    className: o = "",
+    isPending: a,
+    pendingLabel: e = "Loading...",
+    variant: s = "primary",
+    ...m
+  }, _) => /* @__PURE__ */ r("button", { className: `${n.btn} ${n[s]} ${o}`, ref: _, ...m, children: a ? /* @__PURE__ */ i(d, { children: [
+    /* @__PURE__ */ r(c, { "aria-hidden": "true", className: n.spinner }),
+    /* @__PURE__ */ r(u, { children: e })
+  ] }) : t })
+);
+h.displayName = "Button";
+export {
+  h as Button
+};

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

@@ -0,0 +1,11 @@
+import { CDPHooksProviderProps } from '@coinbase/cdp-hooks';
+import { ThemeProviderProps } from '../ThemeProvider';
+export interface AppConfig {
+    name: string;
+    logoUrl?: string;
+}
+export type CDPReactProviderProps = CDPHooksProviderProps & ThemeProviderProps & {
+    app?: AppConfig;
+};
+export declare const CDPReactProvider: ({ children, config, theme, app }: CDPReactProviderProps) => import("react").JSX.Element;
+export declare const useAppConfig: () => AppConfig;

package/dist/components/CDPReactProvider/index.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import { CDPContext as s, CDPHooksProvider as C } from "@coinbase/cdp-hooks";
+import { createContext as d, useContext as i, useMemo as m } from "react";
+import { ThemeProvider as u } from "../ThemeProvider/index.js";
+const l = ({ children: o, config: e, theme: r, app: c }) => {
+  const n = /* @__PURE__ */ t(f, { app: c, children: /* @__PURE__ */ t(u, { theme: r, children: o }) });
+  return i(s) ? n : /* @__PURE__ */ t(C, { config: e, children: n });
+}, p = d(void 0), f = ({ children: o, app: e }) => {
+  const r = m(() => ({ app: e || { name: "", logoUrl: "" } }), [e]);
+  return /* @__PURE__ */ t(p.Provider, { value: r, children: o });
+}, g = () => {
+  const o = i(p);
+  if (!o)
+    throw new Error("useAppConfig must be used within an AppConfigProvider");
+  return o.app;
+};
+export {
+  l as CDPReactProvider,
+  g as useAppConfig
+};

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface Props {
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+export declare const Error: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLParagraphElement>>;

package/dist/components/Error/index.js

@@ -0,0 +1,16 @@
+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.d.ts

@@ -0,0 +1,11 @@
+import { FormMessageProps, FormValidityStateProps } from '@radix-ui/react-form';
+import { CSSProperties, ReactNode } from 'react';
+export interface FormFieldProps {
+    children?: FormValidityStateProps["children"];
+    className?: string;
+    label: string;
+    name: string;
+    style?: CSSProperties;
+    validators?: [FormMessageProps["match"], ReactNode][];
+}
+export declare const Field: ({ children, className, label, name, style, validators, }: FormFieldProps) => JSX.Element;

package/dist/components/Field/index.js

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

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

@@ -0,0 +1,4 @@
+import { FormValidityStateProps } from '@radix-ui/react-form';
+import { InputHTMLAttributes } from 'react';
+export declare const Input: import('react').ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & import('react').RefAttributes<HTMLInputElement>>;
+export declare const withValidityState: (props: InputHTMLAttributes<HTMLInputElement>) => FormValidityStateProps["children"];

package/dist/components/Input/index.js

@@ -0,0 +1,17 @@
+import { jsx as a } from "react/jsx-runtime";
+import "@radix-ui/react-form";
+import { forwardRef as p } from "react";
+import '../../assets/Input.css';const u = "Input-module__input___WjT81", e = {
+  input: u
+}, r = p(
+  ({ className: i = "", ...n }, t) => /* @__PURE__ */ a("input", { ref: t, className: `${e.input} ${i}`, ...n })
+);
+r.displayName = "Input";
+const m = (i) => (t) => {
+  const o = t === void 0 || t.valid ? void 0 : !0;
+  return /* @__PURE__ */ a(r, { ...i, "aria-invalid": o });
+};
+export {
+  r as Input,
+  m as withValidityState
+};

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

@@ -0,0 +1,3 @@
+export declare const LoadingSpinner: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist/components/LoadingSpinner/index.js

@@ -0,0 +1,31 @@
+import { jsx as n } from "react/jsx-runtime";
+import '../../assets/LoadingSpinner.css';const r = "LoadingSpinner-module__spinner___X3Bl3", s = "LoadingSpinner-module__spinnerCircle___ZQ0yQ", e = {
+  spinner: r,
+  spinnerCircle: s
+}, o = ({ className: i }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    role: "img",
+    "aria-label": "loading",
+    width: "24",
+    height: "24",
+    stroke: "currentColor",
+    className: i,
+    children: /* @__PURE__ */ n("g", { className: e.spinner, children: /* @__PURE__ */ n(
+      "circle",
+      {
+        className: e.spinnerCircle,
+        cx: "12",
+        cy: "12",
+        r: "9.5",
+        fill: "none",
+        strokeWidth: "3"
+      }
+    ) })
+  }
+);
+export {
+  o as LoadingSpinner
+};

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

@@ -0,0 +1,7 @@
+import { OneTimePasswordFieldProps } from '@radix-ui/react-one-time-password-field';
+type OTPProps = {
+    error?: string | null;
+    passwordLength?: number;
+} & OneTimePasswordFieldProps;
+export declare const OTP: import('react').ForwardRefExoticComponent<Omit<OTPProps, "ref"> & import('react').RefAttributes<HTMLInputElement[]>>;
+export {};

package/dist/components/OTP/index.js

@@ -0,0 +1,42 @@
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { OneTimePasswordField as f, OneTimePasswordFieldInput as _, OneTimePasswordFieldHiddenInput as C } from "@radix-ui/react-one-time-password-field";
+import { forwardRef as P, useId as h, useRef as y, useEffect as O } from "react";
+import { Input as T } from "../Input/index.js";
+import { Error as I } from "../Error/index.js";
+import '../../assets/OTP.css';const v = "OTP-module__groupContainer___cVyAa", w = "OTP-module__inputContainer___39Wld", N = "OTP-module__input___MEBPV", u = {
+  groupContainer: v,
+  inputContainer: w,
+  input: N
+}, R = P(
+  ({ error: r, passwordLength: o = 6, className: l = "", ...p }, n) => {
+    const a = h(), s = y(/* @__PURE__ */ new Map()), c = (e, t) => {
+      e ? s.current.set(t, e) : s.current.delete(t);
+    };
+    return O(() => {
+      const e = Array.from(s.current.values());
+      typeof n == "function" ? n(e) : n && (n.current = e);
+    }, [o, n]), /* @__PURE__ */ d("div", { className: l, children: [
+      /* @__PURE__ */ d(
+        f,
+        {
+          ...p,
+          className: u.groupContainer,
+          "aria-invalid": !!r,
+          "aria-describedby": r ? a : void 0,
+          style: {
+            "--cdp-web-otp-input-width": `${Math.floor(100 / o)}%`
+          },
+          children: [
+            Array.from({ length: o }, (e, t) => /* @__PURE__ */ i("div", { className: u.inputContainer, children: /* @__PURE__ */ i(_, { asChild: !0, children: /* @__PURE__ */ i(T, { ref: (m) => c(m, t), className: u.input }) }) }, t)),
+            /* @__PURE__ */ i(C, {})
+          ]
+        }
+      ),
+      r && /* @__PURE__ */ i(I, { id: a, children: r })
+    ] });
+  }
+);
+R.displayName = "OTP";
+export {
+  R as OTP
+};

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

@@ -0,0 +1,8 @@
+import { ApiError } from '../../utils/isApiError';
+interface Props {
+    error: string | ApiError;
+    id?: string;
+    className?: string;
+}
+export declare const ServerError: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/ServerError/index.js

@@ -0,0 +1,14 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { isApiError as p } from "../../utils/isApiError.js";
+import { Error as f } from "../Error/index.js";
+const a = t(
+  ({ error: r, id: o, className: e = "" }, m) => {
+    const s = p(r) ? r.errorMessage : r;
+    return /* @__PURE__ */ i(f, { ref: m, id: o, className: e, children: s });
+  }
+);
+a.displayName = "ServerError";
+export {
+  a as ServerError
+};

package/dist/components/SignIn/SignInDescription.d.ts

@@ -0,0 +1,5 @@
+import { ElementType, HTMLAttributes } from 'react';
+export type SignInDescriptionProps = {
+    as?: ElementType;
+} & HTMLAttributes<HTMLElement>;
+export declare const SignInDescription: ({ as: Component, children, className, ...props }: SignInDescriptionProps) => import("react").JSX.Element;

package/dist/components/SignIn/SignInDescription.js

@@ -0,0 +1,27 @@
+import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
+import "react";
+import { s as c } from "../../chunks/SignIn.module.Dl3CqKQ_.js";
+import { useSignInContext as p } from "./SignInProvider.js";
+const d = () => /* @__PURE__ */ e(s, { children: "We’ll send you a verification code via email." }), u = ({ email: i }) => /* @__PURE__ */ t(s, { children: [
+  "We’ve sent a 6 digit code to ",
+  /* @__PURE__ */ e("span", { className: c.medium, children: i }),
+  "."
+] }), f = () => /* @__PURE__ */ e(s, { children: "You’ve successfully signed in." }), D = ({
+  as: i = "p",
+  children: r,
+  className: o = "",
+  ...a
+}) => {
+  const { state: l } = p(), { step: n, email: m } = l;
+  return /* @__PURE__ */ t(i, { className: `${c.description} ${o}`, ...a, children: [
+    r,
+    !r && /* @__PURE__ */ t(s, { children: [
+      n === "otp" && /* @__PURE__ */ e(u, { email: m }),
+      n === "success" && /* @__PURE__ */ e(f, {}),
+      n === "email" && /* @__PURE__ */ e(d, {})
+    ] })
+  ] });
+};
+export {
+  D as SignInDescription
+};

package/dist/components/SignIn/SignInForm.d.ts

@@ -0,0 +1,6 @@
+import { ElementType, HTMLAttributes } from 'react';
+export type SignInFormProps = {
+    as?: ElementType;
+    onSuccess?: () => void;
+} & HTMLAttributes<HTMLElement>;
+export declare const SignInForm: ({ as: Component, className, onSuccess, ...props }: SignInFormProps) => import("react").JSX.Element;