@misoto22/folio 0.0.0 → 0.17.0

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 };

package/dist/charts/lib/zoom.js

@@ -0,0 +1,314 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/cn.js";
+const ZOOM_STEP = 0.5;
+const MIN_SPAN = 2;
+const DRAG_THRESHOLD = 8;
+function clamp(value, low, high) {
+  return Math.max(low, Math.min(value, high));
+}
+function clampWindow(range, total, minSpan = MIN_SPAN) {
+  const maxIndex = Math.max(0, total - 1);
+  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 };
+  const limit = Math.min(minSpan, maxIndex);
+  let startIndex = clamp(Math.round(range.startIndex), 0, maxIndex);
+  let endIndex = clamp(Math.round(range.endIndex), 0, maxIndex);
+  if (endIndex < startIndex) [startIndex, endIndex] = [endIndex, startIndex];
+  if (endIndex - startIndex < limit) {
+    endIndex = Math.min(startIndex + limit, maxIndex);
+    startIndex = Math.max(0, endIndex - limit);
+  }
+  return { startIndex, endIndex };
+}
+function zoomWindow(range, total, factor, minSpan = MIN_SPAN, anchor) {
+  const maxIndex = Math.max(0, total - 1);
+  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 };
+  const current = clampWindow(range, total, minSpan);
+  const span = current.endIndex - current.startIndex;
+  const limit = Math.min(minSpan, maxIndex);
+  const raw = span * factor;
+  const nextSpan = clamp(factor < 1 ? Math.floor(raw) : Math.ceil(raw), limit, maxIndex);
+  const pivot = clamp(anchor ?? (current.startIndex + current.endIndex) / 2, 0, maxIndex);
+  const ratio = span > 0 ? (pivot - current.startIndex) / span : 0.5;
+  const startIndex = clamp(Math.round(pivot - ratio * nextSpan), 0, maxIndex - nextSpan);
+  return { startIndex, endIndex: startIndex + nextSpan };
+}
+function panWindow(range, total, delta) {
+  const maxIndex = Math.max(0, total - 1);
+  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 };
+  const current = clampWindow(range, total, 0);
+  const span = current.endIndex - current.startIndex;
+  const startIndex = clamp(current.startIndex + Math.round(delta), 0, maxIndex - span);
+  return { startIndex, endIndex: startIndex + span };
+}
+function useChartZoom({
+  data,
+  xDataKey,
+  minSpan = MIN_SPAN,
+  step = ZOOM_STEP,
+  onZoomChange
+}) {
+  const total = data.length;
+  const maxIndex = Math.max(0, total - 1);
+  const [range, setRange] = useState({ startIndex: 0, endIndex: maxIndex });
+  const committed = useRef(range);
+  useEffect(() => {
+    const whole = { startIndex: 0, endIndex: Math.max(0, data.length - 1) };
+    committed.current = whole;
+    setRange(whole);
+  }, [data.length]);
+  const commit = useCallback(
+    (next) => {
+      const clamped = clampWindow(next, total, minSpan);
+      const last = committed.current;
+      if (last.startIndex === clamped.startIndex && last.endIndex === clamped.endIndex) return;
+      committed.current = clamped;
+      setRange(clamped);
+      startTransition(() => onZoomChange?.(clamped));
+    },
+    [minSpan, onZoomChange, total]
+  );
+  const zoomIn = useCallback(
+    (anchor) => commit(zoomWindow(committed.current, total, step, minSpan, anchor)),
+    [commit, minSpan, step, total]
+  );
+  const zoomOut = useCallback(
+    (anchor) => commit(zoomWindow(committed.current, total, 1 / step, minSpan, anchor)),
+    [commit, minSpan, step, total]
+  );
+  const reset = useCallback(
+    () => commit({ startIndex: 0, endIndex: Math.max(0, total - 1) }),
+    [commit, total]
+  );
+  const panBy = useCallback(
+    (delta) => commit(panWindow(committed.current, total, delta)),
+    [commit, total]
+  );
+  const zoomTo = useCallback((next) => commit(next), [commit]);
+  const labelAt = useCallback(
+    (index) => {
+      if (!xDataKey) return String(index + 1);
+      const value = data[index]?.[xDataKey];
+      return value === null || value === void 0 ? String(index + 1) : String(value);
+    },
+    [data, xDataKey]
+  );
+  const deferred = useDeferredValue(range);
+  const visibleData = useMemo(
+    () => data.slice(deferred.startIndex, deferred.endIndex + 1),
+    [data, deferred.endIndex, deferred.startIndex]
+  );
+  const brushProps = useMemo(
+    () => ({ startIndex: range.startIndex, endIndex: range.endIndex, onChange: commit }),
+    [commit, range.endIndex, range.startIndex]
+  );
+  const isZoomed = range.startIndex > 0 || range.endIndex < maxIndex;
+  return useMemo(
+    () => ({
+      range,
+      visibleData,
+      isZoomed,
+      canZoomIn: range.endIndex - range.startIndex > Math.min(minSpan, maxIndex),
+      canZoomOut: isZoomed,
+      zoomIn,
+      zoomOut,
+      reset,
+      panBy,
+      zoomTo,
+      total,
+      labelAt,
+      brushProps
+    }),
+    [
+      brushProps,
+      isZoomed,
+      labelAt,
+      maxIndex,
+      minSpan,
+      panBy,
+      range,
+      reset,
+      total,
+      visibleData,
+      zoomIn,
+      zoomOut,
+      zoomTo
+    ]
+  );
+}
+function ChartZoomSurface({
+  zoom,
+  label,
+  enabled = true,
+  ref,
+  children
+}) {
+  const fallbackRef = useRef(null);
+  const surfaceRef = ref ?? fallbackRef;
+  const hintId = `chart-zoom-hint-${useId().replace(/:/g, "")}`;
+  const drag = useRef(null);
+  const [selection, setSelection] = useState(null);
+  const indexAt = useCallback(
+    (clientX) => {
+      const node = surfaceRef.current;
+      const box = node ? plotBox(node) : null;
+      if (!box) return void 0;
+      const fraction = clamp((clientX - box.left) / box.width, 0, 1);
+      return zoom.range.startIndex + fraction * (zoom.range.endIndex - zoom.range.startIndex);
+    },
+    [surfaceRef, zoom.range.endIndex, zoom.range.startIndex]
+  );
+  useEffect(() => {
+    const node = surfaceRef.current;
+    if (!node || !enabled) return;
+    const onWheel = (event) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      const anchor = indexAt(event.clientX);
+      if (event.deltaY < 0) zoom.zoomIn(anchor);
+      else zoom.zoomOut(anchor);
+    };
+    node.addEventListener("wheel", onWheel, { passive: false });
+    return () => node.removeEventListener("wheel", onWheel);
+  }, [enabled, indexAt, surfaceRef, zoom]);
+  const onPointerDown = (event) => {
+    if (!enabled || event.button !== 0) return;
+    drag.current = { pointerId: event.pointerId, originX: event.clientX };
+  };
+  const onPointerMove = (event) => {
+    const state = drag.current;
+    if (!state || state.pointerId !== event.pointerId) return;
+    const travelled = Math.abs(event.clientX - state.originX);
+    if (travelled < DRAG_THRESHOLD) return;
+    const node = surfaceRef.current;
+    const box = node ? plotBox(node) : null;
+    if (!node || !box) return;
+    if (!node.hasPointerCapture(event.pointerId)) node.setPointerCapture(event.pointerId);
+    const from = Math.min(state.originX, event.clientX);
+    setSelection({ start: from - box.left, width: travelled });
+  };
+  const endDrag = (event) => {
+    const state = drag.current;
+    drag.current = null;
+    setSelection(null);
+    const node = surfaceRef.current;
+    if (node?.hasPointerCapture(event.pointerId)) node.releasePointerCapture(event.pointerId);
+    if (!state || Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD) return;
+    const from = indexAt(Math.min(state.originX, event.clientX));
+    const to = indexAt(Math.max(state.originX, event.clientX));
+    if (from === void 0 || to === void 0) return;
+    zoom.zoomTo({ startIndex: Math.floor(from), endIndex: Math.ceil(to) });
+  };
+  const onKeyDown = (event) => {
+    if (!enabled) return;
+    const span = zoom.range.endIndex - zoom.range.startIndex;
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        zoom.panBy(-1);
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        zoom.panBy(1);
+        break;
+      case "PageDown":
+        zoom.panBy(-Math.max(1, span));
+        break;
+      case "PageUp":
+        zoom.panBy(Math.max(1, span));
+        break;
+      case "Home":
+        zoom.panBy(-zoom.total);
+        break;
+      case "End":
+        zoom.panBy(zoom.total);
+        break;
+      case "+":
+      case "=":
+        zoom.zoomIn();
+        break;
+      case "-":
+      case "_":
+        zoom.zoomOut();
+        break;
+      case "0":
+        zoom.reset();
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  const shown = zoom.range.endIndex - zoom.range.startIndex + 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-full flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: surfaceRef,
+        role: "group",
+        "aria-label": `${label} \u2014 plot`,
+        "aria-describedby": enabled ? hintId : void 0,
+        tabIndex: enabled ? 0 : void 0,
+        onKeyDown,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        className: cn(
+          "relative flex min-h-0 w-full flex-1 flex-col rounded-(--radius-sm)",
+          // Vertical scrolling still belongs to the page; horizontal movement
+          // is the pan gesture, so the browser must not claim it first.
+          enabled && "touch-pan-y",
+          selection && "select-none"
+        ),
+        children: [
+          children,
+          selection && // Positioned with inline style rather than `start-`/`end-` classes,
+          // for the same reason the brush is: the axis being selected along is
+          // the DATA's, and a cartesian plot runs left-to-right under
+          // `dir="rtl"` too.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-y-0 z-(--z-rule) border-x border-(--rule-2) bg-(--ink)/8",
+              style: { left: selection.start, width: selection.width }
+            }
+          )
+        ]
+      }
+    ),
+    enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { id: hintId, className: "sr-only", children: "Arrow keys pan by one point, Page Up and Page Down by a screenful, Home and End jump to the ends. Plus and minus zoom, zero resets. Ctrl and the wheel zoom around the pointer, and dragging across the plot zooms to that span." }),
+      /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "sr-only", children: `Showing ${zoom.labelAt(zoom.range.startIndex)} to ${zoom.labelAt(
+        zoom.range.endIndex
+      )}, ${shown} of ${zoom.total} points` })
+    ] })
+  ] });
+}
+function plotBox(surface) {
+  const grid = surface.querySelector(".recharts-cartesian-grid");
+  const gridBox = grid?.getBoundingClientRect();
+  if (gridBox && gridBox.width > 0) return gridBox;
+  const svg = surface.querySelector("svg.recharts-surface");
+  const svgBox = svg?.getBoundingClientRect();
+  return svgBox && svgBox.width > 0 ? svgBox : null;
+}
+export {
+  ChartZoomSurface,
+  clampWindow,
+  panWindow,
+  useChartZoom,
+  zoomWindow
+};
+//# sourceMappingURL=zoom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/zoom.tsx"],"sourcesContent":["'use client'\n\nimport {\n  startTransition,\n  useCallback,\n  useDeferredValue,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport { cn } from '../../lib/cn'\nimport type { ChartBrushRange } from './brush'\n\n/**\n * How far a single zoom step closes the window. Half is the step every map and\n * every chart toolbar has trained readers to expect from a `+`.\n */\nconst ZOOM_STEP = 0.5\n\n/** The fewest rows a zoom will leave on screen — the brush's floor, so the two agree. */\nconst MIN_SPAN = 2\n\n/**\n * How far the pointer has to travel before a press counts as a region\n * selection. Below this it is a click on the plot, which belongs to the tooltip\n * and to a series' own `isClickable`.\n */\nconst DRAG_THRESHOLD = 8\n\nfunction clamp(value: number, low: number, high: number): number {\n  return Math.max(low, Math.min(value, high))\n}\n\n/**\n * A range pulled back inside the data, with the minimum span enforced.\n *\n * Every other function here ends by calling this, so an inverted range, an\n * index past the end and a window narrower than `minSpan` all have exactly one\n * definition of what they become.\n */\nexport function clampWindow(\n  range: ChartBrushRange,\n  total: number,\n  minSpan: number = MIN_SPAN,\n): ChartBrushRange {\n  const maxIndex = Math.max(0, total - 1)\n  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 }\n\n  const limit = Math.min(minSpan, maxIndex)\n  let startIndex = clamp(Math.round(range.startIndex), 0, maxIndex)\n  let endIndex = clamp(Math.round(range.endIndex), 0, maxIndex)\n  if (endIndex < startIndex) [startIndex, endIndex] = [endIndex, startIndex]\n\n  if (endIndex - startIndex < limit) {\n    endIndex = Math.min(startIndex + limit, maxIndex)\n    startIndex = Math.max(0, endIndex - limit)\n  }\n\n  return { startIndex, endIndex }\n}\n\n/**\n * The window after one zoom step.\n *\n * `factor` below 1 closes the window and above 1 opens it. `anchor` is the row\n * index that must stay where it is on screen — the pointer's row for a wheel\n * zoom, the window's own centre for a button — because a zoom that re-centres\n * is a zoom that loses the point the reader was looking at.\n *\n * The span is floored when closing and ceiled when opening rather than rounded\n * in both directions, so a step always moves: rounding leaves a three-row\n * window stuck at three when the step is a half.\n */\nexport function zoomWindow(\n  range: ChartBrushRange,\n  total: number,\n  factor: number,\n  minSpan: number = MIN_SPAN,\n  anchor?: number,\n): ChartBrushRange {\n  const maxIndex = Math.max(0, total - 1)\n  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 }\n\n  const current = clampWindow(range, total, minSpan)\n  const span = current.endIndex - current.startIndex\n  const limit = Math.min(minSpan, maxIndex)\n  const raw = span * factor\n  const nextSpan = clamp(factor < 1 ? Math.floor(raw) : Math.ceil(raw), limit, maxIndex)\n\n  const pivot = clamp(anchor ?? (current.startIndex + current.endIndex) / 2, 0, maxIndex)\n  // Where the pivot sits across the window, 0 at the start and 1 at the end.\n  // Holding that fraction is what keeps the anchored row under the pointer.\n  const ratio = span > 0 ? (pivot - current.startIndex) / span : 0.5\n  const startIndex = clamp(Math.round(pivot - ratio * nextSpan), 0, maxIndex - nextSpan)\n\n  return { startIndex, endIndex: startIndex + nextSpan }\n}\n\n/**\n * The window slid along by `delta` rows, keeping its span.\n *\n * At either end it stops rather than shrinking. A pan that narrowed itself\n * against the edge would change the scale under the reader, which is a\n * different gesture from the one they made.\n */\nexport function panWindow(range: ChartBrushRange, total: number, delta: number): ChartBrushRange {\n  const maxIndex = Math.max(0, total - 1)\n  if (maxIndex === 0) return { startIndex: 0, endIndex: 0 }\n\n  const current = clampWindow(range, total, 0)\n  const span = current.endIndex - current.startIndex\n  const startIndex = clamp(current.startIndex + Math.round(delta), 0, maxIndex - span)\n\n  return { startIndex, endIndex: startIndex + span }\n}\n\nexport interface ChartZoomOptions<TData extends Record<string, unknown>> {\n  /** The whole dataset. The window is expressed as indexes into it. */\n  data: TData[]\n  /** The row field behind a row's name, used by the spoken window description. */\n  xDataKey?: keyof TData & string\n  /** The fewest rows a zoom will leave on screen. */\n  minSpan?: number\n  /** The fraction of the window one zoom step keeps. */\n  step?: number\n  /** Fires whenever the window changes, from any of the four inputs. */\n  onZoomChange?: (range: ChartBrushRange) => void\n}\n\nexport interface ChartZoom<TData extends Record<string, unknown> = Record<string, unknown>> {\n  /** The rows on screen, as indexes into the whole dataset. */\n  range: ChartBrushRange\n  /** The rows the plot should draw. */\n  visibleData: TData[]\n  /** Whether anything is hidden — what \"reset zoom\" is enabled by. */\n  isZoomed: boolean\n  canZoomIn: boolean\n  canZoomOut: boolean\n  /** Closes the window one step around `anchor`, or around its own centre. */\n  zoomIn: (anchor?: number) => void\n  /** Opens the window one step around `anchor`, or around its own centre. */\n  zoomOut: (anchor?: number) => void\n  /** Back to the whole dataset. */\n  reset: () => void\n  /** Slides the window by a number of rows, keeping its span. */\n  panBy: (delta: number) => void\n  /** Jumps straight to a window — what a drag across the plot commits. */\n  zoomTo: (range: ChartBrushRange) => void\n  /** How many rows there are in total. */\n  total: number\n  /** A row's name, for an announcement or a label. */\n  labelAt: (index: number) => string\n  /** Spread onto `<ChartBrush>` to make it a controlled view of this window. */\n  brushProps: {\n    startIndex: number\n    endIndex: number\n    onChange: (range: ChartBrushRange) => void\n  }\n}\n\n/**\n * A windowed view of a chart's rows, driven by the toolbar, the wheel, a drag\n * across the plot, and the keyboard.\n *\n * ## How this composes with `<Chart.Brush>`\n *\n * They are two views of ONE window, not two windows. This hook owns\n * `{ startIndex, endIndex }`; the brush is rendered controlled from it through\n * `brushProps` and reports back through the same commit path the toolbar\n * buttons use. So dragging a brush handle moves the toolbar's idea of the\n * window, \"reset zoom\" snaps the handles back to the full range, and neither\n * part has to know the other exists.\n *\n * The alternative — a zoom window layered on top of a brushed slice — was\n * rejected because it needs a composition rule (\"zoom is relative to the\n * brush\") that nobody can predict from the call site, and because it makes\n * reset ambiguous: reset the zoom, the brush, or both.\n *\n * This is a superset of `useChartBrush`, so a chart that can carry a toolbar\n * uses it in place of that hook rather than running the two side by side.\n *\n * @example\n * const zoom = useChartZoom({ data, xDataKey: 'month' })\n * <ChartBrush data={data} config={config} {...zoom.brushProps} />\n */\nexport function useChartZoom<TData extends Record<string, unknown>>({\n  data,\n  xDataKey,\n  minSpan = MIN_SPAN,\n  step = ZOOM_STEP,\n  onZoomChange,\n}: ChartZoomOptions<TData>): ChartZoom<TData> {\n  const total = data.length\n  const maxIndex = Math.max(0, total - 1)\n\n  const [range, setRange] = useState<ChartBrushRange>({ startIndex: 0, endIndex: maxIndex })\n\n  // The committed window, mirrored in a ref so the commands below can stay\n  // stable across renders. The wheel listener is attached natively and would\n  // otherwise be torn down and re-attached on every step.\n  const committed = useRef(range)\n\n  useEffect(() => {\n    const whole = { startIndex: 0, endIndex: Math.max(0, data.length - 1) }\n    committed.current = whole\n    setRange(whole)\n  }, [data.length])\n\n  const commit = useCallback(\n    (next: ChartBrushRange) => {\n      const clamped = clampWindow(next, total, minSpan)\n      const last = committed.current\n      if (last.startIndex === clamped.startIndex && last.endIndex === clamped.endIndex) return\n\n      committed.current = clamped\n      setRange(clamped)\n      // The control that moved has to keep up with the pointer; the plot does\n      // not. Deferring lets React drop intermediate windows during a drag.\n      startTransition(() => onZoomChange?.(clamped))\n    },\n    [minSpan, onZoomChange, total],\n  )\n\n  const zoomIn = useCallback(\n    (anchor?: number) => commit(zoomWindow(committed.current, total, step, minSpan, anchor)),\n    [commit, minSpan, step, total],\n  )\n\n  const zoomOut = useCallback(\n    (anchor?: number) => commit(zoomWindow(committed.current, total, 1 / step, minSpan, anchor)),\n    [commit, minSpan, step, total],\n  )\n\n  const reset = useCallback(\n    () => commit({ startIndex: 0, endIndex: Math.max(0, total - 1) }),\n    [commit, total],\n  )\n\n  const panBy = useCallback(\n    (delta: number) => commit(panWindow(committed.current, total, delta)),\n    [commit, total],\n  )\n\n  const zoomTo = useCallback((next: ChartBrushRange) => commit(next), [commit])\n\n  const labelAt = useCallback(\n    (index: number) => {\n      if (!xDataKey) return String(index + 1)\n      const value = data[index]?.[xDataKey]\n      return value === null || value === undefined ? String(index + 1) : String(value)\n    },\n    [data, xDataKey],\n  )\n\n  // The slice runs on a deferred copy of the window, so the control that moved\n  // re-renders at pointer cadence and the plot at whatever it can manage.\n  const deferred = useDeferredValue(range)\n  const visibleData = useMemo(\n    () => data.slice(deferred.startIndex, deferred.endIndex + 1),\n    [data, deferred.endIndex, deferred.startIndex],\n  )\n\n  const brushProps = useMemo(\n    () => ({ startIndex: range.startIndex, endIndex: range.endIndex, onChange: commit }),\n    [commit, range.endIndex, range.startIndex],\n  )\n\n  const isZoomed = range.startIndex > 0 || range.endIndex < maxIndex\n\n  return useMemo(\n    () => ({\n      range,\n      visibleData,\n      isZoomed,\n      canZoomIn: range.endIndex - range.startIndex > Math.min(minSpan, maxIndex),\n      canZoomOut: isZoomed,\n      zoomIn,\n      zoomOut,\n      reset,\n      panBy,\n      zoomTo,\n      total,\n      labelAt,\n      brushProps,\n    }),\n    [\n      brushProps,\n      isZoomed,\n      labelAt,\n      maxIndex,\n      minSpan,\n      panBy,\n      range,\n      reset,\n      total,\n      visibleData,\n      zoomIn,\n      zoomOut,\n      zoomTo,\n    ],\n  )\n}\n\nexport interface ChartZoomSurfaceProps {\n  /** The window this surface drives. */\n  zoom: ChartZoom\n  /** Names the region for a screen reader — pass the figure's title. */\n  label: string\n  /**\n   * Off leaves the plot inert while the toolbar buttons keep working. Use it\n   * for a chart whose only control is export.\n   */\n  enabled?: boolean\n  /** The plot's box, handed out because the PNG export needs the measured one. */\n  ref?: RefObject<HTMLDivElement | null>\n  children: ReactNode\n}\n\n/**\n * The plot, made zoomable and pannable by pointer AND by keyboard.\n *\n * The keyboard half is not a nicety. A chart whose only zoom is a drag gesture\n * is a chart a keyboard user can watch and cannot operate, which is the exact\n * failure the brush was rewritten to fix — so the surface is focusable, carries\n * its instructions in an `aria-describedby` note, and announces the window it\n * moved to through a polite live region.\n *\n * Arrow keys pan by a row, `PageUp`/`PageDown` by a screenful, `Home`/`End`\n * jump to the ends, `+`/`-` zoom and `0` resets. `ArrowLeft` means EARLIER in\n * every writing direction, matching the brush: the rendering engine lays a\n * cartesian plot out left-to-right whatever `dir` says, so mirroring the keys\n * would put \"earlier\" on the side the data does not run to.\n *\n * The wheel is deliberately gated behind Ctrl or Cmd. A chart that swallowed a\n * plain wheel event traps the page's scroll under the pointer, which is the\n * single most complained-about behaviour in an embedded map.\n */\nexport function ChartZoomSurface({\n  zoom,\n  label,\n  enabled = true,\n  ref,\n  children,\n}: ChartZoomSurfaceProps) {\n  const fallbackRef = useRef<HTMLDivElement>(null)\n  const surfaceRef = ref ?? fallbackRef\n  const hintId = `chart-zoom-hint-${useId().replace(/:/g, '')}`\n\n  const drag = useRef<{ pointerId: number; originX: number } | null>(null)\n  const [selection, setSelection] = useState<{ start: number; width: number } | null>(null)\n\n  /** The row index under a client x, read from the plot's own measured box. */\n  const indexAt = useCallback(\n    (clientX: number): number | undefined => {\n      const node = surfaceRef.current\n      const box = node ? plotBox(node) : null\n      if (!box) return undefined\n      const fraction = clamp((clientX - box.left) / box.width, 0, 1)\n      return zoom.range.startIndex + fraction * (zoom.range.endIndex - zoom.range.startIndex)\n    },\n    [surfaceRef, zoom.range.endIndex, zoom.range.startIndex],\n  )\n\n  useEffect(() => {\n    const node = surfaceRef.current\n    if (!node || !enabled) return\n\n    // Attached natively rather than through `onWheel`, because React registers\n    // its wheel listener passively — `preventDefault` from a React handler is a\n    // console warning and a page that zooms anyway.\n    const onWheel = (event: WheelEvent) => {\n      if (!event.ctrlKey && !event.metaKey) return\n      event.preventDefault()\n      const anchor = indexAt(event.clientX)\n      if (event.deltaY < 0) zoom.zoomIn(anchor)\n      else zoom.zoomOut(anchor)\n    }\n\n    node.addEventListener('wheel', onWheel, { passive: false })\n    return () => node.removeEventListener('wheel', onWheel)\n  }, [enabled, indexAt, surfaceRef, zoom])\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!enabled || event.button !== 0) return\n    // No `preventDefault` here on purpose: it would cancel the compatibility\n    // mouse events the tooltip and a mark's own click handler run on.\n    drag.current = { pointerId: event.pointerId, originX: event.clientX }\n  }\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current\n    if (!state || state.pointerId !== event.pointerId) return\n\n    const travelled = Math.abs(event.clientX - state.originX)\n    if (travelled < DRAG_THRESHOLD) return\n\n    const node = surfaceRef.current\n    const box = node ? plotBox(node) : null\n    if (!node || !box) return\n\n    if (!node.hasPointerCapture(event.pointerId)) node.setPointerCapture(event.pointerId)\n\n    const from = Math.min(state.originX, event.clientX)\n    setSelection({ start: from - box.left, width: travelled })\n  }\n\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current\n    drag.current = null\n    setSelection(null)\n\n    const node = surfaceRef.current\n    if (node?.hasPointerCapture(event.pointerId)) node.releasePointerCapture(event.pointerId)\n    if (!state || Math.abs(event.clientX - state.originX) < DRAG_THRESHOLD) return\n\n    const from = indexAt(Math.min(state.originX, event.clientX))\n    const to = indexAt(Math.max(state.originX, event.clientX))\n    if (from === undefined || to === undefined) return\n\n    zoom.zoomTo({ startIndex: Math.floor(from), endIndex: Math.ceil(to) })\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!enabled) return\n    const span = zoom.range.endIndex - zoom.range.startIndex\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        zoom.panBy(-1)\n        break\n      case 'ArrowRight':\n      case 'ArrowUp':\n        zoom.panBy(1)\n        break\n      case 'PageDown':\n        zoom.panBy(-Math.max(1, span))\n        break\n      case 'PageUp':\n        zoom.panBy(Math.max(1, span))\n        break\n      case 'Home':\n        zoom.panBy(-zoom.total)\n        break\n      case 'End':\n        zoom.panBy(zoom.total)\n        break\n      case '+':\n      case '=':\n        zoom.zoomIn()\n        break\n      case '-':\n      case '_':\n        zoom.zoomOut()\n        break\n      case '0':\n        zoom.reset()\n        break\n      default:\n        return\n    }\n\n    event.preventDefault()\n  }\n\n  const shown = zoom.range.endIndex - zoom.range.startIndex + 1\n\n  return (\n    <div className=\"flex min-h-0 w-full flex-1 flex-col\">\n      <div\n        ref={surfaceRef}\n        role=\"group\"\n        aria-label={`${label} — plot`}\n        aria-describedby={enabled ? hintId : undefined}\n        tabIndex={enabled ? 0 : undefined}\n        onKeyDown={onKeyDown}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={endDrag}\n        onPointerCancel={endDrag}\n        className={cn(\n          'relative flex min-h-0 w-full flex-1 flex-col rounded-(--radius-sm)',\n          // Vertical scrolling still belongs to the page; horizontal movement\n          // is the pan gesture, so the browser must not claim it first.\n          enabled && 'touch-pan-y',\n          selection && 'select-none',\n        )}\n      >\n        {children}\n\n        {selection && (\n          // Positioned with inline style rather than `start-`/`end-` classes,\n          // for the same reason the brush is: the axis being selected along is\n          // the DATA's, and a cartesian plot runs left-to-right under\n          // `dir=\"rtl\"` too.\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-y-0 z-(--z-rule) border-x border-(--rule-2) bg-(--ink)/8\"\n            style={{ left: selection.start, width: selection.width }}\n          />\n        )}\n      </div>\n\n      {enabled && (\n        <>\n          <p id={hintId} className=\"sr-only\">\n            Arrow keys pan by one point, Page Up and Page Down by a screenful, Home and End jump to\n            the ends. Plus and minus zoom, zero resets. Ctrl and the wheel zoom around the pointer,\n            and dragging across the plot zooms to that span.\n          </p>\n          <p aria-live=\"polite\" className=\"sr-only\">\n            {`Showing ${zoom.labelAt(zoom.range.startIndex)} to ${zoom.labelAt(\n              zoom.range.endIndex,\n            )}, ${shown} of ${zoom.total} points`}\n          </p>\n        </>\n      )}\n    </div>\n  )\n}\n\n/**\n * The measured box of the PLOT, not of the wrapper around it.\n *\n * The wrapper carries the toolbar row and the brush footer, and the plot's own\n * `<svg>` carries the axis gutter, so mapping a pointer through either is off\n * by enough to feel wrong at the ends of a drag. The grid is the one element\n * whose box IS the plot area, so it is tried first; the surface is the fallback\n * for a chart composed without `<Chart.Grid>`.\n */\nfunction plotBox(surface: HTMLElement): DOMRect | null {\n  const grid = surface.querySelector('.recharts-cartesian-grid')\n  const gridBox = grid?.getBoundingClientRect()\n  if (gridBox && gridBox.width > 0) return gridBox\n\n  const svg = surface.querySelector('svg.recharts-surface')\n  const svgBox = svg?.getBoundingClientRect()\n  return svgBox && svgBox.width > 0 ? svgBox : null\n}\n"],"mappings":"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","names":[]}

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+
+/**
+ * Radix root, re-exported. Pass `type="single" collapsible` for an FAQ and
+ * `type="multiple"` for a settings stack; Radix's own discriminated union then
+ * types `value` correctly for each.
+ */
+declare const Accordion: react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'children' | 'title'> {
+    /** The row's summary — what the reader clicks. Named `title` rather than
+     *  inherited from the DOM attribute of the same name, which is a tooltip. */
+    title: ReactNode;
+    children: ReactNode;
+}
+/**
+ * One disclosure row: a hairline-ruled trigger and its panel.
+ *
+ * The marker is a plus that rotates into a minus, not a chevron. A chevron says
+ * "there is more below"; a plus says "this opens" — and in a stack of rows the
+ * difference decides whether the reader expects navigation or expansion.
+ *
+ * The panel animates on Radix's own `--radix-accordion-content-height`, so it
+ * opens to its real height without measuring anything at the call site.
+ *
+ * @example
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="ship" title="How do I ship it?">Push to main.</AccordionItem>
+ * </Accordion>
+ */
+declare function AccordionItem({ title, children, className, ...rest }: AccordionItemProps): react.JSX.Element;
+
+export { Accordion, AccordionItem, type AccordionItemProps, Accordion as default };