react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/chunks/SegmentedBarChart-DEBZURnS.js

@@ -0,0 +1,384 @@
+"use client";
+import { jsx as a, Fragment as L, jsxs as m } from "react/jsx-runtime";
+import { n as D, C as O, b as Q, l as z, s as Z, f as I, c as U, d as T, S as q, e as E, g as K } from "./StackedAreaChart-DF1-3rDG.js";
+function ra({
+  title: p = "MRR forecast",
+  subtitle: u = "Actuals vs. projected, with 80% confidence",
+  categories: t = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+  actual: r = [48, 51, 55, 54, 59, 63, 68],
+  forecast: l = [72, 76, 80, 85, 90],
+  confidence: g = 0.14,
+  prefix: f = "$",
+  suffix: x = "k",
+  height: F = 280,
+  color: _ = "var(--chart-1, #3987e5)",
+  variant: w = "glass",
+  size: N = "md",
+  className: s = ""
+}) {
+  const b = F, c = { t: 16, r: 16, b: 28, l: 48 }, i = t.length, o = r.length, S = [...r, ...l], $ = l.map((k, h) => k * (1 + g * ((h + 1) / l.length))), n = l.map((k, h) => k * (1 - g * ((h + 1) / l.length))), y = D(Math.min(...S, ...n) * 0.9, Math.max(...$), 4), W = Z(y[0], y[y.length - 1], b - c.b, c.t), d = (k) => c.l + k / Math.max(1, i - 1) * (640 - c.l - c.r), v = (640 - c.l - c.r) / Math.max(1, i - 1), P = r.map((k, h) => [d(h), W(k)]), M = P[o - 1], C = [M, ...l.map((k, h) => [d(o + h), W(k)])], H = {
+    up: [M, ...$.map((k, h) => [d(o + h), W(k)])],
+    down: [M, ...n.map((k, h) => [d(o + h), W(k)])]
+  }, B = (l[l.length - 1] - r[o - 1]) / r[o - 1] * 100, A = (k) => I(k, f, x);
+  return /* @__PURE__ */ a(L, { children: /* @__PURE__ */ a(O, { title: p, subtitle: u, value: A(l[l.length - 1]), delta: `${B >= 0 ? "+" : ""}${B.toFixed(0)}% projected`, deltaPositive: B >= 0, variant: w, size: N, className: s, legend: [{ label: "Actual", color: _ }, { label: "Forecast", color: `color-mix(in srgb, ${_} 55%, transparent)` }], table: {
+    headers: ["Period", "Actual", "Forecast", "Low", "High"],
+    rows: t.map((k, h) => o > h ? [k, A(r[h]), "—", "—", "—"] : [k, "—", A(l[h - o]), A(n[h - o]), A($[h - o])])
+  }, children: /* @__PURE__ */ m("svg", { viewBox: `0 0 640 ${b}`, role: "img", "aria-label": `${p}: actuals and forecast line chart`, children: [
+    y.map((k, h) => /* @__PURE__ */ m("g", { children: [
+      /* @__PURE__ */ a("line", { className: "cf-grid", x1: c.l, x2: 640 - c.r, y1: W(k), y2: W(k) }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: c.l - 8, y: W(k) + 4, textAnchor: "end", children: A(k) })
+    ] }, h)),
+    t.map((k, h) => /* @__PURE__ */ a("text", { className: "cf-label", x: d(h), y: b - 8, textAnchor: "middle", children: k }, h)),
+    /* @__PURE__ */ a("rect", { x: M[0], y: c.t, width: 640 - c.r - M[0], height: b - c.t - c.b, fill: "rgb(var(--ink-rgb, 255 255 255) / 0.025)", "aria-hidden": "true" }),
+    /* @__PURE__ */ a("line", { className: "cf-axis", x1: M[0], x2: M[0], y1: c.t, y2: b - c.b }),
+    /* @__PURE__ */ a("text", { className: "cf-label", x: M[0] + 6, y: c.t + 10, children: "Today" }),
+    /* @__PURE__ */ a("path", { d: Q(H.up, H.down, "linear"), fill: _, fillOpacity: "0.14", "aria-hidden": "true" }),
+    /* @__PURE__ */ a("path", { d: z(C), fill: "none", stroke: _, strokeWidth: "2", strokeDasharray: "5 5", strokeOpacity: "0.85", "aria-hidden": "true" }),
+    /* @__PURE__ */ a("path", { d: z(P), fill: "none", stroke: _, strokeWidth: "2", strokeLinejoin: "round", "aria-hidden": "true" }),
+    /* @__PURE__ */ a("circle", { cx: M[0], cy: M[1], r: "4.5", fill: _, stroke: "var(--chart-surface, #0d0d0f)", strokeWidth: "2", "aria-hidden": "true" }),
+    t.map((k, h) => {
+      const V = h >= o, R = V ? l[h - o] : r[h], J = V ? `${_}::Forecast: ${A(R)}|Range: ${A(n[h - o])} – ${A($[h - o])}` : `${_}::Actual: ${A(R)}`;
+      return /* @__PURE__ */ m("g", { className: "cf-hit-group", children: [
+        /* @__PURE__ */ a("line", { className: "cf-cross", x1: d(h), x2: d(h), y1: c.t, y2: b - c.b }),
+        /* @__PURE__ */ a("circle", { className: "cf-cross", cx: d(h), cy: W(R), r: "4.5", fill: _, stroke: "#fff", strokeWidth: "1.5" }),
+        /* @__PURE__ */ a("rect", { className: "cf-hit", x: d(h) - v / 2, y: c.t, width: v, height: b - c.t - c.b, tabIndex: 0, role: "img", "aria-label": `${k}: ${V ? "forecast" : "actual"} ${A(R)}`, "data-tip-title": k, "data-tip": J })
+      ] }, h);
+    })
+  ] }) }) });
+}
+function X(p) {
+  const u = {};
+  for (const t of String(p ?? "").split(";")) {
+    const r = t.indexOf(":");
+    if (r < 0) continue;
+    const l = t.slice(0, r).trim();
+    l && (u[l.startsWith("--") ? l : l.replace(/-([a-z])/g, (g, f) => f.toUpperCase())] = t.slice(r + 1).trim());
+  }
+  return u;
+}
+function la({
+  title: p = "Signup funnel",
+  subtitle: u = "Last 30 days",
+  stages: t = [
+    { label: "Visited site", value: 48200 },
+    { label: "Viewed pricing", value: 19800 },
+    { label: "Started trial", value: 6400 },
+    { label: "Activated", value: 3900 },
+    { label: "Paid", value: 1240 }
+  ],
+  color: r = "var(--chart-1, #3987e5)",
+  variant: l = "glass",
+  size: g = "md",
+  className: f = ""
+}) {
+  var w, N;
+  const x = ((w = t[0]) == null ? void 0 : w.value) || 1, F = (((N = t[t.length - 1]) == null ? void 0 : N.value) ?? 0) / x * 100, _ = (s) => I(s);
+  return /* @__PURE__ */ a(L, { children: /* @__PURE__ */ a(O, { title: p, subtitle: u, value: `${F.toFixed(1)}%`, delta: "overall conversion", variant: l, size: g, className: f, table: {
+    headers: ["Stage", "Users", "% of top", "Step conversion"],
+    rows: t.map((s, e) => [s.label, _(s.value), `${(s.value / x * 100).toFixed(1)}%`, e ? `${(s.value / t[e - 1].value * 100).toFixed(1)}%` : "—"])
+  }, children: /* @__PURE__ */ a("ol", { className: "fn", "data-rk-9aefa4": "", children: t.map((s, e) => {
+    const b = s.value / x * 100, c = e ? s.value / t[e - 1].value * 100 : 100, i = 100 - e * (55 / Math.max(1, t.length - 1));
+    return /* @__PURE__ */ m("li", { className: "fn__stage", "data-rk-9aefa4": "", children: [
+      /* @__PURE__ */ m("div", { className: "fn__meta", "data-rk-9aefa4": "", children: [
+        /* @__PURE__ */ a("span", { className: "fn__label", "data-rk-9aefa4": "", children: s.label }),
+        /* @__PURE__ */ a("span", { className: "fn__value", "data-rk-9aefa4": "", children: _(s.value) })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "fn__track", "data-rk-9aefa4": "", children: /* @__PURE__ */ a("span", { className: "fn__bar cf-mark", tabIndex: 0, style: X(`width:${Math.max(2, b)}%; background:color-mix(in srgb, ${r} ${i}%, #0d0d0f)`), "aria-label": `${s.label}: ${_(s.value)}, ${b.toFixed(1)}% of top${e ? `, ${c.toFixed(1)}% from previous stage` : ""}`, "data-tip-title": s.label, "data-tip": `${_(s.value)} users|${b.toFixed(1)}% of top${e ? `|${c.toFixed(1)}% from previous` : ""}`, "data-rk-9aefa4": "" }) }),
+      e > 0 && /* @__PURE__ */ m("span", { className: "fn__drop", "aria-hidden": "true", "data-rk-9aefa4": "", children: [
+        /* @__PURE__ */ a("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "data-rk-9aefa4": "", children: /* @__PURE__ */ a("path", { d: "M5 9 L9 3 H1 Z", fill: "currentColor", "data-rk-9aefa4": "" }) }),
+        (100 - c).toFixed(0),
+        "% drop"
+      ] })
+    ] }, e);
+  }) }) }) });
+}
+function ca({
+  title: p = "Monthly sales goal",
+  subtitle: u = "November",
+  value: t = 73400,
+  max: r = 1e5,
+  label: l = "of $100k goal",
+  prefix: g = "$",
+  suffix: f = "",
+  color: x = "var(--chart-1, #3987e5)",
+  variant: F = "glass",
+  size: _ = "md",
+  className: w = ""
+}) {
+  const i = Math.max(0, Math.min(1, t / (r || 1))), o = -Math.PI / 2, S = Math.PI / 2, $ = (n) => I(n, g, f);
+  return /* @__PURE__ */ a(L, { children: /* @__PURE__ */ a(O, { title: p, subtitle: u, variant: F, size: _, className: w, table: { headers: ["Metric", "Value", "Goal", "% of goal"], rows: [[p, $(t), $(r), `${(i * 100).toFixed(1)}%`]] }, children: /* @__PURE__ */ m("div", { className: "gc", role: "meter", "aria-valuemin": 0, "aria-valuemax": r, "aria-valuenow": t, "aria-label": `${p}: ${$(t)} ${l}, ${(i * 100).toFixed(0)}%`, "data-rk-f7ded1": "", children: [
+    /* @__PURE__ */ m("svg", { viewBox: "0 0 260 150", "aria-hidden": "true", "data-rk-f7ded1": "", children: [
+      /* @__PURE__ */ a("path", { d: U(130, 132, 108, o, S), fill: "none", stroke: "rgb(var(--ink-rgb, 255 255 255) / 0.07)", strokeWidth: "18", strokeLinecap: "round", "data-rk-f7ded1": "" }),
+      i > 0 && /* @__PURE__ */ a("path", { className: "gc__arc", d: U(130, 132, 108, o, o + Math.PI * i), fill: "none", stroke: x, strokeWidth: "18", strokeLinecap: "round", "data-rk-f7ded1": "" }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: 22, y: 148, textAnchor: "middle", "data-rk-f7ded1": "", children: "0" }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: 238, y: 148, textAnchor: "middle", "data-rk-f7ded1": "", children: $(r) })
+    ] }),
+    /* @__PURE__ */ m("div", { className: "gc__center", "data-rk-f7ded1": "", children: [
+      /* @__PURE__ */ a("span", { className: "gc__value", "data-rk-f7ded1": "", children: $(t) }),
+      /* @__PURE__ */ m("span", { className: "gc__label", "data-rk-f7ded1": "", children: [
+        (i * 100).toFixed(0),
+        "% ",
+        l
+      ] })
+    ] })
+  ] }) }) });
+}
+function na({
+  title: p = "Revenue by region",
+  subtitle: u = "This year vs last year",
+  categories: t = ["NA", "EMEA", "LATAM", "APAC", "ANZ"],
+  series: r = [
+    { name: "2025", data: [420, 310, 120, 260, 90] },
+    { name: "2026", data: [510, 365, 168, 340, 112] }
+  ],
+  prefix: l = "$",
+  suffix: g = "k",
+  height: f = 280,
+  colors: x,
+  variant: F = "glass",
+  size: _ = "md",
+  className: w = ""
+}) {
+  const s = f, e = { t: 12, r: 12, b: 28, l: 48 }, b = D(0, Math.max(...r.flatMap((d) => d.data)), 4), c = Z(0, b[b.length - 1], s - e.b, e.t), i = (640 - e.l - e.r) / t.length, o = i * 0.72, S = 2, $ = (o - S * (r.length - 1)) / r.length, n = Math.min(4, $ / 2), y = (d) => I(d, l, g), W = (d, v, P, M) => {
+    const C = M - v;
+    if (C <= 0) return "";
+    const H = Math.min(n, C);
+    return `M${d},${M} V${v + H} Q${d},${v} ${d + H},${v} H${d + P - H} Q${d + P},${v} ${d + P},${v + H} V${M} Z`;
+  };
+  return /* @__PURE__ */ a(L, { children: /* @__PURE__ */ a(O, { title: p, subtitle: u, variant: F, size: _, className: w, legend: r.map((d, v) => ({ label: d.name, color: T(v, x) })), table: { headers: ["Category", ...r.map((d) => d.name)], rows: t.map((d, v) => [d, ...r.map((P) => y(P.data[v]))]) }, children: /* @__PURE__ */ m("svg", { viewBox: `0 0 640 ${s}`, role: "img", "aria-label": `${p}: grouped bar chart`, "data-rk-1a0e25": "", children: [
+    b.map((d, v) => /* @__PURE__ */ m("g", { "data-rk-1a0e25": "", children: [
+      /* @__PURE__ */ a("line", { className: d === 0 ? "cf-axis" : "cf-grid", x1: e.l, x2: 640 - e.r, y1: c(d), y2: c(d), "data-rk-1a0e25": "" }),
+      /* @__PURE__ */ a("text", { className: "cf-label", x: e.l - 8, y: c(d) + 4, textAnchor: "end", "data-rk-1a0e25": "", children: y(d) })
+    ] }, v)),
+    t.map((d, v) => {
+      const P = e.l + v * i + (i - o) / 2;
+      return /* @__PURE__ */ m("g", { "data-rk-1a0e25": "", children: [
+        /* @__PURE__ */ a("text", { className: "cf-label", x: e.l + v * i + i / 2, y: s - 8, textAnchor: "middle", "data-rk-1a0e25": "", children: d }),
+        r.slice(0, 8).map((M, C) => {
+          const H = P + C * ($ + S), B = M.data[v] ?? 0;
+          return /* @__PURE__ */ a("path", { className: "cf-mark cf-dim gb__bar", d: W(H, c(B), $, c(0)), fill: T(C, x), tabIndex: 0, role: "img", "aria-label": `${d}, ${M.name}: ${y(B)}`, "data-tip-title": d, "data-tip": `${T(C, x)}::${M.name}: ${y(B)}`, "data-rk-1a0e25": "" }, C);
+        })
+      ] }, v);
+    })
+  ] }) }) });
+}
+function G(p) {
+  const u = {};
+  for (const t of String(p ?? "").split(";")) {
+    const r = t.indexOf(":");
+    if (r < 0) continue;
+    const l = t.slice(0, r).trim();
+    l && (u[l.startsWith("--") ? l : l.replace(/-([a-z])/g, (g, f) => f.toUpperCase())] = t.slice(r + 1).trim());
+  }
+  return u;
+}
+function da({
+  title: p = "Error rate by service",
+  subtitle: u = "Per weekday, % of requests",
+  rows: t = ["auth", "billing", "search", "uploads", "webhooks"],
+  columns: r = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  values: l = [
+    [0.2, 0.3, 0.2, 0.4, 0.6, 0.1, 0.1],
+    [0.8, 1.2, 0.9, 1.6, 2.4, 0.4, 0.3],
+    [0.4, 0.5, 0.7, 0.6, 0.9, 0.3, 0.2],
+    [1.1, 1.4, 1.9, 2.8, 3.2, 0.9, 0.6],
+    [0.3, 0.2, 0.4, 0.5, 0.4, 0.2, 0.1]
+  ],
+  showValues: g = !0,
+  suffix: f = "%",
+  color: x = "var(--chart-1, #3987e5)",
+  variant: F = "glass",
+  size: _ = "md",
+  className: w = ""
+}) {
+  const N = l.flat(), s = Math.min(...N), e = Math.max(...N), b = (i) => e === s ? 1 : (i - s) / (e - s), c = (i) => `color-mix(in srgb, ${x} ${Math.round(12 + b(i) * 88)}%, #141416)`;
+  return /* @__PURE__ */ a(L, { children: /* @__PURE__ */ a(O, { title: p, subtitle: u, variant: F, size: _, className: w, table: { headers: ["", ...r], rows: t.map((i, o) => [i, ...l[o].map((S) => `${S}${f}`)]) }, children: /* @__PURE__ */ m("div", { className: "hm", style: G(`--hm-cols:${r.length}`), "data-rk-9ca6f8": "", children: [
+    /* @__PURE__ */ m("div", { className: "hm__grid", role: "grid", "aria-label": p, "data-rk-9ca6f8": "", children: [
+      /* @__PURE__ */ m("div", { className: "hm__row", role: "row", "data-rk-9ca6f8": "", children: [
+        /* @__PURE__ */ a("span", { className: "hm__corner", role: "columnheader", "data-rk-9ca6f8": "" }),
+        r.map((i, o) => /* @__PURE__ */ a("span", { className: "hm__col", role: "columnheader", "data-rk-9ca6f8": "", children: i }, o))
+      ] }),
+      t.map((i, o) => /* @__PURE__ */ m("div", { className: "hm__row", role: "row", "data-rk-9ca6f8": "", children: [
+        /* @__PURE__ */ a("span", { className: "hm__rowlabel", role: "rowheader", "data-rk-9ca6f8": "", children: i }),
+        r.map((S, $) => {
+          var y;
+          const n = ((y = l[o]) == null ? void 0 : y[$]) ?? 0;
+          return /* @__PURE__ */ a("span", { className: "hm__cell cf-mark", role: "gridcell", tabIndex: 0, style: G(`background:${c(n)}`), "aria-label": `${i}, ${S}: ${n}${f}`, "data-tip-title": `${i} · ${S}`, "data-tip": `${n}${f}`, "data-rk-9ca6f8": "", children: g && /* @__PURE__ */ a("span", { className: b(n) > 0.55 ? "hm__v hm__v--strong" : "hm__v", "data-rk-9ca6f8": "", children: n }) }, $);
+        })
+      ] }, o))
+    ] }),
+    /* @__PURE__ */ m("div", { className: "hm__scale", "aria-hidden": "true", "data-rk-9ca6f8": "", children: [
+      /* @__PURE__ */ m("span", { "data-rk-9ca6f8": "", children: [
+        s,
+        f
+      ] }),
+      /* @__PURE__ */ a("span", { className: "hm__ramp", style: G(`background:linear-gradient(90deg, ${c(s)}, ${c(e)})`), "data-rk-9ca6f8": "" }),
+      /* @__PURE__ */ m("span", { "data-rk-9ca6f8": "", children: [
+        e,
+        f
+      ] })
+    ] })
+  ] }) }) });
+}
+function Y(p) {
+  const u = {};
+  for (const t of String(p ?? "").split(";")) {
+    const r = t.indexOf(":");
+    if (r < 0) continue;
+    const l = t.slice(0, r).trim();
+    l && (u[l.startsWith("--") ? l : l.replace(/-([a-z])/g, (g, f) => f.toUpperCase())] = t.slice(r + 1).trim());
+  }
+  return u;
+}
+function sa({
+  title: p = "Channel performance",
+  subtitle: u = "Signups this month vs last month",
+  rows: t = [
+    { label: "Organic search", current: 4820, previous: 4310, trend: [30, 34, 33, 38, 41, 44, 48] },
+    { label: "Direct", current: 3120, previous: 3290, trend: [36, 35, 34, 33, 33, 32, 31] },
+    { label: "Newsletter", current: 1840, previous: 1220, trend: [10, 12, 13, 14, 16, 17, 18] },
+    { label: "Paid social", current: 1310, previous: 1480, trend: [16, 15, 15, 14, 14, 13, 13] },
+    { label: "Partners", current: 960, previous: 710, trend: [6, 7, 7, 8, 8, 9, 10] }
+  ],
+  currentLabel: r = "This month",
+  previousLabel: l = "Last month",
+  prefix: g = "",
+  suffix: f = "",
+  color: x = "var(--chart-1, #3987e5)",
+  variant: F = "glass",
+  size: _ = "md",
+  className: w = ""
+}) {
+  const N = Math.max(...t.map((e) => e.current)) || 1, s = (e) => I(e, g, f, !1);
+  return /* @__PURE__ */ a(L, { children: /* @__PURE__ */ a(O, { title: p, subtitle: u, variant: F, size: _, className: w, children: /* @__PURE__ */ a("div", { className: "md", "data-rk-df9b34": "", children: /* @__PURE__ */ m("table", { className: "md__table", "data-rk-df9b34": "", children: [
+    /* @__PURE__ */ a("thead", { "data-rk-df9b34": "", children: /* @__PURE__ */ m("tr", { "data-rk-df9b34": "", children: [
+      /* @__PURE__ */ a("th", { scope: "col", "data-rk-df9b34": "", children: "Metric" }),
+      /* @__PURE__ */ a("th", { scope: "col", className: "md__num", "data-rk-df9b34": "", children: r }),
+      /* @__PURE__ */ a("th", { scope: "col", className: "md__num md__hide-sm", "data-rk-df9b34": "", children: l }),
+      /* @__PURE__ */ a("th", { scope: "col", className: "md__num", "data-rk-df9b34": "", children: "Change" }),
+      /* @__PURE__ */ a("th", { scope: "col", className: "md__hide-sm", "data-rk-df9b34": "", children: /* @__PURE__ */ a("span", { className: "sr-only", "data-rk-df9b34": "", children: "Trend" }) })
+    ] }) }),
+    /* @__PURE__ */ a("tbody", { "data-rk-df9b34": "", children: t.map((e, b) => {
+      const c = e.previous ? (e.current - e.previous) / e.previous * 100 : 0, i = c >= 0, o = e.invert ? !i : i;
+      return /* @__PURE__ */ m("tr", { "data-rk-df9b34": "", children: [
+        /* @__PURE__ */ m("th", { scope: "row", "data-rk-df9b34": "", children: [
+          /* @__PURE__ */ a("span", { className: "md__label", "data-rk-df9b34": "", children: e.label }),
+          /* @__PURE__ */ a("span", { className: "md__bar", "aria-hidden": "true", "data-rk-df9b34": "", children: /* @__PURE__ */ a("span", { style: Y(`width:${e.current / N * 100}%; background:${x}`), "data-rk-df9b34": "" }) })
+        ] }),
+        /* @__PURE__ */ a("td", { className: "md__num md__strong", "data-rk-df9b34": "", children: s(e.current) }),
+        /* @__PURE__ */ a("td", { className: "md__num md__hide-sm", "data-rk-df9b34": "", children: s(e.previous) }),
+        /* @__PURE__ */ a("td", { className: "md__num", "data-rk-df9b34": "", children: /* @__PURE__ */ m("span", { className: `md__delta ${o ? "md__delta--good" : "md__delta--bad"}`, "data-rk-df9b34": "", children: [
+          /* @__PURE__ */ a("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", "data-rk-df9b34": "", children: /* @__PURE__ */ a("path", { d: i ? "M5 1 L9 7 H1 Z" : "M5 9 L9 3 H1 Z", fill: "currentColor", "data-rk-df9b34": "" }) }),
+          /* @__PURE__ */ a("span", { className: "sr-only", "data-rk-df9b34": "", children: i ? "up" : "down" }),
+          Math.abs(c).toFixed(1),
+          "%"
+        ] }) }),
+        /* @__PURE__ */ a("td", { className: "md__hide-sm", "data-rk-df9b34": "", children: e.trend && /* @__PURE__ */ a(q, { data: e.trend, size: "sm", variant: "line", label: `${e.label} trend`, color: o ? "var(--chart-pos, #34c38f)" : "var(--chart-neg, #f06a6a)" }) })
+      ] }, b);
+    }) })
+  ] }) }) }) });
+}
+function aa(p) {
+  const u = {};
+  for (const t of String(p ?? "").split(";")) {
+    const r = t.indexOf(":");
+    if (r < 0) continue;
+    const l = t.slice(0, r).trim();
+    l && (u[l.startsWith("--") ? l : l.replace(/-([a-z])/g, (g, f) => f.toUpperCase())] = t.slice(r + 1).trim());
+  }
+  return u;
+}
+function ia({
+  title: p = "Revenue by plan",
+  subtitle: u = "Share of MRR",
+  slices: t = [
+    { label: "Enterprise", value: 48200 },
+    { label: "Team", value: 31400 },
+    { label: "Pro", value: 18900 },
+    { label: "Starter", value: 7600 }
+  ],
+  donut: r = !0,
+  centerLabel: l = "Total MRR",
+  prefix: g = "$",
+  suffix: f = "",
+  colors: x,
+  variant: F = "glass",
+  size: _ = "md",
+  className: w = ""
+}) {
+  const b = r ? 71.92 : 0, c = E(t.map((n) => n.value)) || 1, i = 0.012;
+  let o = 0;
+  const S = t.slice(0, 8).map((n, y) => {
+    const W = n.value / c * Math.PI * 2, d = o + (t.length > 1 ? i / 2 : 0), v = o + W - (t.length > 1 ? i / 2 : 0);
+    return o += W, { ...n, d: K(120, 120, 116, b, d, Math.max(d, v)), pct: n.value / c * 100, color: T(y, x) };
+  }), $ = (n) => I(n, g, f);
+  return /* @__PURE__ */ a(L, { children: /* @__PURE__ */ a(O, { title: p, subtitle: u, variant: F, size: _, className: w, table: { headers: ["Slice", "Value", "Share"], rows: S.map((n) => [n.label, $(n.value), `${n.pct.toFixed(1)}%`]) }, children: /* @__PURE__ */ m("div", { className: "pc", "data-rk-991c0e": "", children: [
+    /* @__PURE__ */ m("svg", { viewBox: "0 0 240 240", role: "img", "aria-label": `${p}: ${r ? "donut" : "pie"} chart, total ${$(c)}`, "data-rk-991c0e": "", children: [
+      S.map((n, y) => /* @__PURE__ */ a("path", { className: "cf-mark cf-dim pc__slice", d: n.d, fill: n.color, tabIndex: 0, role: "img", "aria-label": `${n.label}: ${$(n.value)} (${n.pct.toFixed(1)}%)`, "data-tip-title": n.label, "data-tip": `${n.color}::${$(n.value)} · ${n.pct.toFixed(1)}%`, "data-rk-991c0e": "" }, y)),
+      r && /* @__PURE__ */ m("g", { "aria-hidden": "true", "data-rk-991c0e": "", children: [
+        /* @__PURE__ */ a("text", { x: 120, y: 122, textAnchor: "middle", className: "pc__total", "data-rk-991c0e": "", children: $(c) }),
+        /* @__PURE__ */ a("text", { x: 120, y: 142, textAnchor: "middle", className: "cf-label", "data-rk-991c0e": "", children: l })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("ul", { className: "pc__list", "data-rk-991c0e": "", children: S.map((n, y) => /* @__PURE__ */ m("li", { "data-rk-991c0e": "", children: [
+      /* @__PURE__ */ a("span", { className: "pc__dot", style: aa(`background:${n.color}`), "aria-hidden": "true", "data-rk-991c0e": "" }),
+      /* @__PURE__ */ a("span", { className: "pc__name", "data-rk-991c0e": "", children: n.label }),
+      /* @__PURE__ */ m("span", { className: "pc__pct", "data-rk-991c0e": "", children: [
+        n.pct.toFixed(0),
+        "%"
+      ] }),
+      /* @__PURE__ */ a("span", { className: "pc__val", "data-rk-991c0e": "", children: $(n.value) })
+    ] }, y)) })
+  ] }) }) });
+}
+function j(p) {
+  const u = {};
+  for (const t of String(p ?? "").split(";")) {
+    const r = t.indexOf(":");
+    if (r < 0) continue;
+    const l = t.slice(0, r).trim();
+    l && (u[l.startsWith("--") ? l : l.replace(/-([a-z])/g, (g, f) => f.toUpperCase())] = t.slice(r + 1).trim());
+  }
+  return u;
+}
+function oa({
+  title: p = "Storage usage",
+  subtitle: u = "512 GB plan",
+  segments: t = [
+    { label: "Media", value: 182 },
+    { label: "Backups", value: 96 },
+    { label: "Databases", value: 64 },
+    { label: "Logs", value: 38 },
+    { label: "Other", value: 22 }
+  ],
+  total: r,
+  prefix: l = "",
+  suffix: g = " GB",
+  colors: f,
+  variant: x = "glass",
+  size: F = "md",
+  className: _ = ""
+}) {
+  const w = E(t.map((e) => e.value)) || 1, N = (e) => I(e, l, g, !1), s = t.slice(0, 8).map((e, b) => ({ ...e, pct: e.value / w * 100, color: T(b, f) }));
+  return /* @__PURE__ */ a(L, { children: /* @__PURE__ */ m(O, { title: p, subtitle: u, value: r ?? N(w), variant: x, size: F, className: _, table: { headers: ["Segment", "Value", "Share"], rows: s.map((e) => [e.label, N(e.value), `${e.pct.toFixed(1)}%`]) }, children: [
+    /* @__PURE__ */ a("div", { className: "sb__bar", role: "list", "aria-label": `${p} breakdown`, "data-rk-740040": "", children: s.map((e, b) => /* @__PURE__ */ a("span", { className: "sb__seg cf-mark", role: "listitem", tabIndex: 0, style: j(`flex-grow:${e.value}; background:${e.color}`), "aria-label": `${e.label}: ${N(e.value)} (${e.pct.toFixed(1)}%)`, "data-tip-title": e.label, "data-tip": `${e.color}::${N(e.value)} · ${e.pct.toFixed(1)}%`, "data-rk-740040": "", children: e.pct >= 9 && /* @__PURE__ */ m("span", { className: "sb__pct", "data-rk-740040": "", children: [
+      e.pct.toFixed(0),
+      "%"
+    ] }) }, b)) }),
+    /* @__PURE__ */ a("ul", { className: "sb__list", "data-rk-740040": "", children: s.map((e, b) => /* @__PURE__ */ m("li", { "data-rk-740040": "", children: [
+      /* @__PURE__ */ a("span", { className: "sb__dot", style: j(`background:${e.color}`), "aria-hidden": "true", "data-rk-740040": "" }),
+      /* @__PURE__ */ a("span", { className: "sb__name", "data-rk-740040": "", children: e.label }),
+      /* @__PURE__ */ a("span", { className: "sb__val", "data-rk-740040": "", children: N(e.value) })
+    ] }, b)) })
+  ] }) });
+}
+export {
+  ra as F,
+  ca as G,
+  da as H,
+  sa as M,
+  ia as P,
+  oa as S,
+  la as a,
+  na as b
+};