@zentauri-ui/zentauri-components 1.8.2 → 1.8.4

package/dist/ui/tree-view/variants.d.ts

@@ -1,9 +1,9 @@
 export declare const treeViewVariants: (props?: ({
-    appearance?: "default" | "outline" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
+    appearance?: "outline" | "default" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
     size?: "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const treeViewItemVariants: (props?: ({
-    appearance?: "default" | "outline" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
+    appearance?: "outline" | "default" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
     size?: "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/dist/ui/typography/variants.d.ts

@@ -2,13 +2,13 @@ export declare const typographyToneVariants: (props?: ({
     tone?: "default" | "muted" | "gradient-cyan-violet" | "gradient-cyan-blue" | "secondary" | "destructive" | "error" | "success" | "warning" | "info" | "primary" | "accent" | "gradient-pink-violet" | "gradient-cyan-green" | "gradient-cyan-orange" | "gradient-cyan-red" | "gradient-cyan-purple" | "gradient-cyan-pink" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const headingLevelVariants: (props?: ({
-    level?: 1 | 2 | 4 | 6 | 5 | 3 | null | undefined;
+    level?: 1 | 4 | 3 | 6 | 2 | 5 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const textSizeVariants: (props?: ({
     size?: "base" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const unorderedListMarkerVariants: (props?: ({
-    marker?: "none" | "circle" | "disc" | null | undefined;
+    marker?: "circle" | "none" | "disc" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const orderedListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "license": "MIT",
   "files": [
     "dist",
     "src/ui",
+    "src/animations",
     "src/design-system",
     "src/charts",
     "src/lib",
@@ -21,6 +22,11 @@
     "access": "public"
   },
   "exports": {
+    "./design-system/tokens": {
+      "types": "./dist/design-system/tokens.d.ts",
+      "import": "./dist/design-system/tokens.mjs",
+      "require": "./dist/design-system/tokens.js"
+    },
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",
       "import": "./dist/ui/*.mjs",
@@ -36,6 +42,11 @@
       "import": "./dist/charts/*.mjs",
       "require": "./dist/charts/*.js"
     },
+    "./animations/*": {
+      "types": "./dist/animations/*/index.d.ts",
+      "import": "./dist/animations/*.mjs",
+      "require": "./dist/animations/*.js"
+    },
     "./hooks/utils": {
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/hooks/utils.mjs",
@@ -53,7 +64,8 @@
     "build:types": "tsc -p tsconfig.emit-types.json",
     "build": "npm run build:js && npm run build:types",
     "generate:registry": "node scripts/generate-registry.mjs",
-    "prepack": "npm run build && node scripts/generate-registry.mjs",
+    "check:exports": "node scripts/check-exports.mjs",
+    "prepack": "npm run build && node scripts/generate-registry.mjs && node scripts/check-exports.mjs",
     "test": "vitest run",
     "test:watch": "vitest"
   },

package/src/animations/animations.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { BlurIn } from "./blur-in";
+import { BlurOut } from "./blur-out";
+import { Bounce } from "./bounce";
+import { FadeDown } from "./fade-down";
+import { FadeIn } from "./fade-in";
+import { FadeLeft } from "./fade-left";
+import { FadeOut } from "./fade-out";
+import { FadeRight } from "./fade-right";
+import { FadeUp } from "./fade-up";
+import { Flip } from "./flip";
+import { FlipIn } from "./flip-in";
+import { Float } from "./float";
+import { HoverLift } from "./hover-lift";
+import { HoverScale } from "./hover-scale";
+import { Magnetic } from "./magnetic";
+import { Parallax } from "./parallax";
+import { Ping } from "./ping";
+import { PopIn } from "./pop-in";
+import { Press } from "./press";
+import { Progress } from "./progress";
+import { Pulse } from "./pulse";
+import { Reorder } from "./reorder";
+import { RevealBlur } from "./reveal-blur";
+import { RevealDown } from "./reveal-down";
+import { RevealLeft } from "./reveal-left";
+import { RevealRight } from "./reveal-right";
+import { RevealUp } from "./reveal-up";
+import { RotateIn } from "./rotate-in";
+import { ScaleIn } from "./scale-in";
+import { ScaleOut } from "./scale-out";
+import { Shake } from "./shake";
+import { SkeletonShimmer } from "./skeleton-shimmer";
+import { SlideDown } from "./slide-down";
+import { SlideLeft } from "./slide-left";
+import { SlideRight } from "./slide-right";
+import { SlideUp } from "./slide-up";
+import { Spin } from "./spin";
+import { TextReveal } from "./text-reveal";
+import { TextShimmer } from "./text-shimmer";
+import { Tilt } from "./tilt";
+import { Wiggle } from "./wiggle";
+
+const animations = [
+  ["FadeIn", FadeIn, "animation-fade-in"],
+  ["FadeOut", FadeOut, "animation-fade-out"],
+  ["FadeUp", FadeUp, "animation-fade-up"],
+  ["FadeDown", FadeDown, "animation-fade-down"],
+  ["FadeLeft", FadeLeft, "animation-fade-left"],
+  ["FadeRight", FadeRight, "animation-fade-right"],
+  ["ScaleIn", ScaleIn, "animation-scale-in"],
+  ["ScaleOut", ScaleOut, "animation-scale-out"],
+  ["PopIn", PopIn, "animation-pop-in"],
+  ["BlurIn", BlurIn, "animation-blur-in"],
+  ["BlurOut", BlurOut, "animation-blur-out"],
+  ["SlideUp", SlideUp, "animation-slide-up"],
+  ["SlideDown", SlideDown, "animation-slide-down"],
+  ["SlideLeft", SlideLeft, "animation-slide-left"],
+  ["SlideRight", SlideRight, "animation-slide-right"],
+  ["RevealUp", RevealUp, "animation-reveal-up"],
+  ["RevealDown", RevealDown, "animation-reveal-down"],
+  ["RevealLeft", RevealLeft, "animation-reveal-left"],
+  ["RevealRight", RevealRight, "animation-reveal-right"],
+  ["RevealBlur", RevealBlur, "animation-reveal-blur"],
+  ["TextReveal", TextReveal, "animation-text-reveal"],
+  ["TextShimmer", TextShimmer, "animation-text-shimmer"],
+  ["RotateIn", RotateIn, "animation-rotate-in"],
+  ["Pulse", Pulse, "animation-pulse"],
+  ["Ping", Ping, "animation-ping"],
+  ["Shake", Shake, "animation-shake"],
+  ["Bounce", Bounce, "animation-bounce"],
+  ["Wiggle", Wiggle, "animation-wiggle"],
+  ["Float", Float, "animation-float"],
+  ["Spin", Spin, "animation-spin"],
+  ["Flip", Flip, "animation-flip"],
+  ["FlipIn", FlipIn, "animation-flip-in"],
+  ["Tilt", Tilt, "animation-tilt"],
+  ["Magnetic", Magnetic, "animation-magnetic"],
+  ["HoverLift", HoverLift, "animation-hover-lift"],
+  ["HoverScale", HoverScale, "animation-hover-scale"],
+  ["Press", Press, "animation-press"],
+  ["Reorder", Reorder, "animation-reorder"],
+  ["SkeletonShimmer", SkeletonShimmer, "animation-skeleton-shimmer"],
+  ["Progress", Progress, "animation-progress"],
+  ["Parallax", Parallax, "animation-parallax"],
+] as const;
+
+describe("animation primitives", () => {
+  for (const [displayName, Component, slot] of animations) {
+    it(`${displayName} stamps the animation slot and forwards content`, () => {
+      render(<Component className="custom-motion">Preview</Component>);
+      const root = screen.getByText("Preview");
+
+      expect(Component.displayName).toBe(displayName);
+      expect(root).toHaveAttribute("data-slot", slot);
+      expect(root).toHaveClass("custom-motion");
+    });
+  }
+
+  it("supports direct target override props without forwarding them to the DOM", () => {
+    render(
+      <FadeUp
+        from={{ opacity: 0.2, y: 32, blur: 8 }}
+        to={{
+          opacity: 0.9,
+          y: 4,
+          scale: 0.98,
+          scaleX: 1,
+          scaleY: 1,
+          rotate: -2,
+          rotateX: 3,
+          rotateY: -3,
+        }}
+        exitTo={{ opacity: 0, y: 12, blur: "10px" }}
+      >
+        Custom values
+      </FadeUp>,
+    );
+
+    const root = screen.getByText("Custom values");
+
+    expect(root).toHaveAttribute("data-slot", "animation-fade-up");
+    expect(root).not.toHaveAttribute("from");
+    expect(root).not.toHaveAttribute("to");
+    expect(root).not.toHaveAttribute("exitTo");
+  });
+});

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

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

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

@@ -0,0 +1,5 @@
+"use client";
+
+export { BlurIn } from "./blur-in";
+export { blurInPreset } from "./presets";
+export type { BlurInProps } from "./types";

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

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

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

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

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;