@lilt-ui/charts 0.10.0 → 0.11.0

package/dist/types.d.ts

@@ -174,6 +174,8 @@ interface ChartCommonProps<T> {
     status?: ChartStatus;
     /** How the skeleton moves while `status` is loading. Defaults to `shimmer`. */
     loadingStyle?: ChartLoadingStyle;
+    /** What the plot shows when there is no data: `dots` (default), `shape`, an element, or `null`. */
+    empty?: ChartEmptyState;
     error?: string;
     renderRetry?: () => ReactNode;
     motion?: ChartMotion;
@@ -528,6 +530,18 @@ export interface ChartLegendValue {
  * Moving skeletons on a page share one clock, so they move in step.
  */
 export type ChartLoadingStyle = 'shimmer' | 'draw' | 'breathe';
+/**
+ * How a chart with nothing to draw looks: `dots` (the default) gathers a quiet dot field around
+ * the message, and `shape` lays the chart's own outline behind it at a whisper. Both stay still
+ * and always say so, so an empty chart never reads as loading.
+ */
+export type ChartEmptyLook = 'dots' | 'shape';
+/**
+ * What a chart shows when the period has no data: a built-in look, your own element (for example
+ * `<ChartEmpty>No visits yet</ChartEmpty>`, or any component), or `null` for nothing at all. The
+ * chart places it in the plot area; what it says and draws is yours.
+ */
+export type ChartEmptyState = ChartEmptyLook | ReactElement | null;
 /**
  * How a legend lays out its entries: value `cards` (the default), compact `inline` labels, `list`
  * rows with values aligned right, color-tinted `pills`, or `bars` where each value also draws a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilt-ui/charts",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Beautiful, key-typed React chart cards with linked hover, targets, forecasts, finance charts, and calm motion.",
   "keywords": [
     "react",