@tremolo-ui/react 0.0.2 → 0.0.3

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.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 };