@pyreon/kinetic-presets 0.0.2

package/lib/index.js

@@ -0,0 +1,1162 @@
+//#region src/factories.ts
+const directionToTranslate = (direction, distance) => {
+	switch (direction) {
+		case "up": return `translateY(${distance}px)`;
+		case "down": return `translateY(${-distance}px)`;
+		case "left": return `translateX(${distance}px)`;
+		case "right": return `translateX(${-distance}px)`;
+	}
+};
+const directionToZero = (direction) => {
+	switch (direction) {
+		case "up":
+		case "down": return "translateY(0)";
+		case "left":
+		case "right": return "translateX(0)";
+	}
+};
+const createFade = ({ direction, distance = 16, duration = 300, leaveDuration = 200, easing = "ease-out", leaveEasing = "ease-in" } = {}) => {
+	if (!direction) return {
+		enterStyle: { opacity: 0 },
+		enterToStyle: { opacity: 1 },
+		enterTransition: `all ${duration}ms ${easing}`,
+		leaveStyle: { opacity: 1 },
+		leaveToStyle: { opacity: 0 },
+		leaveTransition: `all ${leaveDuration}ms ${leaveEasing}`
+	};
+	const translate = directionToTranslate(direction, distance);
+	const zero = directionToZero(direction);
+	return {
+		enterStyle: {
+			opacity: 0,
+			transform: translate
+		},
+		enterToStyle: {
+			opacity: 1,
+			transform: zero
+		},
+		enterTransition: `all ${duration}ms ${easing}`,
+		leaveStyle: {
+			opacity: 1,
+			transform: zero
+		},
+		leaveToStyle: {
+			opacity: 0,
+			transform: translate
+		},
+		leaveTransition: `all ${leaveDuration}ms ${leaveEasing}`
+	};
+};
+const createSlide = ({ direction = "up", distance = 16, duration = 300, leaveDuration = 200, easing = "ease-out", leaveEasing = "ease-in" } = {}) => {
+	const translate = directionToTranslate(direction, distance);
+	const zero = directionToZero(direction);
+	return {
+		enterStyle: {
+			opacity: 0,
+			transform: translate
+		},
+		enterToStyle: {
+			opacity: 1,
+			transform: zero
+		},
+		enterTransition: `all ${duration}ms ${easing}`,
+		leaveStyle: {
+			opacity: 1,
+			transform: zero
+		},
+		leaveToStyle: {
+			opacity: 0,
+			transform: translate
+		},
+		leaveTransition: `all ${leaveDuration}ms ${leaveEasing}`
+	};
+};
+const createScale = ({ from = .9, duration = 300, leaveDuration = 200, easing = "ease-out", leaveEasing = "ease-in" } = {}) => ({
+	enterStyle: {
+		opacity: 0,
+		transform: `scale(${from})`
+	},
+	enterToStyle: {
+		opacity: 1,
+		transform: "scale(1)"
+	},
+	enterTransition: `all ${duration}ms ${easing}`,
+	leaveStyle: {
+		opacity: 1,
+		transform: "scale(1)"
+	},
+	leaveToStyle: {
+		opacity: 0,
+		transform: `scale(${from})`
+	},
+	leaveTransition: `all ${leaveDuration}ms ${leaveEasing}`
+});
+const createRotate = ({ degrees = 15, duration = 300, leaveDuration = 200, easing = "ease-out", leaveEasing = "ease-in" } = {}) => ({
+	enterStyle: {
+		opacity: 0,
+		transform: `rotate(${-degrees}deg)`
+	},
+	enterToStyle: {
+		opacity: 1,
+		transform: "rotate(0)"
+	},
+	enterTransition: `all ${duration}ms ${easing}`,
+	leaveStyle: {
+		opacity: 1,
+		transform: "rotate(0)"
+	},
+	leaveToStyle: {
+		opacity: 0,
+		transform: `rotate(${degrees}deg)`
+	},
+	leaveTransition: `all ${leaveDuration}ms ${leaveEasing}`
+});
+const createBlur = ({ amount = 8, scale, duration = 300, leaveDuration = 200, easing = "ease-out", leaveEasing = "ease-in" } = {}) => {
+	const hidden = {
+		opacity: 0,
+		filter: `blur(${amount}px)`
+	};
+	const visible = {
+		opacity: 1,
+		filter: "blur(0px)"
+	};
+	if (scale !== void 0) {
+		hidden.transform = `scale(${scale})`;
+		visible.transform = "scale(1)";
+	}
+	return {
+		enterStyle: hidden,
+		enterToStyle: visible,
+		enterTransition: `all ${duration}ms ${easing}`,
+		leaveStyle: visible,
+		leaveToStyle: hidden,
+		leaveTransition: `all ${leaveDuration}ms ${leaveEasing}`
+	};
+};
+
+//#endregion
+//#region src/presets.ts
+const s = (hidden, visible, enterDuration = "300ms", leaveDuration = "200ms", enterEasing = "ease-out", leaveEasing = "ease-in") => ({
+	enterStyle: hidden,
+	enterToStyle: visible,
+	enterTransition: `all ${enterDuration} ${enterEasing}`,
+	leaveStyle: visible,
+	leaveToStyle: hidden,
+	leaveTransition: `all ${leaveDuration} ${leaveEasing}`
+});
+const SPRING = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+const BOUNCE = "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+const fade = s({ opacity: 0 }, { opacity: 1 });
+const fadeUp = s({
+	opacity: 0,
+	transform: "translateY(16px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+});
+const fadeDown = s({
+	opacity: 0,
+	transform: "translateY(-16px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+});
+const fadeLeft = s({
+	opacity: 0,
+	transform: "translateX(16px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+});
+const fadeRight = s({
+	opacity: 0,
+	transform: "translateX(-16px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+});
+const fadeUpBig = s({
+	opacity: 0,
+	transform: "translateY(48px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+});
+const fadeDownBig = s({
+	opacity: 0,
+	transform: "translateY(-48px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+});
+const fadeLeftBig = s({
+	opacity: 0,
+	transform: "translateX(48px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+});
+const fadeRightBig = s({
+	opacity: 0,
+	transform: "translateX(-48px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+});
+const fadeScale = s({
+	opacity: 0,
+	transform: "scale(0.95)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+});
+const fadeUpLeft = s({
+	opacity: 0,
+	transform: "translate(16px, 16px)"
+}, {
+	opacity: 1,
+	transform: "translate(0, 0)"
+});
+const fadeUpRight = s({
+	opacity: 0,
+	transform: "translate(-16px, 16px)"
+}, {
+	opacity: 1,
+	transform: "translate(0, 0)"
+});
+const fadeDownLeft = s({
+	opacity: 0,
+	transform: "translate(16px, -16px)"
+}, {
+	opacity: 1,
+	transform: "translate(0, 0)"
+});
+const fadeDownRight = s({
+	opacity: 0,
+	transform: "translate(-16px, -16px)"
+}, {
+	opacity: 1,
+	transform: "translate(0, 0)"
+});
+const slideUp = s({
+	opacity: 0,
+	transform: "translateY(16px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+});
+const slideDown = s({
+	opacity: 0,
+	transform: "translateY(-16px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+});
+const slideLeft = s({
+	opacity: 0,
+	transform: "translateX(16px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+});
+const slideRight = s({
+	opacity: 0,
+	transform: "translateX(-16px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+});
+const slideUpBig = s({
+	opacity: 0,
+	transform: "translateY(48px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+});
+const slideDownBig = s({
+	opacity: 0,
+	transform: "translateY(-48px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+});
+const slideLeftBig = s({
+	opacity: 0,
+	transform: "translateX(48px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+});
+const slideRightBig = s({
+	opacity: 0,
+	transform: "translateX(-48px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+});
+const scaleIn = s({
+	opacity: 0,
+	transform: "scale(0.9)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+});
+const scaleOut = s({
+	opacity: 0,
+	transform: "scale(1.1)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+});
+const scaleUp = s({
+	opacity: 0,
+	transform: "scale(0.5)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+});
+const scaleDown = s({
+	opacity: 0,
+	transform: "scale(1.5)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+});
+const scaleInUp = s({
+	opacity: 0,
+	transform: "scale(0.9) translateY(16px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateY(0)"
+});
+const scaleInDown = s({
+	opacity: 0,
+	transform: "scale(0.9) translateY(-16px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateY(0)"
+});
+const scaleInLeft = s({
+	opacity: 0,
+	transform: "scale(0.9) translateX(16px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateX(0)"
+});
+const scaleInRight = s({
+	opacity: 0,
+	transform: "scale(0.9) translateX(-16px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateX(0)"
+});
+const zoomIn = s({
+	opacity: 0,
+	transform: "scale(0)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+}, "400ms", "250ms");
+const zoomOut = s({
+	opacity: 0,
+	transform: "scale(2)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+}, "400ms", "250ms");
+const zoomInUp = s({
+	opacity: 0,
+	transform: "scale(0.5) translateY(48px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateY(0)"
+}, "400ms", "250ms");
+const zoomInDown = s({
+	opacity: 0,
+	transform: "scale(0.5) translateY(-48px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateY(0)"
+}, "400ms", "250ms");
+const zoomInLeft = s({
+	opacity: 0,
+	transform: "scale(0.5) translateX(48px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateX(0)"
+}, "400ms", "250ms");
+const zoomInRight = s({
+	opacity: 0,
+	transform: "scale(0.5) translateX(-48px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateX(0)"
+}, "400ms", "250ms");
+const zoomOutUp = s({
+	opacity: 0,
+	transform: "scale(2) translateY(48px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateY(0)"
+}, "400ms", "250ms");
+const zoomOutDown = s({
+	opacity: 0,
+	transform: "scale(2) translateY(-48px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateY(0)"
+}, "400ms", "250ms");
+const zoomOutLeft = s({
+	opacity: 0,
+	transform: "scale(2) translateX(48px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateX(0)"
+}, "400ms", "250ms");
+const zoomOutRight = s({
+	opacity: 0,
+	transform: "scale(2) translateX(-48px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateX(0)"
+}, "400ms", "250ms");
+const flipX = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateX(90deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateX(0)"
+}, "500ms", "300ms");
+const flipY = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateY(90deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateY(0)"
+}, "500ms", "300ms");
+const flipXReverse = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateX(-90deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateX(0)"
+}, "500ms", "300ms");
+const flipYReverse = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateY(-90deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateY(0)"
+}, "500ms", "300ms");
+const flipDiagonal = s({
+	opacity: 0,
+	transform: "perspective(600px) rotate3d(1, 1, 0, 90deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotate3d(1, 1, 0, 0deg)"
+}, "500ms", "300ms");
+const flipDiagonalReverse = s({
+	opacity: 0,
+	transform: "perspective(600px) rotate3d(1, -1, 0, 90deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotate3d(1, -1, 0, 0deg)"
+}, "500ms", "300ms");
+const rotateIn = s({
+	opacity: 0,
+	transform: "rotate(-15deg)"
+}, {
+	opacity: 1,
+	transform: "rotate(0)"
+});
+const rotateInReverse = s({
+	opacity: 0,
+	transform: "rotate(15deg)"
+}, {
+	opacity: 1,
+	transform: "rotate(0)"
+});
+const rotateInUp = s({
+	opacity: 0,
+	transform: "rotate(-5deg) translateY(16px)"
+}, {
+	opacity: 1,
+	transform: "rotate(0) translateY(0)"
+});
+const rotateInDown = s({
+	opacity: 0,
+	transform: "rotate(5deg) translateY(-16px)"
+}, {
+	opacity: 1,
+	transform: "rotate(0) translateY(0)"
+});
+const spinIn = s({
+	opacity: 0,
+	transform: "rotate(-180deg)"
+}, {
+	opacity: 1,
+	transform: "rotate(0)"
+}, "500ms", "300ms");
+const spinInReverse = s({
+	opacity: 0,
+	transform: "rotate(180deg)"
+}, {
+	opacity: 1,
+	transform: "rotate(0)"
+}, "500ms", "300ms");
+const scaleRotateIn = s({
+	opacity: 0,
+	transform: "scale(0) rotate(-180deg)"
+}, {
+	opacity: 1,
+	transform: "scale(1) rotate(0)"
+}, "500ms", "300ms");
+const newspaperIn = s({
+	opacity: 0,
+	transform: "scale(0) rotate(-720deg)"
+}, {
+	opacity: 1,
+	transform: "scale(1) rotate(0)"
+}, "700ms", "400ms");
+const bounceIn = s({
+	opacity: 0,
+	transform: "scale(0.5)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+}, "500ms", "200ms", BOUNCE);
+const bounceInUp = s({
+	opacity: 0,
+	transform: "translateY(40px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+}, "500ms", "200ms", BOUNCE);
+const bounceInDown = s({
+	opacity: 0,
+	transform: "translateY(-40px)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+}, "500ms", "200ms", BOUNCE);
+const bounceInLeft = s({
+	opacity: 0,
+	transform: "translateX(40px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+}, "500ms", "200ms", BOUNCE);
+const bounceInRight = s({
+	opacity: 0,
+	transform: "translateX(-40px)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+}, "500ms", "200ms", BOUNCE);
+const springIn = s({
+	opacity: 0,
+	transform: "scale(0.8)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+}, "400ms", "200ms", SPRING);
+const popIn = s({
+	opacity: 0,
+	transform: "scale(0.3)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+}, "300ms", "200ms", SPRING);
+const rubberIn = s({
+	opacity: 0,
+	transform: "scale(0.6)"
+}, {
+	opacity: 1,
+	transform: "scale(1)"
+}, "500ms", "250ms", "cubic-bezier(0.175, 0.885, 0.32, 1.275)");
+const squishX = s({
+	opacity: 0,
+	transform: "scaleX(1.4) scaleY(0.6)"
+}, {
+	opacity: 1,
+	transform: "scaleX(1) scaleY(1)"
+}, "400ms", "250ms", SPRING);
+const squishY = s({
+	opacity: 0,
+	transform: "scaleX(0.6) scaleY(1.4)"
+}, {
+	opacity: 1,
+	transform: "scaleX(1) scaleY(1)"
+}, "400ms", "250ms", SPRING);
+const blurIn = s({
+	opacity: 0,
+	filter: "blur(8px)"
+}, {
+	opacity: 1,
+	filter: "blur(0px)"
+});
+const blurInUp = s({
+	opacity: 0,
+	filter: "blur(8px)",
+	transform: "translateY(16px)"
+}, {
+	opacity: 1,
+	filter: "blur(0px)",
+	transform: "translateY(0)"
+});
+const blurInDown = s({
+	opacity: 0,
+	filter: "blur(8px)",
+	transform: "translateY(-16px)"
+}, {
+	opacity: 1,
+	filter: "blur(0px)",
+	transform: "translateY(0)"
+});
+const blurInLeft = s({
+	opacity: 0,
+	filter: "blur(8px)",
+	transform: "translateX(16px)"
+}, {
+	opacity: 1,
+	filter: "blur(0px)",
+	transform: "translateX(0)"
+});
+const blurInRight = s({
+	opacity: 0,
+	filter: "blur(8px)",
+	transform: "translateX(-16px)"
+}, {
+	opacity: 1,
+	filter: "blur(0px)",
+	transform: "translateX(0)"
+});
+const blurScale = s({
+	opacity: 0,
+	filter: "blur(8px)",
+	transform: "scale(0.95)"
+}, {
+	opacity: 1,
+	filter: "blur(0px)",
+	transform: "scale(1)"
+});
+const puffIn = s({
+	opacity: 0,
+	filter: "blur(4px)",
+	transform: "scale(1.5)"
+}, {
+	opacity: 1,
+	filter: "blur(0px)",
+	transform: "scale(1)"
+}, "400ms", "250ms");
+const puffOut = s({
+	opacity: 0,
+	filter: "blur(4px)",
+	transform: "scale(0.5)"
+}, {
+	opacity: 1,
+	filter: "blur(0px)",
+	transform: "scale(1)"
+}, "400ms", "250ms");
+const clipTop = s({ clipPath: "inset(0 0 100% 0)" }, { clipPath: "inset(0 0 0 0)" }, "400ms", "250ms");
+const clipBottom = s({ clipPath: "inset(100% 0 0 0)" }, { clipPath: "inset(0 0 0 0)" }, "400ms", "250ms");
+const clipLeft = s({ clipPath: "inset(0 100% 0 0)" }, { clipPath: "inset(0 0 0 0)" }, "400ms", "250ms");
+const clipRight = s({ clipPath: "inset(0 0 0 100%)" }, { clipPath: "inset(0 0 0 0)" }, "400ms", "250ms");
+const clipCircle = s({ clipPath: "circle(0% at 50% 50%)" }, { clipPath: "circle(75% at 50% 50%)" }, "500ms", "300ms");
+const clipCenter = s({ clipPath: "inset(50% 50% 50% 50%)" }, { clipPath: "inset(0 0 0 0)" }, "400ms", "250ms");
+const clipDiamond = s({ clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)" }, { clipPath: "polygon(50% -10%, 110% 50%, 50% 110%, -10% 50%)" }, "500ms", "300ms");
+const clipCorner = s({ clipPath: "polygon(0 0, 0 0, 0 0, 0 0)" }, { clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)" }, "500ms", "300ms");
+const perspectiveUp = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateX(15deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateX(0)"
+});
+const perspectiveDown = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateX(-15deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateX(0)"
+});
+const perspectiveLeft = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateY(-15deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateY(0)"
+});
+const perspectiveRight = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateY(15deg)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateY(0)"
+});
+const expandX = s({
+	opacity: 0,
+	transform: "scaleX(0)"
+}, {
+	opacity: 1,
+	transform: "scaleX(1)"
+});
+const expandY = s({
+	opacity: 0,
+	transform: "scaleY(0)"
+}, {
+	opacity: 1,
+	transform: "scaleY(1)"
+});
+const skewIn = s({
+	opacity: 0,
+	transform: "skewX(-5deg)"
+}, {
+	opacity: 1,
+	transform: "skewX(0)"
+});
+const skewInReverse = s({
+	opacity: 0,
+	transform: "skewX(5deg)"
+}, {
+	opacity: 1,
+	transform: "skewX(0)"
+});
+const skewInY = s({
+	opacity: 0,
+	transform: "skewY(-5deg)"
+}, {
+	opacity: 1,
+	transform: "skewY(0)"
+});
+const skewInYReverse = s({
+	opacity: 0,
+	transform: "skewY(5deg)"
+}, {
+	opacity: 1,
+	transform: "skewY(0)"
+});
+const drop = s({
+	opacity: 0,
+	transform: "translateY(-100%)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+}, "400ms", "250ms");
+const rise = s({
+	opacity: 0,
+	transform: "translateY(100%)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+}, "400ms", "250ms");
+const backInUp = s({
+	opacity: 0,
+	transform: "scale(0.7) translateY(80px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateY(0)"
+}, "400ms", "250ms");
+const backInDown = s({
+	opacity: 0,
+	transform: "scale(0.7) translateY(-80px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateY(0)"
+}, "400ms", "250ms");
+const backInLeft = s({
+	opacity: 0,
+	transform: "scale(0.7) translateX(80px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateX(0)"
+}, "400ms", "250ms");
+const backInRight = s({
+	opacity: 0,
+	transform: "scale(0.7) translateX(-80px)"
+}, {
+	opacity: 1,
+	transform: "scale(1) translateX(0)"
+}, "400ms", "250ms");
+const lightSpeedInLeft = s({
+	opacity: 0,
+	transform: "translateX(100%) skewX(-30deg)"
+}, {
+	opacity: 1,
+	transform: "translateX(0) skewX(0)"
+}, "400ms", "250ms");
+const lightSpeedInRight = s({
+	opacity: 0,
+	transform: "translateX(-100%) skewX(30deg)"
+}, {
+	opacity: 1,
+	transform: "translateX(0) skewX(0)"
+}, "400ms", "250ms");
+const rollInLeft = s({
+	opacity: 0,
+	transform: "translateX(-100%) rotate(-120deg)"
+}, {
+	opacity: 1,
+	transform: "translateX(0) rotate(0)"
+}, "500ms", "300ms");
+const rollInRight = s({
+	opacity: 0,
+	transform: "translateX(100%) rotate(120deg)"
+}, {
+	opacity: 1,
+	transform: "translateX(0) rotate(0)"
+}, "500ms", "300ms");
+const swingInTop = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateX(-90deg)",
+	transformOrigin: "top"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateX(0)",
+	transformOrigin: "top"
+}, "500ms", "300ms");
+const swingInBottom = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateX(90deg)",
+	transformOrigin: "bottom"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateX(0)",
+	transformOrigin: "bottom"
+}, "500ms", "300ms");
+const swingInLeft = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateY(90deg)",
+	transformOrigin: "left"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateY(0)",
+	transformOrigin: "left"
+}, "500ms", "300ms");
+const swingInRight = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateY(-90deg)",
+	transformOrigin: "right"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateY(0)",
+	transformOrigin: "right"
+}, "500ms", "300ms");
+const slitHorizontal = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateY(90deg) scaleX(0)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateY(0) scaleX(1)"
+}, "500ms", "300ms");
+const slitVertical = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateX(90deg) scaleY(0)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateX(0) scaleY(1)"
+}, "500ms", "300ms");
+const swirlIn = s({
+	opacity: 0,
+	transform: "rotate(-540deg) scale(0)"
+}, {
+	opacity: 1,
+	transform: "rotate(0) scale(1)"
+}, "600ms", "400ms");
+const swirlInReverse = s({
+	opacity: 0,
+	transform: "rotate(540deg) scale(0)"
+}, {
+	opacity: 1,
+	transform: "rotate(0) scale(1)"
+}, "600ms", "400ms");
+const flyInUp = s({
+	opacity: 0,
+	transform: "translateY(100vh)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+}, "500ms", "300ms");
+const flyInDown = s({
+	opacity: 0,
+	transform: "translateY(-100vh)"
+}, {
+	opacity: 1,
+	transform: "translateY(0)"
+}, "500ms", "300ms");
+const flyInLeft = s({
+	opacity: 0,
+	transform: "translateX(100vw)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+}, "500ms", "300ms");
+const flyInRight = s({
+	opacity: 0,
+	transform: "translateX(-100vw)"
+}, {
+	opacity: 1,
+	transform: "translateX(0)"
+}, "500ms", "300ms");
+const floatUp = s({
+	opacity: 0,
+	transform: "translateY(32px) scale(0.97)"
+}, {
+	opacity: 1,
+	transform: "translateY(0) scale(1)"
+}, "500ms", "300ms", "cubic-bezier(0.23, 1, 0.32, 1)");
+const floatDown = s({
+	opacity: 0,
+	transform: "translateY(-32px) scale(0.97)"
+}, {
+	opacity: 1,
+	transform: "translateY(0) scale(1)"
+}, "500ms", "300ms", "cubic-bezier(0.23, 1, 0.32, 1)");
+const floatLeft = s({
+	opacity: 0,
+	transform: "translateX(32px) scale(0.97)"
+}, {
+	opacity: 1,
+	transform: "translateX(0) scale(1)"
+}, "500ms", "300ms", "cubic-bezier(0.23, 1, 0.32, 1)");
+const floatRight = s({
+	opacity: 0,
+	transform: "translateX(-32px) scale(0.97)"
+}, {
+	opacity: 1,
+	transform: "translateX(0) scale(1)"
+}, "500ms", "300ms", "cubic-bezier(0.23, 1, 0.32, 1)");
+const pushInLeft = s({
+	opacity: 0,
+	transform: "translateX(-48px) scale(0.9)"
+}, {
+	opacity: 1,
+	transform: "translateX(0) scale(1)"
+});
+const pushInRight = s({
+	opacity: 0,
+	transform: "translateX(48px) scale(0.9)"
+}, {
+	opacity: 1,
+	transform: "translateX(0) scale(1)"
+});
+const tiltInUp = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateX(15deg) translateY(24px)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateX(0) translateY(0)"
+});
+const tiltInDown = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateX(-15deg) translateY(-24px)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateX(0) translateY(0)"
+});
+const tiltInLeft = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateY(-15deg) translateX(24px)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateY(0) translateX(0)"
+});
+const tiltInRight = s({
+	opacity: 0,
+	transform: "perspective(600px) rotateY(15deg) translateX(-24px)"
+}, {
+	opacity: 1,
+	transform: "perspective(600px) rotateY(0) translateX(0)"
+});
+const presets = {
+	fade,
+	fadeUp,
+	fadeDown,
+	fadeLeft,
+	fadeRight,
+	fadeUpBig,
+	fadeDownBig,
+	fadeLeftBig,
+	fadeRightBig,
+	fadeScale,
+	fadeUpLeft,
+	fadeUpRight,
+	fadeDownLeft,
+	fadeDownRight,
+	slideUp,
+	slideDown,
+	slideLeft,
+	slideRight,
+	slideUpBig,
+	slideDownBig,
+	slideLeftBig,
+	slideRightBig,
+	scaleIn,
+	scaleOut,
+	scaleUp,
+	scaleDown,
+	scaleInUp,
+	scaleInDown,
+	scaleInLeft,
+	scaleInRight,
+	zoomIn,
+	zoomOut,
+	zoomInUp,
+	zoomInDown,
+	zoomInLeft,
+	zoomInRight,
+	zoomOutUp,
+	zoomOutDown,
+	zoomOutLeft,
+	zoomOutRight,
+	flipX,
+	flipY,
+	flipXReverse,
+	flipYReverse,
+	flipDiagonal,
+	flipDiagonalReverse,
+	rotateIn,
+	rotateInReverse,
+	rotateInUp,
+	rotateInDown,
+	spinIn,
+	spinInReverse,
+	scaleRotateIn,
+	newspaperIn,
+	bounceIn,
+	bounceInUp,
+	bounceInDown,
+	bounceInLeft,
+	bounceInRight,
+	springIn,
+	popIn,
+	rubberIn,
+	squishX,
+	squishY,
+	blurIn,
+	blurInUp,
+	blurInDown,
+	blurInLeft,
+	blurInRight,
+	blurScale,
+	puffIn,
+	puffOut,
+	clipTop,
+	clipBottom,
+	clipLeft,
+	clipRight,
+	clipCircle,
+	clipCenter,
+	clipDiamond,
+	clipCorner,
+	perspectiveUp,
+	perspectiveDown,
+	perspectiveLeft,
+	perspectiveRight,
+	expandX,
+	expandY,
+	skewIn,
+	skewInReverse,
+	skewInY,
+	skewInYReverse,
+	drop,
+	rise,
+	backInUp,
+	backInDown,
+	backInLeft,
+	backInRight,
+	lightSpeedInLeft,
+	lightSpeedInRight,
+	rollInLeft,
+	rollInRight,
+	swingInTop,
+	swingInBottom,
+	swingInLeft,
+	swingInRight,
+	slitHorizontal,
+	slitVertical,
+	swirlIn,
+	swirlInReverse,
+	flyInUp,
+	flyInDown,
+	flyInLeft,
+	flyInRight,
+	floatUp,
+	floatDown,
+	floatLeft,
+	floatRight,
+	pushInLeft,
+	pushInRight,
+	tiltInUp,
+	tiltInDown,
+	tiltInLeft,
+	tiltInRight
+};
+
+//#endregion
+//#region src/utils.ts
+const mergeStyle = (a, b) => b ? {
+	...a,
+	...b
+} : a;
+const concatClass = (a, b) => b ? a ? `${a} ${b}` : b : a;
+const mergeStyles = (result, p) => {
+	result.enterStyle = mergeStyle(result.enterStyle, p.enterStyle);
+	result.enterToStyle = mergeStyle(result.enterToStyle, p.enterToStyle);
+	result.leaveStyle = mergeStyle(result.leaveStyle, p.leaveStyle);
+	result.leaveToStyle = mergeStyle(result.leaveToStyle, p.leaveToStyle);
+	if (p.enterTransition) result.enterTransition = p.enterTransition;
+	if (p.leaveTransition) result.leaveTransition = p.leaveTransition;
+};
+const mergeClasses = (result, p) => {
+	result.enter = concatClass(result.enter, p.enter);
+	result.enterFrom = concatClass(result.enterFrom, p.enterFrom);
+	result.enterTo = concatClass(result.enterTo, p.enterTo);
+	result.leave = concatClass(result.leave, p.leave);
+	result.leaveFrom = concatClass(result.leaveFrom, p.leaveFrom);
+	result.leaveTo = concatClass(result.leaveTo, p.leaveTo);
+};
+const compose = (...items) => {
+	const result = {};
+	for (const p of items) {
+		mergeStyles(result, p);
+		mergeClasses(result, p);
+	}
+	return result;
+};
+const withDuration = (preset, enterMs, leaveMs) => ({
+	...preset,
+	enterTransition: replaceDuration(preset.enterTransition ?? "", `${enterMs}ms`),
+	leaveTransition: replaceDuration(preset.leaveTransition ?? "", `${leaveMs ?? enterMs}ms`)
+});
+const withEasing = (preset, enterEasing, leaveEasing) => ({
+	...preset,
+	enterTransition: replaceEasing(preset.enterTransition ?? "", enterEasing),
+	leaveTransition: replaceEasing(preset.leaveTransition ?? "", leaveEasing ?? enterEasing)
+});
+const withDelay = (preset, enterDelayMs, leaveDelayMs) => ({
+	...preset,
+	enterTransition: addDelay(preset.enterTransition ?? "", `${enterDelayMs}ms`),
+	leaveTransition: addDelay(preset.leaveTransition ?? "", `${leaveDelayMs ?? enterDelayMs}ms`)
+});
+const reverse = (preset) => ({
+	enterStyle: preset.leaveStyle,
+	enterToStyle: preset.leaveToStyle,
+	enterTransition: preset.leaveTransition,
+	leaveStyle: preset.enterStyle,
+	leaveToStyle: preset.enterToStyle,
+	leaveTransition: preset.enterTransition,
+	enter: preset.leave,
+	enterFrom: preset.leaveFrom,
+	enterTo: preset.leaveTo,
+	leave: preset.enter,
+	leaveFrom: preset.enterFrom,
+	leaveTo: preset.enterTo
+});
+const replaceDuration = (transition, newDuration) => transition.replace(/\d{1,10}(?:ms|s)/, newDuration);
+const replaceEasing = (transition, newEasing) => transition.replace(/(?:ease-in-out|ease-in|ease-out|ease|linear|cubic-bezier\([^)]{1,100}\))\s*$/, newEasing);
+const addDelay = (transition, delay) => transition.replace(/(\d{1,10}(?:ms|s))(\s)/, `$1 ${delay}$2`);
+
+//#endregion
+export { backInDown, backInLeft, backInRight, backInUp, blurIn, blurInDown, blurInLeft, blurInRight, blurInUp, blurScale, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, clipBottom, clipCenter, clipCircle, clipCorner, clipDiamond, clipLeft, clipRight, clipTop, compose, createBlur, createFade, createRotate, createScale, createSlide, drop, expandX, expandY, fade, fadeDown, fadeDownBig, fadeDownLeft, fadeDownRight, fadeLeft, fadeLeftBig, fadeRight, fadeRightBig, fadeScale, fadeUp, fadeUpBig, fadeUpLeft, fadeUpRight, flipDiagonal, flipDiagonalReverse, flipX, flipXReverse, flipY, flipYReverse, floatDown, floatLeft, floatRight, floatUp, flyInDown, flyInLeft, flyInRight, flyInUp, lightSpeedInLeft, lightSpeedInRight, newspaperIn, perspectiveDown, perspectiveLeft, perspectiveRight, perspectiveUp, popIn, presets, puffIn, puffOut, pushInLeft, pushInRight, reverse, rise, rollInLeft, rollInRight, rotateIn, rotateInDown, rotateInReverse, rotateInUp, rubberIn, scaleDown, scaleIn, scaleInDown, scaleInLeft, scaleInRight, scaleInUp, scaleOut, scaleRotateIn, scaleUp, skewIn, skewInReverse, skewInY, skewInYReverse, slideDown, slideDownBig, slideLeft, slideLeftBig, slideRight, slideRightBig, slideUp, slideUpBig, slitHorizontal, slitVertical, spinIn, spinInReverse, springIn, squishX, squishY, swingInBottom, swingInLeft, swingInRight, swingInTop, swirlIn, swirlInReverse, tiltInDown, tiltInLeft, tiltInRight, tiltInUp, withDelay, withDuration, withEasing, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp };
+//# sourceMappingURL=index.js.map