@voila.dev/chart 4.0.0

package/dist/hierarchy/index.js

@@ -0,0 +1,11 @@
+import {
+  sunburstMark,
+  treeMark,
+  treemapMark
+} from "./hierarchy.js";
+export {
+  sunburstMark as sunburst,
+  treeMark as tree,
+  treemapMark as treemap
+};
+//# sourceMappingURL=index.js.map

package/dist/hierarchy/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hierarchy/index.ts"],
+  "sourcesContent": ["export {\n\ttype HierarchyOptions,\n\tsunburstMark as sunburst,\n\ttreeMark as tree,\n\ttreemapMark as treemap,\n} from \"#/hierarchy/hierarchy.ts\";\n"],
+  "mappings": "AAAA;AAAA,EAEiB;AAAA,EACJ;AAAA,EACG;AAAA,OACT;",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+export { type CompileOptions, compileChart } from "./core/compile.js";
+export { type ChartAxisOptions, type ChartBuildContext, type ChartColorOptions, type ChartDefinition, type ChartFacet, type ChartFacetOptions, type ChartPositionScaleOptions, type ChartSpec, defineChart, } from "./core/define-chart.js";
+export { facet } from "./core/facet.js";
+export { formatDate, formatNumber, formatValue } from "./core/format.js";
+export { type AreaOptions, areaX, areaY } from "./core/marks/area.js";
+export { type BarOptions, barX, barY } from "./core/marks/bar.js";
+export { type CellOptions, cell } from "./core/marks/cell.js";
+export { type DotOptions, dot } from "./core/marks/dot.js";
+export { type FunnelOptions, funnel } from "./core/marks/funnel.js";
+export { type LineOptions, lineX, lineY } from "./core/marks/line.js";
+export { type ArcOptions, arc, donut, type RadarOptions, type RadialBarOptions, radar, radialBar, } from "./core/marks/polar.js";
+export { type RectOptions, rectY } from "./core/marks/rect.js";
+export { type RuleOptions, ruleX, ruleY } from "./core/marks/rule.js";
+export type { ChartMarkOptions } from "./core/marks/shared.js";
+export { type DifferenceOptions, differenceY, } from "./core/marks/stats/difference.js";
+export { type BoxOptions, boxY, type RidgelineOptions, ridgeline, violinY, } from "./core/marks/stats/distribution.js";
+export { type DodgeOptions, dodgeY } from "./core/marks/stats/dodge.js";
+export { type HexbinOptions, hexbin } from "./core/marks/stats/hexbin.js";
+export { type HistogramOptions, histogram, } from "./core/marks/stats/histogram.js";
+export { type RegressionOptions, regressionY, } from "./core/marks/stats/regression.js";
+export { boxSummary, kernelDensity, linearFit, quantile, } from "./core/marks/stats/statistics.js";
+export { type WaffleOptions, waffleY } from "./core/marks/stats/waffle.js";
+export { type TextOptions, text } from "./core/marks/text.js";
+export { easeOutCubic, tweenScene } from "./core/motion/tween.js";
+export { type ChartFocusStop, findNearest, focusStops, } from "./core/nearest.js";
+export { estimateTextWidth } from "./core/text.js";
+export { DEFAULT_THEME } from "./core/theme.js";
+export type * from "./core/types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EACN,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC9B,KAAK,SAAS,EACd,WAAW,GACX,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,KAAK,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,KAAK,WAAW,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,KAAK,UAAU,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EACN,KAAK,UAAU,EACf,GAAG,EACH,KAAK,EACL,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,EACL,SAAS,GACT,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtE,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EACN,KAAK,iBAAiB,EACtB,WAAW,GACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACN,KAAK,UAAU,EACf,IAAI,EACJ,KAAK,gBAAgB,EACrB,SAAS,EACT,OAAO,GACP,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EACN,KAAK,gBAAgB,EACrB,SAAS,GACT,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACN,KAAK,iBAAiB,EACtB,WAAW,GACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACN,UAAU,EACV,aAAa,EACb,SAAS,EACT,QAAQ,GACR,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,KAAK,aAAa,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,KAAK,WAAW,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EACN,KAAK,cAAc,EACnB,WAAW,EACX,UAAU,GACV,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,mBAAmB,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,96 @@
+import { compileChart } from "./core/compile.js";
+import {
+  defineChart
+} from "./core/define-chart.js";
+import { facet } from "./core/facet.js";
+import { formatDate, formatNumber, formatValue } from "./core/format.js";
+import { areaX, areaY } from "./core/marks/area.js";
+import { barX, barY } from "./core/marks/bar.js";
+import { cell } from "./core/marks/cell.js";
+import { dot } from "./core/marks/dot.js";
+import { funnel } from "./core/marks/funnel.js";
+import { lineX, lineY } from "./core/marks/line.js";
+import {
+  arc,
+  donut,
+  radar,
+  radialBar
+} from "./core/marks/polar.js";
+import { rectY } from "./core/marks/rect.js";
+import { ruleX, ruleY } from "./core/marks/rule.js";
+import {
+  differenceY
+} from "./core/marks/stats/difference.js";
+import {
+  boxY,
+  ridgeline,
+  violinY
+} from "./core/marks/stats/distribution.js";
+import { dodgeY } from "./core/marks/stats/dodge.js";
+import { hexbin } from "./core/marks/stats/hexbin.js";
+import {
+  histogram
+} from "./core/marks/stats/histogram.js";
+import {
+  regressionY
+} from "./core/marks/stats/regression.js";
+import {
+  boxSummary,
+  kernelDensity,
+  linearFit,
+  quantile
+} from "./core/marks/stats/statistics.js";
+import { waffleY } from "./core/marks/stats/waffle.js";
+import { text } from "./core/marks/text.js";
+import { easeOutCubic, tweenScene } from "./core/motion/tween.js";
+import {
+  findNearest,
+  focusStops
+} from "./core/nearest.js";
+import { estimateTextWidth } from "./core/text.js";
+import { DEFAULT_THEME } from "./core/theme.js";
+export {
+  DEFAULT_THEME,
+  arc,
+  areaX,
+  areaY,
+  barX,
+  barY,
+  boxSummary,
+  boxY,
+  cell,
+  compileChart,
+  defineChart,
+  differenceY,
+  dodgeY,
+  donut,
+  dot,
+  easeOutCubic,
+  estimateTextWidth,
+  facet,
+  findNearest,
+  focusStops,
+  formatDate,
+  formatNumber,
+  formatValue,
+  funnel,
+  hexbin,
+  histogram,
+  kernelDensity,
+  lineX,
+  lineY,
+  linearFit,
+  quantile,
+  radar,
+  radialBar,
+  rectY,
+  regressionY,
+  ridgeline,
+  ruleX,
+  ruleY,
+  text,
+  tweenScene,
+  violinY,
+  waffleY
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export { type CompileOptions, compileChart } from \"#/core/compile.ts\";\nexport {\n\ttype ChartAxisOptions,\n\ttype ChartBuildContext,\n\ttype ChartColorOptions,\n\ttype ChartDefinition,\n\ttype ChartFacet,\n\ttype ChartFacetOptions,\n\ttype ChartPositionScaleOptions,\n\ttype ChartSpec,\n\tdefineChart,\n} from \"#/core/define-chart.ts\";\nexport { facet } from \"#/core/facet.ts\";\nexport { formatDate, formatNumber, formatValue } from \"#/core/format.ts\";\nexport { type AreaOptions, areaX, areaY } from \"#/core/marks/area.ts\";\nexport { type BarOptions, barX, barY } from \"#/core/marks/bar.ts\";\nexport { type CellOptions, cell } from \"#/core/marks/cell.ts\";\nexport { type DotOptions, dot } from \"#/core/marks/dot.ts\";\nexport { type FunnelOptions, funnel } from \"#/core/marks/funnel.ts\";\nexport { type LineOptions, lineX, lineY } from \"#/core/marks/line.ts\";\nexport {\n\ttype ArcOptions,\n\tarc,\n\tdonut,\n\ttype RadarOptions,\n\ttype RadialBarOptions,\n\tradar,\n\tradialBar,\n} from \"#/core/marks/polar.ts\";\nexport { type RectOptions, rectY } from \"#/core/marks/rect.ts\";\nexport { type RuleOptions, ruleX, ruleY } from \"#/core/marks/rule.ts\";\nexport type { ChartMarkOptions } from \"#/core/marks/shared.ts\";\nexport {\n\ttype DifferenceOptions,\n\tdifferenceY,\n} from \"#/core/marks/stats/difference.ts\";\nexport {\n\ttype BoxOptions,\n\tboxY,\n\ttype RidgelineOptions,\n\tridgeline,\n\tviolinY,\n} from \"#/core/marks/stats/distribution.ts\";\nexport { type DodgeOptions, dodgeY } from \"#/core/marks/stats/dodge.ts\";\nexport { type HexbinOptions, hexbin } from \"#/core/marks/stats/hexbin.ts\";\nexport {\n\ttype HistogramOptions,\n\thistogram,\n} from \"#/core/marks/stats/histogram.ts\";\nexport {\n\ttype RegressionOptions,\n\tregressionY,\n} from \"#/core/marks/stats/regression.ts\";\nexport {\n\tboxSummary,\n\tkernelDensity,\n\tlinearFit,\n\tquantile,\n} from \"#/core/marks/stats/statistics.ts\";\nexport { type WaffleOptions, waffleY } from \"#/core/marks/stats/waffle.ts\";\nexport { type TextOptions, text } from \"#/core/marks/text.ts\";\nexport { easeOutCubic, tweenScene } from \"#/core/motion/tween.ts\";\nexport {\n\ttype ChartFocusStop,\n\tfindNearest,\n\tfocusStops,\n} from \"#/core/nearest.ts\";\nexport { estimateTextWidth } from \"#/core/text.ts\";\nexport { DEFAULT_THEME } from \"#/core/theme.ts\";\nexport type * from \"#/core/types.ts\";\n"],
+  "mappings": "AAAA,SAA8B,oBAAoB;AAClD;AAAA,EASC;AAAA,OACM;AACP,SAAS,aAAa;AACtB,SAAS,YAAY,cAAc,mBAAmB;AACtD,SAA2B,OAAO,aAAa;AAC/C,SAA0B,MAAM,YAAY;AAC5C,SAA2B,YAAY;AACvC,SAA0B,WAAW;AACrC,SAA6B,cAAc;AAC3C,SAA2B,OAAO,aAAa;AAC/C;AAAA,EAEC;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OACM;AACP,SAA2B,aAAa;AACxC,SAA2B,OAAO,aAAa;AAE/C;AAAA,EAEC;AAAA,OACM;AACP;AAAA,EAEC;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AACP,SAA4B,cAAc;AAC1C,SAA6B,cAAc;AAC3C;AAAA,EAEC;AAAA,OACM;AACP;AAAA,EAEC;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAA6B,eAAe;AAC5C,SAA2B,YAAY;AACvC,SAAS,cAAc,kBAAkB;AACzC;AAAA,EAEC;AAAA,EACA;AAAA,OACM;AACP,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;",
+  "names": []
+}

