@tremolo-ui/react 0.0.6 → 0.0.8

package/dist/esm/index.js

@@ -1,6 +1,5 @@
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { css, Global } from '@emotion/react';
-import React, { useRef, useEffect, useInsertionEffect, useCallback, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useRef, useCallback, useEffect, useInsertionEffect, useMemo, useState, forwardRef, useImperativeHandle, createRef, createContext, useContext } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -67,20 +66,17 @@ function setDprConfig(canvas, context, width, height, dpr) {
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
 }
-/**
- * A simple animatable canvas with requestAnimationFrame()
- */
 function AnimationCanvas(_a) {
-    var { width = 100, height = 100, style, relativeSize = false, reduceFlickering = true, options, init, draw, className } = _a, props = __rest(_a, ["width", "height", "style", "relativeSize", "reduceFlickering", "options", "init", "draw", "className"]);
+    var { width = 100, height = 100, relativeSize = false, reduceFlickering = true, options, init, draw, className } = _a, props = __rest(_a, ["width", "height", "relativeSize", "reduceFlickering", "options", "init", "draw", "className"]);
     const canvasRef = useRef(null);
     const memoCanvasRef = useRef(null);
     const reqIdRef = useRef();
     const widthRef = useRef(0);
     const heightRef = useRef(0);
-    const loop = (context, width, height, count) => {
+    const loop = useCallback((context, width, height, count) => {
         reqIdRef.current = requestAnimationFrame(() => loop(context, width, height, count + 1));
         draw(context, width, height, count + 1);
-    };
+    }, [draw]);
     useEffect(() => {
         if (!canvasRef.current)
             return;
@@ -94,30 +90,34 @@ function AnimationCanvas(_a) {
             if (!parent)
                 throw new Error("Canvas doesn't have a parent element.");
             const memoCanvas = memoCanvasRef.current;
-            const memoContext = memoCanvas === null || memoCanvas === undefined ? undefined : memoCanvas.getContext('2d', options);
-            const resizeObserver = new ResizeObserver(() => {
-                // console.log('resize')
-                // Prevents loss of some context when the canvas is resized
-                const contextMemo = {};
-                for (const prop of drawingState) {
-                    contextMemo[prop] = context[prop];
-                }
-                const w = Math.floor(parent.clientWidth);
-                const h = Math.floor(parent.clientHeight);
-                if (reduceFlickering && memoCanvas && memoContext) {
-                    memoCanvas.width = w * dpr;
-                    memoCanvas.height = h * dpr;
-                    memoContext.scale(1 / dpr, 1 / dpr);
-                    memoContext.drawImage(context.canvas, 0, 0);
-                }
-                setDprConfig(canvas, context, w, h, dpr);
-                widthRef.current = w;
-                heightRef.current = h;
-                for (const prop of drawingState) {
-                    context[prop] = contextMemo[prop];
-                }
-                if (reduceFlickering && memoContext) {
-                    context.drawImage(memoContext.canvas, 0, 0);
+            const memoContext = memoCanvas === null || memoCanvas === void 0 ? void 0 : memoCanvas.getContext('2d', options);
+            const resizeObserver = new ResizeObserver((entries) => {
+                // TODO: If the parent element has no absolute height, the height increases infinitely.
+                //     : 親要素に絶対的な高さを持たない場合、高さは無限に増加します。
+                // https://zenn.dev/megeton/articles/be1c677e174c84#%E6%A0%B9%E6%9C%AC%E7%9A%84%E3%81%AB-resizeobserver-loop-limit-exceeded-%E3%81%8C%E5%87%BA%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%AB%E5%90%91%E3%81%8D%E5%90%88%E3%81%86
+                for (const entry of entries) {
+                    // Prevents loss of some context when the canvas is resized
+                    const contextMemo = {};
+                    for (const prop of drawingState) {
+                        contextMemo[prop] = context[prop];
+                    }
+                    const w = Math.floor(entry.contentRect.width);
+                    const h = Math.floor(entry.contentRect.height);
+                    if (reduceFlickering && memoCanvas && memoContext) {
+                        memoCanvas.width = w * dpr;
+                        memoCanvas.height = h * dpr;
+                        memoContext.scale(1 / dpr, 1 / dpr);
+                        memoContext.drawImage(context.canvas, 0, 0);
+                    }
+                    setDprConfig(canvas, context, w, h, dpr);
+                    widthRef.current = w;
+                    heightRef.current = h;
+                    for (const prop of drawingState) {
+                        context[prop] = contextMemo[prop];
+                    }
+                    if (reduceFlickering && memoContext) {
+                        context.drawImage(memoContext.canvas, 0, 0);
+                    }
                 }
             });
             resizeObserver.observe(parent);
@@ -146,8 +146,8 @@ function AnimationCanvas(_a) {
                     cancelAnimationFrame(reqIdRef.current);
             };
         }
-    }, [loop]);
-    return (jsxs(Fragment, { children: [jsx("canvas", Object.assign({ className: clsx('tremolo-animation-canvas', className), width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, css: css(style), ref: canvasRef }, props)), relativeSize && reduceFlickering && (jsx("canvas", { style: { display: 'none' }, width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, ref: memoCanvasRef }))] }));
+    }, [loop, init, options, reduceFlickering, relativeSize]);
+    return (jsxs(Fragment, { children: [jsx("canvas", Object.assign({ className: clsx('tremolo-animation-canvas', className), width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, ref: canvasRef }, props)), relativeSize && reduceFlickering && (jsx("canvas", { style: { display: 'none' }, ref: memoCanvasRef }))] }));
 }
 
 /**
@@ -188,7 +188,7 @@ function stepValue(value, step) {
     if (step <= 0)
         throw new RangeError('requirements: step > 0');
     const quotient = Math.floor(value / step);
-    const decimalDigits = (_a = decimalPart$1(step)) === null || _a === undefined ? undefined : _a.length;
+    const decimalDigits = (_a = decimalPart$1(step)) === null || _a === void 0 ? void 0 : _a.length;
     const v = toFixed$2(quotient * step, decimalDigits);
     const next = toFixed$2((quotient + 1) * step, decimalDigits);
     return Math.abs(value - v) < Math.abs(value - next) ? v : next;
@@ -240,6 +240,81 @@ function styleHelper(value, op, influencer) {
         }
     }
 }
+/**
+ * @category Utility
+ */
+function mod(n, m) {
+    return ((n % m) + m) % m;
+}
+/**
+ * @category Utility
+ */
+function xor(a = false, b = false) {
+    return (a || b) && a != b;
+}
+/**
+ * @category MIDI
+ */
+const noteNames = [
+    'C',
+    'C#',
+    'D',
+    'D#',
+    'E',
+    'F',
+    'F#',
+    'G',
+    'G#',
+    'A',
+    'A#',
+    'B',
+];
+/**
+ * @category MIDI
+ */
+function parseNoteName(noteName) {
+    const m = noteName.match(/^([a-g])(#{0,2}|b{0,2})(-?\d+)$/i);
+    if (!m)
+        throw new Error('Invalid note name');
+    const [, letter, accidental, octave] = m;
+    return {
+        letter: letter.toLocaleUpperCase(),
+        accidental: accidental,
+        octave: Number(octave),
+    };
+}
+/**
+ *
+ * @category MIDI
+ */
+function noteNumber(noteName) {
+    const { letter, accidental, octave } = parseNoteName(noteName);
+    const noteIndex = noteNames.indexOf(letter.toLocaleUpperCase());
+    const accidentalValue = (accidental[0] == 'b' ? -1 : 1) * accidental.length;
+    return noteIndex + 12 * (Number(octave) + 1) + accidentalValue;
+}
+/**
+ *
+ * @category MIDI
+ */
+function noteName(noteNumber) {
+    const noteIndex = mod(noteNumber, 12);
+    const octave = Math.floor(noteNumber / 12) - 1;
+    return noteNames[noteIndex] + octave;
+}
+/**
+ * @category MIDI
+ */
+function isWhiteKey(note) {
+    const n = typeof note == 'string' ? noteNumber(note) : note;
+    return (mod(n, 12) == 0 ||
+        mod(n, 12) == 2 ||
+        mod(n, 12) == 4 ||
+        mod(n, 12) == 5 ||
+        mod(n, 12) == 7 ||
+        mod(n, 12) == 9 ||
+        mod(n, 12) == 11);
+}
 
 /**
  * This hook is user-land implementation of the experimental `useEffectEvent` hook.
@@ -252,13 +327,14 @@ function useCallbackRef(callback, deps = []) {
     useInsertionEffect(() => {
         callbackRef.current = callback;
     });
-    return useCallback((...args) => { var _a; return (_a = callbackRef.current) === null || _a === undefined ? undefined : _a.call(callbackRef, ...args); }, deps);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useCallback((...args) => { var _a; return (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, ...args); }, deps);
 }
 
 function useEventListener(target, event, handler, options) {
     const listener = useCallbackRef(handler);
     useEffect(() => {
-        const node = typeof target === 'function' ? target() : (target !== null && target !== undefined ? target : document);
+        const node = typeof target === 'function' ? target() : (target !== null && target !== void 0 ? target : document);
         if (!handler || !node)
             return;
         node.addEventListener(event, listener, options);
@@ -267,8 +343,8 @@ function useEventListener(target, event, handler, options) {
         };
     }, [event, target, options, listener, handler]);
     return () => {
-        const node = typeof target === 'function' ? target() : (target !== null && target !== undefined ? target : document);
-        node === null || node === undefined ? undefined : node.removeEventListener(event, listener, options);
+        const node = typeof target === 'function' ? target() : (target !== null && target !== void 0 ? target : document);
+        node === null || node === void 0 ? void 0 : node.removeEventListener(event, listener, options);
     };
 }
 
@@ -277,7 +353,7 @@ function useRefCallbackEvent(event, handler, options, deps = []) {
         let cleanup;
         return (node) => {
             if (!node) {
-                cleanup === null || cleanup === undefined ? undefined : cleanup();
+                cleanup === null || cleanup === void 0 ? void 0 : cleanup();
                 return;
             }
             node.addEventListener(event, handler, options);
@@ -285,6 +361,7 @@ function useRefCallbackEvent(event, handler, options, deps = []) {
                 node.removeEventListener(event, handler, options);
             };
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
 }
 
@@ -295,34 +372,17 @@ function removeNoSelect() {
     document.body.classList.remove('tremolo-no-select');
 }
 
-const defaultOptions = {
-    active: '#7998ec',
-    inactive: '#eee',
-    bg: '#ccc',
-    thumb: '#4e76e6',
-    lineWeight: 6,
-    thumbWeight: 4,
-};
 /**
  * simple rotary Knob.
  */
-function Knob(_a) {
-    var { value, min, max, defaultValue = min, startValue = min, step = 1, skew = 1, size, width = 50, height = 50, options = defaultOptions, draw, bodyNoSelect = true, wheel, enableDoubleClickDefault = true, style, className, onChange, _active, _focus, _hover } = _a, props = __rest(_a, ["value", "min", "max", "defaultValue", "startValue", "step", "skew", "size", "width", "height", "options", "draw", "bodyNoSelect", "wheel", "enableDoubleClickDefault", "style", "className", "onChange", "_active", "_focus", "_hover"]);
+function AnimationKnob(_a) {
+    var { value, min, max, defaultValue = min, startValue = min, step = 1, skew = 1, size, width = 50, height = 50, activeColor = '#7998ec', inactiveColor = '#eee', bg = '#ccc', thumb = '#4e76e6', lineWeight = 6, thumbWeight = 4, draw, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], enableDoubleClickDefault = true, style, className, onChange } = _a, props = __rest(_a, ["value", "min", "max", "defaultValue", "startValue", "step", "skew", "size", "width", "height", "activeColor", "inactiveColor", "bg", "thumb", "lineWeight", "thumbWeight", "draw", "bodyNoSelect", "wheel", "keyboard", "enableDoubleClickDefault", "style", "className", "onChange"]);
     // -- state and ref ---
     // const [privateValue, setPrivateValue] = useState(value);
     const dragOffsetY = useRef(undefined);
     // --- interpret props ---
-    const opts = Object.assign(Object.assign({}, defaultOptions), options);
     // const percent = normalizeValue(value, min, max, skew)
-    const isRelativeSize = typeof (size !== null && size !== undefined ? size : width) == 'string';
-    const adaptSize = (size) => {
-        if (typeof size == 'string') {
-            return Number(size.slice(0, -1));
-        }
-        else {
-            return size;
-        }
-    };
+    const isRelativeSize = typeof (size !== null && size !== void 0 ? size : width) == 'string' || typeof height == 'string';
     const handleEvent = (event) => {
         const isTouch = event instanceof TouchEvent;
         if (isTouch && event.cancelable)
@@ -332,6 +392,8 @@ function Knob(_a) {
                 addNoSelect();
             const screenY = isTouch ? event.touches[0].screenY : event.screenY;
             const delta = dragOffsetY.current - screenY;
+            if (Math.abs(delta) < 1)
+                return;
             dragOffsetY.current = screenY;
             const n = normalizeValue(value, min, max, skew);
             const v = rawValue(n + delta / 100, min, max, skew);
@@ -340,6 +402,24 @@ function Knob(_a) {
                 onChange(v2);
         }
     };
+    const handleKeyDown = useCallback((event) => {
+        if (!keyboard || !onChange)
+            return;
+        const key = event.key;
+        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
+            event.preventDefault();
+            const x = key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
+            let v;
+            if (keyboard[0] == 'normalized') {
+                const n = normalizeValue(value, min, max, skew);
+                v = rawValue(n + x, min, max, skew);
+            }
+            else {
+                v = value + x;
+            }
+            onChange(clamp(stepValue(v, step), min, max));
+        }
+    }, [value, min, max, step, skew, keyboard, onChange]);
     // --- hooks ---
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
         if (!wheel)
@@ -364,24 +444,24 @@ function Knob(_a) {
         if (bodyNoSelect)
             removeNoSelect();
     });
-    return (jsxs("div", Object.assign({ className: clsx('tremolo-knob', className), ref: (div) => {
+    return (jsx("div", Object.assign({ className: clsx('tremolo-animation-knob', className), ref: (div) => {
             wheelRefCallback(div);
             touchMoveRefCallback(div);
-        }, role: "slider", tabIndex: 0, "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, css: css(Object.assign(Object.assign({ display: 'inline-block', width: size !== null && size !== undefined ? size : width, height: size !== null && size !== undefined ? size : height, cursor: 'pointer' }, style), { ':active': Object.assign({}, _active), ':focus': Object.assign({}, _focus), ':hover': Object.assign({}, _hover) })), onPointerDown: (event) => {
+        }, role: "slider", tabIndex: 0, "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, style: Object.assign({ display: 'inline-block', width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height, cursor: 'pointer', WebkitTapHighlightColor: 'transparent' }, style), onPointerDown: (event) => {
             dragOffsetY.current = event.screenY;
             handleEvent(event);
         }, onDoubleClick: () => {
             if (enableDoubleClickDefault && onChange) {
                 onChange(defaultValue);
             }
-        } }, props, { children: [jsx(Global, { styles: {
-                    '.no-select': {
-                        userSelect: 'none',
-                    },
-                } }), jsx(AnimationCanvas, { width: adaptSize(size !== null && size !== undefined ? size : width), height: adaptSize(size !== null && size !== undefined ? size : height), relativeSize: isRelativeSize, 
-                // TODO
-                // reduceFlickering={false}
-                draw: draw ? draw : (ctx, width, height) => {
+        }, onKeyDown: handleKeyDown, onContextMenu: (e) => e.preventDefault() }, props, { children: jsx(AnimationCanvas, Object.assign({}, (isRelativeSize
+            ? { relativeSize: true }
+            : {
+                width: size !== null && size !== void 0 ? size : width,
+                height: size !== null && size !== void 0 ? size : height,
+            }), { draw: draw
+                ? draw
+                : (ctx, width, height) => {
                     const p = normalizeValue(value, min, max, skew);
                     const startP = normalizeValue(startValue, min, max, skew);
                     const w = width.current, cx = w / 2;
@@ -394,33 +474,172 @@ function Knob(_a) {
                     ctx.lineCap = 'butt';
                     // bg
                     ctx.beginPath();
-                    ctx.fillStyle = opts.bg;
+                    ctx.fillStyle = bg;
                     ctx.arc(cx, cy, r - 0.5, 0, 2 * Math.PI);
                     ctx.fill();
-                    ctx.lineCap = 'round';
-                    ctx.lineWidth = opts.lineWeight;
+                    ctx.lineWidth = lineWeight;
                     // inactive rotary
                     ctx.beginPath();
-                    ctx.strokeStyle = opts.inactive;
-                    ctx.arc(cx, cy, r - 0.5 - opts.lineWeight / 2, radian(135), radian(45));
+                    ctx.strokeStyle = inactiveColor;
+                    ctx.arc(cx, cy, r - 0.5 - lineWeight / 2, radian(135), radian(45));
                     ctx.stroke();
                     // active rotary
                     ctx.beginPath();
-                    ctx.strokeStyle = opts.active;
-                    ctx.arc(cx, cy, r - 0.5 - opts.lineWeight / 2, radian(135 + 270 * startP), radian(135 + 270 * p), p < startP);
+                    ctx.strokeStyle = activeColor;
+                    ctx.arc(cx, cy, r - 0.5 - lineWeight / 2, radian(135 + 270 * startP), radian(135 + 270 * p), p < startP);
                     ctx.stroke();
                     // thumb
+                    ctx.lineCap = 'round';
                     ctx.beginPath();
                     ctx.moveTo(cx, cy);
                     ctx.lineTo(cx +
                         Math.cos(radian(135 + 270 * p)) *
-                            (r - 0.5 - opts.thumbWeight / 2), cy +
+                            (r - 0.5 - thumbWeight / 2), cy +
                         Math.sin(radian(135 + 270 * p)) *
-                            (r - 0.5 - opts.thumbWeight / 2));
-                    ctx.strokeStyle = opts.thumb;
-                    ctx.lineWidth = opts.thumbWeight;
+                            (r - 0.5 - thumbWeight / 2));
+                    ctx.strokeStyle = thumb;
+                    ctx.lineWidth = thumbWeight;
                     ctx.stroke();
-                } })] })));
+                } })) })));
+}
+
+function DragObserver(props) {
+    const { children, onDrag, onDragStart, onDragEnd, as: Component = 'div' } = props, attributes = __rest(props, ["children", "onDrag", "onDragStart", "onDragEnd", "as"]);
+    const dragOffsetX = useRef(undefined);
+    const dragOffsetY = useRef(undefined);
+    const handleEvent = (event) => {
+        const isTouch = event instanceof TouchEvent;
+        if (isTouch && event.cancelable)
+            event.preventDefault();
+        const screenX = isTouch ? event.touches[0].screenX : event.screenX;
+        const screenY = isTouch ? event.touches[0].screenY : event.screenY;
+        let deltaX = 0, deltaY = 0;
+        if (dragOffsetX.current) {
+            deltaX = screenX - dragOffsetX.current;
+            dragOffsetX.current = screenX;
+        }
+        if (dragOffsetY.current) {
+            deltaY = screenY - dragOffsetY.current;
+            dragOffsetY.current = screenY;
+        }
+        if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1)
+            return;
+        if (onDrag)
+            onDrag(deltaX, deltaY);
+    };
+    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleEvent, { passive: false }, [onDrag]);
+    useEventListener(window, 'mousemove', handleEvent);
+    useEventListener(window, 'pointerup', () => {
+        dragOffsetX.current = undefined;
+        dragOffsetY.current = undefined;
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+    });
+    return (jsx(Component, Object.assign({ ref: touchMoveRefCallback, onPointerDown: (event) => {
+            dragOffsetX.current = event.screenX;
+            dragOffsetY.current = event.screenY;
+            handleEvent(event);
+            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+        } }, attributes, { children: children })));
+}
+
+function Knob(_a) {
+    var { value, min, max, step = 1, skew = 1, defaultValue = min, startValue = min, size = 50, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], enableDoubleClickDefault = true, disabled = false, readonly = false, activeLine, inactiveLine, thumb, thumbLine, onChange, className, classes } = _a, props = __rest(_a, ["value", "min", "max", "step", "skew", "defaultValue", "startValue", "size", "bodyNoSelect", "wheel", "keyboard", "enableDoubleClickDefault", "disabled", "readonly", "activeLine", "inactiveLine", "thumb", "thumbLine", "onChange", "className", "classes"]);
+    // -- state and ref ---
+    const dragOffsetY = useRef(undefined);
+    // --- interpret props ---
+    const padding = 8; // %
+    const thumbLineWeight = 6; // %
+    const thumbLength = 35; // %
+    const lineWeight = 3; // px
+    const p = normalizeValue(value, min, max, skew);
+    const s = normalizeValue(startValue, min, max, skew);
+    // --- internal functions ---
+    const handleEvent = (event) => {
+        if (!onChange || readonly)
+            return;
+        const isTouch = event instanceof TouchEvent;
+        if (isTouch && event.cancelable)
+            event.preventDefault();
+        if (dragOffsetY.current) {
+            if (bodyNoSelect)
+                addNoSelect();
+            const screenY = isTouch ? event.touches[0].screenY : event.screenY;
+            const delta = dragOffsetY.current - screenY;
+            if (Math.abs(delta) < 1)
+                return;
+            dragOffsetY.current = screenY;
+            const n = normalizeValue(value, min, max, skew);
+            const v = rawValue(n + delta / 100, min, max, skew);
+            const v2 = clamp(stepValue(v, step), min, max);
+            onChange(v2);
+        }
+    };
+    const handleKeyDown = useCallback((event) => {
+        if (!keyboard || !onChange || readonly)
+            return;
+        const key = event.key;
+        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
+            event.preventDefault();
+            const x = key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
+            let v;
+            if (keyboard[0] == 'normalized') {
+                const n = normalizeValue(value, min, max, skew);
+                v = rawValue(n + x, min, max, skew);
+            }
+            else {
+                v = value + x;
+            }
+            onChange(clamp(stepValue(v, step), min, max));
+        }
+    }, [value, min, max, step, skew, keyboard, readonly, onChange]);
+    // --- hooks ---
+    const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
+        if (!wheel)
+            return;
+        event.preventDefault();
+        const x = event.deltaY > 0 ? -wheel[1] : wheel[1];
+        let v;
+        if (wheel[0] == 'normalized') {
+            const n = normalizeValue(value, min, max, skew);
+            v = rawValue(n + x, min, max, skew);
+        }
+        else {
+            v = value + x;
+        }
+        if (onChange)
+            onChange(clamp(stepValue(v, step), min, max));
+    }, { passive: false }, [wheel, value, min, max, skew, step, onChange]);
+    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleEvent, { passive: false }, [value, min, max, skew, step, onChange, bodyNoSelect]);
+    useEventListener(window, 'mousemove', handleEvent);
+    useEventListener(window, 'pointerup', () => {
+        dragOffsetY.current = undefined;
+        if (bodyNoSelect)
+            removeNoSelect();
+    });
+    const center = size / 2;
+    const r1 = -135;
+    const r2 = -135 + Math.min(p, s) * 270;
+    const r3 = -135 + Math.max(p, s) * 270;
+    const r4 = 135;
+    const x1 = center + center * Math.cos(radian(r1 - 90));
+    const y1 = center + center * Math.sin(radian(r1 - 90));
+    const x2 = center + center * Math.cos(radian(r2 - 90));
+    const y2 = center + center * Math.sin(radian(r2 - 90));
+    const x3 = center + center * Math.cos(radian(r3 - 90));
+    const y3 = center + center * Math.sin(radian(r3 - 90));
+    const x4 = center + center * Math.cos(radian(r4 - 90));
+    const y4 = center + center * Math.sin(radian(r4 - 90));
+    return (jsxs("svg", Object.assign({ className: clsx('tremolo-knob', className), ref: (div) => {
+            wheelRefCallback(div);
+            touchMoveRefCallback(div);
+        }, width: size, height: size, tabIndex: 0, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled, "aria-readonly": readonly, onPointerDown: (event) => {
+            dragOffsetY.current = event.screenY;
+            handleEvent(event);
+        }, onDoubleClick: () => {
+            if (enableDoubleClickDefault && onChange) {
+                onChange(defaultValue);
+            }
+        }, onKeyDown: handleKeyDown, onContextMenu: (e) => e.preventDefault() }, props, { children: [startValue > min && (jsx("path", { className: clsx('tremolo-knob-inactive-line', classes === null || classes === void 0 ? void 0 : classes.inactiveLine), d: `M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2}, ${y2}`, fill: "none", stroke: inactiveLine || 'currentColor', strokeWidth: lineWeight })), jsx("path", { className: clsx('tremolo-knob-active-line', classes === null || classes === void 0 ? void 0 : classes.activeLine), d: `M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`, fill: "none", stroke: activeLine || 'currentColor', strokeWidth: lineWeight }), startValue < max && (jsx("path", { className: clsx('tremolo-knob-inactive-line', classes === null || classes === void 0 ? void 0 : classes.inactiveLine), d: `M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`, fill: "none", stroke: inactiveLine || 'currentColor', strokeWidth: lineWeight })), jsxs("svg", { className: clsx('tremolo-knob-thumb', classes === null || classes === void 0 ? void 0 : classes.thumb), children: [jsx("circle", { cx: "50%", cy: "50%", r: `${50 - padding}%`, fill: thumb || 'currentColor' }), jsx("line", { className: clsx('tremolo-knob-thumb-line', classes === null || classes === void 0 ? void 0 : classes.thumbLine), x1: "50%", y1: `${padding}%`, x2: "50%", y2: `${thumbLength}%`, stroke: thumbLine || 'currentColor', strokeWidth: `${thumbLineWeight}%`, transform: `rotate(${ -135 + p * 270})`, "transform-origin": "50% 50%" })] })] })));
 }
 
 /**
@@ -437,7 +656,7 @@ function toFixed$1(x, fractionDigits) {
 
 /**
  * @module NumberInput
-*/
+ */
 function selectUnit(units, value) {
     if (typeof units == 'string')
         return [units, 1];
@@ -500,14 +719,13 @@ function parseValue(inputString, units, digit, defaultValue = 0) {
  * Input with some useful functions for entering numerical values.
  */
 function NumberInput(_a) {
-    var { value, min, max, step, defaultValue = min, units, disabled = false, placeholder, readOnly, tabIndex, typeNumber = false, digit, selectWithFocus = 'none', blurWithEnter = true, className, style, onChange, onFocus, onBlur } = _a, props = __rest(_a, ["value", "min", "max", "step", "defaultValue", "units", "disabled", "placeholder", "readOnly", "tabIndex", "typeNumber", "digit", "selectWithFocus", "blurWithEnter", "className", "style", "onChange", "onFocus", "onBlur"]);
+    var { value, min, max, step, defaultValue = min, units, disabled = false, placeholder, readOnly, tabIndex, typeNumber = false, digit, selectWithFocus = 'none', blurWithEnter = true, className, onChange, onFocus, onBlur } = _a, props = __rest(_a, ["value", "min", "max", "step", "defaultValue", "units", "disabled", "placeholder", "readOnly", "tabIndex", "typeNumber", "digit", "selectWithFocus", "blurWithEnter", "className", "onChange", "onFocus", "onBlur"]);
     const [showValue, setShowValue] = useState(parseValue(String(value), units, digit, defaultValue).formatValue);
     const calculatedTypeNumber = units ? false : typeNumber;
-    const { _active, _focus, _hover } = props, rest = __rest(props, ["_active", "_focus", "_hover"]);
-    return (jsx("input", Object.assign({ className: clsx('tremolo-number-input', className), value: showValue, min: min, max: max, step: step, type: calculatedTypeNumber ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, css: css(Object.assign(Object.assign({ display: 'inline-block', font: 'inherit', margin: 0, paddingTop: 6, paddingBottom: 6, paddingLeft: 10, paddingRight: 10, borderStyle: 'solid', borderWidth: 1, borderColor: '#bbb', borderRadius: 4, outline: 0, transition: 'all 0.1s linear', appearance: 'textfield', '&:hover': Object.assign({ borderColor: 'var(--tremolo-theme-color)' }, _hover), '&:focus': Object.assign({ borderColor: 'var(--tremolo-theme-color)', boxShadow: '0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1)' }, _focus) }, (_active && { '&:active': Object.assign({}, _active) })), style)), onChange: (event) => {
+    return (jsx("input", Object.assign({ className: clsx('tremolo-number-input', className), value: showValue, min: min, max: max, step: step, type: calculatedTypeNumber ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onChange: (event) => {
             const v = event.currentTarget.value;
             setShowValue(v);
-            const newValue = clamp(parseValue(v, units, digit, defaultValue).rawValue, min !== null && min !== undefined ? min : -Infinity, max !== null && max !== undefined ? max : Infinity);
+            const newValue = clamp(parseValue(v, units, digit, defaultValue).rawValue, min !== null && min !== void 0 ? min : -Infinity, max !== null && max !== void 0 ? max : Infinity);
             if (onChange)
                 onChange(newValue, event);
         }, onFocus: (event) => {
@@ -532,9 +750,314 @@ function NumberInput(_a) {
             if (blurWithEnter && event.key == 'Enter') {
                 event.currentTarget.blur();
             }
-        } }, rest)));
+        } }, props)));
+}
+
+function KeyLabel(_a) {
+    var { label, className, wrapperClassName, wrapperStyle, __note, __index, __label } = _a, props = __rest(_a, ["label", "className", "wrapperClassName", "wrapperStyle", "__note", "__index", "__label"]);
+    const content = label
+        ? label(__note, __index)
+        : __label && __label(__note, __index);
+    return ((content != undefined || content != null) && (jsx("div", { className: clsx('tremolo-piano-key-label-wrapper', wrapperClassName), style: wrapperStyle, children: jsx("div", Object.assign({ className: clsx('tremolo-piano-key-label', className) }, props, { children: content })) })));
+}
+
+const BlackKey = forwardRef((_a, ref) => {
+    var { width = 40 * 0.65, height = '60%', className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __playNote, __stopNote, __label } = _a, props = __rest(_a, ["width", "height", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__playNote", "__stopNote", "__label"]);
+    const [played, setPlayed] = useState(false);
+    useImperativeHandle(ref, () => {
+        return {
+            play() {
+                if (__disabled)
+                    return;
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            },
+            stop() {
+                setPlayed(false);
+                if (__stopNote)
+                    __stopNote(__note);
+            },
+            played() {
+                return played;
+            },
+        };
+    }, [__disabled, __note, __playNote, __stopNote, played]);
+    let keyLabelProps = {};
+    if (children != undefined) {
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type == KeyLabel) {
+                    keyLabelProps = child.props;
+                }
+                else {
+                    throw new Error('only <KeyLabel>');
+                }
+            }
+            else {
+                throw new Error('children is an invalid element.');
+            }
+        });
+    }
+    return (jsx("div", Object.assign({ className: clsx(`tremolo-piano-black-key`, className), "aria-disabled": __disabled, "data-active": played, style: Object.assign({ left: __position, width: __fill ? __width : (width !== null && width !== void 0 ? width : __width), height: height }, style), onPointerDown: () => {
+            if (__disabled)
+                return;
+            setPlayed(true);
+            if (__playNote)
+                __playNote(__note);
+        }, onPointerEnter: () => {
+            if (__disabled)
+                return;
+            if (__glissando) {
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            }
+        }, onPointerUp: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, onPointerLeave: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        } }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
+});
+
+const WhiteKey = forwardRef((_a, ref) => {
+    var { width = 40, height = '100%', className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __playNote, __stopNote, __label } = _a, props = __rest(_a, ["width", "height", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__playNote", "__stopNote", "__label"]);
+    const [played, setPlayed] = useState(false);
+    useImperativeHandle(ref, () => {
+        return {
+            play() {
+                if (__disabled)
+                    return;
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            },
+            stop() {
+                setPlayed(false);
+                if (__stopNote)
+                    __stopNote(__note);
+            },
+            played() {
+                return played;
+            },
+        };
+    }, [__disabled, __note, __playNote, __stopNote, played]);
+    let keyLabelProps = {};
+    if (children != undefined) {
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type == KeyLabel) {
+                    keyLabelProps = child.props;
+                }
+                else {
+                    throw new Error('only <KeyLabel>');
+                }
+            }
+            else {
+                throw new Error('children is an invalid element.');
+            }
+        });
+    }
+    return (jsx("div", Object.assign({ className: clsx(`tremolo-piano-white-key`, className), "aria-disabled": __disabled, "data-active": played, style: Object.assign({ left: __position, width: __fill ? __width : (width !== null && width !== void 0 ? width : __width), height: height }, style), onPointerDown: () => {
+            if (__disabled)
+                return;
+            setPlayed(true);
+            if (__playNote)
+                __playNote(__note);
+        }, onPointerEnter: () => {
+            if (__disabled)
+                return;
+            if (__glissando) {
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            }
+        }, onPointerUp: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, onPointerLeave: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        } }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
+});
+
+const Shortcuts = {
+    HOME_ROW: {
+        keys: [
+            'a',
+            'w',
+            's',
+            'e',
+            'd',
+            'f',
+            't',
+            'g',
+            'y',
+            'h',
+            'u',
+            'j',
+            'k',
+            'o',
+            'l',
+            'p',
+            ';',
+        ],
+    },
+};
+
+function Piano(_a) {
+    var { noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? '100%' : 160, style, className, playNote, stopNote, label, children } = _a, props = __rest(_a, ["noteRange", "glissando", "midiMax", "keyboardShortcuts", "fill", "height", "style", "className", "playNote", "stopNote", "label", "children"]);
+    // -- state and ref ---
+    const [pressed, setPressed] = useState(false);
+    const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1);
+    const keyRefs = useRef([]);
+    for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
+        keyRefs.current[i] = createRef();
+    }
+    const pianoRef = useRef(null);
+    // --- interpret props ---
+    const noteRangeArray = Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
+    const whiteNoteCount = noteRangeArray.filter((v) => isWhiteKey(v)).length;
+    let whiteKeyProps = {}, blackKeyProps = {};
+    if (children != undefined) {
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type == WhiteKey) {
+                    whiteKeyProps = child.props;
+                }
+                else if (child.type == BlackKey) {
+                    blackKeyProps = child.props;
+                }
+                else {
+                    throw new Error('only <WhiteKey> or <BlackKey>');
+                }
+            }
+            else {
+                throw new Error('children is an invalid element.');
+            }
+        });
+    }
+    // --- internal functions ---
+    function notePosition(note) {
+        const pitchPositions = {
+            C: 0,
+            'C#': 0.55,
+            D: 1,
+            'D#': 1.8,
+            E: 2,
+            F: 3,
+            'F#': 3.5,
+            G: 4,
+            'G#': 4.7,
+            A: 5,
+            'A#': 5.85,
+            B: 6,
+        };
+        const toNoteName = (n) => {
+            const { letter, accidental } = parseNoteName(noteName(n));
+            return (letter + accidental);
+        };
+        const _noteName = toNoteName(note);
+        const firstNoteName = toNoteName(noteRange.first);
+        const pos = pitchPositions[_noteName] - pitchPositions[firstNoteName];
+        const octave = Math.floor((note - noteRange.first) / 12);
+        const octaveOffset = noteNames.indexOf(firstNoteName) > noteNames.indexOf(_noteName) ? 1 : 0;
+        const length = whiteNoteWidth + 3;
+        return pos * length + (octave + octaveOffset) * 7 * length;
+    }
+    // --- hooks ---
+    useEffect(() => {
+        if (fill && pianoRef.current) {
+            const parent = pianoRef.current.parentElement;
+            if (!parent)
+                throw new Error("doesn't have a parent element.");
+            const resizeObserver = new ResizeObserver(() => {
+                const w = pianoRef.current.clientWidth;
+                setWhiteNoteWidth(w / whiteNoteCount - 3);
+            });
+            resizeObserver.observe(parent);
+        }
+        else {
+            setWhiteNoteWidth((whiteKeyProps === null || whiteKeyProps === void 0 ? void 0 : whiteKeyProps.width) || 40);
+        }
+    }, [fill, whiteKeyProps === null || whiteKeyProps === void 0 ? void 0 : whiteKeyProps.width, whiteNoteCount]);
+    useEventListener(window, 'keydown', (e) => {
+        var _a, _b, _c, _d;
+        if (e.repeat)
+            return;
+        if (!keyboardShortcuts)
+            return;
+        const index = keyboardShortcuts.keys.indexOf(e.key);
+        if (index != -1) {
+            if (!((_b = (_a = keyRefs.current[index]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.played())) {
+                (_d = (_c = keyRefs.current[index]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.play();
+            }
+        }
+    });
+    useEventListener(window, 'keyup', (e) => {
+        var _a, _b;
+        if (e.repeat)
+            return;
+        if (!keyboardShortcuts)
+            return;
+        const index = keyboardShortcuts.keys.indexOf(e.key);
+        if (index != -1) {
+            (_b = (_a = keyRefs.current[index]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.stop();
+        }
+    });
+    return (jsx("div", Object.assign({ ref: pianoRef, className: clsx('tremolo-piano', className), style: Object.assign({ width: fill ? '100%' : undefined, height: height }, style), onPointerDown: (e) => {
+            if (props.onPointerDown)
+                props.onPointerDown(e);
+            setPressed(true);
+        }, onPointerUp: (e) => {
+            if (props.onPointerUp)
+                props.onPointerUp(e);
+            setPressed(false);
+        } }, props, { children: noteRangeArray.map((note, index) => {
+            return isWhiteKey(note) ? (jsx(WhiteKey, Object.assign({ ref: keyRefs.current[index], __glissando: glissando && pressed, __position: notePosition(note), __note: note, __disabled: note > midiMax, __index: index, __fill: fill, __width: whiteNoteWidth, __playNote: playNote, __stopNote: stopNote, __label: label }, whiteKeyProps), note)) : (jsx(BlackKey, Object.assign({ ref: keyRefs.current[index], __glissando: glissando && pressed, __position: notePosition(note), __note: note, __disabled: note > midiMax, __index: index, __fill: fill, __width: whiteNoteWidth * 0.65, __playNote: playNote, __stopNote: stopNote, __label: label }, blackKeyProps), note));
+        }) })));
 }
 
+const minContext = createContext(0);
+const maxContext = createContext(0);
+const stepContext = createContext(0);
+const skewContext = createContext(0);
+const verticalContext = createContext(false);
+const reverseContext = createContext(false);
+const disabledContext = createContext(false);
+function SliderValuesProvider({ min: _min, max: _max, step: _step, skew: _skew, vertical: _vertical, reverse: _reverse, disabled: _disabled, children, }) {
+    const [min] = useState(_min);
+    const [max] = useState(_max);
+    const [step] = useState(_step);
+    const [skew] = useState(_skew);
+    const [vertical] = useState(_vertical);
+    const [reverse] = useState(_reverse);
+    const [disabled] = useState(_disabled);
+    return (jsx(minContext.Provider, { value: min, children: jsx(maxContext.Provider, { value: max, children: jsx(stepContext.Provider, { value: step, children: jsx(skewContext.Provider, { value: skew, children: jsx(verticalContext.Provider, { value: vertical, children: jsx(reverseContext.Provider, { value: reverse, children: jsx(disabledContext.Provider, { value: disabled, children: children }) }) }) }) }) }) }));
+}
+const useMin = () => useContext(minContext);
+const useMax = () => useContext(maxContext);
+const useStep = () => useContext(stepContext);
+const useSkew = () => useContext(skewContext);
+const useVertical = () => useContext(verticalContext);
+// export const useSetVertical = () => useContext(setVerticalContext)
+const useReverse = () => useContext(reverseContext);
+const useDisabled = () => useContext(disabledContext);
+
 /**
  * clamp value between min and max
  * @category Math
@@ -556,105 +1079,119 @@ function decimalPart(x) {
 
 /**
  * @module Slider
-*/
-function isHorizontal(d) {
-    return d == 'right' || d == 'left';
-}
-function isVertical(d) {
-    return d == 'up' || d == 'down';
-}
-function isReversed(d) {
-    return d == 'left' || d == 'up';
-}
-function gradientDirection(d) {
-    if (d == 'left' || d == 'right')
-        return d;
-    if (d == 'up')
-        return 'top';
-    if (d == 'down')
-        return 'bottom';
-}
-function parseScaleOrderList(scale, min, max, step) {
+ */
+function generateOptionsList(options, min, max, step) {
     var _a;
-    let scalesList = [];
-    if (!scale) ;
-    else if (typeof scale[0] == 'object') {
-        scalesList = scale;
+    const optionsList = [];
+    const per = options[0] == 'step' ? step : options[0];
+    const count = Math.floor(max / per) - Math.ceil(min / per) + 1;
+    for (let i = 0; i < count; i++) {
+        const value = toFixed(per * (Math.ceil(min / per) + i), (_a = decimalPart(per)) === null || _a === void 0 ? void 0 : _a.length);
+        optionsList.push({ value: value, type: options[1] });
     }
-    else {
-        const per = scale[0] == 'step' ? step : scale[0];
-        const count = Math.floor(max / per) - Math.ceil(min / per) + 1;
-        for (let i = 0; i < count; i++) {
-            const at = toFixed(per * (Math.ceil(min / per) + i), (_a = decimalPart(per)) === null || _a === undefined ? undefined : _a.length);
-            scalesList.push({ at: at, type: scale[1] });
-        }
-    }
-    return scalesList;
+    return optionsList;
+}
+
+function ScaleOption(_a) {
+    var { value, type = 'mark-number', label, thickness = 1, length = '0.5rem', gap = 2, labelWidth, classes, styles, className, style } = _a, props = __rest(_a, ["value", "type", "label", "thickness", "length", "gap", "labelWidth", "classes", "styles", "className", "style"]);
+    const min = useMin();
+    const max = useMax();
+    const skew = useSkew();
+    const vertical = useVertical();
+    const reverse = useReverse();
+    const calcPercent = useCallback((rawValue) => {
+        return toFixed$2(xor(vertical, reverse)
+            ? 100 - normalizeValue(rawValue, min, max, skew) * 100
+            : normalizeValue(rawValue, min, max, skew) * 100);
+    }, [vertical, reverse, max, min, skew]);
+    return (jsxs("div", Object.assign({ className: clsx('tremolo-slider-scale-option', className), style: Object.assign({ left: !vertical ? `${calcPercent(value)}%` : undefined, top: vertical ? `${calcPercent(value)}%` : undefined }, style), "data-vertical": vertical }, props, { children: [type != 'number' && (jsx("div", { className: clsx('tremolo-slider-scale-option-mark', classes === null || classes === void 0 ? void 0 : classes.mark), style: Object.assign({ width: !vertical ? thickness : length, height: vertical ? thickness : length, marginBottom: !vertical ? gap : undefined, marginRight: vertical ? gap : undefined }, styles === null || styles === void 0 ? void 0 : styles.mark), "data-vertical": vertical })), type != 'mark' && (jsx("div", { className: clsx('tremolo-slider-scale-option-label', classes === null || classes === void 0 ? void 0 : classes.label), style: Object.assign({ width: labelWidth }, styles === null || styles === void 0 ? void 0 : styles.label), children: label || value }))] })));
+}
+
+function Scale(_a) {
+    var { gap = 6, options, children, className, style } = _a, props = __rest(_a, ["gap", "options", "children", "className", "style"]);
+    const min = useMin();
+    const max = useMax();
+    const step = useStep();
+    const vertical = useVertical();
+    const reverse = useReverse();
+    const optionsList = options
+        ? generateOptionsList(options, min, max, step)
+        : [];
+    if (xor(vertical, reverse))
+        optionsList.reverse();
+    return (jsx("div", Object.assign({ className: clsx('tremolo-slider-scale', className), style: Object.assign({ marginLeft: vertical ? gap : undefined, marginTop: !vertical ? gap : undefined }, style) }, props, { children: options
+            ? optionsList.map(({ value, type }, index) => {
+                return jsx(ScaleOption, { value: value, type: type }, index);
+            })
+            : children })));
 }
 
-const SliderThumb = forwardRef(({ size, width = 22, height = 22, color = '#4e76e6', hoverColor = color, disabledColor = '#5d6478', disabledHoverColor = disabledColor, zIndex = 100, children, className, style, __disabled, __css, }, ref) => {
+const defaultThumbSize = 22;
+const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defaultThumbSize, children, className, style, __percent, }, ref) => {
     const wrapperRef = useRef(null);
+    const vertical = useVertical();
+    const disabled = useDisabled();
     useImperativeHandle(ref, () => {
         return {
             focus() {
                 var _a;
-                (_a = wrapperRef.current) === null || _a === undefined ? undefined : _a.focus();
+                (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             },
             blur() {
                 var _a;
-                (_a = wrapperRef.current) === null || _a === undefined ? undefined : _a.blur();
+                (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             },
         };
     }, []);
-    return (jsx("div", { className: "tremolo-slider-thumb-wrapper", css: css(Object.assign({ position: 'absolute', translate: '-50% -50%', zIndex: zIndex }, __css)), children: children ? (children) : (
+    return (jsx("div", { className: "tremolo-slider-thumb-wrapper", style: {
+            top: vertical ? `${__percent}%` : '50%',
+            left: !vertical ? `${__percent}%` : '50%',
+        }, children: children ? (children) : (
         // default slider thumb
         jsx("div", { ref: wrapperRef, className: clsx('tremolo-slider-thumb', className), 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, css: css(Object.assign({ background: __disabled ? disabledColor : color, width: size !== null && size !== undefined ? size : width, height: size !== null && size !== undefined ? size : height, borderRadius: '50%', outline: 'none', '&:hover': {
-                    background: __disabled ? disabledHoverColor : hoverColor
-                }, '&:focus': !__disabled && {
-                    boxShadow: '0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2)',
-                } }, style)) })) }));
+            tabIndex: 0, "aria-disabled": disabled, style: Object.assign({ width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height }, style) })) }));
 });
 
-function SliderTrack({ length = 140, thickness = 10, activeBg = '#7998ec', inactiveBg = '#eee', activeHoverBg = '#6387e9', inactiveHoverBg = '#e0e0e0', disabledActiveBg = '#858890', disabledInactiveBg = '#ddd', disabledActiveHoverBg = disabledActiveBg, disabledInactiveHoverBg = disabledInactiveBg, children, className, style, __thumb, __direction, __disabled, __percent, }) {
-    const active = __disabled ? disabledActiveBg : activeBg;
-    const inactive = __disabled ? disabledInactiveBg : inactiveBg;
-    const activeHover = __disabled ? disabledActiveHoverBg : activeHoverBg;
-    const inactiveHover = __disabled ? disabledInactiveHoverBg : inactiveHoverBg;
-    return (jsxs("div", { className: clsx('tremolo-slider-track', className), css: css(Object.assign({ position: 'relative', background: `linear-gradient(to ${gradientDirection(__direction)}, ${active} ${__percent}%, ${inactive} ${__percent}%)`, borderRadius: styleHelper(thickness, '/', 2), width: isHorizontal(__direction) ? length : thickness, height: isHorizontal(__direction) ? thickness : length, ':hover': {
-                background: `linear-gradient(to ${gradientDirection(__direction)}, ${activeHover} ${__percent}%, ${inactiveHover} ${__percent}%)`
-            } }, style)), children: [children, __thumb] }));
+const defaultLength = 140;
+const defaultThickness = 10;
+function SliderTrack({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, __thumb, __percent, }) {
+    const vertical = useVertical();
+    const reverse = useReverse();
+    const disabled = useDisabled();
+    const direction = vertical ? 'bottom' : 'right';
+    const colors = {
+        '--active': active,
+        '--inactive': inactive,
+    };
+    return (jsxs("div", { className: clsx('tremolo-slider-track', className), "aria-disabled": disabled, style: Object.assign(Object.assign(Object.assign({}, colors), { background: xor(vertical, reverse)
+                ? `linear-gradient(to ${direction}, var(--inactive, #eee) ${__percent}%, var(--active, #7998ec) ${__percent}%)`
+                : `linear-gradient(to ${direction}, var(--active, #7998ec) ${__percent}%, var(--inactive, #eee) ${__percent}%)`, borderRadius: styleHelper(thickness, '/', 2), width: !vertical ? length : thickness, height: vertical ? length : thickness }), style), children: [children, __thumb] }));
 }
 
 /**
  * Customizable slider
  */
 const Slider = forwardRef((_a, ref) => {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var { value, min, max, step = 1, skew = 1, direction = 'right', scale, scaleOption, className, style, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], disabled = false, readonly = false, onChange, children } = _a; __rest(_a, ["value", "min", "max", "step", "skew", "direction", "scale", "scaleOption", "className", "style", "bodyNoSelect", "wheel", "keyboard", "disabled", "readonly", "onChange", "children"]);
+    var _b, _c, _d;
+    var { value, min, max, step = 1, skew = 1, vertical = false, reverse = false, className, style, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], disabled = false, readonly = false, onChange, children } = _a, props = __rest(_a, ["value", "min", "max", "step", "skew", "vertical", "reverse", "className", "style", "bodyNoSelect", "wheel", "keyboard", "disabled", "readonly", "onChange", "children"]);
     // -- state and ref ---
     const trackElementRef = useRef(null);
     const thumbRef = useRef(null);
     const thumbDragged = useRef(false);
-    const percent = toFixed$2(normalizeValue(value, min, max, skew) * 100);
-    const percentRev = isReversed(direction) ? toFixed$2(100 - percent) : percent;
-    const calcPercent = (v) => {
-        return toFixed$2(isReversed(direction)
-            ? 100 - normalizeValue(v, min, max, skew) * 100
-            : normalizeValue(v, min, max, skew) * 100);
-    };
-    if (wheel.length != 2) {
-        throw new Error(`Slider.wheel expect ['normalized' | 'raw', number]`);
-    }
-    if (keyboard.length != 2) {
-        throw new Error(`Slider.keyboard expect ['normalized' | 'raw', number]`);
-    }
-    const scalesList = parseScaleOrderList(scale, min, max, step);
-    if (isReversed(direction))
-        scalesList.reverse();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let trackProps, thumbProps;
+    // --- interpret props ---
+    const p = toFixed$2(normalizeValue(value, min, max, skew) * 100);
+    const rev = toFixed$2(100 - p);
+    // NOTE
+    // normal -> normal (right)
+    // vertical -> rev (up)
+    // reverse -> rev (left)
+    // vertical & reverse -> normal (down)
+    const displayReversed = useMemo(() => xor(vertical, reverse), [vertical, reverse]);
+    const percent = displayReversed ? rev : p;
+    let trackProps = {};
+    let thumbProps = {};
+    let scaleComponent = undefined;
     if (children != undefined) {
         React.Children.forEach(children, (child) => {
             if (React.isValidElement(child)) {
@@ -664,6 +1201,9 @@ const Slider = forwardRef((_a, ref) => {
                 else if (child.type == SliderTrack) {
                     trackProps = child.props;
                 }
+                else if (child.type == Scale) {
+                    scaleComponent = child;
+                }
                 else {
                     throw new Error('only <SliderThumb> or <SliderTrack>');
                 }
@@ -675,8 +1215,12 @@ const Slider = forwardRef((_a, ref) => {
     }
     // --- internal functions ---
     const handleValue = (event) => {
-        if (!trackElementRef.current || !thumbDragged.current || !onChange || readonly)
+        if (!trackElementRef.current ||
+            !thumbDragged.current ||
+            !onChange ||
+            readonly) {
             return;
+        }
         const isTouch = event instanceof TouchEvent;
         if (isTouch && event.cancelable)
             event.preventDefault();
@@ -685,10 +1229,10 @@ const Slider = forwardRef((_a, ref) => {
         const { left: x1, top: y1, right: x2, bottom: y2, } = trackElementRef.current.getBoundingClientRect();
         const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
         const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
-        const n = isHorizontal(direction)
-            ? normalizeValue(mouseX, x1, x2)
-            : normalizeValue(mouseY, y1, y2);
-        const v = rawValue(isReversed(direction) ? 1 - n : n, min, max, skew);
+        const n = vertical
+            ? normalizeValue(mouseY, y1, y2)
+            : normalizeValue(mouseX, x1, x2);
+        const v = rawValue(displayReversed ? 1 - n : n, min, max, skew);
         onChange(clamp(stepValue(v, step), min, max));
     };
     const handleKeyDown = useCallback((event) => {
@@ -697,8 +1241,8 @@ const Slider = forwardRef((_a, ref) => {
         const key = event.key;
         if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
             event.preventDefault();
-            let x = (key == 'ArrowRight' || key == 'ArrowUp') ? keyboard[1] : -keyboard[1];
-            if (direction == 'down' || direction == 'left')
+            let x = key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
+            if (reverse)
                 x *= -1;
             let v;
             if (keyboard[0] == 'normalized') {
@@ -710,15 +1254,23 @@ const Slider = forwardRef((_a, ref) => {
             }
             onChange(clamp(stepValue(v, step), min, max));
         }
-    }, [value, min, max, step, skew, direction, keyboard, onChange, readonly]);
+    }, [value, min, max, step, skew, reverse, keyboard, onChange, readonly]);
     // --- hooks ---
-    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [min, max, skew, step, direction, onChange, readonly]);
+    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [min, max, skew, step, vertical, reverse, onChange, readonly]);
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
         if (!wheel || !onChange || readonly)
             return;
         event.preventDefault();
-        let x = event.deltaY > 0 ? wheel[1] : -wheel[1];
-        if (isReversed(direction) || isHorizontal(direction))
+        let x;
+        if (!vertical && event.deltaX != 0) {
+            x = event.deltaX > 0 ? wheel[1] : -wheel[1];
+        }
+        else {
+            if (event.deltaY == 0)
+                return;
+            x = event.deltaY > 0 ? -wheel[1] : wheel[1];
+        }
+        if (vertical && reverse)
             x *= -1;
         let v;
         if (wheel[0] == 'normalized') {
@@ -744,65 +1296,227 @@ const Slider = forwardRef((_a, ref) => {
         return {
             focus() {
                 var _a;
-                (_a = thumbRef.current) === null || _a === undefined ? undefined : _a.focus();
+                (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+        };
+    }, []);
+    return (jsx(SliderValuesProvider, { min: min, max: max, step: step, skew: skew, vertical: vertical, reverse: reverse, disabled: disabled, children: jsx("div", Object.assign({ className: clsx('tremolo-slider', className), ref: (div) => {
+                wheelRefCallback(div);
+                touchMoveRefCallback(div);
+            }, tabIndex: -1, role: "slider", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": vertical ? 'vertical' : 'horizontal', "aria-disabled": disabled, "aria-readonly": readonly, style: Object.assign({ margin: `calc(${styleHelper((_b = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps.size) !== null && _b !== void 0 ? _b : 22)} / 2)` }, style), onPointerDown: (event) => {
+                thumbDragged.current = true;
+                handleValue(event);
+            }, onKeyDown: handleKeyDown, onFocus: (_c = thumbRef.current) === null || _c === void 0 ? void 0 : _c.focus, onBlur: (_d = thumbRef.current) === null || _d === void 0 ? void 0 : _d.blur }, props, { children: jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: vertical ? 'row' : 'column',
+                }, children: [jsx("div", { className: "tremolo-slider-track-wrapper", ref: trackElementRef, children: jsx(SliderTrack, Object.assign({ __percent: percent, __thumb: jsx(SliderThumb, Object.assign({ ref: thumbRef, __percent: percent }, thumbProps)) }, trackProps)) }), scaleComponent] }) })) }));
+});
+
+function WheelObserver(props) {
+    const { children, onWheel, as: Component = 'div' } = props, attributes = __rest(props, ["children", "onWheel", "as"]);
+    const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
+        if (onWheel)
+            onWheel(event);
+    }, { passive: false }, [onWheel]);
+    return (jsx(Component, Object.assign({ ref: wheelRefCallback }, attributes, { children: children })));
+}
+
+function XYPadArea({ width = 120, height = 120, bg = '#eee', children, className, style, __thumb, }) {
+    return (jsxs("div", { className: clsx('tremolo-xy-pad-area', className), style: Object.assign({ position: 'relative', width: width, height: height, background: bg }, style), children: [children, __thumb] }));
+}
+
+const XYPadThumb = forwardRef(({ size, width = 22, height = 22, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css, }, ref) => {
+    const wrapperRef = useRef(null);
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+        };
+    }, []);
+    return (jsx("div", { className: clsx('tremolo-xy-pad-thumb-wrapper', wrapperClassName), style: Object.assign(Object.assign({}, __css), wrapperStyle), children: children ? (children) : (
+        // default thumb
+        jsx("div", { ref: wrapperRef, className: clsx('tremolo-xy-pad-thumb', className), 
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex: 0, "aria-disabled": __disabled, style: Object.assign({ width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height }, style) })) }));
+});
+
+const defaultValueOptions = {
+    skew: 1,
+    step: 1,
+    reverse: false,
+    wheel: ['raw', 1],
+    keyboard: ['raw', 1],
+};
+/**
+ * Simple XYPad
+ */
+const XYPad = forwardRef((_a, ref) => {
+    var _b, _c, _d;
+    var { x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, children } = _a, props = __rest(_a, ["x", "y", "className", "style", "bodyNoSelect", "disabled", "readonly", "onChange", "children"]);
+    const x = useMemo(() => {
+        return Object.assign(Object.assign({}, defaultValueOptions), _x);
+    }, [_x]);
+    const y = useMemo(() => {
+        return Object.assign(Object.assign({}, defaultValueOptions), _y);
+    }, [_y]);
+    // -- state and ref ---
+    const areaElementRef = useRef(null);
+    const thumbRef = useRef(null);
+    const thumbDragged = useRef(false);
+    // --- interpret props ---
+    const nx = normalizeValue(x.value, x.min, x.max, x.skew);
+    const ny = normalizeValue(y.value, y.min, y.max, y.skew);
+    const percentX = toFixed$2((x.reverse ? 1 - nx : nx) * 100);
+    const percentY = toFixed$2((y.reverse ? 1 - ny : ny) * 100);
+    let areaProps = {}, thumbProps = {};
+    if (children != undefined) {
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type == XYPadThumb) {
+                    thumbProps = child.props;
+                }
+                else if (child.type == XYPadArea) {
+                    areaProps = child.props;
+                }
+                else {
+                    throw new Error('only <XYPadThumb> or <XYPadArea>');
+                }
+            }
+            else {
+                throw new Error('children is an invalid element.');
+            }
+        });
+    }
+    // --- internal functions ---
+    const handleValue = (event) => {
+        if (!areaElementRef.current ||
+            !thumbDragged.current ||
+            !onChange ||
+            readonly)
+            return;
+        const isTouch = event instanceof TouchEvent;
+        if (isTouch && event.cancelable)
+            event.preventDefault();
+        if (bodyNoSelect)
+            addNoSelect();
+        const { left: x1, top: y1, right: x2, bottom: y2, } = areaElementRef.current.getBoundingClientRect();
+        const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
+        const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
+        const nx = normalizeValue(mouseX, x1, x2);
+        const ny = normalizeValue(mouseY, y1, y2);
+        const vx = rawValue(x.reverse ? 1 - nx : nx, x.min, x.max, x.skew);
+        const vy = rawValue(y.reverse ? 1 - ny : ny, y.min, y.max, y.skew);
+        const newX = clamp(stepValue(vx, x.step), x.min, x.max);
+        const newY = clamp(stepValue(vy, y.step), y.min, y.max);
+        onChange(newX, newY);
+    };
+    const handleKeyDown = useCallback((event) => {
+        if (!onChange || readonly)
+            return;
+        const key = event.key;
+        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
+            const isHorizontal = key == 'ArrowRight' || key == 'ArrowLeft';
+            const target = isHorizontal ? x : y;
+            if (!target.keyboard)
+                return;
+            event.preventDefault();
+            let delta = target.keyboard[1];
+            if (key == 'ArrowLeft' || key == 'ArrowUp')
+                delta *= -1;
+            if (target.reverse)
+                delta *= -1;
+            let v;
+            if (target.keyboard[0] == 'normalized') {
+                const n = normalizeValue(target.value, target.min, target.max, target.skew);
+                v = rawValue(n + delta, target.min, target.max, target.skew);
+            }
+            else {
+                v = target.value + delta;
+            }
+            const newValue = clamp(stepValue(v, target.step), target.min, target.max);
+            if (isHorizontal) {
+                onChange(newValue, y.value);
+            }
+            else {
+                onChange(x.value, newValue);
+            }
+        }
+    }, [x, y, onChange, readonly]);
+    // --- hooks ---
+    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [x, onChange, readonly]);
+    const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
+        if (!onChange || readonly)
+            return;
+        const target = event.shiftKey ? x : y;
+        if (!target.wheel)
+            return;
+        event.preventDefault();
+        let delta = target.wheel[1];
+        if (event.deltaY < 0)
+            delta *= -1;
+        if (target.reverse)
+            delta *= -1;
+        let v;
+        if (target.wheel[0] == 'normalized') {
+            const n = normalizeValue(target.value, target.min, target.max, target.skew);
+            v = rawValue(n + delta, target.min, target.max, target.skew);
+        }
+        else {
+            v = target.value + delta;
+        }
+        const newValue = clamp(stepValue(v, target.step), target.min, target.max);
+        if (event.shiftKey) {
+            onChange(newValue, y.value);
+        }
+        else {
+            onChange(x.value, newValue);
+        }
+    }, {
+        passive: false,
+    }, [x, y]);
+    useEventListener(window, 'mousemove', (event) => {
+        handleValue(event);
+    });
+    useEventListener(window, 'mouseup', () => {
+        thumbDragged.current = false;
+        if (bodyNoSelect)
+            removeNoSelect();
+    });
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             },
             blur() {
                 var _a;
-                (_a = thumbRef.current) === null || _a === undefined ? undefined : _a.blur();
+                (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             },
         };
     }, []);
