"use client";
'use strict';

var react = require('react');
var framerMotion = require('framer-motion');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var hooks = require('@opensite/hooks');
var jsxRuntime = require('react/jsx-runtime');

function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var sizeStyles = {
  sm: "max-w-md",
  md: "max-w-2xl",
  lg: "max-w-4xl",
  xl: "max-w-5xl",
  full: "max-w-7xl"
};
var dialogTransition = {
  duration: 0.35,
  ease: [0.16, 1, 0.3, 1]
};
function AnimatedDialog({
  open,
  onOpenChange,
  title,
  eyebrow,
  description,
  children,
  header,
  footer,
  size = "lg",
  className,
  contentClassName
}) {
  const titleId = react.useId();
  const descriptionId = react.useId();
  const containerRef = react.useRef(null);
  hooks.useOnClickOutside(containerRef, () => {
    if (open) {
      onOpenChange(false);
    }
  });
  react.useEffect(() => {
    if (!open) {
      return;
    }
    const onKeyDown = (event) => {
      if (event.key === "Escape") {
        onOpenChange(false);
      }
    };
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKeyDown);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", onKeyDown);
    };
  }, [open, onOpenChange]);
  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 h-screen overflow-y-auto", children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      framerMotion.motion.div,
      {
        initial: { opacity: 0 },
        animate: { opacity: 1, transition: dialogTransition },
        exit: { opacity: 0, transition: dialogTransition },
        className: "fixed inset-0 h-full w-full bg-foreground/80 backdrop-blur-lg"
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsxs(
      framerMotion.motion.div,
      {
        initial: { opacity: 0, y: 24, scale: 0.98 },
        animate: {
          opacity: 1,
          y: 0,
          scale: 1,
          transition: dialogTransition
        },
        exit: {
          opacity: 0,
          y: 12,
          scale: 0.98,
          transition: dialogTransition
        },
        ref: containerRef,
        role: "dialog",
        "aria-modal": "true",
        "aria-labelledby": title ? titleId : void 0,
        "aria-describedby": description ? descriptionId : void 0,
        className: cn(
          "relative z-60 mx-auto my-12 flex w-[92vw] max-h-[85vh] flex-col overflow-hidden rounded-3xl bg-background p-6 shadow-2xl ring-1 ring-border/10 md:my-20 md:p-12",
          sizeStyles[size],
          className
        ),
        children: [
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-8", children: [
            header ? header : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
              eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-primary", children: eyebrow }) : null,
              title ? /* @__PURE__ */ jsxRuntime.jsx(
                "h2",
                {
                  id: titleId,
                  className: "text-2xl font-semibold text-foreground md:text-4xl",
                  children: title
                }
              ) : null,
              description ? /* @__PURE__ */ jsxRuntime.jsx(
                "p",
                {
                  id: descriptionId,
                  className: "text-sm text-muted-foreground md:text-base",
                  children: description
                }
              ) : null
            ] }),
            /* @__PURE__ */ jsxRuntime.jsx(
              "button",
              {
                type: "button",
                "aria-label": "Close dialog",
                className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-foreground text-background transition hover:bg-foreground/80 md:h-11 md:w-11",
                onClick: () => onOpenChange(false),
                children: /* @__PURE__ */ jsxRuntime.jsx(
                  "svg",
                  {
                    xmlns: "http://www.w3.org/2000/svg",
                    width: "24",
                    height: "24",
                    viewBox: "0 0 24 24",
                    children: /* @__PURE__ */ jsxRuntime.jsx(
                      "path",
                      {
                        fill: "none",
                        stroke: "currentColor",
                        strokeLinecap: "round",
                        strokeLinejoin: "round",
                        strokeWidth: "2",
                        d: "M18 6L6 18M6 6l12 12"
                      }
                    )
                  }
                )
              }
            )
          ] }),
          children ? /* @__PURE__ */ jsxRuntime.jsx(
            "div",
            {
              className: cn(
                "mt-8 flex-1 min-h-0 overflow-y-auto pr-2 md:mt-10",
                contentClassName
              ),
              children
            }
          ) : null,
          footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 md:mt-10", children: footer }) : null
        ]
      }
    )
  ] }) : null });
}

exports.AnimatedDialog = AnimatedDialog;
//# sourceMappingURL=animated-dialog.cjs.map
//# sourceMappingURL=animated-dialog.cjs.map