@zydon/common 2.0.13 → 2.0.15

package/dist/components/animate/index.d.ts

@@ -0,0 +1,1136 @@
+import * as react from 'react';
+import * as framer_motion from 'framer-motion';
+import { MotionProps, Easing } from 'framer-motion';
+export { m } from 'framer-motion';
+import { BoxProps } from '@mui/material/Box';
+
+type MotionContainerProps = BoxProps & MotionProps & {
+    animate?: boolean;
+    action?: boolean;
+};
+declare const MotionContainer: react.ForwardRefExoticComponent<Omit<MotionContainerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+type MotionViewportProps = BoxProps & MotionProps & {
+    disableAnimate?: boolean;
+};
+declare const MotionViewport: react.ForwardRefExoticComponent<Omit<MotionViewportProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const varHover: (hover?: number, tap?: number) => {
+    hover: {
+        scale: number;
+    };
+    tap: {
+        scale: number;
+    };
+};
+
+type VariantsType = {
+    distance?: number;
+    durationIn?: number;
+    durationOut?: number;
+    easeIn?: Easing;
+    easeOut?: Easing;
+};
+type TranHoverType = {
+    duration?: number;
+    ease?: Easing;
+};
+type TranEnterType = {
+    durationIn?: number;
+    easeIn?: Easing;
+};
+type TranExitType = {
+    durationOut?: number;
+    easeOut?: Easing;
+};
+type BackgroundType = {
+    colors?: string[];
+    duration?: number;
+    ease?: Easing;
+};
+
+declare const varBgColor: (props?: BackgroundType) => {
+    animate: {
+        background: string[];
+        transition: {
+            duration: number;
+            ease: framer_motion.Easing;
+        };
+    };
+};
+declare const varBgKenburns: (props?: BackgroundType) => {
+    top: {
+        animate: {
+            scale: number[];
+            y: number[];
+            transformOrigin: string[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    bottom: {
+        animate: {
+            scale: number[];
+            y: number[];
+            transformOrigin: string[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    left: {
+        animate: {
+            scale: number[];
+            x: number[];
+            y: number[];
+            transformOrigin: string[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    right: {
+        animate: {
+            scale: number[];
+            x: number[];
+            y: number[];
+            transformOrigin: string[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+};
+declare const varBgPan: (props?: BackgroundType) => {
+    top: {
+        animate: {
+            backgroundImage: string[];
+            backgroundPosition: string[];
+            backgroundSize: string[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    right: {
+        animate: {
+            backgroundPosition: string[];
+            backgroundImage: string[];
+            backgroundSize: string[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    bottom: {
+        animate: {
+            backgroundImage: string[];
+            backgroundPosition: string[];
+            backgroundSize: string[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    left: {
+        animate: {
+            backgroundPosition: string[];
+            backgroundImage: string[];
+            backgroundSize: string[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+};
+
+declare const varBounce: (props?: VariantsType) => {
+    in: {
+        initial: {};
+        animate: {
+            scale: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            scale: number[];
+            opacity: number[];
+        };
+    };
+    inUp: {
+        initial: {};
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inDown: {
+        initial: {};
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inLeft: {
+        initial: {};
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inRight: {
+        initial: {};
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    out: {
+        animate: {
+            scale: number[];
+            opacity: number[];
+        };
+    };
+    outUp: {
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+        };
+    };
+    outDown: {
+        animate: {
+            y: number[];
+            scaleY: number[];
+            opacity: number[];
+        };
+    };
+    outLeft: {
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+        };
+    };
+    outRight: {
+        animate: {
+            x: number[];
+            scaleX: number[];
+            opacity: number[];
+        };
+    };
+};
+
+type Props = {
+    staggerIn?: number;
+    delayIn?: number;
+    staggerOut?: number;
+};
+declare const varContainer: (props?: Props) => {
+    animate: {
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+    exit: {
+        transition: {
+            staggerChildren: number;
+            staggerDirection: number;
+        };
+    };
+};
+
+declare const varFade: (props?: VariantsType) => {
+    in: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+            transition: (props?: TranEnterType | undefined) => {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            opacity: number;
+            transition: (props?: TranExitType | undefined) => {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inUp: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inDown: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inLeft: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inRight: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    out: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outUp: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outDown: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outLeft: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outRight: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+};
+
+declare const varFlip: (props?: VariantsType) => {
+    inX: {
+        initial: {
+            rotateX: number;
+            opacity: number;
+        };
+        animate: {
+            rotateX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            rotateX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inY: {
+        initial: {
+            rotateY: number;
+            opacity: number;
+        };
+        animate: {
+            rotateY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            rotateY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outX: {
+        initial: {
+            rotateX: number;
+            opacity: number;
+        };
+        animate: {
+            rotateX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outY: {
+        initial: {
+            rotateY: number;
+            opacity: number;
+        };
+        animate: {
+            rotateY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+};
+
+declare const TRANSITION: {
+    duration: number;
+    ease: number[];
+};
+declare const varPath: {
+    animate: {
+        fillOpacity: number[];
+        pathLength: number[];
+        transition: {
+            duration: number;
+            ease: number[];
+        };
+    };
+};
+
+declare const varRotate: (props?: VariantsType) => {
+    in: {
+        initial: {
+            opacity: number;
+            rotate: number;
+        };
+        animate: {
+            opacity: number;
+            rotate: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            opacity: number;
+            rotate: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    out: {
+        initial: {
+            opacity: number;
+            rotate: number;
+        };
+        animate: {
+            opacity: number;
+            rotate: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+};
+
+declare const varScale: (props?: VariantsType) => {
+    in: {
+        initial: {
+            scale: number;
+            opacity: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            scale: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inX: {
+        initial: {
+            scaleX: number;
+            opacity: number;
+        };
+        animate: {
+            scaleX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            scaleX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inY: {
+        initial: {
+            scaleY: number;
+            opacity: number;
+        };
+        animate: {
+            scaleY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            scaleY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    out: {
+        initial: {
+            scale: number;
+            opacity: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outX: {
+        initial: {
+            scaleX: number;
+            opacity: number;
+        };
+        animate: {
+            scaleX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outY: {
+        initial: {
+            scaleY: number;
+            opacity: number;
+        };
+        animate: {
+            scaleY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+};
+
+declare const varSlide: (props?: VariantsType) => {
+    inUp: {
+        initial: {
+            y: number;
+        };
+        animate: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inDown: {
+        initial: {
+            y: number;
+        };
+        animate: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inLeft: {
+        initial: {
+            x: number;
+        };
+        animate: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inRight: {
+        initial: {
+            x: number;
+        };
+        animate: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outUp: {
+        initial: {
+            y: number;
+        };
+        animate: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outDown: {
+        initial: {
+            y: number;
+        };
+        animate: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outLeft: {
+        initial: {
+            x: number;
+        };
+        animate: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outRight: {
+        initial: {
+            x: number;
+        };
+        animate: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+};
+
+declare const varTranHover: (props?: TranHoverType) => {
+    duration: number;
+    ease: framer_motion.Easing;
+};
+declare const varTranEnter: (props?: TranEnterType) => {
+    duration: number;
+    ease: framer_motion.Easing;
+};
+declare const varTranExit: (props?: TranExitType) => {
+    duration: number;
+    ease: framer_motion.Easing;
+};
+
+declare const varZoom: (props?: VariantsType) => {
+    in: {
+        initial: {
+            scale: number;
+            opacity: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            scale: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inUp: {
+        initial: {
+            scale: number;
+            opacity: number;
+            translateY: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            translateY: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            scale: number;
+            opacity: number;
+            translateY: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inDown: {
+        initial: {
+            scale: number;
+            opacity: number;
+            translateY: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            translateY: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            scale: number;
+            opacity: number;
+            translateY: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inLeft: {
+        initial: {
+            scale: number;
+            opacity: number;
+            translateX: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            translateX: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            scale: number;
+            opacity: number;
+            translateX: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    inRight: {
+        initial: {
+            scale: number;
+            opacity: number;
+            translateX: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            translateX: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+        exit: {
+            scale: number;
+            opacity: number;
+            translateX: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    out: {
+        initial: {
+            scale: number;
+            opacity: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outUp: {
+        initial: {
+            scale: number;
+            opacity: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            translateY: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outDown: {
+        initial: {
+            scale: number;
+            opacity: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            translateY: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outLeft: {
+        initial: {
+            scale: number;
+            opacity: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            translateX: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+    outRight: {
+        initial: {
+            scale: number;
+            opacity: number;
+        };
+        animate: {
+            scale: number;
+            opacity: number;
+            translateX: number;
+            transition: {
+                duration: number;
+                ease: framer_motion.Easing;
+            };
+        };
+    };
+};
+
+export { MotionContainer, MotionContainerProps, MotionViewport, MotionViewportProps, Props, TRANSITION, varBgColor, varBgKenburns, varBgPan, varBounce, varContainer, varFade, varFlip, varHover, varPath, varRotate, varScale, varSlide, varTranEnter, varTranExit, varTranHover, varZoom };