primus-saas-react 1.0.5 → 1.0.7

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/index.js CHANGED
@@ -912,8 +912,8 @@ function usePrimusTheme() {
912
912
  const context = (0, import_react12.useContext)(PrimusThemeContext);
913
913
  if (!context) {
914
914
  return {
915
- theme: "dark",
916
- colors: themeColors.dark,
915
+ theme: "light",
916
+ colors: themeColors.light,
917
917
  setTheme: () => console.warn("PrimusThemeProvider not found"),
918
918
  toggleTheme: () => console.warn("PrimusThemeProvider not found")
919
919
  };
package/dist/index.mjs CHANGED
@@ -836,8 +836,8 @@ function usePrimusTheme() {
836
836
  const context = useContext(PrimusThemeContext);
837
837
  if (!context) {
838
838
  return {
839
- theme: "dark",
840
- colors: themeColors.dark,
839
+ theme: "light",
840
+ colors: themeColors.light,
841
841
  setTheme: () => console.warn("PrimusThemeProvider not found"),
842
842
  toggleTheme: () => console.warn("PrimusThemeProvider not found")
843
843
  };
package/dist/styles.css CHANGED
@@ -1,14 +1,21 @@
1
- /* Primus SaaS React - Bundled Styles */
2
- /* Import this file: import 'primus-saas-react/dist/styles.css' */
1
+ /* Primus SaaS React - Complete Bundled Styles */
2
+ /* Import: import 'primus-saas-react/dist/styles.css' */
3
3
 
4
- /* Base resets */
4
+ /* Reset */
5
5
  *,
6
6
  *::before,
7
7
  *::after {
8
8
  box-sizing: border-box;
9
+ margin: 0;
10
+ padding: 0;
9
11
  }
10
12
 
11
- /* Animation utilities */
13
+ html,
14
+ body {
15
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16
+ }
17
+
18
+ /* Animations */
12
19
  @keyframes pulse {
13
20
  50% {
14
21
  opacity: .5;
@@ -21,37 +28,6 @@
21
28
  }
22
29
  }
23
30
 
24
- @keyframes ping {
25
-
26
- 75%,
27
- 100% {
28
- transform: scale(2);
29
- opacity: 0;
30
- }
31
- }
32
-
33
- @keyframes fadeIn {
34
- from {
35
- opacity: 0;
36
- }
37
-
38
- to {
39
- opacity: 1;
40
- }
41
- }
42
-
43
- @keyframes slideIn {
44
- from {
45
- transform: translateY(-10px);
46
- opacity: 0;
47
- }
48
-
49
- to {
50
- transform: translateY(0);
51
- opacity: 1;
52
- }
53
- }
54
-
55
31
  .animate-pulse {
56
32
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
57
33
  }
@@ -60,11 +36,7 @@
60
36
  animation: spin 1s linear infinite;
61
37
  }
62
38
 
63
- .animate-ping {
64
- animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
65
- }
66
-
67
- /* Layout */
39
+ /* Layout - Critical */
68
40
  .min-h-screen {
69
41
  min-height: 100vh;
70
42
  }
@@ -77,18 +49,6 @@
77
49
  display: inline-flex;
78
50
  }
79
51
 
80
- .grid {
81
- display: grid;
82
- }
83
-
84
- .hidden {
85
- display: none;
86
- }
87
-
88
- .block {
89
- display: block;
90
- }
91
-
92
52
  .items-center {
93
53
  align-items: center;
94
54
  }
@@ -105,6 +65,16 @@
105
65
  flex-direction: column;
106
66
  }
107
67
 
68
+ /* Grid */
69
+ .grid {
70
+ display: grid;
71
+ }
72
+
73
+ .grid-cols-2 {
74
+ grid-template-columns: repeat(2, minmax(0, 1fr));
75
+ }
76
+
77
+ /* Gaps */
108
78
  .gap-2 {
109
79
  gap: 0.5rem;
110
80
  }
@@ -129,7 +99,7 @@
129
99
  margin-top: 1rem;
130
100
  }