package/dist/react/brush-contract.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+import type { ChartPositionScale, ChartRect, ChartValue } from "../core/types.js";
+import type { ChartMessages } from "./messages.js";
+export type ChartBrushRange = readonly [ChartValue, ChartValue];
+export interface ChartBrushLayerProps {
+    readonly scale: ChartPositionScale;
+    readonly plot: ChartRect;
+    readonly range: ChartBrushRange | null;
+    readonly messages: ChartMessages;
+    readonly onChange: (range: ChartBrushRange | null) => void;
+}
+/**
+ * What `brushX(…)` from `@voila.dev/chart/brush` returns. The chart only
+ * knows this shape, so the brush's selection layer and sliders ship only
+ * with the charts that use them.
+ */
+export interface ChartBrush {
+    readonly onBrush: (range: ChartBrushRange | null) => void;
+    readonly Layer: React.ComponentType<ChartBrushLayerProps>;
+}
+/** The two ends in the scale's own order. */
+export declare function ordered(scale: ChartPositionScale, [a, b]: ChartBrushRange): ChartBrushRange;
+//# sourceMappingURL=brush-contract.d.ts.map

package/dist/react/brush-contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brush-contract.d.ts","sourceRoot":"","sources":["../../src/react/brush-contract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EACX,kBAAkB,EAClB,SAAS,EACT,UAAU,EACV,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACpC,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IACnC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D;AAED;;;;GAIG;AACH,MAAM,WAAW,UAAU;IAC1B,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;CAC1D;AAED,6CAA6C;AAC7C,wBAAgB,OAAO,CACtB,KAAK,EAAE,kBAAkB,EACzB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,eAAe,GACrB,eAAe,CAEjB"}

