@svp-chain-sdk/ui 0.1.5 → 0.1.6
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/README.md +190 -300
- package/dist/components/notice-marquee/notice-marquee.d.ts +6 -4
- package/dist/index.d.ts +2 -0
- package/dist/index.js +783 -584
- package/dist/styles.css +188 -14
- package/dist/tailwind.d.ts +110 -0
- package/dist/tailwind.js +65 -10
- package/dist/wallet.d.ts +338 -0
- package/package.json +14 -6
package/dist/styles.css
CHANGED
|
@@ -1,17 +1,132 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
@theme { --color-background: oklch(0.99 0.01 220); --color-foreground: oklch(0.24 0.04 235); --color-primary: oklch(0.55 0.16 220); --color-primary-foreground: oklch(0.99 0.01 220); --color-secondary: oklch(0.93 0.04 205); --color-secondary-foreground: oklch(0.28 0.07 225); --color-accent: oklch(0.9 0.06 195); --color-accent-foreground: oklch(0.25 0.07 225); --color-destructive: oklch(0.58 0.2 25); --color-destructive-foreground: white; --color-input: oklch(0.86 0.03 220); --color-ring: oklch(0.6 0.14 195); }
|
|
3
3
|
|
|
4
|
+
/* Wallet controls */
|
|
5
|
+
.svp-header-wallet {
|
|
6
|
+
display: flex;
|
|
7
|
+
min-width: 0;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: flex-end;
|
|
10
|
+
font-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.svp-header-wallet,
|
|
14
|
+
.svp-header-wallet * {
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.svp-wallet-group {
|
|
19
|
+
display: flex;
|
|
20
|
+
min-width: 0;
|
|
21
|
+
align-items: center;
|
|
22
|
+
gap: 0.5rem;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.svp-wallet-btn,
|
|
26
|
+
.svp-network-btn {
|
|
27
|
+
flex: none;
|
|
28
|
+
height: 40px;
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
border-radius: 10px;
|
|
32
|
+
font-family: inherit;
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
transition: opacity 150ms, background 150ms;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.svp-wallet-btn {
|
|
38
|
+
display: inline-flex;
|
|
39
|
+
width: 140px;
|
|
40
|
+
align-items: center;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
border: 0;
|
|
43
|
+
padding: 0 1.2rem;
|
|
44
|
+
background: linear-gradient(90deg, #2563eb, #38bdf8);
|
|
45
|
+
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
|
|
46
|
+
color: #fff;
|
|
47
|
+
font-size: 0.875rem;
|
|
48
|
+
font-weight: 700;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.svp-wallet-btn:hover { opacity: 0.9; }
|
|
52
|
+
.svp-wallet-btn-error {
|
|
53
|
+
background: linear-gradient(90deg, #ef4444, #f87171);
|
|
54
|
+
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.svp-network-btn {
|
|
58
|
+
display: inline-flex;
|
|
59
|
+
width: 140px;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
gap: 0.4rem;
|
|
63
|
+
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
64
|
+
padding: 0 0.9rem;
|
|
65
|
+
background: #fff;
|
|
66
|
+
box-shadow: 0 2px 8px rgba(15, 30, 61, 0.08);
|
|
67
|
+
color: #0f1e3d;
|
|
68
|
+
font-size: 0.85rem;
|
|
69
|
+
font-weight: 600;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.svp-network-btn:hover { background: #f8fafc; }
|
|
73
|
+
|
|
74
|
+
@media (max-width: 640px) {
|
|
75
|
+
.svp-network-btn,
|
|
76
|
+
.svp-wallet-btn {
|
|
77
|
+
width: 93px;
|
|
78
|
+
height: 32px;
|
|
79
|
+
padding: 0 0.5rem;
|
|
80
|
+
font-size: 0.75rem;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.svp-wallet-btn-connect { width: 104px; }
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Notice */
|
|
4
87
|
@keyframes ui-notice-marquee-scroll {
|
|
5
88
|
from { transform: translateX(0); }
|
|
6
89
|
to { transform: translateX(-50%); }
|
|
7
90
|
}
|
|
8
91
|
|
|
9
92
|
.ui-notice-marquee {
|
|
10
|
-
|
|
93
|
+
position: fixed;
|
|
94
|
+
z-index: 2147483647;
|
|
95
|
+
top: 100px;
|
|
96
|
+
left: 50%;
|
|
97
|
+
display: grid;
|
|
98
|
+
width: min(42rem, calc(100vw - 32px));
|
|
99
|
+
min-height: 54px;
|
|
100
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
101
|
+
align-items: center;
|
|
102
|
+
gap: 12px;
|
|
103
|
+
padding: 8px 10px 8px 14px;
|
|
104
|
+
border: 1px solid rgba(37, 99, 235, 0.18);
|
|
105
|
+
border-radius: 14px;
|
|
11
106
|
overflow: hidden;
|
|
107
|
+
background: rgba(255, 255, 255, 0.98);
|
|
108
|
+
box-shadow: 0 16px 46px rgba(15, 30, 61, 0.2);
|
|
12
109
|
color: var(--color-foreground, #17334a);
|
|
13
|
-
font-size: 0.
|
|
14
|
-
line-height:
|
|
110
|
+
font-size: 0.8125rem;
|
|
111
|
+
line-height: 1.25rem;
|
|
112
|
+
transform: translateX(-50%);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.ui-notice-marquee__icon {
|
|
116
|
+
display: grid;
|
|
117
|
+
width: 28px;
|
|
118
|
+
height: 28px;
|
|
119
|
+
place-items: center;
|
|
120
|
+
border-radius: 9px;
|
|
121
|
+
background: linear-gradient(135deg, #2563eb, #38bdf8);
|
|
122
|
+
color: #fff;
|
|
123
|
+
font-size: 14px;
|
|
124
|
+
font-weight: 800;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.ui-notice-marquee__viewport {
|
|
128
|
+
min-width: 0;
|
|
129
|
+
overflow: hidden;
|
|
15
130
|
}
|
|
16
131
|
|
|
17
132
|
.ui-notice-marquee__track {
|
|
@@ -28,7 +143,7 @@
|
|
|
28
143
|
flex-shrink: 0;
|
|
29
144
|
align-items: center;
|
|
30
145
|
gap: 1rem;
|
|
31
|
-
padding-inline-end:
|
|
146
|
+
padding-inline-end: 2rem;
|
|
32
147
|
}
|
|
33
148
|
|
|
34
149
|
.ui-notice-marquee__item {
|
|
@@ -36,17 +151,76 @@
|
|
|
36
151
|
white-space: nowrap;
|
|
37
152
|
}
|
|
38
153
|
|
|
39
|
-
.ui-notice-marquee:hover .ui-notice-marquee__track {
|
|
40
|
-
|
|
154
|
+
.ui-notice-marquee:hover .ui-notice-marquee__track { animation-play-state: paused; }
|
|
155
|
+
|
|
156
|
+
.ui-notice-marquee__actions {
|
|
157
|
+
display: flex;
|
|
158
|
+
align-items: center;
|
|
159
|
+
gap: 4px;
|
|
41
160
|
}
|
|
42
161
|
|
|
43
|
-
|
|
162
|
+
.ui-notice-marquee__acknowledge,
|
|
163
|
+
.ui-notice-marquee__close {
|
|
164
|
+
height: 36px;
|
|
165
|
+
border: 0;
|
|
166
|
+
border-radius: 9px;
|
|
167
|
+
cursor: pointer;
|
|
168
|
+
font: inherit;
|
|
169
|
+
font-size: 13px;
|
|
170
|
+
font-weight: 700;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.ui-notice-marquee__acknowledge {
|
|
174
|
+
padding: 0 13px;
|
|
175
|
+
background: rgba(37, 99, 235, 0.1);
|
|
176
|
+
color: #2563eb;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.ui-notice-marquee__acknowledge:hover { background: rgba(37, 99, 235, 0.16); }
|
|
180
|
+
|
|
181
|
+
.ui-notice-marquee__close {
|
|
182
|
+
width: 36px;
|
|
183
|
+
padding: 0;
|
|
184
|
+
background: transparent;
|
|
185
|
+
color: rgba(15, 30, 61, 0.58);
|
|
186
|
+
font-size: 21px;
|
|
187
|
+
line-height: 1;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.ui-notice-marquee__close:hover {
|
|
191
|
+
background: rgba(15, 30, 61, 0.06);
|
|
192
|
+
color: #0f1e3d;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.ui-notice-marquee__acknowledge:focus-visible,
|
|
196
|
+
.ui-notice-marquee__close:focus-visible {
|
|
197
|
+
outline: 2px solid var(--color-ring, #2563eb);
|
|
198
|
+
outline-offset: 2px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@media (max-width: 560px) {
|
|
202
|
+
.ui-notice-marquee {
|
|
203
|
+
top: max(16px, env(safe-area-inset-top));
|
|
204
|
+
width: calc(100vw - 24px);
|
|
205
|
+
min-height: 0;
|
|
206
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
207
|
+
gap: 9px;
|
|
208
|
+
padding: 9px;
|
|
209
|
+
border-radius: 12px;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.ui-notice-marquee__icon { display: none; }
|
|
213
|
+
.ui-notice-marquee__item { white-space: normal; }
|
|
44
214
|
.ui-notice-marquee__track {
|
|
215
|
+
width: auto;
|
|
45
216
|
animation: none;
|
|
46
|
-
will-change: auto;
|
|
47
217
|
}
|
|
218
|
+
.ui-notice-marquee__group { padding: 0; }
|
|
219
|
+
.ui-notice-marquee__group[aria-hidden="true"] { display: none; }
|
|
220
|
+
.ui-notice-marquee__acknowledge { padding: 0 10px; }
|
|
48
221
|
}
|
|
49
222
|
|
|
223
|
+
/* Feedback */
|
|
50
224
|
.svp-contact-fab {
|
|
51
225
|
position: fixed;
|
|
52
226
|
right: 1.25rem;
|
|
@@ -72,10 +246,7 @@
|
|
|
72
246
|
box-shadow: 0 16px 40px rgba(37,99,235,0.5);
|
|
73
247
|
}
|
|
74
248
|
|
|
75
|
-
.svp-contact-fab:active {
|
|
76
|
-
transform: translateY(-50%) scale(0.97);
|
|
77
|
-
}
|
|
78
|
-
|
|
249
|
+
.svp-contact-fab:active { transform: translateY(-50%) scale(0.97); }
|
|
79
250
|
.svp-contact-fab:focus-visible {
|
|
80
251
|
outline: 2px solid var(--color-ring, #2563eb);
|
|
81
252
|
outline-offset: 3px;
|
|
@@ -103,7 +274,10 @@
|
|
|
103
274
|
}
|
|
104
275
|
|
|
105
276
|
@media (prefers-reduced-motion: reduce) {
|
|
106
|
-
.
|
|
107
|
-
|
|
277
|
+
.ui-notice-marquee__track {
|
|
278
|
+
animation: none;
|
|
279
|
+
will-change: auto;
|
|
108
280
|
}
|
|
281
|
+
|
|
282
|
+
.svp-contact-fab { transition: none; }
|
|
109
283
|
}
|
package/dist/tailwind.d.ts
CHANGED
|
@@ -47,11 +47,66 @@ export declare const uiNoticeMarqueeComponents: {
|
|
|
47
47
|
};
|
|
48
48
|
};
|
|
49
49
|
'.ui-notice-marquee': {
|
|
50
|
+
position: string;
|
|
51
|
+
'z-index': string;
|
|
52
|
+
top: string;
|
|
53
|
+
left: string;
|
|
54
|
+
display: string;
|
|
50
55
|
width: string;
|
|
56
|
+
'min-height': string;
|
|
57
|
+
'grid-template-columns': string;
|
|
58
|
+
'align-items': string;
|
|
59
|
+
gap: string;
|
|
60
|
+
padding: string;
|
|
61
|
+
border: string;
|
|
62
|
+
'border-radius': string;
|
|
51
63
|
overflow: string;
|
|
64
|
+
'background-color': string;
|
|
65
|
+
'box-shadow': string;
|
|
52
66
|
color: string;
|
|
53
67
|
'font-size': string;
|
|
54
68
|
'line-height': string;
|
|
69
|
+
transform: string;
|
|
70
|
+
};
|
|
71
|
+
'.ui-notice-marquee__icon': {
|
|
72
|
+
display: string;
|
|
73
|
+
width: string;
|
|
74
|
+
height: string;
|
|
75
|
+
'place-items': string;
|
|
76
|
+
'border-radius': string;
|
|
77
|
+
background: string;
|
|
78
|
+
color: string;
|
|
79
|
+
'font-size': string;
|
|
80
|
+
'font-weight': string;
|
|
81
|
+
};
|
|
82
|
+
'.ui-notice-marquee__viewport': {
|
|
83
|
+
'min-width': string;
|
|
84
|
+
overflow: string;
|
|
85
|
+
};
|
|
86
|
+
'.ui-notice-marquee__actions': {
|
|
87
|
+
display: string;
|
|
88
|
+
'align-items': string;
|
|
89
|
+
gap: string;
|
|
90
|
+
};
|
|
91
|
+
'.ui-notice-marquee__acknowledge, .ui-notice-marquee__close': {
|
|
92
|
+
height: string;
|
|
93
|
+
border: string;
|
|
94
|
+
'border-radius': string;
|
|
95
|
+
cursor: string;
|
|
96
|
+
'font-size': string;
|
|
97
|
+
'font-weight': string;
|
|
98
|
+
};
|
|
99
|
+
'.ui-notice-marquee__acknowledge': {
|
|
100
|
+
padding: string;
|
|
101
|
+
'background-color': string;
|
|
102
|
+
color: string;
|
|
103
|
+
};
|
|
104
|
+
'.ui-notice-marquee__close': {
|
|
105
|
+
width: string;
|
|
106
|
+
padding: string;
|
|
107
|
+
'background-color': string;
|
|
108
|
+
color: string;
|
|
109
|
+
'font-size': string;
|
|
55
110
|
};
|
|
56
111
|
'.ui-notice-marquee__track': {
|
|
57
112
|
display: string;
|
|
@@ -93,11 +148,66 @@ export declare const uiComponents: {
|
|
|
93
148
|
};
|
|
94
149
|
};
|
|
95
150
|
'.ui-notice-marquee': {
|
|
151
|
+
position: string;
|
|
152
|
+
'z-index': string;
|
|
153
|
+
top: string;
|
|
154
|
+
left: string;
|
|
155
|
+
display: string;
|
|
96
156
|
width: string;
|
|
157
|
+
'min-height': string;
|
|
158
|
+
'grid-template-columns': string;
|
|
159
|
+
'align-items': string;
|
|
160
|
+
gap: string;
|
|
161
|
+
padding: string;
|
|
162
|
+
border: string;
|
|
163
|
+
'border-radius': string;
|
|
97
164
|
overflow: string;
|
|
165
|
+
'background-color': string;
|
|
166
|
+
'box-shadow': string;
|
|
98
167
|
color: string;
|
|
99
168
|
'font-size': string;
|
|
100
169
|
'line-height': string;
|
|
170
|
+
transform: string;
|
|
171
|
+
};
|
|
172
|
+
'.ui-notice-marquee__icon': {
|
|
173
|
+
display: string;
|
|
174
|
+
width: string;
|
|
175
|
+
height: string;
|
|
176
|
+
'place-items': string;
|
|
177
|
+
'border-radius': string;
|
|
178
|
+
background: string;
|
|
179
|
+
color: string;
|
|
180
|
+
'font-size': string;
|
|
181
|
+
'font-weight': string;
|
|
182
|
+
};
|
|
183
|
+
'.ui-notice-marquee__viewport': {
|
|
184
|
+
'min-width': string;
|
|
185
|
+
overflow: string;
|
|
186
|
+
};
|
|
187
|
+
'.ui-notice-marquee__actions': {
|
|
188
|
+
display: string;
|
|
189
|
+
'align-items': string;
|
|
190
|
+
gap: string;
|
|
191
|
+
};
|
|
192
|
+
'.ui-notice-marquee__acknowledge, .ui-notice-marquee__close': {
|
|
193
|
+
height: string;
|
|
194
|
+
border: string;
|
|
195
|
+
'border-radius': string;
|
|
196
|
+
cursor: string;
|
|
197
|
+
'font-size': string;
|
|
198
|
+
'font-weight': string;
|
|
199
|
+
};
|
|
200
|
+
'.ui-notice-marquee__acknowledge': {
|
|
201
|
+
padding: string;
|
|
202
|
+
'background-color': string;
|
|
203
|
+
color: string;
|
|
204
|
+
};
|
|
205
|
+
'.ui-notice-marquee__close': {
|
|
206
|
+
width: string;
|
|
207
|
+
padding: string;
|
|
208
|
+
'background-color': string;
|
|
209
|
+
color: string;
|
|
210
|
+
'font-size': string;
|
|
101
211
|
};
|
|
102
212
|
'.ui-notice-marquee__track': {
|
|
103
213
|
display: string;
|
package/dist/tailwind.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
function
|
|
1
|
+
function n(e, r) {
|
|
2
2
|
return { handler: e, config: r };
|
|
3
3
|
}
|
|
4
|
-
|
|
5
|
-
function o(
|
|
6
|
-
return { handler: e(
|
|
4
|
+
n.withOptions = function(e, r = () => ({})) {
|
|
5
|
+
function o(i) {
|
|
6
|
+
return { handler: e(i), config: r(i) };
|
|
7
7
|
}
|
|
8
8
|
return o.__isOptionsFunction = !0, o;
|
|
9
9
|
};
|
|
10
|
-
var t =
|
|
10
|
+
var t = n;
|
|
11
11
|
const a = {
|
|
12
12
|
".ui-button": {
|
|
13
13
|
display: "inline-flex",
|
|
@@ -50,11 +50,66 @@ const a = {
|
|
|
50
50
|
to: { transform: "translateX(-50%)" }
|
|
51
51
|
},
|
|
52
52
|
".ui-notice-marquee": {
|
|
53
|
-
|
|
53
|
+
position: "fixed",
|
|
54
|
+
"z-index": "2147483647",
|
|
55
|
+
top: "100px",
|
|
56
|
+
left: "50%",
|
|
57
|
+
display: "grid",
|
|
58
|
+
width: "min(42rem, calc(100vw - 32px))",
|
|
59
|
+
"min-height": "54px",
|
|
60
|
+
"grid-template-columns": "auto minmax(0, 1fr) auto",
|
|
61
|
+
"align-items": "center",
|
|
62
|
+
gap: "0.75rem",
|
|
63
|
+
padding: "0.5rem 0.625rem 0.5rem 0.875rem",
|
|
64
|
+
border: "1px solid rgba(37, 99, 235, 0.18)",
|
|
65
|
+
"border-radius": "0.875rem",
|
|
54
66
|
overflow: "hidden",
|
|
67
|
+
"background-color": "rgba(255, 255, 255, 0.98)",
|
|
68
|
+
"box-shadow": "0 16px 46px rgba(15, 30, 61, 0.2)",
|
|
55
69
|
color: "var(--color-foreground, #17334a)",
|
|
56
|
-
"font-size": "0.
|
|
57
|
-
"line-height": "
|
|
70
|
+
"font-size": "0.8125rem",
|
|
71
|
+
"line-height": "1.25rem",
|
|
72
|
+
transform: "translateX(-50%)"
|
|
73
|
+
},
|
|
74
|
+
".ui-notice-marquee__icon": {
|
|
75
|
+
display: "grid",
|
|
76
|
+
width: "1.75rem",
|
|
77
|
+
height: "1.75rem",
|
|
78
|
+
"place-items": "center",
|
|
79
|
+
"border-radius": "0.5625rem",
|
|
80
|
+
background: "linear-gradient(135deg, #2563eb, #38bdf8)",
|
|
81
|
+
color: "white",
|
|
82
|
+
"font-size": "0.875rem",
|
|
83
|
+
"font-weight": "800"
|
|
84
|
+
},
|
|
85
|
+
".ui-notice-marquee__viewport": {
|
|
86
|
+
"min-width": "0",
|
|
87
|
+
overflow: "hidden"
|
|
88
|
+
},
|
|
89
|
+
".ui-notice-marquee__actions": {
|
|
90
|
+
display: "flex",
|
|
91
|
+
"align-items": "center",
|
|
92
|
+
gap: "0.25rem"
|
|
93
|
+
},
|
|
94
|
+
".ui-notice-marquee__acknowledge, .ui-notice-marquee__close": {
|
|
95
|
+
height: "2.25rem",
|
|
96
|
+
border: "0",
|
|
97
|
+
"border-radius": "0.5625rem",
|
|
98
|
+
cursor: "pointer",
|
|
99
|
+
"font-size": "0.8125rem",
|
|
100
|
+
"font-weight": "700"
|
|
101
|
+
},
|
|
102
|
+
".ui-notice-marquee__acknowledge": {
|
|
103
|
+
padding: "0 0.8125rem",
|
|
104
|
+
"background-color": "rgba(37, 99, 235, 0.1)",
|
|
105
|
+
color: "#2563eb"
|
|
106
|
+
},
|
|
107
|
+
".ui-notice-marquee__close": {
|
|
108
|
+
width: "2.25rem",
|
|
109
|
+
padding: "0",
|
|
110
|
+
"background-color": "transparent",
|
|
111
|
+
color: "rgba(15, 30, 61, 0.58)",
|
|
112
|
+
"font-size": "1.3125rem"
|
|
58
113
|
},
|
|
59
114
|
".ui-notice-marquee__track": {
|
|
60
115
|
display: "flex",
|
|
@@ -87,11 +142,11 @@ const a = {
|
|
|
87
142
|
}, u = {
|
|
88
143
|
...a,
|
|
89
144
|
...c
|
|
90
|
-
},
|
|
145
|
+
}, m = t(({ addBase: e, addComponents: r }) => {
|
|
91
146
|
e({ ":root": { "--svp-ui-brand": "#159bb5" } }), r(u);
|
|
92
147
|
});
|
|
93
148
|
export {
|
|
94
|
-
|
|
149
|
+
m as default,
|
|
95
150
|
a as uiButtonComponents,
|
|
96
151
|
u as uiComponents,
|
|
97
152
|
c as uiNoticeMarqueeComponents
|