@radix-ui/react-slider 1.2.0-rc.5 → 1.2.0-rc.7

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 (6) hide show
  1. package/dist/index.d.mts +7 -8
  2. package/dist/index.d.ts +7 -8
  3. package/dist/index.js +556 -544
  4. package/dist/index.js.map +3 -3
  5. package/dist/index.mjs.map +2 -2
  6. package/package.json +14 -14
package/dist/index.js CHANGED
@@ -1,570 +1,582 @@
1
1
  "use strict";
2
2
  "use client";
3
- (() => {
4
- var __create = Object.create;
5
- var __defProp = Object.defineProperty;
6
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
- var __getOwnPropNames = Object.getOwnPropertyNames;
8
- var __getProtoOf = Object.getPrototypeOf;
9
- var __hasOwnProp = Object.prototype.hasOwnProperty;
10
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
11
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
12
- }) : x)(function(x) {
13
- if (typeof require !== "undefined") return require.apply(this, arguments);
14
- throw Error('Dynamic require of "' + x + '" is not supported');
15
- });
16
- var __copyProps = (to, from, except, desc) => {
17
- if (from && typeof from === "object" || typeof from === "function") {
18
- for (let key of __getOwnPropNames(from))
19
- if (!__hasOwnProp.call(to, key) && key !== except)
20
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
21
- }
22
- return to;
23
- };
24
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
25
- // If the importer is in node compatibility mode or this is not an ESM
26
- // file that has been converted to a CommonJS file using a Babel-
27
- // compatible transform (i.e. "__esModule" has not been set), then set
28
- // "default" to the CommonJS "module.exports" for node compatibility.
29
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
30
- mod
31
- ));
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
32
30
 
