@particle-network/ui-react 0.4.5-beta.13 → 0.4.5-beta.15

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