import { o as U } from "./rolldown-runtime.js";
import { i as Z, n as F, t as G } from "./vendor/react.js";
import { t as A } from "./createLucideIcon.js";
import { t as H } from "./arrow-up.js";
import { t as S } from "./ellipsis-vertical.js";
import { t as J } from "./Button.js";
import { S as X, _ as Q, p as Y, x as O } from "./vendor/recharts.js";
import { t as E } from "./dist.js";
import { t as c } from "./utils.js";
import { n as V, t as D } from "./use-reduced-motion2.js";
var T = [["path", {
  d: "M7 7h10v10",
  key: "1tivn9"
}], ["path", {
  d: "M7 17 17 7",
  key: "1vkiza"
}]], ee = A("arrow-up-right", T), te = [["path", {
  d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
  key: "1nclc0"
}], ["circle", {
  cx: "12",
  cy: "12",
  r: "3",
  key: "1v7zrd"
}]], re = A("eye", te), se = [["path", {
  d: "M16 7h6v6",
  key: "box55l"
}], ["path", {
  d: "m22 7-8.5 8.5-5-5L2 17",
  key: "1t1m79"
}]], M = A("trending-up", se), j = /* @__PURE__ */ U(Z(), 1), e = G(), ie = E("relative shrink-0", {
  variants: { variant: {
    line: "",
    area: "",
    layers: ""
  } },
  defaultVariants: { variant: "line" }
});
function b({ data: t, color: s, width: r, height: o = 56, variant: n = "line", showMarker: x = !0, trend: a = "positive", className: p, ...u }) {
  const m = j.useId(), v = !D(), d = s || (a === "positive" ? "var(--success)" : "var(--destructive)"), g = t.map((i, w) => ({
    index: w,
    value: i
  })), y = { value: { color: d } }, C = t[t.length - 1], l = Math.max(...t), h = l === 0 ? 50 : Math.max(10, Math.min(90, 100 - C / l * 100));
  return /* @__PURE__ */ (0, e.jsxs)("div", {
    "data-slot": "metric-mini-chart",
    "aria-hidden": "true",
    inert: !0,
    className: c(ie({ variant: n }), p),
    style: {
      width: r,
      height: o
    },
    ...u,
    children: [/* @__PURE__ */ (0, e.jsx)(V, {
      config: y,
      className: "size-full",
      children: n === "layers" ? /* @__PURE__ */ (0, e.jsxs)(Y, {
        data: g,
        margin: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        children: [/* @__PURE__ */ (0, e.jsx)("defs", { children: /* @__PURE__ */ (0, e.jsxs)("linearGradient", {
          id: `fillArea${m}`,
          x1: "0",
          y1: "0",
          x2: "0",
          y2: "1",
          children: [/* @__PURE__ */ (0, e.jsx)("stop", {
            offset: "0%",
            stopColor: d,
            stopOpacity: 0.3
          }), /* @__PURE__ */ (0, e.jsx)("stop", {
            offset: "100%",
            stopColor: d,
            stopOpacity: 0.05
          })]
        }) }), /* @__PURE__ */ (0, e.jsx)(O, {
          type: "monotone",
          dataKey: "value",
          stroke: d,
          strokeWidth: 2,
          fill: `url(#fillArea${m})`,
          isAnimationActive: v
        })]
      }) : /* @__PURE__ */ (0, e.jsxs)(Q, {
        data: g,
        margin: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        children: [n === "area" && /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [/* @__PURE__ */ (0, e.jsx)("defs", { children: /* @__PURE__ */ (0, e.jsxs)("linearGradient", {
          id: `fillLine${m}`,
          x1: "0",
          y1: "0",
          x2: "0",
          y2: "1",
          children: [/* @__PURE__ */ (0, e.jsx)("stop", {
            offset: "0%",
            stopColor: d,
            stopOpacity: 0.15
          }), /* @__PURE__ */ (0, e.jsx)("stop", {
            offset: "100%",
            stopColor: d,
            stopOpacity: 0.02
          })]
        }) }), /* @__PURE__ */ (0, e.jsx)(O, {
          type: "monotone",
          dataKey: "value",
          stroke: "none",
          fill: `url(#fillLine${m})`,
          isAnimationActive: v
        })] }), /* @__PURE__ */ (0, e.jsx)(X, {
          type: "monotone",
          dataKey: "value",
          stroke: d,
          strokeWidth: 2,
          dot: !1,
          isAnimationActive: v
        })]
      })
    }), x && n === "line" && /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "absolute",
      style: {
        right: 0,
        top: `${h}%`,
        transform: "translate(50%, -50%)"
      },
      children: [/* @__PURE__ */ (0, e.jsx)("div", {
        className: "size-[19px] rounded-full opacity-20",
        style: { backgroundColor: d }
      }), /* @__PURE__ */ (0, e.jsx)("div", {
        className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[10px] rounded-full bg-background border-2",
        style: { borderColor: d }
      })]
    })]
  });
}
b.displayName = "MetricMiniChart";
var oe = E("inline-flex items-center gap-0.5", {
  variants: {
    variant: {
      default: "",
      badge: "bg-background border border-border rounded-md shadow-xs px-1.5 py-0.5"
    },
    trend: {
      positive: "",
      negative: ""
    }
  },
  defaultVariants: {
    variant: "default",
    trend: "positive"
  }
});
function f({ value: t, variant: s = "default", trend: r = "positive", icon: o = "arrow", className: n, ...x }) {
  const a = r === "positive" ? "var(--success)" : "var(--destructive)", p = s === "badge" ? "text-secondary-foreground" : r === "positive" ? "text-success" : "text-destructive", u = o === "none" ? null : o === "trend" ? M : o === "arrow-right" ? ee : H, m = s === "badge" ? 12 : 16;
  return /* @__PURE__ */ (0, e.jsxs)("div", {
    className: c(oe({
      variant: s,
      trend: r
    }), n),
    ...x,
    children: [
      u && /* @__PURE__ */ (0, e.jsx)(u, {
        "aria-hidden": "true",
        width: m,
        height: m,
        color: a,
        className: c(r === "negative" && "rotate-180")
      }),
      /* @__PURE__ */ (0, e.jsx)("span", {
        className: "sr-only",
        children: r === "positive" ? "Increased" : "Decreased"
      }),
      /* @__PURE__ */ (0, e.jsx)("span", {
        className: c("text-sm font-medium", p),
        children: t
      })
    ]
  });
}
f.displayName = "MetricChange";
var $ = E("relative flex flex-col gap-2 p-5 bg-background rounded-xl border border-border shadow-xs transition-shadow duration-200 ease-out hover:shadow-sm motion-reduce:transition-none", {
  variants: {
    type: {
      simple: "",
      "icon-01": "",
      "icon-02": "",
      "icon-03": "",
      "icon-04": "flex-row items-center",
      "chart-01": "",
      "chart-02": "",
      "chart-03": "",
      "chart-04": "p-0 bg-transparent border-0 shadow-none"
    },
    breakpoint: {
      desktop: "",
      mobile: ""
    }
  },
  defaultVariants: {
    type: "simple",
    breakpoint: "desktop"
  }
}), W = j.memo(function({ title: s, value: r, changeValue: o, changeTrend: n = "positive", changeIcon: x, comparisonText: a, subtitle: p, showDropdown: u = !1, showActions: m = !1, onViewReport: v, onDropdownClick: d, icon: g, iconBgColor: y, iconColor: C, chartData: l, featuredIconVariant: h = "circle", type: i = "simple", breakpoint: w = "desktop", className: L, children: z, ...I }) {
  const B = g || /* @__PURE__ */ (0, e.jsx)(M, {
    width: 24,
    height: 24
  }), R = i === "icon-01" ? h === "modern" ? "var(--muted)" : "var(--success-muted)" : i === "icon-02" || i === "icon-03" || i === "icon-04" ? "var(--muted)" : "var(--success-muted)", K = i === "icon-01" ? h === "modern" ? "var(--secondary-foreground)" : "var(--success)" : i === "icon-02" ? "var(--secondary-foreground)" : "var(--success)", _ = y || R, k = C || K;
  return i === "chart-04" ? /* @__PURE__ */ (0, e.jsx)("div", {
    "data-slot": "metric-item",
    className: c($({
      type: i,
      breakpoint: w
    }), L),
    ...I,
    children: /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "flex flex-col gap-0.5 w-full",
      children: [/* @__PURE__ */ (0, e.jsx)("div", {
        className: "flex items-center px-5 pt-3 pb-2 w-full",
        children: /* @__PURE__ */ (0, e.jsx)("p", {
          className: "flex-1 text-sm font-semibold text-foreground",
          children: s
        })
      }), /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "relative bg-background border border-border rounded-xl shadow-xs p-5 flex flex-col gap-5",
        children: [
          /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex flex-wrap items-center gap-3",
            children: [/* @__PURE__ */ (0, e.jsx)("p", {
              className: "text-display-sm font-semibold text-foreground",
              children: typeof r == "number" ? r.toLocaleString() : r
            }), o && /* @__PURE__ */ (0, e.jsxs)("div", {
              className: "flex items-center gap-2",
              children: [/* @__PURE__ */ (0, e.jsx)(f, {
                value: o,
                trend: n,
                icon: x ?? "trend"
              }), a && /* @__PURE__ */ (0, e.jsx)("span", {
                className: "text-sm font-medium text-muted-foreground",
                children: a
              })]
            })]
          }),
          z || (l ? /* @__PURE__ */ (0, e.jsx)(b, {
            data: l,
            width: void 0,
            height: 56,
            variant: "line",
            showMarker: !1,
            trend: n,
            className: "w-full"
          }) : null),
          u && /* @__PURE__ */ (0, e.jsx)("button", {
            type: "button",
            "aria-label": "More options",
            className: "absolute top-2 end-2 p-3 cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground",
            onClick: d,
            children: /* @__PURE__ */ (0, e.jsx)(S, {
              width: 20,
              height: 20,
              className: "text-muted-foreground"
            })
          })
        ]
      })]
    })
  }) : /* @__PURE__ */ (0, e.jsxs)("div", {
    "data-slot": "metric-item",
    className: c($({
      type: i,
      breakpoint: w
    }), L),
    ...I,
    children: [
      i === "icon-01" && /* @__PURE__ */ (0, e.jsxs)("div", {
        className: c("flex items-center justify-center shrink-0 relative overflow-clip", h === "modern" || h === "square" ? "rounded-[10px] border border-border shadow-xs" : "rounded-full"),
        style: {
          width: 48,
          height: 48,
          backgroundColor: _,
          color: k
        },
        children: [B, h === "modern" && /* @__PURE__ */ (0, e.jsx)("div", {
          className: "absolute inset-0 pointer-events-none rounded-[10px]",
          style: { boxShadow: "var(--shadow-inset-ring)" }
        })]
      }),
      (i === "icon-02" || i === "icon-03") && /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex items-center gap-3 w-full",
        children: [/* @__PURE__ */ (0, e.jsx)("div", {
          className: c("flex items-center justify-center shrink-0", i === "icon-02" ? "rounded-full" : "rounded-lg border border-border shadow-xs"),
          style: {
            width: 48,
            height: 48,
            backgroundColor: _,
            color: k
          },
          children: g || /* @__PURE__ */ (0, e.jsx)(re, {
            width: 24,
            height: 24
          })
        }), /* @__PURE__ */ (0, e.jsx)("p", {
          className: "flex-1 text-base font-semibold text-foreground",
          children: s
        })]
      }),
      i === "icon-04" && /* @__PURE__ */ (0, e.jsx)("div", {
        className: c("flex items-center justify-center shrink-0 rounded-md border border-border shadow-xs"),
        style: {
          width: 40,
          height: 40,
          backgroundColor: _,
          color: k
        },
        children: g || /* @__PURE__ */ (0, e.jsx)(M, {
          width: 20,
          height: 20
        })
      }),
      i !== "icon-02" && i !== "icon-03" && /* @__PURE__ */ (0, e.jsxs)("div", {
        className: c("flex flex-col gap-2", i === "icon-04" ? "flex-1 min-w-0" : "w-full"),
        children: [i === "chart-01" || i === "chart-02" ? /* @__PURE__ */ (0, e.jsx)("p", {
          className: "text-base font-semibold text-foreground",
          children: s
        }) : i === "icon-04" || i === "icon-01" ? /* @__PURE__ */ (0, e.jsx)("p", {
          className: "text-sm font-semibold text-muted-foreground",
          children: s
        }) : /* @__PURE__ */ (0, e.jsx)("p", {
          className: "text-sm font-medium text-muted-foreground",
          children: s
        }), i === "simple" || i === "icon-01" || i === "icon-04" ? /* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex flex-wrap items-center justify-between gap-3 w-full",
          children: [/* @__PURE__ */ (0, e.jsx)("p", {
            className: "text-display-sm font-semibold text-foreground",
            children: typeof r == "number" ? r.toLocaleString() : r
          }), o && a ? /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex items-center gap-2",
            children: [/* @__PURE__ */ (0, e.jsx)(f, {
              value: o,
              trend: n,
              icon: "arrow"
            }), /* @__PURE__ */ (0, e.jsx)("span", {
              className: "text-sm font-medium text-muted-foreground",
              children: a
            })]
          }) : o ? /* @__PURE__ */ (0, e.jsx)(f, {
            value: o,
            trend: n,
            icon: x ?? "arrow-right",
            variant: "badge"
          }) : p ? /* @__PURE__ */ (0, e.jsx)("span", {
            className: "text-sm font-medium text-muted-foreground",
            children: p
          }) : null]
        }) : null]
      }),
      i === "chart-01" && /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex items-end gap-4 w-full",
        children: [/* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex-1 flex flex-col gap-3",
          children: [/* @__PURE__ */ (0, e.jsx)("p", {
            className: "text-display-sm font-semibold text-foreground",
            children: typeof r == "number" ? r.toLocaleString() : r
          }), (o || a) && /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex items-center gap-2",
            children: [o && /* @__PURE__ */ (0, e.jsx)(f, {
              value: o,
              trend: n,
              icon: "arrow"
            }), a && /* @__PURE__ */ (0, e.jsx)("span", {
              className: "text-sm font-medium text-muted-foreground truncate",
              children: a
            })]
          })]
        }), l && /* @__PURE__ */ (0, e.jsx)(b, {
          data: l,
          width: 112,
          height: 56,
          variant: "line",
          trend: n
        })]
      }),
      i === "chart-02" && /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex items-end gap-4 w-full",
        children: [/* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex-1 flex items-start gap-2",
          children: [/* @__PURE__ */ (0, e.jsx)("p", {
            className: "text-display-md font-semibold text-foreground",
            children: typeof r == "number" ? r.toLocaleString() : r
          }), o && /* @__PURE__ */ (0, e.jsx)(f, {
            value: o,
            trend: n,
            icon: "trend"
          })]
        }), l && /* @__PURE__ */ (0, e.jsx)(b, {
          data: l,
          width: 128,
          height: 56,
          variant: "layers",
          showMarker: !1,
          trend: n
        })]
      }),
      i === "chart-03" && /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [/* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex flex-col gap-2 w-full",
        children: [/* @__PURE__ */ (0, e.jsx)("p", {
          className: "text-sm font-medium text-muted-foreground",
          children: s
        }), /* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex flex-wrap items-center justify-between gap-3 w-full",
          children: [/* @__PURE__ */ (0, e.jsx)("p", {
            className: "text-display-sm font-semibold text-foreground",
            children: typeof r == "number" ? r.toLocaleString() : r
          }), (o || a) && /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex items-center gap-2",
            children: [o && /* @__PURE__ */ (0, e.jsx)(f, {
              value: o,
              trend: n,
              icon: "trend"
            }), a && /* @__PURE__ */ (0, e.jsx)("span", {
              className: "text-sm font-medium text-muted-foreground",
              children: a
            })]
          })]
        })]
      }), l && /* @__PURE__ */ (0, e.jsx)(b, {
        data: l,
        height: 72,
        variant: "area",
        showMarker: !1,
        trend: n,
        className: "w-full"
      })] }),
      (i === "icon-02" || i === "icon-03") && /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex items-end gap-4 w-full",
        children: [/* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex-1 flex flex-col gap-3",
          children: [/* @__PURE__ */ (0, e.jsx)("p", {
            className: "text-display-md font-semibold text-foreground",
            children: typeof r == "number" ? r.toLocaleString() : r
          }), (o || a) && /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex items-center gap-2",
            children: [o && /* @__PURE__ */ (0, e.jsx)(f, {
              value: o,
              trend: n,
              icon: i === "icon-03" ? "trend" : "arrow"
            }), a && /* @__PURE__ */ (0, e.jsx)("span", {
              className: "text-sm font-medium text-muted-foreground truncate",
              children: a
            })]
          })]
        }), l && /* @__PURE__ */ (0, e.jsx)(b, {
          data: l,
          width: 112,
          height: 56,
          variant: "line",
          trend: n
        })]
      }),
      u && /* @__PURE__ */ (0, e.jsx)("button", {
        type: "button",
        "aria-label": "More options",
        className: "absolute top-2 end-2 cursor-pointer rounded-sm p-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground",
        onClick: d,
        children: /* @__PURE__ */ (0, e.jsx)(S, {
          width: 20,
          height: 20,
          className: "text-muted-foreground"
        })
      }),
      m && /* @__PURE__ */ (0, e.jsx)("div", {
        className: "flex items-center gap-2 pt-2",
        children: /* @__PURE__ */ (0, e.jsx)(J, {
          appearance: "outline",
          variant: "secondary",
          size: "sm",
          onClick: v,
          children: "View report"
        })
      })
    ]
  });
});
W.displayName = "MetricItem";
var ne = F();
function ae(t) {
  return {
    onViewReport: (s) => {
      t.dispatchEvent(new CustomEvent("view-report", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    },
    onDropdownClick: (s) => {
      t.dispatchEvent(new CustomEvent("dropdown-click", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function le(t) {
  const { _hostElement: s, ...r } = t, o = j.useMemo(() => s ? ae(s) : {}, [s]);
  return j.createElement(W, {
    ...r,
    ...o
  });
}
var N = {
  variant: "string",
  size: "string",
  title: "string",
  value: "string",
  changeValue: "string",
  changeTrend: "string",
  changeIcon: "string",
  comparisonText: "string",
  subtitle: "string",
  showDropdown: "boolean",
  showActions: "boolean",
  icon: "json",
  iconBgColor: "string",
  iconColor: "string",
  chartData: "json",
  featuredIconVariant: "string"
};
function P(t, s) {
  if (t !== null)
    switch (s) {
      case "number":
        return Number(t);
      case "boolean":
        return t !== "false" && t !== "0";
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
}
var q = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const t = [];
    for (const r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || t.push(r);
    const s = document.createElement("div");
    for (s.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", t.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(s), this._root = (0, ne.createRoot)(s), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(t, s, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(N).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(t, s) {
    const r = N[t] || "string";
    this._props[t] = this._parseValue(s, r), this._render();
  }
  _parseValue(t, s) {
    if (s === "boolean" && typeof t == "boolean" || s === "number" && typeof t == "number" || s === "string" && typeof t == "string") return t;
    if (typeof t == "string") switch (s) {
      case "boolean":
        return t !== "false" && t !== "0" && t !== "";
      case "number":
        return Number(t);
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
    return t;
  }
  _getProp(t) {
    if (t in this._props) return this._props[t];
    const s = t.replace(/([A-Z])/g, "-$1").toLowerCase(), r = N[t] || "string";
    return P(this.getAttribute(s), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const t = {};
    for (const [r, o] of Object.entries(N)) if (r in this._props) t[r] = this._props[r];
    else {
      const n = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      t[r] = P(this.getAttribute(n), o);
    }
    const s = j.createElement(le, {
      ...t,
      _hostElement: this
    }, j.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(s);
  }
};
for (const t of Object.keys(N)) Object.defineProperty(q.prototype, t, {
  get() {
    return this._getProp(t);
  },
  set(s) {
    this._setProp(t, s);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-metric-item") && customElements.define("hf-metric-item", q);
export {
  q as MetricItemWC,
  q as default
};

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