@poly-x/react 0.1.0-alpha.8 → 0.1.0-alpha.9

package/dist/index.cjs

@@ -360,6 +360,8 @@ const DEFAULT_LABELS$2 = {
 	emailPlaceholder: "you@company.com",
 	passwordLabel: "Password",
 	passwordPlaceholder: "••••••••",
+	showPassword: "Show password",
+	hidePassword: "Hide password",
 	submit: "Sign in",
 	submitting: "Signing in…",
 	forgotPassword: "Forgot password?",
@@ -380,6 +382,77 @@ const DEFAULT_LABELS$2 = {
 };
 /** Mirrors poly-auth's own floor (Joi: min 6). */
 const MIN_PASSWORD_LENGTH = 6;
+function EyeIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		})]
+	});
+}
+function EyeOffIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M9.88 4.24A9.1 9.1 0 0 1 12 4c6.5 0 10 7 10 7a13.2 13.2 0 0 1-1.67 2.68M6.61 6.61A13.5 13.5 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.39-1.61" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "2",
+			y1: "2",
+			x2: "22",
+			y2: "22"
+		})]
+	});
+}
+/** A password input with an accessible show/hide reveal toggle (own visibility state). */
+function PasswordField(props) {
+	const [visible, setVisible] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__field",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			className: "polyx-signin__label",
+			htmlFor: props.id,
+			children: props.label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "polyx-signin__input-wrap",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				id: props.id,
+				className: "polyx-signin__input polyx-signin__input--has-reveal",
+				type: visible ? "text" : "password",
+				name: props.name,
+				autoComplete: props.autoComplete,
+				placeholder: props.placeholder,
+				required: true,
+				minLength: props.minLength,
+				value: props.value,
+				disabled: props.disabled,
+				onChange: (event) => props.onChange(event.target.value)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "polyx-signin__reveal",
+				"aria-pressed": visible,
+				"aria-label": visible ? props.hideLabel : props.showLabel,
+				title: visible ? props.hideLabel : props.showLabel,
+				disabled: props.disabled,
+				onClick: () => setVisible((value) => !value),
+				children: visible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EyeOffIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EyeIcon, {})
+			})]
+		})]
+	});
+}
 /**
 * The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
 * consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
@@ -405,6 +478,29 @@ function SignIn(props) {
 	const [tenants, setTenants] = (0, react.useState)(null);
 	const [submitting, setSubmitting] = (0, react.useState)(false);
 	const [error, setError] = (0, react.useState)(null);
+	const polyx = (0, react.useContext)(PolyXContext);
+	const [branding, setBranding] = (0, react.useState)({});
+	(0, react.useEffect)(() => {
+		if (!polyx) return;
+		let active = true;
+		polyx.authClient.fetchBranding(props.organizationCode ? { organizationCode: props.organizationCode } : {}).then((tokens) => {
+			if (active) setBranding(tokens);
+		});
+		return () => {
+			active = false;
+		};
+	}, [polyx, props.organizationCode]);
+	const brandingStyle = {};
+	if (branding.primaryColor) brandingStyle["--polyx-brand"] = branding.primaryColor;
+	if (branding.backgroundColor) {
+		brandingStyle["--polyx-bg"] = branding.backgroundColor;
+		brandingStyle["--polyx-page-bg"] = branding.backgroundColor;
+	}
+	const brandingLogo = props.logo ?? (branding.logoUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		className: "polyx-signin__brand-logo",
+		src: branding.logoUrl,
+		alt: branding.displayName ?? ""
+	}) : void 0);
 	/**
 	* One round-trip to the BFF. `tenantId` picks a workspace; `passwords` completes
 	* the temp-password flow (the BFF re-verifies the temporary password, sets the
@@ -474,8 +570,7 @@ function SignIn(props) {
 		} });
 	}
 	const picking = tenants !== null;
-	const hasPanel = variant === "page";
-	const showHeaderLogo = Boolean(props.logo) && !hasPanel;
+	const showHeaderLogo = Boolean(brandingLogo) && !(variant === "page");
 	const rootClass = [
 		"polyx-signin",
 		`polyx-signin--${variant}`,
@@ -501,7 +596,7 @@ function SignIn(props) {
 		children: [
 			showHeaderLogo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "polyx-signin__logo",
-				children: props.logo
+				children: brandingLogo
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
 				className: "polyx-signin__heading",
@@ -546,41 +641,31 @@ function SignIn(props) {
 		className: "polyx-signin__form",
 		onSubmit: onSetPasswordSubmit,
 		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.newPasswordLabel
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					className: "polyx-signin__input",
-					type: "password",
-					name: "newPassword",
-					autoComplete: "new-password",
-					placeholder: labels.passwordPlaceholder,
-					required: true,
-					minLength: MIN_PASSWORD_LENGTH,
-					value: newPassword,
-					disabled: submitting,
-					onChange: (event) => setNewPassword(event.target.value)
-				})]
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordField, {
+				id: "polyx-signin-new-password",
+				label: labels.newPasswordLabel,
+				name: "newPassword",
+				autoComplete: "new-password",
+				placeholder: labels.passwordPlaceholder,
+				minLength: MIN_PASSWORD_LENGTH,
+				value: newPassword,
+				disabled: submitting,
+				onChange: setNewPassword,
+				showLabel: labels.showPassword,
+				hideLabel: labels.hidePassword
 			}),
-			/* @__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.confirmPasswordLabel
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					className: "polyx-signin__input",
-					type: "password",
-					name: "confirmPassword",
-					autoComplete: "new-password",
-					placeholder: labels.passwordPlaceholder,
-					required: true,
-					minLength: MIN_PASSWORD_LENGTH,
-					value: confirmPassword,
-					disabled: submitting,
-					onChange: (event) => setConfirmPassword(event.target.value)
-				})]
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordField, {
+				id: "polyx-signin-confirm-password",
+				label: labels.confirmPasswordLabel,
+				name: "confirmPassword",
+				autoComplete: "new-password",
+				placeholder: labels.passwordPlaceholder,
+				minLength: MIN_PASSWORD_LENGTH,
+				value: confirmPassword,
+				disabled: submitting,
+				onChange: setConfirmPassword,
+				showLabel: labels.showPassword,
+				hideLabel: labels.hidePassword
 			}),
 			errorNode,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -616,22 +701,17 @@ function SignIn(props) {
 							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)
-						})]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordField, {
+						id: "polyx-signin-password",
+						label: labels.passwordLabel,
+						name: "password",
+						autoComplete: "current-password",
+						placeholder: labels.passwordPlaceholder,
+						value: password,
+						disabled: submitting,
+						onChange: setPassword,
+						showLabel: labels.showPassword,
+						hideLabel: labels.hidePassword
 					}),
 					props.forgotPasswordUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "polyx-signin__forgot",
@@ -656,11 +736,12 @@ function SignIn(props) {
 	if (variant === "page") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: rootClass,
 		"data-polyx-signin": step,
+		style: brandingStyle,
 		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", {
+			children: props.panel ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [brandingLogo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "polyx-signin__panel-logo",
-				children: props.logo
+				children: brandingLogo
 			}) : null, labels.tagline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "polyx-signin__tagline",
 				children: labels.tagline
@@ -673,6 +754,7 @@ function SignIn(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: rootClass,
 		"data-polyx-signin": step,
+		style: brandingStyle,
 		children: card
 	});
 }

package/dist/index.d.cts

@@ -201,6 +201,9 @@ interface SignInLabels {
   emailPlaceholder: string;
   passwordLabel: string;
   passwordPlaceholder: string;
+  /** Reveal-toggle a11y labels (aria-label / tooltip on the show-hide button). */
+  showPassword: string;
+  hidePassword: string;
   submit: string;
   submitting: string;
   forgotPassword: string;

