@tremolo-ui/react 0.0.4 → 0.0.6

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { css, Global } from '@emotion/react';
-import React, { useRef, useEffect, useInsertionEffect, useCallback, useMemo, useState } from 'react';
+import React, { useRef, useEffect, useInsertionEffect, useCallback, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -94,7 +94,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
@@ -150,15 +150,27 @@ function AnimationCanvas(_a) {
     return (jsxs(Fragment, { children: [jsx("canvas", Object.assign({ className: clsx('tremolo-animation-canvas', className), width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, css: css(style), ref: canvasRef }, props)), relativeSize && reduceFlickering && (jsx("canvas", { style: { display: 'none' }, width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, ref: memoCanvasRef }))] }));
 }
 
+/**
+ * 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');
@@ -167,22 +179,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;
 }
@@ -224,13 +252,13 @@ function useCallbackRef(callback, deps = []) {
     useInsertionEffect(() => {
         callbackRef.current = callback;
     });
-    return useCallback((...args) => { var _a; return (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, ...args); }, deps);
+    return 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);
     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);
@@ -239,8 +267,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);
     };
 }
 
@@ -249,7 +277,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);
@@ -260,6 +288,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',
@@ -272,14 +307,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 = 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));
@@ -294,7 +329,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;
@@ -307,12 +342,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);
         }
@@ -321,18 +356,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 (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: css(Object.assign(Object.assign({ display: '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: 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: () => {
@@ -343,7 +378,7 @@ function Knob(_a) {
                     '.no-select': {
                         userSelect: 'none',
                     },
-                } }), jsx(AnimationCanvas, { width: adaptSize(size !== null && size !== void 0 ? size : width), height: adaptSize(size !== null && size !== void 0 ? size : height), relativeSize: isRelativeSize, 
+                } }), 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) => {
@@ -388,10 +423,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];
@@ -454,14 +500,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] = useState(parseValue(String(value), units, digit, defaultValue).formatValue);
-    const calculatedStrict = units ? false : strict;
-    const { _active, _focus, _hover } = pseudo;
-    return (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: css(Object.assign(Object.assign({ display: '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 (jsx("input", Object.assign({ className: clsx('tremolo-number-input', className), value: showValue, min: min, max: max, step: step, type: calculatedTypeNumber ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, css: css(Object.assign(Object.assign({ display: 'inline-block', font: 'inherit', margin: 0, paddingTop: 6, paddingBottom: 6, paddingLeft: 10, paddingRight: 10, borderStyle: 'solid', borderWidth: 1, borderColor: '#bbb', borderRadius: 4, outline: 0, transition: 'all 0.1s linear', appearance: 'textfield', '&:hover': Object.assign({ borderColor: 'var(--tremolo-theme-color)' }, _hover), '&:focus': Object.assign({ borderColor: 'var(--tremolo-theme-color)', boxShadow: '0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1)' }, _focus) }, (_active && { '&:active': Object.assign({}, _active) })), style)), onChange: (event) => {
             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) => {
@@ -486,16 +532,31 @@ function NumberInput(_a) {
             if (blurWithEnter && event.key == 'Enter') {
                 event.currentTarget.blur();
             }
-        } }));
+        } }, rest)));
 }
 
+/**
+ * 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';
 }
@@ -524,46 +585,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 (jsx("div", { className: "tremolo-slider-thumb-wrapper", css: css(Object.assign({ width: 'fit-content', height: 'fit-content', position: 'absolute', translate: '-50% -50%', zIndex: 100 }, __css)), children: children ? (children) : (
+const SliderThumb = forwardRef(({ size, width = 22, height = 22, color = '#4e76e6', hoverColor = color, disabledColor = '#5d6478', disabledHoverColor = disabledColor, zIndex = 100, children, className, style, __disabled, __css, }, ref) => {
+    const wrapperRef = useRef(null);
+    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 (jsx("div", { className: "tremolo-slider-thumb-wrapper", css: css(Object.assign({ position: 'absolute', translate: '-50% -50%', zIndex: zIndex }, __css)), children: children ? (children) : (
         // default slider thumb
-        jsx("div", { className: "tremolo-slider-thumb", 
+        jsx("div", { ref: wrapperRef, className: clsx('tremolo-slider-thumb', className), 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, css: css(Object.assign({ background: color, width: '1.4rem', height: '1.4rem', borderRadius: '50%', '&:hover': {
-                    background: `color-mix(in srgb, ${color} 95%, black)`
-                }, '&:active': {
+            tabIndex: 0, css: css(Object.assign({ background: __disabled ? disabledColor : color, width: size !== null && size !== undefined ? size : width, height: size !== null && size !== undefined ? size : height, borderRadius: '50%', outline: 'none', '&:hover': {
+                    background: __disabled ? disabledHoverColor : hoverColor
+                }, '&:focus': !__disabled && {
                     boxShadow: '0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2)',
                 } }, style)) })) }));
-}
+});
 
-function SliderTrack({ children, style, __css, }) {
-    return (jsx("div", { className: "tremolo-slider-track", css: 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 (jsxs("div", { className: clsx('tremolo-slider-track', className), css: css(Object.assign({ position: 'relative', background: `linear-gradient(to ${gradientDirection(__direction)}, ${active} ${__percent}%, ${inactive} ${__percent}%)`, borderRadius: styleHelper(thickness, '/', 2), width: isHorizontal(__direction) ? length : thickness, height: isHorizontal(__direction) ? thickness : length, ':hover': {
+                background: `linear-gradient(to ${gradientDirection(__direction)}, ${activeHover} ${__percent}%, ${inactiveHover} ${__percent}%)`
+            } }, style)), children: [children, __thumb] }));
 }
 
 /**
  * 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 = 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 = useRef(null);
-    const percent = normalizeValue(value, min, max, skew) * 100;
-    const percentRev = isReversed(direction) ? 100 - percent : percent;
+    const thumbRef = useRef(null);
+    const thumbDragged = useRef(false);
+    const percent = toFixed$2(normalizeValue(value, min, max, skew) * 100);
+    const percentRev = isReversed(direction) ? toFixed$2(100 - percent) : percent;
+    const calcPercent = (v) => {
+        return toFixed$2(isReversed(direction)
+            ? 100 - normalizeValue(v, min, max, skew) * 100
+            : normalizeValue(v, min, max, skew) * 100);
+    };
+    if (wheel.length != 2) {
+        throw new Error(`Slider.wheel expect ['normalized' | 'raw', number]`);
+    }
+    if (keyboard.length != 2) {
+        throw new Error(`Slider.keyboard expect ['normalized' | 'raw', number]`);
+    }
     const scalesList = parseScaleOrderList(scale, min, max, step);
     if (isReversed(direction))
         scalesList.reverse();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let trackProps;
-    // 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)) {
@@ -582,15 +673,15 @@ function Slider(_a) {
             }
         });
     }
-    const thumbDragged = 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;
@@ -598,70 +689,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 = 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();
     });
+    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 (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: 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: 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: [jsx(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: [jsx(Global, { styles: {
                     '.no-select': {
                         userSelect: 'none',
                     },
                 } }), jsxs("div", { css: css({
                     display: 'flex',
                     flexDirection: isHorizontal(direction) ? 'column' : 'row',
-                }), children: [jsxs("div", { className: "tremolo-slider-track-wrapper", ref: trackElementRef, css: css({ position: 'relative' }), children: [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)), jsx(SliderThumb, Object.assign({ color: color, __css: {
+                }), children: [jsx("div", { className: "tremolo-slider-track-wrapper", ref: trackElementRef, children: jsx(SliderTrack, Object.assign({ __direction: direction, __disabled: disabled, __percent: percent, __thumb: jsx(SliderThumb, Object.assign({ ref: thumbRef, __disabled: disabled, __css: {
                                     top: isHorizontal(direction) ? '50%' : `${percentRev}%`,
                                     left: isHorizontal(direction) ? `${percentRev}%` : '50%',
-                                } }, thumbProps))] }), scale && (jsx("div", { className: "tremolo-slider-scale-wrapper", css: 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 && (jsx("div", { className: "tremolo-slider-scale-wrapper", css: css(Object.assign({ display: 'block', position: 'relative', marginLeft: isVertical(direction)
+                                ? ((_e = scaleOption === null || scaleOption === undefined ? undefined : scaleOption.gap) !== null && _e !== undefined ? _e : `calc((22px - ${styleHelper((_f = trackProps === null || trackProps === undefined ? undefined : trackProps.thickness) !== null && _f !== undefined ? _f : 10)}) / 2)`)
+                                : undefined, marginTop: isHorizontal(direction)
+                                ? ((_g = scaleOption === null || scaleOption === undefined ? undefined : scaleOption.gap) !== null && _g !== undefined ? _g : `calc((22px - ${styleHelper((_h = trackProps === null || trackProps === undefined ? undefined : trackProps.thickness) !== null && _h !== undefined ? _h : 10)}) / 2)`)
+                                : undefined }, scaleOption === null || scaleOption === undefined ? undefined : scaleOption.style)), children: scalesList.map((item, index) => {
                             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
                             return (jsxs("div", { css: css({
                                     display: 'flex',
@@ -669,37 +780,29 @@ 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' && (jsx("div", { className: "tremolo-slider-scale-mark", css: 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' && (jsx("div", { className: "tremolo-slider-scale-number", css: 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));
                         }) }))] })] }));
-}
+});
 
 export { AnimationCanvas, Knob, NumberInput, Slider, SliderThumb, SliderTrack, gradientDirection };
 //# sourceMappingURL=index.js.map