@tremolo-ui/react 0.1.1 → 0.1.3

package/dist/index.d.ts

@@ -0,0 +1,827 @@
+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 * 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_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime8 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";
+import { InputEventOption } from "@tremolo-ui/functions";
+import { Units } from "@tremolo-ui/functions/NumberInput";
+import { ScaleOptions, ScaleType } from "@tremolo-ui/functions/Slider";
+
+//#region src/components/AnimationCanvas/index.d.ts
+/** @category AnimationCanvas */
+type InitFunction = (context: CanvasRenderingContext2D, option: {
+  /** current canvas width */
+  width: number;
+  /** current canvas height */
+  height: number;
+}) => void;
+/** @category AnimationCanvas */
+type DrawFunction = (context: CanvasRenderingContext2D, option: {
+  /** current canvas width */
+  width: number;
+  /** current canvas height */
+  height: number;
+  /** frame count */
+  count: number;
+  /** delta time (ms) */
+  deltaTime: number;
+  /** elapsed time (ms) */
+  elapsedTime: number;
+  /** frame per second */
+  fps: number;
+}) => void;
+/** @category AnimationCanvas */
+interface CommonProps {
+  /**
+   * @see https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
+   */
+  options?: CanvasRenderingContext2DSettings;
+  init?: InitFunction;
+  draw: DrawFunction;
+}
+/** @category AnimationCanvas */
+interface AbsoluteSizingProps {
+  width?: number;
+  height?: number;
+}
+/** @category AnimationCanvas */
+interface RelativeSizingProps {
+  relativeSize?: boolean;
+  reduceFlickering?: boolean;
+}
+/** @category AnimationCanvas */
+type AnimationCanvasProps = CommonProps & AbsoluteSizingProps & RelativeSizingProps;
+/**
+ * A simple animatable canvas with requestAnimationFrame()
+ * @category AnimationCanvas
+ */
+declare function AnimationCanvas(props: CommonProps & AbsoluteSizingProps & Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>): ReactElement;
+declare function AnimationCanvas(pros: CommonProps & RelativeSizingProps & Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>): ReactElement;
+//# sourceMappingURL=index.d.ts.map
+//#endregion
+//#region src/components/AnimationKnob/index.d.ts
+/** @category AnimationKnob */
+type AnimationKnobProps = {
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  skew?: number;
+  /**
+   * value set when double-clicking
+   * @see enableDoubleClickDefault
+   */
+  defaultValue?: number;
+  /**
+   * Value to be used as the starting point of the line when drawing.
+   * @default min
+   */
+  startValue?: number;
+  /** Priority over width or height */
+  size?: number | `${number}%`;
+  width?: number | `${number}%`;
+  height?: number | `${number}%`;
+  /** active line color */
+  activeColor?: string;
+  /** inactive line color */
+  inactiveColor?: string;
+  /** background color */
+  bg?: string;
+  /** thumb color */
+  thumb?: string;
+  lineWeight?: number;
+  thumbWeight?: number;
+  draw?: DrawFunction;
+  /** Whether to apply `{use-select: none}` when dragging */
+  bodyNoSelect?: boolean;
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption | null;
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption | null;
+  enableDoubleClickDefault?: boolean;
+  style?: CSSProperties;
+  onChange?: (value: number) => void;
+};
+/**
+ * @category AnimationKnob
+ */
+interface AnimationKnobMethods {
+  focus: () => void;
+  blur: () => void;
+}
+/**
+ * Animatable rotary knob.
+ * @category AnimationKnob
+ */
+declare const AnimationKnob: React$1.ForwardRefExoticComponent<AnimationKnobProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof AnimationKnobProps> & React$1.RefAttributes<AnimationKnobMethods>>;
+//# sourceMappingURL=index.d.ts.map
+//#endregion
+//#region src/components/DragObserver/index.d.ts
+/** @category DragObserver */
+interface DragObserverProps<T extends ElementType> {
+  /**
+   * React.ElementType
+   * @default div
+   */
+  as?: T;
+  /**
+   * Threshold at which the onDrag event fires.
+   * Prevents onDrag events from firing, for example, when double-clicking.
+   */
+  threshold?: number;
+  children?: ReactNode;
+  onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void;
+  onDragStart?: () => void;
+  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;
+//# sourceMappingURL=index.d.ts.map
+//#endregion
+//#region src/components/Knob/index.d.ts
+/** @category Knob */
+interface KnobProps {
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  skew?: number;
+  /**
+   * value set when double-clicking
+   * @default min
+   * @see enableDoubleClickDefault
+   */
+  defaultValue?: number;
+  /**
+   * Value to be used as the starting point of the line when drawing.
+   * @default min
+   */
+  startValue?: number;
+  size?: number;
+  /** Whether to apply `{use-select: none}` when dragging */
+  bodyNoSelect?: boolean;
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption | null;
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption | null;
+  enableDoubleClickDefault?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  /** color */
+  activeLine?: string;
+  /** color */
+  inactiveLine?: string;
+  /** color */
+  thumb?: string;
+  /** color */
+  thumbLine?: string;
+  /** percent (0-100) */
+  thumbSize?: number;
+  /** percent (0-100) */
+  thumbLineWeight?: number;
+  /** percent (0-100) */
+  thumbLineLength?: number;
+  /** percent (0-100) */
+  lineWeight?: number;
+  classes?: {
+    activeLine?: string;
+    inactiveLine?: string;
+    thumb?: string;
+    thumbLine?: string;
+  };
+  onChange?: (value: number) => void;
+}
+/**
+ * @category Knob
+ */
+interface KnobMethods {
+  focus: () => void;
+  blur: () => void;
+}
+/**
+ * Interactive rotary knob component implemented in SVG.
+ *
+ * @category Knob
+ */
+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/Stepper.d.ts
+/** @category NumberInput */
+interface StepperProps {
+  /** Display only when hovering. */
+  dynamic?: boolean;
+  children?: ReactNode;
+}
+/** @category NumberInput */
+declare function Stepper({
+  dynamic,
+  children,
+  className,
+  ...props
+}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>): react_jsx_runtime5.JSX.Element;
+//# sourceMappingURL=Stepper.d.ts.map
+//#endregion
+//#region src/components/NumberInput/IncrementStepper.d.ts
+/** @category NumberInput */
+interface IncrementStepperProps {
+  size?: number;
+  children?: ReactNode;
+}
+/** @category NumberInput */
+declare function IncrementStepper({
+  size,
+  children,
+  className,
+  ...props
+}: IncrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof IncrementStepperProps>): react_jsx_runtime6.JSX.Element;
+//# sourceMappingURL=IncrementStepper.d.ts.map
+//#endregion
+//#region src/components/NumberInput/DecrementStepper.d.ts
+/** @category NumberInput */
+interface DecrementStepperProps {
+  size?: number;
+  children?: ReactNode;
+}
+/** @category NumberInput */
+declare function DecrementStepper({
+  size,
+  children,
+  className,
+  ...props
+}: DecrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DecrementStepperProps>): react_jsx_runtime4.JSX.Element;
+//# sourceMappingURL=DecrementStepper.d.ts.map
+//#endregion
+//#region src/components/NumberInput/index.d.ts
+/** @category NumberInput */
+interface NumberInputProps {
+  value: number | string;
+  /**
+   * @default Number.MIN_SAFE_INTEGER
+   */
+  min?: number;
+  /**
+   * @default Number.MAX_SAFE_INTEGER
+   */
+  max?: number;
+  step?: number;
+  /**
+   * @example
+   * units='Hz'
+   * units={[['Hz', 1], ['kHz', 1000]]}
+   * units={[['ms', 1], ['s', 1000]]}
+   */
+  units?: string | Units;
+  /**
+   * Digits for rounding numbers.
+   * @example
+   * with:
+   * units={[['Hz', 1], ['kHz', 1000]]}
+   * digit={3}
+   * results:
+   * value=100 -> 100Hz, value=1600 -> 1.60Hz
+   */
+  digit?: number;
+  readonly?: boolean;
+  variant?: 'outline' | 'filled' | 'flushed' | 'unstyled';
+  selectWithFocus?: 'all' | 'number' | 'none';
+  blurOnEnter?: boolean;
+  keepWithinRange?: boolean;
+  clampValueOnBlur?: boolean;
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption | null;
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption | null;
+  activeColor?: string;
+  wrapperClassName?: string;
+  onChange?: (value: number, text: string) => void;
+  onFocus?: (value: number, text: string, event: React.FocusEvent<HTMLInputElement, Element>) => void;
+  onBlur?: (value: number, text: string, event: React.FocusEvent<HTMLInputElement, Element>) => void;
+  children?: ReactNode;
+}
+/**
+ * @category NumberInput
+ */
+interface NumberInputMethods {
+  focus: () => void;
+  blur: () => void;
+}
+/**
+ * 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;
+};
+//#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
+ */
+interface KeyProps {
+  noteNumber: number;
+  width?: number;
+  height?: number | `${number}%`;
+  bg?: string;
+  color?: string;
+  activeBg?: string;
+  activeColor?: string;
+  style?: CSSProperties;
+  /**
+   * \<KeyLabel />
+   */
+  children?: ReactElement;
+  /** @internal */
+  __width?: number;
+}
+/**
+ * @category Piano
+ */
+interface KeyMethods {
+  play: () => void;
+  stop: () => void;
+  played: () => boolean;
+}
+/** @category Piano */
+
+/** @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>>;
+/** @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
+//#endregion
+//#region src/components/Piano/KeyLabel.d.ts
+/** @category Piano */
+interface KeyLabelProps {
+  /**
+   * override Piano.label
+   */
+  label?: (note: number, index: number) => ReactNode;
+  wrapperClassName?: string;
+  wrapperStyle?: CSSProperties;
+  /** @internal */
+  __note?: number;
+  /** @internal */
+  __label?: (note: number, index: number) => ReactNode;
+}
+/** @category Piano */
+declare function KeyLabel({
+  label,
+  className,
+  wrapperClassName,
+  wrapperStyle,
+  __note,
+  __label,
+  ...props
+}: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>): false | react_jsx_runtime3.JSX.Element;
+//# sourceMappingURL=KeyLabel.d.ts.map
+//#endregion
+//#region src/components/Piano/index.d.ts
+/**
+ * Piano component
+ *
+ * TODO:
+ * - add scale highlight
+ */
+/** @category Piano */
+declare function getNoteRangeArray(noteRange: NoteRange): number[];
+/** @category Piano */
+interface PianoProps {
+  noteRange: NoteRange;
+  glissando?: boolean;
+  midiMax?: number;
+  keyboardShortcuts?: KeyboardShortcuts;
+  fill?: boolean;
+  whiteNoteWidth?: number;
+  blackNoteWidth?: number;
+  height?: number | string;
+  style?: CSSProperties;
+  onPlayNote?: (noteNumber: number) => void;
+  onStopNote?: (noteNumber: number) => void;
+  label?: (note: number, index: number) => ReactNode;
+  /**
+   * \<WhiteKey /> | \<BlackKey />
+   */
+  children?: ReactElement | ReactElement[];
+}
+/**
+ * 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;
+};
+/** @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_runtime9.JSX.Element;
+//# sourceMappingURL=Track.d.ts.map
+//#endregion
+//#region src/components/Slider/Scale.d.ts
+/** @category Slider */
+interface ScaleProps {
+  gap?: number | string;
+  options?: ScaleOptions;
+  children?: ReactNode;
+}
+/** @category Slider */
+declare function Scale({
+  gap,
+  options,
+  children,
+  className,
+  style,
+  ...props
+}: ScaleProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>): react_jsx_runtime8.JSX.Element;
+//# sourceMappingURL=Scale.d.ts.map
+//#endregion
+//#region src/components/Slider/ScaleOption.d.ts
+/** @category Slider */
+interface ScaleOptionProps {
+  value: number;
+  type?: ScaleType;
+  /** Display text instead of value. */
+  label?: string;
+  /** mark thickness */
+  thickness?: number | string;
+  /** mark length */
+  length?: number | string;
+  /** Gap between mark and label. */
+  gap?: number | string;
+  labelWidth?: number | string;
+  classes?: {
+    mark?: string;
+    label?: string;
+  };
+  styles?: {
+    mark?: CSSProperties;
+    label?: CSSProperties;
+  };
+}
+/** @category Slider */
+declare function ScaleOption({
+  value,
+  type,
+  label,
+  thickness,
+  length,
+  gap,
+  labelWidth,
+  classes,
+  styles,
+  className,
+  style,
+  ...props
+}: ScaleOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>): react_jsx_runtime10.JSX.Element;
+//# sourceMappingURL=ScaleOption.d.ts.map
+//#endregion
+//#region src/components/Slider/index.d.ts
+/** @category Slider */
+interface SliderProps {
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  skew?: number;
+  vertical?: boolean;
+  reverse?: boolean;
+  bodyNoSelect?: boolean;
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption | null;
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption | null;
+  /**
+   * Only the appearance will change.
+   * Please consider using with readonly.
+   */
+  disabled?: boolean;
+  /**
+   * Make the value unchangeable.
+   */
+  readonly?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  onChange?: (value: number) => void;
+  onDragStart?: (value: number) => void;
+  onDragEnd?: (value: number) => void;
+  /** \<SliderThumb /> | \<SliderTrack /> */
+  children?: ReactElement | ReactElement[];
+}
+/**
+ * @category Slider
+ */
+interface SliderMethods {
+  focus: () => void;
+  blur: () => void;
+}
+/**
+ * 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>>;
+//#endregion
+//#region src/components/WheelObserver/index.d.ts
+/**
+ * @example
+ * <WheelObserver
+ *   onWheel={(event) => {
+ *     event.preventDefault()
+ *     console.log(event.deltaY)
+ *   }
+ * >
+ *   <div>Wheel here</div>
+ * </WheelObserver>
+ */
+/** @category WheelObserver */
+interface WheelObserverProps<T extends ElementType> {
+  /**
+   * React.ElementType
+   * @default div
+   */
+  as?: T;
+  children?: ReactNode;
+  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;
+//# 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 {
+  width?: number | string;
+  height?: number | string;
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactElement;
+  /** inherit */
+  __thumb?: ReactElement;
+}
+/** @category XYPad */
+declare function XYPadArea({
+  width,
+  height,
+  color,
+  children,
+  className,
+  style,
+  __thumb,
+  ...props
+}: AreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AreaProps>): react_jsx_runtime11.JSX.Element;
+//# sourceMappingURL=Area.d.ts.map
+//#endregion
+//#region src/components/XYPad/index.d.ts
+/**
+ * Two-dimensional slider component.
+ * @category XYPad
+ */
+interface ValueOptions {
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  skew?: number;
+  reverse?: boolean;
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption | null;
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption | null;
+}
+/** @category XYPad */
+interface XYPadProps {
+  x: ValueOptions;
+  y: ValueOptions;
+  bodyNoSelect?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  onChange?: (valueX: number, valueY: number) => void;
+  onDragStart?: (valueX: number, valueY: number) => void;
+  onDragEnd?: (valueX: number, valueY: number) => void;
+  /** \<XYPadThumb /> | \<XYPadArea /> */
+  children?: ReactElement | ReactElement[];
+}
+/** @category XYPad */
+interface XYPadMethods {
+  focus: () => void;
+  blur: () => void;
+}
+/**
+ * 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>>;
+//#endregion
+//#region src/hooks/useAnimationFrame.d.ts
+declare function useAnimationFrame(callback?: () => void, deps?: DependencyList): void;
+//# sourceMappingURL=useAnimationFrame.d.ts.map
+//#endregion
+//#region src/hooks/useDrag.d.ts
+interface UseDragProps {
+  threshold?: number;
+  onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void;
+  onDragStart?: () => void;
+  onDragEnd?: () => void;
+}
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+declare function useDrag<T extends Element>({
+  threshold,
+  onDrag,
+  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> {
+  baseElementRef: RefObject<T | null>;
+  onDrag: (normalizedX: number, normalizedY: number) => void;
+  onDragStart?: (normalizedX: number, normalizedY: number) => void;
+  onDragEnd?: (normalizedX: number, normalizedY: number) => void;
+}
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+declare function useDragWithElement<T extends Element>({
+  baseElementRef,
+  onDrag,
+  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;
+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
+declare function useInterval(callback: () => void, delay: number | null): void;
+//# sourceMappingURL=useInterval.d.ts.map
+//#endregion
+//#region src/hooks/useLongPress.d.ts
+declare function useLongPress(callback: () => void, initialDelay?: number, interval?: number): () => void;
+//# sourceMappingURL=useLongPress.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 };
+//# sourceMappingURL=index.d.ts.map