@poly-x/react 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/index.cjs

@@ -1615,6 +1615,15 @@ function UserButtonRoot(props) {
 		setOpen(false);
 		if (returnFocus) triggerRef.current?.focus();
 	}, []);
+	const onOpenChange = props.onOpenChange;
+	const mounted = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (!mounted.current) {
+			mounted.current = true;
+			return;
+		}
+		onOpenChange?.(open);
+	}, [open, onOpenChange]);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const onKeyDown = (event) => {
@@ -1709,7 +1718,7 @@ function UserButtonRoot(props) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			ref: triggerRef,
 			type: "button",
-			className: "polyx-userbutton__trigger",
+			className: ["polyx-userbutton__trigger", props.triggerClassName].filter(Boolean).join(" "),
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
 			"aria-controls": open ? menuId : void 0,

package/dist/index.d.cts

@@ -470,6 +470,13 @@ interface UserButtonProps {
   fallback?: ReactNode;
   /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
+  /**
+   * Appended to the trigger button's class list. The SDK owns that button, so without this a
+   * consumer could style everything except the one element they place in their own layout.
+   */
+  triggerClassName?: string;
+  /** Notified when the menu opens or closes — hosts often coordinate their own chrome around it. */
+  onOpenChange?: (open: boolean) => void;
   labels?: Partial<UserButtonLabels>;
   /**
    * `<UserButton.MenuItems>` with `<UserButton.Action>` / `<UserButton.Link>` / `<UserButton.Custom>`

package/dist/index.d.mts

@@ -470,6 +470,13 @@ interface UserButtonProps {
   fallback?: ReactNode;
   /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
+  /**
+   * Appended to the trigger button's class list. The SDK owns that button, so without this a
+   * consumer could style everything except the one element they place in their own layout.
+   */
+  triggerClassName?: string;
+  /** Notified when the menu opens or closes — hosts often coordinate their own chrome around it. */
+  onOpenChange?: (open: boolean) => void;
   labels?: Partial<UserButtonLabels>;
   /**
    * `<UserButton.MenuItems>` with `<UserButton.Action>` / `<UserButton.Link>` / `<UserButton.Custom>`

package/dist/index.mjs

@@ -1614,6 +1614,15 @@ function UserButtonRoot(props) {
 		setOpen(false);
 		if (returnFocus) triggerRef.current?.focus();
 	}, []);
+	const onOpenChange = props.onOpenChange;
+	const mounted = useRef(false);
+	useEffect(() => {
+		if (!mounted.current) {
+			mounted.current = true;
+			return;
+		}
+		onOpenChange?.(open);
+	}, [open, onOpenChange]);
 	useEffect(() => {
 		if (!open) return;
 		const onKeyDown = (event) => {
@@ -1708,7 +1717,7 @@ function UserButtonRoot(props) {
 		children: [/* @__PURE__ */ jsx("button", {
 			ref: triggerRef,
 			type: "button",
-			className: "polyx-userbutton__trigger",
+			className: ["polyx-userbutton__trigger", props.triggerClassName].filter(Boolean).join(" "),
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
 			"aria-controls": open ? menuId : void 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;
@@ -683,3 +708,8 @@
 	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.11",
+  "version": "0.1.0-alpha.13",
   "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.11"
+    "@poly-x/core": "0.1.0-alpha.13"
   },
   "peerDependencies": {
     "react": ">=18",