@tremolo-ui/react 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -1,32 +1,22 @@
-import * as react0 from "react";
-import React$1, { CSSProperties, ComponentPropsWithoutRef, DependencyList, ElementType, ReactElement, ReactNode, RefObject } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
+import React$1, { CSSProperties, ComponentProps, ComponentPropsWithoutRef, DependencyList, ElementType, ReactElement, ReactNode, Ref, RefObject, SVGProps } from "react";
 import { InputEventOption } from "@tremolo-ui/functions";
+import * as _$_tremolo_ui_dom0 from "@tremolo-ui/dom";
+import { MIDIAccessError, NOT_SUPPORTED, PERMISSION_DENIED } from "@tremolo-ui/dom";
 
 //#region src/components/AnimationCanvas/index.d.ts
-/** @category AnimationCanvas */
 type InitFunction = (context: CanvasRenderingContext2D, option: {
-  /** current canvas width */
-  width: number;
-  /** current canvas height */
+  /** 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 */
+  /** 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 {
   draw: DrawFunction;
   init?: InitFunction;
@@ -36,89 +26,25 @@ interface CommonProps {
    */
   options?: CanvasRenderingContext2DSettings;
 }
-/** @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
+//#region src/components/_util/type.d.ts
+type Override<T, U> = T & Omit<U, keyof T>;
 //#endregion
 //#region src/components/DragObserver/index.d.ts
-/** @category DragObserver */
 interface DragObserverProps<T extends ElementType> {
   /**
    * React.ElementType
@@ -131,16 +57,78 @@ interface DragObserverProps<T extends ElementType> {
    */
   threshold?: number;
   children?: ReactNode;
-  onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void;
+  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.JSX.Element;
-//# sourceMappingURL=index.d.ts.map
+declare function DragObserver<T extends ElementType = 'div'>(props: Override<DragObserverProps<T>, ComponentPropsWithoutRef<T>>): _$react.JSX.Element;
+//#endregion
+//#region src/components/_util/index.d.ts
+declare const cursorStyles: {
+  grabbing: string;
+  grab: string;
+  pointer: string;
+  move: string;
+  none: string;
+};
+type Cursor = keyof typeof cursorStyles;
+//#endregion
+//#region src/components/Knob/ActiveLine.d.ts
+declare function ActiveLine({
+  stroke,
+  strokeWidth,
+  className,
+  ...props
+}: Omit<SVGProps<SVGPathElement>, 'd'>): _$react.JSX.Element;
+//#endregion
+//#region src/components/Knob/InactiveLine.d.ts
+declare function InactiveLine({
+  stroke,
+  strokeWidth,
+  className,
+  ...props
+}: Omit<SVGProps<SVGPathElement>, 'd'>): _$react.JSX.Element;
+//#endregion
+//#region src/components/Knob/SVGRoot.d.ts
+interface SVGRoot {
+  block?: boolean;
+  overflowVisible?: boolean;
+}
+declare function SVGRoot({
+  children,
+  style,
+  ...props
+}: Override<SVGRoot, SVGProps<SVGSVGElement>>): _$react.JSX.Element;
+//#endregion
+//#region src/components/Knob/Thumb.d.ts
+interface Props {
+  /** color */
+  thumb?: string;
+  /** color */
+  thumbLine?: string;
+  /** percent (0-100) */
+  thumbSize?: number;
+  /** percent (0-100) */
+  thumbLineWeight?: number;
+  /** percent (0-100) */
+  thumbLineLength?: number;
+  classes?: {
+    thumb?: string;
+    thumbLine?: string;
+  };
+}
+declare function Thumb({
+  className,
+  thumb,
+  thumbLine,
+  thumbSize,
+  thumbLineWeight,
+  thumbLineLength,
+  classes,
+  ...props
+}: Props & Omit<SVGProps<SVGSVGElement>, 'd' | keyof Props>): _$react.JSX.Element;
 //#endregion
 //#region src/components/Knob/index.d.ts
-/** @category Knob */
 interface KnobProps {
   value: number;
   min: number;
@@ -149,6 +137,7 @@ interface KnobProps {
   skew?: number;
   /**
    * value set when double-clicking
+   * restriction: enableDoubleClickDefault = true
    * @default min
    * @see enableDoubleClickDefault
    */
@@ -160,105 +149,82 @@ interface KnobProps {
   startValue?: number;
   /** width and height */
   size?: number | string;
-  /** Whether to apply `{use-select: none}` when dragging */
-  bodyNoSelect?: boolean;
+  /**
+   * Global style to apply when dragged
+   * @default defaultExternalStyles
+   */
+  externalStyles?: {
+    userSelectNone?: boolean;
+    cursor?: Cursor;
+  };
   /**
    * wheel control option
+   * If null, no event will be triggered
    */
   wheel?: InputEventOption | null;
   /**
    * keyboard control option
+   * If null, no event will be triggered
    */
   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;
-  /** line weight [px] */
-  lineWeight?: number;
   /** angle range [degree] */
   angleRange?: 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
+declare const Knob: {
+  Root: _$react.ForwardRefExoticComponent<KnobProps & Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KnobProps> & _$react.RefAttributes<KnobMethods>>;
+  SVGRoot: typeof SVGRoot;
+  InactiveLine: typeof InactiveLine;
+  ActiveLine: typeof ActiveLine;
+  Thumb: typeof Thumb;
+};
 //#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_runtime0.JSX.Element;
-//# sourceMappingURL=DecrementStepper.d.ts.map
+}: DecrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DecrementStepperProps>): _$react.JSX.Element;
 //#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_runtime0.JSX.Element;
-//# sourceMappingURL=IncrementStepper.d.ts.map
+}: IncrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof IncrementStepperProps>): _$react.JSX.Element;
 //#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_runtime0.JSX.Element;
-//# sourceMappingURL=Stepper.d.ts.map
+}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>): _$react.JSX.Element;
 //#endregion
 //#region src/components/NumberInput/type.d.ts
 /**
@@ -269,7 +235,6 @@ declare function Stepper({
 type Units = [string, number][];
 //#endregion
 //#region src/components/NumberInput/index.d.ts
-/** @category NumberInput */
 interface NumberInputProps {
   value: number | string;
   /**
@@ -306,10 +271,12 @@ interface NumberInputProps {
   clampValueOnBlur?: boolean;
   /**
    * wheel control option
+   * If null, no event will be triggered
    */
   wheel?: InputEventOption | null;
   /**
    * keyboard control option
+   * If null, no event will be triggered
    */
   keyboard?: InputEventOption | null;
   activeColor?: string;
@@ -319,27 +286,21 @@ interface NumberInputProps {
   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: react0.ForwardRefExoticComponent<NumberInputProps & Omit<Omit<react0.DetailedHTMLProps<react0.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | keyof NumberInputProps> & react0.RefAttributes<NumberInputMethods>> & {
+declare const NumberInput: {
+  Root: _$react.ForwardRefExoticComponent<NumberInputProps & Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | keyof NumberInputProps> & _$react.RefAttributes<NumberInputMethods>>;
   Stepper: typeof Stepper;
   IncrementStepper: typeof IncrementStepper;
   DecrementStepper: typeof DecrementStepper;
 };
 //#endregion
 //#region src/components/Piano/key.d.ts
-/**
- * @category Piano
- */
 interface KeyProps {
   noteNumber: number;
   width?: number;
@@ -356,41 +317,32 @@ interface KeyProps {
   /** @internal */
   __width?: number;
 }
-/**
- * @category Piano
- */
 interface KeyMethods {
   play: (velocity?: number) => void;
   stop: () => void;
   played: () => boolean;
 }
-/** @category Piano */
 //#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/KeyLabel.d.ts
-/** @category Piano */
 interface KeyLabelProps {
   /**
    * override Piano.label
@@ -403,7 +355,6 @@ interface KeyLabelProps {
   /** @internal */
   __label?: (note: number, index: number) => ReactNode;
 }
-/** @category Piano */
 declare function KeyLabel({
   label,
   className,
@@ -412,16 +363,13 @@ declare function KeyLabel({
   __note,
   __label,
   ...props
-}: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>): false | react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=KeyLabel.d.ts.map
+}: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>): false | _$react.JSX.Element;
 //#endregion
 //#region src/components/Piano/index.d.ts
 /**
  * [noteRange.first, noteRange.first + 1 ..., noteRange.last]
- * @category Piano
  */
 declare function getNoteRangeArray(noteRange: NoteRange): number[];
-/** @category Piano */
 interface PianoProps {
   noteRange: NoteRange;
   glissando?: boolean;
@@ -440,35 +388,118 @@ interface PianoProps {
    */
   children?: ReactElement | ReactElement[];
 }
-/**
- * @category Piano
- */
 interface PianoMethods {
   playNote: (note: number, velocity?: number) => void;
   stopNote: (note: number) => void;
 }
 /**
  * Customizable piano component.
- * @category Piano
  */
-declare const Piano: React$1.ForwardRefExoticComponent<PianoProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & React$1.RefAttributes<PianoMethods>> & {
+declare const Piano: {
+  Root: 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;
 };
 //#endregion
+//#region src/components/PointsEditor/Background.d.ts
+declare function Background({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<'div'>): _$react.JSX.Element;
+//#endregion
+//#region src/components/PointsEditor/Container.d.ts
+declare function Container({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<'div'>): _$react.JSX.Element;
+//#endregion
+//#region src/components/PointsEditor/Point.d.ts
+type PointBaseType = {
+  x: number;
+  y: number;
+};
+declare function clampPoint(point: PointBaseType, min?: Partial<PointBaseType>, max?: Partial<PointBaseType>): {
+  x: number;
+  y: number;
+};
+interface PointProps<T extends PointBaseType> {
+  value: T;
+  min?: Partial<PointBaseType>;
+  max?: Partial<PointBaseType>;
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
+  color?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  onChange?: (value: PointBaseType) => void;
+  onDragStart?: (value: PointBaseType) => void;
+  onDragEnd?: (value: PointBaseType) => void;
+}
+declare function Point<T extends PointBaseType>({
+  value,
+  min,
+  max,
+  size,
+  width,
+  height,
+  color,
+  disabled,
+  readonly,
+  onChange,
+  onDragStart,
+  onDragEnd,
+  className,
+  style,
+  onPointerDown,
+  ...props
+}: PointProps<T> & Omit<ComponentPropsWithoutRef<'div'>, keyof PointProps<T>>): _$react.JSX.Element;
+//#endregion
+//#region src/components/PointsEditor/index.d.ts
+interface PointsEditorProps {
+  width?: number | string;
+  height?: number | string;
+  grid?: number | PointBaseType;
+  disabled?: boolean;
+  readonly?: boolean;
+  externalStyles?: {
+    userSelectNone?: boolean;
+    cursor?: Cursor;
+  };
+  /**
+   * wheel control option
+   * If null, no event will be triggered
+   */
+  wheel?: InputEventOption | null;
+  /**
+   * keyboard control option
+   * If null, no event will be triggered
+   */
+  keyboard?: InputEventOption | null;
+}
+/**
+ * Multiple Point Controller
+ */
+declare const PointsEditor: {
+  Root: _$react.ForwardRefExoticComponent<PointsEditorProps & Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PointsEditorProps> & _$react.RefAttributes<HTMLDivElement>>;
+  Background: typeof Background;
+  Container: typeof Container;
+  Point: typeof Point;
+};
+//#endregion
 //#region src/components/Slider/type.d.ts
 type ScaleType = 'mark' | 'mark-number' | 'number';
 type ScaleOptions = ['step', ScaleType] | [number, ScaleType];
 //#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,
@@ -476,11 +507,9 @@ declare function Scale({
   className,
   style,
   ...props
-}: ScaleProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=Scale.d.ts.map
+}: ScaleProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>): _$react.JSX.Element;
 //#endregion
 //#region src/components/Slider/ScaleOption.d.ts
-/** @category Slider */
 interface ScaleOptionProps {
   value: number;
   type?: ScaleType;
@@ -502,7 +531,6 @@ interface ScaleOptionProps {
     label?: CSSProperties;
   };
 }
-/** @category Slider */
 declare function ScaleOption({
   value,
   type,
@@ -516,11 +544,9 @@ declare function ScaleOption({
   className,
   style,
   ...props
-}: ScaleOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=ScaleOption.d.ts.map
+}: ScaleOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>): _$react.JSX.Element;
 //#endregion
 //#region src/components/Slider/Thumb.d.ts
-/** @category Slider */
 interface SliderThumbProps {
   size?: number | string;
   width?: number | string;
@@ -532,15 +558,12 @@ interface SliderThumbProps {
   /** @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;
@@ -555,7 +578,6 @@ interface SliderTrackProps {
   /** @internal */
   __percent?: number;
 }
-/** @category Slider */
 declare function Track({
   length,
   thickness,
@@ -568,8 +590,7 @@ declare function Track({
   __thumb,
   __percent,
   ...props
-}: SliderTrackProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=Track.d.ts.map
+}: SliderTrackProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>): _$react.JSX.Element;
 //#endregion
 //#region src/components/Slider/context.d.ts
 type State = {
@@ -582,35 +603,45 @@ type State = {
   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 {
   value: number;
   min: number;
   max: number;
   step?: number;
   skew?: number;
+  /**
+   * slider orientation
+   * aria-orientation property is also applied.
+   */
   vertical?: boolean;
   reverse?: boolean;
-  bodyNoSelect?: boolean;
+  /** Global style to apply when dragged */
+  externalStyles?: {
+    userSelectNone?: boolean;
+    cursor?: Cursor;
+  };
   /**
    * wheel control option
+   * If null, no event will be triggered
    */
   wheel?: InputEventOption | null;
   /**
    * keyboard control option
+   * If null, no event will be triggered
    */
   keyboard?: InputEventOption | null;
   /**
    * Only the appearance will change.
    * Please consider using with readonly.
+   * aria-disabled property is also applied.
    */
   disabled?: boolean;
   /**
    * Make the value unchangeable.
+   * aria-readonly property is also applied.
    */
   readonly?: boolean;
   className?: string;
@@ -621,18 +652,15 @@ interface SliderProps {
   /** \<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>> & {
+declare const Slider: {
+  Root: 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;
@@ -640,6 +668,15 @@ declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & Omit<Omit<
 };
 //#endregion
 //#region src/components/WheelObserver/index.d.ts
+interface WheelObserverProps<T extends ElementType> {
+  /**
+   * React.ElementType
+   * @default div
+   */
+  as?: T;
+  children?: ReactNode;
+  onWheel?: (event: WheelEvent) => void;
+}
 /**
  * @example
  * <WheelObserver
@@ -651,22 +688,9 @@ declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & Omit<Omit<
  *   <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_runtime0.JSX.Element;
-//# sourceMappingURL=index.d.ts.map
+declare function WheelObserver<T extends ElementType = 'div'>(props: Override<WheelObserverProps<T>, ComponentProps<T>>): _$react.JSX.Element;
 //#endregion
 //#region src/components/XYPad/Area.d.ts
-/** @category XYPad */
 interface XYPadAreaProps {
   width?: number | string;
   height?: number | string;
@@ -677,7 +701,6 @@ interface XYPadAreaProps {
   /** inherit */
   __thumb?: ReactElement;
 }
-/** @category XYPad */
 declare function Area({
   width,
   height,
@@ -687,11 +710,9 @@ declare function Area({
   style,
   __thumb,
   ...props
-}: XYPadAreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadAreaProps>): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=Area.d.ts.map
+}: XYPadAreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadAreaProps>): _$react.JSX.Element;
 //#endregion
 //#region src/components/XYPad/Thumb.d.ts
-/** @category XYPad */
 interface XYPadThumbProps {
   size?: number | string;
   width?: number | string;
@@ -707,17 +728,14 @@ interface XYPadThumbProps {
   /** @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.
- * @category XYPad
  */
 interface ValueOptions {
   value: number;
@@ -735,11 +753,13 @@ interface ValueOptions {
    */
   keyboard?: InputEventOption | null;
 }
-/** @category XYPad */
 interface XYPadProps {
   x: ValueOptions;
   y: ValueOptions;
-  bodyNoSelect?: boolean;
+  externalStyles?: {
+    userSelectNone?: boolean;
+    cursor?: Cursor;
+  };
   disabled?: boolean;
   readonly?: boolean;
   onChange?: (valueX: number, valueY: number) => void;
@@ -748,121 +768,92 @@ interface XYPadProps {
   /** \<XYPadThumb /> | \<XYPadArea /> */
   children?: ReactElement | ReactElement[];
 }
-/** @category XYPad */
 interface XYPadMethods {
   focus: () => void;
   blur: () => void;
+  original: Ref<HTMLDivElement>;
 }
 /**
  * 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: {
+  Root: 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
 //#region src/hooks/useDrag.d.ts
 interface UseDragProps {
   threshold?: number;
-  onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void;
+  onDrag?: (x: number, y: number, deltaX: number, deltaY: number) => void;
   onDragStart?: () => void;
   onDragEnd?: () => void;
 }
 /**
- * @category hooks
  * @returns [refCallback, pointerDownHandler]
  */
 declare function useDrag<T extends Element>({
-  threshold,
+  threshold: _threshold,
   onDrag,
   onDragStart,
   onDragEnd
 }: UseDragProps): [(div: EventTarget | null) => void, (event: React.PointerEvent<T>) => void];
 //#endregion
 //#region src/hooks/useDragWithElement.d.ts
-interface UseDragWithElementProps<T extends Element> {
+interface UseDragWithElement<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;
 }
-/**
- * @category hooks
- * @returns [refCallback, pointerDownHandler]
- */
 declare function useDragWithElement<T extends Element>({
   baseElementRef,
   onDrag,
   onDragStart,
   onDragEnd
-}: UseDragWithElementProps<T>): [(div: EventTarget | null) => void, (event: React.PointerEvent<T>) => void];
+}: UseDragWithElement<T>): {
+  refHandler: (div: EventTarget | null) => void;
+  pointerDownHandler: (event: React.PointerEvent<T>) => void;
+  dragging: boolean;
+};
 //#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;
+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;
+  error: _$_tremolo_ui_dom0.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 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 };
+export { type AbsoluteSizingProps, AnimationCanvas, type AnimationCanvasProps, 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 PointBaseType, type PointProps, PointsEditor, type PointsEditorProps, 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, clampPoint, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useSliderContext };
 //# sourceMappingURL=index.d.ts.map