@tremolo-ui/react 0.0.11 → 0.0.12

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React, { useRef, useCallback, useEffect, useInsertionEffect, useMemo, createContext, useContext, useState, forwardRef, useImperativeHandle, createRef } from 'react';
+import React, { useRef, useCallback, useEffect, useInsertionEffect, useMemo, forwardRef, useImperativeHandle, createContext, useContext, useState, createRef } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -67,7 +67,7 @@ function setDprConfig(canvas, context, width, height, dpr) {
     canvas.style.height = `${height}px`;
 }
 function AnimationCanvas(_a) {
-    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"]);
+    var { width = 100, height = 100, relativeSize = false, reduceFlickering = true, options, init, draw, className, onContextMenu = (event) => event.preventDefault() } = _a, props = __rest(_a, ["width", "height", "relativeSize", "reduceFlickering", "options", "init", "draw", "className", "onContextMenu"]);
     const canvasRef = useRef(null);
     const memoCanvasRef = useRef(null);
     const reqIdRef = useRef(-1);
@@ -116,7 +116,11 @@ function AnimationCanvas(_a) {
                     for (const prop of drawingState) {
                         context[prop] = contextMemo[prop];
                     }
-                    if (reduceFlickering && memoContext) {
+                    if (reduceFlickering &&
+                        memoContext &&
+                        memoCanvas &&
+                        memoCanvas.width > 0 &&
+                        memoCanvas.height > 0) {
                         context.drawImage(memoContext.canvas, 0, 0);
                     }
                 }
@@ -148,7 +152,7 @@ function AnimationCanvas(_a) {
             };
         }
     }, [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 }))] }));
+    return (jsxs(Fragment, { children: [jsx("canvas", Object.assign({ className: clsx('tremolo-animation-canvas', className), width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, ref: canvasRef, onContextMenu: onContextMenu }, props)), relativeSize && reduceFlickering && (jsx("canvas", { style: { display: 'none' }, ref: memoCanvasRef }))] }));
 }
 
 /**
@@ -256,7 +260,7 @@ function xor(a = false, b = false) {
 /**
  * @category MIDI
  */
-const noteNames = [
+const noteKeys = [
     'C',
     'C#',
     'D',
@@ -290,18 +294,16 @@ function parseNoteName(noteName) {
  */
 function noteNumber(noteName) {
     const { letter, accidental, octave } = parseNoteName(noteName);
-    const noteIndex = noteNames.indexOf(letter.toLocaleUpperCase());
+    const noteIndex = noteKeys.indexOf(letter.toLocaleUpperCase());
     const accidentalValue = (accidental[0] == 'b' ? -1 : 1) * accidental.length;
     return noteIndex + 12 * (Number(octave) + 1) + accidentalValue;
 }
 /**
- * Convert noteNumber to noteName
+ * Convert noteNumber to noteKey
  * @category MIDI
  */
-function noteName(noteNumber) {
-    const noteIndex = mod(noteNumber, 12);
-    const octave = Math.floor(noteNumber / 12) - 1;
-    return noteNames[noteIndex] + octave;
+function noteKey(noteNumber) {
+    return noteKeys[mod(noteNumber, 12)];
 }
 /**
  * @param note noteNumber: 0 ~ 127 or noteName e.g. 'C3'
@@ -424,13 +426,14 @@ function removeNoSelect() {
 }
 
 /**
- * simple rotary Knob.
+ * Animatable rotary knob.
  * @category AnimationKnob
  */
-function AnimationKnob(_a) {
+const AnimationKnob = forwardRef((_a, ref) => {
     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 valueRef = useRef(0);
+    const elmRef = useRef(null);
     // --- interpret props ---
     const isRelativeSize = typeof (size !== null && size !== void 0 ? size : width) == 'string' || typeof height == 'string';
     const onDrag = useCallback((_x, y) => {
@@ -487,14 +490,27 @@ function AnimationKnob(_a) {
         if (onChange)
             onChange(clamp(stepValue(v, step), min, max));
     }, { passive: false }, [wheel, value, min, max, skew, step, onChange]);
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+        };
+    }, []);
     return (jsx("div", Object.assign({ className: clsx('tremolo-animation-knob', className), ref: (div) => {
+            elmRef.current = div;
             wheelRefCallback(div);
             touchMoveRefCallback(div);
         }, 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: pointerDownHandler, onDoubleClick: () => {
             if (enableDoubleClickDefault && onChange) {
                 onChange(defaultValue);
             }
-        }, onKeyDown: handleKeyDown, onContextMenu: (e) => e.preventDefault() }, props, { children: jsx(AnimationCanvas, Object.assign({}, (isRelativeSize
+        }, onKeyDown: handleKeyDown }, props, { children: jsx(AnimationCanvas, Object.assign({}, (isRelativeSize
             ? { relativeSize: true }
             : {
                 width: size !== null && size !== void 0 ? size : width,
@@ -541,7 +557,7 @@ function AnimationKnob(_a) {
                     ctx.lineWidth = thumbWeight;
                     ctx.stroke();
                 } })) })));
-}
+});
 
 /** @category DragObserver */
 function DragObserver(props) {
@@ -555,15 +571,20 @@ function DragObserver(props) {
     return (jsx(Component, Object.assign({ ref: refCallback, onPointerDown: pointerDownHandler }, attributes, { children: children })));
 }
 
-/** @category Knob */
-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"]);
+/**
+ * Interactive rotary knob component implemented in SVG.
+ *
+ * @category Knob
+ */
+const Knob = forwardRef((_a, ref) => {
+    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, onKeyDown, onPointerDown, onDoubleClick, 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", "onKeyDown", "onPointerDown", "onDoubleClick", "className", "classes"]);
     const valueRef = useRef(0);
+    const elmRef = useRef(null);
     // --- interpret props ---
     const padding = 8; // %
     const thumbLineWeight = 6; // %
-    const thumbLength = 35; // %
-    const lineWeight = 3; // px
+    const thumbLineLength = 35; // %
+    const lineWeight = size * 0.06; // px
     const p = normalizeValue(value, min, max, skew);
     const s = normalizeValue(startValue, min, max, skew);
     // --- internal functions ---
@@ -574,6 +595,17 @@ function Knob(_a) {
         const v2 = clamp(stepValue(v, step), min, max);
         onChange(v2);
     }, [max, min, onChange, readonly, skew, step]);
+    const updateValueByEvent = useCallback((eventType, x) => {
+        let newValue;
+        if (eventType == 'normalized') {
+            const n = normalizeValue(value, min, max, skew);
+            newValue = rawValue(n + x, min, max, skew);
+        }
+        else {
+            newValue = value + x;
+        }
+        return clamp(stepValue(newValue, step), min, max);
+    }, [max, min, skew, step, value]);
     const handleKeyDown = useCallback((event) => {
         if (!keyboard || !onChange || readonly)
             return;
@@ -581,17 +613,9 @@ function Knob(_a) {
         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));
+            onChange(updateValueByEvent(keyboard[0], x));
         }
-    }, [value, min, max, step, skew, keyboard, readonly, onChange]);
+    }, [keyboard, onChange, readonly, updateValueByEvent]);
     // --- hooks ---
     const [touchMoveRefCallback, pointerDownHandler] = useDrag({
         onDrag: onDrag,
@@ -606,21 +630,26 @@ function Knob(_a) {
         },
     });
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
-        if (!wheel)
+        if (!wheel || readonly)
             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]);
+        if (!onChange || event.deltaY == 0)
+            return;
+        const x = Math.sign(event.deltaY) * -wheel[1];
+        onChange(updateValueByEvent(wheel[0], x));
+    }, { passive: false }, [wheel, onChange, readonly, updateValueByEvent]);
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+        };
+    }, []);
     const center = size / 2;
     const r1 = -135;
     const r2 = -135 + Math.min(p, s) * 270;
