react-ui-animate 3.0.0-rc.3 → 3.0.0

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "react-ui-animate",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0",
   "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": "^3.0.7"
+  },
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
     "@types/jest": "^29.5.12",

package/dist/animation/core/controllers/Animation.d.ts

@@ -1,16 +0,0 @@
-import type { ResultType } from '../types/animation';
-/**
- * Base Animation class
- */
-export declare class Animation {
-    _active: boolean;
-    _onEnd: any;
-    /**
-     * it is necessary to add _onRest function as well
-     * because _onEnd is always re-assigned with onUpdate callback
-     * so that _onRest function is not fired, so we have to duplicate it
-     */
-    _onRest?: any;
-    _debounceOnEnd(result: ResultType): void;
-    stop(): void;
-}

package/dist/animation/core/controllers/FluidValue.d.ts

@@ -1,32 +0,0 @@
-import type { Length, ResultType, SubscribeFn, FluidValueConfig, OnUpdateFn, AssignValue } from '../types/animation';
-import type { Fn } from '../types/common';
-/**
- * Represents a fluid value that can animate between states.
- */
-export declare class FluidValue {
-    _subscribe: SubscribeFn;
-    _value: Length;
-    _config?: FluidValueConfig;
-    _currentValue: {
-        current: Length;
-    };
-    _subscriptions: Map<{
-        uuid: number;
-        property: string;
-    }, OnUpdateFn>;
-    get: () => Length;
-    /**
-     * Creates a new FluidValue instance.
-     * @param initialValue - The initial value of the fluid value.
-     * @param config - Optional configuration for the fluid value.
-     */
-    constructor(initialValue: Length, config?: FluidValueConfig);
-    /**
-     * Animates from the current value to the updated value.
-     * Determines whether to perform a multi-stage or single-stage transition.
-     * @param updatedValue - The value to animate to, or a function that defines a multi-stage transition.
-     * @param config - Optional configuration for the animation.
-     * @param callback - Optional callback to be called after the animation ends.
-     */
-    setValue(updatedValue: AssignValue, callback?: Fn<ResultType, void>): void;
-}

package/dist/animation/core/controllers/RequestAnimationFrame.d.ts

@@ -1,8 +0,0 @@
-export declare const RequestAnimationFrame: {
-    current: (cb: any) => number;
-    inject(injected: any): void;
-};
-export declare const CancelAnimationFrame: {
-    current: (id: any) => void;
-    inject(injected: any): void;
-};

package/dist/animation/core/controllers/SpringAnimation.d.ts

@@ -1,41 +0,0 @@
-import { Animation } from './Animation';
-import type { FluidValueConfig, ResultType } from '../types/animation';
-/**
- * Class implementing spring based animation
- */
-export declare class SpringAnimation extends Animation {
-    _overshootClamping: boolean;
-    _restDisplacementThreshold: number;
-    _restSpeedThreshold: number;
-    _initialVelocity?: number;
-    _lastVelocity: number;
-    _startPosition: number;
-    _lastPosition: number;
-    _position: number;
-    _fromValue: number;
-    _toValue: any;
-    _mass: number;
-    _tension: number;
-    _friction: number;
-    _lastTime: number;
-    _onFrame: (value: number) => void;
-    _animationFrame: any;
-    _timeout: any;
-    _delay: number;
-    _onRest?: (value: ResultType) => void;
-    _onChange?: (value: number) => void;
-    constructor({ initialPosition, config, }: {
-        initialPosition: number;
-        config?: Omit<FluidValueConfig, 'duration' | 'easing'>;
-    });
-    onChange(value: number): void;
-    onUpdate(): void;
-    stop(): void;
-    set(toValue: number): void;
-    start({ toValue, onFrame, previousAnimation, onEnd, }: {
-        toValue: number;
-        onFrame: (value: number) => void;
-        previousAnimation?: SpringAnimation;
-        onEnd?: (result: ResultType) => void;
-    }): void;
-}

package/dist/animation/core/controllers/TimingAnimation.d.ts

