@tremolo-ui/react 0.0.1 → 0.0.3

package/README.md

@@ -1,59 +1,11 @@
+# @tremolo-ui/react
 
-<!-- TODO: set cover image URL, and image size.
-<div align="center">
-  <img src="https://live.staticflickr.com/635/21189618838_b1a1e7f12e_b.jpg" alt="cover image" width="70%" />
-</div> -->
+## Install
 
-*tremolo-ui is now WIP*
-
-# 🚩 Goals
-
-- Components with usability and flexibility
-- Mobile Support
-- Distribute package
-  - React
-  - Web Components
-
----
-
-# [tremolo-ui](https://github.io/m1m0zzz/tremolo-ui)
-
-UI library for Web Audio App
-
-## 🧬 Installation
-
-### React
-
-Install tremolo-ui
-```bash
-npm install --save-dev @tremolo-ui/react
-```
-
-And install dependencies
-
-```bash
-npm install --save-dev react react-dom @emotion/react
-```
-
-### Web Components
-
-Install tremolo-ui
 ```bash
-npm install --save-dev @tremolo-ui/web-components
+npm i @tremolo-ui/react
 ```
 
+## Note
 
-## 📚 Docs
-
-documentation w/ Storybook
-
-[Docs](https://main--66c84646f5ab3514847ae4d5.chromatic.com/)
-
-
-## 🦝 Contributing
-Please see [contribution guide](./CONTRIBUTING.md)
-
-日本語版は [コントリビューション ガイド](./CONTRIBUTING.ja.md) を参照してください。
-
-## 📜 LICENSE
-tremolo-ui is [MIT License](./LICENSE)
+See https://github.com/m1m0zzz/tremolo-ui

package/dist/cjs/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 };