@@ -635,13 +664,62 @@ function Knob(_a) {
     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) => {
+            elmRef.current = 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: pointerDownHandler, onDoubleClick: () => {
+        }, width: size, height: size, tabIndex: 0, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled, "aria-readonly": readonly, onPointerDown: (event) => {
+            pointerDownHandler(event);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+        }, onDoubleClick: (event) => {
             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%" })] })] })));
+            onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(event);
+        }, onKeyDown: (event) => {
+            handleKeyDown(event);
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        } }, 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: `${thumbLineLength}%`, stroke: thumbLine || 'currentColor', strokeWidth: `${thumbLineWeight}%`, 
+                        // NOTE
+                        // https://bugs.webkit.org/show_bug.cgi?id=201854
+                        // https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform-origin#browser_compatibility
+                        style: {
+                            transform: `rotate(${ -135 + p * 270}deg)`,
+                            transformOrigin: '50% 50%',
+                        } })] })] })));
+});
+
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const api = { setState, getState, getInitialState, subscribe };
+  const initialState = state = createState(setState, getState, api);
+  return api;
+};
+const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+
+const identity = (arg) => arg;
+function useStore(api, selector = identity) {
+  const slice = React.useSyncExternalStore(
+    api.subscribe,
+    () => selector(api.getState()),
+    () => selector(api.getInitialState())
+  );
+  React.useDebugValue(slice);
+  return slice;
 }
 
 /**
@@ -690,40 +768,6 @@ function parseValue(inputString, units, digit) {
     };
 }
 
-const createStoreImpl = (createState) => {
-  let state;
-  const listeners = /* @__PURE__ */ new Set();
-  const setState = (partial, replace) => {
-    const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (!Object.is(nextState, state)) {
-      const previousState = state;
-      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach((listener) => listener(state, previousState));
-    }
-  };
-  const getState = () => state;
-  const getInitialState = () => initialState;
-  const subscribe = (listener) => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
-  const api = { setState, getState, getInitialState, subscribe };
-  const initialState = state = createState(setState, getState, api);
-  return api;
-};
-const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
-
-const identity = (arg) => arg;
-function useStore(api, selector = identity) {
-  const slice = React.useSyncExternalStore(
-    api.subscribe,
-    () => selector(api.getState()),
-    () => selector(api.getInitialState())
-  );
-  React.useDebugValue(slice);
-  return slice;
-}
-
 function safeClamp(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
     return clamp(value, min, max);
 }
@@ -734,6 +778,7 @@ const createNumberInputStore = (initProps) => {
         min: 0,
         max: 0,
         step: 1,
+        readonly: false,
         keepWithinRange: true,
         onChange: (_v, _t) => { },
     };
