aura-glass 1.0.0

package/dist/src/primitives/motion/presets.d.ts

@@ -0,0 +1,813 @@
+/**
+ * Animation presets for Motion component
+ * Predefined animation configurations for common use cases
+ */
+export declare const animationPresets: {
+    readonly fadeIn: {
+        readonly initial: {
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly fadeOut: {
+        readonly initial: {
+            readonly opacity: 1;
+        };
+        readonly animate: {
+            readonly opacity: 0;
+        };
+        readonly exit: {
+            readonly opacity: 1;
+        };
+        readonly duration: 300;
+        readonly easing: "ease-in";
+    };
+    readonly slideUp: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: 20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: 20;
+        };
+        readonly duration: 400;
+        readonly easing: "ease-out";
+    };
+    readonly slideDown: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: -20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: -20;
+        };
+        readonly duration: 400;
+        readonly easing: "ease-out";
+    };
+    readonly slideLeft: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly x: 20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly x: 20;
+        };
+        readonly duration: 400;
+        readonly easing: "ease-out";
+    };
+    readonly slideRight: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly x: -20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly x: -20;
+        };
+        readonly duration: 400;
+        readonly easing: "ease-out";
+    };
+    readonly scaleIn: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 0.9;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 0.9;
+        };
+        readonly duration: 300;
+        readonly easing: "spring";
+    };
+    readonly scaleOut: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 1.1;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 1.1;
+        };
+        readonly duration: 300;
+        readonly easing: "spring";
+    };
+    readonly rotateIn: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly rotate: -10;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly rotate: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly rotate: -10;
+        };
+        readonly duration: 400;
+        readonly easing: "spring";
+    };
+    readonly bounceIn: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 0.3;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+            readonly transition: {
+                readonly type: "spring";
+                readonly damping: 10;
+                readonly stiffness: 200;
+            };
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 0.3;
+        };
+        readonly duration: 600;
+    };
+    readonly pulseIn: {
+        readonly initial: {
+            readonly opacity: 0.5;
+            readonly scale: 1;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: readonly [1, 1.05, 1];
+            readonly transition: {
+                readonly duration: 0.5;
+                readonly repeat: number;
+                readonly repeatType: "reverse";
+            };
+        };
+        readonly exit: {
+            readonly opacity: 0.5;
+            readonly scale: 1;
+        };
+        readonly duration: 500;
+    };
+    readonly blur: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly filter: "blur(4px)";
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly filter: "blur(0px)";
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly filter: "blur(4px)";
+        };
+        readonly duration: 400;
+        readonly easing: "ease-out";
+    };
+    readonly dropIn: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: -100;
+            readonly scale: 0.9;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly scale: 1;
+            readonly transition: {
+                readonly type: "spring";
+                readonly damping: 15;
+                readonly stiffness: 150;
+            };
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: 100;
+            readonly scale: 0.9;
+        };
+        readonly duration: 500;
+    };
+    readonly flipIn: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly rotateY: -90;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly rotateY: 0;
+            readonly transition: {
+                readonly duration: 0.6;
+                readonly ease: "easeOut";
+            };
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly rotateY: 90;
+        };
+        readonly duration: 600;
+    };
+    readonly staggerChildren: {
+        readonly animate: {
+            readonly transition: {
+                readonly staggerChildren: 0.1;
+                readonly delayChildren: 0.2;
+            };
+        };
+    };
+    readonly listItem: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly x: -20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly x: 20;
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly modalOverlay: {
+        readonly initial: {
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+        };
+        readonly duration: 200;
+        readonly easing: "ease-out";
+    };
+    readonly modalContent: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+            readonly y: 20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+            readonly y: 20;
+        };
+        readonly duration: 300;
+        readonly easing: "spring";
+    };
+    readonly drawerLeft: {
+        readonly initial: {
+            readonly x: "-100%";
+        };
+        readonly animate: {
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly x: "-100%";
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly drawerRight: {
+        readonly initial: {
+            readonly x: "100%";
+        };
+        readonly animate: {
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly x: "100%";
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly drawerTop: {
+        readonly initial: {
+            readonly y: "-100%";
+        };
+        readonly animate: {
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly y: "-100%";
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly drawerBottom: {
+        readonly initial: {
+            readonly y: "100%";
+        };
+        readonly animate: {
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly y: "100%";
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly notificationSlide: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly x: 100;
+            readonly scale: 0.9;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly x: 0;
+            readonly scale: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly x: 100;
+            readonly scale: 0.9;
+        };
+        readonly duration: 400;
+        readonly easing: "spring";
+    };
+    readonly skeleton: {
+        readonly animate: {
+            readonly backgroundPosition: readonly ["200% 0", "-200% 0"];
+            readonly transition: {
+                readonly duration: 1.5;
+                readonly repeat: number;
+                readonly ease: "linear";
+            };
+        };
+    };
+};
+export type AnimationPresetName = keyof typeof animationPresets;
+/**
+ * Get animation preset configuration
+ */
+export declare const getAnimationPreset: (name: AnimationPresetName) => {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+    };
+    readonly duration: 300;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly opacity: 1;
+    };
+    readonly animate: {
+        readonly opacity: 0;
+    };
+    readonly exit: {
+        readonly opacity: 1;
+    };
+    readonly duration: 300;
+    readonly easing: "ease-in";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: 20;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly y: 20;
+    };
+    readonly duration: 400;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: -20;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly y: -20;
+    };
+    readonly duration: 400;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly x: 20;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly x: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly x: 20;
+    };
+    readonly duration: 400;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly x: -20;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly x: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly x: -20;
+    };
+    readonly duration: 400;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 0.9;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly scale: 0.9;
+    };
+    readonly duration: 300;
+    readonly easing: "spring";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 1.1;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly scale: 1.1;
+    };
+    readonly duration: 300;
+    readonly easing: "spring";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly rotate: -10;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly rotate: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly rotate: -10;
+    };
+    readonly duration: 400;
+    readonly easing: "spring";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 0.3;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+        readonly transition: {
+            readonly type: "spring";
+            readonly damping: 10;
+            readonly stiffness: 200;
+        };
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly scale: 0.3;
+    };
+    readonly duration: 600;
+} | {
+    readonly initial: {
+        readonly opacity: 0.5;
+        readonly scale: 1;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: readonly [1, 1.05, 1];
+        readonly transition: {
+            readonly duration: 0.5;
+            readonly repeat: number;
+            readonly repeatType: "reverse";
+        };
+    };
+    readonly exit: {
+        readonly opacity: 0.5;
+        readonly scale: 1;
+    };
+    readonly duration: 500;
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly filter: "blur(4px)";
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly filter: "blur(0px)";
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly filter: "blur(4px)";
+    };
+    readonly duration: 400;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: -100;
+        readonly scale: 0.9;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+        readonly scale: 1;
+        readonly transition: {
+            readonly type: "spring";
+            readonly damping: 15;
+            readonly stiffness: 150;
+        };
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly y: 100;
+        readonly scale: 0.9;
+    };
+    readonly duration: 500;
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly rotateY: -90;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly rotateY: 0;
+        readonly transition: {
+            readonly duration: 0.6;
+            readonly ease: "easeOut";
+        };
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly rotateY: 90;
+    };
+    readonly duration: 600;
+} | {
+    readonly animate: {
+        readonly transition: {
+            readonly staggerChildren: 0.1;
+            readonly delayChildren: 0.2;
+        };
+    };
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly x: -20;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly x: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly x: 20;
+    };
+    readonly duration: 300;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+    };
+    readonly duration: 200;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 0.95;
+        readonly y: 20;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly scale: 0.95;
+        readonly y: 20;
+    };
+    readonly duration: 300;
+    readonly easing: "spring";
+} | {
+    readonly initial: {
+        readonly x: "-100%";
+    };
+    readonly animate: {
+        readonly x: 0;
+    };
+    readonly exit: {
+        readonly x: "-100%";
+    };
+    readonly duration: 300;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly x: "100%";
+    };
+    readonly animate: {
+        readonly x: 0;
+    };
+    readonly exit: {
+        readonly x: "100%";
+    };
+    readonly duration: 300;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly y: "-100%";
+    };
+    readonly animate: {
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly y: "-100%";
+    };
+    readonly duration: 300;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly y: "100%";
+    };
+    readonly animate: {
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly y: "100%";
+    };
+    readonly duration: 300;
+    readonly easing: "ease-out";
+} | {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly x: 100;
+        readonly scale: 0.9;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly x: 0;
+        readonly scale: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly x: 100;
+        readonly scale: 0.9;
+    };
+    readonly duration: 400;
+    readonly easing: "spring";
+} | {
+    readonly animate: {
+        readonly backgroundPosition: readonly ["200% 0", "-200% 0"];
+        readonly transition: {
+            readonly duration: 1.5;
+            readonly repeat: number;
+            readonly ease: "linear";
+        };
+    };
+};
+/**
+ * Micro-interaction presets
+ */
+export declare const microInteractions: {
+    readonly hover: {
+        readonly scale: 1.02;
+        readonly transition: {
+            readonly duration: 0.2;
+            readonly ease: "easeOut";
+        };
+    };
+    readonly tap: {
+        readonly scale: 0.98;
+        readonly transition: {
+            readonly duration: 0.1;
+            readonly ease: "easeOut";
+        };
+    };
+    readonly focus: {
+        readonly scale: 1.01;
+        readonly boxShadow: "0 0 0 2px rgba(59, 130, 246, 0.5)";
+        readonly transition: {
+            readonly duration: 0.2;
+            readonly ease: "easeOut";
+        };
+    };
+};
+/**
+ * Page transition presets
+ */
+export declare const pageTransitions: {
+    readonly fade: {
+        readonly initial: {
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+        };
+        readonly transition: {
+            readonly duration: 0.3;
+        };
+    };
+    readonly slide: {
+        readonly initial: {
+            readonly x: "100%";
+        };
+        readonly animate: {
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly x: "-100%";
+        };
+        readonly transition: {
+            readonly duration: 0.3;
+            readonly ease: "easeInOut";
+        };
+    };
+    readonly scale: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 0.9;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 1.1;
+        };
+        readonly transition: {
+            readonly duration: 0.3;
+            readonly ease: "easeInOut";
+        };
+    };
+};
+//# sourceMappingURL=presets.d.ts.map