Go to file

jules 0232d27bb7 chore(pkg): add package.json (name/version/peerDeps/exports/sideEffects)

Libs shipped as bare source with no manifest — consumable only via per-app
vite/tsconfig alias surgery, no version contract, no tree-shaking signal.
Add a minimal package.json matching the @crema/content-ui template: entry +
exports map, declared peerDependencies, sideEffects:false. Mechanical, no
code change. Frontend audit 2026-06-20, rank 2.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-20 20:36:54 +10:00

src

Add InvitationAcceptForm

2026-06-20 12:30:03 +10:00

.gitignore

init: initial commit

2026-04-30 08:26:35 +10:00

package.json

chore(pkg): add package.json (name/version/peerDeps/exports/sideEffects)

2026-06-20 20:36:54 +10:00

README.md

refactor: rename @crema/arcadia-client → @crema/arcadia-core-client

2026-06-11 13:31:54 +10:00

README.md

@crema/arcadia-auth-ui

Auth screens for arcadia-backed apps — login, signup, password reset, 2FA, OAuth, invitation acceptance — wired to @crema/arcadia-core-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

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):

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.