package/dist/react/brush-contract.js

@@ -0,0 +1,7 @@
+function ordered(scale, [a, b]) {
+  return scale.map(a) <= scale.map(b) ? [a, b] : [b, a];
+}
+export {
+  ordered
+};
+//# sourceMappingURL=brush-contract.js.map

package/dist/react/brush-contract.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/brush-contract.ts"],
+  "sourcesContent": ["import type * as React from \"react\";\nimport type {\n\tChartPositionScale,\n\tChartRect,\n\tChartValue,\n} from \"#/core/types.ts\";\nimport type { ChartMessages } from \"#/react/messages.ts\";\n\nexport type ChartBrushRange = readonly [ChartValue, ChartValue];\n\nexport interface ChartBrushLayerProps {\n\treadonly scale: ChartPositionScale;\n\treadonly plot: ChartRect;\n\treadonly range: ChartBrushRange | null;\n\treadonly messages: ChartMessages;\n\treadonly onChange: (range: ChartBrushRange | null) => void;\n}\n\n/**\n * What `brushX(\u2026)` from `@voila.dev/chart/brush` returns. The chart only\n * knows this shape, so the brush's selection layer and sliders ship only\n * with the charts that use them.\n */\nexport interface ChartBrush {\n\treadonly onBrush: (range: ChartBrushRange | null) => void;\n\treadonly Layer: React.ComponentType<ChartBrushLayerProps>;\n}\n\n/** The two ends in the scale's own order. */\nexport function ordered(\n\tscale: ChartPositionScale,\n\t[a, b]: ChartBrushRange,\n): ChartBrushRange {\n\treturn scale.map(a) <= scale.map(b) ? [a, b] : [b, a];\n}\n"],
+  "mappings": "AA6BO,SAAS,QACf,OACA,CAAC,GAAG,CAAC,GACa;AAClB,SAAO,MAAM,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AACrD;",
+  "names": []
+}

package/dist/react/chart-data-table.d.ts

@@ -0,0 +1,18 @@
+import type { ChartFocusStop } from "../core/nearest.js";
+import type { ChartScene } from "../core/types.js";
+/**
+ * The chart's content as a table, for anyone who cannot read the picture: a
+ * screen reader gets the actual numbers, not a one-line summary of them. One
+ * row per focus stop, one column per series, the same values the tooltip
+ * shows.
+ *
+ * The hiding goes on a wrapper: a table box ignores `width: 1px` and lays out
+ * at its content width, which widened the page on a phone.
+ */
+export declare function ChartDataTable({ scene, stops, caption, seriesHeading, }: {
+    scene: ChartScene;
+    stops: ReadonlyArray<ChartFocusStop>;
+    caption: string;
+    seriesHeading: string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=chart-data-table.d.ts.map

package/dist/react/chart-data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-data-table.d.ts","sourceRoot":"","sources":["../../src/react/chart-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,OAAO,EACP,aAAa,GACb,EAAE;IACF,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;CACtB,sCA0EA"}

package/dist/react/chart-data-table.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SR_ONLY } from "./sr-only.js";
+function ChartDataTable({
+  scene,
+  stops,
+  caption,
+  seriesHeading
+}) {
+  if (stops.length === 0) {
+    return null;
+  }
+  const series = /* @__PURE__ */ new Map();
+  for (const point of scene.points) {
+    const key = point.series ?? point.markId;
+    if (!series.has(key)) {
+      series.set(key, point.seriesLabel ?? scene.yLabel);
+    }
+  }
+  if (scene.focusOrder === "point") {
+    const named = scene.points.some(
+      (point) => point.seriesLabel !== void 0 && point.seriesLabel !== point.title
+    );
+    return /* @__PURE__ */ jsx("div", { style: SR_ONLY, children: /* @__PURE__ */ jsxs("table", { "data-slot": "chart-data-table", children: [
+      /* @__PURE__ */ jsx("caption", { children: caption }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", children: scene.xLabel }),
+        named ? /* @__PURE__ */ jsx("th", { scope: "col", children: seriesHeading }) : null,
+        /* @__PURE__ */ jsx("th", { scope: "col", children: scene.yLabel })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: scene.points.map((point) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", children: point.title }),
+        named ? /* @__PURE__ */ jsx("td", { children: point.seriesLabel }) : null,
+        /* @__PURE__ */ jsx("td", { children: point.value })
+      ] }, point.key)) })
+    ] }) });
+  }
+  const columns = [...series.entries()];
+  return /* @__PURE__ */ jsx("div", { style: SR_ONLY, children: /* @__PURE__ */ jsxs("table", { "data-slot": "chart-data-table", children: [
+    /* @__PURE__ */ jsx("caption", { children: caption }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", children: scene.xLabel }),
+      columns.map(([key, label]) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, key))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: stops.map((stop) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "row", children: stop.points[0].title }),
+      columns.map(([key]) => /* @__PURE__ */ jsx("td", { children: stop.points.find(
+        (point) => (point.series ?? point.markId) === key
+      )?.value ?? "" }, key))
+    ] }, stop.key)) })
+  ] }) });
+}
+export {
+  ChartDataTable
+};
+//# sourceMappingURL=chart-data-table.js.map

