react-ui-animate 4.3.1 → 5.0.0-alhpa.6

package/README.md

@@ -6,194 +6,181 @@
 
 ### Install
 
-You can install react-ui-animate via `npm` or `yarn`:
+You can install `react-ui-animate` via `npm` or `yarn`:
 
 ```sh
-npm i react-ui-animate
+npm install react-ui-animate
 ```
 
 ```sh
 yarn add react-ui-animate
 ```
 
-### Getting Started
+---
+
+## 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.
 
-The `react-ui-animate` library provides a straightforward way to add animations and gestures to your React components. Here’s how you can get started quickly:
+### 1. useValue
 
-```javascript
-import { animate, useValue } from 'react-ui-animate';
+Use `useValue` to initialize and update an animated value.
 
-export default function () {
-  const opacity = useValue(0); // Initialize
+```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 (
     <>
-      <animate.div
-        style={{
-          opacity: opacity.value, // Apply
-          width: 100,
-          padding: 20,
-          background: '#39F',
+      <button
+        onClick={() => {
+          setWidth(withSequence([withTiming(100), withSpring(0)]));
         }}
       >
-        ANIMATED
-      </animate.div>
-      
-      <button 
+        SEQUENCE (100 → 0)
+      </button>
+      <button
         onClick={() => {
-          opacity.value = 1 // Update
+          setWidth(withSpring(200));
         }}
       >
-        Animate Me
+        SPRING (→ 200)
       </button>
+      <button
+        onClick={() => {
+          setWidth(400);
+        }}
+      >
+        IMMEDIATE (→ 400)
+      </button>
+
+      <animate.div
+        style={{
+          width,
+          height: 100,
+          backgroundColor: 'red',
+          left: 0,
+          top: 0,
+        }}
+      />
     </>
   );
-}
+};
 ```
 
-In this example, clicking the `Animate Me` button changes the opacity from 0 to 1.
-
----
+### 2. useMount
 
-### Implementation Steps
+Use `useMount` to animate component mount and unmount transitions.
 
-#### 1. Initialize
+```tsx
+import React from 'react';
+import {
+  animate,
+  useMount,
+  withDecay,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-ui-animate';
 
-The `useValue()` hook is central to creating animations. It initializes an animated value and allows you to seamlessly update it to create dynamic effects.
+export const UseMount: React.FC = () => {
+  const [open, setOpen] = React.useState(true);
+  const mounted = useMount(open, { from: 0, enter: 1, exit: 0 });
 
-```javascript
-const opacity = useValue(0); // Initialize a animation value 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>
+    </>
+  );
+};
 ```
 
-#### 2. Apply
+### 3. Interpolation
 
-`animate.div` is a special component designed to work with `useValue()`. It simplifies animating elements by directly using animated values.
+Interpolate values for complex mappings like color transitions or movement.
 
-```jsx
-import { useValue, animate } from 'react-ui-animate'
+```tsx
+import React, { useLayoutEffect, useState } from 'react';
+import { animate, useValue, withSpring } from 'react-ui-animate';
 
-const width = useValue(100); // Start with a width of 100
+export const Interpolation: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [x, setX] = useValue(0);
 
-<animate.div
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: '#39f',
-  }}
-/>;
-```
+  useLayoutEffect(() => {
+    setX(withSpring(open ? 500 : 0));
+  }, [open, setX]);
 
-#### 3. Update
-
-To update the value simply assign the initialized animated node with a value.
-
-```jsx
-import { useValue, withSpring } from 'react-ui-animate';
-
-const width = useValue(100);
+  return (
+    <>
+      <animate.div
+        style={{
+          width: 100,
+          height: 100,
+          backgroundColor: x.to([0, 500], ['red', 'blue']),
+          translateX: x,
+        }}
+      />
 
-<button 
-  onClick={() => {
-      // Update
-      width.value = withSpring(400); 
-  }}
->
-  Update
-</button>
+      <button onClick={() => setOpen((p) => !p)}>ANIMATE ME</button>
+    </>
+  );
+};
 ```
 
-In this example, `withSpring` runs spring animation when updating the value.
-
 ---
 
-#### `interpolate`
-
-The `interpolate()` function is useful for mapping values from one range to another, enabling more complex animations.
-
-```javascript
-import { useValue, animate, interpolate } from 'react-ui-animate';
-
-const width = useValue(100);
-
-<animate.div
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: interpolate(width.value, [100, 200], ['red', 'blue']),
-  }}
-/>;
-```
-
-In this example, as the width changes from 100 to 200, the background color smoothly transitions from red to blue.
-
-#### Modifiers
-
-You can dynamically modify animation configurations by assigning values to an animated value using various animation functions.
-
-To apply a spring animation and update the value to `10`:
-
-```jsx
-x.value = withSpring(10);
-```
-
-To apply a timing animation with a duration of 5000 milliseconds:
+## API Overview
 
-```jsx
-x.value = withTiming(10, { duration: 5000 });
-```
-
-To create sequential transitions using the `withSequence` function with dynamic modifiers like `withSpring` and `withTiming`:
-
-```jsx
-x.value = withSequence([withSpring(50), withTiming(100), withEase(200)]);
-```
-
-#### `useMount()`
+- **`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.
 
-The `useMount()` hook facilitates managing the mounting and unmounting of a component with animations.
+## Gestures
 
