@tremolo-ui/react 0.0.1 → 0.0.3

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

@@ -0,0 +1,47 @@
+import { CSSObject } from '@emotion/react';
+import { Units } from '@tremolo-ui/functions/components/NumberInput/type';
+import { ChangeEvent } from 'react';
+import { InputPseudoProps, UserActionPseudoProps } from '../../system/pseudo';
+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.
+ */
+export 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): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/NumberInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAc,KAAK,EAAE,MAAM,mDAAmD,CAAA;AACrF,OAAO,EAAE,WAAW,EAAY,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAE7E,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAEtB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IAGb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxE,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,KAC/C,IAAI,CAAA;IACT,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,KAC/C,IAAI,CAAA;CACV;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EAAE,OAAO;AACZ,GAAG,EAAE,OAAO;AACZ,IAAI,EAAE,OAAO;AACb,KAAK,EACL,QAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAc,EACd,KAAK,EACL,eAAwB,EACxB,aAAoB,EACpB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,GAAG,MAAM,EACV,EAAE,gBAAgB,GAAG,qBAAqB,GAAG,gBAAgB,oDA6E7D"}

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

@@ -0,0 +1,11 @@
+import { CSSObject } from '@emotion/react';
+import { ReactNode, ReactElement } from 'react';
+interface SliderThumbProps {
+    color?: string;
+    style?: CSSObject;
+    __css?: CSSObject;
+    children?: ReactNode;
+}
+export declare function SliderThumb({ color, children, style, __css, }: SliderThumbProps): ReactElement;
+export {};
+//# sourceMappingURL=Thumb.d.ts.map

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

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

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

@@ -0,0 +1,10 @@
+import { CSSObject } from '@emotion/react';
+import { ReactElement } from 'react';
+interface SliderTrackProps {
+    style?: CSSObject;
+    children?: ReactElement;
+    __css?: CSSObject;
+}
+export declare function SliderTrack({ children, style, __css, }: SliderTrackProps): ReactElement;
+export {};
+//# sourceMappingURL=Track.d.ts.map

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/cjs/types/packages/react/src/components/Slider/index.d.ts

@@ -0,0 +1,34 @@
+import { CSSObject } from '@emotion/react';
+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';
+interface SliderProps {
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    skew?: number;
+    length?: number | string;
+    thickness?: number | string;
+    direction?: Direction;
+    scale?: ['step', ScaleType] | [number, ScaleType] | ScaleOrderList[];
+    scaleOption?: ScaleOption;
+    color?: string;
+    bg?: string;
+    bodyNoSelect?: boolean;
+    enableWheel?: WheelOption;
+    className?: string;
+    style?: CSSObject;
+    onChange?: (value: number) => void;
+    children?: ReactElement | ReactElement[];
+}
+/**
+ * Customizable slider
+ */
+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 '@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

@@ -0,0 +1,5 @@
+type Options = boolean | AddEventListenerOptions;
+type CallbackFunc = (div: EventTarget | null) => void;
+export declare function useRefCallbackEvent<K extends keyof DocumentEventMap>(event: K, handler: (event: DocumentEventMap[K]) => void, options?: Options, deps?: React.DependencyList): CallbackFunc;
+export {};
+//# sourceMappingURL=useRefCallbackEvent.d.ts.map

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

@@ -0,0 +1,14 @@
+import { CSSObject } from '@emotion/react';
+export declare const inputPseudoSelectors: readonly ["&:enabled", "&:disabled", "&:read-only", "&:read-write", "&:placeholder-shown", "&:blank", "&:valid", "&:invalid", "&:in-range", "&:out-of-range"];
+export declare const inputPseudoPropNames: readonly ["_enabled", "_disabled", "_readOnly", "_readWrite", "_placeholderShown", "_blank", "_valid", "_invalid", "_inRange", "_outOfRange"];
+export type InputPseudos = (typeof inputPseudoPropNames)[number];
+export type InputPseudoProps = Partial<{
+    [key in InputPseudos]: CSSObject;
+}>;
+export declare const userActionPseudoSelectors: readonly ["&:hover", "&:active", "&:focus"];
+export declare const userActionPseudoPropNames: readonly ["_hover", "_active", "_focus"];
+export type UserActionPseudos = (typeof userActionPseudoPropNames)[number];
+export type UserActionPseudoProps = Partial<{
+    [key in UserActionPseudos]: CSSObject;
+}>;
+//# sourceMappingURL=pseudo.d.ts.map

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,57 +1,115 @@
+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 { WheelOption as WheelOption$1 } from '@/types';
-import React$1, { ReactNode } from 'react';
+import { CSSObject } from '@emotion/react';
+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';
 
