@salt-ds/lab 1.0.0-alpha.64 → 1.0.0-alpha.66

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 (105) hide show
  1. package/CHANGELOG.md +65 -0
  2. package/css/salt-lab.css +111 -269
  3. package/dist-cjs/carousel/Carousel.css.js +1 -1
  4. package/dist-cjs/carousel/Carousel.js +30 -87
  5. package/dist-cjs/carousel/Carousel.js.map +1 -1
  6. package/dist-cjs/carousel/CarouselContext.js +62 -0
  7. package/dist-cjs/carousel/CarouselContext.js.map +1 -0
  8. package/dist-cjs/carousel/CarouselControls.css.js +6 -0
  9. package/dist-cjs/carousel/CarouselControls.css.js.map +1 -0
  10. package/dist-cjs/carousel/CarouselControls.js +122 -0
  11. package/dist-cjs/carousel/CarouselControls.js.map +1 -0
  12. package/dist-cjs/carousel/CarouselReducer.js +77 -0
  13. package/dist-cjs/carousel/CarouselReducer.js.map +1 -0
  14. package/dist-cjs/carousel/CarouselSlide.css.js +6 -0
  15. package/dist-cjs/carousel/CarouselSlide.css.js.map +1 -0
  16. package/dist-cjs/carousel/CarouselSlide.js +95 -45
  17. package/dist-cjs/carousel/CarouselSlide.js.map +1 -1
  18. package/dist-cjs/carousel/CarouselSlider.css.js +6 -0
  19. package/dist-cjs/carousel/CarouselSlider.css.js.map +1 -0
  20. package/dist-cjs/carousel/CarouselSlider.js +93 -0
  21. package/dist-cjs/carousel/CarouselSlider.js.map +1 -0
  22. package/dist-cjs/index.js +6 -6
  23. package/dist-es/carousel/Carousel.css.js +1 -1
  24. package/dist-es/carousel/Carousel.js +32 -89
  25. package/dist-es/carousel/Carousel.js.map +1 -1
  26. package/dist-es/carousel/CarouselContext.js +58 -0
  27. package/dist-es/carousel/CarouselContext.js.map +1 -0
  28. package/dist-es/carousel/CarouselControls.css.js +4 -0
  29. package/dist-es/carousel/CarouselControls.css.js.map +1 -0
  30. package/dist-es/carousel/CarouselControls.js +120 -0
  31. package/dist-es/carousel/CarouselControls.js.map +1 -0
  32. package/dist-es/carousel/CarouselReducer.js +75 -0
  33. package/dist-es/carousel/CarouselReducer.js.map +1 -0
  34. package/dist-es/carousel/CarouselSlide.css.js +4 -0
  35. package/dist-es/carousel/CarouselSlide.css.js.map +1 -0
  36. package/dist-es/carousel/CarouselSlide.js +96 -46
  37. package/dist-es/carousel/CarouselSlide.js.map +1 -1
  38. package/dist-es/carousel/CarouselSlider.css.js +4 -0
  39. package/dist-es/carousel/CarouselSlider.css.js.map +1 -0
  40. package/dist-es/carousel/CarouselSlider.js +91 -0
  41. package/dist-es/carousel/CarouselSlider.js.map +1 -0
  42. package/dist-es/index.js +3 -3
  43. package/dist-types/carousel/Carousel.d.ts +10 -23
  44. package/dist-types/carousel/CarouselContext.d.ts +11 -0
  45. package/dist-types/carousel/CarouselControls.d.ts +26 -0
  46. package/dist-types/carousel/CarouselReducer.d.ts +30 -0
  47. package/dist-types/carousel/CarouselSlide.d.ts +31 -8
  48. package/dist-types/carousel/CarouselSlider.d.ts +13 -0
  49. package/dist-types/carousel/index.d.ts +2 -0
  50. package/dist-types/index.d.ts +0 -1
  51. package/dist-types/utils/index.d.ts +1 -1
  52. package/package.json +2 -2
  53. package/dist-cjs/slider/RangeSlider.js +0 -182
  54. package/dist-cjs/slider/RangeSlider.js.map +0 -1
  55. package/dist-cjs/slider/Slider.js +0 -145
  56. package/dist-cjs/slider/Slider.js.map +0 -1
  57. package/dist-cjs/slider/internal/SliderThumb.css.js +0 -6
  58. package/dist-cjs/slider/internal/SliderThumb.css.js.map +0 -1
  59. package/dist-cjs/slider/internal/SliderThumb.js +0 -141
  60. package/dist-cjs/slider/internal/SliderThumb.js.map +0 -1
  61. package/dist-cjs/slider/internal/SliderTooltip.css.js +0 -6
  62. package/dist-cjs/slider/internal/SliderTooltip.css.js.map +0 -1
  63. package/dist-cjs/slider/internal/SliderTooltip.js +0 -58
  64. package/dist-cjs/slider/internal/SliderTooltip.js.map +0 -1
  65. package/dist-cjs/slider/internal/SliderTrack.css.js +0 -6
  66. package/dist-cjs/slider/internal/SliderTrack.css.js.map +0 -1
  67. package/dist-cjs/slider/internal/SliderTrack.js +0 -168
  68. package/dist-cjs/slider/internal/SliderTrack.js.map +0 -1
  69. package/dist-cjs/slider/internal/useRangeSliderThumb.js +0 -233
  70. package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +0 -1
  71. package/dist-cjs/slider/internal/useSliderThumb.js +0 -162
  72. package/dist-cjs/slider/internal/useSliderThumb.js.map +0 -1
  73. package/dist-cjs/slider/internal/utils.js +0 -113
  74. package/dist-cjs/slider/internal/utils.js.map +0 -1
  75. package/dist-es/slider/RangeSlider.js +0 -180
  76. package/dist-es/slider/RangeSlider.js.map +0 -1
  77. package/dist-es/slider/Slider.js +0 -143
  78. package/dist-es/slider/Slider.js.map +0 -1
  79. package/dist-es/slider/internal/SliderThumb.css.js +0 -4
  80. package/dist-es/slider/internal/SliderThumb.css.js.map +0 -1
  81. package/dist-es/slider/internal/SliderThumb.js +0 -139
  82. package/dist-es/slider/internal/SliderThumb.js.map +0 -1
  83. package/dist-es/slider/internal/SliderTooltip.css.js +0 -4
  84. package/dist-es/slider/internal/SliderTooltip.css.js.map +0 -1
  85. package/dist-es/slider/internal/SliderTooltip.js +0 -56
  86. package/dist-es/slider/internal/SliderTooltip.js.map +0 -1
  87. package/dist-es/slider/internal/SliderTrack.css.js +0 -4
  88. package/dist-es/slider/internal/SliderTrack.css.js.map +0 -1
  89. package/dist-es/slider/internal/SliderTrack.js +0 -166
  90. package/dist-es/slider/internal/SliderTrack.js.map +0 -1
  91. package/dist-es/slider/internal/useRangeSliderThumb.js +0 -231
  92. package/dist-es/slider/internal/useRangeSliderThumb.js.map +0 -1
  93. package/dist-es/slider/internal/useSliderThumb.js +0 -160
  94. package/dist-es/slider/internal/useSliderThumb.js.map +0 -1
  95. package/dist-es/slider/internal/utils.js +0 -105
  96. package/dist-es/slider/internal/utils.js.map +0 -1
  97. package/dist-types/slider/RangeSlider.d.ts +0 -99
  98. package/dist-types/slider/Slider.d.ts +0 -100
  99. package/dist-types/slider/index.d.ts +0 -2
  100. package/dist-types/slider/internal/SliderThumb.d.ts +0 -28
  101. package/dist-types/slider/internal/SliderTooltip.d.ts +0 -6
  102. package/dist-types/slider/internal/SliderTrack.d.ts +0 -24
  103. package/dist-types/slider/internal/useRangeSliderThumb.d.ts +0 -30
  104. package/dist-types/slider/internal/useSliderThumb.d.ts +0 -28
  105. package/dist-types/slider/internal/utils.d.ts +0 -20
