@postenbring/hedwig-react/dist/chunk-GXIKHXWC.mjs

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

import {
  useMergeRefs
} from "./chunk-ILFK3VKS.mjs";
import {
  Box
} from "./chunk-3OGHJOJF.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-YOSPWY5K.mjs";

// src/modal/modal.tsx
import { forwardRef, useEffect, useRef } from "react";
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { Slot } from "@radix-ui/react-slot";
import { jsx } from "react/jsx-runtime";
var ModalHeader = forwardRef(
  (_a, ref) => {
    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
    const Component = asChild ? Slot : "h1";
    return /* @__PURE__ */ jsx(
      Component,
      __spreadValues({
        className: clsx("hds-modal__header", className),
        ref
      }, rest)
    );
  }
);
ModalHeader.displayName = "Modal.Header";
var ModalContent = forwardRef(
  (_a, ref) => {
    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
    const Component = asChild ? Slot : "div";
    return /* @__PURE__ */ jsx(
      Component,
      __spreadValues({
        className: clsx("hds-modal__content", className),
        ref
      }, rest)
    );
  }
);
ModalContent.displayName = "Modal.Content";
var ModalFooter = forwardRef(
  (_a, ref) => {
    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
    const Component = asChild ? Slot : "footer";
    return /* @__PURE__ */ jsx(
      Component,
      __spreadValues({
        className: clsx("hds-modal__footer", className),
        ref
      }, rest)
    );
  }
);
ModalFooter.displayName = "Modal.Footer";
var Modal = forwardRef(
  (_a, ref) => {
    var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
    const modalRef = useRef(null);
    const mergedRef = useMergeRefs([modalRef, ref]);
    function onCloseButtonClick() {
      var _a2;
      (_a2 = modalRef.current) == null ? void 0 : _a2.close();
      return false;
    }
    useScrollLock(modalRef, "hds-modal-scroll-lock");
    useEffect(() => {
      if (modalRef.current && open !== void 0) {
        if (open && !modalRef.current.open) {
          modalRef.current.showModal();
        } else if (!open && modalRef.current.open) {
          modalRef.current.close();
        }
      }
    }, [modalRef, open]);
    function onDialogClick(e) {
      if (closeOnBackdropClick && e.target === modalRef.current) {
        modalRef.current.close();
      }
      onClick == null ? void 0 : onClick(e);
    }
    return /* @__PURE__ */ jsx(
      Box,
      {
        asChild: true,
        className: clsx("hds-modal", className),
        closeable: true,
        onClick: onDialogClick,
        onClose: onCloseButtonClick,
        variant: "white",
        children: /* @__PURE__ */ jsx("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
      }
    );
  }
);
Modal.displayName = "Modal";
Modal.Header = ModalHeader;
Modal.Content = ModalContent;
Modal.Footer = ModalFooter;
function useScrollLock(modalRef, bodyClass) {
  useEffect(() => {
    if (!modalRef.current) return;
    if (modalRef.current.open) document.body.classList.add(bodyClass);
    const observer = new MutationObserver(() => {
      var _a;
      if ((_a = modalRef.current) == null ? void 0 : _a.open) document.body.classList.add(bodyClass);
      else document.body.classList.remove(bodyClass);
    });
    observer.observe(modalRef.current, {
      attributes: true,
      attributeFilter: ["open"]
    });
    return () => {
      observer.disconnect();
      document.body.classList.remove(bodyClass);
    };
  }, [bodyClass, modalRef]);
}

export {
  ModalHeader,
  ModalContent,
  ModalFooter,
  Modal
};
//# sourceMappingURL=chunk-GXIKHXWC.mjs.map