@poly-x/react 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/index.cjs

@@ -353,11 +353,16 @@ function Protected({ children, fallback = null, loading = null }) {
 //#endregion
 //#region src/components/sign-in.tsx
 const DEFAULT_LABELS = {
+	heading: "Sign in",
+	subheading: "Enter your credentials to continue.",
 	emailLabel: "Email",
+	emailPlaceholder: "you@company.com",
 	passwordLabel: "Password",
+	passwordPlaceholder: "••••••••",
 	submit: "Sign in",
 	submitting: "Signing in…",
 	chooseWorkspace: "Choose a workspace",
+	chooseWorkspaceSubheading: "You have access to more than one workspace.",
 	invalidCredentials: "Invalid email or password.",
 	noAccess: "You don't have access to this application.",
 	passwordChangeRequired: "You must reset your password before you can sign in.",
@@ -369,9 +374,13 @@ const DEFAULT_LABELS = {
 * runs the credential authorize server-side and seals an httpOnly session — no
 * redirect to a hosted PolyX login page, no tokens or credentials in the browser
 * after submit. Handles the workspace picker (select_tenant) inline.
+*
+* Ships styled: `import "@poly-x/react/styles.css"` once, then theme it by
+* overriding the `--polyx-*` custom properties on any ancestor.
 */
 function SignIn(props) {
 	const action = props.action ?? "/api/polyx/authenticate";
+	const variant = props.variant ?? "card";
 	const labels = {
 		...DEFAULT_LABELS,
 		...props.labels
@@ -426,73 +435,100 @@ function SignIn(props) {
 		event.preventDefault();
 		authenticate();
 	}
-	if (tenants) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: props.className,
-		"data-polyx-signin": "select-tenant",
+	const rootClass = [
+		"polyx-signin",
+		`polyx-signin--${variant}`,
+		props.className
+	].filter(Boolean).join(" ");
+	const picking = tenants !== null;
+	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__header",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			props.logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "polyx-signin__logo",
+				children: props.logo
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
 				className: "polyx-signin__heading",
-				children: labels.chooseWorkspace
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				className: "polyx-signin__tenants",
-				children: tenants.map((tenant) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "polyx-signin__tenant",
-					disabled: submitting,
-					onClick: () => void authenticate(tenant.tenantId),
-					children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
-				}) }, tenant.tenantId))
+				children: picking ? labels.chooseWorkspace : labels.heading
 			}),
-			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "alert",
-				className: "polyx-signin__error",
-				children: error
-			}) : null
-		]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
-		className: props.className,
-		"data-polyx-signin": "credentials",
-		onSubmit,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.emailLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "email",
-					name: "email",
-					autoComplete: "username",
-					required: true,
-					value: email,
-					disabled: submitting,
-					onChange: (event) => setEmail(event.target.value)
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.passwordLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "password",
-					name: "password",
-					autoComplete: "current-password",
-					required: true,
-					value: password,
-					disabled: submitting,
-					onChange: (event) => setPassword(event.target.value)
-				})]
-			}),
-			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "alert",
-				className: "polyx-signin__error",
-				children: error
-			}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "submit",
-				className: "polyx-signin__submit",
-				disabled: submitting,
-				children: submitting ? labels.submitting : labels.submit
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "polyx-signin__subheading",
+				children: picking ? labels.chooseWorkspaceSubheading : labels.subheading
 			})
 		]
 	});