131
101
 
132
- /* Sizing */
102
+ /* Width/Height */
133
103
  .w-full {
134
104
  width: 100%;
135
105
  }
@@ -154,15 +124,11 @@
154
124
  width: 3rem;
155
125
  }
156
126
 
157
- /* Spacing */
127
+ /* Padding */
158
128
  .p-2 {
159
129
  padding: 0.5rem;
160
130
  }
161
131
 
162
- .p-3 {
163
- padding: 0.75rem;
164
- }
165
-
166
132
  .p-4 {
167
133
  padding: 1rem;
168
134
  }
@@ -171,6 +137,11 @@
171
137
  padding: 2rem;
172
138
  }
173
139
 
140
+ .px-2 {
141
+ padding-left: 0.5rem;
142
+ padding-right: 0.5rem;
143
+ }
144
+
174
145
  .px-4 {
175
146
  padding-left: 1rem;
176
147
  padding-right: 1rem;
@@ -186,6 +157,16 @@
186
157
  padding-bottom: 0.625rem;
187
158
  }
188
159
 
160
+ /* Margin */
161
+ .m-0 {
162
+ margin: 0;
163
+ }
164
+
165
+ .mx-auto {
166
+ margin-left: auto;
167
+ margin-right: auto;
168
+ }
169
+
189
170
  .mb-4 {
190
171
  margin-bottom: 1rem;
191
172
  }
@@ -210,11 +191,6 @@
210
191
  margin-top: 1.5rem;
211
192
  }
212
193
 
213
- .mx-auto {
214
- margin-left: auto;
215
- margin-right: auto;
216
- }
217
-
218
194
  .ml-1 {
219
195
  margin-left: 0.25rem;
220
196
  }
@@ -224,7 +200,7 @@
224
200
  margin-bottom: 1.5rem;
225
201
  }
226
202
 
227
- /* Typography */
203
+ /* Text */
228
204
  .text-center {
229
205
  text-align: center;
230
206
  }
@@ -274,7 +250,7 @@
274
250
  text-transform: uppercase;
275
251
  }
276
252
 
277
- /* Colors */
253
+ /* Colors - Text */
278
254
  .text-white {
279
255
  color: #ffffff;
280
256
  }
@@ -307,6 +283,19 @@
307
283
  color: #2563eb;
308
284
  }
309
285
 
286
+ .text-slate-300 {
287
+ color: #cbd5e1;
288
+ }
289
+
290
+ .text-slate-400 {
291
+ color: #94a3b8;
292
+ }
293
+
294
+ .text-slate-600 {
295
+ color: #475569;
296
+ }
297
+
298
+ /* Colors - Background */
310
299
  .bg-white {
311
300
  background-color: #ffffff;
312
301
  }
@@ -319,10 +308,18 @@
319
308
  background-color: #f3f4f6;
320
309
  }
321
310
 
311
+ .bg-gray-800 {
312
+ background-color: #1f2937;
313
+ }
314
+
322
315
  .bg-gray-900 {
323
316
  background-color: #111827;
324
317
  }
325
318
 
319
+ .bg-gray-950 {
320
+ background-color: #030712;
321
+ }
322
+
326
323
  .bg-violet-600 {
327
324
  background-color: #7c3aed;
328
325
  }
@@ -335,6 +332,19 @@
335
332
  background-color: #000000;
336
333
  }
337
334
 
335
+ .bg-slate-700 {
336
+ background-color: #334155;
337
+ }
338
+
339
+ .bg-gray-900\/50 {
340
+ background-color: rgba(17, 24, 39, 0.5);
341
+ }
342
+
343
+ .bg-gray-950\/50 {
344
+ background-color: rgba(3, 7, 18, 0.5);
345
+ }
346
+
347
+ /* Gradients */
338
348
  .bg-gradient-to-br {
339
349
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
340
350
  }
@@ -345,29 +355,43 @@
345
355
 
