import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import { usePreviewMode } from "../../../../../use-editor.js";
function ResizeHandle({
  direction,
  show,
  manifest
}) {
  const previewMode = usePreviewMode();
  if (previewMode === "mobile" && direction !== "s" && direction !== "n") {
    return null;
  }
  const dotShift = manifest.isContainer ? 8 : 6;
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "button",
    {
      type: "button",
      className: D(
        "resizable-handle absolute focus:outline-none",
        "overflow-visible z-[9999]",
        `resizable-handle-${direction}`,
        {
          "-bottom-[2px] left-0 right-0 h-[6px] cursor-row-resize": direction === "s",
          "-top-[2px] left-0 right-0 h-[6px] cursor-row-resize": direction === "n",
          "top-0 -left-[2px] bottom-0 w-[6px] cursor-col-resize": direction === "w",
          "top-0 -right-[2px] bottom-0 w-[6px] cursor-col-resize": direction === "e",
          // sw and nw
          "-bottom-[2px] -left-[2px] w-[6px] h-[6px] cursor-nesw-resize": direction === "sw",
          "-top-[2px] -left-[2px] w-[6px] h-[6px] cursor-nwse-resize": direction === "nw",
          // se and ne
          "-bottom-[2px] -right-[2px] w-[6px] h-[6px] cursor-nwse-resize": direction === "se",
          "-top-[2px] -right-[2px] w-[6px] h-[6px] cursor-nesw-resize": direction === "ne"
        }
      ),
      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        "div",
        {
          className: D(
            "z-[9999] absolute w-[10px] h-[10px] bg-white border-2 rounded-full shadow-md resizable-handle-dot",
            manifest.isContainer ? "border-orange-500" : "border-upstart-500",
            show && "opacity-100",
            {
              [`top-1/2 -translate-y-1/2 -left-[${dotShift}px]`]: direction === "w",
              [`top-1/2 -translate-y-1/2 -right-[${dotShift}px]`]: direction === "e",
              [`left-1/2 -translate-x-1/2 -top-[${dotShift}px]`]: direction === "n",
              [`left-1/2 -translate-x-1/2 -bottom-[${dotShift}px]`]: direction === "s",
              // sw and nw
              [`-bottom-[${dotShift}px] -left-[${dotShift}px]`]: direction === "sw",
              [`-top-[${dotShift}px] -left-[${dotShift}px]`]: direction === "nw",
              // se and ne
              [`-bottom-[${dotShift}px] -right-[${dotShift}px]`]: direction === "se",
              [`-top-[${dotShift}px] -right-[${dotShift}px]`]: direction === "ne"
            }
          )
        }
      )
    }
  );
}
export {
  ResizeHandle as default
};
//# sourceMappingURL=ResizeHandle.js.map
