index.mjs 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621
  1. import $g1Vy2$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
  2. import {forwardRef as $g1Vy2$forwardRef, useState as $g1Vy2$useState, useRef as $g1Vy2$useRef, createElement as $g1Vy2$createElement, useMemo as $g1Vy2$useMemo, useEffect as $g1Vy2$useEffect} from "react";
  3. import {clamp as $g1Vy2$clamp} from "@radix-ui/number";
  4. import {composeEventHandlers as $g1Vy2$composeEventHandlers} from "@radix-ui/primitive";
  5. import {useComposedRefs as $g1Vy2$useComposedRefs} from "@radix-ui/react-compose-refs";
  6. import {createContextScope as $g1Vy2$createContextScope} from "@radix-ui/react-context";
  7. import {useControllableState as $g1Vy2$useControllableState} from "@radix-ui/react-use-controllable-state";
  8. import {useDirection as $g1Vy2$useDirection} from "@radix-ui/react-direction";
  9. import {usePrevious as $g1Vy2$usePrevious} from "@radix-ui/react-use-previous";
  10. import {useSize as $g1Vy2$useSize} from "@radix-ui/react-use-size";
  11. import {Primitive as $g1Vy2$Primitive} from "@radix-ui/react-primitive";
  12. import {createCollection as $g1Vy2$createCollection} from "@radix-ui/react-collection";
  13. const $faa2e61a3361514f$var$PAGE_KEYS = [
  14. 'PageUp',
  15. 'PageDown'
  16. ];
  17. const $faa2e61a3361514f$var$ARROW_KEYS = [
  18. 'ArrowUp',
  19. 'ArrowDown',
  20. 'ArrowLeft',
  21. 'ArrowRight'
  22. ];
  23. const $faa2e61a3361514f$var$BACK_KEYS = {
  24. 'from-left': [
  25. 'Home',
  26. 'PageDown',
  27. 'ArrowDown',
  28. 'ArrowLeft'
  29. ],
  30. 'from-right': [
  31. 'Home',
  32. 'PageDown',
  33. 'ArrowDown',
  34. 'ArrowRight'
  35. ],
  36. 'from-bottom': [
  37. 'Home',
  38. 'PageDown',
  39. 'ArrowDown',
  40. 'ArrowLeft'
  41. ],
  42. 'from-top': [
  43. 'Home',
  44. 'PageDown',
  45. 'ArrowUp',
  46. 'ArrowLeft'
  47. ]
  48. };
  49. /* -------------------------------------------------------------------------------------------------
  50. * Slider
  51. * -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$SLIDER_NAME = 'Slider';
  52. const [$faa2e61a3361514f$var$Collection, $faa2e61a3361514f$var$useCollection, $faa2e61a3361514f$var$createCollectionScope] = $g1Vy2$createCollection($faa2e61a3361514f$var$SLIDER_NAME);
  53. const [$faa2e61a3361514f$var$createSliderContext, $faa2e61a3361514f$export$ef72632d7b901f97] = $g1Vy2$createContextScope($faa2e61a3361514f$var$SLIDER_NAME, [
  54. $faa2e61a3361514f$var$createCollectionScope
  55. ]);
  56. const [$faa2e61a3361514f$var$SliderProvider, $faa2e61a3361514f$var$useSliderContext] = $faa2e61a3361514f$var$createSliderContext($faa2e61a3361514f$var$SLIDER_NAME);
  57. const $faa2e61a3361514f$export$472062a354075cee = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
  58. const { name: name , min: min = 0 , max: max = 100 , step: step = 1 , orientation: orientation = 'horizontal' , disabled: disabled = false , minStepsBetweenThumbs: minStepsBetweenThumbs = 0 , defaultValue: defaultValue = [
  59. min
  60. ] , value: value1 , onValueChange: onValueChange = ()=>{} , onValueCommit: onValueCommit = ()=>{} , inverted: inverted = false , ...sliderProps } = props;
  61. const [slider, setSlider] = $g1Vy2$useState(null);
  62. const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, (node)=>setSlider(node)
  63. );
  64. const thumbRefs = $g1Vy2$useRef(new Set());
  65. const valueIndexToChangeRef = $g1Vy2$useRef(0);
  66. const isHorizontal = orientation === 'horizontal'; // We set this to true by default so that events bubble to forms without JS (SSR)
  67. const isFormControl = slider ? Boolean(slider.closest('form')) : true;
  68. const SliderOrientation = isHorizontal ? $faa2e61a3361514f$var$SliderHorizontal : $faa2e61a3361514f$var$SliderVertical;
  69. const [values = [], setValues] = $g1Vy2$useControllableState({
  70. prop: value1,
  71. defaultProp: defaultValue,
  72. onChange: (value)=>{
  73. var _thumbs$valueIndexToC;
  74. const thumbs = [
  75. ...thumbRefs.current
  76. ];
  77. (_thumbs$valueIndexToC = thumbs[valueIndexToChangeRef.current]) === null || _thumbs$valueIndexToC === void 0 || _thumbs$valueIndexToC.focus();
  78. onValueChange(value);
  79. }
  80. });
  81. const valuesBeforeSlideStartRef = $g1Vy2$useRef(values);
  82. function handleSlideStart(value) {
  83. const closestIndex = $faa2e61a3361514f$var$getClosestValueIndex(values, value);
  84. updateValues(value, closestIndex);
  85. }
  86. function handleSlideMove(value) {
  87. updateValues(value, valueIndexToChangeRef.current);
  88. }
  89. function handleSlideEnd() {
  90. const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];
  91. const nextValue = values[valueIndexToChangeRef.current];
  92. const hasChanged = nextValue !== prevValue;
  93. if (hasChanged) onValueCommit(values);
  94. }
  95. function updateValues(value, atIndex, { commit: commit } = {
  96. commit: false
  97. }) {
  98. const decimalCount = $faa2e61a3361514f$var$getDecimalCount(step);
  99. const snapToStep = $faa2e61a3361514f$var$roundValue(Math.round((value - min) / step) * step + min, decimalCount);
  100. const nextValue = $g1Vy2$clamp(snapToStep, [
  101. min,
  102. max
  103. ]);
  104. setValues((prevValues = [])=>{
  105. const nextValues = $faa2e61a3361514f$var$getNextSortedValues(prevValues, nextValue, atIndex);
  106. if ($faa2e61a3361514f$var$hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
  107. valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
  108. const hasChanged = String(nextValues) !== String(prevValues);
  109. if (hasChanged && commit) onValueCommit(nextValues);
  110. return hasChanged ? nextValues : prevValues;
  111. } else return prevValues;
  112. });
  113. }
  114. return /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$SliderProvider, {
  115. scope: props.__scopeSlider,
  116. disabled: disabled,
  117. min: min,
  118. max: max,
  119. valueIndexToChangeRef: valueIndexToChangeRef,
  120. thumbs: thumbRefs.current,
  121. values: values,
  122. orientation: orientation
  123. }, /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$Collection.Provider, {
  124. scope: props.__scopeSlider
  125. }, /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$Collection.Slot, {
  126. scope: props.__scopeSlider
  127. }, /*#__PURE__*/ $g1Vy2$createElement(SliderOrientation, $g1Vy2$babelruntimehelpersesmextends({
  128. "aria-disabled": disabled,
  129. "data-disabled": disabled ? '' : undefined
  130. }, sliderProps, {
  131. ref: composedRefs,
  132. onPointerDown: $g1Vy2$composeEventHandlers(sliderProps.onPointerDown, ()=>{
  133. if (!disabled) valuesBeforeSlideStartRef.current = values;
  134. }),
  135. min: min,
  136. max: max,
  137. inverted: inverted,
  138. onSlideStart: disabled ? undefined : handleSlideStart,
  139. onSlideMove: disabled ? undefined : handleSlideMove,
  140. onSlideEnd: disabled ? undefined : handleSlideEnd,
  141. onHomeKeyDown: ()=>!disabled && updateValues(min, 0, {
  142. commit: true
  143. })
  144. ,
  145. onEndKeyDown: ()=>!disabled && updateValues(max, values.length - 1, {
  146. commit: true
  147. })
  148. ,
  149. onStepKeyDown: ({ event: event , direction: stepDirection })=>{
  150. if (!disabled) {
  151. const isPageKey = $faa2e61a3361514f$var$PAGE_KEYS.includes(event.key);
  152. const isSkipKey = isPageKey || event.shiftKey && $faa2e61a3361514f$var$ARROW_KEYS.includes(event.key);
  153. const multiplier = isSkipKey ? 10 : 1;
  154. const atIndex = valueIndexToChangeRef.current;
  155. const value = values[atIndex];
  156. const stepInDirection = step * multiplier * stepDirection;
  157. updateValues(value + stepInDirection, atIndex, {
  158. commit: true
  159. });
  160. }
  161. }
  162. })))), isFormControl && values.map((value, index)=>/*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$BubbleInput, {
  163. key: index,
  164. name: name ? name + (values.length > 1 ? '[]' : '') : undefined,
  165. value: value
  166. })
  167. ));
  168. });
  169. /*#__PURE__*/ Object.assign($faa2e61a3361514f$export$472062a354075cee, {
  170. displayName: $faa2e61a3361514f$var$SLIDER_NAME
  171. });
  172. /* -------------------------------------------------------------------------------------------------
  173. * SliderHorizontal
  174. * -----------------------------------------------------------------------------------------------*/ const [$faa2e61a3361514f$var$SliderOrientationProvider, $faa2e61a3361514f$var$useSliderOrientationContext] = $faa2e61a3361514f$var$createSliderContext($faa2e61a3361514f$var$SLIDER_NAME, {
  175. startEdge: 'left',
  176. endEdge: 'right',
  177. size: 'width',
  178. direction: 1
  179. });
  180. const $faa2e61a3361514f$var$SliderHorizontal = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
  181. const { min: min , max: max , dir: dir , inverted: inverted , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onSlideEnd: onSlideEnd , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
  182. const [slider, setSlider] = $g1Vy2$useState(null);
  183. const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, (node)=>setSlider(node)
  184. );
  185. const rectRef = $g1Vy2$useRef();
  186. const direction = $g1Vy2$useDirection(dir);
  187. const isDirectionLTR = direction === 'ltr';
  188. const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
  189. function getValueFromPointer(pointerPosition) {
  190. const rect = rectRef.current || slider.getBoundingClientRect();
  191. const input = [
  192. 0,
  193. rect.width
  194. ];
  195. const output = isSlidingFromLeft ? [
  196. min,
  197. max
  198. ] : [
  199. max,
  200. min
  201. ];
  202. const value = $faa2e61a3361514f$var$linearScale(input, output);
  203. rectRef.current = rect;
  204. return value(pointerPosition - rect.left);
  205. }
  206. return /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$SliderOrientationProvider, {
  207. scope: props.__scopeSlider,
  208. startEdge: isSlidingFromLeft ? 'left' : 'right',
  209. endEdge: isSlidingFromLeft ? 'right' : 'left',
  210. direction: isSlidingFromLeft ? 1 : -1,
  211. size: "width"
  212. }, /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$SliderImpl, $g1Vy2$babelruntimehelpersesmextends({
  213. dir: direction,
  214. "data-orientation": "horizontal"
  215. }, sliderProps, {
  216. ref: composedRefs,
  217. style: {
  218. ...sliderProps.style,
  219. ['--radix-slider-thumb-transform']: 'translateX(-50%)'
  220. },
  221. onSlideStart: (event)=>{
  222. const value = getValueFromPointer(event.clientX);
  223. onSlideStart === null || onSlideStart === void 0 || onSlideStart(value);
  224. },
  225. onSlideMove: (event)=>{
  226. const value = getValueFromPointer(event.clientX);
  227. onSlideMove === null || onSlideMove === void 0 || onSlideMove(value);
  228. },
  229. onSlideEnd: ()=>{
  230. rectRef.current = undefined;
  231. onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd();
  232. },
  233. onStepKeyDown: (event)=>{
  234. const slideDirection = isSlidingFromLeft ? 'from-left' : 'from-right';
  235. const isBackKey = $faa2e61a3361514f$var$BACK_KEYS[slideDirection].includes(event.key);
  236. onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
  237. event: event,
  238. direction: isBackKey ? -1 : 1
  239. });
  240. }
  241. })));
  242. });
  243. /* -------------------------------------------------------------------------------------------------
  244. * SliderVertical
  245. * -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$SliderVertical = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
  246. const { min: min , max: max , inverted: inverted , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onSlideEnd: onSlideEnd , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
  247. const sliderRef = $g1Vy2$useRef(null);
  248. const ref = $g1Vy2$useComposedRefs(forwardedRef, sliderRef);
  249. const rectRef = $g1Vy2$useRef();
  250. const isSlidingFromBottom = !inverted;
  251. function getValueFromPointer(pointerPosition) {
  252. const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
  253. const input = [
  254. 0,
  255. rect.height
  256. ];
  257. const output = isSlidingFromBottom ? [
  258. max,
  259. min
  260. ] : [
  261. min,
  262. max
  263. ];
  264. const value = $faa2e61a3361514f$var$linearScale(input, output);
  265. rectRef.current = rect;
  266. return value(pointerPosition - rect.top);
  267. }
  268. return /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$SliderOrientationProvider, {
  269. scope: props.__scopeSlider,
  270. startEdge: isSlidingFromBottom ? 'bottom' : 'top',
  271. endEdge: isSlidingFromBottom ? 'top' : 'bottom',
  272. size: "height",
  273. direction: isSlidingFromBottom ? 1 : -1
  274. }, /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$SliderImpl, $g1Vy2$babelruntimehelpersesmextends({
  275. "data-orientation": "vertical"
  276. }, sliderProps, {
  277. ref: ref,
  278. style: {
  279. ...sliderProps.style,
  280. ['--radix-slider-thumb-transform']: 'translateY(50%)'
  281. },
  282. onSlideStart: (event)=>{
  283. const value = getValueFromPointer(event.clientY);
  284. onSlideStart === null || onSlideStart === void 0 || onSlideStart(value);
  285. },
  286. onSlideMove: (event)=>{
  287. const value = getValueFromPointer(event.clientY);
  288. onSlideMove === null || onSlideMove === void 0 || onSlideMove(value);
  289. },
  290. onSlideEnd: ()=>{
  291. rectRef.current = undefined;
  292. onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd();
  293. },
  294. onStepKeyDown: (event)=>{
  295. const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';
  296. const isBackKey = $faa2e61a3361514f$var$BACK_KEYS[slideDirection].includes(event.key);
  297. onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
  298. event: event,
  299. direction: isBackKey ? -1 : 1
  300. });
  301. }
  302. })));
  303. });
  304. /* -------------------------------------------------------------------------------------------------
  305. * SliderImpl
  306. * -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$SliderImpl = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
  307. const { __scopeSlider: __scopeSlider , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onSlideEnd: onSlideEnd , onHomeKeyDown: onHomeKeyDown , onEndKeyDown: onEndKeyDown , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
  308. const context = $faa2e61a3361514f$var$useSliderContext($faa2e61a3361514f$var$SLIDER_NAME, __scopeSlider);
  309. return /*#__PURE__*/ $g1Vy2$createElement($g1Vy2$Primitive.span, $g1Vy2$babelruntimehelpersesmextends({}, sliderProps, {
  310. ref: forwardedRef,
  311. onKeyDown: $g1Vy2$composeEventHandlers(props.onKeyDown, (event)=>{
  312. if (event.key === 'Home') {
  313. onHomeKeyDown(event); // Prevent scrolling to page start
  314. event.preventDefault();
  315. } else if (event.key === 'End') {
  316. onEndKeyDown(event); // Prevent scrolling to page end
  317. event.preventDefault();
  318. } else if ($faa2e61a3361514f$var$PAGE_KEYS.concat($faa2e61a3361514f$var$ARROW_KEYS).includes(event.key)) {
  319. onStepKeyDown(event); // Prevent scrolling for directional key presses
  320. event.preventDefault();
  321. }
  322. }),
  323. onPointerDown: $g1Vy2$composeEventHandlers(props.onPointerDown, (event)=>{
  324. const target = event.target;
  325. target.setPointerCapture(event.pointerId); // Prevent browser focus behaviour because we focus a thumb manually when values change.
  326. event.preventDefault(); // Touch devices have a delay before focusing so won't focus if touch immediately moves
  327. // away from target (sliding). We want thumb to focus regardless.
  328. if (context.thumbs.has(target)) target.focus();
  329. else onSlideStart(event);
  330. }),
  331. onPointerMove: $g1Vy2$composeEventHandlers(props.onPointerMove, (event)=>{
  332. const target = event.target;
  333. if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);
  334. }),
  335. onPointerUp: $g1Vy2$composeEventHandlers(props.onPointerUp, (event)=>{
  336. const target = event.target;
  337. if (target.hasPointerCapture(event.pointerId)) {
  338. target.releasePointerCapture(event.pointerId);
  339. onSlideEnd(event);
  340. }
  341. })
  342. }));
  343. });
  344. /* -------------------------------------------------------------------------------------------------
  345. * SliderTrack
  346. * -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$TRACK_NAME = 'SliderTrack';
  347. const $faa2e61a3361514f$export$105594979f116971 = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
  348. const { __scopeSlider: __scopeSlider , ...trackProps } = props;
  349. const context = $faa2e61a3361514f$var$useSliderContext($faa2e61a3361514f$var$TRACK_NAME, __scopeSlider);
  350. return /*#__PURE__*/ $g1Vy2$createElement($g1Vy2$Primitive.span, $g1Vy2$babelruntimehelpersesmextends({
  351. "data-disabled": context.disabled ? '' : undefined,
  352. "data-orientation": context.orientation
  353. }, trackProps, {
  354. ref: forwardedRef
  355. }));
  356. });
  357. /*#__PURE__*/ Object.assign($faa2e61a3361514f$export$105594979f116971, {
  358. displayName: $faa2e61a3361514f$var$TRACK_NAME
  359. });
  360. /* -------------------------------------------------------------------------------------------------
  361. * SliderRange
  362. * -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$RANGE_NAME = 'SliderRange';
  363. const $faa2e61a3361514f$export$a5cf38a7a000fe77 = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
  364. const { __scopeSlider: __scopeSlider , ...rangeProps } = props;
  365. const context = $faa2e61a3361514f$var$useSliderContext($faa2e61a3361514f$var$RANGE_NAME, __scopeSlider);
  366. const orientation = $faa2e61a3361514f$var$useSliderOrientationContext($faa2e61a3361514f$var$RANGE_NAME, __scopeSlider);
  367. const ref = $g1Vy2$useRef(null);
  368. const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, ref);
  369. const valuesCount = context.values.length;
  370. const percentages = context.values.map((value)=>$faa2e61a3361514f$var$convertValueToPercentage(value, context.min, context.max)
  371. );
  372. const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
  373. const offsetEnd = 100 - Math.max(...percentages);
  374. return /*#__PURE__*/ $g1Vy2$createElement($g1Vy2$Primitive.span, $g1Vy2$babelruntimehelpersesmextends({
  375. "data-orientation": context.orientation,
  376. "data-disabled": context.disabled ? '' : undefined
  377. }, rangeProps, {
  378. ref: composedRefs,
  379. style: {
  380. ...props.style,
  381. [orientation.startEdge]: offsetStart + '%',
  382. [orientation.endEdge]: offsetEnd + '%'
  383. }
  384. }));
  385. });
  386. /*#__PURE__*/ Object.assign($faa2e61a3361514f$export$a5cf38a7a000fe77, {
  387. displayName: $faa2e61a3361514f$var$RANGE_NAME
  388. });
  389. /* -------------------------------------------------------------------------------------------------
  390. * SliderThumb
  391. * -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$THUMB_NAME = 'SliderThumb';
  392. const $faa2e61a3361514f$export$2c1b491743890dec = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
  393. const getItems = $faa2e61a3361514f$var$useCollection(props.__scopeSlider);
  394. const [thumb, setThumb] = $g1Vy2$useState(null);
  395. const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, (node)=>setThumb(node)
  396. );
  397. const index = $g1Vy2$useMemo(()=>thumb ? getItems().findIndex((item)=>item.ref.current === thumb
  398. ) : -1
  399. , [
  400. getItems,
  401. thumb
  402. ]);
  403. return /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$SliderThumbImpl, $g1Vy2$babelruntimehelpersesmextends({}, props, {
  404. ref: composedRefs,
  405. index: index
  406. }));
  407. });
  408. const $faa2e61a3361514f$var$SliderThumbImpl = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
  409. const { __scopeSlider: __scopeSlider , index: index , ...thumbProps } = props;
  410. const context = $faa2e61a3361514f$var$useSliderContext($faa2e61a3361514f$var$THUMB_NAME, __scopeSlider);
  411. const orientation = $faa2e61a3361514f$var$useSliderOrientationContext($faa2e61a3361514f$var$THUMB_NAME, __scopeSlider);
  412. const [thumb, setThumb] = $g1Vy2$useState(null);
  413. const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, (node)=>setThumb(node)
  414. );
  415. const size = $g1Vy2$useSize(thumb); // We cast because index could be `-1` which would return undefined
  416. const value = context.values[index];
  417. const percent = value === undefined ? 0 : $faa2e61a3361514f$var$convertValueToPercentage(value, context.min, context.max);
  418. const label = $faa2e61a3361514f$var$getLabel(index, context.values.length);
  419. const orientationSize = size === null || size === void 0 ? void 0 : size[orientation.size];
  420. const thumbInBoundsOffset = orientationSize ? $faa2e61a3361514f$var$getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
  421. $g1Vy2$useEffect(()=>{
  422. if (thumb) {
  423. context.thumbs.add(thumb);
  424. return ()=>{
  425. context.thumbs.delete(thumb);
  426. };
  427. }
  428. }, [
  429. thumb,
  430. context.thumbs
  431. ]);
  432. return /*#__PURE__*/ $g1Vy2$createElement("span", {
  433. style: {
  434. transform: 'var(--radix-slider-thumb-transform)',
  435. position: 'absolute',
  436. [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
  437. }
  438. }, /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$Collection.ItemSlot, {
  439. scope: props.__scopeSlider
  440. }, /*#__PURE__*/ $g1Vy2$createElement($g1Vy2$Primitive.span, $g1Vy2$babelruntimehelpersesmextends({
  441. role: "slider",
  442. "aria-label": props['aria-label'] || label,
  443. "aria-valuemin": context.min,
  444. "aria-valuenow": value,
  445. "aria-valuemax": context.max,
  446. "aria-orientation": context.orientation,
  447. "data-orientation": context.orientation,
  448. "data-disabled": context.disabled ? '' : undefined,
  449. tabIndex: context.disabled ? undefined : 0
  450. }, thumbProps, {
  451. ref: composedRefs,
  452. style: value === undefined ? {
  453. display: 'none'
  454. } : props.style,
  455. onFocus: $g1Vy2$composeEventHandlers(props.onFocus, ()=>{
  456. context.valueIndexToChangeRef.current = index;
  457. })
  458. }))));
  459. });
  460. /*#__PURE__*/ Object.assign($faa2e61a3361514f$export$2c1b491743890dec, {
  461. displayName: $faa2e61a3361514f$var$THUMB_NAME
  462. });
  463. /* -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$BubbleInput = (props)=>{
  464. const { value: value , ...inputProps } = props;
  465. const ref = $g1Vy2$useRef(null);
  466. const prevValue = $g1Vy2$usePrevious(value); // Bubble value change to parents (e.g form change event)
  467. $g1Vy2$useEffect(()=>{
  468. const input = ref.current;
  469. const inputProto = window.HTMLInputElement.prototype;
  470. const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value');
  471. const setValue = descriptor.set;
  472. if (prevValue !== value && setValue) {
  473. const event = new Event('input', {
  474. bubbles: true
  475. });
  476. setValue.call(input, value);
  477. input.dispatchEvent(event);
  478. }
  479. }, [
  480. prevValue,
  481. value
  482. ]);
  483. /**
  484. * We purposefully do not use `type="hidden"` here otherwise forms that
  485. * wrap it will not be able to access its value via the FormData API.
  486. *
  487. * We purposefully do not add the `value` attribute here to allow the value
  488. * to be set programatically and bubble to any parent form `onChange` event.
  489. * Adding the `value` will cause React to consider the programatic
  490. * dispatch a duplicate and it will get swallowed.
  491. */ return /*#__PURE__*/ $g1Vy2$createElement("input", $g1Vy2$babelruntimehelpersesmextends({
  492. style: {
  493. display: 'none'
  494. }
  495. }, inputProps, {
  496. ref: ref,
  497. defaultValue: value
  498. }));
  499. };
  500. function $faa2e61a3361514f$var$getNextSortedValues(prevValues = [], nextValue, atIndex) {
  501. const nextValues = [
  502. ...prevValues
  503. ];
  504. nextValues[atIndex] = nextValue;
  505. return nextValues.sort((a, b)=>a - b
  506. );
  507. }
  508. function $faa2e61a3361514f$var$convertValueToPercentage(value, min, max) {
  509. const maxSteps = max - min;
  510. const percentPerStep = 100 / maxSteps;
  511. const percentage = percentPerStep * (value - min);
  512. return $g1Vy2$clamp(percentage, [
  513. 0,
  514. 100
  515. ]);
  516. }
  517. /**
  518. * Returns a label for each thumb when there are two or more thumbs
  519. */ function $faa2e61a3361514f$var$getLabel(index, totalValues) {
  520. if (totalValues > 2) return `Value ${index + 1} of ${totalValues}`;
  521. else if (totalValues === 2) return [
  522. 'Minimum',
  523. 'Maximum'
  524. ][index];
  525. else return undefined;
  526. }
  527. /**
  528. * Given a `values` array and a `nextValue`, determine which value in
  529. * the array is closest to `nextValue` and return its index.
  530. *
  531. * @example
  532. * // returns 1
  533. * getClosestValueIndex([10, 30], 25);
  534. */ function $faa2e61a3361514f$var$getClosestValueIndex(values, nextValue) {
  535. if (values.length === 1) return 0;
  536. const distances = values.map((value)=>Math.abs(value - nextValue)
  537. );
  538. const closestDistance = Math.min(...distances);
  539. return distances.indexOf(closestDistance);
  540. }
  541. /**
  542. * Offsets the thumb centre point while sliding to ensure it remains
  543. * within the bounds of the slider when reaching the edges
  544. */ function $faa2e61a3361514f$var$getThumbInBoundsOffset(width, left, direction) {
  545. const halfWidth = width / 2;
  546. const halfPercent = 50;
  547. const offset = $faa2e61a3361514f$var$linearScale([
  548. 0,
  549. halfPercent
  550. ], [
  551. 0,
  552. halfWidth
  553. ]);
  554. return (halfWidth - offset(left) * direction) * direction;
  555. }
  556. /**
  557. * Gets an array of steps between each value.
  558. *
  559. * @example
  560. * // returns [1, 9]
  561. * getStepsBetweenValues([10, 11, 20]);
  562. */ function $faa2e61a3361514f$var$getStepsBetweenValues(values) {
  563. return values.slice(0, -1).map((value, index)=>values[index + 1] - value
  564. );
  565. }
  566. /**
  567. * Verifies the minimum steps between all values is greater than or equal
  568. * to the expected minimum steps.
  569. *
  570. * @example
  571. * // returns false
  572. * hasMinStepsBetweenValues([1,2,3], 2);
  573. *
  574. * @example
  575. * // returns true
  576. * hasMinStepsBetweenValues([1,2,3], 1);
  577. */ function $faa2e61a3361514f$var$hasMinStepsBetweenValues(values, minStepsBetweenValues) {
  578. if (minStepsBetweenValues > 0) {
  579. const stepsBetweenValues = $faa2e61a3361514f$var$getStepsBetweenValues(values);
  580. const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
  581. return actualMinStepsBetweenValues >= minStepsBetweenValues;
  582. }
  583. return true;
  584. } // https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
  585. function $faa2e61a3361514f$var$linearScale(input, output) {
  586. return (value)=>{
  587. if (input[0] === input[1] || output[0] === output[1]) return output[0];
  588. const ratio = (output[1] - output[0]) / (input[1] - input[0]);
  589. return output[0] + ratio * (value - input[0]);
  590. };
  591. }
  592. function $faa2e61a3361514f$var$getDecimalCount(value) {
  593. return (String(value).split('.')[1] || '').length;
  594. }
  595. function $faa2e61a3361514f$var$roundValue(value, decimalCount) {
  596. const rounder = Math.pow(10, decimalCount);
  597. return Math.round(value * rounder) / rounder;
  598. }
  599. const $faa2e61a3361514f$export$be92b6f5f03c0fe9 = $faa2e61a3361514f$export$472062a354075cee;
  600. const $faa2e61a3361514f$export$13921ac0cc260818 = $faa2e61a3361514f$export$105594979f116971;
  601. const $faa2e61a3361514f$export$9a58ef0d7ad3278c = $faa2e61a3361514f$export$a5cf38a7a000fe77;
  602. const $faa2e61a3361514f$export$6521433ed15a34db = $faa2e61a3361514f$export$2c1b491743890dec;
  603. export {$faa2e61a3361514f$export$ef72632d7b901f97 as createSliderScope, $faa2e61a3361514f$export$472062a354075cee as Slider, $faa2e61a3361514f$export$105594979f116971 as SliderTrack, $faa2e61a3361514f$export$a5cf38a7a000fe77 as SliderRange, $faa2e61a3361514f$export$2c1b491743890dec as SliderThumb, $faa2e61a3361514f$export$be92b6f5f03c0fe9 as Root, $faa2e61a3361514f$export$13921ac0cc260818 as Track, $faa2e61a3361514f$export$9a58ef0d7ad3278c as Range, $faa2e61a3361514f$export$6521433ed15a34db as Thumb};
  604. //# sourceMappingURL=index.mjs.map