@lilt-ui/charts 0.3.0 → 0.5.0

package/dist/interaction/legend-meter.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+/** The largest positive value a `bars` legend measures against, or null when there is none. */
+export declare function legendMeterScale(values: readonly (number | null)[]): number | null;
+/**
+ * A thin bar under a legend value, as long as the value against the largest one shown. Missing,
+ * zero and negative values draw an empty track rather than a false sliver.
+ */
+export declare function LegendMeter({ value, scale, }: {
+    value: number | null;
+    scale: number | null;
+}): ReactElement;

package/dist/interaction/use-category-state.d.ts

@@ -10,7 +10,9 @@ export declare function useAcceptedRows<R>(incoming: readonly R[] | null, status
 export declare function useCategoryState<T>(rows: readonly RankingRow<T>[], interactive: boolean, onChange: ((selection: CategorySelection<T> | null) => void) | undefined, resetKey?: string | number, columns?: number, selectedId?: string | null, onSelectedIdChange?: (id: string | null) => void, hasAcceptedRows?: boolean, externalHoverId?: string | null): {
     active: RankingRow<T> | undefined;
     pinned: string | null;
+    glideRef: (node: Element | null) => void;
     bind: (id: string, index: number) => {
+        'data-glide-id': string;
         ref: (node: HTMLButtonElement | null) => void;
         tabIndex: number;
         'aria-pressed': boolean;

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

@@ -0,0 +1,26 @@
+/** How long a still finger rests before it glides in any direction instead of scrolling. */
+export declare const TOUCH_HOLD_MS = 320;
+/** How far a finger travels before it counts as a swipe rather than a tap. */
+export declare const TOUCH_SLOP = 8;
+export interface TouchGlideOptions<T> {
+    /** What sits under the finger: an item id, a spoke index, or null for empty glass. */
+    resolve: (clientX: number, clientY: number, root: Element) => T | null;
+    /** Called as the finger glides, and with null when the gesture ends without a lift. */
+    onGlide: (value: T | null) => void;
+    /** A glide lifted over an item: pin it. */
+    onLift?: (value: T | null) => void;
+    /** A tap with no glide. Leave unset where the item's own click already handles taps. */
+    onTap?: (value: T | null) => void;
+    disabled?: boolean;
+}
+/** 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;
+/**
+ * Touch for charts whose marks are separate elements, or are found by position. A finger has no
+ * hover and a touch stays with the element it first landed on, so this follows the point under
+ * the finger instead. A sideways swipe glides at once (the plot pans only vertically); a press and
+ * hold glides in any direction without scrolling the page; lifting after a glide pins.
+ *
+ * Returns a callback ref for the plot, so a plot that mounts after loading is still wired.
+ */
+export declare function useTouchGlide<T>(options: TouchGlideOptions<T>): (node: Element | null) => void;

package/dist/interaction/value-legend.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
+import { CardLegend, ChartLegendSwatch, ChartLegendVariant } from '../types';
 export interface ValueLegendEntry {
     id: string;
     label: string;
@@ -6,9 +7,14 @@ export interface ValueLegendEntry {
     value: number | null;
     formattedValue: string;
 }
+/** The legend layout a card's `legend` prop names: its value tiles are the `cards` layout. */
+export declare const cardLegendVariant: (legend: CardLegend) => ChartLegendVariant;
 export interface ValueLegendProps<Entries extends readonly ValueLegendEntry[]> {
     items: Entries;
-    variant?: 'cards' | 'inline';
+    /** `cards` (default), `inline`, `list`, `pills`, or `bars`. */
+    variant?: ChartLegendVariant;
+    /** The mark beside each label: `square` (default), `dot`, or `line`. */
+    swatch?: ChartLegendSwatch;
     activeId?: NoInfer<Entries[number]['id']> | null;
     selectedId?: NoInfer<Entries[number]['id']> | null;
     onHoverIdChange?: (id: NoInfer<Entries[number]['id']> | null) => void;
@@ -29,4 +35,4 @@ export interface ValueLegendProps<Entries extends readonly ValueLegendEntry[]> {
     style?: CSSProperties;
 }
 /** Family-neutral values and layout. The consumer supplies measurements and interaction ownership. */
-export declare function ValueLegend<const Entries extends readonly ValueLegendEntry[]>({ items, variant, activeId, selectedId, onHoverIdChange, onSelectedIdChange, hiddenIds, onHiddenIdsChange, renderLabel, renderValue, renderSwatch, renderItem, 'aria-label': ariaLabel, className, style, }: ValueLegendProps<Entries>): import("react/jsx-runtime").JSX.Element;
+export declare function ValueLegend<const Entries extends readonly ValueLegendEntry[]>({ items, variant, swatch, activeId, selectedId, onHoverIdChange, onSelectedIdChange, hiddenIds, onHiddenIdsChange, renderLabel, renderValue, renderSwatch, renderItem, 'aria-label': ariaLabel, className, style, }: ValueLegendProps<Entries>): import("react/jsx-runtime").JSX.Element;

package/dist/marks/use-range-mark.d.ts

@@ -11,6 +11,14 @@ export interface RangeMarkState {
     /** The reveal mask while the entrance sweeps in. */
     mask: string | undefined;
     clipPath: string;
+    /** Like `clipPath`, with headroom above the plot for the tops of marks drawn with depth. */
+    depthClip: {
+        id: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
     reducedMotion: boolean;
     inspecting: boolean;
 }

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

@@ -6,8 +6,12 @@ export interface GlideSpring {
 }
 /**
  * A motion value that springs to each target it is given and always lands exactly on it.
- * Every move is its own animation to a known destination, rather than a spring that follows
- * another value, so an interrupted gesture or a paused frame can never leave it resting short
- * of its target. A new target takes over from wherever the value is.
+ * Every move is its own glide to a known destination, rather than a spring that follows another
+ * value, so an interrupted gesture or a paused frame can never leave it resting short of its
+ * target. A new target takes over from wherever the value is, keeping its speed.
+ *
+ * The spring advances by at most one frame's time per frame. When the page stalls, such as while
+ * 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];

package/dist/primitives/depth-paint.d.ts

@@ -0,0 +1,103 @@
+import { ReactElement, SVGProps } from 'react';
+/** Positive lightens toward white, negative darkens toward black, in oklab to keep chroma. */
+export declare const shade: (color: string, amount: number) => string;
+/**
+ * Gradient stops through `[offset, shade]` keys, eased between each pair. Linear ramps between
+ * a few stops leave visible bands where the slope changes; smoothstep keeps every join soft.
+ */
+export declare function ramp(color: string, keys: readonly (readonly [number, number])[]): import("react/jsx-runtime").JSX.Element[];
+/** Flat face colors for marks drawn in batches, where one gradient per shape would cost too much. */
+export declare const prismShades: (color: string) => {
+    front: string;
+    top: string;
+    side: string;
+};
+/** Batched prism faces: every side, then every top, then every front, each in its own shade. */
+export declare function PrismPaths({ batches, front, }: {
+    batches: {
+        sides: {
+            entries(): {
+                color: string;
+                d: string;
+            }[];
+        };
+        tops: {
+            entries(): {
+                color: string;
+                d: string;
+            }[];
+        };
+        fronts: {
+            entries(): {
+                color: string;
+                d: string;
+            }[];
+        };
+    };
+    /** Front paint for a color; defaults to the color itself. */
+    front?: (color: string) => SVGProps<SVGPathElement>;
+}): ReactElement;
+/** A clip with headroom for the tops of marks drawn with depth. */
+export declare function DepthClip({ clip, }: {
+    clip: {
+        id: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}): ReactElement;
+export interface TubeLayer {
+    strokeWidth: number;
+    /** Shade applied to the band's color, as in `shade`. */
+    amount: number;
+    transform: string;
+}
+/**
+ * The cross-section of a band lit as a tube or a groove, as stacked strokes of its centerline:
+ * the full width first, then ever narrower strokes moved toward the light. Every layer stays
+ * inside the full stroke, round caps included, so the band's outline never changes: a ring,
+ * arc, or progress track keeps its exact angle and length.
+ *
+ * A `tube` bulges toward the reader: a shaded rim, a lit crown, and a narrow highlight toward
+ * the upper left. A `groove` is cut into the card: its upper-left wall is in shadow.
+ */
+export declare function tubeLayers(width: number, kind?: 'tube' | 'groove', 
+/** Where the light falls from, as a unit vector; the upper left by default. */
+light?: readonly [number, number]): TubeLayer[];
+/** A soft shadow under a drawing lit from the upper left, lifting it off the card. */
+export declare function DropShadow({ id, size, region, }: {
+    id: string;
+    size: number;
+    /**
+     * The area the shadow may cover, in the SVG's units. Defaults to a margin around the shape,
+     * which is too tight for a thin, nearly flat line.
+     */
+    region?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}): ReactElement;
+/**
+ * A line drawn as a lit tube: every layer of `tubeLayers` along one path. The centerline stays
+ * the line's own path, so every point reads exactly where the flat line puts it.
+ */
+export declare function TubePath({ d, color, width, dasharray, opacity, }: {
+    d: string;
+    color: string;
+    width: number;
+    dasharray?: string;
+    opacity?: number;
+}): ReactElement;
+/** The width a line takes as a tube: wide enough for its light to read. */
+export declare const tubeWidth: (lineWidth?: number) => number;
+/**
+ * A lit sphere for any circle, mapped to the circle's own bounds: a highlight toward the upper
+ * left, the series color through the middle, and shade at the far rim.
+ */
+export declare function SphereGradient({ id, color }: {
+    id: string;
+    color: string;
+}): ReactElement;

package/dist/primitives/isometric-bar.d.ts

@@ -0,0 +1,18 @@
+import { barMarkPath, BarGeometry } from '../engine/bars';
+/**
+ * Paint only: the chart still measures, inspects, and animates the original bar geometry.
+ * One key light sits above, in front, and to the left: the roof is brightest, the front is lit
+ * and falls off toward the floor, and the side turns away into shade. Edges come from the faces
+ * meeting, never from stroked lines. `active` raises the light on the inspected bar.
+ */
+export declare function IsometricBar({ bar, mark, id, color, fill, fillOpacity, stroke, strokeWidth, active, }: {
+    bar: BarGeometry;
+    mark: Parameters<typeof barMarkPath>[1];
+    id: string;
+    color: string;
+    fill: string;
+    fillOpacity: number;
+    stroke?: string;
+    strokeWidth?: number;
+    active?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;