@lilt-ui/charts 0.4.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/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/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;