package/dist/react/chart-data-table.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/chart-data-table.tsx"],
+  "sourcesContent": ["import type { ChartFocusStop } from \"#/core/nearest.ts\";\nimport type { ChartScene } from \"#/core/types.ts\";\nimport { SR_ONLY } from \"#/react/sr-only.ts\";\n\n/**\n * The chart's content as a table, for anyone who cannot read the picture: a\n * screen reader gets the actual numbers, not a one-line summary of them. One\n * row per focus stop, one column per series, the same values the tooltip\n * shows.\n *\n * The hiding goes on a wrapper: a table box ignores `width: 1px` and lays out\n * at its content width, which widened the page on a phone.\n */\nexport function ChartDataTable({\n\tscene,\n\tstops,\n\tcaption,\n\tseriesHeading,\n}: {\n\tscene: ChartScene;\n\tstops: ReadonlyArray<ChartFocusStop>;\n\tcaption: string;\n\tseriesHeading: string;\n}) {\n\tif (stops.length === 0) {\n\t\treturn null;\n\t}\n\tconst series = new Map<string, string>();\n\tfor (const point of scene.points) {\n\t\tconst key = point.series ?? point.markId;\n\t\tif (!series.has(key)) {\n\t\t\tseries.set(key, point.seriesLabel ?? scene.yLabel);\n\t\t}\n\t}\n\t// A pie or a scatter: one row per point, the series only when it says\n\t// something the row heading does not.\n\tif (scene.focusOrder === \"point\") {\n\t\tconst named = scene.points.some(\n\t\t\t(point) =>\n\t\t\t\tpoint.seriesLabel !== undefined && point.seriesLabel !== point.title,\n\t\t);\n\t\treturn (\n\t\t\t<div style={SR_ONLY}>\n\t\t\t\t<table data-slot=\"chart-data-table\">\n\t\t\t\t\t<caption>{caption}</caption>\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<th scope=\"col\">{scene.xLabel}</th>\n\t\t\t\t\t\t\t{named ? <th scope=\"col\">{seriesHeading}</th> : null}\n\t\t\t\t\t\t\t<th scope=\"col\">{scene.yLabel}</th>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>\n\t\t\t\t\t\t{scene.points.map((point) => (\n\t\t\t\t\t\t\t<tr key={point.key}>\n\t\t\t\t\t\t\t\t<th scope=\"row\">{point.title}</th>\n\t\t\t\t\t\t\t\t{named ? <td>{point.seriesLabel}</td> : null}\n\t\t\t\t\t\t\t\t<td>{point.value}</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t);\n\t}\n\tconst columns = [...series.entries()];\n\treturn (\n\t\t<div style={SR_ONLY}>\n\t\t\t<table data-slot=\"chart-data-table\">\n\t\t\t\t<caption>{caption}</caption>\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th scope=\"col\">{scene.xLabel}</th>\n\t\t\t\t\t\t{columns.map(([key, label]) => (\n\t\t\t\t\t\t\t<th key={key} scope=\"col\">\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{stops.map((stop) => (\n\t\t\t\t\t\t<tr key={stop.key}>\n\t\t\t\t\t\t\t<th scope=\"row\">{stop.points[0].title}</th>\n\t\t\t\t\t\t\t{columns.map(([key]) => (\n\t\t\t\t\t\t\t\t<td key={key}>\n\t\t\t\t\t\t\t\t\t{stop.points.find(\n\t\t\t\t\t\t\t\t\t\t(point) => (point.series ?? point.markId) === key,\n\t\t\t\t\t\t\t\t\t)?.value ?? \"\"}\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t))}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "AA4CK,cAEC,YAFD;AA1CL,SAAS,eAAe;AAWjB,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKG;AACF,MAAI,MAAM,WAAW,GAAG;AACvB,WAAO;AAAA,EACR;AACA,QAAM,SAAS,oBAAI,IAAoB;AACvC,aAAW,SAAS,MAAM,QAAQ;AACjC,UAAM,MAAM,MAAM,UAAU,MAAM;AAClC,QAAI,CAAC,OAAO,IAAI,GAAG,GAAG;AACrB,aAAO,IAAI,KAAK,MAAM,eAAe,MAAM,MAAM;AAAA,IAClD;AAAA,EACD;AAGA,MAAI,MAAM,eAAe,SAAS;AACjC,UAAM,QAAQ,MAAM,OAAO;AAAA,MAC1B,CAAC,UACA,MAAM,gBAAgB,UAAa,MAAM,gBAAgB,MAAM;AAAA,IACjE;AACA,WACC,oBAAC,SAAI,OAAO,SACX,+BAAC,WAAM,aAAU,oBAChB;AAAA,0BAAC,aAAS,mBAAQ;AAAA,MAClB,oBAAC,WACA,+BAAC,QACA;AAAA,4BAAC,QAAG,OAAM,OAAO,gBAAM,QAAO;AAAA,QAC7B,QAAQ,oBAAC,QAAG,OAAM,OAAO,yBAAc,IAAQ;AAAA,QAChD,oBAAC,QAAG,OAAM,OAAO,gBAAM,QAAO;AAAA,SAC/B,GACD;AAAA,MACA,oBAAC,WACC,gBAAM,OAAO,IAAI,CAAC,UAClB,qBAAC,QACA;AAAA,4BAAC,QAAG,OAAM,OAAO,gBAAM,OAAM;AAAA,QAC5B,QAAQ,oBAAC,QAAI,gBAAM,aAAY,IAAQ;AAAA,QACxC,oBAAC,QAAI,gBAAM,OAAM;AAAA,WAHT,MAAM,GAIf,CACA,GACF;AAAA,OACD,GACD;AAAA,EAEF;AACA,QAAM,UAAU,CAAC,GAAG,OAAO,QAAQ,CAAC;AACpC,SACC,oBAAC,SAAI,OAAO,SACX,+BAAC,WAAM,aAAU,oBAChB;AAAA,wBAAC,aAAS,mBAAQ;AAAA,IAClB,oBAAC,WACA,+BAAC,QACA;AAAA,0BAAC,QAAG,OAAM,OAAO,gBAAM,QAAO;AAAA,MAC7B,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,MACxB,oBAAC,QAAa,OAAM,OAClB,mBADO,GAET,CACA;AAAA,OACF,GACD;AAAA,IACA,oBAAC,WACC,gBAAM,IAAI,CAAC,SACX,qBAAC,QACA;AAAA,0BAAC,QAAG,OAAM,OAAO,eAAK,OAAO,CAAC,EAAE,OAAM;AAAA,MACrC,QAAQ,IAAI,CAAC,CAAC,GAAG,MACjB,oBAAC,QACC,eAAK,OAAO;AAAA,QACZ,CAAC,WAAW,MAAM,UAAU,MAAM,YAAY;AAAA,MAC/C,GAAG,SAAS,MAHJ,GAIT,CACA;AAAA,SARO,KAAK,GASd,CACA,GACF;AAAA,KACD,GACD;AAEF;",
+  "names": []
+}

