"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Dialog } from "../dialog/Dialog.js";
import { DEFAULT_SHEET_CLASSNAMES, DEFAULT_SHEET_TIMEOUT, sheet } from "./styles.js";
/**
 * **Client Component**
 *
 * The `Sheet` component is a {@link Dialog} that is fixed to the top, right,
 * bottom, or left of the viewport.
 *
 * @example Simple Example
 * ```tsx
 * import { Button } from "@react-md/core/button/Button";
 * import { Sheet } from "@react-md/core/sheet/Sheet";
 * import { useToggle } from "@react-md/core/useToggle";
 * import { type ReactElement } from "react";
 *
 * export function Example(): ReactElement {
 *   const { toggled, disable, enable } = useToggle();
 *
 *   return (
 *     <>
 *       <Button onClick={enable}>Show</Button>
 *       <Sheet aria-label="Customization" visible={toggled} onRequestClose={disable}>
 *         Whatever Content
 *       </Sheet>
 *     </>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/sheet | Sheet Demos}
 */ export const Sheet = /*#__PURE__*/ forwardRef(function Sheet(props, ref) {
    const { role = "dialog", className, position = "left", horizontalSize = "media", verticalSize = "recommended", timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, visible, temporary = true, exitedHidden = true, raised, children, ...remaining } = props;
    const { disableOverlay } = props;
    return /*#__PURE__*/ _jsx(Dialog, {
        ...remaining,
        ref: ref,
        role: role,
        type: "custom",
        timeout: timeout,
        classNames: classNames,
        visible: visible,
        temporary: temporary,
        exitedHidden: exitedHidden,
        className: sheet({
            raised: raised ?? !disableOverlay,
            position,
            horizontalSize,
            verticalSize,
            className
        }),
        children: children
    });
});

//# sourceMappingURL=Sheet.js.map