react-ui-animate 4.0.0-rc.2 → 4.0.0-rc.4

package/.idea/codeStyles/Project.xml

@@ -0,0 +1,59 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/react-ui-animate.iml" filepath="$PROJECT_DIR$/.idea/react-ui-animate.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/react-ui-animate.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

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,209 +1,209 @@
-# 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 i 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. Here’s how you can get started quickly:
-
-```javascript
-import { animate, useAnimatedValue } from 'react-ui-animate';
-
-export default function () {
-  // Initialize an animated opacity value
-  const opacity = useAnimatedValue(0);
-
-  return (
-    <div>
-      {/* animate.div component uses the animated opacity value */}
-      <animate.div
-        style={{
-          opacity: opacity.value, // using opacity with value property
-          width: 100,
-          padding: 20,
-          background: '#39F',
-        }}
-      >
-        ANIMATED
-      </animate.div>
-
-      {/* Clicking the button changes the opacity smoothly to 1 */}
-      <button onClick={() => (opacity.value = 1)}>Animate Me</button>
-    </div>
-  );
-}
-```
-
-In this example, clicking the "Animate Me" button smoothly changes the opacity of the animated block from 0 to 1.
-
-### Key Features
-
-#### `useAnimatedValue()`
-
-The `useAnimatedValue()` hook is central to creating animations. It initializes an animated value and allows you to seamlessly update it to create dynamic effects.
-
-```javascript
-const opacity = useAnimatedValue(0); // Start with opacity set to 0
-
-// Use in style
-style={{
-  opacity: opacity.value, // Access the animated opacity value
-}}
-
-// Update the value on user interaction
-onClick={() => (opacity.value = 1)} // Changes the opacity to 1
-```
-
-#### `animate.div`
-
-`animate.div` is a special component designed to work with `useAnimatedValue()`. It simplifies animating elements by directly using animated values.
-
-```javascript
-const width = useAnimatedValue(100); // Start with a width of 100
-
-<animate.div
-  style={{
-    width: width.value,
-    height: 100,
-    backgroundColor: '#39f',
-  }}
-/>;
-```
-
-#### `interpolate`
-
-The `interpolate()` function is useful for mapping values from one range to another, enabling more complex animations.
-
-```javascript
-import { useAnimatedValue, animate, interpolate } from 'react-ui-animate';
-
-const width = useAnimatedValue(100); // Start with a width of 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.
-
-#### Dynamic Animations and Sequence Transitions
-
-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:
-
-```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), 200]);
-```
-
-To delay an animation using the withDelay function:
-
-```jsx
-x.value = withDelay(1000, withSpring(100));
-```
-
-In this example, a spring animation to `100` will be applied after a 1-second delay.
-
-#### `useMountedValue()`
-
-The `useMountedValue()` hook facilitates managing the mounting and unmounting of a component with animations.
-
-```jsx
-import { useMountedValue } from 'react-ui-animate';
-
-export default function App() {
-  const [visible, setVisible] = useState(false);
-
-  const open = useMountedValue(visible, {
-    from: 0,
-    enter: 1,
-    exit: 0,
-  });
-
-  return open((animation, mounted) => mounted && <animate.div />);
-}
-```
-
-In this example,
-
-1. A state variable `visible` determines whether the component is visible.
-2. The `useMountedValue` hook takes `visible` as an argument and provides animation states for mounting and unmounting.
-3. The `open` function, returned by `useMountedValue`, is used to conditionally render `animate.div` based on the `mounted` boolean and apply the transition animation.
-
-### 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
-import { useAnimatedValue, animate, useDrag } from 'react-ui-animate';
-
-export const Draggable = () => {
-  const translateX = useAnimatedValue(0);
-
-  const bind = useDrag(function ({ down, movementX }) {
-    translateX.value = down ? movementX : 0;
-  });
-
-  return (
-    <animate.div
-      {...bind()}
-      style={{
-        width: 100,
-        height: 100,
-        backgroundColor: '#3399ff',
-        translateX: translateX.value, // Use translateX with animated value
-      }}
-    />
-  );
-};
-```
-
-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/).
-
-## 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 i 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. Here’s how you can get started quickly:
+
+```javascript
+import { animate, useValue } from 'react-ui-animate';
+
+export default function () {
+  // Initialize an animated opacity value
+  const opacity = useValue(0);
+
+  return (
+    <div>
+      {/* animate.div component uses the animated opacity value */}
+      <animate.div
+        style={{
+          opacity: opacity.value, // using opacity with value property
+          width: 100,
+          padding: 20,
+          background: '#39F',
+        }}
+      >
+        ANIMATED
+      </animate.div>
+
+      {/* Clicking the button changes the opacity smoothly to 1 */}
+      <button onClick={() => (opacity.value = 1)}>Animate Me</button>
+    </div>
+  );
+}
+```
+
+In this example, clicking the "Animate Me" button smoothly changes the opacity of the animated block from 0 to 1.
+
+### Key Features
+
+#### `useValue()`
+
+The `useValue()` hook is central to creating animations. It initializes an animated value and allows you to seamlessly update it to create dynamic effects.
+
+```javascript
+const opacity = useValue(0); // Start with opacity set to 0
+
+// Use in style
+style={{
+  opacity: opacity.value, // Access the animated opacity value
+}}
+
+// Update the value on user interaction
+onClick={() => (opacity.value = 1)} // Changes the opacity to 1
+```
+
+#### `animate.div`
+
+`animate.div` is a special component designed to work with `useValue()`. It simplifies animating elements by directly using animated values.
+
+```javascript
+const width = useValue(100); // Start with a width of 100
+
+<animate.div
+  style={{
+    width: width.value,
+    height: 100,
+    backgroundColor: '#39f',
+  }}
+/>;
+```
+
+#### `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); // Start with a width of 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.
+
+#### Dynamic Animations and Sequence Transitions
+
+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:
+
+```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), 200]);
+```
+
+To delay an animation using the withDelay function:
+
+```jsx
+x.value = withDelay(1000, withSpring(100));
+```
+
+In this example, a spring animation to `100` will be applied after a 1-second delay.
+
+#### `useMount()`
+
+The `useMount()` hook facilitates managing the mounting and unmounting of a component with animations.
+
+```jsx
+import { useMount } from 'react-ui-animate';
+
+export default function App() {
+  const [visible, setVisible] = useState(false);
+
+  const open = useMount(visible, {
+    from: 0,
+    enter: 1,
+    exit: 0,
+  });
+
+  return open((animation, mounted) => mounted && <animate.div />);
+}
+```
+
+In this example,
+
+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.
+
+### 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
+import { useValue, animate, useDrag } from 'react-ui-animate';
+
+export const Draggable = () => {
+  const translateX = useValue(0);
+
+  const bind = useDrag(function ({ down, movementX }) {
+    translateX.value = down ? movementX : 0;
+  });
+
+  return (
+    <animate.div
+      {...bind()}
+      style={{
+        width: 100,
+        height: 100,
+        backgroundColor: '#3399ff',
+        translateX: translateX.value, // Use translateX with animated value
+      }}
+    />
+  );
+};
+```
+
+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/).
+
+## License
+
+This library is licensed under the MIT License.

package/dist/animation/animationType.d.ts

@@ -1,16 +1,59 @@
-import type { UseAnimatedValueConfig } from './useAnimatedValue';
-export declare const AnimationConfigUtils: {
-    ELASTIC: UseAnimatedValueConfig;
-    BOUNCE: UseAnimatedValueConfig;
-    EASE: UseAnimatedValueConfig;
-    STIFF: UseAnimatedValueConfig;
-    WOOBLE: UseAnimatedValueConfig;
-    EASE_IN: UseAnimatedValueConfig;
-    EASE_OUT: UseAnimatedValueConfig;
-    EASE_IN_OUT: UseAnimatedValueConfig;
-    POWER1: UseAnimatedValueConfig;
-    POWER2: UseAnimatedValueConfig;
-    POWER3: UseAnimatedValueConfig;
-    POWER4: UseAnimatedValueConfig;
-    LINEAR: UseAnimatedValueConfig;
+import { Easing } from '@raidipesh78/re-motion';
+export declare const AnimationConfig: {
+    ELASTIC: {
+        mass: number;
+        friction: number;
+        tension: number;
+    };
+    BOUNCE: {
+        duration: number;
+        easing: typeof Easing.bounce;
+    };
+    EASE: {
+        mass: number;
+        friction: number;
+        tension: number;
+    };
+    STIFF: {
+        mass: number;
+        friction: number;
+        tension: number;
+    };
+    WOOBLE: {
+        mass: number;
+        friction: number;
+        tension: number;
+    };
+    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;
+    };
 };

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

@@ -0,0 +1,8 @@
+export { withConfig } from './withConfig';
+export { withDecay } from './withDecay';
+export { withDelay } from './withDelay';
+export { withEase } from './withEase';
+export { withSequence } from './withSequence';
+export { withSpring } from './withSpring';
+export { withTiming } from './withTiming';
+export { withLoop } from './withLoop';

package/dist/animation/controllers/withConfig.d.ts

@@ -0,0 +1,5 @@
+import type { UseValueConfig } from '../hooks';
+import type { UpdateValue } from '../core/FluidController';
+export interface WithOnCallbacks extends Pick<UseValueConfig, 'onRest' | 'onStart' | 'onChange'> {
+}
+export declare const withConfig: (toValue: number, config?: UseValueConfig) => UpdateValue;

package/dist/animation/controllers/withDecay.d.ts

@@ -0,0 +1,7 @@
+import type { UseValueConfig } from '../hooks';
+import type { WithOnCallbacks } from './withConfig';
+import type { UpdateValue } from '../core/FluidController';
+interface WithDecayConfig extends Pick<UseValueConfig, 'velocity' | 'deceleration'>, WithOnCallbacks {
+}
+export declare const withDecay: (config?: WithDecayConfig) => UpdateValue;
+export {};

package/dist/animation/controllers/withDelay.d.ts

@@ -0,0 +1,6 @@
+import type { UseValueConfig } from '../hooks';
+import type { UpdateValue } from '../core/FluidController';
+export declare const withDelay: (delay: number, animation: {
+    toValue: number;
+    config?: UseValueConfig;
+}) => UpdateValue;