@enact-ui/animate 0.1.0 → 0.2.0

package/dist/utils/easing.js

@@ -0,0 +1,265 @@
+// Copyright (c) 2026 Amsterdam Data Labs
+// =============================================================================
+// STANDARD EASING CURVES
+// =============================================================================
+/**
+ * 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 const linear = [0, 0, 1, 1];
+/**
+ * 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 const easeIn = [0.4, 0, 1, 1];
+/**
+ * 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 const easeOut = [0, 0, 0.2, 1];
+/**
+ * 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 const easeInOut = [0.4, 0, 0.2, 1];
+// =============================================================================
+// EXPRESSIVE EASING CURVES
+// =============================================================================
+/**
+ * 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 const easeOutQuart = [0.25, 1, 0.5, 1];
+/**
+ * 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 const easeInOutCubic = [0.65, 0, 0.35, 1];
+/**
+ * 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 const easeOutBack = [0.34, 1.56, 0.64, 1];
+/**
+ * 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 const easeOutExpo = [0.16, 1, 0.3, 1];
+/**
+ * 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 const easeInOutQuint = [0.83, 0, 0.17, 1];
+// =============================================================================
+// TWEEN FACTORIES
+// =============================================================================
+/**
+ * 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 function createTween(duration, ease) {
+    return {
+        type: "tween",
+        duration,
+        ease: ease ?? easeOut,
+    };
+}
+/**
+ * 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 function createTweenFromParams(params) {
+    const result = {
+        type: "tween",
+        duration: params.duration,
+    };
+    if (params.ease !== undefined) {
+        return { ...result, ease: params.ease };
+    }
+    return result;
+}
+// =============================================================================
+// DURATION PRESETS
+// =============================================================================
+/**
+ * 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 const durations = {
+    /** Micro-interactions: hover states, small toggles (100ms) */
+    instant: 0.1,
+    /** Quick feedback: button clicks, checkboxes (200ms) */
+    fast: 0.2,
+    /** Standard transitions: most UI elements (300ms) */
+    normal: 0.3,
+    /** Emphasized transitions: modals, drawers (400ms) */
+    slow: 0.4,
+    /** Dramatic transitions: page changes, reveals (600ms) */
+    slower: 0.6,
+};
+// =============================================================================
+// PRESET COLLECTIONS
+// =============================================================================
+/**
+ * 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 const easingPresets = {
+    linear,
+    easeIn,
+    easeOut,
+    easeInOut,
+    easeOutQuart,
+    easeInOutCubic,
+    easeOutBack,
+    easeOutExpo,
+    easeInOutQuint,
+};
+// =============================================================================
+// CONVENIENCE TRANSITIONS
+// =============================================================================
+/**
+ * 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 const tweenPresets = {
+    /** Quick fade for hover states and micro-interactions */
+    instant: createTween(durations.instant, easeOut),
+    /** Snappy transition for interactive elements */
+    fast: createTween(durations.fast, easeOut),
+    /** Balanced transition for most UI elements */
+    normal: createTween(durations.normal, easeOutQuart),
+    /** Smooth transition for modals and overlays */
+    slow: createTween(durations.slow, easeOutQuart),
+    /** Dramatic transition for page-level changes */
+    slower: createTween(durations.slower, easeInOutCubic),
+};
+//# sourceMappingURL=easing.js.map

package/dist/utils/easing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"easing.js","sourceRoot":"","sources":["../../src/utils/easing.ts"],"names":[],"mappings":"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"}

package/dist/utils/reduced-motion.d.ts

