import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { windowSplitter } from "./styles.js";
/**
 * The `WindowSplitter` should be used with the `useWindowSplitter` hook to
 * resize parts of a layout.
 *
 * See the `useResizableLayout` hook if the entire page layout should be
 * resizable.
 *
 * @example Simple Example
 * ```tsx
 * "use client";
 * import { WindowSplitter } from "@react-md/core/window-splitter/WindowSplitter";
 * import { useWindowSplitter } from "@react-md/core/window-splitter/useWindowSplitter";
 * import { useId, type ReactElement } from "react";
 *
 * export function Example(): ReactElement {
 *   const panelId = useId();
 *   const { value, splitterProps } = useWindowSplitter({
 *     min: 120,
 *     max: 380,
 *   });
 *
 *   return (
 *     <div
 *       style={{
 *         "--rmd-window-splitter-position": `${value}px`,
 *         display: "grid",
 *         gridTemplateColumns: "var(--rmd-window-splitter-position, 120px) 1fr",
 *       }}
 *     >
 *       <div>Panel 1</div>
 *       <WindowSplitter
 *         {...splitterProps}
 *         aria-controls={panelId}
 *         aria-labelledby={panelId}
 *       />
 *       <div>Panel 2</div>
 *     </div>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}
 * @since 6.0.0
 */ export const WindowSplitter = /*#__PURE__*/ forwardRef(function WindowSplitter(props, ref) {
    const { role = "separator", className, dragging, reversed, disableFixed, inactiveBackground, ...remaining } = props;
    const vertical = props["aria-orientation"] === "vertical";
    return /*#__PURE__*/ _jsx("button", {
        ...remaining,
        ref: ref,
        type: "button",
        role: role,
        className: windowSplitter({
            className,
            reversed,
            dragging,
            vertical,
            disableFixed,
            inactiveBackground
        })
    });
});

//# sourceMappingURL=WindowSplitter.js.map