react-ui-animate 5.0.0-rc.2 → 5.0.0-rc.4

package/README.md

@@ -157,7 +157,7 @@ export const Interpolation: React.FC = () => {
 
 - **`useValue(initial)`**: Initializes an animated value.
 - **`animate`**: JSX wrapper for animatable elements (`animate.div`, `animate.span`, etc.).
-- **Modifiers**: `withSpring`, `withTiming`, `withDecay`, `withSequence`, `withEase` — functions to define animation behavior.
+- **Modifiers**: `withSpring`, `withTiming`, `withDecay`, `withSequence` — functions to define animation behavior.
 - **`useMount(state, config)`**: Manages mount/unmount transitions. `config` includes `from`, `enter`, and `exit` values.
 
 ## Gestures
@@ -165,10 +165,9 @@ export const Interpolation: React.FC = () => {
 `react-ui-animate` also provides hooks for handling gestures:
 
 - `useDrag`
-- `useMouseMove`
+- `useMove`
 - `useScroll`
 - `useWheel`
-- `useGesture`
 
 **Example: `useDrag`**
 
@@ -177,15 +176,16 @@ import React from 'react';
 import { useValue, animate, useDrag, withSpring } from 'react-ui-animate';
 
 export const Draggable: React.FC = () => {
+  const ref = useRef(null);
   const [translateX, setTranslateX] = useValue(0);
 
-  const bind = useDrag(({ down, movementX }) => {
-    setTranslateX(down ? movementX : withSpring(0));
+  useDrag(ref, ({ down, movement }) => {
+    setTranslateX(down ? movement.x : withSpring(0));
   });
 
   return (
     <animate.div
-      {...bind()}
+      ref={ref}
       style={{
         width: 100,
         height: 100,

package/dist/animation/AnimationConfig.d.ts

@@ -41,23 +41,23 @@ export declare const AnimationConfig: {
     Spring: {
         ELASTIC: {
             mass: number;
-            friction: number;
-            tension: number;
+            damping: number;
+            stiffness: number;
         };
         EASE: {
             mass: number;
-            friction: number;
-            tension: number;
+            damping: number;
+            stiffness: number;
         };
         STIFF: {
             mass: number;
-            friction: number;
-            tension: number;
+            damping: number;
+            stiffness: number;
         };
         WOBBLE: {
             mass: number;
-            friction: number;
-            tension: number;
+            damping: number;
+            stiffness: number;
         };
     };
 };

package/dist/animation/descriptors.d.ts

@@ -0,0 +1,7 @@
+import { Callbacks, DecayOptions, Descriptor, SpringOptions, TimingOptions } from './types';
+export declare const withSpring: (to: Descriptor["to"], opts?: SpringOptions & Callbacks) => Descriptor;
+export declare const withTiming: (to: Descriptor["to"], opts?: TimingOptions & Callbacks) => Descriptor;
+export declare const withDecay: (velocity: number, opts?: DecayOptions & Callbacks) => Descriptor;
+export declare const withDelay: (ms: number) => Descriptor;
+export declare const withSequence: (animations: Descriptor[], opts?: Omit<Callbacks, "onChange">) => Descriptor;
+export declare const withLoop: (animation: Descriptor, iterations?: number, opts?: Omit<Callbacks, "onChange">) => Descriptor;

package/dist/animation/drivers.d.ts

@@ -0,0 +1,4 @@
+import { MotionValue } from '@raidipesh78/re-motion';
+import type { Primitive, Descriptor } from './types';
+export declare function buildAnimation(mv: MotionValue<Primitive>, { type, to, options }: Descriptor): import("@raidipesh78/re-motion/dist/drivers/AnimationController").AnimationController;
+export declare function buildParallel(mvMap: Record<string, MotionValue<Primitive>>, step: Descriptor): import("@raidipesh78/re-motion/dist/drivers/AnimationController").AnimationController;

package/dist/animation/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { Descriptor } from './types';
+export declare function filterCallbackOptions(options: Record<string, any> | undefined, attach: boolean): Record<string, any>;
+export declare function isDescriptor(x: unknown): x is Descriptor;

package/dist/animation/index.d.ts

@@ -1,4 +1,5 @@
-export { useValue, useMount, useAnimatedList } from './hooks';
-export { withSpring, withTiming, withSequence, withDelay, withDecay, withLoop, withEase, } from './controllers';
+export { useValue } from './useValue';
+export { useMount } from './useMount';
+export { withDecay, withDelay, withLoop, withSequence, withSpring, withTiming, } from './descriptors';
 export { AnimationConfig } from './AnimationConfig';
-export { interpolateNumbers } from './interpolation';
+export { to } from './to';

package/dist/animation/to.d.ts

@@ -0,0 +1,9 @@
+type ExtrapolateType = 'identity' | 'extend' | 'clamp';
+interface ExtrapolateConfig {
+    extrapolate?: ExtrapolateType;
+    extrapolateRight?: ExtrapolateType;
+    extrapolateLeft?: ExtrapolateType;
+    easing?: (t: number) => number;
+}
+export declare function to(input: number, inRange: number[], outRange: (number | string)[], config?: ExtrapolateConfig): number | string;
+export {};

package/dist/animation/types.d.ts

@@ -1,27 +1,34 @@
 export type Primitive = number | string;
-export interface WithCallbacks {
-    onStart?: (value: number | string) => void;
-    onChange?: (value: number | string) => void;
-    onRest?: (value: number | string) => void;
-}
-export type DriverConfig = {
-    type: 'spring' | 'timing' | 'decay' | 'sequence' | 'delay' | 'loop';
-    to?: Primitive;
-    options?: {
-        controller?: DriverConfig;
-        iterations?: number;
-        delay?: number;
-        duration?: number;
-        easing?: (t: number) => number;
-        stiffness?: number;
-        damping?: number;
-        mass?: number;
-        velocity?: number;
-        clamp?: [number, number];
-        steps?: DriverConfig[];
-        onStart?: () => void;
-        onChange?: (v: string | number) => void;
-        onComplete?: () => void;
-    };
-};
-export type ToValue<V> = DriverConfig | V;
+export interface Callbacks {
+    onStart?: () => void;
+    onChange?: (v: number) => void;
+    onComplete?: () => void;
+}
+export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}
+export interface TimingOptions {
+    duration?: number;
+    easing?: (t: number) => number;
+}
+export interface DecayOptions {
+    velocity?: number;
+}
+export interface SequenceOptions {
+    animations?: Descriptor[];
+}
+export interface DelayOptions {
+    delay?: number;
+}
+export interface LoopOptions {
+    iterations?: number;
+    animation?: Descriptor;
+}
+export type DriverType = 'spring' | 'timing' | 'decay' | 'delay' | 'sequence' | 'loop';
+export interface Descriptor {
+    type: DriverType;
+    to?: Primitive | Primitive[] | Record<string, Primitive>;
+    options?: SpringOptions & TimingOptions & DecayOptions & SequenceOptions & DelayOptions & LoopOptions & Callbacks;
+}

package/dist/animation/useMount.d.ts

@@ -0,0 +1,17 @@
+import { MotionValue } from '@raidipesh78/re-motion';
+import type { Primitive, Descriptor } from './types';
+type ConfigSingle<T extends Primitive> = {
+    from?: T;
+    enter?: T | Descriptor;
+    exit?: T | Descriptor;
+};
+type ConfigMulti<I extends Record<string, Primitive>> = {
+    from: I;
+    enter?: I | Descriptor;
+    exit?: I | Descriptor;
+};
+export declare function useMount<T extends Primitive = number>(isOpen: boolean, config?: ConfigSingle<T>): (fn: (value: MotionValue<T>, mounted: boolean) => React.ReactNode) => React.ReactNode;
+export declare function useMount<I extends Record<string, Primitive>>(isOpen: boolean, config: ConfigMulti<I>): (fn: (values: {
+    [K in keyof I]: MotionValue<I[K]>;
+}, mounted: boolean) => React.ReactNode) => React.ReactNode;
+export {};

package/dist/animation/useValue.d.ts

@@ -0,0 +1,9 @@
+import { MotionValue } from '@raidipesh78/re-motion';
+import type { Primitive, Descriptor } from './types';
+type Widen<T> = T extends number ? number : T extends string ? string : T;
+type ValueReturn<T> = T extends Primitive ? MotionValue<Widen<T>> : T extends Primitive[] ? MotionValue<Widen<Primitive>>[] : {
+    [K in keyof T]: MotionValue<Widen<T[K]>>;
+};
+type Base = Primitive | Primitive[] | Record<string, Primitive>;
+export declare function useValue<T extends Base>(initial: T): [ValueReturn<T>, (to: Base | Descriptor) => void];
+export {};

package/dist/gestures/controllers/DragGesture.d.ts

@@ -1,17 +1,45 @@
 import { Gesture } from './Gesture';
-import type { Vector2 } from '../types';
-export declare class DragGesture extends Gesture {
-    movementStart: Vector2;
-    initialMovement: Vector2;
-    movement: Vector2;
-    previousMovement: Vector2;
-    translation: Vector2;
-    offset: Vector2;
-    velocity: Vector2;
-    _initEvents(): void;
-    _cancelEvents(): void;
-    _handleCallback(): void;
-    pointerDown(e: any): void;
-    pointerMove(e: any): void;
-    pointerUp(): void;
+export interface DragEvent {
+    down: boolean;
+    movement: {
+        x: number;
+        y: number;
+    };
+    offset: {
+        x: number;
+        y: number;
+    };
+    velocity: {
+        x: number;
+        y: number;
+    };
+    event: PointerEvent;
+    cancel: () => void;
+}
+export interface DragConfig {
+    threshold?: number;
+    axis?: 'x' | 'y';
+    initial?: () => {
+        x: number;
+        y: number;
+    };
+}
+export declare class DragGesture extends Gesture<DragEvent> {
+    private config;
+    private prev;
+    private lastTime;
+    private movement;
+    private velocity;
+    private start;
+    private offset;
+    private activePointerId;
+    private attachedEl;
+    private pointerDownPos;
+    private thresholdPassed;
+    constructor(config?: DragConfig);
+    attach(element: HTMLElement): () => void;
+    private onDown;
+    private onMove;
+    private onUp;
+    private cancel;
 }

package/dist/gestures/controllers/Gesture.d.ts

@@ -1,20 +1,12 @@
-export declare class Gesture {
-    currentIndex?: number;
-    lastTimeStamp: number;
-    isActive: boolean;
-    targetElement?: HTMLElement;
-    targetElements: Array<HTMLElement>;
-    config?: any;
-    callback?: <T>(event: T) => void;
-    _subscribe?: (eventKeys?: Array<string>) => void;
-    static _VELOCITY_LIMIT: number;
-    _initEvents(): void;
-    _cancelEvents(): void;
-    applyCallback(callback: <T>(event: T) => void): void;
-    applyGesture({ targetElement, targetElements, callback, config, }: {
-        targetElement?: any;
-        targetElements?: any;
-        callback: <T>(event: T) => void;
-        config?: any;
-    }): () => void | undefined;
+type Listener<E> = (event: E) => void;
+export declare abstract class Gesture<E> {
+    static readonly VELOCITY_LIMIT = 20;
+    private changeListeners;
+    private endListeners;
+    onChange(listener: Listener<E>): this;
+    onEnd(listener: Listener<E>): this;
+    protected emitChange(event: E): void;
+    protected emitEnd(event: E): void;
+    abstract attach(element: HTMLElement): () => void;
 }
+export {};

package/dist/gestures/controllers/MoveGesture.d.ts

@@ -0,0 +1,29 @@
+import { Gesture } from './Gesture';
+export interface MoveEvent {
+    movement: {
+        x: number;
+        y: number;
+    };
+    offset: {
+        x: number;
+        y: number;
+    };
+    velocity: {
+        x: number;
+        y: number;
+    };
+    event: PointerEvent;
+    cancel?: () => void;
+}
+export declare class MoveGesture extends Gesture<MoveEvent> {
+    private prev;
+    private lastTime;
+    private attachedEl;
+    private movement;
+    private offset;
+    private velocity;
+    private startPos;
+    attach(element: HTMLElement | Window): () => void;
+    private onMove;
+    private onLeave;
+}

package/dist/gestures/controllers/ScrollGesture.d.ts

@@ -1,14 +1,28 @@
-import { Vector2 } from '../types';
 import { Gesture } from './Gesture';
-export declare class ScrollGesture extends Gesture {
-    isActiveID?: any;
-    movement: Vector2;
-    previousMovement: Vector2;
-    direction: Vector2;
-    velocity: Vector2;
-    _initEvents(): void;
-    _handleCallback(): void;
-    onScroll({ x, y }: Vector2): void;
-    scrollListener(): void;
-    scrollElementListener(): void;
+export interface ScrollEvent {
+    movement: {
+        x: number;
+        y: number;
+    };
+    offset: {
+        x: number;
+        y: number;
+    };
+    velocity: {
+        x: number;
+        y: number;
+    };
+    event: Event;
+    cancel?: () => void;
+}
+export declare class ScrollGesture extends Gesture<ScrollEvent> {
+    private attachedEl;
+    private movement;
+    private offset;
+    private velocity;
+    private prevScroll;
+    private lastTime;
+    private endTimeout?;
+    attach(element: HTMLElement | Window): () => void;
+    private onScroll;
 }

package/dist/gestures/controllers/WheelGesture.d.ts

@@ -1,15 +1,26 @@
-import { Vector2 } from '../types';
 import { Gesture } from './Gesture';
-export declare class WheelGesture extends Gesture {
-    isActiveID?: any;
-    movement: Vector2;
-    previousMovement: Vector2;
-    direction: Vector2;
-    velocity: Vector2;
-    delta: Vector2;
-    offset: Vector2;
-    translation: Vector2;
-    _initEvents(): void;
-    _handleCallback(): void;
-    onWheel(event: WheelEvent): void;
+export interface WheelEvent {
+    movement: {
+        x: number;
+        y: number;
+    };
+    offset: {
+        x: number;
+        y: number;
+    };
+    velocity: {
+        x: number;
+        y: number;
+    };
+    event: globalThis.WheelEvent;
+    cancel?: () => void;
+}
+export declare class WheelGesture extends Gesture<WheelEvent> {
+    private movement;
+    private offset;
+    private velocity;
+    private lastTime;
+    private endTimeout?;
+    attach(element: HTMLElement | Window): () => void;
+    private onWheel;
 }

package/dist/gestures/hooks/index.d.ts

@@ -1,5 +1,4 @@
-export * from './useDrag';
-export * from './useMouseMove';
-export * from './useScroll';
-export * from './useWheel';
-export * from './useGesture';
+export { useDrag } from './useDrag';
+export { useMove } from './useMove';
+export { useScroll } from './useScroll';
+export { useWheel } from './useWheel';

package/dist/gestures/hooks/useDrag.d.ts

@@ -1,4 +1,5 @@
-import { DragEventType, UseDragConfig } from '../types';
-export declare function useDrag(callback: (event: DragEventType) => void, config?: UseDragConfig): (index?: number) => {
-    ref: any;
-};
+import { RefObject } from 'react';
+import { type DragConfig, type DragEvent } from '../controllers/DragGesture';
+export declare function useDrag<T extends HTMLElement>(refs: RefObject<T> | Array<RefObject<T>>, onDrag: (e: DragEvent & {
+    index: number;
+}) => void, config?: DragConfig): void;

package/dist/gestures/hooks/useMove.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { type MoveEvent } from '../controllers/MoveGesture';
+export declare function useMove(refs: Window, onMove: (e: MoveEvent & {
+    index: 0;
+}) => void): void;
+export declare function useMove<T extends HTMLElement>(refs: RefObject<T> | Array<RefObject<T>>, onMove: (e: MoveEvent & {
+    index: number;
+}) => void): void;

package/dist/gestures/hooks/useScroll.d.ts

@@ -1,4 +1,8 @@
-import { ScrollEventType } from '../types';
-export declare function useScroll(callback: (event: ScrollEventType) => void): (index?: number) => {
-    ref: any;
-};
+import { RefObject } from 'react';
+import { type ScrollEvent } from '../controllers/ScrollGesture';
+export declare function useScroll(refs: Window, onScroll: (e: ScrollEvent & {
+    index: 0;
+}) => void): void;
+export declare function useScroll<T extends HTMLElement>(refs: RefObject<T> | Array<RefObject<T>>, onScroll: (e: ScrollEvent & {
+    index: number;
+}) => void): void;

package/dist/gestures/hooks/useWheel.d.ts

@@ -1,4 +1,8 @@
-import { WheelEventType } from '../types';
-export declare function useWheel(callback: (event: WheelEventType) => void): (index?: number) => {
-    ref: any;
-};
+import { RefObject } from 'react';
+import { type WheelEvent } from '../controllers/WheelGesture';
+export declare function useWheel(refs: Window, onWheel: (e: WheelEvent & {
+    index: 0;
+}) => void): void;
+export declare function useWheel<T extends HTMLElement>(refs: RefObject<T> | Array<RefObject<T>>, onWheel: (e: WheelEvent & {
+    index: number;
+}) => void): void;

package/dist/gestures/index.d.ts

@@ -0,0 +1 @@
+export * from './hooks';

package/dist/hooks/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./useOutsideClick";
-export * from "./useMeasure";
-export * from "./useWindowDimension";
+export { useOutsideClick } from './useOutsideClick';
+export { useMeasure } from './useMeasure';
+export { useDimension } from './useDimension';

package/dist/hooks/useDimension.d.ts

@@ -0,0 +1,9 @@
+import { DependencyList } from 'react';
+type DimensionType = {
+    width: number;
+    height: number;
+    innerWidth: number;
+    innerHeight: number;
+};
+export declare function useDimension(callback: (event: DimensionType) => void, deps?: DependencyList): void;
+export {};

package/dist/hooks/useMeasure.d.ts

@@ -1,14 +1,12 @@
-import { DependencyList } from 'react';
-type MeasurementValue = number | Array<number>;
-type MeasurementType = {
+import { RefObject, DependencyList } from 'react';
+type MeasurementValue = number | number[];
+interface MeasurementType {
     left: MeasurementValue;
     top: MeasurementValue;
     width: MeasurementValue;
     height: MeasurementValue;
     vLeft: MeasurementValue;
     vTop: MeasurementValue;
-};
-export declare function useMeasure(callback: (event: MeasurementType) => void, deps?: DependencyList): (index?: number) => {
-    ref: import("react").MutableRefObject<null>;
-};
+}
+export declare function useMeasure(refs: RefObject<HTMLElement>[], callback: (m: MeasurementType) => void, deps?: DependencyList): void;
 export {};

package/dist/hooks/useOutsideClick.d.ts

@@ -1,2 +1,2 @@
 import { RefObject, DependencyList } from 'react';
-export declare function useOutsideClick(elementRef: RefObject<HTMLElement>, callback: (event: MouseEvent) => void, deps?: DependencyList): void;
+export declare function useOutsideClick(ref: RefObject<HTMLElement>, callback: (event: MouseEvent | TouchEvent) => void, deps?: DependencyList): void;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { Easing, makeMotion as makeAnimated, motion as animate, combine, } from '@raidipesh78/re-motion';
-export { withSpring, withTiming, withSequence, withDelay, withDecay, withLoop, withEase, useValue, useMount, useAnimatedList, AnimationConfig, interpolateNumbers, } from './animation';
-export { useMeasure, useOutsideClick, useWindowDimension } from './hooks';
-export { useDrag, useGesture, useMouseMove, useScroll, useWheel, } from './gestures/hooks';
-export { bin, clamp, mix, rubberClamp, move, snapTo } from './gestures/helpers';
+export { combine, Easing, makeMotion as makeAnimated, motion as animate, } from '@raidipesh78/re-motion';
+export * from './animation';
+export * from './hooks';
+export * from './gestures';
+export * from './utils';