import { o as A } from "./rolldown-runtime.js";
import { i as M, n as P, t as V } from "./vendor/react.js";
import { t as O } from "./createLucideIcon.js";
import { t as S } from "./calendar.js";
import { t as T } from "./clock.js";
import { t as L } from "./settings.js";
import { t as R } from "./Avatar.js";
import { t as I } from "./x.js";
import { t as j } from "./proxy.js";
import { t as y } from "./use-reduced-motion.js";
import { t as f } from "./Button.js";
import { t as C } from "./dist.js";
import { t as l } from "./utils.js";
import { t as B } from "./scroll-area.js";
var W = [
  ["path", {
    d: "M10.268 21a2 2 0 0 0 3.464 0",
    key: "vwvbt9"
  }],
  ["path", {
    d: "M22 8c0-2.3-.8-4.3-2-6",
    key: "5bb3ad"
  }],
  ["path", {
    d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326",
    key: "11g9vi"
  }],
  ["path", {
    d: "M4 2C2.8 3.7 2 5.7 2 8",
    key: "tap9e0"
  }]
], q = O("bell-ring", W), h = /* @__PURE__ */ A(M(), 1), t = V(), Z = C("rounded-full shrink-0 bg-primary", {
  variants: { size: {
    sm: "size-2",
    md: "size-2.5"
  } },
  defaultVariants: { size: "sm" }
}), $ = {
  hidden: {
    opacity: 0,
    y: 8
  },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.2,
      ease: [
        0,
        0,
        0.2,
        1
      ]
    }
  }
};
function H({ avatarSrc: e, avatarFallback: s, name: r, time: i, title: a, description: x, unread: b = !0, showOnlineStatus: N = !0, type: c = "message", meetingDate: d, meetingTime: m, actions: p, highlightedSegments: o, onClick: z, className: E }) {
  return /* @__PURE__ */ (0, t.jsxs)(j.li, {
    "data-slot": "notification-panel-item",
    className: l("relative flex gap-3 items-start w-full rounded-lg list-none", "transition-colors duration-150 ease-out hover:bg-accent/50 motion-reduce:transition-none", E),
    variants: $,
    children: [/* @__PURE__ */ (0, t.jsx)(R, {
      src: e,
      fallback: s || r,
      size: "lg",
      indicator: N ? "online" : void 0,
      className: "shrink-0"
    }), /* @__PURE__ */ (0, t.jsxs)("div", {
      className: "flex-1 min-w-0 flex flex-col gap-3",
      children: [
        /* @__PURE__ */ (0, t.jsxs)("div", {
          className: "flex flex-col gap-1",
          children: [
            /* @__PURE__ */ (0, t.jsxs)("div", {
              className: "flex items-center gap-2 flex-wrap",
              children: [/* @__PURE__ */ (0, t.jsx)("span", {
                className: "text-sm font-medium text-secondary-foreground",
                children: r
              }), /* @__PURE__ */ (0, t.jsx)("span", {
                className: "text-xs text-muted-foreground",
                children: i
              })]
            }),
            /* @__PURE__ */ (0, t.jsxs)("div", {
              className: "flex items-center gap-2",
              children: [b && /* @__PURE__ */ (0, t.jsx)("span", {
                className: l(Z(), "animate-pulse motion-reduce:animate-none"),
                "aria-hidden": "true"
              }), /* @__PURE__ */ (0, t.jsx)("button", {
                type: "button",
                className: l("text-sm font-bold text-secondary-foreground text-start", "cursor-pointer bg-transparent border-0 p-0", "after:absolute after:inset-0 after:rounded-lg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:rounded-sm"),
                onClick: z,
                "aria-label": [
                  b && "Unread",
                  c !== "message" && c,
                  "notification:",
                  a
                ].filter(Boolean).join(" "),
                children: a
              })]
            }),
            x && !o && /* @__PURE__ */ (0, t.jsx)("p", {
              className: "text-sm text-muted-foreground line-clamp-2",
              children: x
            }),
            o && /* @__PURE__ */ (0, t.jsx)("p", {
              className: "text-sm text-muted-foreground line-clamp-2",
              children: o.map((n, g) => n.highlighted ? /* @__PURE__ */ (0, t.jsx)("span", {
                className: "font-medium text-primary",
                children: n.text
              }, g) : /* @__PURE__ */ (0, t.jsx)("span", { children: n.text }, g))
            })
          ]
        }),
        c === "meeting" && (d || m) && /* @__PURE__ */ (0, t.jsxs)("div", {
          className: "flex items-center gap-1 flex-wrap",
          children: [d && /* @__PURE__ */ (0, t.jsxs)("div", {
            className: "flex items-center gap-2 flex-1 min-w-0",
            children: [/* @__PURE__ */ (0, t.jsx)(S, { className: "size-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-sm text-muted-foreground truncate",
              children: d
            })]
          }), m && /* @__PURE__ */ (0, t.jsxs)("div", {
            className: "flex items-center gap-2 flex-1 min-w-0",
            children: [/* @__PURE__ */ (0, t.jsx)(T, { className: "size-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-sm text-muted-foreground truncate",
              children: m
            })]
          })]
        }),
        p && p.length > 0 && /* @__PURE__ */ (0, t.jsx)("div", {
          className: "flex items-center gap-3 relative z-10",
          children: p.map((n, g) => /* @__PURE__ */ (0, t.jsx)(f, {
            appearance: "link",
            variant: "primary",
            size: "sm",
            className: l("min-h-11 px-1", n.primary ? "text-primary font-semibold" : "text-secondary-foreground font-semibold"),
            onClick: n.onClick,
            children: n.label
          }, g))
        })
      ]
    })]
  });
}
H.displayName = "NotificationPanelItem";
function J({ title: e, children: s, className: r }) {
  const i = y(), a = (0, h.useMemo)(() => ({ visible: { transition: { staggerChildren: i ? 0 : 0.05 } } }), [i]);
  return /* @__PURE__ */ (0, t.jsxs)("div", {
    "data-slot": "notification-section",
    className: l("flex flex-col gap-4", r),
    children: [/* @__PURE__ */ (0, t.jsxs)("div", {
      className: "flex flex-col gap-3",
      children: [/* @__PURE__ */ (0, t.jsx)("h3", {
        className: "text-sm font-medium text-secondary-foreground",
        children: e
      }), /* @__PURE__ */ (0, t.jsx)("div", {
        className: "h-px bg-surface-2",
        "aria-hidden": "true"
      })]
    }), /* @__PURE__ */ (0, t.jsx)(j.ul, {
      className: "flex flex-col gap-6",
      initial: "hidden",
      animate: "visible",
      variants: a,
      children: s
    })]
  });
}
J.displayName = "NotificationSection";
var v = "min-h-11 px-1 text-primary font-normal", X = C("relative flex flex-col overflow-hidden", {
  variants: { variant: {
    desktop: "bg-muted border border-border rounded-3xl shadow-3xl",
    mobile: "bg-background shadow-xl"
  } },
  defaultVariants: { variant: "desktop" }
});
function k({ title: e = "Notifications", variant: s = "desktop", onSettingsClick: r, onMarkAllRead: i, onClearAll: a, onClose: x, children: b, showOverlay: N = !1, width: c = 573, height: d = 675, className: m }) {
  const p = y(), o = /* @__PURE__ */ (0, t.jsxs)("section", {
    "data-slot": "notification-panel",
    "aria-label": e,
    className: l(X({ variant: s }), m),
    style: {
      width: s === "desktop" ? c : "100%",
      maxWidth: "100%",
      height: s === "desktop" ? d : "100%"
    },
    children: [/* @__PURE__ */ (0, t.jsx)("div", {
      className: "flex flex-col pb-4",
      children: /* @__PURE__ */ (0, t.jsxs)("div", {
        className: "flex flex-col gap-6 px-6",
        children: [
          /* @__PURE__ */ (0, t.jsxs)("div", {
            className: "flex gap-4 items-start pt-6",
            children: [/* @__PURE__ */ (0, t.jsx)("div", {
              className: "shrink-0 size-10 flex items-center justify-center bg-card/60 border border-border rounded-lg shadow-sm",
              children: /* @__PURE__ */ (0, t.jsx)(j.span, {
                animate: p ? void 0 : { rotate: [
                  0,
                  12,
                  -10,
                  6,
                  -3,
                  0
                ] },
                transition: {
                  duration: 0.6,
                  delay: 0.3,
                  ease: "easeOut"
                },
                className: "flex",
                children: /* @__PURE__ */ (0, t.jsx)(q, { className: "size-5 text-secondary-foreground" })
              })
            }), /* @__PURE__ */ (0, t.jsx)("div", {
              className: "flex-1 flex flex-col gap-0.5 justify-center",
              children: /* @__PURE__ */ (0, t.jsx)("h2", {
                className: "text-xl font-semibold text-foreground",
                children: e
              })
            })]
          }),
          /* @__PURE__ */ (0, t.jsxs)("div", {
            className: "flex items-start justify-between",
            children: [/* @__PURE__ */ (0, t.jsx)(f, {
              appearance: "link",
              variant: "primary",
              size: "sm",
              className: v,
              startIcon: /* @__PURE__ */ (0, t.jsx)(L, { className: "size-5" }),
              onClick: r,
              children: "Settings"
            }), /* @__PURE__ */ (0, t.jsxs)("div", {
              className: "flex items-start gap-1",
              children: [
                /* @__PURE__ */ (0, t.jsx)(f, {
                  appearance: "link",
                  variant: "primary",
                  size: "sm",
                  className: v,
                  onClick: i,
                  children: "Mark all read"
                }),
                /* @__PURE__ */ (0, t.jsx)("div", {
                  className: "size-6 flex items-center justify-center self-center",
                  children: /* @__PURE__ */ (0, t.jsx)("div", { className: "w-px h-5 bg-surface-2" })
                }),
                /* @__PURE__ */ (0, t.jsx)(f, {
                  appearance: "link",
                  variant: "primary",
                  size: "sm",
                  className: v,
                  onClick: a,
                  children: "Clear all"
                })
              ]
            })]
          }),
          /* @__PURE__ */ (0, t.jsx)(f, {
            appearance: "ghost",
            variant: "secondary",
            size: "icon",
            "aria-label": "Close notifications",
            className: "absolute top-3 end-4 size-10 text-muted-foreground hover:text-foreground transition-colors duration-150 ease-out [&_svg]:transition-transform [&_svg]:duration-200 [&_svg]:ease-out hover:[&_svg]:rotate-90 motion-reduce:[&_svg]:transition-none",
            onClick: x,
            children: /* @__PURE__ */ (0, t.jsx)(I, { className: "size-5" })
          })
        ]
      })
    }), /* @__PURE__ */ (0, t.jsx)(B, {
      className: "flex-1 min-h-0",
      children: /* @__PURE__ */ (0, t.jsx)("div", {
        className: "flex flex-col gap-4 px-6 pb-6",
        "aria-live": "polite",
        children: b
      })
    })]
  });
  return s === "mobile" && N ? /* @__PURE__ */ (0, t.jsxs)("div", {
    className: "relative flex items-start ps-6 h-full w-full",
    children: [/* @__PURE__ */ (0, t.jsx)("div", { className: "absolute inset-0 bg-foreground/70 backdrop-blur" }), /* @__PURE__ */ (0, t.jsx)("div", {
      className: "relative flex-1 h-full",
      children: o
    })]
  }) : o;
}
k.displayName = "NotificationPanel";
var D = P();
function U(e) {
  return {
    onSettingsClick: (s) => {
      e.dispatchEvent(new CustomEvent("settings-click", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    },
    onMarkAllRead: (s) => {
      e.dispatchEvent(new CustomEvent("mark-all-read", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    },
    onClearAll: (s) => {
      e.dispatchEvent(new CustomEvent("clear-all", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    },
    onClose: (s) => {
      e.dispatchEvent(new CustomEvent("close", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function F(e) {
  const { _hostElement: s, ...r } = e, i = h.useMemo(() => s ? U(s) : {}, [s]);
  return h.createElement(k, {
    ...r,
    ...i
  });
}
var u = {
  variant: "string",
  size: "string",
  title: "string",
  showOverlay: "boolean",
  width: "number",
  height: "number",
  className: "string"
};
function _(e, s) {
  if (e !== null)
    switch (s) {
      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 w = 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 r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || e.push(r);
    const s = document.createElement("div");
    for (s.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(s), this._root = (0, D.createRoot)(s), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, s, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(u).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, s) {
    const r = u[e] || "string";
    this._props[e] = this._parseValue(s, r), this._render();
  }
  _parseValue(e, s) {
    if (s === "boolean" && typeof e == "boolean" || s === "number" && typeof e == "number" || s === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (s) {
      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 s = e.replace(/([A-Z])/g, "-$1").toLowerCase(), r = u[e] || "string";
    return _(this.getAttribute(s), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [r, i] of Object.entries(u)) if (r in this._props) e[r] = this._props[r];
    else {
      const a = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = _(this.getAttribute(a), i);
    }
    const s = h.createElement(F, {
      ...e,
      _hostElement: this
    }, h.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(s);
  }
};
for (const e of Object.keys(u)) Object.defineProperty(w.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(s) {
    this._setProp(e, s);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-notification-panel") && customElements.define("hf-notification-panel", w);
export {
  w as NotificationPanelWC,
  w as default
};

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