33
- // packages/react/slider/src/Slider.tsx
34
- var React = __toESM(__require("react"));
35
- var import_number = __require("@radix-ui/number");
36
- var import_primitive = __require("@radix-ui/primitive");
37
- var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
38
- var import_react_context = __require("@radix-ui/react-context");
39
- var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
40
- var import_react_direction = __require("@radix-ui/react-direction");
41
- var import_react_use_previous = __require("@radix-ui/react-use-previous");
42
- var import_react_use_size = __require("@radix-ui/react-use-size");
43
- var import_react_primitive = __require("@radix-ui/react-primitive");
44
- var import_react_collection = __require("@radix-ui/react-collection");
45
- var import_jsx_runtime = __require("react/jsx-runtime");
46
- var PAGE_KEYS = ["PageUp", "PageDown"];
47
- var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
48
- var BACK_KEYS = {
49
- "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
50
- "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
51
- "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
52
- "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
53
- };
54
- var SLIDER_NAME = "Slider";
55
- var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(SLIDER_NAME);
56
- var [createSliderContext, createSliderScope] = (0, import_react_context.createContextScope)(SLIDER_NAME, [
57
- createCollectionScope
58
- ]);
59
- var [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
60
- var Slider = React.forwardRef(
61
- (props, forwardedRef) => {
62
- const {
63
- name,
64
- min = 0,
65
- max = 100,
66
- step = 1,
67
- orientation = "horizontal",
68
- disabled = false,
69
- minStepsBetweenThumbs = 0,
70
- defaultValue = [min],
71
- value,
72
- onValueChange = () => {
73
- },
74
- onValueCommit = () => {
75
- },
76
- inverted = false,
77
- ...sliderProps
78
- } = props;
79
- const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
80
- const valueIndexToChangeRef = React.useRef(0);
81
- const isHorizontal = orientation === "horizontal";
82
- const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
83
- const [values = [], setValues] = (0, import_react_use_controllable_state.useControllableState)({
84
- prop: value,
85
- defaultProp: defaultValue,
86
- onChange: (value2) => {
87
- const thumbs = [...thumbRefs.current];
88
- thumbs[valueIndexToChangeRef.current]?.focus();
89
- onValueChange(value2);
90
- }
91
- });
92
- const valuesBeforeSlideStartRef = React.useRef(values);
93
- function handleSlideStart(value2) {
94
- const closestIndex = getClosestValueIndex(values, value2);
95
- updateValues(value2, closestIndex);
96
- }
97
- function handleSlideMove(value2) {
98
- updateValues(value2, valueIndexToChangeRef.current);
99
- }
100
- function handleSlideEnd() {
101
- const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];
102
- const nextValue = values[valueIndexToChangeRef.current];
103
- const hasChanged = nextValue !== prevValue;
104
- if (hasChanged) onValueCommit(values);
105
- }
106
- function updateValues(value2, atIndex, { commit } = { commit: false }) {
107
- const decimalCount = getDecimalCount(step);
108
- const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
109
- const nextValue = (0, import_number.clamp)(snapToStep, [min, max]);
110
- setValues((prevValues = []) => {
111
- const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
112
- if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
113
- valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
114
- const hasChanged = String(nextValues) !== String(prevValues);
115
- if (hasChanged && commit) onValueCommit(nextValues);
116
- return hasChanged ? nextValues : prevValues;
117
- } else {
118
- return prevValues;
119
- }
120
- });
31
+ // packages/react/slider/src/index.ts
32
+ var src_exports = {};
33
+ __export(src_exports, {
34
+ Range: () => Range,
35
+ Root: () => Root,
36
+ Slider: () => Slider,
37
+ SliderRange: () => SliderRange,
38
+ SliderThumb: () => SliderThumb,
39
+ SliderTrack: () => SliderTrack,
40
+ Thumb: () => Thumb,
41
+ Track: () => Track,
42
+ createSliderScope: () => createSliderScope
43
+ });
44
+ module.exports = __toCommonJS(src_exports);
45
+
46
+ // packages/react/slider/src/Slider.tsx
47
+ var React = __toESM(require("react"));
48
+ var import_number = require("@radix-ui/number");
49
+ var import_primitive = require("@radix-ui/primitive");
50
+ var import_react_compose_refs = require("@radix-ui/react-compose-refs");
51
+ var import_react_context = require("@radix-ui/react-context");
52
+ var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
53
+ var import_react_direction = require("@radix-ui/react-direction");
54
+ var import_react_use_previous = require("@radix-ui/react-use-previous");
55
+ var import_react_use_size = require("@radix-ui/react-use-size");
56
+ var import_react_primitive = require("@radix-ui/react-primitive");
57
+ var import_react_collection = require("@radix-ui/react-collection");
58
+ var import_jsx_runtime = require("react/jsx-runtime");
59
+ var PAGE_KEYS = ["PageUp", "PageDown"];
60
+ var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
61
+ var BACK_KEYS = {
62
+ "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
63
+ "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
64
+ "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
65
+ "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
66
+ };
67
+ var SLIDER_NAME = "Slider";
68
+ var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(SLIDER_NAME);
69
+ var [createSliderContext, createSliderScope] = (0, import_react_context.createContextScope)(SLIDER_NAME, [
70
+ createCollectionScope
71
+ ]);
72
+ var [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
73
+ var Slider = React.forwardRef(
74
+ (props, forwardedRef) => {
75
+ const {
76
+ name,
77
+ min = 0,
78
+ max = 100,
79
+ step = 1,
80
+ orientation = "horizontal",
81
+ disabled = false,
82
+ minStepsBetweenThumbs = 0,
83
+ defaultValue = [min],
84
+ value,
85
+ onValueChange = () => {
86
+ },
87
+ onValueCommit = () => {
88
+ },
89
+ inverted = false,
90
+ ...sliderProps
91
+ } = props;
92
+ const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
93
+ const valueIndexToChangeRef = React.useRef(0);
94
+ const isHorizontal = orientation === "horizontal";
95
+ const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
96
+ const [values = [], setValues] = (0, import_react_use_controllable_state.useControllableState)({
97
+ prop: value,
98
+ defaultProp: defaultValue,
99
+ onChange: (value2) => {
100
+ const thumbs = [...thumbRefs.current];
101
+ thumbs[valueIndexToChangeRef.current]?.focus();
102
+ onValueChange(value2);
121
103
  }
122
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
123
- SliderProvider,
124
- {
125
- scope: props.__scopeSlider,
126
- name,
127
- disabled,
128
- min,
129
- max,
130
- valueIndexToChangeRef,
131
- thumbs: thumbRefs.current,
132
- values,
133
- orientation,
134
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
135
- SliderOrientation,
136
- {
137
- "aria-disabled": disabled,
138
- "data-disabled": disabled ? "" : void 0,
139
- ...sliderProps,
140
- ref: forwardedRef,
141
- onPointerDown: (0, import_primitive.composeEventHandlers)(sliderProps.onPointerDown, () => {
142
- if (!disabled) valuesBeforeSlideStartRef.current = values;
143
- }),
144
- min,
145
- max,
146
- inverted,
147
- onSlideStart: disabled ? void 0 : handleSlideStart,
148
- onSlideMove: disabled ? void 0 : handleSlideMove,
149
- onSlideEnd: disabled ? void 0 : handleSlideEnd,
150
- onHomeKeyDown: () => !disabled && updateValues(min, 0, { commit: true }),
151
- onEndKeyDown: () => !disabled && updateValues(max, values.length - 1, { commit: true }),
152
- onStepKeyDown: ({ event, direction: stepDirection }) => {
153
- if (!disabled) {
154
- const isPageKey = PAGE_KEYS.includes(event.key);
155
- const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
156
- const multiplier = isSkipKey ? 10 : 1;
157
- const atIndex = valueIndexToChangeRef.current;
158
- const value2 = values[atIndex];
159
- const stepInDirection = step * multiplier * stepDirection;
160
- updateValues(value2 + stepInDirection, atIndex, { commit: true });
161
- }
162
- }
163
- }
164
- ) }) })
165
- }
166
- );
104
+ });
105
+ const valuesBeforeSlideStartRef = React.useRef(values);
106
+ function handleSlideStart(value2) {
107
+ const closestIndex = getClosestValueIndex(values, value2);
108
+ updateValues(value2, closestIndex);
167
109
  }