346
356
  .from-gray-50 {
347
357
  --tw-gradient-from: #f9fafb;
348
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
349
- }
350
-
351
- .from-violet-600 {
352
- --tw-gradient-from: #7c3aed;
353
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
358
+ --tw-gradient-to: transparent;
359
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
354
360
  }
355
361
 
356
362
  .via-white {
357
- --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, transparent);
363
+ --tw-gradient-to: transparent;
364
+ --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to);
358
365
  }
359
366
 
360
367
  .to-violet-50 {
361
368
  --tw-gradient-to: #f5f3ff;
362
369
  }
363
370
 
371
+ .from-violet-600 {
372
+ --tw-gradient-from: #7c3aed;
373
+ --tw-gradient-to: transparent;
374
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
375
+ }
376
+
364
377
  .to-purple-600 {
365
378
  --tw-gradient-to: #9333ea;
366
379
  }
367
380
 
381
+ .from-blue-600 {
382
+ --tw-gradient-from: #2563eb;
383
+ --tw-gradient-to: transparent;
384
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
385
+ }
386
+
387
+ .to-indigo-600 {
388
+ --tw-gradient-to: #4f46e5;
389
+ }
390
+
368
391
  /* Borders */
369
392
  .border {
370
393
  border-width: 1px;
394
+ border-style: solid;
371
395
  }
372
396
 
373
397
  .border-t {
@@ -382,6 +406,18 @@
382
406
  border-color: #d1d5db;
383
407
  }
384
408
 
409
+ .border-slate-700 {
410
+ border-color: #334155;
411
+ }
412
+
413
+ .border-white\/10 {
414
+ border-color: rgba(255, 255, 255, 0.1);
415
+ }
416
+
417
+ .border-0 {
418
+ border-width: 0;
419
+ }
420
+
385
421
  .rounded {
386
422
  border-radius: 0.25rem;
387
423
  }
@@ -411,21 +447,34 @@
411
447
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
412
448
  }
413
449
 
450
+ .shadow-2xl {
451
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
452
+ }
453
+
414
454
  .shadow-violet-500\/20 {
415
455
  box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.2);
416
456
  }
417
457
 
458
+ .shadow-blue-500\/20 {
459
+ box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2);
460
+ }
461
+
418
462
  /* Effects */
419
463
  .backdrop-blur-xl {
420
464
  backdrop-filter: blur(24px);
465
+ -webkit-backdrop-filter: blur(24px);
466
+ }
467
+
468
+ .opacity-50 {
469
+ opacity: 0.5;
421
470
  }
422
471
 
423
472
  .opacity-90 {
424
473
  opacity: 0.9;
425
474
  }
426
475
 
427
- .opacity-50 {
428
- opacity: 0.5;
476
+ .overflow-hidden {
477
+ overflow: hidden;
429
478
  }
430
479
 
431
480
  /* Transitions */
@@ -460,6 +509,7 @@
460
509
  opacity: 0.5;
461
510
  }
462
511
 
512
+ /* Hover states */
463
513
  .hover\:bg-gray-50:hover {
464
514
  background-color: #f9fafb;
465
515
  }
@@ -468,6 +518,14 @@
468
518
  background-color: #f3f4f6;
469
519
  }
470
520
 
521
+ .hover\:bg-gray-800:hover {
522
+ background-color: #1f2937;
523
+ }
524
+
525
+ .hover\:bg-gray-900:hover {
526
+ background-color: #111827;
527
+ }
528
+
471
529
  .hover\:bg-violet-500:hover {
472
530
  background-color: #8b5cf6;
473
531
  }
@@ -476,23 +534,41 @@
476
534
  opacity: 0.9;
477
535
  }
478
536
 
537
+ /* Focus states */
479
538
  .focus\:outline-none:focus {
480
539
  outline: 2px solid transparent;
481
540
  outline-offset: 2px;
482
541
  }
483
542
 
