@zitadel/sdk-react 0.1.0-alpha.0 → 0.1.0-alpha.11

package/README.md

@@ -2,6 +2,10 @@
 
 React components for the Zitadel auth UI, for client-side SPAs.
 
+## Requirements
+
+TypeScript ≥ 5.0 — the published type definitions re-export with `export type *`, which TypeScript introduced in 5.0.
+
 ## Usage
 
 ```tsx

package/dist/index.d.ts

@@ -1,5 +1,27 @@
-export { ZitadelLogin, ZitadelLogout } from './react.js';
-export { ZitadelConfig, ZitadelProject, configureZitadel, getApi, getZitadelConfig } from '@zitadel/api/config';
-export { AuthResult, AuthState, NextgenMiddlewareOptions, NextgenSession, UnauthState } from '@zitadel/sdk-core/types';
-import '@lit/react';
-import '@zitadel/components';
+import { configureZitadel, getApi, getZitadelConfig, ZitadelConfig, ZitadelProject } from '@zitadel/api/config';
+import { ZitadelLogin as ZitadelLoginElement, ZitadelLogout as ZitadelLogoutElement } from '@zitadel/components';
+import * as React from "react";
+export { configureZitadel, getApi, getZitadelConfig };
+export type { ZitadelConfig, ZitadelProject };
+export * from './types';
+/**
+ * React component wrapping the `<zitadel-login>` web component. Binds the
+ * `ZitadelProject` handle as a DOM property (or the discrete project id /
+ * proxy path as attributes) and forwards the widget's `zitadel-*` events as
+ * optional callbacks.
+ *
+ * A forwarded `ref` resolves to the underlying `<zitadel-login>` DOM element,
+ * so consumers can imperatively access the upgraded web component.
+ */
+export declare const ZitadelLogin: React.ForwardRefExoticComponent<import('@zitadel/sdk-core/types').ZitadelLoginConfig & import('@zitadel/sdk-core/types').ZitadelLoginHandlers & React.RefAttributes<ZitadelLoginElement>>;
+/**
+ * React component wrapping the `<zitadel-logout>` web component. Binds the
+ * `ZitadelProject` handle as a DOM property (or the discrete project id /
+ * proxy path as attributes) and forwards the widget's `zitadel-signout` event
+ * as an optional callback.
+ *
+ * A forwarded `ref` resolves to the underlying `<zitadel-logout>` DOM element,
+ * so consumers can imperatively access the upgraded web component.
+ */
+export declare const ZitadelLogout: React.ForwardRefExoticComponent<import('@zitadel/sdk-core/types').ZitadelLogoutConfig & import('@zitadel/sdk-core/types').ZitadelLogoutHandlers & React.RefAttributes<ZitadelLogoutElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAChB,MAAM,EACN,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,YAAY,IAAI,mBAAmB,EACnC,aAAa,IAAI,oBAAoB,EACtC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC;AAC9C,cAAc,SAAS,CAAC;AAiDxB;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,2LAiBxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,8LAUzB,CAAC"}

package/dist/index.js

@@ -1,19 +1,59 @@
-import {
-  ZitadelLogin,
-  ZitadelLogout
-} from "./chunk-QJALWXNY.js";
-import "./chunk-6F4PWJZI.js";
-
-// src/index.ts
-import {
-  configureZitadel,
-  getApi,
-  getZitadelConfig
-} from "@zitadel/api/config";
+import { jsx as n } from "react/jsx-runtime";
+import { createComponent as r } from "@lit/react";
+import { configureZitadel as N, getApi as x, getZitadelConfig as E } from "@zitadel/api/config";
+import { ZitadelLogin as s, ZitadelLogout as p } from "@zitadel/components";
+import * as l from "react";
+const f = r({
+  react: l,
+  tagName: "zitadel-login",
+  elementClass: s,
+  events: {
+    onZitadelFlowStep: "zitadel-flow-step",
+    onZitadelFlowInput: "zitadel-flow-input",
+    onZitadelFlowComplete: "zitadel-flow-complete",
+    onZitadelFlowError: "zitadel-flow-error"
+  }
+}), u = r({
+  react: l,
+  tagName: "zitadel-logout",
+  elementClass: p,
+  events: {
+    onZitadelSignout: "zitadel-signout"
+  }
+}), c = l.forwardRef(
+  function({ purpose: e, onFlowStep: o, onFlowInput: i, onFlowComplete: a, onFlowError: d, ...g }, m) {
+    return /* @__PURE__ */ n(
+      f,
+      {
+        ...g,
+        ref: m,
+        purpose: e ?? "login",
+        onZitadelFlowStep: o && ((t) => o(t.detail)),
+        onZitadelFlowInput: i && ((t) => i(t.detail)),
+        onZitadelFlowComplete: a && ((t) => a(t.detail)),
+        onZitadelFlowError: d && ((t) => d(t.detail))
+      }
+    );
+  }
+);
+c.displayName = "ZitadelLogin";
+const L = l.forwardRef(
+  function({ onSignout: e, ...o }, i) {
+    return /* @__PURE__ */ n(
+      u,
+      {
+        ...o,
+        ref: i,
+        onZitadelSignout: e && ((a) => e(a.detail))
+      }
+    );
+  }
+);
+L.displayName = "ZitadelLogout";
 export {
-  ZitadelLogin,
-  ZitadelLogout,
-  configureZitadel,
-  getApi,
-  getZitadelConfig
+  c as ZitadelLogin,
+  L as ZitadelLogout,
+  N as configureZitadel,
+  x as getApi,
+  E as getZitadelConfig
 };

package/dist/test-setup.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":""}

package/dist/types.d.ts

@@ -1 +1,10 @@
-export { AuthResult, AuthState, NextgenMiddlewareOptions, NextgenSession, UnauthState } from '@zitadel/sdk-core/types';
+/**
+ * Re-exports the shared SPA widget types from `@zitadel/sdk-core`.
+ *
+ * `export type *` keeps this surface in lockstep with the core SPA contract: a
+ * type added there is re-exported here automatically, and none can be dropped by
+ * hand. The server-middleware types live in a separate core module and stay out
+ * of the browser SDK surface.
+ */
+export type * from '@zitadel/sdk-core/types';
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,mBAAmB,yBAAyB,CAAC"}

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@zitadel/sdk-react",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.11",
   "description": "React components for the Zitadel auth UI (client-side SPA).",
   "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/sdk-react#readme",
   "bugs": {
     "url": "https://github.com/zitadel/nextgen/issues"
   },
-  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zitadel/nextgen.git",
     "directory": "packages/sdk-react"
   },
+  "license": "MIT",
+  "type": "module",
   "files": [
     "dist"
   ],
-  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@zitadel/api": "0.1.0-alpha.0",
-    "@zitadel/components": "0.1.0-alpha.0",
-    "@zitadel/sdk-core": "0.1.0-alpha.0"
+    "@zitadel/sdk-core": "0.1.0-alpha.11",
+    "@zitadel/components": "0.1.0-alpha.11",
+    "@zitadel/api": "0.1.0-alpha.11"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -37,33 +37,34 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
+    "@eslint/json": "^0.11.0",
+    "@eslint/markdown": "^6.0.0",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "eslint": "^9.0.0",
-    "jsdom": "^29.0.2",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.3",
-    "vitest": "^3.0.0",
-    "@eslint/json": "^0.11.0",
-    "@eslint/markdown": "^6.0.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-perfectionist": "^4.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "prettier": "^3.0.0",
-    "typescript-eslint": "^8.0.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-testing-library": "^7.0.0"
+    "eslint-plugin-testing-library": "^7.0.0",
+    "jsdom": "^29.0.2",
+    "prettier": "^3.0.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^7.3.5",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.0"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/react.tsx src/types.ts --format esm --dts --clean --tsconfig tsconfig.json --external react react-dom",
+    "build": "vite build",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "test": "vitest run --passWithNoTests",
+    "test": "vitest run",
     "lint": "eslint ."
   }
 }

package/dist/chunk-QJALWXNY.js

@@ -1,22 +0,0 @@
-// src/react.tsx
-import { createComponent } from "@lit/react";
-import {
-  ZitadelLogin as ZitadelLoginElement,
-  ZitadelLogout as ZitadelLogoutElement
-} from "@zitadel/components";
-import * as React from "react";
-var ZitadelLogin = createComponent({
-  react: React,
-  tagName: "zitadel-login",
-  elementClass: ZitadelLoginElement
-});
-var ZitadelLogout = createComponent({
-  react: React,
-  tagName: "zitadel-logout",
-  elementClass: ZitadelLogoutElement
-});
-
-export {
-  ZitadelLogin,
-  ZitadelLogout
-};

package/dist/react.d.ts

@@ -1,32 +0,0 @@
-import * as _lit_react from '@lit/react';
-import { ZitadelLogin as ZitadelLogin$1, ZitadelLogout as ZitadelLogout$1 } from '@zitadel/components';
-import '@zitadel/api/config';
-import '@zitadel/sdk-core/types';
-
-/**
- * React components for the Zitadel auth widgets.
- *
- * These wrap the framework-agnostic Lit web components from
- * `@zitadel/components` with `@lit/react`'s `createComponent`, so they are real
- * React components: typed props, refs, and events, with the SDK `project`
- * handle bound as a DOM *property* (not an attribute) — which is what the
- * elements read at startup.
- *
- * In a client-side SPA, build the handle with `configureZitadel(...)` and pass
- * it as the `project` prop. Because the SPA renders after configuration, the
- * prop is present when the element upgrades:
- *
- * ```tsx
- * import { ZitadelLogin, configureZitadel } from "@zitadel/sdk-react";
- *
- * const project = configureZitadel({ projectId: "…", proxyPath: "/__nextgen" });
- *
- * export function LoginPage() {
- *   return <ZitadelLogin project={project} purpose="login" postSignInUrl="/" />;
- * }
- * ```
- */
-declare const ZitadelLogin: _lit_react.ReactWebComponent<ZitadelLogin$1, {}>;
-declare const ZitadelLogout: _lit_react.ReactWebComponent<ZitadelLogout$1, {}>;
-
-export { ZitadelLogin, ZitadelLogout };

package/dist/react.js

@@ -1,8 +0,0 @@
-import {
-  ZitadelLogin,
-  ZitadelLogout
-} from "./chunk-QJALWXNY.js";
-export {
-  ZitadelLogin,
-  ZitadelLogout
-};

package/dist/types.js

@@ -1 +0,0 @@
-import "./chunk-6F4PWJZI.js";