import { o as I } from "./rolldown-runtime.js";
import { i as W, n as Z, t as J } from "./vendor/react.js";
import { t as X } from "./arrow-down.js";
import { t as B } from "./arrow-up.js";
import { t as H } from "./dist.js";
import { t as h } from "./utils.js";
import { n as U } from "./LineChart.js";
import { t as Y } from "./BarChart.js";
var a = /* @__PURE__ */ I(W(), 1), s = J(), G = H("bg-background border border-border rounded-xl shadow-sm flex flex-col w-full", {
  variants: { size: {
    sm: "gap-3 p-3",
    md: "gap-5 p-5",
    lg: "gap-6 p-6"
  } },
  defaultVariants: { size: "md" }
}), K = {
  sm: "text-sm",
  md: "text-md",
  lg: "text-lg"
}, Q = {
  sm: "text-display-xs",
  md: "text-display-sm",
  lg: "text-display-md"
}, A = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-base"
}, ee = {
  positive: "text-success",
  negative: "text-destructive",
  neutral: "text-muted-foreground"
};
function E({ value: e, title: t, description: r = "vs last month", change: l, changeOverride: d, changeSentiment: V = "neutral", data: n, series: o, chartType: b = "line", strokeWidth: z = 2, showArea: M = !0, showDots: S = !1, curveType: k = "smooth", valueFormatter: D = (u) => u.toLocaleString(), changeFormatter: F = (u) => `${Math.abs(u).toFixed(0)}%`, size: m = "md", className: L, ...O }) {
  const [u, f] = (0, a.useState)(0), C = (0, a.useRef)(!1), y = (0, a.useRef)(null);
  (0, a.useEffect)(() => {
    if (C.current) {
      f(e);
      return;
    }
    C.current = !0;
    const i = y.current?.ownerDocument.defaultView;
    if (i && i.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      f(e);
      return;
    }
    const c = 600, x = performance.now();
    let _;
    const w = (q) => {
      const R = q - x, N = Math.min(R / c, 1), $ = 1 - (1 - N) ** 3;
      f(Math.round($ * e)), N < 1 ? _ = requestAnimationFrame(w) : f(e);
    };
    return _ = requestAnimationFrame(w), () => cancelAnimationFrame(_);
  }, [e]);
  const g = (0, a.useMemo)(() => {
    if (d !== void 0) return d;
    if (l !== void 0) return l;
    if (!n || n.length < 2 || !o || o.length === 0) return;
    const i = o[0].id, c = n[0].values[i], x = n[n.length - 1].values[i];
    if (!(c === 0 || c === void 0))
      return (x - c) / c * 100;
  }, [
    n,
    o,
    l,
    d
  ]), j = g && g > 0 ? "up" : "down", P = () => {
    if (!n || !o) return null;
    const i = {
      data: n,
      series: o,
      size: "sm",
      showYAxis: !1,
      showXAxis: !1,
      showTooltip: !1,
      className: "h-14 w-28"
    };
    return b === "bar" ? /* @__PURE__ */ (0, s.jsx)(Y, { ...i }) : /* @__PURE__ */ (0, s.jsx)(U, {
      ...i,
      strokeWidth: z,
      showDots: S,
      curveType: k,
      showArea: b === "area" || M
    });
  };
  return /* @__PURE__ */ (0, s.jsxs)("div", {
    ref: y,
    "data-slot": "metric-card",
    className: h(G({ size: m }), "transition-shadow duration-200 ease-out hover:shadow-md motion-reduce:transition-none", L),
    ...O,
    children: [t && /* @__PURE__ */ (0, s.jsx)("h3", {
      className: h("font-semibold text-foreground", K[m || "md"]),
      children: t
    }), /* @__PURE__ */ (0, s.jsxs)("div", {
      className: "flex items-end gap-4",
      children: [/* @__PURE__ */ (0, s.jsxs)("div", {
        className: "flex flex-col gap-3 flex-1 min-w-0",
        children: [/* @__PURE__ */ (0, s.jsx)("div", {
          className: h("font-semibold text-foreground", Q[m || "md"]),
          children: D(u)
        }), g !== void 0 && /* @__PURE__ */ (0, s.jsxs)("div", {
          className: "flex items-center gap-2",
          children: [/* @__PURE__ */ (0, s.jsxs)("div", {
            className: h("inline-flex items-center gap-0.5 font-medium", A[m || "md"], ee[V]),
            children: [
              j === "up" ? /* @__PURE__ */ (0, s.jsx)(B, {
                className: "size-4",
                "aria-hidden": "true"
              }) : /* @__PURE__ */ (0, s.jsx)(X, {
                className: "size-4",
                "aria-hidden": "true"
              }),
              /* @__PURE__ */ (0, s.jsx)("span", {
                className: "sr-only",
                children: j === "up" ? "Increased" : "Decreased"
              }),
              /* @__PURE__ */ (0, s.jsx)("span", { children: F(g) })
            ]
          }), r && /* @__PURE__ */ (0, s.jsx)("span", {
            className: h("font-medium text-muted-foreground", A[m || "md"]),
            children: r
          })]
        })]
      }), n && o && /* @__PURE__ */ (0, s.jsx)("div", {
        "aria-hidden": "true",
        inert: !0,
        children: P()
      })]
    })]
  });
}
E.displayName = "MetricCard";
var te = Z(), p = {
  variant: "string",
  size: "string",
  value: "number",
  title: "string",
  description: "string",
  change: "number",
  changeOverride: "number",
  changeSentiment: "string",
  data: "json",
  series: "json",
  chartType: "string",
  strokeWidth: "number",
  showArea: "boolean",
  showDots: "boolean",
  curveType: "string",
  valueFormatter: "json",
  changeFormatter: "json"
};
function v(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 T = 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 t = document.createElement("div");
    for (t.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(t), this._root = (0, te.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(p).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const r = p[e] || "string";
    this._props[e] = this._parseValue(t, r), 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(), r = p[e] || "string";
    return v(this.getAttribute(t), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [r, l] of Object.entries(p)) if (r in this._props) e[r] = this._props[r];
    else {
      const d = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = v(this.getAttribute(d), l);
    }
    const t = a.createElement(E, {
      ...e,
      _hostElement: this
    }, a.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(p)) Object.defineProperty(T.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-metric-card") && customElements.define("hf-metric-card", T);
export {
  T as MetricCardWC,
  T as default
};

//# sourceMappingURL=hf-metric-card.js.map