@particle-network/ui-react 0.4.5-beta.12 → 0.4.5-beta.14

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.
@@ -40,7 +40,7 @@ const UXModal = (props)=>{
40
40
  classNames?.footer
41
41
  ],
42
42
  closeButton: [
43
- 'top-5 end-4 text-foreground',
43
+ 'top-4 end-3.5 text-foreground',
44
44
  classNames?.closeButton
45
45
  ]
46
46
  },
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import ExtendedSlider from './slider.extend';
3
+ export type UXSliderProps = React.ComponentPropsWithRef<typeof ExtendedSlider>;
4
+ export declare const UXSlider: React.ForwardRefExoticComponent<UXSliderProps>;
@@ -0,0 +1,33 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import "react";
3
+ import { forwardRef } from "@heroui/system";
4
+ import slider_extend from "./slider.extend.js";
5
+ const UXSlider = forwardRef((props, ref)=>{
6
+ const { onChangeEnd, color, ...restProps } = props;
7
+ return /*#__PURE__*/ jsx(slider_extend, {
8
+ ref: ref,
9
+ tooltipProps: {
10
+ closeDelay: 100,
11
+ classNames: {
12
+ content: [
13
+ `bg-${color}`,
14
+ 'foreground' === color ? 'text-background' : `text-${color}-foreground`
15
+ ]
16
+ }
17
+ },
18
+ color: color,
19
+ onChangeEnd: (e)=>{
20
+ onChangeEnd?.(e);
21
+ if (document.activeElement) document.activeElement.blur();
22
+ const clickEvent = new MouseEvent('click', {
23
+ bubbles: true,
24
+ cancelable: true,
25
+ view: window
26
+ });
27
+ document.body.dispatchEvent(clickEvent);
28
+ },
29
+ ...restProps
30
+ });
31
+ });
32
+ UXSlider.displayName = 'UX.Slider';
33
+ export { UXSlider };
@@ -0,0 +1,206 @@
1
+ export declare const sliderClasses: {
2
+ variants: {
3
+ size: {
4
+ sm: {
5
+ label: string;
6
+ value: string;
7
+ thumb: string;
8
+ step: string;
9
+ track: string;
10
+ };
11
+ md: {
12
+ thumb: string;
13
+ label: string;
14
+ value: string;
15
+ track: string;
16
+ };
17
+ lg: {
18
+ thumb: string;
19
+ step: string;
20
+ label: string;
21
+ value: string;
22
+ mark: string;
23
+ track: string;
24
+ };
25
+ };
26
+ radius: {
27
+ none: {
28
+ thumb: string;
29
+ };
30
+ sm: {
31
+ thumb: string;
32
+ };
33
+ md: {
34
+ thumb: string;
35
+ };
36
+ lg: {
37
+ thumb: string;
38
+ };
39
+ full: {
40
+ thumb: string;
41
+ };
42
+ };
43
+ color: {
44
+ foreground: {
45
+ filler: string;
46
+ thumb: string;
47
+ };
48
+ primary: {
49
+ filler: string;
50
+ thumb: string;
51
+ };
52
+ secondary: {
53
+ filler: string;
54
+ thumb: string;
55
+ };
56
+ success: {
57
+ filler: string;
58
+ thumb: string;
59
+ };
60
+ warning: {
61
+ filler: string;
62
+ thumb: string;
63
+ };
64
+ danger: {
65
+ filler: string;
66
+ thumb: string;
67
+ };
68
+ alert: {
69
+ filler: string;
70
+ thumb: string;
71
+ };
72
+ bullish: {
73
+ filler: string;
74
+ thumb: string;
75
+ };
76
+ bearish: {
77
+ filler: string;
78
+ thumb: string;
79
+ };
80
+ };
81
+ isVertical: {
82
+ true: {
83
+ base: string;
84
+ trackWrapper: string;
85
+ filler: string;
86
+ thumb: string;
87
+ track: string;
88
+ labelWrapper: string;
89
+ step: string[];
90
+ mark: string[];
91
+ };
92
+ false: {
93
+ thumb: string;
94
+ trackWrapper: string;
95
+ track: string;
96
+ step: string[];
97
+ mark: string[];
98
+ };
99
+ };
100
+ isDisabled: {
101
+ false: {
102
+ thumb: string[];
103
+ };
104
+ true: {
105
+ base: string;
106
+ thumb: string;
107
+ };
108
+ };
109
+ hasMarks: {
110
+ true: {
111
+ base: string;
112
+ mark: string;
113
+ };
114
+ false: {};
115
+ };
116
+ showOutline: {
117
+ true: {
118
+ thumb: string;
119
+ };
120
+ false: {
121
+ thumb: string;
122
+ };
123
+ };
124
+ hideValue: {
125
+ true: {
126
+ value: string;
127
+ };
128
+ };
129
+ hideThumb: {
130
+ true: {
131
+ thumb: string;
132
+ track: string;
133
+ };
134
+ };
135
+ hasSingleThumb: {
136
+ true: {};
137
+ false: {};
138
+ };
139
+ disableAnimation: {
140
+ true: {
141
+ thumb: string;
142
+ };
143
+ false: {
144
+ thumb: string;
145
+ mark: string;
146
+ };
147
+ };
148
+ disableThumbScale: {
149
+ true: {};
150
+ false: {
151
+ thumb: string;
152
+ };
153
+ };
154
+ };
155
+ compoundVariants: ({
156
+ size: string[];
157
+ showOutline: boolean;
158
+ class: {
159
+ thumb: string;
160
+ step?: undefined;
161
+ track?: undefined;
162
+ };
163
+ color?: undefined;
164
+ isVertical?: undefined;
165
+ } | {
166
+ size: string;
167
+ color: string;
168
+ class: {
169
+ step: string;
170
+ thumb?: undefined;
171
+ track?: undefined;
172
+ };
173
+ showOutline?: undefined;
174
+ isVertical?: undefined;
175
+ } | {
176
+ size: string;
177
+ isVertical: boolean;
178
+ class: {
179
+ track: string;
180
+ thumb?: undefined;
181
+ step?: undefined;
182
+ };
183
+ showOutline?: undefined;
184
+ color?: undefined;
185
+ } | {
186
+ color: string;
187
+ isVertical: boolean;
188
+ class: {
189
+ track: string;
190
+ thumb?: undefined;
191
+ step?: undefined;
192
+ };
193
+ size?: undefined;
194
+ showOutline?: undefined;
195
+ })[];
196
+ defaultVariants: {
197
+ size: string;
198
+ color: string;
199
+ radius: string;
200
+ hideValue: boolean;
201
+ hideThumb: boolean;
202
+ isDisabled: boolean;
203
+ disableThumbScale: boolean;
204
+ showOutline: boolean;
205
+ };
206
+ };
@@ -0,0 +1,430 @@
1
+ const sliderClasses = {
2
+ variants: {
3
+ size: {
4
+ sm: {
5
+ label: 'text-small',
6
+ value: 'text-small',
7
+ thumb: 'w-4 h-4 after:w-3 after:h-3 !shadow-none',
8
+ step: 'data-[in-range=false]:bg-default-200',
9
+ track: 'bg-background-200'
10
+ },
11
+ md: {
12
+ thumb: 'w-4 h-4 after:w-3 after:h-3 !shadow-none',
13
+ label: 'text-small',
14
+ value: 'text-small',
15
+ track: 'bg-background-200'
16
+ },
17
+ lg: {
18
+ thumb: 'h-7 w-7 after:w-5 after:h-5 !shadow-none',
19
+ step: 'w-2 h-2',
20
+ label: 'text-medium',
21
+ value: 'text-medium',
22
+ mark: 'mt-2',
23
+ track: 'bg-background-200'
24
+ }
25
+ },
26
+ radius: {
27
+ none: {
28
+ thumb: 'rounded-none after:rounded-none'
29
+ },
30
+ sm: {
31
+ thumb: 'rounded-[calc(theme(borderRadius.small)/2)] after:rounded-[calc(theme(borderRadius.small)/3)]'
32
+ },
33
+ md: {
34
+ thumb: 'rounded-[calc(theme(borderRadius.medium)/2)] after:rounded-[calc(theme(borderRadius.medium)/3)]'
35
+ },
36
+ lg: {
37
+ thumb: 'rounded-[calc(theme(borderRadius.large)/1.5)] after:rounded-[calc(theme(borderRadius.large)/2)]'
38
+ },
39
+ full: {
40
+ thumb: 'rounded-full after:rounded-full'
41
+ }
42
+ },
43
+ color: {
44
+ foreground: {
45
+ filler: 'bg-foreground',
46
+ thumb: 'bg-foreground'
47
+ },
48
+ primary: {
49
+ filler: 'bg-primary',
50
+ thumb: 'bg-primary'
51
+ },
52
+ secondary: {
53
+ filler: 'bg-secondary',
54
+ thumb: 'bg-secondary'
55
+ },
56
+ success: {
57
+ filler: 'bg-success',
58
+ thumb: 'bg-success'
59
+ },
60
+ warning: {
61
+ filler: 'bg-warning',
62
+ thumb: 'bg-warning'
63
+ },
64
+ danger: {
65
+ filler: 'bg-danger',
66
+ thumb: 'bg-danger'
67
+ },
68
+ alert: {
69
+ filler: 'bg-alert',
70
+ thumb: 'bg-alert'
71
+ },
72
+ bullish: {
73
+ filler: 'bg-bullish',
74
+ thumb: 'bg-bullish'
75
+ },
76
+ bearish: {
77
+ filler: 'bg-bearish',
78
+ thumb: 'bg-bearish'
79
+ }
80
+ },
81
+ isVertical: {
82
+ true: {
83
+ base: 'w-auto h-full flex-col-reverse items-center',
84
+ trackWrapper: 'flex-col h-full justify-center items-center',
85
+ filler: 'w-full h-auto',
86
+ thumb: 'left-1/2',
87
+ track: 'h-full border-y-transparent',
88
+ labelWrapper: 'flex-col justify-center items-center',
89
+ step: [
90
+ 'left-1/2',
91
+ '-translate-x-1/2',
92
+ 'translate-y-1/2'
93
+ ],
94
+ mark: [
95
+ 'left-1/2',
96
+ 'ml-1',
97
+ 'translate-x-1/2',
98
+ 'translate-y-1/2'
99
+ ]
100
+ },
101
+ false: {
102
+ thumb: 'top-1/2',
103
+ trackWrapper: 'items-center',
104
+ track: 'border-x-transparent',
105
+ step: [
106
+ 'top-1/2',
107
+ '-translate-x-1/2',
108
+ '-translate-y-1/2'
109
+ ],
110
+ mark: [
111
+ 'top-1/2',
112
+ 'mt-1',
113
+ '-translate-x-1/2',
114
+ 'translate-y-1/2'
115
+ ]
116
+ }
117
+ },
118
+ isDisabled: {
119
+ false: {
120
+ thumb: [
121
+ 'cursor-grab',
122
+ 'data-[dragging=true]:cursor-grabbing'
123
+ ]
124
+ },
125
+ true: {
126
+ base: 'opacity-disabled',
127
+ thumb: 'cursor-default'
128
+ }
129
+ },
130
+ hasMarks: {
131
+ true: {
132
+ base: 'mb-5',
133
+ mark: 'cursor-pointer'
134
+ },
135
+ false: {}
136
+ },
137
+ showOutline: {
138
+ true: {
139
+ thumb: 'ring-2 ring-background'
140
+ },
141
+ false: {
142
+ thumb: 'ring-transparent border-0'
143
+ }
144
+ },
145
+ hideValue: {
146
+ true: {
147
+ value: 'sr-only'
148
+ }
149
+ },
150
+ hideThumb: {
151
+ true: {
152
+ thumb: 'sr-only',
153
+ track: 'cursor-pointer'
154
+ }
155
+ },
156
+ hasSingleThumb: {
157
+ true: {},
158
+ false: {}
159
+ },
160
+ disableAnimation: {
161
+ true: {
162
+ thumb: 'data-[dragging=true]:after:scale-100'
163
+ },
164
+ false: {
165
+ thumb: 'after:transition-all motion-reduce:after:transition-none',
166
+ mark: 'transition-opacity motion-reduce:transition-none'
167
+ }
168
+ },
169
+ disableThumbScale: {
170
+ true: {},
171
+ false: {
172
+ thumb: 'data-[dragging=true]:after:scale-80'
173
+ }
174
+ }
175
+ },
176
+ compoundVariants: [
177
+ {
178
+ size: [
179
+ 'sm',
180
+ 'md'
181
+ ],
182
+ showOutline: false,
183
+ class: {
184
+ thumb: 'shadow-small'
185
+ }
186
+ },
187
+ {
188
+ size: 'sm',
189
+ color: 'foreground',
190
+ class: {
191
+ step: 'data-[in-range=true]:bg-foreground'
192
+ }
193
+ },
194
+ {
195
+ size: 'sm',
196
+ color: 'primary',
197
+ class: {
198
+ step: 'data-[in-range=true]:bg-primary'
199
+ }
200
+ },
201
+ {
202
+ size: 'sm',
203
+ color: 'secondary',
204
+ class: {
205
+ step: 'data-[in-range=true]:bg-secondary'
206
+ }
207
+ },
208
+ {
209
+ size: 'sm',
210
+ color: 'alert',
211
+ class: {
212
+ step: 'data-[in-range=true]:bg-alert'
213
+ }
214
+ },
215
+ {
216
+ size: 'sm',
217
+ color: 'success',
218
+ class: {
219
+ step: 'data-[in-range=true]:bg-success'
220
+ }
221
+ },
222
+ {
223
+ size: 'sm',
224
+ color: 'warning',
225
+ class: {
226
+ step: 'data-[in-range=true]:bg-warning'
227
+ }
228
+ },
229
+ {
230
+ size: 'sm',
231
+ color: 'danger',
232
+ class: {
233
+ step: 'data-[in-range=true]:bg-danger'
234
+ }
235
+ },
236
+ {
237
+ size: 'sm',
238
+ color: 'bullish',
239
+ class: {
240
+ step: 'data-[in-range=true]:bg-bullish'
241
+ }
242
+ },
243
+ {
244
+ size: 'sm',
245
+ color: 'bearish',
246
+ class: {
247
+ step: 'data-[in-range=true]:bg-bearish'
248
+ }
249
+ },
250
+ {
251
+ size: 'sm',
252
+ isVertical: false,
253
+ class: {
254
+ track: 'h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-x-[calc(theme(spacing.5)/2)]'
255
+ }
256
+ },
257
+ {
258
+ size: 'md',
259
+ isVertical: false,
260
+ class: {
261
+ track: 'h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-x-[calc(theme(spacing.6)/2)]'
262
+ }
263
+ },
264
+ {
265
+ size: 'lg',
266
+ isVertical: false,
267
+ class: {
268
+ track: 'h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-x-[calc(theme(spacing.7)/2)]'
269
+ }
270
+ },
271
+ {
272
+ size: 'sm',
273
+ isVertical: true,
274
+ class: {
275
+ track: 'w-1 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-y-[calc(theme(spacing.5)/2)]'
276
+ }
277
+ },
278
+ {
279
+ size: 'md',
280
+ isVertical: true,
281
+ class: {
282
+ track: 'w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-y-[calc(theme(spacing.6)/2)]'
283
+ }
284
+ },
285
+ {
286
+ size: 'lg',
287
+ isVertical: true,
288
+ class: {
289
+ track: 'w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]'
290
+ }
291
+ },
292
+ {
293
+ color: 'foreground',
294
+ isVertical: false,
295
+ class: {
296
+ track: 'data-[fill-start=true]:border-s-foreground data-[fill-end=true]:border-e-foreground'
297
+ }
298
+ },
299
+ {
300
+ color: 'primary',
301
+ isVertical: false,
302
+ class: {
303
+ track: 'data-[fill-start=true]:border-s-primary data-[fill-end=true]:border-e-primary'
304
+ }
305
+ },
306
+ {
307
+ color: 'secondary',
308
+ isVertical: false,
309
+ class: {
310
+ track: 'data-[fill-start=true]:border-s-secondary data-[fill-end=true]:border-e-secondary'
311
+ }
312
+ },
313
+ {
314
+ color: 'alert',
315
+ isVertical: false,
316
+ class: {
317
+ track: 'data-[fill-start=true]:border-s-alert data-[fill-end=true]:border-e-alert'
318
+ }
319
+ },
320
+ {
321
+ color: 'success',
322
+ isVertical: false,
323
+ class: {
324
+ track: 'data-[fill-start=true]:border-s-success data-[fill-end=true]:border-e-success'
325
+ }
326
+ },
327
+ {
328
+ color: 'warning',
329
+ isVertical: false,
330
+ class: {
331
+ track: 'data-[fill-start=true]:border-s-warning data-[fill-end=true]:border-e-warning'
332
+ }
333
+ },
334
+ {
335
+ color: 'danger',
336
+ isVertical: false,
337
+ class: {
338
+ track: 'data-[fill-start=true]:border-s-danger data-[fill-end=true]:border-e-danger'
339
+ }
340
+ },
341
+ {
342
+ color: 'bullish',
343
+ isVertical: false,
344
+ class: {
345
+ track: 'data-[fill-start=true]:border-s-bullish data-[fill-end=true]:border-e-bullish'
346
+ }
347
+ },
348
+ {
349
+ color: 'bearish',
350
+ isVertical: false,
351
+ class: {
352
+ track: 'data-[fill-start=true]:border-s-bearish data-[fill-end=true]:border-e-bearish'
353
+ }
354
+ },
355
+ {
356
+ color: 'foreground',
357
+ isVertical: true,
358
+ class: {
359
+ track: 'data-[fill-start=true]:border-b-foreground data-[fill-end=true]:border-t-foreground'
360
+ }
361
+ },
362
+ {
363
+ color: 'primary',
364
+ isVertical: true,
365
+ class: {
366
+ track: 'data-[fill-start=true]:border-b-primary data-[fill-end=true]:border-t-primary'
367
+ }
368
+ },
369
+ {
370
+ color: 'secondary',
371
+ isVertical: true,
372
+ class: {
373
+ track: 'data-[fill-start=true]:border-b-secondary data-[fill-end=true]:border-t-secondary'
374
+ }
375
+ },
376
+ {
377
+ color: 'alert',
378
+ isVertical: true,
379
+ class: {
380
+ track: 'data-[fill-start=true]:border-b-alert data-[fill-end=true]:border-t-alert'
381
+ }
382
+ },
383
+ {
384
+ color: 'success',
385
+ isVertical: true,
386
+ class: {
387
+ track: 'data-[fill-start=true]:border-b-success data-[fill-end=true]:border-t-success'
388
+ }
389
+ },
390
+ {
391
+ color: 'warning',
392
+ isVertical: true,
393
+ class: {
394
+ track: 'data-[fill-start=true]:border-b-warning data-[fill-end=true]:border-t-warning'
395
+ }
396
+ },
397
+ {
398
+ color: 'danger',
399
+ isVertical: true,
400
+ class: {
401
+ track: 'data-[fill-start=true]:border-b-danger data-[fill-end=true]:border-t-danger'
402
+ }
403
+ },
404
+ {
405
+ color: 'bullish',
406
+ isVertical: true,
407
+ class: {
408
+ track: 'data-[fill-start=true]:border-b-bullish data-[fill-end=true]:border-t-bullish'
409
+ }
410
+ },
411
+ {
412
+ color: 'bearish',
413
+ isVertical: true,
414
+ class: {
415
+ track: 'data-[fill-start=true]:border-b-bearish data-[fill-end=true]:border-t-bearish'
416
+ }
417
+ }
418
+ ],
419
+ defaultVariants: {
420
+ size: 'md',
421
+ color: 'primary',
422
+ radius: 'full',
423
+ hideValue: false,
424
+ hideThumb: false,
425
+ isDisabled: false,
426
+ disableThumbScale: false,
427
+ showOutline: false
428
+ }
429
+ };
430
+ export { sliderClasses };
@@ -0,0 +1,5 @@
1
+ import type React from 'react';
2
+ import { type SliderProps } from '@heroui/slider';
3
+ type ExtendedSliderProps = SliderProps;
4
+ declare const ExtendedSlider: React.ForwardRefExoticComponent<ExtendedSliderProps>;
5
+ export default ExtendedSlider;
@@ -0,0 +1,6 @@
1
+ import { Slider } from "@heroui/slider";
2
+ import { extendVariants } from "@heroui/system-rsc";
3
+ import { sliderClasses } from "./slider.classes.js";
4
+ const ExtendedSlider = extendVariants(Slider, sliderClasses);
5
+ const slider_extend = ExtendedSlider;
6
+ export { slider_extend as default };
@@ -21,6 +21,7 @@ export * from './UXPagination';
21
21
  export * from './UXPopover';