+	const errorNode = error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		role: "alert",
+		className: "polyx-signin__error",
+		children: error
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: rootClass,
+		"data-polyx-signin": picking ? "select-tenant" : "credentials",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "polyx-signin__card",
+			children: [header, picking ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "polyx-signin__form",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					className: "polyx-signin__tenants",
+					children: tenants.map((tenant) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "polyx-signin__tenant",
+						disabled: submitting,
+						onClick: () => void authenticate(tenant.tenantId),
+						children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
+					}) }, tenant.tenantId))
+				}), errorNode]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "polyx-signin__form",
+				onSubmit,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "polyx-signin__field",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "polyx-signin__label",
+							children: labels.emailLabel
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							className: "polyx-signin__input",
+							type: "email",
+							name: "email",
+							autoComplete: "username",
+							placeholder: labels.emailPlaceholder,
+							required: true,
+							value: email,
+							disabled: submitting,
+							onChange: (event) => setEmail(event.target.value)
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "polyx-signin__field",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "polyx-signin__label",
+							children: labels.passwordLabel
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							className: "polyx-signin__input",
+							type: "password",
+							name: "password",
+							autoComplete: "current-password",
+							placeholder: labels.passwordPlaceholder,
+							required: true,
+							value: password,
+							disabled: submitting,
+							onChange: (event) => setPassword(event.target.value)
+						})]
+					}),
+					errorNode,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "submit",
+						className: "polyx-signin__submit",
+						disabled: submitting,
+						children: submitting ? labels.submitting : labels.submit
+					})
+				]
+			})]
+		})
+	});
 }
 //#endregion
 //#region src/components/auth-callback.tsx

package/dist/index.d.cts

