@enact-ui/animate 0.1.0 → 0.2.0

package/dist/components/MotionDiv.js

@@ -0,0 +1,162 @@
+// Copyright (c) 2026 Amsterdam Data Labs
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * MotionDiv Component
+ *
+ * A typed wrapper around motion.div that integrates with the preset system.
+ * Provides a convenient way to apply animation presets without manually
+ * spreading props.
+ *
+ * @packageDocumentation
+ */
+import { motion } from "motion/react";
+import { useComponentAnimation } from "../hooks/use-component-animation";
+// =============================================================================
+// MotionDiv Component
+// =============================================================================
+/**
+ * A motion.div wrapper that integrates with animation presets.
+ *
+ * This component simplifies the use of animation presets by handling
+ * the hook usage internally and providing a clean component API.
+ *
+ * Note: This component requires motion/react to be installed.
+ * It's a convenience wrapper that re-exports motion.div with preset support.
+ *
+ * @ai-hint Use MotionDiv when you want a simple way to animate a div
+ * with a preset. For more control, use useComponentAnimation directly.
+ *
+ * @example
+ * ```tsx
+ * import { MotionDiv, fadeIn } from "@enact-ui/animate";
+ *
+ * function AnimatedCard() {
+ *   return (
+ *     <MotionDiv preset={fadeIn} motionStyle="standard">
+ *       <Card>Content</Card>
+ *     </MotionDiv>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom options
+ * <MotionDiv
+ *   preset={slideUp}
+ *   motionStyle="bold"
+ *   presetOptions={{ distance: 40, delay: 100 }}
+ *   className="my-class"
+ * >
+ *   Content
+ * </MotionDiv>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With AnimatePresence for exit animations
+ * import { AnimatePresence } from "motion/react";
+ *
+ * function Modal({ isOpen }) {
+ *   return (
+ *     <AnimatePresence>
+ *       {isOpen && (
+ *         <MotionDiv preset={scale} motionStyle="standard">
+ *           Modal content
+ *         </MotionDiv>
+ *       )}
+ *     </AnimatePresence>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With separate exit animation
+ * <MotionDiv preset={slideUp} exit={fadeOut}>
+ *   Content that slides up on enter, fades out on exit
+ * </MotionDiv>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Polymorphic - render as semantic HTML element
+ * <MotionDiv preset={fadeIn} as="section" className="my-section">
+ *   <h2>Section Title</h2>
+ *   <p>Section content...</p>
+ * </MotionDiv>
+ * ```
+ */
+export function MotionDiv({ preset, exit: exitPreset, as = "div", motionStyle = "standard", presetOptions, enabled = true, skipInitial = false, children, ...motionProps }) {
+    const animation = useComponentAnimation(preset, motionStyle, {
+        ...presetOptions,
+        enabled,
+        skipInitial,
+    });
+    // Get exit animation if a separate exit preset is provided
+    // Validate that exitPreset is actually a ComponentPreset with getProps method
+    const exitAnimation = exitPreset && typeof exitPreset === "object" && "getProps" in exitPreset && typeof exitPreset.getProps === "function"
+        ? exitPreset.getProps(motionStyle, presetOptions)
+        : null;
+    // Extract animation props without metadata
+    const { prefersReducedMotion, isEnabled, ...animationProps } = animation;
+    // Build exit props - use separate exit preset's initial state as exit animation
+    // (exit animations typically reverse the enter animation)
+    const exitValue = exitAnimation ? exitAnimation.initial : undefined;
+    // Get the motion component for the specified element
+    const MotionComponent = motion[as];
+    // Build props object, conditionally including exit.
+    // Cast to motion.div props so exit (ExitPropType) is accepted with exactOptionalPropertyTypes.
+    const finalProps = {
+        ...motionProps,
+        ...animationProps,
+        ...(exitValue !== undefined && { exit: exitValue }),
+        "data-reduced-motion": prefersReducedMotion,
+        "data-animation-enabled": isEnabled,
+    };
+    return _jsx(MotionComponent, { ...finalProps, children: children });
+}
+/**
+ * Factory function to create motion props from a preset.
+ *
+ * Use this when you need the animation props without a component wrapper.
+ * This is useful when you want to spread props onto your own motion element.
+ *
+ * @param preset - The animation preset
+ * @param style - Motion style
+ * @param options - Preset options
+ * @returns Props object to spread on motion.div
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { createMotionProps, fadeIn } from "@enact-ui/animate";
+ *
+ * function MyComponent() {
+ *   const props = createMotionProps(fadeIn, "standard");
+ *
+ *   return (
+ *     <motion.div {...props}>
+ *       Content
+ *     </motion.div>
+ *   );
+ * }
+ * ```
+ */
+export function createMotionProps(preset, style = "standard", options) {
+    return preset.getProps(style, options);
+}
+/**
+ * Alias for createMotionProps. Use createMotionProps directly.
+ *
+ * @param preset - The animation preset
+ * @param style - Motion style
+ * @param options - Preset options
+ * @returns Props object to spread on motion.div
+ */
+export function createAccessibleMotionProps(preset, style = "standard", options) {
+    return preset.getProps(style, options);
+}
+export default MotionDiv;
+//# sourceMappingURL=MotionDiv.js.map

