"use client";
import { Panel, Group, Separator } from 'react-resizable-panels';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function ResizablePanelGroup({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    Group,
    {
      className: cn(
        "flex h-full w-full aria-[orientation=vertical]:flex-col",
        className
      ),
      ...props
    }
  );
}
ResizablePanelGroup.displayName = "ResizablePanelGroup";
var ResizablePanel = Panel;
function ResizableHandle({ withHandle, className, ...props }) {
  return /* @__PURE__ */ jsx(
    Separator,
    {
      className: cn(
        "relative flex w-px items-center justify-center bg-foreground/[0.12] transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-ring data-[separator=active]:bg-ring",
        "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
        "aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full",
        "aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0",
        "[&[aria-orientation=horizontal]>div]:rotate-90",
        className
      ),
      ...props,
      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsxs(
        "svg",
        {
          xmlns: "http://www.w3.org/2000/svg",
          viewBox: "0 0 24 24",
          fill: "currentColor",
          className: "h-2.5 w-2.5",
          "aria-hidden": "true",
          children: [
            /* @__PURE__ */ jsx("circle", { cx: "9", cy: "5", r: "1" }),
            /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1" }),
            /* @__PURE__ */ jsx("circle", { cx: "9", cy: "19", r: "1" }),
            /* @__PURE__ */ jsx("circle", { cx: "15", cy: "5", r: "1" }),
            /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1" }),
            /* @__PURE__ */ jsx("circle", { cx: "15", cy: "19", r: "1" })
          ]
        }
      ) })
    }
  );
}
ResizableHandle.displayName = "ResizableHandle";

export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
//# sourceMappingURL=resizable.js.map
//# sourceMappingURL=resizable.js.map