import { jsx as t } from "react/jsx-runtime";
import { createContext as C, useContext as k, useRef as T } from "react";
import { R as B, C as O, a as P, D as F, O as I, P as R, T as $, b as H } from "../index-CYjGhVvU.mjs";
import { useMergeRefs as S } from "@spark-ui/hooks/use-merge-refs";
import { useScrollOverflow as E } from "@spark-ui/hooks/use-scroll-overflow";
import { c as N, a as n } from "../index-BmAFn37q.mjs";
import { Close as V } from "@spark-ui/icons/Close";
import { I as j } from "../Icon-D1RueiPY.mjs";
import { I as A } from "../IconButton-BY3gYXtU.mjs";
const b = C(null), M = ({
  children: e,
  withFade: a = !1
}) => /* @__PURE__ */ t(
  b.Provider,
  {
    value: {
      withFade: a
    },
    children: e
  }
), q = () => {
  const e = k(b);
  if (!e)
    throw Error("useDrawer must be used within a Drawer provider");
  return e;
}, v = ({ children: e, withFade: a = !1, ...r }) => /* @__PURE__ */ t(M, { withFade: a, children: /* @__PURE__ */ t(B, { ...r, children: e }) });
v.displayName = "Drawer.Root";
const G = N(
  ["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
  {
    variants: {
      inset: {
        true: "",
        false: "px-xl py-lg"
      }
    },
    defaultVariants: {
      inset: !1
    }
  }
), c = ({
  children: e,
  inset: a = !1,
  className: r,
  ref: s,
  ...i
}) => {
  const l = T(null), o = S(s, l), { withFade: d } = q(), { overflow: m } = E(l);
  return /* @__PURE__ */ t(
    "div",
    {
      "data-spark-component": "drawer-body",
      ref: o,
      className: G({ inset: a, className: r }),
      style: {
        ...d && {
          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% + ${m.top ? "0px" : "44px"} + ${m.bottom ? "0px" : "44px"})`,
          maskPosition: `0 ${m.top ? "0px" : "-44px"}`
        }
      },
      ...i,
      children: e
    }
  );
};
c.displayName = "Drawer.Body";
const z = (e) => /* @__PURE__ */ t(O, { "data-spark-component": "drawer-close", ...e });
z.displayName = "Drawer.Close";
const p = ({
  "aria-label": e,
  className: a,
  size: r = "md",
  intent: s = "neutral",
  design: i = "ghost",
  children: l = /* @__PURE__ */ t(V, {}),
  ref: o,
  ...d
}) => /* @__PURE__ */ t(
  z,
  {
    "data-spark-component": "drawer-close-button",
    ref: o,
    className: n(["absolute", "top-sm", "right-xl"], a),
    asChild: !0,
    ...d,
    children: /* @__PURE__ */ t(A, { intent: s, size: r, design: i, "aria-label": e, children: /* @__PURE__ */ t(j, { children: l }) })
  }
);
p.displayName = "Drawer.CloseButton";
const J = N(
  [
    "fixed z-modal flex flex-col bg-surface shadow-md",
    "data-[state=open]:animation-duration-400 data-[state=closed]:animation-duration-200"
  ],
  {
    variants: {
      size: {
        sm: "",
        md: "",
        lg: "",
        fluid: "",
        fullscreen: "h-screen w-screen"
      },
      side: {
        right: [
          "inset-y-0 right-0",
          "data-[state=open]:animate-slide-in-right ",
          "data-[state=closed]:animate-slide-out-right"
        ],
        left: [
          "inset-y-0 left-0",
          "data-[state=open]:animate-slide-in-left",
          "data-[state=closed]:animate-slide-out-left"
        ],
        top: [
          "top-0 left-0",
          "w-screen",
          "data-[state=open]:animate-slide-in-top",
          "data-[state=closed]:animate-slide-out-top"
        ],
        bottom: [
          "bottom-0 left-0",
          "w-screen",
          "data-[state=open]:animate-slide-in-bottom",
          "data-[state=closed]:animate-slide-out-bottom"
        ]
      }
    },
    compoundVariants: [
      {
        side: ["right", "left"],
        size: "sm",
        class: ["w-sz-480", "max-w-full"]
      },
      {
        side: ["right", "left"],
        size: "md",
        class: ["w-sz-672", "max-w-full"]
      },
      {
        side: ["right", "left"],
        size: "lg",
        class: ["w-sz-864", "max-w-full"]
      },
      {
        side: ["left", "right"],
        size: "fluid",
        class: ["w-auto", "max-w-full"]
      },
      {
        side: ["top", "bottom"],
        size: "sm",
        class: ["h-sz-480", "max-h-full"]
      },
      {
        side: ["top", "bottom"],
        size: "md",
        class: ["h-sz-672", "max-h-full"]
      },
      {
        side: ["top", "bottom"],
        size: "lg",
        class: ["h-sz-864", "max-h-full"]
      },
      {
        side: ["top", "bottom"],
        size: "fluid",
        class: ["h-auto", "max-h-full"]
      }
    ],
    defaultVariants: {
      side: "right",
      size: "md"
    }
  }
), w = ({
  className: e,
  size: a = "md",
  side: r = "right",
  onInteractOutside: s,
  ref: i,
  ...l
}) => /* @__PURE__ */ t(
  P,
  {
    "data-spark-component": "drawer-content",
    ref: i,
    className: J({
      size: a,
      side: r,
      className: e
    }),
    onInteractOutside: (o) => {
      o.target.closest(".z-toast, .z-popover") && o.preventDefault(), s?.(o);
    },
    ...l
  }
);
w.displayName = "Drawer.Content";
const f = (e) => /* @__PURE__ */ t(F, { "data-spark-component": "drawer-description", ...e });
f.displayName = "Drawer.Description";
const u = ({ className: e, ref: a, ...r }) => /* @__PURE__ */ t(
  "footer",
  {
    "data-spark-component": "drawer-footer",
    ref: a,
    className: n(["px-xl", "py-lg"], e),
    ...r
  }
);
u.displayName = "Drawer.Footer";
const D = ({
  children: e,
  className: a,
  ref: r,
  ...s
}) => /* @__PURE__ */ t(
  "header",
  {
    "data-spark-component": "drawer-header",
    ref: r,
    className: n(["px-xl", "py-lg"], a),
    ...s,
    children: e
  }
);
D.displayName = "Dialog.Header";
const y = ({ className: e, ref: a, ...r }) => /* @__PURE__ */ t(
  I,
  {
    "data-spark-component": "drawer-overlay",
    ref: a,
    className: n(
      ["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
    ),
    ...r
  }
);
y.displayName = "Drawer.Overlay";
const g = ({ children: e, ...a }) => /* @__PURE__ */ t(R, { ...a, children: e });
g.displayName = "Drawer.Portal";
const h = ({ className: e, ref: a, ...r }) => /* @__PURE__ */ t(
  $,
  {
    "data-spark-component": "drawer-title",
    ref: a,
    className: n("text-headline-2 text-on-surface", e),
    ...r
  }
);
h.displayName = "Drawer.Title";
const x = (e) => /* @__PURE__ */ t(H, { "data-spark-component": "drawer-trigger", ...e });
x.displayName = "Drawer.Trigger";
const K = Object.assign(v, {
  Trigger: x,
  Portal: g,
  Overlay: y,
  Content: w,
  Header: D,
  Body: c,
  Footer: u,
  CloseButton: p,
  Title: h,
  Description: f
});
K.displayName = "Drawer";
x.displayName = "Drawer.Trigger";
g.displayName = "Drawer.Portal";
y.displayName = "Drawer.Overlay";
w.displayName = "Drawer.Content";
D.displayName = "Drawer.Header";
c.displayName = "Drawer.Body";
u.displayName = "Drawer.Footer";
p.displayName = "Drawer.CloseButton";
h.displayName = "Drawer.Title";
f.displayName = "Drawer.Description";
export {
  K as Drawer
};
//# sourceMappingURL=index.mjs.map