@@ -1,35 +0,0 @@
-import { Animation } from './Animation';
-import type { FluidValueConfig, ResultType } from '../types/animation';
-/**
- * Class implementing timing based animation
- */
-export declare class TimingAnimation extends Animation {
-    _startTime: number;
-    _fromValue: number;
-    _toValue: any;
-    _duration: number;
-    _easing: (value: number) => number;
-    _onFrame: (value: number) => void;
-    _animationFrame: any;
-    _timeout: any;
-    _lastPosition: number;
-    _position: number;
-    _delay: number;
-    _tempDuration: number;
-    _onRest?: (value: ResultType) => void;
-    _onChange?: (value: number) => void;
-    constructor({ initialPosition, config, }: {
-        initialPosition: number;
-        config?: Omit<FluidValueConfig, 'mass' | 'friction' | 'tension'>;
-    });
-    onChange(value: number): void;
-    onUpdate(): void;
-    stop(): void;
-    set(toValue: number): void;
-    start({ toValue, onFrame, previousAnimation, onEnd, }: {
-        toValue: number;
-        onFrame: (value: number) => void;
-        previousAnimation?: TimingAnimation;
-        onEnd?: (result: ResultType) => void;
-    }): void;
-}

package/dist/animation/core/easing/Bezier.d.ts

@@ -1,8 +0,0 @@
-/**
- * https://github.com/gre/bezier-easing
- * BezierEasing - use bezier curve for transition easing function
- * by Gaëtan Renaudeau 2014 - 2015 – MIT License
- */
-declare function LinearEasing(x: number): number;
-declare function bezier(mX1: number, mY1: number, mX2: number, mY2: number): typeof LinearEasing;
-export { bezier };

package/dist/animation/core/easing/Easing.d.ts

@@ -1,40 +0,0 @@
-/**
- * This class implements common easing functions. The math is pretty obscure,
- * but this cool website has nice visual illustrations of what they represent:
- * http://xaedes.de/dev/transitions/
- */
-export declare class Easing {
-    static step0(n: number): 0 | 1;
-    static step1(n: number): 0 | 1;
-    static linear(t: number): number;
-    static ease(t: number): number;
-    static quad(t: number): number;
-    static cubic(t: number): number;
-    static poly(n: number): (t: number) => number;
-    static sin(t: number): number;
-    static circle(t: number): number;
-    static exp(t: number): number;
-    /**
-     * A simple elastic interaction, similar to a spring.  Default bounciness
-     * is 1, which overshoots a little bit once.  0 bounciness doesn't overshoot
-     * at all, and bounciness of N > 1 will overshoot about N times.
-     *
-     * Wolfram Plots:
-     *
-     *   http://tiny.cc/elastic_b_1 (default bounciness = 1)
-     *   http://tiny.cc/elastic_b_3 (bounciness = 3)
-     */
-    static elastic(bounciness?: number): (t: number) => number;
-    static back(s: number): (t: number) => number;
-    static bounce(t: number): number;
-    static bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
-    static in(easing: (t: number) => number): (t: number) => number;
-    /**
-     * Runs an easing function backwards.
-     */
-    static out(easing: (t: number) => number): (t: number) => number;
-    /**
-     * Makes any easing function symmetrical.
-     */
-    static inOut(easing: (t: number) => number): (t: number) => number;
-}

package/dist/animation/core/helpers/camelCaseToKebabCase.d.ts

@@ -1,8 +0,0 @@
-/**
- * Converts a camelCase string to kebab-case.
- * e.g. backgroundColor -> background-color
- *
- * @param str - The camelCase string to convert.
- * @returns The converted kebab-case string.
- */
-export declare function camelCaseToKebabCase(str: string): string;

package/dist/animation/core/helpers/getCleanProps.d.ts

@@ -1,10 +0,0 @@
-/**
- * Filters out properties with fluid values from a given props object.
- * This function removes any properties that are considered fluid values,
- * typically those that subscribe to updates and therefore should not be
- * included in a static props object.
- *
- * @param props - The original props object, which may include fluid values.
- * @returns A new props object with fluid values removed.
- */
-export declare const getCleanProps: ({ style, ...props }: any) => any;

package/dist/animation/core/helpers/getCssValue.d.ts

@@ -1,8 +0,0 @@
-/**
- * getCssValue() function to get css value with unit or without unit
- * it is only for style property - it cannot be used with transform keys
- * @param property - style property
- * @param value - style value
- * @returns - value with unit or without unit
- */
-export declare function getCssValue(property: string, value: number | string): string | number;

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

@@ -1,5 +0,0 @@
-export * from './getCleanProps';
-export * from './getCssValue';
-export * from './isDefined';
-export * from './isFluidValue';
-export * from './camelCaseToKebabCase';

package/dist/animation/core/helpers/isDefined.d.ts

