@particle-network/ui-react 0.4.0-beta.7 → 0.4.0-beta.8
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/components/ProgressWrapper/index.d.ts +1 -1
- package/dist/components/ProgressWrapper/index.js +18 -3
- package/dist/components/UXDropdown/dropdown-item.js +1 -1
- package/dist/components/UXSelect/index.js +1 -1
- package/dist/components/UXThemeSwitch/theme-data.d.ts +2 -19
- package/dist/components/UXThemeSwitch/theme-data.js +84 -48
- package/dist/components/UXThemeSwitch/use-theme-color.d.ts +1 -19
- package/package.json +3 -3
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo, useRef } from "react";
|
|
4
4
|
import { cn } from "@heroui/theme";
|
|
5
|
-
import {
|
|
5
|
+
import { radiusMap } from "@particle-network/ui-shared";
|
|
6
6
|
import { useSize } from "ahooks";
|
|
7
7
|
import { Center } from "../layout/index.js";
|
|
8
|
+
import { useThemeColor } from "../UXThemeSwitch/use-theme-color.js";
|
|
8
9
|
const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
|
|
10
|
+
const uxColors = useThemeColor();
|
|
9
11
|
const autoLayout = !width && !height;
|
|
10
12
|
const containerRef = useRef(null);
|
|
11
13
|
const { width: childWidth, height: childHeight } = useSize(containerRef) ?? {
|
|
@@ -34,8 +36,21 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
|
|
|
34
36
|
const rectXY = strokeWidth / 2;
|
|
35
37
|
const perimeter = 2 * (rectWidth + rectHeight);
|
|
36
38
|
const strokeDashoffset = perimeter * (1 - clampedProgress / 100);
|
|
37
|
-
const colorValue =
|
|
38
|
-
|
|
39
|
+
const colorValue = useMemo(()=>{
|
|
40
|
+
if ('transparent' === color) return 'transparent';
|
|
41
|
+
if (color.startsWith('#')) return color;
|
|
42
|
+
return uxColors[color];
|
|
43
|
+
}, [
|
|
44
|
+
color,
|
|
45
|
+
uxColors
|
|
46
|
+
]);
|
|
47
|
+
const trackColor = useMemo(()=>{
|
|
48
|
+
if ('transparent' === color) return 'transparent';
|
|
49
|
+
return `${colorValue}40`;
|
|
50
|
+
}, [
|
|
51
|
+
color,
|
|
52
|
+
colorValue
|
|
53
|
+
]);
|
|
39
54
|
const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
|
|
40
55
|
const createPathData = (x, y, w, h, r)=>{
|
|
41
56
|
if (0 === r) return `
|
|
@@ -177,7 +177,7 @@ const classes = {
|
|
|
177
177
|
variant: 'flat',
|
|
178
178
|
color: 'default',
|
|
179
179
|
class: {
|
|
180
|
-
base: 'data-[hover=true]:bg-background-200 data-[hover=true]:text-default-foreground'
|
|
180
|
+
base: 'data-[hover=true]:bg-background-200 data-[focus-visible=true]:bg-background-200 data-[focus-visible=true]:dark:bg-background-200 data-[hover=true]:text-default-foreground data-[selectable=true]:focus:!bg-background-200 data-[selectable=true]:focus:dark:!bg-background-200'
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
183
|
{
|
|
@@ -34,7 +34,7 @@ const UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
34
34
|
list: 'gap-0 [&_[data-slot="heading"]]:text-small [&_[data-slot="heading"]]:font-medium'
|
|
35
35
|
},
|
|
36
36
|
itemClasses: {
|
|
37
|
-
base: '!outline-none min-h-8 px-md rounded-small text-foreground-300 !outline-none data-[hover=true]:bg-background-200 data-[
|
|
37
|
+
base: '!outline-none min-h-8 px-md rounded-small text-foreground-300 !outline-none data-[hover=true]:bg-background-200 data-[focus-visible=true]:bg-background-200 data-[focus-visible=true]:dark:bg-background-200 data-[hover=true]:text-default-foreground data-[selectable=true]:focus:!bg-background-200 data-[selectable=true]:focus:dark:!bg-background-200 gap-1',
|
|
38
38
|
title: 'text-tiny font-medium antialiased',
|
|
39
39
|
selectedIcon: '[&>svg>polyline]:stroke-[2.5]'
|
|
40
40
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { UXColor } from '@particle-network/ui-shared';
|
|
1
2
|
export type ThemeId = 'ux-purple-gold-dark' | 'ux-purple-gold-light' | 'ux-green-red-dark' | 'ux-green-red-light' | 'ux-green-red-soft-dark' | 'ux-green-red-soft-light' | 'gmgn-dark' | 'axiom-dark' | 'hyperliquid-dark' | 'phantom-dark' | 'binance-dark' | 'bullx-dark';
|
|
2
3
|
export type ColorScheme = 'dark' | 'light';
|
|
3
4
|
export interface ThemeItemType {
|
|
@@ -5,25 +6,7 @@ export interface ThemeItemType {
|
|
|
5
6
|
zhName: string;
|
|
6
7
|
enName: string;
|
|
7
8
|
colorScheme: ColorScheme;
|
|
8
|
-
colorVariables:
|
|
9
|
-
foreground: string;
|
|
10
|
-
secondary: string;
|
|
11
|
-
tertiary: string;
|
|
12
|
-
primary: string;
|
|
13
|
-
success: string;
|
|
14
|
-
danger: string;
|
|
15
|
-
alert: string;
|
|
16
|
-
warning: string;
|
|
17
|
-
gold: string;
|
|
18
|
-
background: string;
|
|
19
|
-
'background-200': string;
|
|
20
|
-
'background-300': string;
|
|
21
|
-
'background-400': string;
|
|
22
|
-
overlay: string;
|
|
23
|
-
divider: string;
|
|
24
|
-
bullish: string;
|
|
25
|
-
bearish: string;
|
|
26
|
-
};
|
|
9
|
+
colorVariables: Record<UXColor, string>;
|
|
27
10
|
}
|
|
28
11
|
export declare const themeData: ThemeItemType[];
|
|
29
12
|
export declare const themeKeys: ThemeId[];
|
|
@@ -5,6 +5,9 @@ const themeData = [
|
|
|
5
5
|
enName: 'UX Purple/Gold Dark',
|
|
6
6
|
colorScheme: 'dark',
|
|
7
7
|
colorVariables: {
|
|
8
|
+
default: '#FFFFFF',
|
|
9
|
+
white: '#FFFFFF',
|
|
10
|
+
transparent: 'transparent',
|
|
8
11
|
foreground: '#FFFFFF',
|
|
9
12
|
secondary: '#A1A1AA',
|
|
10
13
|
tertiary: '#4E4E56',
|
|
@@ -14,10 +17,10 @@ const themeData = [
|
|
|
14
17
|
alert: '#F57733',
|
|
15
18
|
warning: '#FF9821',
|
|
16
19
|
gold: '#FFB800',
|
|
17
|
-
|
|
18
|
-
'
|
|
19
|
-
'
|
|
20
|
-
'
|
|
20
|
+
'bg-default': '#000000',
|
|
21
|
+
'bg-200': '#1F1F23',
|
|
22
|
+
'bg-300': '#17171C',
|
|
23
|
+
'bg-400': '#0F0F0F',
|
|
21
24
|
overlay: '#17171C',
|
|
22
25
|
divider: '#282828',
|
|
23
26
|
bullish: '#D745FF',
|
|
@@ -30,6 +33,9 @@ const themeData = [
|
|
|
30
33
|
enName: 'UX Purple/Gold Light',
|
|
31
34
|
colorScheme: 'light',
|
|
32
35
|
colorVariables: {
|
|
36
|
+
default: '#000000',
|
|
37
|
+
white: '#FFFFFF',
|
|
38
|
+
transparent: 'transparent',
|
|
33
39
|
foreground: '#000000',
|
|
34
40
|
secondary: '#767A80',
|
|
35
41
|
tertiary: '#D8D8DE',
|
|
@@ -39,10 +45,10 @@ const themeData = [
|
|
|
39
45
|
alert: '#E65E16',
|
|
40
46
|
warning: '#FF9821',
|
|
41
47
|
gold: '#F38300',
|
|
42
|
-
|
|
43
|
-
'
|
|
44
|
-
'
|
|
45
|
-
'
|
|
48
|
+
'bg-default': '#F8F8FA',
|
|
49
|
+
'bg-200': '#F0F0F2',
|
|
50
|
+
'bg-300': '#F8F8FA',
|
|
51
|
+
'bg-400': '#FFFFFF',
|
|
46
52
|
overlay: '#FFFFFF',
|
|
47
53
|
divider: '#E8E8ED',
|
|
48
54
|
bullish: '#D745FF',
|
|
@@ -55,6 +61,9 @@ const themeData = [
|
|
|
55
61
|
enName: 'UX Green/Red Dark',
|
|
56
62
|
colorScheme: 'dark',
|
|
57
63
|
colorVariables: {
|
|
64
|
+
default: '#FFFFFF',
|
|
65
|
+
white: '#FFFFFF',
|
|
66
|
+
transparent: 'transparent',
|
|
58
67
|
foreground: '#FFFFFF',
|
|
59
68
|
secondary: '#A1A1AA',
|
|
60
69
|
tertiary: '#4E4E56',
|
|
@@ -64,10 +73,10 @@ const themeData = [
|
|
|
64
73
|
alert: '#F57733',
|
|
65
74
|
warning: '#FF9821',
|
|
66
75
|
gold: '#FFB800',
|
|
67
|
-
|
|
68
|
-
'
|
|
69
|
-
'
|
|
70
|
-
'
|
|
76
|
+
'bg-default': '#000000',
|
|
77
|
+
'bg-200': '#1F1F23',
|
|
78
|
+
'bg-300': '#17171C',
|
|
79
|
+
'bg-400': '#0F0F0F',
|
|
71
80
|
overlay: '#17171C',
|
|
72
81
|
divider: '#282828',
|
|
73
82
|
bullish: '#45B167',
|
|
@@ -80,6 +89,9 @@ const themeData = [
|
|
|
80
89
|
enName: 'UX Green/Red Light',
|
|
81
90
|
colorScheme: 'light',
|
|
82
91
|
colorVariables: {
|
|
92
|
+
default: '#000000',
|
|
93
|
+
white: '#FFFFFF',
|
|
94
|
+
transparent: 'transparent',
|
|
83
95
|
foreground: '#000000',
|
|
84
96
|
secondary: '#767A80',
|
|
85
97
|
tertiary: '#D8D8DE',
|
|
@@ -89,10 +101,10 @@ const themeData = [
|
|
|
89
101
|
alert: '#E65E16',
|
|
90
102
|
warning: '#FF9821',
|
|
91
103
|
gold: '#F38300',
|
|
92
|
-
|
|
93
|
-
'
|
|
94
|
-
'
|
|
95
|
-
'
|
|
104
|
+
'bg-default': '#F8F8FA',
|
|
105
|
+
'bg-200': '#F0F0F2',
|
|
106
|
+
'bg-300': '#F8F8FA',
|
|
107
|
+
'bg-400': '#FFFFFF',
|
|
96
108
|
overlay: '#FFFFFF',
|
|
97
109
|
divider: '#E8E8ED',
|
|
98
110
|
bullish: '#45B167',
|
|
@@ -105,6 +117,9 @@ const themeData = [
|
|
|
105
117
|
enName: 'UX Soft Dark',
|
|
106
118
|
colorScheme: 'dark',
|
|
107
119
|
colorVariables: {
|
|
120
|
+
default: '#FDFDFE',
|
|
121
|
+
white: '#FFFFFF',
|
|
122
|
+
transparent: 'transparent',
|
|
108
123
|
foreground: '#FDFDFE',
|
|
109
124
|
secondary: '#BBBBC4',
|
|
110
125
|
tertiary: '#70707C',
|
|
@@ -114,10 +129,10 @@ const themeData = [
|
|
|
114
129
|
alert: '#F37A39',
|
|
115
130
|
warning: '#F8BF63',
|
|
116
131
|
gold: '#FFB800',
|
|
117
|
-
|
|
118
|
-
'
|
|
119
|
-
'
|
|
120
|
-
'
|
|
132
|
+
'bg-default': '#100E11',
|
|
133
|
+
'bg-200': '#2A2A30',
|
|
134
|
+
'bg-300': '#17171C',
|
|
135
|
+
'bg-400': '#19161B',
|
|
121
136
|
overlay: '#17171C',
|
|
122
137
|
divider: '#282828',
|
|
123
138
|
bullish: '#73D090',
|
|
@@ -130,6 +145,9 @@ const themeData = [
|
|
|
130
145
|
enName: 'UX Soft Light',
|
|
131
146
|
colorScheme: 'light',
|
|
132
147
|
colorVariables: {
|
|
148
|
+
default: '#0C0C0F',
|
|
149
|
+
white: '#FFFFFF',
|
|
150
|
+
transparent: 'transparent',
|
|
133
151
|
foreground: '#0C0C0F',
|
|
134
152
|
secondary: '#363538',
|
|
135
153
|
tertiary: '#7B7B85',
|
|
@@ -139,10 +157,10 @@ const themeData = [
|
|
|
139
157
|
alert: '#F07939',
|
|
140
158
|
warning: '#F6932B',
|
|
141
159
|
gold: '#FFB800',
|
|
142
|
-
|
|
143
|
-
'
|
|
144
|
-
'
|
|
145
|
-
'
|
|
160
|
+
'bg-default': '#F6F6F6',
|
|
161
|
+
'bg-200': '#E9E7EE',
|
|
162
|
+
'bg-300': '#F6F6F6',
|
|
163
|
+
'bg-400': '#FFFFFF',
|
|
146
164
|
overlay: '#FFFFFF',
|
|
147
165
|
divider: '#DAD7E0',
|
|
148
166
|
bullish: '#19AB5E',
|
|
@@ -155,6 +173,9 @@ const themeData = [
|
|
|
155
173
|
enName: 'GMGN',
|
|
156
174
|
colorScheme: 'dark',
|
|
157
175
|
colorVariables: {
|
|
176
|
+
default: '#F0F5F5',
|
|
177
|
+
white: '#FFFFFF',
|
|
178
|
+
transparent: 'transparent',
|
|
158
179
|
foreground: '#F0F5F5',
|
|
159
180
|
secondary: '#C4CCCC',
|
|
160
181
|
tertiary: '#757E80',
|
|
@@ -164,10 +185,10 @@ const themeData = [
|
|
|
164
185
|
alert: '#F55832',
|
|
165
186
|
warning: '#EDB951',
|
|
166
187
|
gold: '#F5DA54',
|
|
167
|
-
|
|
168
|
-
'
|
|
169
|
-
'
|
|
170
|
-
'
|
|
188
|
+
'bg-default': '#0C0C0F',
|
|
189
|
+
'bg-200': '#282A2E',
|
|
190
|
+
'bg-300': '#1A1B1F',
|
|
191
|
+
'bg-400': '#111214',
|
|
171
192
|
overlay: '#1A1B1F',
|
|
172
193
|
divider: '#282828',
|
|
173
194
|
bullish: '#1DB069',
|
|
@@ -180,6 +201,9 @@ const themeData = [
|
|
|
180
201
|
enName: 'AXIOM',
|
|
181
202
|
colorScheme: 'dark',
|
|
182
203
|
colorVariables: {
|
|
204
|
+
default: '#FCFCFC',
|
|
205
|
+
white: '#FFFFFF',
|
|
206
|
+
transparent: 'transparent',
|
|
183
207
|
foreground: '#FCFCFC',
|
|
184
208
|
secondary: '#C8C9D1',
|
|
185
209
|
tertiary: '#777A8C',
|
|
@@ -189,10 +213,10 @@ const themeData = [
|
|
|
189
213
|
alert: '#F57733',
|
|
190
214
|
warning: '#F7931A',
|
|
191
215
|
gold: '#F7931A',
|
|
192
|
-
|
|
193
|
-
'
|
|
194
|
-
'
|
|
195
|
-
'
|
|
216
|
+
'bg-default': '#0C0C0F',
|
|
217
|
+
'bg-200': '#333542',
|
|
218
|
+
'bg-300': '#18181A',
|
|
219
|
+
'bg-400': '#101114',
|
|
196
220
|
overlay: '#18181A',
|
|
197
221
|
divider: '#333542',
|
|
198
222
|
bullish: '#0B9981',
|
|
@@ -205,6 +229,9 @@ const themeData = [
|
|
|
205
229
|
enName: 'Hyperliquid',
|
|
206
230
|
colorScheme: 'dark',
|
|
207
231
|
colorVariables: {
|
|
232
|
+
default: '#F6FEFD',
|
|
233
|
+
white: '#FFFFFF',
|
|
234
|
+
transparent: 'transparent',
|
|
208
235
|
foreground: '#F6FEFD',
|
|
209
236
|
secondary: '#D1D4DC',
|
|
210
237
|
tertiary: '#949E9C',
|
|
@@ -214,10 +241,10 @@ const themeData = [
|
|
|
214
241
|
alert: '#EF8F50',
|
|
215
242
|
warning: '#FFB648',
|
|
216
243
|
gold: '#FFB648',
|
|
217
|
-
|
|
218
|
-
'
|
|
219
|
-
'
|
|
220
|
-
'
|
|
244
|
+
'bg-default': '#0F1A1F',
|
|
245
|
+
'bg-200': '#273035',
|
|
246
|
+
'bg-300': '#1B2429',
|
|
247
|
+
'bg-400': '#0F1A1F',
|
|
221
248
|
overlay: '#1B2429',
|
|
222
249
|
divider: '#444651',
|
|
223
250
|
bullish: '#51D2C1',
|
|
@@ -230,6 +257,9 @@ const themeData = [
|
|
|
230
257
|
enName: 'Phantom',
|
|
231
258
|
colorScheme: 'dark',
|
|
232
259
|
colorVariables: {
|
|
260
|
+
default: '#FFFFFF',
|
|
261
|
+
white: '#FFFFFF',
|
|
262
|
+
transparent: 'transparent',
|
|
233
263
|
foreground: '#FFFFFF',
|
|
234
264
|
secondary: '#999999',
|
|
235
265
|
tertiary: '#757E80',
|
|
@@ -239,10 +269,10 @@ const themeData = [
|
|
|
239
269
|
alert: '#FF9C3F',
|
|
240
270
|
warning: '#FFD13F',
|
|
241
271
|
gold: '#FFD13F',
|
|
242
|
-
|
|
243
|
-
'
|
|
244
|
-
'
|
|
245
|
-
'
|
|
272
|
+
'bg-default': '#13121A',
|
|
273
|
+
'bg-200': '#222222',
|
|
274
|
+
'bg-300': '#272735',
|
|
275
|
+
'bg-400': '#22212A',
|
|
246
276
|
overlay: '#272735',
|
|
247
277
|
divider: '#323232',
|
|
248
278
|
bullish: '#2EC08B',
|
|
@@ -255,6 +285,9 @@ const themeData = [
|
|
|
255
285
|
enName: 'Binance',
|
|
256
286
|
colorScheme: 'dark',
|
|
257
287
|
colorVariables: {
|
|
288
|
+
default: '#EAECEF',
|
|
289
|
+
white: '#FFFFFF',
|
|
290
|
+
transparent: 'transparent',
|
|
258
291
|
foreground: '#EAECEF',
|
|
259
292
|
secondary: '#929AA5',
|
|
260
293
|
tertiary: '#707A8A',
|
|
@@ -264,10 +297,10 @@ const themeData = [
|
|
|
264
297
|
alert: '#FF693D',
|
|
265
298
|
warning: '#F0B90B',
|
|
266
299
|
gold: '#2DBD85',
|
|
267
|
-
|
|
268
|
-
'
|
|
269
|
-
'
|
|
270
|
-
'
|
|
300
|
+
'bg-default': '#0B0E11',
|
|
301
|
+
'bg-200': '#29313D',
|
|
302
|
+
'bg-300': '#202630',
|
|
303
|
+
'bg-400': '#181A20',
|
|
271
304
|
overlay: '#202630',
|
|
272
305
|
divider: '#343B47',
|
|
273
306
|
bullish: '#2EBD85',
|
|
@@ -280,6 +313,9 @@ const themeData = [
|
|
|
280
313
|
enName: "Bullx's",
|
|
281
314
|
colorScheme: 'dark',
|
|
282
315
|
colorVariables: {
|
|
316
|
+
default: '#E9E9E9',
|
|
317
|
+
white: '#FFFFFF',
|
|
318
|
+
transparent: 'transparent',
|
|
283
319
|
foreground: '#E9E9E9',
|
|
284
320
|
secondary: '#98989B',
|
|
285
321
|
tertiary: '#686a6d',
|
|
@@ -289,10 +325,10 @@ const themeData = [
|
|
|
289
325
|
alert: '#E9BF52',
|
|
290
326
|
warning: '#DCC161',
|
|
291
327
|
gold: '#E9BF52',
|
|
292
|
-
|
|
293
|
-
'
|
|
294
|
-
'
|
|
295
|
-
'
|
|
328
|
+
'bg-default': '#09090B',
|
|
329
|
+
'bg-200': '#1B1D22',
|
|
330
|
+
'bg-300': '#0D0D10',
|
|
331
|
+
'bg-400': '#0F0F0F',
|
|
296
332
|
overlay: '#0D0D10',
|
|
297
333
|
divider: '#1E2025',
|
|
298
334
|
bullish: '#459C6E',
|
|
@@ -1,19 +1 @@
|
|
|
1
|
-
export declare const useThemeColor: () =>
|
|
2
|
-
foreground: string;
|
|
3
|
-
secondary: string;
|
|
4
|
-
tertiary: string;
|
|
5
|
-
primary: string;
|
|
6
|
-
success: string;
|
|
7
|
-
danger: string;
|
|
8
|
-
alert: string;
|
|
9
|
-
warning: string;
|
|
10
|
-
gold: string;
|
|
11
|
-
background: string;
|
|
12
|
-
'background-200': string;
|
|
13
|
-
'background-300': string;
|
|
14
|
-
'background-400': string;
|
|
15
|
-
overlay: string;
|
|
16
|
-
divider: string;
|
|
17
|
-
bullish: string;
|
|
18
|
-
bearish: string;
|
|
19
|
-
};
|
|
1
|
+
export declare const useThemeColor: () => Record<import("@particle-network/ui-shared").UXColor, string>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@particle-network/ui-react",
|
|
3
|
-
"version": "0.4.0-beta.
|
|
3
|
+
"version": "0.4.0-beta.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@types/react": "^19.1.10",
|
|
40
40
|
"react": "^19.1.0",
|
|
41
41
|
"typescript": "^5.8.3",
|
|
42
|
-
"@particle-network/
|
|
43
|
-
"@particle-network/
|
|
42
|
+
"@particle-network/lintstaged-config": "0.1.0",
|
|
43
|
+
"@particle-network/eslint-config": "0.3.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"react": ">=16.9.0",
|