package/dist/react/chart-legend.d.ts

@@ -0,0 +1,17 @@
+import type { ChartLegendItem, ChartScene } from "../core/types.js";
+/**
+ * One toggle button per series. Turning a series off redraws without it but
+ * keeps the axes where they were, so the other series do not jump.
+ */
+export declare function ChartLegend({ items, hidden, label, onToggle, }: {
+    items: ReadonlyArray<ChartLegendItem>;
+    hidden: ReadonlySet<string>;
+    label: string;
+    onToggle: (key: string) => void;
+}): import("react").JSX.Element;
+/** The ramp of a sequential colour scale: a gradient bar between its two ends. */
+export declare function ChartColorRamp({ ramp, label, }: {
+    ramp: NonNullable<ChartScene["colorRamp"]>;
+    label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=chart-legend.d.ts.map

package/dist/react/chart-legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-legend.d.ts","sourceRoot":"","sources":["../../src/react/chart-legend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA+BnE;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,KAAK,EACL,QAAQ,GACR,EAAE;IACF,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,+BAgDA;AAED,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,EAC9B,IAAI,EACJ,KAAK,GACL,EAAE;IACF,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;CACd,+BA2BA"}

package/dist/react/chart-legend.js

@@ -0,0 +1,126 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Swatch({ item }) {
+  const base = { flex: "none", display: "inline-block" };
+  if (item.shape === "line" || item.shape === "dashed") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          ...base,
+          width: 14,
+          height: 0,
+          borderTop: `2px ${item.shape === "dashed" ? "dashed" : "solid"} ${item.color}`
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        ...base,
+        width: 10,
+        height: 10,
+        borderRadius: item.shape === "dot" ? "50%" : 2,
+        background: item.color
+      }
+    }
+  );
+}
+function ChartLegend({
+  items,
+  hidden,
+  label,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "aria-label": label,
+      "data-slot": "chart-legend",
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        gap: 4,
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        fontSize: 12
+      },
+      children: items.map((item) => {
+        const visible = !hidden.has(item.key);
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": visible,
+            onClick: () => onToggle(item.key),
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              minHeight: 24,
+              padding: "2px 8px",
+              border: 0,
+              borderRadius: 6,
+              background: "transparent",
+              color: "inherit",
+              font: "inherit",
+              cursor: "pointer",
+              opacity: visible ? 1 : 0.45,
+              textDecoration: visible ? void 0 : "line-through"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Swatch, { item }),
+              item.label
+            ]
+          }
+        ) }, item.key);
+      })
+    }
+  );
+}
+function ChartColorRamp({
+  ramp,
+  label
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "img",
+      "aria-label": `${label} : ${ramp.low} \u2013 ${ramp.high}`,
+      "data-slot": "chart-color-ramp",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        fontSize: 12
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { children: ramp.low }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: 120,
+              height: 8,
+              borderRadius: 4,
+              background: `linear-gradient(to right, ${ramp.stops.join(", ")})`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: ramp.high })
+      ]
+    }
+  );
+}
+export {
+  ChartColorRamp,
+  ChartLegend
+};
+//# sourceMappingURL=chart-legend.js.map

