@zentauri-ui/zentauri-components 1.8.3 → 1.8.4

package/src/animations/blur-out/blur-out.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { blurOutPreset } from "./presets";
+
+export const BlurOut = createMotionAnimation(
+  "BlurOut",
+  "animation-blur-out",
+  blurOutPreset,
+);

package/src/animations/blur-out/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { BlurOut } from "./blur-out";
+export { blurOutPreset } from "./presets";
+export type { BlurOutProps } from "./types";

package/src/animations/blur-out/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const blurOutPreset = {
+  initial: { opacity: 1, filter: "blur(0px)" },
+  animate: { opacity: 0, filter: "blur(12px)" },
+  exit: { opacity: 0, filter: "blur(12px)" },
+  transition: { duration: 0.75, ease: "easeInOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/blur-out/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type BlurOutProps = MotionAnimationProps;

package/src/animations/bounce/bounce.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { bouncePreset } from "./presets";
+
+export const Bounce = createMotionAnimation(
+  "Bounce",
+  "animation-bounce",
+  bouncePreset,
+);

package/src/animations/bounce/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Bounce } from "./bounce";
+export { bouncePreset } from "./presets";
+export type { BounceProps } from "./types";

package/src/animations/bounce/presets.ts

@@ -0,0 +1,13 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const bouncePreset = {
+  initial: { y: 0 },
+  animate: { y: [0, -14, 0, -7, 0] },
+  exit: { opacity: 0, y: 8 },
+  transition: {
+    duration: 0.85,
+    ease: "easeOut",
+    repeat: Infinity,
+    repeatDelay: 0.8,
+  },
+} satisfies MotionAnimationPreset;

package/src/animations/bounce/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type BounceProps = MotionAnimationProps;

package/src/animations/fade-down/fade-down.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { fadeDownPreset } from "./presets";
+
+export const FadeDown = createMotionAnimation(
+  "FadeDown",
+  "animation-fade-down",
+  fadeDownPreset,
+);

package/src/animations/fade-down/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { FadeDown } from "./fade-down";
+export { fadeDownPreset } from "./presets";
+export type { FadeDownProps } from "./types";

package/src/animations/fade-down/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const fadeDownPreset = {
+  initial: { opacity: 0, y: -16 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -8 },
+  transition: { duration: 0.32, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/fade-down/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type FadeDownProps = MotionAnimationProps;

package/src/animations/fade-in/fade-in.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { fadeInPreset } from "./presets";
+
+export const FadeIn = createMotionAnimation(
+  "FadeIn",
+  "animation-fade-in",
+  fadeInPreset,
+);

package/src/animations/fade-in/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { FadeIn } from "./fade-in";
+export { fadeInPreset } from "./presets";
+export type { FadeInProps } from "./types";

package/src/animations/fade-in/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const fadeInPreset = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.28, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/fade-in/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type FadeInProps = MotionAnimationProps;

package/src/animations/fade-left/fade-left.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { fadeLeftPreset } from "./presets";
+
+export const FadeLeft = createMotionAnimation(
+  "FadeLeft",
+  "animation-fade-left",
+  fadeLeftPreset,
+);

package/src/animations/fade-left/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { FadeLeft } from "./fade-left";
+export { fadeLeftPreset } from "./presets";
+export type { FadeLeftProps } from "./types";

package/src/animations/fade-left/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const fadeLeftPreset = {
+  initial: { opacity: 0, x: 16 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: 8 },
+  transition: { duration: 0.32, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/fade-left/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type FadeLeftProps = MotionAnimationProps;

package/src/animations/fade-out/fade-out.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { fadeOutPreset } from "./presets";
+
+export const FadeOut = createMotionAnimation(
+  "FadeOut",
+  "animation-fade-out",
+  fadeOutPreset,
+);

package/src/animations/fade-out/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { FadeOut } from "./fade-out";
+export { fadeOutPreset } from "./presets";
+export type { FadeOutProps } from "./types";

package/src/animations/fade-out/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const fadeOutPreset = {
+  initial: { opacity: 1 },
+  animate: { opacity: 0 },
+  exit: { opacity: 0 },
+  transition: { duration: 1, ease: "easeIn" },
+} satisfies MotionAnimationPreset;

package/src/animations/fade-out/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type FadeOutProps = MotionAnimationProps;

package/src/animations/fade-right/fade-right.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { fadeRightPreset } from "./presets";
+
+export const FadeRight = createMotionAnimation(
+  "FadeRight",
+  "animation-fade-right",
+  fadeRightPreset,
+);

package/src/animations/fade-right/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { FadeRight } from "./fade-right";
+export { fadeRightPreset } from "./presets";
+export type { FadeRightProps } from "./types";

package/src/animations/fade-right/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const fadeRightPreset = {
+  initial: { opacity: 0, x: -16 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -8 },
+  transition: { duration: 0.32, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/fade-right/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type FadeRightProps = MotionAnimationProps;

package/src/animations/fade-up/fade-up.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { fadeUpPreset } from "./presets";
+
+export const FadeUp = createMotionAnimation(
+  "FadeUp",
+  "animation-fade-up",
+  fadeUpPreset,
+);

package/src/animations/fade-up/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { FadeUp } from "./fade-up";
+export { fadeUpPreset } from "./presets";
+export type { FadeUpProps } from "./types";

package/src/animations/fade-up/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const fadeUpPreset = {
+  initial: { opacity: 0, y: 16 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 8 },
+  transition: { duration: 0.32, ease: "easeOut" },
+} satisfies MotionAnimationPreset;

package/src/animations/fade-up/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type FadeUpProps = MotionAnimationProps;

package/src/animations/flip/flip.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { flipPreset } from "./presets";
+
+export const Flip = createMotionAnimation("Flip", "animation-flip", flipPreset);

package/src/animations/flip/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Flip } from "./flip";
+export { flipPreset } from "./presets";
+export type { FlipProps } from "./types";

package/src/animations/flip/presets.ts

@@ -0,0 +1,13 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const flipPreset = {
+  initial: { rotateY: 0, transformPerspective: 900 },
+  animate: { rotateY: [0, 180, 360], transformPerspective: 900 },
+  exit: { opacity: 0, rotateY: 90, transformPerspective: 900 },
+  transition: {
+    duration: 1.4,
+    ease: "easeInOut",
+    repeat: Infinity,
+    repeatDelay: 0.6,
+  },
+} satisfies MotionAnimationPreset;

package/src/animations/flip/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type FlipProps = MotionAnimationProps;

package/src/animations/flip-in/flip-in.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { flipInPreset } from "./presets";
+
+export const FlipIn = createMotionAnimation(
+  "FlipIn",
+  "animation-flip-in",
+  flipInPreset,
+);

package/src/animations/flip-in/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { FlipIn } from "./flip-in";
+export { flipInPreset } from "./presets";
+export type { FlipInProps } from "./types";

package/src/animations/flip-in/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const flipInPreset = {
+  initial: { opacity: 0, rotateY: -90, transformPerspective: 900 },
+  animate: { opacity: 1, rotateY: 0, transformPerspective: 900 },
+  exit: { opacity: 0, rotateY: 70, transformPerspective: 900 },
+  transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

package/src/animations/flip-in/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type FlipInProps = MotionAnimationProps;

package/src/animations/float/float.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { floatPreset } from "./presets";
+
+export const Float = createMotionAnimation(
+  "Float",
+  "animation-float",
+  floatPreset,
+);

package/src/animations/float/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Float } from "./float";
+export { floatPreset } from "./presets";
+export type { FloatProps } from "./types";

package/src/animations/float/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const floatPreset = {
+  initial: { y: 0 },
+  animate: { y: [0, -10, 0] },
+  exit: { opacity: 0, y: 8 },
+  transition: { duration: 3, ease: "easeInOut", repeat: Infinity },
+} satisfies MotionAnimationPreset;

package/src/animations/float/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type FloatProps = MotionAnimationProps;

package/src/animations/hover-lift/hover-lift.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { hoverLiftPreset } from "./presets";
+
+export const HoverLift = createMotionAnimation(
+  "HoverLift",
+  "animation-hover-lift",
+  hoverLiftPreset,
+);

package/src/animations/hover-lift/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { HoverLift } from "./hover-lift";
+export { hoverLiftPreset } from "./presets";
+export type { HoverLiftProps } from "./types";

package/src/animations/hover-lift/presets.ts

@@ -0,0 +1,10 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const hoverLiftPreset = {
+  initial: { y: 0, scale: 1 },
+  animate: { y: 0, scale: 1 },
+  exit: { opacity: 0, y: 6, scale: 0.98 },
+  whileHover: { y: -8, scale: 1.02 },
+  whileTap: { y: -2, scale: 0.99 },
+  transition: { type: "spring", stiffness: 320, damping: 22 },
+} satisfies MotionAnimationPreset;

package/src/animations/hover-lift/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type HoverLiftProps = MotionAnimationProps;

package/src/animations/hover-scale/hover-scale.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { hoverScalePreset } from "./presets";
+
+export const HoverScale = createMotionAnimation(
+  "HoverScale",
+  "animation-hover-scale",
+  hoverScalePreset,
+);

package/src/animations/hover-scale/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { HoverScale } from "./hover-scale";
+export { hoverScalePreset } from "./presets";
+export type { HoverScaleProps } from "./types";

package/src/animations/hover-scale/presets.ts

@@ -0,0 +1,10 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const hoverScalePreset = {
+  initial: { scale: 1 },
+  animate: { scale: 1 },
+  exit: { opacity: 0, scale: 0.96 },
+  whileHover: { scale: 1.06 },
+  whileTap: { scale: 0.98 },
+  transition: { type: "spring", stiffness: 340, damping: 20 },
+} satisfies MotionAnimationPreset;

package/src/animations/hover-scale/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type HoverScaleProps = MotionAnimationProps;

package/src/animations/magnetic/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Magnetic } from "./magnetic";
+export { magneticPreset } from "./presets";
+export type { MagneticProps } from "./types";

package/src/animations/magnetic/magnetic.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { magneticPreset } from "./presets";
+
+export const Magnetic = createMotionAnimation(
+  "Magnetic",
+  "animation-magnetic",
+  magneticPreset,
+);

package/src/animations/magnetic/presets.ts

@@ -0,0 +1,10 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const magneticPreset = {
+  initial: { x: 0, y: 0, scale: 1 },
+  animate: { x: 0, y: 0, scale: 1 },
+  exit: { opacity: 0, scale: 0.98 },
+  whileHover: { x: 8, y: -6, scale: 1.04 },
+  whileTap: { x: 2, y: 0, scale: 0.98 },
+  transition: { type: "spring", stiffness: 260, damping: 18 },
+} satisfies MotionAnimationPreset;

package/src/animations/magnetic/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type MagneticProps = MotionAnimationProps;

package/src/animations/parallax/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Parallax } from "./parallax";
+export { parallaxPreset } from "./presets";
+export type { ParallaxProps } from "./types";

package/src/animations/parallax/parallax.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { parallaxPreset } from "./presets";
+
+export const Parallax = createMotionAnimation(
+  "Parallax",
+  "animation-parallax",
+  parallaxPreset,
+);

package/src/animations/parallax/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const parallaxPreset = {
+  initial: { opacity: 1, y: 18 },
+  animate: { opacity: 1, y: [18, -18, 18] },
+  exit: { opacity: 0, y: 10 },
+  transition: { duration: 5, ease: "easeInOut", repeat: Infinity },
+} satisfies MotionAnimationPreset;

package/src/animations/parallax/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type ParallaxProps = MotionAnimationProps;

package/src/animations/ping/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Ping } from "./ping";
+export { pingPreset } from "./presets";
+export type { PingProps } from "./types";

package/src/animations/ping/ping.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { pingPreset } from "./presets";
+
+export const Ping = createMotionAnimation("Ping", "animation-ping", pingPreset);

package/src/animations/ping/presets.ts

@@ -0,0 +1,13 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const pingPreset = {
+  initial: { opacity: 0.7, scale: 1 },
+  animate: { opacity: [0.7, 0.28, 0.7], scale: [1, 1.28, 1] },
+  exit: { opacity: 0, scale: 1.08 },
+  transition: {
+    duration: 1.45,
+    ease: "easeOut",
+    repeat: Infinity,
+    repeatDelay: 0.35,
+  },
+} satisfies MotionAnimationPreset;

package/src/animations/ping/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type PingProps = MotionAnimationProps;

package/src/animations/pop-in/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { PopIn } from "./pop-in";
+export { popInPreset } from "./presets";
+export type { PopInProps } from "./types";

package/src/animations/pop-in/pop-in.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { popInPreset } from "./presets";
+
+export const PopIn = createMotionAnimation(
+  "PopIn",
+  "animation-pop-in",
+  popInPreset,
+);

package/src/animations/pop-in/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const popInPreset = {
+  initial: { opacity: 0, scale: 0.9 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.94 },
+  transition: { duration: 0.34, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

package/src/animations/pop-in/types.ts

@@ -0,0 +1,3 @@
+import type { MotionAnimationProps } from "../shared";
+
+export type PopInProps = MotionAnimationProps;

package/src/animations/press/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Press } from "./press";
+export { pressPreset } from "./presets";
+export type { PressProps } from "./types";

package/src/animations/press/presets.ts

@@ -0,0 +1,9 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const pressPreset = {
+  initial: { y: 0, scale: 1 },
+  animate: { y: 0, scale: 1 },
+  exit: { opacity: 0, scale: 0.98 },
+  whileTap: { y: 1, scale: 0.96 },
+  transition: { type: "spring", stiffness: 420, damping: 24 },
+} satisfies MotionAnimationPreset;

package/src/animations/press/press.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { createMotionAnimation } from "../shared";
+
+import { pressPreset } from "./presets";
+
+export const Press = createMotionAnimation(
+  "Press",
+  "animation-press",
+  pressPreset,
+);