package/dist/components/MotionDiv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MotionDiv.js","sourceRoot":"","sources":["../../src/components/MotionDiv.tsx"],"names":[],"mappings":"AAAA,yCAAyC;AAEzC,YAAY,CAAC;;AAEb;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAkDzE,gFAAgF;AAChF,sBAAsB;AACtB,gFAAgF;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,MAAM,EACN,IAAI,EAAE,UAAU,EAChB,EAAE,GAAG,KAAK,EACV,WAAW,GAAG,UAAU,EACxB,aAAa,EACb,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,GAAG,WAAW,EACD;IACb,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE,WAAW,EAAE;QACzD,GAAG,aAAa;QAChB,OAAO;QACP,WAAW;KACd,CAAC,CAAC;IAEH,2DAA2D;IAC3D,8EAA8E;IAC9E,MAAM,aAAa,GACf,UAAU,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,IAAI,UAAU,IAAI,OAAO,UAAU,CAAC,QAAQ,KAAK,UAAU;QACjH,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,WAAW,EAAE,aAAa,CAAC;QACjD,CAAC,CAAC,IAAI,CAAC;IAEf,2CAA2C;IAC3C,MAAM,EAAE,oBAAoB,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,GAAG,SAAS,CAAC;IAEzE,gFAAgF;IAChF,0DAA0D;IAC1D,MAAM,SAAS,GAA6B,aAAa,CAAC,CAAC,CAAE,aAAa,CAAC,OAAwB,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhH,qDAAqD;IACrD,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAsB,CAAC;IAExD,oDAAoD;IACpD,+FAA+F;IAC/F,MAAM,UAAU,GAAG;QACf,GAAG,WAAW;QACd,GAAI,cAAmD;QACvD,GAAG,CAAC,SAAS,KAAK,SAAS,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;QACnD,qBAAqB,EAAE,oBAAoB;QAC3C,wBAAwB,EAAE,SAAS;KACS,CAAC;IAEjD,OAAO,KAAC,eAAe,OAAK,UAAU,YAAG,QAAQ,GAAmB,CAAC;AACzE,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,iBAAiB,CAAC,MAAuB,EAAE,QAAqB,UAAU,EAAE,OAAuB;IAC/G,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAC3C,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,2BAA2B,CAAC,MAAuB,EAAE,QAAqB,UAAU,EAAE,OAAuB;IACzH,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAC3C,CAAC;AAED,eAAe,SAAS,CAAC"}

package/dist/components/StaggerContainer.d.ts