@@ -1,12 +0,0 @@
-/**
- * Checks if a value is defined (not null or undefined).
- *
- * This utility function helps in determining whether a given value is neither `null` nor `undefined`.
- * It can be useful for validation checks to ensure that a value is properly defined before proceeding
- * with further operations.
- *
- * @param {T} value - The value to check.
- * @returns {boolean} - Returns `true` if the value is neither `null` nor `undefined`, otherwise returns `false`.
- *
- */
-export declare const isDefined: <T>(value: T) => value is NonNullable<T>;

package/dist/animation/core/helpers/isFluidValue.d.ts

@@ -1,10 +0,0 @@
-import { FluidValue } from '../controllers/FluidValue';
-/**
- * Checks if the given value is of type FluidValue.
- * A value is considered a FluidValue if it is defined,
- * an object, and contains the '_subscribe' property.
- *
- * @param value - The value to check.
- * @returns - True if the value is a FluidValue, false otherwise.
- */
-export declare const isFluidValue: (value: unknown) => value is FluidValue;

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

@@ -1,11 +0,0 @@
-export { fluid } from './react/fluid';
-export { makeFluid } from './react/makeFluid';
-export { useFluidValue } from './react/useFluidValue';
-export { useMount } from './react/useMount';
-export { isFluidValue } from './helpers/isFluidValue';
-export { Easing } from './easing/Easing';
-export { interpolate } from './interpolation/Interpolation';
-export { FluidValue } from './controllers/FluidValue';
-export type { FluidValueConfig, Length } from './types/animation';
-export type { UseMountConfig } from './react/useMount';
-export type { ExtrapolateConfig } from './interpolation/Interpolation';

package/dist/animation/core/interpolation/Colors.d.ts

@@ -1,25 +0,0 @@
-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/core/interpolation/Interpolation.d.ts

@@ -1,80 +0,0 @@
-import { FluidValue } from '../controllers/FluidValue';
-type ExtrapolateType = 'identity' | 'extend' | 'clamp';
-export declare const _getTemplateString: (str: string) => string;
-/**
- * Function returns if the template of two strings are matched
- * i.e. they can be interpolated
- * @param str1 - first string
- * @param str2 - second string
- * @returns boolean indicating two strings matched or not
- */
-export declare const stringMatched: (str1: string, str2: string) => boolean;
-/**
- * Function which proccess the
- * hexadecimal colors to its proper formats
- * @param str - string
- * @returns hex color string
- */
-export declare const getProcessedColor: (str: string) => string;
-export interface ExtrapolateConfig {
-    extrapolate?: ExtrapolateType;
-    extrapolateRight?: ExtrapolateType;
-    extrapolateLeft?: ExtrapolateType;
-}
-/**
- * interpolateNumbers to interpolate the numeric value
- * @param value - number
- * @param inputRange
- * @param outputRange
- * @param extrapolateConfig
- * @returns - number | string
- */
-export declare function interpolateNumbers(value: number, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig): any;
-/**
- * interpolateTransitionValue to interpolating TransitionValue type value
- * @param value
- * @param inputRange
- * @param outputRange
- * @param extrapolateConfig
- * @returns TransitionValue
- */
-export declare const interpolateTransitionValue: (value: FluidValue, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig) => {
-    isInterpolation: boolean;
-    interpolationConfig: {
-        inputRange: number[];
-        outputRange: (string | number)[];
-        extrapolateConfig: ExtrapolateConfig | undefined;
-    };
-    _subscribe: import("../types/animation").SubscribeFn;
-    _value: import("../types/animation").Length;
-    _config?: import("..").FluidValueConfig;
-    _currentValue: {
-        current: import("../types/animation").Length;
-    };
-    _subscriptions: Map<{
-        uuid: number;
-        property: string;
-    }, import("../types/animation").OnUpdateFn>;
-    get: () => import("../types/animation").Length;
-};
-/**
- * interpolate function to interpolate both transition
- * as well as numerical value
- * @param value
- * @param inputRange
- * @param outputRange
- * @param extrapolateConfig
- */
-export declare const interpolate: (value: number | FluidValue, inputRange: Array<number>, outputRange: Array<number | string>, extrapolateConfig?: ExtrapolateConfig) => any;
-/**
- * Determines if two values can be interpolated.
- * This function checks if two values, either numbers or strings,
- * can be interpolated by ensuring they are of the same type and, in the case of strings,
- * that they are compatible for interpolation based on processed color values.
- *
- * @param previousValue - The previous value to compare. Can be a number or a string.
- * @param newValue - The new value to compare. Can be a number or a string.
- * @returns True if interpolation is possible, false otherwise.
- */
-export declare function canInterpolate(previousValue: number | string, newValue: number | string): boolean;
-export {};

