@tremolo-ui/react 0.0.5 → 0.0.7

package/dist/cjs/index.js

@@ -96,7 +96,7 @@ function AnimationCanvas(_a) {
             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 memoContext = memoCanvas === null || memoCanvas === undefined ? undefined : memoCanvas.getContext('2d', options);
             const resizeObserver = new ResizeObserver(() => {
                 // console.log('resize')
                 // Prevents loss of some context when the canvas is resized
@@ -152,15 +152,27 @@ function AnimationCanvas(_a) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("canvas", Object.assign({ className: clsx('tremolo-animation-canvas', className), width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, css: react.css(style), ref: canvasRef }, props)), relativeSize && reduceFlickering && (jsxRuntime.jsx("canvas", { style: { display: 'none' }, width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, 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');
@@ -169,22 +181,38 @@ function rawValue(normalizedValue, min, max, skew = 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 decimalDigits = (_a = decimalPart$1(step)) === null || _a === undefined ? undefined : _a.length;
     const v = toFixed$2(quotient * step, decimalDigits);
     const next = toFixed$2((quotient + 1) * step, decimalDigits);
     return Math.abs(value - v) < Math.abs(value - next) ? v : next;
 }
+/**
+ *
+ * @category Math
+ */
 function toFixed$2(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;
 }
@@ -214,6 +242,62 @@ function styleHelper(value, op, influencer) {
         }
     }
 }
+/**
+ * @category Utility
+ */
+function mod(n, m) {
+    return (((n % m) + m) % m);
+}
+/**
+ * @category MIDI
+ */
+const noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+/**
+ * @category MIDI
+ */
+function parseNoteName(noteName) {
+    const m = noteName.match(/^([a-g])(#{0,2}|b{0,2})(-?\d+)$/i);
+    if (!m)
+        throw new Error('Invalid note name');
+    const [, letter, accidental, octave] = m;
+    return {
+        letter: letter.toLocaleUpperCase(),
+        accidental: accidental,
+        octave: Number(octave),
+    };
+}
+/**
+ *
+ * @category MIDI
+ */
+function noteNumber(noteName) {
+    const { letter, accidental, octave, } = parseNoteName(noteName);
+    const noteIndex = noteNames.indexOf(letter.toLocaleUpperCase());
+    const accidentalValue = (accidental[0] == 'b' ? -1 : 1) * accidental.length;
+    return noteIndex + 12 * (Number(octave) + 1) + accidentalValue;
+}
+/**
+ *
+ * @category MIDI
+ */
+function noteName(noteNumber) {
+    const noteIndex = mod(noteNumber, 12);
+    const octave = Math.floor(noteNumber / 12) - 1;
+    return noteNames[noteIndex] + octave;
+}
+/**
+ * @category MIDI
+ */
+function isWhiteKey(note) {
+    const n = typeof note == 'string' ? noteNumber(note) : note;
+    return (mod(n, 12) == 0 ||
+        mod(n, 12) == 2 ||
+        mod(n, 12) == 4 ||
+        mod(n, 12) == 5 ||
+        mod(n, 12) == 7 ||
+        mod(n, 12) == 9 ||
+        mod(n, 12) == 11);
+}
 
 /**
  * This hook is user-land implementation of the experimental `useEffectEvent` hook.
@@ -226,13 +310,13 @@ function useCallbackRef(callback, deps = []) {
     React.useInsertionEffect(() => {
         callbackRef.current = callback;
     });
-    return React.useCallback((...args) => { var _a; return (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, ...args); }, deps);
+    return React.useCallback((...args) => { var _a; return (_a = callbackRef.current) === null || _a === undefined ? undefined : _a.call(callbackRef, ...args); }, deps);
 }
 
 function useEventListener(target, event, handler, options) {
     const listener = useCallbackRef(handler);
     React.useEffect(() => {
-        const node = typeof target === 'function' ? target() : (target !== null && target !== void 0 ? target : document);
+        const node = typeof target === 'function' ? target() : (target !== null && target !== undefined ? target : document);
         if (!handler || !node)
             return;
         node.addEventListener(event, listener, options);
@@ -241,8 +325,8 @@ function useEventListener(target, event, handler, 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);
+        const node = typeof target === 'function' ? target() : (target !== null && target !== undefined ? target : document);
+        node === null || node === undefined ? undefined : node.removeEventListener(event, listener, options);
     };
 }
 
@@ -251,7 +335,7 @@ function useRefCallbackEvent(event, handler, options, deps = []) {
         let cleanup;
         return (node) => {
             if (!node) {
-                cleanup === null || cleanup === void 0 ? void 0 : cleanup();
+                cleanup === null || cleanup === undefined ? undefined : cleanup();
                 return;
             }
             node.addEventListener(event, handler, options);
@@ -262,6 +346,13 @@ function useRefCallbackEvent(event, handler, options, deps = []) {
     }, deps);
 }
 
+function addNoSelect() {
+    document.body.classList.add('tremolo-no-select');
+}
+function removeNoSelect() {
+    document.body.classList.remove('tremolo-no-select');
+}
+
 const defaultOptions = {
     active: '#7998ec',
     inactive: '#eee',
@@ -274,14 +365,14 @@ const defaultOptions = {
  * simple rotary Knob.
  */
 function Knob(_a) {
-    var { value, min, max, defaultValue = min, startValue = min, step = 1, skew = 1, size, width = 50, height = 50, options = defaultOptions, draw, bodyNoSelect = true, enableWheel, enableDoubleClickDefault = true, style, className, onChange, _active, _focus, _hover } = _a, props = __rest(_a, ["value", "min", "max", "defaultValue", "startValue", "step", "skew", "size", "width", "height", "options", "draw", "bodyNoSelect", "enableWheel", "enableDoubleClickDefault", "style", "className", "onChange", "_active", "_focus", "_hover"]);
+    var { value, min, max, defaultValue = min, startValue = min, step = 1, skew = 1, size, width = 50, height = 50, options = defaultOptions, draw, bodyNoSelect = true, wheel, enableDoubleClickDefault = true, style, className, onChange, _active, _focus, _hover } = _a, props = __rest(_a, ["value", "min", "max", "defaultValue", "startValue", "step", "skew", "size", "width", "height", "options", "draw", "bodyNoSelect", "wheel", "enableDoubleClickDefault", "style", "className", "onChange", "_active", "_focus", "_hover"]);
     // -- state and ref ---
     // const [privateValue, setPrivateValue] = useState(value);
     const dragOffsetY = React.useRef(undefined);
     // --- interpret props ---
     const opts = Object.assign(Object.assign({}, defaultOptions), options);
     // const percent = normalizeValue(value, min, max, skew)
-    const isRelativeSize = typeof (size !== null && size !== void 0 ? size : width) == 'string';
+    const isRelativeSize = typeof (size !== null && size !== undefined ? size : width) == 'string';
     const adaptSize = (size) => {
         if (typeof size == 'string') {
             return Number(size.slice(0, -1));
@@ -296,7 +387,7 @@ function Knob(_a) {
             event.preventDefault();
         if (dragOffsetY.current) {
             if (bodyNoSelect)
-                document.body.classList.add('no-select');
+                addNoSelect();
             const screenY = isTouch ? event.touches[0].screenY : event.screenY;
             const delta = dragOffsetY.current - screenY;
             dragOffsetY.current = screenY;
@@ -309,12 +400,12 @@ function Knob(_a) {
     };
     // --- hooks ---
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
-        if (!enableWheel)
+        if (!wheel)
             return;
         event.preventDefault();
-        const x = event.deltaY > 0 ? -enableWheel[1] : enableWheel[1];
+        const x = event.deltaY > 0 ? -wheel[1] : wheel[1];
         let v;
-        if (enableWheel[0] == 'normalized') {
+        if (wheel[0] == 'normalized') {
             const n = normalizeValue(value, min, max, skew);
             v = rawValue(n + x, min, max, skew);
         }
@@ -323,18 +414,18 @@ function Knob(_a) {
         }
         if (onChange)
             onChange(clamp(stepValue(v, step), min, max));
-    }, { passive: false }, [enableWheel, value, min, max, skew, step, onChange]);
+    }, { passive: false }, [wheel, value, min, max, skew, step, onChange]);
     const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleEvent, { passive: false }, [value, min, max, skew, step, onChange, bodyNoSelect]);
     useEventListener(window, 'mousemove', handleEvent);
     useEventListener(window, 'pointerup', () => {
         dragOffsetY.current = undefined;
         if (bodyNoSelect)
-            document.body.classList.remove('no-select');
+            removeNoSelect();
     });
     return (jsxRuntime.jsxs("div", Object.assign({ className: clsx('tremolo-knob', className), ref: (div) => {
             wheelRefCallback(div);
             touchMoveRefCallback(div);
-        }, role: "slider", tabIndex: 0, "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, css: react.css(Object.assign(Object.assign({ display: 'inline-block', width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height, cursor: 'pointer' }, style), { ':active': Object.assign({}, _active), ':focus': Object.assign({}, _focus), ':hover': Object.assign({}, _hover) })), onPointerDown: (event) => {
+        }, role: "slider", tabIndex: 0, "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, css: react.css(Object.assign(Object.assign({ display: 'inline-block', width: size !== null && size !== undefined ? size : width, height: size !== null && size !== undefined ? size : height, cursor: 'pointer' }, style), { ':active': Object.assign({}, _active), ':focus': Object.assign({}, _focus), ':hover': Object.assign({}, _hover) })), onPointerDown: (event) => {
             dragOffsetY.current = event.screenY;
             handleEvent(event);
         }, onDoubleClick: () => {
@@ -345,7 +436,7 @@ function Knob(_a) {
                     '.no-select': {
                         userSelect: 'none',
                     },
-                } }), jsxRuntime.jsx(AnimationCanvas, { width: adaptSize(size !== null && size !== void 0 ? size : width), height: adaptSize(size !== null && size !== void 0 ? size : height), relativeSize: isRelativeSize, 
+                } }), jsxRuntime.jsx(AnimationCanvas, { width: adaptSize(size !== null && size !== undefined ? size : width), height: adaptSize(size !== null && size !== undefined ? size : height), relativeSize: isRelativeSize, 
                 // TODO
                 // reduceFlickering={false}
                 draw: draw ? draw : (ctx, width, height) => {
@@ -390,10 +481,21 @@ function Knob(_a) {
                 } })] })));
 }
 
+/**
+ * clamp value between min and max
+ * @category Math
+ */
+/**
+ *
+ * @category Math
+ */
 function toFixed$1(x, fractionDigits) {
     return Number(x.toFixed(fractionDigits));
 }
 
+/**
+ * @module NumberInput
+*/
 function selectUnit(units, value) {
     if (typeof units == 'string')
         return [units, 1];
@@ -456,14 +558,14 @@ function parseValue(inputString, units, digit, defaultValue = 0) {
  * Input with some useful functions for entering numerical values.
  */
 function NumberInput(_a) {
-    var { value, min, max, step, defaultValue = min, units, disabled = false, placeholder, readOnly, tabIndex, strict = false, digit, selectWithFocus = 'none', blurWithEnter = true, className, style, onChange, onFocus, onBlur } = _a, pseudo = __rest(_a, ["value", "min", "max", "step", "defaultValue", "units", "disabled", "placeholder", "readOnly", "tabIndex", "strict", "digit", "selectWithFocus", "blurWithEnter", "className", "style", "onChange", "onFocus", "onBlur"]);
+    var { value, min, max, step, defaultValue = min, units, disabled = false, placeholder, readOnly, tabIndex, typeNumber = false, digit, selectWithFocus = 'none', blurWithEnter = true, className, style, onChange, onFocus, onBlur } = _a, props = __rest(_a, ["value", "min", "max", "step", "defaultValue", "units", "disabled", "placeholder", "readOnly", "tabIndex", "typeNumber", "digit", "selectWithFocus", "blurWithEnter", "className", "style", "onChange", "onFocus", "onBlur"]);
     const [showValue, setShowValue] = React.useState(parseValue(String(value), units, digit, defaultValue).formatValue);
-    const calculatedStrict = units ? false : strict;
-    const { _active, _focus, _hover } = pseudo;
-    return (jsxRuntime.jsx("input", { className: clsx('tremolo-number-input', className), value: showValue, min: min, max: max, step: step, type: calculatedStrict ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, css: react.css(Object.assign(Object.assign({ display: 'inline-block', font: 'inherit', margin: 0, paddingTop: 6, paddingBottom: 6, paddingLeft: 10, paddingRight: 10, borderStyle: 'solid', borderWidth: 1, borderColor: '#bbb', borderRadius: 4, outline: 0, transition: 'all 0.1s linear', appearance: 'textfield', '&:hover': Object.assign({ borderColor: 'var(--tremolo-theme-color)' }, _hover), '&:focus': Object.assign({ borderColor: 'var(--tremolo-theme-color)', boxShadow: '0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1)' }, _focus) }, (_active && { '&:active': Object.assign({}, _active) })), style)), onChange: (event) => {
+    const calculatedTypeNumber = units ? false : typeNumber;
+    const { _active, _focus, _hover } = props, rest = __rest(props, ["_active", "_focus", "_hover"]);
+    return (jsxRuntime.jsx("input", Object.assign({ className: clsx('tremolo-number-input', className), value: showValue, min: min, max: max, step: step, type: calculatedTypeNumber ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, css: react.css(Object.assign(Object.assign({ display: 'inline-block', font: 'inherit', margin: 0, paddingTop: 6, paddingBottom: 6, paddingLeft: 10, paddingRight: 10, borderStyle: 'solid', borderWidth: 1, borderColor: '#bbb', borderRadius: 4, outline: 0, transition: 'all 0.1s linear', appearance: 'textfield', '&:hover': Object.assign({ borderColor: 'var(--tremolo-theme-color)' }, _hover), '&:focus': Object.assign({ borderColor: 'var(--tremolo-theme-color)', boxShadow: '0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1)' }, _focus) }, (_active && { '&:active': Object.assign({}, _active) })), style)), onChange: (event) => {
             const v = event.currentTarget.value;
             setShowValue(v);
-            const newValue = clamp(parseValue(v, units, digit, defaultValue).rawValue, min !== null && min !== void 0 ? min : -Infinity, max !== null && max !== void 0 ? max : Infinity);
+            const newValue = clamp(parseValue(v, units, digit, defaultValue).rawValue, min !== null && min !== undefined ? min : -Infinity, max !== null && max !== undefined ? max : Infinity);
             if (onChange)
                 onChange(newValue, event);
         }, onFocus: (event) => {
@@ -488,16 +590,286 @@ function NumberInput(_a) {
             if (blurWithEnter && event.key == 'Enter') {
                 event.currentTarget.blur();
             }
-        } }));
+        } }, rest)));
+}
+
+function KeyLabel({ label, className, style, wrapperStyle, __note, __index, __label, }) {
+    const content = label ? label(__note, __index) : __label && __label(__note, __index);
+    return ((content != undefined || content != null) &&
+        jsxRuntime.jsx("div", { className: 'tremolo-piano-key-label-wrapper', css: react.css(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'end', height: '100%' }, wrapperStyle)), children: jsxRuntime.jsx("div", { className: clsx('tremolo-piano-key-label', className), css: react.css(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '0.6rem', height: 10, marginBottom: 10, padding: 4, borderRadius: 4, borderStyle: 'solid', borderWidth: 1, borderColor: '#888', aspectRatio: 1, maxWidth: 'calc(100% - 16px)' }, style)), children: content }) }));
 }
 
+const WhiteKey = React.forwardRef(({ width = 40, height = '100%', bg = 'white', activeBg = '#ccc', style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __playNote, __stopNote, __label, }, ref) => {
+    const [played, setPlayed] = React.useState(false);
+    React.useImperativeHandle(ref, () => {
+        return {
+            play() {
+                if (__disabled)
+                    return;
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            },
+            stop() {
+                setPlayed(false);
+                if (__stopNote)
+                    __stopNote(__note);
+            },
+            played() {
+                return played;
+            }
+        };
+    }, []);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    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 (jsxRuntime.jsx("div", { className: `tremolo-piano-white-key`, "aria-disabled": __disabled, css: react.css(Object.assign({ position: 'absolute', backgroundColor: played ? activeBg : bg, color: 'black', left: __position, width: __fill ? __width : (width !== null && width !== undefined ? width : __width), height: height, border: '1px solid #555', borderRadius: '0 0 8px 8px', cursor: __disabled ? 'not-allowed' : 'pointer', zIndex: 1 }, style)), onPointerDown: () => {
+            if (__disabled)
+                return;
+            setPlayed(true);
+            if (__playNote)
+                __playNote(__note);
+        }, onPointerEnter: () => {
+            if (__disabled)
+                return;
+            if (__glissando) {
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            }
+        }, onPointerUp: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, onPointerLeave: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, children: jsxRuntime.jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) }));
+});
+
+const BlackKey = React.forwardRef(({ width = 40 * 0.65, height = '60%', bg = '#333', activeBg = '#666', style, children, __glissando, __position, __note, __disabled, __index, __fill, __width, __playNote, __stopNote, __label, }, ref) => {
+    const [played, setPlayed] = React.useState(false);
+    React.useImperativeHandle(ref, () => {
+        return {
+            play() {
+                if (__disabled)
+                    return;
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            },
+            stop() {
+                setPlayed(false);
+                if (__stopNote)
+                    __stopNote(__note);
+            },
+            played() {
+                return played;
+            }
+        };
+    }, []);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    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 (jsxRuntime.jsx("div", { className: `tremolo-piano-black-key`, "aria-disabled": __disabled, css: react.css(Object.assign({ position: 'absolute', backgroundColor: played ? activeBg : bg, color: 'white', left: __position, width: __fill ? __width : (width !== null && width !== undefined ? width : __width), height: height, border: '1px solid #555', borderRadius: '0 0 8px 8px', cursor: __disabled ? 'not-allowed' : 'pointer', zIndex: 2 }, style)), onPointerDown: () => {
+            if (__disabled)
+                return;
+            setPlayed(true);
+            if (__playNote)
+                __playNote(__note);
+        }, onPointerEnter: () => {
+            if (__disabled)
+                return;
+            if (__glissando) {
+                setPlayed(true);
+                if (__playNote)
+                    __playNote(__note);
+            }
+        }, onPointerUp: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, onPointerLeave: () => {
+            if (__disabled)
+                return;
+            setPlayed(false);
+            if (__stopNote)
+                __stopNote(__note);
+        }, children: jsxRuntime.jsx(KeyLabel, Object.assign({ __note: __note, __label: __label, __index: __index }, keyLabelProps)) }));
+});
+
+const Shortcuts = {
+    HOME_ROW: {
+        keys: ['a', 'w', 's', 'e', 'd', 'f', 't', 'g', 'y', 'h', 'u', 'j', 'k', 'o', 'l', 'p', ';']
+    }
+};
+
+function Piano({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? '100%' : 160, style, playNote, stopNote, label, children, }) {
+    // -- state and ref ---
+    const [pressed, setPressed] = React.useState(false);
+    const [whiteNoteWidth, setWhiteNoteWidth] = React.useState(-1);
+    const keyRefs = React.useRef([]);
+    for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
+        keyRefs.current[i] = React.createRef();
+    }
+    const pianoRef = React.useRef(null);
+    // --- interpret props ---
+    const noteRangeArray = Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
+    const whiteNoteCount = noteRangeArray.filter((v) => isWhiteKey(v)).length;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let whiteKeyProps, blackKeyProps;
+    if (children != undefined) {
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type == WhiteKey) {
+                    whiteKeyProps = child.props;
+                }
+                else if (child.type == BlackKey) {
+                    blackKeyProps = child.props;
+                }
+                else {
+                    throw new Error('only <WhiteKey> or <BlackKey>');
+                }
+            }
+            else {
+                throw new Error('children is an invalid element.');
+            }
+        });
+    }
+    // --- internal functions ---
+    function notePosition(note) {
+        const pitchPositions = {
+            C: 0,
+            'C#': 0.55,
+            D: 1,
+            'D#': 1.8,
+            E: 2,
+            F: 3,
+            'F#': 3.5,
+            G: 4,
+            'G#': 4.7,
+            A: 5,
+            'A#': 5.85,
+            B: 6,
+        };
+        const toNoteName = (n) => {
+            const { letter, accidental } = parseNoteName(noteName(n));
+            return (letter + accidental);
+        };
+        const _noteName = toNoteName(note);
+        const firstNoteName = toNoteName(noteRange.first);
+        const pos = pitchPositions[_noteName] - pitchPositions[firstNoteName];
+        const octave = Math.floor((note - noteRange.first) / 12);
+        const octaveOffset = noteNames.indexOf(firstNoteName) > noteNames.indexOf(_noteName) ? 1 : 0;
+        const length = whiteNoteWidth + 3;
+        return pos * length + (octave + octaveOffset) * 7 * length;
+    }
+    // --- hooks ---
+    React.useEffect(() => {
+        if (fill && pianoRef.current) {
+            const parent = pianoRef.current.parentElement;
+            if (!parent)
+                throw new Error("doesn't have a parent element.");
+            const resizeObserver = new ResizeObserver(() => {
+                const w = pianoRef.current.clientWidth;
+                setWhiteNoteWidth(w / whiteNoteCount - 3);
+            });
+            resizeObserver.observe(parent);
+        }
+        else {
+            setWhiteNoteWidth((whiteKeyProps === null || whiteKeyProps === undefined ? undefined : whiteKeyProps.width) || 40);
+        }
+    }, []);
+    useEventListener(window, 'keydown', (e) => {
+        var _a, _b, _c, _d;
+        if (e.repeat)
+            return;
+        if (!keyboardShortcuts)
+            return;
+        const index = keyboardShortcuts.keys.indexOf(e.key);
+        if (index != -1) {
+            if (!((_b = (_a = keyRefs.current[index]) === null || _a === undefined ? undefined : _a.current) === null || _b === undefined ? undefined : _b.played())) {
+                (_d = (_c = keyRefs.current[index]) === null || _c === undefined ? undefined : _c.current) === null || _d === undefined ? undefined : _d.play();
+            }
+        }
+    });
+    useEventListener(window, 'keyup', (e) => {
+        var _a, _b;
+        if (e.repeat)
+            return;
+        if (!keyboardShortcuts)
+            return;
+        const index = keyboardShortcuts.keys.indexOf(e.key);
+        if (index != -1) {
+            (_b = (_a = keyRefs.current[index]) === null || _a === undefined ? undefined : _a.current) === null || _b === undefined ? undefined : _b.stop();
+        }
+    });
+    return (jsxRuntime.jsx("div", { ref: pianoRef, className: "tremolo-piano", css: react.css(Object.assign({ display: 'inline-block', boxSizing: 'border-box', userSelect: 'none', width: fill ? '100%' : undefined, height: height, position: 'relative' }, style)), onPointerDown: () => {
+            setPressed(true);
+        }, onPointerUp: () => {
+            setPressed(false);
+        }, children: noteRangeArray.map((note, index) => {
+            return (isWhiteKey(note) ? (jsxRuntime.jsx(WhiteKey, Object.assign({ ref: keyRefs.current[index], __glissando: glissando && pressed, __position: notePosition(note), __note: note, __disabled: note > midiMax, __index: index, __fill: fill, __width: whiteNoteWidth, __playNote: playNote, __stopNote: stopNote, __label: label }, whiteKeyProps), note)) : (jsxRuntime.jsx(BlackKey, Object.assign({ ref: keyRefs.current[index], __glissando: glissando && pressed, __position: notePosition(note), __note: note, __disabled: note > midiMax, __index: index, __fill: fill, __width: whiteNoteWidth * 0.65, __playNote: playNote, __stopNote: stopNote, __label: label }, blackKeyProps), note)));
+        }) }));
+}
+
+/**
+ * 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 isHorizontal(d) {
     return d == 'right' || d == 'left';
 }
@@ -526,46 +898,76 @@ function parseScaleOrderList(scale, min, max, step) {
         const per = scale[0] == 'step' ? step : scale[0];
         const count = Math.floor(max / per) - Math.ceil(min / per) + 1;
         for (let i = 0; i < count; i++) {
-            const at = toFixed(per * (Math.ceil(min / per) + i), (_a = decimalPart(per)) === null || _a === void 0 ? void 0 : _a.length);
+            const at = toFixed(per * (Math.ceil(min / per) + i), (_a = decimalPart(per)) === null || _a === undefined ? undefined : _a.length);
             scalesList.push({ at: at, type: scale[1] });
         }
     }
     return scalesList;
 }
 
-function SliderThumb({ color, children, style, __css, }) {
-    return (jsxRuntime.jsx("div", { className: "tremolo-slider-thumb-wrapper", css: react.css(Object.assign({ width: 'fit-content', height: 'fit-content', position: 'absolute', translate: '-50% -50%', zIndex: 100 }, __css)), children: children ? (children) : (
+const SliderThumb = React.forwardRef(({ size, width = 22, height = 22, color = '#4e76e6', hoverColor = color, disabledColor = '#5d6478', disabledHoverColor = disabledColor, zIndex = 100, children, className, style, __disabled, __css, }, ref) => {
+    const wrapperRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = wrapperRef.current) === null || _a === undefined ? undefined : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = wrapperRef.current) === null || _a === undefined ? undefined : _a.blur();
+            },
+        };
+    }, []);
+    return (jsxRuntime.jsx("div", { className: "tremolo-slider-thumb-wrapper", css: react.css(Object.assign({ position: 'absolute', translate: '-50% -50%', zIndex: zIndex }, __css)), children: children ? (children) : (
         // default slider thumb
-        jsxRuntime.jsx("div", { className: "tremolo-slider-thumb", 
+        jsxRuntime.jsx("div", { ref: wrapperRef, className: clsx('tremolo-slider-thumb', className), 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, css: react.css(Object.assign({ background: color, width: '1.4rem', height: '1.4rem', borderRadius: '50%', '&:hover': {
-                    background: `color-mix(in srgb, ${color} 95%, black)`
-                }, '&:active': {
+            tabIndex: 0, css: react.css(Object.assign({ background: __disabled ? disabledColor : color, width: size !== null && size !== undefined ? size : width, height: size !== null && size !== undefined ? size : height, borderRadius: '50%', outline: 'none', '&:hover': {
+                    background: __disabled ? disabledHoverColor : hoverColor
+                }, '&:focus': !__disabled && {
                     boxShadow: '0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2)',
                 } }, style)) })) }));
-}
+});
 
-function SliderTrack({ children, style, __css, }) {
-    return (jsxRuntime.jsx("div", { className: "tremolo-slider-track", css: react.css(Object.assign(Object.assign({}, __css), style)), children: children }));
+function SliderTrack({ length = 140, thickness = 10, activeBg = '#7998ec', inactiveBg = '#eee', activeHoverBg = '#6387e9', inactiveHoverBg = '#e0e0e0', disabledActiveBg = '#858890', disabledInactiveBg = '#ddd', disabledActiveHoverBg = disabledActiveBg, disabledInactiveHoverBg = disabledInactiveBg, children, className, style, __thumb, __direction, __disabled, __percent, }) {
+    const active = __disabled ? disabledActiveBg : activeBg;
+    const inactive = __disabled ? disabledInactiveBg : inactiveBg;
+    const activeHover = __disabled ? disabledActiveHoverBg : activeHoverBg;
+    const inactiveHover = __disabled ? disabledInactiveHoverBg : inactiveHoverBg;
+    return (jsxRuntime.jsxs("div", { className: clsx('tremolo-slider-track', className), css: react.css(Object.assign({ position: 'relative', background: `linear-gradient(to ${gradientDirection(__direction)}, ${active} ${__percent}%, ${inactive} ${__percent}%)`, borderRadius: styleHelper(thickness, '/', 2), width: isHorizontal(__direction) ? length : thickness, height: isHorizontal(__direction) ? thickness : length, ':hover': {
+                background: `linear-gradient(to ${gradientDirection(__direction)}, ${activeHover} ${__percent}%, ${inactiveHover} ${__percent}%)`
+            } }, style)), children: [children, __thumb] }));
 }
 
 /**
  * Customizable slider
  */