@@ -742,8 +787,10 @@ const createNumberInputStore = (initProps) => {
         valueAsNumber: parseValue(String((initProps === null || initProps === void 0 ? void 0 : initProps.value) || ''), initProps === null || initProps === void 0 ? void 0 : initProps.units, initProps === null || initProps === void 0 ? void 0 : initProps.digit).rawValue,
     }), { increment: () => set((state) => {
             var _a, _b;
-            let next = parseValue(state.value, state.units, state.digit).rawValue +
-                ((_a = state.step) !== null && _a !== void 0 ? _a : 1);
+            if (state.readonly)
+                return {};
+            const current = parseValue(state.value, state.units, state.digit).rawValue;
+            let next = current + ((_a = state.step) !== null && _a !== void 0 ? _a : 1);
             if (state.keepWithinRange) {
                 next = safeClamp(next, state.min, state.max);
             }
@@ -755,8 +802,10 @@ const createNumberInputStore = (initProps) => {
             };
         }), decrement: () => set((state) => {
             var _a, _b;
-            let next = parseValue(state.value, state.units, state.digit).rawValue -
-                ((_a = state.step) !== null && _a !== void 0 ? _a : 1);
+            if (state.readonly)
+                return {};
+            const current = parseValue(state.value, state.units, state.digit).rawValue;
+            let next = current - ((_a = state.step) !== null && _a !== void 0 ? _a : 1);
             if (state.keepWithinRange) {
                 next = safeClamp(next, state.min, state.max);
             }
@@ -767,6 +816,8 @@ const createNumberInputStore = (initProps) => {
                 valueAsNumber: next,
             };
         }), change: (value) => set((state) => {
+            if (state.readonly)
+                return {};
             const v = value !== null && value !== void 0 ? value : '';
             return {
                 value: v,
@@ -803,36 +854,17 @@ function useNumberInputContext(selector) {
     return useStore(store, selector);
 }
 
-function Stepper(_a) {
-    var { dynamic = true, children, className } = _a, props = __rest(_a, ["dynamic", "children", "className"]);
-    return (jsx("div", Object.assign({ className: clsx('tremolo-number-input-stepper', className), "data-dynamic": dynamic }, props, { children: children })));
-}
-
-function IncrementStepper(_a) {
-    var { size = 12, children, className } = _a, props = __rest(_a, ["size", "children", "className"]);
-    const max = useNumberInputContext((s) => s.max);
-    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-    const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-    const increment = useNumberInputContext((s) => s.increment);
-    // TODO: add long press event
-    return (jsx("div", Object.assign({ className: clsx('tremolo-number-input-increment-stepper', className), role: "button", tabIndex: -1, "aria-disabled": keepWithinRange && valueAsNumber >= (max !== null && max !== void 0 ? max : Number.MAX_SAFE_INTEGER), onPointerDown: increment }, props, { children: children || (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "18 15 12 9 6 15" }) })) })));
-}
-
-function DecrementStepper(_a) {
-    var { size = 12, children, className } = _a, props = __rest(_a, ["size", "children", "className"]);
-    const min = useNumberInputContext((s) => s.min);
-    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-    const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-    const decrement = useNumberInputContext((s) => s.decrement);
-    // TODO: add long press event
-    return (jsx("div", Object.assign({ className: clsx('tremolo-number-input-decrement-stepper', className), role: "button", tabIndex: -1, "aria-disabled": keepWithinRange && valueAsNumber <= (min !== null && min !== void 0 ? min : Number.MIN_SAFE_INTEGER), onPointerDown: decrement }, props, { children: children || (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "6 9 12 15 18 9" }) })) })));
-}
-
-function InternalInput(_a) {
-    var { min, max, step, defaultValue, units, disabled, digit, selectWithFocus, blurOnEnter, keepWithinRange, clampValueOnBlur, wheel, keyboard, wrapperClassName, className, onChange, onFocus, onBlur, children: _children } = _a, props = __rest(_a, ["min", "max", "step", "defaultValue", "units", "disabled", "digit", "selectWithFocus", "blurOnEnter", "keepWithinRange", "clampValueOnBlur", "wheel", "keyboard", "wrapperClassName", "className", "onChange", "onFocus", "onBlur", "children"]);
+const InternalInput = forwardRef((_a, ref) => {
+    var { disabled, readonly, selectWithFocus, blurOnEnter, clampValueOnBlur, wheel, keyboard, className, onChange, onFocus, onBlur, onKeyDown, children: _children } = _a, props = __rest(_a, ["disabled", "readonly", "selectWithFocus", "blurOnEnter", "clampValueOnBlur", "wheel", "keyboard", "className", "onChange", "onFocus", "onBlur", "onKeyDown", "children"]);
+    const elmRef = useRef(null);
     const [editing, setEditing] = useState(false);
     const value = useNumberInputContext((s) => s.value);
     const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+    const min = useNumberInputContext((s) => s.min);
+    const max = useNumberInputContext((s) => s.max);
+    const step = useNumberInputContext((s) => s.step);
+    const units = useNumberInputContext((s) => s.units);
+    const digit = useNumberInputContext((s) => s.digit);
     const change = useNumberInputContext((s) => s.change);
     const error = useMemo(() => {
         if (editing)
@@ -840,11 +872,71 @@ function InternalInput(_a) {
         const v = valueAsNumber;
         return (min !== null && min !== void 0 ? min : -Infinity) > v || v > (max !== null && max !== void 0 ? max : Infinity);
     }, [editing, max, min, valueAsNumber]);
-    return (jsx("input", Object.assign({ className: clsx('tremolo-number-input', className), value: value, min: min, max: max, step: step, type: "text", disabled: disabled, tabIndex: -1, "data-error": error, onChange: (event) => {
+    const updateValueByEvent = useCallback((eventType, x) => {
+        let newValue;
+        if (eventType == 'normalized') {
+            if (!min || !max) {
+                throw new Error('required parameter: min, max'); // TODO
+            }
+            const n = normalizeValue(valueAsNumber, min, max);
+            newValue = rawValue(n + x, min, max);
+            return clamp(stepValue(newValue, step), min, max);
+        }
+        else {
+            newValue = valueAsNumber + x;
+            return stepValue(newValue, step);
+        }
+    }, [max, min, step, valueAsNumber]);
+    const handleKeyDown = useCallback((event) => {
+        if (!keyboard || !onChange || readonly)
+            return;
+        const key = event.key;
+        if (!['ArrowUp', 'ArrowDown'].includes(key))
+            return;
+        event.preventDefault();
+        const x = key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
+        const parsed = parseValue(String(updateValueByEvent(keyboard[0], x)));
+        console.log('key control');
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsed.rawValue, parsed.formatValue);
+    }, [keyboard, readonly, onChange, updateValueByEvent]);
+    const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
+        if (!wheel || readonly)
+            return;
+        event.preventDefault();
+        if (!onChange || event.deltaY == 0)
+            return;
+        const x = Math.sign(event.deltaY) * -wheel[1];
+        const parsed = parseValue(String(updateValueByEvent(wheel[0], x)));
+        console.log('wheel control');
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsed.rawValue, parsed.formatValue);
+    }, { passive: false }, [wheel, readonly, onChange, updateValueByEvent]);
+    useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            },
+        };
+    }, []);
+    return (jsx("input", Object.assign({ ref: (input) => {
+            elmRef.current = input;
+            wheelRefCallback(input);
+        }, className: clsx('tremolo-number-input', className), value: value, min: min, max: max, step: step, type: "text", "aria-disabled": disabled, "aria-readonly": readonly, tabIndex: -1, "data-error": error, onChange: (event) => {
+            if (readonly)
+                return;
             const v = event.currentTarget.value;
+            const cursorPos = event.target.selectionStart;
             change(v);
             const valueAsNumber = parseValue(v, units, digit).rawValue;
             onChange === null || onChange === void 0 ? void 0 : onChange(valueAsNumber, v);
+            if (cursorPos) {
+                event.target.selectionStart = cursorPos;
+                event.target.selectionEnd = cursorPos;
+            }
         }, onFocus: (event) => {
             setEditing(true);
             const v = event.currentTarget.value;
@@ -873,18 +965,97 @@ function InternalInput(_a) {
             if (blurOnEnter && event.key == 'Enter') {
                 event.currentTarget.blur();
             }
+            handleKeyDown(event);
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         } }, props)));
+});
+
+/** @category NumberInput */
+function Stepper(_a) {
+    var { dynamic = true, children, className } = _a, props = __rest(_a, ["dynamic", "children", "className"]);
+    return (jsx("div", Object.assign({ className: clsx('tremolo-number-input-stepper', className), "data-dynamic": dynamic }, props, { children: children })));
+}
+
+function useInterval(callback, delay) {
+    const savedCallback = useRef(callback);
+    // Remember the latest callback if it changes.
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the interval.
+    useEffect(() => {
+        // Don't schedule if no delay is specified.
+        // Note: 0 is a valid value for delay.
+        if (delay === null) {
+            return;
+        }
+        const id = setInterval(() => {
+            savedCallback.current();
+        }, delay);
+        return () => {
+            clearInterval(id);
+        };
+    }, [delay]);
+}
+
+function useLongPress(callback, initialDelay = 500, interval = 40) {
+    const [pressed, setPressed] = useState(false);
+    const [delay, setDelay] = useState(initialDelay);
+    useInterval(() => {
+        callback();
+        setDelay(interval);
+    }, pressed ? delay : null);
+    useEventListener(globalThis.window, 'pointerup', () => {
+        setPressed(false);
+        setDelay(initialDelay);
+    });
+    return useCallback(() => {
+        callback();
+        setPressed(true);
+    }, [callback]);
+}
+
+/** @category NumberInput */
+function IncrementStepper(_a) {
+    var { size = 12, children, className } = _a, props = __rest(_a, ["size", "children", "className"]);
+    const max = useNumberInputContext((s) => s.max);
+    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+    const readonly = useNumberInputContext((s) => s.readonly);
+    const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+    const increment = useNumberInputContext((s) => s.increment);
+    const press = useLongPress(increment);
+    return (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    jsx("div", Object.assign({ className: clsx('tremolo-number-input-increment-stepper', className), role: "button", tabIndex: -1, "aria-disabled": keepWithinRange && valueAsNumber >= (max !== null && max !== void 0 ? max : Number.MAX_SAFE_INTEGER), "aria-readonly": readonly, onPointerDown: press }, props, { children: children || (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "18 15 12 9 6 15" }) })) })));
+}
+
+/** @category NumberInput */
+function DecrementStepper(_a) {
+    var { size = 12, children, className } = _a, props = __rest(_a, ["size", "children", "className"]);
+    const min = useNumberInputContext((s) => s.min);
+    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+    const readonly = useNumberInputContext((s) => s.readonly);
+    const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+    const decrement = useNumberInputContext((s) => s.decrement);
+    const press = useLongPress(decrement);
+    return (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    jsx("div", Object.assign({ className: clsx('tremolo-number-input-decrement-stepper', className), role: "button", tabIndex: -1, "aria-disabled": keepWithinRange && valueAsNumber <= (min !== null && min !== void 0 ? min : Number.MIN_SAFE_INTEGER), "aria-readonly": readonly, onPointerDown: press }, props, { children: children || (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "6 9 12 15 18 9" }) })) })));
 }
