@tremolo-ui/react 0.1.6 → 0.2.1

package/dist/index.d.ts

@@ -1,32 +1,20 @@
-import * as react3 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";
 
 //#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 +24,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 +55,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 +135,7 @@ interface KnobProps {
   skew?: number;
   /**
    * value set when double-clicking
+   * restriction: enableDoubleClickDefault = true
    * @default min
    * @see enableDoubleClickDefault
    */
@@ -160,124 +147,100 @@ 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: react3.ForwardRefExoticComponent<KnobProps & Omit<Omit<react3.SVGProps<SVGSVGElement>, "ref">, keyof KnobProps> & react3.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][];
+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/Stepper.d.ts
-/** @category NumberInput */
-interface StepperProps {
-  /** Display only when hovering. */
-  dynamic?: boolean;
+//#region src/components/NumberInput/DecrementStepper.d.ts
+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_runtime0.JSX.Element;
-//# sourceMappingURL=Stepper.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/DecrementStepper.d.ts
-/** @category NumberInput */
-interface DecrementStepperProps {
-  size?: number;
+//#region src/components/NumberInput/Stepper.d.ts
+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_runtime0.JSX.Element;
-//# sourceMappingURL=DecrementStepper.d.ts.map
+}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>): _$react.JSX.Element;
+//#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;
@@ -306,10 +269,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,46 +284,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: react3.ForwardRefExoticComponent<NumberInputProps & Omit<Omit<react3.DetailedHTMLProps<react3.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | keyof NumberInputProps> & react3.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[];
-  };
+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;
 };
-//# sourceMappingURL=keyboardShortcuts.d.ts.map
 //#endregion
 //#region src/components/Piano/key.d.ts
-/**
- * @category Piano
- */
 interface KeyProps {
   noteNumber: number;
   width?: number;
@@ -375,24 +315,32 @@ interface KeyProps {
   /** @internal */
   __width?: number;
 }
-/**
- * @category Piano
- */
 interface KeyMethods {
   play: (velocity?: number) => 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/context.d.ts
+type NoteRange = {
+  first: number;
+  last: number;
+};
+//#endregion
+//#region src/components/Piano/keyboardShortcuts.d.ts
+type KeyboardShortcuts = {
+  keys: string[];
+  flags?: {
+    naturalOnly?: boolean;
+  };
+};
+declare const SHORTCUTS: {
+  HOME_ROW: {
+    keys: string[];
+  };
+};
 //#endregion
 //#region src/components/Piano/KeyLabel.d.ts
-/** @category Piano */
 interface KeyLabelProps {
   /**
    * override Piano.label
@@ -405,7 +353,6 @@ interface KeyLabelProps {
   /** @internal */
   __label?: (note: number, index: number) => ReactNode;
 }
-/** @category Piano */
 declare function KeyLabel({
   label,
   className,
@@ -414,16 +361,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;
@@ -442,101 +386,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>>;
-//#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: {
+  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;
 };
-/** @category Slider */
-declare function useSliderContext<T>(selector: (state: State) => T): T;
 //#endregion
-//#region src/components/Slider/Thumb.d.ts
-/** @category Slider */
-interface SliderThumbProps {
+//#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;
-  className?: string;
-  style?: CSSProperties;
-  children?: ReactNode;
-  /** @internal */
-  __percent?: number;
-}
-/** @category Slider */
-interface SliderThumbMethods {
-  focus: () => void;
-  blur: () => void;
-}
-/** @category Slider */
-
-/** @category Slider */
-declare const SliderThumb: react3.ForwardRefExoticComponent<SliderThumbProps & react3.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;
+  disabled?: boolean;
+  readonly?: boolean;
+  onChange?: (value: PointBaseType) => void;
+  onDragStart?: (value: PointBaseType) => void;
+  onDragEnd?: (value: PointBaseType) => void;
 }
-/** @category Slider */
-declare function SliderTrack({
-  length,
-  thickness,
-  active,
-  inactive,
-  children,
+declare function Point<T extends PointBaseType>({
+  value,
+  min,
+  max,
+  size,
+  width,
+  height,
+  color,
+  disabled,
+  readonly,
+  onChange,
+  onDragStart,
+  onDragEnd,
   className,
   style,
-  defaultStyle,
-  __thumb,
-  __percent,
+  onPointerDown,
   ...props
-}: SliderTrackProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=Track.d.ts.map
+}: 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,
@@ -544,11 +505,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;
@@ -570,7 +529,6 @@ interface ScaleOptionProps {
     label?: CSSProperties;
   };
 }
-/** @category Slider */
 declare function ScaleOption({
   value,
   type,
@@ -584,35 +542,104 @@ 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
+interface SliderThumbProps {
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  /** @internal */
+  __percent?: number;
+}
+interface SliderThumbMethods {
+  focus: () => void;
+  blur: () => void;
+}
+//#endregion
+//#region src/components/Slider/Track.d.ts
+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;
+}
+declare function Track({
+  length,
+  thickness,
+  active,
+  inactive,
+  children,
+  className,
+  style,
+  defaultStyle,
+  __thumb,
+  __percent,
+  ...props
+}: SliderTrackProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>): _$react.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 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;
@@ -623,20 +650,31 @@ 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;
+  ScaleOption: typeof ScaleOption;
+};
 //#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
@@ -648,47 +686,10 @@ 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
-//#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: react3.ForwardRefExoticComponent<ThumbProps & Omit<Omit<react3.DetailedHTMLProps<react3.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ThumbProps> & react3.RefAttributes<XYPadThumbMethods>>;
-//# sourceMappingURL=Thumb.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 AreaProps {
+interface XYPadAreaProps {
   width?: number | string;
   height?: number | string;
   color?: string;
@@ -698,8 +699,7 @@ interface AreaProps {
   /** inherit */
   __thumb?: ReactElement;
 }
-/** @category XYPad */
-declare function XYPadArea({
+declare function Area({
   width,
   height,
   color,
@@ -708,13 +708,32 @@ declare function XYPadArea({
   style,
   __thumb,
   ...props
-}: AreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AreaProps>): 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
+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;
+}
+interface XYPadThumbMethods {
+  focus: () => void;
+  blur: () => void;
+}
 //#endregion
 //#region src/components/XYPad/index.d.ts
 /**
  * Two-dimensional slider component.
- * @category XYPad
  */
 interface ValueOptions {
   value: number;
@@ -732,11 +751,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;
@@ -745,83 +766,70 @@ 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 */
@@ -832,31 +840,24 @@ declare const NOT_SUPPORTED = "NOT_SUPPORTED";
 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, type MIDIAccessError, NOT_SUPPORTED, NumberInput, type NumberInputMethods, type NumberInputProps, PERMISSION_DENIED, Piano, type PianoMethods, 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 ValueOptions, WheelObserver, type WheelObserverProps, WhiteKey, XYPad, XYPadArea, type XYPadMethods, type XYPadProps, XYPadThumb, type XYPadThumbMethods, 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