@lilt-ui/charts 0.10.0 → 0.12.0

package/dist/cards/cartesian-card.d.ts

@@ -1,8 +1,9 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartController, ChartMargins, ChartTooltipContext, NumericXConfig, TimeXConfig, ChartAxis, ChartBarAppearance, ChartBackground, ChartCurve, ChartMotion, ChartPalette, ChartHoverReadout, ChartHoverStyle, ChartSeries, ChartTooltipIndicator, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch, ChartLoadingStyle } from '../types';
+import { ChartController, ChartMargins, ChartTooltipContext, NumericXConfig, TimeXConfig, ChartAxis, ChartBarAppearance, ChartBackground, ChartCurve, ChartMotion, ChartPalette, ChartHoverReadout, ChartHoverStyle, ChartSeries, ChartTooltipIndicator, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch, ChartLoadingStyle, ChartEmptyState } from '../types';
 import { NumericKey, ResolvedX, XKey, XKind } from './keys';
 import { CardAggregate } from './format';
 import { AnimatedNumberVariant } from '../motion/animated-number';
+import { ChartEmptyShape } from '../lifecycle/chart-empty';
 import { NormalSpec } from '../watch/engine/normal';
 import { NormalBreakdown } from '../watch/engine/explain';
 import { NormalReport } from '../watch/board/board-state';
@@ -206,6 +207,11 @@ export interface CartesianCardProps<Row, Key extends NumericKey<Row>> {
      * Moving skeletons on a page share a clock.
      */
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the plot shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -277,6 +283,8 @@ export interface CardMarks {
     xAxis?: boolean;
     /** Extra text after the hovered x in the headline caption, e.g. open, high and low. */
     describe?: (inspection: ChartTooltipContext) => string | null;
+    /** The outline the `shape` empty look draws. Defaults to `bars` for column marks. */
+    emptyShape?: ChartEmptyShape;
 }
 /** Panes drawn under the main plot, linked to it: same data, x, margins and crosshair. */
 export interface CardPaneContext<Row> {
@@ -301,7 +309,7 @@ export declare const CARD_PADDING = 20;
  * The shared card body: headline, delta, period, plot, and value tiles, with hover sync and
  * range comparison. Area, Line, and Bar cards differ only in their `shape`.
  */
-export declare function CartesianCard<Row, Key extends NumericKey<Row>>({ shape, title, header, 'aria-label': ariaLabel, data: suppliedData, x, series: seriesInput, headline: suppliedHeadline, aggregate: suppliedAggregate, headlineSeries, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, tiles, legend, legendSwatch, depth, height, valueFormat, locale, formatValue: suppliedFormatValue, formatAxisValue: suppliedFormatAxisValue, formatX, xType, compare, target: suppliedTarget, forecast, sync, axis, hover, hoverStyle, background, spotlight, decimate, surface, badge, numberStyle, palette, bleed, axisInset, pillSeries, pillValue, pillPosition, tooltipIndicator, loading, loadingStyle, motion, className, style, panes, live, heading, restCaption, normal, onNormalChange, }: Omit<CartesianCardProps<Row, Key>, 'series'> & {
+export declare function CartesianCard<Row, Key extends NumericKey<Row>>({ shape, title, header, 'aria-label': ariaLabel, data: suppliedData, x, series: seriesInput, headline: suppliedHeadline, aggregate: suppliedAggregate, headlineSeries, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, tiles, legend, legendSwatch, depth, height, valueFormat, locale, formatValue: suppliedFormatValue, formatAxisValue: suppliedFormatAxisValue, formatX, xType, compare, target: suppliedTarget, forecast, sync, axis, hover, hoverStyle, background, spotlight, decimate, surface, badge, numberStyle, palette, bleed, axisInset, pillSeries, pillValue, pillPosition, tooltipIndicator, loading, loadingStyle, empty, motion, className, style, panes, live, heading, restCaption, normal, onNormalChange, }: Omit<CartesianCardProps<Row, Key>, 'series'> & {
     series: readonly CoreSeries<Key>[];
     shape: CardShape;
     /** Linked panes under the plot, such as volume or indicators. */

package/dist/cards/funnel-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -67,6 +67,11 @@ export interface FunnelChartCardProps<Row, Key extends NumericKey<Row>> {
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -97,4 +102,4 @@ export declare function pipeEnd(x: number, half: number, rx: number, side: 'left
  * its percentage on the band and its count in a tile beneath. Hovering a stage reads it in the
  * headline with the conversion from the step before.
  */
-export declare function FunnelChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, value, curve, colors, tracks, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, selected, onSelectedChange, loading, loadingStyle, motion: motionMode, className, style, }: FunnelChartCardProps<Row, Key>): ReactElement;
+export declare function FunnelChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, value, curve, colors, tracks, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, selected, onSelectedChange, loading, loadingStyle, empty: emptyState, motion: motionMode, className, style, }: FunnelChartCardProps<Row, Key>): ReactElement;

package/dist/cards/heatmap-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -65,6 +65,11 @@ export interface HeatmapChartCardProps<Row, Key extends NumericKey<Row>> {
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -115,4 +120,4 @@ export declare function labelTier(index: number, count: number): 'major' | 'mino
  * labeled. Hovering or focusing a cell reads it in the headline; arrow keys move between cells.
  * Missing cells are hatched and say "No data", so they never read as zero.
  */
-export declare function HeatmapChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, x, y, value, columns, rows: rowOrder, domain, aggregate, height, radius, gap, depth, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: HeatmapChartCardProps<Row, Key>): ReactElement;
+export declare function HeatmapChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, x, y, value, columns, rows: rowOrder, domain, aggregate, height, radius, gap, depth, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, empty: emptyState, motion: motionMode, className, style, }: HeatmapChartCardProps<Row, Key>): ReactElement;

package/dist/cards/horizontal-bar-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, RankingOrder } from '../types';
+import { ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartPalette, ChartStyle, ChartSurface, RankingOrder } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -65,6 +65,11 @@ export interface HorizontalBarChartCardProps<Row, Key extends NumericKey<Row>> {
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -74,4 +79,4 @@ export interface HorizontalBarChartCardProps<Row, Key extends NumericKey<Row>> {
  * A ranked list card: each row carries a bar, its value, and its share of the total. Hovering a
  * row reads it in the headline; click pins it and the arrow keys move through the list.
  */
-export declare function HorizontalBarChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, value, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, sort, limit, otherLabel, share, rank, depth, barStyle, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, selected, onSelectedChange, loading, loadingStyle, motion: motionMode, className, style, }: HorizontalBarChartCardProps<Row, Key>): ReactElement;
+export declare function HorizontalBarChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, value, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, sort, limit, otherLabel, share, rank, depth, barStyle, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, selected, onSelectedChange, loading, loadingStyle, empty: emptyState, motion: motionMode, className, style, }: HorizontalBarChartCardProps<Row, Key>): ReactElement;

