import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { bem } from "../utils/bem.js";
const styles = bem("rmd-slide-container");
/**
 * @see {@link useSlideTransition} for an example
 * @remarks \@since 6.0.0
 */ export function slideContainer(options) {
    const { className, direction } = options;
    return cnb(styles({
        [direction]: true
    }), className);
}
/**
 * **Server Component**
 * This is a server component, but generally relies on state so probably a client component.
 *
 * @example
 * Simple Example
 * ```tsx
 * import { SlideContainer, Slide } from "@react-md/core";
 * 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: "left",
 *     activeIndex: 0,
 *   });
 *   const { direction, activeIndex } = state;
 *
 *   // when changing a slide, `direction` should be set to "left" if the
 *   // previous `activeIndex` is less than the next index
 *   //
 *   // i.e.
 *   // setState((prevState) => ({
 *   //   direction: prevState.activeIndex < index ? "left" : "right",
 *   //   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>
 *   );
 * }
 * ```
 *
 * @example
 * Persistent Slides
 * ```tsx
 * import type { SlideDirection } from "@react-md/core";
 * import { SlideContainer, Slide } from "@react-md/core";
 * 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: "left",
 *     activeIndex: 0,
 *   });
 *   const { direction, activeIndex } = state;
 *
 *   // when changing a slide, `direction` should be set to "left" if the
 *   // previous `activeIndex` is less than the next index
 *   //
 *   // i.e.
 *   // setState((prevState) => ({
 *   //   direction: prevState.activeIndex < index ? "left" : "right",
 *   //   activeIndex: index,
 *   // }))
 *
 *   // enabling `persistent` makes it so that the `<Slide>` never unmounts so
 *   // that state can be maintained while it is not active.
 *   return (
 *     <SlideContainer direction={direction}>
 *       <Slide active={activeIndex === 0} persistent>
 *         Slide 1
 *       </Slide>
 *       <Slide active={activeIndex === 1} persistent>
 *         Slide 2
 *       </Slide>
 *       <Slide active={activeIndex === 2} persistent>
 *         Slide 3
 *       </Slide>
 *     </SlideContainer>
 *   );
 * }
 * ```
 *
 * @remarks \@since 6.0.0
 */ export const SlideContainer = /*#__PURE__*/ forwardRef(function SlideContainer(props, ref) {
    const { className, direction, children, ...remaining } = props;
    return /*#__PURE__*/ _jsx("div", {
        ...remaining,
        ref: ref,
        className: slideContainer({
            className,
            direction
        }),
        children: children
    });
});

//# sourceMappingURL=SlideContainer.js.map