package/dist/index.d.mts

@@ -201,6 +201,9 @@ interface SignInLabels {
   emailPlaceholder: string;
   passwordLabel: string;
   passwordPlaceholder: string;
+  /** Reveal-toggle a11y labels (aria-label / tooltip on the show-hide button). */
+  showPassword: string;
+  hidePassword: string;
   submit: string;
   submitting: string;
   forgotPassword: string;

package/dist/index.mjs

@@ -359,6 +359,8 @@ const DEFAULT_LABELS$2 = {
 	emailPlaceholder: "you@company.com",
 	passwordLabel: "Password",
 	passwordPlaceholder: "••••••••",
+	showPassword: "Show password",
+	hidePassword: "Hide password",
 	submit: "Sign in",
 	submitting: "Signing in…",
 	forgotPassword: "Forgot password?",
@@ -379,6 +381,77 @@ const DEFAULT_LABELS$2 = {
 };
 /** Mirrors poly-auth's own floor (Joi: min 6). */
 const MIN_PASSWORD_LENGTH = 6;
+function EyeIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }), /* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		})]
+	});
+}
+function EyeOffIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ jsx("path", { d: "M9.88 4.24A9.1 9.1 0 0 1 12 4c6.5 0 10 7 10 7a13.2 13.2 0 0 1-1.67 2.68M6.61 6.61A13.5 13.5 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.39-1.61" }), /* @__PURE__ */ jsx("line", {
+			x1: "2",
+			y1: "2",
+			x2: "22",
+			y2: "22"
+		})]
+	});
+}
+/** A password input with an accessible show/hide reveal toggle (own visibility state). */
+function PasswordField(props) {
+	const [visible, setVisible] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__field",
+		children: [/* @__PURE__ */ jsx("label", {
+			className: "polyx-signin__label",
+			htmlFor: props.id,
+			children: props.label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "polyx-signin__input-wrap",
+			children: [/* @__PURE__ */ jsx("input", {
+				id: props.id,
+				className: "polyx-signin__input polyx-signin__input--has-reveal",
+				type: visible ? "text" : "password",
+				name: props.name,
+				autoComplete: props.autoComplete,
+				placeholder: props.placeholder,
+				required: true,
+				minLength: props.minLength,
+				value: props.value,
+				disabled: props.disabled,
+				onChange: (event) => props.onChange(event.target.value)
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "polyx-signin__reveal",
+				"aria-pressed": visible,
+				"aria-label": visible ? props.hideLabel : props.showLabel,
+				title: visible ? props.hideLabel : props.showLabel,
+				disabled: props.disabled,
+				onClick: () => setVisible((value) => !value),
+				children: visible ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+			})]
+		})]
+	});
+}
 /**
 * The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
 * consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
@@ -404,6 +477,29 @@ function SignIn(props) {
 	const [tenants, setTenants] = useState(null);
 	const [submitting, setSubmitting] = useState(false);
 	const [error, setError] = useState(null);
+	const polyx = useContext(PolyXContext);
+	const [branding, setBranding] = useState({});
+	useEffect(() => {
+		if (!polyx) return;
+		let active = true;
+		polyx.authClient.fetchBranding(props.organizationCode ? { organizationCode: props.organizationCode } : {}).then((tokens) => {
+			if (active) setBranding(tokens);
+		});
+		return () => {
+			active = false;
+		};
+	}, [polyx, props.organizationCode]);
+	const brandingStyle = {};
+	if (branding.primaryColor) brandingStyle["--polyx-brand"] = branding.primaryColor;
+	if (branding.backgroundColor) {
+		brandingStyle["--polyx-bg"] = branding.backgroundColor;
+		brandingStyle["--polyx-page-bg"] = branding.backgroundColor;
+	}
+	const brandingLogo = props.logo ?? (branding.logoUrl ? /* @__PURE__ */ jsx("img", {
+		className: "polyx-signin__brand-logo",
+		src: branding.logoUrl,
+		alt: branding.displayName ?? ""
+	}) : void 0);
 	/**
 	* One round-trip to the BFF. `tenantId` picks a workspace; `passwords` completes
 	* the temp-password flow (the BFF re-verifies the temporary password, sets the
@@ -473,8 +569,7 @@ function SignIn(props) {
 		} });
 	}
 	const picking = tenants !== null;
-	const hasPanel = variant === "page";
-	const showHeaderLogo = Boolean(props.logo) && !hasPanel;
+	const showHeaderLogo = Boolean(brandingLogo) && !(variant === "page");
 	const rootClass = [
 		"polyx-signin",
 		`polyx-signin--${variant}`,
@@ -500,7 +595,7 @@ function SignIn(props) {
 		children: [
 			showHeaderLogo ? /* @__PURE__ */ jsx("div", {
 				className: "polyx-signin__logo",
-				children: props.logo
+				children: brandingLogo
 			}) : null,
 			/* @__PURE__ */ jsx("h1", {
 				className: "polyx-signin__heading",
@@ -545,41 +640,31 @@ function SignIn(props) {
 		className: "polyx-signin__form",
 		onSubmit: onSetPasswordSubmit,
 		children: [
-			/* @__PURE__ */ jsxs("label", {
-				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "polyx-signin__label",
-					children: labels.newPasswordLabel
-				}), /* @__PURE__ */ jsx("input", {
-					className: "polyx-signin__input",
-					type: "password",
-					name: "newPassword",
-					autoComplete: "new-password",
-					placeholder: labels.passwordPlaceholder,
-					required: true,
-					minLength: MIN_PASSWORD_LENGTH,
-					value: newPassword,
-					disabled: submitting,
-					onChange: (event) => setNewPassword(event.target.value)
-				})]
+			/* @__PURE__ */ jsx(PasswordField, {
+				id: "polyx-signin-new-password",
+				label: labels.newPasswordLabel,
+				name: "newPassword",
+				autoComplete: "new-password",
+				placeholder: labels.passwordPlaceholder,
+				minLength: MIN_PASSWORD_LENGTH,
+				value: newPassword,
+				disabled: submitting,
+				onChange: setNewPassword,
+				showLabel: labels.showPassword,
+				hideLabel: labels.hidePassword
 			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "polyx-signin__label",
-					children: labels.confirmPasswordLabel
-				}), /* @__PURE__ */ jsx("input", {
-					className: "polyx-signin__input",
-					type: "password",
-					name: "confirmPassword",
-					autoComplete: "new-password",
-					placeholder: labels.passwordPlaceholder,
-					required: true,
-					minLength: MIN_PASSWORD_LENGTH,
-					value: confirmPassword,
-					disabled: submitting,
-					onChange: (event) => setConfirmPassword(event.target.value)
-				})]
+			/* @__PURE__ */ jsx(PasswordField, {
+				id: "polyx-signin-confirm-password",
+				label: labels.confirmPasswordLabel,
+				name: "confirmPassword",
+				autoComplete: "new-password",
+				placeholder: labels.passwordPlaceholder,
+				minLength: MIN_PASSWORD_LENGTH,
+				value: confirmPassword,
+				disabled: submitting,
+				onChange: setConfirmPassword,
+				showLabel: labels.showPassword,
+				hideLabel: labels.hidePassword
 			}),
 			errorNode,
 			/* @__PURE__ */ jsx("button", {
@@ -615,22 +700,17 @@ function SignIn(props) {
 							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)
-						})]
+					/* @__PURE__ */ jsx(PasswordField, {
+						id: "polyx-signin-password",
+						label: labels.passwordLabel,
+						name: "password",
+						autoComplete: "current-password",
+						placeholder: labels.passwordPlaceholder,
+						value: password,
+						disabled: submitting,
+						onChange: setPassword,
+						showLabel: labels.showPassword,
+						hideLabel: labels.hidePassword
 					}),
 					props.forgotPasswordUrl ? /* @__PURE__ */ jsx("div", {
 						className: "polyx-signin__forgot",
@@ -655,11 +735,12 @@ function SignIn(props) {
 	if (variant === "page") return /* @__PURE__ */ jsxs("div", {
 		className: rootClass,
 		"data-polyx-signin": step,
+		style: brandingStyle,
 		children: [/* @__PURE__ */ jsx("aside", {
 			className: "polyx-signin__panel",
-			children: props.panel ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [props.logo ? /* @__PURE__ */ jsx("div", {
+			children: props.panel ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [brandingLogo ? /* @__PURE__ */ jsx("div", {
 				className: "polyx-signin__panel-logo",
-				children: props.logo
+				children: brandingLogo
 			}) : null, labels.tagline ? /* @__PURE__ */ jsx("p", {
 				className: "polyx-signin__tagline",
 				children: labels.tagline
@@ -672,6 +753,7 @@ function SignIn(props) {
 	return /* @__PURE__ */ jsx("div", {
 		className: rootClass,
 		"data-polyx-signin": step,
+		style: brandingStyle,
 		children: card
 	});
 }

package/dist/styles.css

@@ -208,6 +208,13 @@
 	margin-bottom: 0.75rem;
 }
 
+/* Branding logo fetched from the app's tokens (FR-BRND). */
+.polyx-signin__brand-logo {
+	max-height: 2.25rem;
+	width: auto;
+	object-fit: contain;
+}
+
 .polyx-signin__heading {
 	margin: 0;
 	font-size: 1.375rem;
@@ -270,6 +277,56 @@
 	cursor: not-allowed;
 }
 
+/* --- Password reveal toggle --------------------------------------------- */
+
+.polyx-signin__input-wrap {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+/* Leave room for the reveal button so masked text never slides under it. */
+.polyx-signin__input--has-reveal {
+	padding-right: 2.75rem;
+}
+
+.polyx-signin__reveal {
+	position: absolute;
+	right: 0.25rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 2rem;
+	padding: 0;
+	color: var(--polyx-muted-fg);
+	background: transparent;
+	border: none;
+	border-radius: var(--polyx-radius-sm);
+	cursor: pointer;
+	transition: color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.polyx-signin__reveal:hover:not(:disabled) {
+	color: var(--polyx-fg);
+}
+
+.polyx-signin__reveal:focus-visible {
+	outline: none;
+	color: var(--polyx-fg);
+	box-shadow: 0 0 0 3px var(--polyx-ring);
+}
+
+.polyx-signin__reveal:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.polyx-signin__reveal svg {
+	width: 1.125rem;
+	height: 1.125rem;
+}
+
 /* --- Buttons ------------------------------------------------------------- */
 
 .polyx-signin__submit,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poly-x/react",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "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.8"
+    "@poly-x/core": "0.1.0-alpha.9"
   },
   "peerDependencies": {
     "react": ">=18",