@tremolo-ui/react 0.6.0 → 0.7.0
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.
- package/dist/index.cjs +252 -58
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +550 -133
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +550 -133
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +218 -39
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/components/DropZone/index.tsx +100 -0
- package/src/components/FileInput/Trigger.tsx +39 -0
- package/src/components/FileInput/context.tsx +24 -0
- package/src/components/FileInput/index.tsx +144 -0
- package/src/components/Knob/index.tsx +8 -5
- package/src/components/NumberInput/DecrementStepper.tsx +2 -13
- package/src/components/NumberInput/IncrementStepper.tsx +2 -14
- package/src/components/NumberInput/InputField.tsx +5 -11
- package/src/components/NumberInput/Stepper.tsx +4 -19
- package/src/components/NumberInput/StepperButton.tsx +13 -8
- package/src/components/NumberInput/context.tsx +6 -7
- package/src/components/NumberInput/index.tsx +4 -13
- package/src/components/Piano/index.tsx +10 -13
- package/src/components/PointsEditor/Background.tsx +2 -8
- package/src/components/PointsEditor/Container.tsx +2 -8
- package/src/components/PointsEditor/Point.tsx +7 -5
- package/src/components/PointsEditor/SelectionBox.tsx +2 -8
- package/src/components/PointsEditor/context.tsx +6 -6
- package/src/components/PointsEditor/index.tsx +9 -11
- package/src/components/Slider/Marks.tsx +6 -9
- package/src/components/Slider/MarksOption.tsx +7 -2
- package/src/components/Slider/Thumb.tsx +9 -15
- package/src/components/Slider/Track.tsx +6 -13
- package/src/components/Slider/index.tsx +5 -12
- package/src/components/Slider/type.ts +4 -2
- package/src/components/XYPad/Area.tsx +5 -10
- package/src/components/XYPad/Thumb.tsx +5 -11
- package/src/components/XYPad/index.tsx +3 -5
- package/src/components/_util/VisuallyHiddenRangeInput.tsx +3 -15
- package/src/components/_util/decimal-digits.ts +23 -0
- package/src/components/_util/visually-hidden.ts +25 -0
- package/src/css-variables.ts +23 -0
- package/src/hooks/_internal/useCheckSteps.ts +2 -3
- package/src/hooks/useDrag.ts +13 -4
- package/src/hooks/useDragValue.ts +17 -2
- package/src/hooks/useDropZone.ts +78 -0
- package/src/hooks/useWheel.ts +4 -1
- package/src/index.ts +12 -9
- package/src/input-event.ts +2 -2
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components/AnimationCanvas/index.tsx","../src/components/
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components/AnimationCanvas/index.tsx","../src/components/DropZone/index.tsx","../src/components/FileInput/Trigger.tsx","../src/components/FileInput/context.tsx","../src/components/FileInput/index.tsx","../src/components/Knob/ActiveLine.tsx","../src/components/Knob/InactiveLine.tsx","../src/components/Knob/SVGRoot.tsx","../src/components/Knob/Thumb.tsx","../src/css-variables.ts","../src/components/Knob/context.tsx","../src/components/Knob/index.tsx","../src/components/NumberInput/StepperButton.tsx","../src/components/NumberInput/DecrementStepper.tsx","../src/components/NumberInput/IncrementStepper.tsx","../src/components/NumberInput/context.tsx","../src/components/NumberInput/index.tsx","../src/components/Piano/keyboard-shortcuts.ts","../src/components/Piano/index.tsx","../src/components/PointsEditor/Background.tsx","../src/components/PointsEditor/Point.tsx","../src/components/PointsEditor/SelectionBox.tsx","../src/components/PointsEditor/context.tsx","../src/components/PointsEditor/index.tsx","../src/components/Slider/Thumb.tsx","../src/components/Slider/Track.tsx","../src/components/Slider/type.ts","../src/components/Slider/Marks.tsx","../src/components/Slider/MarksOption.tsx","../src/components/Slider/context.tsx","../src/components/Slider/index.tsx","../src/components/XYPad/context.tsx","../src/components/XYPad/Thumb.tsx","../src/components/XYPad/Area.tsx","../src/components/XYPad/index.tsx","../src/hooks/useAnimationFrame.ts","../src/hooks/useDrag.ts","../src/hooks/useDragValue.ts","../src/hooks/useDropZone.ts","../src/hooks/useEventListener.ts","../src/hooks/useInterval.ts","../src/hooks/useLongPress.ts","../src/hooks/useMIDIAccess.ts","../src/hooks/useMIDIInput.ts","../src/hooks/useMIDIMessage.ts","../src/hooks/useWheel.ts","../src/input-event.ts"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useComposedRefs } from "./compose-refs.js";
|
|
2
2
|
import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
3
|
-
import { NOT_SUPPORTED, PERMISSION_DENIED, PITCH_BEND_CENTER, UNAVAILABLE, createAnimationCanvas, createDrag, createDragValue, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createSelectionBox, createWheel, elementMapping, relativeMapping, toXY } from "@tremolo-ui/dom";
|
|
3
|
+
import { NOT_SUPPORTED, PERMISSION_DENIED, PITCH_BEND_CENTER, UNAVAILABLE, applyDelta, blackKeyWidth, createAnimationCanvas, createDrag, createDragValue, createDropZone, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createSelectionBox, createWheel, elementMapping, getNoteRangeArray, mapModifier, matchesAccept, notePosition, pianoWidth, relativeMapping, selectModifier, toXY } from "@tremolo-ui/dom";
|
|
4
4
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import {
|
|
5
|
+
import { clamp, isWhiteKey, linearScale, noteKey, radian, toFixed, toPrecision } from "@tremolo-ui/functions";
|
|
6
6
|
//#region src/components/AnimationCanvas/index.tsx
|
|
7
7
|
/**
|
|
8
8
|
* A simple animatable canvas with requestAnimationFrame()
|
|
@@ -68,6 +68,192 @@ const AnimationCanvas = /* @__PURE__ */ forwardRef(function AnimationCanvas({ dr
|
|
|
68
68
|
});
|
|
69
69
|
});
|
|
70
70
|
//#endregion
|
|
71
|
+
//#region src/hooks/_internal/useCallbackRef.ts
|
|
72
|
+
/**
|
|
73
|
+
* Internal
|
|
74
|
+
* @private
|
|
75
|
+
*/
|
|
76
|
+
function useCallbackRef(callback, deps = []) {
|
|
77
|
+
const callbackRef = useRef(() => {
|
|
78
|
+
throw new Error("Cannot call an event handler while rendering.");
|
|
79
|
+
});
|
|
80
|
+
useInsertionEffect(() => {
|
|
81
|
+
callbackRef.current = callback;
|
|
82
|
+
});
|
|
83
|
+
return useCallback((...args) => callbackRef.current?.(...args), deps);
|
|
84
|
+
}
|
|
85
|
+
//#endregion
|
|
86
|
+
//#region src/hooks/useDropZone.ts
|
|
87
|
+
/**
|
|
88
|
+
* Take files dropped onto an element.
|
|
89
|
+
*
|
|
90
|
+
* Any element can become a drop target this way — a waveform display, a track
|
|
91
|
+
* lane, a canvas — without wrapping it in anything.
|
|
92
|
+
*
|
|
93
|
+
* @returns a ref callback for the element, and whether a drag is over it
|
|
94
|
+
*/
|
|
95
|
+
function useDropZone({ accept, multiple, disabled, onDrop, onReject } = {}) {
|
|
96
|
+
const dropHandler = useCallbackRef(onDrop);
|
|
97
|
+
const rejectHandler = useCallbackRef(onReject);
|
|
98
|
+
const [state, setState] = useState({
|
|
99
|
+
over: false,
|
|
100
|
+
invalid: false
|
|
101
|
+
});
|
|
102
|
+
const [node, setNode] = useState(null);
|
|
103
|
+
const instanceRef = useRef(null);
|
|
104
|
+
const latest = useRef({
|
|
105
|
+
accept,
|
|
106
|
+
multiple,
|
|
107
|
+
disabled
|
|
108
|
+
});
|
|
109
|
+
useEffect(() => {
|
|
110
|
+
if (!node) return;
|
|
111
|
+
const instance = createDropZone(node, {
|
|
112
|
+
...latest.current,
|
|
113
|
+
onDrop: (files, event) => dropHandler(files, event),
|
|
114
|
+
onReject: (files, event) => rejectHandler(files, event),
|
|
115
|
+
onStateChange: (next) => setState(next)
|
|
116
|
+
});
|
|
117
|
+
instanceRef.current = instance;
|
|
118
|
+
return () => {
|
|
119
|
+
instanceRef.current = null;
|
|
120
|
+
instance.destroy();
|
|
121
|
+
setState({
|
|
122
|
+
over: false,
|
|
123
|
+
invalid: false
|
|
124
|
+
});
|
|
125
|
+
};
|
|
126
|
+
}, [
|
|
127
|
+
node,
|
|
128
|
+
dropHandler,
|
|
129
|
+
rejectHandler
|
|
130
|
+
]);
|
|
131
|
+
useEffect(() => {
|
|
132
|
+
latest.current = {
|
|
133
|
+
accept,
|
|
134
|
+
multiple,
|
|
135
|
+
disabled
|
|
136
|
+
};
|
|
137
|
+
instanceRef.current?.update({
|
|
138
|
+
accept,
|
|
139
|
+
multiple,
|
|
140
|
+
disabled
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
return {
|
|
144
|
+
refCallback: setNode,
|
|
145
|
+
over: state.over,
|
|
146
|
+
invalid: state.invalid
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* An area that takes files dropped onto it.
|
|
151
|
+
*/
|
|
152
|
+
const DropZone = { Root: /* @__PURE__ */ forwardRef(({ accept, multiple = false, disabled = false, onDrop, onReject, children, ...props }, ref) => {
|
|
153
|
+
const { refCallback, over, invalid } = useDropZone({
|
|
154
|
+
accept,
|
|
155
|
+
multiple,
|
|
156
|
+
disabled,
|
|
157
|
+
onDrop,
|
|
158
|
+
onReject
|
|
159
|
+
});
|
|
160
|
+
const composedRef = useComposedRefs(ref, refCallback);
|
|
161
|
+
return /* @__PURE__ */ jsx("div", {
|
|
162
|
+
ref: composedRef,
|
|
163
|
+
"data-dragover": over ? "" : void 0,
|
|
164
|
+
"data-invalid": invalid ? "" : void 0,
|
|
165
|
+
"data-disabled": disabled ? "" : void 0,
|
|
166
|
+
...props,
|
|
167
|
+
children
|
|
168
|
+
});
|
|
169
|
+
}) };
|
|
170
|
+
//#endregion
|
|
171
|
+
//#region src/components/_util/visually-hidden.ts
|
|
172
|
+
/**
|
|
173
|
+
* Take an element out of sight while leaving it in the accessibility tree and
|
|
174
|
+
* in the tab order.
|
|
175
|
+
*
|
|
176
|
+
* `display: none` and `visibility: hidden` would remove it from both, and the
|
|
177
|
+
* native control underneath a headless component is what carries the ARIA and
|
|
178
|
+
* the keyboard behaviour. `pointer-events: none` is safe because nothing is
|
|
179
|
+
* ever clicked here directly: a `<label>` forwards its click, and a drag is
|
|
180
|
+
* handled by the part that is visible.
|
|
181
|
+
*/
|
|
182
|
+
const visuallyHiddenStyle = {
|
|
183
|
+
position: "absolute",
|
|
184
|
+
width: 1,
|
|
185
|
+
height: 1,
|
|
186
|
+
padding: 0,
|
|
187
|
+
margin: -1,
|
|
188
|
+
overflow: "hidden",
|
|
189
|
+
clip: "rect(0, 0, 0, 0)",
|
|
190
|
+
clipPath: "inset(50%)",
|
|
191
|
+
whiteSpace: "nowrap",
|
|
192
|
+
border: 0,
|
|
193
|
+
pointerEvents: "none"
|
|
194
|
+
};
|
|
195
|
+
//#endregion
|
|
196
|
+
//#region src/components/FileInput/context.tsx
|
|
197
|
+
const FileInputContext = /* @__PURE__ */ createContext(null);
|
|
198
|
+
const FileInputProvider = FileInputContext.Provider;
|
|
199
|
+
function useFileInputContext(selector) {
|
|
200
|
+
const context = useContext(FileInputContext);
|
|
201
|
+
if (!context) throw new Error("Missing FileInputContext.Provider in the tree");
|
|
202
|
+
return selector ? selector(context) : context;
|
|
203
|
+
}
|
|
204
|
+
/**
|
|
205
|
+
* Picks files, and hands them over as `File`s.
|
|
206
|
+
*/
|
|
207
|
+
const FileInput = {
|
|
208
|
+
Root: /* @__PURE__ */ forwardRef(({ accept, multiple = false, disabled = false, onChange, onReject, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }, ref) => {
|
|
209
|
+
const inputId = useId();
|
|
210
|
+
const context = useMemo(() => ({
|
|
211
|
+
inputId,
|
|
212
|
+
disabled
|
|
213
|
+
}), [inputId, disabled]);
|
|
214
|
+
function handleChange(event) {
|
|
215
|
+
const picked = Array.from(event.target.files ?? []);
|
|
216
|
+
event.target.value = "";
|
|
217
|
+
const accepted = [];
|
|
218
|
+
const rejected = [];
|
|
219
|
+
for (const file of picked) if (matchesAccept(file, accept)) accepted.push(file);
|
|
220
|
+
else rejected.push(file);
|
|
221
|
+
if (rejected.length > 0) onReject?.(rejected);
|
|
222
|
+
if (accepted.length > 0) onChange?.(accepted);
|
|
223
|
+
}
|
|
224
|
+
return /* @__PURE__ */ jsx(FileInputProvider, {
|
|
225
|
+
value: context,
|
|
226
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
227
|
+
ref,
|
|
228
|
+
"data-disabled": disabled ? "" : void 0,
|
|
229
|
+
...props,
|
|
230
|
+
children: [/* @__PURE__ */ jsx("input", {
|
|
231
|
+
id: inputId,
|
|
232
|
+
type: "file",
|
|
233
|
+
accept,
|
|
234
|
+
multiple,
|
|
235
|
+
disabled,
|
|
236
|
+
style: visuallyHiddenStyle,
|
|
237
|
+
"aria-label": ariaLabel,
|
|
238
|
+
"aria-labelledby": ariaLabelledby,
|
|
239
|
+
"aria-describedby": ariaDescribedby,
|
|
240
|
+
onChange: handleChange
|
|
241
|
+
}), children]
|
|
242
|
+
})
|
|
243
|
+
});
|
|
244
|
+
}),
|
|
245
|
+
Trigger: /* @__PURE__ */ forwardRef(({ children, ...props }, ref) => {
|
|
246
|
+
const { inputId, disabled } = useFileInputContext();
|
|
247
|
+
return /* @__PURE__ */ jsx("label", {
|
|
248
|
+
ref,
|
|
249
|
+
htmlFor: inputId,
|
|
250
|
+
"data-disabled": disabled ? "" : void 0,
|
|
251
|
+
...props,
|
|
252
|
+
children
|
|
253
|
+
});
|
|
254
|
+
})
|
|
255
|
+
};
|
|
256
|
+
//#endregion
|
|
71
257
|
//#region src/hooks/_internal/useCheckSteps.ts
|
|
72
258
|
/** Positions probed across the travel. The ends are left out so that the
|
|
73
259
|
* clamp at `min` and `max` cannot be mistaken for a press that does nothing. */
|
|
@@ -185,21 +371,6 @@ function useCheckSteps({ component, axis, range, keyboard, wheel, format }) {
|
|
|
185
371
|
]);
|
|
186
372
|
}
|
|
187
373
|
//#endregion
|
|
188
|
-
//#region src/hooks/_internal/useCallbackRef.ts
|
|
189
|
-
/**
|
|
190
|
-
* Internal
|
|
191
|
-
* @private
|
|
192
|
-
*/
|
|
193
|
-
function useCallbackRef(callback, deps = []) {
|
|
194
|
-
const callbackRef = useRef(() => {
|
|
195
|
-
throw new Error("Cannot call an event handler while rendering.");
|
|
196
|
-
});
|
|
197
|
-
useInsertionEffect(() => {
|
|
198
|
-
callbackRef.current = callback;
|
|
199
|
-
});
|
|
200
|
-
return useCallback((...args) => callbackRef.current?.(...args), deps);
|
|
201
|
-
}
|
|
202
|
-
//#endregion
|
|
203
374
|
//#region src/hooks/useDragValue.ts
|
|
204
375
|
/**
|
|
205
376
|
* Drive a value with a pointer drag.
|
|
@@ -306,7 +477,7 @@ function useWheel(onWheel, { requireFocus = false, target } = {}) {
|
|
|
306
477
|
* `useCheckSteps` warns about.
|
|
307
478
|
*
|
|
308
479
|
* A modifier entry is not snapped to `step`, which is what lets the finer
|
|
309
|
-
* amount move at all — see `applyDelta` in `@tremolo-ui/
|
|
480
|
+
* amount move at all — see `applyDelta` in `@tremolo-ui/dom`.
|
|
310
481
|
*/
|
|
311
482
|
const DEFAULT_KEYBOARD_OPTIONS = {
|
|
312
483
|
default: ["raw", 1],
|
|
@@ -1173,7 +1344,7 @@ const NumberInput = {
|
|
|
1173
1344
|
changeValue
|
|
1174
1345
|
]);
|
|
1175
1346
|
const nudge = useCallback((direction, option, modifiers) => {
|
|
1176
|
-
const [mode] =
|
|
1347
|
+
const [mode] = selectModifier(option, modifiers).value;
|
|
1177
1348
|
changeValue(applyDelta(value, direction, option, mode === "raw" ? rawRange : range, modifiers));
|
|
1178
1349
|
}, [
|
|
1179
1350
|
changeValue,
|
|
@@ -1557,24 +1728,11 @@ function usePointsEditorContext(selector) {
|
|
|
1557
1728
|
}
|
|
1558
1729
|
//#endregion
|
|
1559
1730
|
//#region src/components/_util/VisuallyHiddenRangeInput.tsx
|
|
1560
|
-
const hiddenStyle = {
|
|
1561
|
-
position: "absolute",
|
|
1562
|
-
width: 1,
|
|
1563
|
-
height: 1,
|
|
1564
|
-
padding: 0,
|
|
1565
|
-
margin: -1,
|
|
1566
|
-
overflow: "hidden",
|
|
1567
|
-
clip: "rect(0, 0, 0, 0)",
|
|
1568
|
-
clipPath: "inset(50%)",
|
|
1569
|
-
whiteSpace: "nowrap",
|
|
1570
|
-
border: 0,
|
|
1571
|
-
pointerEvents: "none"
|
|
1572
|
-
};
|
|
1573
1731
|
const VisuallyHiddenRangeInput = /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ jsx("input", {
|
|
1574
1732
|
...props,
|
|
1575
1733
|
ref,
|
|
1576
1734
|
type: "range",
|
|
1577
|
-
style:
|
|
1735
|
+
style: visuallyHiddenStyle
|
|
1578
1736
|
}));
|
|
1579
1737
|
//#endregion
|
|
1580
1738
|
//#region src/components/PointsEditor/Point.tsx
|
|
@@ -2082,7 +2240,7 @@ function MarksOption({ value, mark = true, label, thickness, length, gap, labelW
|
|
|
2082
2240
|
const reverse = useSliderContext((s) => s.reverse);
|
|
2083
2241
|
const calcPercent = useCallback((value) => {
|
|
2084
2242
|
const percent = scale.normalize(value, min, max) * 100;
|
|
2085
|
-
return toFixed(
|
|
2243
|
+
return toFixed(vertical !== reverse ? 100 - percent : percent);
|
|
2086
2244
|
}, [
|
|
2087
2245
|
vertical,
|
|
2088
2246
|
reverse,
|
|
@@ -2118,6 +2276,27 @@ function MarksOption({ value, mark = true, label, thickness, length, gap, labelW
|
|
|
2118
2276
|
});
|
|
2119
2277
|
}
|
|
2120
2278
|
//#endregion
|
|
2279
|
+
//#region src/components/_util/decimal-digits.ts
|
|
2280
|
+
/**
|
|
2281
|
+
* How many digits a number carries after the decimal point.
|
|
2282
|
+
*
|
|
2283
|
+
* `Slider.Marks` builds its labels by multiplying an interval, which leaves
|
|
2284
|
+
* binary debris in the last digits (`0.1 * 3` is `0.30000000000000004`). The
|
|
2285
|
+
* count is what tells `toFixed` how far to round that back.
|
|
2286
|
+
*
|
|
2287
|
+
* The exponent form has to be handled separately: `String(1e-7)` is `'1e-7'`,
|
|
2288
|
+
* which has no decimal point at all, so reading the text after the point
|
|
2289
|
+
* reports no digits and the interval rounds away to whole numbers.
|
|
2290
|
+
*/
|
|
2291
|
+
function decimalDigits(x) {
|
|
2292
|
+
if (!Number.isFinite(x)) return 0;
|
|
2293
|
+
const text = String(x);
|
|
2294
|
+
const e = text.indexOf("e");
|
|
2295
|
+
if (e === -1) return text.split(".")[1]?.length ?? 0;
|
|
2296
|
+
const fraction = text.slice(0, e).split(".")[1]?.length ?? 0;
|
|
2297
|
+
return Math.max(0, fraction - Number(text.slice(e + 1)));
|
|
2298
|
+
}
|
|
2299
|
+
//#endregion
|
|
2121
2300
|
//#region src/components/Slider/type.ts
|
|
2122
2301
|
function generateOptionsList(options, min, max, step) {
|
|
2123
2302
|
const { per, mark = true, label = true } = typeof options === "object" ? options : { per: options };
|
|
@@ -2125,7 +2304,7 @@ function generateOptionsList(options, min, max, step) {
|
|
|
2125
2304
|
const interval = per === "step" ? step : per;
|
|
2126
2305
|
const count = Math.floor(max / interval) - Math.ceil(min / interval) + 1;
|
|
2127
2306
|
for (let i = 0; i < count; i++) {
|
|
2128
|
-
const value = toFixed(interval * (Math.ceil(min / interval) + i),
|
|
2307
|
+
const value = toFixed(interval * (Math.ceil(min / interval) + i), decimalDigits(interval));
|
|
2129
2308
|
optionsList.push({
|
|
2130
2309
|
value,
|
|
2131
2310
|
mark,
|
|
@@ -2143,7 +2322,7 @@ function Marks({ gap, options, children, className, style, ...props }) {
|
|
|
2143
2322
|
const vertical = useSliderContext((s) => s.vertical);
|
|
2144
2323
|
const reverse = useSliderContext((s) => s.reverse);
|
|
2145
2324
|
const optionsList = options ? generateOptionsList(options, min, max, step) : [];
|
|
2146
|
-
if (
|
|
2325
|
+
if (vertical !== reverse) optionsList.reverse();
|
|
2147
2326
|
return /* @__PURE__ */ jsx("div", {
|
|
2148
2327
|
className,
|
|
2149
2328
|
"data-orientation": vertical ? "vertical" : "horizontal",
|
|
@@ -2228,7 +2407,7 @@ const Track = /* @__PURE__ */ forwardRef(function Track({ length, thickness, act
|
|
|
2228
2407
|
className,
|
|
2229
2408
|
"data-disabled": disabled ? "" : void 0,
|
|
2230
2409
|
"data-orientation": vertical ? "vertical" : "horizontal",
|
|
2231
|
-
"data-flipped":
|
|
2410
|
+
"data-flipped": vertical !== reverse ? "" : void 0,
|
|
2232
2411
|
style: {
|
|
2233
2412
|
"--active": active,
|
|
2234
2413
|
"--inactive": inactive,
|
|
@@ -2267,7 +2446,7 @@ const Slider = {
|
|
|
2267
2446
|
const inactive = disabled || readonly;
|
|
2268
2447
|
const p = toFixed(scale.normalize(value, min, max) * 100);
|
|
2269
2448
|
const rev = toFixed(100 - p);
|
|
2270
|
-
const displayReversed =
|
|
2449
|
+
const displayReversed = vertical !== reverse;
|
|
2271
2450
|
const percent = displayReversed ? rev : p;
|
|
2272
2451
|
const axis = useMemo(() => ({
|
|
2273
2452
|
min,
|
|
@@ -2852,6 +3031,6 @@ function useMIDIMessage(midiAccess, onMIDIMessage) {
|
|
|
2852
3031
|
});
|
|
2853
3032
|
}
|
|
2854
3033
|
//#endregion
|
|
2855
|
-
export { AnimationCanvas, DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, PITCH_BEND_CENTER, Piano, PointsEditor, SHORTCUTS, Slider, UNAVAILABLE, XYPad, clampPoint, useAnimationFrame, useDrag, useDragValue, useEventListener, useInterval, useKnobContext, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel, useXYPadContext };
|
|
3034
|
+
export { AnimationCanvas, DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, DropZone, FileInput, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, PITCH_BEND_CENTER, Piano, PointsEditor, SHORTCUTS, Slider, UNAVAILABLE, XYPad, clampPoint, useAnimationFrame, useDrag, useDragValue, useDropZone, useEventListener, useFileInputContext, useInterval, useKnobContext, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel, useXYPadContext };
|
|
2856
3035
|
|
|
2857
3036
|
//# sourceMappingURL=index.js.map
|