react-ui-animate 5.0.0-rc.2 → 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`, `withEase` — 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`
-- `useMouseMove`
-- `useScroll`
-- `useWheel`
-- `useGesture`
-
-**Example: `useDrag`**
-
-```tsx
-import React from 'react';
-import { useValue, animate, useDrag, withSpring } from 'react-ui-animate';
-
-export const Draggable: React.FC = () => {
-  const [translateX, setTranslateX] = useValue(0);
-
-  const bind = useDrag(({ down, movementX }) => {
-    setTranslateX(down ? movementX : withSpring(0));
-  });
-
-  return (
-    <animate.div
-      {...bind()}
-      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/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 {};