168
- );
169
- Slider.displayName = SLIDER_NAME;
170
- var [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
171
- startEdge: "left",
172
- endEdge: "right",
173
- size: "width",
174
- direction: 1
175
- });
176
- var SliderHorizontal = React.forwardRef(
177
- (props, forwardedRef) => {
178
- const {
179
- min,
180
- max,
181
- dir,
182
- inverted,
183
- onSlideStart,
184
- onSlideMove,
185
- onSlideEnd,
186
- onStepKeyDown,
187
- ...sliderProps
188
- } = props;
189
- const [slider, setSlider] = React.useState(null);
190
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setSlider(node));
191
- const rectRef = React.useRef();
192
- const direction = (0, import_react_direction.useDirection)(dir);
193
- const isDirectionLTR = direction === "ltr";
194
- const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
195
- function getValueFromPointer(pointerPosition) {
196
- const rect = rectRef.current || slider.getBoundingClientRect();
197
- const input = [0, rect.width];
198
- const output = isSlidingFromLeft ? [min, max] : [max, min];
199
- const value = linearScale(input, output);
200
- rectRef.current = rect;
201
- return value(pointerPosition - rect.left);
202
- }
203
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
204
- SliderOrientationProvider,
205
- {
206
- scope: props.__scopeSlider,
207
- startEdge: isSlidingFromLeft ? "left" : "right",
208
- endEdge: isSlidingFromLeft ? "right" : "left",
209
- direction: isSlidingFromLeft ? 1 : -1,
210
- size: "width",
211
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
212
- SliderImpl,
213
- {
214
- dir: direction,
215
- "data-orientation": "horizontal",
216
- ...sliderProps,
217
- ref: composedRefs,
218
- style: {
219
- ...sliderProps.style,
220
- ["--radix-slider-thumb-transform"]: "translateX(-50%)"
221
- },
222
- onSlideStart: (event) => {
223
- const value = getValueFromPointer(event.clientX);
224
- onSlideStart?.(value);
225
- },
226
- onSlideMove: (event) => {
227
- const value = getValueFromPointer(event.clientX);
228
- onSlideMove?.(value);
229
- },
230
- onSlideEnd: () => {
231
- rectRef.current = void 0;
232
- onSlideEnd?.();
233
- },
234
- onStepKeyDown: (event) => {
235
- const slideDirection = isSlidingFromLeft ? "from-left" : "from-right";
236
- const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
237
- onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
238
- }
239
- }
240
- )
110
+ function handleSlideMove(value2) {
111
+ updateValues(value2, valueIndexToChangeRef.current);
112
+ }
113
+ function handleSlideEnd() {
114
+ const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];
115
+ const nextValue = values[valueIndexToChangeRef.current];
116
+ const hasChanged = nextValue !== prevValue;
117
+ if (hasChanged) onValueCommit(values);
118
+ }
119
+ function updateValues(value2, atIndex, { commit } = { commit: false }) {
120
+ const decimalCount = getDecimalCount(step);
121
+ const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
122
+ const nextValue = (0, import_number.clamp)(snapToStep, [min, max]);
123
+ setValues((prevValues = []) => {
124
+ const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
125
+ if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
126
+ valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
127
+ const hasChanged = String(nextValues) !== String(prevValues);
128
+ if (hasChanged && commit) onValueCommit(nextValues);
129
+ return hasChanged ? nextValues : prevValues;
130
+ } else {
131
+ return prevValues;
241
132
  }
242
- );
133
+ });
243
134
  }