package/dist/react/chart-legend.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/chart-legend.tsx"],
+  "sourcesContent": ["import type { ChartLegendItem, ChartScene } from \"#/core/types.ts\";\n\nfunction Swatch({ item }: { item: ChartLegendItem }) {\n\tconst base = { flex: \"none\" as const, display: \"inline-block\" };\n\tif (item.shape === \"line\" || item.shape === \"dashed\") {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tstyle={{\n\t\t\t\t\t...base,\n\t\t\t\t\twidth: 14,\n\t\t\t\t\theight: 0,\n\t\t\t\t\tborderTop: `2px ${item.shape === \"dashed\" ? \"dashed\" : \"solid\"} ${item.color}`,\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<span\n\t\t\taria-hidden=\"true\"\n\t\t\tstyle={{\n\t\t\t\t...base,\n\t\t\t\twidth: 10,\n\t\t\t\theight: 10,\n\t\t\t\tborderRadius: item.shape === \"dot\" ? \"50%\" : 2,\n\t\t\t\tbackground: item.color,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\n/**\n * One toggle button per series. Turning a series off redraws without it but\n * keeps the axes where they were, so the other series do not jump.\n */\nexport function ChartLegend({\n\titems,\n\thidden,\n\tlabel,\n\tonToggle,\n}: {\n\titems: ReadonlyArray<ChartLegendItem>;\n\thidden: ReadonlySet<string>;\n\tlabel: string;\n\tonToggle: (key: string) => void;\n}) {\n\treturn (\n\t\t<ul\n\t\t\taria-label={label}\n\t\t\tdata-slot=\"chart-legend\"\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexWrap: \"wrap\",\n\t\t\t\tjustifyContent: \"center\",\n\t\t\t\tgap: 4,\n\t\t\t\tmargin: 0,\n\t\t\t\tpadding: 0,\n\t\t\t\tlistStyle: \"none\",\n\t\t\t\tfontSize: 12,\n\t\t\t}}\n\t\t>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst visible = !hidden.has(item.key);\n\t\t\t\treturn (\n\t\t\t\t\t<li key={item.key}>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-pressed={visible}\n\t\t\t\t\t\t\tonClick={() => onToggle(item.key)}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: \"inline-flex\",\n\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\tminHeight: 24,\n\t\t\t\t\t\t\t\tpadding: \"2px 8px\",\n\t\t\t\t\t\t\t\tborder: 0,\n\t\t\t\t\t\t\t\tborderRadius: 6,\n\t\t\t\t\t\t\t\tbackground: \"transparent\",\n\t\t\t\t\t\t\t\tcolor: \"inherit\",\n\t\t\t\t\t\t\t\tfont: \"inherit\",\n\t\t\t\t\t\t\t\tcursor: \"pointer\",\n\t\t\t\t\t\t\t\topacity: visible ? 1 : 0.45,\n\t\t\t\t\t\t\t\ttextDecoration: visible ? undefined : \"line-through\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Swatch item={item} />\n\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ul>\n\t);\n}\n\n/** The ramp of a sequential colour scale: a gradient bar between its two ends. */\nexport function ChartColorRamp({\n\tramp,\n\tlabel,\n}: {\n\tramp: NonNullable<ChartScene[\"colorRamp\"]>;\n\tlabel: string;\n}) {\n\treturn (\n\t\t<div\n\t\t\trole=\"img\"\n\t\t\taria-label={`${label} : ${ramp.low} \u2013 ${ramp.high}`}\n\t\t\tdata-slot=\"chart-color-ramp\"\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tjustifyContent: \"center\",\n\t\t\t\tgap: 8,\n\t\t\t\tfontSize: 12,\n\t\t\t}}\n\t\t>\n\t\t\t<span>{ramp.low}</span>\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: 120,\n\t\t\t\t\theight: 8,\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\tbackground: `linear-gradient(to right, ${ramp.stops.join(\", \")})`,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<span>{ramp.high}</span>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "AAMG,cA2DG,YA3DH;AAJH,SAAS,OAAO,EAAE,KAAK,GAA8B;AACpD,QAAM,OAAO,EAAE,MAAM,QAAiB,SAAS,eAAe;AAC9D,MAAI,KAAK,UAAU,UAAU,KAAK,UAAU,UAAU;AACrD,WACC;AAAA,MAAC;AAAA;AAAA,QACA,eAAY;AAAA,QACZ,OAAO;AAAA,UACN,GAAG;AAAA,UACH,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW,OAAO,KAAK,UAAU,WAAW,WAAW,OAAO,IAAI,KAAK,KAAK;AAAA,QAC7E;AAAA;AAAA,IACD;AAAA,EAEF;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,OAAO;AAAA,QACN,GAAG;AAAA,QACH,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc,KAAK,UAAU,QAAQ,QAAQ;AAAA,QAC7C,YAAY,KAAK;AAAA,MAClB;AAAA;AAAA,EACD;AAEF;AAMO,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKG;AACF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,OAAO;AAAA,QACN,SAAS;AAAA,QACT,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,MACX;AAAA,MAEC,gBAAM,IAAI,CAAC,SAAS;AACpB,cAAM,UAAU,CAAC,OAAO,IAAI,KAAK,GAAG;AACpC,eACC,oBAAC,QACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,YAChC,OAAO;AAAA,cACN,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,WAAW;AAAA,cACX,SAAS;AAAA,cACT,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,SAAS,UAAU,IAAI;AAAA,cACvB,gBAAgB,UAAU,SAAY;AAAA,YACvC;AAAA,YAEA;AAAA,kCAAC,UAAO,MAAY;AAAA,cACnB,KAAK;AAAA;AAAA;AAAA,QACP,KAvBQ,KAAK,GAwBd;AAAA,MAEF,CAAC;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AACD,GAGG;AACF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAY,GAAG,KAAK,MAAM,KAAK,GAAG,WAAM,KAAK,IAAI;AAAA,MACjD,aAAU;AAAA,MACV,OAAO;AAAA,QACN,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,UAAU;AAAA,MACX;AAAA,MAEA;AAAA,4BAAC,UAAM,eAAK,KAAI;AAAA,QAChB;AAAA,UAAC;AAAA;AAAA,YACA,eAAY;AAAA,YACZ,OAAO;AAAA,cACN,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,YAAY,6BAA6B,KAAK,MAAM,KAAK,IAAI,CAAC;AAAA,YAC/D;AAAA;AAAA,QACD;AAAA,QACA,oBAAC,UAAM,eAAK,MAAK;AAAA;AAAA;AAAA,EAClB;AAEF;",
+  "names": []
+}

