import { o as q } from "./rolldown-runtime.js";
import { i as M, t as U } from "./vendor/react.js";
import { t as G } from "./x.js";
import { t as S } from "./Button.js";
import { t as p } from "./dist.js";
import { t as i } from "./utils.js";
import { a as m, i as K, n as X, o as J, r as Q, t as Y } from "./_shared.js";
import { c as Z, d as v, f as L, n as ee, r as te, s as ae, t as oe, u as se } from "./DialogTrigger.js";
import { t as re } from "./DialogViewport.js";
var r = /* @__PURE__ */ q(M(), 1), a = U(), ie = p("", {
  variants: { size: {
    sm: "",
    md: "",
    lg: ""
  } },
  defaultVariants: { size: "sm" }
}), ne = {
  sm: "icon-sm",
  md: "icon",
  lg: "icon-lg"
}, P = r.forwardRef(({ className: e, size: t = "sm", "aria-label": o = "Close", ...s }, n) => /* @__PURE__ */ (0, a.jsxs)(S, {
  ref: n,
  "data-slot": "close-button",
  appearance: "ghost",
  variant: "secondary",
  size: ne[t ?? "sm"],
  className: i(ie({ size: t }), e),
  "aria-label": o,
  ...s,
  children: [/* @__PURE__ */ (0, a.jsx)(G, {}), /* @__PURE__ */ (0, a.jsx)("span", {
    className: "sr-only",
    children: o
  })]
}));
P.displayName = "CloseButton";
var h = r.forwardRef(function({ ...t }, o) {
  return /* @__PURE__ */ (0, a.jsx)(te, {
    "data-slot": "dialog",
    ...t
  });
});
h.displayName = "Dialog.Root";
var V = r.forwardRef(function({ ...t }, o) {
  return /* @__PURE__ */ (0, a.jsx)(oe, {
    ref: o,
    "data-slot": "dialog-trigger",
    ...t
  });
});
V.displayName = "Dialog.Trigger";
function j({ ...e }) {
  return /* @__PURE__ */ (0, a.jsx)(ae, {
    "data-slot": "dialog-portal",
    ...e
  });
}
j.displayName = "Dialog.Portal";
var E = r.forwardRef(function({ ...t }, o) {
  return /* @__PURE__ */ (0, a.jsx)(v, {
    ref: o,
    "data-slot": "dialog-close",
    ...t
  });
});
E.displayName = "Dialog.Close";
var w = r.forwardRef(function({ className: t, disableAnimation: o, disableBackdropBlur: s, ...n }, d) {
  return /* @__PURE__ */ (0, a.jsx)(L, {
    ref: d,
    "data-slot": "dialog-backdrop",
    className: i("bg-background/80/10 fixed inset-0 isolate z-50", !o && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 motion-reduce:animate-none", !s && "supports-backdrop-filter:backdrop-blur-xs", t),
    ...n
  });
});
w.displayName = "Dialog.Backdrop";
var R = r.forwardRef(function({ className: t, children: o, ...s }, n) {
  return /* @__PURE__ */ (0, a.jsx)(re, {
    ref: n,
    "data-slot": "dialog-viewport",
    className: i("fixed inset-0 z-50 flex items-center justify-center p-4", t),
    ...s,
    children: o
  });
});
R.displayName = "Dialog.Viewport";
function O({ className: e, children: t, showCloseButton: o = !0, initialFocus: s, disableAnimation: n, disableBackdropBlur: d, ...l }) {
  return /* @__PURE__ */ (0, a.jsxs)(j, { children: [/* @__PURE__ */ (0, a.jsx)(w, {
    disableAnimation: n,
    disableBackdropBlur: d
  }), /* @__PURE__ */ (0, a.jsxs)(Z, {
    "data-slot": "dialog-popup",
    initialFocus: s,
    className: i("bg-background ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 shadow-lg sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none", !n && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 duration-150 motion-reduce:animate-none", e),
    ...l,
    children: [t, o && /* @__PURE__ */ (0, a.jsx)(v, { render: /* @__PURE__ */ (0, a.jsx)(P, { className: "absolute top-4 end-4" }) })]
  })] });
}
O.displayName = "PopupBase";
function T({ className: e, ...t }) {
  return /* @__PURE__ */ (0, a.jsx)("div", {
    "data-slot": "dialog-header",
    className: i("gap-2 flex flex-col", e),
    ...t
  });
}
T.displayName = "HeaderBase";
function A({ className: e, showCloseButton: t = !1, children: o, ...s }) {
  return /* @__PURE__ */ (0, a.jsxs)("div", {
    "data-slot": "dialog-footer",
    className: i("gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", e),
    ...s,
    children: [o, t && /* @__PURE__ */ (0, a.jsx)(v, {
      render: /* @__PURE__ */ (0, a.jsx)(S, {
        appearance: "outline",
        variant: "secondary"
      }),
      children: "Close"
    })]
  });
}
A.displayName = "FooterBase";
function W({ className: e, ...t }) {
  return /* @__PURE__ */ (0, a.jsx)(ee, {
    "data-slot": "dialog-title",
    className: i("leading-none font-medium", e),
    ...t
  });
}
W.displayName = "TitleBase";
function H({ className: e, ...t }) {
  return /* @__PURE__ */ (0, a.jsx)(se, {
    "data-slot": "dialog-description",
    className: i("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", e),
    ...t
  });
}
H.displayName = "DescriptionBase";
var le = p("", {
  variants: { size: {
    sm: "sm:max-w-[400px] overflow-hidden",
    md: "sm:max-w-md overflow-hidden",
    lg: "sm:max-w-[544px] overflow-hidden",
    xl: "sm:max-w-xl overflow-hidden",
    full: "sm:max-w-[calc(100%-2rem)] overflow-hidden"
  } },
  defaultVariants: { size: "sm" }
});
function N({ className: e, children: t, size: o, showPattern: s = !0, showCloseButton: n = !0, initialFocus: d, disableEffects: l, disableAnimation: c, disableBackdropBlur: g, ...u }) {
  const f = c ?? l, I = g ?? l, $ = l ? !1 : s;
  return /* @__PURE__ */ (0, a.jsxs)(O, {
    className: i(le({ size: o }), e),
    showCloseButton: n,
    initialFocus: d,
    disableAnimation: f,
    disableBackdropBlur: I,
    ...u,
    children: [$ && /* @__PURE__ */ (0, a.jsx)(b, {}), t]
  });
}
N.displayName = "Dialog.Popup";
function b({ className: e }) {
  const t = r.useId();
  return /* @__PURE__ */ (0, a.jsx)("div", {
    "data-slot": "dialog-pattern",
    className: i("pointer-events-none absolute -start-[120px] -top-[120px] size-[336px] delight-fade-in motion-reduce:!animate-none", e),
    "aria-hidden": "true",
    children: /* @__PURE__ */ (0, a.jsxs)("svg", {
      viewBox: "0 0 336 336",
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg",
      className: "size-full",
      children: [
        /* @__PURE__ */ (0, a.jsx)("defs", { children: /* @__PURE__ */ (0, a.jsxs)("radialGradient", {
          id: t,
          cx: "168",
          cy: "168",
          r: "168",
          gradientUnits: "userSpaceOnUse",
          children: [/* @__PURE__ */ (0, a.jsx)("stop", {
            stopColor: "currentColor",
            stopOpacity: "0.08"
          }), /* @__PURE__ */ (0, a.jsx)("stop", {
            offset: "1",
            stopColor: "currentColor",
            stopOpacity: "0"
          })]
        }) }),
        /* @__PURE__ */ (0, a.jsx)("circle", {
          cx: "168",
          cy: "168",
          r: "47",
          stroke: `url(#${t})`,
          strokeWidth: "1",
          fill: "none"
        }),
        /* @__PURE__ */ (0, a.jsx)("circle", {
          cx: "168",
          cy: "168",
          r: "87",
          stroke: `url(#${t})`,
          strokeWidth: "1",
          fill: "none"
        }),
        /* @__PURE__ */ (0, a.jsx)("circle", {
          cx: "168",
          cy: "168",
          r: "127",
          stroke: `url(#${t})`,
          strokeWidth: "1",
          fill: "none"
        }),
        /* @__PURE__ */ (0, a.jsx)("circle", {
          cx: "168",
          cy: "168",
          r: "167",
          stroke: `url(#${t})`,
          strokeWidth: "1",
          fill: "none"
        })
      ]
    })
  });
}
b.displayName = "Dialog.Pattern";
var de = p("flex shrink-0 items-center justify-center rounded-full", {
  variants: {
    variant: {
      default: "bg-success/20 text-success",
      success: "bg-success/20 text-success",
      warning: "bg-warning/20 text-warning",
      destructive: "bg-destructive/20 text-destructive",
      info: "bg-primary/20 text-foreground"
    },
    size: {
      sm: "size-10",
      md: "size-12",
      lg: "size-14"
    }
  },
  defaultVariants: {
    variant: "default",
    size: "md"
  }
});
function D({ className: e, variant: t, size: o, children: s, ...n }) {
  return /* @__PURE__ */ (0, a.jsx)("div", {
    "data-slot": "dialog-icon",
    className: i(de({
      variant: t,
      size: o
    }), "delight-bounce-in motion-reduce:!animate-none", e),
    ...n,
    children: /* @__PURE__ */ (0, a.jsx)("span", {
      className: "[&_svg]:size-6",
      children: s
    })
  });
}
D.displayName = "Dialog.Icon";
var ce = p("gap-4", {
  variants: { layout: {
    stacked: "flex flex-col items-start",
    horizontal: "flex flex-row items-start",
    centered: "flex flex-col items-center text-center"
  } },
  defaultVariants: { layout: "stacked" }
});
function k({ className: e, layout: t, children: o, ...s }) {
  return /* @__PURE__ */ (0, a.jsx)(T, {
    className: i(ce({ layout: t }), e),
    ...s,
    children: o
  });
}
k.displayName = "Dialog.Header";
function B({ className: e, children: t, ...o }) {
  return /* @__PURE__ */ (0, a.jsx)("div", {
    "data-slot": "dialog-header-content",
    className: i("flex flex-1 flex-col gap-1", e),
    ...o,
    children: t
  });
}
B.displayName = "Dialog.HeaderContent";
function C({ className: e, ...t }) {
  return /* @__PURE__ */ (0, a.jsx)(W, {
    className: i("text-lg font-semibold leading-7 text-foreground delight-stagger motion-reduce:!animate-none", e),
    ...t,
    style: { "--delight-delay": "50ms" }
  });
}
C.displayName = "Dialog.Title";
function z({ className: e, ...t }) {
  return /* @__PURE__ */ (0, a.jsx)(H, {
    className: i("text-sm text-muted-foreground delight-stagger motion-reduce:!animate-none", e),
    ...t,
    style: { "--delight-delay": "100ms" }
  });
}
z.displayName = "Dialog.Description";
var ue = p("gap-3", {
  variants: { layout: {
    horizontal: "flex flex-col-reverse sm:flex-row sm:justify-end",
    "horizontal-fill": "flex flex-col-reverse sm:flex-row [&>*]:flex-1",
    stacked: "flex flex-col"
  } },
  defaultVariants: { layout: "horizontal-fill" }
});
function _({ className: e, layout: t, children: o, ...s }) {
  return /* @__PURE__ */ (0, a.jsx)(A, {
    className: i(ue({ layout: t }), e),
    ...s,
    children: o
  });
}
_.displayName = "Dialog.Footer";
function x({ className: e, children: t, ...o }) {
  return /* @__PURE__ */ (0, a.jsx)("div", {
    "data-slot": "dialog-body",
    className: i("flex flex-col gap-4", e),
    ...o,
    children: t
  });
}
x.displayName = "Dialog.Body";
var me = Object.assign(h, {
  Root: h,
  Trigger: V,
  Portal: j,
  Backdrop: w,
  Viewport: R,
  Popup: N,
  Header: k,
  HeaderContent: B,
  Body: x,
  Footer: _,
  Title: C,
  Description: z,
  Close: E,
  Icon: D,
  Pattern: b
}), y = {
  open: "boolean",
  defaultOpen: "boolean",
  size: "string",
  iconVariant: "string",
  layout: "string",
  showCloseButton: "boolean",
  showPattern: "boolean",
  disableAnimation: "boolean",
  modal: "boolean"
}, F = class extends Y {
  get propDefs() {
    return y;
  }
  static get observedAttributes() {
    return Object.keys(y).map(X);
  }
  _renderReact() {
    const e = this._readAllProps(), t = this._getSlot("trigger"), o = this._getSlot("title"), s = this._getSlot("description"), n = this._getSlot("body"), d = this._getSlot("footer"), l = this._getSlot("icon"), c = [];
    if (o || s || l || e.iconVariant) {
      const u = [];
      (l || e.iconVariant) && u.push(r.createElement(D, {
        key: "icon",
        variant: e.iconVariant || "default"
      }, l ? m(l) : null));
      const f = [];
      o && f.push(r.createElement(C, { key: "title" }, m(o))), s && f.push(r.createElement(z, { key: "description" }, m(s))), f.length > 0 && u.push(r.createElement(B, { key: "header-content" }, ...f)), c.push(r.createElement(k, {
        key: "header",
        layout: e.layout || void 0
      }, ...u));
    }
    n && c.push(r.createElement(x, { key: "body" }, m(n)));
    const g = this._getDefaultSlot();
    return g && !n && c.push(r.createElement(x, { key: "default-body" }, m(g))), d && c.push(r.createElement(_, { key: "footer" }, m(d))), r.createElement(me, {
      open: e.open,
      defaultOpen: e.defaultOpen || !1,
      onOpenChange: (u) => Q(this, "open-change", u),
      modal: e.modal,
      trigger: t ? r.createElement("span", { style: { display: "contents" } }, m(t)) : void 0
    }, r.createElement(N, {
      size: e.size || void 0,
      showCloseButton: e.showCloseButton !== !1,
      showPattern: e.showPattern !== !1,
      disableAnimation: e.disableAnimation || !1
    }, ...c));
  }
};
K(F, y);
J("hf-dialog", F);
export {
  F as DialogWC,
  F as default
};

//# sourceMappingURL=hf-dialog.js.map