@poly-x/react 0.1.0 → 0.2.0

package/dist/styles.css

@@ -709,6 +709,157 @@
 	color: var(--polyx-muted-fg);
 }
 
+/* --- User profile dialog (v0.4) ------------------------------------------ */
+
+.polyx-userprofile__trigger {
+	font: inherit;
+	font-size: 0.875rem;
+	color: var(--polyx-fg);
+	background: none;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+}
+
+.polyx-userprofile__overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 50;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+	background: rgb(0 0 0 / 0.45);
+	overflow-y: auto;
+}
+
+.polyx-userprofile__dialog {
+	width: 100%;
+	max-width: 28rem;
+	padding: 1.5rem;
+	background: var(--polyx-bg);
+	color: var(--polyx-fg);
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius);
+	box-shadow: var(--polyx-shadow);
+}
+
+.polyx-userprofile__header {
+	margin-bottom: 1.25rem;
+}
+
+.polyx-userprofile__title {
+	margin: 0;
+	font-size: 1.0625rem;
+	font-weight: 600;
+}
+
+.polyx-userprofile__description {
+	margin: 0.25rem 0 0;
+	font-size: 0.8125rem;
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-userprofile__status {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-userprofile__photo {
+	display: flex;
+	align-items: center;
+	gap: 0.875rem;
+}
+
+.polyx-userprofile__photo-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.polyx-userprofile__photo-button {
+	font: inherit;
+	font-size: 0.8125rem;
+	font-weight: 500;
+	color: var(--polyx-brand);
+	background: none;
+	border: none;
+	padding: 0;
+	text-align: left;
+	cursor: pointer;
+}
+
+/* Hidden from sight but not from assistive technology — the visible control is the button. */
+.polyx-userprofile__file {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.polyx-userprofile__row {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 0.75rem;
+}
+
+@media (max-width: 24rem) {
+	.polyx-userprofile__row {
+		grid-template-columns: 1fr;
+	}
+}
+
+.polyx-userprofile__optional {
+	font-weight: 400;
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-userprofile__field-error {
+	margin: 0;
+	font-size: 0.8125rem;
+	color: var(--polyx-danger);
+}
+
+.polyx-userprofile__success {
+	margin: 0;
+	padding: 0.625rem 0.75rem;
+	font-size: 0.8125rem;
+	color: var(--polyx-fg);
+	background: var(--polyx-panel-bg);
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius-sm);
+}
+
+.polyx-userprofile__actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.625rem;
+}
+
+.polyx-userprofile__cancel {
+	font: inherit;
+	font-size: 0.875rem;
+	font-weight: 500;
+	height: 2.5rem;
+	padding: 0 0.875rem;
+	color: var(--polyx-fg);
+	background: none;
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius-sm);
+	cursor: pointer;
+}
+
+.polyx-userprofile__actions .polyx-signin__submit {
+	width: auto;
+	padding: 0 1.125rem;
+}
+
 /* Closes `@layer polyx` — opened at the top of the file. The rules above are left
    unindented deliberately: wrapping the sheet in a layer is a cascade change, not a
    reformat, and re-indenting 600 lines would bury it in the diff. */

package/package.json

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