@tremolo-ui/react 0.1.2 → 0.1.3

package/dist/esm/index.js

@@ -1,2010 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React, { useRef, useCallback, useEffect, useInsertionEffect, useMemo, forwardRef, useImperativeHandle, createContext, useContext, useState, createRef } from 'react';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
-const drawingState = [
-    'strokeStyle',
-    'fillStyle',
-    'globalAlpha',
-    'lineWidth',
-    'lineCap',
-    'lineJoin',
-    'miterLimit',
-    'lineDashOffset',
-    'shadowOffsetX',
-    'shadowOffsetY',
-    'shadowBlur',
-    'shadowColor',
-    'globalCompositeOperation',
-    'font',
-    'textAlign',
-    'textBaseline',
-    'direction',
-    'imageSmoothingEnabled',
-];
-
-/*
-TODO
-AbsoluteSizingProps, RelativeSizingPropsの型付けを強くする
-AbsoluteSizingPropsの場合、width, heightは必須
-RelativeSizingPropsのの場合、relativeSizeは必須、reduceFlickeringはオプショナル
-*/
-function setDprConfig(canvas, context, width, height, dpr) {
-    canvas.width = width * dpr;
-    canvas.height = height * dpr;
-    // Reset current transformation matrix to the identity matrix
-    context.setTransform(1, 0, 0, 1, 0, 0);
-    context.scale(dpr, dpr);
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
-}
-function AnimationCanvas(_a) {
-    var { 
-    // common
-    options, init, draw, 
-    // absolute
-    width = 100, height = 100, 
-    // relative
-    relativeSize, reduceFlickering = true, 
-    // canvas props
-    className, onContextMenu = (event) => event.preventDefault() } = _a, props = __rest(_a, ["options", "init", "draw", "width", "height", "relativeSize", "reduceFlickering", "className", "onContextMenu"]);
-    const canvasRef = useRef(null);
-    const memoCanvasRef = useRef(null);
-    const reqIdRef = useRef(-1);
-    const widthRef = useRef(0);
-    const heightRef = useRef(0);
-    const deltaMemoRef = useRef(-1);
-    const startTimeRef = useRef(-1);
-    const loop = useCallback((context, width, height, count) => {
-        const now = performance.now();
-        const deltaTime = now - deltaMemoRef.current;
-        const elapsedTime = now - startTimeRef.current;
-        deltaMemoRef.current = now;
-        reqIdRef.current = requestAnimationFrame(() => loop(context, width, height, count + 1));
-        draw(context, {
-            width: width.current,
-            height: height.current,
-            count: count + 1,
-            deltaTime,
-            elapsedTime,
-            fps: 1000 / deltaTime,
-        });
-    }, [draw]);
-    useEffect(() => {
-        if (!canvasRef.current)
-            return;
-        const canvas = canvasRef.current;
-        const context = canvas.getContext('2d', options);
-        if (!context)
-            throw new Error('Cannot get canvas context.');
-        const dpr = globalThis.devicePixelRatio;
-        if (relativeSize) {
-            const parent = canvas.parentElement;
-            if (!parent)
-                throw new Error("Canvas doesn't have a parent element.");
-            const memoCanvas = memoCanvasRef.current;
-            const memoContext = memoCanvas === null || memoCanvas === void 0 ? void 0 : memoCanvas.getContext('2d', options);
-            const ro = new ResizeObserver((entries) => {
-                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 = entry.contentRect.width;
-                    const h = entry.contentRect.height;
-                    if (reduceFlickering && memoCanvas && memoContext) {
-                        memoCanvas.width = w * dpr;
-                        memoCanvas.height = h * dpr;
-                        memoContext.scale(1 / dpr, 1 / dpr);
-                        if (canvas.width > 0 && canvas.height > 0) {
-                            memoContext.drawImage(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 &&
-                        memoCanvas &&
-                        memoCanvas.width > 0 &&
-                        memoCanvas.height > 0) {
-                        context.drawImage(memoContext.canvas, 0, 0);
-                    }
-                }
-            });
-            ro.observe(parent);
-            const w = parent.clientWidth;
-            const h = parent.clientHeight;
-            setDprConfig(canvas, context, w, h, dpr);
-            if (init)
-                init(context, { width: widthRef.current, height: heightRef.current });
-            const now = performance.now();
-            deltaMemoRef.current = now;
-            startTimeRef.current = now;
-            loop(context, widthRef, heightRef, -1);
-            return () => {
-                if (reqIdRef.current)
-                    cancelAnimationFrame(reqIdRef.current);
-                ro.disconnect();
-            };
-        }
-        else {
-            const rect = canvas.getBoundingClientRect();
-            setDprConfig(canvas, context, rect.width, rect.height, dpr);
-            widthRef.current = rect.width;
-            heightRef.current = rect.height;
-            if (init)
-                init(context, { width: widthRef.current, height: heightRef.current });
-            const now = performance.now();
-            deltaMemoRef.current = now;
-            startTimeRef.current = now;
-            loop(context, widthRef, heightRef, -1);
-            return () => {
-                if (reqIdRef.current)
-                    cancelAnimationFrame(reqIdRef.current);
-            };
-        }
-    }, [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, onContextMenu: onContextMenu }, props)), relativeSize && reduceFlickering && (jsx("canvas", { style: { display: 'none' }, ref: memoCanvasRef }))] }));
-}
-
-/**
- * clamp value between min and max
- * @category Math
- */
-function clamp(value, min, max) {
-    return Math.max(min, Math.min(value, max));
-}
-/**
- * Normalize the value from 0 to 1
- * @category Math
- */
-function normalizeValue(rawValue, min, max, skew = 1) {
-    if (min >= max)
-        throw new RangeError('requirements: min < max');
-    const v = clamp((rawValue - min) / (max - min), 0, 1);
-    return Math.pow(v, skew);
-}
-/**
- * Convert normalized values back to raw values.
- * @category Math
- */
-function rawValue(normalizedValue, min, max, skew = 1) {
-    if (min >= max)
-        throw new RangeError('requirements: min < max');
-    const v = skew == 1
-        ? clamp(normalizedValue, 0, 1)
-        : Math.exp(Math.log(clamp(normalizedValue, 0, 1)) / skew);
-    return min + v * (max - min);
-}
-/**
- *
- * @category Math
- */
-function stepValue(value, step) {
-    var _a;
-    if (step <= 0)
-        throw new RangeError('requirements: step > 0');
-    const quotient = Math.floor(value / step);
-    const decimalDigits = (_a = decimalPart$1(step)) === null || _a === void 0 ? void 0 : _a.length;
-    const v = toFixed$1(quotient * step, decimalDigits);
-    const next = toFixed$1((quotient + 1) * step, decimalDigits);
-    return Math.abs(value - v) < Math.abs(value - next) ? v : next;
-}
-/**
- *
- * @category Math
- */
-function toFixed$1(x, fractionDigits) {
-    return Number(x.toFixed(fractionDigits));
-}
-/**
- *
- * @category Math
- */
-function decimalPart$1(x) {
-    return String(x).split('.')[1];
-}
-/**
- *
- * @category Math
- */
-function radian(degree) {
-    return (Math.PI * degree) / 180;
-}
-
-function styleHelper(value, op, influencer) {
-    if (op && influencer) {
-        if (typeof value == 'number') {
-            if (op == '+')
-                return `${value + influencer}px`;
-            if (op == '-')
-                return `${value - influencer}px`;
-            if (op == '*')
-                return `${value * influencer}px`;
-            if (op == '/')
-                return `${value / influencer}px`;
-        }
-        else {
-            return `calc(${value}px ${op} ${influencer})`;
-        }
-    }
-    else {
-        if (typeof value == 'number') {
-            return `${value}px`;
-        }
-        else {
-            return value;
-        }
-    }
-}
-/**
- * @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 noteKeys = [
-    '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),
-    };
-}
-/**
- * Convert noteName to noteNumber
- * @category MIDI
- */
-function noteNumber(noteName) {
-    const { letter, accidental, octave } = parseNoteName(noteName);
-    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 noteKey
- * @category MIDI
- */
-function noteKey(noteNumber) {
-    return noteKeys[mod(noteNumber, 12)];
-}
-/**
- * @param note noteNumber: 0 ~ 127 or noteName e.g. 'C3'
- * @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);
-}
-/**
- * @param note noteNumber: 0 ~ 127 or noteName e.g. 'C3'
- * @category MIDI
- */
-function isBlackKey(note) {
-    return !isWhiteKey(note);
-}
-
-/**
- * This hook is user-land implementation of the experimental `useEffectEvent` hook.
- * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
- */
-function useCallbackRef(callback, deps = []) {
-    const callbackRef = useRef(() => {
-        throw new Error('Cannot call an event handler while rendering.');
-    });
-    useInsertionEffect(() => {
-        callbackRef.current = callback;
-    });
-    // 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 !== void 0 ? target : document);
-        if (!handler || !node)
-            return;
-        node.addEventListener(event, listener, options);
-        return () => {
-            node.removeEventListener(event, listener, options);
-        };
-    }, [event, target, options, listener, handler]);
-    return () => {
-        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);
-    };
-}
-
-function useRefCallbackEvent(event, handler, options, deps = []) {
-    return useMemo(() => {
-        let cleanup;
-        return (node) => {
-            if (!node) {
-                cleanup === null || cleanup === void 0 ? void 0 : cleanup();
-                return;
-            }
-            node.addEventListener(event, handler, options);
-            cleanup = () => {
-                node.removeEventListener(event, handler, options);
-            };
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-}
-
-/**
- * @returns [refCallback, pointerDownHandler]
- */
-function useDrag({ threshold = 1, onDrag, onDragStart, onDragEnd, }) {
-    const dragOffsetX = useRef(undefined);
-    const dragOffsetY = useRef(undefined);
-    const dragStartX = useRef(0);
-    const dragStartY = useRef(0);
-    const handleDrag = useCallback((event, first = false) => {
-        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;
-        let deltaY = 0;
-        if (first) {
-            dragStartX.current = screenX;
-            dragStartY.current = screenY;
-        }
-        if (dragOffsetX.current) {
-            deltaX = screenX - dragOffsetX.current;
-            dragOffsetX.current = screenX;
-        }
-        if (dragOffsetY.current) {
-            deltaY = screenY - dragOffsetY.current;
-            dragOffsetY.current = screenY;
-        }
-        if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold)
-            return;
-        onDrag(screenX - dragStartX.current, screenY - dragStartY.current, deltaX, deltaY);
-    }, [threshold, onDrag]);
-    const refHandler = useRefCallbackEvent('touchmove', handleDrag, { passive: false }, [onDrag]);
-    const pointerDownHandler = useCallback((event) => {
-        dragOffsetX.current = event.screenX;
-        dragOffsetY.current = event.screenY;
-        handleDrag(event, true);
-        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
-    }, [handleDrag, onDragStart]);
-    useEventListener(globalThis.window, 'mousemove', handleDrag);
-    useEventListener(globalThis.window, 'pointerup', () => {
-        dragOffsetX.current = undefined;
-        dragOffsetY.current = undefined;
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
-    });
-    return [refHandler, pointerDownHandler];
-}
-
-function addNoSelect() {
-    document.body.classList.add('tremolo-no-select');
-}
-function removeNoSelect() {
-    document.body.classList.remove('tremolo-no-select');
-}
-
-/**
- * Animatable rotary knob.
- * @category AnimationKnob
- */
-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) => {
-        if (!onChange)
-            return;
-        const v = rawValue(valueRef.current - y / 100, min, max, skew);
-        const v2 = clamp(stepValue(v, step), min, max);
-        onChange(v2);
-    }, [max, min, onChange, skew, step]);
-    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 [touchMoveRefCallback, pointerDownHandler] = useDrag({
-        onDrag: onDrag,
-        onDragStart: () => {
-            valueRef.current = normalizeValue(value, min, max, skew);
-            if (bodyNoSelect)
-                addNoSelect();
-        },
-        onDragEnd: () => {
-            if (bodyNoSelect)
-                removeNoSelect();
-        },
-    });
-    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]);
-    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 }, 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 cx = width / 2;
-                    const cy = height / 2;
-                    const r = Math.min(cx, cy);
-                    if (r <= 0)
-                        return;
-                    // reset
-                    ctx.clearRect(0, 0, width, height);
-                    ctx.lineCap = 'butt';
-                    // bg
-                    ctx.beginPath();
-                    ctx.fillStyle = bg;
-                    ctx.arc(cx, cy, r - 0.5, 0, 2 * Math.PI);
-                    ctx.fill();
-                    ctx.lineWidth = lineWeight;
-                    // inactive rotary
-                    ctx.beginPath();
-                    ctx.strokeStyle = inactiveColor;
-                    ctx.arc(cx, cy, r - 0.5 - lineWeight / 2, radian(135), radian(45));
-                    ctx.stroke();
-                    // active rotary
-                    ctx.beginPath();
-                    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 - thumbWeight / 2), cy +
-                        Math.sin(radian(135 + 270 * p)) *
-                            (r - 0.5 - thumbWeight / 2));
-                    ctx.strokeStyle = thumb;
-                    ctx.lineWidth = thumbWeight;
-                    ctx.stroke();
-                } })) })));
-});
-
-/** @category DragObserver */
-function DragObserver(props) {
-    const { as: Component = 'div', threshold = 1, children, onDrag, onDragStart, onDragEnd } = props, attributes = __rest(props, ["as", "threshold", "children", "onDrag", "onDragStart", "onDragEnd"]);
-    const [refCallback, pointerDownHandler] = useDrag({
-        threshold: threshold,
-        onDrag: onDrag,
-        onDragStart: onDragStart,
-        onDragEnd: onDragEnd,
-    });
-    return (jsx(Component, Object.assign({ ref: refCallback, onPointerDown: pointerDownHandler }, attributes, { children: children })));
-}
-
-/**
- * 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 thumbLineLength = 35; // %
-    const lineWeight = size * 0.06; // px
-    const p = normalizeValue(value, min, max, skew);
-    const s = normalizeValue(startValue, min, max, skew);
-    // --- internal functions ---
-    const onDrag = useCallback((_x, y) => {
-        if (!onChange || readonly)
-            return;
-        const v = rawValue(valueRef.current - y / 100, min, max, skew);
-        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;
-        const key = event.key;
-        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
-            event.preventDefault();
-            const x = key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
-            onChange(updateValueByEvent(keyboard[0], x));
-        }
-    }, [keyboard, onChange, readonly, updateValueByEvent]);
-    // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] = useDrag({
-        onDrag: onDrag,
-        onDragStart: () => {
-            valueRef.current = normalizeValue(value, min, max, skew);
-            if (bodyNoSelect)
-                addNoSelect();
-        },
-        onDragEnd: () => {
-            if (bodyNoSelect)
-                removeNoSelect();
-        },
-    });
-    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];
-        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;
-    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) => {
-            elmRef.current = div;
-            wheelRefCallback(div);
-            touchMoveRefCallback(div);
-        }, width: size, height: size, tabIndex: 0, role: "slider", "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);
-            }
-            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,
-    React.useCallback(() => selector(api.getState()), [api, selector]),
-    React.useCallback(() => selector(api.getInitialState()), [api, selector])
-  );
-  React.useDebugValue(slice);
-  return slice;
-}
-
-/**
- * @module NumberInput
- */
-function selectUnit(units, value) {
-    let i = 0;
-    for (; i < units.length; i++) {
-        if (Math.abs(units[i][1]) > Math.abs(value))
-            break;
-    }
-    return units[Math.max(0, i - 1)];
-}
-function parseValue(inputString, units, digit) {
-    var _a;
-    const str = inputString.trim();
-    if (!units || typeof units == 'string') {
-        const m = str.match(/-?\d+(\.\d+)?/);
-        let v = Number((_a = m === null || m === void 0 ? void 0 : m[0]) !== null && _a !== void 0 ? _a : '0');
-        v = isNaN(v) ? 0 : v;
-        return {
-            rawValue: v,
-            formatValue: (digit != undefined ? v.toFixed(digit) : v) + (units !== null && units !== void 0 ? units : ''),
-            unit: units !== null && units !== void 0 ? units : '',
-        };
-    }
-    const unitList = units.map(([u, _s]) => u);
-    const scaleList = units.map(([_u, s]) => s);
-    let rawValue = 0;
-    let unit = unitList[0];
-    let formatValue = (digit != undefined ? rawValue.toFixed(digit) : rawValue) + unit;
-    const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
-    if (m) {
-        rawValue = Number(m[1]) || 0;
-        const uIndex = unitList.indexOf(m[3]);
-        rawValue *= uIndex != -1 ? scaleList[uIndex] : 1;
-        const [u, scale] = selectUnit(units, rawValue);
-        const v = rawValue / scale;
-        formatValue = (digit != undefined ? v.toFixed(digit) : v) + u;
-        unit = u;
-    }
-    return {
-        rawValue: rawValue,
-        formatValue: formatValue,
-        unit: unit,
-    };
-}
-
-function safeClamp(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
-    return clamp(value, min, max);
-}
-const createNumberInputStore = (initProps) => {
-    const DEFAULT_PROPS = {
-        value: '',
-        valueAsNumber: 0,
-        min: 0,
-        max: 0,
-        step: 1,
-        readonly: false,
-        keepWithinRange: true,
-        onChange: (_v, _t) => { },
-    };
-    return createStore()((set) => (Object.assign(Object.assign(Object.assign(Object.assign({}, DEFAULT_PROPS), initProps), {
-        value: 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).formatValue,
-        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;
-            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);
-            }
-            const v = parseValue(String(next), state.units, state.digit).formatValue;
-            (_b = state === null || state === void 0 ? void 0 : state.onChange) === null || _b === void 0 ? void 0 : _b.call(state, next, v);
-            return {
-                value: v,
-                valueAsNumber: next,
-            };
-        }), decrement: () => set((state) => {
-            var _a, _b;
-            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);
-            }
-            const v = parseValue(String(next), state.units, state.digit).formatValue;
-            (_b = state === null || state === void 0 ? void 0 : state.onChange) === null || _b === void 0 ? void 0 : _b.call(state, next, v);
-            return {
-                value: v,
-                valueAsNumber: next,
-            };
-        }), change: (value) => set((state) => {
-            if (state.readonly)
-                return {};
-            const v = value !== null && value !== void 0 ? value : '';
-            return {
-                value: v,
-                valueAsNumber: parseValue(v, state.units, state.digit).rawValue,
-            };
-        }) })));
-};
-const NumberInputContext = createContext(null);
-function NumberInputProvider(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const storeRef = useRef(null);
-    if (!storeRef.current) {
-        storeRef.current = createNumberInputStore(props);
-    }
-    useEffect(() => {
-        if (storeRef.current) {
-            const parsed = parseValue(String((props === null || props === void 0 ? void 0 : props.value) || ''), props === null || props === void 0 ? void 0 : props.units, props === null || props === void 0 ? void 0 : props.digit);
-            storeRef.current.setState(Object.assign(Object.assign({}, props), {
-                value: parsed.formatValue,
-                valueAsNumber: parsed.rawValue,
-            }));
-        }
-        else {
-            storeRef.current = createNumberInputStore(props);
-        }
-    }, [props]);
-    return (jsx(NumberInputContext.Provider, { value: storeRef.current, children: children }));
-}
-/** @category NumberInput */
-function useNumberInputContext(selector) {
-    const store = useContext(NumberInputContext);
-    if (!store)
-        throw new Error('Missing NumberInputContext.Provider in the tree');
-    return useStore(store, selector);
-}
-
-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)
-            return false;
-        const v = valueAsNumber;
-        return (min !== null && min !== void 0 ? min : -Infinity) > v || v > (max !== null && max !== void 0 ? max : Infinity);
-    }, [editing, max, min, valueAsNumber]);
-    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;
-            const parsed = parseValue(v, units, digit);
-            if (selectWithFocus == 'all') {
-                event.currentTarget.setSelectionRange(0, v.length);
-            }
-            else if (selectWithFocus == 'number') {
-                event.currentTarget.setSelectionRange(0, parsed.formatValue.length - parsed.unit.length);
-            }
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(parsed.rawValue, parsed.formatValue, event);
-        }, onBlur: (event) => {
-            setEditing(false);
-            // update value
-            let v = parseValue(event.currentTarget.value, units, digit).rawValue;
-            if (clampValueOnBlur) {
-                v = safeClamp(v, min, max);
-            }
-            const parsed = parseValue(String(v), units, digit);
-            change(parsed.formatValue);
-            if (clampValueOnBlur) {
-                onChange === null || onChange === void 0 ? void 0 : onChange(parsed.rawValue, parsed.formatValue);
-            }
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(parsed.rawValue, parsed.formatValue, event);
-        }, onKeyDown: (event) => {
-            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
- */
-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, 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] }) }));
-});
-
-/**
- * @returns [refCallback, pointerDownHandler]
- */
-function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd, }) {
-    const dragged = useRef(false);
-    const normalizedX = useRef(0);
-    const normalizedY = useRef(0);
-    const handleDrag = useCallback((event) => {
-        if (!baseElementRef.current || !dragged.current) {
-            return;
-        }
-        const isTouch = event instanceof TouchEvent;
-        if (isTouch && event.cancelable)
-            event.preventDefault();
-        const { left, top, right, bottom } = baseElementRef.current.getBoundingClientRect();
-        const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
-        const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
-        const nx = normalizeValue(mouseX, left, right);
-        const ny = normalizeValue(mouseY, top, bottom);
-        normalizedX.current = nx;
-        normalizedY.current = ny;
-        onDrag(nx, ny);
-    }, [onDrag, baseElementRef]);
-    const refHandler = useRefCallbackEvent('touchmove', handleDrag, { passive: false }, [onDrag]);
-    const pointerDownHandler = useCallback((event) => {
-        dragged.current = true;
-        handleDrag(event);
-        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(normalizedX.current, normalizedY.current);
-    }, [handleDrag, onDragStart]);
-    useEventListener(globalThis.window, 'pointermove', handleDrag);
-    useEventListener(globalThis.window, 'pointerup', () => {
-        if (!dragged.current)
-            return;
-        dragged.current = false;
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(normalizedX.current, normalizedY.current);
-    });
-    return [refHandler, pointerDownHandler];
-}
-
-const createPianoStore = (initProps) => {
-    // const noteRange = initProps.noteRange || { first: 0, last: 127 }
-    const DEFAULT_PROPS = {
-        noteRange: { first: 0, last: 127 },
-        glissando: true,
-        midiMax: 127,
-        fill: false,
-        label: () => undefined,
-        onPlayNote: () => { },
-        onStopNote: () => { },
-    };
-    return createStore()(() => (Object.assign(Object.assign(Object.assign({}, DEFAULT_PROPS), initProps), { notePosition: initProps.notePosition })));
-};
-const PianoContext = createContext(null);
-function PianoProvider(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const storeRef = useRef(null);
-    if (!storeRef.current) {
-        storeRef.current = createPianoStore(props);
-    }
-    useEffect(() => {
-        if (storeRef.current) {
-            storeRef.current.setState(props);
-        }
-        else {
-            storeRef.current = createPianoStore(props);
-        }
-    }, [props]);
-    return (jsx(PianoContext.Provider, { value: storeRef.current, children: children }));
-}
-/** @category Piano */
-function usePianoContext(selector) {
-    const store = useContext(PianoContext);
-    if (!store)
-        throw new Error('Missing PianoContext.Provider in the tree');
-    return useStore(store, selector);
-}
-
-/** @category Piano */
-function KeyLabel(_a) {
-    var { label, className, wrapperClassName, wrapperStyle, __note, __label } = _a, props = __rest(_a, ["label", "className", "wrapperClassName", "wrapperStyle", "__note", "__label"]);
-    const noteRange = usePianoContext((s) => s.noteRange);
-    const noteRangeArray = getNoteRangeArray(noteRange);
-    const index = noteRangeArray.indexOf(__note);
-    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 })) })));
-}
-
-/** @category Piano */
-const defaultWhiteKeyWidth = 40;
-/** @category Piano */
-const defaultBlackKeyWidth = 26;
-const KeyImpl = forwardRef((_a, ref) => {
-    var { keyType, noteNumber, width, height, bg, color, activeBg, activeColor, className, style, children, __width } = _a, props = __rest(_a, ["keyType", "noteNumber", "width", "height", "bg", "color", "activeBg", "activeColor", "className", "style", "children", "__width"]);
-    const [played, setPlayed] = useState(false);
-    const midiMax = usePianoContext((s) => s.midiMax);
-    const fill = usePianoContext((s) => s.fill);
-    // const glissando = usePianoContext(s => s.glissando)
-    const onPlayNote = usePianoContext((s) => s.onPlayNote);
-    const onStopNote = usePianoContext((s) => s.onStopNote);
-    const label = usePianoContext((s) => s.label);
-    const notePosition = usePianoContext((s) => s.notePosition);
-    const position = notePosition(noteNumber);
-    const disabled = noteNumber > midiMax;
-    const colors = {
-        '--bg': bg,
-        '--color': color,
-        '--active-bg': activeBg,
-        '--active-color': activeColor,
-    };
-    useImperativeHandle(ref, () => {
-        return {
-            play() {
-                if (disabled)
-                    return;
-                setPlayed(true);
-                if (onPlayNote)
-                    onPlayNote(noteNumber);
-            },
-            stop() {
-                setPlayed(false);
-                if (onStopNote)
-                    onStopNote(noteNumber);
-            },
-            played() {
-                return played;
-            },
-        };
-    }, [disabled, noteNumber, onPlayNote, onStopNote, 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-${keyType}-key`, className), "aria-disabled": disabled, "data-active": played, style: Object.assign(Object.assign(Object.assign({}, colors), { left: position, width: fill ? __width : width, height: height }), style) }, props, { children: jsx(KeyLabel, Object.assign({ label: label, __note: noteNumber }, keyLabelProps)) })));
-});
-/** @category Piano */
-const WhiteKey = forwardRef((_a, ref) => {
-    var { width = defaultWhiteKeyWidth, height = '100%', onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "onContextMenu"]);
-    return (jsx(KeyImpl, Object.assign({ ref: ref, keyType: "white", width: width, height: height, onContextMenu: onContextMenu }, props)));
-});
-/** @category Piano */
-const BlackKey = forwardRef((_a, ref) => {
-    var { width = defaultBlackKeyWidth, height = '60%', onContextMenu = (e) => e.preventDefault() } = _a, props = __rest(_a, ["width", "height", "onContextMenu"]);
-    return (jsx(KeyImpl, Object.assign({ ref: ref, keyType: "black", width: width, height: height, onContextMenu: onContextMenu }, props)));
-});
-
-/** @category Piano */
-const SHORTCUTS = {
-    HOME_ROW: {
-        keys: [
-            'a',
-            'w',
-            's',
-            'e',
-            'd',
-            'f',
-            't',
-            'g',
-            'y',
-            'h',
-            'u',
-            'j',
-            'k',
-            'o',
-            'l',
-            'p',
-            ';',
-        ],
-    },
-};
-
-/**
- * Piano component
- *
- * TODO:
- * - add scale highlight
- */
-/** @category Piano */
-function getNoteRangeArray(noteRange) {
-    return Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
-}
-const blackPerWhiteWidth = defaultBlackKeyWidth / defaultWhiteKeyWidth; // 0.65
-/**
- * Customizable piano component.
- * @category Piano
- */
-function Piano(_a) {
-    var { noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? '100%' : 160, whiteNoteWidth: _whiteNoteWidth = defaultWhiteKeyWidth, style, className, onPlayNote, onStopNote, label, children, onPointerDown } = _a, props = __rest(_a, ["noteRange", "glissando", "midiMax", "keyboardShortcuts", "fill", "height", "whiteNoteWidth", "style", "className", "onPlayNote", "onStopNote", "label", "children", "onPointerDown"]);
-    // -- state and ref ---
-    const [whiteNoteWidth, setWhiteNoteWidth] = useState(_whiteNoteWidth);
-    const keyRefs = useRef([]);
-    for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
-        keyRefs.current[i] = createRef();
-    }
-    const pianoRef = useRef(null);
-    const hitKeyIndex = useRef(-1);
-    // --- interpret props ---
-    const noteRangeArray = getNoteRangeArray(noteRange);
-    const whiteNotes = noteRangeArray.filter((v) => isWhiteKey(v));
-    const blackNotes = noteRangeArray.filter((v) => isBlackKey(v));
-    const whiteNoteCount = whiteNotes.length;
-    const padding = 1;
-    const staticWidth = (whiteNoteWidth + padding) * whiteNoteCount;
-    // const blackNoteShiftPercent = 0.3
-    const childrenWithProps = useMemo(() => {
-        return (children &&
-            React.Children.map(children, (child, index) => {
-                if (React.isValidElement(child)) {
-                    const __width = child.type == WhiteKey ? whiteNoteWidth : whiteNoteWidth * 0.65;
-                    const props = { ref: keyRefs.current[index], __width };
-                    return React.cloneElement(child, props);
-                }
-                return child;
-            }));
-    }, [children, whiteNoteWidth]);
-    // --- internal functions ---
-    const notePosition = useCallback((note) => {
-        const pitchPositions = {
-            C: 0,
-            'C#': 1,
-            D: 1,
-            'D#': 2,
-            E: 2,
-            F: 3,
-            'F#': 4,
-            G: 4,
-            'G#': 5,
-            A: 5,
-            'A#': 6,
-            B: 6,
-        };
-        const blackNoteWidth = whiteNoteWidth * blackPerWhiteWidth;
-        const padding = 1;
-        const targetNoteKey = noteKey(note);
-        const firstNoteKey = noteKey(noteRange.first);
-        const octave = Math.floor((note - noteRange.first) / 12);
-        const octaveOffset = noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0;
-        const w = whiteNoteWidth + padding;
-        const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
-        const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0;
-        return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset;
-    }, [noteRange.first, whiteNoteWidth]);
-    const getHitKeyIndex = useCallback((x, y) => {
-        if (!pianoRef.current)
-            return -1;
-        const containerHeight = pianoRef.current.clientHeight;
-        const notes = [...blackNotes, ...whiteNotes];
-        for (let i = 0; i < notes.length; i++) {
-            const note = notes[i];
-            const pos = notePosition(note);
-            const w = isWhiteKey(note)
-                ? whiteNoteWidth
-                : whiteNoteWidth * blackPerWhiteWidth;
-            const h = isWhiteKey(note) ? containerHeight : containerHeight * 0.6;
-            if (pos <= x && x < pos + w && 0 <= y && y < h) {
-                return note;
-            }
-        }
-        return -1;
-    }, [blackNotes, notePosition, whiteNoteWidth, whiteNotes]);
-    // TODO: 単一のポインターに対しては、useDragで対応可能だが、
-    // マルチタッチに対しては、TouchEventを使う必要がありそう
-    // 取り敢えず、シングルタッチだけ対応
-    const onDrag = useCallback((perX, perY) => {
-        var _a, _b, _c, _d;
-        if (!pianoRef.current)
-            return;
-        const x = perX * staticWidth;
-        const y = perY * pianoRef.current.clientHeight;
-        const note = getHitKeyIndex(x, y);
-        const index = noteRangeArray.indexOf(note);
-        if (index == -1)
-            return;
-        if (hitKeyIndex.current != index) {
-            (_b = (_a = keyRefs.current[hitKeyIndex.current]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.stop();
-            (_d = (_c = keyRefs.current[index]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.play();
-            hitKeyIndex.current = index;
-        }
-    }, [getHitKeyIndex, noteRangeArray, staticWidth]);
-    const onDragEnd = useCallback(() => {
-        var _a, _b, _c, _d;
-        if ((_b = (_a = keyRefs.current[hitKeyIndex.current]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.played()) {
-            (_d = (_c = keyRefs.current[hitKeyIndex.current]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.stop();
-        }
-        hitKeyIndex.current = -1;
-    }, [keyRefs]);
-    // --- 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 - padding);
-            });
-            resizeObserver.observe(parent);
-            return () => {
-                resizeObserver.unobserve(parent);
-            };
-        }
-        else {
-            setWhiteNoteWidth(_whiteNoteWidth);
-        }
-    }, [fill, _whiteNoteWidth, whiteNoteCount]);
-    const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
-        baseElementRef: pianoRef,
-        onDrag: onDrag,
-        onDragEnd: onDragEnd,
-    });
-    useEventListener(globalThis.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(globalThis.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(PianoProvider, { notePosition: notePosition, noteRange: noteRange, glissando: glissando, midiMax: midiMax, fill: fill, onPlayNote: onPlayNote, onStopNote: onStopNote, label: label, children: jsx("div", Object.assign({ ref: (div) => {
-                pianoRef.current = div;
-                touchMoveRefCallback(div);
-            }, className: clsx('tremolo-piano', className), style: Object.assign({ width: fill ? '100%' : staticWidth, height: height }, style), onPointerDown: (event) => {
-                pointerDownHandler(event);
-                onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
-            } }, props, { children: childrenWithProps ||
-                noteRangeArray.map((note, index) => isWhiteKey(note) ? (jsx(WhiteKey, { ref: keyRefs.current[index], noteNumber: note, __width: whiteNoteWidth }, note)) : (jsx(BlackKey, { ref: keyRefs.current[index], noteNumber: note, __width: whiteNoteWidth * blackPerWhiteWidth }, note))) })) }));
-}
-
-const createSliderStore = (initProps) => {
-    const DEFAULT_PROPS = {
-        min: 0,
-        max: 0,
-        step: 0,
-        skew: 0,
-        vertical: false,
-        reverse: false,
-        disabled: false,
-        readonly: false,
-    };
-    return createStore()(() => (Object.assign(Object.assign({}, DEFAULT_PROPS), initProps)));
-};
-const SliderContext = createContext(null);
-function SliderProvider(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const storeRef = useRef(null);
-    if (!storeRef.current) {
-        storeRef.current = createSliderStore(props);
-    }
-    useEffect(() => {
-        if (storeRef.current) {
-            storeRef.current.setState(props);
-        }
-        else {
-            storeRef.current = createSliderStore(props);
-        }
-    }, [props]);
-    return (jsx(SliderContext.Provider, { value: storeRef.current, children: children }));
-}
-/** @category Slider */
-function useSliderContext(selector) {
-    const store = useContext(SliderContext);
-    if (!store)
-        throw new Error('Missing SliderContext.Provider in the tree');
-    return useStore(store, selector);
-}
-
-/**
- * clamp value between min and max
- * @category Math
- */
-/**
- *
- * @category Math
- */
-function toFixed(x, fractionDigits) {
-    return Number(x.toFixed(fractionDigits));
-}
-/**
- *
- * @category Math
- */
-function decimalPart(x) {
-    return String(x).split('.')[1];
-}
-
-/**
- * @module Slider
- */
-function generateOptionsList(options, min, max, step) {
-    var _a;
-    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] });
-    }
-    return optionsList;
-}
-
-/** @category Slider */
-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 = useSliderContext((s) => s.min);
-    const max = useSliderContext((s) => s.max);
-    const skew = useSliderContext((s) => s.skew);
-    const vertical = useSliderContext((s) => s.vertical);
-    const reverse = useSliderContext((s) => s.reverse);
-    const calcPercent = useCallback((rawValue) => {
-        return toFixed$1(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 }))] })));
-}
-
-/** @category Slider */
-function Scale(_a) {
-    var { gap = 6, options, children, className, style } = _a, props = __rest(_a, ["gap", "options", "children", "className", "style"]);
-    const min = useSliderContext((s) => s.min);
-    const max = useSliderContext((s) => s.max);
-    const step = useSliderContext((s) => s.step);
-    const vertical = useSliderContext((s) => s.vertical);
-    const reverse = useSliderContext((s) => s.reverse);
-    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 })));
-}
-
-/** @category Slider */
-const defaultThumbSize = 22;
-/** @category Slider */
-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);
-    const readonly = useSliderContext((s) => s.readonly);
-    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: "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, "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(_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);
-    const direction = vertical ? 'bottom' : 'right';
-    const colors = {
-        '--active': active,
-        '--inactive': inactive,
-    };
-    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) }, props, { children: [children, __thumb] })));
-}
-
-/**
- * Customizable slider
- * @category Slider
- */
-const Slider = forwardRef((_a, ref) => {
-    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);
-    // --- interpret props ---
-    const p = toFixed$1(normalizeValue(value, min, max, skew) * 100);
-    const rev = toFixed$1(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)) {
-                if (child.type == SliderThumb) {
-                    thumbProps = child.props;
-                }
-                else if (child.type == SliderTrack) {
-                    trackProps = child.props;
-                }
-                else if (child.type == Scale) {
-                    scaleComponent = child;
-                }
-                else {
-                    throw new Error('only <SliderThumb> or <SliderTrack>');
-                }
-            }
-            else {
-                throw new Error('children is an invalid element.');
-            }
-        });
-    }
-    // --- internal functions ---
-    const onDrag = useCallback((nx, ny) => {
-        if (!onChange || readonly)
-            return;
-        const n = vertical ? ny : nx;
-        const v = rawValue(displayReversed ? 1 - n : n, min, max, skew);
-        const v2 = clamp(stepValue(v, step), min, max);
-        onChange(v2);
-    }, [displayReversed, max, min, onChange, readonly, skew, step, vertical]);
-    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;
-        const key = event.key;
-        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
-            event.preventDefault();
-            let x = key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
-            if (reverse)
-                x *= -1;
-            onChange(updateValueByEvent(keyboard[0], x));
-        }
-    }, [keyboard, onChange, readonly, reverse, updateValueByEvent]);
-    // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
-        baseElementRef: trackElementRef,
-        onDrag: onDrag,
-        onDragStart: (nx, ny) => {
-            var _a;
-            if (readonly)
-                return;
-            if (bodyNoSelect)
-                addNoSelect();
-            (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(clamp(stepValue(rawValue(vertical ? ny : nx, min, max, skew), step), min, max));
-        },
-        onDragEnd: (nx, ny) => {
-            if (readonly)
-                return;
-            if (bodyNoSelect)
-                removeNoSelect();
-            onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(clamp(stepValue(rawValue(vertical ? ny : nx, min, max, skew), step), min, max));
-        },
-    });
-    const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
-        if (!wheel || !onChange || readonly)
-            return;
-        event.preventDefault();
-        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;
-        onChange(updateValueByEvent(wheel[0], x));
-    }, {
-        passive: false,
-    }, [wheel, vertical, readonly, onChange, updateValueByEvent]);
-    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 === void 0 ? void 0 : _a.blur();
-            },
-        };
-    }, []);
-    return (jsx(SliderProvider, { min: min, max: max, step: step, skew: skew, vertical: vertical, reverse: reverse, disabled: disabled, readonly: readonly, 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) => {
-                pointerDownHandler(event);
-                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,
-                    height: vertical ? '100%' : undefined,
-                }, 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] }) })) }));
-});
-
-/** @category WheelObserver */
-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 })));
-}
-
-/** @category XYPad */
-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((_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 {
-            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", 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(Object.assign({ '--color': color }, { 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
- * @category XYPad
- */
-const XYPad = forwardRef((_a, ref) => {
-    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]);
-    const y = useMemo(() => {
-        return Object.assign(Object.assign({}, defaultValueOptions), _y);
-    }, [_y]);
-    // -- state and ref ---
-    const areaElementRef = useRef(null);
-    const thumbRef = useRef(null);
-    // --- 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$1((x.reverse ? 1 - nx : nx) * 100);
-    const percentY = toFixed$1((y.reverse ? 1 - ny : ny) * 100);
-    let areaProps = {};
-    let 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 onDrag = useCallback((nx, ny) => {
-        if (!onChange || readonly)
-            return;
-        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);
-    }, [
-        onChange,
-        readonly,
-        x.max,
-        x.min,
-        x.reverse,
-        x.skew,
-        x.step,
-        y.max,
-        y.min,
-        y.reverse,
-        y.skew,
-        y.step,
-    ]);
-    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;
-        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;
-            const newValue = updateValueByEvent(target.keyboard[0], target, delta);
-            if (isHorizontal) {
-                onChange(newValue, y.value);
-            }
-            else {
-                onChange(x.value, newValue);
-            }
-        }
-    }, [onChange, readonly, x, y, updateValueByEvent]);
-    // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
-        baseElementRef: areaElementRef,
-        onDrag: onDrag,
-        onDragStart: (nx, ny) => {
-            var _a;
-            if (readonly)
-                return;
-            if (bodyNoSelect)
-                addNoSelect();
-            (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            const valueX = clamp(stepValue(rawValue(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
-            const valueY = clamp(stepValue(rawValue(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
-            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(valueX, valueY);
-        },
-        onDragEnd: (nx, ny) => {
-            if (readonly)
-                return;
-            if (bodyNoSelect)
-                removeNoSelect();
-            const valueX = clamp(stepValue(rawValue(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
-            const valueY = clamp(stepValue(rawValue(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
-            onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(valueX, valueY);
-        },
-    });
-    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;
-        const newValue = updateValueByEvent(target.wheel[0], target, delta);
-        if (event.shiftKey) {
-            onChange(newValue, y.value);
-        }
-        else {
-            onChange(x.value, newValue);
-        }
-    }, {
-        passive: false,
-    }, [x, y, onChange, readonly, updateValueByEvent]);
-    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 === void 0 ? void 0 : _a.blur();
-            },
-        };
-    }, []);
-    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, "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) => {
-            pointerDownHandler(event);
-            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)) }) })));
-});
-
-function 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, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useSliderContext };
-//# sourceMappingURL=index.js.map