@lilt-ui/charts 0.11.0 → 0.12.1

package/dist/interaction/axis-cursor.d.ts

@@ -13,6 +13,11 @@ export interface AxisCursor {
      * with the bars that light up, for marks that snap to a column rather than glide.
      */
     columnX: MotionValue<number>;
+    /**
+     * The color of the inspected column's mark: the hovered series' bar, or a candle's direction.
+     * Empty until a column is read; it keeps the last color while the band fades out.
+     */
+    columnColor: MotionValue<string>;
     y: MotionValue<number>;
     /** 1 while this chart owns an inspection with pills on its axes, else 0. */
     active: MotionValue<number>;

package/dist/interaction/inspection-layer.d.ts

@@ -2,7 +2,11 @@ import { ReactElement, ReactNode } from 'react';
 import { ChartSelection, ChartSeries, ChartTooltipContext } from '../types';
 import { ChartSnapshot } from '../chart-context';
 import { PlotMark } from '../marks/contract';
-/** How the crosshair travels between points; pins travel the same way. */
+/**
+ * How the crosshair travels between points; the band, pills, and pins travel the same way.
+ * Critically damped and quick (most of a column in about 130ms), so the readout lands with the column it reads
+ * instead of trailing it.
+ */
 export declare const SPRING_TRANSITION: {
     stiffness: number;
     damping: number;

package/dist/interaction/use-pin-release.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Lets go of a card's pin the way a Cartesian chart does: on any press that misses the marks,
+ * whether on empty plot, elsewhere in the card, or off it, and on Escape while the card has the
+ * keyboard (focus inside it, or the last press landed in it). Presses on controls keep the pin,
+ * so a legend item or period menu decides for itself.
+ */
+export declare function usePinRelease(root: Element | null, pinned: boolean, release: (() => void) | undefined, 
+/** Whether a press inside the plot landed on a mark. */
+onMark: (event: PointerEvent, root: Element) => boolean): void;

package/dist/interaction/use-touch-glide.d.ts

@@ -12,6 +12,10 @@ export interface TouchGlideOptions<T> {
     /** A tap with no glide. Leave unset where the item's own click already handles taps. */
     onTap?: (value: T | null) => void;
     disabled?: boolean;
+    /** Whether the card holds a pin, so Escape or a press that misses the marks lets it go. */
+    pinned?: boolean;
+    /** Releases the pin. See `usePinRelease`. */
+    onRelease?: () => void;
 }
 /** Finds the nearest `data-glide-id` under a point, for families whose marks are elements. */
 export declare function glideTarget(clientX: number, clientY: number, root: Element): string | null;

package/dist/marks/contract.d.ts

@@ -33,6 +33,11 @@ export interface MarkSpec<P> {
     loading?: (props: P) => LoadingMark;
     /** Draws one observation emphasized, over the dimmed marks, while it is inspected. */
     highlight?: (props: P, input: MarkHighlightInput) => ReactNode;
+    /**
+     * The color one observation is drawn in, when the mark decides it (rising and falling
+     * candles). Otherwise the series' `colorAt`, then its color.
+     */
+    color?: (props: P, input: Omit<MarkHighlightInput, 'color'>) => string | undefined;
 }
 export interface MarkHighlightInput {
     row: NormalizedRow<unknown>;
@@ -47,6 +52,7 @@ export interface PlotMark {
     fields: readonly string[];
     loading?: LoadingMark;
     highlight?: (input: MarkHighlightInput) => ReactNode;
+    color?: (input: Omit<MarkHighlightInput, 'color'>) => string | undefined;
 }
 export declare function defineMark<P>(component: (props: P) => ReactElement, spec: MarkSpec<P>): (props: P) => ReactElement;
 /** Marks placed directly in a plot, or inside fragments there, in document order. */

package/dist/motion/animated-number.d.ts

@@ -46,9 +46,5 @@ export declare function numberCells(text: string, parts?: readonly Intl.NumberFo
 export declare function interpolationFrameValue(frame: number, target: number): number;
 /** The next stop on a digit reel that shows `digit`, turning from `from` in the direction of change. */
 export declare function reelTarget(from: number, digit: number, direction: 1 | -1): number;
-/**
- * A number that animates between values. Characters sit in slots keyed by meaning, so only the
- * places that change move, symbols hold still, and places that appear or leave ease the width
- * open or shut. Screen readers get the settled value once; the moving glyphs are hidden.
- */
-export declare function AnimatedNumber({ value, format, className, motion: motionMode, variant: requested, }: AnimatedNumberProps): ReactElement;
+/** AnimatedNumber with its own MotionScope, so it animates wherever it is rendered. */
+export declare function AnimatedNumber(props: AnimatedNumberProps): ReactElement;

package/dist/motion/area-flow.d.ts

@@ -0,0 +1,36 @@
+import { NormalizedData } from '../engine/normalize';
+/**
+ * Areas move with the same restraint as lines and bars. They arrive lifting a little from below
+ * on the bars' spring, softly blurred until they land. A new period moves on a line's clock with
+ * a slight lean in reading order, so the change runs left to right rather than all at once.
+ */
+/** How long a period change takes to roll across an area chart. */
+export declare const FLOW_DURATION = 480;
+/** How far column `index` of `count` has moved toward its new value, at `progress` of the wave. */
+export declare function flowProgress(progress: number, index: number, count: number): number;
+/** One frame of a period change on an area chart: rows of the same shape, moving as a wave. */
+export declare function flowFrame<T>(from: NormalizedData<T>, to: NormalizedData<T>, progress: number): NormalizedData<T>;
+/**
+ * An area's first arrival at `elapsed` milliseconds into the chart's entrance: how far it has
+ * risen from its floor (the spring may pass 1 briefly) and the blur it still carries.
+ */
+export declare function riseAt(elapsed: number): {
+    rise: number;
+    blur: number;
+};
+/**
+ * The SVG transform and filter that raise a mark from `floor` (its baseline in pixels), or
+ * nothing once it has landed.
+ */
+export declare function riseStyle(elapsed: number, floor: number): {
+    transform?: string;
+    filter?: string;
+};
+/** Where an area stands: the zero line, kept inside the plot. */
+export declare function areaFloor(snapshot: {
+    yToPixel: (value: number) => number;
+    plot: {
+        top: number;
+        bottom: number;
+    };
+}): number;

package/dist/motion/motion-layout-features.d.ts

@@ -0,0 +1 @@
+export { domMax } from 'motion/react';

package/dist/motion/motion-scope.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+/**
+ * Gives `m` elements their animation features. Lilt draws with `m` instead of `motion`, so a
+ * chart pays only for the Motion features it uses: value and enter/exit animation everywhere,
+ * and, with `layout`, layout animation where something reorders. Layout features load after
+ * first paint; until then the scope animates like any other, so nothing waits on them. Wrap
+ * every root that renders `m` elements; nesting is cheap.
+ */
+export declare function MotionScope({ children, layout, }: {
+    children?: ReactNode;
+    layout?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/motion/use-glide.d.ts

@@ -14,4 +14,4 @@ export interface GlideSpring {
  * linked charts re-render together, the glide carries on from where it was instead of jumping
  * ahead to where the clock says it should be.
  */
-export declare function useGlide(initial: number, spring: GlideSpring): readonly [MotionValue<number>, (to: number, instant?: boolean) => void];
+export declare function useGlide(initial: number, spring: GlideSpring): readonly [MotionValue<number>, (to: number, instant?: boolean) => void, MotionValue<number>];

package/dist/motion/use-motion-blur.d.ts

@@ -0,0 +1,6 @@
+import { MotionValue } from 'motion/react';
+/**
+ * A CSS `filter` that blurs with a glide's speed, the way a fast-moving object smears, and clears
+ * as it lands. Reduced motion never blurs.
+ */
+export declare function useMotionBlur(speed: MotionValue<number>, reducedMotion: boolean, max?: number): MotionValue<string>;

package/dist/motion-layout-features-CJq3xh5t.js

@@ -0,0 +1,2 @@
+import { domMax as e } from "motion/react";
+export { e as domMax };

package/dist/primitives/hover-band.d.ts

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 /**
  * Behind a bar or column chart, the inspected column is lit as a whole: a soft band the height of
  * the plot, a little wider than its bars. A column is what a reader inspects on a bar chart, so
- * the band says so where a thin crosshair would not.
+ * the band says so where a thin crosshair would not. It takes the color of the column it holds,
+ * so a falling candle is lit in red and a rising one in green.
  */
 export declare function HoverBand(): ReactElement | null;