@misoto22/folio 0.0.0 → 0.16.0

package/dist/charts/lib/toolbar.d.ts

@@ -0,0 +1,144 @@
+import * as react from 'react';
+import { ReactNode, RefObject, FC } from 'react';
+import { ChartZoom } from './zoom.js';
+import { ChartColumn } from './figure.js';
+import './brush.js';
+import 'recharts';
+import './chart.js';
+import './empty.js';
+
+/** Which file a reader can take away. */
+type ChartExportFormat = 'png' | 'csv';
+interface ToolbarProps {
+    /**
+     * Which files the toolbar offers. `[]` drops the export controls and leaves
+     * a zoom-only toolbar.
+     */
+    exports?: ChartExportFormat[];
+    /**
+     * Off leaves only the export controls, and the plot stops responding to the
+     * wheel, to a drag and to the keyboard. For a chart whose x axis is a handful
+     * of categories, where there is nothing to zoom into.
+     */
+    zoom?: boolean;
+    /** Base name for a downloaded file. Defaults to the figure's title. */
+    filename?: string;
+    /** Which end of the plot the row sits at. */
+    align?: 'start' | 'end';
+    /** Fires after a file has been handed to the browser. */
+    onExport?: (format: ChartExportFormat) => void;
+    /**
+     * Fires when an export fails — a chart that has not been measured yet, or a
+     * canvas tainted by a cross-origin image. Without it the error is logged,
+     * because a download that silently does nothing is the worst of the three.
+     */
+    onExportError?: (error: Error) => void;
+}
+/**
+ * Declares the toolbar above a chart: zoom, reset, and taking the figure away
+ * as a PNG or a CSV.
+ *
+ * Renders nothing itself — its PRESENCE among the chart's children turns the
+ * toolbar on, and its props configure it, the same shape `<Chart.Brush>` uses.
+ * The toolbar is also what switches the plot's own zoom gestures on, so a chart
+ * that composes it becomes wheel-, drag- and keyboard-zoomable at the same
+ * time.
+ *
+ * Reach for `<Chart.Brush>` INSTEAD when the reader needs to see the whole
+ * series while choosing a slice of it; reach for both when they need to do that
+ * and also step the zoom or take the numbers away. The two drive one window, so
+ * they cannot disagree.
+ *
+ * @example
+ * <LineChart title="Visitors per day" config={config} data={data} xDataKey="day">
+ *   <LineChart.Toolbar exports={['png', 'csv']} />
+ *   <LineChart.XAxis dataKey="day" />
+ *   <LineChart.Line dataKey="desktop" />
+ * </LineChart>
+ */
+declare const Toolbar: FC<ToolbarProps>;
+interface ChartToolbarProps extends ToolbarProps {
+    /** The element the PNG export reads the plot out of. */
+    targetRef: RefObject<HTMLElement | null>;
+    /** The figure's title: the toolbar's name, the PNG's caption, the filename. */
+    title: string;
+    /** The rows a CSV export writes. */
+    rows: Record<string, unknown>[];
+    /** The columns a CSV export writes, in order. */
+    columns: ChartColumn[];
+    /** The window these controls drive. */
+    zoomState: ChartZoom;
+    className?: string;
+}
+/**
+ * The row of controls above a plot.
+ *
+ * A `group` rather than a `toolbar`: the toolbar role promises roving
+ * tabindex, and a row of five ordinary buttons that each take a tab stop is
+ * both simpler and correct. Every control is a real `<button>` with a real
+ * accessible name, repeated as a native `title` for sighted pointer users.
+ *
+ * There are five controls at most and no overflow menu, which is a size
+ * decision as much as a design one: a row that can never exceed five 44px
+ * targets does not need one, and the menu component it would take is Radix
+ * Menu — around 60 kB that every consumer of every cartesian chart would ship
+ * whether or not they compose a toolbar, because the chart reaches it
+ * statically. A caller with less width drops controls (`zoom={false}`,
+ * `exports={['csv']}`) rather than hiding them behind a second gesture. The
+ * hover hints come off the native `title` for the same reason.
+ *
+ * Sized `md`, which is 44px at the default density. An icon button is exactly
+ * the control where the pointer-target floor is most often quietly missed.
+ *
+ * ## What each export contains
+ *
+ * The PNG is a picture of the plot, so it shows the CURRENT window — zoom in
+ * and the export follows. The CSV is the whole dataset, like the figure's
+ * hidden data table, because a spreadsheet silently missing the rows the
+ * reader had scrolled past is data loss they cannot see.
+ *
+ * Composed for you by `<ChartControls>`; reach for it directly only when you
+ * are building a chart root of your own.
+ *
+ * @example
+ * <ChartToolbar
+ *   targetRef={plotRef}
+ *   title="Visitors per day"
+ *   rows={data}
+ *   columns={columns}
+ *   zoomState={zoom}
+ *   exports={['png', 'csv']}
+ * />
+ */
+declare function ChartToolbar({ targetRef, title, rows, columns, zoomState, exports, zoom, filename, align, onExport, onExportError, className, }: ChartToolbarProps): react.JSX.Element | null;
+interface ChartControlsProps {
+    /** The composed `<Chart.Toolbar>` props, or null when the chart has none. */
+    toolbar: ToolbarProps | null;
+    /** The window the toolbar and the plot both drive. */
+    zoom: ChartZoom;
+    /** The figure's title. */
+    title: string;
+    /** The whole dataset — what a CSV export writes, zoomed or not. */
+    rows: Record<string, unknown>[];
+    /** The series columns, in ramp order. */
+    columns: ChartColumn[];
+    /** The row field naming each row. Written as the CSV's first column. */
+    rowKey?: string;
+    /** The plot. */
+    children: ReactNode;
+}
+/**
+ * The toolbar, the plot, and the wiring between them.
+ *
+ * One component rather than four copies of the same six lines, because every
+ * chart that carries a toolbar needs the identical arrangement: the row above,
+ * the zoom surface around the plot, and one ref shared between them so the PNG
+ * export reads the measured box rather than a guess.
+ *
+ * With no `<Chart.Toolbar>` composed it renders its children untouched — a
+ * chart that did not ask for a toolbar gets no extra element, no extra tab
+ * stop, and the layout it had before.
+ */
+declare function ChartControls({ toolbar, zoom, title, rows, columns, rowKey, children, }: ChartControlsProps): react.JSX.Element;
+
+export { ChartControls, type ChartControlsProps, type ChartExportFormat, ChartToolbar, type ChartToolbarProps, Toolbar, type ToolbarProps };