244
- );
245
- var SliderVertical = React.forwardRef(
246
- (props, forwardedRef) => {
247
- const {
135
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
136
+ SliderProvider,
137
+ {
138
+ scope: props.__scopeSlider,
139
+ name,
140
+ disabled,
248
141
  min,
249
142
  max,
250
- inverted,
251
- onSlideStart,
252
- onSlideMove,
253
- onSlideEnd,
254
- onStepKeyDown,
255
- ...sliderProps
256
- } = props;
257
- const sliderRef = React.useRef(null);
258
- const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, sliderRef);
259
- const rectRef = React.useRef();
260
- const isSlidingFromBottom = !inverted;
261
- function getValueFromPointer(pointerPosition) {
262
- const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
263
- const input = [0, rect.height];
264
- const output = isSlidingFromBottom ? [max, min] : [min, max];
265
- const value = linearScale(input, output);
266
- rectRef.current = rect;
267
- return value(pointerPosition - rect.top);
268
- }
269
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
270
- SliderOrientationProvider,
271
- {
272
- scope: props.__scopeSlider,
273
- startEdge: isSlidingFromBottom ? "bottom" : "top",
274
- endEdge: isSlidingFromBottom ? "top" : "bottom",
275
- size: "height",
276
- direction: isSlidingFromBottom ? 1 : -1,
277
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
278
- SliderImpl,
279
- {
280
- "data-orientation": "vertical",
281
- ...sliderProps,
282
- ref,
283
- style: {
284
- ...sliderProps.style,
285
- ["--radix-slider-thumb-transform"]: "translateY(50%)"
286
- },
287
- onSlideStart: (event) => {
288
- const value = getValueFromPointer(event.clientY);
289
- onSlideStart?.(value);
290
- },
291
- onSlideMove: (event) => {
292
- const value = getValueFromPointer(event.clientY);
293
- onSlideMove?.(value);
294
- },
295
- onSlideEnd: () => {
296
- rectRef.current = void 0;
297
- onSlideEnd?.();
298
- },
299
- onStepKeyDown: (event) => {
300
- const slideDirection = isSlidingFromBottom ? "from-bottom" : "from-top";
301
- const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
302
- onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
143
+ valueIndexToChangeRef,
144
+ thumbs: thumbRefs.current,
145
+ values,
146
+ orientation,
147
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
148
+ SliderOrientation,
149
+ {
150
+ "aria-disabled": disabled,
151
+ "data-disabled": disabled ? "" : void 0,
152
+ ...sliderProps,
153
+ ref: forwardedRef,
154
+ onPointerDown: (0, import_primitive.composeEventHandlers)(sliderProps.onPointerDown, () => {
155
+ if (!disabled) valuesBeforeSlideStartRef.current = values;
156
+ }),
157
+ min,
158
+ max,
159
+ inverted,
160
+ onSlideStart: disabled ? void 0 : handleSlideStart,
161
+ onSlideMove: disabled ? void 0 : handleSlideMove,
162
+ onSlideEnd: disabled ? void 0 : handleSlideEnd,
163
+ onHomeKeyDown: () => !disabled && updateValues(min, 0, { commit: true }),
164
+ onEndKeyDown: () => !disabled && updateValues(max, values.length - 1, { commit: true }),
165
+ onStepKeyDown: ({ event, direction: stepDirection }) => {
166
+ if (!disabled) {
167
+ const isPageKey = PAGE_KEYS.includes(event.key);
168
+ const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
169
+ const multiplier = isSkipKey ? 10 : 1;
170
+ const atIndex = valueIndexToChangeRef.current;
171
+ const value2 = values[atIndex];
172
+ const stepInDirection = step * multiplier * stepDirection;
173
+ updateValues(value2 + stepInDirection, atIndex, { commit: true });
303
174
  }
304
175
  }
305
- )
306
- }
307
- );
176
+ }
177
+ ) }) })
178
+ }
179
+ );
180
+ }
181
+ );
182
+ Slider.displayName = SLIDER_NAME;
183
+ var [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
184
+ startEdge: "left",
185
+ endEdge: "right",
186
+ size: "width",
187
+ direction: 1
188
+ });
189
+ var SliderHorizontal = React.forwardRef(
190
+ (props, forwardedRef) => {
191
+ const {
192
+ min,
193
+ max,
194
+ dir,
195
+ inverted,
196
+ onSlideStart,
197
+ onSlideMove,
198
+ onSlideEnd,
199
+ onStepKeyDown,
200
+ ...sliderProps
201
+ } = props;
202
+ const [slider, setSlider] = React.useState(null);
203
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setSlider(node));
204
+ const rectRef = React.useRef();
205
+ const direction = (0, import_react_direction.useDirection)(dir);
206
+ const isDirectionLTR = direction === "ltr";
207
+ const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
208
+ function getValueFromPointer(pointerPosition) {
209
+ const rect = rectRef.current || slider.getBoundingClientRect();
210
+ const input = [0, rect.width];
211
+ const output = isSlidingFromLeft ? [min, max] : [max, min];
212
+ const value = linearScale(input, output);
213
+ rectRef.current = rect;
214
+ return value(pointerPosition - rect.left);
308
215
  }
309
- );
310
- var SliderImpl = React.forwardRef(
311
- (props, forwardedRef) => {
312
- const {
313
- __scopeSlider,
314
- onSlideStart,
315
- onSlideMove,
316
- onSlideEnd,
317
- onHomeKeyDown,
318
- onEndKeyDown,
319
- onStepKeyDown,
320
- ...sliderProps
321
- } = props;
322
- const context = useSliderContext(SLIDER_NAME, __scopeSlider);
323
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
324
- import_react_primitive.Primitive.span,
325
- {
326
- ...sliderProps,
327
- ref: forwardedRef,
328
- onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
329
- if (event.key === "Home") {
330
- onHomeKeyDown(event);
331
- event.preventDefault();
332
- } else if (event.key === "End") {
333
- onEndKeyDown(event);
334
- event.preventDefault();
335
- } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
336
- onStepKeyDown(event);
337
- event.preventDefault();
338
- }
339
- }),
340
- onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
341
- const target = event.target;
342
- target.setPointerCapture(event.pointerId);
343
- event.preventDefault();
344
- if (context.thumbs.has(target)) {
345
- target.focus();
346
- } else {
347
- onSlideStart(event);
216
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
217
+ SliderOrientationProvider,
218
+ {
219
+ scope: props.__scopeSlider,
220
+ startEdge: isSlidingFromLeft ? "left" : "right",
221
+ endEdge: isSlidingFromLeft ? "right" : "left",
222
+ direction: isSlidingFromLeft ? 1 : -1,
223
+ size: "width",
224
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
225
+ SliderImpl,
226
+ {
227
+ dir: direction,
228
+ "data-orientation": "horizontal",
229
+ ...sliderProps,
230
+ ref: composedRefs,
231
+ style: {
232
+ ...sliderProps.style,
233
+ ["--radix-slider-thumb-transform"]: "translateX(-50%)"
234
+ },
235
+ onSlideStart: (event) => {
236
+ const value = getValueFromPointer(event.clientX);
237
+ onSlideStart?.(value);
238
+ },
239
+ onSlideMove: (event) => {
240
+ const value = getValueFromPointer(event.clientX);
241
+ onSlideMove?.(value);
242
+ },
243
+ onSlideEnd: () => {
244
+ rectRef.current = void 0;
245
+ onSlideEnd?.();
246
+ },
247
+ onStepKeyDown: (event) => {
248
+ const slideDirection = isSlidingFromLeft ? "from-left" : "from-right";
249
+ const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
250
+ onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
348
251
  }
349
- }),
350
- onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, (event) => {
351
- const target = event.target;
352
- if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);
353
- }),
354
- onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, (event) => {
355
- const target = event.target;
356
- if (target.hasPointerCapture(event.pointerId)) {
357
- target.releasePointerCapture(event.pointerId);
358
- onSlideEnd(event);
359
- }
360
- })
361
- }
362
- );
363
- }
364
- );
365
- var TRACK_NAME = "SliderTrack";
366
- var SliderTrack = React.forwardRef(
367
- (props, forwardedRef) => {
368
- const { __scopeSlider, ...trackProps } = props;
369
- const context = useSliderContext(TRACK_NAME, __scopeSlider);
370
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
371
- import_react_primitive.Primitive.span,
372
- {
373
- "data-disabled": context.disabled ? "" : void 0,
374
- "data-orientation": context.orientation,
375
- ...trackProps,
376
- ref: forwardedRef
377
- }
378
- );
379
- }
380
- );
381
- SliderTrack.displayName = TRACK_NAME;
382
- var RANGE_NAME = "SliderRange";
383
- var SliderRange = React.forwardRef(
384
- (props, forwardedRef) => {
385
- const { __scopeSlider, ...rangeProps } = props;
386
- const context = useSliderContext(RANGE_NAME, __scopeSlider);
387
- const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
388
- const ref = React.useRef(null);
389
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
390
- const valuesCount = context.values.length;
391
- const percentages = context.values.map(
392
- (value) => convertValueToPercentage(value, context.min, context.max)
393
- );
394
- const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
395
- const offsetEnd = 100 - Math.max(...percentages);
396
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
397
- import_react_primitive.Primitive.span,
398
- {
399
- "data-orientation": context.orientation,
400
- "data-disabled": context.disabled ? "" : void 0,
401
- ...rangeProps,
402
- ref: composedRefs,
403
- style: {
404
- ...props.style,
405
- [orientation.startEdge]: offsetStart + "%",
406
- [orientation.endEdge]: offsetEnd + "%"
407
252
  }
408
- }
409
- );
410
- }
411
- );
412
- SliderRange.displayName = RANGE_NAME;
413
- var THUMB_NAME = "SliderThumb";
414
- var SliderThumb = React.forwardRef(
415
- (props, forwardedRef) => {
416
- const getItems = useCollection(props.__scopeSlider);
417
- const [thumb, setThumb] = React.useState(null);
418
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
419
- const index = React.useMemo(
420
- () => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
421
- [getItems, thumb]
422
- );
423
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
424
- }
425
- );
426
- var SliderThumbImpl = React.forwardRef(
427
- (props, forwardedRef) => {
428
- const { __scopeSlider, index, name, ...thumbProps } = props;
429
- const context = useSliderContext(THUMB_NAME, __scopeSlider);
430
- const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
431
- const [thumb, setThumb] = React.useState(null);
432
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
433
- const isFormControl = thumb ? Boolean(thumb.closest("form")) : true;
434
- const size = (0, import_react_use_size.useSize)(thumb);
435
- const value = context.values[index];
436
- const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
437
- const label = getLabel(index, context.values.length);
438
- const orientationSize = size?.[orientation.size];
439
- const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
440
- React.useEffect(() => {
441
- if (thumb) {
442
- context.thumbs.add(thumb);
443
- return () => {
444
- context.thumbs.delete(thumb);
445
- };
446
- }
447
- }, [thumb, context.thumbs]);
448
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
449
- "span",
450
- {
451
- style: {
452
- transform: "var(--radix-slider-thumb-transform)",
453
- position: "absolute",
454
- [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
455
- },
456
- children: [
457
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
458
- import_react_primitive.Primitive.span,
459
- {
460
- role: "slider",
461
- "aria-label": props["aria-label"] || label,
462
- "aria-valuemin": context.min,
463
- "aria-valuenow": value,
464
- "aria-valuemax": context.max,
465
- "aria-orientation": context.orientation,
466
- "data-orientation": context.orientation,
467
- "data-disabled": context.disabled ? "" : void 0,
468
- tabIndex: context.disabled ? void 0 : 0,
469
- ...thumbProps,
470
- ref: composedRefs,
471
- style: value === void 0 ? { display: "none" } : props.style,
472
- onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => {
473
- context.valueIndexToChangeRef.current = index;
474
- })
475
- }
476
- ) }),
477
- isFormControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
478
- BubbleInput,
479
- {
480
- name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
481
- value
482
- },
483
- index
484
- )
485
- ]
486
- }
487
- );
488
- }
489
- );
490
- SliderThumb.displayName = THUMB_NAME;
491
- var BubbleInput = (props) => {
492
- const { value, ...inputProps } = props;
493
- const ref = React.useRef(null);
494
- const prevValue = (0, import_react_use_previous.usePrevious)(value);
495
- React.useEffect(() => {
496
- const input = ref.current;
497
- const inputProto = window.HTMLInputElement.prototype;
498
- const descriptor = Object.getOwnPropertyDescriptor(inputProto, "value");
499
- const setValue = descriptor.set;
500
- if (prevValue !== value && setValue) {
501
- const event = new Event("input", { bubbles: true });
502
- setValue.call(input, value);
503
- input.dispatchEvent(event);
253
+ )
504
254
  }
505
- }, [prevValue, value]);
506
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { style: { display: "none" }, ...inputProps, ref, defaultValue: value });
507
- };
508
- function getNextSortedValues(prevValues = [], nextValue, atIndex) {
509
- const nextValues = [...prevValues];
510
- nextValues[atIndex] = nextValue;
511
- return nextValues.sort((a, b) => a - b);
512
- }
513
- function convertValueToPercentage(value, min, max) {
514
- const maxSteps = max - min;
515
- const percentPerStep = 100 / maxSteps;
516
- const percentage = percentPerStep * (value - min);
517
- return (0, import_number.clamp)(percentage, [0, 100]);
255
+ );
518
256
  }
