@misoto22/design 0.3.1 → 0.6.0

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, {}) : !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 />\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 };

package/dist/charts/lib/values.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { LabelList } from "recharts";
+import { defaultTick } from "./format.js";
+function findSlot(children, type) {
+  let found = null;
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === type) {
+      found = child.props;
+    }
+  });
+  return found;
+}
+const Values = () => null;
+function shows(mode, index, count, value, values) {
+  switch (mode) {
+    case "all":
+      return true;
+    case "first":
+      return index === 0;
+    case "first-last":
+      return index === 0 || index === count - 1;
+    case "extremes": {
+      const min = Math.min(...values);
+      const max = Math.max(...values);
+      return value === min || value === max;
+    }
+    default:
+      return index === count - 1;
+  }
+}
+function resolveValues(slot, values, fallbackPosition = "top") {
+  if (!slot) return null;
+  const mode = slot.show ?? "last";
+  const format = slot.formatValue ?? defaultTick;
+  const count = values.length;
+  return /* @__PURE__ */ jsx(
+    LabelList,
+    {
+      position: slot.position ?? fallbackPosition,
+      offset: 8,
+      content: (raw) => {
+        const props = raw;
+        const index = props.index ?? -1;
+        const value = Number(props.value);
+        if (index < 0 || !Number.isFinite(value)) return null;
+        if (!shows(mode, index, count, value, values)) return null;
+        const x = Number(props.x ?? 0) + Number(props.width ?? 0) / 2;
+        const y = Number(props.y ?? 0) - 6;
+        return /* @__PURE__ */ jsx(
+          "text",
+          {
+            x,
+            y,
+            textAnchor: "middle",
+            className: "fill-(--ink) font-mono text-[11px] font-medium tabular-nums",
+            style: { pointerEvents: "none" },
+            children: format(value)
+          }
+        );
+      }
+    }
+  );
+}
+export {
+  Values,
+  findSlot,
+  resolveValues
+};
+//# sourceMappingURL=values.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/values.tsx"],"sourcesContent":["'use client'\n\nimport { Children, isValidElement, type FC, type ReactElement, type ReactNode } from 'react'\nimport { LabelList } from 'recharts'\nimport { defaultTick } from './format'\n\n/**\n * The props of the first child of a given type, or null.\n *\n * Every configuration slot in the package is read this way — a component that\n * renders nothing, whose PROPS are the configuration. It reads better at the\n * call site than a prop bag (`<Chart.Values show=\"last\" />` beside the mark it\n * labels, rather than `valuesShow=\"last\"` on the mark) and it keeps the marks'\n * prop lists from growing a section per optional decoration.\n */\nexport function findSlot<TProps>(children: ReactNode, type: unknown): TProps | null {\n  let found: TProps | null = null\n  Children.forEach(children, (child) => {\n    if (isValidElement(child) && child.type === type) {\n      found = (child as ReactElement<TProps>).props\n    }\n  })\n  return found\n}\n\n/**\n * Which points get their number printed.\n *\n * The default is `last`, and the default matters more here than usual: a\n * number on every point is the most common way a chart is spoiled, because the\n * labels then compete with the shape they are annotating and the reader loses\n * both. What a reader almost always wants is the number they would otherwise\n * have to trace back to the axis for — the latest value, or the two ends.\n *\n * `all` exists for the case it is right for: five or six bars, no line, and the\n * exact figures ARE the point. Past that it is a table wearing a chart.\n */\nexport type ValueLabelMode = 'all' | 'first' | 'last' | 'first-last' | 'extremes'\n\nexport interface ValuesProps {\n  /** Which points are labelled. */\n  show?: ValueLabelMode\n  /** Formats each number. Defaults to the axis's own compact formatting. */\n  formatValue?: (value: number) => string\n  /** Where the label sits relative to its point. */\n  position?: 'top' | 'bottom' | 'inside' | 'right'\n}\n\n/**\n * Prints the numbers on a series.\n *\n * A slot: it renders nothing itself, and the mark it is composed inside reads\n * its props.\n *\n * @example\n * <BarChart.Bar dataKey=\"visitors\">\n *   <BarChart.Values show=\"all\" />\n * </BarChart.Bar>\n */\nexport const Values: FC<ValuesProps> = () => null\n\n/** Whether the point at `index` is one of the labelled ones. */\nfunction shows(mode: ValueLabelMode, index: number, count: number, value: number, values: number[]): boolean {\n  switch (mode) {\n    case 'all':\n      return true\n    case 'first':\n      return index === 0\n    case 'first-last':\n      return index === 0 || index === count - 1\n    case 'extremes': {\n      // The min and the max, which is what \"which was the worst month\" asks\n      // for and what an axis cannot answer without counting gridlines.\n      const min = Math.min(...values)\n      const max = Math.max(...values)\n      return value === min || value === max\n    }\n    default:\n      return index === count - 1\n  }\n}\n\n/**\n * Turns a composed `<Values>` slot into a Recharts label list.\n *\n * `values` is the whole series, needed because `extremes` cannot be decided\n * one point at a time — and Recharts hands a label renderer one point at a\n * time.\n */\nexport function resolveValues(\n  slot: ValuesProps | null,\n  values: number[],\n  fallbackPosition: ValuesProps['position'] = 'top',\n) {\n  if (!slot) return null\n\n  const mode = slot.show ?? 'last'\n  const format = slot.formatValue ?? defaultTick\n  const count = values.length\n\n  return (\n    <LabelList\n      position={slot.position ?? fallbackPosition}\n      offset={8}\n      content={(raw) => {\n        // Recharts types x/y/width as `string | number`, because a label can be\n        // positioned in percentages. Everything that reaches this renderer is\n        // resolved geometry, so the coercion is the honest read.\n        const props = raw as {\n          index?: number\n          value?: unknown\n          x?: string | number\n          y?: string | number\n          width?: string | number\n        }\n        const index = props.index ?? -1\n        const value = Number(props.value)\n        if (index < 0 || !Number.isFinite(value)) return null\n        if (!shows(mode, index, count, value, values)) return null\n\n        const x = Number(props.x ?? 0) + Number(props.width ?? 0) / 2\n        const y = Number(props.y ?? 0) - 6\n\n        return (\n          <text\n            x={x}\n            y={y}\n            textAnchor=\"middle\"\n            // Mono and tabular, like every other number in the system: a column\n            // of labels that jitters as the digits change reads as noise.\n            className=\"fill-(--ink) font-mono text-[11px] font-medium tabular-nums\"\n            style={{ pointerEvents: 'none' }}\n          >\n            {format(value)}\n          </text>\n        )\n      }}\n    />\n  )\n}\n"],"mappings":";AA4HU;AA1HV,SAAS,UAAU,sBAAkE;AACrF,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAWrB,SAAS,SAAiB,UAAqB,MAA8B;AAClF,MAAI,QAAuB;AAC3B,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;AAChD,cAAS,MAA+B;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAoCO,MAAM,SAA0B,MAAM;AAG7C,SAAS,MAAM,MAAsB,OAAe,OAAe,OAAe,QAA2B;AAC3G,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO,UAAU;AAAA,IACnB,KAAK;AACH,aAAO,UAAU,KAAK,UAAU,QAAQ;AAAA,IAC1C,KAAK,YAAY;AAGf,YAAM,MAAM,KAAK,IAAI,GAAG,MAAM;AAC9B,YAAM,MAAM,KAAK,IAAI,GAAG,MAAM;AAC9B,aAAO,UAAU,OAAO,UAAU;AAAA,IACpC;AAAA,IACA;AACE,aAAO,UAAU,QAAQ;AAAA,EAC7B;AACF;AASO,SAAS,cACd,MACA,QACA,mBAA4C,OAC5C;AACA,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,OAAO,KAAK,QAAQ;AAC1B,QAAM,SAAS,KAAK,eAAe;AACnC,QAAM,QAAQ,OAAO;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAS,CAAC,QAAQ;AAIhB,cAAM,QAAQ;AAOd,cAAM,QAAQ,MAAM,SAAS;AAC7B,cAAM,QAAQ,OAAO,MAAM,KAAK;AAChC,YAAI,QAAQ,KAAK,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO;AACjD,YAAI,CAAC,MAAM,MAAM,OAAO,OAAO,OAAO,MAAM,EAAG,QAAO;AAEtD,cAAM,IAAI,OAAO,MAAM,KAAK,CAAC,IAAI,OAAO,MAAM,SAAS,CAAC,IAAI;AAC5D,cAAM,IAAI,OAAO,MAAM,KAAK,CAAC,IAAI;AAEjC,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,YAAW;AAAA,YAGX,WAAU;AAAA,YACV,OAAO,EAAE,eAAe,OAAO;AAAA,YAE9B,iBAAO,KAAK;AAAA;AAAA,QACf;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,139 @@
+import * as react from 'react';
+import { RefObject, ReactNode } from 'react';
+import { ChartBrushRange } from './brush.js';
+import 'recharts';
+import './chart.js';
+
+/**
+ * A range pulled back inside the data, with the minimum span enforced.
+ *
+ * Every other function here ends by calling this, so an inverted range, an
+ * index past the end and a window narrower than `minSpan` all have exactly one
+ * definition of what they become.
+ */
+declare function clampWindow(range: ChartBrushRange, total: number, minSpan?: number): ChartBrushRange;
+/**
+ * The window after one zoom step.
+ *
+ * `factor` below 1 closes the window and above 1 opens it. `anchor` is the row
+ * index that must stay where it is on screen — the pointer's row for a wheel
+ * zoom, the window's own centre for a button — because a zoom that re-centres
+ * is a zoom that loses the point the reader was looking at.
+ *
+ * The span is floored when closing and ceiled when opening rather than rounded
+ * in both directions, so a step always moves: rounding leaves a three-row
+ * window stuck at three when the step is a half.
+ */
+declare function zoomWindow(range: ChartBrushRange, total: number, factor: number, minSpan?: number, anchor?: number): ChartBrushRange;
+/**
+ * The window slid along by `delta` rows, keeping its span.
+ *
+ * At either end it stops rather than shrinking. A pan that narrowed itself
+ * against the edge would change the scale under the reader, which is a
+ * different gesture from the one they made.
+ */
+declare function panWindow(range: ChartBrushRange, total: number, delta: number): ChartBrushRange;
+interface ChartZoomOptions<TData extends Record<string, unknown>> {
+    /** The whole dataset. The window is expressed as indexes into it. */
+    data: TData[];
+    /** The row field behind a row's name, used by the spoken window description. */
+    xDataKey?: keyof TData & string;
+    /** The fewest rows a zoom will leave on screen. */
+    minSpan?: number;
+    /** The fraction of the window one zoom step keeps. */
+    step?: number;
+    /** Fires whenever the window changes, from any of the four inputs. */
+    onZoomChange?: (range: ChartBrushRange) => void;
+}
+interface ChartZoom<TData extends Record<string, unknown> = Record<string, unknown>> {
+    /** The rows on screen, as indexes into the whole dataset. */
+    range: ChartBrushRange;
+    /** The rows the plot should draw. */
+    visibleData: TData[];
+    /** Whether anything is hidden — what "reset zoom" is enabled by. */
+    isZoomed: boolean;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+    /** Closes the window one step around `anchor`, or around its own centre. */
+    zoomIn: (anchor?: number) => void;
+    /** Opens the window one step around `anchor`, or around its own centre. */
+    zoomOut: (anchor?: number) => void;
+    /** Back to the whole dataset. */
+    reset: () => void;
+    /** Slides the window by a number of rows, keeping its span. */
+    panBy: (delta: number) => void;
+    /** Jumps straight to a window — what a drag across the plot commits. */
+    zoomTo: (range: ChartBrushRange) => void;
+    /** How many rows there are in total. */
+    total: number;
+    /** A row's name, for an announcement or a label. */
+    labelAt: (index: number) => string;
+    /** Spread onto `<ChartBrush>` to make it a controlled view of this window. */
+    brushProps: {
+        startIndex: number;
+        endIndex: number;
+        onChange: (range: ChartBrushRange) => void;
+    };
+}
+/**
+ * A windowed view of a chart's rows, driven by the toolbar, the wheel, a drag
+ * across the plot, and the keyboard.
+ *
+ * ## How this composes with `<Chart.Brush>`
+ *
+ * They are two views of ONE window, not two windows. This hook owns
+ * `{ startIndex, endIndex }`; the brush is rendered controlled from it through
+ * `brushProps` and reports back through the same commit path the toolbar
+ * buttons use. So dragging a brush handle moves the toolbar's idea of the
+ * window, "reset zoom" snaps the handles back to the full range, and neither
+ * part has to know the other exists.
+ *
+ * The alternative — a zoom window layered on top of a brushed slice — was
+ * rejected because it needs a composition rule ("zoom is relative to the
+ * brush") that nobody can predict from the call site, and because it makes
+ * reset ambiguous: reset the zoom, the brush, or both.
+ *
+ * This is a superset of `useChartBrush`, so a chart that can carry a toolbar
+ * uses it in place of that hook rather than running the two side by side.
+ *
+ * @example
+ * const zoom = useChartZoom({ data, xDataKey: 'month' })
+ * <ChartBrush data={data} config={config} {...zoom.brushProps} />
+ */
+declare function useChartZoom<TData extends Record<string, unknown>>({ data, xDataKey, minSpan, step, onZoomChange, }: ChartZoomOptions<TData>): ChartZoom<TData>;
+interface ChartZoomSurfaceProps {
+    /** The window this surface drives. */
+    zoom: ChartZoom;
+    /** Names the region for a screen reader — pass the figure's title. */
+    label: string;
+    /**
+     * Off leaves the plot inert while the toolbar buttons keep working. Use it
+     * for a chart whose only control is export.
+     */
+    enabled?: boolean;
+    /** The plot's box, handed out because the PNG export needs the measured one. */
+    ref?: RefObject<HTMLDivElement | null>;
+    children: ReactNode;
+}
+/**
+ * The plot, made zoomable and pannable by pointer AND by keyboard.
+ *
+ * The keyboard half is not a nicety. A chart whose only zoom is a drag gesture
+ * is a chart a keyboard user can watch and cannot operate, which is the exact
+ * failure the brush was rewritten to fix — so the surface is focusable, carries
+ * its instructions in an `aria-describedby` note, and announces the window it
+ * moved to through a polite live region.
+ *
+ * Arrow keys pan by a row, `PageUp`/`PageDown` by a screenful, `Home`/`End`
+ * jump to the ends, `+`/`-` zoom and `0` resets. `ArrowLeft` means EARLIER in
+ * every writing direction, matching the brush: the rendering engine lays a
+ * cartesian plot out left-to-right whatever `dir` says, so mirroring the keys
+ * would put "earlier" on the side the data does not run to.
+ *
+ * The wheel is deliberately gated behind Ctrl or Cmd. A chart that swallowed a
+ * plain wheel event traps the page's scroll under the pointer, which is the
+ * single most complained-about behaviour in an embedded map.
+ */
+declare function ChartZoomSurface({ zoom, label, enabled, ref, children, }: ChartZoomSurfaceProps): react.JSX.Element;
+
+export { type ChartZoom, type ChartZoomOptions, ChartZoomSurface, type ChartZoomSurfaceProps, clampWindow, panWindow, useChartZoom, zoomWindow };