@@ -0,0 +1,136 @@
+/**
+ * StaggerContainer Component
+ *
+ * A container component that orchestrates staggered animations for its children.
+ * Works with Motion library to provide smooth, coordinated entrance animations.
+ *
+ * @packageDocumentation
+ */
+import { type ReactElement, type ReactNode } from "react";
+import { type StaggerDirection, type StaggerOptions } from "../hooks/use-stagger";
+import type { MotionStyle } from "../presets/motion-styles";
+/**
+ * Props for the StaggerContainer component.
+ */
+export interface StaggerContainerProps {
+    /** The child elements to animate */
+    children: ReactNode;
+    /** Motion style to apply */
+    style?: MotionStyle;
+    /** Stagger direction pattern */
+    direction?: StaggerDirection;
+    /** Custom delay between items in ms */
+    delay?: number;
+    /** Maximum total delay in ms */
+    maxDelay?: number;
+    /** Use spring physics for item animations */
+    useSpring?: boolean;
+    /** Custom delay function */
+    getDelay?: (index: number, total: number) => number;
+    /** Additional class name for the container */
+    className?: string;
+    /** HTML element to render as (default: div) */
+    as?: "div" | "ul" | "ol" | "section" | "article" | "nav";
+    /** Whether to animate (useful for conditional rendering) */
+    animate?: boolean;
+    /** Callback when all animations complete */
+    onAnimationComplete?: () => void;
+}
+/**
+ * Container component that orchestrates staggered animations.
+ *
+ * Wraps children in a motion container that coordinates their entrance
+ * animations using the Motion library's variants system.
+ *
+ * @ai-hint Use StaggerContainer when you have a list or grid of items
+ * that should animate in sequence. Works with any motion.* children.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { StaggerContainer } from "@enact-ui/animate";
+ *
+ * function AnimatedCards({ cards }) {
+ *   return (
+ *     <StaggerContainer style="standard" direction="forward">
+ *       {cards.map((card) => (
+ *         <motion.div key={card.id}>
+ *           <Card {...card} />
+ *         </motion.div>
+ *       ))}
+ *     </StaggerContainer>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Center-out animation pattern
+ * <StaggerContainer
+ *   style="bold"
+ *   direction="center"
+ *   delay={80}
+ * >
+ *   {items.map((item) => (
+ *     <motion.li key={item.id}>{item.name}</motion.li>
+ *   ))}
+ * </StaggerContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // As a navigation menu
+ * <StaggerContainer
+ *   as="nav"
+ *   style="subtle"
+ *   direction="forward"
+ *   delay={30}
+ * >
+ *   {menuItems.map((item) => (
+ *     <motion.a key={item.href} href={item.href}>
+ *       {item.label}
+ *     </motion.a>
+ *   ))}
+ * </StaggerContainer>
+ * ```
+ */
+export declare function StaggerContainer({ children, style, direction, delay, maxDelay, useSpring, getDelay, className, as: Element, animate, }: StaggerContainerProps): ReactElement;
+/**
+ * Props for items in a stagger list.
+ */
+export interface StaggerListItemProps {
+    /** Index of the item in the list */
+    index: number;
+    /** Style configuration */
+    style: MotionStyle;
+    /** Stagger options */
+    options: StaggerOptions;
+}
+/**
+ * Higher-order component for creating custom stagger containers.
+ *
+ * @param WrappedComponent - The list container component
+ * @returns A stagger-enabled version of the component
+ *
+ * @example
+ * ```tsx
+ * const StaggeredGrid = withStagger(Grid);
+ *
+ * function MyGrid({ items }) {
+ *   return (
+ *     <StaggeredGrid style="playful" direction="center">
+ *       {items.map((item, index) => (
+ *         <GridItem key={item.id} index={index}>
+ *           {item.content}
+ *         </GridItem>
+ *       ))}
+ *     </StaggeredGrid>
+ *   );
+ * }
+ * ```
+ */
+export declare function withStagger<P extends {
+    children?: ReactNode;
+}>(WrappedComponent: React.ComponentType<P>): React.FC<P & Pick<StaggerContainerProps, "style" | "direction" | "delay" | "maxDelay" | "useSpring" | "getDelay">>;
+export default StaggerContainer;
+//# sourceMappingURL=StaggerContainer.d.ts.map