-declare function clamp(value: number, min: number, max: number): number;
-declare function normalizeValue(rawValue: number, min: number, max: number, skew?: number): number;
-declare function rawValue(normalizedValue: number, min: number, max: number, skew?: number): number;
-declare function skewWithCenterValue(centerValue: number, min: number, max: number): number;
-declare function stepValue(value: number, step: number): number;
-declare function toFixed(x: number, fractionDigits?: number): number;
-declare function decimalPart(x: number | string): string | undefined;
+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;
 
-type WheelOption = ['normalized' | 'raw', number];
+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<{
+    [key in UserActionPseudos]: CSSObject;
+}>;
 
 interface KnobProps {
     value: number;
     min: number;
     max: number;
+    defaultValue?: number;
+    startValue?: number;
     step?: number;
     skew?: number;
-    size?: number | string;
-    active?: string;
-    inactive?: string;
-    bg?: string;
-    thumb?: string;
-    lineWeight?: number | string;
-    thumbWeight?: number | string;
+    size?: number | `${number}%`;
+    width?: number | `${number}%`;
+    height?: number | `${number}%`;
+    options?: {
+        active?: string;
+        inactive?: string;
+        bg?: string;
+        thumb?: string;
+        lineWeight?: number;
+        thumbWeight?: number;
+    };
     cursor?: string;
-    style?: React.CSSProperties;
+    style?: CSSObject;
     bodyNoSelect?: boolean;
-    enableWheel?: WheelOption$1;
+    enableWheel?: WheelOption;
+    enableDoubleClickDefault?: boolean;
     onChange?: (value: number) => void;
 }
-declare function Knob({ value, min, max, step, skew, size, active, inactive, bg, thumb, lineWeight, thumbWeight, cursor, style, bodyNoSelect, enableWheel, onChange, }: KnobProps): _emotion_react_jsx_runtime.JSX.Element;
+/**
+ * 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$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement>, 'onChange'>): _emotion_react_jsx_runtime.JSX.Element;
 
-type Horizontal = 'right' | 'left';
-type Vertical = 'up' | 'down';
-type Direction = Horizontal | Vertical;
-type ScaleType = 'mark' | 'mark-number' | 'number';
-type ScaleOrderList = {
-    at: number;
-    type: ScaleType;
-    style?: {
-        markColor?: string;
-        labelColor?: string;
-        length?: number | string;
-        thickness?: number | string;
-    };
-};
-type ScaleOption = {
-    markColor?: string;
-    labelColor?: string;
-    gap?: number | string;
-    style?: React.CSSProperties;
+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;
 };
 
 interface SliderProps {
@@ -59,21 +117,24 @@ interface SliderProps {
     min: number;
     max: number;
     step?: number;
+    skew?: number;
     length?: number | string;
     thickness?: number | string;
     direction?: Direction;
-    skew?: number;
     scale?: ['step', ScaleType] | [number, ScaleType] | ScaleOrderList[];
     scaleOption?: ScaleOption;
     color?: string;
     bg?: string;
-    cursor?: string;
-    style?: React$1.CSSProperties;
     bodyNoSelect?: boolean;
-    enableWheel?: WheelOption$1;
+    enableWheel?: WheelOption;
+    className?: string;
+    style?: CSSObject;
     onChange?: (value: number) => void;
-    children?: ReactNode;
+    children?: ReactElement | ReactElement[];
 }
-declare function Slider({ value, min, max, step, length, thickness, direction, skew, scale, scaleOption, color, bg, cursor, style, bodyNoSelect, enableWheel, onChange, children, }: SliderProps): _emotion_react_jsx_runtime.JSX.Element;
+/**
+ * Customizable slider
+ */
+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, type WheelOption, clamp, decimalPart, normalizeValue, rawValue, skewWithCenterValue, stepValue, toFixed };
+export { AnimationCanvas, Knob, NumberInput, Slider };