react-ui-animate 5.0.0-rc.1 → 5.0.0-rc.11

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/package.json

@@ -1,54 +1,63 @@
-{
-  "name": "react-ui-animate",
-  "version": "5.0.0-rc.1",
-  "description": "React library for gestures and animation",
-  "main": "dist/index.js",
-  "peerDependencies": {
-    "react": ">=16.8.0  || >=17.0.0 || >=18.0.0"
-  },
-  "dependencies": {
-    "@raidipesh78/re-motion": "^5.0.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.9",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/resize-observer-browser": "^0.1.11",
-    "babel-core": "^5.8.38",
-    "babel-runtime": "^6.26.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.18.0",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "^5.5.2"
-  },
-  "scripts": {
-    "clean": "rimraf -rf dist",
-    "build": "npm run clean && rollup -c",
-    "start": "npm run clean && rollup -c -w",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "version:minor": "npm version --no-git-tag-version minor",
-    "version:major": "npm version --no-git-tag-version major",
-    "version:patch": "npm version --no-git-tag-version patch",
-    "publish:next": "npm publish --tag next",
-    "publish:latest": "npm publish --tag latest"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dipeshrai123/react-ui-animate.git"
-  },
-  "keywords": [
-    "gesture",
-    "animation",
-    "react-ui-animate"
-  ],
-  "author": "Dipesh Rai",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/dipeshrai123/react-ui-animate/issues"
-  },
-  "homepage": "https://github.com/dipeshrai123/react-ui-animate#readme"
-}
+{
+  "name": "react-ui-animate",
+  "version": "5.0.0-rc.11",
+  "description": "React library for gestures and animation",
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "react": ">=16.8.0  || >=17.0.0 || >=18.0.0"
+  },
+  "dependencies": {
+    "@raidipesh78/re-motion": "^5.2.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.3",
+    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/release-notes-generator": "^14.0.3",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/resize-observer-browser": "^0.1.11",
+    "babel-core": "^5.8.38",
+    "babel-runtime": "^6.26.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.18.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "semantic-release": "^24.2.6",
+    "typescript": "^5.5.2"
+  },
+  "scripts": {
+    "clean": "rimraf -rf dist",
+    "build": "npm run clean && rollup -c",
+    "start": "npm run clean && rollup -c -w",
+    "start:dev": "cd example && npm start",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "version:patch": "npm version patch",
+    "version:rc": "npm version prerelease --preid=rc",
+    "version:prepatch": "npm version prepatch --preid=rc",
+    "publish:next": "npm publish --tag next",
+    "publish:latest": "npm publish --tag latest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dipeshrai123/react-ui-animate.git"
+  },
+  "keywords": [
+    "gesture",
+    "animation",
+    "react-ui-animate"
+  ],
+  "author": "Dipesh Rai",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dipeshrai123/react-ui-animate/issues"
+  },
+  "homepage": "https://github.com/dipeshrai123/react-ui-animate#readme"
+}

package/dist/animation/AnimationConfig.d.ts

@@ -1,63 +0,0 @@
-import { Easing } from '@raidipesh78/re-motion';
-export declare const AnimationConfig: {
-    Timing: {
-        BOUNCE: {
-            duration: number;
-            easing: typeof Easing.bounce;
-        };
-        EASE_IN: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        EASE_OUT: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        EASE_IN_OUT: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        POWER1: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        POWER2: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        POWER3: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        POWER4: {
-            duration: number;
-            easing: (t: number) => number;
-        };
-        LINEAR: {
-            duration: number;
-            easing: typeof Easing.linear;
-        };
-    };
-    Spring: {
-        ELASTIC: {
-            mass: number;
-            friction: number;
-            tension: number;
-        };
-        EASE: {
-            mass: number;
-            friction: number;
-            tension: number;
-        };
-        STIFF: {
-            mass: number;
-            friction: number;
-            tension: number;
-        };
-        WOBBLE: {
-            mass: number;
-            friction: number;
-            tension: number;
-        };
-    };
-};

package/dist/animation/Value.d.ts

@@ -1,12 +0,0 @@
-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;
-}