index.js 30 KB

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