react-ui-animate 5.0.0-rc.14 → 5.0.0-rc.3

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020 Dipesh Rai
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020 Dipesh Rai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,206 +1,206 @@
-# React UI Animate
-
-[![npm version](https://badge.fury.io/js/react-ui-animate.svg)](https://badge.fury.io/js/react-ui-animate)
-
-> Create smooth animations and interactive gestures in React applications effortlessly.
-
-### Install
-
-You can install `react-ui-animate` via `npm` or `yarn`:
-
-```sh
-npm install react-ui-animate
-```
-
-```sh
-yarn add react-ui-animate
-```
-
----
-
-## Getting Started
-
-The `react-ui-animate` library provides a straightforward way to add animations and gestures to your React components. Below are some common use cases.
-
-### 1. useValue
-
-Use `useValue` to initialize and update an animated value.
-
-```tsx
-import React from 'react';
-import {
-  animate,
-  useValue,
-  withSpring,
-  withTiming,
-  withSequence,
-} from 'react-ui-animate';
-
-export const UseValue: React.FC = () => {
-  const [width, setWidth] = useValue(100);
-
-  return (
-    <>
-      <button
-        onClick={() => {
-          setWidth(withSequence([withTiming(100), withSpring(0)]));
-        }}
-      >
-        SEQUENCE (100 → 0)
-      </button>
-      <button
-        onClick={() => {
-          setWidth(withSpring(200));
-        }}
-      >
-        SPRING (→ 200)
-      </button>
-      <button
-        onClick={() => {
-          setWidth(400);
-        }}
-      >
-        IMMEDIATE (→ 400)
-      </button>
-
-      <animate.div
-        style={{
-          width,
-          height: 100,
-          backgroundColor: 'red',
-          left: 0,
-          top: 0,
-        }}
-      />
-    </>
-  );
-};
-```
-
-### 2. useMount
-
-Use `useMount` to animate component mount and unmount transitions.
-
-```tsx
-import React from 'react';
-import {
-  animate,
-  useMount,
-  withDecay,
-  withSequence,
-  withSpring,
-  withTiming,
-} from 'react-ui-animate';
-
-export const UseMount: React.FC = () => {
-  const [open, setOpen] = React.useState(true);
-  const mounted = useMount(open, { from: 0, enter: 1, exit: 0 });
-
-  return (
-    <>
-      {mounted(
-        (animation, isMounted) =>
-          isMounted && (
-            <animate.div
-              style={{
-                width: 100,
-                height: 100,
-                backgroundColor: 'teal',
-                opacity: animation,
-              }}
-            />
-          )
-      )}
-
-      <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>
-    </>
-  );
-};
-```
-
-### 3. Interpolation
-
-Interpolate values for complex mappings like color transitions or movement.
-
-```tsx
-import React, { useLayoutEffect, useState } from 'react';
-import { animate, useValue, withSpring } from 'react-ui-animate';
-
-export const Interpolation: React.FC = () => {
-  const [open, setOpen] = useState(false);
-  const [x, setX] = useValue(0);
-
-  useLayoutEffect(() => {
-    setX(withSpring(open ? 500 : 0));
-  }, [open, setX]);
-
-  return (
-    <>
-      <animate.div
-        style={{
-          width: 100,
-          height: 100,
-          backgroundColor: x.to([0, 500], ['red', 'blue']),
-          translateX: x,
-        }}
-      />
-
-      <button onClick={() => setOpen((p) => !p)}>ANIMATE ME</button>
-    </>
-  );
-};
-```
-
----
-
-## API Overview
-
-- **`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.
-- **`useMount(state, config)`**: Manages mount/unmount transitions. `config` includes `from`, `enter`, and `exit` values.
-
-## Gestures
-
-`react-ui-animate` also provides hooks for handling gestures:
-
-- `useDrag`
-- `useMove`
-- `useScroll`
-- `useWheel`
-
-**Example: `useDrag`**
-
-```tsx
-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));
-  });
-
-  return (
-    <animate.div
-      ref={ref}
-      style={{
-        width: 100,
-        height: 100,
-        backgroundColor: '#3399ff',
-        translateX,
-      }}
-    />
-  );
-};
-```
-
-## Documentation
-
-For detailed documentation and examples, visit the official [react-ui-animate documentation](https://react-ui-animate.js.org/).
-
-## License
-
-This library is licensed under the MIT License.
+# React UI Animate
+
+[![npm version](https://badge.fury.io/js/react-ui-animate.svg)](https://badge.fury.io/js/react-ui-animate)
+
+> Create smooth animations and interactive gestures in React applications effortlessly.
+
+### Install
+
+You can install `react-ui-animate` via `npm` or `yarn`:
+
+```sh
+npm install react-ui-animate
+```
+
+```sh
+yarn add react-ui-animate
+```
+
+---
+
+## Getting Started
+
+The `react-ui-animate` library provides a straightforward way to add animations and gestures to your React components. Below are some common use cases.
+
+### 1. useValue
+
+Use `useValue` to initialize and update an animated value.
+
+```tsx
+import React from 'react';
+import {
+  animate,
+  useValue,
+  withSpring,
+  withTiming,
+  withSequence,
+} from 'react-ui-animate';
+
+export const UseValue: React.FC = () => {
+  const [width, setWidth] = useValue(100);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setWidth(withSequence([withTiming(100), withSpring(0)]));
+        }}
+      >
+        SEQUENCE (100 → 0)
+      </button>
+      <button
+        onClick={() => {
+          setWidth(withSpring(200));
+        }}
+      >
+        SPRING (→ 200)
+      </button>
+      <button
+        onClick={() => {
+          setWidth(400);
+        }}
+      >
+        IMMEDIATE (→ 400)
+      </button>
+
+      <animate.div
+        style={{
+          width,
+          height: 100,
+          backgroundColor: 'red',
+          left: 0,
+          top: 0,
+        }}
+      />
+    </>
+  );
+};
+```
+
+### 2. useMount
+
+Use `useMount` to animate component mount and unmount transitions.
+
+```tsx
+import React from 'react';
+import {
+  animate,
+  useMount,
+  withDecay,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-ui-animate';
+
+export const UseMount: React.FC = () => {
+  const [open, setOpen] = React.useState(true);
+  const mounted = useMount(open, { from: 0, enter: 1, exit: 0 });
+
+  return (
+    <>
+      {mounted(
+        (animation, isMounted) =>
+          isMounted && (
+            <animate.div
+              style={{
+                width: 100,
+                height: 100,
+                backgroundColor: 'teal',
+                opacity: animation,
+              }}
+            />
+          )
+      )}
+
+      <button onClick={() => setOpen((prev) => !prev)}>ANIMATE ME</button>
+    </>
+  );
+};
+```
+
+### 3. Interpolation
+
+Interpolate values for complex mappings like color transitions or movement.
+
+```tsx
+import React, { useLayoutEffect, useState } from 'react';
+import { animate, useValue, withSpring } from 'react-ui-animate';
+
+export const Interpolation: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [x, setX] = useValue(0);
+
+  useLayoutEffect(() => {
+    setX(withSpring(open ? 500 : 0));
+  }, [open, setX]);
+
+  return (
+    <>
+      <animate.div
+        style={{
+          width: 100,
+          height: 100,
+          backgroundColor: x.to([0, 500], ['red', 'blue']),
+          translateX: x,
+        }}
+      />
+
+      <button onClick={() => setOpen((p) => !p)}>ANIMATE ME</button>
+    </>
+  );
+};
+```
+
+---
+
+## API Overview
+
+- **`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.
+- **`useMount(state, config)`**: Manages mount/unmount transitions. `config` includes `from`, `enter`, and `exit` values.
+
+## Gestures
+
+`react-ui-animate` also provides hooks for handling gestures:
+
+- `useDrag`
+- `useMove`
+- `useScroll`
+- `useWheel`
+
+**Example: `useDrag`**
+
+```tsx
+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));
+  });
+
+  return (
+    <animate.div
+      ref={ref}
+      style={{
+        width: 100,
+        height: 100,
+        backgroundColor: '#3399ff',
+        translateX,
+      }}
+    />
+  );
+};
+```
+
+## Documentation
+
+For detailed documentation and examples, visit the official [react-ui-animate documentation](https://react-ui-animate.js.org/).
+
+## License
+
+This library is licensed under the MIT License.

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;

package/dist/animation/index.d.ts

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

package/dist/animation/types.d.ts

@@ -15,7 +15,6 @@ export interface TimingOptions {
 }
 export interface DecayOptions {
     velocity?: number;
-    clamp?: [number, number];
 }
 export interface SequenceOptions {
     animations?: Descriptor[];
@@ -33,10 +32,3 @@ export interface Descriptor {
     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;
-}

package/dist/animation/{hooks/useMount.d.ts → useMount.d.ts}

@@ -1,11 +1,11 @@
 import { MotionValue } from '@raidipesh78/re-motion';
-import type { Primitive, Descriptor } from '../types';
-export type ConfigSingle<T extends Primitive> = {
+import type { Primitive, Descriptor } from './types';
+type ConfigSingle<T extends Primitive> = {
     from?: T;
     enter?: T | Descriptor;
     exit?: T | Descriptor;
 };
-export type ConfigMulti<I extends Record<string, Primitive>> = {
+type ConfigMulti<I extends Record<string, Primitive>> = {
     from: I;
     enter?: I | Descriptor;
     exit?: I | Descriptor;
@@ -14,3 +14,4 @@ export declare function useMount<T extends Primitive = number>(isOpen: boolean,
 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/{hooks/useValue.d.ts → useValue.d.ts}

@@ -1,9 +1,9 @@
 import { MotionValue } from '@raidipesh78/re-motion';
-import type { Primitive, Descriptor, Controls } from '../types';
+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, Controls];
+export declare function useValue<T extends Base>(initial: T): [ValueReturn<T>, (to: Base | Descriptor) => void];
 export {};

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

@@ -32,16 +32,14 @@ export declare class DragGesture extends Gesture<DragEvent> {
     private velocity;
     private start;
     private offset;
-    private pointerCaptured;
     private activePointerId;
-    private attachedEls;
-    private activeEl;
+    private attachedEl;
     private pointerDownPos;
     private thresholdPassed;
     constructor(config?: DragConfig);
-    attach(elements: HTMLElement | HTMLElement[] | Window): () => void;
+    attach(element: HTMLElement): () => void;
     private onDown;
     private onMove;
     private onUp;
-    cancel(): void;
+    private cancel;
 }

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

@@ -7,7 +7,6 @@ export declare abstract class Gesture<E> {
     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;
+    abstract attach(element: HTMLElement): () => void;
 }
 export {};

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

@@ -16,15 +16,14 @@ export interface MoveEvent {
     cancel?: () => void;
 }
 export declare class MoveGesture extends Gesture<MoveEvent> {
-    private attachedEls;
     private prev;
     private lastTime;
+    private attachedEl;
     private movement;
     private offset;
     private velocity;
     private startPos;
-    attach(elements: HTMLElement | HTMLElement[] | Window): () => void;
-    cancel(): void;
+    attach(element: HTMLElement | Window): () => void;
     private onMove;
     private onLeave;
 }

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

@@ -16,14 +16,13 @@ export interface ScrollEvent {
     cancel?: () => void;
 }
 export declare class ScrollGesture extends Gesture<ScrollEvent> {
-    private attachedEls;
+    private attachedEl;
     private movement;
     private offset;
     private velocity;
     private prevScroll;
     private lastTime;
     private endTimeout?;
-    attach(elements: HTMLElement | HTMLElement[] | Window): () => void;
-    cancel(): void;
+    attach(element: HTMLElement | Window): () => void;
     private onScroll;
 }

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

@@ -16,13 +16,11 @@ export interface 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;
+    attach(element: HTMLElement | Window): () => void;
     private onWheel;
 }

package/dist/hooks/index.d.ts

@@ -1 +1,3 @@
 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

@@ -0,0 +1,12 @@
+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(refs: RefObject<HTMLElement>[], callback: (m: MeasurementType) => void, deps?: DependencyList): void;
+export {};