@poly-x/react 0.1.0-alpha.4 → 0.1.0-alpha.5

package/dist/index.cjs

@@ -473,12 +473,11 @@ function SignIn(props) {
 		} });
 	}
 	const picking = tenants !== null;
-	const hasPanel = variant === "page" && Boolean(props.panel || props.logo || labels.tagline);
+	const hasPanel = variant === "page";
 	const showHeaderLogo = Boolean(props.logo) && !hasPanel;
 	const rootClass = [
 		"polyx-signin",
 		`polyx-signin--${variant}`,
-		hasPanel && "polyx-signin--split",
 		props.className
 	].filter(Boolean).join(" ");
 	const step = picking ? "select_tenant" : mustSetPassword ? "set_password" : "credentials";
@@ -648,7 +647,7 @@ function SignIn(props) {
 	if (variant === "page") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: rootClass,
 		"data-polyx-signin": step,
-		children: [hasPanel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
 			className: "polyx-signin__panel",
 			children: props.panel ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [props.logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "polyx-signin__panel-logo",
@@ -657,7 +656,7 @@ function SignIn(props) {
 				className: "polyx-signin__tagline",
 				children: labels.tagline
 			}) : null] })
-		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "polyx-signin__main",
 			children: card
 		})]

package/dist/index.mjs

@@ -472,12 +472,11 @@ function SignIn(props) {
 		} });
 	}
 	const picking = tenants !== null;
-	const hasPanel = variant === "page" && Boolean(props.panel || props.logo || labels.tagline);
+	const hasPanel = variant === "page";
 	const showHeaderLogo = Boolean(props.logo) && !hasPanel;
 	const rootClass = [
 		"polyx-signin",
 		`polyx-signin--${variant}`,
-		hasPanel && "polyx-signin--split",
 		props.className
 	].filter(Boolean).join(" ");
 	const step = picking ? "select_tenant" : mustSetPassword ? "set_password" : "credentials";