package/dist/react/chart-tooltip.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+import type { ChartScene } from "../core/types.js";
+import type { ActiveFocus } from "./use-chart-focus.js";
+export interface ChartTooltipRenderProps {
+    readonly active: ActiveFocus;
+    readonly scene: ChartScene;
+}
+/** The default content: the stop's title, then one row per series with its swatch. */
+export declare function ChartTooltipContent({ active, scene, }: ChartTooltipRenderProps): React.JSX.Element;
+/**
+ * Follows the focused stop, on the side with room. Hidden from assistive
+ * tech: the live region already says the same thing once, where this would
+ * say it on every pointer move.
+ */
+export declare function ChartTooltip({ active, scene, render, }: ChartTooltipRenderProps & {
+    render: (props: ChartTooltipRenderProps) => React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=chart-tooltip.d.ts.map

package/dist/react/chart-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip.d.ts","sourceRoot":"","sources":["../../src/react/chart-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,MAAM,WAAW,uBAAuB;IACvC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;CAC3B;AAqBD,sFAAsF;AACtF,wBAAgB,mBAAmB,CAAC,EACnC,MAAM,EACN,KAAK,GACL,EAAE,uBAAuB,qBA6CzB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,MAAM,GACN,EAAE,uBAAuB,GAAG;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5D,qBAiBA"}

package/dist/react/chart-tooltip.js

@@ -0,0 +1,95 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const OFFSET = 12;
+const MAX_WIDTH = 280;
+const SURFACE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  pointerEvents: "none",
+  zIndex: 1,
+  maxWidth: MAX_WIDTH,
+  padding: "6px 10px",
+  borderRadius: 8,
+  border: "1px solid var(--border, color-mix(in oklab, currentColor 15%, transparent))",
+  background: "var(--popover, Canvas)",
+  color: "var(--popover-foreground, CanvasText)",
+  boxShadow: "0 4px 16px rgb(0 0 0 / 0.08)",
+  fontSize: 12,
+  lineHeight: 1.4,
+  whiteSpace: "nowrap"
+};
+function ChartTooltipContent({
+  active,
+  scene
+}) {
+  const rows = active.stop.points.length > 1 ? active.stop.points : [active.point];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: 2 }, children: active.point.title }),
+    rows.map((point) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          fontWeight: point.key === active.point.key && rows.length > 1 ? 600 : 400
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: 2,
+                background: point.color,
+                flex: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { color: "var(--muted-foreground, inherit)" }, children: point.seriesLabel ?? scene.yLabel }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                marginLeft: "auto",
+                paddingLeft: 12,
+                fontVariantNumeric: "tabular-nums"
+              },
+              children: point.value
+            }
+          )
+        ]
+      },
+      point.key
+    ))
+  ] });
+}
+function ChartTooltip({
+  active,
+  scene,
+  render
+}) {
+  const anchorX = scene.focusOrder === "x" ? active.stop.at : active.point.x;
+  const anchorY = Math.min(...active.stop.points.map((point) => point.y));
+  const flip = anchorX > scene.width / 2;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-slot": "chart-tooltip",
+      "data-pinned": active.pinned ? "" : void 0,
+      style: {
+        ...SURFACE,
+        transform: `translate(${flip ? `calc(${anchorX - OFFSET}px - 100%)` : `${anchorX + OFFSET}px`}, ${Math.max(0, anchorY - OFFSET)}px)`
+      },
+      children: render({ active, scene })
+    }
+  );
+}
+export {
+  ChartTooltip,
+  ChartTooltipContent
+};
+//# sourceMappingURL=chart-tooltip.js.map

