@m4l/graphics 0.0.0

package/dist/lib/components/animate/variants/fade.d.ts

@@ -0,0 +1,217 @@
+import { VariantsType } from '../type';
+export declare const varFade: (props?: VariantsType | undefined) => {
+    in: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+            transition: (props?: import("../type").TranEnterType | undefined) => {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            opacity: number;
+            transition: (props?: import("../type").TranExitType | undefined) => {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inUp: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inDown: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inLeft: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inRight: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    out: {
+        initial: {
+            opacity: number;
+        };
+        animate: {
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outUp: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outDown: {
+        initial: {
+            y: number;
+            opacity: number;
+        };
+        animate: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outLeft: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outRight: {
+        initial: {
+            x: number;
+            opacity: number;
+        };
+        animate: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+};

package/dist/lib/components/animate/variants/flip.d.ts

@@ -0,0 +1,75 @@
+import { VariantsType } from '../type';
+export declare const varFlip: (props?: VariantsType | undefined) => {
+    inX: {
+        initial: {
+            rotateX: number;
+            opacity: number;
+        };
+        animate: {
+            rotateX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            rotateX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inY: {
+        initial: {
+            rotateY: number;
+            opacity: number;
+        };
+        animate: {
+            rotateY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            rotateY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outX: {
+        initial: {
+            rotateX: number;
+            opacity: number;
+        };
+        animate: {
+            rotateX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outY: {
+        initial: {
+            rotateY: number;
+            opacity: number;
+        };
+        animate: {
+            rotateY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+};

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

@@ -0,0 +1,12 @@
+export * from './path';
+export * from './fade';
+export * from './zoom';
+export * from './flip';
+export * from './slide';
+export * from './scale';
+export * from './bounce';
+export * from './rotate';
+export * from './actions';
+export * from './container';
+export * from './transition';
+export * from './background';

package/dist/lib/components/animate/variants/path.d.ts

@@ -0,0 +1,14 @@
+export declare const TRANSITION: {
+    duration: number;
+    ease: number[];
+};
+export declare const varPath: {
+    animate: {
+        fillOpacity: number[];
+        pathLength: number[];
+        transition: {
+            duration: number;
+            ease: number[];
+        };
+    };
+};

package/dist/lib/components/animate/variants/rotate.d.ts

@@ -0,0 +1,39 @@
+import { VariantsType } from '../type';
+export declare const varRotate: (props?: VariantsType | undefined) => {
+    in: {
+        initial: {
+            opacity: number;
+            rotate: number;
+        };
+        animate: {
+            opacity: number;
+            rotate: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            opacity: number;
+            rotate: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    out: {
+        initial: {
+            opacity: number;
+            rotate: number;
+        };
+        animate: {
+            opacity: number;
+            rotate: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+};

package/dist/lib/components/animate/variants/scale.d.ts

@@ -0,0 +1,75 @@
+import { VariantsType } from '../type';
+export declare const varScale: (props?: VariantsType | undefined) => {
+    inX: {
+        initial: {
+            scaleX: number;
+            opacity: number;
+        };
+        animate: {
+            scaleX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            scaleX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inY: {
+        initial: {
+            scaleY: number;
+            opacity: number;
+        };
+        animate: {
+            scaleY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            scaleY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outX: {
+        initial: {
+            scaleX: number;
+            opacity: number;
+        };
+        animate: {
+            scaleX: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outY: {
+        initial: {
+            scaleY: number;
+            opacity: number;
+        };
+        animate: {
+            scaleY: number;
+            opacity: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+};

package/dist/lib/components/animate/variants/slide.d.ts

@@ -0,0 +1,155 @@
+import { VariantsType } from '../type';
+export declare const varSlide: (props?: VariantsType | undefined) => {
+    inUp: {
+        initial: {
+            y: number;
+        };
+        animate: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inDown: {
+        initial: {
+            y: number;
+        };
+        animate: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inLeft: {
+        initial: {
+            x: number;
+        };
+        animate: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    inRight: {
+        initial: {
+            x: number;
+        };
+        animate: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outUp: {
+        initial: {
+            y: number;
+        };
+        animate: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outDown: {
+        initial: {
+            y: number;
+        };
+        animate: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            y: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outLeft: {
+        initial: {
+            x: number;
+        };
+        animate: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+    outRight: {
+        initial: {
+            x: number;
+        };
+        animate: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+        exit: {
+            x: number;
+            transition: {
+                duration: number;
+                ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            };
+        };
+    };
+};

package/dist/lib/components/animate/variants/transition.d.ts

@@ -0,0 +1,13 @@
+import { TranHoverType, TranEnterType, TranExitType } from '../type';
+export declare const varTranHover: (props?: TranHoverType | undefined) => {
+    duration: number;
+    ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+};
+export declare const varTranEnter: (props?: TranEnterType | undefined) => {
+    duration: number;
+    ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+};
+export declare const varTranExit: (props?: TranExitType | undefined) => {
+    duration: number;
+    ease: number[] | "easeIn" | "linear" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+};