+
 /**
  * Input with some useful functions for entering numerical values.
  * @category NumberInput
  */
-function NumberInput(_a) {
-    var { value, min, max, step = 1, defaultValue, units, disabled = false, digit, selectWithFocus = 'none', blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ['raw', 1], keyboard = ['raw', 1], wrapperClassName, className, onChange, onFocus, onBlur, children } = _a, props = __rest(_a, ["value", "min", "max", "step", "defaultValue", "units", "disabled", "digit", "selectWithFocus", "blurOnEnter", "keepWithinRange", "clampValueOnBlur", "wheel", "keyboard", "wrapperClassName", "className", "onChange", "onFocus", "onBlur", "children"]);
-    return (jsx(NumberInputProvider, { value: String(value), min: min, max: max, step: step, units: units, digit: digit, keepWithinRange: keepWithinRange, onChange: onChange, children: jsxs("div", { className: clsx('tremolo-number-input-wrapper', wrapperClassName), 
+const NumberInput = forwardRef((_a, ref) => {
+    var { value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = 'outline', selectWithFocus = 'none', blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ['raw', 1], keyboard = ['raw', 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children } = _a, props = __rest(_a, ["value", "min", "max", "step", "units", "readonly", "disabled", "digit", "variant", "selectWithFocus", "blurOnEnter", "keepWithinRange", "clampValueOnBlur", "wheel", "keyboard", "activeColor", "wrapperClassName", "className", "onChange", "onFocus", "onBlur", "children"]);
+    const colors = {
+        '--active-color': activeColor,
+    };
+    return (jsx(NumberInputProvider, { value: String(value), min: min, max: max, step: step, units: units, digit: digit, readonly: readonly, keepWithinRange: keepWithinRange, onChange: onChange, children: jsxs("div", { className: clsx('tremolo-number-input-wrapper', wrapperClassName), 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, "data-stepper": !!children, children: [jsx(InternalInput, Object.assign({ min: min, max: max, step: step, defaultValue: defaultValue, units: units, disabled: disabled, digit: digit, selectWithFocus: selectWithFocus, blurOnEnter: blurOnEnter, keepWithinRange: keepWithinRange, clampValueOnBlur: clampValueOnBlur, wheel: wheel, keyboard: keyboard, wrapperClassName: wrapperClassName, className: className, onChange: onChange, onFocus: onFocus, onBlur: onBlur }, props)), children] }) }));
-}
+            tabIndex: 0, style: Object.assign({}, colors), "data-stepper": !!children, "data-variant": variant, children: [jsx(InternalInput, Object.assign({ ref: ref, readonly: readonly, disabled: disabled, selectWithFocus: selectWithFocus, blurOnEnter: blurOnEnter, clampValueOnBlur: clampValueOnBlur, wheel: wheel, keyboard: keyboard, className: className, onChange: onChange, onFocus: onFocus, onBlur: onBlur }, props)), children] }) }));
+});
 
 /** @category Piano */
 function KeyLabel(_a) {
@@ -899,8 +1070,14 @@ function KeyLabel(_a) {
 const defaultWhiteKeyWidth = 40;
 /** @category Piano */
 const WhiteKey = forwardRef((_a, ref) => {
-    var { width = defaultWhiteKeyWidth, height = '100%', className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __onPlayNote, __onStopNote, __label } = _a, props = __rest(_a, ["width", "height", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__onPlayNote", "__onStopNote", "__label"]);
+    var { width = defaultWhiteKeyWidth, height = '100%', bg, color, activeBg, activeColor, className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __onPlayNote, __onStopNote, __label, onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "bg", "color", "activeBg", "activeColor", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__onPlayNote", "__onStopNote", "__label", "onContextMenu"]);
     const [played, setPlayed] = useState(false);
+    const colors = {
+        '--bg': bg,
+        '--color': color,
+        '--active-bg': activeBg,
+        '--active-color': activeColor,
+    };
     useImperativeHandle(ref, () => {
         return {
             play() {
@@ -936,7 +1113,7 @@ const WhiteKey = forwardRef((_a, ref) => {
             }
         });
     }
-    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: () => {
+    return (jsx("div", Object.assign({ className: clsx(`tremolo-piano-white-key`, className), "aria-disabled": __disabled, "data-active": played, style: Object.assign(Object.assign(Object.assign({}, colors), { left: __position, width: __fill ? __width : (width !== null && width !== void 0 ? width : __width), height: height }), style), onPointerDown: () => {
             if (__disabled)
                 return;
             setPlayed(true);
@@ -964,13 +1141,19 @@ const WhiteKey = forwardRef((_a, ref) => {
                 if (__onStopNote)
                     __onStopNote(__note);
             }
-        } }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
+        }, onContextMenu: onContextMenu }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
 });
 
 /** @category Piano */
 const BlackKey = forwardRef((_a, ref) => {
-    var { width = defaultWhiteKeyWidth * 0.65, height = '60%', className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __onPlayNote, __onStopNote, __label } = _a, props = __rest(_a, ["width", "height", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__onPlayNote", "__onStopNote", "__label"]);
+    var { width = defaultWhiteKeyWidth * 0.65, height = '60%', bg, color, activeBg, activeColor, className, style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __onPlayNote, __onStopNote, __label, onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "bg", "color", "activeBg", "activeColor", "className", "style", "children", "__glissando", "__position", "__note", "__disabled", "__index", "__fill", "__width", "__onPlayNote", "__onStopNote", "__label", "onContextMenu"]);
     const [played, setPlayed] = useState(false);
+    const colors = {
+        '--bg': bg,
+        '--color': color,
+        '--active-bg': activeBg,
+        '--active-color': activeColor,
+    };
     useImperativeHandle(ref, () => {
         return {
             play() {
@@ -1006,7 +1189,7 @@ const BlackKey = forwardRef((_a, ref) => {
             }
         });
     }
-    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: () => {
+    return (jsx("div", Object.assign({ className: clsx(`tremolo-piano-black-key`, className), "aria-disabled": __disabled, "data-active": played, style: Object.assign(Object.assign(Object.assign({}, colors), { left: __position, width: __fill ? __width : (width !== null && width !== void 0 ? width : __width), height: height }), style), onPointerDown: () => {
             if (__disabled)
                 return;
             setPlayed(true);
@@ -1034,11 +1217,11 @@ const BlackKey = forwardRef((_a, ref) => {
                 if (__onStopNote)
                     __onStopNote(__note);
             }
-        } }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
+        }, onContextMenu: onContextMenu }, props, { children: jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) })));
 });
 
 /** @category Piano */
-const Shortcuts = {
+const SHORTCUTS = {
     HOME_ROW: {
         keys: [
             'a',
@@ -1062,9 +1245,12 @@ const Shortcuts = {
     },
 };
 
-/** @category Piano */
+/**
+ * Customizable piano component.
+ * @category Piano
+ */
 function Piano(_a) {
-    var { noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? '100%' : 160, style, className, onPlayNote, onStopNote, label, children } = _a, props = __rest(_a, ["noteRange", "glissando", "midiMax", "keyboardShortcuts", "fill", "height", "style", "className", "onPlayNote", "onStopNote", "label", "children"]);
+    var { noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? '100%' : 160, style, className, onPlayNote, onStopNote, label, children, onPointerUp, onPointerDown } = _a, props = __rest(_a, ["noteRange", "glissando", "midiMax", "keyboardShortcuts", "fill", "height", "style", "className", "onPlayNote", "onStopNote", "label", "children", "onPointerUp", "onPointerDown"]);
     // -- state and ref ---
     const [pressed, setPressed] = useState(false);
     const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1);
@@ -1111,15 +1297,11 @@ function Piano(_a) {
             '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 targetNoteKey = noteKey(note);
+        const firstNoteKey = noteKey(noteRange.first);
+        const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
         const octave = Math.floor((note - noteRange.first) / 12);
-        const octaveOffset = noteNames.indexOf(firstNoteName) > noteNames.indexOf(_noteName) ? 1 : 0;
+        const octaveOffset = noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0;
         const length = whiteNoteWidth + 3;
         return pos * length + (octave + octaveOffset) * 7 * length;
     }
@@ -1134,6 +1316,9 @@ function Piano(_a) {
                 setWhiteNoteWidth(w / whiteNoteCount - 3);
             });
             resizeObserver.observe(parent);
+            return () => {
+                resizeObserver.unobserve(parent);
+            };
         }
         else {
             setWhiteNoteWidth((whiteKeyProps === null || whiteKeyProps === void 0 ? void 0 : whiteKeyProps.width) || defaultWhiteKeyWidth);
@@ -1164,13 +1349,11 @@ function Piano(_a) {
         }
     });
     return (jsx("div", Object.assign({ ref: pianoRef, className: clsx('tremolo-piano', className), style: Object.assign({ width: fill ? '100%' : (whiteNoteWidth + 3) * whiteNoteCount, height: height }, style), onPointerDown: (e) => {
-            if (props.onPointerDown)
-                props.onPointerDown(e);
             setPressed(true);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(e);
         }, onPointerUp: (e) => {
-            if (props.onPointerUp)
-                props.onPointerUp(e);
             setPressed(false);
+            onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
         } }, 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, __onPlayNote: onPlayNote, __onStopNote: onStopNote, __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, __onPlayNote: onPlayNote, __onStopNote: onStopNote, __label: label }, blackKeyProps), note));
         }) })));
@@ -1287,7 +1470,7 @@ function Scale(_a) {
 /** @category Slider */
 const defaultThumbSize = 22;
 /** @category Slider */
-const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defaultThumbSize, children, className, style, __percent, }, ref) => {
+const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defaultThumbSize, color, children, className, style, __percent, }, ref) => {
     const wrapperRef = useRef(null);
     const vertical = useSliderContext((s) => s.vertical);
     const disabled = useSliderContext((s) => s.disabled);
@@ -1311,13 +1494,14 @@ const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defau
         // default slider thumb
         jsx("div", { ref: wrapperRef, className: clsx('tremolo-slider-thumb', className), 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, "aria-disabled": disabled, "aria-readonly": readonly, style: Object.assign({ width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height }, style) })) }));
+            tabIndex: 0, "aria-disabled": disabled, "aria-readonly": readonly, style: Object.assign(Object.assign({ '--color': color }, { width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height }), style) })) }));
 });
 
 const defaultLength = 140;
 const defaultThickness = 10;
 /** @category Slider */
