@lilt-ui/charts 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.6.0
+
+Charts have three loading styles, with skeletons shaped for each family and refreshed palettes.
+
+### Loading
+
+- `loadingStyle` accepts `shimmer` (the default), `draw`, or `breathe` on charts and cards, including finance charts. `ChartLoadingStyle` is exported for typed consumers.
+- Loading skeletons follow each chart's geometry, including candles, range marks, rings, funnels, and flows. Moving skeletons share a clock so cards on a page move together.
+- Loading motion respects reduced-motion preferences and `motion="none"`; placeholders do not present invented readings as data.
+
+### Palettes
+
+- Iris uses violet, rose, and amber; Cobalt uses blue, cyan, and indigo; Emerald uses green, lime, and teal. Default series colors follow Iris, with matching light and dark palettes.
+
 ## 0.5.0
 
 Every chart that can carry it gets depth with one prop, and legends come in five layouts.

package/dist/activity-ring.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ChartMotion } from './types';
+import { ChartLoadingStyle, ChartMotion } from './types';
 export interface ActivitySelection<Row> {
     hour: number;
     row: Row | null;
@@ -23,6 +23,7 @@ export interface ActivityRingProps<Row> {
     onSelectionChange?: (selection: ActivitySelection<Row> | null) => void;
     /** `loading` keeps showing the last accepted day until new data is ready. */
     status?: 'ready' | 'loading';
+    loadingStyle?: ChartLoadingStyle;
     /** A new key drops the accepted day and any selection. */
     resetKey?: string | number;
     motion?: ChartMotion;
@@ -42,5 +43,5 @@ export declare function activitySlots<Row>(data: readonly Row[], hour: (row: Row
  * The 24-hour dot ring inside `ActivityRingCard`: one column of dots per time slot, filled by
  * how much happened then. One tab stop; arrow keys step around the day and Enter pins a slot.
  */
-export declare function ActivityRing<Row>({ data, hour, value, maximum, bucketMinutes, dotDensity, unit, formatValue, center, onSelectionChange, status, resetKey, motion, height, depth, className, 'aria-label': ariaLabel, }: ActivityRingProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function ActivityRing<Row>({ data, hour, value, maximum, bucketMinutes, dotDensity, unit, formatValue, center, onSelectionChange, status, loadingStyle, resetKey, motion, height, depth, className, 'aria-label': ariaLabel, }: ActivityRingProps<Row>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cards/activity-ring-card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -47,6 +47,7 @@ export interface ActivityRingCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -59,4 +60,4 @@ export declare function clockLabel(hour: number): string;
  * filled by how much happened then. Hovering or stepping around the ring reads each slot in the
  * headline; tiles name the busiest and quietest times.
  */
-export declare function ActivityRingCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, hour, value, bucketMinutes, unit, maximum: suppliedMaximum, aggregate, height, depth, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, motion, className, style, }: ActivityRingCardProps<Row, Key>): ReactElement;
+export declare function ActivityRingCard<Row, const Key extends NumericKey<Row>>({ title, data: suppliedData, hour, value, bucketMinutes, unit, maximum: suppliedMaximum, aggregate, height, depth, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion, className, style, }: ActivityRingCardProps<Row, Key>): ReactElement;

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

@@ -1,5 +1,5 @@
 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 } from '../types';
+import { ChartController, ChartMargins, ChartTooltipContext, NumericXConfig, TimeXConfig, ChartAxis, ChartBarAppearance, ChartBackground, ChartCurve, ChartMotion, ChartPalette, ChartHoverReadout, ChartHoverStyle, ChartSeries, ChartTooltipIndicator, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch, ChartLoadingStyle } from '../types';
 import { NumericKey, ResolvedX, XKey, XKind } from './keys';
 import { CardAggregate } from './format';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -184,6 +184,12 @@ export interface CartesianCardProps<Row, Key extends NumericKey<Row>> {
      */
     sync?: string;
     loading?: boolean;
+    /**
+     * How the skeleton moves while `loading`: `shimmer` (default) sweeps a highlight over still
+     * shapes, `draw` reveals bars or contours in order, `breathe` lets them rise and settle.
+     * Moving skeletons on a page share a clock.
+     */
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -258,6 +264,7 @@ export interface CardMarks {
 }
 /** Panes drawn under the main plot, linked to it: same data, x, margins and crosshair. */
 export interface CardPaneContext<Row> {
+    loadingStyle?: ChartLoadingStyle;
     data: readonly Row[];
     x: TimeXConfig<Row> | NumericXConfig<Row>;
     controller: ChartController;
@@ -278,7 +285,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, 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, surface, badge, numberStyle, palette, bleed, axisInset, pillSeries, pillValue, pillPosition, tooltipIndicator, loading, 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, 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, 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'> & {
     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 { ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -53,6 +53,7 @@ export interface FunnelChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -83,4 +84,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, 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, loading, motion: motionMode, className, style, }: FunnelChartCardProps<Row, Key>): ReactElement;
+export declare function FunnelChartCard<Row, const Key extends NumericKey<Row>>({ title, 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, loading, loadingStyle, 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 { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -59,6 +59,7 @@ export interface HeatmapChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -109,4 +110,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, 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, motion: motionMode, className, style, }: HeatmapChartCardProps<Row, Key>): ReactElement;
+export declare function HeatmapChartCard<Row, const Key extends NumericKey<Row>>({ title, 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;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, RankingOrder } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, RankingOrder } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -52,6 +52,7 @@ export interface HorizontalBarChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -61,4 +62,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, 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, loading, motion: motionMode, className, style, }: HorizontalBarChartCardProps<Row, Key>): ReactElement;
+export declare function HorizontalBarChartCard<Row, const Key extends NumericKey<Row>>({ title, 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, loading, loadingStyle, motion: motionMode, className, style, }: HorizontalBarChartCardProps<Row, Key>): ReactElement;

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

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { AnimatedNumberVariant } from '../motion/animated-number';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 export interface ProgressRange {
     id: string;
     label: string;
@@ -49,6 +49,7 @@ export interface ProgressCardProps {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -57,4 +58,4 @@ export interface ProgressCardProps {
  * One value against a goal: the value in the header, and a large ring or gauge with the
  * percentage reached. Past the goal the ring stays full and the percentage keeps counting.
  */
-export declare function ProgressCard({ title, value: suppliedValue, target: suppliedTarget, label, variant, depth, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, footer, valueFormat, locale, formatValue, color, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: ProgressCardProps): ReactElement;
+export declare function ProgressCard({ title, value: suppliedValue, target: suppliedTarget, label, variant, depth, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, footer, valueFormat, locale, formatValue, color, surface, badge, numberStyle, palette, loading, loadingStyle, motion: motionMode, className, style, }: ProgressCardProps): ReactElement;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartLoadingStyle, 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';
@@ -51,6 +51,7 @@ export interface RadarChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -96,5 +97,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, 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, motion: motionMode, className, style, }: RadarChartCardProps<Row, Key>): ReactElement;
+export declare function RadarChartCard<Row, const Key extends NumericKey<Row>>({ title, 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 {};

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, RankingOrder, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartMotion, ChartLoadingStyle, ChartPalette, ChartStyle, ChartSurface, RankingOrder, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { RankedRow } from './rank';
@@ -61,6 +61,8 @@ export interface RadialChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    /** Shimmer (default), a clockwise draw, or a gentle pulse. Honors reduced motion. */
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -84,5 +86,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, 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, loading, motion: motionMode, className, style, }: RadialChartCardProps<Row, Key>): ReactElement;
+export declare function RadialChartCard<Row, const Key extends NumericKey<Row>>({ title, 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, loading, loadingStyle, motion: motionMode, className, style, }: RadialChartCardProps<Row, Key>): ReactElement;
 export {};

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 { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -46,6 +46,7 @@ export interface SankeyChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -70,5 +71,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, 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, motion: motionMode, className, style, }: SankeyChartCardProps<Row, Key>): ReactElement;
+export declare function SankeyChartCard<Row, const Key extends NumericKey<Row>>({ title, 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 {};

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface, CardLegend, ChartLegendSwatch } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -65,6 +65,7 @@ export interface ScatterChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -97,4 +98,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, 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, motion: motionMode, className, style, }: ScatterChartCardProps<Row, Key>): ReactElement;
+export declare function ScatterChartCard<Row, const Key extends NumericKey<Row>>({ title, 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;

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

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { SlopeOrder } from '../engine/slope';
-import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { CardRange } from './cartesian-card';
 import { NumericKey, TextKey } from './keys';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -64,6 +64,7 @@ export interface SlopeChartCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     /** `none` turns off decorative motion; reduced-motion users get this automatically. */
     motion?: ChartMotion;
     className?: string;
@@ -75,4 +76,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, 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, motion: motionMode, className, style, }: SlopeChartCardProps<Row, Key>): ReactElement;
+export declare function SlopeChartCard<Row, const Key extends NumericKey<Row>>({ title, 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;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ChartBarAppearance, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { ChartBarAppearance, ChartLoadingStyle, ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
 import { NumericKey, XKey, XKind } from './keys';
 import { CardAggregate } from './format';
 import { AnimatedNumberVariant } from '../motion/animated-number';
@@ -64,10 +64,11 @@ export interface StatCardProps<Row, Key extends NumericKey<Row>> {
     numberStyle?: AnimatedNumberVariant;
     palette?: ChartPalette;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     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, 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, className, style, }: StatCardProps<Row, Key>): ReactElement;
+export declare function StatCard<Row, const Key extends NumericKey<Row>>({ title, 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;

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, 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, 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, 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, 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, ChartMotion, ChartStyle, ChartSurface } from '../../types';
+import { ChartAxis, ChartBackground, ChartHoverStyle, ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../../types';
 import { AnimatedNumberVariant } from '../../motion/animated-number';
 import { BookLevel } from '../indicators';
 export interface DepthChartCardProps {
@@ -23,6 +23,7 @@ export interface DepthChartCardProps {
     surface?: ChartSurface;
     numberStyle?: AnimatedNumberVariant;
     loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -31,4 +32,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, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, motion, className, style, depth, }: DepthChartCardProps): ReactElement;
+export declare function DepthChartCard({ title, bids, asks, valueFormat, sizeFormat, locale, height, axis, background, hoverStyle, surface, numberStyle, loading, loadingStyle, motion, className, style, depth, }: DepthChartCardProps): ReactElement;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ChartMotion, ChartStyle, ChartSurface } from '../types';
+import { ChartLoadingStyle, ChartMotion, ChartStyle, ChartSurface } from '../types';
 import { BookLevel } from './indicators';
 export interface OrderBookProps {
     title: string;
@@ -17,6 +17,8 @@ export interface OrderBookProps {
     /** Briefly highlight levels whose size changed. Defaults to true; reduced motion turns it off. */
     flash?: boolean;
     surface?: ChartSurface;
+    loading?: boolean;
+    loadingStyle?: ChartLoadingStyle;
     motion?: ChartMotion;
     className?: string;
     style?: CSSProperties | ChartStyle;
@@ -25,4 +27,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, bids, asks, levels, depth, valueFormat, sizeFormat, locale, flash, surface, motion, className, style, }: OrderBookProps): ReactElement;
+export declare function OrderBook({ title, bids, asks, levels, depth, valueFormat, sizeFormat, locale, flash, surface, loading, loadingStyle, motion, className, style, }: OrderBookProps): ReactElement;