@@ -0,0 +1,322 @@
+/**
+ * Motion variant configuration for animations.
+ *
+ * @ai-hint This type represents animation variant objects used by Motion library.
+ * Variants define the animation states (initial, animate, exit, etc.).
+ */
+export type MotionVariant = Record<string, unknown>;
+/**
+ * Props that can be passed to Motion components.
+ *
+ * @ai-hint This type represents the common props used in Motion components
+ * including animation configuration, transition settings, and variants.
+ */
+export interface MotionProps {
+    /** Initial animation state or variant name */
+    initial?: MotionVariant | string | boolean | undefined;
+    /** Target animation state or variant name */
+    animate?: MotionVariant | string | undefined;
+    /** Exit animation state or variant name */
+    exit?: MotionVariant | string | undefined;
+    /** Animation variants object */
+    variants?: Record<string, MotionVariant> | undefined;
+    /** Transition configuration */
+    transition?: MotionTransition | undefined;
+    /** Whether animations should be active */
+    whileHover?: MotionVariant | string | undefined;
+    /** Animation when element is in view */
+    whileInView?: MotionVariant | string | undefined;
+    /** Animation while element is pressed */
+    whileTap?: MotionVariant | string | undefined;
+    /** Animation while element is focused */
+    whileFocus?: MotionVariant | string | undefined;
+    /** Animation while dragging */
+    whileDrag?: MotionVariant | string | undefined;
+}
+/**
+ * Transition configuration for Motion animations.
+ *
+ * @ai-hint This type represents the transition object in Motion library.
+ * It controls duration, easing, delay, and other timing aspects.
+ */
+export interface MotionTransition {
+    /** Duration in seconds */
+    duration?: number;
+    /** Delay before animation starts in seconds */
+    delay?: number;
+    /** Easing function or curve */
+    ease?: string | number[];
+    /** Type of animation (tween, spring, inertia) */
+    type?: "tween" | "spring" | "inertia";
+    /** Spring stiffness (for spring type) */
+    stiffness?: number;
+    /** Spring damping (for spring type) */
+    damping?: number;
+    /** Spring mass (for spring type) */
+    mass?: number;
+    /** Number of times to repeat (-1 for infinite) */
+    repeat?: number;
+    /** Type of repeat behavior */
+    repeatType?: "loop" | "reverse" | "mirror";
+    /** Delay between repeats */
+    repeatDelay?: number;
+}
+/**
+ * Options for creating reduced motion props.
+ *
+ * @ai-hint Use these options to customize how motion props are transformed
+ * when reduced motion is preferred.
+ */
+export interface ReducedMotionOptions {
+    /**
+     * Whether to preserve opacity transitions even in reduced motion mode.
+     * Opacity changes are generally considered acceptable for accessibility.
+     * @default true
+     */
+    preserveOpacity?: boolean;
+    /**
+     * Whether to preserve color transitions in reduced motion mode.
+     * Color changes without movement are typically accessibility-safe.
+     * @default true
+     */
+    preserveColors?: boolean;
+    /**
+     * Custom transition to use when reduced motion is preferred.
+     * If not provided, uses instant transition (duration: 0).
+     */
+    reducedTransition?: MotionTransition;
+}
+/**
+ * Media query string for detecting reduced motion preference.
+ *
+ * @ai-hint Use this constant when you need to directly query the media feature
+ * outside of the provided hooks.
+ */
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/**
+ * Default transition for reduced motion mode.
+ * Provides instant transitions without animation.
+ *
+ * @ai-hint This transition effectively disables animation while still
+ * allowing the final state to be applied immediately.
+ */
+export declare const INSTANT_TRANSITION: MotionTransition;
+/**
+ * Hook that returns whether the user prefers reduced motion.
+ *
+ * @ai-hint This hook reactively tracks the `prefers-reduced-motion` media query.
+ * It updates automatically when the user changes their system preference.
+ * Use this hook to conditionally apply or skip animations.
+ *
+ * @returns `true` if the user prefers reduced motion, `false` otherwise
+ *
+ * @example
+ * ```tsx
+ * function AnimatedComponent() {
+ *     const prefersReducedMotion = useReducedMotion();
+ *
+ *     return (
+ *         <motion.div
+ *             animate={{ x: 100 }}
+ *             transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.5 }}
+ *         >
+ *             Content
+ *         </motion.div>
+ *     );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Skip animation entirely when reduced motion is preferred
+ * function FadeInComponent({ children }: { children: React.ReactNode }) {
+ *     const prefersReducedMotion = useReducedMotion();
+ *
+ *     if (prefersReducedMotion) {
+ *         return <div>{children}</div>;
+ *     }
+ *
+ *     return (
+ *         <motion.div
+ *             initial={{ opacity: 0 }}
+ *             animate={{ opacity: 1 }}
+ *             transition={{ duration: 0.3 }}
+ *         >
+ *             {children}
+ *         </motion.div>
+ *     );
+ * }
+ * ```
+ */
+export declare function useReducedMotion(): boolean;
+/**
+ * Returns the appropriate variant based on reduced motion preference.
+ *
+ * @ai-hint Use this function to provide alternative animation variants for users
+ * who prefer reduced motion. The reduced variant should avoid or minimize
+ * movement-based animations while potentially preserving opacity/color changes.
+ *
+ * @param normalVariant - The variant to use when motion is allowed
+ * @param reducedVariant - The variant to use when reduced motion is preferred
+ * @returns The appropriate variant based on the current reduced motion preference
+ *
+ * @example
+ * ```tsx
+ * function SlideInCard() {
+ *     const prefersReducedMotion = useReducedMotion();
+ *
+ *     const normalVariant = {
+ *         hidden: { x: -100, opacity: 0 },
+ *         visible: { x: 0, opacity: 1 },
+ *     };
+ *
+ *     const reducedVariant = {
+ *         hidden: { opacity: 0 },
+ *         visible: { opacity: 1 },
+ *     };
+ *
+ *     const variants = getReducedMotionVariant(
+ *         normalVariant,
+ *         reducedVariant,
+ *         prefersReducedMotion
+ *     );
+ *
+ *     return (
+ *         <motion.div
+ *             variants={variants}
+ *             initial="hidden"
+ *             animate="visible"
+ *         >
+ *             Card Content
+ *         </motion.div>
+ *     );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using with a hook for reactive updates
+ * function AnimatedList({ items }: { items: string[] }) {
+ *     const prefersReducedMotion = useReducedMotion();
+ *
+ *     const itemVariant = getReducedMotionVariant(
+ *         { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1 } },
+ *         { hidden: { opacity: 0 }, visible: { opacity: 1 } },
+ *         prefersReducedMotion
+ *     );
+ *
+ *     return (
+ *         <motion.ul>
+ *             {items.map((item, i) => (
+ *                 <motion.li
+ *                     key={item}
+ *                     variants={itemVariant}
+ *                     initial="hidden"
+ *                     animate="visible"
+ *                     transition={{ delay: i * 0.1 }}
+ *                 >
+ *                     {item}
+ *                 </motion.li>
+ *             ))}
+ *         </motion.ul>
+ *     );
+ * }
+ * ```
+ */
+export declare function getReducedMotionVariant<T extends MotionVariant | Record<string, MotionVariant>>(normalVariant: T, reducedVariant: T, prefersReducedMotion: boolean): T;
+/**
+ * Wraps Motion props to respect the user's reduced motion preference.
+ *
+ * @ai-hint This function transforms Motion component props to be accessibility-friendly.
+ * When reduced motion is preferred, it either disables animations or preserves
+ * only safe properties (like opacity) based on the options provided.
+ *
+ * @param props - The original Motion props
+ * @param prefersReducedMotion - Whether reduced motion is preferred
+ * @param options - Options for customizing reduced motion behavior
+ * @returns Transformed props that respect reduced motion preference
+ *
+ * @example
+ * ```tsx
+ * function AccessibleMotionDiv({ children }: { children: React.ReactNode }) {
+ *     const prefersReducedMotion = useReducedMotion();
+ *
+ *     const baseProps: MotionProps = {
+ *         initial: { x: -50, opacity: 0 },
+ *         animate: { x: 0, opacity: 1 },
+ *         transition: { duration: 0.5 },
+ *     };
+ *
+ *     const accessibleProps = createReducedMotionProps(
+ *         baseProps,
+ *         prefersReducedMotion
+ *     );
+ *
+ *     return <motion.div {...accessibleProps}>{children}</motion.div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Preserve opacity transitions in reduced motion mode
+ * function FadeSlideComponent() {
+ *     const prefersReducedMotion = useReducedMotion();
+ *
+ *     const props = createReducedMotionProps(
+ *         {
+ *             initial: { y: 20, opacity: 0 },
+ *             animate: { y: 0, opacity: 1 },
+ *             transition: { duration: 0.3 },
+ *         },
+ *         prefersReducedMotion,
+ *         { preserveOpacity: true }
+ *     );
+ *
+ *     // In reduced motion: only opacity animates, y is instant
+ *     return <motion.div {...props}>Content</motion.div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom reduced transition
+ * function CustomReducedMotion() {
+ *     const prefersReducedMotion = useReducedMotion();
+ *
+ *     const props = createReducedMotionProps(
+ *         {
+ *             animate: { scale: 1.1 },
+ *             transition: { duration: 0.5 },
+ *         },
+ *         prefersReducedMotion,
+ *         {
+ *             reducedTransition: { duration: 0.1, ease: "linear" },
+ *         }
+ *     );
+ *
+ *     return <motion.button {...props}>Hover me</motion.button>;
+ * }
+ * ```
+ */
+export declare function createReducedMotionProps(props: MotionProps, prefersReducedMotion: boolean, options?: ReducedMotionOptions): MotionProps;
+/**
+ * Checks if reduced motion is preferred (non-reactive, for one-time checks).
+ *
+ * @ai-hint Use this function for one-time checks outside of React components.
+ * For reactive behavior within components, prefer the `useReducedMotion` hook.
+ *
+ * @returns `true` if reduced motion is preferred, `false` otherwise (including SSR)
+ *
+ * @example
+ * ```ts
+ * // In a utility function
+ * function getAnimationDuration(baseDuration: number): number {
+ *     if (checkReducedMotion()) {
+ *         return 0;
+ *     }
+ *     return baseDuration;
+ * }
+ * ```
+ */
+export declare function checkReducedMotion(): boolean;
+//# sourceMappingURL=reduced-motion.d.ts.map

package/dist/utils/reduced-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduced-motion.d.ts","sourceRoot":"","sources":["../../src/utils/reduced-motion.ts"],"names":[],"mappings":"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"}