@tremolo-ui/react 0.1.5 → 0.2.0

package/dist/index.d.cts

@@ -1,20 +1,7 @@
 import * as react0 from "react";
-import * as react2 from "react";
-import * as react6 from "react";
-import * as react8 from "react";
 import React$1, { CSSProperties, ComponentPropsWithoutRef, DependencyList, ElementType, ReactElement, ReactNode, RefObject } from "react";
 import { InputEventOption } from "@tremolo-ui/functions";
-import * as react_jsx_runtime0$1 from "react/jsx-runtime";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/AnimationCanvas/index.d.ts
 /** @category AnimationCanvas */
@@ -149,7 +136,7 @@ interface DragObserverProps<T extends ElementType> {
   onDragEnd?: () => void;
 }
 /** @category DragObserver */
-declare function DragObserver<T extends ElementType = 'div'>(props: DragObserverProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof DragObserverProps<T>>): react_jsx_runtime0$1.JSX.Element;
+declare function DragObserver<T extends ElementType = 'div'>(props: DragObserverProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof DragObserverProps<T>>): react_jsx_runtime0.JSX.Element;
 //# sourceMappingURL=index.d.ts.map
 //#endregion
 //#region src/components/Knob/index.d.ts
@@ -171,7 +158,8 @@ interface KnobProps {
    * @default min
    */
   startValue?: number;
-  size?: number;
+  /** width and height */
+  size?: number | string;
   /** Whether to apply `{use-select: none}` when dragging */
   bodyNoSelect?: boolean;
   /**
@@ -199,8 +187,10 @@ interface KnobProps {
   thumbLineWeight?: number;
   /** percent (0-100) */
   thumbLineLength?: number;
-  /** percent (0-100) */
+  /** line weight [px] */
   lineWeight?: number;
+  /** angle range [degree] */
+  angleRange?: number;
   classes?: {
     activeLine?: string;
     inactiveLine?: string;
@@ -224,29 +214,20 @@ interface KnobMethods {
 declare const Knob: react0.ForwardRefExoticComponent<KnobProps & Omit<Omit<react0.SVGProps<SVGSVGElement>, "ref">, keyof KnobProps> & react0.RefAttributes<KnobMethods>>;
 //# sourceMappingURL=index.d.ts.map
 //#endregion
-//#region src/components/NumberInput/type.d.ts
-/**
- * [unit, scale][]
- * @example
- * [['Hz', 1], ['kHz', 1000]]
- */
-type Units = [string, number][];
-//#endregion
-//#region src/components/NumberInput/Stepper.d.ts
+//#region src/components/NumberInput/DecrementStepper.d.ts
 /** @category NumberInput */
-interface StepperProps {
-  /** Display only when hovering. */
-  dynamic?: boolean;
+interface DecrementStepperProps {
+  size?: number;
   children?: ReactNode;
 }
 /** @category NumberInput */
-declare function Stepper({
-  dynamic,
+declare function DecrementStepper({
+  size,
   children,
   className,
   ...props
-}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>): react_jsx_runtime5.JSX.Element;
-//# sourceMappingURL=Stepper.d.ts.map
+}: DecrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DecrementStepperProps>): react_jsx_runtime0.JSX.Element;
+//# sourceMappingURL=DecrementStepper.d.ts.map
 //#endregion
 //#region src/components/NumberInput/IncrementStepper.d.ts
 /** @category NumberInput */
@@ -260,34 +241,43 @@ declare function IncrementStepper({
   children,
   className,
   ...props
-}: IncrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof IncrementStepperProps>): react_jsx_runtime6.JSX.Element;
+}: IncrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof IncrementStepperProps>): react_jsx_runtime0.JSX.Element;
 //# sourceMappingURL=IncrementStepper.d.ts.map
 //#endregion
-//#region src/components/NumberInput/DecrementStepper.d.ts
+//#region src/components/NumberInput/Stepper.d.ts
 /** @category NumberInput */
-interface DecrementStepperProps {
-  size?: number;
+interface StepperProps {
+  /** Display only when hovering. */
+  dynamic?: boolean;
   children?: ReactNode;
 }
 /** @category NumberInput */
-declare function DecrementStepper({
-  size,
+declare function Stepper({
+  dynamic,
   children,
   className,
   ...props
-}: DecrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DecrementStepperProps>): react_jsx_runtime3.JSX.Element;
-//# sourceMappingURL=DecrementStepper.d.ts.map
+}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>): react_jsx_runtime0.JSX.Element;
+//# sourceMappingURL=Stepper.d.ts.map
+//#endregion
+//#region src/components/NumberInput/type.d.ts
+/**
+ * [unit, scale][]
+ * @example
+ * [['Hz', 1], ['kHz', 1000]]
+ */
+type Units = [string, number][];
 //#endregion
 //#region src/components/NumberInput/index.d.ts
 /** @category NumberInput */
 interface NumberInputProps {
   value: number | string;
   /**
-   * @default Number.MIN_SAFE_INTEGER
+   * Number.MIN_SAFE_INTEGER
    */
   min?: number;
   /**
-   * @default Number.MAX_SAFE_INTEGER
+   * Number.MAX_SAFE_INTEGER
    */
   max?: number;
   step?: number;
@@ -340,31 +330,12 @@ interface NumberInputMethods {
  * Input with some useful functions for entering numerical values.
  * @category NumberInput
  */
-declare const NumberInput: react2.ForwardRefExoticComponent<NumberInputProps & Omit<Omit<react2.DetailedHTMLProps<react2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | keyof NumberInputProps> & react2.RefAttributes<NumberInputMethods>>;
-//#endregion
-//#region src/components/Piano/context.d.ts
-/** @category Piano */
-type NoteRange = {
-  first: number;
-  last: number;
+declare const NumberInput: react0.ForwardRefExoticComponent<NumberInputProps & Omit<Omit<react0.DetailedHTMLProps<react0.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | keyof NumberInputProps> & react0.RefAttributes<NumberInputMethods>> & {
+  Stepper: typeof Stepper;
+  IncrementStepper: typeof IncrementStepper;
+  DecrementStepper: typeof DecrementStepper;
 };
 //#endregion
-//#region src/components/Piano/keyboardShortcuts.d.ts
-/** @category Piano */
-type KeyboardShortcuts = {
-  keys: string[];
-  flags?: {
-    naturalOnly?: boolean;
-  };
-};
-/** @category Piano */
-declare const SHORTCUTS: {
-  HOME_ROW: {
-    keys: string[];
-  };
-};
-//# sourceMappingURL=keyboardShortcuts.d.ts.map
-//#endregion
 //#region src/components/Piano/key.d.ts
 /**
  * @category Piano
@@ -389,17 +360,34 @@ interface KeyProps {
  * @category Piano
  */
 interface KeyMethods {
-  play: () => void;
+  play: (velocity?: number) => void;
   stop: () => void;
   played: () => boolean;
 }
 /** @category Piano */
-
+//#endregion
+//#region src/components/Piano/context.d.ts
 /** @category Piano */
-declare const WhiteKey: React$1.ForwardRefExoticComponent<KeyProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React$1.RefAttributes<KeyMethods>>;
+type NoteRange = {
+  first: number;
+  last: number;
+};
+//#endregion
+//#region src/components/Piano/keyboardShortcuts.d.ts
+/** @category Piano */
+type KeyboardShortcuts = {
+  keys: string[];
+  flags?: {
+    naturalOnly?: boolean;
+  };
+};
 /** @category Piano */
-declare const BlackKey: React$1.ForwardRefExoticComponent<KeyProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React$1.RefAttributes<KeyMethods>>;
-//# sourceMappingURL=key.d.ts.map
+declare const SHORTCUTS: {
+  HOME_ROW: {
+    keys: string[];
+  };
+};
+//# sourceMappingURL=keyboardShortcuts.d.ts.map
 //#endregion
 //#region src/components/Piano/KeyLabel.d.ts
 /** @category Piano */
@@ -424,17 +412,14 @@ declare function KeyLabel({
   __note,
   __label,
   ...props
-}: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>): false | react_jsx_runtime2.JSX.Element;
+}: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>): false | react_jsx_runtime0.JSX.Element;
 //# sourceMappingURL=KeyLabel.d.ts.map
 //#endregion
 //#region src/components/Piano/index.d.ts
 /**
- * Piano component
- *
- * TODO:
- * - add scale highlight
+ * [noteRange.first, noteRange.first + 1 ..., noteRange.last]
+ * @category Piano
  */
-/** @category Piano */
 declare function getNoteRangeArray(noteRange: NoteRange): number[];
 /** @category Piano */
 interface PianoProps {
@@ -447,105 +432,30 @@ interface PianoProps {
   blackNoteWidth?: number;
   height?: number | string;
   style?: CSSProperties;
-  onPlayNote?: (noteNumber: number) => void;
-  onStopNote?: (noteNumber: number) => void;
+  onPlayNote?: (note: number, velocity?: number) => void;
+  onStopNote?: (note: number) => void;
   label?: (note: number, index: number) => ReactNode;
   /**
    * \<WhiteKey /> | \<BlackKey />
    */
   children?: ReactElement | ReactElement[];
 }
+/**
+ * @category Piano
+ */
+interface PianoMethods {
+  playNote: (note: number, velocity?: number) => void;
+  stopNote: (note: number) => void;
+}
 /**
  * Customizable piano component.
  * @category Piano
  */
-declare function Piano({
-  noteRange,
-  glissando,
-  midiMax,
-  keyboardShortcuts,
-  fill,
-  height,
-  whiteNoteWidth: _whiteNoteWidth,
-  style,
-  className,
-  onPlayNote,
-  onStopNote,
-  label,
-  children,
-  onPointerDown,
-  ...props
-}: PianoProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/components/Slider/context.d.ts
-type State = {
-  min: number;
-  max: number;
-  step: number;
-  skew: number;
-  vertical: boolean;
-  reverse: boolean;
-  disabled: boolean;
-  readonly: boolean;
+declare const Piano: React$1.ForwardRefExoticComponent<PianoProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & React$1.RefAttributes<PianoMethods>> & {
+  WhiteKey: React$1.ForwardRefExoticComponent<KeyProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React$1.RefAttributes<KeyMethods>>;
+  BlackKey: React$1.ForwardRefExoticComponent<KeyProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React$1.RefAttributes<KeyMethods>>;
+  KeyLabel: typeof KeyLabel;
 };
-/** @category Slider */
-declare function useSliderContext<T>(selector: (state: State) => T): T;
-//#endregion
-//#region src/components/Slider/Thumb.d.ts
-/** @category Slider */
-interface SliderThumbProps {
-  size?: number | string;
-  width?: number | string;
-  height?: number | string;
-  color?: string;
-  className?: string;
-  style?: CSSProperties;
-  children?: ReactNode;
-  /** @internal */
-  __percent?: number;
-}
-/** @category Slider */
-interface SliderThumbMethods {
-  focus: () => void;
-  blur: () => void;
-}
-/** @category Slider */
-
-/** @category Slider */
-declare const SliderThumb: react6.ForwardRefExoticComponent<SliderThumbProps & react6.RefAttributes<SliderThumbMethods>>;
-//# sourceMappingURL=Thumb.d.ts.map
-//#endregion
-//#region src/components/Slider/Track.d.ts
-/** @category Slider */
-interface SliderTrackProps {
-  length?: number | string;
-  thickness?: number | string;
-  active?: string;
-  inactive?: string;
-  defaultStyle?: boolean;
-  className?: string;
-  style?: CSSProperties;
-  children?: ReactElement;
-  /** @internal */
-  __thumb?: ReactElement;
-  /** @internal */
-  __percent?: number;
-}
-/** @category Slider */
-declare function SliderTrack({
-  length,
-  thickness,
-  active,
-  inactive,
-  children,
-  className,
-  style,
-  defaultStyle,
-  __thumb,
-  __percent,
-  ...props
-}: SliderTrackProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>): react_jsx_runtime8.JSX.Element;
-//# sourceMappingURL=Track.d.ts.map
 //#endregion
 //#region src/components/Slider/type.d.ts
 type ScaleType = 'mark' | 'mark-number' | 'number';
@@ -566,7 +476,7 @@ declare function Scale({
   className,
   style,
   ...props
-}: ScaleProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>): react_jsx_runtime9.JSX.Element;
+}: ScaleProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>): react_jsx_runtime0.JSX.Element;
 //# sourceMappingURL=Scale.d.ts.map
 //#endregion
 //#region src/components/Slider/ScaleOption.d.ts
@@ -606,9 +516,75 @@ declare function ScaleOption({
   className,
   style,
   ...props
-}: ScaleOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>): react_jsx_runtime10.JSX.Element;
+}: ScaleOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>): react_jsx_runtime0.JSX.Element;
 //# sourceMappingURL=ScaleOption.d.ts.map
 //#endregion
+//#region src/components/Slider/Thumb.d.ts
+/** @category Slider */
+interface SliderThumbProps {
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  /** @internal */
+  __percent?: number;
+}
+/** @category Slider */
+interface SliderThumbMethods {
+  focus: () => void;
+  blur: () => void;
+}
+/** @category Slider */
+//#endregion
+//#region src/components/Slider/Track.d.ts
+/** @category Slider */
+interface SliderTrackProps {
+  length?: number | string;
+  thickness?: number | string;
+  active?: string;
+  inactive?: string;
+  defaultStyle?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactElement;
+  /** @internal */
+  __thumb?: ReactElement;
+  /** @internal */
+  __percent?: number;
+}
+/** @category Slider */
+declare function Track({
+  length,
+  thickness,
+  active,
+  inactive,
+  children,
+  className,
+  style,
+  defaultStyle,
+  __thumb,
+  __percent,
+  ...props
+}: SliderTrackProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>): react_jsx_runtime0.JSX.Element;
+//# sourceMappingURL=Track.d.ts.map
+//#endregion
+//#region src/components/Slider/context.d.ts
+type State = {
+  min: number;
+  max: number;
+  step: number;
+  skew: number;
+  vertical: boolean;
+  reverse: boolean;
+  disabled: boolean;
+  readonly: boolean;
+};
+/** @category Slider */
+declare function useSliderContext<T>(selector: (state: State) => T): T;
+//#endregion
 //#region src/components/Slider/index.d.ts
 /** @category Slider */
 interface SliderProps {
@@ -656,7 +632,12 @@ interface SliderMethods {
  * Customizable slider
  * @category Slider
  */
-declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderProps> & React$1.RefAttributes<SliderMethods>>;
+declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderProps> & React$1.RefAttributes<SliderMethods>> & {
+  Thumb: React$1.ForwardRefExoticComponent<SliderThumbProps & React$1.RefAttributes<SliderThumbMethods>>;
+  Track: typeof Track;
+  Scale: typeof Scale;
+  ScaleOption: typeof ScaleOption;
+};
 //#endregion
 //#region src/components/WheelObserver/index.d.ts
 /**
@@ -681,36 +662,12 @@ interface WheelObserverProps<T extends ElementType> {
   onWheel?: (event: WheelEvent) => void;
 }
 /** @category WheelObserver */
-declare function WheelObserver<T extends ElementType = 'div'>(props: WheelObserverProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof WheelObserverProps<T>>): react_jsx_runtime1.JSX.Element;
+declare function WheelObserver<T extends ElementType = 'div'>(props: WheelObserverProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof WheelObserverProps<T>>): react_jsx_runtime0.JSX.Element;
 //# sourceMappingURL=index.d.ts.map
 //#endregion
-//#region src/components/XYPad/Thumb.d.ts
-/** @category XYPad */
-interface ThumbProps {
-  size?: number | string;
-  width?: number | string;
-  height?: number | string;
-  color?: string;
-  wrapperClassName?: string;
-  wrapperStyle?: CSSProperties;
-  children?: ReactNode;
-  /** @internal */
-  __disabled?: boolean;
-  /** @internal */
-  __css?: CSSProperties;
-}
-/** @category XYPad */
-interface XYPadThumbMethods {
-  focus: () => void;
-  blur: () => void;
-}
-/** @category XYPad */
-declare const XYPadThumb: react8.ForwardRefExoticComponent<ThumbProps & Omit<Omit<react8.DetailedHTMLProps<react8.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ThumbProps> & react8.RefAttributes<XYPadThumbMethods>>;
-//# sourceMappingURL=Thumb.d.ts.map
-//#endregion
 //#region src/components/XYPad/Area.d.ts
 /** @category XYPad */
-interface AreaProps {
+interface XYPadAreaProps {
   width?: number | string;
   height?: number | string;
   color?: string;
@@ -721,7 +678,7 @@ interface AreaProps {
   __thumb?: ReactElement;
 }
 /** @category XYPad */
-declare function XYPadArea({
+declare function Area({
   width,
   height,
   color,
@@ -730,9 +687,33 @@ declare function XYPadArea({
   style,
   __thumb,
   ...props
-}: AreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AreaProps>): react_jsx_runtime11.JSX.Element;
+}: XYPadAreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadAreaProps>): react_jsx_runtime0.JSX.Element;
 //# sourceMappingURL=Area.d.ts.map
 //#endregion
+//#region src/components/XYPad/Thumb.d.ts
+/** @category XYPad */
+interface XYPadThumbProps {
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
+  color?: string;
+  wrapperClassName?: string;
+  wrapperStyle?: CSSProperties;
+  children?: ReactNode;
+  /** @internal */
+  __disabled?: boolean;
+  /** @internal */
+  __readonly?: boolean;
+  /** @internal */
+  __css?: CSSProperties;
+}
+/** @category XYPad */
+interface XYPadThumbMethods {
+  focus: () => void;
+  blur: () => void;
+}
+/** @category XYPad */
+//#endregion
 //#region src/components/XYPad/index.d.ts
 /**
  * Two-dimensional slider component.
@@ -776,9 +757,15 @@ interface XYPadMethods {
  * Simple XYPad
  * @category XYPad
  */
-declare const XYPad: React$1.ForwardRefExoticComponent<XYPadProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & React$1.RefAttributes<XYPadMethods>>;
+declare const XYPad: React$1.ForwardRefExoticComponent<XYPadProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & React$1.RefAttributes<XYPadMethods>> & {
+  Thumb: React$1.ForwardRefExoticComponent<XYPadThumbProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadThumbProps> & React$1.RefAttributes<XYPadThumbMethods>>;
+  Area: typeof Area;
+};
 //#endregion
 //#region src/hooks/useAnimationFrame.d.ts
+/**
+ * @category hooks
+ */
 declare function useAnimationFrame(callback?: () => void, deps?: DependencyList): void;
 //# sourceMappingURL=useAnimationFrame.d.ts.map
 //#endregion
@@ -790,6 +777,7 @@ interface UseDragProps {
   onDragEnd?: () => void;
 }
 /**
+ * @category hooks
  * @returns [refCallback, pointerDownHandler]
  */
 declare function useDrag<T extends Element>({
@@ -798,7 +786,6 @@ declare function useDrag<T extends Element>({
   onDragStart,
   onDragEnd
 }: UseDragProps): [(div: EventTarget | null) => void, (event: React.PointerEvent<T>) => void];
-//# sourceMappingURL=useDrag.d.ts.map
 //#endregion
 //#region src/hooks/useDragWithElement.d.ts
 interface UseDragWithElementProps<T extends Element> {
@@ -808,6 +795,7 @@ interface UseDragWithElementProps<T extends Element> {
   onDragEnd?: (normalizedX: number, normalizedY: number) => void;
 }
 /**
+ * @category hooks
  * @returns [refCallback, pointerDownHandler]
  */
 declare function useDragWithElement<T extends Element>({
@@ -816,23 +804,65 @@ declare function useDragWithElement<T extends Element>({
   onDragStart,
   onDragEnd
 }: UseDragWithElementProps<T>): [(div: EventTarget | null) => void, (event: React.PointerEvent<T>) => void];
-//# sourceMappingURL=useDragWithElement.d.ts.map
 //#endregion
 //#region src/hooks/useEventListener.d.ts
 type Target = EventTarget | null | (() => EventTarget | null);
 type Options = boolean | AddEventListenerOptions;
+/**
+ * @category hooks
+ */
 declare function useEventListener<K extends keyof DocumentEventMap>(target: Target, event: K, handler?: (event: DocumentEventMap[K]) => void, options?: Options): VoidFunction;
 declare function useEventListener<K extends keyof WindowEventMap>(target: Target, event: K, handler?: (event: WindowEventMap[K]) => void, options?: Options): VoidFunction;
 declare function useEventListener<K extends keyof GlobalEventHandlersEventMap>(target: Target, event: K, handler?: (event: GlobalEventHandlersEventMap[K]) => void, options?: Options): VoidFunction;
 //#endregion
 //#region src/hooks/useInterval.d.ts
+/**
+ * @category hooks
+ */
 declare function useInterval(callback: () => void, delay: number | null): void;
 //# sourceMappingURL=useInterval.d.ts.map
 //#endregion
 //#region src/hooks/useLongPress.d.ts
+/**
+ * @category hooks
+ */
 declare function useLongPress(callback: () => void, initialDelay?: number, interval?: number): () => void;
 //# sourceMappingURL=useLongPress.d.ts.map
+//#endregion
+//#region src/hooks/useMIDIAccess.d.ts
+/** @private */
+declare const PERMISSION_DENIED = "PERMISSION_DENIED";
+/** @private */
+declare const NOT_SUPPORTED = "NOT_SUPPORTED";
+/** @private */
+type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED;
+/**
+ * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
+ * @category hooks
+ */
+declare function useMIDIAccess(requestOnMount?: boolean): {
+  request: () => void;
+  midiAccess: MIDIAccess | null;
+  error: MIDIAccessError | null;
+};
+//# sourceMappingURL=useMIDIAccess.d.ts.map
+//#endregion
+//#region src/hooks/useMIDIInput.d.ts
+/**
+ * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
+ * @category hooks
+ */
+declare function useMIDIInput(midiAccess: MIDIAccess | null, onNoteOnEvent?: (note: number, velocity: number) => void, onNoteOffEvent?: (note: number) => void, onPitchBendEvent?: (msb: number, lsb: number) => void): void;
+//# sourceMappingURL=useMIDIInput.d.ts.map
+//#endregion
+//#region src/hooks/useMIDIMessage.d.ts
+/**
+ * Hooks for when you want to process MIDI events in more detail than useMIDIInput.
+ * @category hooks
+ */
+declare function useMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): void;
+//# sourceMappingURL=useMIDIMessage.d.ts.map
 
 //#endregion
-export { type AbsoluteSizingProps, AnimationCanvas, type AnimationCanvasProps, AnimationKnob, type AnimationKnobMethods, type AnimationKnobProps, type AreaProps, BlackKey, type CommonProps, DecrementStepper, type DecrementStepperProps, DragObserver, type DragObserverProps, type DrawFunction, IncrementStepper, type IncrementStepperProps, type InitFunction, KeyLabel, type KeyLabelProps, type KeyMethods, type KeyProps, type KeyboardShortcuts, Knob, type KnobMethods, type KnobProps, NumberInput, type NumberInputMethods, type NumberInputProps, Piano, type PianoProps, type RelativeSizingProps, SHORTCUTS, Scale, ScaleOption, type ScaleOptionProps, type ScaleProps, Slider, type SliderMethods, type SliderProps, SliderThumb, type SliderThumbMethods, type SliderThumbProps, SliderTrack, type SliderTrackProps, Stepper, type StepperProps, type ThumbProps, type UseDragProps, type UseDragWithElementProps, type ValueOptions, WheelObserver, type WheelObserverProps, WhiteKey, XYPad, XYPadArea, type XYPadMethods, type XYPadProps, XYPadThumb, type XYPadThumbMethods, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useSliderContext };
+export { type AbsoluteSizingProps, AnimationCanvas, type AnimationCanvasProps, AnimationKnob, type AnimationKnobMethods, type AnimationKnobProps, type CommonProps, type DecrementStepperProps, DragObserver, type DragObserverProps, type DrawFunction, type IncrementStepperProps, type InitFunction, type KeyLabelProps, type KeyMethods, type KeyProps, type KeyboardShortcuts, Knob, type KnobMethods, type KnobProps, type MIDIAccessError, NOT_SUPPORTED, NumberInput, type NumberInputMethods, type NumberInputProps, PERMISSION_DENIED, Piano, type PianoMethods, type PianoProps, type RelativeSizingProps, SHORTCUTS, type ScaleOptionProps, type ScaleProps, Slider, type SliderMethods, type SliderProps, type SliderThumbMethods, type SliderThumbProps, type SliderTrackProps, type StepperProps, type ValueOptions, WheelObserver, type WheelObserverProps, XYPad, type XYPadAreaProps, type XYPadMethods, type XYPadProps, type XYPadThumbMethods, type XYPadThumbProps, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useSliderContext };
 //# sourceMappingURL=index.d.cts.map