@adecore/charts 0.0.0-stage → 0.34.1

package/LICENSE

@@ -0,0 +1,110 @@
+# Functional Source License, Version 1.1, MIT Future License
+
+## Abbreviation
+
+FSL-1.1-MIT
+
+## Notice
+
+Copyright 2026 - present Bas Milius
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the MIT license that is effective on the second anniversary of the date we make
+the Software available. On or after that date, you may use the Software under
+the MIT license, in which case the following will apply:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,60 @@
-# Temporary Holding Version
+# @adecore/charts
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Charts in the theme of [`@adecore/ui`](https://adecore.dev/ui/): lines, areas and columns over time or per category, scatters with a legend of many series, heatmaps, trace timelines and sparklines, with markers and bands, a tooltip, a legend and a table of values. A chart follows the width of its container, draws on whole pixels, and is one stop for the keyboard that a screen reader reads bucket by bucket. `d3-scale` and `d3-shape` do the math.
+
+**[Documentation](https://adecore.dev/charts/)**
+
+## Install
+
+```sh
+bun add @adecore/charts
+```
+
+`@adecore/ui`, React 19, `react-dom`, `i18next` and `react-i18next` are peer dependencies. Let Tailwind scan the package next to `@adecore/ui`, and add the `charts` namespace to the app's i18next:
+
+```css
+@import "tailwindcss";
+@import "@adecore/ui/theme.css";
+@source "../node_modules/@adecore/ui/dist";
+@source "../node_modules/@adecore/charts/dist";
+```
+
+```ts
+import { CHARTS_NAMESPACE, CHARTS_RESOURCES } from '@adecore/charts';
+
+for (const [language, words] of Object.entries(CHARTS_RESOURCES)) {
+    i18n.addResourceBundle(language, CHARTS_NAMESPACE, words);
+}
+```
+
+## Use
+
+```tsx
+import { Chart } from '@adecore/charts';
+
+<Chart.Root data={buckets} x="at" xScale="time" label="Events per hour" height={220}>
+    <Chart.Grid />
+    <Chart.XAxis />
+    <Chart.YAxis />
+    <Chart.Area value="errors" label="Errors" tone="error" />
+    <Chart.Line value="warnings" label="Warnings" tone="needsYou" />
+    <Chart.Tooltip />
+    <Chart.Legend />
+</Chart.Root>
+```
+
+`Timeline` draws the spans of a trace as a tree of rows that folds, each with a bar on one axis of durations:
+
+```tsx
+import { Timeline } from '@adecore/charts';
+
+<Timeline.Root data={spans} kinds={kinds} label="Spans of GET /orders">
+    <Timeline.Legend />
+    <Timeline.Axis heading="Span" />
+    <Timeline.Rows />
+</Timeline.Root>
+```
+
+## License
+
+FSL-1.1-MIT, see [LICENSE](./LICENSE).

package/dist/Heatmap.d.ts

@@ -0,0 +1,27 @@
+import { type Ref } from 'react';
+import { type HeatCell } from './heat.ts';
+import type { ChartColor } from './types.ts';
+export type HeatmapCell = HeatCell;
+export interface HeatmapAxisItem {
+    readonly key: string | number;
+    readonly label: string;
+    readonly short?: string | null;
+}
+export interface HeatmapProps {
+    readonly rows: readonly HeatmapAxisItem[];
+    readonly columns: readonly HeatmapAxisItem[];
+    readonly values: readonly (readonly (number | null)[])[];
+    readonly label: string;
+    readonly valueLabel: string;
+    readonly tone?: ChartColor;
+    readonly steps?: number;
+    readonly max?: number;
+    readonly format?: (value: number) => string;
+    readonly cellHeight?: number;
+    readonly legend?: boolean;
+    readonly table?: boolean;
+    readonly onActiveChange?: (cell: HeatmapCell | null) => void;
+    readonly className?: string;
+    readonly ref?: Ref<HTMLDivElement>;
+}
+export declare function Heatmap({ rows, columns, values, label, valueLabel, tone, steps, max, format, cellHeight, legend, table, onActiveChange, className, ref }: HeatmapProps): import("react").JSX.Element;

package/dist/Heatmap.js

@@ -0,0 +1,455 @@
+import { c as _c } from "react/compiler-runtime";
+import { useId, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Button, Surface } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { colorOf } from './color.js';
+import { FLOOR, heatMix, heatShare, moveCell } from './heat.js';
+/* Between a cell and the card beside it. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const OFFSET = 8;
+// The React Compiler cannot compile optional chaining inside a condition, so the comparison lives out here.
+const sameCell = (one, other) => one === null || other === null ? one === other : one.row === other.row && one.column === other.column;
+const shade = (color, share) => share === 0 ? undefined : `color-mix(in srgb, ${color} ${share}%, transparent)`;
+/* The card hangs toward the side of the grid with the most room, so it covers neither the cell nor the edge. */
+const cardPlace = (toRight, down) => ({
+  left: toRight ? `calc(100% + ${OFFSET}px)` : undefined,
+  right: toRight ? undefined : `calc(100% + ${OFFSET}px)`,
+  top: down ? 0 : undefined,
+  bottom: down ? undefined : 0
+});
+/* A grid of rows by columns, each cell shaded by its value, such as events per weekday and hour. */
+export function Heatmap(t0) {
+  const $ = _c(89);
+  const {
+    rows,
+    columns,
+    values,
+    label,
+    valueLabel,
+    tone: t1,
+    steps,
+    max,
+    format: t2,
+    cellHeight: t3,
+    legend: t4,
+    table: t5,
+    onActiveChange,
+    className,
+    ref
+  } = t0;
+  const tone = t1 === undefined ? "accent" : t1;
+  const format = t2 === undefined ? formatNumber : t2;
+  const cellHeight = t3 === undefined ? 16 : t3;
+  const legend = t4 === undefined ? true : t4;
+  const table = t5 === undefined ? false : t5;
+  const {
+    t
+  } = useTranslation("charts");
+  const id = useId();
+  const [active, setActive] = useState(null);
+  const [announce, setAnnounce] = useState(false);
+  const [shown, setShown] = useState(false);
+  let current;
+  let describe;
+  let empty;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  let valueAt;
+  if ($[0] !== active || $[1] !== cellHeight || $[2] !== className || $[3] !== columns || $[4] !== format || $[5] !== id || $[6] !== label || $[7] !== legend || $[8] !== max || $[9] !== onActiveChange || $[10] !== ref || $[11] !== rows || $[12] !== steps || $[13] !== t || $[14] !== tone || $[15] !== valueLabel || $[16] !== values) {
+    const color = colorOf(tone);
+    let t10;
+    if ($[25] !== values) {
+      t10 = (row, column) => values[row]?.[column] ?? null;
+      $[25] = values;
+      $[26] = t10;
+    } else {
+      t10 = $[26];
+    }
+    valueAt = t10;
+    let t11;
+    if ($[27] !== max || $[28] !== values) {
+      t11 = max ?? Math.max(0, ...values.flatMap(_temp2));
+      $[27] = max;
+      $[28] = values;
+      $[29] = t11;
+    } else {
+      t11 = $[29];
+    }
+    const top = t11;
+    empty = rows.length === 0 || columns.length === 0;
+    let t12;
+    if ($[30] !== format || $[31] !== t) {
+      t12 = value_0 => value_0 === null ? t("noData") : format(value_0);
+      $[30] = format;
+      $[31] = t;
+      $[32] = t12;
+    } else {
+      t12 = $[32];
+    }
+    const write = t12;
+    let t13;
+    if ($[33] !== columns || $[34] !== format || $[35] !== rows || $[36] !== t || $[37] !== valueAt || $[38] !== valueLabel) {
+      t13 = cell => {
+        const value_1 = valueAt(cell.row, cell.column);
+        return `${rows[cell.row].label}, ${columns[cell.column].label}, ${value_1 === null ? t("noData") : `${valueLabel} ${format(value_1)}`}`;
+      };
+      $[33] = columns;
+      $[34] = format;
+      $[35] = rows;
+      $[36] = t;
+      $[37] = valueAt;
+      $[38] = valueLabel;
+      $[39] = t13;
+    } else {
+      t13 = $[39];
+    }
+    describe = t13;
+    current = active !== null && active.row < rows.length && active.column < columns.length ? active : null;
+    let t14;
+    if ($[40] !== current || $[41] !== onActiveChange) {
+      t14 = cell_0 => {
+        setActive(cell_0);
+        if (!sameCell(cell_0, current)) {
+          onActiveChange?.(cell_0);
+        }
+      };
+      $[40] = current;
+      $[41] = onActiveChange;
+      $[42] = t14;
+    } else {
+      t14 = $[42];
+    }
+    const activate = t14;
+    let t15;
+    if ($[43] !== activate || $[44] !== columns.length || $[45] !== current || $[46] !== rows.length) {
+      t15 = e => {
+        const target = moveCell(e.key, current, rows.length, columns.length, e.ctrlKey || e.metaKey);
+        if (target === undefined) {
+          return;
+        }
+        e.preventDefault();
+        setAnnounce(target !== null);
+        activate(target);
+      };
+      $[43] = activate;
+      $[44] = columns.length;
+      $[45] = current;
+      $[46] = rows.length;
+      $[47] = t15;
+    } else {
+      t15 = $[47];
+    }
+    const onKeyDown = t15;
+    t6 = ref;
+    if ($[48] !== className) {
+      t7 = clsx("flex min-w-0 flex-col gap-2", className);
+      $[48] = className;
+      $[49] = t7;
+    } else {
+      t7 = $[49];
+    }
+    let t16;
+    if ($[50] !== t) {
+      t16 = t("heatmap.name");
+      $[50] = t;
+      $[51] = t16;
+    } else {
+      t16 = $[51];
+    }
+    const t17 = `${id}-hint`;
+    let t18;
+    let t19;
+    if ($[52] !== activate) {
+      t18 = () => activate(null);
+      t19 = () => {
+        activate(null);
+        setAnnounce(false);
+      };
+      $[52] = activate;
+      $[53] = t18;
+      $[54] = t19;
+    } else {
+      t18 = $[53];
+      t19 = $[54];
+    }
+    const t20 = empty ? /*#__PURE__*/_jsx("p", {
+      className: "py-6 text-center text-xs text-text-faint",
+      children: t("noData")
+    }) : /*#__PURE__*/_jsxs("div", {
+      "aria-hidden": true,
+      className: "grid gap-0.5 text-xs text-text-muted",
+      style: {
+        gridTemplateColumns: `auto repeat(${columns.length}, minmax(0, 1fr))`
+      },
+      children: [/*#__PURE__*/_jsx("span", {}), columns.map(_temp3), rows.map((row_0, rowIndex) => /*#__PURE__*/_jsxs("div", {
+        className: "contents",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "flex items-center pr-2 leading-4 whitespace-nowrap",
+          children: row_0.short === undefined ? row_0.label : row_0.short
+        }), columns.map((column_1, columnIndex) => {
+          const value_2 = valueAt(rowIndex, columnIndex);
+          const mix = heatMix(value_2, top, steps);
+          const isActive = current !== null && current.row === rowIndex && current.column === columnIndex;
+          return /*#__PURE__*/_jsx("span", {
+            "data-mix": mix,
+            className: clsx("rounded-xs", mix === 0 && "bg-surface-sunken", isActive && "relative z-10 outline-1 outline-offset-1 outline-text"),
+            style: {
+              height: cellHeight,
+              backgroundColor: shade(color, mix)
+            },
+            onPointerEnter: () => {
+              setAnnounce(false);
+              activate({
+                row: rowIndex,
+                column: columnIndex
+              });
+            },
+            children: isActive && /*#__PURE__*/_jsxs(Surface, {
+              className: "pointer-events-none absolute flex w-max min-w-36 flex-col gap-1 rounded-lg px-2.5 py-2 text-xs",
+              style: cardPlace(columnIndex < columns.length / 2, rowIndex < rows.length / 2),
+              children: [/*#__PURE__*/_jsxs("p", {
+                className: "font-medium whitespace-nowrap text-text",
+                children: [row_0.label, " \xB7 ", column_1.label]
+              }), /*#__PURE__*/_jsxs("p", {
+                className: "flex items-center gap-2 text-text-muted",
+                children: [/*#__PURE__*/_jsx("span", {
+                  className: clsx("size-2 shrink-0 rounded-xs", mix === 0 && "bg-surface-sunken"),
+                  style: {
+                    backgroundColor: shade(color, mix)
+                  }
+                }), /*#__PURE__*/_jsx("span", {
+                  className: "min-w-0 truncate",
+                  children: valueLabel
+                }), /*#__PURE__*/_jsx("span", {
+                  className: "ml-auto pl-3 text-text tabular-nums",
+                  children: write(value_2)
+                })]
+              })]
+            })
+          }, column_1.key);
+        })]
+      }, row_0.key))]
+    });
+    if ($[55] !== label || $[56] !== onKeyDown || $[57] !== t16 || $[58] !== t17 || $[59] !== t18 || $[60] !== t19 || $[61] !== t20) {
+      t8 = /*#__PURE__*/_jsx("div", {
+        role: "group",
+        tabIndex: 0,
+        "aria-roledescription": t16,
+        "aria-label": label,
+        "aria-describedby": t17,
+        className: "focus-ring rounded-xs",
+        onKeyDown: onKeyDown,
+        onPointerLeave: t18,
+        onBlur: t19,
+        children: t20
+      });
+      $[55] = label;
+      $[56] = onKeyDown;
+      $[57] = t16;
+      $[58] = t17;
+      $[59] = t18;
+      $[60] = t19;
+      $[61] = t20;
+      $[62] = t8;
+    } else {
+      t8 = $[62];
+    }
+    t9 = legend && !empty && /*#__PURE__*/_jsxs("div", {
+      "aria-hidden": true,
+      className: "flex items-center justify-end gap-1 text-xs text-text-muted",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "mr-1",
+        children: t("heatmap.less")
+      }), steps === undefined ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "size-3 rounded-xs bg-surface-sunken"
+        }), /*#__PURE__*/_jsx("span", {
+          "data-legend": "gradient",
+          className: "h-3 w-16 rounded-xs",
+          style: {
+            backgroundImage: `linear-gradient(to right, ${shade(color, FLOOR)}, ${shade(color, 100)})`
+          }
+        })]
+      }) : Array.from({
+        length: steps + 1
+      }, (_, step) => /*#__PURE__*/_jsx("span", {
+        className: clsx("size-3 rounded-xs", step === 0 && "bg-surface-sunken"),
+        style: {
+          backgroundColor: shade(color, heatShare(step, steps))
+        }
+      }, step)), /*#__PURE__*/_jsx("span", {
+        className: "ml-1",
+        children: t("heatmap.more")
+      })]
+    });
+    $[0] = active;
+    $[1] = cellHeight;
+    $[2] = className;
+    $[3] = columns;
+    $[4] = format;
+    $[5] = id;
+    $[6] = label;
+    $[7] = legend;
+    $[8] = max;
+    $[9] = onActiveChange;
+    $[10] = ref;
+    $[11] = rows;
+    $[12] = steps;
+    $[13] = t;
+    $[14] = tone;
+    $[15] = valueLabel;
+    $[16] = values;
+    $[17] = current;
+    $[18] = describe;
+    $[19] = empty;
+    $[20] = t6;
+    $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
+    $[24] = valueAt;
+  } else {
+    current = $[17];
+    describe = $[18];
+    empty = $[19];
+    t6 = $[20];
+    t7 = $[21];
+    t8 = $[22];
+    t9 = $[23];
+    valueAt = $[24];
+  }
+  let t10;
+  if ($[63] !== columns || $[64] !== empty || $[65] !== format || $[66] !== id || $[67] !== label || $[68] !== rows || $[69] !== shown || $[70] !== t || $[71] !== table || $[72] !== valueAt) {
+    t10 = !empty && /*#__PURE__*/_jsxs("div", {
+      className: table ? "flex flex-col items-start gap-2" : undefined,
+      children: [table && /*#__PURE__*/_jsx(Button, {
+        size: "sm",
+        "aria-expanded": shown,
+        "aria-controls": `${id}-table`,
+        onClick: () => setShown(_temp4),
+        children: shown ? t("values.hide") : t("values.show")
+      }), /*#__PURE__*/_jsx("div", {
+        id: `${id}-table`,
+        className: table && shown ? "max-h-80 w-full overflow-auto rounded-md border border-border-soft" : "sr-only",
+        children: /*#__PURE__*/_jsxs("table", {
+          className: table && shown ? "w-full border-collapse text-xs tabular-nums" : undefined,
+          children: [/*#__PURE__*/_jsx("caption", {
+            className: "sr-only",
+            children: t("values.caption", {
+              label
+            })
+          }), /*#__PURE__*/_jsx("thead", {
+            className: table && shown ? "sticky top-0 bg-surface-hover" : undefined,
+            children: /*#__PURE__*/_jsxs("tr", {
+              children: [/*#__PURE__*/_jsx("td", {}), columns.map(column_2 => /*#__PURE__*/_jsx("th", {
+                scope: "col",
+                className: table && shown ? "h-8 px-2 text-right font-medium whitespace-nowrap text-text-muted" : undefined,
+                children: column_2.label
+              }, column_2.key))]
+            })
+          }), /*#__PURE__*/_jsx("tbody", {
+            children: rows.map((row_1, rowIndex_0) => /*#__PURE__*/_jsxs("tr", {
+              className: table && shown ? "border-t border-border-soft" : undefined,
+              children: [/*#__PURE__*/_jsx("th", {
+                scope: "row",
+                className: table && shown ? "h-8 px-2 text-left font-normal whitespace-nowrap text-text-muted" : undefined,
+                children: row_1.label
+              }), columns.map((column_3, columnIndex_0) => {
+                const value_3 = valueAt(rowIndex_0, columnIndex_0);
+                return /*#__PURE__*/_jsx("td", {
+                  className: table && shown ? "h-8 px-2 text-right whitespace-nowrap text-text" : undefined,
+                  children: value_3 === null ? "" : format(value_3)
+                }, column_3.key);
+              })]
+            }, row_1.key))
+          })]
+        })
+      })]
+    });
+    $[63] = columns;
+    $[64] = empty;
+    $[65] = format;
+    $[66] = id;
+    $[67] = label;
+    $[68] = rows;
+    $[69] = shown;
+    $[70] = t;
+    $[71] = table;
+    $[72] = valueAt;
+    $[73] = t10;
+  } else {
+    t10 = $[73];
+  }
+  const t11 = `${id}-hint`;
+  let t12;
+  if ($[74] !== t) {
+    t12 = t("heatmap.keyboard");
+    $[74] = t;
+    $[75] = t12;
+  } else {
+    t12 = $[75];
+  }
+  let t13;
+  if ($[76] !== t11 || $[77] !== t12) {
+    t13 = /*#__PURE__*/_jsx("p", {
+      id: t11,
+      className: "sr-only",
+      children: t12
+    });
+    $[76] = t11;
+    $[77] = t12;
+    $[78] = t13;
+  } else {
+    t13 = $[78];
+  }
+  const t14 = announce && current !== null ? describe(current) : "";
+  let t15;
+  if ($[79] !== t14) {
+    t15 = /*#__PURE__*/_jsx("p", {
+      "aria-live": "polite",
+      className: "sr-only",
+      children: t14
+    });
+    $[79] = t14;
+    $[80] = t15;
+  } else {
+    t15 = $[80];
+  }
+  let t16;
+  if ($[81] !== t10 || $[82] !== t13 || $[83] !== t15 || $[84] !== t6 || $[85] !== t7 || $[86] !== t8 || $[87] !== t9) {
+    t16 = /*#__PURE__*/_jsxs("div", {
+      ref: t6,
+      className: t7,
+      children: [t8, t9, t10, t13, t15]
+    });
+    $[81] = t10;
+    $[82] = t13;
+    $[83] = t15;
+    $[84] = t6;
+    $[85] = t7;
+    $[86] = t8;
+    $[87] = t9;
+    $[88] = t16;
+  } else {
+    t16 = $[88];
+  }
+  return t16;
+}
+function _temp4(open) {
+  return !open;
+}
+function _temp3(column_0) {
+  return /*#__PURE__*/_jsx("span", {
+    className: "flex justify-center leading-4 whitespace-nowrap tabular-nums",
+    children: column_0.short === undefined ? column_0.label : column_0.short
+  }, column_0.key);
+}
+function _temp2(line) {
+  return line.filter(_temp);
+}
+function _temp(value) {
+  return value !== null && Number.isFinite(value);
+}

