"use client";
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { Children, cloneElement } from "react";
import { useCollapseTransition } from "./useCollapseTransition.js";
/**
 * **Client Component**
 *
 * This is a component implementation of the {@link useCollapseTransition} hook
 * that implements the `temporary` behavior. Since this component uses the
 * `React.cloneElement` to inject the `ref` and `className` into the `children`,
 * it is recommended to use the hook instead.
 *
 * @example Simple Example
 * ```tsx
 * function Example(): ReactElement {
 *   const [collapsed, setCollapsed] = useState(true);
 *
 *   return (
 *     <>
 *       <Button onClick={() => setCollapsed(!collapsed)}>
 *         Toggle
 *       </Button>
 *       <Collapse collapsed={collapsed}>
 *         <div>
 *           Some content that should only be visible while not collapsed.
 *         </div>
 *       </Collapse>
 *     </>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/collapse | Collapse Demos}
 * @see {@link useCollapseTransition} for additional examples
 * @typeParam E - An HTMLElement type used for the ref required for the
 * transition.
 * @since 2.0.0
 * @since 4.0.0 Updated for the new CSS Transition API.
 */ export function Collapse(props) {
    const { children, collapsed, className, ...options } = props;
    const child = Children.only(children);
    const { elementProps, rendered } = useCollapseTransition({
        ...options,
        className: cnb(child.props.className, className),
        transitionIn: !collapsed
    });
    return /*#__PURE__*/ _jsx(_Fragment, {
        children: rendered && /*#__PURE__*/ cloneElement(children, elementProps)
    });
}

//# sourceMappingURL=Collapse.js.map