@enact-ui/animate 0.1.0 → 0.2.0

package/dist/showcase/motion-presets.demo.js

@@ -0,0 +1,96 @@
+// Copyright (c) 2026 Amsterdam Data Labs
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { useState } from "react";
+import { buttonPress, cardHover, fadeIn, pulse, scale, shake, slideDown, slideUp, useComponentAnimation, useStagger, } from "../index";
+// =============================================================================
+// Motion Style Showcase
+// =============================================================================
+/**
+ * Demonstrates all four motion styles with the same animation.
+ */
+export const MotionStylesShowcase = () => {
+    const styles = ["subtle", "standard", "bold", "playful"];
+    const [key, setKey] = useState(0);
+    return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsx("div", { className: "flex gap-4", children: _jsx("button", { type: "button", onClick: () => setKey((k) => k + 1), className: "rounded-md bg-surface-brand px-4 py-2 text-sm text-content-on-brand hover:bg-surface-brand-emphasis", children: "Replay Animations" }) }), _jsx("div", { className: "grid grid-cols-4 gap-6", children: styles.map((style) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h4", { className: "text-sm font-medium capitalize text-content-secondary", children: style }), _jsx(AnimatedCard, { preset: slideUp, style: style, animationKey: key })] }, `${style}-${key}`))) })] }));
+};
+const AnimatedCard = ({ preset, style, animationKey }) => {
+    const { prefersReducedMotion: _prm, isEnabled: _ie, ...animationProps } = useComponentAnimation(preset, style);
+    return (_jsxs(motion.div, { className: "rounded-lg border border-border-default bg-surface-raised p-4 shadow-sm", initial: animationProps.initial, animate: animationProps.animate, exit: animationProps.exit, transition: animationProps.transition, children: [_jsx("div", { className: "h-8 w-full rounded bg-surface-sunken" }), _jsx("div", { className: "mt-3 h-4 w-3/4 rounded bg-surface-sunken" }), _jsx("div", { className: "mt-2 h-4 w-1/2 rounded bg-surface-sunken" })] }, animationKey));
+};
+/**
+ * Demonstrates all component animation presets.
+ */
+export const ComponentPresetsShowcase = () => {
+    const [selectedPreset, setSelectedPreset] = useState("fadeIn");
+    const [style, setStyle] = useState("standard");
+    const [key, setKey] = useState(0);
+    const presets = {
+        fadeIn,
+        slideUp,
+        slideDown,
+        scale,
+    };
+    const selectedPresetObj = presets[selectedPreset] ?? fadeIn;
+    const { prefersReducedMotion: _prm, isEnabled: _ie, ...animationProps } = useComponentAnimation(selectedPresetObj, style);
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm text-content-secondary", children: ["Preset:", _jsx("select", { value: selectedPreset, onChange: (e) => setSelectedPreset(e.target.value), className: "rounded-md border border-border-default bg-surface-base px-3 py-1 text-sm", children: Object.keys(presets).map((name) => (_jsx("option", { value: name, children: name }, name))) })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-content-secondary", children: ["Style:", _jsxs("select", { value: style, onChange: (e) => setStyle(e.target.value), className: "rounded-md border border-border-default bg-surface-base px-3 py-1 text-sm", children: [_jsx("option", { value: "subtle", children: "Subtle" }), _jsx("option", { value: "standard", children: "Standard" }), _jsx("option", { value: "bold", children: "Bold" }), _jsx("option", { value: "playful", children: "Playful" })] })] }), _jsx("button", { type: "button", onClick: () => setKey((k) => k + 1), className: "rounded-md bg-surface-brand px-4 py-2 text-sm text-content-on-brand hover:bg-surface-brand-emphasis", children: "Replay" })] }), _jsx(AnimatePresence, { mode: "wait", children: _jsxs(motion.div, { className: "w-full max-w-sm rounded-lg border border-border-default bg-surface-raised p-6 shadow-sm", initial: animationProps.initial, animate: animationProps.animate, exit: animationProps.exit, transition: animationProps.transition, children: [_jsx("h3", { className: "text-lg font-semibold text-content-primary", children: selectedPreset }), _jsxs("p", { className: "mt-2 text-sm text-content-secondary", children: ["Motion style: ", style] }), _jsxs("p", { className: "mt-4 text-content-tertiary", children: ["This card demonstrates the ", selectedPreset, " animation preset with ", style, " motion style."] })] }, `${selectedPreset}-${style}-${key}`) })] }));
+};
+// =============================================================================
+// Stagger Animation Showcase
+// =============================================================================
+/**
+ * Demonstrates staggered list animations.
+ */
+export const StaggerShowcase = () => {
+    const [style, setStyle] = useState("standard");
+    const [key, setKey] = useState(0);
+    const items = Array.from({ length: 6 }, (_, i) => ({
+        id: i + 1,
+        title: `Item ${i + 1}`,
+        description: `Description for item ${i + 1}`,
+    }));
+    const { containerProps, getItemProps } = useStagger(style, {
+        direction: "forward",
+        totalItems: items.length,
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm text-content-secondary", children: ["Style:", _jsxs("select", { value: style, onChange: (e) => setStyle(e.target.value), className: "rounded-md border border-border-default bg-surface-base px-3 py-1 text-sm", children: [_jsx("option", { value: "subtle", children: "Subtle" }), _jsx("option", { value: "standard", children: "Standard" }), _jsx("option", { value: "bold", children: "Bold" }), _jsx("option", { value: "playful", children: "Playful" })] })] }), _jsx("button", { type: "button", onClick: () => setKey((k) => k + 1), className: "rounded-md bg-surface-brand px-4 py-2 text-sm text-content-on-brand hover:bg-surface-brand-emphasis", children: "Replay" })] }), _jsx(motion.ul, { className: "flex flex-col gap-3", initial: containerProps.initial, animate: containerProps.animate, exit: containerProps.exit ?? "hidden", variants: containerProps.variants, children: items.map((item, index) => {
+                    const itemProps = getItemProps(index);
+                    return (_jsxs(motion.li, { className: "rounded-lg border border-border-default bg-surface-raised p-4", variants: itemProps.variants, custom: itemProps.custom, children: [_jsx("h4", { className: "font-medium text-content-primary", children: item.title }), _jsx("p", { className: "text-sm text-content-secondary", children: item.description })] }, item.id));
+                }) }, key)] }));
+};
+// =============================================================================
+// Micro-Interactions Showcase
+// =============================================================================
+/**
+ * Demonstrates micro-interaction presets.
+ */
+export const MicroInteractionsShowcase = () => {
+    const [style, setStyle] = useState("standard");
+    const [shakeKey, setShakeKey] = useState(0);
+    const buttonPressProps = buttonPress.getProps(style);
+    const cardHoverProps = cardHover.getProps(style);
+    const pulseProps = pulse.getProps(style);
+    const shakeProps = shake.getProps(style);
+    return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm text-content-secondary", children: ["Style:", _jsxs("select", { value: style, onChange: (e) => setStyle(e.target.value), className: "rounded-md border border-border-default bg-surface-base px-3 py-1 text-sm", children: [_jsx("option", { value: "subtle", children: "Subtle" }), _jsx("option", { value: "standard", children: "Standard" }), _jsx("option", { value: "bold", children: "Bold" }), _jsx("option", { value: "playful", children: "Playful" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-content-secondary", children: "Button Press" }), _jsx(motion.button, { type: "button", className: "rounded-lg bg-surface-brand px-6 py-3 font-medium text-content-on-brand", whileTap: buttonPressProps.whileTap, transition: buttonPressProps.transition, children: "Click Me" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-content-secondary", children: "Card Hover" }), _jsx(motion.div, { className: "rounded-lg border border-border-default bg-surface-raised p-4 cursor-pointer", whileHover: cardHoverProps.whileHover, transition: cardHoverProps.transition, children: _jsx("p", { className: "text-sm text-content-primary", children: "Hover me" }) })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-content-secondary", children: "Pulse" }), _jsx(motion.div, { className: "h-12 w-12 rounded-full bg-surface-success", animate: pulseProps.animate, transition: pulseProps.transition })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-content-secondary", children: "Shake" }), _jsx(motion.button, { type: "button", onClick: () => setShakeKey((k) => k + 1), className: "rounded-lg border border-border-error bg-surface-error px-4 py-2 text-sm text-content-error", animate: shakeProps.animate, transition: shakeProps.transition, children: "Trigger Error" }, shakeKey)] })] })] }));
+};
+// =============================================================================
+// Reduced Motion Demo
+// =============================================================================
+/**
+ * Demonstrates how animations respect reduced motion preferences.
+ */
+export const ReducedMotionDemo = () => {
+    const { prefersReducedMotion, isEnabled: _ie, ...animationProps } = useComponentAnimation(slideUp, "standard");
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "rounded-lg border border-border-muted bg-surface-sunken p-4", children: [_jsxs("p", { className: "text-sm text-content-secondary", children: [_jsx("strong", { children: "Reduced Motion:" }), " ", prefersReducedMotion ? "Enabled" : "Disabled"] }), _jsx("p", { className: "mt-2 text-sm text-content-tertiary", children: "To test, enable \"Reduce motion\" in your system accessibility settings." })] }), _jsxs(motion.div, { className: "rounded-lg border border-border-default bg-surface-raised p-6", initial: animationProps.initial, animate: animationProps.animate, exit: animationProps.exit, transition: animationProps.transition, children: [_jsx("h3", { className: "text-lg font-semibold text-content-primary", children: "Accessible Animation" }), _jsx("p", { className: "mt-2 text-content-secondary", children: "This animation will use a simple fade when reduced motion is enabled, or the full slide-up effect when it's disabled." })] })] }));
+};
+// =============================================================================
+// Combined Showcase
+// =============================================================================
+/**
+ * A comprehensive showcase of all motion preset features.
+ */
+export const MotionPresetsPlayground = () => {
+    return (_jsxs("div", { className: "flex flex-col gap-12 p-8", children: [_jsxs("section", { children: [_jsx("h2", { className: "mb-4 text-xl font-bold text-content-primary", children: "Motion Styles" }), _jsx(MotionStylesShowcase, {})] }), _jsxs("section", { children: [_jsx("h2", { className: "mb-4 text-xl font-bold text-content-primary", children: "Component Presets" }), _jsx(ComponentPresetsShowcase, {})] }), _jsxs("section", { children: [_jsx("h2", { className: "mb-4 text-xl font-bold text-content-primary", children: "Stagger Animations" }), _jsx(StaggerShowcase, {})] }), _jsxs("section", { children: [_jsx("h2", { className: "mb-4 text-xl font-bold text-content-primary", children: "Micro-Interactions" }), _jsx(MicroInteractionsShowcase, {})] }), _jsxs("section", { children: [_jsx("h2", { className: "mb-4 text-xl font-bold text-content-primary", children: "Reduced Motion Support" }), _jsx(ReducedMotionDemo, {})] })] }));
+};
+//# sourceMappingURL=motion-presets.demo.js.map

