@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.2

package/dist/es/components/fundamental/chart.js

@@ -0,0 +1,1006 @@
+import { jsxs as m, jsx as e, Fragment as Er } from "react/jsx-runtime";
+import lr, { useState as Pr, useMemo as z, useCallback as mr } from "react";
+import { ResponsiveContainer as Tr, ComposedChart as Br, CartesianGrid as U, XAxis as X, YAxis as $, Tooltip as J, Legend as Q, Bar as pr, Area as gr, Line as wr, ScatterChart as Or, Scatter as Rr, LineChart as Vr, ReferenceLine as qr, ReferenceDot as _r, BarChart as Nr } from "recharts";
+import { cn as jr } from "../../lib/utils.js";
+const G = (s, c = 0) => {
+  const i = s.toFixed(c).split("."), d = i[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+  return c > 0 && i[1] ? `${d}.${i[1]}` : d;
+}, Sr = (s, c, t, i = 20) => {
+  if (!s.length) return i;
+  let d = 0;
+  s.forEach((C) => {
+    c.forEach((o) => {
+      const v = C[o];
+      typeof v == "number" ? d = Math.max(d, Math.abs(v)) : Array.isArray(v) && v.forEach((n) => {
+        typeof n == "number" && (d = Math.max(d, Math.abs(n)));
+      });
+    });
+  });
+  const y = (t ? t(d, 0) : d.toString()).length;
+  return Math.max(i, y * 6 + 12);
+}, A = {
+  bar: [
+    "var(--color-chart-bar-1)",
+    // #487D9A - Deep blue-teal
+    "var(--color-chart-bar-2)",
+    // #86C8CF - Light teal
+    "var(--color-chart-bar-3)",
+    // #D27369 - Coral red
+    "var(--color-chart-bar-4)",
+    // #CFDEE6 - Light blue-gray
+    "var(--color-chart-bar-5)",
+    // #DCB891 - Warm beige
+    "var(--color-chart-bar-6)"
+    // #56959D - Medium teal
+  ],
+  line: [
+    "var(--color-chart-line-1)",
+    // #487D9A - Deep blue-teal
+    "var(--color-chart-line-2)",
+    // #86C8CF - Light teal
+    "var(--color-chart-line-3)",
+    // #DCB891 - Warm beige
+    "var(--color-chart-line-4)",
+    // #D27369 - Coral red
+    "var(--color-chart-line-5)"
+    // #6B9691 - Sage green-teal
+  ],
+  scatter: [
+    "var(--color-chart-scatter-1)",
+    // #66B1BA - Bright teal
+    "var(--color-chart-scatter-2)",
+    // #A14238 - Deep red-brown
+    "var(--color-chart-scatter-3)",
+    // #DCB891 - Warm beige
+    "var(--color-chart-scatter-4)",
+    // #3B5D73 - Dark blue-gray
+    "var(--color-chart-scatter-5)",
+    // #56959D - Medium teal
+    "var(--color-chart-scatter-6)"
+    // #D27369 - Coral red
+  ],
+  // Area chart colors optimized for filled regions with transparency
+  area: [
+    "var(--color-chart-area-1)",
+    // #487D9A - Deep blue-teal
+    "var(--color-chart-area-2)",
+    // #86C8CF - Light teal
+    "var(--color-chart-area-3)",
+    // #DCB891 - Warm beige
+    "var(--color-chart-area-4)",
+    // #699792 - Medium sage
+    "var(--color-chart-area-5)",
+    // #A1C8C4 - Soft teal
+    "var(--color-chart-area-6)"
+    // #3B5D73 - Dark blue-gray
+  ],
+  // New accessibility-focused scheme
+  accessible: [
+    "#0066CC",
+    // High contrast blue
+    "#CC6600",
+    // High contrast orange
+    "#009966",
+    // High contrast green
+    "#CC0066",
+    // High contrast magenta
+    "#6600CC",
+    // High contrast purple
+    "#CC9900",
+    // High contrast gold
+    "#006666",
+    // High contrast teal
+    "#CC0000"
+    // High contrast red
+  ]
+}, L = (s) => {
+  switch (s) {
+    case "dashed":
+      return "5 5";
+    // 5px line, 5px gap
+    case "dotted":
+      return "2 2";
+    // 2px dot, 2px gap
+    case "solid":
+    default:
+      return;
+  }
+}, Fr = (s = "circle") => (c) => {
+  const { cx: t, cy: i, r: d, fill: b, stroke: y, strokeWidth: C } = c, o = d || 4;
+  switch (s) {
+    case "triangle":
+      const v = o * 1.5, n = o * 1.3, f = `M ${t},${i - v} L ${t + n},${i + v / 2} L ${t - n},${i + v / 2} Z`;
+      return /* @__PURE__ */ e(
+        "path",
+        {
+          d: f,
+          fill: b,
+          stroke: y,
+          strokeWidth: C || 0
+        }
+      );
+    case "square":
+      const k = o * 1.4;
+      return /* @__PURE__ */ e(
+        "rect",
+        {
+          x: t - k,
+          y: i - k,
+          width: k * 2,
+          height: k * 2,
+          fill: b,
+          stroke: y,
+          strokeWidth: C || 0
+        }
+      );
+    case "circle":
+    default:
+      return /* @__PURE__ */ e(
+        "circle",
+        {
+          cx: t,
+          cy: i,
+          r: o,
+          fill: b,
+          stroke: y,
+          strokeWidth: C || 0
+        }
+      );
+  }
+}, Ir = (s) => ({ verticalAlign: "bottom", align: "center" }), H = ({ active: s, payload: c, label: t, config: i, tooltipMaxWidth: d = "max-w-xs", chartType: b, referenceMarkers: y }) => {
+  if (!s || !c || !c.length)
+    return null;
+  const C = y?.filter((o) => o.xValue === t) || [];
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: `rounded-s border border-[var(--color-border-primary-medium)] bg-[var(--color-surface-primary)] p-[var(--space-m)] shadow-md min-w-[120px] ${d} z-[9999]`,
+      role: "tooltip",
+      "aria-label": "Chart data tooltip",
+      children: [
+        /* @__PURE__ */ e("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: t }),
+        c.map((o, v) => {
+          const n = i[o.dataKey];
+          let f;
+          if (n?.type === "range-area" && o.payload) {
+            const g = o.payload[o.dataKey];
+            Array.isArray(g) && g.length === 2 ? f = `${G(g[0])} – ${G(g[1])}` : f = typeof o.value == "number" ? G(o.value) : o.value;
+          } else
+            f = typeof o.value == "number" ? G(o.value) : o.value;
+          return /* @__PURE__ */ m("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
+            (() => {
+              switch (b) {
+                case "line":
+                  const g = i[o.dataKey]?.strokeStyle, K = L(g);
+                  return /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: "w-3 h-0.5 flex-shrink-0 relative",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: "w-full h-full",
+                          style: {
+                            background: K ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
+                            backgroundSize: K === "5 5" ? "6px 100%" : K === "2 2" ? "2px 100%" : "100% 100%"
+                          }
+                        }
+                      )
+                    }
+                  );
+                case "scatter":
+                  return /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: "w-2 h-2 rounded-full flex-shrink-0",
+                      style: { backgroundColor: o.color },
+                      "aria-hidden": "true"
+                    }
+                  );
+                case "composed":
+                  switch (i[o.dataKey]?.type) {
+                    case "line":
+                      const N = i[o.dataKey]?.strokeStyle, w = L(N);
+                      return /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: "w-3 h-0.5 flex-shrink-0 relative",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ e(
+                            "div",
+                            {
+                              className: "w-full h-full",
+                              style: {
+                                background: w ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
+                                backgroundSize: w === "5 5" ? "6px 100%" : w === "2 2" ? "2px 100%" : "100% 100%"
+                              }
+                            }
+                          )
+                        }
+                      );
+                    case "area":
+                    case "range-area":
+                      return /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: "w-2.5 h-2.5 flex-shrink-0",
+                          style: { backgroundColor: o.color },
+                          "aria-hidden": "true"
+                        }
+                      );
+                    case "bar":
+                    default:
+                      return /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: "w-2 h-2 flex-shrink-0",
+                          style: { backgroundColor: o.color },
+                          "aria-hidden": "true"
+                        }
+                      );
+                  }
+                case "bar":
+                case "horizontal-bar":
+                case "area":
+                default:
+                  return /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: "w-2 h-2 flex-shrink-0",
+                      style: { backgroundColor: o.color },
+                      "aria-hidden": "true"
+                    }
+                  );
+              }
+            })(),
+            /* @__PURE__ */ m("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
+              n?.label || o.dataKey,
+              ":"
+            ] }),
+            /* @__PURE__ */ e("span", { className: "text-body-medium-sm text-[var(--color-text-primary)] ml-auto pl-[16px]", children: f })
+          ] }, v);
+        }),
+        C.length > 0 && /* @__PURE__ */ m(Er, { children: [
+          /* @__PURE__ */ e("div", { className: "my-[var(--space-m)]" }),
+          C.map((o, v) => /* @__PURE__ */ m(lr.Fragment, { children: [
+            o.tooltipLabel && /* @__PURE__ */ e("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: o.tooltipLabel }),
+            !o.tooltipLabel && v === 0 && /* @__PURE__ */ e("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: "Reference Markers:" }),
+            o.dataPoints.map((n, f) => /* @__PURE__ */ m("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
+              (() => {
+                switch (n.shape || "circle") {
+                  case "triangle":
+                    return /* @__PURE__ */ e("svg", { width: 8, height: 8, className: "flex-shrink-0", viewBox: "0 0 10 10", children: /* @__PURE__ */ e(
+                      "path",
+                      {
+                        d: "M 5,2 L 8,8 L 2,8 Z",
+                        fill: n.fill || "var(--color-chart-line-1)",
+                        stroke: n.stroke || "transparent",
+                        strokeWidth: n.strokeWidth || 0
+                      }
+                    ) });
+                  case "square":
+                    return /* @__PURE__ */ e("svg", { width: 8, height: 8, className: "flex-shrink-0", viewBox: "0 0 10 10", children: /* @__PURE__ */ e(
+                      "rect",
+                      {
+                        x: "2",
+                        y: "2",
+                        width: "6",
+                        height: "6",
+                        fill: n.fill || "var(--color-chart-line-1)",
+                        stroke: n.stroke || "transparent",
+                        strokeWidth: n.strokeWidth || 0
+                      }
+                    ) });
+                  case "circle":
+                  default:
+                    return /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "w-2 h-2 rounded-full flex-shrink-0",
+                        style: {
+                          backgroundColor: n.fill || "var(--color-chart-line-1)",
+                          border: n.stroke ? `${n.strokeWidth || 1}px solid ${n.stroke}` : "none"
+                        }
+                      }
+                    );
+                }
+              })(),
+              /* @__PURE__ */ m("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
+                n.label || `Marker ${f + 1}`,
+                ":"
+              ] }),
+              /* @__PURE__ */ e("span", { className: "text-body-medium-sm text-[var(--color-text-primary)] ml-auto pl-[16px]", children: G(n.yValue) })
+            ] }, `marker-${v}-point-${f}`))
+          ] }, `marker-section-${v}`))
+        ] })
+      ]
+    }
+  );
+};
+function Hr({
+  type: s,
+  data: c,
+  config: t,
+  className: i,
+  height: d = 300,
+  width: b,
+  minWidth: y = 300,
+  onDataPointClick: C,
+  onDataPointHover: o,
+  highlightedIndex: v,
+  showGrid: n = !0,
+  showLegend: f = !0,
+  showTooltip: k = !0,
+  colorScheme: g,
+  responsive: K = !0,
+  maintainAspectRatio: $r = !1,
+  legendHeight: N,
+  margin: w,
+  yAxisWidth: sr,
+  yAxisTickCount: vr,
+  xAxisTickFormatter: Ar,
+  yAxisTickFormatter: W,
+  showRightYAxis: Y = !1,
+  rightYAxisWidth: nr,
+  rightYAxisTickCount: rr,
+  rightYAxisDomain: er,
+  rightYAxisTickFormatter: tr,
+  title: S,
+  description: ar,
+  showDataTable: Mr = !1,
+  tooltipMaxWidth: D = "max-w-xs",
+  tooltipAllowEscapeViewBox: E,
+  legendOrder: cr,
+  legendPosition: Zr = "bottom",
+  referenceMarkers: ir,
+  yAxisDomain: fr,
+  ...zr
+}) {
+  const [xr, Lr] = Pr(0), x = z(() => {
+    if (g)
+      return A[g];
+    switch (s) {
+      case "bar":
+      case "horizontal-bar":
+        return A.bar;
+      case "line":
+        return A.line;
+      case "scatter":
+        return A.scatter;
+      case "composed":
+        return A.bar;
+      // Use bar colors for composed charts
+      default:
+        return A.bar;
+    }
+  }, [s, g]), u = Object.keys(t).filter((r) => r !== "name"), I = z(() => c.map((r) => {
+    const a = { ...r };
+    return u.forEach((l) => {
+      if (t[l].type === "range-area") {
+        const h = r[l];
+        Array.isArray(h) && h.length === 2 && (a[l] = h, a[`${l}_min`] = h[0], a[`${l}_max`] = h[1]);
+      }
+    }), a;
+  }), [c, t, u]), P = mr((r) => {
+    const a = r?.activeTooltipIndex ?? 0;
+    Lr(a), o?.(r?.activePayload?.[0]?.payload, a);
+  }, [o]), T = mr(() => {
+    o?.(null);
+  }, [o]), B = mr((r) => {
+    const a = r?.activeTooltipIndex ?? 0;
+    C?.(r?.activePayload?.[0]?.payload, a);
+  }, [C]), O = z(() => xr >= Math.floor(I.length / 2), [xr, I.length]), br = () => {
+    const r = { top: 0, right: 0, left: 0, bottom: 0 };
+    return {
+      top: w?.top ?? r.top,
+      right: w?.right ?? r.right,
+      // Don't add rightYAxisWidth - Recharts handles it via YAxis width prop
+      left: w?.left ?? r.left,
+      bottom: w?.bottom ?? r.bottom
+    };
+  }, Kr = z(() => sr || Sr(I, u, W, 20), [sr, I, u, W]), yr = z(() => {
+    if (!Y) return 0;
+    if (nr) return nr;
+    const r = u.filter((a) => t[a].yAxisId === "right");
+    return r.length === 0 ? 0 : Sr(I, r, tr, 20);
+  }, [Y, nr, I, u, t, tr]), kr = z(() => u.some((a) => (t[a].yAxisId || "left") === "left") ? "left" : "right", [u, t]), R = N ? {
+    ...Ir(),
+    wrapperStyle: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: N,
+      paddingTop: 8,
+      zIndex: 1
+    }
+  } : Ir(), V = {
+    data: I,
+    margin: br()
+  }, q = {
+    axisLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 2 },
+    tickLine: !1,
+    tick: {
+      fontSize: 10,
+      fill: "var(--color-text-tertiary)",
+      fontFamily: "Inter, sans-serif"
+    },
+    tickFormatter: Ar
+  }, _ = {
+    axisLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 2 },
+    tickLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 1 },
+    tick: {
+      fontSize: 10,
+      fill: "var(--color-text-tertiary)",
+      fontFamily: "Inter, sans-serif"
+    },
+    width: Kr,
+    // Auto-calculated based on tick formatter, default 20px
+    tickFormatter: W,
+    ...vr && { tickCount: vr },
+    // Force specific number of ticks when provided
+    ...fr && { domain: fr }
+    // Custom Y-axis domain when provided
+  }, j = {
+    stroke: "var(--color-border-primary-subtle)",
+    horizontal: !0,
+    vertical: !1
+  }, F = ({ payload: r }) => {
+    if (!r || !r.length) return null;
+    const a = cr ? [...r].sort((p, M) => {
+      const dr = cr.indexOf(p.dataKey), or = cr.indexOf(M.dataKey);
+      return dr === -1 ? 1 : or === -1 ? -1 : dr - or;
+    }) : r, h = br().left + 5;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          paddingLeft: `${h}px`,
+          paddingRight: "16px"
+        },
+        children: /* @__PURE__ */ e("div", { className: "flex flex-wrap justify-start items-start gap-x-[var(--space-m)] gap-y-[var(--space-s)]", children: a.map((p, M) => /* @__PURE__ */ m("div", { className: "flex items-center justify-center gap-[var(--space-xs)]", children: [
+          (() => {
+            switch (s) {
+              case "line":
+                const or = t[p.dataKey]?.strokeStyle, hr = L(or);
+                return /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "w-[12px] h-[2px] flex-shrink-0 relative",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "w-full h-full",
+                        style: {
+                          background: hr ? `linear-gradient(to right, ${p.color} 50%, transparent 50%)` : p.color,
+                          backgroundSize: hr === "5 5" ? "8px 100%" : hr === "2 2" ? "3px 100%" : "100% 100%"
+                        }
+                      }
+                    )
+                  }
+                );
+              case "scatter":
+                return /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "w-[6px] h-[6px] rounded-full flex-shrink-0",
+                    style: { backgroundColor: p.color },
+                    "aria-hidden": "true"
+                  }
+                );
+              case "composed":
+                switch (t[p.dataKey]?.type) {
+                  case "line":
+                    const Dr = t[p.dataKey]?.strokeStyle, ur = L(Dr);
+                    return /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "w-[12px] h-[2px] flex-shrink-0 relative",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ e(
+                          "div",
+                          {
+                            className: "w-full h-full",
+                            style: {
+                              background: ur ? `linear-gradient(to right, ${p.color} 50%, transparent 50%)` : p.color,
+                              backgroundSize: ur === "5 5" ? "8px 100%" : ur === "2 2" ? "3px 100%" : "100% 100%"
+                            }
+                          }
+                        )
+                      }
+                    );
+                  case "area":
+                  case "range-area":
+                    return /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "w-[8px] h-[8px] flex-shrink-0",
+                        style: { backgroundColor: p.color },
+                        "aria-hidden": "true"
+                      }
+                    );
+                  case "bar":
+                  default:
+                    return /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "w-[6px] h-[6px] flex-shrink-0",
+                        style: { backgroundColor: p.color },
+                        "aria-hidden": "true"
+                      }
+                    );
+                }
+              case "bar":
+              case "horizontal-bar":
+              default:
+                return /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "w-[6px] h-[6px] flex-shrink-0",
+                    style: { backgroundColor: p.color },
+                    "aria-hidden": "true"
+                  }
+                );
+            }
+          })(),
+          /* @__PURE__ */ e("span", { className: "[&]:text-body-medium-xsm [&]:text-[var(--color-text-secondary)] leading-none whitespace-nowrap", children: p.value })
+        ] }, M)) })
+      }
+    );
+  }, Cr = () => {
+    switch (s) {
+      case "bar":
+        return /* @__PURE__ */ m(
+          Nr,
+          {
+            ...V,
+            onMouseMove: P,
+            onMouseLeave: T,
+            onClick: B,
+            children: [
+              n && /* @__PURE__ */ e(U, { ...j }),
+              /* @__PURE__ */ e(X, { dataKey: "name", ...q }),
+              /* @__PURE__ */ e($, { ..._ }),
+              k && /* @__PURE__ */ e(
+                J,
+                {
+                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s }),
+                  cursor: {
+                    stroke: "var(--color-border-primary)",
+                    strokeWidth: 1,
+                    fill: "var(--color-background-neutral-default)",
+                    fillOpacity: 1
+                  },
+                  position: { x: void 0, y: void 0 },
+                  offset: 10,
+                  animationDuration: 0,
+                  allowEscapeViewBox: E,
+                  reverseDirection: { x: O },
+                  wrapperStyle: { zIndex: 100 }
+                }
+              ),
+              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
+              u.map((r, a) => {
+                const l = t[r].color || x[a % x.length];
+                return /* @__PURE__ */ e(
+                  pr,
+                  {
+                    dataKey: r,
+                    name: t[r].label,
+                    fill: l,
+                    radius: [0, 0, 0, 0],
+                    className: "cursor-pointer transition-colors",
+                    isAnimationActive: !1,
+                    maxBarSize: 60
+                  },
+                  r
+                );
+              })
+            ]
+          }
+        );
+      case "horizontal-bar":
+        return /* @__PURE__ */ m(
+          Nr,
+          {
+            ...V,
+            layout: "vertical",
+            onMouseMove: P,
+            onMouseLeave: T,
+            onClick: B,
+            children: [
+              n && /* @__PURE__ */ e(U, { ...j, horizontal: !1, vertical: !0 }),
+              /* @__PURE__ */ e(X, { type: "number", ...q }),
+              /* @__PURE__ */ e($, { type: "category", dataKey: "name", ..._ }),
+              k && /* @__PURE__ */ e(
+                J,
+                {
+                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s }),
+                  cursor: {
+                    stroke: "var(--color-border-primary)",
+                    strokeWidth: 1,
+                    fill: "var(--color-background-neutral-default)",
+                    fillOpacity: 1
+                  },
+                  position: { x: void 0, y: void 0 },
+                  offset: 10,
+                  animationDuration: 0,
+                  allowEscapeViewBox: E,
+                  reverseDirection: { x: O },
+                  wrapperStyle: { zIndex: 100 }
+                }
+              ),
+              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
+              u.map((r, a) => {
+                const l = t[r].color || x[a % x.length];
+                return /* @__PURE__ */ e(
+                  pr,
+                  {
+                    dataKey: r,
+                    name: t[r].label,
+                    fill: l,
+                    radius: [0, 0, 0, 0],
+                    className: "cursor-pointer transition-colors",
+                    isAnimationActive: !1,
+                    maxBarSize: 40
+                  },
+                  r
+                );
+              })
+            ]
+          }
+        );
+      case "line":
+        return /* @__PURE__ */ m(
+          Vr,
+          {
+            ...V,
+            onMouseMove: P,
+            onMouseLeave: T,
+            onClick: B,
+            children: [
+              n && /* @__PURE__ */ e(U, { ...j, yAxisId: kr }),
+              /* @__PURE__ */ e(X, { dataKey: "name", ...q }),
+              /* @__PURE__ */ e($, { yAxisId: "left", ..._ }),
+              Y && /* @__PURE__ */ e(
+                $,
+                {
+                  yAxisId: "right",
+                  orientation: "right",
+                  axisLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 2 },
+                  tickLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 1 },
+                  tick: {
+                    fontSize: 10,
+                    fill: "var(--color-text-tertiary)",
+                    fontFamily: "Inter, sans-serif"
+                  },
+                  width: yr,
+                  tickFormatter: tr,
+                  ...rr && { tickCount: rr },
+                  ...er && { domain: er }
+                }
+              ),
+              ir?.map(
+                (r, a) => r.showLine !== !1 ? /* @__PURE__ */ e(
+                  qr,
+                  {
+                    x: r.xValue,
+                    yAxisId: "left",
+                    stroke: r.lineStyle?.stroke || "#000000",
+                    strokeWidth: r.lineStyle?.strokeWidth || 2,
+                    strokeDasharray: r.lineStyle?.strokeDasharray
+                  },
+                  `marker-line-${a}`
+                ) : null
+              ),
+              k && /* @__PURE__ */ e(
+                J,
+                {
+                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s, referenceMarkers: ir }),
+                  cursor: {
+                    stroke: "var(--color-border-primary)",
+                    strokeWidth: 1,
+                    fill: "var(--color-background-neutral-default)",
+                    fillOpacity: 1
+                  },
+                  position: { x: void 0, y: void 0 },
+                  offset: 10,
+                  animationDuration: 0,
+                  allowEscapeViewBox: E,
+                  reverseDirection: { x: O },
+                  wrapperStyle: { zIndex: 100 }
+                }
+              ),
+              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
+              u.map((r, a) => {
+                const l = t[r].color || x[a % x.length];
+                return /* @__PURE__ */ e(
+                  wr,
+                  {
+                    type: "linear",
+                    dataKey: r,
+                    name: t[r].label,
+                    yAxisId: t[r].yAxisId || "left",
+                    stroke: l,
+                    strokeWidth: 2,
+                    strokeDasharray: L(t[r].strokeStyle),
+                    dot: t[r].showDots === !0 ? {
+                      fill: l,
+                      strokeWidth: 0,
+                      r: 3
+                    } : !1,
+                    activeDot: {
+                      r: 5,
+                      fill: l
+                    },
+                    className: "cursor-pointer transition-colors",
+                    isAnimationActive: !1
+                  },
+                  r
+                );
+              }),
+              ir?.map((r, a) => /* @__PURE__ */ e(lr.Fragment, { children: r.dataPoints.map((l, h) => /* @__PURE__ */ e(
+                _r,
+                {
+                  x: r.xValue,
+                  y: l.yValue,
+                  yAxisId: "left",
+                  r: l.size || 4,
+                  fill: l.fill || "var(--color-chart-line-1)",
+                  stroke: l.stroke || "transparent",
+                  strokeWidth: l.strokeWidth || 0,
+                  shape: Fr(l.shape || "circle")
+                },
+                `marker-${a}-point-${h}`
+              )) }, `marker-dots-${a}`))
+            ]
+          }
+        );
+      case "scatter":
+        return /* @__PURE__ */ m(
+          Or,
+          {
+            ...V,
+            onMouseMove: P,
+            onMouseLeave: T,
+            onClick: B,
+            children: [
+              n && /* @__PURE__ */ e(U, { ...j }),
+              /* @__PURE__ */ e(X, { dataKey: "x", type: "number", ...q }),
+              /* @__PURE__ */ e($, { dataKey: "y", type: "number", ..._ }),
+              k && /* @__PURE__ */ e(
+                J,
+                {
+                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s }),
+                  cursor: {
+                    stroke: "var(--color-border-primary)",
+                    strokeWidth: 1,
+                    fill: "var(--color-background-neutral-default)",
+                    fillOpacity: 1
+                  },
+                  position: { x: void 0, y: void 0 },
+                  offset: 10,
+                  animationDuration: 0,
+                  allowEscapeViewBox: E,
+                  reverseDirection: { x: O },
+                  wrapperStyle: { zIndex: 100 }
+                }
+              ),
+              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
+              u.filter((r) => r !== "x" && r !== "y" && r !== "name").map((r, a) => {
+                const l = t[r]?.color || x[a % x.length];
+                return /* @__PURE__ */ e(
+                  Rr,
+                  {
+                    name: t[r]?.label || r,
+                    data: c.map((h) => ({ x: h.x, y: h.y, [r]: h[r] })),
+                    fill: l,
+                    className: "cursor-pointer transition-colors",
+                    isAnimationActive: !1
+                  },
+                  r
+                );
+              })
+            ]
+          }
+        );
+      case "composed":
+        return /* @__PURE__ */ m(
+          Br,
+          {
+            ...V,
+            onMouseMove: P,
+            onMouseLeave: T,
+            onClick: B,
+            children: [
+              n && /* @__PURE__ */ e(U, { ...j, yAxisId: kr }),
+              /* @__PURE__ */ e(X, { dataKey: "name", ...q }),
+              /* @__PURE__ */ e($, { yAxisId: "left", ..._ }),
+              Y && /* @__PURE__ */ e(
+                $,
+                {
+                  yAxisId: "right",
+                  orientation: "right",
+                  axisLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 2 },
+                  tickLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 1 },
+                  tick: {
+                    fontSize: 10,
+                    fill: "var(--color-text-tertiary)",
+                    fontFamily: "Inter, sans-serif"
+                  },
+                  width: yr,
+                  tickFormatter: tr,
+                  ...rr && { tickCount: rr },
+                  ...er && { domain: er }
+                }
+              ),
+              k && /* @__PURE__ */ e(
+                J,
+                {
+                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s }),
+                  cursor: {
+                    stroke: "var(--color-border-primary)",
+                    strokeWidth: 1,
+                    fill: "var(--color-background-neutral-default)",
+                    fillOpacity: 1
+                  },
+                  position: { x: void 0, y: void 0 },
+                  offset: 10,
+                  animationDuration: 0,
+                  allowEscapeViewBox: E,
+                  reverseDirection: { x: O },
+                  wrapperStyle: { zIndex: 100 }
+                }
+              ),
+              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
+              u.map((r, a) => {
+                const l = t[r].color || x[a % x.length];
+                return (t[r].type || "bar") === "bar" ? /* @__PURE__ */ e(
+                  pr,
+                  {
+                    dataKey: r,
+                    name: t[r].label,
+                    yAxisId: t[r].yAxisId || "left",
+                    fill: l,
+                    radius: [0, 0, 0, 0],
+                    className: "cursor-pointer transition-colors",
+                    isAnimationActive: !1,
+                    maxBarSize: 60
+                  },
+                  r
+                ) : null;
+              }),
+              u.map((r, a) => {
+                const l = t[r].color || x[a % x.length], h = t[r].type || "bar";
+                return h === "area" ? /* @__PURE__ */ e(
+                  gr,
+                  {
+                    type: "linear",
+                    dataKey: r,
+                    name: t[r].label,
+                    yAxisId: t[r].yAxisId || "left",
+                    stroke: t[r].stroke ?? l,
+                    fill: t[r].fill ?? l,
+                    fillOpacity: 0.3,
+                    className: "cursor-pointer transition-colors",
+                    isAnimationActive: !1
+                  },
+                  r
+                ) : h === "range-area" ? /* @__PURE__ */ e(
+                  gr,
+                  {
+                    type: "linear",
+                    dataKey: r,
+                    name: t[r].label,
+                    yAxisId: t[r].yAxisId || "left",
+                    stroke: t[r].stroke ?? "none",
+                    fill: t[r].fill ?? l,
+                    fillOpacity: 0.3,
+                    className: "cursor-pointer transition-colors",
+                    isAnimationActive: !1
+                  },
+                  r
+                ) : null;
+              }),
+              u.map((r, a) => {
+                const l = t[r].color || x[a % x.length];
+                return (t[r].type || "bar") === "line" ? /* @__PURE__ */ e(
+                  wr,
+                  {
+                    type: "linear",
+                    dataKey: r,
+                    name: t[r].label,
+                    yAxisId: t[r].yAxisId || "left",
+                    stroke: l,
+                    strokeWidth: 2,
+                    strokeDasharray: L(t[r].strokeStyle),
+                    dot: t[r].showDots === !0 ? {
+                      fill: l,
+                      strokeWidth: 0,
+                      r: 3
+                    } : !1,
+                    activeDot: {
+                      r: 5,
+                      fill: l
+                    },
+                    className: "cursor-pointer transition-colors",
+                    isAnimationActive: !1
+                  },
+                  r
+                ) : null;
+              })
+            ]
+          }
+        );
+      default:
+        return /* @__PURE__ */ e("div", { children: "Unsupported chart type" });
+    }
+  }, Wr = () => Mr ? /* @__PURE__ */ e("div", { className: "sr-only", children: /* @__PURE__ */ m("table", { role: "table", "aria-label": S ? `Data for ${S}` : "Chart data", children: [
+    /* @__PURE__ */ m("caption", { className: "sr-only", children: [
+      S && `${S}. `,
+      ar || `${s} chart showing ${u.length} data series across ${c.length} categories.`
+    ] }),
+    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ e("th", { scope: "col", children: "Category" }),
+      u.map((r) => /* @__PURE__ */ e("th", { scope: "col", children: t[r]?.label || r }, r))
+    ] }) }),
+    /* @__PURE__ */ e("tbody", { children: c.map((r, a) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ e("th", { scope: "row", children: r.name || `Item ${a + 1}` }),
+      u.map((l) => /* @__PURE__ */ e("td", { children: W ? W(r[l], a) : r[l] }, l))
+    ] }, a)) })
+  ] }) }) : null, Z = lr.useRef(null);
+  return lr.useEffect(() => {
+    const r = Z.current;
+    if (!r) return;
+    const a = setTimeout(() => {
+      r.querySelectorAll(".recharts-cartesian-axis-tick").forEach((h) => {
+        const p = h.querySelector("text"), M = h.querySelector(".recharts-cartesian-axis-tick-line");
+        p?.textContent?.trim() === "0" && M && M.setAttribute("stroke-width", "2");
+      });
+    }, 100);
+    return () => clearTimeout(a);
+  }, [c, s]), /* @__PURE__ */ m(
+    "div",
+    {
+      ref: Z,
+      className: jr("w-full", i),
+      style: { minWidth: y },
+      role: "img",
+      "aria-label": S || `${s} chart`,
+      "aria-describedby": ar ? `${Z.current?.id || "chart"}-desc` : void 0,
+      ...zr,
+      children: [
+        S && /* @__PURE__ */ e("h3", { className: "sr-only", id: `${Z.current?.id || "chart"}-title`, children: S }),
+        ar && /* @__PURE__ */ e("p", { className: "sr-only", id: `${Z.current?.id || "chart"}-desc`, children: ar }),
+        (() => {
+          const r = N ? d - N : d, a = K ? /* @__PURE__ */ e(
+            Tr,
+            {
+              width: b || "100%",
+              height: r,
+              children: Cr() || /* @__PURE__ */ e("div", { children: "Chart error" })
+            }
+          ) : /* @__PURE__ */ e("div", { style: { width: b || "100%", height: r, minWidth: y }, children: Cr() || /* @__PURE__ */ e("div", { children: "Chart error" }) });
+          return N ? /* @__PURE__ */ e("div", { style: { width: b || "100%" }, children: a }) : a;
+        })(),
+        /* @__PURE__ */ e(Wr, {})
+      ]
+    }
+  );
+}
+const Yr = (s, c = "bar") => {
+  const t = A[c];
+  return Array.from({ length: s }, (i, d) => t[d % t.length]);
+}, re = (s, c, t) => Array.isArray(s) ? s.reduce((d, b, y) => (d[b] = {
+  label: c?.[y] || b,
+  color: t?.[y]
+}, d), {}) : s;
+export {
+  Hr as Chart,
+  A as chartColorSchemes,
+  re as createChartConfig,
+  G as formatNumber,
+  Yr as generateChartColors
+};