import { type HTMLAttributes, type ReactElement, type Ref } from "react";
/**
 * @example Direction "forward"
 * ```
 *           -------------
 *           |           |
 *           |  Slide 1  |  Slide 2
 *           |           |
 *           -------------
 *           -------------
 *           |           |
 *      Slide 1     Slide 2
 *           |           |
 *           -------------
 *           -------------
 *           |           |
 *  Slide 1  |  Slide 2  |
 *           |           |
 *           -------------
 * ```
 *
 * @example Direction "backward"
 * ```
 *           -------------
 *           |           |
 *  Slide 1  |  Slide 2  |
 *           |           |
 *           -------------
 *           -------------
 *           |           |
 *      Slide 1     Slide 2
 *           |           |
 *           -------------
 *           -------------
 *           |           |
 *           |  Slide 1  |  Slide 2
 *           |           |
 *           -------------
 * ```
 *
 * @since 6.0.0
 */
export type SlideDirection = "backward" | "forward";
/** @since 6.0.0 */
export interface SlideContainerClassNameOptions {
    className?: string;
    /** @see {@link SlideDirection} */
    direction: SlideDirection;
    vertical?: boolean;
}
/**
 * @see {@link useSlideTransition} for an example
 * @since 6.0.0
 */
export declare function slideContainer(options: SlideContainerClassNameOptions): string;
/** @since 6.0.0 */
export interface SlideContainerProps extends HTMLAttributes<HTMLDivElement>, SlideContainerClassNameOptions {
    ref?: Ref<HTMLDivElement>;
}
/**
 * The `SlideContainer` is used to enable a slide transition when child `Slide`
 * components change.
 *
 * @example Simple Example
 * ```tsx
 * import { Slide } from "@react-md/core/transition/Slide";
 * import { SlideContainer } from "@react-md/core/transition/SlideContainer";
 * import type { ReactElement, ReactNode } from "react";
 * import { useState } from "react";
 *
 * interface State {
 *   direction: SlideDirection;
 *   activeIndex: number;
 * }
 *
 * function Example(): ReactElement {
 *   const [state, setState] = useState<State>({
 *     direction: "forward",
 *     activeIndex: 0,
 *   });
 *   const { direction, activeIndex } = state;
 *
 *   // when changing a slide, `direction` should be set to "forward" if the
 *   // previous `activeIndex` is less than the next index
 *   //
 *   // i.e.
 *   // setState((prevState) => ({
 *   //   direction: prevState.activeIndex < index ? "forward" : "backward",
 *   //   activeIndex: index,
 *   // }))
 *
 *   return (
 *     <SlideContainer direction={direction}>
 *       <Slide active={activeIndex === 0}>
 *         Slide 1
 *       </Slide>
 *       <Slide active={activeIndex === 1}>
 *         Slide 2
 *       </Slide>
 *       <Slide active={activeIndex === 2}>
 *         Slide 3
 *       </Slide>
 *     </SlideContainer>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/slide | Slide Demos}
 * @since 6.0.0
 */
export declare function SlideContainer(props: SlideContainerProps): ReactElement;