# @crema/arcadia-auth-ui

Auth screens for arcadia-backed apps — login, signup, password reset, 2FA, OAuth, invitation acceptance — wired to [`@crema/arcadia-client`](../lib-arcadia-client) and themed via Skyrise tokens (`var(--card)`, `var(--foreground)`, `var(--primary)`, `--radius`).

Components are headless about routing — each takes callbacks (`onSuccess`, `onForgotPassword`, etc) so the consuming app routes the user wherever it wants.

## Public API

```ts
import { LoginForm } from "@crema/arcadia-auth-ui";
```

Planned additions: `SignupForm`, `PasswordResetRequestForm`, `PasswordResetConfirmForm`, `TwoFactorChallengeForm`, `TwoFactorSetupForm`, `OAuthButtons`, `InvitationAcceptForm`.

## Usage

In a route component (e.g. `app/routes/login.tsx`):

```tsx
import { LoginForm } from "@crema/arcadia-auth-ui";
import { useNavigate } from "react-router";

export default function Login() {
  const navigate = useNavigate();
  return (
    <div style={{ display: "grid", placeItems: "center", minHeight: "100dvh", padding: "2rem" }}>
      <LoginForm
        onSuccess={async ({ tokens, twoFactorRequired, twoFactorChallenge }) => {
          if (twoFactorRequired) {
            navigate("/login/2fa", { state: { challenge: twoFactorChallenge } });
            return;
          }
          sessionStorage.setItem("arcadia_token", tokens.access_token);
          navigate("/");
        }}
        onForgotPassword={() => navigate("/login/forgot")}
        onSignup={() => navigate("/signup")}
      />
    </div>
  );
}
```

Requires `<ArcadiaProvider>` somewhere up the tree (typically in `app/root.tsx`).

## Theming

All components consume Skyrise tokens via inline styles with CSS variables (the lib convention — components in libs don't use Tailwind classes). They render correctly under any theme that satisfies the Skyrise token contract.

Surface tints (`body[data-surface="snow|stone|sage|slate"]`) and dark mode (`html.dark`) work transparently — the form picks up whatever the active surface defines.

## Conventions

- Inline imports only — no own `package.json`.
- Path-aliased into apps via `tsconfig.json` `paths`: `@crema/arcadia-auth-ui` → `../lib-arcadia-auth-ui/src/index.tsx`.
- Tailwind `@source` line in the consuming app's `app.css` so any utility classes used (none today, but room for them) get scanned.
- Every interactive element has `data-action="auth-<id>"` so scripts and the LLM action bus can drive auth flows in tests / demos.