import { jsx as r, jsxs as d, Fragment as y } from "react/jsx-runtime";
import * as c from "react";
import * as n from "@radix-ui/react-dialog";
import { c as s } from "../../index-BtlgVD4m.js";
const z = c.createContext("bottom"), O = c.createContext(void 0), L = 100, T = {
  bottom: { axis: "y", sign: 1 },
  top: { axis: "y", sign: -1 },
  left: { axis: "x", sign: -1 },
  right: { axis: "x", sign: 1 }
}, k = (...o) => (e) => {
  o.forEach((t) => {
    typeof t == "function" ? t(e) : t && (t.current = e);
  });
}, $ = {
  bottom: {
    position: "bottom-0 left-0 right-0",
    rounded: "rounded-tl-[var(--border-radius-xl,12px)] rounded-tr-[var(--border-radius-xl,12px)]",
    slideIn: "data-[state=open]:slide-in-from-bottom",
    slideOut: "data-[state=closed]:slide-out-to-bottom",
    maxSize: "max-h-[90dvh]",
    flexDir: "flex-col"
  },
  top: {
    position: "top-0 left-0 right-0",
    rounded: "rounded-bl-[var(--border-radius-xl,12px)] rounded-br-[var(--border-radius-xl,12px)]",
    slideIn: "data-[state=open]:slide-in-from-top",
    slideOut: "data-[state=closed]:slide-out-to-top",
    maxSize: "max-h-[90dvh]",
    flexDir: "flex-col"
  },
  left: {
    position: "left-0 top-0 bottom-0",
    rounded: "rounded-tr-[var(--border-radius-xl,12px)] rounded-br-[var(--border-radius-xl,12px)]",
    slideIn: "data-[state=open]:slide-in-from-left",
    slideOut: "data-[state=closed]:slide-out-to-left",
    maxSize: "max-w-[90dvw]",
    flexDir: "flex-row"
  },
  right: {
    position: "right-0 top-0 bottom-0",
    rounded: "rounded-tl-[var(--border-radius-xl,12px)] rounded-bl-[var(--border-radius-xl,12px)]",
    slideIn: "data-[state=open]:slide-in-from-right",
    slideOut: "data-[state=closed]:slide-out-to-right",
    maxSize: "max-w-[90dvw]",
    flexDir: "flex-row"
  }
}, U = n.Root, V = n.Trigger, H = n.Portal, q = n.Close, P = ({ ref: o, className: e, ...t }) => /* @__PURE__ */ r(
  n.Overlay,
  {
    ref: o,
    className: s(
      "fixed inset-0 z-50 bg-[var(--base-foreground)]/40",
      "data-[state=open]:animate-in data-[state=closed]:animate-out",
      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      "duration-300",
      e
    ),
    ...t
  }
);
P.displayName = "DrawerOverlay";
const X = ({ ref: o, className: e, children: t, placement: i = "bottom", ...u }) => {
  const l = $[i], N = c.useRef(null), C = c.useRef(null), { axis: g, sign: v } = T[i];
  return /* @__PURE__ */ r(z, { value: i, children: /* @__PURE__ */ r(O, { value: (p) => {
    if (p.button !== 0) return;
    const a = N.current;
    if (!a) return;
    const R = g === "x" ? p.clientX : p.clientY;
    p.currentTarget.setPointerCapture(p.pointerId), a.style.transition = "none";
    let w = 0;
    const E = (f) => {
      const h = g === "x" ? f.clientX : f.clientY;
      w = Math.max(0, (h - R) * v);
      const x = w * v;
      a.style.transform = g === "x" ? `translateX(${x}px)` : `translateY(${x}px)`;
    }, b = new AbortController(), { signal: D } = b, S = () => {
      b.abort(), a.style.transition = "transform 0.3s ease-in-out", a.style.transform = "";
    }, I = () => {
      if (b.abort(), w >= L) {
        const f = `${v * 100}%`;
        a.style.animation = "none", a.style.transition = "transform 0.3s ease-in-out", a.style.transform = g === "x" ? `translateX(${f})` : `translateY(${f})`;
        const h = () => {
          var x;
          a.removeEventListener("transitionend", h), (x = C.current) == null || x.click();
        };
        a.addEventListener("transitionend", h);
      } else
        a.style.transition = "transform 0.3s ease-in-out", a.style.transform = "";
    };
    window.addEventListener("pointermove", E, { signal: D }), window.addEventListener("pointerup", I, { signal: D }), window.addEventListener("pointercancel", S, { signal: D });
  }, children: /* @__PURE__ */ d(H, { children: [
    /* @__PURE__ */ r(P, {}),
    /* @__PURE__ */ d(
      n.Content,
      {
        ref: k(o, N),
        className: s(
          "fixed z-50",
          l.position,
          l.flexDir,
          "flex gap-[var(--spacing-forms-tight,16px)]",
          "bg-[var(--base-background,white)]",
          "border border-[var(--base-border)]",
          l.rounded,
          "p-[var(--spacing-forms-tight,16px)]",
          "overflow-clip",
          l.maxSize,
          "transition ease-in-out",
          "data-[state=closed]:duration-300 data-[state=open]:duration-500",
          "data-[state=open]:animate-in data-[state=closed]:animate-out",
          l.slideIn,
          l.slideOut,
          e
        ),
        ...u,
        children: [
          /* @__PURE__ */ r(n.Close, { ref: C, className: "sr-only", tabIndex: -1, "aria-hidden": !0 }),
          i === "top" ? /* @__PURE__ */ d(y, { children: [
            t,
            /* @__PURE__ */ r(m, {})
          ] }) : i === "left" ? /* @__PURE__ */ d(y, { children: [
            /* @__PURE__ */ r("div", { className: "flex-1 min-w-0 flex flex-col", children: t }),
            /* @__PURE__ */ r(m, {})
          ] }) : i === "right" ? /* @__PURE__ */ d(y, { children: [
            /* @__PURE__ */ r(m, {}),
            /* @__PURE__ */ r("div", { className: "flex-1 min-w-0 flex flex-col", children: t })
          ] }) : (
            // bottom: puller leads
            /* @__PURE__ */ d(y, { children: [
              /* @__PURE__ */ r(m, {}),
              t
            ] })
          )
        ]
      }
    )
  ] }) }) });
};
X.displayName = "DrawerContent";
const m = ({ className: o, ...e }) => {
  const t = c.use(z), i = c.use(O), u = t === "left" || t === "right";
  return /* @__PURE__ */ r(
    "div",
    {
      onPointerDown: i,
      className: s(
        "flex items-center justify-center shrink-0 p-0 touch-none select-none cursor-pointer",
        u ? "h-full w-auto" : "w-full",
        o
      ),
      ...e,
      children: /* @__PURE__ */ r("div", { className: s("rounded-[var(--border-radius-default,6px)] bg-[var(--base-border)]", u ? "w-2 h-16" : "h-2 w-32") })
    }
  );
};
m.displayName = "DrawerPuller";
const Y = ({ className: o, ...e }) => /* @__PURE__ */ r("div", { className: s("flex flex-col gap-[var(--spacing-forms-very-tight,8px)] w-full overflow-clip", o), ...e });
Y.displayName = "DrawerHeader";
const j = ({ ref: o, className: e, ...t }) => /* @__PURE__ */ r(
  n.Title,
  {
    ref: o,
    className: s(
      "text-[length:var(--typography-typography-components-h4-font-size,20px)]",
      "font-[var(--typography-typography-components-h4-font-weight,600)]",
      "leading-[var(--typography-typography-components-h4-line-height,28px)]",
      "tracking-[var(--typography-typography-components-h4-letter-spacing,-0.4px)]",
      "text-[color:var(--base-foreground)]",
      e
    ),
    ...t
  }
);
j.displayName = n.Title.displayName;
const F = ({ ref: o, className: e, ...t }) => /* @__PURE__ */ r(
  n.Description,
  {
    ref: o,
    className: s(
      "text-[length:var(--typography-typography-components-small-font-size,14px)]",
      "font-[var(--font-weight-normal,400)]",
      "leading-[var(--typography-base-sizes-small-line-height,20px)]",
      "text-[color:var(--base-muted-foreground)]",
      e
    ),
    ...t
  }
);
F.displayName = n.Description.displayName;
const A = ({ className: o, ...e }) => /* @__PURE__ */ r("div", { className: s("flex flex-col w-full overflow-auto flex-1", o), ...e });
A.displayName = "DrawerBody";
const B = ({ className: o, ...e }) => /* @__PURE__ */ r("div", { className: s("flex flex-col gap-[var(--spacing-forms-very-tight,8px)] w-full shrink-0", o), ...e });
B.displayName = "DrawerFooter";
export {
  U as Drawer,
  A as DrawerBody,
  q as DrawerClose,
  X as DrawerContent,
  F as DrawerDescription,
  B as DrawerFooter,
  Y as DrawerHeader,
  P as DrawerOverlay,
  H as DrawerPortal,
  m as DrawerPuller,
  j as DrawerTitle,
  V as DrawerTrigger
};
//# sourceMappingURL=DrawerPrimitive.js.map
