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

package/dist/styles.css

@@ -10,8 +10,33 @@
  * (`: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.
+ *
+ * ---------------------------------------------------------------------------
+ * Cascade: everything here lives in the `polyx` layer, and that is load-bearing.
+ *
+ * Unlayered CSS beats layered CSS outright — not by specificity, but by rank; no
+ * import order or selector weight changes it. Shipping these rules unlayered
+ * therefore beat every Tailwind utility a host wrote (Tailwind emits utilities
+ * into `@layer utilities`), so `className`/`triggerClassName` silently did
+ * nothing and hosts were pushed toward `!important`. Layering hands that control
+ * back: a host's utilities and unlayered CSS both outrank us now.
+ *
+ * The statement below fixes where `polyx` sits. It must land AFTER `base` —
+ * Tailwind's preflight puts `*, ::before, ::after { border: 0 solid }` there, and
+ * that would erase our own borders if we ranked lower — and BEFORE `utilities`,
+ * so host utilities still win. Naming Tailwind's layers costs nothing when the
+ * host doesn't use Tailwind: the names simply resolve to empty layers.
+ *
+ * Layer order is set by first declaration, so this only holds if our stylesheet
+ * is imported BEFORE the host's Tailwind entry. Import it later and `polyx` is
+ * appended last, which puts us back to outranking utilities — no worse than the
+ * unlayered behaviour, but not the fix either. Import us first.
  */
 
+@layer theme, base, polyx, components, utilities;
+
+@layer polyx {
+
 .polyx-signin {
 	/* Colors */
 	--polyx-brand: #4f46e5;
@@ -497,3 +522,194 @@
 	background: var(--polyx-input-bg);
 	border-color: var(--polyx-brand);
 }
+
+/* --- User button --------------------------------------------------------- */
+
+/* The root carries `polyx-signin` too, so the theme tokens above (and any consumer
+   override of them) reach this menu without a second declaration to keep in sync. */
+
+.polyx-userbutton {
+	position: relative;
+	display: inline-block;
+}
+
+.polyx-userbutton__trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.125rem;
+	color: var(--polyx-fg);
+	background: none;
+	border: none;
+	border-radius: 999px;
+	cursor: pointer;
+	font: inherit;
+}
+
+.polyx-userbutton__trigger:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 3px var(--polyx-ring);
+}
+
+.polyx-userbutton__trigger-name {
+	padding-right: 0.25rem;
+	font-size: 0.875rem;
+	font-weight: 500;
+}
+
+.polyx-userbutton__avatar {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	border-radius: 999px;
+	background: color-mix(in srgb, var(--polyx-brand) 12%, transparent);
+	color: var(--polyx-brand);
+	font-size: 0.75rem;
+	font-weight: 600;
+	letter-spacing: 0.02em;
+	object-fit: cover;
+	user-select: none;
+}
+
+/* Placement is expressed as data attributes and resolved in CSS: the component measures which
+   side has room and says so; where that lands is a styling concern. `--polyx-gap` is the space
+   between trigger and menu, and the JS assumes the same 8px when it measures. */
+.polyx-userbutton__menu {
+	--polyx-gap: 0.5rem;
+	position: absolute;
+	z-index: 50;
+	min-width: 15rem;
+	padding: 0.375rem;
+	background: var(--polyx-bg);
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius);
+	box-shadow: var(--polyx-shadow);
+}
+
+/* Vertical sides: offset above/below, then align along the horizontal axis. */
+.polyx-userbutton__menu[data-polyx-side="bottom"] {
+	top: calc(100% + var(--polyx-gap));
+}
+.polyx-userbutton__menu[data-polyx-side="top"] {
+	bottom: calc(100% + var(--polyx-gap));
+}
+.polyx-userbutton__menu[data-polyx-side="bottom"][data-polyx-align="end"],
+.polyx-userbutton__menu[data-polyx-side="top"][data-polyx-align="end"] {
+	right: 0;
+}
+.polyx-userbutton__menu[data-polyx-side="bottom"][data-polyx-align="start"],
+.polyx-userbutton__menu[data-polyx-side="top"][data-polyx-align="start"] {
+	left: 0;
+}
+.polyx-userbutton__menu[data-polyx-side="bottom"][data-polyx-align="center"],
+.polyx-userbutton__menu[data-polyx-side="top"][data-polyx-align="center"] {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+/* Horizontal sides: offset left/right, then align along the vertical axis. */
+.polyx-userbutton__menu[data-polyx-side="right"] {
+	left: calc(100% + var(--polyx-gap));
+}
+.polyx-userbutton__menu[data-polyx-side="left"] {
+	right: calc(100% + var(--polyx-gap));
+}
+.polyx-userbutton__menu[data-polyx-side="right"][data-polyx-align="end"],
+.polyx-userbutton__menu[data-polyx-side="left"][data-polyx-align="end"] {
+	bottom: 0;
+}
+.polyx-userbutton__menu[data-polyx-side="right"][data-polyx-align="start"],
+.polyx-userbutton__menu[data-polyx-side="left"][data-polyx-align="start"] {
+	top: 0;
+}
+.polyx-userbutton__menu[data-polyx-side="right"][data-polyx-align="center"],
+.polyx-userbutton__menu[data-polyx-side="left"][data-polyx-align="center"] {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+/* Consumer-supplied rows: give them room and get out of the way — no colours, no type, no
+   cursor. Whatever they render is theirs. */
+.polyx-userbutton__custom {
+	padding: 0.375rem 0.625rem;
+}
+
+.polyx-userbutton__identity {
+	display: flex;
+	align-items: center;
+	gap: 0.625rem;
+	padding: 0.5rem 0.625rem 0.625rem;
+	border-bottom: 1px solid var(--polyx-border);
+}
+
+.polyx-userbutton__identity-text {
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+}
+
+/* Names and emails are user data: let them truncate rather than stretch the menu. */
+.polyx-userbutton__name,
+.polyx-userbutton__email {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.polyx-userbutton__name {
+	font-size: 0.875rem;
+	font-weight: 600;
+}
+
+.polyx-userbutton__email {
+	font-size: 0.75rem;
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-userbutton__items {
+	display: flex;
+	flex-direction: column;
+	margin: 0.375rem 0 0;
+	padding: 0;
+	list-style: none;
+}
+
+.polyx-userbutton__item {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.5rem 0.625rem;
+	color: var(--polyx-fg);
+	background: none;
+	border: none;
+	border-radius: var(--polyx-radius-sm);
+	cursor: pointer;
+	font: inherit;
+	font-size: 0.875rem;
+	text-align: left;
+	text-decoration: none;
+}
+
+.polyx-userbutton__item:hover {
+	background: color-mix(in srgb, var(--polyx-fg) 6%, transparent);
+}
+
+.polyx-userbutton__item:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 2px var(--polyx-ring);
+}
+
+.polyx-userbutton__icon {
+	flex: none;
+	width: 1rem;
+	height: 1rem;
+	color: var(--polyx-muted-fg);
+}
+
+/* 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-alpha.9",
+  "version": "0.1.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-alpha.9"
+    "@poly-x/core": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=18",