-```jsx
-import { useMount } from 'react-ui-animate';
-
-export default function App() {
-  const [visible, setVisible] = useState(false);
-
-  const open = useMount(visible);
-
-  return open((animation, mounted) => mounted && <animate.div />);
-}
-```
+`react-ui-animate` also provides hooks for handling gestures:
 
-In this example,
+- `useDrag`
+- `useMouseMove`
+- `useScroll`
+- `useWheel`
+- `useGesture`
 
-1. A state variable `visible` determines whether the component is visible.
-2. The `useMount` hook takes `visible` as an argument and provides animation states for mounting and unmounting.
-3. The `open` function, returned by `useMount`, is used to conditionally render `animate.div` based on the `mounted` boolean and apply the transition animation.
+**Example: `useDrag`**
 
----
-
-### Gestures
-
-The `react-ui-animate` library also provides several hooks for handling different types of gestures:
-
-1. `useDrag`: Handles drag gestures on elements.
-2. `useMouseMove`: Handles mouse movements.
-3. `useScroll`: Handles scrolling of the document.
-4. `useWheel`: Handles wheel rotation gestures.
-5. `useGesture`: Handles combinations of various gestures.
-
-**Example**: `useDrag`
-
-Here’s an example of using the useDrag hook to enable drag gestures:
-
-```jsx
+```tsx
+import React from 'react';
 import { useValue, animate, useDrag, withSpring } from 'react-ui-animate';
 
-export const Draggable = () => {
-  const translateX = useValue(0);
+export const Draggable: React.FC = () => {
+  const [translateX, setTranslateX] = useValue(0);
 
-  const bind = useDrag(function ({ down, movementX }) {
-    translateX.value = down ? movementX : withSpring(0);
+  const bind = useDrag(({ down, movementX }) => {
+    setTranslateX(down ? movementX : withSpring(0));
   });
 
   return (
@@ -203,18 +190,16 @@ export const Draggable = () => {
         width: 100,
         height: 100,
         backgroundColor: '#3399ff',
-        translateX: translateX.value,
+        translateX,
       }}
     />
   );
 };
 ```
 
-In this example, the blue block can be dragged horizontally by clicking and dragging.
-
 ## Documentation
 
-For detailed documentation and examples, visit the official [react-ui-animate documentation](http://react-ui-animate.js.org/).
+For detailed documentation and examples, visit the official [react-ui-animate documentation](https://react-ui-animate.js.org/).
 
 ## License
 

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 } from './types';
+interface WithSpringOptions {
+    mass?: number;
+    tension?: number;
+    friction?: number;
+    onStart?: () => void;
+    onChange?: (v: number | string) => void;
+    onRest?: () => void;
+}
+export declare const withSpring: (to: number, options?: WithSpringOptions) => DriverConfig;
+export declare const withEase: (to: number, 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: number, 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,3 +1,3 @@
 export * from './useValue';
 export * from './useMount';
-export * from './useValues';
+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,10 +1,12 @@
-import { FluidValue } from '@raidipesh78/re-motion';
+import { MotionValue } from '@raidipesh78/re-motion';
 import type { ToValue } from '../types';
-export interface UseMountConfig {
+export declare function useMount(isOpen: boolean, config?: {
     from?: number;
-    enter?: ToValue;
-    exit?: ToValue;
-}
-export declare const useMount: (state: boolean, config?: UseMountConfig) => (fn: (animation: {
-    value: FluidValue;
-}, mounted: boolean) => React.ReactNode) => import("react").ReactNode;
+    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?: 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,7 +1,15 @@
-import { FluidValue } from '@raidipesh78/re-motion';
-import type { ToValue } from '../types';
-export declare function useValue(initialValue: number | string): {
-    get value(): FluidValue;
-    set value(to: number | string | ToValue);
-    readonly currentValue: string | number;
-};
+import { MotionValue } from '@raidipesh78/re-motion';
+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 { interpolate, bInterpolate } from './interpolation';
-export { MountedBlock, ScrollableBlock } from './modules';
-export { useValue, useMount, useValues, type UseMountConfig } from './hooks';
+export { useValue, useMount, useAnimatedList } from './hooks';
 export { withSpring, withTiming, withSequence, withDelay, withDecay, withLoop, withEase, } from './controllers';
-export { AnimationConfig } from './helpers';
+export { AnimationConfig } from './AnimationConfig';
+export { interpolateNumbers } from './interpolation';

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

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

package/dist/animation/types.d.ts

@@ -1,16 +1,27 @@
-import { FluidValue, spring } from '@raidipesh78/re-motion';
-export type EndCallbackResult = {
-    finished: boolean;
-    value?: number | string;
-};
-export type EndCallback = (result: EndCallbackResult) => void;
-export type Controller = ReturnType<typeof spring>;
-export type ToValue = (animation: FluidValue) => {
-    controller: Controller;
-    callback?: EndCallback;
-};
+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?: number;
+    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/index.d.ts

@@ -1,9 +1,5 @@
-export { Easing, makeFluid as makeAnimated, fluid as animate, } from '@raidipesh78/re-motion';
-export { AnimationConfig, MountedBlock, ScrollableBlock } from './animation';
-export { interpolate, bInterpolate } from './animation';
-export { useValue, useMount, useValues } from './animation';
-export { withSpring, withTiming, withSequence, withDelay, withDecay, withLoop, withEase, } from './animation';
+export { Easing, makeMotion as makeAnimated, motion as animate, } 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 type { UseMountConfig } from './animation';