@automattic/charts 4.7.0 → 4.8.0

package/dist/index.css

@@ -32,6 +32,7 @@
   --a8c-charts-motion-duration-entrance: var(--wpds-motion-duration-xl, .4s);
   --a8c-charts-motion-easing-entrance: var(--wpds-motion-easing-expressive, cubic-bezier(.25, 0, 0, 1));
   --a8c-charts-border-radius-bar: var(--wpds-border-radius-md, 4px);
+  --a8c-charts-border-radius-bar-chart: 0;
   --a8c-charts-border-radius-cell: var(--wpds-border-radius-sm, 2px);
   --a8c-charts-border-radius-leaderboard-bar: 9999px;
   --a8c-charts-dimension-leaderboard-row-gap: var(--wpds-dimension-gap-md, 12px);
@@ -104,7 +105,7 @@
   font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   flex-shrink: 0;
 }
-.a8ccharts--zY0xG-surface, .a8ccharts--zY0xG-tooltip {
+.a8ccharts-ddpU1W-surface {
   padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
   background-color: var(--a8c-charts-color-surface);
   color: var(--a8c-charts-color-label);
@@ -113,19 +114,15 @@
   font-size: var(--wpds-typography-font-size-sm, 12px);
   box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
   pointer-events: none;
+  min-width: fit-content;
   line-height: 1.4;
 }
 
 @media (forced-colors: active) {
-  .a8ccharts--zY0xG-surface, .a8ccharts--zY0xG-tooltip {
+  .a8ccharts-ddpU1W-surface {
     border: var(--wpds-border-width-xs, 1px) solid CanvasText;
   }
 }
-
-.a8ccharts--zY0xG-tooltip {
-  position: absolute;
-  transform: translate(-50%, -100%);
-}
 .a8ccharts-fpNVAq-chart-layout__content {
   flex: 1;
   min-width: 0;
@@ -309,6 +306,10 @@
   overflow: visible;
 }
 
+.a8ccharts-97yN9W-bar-chart .visx-bar, .a8ccharts-97yN9W-bar-chart .bar-chart__comparison-bar {
+  rx: var(--a8c-charts-border-radius-bar-chart);
+}
+
 .a8ccharts-97yN9W-bar-chart--animated rect {
   transform-origin: bottom;
   transform-box: fill-box;
@@ -602,7 +603,7 @@
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__cell--filled {
-  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((.15 + .85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-background, #fff));
+  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-high, var(--a8c-charts-color-heatmap-primary)) calc(var(--a8c-charts-heatmap-cell-intensity) * 100%), var(--a8c-charts-color-heatmap-low, color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) 15%, var(--a8c-charts-color-background, #fff))));
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__cell--selected {
@@ -635,7 +636,7 @@
   width: var(--wpds-dimension-size-3xs, 12px);
   height: var(--wpds-dimension-size-3xs, 12px);
   border-radius: var(--a8c-charts-border-radius-cell);
-  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((.15 + .85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-background, #fff));
+  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-high, var(--a8c-charts-color-heatmap-primary)) calc(var(--a8c-charts-heatmap-cell-intensity) * 100%), var(--a8c-charts-color-heatmap-low, color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) 15%, var(--a8c-charts-color-background, #fff))));
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__legend-scale--bar {

package/dist/index.d.cts

@@ -4,7 +4,7 @@ import { AxisRendererProps, AxisScale, Orientation, TickFormatter } from "@visx/
 import { PickD3Scale, ScaleInput, ScaleType } from "@visx/scale";
 import { TextProps } from "@visx/text";
 import { EventHandlerParams, EventHandlerParams as EventHandlerParams$1, GlyphProps, GridStyles, GridStyles as GridStyles$1, LineStyles, LineStyles as LineStyles$1, TooltipContextType } from "@visx/xychart";
-import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, JSX, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
+import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, HTMLAttributes, JSX, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
 import { TooltipProps as TooltipProps$1, UseTooltipPortalOptions } from "@visx/tooltip";
 import { PieProvidedProps } from "@visx/shape";
 //#region src/types.d.ts
@@ -1328,7 +1328,7 @@ declare const GeoChartResponsive: ({ resizeDebounceTime, maxWidth, aspectRatio,
 } & ResponsiveConfig) => import("react").JSX.Element;
 //#endregion
 //#region src/charts/heatmap-chart/types.d.ts
-/** A single heatmap cell. `value: null` marks an empty cell. */
+/** A single heatmap cell. `value: null` marks an empty cell, as does a zero when no value is negative. */
 type HeatmapCell = {
   /** Per-cell label used in the tooltip / accessible name. */
   label?: string;
@@ -1422,8 +1422,9 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
   /** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
   minCellHeight?: number;
   /**
-   * Color the cell scale interpolates toward at the highest value. Defaults to the
-   * first series palette slot, `--a8c-charts-color-series-1`.
+   * Color the cell scale is built from, deepened at the highest value toward 9:1
+   * against the background. Defaults to the first series palette slot,
+   * `--a8c-charts-color-series-1`.
    */
   primaryColor?: string;
   renderTooltip?: (data: HeatmapTooltipData) => ReactNode;
@@ -1932,7 +1933,7 @@ interface PieChartProps extends BaseChartProps<DataPointPercentage[]> {
   tooltipOffsetY?: number;
   /**
    * Custom render function for tooltip content.
-   * When provided, replaces the default BaseTooltip with custom content.
+   * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieChartRenderTooltipParams) => ReactNode;
 }
@@ -1998,7 +1999,7 @@ interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]>
   tooltipOffsetY?: number;
   /**
    * Custom render function for tooltip content.
-   * When provided, replaces the default BaseTooltip with custom content.
+   * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieSemiCircleChartRenderTooltipParams) => ReactNode;
 }
@@ -2119,30 +2120,42 @@ declare const Sparkline: ({ resizeDebounceTime, maxWidth, aspectRatio, size, wid
   size?: number;
 } & ResponsiveConfig) => import("react").JSX.Element;
 //#endregion
-//#region src/components/tooltip/base-tooltip.d.ts
+//#region src/components/tooltip/types.d.ts
+type TooltipProps = {
+  data: {
+    label: string;
+    value: number;
+  };
+};
 type TooltipData = {
   label: string;
   value: number;
   valueDisplay?: string;
 };
+//#endregion
+//#region src/components/tooltip/base-tooltip.d.ts
 type TooltipComponentProps = {
   data: TooltipData;
   className?: string;
 };
 type TooltipCommonProps = {
-  top: number;
-  left: number;
+  /** @deprecated Position the box with `style`, or use `TooltipBox`. */
+  top?: number;
+  /** @deprecated Position the box with `style`, or use `TooltipBox`. */
+  left?: number;
   style?: CSSProperties;
   className?: string;
   /**
    * Whether to render the tooltip container div. When false, only renders the content.
-   * Useful when the tooltip is rendered inside a portal or custom container.
+   * @deprecated Render the content directly; `TooltipBox` draws the box.
    * @default true
    */
   renderContainer?: boolean;
 };
 type DefaultDataTooltip = {
+  /** @deprecated Pass the content as children, or use `TooltipBox`. */
   data: TooltipData;
+  /** @deprecated Pass the content as children, or use `TooltipBox`. */
   component?: ComponentType<TooltipComponentProps>;
   children?: never;
 };
@@ -2152,16 +2165,31 @@ type CustomTooltip = {
   component?: never;
 };
 type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
+/**
+ * A tooltip box with children or `label: value` content. Prefer `TooltipBox`.
+ *
+ * @param props                 - Tooltip props.
+ * @param props.data            - Data for the default content.
+ * @param props.top             - Deprecated vertical position.
+ * @param props.left            - Deprecated horizontal position.
+ * @param props.component       - Deprecated content component.
+ * @param props.children        - Tooltip content.
+ * @param props.className       - Class name passed to the content component.
+ * @param props.style           - Styles for the box.
+ * @param props.renderContainer - Deprecated; render the content alone when false.
+ * @return The tooltip.
+ */
 declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer }: BaseTooltipProps) => string | number | true | import("react").JSX.Element | Iterable<ReactNode>;
 //#endregion
-//#region src/components/tooltip/accessible-tooltip.d.ts
+//#region src/components/tooltip/xy-chart-tooltip.d.ts
 type FlattenedTooltipData = {
   datum: DataPointDate;
   seriesLabel: string;
   seriesIndex: number;
   dataPointIndex: number;
 };
-interface AccessibleTooltipProps extends Omit<XyChartTooltipProps<DataPointDate>, 'renderTooltip'> {
+/** The XY chart tooltip that LineChart, AreaChart and BarChart render; place it inside a visx `XYChart`. */
+interface XYChartTooltipProps extends Omit<XyChartTooltipProps<DataPointDate>, 'renderTooltip'> {
   renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
   selectedIndex?: number | undefined;
   tooltipRef?: (element: HTMLDivElement | null) => void;
@@ -2182,15 +2210,27 @@ interface AccessibleTooltipProps extends Omit<XyChartTooltipProps<DataPointDate>
    */
   mode?: 'individual' | 'group';
 }
-declare const AccessibleTooltip: React.FC<AccessibleTooltipProps>;
+declare const XYChartTooltip: React.FC<XYChartTooltipProps>;
+/** @deprecated Use `XYChartTooltip`. */
+declare const AccessibleTooltip: import("react").FC<XYChartTooltipProps>;
 //#endregion
-//#region src/components/tooltip/types.d.ts
-type TooltipProps = {
-  data: {
-    label: string;
-    value: number;
-  };
+//#region src/components/tooltip/tooltip-box.d.ts
+type TooltipBoxProps = HTMLAttributes<HTMLDivElement> & {
+  /** Drop the chart surface, scope class and dark theme, leaving a bare box. */
+  unstyled?: boolean;
 };
+/**
+ * The chart tooltip box: the dark surface every chart tooltip draws. It does not position itself; place it with `style` or a wrapper.
+ *
+ * @param props          - Div attributes, plus `unstyled`.
+ * @param props.unstyled - Drop the surface, scope class and theme.
+ * @param ref            - Forwarded to the box element.
+ * @return The tooltip box.
+ */
+declare const TooltipBox: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+  /** Drop the chart surface, scope class and dark theme, leaving a bare box. */
+  unstyled?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 //#region src/components/trend-indicator/types.d.ts
 /**
@@ -2341,5 +2381,5 @@ declare const defaultTheme: CompleteChartTheme;
  */
 declare const useChartScopeElement: () => HTMLElement | null;
 //#endregion
-export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
+export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, TooltipBox, type TooltipBoxProps, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, XYChartTooltip, type XyChartTooltipProps, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { EventHandlerParams, EventHandlerParams as EventHandlerParams$1, GlyphProps, GridStyles, GridStyles as GridStyles$1, LineStyles, LineStyles as LineStyles$1, TooltipContextType } from "@visx/xychart";
-import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, JSX, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
+import { CSSProperties, ComponentClass, ComponentProps, ComponentType, FC, HTMLAttributes, JSX, MouseEvent, PointerEvent, PropsWithChildren, ReactElement, ReactNode, SVGProps } from "react";
 import { TextProps } from "@visx/text";
 import { TooltipProps as TooltipProps$1, UseTooltipPortalOptions } from "@visx/tooltip";
 import { PickD3Scale, ScaleInput, ScaleType } from "@visx/scale";
@@ -1328,7 +1328,7 @@ declare const GeoChartResponsive: ({ resizeDebounceTime, maxWidth, aspectRatio,
 } & ResponsiveConfig) => import("react").JSX.Element;
 //#endregion
 //#region src/charts/heatmap-chart/types.d.ts
-/** A single heatmap cell. `value: null` marks an empty cell. */
+/** A single heatmap cell. `value: null` marks an empty cell, as does a zero when no value is negative. */
 type HeatmapCell = {
   /** Per-cell label used in the tooltip / accessible name. */
   label?: string;
@@ -1422,8 +1422,9 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
   /** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
   minCellHeight?: number;
   /**
-   * Color the cell scale interpolates toward at the highest value. Defaults to the
-   * first series palette slot, `--a8c-charts-color-series-1`.
+   * Color the cell scale is built from, deepened at the highest value toward 9:1
+   * against the background. Defaults to the first series palette slot,
+   * `--a8c-charts-color-series-1`.
    */
   primaryColor?: string;
   renderTooltip?: (data: HeatmapTooltipData) => ReactNode;
@@ -1932,7 +1933,7 @@ interface PieChartProps extends BaseChartProps<DataPointPercentage[]> {
   tooltipOffsetY?: number;
   /**
    * Custom render function for tooltip content.
-   * When provided, replaces the default BaseTooltip with custom content.
+   * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieChartRenderTooltipParams) => ReactNode;
 }
@@ -1998,7 +1999,7 @@ interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]>
   tooltipOffsetY?: number;
   /**
    * Custom render function for tooltip content.
-   * When provided, replaces the default BaseTooltip with custom content.
+   * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieSemiCircleChartRenderTooltipParams) => ReactNode;
 }
@@ -2119,30 +2120,42 @@ declare const Sparkline: ({ resizeDebounceTime, maxWidth, aspectRatio, size, wid
   size?: number;
 } & ResponsiveConfig) => import("react").JSX.Element;
 //#endregion
-//#region src/components/tooltip/base-tooltip.d.ts
+//#region src/components/tooltip/types.d.ts
+type TooltipProps = {
+  data: {
+    label: string;
+    value: number;
+  };
+};
 type TooltipData = {
   label: string;
   value: number;
   valueDisplay?: string;
 };
+//#endregion
+//#region src/components/tooltip/base-tooltip.d.ts
 type TooltipComponentProps = {
   data: TooltipData;
   className?: string;
 };
 type TooltipCommonProps = {
-  top: number;
-  left: number;
+  /** @deprecated Position the box with `style`, or use `TooltipBox`. */
+  top?: number;
+  /** @deprecated Position the box with `style`, or use `TooltipBox`. */
+  left?: number;
   style?: CSSProperties;
   className?: string;
   /**
    * Whether to render the tooltip container div. When false, only renders the content.
-   * Useful when the tooltip is rendered inside a portal or custom container.
+   * @deprecated Render the content directly; `TooltipBox` draws the box.
    * @default true
    */
   renderContainer?: boolean;
 };
 type DefaultDataTooltip = {
+  /** @deprecated Pass the content as children, or use `TooltipBox`. */
   data: TooltipData;
+  /** @deprecated Pass the content as children, or use `TooltipBox`. */
   component?: ComponentType<TooltipComponentProps>;
   children?: never;
 };
@@ -2152,16 +2165,31 @@ type CustomTooltip = {
   component?: never;
 };
 type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
+/**
+ * A tooltip box with children or `label: value` content. Prefer `TooltipBox`.
+ *
+ * @param props                 - Tooltip props.
+ * @param props.data            - Data for the default content.
+ * @param props.top             - Deprecated vertical position.
+ * @param props.left            - Deprecated horizontal position.
+ * @param props.component       - Deprecated content component.
+ * @param props.children        - Tooltip content.
+ * @param props.className       - Class name passed to the content component.
+ * @param props.style           - Styles for the box.
+ * @param props.renderContainer - Deprecated; render the content alone when false.
+ * @return The tooltip.
+ */
 declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer }: BaseTooltipProps) => string | number | true | import("react").JSX.Element | Iterable<ReactNode>;
 //#endregion
-//#region src/components/tooltip/accessible-tooltip.d.ts
+//#region src/components/tooltip/xy-chart-tooltip.d.ts
 type FlattenedTooltipData = {
   datum: DataPointDate;
   seriesLabel: string;
   seriesIndex: number;
   dataPointIndex: number;
 };
-interface AccessibleTooltipProps extends Omit<XyChartTooltipProps<DataPointDate>, 'renderTooltip'> {
+/** The XY chart tooltip that LineChart, AreaChart and BarChart render; place it inside a visx `XYChart`. */
+interface XYChartTooltipProps extends Omit<XyChartTooltipProps<DataPointDate>, 'renderTooltip'> {
   renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
   selectedIndex?: number | undefined;
   tooltipRef?: (element: HTMLDivElement | null) => void;
@@ -2182,15 +2210,27 @@ interface AccessibleTooltipProps extends Omit<XyChartTooltipProps<DataPointDate>
    */
   mode?: 'individual' | 'group';
 }
-declare const AccessibleTooltip: React.FC<AccessibleTooltipProps>;
+declare const XYChartTooltip: React.FC<XYChartTooltipProps>;
+/** @deprecated Use `XYChartTooltip`. */
+declare const AccessibleTooltip: import("react").FC<XYChartTooltipProps>;
 //#endregion
-//#region src/components/tooltip/types.d.ts
-type TooltipProps = {
-  data: {
-    label: string;
-    value: number;
-  };
+//#region src/components/tooltip/tooltip-box.d.ts
+type TooltipBoxProps = HTMLAttributes<HTMLDivElement> & {
+  /** Drop the chart surface, scope class and dark theme, leaving a bare box. */
+  unstyled?: boolean;
 };
+/**
+ * The chart tooltip box: the dark surface every chart tooltip draws. It does not position itself; place it with `style` or a wrapper.
+ *
+ * @param props          - Div attributes, plus `unstyled`.
+ * @param props.unstyled - Drop the surface, scope class and theme.
+ * @param ref            - Forwarded to the box element.
+ * @return The tooltip box.
+ */
+declare const TooltipBox: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+  /** Drop the chart surface, scope class and dark theme, leaving a bare box. */
+  unstyled?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 //#region src/components/trend-indicator/types.d.ts
 /**
@@ -2341,5 +2381,5 @@ declare const defaultTheme: CompleteChartTheme;
  */
 declare const useChartScopeElement: () => HTMLElement | null;
 //#endregion
-export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
+export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, type BandHighlightSelection, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type BucketInfo, type CalendarHeatmapOptions, type CalendarHeatmapResult, type ChartFormatting, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CrosshairStyle, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoDisplayMode, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapColumnGroup, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MonthCalendarHeatmapOptions, type MonthCalendarHeatmapRange, type MonthCalendarHeatmapResult, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, type SeriesVisibilityProps, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, TooltipBox, type TooltipBoxProps, type TooltipData, type TooltipDatum, type TooltipPlacement, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, XYChartTooltip, type XyChartTooltipProps, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
 //# sourceMappingURL=index.d.ts.map