package/dist/cards/observations-card.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { CardLegend, ChartLegendSwatch, ChartLoadingStyle, CategorySelection } from '../types';
+import { CardLegend, ChartLegendSwatch, ChartLoadingStyle, ChartEmptyState, CategorySelection } from '../types';
 import { ChartCardProps } from './chart-card';
 import { CardRange } from './cartesian-card';
 /** Shared presentation options for observation-based cards. */
@@ -24,6 +24,11 @@ export interface ObservationsCardProps<Row> extends Omit<ChartCardProps, 'childr
     legendSwatch?: ChartLegendSwatch;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     onSelectionChange?: (selection: CategorySelection<Row | null> | null) => void;
     /** Optional consumer-owned readout, also available when the header is hidden. */
     renderReadout?: (selection: CategorySelection<Row | null> | null) => ReactNode;
@@ -75,7 +80,7 @@ export declare const seriesColor: (index: number) => string;
 export declare const readField: (row: unknown, key: string) => unknown;
 export declare const readNumber: (row: unknown, key: string) => number | null;
 /** Private shell: every family uses the same inspection, card and skeleton lifecycle. */
-export declare function ObservationsCard<Row>({ title, header, data: suppliedData, height, depth, headline, aggregate, delta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue, legend, legendSwatch, loading, loadingStyle, onSelectionChange, renderReadout, motion, className, color, layout, placeholder, family, ...frame }: ObservationsCardProps<Row> & {
+export declare function ObservationsCard<Row>({ title, header, data: suppliedData, height, depth, headline, aggregate, delta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue, legend, legendSwatch, loading, loadingStyle, empty: emptyState, onSelectionChange, renderReadout, motion, className, color, layout, placeholder, family, ...frame }: ObservationsCardProps<Row> & {
     family: string;
     layout: (data: readonly Row[], width: number, height: number) => ObservationScene<Row>;
     placeholder: (width: number, height: number) => ObservationScene<Row>;

package/dist/cards/radar-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange, CardSeries } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -58,6 +58,11 @@ export interface RadarChartCardProps<Row, Key extends NumericKey<Row>> {
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -103,5 +108,5 @@ export declare function profilePath(fractions: readonly (number | null)[], radiu
  * shape of strengths and gaps reads at a glance. Hovering or stepping around the spokes reads
  * every profile at that dimension.
  */
-export declare function RadarChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, series, domain: suppliedDomain, aggregate, grid, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: RadarChartCardProps<Row, Key>): ReactElement;
+export declare function RadarChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, series, domain: suppliedDomain, aggregate, grid, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, empty: emptyState, motion: motionMode, className, style, }: RadarChartCardProps<Row, Key>): ReactElement;
 export {};

package/dist/cards/radial-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartLoadingStyle, ChartPalette, ChartStyle, ChartSurface, RankingOrder, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartMotion, ChartLoadingStyle, ChartEmptyState, ChartPalette, ChartStyle, ChartSurface, RankingOrder, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { RankedRow } from './rank';
@@ -86,6 +86,11 @@ export interface RadialChartCardProps<Row, Key extends NumericKey<Row>> {
     loading?: boolean;
     /** Shimmer (default), a clockwise draw, or a gentle pulse. Honors reduced motion. */
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -119,5 +124,5 @@ export declare function ringAngles(rows: readonly RankedRow[]): Slice[];
  * A donut or pie card: the headline total, slices with a matching legend, and each slice's
  * share. Hovering a slice or a legend row reads it in the headline.
  */
-export declare function RadialChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, value, variant, depth, legend, legendSwatch, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, limit, otherLabel, sort, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, selected, onSelectedChange, colors: fixedColors, center, loading, loadingStyle, motion: motionMode, className, style, }: RadialChartCardProps<Row, Key>): ReactElement;
+export declare function RadialChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, value, variant, depth, legend, legendSwatch, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, limit, otherLabel, sort, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, selected, onSelectedChange, colors: fixedColors, center, loading, loadingStyle, empty: emptyState, motion: motionMode, className, style, }: RadialChartCardProps<Row, Key>): ReactElement;
 export {};

