import {
  ClosePanelArrowIcon
} from "./chunk-DDUKEE5E.js";
import {
  Separator
} from "./chunk-HYITAA4J.js";
import {
  usePortalContainer
} from "./chunk-U7N2PWMO.js";
import {
  IconButton
} from "./chunk-O3DNDMV3.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-2NMEKWO5.js";

// src/atoms/drawer.tsx
import * as Dialog from "@radix-ui/react-dialog";
import { Grid, Theme } from "@radix-ui/themes";
import { jsx, jsxs } from "react/jsx-runtime";
function Root2(props) {
  return /* @__PURE__ */ jsx(Dialog.Root, __spreadValues({}, props));
}
var preventDefault = (e) => {
  e.preventDefault();
};
function Content2(props) {
  const _a = props, {
    position = "right",
    className,
    children,
    HeaderContent
  } = _a, rest = __objRest(_a, [
    "position",
    "className",
    "children",
    "HeaderContent"
  ]);
  const mobileHeaderSize = 48;
  const desktopHeaderSize = 64;
  const separatorSize = 1;
  const { drawerContainerRef } = usePortalContainer();
  return /* @__PURE__ */ jsx(Dialog.Portal, { container: drawerContainerRef.current, children: /* @__PURE__ */ jsxs(Theme, { children: [
    /* @__PURE__ */ jsx(Dialog.Overlay, { className: "DrawerOverlay" }),
    /* @__PURE__ */ jsx(
      Dialog.Content,
      __spreadProps(__spreadValues({
        className: `DrawerContent ${position} ${className || ""}`,
        onPointerDownOutside: preventDefault
      }, rest), {
        children: /* @__PURE__ */ jsxs(
          Grid,
          {
            height: "100%",
            overflow: "hidden",
            rows: {
              initial: `${mobileHeaderSize}px ${separatorSize}px calc(100% - ${mobileHeaderSize + separatorSize}px)`,
              sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`
            },
            children: [
              /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", px: { initial: "4", md: "6" }, children: [
                /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { color: "gray", variant: "outline", children: /* @__PURE__ */ jsx(ClosePanelArrowIcon, {}) }) }),
                HeaderContent
              ] }),
              /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", size: "4" }),
              children
            ]
          }
        )
      })
    )
  ] }) });
}
function Trigger2(props) {
  return /* @__PURE__ */ jsx(Dialog.Trigger, __spreadValues({ asChild: true }, props));
}
var Drawer = {
  Root: Dialog.Root,
  Trigger: Trigger2,
  Content: Content2,
  Close: Dialog.Close,
  Title: Dialog.Title,
  Description: Dialog.Description
};

export {
  Root2 as Root,
  Content2 as Content,
  Trigger2 as Trigger,
  Drawer
};
//# sourceMappingURL=chunk-UOYF3DBN.js.map