@cofhe/react 0.4.0 → 0.5.1

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.
Files changed (11) hide show
  1. package/README.md +12 -13
  2. package/dist/index.cjs +2832 -1815
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +173 -154
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.d.cts +187 -62
  7. package/dist/index.d.ts +187 -62
  8. package/dist/index.js +2488 -1465
  9. package/dist/index.js.map +1 -1
  10. package/dist/styles.css +163 -144
  11. package/package.json +34 -36
package/dist/index.css CHANGED
@@ -1,134 +1,134 @@
1
1
  /* src/styles.css */
2
- .fnx-text-primary {
3
- color: var(--fnx-text-primary);
2
+ .cofhe-text-primary {
3
+ color: var(--cofhe-text-primary);
4
4
  }
5
- .fnx-panel {
6
- background-color: var(--fnx-bg-primary);
7
- border: 1px solid var(--fnx-border-color);
8
- border-radius: var(--fnx-border-radius);
9
- box-shadow: var(--fnx-content-shadow);
5
+ .cofhe-panel {
6
+ background-color: var(--cofhe-bg-primary);
7
+ border: 1px solid var(--cofhe-border-color);
8
+ border-radius: var(--cofhe-border-radius);
9
+ box-shadow: var(--cofhe-content-shadow);
10
10
  }
11
- .fnx-floating-icon {
11
+ .cofhe-floating-icon {
12
12
  outline: none !important;
13
13
  position: relative;
14
14
  z-index: 1;
15
- color: var(--fnx-text-primary);
15
+ color: var(--cofhe-text-primary);
16
16
  }
17
- .fnx-card-bg {
18
- background-color: var(--fnx-card-bg);
17
+ .cofhe-card-bg {
18
+ background-color: var(--cofhe-card-bg);
19
19
  }
20
- .fnx-card-border {
21
- border-left: 1px solid var(--fnx-card-border);
22
- border-bottom: 1px solid var(--fnx-card-border);
20
+ .cofhe-card-border {
21
+ border-left: 1px solid var(--cofhe-card-border);
22
+ border-bottom: 1px solid var(--cofhe-card-border);
23
23
  border-top: none;
24
24
  border-right: none;
25
25
  }
26
- .fnx-icon-bg {
27
- background-color: var(--fnx-icon-bg);
26
+ .cofhe-icon-bg {
27
+ background-color: var(--cofhe-icon-bg);
28
28
  }
29
- .fnx-nav-button {
30
- background-color: var(--fnx-button-bg);
31
- color: var(--fnx-button-default-text);
32
- font-weight: var(--fnx-button-default-font-weight);
33
- border: 1px solid var(--fnx-button-default-border);
29
+ .cofhe-nav-button {
30
+ background-color: var(--cofhe-button-bg);
31
+ color: var(--cofhe-button-default-text);
32
+ font-weight: var(--cofhe-button-default-font-weight);
33
+ border: 1px solid var(--cofhe-button-default-border);
34
34
  transition:
35
- background-color var(--fnx-transition-duration-fast) ease-in-out,
36
- color var(--fnx-transition-duration-fast) ease-in-out,
37
- border-color var(--fnx-transition-duration-fast) ease-in-out;
38
- }
39
- .fnx-nav-button:hover {
40
- background-color: var(--fnx-button-hover-bg);
41
- }
42
- .fnx-nav-button-active {
43
- background-color: var(--fnx-button-hover-bg);
44
- color: var(--fnx-button-hover-text);
45
- }
46
- .fnx-max-button {
47
- background-color: var(--fnx-button-bg);
48
- color: var(--fnx-button-default-text);
49
- font-weight: var(--fnx-button-default-font-weight);
50
- border: 1px solid var(--fnx-button-default-border);
35
+ background-color var(--cofhe-transition-duration-fast) ease-in-out,
36
+ color var(--cofhe-transition-duration-fast) ease-in-out,
37
+ border-color var(--cofhe-transition-duration-fast) ease-in-out;
38
+ }
39
+ .cofhe-nav-button:hover {
40
+ background-color: var(--cofhe-button-hover-bg);
41
+ }
42
+ .cofhe-nav-button-active {
43
+ background-color: var(--cofhe-button-hover-bg);
44
+ color: var(--cofhe-button-hover-text);
45
+ }
46
+ .cofhe-max-button {
47
+ background-color: var(--cofhe-button-bg);
48
+ color: var(--cofhe-button-default-text);
49
+ font-weight: var(--cofhe-button-default-font-weight);
50
+ border: 1px solid var(--cofhe-button-default-border);
51
51
  transition:
52
- background-color var(--fnx-transition-duration-fast) ease-in-out,
53
- color var(--fnx-transition-duration-fast) ease-in-out,
54
- border-color var(--fnx-transition-duration-fast) ease-in-out;
55
- }
56
- .fnx-max-button:hover {
57
- background-color: var(--fnx-button-hover-bg);
58
- color: var(--fnx-button-hover-text);
59
- }
60
- .fnx-button {
61
- color: var(--fnx-button-default-text);
62
- font-weight: var(--fnx-button-default-font-weight);
63
- border: 1px solid var(--fnx-button-default-border);
52
+ background-color var(--cofhe-transition-duration-fast) ease-in-out,
53
+ color var(--cofhe-transition-duration-fast) ease-in-out,
54
+ border-color var(--cofhe-transition-duration-fast) ease-in-out;
55
+ }
56
+ .cofhe-max-button:hover {
57
+ background-color: var(--cofhe-button-hover-bg);
58
+ color: var(--cofhe-button-hover-text);
59
+ }
60
+ .cofhe-button {
61
+ color: var(--cofhe-button-default-text);
62
+ font-weight: var(--cofhe-button-default-font-weight);
63
+ border: 1px solid var(--cofhe-button-default-border);
64
64
  transition:
65
- background-color var(--fnx-transition-duration-fast) ease-in-out,
66
- color var(--fnx-transition-duration-fast) ease-in-out,
67
- border-color var(--fnx-transition-duration-fast) ease-in-out;
68
- }
69
- .fnx-send-button {
70
- color: var(--fnx-button-default-text);
71
- font-weight: var(--fnx-button-default-font-weight);
72
- border: 1px solid var(--fnx-button-default-border);
65
+ background-color var(--cofhe-transition-duration-fast) ease-in-out,
66
+ color var(--cofhe-transition-duration-fast) ease-in-out,
67
+ border-color var(--cofhe-transition-duration-fast) ease-in-out;
68
+ }
69
+ .cofhe-send-button {
70
+ color: var(--cofhe-button-default-text);
71
+ font-weight: var(--cofhe-button-default-font-weight);
72
+ border: 1px solid var(--cofhe-button-default-border);
73
73
  transition:
74
- background-color var(--fnx-transition-duration-fast) ease-in-out,
75
- color var(--fnx-transition-duration-fast) ease-in-out,
76
- border-color var(--fnx-transition-duration-fast) ease-in-out;
74
+ background-color var(--cofhe-transition-duration-fast) ease-in-out,
75
+ color var(--cofhe-transition-duration-fast) ease-in-out,
76
+ border-color var(--cofhe-transition-duration-fast) ease-in-out;
77
77
  }
78
- .fnx-send-button-enabled {
79
- background-color: var(--fnx-send-button-enabled-bg);
80
- color: var(--fnx-button-default-text);
78
+ .cofhe-send-button-enabled {
79
+ background-color: var(--cofhe-send-button-enabled-bg);
80
+ color: var(--cofhe-button-default-text);
81
81
  }
82
- .fnx-send-button-enabled:hover {
83
- background-color: var(--fnx-send-button-enabled-hover-bg);
84
- color: var(--fnx-button-default-text);
82
+ .cofhe-send-button-enabled:hover {
83
+ background-color: var(--cofhe-send-button-enabled-hover-bg);
84
+ color: var(--cofhe-button-default-text);
85
85
  }
86
- .fnx-send-button-disabled {
87
- background-color: var(--fnx-send-button-disabled-bg);
88
- color: var(--fnx-send-button-disabled-text);
86
+ .cofhe-send-button-disabled {
87
+ background-color: var(--cofhe-send-button-disabled-bg);
88
+ color: var(--cofhe-send-button-disabled-text);
89
89
  cursor: not-allowed;
90
90
  }
91
- .fnx-dropdown-bg {
92
- background-color: var(--fnx-dropdown-bg);
91
+ .cofhe-dropdown-bg {
92
+ background-color: var(--cofhe-dropdown-bg);
93
93
  }
94
- .fnx-dropdown-border {
95
- border-color: var(--fnx-dropdown-border);
94
+ .cofhe-dropdown-border {
95
+ border-color: var(--cofhe-dropdown-border);
96
96
  }
97
- .fnx-dropdown-hover:hover,
98
- .fnx-dropdown-hover:focus {
99
- background-color: var(--fnx-dropdown-hover-bg);
97
+ .cofhe-dropdown-hover:hover,
98
+ .cofhe-dropdown-hover:focus {
99
+ background-color: var(--cofhe-dropdown-hover-bg);
100
100
  }
101
- .fnx-hover-overlay:hover {
102
- background-color: var(--fnx-hover-overlay);
101
+ .cofhe-hover-overlay:hover {
102
+ background-color: var(--cofhe-hover-overlay);
103
103
  }
104
- .fnx-positive-change {
105
- color: var(--fnx-positive-change);
104
+ .cofhe-positive-change {
105
+ color: var(--cofhe-positive-change);
106
106
  }
107
- .fnx-token-list-container {
107
+ .cofhe-token-list-container {
108
108
  display: flex;
109
109
  flex-direction: column;
110
110
  gap: 0.5rem;
111
111
  padding: 0.25rem;
112
112
  }
113
- .fnx-loading-dots {
113
+ .cofhe-loading-dots {
114
114
  display: inline-flex;
115
115
  align-items: center;
116
116
  gap: 0.125rem;
117
117
  }
118
- .fnx-loading-dots span {
118
+ .cofhe-loading-dots span {
119
119
  display: inline-block;
120
- animation: fnx-dot-bounce 1.4s ease-in-out infinite;
120
+ animation: cofhe-dot-bounce 1.4s ease-in-out infinite;
121
121
  }
122
- .fnx-loading-dots span:nth-child(1) {
122
+ .cofhe-loading-dots span:nth-child(1) {
123
123
  animation-delay: 0s;
124
124
  }
125
- .fnx-loading-dots span:nth-child(2) {
125
+ .cofhe-loading-dots span:nth-child(2) {
126
126
  animation-delay: 0.2s;
127
127
  }
128
- .fnx-loading-dots span:nth-child(3) {
128
+ .cofhe-loading-dots span:nth-child(3) {
129
129
  animation-delay: 0.4s;
130
130
  }
131
- @keyframes fnx-dot-bounce {
131
+ @keyframes cofhe-dot-bounce {
132
132
  0%, 60%, 100% {
133
133
  transform: translateY(0);
134
134
  opacity: 0.4;
@@ -471,72 +471,72 @@ video {
471
471
  [hidden]:where(:not([hidden=until-found])) {
472
472
  display: none;
473
473
  }
474
- .fnx-floating-button {
475
- --fnx-bg-primary: #ffffff;
476
- --fnx-bg-status: #FFF8E1;
477
- --fnx-text-primary: #000000;
478
- --fnx-border-color: #e2e8f0;
479
- --fnx-card-bg: #F5F5F5;
480
- --fnx-card-border: #4E4E4E;
481
- --fnx-icon-bg: #ffffff;
482
- --fnx-button-bg: #ffffff;
483
- --fnx-button-hover-bg: #0AD9DC99;
484
- --fnx-button-hover-text: #ffffff;
485
- --fnx-dropdown-bg: #ffffff;
486
- --fnx-dropdown-border: #e5e7eb;
487
- --fnx-dropdown-hover-bg: #f3f4f6;
488
- --fnx-hover-overlay: rgba(255, 255, 255, 0.1);
489
- --fnx-positive-change: #16a34a;
490
- --fnx-pattern-overlay: rgba(0, 0, 0, 0.02);
491
- --fnx-button-border: #08989A;
492
- --fnx-button-default-text: #00314E;
493
- --fnx-button-default-border: #5F6368;
494
- --fnx-button-default-font-weight: 500;
495
- --fnx-send-button-enabled-bg: #8DE8EF;
496
- --fnx-send-button-enabled-hover-bg: #80d4da;
497
- --fnx-send-button-enabled-text: #ffffff;
498
- --fnx-send-button-disabled-bg: #d1d5db;
499
- --fnx-send-button-disabled-text: #6b7280;
500
- --fnx-corner-accent-color: #0AD9DC;
501
- --fnx-corner-size: 10px;
502
- --fnx-content-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
503
- --fnx-border-radius: 0x;
504
- --fnx-token-list-max-height: 250px;
505
- --fnx-transition-duration: 300ms;
506
- --fnx-transition-duration-fast: 200ms;
507
- --fnx-transition-duration-content: 150ms;
474
+ .cofhe-floating-button {
475
+ --cofhe-bg-primary: #ffffff;
476
+ --cofhe-bg-status: #FFF8E1;
477
+ --cofhe-text-primary: #000000;
478
+ --cofhe-border-color: #e2e8f0;
479
+ --cofhe-card-bg: #F5F5F5;
480
+ --cofhe-card-border: #4E4E4E;
481
+ --cofhe-icon-bg: #ffffff;
482
+ --cofhe-button-bg: #ffffff;
483
+ --cofhe-button-hover-bg: #0AD9DC99;
484
+ --cofhe-button-hover-text: #ffffff;
485
+ --cofhe-dropdown-bg: #ffffff;
486
+ --cofhe-dropdown-border: #e5e7eb;
487
+ --cofhe-dropdown-hover-bg: #f3f4f6;
488
+ --cofhe-hover-overlay: rgba(255, 255, 255, 0.1);
489
+ --cofhe-positive-change: #16a34a;
490
+ --cofhe-pattern-overlay: rgba(0, 0, 0, 0.02);
491
+ --cofhe-button-border: #08989A;
492
+ --cofhe-button-default-text: #00314E;
493
+ --cofhe-button-default-border: #5F6368;
494
+ --cofhe-button-default-font-weight: 500;
495
+ --cofhe-send-button-enabled-bg: #8DE8EF;
496
+ --cofhe-send-button-enabled-hover-bg: #80d4da;
497
+ --cofhe-send-button-enabled-text: #ffffff;
498
+ --cofhe-send-button-disabled-bg: #d1d5db;
499
+ --cofhe-send-button-disabled-text: #6b7280;
500
+ --cofhe-corner-accent-color: #0AD9DC;
501
+ --cofhe-corner-size: 10px;
502
+ --cofhe-content-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
503
+ --cofhe-border-radius: 0x;
504
+ --cofhe-token-list-max-height: 250px;
505
+ --cofhe-transition-duration: 300ms;
506
+ --cofhe-transition-duration-fast: 200ms;
507
+ --cofhe-transition-duration-content: 150ms;
508
508
  width: 380px;
509
509
  max-width: calc(100vw - 24px);
510
510
  }
511
511
  .dark {
512
- --fnx-bg-primary: #1a1a1a;
513
- --fnx-bg-status: #2d2d2d;
514
- --fnx-text-primary: #ffffff;
515
- --fnx-text-status: #e0e0e0;
516
- --fnx-border-color: rgba(255, 255, 255, 0.3);
517
- --fnx-card-bg: #333333;
518
- --fnx-card-border: #9E9E9E;
519
- --fnx-icon-bg: #374151;
520
- --fnx-button-bg: #595959;
521
- --fnx-button-hover-bg: #00ACC1;
522
- --fnx-button-hover-text: #ffffff;
523
- --fnx-dropdown-bg: #1f2937;
524
- --fnx-dropdown-border: #374151;
525
- --fnx-dropdown-hover-bg: #374151;
526
- --fnx-hover-overlay: rgba(255, 255, 255, 0.1);
527
- --fnx-positive-change: #4ade80;
528
- --fnx-pattern-overlay: rgba(255, 255, 255, 0.02);
529
- --fnx-button-border: #08989A;
530
- --fnx-button-default-text: #FFFFFF;
531
- --fnx-button-default-border: #5F6368;
532
- --fnx-button-default-font-weight: 500;
533
- --fnx-send-button-enabled-bg: #08989A;
534
- --fnx-send-button-enabled-hover-bg: #068285;
535
- --fnx-send-button-enabled-text: #ffffff;
536
- --fnx-send-button-disabled-bg: #374151;
537
- --fnx-send-button-disabled-text: #9ca3af;
538
- --fnx-corner-accent-color: #0AD9DC;
539
- --fnx-content-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
512
+ --cofhe-bg-primary: #1a1a1a;
513
+ --cofhe-bg-status: #2d2d2d;
514
+ --cofhe-text-primary: #ffffff;
515
+ --cofhe-text-status: #e0e0e0;
516
+ --cofhe-border-color: rgba(255, 255, 255, 0.3);
517
+ --cofhe-card-bg: #333333;
518
+ --cofhe-card-border: #9E9E9E;
519
+ --cofhe-icon-bg: #374151;
520
+ --cofhe-button-bg: #595959;
521
+ --cofhe-button-hover-bg: #00ACC1;
522
+ --cofhe-button-hover-text: #ffffff;
523
+ --cofhe-dropdown-bg: #1f2937;
524
+ --cofhe-dropdown-border: #374151;
525
+ --cofhe-dropdown-hover-bg: #374151;
526
+ --cofhe-hover-overlay: rgba(255, 255, 255, 0.1);
527
+ --cofhe-positive-change: #4ade80;
528
+ --cofhe-pattern-overlay: rgba(255, 255, 255, 0.02);
529
+ --cofhe-button-border: #08989A;
530
+ --cofhe-button-default-text: #FFFFFF;
531
+ --cofhe-button-default-border: #5F6368;
532
+ --cofhe-button-default-font-weight: 500;
533
+ --cofhe-send-button-enabled-bg: #08989A;
534
+ --cofhe-send-button-enabled-hover-bg: #068285;
535
+ --cofhe-send-button-enabled-text: #ffffff;
536
+ --cofhe-send-button-disabled-bg: #374151;
537
+ --cofhe-send-button-disabled-text: #9ca3af;
538
+ --cofhe-corner-accent-color: #0AD9DC;
539
+ --cofhe-content-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
540
540
  }
541
541
  .container {
542
542
  width: 100%;
@@ -741,6 +741,9 @@ video {
741
741
  .mt-3 {
742
742
  margin-top: 0.75rem;
743
743
  }
744
+ .mt-4 {
745
+ margin-top: 1rem;
746
+ }
744
747
  .mt-auto {
745
748
  margin-top: auto;
746
749
  }
@@ -856,6 +859,9 @@ video {
856
859
  .min-w-\[18px\] {
857
860
  min-width: 18px;
858
861
  }
862
+ .max-w-\[26rem\] {
863
+ max-width: 26rem;
864
+ }
859
865
  .max-w-full {
860
866
  max-width: 100%;
861
867
  }
@@ -1063,6 +1069,9 @@ video {
1063
1069
  .border-l {
1064
1070
  border-left-width: 1px;
1065
1071
  }
1072
+ .border-t {
1073
+ border-top-width: 1px;
1074
+ }
1066
1075
  .border-\[\#068571\] {
1067
1076
  --tw-border-opacity: 1;
1068
1077
  border-color: rgb(6 133 113 / var(--tw-border-opacity, 1));
@@ -1088,8 +1097,11 @@ video {
1088
1097
  --tw-border-opacity: 1;
1089
1098
  border-color: rgb(161 66 31 / var(--tw-border-opacity, 1));
1090
1099
  }
1091
- .border-\[var\(--fnx-button-default-border\)\] {
1092
- border-color: var(--fnx-button-default-border);
1100
+ .border-\[var\(--cofhe-border-color\)\] {
1101
+ border-color: var(--cofhe-border-color);
1102
+ }
1103
+ .border-\[var\(--cofhe-button-default-border\)\] {
1104
+ border-color: var(--cofhe-button-default-border);
1093
1105
  }
1094
1106
  .border-blue-200 {
1095
1107
  --tw-border-opacity: 1;
@@ -1365,6 +1377,9 @@ video {
1365
1377
  .pt-2 {
1366
1378
  padding-top: 0.5rem;
1367
1379
  }
1380
+ .pt-3 {
1381
+ padding-top: 0.75rem;
1382
+ }
1368
1383
  .text-left {
1369
1384
  text-align: left;
1370
1385
  }
@@ -1482,6 +1497,10 @@ video {
1482
1497
  --tw-text-opacity: 1;
1483
1498
  color: rgb(240 120 79 / var(--tw-text-opacity, 1));
1484
1499
  }
1500
+ .text-\[\#c2410c\] {
1501
+ --tw-text-opacity: 1;
1502
+ color: rgb(194 65 12 / var(--tw-text-opacity, 1));
1503
+ }
1485
1504
  .text-blue-500 {
1486
1505
  --tw-text-opacity: 1;
1487
1506
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -1605,8 +1624,8 @@ video {
1605
1624
  .outline-2 {
1606
1625
  outline-width: 2px;
1607
1626
  }
1608
- .outline-\[var\(--fnx-button-bg\)\] {
1609
- outline-color: var(--fnx-button-bg);
1627
+ .outline-\[var\(--cofhe-button-bg\)\] {
1628
+ outline-color: var(--cofhe-button-bg);
1610
1629
  }
1611
1630
  .\!filter {
1612
1631
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;