@@ -647,7 +646,7 @@ function SignIn(props) {
 	if (variant === "page") return /* @__PURE__ */ jsxs("div", {
 		className: rootClass,
 		"data-polyx-signin": step,
-		children: [hasPanel ? /* @__PURE__ */ jsx("aside", {
+		children: [/* @__PURE__ */ jsx("aside", {
 			className: "polyx-signin__panel",
 			children: props.panel ?? /* @__PURE__ */ jsxs(Fragment, { children: [props.logo ? /* @__PURE__ */ jsx("div", {
 				className: "polyx-signin__panel-logo",
@@ -656,7 +655,7 @@ function SignIn(props) {
 				className: "polyx-signin__tagline",
 				children: labels.tagline
 			}) : null] })
-		}) : null, /* @__PURE__ */ jsx("div", {
+		}), /* @__PURE__ */ jsx("div", {
 			className: "polyx-signin__main",
 			children: card
 		})]

package/dist/styles.css

@@ -25,7 +25,10 @@
 	--polyx-ring: #a5b4fc;
 	--polyx-danger: #dc2626;
 	--polyx-danger-bg: #fef2f2;
-	--polyx-page-bg: #fafafa;
+	--polyx-page-bg: #ffffff;
+	/* The `page` variant's left panel — a quiet surface, a shade off the form side. */
+	--polyx-panel-bg: #fafafa;
+	--polyx-panel-fg: #18181b;
 
 	/* Shape + type */
 	--polyx-radius: 0.75rem;
@@ -59,7 +62,9 @@
 		--polyx-ring: #4f46e5;
 		--polyx-danger: #f87171;
 		--polyx-danger-bg: #2a1616;
-		--polyx-page-bg: #09090b;
+		--polyx-page-bg: #18181b;
+		--polyx-panel-bg: #09090b;
+		--polyx-panel-fg: #fafafa;
 		--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
 	}
 }
@@ -77,7 +82,9 @@
 	--polyx-ring: #4f46e5;
 	--polyx-danger: #f87171;
 	--polyx-danger-bg: #2a1616;
-	--polyx-page-bg: #09090b;
+	--polyx-page-bg: #18181b;
+	--polyx-panel-bg: #09090b;
+	--polyx-panel-fg: #fafafa;
 	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
 }
 
@@ -92,7 +99,9 @@
 	--polyx-ring: #a5b4fc;
 	--polyx-danger: #dc2626;
 	--polyx-danger-bg: #fef2f2;
-	--polyx-page-bg: #fafafa;
+	--polyx-page-bg: #ffffff;
+	--polyx-panel-bg: #fafafa;
+	--polyx-panel-fg: #18181b;
 	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
 }
 
@@ -115,10 +124,12 @@
 }
 
 /**
- * `page`: owns the viewport. With brand content (a `logo`, a `tagline`, or a
- * custom `panel`) it becomes a split layout — brand panel beside the form on
- * wide screens, a slim brand band above it on narrow ones. With no brand content
- * there's nothing to put in a panel, so it stays a single centered column.
+ * `page`: owns the viewport — a left/right split. The form sits on the right; the
+ * left is a quiet surface holding whatever the consumer gives it (a `logo`, a
+ * `tagline`, or a custom `panel`). Deliberately minimal: no gradient, no invented
+ * copy. An empty panel reads as intentional negative space, and never fights the
+ * host app's brand. Below 64rem the panel drops away entirely and the form takes
+ * the screen on its own.
  */
 .polyx-signin--page {
 	display: grid;
@@ -126,55 +137,29 @@
 	min-height: 100dvh;
 }
 
-.polyx-signin--page.polyx-signin--split {
-	grid-template-rows: auto 1fr;
-}
-
 @media (min-width: 64rem) {
-	.polyx-signin--page.polyx-signin--split {
-		grid-template-columns: 1.1fr 1fr;
-		grid-template-rows: 1fr;
+	.polyx-signin--page {
+		grid-template-columns: 1fr 1fr;
 	}
 }
 
 .polyx-signin__panel {
-	display: flex;
-	position: relative;
-	overflow: hidden;
-	align-items: center;
-	gap: 1rem;
-	padding: 1.25rem 1.5rem;
-	color: var(--polyx-brand-fg);
-	background: linear-gradient(145deg, var(--polyx-brand), color-mix(in srgb, var(--polyx-brand) 55%, #000));
+	display: none;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 2rem;
+	padding: 3.5rem;
+	color: var(--polyx-panel-fg);
+	background: var(--polyx-panel-bg);
+	border-right: 1px solid var(--polyx-border);
 }
 
 @media (min-width: 64rem) {
 	.polyx-signin__panel {
-		flex-direction: column;
-		align-items: flex-start;
-		justify-content: space-between;
-		gap: 2rem;
-		padding: 3.5rem;
+		display: flex;
 	}
 }
 
-/* Soft light-bloom so a bare brand panel still reads as designed, not as a flat fill. */
-.polyx-signin__panel::after {
-	content: "";
-	position: absolute;
-	inset: 0;
-	pointer-events: none;
-	background:
-		radial-gradient(circle at 82% 12%, rgb(255 255 255 / 0.18), transparent 45%),
-		radial-gradient(circle at 12% 88%, rgb(255 255 255 / 0.1), transparent 42%);
-}
-
-.polyx-signin__panel-logo,
-.polyx-signin__tagline {
-	position: relative;
-	z-index: 1;
-}
-
 /* The tagline is the panel's headline — it only earns its space on wide screens. */
 .polyx-signin__tagline {
 	display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poly-x/react",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
   "description": "PolyX SDK for React SPAs - provider, hooks, drop-in auth UI",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,7 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
   "dependencies": {
-    "@poly-x/core": "0.1.0-alpha.4"
+    "@poly-x/core": "0.1.0-alpha.5"
   },
   "peerDependencies": {
     "react": ">=18",