import { o as $ } from "./rolldown-runtime.js";
import { i as H, n as q, t as D } from "./vendor/react.js";
import { A as K, T as W, h as Z } from "./vendor/recharts.js";
import { t as F } from "./dist.js";
import { t as g } from "./utils.js";
import { a as I, n as J, o as U, t as X } from "./use-reduced-motion2.js";
import { a as B, i as b, r as G } from "./LineChart.js";
var l = /* @__PURE__ */ $(H(), 1), n = D(), C = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)",
  "var(--chart-4)",
  "var(--chart-5)",
  "var(--border)"
], Q = F("relative flex items-center max-w-full", {
  variants: { size: {
    xxs: "size-[120px]",
    xs: "size-[160px]",
    sm: "size-[200px]",
    md: "size-[240px]",
    lg: "size-[280px]"
  } },
  defaultVariants: { size: "md" }
});
function y({ data: e, series: r, legendPosition: t = "none", hole: h = "none", startAngle: c = 90, showTooltip: N = !0, paddingAngle: E = 2, size: z, className: T, "aria-label": A, ...P }) {
  const f = X(), { highlightedSeries: w, setHighlightedSeries: v, getOpacity: O, dimTransition: S } = B(f), o = l.useMemo(() => e.map((i, s) => i.color || C[s % C.length]), [e]), L = () => {
    switch (h) {
      case "25%":
        return 25;
      case "50%":
        return 50;
      case "75%":
        return 75;
      default:
        return 0;
    }
  }, _ = l.useMemo(() => {
    const i = {};
    return e.forEach((s, d) => {
      const m = b(s.id);
      i[m] = {
        label: s.label,
        color: o[d]
      };
    }), i;
  }, [e, o]), R = r || e.map((i, s) => ({
    id: i.id,
    label: i.label,
    color: o[s]
  })), p = l.useMemo(() => e.map((i, s) => ({
    name: b(i.id),
    displayName: i.label,
    value: i.value,
    fill: o[s]
  })), [e, o]), k = L();
  return /* @__PURE__ */ (0, n.jsxs)("div", {
    className: g("flex", t === "right" ? "flex-row gap-4" : "flex-col gap-4"),
    role: "img",
    "aria-label": A || "Pie chart",
    ...P,
    children: [/* @__PURE__ */ (0, n.jsx)("div", {
      className: g(Q({ size: z }), T),
      children: /* @__PURE__ */ (0, n.jsx)(J, {
        config: _,
        className: "w-full h-full",
        children: /* @__PURE__ */ (0, n.jsxs)(Z, { children: [/* @__PURE__ */ (0, n.jsx)(W, {
          data: p,
          dataKey: "value",
          nameKey: "name",
          cx: "50%",
          cy: "50%",
          innerRadius: `${k}%`,
          outerRadius: "100%",
          startAngle: c,
          endAngle: c - 360,
          paddingAngle: E,
          isAnimationActive: !f,
          children: p.map((i, s) => /* @__PURE__ */ (0, n.jsx)(K, {
            fill: o[s],
            opacity: O(e[s].id),
            style: S
          }, `cell-${i.name}`))
        }), N && /* @__PURE__ */ (0, n.jsx)(I, { content: /* @__PURE__ */ (0, n.jsx)(U, {
          hideLabel: !0,
          formatter: (i, s) => {
            const d = p.find((u) => u.name === s)?.displayName || s, m = e.reduce((u, V) => u + V.value, 0), M = (Number(i) / m * 100).toFixed(1);
            return /* @__PURE__ */ (0, n.jsxs)("div", {
              className: "flex items-center gap-2",
              children: [
                /* @__PURE__ */ (0, n.jsx)("div", {
                  className: "size-2 rounded-full",
                  style: { backgroundColor: _[s]?.color }
                }),
                /* @__PURE__ */ (0, n.jsx)("span", { children: d }),
                /* @__PURE__ */ (0, n.jsxs)("span", {
                  className: "font-medium",
                  children: [
                    Number(i).toLocaleString(),
                    " (",
                    M,
                    "%)"
                  ]
                })
              ]
            });
          }
        }) })] })
      })
    }), t !== "none" && /* @__PURE__ */ (0, n.jsx)(G, {
      series: R,
      position: "right",
      onSeriesHover: v,
      highlightedSeries: w
    })]
  });
}
y.displayName = "PieChart";
var Y = q(), a = {
  variant: "string",
  size: "string",
  data: "json",
  series: "json",
  legendPosition: "string",
  hole: "string",
  startAngle: "number",
  showTooltip: "boolean",
  paddingAngle: "number",
  "aria-label": "string"
};
function x(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 j = 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 t of Array.from(this.childNodes))
      t.nodeType === Node.TEXT_NODE && !t.textContent?.trim() || e.push(t);
    const r = document.createElement("div");
    for (r.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((t) => this._childrenContainer.appendChild(t)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(r), this._root = (0, Y.createRoot)(r), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, r, t) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(a).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, r) {
    const t = a[e] || "string";
    this._props[e] = this._parseValue(r, t), 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(), t = a[e] || "string";
    return x(this.getAttribute(r), t);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [t, h] of Object.entries(a)) if (t in this._props) e[t] = this._props[t];
    else {
      const c = t.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[t] = x(this.getAttribute(c), h);
    }
    const r = l.createElement(y, {
      ...e,
      _hostElement: this
    }, l.createElement("span", {
      ref: (t) => {
        t && this._childrenContainer && t.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(r);
  }
};
for (const e of Object.keys(a)) Object.defineProperty(j.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(r) {
    this._setProp(e, r);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-pie-chart") && customElements.define("hf-pie-chart", j);
export {
  j as PieChartWC,
  j as default
};

//# sourceMappingURL=hf-pie-chart.js.map