@tremolo-ui/react 0.1.0 → 0.1.2

package/dist/esm/types/hooks/useAnimationFrame.d.ts

@@ -1,3 +1,3 @@
 import { DependencyList } from 'react';
-export declare const useAnimationFrame: (callback?: () => void, deps?: DependencyList) => void;
+export declare function useAnimationFrame(callback?: () => void, deps?: DependencyList): void;
 //# sourceMappingURL=useAnimationFrame.d.ts.map

package/dist/esm/types/hooks/useAnimationFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimationFrame.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimationFrame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAkC,MAAM,OAAO,CAAA;AAEtE,eAAO,MAAM,iBAAiB,GAC5B,qBAAmB,EACnB,OAAM,cAAmB,SAa1B,CAAA"}
+{"version":3,"file":"useAnimationFrame.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimationFrame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAkC,MAAM,OAAO,CAAA;AAEtE,wBAAgB,iBAAiB,CAC/B,QAAQ,aAAW,EACnB,IAAI,GAAE,cAAmB,QAa1B"}

package/dist/esm/types/hooks/useDrag.d.ts

@@ -1,4 +1,4 @@
-interface Props {
+export interface UseDragProps {
     threshold?: number;
     onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void;
     onDragStart?: () => void;
@@ -7,9 +7,8 @@ interface Props {
 /**
  * @returns [refCallback, pointerDownHandler]
  */
-export declare function useDrag<T extends Element>({ threshold, onDrag, onDragStart, onDragEnd, }: Props): [
+export declare function useDrag<T extends Element>({ threshold, onDrag, onDragStart, onDragEnd, }: UseDragProps): [
     (div: EventTarget | null) => void,
     (event: React.PointerEvent<T>) => void
 ];
-export {};
 //# sourceMappingURL=useDrag.d.ts.map

package/dist/esm/types/hooks/useDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,OAAO,EAAE,EACzC,SAAa,EACb,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,KAAK,GAAG;IACT,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAkEA"}
+{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,OAAO,EAAE,EACzC,SAAa,EACb,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,YAAY,GAAG;IAChB,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAkEA"}

package/dist/esm/types/hooks/useDragWithElement.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-interface Props<T extends Element> {
+export interface UseDragWithElementProps<T extends Element> {
     baseElementRef: RefObject<T | null>;
     onDrag: (normalizedX: number, normalizedY: number) => void;
     onDragStart?: (normalizedX: number, normalizedY: number) => void;
@@ -8,9 +8,8 @@ interface Props<T extends Element> {
 /**
  * @returns [refCallback, pointerDownHandler]
  */
-export declare function useDragWithElement<T extends Element>({ baseElementRef, onDrag, onDragStart, onDragEnd, }: Props<T>): [
+export declare function useDragWithElement<T extends Element>({ baseElementRef, onDrag, onDragStart, onDragEnd, }: UseDragWithElementProps<T>): [
     (div: EventTarget | null) => void,
     (event: React.PointerEvent<T>) => void
 ];
-export {};
 //# sourceMappingURL=useDragWithElement.d.ts.map

package/dist/esm/types/hooks/useDragWithElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDragWithElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDragWithElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtD,UAAU,KAAK,CAAC,CAAC,SAAS,OAAO;IAC/B,cAAc,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IACnC,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1D,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAChE,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,OAAO,EAAE,EACpD,cAAc,EACd,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;IACZ,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAkDA"}
+{"version":3,"file":"useDragWithElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDragWithElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtD,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,OAAO;IACxD,cAAc,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IACnC,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1D,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAChE,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,OAAO,EAAE,EACpD,cAAc,EACd,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAAG;IAC9B,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAkDA"}

package/dist/esm/types/index.d.ts

@@ -4,19 +4,19 @@ import './components/NumberInput/index.css';
 import './components/Piano/index.css';
 import './components/Slider/index.css';
 import './components/XYPad/index.css';
-export * from './components/AnimationCanvas';
-export * from './components/AnimationKnob';
-export * from './components/DragObserver';
-export * from './components/Knob';
-export * from './components/NumberInput';
-export * from './components/Piano';
-export * from './components/Slider';
-export * from './components/WheelObserver';
-export * from './components/XYPad';
-export * from './hooks/useAnimationFrame';
-export * from './hooks/useDrag';
-export * from './hooks/useDragWithElement';
-export * from './hooks/useEventListener';
-export * from './hooks/useInterval';
-export * from './hooks/useLongPress';
+export { type AbsoluteSizingProps, AnimationCanvas, type AnimationCanvasProps, type CommonProps, type DrawFunction, type InitFunction, type RelativeSizingProps, } from './components/AnimationCanvas';
+export { AnimationKnob, type AnimationKnobMethods, type AnimationKnobProps, } from './components/AnimationKnob';
+export { DragObserver, type DragObserverProps } from './components/DragObserver';
+export { Knob, type KnobMethods, type KnobProps } from './components/Knob';
+export { DecrementStepper, type DecrementStepperProps, IncrementStepper, type IncrementStepperProps, NumberInput, type NumberInputMethods, type NumberInputProps, Stepper, type StepperProps, } from './components/NumberInput';
+export { BlackKey, KeyLabel, type KeyLabelProps, type KeyMethods, type KeyProps, type KeyboardShortcuts, Piano, type PianoProps, SHORTCUTS, WhiteKey, getNoteRangeArray, } from './components/Piano';
+export { Scale, ScaleOption, type ScaleOptionProps, type ScaleProps, Slider, type SliderMethods, type SliderProps, SliderThumb, type SliderThumbMethods, type SliderThumbProps, SliderTrack, type SliderTrackProps, useSliderContext, } from './components/Slider';
+export { WheelObserver, type WheelObserverProps, } from './components/WheelObserver';
+export { type AreaProps, type ThumbProps, type ValueOptions, XYPad, XYPadArea, type XYPadMethods, type XYPadProps, XYPadThumb, type XYPadThumbMethods, } from './components/XYPad';
+export { useAnimationFrame } from './hooks/useAnimationFrame';
+export { useDrag, type UseDragProps } from './hooks/useDrag';
+export { useDragWithElement, type UseDragWithElementProps, } from './hooks/useDragWithElement';
+export { useEventListener } from './hooks/useEventListener';
+export { useInterval } from './hooks/useInterval';
+export { useLongPress } from './hooks/useLongPress';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,6BAA6B,CAAA;AACpC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,8BAA8B,CAAA;AACrC,OAAO,+BAA+B,CAAA;AACtC,OAAO,8BAA8B,CAAA;AAErC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAElC,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,6BAA6B,CAAA;AACpC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,8BAA8B,CAAA;AACrC,OAAO,+BAA+B,CAAA;AACtC,OAAO,8BAA8B,CAAA;AAErC,OAAO,EACL,KAAK,mBAAmB,EACxB,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,mBAAmB,GACzB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,GACxB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAChF,OAAO,EAAE,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC1E,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,WAAW,EACX,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,OAAO,EACP,KAAK,YAAY,GAClB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,EACL,KAAK,UAAU,EACf,SAAS,EACT,QAAQ,EACR,iBAAiB,GAClB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,KAAK,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,MAAM,EACN,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,WAAW,EACX,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,WAAW,EACX,KAAK,gBAAgB,EACrB,gBAAgB,GACjB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACL,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,EACL,SAAS,EACT,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,UAAU,EACV,KAAK,iBAAiB,GACvB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC5D,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA"}

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React component library for audio app",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "type": "module",
   "types": "dist/cjs/types/index.d.ts",
   "scripts": {
     "sb": "storybook dev -p 6006",

package/src/Globals.d.ts

@@ -1,2 +1,3 @@
+declare module '*.css'
 declare module '*.module.css'
 declare module '*.module.scss'

package/src/hooks/useAnimationFrame.ts

@@ -1,9 +1,9 @@
 import { DependencyList, useCallback, useEffect, useRef } from 'react'
 
-export const useAnimationFrame = (
+export function useAnimationFrame(
   callback = () => {},
   deps: DependencyList = [],
-) => {
+) {
   const reqIdRef = useRef(-1)
   const loop = useCallback(() => {
     reqIdRef.current = requestAnimationFrame(loop)

package/src/hooks/useDrag.ts

@@ -3,7 +3,7 @@ import { useRef, useCallback } from 'react'
 import { useEventListener } from './useEventListener'
 import { useRefCallbackEvent } from './useRefCallbackEvent'
 
-interface Props {
+export interface UseDragProps {
   threshold?: number
 
   onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void
@@ -19,7 +19,7 @@ export function useDrag<T extends Element>({
   onDrag,
   onDragStart,
   onDragEnd,
-}: Props): [
+}: UseDragProps): [
   (div: EventTarget | null) => void,
   (event: React.PointerEvent<T>) => void,
 ] {

package/src/hooks/useDragWithElement.ts

@@ -5,7 +5,7 @@ import { normalizeValue } from '@tremolo-ui/functions'
 import { useEventListener } from './useEventListener'
 import { useRefCallbackEvent } from './useRefCallbackEvent'
 
-interface Props<T extends Element> {
+export interface UseDragWithElementProps<T extends Element> {
   baseElementRef: RefObject<T | null>
   onDrag: (normalizedX: number, normalizedY: number) => void
   onDragStart?: (normalizedX: number, normalizedY: number) => void
@@ -20,7 +20,7 @@ export function useDragWithElement<T extends Element>({
   onDrag,
   onDragStart,
   onDragEnd,
-}: Props<T>): [
+}: UseDragWithElementProps<T>): [
   (div: EventTarget | null) => void,
   (event: React.PointerEvent<T>) => void,
 ] {

package/src/index.ts

@@ -5,19 +5,83 @@ import './components/Piano/index.css'
 import './components/Slider/index.css'
 import './components/XYPad/index.css'
 
-export * from './components/AnimationCanvas'
-export * from './components/AnimationKnob'
-export * from './components/DragObserver'
-export * from './components/Knob'
-export * from './components/NumberInput'
-export * from './components/Piano'
-export * from './components/Slider'
-export * from './components/WheelObserver'
-export * from './components/XYPad'
+export {
+  type AbsoluteSizingProps,
+  AnimationCanvas,
+  type AnimationCanvasProps,
+  type CommonProps,
+  type DrawFunction,
+  type InitFunction,
+  type RelativeSizingProps,
+} from './components/AnimationCanvas'
+export {
+  AnimationKnob,
+  type AnimationKnobMethods,
+  type AnimationKnobProps,
+} from './components/AnimationKnob'
+export { DragObserver, type DragObserverProps } from './components/DragObserver'
+export { Knob, type KnobMethods, type KnobProps } from './components/Knob'
+export {
+  DecrementStepper,
+  type DecrementStepperProps,
+  IncrementStepper,
+  type IncrementStepperProps,
+  NumberInput,
+  type NumberInputMethods,
+  type NumberInputProps,
+  Stepper,
+  type StepperProps,
+} from './components/NumberInput'
+export {
+  BlackKey,
+  KeyLabel,
+  type KeyLabelProps,
+  type KeyMethods,
+  type KeyProps,
+  type KeyboardShortcuts,
+  Piano,
+  type PianoProps,
+  SHORTCUTS,
+  WhiteKey,
+  getNoteRangeArray,
+} from './components/Piano'
+export {
+  Scale,
+  ScaleOption,
+  type ScaleOptionProps,
+  type ScaleProps,
+  Slider,
+  type SliderMethods,
+  type SliderProps,
+  SliderThumb,
+  type SliderThumbMethods,
+  type SliderThumbProps,
+  SliderTrack,
+  type SliderTrackProps,
+  useSliderContext,
+} from './components/Slider'
+export {
+  WheelObserver,
+  type WheelObserverProps,
+} from './components/WheelObserver'
+export {
+  type AreaProps,
+  type ThumbProps,
+  type ValueOptions,
+  XYPad,
+  XYPadArea,
+  type XYPadMethods,
+  type XYPadProps,
+  XYPadThumb,
+  type XYPadThumbMethods,
+} from './components/XYPad'
 
-export * from './hooks/useAnimationFrame'
-export * from './hooks/useDrag'
-export * from './hooks/useDragWithElement'
-export * from './hooks/useEventListener'
-export * from './hooks/useInterval'
-export * from './hooks/useLongPress'
+export { useAnimationFrame } from './hooks/useAnimationFrame'
+export { useDrag, type UseDragProps } from './hooks/useDrag'
+export {
+  useDragWithElement,
+  type UseDragWithElementProps,
+} from './hooks/useDragWithElement'
+export { useEventListener } from './hooks/useEventListener'
+export { useInterval } from './hooks/useInterval'
+export { useLongPress } from './hooks/useLongPress'