@octanejs/radix 0.1.32 → 0.1.33

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 (60) hide show
  1. package/dist/cjs/AccessibleIcon.cjs +56 -0
  2. package/dist/cjs/Accordion.cjs +272 -0
  3. package/dist/cjs/AlertDialog.cjs +144 -0
  4. package/dist/cjs/Arrow.cjs +43 -0
  5. package/dist/cjs/AspectRatio.cjs +56 -0
  6. package/dist/cjs/Avatar.cjs +150 -0
  7. package/dist/cjs/Checkbox.cjs +281 -0
  8. package/dist/cjs/Collapsible.cjs +176 -0
  9. package/dist/cjs/ContextMenu.cjs +315 -0
  10. package/dist/cjs/Dialog.cjs +291 -0
  11. package/dist/cjs/DismissableLayer.cjs +382 -0
  12. package/dist/cjs/DropdownMenu.cjs +296 -0
  13. package/dist/cjs/FocusScope.cjs +257 -0
  14. package/dist/cjs/Form.cjs +537 -0
  15. package/dist/cjs/HoverCard.cjs +309 -0
  16. package/dist/cjs/Label.cjs +42 -0
  17. package/dist/cjs/Menu.cjs +925 -0
  18. package/dist/cjs/Menubar.cjs +475 -0
  19. package/dist/cjs/NavigationMenu.cjs +942 -0
  20. package/dist/cjs/OneTimePasswordField.cjs +729 -0
  21. package/dist/cjs/PasswordToggleField.cjs +377 -0
  22. package/dist/cjs/Popover.cjs +340 -0
  23. package/dist/cjs/Popper.cjs +368 -0
  24. package/dist/cjs/Portal.cjs +40 -0
  25. package/dist/cjs/Presence.cjs +183 -0
  26. package/dist/cjs/Primitive.cjs +63 -0
  27. package/dist/cjs/Progress.cjs +111 -0
  28. package/dist/cjs/Radio.cjs +240 -0
  29. package/dist/cjs/RadioGroup.cjs +216 -0
  30. package/dist/cjs/RovingFocusGroup.cjs +253 -0
  31. package/dist/cjs/ScrollArea.cjs +828 -0
  32. package/dist/cjs/Select.cjs +1429 -0
  33. package/dist/cjs/Separator.cjs +51 -0
  34. package/dist/cjs/Slider.cjs +634 -0
  35. package/dist/cjs/Slot.cjs +97 -0
  36. package/dist/cjs/Switch.cjs +253 -0
  37. package/dist/cjs/Tabs.cjs +195 -0
  38. package/dist/cjs/Toast.cjs +733 -0
  39. package/dist/cjs/Toggle.cjs +54 -0
  40. package/dist/cjs/ToggleGroup.cjs +174 -0
  41. package/dist/cjs/Toolbar.cjs +165 -0
  42. package/dist/cjs/Tooltip.cjs +628 -0
  43. package/dist/cjs/VisuallyHidden.cjs +52 -0
  44. package/dist/cjs/collection.cjs +95 -0
  45. package/dist/cjs/compose-event-handlers.cjs +35 -0
  46. package/dist/cjs/compose-refs.cjs +68 -0
  47. package/dist/cjs/context.cjs +96 -0
  48. package/dist/cjs/direction.cjs +41 -0
  49. package/dist/cjs/focus-guards.cjs +76 -0
  50. package/dist/cjs/index.cjs +174 -0
  51. package/dist/cjs/internal.cjs +51 -0
  52. package/dist/cjs/scroll-lock.cjs +67 -0
  53. package/dist/cjs/use-callback-ref.cjs +47 -0
  54. package/dist/cjs/use-effect-event.cjs +52 -0
  55. package/dist/cjs/use-is-hydrated.cjs +43 -0
  56. package/dist/cjs/use-previous.cjs +47 -0
  57. package/dist/cjs/use-size.cjs +69 -0
  58. package/dist/cjs/useControllableState.cjs +80 -0
  59. package/dist/cjs/useId.cjs +36 -0
  60. package/package.json +14 -7
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var Separator_exports = {};
20
+ __export(Separator_exports, {
21
+ Root: () => Separator,
22
+ Separator: () => Separator
23
+ });
24
+ module.exports = __toCommonJS(Separator_exports);
25
+ var import_octane = require("octane");
26
+ var import_Primitive = require("./Primitive.cjs");
27
+ const DEFAULT_ORIENTATION = "horizontal";
28
+ const ORIENTATIONS = ["horizontal", "vertical"];
29
+ function isValidOrientation(orientation) {
30
+ return ORIENTATIONS.includes(orientation);
31
+ }
32
+ function Separator(props) {
33
+ const {
34
+ decorative,
35
+ orientation: orientationProp = DEFAULT_ORIENTATION,
36
+ ...domProps
37
+ } = props ?? {};
38
+ const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
39
+ const ariaOrientation = orientation === "vertical" ? orientation : void 0;
40
+ const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
41
+ return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
42
+ "data-orientation": orientation,
43
+ ...semanticProps,
44
+ ...domProps
45
+ });
46
+ }
47
+ // Annotate the CommonJS export names for ESM import in node:
48
+ 0 && (module.exports = {
49
+ Root,
50
+ Separator
51
+ });
@@ -0,0 +1,634 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var Slider_exports = {};
20
+ __export(Slider_exports, {
21
+ BubbleInput: () => BubbleInput,
22
+ Range: () => Range,
23
+ Root: () => Root,
24
+ Slider: () => Root,
25
+ SliderBubbleInput: () => BubbleInput,
26
+ SliderRange: () => Range,
27
+ SliderThumb: () => Thumb,
28
+ SliderThumbProvider: () => ThumbProvider,
29
+ SliderThumbTrigger: () => ThumbTrigger,
30
+ SliderTrack: () => Track,
31
+ Thumb: () => Thumb,
32
+ Track: () => Track,
33
+ createSliderScope: () => createSliderScope
34
+ });
35
+ module.exports = __toCommonJS(Slider_exports);
36
+ var import_octane = require("octane");
37
+ var import_collection = require("./collection.cjs");
38
+ var import_compose_event_handlers = require("./compose-event-handlers.cjs");
39
+ var import_compose_refs = require("./compose-refs.cjs");
40
+ var import_context = require("./context.cjs");
41
+ var import_direction = require("./direction.cjs");
42
+ var import_internal = require("./internal.cjs");
43
+ var import_Primitive = require("./Primitive.cjs");
44
+ var import_use_previous = require("./use-previous.cjs");
45
+ var import_use_size = require("./use-size.cjs");
46
+ var import_useControllableState = require("./useControllableState.cjs");
47
+ const PAGE_KEYS = ["PageUp", "PageDown"];
48
+ const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
49
+ const BACK_KEYS = {
50
+ "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
51
+ "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
52
+ "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
53
+ "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
54
+ };
55
+ const SLIDER_NAME = "Slider";
56
+ const [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)(SLIDER_NAME);
57
+ const [createSliderContext, createSliderScope] = (0, import_context.createContextScope)(SLIDER_NAME, [
58
+ createCollectionScope
59
+ ]);
60
+ const [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
61
+ function Root(props) {
62
+ const slot = (0, import_internal.S)("Slider.Root");
63
+ const {
64
+ __scopeSlider,
65
+ name,
66
+ min = 0,
67
+ max = 100,
68
+ step = 1,
69
+ orientation = "horizontal",
70
+ disabled = false,
71
+ minStepsBetweenThumbs = 0,
72
+ defaultValue = [min],
73
+ value,
74
+ onValueChange = () => {
75
+ },
76
+ onValueCommit = () => {
77
+ },
78
+ inverted = false,
79
+ form,
80
+ ref: forwardedRef,
81
+ ...sliderProps
82
+ } = props ?? {};
83
+ const thumbRefs = (0, import_octane.useRef)(/* @__PURE__ */ new Set(), (0, import_internal.subSlot)(slot, "thumbs"));
84
+ const valueIndexToChangeRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "index"));
85
+ const isKeyboardInteractionRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "keyboard"));
86
+ const isHorizontal = orientation === "horizontal";
87
+ const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
88
+ const [valuesState, setValues] = (0, import_useControllableState.useControllableState)(
89
+ {
90
+ prop: value,
91
+ defaultProp: defaultValue,
92
+ onChange: (value2) => {
93
+ const thumbs = [...thumbRefs.current];
94
+ thumbs[valueIndexToChangeRef.current]?.focus({
95
+ preventScroll: true,
96
+ focusVisible: isKeyboardInteractionRef.current
97
+ });
98
+ isKeyboardInteractionRef.current = false;
99
+ onValueChange(value2);
100
+ }
101
+ },
102
+ (0, import_internal.subSlot)(slot, "values")
103
+ );
104
+ const values = valuesState ?? [];
105
+ const valuesBeforeSlideStartRef = (0, import_octane.useRef)(values, (0, import_internal.subSlot)(slot, "before"));
106
+ function handleSlideStart(value2) {
107
+ const closestIndex = getClosestValueIndex(values, value2);
108
+ updateValues(value2, closestIndex);
109
+ }
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 = 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;
132
+ }
133
+ });
134
+ }
135
+ return (0, import_octane.createElement)(SliderProvider, {
136
+ scope: __scopeSlider,
137
+ name,
138
+ disabled,
139
+ min,
140
+ max,
141
+ valueIndexToChangeRef,
142
+ thumbs: thumbRefs.current,
143
+ values,
144
+ orientation,
145
+ form,
146
+ children: (0, import_octane.createElement)(Collection.Provider, {
147
+ scope: __scopeSlider,
148
+ children: (0, import_octane.createElement)(Collection.Slot, {
149
+ scope: __scopeSlider,
150
+ children: (0, import_octane.createElement)(SliderOrientation, {
151
+ "aria-disabled": disabled,
152
+ "data-disabled": disabled ? "" : void 0,
153
+ ...sliderProps,
154
+ __scopeSlider,
155
+ ref: forwardedRef,
156
+ onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(sliderProps.onPointerDown, () => {
157
+ if (!disabled) {
158
+ valuesBeforeSlideStartRef.current = values;
159
+ isKeyboardInteractionRef.current = false;
160
+ }
161
+ }),
162
+ min,
163
+ max,
164
+ inverted,
165
+ onSlideStart: disabled ? void 0 : handleSlideStart,
166
+ onSlideMove: disabled ? void 0 : handleSlideMove,
167
+ onSlideEnd: disabled ? void 0 : handleSlideEnd,
168
+ onHomeKeyDown: () => {
169
+ if (!disabled) {
170
+ isKeyboardInteractionRef.current = true;
171
+ updateValues(min, 0, { commit: true });
172
+ }
173
+ },
174
+ onEndKeyDown: () => {
175
+ if (!disabled) {
176
+ isKeyboardInteractionRef.current = true;
177
+ updateValues(max, values.length - 1, { commit: true });
178
+ }
179
+ },
180
+ onStepKeyDown: ({
181
+ event,
182
+ direction: stepDirection
183
+ }) => {
184
+ if (!disabled) {
185
+ isKeyboardInteractionRef.current = true;
186
+ const isPageKey = PAGE_KEYS.includes(event.key);
187
+ const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
188
+ const multiplier = isSkipKey ? 10 : 1;
189
+ const atIndex = valueIndexToChangeRef.current;
190
+ const value2 = values[atIndex];
191
+ const stepInDirection = step * multiplier * stepDirection;
192
+ updateValues(value2 + stepInDirection, atIndex, { commit: true });
193
+ }
194
+ }
195
+ })
196
+ })
197
+ })
198
+ });
199
+ }
200
+ const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
201
+ startEdge: "left",
202
+ endEdge: "right",
203
+ size: "width",
204
+ direction: 1
205
+ });
206
+ function SliderHorizontal(props) {
207
+ const slot = (0, import_internal.S)("Slider.Horizontal");
208
+ const {
209
+ min,
210
+ max,
211
+ dir,
212
+ inverted,
213
+ onSlideStart,
214
+ onSlideMove,
215
+ onSlideEnd,
216
+ onStepKeyDown,
217
+ ref: forwardedRef,
218
+ ...sliderProps
219
+ } = props;
220
+ const [slider, setSlider] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "slider"));
221
+ const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setSlider, (0, import_internal.subSlot)(slot, "refs"));
222
+ const rectRef = (0, import_octane.useRef)(void 0, (0, import_internal.subSlot)(slot, "rect"));
223
+ const direction = (0, import_direction.useDirection)(dir);
224
+ const isDirectionLTR = direction === "ltr";
225
+ const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
226
+ function getValueFromPointer(pointerPosition) {
227
+ const rect = rectRef.current || slider.getBoundingClientRect();
228
+ const input = [0, rect.width];
229
+ const output = isSlidingFromLeft ? [min, max] : [max, min];
230
+ const value = linearScale(input, output);
231
+ rectRef.current = rect;
232
+ return value(pointerPosition - rect.left);
233
+ }
234
+ return (0, import_octane.createElement)(SliderOrientationProvider, {
235
+ scope: props.__scopeSlider,
236
+ startEdge: isSlidingFromLeft ? "left" : "right",
237
+ endEdge: isSlidingFromLeft ? "right" : "left",
238
+ direction: isSlidingFromLeft ? 1 : -1,
239
+ size: "width",
240
+ children: (0, import_octane.createElement)(SliderImpl, {
241
+ dir: direction,
242
+ "data-orientation": "horizontal",
243
+ ...sliderProps,
244
+ ref: composedRefs,
245
+ style: {
246
+ ...sliderProps.style,
247
+ "--radix-slider-thumb-transform": "translateX(-50%)"
248
+ },
249
+ onSlideStart: (event) => {
250
+ const value = getValueFromPointer(event.clientX);
251
+ onSlideStart?.(value);
252
+ },
253
+ onSlideMove: (event) => {
254
+ const value = getValueFromPointer(event.clientX);
255
+ onSlideMove?.(value);
256
+ },
257
+ onSlideEnd: () => {
258
+ rectRef.current = void 0;
259
+ onSlideEnd?.();
260
+ },
261
+ onStepKeyDown: (event) => {
262
+ const slideDirection = isSlidingFromLeft ? "from-left" : "from-right";
263
+ const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
264
+ onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
265
+ }
266
+ })
267
+ });
268
+ }
269
+ function SliderVertical(props) {
270
+ const slot = (0, import_internal.S)("Slider.Vertical");
271
+ const {
272
+ min,
273
+ max,
274
+ inverted,
275
+ onSlideStart,
276
+ onSlideMove,
277
+ onSlideEnd,
278
+ onStepKeyDown,
279
+ ref: forwardedRef,
280
+ ...sliderProps
281
+ } = props;
282
+ const sliderRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
283
+ const ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, sliderRef, (0, import_internal.subSlot)(slot, "refs"));
284
+ const rectRef = (0, import_octane.useRef)(void 0, (0, import_internal.subSlot)(slot, "rect"));
285
+ const isSlidingFromBottom = !inverted;
286
+ function getValueFromPointer(pointerPosition) {
287
+ const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
288
+ const input = [0, rect.height];
289
+ const output = isSlidingFromBottom ? [max, min] : [min, max];
290
+ const value = linearScale(input, output);
291
+ rectRef.current = rect;
292
+ return value(pointerPosition - rect.top);
293
+ }
294
+ return (0, import_octane.createElement)(SliderOrientationProvider, {
295
+ scope: props.__scopeSlider,
296
+ startEdge: isSlidingFromBottom ? "bottom" : "top",
297
+ endEdge: isSlidingFromBottom ? "top" : "bottom",
298
+ size: "height",
299
+ direction: isSlidingFromBottom ? 1 : -1,
300
+ children: (0, import_octane.createElement)(SliderImpl, {
301
+ "data-orientation": "vertical",
302
+ ...sliderProps,
303
+ ref,
304
+ style: {
305
+ ...sliderProps.style,
306
+ "--radix-slider-thumb-transform": "translateY(50%)"
307
+ },
308
+ onSlideStart: (event) => {
309
+ const value = getValueFromPointer(event.clientY);
310
+ onSlideStart?.(value);
311
+ },
312
+ onSlideMove: (event) => {
313
+ const value = getValueFromPointer(event.clientY);
314
+ onSlideMove?.(value);
315
+ },
316
+ onSlideEnd: () => {
317
+ rectRef.current = void 0;
318
+ onSlideEnd?.();
319
+ },
320
+ onStepKeyDown: (event) => {
321
+ const slideDirection = isSlidingFromBottom ? "from-bottom" : "from-top";
322
+ const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
323
+ onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
324
+ }
325
+ })
326
+ });
327
+ }
328
+ function SliderImpl(props) {
329
+ const {
330
+ __scopeSlider,
331
+ onSlideStart,
332
+ onSlideMove,
333
+ onSlideEnd,
334
+ onHomeKeyDown,
335
+ onEndKeyDown,
336
+ onStepKeyDown,
337
+ ref: forwardedRef,
338
+ ...sliderProps
339
+ } = props;
340
+ const context = useSliderContext(SLIDER_NAME, __scopeSlider);
341
+ return (0, import_octane.createElement)(import_Primitive.Primitive.span, {
342
+ ...sliderProps,
343
+ ref: forwardedRef,
344
+ onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props.onKeyDown, (event) => {
345
+ if (event.key === "Home") {
346
+ onHomeKeyDown(event);
347
+ event.preventDefault();
348
+ } else if (event.key === "End") {
349
+ onEndKeyDown(event);
350
+ event.preventDefault();
351
+ } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
352
+ onStepKeyDown(event);
353
+ event.preventDefault();
354
+ }
355
+ }),
356
+ onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerDown, (event) => {
357
+ const target = event.target;
358
+ target.setPointerCapture(event.pointerId);
359
+ event.preventDefault();
360
+ if (context.thumbs.has(target)) {
361
+ target.focus({ preventScroll: true, focusVisible: false });
362
+ } else {
363
+ onSlideStart(event);
364
+ }
365
+ }),
366
+ onPointerMove: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerMove, (event) => {
367
+ const target = event.target;
368
+ if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);
369
+ }),
370
+ onPointerUp: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerUp, (event) => {
371
+ const target = event.target;
372
+ if (target.hasPointerCapture(event.pointerId)) {
373
+ target.releasePointerCapture(event.pointerId);
374
+ onSlideEnd(event);
375
+ }
376
+ })
377
+ });
378
+ }
379
+ function Track(props) {
380
+ const { __scopeSlider, ...trackProps } = props ?? {};
381
+ const context = useSliderContext("SliderTrack", __scopeSlider);
382
+ return (0, import_octane.createElement)(import_Primitive.Primitive.span, {
383
+ "data-disabled": context.disabled ? "" : void 0,
384
+ "data-orientation": context.orientation,
385
+ ...trackProps
386
+ });
387
+ }
388
+ function Range(props) {
389
+ const slot = (0, import_internal.S)("Slider.Range");
390
+ const { __scopeSlider, ref: forwardedRef, ...rangeProps } = props ?? {};
391
+ const context = useSliderContext("SliderRange", __scopeSlider);
392
+ const orientation = useSliderOrientationContext("SliderRange", __scopeSlider);
393
+ const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
394
+ const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
395
+ const valuesCount = context.values.length;
396
+ const percentages = context.values.map(
397
+ (value) => convertValueToPercentage(value, context.min, context.max)
398
+ );
399
+ const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
400
+ const offsetEnd = 100 - Math.max(...percentages);
401
+ return (0, import_octane.createElement)(import_Primitive.Primitive.span, {
402
+ "data-orientation": context.orientation,
403
+ "data-disabled": context.disabled ? "" : void 0,
404
+ ...rangeProps,
405
+ ref: composedRefs,
406
+ style: {
407
+ ...props?.style,
408
+ [orientation.startEdge]: offsetStart + "%",
409
+ [orientation.endEdge]: offsetEnd + "%"
410
+ }
411
+ });
412
+ }
413
+ const THUMB_NAME = "SliderThumb";
414
+ const [SliderThumbContextProvider, useSliderThumbContext] = createSliderContext(THUMB_NAME);
415
+ function ThumbProvider(props) {
416
+ const slot = (0, import_internal.S)("Slider.ThumbProvider");
417
+ const { __scopeSlider, name, children, internal_do_not_use_render } = props;
418
+ const context = useSliderContext("SliderThumbProvider", __scopeSlider);
419
+ const getItems = useCollection(__scopeSlider, (0, import_internal.subSlot)(slot, "items"));
420
+ const [thumb, setThumb] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "thumb"));
421
+ const index = (0, import_octane.useMemo)(
422
+ () => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
423
+ [getItems, thumb],
424
+ (0, import_internal.subSlot)(slot, "index")
425
+ );
426
+ const size = (0, import_use_size.useSize)(thumb, (0, import_internal.subSlot)(slot, "size"));
427
+ const isFormControl = thumb ? !!context.form || !!thumb.closest("form") : true;
428
+ const value = context.values[index];
429
+ const resolvedName = name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0);
430
+ const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
431
+ (0, import_octane.useEffect)(
432
+ () => {
433
+ if (thumb) {
434
+ context.thumbs.add(thumb);
435
+ return () => {
436
+ context.thumbs.delete(thumb);
437
+ };
438
+ }
439
+ },
440
+ [thumb, context.thumbs],
441
+ (0, import_internal.subSlot)(slot, "e:thumb")
442
+ );
443
+ const thumbContext = {
444
+ value,
445
+ name: resolvedName,
446
+ form: context.form,
447
+ isFormControl,
448
+ index,
449
+ thumb,
450
+ onThumbChange: setThumb,
451
+ percent,
452
+ size
453
+ };
454
+ return (0, import_octane.createElement)(SliderThumbContextProvider, {
455
+ scope: __scopeSlider,
456
+ ...thumbContext,
457
+ children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(thumbContext) : children
458
+ });
459
+ }
460
+ function ThumbTrigger(props) {
461
+ const slot = (0, import_internal.S)("Slider.ThumbTrigger");
462
+ const { __scopeSlider, ref: forwardedRef, ...thumbProps } = props;
463
+ const context = useSliderContext("SliderThumbTrigger", __scopeSlider);
464
+ const orientation = useSliderOrientationContext("SliderThumbTrigger", __scopeSlider);
465
+ const { index, value, percent, size, onThumbChange } = useSliderThumbContext(
466
+ "SliderThumbTrigger",
467
+ __scopeSlider
468
+ );
469
+ const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, onThumbChange, (0, import_internal.subSlot)(slot, "refs"));
470
+ const label = getLabel(index, context.values.length);
471
+ const orientationSize = size?.[orientation.size];
472
+ const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
473
+ return (0, import_octane.createElement)("span", {
474
+ style: {
475
+ transform: "var(--radix-slider-thumb-transform)",
476
+ position: "absolute",
477
+ [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
478
+ },
479
+ children: (0, import_octane.createElement)(Collection.ItemSlot, {
480
+ scope: __scopeSlider,
481
+ children: (0, import_octane.createElement)(import_Primitive.Primitive.span, {
482
+ role: "slider",
483
+ "aria-label": props["aria-label"] || label,
484
+ "aria-valuemin": context.min,
485
+ "aria-valuenow": value,
486
+ "aria-valuemax": context.max,
487
+ "aria-orientation": context.orientation,
488
+ "data-orientation": context.orientation,
489
+ "data-disabled": context.disabled ? "" : void 0,
490
+ tabIndex: context.disabled ? void 0 : 0,
491
+ ...thumbProps,
492
+ ref: composedRefs,
493
+ // There will be no value on initial render while we work out the index so
494
+ // we hide thumbs without a value; otherwise SSR would render them in the
495
+ // wrong position before they snap into place during hydration.
496
+ style: value === void 0 ? { display: "none" } : props.style,
497
+ onFocus: (0, import_compose_event_handlers.composeEventHandlers)(props.onFocus, () => {
498
+ context.valueIndexToChangeRef.current = index;
499
+ })
500
+ })
501
+ })
502
+ });
503
+ }
504
+ function Thumb(props) {
505
+ const { __scopeSlider, name, ref: forwardedRef, ...thumbProps } = props ?? {};
506
+ return (0, import_octane.createElement)(ThumbProvider, {
507
+ __scopeSlider,
508
+ name,
509
+ internal_do_not_use_render: ({ index, isFormControl }) => [
510
+ (0, import_octane.createElement)(ThumbTrigger, {
511
+ key: "trigger",
512
+ ...thumbProps,
513
+ ref: forwardedRef,
514
+ __scopeSlider
515
+ }),
516
+ isFormControl ? (0, import_octane.createElement)(BubbleInput, { key: "bubble-" + index, __scopeSlider }) : null
517
+ ]
518
+ });
519
+ }
520
+ function BubbleInput(props) {
521
+ const slot = (0, import_internal.S)("Slider.BubbleInput");
522
+ const { __scopeSlider, ref: forwardedRef, ...inputProps } = props ?? {};
523
+ const { value, name, form } = useSliderThumbContext("SliderBubbleInput", __scopeSlider);
524
+ const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
525
+ const composedRefs = (0, import_compose_refs.useComposedRefs)(ref, forwardedRef, (0, import_internal.subSlot)(slot, "refs"));
526
+ const prevValue = (0, import_use_previous.usePrevious)(value, (0, import_internal.subSlot)(slot, "prev"));
527
+ (0, import_octane.useEffect)(
528
+ () => {
529
+ const input = ref.current;
530
+ if (!input) return;
531
+ if (prevValue !== value) {
532
+ input.dispatchEvent(new Event("input", { bubbles: true }));
533
+ }
534
+ },
535
+ [prevValue, value],
536
+ (0, import_internal.subSlot)(slot, "e:bubble")
537
+ );
538
+ return (0, import_octane.createElement)(import_Primitive.Primitive.input, {
539
+ style: { display: "none" },
540
+ name,
541
+ form,
542
+ ...inputProps,
543
+ ref: composedRefs,
544
+ value
545
+ });
546
+ }
547
+ function getNextSortedValues(prevValues = [], nextValue, atIndex) {
548
+ const nextValues = [...prevValues];
549
+ nextValues[atIndex] = nextValue;
550
+ return nextValues.sort((a, b) => a - b);
551
+ }
552
+ function convertValueToPercentage(value, min, max) {
553
+ const maxSteps = max - min;
554
+ const percentPerStep = 100 / maxSteps;
555
+ const percentage = percentPerStep * (value - min);
556
+ return clamp(percentage, [0, 100]);
557
+ }
558
+ function getLabel(index, totalValues) {
559
+ if (totalValues > 2) {
560
+ return `Value ${index + 1} of ${totalValues}`;
561
+ } else if (totalValues === 2) {
562
+ return ["Minimum", "Maximum"][index];
563
+ } else {
564
+ return void 0;
565
+ }
566
+ }
567
+ function getClosestValueIndex(values, nextValue) {
568
+ if (values.length === 1) return 0;
569
+ const distances = values.map((value) => Math.abs(value - nextValue));
570
+ const closestDistance = Math.min(...distances);
571
+ return distances.indexOf(closestDistance);
572
+ }
573
+ function getThumbInBoundsOffset(width, left, direction) {
574
+ const halfWidth = width / 2;
575
+ const halfPercent = 50;
576
+ const offset = linearScale([0, halfPercent], [0, halfWidth]);
577
+ return (halfWidth - offset(left) * direction) * direction;
578
+ }
579
+ function getStepsBetweenValues(values) {
580
+ return values.slice(0, -1).map((value, index) => values[index + 1] - value);
581
+ }
582
+ function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
583
+ if (minStepsBetweenValues > 0) {
584
+ const stepsBetweenValues = getStepsBetweenValues(values);
585
+ const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
586
+ return actualMinStepsBetweenValues >= minStepsBetweenValues;
587
+ }
588
+ return true;
589
+ }
590
+ function linearScale(input, output) {
591
+ return (value) => {
592
+ if (input[0] === input[1] || output[0] === output[1]) return output[0];
593
+ const ratio = (output[1] - output[0]) / (input[1] - input[0]);
594
+ return output[0] + ratio * (value - input[0]);
595
+ };
596
+ }
597
+ function getDecimalCount(value) {
598
+ if (!Number.isFinite(value)) return 0;
599
+ const str = value.toString();
600
+ if (str.includes("e")) {
601
+ const [coefficient, exponent] = str.split("e");
602
+ const decimalPart2 = coefficient.split(".")[1] || "";
603
+ const exponentNum = Number(exponent);
604
+ return Math.max(0, decimalPart2.length - exponentNum);
605
+ }
606
+ const decimalPart = str.split(".")[1];
607
+ return decimalPart ? decimalPart.length : 0;
608
+ }
609
+ function roundValue(value, decimalCount) {
610
+ const rounder = Math.pow(10, decimalCount);
611
+ return Math.round(value * rounder) / rounder;
612
+ }
613
+ function clamp(value, [min, max]) {
614
+ return Math.min(max, Math.max(min, value));
615
+ }
616
+ function isFunction(value) {
617
+ return typeof value === "function";
618
+ }
619
+ // Annotate the CommonJS export names for ESM import in node:
620
+ 0 && (module.exports = {
621
+ BubbleInput,
622
+ Range,
623
+ Root,
624
+ Slider,
625
+ SliderBubbleInput,
626
+ SliderRange,
627
+ SliderThumb,
628
+ SliderThumbProvider,
629
+ SliderThumbTrigger,
630
+ SliderTrack,
631
+ Thumb,
632
+ Track,
633
+ createSliderScope
634
+ });