package/dist/cards/range-select.d.ts

@@ -20,9 +20,5 @@ export declare function ChartComponentsProvider({ rangeSelect, children, }: {
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useCustomRangeSelect(): ComponentType<ChartRangeSelectProps> | null;
-/**
- * Lilt's period select: a pill that opens a frosted list of periods. It follows the listbox
- * pattern, so arrows, Home, End, Enter, Escape and typing a period's first letter all work,
- * and focus returns to the pill when the list closes.
- */
-export declare function RangeSelect({ value, options, onValueChange, 'aria-label': ariaLabel, }: ChartRangeSelectProps): import("react/jsx-runtime").JSX.Element;
+/** RangeSelect with its own MotionScope, so it animates wherever it is rendered. */
+export declare function RangeSelect(props: ChartRangeSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/sankey-chart-card.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { SankeyGraph, SankeyLink, SankeyNode } from '../engine/sankey';
-import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -52,6 +52,11 @@ export interface SankeyChartCardProps<Row, Key extends NumericKey<Row>> {
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -76,5 +81,5 @@ export declare function sankeyGraph<Row>({ data, source, target, value, conserva
  * amount that moved. Hovering or stepping through flows with the arrow keys reads each in the
  * headline with its share of the step it left.
  */
-export declare function SankeyChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, source, target, value, conservation, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: SankeyChartCardProps<Row, Key>): ReactElement;
+export declare function SankeyChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, source, target, value, conservation, depth, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, empty: emptyState, motion: motionMode, className, style, }: SankeyChartCardProps<Row, Key>): ReactElement;
 export {};

package/dist/cards/scatter-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -72,6 +72,11 @@ export interface ScatterChartCardProps<Row, Key extends NumericKey<Row>> {
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -104,4 +109,4 @@ export declare function clipTrend(fit: {
  * and colored by group. Hovering or stepping through points with the arrow keys reads each one in
  * the headline, with its position marked on both axes.
  */
-export declare function ScatterChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, x, y, size, sizeLabel, group, label, xLabel, yLabel, trend, depth, height, aggregate, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, xFormat, locale, formatValue: suppliedFormatValue, formatX: suppliedFormatX, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: ScatterChartCardProps<Row, Key>): ReactElement;
+export declare function ScatterChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, x, y, size, sizeLabel, group, label, xLabel, yLabel, trend, depth, height, aggregate, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, legend, legendSwatch, xFormat, locale, formatValue: suppliedFormatValue, formatX: suppliedFormatX, color, surface, badge, numberStyle, palette, loading, loadingStyle, empty: emptyState, motion: motionMode, className, style, }: ScatterChartCardProps<Row, Key>): ReactElement;

package/dist/cards/slope-chart-card.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { SlopeOrder } from '../engine/slope';
-import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -70,6 +70,11 @@ export interface SlopeChartCardProps<Row, Key extends NumericKey<Row>> {
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element such as `<ChartEmpty>No visits yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -81,4 +86,4 @@ export interface SlopeChartCardProps<Row, Key extends NumericKey<Row>> {
  * category reads its later value and change in the headline; click pins it, and the arrow keys
  * move through categories.
  */
-export declare function SlopeChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, from, to, fromLabel, toLabel, variant, depth, sort, aggregate, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, color, height, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: SlopeChartCardProps<Row, Key>): ReactElement;
+export declare function SlopeChartCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data: suppliedData, category, from, to, fromLabel, toLabel, variant, depth, sort, aggregate, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, color, height, valueFormat, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, loadingStyle, empty: emptyState, motion: motionMode, className, style, }: SlopeChartCardProps<Row, Key>): ReactElement;

package/dist/cards/stat-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartBarAppearance, ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartBarAppearance, ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { NumericKey, XKey, XKind } from './keys';
 import { CardAggregate } from './format';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -70,10 +70,15 @@ export interface StatCardProps<Row, Key extends NumericKey<Row>> {
     palette?: ChartPalette;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the trend shows when the period has no data: `dots` (default), the chart's own `shape`,
+     * your own element, or `null` for nothing. The headline reads a dash either way.
+     */
+    empty?: ChartEmptyState;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
 }
 /** Cells of a meter: whole cells up to the value, then one cell trimmed to the exact remainder. */
 export declare function meterCells(ratio: number, count?: number): number[];
-export declare function StatCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data, value: valueKey, x, xType, headline: suppliedHeadline, aggregate, delta, deltaTone, caption, chart, depth, barStyle, target, sync, height, color, aside, valueFormat, locale, formatValue: suppliedFormatValue, formatX, surface, badge, numberStyle, palette, loading, motion, loadingStyle, className, style, }: StatCardProps<Row, Key>): ReactElement;
+export declare function StatCard<Row, const Key extends NumericKey<Row>>({ title, header, 'aria-label': ariaLabel, data, value: valueKey, x, xType, headline: suppliedHeadline, aggregate, delta, deltaTone, caption, chart, depth, barStyle, target, sync, height, color, aside, valueFormat, locale, formatValue: suppliedFormatValue, formatX, surface, badge, numberStyle, palette, loading, motion, loadingStyle, empty, className, style, }: StatCardProps<Row, Key>): ReactElement;

package/dist/chart.d.ts

@@ -15,5 +15,5 @@ type ChartPlotRendererProps<T> = Omit<ChartProps<T>, 'className' | 'style'> & Om
     controllerLinked?: boolean;
     tooltipNode?: ReactNode;
 };
-export declare function ChartPlotRenderer<T>({ data, x, y, series, height, compactHeight, margins: marginProps, arrangement, marks, barLayout: barsProps, compact, tooltipNode, inspectionSeries: plotInspectionSeries, className, style, 'aria-label': ariaLabel, children, status, loadingStyle, interactive, error, renderRetry, motion: motionPreference, animateIn, resetKey, onSelectionChange, controller, linkedSelection, selectedCategoryId, onSelectedCategoryIdChange, compare, focus, live, brush, visibleSeries, onVisibleSeriesChange, toolkit, model, controllerLinked, axis: axisProp, pill, pillSeries, pillValue, pillPosition, axisInset, decimate, runoff, labelOverhang, }: ChartPlotRendererProps<T>): ReactElement;
+export declare function ChartPlotRenderer<T>({ data, x, y, series, height, compactHeight, margins: marginProps, arrangement, marks, barLayout: barsProps, compact, tooltipNode, inspectionSeries: plotInspectionSeries, className, style, 'aria-label': ariaLabel, children, status, loadingStyle, empty: emptyState, interactive, error, renderRetry, motion: motionPreference, animateIn, resetKey, onSelectionChange, controller, linkedSelection, selectedCategoryId, onSelectedCategoryIdChange, compare, focus, live, brush, visibleSeries, onVisibleSeriesChange, toolkit, model, controllerLinked, axis: axisProp, pill, pillSeries, pillValue, pillPosition, axisInset, decimate, runoff, labelOverhang, }: ChartPlotRendererProps<T>): ReactElement;
 export {};

package/dist/finance/cards/depth-chart-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ChartAxis, ChartBackground, ChartHoverStyle, ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../../types';
+import { ChartAxis, ChartBackground, ChartHoverStyle, ChartLoadingStyle, ChartEmptyState, ChartMotion, ChartStyle, ChartSurface } from '../../types';
 import { AnimatedNumberVariant } from '../../motion/animated-number';
 import { BookLevel } from '../indicators';
 export interface DepthChartCardProps {
@@ -29,6 +29,11 @@ export interface DepthChartCardProps {
     numberStyle?: AnimatedNumberVariant;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when there is no data: `dots` (default), the chart's own `shape`, your
+     * own element such as `<ChartEmpty>No book yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -37,4 +42,4 @@ export interface DepthChartCardProps {
  * Order book depth: how much could trade at each price, buying and selling, as stepped areas, with
  * the mid, spread and total depth in the header. Hover reads the size resting at each price.
  */
-export declare function DepthChartCard({ title, header, 'aria-label': ariaLabel, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, loadingStyle, motion, className, style, depth, }: DepthChartCardProps): ReactElement;
+export declare function DepthChartCard({ title, header, 'aria-label': ariaLabel, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, loadingStyle, empty, motion, className, style, depth, }: DepthChartCardProps): ReactElement;

package/dist/finance/order-book.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../types';
+import { ChartEmptyState, ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../types';
 import { BookLevel } from './indicators';
 export interface OrderBookProps {
     /** Optional visible table caption. */
@@ -24,6 +24,11 @@ export interface OrderBookProps {
     surface?: ChartSurface;
     loading?: boolean;
     loadingStyle?: ChartLoadingStyle;
+    /**
+     * What the card shows when there is no data: `dots` (default), the chart's own `shape`, your
+     * own element such as `<ChartEmpty>No book yet</ChartEmpty>`, or `null` for nothing.
+     */
+    empty?: ChartEmptyState;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -32,4 +37,4 @@ export interface OrderBookProps {
  * A price ladder: asks above, bids below, a spread row between, and a depth bar behind each
  * level sized by its running total. It is a real table, so screen readers read it row by row.
  */
-export declare function OrderBook({ title, header, 'aria-label': ariaLabel, bids, asks, levels, depth, valueFormat, sizeFormat, locale, flash, surface, loading, loadingStyle, motion, className, style, }: OrderBookProps): ReactElement;
+export declare function OrderBook({ title, header, 'aria-label': ariaLabel, bids, asks, levels, depth, valueFormat, sizeFormat, locale, flash, surface, loading, loadingStyle, empty: emptyState, motion, className, style, }: OrderBookProps): ReactElement;