package/dist/showcase/motion-presets.demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-presets.demo.js","sourceRoot":"","sources":["../../src/showcase/motion-presets.demo.tsx"],"names":[],"mappings":"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"}

package/dist/showcase/motion-presets.story.d.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+/**
+ * Complete playground showcasing all motion preset features.
+ * Includes motion styles, component presets, stagger animations,
+ * micro-interactions, and reduced motion support.
+ */
+export declare const Playground: Story;
+/**
+ * Demonstrates the four motion styles: subtle, standard, bold, and playful.
+ * Each style provides different timing, spring physics, and easing curves
+ * to match different UI contexts.
+ */
+export declare const MotionStyles: Story;
+/**
+ * Showcases component animation presets like fadeIn, slideUp, scale, etc.
+ * These presets provide ready-to-use entrance, exit, and transition animations.
+ */
+export declare const ComponentPresets: Story;
+/**
+ * Demonstrates staggered list animations with different patterns.
+ * Useful for animating lists, grids, and collections of items.
+ */
+export declare const StaggerAnimations: Story;
+/**
+ * Showcases micro-interaction presets for buttons, cards, and other
+ * interactive elements.
+ */
+export declare const MicroInteractions: Story;
+/**
+ * Demonstrates how animations respect the user's reduced motion preference.
+ * When enabled, animations are simplified or disabled for accessibility.
+ */
+export declare const ReducedMotion: Story;
+//# sourceMappingURL=motion-presets.story.d.ts.map