-    return (jsxs("div", { className: clsx('tremolo-slider', className), ref: (div) => {
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("div", Object.assign({ className: clsx('tremolo-xy-pad', className), ref: (div) => {
             wheelRefCallback(div);
             touchMoveRefCallback(div);
-        }, tabIndex: -1, role: "slider", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isHorizontal(direction) ? 'horizontal' : 'vertical', "aria-disabled": disabled, "aria-readonly": readonly, css: css(Object.assign({ display: 'inline-block', margin: `calc(${styleHelper((_b = thumbProps === null || thumbProps === undefined ? undefined : thumbProps.size) !== null && _b !== undefined ? _b : 22)} / 2)`, cursor: readonly ? 'not-allowed' : 'pointer', outline: 0 }, style)), onPointerDown: (event) => {
+        }, tabIndex: -1, "aria-disabled": disabled, "aria-readonly": readonly, style: Object.assign({ margin: `calc(${styleHelper((_b = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps.size) !== null && _b !== void 0 ? _b : 22)} / 2)`, cursor: readonly ? 'not-allowed' : 'pointer', WebkitTapHighlightColor: 'transparent' }, style), onPointerDown: (event) => {
             thumbDragged.current = true;
             handleValue(event);
-        }, onKeyDown: handleKeyDown, onFocus: (_c = thumbRef.current) === null || _c === undefined ? undefined : _c.focus, onBlur: (_d = thumbRef.current) === null || _d === undefined ? undefined : _d.blur, children: [jsx(Global, { styles: {
-                    '.no-select': {
-                        userSelect: 'none',
-                    },
-                } }), jsxs("div", { css: css({
-                    display: 'flex',
-                    flexDirection: isHorizontal(direction) ? 'column' : 'row',
-                }), children: [jsx("div", { className: "tremolo-slider-track-wrapper", ref: trackElementRef, children: jsx(SliderTrack, Object.assign({ __direction: direction, __disabled: disabled, __percent: percent, __thumb: jsx(SliderThumb, Object.assign({ ref: thumbRef, __disabled: disabled, __css: {
-                                    top: isHorizontal(direction) ? '50%' : `${percentRev}%`,
-                                    left: isHorizontal(direction) ? `${percentRev}%` : '50%',
-                                } }, thumbProps)) }, trackProps)) }), scale && (jsx("div", { className: "tremolo-slider-scale-wrapper", css: css(Object.assign({ display: 'block', position: 'relative', marginLeft: isVertical(direction)
-                                ? ((_e = scaleOption === null || scaleOption === undefined ? undefined : scaleOption.gap) !== null && _e !== undefined ? _e : `calc((22px - ${styleHelper((_f = trackProps === null || trackProps === undefined ? undefined : trackProps.thickness) !== null && _f !== undefined ? _f : 10)}) / 2)`)
-                                : undefined, marginTop: isHorizontal(direction)
-                                ? ((_g = scaleOption === null || scaleOption === undefined ? undefined : scaleOption.gap) !== null && _g !== undefined ? _g : `calc((22px - ${styleHelper((_h = trackProps === null || trackProps === undefined ? undefined : trackProps.thickness) !== null && _h !== undefined ? _h : 10)}) / 2)`)
-                                : undefined }, scaleOption === null || scaleOption === undefined ? undefined : scaleOption.style)), children: scalesList.map((item, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-                            return (jsxs("div", { css: css({
-                                    display: 'flex',
-                                    flexDirection: isHorizontal(direction) ? 'column' : 'row',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    position: 'absolute',
-                                    left: isHorizontal(direction) ? `${calcPercent(item.at)}%` : undefined,
-                                    top: isVertical(direction) ? `${calcPercent(item.at)}%` : undefined,
-                                    translate: isHorizontal(direction) ? '-50% 0' : '0 -50%',
-                                    zIndex: 10,
-                                }), children: [((_b = (_a = item.type) !== null && _a !== undefined ? _a : scaleOption === null || scaleOption === undefined ? undefined : scaleOption.defaultType) !== null && _b !== undefined ? _b : 'mark-number') !=
-                                        'number' && (jsx("div", { className: "tremolo-slider-scale-mark", css: css({
-                                            width: isHorizontal(direction)
-                                                ? ((_d = (_c = item.style) === null || _c === undefined ? undefined : _c.thickness) !== null && _d !== undefined ? _d : 1)
-                                                : ((_f = (_e = item.style) === null || _e === undefined ? undefined : _e.length) !== null && _f !== undefined ? _f : '0.5rem'),
-                                            height: isVertical(direction)
-                                                ? ((_h = (_g = item.style) === null || _g === undefined ? undefined : _g.thickness) !== null && _h !== undefined ? _h : 1)
-                                                : ((_k = (_j = item.style) === null || _j === undefined ? undefined : _j.length) !== null && _k !== undefined ? _k : '0.5rem'),
-                                            backgroundColor: (_o = (_m = (_l = item.style) === null || _l === undefined ? undefined : _l.markColor) !== null && _m !== undefined ? _m : scaleOption === null || scaleOption === undefined ? undefined : scaleOption.markColor) !== null && _o !== undefined ? _o : '#222',
-                                            marginBottom: isHorizontal(direction) ? 2 : undefined,
-                                            marginRight: isVertical(direction) ? 2 : undefined,
-                                        }) })), ((_q = (_p = item.type) !== null && _p !== undefined ? _p : scaleOption === null || scaleOption === undefined ? undefined : scaleOption.defaultType) !== null && _q !== undefined ? _q : 'mark-number') !=
-                                        'mark' && (jsx("div", { className: "tremolo-slider-scale-number", css: css({
-                                            color: (_s = (_r = item.style) === null || _r === undefined ? undefined : _r.labelColor) !== null && _s !== undefined ? _s : scaleOption === null || scaleOption === undefined ? undefined : scaleOption.labelColor,
-                                            width: scaleOption === null || scaleOption === undefined ? undefined : scaleOption.labelWidth,
-                                            textAlign: 'right',
-                                        }), children: (_t = item.text) !== null && _t !== undefined ? _t : item.at }))] }, index));
-                        }) }))] })] }));
+        }, onKeyDown: handleKeyDown, onFocus: (_c = thumbRef.current) === null || _c === void 0 ? void 0 : _c.focus, onBlur: (_d = thumbRef.current) === null || _d === void 0 ? void 0 : _d.blur }, props, { children: jsx("div", { className: "tremolo-xy-pad-area-wrapper", ref: areaElementRef, children: jsx(XYPadArea, Object.assign({ __thumb: jsx(XYPadThumb, Object.assign({ ref: thumbRef, __disabled: disabled, __css: {
+                        top: `${percentY}%`,
+                        left: `${percentX}%`,
+                    } }, thumbProps)) }, areaProps)) }) })));
 });
 
-export { AnimationCanvas, Knob, NumberInput, Slider, SliderThumb, SliderTrack, gradientDirection };
+export { AnimationCanvas, AnimationKnob, BlackKey, DragObserver, KeyLabel, Knob, NumberInput, Piano, Scale, ScaleOption, Shortcuts, Slider, SliderThumb, SliderTrack, SliderValuesProvider, WheelObserver, WhiteKey, XYPad, XYPadArea, XYPadThumb, defaultLength, defaultThickness, defaultThumbSize, useDisabled, useMax, useMin, useReverse, useSkew, useStep, useVertical };
 //# sourceMappingURL=index.js.map