@poly-x/next 0.1.0-alpha.10 → 0.1.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +52 -2
- package/package.json +3 -3
package/dist/styles.css
CHANGED
|
@@ -548,10 +548,12 @@
|
|
|
548
548
|
user-select: none;
|
|
549
549
|
}
|
|
550
550
|
|
|
551
|
+
/* Placement is expressed as data attributes and resolved in CSS: the component measures which
|
|
552
|
+
side has room and says so; where that lands is a styling concern. `--polyx-gap` is the space
|
|
553
|
+
between trigger and menu, and the JS assumes the same 8px when it measures. */
|
|
551
554
|
.polyx-userbutton__menu {
|
|
555
|
+
--polyx-gap: 0.5rem;
|
|
552
556
|
position: absolute;
|
|
553
|
-
top: calc(100% + 0.5rem);
|
|
554
|
-
right: 0;
|
|
555
557
|
z-index: 50;
|
|
556
558
|
min-width: 15rem;
|
|
557
559
|
padding: 0.375rem;
|
|
@@ -561,6 +563,54 @@
|
|
|
561
563
|
box-shadow: var(--polyx-shadow);
|
|
562
564
|
}
|
|
563
565
|
|
|
566
|
+
/* Vertical sides: offset above/below, then align along the horizontal axis. */
|
|
567
|
+
.polyx-userbutton__menu[data-polyx-side="bottom"] {
|
|
568
|
+
top: calc(100% + var(--polyx-gap));
|
|
569
|
+
}
|
|
570
|
+
.polyx-userbutton__menu[data-polyx-side="top"] {
|
|
571
|
+
bottom: calc(100% + var(--polyx-gap));
|
|
572
|
+
}
|
|
573
|
+
.polyx-userbutton__menu[data-polyx-side="bottom"][data-polyx-align="end"],
|
|
574
|
+
.polyx-userbutton__menu[data-polyx-side="top"][data-polyx-align="end"] {
|
|
575
|
+
right: 0;
|
|
576
|
+
}
|
|
577
|
+
.polyx-userbutton__menu[data-polyx-side="bottom"][data-polyx-align="start"],
|
|
578
|
+
.polyx-userbutton__menu[data-polyx-side="top"][data-polyx-align="start"] {
|
|
579
|
+
left: 0;
|
|
580
|
+
}
|
|
581
|
+
.polyx-userbutton__menu[data-polyx-side="bottom"][data-polyx-align="center"],
|
|
582
|
+
.polyx-userbutton__menu[data-polyx-side="top"][data-polyx-align="center"] {
|
|
583
|
+
left: 50%;
|
|
584
|
+
transform: translateX(-50%);
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
/* Horizontal sides: offset left/right, then align along the vertical axis. */
|
|
588
|
+
.polyx-userbutton__menu[data-polyx-side="right"] {
|
|
589
|
+
left: calc(100% + var(--polyx-gap));
|
|
590
|
+
}
|
|
591
|
+
.polyx-userbutton__menu[data-polyx-side="left"] {
|
|
592
|
+
right: calc(100% + var(--polyx-gap));
|
|
593
|
+
}
|
|
594
|
+
.polyx-userbutton__menu[data-polyx-side="right"][data-polyx-align="end"],
|
|
595
|
+
.polyx-userbutton__menu[data-polyx-side="left"][data-polyx-align="end"] {
|
|
596
|
+
bottom: 0;
|
|
597
|
+
}
|
|
598
|
+
.polyx-userbutton__menu[data-polyx-side="right"][data-polyx-align="start"],
|
|
599
|
+
.polyx-userbutton__menu[data-polyx-side="left"][data-polyx-align="start"] {
|
|
600
|
+
top: 0;
|
|
601
|
+
}
|
|
602
|
+
.polyx-userbutton__menu[data-polyx-side="right"][data-polyx-align="center"],
|
|
603
|
+
.polyx-userbutton__menu[data-polyx-side="left"][data-polyx-align="center"] {
|
|
604
|
+
top: 50%;
|
|
605
|
+
transform: translateY(-50%);
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
/* Consumer-supplied rows: give them room and get out of the way — no colours, no type, no
|
|
609
|
+
cursor. Whatever they render is theirs. */
|
|
610
|
+
.polyx-userbutton__custom {
|
|
611
|
+
padding: 0.375rem 0.625rem;
|
|
612
|
+
}
|
|
613
|
+
|
|
564
614
|
.polyx-userbutton__identity {
|
|
565
615
|
display: flex;
|
|
566
616
|
align-items: center;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@poly-x/next",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.11",
|
|
4
4
|
"description": "PolyX SDK for Next.js App Router - components plus server helpers",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"module": "./dist/index.mjs",
|
|
48
48
|
"types": "./dist/index.d.cts",
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@poly-x/core": "0.1.0-alpha.
|
|
51
|
-
"@poly-x/react": "0.1.0-alpha.
|
|
50
|
+
"@poly-x/core": "0.1.0-alpha.11",
|
|
51
|
+
"@poly-x/react": "0.1.0-alpha.11"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"next": ">=14",
|