519
- function getLabel(index, totalValues) {
520
- if (totalValues > 2) {
521
- return `Value ${index + 1} of ${totalValues}`;
522
- } else if (totalValues === 2) {
523
- return ["Minimum", "Maximum"][index];
524
- } else {
525
- return void 0;
257
+ );
258
+ var SliderVertical = React.forwardRef(
259
+ (props, forwardedRef) => {
260
+ const {
261
+ min,
262
+ max,
263
+ inverted,
264
+ onSlideStart,
265
+ onSlideMove,
266
+ onSlideEnd,
267
+ onStepKeyDown,
268
+ ...sliderProps
269
+ } = props;
270
+ const sliderRef = React.useRef(null);
271
+ const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, sliderRef);
272
+ const rectRef = React.useRef();
273
+ const isSlidingFromBottom = !inverted;
274
+ function getValueFromPointer(pointerPosition) {
275
+ const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
276
+ const input = [0, rect.height];
277
+ const output = isSlidingFromBottom ? [max, min] : [min, max];
278
+ const value = linearScale(input, output);
279
+ rectRef.current = rect;
280
+ return value(pointerPosition - rect.top);
526
281
  }
282
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
283
+ SliderOrientationProvider,
284
+ {
285
+ scope: props.__scopeSlider,
286
+ startEdge: isSlidingFromBottom ? "bottom" : "top",
287
+ endEdge: isSlidingFromBottom ? "top" : "bottom",
288
+ size: "height",
289
+ direction: isSlidingFromBottom ? 1 : -1,
290
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
291
+ SliderImpl,
292
+ {
293
+ "data-orientation": "vertical",
294
+ ...sliderProps,
295
+ ref,
296
+ style: {
297
+ ...sliderProps.style,
298
+ ["--radix-slider-thumb-transform"]: "translateY(50%)"
299
+ },
300
+ onSlideStart: (event) => {
301
+ const value = getValueFromPointer(event.clientY);
302
+ onSlideStart?.(value);
303
+ },
304
+ onSlideMove: (event) => {
305
+ const value = getValueFromPointer(event.clientY);
306
+ onSlideMove?.(value);
307
+ },
308
+ onSlideEnd: () => {
309
+ rectRef.current = void 0;
310
+ onSlideEnd?.();
311
+ },
312
+ onStepKeyDown: (event) => {
313
+ const slideDirection = isSlidingFromBottom ? "from-bottom" : "from-top";
314
+ const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
315
+ onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
316
+ }
317
+ }
318
+ )
319
+ }
320
+ );
527
321
  }