package/dist/showcase/motion-presets.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-presets.story.d.ts","sourceRoot":"","sources":["../../src/showcase/motion-presets.story.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAU7D,QAAA,MAAM,IAAI,EAAE,IAYX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAmB9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAsB/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC"}

package/dist/showcase/motion-presets.story.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentPresetsShowcase, MicroInteractionsShowcase, MotionPresetsPlayground, MotionStylesShowcase, ReducedMotionDemo, StaggerShowcase, } from "./motion-presets.demo";
+const meta = {
+    title: "Animate/Motion Presets",
+    parameters: {
+        layout: "padded",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "min-h-screen bg-surface-base p-8", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/**
+ * Complete playground showcasing all motion preset features.
+ * Includes motion styles, component presets, stagger animations,
+ * micro-interactions, and reduced motion support.
+ */
+export const Playground = {
+    render: () => _jsx(MotionPresetsPlayground, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: "A comprehensive showcase of all motion preset features including motion styles, component presets, stagger animations, and micro-interactions.",
+            },
+        },
+    },
+};
+/**
+ * Demonstrates the four motion styles: subtle, standard, bold, and playful.
+ * Each style provides different timing, spring physics, and easing curves
+ * to match different UI contexts.
+ */
+export const MotionStyles = {
+    render: () => _jsx(MotionStylesShowcase, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+Motion styles control the overall feel of animations:
+
+- **Subtle**: Minimal, professional animations for enterprise/productivity contexts
+- **Standard**: Balanced animations suitable for most applications
+- **Bold**: More pronounced animations for engaging experiences
+- **Playful**: Bouncy, dynamic animations for fun, creative contexts
+
+Each style adjusts duration, spring physics, and easing to create cohesive motion.
+				`,
+            },
+        },
+    },
+};
+/**
+ * Showcases component animation presets like fadeIn, slideUp, scale, etc.
+ * These presets provide ready-to-use entrance, exit, and transition animations.
+ */
+export const ComponentPresets = {
+    render: () => _jsx(ComponentPresetsShowcase, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+Component presets provide ready-to-use animations:
+
+- **fadeIn/fadeOut**: Simple opacity transitions
+- **slideUp/slideDown/slideLeft/slideRight**: Directional slide animations
+- **scale/zoomIn/zoomOut**: Scale-based animations
+- **rotate/flip**: Rotation animations
+- **expand**: Height-based expansion
+
+Each preset can be combined with any motion style for different intensities.
+				`,
+            },
+        },
+    },
+};
+/**
+ * Demonstrates staggered list animations with different patterns.
+ * Useful for animating lists, grids, and collections of items.
+ */
+export const StaggerAnimations = {
+    render: () => _jsx(StaggerShowcase, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+Stagger animations coordinate the timing of multiple elements:
+
+- **Sequential**: Items animate one after another (forward or reverse)
+- **Center**: Animation radiates from the center outward
+- **Random**: Items animate in random order
+- **Grid**: Optimized for grid layouts with row/column awareness
+- **Wave**: Creates a wave-like effect across items
+- **Cascade**: Items flow in a cascading pattern
+
+Use the \`useStagger\` hook or \`StaggerContainer\` component to apply these patterns.
+				`,
+            },
+        },
+    },
+};
+/**
+ * Showcases micro-interaction presets for buttons, cards, and other
+ * interactive elements.
+ */
+export const MicroInteractions = {
+    render: () => _jsx(MicroInteractionsShowcase, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+Micro-interactions add polish to interactive elements:
+
+- **buttonPress**: Satisfying press feedback for buttons
+- **cardHover**: Lift and shadow effect for hoverable cards
+- **pulse**: Continuous pulsing animation for attention
+- **shake**: Error or warning shake animation
+- **iconSpin**: Loading spinner rotation
+- **wiggle**: Playful wiggle animation
+- **heartbeat**: Heartbeat pulse effect
+- **rubberBand**: Stretchy bounce animation
+
+Apply these using the preset's \`getProps(style)\` method.
+				`,
+            },
+        },
+    },
+};
+/**
+ * Demonstrates how animations respect the user's reduced motion preference.
+ * When enabled, animations are simplified or disabled for accessibility.
+ */
+export const ReducedMotion = {
+    render: () => _jsx(ReducedMotionDemo, {}),
+    parameters: {
+        docs: {
+            description: {
+                story: `
+All animations automatically respect the user's \`prefers-reduced-motion\` setting:
+
+- When reduced motion is enabled, complex animations fall back to simple fades
+- Motion duration is shortened or eliminated
+- The \`useReducedMotion\` hook provides access to the preference
+- Components receive \`data-reduced-motion\` attribute for styling
+
+This ensures animations are accessible to users who are sensitive to motion.
+				`,
+            },
+        },
+    },
+};
+//# sourceMappingURL=motion-presets.story.js.map

