import { jsx as o, jsxs as g, Fragment as P } from "react/jsx-runtime";
import _ from "react";
import * as j from "recharts";
import { c as u } from "../../../index-BtlgVD4m.js";
const S = { light: "", dark: ".dark" }, y = _.createContext(null);
function L() {
  const c = _.useContext(y);
  if (!c)
    throw new Error("useChart must be used within a <ChartContainer />");
  return c;
}
const I = ({ ref: c, id: r, className: n, children: t, config: a, ...f }) => {
  const l = _.useId(), s = `chart-${r || l.replace(/:/g, "")}`;
  return /* @__PURE__ */ o(y.Provider, { value: { config: a }, children: /* @__PURE__ */ g(
    "div",
    {
      "data-chart": s,
      ref: c,
      className: u(
        "flex",
        "aspect-video",
        "justify-center",
        "text-xs",
        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
        "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50",
        "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
        "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
        "[&_.recharts-layer]:outline-none",
        "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border",
        "[&_.recharts-radial-bar-background-sector]:fill-muted",
        "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted",
        "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border",
        "[&_.recharts-sector]:outline-none",
        "[&_.recharts-surface]:outline-none",
        n
      ),
      ...f,
      children: [
        /* @__PURE__ */ o(E, { id: s, config: a }),
        /* @__PURE__ */ o(j.ResponsiveContainer, { children: t })
      ]
    }
  ) });
};
I.displayName = "Chart";
const E = ({ id: c, config: r }) => {
  const n = Object.entries(r).filter(([, t]) => t.theme || t.color);
  return n.length ? /* @__PURE__ */ o(
    "style",
    {
      dangerouslySetInnerHTML: {
        __html: Object.entries(S).map(
          ([t, a]) => `
              ${a} [data-chart=${c}] {
              ${n.map(([f, l]) => {
            var h;
            const s = ((h = l.theme) == null ? void 0 : h[t]) || l.color;
            return s ? `  --color-${f}: ${s};` : null;
          }).join(`
`)}
              }`
        ).join(`
`)
      }
    }
  ) : null;
}, q = j.Tooltip, K = ({
  active: c,
  payload: r,
  className: n,
  indicator: t = "dot",
  hideLabel: a = !1,
  hideIndicator: f = !1,
  label: l,
  labelFormatter: s,
  labelClassName: h,
  formatter: d,
  color: C,
  nameKey: x,
  labelKey: N,
  ref: O
}) => {
  const { config: b } = L(), $ = _.useMemo(() => {
    var v;
    if (a || !(r != null && r.length))
      return null;
    const [e] = r, w = `${N || (e == null ? void 0 : e.dataKey) || (e == null ? void 0 : e.name) || "value"}`, p = k(b, e, w), i = !N && typeof l == "string" ? ((v = b[l]) == null ? void 0 : v.label) || l : p == null ? void 0 : p.label;
    return s ? /* @__PURE__ */ o("div", { className: u("font-medium", h), children: s(i, r) }) : i ? /* @__PURE__ */ o("div", { className: u("font-medium", h), children: i }) : null;
  }, [l, s, r, a, h, b, N]);
  if (!c || !(r != null && r.length))
    return null;
  const m = r.length === 1 && t !== "dot";
  return /* @__PURE__ */ g(
    "div",
    {
      ref: O,
      className: u(
        "grid",
        "min-w-[8rem]",
        "items-start",
        "gap-[var(--spacing-2)]",
        "rounded-[var(--border-radius-md)]",
        "border",
        "border-[var(--base-border)]",
        "bg-[var(--base-popover)]",
        "px-[var(--spacing-2-5)]",
        "py-[var(--spacing-1-5)]",
        "text-[length:var(--typography-base-sizes-extra-small-font-size)]",
        "shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.10),_0px_2px_4px_-1px_rgba(0,0,0,0.06)]",
        n
      ),
      children: [
        m ? null : $,
        /* @__PURE__ */ o("div", { className: "grid gap-1.5", children: r.map((e, w) => {
          const p = `${x || e.name || e.dataKey || "value"}`, i = k(b, e, p), v = C || e.payload.fill || e.color, T = !!e.fillOpacity;
          return /* @__PURE__ */ o(
            "div",
            {
              className: u(
                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                t === "dot" && "items-center"
              ),
              children: d && (e == null ? void 0 : e.value) !== void 0 && e.name ? d(e.value, e.name, e, w, r) : /* @__PURE__ */ g(P, { children: [
                i != null && i.icon ? /* @__PURE__ */ o(i.icon, {}) : !f && /* @__PURE__ */ o(
                  "div",
                  {
                    className: u("shrink-0 rounded-[2px] border-[var(--color-border)] bg-[var(--color-bg)]", {
                      "h-2.5 w-2.5": t === "dot",
                      "w-1": t === "line",
                      "w-0 border-[1.5px] border-dashed bg-transparent": t === "dashed",
                      "my-0.5": m && t === "dashed",
                      "opacity-[.4]": T
                    }),
                    style: {
                      "--color-bg": v,
                      "--color-border": v
                    }
                  }
                ),
                /* @__PURE__ */ g("div", { className: u("flex flex-1 justify-between leading-none", m ? "items-end" : "items-center"), children: [
                  /* @__PURE__ */ g("div", { className: "grid gap-1.5", children: [
                    m ? $ : null,
                    /* @__PURE__ */ o("span", { className: "text-muted-foreground", children: (i == null ? void 0 : i.label) || e.name })
                  ] }),
                  e.value && /* @__PURE__ */ o("span", { className: "font-mono font-medium tabular-nums text-foreground", children: e.value.toLocaleString() })
                ] })
              ] })
            },
            String(e.dataKey)
          );
        }) })
      ]
    }
  );
};
K.displayName = "ChartTooltip";
const A = j.Legend, M = ({ ref: c, className: r, hideIcon: n = !1, payload: t, verticalAlign: a = "bottom", nameKey: f }) => {
  const { config: l } = L();
  return t != null && t.length ? /* @__PURE__ */ o("div", { ref: c, className: u("flex items-center justify-center gap-4", a === "top" ? "pb-3" : "pt-3", r), children: t.map((s) => {
    var x;
    const h = `${f || s.dataKey || "value"}`, d = k(l, s, h), C = !!((x = s.payload) != null && x.fillOpacity);
    return /* @__PURE__ */ g("div", { className: u("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [
      d != null && d.icon && !n ? /* @__PURE__ */ o(d.icon, {}) : /* @__PURE__ */ o(
        "div",
        {
          className: "h-2 w-2 shrink-0 rounded-[2px]",
          style: {
            backgroundColor: s.color,
            ...C && { opacity: 0.4 }
          }
        }
      ),
      d == null ? void 0 : d.label
    ] }, s.value);
  }) }) : null;
};
M.displayName = "ChartLegend";
function k(c, r, n) {
  if (typeof r != "object" || r === null)
    return;
  const t = "payload" in r && typeof r.payload == "object" && r.payload !== null ? r.payload : void 0;
  let a = n;
  return n in r && typeof r[n] == "string" ? a = r[n] : t && n in t && typeof t[n] == "string" && (a = t[n]), a in c ? c[a] : c[n];
}
export {
  I as ChartContainer,
  A as ChartLegend,
  M as ChartLegendContent,
  E as ChartStyle,
  q as ChartTooltip,
  K as ChartTooltipContent
};
//# sourceMappingURL=ChartPrimitive.js.map
