@insforge/nextjs 0.4.0

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/src/styles.css ADDED
@@ -0,0 +1,551 @@
1
+ /**
2
+ * InsForge Next.js Component Library Styles
3
+ * A standalone CSS file for auth components - no Tailwind required!
4
+ */
5
+
6
+ /* Font Face Declaration */
7
+ @font-face {
8
+ font-family: 'Manrope';
9
+ src: url('./fonts/Manrope-VariableFont_wght.ttf') format('truetype');
10
+ font-weight: 100 900;
11
+ font-style: normal;
12
+ font-display: swap;
13
+ }
14
+
15
+ /* CSS Variables */
16
+ :root {
17
+ --font-manrope: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
18
+ }
19
+
20
+ /* Reset and Base Styles */
21
+ .insforge-auth-container * {
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ /* Main Container - App handles layout, we just provide the card */
26
+ .insforge-auth-container {
27
+ width: 100%;
28
+ max-width: 400px;
29
+ background: white;
30
+ }
31
+
32
+ .insforge-branding {
33
+ padding: 8px 8px 16px 8px;
34
+ display: flex;
35
+ flex-direction: row;
36
+ justify-content: center;
37
+ align-items: center;
38
+ gap: 4px;
39
+ }
40
+
41
+ .insforge-branding-text {
42
+ color: var(--black, #000);
43
+ font-family: var(--font-manrope);
44
+ font-size: 12px;
45
+ font-style: normal;
46
+ font-weight: 400;
47
+ line-height: normal;
48
+ }
49
+
50
+ /* Form Card */
51
+ .insforge-auth-card {
52
+ width: 100%;
53
+ border-radius: 12px;
54
+ box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
55
+ }
56
+
57
+ .insforge-auth-content {
58
+ padding: 24px 24px 40px 24px;
59
+ display: flex;
60
+ flex-direction: column;
61
+ justify-content: center;
62
+ align-items: stretch;
63
+ gap: 24px;
64
+ }
65
+
66
+ /* Header */
67
+ .insforge-auth-header {
68
+ display: flex;
69
+ flex-direction: column;
70
+ justify-content: start;
71
+ align-items: start;
72
+ gap: 8px;
73
+ }
74
+
75
+ .insforge-auth-title {
76
+ color: #000;
77
+ font-family: Inter;
78
+ font-size: 32px;
79
+ font-style: normal;
80
+ font-weight: 400;
81
+ line-height: 48px;
82
+ }
83
+
84
+ .insforge-auth-subtitle {
85
+ color: #828282;
86
+ font-family: Inter;
87
+ font-size: 14px;
88
+ font-style: normal;
89
+ font-weight: 400;
90
+ line-height: 24px;
91
+ }
92
+
93
+ /* Error Banner */
94
+ .insforge-error-banner {
95
+ display: flex;
96
+ align-items: center;
97
+ gap: 0.75rem;
98
+ padding: 1rem;
99
+ margin-bottom: 1.5rem;
100
+ background-color: #fef2f2;
101
+ border: 1px solid #fecaca;
102
+ border-radius: 0.5rem;
103
+ color: #dc2626;
104
+ font-size: 0.875rem;
105
+ line-height: 1.25rem;
106
+ }
107
+
108
+ .insforge-error-icon {
109
+ flex-shrink: 0;
110
+ width: 1.25rem;
111
+ height: 1.25rem;
112
+ }
113
+
114
+ /* Form Elements */
115
+ .insforge-form {
116
+ display: flex;
117
+ flex-direction: column;
118
+ justify-content: center;
119
+ align-items: stretch;
120
+ gap: 24px;
121
+ }
122
+
123
+ .insforge-form-group {
124
+ display: flex;
125
+ flex-direction: column;
126
+ justify-content: center;
127
+ align-items: stretch;
128
+ gap: 4px;
129
+ }
130
+
131
+ .insforge-form-label-row {
132
+ display: flex;
133
+ justify-content: space-between;
134
+ align-items: center;
135
+ }
136
+
137
+ .insforge-form-label {
138
+ color: #000;
139
+ font-family: Inter;
140
+ font-size: 14px;
141
+ font-style: normal;
142
+ font-weight: 400;
143
+ line-height: 24px;
144
+ }
145
+
146
+ .insforge-form-link {
147
+ color: #828282;
148
+ text-align: right;
149
+ font-family: Inter;
150
+ font-size: 14px;
151
+ font-style: normal;
152
+ font-weight: 400;
153
+ line-height: 24px;
154
+ }
155
+
156
+ .insforge-form-link:hover {
157
+ color: #828282;
158
+ text-decoration: underline;
159
+ }
160
+
161
+ /* Input Container for Password (with icon) */
162
+ .insforge-input-wrapper {
163
+ position: relative;
164
+ }
165
+
166
+ .insforge-input {
167
+ width: 100%;
168
+ display: flex;
169
+ padding: 8px 8px 10px 12px;
170
+ align-items: center;
171
+ gap: 8px;
172
+ align-self: stretch;
173
+ border-radius: 4px;
174
+ border: 1px solid #BCBCBC;
175
+ background: #FFF;
176
+ font-family: Inter;
177
+ font-size: 16px;
178
+ font-style: normal;
179
+ font-weight: 400;
180
+ line-height: 20px;
181
+ }
182
+
183
+ .insforge-input::placeholder {
184
+ color: #A6A6A6;
185
+ }
186
+
187
+ .insforge-input:focus {
188
+ outline: none;
189
+ }
190
+
191
+ .insforge-input-with-icon {
192
+ padding-right: 3rem;
193
+ }
194
+
195
+ .insforge-input-icon-btn {
196
+ position: absolute;
197
+ right: 8px;
198
+ top: 50%;
199
+ transform: translateY(-50%);
200
+ background: transparent;
201
+ border: none;
202
+ color: #A6A6A6;
203
+ cursor: pointer;
204
+ transition: color 0.2s;
205
+ display: flex;
206
+ align-items: center;
207
+ justify-content: center;
208
+ }
209
+
210
+ .insforge-input-icon-btn:hover {
211
+ color: #6b7280;
212
+ }
213
+
214
+ /* Primary Button */
215
+ .insforge-btn-primary {
216
+ border-radius: 4px;
217
+ background: #000;
218
+ width: 100%;
219
+ display: flex;
220
+ padding: 12px 16px;
221
+ justify-content: center;
222
+ align-items: center;
223
+ gap: 10px;
224
+ align-self: stretch;
225
+ color: #FFF;
226
+ font-family: Manrope;
227
+ font-size: 16px;
228
+ font-style: normal;
229
+ font-weight: 600;
230
+ line-height: normal;
231
+ border: none;
232
+ cursor: pointer;
233
+ }
234
+
235
+ .insforge-btn-primary:hover {
236
+ background: #303030;
237
+ }
238
+
239
+ .insforge-btn-primary:disabled {
240
+ opacity: 0.5;
241
+ cursor: not-allowed;
242
+ }
243
+
244
+ .insforge-btn-primary .insforge-btn-loader {
245
+ display: none;
246
+ animation: insforge-spin 1s linear infinite;
247
+ }
248
+
249
+ .insforge-btn-primary[data-loading] .insforge-btn-loader {
250
+ display: block;
251
+ }
252
+
253
+ /* Text Link Section */
254
+ .insforge-text-center {
255
+ text-align: center;
256
+ margin: -12px 0 0 0;
257
+ color: #828282;
258
+ font-family: Inter;
259
+ font-size: 14px;
260
+ font-style: normal;
261
+ font-weight: 400;
262
+ line-height: 24px;
263
+ }
264
+
265
+ .insforge-link-primary {
266
+ color: #2563EB;
267
+ font-family: Inter;
268
+ font-size: 14px;
269
+ font-style: normal;
270
+ font-weight: 400;
271
+ line-height: 24px;
272
+ }
273
+
274
+ .insforge-link-primary:hover {
275
+ text-decoration: underline;
276
+ }
277
+
278
+ /* Divider */
279
+ .insforge-divider {
280
+ display: flex;
281
+ justify-content: center;
282
+ align-items: center;
283
+ gap: 24px;
284
+ align-self: stretch;
285
+ }
286
+
287
+ .insforge-divider::before,
288
+ .insforge-divider::after {
289
+ content: '';
290
+ flex: 1;
291
+ height: 1px;
292
+ background: #C6C6C6;
293
+ }
294
+
295
+ .insforge-divider-text {
296
+ color: #C6C6C6;
297
+ font-family: Manrope;
298
+ font-size: 14px;
299
+ font-style: normal;
300
+ font-weight: 600;
301
+ line-height: normal;
302
+ }
303
+
304
+ /* OAuth Section */
305
+ .insforge-oauth-container {
306
+ display: flex;
307
+ flex-direction: column;
308
+ align-items: stretch;
309
+ gap: 12px;
310
+ }
311
+
312
+ /* OAuth Button */
313
+ .insforge-oauth-btn {
314
+ display: flex;
315
+ height: 36px;
316
+ padding: 8px 12px;
317
+ flex-direction: row;
318
+ justify-content: center;
319
+ align-items: center;
320
+ gap: 12px;
321
+ border-radius: 6px;
322
+ border: 1px solid #E4E4E7;
323
+ background: #FFF;
324
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
325
+ color: #09090B;
326
+ text-align: center;
327
+ font-family: Inter;
328
+ font-size: 14px;
329
+ font-style: normal;
330
+ font-weight: 500;
331
+ line-height: 20px;
332
+ cursor: pointer;
333
+ }
334
+
335
+ .insforge-oauth-btn:hover {
336
+ background: #f9fafb;
337
+ border-color: #9ca3af;
338
+ }
339
+
340
+ .insforge-oauth-btn:disabled {
341
+ opacity: 0.6;
342
+ cursor: not-allowed;
343
+ }
344
+
345
+ .insforge-oauth-icon {
346
+ display: flex;
347
+ align-items: center;
348
+ justify-content: center;
349
+ flex-shrink: 0;
350
+ }
351
+
352
+ .insforge-oauth-loader {
353
+ display: none;
354
+ animation: insforge-spin 1s linear infinite;
355
+ }
356
+
357
+ .insforge-oauth-btn[data-loading] .insforge-oauth-icon {
358
+ display: none;
359
+ }
360
+
361
+ .insforge-oauth-btn[data-loading] .insforge-oauth-loader {
362
+ display: block;
363
+ }
364
+
365
+ /* Spin Animation */
366
+ @keyframes insforge-spin {
367
+ from {
368
+ transform: rotate(0deg);
369
+ }
370
+ to {
371
+ transform: rotate(360deg);
372
+ }
373
+ }
374
+
375
+ /* UserButton Styles */
376
+ .insforge-user-button-container {
377
+ position: relative;
378
+ display: inline-block;
379
+ }
380
+
381
+ .insforge-user-button {
382
+ padding: 0.25rem;
383
+ background: transparent;
384
+ border: none;
385
+ border-radius: 9999px;
386
+ cursor: pointer;
387
+ transition: all 0.2s;
388
+ display: flex;
389
+ align-items: center;
390
+ justify-content: center;
391
+ gap: 0.5rem;
392
+ }
393
+
394
+ .insforge-user-button:hover {
395
+ background: rgba(0, 0, 0, 0.05);
396
+ }
397
+
398
+ .insforge-user-button-detailed {
399
+ border-radius: 0.5rem;
400
+ padding: 0.5rem;
401
+ }
402
+
403
+ .insforge-user-button-info {
404
+ display: flex;
405
+ flex-direction: column;
406
+ align-items: flex-start;
407
+ gap: 0.125rem;
408
+ }
409
+
410
+ .insforge-user-button-name {
411
+ font-size: 0.875rem;
412
+ font-weight: 600;
413
+ color: #111827;
414
+ line-height: 1.25rem;
415
+ text-align: left;
416
+ }
417
+
418
+ .insforge-user-button-email {
419
+ font-size: 0.75rem;
420
+ color: #6b7280;
421
+ line-height: 1rem;
422
+ text-align: left;
423
+ }
424
+
425
+ .insforge-user-avatar {
426
+ width: 2.5rem;
427
+ height: 2.5rem;
428
+ border-radius: 9999px;
429
+ object-fit: cover;
430
+ }
431
+
432
+ .insforge-user-avatar-placeholder {
433
+ display: flex;
434
+ align-items: center;
435
+ justify-content: center;
436
+ width: 2.5rem;
437
+ height: 2.5rem;
438
+ background: #3b82f6;
439
+ color: white;
440
+ font-weight: 600;
441
+ font-size: 0.875rem;
442
+ border-radius: 9999px;
443
+ }
444
+
445
+ .insforge-user-dropdown {
446
+ position: absolute;
447
+ top: 100%;
448
+ right: 0;
449
+ margin-top: 0.5rem;
450
+ min-width: 10rem;
451
+ background: white;
452
+ border: 1px solid #e5e7eb;
453
+ border-radius: 0.5rem;
454
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
455
+ z-index: 50;
456
+ overflow: hidden;
457
+ padding: 0.25rem;
458
+ }
459
+
460
+ .insforge-sign-out-button {
461
+ display: flex;
462
+ align-items: center;
463
+ justify-content: flex-start;
464
+ gap: 0.5rem;
465
+ width: 100%;
466
+ padding: 0.5rem 0.75rem;
467
+ font-size: 0.875rem;
468
+ font-family: inherit;
469
+ color: #dc2626;
470
+ background: transparent;
471
+ border: none;
472
+ border-radius: 0.375rem;
473
+ cursor: pointer;
474
+ transition: background 0.2s;
475
+ text-align: left;
476
+ }
477
+
478
+ .insforge-sign-out-button:hover {
479
+ background: #fef2f2;
480
+ }
481
+
482
+ /* Loading State */
483
+ .insforge-loading {
484
+ display: flex;
485
+ justify-content: center;
486
+ align-items: center;
487
+ padding: 2rem;
488
+ color: #6b7280;
489
+ font-size: 0.875rem;
490
+ }
491
+
492
+ /* Password Strength Indicator */
493
+ .insforge-password-strength {
494
+ display: flex;
495
+ flex-direction: column;
496
+ gap: 0.25rem;
497
+ margin-top: 0.5rem;
498
+ }
499
+
500
+ .insforge-password-requirement {
501
+ height: 1.5rem;
502
+ display: flex;
503
+ align-items: center;
504
+ gap: 0.25rem;
505
+ }
506
+
507
+ .insforge-password-check {
508
+ width: 1.25rem;
509
+ height: 1.25rem;
510
+ border-radius: 9999px;
511
+ display: flex;
512
+ border-width: 2px;
513
+ border-style: solid;
514
+ align-items: center;
515
+ justify-content: center;
516
+ transition: all 0.2s ease-in-out;
517
+ background-color: transparent;
518
+ border-color: #a3a3a3;
519
+ flex-shrink: 0;
520
+ }
521
+
522
+ .insforge-password-check-valid {
523
+ background-color: #22c55e;
524
+ border-color: transparent;
525
+ }
526
+
527
+ .insforge-password-check-icon {
528
+ color: #fff;
529
+ stroke-width: 3;
530
+ }
531
+
532
+ .insforge-password-requirement-label {
533
+ color:#000;
534
+ font-family: Inter;
535
+ font-size: 14px;
536
+ font-style: normal;
537
+ font-weight: 400;
538
+ line-height: 24px;
539
+ }
540
+
541
+ /* Responsive adjustments */
542
+ @media (max-width: 640px) {
543
+ .insforge-auth-card {
544
+ padding: 2rem 1.5rem;
545
+ }
546
+
547
+ .insforge-auth-title {
548
+ font-size: 1.75rem;
549
+ }
550
+ }
551
+