package/dist/showcase/motion-presets.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-presets.story.js","sourceRoot":"","sources":["../../src/showcase/motion-presets.story.tsx"],"names":[],"mappings":";AAGA,OAAO,EACH,wBAAwB,EACxB,yBAAyB,EACzB,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAClB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,wBAAwB;IAC/B,UAAU,EAAE;QACR,MAAM,EAAE,QAAQ;KACnB;IACD,UAAU,EAAE;QACR,CAAC,KAAK,EAAE,EAAE,CAAC,CACP,cAAK,SAAS,EAAC,kCAAkC,YAC7C,KAAC,KAAK,KAAG,GACP,CACT;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,uBAAuB,KAAG;IACzC,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE,gJAAgJ;aAC1J;SACJ;KACJ;CACJ,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,oBAAoB,KAAG;IACtC,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE;;;;;;;;;KASlB;aACQ;SACJ;KACJ;CACJ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACnC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,wBAAwB,KAAG;IAC1C,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE;;;;;;;;;;KAUlB;aACQ;SACJ;KACJ;CACJ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,eAAe,KAAG;IACjC,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE;;;;;;;;;;;KAWlB;aACQ;SACJ;KACJ;CACJ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,yBAAyB,KAAG;IAC3C,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE;;;;;;;;;;;;;KAalB;aACQ;SACJ;KACJ;CACJ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAU;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,iBAAiB,KAAG;IACnC,UAAU,EAAE;QACR,IAAI,EAAE;YACF,WAAW,EAAE;gBACT,KAAK,EAAE;;;;;;;;;KASlB;aACQ;SACJ;KACJ;CACJ,CAAC"}

