@tremolo-ui/react 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,11 @@
+# @tremolo-ui/react
+
+## Install
+
+```bash
+npm i @tremolo-ui/react
+```
+
+## Note
+
+See https://github.com/m1m0zzz/tremolo-ui

package/dist/cjs/index.js

@@ -1,11 +1,8 @@
 'use strict';
 
-var math = require('common/math');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var react = require('@emotion/react');
 var React = require('react');
-var type = require('common/components/Slider/type');
-var util = require('common/util');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -41,52 +38,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-/**
- * 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 = React.useRef(() => {
-        throw new Error('Cannot call an event handler while rendering.');
-    });
-    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);
-}
-
-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);
-        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 React.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);
-            };
-        };
-    }, deps);
-}
+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 = [
@@ -121,7 +73,7 @@ function setDprConfig(canvas, context, width, height, dpr) {
  * A simple animatable canvas with requestAnimationFrame()
  */
 function AnimationCanvas(_a) {
-    var { width = 100, height = 100, style, relativeSize = false, reduceFlickering = true, options, init, draw } = _a, props = __rest(_a, ["width", "height", "style", "relativeSize", "reduceFlickering", "options", "init", "draw"]);
+    var { width = 100, height = 100, style, relativeSize = false, reduceFlickering = true, options, init, draw, className } = _a, props = __rest(_a, ["width", "height", "style", "relativeSize", "reduceFlickering", "options", "init", "draw", "className"]);
     const canvasRef = React.useRef(null);
     const memoCanvasRef = React.useRef(null);
     const reqIdRef = React.useRef();
@@ -146,7 +98,7 @@ function AnimationCanvas(_a) {
             const memoCanvas = memoCanvasRef.current;
             const memoContext = memoCanvas === null || memoCanvas === void 0 ? void 0 : memoCanvas.getContext('2d', options);
             const resizeObserver = new ResizeObserver(() => {
-                console.log('resize');
+                // console.log('resize')
                 // Prevents loss of some context when the canvas is resized
                 const contextMemo = {};
                 for (const prop of drawingState) {
@@ -197,7 +149,117 @@ function AnimationCanvas(_a) {
             };
         }
     }, [loop]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("canvas", Object.assign({ 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 }))] }));