@@ -193,24 +193,38 @@ declare function Protected({
 //#region src/components/sign-in.d.ts
 /** Every user-facing string, overridable for i18n / white-labelling. */
 interface SignInLabels {
+  heading: string;
+  subheading: string;
   emailLabel: string;
+  emailPlaceholder: string;
   passwordLabel: string;
+  passwordPlaceholder: string;
   submit: string;
   submitting: string;
   chooseWorkspace: string;
+  chooseWorkspaceSubheading: string;
   invalidCredentials: string;
   noAccess: string;
   passwordChangeRequired: string;
   genericError: string;
 }
+/**
+ * `card` renders just the card — drop it into your own layout.
+ * `page` owns the viewport — a centered card on a full-bleed background.
+ */
+type SignInVariant = "card" | "page";
 interface SignInProps {
+  /** Layout preset. Default `card`. */
+  variant?: SignInVariant;
   /** BFF endpoint backed by `createAuthHandlers().authenticate`. Default `/api/polyx/authenticate`. */
   action?: string;
   /** Where to send the browser after success. Overrides the server's default redirect. */
   afterSignInPath?: string;
   /** Pre-scope the login to a single organization (skips org discovery). */
   organizationCode?: string;
-  /** Applied to the root `<form>` / picker container — style via your own CSS. */
+  /** Rendered above the heading — your wordmark or logo. */
+  logo?: ReactNode;
+  /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
   labels?: Partial<SignInLabels>;
   /** Fired when the backend requires the user to set a new password before continuing. */
@@ -222,6 +236,9 @@ interface SignInProps {
  * runs the credential authorize server-side and seals an httpOnly session — no
  * redirect to a hosted PolyX login page, no tokens or credentials in the browser
  * after submit. Handles the workspace picker (select_tenant) inline.
+ *
+ * Ships styled: `import "@poly-x/react/styles.css"` once, then theme it by
+ * overriding the `--polyx-*` custom properties on any ancestor.
  */
 declare function SignIn(props: SignInProps): ReactNode;
 //#endregion
@@ -243,4 +260,4 @@ declare function AuthCallback({
 declare const PACKAGE_NAME = "@poly-x/react";
 declare const version = "0.0.0";
 //#endregion
-export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };
+export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type SignInVariant, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };

package/dist/index.d.mts

@@ -193,24 +193,38 @@ declare function Protected({
 //#region src/components/sign-in.d.ts
 /** Every user-facing string, overridable for i18n / white-labelling. */
 interface SignInLabels {
+  heading: string;
+  subheading: string;
   emailLabel: string;
+  emailPlaceholder: string;
   passwordLabel: string;
+  passwordPlaceholder: string;
   submit: string;
   submitting: string;
   chooseWorkspace: string;
+  chooseWorkspaceSubheading: string;
   invalidCredentials: string;
   noAccess: string;
   passwordChangeRequired: string;
   genericError: string;
 }
+/**
+ * `card` renders just the card — drop it into your own layout.
+ * `page` owns the viewport — a centered card on a full-bleed background.
+ */
+type SignInVariant = "card" | "page";
 interface SignInProps {
+  /** Layout preset. Default `card`. */
+  variant?: SignInVariant;
   /** BFF endpoint backed by `createAuthHandlers().authenticate`. Default `/api/polyx/authenticate`. */
   action?: string;
   /** Where to send the browser after success. Overrides the server's default redirect. */
   afterSignInPath?: string;
   /** Pre-scope the login to a single organization (skips org discovery). */
   organizationCode?: string;
-  /** Applied to the root `<form>` / picker container — style via your own CSS. */
+  /** Rendered above the heading — your wordmark or logo. */
+  logo?: ReactNode;
+  /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
   labels?: Partial<SignInLabels>;
   /** Fired when the backend requires the user to set a new password before continuing. */
@@ -222,6 +236,9 @@ interface SignInProps {
  * runs the credential authorize server-side and seals an httpOnly session — no
  * redirect to a hosted PolyX login page, no tokens or credentials in the browser
  * after submit. Handles the workspace picker (select_tenant) inline.
+ *
+ * Ships styled: `import "@poly-x/react/styles.css"` once, then theme it by
+ * overriding the `--polyx-*` custom properties on any ancestor.
  */
 declare function SignIn(props: SignInProps): ReactNode;
 //#endregion
@@ -243,4 +260,4 @@ declare function AuthCallback({
 declare const PACKAGE_NAME = "@poly-x/react";
 declare const version = "0.0.0";
 //#endregion
-export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };
+export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type SignInVariant, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };

package/dist/index.mjs

@@ -352,11 +352,16 @@ function Protected({ children, fallback = null, loading = null }) {
 //#endregion
 //#region src/components/sign-in.tsx
 const DEFAULT_LABELS = {
+	heading: "Sign in",
+	subheading: "Enter your credentials to continue.",
 	emailLabel: "Email",
+	emailPlaceholder: "you@company.com",
 	passwordLabel: "Password",
+	passwordPlaceholder: "••••••••",
 	submit: "Sign in",
 	submitting: "Signing in…",
 	chooseWorkspace: "Choose a workspace",
+	chooseWorkspaceSubheading: "You have access to more than one workspace.",
 	invalidCredentials: "Invalid email or password.",
 	noAccess: "You don't have access to this application.",
 	passwordChangeRequired: "You must reset your password before you can sign in.",
@@ -368,9 +373,13 @@ const DEFAULT_LABELS = {
 * runs the credential authorize server-side and seals an httpOnly session — no
 * redirect to a hosted PolyX login page, no tokens or credentials in the browser
 * after submit. Handles the workspace picker (select_tenant) inline.
+*
+* Ships styled: `import "@poly-x/react/styles.css"` once, then theme it by
+* overriding the `--polyx-*` custom properties on any ancestor.
 */
 function SignIn(props) {
 	const action = props.action ?? "/api/polyx/authenticate";
+	const variant = props.variant ?? "card";
 	const labels = {
 		...DEFAULT_LABELS,
 		...props.labels
@@ -425,73 +434,100 @@ function SignIn(props) {
 		event.preventDefault();
 		authenticate();
 	}
-	if (tenants) return /* @__PURE__ */ jsxs("div", {
-		className: props.className,
-		"data-polyx-signin": "select-tenant",
+	const rootClass = [
+		"polyx-signin",
+		`polyx-signin--${variant}`,
+		props.className
+	].filter(Boolean).join(" ");
+	const picking = tenants !== null;
+	const header = /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__header",
 		children: [
-			/* @__PURE__ */ jsx("p", {
+			props.logo ? /* @__PURE__ */ jsx("div", {
+				className: "polyx-signin__logo",
+				children: props.logo
+			}) : null,
+			/* @__PURE__ */ jsx("h1", {
 				className: "polyx-signin__heading",
-				children: labels.chooseWorkspace
-			}),
-			/* @__PURE__ */ jsx("ul", {
-				className: "polyx-signin__tenants",
-				children: tenants.map((tenant) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "polyx-signin__tenant",
-					disabled: submitting,
-					onClick: () => void authenticate(tenant.tenantId),
-					children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
-				}) }, tenant.tenantId))
+				children: picking ? labels.chooseWorkspace : labels.heading
 			}),
-			error ? /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				className: "polyx-signin__error",
-				children: error
-			}) : null
-		]
-	});
-	return /* @__PURE__ */ jsxs("form", {
-		className: props.className,
-		"data-polyx-signin": "credentials",
-		onSubmit,
-		children: [
-			/* @__PURE__ */ jsxs("label", {
-				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ jsx("span", { children: labels.emailLabel }), /* @__PURE__ */ jsx("input", {
-					type: "email",
-					name: "email",
-					autoComplete: "username",
-					required: true,
-					value: email,
-					disabled: submitting,
-					onChange: (event) => setEmail(event.target.value)
-				})]
-			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ jsx("span", { children: labels.passwordLabel }), /* @__PURE__ */ jsx("input", {
-					type: "password",
-					name: "password",
-					autoComplete: "current-password",
-					required: true,
-					value: password,
-					disabled: submitting,
-					onChange: (event) => setPassword(event.target.value)
-				})]
-			}),
-			error ? /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				className: "polyx-signin__error",
-				children: error
-			}) : null,
-			/* @__PURE__ */ jsx("button", {
-				type: "submit",
-				className: "polyx-signin__submit",
-				disabled: submitting,
-				children: submitting ? labels.submitting : labels.submit
+			/* @__PURE__ */ jsx("p", {
+				className: "polyx-signin__subheading",
+				children: picking ? labels.chooseWorkspaceSubheading : labels.subheading
 			})
 		]
 	});
+	const errorNode = error ? /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		className: "polyx-signin__error",
+		children: error
+	}) : null;
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClass,
+		"data-polyx-signin": picking ? "select-tenant" : "credentials",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "polyx-signin__card",
+			children: [header, picking ? /* @__PURE__ */ jsxs("div", {
+				className: "polyx-signin__form",
+				children: [/* @__PURE__ */ jsx("ul", {
+					className: "polyx-signin__tenants",
+					children: tenants.map((tenant) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "polyx-signin__tenant",
+						disabled: submitting,
+						onClick: () => void authenticate(tenant.tenantId),
+						children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
+					}) }, tenant.tenantId))
+				}), errorNode]
+			}) : /* @__PURE__ */ jsxs("form", {
+				className: "polyx-signin__form",
+				onSubmit,
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "polyx-signin__field",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "polyx-signin__label",
+							children: labels.emailLabel
+						}), /* @__PURE__ */ jsx("input", {
+							className: "polyx-signin__input",
+							type: "email",
+							name: "email",
+							autoComplete: "username",
+							placeholder: labels.emailPlaceholder,
+							required: true,
+							value: email,
+							disabled: submitting,
+							onChange: (event) => setEmail(event.target.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "polyx-signin__field",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "polyx-signin__label",
+							children: labels.passwordLabel
+						}), /* @__PURE__ */ jsx("input", {
+							className: "polyx-signin__input",
+							type: "password",
+							name: "password",
+							autoComplete: "current-password",
+							placeholder: labels.passwordPlaceholder,
+							required: true,
+							value: password,
+							disabled: submitting,
+							onChange: (event) => setPassword(event.target.value)
+						})]
+					}),
+					errorNode,
+					/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: "polyx-signin__submit",
+						disabled: submitting,
+						children: submitting ? labels.submitting : labels.submit
+					})
+				]
+			})]
+		})
+	});
 }
 //#endregion
 //#region src/components/auth-callback.tsx