package/dist/utils/easing.d.ts

@@ -0,0 +1,294 @@
+/**
+ * @fileoverview Easing functions and tween configurations for Motion library.
+ *
+ * @ai-hint This module provides easing curves for duration-based (tween) animations.
+ * Use tweens when you need precise timing control or for CSS-property animations
+ * that don't work well with springs (e.g., color, opacity fades).
+ *
+ * @example
+ * ```tsx
+ * import { easeOutQuart, createTween, easeInOut } from './easing';
+ *
+ * // Use a preset curve
+ * <motion.div animate={{ opacity: 1 }} transition={{ duration: 0.3, ease: easeOutQuart }} />
+ *
+ * // Use the tween helper
+ * <motion.div animate={{ x: 100 }} transition={createTween(0.4, easeOutQuart)} />
+ * ```
+ */
+/**
+ * Cubic bezier curve represented as four control points.
+ * Format: [x1, y1, x2, y2] matching CSS cubic-bezier().
+ *
+ * @ai-hint These values map directly to CSS cubic-bezier(x1, y1, x2, y2).
+ * x values must be between 0 and 1, y values can exceed that range for overshoot.
+ */
+export type CubicBezier = readonly [number, number, number, number];
+/**
+ * Configuration object for tween-based (duration) animations.
+ *
+ * @ai-hint TweenTransition provides predictable, time-based animations.
+ * Unlike springs, tweens always take exactly the specified duration.
+ */
+export interface TweenTransition {
+    /** Animation type identifier */
+    readonly type: "tween";
+    /** Duration in seconds */
+    readonly duration: number;
+    /** Easing curve (cubic bezier or named easing) */
+    readonly ease?: CubicBezier | string;
+}
+/**
+ * Parameters for creating tween transitions.
+ */
+export interface TweenParams {
+    /** Duration in seconds */
+    duration: number;
+    /** Optional easing curve */
+    ease?: CubicBezier | string;
+    /** Optional delay before animation starts */
+    delay?: number;
+}
+/**
+ * Linear easing - constant speed with no acceleration.
+ *
+ * @ai-hint Use for progress indicators, loading bars, or when you need
+ * mechanical, uniform motion. Rarely suitable for UI transitions.
+ *
+ * @example
+ * ```tsx
+ * <motion.div animate={{ width: "100%" }} transition={{ duration: 2, ease: linear }} />
+ * ```
+ */
+export declare const linear: CubicBezier;
+/**
+ * Ease-in - starts slow, accelerates toward end.
+ *
+ * @ai-hint Use for elements exiting the screen or fading out.
+ * Creates anticipation but can feel sluggish if overused.
+ *
+ * @example
+ * ```tsx
+ * <motion.div exit={{ opacity: 0, x: -100 }} transition={{ duration: 0.3, ease: easeIn }} />
+ * ```
+ */
+export declare const easeIn: CubicBezier;
+/**
+ * Ease-out - starts fast, decelerates toward end.
+ *
+ * @ai-hint The most natural-feeling easing for UI. Use for elements
+ * entering the screen or appearing. Mimics real-world deceleration.
+ *
+ * @example
+ * ```tsx
+ * <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3, ease: easeOut }} />
+ * ```
+ */
+export declare const easeOut: CubicBezier;
+/**
+ * Ease-in-out - slow start and end, fast middle.
+ *
+ * @ai-hint Good for elements that transform in place (scale, rotate)
+ * or move between two visible positions. Symmetric and balanced.
+ *
+ * @example
+ * ```tsx
+ * <motion.div animate={{ rotate: 180 }} transition={{ duration: 0.5, ease: easeInOut }} />
+ * ```
+ */
+export declare const easeInOut: CubicBezier;
+/**
+ * Quart ease-out - more dramatic deceleration than standard ease-out.
+ *
+ * @ai-hint Use for hero animations, page transitions, or anywhere you want
+ * motion to feel more dynamic and expressive. Popular in modern UI design.
+ *
+ * @example
+ * ```tsx
+ * <motion.section
+ *   initial={{ y: 50, opacity: 0 }}
+ *   animate={{ y: 0, opacity: 1 }}
+ *   transition={{ duration: 0.6, ease: easeOutQuart }}
+ * />
+ * ```
+ */
+export declare const easeOutQuart: CubicBezier;
+/**
+ * Cubic ease-in-out - smooth acceleration and deceleration.
+ *
+ * @ai-hint A balanced, professional curve suitable for most transitions.
+ * Less aggressive than quart, more refined than standard ease-in-out.
+ *
+ * @example
+ * ```tsx
+ * <motion.div
+ *   animate={{ height: isOpen ? "auto" : 0 }}
+ *   transition={{ duration: 0.4, ease: easeInOutCubic }}
+ * />
+ * ```
+ */
+export declare const easeInOutCubic: CubicBezier;
+/**
+ * Back ease-out - slight overshoot before settling.
+ *
+ * @ai-hint Use for playful, attention-grabbing animations. The overshoot
+ * creates a "bounce back" effect. Use sparingly in professional UIs.
+ *
+ * @example
+ * ```tsx
+ * <motion.div
+ *   initial={{ scale: 0 }}
+ *   animate={{ scale: 1 }}
+ *   transition={{ duration: 0.5, ease: easeOutBack }}
+ * />
+ * ```
+ */
+export declare const easeOutBack: CubicBezier;
+/**
+ * Expo ease-out - very fast start with long, smooth deceleration.
+ *
+ * @ai-hint Creates a snappy feel while maintaining smoothness.
+ * Great for modals, popovers, and navigation transitions.
+ *
+ * @example
+ * ```tsx
+ * <motion.dialog
+ *   initial={{ scale: 0.95, opacity: 0 }}
+ *   animate={{ scale: 1, opacity: 1 }}
+ *   transition={{ duration: 0.3, ease: easeOutExpo }}
+ * />
+ * ```
+ */
+export declare const easeOutExpo: CubicBezier;
+/**
+ * Quint ease-in-out - dramatic but smooth transition.
+ *
+ * @ai-hint Use for large-scale transitions like page changes or
+ * full-screen reveals. The aggressive curve makes motion feel purposeful.
+ *
+ * @example
+ * ```tsx
+ * <motion.main
+ *   initial={{ opacity: 0 }}
+ *   animate={{ opacity: 1 }}
+ *   transition={{ duration: 0.8, ease: easeInOutQuint }}
+ * />
+ * ```
+ */
+export declare const easeInOutQuint: CubicBezier;
+/**
+ * Creates a tween transition with specified duration and optional easing.
+ *
+ * @ai-hint Primary factory for duration-based animations. Provides
+ * consistent, predictable timing. Default easing is easeOut.
+ *
+ * @param duration - Animation duration in seconds
+ * @param ease - Optional cubic bezier curve or easing name
+ * @returns A TweenTransition configuration object
+ *
+ * @example
+ * ```tsx
+ * // Quick fade
+ * <motion.div animate={{ opacity: 1 }} transition={createTween(0.2)} />
+ *
+ * // Expressive entrance
+ * <motion.div animate={{ y: 0 }} transition={createTween(0.5, easeOutQuart)} />
+ *
+ * // Using named easing
+ * <motion.div animate={{ x: 100 }} transition={createTween(0.3, "easeInOut")} />
+ * ```
+ */
+export declare function createTween(duration: number, ease?: CubicBezier | string): TweenTransition;
+/**
+ * Creates a tween transition from a params object.
+ *
+ * @ai-hint Alternative factory accepting an object, useful when
+ * animation parameters come from configuration or are computed.
+ *
+ * @param params - Tween parameters object
+ * @returns A TweenTransition configuration object
+ *
+ * @example
+ * ```tsx
+ * const config = { duration: 0.4, ease: easeOutQuart };
+ * const tween = createTweenFromParams(config);
+ * ```
+ */
+export declare function createTweenFromParams(params: TweenParams): TweenTransition;
+/**
+ * Standard duration values for consistent timing across the application.
+ *
+ * @ai-hint Use these durations to maintain rhythm and consistency.
+ * Faster durations for small, frequent interactions; longer for emphasis.
+ */
+export declare const durations: {
+    /** Micro-interactions: hover states, small toggles (100ms) */
+    readonly instant: 0.1;
+    /** Quick feedback: button clicks, checkboxes (200ms) */
+    readonly fast: 0.2;
+    /** Standard transitions: most UI elements (300ms) */
+    readonly normal: 0.3;
+    /** Emphasized transitions: modals, drawers (400ms) */
+    readonly slow: 0.4;
+    /** Dramatic transitions: page changes, reveals (600ms) */
+    readonly slower: 0.6;
+};
+/**
+ * Type representing valid duration preset names.
+ */
+export type DurationPresetName = keyof typeof durations;
+/**
+ * Collection of all easing curves for iteration or dynamic selection.
+ *
+ * @ai-hint Use this map when you need to select easings dynamically
+ * based on theme or user preferences.
+ *
+ * @example
+ * ```tsx
+ * const easingName = theme.animationEasing; // 'easeOutQuart' | 'easeInOut' | etc.
+ * const easing = easingPresets[easingName];
+ * ```
+ */
+export declare const easingPresets: {
+    readonly linear: CubicBezier;
+    readonly easeIn: CubicBezier;
+    readonly easeOut: CubicBezier;
+    readonly easeInOut: CubicBezier;
+    readonly easeOutQuart: CubicBezier;
+    readonly easeInOutCubic: CubicBezier;
+    readonly easeOutBack: CubicBezier;
+    readonly easeOutExpo: CubicBezier;
+    readonly easeInOutQuint: CubicBezier;
+};
+/**
+ * Type representing valid easing preset names.
+ */
+export type EasingPresetName = keyof typeof easingPresets;
+/**
+ * Pre-configured tween transitions for common use cases.
+ *
+ * @ai-hint Ready-to-use transitions that combine duration and easing
+ * for typical scenarios. Use these for consistent animation behavior.
+ *
+ * @example
+ * ```tsx
+ * <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={tweenPresets.fadeIn} />
+ * ```
+ */
+export declare const tweenPresets: {
+    /** Quick fade for hover states and micro-interactions */
+    readonly instant: TweenTransition;
+    /** Snappy transition for interactive elements */
+    readonly fast: TweenTransition;
+    /** Balanced transition for most UI elements */
+    readonly normal: TweenTransition;
+    /** Smooth transition for modals and overlays */
+    readonly slow: TweenTransition;
+    /** Dramatic transition for page-level changes */
+    readonly slower: TweenTransition;
+};
+/**
+ * Type representing valid tween preset names.
+ */
+export type TweenPresetName = keyof typeof tweenPresets;
+//# sourceMappingURL=easing.d.ts.map