package/dist/charts/lib/toolbar.js

@@ -0,0 +1,156 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { RiFileDownloadLine, RiImageDownloadLine, RiResetLeftLine, RiZoomInLine, RiZoomOutLine } from "@remixicon/react";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../../components/Button/Button.js";
+import { chartToCsv, chartToPng, downloadBlob, exportFilename } from "./export.js";
+import { ChartZoomSurface } from "./zoom.js";
+const Toolbar = () => null;
+function ChartToolbar({
+  targetRef,
+  title,
+  rows,
+  columns,
+  zoomState,
+  exports = ["png", "csv"],
+  zoom = true,
+  filename,
+  align = "end",
+  onExport,
+  onExportError,
+  className
+}) {
+  const [busy, setBusy] = useState(null);
+  const runExport = async (format) => {
+    setBusy(format);
+    try {
+      if (format === "csv") {
+        const csv = chartToCsv(rows, columns);
+        const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+        downloadBlob(blob, exportFilename(filename ?? title, "csv"));
+      } else {
+        const element = targetRef.current;
+        if (!element) throw new Error("chart toolbar: the plot is not on the page yet");
+        downloadBlob(
+          await chartToPng(element, { title }),
+          exportFilename(filename ?? title, "png")
+        );
+      }
+      onExport?.(format);
+    } catch (cause) {
+      const error = cause instanceof Error ? cause : new Error(String(cause));
+      if (onExportError) onExportError(error);
+      else console.error(error);
+    } finally {
+      setBusy(null);
+    }
+  };
+  const controls = [];
+  if (zoom) {
+    controls.push(
+      {
+        id: "zoom-in",
+        label: "Zoom in",
+        icon: RiZoomInLine,
+        disabled: !zoomState.canZoomIn,
+        run: () => zoomState.zoomIn()
+      },
+      {
+        id: "zoom-out",
+        label: "Zoom out",
+        icon: RiZoomOutLine,
+        disabled: !zoomState.canZoomOut,
+        run: () => zoomState.zoomOut()
+      },
+      {
+        id: "reset",
+        label: "Reset zoom",
+        icon: RiResetLeftLine,
+        disabled: !zoomState.isZoomed,
+        run: () => zoomState.reset()
+      }
+    );
+  }
+  if (exports.includes("png")) {
+    controls.push({
+      id: "png",
+      label: "Download PNG",
+      icon: RiImageDownloadLine,
+      busy: busy === "png",
+      disabled: busy !== null,
+      run: () => void runExport("png")
+    });
+  }
+  if (exports.includes("csv")) {
+    controls.push({
+      id: "csv",
+      label: "Download CSV",
+      icon: RiFileDownloadLine,
+      busy: busy === "csv",
+      disabled: busy !== null,
+      run: () => void runExport("csv")
+    });
+  }
+  if (controls.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": `${title} \u2014 chart controls`,
+      className: cn(
+        "flex items-center gap-1",
+        align === "end" ? "justify-end" : "justify-start",
+        className
+      ),
+      children: controls.map((control) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          iconOnly: true,
+          variant: "ghost",
+          size: "md",
+          "aria-label": control.label,
+          title: control.label,
+          disabled: control.disabled,
+          loading: control.busy,
+          onClick: control.run,
+          children: control.busy ? null : /* @__PURE__ */ jsx(control.icon, { size: 16, "aria-hidden": true })
+        },
+        control.id
+      ))
+    }
+  );
+}
+function ChartControls({
+  toolbar,
+  zoom,
+  title,
+  rows,
+  columns,
+  rowKey,
+  children
+}) {
+  const plotRef = useRef(null);
+  if (!toolbar) return /* @__PURE__ */ jsx(Fragment, { children });
+  const csvColumns = rowKey ? [{ key: rowKey, label: rowKey }, ...columns] : columns;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-full flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx(
+      ChartToolbar,
+      {
+        ...toolbar,
+        targetRef: plotRef,
+        title,
+        rows,
+        columns: csvColumns,
+        zoomState: zoom
+      }
+    ),
+    /* @__PURE__ */ jsx(ChartZoomSurface, { ref: plotRef, zoom, label: title, enabled: toolbar.zoom !== false, children })
+  ] });
+}
+export {
+  ChartControls,
+  ChartToolbar,
+  Toolbar
+};
+//# sourceMappingURL=toolbar.js.map

