@zentauri-ui/zentauri-components 1.8.2 → 1.8.4

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,
+);

package/src/animations/press/types.ts

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

package/src/animations/progress/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Progress } from "./progress";
+export { progressPreset } from "./presets";
+export type { ProgressProps } from "./types";

package/src/animations/progress/presets.ts

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

package/src/animations/progress/progress.tsx

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

package/src/animations/progress/types.ts

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

package/src/animations/pulse/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Pulse } from "./pulse";
+export { pulsePreset } from "./presets";
+export type { PulseProps } from "./types";

package/src/animations/pulse/presets.ts

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const pulsePreset = {
+  initial: { opacity: 1, scale: 1 },
+  animate: { opacity: [1, 0.78, 1], scale: [1, 1.04, 1] },
+  exit: { opacity: 0, scale: 0.98 },
+  transition: { duration: 1.4, ease: "easeInOut", repeat: Infinity },
+} satisfies MotionAnimationPreset;

package/src/animations/pulse/pulse.tsx

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

package/src/animations/pulse/types.ts

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

package/src/animations/reorder/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Reorder } from "./reorder";
+export { reorderPreset } from "./presets";
+export type { ReorderProps } from "./types";

package/src/animations/reorder/presets.ts

@@ -0,0 +1,10 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const reorderPreset = {
+  initial: { opacity: 1, y: 0 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 8 },
+  layout: true,
+  whileHover: { y: -2 },
+  transition: { type: "spring", stiffness: 360, damping: 30 },
+} satisfies MotionAnimationPreset;

package/src/animations/reorder/reorder.tsx

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

package/src/animations/reorder/types.ts

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

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { RevealBlur } from "./reveal-blur";
+export { revealBlurPreset } from "./presets";
+export type { RevealBlurProps } from "./types";

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

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const revealBlurPreset = {
+  initial: { opacity: 0, y: 12, filter: "blur(16px)" },
+  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+  exit: { opacity: 0, y: 6, filter: "blur(10px)" },
+  transition: { duration: 0.42, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { RevealDown } from "./reveal-down";
+export { revealDownPreset } from "./presets";
+export type { RevealDownProps } from "./types";

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

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const revealDownPreset = {
+  initial: { opacity: 0, y: -18, scale: 0.98 },
+  animate: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, y: -8, scale: 0.99 },
+  transition: { duration: 0.38, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { RevealLeft } from "./reveal-left";
+export { revealLeftPreset } from "./presets";
+export type { RevealLeftProps } from "./types";

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

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const revealLeftPreset = {
+  initial: { opacity: 0, x: 18, scale: 0.98 },
+  animate: { opacity: 1, x: 0, scale: 1 },
+  exit: { opacity: 0, x: 8, scale: 0.99 },
+  transition: { duration: 0.38, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { RevealRight } from "./reveal-right";
+export { revealRightPreset } from "./presets";
+export type { RevealRightProps } from "./types";

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

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const revealRightPreset = {
+  initial: { opacity: 0, x: -18, scale: 0.98 },
+  animate: { opacity: 1, x: 0, scale: 1 },
+  exit: { opacity: 0, x: -8, scale: 0.99 },
+  transition: { duration: 0.38, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { RevealUp } from "./reveal-up";
+export { revealUpPreset } from "./presets";
+export type { RevealUpProps } from "./types";

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

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const revealUpPreset = {
+  initial: { opacity: 0, y: 18, scale: 0.98 },
+  animate: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, y: 8, scale: 0.99 },
+  transition: { duration: 0.38, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { RotateIn } from "./rotate-in";
+export { rotateInPreset } from "./presets";
+export type { RotateInProps } from "./types";

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

@@ -0,0 +1,8 @@
+import type { MotionAnimationPreset } from "../shared";
+
+export const rotateInPreset = {
+  initial: { opacity: 0, rotate: -8, scale: 0.96 },
+  animate: { opacity: 1, rotate: 0, scale: 1 },
+  exit: { opacity: 0, rotate: 4, scale: 0.98 },
+  transition: { duration: 0.38, ease: [0.16, 1, 0.3, 1] },
+} satisfies MotionAnimationPreset;

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { ScaleIn } from "./scale-in";
+export { scaleInPreset } from "./presets";
+export type { ScaleInProps } from "./types";

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { ScaleOut } from "./scale-out";
+export { scaleOutPreset } from "./presets";
+export type { ScaleOutProps } from "./types";

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

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

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

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