pointrix 1.0.0

package/dist/pointrix-react.d.cts

@@ -0,0 +1,537 @@
+import React, { MutableRefObject } from "react";
+
+//#region src/nano.d.ts
+interface Point$2 {
+  x: number;
+  y: number;
+}
+interface PointerState {
+  id: number;
+  start: Point$2;
+  current: Point$2;
+  previous: Point$2;
+  delta: Point$2;
+  total: Point$2;
+  velocity: Point$2;
+  timestamp: number;
+}
+interface InteractionEvent {
+  target: HTMLElement;
+  pointers: PointerState[];
+  isPrimary: boolean;
+  originalEvent: PointerEvent;
+}
+interface GripOptions {
+  onStart?: (event: InteractionEvent) => void;
+  onMove?: (event: InteractionEvent) => void;
+  onEnd?: (event: InteractionEvent) => void;
+  onTap?: (event: InteractionEvent) => void;
+  onDoubleTap?: (event: InteractionEvent) => void;
+  onHold?: (event: InteractionEvent) => void;
+  threshold?: number;
+  preventScroll?: boolean;
+  holdDelay?: number;
+  holdDuration?: number;
+  mouseButtons?: number;
+  allowFrom?: string;
+  ignoreFrom?: string;
+  touchAction?: string;
+  styleCursor?: boolean;
+}
+declare class Grip {
+  protected element: HTMLElement;
+  protected options: GripOptions;
+  protected pointers: Map<number, PointerState>;
+  private pointersCache;
+  protected isActive: boolean;
+  protected lastUpdate: number;
+  protected priority: number;
+  private _enabled;
+  private holdTimer;
+  private holdEventTimer;
+  private lastTapTime;
+  private lastTapTarget;
+  private listeners;
+  on(event: string, handler: Function): this;
+  off(event: string, handler: Function): this;
+  protected emit(event: string, data: any): void;
+  get enabled(): boolean;
+  set enabled(value: boolean);
+  get interacting(): boolean;
+  private static elementInstances;
+  private static activeInstance;
+  private static elementListeners;
+  constructor(element: HTMLElement, options?: GripOptions);
+  private registerInstance;
+  private unregisterInstance;
+  protected shouldHandleEvent(_e: PointerEvent): boolean;
+  private checkEventFilters;
+  private static handleElementPointerDown;
+  private onPointerDown;
+  private handlePointerDown;
+  private onPointerMove;
+  private onPointerUp;
+  private start;
+  private end;
+  update(): void;
+  hasActivePointers(): boolean;
+  private createEvent;
+  destroy(): void;
+}
+//#endregion
+//#region src/types.d.ts
+interface Point$1 {
+  x: number;
+  y: number;
+}
+interface ActiveEdges {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+interface ModifierContext {
+  position: Point$1;
+  velocity: Point$1;
+  element: HTMLElement;
+  startPosition: Point$1;
+  delta: Point$1;
+  edges?: ActiveEdges;
+  size?: {
+    width: number;
+    height: number;
+  };
+  startSize?: {
+    width: number;
+    height: number;
+  };
+}
+interface ModifierResult {
+  position: Point$1;
+  velocity: Point$1;
+  size?: {
+    width: number;
+    height: number;
+  };
+}
+interface Modifier {
+  name: string;
+  onStart?(context: ModifierContext): void;
+  modify(context: ModifierContext): ModifierResult;
+  onEnd?(context: ModifierContext): ModifierResult | void;
+}
+//#endregion
+//#region src/drag.d.ts
+interface DragOptions extends GripOptions {
+  /** Enable ARIA attributes for accessibility (default: true) */
+  aria?: boolean;
+  axis?: 'x' | 'y' | 'xy' | 'start';
+  startAxis?: 'x' | 'y';
+  handle?: string | HTMLElement;
+  bounds?: 'parent' | HTMLElement | {
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+  };
+  grid?: {
+    x: number;
+    y: number;
+  };
+  momentum?: boolean | {
+    friction?: number;
+    minSpeed?: number;
+  };
+  modifiers?: Modifier[];
+  droppable?: boolean;
+  cursorChecker?: (action: 'idle' | 'grab' | 'grabbing') => string;
+  onDragStart?: (event: DragEvent) => void;
+  onDragMove?: (event: DragEvent) => void;
+  onDragEnd?: (event: DragEvent) => void;
+}
+interface DragEvent extends InteractionEvent {
+  dx: number;
+  dy: number;
+  totalX: number;
+  totalY: number;
+  velocityX: number;
+  velocityY: number;
+}
+declare class Draggable extends Grip {
+  private dragOptions;
+  private transform;
+  private startTransform;
+  private bounds;
+  private momentum;
+  private transformNormalized;
+  private detectedAxis;
+  private startAxisConfirmed;
+  private cachedSize;
+  private modifierContext;
+  private cachedDragEvent;
+  constructor(element: HTMLElement, options?: DragOptions);
+  protected shouldHandleEvent(e: PointerEvent): boolean;
+  private readCurrentTransform;
+  private handleDragStart;
+  private handleDragMove;
+  private handleDragEnd;
+  private startMomentum;
+  private applyTransform;
+  private createDragEvent;
+  setPosition(x: number, y: number): void;
+  getPosition(): {
+    x: number;
+    y: number;
+  };
+  destroy(): void;
+}
+//#endregion
+//#region src/resize.d.ts
+interface ResizeOptions extends GripOptions {
+  edges?: {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+  };
+  handleSize?: number;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  aspectRatio?: number | 'preserve';
+  square?: boolean;
+  invert?: 'none' | 'negate' | 'reposition';
+  grid?: {
+    width: number;
+    height: number;
+  };
+  modifiers?: Modifier[];
+  cursorChecker?: (edge: string | null) => string;
+  onResizeStart?: (event: ResizeEvent) => void;
+  onResizeMove?: (event: ResizeEvent) => void;
+  onResizeEnd?: (event: ResizeEvent) => void;
+}
+interface ResizeEvent extends InteractionEvent {
+  width: number;
+  height: number;
+  deltaWidth: number;
+  deltaHeight: number;
+  edges: {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+  };
+}
+declare class Resizable extends Grip {
+  private resizeOptions;
+  private startSize;
+  private startPos;
+  private currentSize;
+  private currentPos;
+  private activeEdge;
+  private edgeFlags;
+  private aspectRatio;
+  private boundUpdateCursor;
+  private transformNormalized;
+  private modifierContext;
+  private cachedResizeEvent;
+  constructor(element: HTMLElement, options?: ResizeOptions);
+  private normalizeInitialTransform;
+  protected shouldHandleEvent(e: PointerEvent): boolean;
+  private updateCursor;
+  private detectEdge;
+  private getCursor;
+  private handleResizeStart;
+  private handleResizeMove;
+  private handleResizeEnd;
+  private createResizeEvent;
+  setSize(width: number, height: number): void;
+  getSize(): {
+    width: number;
+    height: number;
+  };
+  destroy(): void;
+}
+//#endregion
+//#region src/gesture.d.ts
+interface GestureEvent extends InteractionEvent {
+  scale: number;
+  rotation: number;
+  distance: number;
+  angle: number;
+  center: Point$2;
+  deltaScale: number;
+  deltaAngle: number;
+}
+interface GestureOptions extends GripOptions {
+  minPointers?: number;
+  onGestureStart?: (event: GestureEvent) => void;
+  onGestureMove?: (event: GestureEvent) => void;
+  onGestureEnd?: (event: GestureEvent) => void;
+}
+declare class Gesturable extends Grip {
+  private gestureOptions;
+  private gestureActive;
+  private startDistance;
+  private startAngle;
+  private prevScale;
+  private prevAngle;
+  private minPointers;
+  constructor(element: HTMLElement, options?: GestureOptions);
+  protected shouldHandleEvent(_e: PointerEvent): boolean;
+  private getTwoPointers;
+  private computeDistance;
+  private computeAngle;
+  private computeCenter;
+  private normalizeAngleDelta;
+  private createGestureEvent;
+  update(): void;
+  private endGesture;
+  destroy(): void;
+}
+//#endregion
+//#region src/dropzone.d.ts
+interface DropEvent {
+  target: HTMLElement;
+  draggable: HTMLElement;
+  dragEvent?: DragEvent;
+  overlap: number;
+}
+interface DropzoneOptions {
+  accept?: string | ((draggable: HTMLElement) => boolean);
+  overlap?: 'pointer' | 'center' | number;
+  activeClass?: string;
+  hoverClass?: string;
+  /** Enable ARIA attributes (default: true) */
+  aria?: boolean;
+  onActivate?: (event: DropEvent) => void;
+  onDeactivate?: (event: DropEvent) => void;
+  onDragEnter?: (event: DropEvent) => void;
+  onDragLeave?: (event: DropEvent) => void;
+  onDragOver?: (event: DropEvent) => void;
+  onDrop?: (event: DropEvent) => void;
+}
+interface Point {
+  x: number;
+  y: number;
+}
+declare class Dropzone {
+  readonly element: HTMLElement;
+  private options;
+  private _isOver;
+  private _isActive;
+  private _enabled;
+  private listeners;
+  on(event: string, handler: Function): this;
+  off(event: string, handler: Function): this;
+  private emit;
+  get enabled(): boolean;
+  set enabled(value: boolean);
+  constructor(element: HTMLElement, options?: DropzoneOptions);
+  get isOver(): boolean;
+  get isActive(): boolean;
+  accepts(draggableEl: HTMLElement): boolean;
+  checkOverlap(draggableEl: HTMLElement, pointerPos: Point): number;
+  activate(draggableEl: HTMLElement): void;
+  deactivate(draggableEl: HTMLElement): void;
+  enter(draggableEl: HTMLElement, overlap: number, dragEvent?: DragEvent): void;
+  leave(draggableEl: HTMLElement, dragEvent?: DragEvent): void;
+  over(draggableEl: HTMLElement, overlap: number, dragEvent?: DragEvent): void;
+  drop(draggableEl: HTMLElement, overlap: number, dragEvent?: DragEvent): void;
+  private createEvent;
+  updateOptions(options: Partial<DropzoneOptions>): void;
+  destroy(): void;
+}
+//#endregion
+//#region src/sortable.d.ts
+interface SortableOptions {
+  /** Enable ARIA attributes for accessibility (default: true) */
+  aria?: boolean;
+  /** CSS selector for draggable items within the container (default: direct children) */
+  items?: string;
+  /** Axis of sorting: 'y' for vertical lists, 'x' for horizontal (default: 'y') */
+  axis?: 'x' | 'y';
+  /** CSS selector for drag handle within each item (optional) */
+  handle?: string;
+  /** Animation duration in ms for items shifting out of the way (default: 200) */
+  animationDuration?: number;
+  /** CSS class added to the item being dragged */
+  dragClass?: string;
+  /** CSS class added to a container when a grouped item hovers over it */
+  hoverClass?: string;
+  /**
+   * Group name — sortables with the same group can exchange items.
+   * Items can be dragged between any sortables sharing the same group name.
+   */
+  group?: string;
+  /** Called when order changes during drag (within same container) */
+  onSort?: (event: SortEvent) => void;
+  /** Called when drag ends and order is finalized */
+  onSortEnd?: (event: SortEvent) => void;
+  /** Called when an item is added from another sortable */
+  onAdd?: (event: SortTransferEvent) => void;
+  /** Called when an item is removed to another sortable */
+  onRemove?: (event: SortTransferEvent) => void;
+}
+interface SortEvent {
+  item: HTMLElement;
+  oldIndex: number;
+  newIndex: number;
+  items: HTMLElement[];
+}
+interface SortTransferEvent {
+  item: HTMLElement;
+  from: Sortable;
+  to: Sortable;
+  oldIndex: number;
+  newIndex: number;
+}
+declare class Sortable {
+  readonly container: HTMLElement;
+  private options;
+  private draggables;
+  private itemStates;
+  private dragItem;
+  private dragIndex;
+  private currentIndex;
+  private targetSortable;
+  private targetIndex;
+  private placeholder;
+  private _enabled;
+  private listeners;
+  on(event: string, handler: Function): this;
+  off(event: string, handler: Function): this;
+  private emit;
+  get enabled(): boolean;
+  set enabled(value: boolean);
+  constructor(container: HTMLElement, options?: SortableOptions);
+  getItems(): HTMLElement[];
+  private setup;
+  private handleDragStart;
+  private handleDragMove;
+  private updateWithinIndex;
+  private findTargetContainer;
+  private setTargetSortable;
+  private clearTargetSortable;
+  private updatePlaceholder;
+  private removePlaceholder;
+  private handleDragEnd;
+  snapshotItems(): void;
+  private animateItems;
+  private reorderDOM;
+  /** Refresh the sortable (e.g., after dynamically adding/removing items) */
+  refresh(): void;
+  /** Get the current order of items */
+  getOrder(): HTMLElement[];
+  /** Programmatically move an item */
+  move(fromIndex: number, toIndex: number): void;
+  private teardown;
+  destroy(): void;
+}
+//#endregion
+//#region src/index.d.ts
+interface InteractableOptions {
+  drag?: boolean | DragOptions;
+  resize?: boolean | ResizeOptions;
+  gesture?: boolean | GestureOptions;
+}
+//#endregion
+//#region src/react.d.ts
+declare const useGrip: (options?: GripOptions | undefined, deps?: React.DependencyList) => {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: React.MutableRefObject<Grip | null>;
+};
+declare const useDraggable: (options?: DragOptions | undefined, deps?: React.DependencyList) => {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: React.MutableRefObject<Draggable | null>;
+};
+declare const useResizable: (options?: ResizeOptions | undefined, deps?: React.DependencyList) => {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: React.MutableRefObject<Resizable | null>;
+};
+declare const useGesturable: (options?: GestureOptions | undefined, deps?: React.DependencyList) => {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: React.MutableRefObject<Gesturable | null>;
+};
+declare function useDropzone(options?: DropzoneOptions, deps?: React.DependencyList): {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: MutableRefObject<Dropzone | null>;
+};
+declare function useSortable(options?: SortableOptions, deps?: React.DependencyList): {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: MutableRefObject<Sortable | null>;
+};
+declare function useInteractable(options?: InteractableOptions, deps?: React.DependencyList): {
+  ref: MutableRefObject<HTMLElement | null>;
+  instance: MutableRefObject<{
+    drag: Draggable | null;
+    resize: Resizable | null;
+    gesture: Gesturable | null;
+    destroy: () => void;
+  } | null>;
+};
+declare const GripComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: GripOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+declare const DraggableComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: DragOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+declare const ResizableComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: ResizeOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+declare const GesturableComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: GestureOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+declare const InteractableComponent: ({
+  children,
+  as: Tag,
+  className,
+  style,
+  ...options
+}: InteractableOptions & {
+  children: React.ReactNode;
+  as?: keyof React.JSX.IntrinsicElements;
+  className?: string;
+  style?: React.CSSProperties;
+}) => React.JSX.Element;
+//#endregion
+export { type DragEvent, type DragOptions, DraggableComponent, type DropEvent, type DropzoneOptions, GesturableComponent, type GestureEvent, type GestureOptions, GripComponent, type GripOptions, InteractableComponent, type InteractableOptions, type InteractionEvent, ResizableComponent, type ResizeEvent, type ResizeOptions, type SortEvent, type SortableOptions, useDraggable, useDropzone, useGesturable, useGrip, useInteractable, useResizable, useSortable };
+//# sourceMappingURL=pointrix-react.d.cts.map