package/dist/charts/lib/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/toolbar.tsx"],"sourcesContent":["'use client'\n\nimport { useRef, useState, type FC, type ReactNode, type RefObject } from 'react'\nimport { RiFileDownloadLine, RiImageDownloadLine, RiResetLeftLine, RiZoomInLine, RiZoomOutLine, type RemixiconComponentType } from '@remixicon/react'\nimport { cn } from '../../lib/cn'\nimport { Button } from '../../components/Button/Button'\nimport { chartToCsv, chartToPng, downloadBlob, exportFilename } from './export'\nimport { ChartZoomSurface, type ChartZoom } from './zoom'\nimport type { ChartColumn } from './figure'\n\n/** Which file a reader can take away. */\nexport type ChartExportFormat = 'png' | 'csv'\n\nexport interface ToolbarProps {\n  /**\n   * Which files the toolbar offers. `[]` drops the export controls and leaves\n   * a zoom-only toolbar.\n   */\n  exports?: ChartExportFormat[]\n  /**\n   * Off leaves only the export controls, and the plot stops responding to the\n   * wheel, to a drag and to the keyboard. For a chart whose x axis is a handful\n   * of categories, where there is nothing to zoom into.\n   */\n  zoom?: boolean\n  /** Base name for a downloaded file. Defaults to the figure's title. */\n  filename?: string\n  /** Which end of the plot the row sits at. */\n  align?: 'start' | 'end'\n  /** Fires after a file has been handed to the browser. */\n  onExport?: (format: ChartExportFormat) => void\n  /**\n   * Fires when an export fails — a chart that has not been measured yet, or a\n   * canvas tainted by a cross-origin image. Without it the error is logged,\n   * because a download that silently does nothing is the worst of the three.\n   */\n  onExportError?: (error: Error) => void\n}\n\n/**\n * Declares the toolbar above a chart: zoom, reset, and taking the figure away\n * as a PNG or a CSV.\n *\n * Renders nothing itself — its PRESENCE among the chart's children turns the\n * toolbar on, and its props configure it, the same shape `<Chart.Brush>` uses.\n * The toolbar is also what switches the plot's own zoom gestures on, so a chart\n * that composes it becomes wheel-, drag- and keyboard-zoomable at the same\n * time.\n *\n * Reach for `<Chart.Brush>` INSTEAD when the reader needs to see the whole\n * series while choosing a slice of it; reach for both when they need to do that\n * and also step the zoom or take the numbers away. The two drive one window, so\n * they cannot disagree.\n *\n * @example\n * <LineChart title=\"Visitors per day\" config={config} data={data} xDataKey=\"day\">\n *   <LineChart.Toolbar exports={['png', 'csv']} />\n *   <LineChart.XAxis dataKey=\"day\" />\n *   <LineChart.Line dataKey=\"desktop\" />\n * </LineChart>\n */\nexport const Toolbar: FC<ToolbarProps> = () => null\n\n/** One button on the row, or one row in the overflow menu. */\ninterface ToolbarControl {\n  id: string\n  /** The accessible name, the tooltip, and the menu row's text. One string. */\n  label: string\n  icon: RemixiconComponentType\n  disabled?: boolean\n  busy?: boolean\n  run: () => void\n}\n\nexport interface ChartToolbarProps extends ToolbarProps {\n  /** The element the PNG export reads the plot out of. */\n  targetRef: RefObject<HTMLElement | null>\n  /** The figure's title: the toolbar's name, the PNG's caption, the filename. */\n  title: string\n  /** The rows a CSV export writes. */\n  rows: Record<string, unknown>[]\n  /** The columns a CSV export writes, in order. */\n  columns: ChartColumn[]\n  /** The window these controls drive. */\n  zoomState: ChartZoom\n  className?: string\n}\n\n/**\n * The row of controls above a plot.\n *\n * A `group` rather than a `toolbar`: the toolbar role promises roving\n * tabindex, and a row of five ordinary buttons that each take a tab stop is\n * both simpler and correct. Every control is a real `<button>` with a real\n * accessible name, repeated as a native `title` for sighted pointer users.\n *\n * There are five controls at most and no overflow menu, which is a size\n * decision as much as a design one: a row that can never exceed five 44px\n * targets does not need one, and the menu component it would take is Radix\n * Menu — around 60 kB that every consumer of every cartesian chart would ship\n * whether or not they compose a toolbar, because the chart reaches it\n * statically. A caller with less width drops controls (`zoom={false}`,\n * `exports={['csv']}`) rather than hiding them behind a second gesture. The\n * hover hints come off the native `title` for the same reason.\n *\n * Sized `md`, which is 44px at the default density. An icon button is exactly\n * the control where the pointer-target floor is most often quietly missed.\n *\n * ## What each export contains\n *\n * The PNG is a picture of the plot, so it shows the CURRENT window — zoom in\n * and the export follows. The CSV is the whole dataset, like the figure's\n * hidden data table, because a spreadsheet silently missing the rows the\n * reader had scrolled past is data loss they cannot see.\n *\n * Composed for you by `<ChartControls>`; reach for it directly only when you\n * are building a chart root of your own.\n *\n * @example\n * <ChartToolbar\n *   targetRef={plotRef}\n *   title=\"Visitors per day\"\n *   rows={data}\n *   columns={columns}\n *   zoomState={zoom}\n *   exports={['png', 'csv']}\n * />\n */\nexport function ChartToolbar({\n  targetRef,\n  title,\n  rows,\n  columns,\n  zoomState,\n  exports = ['png', 'csv'],\n  zoom = true,\n  filename,\n  align = 'end',\n  onExport,\n  onExportError,\n  className,\n}: ChartToolbarProps) {\n  const [busy, setBusy] = useState<ChartExportFormat | null>(null)\n\n  const runExport = async (format: ChartExportFormat) => {\n    setBusy(format)\n    try {\n      if (format === 'csv') {\n        const csv = chartToCsv(rows, columns)\n        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })\n        downloadBlob(blob, exportFilename(filename ?? title, 'csv'))\n      } else {\n        const element = targetRef.current\n        if (!element) throw new Error('chart toolbar: the plot is not on the page yet')\n        downloadBlob(\n          await chartToPng(element, { title }),\n          exportFilename(filename ?? title, 'png'),\n        )\n      }\n      onExport?.(format)\n    } catch (cause) {\n      const error = cause instanceof Error ? cause : new Error(String(cause))\n      // Never swallowed: the reader clicked a download and something has to\n      // say it did not arrive.\n      if (onExportError) onExportError(error)\n      else console.error(error)\n    } finally {\n      setBusy(null)\n    }\n  }\n\n  const controls: ToolbarControl[] = []\n\n  if (zoom) {\n    controls.push(\n      {\n        id: 'zoom-in',\n        label: 'Zoom in',\n        icon: RiZoomInLine,\n        disabled: !zoomState.canZoomIn,\n        run: () => zoomState.zoomIn(),\n      },\n      {\n        id: 'zoom-out',\n        label: 'Zoom out',\n        icon: RiZoomOutLine,\n        disabled: !zoomState.canZoomOut,\n        run: () => zoomState.zoomOut(),\n      },\n      {\n        id: 'reset',\n        label: 'Reset zoom',\n        icon: RiResetLeftLine,\n        disabled: !zoomState.isZoomed,\n        run: () => zoomState.reset(),\n      },\n    )\n  }\n\n  if (exports.includes('png')) {\n    controls.push({\n      id: 'png',\n      label: 'Download PNG',\n      icon: RiImageDownloadLine,\n      busy: busy === 'png',\n      disabled: busy !== null,\n      run: () => void runExport('png'),\n    })\n  }\n\n  if (exports.includes('csv')) {\n    controls.push({\n      id: 'csv',\n      label: 'Download CSV',\n      icon: RiFileDownloadLine,\n      busy: busy === 'csv',\n      disabled: busy !== null,\n      run: () => void runExport('csv'),\n    })\n  }\n\n  if (controls.length === 0) return null\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={`${title} — chart controls`}\n      className={cn(\n        'flex items-center gap-1',\n        align === 'end' ? 'justify-end' : 'justify-start',\n        className,\n      )}\n    >\n      {controls.map((control) => (\n        <Button\n          key={control.id}\n          iconOnly\n          variant=\"ghost\"\n          size=\"md\"\n          aria-label={control.label}\n          // The same string again as a native hint. `aria-label` is what a\n          // screen reader announces and `title` is what a pointer user sees;\n          // both read the one label, so they cannot drift apart.\n          title={control.label}\n          disabled={control.disabled}\n          loading={control.busy}\n          onClick={control.run}\n        >\n          {/* Dropped while the spinner is up, so a 44px square never holds\n              two glyphs at once. */}\n          {control.busy ? null : <control.icon size={16} aria-hidden />}\n        </Button>\n      ))}\n    </div>\n  )\n}\n\nexport interface ChartControlsProps {\n  /** The composed `<Chart.Toolbar>` props, or null when the chart has none. */\n  toolbar: ToolbarProps | null\n  /** The window the toolbar and the plot both drive. */\n  zoom: ChartZoom\n  /** The figure's title. */\n  title: string\n  /** The whole dataset — what a CSV export writes, zoomed or not. */\n  rows: Record<string, unknown>[]\n  /** The series columns, in ramp order. */\n  columns: ChartColumn[]\n  /** The row field naming each row. Written as the CSV's first column. */\n  rowKey?: string\n  /** The plot. */\n  children: ReactNode\n}\n\n/**\n * The toolbar, the plot, and the wiring between them.\n *\n * One component rather than four copies of the same six lines, because every\n * chart that carries a toolbar needs the identical arrangement: the row above,\n * the zoom surface around the plot, and one ref shared between them so the PNG\n * export reads the measured box rather than a guess.\n *\n * With no `<Chart.Toolbar>` composed it renders its children untouched — a\n * chart that did not ask for a toolbar gets no extra element, no extra tab\n * stop, and the layout it had before.\n */\nexport function ChartControls({\n  toolbar,\n  zoom,\n  title,\n  rows,\n  columns,\n  rowKey,\n  children,\n}: ChartControlsProps) {\n  const plotRef = useRef<HTMLDivElement>(null)\n\n  if (!toolbar) return <>{children}</>\n\n  // The category column first, matching the hidden data table: a CSV whose\n  // rows are unlabelled numbers is a CSV nobody can join anything to.\n  const csvColumns = rowKey ? [{ key: rowKey, label: rowKey }, ...columns] : columns\n\n  return (\n    <div className=\"flex min-h-0 w-full flex-1 flex-col\">\n      <ChartToolbar\n        {...toolbar}\n        targetRef={plotRef}\n        title={title}\n        rows={rows}\n        columns={csvColumns}\n        zoomState={zoom}\n      />\n      <ChartZoomSurface ref={plotRef} zoom={zoom} label={title} enabled={toolbar.zoom !== false}>\n        {children}\n      </ChartZoomSurface>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/charts/lib/tooltip.d.ts

@@ -0,0 +1,59 @@
+import * as react from 'react';
+import { ComponentProps, CSSProperties } from 'react';
+import { Tooltip, DefaultTooltipContentProps } from 'recharts';
+import { ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';
+
+/**
+ * The tooltip's corner, on the system's radius ladder.
+ *
+ * Three steps, not the four this was ported with: the ladder has four rungs and
+ * the fourth is the pill, which is a shape rather than a corner. An `xl` that
+ * resolved to "the same as lg, but 4px more" would be a fifth step invented for
+ * one component.
+ */
+type ChartTooltipRoundness = 'sm' | 'md' | 'lg';
+/** The tooltip's ground: the page's own, or a translucent plate over the plot. */
+type ChartTooltipVariant = 'solid' | 'frosted';
+/** How a series is marked beside its value. */
+type ChartTooltipIndicator = 'dot' | 'line' | 'dashed';
+interface ChartTooltipContentProps extends Omit<DefaultTooltipContentProps<ValueType, NameType>, 'accessibilityLayer' | 'formatter' | 'labelFormatter'>, Pick<ComponentProps<typeof Tooltip>, 'formatter' | 'labelFormatter' | 'active'> {
+    className?: string;
+    labelClassName?: string;
+    /** Drops the row of series marks, leaving only the label. */
+    hideIndicator?: boolean;
+    /** Drops the heading row — the date, the category. */
+    hideLabel?: boolean;
+    indicator?: ChartTooltipIndicator;
+    /** The row field holding a series name, when it is not the `dataKey`. */
+    nameKey?: string;
+    /** The row field holding the heading, when it is not the axis value. */
+    labelKey?: string;
+    /** The chart's selected series, so the tooltip dims the rest with the plot. */
+    selected?: string | null;
+    roundness?: ChartTooltipRoundness;
+    variant?: ChartTooltipVariant;
+}
+/**
+ * What the hover tooltip prints: a heading, then one row per series.
+ *
+ * Values are set in the mono face and `tabular-nums` so a column of numbers
+ * lines up as the pointer moves along the axis — without it the row width
+ * changes under the cursor and the reader chases it.
+ */
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, nameKey, labelKey, selected, roundness, variant, }: ChartTooltipContentProps): react.JSX.Element;
+/**
+ * The series swatch: one colour, or the same gradient the mark is painted with.
+ *
+ * A dashed indicator has no fill — it IS its border — so the paint moves to
+ * `borderColor`, which cannot take a gradient and takes the first stop instead.
+ */
+declare function swatchStyle(key: string, stops: number, dashed?: boolean): CSSProperties;
+/**
+ * The Recharts tooltip, with the system's timing.
+ *
+ * 200ms is short enough that the panel keeps up with a pointer travelling the
+ * axis, which is the whole failure mode a slower fade has.
+ */
+declare function ChartTooltip({ animationDuration, ...rest }: ComponentProps<typeof Tooltip>): react.JSX.Element;
+
+export { ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipIndicator, type ChartTooltipRoundness, type ChartTooltipVariant, swatchStyle };

