@sytechui/slider 2.4.29
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/LICENSE +21 -0
- package/README.md +24 -0
- package/dist/chunk-CJCHSOKZ.mjs +67 -0
- package/dist/chunk-IQZHN75L.mjs +42 -0
- package/dist/chunk-M2PJK6HJ.mjs +97 -0
- package/dist/chunk-ORNKXCKK.mjs +305 -0
- package/dist/index.d.mts +10 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +518 -0
- package/dist/index.mjs +13 -0
- package/dist/slider-thumb.d.mts +9 -0
- package/dist/slider-thumb.d.ts +9 -0
- package/dist/slider-thumb.js +152 -0
- package/dist/slider-thumb.mjs +8 -0
- package/dist/slider.d.mts +15 -0
- package/dist/slider.d.ts +15 -0
- package/dist/slider.js +510 -0
- package/dist/slider.mjs +10 -0
- package/dist/use-slider-Bo_Y5OvC.d.mts +235 -0
- package/dist/use-slider-Bo_Y5OvC.d.ts +235 -0
- package/dist/use-slider-thumb.d.mts +9 -0
- package/dist/use-slider-thumb.d.ts +9 -0
- package/dist/use-slider-thumb.js +120 -0
- package/dist/use-slider-thumb.mjs +7 -0
- package/dist/use-slider.d.mts +9 -0
- package/dist/use-slider.d.ts +9 -0
- package/dist/use-slider.js +328 -0
- package/dist/use-slider.mjs +7 -0
- package/package.json +62 -0
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { RefObject, ReactNode } from 'react';
|
|
3
|
+
import * as _react_stately_slider from '@react-stately/slider';
|
|
4
|
+
import { SliderState } from '@react-stately/slider';
|
|
5
|
+
import * as _sytechui_system from '@sytechui/system';
|
|
6
|
+
import { HTMLHeroUIProps, PropGetter, DOMAttributes } from '@sytechui/system';
|
|
7
|
+
import { SliderVariantProps, SlotsToClasses, SliderSlots } from '@sytechui/theme';
|
|
8
|
+
import { ReactRef } from '@sytechui/react-utils';
|
|
9
|
+
import { AriaSliderThumbProps, AriaSliderProps } from '@react-aria/slider';
|
|
10
|
+
import { TooltipProps } from '@sytechui/tooltip';
|
|
11
|
+
import { ValueBase } from '@react-types/shared';
|
|
12
|
+
|
|
13
|
+
interface Props$1 extends HTMLHeroUIProps<"div"> {
|
|
14
|
+
/**
|
|
15
|
+
* Ref to the DOM node.
|
|
16
|
+
*/
|
|
17
|
+
ref?: ReactRef<HTMLElement | null>;
|
|
18
|
+
/**
|
|
19
|
+
* slider state, created via `useSliderState`.
|
|
20
|
+
*/
|
|
21
|
+
state: SliderState;
|
|
22
|
+
/**
|
|
23
|
+
* A ref to the track element.
|
|
24
|
+
*/
|
|
25
|
+
trackRef: RefObject<HTMLDivElement>;
|
|
26
|
+
/**
|
|
27
|
+
* @internal
|
|
28
|
+
*/
|
|
29
|
+
isVertical: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* @internal
|
|
32
|
+
*/
|
|
33
|
+
showTooltip?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* @internal
|
|
36
|
+
*/
|
|
37
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
38
|
+
/**
|
|
39
|
+
* @internal
|
|
40
|
+
*/
|
|
41
|
+
tooltipProps?: UseSliderProps["tooltipProps"];
|
|
42
|
+
/**
|
|
43
|
+
* A function that returns the content to display as the tooltip label. (in analogy to getValue)
|
|
44
|
+
* @param value - The value of the slider, array or single number.
|
|
45
|
+
* @param index - The index of the thumb, if multiple thumbs are used.
|
|
46
|
+
* In addition to formatting with tooltipValueFormatOptions if number is returned.
|
|
47
|
+
*/
|
|
48
|
+
getTooltipValue?: (value: SliderValue, index?: number) => string | number;
|
|
49
|
+
/**
|
|
50
|
+
* Function to render the thumb. It can be used to add a tooltip or custom icon.
|
|
51
|
+
*/
|
|
52
|
+
renderThumb?: UseSliderProps["renderThumb"];
|
|
53
|
+
}
|
|
54
|
+
type UseSliderThumbProps = Props$1 & AriaSliderThumbProps & SliderVariantProps;
|
|
55
|
+
declare function useSliderThumb(props: UseSliderThumbProps): {
|
|
56
|
+
Component: _sytechui_system.As<any>;
|
|
57
|
+
index: number | undefined;
|
|
58
|
+
showTooltip: boolean | undefined;
|
|
59
|
+
renderThumb: ((props: SliderRenderThumbProps) => React.ReactNode) | undefined;
|
|
60
|
+
getThumbProps: PropGetter;
|
|
61
|
+
getTooltipProps: () => TooltipProps;
|
|
62
|
+
getInputProps: PropGetter;
|
|
63
|
+
};
|
|
64
|
+
type UseSliderThumbReturn = ReturnType<typeof useSliderThumb>;
|
|
65
|
+
|
|
66
|
+
interface SliderThumbProps extends UseSliderThumbProps {
|
|
67
|
+
}
|
|
68
|
+
declare const SliderThumb: _sytechui_system.InternalForwardRefRenderFunction<"div", SliderThumbProps, never>;
|
|
69
|
+
|
|
70
|
+
type SliderValue = number | number[];
|
|
71
|
+
type SliderStepMark = {
|
|
72
|
+
value: number;
|
|
73
|
+
label: string;
|
|
74
|
+
};
|
|
75
|
+
type SliderRenderThumbProps = DOMAttributes<HTMLDivElement> & {
|
|
76
|
+
index?: number;
|
|
77
|
+
};
|
|
78
|
+
interface Props extends HTMLHeroUIProps<"div"> {
|
|
79
|
+
/**
|
|
80
|
+
* Ref to the DOM node.
|
|
81
|
+
*/
|
|
82
|
+
ref?: ReactRef<HTMLElement | null>;
|
|
83
|
+
/**
|
|
84
|
+
* The content to display as the label.
|
|
85
|
+
*/
|
|
86
|
+
label?: ReactNode;
|
|
87
|
+
/**
|
|
88
|
+
* The input name.
|
|
89
|
+
*/
|
|
90
|
+
name?: string;
|
|
91
|
+
/**
|
|
92
|
+
* The offset from which to start the fill.
|
|
93
|
+
*/
|
|
94
|
+
fillOffset?: number;
|
|
95
|
+
/**
|
|
96
|
+
* The display format of the value label.
|
|
97
|
+
*/
|
|
98
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
99
|
+
/**
|
|
100
|
+
* The display format of the tooltip value label.
|
|
101
|
+
* @default formatOptions
|
|
102
|
+
*/
|
|
103
|
+
tooltipValueFormatOptions?: Intl.NumberFormatOptions;
|
|
104
|
+
/**
|
|
105
|
+
* Whether to show the step indicators.
|
|
106
|
+
* @default false
|
|
107
|
+
*/
|
|
108
|
+
showSteps?: boolean;
|
|
109
|
+
/**
|
|
110
|
+
* Whether the thumbs should have a tooltip with the value on hover the slider.
|
|
111
|
+
* @default false
|
|
112
|
+
*/
|
|
113
|
+
showTooltip?: boolean;
|
|
114
|
+
/**
|
|
115
|
+
* Custom steps labels.
|
|
116
|
+
* @example [{value: 0, label: "0"}, {value: 50, label: "50"}, {value: 100, label: "100"}]
|
|
117
|
+
* @default []
|
|
118
|
+
*/
|
|
119
|
+
marks?: SliderStepMark[];
|
|
120
|
+
/**
|
|
121
|
+
* Element to be rendered in the start side of the slider.
|
|
122
|
+
*/
|
|
123
|
+
startContent?: React.ReactNode;
|
|
124
|
+
/**
|
|
125
|
+
* Element to be rendered in the end side of the slider.
|
|
126
|
+
*/
|
|
127
|
+
endContent?: React.ReactNode;
|
|
128
|
+
/**
|
|
129
|
+
* Classname or List of classes to change the classNames of the element.
|
|
130
|
+
* if `className` is passed, it will be added to the base slot.
|
|
131
|
+
*
|
|
132
|
+
* @example
|
|
133
|
+
* ```ts
|
|
134
|
+
* <Slider classNames={{
|
|
135
|
+
* base:"base-classes",
|
|
136
|
+
* step: "step-classes",
|
|
137
|
+
* labelWrapper: "label-wrapper-classes",
|
|
138
|
+
* label: "label-classes",
|
|
139
|
+
* value: "value-classes",
|
|
140
|
+
* trackWrapper: "track-wrapper-classes",
|
|
141
|
+
* track: "track-classes",
|
|
142
|
+
* filler: "filler-classes",
|
|
143
|
+
* thumb: "thumb-classes",
|
|
144
|
+
* mark: "mark-classes",
|
|
145
|
+
* }} />
|
|
146
|
+
* ```
|
|
147
|
+
*/
|
|
148
|
+
classNames?: SlotsToClasses<SliderSlots>;
|
|
149
|
+
/**
|
|
150
|
+
* Tooltip props.
|
|
151
|
+
* @see [Tooltip](https://heroui.com/components/tooltip) for more details.
|
|
152
|
+
* @default {
|
|
153
|
+
* offset: 15,
|
|
154
|
+
* delay: 0,
|
|
155
|
+
* size: "sm",
|
|
156
|
+
* showArrow: true,
|
|
157
|
+
* placement: "top", // "right" for vertical slider
|
|
158
|
+
* content: [sliderValue],
|
|
159
|
+
* color: sliderProps?.color, // same as the slider color
|
|
160
|
+
* isDisabled: sliderProps?.isDisabled,
|
|
161
|
+
* }
|
|
162
|
+
*/
|
|
163
|
+
tooltipProps?: Partial<TooltipProps>;
|
|
164
|
+
/**
|
|
165
|
+
* A function that returns the content to display as the value label.
|
|
166
|
+
* Overrides default formatted number.
|
|
167
|
+
*/
|
|
168
|
+
getValue?: (value: SliderValue) => string;
|
|
169
|
+
/**
|
|
170
|
+
* A function that returns the content to display as the tooltip label. (in analogy to getValue)
|
|
171
|
+
* @param value - The value of the slider, array or single number.
|
|
172
|
+
* @param index - The index of the thumb, if multiple thumbs are used.
|
|
173
|
+
* In addition to formatting with tooltipValueFormatOptions if number is returned.
|
|
174
|
+
*/
|
|
175
|
+
getTooltipValue?: (value: SliderValue, index?: number) => string | number;
|
|
176
|
+
/**
|
|
177
|
+
* Function to render the label.
|
|
178
|
+
*/
|
|
179
|
+
renderLabel?: (props: DOMAttributes<HTMLLabelElement>) => React.ReactNode;
|
|
180
|
+
/**
|
|
181
|
+
* Function to render the value label.
|
|
182
|
+
*/
|
|
183
|
+
renderValue?: (props: DOMAttributes<HTMLOutputElement>) => React.ReactNode;
|
|
184
|
+
/**
|
|
185
|
+
* Function to render the thumb. It can be used to add a tooltip or custom icon.
|
|
186
|
+
*/
|
|
187
|
+
renderThumb?: (props: SliderRenderThumbProps) => React.ReactNode;
|
|
188
|
+
}
|
|
189
|
+
type UseSliderProps = Omit<Props, keyof ValueBase<SliderValue>> & AriaSliderProps & SliderVariantProps;
|
|
190
|
+
declare function useSlider(originalProps: UseSliderProps): {
|
|
191
|
+
Component: _sytechui_system.As<any>;
|
|
192
|
+
state: _react_stately_slider.SliderState;
|
|
193
|
+
value: string;
|
|
194
|
+
domRef: react.RefObject<HTMLElement>;
|
|
195
|
+
label: ReactNode;
|
|
196
|
+
steps: number;
|
|
197
|
+
marks: SliderStepMark[];
|
|
198
|
+
startContent: ReactNode;
|
|
199
|
+
endContent: ReactNode;
|
|
200
|
+
getStepProps: (index: number) => {
|
|
201
|
+
className: string;
|
|
202
|
+
"data-slot": string;
|
|
203
|
+
"data-in-range": boolean;
|
|
204
|
+
style: {
|
|
205
|
+
[x: string]: string;
|
|
206
|
+
};
|
|
207
|
+
};
|
|
208
|
+
getBaseProps: PropGetter;
|
|
209
|
+
getValue: ((value: SliderValue) => string) | undefined;
|
|
210
|
+
renderLabel: ((props: DOMAttributes<HTMLLabelElement>) => React.ReactNode) | undefined;
|
|
211
|
+
renderValue: ((props: DOMAttributes<HTMLOutputElement>) => React.ReactNode) | undefined;
|
|
212
|
+
getTrackWrapperProps: PropGetter;
|
|
213
|
+
getLabelWrapperProps: PropGetter;
|
|
214
|
+
getLabelProps: PropGetter;
|
|
215
|
+
getValueProps: PropGetter;
|
|
216
|
+
getTrackProps: PropGetter;
|
|
217
|
+
getFillerProps: PropGetter;
|
|
218
|
+
getThumbProps: (index: number) => SliderThumbProps;
|
|
219
|
+
getMarkProps: (mark: SliderStepMark) => {
|
|
220
|
+
className: string;
|
|
221
|
+
"data-slot": string;
|
|
222
|
+
"data-in-range": boolean;
|
|
223
|
+
style: {
|
|
224
|
+
[x: string]: string;
|
|
225
|
+
};
|
|
226
|
+
onMouseDown: (e: React.MouseEvent) => void;
|
|
227
|
+
onPointerDown: (e: React.PointerEvent) => void;
|
|
228
|
+
onClick: (e: any) => void;
|
|
229
|
+
};
|
|
230
|
+
getStartContentProps: PropGetter;
|
|
231
|
+
getEndContentProps: PropGetter;
|
|
232
|
+
};
|
|
233
|
+
type UseSliderReturn = ReturnType<typeof useSlider>;
|
|
234
|
+
|
|
235
|
+
export { type SliderRenderThumbProps as S, type UseSliderProps as U, type SliderStepMark as a, type SliderValue as b, type UseSliderThumbProps as c, type UseSliderThumbReturn as d, useSliderThumb as e, type SliderThumbProps as f, SliderThumb as g, type UseSliderReturn as h, useSlider as u };
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { RefObject, ReactNode } from 'react';
|
|
3
|
+
import * as _react_stately_slider from '@react-stately/slider';
|
|
4
|
+
import { SliderState } from '@react-stately/slider';
|
|
5
|
+
import * as _sytechui_system from '@sytechui/system';
|
|
6
|
+
import { HTMLHeroUIProps, PropGetter, DOMAttributes } from '@sytechui/system';
|
|
7
|
+
import { SliderVariantProps, SlotsToClasses, SliderSlots } from '@sytechui/theme';
|
|
8
|
+
import { ReactRef } from '@sytechui/react-utils';
|
|
9
|
+
import { AriaSliderThumbProps, AriaSliderProps } from '@react-aria/slider';
|
|
10
|
+
import { TooltipProps } from '@sytechui/tooltip';
|
|
11
|
+
import { ValueBase } from '@react-types/shared';
|
|
12
|
+
|
|
13
|
+
interface Props$1 extends HTMLHeroUIProps<"div"> {
|
|
14
|
+
/**
|
|
15
|
+
* Ref to the DOM node.
|
|
16
|
+
*/
|
|
17
|
+
ref?: ReactRef<HTMLElement | null>;
|
|
18
|
+
/**
|
|
19
|
+
* slider state, created via `useSliderState`.
|
|
20
|
+
*/
|
|
21
|
+
state: SliderState;
|
|
22
|
+
/**
|
|
23
|
+
* A ref to the track element.
|
|
24
|
+
*/
|
|
25
|
+
trackRef: RefObject<HTMLDivElement>;
|
|
26
|
+
/**
|
|
27
|
+
* @internal
|
|
28
|
+
*/
|
|
29
|
+
isVertical: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* @internal
|
|
32
|
+
*/
|
|
33
|
+
showTooltip?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* @internal
|
|
36
|
+
*/
|
|
37
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
38
|
+
/**
|
|
39
|
+
* @internal
|
|
40
|
+
*/
|
|
41
|
+
tooltipProps?: UseSliderProps["tooltipProps"];
|
|
42
|
+
/**
|
|
43
|
+
* A function that returns the content to display as the tooltip label. (in analogy to getValue)
|
|
44
|
+
* @param value - The value of the slider, array or single number.
|
|
45
|
+
* @param index - The index of the thumb, if multiple thumbs are used.
|
|
46
|
+
* In addition to formatting with tooltipValueFormatOptions if number is returned.
|
|
47
|
+
*/
|
|
48
|
+
getTooltipValue?: (value: SliderValue, index?: number) => string | number;
|
|
49
|
+
/**
|
|
50
|
+
* Function to render the thumb. It can be used to add a tooltip or custom icon.
|
|
51
|
+
*/
|
|
52
|
+
renderThumb?: UseSliderProps["renderThumb"];
|
|
53
|
+
}
|
|
54
|
+
type UseSliderThumbProps = Props$1 & AriaSliderThumbProps & SliderVariantProps;
|
|
55
|
+
declare function useSliderThumb(props: UseSliderThumbProps): {
|
|
56
|
+
Component: _sytechui_system.As<any>;
|
|
57
|
+
index: number | undefined;
|
|
58
|
+
showTooltip: boolean | undefined;
|
|
59
|
+
renderThumb: ((props: SliderRenderThumbProps) => React.ReactNode) | undefined;
|
|
60
|
+
getThumbProps: PropGetter;
|
|
61
|
+
getTooltipProps: () => TooltipProps;
|
|
62
|
+
getInputProps: PropGetter;
|
|
63
|
+
};
|
|
64
|
+
type UseSliderThumbReturn = ReturnType<typeof useSliderThumb>;
|
|
65
|
+
|
|
66
|
+
interface SliderThumbProps extends UseSliderThumbProps {
|
|
67
|
+
}
|
|
68
|
+
declare const SliderThumb: _sytechui_system.InternalForwardRefRenderFunction<"div", SliderThumbProps, never>;
|
|
69
|
+
|
|
70
|
+
type SliderValue = number | number[];
|
|
71
|
+
type SliderStepMark = {
|
|
72
|
+
value: number;
|
|
73
|
+
label: string;
|
|
74
|
+
};
|
|
75
|
+
type SliderRenderThumbProps = DOMAttributes<HTMLDivElement> & {
|
|
76
|
+
index?: number;
|
|
77
|
+
};
|
|
78
|
+
interface Props extends HTMLHeroUIProps<"div"> {
|
|
79
|
+
/**
|
|
80
|
+
* Ref to the DOM node.
|
|
81
|
+
*/
|
|
82
|
+
ref?: ReactRef<HTMLElement | null>;
|
|
83
|
+
/**
|
|
84
|
+
* The content to display as the label.
|
|
85
|
+
*/
|
|
86
|
+
label?: ReactNode;
|
|
87
|
+
/**
|
|
88
|
+
* The input name.
|
|
89
|
+
*/
|
|
90
|
+
name?: string;
|
|
91
|
+
/**
|
|
92
|
+
* The offset from which to start the fill.
|
|
93
|
+
*/
|
|
94
|
+
fillOffset?: number;
|
|
95
|
+
/**
|
|
96
|
+
* The display format of the value label.
|
|
97
|
+
*/
|
|
98
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
99
|
+
/**
|
|
100
|
+
* The display format of the tooltip value label.
|
|
101
|
+
* @default formatOptions
|
|
102
|
+
*/
|
|
103
|
+
tooltipValueFormatOptions?: Intl.NumberFormatOptions;
|
|
104
|
+
/**
|
|
105
|
+
* Whether to show the step indicators.
|
|
106
|
+
* @default false
|
|
107
|
+
*/
|
|
108
|
+
showSteps?: boolean;
|
|
109
|
+
/**
|
|
110
|
+
* Whether the thumbs should have a tooltip with the value on hover the slider.
|
|
111
|
+
* @default false
|
|
112
|
+
*/
|
|
113
|
+
showTooltip?: boolean;
|
|
114
|
+
/**
|
|
115
|
+
* Custom steps labels.
|
|
116
|
+
* @example [{value: 0, label: "0"}, {value: 50, label: "50"}, {value: 100, label: "100"}]
|
|
117
|
+
* @default []
|
|
118
|
+
*/
|
|
119
|
+
marks?: SliderStepMark[];
|
|
120
|
+
/**
|
|
121
|
+
* Element to be rendered in the start side of the slider.
|
|
122
|
+
*/
|
|
123
|
+
startContent?: React.ReactNode;
|
|
124
|
+
/**
|
|
125
|
+
* Element to be rendered in the end side of the slider.
|
|
126
|
+
*/
|
|
127
|
+
endContent?: React.ReactNode;
|
|
128
|
+
/**
|
|
129
|
+
* Classname or List of classes to change the classNames of the element.
|
|
130
|
+
* if `className` is passed, it will be added to the base slot.
|
|
131
|
+
*
|
|
132
|
+
* @example
|
|
133
|
+
* ```ts
|
|
134
|
+
* <Slider classNames={{
|
|
135
|
+
* base:"base-classes",
|
|
136
|
+
* step: "step-classes",
|
|
137
|
+
* labelWrapper: "label-wrapper-classes",
|
|
138
|
+
* label: "label-classes",
|
|
139
|
+
* value: "value-classes",
|
|
140
|
+
* trackWrapper: "track-wrapper-classes",
|
|
141
|
+
* track: "track-classes",
|
|
142
|
+
* filler: "filler-classes",
|
|
143
|
+
* thumb: "thumb-classes",
|
|
144
|
+
* mark: "mark-classes",
|
|
145
|
+
* }} />
|
|
146
|
+
* ```
|
|
147
|
+
*/
|
|
148
|
+
classNames?: SlotsToClasses<SliderSlots>;
|
|
149
|
+
/**
|
|
150
|
+
* Tooltip props.
|
|
151
|
+
* @see [Tooltip](https://heroui.com/components/tooltip) for more details.
|
|
152
|
+
* @default {
|
|
153
|
+
* offset: 15,
|
|
154
|
+
* delay: 0,
|
|
155
|
+
* size: "sm",
|
|
156
|
+
* showArrow: true,
|
|
157
|
+
* placement: "top", // "right" for vertical slider
|
|
158
|
+
* content: [sliderValue],
|
|
159
|
+
* color: sliderProps?.color, // same as the slider color
|
|
160
|
+
* isDisabled: sliderProps?.isDisabled,
|
|
161
|
+
* }
|
|
162
|
+
*/
|
|
163
|
+
tooltipProps?: Partial<TooltipProps>;
|
|
164
|
+
/**
|
|
165
|
+
* A function that returns the content to display as the value label.
|
|
166
|
+
* Overrides default formatted number.
|
|
167
|
+
*/
|
|
168
|
+
getValue?: (value: SliderValue) => string;
|
|
169
|
+
/**
|
|
170
|
+
* A function that returns the content to display as the tooltip label. (in analogy to getValue)
|
|
171
|
+
* @param value - The value of the slider, array or single number.
|
|
172
|
+
* @param index - The index of the thumb, if multiple thumbs are used.
|
|
173
|
+
* In addition to formatting with tooltipValueFormatOptions if number is returned.
|
|
174
|
+
*/
|
|
175
|
+
getTooltipValue?: (value: SliderValue, index?: number) => string | number;
|
|
176
|
+
/**
|
|
177
|
+
* Function to render the label.
|
|
178
|
+
*/
|
|
179
|
+
renderLabel?: (props: DOMAttributes<HTMLLabelElement>) => React.ReactNode;
|
|
180
|
+
/**
|
|
181
|
+
* Function to render the value label.
|
|
182
|
+
*/
|
|
183
|
+
renderValue?: (props: DOMAttributes<HTMLOutputElement>) => React.ReactNode;
|
|
184
|
+
/**
|
|
185
|
+
* Function to render the thumb. It can be used to add a tooltip or custom icon.
|
|
186
|
+
*/
|
|
187
|
+
renderThumb?: (props: SliderRenderThumbProps) => React.ReactNode;
|
|
188
|
+
}
|
|
189
|
+
type UseSliderProps = Omit<Props, keyof ValueBase<SliderValue>> & AriaSliderProps & SliderVariantProps;
|
|
190
|
+
declare function useSlider(originalProps: UseSliderProps): {
|
|
191
|
+
Component: _sytechui_system.As<any>;
|
|
192
|
+
state: _react_stately_slider.SliderState;
|
|
193
|
+
value: string;
|
|
194
|
+
domRef: react.RefObject<HTMLElement>;
|
|
195
|
+
label: ReactNode;
|
|
196
|
+
steps: number;
|
|
197
|
+
marks: SliderStepMark[];
|
|
198
|
+
startContent: ReactNode;
|
|
199
|
+
endContent: ReactNode;
|
|
200
|
+
getStepProps: (index: number) => {
|
|
201
|
+
className: string;
|
|
202
|
+
"data-slot": string;
|
|
203
|
+
"data-in-range": boolean;
|
|
204
|
+
style: {
|
|
205
|
+
[x: string]: string;
|
|
206
|
+
};
|
|
207
|
+
};
|
|
208
|
+
getBaseProps: PropGetter;
|
|
209
|
+
getValue: ((value: SliderValue) => string) | undefined;
|
|
210
|
+
renderLabel: ((props: DOMAttributes<HTMLLabelElement>) => React.ReactNode) | undefined;
|
|
211
|
+
renderValue: ((props: DOMAttributes<HTMLOutputElement>) => React.ReactNode) | undefined;
|
|
212
|
+
getTrackWrapperProps: PropGetter;
|
|
213
|
+
getLabelWrapperProps: PropGetter;
|
|
214
|
+
getLabelProps: PropGetter;
|
|
215
|
+
getValueProps: PropGetter;
|
|
216
|
+
getTrackProps: PropGetter;
|
|
217
|
+
getFillerProps: PropGetter;
|
|
218
|
+
getThumbProps: (index: number) => SliderThumbProps;
|
|
219
|
+
getMarkProps: (mark: SliderStepMark) => {
|
|
220
|
+
className: string;
|
|
221
|
+
"data-slot": string;
|
|
222
|
+
"data-in-range": boolean;
|
|
223
|
+
style: {
|
|
224
|
+
[x: string]: string;
|
|
225
|
+
};
|
|
226
|
+
onMouseDown: (e: React.MouseEvent) => void;
|
|
227
|
+
onPointerDown: (e: React.PointerEvent) => void;
|
|
228
|
+
onClick: (e: any) => void;
|
|
229
|
+
};
|
|
230
|
+
getStartContentProps: PropGetter;
|
|
231
|
+
getEndContentProps: PropGetter;
|
|
232
|
+
};
|
|
233
|
+
type UseSliderReturn = ReturnType<typeof useSlider>;
|
|
234
|
+
|
|
235
|
+
export { type SliderRenderThumbProps as S, type UseSliderProps as U, type SliderStepMark as a, type SliderValue as b, type UseSliderThumbProps as c, type UseSliderThumbReturn as d, useSliderThumb as e, type SliderThumbProps as f, SliderThumb as g, type UseSliderReturn as h, useSlider as u };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { c as UseSliderThumbProps, d as UseSliderThumbReturn, e as useSliderThumb } from './use-slider-Bo_Y5OvC.mjs';
|
|
2
|
+
import '@sytechui/system';
|
|
3
|
+
import '@sytechui/theme';
|
|
4
|
+
import '@sytechui/react-utils';
|
|
5
|
+
import 'react';
|
|
6
|
+
import '@react-aria/slider';
|
|
7
|
+
import '@react-stately/slider';
|
|
8
|
+
import '@sytechui/tooltip';
|
|
9
|
+
import '@react-types/shared';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { c as UseSliderThumbProps, d as UseSliderThumbReturn, e as useSliderThumb } from './use-slider-Bo_Y5OvC.js';
|
|
2
|
+
import '@sytechui/system';
|
|
3
|
+
import '@sytechui/theme';
|
|
4
|
+
import '@sytechui/react-utils';
|
|
5
|
+
import 'react';
|
|
6
|
+
import '@react-aria/slider';
|
|
7
|
+
import '@react-stately/slider';
|
|
8
|
+
import '@sytechui/tooltip';
|
|
9
|
+
import '@react-types/shared';
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/use-slider-thumb.ts
|
|
22
|
+
var use_slider_thumb_exports = {};
|
|
23
|
+
__export(use_slider_thumb_exports, {
|
|
24
|
+
useSliderThumb: () => useSliderThumb
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(use_slider_thumb_exports);
|
|
27
|
+
var import_slider = require("@react-aria/slider");
|
|
28
|
+
var import_react_utils = require("@sytechui/react-utils");
|
|
29
|
+
var import_react = require("react");
|
|
30
|
+
var import_interactions = require("@react-aria/interactions");
|
|
31
|
+
var import_focus = require("@react-aria/focus");
|
|
32
|
+
var import_shared_utils = require("@sytechui/shared-utils");
|
|
33
|
+
var import_i18n = require("@react-aria/i18n");
|
|
34
|
+
function useSliderThumb(props) {
|
|
35
|
+
const {
|
|
36
|
+
ref,
|
|
37
|
+
as,
|
|
38
|
+
state,
|
|
39
|
+
index,
|
|
40
|
+
name,
|
|
41
|
+
trackRef,
|
|
42
|
+
className,
|
|
43
|
+
tooltipProps,
|
|
44
|
+
isVertical,
|
|
45
|
+
showTooltip,
|
|
46
|
+
getTooltipValue,
|
|
47
|
+
formatOptions,
|
|
48
|
+
renderThumb,
|
|
49
|
+
...otherProps
|
|
50
|
+
} = props;
|
|
51
|
+
const Component = as || "div";
|
|
52
|
+
const domRef = (0, import_react_utils.useDOMRef)(ref);
|
|
53
|
+
const inputRef = (0, import_react.useRef)(null);
|
|
54
|
+
const numberFormatter = (0, import_i18n.useNumberFormatter)(formatOptions);
|
|
55
|
+
const { thumbProps, inputProps, isDragging, isFocused } = (0, import_slider.useSliderThumb)(
|
|
56
|
+
{
|
|
57
|
+
index,
|
|
58
|
+
trackRef,
|
|
59
|
+
inputRef,
|
|
60
|
+
name,
|
|
61
|
+
...otherProps
|
|
62
|
+
},
|
|
63
|
+
state
|
|
64
|
+
);
|
|
65
|
+
const { hoverProps, isHovered } = (0, import_interactions.useHover)({
|
|
66
|
+
isDisabled: state.isDisabled
|
|
67
|
+
});
|
|
68
|
+
const { focusProps, isFocusVisible } = (0, import_focus.useFocusRing)();
|
|
69
|
+
const { pressProps, isPressed } = (0, import_interactions.usePress)({
|
|
70
|
+
isDisabled: state.isDisabled
|
|
71
|
+
});
|
|
72
|
+
const getThumbProps = (props2 = {}) => {
|
|
73
|
+
return {
|
|
74
|
+
ref: domRef,
|
|
75
|
+
"data-slot": "thumb",
|
|
76
|
+
"data-hover": (0, import_shared_utils.dataAttr)(isHovered),
|
|
77
|
+
"data-pressed": (0, import_shared_utils.dataAttr)(isPressed),
|
|
78
|
+
"data-dragging": (0, import_shared_utils.dataAttr)(isDragging),
|
|
79
|
+
"data-focused": (0, import_shared_utils.dataAttr)(isFocused),
|
|
80
|
+
"data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
|
|
81
|
+
"aria-label": props2["aria-label"] || `Slider thumb ${index !== void 0 ? `${index + 1}` : ""}`,
|
|
82
|
+
...(0, import_shared_utils.mergeProps)(thumbProps, pressProps, hoverProps, otherProps),
|
|
83
|
+
className,
|
|
84
|
+
...props2
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
const getTooltipProps = () => {
|
|
88
|
+
const stateValue = (tooltipProps == null ? void 0 : tooltipProps.content) ? tooltipProps.content : getTooltipValue ? state.values.length === 1 ? getTooltipValue(state.values[index != null ? index : 0]) : getTooltipValue(state.values, index != null ? index : 0) : state.values[index != null ? index : 0];
|
|
89
|
+
const value = numberFormatter && typeof stateValue === "number" ? numberFormatter.format(stateValue) : stateValue;
|
|
90
|
+
return {
|
|
91
|
+
...tooltipProps,
|
|
92
|
+
placement: (tooltipProps == null ? void 0 : tooltipProps.placement) ? tooltipProps == null ? void 0 : tooltipProps.placement : isVertical ? "right" : "top",
|
|
93
|
+
content: (tooltipProps == null ? void 0 : tooltipProps.content) ? tooltipProps == null ? void 0 : tooltipProps.content : value,
|
|
94
|
+
updatePositionDeps: [isDragging, isHovered, isFocused, isFocusVisible, value],
|
|
95
|
+
isOpen: (tooltipProps == null ? void 0 : tooltipProps.isOpen) !== void 0 ? tooltipProps == null ? void 0 : tooltipProps.isOpen : isHovered || isDragging || isFocused || isFocusVisible,
|
|
96
|
+
role: "tooltip",
|
|
97
|
+
"aria-label": `Current value: ${value}`
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
const getInputProps = (props2 = {}) => {
|
|
101
|
+
return {
|
|
102
|
+
ref: inputRef,
|
|
103
|
+
...(0, import_shared_utils.mergeProps)(inputProps, focusProps),
|
|
104
|
+
...props2
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
return {
|
|
108
|
+
Component,
|
|
109
|
+
index,
|
|
110
|
+
showTooltip,
|
|
111
|
+
renderThumb,
|
|
112
|
+
getThumbProps,
|
|
113
|
+
getTooltipProps,
|
|
114
|
+
getInputProps
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
118
|
+
0 && (module.exports = {
|
|
119
|
+
useSliderThumb
|
|
120
|
+
});
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import 'react';
|
|
2
|
+
import '@react-stately/slider';
|
|
3
|
+
import '@sytechui/system';
|
|
4
|
+
import '@sytechui/theme';
|
|
5
|
+
import '@sytechui/react-utils';
|
|
6
|
+
import '@react-aria/slider';
|
|
7
|
+
import '@sytechui/tooltip';
|
|
8
|
+
import '@react-types/shared';
|
|
9
|
+
export { S as SliderRenderThumbProps, a as SliderStepMark, b as SliderValue, U as UseSliderProps, h as UseSliderReturn, u as useSlider } from './use-slider-Bo_Y5OvC.mjs';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import 'react';
|
|
2
|
+
import '@react-stately/slider';
|
|
3
|
+
import '@sytechui/system';
|
|
4
|
+
import '@sytechui/theme';
|
|
5
|
+
import '@sytechui/react-utils';
|
|
6
|
+
import '@react-aria/slider';
|
|
7
|
+
import '@sytechui/tooltip';
|
|
8
|
+
import '@react-types/shared';
|
|
9
|
+
export { S as SliderRenderThumbProps, a as SliderStepMark, b as SliderValue, U as UseSliderProps, h as UseSliderReturn, u as useSlider } from './use-slider-Bo_Y5OvC.js';
|