@@ -1,113 +0,0 @@
1
- 'use strict';
2
-
3
- const toFloat = (value) => typeof value === "string" ? Number.parseFloat(value) : value;
4
- const calculateMarkPosition = (value, max, min) => {
5
- if (min === max) {
6
- return 0;
7
- }
8
- const clampedValue = Number.isNaN(toFloat(value)) ? min : Math.min(Math.max(toFloat(value), min), max);
9
- const markPosition = (clampedValue - min) / (max - min) * 100;
10
- return Math.round(markPosition * 100) / 100;
11
- };
12
- const calculatePercentage = (value, max, min) => (value - min) / (max - min) * 100;
13
- const clamp = (value, max, min, step, decimalPlaces, marks, restrictToMarks) => {
14
- if (Number.isNaN(value)) {
15
- return min;
16
- }
17
- const clampedValue = Math.min(Math.max(value, min), max);
18
- if (restrictToMarks && marks) {
19
- let closestMark = marks[0].value;
20
- let smallestDifference = Math.abs(clampedValue - closestMark);
21
- for (let i = 1; i < marks.length; i++) {
22
- const currentDifference = Math.abs(clampedValue - marks[i].value);
23
- if (currentDifference < smallestDifference) {
24
- smallestDifference = currentDifference;
25
- closestMark = marks[i].value;
26
- }
27
- }
28
- return closestMark;
29
- }
30
- let roundedValue = Math.round(clampedValue / step) * step;
31
- if (roundedValue > max) {
32
- roundedValue = max;
33
- } else if (roundedValue < min) {
34
- roundedValue = min;
35
- }
36
- return Number.parseFloat(roundedValue.toFixed(decimalPlaces));
37
- };
38
- const clampRange = (range, max, min, step, decimalPlaces, marks, restrictToMarks) => {
39
- let [start, end] = range;
40
- if (Number.isNaN(start)) {
41
- start = min;
42
- }
43
- if (Number.isNaN(end)) {
44
- end = max;
45
- }
46
- if (start > end) {
47
- [start, end] = [end, start];
48
- }
49
- start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);
50
- end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);
51
- return [start, end];
52
- };
53
- const getClickedPosition = (sliderRef, clientX, max, min, step, decimalPlaces, marks, restrictToMarks) => {
54
- if (!sliderRef.current) return;
55
- const sliderRect = sliderRef.current.getBoundingClientRect();
56
- const rawValue = (clientX - sliderRect.left) / sliderRect.width * (max - min) + min;
57
- const steppedValue = Math.round(rawValue / step) * step;
58
- return clamp(
59
- steppedValue,
60
- max,
61
- min,
62
- step,
63
- decimalPlaces,
64
- marks,
65
- restrictToMarks
66
- );
67
- };
68
- const getKeyboardValue = (event, value, step, stepMultiplier, max, min, restrictToMarks, marks) => {
69
- let newValue = value;
70
- if (restrictToMarks && marks && marks.length >= 1) {
71
- const currentIndex = marks.findIndex((mark) => mark.value === value);
72
- switch (event.key) {
73
- case "ArrowUp":
74
- case "ArrowRight":
75
- case "PageUp":
76
- if (currentIndex < marks.length - 1) {
77
- newValue = marks[currentIndex + 1].value;
78
- }
79
- break;
80
- case "ArrowDown":
81
- case "ArrowLeft":
82
- case "PageDown":
83
- if (currentIndex > 0) {
84
- newValue = marks[currentIndex - 1].value;
85
- }
86
- break;
87
- default:
88
- return newValue;
89
- }
90
- } else {
91
- switch (event.key) {
92
- case "PageUp":
93
- newValue = Math.min(value + step * stepMultiplier, max);
94
- break;
95
- case "PageDown":
96
- newValue = Math.max(value - step * stepMultiplier, min);
97
- break;
98
- default:
99
- return newValue;
100
- }
101
- }
102
- event.preventDefault();
103
- return newValue;
104
- };
105
-
106
- exports.calculateMarkPosition = calculateMarkPosition;
107
- exports.calculatePercentage = calculatePercentage;
108
- exports.clamp = clamp;
109
- exports.clampRange = clampRange;
110
- exports.getClickedPosition = getClickedPosition;
111
- exports.getKeyboardValue = getKeyboardValue;
112
- exports.toFloat = toFloat;
113
- //# sourceMappingURL=utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const toFloat = (value: number | string) =>\n typeof value === \"string\" ? Number.parseFloat(value) : value;\n\nexport const calculateMarkPosition = (\n value: number | string,\n max: number,\n min: number,\n) => {\n if (min === max) {\n return 0;\n }\n const clampedValue = Number.isNaN(toFloat(value))\n ? min\n : Math.min(Math.max(toFloat(value), min), max);\n const markPosition = ((clampedValue - min) / (max - min)) * 100;\n return Math.round(markPosition * 100) / 100;\n};\n\nexport const calculatePercentage = (value: number, max: number, min: number) =>\n ((value - min) / (max - min)) * 100;\n\nexport const clamp = (\n value: number,\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { value: number; label: string }[],\n restrictToMarks?: boolean,\n) => {\n if (Number.isNaN(value)) {\n return min;\n }\n // Clamp the value between min and max\n const clampedValue = Math.min(Math.max(value, min), max);\n if (restrictToMarks && marks) {\n // Find the closest mark value\n let closestMark = marks[0].value;\n let smallestDifference = Math.abs(clampedValue - closestMark);\n for (let i = 1; i < marks.length; i++) {\n const currentDifference = Math.abs(clampedValue - marks[i].value);\n if (currentDifference < smallestDifference) {\n smallestDifference = currentDifference;\n closestMark = marks[i].value;\n }\n }\n return closestMark;\n }\n // Round to the nearest multiple of the step\n let roundedValue = Math.round(clampedValue / step) * step;\n // Ensure the rounded value does not exceed max or min\n if (roundedValue > max) {\n roundedValue = max;\n } else if (roundedValue < min) {\n roundedValue = min;\n }\n return Number.parseFloat(roundedValue.toFixed(decimalPlaces));\n};\n\nexport const clampRange = (\n range: [number, number],\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { value: number; label: string }[],\n restrictToMarks?: boolean,\n) => {\n let [start, end] = range;\n\n if (Number.isNaN(start)) {\n start = min;\n }\n if (Number.isNaN(end)) {\n end = max;\n }\n if (start > end) {\n [start, end] = [end, start];\n }\n start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);\n end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);\n return [start, end] as [number, number];\n};\n\nexport const getClickedPosition = (\n sliderRef: RefObject<HTMLDivElement>,\n clientX: number,\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { label: string; value: number }[],\n restrictToMarks?: boolean,\n) => {\n if (!sliderRef.current) return;\n\n const sliderRect = sliderRef.current.getBoundingClientRect();\n const rawValue =\n ((clientX - sliderRect.left) / sliderRect.width) * (max - min) + min;\n const steppedValue = Math.round(rawValue / step) * step;\n return clamp(\n steppedValue,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n};\n\nexport const getKeyboardValue = (\n event: React.KeyboardEvent,\n value: number,\n step: number,\n stepMultiplier: number,\n max: number,\n min: number,\n restrictToMarks?: boolean,\n marks?: { label: string; value: number }[],\n) => {\n let newValue = value;\n\n if (restrictToMarks && marks && marks.length >= 1) {\n const currentIndex = marks.findIndex((mark) => mark.value === value);\n\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"PageUp\":\n if (currentIndex < marks.length - 1) {\n newValue = marks[currentIndex + 1].value;\n }\n break;\n case \"ArrowDown\":\n case \"ArrowLeft\":\n case \"PageDown\":\n if (currentIndex > 0) {\n newValue = marks[currentIndex - 1].value;\n }\n break;\n default:\n return newValue;\n }\n } else {\n switch (event.key) {\n case \"PageUp\":\n newValue = Math.min(value + step * stepMultiplier, max);\n break;\n case \"PageDown\":\n newValue = Math.max(value - step * stepMultiplier, min);\n break;\n default:\n return newValue;\n }\n }\n\n event.preventDefault();\n return newValue;\n};\n"],"names":[],"mappings":"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"}
@@ -1,180 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { forwardRef, useRef } from 'react';
3
- import { useControlled, useFormFieldProps } from '@salt-ds/core';
4
- import { clsx } from 'clsx';
5
- import { SliderThumb } from './internal/SliderThumb.js';
6
- import { SliderTrack } from './internal/SliderTrack.js';
7
- import { useRangeSliderThumb } from './internal/useRangeSliderThumb.js';
8
- import { clampRange, calculatePercentage, toFloat } from './internal/utils.js';
9
-
10
- const RangeSlider = forwardRef(
11
- function RangeSlider2({
12
- "aria-label": ariaLabel,
13
- "aria-labelledby": ariaLabelledBy,
14
- "aria-valuetext": ariaValueText,
15
- accessibleMaxText,
16
- accessibleMinText,
17
- decimalPlaces = 2,
18
- disabled: disabledProp = false,
19
- format,
20
- marks,
21
- max = 10,
22
- min = 0,
23
- maxLabel,
24
- minLabel,
25
- onChange,
26
- onChangeEnd,
27
- restrictToMarks = false,
28
- showTooltip = true,
29
- step = 1,
30
- stepMultiplier = 2,
31
- value: valueProp,
32
- defaultValue = [min, min + (max - min) / 2],
33
- ...rest
34
- }, ref) {
35
- const [valueState, setValue] = useControlled({
36
- controlled: valueProp,
37
- default: defaultValue,
38
- name: "RangeSlider",
39
- state: "value"
40
- });
41
- const lastValueRef = useRef(valueState);
42
- const {
43
- a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
44
- disabled: formFieldDisabled
45
- } = useFormFieldProps();
46
- const disabled = formFieldDisabled || disabledProp;
47
- const inputRefs = Array.from(
48
- { length: 2 },
49
- () => useRef(null)
50
- );
51
- const value = clampRange(
52
- valueState,
53
- max,
54
- min,
55
- step,
56
- decimalPlaces,
57
- marks,
58
- restrictToMarks
59
- );
60
- const progressPercentageStart = calculatePercentage(value[0], max, min);
61
- const progressPercentageEnd = calculatePercentage(value[1], max, min);
62
- const handleInputChange = (event, thumbIndex) => {
63
- const parsedValue = toFloat(event.target.value);
64
- const values = preventThumbOverlap(parsedValue, value, thumbIndex);
65
- const haveValuesChanged = values[0] !== lastValueRef.current[0] || values[1] !== lastValueRef.current[1];
66
- if (haveValuesChanged) {
67
- const values2 = preventThumbOverlap(parsedValue, value, thumbIndex);
68
- setValue(values2);
69
- onChange == null ? void 0 : onChange(event.nativeEvent, values2);
70
- onChangeEnd == null ? void 0 : onChangeEnd(event.nativeEvent, values2);
71
- lastValueRef.current = values2;
72
- }
73
- };
74
- const {
75
- handleBlur,
76
- handleFocus,
77
- handleKeydownOnThumb,
78
- handlePointerDownOnThumb,
79
- handlePointerDownOnTrack,
80
- isDragging,
81
- isFocusVisible,
82
- sliderRef,
83
- thumbIndexState,
84
- preventThumbOverlap
85
- } = useRangeSliderThumb({
86
- decimalPlaces,
87
- handleInputChange,
88
- inputRefs,
89
- marks,
90
- min,
91
- max,
92
- step,
93
- value,
94
- onChange,
95
- onChangeEnd,
96
- restrictToMarks,
97
- setValue,
98
- stepMultiplier
99
- });
100
- const thumbProps = {
101
- "aria-label": ariaLabel,
102
- "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy),
103
- "aria-valuemax": max,
104
- "aria-valuemin": min,
105
- "aria-valuetext": ariaValueText,
106
- accessibleMaxText,
107
- accessibleMinText,
108
- disabled,
109
- format,
110
- max,
111
- maxLabel,
112
- min,
113
- minLabel,
114
- restrictToMarks,
115
- showTooltip,
116
- step,
117
- stepMultiplier,
118
- sliderValue: value
119
- };
120
- return /* @__PURE__ */ jsxs(
121
- SliderTrack,
122
- {
123
- disabled,
124
- format,
125
- handlePointerDown: handlePointerDownOnTrack,
126
- isDragging,
127
- isRange: true,
128
- marks,
129
- min,
130
- minLabel,
131
- max,
132
- maxLabel,
133
- progressPercentageRange: [
134
- progressPercentageStart,
135
- progressPercentageEnd
136
- ],
137
- ref,
138
- sliderRef,
139
- ...rest,
140
- children: [
141
- /* @__PURE__ */ jsx(
142
- SliderThumb,
143
- {
144
- index: 0,
145
- handleInputChange: (event) => handleInputChange(event, 0),
146
- handlePointerDown: (event) => handlePointerDownOnThumb(event, 0),
147
- handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 0),
148
- offsetPercentage: `${calculatePercentage(value[0], max, min)}%`,
149
- trackDragging: isDragging && thumbIndexState === 0,
150
- isFocusVisible: isFocusVisible && thumbIndexState === 0,
151
- inputRef: inputRefs[0],
152
- onFocus: () => handleFocus(0),
153
- onBlur: () => handleBlur(0),
154
- ...thumbProps
155
- }
156
- ),
157
- /* @__PURE__ */ jsx(
158
- SliderThumb,
159
- {
160
- index: 1,
161
- handleInputChange: (event) => handleInputChange(event, 1),
162
- handlePointerDown: (event) => handlePointerDownOnThumb(event, 1),
163
- handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 1),
164
- offsetPercentage: `${calculatePercentage(value[1], max, min)}%`,
165
- trackDragging: isDragging && thumbIndexState === 1,
166
- isFocusVisible: isFocusVisible && thumbIndexState === 1,
167
- inputRef: inputRefs[1],
168
- onFocus: () => handleFocus(1),
169
- onBlur: () => handleBlur(1),
170
- ...thumbProps
171
- }
172
- )
173
- ]
174
- }
175
- );
176
- }
177
- );
178
-
179
- export { RangeSlider };
180
- //# sourceMappingURL=RangeSlider.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import {\n type ChangeEvent,\n type HTMLAttributes,\n forwardRef,\n useRef,\n} from \"react\";\n\nimport { useControlled, useFormFieldProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default [min, min + (max - min) / 2]\n */\n defaultValue?: [number, number];\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for minimum value.\n */\n minLabel?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: [number, number]) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: [number, number]) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n function RangeSlider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n max = 10,\n min = 0,\n maxLabel,\n minLabel,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = [min, min + (max - min) / 2],\n ...rest\n },\n ref,\n ) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"RangeSlider\",\n state: \"value\",\n });\n const lastValueRef = useRef<[number, number]>(valueState);\n\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRefs = Array.from({ length: 2 }, () =>\n useRef<HTMLInputElement>(null),\n );\n const value: [number, number] = clampRange(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentageStart = calculatePercentage(value[0], max, min);\n const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n const handleInputChange = (\n event: ChangeEvent<HTMLInputElement>,\n thumbIndex: number,\n ) => {\n const parsedValue = toFloat(event.target.value);\n const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n const haveValuesChanged =\n values[0] !== lastValueRef.current[0] ||\n values[1] !== lastValueRef.current[1];\n if (haveValuesChanged) {\n const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n setValue(values as [number, number]);\n onChange?.(event.nativeEvent, values as [number, number]);\n onChangeEnd?.(event.nativeEvent, values as [number, number]);\n lastValueRef.current = values;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n thumbIndexState,\n preventThumbOverlap,\n } = useRangeSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRefs,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n const thumbProps = {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText: accessibleMaxText,\n accessibleMinText: accessibleMinText,\n disabled: disabled,\n format: format,\n max: max,\n maxLabel: maxLabel,\n min: min,\n minLabel: minLabel,\n restrictToMarks: restrictToMarks,\n showTooltip: showTooltip,\n step: step,\n stepMultiplier: stepMultiplier,\n sliderValue: value,\n };\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n isRange\n marks={marks}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n progressPercentageRange={[\n progressPercentageStart,\n progressPercentageEnd,\n ]}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n index={0}\n handleInputChange={(event) => handleInputChange(event, 0)}\n handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n trackDragging={isDragging && thumbIndexState === 0}\n isFocusVisible={isFocusVisible && thumbIndexState === 0}\n inputRef={inputRefs[0]}\n onFocus={() => handleFocus(0)}\n onBlur={() => handleBlur(0)}\n {...thumbProps}\n />\n <SliderThumb\n index={1}\n handleInputChange={(event) => handleInputChange(event, 1)}\n handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n trackDragging={isDragging && thumbIndexState === 1}\n isFocusVisible={isFocusVisible && thumbIndexState === 1}\n inputRef={inputRefs[1]}\n onFocus={() => handleFocus(1)}\n onBlur={() => handleBlur(1)}\n {...thumbProps}\n />\n </SliderTrack>\n );\n },\n);\n"],"names":["RangeSlider","values"],"mappings":"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"}
@@ -1,143 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { forwardRef, useRef } from 'react';
3
- import { useControlled, useFormFieldProps } from '@salt-ds/core';
4
- import { clsx } from 'clsx';
5
- import { SliderThumb } from './internal/SliderThumb.js';
6
- import { SliderTrack } from './internal/SliderTrack.js';
7
- import { useSliderThumb } from './internal/useSliderThumb.js';
8
- import { clamp, calculatePercentage, toFloat } from './internal/utils.js';
9
-
10
- const Slider = forwardRef(function Slider2({
11
- "aria-label": ariaLabel,
12
- "aria-labelledby": ariaLabelledBy,
13
- "aria-valuetext": ariaValueText,
14
- accessibleMaxText,
15
- accessibleMinText,
16
- decimalPlaces = 2,
17
- disabled: disabledProp = false,
18
- format,
19
- marks,
20
- min = 0,
21
- minLabel,
22
- max = 10,
23
- maxLabel,
24
- onChange,
25
- onChangeEnd,
26
- restrictToMarks = false,
27
- showTooltip = true,
28
- step = 1,
29
- stepMultiplier = 2,
30
- value: valueProp,
31
- defaultValue = min + (max - min) / 2,
32
- ...rest
33
- }, ref) {
34
- const [valueState, setValue] = useControlled({
35
- controlled: valueProp,
36
- default: defaultValue,
37
- name: "Slider",
38
- state: "value"
39
- });
40
- const {
41
- a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
42
- disabled: formFieldDisabled
43
- } = useFormFieldProps();
44
- const disabled = formFieldDisabled || disabledProp;
45
- const inputRef = useRef(null);
46
- const value = clamp(
47
- valueState,
48
- max,
49
- min,
50
- step,
51
- decimalPlaces,
52
- marks,
53
- restrictToMarks
54
- );
55
- const progressPercentage = calculatePercentage(toFloat(value), max, min);
56
- const lastValueRef = useRef(value);
57
- const handleInputChange = (event) => {
58
- const parsedValue = toFloat(event.target.value);
59
- if (parsedValue !== lastValueRef.current) {
60
- setValue(parsedValue);
61
- onChange == null ? void 0 : onChange(event.nativeEvent, parsedValue);
62
- onChangeEnd == null ? void 0 : onChangeEnd(event.nativeEvent, parsedValue);
63
- lastValueRef.current = parsedValue;
64
- }
65
- };
66
- const {
67
- handleBlur,
68
- handleFocus,
69
- handleKeydownOnThumb,
70
- handlePointerDownOnThumb,
71
- handlePointerDownOnTrack,
72
- isDragging,
73
- isFocusVisible,
74
- sliderRef
75
- } = useSliderThumb({
76
- decimalPlaces,
77
- handleInputChange,
78
- inputRef,
79
- marks,
80
- min,
81
- max,
82
- step,
83
- value,
84
- onChange,
85
- onChangeEnd,
86
- restrictToMarks,
87
- setValue,
88
- stepMultiplier
89
- });
90
- return /* @__PURE__ */ jsx(
91
- SliderTrack,
92
- {
93
- disabled,
94
- format,
95
- handlePointerDown: handlePointerDownOnTrack,
96
- isDragging,
97
- min,
98
- minLabel,
99
- max,
100
- maxLabel,
101
- marks,
102
- progressPercentage,
103
- ref,
104
- sliderRef,
105
- ...rest,
106
- children: /* @__PURE__ */ jsx(
107
- SliderThumb,
108
- {
109
- "aria-label": ariaLabel,
110
- "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
111
- "aria-valuemax": max,
112
- "aria-valuemin": min,
113
- "aria-valuetext": ariaValueText,
114
- accessibleMaxText,
115
- accessibleMinText,
116
- disabled,
117
- format,
118
- onBlur: handleBlur,
119
- onFocus: handleFocus,
120
- handleInputChange,
121
- handlePointerDown: handlePointerDownOnThumb,
122
- handleKeydownOnThumb,
123
- inputRef,
124
- isFocusVisible,
125
- min,
126
- minLabel,
127
- max,
128
- maxLabel,
129
- offsetPercentage: `${progressPercentage}%`,
130
- restrictToMarks,
131
- sliderValue: value,
132
- showTooltip,
133
- step,
134
- stepMultiplier,
135
- trackDragging: isDragging
136
- }
137
- )
138
- }
139
- );
140
- });
141
-
142
- export { Slider };
143
- //# sourceMappingURL=Slider.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import {\n type ChangeEvent,\n type HTMLAttributes,\n forwardRef,\n useRef,\n} from \"react\";\n\nimport { useControlled, useFormFieldProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n * @default false\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default min + (max - min) / 2,\n */\n defaultValue?: number;\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for the minimum value.\n */\n minLabel?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: number) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: number) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n min = 0,\n minLabel,\n max = 10,\n maxLabel,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = min + (max - min) / 2,\n ...rest\n },\n ref,\n) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Slider\",\n state: \"value\",\n });\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRef = useRef<HTMLInputElement>(null);\n const value = clamp(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentage = calculatePercentage(toFloat(value), max, min);\n const lastValueRef = useRef<number>(value);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const parsedValue = toFloat(event.target.value);\n if (parsedValue !== lastValueRef.current) {\n setValue(parsedValue);\n onChange?.(event.nativeEvent, parsedValue);\n onChangeEnd?.(event.nativeEvent, parsedValue);\n lastValueRef.current = parsedValue;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n } = useSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n marks={marks}\n progressPercentage={progressPercentage}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n aria-label={ariaLabel}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuetext={ariaValueText}\n accessibleMaxText={accessibleMaxText}\n accessibleMinText={accessibleMinText}\n disabled={disabled}\n format={format}\n onBlur={handleBlur}\n onFocus={handleFocus}\n handleInputChange={handleInputChange}\n handlePointerDown={handlePointerDownOnThumb}\n handleKeydownOnThumb={handleKeydownOnThumb}\n inputRef={inputRef}\n isFocusVisible={isFocusVisible}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n offsetPercentage={`${progressPercentage}%`}\n restrictToMarks={restrictToMarks}\n sliderValue={value}\n showTooltip={showTooltip}\n step={step}\n stepMultiplier={stepMultiplier}\n trackDragging={isDragging}\n />\n </SliderTrack>\n );\n});\n"],"names":["Slider"],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltSliderThumb {\n align-items: center;\n background: var(--salt-accent-borderColor);\n cursor: var(--salt-selectable-cursor-hover);\n display: flex;\n height: var(--salt-size-selectable);\n outline: none;\n position: absolute;\n top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);\n transform: translateX(-50%);\n width: var(--salt-size-border-strong);\n}\n\n.saltSliderThumb-disabled {\n background: var(--salt-accent-borderColor-disabled);\n pointer-events: none;\n}\n\n.saltSliderThumb-focusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: var(--salt-focused-outlineOffset);\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltSliderThumb:active,\n.saltSliderThumb-dragging {\n cursor: var(--draggable-grab-cursor-active);\n}\n\n.saltSliderThumb-input {\n border: 0;\n appearance: none;\n cursor: var(--salt-selectable-cursor-hover);\n height: var(--salt-size-base);\n left: var(--slider-progressPercentage);\n margin: 0;\n opacity: 0.0001;\n overflow: hidden;\n -webkit-appearance: none;\n pointer-events: none;\n width: var(--salt-size-base);\n padding: 0;\n position: absolute;\n transform: translateX(-50%);\n}\n\n.saltSliderThumb-secondThumb {\n /* The second thumb needs to sit on top the first thumb */\n z-index: 2;\n}\n\n/* Visually hide accessible text. Can not\n use visibility: hidden as we need the screen\n reader to announce it */\n.saltSliderThumb-accessibleText {\n position: absolute;\n height: 1px;\n width: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=SliderThumb.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SliderThumb.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,139 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useId } from '@salt-ds/core';
3
- import { useComponentCssInjection } from '@salt-ds/styles';
4
- import { useWindow } from '@salt-ds/window';
5
- import { clsx } from 'clsx';
6
- import { useState, useCallback, useEffect } from 'react';
7
- import css_248z from './SliderThumb.css.js';
8
- import { SliderTooltip } from './SliderTooltip.js';
9
-
10
- const withBaseName = makePrefixer("saltSliderThumb");
11
- const SliderThumb = ({
12
- "aria-label": ariaLabel,
13
- "aria-valuetext": ariaValueText,
14
- "aria-labelledby": ariaLabelledBy,
15
- accessibleMaxText,
16
- accessibleMinText,
17
- disabled,
18
- format,
19
- onBlur,
20
- onFocus,
21
- handleInputChange,
22
- handleKeydownOnThumb,
23
- handlePointerDown,
24
- index = 0,
25
- inputRef,
26
- isFocusVisible,
27
- max,
28
- maxLabel,
29
- min,
30
- minLabel,
31
- offsetPercentage,
32
- restrictToMarks,
33
- showTooltip,
34
- sliderValue,
35
- step,
36
- stepMultiplier,
37
- trackDragging,
38
- ...rest
39
- }) => {
40
- {
41
- const targetWindow = useWindow();
42
- useComponentCssInjection({
43
- testId: "salt-slider-thumb",
44
- css: css_248z,
45
- window: targetWindow
46
- });
47
- const [isTooltipVisible, setIsTooltipVisible] = useState(false);
48
- const id = useId();
49
- const accessibleTextId = `saltSlider-${id}-${index}`;
50
- const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;
51
- const formattedValue = format ? format(value) : value;
52
- const handleKeyDown = useCallback((event) => {
53
- if (event.key === "Escape") {
54
- setIsTooltipVisible(false);
55
- }
56
- }, []);
57
- useEffect(() => {
58
- if (showTooltip && isTooltipVisible) {
59
- targetWindow == null ? void 0 : targetWindow.addEventListener("keydown", handleKeyDown);
60
- }
61
- return () => targetWindow == null ? void 0 : targetWindow.removeEventListener("keydown", handleKeyDown);
62
- }, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);
63
- const handlePointerEnter = () => setIsTooltipVisible(true);
64
- const handlePointerLeave = () => {
65
- setTimeout(() => {
66
- setIsTooltipVisible(false);
67
- }, 300);
68
- };
69
- return /* @__PURE__ */ jsxs(
70
- "div",
71
- {
72
- className: clsx(withBaseName(), {
73
- [withBaseName("focusVisible")]: isFocusVisible,
74
- [withBaseName("disabled")]: disabled,
75
- [withBaseName("dragging")]: trackDragging,
76
- [withBaseName("secondThumb")]: index === 1
77
- }),
78
- "data-testid": "sliderThumb",
79
- onPointerDown: handlePointerDown,
80
- style: { left: offsetPercentage },
81
- ...showTooltip && {
82
- onPointerEnter: handlePointerEnter,
83
- onPointerLeave: handlePointerLeave
84
- },
85
- children: [
86
- showTooltip && /* @__PURE__ */ jsx(
87
- SliderTooltip,
88
- {
89
- value: formattedValue,
90
- open: (isTooltipVisible || trackDragging || isFocusVisible) && !disabled
91
- }
92
- ),
93
- /* @__PURE__ */ jsx(
94
- "input",
95
- {
96
- disabled,
97
- type: "range",
98
- ref: inputRef,
99
- onFocus,
100
- onBlur,
101
- className: withBaseName("input"),
102
- value,
103
- onChange: handleInputChange,
104
- onKeyDown: handleKeydownOnThumb,
105
- "aria-labelledby": ariaLabelledBy,
106
- "aria-valuenow": value,
107
- "aria-valuetext": ariaValueText || (format == null ? void 0 : format(value).toString()),
108
- "aria-label": ariaLabel,
109
- "aria-describedby": accessibleTextId,
110
- min,
111
- max,
112
- step,
113
- ...rest
114
- }
115
- ),
116
- /* @__PURE__ */ jsxs(
117
- "span",
118
- {
119
- "aria-hidden": "true",
120
- id: accessibleTextId,
121
- className: withBaseName("accessibleText"),
122
- children: [
123
- Array.isArray(sliderValue) && `${index === 0 ? "leading" : "trailing"}, ${(format == null ? void 0 : format(sliderValue[0])) || sliderValue[0]} to ${(format == null ? void 0 : format(sliderValue[1])) || sliderValue[1]}, `,
124
- "range",
125
- " ",
126
- accessibleMinText ? `${accessibleMinText} ${min}, ` : `minimum ${(format == null ? void 0 : format(min)) || min}, `,
127
- accessibleMaxText ? `${accessibleMaxText} ${max} ` : `maximum ${(format == null ? void 0 : format(max)) || max}`,
128
- restrictToMarks ? ", custom increments" : step !== 1 && `, increments of ${step}`
129
- ]
130
- }
131
- )
132
- ]
133
- }
134
- );
135
- }
136
- };
137
-
138
- export { SliderThumb };
139
- //# sourceMappingURL=SliderThumb.js.map