@poly-x/next 0.1.0-alpha.1 → 0.1.0-alpha.10
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/proxy.cjs +1 -1
- package/dist/proxy.mjs +1 -1
- package/dist/{server-session-YbnXBt3c.cjs → server-session-BpRaJCz9.cjs} +36 -8
- package/dist/{server-session-B3zJ7CS8.mjs → server-session-DedPwl4b.mjs} +36 -8
- package/dist/server.cjs +174 -12
- package/dist/server.d.cts +94 -1
- package/dist/server.d.mts +94 -1
- package/dist/server.mjs +174 -12
- package/dist/styles.css +635 -0
- package/package.json +9 -6
package/dist/styles.css
ADDED
|
@@ -0,0 +1,635 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @poly-x/react — default component styles.
|
|
3
|
+
*
|
|
4
|
+
* Import once, near the root of your app:
|
|
5
|
+
* import "@poly-x/react/styles.css"; // or "@poly-x/next/styles.css"
|
|
6
|
+
*
|
|
7
|
+
* The SDK is a guest in your app: every rule is scoped under a `.polyx-*` class,
|
|
8
|
+
* there are no global element selectors, and nothing here leaks into your own
|
|
9
|
+
* markup. To theme it, override the custom properties below on any ancestor
|
|
10
|
+
* (`:root`, a wrapper div, …) — that is the supported theming surface. Dark mode
|
|
11
|
+
* follows the OS by default and defers to an explicit `.dark` / `[data-theme]`
|
|
12
|
+
* on a host ancestor when one is present.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
.polyx-signin {
|
|
16
|
+
/* Colors */
|
|
17
|
+
--polyx-brand: #4f46e5;
|
|
18
|
+
--polyx-brand-hover: #4338ca;
|
|
19
|
+
--polyx-brand-fg: #ffffff;
|
|
20
|
+
--polyx-bg: #ffffff;
|
|
21
|
+
--polyx-fg: #18181b;
|
|
22
|
+
--polyx-muted-fg: #71717a;
|
|
23
|
+
--polyx-border: #e4e4e7;
|
|
24
|
+
--polyx-input-bg: #ffffff;
|
|
25
|
+
--polyx-ring: #a5b4fc;
|
|
26
|
+
--polyx-danger: #dc2626;
|
|
27
|
+
--polyx-danger-bg: #fef2f2;
|
|
28
|
+
--polyx-page-bg: #ffffff;
|
|
29
|
+
/* The `page` variant's left panel — a quiet surface, a shade off the form side. */
|
|
30
|
+
--polyx-panel-bg: #fafafa;
|
|
31
|
+
--polyx-panel-fg: #18181b;
|
|
32
|
+
|
|
33
|
+
/* Shape + type */
|
|
34
|
+
--polyx-radius: 0.75rem;
|
|
35
|
+
--polyx-radius-sm: 0.5rem;
|
|
36
|
+
--polyx-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
37
|
+
--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
|
|
38
|
+
|
|
39
|
+
font-family: var(--polyx-font);
|
|
40
|
+
color: var(--polyx-fg);
|
|
41
|
+
-webkit-font-smoothing: antialiased;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Scoped box model — applies only inside our own subtree. */
|
|
45
|
+
.polyx-signin,
|
|
46
|
+
.polyx-signin *,
|
|
47
|
+
.polyx-signin *::before,
|
|
48
|
+
.polyx-signin *::after {
|
|
49
|
+
box-sizing: border-box;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Dark: follow the OS… */
|
|
53
|
+
@media (prefers-color-scheme: dark) {
|
|
54
|
+
.polyx-signin {
|
|
55
|
+
--polyx-brand: #6366f1;
|
|
56
|
+
--polyx-brand-hover: #818cf8;
|
|
57
|
+
--polyx-bg: #18181b;
|
|
58
|
+
--polyx-fg: #fafafa;
|
|
59
|
+
--polyx-muted-fg: #a1a1aa;
|
|
60
|
+
--polyx-border: #3f3f46;
|
|
61
|
+
--polyx-input-bg: #27272a;
|
|
62
|
+
--polyx-ring: #4f46e5;
|
|
63
|
+
--polyx-danger: #f87171;
|
|
64
|
+
--polyx-danger-bg: #2a1616;
|
|
65
|
+
--polyx-page-bg: #18181b;
|
|
66
|
+
--polyx-panel-bg: #09090b;
|
|
67
|
+
--polyx-panel-fg: #fafafa;
|
|
68
|
+
--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* …but an explicit host theme wins over the OS preference (`:where` keeps
|
|
73
|
+
specificity at 0 so these stay as easy to override as the base rule). */
|
|
74
|
+
:where(.dark, [data-theme="dark"]) .polyx-signin {
|
|
75
|
+
--polyx-brand: #6366f1;
|
|
76
|
+
--polyx-brand-hover: #818cf8;
|
|
77
|
+
--polyx-bg: #18181b;
|
|
78
|
+
--polyx-fg: #fafafa;
|
|
79
|
+
--polyx-muted-fg: #a1a1aa;
|
|
80
|
+
--polyx-border: #3f3f46;
|
|
81
|
+
--polyx-input-bg: #27272a;
|
|
82
|
+
--polyx-ring: #4f46e5;
|
|
83
|
+
--polyx-danger: #f87171;
|
|
84
|
+
--polyx-danger-bg: #2a1616;
|
|
85
|
+
--polyx-page-bg: #18181b;
|
|
86
|
+
--polyx-panel-bg: #09090b;
|
|
87
|
+
--polyx-panel-fg: #fafafa;
|
|
88
|
+
--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
:where(.light, [data-theme="light"]) .polyx-signin {
|
|
92
|
+
--polyx-brand: #4f46e5;
|
|
93
|
+
--polyx-brand-hover: #4338ca;
|
|
94
|
+
--polyx-bg: #ffffff;
|
|
95
|
+
--polyx-fg: #18181b;
|
|
96
|
+
--polyx-muted-fg: #71717a;
|
|
97
|
+
--polyx-border: #e4e4e7;
|
|
98
|
+
--polyx-input-bg: #ffffff;
|
|
99
|
+
--polyx-ring: #a5b4fc;
|
|
100
|
+
--polyx-danger: #dc2626;
|
|
101
|
+
--polyx-danger-bg: #fef2f2;
|
|
102
|
+
--polyx-page-bg: #ffffff;
|
|
103
|
+
--polyx-panel-bg: #fafafa;
|
|
104
|
+
--polyx-panel-fg: #18181b;
|
|
105
|
+
--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* --- Variants ------------------------------------------------------------ */
|
|
109
|
+
|
|
110
|
+
/* `card`: just the card — drop it anywhere in your own layout. */
|
|
111
|
+
.polyx-signin--card {
|
|
112
|
+
display: block;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.polyx-signin__card {
|
|
116
|
+
width: 100%;
|
|
117
|
+
max-width: 27rem;
|
|
118
|
+
margin-inline: auto;
|
|
119
|
+
padding: 2.25rem;
|
|
120
|
+
background: var(--polyx-bg);
|
|
121
|
+
border: 1px solid var(--polyx-border);
|
|
122
|
+
border-radius: var(--polyx-radius);
|
|
123
|
+
box-shadow: var(--polyx-shadow);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* `page`: owns the viewport — a left/right split. The form sits on the right; the
|
|
128
|
+
* left is a quiet surface holding whatever the consumer gives it (a `logo`, a
|
|
129
|
+
* `tagline`, or a custom `panel`). Deliberately minimal: no gradient, no invented
|
|
130
|
+
* copy. An empty panel reads as intentional negative space, and never fights the
|
|
131
|
+
* host app's brand. Below 64rem the panel drops away entirely and the form takes
|
|
132
|
+
* the screen on its own.
|
|
133
|
+
*/
|
|
134
|
+
.polyx-signin--page {
|
|
135
|
+
display: grid;
|
|
136
|
+
grid-template-columns: 1fr;
|
|
137
|
+
min-height: 100dvh;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@media (min-width: 64rem) {
|
|
141
|
+
.polyx-signin--page {
|
|
142
|
+
grid-template-columns: 1fr 1fr;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.polyx-signin__panel {
|
|
147
|
+
display: none;
|
|
148
|
+
flex-direction: column;
|
|
149
|
+
justify-content: space-between;
|
|
150
|
+
gap: 2rem;
|
|
151
|
+
padding: 3.5rem;
|
|
152
|
+
color: var(--polyx-panel-fg);
|
|
153
|
+
background: var(--polyx-panel-bg);
|
|
154
|
+
border-right: 1px solid var(--polyx-border);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@media (min-width: 64rem) {
|
|
158
|
+
.polyx-signin__panel {
|
|
159
|
+
display: flex;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* The tagline is the panel's headline — it only earns its space on wide screens. */
|
|
164
|
+
.polyx-signin__tagline {
|
|
165
|
+
display: none;
|
|
166
|
+
margin: 0;
|
|
167
|
+
max-width: 18ch;
|
|
168
|
+
font-size: 2rem;
|
|
169
|
+
font-weight: 600;
|
|
170
|
+
line-height: 1.2;
|
|
171
|
+
letter-spacing: -0.02em;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
@media (min-width: 64rem) {
|
|
175
|
+
.polyx-signin__tagline {
|
|
176
|
+
display: block;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.polyx-signin__main {
|
|
181
|
+
display: grid;
|
|
182
|
+
place-items: center;
|
|
183
|
+
padding: 2.5rem 1.5rem;
|
|
184
|
+
background: var(--polyx-page-bg);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* On the page variant the form isn't a floating card — it sits on the page itself. */
|
|
188
|
+
.polyx-signin--page .polyx-signin__card {
|
|
189
|
+
max-width: 25rem;
|
|
190
|
+
padding: 0;
|
|
191
|
+
background: transparent;
|
|
192
|
+
border: none;
|
|
193
|
+
box-shadow: none;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
/* --- Header -------------------------------------------------------------- */
|
|
198
|
+
|
|
199
|
+
.polyx-signin__header {
|
|
200
|
+
display: flex;
|
|
201
|
+
flex-direction: column;
|
|
202
|
+
gap: 0.375rem;
|
|
203
|
+
margin-bottom: 1.75rem;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.polyx-signin__logo {
|
|
207
|
+
display: flex;
|
|
208
|
+
margin-bottom: 0.75rem;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* Branding logo fetched from the app's tokens (FR-BRND). */
|
|
212
|
+
.polyx-signin__brand-logo {
|
|
213
|
+
max-height: 2.25rem;
|
|
214
|
+
width: auto;
|
|
215
|
+
object-fit: contain;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.polyx-signin__heading {
|
|
219
|
+
margin: 0;
|
|
220
|
+
font-size: 1.375rem;
|
|
221
|
+
font-weight: 600;
|
|
222
|
+
letter-spacing: -0.01em;
|
|
223
|
+
color: var(--polyx-fg);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.polyx-signin__subheading {
|
|
227
|
+
margin: 0;
|
|
228
|
+
font-size: 0.875rem;
|
|
229
|
+
color: var(--polyx-muted-fg);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* --- Form ---------------------------------------------------------------- */
|
|
233
|
+
|
|
234
|
+
.polyx-signin__form {
|
|
235
|
+
display: flex;
|
|
236
|
+
flex-direction: column;
|
|
237
|
+
gap: 1.125rem;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.polyx-signin__field {
|
|
241
|
+
display: flex;
|
|
242
|
+
flex-direction: column;
|
|
243
|
+
gap: 0.4375rem;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.polyx-signin__label {
|
|
247
|
+
font-size: 0.875rem;
|
|
248
|
+
font-weight: 500;
|
|
249
|
+
color: var(--polyx-fg);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.polyx-signin__input {
|
|
253
|
+
width: 100%;
|
|
254
|
+
height: 2.5rem;
|
|
255
|
+
padding: 0 0.75rem;
|
|
256
|
+
font: inherit;
|
|
257
|
+
font-size: 0.875rem;
|
|
258
|
+
color: var(--polyx-fg);
|
|
259
|
+
background: var(--polyx-input-bg);
|
|
260
|
+
border: 1px solid var(--polyx-border);
|
|
261
|
+
border-radius: var(--polyx-radius-sm);
|
|
262
|
+
outline: none;
|
|
263
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.polyx-signin__input::placeholder {
|
|
267
|
+
color: var(--polyx-muted-fg);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.polyx-signin__input:focus-visible {
|
|
271
|
+
border-color: var(--polyx-brand);
|
|
272
|
+
box-shadow: 0 0 0 3px var(--polyx-ring);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.polyx-signin__input:disabled {
|
|
276
|
+
opacity: 0.6;
|
|
277
|
+
cursor: not-allowed;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* --- Password reveal toggle --------------------------------------------- */
|
|
281
|
+
|
|
282
|
+
.polyx-signin__input-wrap {
|
|
283
|
+
position: relative;
|
|
284
|
+
display: flex;
|
|
285
|
+
align-items: center;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* Leave room for the reveal button so masked text never slides under it. */
|
|
289
|
+
.polyx-signin__input--has-reveal {
|
|
290
|
+
padding-right: 2.75rem;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.polyx-signin__reveal {
|
|
294
|
+
position: absolute;
|
|
295
|
+
right: 0.25rem;
|
|
296
|
+
display: inline-flex;
|
|
297
|
+
align-items: center;
|
|
298
|
+
justify-content: center;
|
|
299
|
+
width: 2rem;
|
|
300
|
+
height: 2rem;
|
|
301
|
+
padding: 0;
|
|
302
|
+
color: var(--polyx-muted-fg);
|
|
303
|
+
background: transparent;
|
|
304
|
+
border: none;
|
|
305
|
+
border-radius: var(--polyx-radius-sm);
|
|
306
|
+
cursor: pointer;
|
|
307
|
+
transition: color 0.15s ease, box-shadow 0.15s ease;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.polyx-signin__reveal:hover:not(:disabled) {
|
|
311
|
+
color: var(--polyx-fg);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.polyx-signin__reveal:focus-visible {
|
|
315
|
+
outline: none;
|
|
316
|
+
color: var(--polyx-fg);
|
|
317
|
+
box-shadow: 0 0 0 3px var(--polyx-ring);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.polyx-signin__reveal:disabled {
|
|
321
|
+
cursor: not-allowed;
|
|
322
|
+
opacity: 0.6;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.polyx-signin__reveal svg {
|
|
326
|
+
width: 1.125rem;
|
|
327
|
+
height: 1.125rem;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* --- Buttons ------------------------------------------------------------- */
|
|
331
|
+
|
|
332
|
+
.polyx-signin__submit,
|
|
333
|
+
.polyx-signin__tenant {
|
|
334
|
+
display: inline-flex;
|
|
335
|
+
align-items: center;
|
|
336
|
+
justify-content: center;
|
|
337
|
+
width: 100%;
|
|
338
|
+
min-height: 2.5rem;
|
|
339
|
+
padding: 0 1rem;
|
|
340
|
+
font: inherit;
|
|
341
|
+
font-size: 0.875rem;
|
|
342
|
+
font-weight: 500;
|
|
343
|
+
color: var(--polyx-brand-fg);
|
|
344
|
+
background: var(--polyx-brand);
|
|
345
|
+
border: 1px solid transparent;
|
|
346
|
+
border-radius: var(--polyx-radius-sm);
|
|
347
|
+
cursor: pointer;
|
|
348
|
+
transition: background-color 0.15s ease;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.polyx-signin__submit:hover:not(:disabled),
|
|
352
|
+
.polyx-signin__tenant:hover:not(:disabled) {
|
|
353
|
+
background: var(--polyx-brand-hover);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.polyx-signin__submit:focus-visible,
|
|
357
|
+
.polyx-signin__tenant:focus-visible {
|
|
358
|
+
outline: none;
|
|
359
|
+
box-shadow: 0 0 0 3px var(--polyx-ring);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.polyx-signin__submit:disabled,
|
|
363
|
+
.polyx-signin__tenant:disabled {
|
|
364
|
+
opacity: 0.6;
|
|
365
|
+
cursor: not-allowed;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/* --- Error --------------------------------------------------------------- */
|
|
369
|
+
|
|
370
|
+
.polyx-signin__error {
|
|
371
|
+
margin: 0;
|
|
372
|
+
padding: 0.625rem 0.75rem;
|
|
373
|
+
font-size: 0.8125rem;
|
|
374
|
+
color: var(--polyx-danger);
|
|
375
|
+
background: var(--polyx-danger-bg);
|
|
376
|
+
border: 1px solid color-mix(in srgb, var(--polyx-danger) 30%, transparent);
|
|
377
|
+
border-radius: var(--polyx-radius-sm);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/* --- Footer -------------------------------------------------------------- */
|
|
381
|
+
|
|
382
|
+
.polyx-signin__footer {
|
|
383
|
+
display: flex;
|
|
384
|
+
align-items: center;
|
|
385
|
+
justify-content: center;
|
|
386
|
+
gap: 0.375rem;
|
|
387
|
+
margin-top: 1.5rem;
|
|
388
|
+
font-size: 0.75rem;
|
|
389
|
+
color: var(--polyx-muted-fg);
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.polyx-signin__shield {
|
|
393
|
+
flex: none;
|
|
394
|
+
width: 0.875rem;
|
|
395
|
+
height: 0.875rem;
|
|
396
|
+
opacity: 0.85;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
/* "Forgot password?" link under the sign-in password field. */
|
|
400
|
+
.polyx-signin__forgot {
|
|
401
|
+
display: flex;
|
|
402
|
+
justify-content: flex-end;
|
|
403
|
+
margin-top: -0.5rem;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
/* --- Recovery confirmation states (ForgotPassword / ResetPassword) ------- */
|
|
407
|
+
|
|
408
|
+
.polyx-signin__header--center {
|
|
409
|
+
align-items: center;
|
|
410
|
+
text-align: center;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.polyx-signin__status-icon {
|
|
414
|
+
display: inline-flex;
|
|
415
|
+
align-items: center;
|
|
416
|
+
justify-content: center;
|
|
417
|
+
width: 3rem;
|
|
418
|
+
height: 3rem;
|
|
419
|
+
margin-bottom: 0.25rem;
|
|
420
|
+
border-radius: 999px;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.polyx-signin__status-icon svg {
|
|
424
|
+
width: 1.5rem;
|
|
425
|
+
height: 1.5rem;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.polyx-signin__status-icon--brand {
|
|
429
|
+
color: var(--polyx-brand);
|
|
430
|
+
background: color-mix(in srgb, var(--polyx-brand) 12%, transparent);
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.polyx-signin__status-icon--danger {
|
|
434
|
+
color: var(--polyx-danger);
|
|
435
|
+
background: var(--polyx-danger-bg);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
/* The entered email, emphasized inside the confirmation copy. */
|
|
439
|
+
.polyx-signin__email {
|
|
440
|
+
color: var(--polyx-fg);
|
|
441
|
+
font-weight: 600;
|
|
442
|
+
word-break: break-all;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
/* Secondary text-link actions under a confirmation screen — quieter than the CTA. */
|
|
446
|
+
.polyx-signin__actions {
|
|
447
|
+
display: flex;
|
|
448
|
+
flex-direction: column;
|
|
449
|
+
align-items: center;
|
|
450
|
+
gap: 0.75rem;
|
|
451
|
+
margin-top: 1.5rem;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.polyx-signin__link {
|
|
455
|
+
padding: 0;
|
|
456
|
+
font: inherit;
|
|
457
|
+
font-size: 0.875rem;
|
|
458
|
+
font-weight: 500;
|
|
459
|
+
color: var(--polyx-brand);
|
|
460
|
+
background: none;
|
|
461
|
+
border: none;
|
|
462
|
+
cursor: pointer;
|
|
463
|
+
text-decoration: none;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.polyx-signin__link:hover {
|
|
467
|
+
color: var(--polyx-brand-hover);
|
|
468
|
+
text-decoration: underline;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.polyx-signin__link:focus-visible {
|
|
472
|
+
outline: none;
|
|
473
|
+
border-radius: 2px;
|
|
474
|
+
box-shadow: 0 0 0 3px var(--polyx-ring);
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
/* --- Workspace picker ---------------------------------------------------- */
|
|
478
|
+
|
|
479
|
+
.polyx-signin__tenants {
|
|
480
|
+
display: flex;
|
|
481
|
+
flex-direction: column;
|
|
482
|
+
gap: 0.625rem;
|
|
483
|
+
margin: 0;
|
|
484
|
+
padding: 0;
|
|
485
|
+
list-style: none;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
/* The picker's buttons read as choices, not as the primary CTA. */
|
|
489
|
+
.polyx-signin__tenant {
|
|
490
|
+
justify-content: flex-start;
|
|
491
|
+
color: var(--polyx-fg);
|
|
492
|
+
background: var(--polyx-input-bg);
|
|
493
|
+
border-color: var(--polyx-border);
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.polyx-signin__tenant:hover:not(:disabled) {
|
|
497
|
+
background: var(--polyx-input-bg);
|
|
498
|
+
border-color: var(--polyx-brand);
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
/* --- User button --------------------------------------------------------- */
|
|
502
|
+
|
|
503
|
+
/* The root carries `polyx-signin` too, so the theme tokens above (and any consumer
|
|
504
|
+
override of them) reach this menu without a second declaration to keep in sync. */
|
|
505
|
+
|
|
506
|
+
.polyx-userbutton {
|
|
507
|
+
position: relative;
|
|
508
|
+
display: inline-block;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
.polyx-userbutton__trigger {
|
|
512
|
+
display: inline-flex;
|
|
513
|
+
align-items: center;
|
|
514
|
+
gap: 0.5rem;
|
|
515
|
+
padding: 0.125rem;
|
|
516
|
+
color: var(--polyx-fg);
|
|
517
|
+
background: none;
|
|
518
|
+
border: none;
|
|
519
|
+
border-radius: 999px;
|
|
520
|
+
cursor: pointer;
|
|
521
|
+
font: inherit;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
.polyx-userbutton__trigger:focus-visible {
|
|
525
|
+
outline: none;
|
|
526
|
+
box-shadow: 0 0 0 3px var(--polyx-ring);
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
.polyx-userbutton__trigger-name {
|
|
530
|
+
padding-right: 0.25rem;
|
|
531
|
+
font-size: 0.875rem;
|
|
532
|
+
font-weight: 500;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.polyx-userbutton__avatar {
|
|
536
|
+
display: inline-flex;
|
|
537
|
+
flex: none;
|
|
538
|
+
align-items: center;
|
|
539
|
+
justify-content: center;
|
|
540
|
+
overflow: hidden;
|
|
541
|
+
border-radius: 999px;
|
|
542
|
+
background: color-mix(in srgb, var(--polyx-brand) 12%, transparent);
|
|
543
|
+
color: var(--polyx-brand);
|
|
544
|
+
font-size: 0.75rem;
|
|
545
|
+
font-weight: 600;
|
|
546
|
+
letter-spacing: 0.02em;
|
|
547
|
+
object-fit: cover;
|
|
548
|
+
user-select: none;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.polyx-userbutton__menu {
|
|
552
|
+
position: absolute;
|
|
553
|
+
top: calc(100% + 0.5rem);
|
|
554
|
+
right: 0;
|
|
555
|
+
z-index: 50;
|
|
556
|
+
min-width: 15rem;
|
|
557
|
+
padding: 0.375rem;
|
|
558
|
+
background: var(--polyx-bg);
|
|
559
|
+
border: 1px solid var(--polyx-border);
|
|
560
|
+
border-radius: var(--polyx-radius);
|
|
561
|
+
box-shadow: var(--polyx-shadow);
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
.polyx-userbutton__identity {
|
|
565
|
+
display: flex;
|
|
566
|
+
align-items: center;
|
|
567
|
+
gap: 0.625rem;
|
|
568
|
+
padding: 0.5rem 0.625rem 0.625rem;
|
|
569
|
+
border-bottom: 1px solid var(--polyx-border);
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
.polyx-userbutton__identity-text {
|
|
573
|
+
display: flex;
|
|
574
|
+
min-width: 0;
|
|
575
|
+
flex-direction: column;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
/* Names and emails are user data: let them truncate rather than stretch the menu. */
|
|
579
|
+
.polyx-userbutton__name,
|
|
580
|
+
.polyx-userbutton__email {
|
|
581
|
+
overflow: hidden;
|
|
582
|
+
text-overflow: ellipsis;
|
|
583
|
+
white-space: nowrap;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.polyx-userbutton__name {
|
|
587
|
+
font-size: 0.875rem;
|
|
588
|
+
font-weight: 600;
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.polyx-userbutton__email {
|
|
592
|
+
font-size: 0.75rem;
|
|
593
|
+
color: var(--polyx-muted-fg);
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.polyx-userbutton__items {
|
|
597
|
+
display: flex;
|
|
598
|
+
flex-direction: column;
|
|
599
|
+
margin: 0.375rem 0 0;
|
|
600
|
+
padding: 0;
|
|
601
|
+
list-style: none;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
.polyx-userbutton__item {
|
|
605
|
+
display: flex;
|
|
606
|
+
width: 100%;
|
|
607
|
+
align-items: center;
|
|
608
|
+
gap: 0.5rem;
|
|
609
|
+
padding: 0.5rem 0.625rem;
|
|
610
|
+
color: var(--polyx-fg);
|
|
611
|
+
background: none;
|
|
612
|
+
border: none;
|
|
613
|
+
border-radius: var(--polyx-radius-sm);
|
|
614
|
+
cursor: pointer;
|
|
615
|
+
font: inherit;
|
|
616
|
+
font-size: 0.875rem;
|
|
617
|
+
text-align: left;
|
|
618
|
+
text-decoration: none;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.polyx-userbutton__item:hover {
|
|
622
|
+
background: color-mix(in srgb, var(--polyx-fg) 6%, transparent);
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.polyx-userbutton__item:focus-visible {
|
|
626
|
+
outline: none;
|
|
627
|
+
box-shadow: 0 0 0 2px var(--polyx-ring);
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.polyx-userbutton__icon {
|
|
631
|
+
flex: none;
|
|
632
|
+
width: 1rem;
|
|
633
|
+
height: 1rem;
|
|
634
|
+
color: var(--polyx-muted-fg);
|
|
635
|
+
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@poly-x/next",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.10",
|
|
4
4
|
"description": "PolyX SDK for Next.js App Router - components plus server helpers",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"sideEffects":
|
|
7
|
+
"sideEffects": [
|
|
8
|
+
"**/*.css"
|
|
9
|
+
],
|
|
8
10
|
"files": [
|
|
9
11
|
"dist"
|
|
10
12
|
],
|
|
@@ -38,14 +40,15 @@
|
|
|
38
40
|
"types": "./dist/proxy.d.cts",
|
|
39
41
|
"default": "./dist/proxy.cjs"
|
|
40
42
|
}
|
|
41
|
-
}
|
|
43
|
+
},
|
|
44
|
+
"./styles.css": "./dist/styles.css"
|
|
42
45
|
},
|
|
43
46
|
"main": "./dist/index.cjs",
|
|
44
47
|
"module": "./dist/index.mjs",
|
|
45
48
|
"types": "./dist/index.d.cts",
|
|
46
49
|
"dependencies": {
|
|
47
|
-
"@poly-x/core": "0.1.0-alpha.
|
|
48
|
-
"@poly-x/react": "0.1.0-alpha.
|
|
50
|
+
"@poly-x/core": "0.1.0-alpha.10",
|
|
51
|
+
"@poly-x/react": "0.1.0-alpha.10"
|
|
49
52
|
},
|
|
50
53
|
"peerDependencies": {
|
|
51
54
|
"next": ">=14",
|
|
@@ -68,7 +71,7 @@
|
|
|
68
71
|
"react-dom": "^19.2.7"
|
|
69
72
|
},
|
|
70
73
|
"scripts": {
|
|
71
|
-
"build": "tsdown",
|
|
74
|
+
"build": "tsdown && node scripts/copy-styles.mjs",
|
|
72
75
|
"test": "vitest run",
|
|
73
76
|
"lint": "eslint src"
|
|
74
77
|
}
|