import { o as O } from "./rolldown-runtime.js";
import { i as L, n as B, t as q } from "./vendor/react.js";
import { t as T } from "./circle-alert.js";
import { t as $ } from "./circle-check-big.js";
import { t as g } from "./info.js";
import { t as M } from "./Avatar.js";
import { t as W } from "./triangle-alert.js";
import { t as Z } from "./x.js";
import { t as _ } from "./dist.js";
import { t as h } from "./utils.js";
import { t as D } from "./Progress.js";
var l = /* @__PURE__ */ O(L(), 1), r = q(), H = _("relative flex gap-4 items-start overflow-hidden p-4 rounded-xl border bg-card shadow-sm", {
  variants: { variant: {
    primary: "",
    success: "",
    warning: "",
    error: "",
    gray: "",
    avatar: "",
    image: "",
    progress: "",
    none: ""
  } },
  defaultVariants: { variant: "primary" }
}), J = _("", {
  variants: { variant: {
    primary: "border-primary text-primary",
    success: "border-success text-success",
    warning: "border-warning text-warning",
    error: "border-destructive text-destructive"
  } },
  defaultVariants: { variant: "primary" }
}), X = ({ variant: e }) => {
  const t = J({ variant: e }), s = {
    primary: g,
    success: $,
    warning: W,
    error: T
  }[e];
  return /* @__PURE__ */ (0, r.jsxs)("div", {
    className: "relative size-5 shrink-0",
    children: [
      /* @__PURE__ */ (0, r.jsx)("div", { className: h("absolute -inset-[45%] rounded-full border-2 opacity-10", t) }),
      /* @__PURE__ */ (0, r.jsx)("div", { className: h("absolute -inset-[20%] rounded-full border-2 opacity-30", t) }),
      /* @__PURE__ */ (0, r.jsx)(s, { className: h("size-5", t) })
    ]
  });
}, f = ({ children: e }) => /* @__PURE__ */ (0, r.jsx)("div", {
  className: "flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-card shadow-sm",
  children: /* @__PURE__ */ (0, r.jsx)("div", {
    className: "text-secondary-foreground",
    children: e
  })
}), F = ({ onClick: e }) => /* @__PURE__ */ (0, r.jsx)("button", {
  type: "button",
  onClick: e,
  className: "absolute end-1 top-1 flex size-11 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
  "aria-label": "Close notification",
  children: /* @__PURE__ */ (0, r.jsx)(Z, { className: "size-5" })
}), m = ({ primaryAction: e, secondaryAction: t, stacked: s = !1 }) => !e && !t ? null : s ? /* @__PURE__ */ (0, r.jsxs)("div", {
  className: "flex flex-col gap-2",
  children: [e && /* @__PURE__ */ (0, r.jsx)("button", {
    type: "button",
    onClick: e.onClick,
    className: "w-full rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90 transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
    children: e.label
  }), t && /* @__PURE__ */ (0, r.jsx)("button", {
    type: "button",
    onClick: t.onClick,
    className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm font-semibold text-secondary-foreground hover:bg-card-hover transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
    children: t.label
  })]
}) : /* @__PURE__ */ (0, r.jsxs)("div", {
  className: "flex items-center gap-3",
  children: [e && /* @__PURE__ */ (0, r.jsx)("button", {
    type: "button",
    onClick: e.onClick,
    className: "min-h-9 py-1.5 text-sm font-semibold text-primary hover:text-primary/80 rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
    children: e.label
  }), t && /* @__PURE__ */ (0, r.jsx)("button", {
    type: "button",
    onClick: t.onClick,
    className: "min-h-9 py-1.5 text-sm font-semibold text-secondary-foreground hover:text-foreground rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
    children: t.label
  })]
}), y = l.memo(function({ variant: t = "primary", title: s, supportingText: i, showCloseButton: p = !0, onClose: w, primaryAction: n, secondaryAction: o, icon: c, avatarProps: k, timestamp: b, imageSrc: d, imageAlt: v, progressValue: j = 0, progressLabel: z, stackedActions: x = !1, className: E, ...I }) {
  const u = n || o, P = () => {
    switch (t) {
      case "primary":
      case "success":
      case "warning":
      case "error":
        return /* @__PURE__ */ (0, r.jsx)(X, { variant: t });
      case "gray":
        return c ? /* @__PURE__ */ (0, r.jsx)(f, { children: c }) : /* @__PURE__ */ (0, r.jsx)(f, { children: /* @__PURE__ */ (0, r.jsx)(g, { className: "size-5" }) });
      case "avatar":
        return /* @__PURE__ */ (0, r.jsx)("div", {
          className: "relative",
          children: /* @__PURE__ */ (0, r.jsx)(M, {
            size: "md",
            indicator: "online",
            ...k
          })
        });
      case "image":
        return d ? /* @__PURE__ */ (0, r.jsx)("div", {
          className: "size-[72px] shrink-0 overflow-hidden rounded-lg",
          children: /* @__PURE__ */ (0, r.jsx)("img", {
            src: d,
            alt: v || "Notification image",
            loading: "lazy",
            className: "size-full object-cover"
          })
        }) : null;
      case "progress":
        return c ? /* @__PURE__ */ (0, r.jsx)(f, { children: c }) : /* @__PURE__ */ (0, r.jsx)(f, { children: /* @__PURE__ */ (0, r.jsx)(g, { className: "size-5" }) });
      default:
        return null;
    }
  }, V = () => t === "progress" ? /* @__PURE__ */ (0, r.jsxs)("div", {
    className: "flex min-w-0 flex-1 flex-col gap-4 pe-10",
    children: [
      /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex flex-col gap-1",
        children: [/* @__PURE__ */ (0, r.jsx)("h3", {
          className: "text-sm font-semibold text-foreground",
          children: s
        }), i && /* @__PURE__ */ (0, r.jsx)("p", {
          className: "text-sm text-secondary-foreground",
          children: i
        })]
      }),
      /* @__PURE__ */ (0, r.jsx)(D, {
        value: j,
        size: "md",
        showValue: !0,
        labelPosition: "inline",
        valueFormat: () => z || `${j}%`
      }),
      u && /* @__PURE__ */ (0, r.jsx)(m, {
        primaryAction: n,
        secondaryAction: o,
        stacked: x
      })
    ]
  }) : t === "avatar" ? /* @__PURE__ */ (0, r.jsxs)("div", {
    className: "flex min-w-0 flex-1 flex-col gap-3 pe-10",
    children: [/* @__PURE__ */ (0, r.jsxs)("div", {
      className: "flex flex-col gap-1",
      children: [/* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex items-center gap-2",
        children: [/* @__PURE__ */ (0, r.jsx)("h3", {
          className: "text-sm font-semibold text-foreground",
          children: s
        }), b && /* @__PURE__ */ (0, r.jsx)("span", {
          className: "text-sm text-quaternary-foreground",
          children: b
        })]
      }), i && /* @__PURE__ */ (0, r.jsx)("p", {
        className: "text-sm text-secondary-foreground",
        children: i
      })]
    }), u && /* @__PURE__ */ (0, r.jsx)(m, {
      primaryAction: n,
      secondaryAction: o,
      stacked: x
    })]
  }) : t === "image" ? /* @__PURE__ */ (0, r.jsxs)("div", {
    className: "flex min-w-0 flex-1 flex-col gap-3 pe-10",
    children: [
      /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex flex-col gap-1",
        children: [/* @__PURE__ */ (0, r.jsx)("h3", {
          className: "text-sm font-semibold text-foreground",
          children: s
        }), i && /* @__PURE__ */ (0, r.jsx)("p", {
          className: "text-sm text-secondary-foreground",
          children: i
        })]
      }),
      d && /* @__PURE__ */ (0, r.jsx)("div", {
        className: "w-full aspect-video overflow-hidden rounded-lg",
        children: /* @__PURE__ */ (0, r.jsx)("img", {
          src: d,
          alt: v || "Notification image",
          loading: "lazy",
          className: "size-full object-cover"
        })
      }),
      u && /* @__PURE__ */ (0, r.jsx)(m, {
        primaryAction: n,
        secondaryAction: o,
        stacked: x
      })
    ]
  }) : /* @__PURE__ */ (0, r.jsxs)("div", {
    className: "flex min-w-0 flex-1 flex-col gap-3 pe-10 pt-0.5",
    children: [/* @__PURE__ */ (0, r.jsxs)("div", {
      className: "flex flex-col gap-1",
      children: [/* @__PURE__ */ (0, r.jsx)("h3", {
        className: "text-sm font-semibold text-foreground",
        children: s
      }), i && /* @__PURE__ */ (0, r.jsx)("p", {
        className: "text-sm text-secondary-foreground",
        children: i
      })]
    }), u && /* @__PURE__ */ (0, r.jsx)(m, {
      primaryAction: n,
      secondaryAction: o
    })]
  });
  return /* @__PURE__ */ (0, r.jsxs)("article", {
    "data-slot": "notification-item",
    className: h(H({ variant: t }), "transition-shadow duration-200 ease-out hover:shadow-md motion-reduce:transition-none", E),
    ...I,
    children: [
      P(),
      V(),
      p && /* @__PURE__ */ (0, r.jsx)(F, { onClick: w })
    ]
  });
});
y.displayName = "NotificationItem";
var R = B();
function S(e) {
  return { onClose: (t) => {
    e.dispatchEvent(new CustomEvent("close", {
      detail: t,
      bubbles: !0,
      composed: !0
    }));
  } };
}
function G(e) {
  const { _hostElement: t, ...s } = e, i = l.useMemo(() => t ? S(t) : {}, [t]);
  return l.createElement(y, {
    ...s,
    ...i
  });
}
var a = {
  variant: "string",
  title: "string",
  supportingText: "string",
  showCloseButton: "boolean",
  primaryAction: "string",
  secondaryAction: "string",
  icon: "json",
  avatarProps: "string",
  timestamp: "string",
  imageSrc: "string",
  imageAlt: "string",
  progressValue: "number",
  progressLabel: "string",
  stackedActions: "boolean"
};
function N(e, t) {
  if (e !== null)
    switch (t) {
      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 C = 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 s of Array.from(this.childNodes))
      s.nodeType === Node.TEXT_NODE && !s.textContent?.trim() || e.push(s);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((s) => this._childrenContainer.appendChild(s)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, R.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, s) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(a).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const s = a[e] || "string";
    this._props[e] = this._parseValue(t, s), this._render();
  }
  _parseValue(e, t) {
    if (t === "boolean" && typeof e == "boolean" || t === "number" && typeof e == "number" || t === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (t) {
      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 t = e.replace(/([A-Z])/g, "-$1").toLowerCase(), s = a[e] || "string";
    return N(this.getAttribute(t), s);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [s, i] of Object.entries(a)) if (s in this._props) e[s] = this._props[s];
    else {
      const p = s.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[s] = N(this.getAttribute(p), i);
    }
    const t = l.createElement(G, {
      ...e,
      _hostElement: this
    }, l.createElement("span", {
      ref: (s) => {
        s && this._childrenContainer && s.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(a)) Object.defineProperty(C.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-notification-item") && customElements.define("hf-notification-item", C);
export {
  C as NotificationItemWC,
  C as default
};

//# sourceMappingURL=hf-notification-item.js.map