-function SliderTrack({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0, }) {
+function SliderTrack(_a) {
+    var { length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0 } = _a, props = __rest(_a, ["length", "thickness", "active", "inactive", "children", "className", "style", "defaultStyle", "__thumb", "__percent"]);
     const vertical = useSliderContext((s) => s.vertical);
     const reverse = useSliderContext((s) => s.reverse);
     const disabled = useSliderContext((s) => s.disabled);
@@ -1326,11 +1510,11 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
         '--active': active,
         '--inactive': inactive,
     };
-    return (jsxs("div", { className: clsx('tremolo-slider-track', className), "aria-disabled": disabled, "data-vertical": vertical, style: !defaultStyle
+    return (jsxs("div", Object.assign({ className: clsx('tremolo-slider-track', className), "aria-disabled": disabled, "data-vertical": vertical, style: !defaultStyle
             ? 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] }));
+                    : `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) }, props, { children: [children, __thumb] })));
 }
 
 /**
@@ -1338,8 +1522,8 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
  * @category Slider
  */
 const Slider = forwardRef((_a, ref) => {
-    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"]);
+    var _b;
+    var { value, min, max, step = 1, skew = 1, vertical = false, reverse = false, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown } = _a, props = __rest(_a, ["value", "min", "max", "step", "skew", "vertical", "reverse", "bodyNoSelect", "wheel", "keyboard", "disabled", "readonly", "onChange", "onDragStart", "onDragEnd", "className", "style", "children", "onFocus", "onBlur", "onPointerDown", "onKeyDown"]);
     // -- state and ref ---
     const trackElementRef = useRef(null);
     const thumbRef = useRef(null);
@@ -1398,8 +1582,21 @@ const Slider = forwardRef((_a, ref) => {
             ? 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 v2 = clamp(stepValue(v, step), min, max);
+        onChange(v2);
+        return v2;
     };
+    const updateValueByEvent = useCallback((eventType, x) => {
+        let newValue;
+        if (eventType == 'normalized') {
+            const n = normalizeValue(value, min, max, skew);
+            newValue = rawValue(n + x, min, max, skew);
+        }
+        else {
+            newValue = value + x;
+        }
+        return clamp(stepValue(newValue, step), min, max);
+    }, [max, min, skew, step, value]);
     const handleKeyDown = useCallback((event) => {
         if (!keyboard || !onChange || readonly)
             return;
@@ -1409,17 +1606,9 @@ const Slider = forwardRef((_a, ref) => {
             let x = key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
             if (reverse)
                 x *= -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));
+            onChange(updateValueByEvent(keyboard[0], x));
         }
-    }, [value, min, max, step, skew, reverse, keyboard, onChange, readonly]);
+    }, [keyboard, onChange, readonly, reverse, updateValueByEvent]);
     // --- hooks ---
     const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [min, max, skew, step, vertical, reverse, onChange, readonly]);
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
@@ -1437,23 +1626,18 @@ const Slider = forwardRef((_a, ref) => {
         }
         if (vertical && reverse)
             x *= -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;
-        }
-        onChange(clamp(stepValue(v, step), min, max));
+        onChange(updateValueByEvent(wheel[0], x));
     }, {
         passive: false,
-    }, [wheel, value, min, max, skew, step]);
+    }, [wheel, vertical, readonly, onChange, updateValueByEvent]);
     useEventListener(globalThis.window, 'mousemove', (event) => {
         handleValue(event);
     });
     useEventListener(globalThis.window, 'mouseup', () => {
+        if (!thumbDragged.current || readonly)
+            return;
         thumbDragged.current = false;
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(value);
         if (bodyNoSelect)
             removeNoSelect();
     });
@@ -1474,8 +1658,22 @@ const Slider = forwardRef((_a, ref) => {
                 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: {
+                const v = handleValue(event);
+                if (!readonly)
+                    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(v !== null && v !== void 0 ? v : value);
+                onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+            }, onKeyDown: (event) => {
+                handleKeyDown(event);
+                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+            }, onFocus: (event) => {
+                var _a;
+                (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+            }, onBlur: (event) => {
+                var _a;
+                (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+            } }, props, { children: jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: vertical ? 'row' : 'column',
                     width: !vertical ? '100%' : undefined,
@@ -1494,12 +1692,14 @@ function WheelObserver(props) {
 }
 
 /** @category XYPad */
-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] }));
+function XYPadArea(_a) {
+    var { width = 120, height = 120, color, children, className, style, __thumb } = _a, props = __rest(_a, ["width", "height", "color", "children", "className", "style", "__thumb"]);
+    return (jsxs("div", Object.assign({ className: clsx('tremolo-xy-pad-area', className), style: Object.assign(Object.assign({ '--color': color }, { width: width, height: height }), style) }, props, { children: [children, __thumb] })));
 }
 
 /** @category XYPad */
-const XYPadThumb = forwardRef(({ size, width = 22, height = 22, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css, }, ref) => {
+const XYPadThumb = forwardRef((_a, ref) => {
+    var { size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css } = _a, props = __rest(_a, ["size", "width", "height", "color", "children", "wrapperClassName", "wrapperStyle", "className", "style", "__disabled", "__css"]);
     const wrapperRef = useRef(null);
     useImperativeHandle(ref, () => {
         return {
@@ -1513,11 +1713,11 @@ const XYPadThumb = forwardRef(({ size, width = 22, height = 22, children, wrappe
             },
         };
     }, []);
-    return (jsx("div", { className: clsx('tremolo-xy-pad-thumb-wrapper', wrapperClassName), style: Object.assign(Object.assign({}, __css), wrapperStyle), children: children ? (children) : (
+    return (jsx("div", Object.assign({ className: clsx('tremolo-xy-pad-thumb-wrapper', wrapperClassName), style: Object.assign(Object.assign({}, __css), wrapperStyle) }, props, { 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) })) }));
+            tabIndex: 0, "aria-disabled": __disabled, style: Object.assign(Object.assign({ '--color': color }, { width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height }), style) })) })));
 });
 
 const defaultValueOptions = {
@@ -1532,8 +1732,8 @@ const defaultValueOptions = {
  * @category 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"]);
+    var _b;
+    var { x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children } = _a, props = __rest(_a, ["x", "y", "className", "style", "bodyNoSelect", "disabled", "readonly", "onChange", "onDragStart", "onDragEnd", "onPointerDown", "onKeyDown", "onFocus", "onBlur", "children"]);
     const x = useMemo(() => {
         return Object.assign(Object.assign({}, defaultValueOptions), _x);
     }, [_x]);
@@ -1590,7 +1790,19 @@ const XYPad = forwardRef((_a, ref) => {
         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);
+        return [newX, newY];
     };
+    const updateValueByEvent = useCallback((eventType, target, x) => {
+        let v;
+        if (eventType == 'normalized') {
+            const n = normalizeValue(target.value, target.min, target.max, target.skew);
+            v = rawValue(n + x, target.min, target.max, target.skew);
+        }
+        else {
+            v = target.value + x;
+        }
+        return clamp(stepValue(v, target.step), target.min, target.max);
+    }, []);
     const handleKeyDown = useCallback((event) => {
         if (!onChange || readonly)
             return;
@@ -1606,15 +1818,7 @@ const XYPad = forwardRef((_a, ref) => {
                 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);
+            const newValue = updateValueByEvent(target.keyboard[0], target, delta);
             if (isHorizontal) {
                 onChange(newValue, y.value);
             }
@@ -1622,7 +1826,7 @@ const XYPad = forwardRef((_a, ref) => {
                 onChange(x.value, newValue);
             }
         }
-    }, [x, y, onChange, readonly]);
+    }, [onChange, readonly, x, y, updateValueByEvent]);
     // --- hooks ---
     const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [x, onChange, readonly]);
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
@@ -1637,15 +1841,7 @@ const XYPad = forwardRef((_a, ref) => {
             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);
+        const newValue = updateValueByEvent(target.wheel[0], target, delta);
         if (event.shiftKey) {
             onChange(newValue, y.value);
         }
@@ -1654,12 +1850,15 @@ const XYPad = forwardRef((_a, ref) => {
         }
     }, {
         passive: false,
-    }, [x, y]);
+    }, [x, y, onChange, readonly, updateValueByEvent]);
     useEventListener(globalThis.window, 'mousemove', (event) => {
         handleValue(event);
     });
     useEventListener(globalThis.window, 'mouseup', () => {
+        if (!thumbDragged.current || readonly)
+            return;
         thumbDragged.current = false;
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(x.value, y.value);
         if (bodyNoSelect)
             removeNoSelect();
     });
@@ -1681,13 +1880,41 @@ const XYPad = forwardRef((_a, ref) => {
             wheelRefCallback(div);
             touchMoveRefCallback(div);
         }, 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) => {
+            var _a, _b;
             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: 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: {
+            const v = handleValue(event);
+            if (!readonly)
+                onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart((_a = v === null || v === void 0 ? void 0 : v[0]) !== null && _a !== void 0 ? _a : x.value, (_b = v === null || v === void 0 ? void 0 : v[1]) !== null && _b !== void 0 ? _b : y.value);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+        }, onKeyDown: (event) => {
+            handleKeyDown(event);
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        }, onFocus: (event) => {
+            var _a;
+            (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        }, onBlur: (event) => {
+            var _a;
+            (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        } }, 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, AnimationKnob, BlackKey, DecrementStepper, DragObserver, IncrementStepper, KeyLabel, Knob, NumberInput, Piano, Scale, ScaleOption, Shortcuts, Slider, SliderThumb, SliderTrack, Stepper, WheelObserver, WhiteKey, XYPad, XYPadArea, XYPadThumb, useSliderContext };
+const useAnimationFrame = (callback = () => { }, deps = []) => {
+    const reqIdRef = useRef(-1);
+    const loop = useCallback(() => {
+        reqIdRef.current = requestAnimationFrame(loop);
+        callback();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [callback, ...deps]);
+    useEffect(() => {
+        reqIdRef.current = requestAnimationFrame(loop);
+        return () => cancelAnimationFrame(reqIdRef.current);
+    }, [loop]);
+};
+
+export { AnimationCanvas, AnimationKnob, BlackKey, DecrementStepper, DragObserver, IncrementStepper, KeyLabel, Knob, NumberInput, Piano, SHORTCUTS, Scale, ScaleOption, Slider, SliderThumb, SliderTrack, Stepper, WheelObserver, WhiteKey, XYPad, XYPadArea, XYPadThumb, useAnimationFrame, useDrag, useEventListener, useInterval, useLongPress, useSliderContext };
 //# sourceMappingURL=index.js.map