react-ui-animate 4.0.0-rc.3 → 4.0.0-rc.5

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/misc.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MaterialThemeProjectNewConfig">
+    <option name="metadata">
+      <MTProjectMetadataState>
+        <option name="migrated" value="true" />
+        <option name="pristineConfig" value="false" />
+        <option name="userId" value="66c3e7aa:1918d7077fc:-7ffe" />
+      </MTProjectMetadataState>
+    </option>
+  </component>
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_22" default="true" project-jdk-name="openjdk-22" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

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/prettier.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnSave" value="true" />
+  </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/README.md

@@ -21,11 +21,11 @@ yarn add react-ui-animate
 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';
+import { animate, useValue } from 'react-ui-animate';
 
 export default function () {
   // Initialize an animated opacity value
-  const opacity = useAnimatedValue(0);
+  const opacity = useValue(0);
 
   return (
     <div>
@@ -52,12 +52,12 @@ In this example, clicking the "Animate Me" button smoothly changes the opacity o
 
 ### Key Features
 
-#### `useAnimatedValue()`
+#### `useValue()`
 
-The `useAnimatedValue()` hook is central to creating animations. It initializes an animated value and allows you to seamlessly update it to create dynamic effects.
+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 = useAnimatedValue(0); // Start with opacity set to 0
+const opacity = useValue(0); // Start with opacity set to 0
 
 // Use in style
 style={{
@@ -70,10 +70,10 @@ 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.
+`animate.div` is a special component designed to work with `useValue()`. It simplifies animating elements by directly using animated values.
 
 ```javascript
-const width = useAnimatedValue(100); // Start with a width of 100
+const width = useValue(100); // Start with a width of 100
 
 <animate.div
   style={{
@@ -89,9 +89,9 @@ const width = useAnimatedValue(100); // Start with a width of 100
 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';
+import { useValue, animate, interpolate } from 'react-ui-animate';
 
-const width = useAnimatedValue(100); // Start with a width of 100
+const width = useValue(100); // Start with a width of 100
 
 <animate.div
   style={{
@@ -134,17 +134,17 @@ x.value = withDelay(1000, withSpring(100));
 
 In this example, a spring animation to `100` will be applied after a 1-second delay.
 
-#### `useMountedValue()`
+#### `useMount()`
 
-The `useMountedValue()` hook facilitates managing the mounting and unmounting of a component with animations.
+The `useMount()` hook facilitates managing the mounting and unmounting of a component with animations.
 
 ```jsx
-import { useMountedValue } from 'react-ui-animate';
+import { useMount } from 'react-ui-animate';
 
 export default function App() {
   const [visible, setVisible] = useState(false);
 
-  const open = useMountedValue(visible, {
+  const open = useMount(visible, {
     from: 0,
     enter: 1,
     exit: 0,
@@ -157,8 +157,8 @@ export default function App() {
 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.
+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
 
@@ -175,10 +175,10 @@ The `react-ui-animate` library also provides several hooks for handling differen
 Here’s an example of using the useDrag hook to enable drag gestures:
 
 ```jsx
-import { useAnimatedValue, animate, useDrag } from 'react-ui-animate';
+import { useValue, animate, useDrag } from 'react-ui-animate';
 
 export const Draggable = () => {
-  const translateX = useAnimatedValue(0);
+  const translateX = useValue(0);
 
   const bind = useDrag(function ({ down, movementX }) {
     translateX.value = down ? movementX : 0;

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;

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

@@ -0,0 +1,6 @@
+import { type WithOnCallbacks } from './withConfig';
+import type { UpdateValue } from '../core/FluidController';
+interface WithEaseConfig extends WithOnCallbacks {
+}
+export declare const withEase: (toValue: number, config?: WithEaseConfig) => UpdateValue;
+export {};

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

@@ -0,0 +1,2 @@
+import type { UpdateValue } from '../core/FluidController';
+export declare const withLoop: (updateValue: UpdateValue | UpdateValue[], loop: number) => UpdateValue[];

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

@@ -0,0 +1,2 @@
+import { type UpdateValue } from '../core/FluidController';
+export declare const withSequence: (animations: Array<UpdateValue | number | Array<UpdateValue | number>>) => UpdateValue[];

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

@@ -0,0 +1,7 @@
+import { type UseValueConfig } from '../hooks';
+import { type WithOnCallbacks } from './withConfig';
+import type { UpdateValue } from '../core/FluidController';
+interface WithSpringConfig extends Pick<UseValueConfig, 'mass' | 'friction' | 'tension'>, WithOnCallbacks {
+}
+export declare const withSpring: (toValue: number, config?: WithSpringConfig) => UpdateValue;
+export {};

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

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

package/dist/animation/core/FluidArrayController.d.ts

@@ -1,7 +1,7 @@
-import type { AssignValue, UseFluidValueConfig } from './FluidController';
+import type { UpdateValue, UseFluidValueConfig } from './FluidController';
 export declare class FluidArrayController {
     private fluidControllers;
     constructor(values: number[], config?: UseFluidValueConfig);
-    setFluid(updateValue: AssignValue[], callback?: () => void): void;
+    setFluid(updateValue: Array<UpdateValue | UpdateValue[]>, callback?: () => void): void;
     getFluid(): import("@raidipesh78/re-motion").FluidValue[];
 }

package/dist/animation/core/FluidController.d.ts

@@ -15,18 +15,20 @@ export interface UseFluidValueConfig {
     decay?: boolean;
     velocity?: number;
     deceleration?: number;
+    loop?: number;
 }
-type UpdateValue = {
+export type UpdateValue = {
     toValue?: number;
     config?: UseFluidValueConfig;
 };
-export type AssignValue = UpdateValue | Fn<Fn<UpdateValue, Promise<any>>, void>;
 export declare class FluidController {
     private fluid;
     private defaultConfig?;
+    private iterationsSoFar;
     constructor(value: number, config?: UseFluidValueConfig);
+    private getAnimation;
     private runAnimation;
-    setFluid(updateValue: AssignValue, callback?: (value: number) => void): void;
+    setFluid(updateValue: UpdateValue | UpdateValue[], callback?: (value: number) => void): void;
     getFluid(): FluidValue;
 }
 export {};

package/dist/animation/core/useFluidValue.d.ts

@@ -1,3 +1,3 @@
 import { FluidValue } from '@raidipesh78/re-motion';
-import { AssignValue, UseFluidValueConfig } from './FluidController';
-export declare const useFluidValue: <T extends number | number[]>(value: T, config?: UseFluidValueConfig) => [T extends number ? FluidValue : FluidValue[], (updateValue: T extends number ? AssignValue : AssignValue[], callback?: () => void) => void];
+import { UpdateValue, UseFluidValueConfig } from './FluidController';
+export declare const useFluidValue: <T extends number>(value: T, config?: UseFluidValueConfig) => [FluidValue, (updateValue: UpdateValue | UpdateValue[], callback?: () => void) => void];

package/dist/animation/core/useFluidValues.d.ts

@@ -0,0 +1,3 @@
+import { FluidValue } from '@raidipesh78/re-motion';
+import { UpdateValue, UseFluidValueConfig } from './FluidController';
+export declare const useFluidValues: <T extends number[]>(value: T, config?: UseFluidValueConfig) => [FluidValue[], (updateValue: Array<UpdateValue | UpdateValue[]>, callback?: () => void) => void];

package/dist/animation/core/useMount.d.ts

@@ -1,9 +1,9 @@
 import { FluidValue } from '@raidipesh78/re-motion';
-import type { AssignValue, UseFluidValueConfig } from './FluidController';
+import type { UpdateValue, UseFluidValueConfig } from './FluidController';
 export interface UseMountConfig {
     from: number;
-    enter: number | AssignValue;
-    exit: number | AssignValue;
+    enter: number | UpdateValue | number[] | UpdateValue[];
+    exit: number | UpdateValue | number[] | UpdateValue[];
     config?: UseFluidValueConfig;
 }
 /**

package/dist/animation/helpers/animationType.d.ts

@@ -0,0 +1,59 @@
+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/helpers/getToValue.d.ts

@@ -0,0 +1,2 @@
+import { UpdateValue, UseFluidValueConfig } from '../core/FluidController';
+export declare function getToValue(value: number | UpdateValue, config?: UseFluidValueConfig): UpdateValue;

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

@@ -1,2 +1,4 @@
 export * from './isDefined';
 export * from './delay';
+export * from './getToValue';
+export * from './animationType';

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

@@ -0,0 +1,3 @@
+export * from './useValue';
+export * from './useValues';
+export * from './useMount';

package/dist/animation/hooks/useMount.d.ts

@@ -0,0 +1,15 @@
+import { FluidValue } from '@raidipesh78/re-motion';
+import { UseMountConfig as UseInternalMountConfig } from '../core/useMount';
+export interface UseMountConfig extends UseInternalMountConfig {
+}
+/**
+ * `useMount` handles mounting and unmounting of a component which captures current state
+ * passed as an argument (`state`) and exposes the shadow state which handles the mount and unmount
+ * of a component.
+ *
+ * @param { boolean } state - Boolean indicating the component should mount or unmount.
+ * @param { UseMountConfig } config - Animation configuration.
+ */
+export declare function useMount(state: boolean, config: UseMountConfig): (cb: (value: {
+    value: FluidValue;
+}, mounted: boolean) => React.ReactNode) => import("react").ReactNode;

package/dist/animation/hooks/useValue.d.ts

@@ -0,0 +1,17 @@
+import { FluidValue } from '@raidipesh78/re-motion';
+import type { UpdateValue, UseFluidValueConfig } from '../core/FluidController';
+export interface UseValueConfig extends UseFluidValueConfig {
+}
+/**
+ * `useValue` returns an animation value with `.value` and `.currentValue` property which is
+ * initialized when passed to argument (`initialValue`). The returned value persist until the lifetime of
+ * a component. It doesn't cast any re-renders which can is very good for performance optimization.
+ *
+ * @param { number } initialValue - Initial value
+ * @param { UseValueConfig } config - Animation configuration object.
+ */
+export declare function useValue<T extends number>(initialValue: T, config?: UseValueConfig): {
+    get value(): FluidValue;
+    set value(to: number | UpdateValue | number[] | UpdateValue[]);
+    readonly currentValue: number;
+};

package/dist/animation/hooks/useValues.d.ts

@@ -0,0 +1,8 @@
+import { FluidValue } from '@raidipesh78/re-motion';
+import { type UpdateValue } from '../core/FluidController';
+import { type UseValueConfig } from './useValue';
+export declare function useValues<T extends number[]>(initialValue: T, config?: UseValueConfig): {
+    get value(): FluidValue[];
+    set value(to: Array<number | number[] | UpdateValue | UpdateValue[]>);
+    readonly currentValue: number[];
+};

package/dist/animation/index.d.ts

@@ -1,7 +1,5 @@
 export { interpolate, bInterpolate } from './interpolation';
 export { MountedBlock, ScrollableBlock, TransitionBlock } from './modules';
-export { useAnimatedValue, UseAnimatedValueConfig } from './useAnimatedValue';
-export { useMountedValue, UseMountedValueConfig } from './useMountedValue';
-export { AnimationConfigUtils } from './animationType';
-export { withSpring, withTiming, withSequence, withDelay, withEase, withConfig, withDecay, } from './withFunctions';
-export { delay } from './helpers';
+export { useValue, useValues, useMount, type UseValueConfig, type UseMountConfig, } from './hooks';
+export { withSpring, withTiming, withSequence, withDelay, withEase, withConfig, withDecay, withLoop, } from './controllers';
+export { delay, AnimationConfig } from './helpers';

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

@@ -0,0 +1,25 @@
+export declare const COLOR_NUMBER_REGEX: RegExp;
+export declare const HEX_NAME_COLOR: RegExp;
+interface classNameType {
+    [name: string]: string;
+}
+export declare const colorNames: classNameType;
+export declare function hexToRgba(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare function rgbaToHex(rgba: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}): string;
+export declare function processColor(color: number | string): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export {};

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

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

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

@@ -0,0 +1,11 @@
+import { FluidValue } from '@raidipesh78/re-motion';
+type ExtrapolateType = 'identity' | 'extend' | 'clamp';
+type ExtrapolateConfig = {
+    extrapolate?: ExtrapolateType;
+    extrapolateLeft?: ExtrapolateType;
+    extrapolateRight?: ExtrapolateType;
+};
+type InterpolateReturnType<T> = T extends number ? number : ReturnType<FluidValue['interpolate']>;
+export declare const interpolate: <T extends number | FluidValue>(value: T, inputRange: number[], outputRange: number[] | string[], extrapolateConfig?: ExtrapolateConfig) => InterpolateReturnType<T>;
+export declare const bInterpolate: <T extends number | FluidValue>(value: T, minOutput: number | string, maxOutput: number | string, extrapolateConfig?: ExtrapolateConfig) => InterpolateReturnType<T>;
+export {};

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

@@ -0,0 +1,8 @@
+type ExtrapolateType = 'identity' | 'extend' | 'clamp';
+type ExtrapolateConfig = {
+    extrapolate?: ExtrapolateType;
+    extrapolateLeft?: ExtrapolateType;
+    extrapolateRight?: ExtrapolateType;
+};
+export declare function interpolateNumbers(value: number, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
+export {};

package/dist/animation/modules/MountedBlock.d.ts

@@ -1,23 +1,20 @@
 import * as React from 'react';
-import type { UpdateValue, UseAnimatedValueConfig } from '../useAnimatedValue';
-interface MountedBlockProps {
+import { type UseMountConfig } from '../hooks';
+import { FluidValue } from '@raidipesh78/re-motion';
+interface MountedBlockProps extends Partial<UseMountConfig> {
     state: boolean;
     children: (animation: {
-        value: any;
+        value: FluidValue;
     }) => React.ReactNode;
-    from?: number;
-    enter?: number | UpdateValue;
-    exit?: number | UpdateValue;
-    config?: UseAnimatedValueConfig;
 }
 /**
  * MountedBlock - Higher order component which handles mounting and unmounting of a component.
  * @param { boolean } state - Boolean indicating the component should mount or unmount.
  * @param { function } children - Child as a function with `AnimatedValue` on `.value` property.
  * @param { number } } from - Number that dictates the beginning state for animation.
- * @param { number | { toValue: number, config: MountedValueConfig } } enter - Number that dictates the entry state for animation.
- * @param { number | { toValue: number, config: MountedValueConfig } } exit - Number that dictates the exit state for animation.
- * @param { UseAnimatedValueConfig } config - Animation configuration for overall animation.
+ * @param { number } enter - Number that dictates the entry state for animation.
+ * @param { number } exit - Number that dictates the exit state for animation.
+ * @param { UseValueConfig } config - Animation configuration for overall animation.
  */
 export declare const MountedBlock: ({ state, children, from, enter, exit, config, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/animation/modules/ScrollableBlock.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { UseAnimatedValueConfig } from '../useAnimatedValue';
+import { FluidValue } from '@raidipesh78/re-motion';
+import { type UseValueConfig } from '../hooks';
 interface ScrollableBlockProps {
     children?: (animation: {
-        value: any;
+        value: FluidValue;
     }) => React.ReactNode;
     direction?: 'single' | 'both';
     threshold?: number;
-    animationConfig?: UseAnimatedValueConfig;
+    animationConfig?: UseValueConfig;
 }
 /**
  * ScrollableBlock - Higher order component to handle the entrance or exit animation
@@ -15,7 +16,7 @@ interface ScrollableBlockProps {
  * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
  * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
  * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
- * @prop { UseAnimatedValueConfig } animationConfig - Animation config
+ * @prop { UseValueConfig } animationConfig - Animation config
  */
 export declare const ScrollableBlock: (props: ScrollableBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/animation/modules/TransitionBlock.d.ts

@@ -1,17 +1,18 @@
 import * as React from 'react';
-import { UseAnimatedValueConfig } from '../useAnimatedValue';
+import { FluidValue } from '@raidipesh78/re-motion';
+import { type UseValueConfig } from '../hooks';
 interface TransitionBlockProps {
     state: boolean;
     children: (animation: {
-        value: any;
+        value: FluidValue;
     }) => React.ReactNode;
-    config?: UseAnimatedValueConfig;
+    config?: UseValueConfig;
 }
 /**
  * TransitionBlock - Higher order component which animates on state change.
  * @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
  * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
- * @prop { UseAnimatedValueConfig } config - Animation configuration.
+ * @prop { UseValueConfig } config - Animation configuration.
  */
 export declare const TransitionBlock: ({ state, children, config, }: TransitionBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

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