import { jsx as l } from "react/jsx-runtime";
import { createContext as O, useState as w, useContext as B, useRef as C, useEffect as b } from "react";
import { R as I, C as P, a as R, D as S, O as H, P as j, T as z, b as A } from "../index-CYjGhVvU.mjs";
import { useMergeRefs as M } from "@spark-ui/hooks/use-merge-refs";
import { useScrollOverflow as L } from "@spark-ui/hooks/use-scroll-overflow";
import { a as c } from "../index-BmAFn37q.mjs";
import { Close as q } from "@spark-ui/icons/Close";
import { I as G } from "../Icon-D1RueiPY.mjs";
import { I as J } from "../IconButton-BY3gYXtU.mjs";
import { d as K } from "../DialogContent.styles-WGWJS9dj.mjs";
const T = O(null), Q = ({
  children: e,
  withFade: a = !1
}) => {
  const [t, o] = w(!1);
  return /* @__PURE__ */ l(
    T.Provider,
    {
      value: {
        isFullScreen: t,
        setIsFullScreen: o,
        withFade: a
      },
      children: e
    }
  );
}, p = () => {
  const e = B(T);
  if (!e)
    throw Error("useDialog must be used within a Dialog provider");
  return e;
}, $ = ({ children: e, withFade: a = !1, ...t }) => {
  const o = t.open, s = C(null);
  function r() {
    o && document.activeElement && (s.current = document.activeElement), o || setTimeout(() => {
      s.current instanceof HTMLElement && s.current.focus();
    }, 0);
  }
  return b(r, [o]), /* @__PURE__ */ l(Q, { withFade: a, children: /* @__PURE__ */ l(I, { ...t, children: e }) });
};
$.displayName = "Dialog.Root";
const m = ({
  children: e,
  className: a,
  inset: t = !1,
  ref: o,
  ...s
}) => {
  const r = C(null), d = M(o, r), { withFade: i } = p(), { overflow: n } = L(r);
  return /* @__PURE__ */ l(
    "div",
    {
      "data-spark-component": "dialog-body",
      ref: d,
      className: c(
        "focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
        "transition-all duration-300",
        {
          "px-xl py-lg": !t
        },
        a
      ),
      style: {
        ...i && {
          maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
          maskSize: `100% calc(100% + ${n.top ? "0px" : "44px"} + ${n.bottom ? "0px" : "44px"})`,
          maskPosition: `0 ${n.top ? "0px" : "-44px"}`
        }
      },
      ...s,
      children: e
    }
  );
};
m.displayName = "Dialog.Body";
const g = (e) => /* @__PURE__ */ l(P, { ...e });
g.displayName = "Dialog.Close";
const k = ({
  "aria-label": e,
  className: a,
  size: t = "md",
  intent: o = "neutral",
  design: s = "ghost",
  children: r = /* @__PURE__ */ l(q, {}),
  ref: d,
  ...i
}) => /* @__PURE__ */ l(
  g,
  {
    "data-spark-component": "dialog-close-button",
    "data-part": "close",
    ref: d,
    className: c(["absolute", "top-md", "right-xl"], a),
    asChild: !0,
    ...i,
    children: /* @__PURE__ */ l(J, { intent: o, size: t, design: s, "aria-label": e, children: /* @__PURE__ */ l(G, { children: r }) })
  }
), F = Object.assign(k, {
  id: "CloseButton"
});
k.displayName = "Dialog.CloseButton";
const u = ({
  children: e,
  className: a,
  isNarrow: t = !1,
  size: o = "md",
  onInteractOutside: s,
  ref: r,
  ...d
}) => {
  const { setIsFullScreen: i } = p();
  return b(() => (o === "fullscreen" && i(!0), () => i(!1)), [i, o]), /* @__PURE__ */ l(
    R,
    {
      "data-spark-component": "dialog-content",
      ref: r,
      className: K({
        className: a,
        isNarrow: t,
        size: o
      }),
      onInteractOutside: (n) => {
        n.target.closest(".z-toast, .z-popover") && n.preventDefault(), s?.(n);
      },
      ...d,
      children: e
    }
  );
};
u.displayName = "Dialog.Content";
const f = (e) => /* @__PURE__ */ l(S, { "data-spark-component": "dialog-description", ...e });
f.displayName = "Dialog.Description";
const y = ({ children: e, className: a, ref: t, ...o }) => /* @__PURE__ */ l(
  "footer",
  {
    "data-spark-component": "dialog-footer",
    ref: t,
    className: c(a, ["px-xl", "py-lg"]),
    ...o,
    children: e
  }
);
y.displayName = "Dialog.Footer";
const D = ({ children: e, className: a, ref: t, ...o }) => /* @__PURE__ */ l(
  "header",
  {
    "data-spark-component": "dialog-header",
    ref: t,
    className: c(a, ["px-xl", "py-lg"]),
    ...o,
    children: e
  }
);
D.displayName = "Dialog.Header";
const N = ({ className: e, ref: a, ...t }) => {
  const { isFullScreen: o } = p();
  return /* @__PURE__ */ l(
    H,
    {
      "data-spark-component": "dialog-overlay",
      ref: a,
      className: c(
        o ? "hidden" : "fixed",
        ["top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
        ["bg-overlay/dim-1"],
        ["data-[state=open]:animate-fade-in"],
        ["data-[state=closed]:animate-fade-out"],
        e
      ),
      ...t
    }
  );
};
N.displayName = "Dialog.Overlay";
const x = ({ children: e, ...a }) => /* @__PURE__ */ l(j, { ...a, children: e });
x.displayName = "Dialog.Portal";
const v = ({ className: e, ref: a, ...t }) => /* @__PURE__ */ l(
  z,
  {
    "data-spark-component": "dialog-title",
    ref: a,
    className: c(
      "text-headline-1 text-on-surface",
      "group-has-data-[part=close]:pr-3xl",
      e
    ),
    ...t
  }
);
v.displayName = "Dialog.Title";
const h = (e) => /* @__PURE__ */ l(A, { "data-spark-component": "dialog-trigger", ...e });
h.displayName = "Dialog.Trigger";
const E = Object.assign($, {
  Trigger: h,
  Portal: x,
  Overlay: N,
  Content: u,
  Header: D,
  Body: m,
  Footer: y,
  Close: g,
  CloseButton: F,
  Title: v,
  Description: f
});
E.displayName = "Dialog";
E.Trigger.displayName = "Dialog.Trigger";
h.displayName = "Dialog.Trigger";
x.displayName = "Dialog.Portal";
N.displayName = "Dialog.Overlay";
u.displayName = "Dialog.Content";
D.displayName = "Dialog.Header";
m.displayName = "Dialog.Body";
y.displayName = "Dialog.Footer";
F.displayName = "Dialog.CloseButton";
v.displayName = "Dialog.Title";
f.displayName = "Dialog.Description";
export {
  E as Dialog
};
//# sourceMappingURL=index.mjs.map
