import { o as A } from "./rolldown-runtime.js";
import { i as E, n as T, t as w } from "./vendor/react.js";
import { C as L, b as M, g as V, v as O, y as B } from "./vendor/recharts.js";
import { t as S } from "./dist.js";
import { t as H } from "./utils.js";
import { a as D, i as P, n as q, o as R, r as W, t as X } from "./use-reduced-motion2.js";
import { r as m } from "./LineChart.js";
var o = /* @__PURE__ */ A(E(), 1), i = w(), Z = S("relative w-full", {
  variants: { size: {
    sm: "h-40",
    default: "h-60",
    lg: "h-80",
    xl: "h-96"
  } },
  defaultVariants: { size: "default" }
});
function f({ data: t, series: e, showXAxis: r = !0, showYAxis: l = !0, xAxisLabel: n, legendPosition: c = "none", xAxisTicks: x, xAxisFormat: b = (h) => h.toLocaleString(), barRadius: p = 4, barColor: d = "var(--chart-1)", showTooltip: g = !0, size: C, className: j, "aria-label": y, ...N }) {
  const h = X(), z = o.useMemo(() => t.map((s) => ({
    label: s.label,
    value: s.value
  })), [t]), k = o.useMemo(() => ({ value: {
    label: e?.[0]?.label || "Value",
    color: e?.[0]?.color || d
  } }), [e, d]), v = o.useMemo(() => Math.max(...t.map((s) => s.value)), [t]);
  return /* @__PURE__ */ (0, i.jsx)("div", {
    className: H(Z({ size: C }), j),
    role: "img",
    "aria-label": y || "Horizontal bar chart",
    ...N,
    children: /* @__PURE__ */ (0, i.jsxs)("div", {
      className: "flex h-full flex-col",
      children: [
        c === "top" && e && /* @__PURE__ */ (0, i.jsx)("div", {
          className: "flex justify-end pb-2",
          children: /* @__PURE__ */ (0, i.jsx)(m, {
            series: e,
            position: "top"
          })
        }),
        /* @__PURE__ */ (0, i.jsxs)("div", {
          className: "flex-1 flex",
          children: [/* @__PURE__ */ (0, i.jsx)(q, {
            config: k,
            className: "flex-1 min-h-0 aspect-auto",
            children: /* @__PURE__ */ (0, i.jsxs)(V, {
              data: z,
              layout: "vertical",
              margin: {
                top: 8,
                right: 8,
                bottom: n ? 20 : 0,
                left: 0
              },
              children: [
                /* @__PURE__ */ (0, i.jsx)(L, {
                  strokeDasharray: "0",
                  horizontal: !1,
                  className: "stroke-border"
                }),
                l && /* @__PURE__ */ (0, i.jsx)(O, {
                  dataKey: "label",
                  type: "category",
                  tickLine: !1,
                  axisLine: !1,
                  tickMargin: 8,
                  tick: {
                    fill: "var(--muted-foreground)",
                    fontSize: 12
                  },
                  width: 60
                }),
                r && /* @__PURE__ */ (0, i.jsx)(B, {
                  type: "number",
                  tickLine: !1,
                  axisLine: !1,
                  tickMargin: 8,
                  tick: {
                    fill: "var(--muted-foreground)",
                    fontSize: 12
                  },
                  tickFormatter: b,
                  ticks: x,
                  domain: [0, v]
                }),
                g && /* @__PURE__ */ (0, i.jsx)(D, {
                  content: /* @__PURE__ */ (0, i.jsx)(R, {}),
                  cursor: {
                    fill: "var(--muted)",
                    className: "transition-opacity duration-200 ease-smooth motion-reduce:transition-none"
                  }
                }),
                c !== "none" && /* @__PURE__ */ (0, i.jsx)(W, { content: /* @__PURE__ */ (0, i.jsx)(P, {}) }),
                /* @__PURE__ */ (0, i.jsx)(M, {
                  dataKey: "value",
                  fill: "var(--color-value)",
                  radius: [
                    0,
                    p,
                    p,
                    0
                  ],
                  isAnimationActive: !h,
                  animationDuration: 300,
                  animationEasing: "ease-in-out"
                })
              ]
            })
          }), c === "right" && e && /* @__PURE__ */ (0, i.jsx)("div", {
            className: "ps-3 flex items-start pt-2",
            children: /* @__PURE__ */ (0, i.jsx)(m, {
              series: e,
              position: "right"
            })
          })]
        }),
        n && /* @__PURE__ */ (0, i.jsx)("div", {
          className: "flex justify-center pt-2",
          children: /* @__PURE__ */ (0, i.jsx)("span", {
            className: "text-xs font-medium text-muted-foreground",
            children: n
          })
        })
      ]
    })
  });
}
f.displayName = "HorizontalBarChart";
var $ = T(), a = {
  variant: "string",
  size: "string",
  data: "json",
  series: "json",
  showXAxis: "boolean",
  showYAxis: "boolean",
  xAxisLabel: "string",
  legendPosition: "string",
  xAxisTicks: "json",
  xAxisFormat: "json",
  barRadius: "number",
  barGap: "number",
  barColor: "string",
  showTooltip: "boolean",
  "aria-label": "string"
};
function u(t, e) {
  if (t !== null)
    switch (e) {
      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 _ = 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 e = document.createElement("div");
    for (e.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(e), this._root = (0, $.createRoot)(e), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(t, e, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(a).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(t, e) {
    const r = a[t] || "string";
    this._props[t] = this._parseValue(e, r), this._render();
  }
  _parseValue(t, e) {
    if (e === "boolean" && typeof t == "boolean" || e === "number" && typeof t == "number" || e === "string" && typeof t == "string") return t;
    if (typeof t == "string") switch (e) {
      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 e = t.replace(/([A-Z])/g, "-$1").toLowerCase(), r = a[t] || "string";
    return u(this.getAttribute(e), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const t = {};
    for (const [r, l] of Object.entries(a)) if (r in this._props) t[r] = this._props[r];
    else {
      const n = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      t[r] = u(this.getAttribute(n), l);
    }
    const e = o.createElement(f, {
      ...t,
      _hostElement: this
    }, o.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(e);
  }
};
for (const t of Object.keys(a)) Object.defineProperty(_.prototype, t, {
  get() {
    return this._getProp(t);
  },
  set(e) {
    this._setProp(t, e);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-horizontal-bar-chart") && customElements.define("hf-horizontal-bar-chart", _);
export {
  _ as HorizontalBarChartWC,
  _ as default
};

//# sourceMappingURL=hf-horizontal-bar-chart.js.map