-function Slider(_a) {
-    var _b, _c;
-    var { value, min, max, step = 1, skew = 1, length = 140, thickness = 10, direction = 'right', scale, scaleOption, color = '#4e76e6', bg = '#eee', className, style, bodyNoSelect = true, enableWheel, onChange, children } = _a; __rest(_a, ["value", "min", "max", "step", "skew", "length", "thickness", "direction", "scale", "scaleOption", "color", "bg", "className", "style", "bodyNoSelect", "enableWheel", "onChange", "children"]);
+const Slider = React.forwardRef((_a, ref) => {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { value, min, max, step = 1, skew = 1, direction = 'right', scale, scaleOption, className, style, bodyNoSelect = true, wheel = ['raw', 1], keyboard = ['raw', 1], disabled = false, readonly = false, onChange, children } = _a; __rest(_a, ["value", "min", "max", "step", "skew", "direction", "scale", "scaleOption", "className", "style", "bodyNoSelect", "wheel", "keyboard", "disabled", "readonly", "onChange", "children"]);
     // -- state and ref ---
     const trackElementRef = React.useRef(null);
-    const percent = normalizeValue(value, min, max, skew) * 100;
-    const percentRev = isReversed(direction) ? 100 - percent : percent;
+    const thumbRef = React.useRef(null);
+    const thumbDragged = React.useRef(false);
+    const percent = toFixed$2(normalizeValue(value, min, max, skew) * 100);
+    const percentRev = isReversed(direction) ? toFixed$2(100 - percent) : percent;
+    const calcPercent = (v) => {
+        return toFixed$2(isReversed(direction)
+            ? 100 - normalizeValue(v, min, max, skew) * 100
+            : normalizeValue(v, min, max, skew) * 100);
+    };
+    if (wheel.length != 2) {
+        throw new Error(`Slider.wheel expect ['normalized' | 'raw', number]`);
+    }
+    if (keyboard.length != 2) {
+        throw new Error(`Slider.keyboard expect ['normalized' | 'raw', number]`);
+    }
     const scalesList = parseScaleOrderList(scale, min, max, step);
     if (isReversed(direction))
         scalesList.reverse();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let trackProps;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let thumbProps;
+    let trackProps, thumbProps;
     if (children != undefined) {
         React.Children.forEach(children, (child) => {
             if (React.isValidElement(child)) {
@@ -584,15 +986,15 @@ function Slider(_a) {
             }
         });
     }
-    const thumbDragged = React.useRef(false);
+    // --- internal functions ---
     const handleValue = (event) => {
-        if (!trackElementRef.current || !thumbDragged.current)
+        if (!trackElementRef.current || !thumbDragged.current || !onChange || readonly)
             return;
         const isTouch = event instanceof TouchEvent;
         if (isTouch && event.cancelable)
             event.preventDefault();
         if (bodyNoSelect)
-            document.body.classList.add('no-select');
+            addNoSelect();
         const { left: x1, top: y1, right: x2, bottom: y2, } = trackElementRef.current.getBoundingClientRect();
         const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
         const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
@@ -600,70 +1002,90 @@ function Slider(_a) {
             ? normalizeValue(mouseX, x1, x2)
             : normalizeValue(mouseY, y1, y2);
         const v = rawValue(isReversed(direction) ? 1 - n : n, min, max, skew);
-        const v2 = clamp(stepValue(v, step), min, max);
-        if (onChange)
-            onChange(v2);
+        onChange(clamp(stepValue(v, step), min, max));
     };
+    const handleKeyDown = React.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 (direction == 'down' || direction == 'left')
+                x *= -1;
+            let v;
+            if (keyboard[0] == 'normalized') {
+                const n = normalizeValue(value, min, max, skew);
+                v = rawValue(n + x, min, max, skew);
+            }
+            else {
+                v = value + x;
+            }
+            onChange(clamp(stepValue(v, step), min, max));
+        }
+    }, [value, min, max, step, skew, direction, keyboard, onChange, readonly]);
     // --- hooks ---
-    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [min, max, skew, step, direction, onChange]);
+    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [min, max, skew, step, direction, onChange, readonly]);
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
-        if (!enableWheel)
+        if (!wheel || !onChange || readonly)
             return;
         event.preventDefault();
