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

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` — functions to define animation behavior.
+- **Modifiers**: `withSpring`, `withTiming`, `withDecay`, `withSequence`, `withEase` — functions to define animation behavior.
 - **`useMount(state, config)`**: Manages mount/unmount transitions. `config` includes `from`, `enter`, and `exit` values.
 
 ## Gestures
@@ -165,9 +165,10 @@ export const Interpolation: React.FC = () => {
 `react-ui-animate` also provides hooks for handling gestures:
 
 - `useDrag`
-- `useMove`
+- `useMouseMove`
 - `useScroll`
 - `useWheel`
+- `useGesture`
 
 **Example: `useDrag`**
 
@@ -176,16 +177,15 @@ 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);
 
-  useDrag(ref, ({ down, movement }) => {
-    setTranslateX(down ? movement.x : withSpring(0));
+  const bind = useDrag(({ down, movementX }) => {
+    setTranslateX(down ? movementX : withSpring(0));
   });
 
   return (
     <animate.div
-      ref={ref}
+      {...bind()}
       style={{
         width: 100,
         height: 100,

package/dist/animation/{Config.d.ts → AnimationConfig.d.ts}

@@ -1,5 +1,5 @@
 import { Easing } from '@raidipesh78/re-motion';
-export declare const Config: {
+export declare const AnimationConfig: {
     Timing: {
         BOUNCE: {
             duration: number;
@@ -41,23 +41,23 @@ export declare const Config: {
     Spring: {
         ELASTIC: {
             mass: number;
-            damping: number;
-            stiffness: number;
+            friction: number;
+            tension: number;
         };
         EASE: {
             mass: number;
-            damping: number;
-            stiffness: number;
+            friction: number;
+            tension: number;
         };
         STIFF: {
             mass: number;
-            damping: number;
-            stiffness: number;
+            friction: number;
+            tension: number;
         };
         WOBBLE: {
             mass: number;
-            damping: number;
-            stiffness: number;
+            friction: number;
+            tension: number;
         };
     };
 };

package/dist/animation/Value.d.ts

@@ -0,0 +1,12 @@
+import { MotionValue } from '@raidipesh78/re-motion';
+import { ToValue } from './types';
+export declare class Value<V extends number | string> {
+    private animation;
+    private unsubscribe?;
+    constructor(initial: V);
+    set(u: MotionValue<V> | ToValue<V>): void;
+    private buildDriver;
+    get value(): MotionValue<V>;
+    get current(): V;
+    destroy(): void;
+}

package/dist/animation/controllers.d.ts

@@ -0,0 +1,41 @@
+import { DriverConfig, Primitive } from './types';
+interface WithSpringOptions {
+    mass?: number;
+    tension?: number;
+    friction?: number;
+    onStart?: () => void;
+    onChange?: (v: number | string) => void;
+    onRest?: () => void;
+}
+export declare const withSpring: (to: Primitive, options?: WithSpringOptions) => DriverConfig;
+export declare const withEase: (to: Primitive, options?: WithSpringOptions) => DriverConfig;
+interface WithTimingOptions {
+    duration?: number;
+    easing?: (t: number) => number;
+    onStart?: () => void;
+    onChange?: (v: number | string) => void;
+    onRest?: () => void;
+}
+export declare const withTiming: (to: Primitive, options?: WithTimingOptions) => DriverConfig;
+interface WithDecayOptions {
+    velocity: number;
+    onStart?: () => void;
+    onChange?: (v: number | string) => void;
+    onRest?: () => void;
+    clamp?: [number, number];
+}
+export declare const withDecay: (options: WithDecayOptions) => DriverConfig;
+interface WithSequenceOptions {
+    onStart?: () => void;
+    onChange?: (v: number | string) => void;
+    onRest?: () => void;
+}
+export declare const withSequence: (steps: DriverConfig[], options?: WithSequenceOptions) => DriverConfig;
+export declare const withDelay: (delay: number) => DriverConfig;
+interface WithLoopOptions {
+    onStart?: () => void;
+    onChange?: (v: number | string) => void;
+    onRest?: () => void;
+}
+export declare const withLoop: (controller: DriverConfig, iterations: number, options?: WithLoopOptions) => DriverConfig;
+export {};

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

@@ -1,2 +1,3 @@
-export { useValue } from './useValue';
-export { useMount } from './useMount';
+export * from './useValue';
+export * from './useMount';
+export * from './useAnimatedList';

package/dist/animation/hooks/useAnimatedList.d.ts

@@ -0,0 +1,24 @@
+import { MotionValue } from '@raidipesh78/re-motion';
+import type { ToValue } from '../types';
+export declare function useAnimatedList<T>(items: T[], getKey: (item: T) => string, config?: {
+    from?: number;
+    enter?: ToValue<number>;
+    exit?: ToValue<number>;
+}): Array<{
+    key: string;
+    item: T;
+    animation: MotionValue<number>;
+}>;
+export declare function useAnimatedList<T, I extends Record<string, number>>(items: T[], getKey: (item: T) => string, config: {
+    from: I;
+    enter?: Partial<{
+        [K in keyof I]: ToValue<I[K]>;
+    }>;
+    exit?: Partial<{
+        [K in keyof I]: ToValue<I[K]>;
+    }>;
+}): Array<{
+    key: string;
+    item: T;
+    animation: Record<keyof I, MotionValue<number>>;
+}>;

package/dist/animation/hooks/useMount.d.ts

@@ -1,16 +1,12 @@
 import { MotionValue } from '@raidipesh78/re-motion';
-import type { Primitive, Descriptor } from '../types';
-export type ConfigSingle<T extends Primitive> = {
-    from?: T;
-    enter?: T | Descriptor;
-    exit?: T | Descriptor;
-};
-export type ConfigMulti<I extends Record<string, Primitive>> = {
+import type { ToValue } from '../types';
+export declare function useMount(isOpen: boolean, config?: {
+    from?: number;
+    enter?: ToValue<number>;
+    exit?: ToValue<number>;
+}): (fn: (value: MotionValue<number>, mounted: boolean) => React.ReactNode) => React.ReactNode;
+export declare function useMount<I extends Record<string, number>>(isOpen: boolean, config: {
     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;
+    enter?: Partial<Record<keyof I, ToValue<number>>>;
+    exit?: Partial<Record<keyof I, ToValue<number>>>;
+}): (fn: (values: Record<keyof I, MotionValue<number>>, mounted: boolean) => React.ReactNode) => React.ReactNode;

package/dist/animation/hooks/useValue.d.ts

@@ -1,9 +1,15 @@
 import { MotionValue } from '@raidipesh78/re-motion';
-import type { Primitive, Descriptor, Controls } 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, Controls];
+import { Primitive, ToValue } from '../types';
+type Input<V extends Primitive> = V | V[] | Record<string, V>;
+type Output<V extends Primitive, I extends Input<V>> = I extends V ? MotionValue<V> : I extends V[] ? {
+    [K in keyof I]: MotionValue<V>;
+} : I extends Record<string, V> ? {
+    [K in keyof I]: MotionValue<V>;
+} : never;
+type SetterParam<V extends Primitive, I extends Input<V>> = I extends V ? MotionValue<V> | ToValue<V> : I extends V[] ? Partial<{
+    [K in keyof I]: MotionValue<V> | ToValue<V>;
+}> : I extends Record<string, V> ? Partial<{
+    [K in keyof I]: MotionValue<V> | ToValue<V>;
+}> : never;
+export declare function useValue<V extends Primitive, I extends Input<V>>(initial: I): [Output<V, I>, (to: SetterParam<V, I>) => void];
 export {};

package/dist/animation/index.d.ts

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

package/dist/animation/interpolation/colors.d.ts

@@ -0,0 +1,25 @@
+export declare const COLOR_NUMBER_REGEX: RegExp;
+export declare const HEX_NAME_COLOR: RegExp;
+interface classNameType {
+    [name: string]: string;
+}
+export declare const colorNames: classNameType;
+export declare function hexToRgba(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare function rgbaToHex(rgba: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}): string;
+export declare function processColor(color: number | string): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export {};

package/dist/animation/interpolation/index.d.ts

@@ -0,0 +1 @@
+export { interpolateNumbers } from './interpolateNumbers';

package/dist/animation/interpolation/interpolateNumbers.d.ts

@@ -0,0 +1,8 @@
+type ExtrapolateType = 'identity' | 'extend' | 'clamp';
+type ExtrapolateConfig = {
+    extrapolate?: ExtrapolateType;
+    extrapolateLeft?: ExtrapolateType;
+    extrapolateRight?: ExtrapolateType;
+};
+export declare function interpolateNumbers(value: number, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
+export {};

package/dist/animation/types.d.ts

@@ -1,42 +1,27 @@
 export type Primitive = number | string;
-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;
-    clamp?: [number, 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;
-}
-export interface Controls {
-    start(): void;
-    pause(): void;
-    resume(): void;
-    cancel(): void;
-    reset(): void;
-}
+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;

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

@@ -1,47 +1,17 @@
 import { Gesture } from './Gesture';
-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 pointerCaptured;
-    private activePointerId;
-    private attachedEls;
-    private activeEl;
-    private pointerDownPos;
-    private thresholdPassed;
-    constructor(config?: DragConfig);
-    attach(elements: HTMLElement | HTMLElement[] | Window): () => void;
-    private onDown;
-    private onMove;
-    private onUp;
-    cancel(): void;
+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;
 }

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

@@ -1,13 +1,20 @@
-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(elements: HTMLElement | HTMLElement | Window): () => void;
-    abstract cancel(): void;
+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;
 }
-export {};

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

@@ -0,0 +1,13 @@
+import { Vector2 } from '../types';
+import { Gesture } from './Gesture';
+export declare class MouseMoveGesture extends Gesture {
+    event?: MouseEvent;
+    isActiveID?: any;
+    movement: Vector2;
+    previousMovement: Vector2;
+    velocity: Vector2;
+    direction: Vector2;
+    _initEvents(): void;
+    _handleCallback(): void;
+    onMouseMove(e: MouseEvent): void;
+}

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

@@ -1,29 +1,14 @@
+import { Vector2 } from '../types';
 import { Gesture } from './Gesture';
-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 attachedEls;
-    private movement;
-    private offset;
-    private velocity;
-    private prevScroll;
-    private lastTime;
-    private endTimeout?;
-    attach(elements: HTMLElement | HTMLElement[] | Window): () => void;
-    cancel(): void;
-    private onScroll;
+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;
 }

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

@@ -1,28 +1,15 @@
+import { Vector2 } from '../types';
 import { Gesture } from './Gesture';
-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 attachedEls;
-    private movement;
-    private offset;
-    private velocity;
-    private lastTime;
-    private endTimeout?;
-    attach(elements: HTMLElement | HTMLElement[] | Window): () => void;
-    cancel(): void;
-    private onWheel;
+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;
 }

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

@@ -0,0 +1,4 @@
+export * from './DragGesture';
+export * from './MouseMoveGesture';
+export * from './ScrollGesture';
+export * from './WheelGesture';

package/dist/gestures/helpers/eventAttacher.d.ts

@@ -0,0 +1,11 @@
+type MouseEventType = 'click' | 'dblclick' | 'mousedown' | 'mousemove' | 'mouseup' | 'touchstart' | 'touchmove' | 'touchend' | 'mouseenter' | 'mouseleave' | 'mouseout' | 'mouseover' | 'scroll' | 'wheel' | 'contextmenu';
+type DomTargetTypes = Array<Window | Document | HTMLElement>;
+/**
+ * Attach multiple document / window event / HTMLElement
+ */
+export declare function attachEvents(domTargets: DomTargetTypes, events: Array<[
+    event: MouseEventType,
+    callback: (e: any) => void,
+    capture?: any
+]>): (eventKeys?: Array<string>) => void;
+export {};

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

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

package/dist/gestures/helpers/math.d.ts

@@ -0,0 +1,34 @@
+/**
+ * bin(booleanValue)
+ * returns 1 if booleanValue == true and 0 if booleanValue == false
+ */
+export declare function bin(bool: boolean): 1 | 0;
+/**
+ * mix(progress, a, b)
+ * linear interpolation between a and b
+ */
+export declare function mix(perc: number, val1: number, val2: number): number;
+/**
+ * clamp(value, min, max)
+ * clamps value for min and max bounds
+ */
+export declare function clamp(value: number, lowerbound: number, upperbound: number): number;
+/**
+ * rubberClamp(value, min, max, constant?)
+ * constant is optional : default 0.15
+ * clamps the value for min and max value and
+ * extends beyond min and max values with constant
+ * factor to create elastic rubber band effect
+ */
+export declare function rubberClamp(value: number, lowerbound: number, upperbound: number, constant?: number): number;
+/**
+ * snapTo(value, velocity, snapPoints[])
+ * Calculates the final snapPoint according to given current value,
+ * velocity and snapPoints array
+ */
+export declare function snapTo(value: number, velocity: number, snapPoints: Array<number>): number;
+/**
+ * move(array, moveIndex, toIndex)
+ * move array item from moveIndex to toIndex without array modification
+ */
+export declare function move(array: Array<any>, moveIndex: number, toIndex: number): any[];

package/dist/gestures/helpers/withDefault.d.ts

@@ -0,0 +1,4 @@
+export declare const withDefault: (x: number, y: number) => {
+    x: number;
+    y: number;
+};

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

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

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

@@ -1,5 +1,4 @@
-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;
+import { DragEventType, UseDragConfig } from '../types';
+export declare function useDrag(callback: (event: DragEventType) => void, config?: UseDragConfig): (index?: number) => {
+    ref: any;
+};

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

@@ -0,0 +1,9 @@
+import { DragEventType, WheelEventType, ScrollEventType, MouseMoveEventType } from '../types';
+export declare function useGesture({ onDrag, onWheel, onScroll, onMouseMove, }: {
+    onDrag?: (event: DragEventType) => void;
+    onWheel?: (event: WheelEventType) => void;
+    onScroll?: (event: ScrollEventType) => void;
+    onMouseMove?: (event: MouseMoveEventType) => void;
+}): (index?: number) => {
+    ref: any;
+};

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

@@ -0,0 +1,4 @@
+import { MouseMoveEventType } from '../types';
+export declare function useMouseMove(callback: (event: MouseMoveEventType) => void): (index?: number) => {
+    ref: any;
+};