484
543
  .focus\:ring-1:focus {
485
- box-shadow: 0 0 0 1px var(--tw-ring-color);
544
+ box-shadow: 0 0 0 1px var(--tw-ring-color, #7c3aed);
486
545
  }
487
546
 
488
547
  .focus\:ring-violet-500:focus {
489
548
  --tw-ring-color: #8b5cf6;
490
549
  }
491
550
 
551
+ .focus\:ring-blue-500:focus {
552
+ --tw-ring-color: #3b82f6;
553
+ }
554
+
492
555
  .focus\:border-violet-500:focus {
493
556
  border-color: #8b5cf6;
494
557
  }
495
558
 
559
+ .focus\:border-blue-500:focus {
560
+ border-color: #3b82f6;
561
+ }
562
+
563
+ /* Placeholder */
564
+ .placeholder\:text-gray-400::placeholder {
565
+ color: #9ca3af;
566
+ }
567
+
568
+ .placeholder\:text-slate-600::placeholder {
569
+ color: #475569;
570
+ }
571
+
496
572
  /* Position */
497
573
  .relative {
498
574
  position: relative;
@@ -513,56 +589,63 @@
513
589
  z-index: 10;
514
590
  }
515
591
 
516
- /* Placeholder */
517
- .placeholder\:text-gray-400::placeholder {
518
- color: #9ca3af;
592
+ .-top-\[20\%\] {
593
+ top: -20%;
519
594
  }
520
595
 
521
- /* Social button specific colors */
522
- .\!bg-\[\#0078D4\] {
523
- background-color: #0078D4 !important;
596
+ .-left-\[10\%\] {
597
+ left: -10%;
524
598
  }
525
599
 
526
- .\!bg-\[\#1877F2\] {
527
- background-color: #1877F2 !important;
600
+ .-bottom-\[20\%\] {
601
+ bottom: -20%;
528
602
  }
529
603
 
530
- .bg-\[\#0078D4\] {
531
- background-color: #0078D4;
604
+ .-right-\[10\%\] {
605
+ right: -10%;
532
606
  }
533
607
 
534
- .bg-\[\#006CBD\] {
535
- background-color: #006CBD;
608
+ .w-\[50\%\] {
609
+ width: 50%;
536
610
  }
537
611
 
538
- .bg-\[\#1877F2\] {
539
- background-color: #1877F2;
612
+ .h-\[50\%\] {
613
+ height: 50%;
540
614
  }
541
615
 
542
- .bg-\[\#166FE5\] {
543
- background-color: #166FE5;
616
+ .blur-\[120px\] {
617
+ filter: blur(120px);
544
618
  }
545
619
 
546
- .border-\[\#0078D4\] {
547
- border-color: #0078D4;
620
+ .bg-blue-600\/20 {
621
+ background-color: rgba(37, 99, 235, 0.2);
548
622
  }
549
623
 
550
- .border-\[\#1877F2\] {
551
- border-color: #1877F2;
624
+ .bg-purple-600\/20 {
625
+ background-color: rgba(147, 51, 234, 0.2);
626
+ }
627
+
628
+ /* Social button colors */
629
+ .bg-\[\#0078D4\] {
630
+ background-color: #0078D4;
552
631
  }
553
632
 
554
633
  .hover\:bg-\[\#006CBD\]:hover {
555
634
  background-color: #006CBD;
556
635
  }
557
636
 
558
- .hover\:bg-\[\#166FE5\]:hover {
559
- background-color: #166FE5;
637
+ .border-\[\#0078D4\] {
638
+ border-color: #0078D4;
560
639
  }
561
640
 
562
- .hover\:bg-gray-800:hover {
563
- background-color: #1f2937;
641
+ .bg-\[\#1877F2\] {
642
+ background-color: #1877F2;
564
643
  }
565
644
 
566
- .hover\:bg-gray-900:hover {
567
- background-color: #111827;
645
+ .hover\:bg-\[\#166FE5\]:hover {
646
+ background-color: #166FE5;
647
+ }
648
+
649
+ .border-\[\#1877F2\] {
650
+ border-color: #1877F2;
568
651
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "primus-saas-react",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "Premium React UI Elements for Primus SaaS Framework",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",