@vesture/react 0.2.10 → 0.3.0

package/dist/index.js

@@ -2598,10 +2598,10 @@ function clampToMidnight3(date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 }
 function compareDates(a, b) {
-  const x = clampToMidnight3(a).getTime();
-  const y = clampToMidnight3(b).getTime();
-  if (x < y) return -1;
-  if (x > y) return 1;
+  const x2 = clampToMidnight3(a).getTime();
+  const y2 = clampToMidnight3(b).getTime();
+  if (x2 < y2) return -1;
+  if (x2 > y2) return 1;
   return 0;
 }
 function isDisabled2(date, minDate, maxDate, isDateDisabled) {
@@ -4213,16 +4213,1390 @@ function useCommandPaletteShortcut(onOpenChange, options = {}) {
   }, [onOpenChange, key, metaKey, ctrlKey]);
 }
 
+// src/components/charts/LineChart/LineChart.tsx
+import { AxisBottom, AxisLeft } from "@visx/axis";
+import { GridRows } from "@visx/grid";
+import { Group } from "@visx/group";
+import { LinePath } from "@visx/shape";
+import { vars as vars4 } from "@vesture/tokens";
+
+// src/components/charts/LineChart/LineChart.render.ts
+import { scaleBand, scaleLinear, scaleTime } from "@visx/scale";
+
+// ../../node_modules/d3-shape/src/constant.js
+function constant_default(x2) {
+  return function constant() {
+    return x2;
+  };
+}
+
+// ../../node_modules/d3-path/src/path.js
+var pi = Math.PI;
+var tau = 2 * pi;
+var epsilon = 1e-6;
+var tauEpsilon = tau - epsilon;
+function append(strings) {
+  this._ += strings[0];
+  for (let i = 1, n = strings.length; i < n; ++i) {
+    this._ += arguments[i] + strings[i];
+  }
+}
+function appendRound(digits) {
+  let d = Math.floor(digits);
+  if (!(d >= 0)) throw new Error(`invalid digits: ${digits}`);
+  if (d > 15) return append;
+  const k = 10 ** d;
+  return function(strings) {
+    this._ += strings[0];
+    for (let i = 1, n = strings.length; i < n; ++i) {
+      this._ += Math.round(arguments[i] * k) / k + strings[i];
+    }
+  };
+}
+var Path = class {
+  constructor(digits) {
+    this._x0 = this._y0 = // start of current subpath
+    this._x1 = this._y1 = null;
+    this._ = "";
+    this._append = digits == null ? append : appendRound(digits);
+  }
+  moveTo(x2, y2) {
+    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}`;
+  }
+  closePath() {
+    if (this._x1 !== null) {
+      this._x1 = this._x0, this._y1 = this._y0;
+      this._append`Z`;
+    }
+  }
+  lineTo(x2, y2) {
+    this._append`L${this._x1 = +x2},${this._y1 = +y2}`;
+  }
+  quadraticCurveTo(x1, y1, x2, y2) {
+    this._append`Q${+x1},${+y1},${this._x1 = +x2},${this._y1 = +y2}`;
+  }
+  bezierCurveTo(x1, y1, x2, y2, x3, y3) {
+    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x3},${this._y1 = +y3}`;
+  }
+  arcTo(x1, y1, x2, y2, r) {
+    x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
+    if (r < 0) throw new Error(`negative radius: ${r}`);
+    let x0 = this._x1, y0 = this._y1, x21 = x2 - x1, y21 = y2 - y1, x01 = x0 - x1, y01 = y0 - y1, l01_2 = x01 * x01 + y01 * y01;
+    if (this._x1 === null) {
+      this._append`M${this._x1 = x1},${this._y1 = y1}`;
+    } else if (!(l01_2 > epsilon)) ;
+    else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
+      this._append`L${this._x1 = x1},${this._y1 = y1}`;
+    } else {
+      let x20 = x2 - x0, y20 = y2 - y0, l21_2 = x21 * x21 + y21 * y21, l20_2 = x20 * x20 + y20 * y20, l21 = Math.sqrt(l21_2), l01 = Math.sqrt(l01_2), l = r * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2), t01 = l / l01, t21 = l / l21;
+      if (Math.abs(t01 - 1) > epsilon) {
+        this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`;
+      }
+      this._append`A${r},${r},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
+    }
+  }
+  arc(x2, y2, r, a0, a1, ccw) {
+    x2 = +x2, y2 = +y2, r = +r, ccw = !!ccw;
+    if (r < 0) throw new Error(`negative radius: ${r}`);
+    let dx = r * Math.cos(a0), dy = r * Math.sin(a0), x0 = x2 + dx, y0 = y2 + dy, cw = 1 ^ ccw, da = ccw ? a0 - a1 : a1 - a0;
+    if (this._x1 === null) {
+      this._append`M${x0},${y0}`;
+    } else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
+      this._append`L${x0},${y0}`;
+    }
+    if (!r) return;
+    if (da < 0) da = da % tau + tau;
+    if (da > tauEpsilon) {
+      this._append`A${r},${r},0,1,${cw},${x2 - dx},${y2 - dy}A${r},${r},0,1,${cw},${this._x1 = x0},${this._y1 = y0}`;
+    } else if (da > epsilon) {
+      this._append`A${r},${r},0,${+(da >= pi)},${cw},${this._x1 = x2 + r * Math.cos(a1)},${this._y1 = y2 + r * Math.sin(a1)}`;
+    }
+  }
+  rect(x2, y2, w, h) {
+    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}h${w = +w}v${+h}h${-w}Z`;
+  }
+  toString() {
+    return this._;
+  }
+};
+function path() {
+  return new Path();
+}
+path.prototype = Path.prototype;
+
+// ../../node_modules/d3-shape/src/path.js
+function withPath(shape) {
+  let digits = 3;
+  shape.digits = function(_) {
+    if (!arguments.length) return digits;
+    if (_ == null) {
+      digits = null;
+    } else {
+      const d = Math.floor(_);
+      if (!(d >= 0)) throw new RangeError(`invalid digits: ${_}`);
+      digits = d;
+    }
+    return shape;
+  };
+  return () => new Path(digits);
+}
+
+// ../../node_modules/d3-shape/src/array.js
+var slice = Array.prototype.slice;
+function array_default(x2) {
+  return typeof x2 === "object" && "length" in x2 ? x2 : Array.from(x2);
+}
+
+// ../../node_modules/d3-shape/src/curve/linear.js
+function Linear(context) {
+  this._context = context;
+}
+Linear.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._point = 0;
+  },
+  lineEnd: function() {
+    if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
+    this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    x2 = +x2, y2 = +y2;
+    switch (this._point) {
+      case 0:
+        this._point = 1;
+        this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+      // falls through
+      default:
+        this._context.lineTo(x2, y2);
+        break;
+    }
+  }
+};
+function linear_default(context) {
+  return new Linear(context);
+}
+
+// ../../node_modules/d3-shape/src/point.js
+function x(p) {
+  return p[0];
+}
+function y(p) {
+  return p[1];
+}
+
+// ../../node_modules/d3-shape/src/line.js
+function line_default(x2, y2) {
+  var defined = constant_default(true), context = null, curve = linear_default, output = null, path2 = withPath(line);
+  x2 = typeof x2 === "function" ? x2 : x2 === void 0 ? x : constant_default(x2);
+  y2 = typeof y2 === "function" ? y2 : y2 === void 0 ? y : constant_default(y2);
+  function line(data) {
+    var i, n = (data = array_default(data)).length, d, defined0 = false, buffer;
+    if (context == null) output = curve(buffer = path2());
+    for (i = 0; i <= n; ++i) {
+      if (!(i < n && defined(d = data[i], i, data)) === defined0) {
+        if (defined0 = !defined0) output.lineStart();
+        else output.lineEnd();
+      }
+      if (defined0) output.point(+x2(d, i, data), +y2(d, i, data));
+    }
+    if (buffer) return output = null, buffer + "" || null;
+  }
+  line.x = function(_) {
+    return arguments.length ? (x2 = typeof _ === "function" ? _ : constant_default(+_), line) : x2;
+  };
+  line.y = function(_) {
+    return arguments.length ? (y2 = typeof _ === "function" ? _ : constant_default(+_), line) : y2;
+  };
+  line.defined = function(_) {
+    return arguments.length ? (defined = typeof _ === "function" ? _ : constant_default(!!_), line) : defined;
+  };
+  line.curve = function(_) {
+    return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;
+  };
+  line.context = function(_) {
+    return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;
+  };
+  return line;
+}
+
+// ../../node_modules/d3-shape/src/area.js
+function area_default(x0, y0, y1) {
+  var x1 = null, defined = constant_default(true), context = null, curve = linear_default, output = null, path2 = withPath(area);
+  x0 = typeof x0 === "function" ? x0 : x0 === void 0 ? x : constant_default(+x0);
+  y0 = typeof y0 === "function" ? y0 : y0 === void 0 ? constant_default(0) : constant_default(+y0);
+  y1 = typeof y1 === "function" ? y1 : y1 === void 0 ? y : constant_default(+y1);
+  function area(data) {
+    var i, j, k, n = (data = array_default(data)).length, d, defined0 = false, buffer, x0z = new Array(n), y0z = new Array(n);
+    if (context == null) output = curve(buffer = path2());
+    for (i = 0; i <= n; ++i) {
+      if (!(i < n && defined(d = data[i], i, data)) === defined0) {
+        if (defined0 = !defined0) {
+          j = i;
+          output.areaStart();
+          output.lineStart();
+        } else {
+          output.lineEnd();
+          output.lineStart();
+          for (k = i - 1; k >= j; --k) {
+            output.point(x0z[k], y0z[k]);
+          }
+          output.lineEnd();
+          output.areaEnd();
+        }
+      }
+      if (defined0) {
+        x0z[i] = +x0(d, i, data), y0z[i] = +y0(d, i, data);
+        output.point(x1 ? +x1(d, i, data) : x0z[i], y1 ? +y1(d, i, data) : y0z[i]);
+      }
+    }
+    if (buffer) return output = null, buffer + "" || null;
+  }
+  function arealine() {
+    return line_default().defined(defined).curve(curve).context(context);
+  }
+  area.x = function(_) {
+    return arguments.length ? (x0 = typeof _ === "function" ? _ : constant_default(+_), x1 = null, area) : x0;
+  };
+  area.x0 = function(_) {
+    return arguments.length ? (x0 = typeof _ === "function" ? _ : constant_default(+_), area) : x0;
+  };
+  area.x1 = function(_) {
+    return arguments.length ? (x1 = _ == null ? null : typeof _ === "function" ? _ : constant_default(+_), area) : x1;
+  };
+  area.y = function(_) {
+    return arguments.length ? (y0 = typeof _ === "function" ? _ : constant_default(+_), y1 = null, area) : y0;
+  };
+  area.y0 = function(_) {
+    return arguments.length ? (y0 = typeof _ === "function" ? _ : constant_default(+_), area) : y0;
+  };
+  area.y1 = function(_) {
+    return arguments.length ? (y1 = _ == null ? null : typeof _ === "function" ? _ : constant_default(+_), area) : y1;
+  };
+  area.lineX0 = area.lineY0 = function() {
+    return arealine().x(x0).y(y0);
+  };
+  area.lineY1 = function() {
+    return arealine().x(x0).y(y1);
+  };
+  area.lineX1 = function() {
+    return arealine().x(x1).y(y0);
+  };
+  area.defined = function(_) {
+    return arguments.length ? (defined = typeof _ === "function" ? _ : constant_default(!!_), area) : defined;
+  };
+  area.curve = function(_) {
+    return arguments.length ? (curve = _, context != null && (output = curve(context)), area) : curve;
+  };
+  area.context = function(_) {
+    return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), area) : context;
+  };
+  return area;
+}
+
+// src/components/charts/LineChart/LineChart.render.ts
+import { vars as vars3 } from "@vesture/tokens";
+var DEFAULT_MARGIN = { top: 16, right: 16, bottom: 32, left: 48 };
+var SERIES_COLOR_CYCLE = [
+  vars3.chart.series1,
+  vars3.chart.series2,
+  vars3.chart.series3,
+  vars3.chart.series4,
+  vars3.chart.series5,
+  vars3.chart.series6,
+  vars3.chart.series7,
+  vars3.chart.series8
+];
+function getSeriesColor(series, index) {
+  return series.color ?? SERIES_COLOR_CYCLE[index % SERIES_COLOR_CYCLE.length];
+}
+function resolveMargin(margin) {
+  return { ...DEFAULT_MARGIN, ...margin };
+}
+function inferXScaleType(data) {
+  const first = data[0]?.x;
+  if (first instanceof Date) return "time";
+  if (typeof first === "number") return "linear";
+  return "band";
+}
+function numericValue(value) {
+  if (value === void 0) return void 0;
+  const n = value instanceof Date ? value.getTime() : Number(value);
+  return Number.isFinite(n) ? n : void 0;
+}
+function buildScales(data, series, width, height, margin, xScaleType, stacked = false) {
+  const innerWidth = Math.max(0, width - margin.left - margin.right);
+  const innerHeight = Math.max(0, height - margin.top - margin.bottom);
+  let xScale;
+  if (xScaleType === "time") {
+    const xValues = data.map((d) => new Date(d.x).getTime());
+    xScale = scaleTime({
+      domain: [Math.min(...xValues), Math.max(...xValues)],
+      range: [0, innerWidth]
+    });
+  } else if (xScaleType === "linear") {
+    const xValues = data.map((d) => Number(d.x));
+    xScale = scaleLinear({
+      domain: [Math.min(...xValues), Math.max(...xValues)],
+      range: [0, innerWidth]
+    });
+  } else {
+    xScale = scaleBand({
+      domain: data.map((d) => String(d.x)),
+      range: [0, innerWidth],
+      padding: 0.2
+    });
+  }
+  const yValues = stacked ? data.map((d) => series.reduce((sum, s) => sum + (numericValue(d[s.key]) ?? 0), 0)) : data.flatMap(
+    (d) => series.map((s) => numericValue(d[s.key])).filter((v) => v !== void 0)
+  );
+  const yMin = stacked ? 0 : yValues.length > 0 ? Math.min(0, ...yValues) : 0;
+  const yMax = yValues.length > 0 ? Math.max(...yValues) : 1;
+  const yScale = scaleLinear({
+    domain: [yMin, yMax],
+    range: [innerHeight, 0],
+    nice: true
+  });
+  return { xScale, yScale, xScaleType, innerWidth, innerHeight, margin };
+}
+function getXPixel(scales, x2) {
+  const { xScale, xScaleType } = scales;
+  if (xScaleType === "band") {
+    const pos = xScale(String(x2));
+    if (pos === void 0) return void 0;
+    return pos + xScale.bandwidth() / 2;
+  }
+  if (xScaleType === "time") {
+    return xScale(new Date(x2));
+  }
+  return xScale(Number(x2));
+}
+function getYPixel(scales, value) {
+  const n = numericValue(value);
+  if (n === void 0) return void 0;
+  return scales.yScale(n);
+}
+var pathGenerator = line_default().x((p) => p.x).y((p) => p.y);
+function buildLineChartLayout(data, series, width, height, margin, xScaleType) {
+  const resolvedMargin = resolveMargin(margin);
+  const resolvedXScaleType = xScaleType ?? inferXScaleType(data);
+  const scales = buildScales(data, series, width, height, resolvedMargin, resolvedXScaleType);
+  const seriesLayouts = series.map((s, index) => {
+    const points = [];
+    data.forEach((d, dataIndex) => {
+      const x2 = getXPixel(scales, d.x);
+      const y2 = getYPixel(scales, d[s.key]);
+      if (x2 !== void 0 && y2 !== void 0) {
+        points.push({ dataIndex, x: x2, y: y2 });
+      }
+    });
+    return {
+      key: s.key,
+      label: s.label,
+      color: getSeriesColor(s, index),
+      points,
+      path: points.length >= 2 ? pathGenerator(points) ?? "" : ""
+    };
+  });
+  return { scales, seriesLayouts };
+}
+function findNearestDataIndex(data, scales, pixelX) {
+  if (data.length === 0) return null;
+  let nearestIndex = 0;
+  let nearestDistance = Infinity;
+  data.forEach((d, index) => {
+    const x2 = getXPixel(scales, d.x);
+    if (x2 === void 0) return;
+    const distance = Math.abs(x2 - pixelX);
+    if (distance < nearestDistance) {
+      nearestDistance = distance;
+      nearestIndex = index;
+    }
+  });
+  return nearestDistance === Infinity ? null : nearestIndex;
+}
+
+// src/components/charts/LineChart/LineChart.css.ts
+var emptyState4 = "chartSurfaces_emptyState__n6njm11";
+var legend = "chartSurfaces_legend__n6njm15";
+var legendItem = "chartSurfaces_legendItem__n6njm16";
+var legendItemHidden = "chartSurfaces_legendItemHidden__n6njm17";
+var legendSwatch = "chartSurfaces_legendSwatch__n6njm18";
+var overlayRect = "LineChart_overlayRect__1kfw0no0";
+var root5 = "chartSurfaces_root__n6njm10";
+var tooltip2 = "chartSurfaces_tooltip__n6njm12";
+var tooltipRow = "chartSurfaces_tooltipRow__n6njm13";
+var tooltipSwatch = "chartSurfaces_tooltipSwatch__n6njm14";
+
+// src/components/charts/LineChart/LineChart.tsx
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+function LineChart({
+  data,
+  series,
+  width,
+  height,
+  margin,
+  xScale
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx43("div", { className: root5, style: { width, height }, children: /* @__PURE__ */ jsx43("div", { className: emptyState4, style: { width, height }, children: "No data" }) });
+  }
+  const { scales, seriesLayouts } = buildLineChartLayout(data, series, width, height, margin, xScale);
+  const { xScale: scaleX, yScale, innerWidth, innerHeight, margin: resolvedMargin } = scales;
+  return /* @__PURE__ */ jsx43("div", { className: root5, children: /* @__PURE__ */ jsx43("svg", { width, height, role: "img", "aria-label": "Line chart", children: /* @__PURE__ */ jsxs26(Group, { left: resolvedMargin.left, top: resolvedMargin.top, children: [
+    /* @__PURE__ */ jsx43(GridRows, { scale: yScale, width: innerWidth, height: innerHeight, stroke: vars4.chart.grid }),
+    seriesLayouts.map((s) => /* @__PURE__ */ jsx43(
+      LinePath,
+      {
+        data: s.points,
+        x: (p) => p.x,
+        y: (p) => p.y,
+        stroke: s.color,
+        strokeWidth: 2,
+        fill: "none"
+      },
+      s.key
+    )),
+    /* @__PURE__ */ jsx43(
+      AxisBottom,
+      {
+        top: innerHeight,
+        scale: scaleX,
+        stroke: vars4.chart.axis,
+        tickStroke: vars4.chart.axis,
+        tickLabelProps: () => ({ fill: vars4.chart.axis, fontSize: 11, textAnchor: "middle" })
+      }
+    ),
+    /* @__PURE__ */ jsx43(
+      AxisLeft,
+      {
+        scale: yScale,
+        stroke: vars4.chart.axis,
+        tickStroke: vars4.chart.axis,
+        tickLabelProps: () => ({ fill: vars4.chart.axis, fontSize: 11, textAnchor: "end", dx: "-0.25em" })
+      }
+    )
+  ] }) }) });
+}
+
+// src/components/charts/LineChart/LineChart.interactive.tsx
+import { useMemo as useMemo6, useState as useState17 } from "react";
+import { ParentSize } from "@visx/responsive";
+import { TooltipWithBounds, useTooltip } from "@visx/tooltip";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
+function InteractiveLineChart({
+  data,
+  series,
+  margin,
+  xScale,
+  height = 320
+}) {
+  const [hiddenKeys, setHiddenKeys] = useState17(/* @__PURE__ */ new Set());
+  const coloredSeries = useMemo6(
+    () => series.map((s, index) => ({ ...s, color: s.color ?? getSeriesColor(s, index) })),
+    [series]
+  );
+  const visibleSeries = useMemo6(
+    () => coloredSeries.filter((s) => !hiddenKeys.has(s.key)),
+    [coloredSeries, hiddenKeys]
+  );
+  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip();
+  function toggleSeries(key) {
+    setHiddenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }
+  return /* @__PURE__ */ jsxs27("div", { className: root5, children: [
+    /* @__PURE__ */ jsx44(ParentSize, { initialSize: { width: 600, height }, style: { height }, children: ({ width }) => {
+      if (width === 0) return null;
+      const { scales } = buildLineChartLayout(data, visibleSeries, width, height, margin, xScale);
+      function handleMouseMove(event) {
+        const bounds = event.currentTarget.getBoundingClientRect();
+        const pixelX = event.clientX - bounds.left;
+        const dataIndex = findNearestDataIndex(data, scales, pixelX);
+        if (dataIndex === null) {
+          hideTooltip();
+          return;
+        }
+        const dataPoint = data[dataIndex];
+        const xPixel = getXPixel(scales, dataPoint.x) ?? pixelX;
+        showTooltip({
+          tooltipData: { dataPoint, visibleSeries },
+          tooltipLeft: scales.margin.left + xPixel,
+          tooltipTop: 0
+        });
+      }
+      return /* @__PURE__ */ jsxs27("div", { style: { position: "relative", width, height }, children: [
+        /* @__PURE__ */ jsx44(
+          LineChart,
+          {
+            data,
+            series: visibleSeries,
+            width,
+            height,
+            margin,
+            xScale
+          }
+        ),
+        /* @__PURE__ */ jsx44(
+          "svg",
+          {
+            width,
+            height,
+            style: { position: "absolute", top: 0, left: 0 },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx44(
+              "rect",
+              {
+                className: overlayRect,
+                "data-testid": "line-chart-overlay",
+                x: scales.margin.left,
+                y: scales.margin.top,
+                width: scales.innerWidth,
+                height: scales.innerHeight,
+                onMouseMove: handleMouseMove,
+                onMouseLeave: () => hideTooltip()
+              }
+            )
+          }
+        ),
+        tooltipOpen && tooltipData ? /* @__PURE__ */ jsxs27(TooltipWithBounds, { left: tooltipLeft, top: tooltipTop, className: tooltip2, children: [
+          /* @__PURE__ */ jsx44("div", { children: String(tooltipData.dataPoint.x) }),
+          tooltipData.visibleSeries.map((s) => /* @__PURE__ */ jsxs27("div", { className: tooltipRow, children: [
+            /* @__PURE__ */ jsx44("span", { className: tooltipSwatch, style: { background: s.color } }),
+            /* @__PURE__ */ jsxs27("span", { children: [
+              s.label,
+              ": ",
+              String(tooltipData.dataPoint[s.key])
+            ] })
+          ] }, s.key))
+        ] }) : null
+      ] });
+    } }),
+    /* @__PURE__ */ jsx44("div", { className: legend, children: coloredSeries.map((s) => {
+      const hidden = hiddenKeys.has(s.key);
+      return /* @__PURE__ */ jsxs27(
+        "button",
+        {
+          type: "button",
+          className: [legendItem, hidden ? legendItemHidden : null].filter(Boolean).join(" "),
+          onClick: () => toggleSeries(s.key),
+          "aria-pressed": !hidden,
+          children: [
+            /* @__PURE__ */ jsx44("span", { className: legendSwatch, style: { background: s.color } }),
+            s.label
+          ]
+        },
+        s.key
+      );
+    }) })
+  ] });
+}
+
+// src/components/charts/BarChart/BarChart.tsx
+import { AxisBottom as AxisBottom2, AxisLeft as AxisLeft2 } from "@visx/axis";
+import { GridRows as GridRows2 } from "@visx/grid";
+import { Group as Group2 } from "@visx/group";
+import { BarGroup, BarStack } from "@visx/shape";
+import { vars as vars6 } from "@vesture/tokens";
+
+// src/components/charts/BarChart/BarChart.render.ts
+import { scaleBand as scaleBand2, scaleLinear as scaleLinear2 } from "@visx/scale";
+import { vars as vars5 } from "@vesture/tokens";
+var DEFAULT_MARGIN2 = { top: 16, right: 16, bottom: 32, left: 48 };
+var SERIES_COLOR_CYCLE2 = [
+  vars5.chart.series1,
+  vars5.chart.series2,
+  vars5.chart.series3,
+  vars5.chart.series4,
+  vars5.chart.series5,
+  vars5.chart.series6,
+  vars5.chart.series7,
+  vars5.chart.series8
+];
+function getSeriesColor2(series, index) {
+  return series.color ?? SERIES_COLOR_CYCLE2[index % SERIES_COLOR_CYCLE2.length];
+}
+function buildSeriesColorMap(series) {
+  const map = {};
+  series.forEach((s, index) => {
+    map[s.key] = getSeriesColor2(s, index);
+  });
+  return map;
+}
+function resolveMargin2(margin) {
+  return { ...DEFAULT_MARGIN2, ...margin };
+}
+function numericValue2(value) {
+  if (value === void 0) return 0;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+function buildScales2(data, series, width, height, margin, layout) {
+  const innerWidth = Math.max(0, width - margin.left - margin.right);
+  const innerHeight = Math.max(0, height - margin.top - margin.bottom);
+  const x0Scale = scaleBand2({
+    domain: data.map((d) => d.category),
+    range: [0, innerWidth],
+    padding: 0.2
+  });
+  const x1Scale = layout === "grouped" ? scaleBand2({
+    domain: series.map((s) => s.key),
+    range: [0, x0Scale.bandwidth()],
+    padding: 0.1
+  }) : void 0;
+  const yMax = layout === "stacked" ? Math.max(0, ...data.map((d) => series.reduce((sum, s) => sum + numericValue2(d[s.key]), 0))) : Math.max(0, ...data.flatMap((d) => series.map((s) => numericValue2(d[s.key]))));
+  const yScale = scaleLinear2({
+    domain: [0, yMax > 0 ? yMax : 1],
+    range: [innerHeight, 0],
+    nice: true
+  });
+  return { x0Scale, x1Scale, xScale: x0Scale, yScale, layout, innerWidth, innerHeight, margin };
+}
+function buildBarChartLayout(data, series, width, height, margin, layout = "grouped") {
+  const resolvedMargin = resolveMargin2(margin);
+  const scales = buildScales2(data, series, width, height, resolvedMargin, layout);
+  const colorMap = buildSeriesColorMap(series);
+  return { scales, colorMap };
+}
+
+// src/components/charts/BarChart/BarChart.css.ts
+var emptyState5 = "chartSurfaces_emptyState__n6njm11";
+var legend2 = "chartSurfaces_legend__n6njm15";
+var legendItem2 = "chartSurfaces_legendItem__n6njm16";
+var legendItemHidden2 = "chartSurfaces_legendItemHidden__n6njm17";
+var legendSwatch2 = "chartSurfaces_legendSwatch__n6njm18";
+var root6 = "chartSurfaces_root__n6njm10";
+var tooltip3 = "chartSurfaces_tooltip__n6njm12";
+var tooltipRow2 = "chartSurfaces_tooltipRow__n6njm13";
+var tooltipSwatch2 = "chartSurfaces_tooltipSwatch__n6njm14";
+
+// src/components/charts/BarChart/BarChart.tsx
+import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+function BarChart({
+  data,
+  series,
+  width,
+  height,
+  margin,
+  layout = "grouped"
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx45("div", { className: root6, style: { width, height }, children: /* @__PURE__ */ jsx45("div", { className: emptyState5, style: { width, height }, children: "No data" }) });
+  }
+  const { scales, colorMap } = buildBarChartLayout(data, series, width, height, margin, layout);
+  const { x0Scale, x1Scale, xScale, yScale, innerWidth, innerHeight, margin: resolvedMargin } = scales;
+  const keys = series.map((s) => s.key);
+  const color = (key, index) => colorMap[key] ?? SERIES_COLOR_CYCLE2[index % 8];
+  return /* @__PURE__ */ jsx45("div", { className: root6, children: /* @__PURE__ */ jsx45("svg", { width, height, role: "img", "aria-label": "Bar chart", children: /* @__PURE__ */ jsxs28(Group2, { left: resolvedMargin.left, top: resolvedMargin.top, children: [
+    /* @__PURE__ */ jsx45(GridRows2, { scale: yScale, width: innerWidth, height: innerHeight, stroke: vars6.chart.grid }),
+    layout === "stacked" ? /* @__PURE__ */ jsx45(BarStack, { data, keys, x: (d) => d.category, xScale, yScale, color }) : /* @__PURE__ */ jsx45(
+      BarGroup,
+      {
+        data,
+        keys,
+        height: innerHeight,
+        x0: (d) => d.category,
+        x0Scale,
+        x1Scale,
+        yScale,
+        color
+      }
+    ),
+    /* @__PURE__ */ jsx45(
+      AxisBottom2,
+      {
+        top: innerHeight,
+        scale: x0Scale,
+        stroke: vars6.chart.axis,
+        tickStroke: vars6.chart.axis,
+        tickLabelProps: () => ({ fill: vars6.chart.axis, fontSize: 11, textAnchor: "middle" })
+      }
+    ),
+    /* @__PURE__ */ jsx45(
+      AxisLeft2,
+      {
+        scale: yScale,
+        stroke: vars6.chart.axis,
+        tickStroke: vars6.chart.axis,
+        tickLabelProps: () => ({ fill: vars6.chart.axis, fontSize: 11, textAnchor: "end", dx: "-0.25em" })
+      }
+    )
+  ] }) }) });
+}
+
+// src/components/charts/BarChart/BarChart.interactive.tsx
+import { useMemo as useMemo7, useState as useState18 } from "react";
+import { AxisBottom as AxisBottom3, AxisLeft as AxisLeft3 } from "@visx/axis";
+import { GridRows as GridRows3 } from "@visx/grid";
+import { Group as Group3 } from "@visx/group";
+import { ParentSize as ParentSize2 } from "@visx/responsive";
+import { Bar, BarGroup as BarGroup2, BarStack as BarStack2 } from "@visx/shape";
+import { TooltipWithBounds as TooltipWithBounds2, useTooltip as useTooltip2 } from "@visx/tooltip";
+import { vars as vars7 } from "@vesture/tokens";
+import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
+function InteractiveBarChart({
+  data,
+  series,
+  margin,
+  layout = "grouped",
+  height = 320
+}) {
+  const [hiddenKeys, setHiddenKeys] = useState18(/* @__PURE__ */ new Set());
+  const coloredSeries = useMemo7(
+    () => series.map((s, index) => ({ ...s, color: s.color ?? getSeriesColor2(s, index) })),
+    [series]
+  );
+  const visibleSeries = useMemo7(
+    () => coloredSeries.filter((s) => !hiddenKeys.has(s.key)),
+    [coloredSeries, hiddenKeys]
+  );
+  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip2();
+  function toggleSeries(key) {
+    setHiddenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx46("div", { className: root6, style: { height }, children: /* @__PURE__ */ jsx46("div", { className: emptyState5, style: { height }, children: "No data" }) });
+  }
+  return /* @__PURE__ */ jsxs29("div", { className: root6, children: [
+    /* @__PURE__ */ jsx46(ParentSize2, { initialSize: { width: 600, height }, style: { height }, children: ({ width }) => {
+      if (width === 0) return null;
+      const { scales, colorMap } = buildBarChartLayout(data, visibleSeries, width, height, margin, layout);
+      const { x0Scale, x1Scale, xScale, yScale, innerWidth, innerHeight, margin: resolvedMargin } = scales;
+      const keys = visibleSeries.map((s) => s.key);
+      const seriesByKey = new Map(visibleSeries.map((s) => [s.key, s]));
+      const color = (key, index) => colorMap[key] ?? SERIES_COLOR_CYCLE2[index % 8];
+      function handleBarHover(categoryValue, seriesKey, value, event) {
+        const s = seriesByKey.get(seriesKey);
+        if (!s) return;
+        const bounds = event.currentTarget;
+        const x2 = Number(bounds.getAttribute("x") ?? 0);
+        const y2 = Number(bounds.getAttribute("y") ?? 0);
+        const barWidth = Number(bounds.getAttribute("width") ?? 0);
+        showTooltip({
+          tooltipData: { category: categoryValue, series: s, value },
+          tooltipLeft: resolvedMargin.left + x2 + barWidth / 2,
+          tooltipTop: resolvedMargin.top + y2
+        });
+      }
+      return /* @__PURE__ */ jsxs29("div", { style: { position: "relative", width, height }, children: [
+        /* @__PURE__ */ jsx46("svg", { width, height, role: "img", "aria-label": "Bar chart", children: /* @__PURE__ */ jsxs29(Group3, { left: resolvedMargin.left, top: resolvedMargin.top, children: [
+          /* @__PURE__ */ jsx46(GridRows3, { scale: yScale, width: innerWidth, height: innerHeight, stroke: vars7.chart.grid }),
+          layout === "stacked" ? /* @__PURE__ */ jsx46(
+            BarStack2,
+            {
+              data,
+              keys,
+              x: (d) => d.category,
+              xScale,
+              yScale,
+              color,
+              children: (barStacks) => barStacks.map(
+                (barStack) => barStack.bars.map((bar) => /* @__PURE__ */ jsx46(
+                  Bar,
+                  {
+                    x: bar.x,
+                    y: bar.y,
+                    width: bar.width,
+                    height: bar.height,
+                    fill: bar.color,
+                    onMouseEnter: (event) => handleBarHover(
+                      bar.bar.data.category,
+                      String(barStack.key),
+                      Number(bar.bar.data[barStack.key]),
+                      event
+                    ),
+                    onMouseLeave: () => hideTooltip()
+                  },
+                  `bar-stack-${barStack.index}-${bar.index}`
+                ))
+              )
+            }
+          ) : /* @__PURE__ */ jsx46(
+            BarGroup2,
+            {
+              data,
+              keys,
+              height: innerHeight,
+              x0: (d) => d.category,
+              x0Scale,
+              x1Scale,
+              yScale,
+              color,
+              children: (barGroups) => barGroups.map((barGroup) => /* @__PURE__ */ jsx46(Group3, { left: barGroup.x0, children: barGroup.bars.map((bar) => /* @__PURE__ */ jsx46(
+                Bar,
+                {
+                  x: bar.x,
+                  y: bar.y,
+                  width: bar.width,
+                  height: bar.height,
+                  fill: bar.color,
+                  onMouseEnter: (event) => handleBarHover(data[barGroup.index].category, String(bar.key), bar.value, event),
+                  onMouseLeave: () => hideTooltip()
+                },
+                `bar-group-bar-${barGroup.index}-${bar.key}`
+              )) }, `bar-group-${barGroup.index}`))
+            }
+          ),
+          /* @__PURE__ */ jsx46(
+            AxisBottom3,
+            {
+              top: innerHeight,
+              scale: x0Scale,
+              stroke: vars7.chart.axis,
+              tickStroke: vars7.chart.axis,
+              tickLabelProps: () => ({ fill: vars7.chart.axis, fontSize: 11, textAnchor: "middle" })
+            }
+          ),
+          /* @__PURE__ */ jsx46(
+            AxisLeft3,
+            {
+              scale: yScale,
+              stroke: vars7.chart.axis,
+              tickStroke: vars7.chart.axis,
+              tickLabelProps: () => ({
+                fill: vars7.chart.axis,
+                fontSize: 11,
+                textAnchor: "end",
+                dx: "-0.25em"
+              })
+            }
+          )
+        ] }) }),
+        tooltipOpen && tooltipData ? /* @__PURE__ */ jsxs29(TooltipWithBounds2, { left: tooltipLeft, top: tooltipTop, className: tooltip3, children: [
+          /* @__PURE__ */ jsx46("div", { children: tooltipData.category }),
+          /* @__PURE__ */ jsxs29("div", { className: tooltipRow2, children: [
+            /* @__PURE__ */ jsx46("span", { className: tooltipSwatch2, style: { background: tooltipData.series.color } }),
+            /* @__PURE__ */ jsxs29("span", { children: [
+              tooltipData.series.label,
+              ": ",
+              tooltipData.value
+            ] })
+          ] })
+        ] }) : null
+      ] });
+    } }),
+    /* @__PURE__ */ jsx46("div", { className: legend2, children: coloredSeries.map((s) => {
+      const hidden = hiddenKeys.has(s.key);
+      return /* @__PURE__ */ jsxs29(
+        "button",
+        {
+          type: "button",
+          className: [legendItem2, hidden ? legendItemHidden2 : null].filter(Boolean).join(" "),
+          onClick: () => toggleSeries(s.key),
+          "aria-pressed": !hidden,
+          children: [
+            /* @__PURE__ */ jsx46("span", { className: legendSwatch2, style: { background: s.color } }),
+            s.label
+          ]
+        },
+        s.key
+      );
+    }) })
+  ] });
+}
+
+// src/components/charts/AreaChart/AreaChart.tsx
+import { AxisBottom as AxisBottom4, AxisLeft as AxisLeft4 } from "@visx/axis";
+import { GridRows as GridRows4 } from "@visx/grid";
+import { Group as Group4 } from "@visx/group";
+import { Area } from "@visx/shape";
+import { vars as vars8 } from "@vesture/tokens";
+
+// src/components/charts/AreaChart/AreaChart.render.ts
+var OVERLAP_FILL_OPACITY = 0.35;
+var areaGenerator = area_default().x((p) => p.x).y0((p) => p.y0).y1((p) => p.y1);
+function buildAreaChartLayout(data, series, width, height, margin, xScaleType, stacked = false) {
+  const resolvedMargin = resolveMargin(margin);
+  const resolvedXScaleType = xScaleType ?? inferXScaleType(data);
+  const scales = buildScales(data, series, width, height, resolvedMargin, resolvedXScaleType, stacked);
+  const cumulative = data.map(() => 0);
+  const seriesLayouts = series.map((s, index) => {
+    const points = [];
+    data.forEach((d, dataIndex) => {
+      const rawValue = numericValue(d[s.key]);
+      if (!stacked && rawValue === void 0) return;
+      const x2 = getXPixel(scales, d.x);
+      if (x2 === void 0) return;
+      const baseline = stacked ? cumulative[dataIndex] : 0;
+      const top = stacked ? baseline + (rawValue ?? 0) : rawValue;
+      if (stacked) cumulative[dataIndex] = top;
+      points.push({ dataIndex, x: x2, y0: scales.yScale(baseline), y1: scales.yScale(top) });
+    });
+    return {
+      key: s.key,
+      label: s.label,
+      color: getSeriesColor(s, index),
+      opacity: stacked ? 1 : OVERLAP_FILL_OPACITY,
+      points,
+      path: points.length >= 2 ? areaGenerator(points) ?? "" : ""
+    };
+  });
+  return { scales, seriesLayouts };
+}
+
+// src/components/charts/AreaChart/AreaChart.css.ts
+var emptyState6 = "chartSurfaces_emptyState__n6njm11";
+var legend3 = "chartSurfaces_legend__n6njm15";
+var legendItem3 = "chartSurfaces_legendItem__n6njm16";
+var legendItemHidden3 = "chartSurfaces_legendItemHidden__n6njm17";
+var legendSwatch3 = "chartSurfaces_legendSwatch__n6njm18";
+var overlayRect2 = "AreaChart_overlayRect__1cqtbh30";
+var root7 = "chartSurfaces_root__n6njm10";
+var tooltip4 = "chartSurfaces_tooltip__n6njm12";
+var tooltipRow3 = "chartSurfaces_tooltipRow__n6njm13";
+var tooltipSwatch3 = "chartSurfaces_tooltipSwatch__n6njm14";
+
+// src/components/charts/AreaChart/AreaChart.tsx
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
+function AreaChart({
+  data,
+  series,
+  width,
+  height,
+  margin,
+  xScale,
+  stacked = false
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx47("div", { className: root7, style: { width, height }, children: /* @__PURE__ */ jsx47("div", { className: emptyState6, style: { width, height }, children: "No data" }) });
+  }
+  const { scales, seriesLayouts } = buildAreaChartLayout(data, series, width, height, margin, xScale, stacked);
+  const { xScale: scaleX, yScale, innerWidth, innerHeight, margin: resolvedMargin } = scales;
+  return /* @__PURE__ */ jsx47("div", { className: root7, children: /* @__PURE__ */ jsx47("svg", { width, height, role: "img", "aria-label": "Area chart", children: /* @__PURE__ */ jsxs30(Group4, { left: resolvedMargin.left, top: resolvedMargin.top, children: [
+    /* @__PURE__ */ jsx47(GridRows4, { scale: yScale, width: innerWidth, height: innerHeight, stroke: vars8.chart.grid }),
+    seriesLayouts.map((s) => /* @__PURE__ */ jsx47(
+      Area,
+      {
+        data: s.points,
+        x: (p) => p.x,
+        y0: (p) => p.y0,
+        y1: (p) => p.y1,
+        fill: s.color,
+        fillOpacity: s.opacity,
+        stroke: s.color,
+        strokeWidth: 1.5
+      },
+      s.key
+    )),
+    /* @__PURE__ */ jsx47(
+      AxisBottom4,
+      {
+        top: innerHeight,
+        scale: scaleX,
+        stroke: vars8.chart.axis,
+        tickStroke: vars8.chart.axis,
+        tickLabelProps: () => ({ fill: vars8.chart.axis, fontSize: 11, textAnchor: "middle" })
+      }
+    ),
+    /* @__PURE__ */ jsx47(
+      AxisLeft4,
+      {
+        scale: yScale,
+        stroke: vars8.chart.axis,
+        tickStroke: vars8.chart.axis,
+        tickLabelProps: () => ({ fill: vars8.chart.axis, fontSize: 11, textAnchor: "end", dx: "-0.25em" })
+      }
+    )
+  ] }) }) });
+}
+
+// src/components/charts/AreaChart/AreaChart.interactive.tsx
+import { useMemo as useMemo8, useState as useState19 } from "react";
+import { ParentSize as ParentSize3 } from "@visx/responsive";
+import { TooltipWithBounds as TooltipWithBounds3, useTooltip as useTooltip3 } from "@visx/tooltip";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
+function InteractiveAreaChart({
+  data,
+  series,
+  margin,
+  xScale,
+  stacked = false,
+  height = 320
+}) {
+  const [hiddenKeys, setHiddenKeys] = useState19(/* @__PURE__ */ new Set());
+  const coloredSeries = useMemo8(
+    () => series.map((s, index) => ({ ...s, color: s.color ?? getSeriesColor(s, index) })),
+    [series]
+  );
+  const visibleSeries = useMemo8(
+    () => coloredSeries.filter((s) => !hiddenKeys.has(s.key)),
+    [coloredSeries, hiddenKeys]
+  );
+  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip3();
+  function toggleSeries(key) {
+    setHiddenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }
+  return /* @__PURE__ */ jsxs31("div", { className: root7, children: [
+    /* @__PURE__ */ jsx48(ParentSize3, { initialSize: { width: 600, height }, style: { height }, children: ({ width }) => {
+      if (width === 0) return null;
+      const { scales } = buildAreaChartLayout(data, visibleSeries, width, height, margin, xScale, stacked);
+      function handleMouseMove(event) {
+        const bounds = event.currentTarget.getBoundingClientRect();
+        const pixelX = event.clientX - bounds.left;
+        const dataIndex = findNearestDataIndex(data, scales, pixelX);
+        if (dataIndex === null) {
+          hideTooltip();
+          return;
+        }
+        const dataPoint = data[dataIndex];
+        const xPixel = getXPixel(scales, dataPoint.x) ?? pixelX;
+        showTooltip({
+          tooltipData: { dataPoint, visibleSeries },
+          tooltipLeft: scales.margin.left + xPixel,
+          tooltipTop: 0
+        });
+      }
+      return /* @__PURE__ */ jsxs31("div", { style: { position: "relative", width, height }, children: [
+        /* @__PURE__ */ jsx48(
+          AreaChart,
+          {
+            data,
+            series: visibleSeries,
+            width,
+            height,
+            margin,
+            xScale,
+            stacked
+          }
+        ),
+        /* @__PURE__ */ jsx48(
+          "svg",
+          {
+            width,
+            height,
+            style: { position: "absolute", top: 0, left: 0 },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx48(
+              "rect",
+              {
+                className: overlayRect2,
+                "data-testid": "area-chart-overlay",
+                x: scales.margin.left,
+                y: scales.margin.top,
+                width: scales.innerWidth,
+                height: scales.innerHeight,
+                onMouseMove: handleMouseMove,
+                onMouseLeave: () => hideTooltip()
+              }
+            )
+          }
+        ),
+        tooltipOpen && tooltipData ? /* @__PURE__ */ jsxs31(TooltipWithBounds3, { left: tooltipLeft, top: tooltipTop, className: tooltip4, children: [
+          /* @__PURE__ */ jsx48("div", { children: String(tooltipData.dataPoint.x) }),
+          tooltipData.visibleSeries.map((s) => /* @__PURE__ */ jsxs31("div", { className: tooltipRow3, children: [
+            /* @__PURE__ */ jsx48("span", { className: tooltipSwatch3, style: { background: s.color } }),
+            /* @__PURE__ */ jsxs31("span", { children: [
+              s.label,
+              ": ",
+              String(tooltipData.dataPoint[s.key])
+            ] })
+          ] }, s.key))
+        ] }) : null
+      ] });
+    } }),
+    /* @__PURE__ */ jsx48("div", { className: legend3, children: coloredSeries.map((s) => {
+      const hidden = hiddenKeys.has(s.key);
+      return /* @__PURE__ */ jsxs31(
+        "button",
+        {
+          type: "button",
+          className: [legendItem3, hidden ? legendItemHidden3 : null].filter(Boolean).join(" "),
+          onClick: () => toggleSeries(s.key),
+          "aria-pressed": !hidden,
+          children: [
+            /* @__PURE__ */ jsx48("span", { className: legendSwatch3, style: { background: s.color } }),
+            s.label
+          ]
+        },
+        s.key
+      );
+    }) })
+  ] });
+}
+
+// src/components/charts/PieChart/PieChart.tsx
+import { Group as Group5 } from "@visx/group";
+import { Pie } from "@visx/shape";
+import { vars as vars10 } from "@vesture/tokens";
+
+// src/components/charts/PieChart/PieChart.render.ts
+import { vars as vars9 } from "@vesture/tokens";
+var SERIES_COLOR_CYCLE3 = [
+  vars9.chart.series1,
+  vars9.chart.series2,
+  vars9.chart.series3,
+  vars9.chart.series4,
+  vars9.chart.series5,
+  vars9.chart.series6,
+  vars9.chart.series7,
+  vars9.chart.series8
+];
+function getSeriesColor3(slice2, index) {
+  return slice2.color ?? SERIES_COLOR_CYCLE3[index % SERIES_COLOR_CYCLE3.length];
+}
+function computePercentages(slices) {
+  const total = slices.reduce((sum, s) => sum + s.value, 0);
+  return slices.map((s) => ({ ...s, percentage: total > 0 ? s.value / total * 100 : 0 }));
+}
+function colorSlices(data) {
+  return data.map((d, index) => ({ key: d.key, label: d.label, value: d.value, color: getSeriesColor3(d, index) }));
+}
+function preparePieSlices(data) {
+  const positive = colorSlices(data).filter((s) => s.value > 0);
+  return computePercentages(positive);
+}
+var MIN_LABEL_ARC_LENGTH_PX = 28;
+function isLabelFittable(startAngle, endAngle, outerRadius) {
+  return (endAngle - startAngle) * outerRadius >= MIN_LABEL_ARC_LENGTH_PX;
+}
+function arcBisectorDirection(startAngle, endAngle) {
+  const bisector = (startAngle + endAngle) / 2;
+  return [Math.sin(bisector), -Math.cos(bisector)];
+}
+
+// src/components/charts/PieChart/PieChart.css.ts
+var emptyState7 = "chartSurfaces_emptyState__n6njm11";
+var legend4 = "chartSurfaces_legend__n6njm15";
+var legendItem4 = "chartSurfaces_legendItem__n6njm16";
+var legendItemHidden4 = "chartSurfaces_legendItemHidden__n6njm17";
+var legendPercentage = "PieChart_legendPercentage__19xd4rn0";
+var legendSwatch4 = "chartSurfaces_legendSwatch__n6njm18";
+var root8 = "chartSurfaces_root__n6njm10";
+var sliceGroup = "PieChart_sliceGroup__19xd4rn1";
+var tooltip5 = "chartSurfaces_tooltip__n6njm12";
+var tooltipRow4 = "chartSurfaces_tooltipRow__n6njm13";
+var tooltipSwatch4 = "chartSurfaces_tooltipSwatch__n6njm14";
+
+// src/components/charts/PieChart/PieChart.tsx
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+var OUTER_PADDING = 8;
+function PieChart({
+  data,
+  width,
+  height,
+  innerRadius = 0,
+  showLabels = true
+}) {
+  const slices = preparePieSlices(data);
+  if (slices.length === 0) {
+    return /* @__PURE__ */ jsx49("div", { className: root8, style: { width, height }, children: /* @__PURE__ */ jsx49("div", { className: emptyState7, style: { width, height }, children: "No data" }) });
+  }
+  const outerRadius = Math.max(0, Math.min(width, height) / 2 - OUTER_PADDING);
+  const pieInnerRadius = outerRadius * innerRadius;
+  return /* @__PURE__ */ jsx49("div", { className: root8, children: /* @__PURE__ */ jsx49("svg", { width, height, role: "img", "aria-label": "Pie chart", children: /* @__PURE__ */ jsx49(Group5, { top: height / 2, left: width / 2, children: /* @__PURE__ */ jsx49(
+    Pie,
+    {
+      data: slices,
+      pieValue: (s) => s.value,
+      pieSort: null,
+      outerRadius,
+      innerRadius: pieInnerRadius,
+      children: (pie) => pie.arcs.map((arc) => {
+        const [labelX, labelY] = pie.path.centroid(arc);
+        const showLabel = showLabels && isLabelFittable(arc.startAngle, arc.endAngle, outerRadius);
+        return /* @__PURE__ */ jsxs32("g", { children: [
+          /* @__PURE__ */ jsx49("path", { d: pie.path(arc) ?? "", fill: arc.data.color }),
+          showLabel ? /* @__PURE__ */ jsx49(
+            "text",
+            {
+              x: labelX,
+              y: labelY,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              fill: vars10.color.textInverse,
+              fontSize: vars10.font.sizeXs,
+              fontFamily: vars10.font.body,
+              children: `${Math.round(arc.data.percentage)}%`
+            }
+          ) : null
+        ] }, arc.data.key);
+      })
+    }
+  ) }) }) });
+}
+
+// src/components/charts/PieChart/PieChart.interactive.tsx
+import { useMemo as useMemo9, useState as useState20 } from "react";
+import { Group as Group6 } from "@visx/group";
+import { ParentSize as ParentSize4 } from "@visx/responsive";
+import { Pie as Pie2 } from "@visx/shape";
+import { TooltipWithBounds as TooltipWithBounds4, useTooltip as useTooltip4 } from "@visx/tooltip";
+import { vars as vars11 } from "@vesture/tokens";
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+var OUTER_PADDING2 = 8;
+var HOVER_OFFSET_PX = 8;
+function InteractivePieChart({
+  data,
+  innerRadius = 0,
+  showLabels = true,
+  height = 320
+}) {
+  const [hiddenKeys, setHiddenKeys] = useState20(/* @__PURE__ */ new Set());
+  const [hoveredKey, setHoveredKey] = useState20(null);
+  const coloredSlices = useMemo9(() => colorSlices(data), [data]);
+  const visibleSlices = useMemo9(
+    () => coloredSlices.filter((s) => s.value > 0 && !hiddenKeys.has(s.key)),
+    [coloredSlices, hiddenKeys]
+  );
+  const slices = useMemo9(() => computePercentages(visibleSlices), [visibleSlices]);
+  const percentageByKey = useMemo9(() => new Map(slices.map((s) => [s.key, s.percentage])), [slices]);
+  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip4();
+  function toggleSlice(key) {
+    setHiddenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }
+  if (slices.length === 0) {
+    return /* @__PURE__ */ jsx50("div", { className: root8, style: { height }, children: /* @__PURE__ */ jsx50("div", { className: emptyState7, style: { height }, children: "No data" }) });
+  }
+  return /* @__PURE__ */ jsxs33("div", { className: root8, children: [
+    /* @__PURE__ */ jsx50(ParentSize4, { initialSize: { width: 600, height }, style: { height }, children: ({ width }) => {
+      if (width === 0) return null;
+      const outerRadius = Math.max(0, Math.min(width, height) / 2 - OUTER_PADDING2);
+      const pieInnerRadius = outerRadius * innerRadius;
+      function handleSliceHover(datum, centroidX, centroidY) {
+        showTooltip({
+          tooltipData: datum,
+          tooltipLeft: width / 2 + centroidX,
+          tooltipTop: height / 2 + centroidY
+        });
+        setHoveredKey(datum.key);
+      }
+      function handleSliceLeave() {
+        hideTooltip();
+        setHoveredKey(null);
+      }
+      return /* @__PURE__ */ jsxs33("div", { style: { position: "relative", width, height }, children: [
+        /* @__PURE__ */ jsx50("svg", { width, height, role: "img", "aria-label": "Pie chart", children: /* @__PURE__ */ jsx50(Group6, { top: height / 2, left: width / 2, children: /* @__PURE__ */ jsx50(
+          Pie2,
+          {
+            data: slices,
+            pieValue: (s) => s.value,
+            pieSort: null,
+            outerRadius,
+            innerRadius: pieInnerRadius,
+            children: (pie) => pie.arcs.map((arc) => {
+              const [centroidX, centroidY] = pie.path.centroid(arc);
+              const showLabel = showLabels && isLabelFittable(arc.startAngle, arc.endAngle, outerRadius);
+              const isHovered = hoveredKey === arc.data.key;
+              const [dx, dy] = arcBisectorDirection(arc.startAngle, arc.endAngle);
+              const transform = isHovered ? `translate(${dx * HOVER_OFFSET_PX}px, ${dy * HOVER_OFFSET_PX}px)` : void 0;
+              return /* @__PURE__ */ jsxs33("g", { className: sliceGroup, style: { transform }, children: [
+                /* @__PURE__ */ jsx50(
+                  "path",
+                  {
+                    d: pie.path(arc) ?? "",
+                    fill: arc.data.color,
+                    "data-testid": `pie-slice-${arc.data.key}`,
+                    onMouseEnter: () => handleSliceHover(arc.data, centroidX, centroidY),
+                    onMouseLeave: handleSliceLeave
+                  }
+                ),
+                showLabel ? /* @__PURE__ */ jsx50(
+                  "text",
+                  {
+                    x: centroidX,
+                    y: centroidY,
+                    textAnchor: "middle",
+                    dominantBaseline: "middle",
+                    fill: vars11.color.textInverse,
+                    fontSize: vars11.font.sizeXs,
+                    fontFamily: vars11.font.body,
+                    style: { pointerEvents: "none" },
+                    children: `${Math.round(arc.data.percentage)}%`
+                  }
+                ) : null
+              ] }, arc.data.key);
+            })
+          }
+        ) }) }),
+        tooltipOpen && tooltipData ? /* @__PURE__ */ jsx50(TooltipWithBounds4, { left: tooltipLeft, top: tooltipTop, className: tooltip5, children: /* @__PURE__ */ jsxs33("div", { className: tooltipRow4, children: [
+          /* @__PURE__ */ jsx50("span", { className: tooltipSwatch4, style: { background: tooltipData.color } }),
+          /* @__PURE__ */ jsxs33("span", { children: [
+            tooltipData.label,
+            ": ",
+            tooltipData.value,
+            " (",
+            Math.round(tooltipData.percentage),
+            "%)"
+          ] })
+        ] }) }) : null
+      ] });
+    } }),
+    /* @__PURE__ */ jsx50("div", { className: legend4, children: coloredSlices.filter((s) => s.value > 0).map((s) => {
+      const hidden = hiddenKeys.has(s.key);
+      const percentage = percentageByKey.get(s.key);
+      return /* @__PURE__ */ jsxs33(
+        "button",
+        {
+          type: "button",
+          className: [legendItem4, hidden ? legendItemHidden4 : null].filter(Boolean).join(" "),
+          onClick: () => toggleSlice(s.key),
+          "aria-pressed": !hidden,
+          children: [
+            /* @__PURE__ */ jsx50("span", { className: legendSwatch4, style: { background: s.color } }),
+            s.label,
+            !hidden && percentage !== void 0 ? /* @__PURE__ */ jsxs33("span", { className: legendPercentage, children: [
+              Math.round(percentage),
+              "%"
+            ] }) : null
+          ]
+        },
+        s.key
+      );
+    }) })
+  ] });
+}
+
 // src/index.ts
-import { vars as vars3, defaultThemeClass, defaultThemeVars } from "@vesture/tokens";
+import { vars as vars12, defaultThemeClass, defaultThemeVars } from "@vesture/tokens";
 export {
   Accordion2 as Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
   Alert,
+  AreaChart,
   Avatar,
   Badge,
+  BarChart,
   Breadcrumbs2 as Breadcrumbs,
   BreadcrumbsItem,
   Button,
@@ -4238,10 +5612,16 @@ export {
   DropdownMenu2 as DropdownMenu,
   DropdownMenuItem,
   Input,
+  InteractiveAreaChart,
+  InteractiveBarChart,
+  InteractiveLineChart,
+  InteractivePieChart,
   Label,
+  LineChart,
   Modal,
   NumberInput,
   Pagination,
+  PieChart,
   Popover,
   Progress,
   Radio,
@@ -4262,6 +5642,6 @@ export {
   defaultThemeVars,
   useCommandPaletteShortcut,
   useToast,
-  vars3 as vars
+  vars12 as vars
 };
 //# sourceMappingURL=index.js.map