528
- function getClosestValueIndex(values, nextValue) {
529
- if (values.length === 1) return 0;
530
- const distances = values.map((value) => Math.abs(value - nextValue));
531
- const closestDistance = Math.min(...distances);
532
- return distances.indexOf(closestDistance);
322
+ );
323
+ var SliderImpl = React.forwardRef(
324
+ (props, forwardedRef) => {
325
+ const {
326
+ __scopeSlider,
327
+ onSlideStart,
328
+ onSlideMove,
329
+ onSlideEnd,
330
+ onHomeKeyDown,
331
+ onEndKeyDown,
332
+ onStepKeyDown,
333
+ ...sliderProps
334
+ } = props;
335
+ const context = useSliderContext(SLIDER_NAME, __scopeSlider);
336
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
337
+ import_react_primitive.Primitive.span,
338
+ {
339
+ ...sliderProps,
340
+ ref: forwardedRef,
341
+ onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
342
+ if (event.key === "Home") {
343
+ onHomeKeyDown(event);
344
+ event.preventDefault();
345
+ } else if (event.key === "End") {
346
+ onEndKeyDown(event);
347
+ event.preventDefault();
348
+ } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
349
+ onStepKeyDown(event);
350
+ event.preventDefault();
351
+ }
352
+ }),
353
+ onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
354
+ const target = event.target;
355
+ target.setPointerCapture(event.pointerId);
356
+ event.preventDefault();
357
+ if (context.thumbs.has(target)) {
358
+ target.focus();
359
+ } else {
360
+ onSlideStart(event);
361
+ }
362
+ }),
363
+ onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, (event) => {
364
+ const target = event.target;
365
+ if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);
366
+ }),
367
+ onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, (event) => {
368
+ const target = event.target;
369
+ if (target.hasPointerCapture(event.pointerId)) {
370
+ target.releasePointerCapture(event.pointerId);
371
+ onSlideEnd(event);
372
+ }
373
+ })
374
+ }
375
+ );
533
376
  }