package/dist/animation/core/interpolation/__tests__/Colors.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/animation/core/react/fluid.d.ts

@@ -1,6 +0,0 @@
-import type { FluidProps } from '../types/fluid';
-type WithFluid = {
-    [k in keyof JSX.IntrinsicElements]: React.ComponentType<FluidProps<HTMLElement>>;
-};
-export declare const fluid: WithFluid;
-export {};

package/dist/animation/core/react/makeFluid.d.ts

@@ -1,30 +0,0 @@
-import type { WrappedComponentOrTag } from '../types/fluid';
-/**
- * Higher-order component to make any component animatable.
- *
- * This function takes a React component or an HTML tag and returns a new component
- * that can smoothly transition between states using fluid animations. It enhances
- * the user experience by adding dynamic and engaging animations to the wrapped component.
- *
- * @param WrapperComponent - The React component or HTML tag to be wrapped with animation functionality.
- * @returns - A new component with added animation capabilities.
- *
- * The returned component uses fluid animations to smoothly transition between different
- * states. It supports both style and prop animations, handling transforms and other
- * properties seamlessly. The component ensures that animations are efficiently applied
- * and updated based on the current state and configuration of fluid values.
- *
- * @example
- * const AnimatedDiv = makeFluid('div');
- *
- * const MyComponent = () => {
- *  const opacity = useAnimatedValue(1)
- *  return (
- *   <AnimatedDiv style={{ opacity: opacity.value }}>
- *     Hello, world!
- *   </AnimatedDiv>
- * )};
- */
-export declare function makeFluid<C extends WrappedComponentOrTag>(WrapperComponent: C): import("react").ForwardRefExoticComponent<Omit<import("../types/fluid").FluidHTMLAttributes<C> & import("../types/fluid").FluidSVGAttributes<C>, "style"> & {
-    style?: import("../types/fluid").FluidCSSProperties;
-} & import("react").RefAttributes<unknown>>;

package/dist/animation/core/react/transforms.d.ts

@@ -1,6 +0,0 @@
-export declare const styleTrasformKeys: readonly ["translate", "translateX", "translateY", "translateZ", "scale", "scaleX", "scaleY", "scaleZ", "rotate", "rotateX", "rotateY", "rotateZ", "skew", "skewX", "skewY"];
-/**
- * getTransform function returns transform string from style object
- */
-export declare function getTransform(style: Record<string, any>): string;
-export declare function isTransformKey(key: string): boolean;

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

@@ -1,9 +0,0 @@
-import { FluidValue } from '../controllers/FluidValue';
-import type { FluidValueConfig, Length, OnUpdateFn } from '../types/animation';
-/**
- * useFluidValue
- *
- * @param value - initial value
- * @param config - the config object for `FluidValue`
- */
-export declare const useFluidValue: (value: Length, config?: FluidValueConfig) => [FluidValue, OnUpdateFn];

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

@@ -1,20 +0,0 @@
-import { FluidValue } from '../controllers/FluidValue';
-import type { FluidValueConfig } from '../types/animation';
-export interface UseMountConfig {
-    from: number;
-    enter: number;
-    exit: number;
-    enterConfig?: FluidValueConfig;
-    exitConfig?: FluidValueConfig;
-    config?: FluidValueConfig;
-}
-/**
- * `useMount`
- *
- * applies mounting and unmounting of a component according to state change
- * applying transitions
- *
- * @param state - boolean indicating mount state of a component
- * @param config - the config object `UseMountConfig`
- */
-export declare const useMount: (state: boolean, config: UseMountConfig) => (callback: (animation: FluidValue, mounted: boolean) => React.ReactNode) => import("react").ReactNode;

package/dist/animation/lib/getInitialConfig.d.ts

@@ -1,4 +0,0 @@
-import { FluidValueConfig } from '../core';
-type InitialConfigType = 'linear' | 'easein' | 'easeout' | 'easeinout' | 'ease' | 'power1' | 'power2' | 'power3' | 'power4' | 'elastic' | 'stiff' | 'wooble' | 'bounce';
-export declare const getInitialConfig: (animationType?: InitialConfigType) => FluidValueConfig;
-export {};

package/dist/utils/index.d.ts

@@ -1 +0,0 @@
-export * from './delay';