@particle-network/ui-react 0.4.0-beta.7 → 0.4.0-beta.9

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 (8) hide show
  1. package/dist/components/ProgressWrapper/index.d.ts +1 -1
  2. package/dist/components/ProgressWrapper/index.js +18 -3
  3. package/dist/components/UXDropdown/dropdown-item.js +1 -1
  4. package/dist/components/UXSelect/index.js +1 -1
  5. package/dist/components/UXThemeSwitch/theme-data.d.ts +2 -19
  6. package/dist/components/UXThemeSwitch/theme-data.js +84 -48
  7. package/dist/components/UXThemeSwitch/use-theme-color.d.ts +1 -19
  8. package/package.json +4 -4
package/dist/components/ProgressWrapper/index.d.ts CHANGED
@@ -24,7 +24,7 @@ export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElemen
24
24
  /**
25
25
  * 进度条颜色
26
26
  */
27
- color?: UXForegroundColor | 'transparent';
27
+ color?: UXForegroundColor | 'transparent' | `#${string}`;
28
28
  /**
29
29
  * 进度条 SVG 样式
30
30
  */
package/dist/components/ProgressWrapper/index.js CHANGED
@@ -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 { getHexColorFromCSSVariable, radiusMap } from "@particle-network/ui-shared";
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 = 'transparent' === color ? 'transparent' : getHexColorFromCSSVariable(color);
38
- const trackColor = 'transparent' === color ? 'transparent' : `${colorValue}40`;
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 `
package/dist/components/UXDropdown/dropdown-item.js CHANGED
@@ -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
  {
package/dist/components/UXSelect/index.js CHANGED
@@ -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-[selected=true]:text-foreground gap-1',
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
  }
package/dist/components/UXThemeSwitch/theme-data.d.ts CHANGED
@@ -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[];
package/dist/components/UXThemeSwitch/theme-data.js CHANGED
@@ -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
- background: '#000000',
18
- 'background-200': '#1F1F23',
19
- 'background-300': '#17171C',
20
- 'background-400': '#0F0F0F',
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
- background: '#F8F8FA',
43
- 'background-200': '#F0F0F2',
44
- 'background-300': '#F8F8FA',
45
- 'background-400': '#FFFFFF',
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
- background: '#000000',
68
- 'background-200': '#1F1F23',
69
- 'background-300': '#17171C',
70
- 'background-400': '#0F0F0F',
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
- background: '#F8F8FA',
93
- 'background-200': '#F0F0F2',
94
- 'background-300': '#F8F8FA',
95
- 'background-400': '#FFFFFF',
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
- background: '#100E11',
118
- 'background-200': '#2A2A30',
119
- 'background-300': '#17171C',
120
- 'background-400': '#19161B',
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
- background: '#F6F6F6',
143
- 'background-200': '#E9E7EE',
144
- 'background-300': '#F6F6F6',
145
- 'background-400': '#FFFFFF',
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
- background: '#0C0C0F',
168
- 'background-200': '#282A2E',
169
- 'background-300': '#1A1B1F',
170
- 'background-400': '#111214',
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
- background: '#0C0C0F',
193
- 'background-200': '#333542',
194
- 'background-300': '#18181A',
195
- 'background-400': '#101114',
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
- background: '#0F1A1F',
218
- 'background-200': '#273035',
219
- 'background-300': '#1B2429',
220
- 'background-400': '#0F1A1F',
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
- background: '#13121A',
243
- 'background-200': '#222222',
244
- 'background-300': '#272735',
245
- 'background-400': '#22212A',
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
- background: '#0B0E11',
268
- 'background-200': '#29313D',
269
- 'background-300': '#202630',
270
- 'background-400': '#181A20',
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
- background: '#09090B',
293
- 'background-200': '#1B1D22',
294
- 'background-300': '#0D0D10',
295
- 'background-400': '#0F0F0F',
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',
package/dist/components/UXThemeSwitch/use-theme-color.d.ts CHANGED
@@ -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.7",
3
+ "version": "0.4.0-beta.9",
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/eslint-config": "0.3.0",
43
- "@particle-network/lintstaged-config": "0.1.0"
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",
@@ -50,7 +50,7 @@
50
50
  "ahooks": "^3.9.4",
51
51
  "copy-to-clipboard": "^3.3.3",
52
52
  "zustand": "^5.0.8",
53
- "@particle-network/icons": "0.4.0-beta.3",
53
+ "@particle-network/icons": "0.4.0-beta.4",
54
54
  "@particle-network/ui-shared": "0.3.0-beta.1"
55
55
  },
56
56
  "scripts": {