@tremolo-ui/react 0.0.2 → 0.0.3

package/dist/cjs/types/packages/react/src/components/Slider/Track.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Track.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/Slider/Track.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,gBAAgB,GAAG,YAAY,CAMjC"}

package/dist/{esm/types → cjs/types/packages/react}/src/components/Slider/index.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@emotion/react';
-import { Direction, ScaleOrderList, ScaleType } from 'common/components/Slider/type';
-import { WheelOption } from 'common/types';
+import { Direction, ScaleOrderList, ScaleType } from '@tremolo-ui/functions/components/Slider/type';
+import { WheelOption } from '@tremolo-ui/functions/types';
 import { ReactElement } from 'react';
 import { UserActionPseudoProps } from '../../system/pseudo';
 import { ScaleOption } from './type';
@@ -30,5 +30,5 @@ interface SliderProps {
 export declare function Slider({ value, min, max, step, skew, length, thickness, direction, scale, scaleOption, color, bg, className, style, bodyNoSelect, enableWheel, onChange, children, ...pseudo }: SliderProps & UserActionPseudoProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export { SliderThumb } from './Thumb';
 export { SliderTrack } from './Track';
-export * from 'common/components/Slider/type';
+export * from '@tremolo-ui/functions/components/Slider/type';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/types/packages/react/src/components/Slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAU,MAAM,gBAAgB,CAAA;AACvD,OAAO,EACL,SAAS,EAMT,cAAc,EACd,SAAS,EACV,MAAM,8CAA8C,CAAA;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAEzD,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAA;AAInD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEpC,UAAU,WAAW;IAEnB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,cAAc,EAAE,CAAA;IACpE,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CAEzC;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAQ,EACR,IAAQ,EACR,MAAY,EACZ,SAAc,EACd,SAAmB,EACnB,KAAK,EACL,WAAW,EACX,KAAiB,EACjB,EAAW,EACX,SAAS,EACT,KAAK,EACL,YAAmB,EACnB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,WAAW,GAAG,qBAAqB,oDAwPrC;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,cAAc,8CAA8C,CAAA"}

package/dist/cjs/types/packages/react/src/components/Slider/type.d.ts

@@ -0,0 +1,6 @@
+import { CSSObject } from '@emotion/react';
+import type { ScaleOption as Opt } from '@tremolo-ui/functions/components/Slider/type';
+export type ScaleOption = Opt & {
+    style?: CSSObject;
+};
+//# sourceMappingURL=type.d.ts.map

package/dist/cjs/types/packages/react/src/components/Slider/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/Slider/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,KAAK,EAAE,WAAW,IAAI,GAAG,EAAE,MAAM,8CAA8C,CAAA;AAEtF,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA"}

package/dist/cjs/types/packages/react/src/hooks/useCallbackRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCallbackRef.d.ts","sourceRoot":"","sources":["../../../../../../../src/hooks/useCallbackRef.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,SAAS,OAAO,EAAE,EAAE,MAAM,EAC3D,QAAQ,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,GAAG,SAAS,EACjD,IAAI,GAAE,KAAK,CAAC,cAAmB,aAUF,IAAI,wBAClC"}

package/dist/cjs/types/packages/react/src/hooks/useEventListener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../../../../../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAIA,KAAK,MAAM,GAAG,WAAW,GAAG,IAAI,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,CAAA;AAC7D,KAAK,OAAO,GAAG,OAAO,GAAG,uBAAuB,CAAA;AAEhD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAC/D,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,EACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC9C,OAAO,CAAC,EAAE,OAAO,GAChB,YAAY,CAAA;AACf,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,cAAc,EAC7D,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,EACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EAC5C,OAAO,CAAC,EAAE,OAAO,GAChB,YAAY,CAAA;AACf,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC1E,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,EACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAAK,IAAI,EACzD,OAAO,CAAC,EAAE,OAAO,GAChB,YAAY,CAAA"}

package/dist/cjs/types/packages/react/src/hooks/useRefCallbackEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefCallbackEvent.d.ts","sourceRoot":"","sources":["../../../../../../../src/hooks/useRefCallbackEvent.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,GAAG,OAAO,GAAG,uBAAuB,CAAA;AAChD,KAAK,YAAY,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;AAErD,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAClE,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7C,OAAO,CAAC,EAAE,OAAO,EACjB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,GAC1B,YAAY,CAAA"}

package/dist/cjs/types/packages/react/src/index.d.ts

@@ -0,0 +1,7 @@
+export * from '@tremolo-ui/functions/math';
+export type * from '@tremolo-ui/functions/types';
+export { AnimationCanvas } from './components/AnimationCanvas';
+export { Knob } from './components/Knob';
+export { NumberInput } from './components/NumberInput';
+export { Slider } from './components/Slider';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/types/packages/react/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA;AAC1C,mBAAmB,6BAA6B,CAAA;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/cjs/types/packages/react/src/system/pseudo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudo.d.ts","sourceRoot":"","sources":["../../../../../../../src/system/pseudo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAQ1C,eAAO,MAAM,oBAAoB,+JAWvB,CAAA;AAEV,eAAO,MAAM,oBAAoB,+IAWvB,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAChE,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;KACpC,GAAG,IAAI,YAAY,GAAG,SAAS;CACjC,CAAC,CAAA;AAEF,eAAO,MAAM,yBAAyB,6CAI5B,CAAA;AAEV,eAAO,MAAM,yBAAyB,0CAI5B,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1E,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC;KACzC,GAAG,IAAI,iBAAiB,GAAG,SAAS;CACtC,CAAC,CAAA"}

package/dist/esm/index.d.ts

@@ -1,11 +1,34 @@
-export * from 'common/math';
-import { WheelOption } from 'common/types';
-export * from 'common/types';
+export * from '@tremolo-ui/functions/math';
+import { WheelOption } from '@tremolo-ui/functions/types';
+export * from '@tremolo-ui/functions/types';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { CSSObject } from '@emotion/react';
-import React, { ReactElement } from 'react';
-import { ScaleOption as ScaleOption$1, Direction, ScaleType, ScaleOrderList } from 'common/components/Slider/type';
+import React$1, { MutableRefObject, ChangeEvent, ReactElement } from 'react';
+import { Units } from '@tremolo-ui/functions/components/NumberInput/type';
+import { ScaleOption as ScaleOption$1, Direction, ScaleType, ScaleOrderList } from '@tremolo-ui/functions/components/Slider/type';
 
+type DrawFunc = (context: CanvasRenderingContext2D, width: MutableRefObject<number>, height: MutableRefObject<number>, count: number) => void;
+interface AnimationCanvasProps {
+    width?: number;
+    height?: number;
+    relativeSize?: boolean;
+    /** only available relativeSize=true */
+    reduceFlickering?: boolean;
+    options?: CanvasRenderingContext2DSettings;
+    style?: CSSObject;
+    init?: DrawFunc;
+    draw: DrawFunc;
+}
+/**
+ * A simple animatable canvas with requestAnimationFrame()
+ */
+declare function AnimationCanvas({ width, height, style, relativeSize, reduceFlickering, options, init, draw, ...props }: AnimationCanvasProps & Omit<React.ClassAttributes<HTMLCanvasElement> & React.CanvasHTMLAttributes<HTMLCanvasElement>, 'ref' | 'width' | 'height' | 'style'>): _emotion_react_jsx_runtime.JSX.Element;
+
+declare const inputPseudoPropNames: readonly ["_enabled", "_disabled", "_readOnly", "_readWrite", "_placeholderShown", "_blank", "_valid", "_invalid", "_inRange", "_outOfRange"];
+type InputPseudos = (typeof inputPseudoPropNames)[number];
+type InputPseudoProps = Partial<{
+    [key in InputPseudos]: CSSObject;
+}>;
 declare const userActionPseudoPropNames: readonly ["_hover", "_active", "_focus"];
 type UserActionPseudos = (typeof userActionPseudoPropNames)[number];
 type UserActionPseudoProps = Partial<{
@@ -41,7 +64,49 @@ interface KnobProps {
 /**
  * simple rotary Knob.
  */
-declare function Knob({ value, min, max, defaultValue, startValue, step, skew, size, width, height, options, cursor, style, bodyNoSelect, enableWheel, enableDoubleClickDefault, onChange, _active, _focus, _hover, ...props }: KnobProps & UserActionPseudoProps & Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, 'onChange'>): _emotion_react_jsx_runtime.JSX.Element;
+declare function Knob({ value, min, max, defaultValue, startValue, step, skew, size, width, height, options, cursor, style, bodyNoSelect, enableWheel, enableDoubleClickDefault, onChange, _active, _focus, _hover, ...props }: KnobProps & UserActionPseudoProps & Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement>, 'onChange'>): _emotion_react_jsx_runtime.JSX.Element;
+
+interface NumberInputProps {
+    value: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    readOnly?: boolean;
+    tabIndex?: number;
+    /**
+     * @example
+     * units='Hz'
+     * units={[['Hz', 1], ['kHz', 1000]]}
+     * units={[['ms', 1], ['s', 1000]]}
+     */
+    units?: string | Units;
+    /**
+     * NOTE: If units is specified, it is forced to `false`
+     */
+    strict?: boolean;
+    /**
+     * @example
+     * with units-{[['Hz', 1], ['kHz', 1000]]}
+     * 3 ... 100Hz, 1.60Hz
+     */
+    digit?: number;
+    selectWithFocus?: 'all' | 'number' | 'none';
+    blurWithEnter?: boolean;
+    className?: string;
+    style?: CSSObject;
+    onChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (value: number, event: React.FocusEvent<HTMLInputElement, Element>) => void;
+    onBlur?: (value: number, event: React.FocusEvent<HTMLInputElement, Element>) => void;
+}
+/**
+ * Input with some useful functions for entering numerical values.
+ */
+declare function NumberInput({ value, min, // TODO
+max, // TODO
+step, // TODO
+units, disabled, placeholder, readOnly, tabIndex, strict, digit, selectWithFocus, blurWithEnter, className, style, onChange, onFocus, onBlur, ...pseudo }: NumberInputProps & UserActionPseudoProps & InputPseudoProps): _emotion_react_jsx_runtime.JSX.Element;
 
 type ScaleOption = ScaleOption$1 & {
     style?: CSSObject;
@@ -72,4 +137,4 @@ interface SliderProps {
  */
 declare function Slider({ value, min, max, step, skew, length, thickness, direction, scale, scaleOption, color, bg, className, style, bodyNoSelect, enableWheel, onChange, children, ...pseudo }: SliderProps & UserActionPseudoProps): _emotion_react_jsx_runtime.JSX.Element;
 
-export { Knob, Slider };
+export { AnimationCanvas, Knob, NumberInput, Slider };

package/dist/esm/index.js

@@ -1,10 +1,57 @@
-import { normalizeValue, radian, rawValue, clamp, stepValue } from 'common/math';
-export * from 'common/math';
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { css, Global } from '@emotion/react';
-import React, { useRef, useInsertionEffect, useCallback, useEffect, useMemo } from 'react';
-import { isReversed, parseScaleOrderList, isHorizontal, gradientDirection, isVertical } from 'common/components/Slider/type';
-import { styleHelper } from 'common/util';
+import React, { useRef, useEffect, useInsertionEffect, useCallback, useMemo, useState } from 'react';
+
+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 skewWithCenterValue(centerValue, min, max) {
+    if (!(min <= centerValue && centerValue <= max))
+        throw new RangeError('requirements: min <= centerValue <= max');
+    return Math.log(0.5) / Math.log((centerValue - min) / (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(step)) === null || _a === void 0 ? void 0 : _a.length;
+    const v = toFixed(quotient * step, decimalDigits);
+    const next = toFixed((quotient + 1) * step, decimalDigits);
+    return Math.abs(value - v) < Math.abs(value - next) ? v : next;
+}
+function toFixed(x, fractionDigits) {
+    return Number(x.toFixed(fractionDigits));
+}
+function decimalPart(x) {
+    return String(x).split('.')[1];
+}
+function radian(degree) {
+    return (Math.PI * degree) / 180;
+}
+function degree(radian) {
+    return (180 * radian) / Math.PI;
+}
+function dbToGain(db) {
+    return Math.pow(10, db / 20);
+}
+function gainToDb(gain) {
+    return 20 * (Math.log(gain) / Math.LN10);
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -40,53 +87,6 @@ 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 = useRef(() => {
-        throw new Error('Cannot call an event handler while rendering.');
-    });
-    useInsertionEffect(() => {
-        callbackRef.current = callback;
-    });
-    return useCallback((...args) => { var _a; return (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, ...args); }, deps);
-}
-
-function useEventListener(target, event, handler, options) {
-    const listener = useCallbackRef(handler);
-    useEffect(() => {
-        const node = typeof target === 'function' ? target() : (target !== null && target !== void 0 ? target : document);
-        if (!handler || !node)
-            return;
-        node.addEventListener(event, listener, options);
-        return () => {
-            node.removeEventListener(event, listener, options);
-        };
-    }, [event, target, options, listener, handler]);
-    return () => {
-        const node = typeof target === 'function' ? target() : (target !== null && target !== void 0 ? target : document);
-        node === null || node === void 0 ? void 0 : node.removeEventListener(event, listener, options);
-    };
-}
-
-function useRefCallbackEvent(event, handler, options, deps = []) {
-    return useMemo(() => {
-        let cleanup;
-        return (node) => {
-            if (!node) {
-                cleanup === null || cleanup === void 0 ? void 0 : cleanup();
-                return;
-            }
-            node.addEventListener(event, handler, options);
-            cleanup = () => {
-                node.removeEventListener(event, handler, options);
-            };
-        };
-    }, deps);
-}
-
 // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
 const drawingState = [
     'strokeStyle',
@@ -199,6 +199,53 @@ function AnimationCanvas(_a) {
     return (jsxs(Fragment, { children: [jsx("canvas", Object.assign({ 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 }))] }));
 }
 
+/**
+ * This hook is user-land implementation of the experimental `useEffectEvent` hook.
+ * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ */
+function useCallbackRef(callback, deps = []) {
+    const callbackRef = useRef(() => {
+        throw new Error('Cannot call an event handler while rendering.');
+    });
+    useInsertionEffect(() => {
+        callbackRef.current = callback;
+    });
+    return useCallback((...args) => { var _a; return (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, ...args); }, deps);
+}
+
+function useEventListener(target, event, handler, options) {
+    const listener = useCallbackRef(handler);
+    useEffect(() => {
+        const node = typeof target === 'function' ? target() : (target !== null && target !== void 0 ? target : document);
+        if (!handler || !node)
+            return;
+        node.addEventListener(event, listener, options);
+        return () => {
+            node.removeEventListener(event, listener, options);
+        };
+    }, [event, target, options, listener, handler]);
+    return () => {
+        const node = typeof target === 'function' ? target() : (target !== null && target !== void 0 ? target : document);
+        node === null || node === void 0 ? void 0 : node.removeEventListener(event, listener, options);
+    };
+}
+
+function useRefCallbackEvent(event, handler, options, deps = []) {
+    return useMemo(() => {
+        let cleanup;
+        return (node) => {
+            if (!node) {
+                cleanup === null || cleanup === void 0 ? void 0 : cleanup();
+                return;
+            }
+            node.addEventListener(event, handler, options);
+            cleanup = () => {
+                node.removeEventListener(event, handler, options);
+            };
+        };
+    }, deps);
+}
+
 const defaultOptions = {
     active: '#7998ec',
     inactive: '#eee',
@@ -293,6 +340,8 @@ function Knob(_a) {
                     const w = _w.current, cx = w / 2;
                     const h = _h.current, cy = h / 2;
                     const r = Math.min(cx, cy);
+                    if (r <= 0)
+                        return;
                     // reset
                     ctx.clearRect(0, 0, w, h);
                     ctx.lineCap = 'butt';
@@ -327,6 +376,163 @@ function Knob(_a) {
                 } })] })));
 }
 
+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) {
+    if (!units) {
+        return {
+            rawValue: Number(inputString.trim()) || 0,
+            formatValue: inputString.trim(),
+            unit: '',
+        };
+    }
+    else if (typeof units == 'string') {
+        return {
+            rawValue: Number(inputString.trim()) || 0,
+            formatValue: `${inputString.trim()}${units}`,
+            unit: units,
+        };
+    }
+    const unitList = units.map(([u, _s]) => u);
+    const scaleList = units.map(([_u, s]) => s);
+    let rawValue = 0;
+    let formatValue = `${scaleList[0]}`;
+    let unit = unitList[0];
+    const m = inputString.trim().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(v, digit) : v}${s[0]}`;
+            unit = s[0];
+        }
+        else {
+            const [u, scale] = selectUnit(units, rawValue);
+            const v = rawValue / scale;
+            formatValue = `${digit != undefined ? toFixed(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, // TODO
+    max, // TODO
+    step, // TODO
+    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", "units", "disabled", "placeholder", "readOnly", "tabIndex", "strict", "digit", "selectWithFocus", "blurWithEnter", "className", "style", "onChange", "onFocus", "onBlur"]);
+    const [showValue, setShowValue] = useState(parseValue(String(value), units, digit).formatValue);
+    const calculatedStrict = units ? false : strict;
+    const { _active, _focus, _hover } = pseudo;
+    return (jsx("input", { className: 'tremolo-slider' + (className ? ` ${className}` : ''), value: showValue, type: calculatedStrict ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, css: css(Object.assign(Object.assign({ display: 'inline-block', height: '2rem', font: 'inherit', margin: 0, paddingLeft: 10, paddingRight: 10, outlineColor: 'transparent', outlineStyle: 'solid', outlineWidth: 1, background: 'inherit', appearance: 'none', borderStyle: 'solid', borderWidth: 1, borderColor: '#bbb', borderRadius: 4, '&:hover': Object.assign({ outlineColor: '#bbb' }, _hover), '&:focus': Object.assign({ outlineColor: '#4e76e6', outlineWidth: 2 }, _focus) }, (_active && { '&:active': Object.assign({}, _active) })), style)), onChange: (event) => {
+            const v = event.currentTarget.value;
+            setShowValue(v);
+            if (onChange)
+                onChange(parseValue(v, units, digit).rawValue, event);
+        }, onFocus: (event) => {
+            const v = event.currentTarget.value;
+            const parsed = parseValue(v, units, digit);
+            if (selectWithFocus == 'all') {
+                event.currentTarget.setSelectionRange(0, v.length);
+            }
+            else if (selectWithFocus == 'number') {
+                event.currentTarget.setSelectionRange(0, parsed.formatValue.length - parsed.unit.length);
+            }
+            if (onFocus)
+                onFocus(parsed.rawValue, event);
+        }, onBlur: (event) => {
+            // update value
+            const v = event.currentTarget.value;
+            const parsed = parseValue(v, units, digit);
+            setShowValue(parsed.formatValue);
+            if (onBlur)
+                onBlur(parsed.rawValue, event);
+        }, onKeyDown: (event) => {
+            if (blurWithEnter && event.key == 'Enter') {
+                event.currentTarget.blur();
+            }
+        } }));
+}
+
+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 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;
+        }
+    }
+}
+
 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) : (
         // default slider thumb
@@ -493,5 +699,5 @@ function Slider(_a) {
                         }) }))] })] }));
 }
 
-export { Knob, Slider };
+export { AnimationCanvas, Knob, NumberInput, Slider, clamp, dbToGain, decimalPart, degree, gainToDb, normalizeValue, radian, rawValue, skewWithCenterValue, stepValue, toFixed };
 //# sourceMappingURL=index.js.map