package/dist/components/StaggerContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaggerContainer.d.ts","sourceRoot":"","sources":["../../src/components/StaggerContainer.tsx"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAA0C,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,EAAqB,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAc,MAAM,sBAAsB,CAAC;AACjH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAM5D;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAClC,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpD,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC;IACzD,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AA8CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,QAAQ,EACR,KAAkB,EAClB,SAAqB,EACrB,KAAK,EACL,QAAe,EACf,SAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAe,EACnB,OAAc,GACjB,EAAE,qBAAqB,GAAG,YAAY,CAwCtC;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACjC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,sBAAsB;IACtB,OAAO,EAAE,cAAc,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,EAC1D,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GACzC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC,CAwBpH;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/StaggerContainer.js

@@ -0,0 +1,166 @@
+// Copyright (c) 2026 Amsterdam Data Labs
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * StaggerContainer Component
+ *
+ * A container component that orchestrates staggered animations for its children.
+ * Works with Motion library to provide smooth, coordinated entrance animations.
+ *
+ * @packageDocumentation
+ */
+import { Children, cloneElement, isValidElement } from "react";
+import { useStagger } from "../hooks/use-stagger";
+// =============================================================================
+// StaggerItem Component
+// =============================================================================
+/**
+ * Internal component that wraps each child with animation props.
+ * This is used to inject the stagger animation without requiring
+ * motion.* wrapper elements in the child components.
+ */
+function StaggerItem({ children, index, variants }) {
+    // Clone the child element and add motion props
+    // The child must be a motion.* element for this to work
+    if (!isValidElement(children)) {
+        return children;
+    }
+    // Cast to any because motion props aren't in standard React element types
+    const motionProps = {
+        variants,
+        custom: index,
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+    };
+    return cloneElement(children, motionProps);
+}
+// =============================================================================
+// StaggerContainer Component
+// =============================================================================
+/**
+ * Container component that orchestrates staggered animations.
+ *
+ * Wraps children in a motion container that coordinates their entrance
+ * animations using the Motion library's variants system.
+ *
+ * @ai-hint Use StaggerContainer when you have a list or grid of items
+ * that should animate in sequence. Works with any motion.* children.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { StaggerContainer } from "@enact-ui/animate";
+ *
+ * function AnimatedCards({ cards }) {
+ *   return (
+ *     <StaggerContainer style="standard" direction="forward">
+ *       {cards.map((card) => (
+ *         <motion.div key={card.id}>
+ *           <Card {...card} />
+ *         </motion.div>
+ *       ))}
+ *     </StaggerContainer>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Center-out animation pattern
+ * <StaggerContainer
+ *   style="bold"
+ *   direction="center"
+ *   delay={80}
+ * >
+ *   {items.map((item) => (
+ *     <motion.li key={item.id}>{item.name}</motion.li>
+ *   ))}
+ * </StaggerContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // As a navigation menu
+ * <StaggerContainer
+ *   as="nav"
+ *   style="subtle"
+ *   direction="forward"
+ *   delay={30}
+ * >
+ *   {menuItems.map((item) => (
+ *     <motion.a key={item.href} href={item.href}>
+ *       {item.label}
+ *     </motion.a>
+ *   ))}
+ * </StaggerContainer>
+ * ```
+ */
+export function StaggerContainer({ children, style = "standard", direction = "forward", delay, maxDelay = 1000, useSpring = true, getDelay, className, as: Element = "div", animate = true, }) {
+    // Count children for stagger calculations
+    const childArray = Children.toArray(children);
+    const totalItems = childArray.length;
+    // Configure stagger options - filter out undefined values
+    const staggerOptions = {
+        direction,
+        totalItems,
+        ...(delay !== undefined && { delayMultiplier: delay }),
+        maxDelay,
+        useSpring,
+        ...(getDelay !== undefined && { getDelay }),
+    };
+    // Get stagger configuration
+    const { itemVariants } = useStagger(style, staggerOptions);
+    // If animation is disabled, render without motion
+    if (!animate) {
+        return _jsx(Element, { className: className, children: children });
+    }
+    // We need to import motion dynamically or expect it to be used with motion elements
+    // For now, we'll render a regular element and expect children to be motion elements
+    return (_jsx(Element, { className: className, children: childArray.map((child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return (_jsx(StaggerItem, { index: index, variants: itemVariants, children: child }, child.key ?? index));
+        }) }));
+}
+/**
+ * Higher-order component for creating custom stagger containers.
+ *
+ * @param WrappedComponent - The list container component
+ * @returns A stagger-enabled version of the component
+ *
+ * @example
+ * ```tsx
+ * const StaggeredGrid = withStagger(Grid);
+ *
+ * function MyGrid({ items }) {
+ *   return (
+ *     <StaggeredGrid style="playful" direction="center">
+ *       {items.map((item, index) => (
+ *         <GridItem key={item.id} index={index}>
+ *           {item.content}
+ *         </GridItem>
+ *       ))}
+ *     </StaggeredGrid>
+ *   );
+ * }
+ * ```
+ */
+export function withStagger(WrappedComponent) {
+    return function StaggerWrapper({ style = "standard", direction = "forward", delay, maxDelay, useSpring, getDelay, children, ...props }) {
+        // Build props object with only defined values
+        const staggerProps = {
+            children: _jsx(WrappedComponent, { ...props, children: children }),
+            style,
+            direction,
+            ...(delay !== undefined && { delay }),
+            ...(maxDelay !== undefined && { maxDelay }),
+            ...(useSpring !== undefined && { useSpring }),
+            ...(getDelay !== undefined && { getDelay }),
+        };
+        return _jsx(StaggerContainer, { ...staggerProps });
+    };
+}
+export default StaggerContainer;
+//# sourceMappingURL=StaggerContainer.js.map