+    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 }))] }));
+}
+
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+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);
+}
+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);
+}
+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$2(quotient * step, decimalDigits);
+    const next = toFixed$2((quotient + 1) * step, decimalDigits);
+    return Math.abs(value - v) < Math.abs(value - next) ? v : next;
+}
+function toFixed$2(x, fractionDigits) {
+    return Number(x.toFixed(fractionDigits));
+}
+function decimalPart$1(x) {
+    return String(x).split('.')[1];
+}
+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;
+        }
+    }
+}
+
+/**
+ * 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 = React.useRef(() => {
+        throw new Error('Cannot call an event handler while rendering.');
+    });
+    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);
+}
+
+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);
+        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 React.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);
+            };
+        };
+    }, deps);
 }
 
 const defaultOptions = {
@@ -212,9 +274,7 @@ 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,
-    cursor = 'pointer', style, bodyNoSelect = true, enableWheel, enableDoubleClickDefault = true, onChange, _active, _focus, _hover } = _a, props = __rest(_a, ["value", "min", "max", "defaultValue", "startValue", "step", "skew", "size", "width", "height", "options", "cursor", "style", "bodyNoSelect", "enableWheel", "enableDoubleClickDefault", "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, 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"]);
     // -- state and ref ---
     // const [privateValue, setPrivateValue] = useState(value);
     const dragOffsetY = React.useRef(undefined);
@@ -240,9 +300,9 @@ function Knob(_a) {
             const screenY = isTouch ? event.touches[0].screenY : event.screenY;
             const delta = dragOffsetY.current - screenY;
             dragOffsetY.current = screenY;
-            const n = math.normalizeValue(value, min, max, skew);
-            const v = math.rawValue(n + delta / 100, min, max, skew);
-            const v2 = math.clamp(math.stepValue(v, step), min, max);
+            const n = normalizeValue(value, min, max, skew);
+            const v = rawValue(n + delta / 100, min, max, skew);
+            const v2 = clamp(stepValue(v, step), min, max);
             if (onChange)
                 onChange(v2);
         }
@@ -255,14 +315,14 @@ function Knob(_a) {
         const x = event.deltaY > 0 ? -enableWheel[1] : enableWheel[1];
         let v;
         if (enableWheel[0] == 'normalized') {
-            const n = math.normalizeValue(value, min, max, skew);
-            v = math.rawValue(n + x, min, max, skew);
+            const n = normalizeValue(value, min, max, skew);
+            v = rawValue(n + x, min, max, skew);
         }
         else {
             v = value + x;
         }
         if (onChange)
-            onChange(math.clamp(math.stepValue(v, step), min, max));
+            onChange(clamp(stepValue(v, step), min, max));
     }, { passive: false }, [enableWheel, value, min, max, skew, step, onChange]);
     const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleEvent, { passive: false }, [value, min, max, skew, step, onChange, bodyNoSelect]);
     useEventListener(window, 'mousemove', handleEvent);
@@ -271,10 +331,10 @@ function Knob(_a) {
         if (bodyNoSelect)
             document.body.classList.remove('no-select');
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: "tremolo-knob", ref: (div) => {
+    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: cursor }, 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: '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) => {
             dragOffsetY.current = event.screenY;
             handleEvent(event);
         }, onDoubleClick: () => {
@@ -288,12 +348,14 @@ function Knob(_a) {
                 } }), jsxRuntime.jsx(AnimationCanvas, { width: adaptSize(size !== null && size !== void 0 ? size : width), height: adaptSize(size !== null && size !== void 0 ? size : height), relativeSize: isRelativeSize, 
                 // TODO
                 // reduceFlickering={false}
-                draw: (ctx, _w, _h) => {
-                    const p = math.normalizeValue(value, min, max, skew);
-                    const startP = math.normalizeValue(startValue, min, max, skew);
-                    const w = _w.current, cx = w / 2;
-                    const h = _h.current, cy = h / 2;
+                draw: draw ? draw : (ctx, width, height) => {
+                    const p = normalizeValue(value, min, max, skew);
+                    const startP = normalizeValue(startValue, min, max, skew);
+                    const w = width.current, cx = w / 2;
+                    const h = height.current, cy = h / 2;
                     const r = Math.min(cx, cy);
+                    if (r <= 0)
+                        return;
                     // reset
                     ctx.clearRect(0, 0, w, h);
                     ctx.lineCap = 'butt';
@@ -307,20 +369,20 @@ function Knob(_a) {
                     // inactive rotary
                     ctx.beginPath();
                     ctx.strokeStyle = opts.inactive;
-                    ctx.arc(cx, cy, r - 0.5 - opts.lineWeight / 2, math.radian(135), math.radian(45));
+                    ctx.arc(cx, cy, r - 0.5 - opts.lineWeight / 2, radian(135), radian(45));
                     ctx.stroke();
                     // active rotary
                     ctx.beginPath();
                     ctx.strokeStyle = opts.active;
-                    ctx.arc(cx, cy, r - 0.5 - opts.lineWeight / 2, math.radian(135 + 270 * startP), math.radian(135 + 270 * p), p < startP);
+                    ctx.arc(cx, cy, r - 0.5 - opts.lineWeight / 2, radian(135 + 270 * startP), radian(135 + 270 * p), p < startP);
                     ctx.stroke();
                     // thumb
                     ctx.beginPath();
                     ctx.moveTo(cx, cy);
                     ctx.lineTo(cx +
-                        Math.cos(math.radian(135 + 270 * p)) *
+                        Math.cos(radian(135 + 270 * p)) *
                             (r - 0.5 - opts.thumbWeight / 2), cy +
-                        Math.sin(math.radian(135 + 270 * p)) *
+                        Math.sin(radian(135 + 270 * p)) *
                             (r - 0.5 - opts.thumbWeight / 2));
                     ctx.strokeStyle = opts.thumb;
                     ctx.lineWidth = opts.thumbWeight;
@@ -328,12 +390,159 @@ function Knob(_a) {
                 } })] })));
 }
 
+function toFixed$1(x, fractionDigits) {
+    return Number(x.toFixed(fractionDigits));
+}
+
+function selectUnit(units, value) {
+    if (typeof units == 'string')
+        return [units, 1];
+    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, defaultValue = 0) {
+    let str = inputString.trim();
+    if (str == '')
+        str = String(defaultValue);
+    if (!units) {
+        return {
+            rawValue: Number(str) || defaultValue,
+            formatValue: str,
+            unit: '',
+        };
+    }
+    else if (typeof units == 'string') {
+        return {
+            rawValue: Number(str) || defaultValue,
+            formatValue: `${str}${units}`,
+            unit: units,
+        };
+    }
+    const unitList = units.map(([u, _s]) => u);
+    const scaleList = units.map(([_u, s]) => s);
+    let rawValue = defaultValue;
+    let formatValue = `${scaleList[0]}`;
+    let unit = unitList[0];
+    const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
+    if (m) {
+        rawValue = Number(m[1]) || 0;
+        const inputUnit = m[3];
+        if (inputUnit != '' && unitList.indexOf(inputUnit) != -1) {
+            rawValue *= scaleList[unitList.indexOf(inputUnit)];
+            const s = selectUnit(units, rawValue);
+            const v = rawValue / s[1];
+            formatValue = `${digit != undefined ? toFixed$1(v, digit) : v}${s[0]}`;
+            unit = s[0];
+        }
+        else {
+            const [u, scale] = selectUnit(units, rawValue);
+            const v = rawValue / scale;
+            formatValue = `${digit != undefined ? toFixed$1(v, digit) : v}${u}`;
+            unit = u;
+        }
+    }
+    return {
+        rawValue: rawValue,
+        formatValue: formatValue,
+        unit: unit,
+    };
+}
+
+/**
+ * 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"]);
+    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: '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);
+            if (onChange)
+                onChange(newValue, event);
+        }, onFocus: (event) => {
+            const v = event.currentTarget.value;
+            const parsed = parseValue(v, units, digit, defaultValue);
+            if (selectWithFocus == 'all') {
+                event.currentTarget.setSelectionRange(0, v.length);
+            }
+            else if (selectWithFocus == 'number') {
+                event.currentTarget.setSelectionRange(0, parsed.formatValue.length - parsed.unit.length);
+            }
+            if (onFocus)
+                onFocus(parsed.rawValue, event);
+        }, onBlur: (event) => {
+            // update value
+            const v = event.currentTarget.value;
+            const parsed = parseValue(v, units, digit, defaultValue);
+            setShowValue(parsed.formatValue);
+            if (onBlur)
+                onBlur(parsed.rawValue, event);
+        }, onKeyDown: (event) => {
+            if (blurWithEnter && event.key == 'Enter') {
+                event.currentTarget.blur();
+            }
+        } }));
+}
+
+function toFixed(x, fractionDigits) {
+    return Number(x.toFixed(fractionDigits));
+}
+function decimalPart(x) {
+    return String(x).split('.')[1];
+}
+
+function isHorizontal(d) {
+    return d == 'right' || d == 'left';
+}
+function isVertical(d) {
+    return d == 'up' || d == 'down';
+}
+function isReversed(d) {
+    return d == 'left' || d == 'up';
+}
+function gradientDirection(d) {
+    if (d == 'left' || d == 'right')
+        return d;
+    if (d == 'up')
+        return 'top';
+    if (d == 'down')
+        return 'bottom';
+}
+function parseScaleOrderList(scale, min, max, step) {
+    var _a;
+    let scalesList = [];
+    if (!scale) ;
+    else if (typeof scale[0] == 'object') {
+        scalesList = scale;
+    }
+    else {
+        const per = scale[0] == 'step' ? step : scale[0];
+        const count = Math.floor(max / per) - Math.ceil(min / per) + 1;
+        for (let i = 0; i < count; i++) {
+            const at = toFixed(per * (Math.ceil(min / per) + i), (_a = decimalPart(per)) === null || _a === void 0 ? void 0 : _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) : (
         // default slider thumb
         jsxRuntime.jsx("div", { className: "tremolo-slider-thumb", 
             // 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%' }, style)) })) }));
+            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': {
+                    boxShadow: '0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2)',
+                } }, style)) })) }));
 }
 
 function SliderTrack({ children, style, __css, }) {
@@ -348,10 +557,10 @@ function Slider(_a) {
     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"]);
     // -- state and ref ---
     const trackElementRef = React.useRef(null);
-    const percent = math.normalizeValue(value, min, max, skew) * 100;
-    const percentRev = type.isReversed(direction) ? 100 - percent : percent;
-    const scalesList = type.parseScaleOrderList(scale, min, max, step);
-    if (type.isReversed(direction))
+    const percent = normalizeValue(value, min, max, skew) * 100;
+    const percentRev = isReversed(direction) ? 100 - percent : percent;
+    const scalesList = parseScaleOrderList(scale, min, max, step);
+    if (isReversed(direction))
         scalesList.reverse();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let trackProps;
@@ -387,11 +596,11 @@ function Slider(_a) {
         const { left: x1, top: y1, right: x2, bottom: y2, } = trackElementRef.current.getBoundingClientRect();
         const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
         const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
-        const n = type.isHorizontal(direction)
-            ? math.normalizeValue(mouseX, x1, x2)
-            : math.normalizeValue(mouseY, y1, y2);
-        const v = math.rawValue(type.isReversed(direction) ? 1 - n : n, min, max, skew);
-        const v2 = math.clamp(math.stepValue(v, step), min, max);
+        const n = isHorizontal(direction)
+            ? 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);
     };
@@ -402,18 +611,18 @@ function Slider(_a) {
             return;
         event.preventDefault();
         let x = event.deltaY > 0 ? enableWheel[1] : -enableWheel[1];
-        if (type.isReversed(direction) || type.isHorizontal(direction))
+        if (isReversed(direction) || isHorizontal(direction))
             x *= -1;
         let v;
         if (enableWheel[0] == 'normalized') {
-            const n = math.normalizeValue(value, min, max, skew);
-            v = math.rawValue(n + x, min, max, skew);
+            const n = normalizeValue(value, min, max, skew);
+            v = rawValue(n + x, min, max, skew);
         }
         else {
             v = value + x;
         }
         if (onChange)
-            onChange(math.clamp(math.stepValue(v, step), min, max));
+            onChange(clamp(stepValue(v, step), min, max));
     }, {
         passive: false,
     }, [enableWheel, value, min, max, skew, step]);
@@ -425,10 +634,10 @@ function Slider(_a) {
         if (bodyNoSelect)
             document.body.classList.remove('no-select');
     });
-    return (jsxRuntime.jsxs("div", { className: 'tremolo-slider' + (className ? ` ${className}` : ''), ref: (div) => {
+    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": type.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-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) => {
             thumbDragged.current = true;
             handleValue(event);
         }, children: [jsxRuntime.jsx(react.Global, { styles: {
@@ -437,54 +646,54 @@ function Slider(_a) {
                     },
                 } }), jsxRuntime.jsxs("div", { css: react.css({
                     display: 'flex',
-                    flexDirection: type.isHorizontal(direction) ? 'column' : 'row',
+                    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 ${type.gradientDirection(direction)}, ${color} ${percent}%, ${bg} ${percent}%)`,
-                                    borderRadius: util.styleHelper(thickness, '/', 2),
+                                    background: `linear-gradient(to ${gradientDirection(direction)}, ${color} ${percent}%, ${bg} ${percent}%)`,
+                                    borderRadius: styleHelper(thickness, '/', 2),
                                     borderStyle: 'solid',
                                     borderColor: '#ccc',
                                     borderWidth: 2,
-                                    width: type.isHorizontal(direction) ? length : thickness,
-                                    height: type.isHorizontal(direction) ? thickness : length,
+                                    width: isHorizontal(direction) ? length : thickness,
+                                    height: isHorizontal(direction) ? thickness : length,
                                     zIndex: 1,
                                 } }, trackProps)), jsxRuntime.jsx(SliderThumb, Object.assign({ color: color, __css: {
-                                    top: type.isHorizontal(direction) ? '50%' : `${percentRev}%`,
-                                    left: type.isHorizontal(direction) ? `${percentRev}%` : '50%',
-                                } }, thumbProps))] }), scale && (jsxRuntime.jsx("div", { className: "tremolo-slider-scale-wrapper", css: react.css(Object.assign({ position: 'relative', width: type.isHorizontal(direction) ? length : undefined, height: type.isVertical(direction) ? length : undefined, marginLeft: type.isHorizontal(direction)
+                                    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 - ${util.styleHelper(thickness)}) / 2)`), marginTop: type.isVertical(direction)
+                                : ((_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 - ${util.styleHelper(thickness)}) / 2)`) }, scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.style)), children: scalesList.map((item, index) => {
+                                : ((_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) => {
                             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',
-                                    flexDirection: type.isHorizontal(direction) ? 'column' : 'row',
+                                    flexDirection: isHorizontal(direction) ? 'column' : 'row',
                                     justifyContent: 'center',
                                     alignItems: 'center',
                                     position: 'absolute',
-                                    left: type.isHorizontal(direction)
-                                        ? `${type.isReversed(direction)
-                                            ? 100 - math.normalizeValue(item.at, min, max, skew) * 100
-                                            : math.normalizeValue(item.at, min, max, skew) * 100}%`
+                                    left: isHorizontal(direction)
+                                        ? `${isReversed(direction)
+                                            ? 100 - normalizeValue(item.at, min, max, skew) * 100
+                                            : normalizeValue(item.at, min, max, skew) * 100}%`
                                         : undefined,
-                                    top: type.isVertical(direction)
-                                        ? `${type.isReversed(direction)
-                                            ? 100 - math.normalizeValue(item.at, min, max, skew) * 100
-                                            : math.normalizeValue(item.at, min, max, skew) * 100}%`
+                                    top: isVertical(direction)
+                                        ? `${isReversed(direction)
+                                            ? 100 - normalizeValue(item.at, min, max, skew) * 100
+                                            : normalizeValue(item.at, min, max, skew) * 100}%`
                                         : undefined,
-                                    translate: type.isHorizontal(direction) ? '-50% 0' : '0 -50%',
+                                    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') !=
                                         'number' && (jsxRuntime.jsx("div", { className: "tremolo-slider-scale-mark", css: react.css({
-                                            width: type.isHorizontal(direction)
+                                            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'),
-                                            height: type.isVertical(direction)
+                                            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',
-                                            marginBottom: type.isHorizontal(direction) ? 2 : undefined,
-                                            marginRight: type.isVertical(direction) ? 2 : undefined,
+                                            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') !=
                                         '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,
@@ -494,12 +703,11 @@ function Slider(_a) {
                         }) }))] })] }));
 }
 
+exports.AnimationCanvas = AnimationCanvas;
 exports.Knob = Knob;
+exports.NumberInput = NumberInput;
 exports.Slider = Slider;
-Object.keys(math).forEach(function (k) {
-    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-        enumerable: true,
-        get: function () { return math[k]; }
-    });
-});
+exports.SliderThumb = SliderThumb;
+exports.SliderTrack = SliderTrack;
+exports.gradientDirection = gradientDirection;
 //# sourceMappingURL=index.js.map