package/dist/Root.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode, type Ref } from 'react';
+import type { ChartAccessor, ChartMargin, ChartRows, ChartX, ChartXInput, ChartXOptions, ChartXScale, ChartYOptions, ChartYScale } from './types.ts';
+export interface ChartRootProps<Row> {
+    readonly data: readonly Row[];
+    readonly x: ChartAccessor<Row, ChartXInput | null | undefined>;
+    readonly xScale?: ChartXScale;
+    readonly rows?: ChartRows;
+    readonly rowKey?: ChartAccessor<Row, string>;
+    readonly rowLabel?: ChartAccessor<Row, string>;
+    readonly format?: (value: number) => string;
+    readonly xOptions?: ChartXOptions;
+    readonly step?: number;
+    readonly yScale?: ChartYScale;
+    readonly y?: ChartYOptions;
+    readonly label: string;
+    readonly height?: number;
+    readonly grow?: boolean;
+    readonly activeX?: ChartX | null;
+    readonly onActiveXChange?: (x: ChartX | null) => void;
+    readonly margin?: ChartMargin;
+    readonly surface?: 'base' | 'raised';
+    readonly group?: ChartAccessor<Row, string>;
+    readonly groupLabel?: ChartAccessor<Row, string>;
+    readonly groupGap?: number;
+    readonly minBucketWidth?: number;
+    readonly selected?: readonly ChartX[];
+    readonly interactive?: boolean;
+    readonly cursor?: 'full' | 'line' | 'none';
+    readonly onActivate?: (row: Row, index: number) => void;
+    readonly dimmed?: (row: Row, index: number) => boolean;
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly ref?: Ref<HTMLDivElement>;
+}
+export declare function ChartRoot<Row>({ data, x, xScale, rows, rowKey, rowLabel, format, xOptions, step: stepProp, yScale, y, label, height: leastHeight, grow, margin, surface, activeX, onActiveXChange, group, groupLabel, groupGap, minBucketWidth, selected, interactive, cursor, onActivate, dimmed, children, className, ref }: ChartRootProps<Row>): import("react").JSX.Element;