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