"use client";
import { useCSSTransition } from "./useCSSTransition.js";
/**
 * The default cross fade transition classes to use.
 *
 * @since 2.0.0
 */ export const CROSS_FADE_CLASSNAMES = {
    appear: "rmd-cross-fade",
    appearActive: "rmd-cross-fade--active",
    enter: "rmd-cross-fade",
    enterActive: "rmd-cross-fade--active"
};
/**
 * The default cross fade transition timeout.
 *
 * @since 2.0.0
 */ export const CROSS_FADE_TIMEOUT = {
    appear: 300,
    enter: 300,
    exit: 0
};
/**
 * This hook is used to create a "cross fade" transition -- a transition that
 * gradually increases the opacity and transforms the element vertically a short
 * distance. This is generally used for full page transitions when a route
 * changes.
 *
 * @example New Page Transition with the Layout component
 * ```tsx
 * import { ReactElement, ReactNode, useLayoutEffect } from "react";
 * import { useLocation } from "react-router-dom":
 * import { Layout, useCrossFadeTransition, useLayoutNavigation } from "@react-md/core";
 *
 * import { navItems } from "./navItems";
 *
 * interface ExampleProps {
 *   children: ReactNode;
 * }
 *
 * function Example({ children }: ExampleProps): ReactElement {
 *   const { pathname } = useLocation();
 *   const { elementProps, transitionTo } = useCrossFadeTransition();
 *
 *   const prevPathname = useRef(pathname);
 *   useLayoutEffect(() => {
 *     if (prevPathname.current === pathname) {
 *       return
 *     }
 *
 *     prevPathname.current = pathname;
 *     transitionTo('enter');
 *   }, [pathname, transitionTo])
 *
 *   return (
 *     <Layout
 *       {...useLayoutNavigation(navItems, pathname)}
 *       appBarTitle="My App"
 *       mainProps={elementProps}
 *     >
 *       {children}
 *     </Layout>
 *   );
 * }
 * ```
 *
 * @typeParam E - An HTMLElement type used for the ref required for the
 * transition.
 * @since 4.0.0
 */ export function useCrossFadeTransition(options = {}) {
    const { appear = false, transitionIn = true, timeout = CROSS_FADE_TIMEOUT, classNames = CROSS_FADE_CLASSNAMES, ...cssOptions } = options;
    return useCSSTransition({
        ...cssOptions,
        appear,
        timeout,
        classNames,
        transitionIn
    });
}

//# sourceMappingURL=useCrossFadeTransition.js.map