package/dist/styles.css

@@ -0,0 +1,274 @@
+/**
+ * @poly-x/react — default component styles.
+ *
+ * Import once, near the root of your app:
+ *   import "@poly-x/react/styles.css";   // or "@poly-x/next/styles.css"
+ *
+ * The SDK is a guest in your app: every rule is scoped under a `.polyx-*` class,
+ * there are no global element selectors, and nothing here leaks into your own
+ * markup. To theme it, override the custom properties below on any ancestor
+ * (`:root`, a wrapper div, …) — that is the supported theming surface. Dark mode
+ * follows the OS by default and defers to an explicit `.dark` / `[data-theme]`
+ * on a host ancestor when one is present.
+ */
+
+.polyx-signin {
+	/* Colors */
+	--polyx-brand: #4f46e5;
+	--polyx-brand-hover: #4338ca;
+	--polyx-brand-fg: #ffffff;
+	--polyx-bg: #ffffff;
+	--polyx-fg: #18181b;
+	--polyx-muted-fg: #71717a;
+	--polyx-border: #e4e4e7;
+	--polyx-input-bg: #ffffff;
+	--polyx-ring: #a5b4fc;
+	--polyx-danger: #dc2626;
+	--polyx-danger-bg: #fef2f2;
+	--polyx-page-bg: #fafafa;
+
+	/* Shape + type */
+	--polyx-radius: 0.75rem;
+	--polyx-radius-sm: 0.5rem;
+	--polyx-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
+
+	font-family: var(--polyx-font);
+	color: var(--polyx-fg);
+	-webkit-font-smoothing: antialiased;
+}
+
+/* Scoped box model — applies only inside our own subtree. */
+.polyx-signin,
+.polyx-signin *,
+.polyx-signin *::before,
+.polyx-signin *::after {
+	box-sizing: border-box;
+}
+
+/* Dark: follow the OS… */
+@media (prefers-color-scheme: dark) {
+	.polyx-signin {
+		--polyx-brand: #6366f1;
+		--polyx-brand-hover: #818cf8;
+		--polyx-bg: #18181b;
+		--polyx-fg: #fafafa;
+		--polyx-muted-fg: #a1a1aa;
+		--polyx-border: #3f3f46;
+		--polyx-input-bg: #27272a;
+		--polyx-ring: #4f46e5;
+		--polyx-danger: #f87171;
+		--polyx-danger-bg: #2a1616;
+		--polyx-page-bg: #09090b;
+		--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
+	}
+}
+
+/* …but an explicit host theme wins over the OS preference (`:where` keeps
+   specificity at 0 so these stay as easy to override as the base rule). */
+:where(.dark, [data-theme="dark"]) .polyx-signin {
+	--polyx-brand: #6366f1;
+	--polyx-brand-hover: #818cf8;
+	--polyx-bg: #18181b;
+	--polyx-fg: #fafafa;
+	--polyx-muted-fg: #a1a1aa;
+	--polyx-border: #3f3f46;
+	--polyx-input-bg: #27272a;
+	--polyx-ring: #4f46e5;
+	--polyx-danger: #f87171;
+	--polyx-danger-bg: #2a1616;
+	--polyx-page-bg: #09090b;
+	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
+}
+
+:where(.light, [data-theme="light"]) .polyx-signin {
+	--polyx-brand: #4f46e5;
+	--polyx-brand-hover: #4338ca;
+	--polyx-bg: #ffffff;
+	--polyx-fg: #18181b;
+	--polyx-muted-fg: #71717a;
+	--polyx-border: #e4e4e7;
+	--polyx-input-bg: #ffffff;
+	--polyx-ring: #a5b4fc;
+	--polyx-danger: #dc2626;
+	--polyx-danger-bg: #fef2f2;
+	--polyx-page-bg: #fafafa;
+	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
+}
+
+/* --- Variants ------------------------------------------------------------ */
+
+/* `page`: owns the viewport — centered card on a full-bleed background. */
+.polyx-signin--page {
+	display: grid;
+	place-items: center;
+	min-height: 100dvh;
+	padding: 1.5rem;
+	background: var(--polyx-page-bg);
+}
+
+/* `card`: just the card — drop it anywhere in your own layout. */
+.polyx-signin--card {
+	display: block;
+}
+
+.polyx-signin__card {
+	width: 100%;
+	max-width: 24rem;
+	margin-inline: auto;
+	padding: 2rem;
+	background: var(--polyx-bg);
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius);
+	box-shadow: var(--polyx-shadow);
+}
+
+/* --- Header -------------------------------------------------------------- */
+
+.polyx-signin__header {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+	margin-bottom: 1.75rem;
+}
+
+.polyx-signin__logo {
+	display: flex;
+	margin-bottom: 0.75rem;
+}
+
+.polyx-signin__heading {
+	margin: 0;
+	font-size: 1.375rem;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+	color: var(--polyx-fg);
+}
+
+.polyx-signin__subheading {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--polyx-muted-fg);
+}
+
+/* --- Form ---------------------------------------------------------------- */
+
+.polyx-signin__form {
+	display: flex;
+	flex-direction: column;
+	gap: 1.125rem;
+}
+
+.polyx-signin__field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.4375rem;
+}
+
+.polyx-signin__label {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--polyx-fg);
+}
+
+.polyx-signin__input {
+	width: 100%;
+	height: 2.5rem;
+	padding: 0 0.75rem;
+	font: inherit;
+	font-size: 0.875rem;
+	color: var(--polyx-fg);
+	background: var(--polyx-input-bg);
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius-sm);
+	outline: none;
+	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.polyx-signin__input::placeholder {
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-signin__input:focus-visible {
+	border-color: var(--polyx-brand);
+	box-shadow: 0 0 0 3px var(--polyx-ring);
+}
+
+.polyx-signin__input:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+/* --- Buttons ------------------------------------------------------------- */
+
+.polyx-signin__submit,
+.polyx-signin__tenant {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	min-height: 2.5rem;
+	padding: 0 1rem;
+	font: inherit;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--polyx-brand-fg);
+	background: var(--polyx-brand);
+	border: 1px solid transparent;
+	border-radius: var(--polyx-radius-sm);
+	cursor: pointer;
+	transition: background-color 0.15s ease;
+}
+
+.polyx-signin__submit:hover:not(:disabled),
+.polyx-signin__tenant:hover:not(:disabled) {
+	background: var(--polyx-brand-hover);
+}
+
+.polyx-signin__submit:focus-visible,
+.polyx-signin__tenant:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 3px var(--polyx-ring);
+}
+
+.polyx-signin__submit:disabled,
+.polyx-signin__tenant:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+/* --- Error --------------------------------------------------------------- */
+
+.polyx-signin__error {
+	margin: 0;
+	padding: 0.625rem 0.75rem;
+	font-size: 0.8125rem;
+	color: var(--polyx-danger);
+	background: var(--polyx-danger-bg);
+	border: 1px solid color-mix(in srgb, var(--polyx-danger) 30%, transparent);
+	border-radius: var(--polyx-radius-sm);
+}
+
+/* --- Workspace picker ---------------------------------------------------- */
+
+.polyx-signin__tenants {
+	display: flex;
+	flex-direction: column;
+	gap: 0.625rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+/* The picker's buttons read as choices, not as the primary CTA. */
+.polyx-signin__tenant {
+	justify-content: flex-start;
+	color: var(--polyx-fg);
+	background: var(--polyx-input-bg);
+	border-color: var(--polyx-border);
+}
+
+.polyx-signin__tenant:hover:not(:disabled) {
+	background: var(--polyx-input-bg);
+	border-color: var(--polyx-brand);
+}

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@poly-x/react",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "description": "PolyX SDK for React SPAs - provider, hooks, drop-in auth UI",
   "license": "MIT",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -18,13 +20,14 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
   "dependencies": {
-    "@poly-x/core": "0.1.0-alpha.2"
+    "@poly-x/core": "0.1.0-alpha.3"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -51,7 +54,7 @@
     "react-dom": "^19.2.7"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown && node scripts/copy-styles.mjs",
     "test": "vitest run",
     "lint": "eslint src"
   }