package/dist/utils/easing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"easing.d.ts","sourceRoot":"","sources":["../../src/utils/easing.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpE;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC5B,gCAAgC;IAChC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,0BAA0B;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CACxC;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IACxB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,EAAE,WAAmC,CAAC;AAEzD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,EAAE,WAAqC,CAAC;AAE3D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO,EAAE,WAAqC,CAAC;AAE5D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,EAAE,WAAuC,CAAC;AAMhE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,EAAE,WAAwC,CAAC;AAEpE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,EAAE,WAAyC,CAAC;AAEvE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,EAAE,WAA4C,CAAC;AAEvE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,EAAE,WAAwC,CAAC;AAEnE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,EAAE,WAAyC,CAAC;AAMvE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,eAAe,CAM1F;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,WAAW,GAAG,eAAe,CAW1E;AAMD;;;;;GAKG;AACH,eAAO,MAAM,SAAS;IAClB,8DAA8D;;IAE9D,wDAAwD;;IAExD,qDAAqD;;IAErD,sDAAsD;;IAEtD,0DAA0D;;CAEpD,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,SAAS,CAAC;AAMxD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;CAUhB,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,aAAa,CAAC;AAM1D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY;IACrB,yDAAyD;;IAEzD,iDAAiD;;IAEjD,+CAA+C;;IAE/C,gDAAgD;;IAEhD,iDAAiD;;CAE3C,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}