import { o as w } from "./rolldown-runtime.js";
import { i as E, n as z, t as T } from "./vendor/react.js";
import { t as A } from "./mail.js";
import { t as l } from "./Button.js";
import { t as k } from "./dist.js";
import { t as c } from "./utils.js";
import { t as I } from "./Input2.js";
var x = /* @__PURE__ */ w(E(), 1), t = T(), _ = k("relative bg-background overflow-hidden shadow-xs", {
  variants: { variant: {
    bordered: "border border-border rounded-xl",
    "full-width": "border-y border-border"
  } },
  defaultVariants: { variant: "bordered" }
});
function S({ title: e, description: r, primaryLabel: n = "Changelog", onPrimaryClick: s, secondaryLabel: i = "Dismiss", onSecondaryClick: d, stackedActions: a = !1, variant: m, className: o, ...u }) {
  return /* @__PURE__ */ (0, t.jsxs)("section", {
    "data-slot": "inline-cta",
    "aria-label": typeof e == "string" ? e : "Call to action",
    className: c(_({ variant: m }), "flex flex-col gap-5 p-6", o),
    ...u,
    children: [/* @__PURE__ */ (0, t.jsxs)("div", {
      className: "flex flex-col gap-0.5",
      children: [/* @__PURE__ */ (0, t.jsx)("h3", {
        className: "text-lg font-semibold leading-7 text-foreground",
        children: e
      }), r && /* @__PURE__ */ (0, t.jsx)("p", {
        className: "text-sm leading-5 text-muted-foreground",
        children: r
      })]
    }), /* @__PURE__ */ (0, t.jsx)("div", {
      className: c("flex gap-3", a ? "flex-col w-full" : "flex-row items-center"),
      children: a ? /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [/* @__PURE__ */ (0, t.jsx)(l, {
        appearance: "gradient",
        variant: "primary",
        size: "md",
        onClick: s,
        className: "w-full",
        children: n
      }), i && /* @__PURE__ */ (0, t.jsx)(l, {
        appearance: "outline",
        variant: "secondary",
        size: "md",
        onClick: d,
        className: "w-full",
        children: i
      })] }) : /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [i && /* @__PURE__ */ (0, t.jsx)(l, {
        appearance: "outline",
        variant: "secondary",
        size: "md",
        onClick: d,
        children: i
      }), /* @__PURE__ */ (0, t.jsx)(l, {
        appearance: "gradient",
        variant: "primary",
        size: "md",
        onClick: s,
        children: n
      })] })
    })]
  });
}
function O({ title: e, description: r, inputLabel: n = "Subscribe to updates", inputPlaceholder: s = "you@humain.ai", submitLabel: i = "Subscribe", onSubmit: d, stackedLayout: a = !1, defaultValue: m = "", loading: o = !1, variant: u, className: f, ...g }) {
  const [h, b] = x.useState(m), y = (j) => {
    j.preventDefault(), d?.(h);
  };
  return /* @__PURE__ */ (0, t.jsxs)("section", {
    "data-slot": "inline-cta",
    "aria-label": typeof e == "string" ? e : "Subscribe",
    className: c(_({ variant: u }), "flex flex-col gap-5 p-6", f),
    ...g,
    children: [/* @__PURE__ */ (0, t.jsxs)("div", {
      className: "flex flex-col gap-0.5",
      children: [/* @__PURE__ */ (0, t.jsx)("h3", {
        className: "text-lg font-semibold leading-7 text-foreground",
        children: e
      }), r && /* @__PURE__ */ (0, t.jsx)("p", {
        className: "text-sm leading-5 text-muted-foreground",
        children: r
      })]
    }), /* @__PURE__ */ (0, t.jsxs)("form", {
      onSubmit: y,
      className: c("flex gap-4", a ? "flex-col w-full" : "flex-row items-end max-w-md"),
      children: [/* @__PURE__ */ (0, t.jsx)("div", {
        className: c(a ? "w-full" : "flex-1"),
        children: /* @__PURE__ */ (0, t.jsx)(I, {
          type: "email",
          label: n,
          placeholder: s,
          value: h,
          onChange: (j) => b(j.target.value),
          startIcon: /* @__PURE__ */ (0, t.jsx)(A, {}),
          required: !0
        })
      }), /* @__PURE__ */ (0, t.jsx)(l, {
        type: "submit",
        appearance: "gradient",
        variant: "primary",
        size: "lg",
        loading: o,
        className: c(a && "w-full"),
        children: i
      })]
    })]
  });
}
function P({ title: e, description: r, imageSrc: n, imageAlt: s = "Featured image", showPlayButton: i = !1, onPlayClick: d, primaryLabel: a = "Changelog", onPrimaryClick: m, secondaryLabel: o = "Dismiss", onSecondaryClick: u, stackedActions: f = !1, variant: g, className: h, ...b }) {
  return /* @__PURE__ */ (0, t.jsxs)("section", {
    "data-slot": "inline-cta",
    "aria-label": typeof e == "string" ? e : "Call to action",
    className: c(_({ variant: g }), "flex flex-col", h),
    ...b,
    children: [/* @__PURE__ */ (0, t.jsxs)("div", {
      className: "relative aspect-video w-full overflow-hidden",
      children: [
        /* @__PURE__ */ (0, t.jsx)("img", {
          src: n,
          alt: s,
          loading: "lazy",
          className: "absolute inset-0 size-full object-cover"
        }),
        /* @__PURE__ */ (0, t.jsx)("div", { className: "absolute inset-0 border border-border rounded-t-xl" }),
        i && /* @__PURE__ */ (0, t.jsx)("button", {
          type: "button",
          onClick: d,
          className: "absolute bottom-3 start-3 size-11 rounded-full bg-card/80 supports-backdrop-filter:backdrop-blur-sm flex items-center justify-center hover:bg-background transition-colors",
          "aria-label": "Play video",
          children: /* @__PURE__ */ (0, t.jsx)("svg", {
            className: "size-4 ms-0.5 text-foreground",
            fill: "currentColor",
            viewBox: "0 0 16 16",
            children: /* @__PURE__ */ (0, t.jsx)("path", { d: "M4 3.5v9l8-4.5-8-4.5z" })
          })
        })
      ]
    }), /* @__PURE__ */ (0, t.jsxs)("div", {
      className: "flex flex-col gap-5 p-4 border-x border-b border-border rounded-b-xl",
      children: [/* @__PURE__ */ (0, t.jsxs)("div", {
        className: "flex flex-col gap-0.5",
        children: [/* @__PURE__ */ (0, t.jsx)("h3", {
          className: "text-lg font-semibold leading-7 text-foreground",
          children: e
        }), r && /* @__PURE__ */ (0, t.jsx)("p", {
          className: "text-sm leading-5 text-muted-foreground",
          children: r
        })]
      }), /* @__PURE__ */ (0, t.jsx)("div", {
        className: c("flex gap-3", f ? "flex-col w-full" : "flex-row items-center"),
        children: f ? /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [/* @__PURE__ */ (0, t.jsx)(l, {
          appearance: "gradient",
          variant: "primary",
          size: "md",
          onClick: m,
          className: "w-full",
          children: a
        }), o && /* @__PURE__ */ (0, t.jsx)(l, {
          appearance: "outline",
          variant: "secondary",
          size: "md",
          onClick: u,
          className: "w-full",
          children: o
        })] }) : /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [o && /* @__PURE__ */ (0, t.jsx)(l, {
          appearance: "outline",
          variant: "secondary",
          size: "md",
          onClick: u,
          children: o
        }), /* @__PURE__ */ (0, t.jsx)(l, {
          appearance: "gradient",
          variant: "primary",
          size: "md",
          onClick: m,
          children: a
        })] })
      })]
    })]
  });
}
function N(e) {
  switch (e.type) {
    case "actions":
      return /* @__PURE__ */ (0, t.jsx)(S, { ...e });
    case "email":
      return /* @__PURE__ */ (0, t.jsx)(O, { ...e });
    case "image":
      return /* @__PURE__ */ (0, t.jsx)(P, { ...e });
    default:
      return null;
  }
}
N.displayName = "InlineCTA";
var V = z();
function D(e) {
  return {
    onPrimaryClick: (r) => {
      e.dispatchEvent(new CustomEvent("primary-click", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    },
    onSecondaryClick: (r) => {
      e.dispatchEvent(new CustomEvent("secondary-click", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function F(e) {
  const { _hostElement: r, ...n } = e, s = x.useMemo(() => r ? D(r) : {}, [r]);
  return x.createElement(N, {
    ...n,
    ...s
  });
}
var p = {
  type: "string",
  primaryLabel: "string",
  secondaryLabel: "string",
  stackedActions: "boolean"
};
function C(e, r) {
  if (e !== null)
    switch (r) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var v = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const n of Array.from(this.childNodes))
      n.nodeType === Node.TEXT_NODE && !n.textContent?.trim() || e.push(n);
    const r = document.createElement("div");
    for (r.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((n) => this._childrenContainer.appendChild(n)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(r), this._root = (0, V.createRoot)(r), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, r, n) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(p).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, r) {
    const n = p[e] || "string";
    this._props[e] = this._parseValue(r, n), this._render();
  }
  _parseValue(e, r) {
    if (r === "boolean" && typeof e == "boolean" || r === "number" && typeof e == "number" || r === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (r) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const r = e.replace(/([A-Z])/g, "-$1").toLowerCase(), n = p[e] || "string";
    return C(this.getAttribute(r), n);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [n, s] of Object.entries(p)) if (n in this._props) e[n] = this._props[n];
    else {
      const i = n.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[n] = C(this.getAttribute(i), s);
    }
    const r = x.createElement(F, {
      ...e,
      _hostElement: this
    });
    this._root.render(r);
  }
};
for (const e of Object.keys(p)) Object.defineProperty(v.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(r) {
    this._setProp(e, r);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-inline-cta") && customElements.define("hf-inline-cta", v);
export {
  v as InlineCTAWC,
  v as default
};

//# sourceMappingURL=hf-inline-cta.js.map