package/dist/components/StaggerContainer.js.map

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

package/dist/hooks/use-component-animation.d.ts

@@ -0,0 +1,156 @@
+import type { ComponentAnimationProps, ComponentPreset, PresetOptions } from "../presets/component-presets";
+import type { MotionStyle } from "../presets/motion-styles";
+/**
+ * Options for the useComponentAnimation hook.
+ */
+export interface UseComponentAnimationOptions extends PresetOptions {
+    /** Whether the animation is enabled. Defaults to true. */
+    enabled?: boolean;
+    /** Whether to skip the initial animation. Useful for SSR. */
+    skipInitial?: boolean;
+}
+/**
+ * Return type for the useComponentAnimation hook.
+ */
+export interface ComponentAnimationResult extends ComponentAnimationProps {
+    /** Whether reduced motion is preferred by the user */
+    prefersReducedMotion: boolean;
+    /** Whether the animation is enabled */
+    isEnabled: boolean;
+}
+/**
+ * Hook to detect if user prefers reduced motion.
+ * Updates reactively when the preference changes.
+ */
+declare function useReducedMotion(): boolean;
+/**
+ * Hook for applying component animation presets.
+ *
+ * Provides Motion library compatible animation props that:
+ * - Apply the selected motion style (subtle, standard, bold, playful)
+ * - Support customization via options
+ *
+ * @param preset - The component animation preset to use
+ * @param style - The motion style to apply (defaults to "standard")
+ * @param options - Additional customization options
+ * @returns Animation props for Motion library components
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { useComponentAnimation, fadeIn } from "@enact-ui/animate";
+ *
+ * function MyComponent() {
+ *   const animation = useComponentAnimation(fadeIn, "standard");
+ *
+ *   return (
+ *     <motion.div {...animation}>
+ *       Content
+ *     </motion.div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With AnimatePresence for exit animations
+ * import { AnimatePresence, motion } from "motion/react";
+ * import { useComponentAnimation, slideUp } from "@enact-ui/animate";
+ *
+ * function Modal({ isOpen, children }) {
+ *   const animation = useComponentAnimation(slideUp, "bold");
+ *
+ *   return (
+ *     <AnimatePresence>
+ *       {isOpen && (
+ *         <motion.div {...animation}>
+ *           {children}
+ *         </motion.div>
+ *       )}
+ *     </AnimatePresence>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom options
+ * const animation = useComponentAnimation(slideUp, "playful", {
+ *   distance: 40,
+ *   delay: 100,
+ *   useSpring: true,
+ * });
+ * ```
+ */
+export declare function useComponentAnimation(preset: ComponentPreset, style?: MotionStyle, options?: UseComponentAnimationOptions): ComponentAnimationResult;
+/**
+ * Hook for applying animation props with a delay.
+ *
+ * Useful for staggering animations without using variants.
+ *
+ * @param preset - The component animation preset to use
+ * @param style - The motion style to apply
+ * @param index - The index of this item (for calculating delay)
+ * @param options - Additional customization options
+ * @returns Animation props with calculated delay
+ *
+ * @example
+ * ```tsx
+ * function ListItem({ index, children }) {
+ *   const animation = useDelayedAnimation(fadeIn, "standard", index, {
+ *     delayMultiplier: 50, // 50ms between each item
+ *   });
+ *
+ *   return (
+ *     <motion.li {...animation}>
+ *       {children}
+ *     </motion.li>
+ *   );
+ * }
+ * ```
+ */
+export declare function useDelayedAnimation(preset: ComponentPreset, style: MotionStyle | undefined, index: number, options?: UseComponentAnimationOptions & {
+    /** Delay multiplier per item in ms. Defaults to 50. */
+    delayMultiplier?: number;
+    /** Maximum delay in ms. Defaults to 500. */
+    maxDelay?: number;
+}): ComponentAnimationResult;
+/**
+ * Hook that returns animation props as a function for use with variants.
+ *
+ * Useful when you need to pass animation config to Motion's variants system.
+ *
+ * @param preset - The component animation preset to use
+ * @param style - The motion style to apply
+ * @param options - Additional customization options
+ * @returns Object containing variants and transition
+ *
+ * @example
+ * ```tsx
+ * function Container({ children }) {
+ *   const { variants, transition } = useAnimationVariants(fadeIn, "standard");
+ *
+ *   return (
+ *     <motion.div
+ *       initial="initial"
+ *       animate="animate"
+ *       exit="exit"
+ *       variants={variants}
+ *       transition={transition}
+ *     >
+ *       {children}
+ *     </motion.div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useAnimationVariants(preset: ComponentPreset, style?: MotionStyle, options?: UseComponentAnimationOptions): {
+    variants: {
+        initial: Record<string, unknown>;
+        animate: Record<string, unknown>;
+        exit: Record<string, unknown>;
+    };
+    transition: Record<string, unknown>;
+};
+export { useReducedMotion };
+//# sourceMappingURL=use-component-animation.d.ts.map

package/dist/hooks/use-component-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-component-animation.d.ts","sourceRoot":"","sources":["../../src/hooks/use-component-animation.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC5G,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAM5D;;GAEG;AACH,MAAM,WAAW,4BAA6B,SAAQ,aAAa;IAC/D,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,uBAAuB;IACrE,sDAAsD;IACtD,oBAAoB,EAAE,OAAO,CAAC;IAC9B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;CACtB;AAMD;;;GAGG;AACH,iBAAS,gBAAgB,IAAI,OAAO,CAmBnC;AAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,wBAAgB,qBAAqB,CACjC,MAAM,EAAE,eAAe,EACvB,KAAK,GAAE,WAAwB,EAC/B,OAAO,GAAE,4BAAiC,GAC3C,wBAAwB,CA8B1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAC/B,MAAM,EAAE,eAAe,EACvB,KAAK,EAAE,WAAW,YAAa,EAC/B,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,4BAA4B,GAAG;IACpC,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;CAChB,GACP,wBAAwB,CAS1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,oBAAoB,CAChC,MAAM,EAAE,eAAe,EACvB,KAAK,GAAE,WAAwB,EAC/B,OAAO,GAAE,4BAAiC,GAC3C;IACC,QAAQ,EAAE;QACN,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACjC,CAAC;IACF,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACvC,CA8BA;AAMD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}