package/dist/react/chart-tooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react/chart-tooltip.tsx"],
+  "sourcesContent": ["import type * as React from \"react\";\nimport type { ChartScene } from \"#/core/types.ts\";\nimport type { ActiveFocus } from \"#/react/use-chart-focus.ts\";\n\nconst OFFSET = 12;\nconst MAX_WIDTH = 280;\n\nexport interface ChartTooltipRenderProps {\n\treadonly active: ActiveFocus;\n\treadonly scene: ChartScene;\n}\n\nconst SURFACE: React.CSSProperties = {\n\tposition: \"absolute\",\n\ttop: 0,\n\tleft: 0,\n\tpointerEvents: \"none\",\n\tzIndex: 1,\n\tmaxWidth: MAX_WIDTH,\n\tpadding: \"6px 10px\",\n\tborderRadius: 8,\n\tborder:\n\t\t\"1px solid var(--border, color-mix(in oklab, currentColor 15%, transparent))\",\n\tbackground: \"var(--popover, Canvas)\",\n\tcolor: \"var(--popover-foreground, CanvasText)\",\n\tboxShadow: \"0 4px 16px rgb(0 0 0 / 0.08)\",\n\tfontSize: 12,\n\tlineHeight: 1.4,\n\twhiteSpace: \"nowrap\",\n};\n\n/** The default content: the stop's title, then one row per series with its swatch. */\nexport function ChartTooltipContent({\n\tactive,\n\tscene,\n}: ChartTooltipRenderProps) {\n\tconst rows =\n\t\tactive.stop.points.length > 1 ? active.stop.points : [active.point];\n\treturn (\n\t\t<>\n\t\t\t<div style={{ fontWeight: 600, marginBottom: 2 }}>\n\t\t\t\t{active.point.title}\n\t\t\t</div>\n\t\t\t{rows.map((point) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={point.key}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\tfontWeight:\n\t\t\t\t\t\t\tpoint.key === active.point.key && rows.length > 1 ? 600 : 400,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: 8,\n\t\t\t\t\t\t\theight: 8,\n\t\t\t\t\t\t\tborderRadius: 2,\n\t\t\t\t\t\t\tbackground: point.color,\n\t\t\t\t\t\t\tflex: \"none\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<span style={{ color: \"var(--muted-foreground, inherit)\" }}>\n\t\t\t\t\t\t{point.seriesLabel ?? scene.yLabel}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginLeft: \"auto\",\n\t\t\t\t\t\t\tpaddingLeft: 12,\n\t\t\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{point.value}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</>\n\t);\n}\n\n/**\n * Follows the focused stop, on the side with room. Hidden from assistive\n * tech: the live region already says the same thing once, where this would\n * say it on every pointer move.\n */\nexport function ChartTooltip({\n\tactive,\n\tscene,\n\trender,\n}: ChartTooltipRenderProps & {\n\trender: (props: ChartTooltipRenderProps) => React.ReactNode;\n}) {\n\tconst anchorX = scene.focusOrder === \"x\" ? active.stop.at : active.point.x;\n\tconst anchorY = Math.min(...active.stop.points.map((point) => point.y));\n\tconst flip = anchorX > scene.width / 2;\n\treturn (\n\t\t<div\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-slot=\"chart-tooltip\"\n\t\t\tdata-pinned={active.pinned ? \"\" : undefined}\n\t\t\tstyle={{\n\t\t\t\t...SURFACE,\n\t\t\t\ttransform: `translate(${flip ? `calc(${anchorX - OFFSET}px - 100%)` : `${anchorX + OFFSET}px`}, ${Math.max(0, anchorY - OFFSET)}px)`,\n\t\t\t}}\n\t\t>\n\t\t\t{render({ active, scene })}\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "AAuCE,mBACC,KAIC,YALF;AAnCF,MAAM,SAAS;AACf,MAAM,YAAY;AAOlB,MAAM,UAA+B;AAAA,EACpC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QACC;AAAA,EACD,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AACb;AAGO,SAAS,oBAAoB;AAAA,EACnC;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,OACL,OAAO,KAAK,OAAO,SAAS,IAAI,OAAO,KAAK,SAAS,CAAC,OAAO,KAAK;AACnE,SACC,iCACC;AAAA,wBAAC,SAAI,OAAO,EAAE,YAAY,KAAK,cAAc,EAAE,GAC7C,iBAAO,MAAM,OACf;AAAA,IACC,KAAK,IAAI,CAAC,UACV;AAAA,MAAC;AAAA;AAAA,QAEA,OAAO;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,YACC,MAAM,QAAQ,OAAO,MAAM,OAAO,KAAK,SAAS,IAAI,MAAM;AAAA,QAC5D;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,eAAY;AAAA,cACZ,OAAO;AAAA,gBACN,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,YAAY,MAAM;AAAA,gBAClB,MAAM;AAAA,cACP;AAAA;AAAA,UACD;AAAA,UACA,oBAAC,UAAK,OAAO,EAAE,OAAO,mCAAmC,GACvD,gBAAM,eAAe,MAAM,QAC7B;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,OAAO;AAAA,gBACN,YAAY;AAAA,gBACZ,aAAa;AAAA,gBACb,oBAAoB;AAAA,cACrB;AAAA,cAEC,gBAAM;AAAA;AAAA,UACR;AAAA;AAAA;AAAA,MA9BK,MAAM;AAAA,IA+BZ,CACA;AAAA,KACF;AAEF;AAOO,SAAS,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACD,GAEG;AACF,QAAM,UAAU,MAAM,eAAe,MAAM,OAAO,KAAK,KAAK,OAAO,MAAM;AACzE,QAAM,UAAU,KAAK,IAAI,GAAG,OAAO,KAAK,OAAO,IAAI,CAAC,UAAU,MAAM,CAAC,CAAC;AACtE,QAAM,OAAO,UAAU,MAAM,QAAQ;AACrC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,aAAU;AAAA,MACV,eAAa,OAAO,SAAS,KAAK;AAAA,MAClC,OAAO;AAAA,QACN,GAAG;AAAA,QACH,WAAW,aAAa,OAAO,QAAQ,UAAU,MAAM,eAAe,GAAG,UAAU,MAAM,IAAI,KAAK,KAAK,IAAI,GAAG,UAAU,MAAM,CAAC;AAAA,MAChI;AAAA,MAEC,iBAAO,EAAE,QAAQ,MAAM,CAAC;AAAA;AAAA,EAC1B;AAEF;",
+  "names": []
+}