22
22
  export * from './UXRadio';
23
23
  export * from './UXSelect';
24
+ export * from './UXSlider';
24
25
  export * from './UXSpinner';
25
26
  export * from './UXSwitch';
26
27
  export * from './UXTable';
@@ -21,6 +21,7 @@ export * from "./UXPagination/index.js";
21
21
  export * from "./UXPopover/index.js";
22
22
  export * from "./UXRadio/index.js";
23
23
  export * from "./UXSelect/index.js";
24
+ export * from "./UXSlider/index.js";
24
25
  export * from "./UXSpinner/index.js";
25
26
  export * from "./UXSwitch/index.js";
26
27
  export * from "./UXTable/index.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@particle-network/ui-react",
3
- "version": "0.4.5-beta.12",
3
+ "version": "0.4.5-beta.14",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -49,8 +49,8 @@
49
49
  "ahooks": "^3.9.4",
50
50
  "copy-to-clipboard": "^3.3.3",
51
51
  "zustand": "^5.0.8",
52
- "@particle-network/ui-shared": "0.3.2-beta.3",
53
- "@particle-network/icons": "0.4.2-beta.7"
52
+ "@particle-network/icons": "0.4.2-beta.7",
53
+ "@particle-network/ui-shared": "0.3.2-beta.3"
54
54
  },
55
55
  "scripts": {
56
56
  "build": "rslib build",