534
- function getThumbInBoundsOffset(width, left, direction) {
535
- const halfWidth = width / 2;
536
- const halfPercent = 50;
537
- const offset = linearScale([0, halfPercent], [0, halfWidth]);
538
- return (halfWidth - offset(left) * direction) * direction;
377
+ );
378
+ var TRACK_NAME = "SliderTrack";
379
+ var SliderTrack = React.forwardRef(
380
+ (props, forwardedRef) => {
381
+ const { __scopeSlider, ...trackProps } = props;
382
+ const context = useSliderContext(TRACK_NAME, __scopeSlider);
383
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
384
+ import_react_primitive.Primitive.span,
385
+ {
386
+ "data-disabled": context.disabled ? "" : void 0,
387
+ "data-orientation": context.orientation,
388
+ ...trackProps,
389
+ ref: forwardedRef
390
+ }
391
+ );
539
392
  }
540
- function getStepsBetweenValues(values) {
541
- return values.slice(0, -1).map((value, index) => values[index + 1] - value);
393
+ );
394
+ SliderTrack.displayName = TRACK_NAME;
395
+ var RANGE_NAME = "SliderRange";
396
+ var SliderRange = React.forwardRef(
397
+ (props, forwardedRef) => {
398
+ const { __scopeSlider, ...rangeProps } = props;
399
+ const context = useSliderContext(RANGE_NAME, __scopeSlider);
400
+ const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
401
+ const ref = React.useRef(null);
402
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
403
+ const valuesCount = context.values.length;
404
+ const percentages = context.values.map(
405
+ (value) => convertValueToPercentage(value, context.min, context.max)
406
+ );
407
+ const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
408
+ const offsetEnd = 100 - Math.max(...percentages);
409
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
410
+ import_react_primitive.Primitive.span,
411
+ {
412
+ "data-orientation": context.orientation,
413
+ "data-disabled": context.disabled ? "" : void 0,
414
+ ...rangeProps,
415
+ ref: composedRefs,
416
+ style: {
417
+ ...props.style,
418
+ [orientation.startEdge]: offsetStart + "%",
419
+ [orientation.endEdge]: offsetEnd + "%"
420
+ }
421
+ }
422
+ );
542
423
  }
543
- function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
544
- if (minStepsBetweenValues > 0) {
545
- const stepsBetweenValues = getStepsBetweenValues(values);
546
- const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
547
- return actualMinStepsBetweenValues >= minStepsBetweenValues;
548
- }
549
- return true;
424
+ );
425
+ SliderRange.displayName = RANGE_NAME;
426
+ var THUMB_NAME = "SliderThumb";
427
+ var SliderThumb = React.forwardRef(
428
+ (props, forwardedRef) => {
429
+ const getItems = useCollection(props.__scopeSlider);
430
+ const [thumb, setThumb] = React.useState(null);
431
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
432
+ const index = React.useMemo(
433
+ () => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
434
+ [getItems, thumb]
435
+ );
436
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
550
437
  }
551
- function linearScale(input, output) {
552
- return (value) => {
553
- if (input[0] === input[1] || output[0] === output[1]) return output[0];
554
- const ratio = (output[1] - output[0]) / (input[1] - input[0]);
555
- return output[0] + ratio * (value - input[0]);
556
- };
438
+ );
439
+ var SliderThumbImpl = React.forwardRef(
440
+ (props, forwardedRef) => {
441
+ const { __scopeSlider, index, name, ...thumbProps } = props;
442
+ const context = useSliderContext(THUMB_NAME, __scopeSlider);
443
+ const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
444
+ const [thumb, setThumb] = React.useState(null);
445
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
446
+ const isFormControl = thumb ? Boolean(thumb.closest("form")) : true;
447
+ const size = (0, import_react_use_size.useSize)(thumb);
448
+ const value = context.values[index];
449
+ const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
450
+ const label = getLabel(index, context.values.length);
451
+ const orientationSize = size?.[orientation.size];
452
+ const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
453
+ React.useEffect(() => {
454
+ if (thumb) {
455
+ context.thumbs.add(thumb);
456
+ return () => {
457
+ context.thumbs.delete(thumb);
458
+ };
459
+ }
460
+ }, [thumb, context.thumbs]);
461
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
462
+ "span",
463
+ {
464
+ style: {
465
+ transform: "var(--radix-slider-thumb-transform)",
466
+ position: "absolute",
467
+ [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
468
+ },
469
+ children: [
470
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
471
+ import_react_primitive.Primitive.span,
472
+ {
473
+ role: "slider",
474
+ "aria-label": props["aria-label"] || label,
475
+ "aria-valuemin": context.min,
476
+ "aria-valuenow": value,
477
+ "aria-valuemax": context.max,
478
+ "aria-orientation": context.orientation,
479
+ "data-orientation": context.orientation,
480
+ "data-disabled": context.disabled ? "" : void 0,
481
+ tabIndex: context.disabled ? void 0 : 0,
482
+ ...thumbProps,
483
+ ref: composedRefs,
484
+ style: value === void 0 ? { display: "none" } : props.style,
485
+ onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => {
486
+ context.valueIndexToChangeRef.current = index;
487
+ })
488
+ }
489
+ ) }),
490
+ isFormControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
491
+ BubbleInput,
492
+ {
493
+ name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
494
+ value
495
+ },
496
+ index
497
+ )
498
+ ]
499
+ }
500
+ );
557
501
  }