-        let x = event.deltaY > 0 ? enableWheel[1] : -enableWheel[1];
+        let x = event.deltaY > 0 ? wheel[1] : -wheel[1];
         if (isReversed(direction) || isHorizontal(direction))
             x *= -1;
         let v;
-        if (enableWheel[0] == 'normalized') {
+        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));
+        onChange(clamp(stepValue(v, step), min, max));
     }, {
         passive: false,
-    }, [enableWheel, value, min, max, skew, step]);
+    }, [wheel, value, min, max, skew, step]);
     useEventListener(window, 'mousemove', (event) => {
         handleValue(event);
     });
     useEventListener(window, 'mouseup', () => {
         thumbDragged.current = false;
         if (bodyNoSelect)
-            document.body.classList.remove('no-select');
+            removeNoSelect();
     });
+    React.useImperativeHandle(ref, () => {
+        return {
+            focus() {
+                var _a;
+                (_a = thumbRef.current) === null || _a === undefined ? undefined : _a.focus();
+            },
+            blur() {
+                var _a;
+                (_a = thumbRef.current) === null || _a === undefined ? undefined : _a.blur();
+            },
+        };
+    }, []);
     return (jsxRuntime.jsxs("div", { className: clsx('tremolo-slider', className), ref: (div) => {
             wheelRefCallback(div);
             touchMoveRefCallback(div);
-        }, tabIndex: -1, role: "slider", "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, "aria-orientation": isHorizontal(direction) ? 'horizontal' : 'vertical', css: react.css(Object.assign({ display: 'inline-block', boxSizing: 'border-box', margin: '0.7rem', padding: 0, cursor: 'pointer' }, style)), onPointerDown: (event) => {
+        }, tabIndex: -1, role: "slider", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isHorizontal(direction) ? 'horizontal' : 'vertical', "aria-disabled": disabled, "aria-readonly": readonly, css: react.css(Object.assign({ display: 'inline-block', margin: `calc(${styleHelper((_b = thumbProps === null || thumbProps === undefined ? undefined : thumbProps.size) !== null && _b !== undefined ? _b : 22)} / 2)`, cursor: readonly ? 'not-allowed' : 'pointer', outline: 0 }, style)), onPointerDown: (event) => {
             thumbDragged.current = true;
             handleValue(event);
-        }, children: [jsxRuntime.jsx(react.Global, { styles: {
+        }, onKeyDown: handleKeyDown, onFocus: (_c = thumbRef.current) === null || _c === undefined ? undefined : _c.focus, onBlur: (_d = thumbRef.current) === null || _d === undefined ? undefined : _d.blur, children: [jsxRuntime.jsx(react.Global, { styles: {
                     '.no-select': {
                         userSelect: 'none',
                     },
                 } }), jsxRuntime.jsxs("div", { css: react.css({
                     display: 'flex',
                     flexDirection: isHorizontal(direction) ? 'column' : 'row',
-                }), children: [jsxRuntime.jsxs("div", { className: "tremolo-slider-track-wrapper", ref: trackElementRef, css: react.css({ position: 'relative' }), children: [jsxRuntime.jsx(SliderTrack, Object.assign({ __css: {
-                                    background: `linear-gradient(to ${gradientDirection(direction)}, ${color} ${percent}%, ${bg} ${percent}%)`,
-                                    borderRadius: styleHelper(thickness, '/', 2),
-                                    borderStyle: 'solid',
-                                    borderColor: '#ccc',
-                                    borderWidth: 2,
-                                    width: isHorizontal(direction) ? length : thickness,
-                                    height: isHorizontal(direction) ? thickness : length,
-                                    zIndex: 1,
-                                } }, trackProps)), jsxRuntime.jsx(SliderThumb, Object.assign({ color: color, __css: {
+                }), children: [jsxRuntime.jsx("div", { className: "tremolo-slider-track-wrapper", ref: trackElementRef, children: jsxRuntime.jsx(SliderTrack, Object.assign({ __direction: direction, __disabled: disabled, __percent: percent, __thumb: jsxRuntime.jsx(SliderThumb, Object.assign({ ref: thumbRef, __disabled: disabled, __css: {
                                     top: isHorizontal(direction) ? '50%' : `${percentRev}%`,
                                     left: isHorizontal(direction) ? `${percentRev}%` : '50%',
-                                } }, thumbProps))] }), scale && (jsxRuntime.jsx("div", { className: "tremolo-slider-scale-wrapper", css: react.css(Object.assign({ position: 'relative', width: isHorizontal(direction) ? length : undefined, height: isVertical(direction) ? length : undefined, marginLeft: isHorizontal(direction)
-                                ? 2
-                                : ((_b = scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.gap) !== null && _b !== void 0 ? _b : `calc((1.4rem - ${styleHelper(thickness)}) / 2)`), marginTop: isVertical(direction)
-                                ? 2
-                                : ((_c = scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.gap) !== null && _c !== void 0 ? _c : `calc((1.4rem - ${styleHelper(thickness)}) / 2)`) }, scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.style)), children: scalesList.map((item, index) => {
+                                } }, thumbProps)) }, trackProps)) }), scale && (jsxRuntime.jsx("div", { className: "tremolo-slider-scale-wrapper", css: react.css(Object.assign({ display: 'block', position: 'relative', marginLeft: isVertical(direction)
+                                ? ((_e = scaleOption === null || scaleOption === undefined ? undefined : scaleOption.gap) !== null && _e !== undefined ? _e : `calc((22px - ${styleHelper((_f = trackProps === null || trackProps === undefined ? undefined : trackProps.thickness) !== null && _f !== undefined ? _f : 10)}) / 2)`)
+                                : undefined, marginTop: isHorizontal(direction)
+                                ? ((_g = scaleOption === null || scaleOption === undefined ? undefined : scaleOption.gap) !== null && _g !== undefined ? _g : `calc((22px - ${styleHelper((_h = trackProps === null || trackProps === undefined ? undefined : trackProps.thickness) !== null && _h !== undefined ? _h : 10)}) / 2)`)
+                                : undefined }, scaleOption === null || scaleOption === undefined ? undefined : scaleOption.style)), children: scalesList.map((item, index) => {
                             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
                             return (jsxRuntime.jsxs("div", { css: react.css({
                                     display: 'flex',
@@ -671,43 +1093,40 @@ function Slider(_a) {
                                     justifyContent: 'center',
                                     alignItems: 'center',
                                     position: 'absolute',
-                                    left: isHorizontal(direction)
-                                        ? `${isReversed(direction)
-                                            ? 100 - normalizeValue(item.at, min, max, skew) * 100
-                                            : normalizeValue(item.at, min, max, skew) * 100}%`
-                                        : undefined,
-                                    top: isVertical(direction)
-                                        ? `${isReversed(direction)
-                                            ? 100 - normalizeValue(item.at, min, max, skew) * 100
-                                            : normalizeValue(item.at, min, max, skew) * 100}%`
-                                        : undefined,
+                                    left: isHorizontal(direction) ? `${calcPercent(item.at)}%` : undefined,
+                                    top: isVertical(direction) ? `${calcPercent(item.at)}%` : undefined,
                                     translate: isHorizontal(direction) ? '-50% 0' : '0 -50%',
                                     zIndex: 10,
-                                }), children: [((_b = (_a = item.type) !== null && _a !== void 0 ? _a : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.defaultType) !== null && _b !== void 0 ? _b : 'mark-number') !=
+                                }), children: [((_b = (_a = item.type) !== null && _a !== undefined ? _a : scaleOption === null || scaleOption === undefined ? undefined : scaleOption.defaultType) !== null && _b !== undefined ? _b : 'mark-number') !=
                                         'number' && (jsxRuntime.jsx("div", { className: "tremolo-slider-scale-mark", css: react.css({
                                             width: isHorizontal(direction)
-                                                ? ((_d = (_c = item.style) === null || _c === void 0 ? void 0 : _c.thickness) !== null && _d !== void 0 ? _d : 1)
-                                                : ((_f = (_e = item.style) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : '0.5rem'),
+                                                ? ((_d = (_c = item.style) === null || _c === undefined ? undefined : _c.thickness) !== null && _d !== undefined ? _d : 1)
+                                                : ((_f = (_e = item.style) === null || _e === undefined ? undefined : _e.length) !== null && _f !== undefined ? _f : '0.5rem'),
                                             height: isVertical(direction)
-                                                ? ((_h = (_g = item.style) === null || _g === void 0 ? void 0 : _g.thickness) !== null && _h !== void 0 ? _h : 1)
-                                                : ((_k = (_j = item.style) === null || _j === void 0 ? void 0 : _j.length) !== null && _k !== void 0 ? _k : '0.5rem'),
-                                            backgroundColor: (_o = (_m = (_l = item.style) === null || _l === void 0 ? void 0 : _l.markColor) !== null && _m !== void 0 ? _m : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.markColor) !== null && _o !== void 0 ? _o : '#222',
+                                                ? ((_h = (_g = item.style) === null || _g === undefined ? undefined : _g.thickness) !== null && _h !== undefined ? _h : 1)
+                                                : ((_k = (_j = item.style) === null || _j === undefined ? undefined : _j.length) !== null && _k !== undefined ? _k : '0.5rem'),
+                                            backgroundColor: (_o = (_m = (_l = item.style) === null || _l === undefined ? undefined : _l.markColor) !== null && _m !== undefined ? _m : scaleOption === null || scaleOption === undefined ? undefined : scaleOption.markColor) !== null && _o !== undefined ? _o : '#222',
                                             marginBottom: isHorizontal(direction) ? 2 : undefined,
                                             marginRight: isVertical(direction) ? 2 : undefined,
-                                        }) })), ((_q = (_p = item.type) !== null && _p !== void 0 ? _p : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.defaultType) !== null && _q !== void 0 ? _q : 'mark-number') !=
+                                        }) })), ((_q = (_p = item.type) !== null && _p !== undefined ? _p : scaleOption === null || scaleOption === undefined ? undefined : scaleOption.defaultType) !== null && _q !== undefined ? _q : 'mark-number') !=
                                         'mark' && (jsxRuntime.jsx("div", { className: "tremolo-slider-scale-number", css: react.css({
-                                            color: (_s = (_r = item.style) === null || _r === void 0 ? void 0 : _r.labelColor) !== null && _s !== void 0 ? _s : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.labelColor,
-                                            width: scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.labelWidth,
+                                            color: (_s = (_r = item.style) === null || _r === undefined ? undefined : _r.labelColor) !== null && _s !== undefined ? _s : scaleOption === null || scaleOption === undefined ? undefined : scaleOption.labelColor,
+                                            width: scaleOption === null || scaleOption === undefined ? undefined : scaleOption.labelWidth,
                                             textAlign: 'right',
-                                        }), children: (_t = item.text) !== null && _t !== void 0 ? _t : item.at }))] }, index));
+                                        }), children: (_t = item.text) !== null && _t !== undefined ? _t : item.at }))] }, index));
                         }) }))] })] }));
-}
+});
 
 exports.AnimationCanvas = AnimationCanvas;
+exports.BlackKey = BlackKey;
+exports.KeyLabel = KeyLabel;
 exports.Knob = Knob;
 exports.NumberInput = NumberInput;
+exports.Piano = Piano;
+exports.Shortcuts = Shortcuts;
 exports.Slider = Slider;
 exports.SliderThumb = SliderThumb;
 exports.SliderTrack = SliderTrack;
+exports.WhiteKey = WhiteKey;
 exports.gradientDirection = gradientDirection;
 //# sourceMappingURL=index.js.map