@flanksource/clicky-ui/dist/layout/SplitPane.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useRef, useCallback } from "react";
import { cn } from "../lib/utils.js";
function SplitPane({
  left,
  right,
  defaultSplit = 50,
  minLeft = 20,
  minRight = 20,
  leftClass,
  rightClass,
  className
}) {
  const [split, setSplit] = useState(defaultSplit);
  const dragging = useRef(false);
  const container = useRef(null);
  const onMouseDown = useCallback(
    (e) => {
      e.preventDefault();
      dragging.current = true;
      const onMove = (ev) => {
        if (!dragging.current || !container.current) return;
        const rect = container.current.getBoundingClientRect();
        const pct = (ev.clientX - rect.left) / rect.width * 100;
        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));
      };
      const onUp = () => {
        dragging.current = false;
        document.removeEventListener("mousemove", onMove);
        document.removeEventListener("mouseup", onUp);
        document.body.style.cursor = "";
        document.body.style.userSelect = "";
      };
      document.addEventListener("mousemove", onMove);
      document.addEventListener("mouseup", onUp);
      document.body.style.cursor = "col-resize";
      document.body.style.userSelect = "none";
    },
    [minLeft, minRight]
  );
  return /* @__PURE__ */ jsxs("div", { ref: container, className: cn("flex flex-1 overflow-hidden min-h-0", className), children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        style: { width: `${split}%` },
        className: cn("overflow-y-auto bg-background min-h-0", leftClass),
        children: left
      }
    ),
    /* @__PURE__ */ jsx(
      "div",
      {
        role: "separator",
        "aria-orientation": "vertical",
        className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
        onMouseDown
      }
    ),
    /* @__PURE__ */ jsx(
      "div",
      {
        style: { width: `${100 - split}%` },
        className: cn("overflow-hidden bg-background min-h-0", rightClass),
        children: right
      }
    )
  ] });
}
export {
  SplitPane
};
//# sourceMappingURL=SplitPane.js.map