558
- function getDecimalCount(value) {
559
- return (String(value).split(".")[1] || "").length;
502
+ );
503
+ SliderThumb.displayName = THUMB_NAME;
504
+ var BubbleInput = (props) => {
505
+ const { value, ...inputProps } = props;
506
+ const ref = React.useRef(null);
507
+ const prevValue = (0, import_react_use_previous.usePrevious)(value);
508
+ React.useEffect(() => {
509
+ const input = ref.current;
510
+ const inputProto = window.HTMLInputElement.prototype;
511
+ const descriptor = Object.getOwnPropertyDescriptor(inputProto, "value");
512
+ const setValue = descriptor.set;
513
+ if (prevValue !== value && setValue) {
514
+ const event = new Event("input", { bubbles: true });
515
+ setValue.call(input, value);
516
+ input.dispatchEvent(event);
517
+ }
518
+ }, [prevValue, value]);
519
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { style: { display: "none" }, ...inputProps, ref, defaultValue: value });
520
+ };
521
+ function getNextSortedValues(prevValues = [], nextValue, atIndex) {
522
+ const nextValues = [...prevValues];
523
+ nextValues[atIndex] = nextValue;
524
+ return nextValues.sort((a, b) => a - b);
525
+ }
526
+ function convertValueToPercentage(value, min, max) {
527
+ const maxSteps = max - min;
528
+ const percentPerStep = 100 / maxSteps;
529
+ const percentage = percentPerStep * (value - min);
530
+ return (0, import_number.clamp)(percentage, [0, 100]);
531
+ }
532
+ function getLabel(index, totalValues) {
533
+ if (totalValues > 2) {
534
+ return `Value ${index + 1} of ${totalValues}`;
535
+ } else if (totalValues === 2) {
536
+ return ["Minimum", "Maximum"][index];
537
+ } else {
538
+ return void 0;
560
539
  }
561
- function roundValue(value, decimalCount) {
562
- const rounder = Math.pow(10, decimalCount);
563
- return Math.round(value * rounder) / rounder;
540
+ }
541
+ function getClosestValueIndex(values, nextValue) {
542
+ if (values.length === 1) return 0;
543
+ const distances = values.map((value) => Math.abs(value - nextValue));
544
+ const closestDistance = Math.min(...distances);
545
+ return distances.indexOf(closestDistance);
546
+ }
547
+ function getThumbInBoundsOffset(width, left, direction) {
548
+ const halfWidth = width / 2;
549
+ const halfPercent = 50;
550
+ const offset = linearScale([0, halfPercent], [0, halfWidth]);
551
+ return (halfWidth - offset(left) * direction) * direction;
552
+ }
553
+ function getStepsBetweenValues(values) {
554
+ return values.slice(0, -1).map((value, index) => values[index + 1] - value);
555
+ }
556
+ function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
557
+ if (minStepsBetweenValues > 0) {
558
+ const stepsBetweenValues = getStepsBetweenValues(values);
559
+ const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
560
+ return actualMinStepsBetweenValues >= minStepsBetweenValues;
564
561
  }
565
- var Root = Slider;
566
- var Track = SliderTrack;
567
- var Range = SliderRange;
568
- var Thumb = SliderThumb;
569
- })();
562
+ return true;
563
+ }
564
+ function linearScale(input, output) {
565
+ return (value) => {
566
+ if (input[0] === input[1] || output[0] === output[1]) return output[0];
567
+ const ratio = (output[1] - output[0]) / (input[1] - input[0]);
568
+ return output[0] + ratio * (value - input[0]);
569
+ };
570
+ }
571
+ function getDecimalCount(value) {
572
+ return (String(value).split(".")[1] || "").length;
573
+ }
574
+ function roundValue(value, decimalCount) {
575
+ const rounder = Math.pow(10, decimalCount);
576
+ return Math.round(value * rounder) / rounder;
577
+ }
578
+ var Root = Slider;
579
+ var Track = SliderTrack;
580
+ var Range = SliderRange;
581
+ var Thumb = SliderThumb;
570
582
  //# sourceMappingURL=index.js.map