package/dist/charts/lib/tooltip.js

@@ -0,0 +1,135 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Tooltip as RechartsTooltip } from "recharts";
+import { cn } from "../../lib/cn.js";
+import { colorStops, cssName, seriesFromPayload, useChart } from "./chart.js";
+const ROUNDNESS = {
+  sm: "rounded-(--radius-sm)",
+  md: "rounded-(--radius)",
+  lg: "rounded-(--radius-lg)"
+};
+const VARIANT = {
+  solid: "bg-(--chart-surface)",
+  // The one place the system reaches for a backdrop filter. It is not a shadow
+  // — law 2 bans blurred DEPTH — it is the plot showing through a plate that
+  // sits on it, which is why the plate still needs its hairline to read as one.
+  frosted: "bg-(--chart-surface)/75 backdrop-blur-sm"
+};
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  nameKey,
+  labelKey,
+  selected,
+  roundness = "lg",
+  variant = "solid"
+}) {
+  const { config } = useChart();
+  const heading = useMemo(() => {
+    if (hideLabel || !payload?.length) return null;
+    const [item] = payload;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+    const series = seriesFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : series?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium text-(--ink)", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) return null;
+    return /* @__PURE__ */ jsx("div", { className: cn("font-medium text-(--ink)", labelClassName), children: value });
+  }, [config, hideLabel, label, labelClassName, labelFormatter, labelKey, payload]);
+  if (!active || !payload?.length) return /* @__PURE__ */ jsx("span", { className: "p-4" });
+  const nested = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid min-w-32 items-start gap-1.5 border border-(--rule-2) px-2.5 py-1.5 text-xs",
+        ROUNDNESS[roundness],
+        VARIANT[variant],
+        className
+      ),
+      children: [
+        !nested ? heading : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+          const named = nameKey && item.payload ? item.payload[nameKey] : void 0;
+          const key = `${named ?? item.name ?? item.dataKey ?? "value"}`;
+          const series = seriesFromPayload(config, item, key);
+          const stops = colorStops(series);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-(--ink-3-aa)",
+                indicator === "dot" && "items-center",
+                selected != null && selected !== item.dataKey && "opacity-30"
+              ),
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                series?.icon ? /* @__PURE__ */ jsx(series.icon, { "aria-hidden": true }) : !hideIndicator && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: cn("shrink-0 rounded-[2px]", {
+                      "size-2.5": indicator === "dot",
+                      "w-1": indicator === "line",
+                      "w-0 border-[1.5px] border-dashed bg-transparent!": indicator === "dashed",
+                      "my-0.5": nested && indicator === "dashed"
+                    }),
+                    style: swatchStyle(key, stops, indicator === "dashed")
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between gap-4 leading-none",
+                      nested ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        nested ? heading : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-(--ink-3-aa)", children: series?.label ?? item.name })
+                      ] }),
+                      item.value != null && /* @__PURE__ */ jsx("span", { className: "font-mono font-medium tabular-nums text-(--ink)", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
+                    ]
+                  }
+                )
+              ] })
+            },
+            index
+          );
+        }) })
+      ]
+    }
+  );
+}
+function swatchStyle(key, stops, dashed = false) {
+  const name = cssName(key);
+  if (dashed) return { borderColor: `var(--color-${name}-0)` };
+  if (stops <= 1) return { background: `var(--color-${name}-0)` };
+  const gradient = Array.from({ length: stops }, (_, index) => {
+    const offset = index / (stops - 1) * 100;
+    return `var(--color-${name}-${index}) ${offset}%`;
+  }).join(", ");
+  return { background: `linear-gradient(to right, ${gradient})` };
+}
+function ChartTooltip({
+  animationDuration = 200,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(RechartsTooltip, { animationDuration, ...rest });
+}
+export {
+  ChartTooltip,
+  ChartTooltipContent,
+  swatchStyle
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/charts/lib/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/tooltip.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type ComponentProps, type CSSProperties } from 'react'\nimport { Tooltip as RechartsTooltip } from 'recharts'\nimport type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'\nimport type { DefaultTooltipContentProps } from 'recharts'\nimport { cn } from '../../lib/cn'\nimport { colorStops, cssName, seriesFromPayload, useChart } from './chart'\n\n/**\n * The tooltip's corner, on the system's radius ladder.\n *\n * Three steps, not the four this was ported with: the ladder has four rungs and\n * the fourth is the pill, which is a shape rather than a corner. An `xl` that\n * resolved to \"the same as lg, but 4px more\" would be a fifth step invented for\n * one component.\n */\nexport type ChartTooltipRoundness = 'sm' | 'md' | 'lg'\n\n/** The tooltip's ground: the page's own, or a translucent plate over the plot. */\nexport type ChartTooltipVariant = 'solid' | 'frosted'\n\n/** How a series is marked beside its value. */\nexport type ChartTooltipIndicator = 'dot' | 'line' | 'dashed'\n\nconst ROUNDNESS: Record<ChartTooltipRoundness, string> = {\n  sm: 'rounded-(--radius-sm)',\n  md: 'rounded-(--radius)',\n  lg: 'rounded-(--radius-lg)',\n}\n\nconst VARIANT: Record<ChartTooltipVariant, string> = {\n  solid: 'bg-(--chart-surface)',\n  // The one place the system reaches for a backdrop filter. It is not a shadow\n  // — law 2 bans blurred DEPTH — it is the plot showing through a plate that\n  // sits on it, which is why the plate still needs its hairline to read as one.\n  frosted: 'bg-(--chart-surface)/75 backdrop-blur-sm',\n}\n\nexport interface ChartTooltipContentProps\n  extends Omit<\n      DefaultTooltipContentProps<ValueType, NameType>,\n      'accessibilityLayer' | 'formatter' | 'labelFormatter'\n    >,\n    Pick<ComponentProps<typeof RechartsTooltip>, 'formatter' | 'labelFormatter' | 'active'> {\n  className?: string\n  labelClassName?: string\n  /** Drops the row of series marks, leaving only the label. */\n  hideIndicator?: boolean\n  /** Drops the heading row — the date, the category. */\n  hideLabel?: boolean\n  indicator?: ChartTooltipIndicator\n  /** The row field holding a series name, when it is not the `dataKey`. */\n  nameKey?: string\n  /** The row field holding the heading, when it is not the axis value. */\n  labelKey?: string\n  /** The chart's selected series, so the tooltip dims the rest with the plot. */\n  selected?: string | null\n  roundness?: ChartTooltipRoundness\n  variant?: ChartTooltipVariant\n}\n\n/**\n * What the hover tooltip prints: a heading, then one row per series.\n *\n * Values are set in the mono face and `tabular-nums` so a column of numbers\n * lines up as the pointer moves along the axis — without it the row width\n * changes under the cursor and the reader chases it.\n */\nexport function ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = 'dot',\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  nameKey,\n  labelKey,\n  selected,\n  roundness = 'lg',\n  variant = 'solid',\n}: ChartTooltipContentProps) {\n  const { config } = useChart()\n\n  const heading = useMemo(() => {\n    if (hideLabel || !payload?.length) return null\n\n    const [item] = payload\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`\n    const series = seriesFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === 'string' ? (config[label]?.label ?? label) : series?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn('font-medium text-(--ink)', labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n    if (!value) return null\n    return <div className={cn('font-medium text-(--ink)', labelClassName)}>{value}</div>\n  }, [config, hideLabel, label, labelClassName, labelFormatter, labelKey, payload])\n\n  // An empty span rather than null: returning nothing lets Recharts reset the\n  // tooltip's position to the origin, so the next hover animates in from the\n  // top-left corner of the chart instead of from where the pointer is.\n  if (!active || !payload?.length) return <span className=\"p-4\" />\n\n  const nested = payload.length === 1 && indicator !== 'dot'\n\n  return (\n    <div\n      className={cn(\n        'grid min-w-32 items-start gap-1.5 border border-(--rule-2) px-2.5 py-1.5 text-xs',\n        ROUNDNESS[roundness],\n        VARIANT[variant],\n        className,\n      )}\n    >\n      {!nested ? heading : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== 'none')\n          .map((item, index) => {\n            const named =\n              nameKey && item.payload\n                ? (item.payload as Record<string, unknown>)[nameKey]\n                : undefined\n            const key = `${named ?? item.name ?? item.dataKey ?? 'value'}`\n            const series = seriesFromPayload(config, item, key)\n            const stops = colorStops(series)\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-(--ink-3-aa)',\n                  indicator === 'dot' && 'items-center',\n                  selected != null && selected !== item.dataKey && 'opacity-30',\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, payload)\n                ) : (\n                  <>\n                    {series?.icon ? (\n                      <series.icon aria-hidden />\n                    ) : (\n                      !hideIndicator && (\n                        <span\n                          aria-hidden\n                          className={cn('shrink-0 rounded-[2px]', {\n                            'size-2.5': indicator === 'dot',\n                            'w-1': indicator === 'line',\n                            'w-0 border-[1.5px] border-dashed bg-transparent!':\n                              indicator === 'dashed',\n                            'my-0.5': nested && indicator === 'dashed',\n                          })}\n                          style={swatchStyle(key, stops, indicator === 'dashed')}\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        'flex flex-1 justify-between gap-4 leading-none',\n                        nested ? 'items-end' : 'items-center',\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nested ? heading : null}\n                        <span className=\"text-(--ink-3-aa)\">{series?.label ?? item.name}</span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium tabular-nums text-(--ink)\">\n                          {typeof item.value === 'number'\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * The series swatch: one colour, or the same gradient the mark is painted with.\n *\n * A dashed indicator has no fill — it IS its border — so the paint moves to\n * `borderColor`, which cannot take a gradient and takes the first stop instead.\n */\nexport function swatchStyle(key: string, stops: number, dashed = false): CSSProperties {\n  const name = cssName(key)\n  if (dashed) return { borderColor: `var(--color-${name}-0)` }\n  if (stops <= 1) return { background: `var(--color-${name}-0)` }\n\n  const gradient = Array.from({ length: stops }, (_, index) => {\n    const offset = (index / (stops - 1)) * 100\n    return `var(--color-${name}-${index}) ${offset}%`\n  }).join(', ')\n\n  // `to right` rather than a logical direction: the swatch mirrors the mark's\n  // own gradient, and the mark is painted in SVG user space, which does not\n  // flip with the document.\n  return { background: `linear-gradient(to right, ${gradient})` }\n}\n\n/**\n * The Recharts tooltip, with the system's timing.\n *\n * 200ms is short enough that the panel keeps up with a pointer travelling the\n * axis, which is the whole failure mode a slower fade has.\n */\nexport function ChartTooltip({\n  animationDuration = 200,\n  ...rest\n}: ComponentProps<typeof RechartsTooltip>) {\n  return <RechartsTooltip animationDuration={animationDuration} {...rest} />\n}\n"],"mappings":"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","names":[]}

package/dist/charts/lib/values.d.ts

@@ -0,0 +1,56 @@
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+
+/**
+ * The props of the first child of a given type, or null.
+ *
+ * Every configuration slot in the package is read this way — a component that
+ * renders nothing, whose PROPS are the configuration. It reads better at the
+ * call site than a prop bag (`<Chart.Values show="last" />` beside the mark it
+ * labels, rather than `valuesShow="last"` on the mark) and it keeps the marks'
+ * prop lists from growing a section per optional decoration.
+ */
+declare function findSlot<TProps>(children: ReactNode, type: unknown): TProps | null;
+/**
+ * Which points get their number printed.
+ *
+ * The default is `last`, and the default matters more here than usual: a
+ * number on every point is the most common way a chart is spoiled, because the
+ * labels then compete with the shape they are annotating and the reader loses
+ * both. What a reader almost always wants is the number they would otherwise
+ * have to trace back to the axis for — the latest value, or the two ends.
+ *
+ * `all` exists for the case it is right for: five or six bars, no line, and the
+ * exact figures ARE the point. Past that it is a table wearing a chart.
+ */
+type ValueLabelMode = 'all' | 'first' | 'last' | 'first-last' | 'extremes';
+interface ValuesProps {
+    /** Which points are labelled. */
+    show?: ValueLabelMode;
+    /** Formats each number. Defaults to the axis's own compact formatting. */
+    formatValue?: (value: number) => string;
+    /** Where the label sits relative to its point. */
+    position?: 'top' | 'bottom' | 'inside' | 'right';
+}
+/**
+ * Prints the numbers on a series.
+ *
+ * A slot: it renders nothing itself, and the mark it is composed inside reads
+ * its props.
+ *
+ * @example
+ * <BarChart.Bar dataKey="visitors">
+ *   <BarChart.Values show="all" />
+ * </BarChart.Bar>
+ */
+declare const Values: FC<ValuesProps>;
+/**
+ * Turns a composed `<Values>` slot into a Recharts label list.
+ *
+ * `values` is the whole series, needed because `extremes` cannot be decided
+ * one point at a time — and Recharts hands a label renderer one point at a
+ * time.
+ */
+declare function resolveValues(slot: ValuesProps | null, values: number[], fallbackPosition?: ValuesProps['position']): react.JSX.Element | null;
+
+export { type ValueLabelMode, Values, type ValuesProps, findSlot, resolveValues };