@lilt-ui/charts 0.1.0

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

@@ -0,0 +1,77 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { AnimatedNumberVariant } from '../motion/animated-number';
+import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+export interface ChartCardProps {
+    children?: ReactNode;
+    /** `elevated` (default) lifts the card; `outline` is border-only; `ghost` drops the frame. */
+    surface?: ChartSurface;
+    /** Series colors for everything inside the card. */
+    palette?: ChartPalette;
+    /** `none` stops decorative motion inside the card, such as loading shimmer. */
+    motion?: ChartMotion;
+    /** How the headline animates: `count` (default), `pop`, `slide`, `roll`, `flow`, or `scramble`. */
+    numberStyle?: AnimatedNumberVariant;
+    /**
+     * A glass tab tucked behind the card's top edge, e.g. a caption, a command, or actions. With a
+     * badge, `className` and `style` apply to the frame that holds the tab and the card.
+     */
+    badge?: ReactNode;
+    className?: string;
+    style?: CSSProperties | ChartStyle;
+    'aria-label'?: string;
+}
+/** The card surface every Lilt card shares: padding, radius, border, and theme tokens. */
+export declare function ChartCard({ children, surface, palette, motion, numberStyle, badge, className, style, 'aria-label': ariaLabel, }: ChartCardProps): ReactElement;
+export interface CardBadgeProps {
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * The glass tab a card's `badge` renders. On its own above another panel, tuck the tab's lower
+ * edge behind that panel: `position: relative; z-index: 1; margin-top: -12px`.
+ */
+export declare function CardBadge({ children, className }: CardBadgeProps): ReactElement;
+export interface ChartCardHeaderProps {
+    children?: ReactNode;
+    /** Right-aligned content such as a period select or legend. */
+    aside?: ReactNode;
+    className?: string;
+}
+export declare function ChartCardHeader({ children, aside, className }: ChartCardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartCardTitle({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface ChartCardValueProps {
+    value: number | null;
+    format?: (value: number) => string;
+    /** Shown beside the value, e.g. a delta chip or the hovered x label. */
+    children?: ReactNode;
+    loading?: boolean;
+    motion?: 'auto' | 'none';
+}
+export declare function ChartCardValue({ value, format, children, loading, motion, }: ChartCardValueProps): import("react/jsx-runtime").JSX.Element;
+export interface ChartCardDeltaProps {
+    /** Fractional change: 0.082 renders as +8.2%. */
+    value: number;
+    /** Direction is not desirability. Use `inverse` when a decrease is good, `neutral` for neither. */
+    tone?: 'default' | 'inverse' | 'neutral';
+    format?: (value: number) => string;
+}
+export declare function ChartCardDelta({ value, tone, format }: ChartCardDeltaProps): import("react/jsx-runtime").JSX.Element;
+/** Quiet secondary text beside the value, e.g. the hovered x label. */
+export declare function ChartCardCaption({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface ChartCardRangeOption {
+    id: string;
+    label: string;
+}
+export interface ChartCardRangeProps<Option extends ChartCardRangeOption> {
+    /** A single static label, or options for a period select. */
+    label?: string;
+    options?: readonly Option[];
+    value?: NoInfer<Option['id']>;
+    onValueChange?: (id: NoInfer<Option['id']>) => void;
+}
+/** Period pill. Renders a native select when options are supplied. */
+export declare function ChartCardRange<const Option extends ChartCardRangeOption>({ label, options, value, onValueChange, }: ChartCardRangeProps<Option>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,51 @@
+import { ReactElement } from 'react';
+import { CardSeries, CartesianCardProps } from './cartesian-card';
+import { CardAggregate } from './format';
+import { NumericKey } from './keys';
+import { ChartBarAppearance } from '../types';
+export interface ComboLineSeries<Key extends string> extends CardSeries<Key> {
+    /** Number format for this line's tiles, pill, and right-hand labels, e.g. a percentage. */
+    valueFormat?: Intl.NumberFormatOptions;
+    /**
+     * How this line's tile summarizes the period. Defaults to the card's `aggregate`, or `mean`
+     * when the line has its own scale, since those are usually rates.
+     */
+    aggregate?: CardAggregate;
+}
+export interface ComboChartCardProps<Row, Key extends NumericKey<Row>> extends Omit<CartesianCardProps<Row, Key>, 'series' | 'pillValue'> {
+    /** Numeric fields drawn as bars, grouped or stacked. They make up the headline. */
+    bars: readonly CardSeries<Key>[];
+    /**
+     * Stack the bars: `true` adds them, `'percent'` shows each bar series' share. Lines stay
+     * unstacked over the stack, such as a target over stacked revenue. Omit to group the bars.
+     */
+    stack?: boolean | 'percent';
+    /** Numeric fields drawn as lines over the bars, e.g. a budget, a forecast, or a rate. */
+    lines: readonly ComboLineSeries<Key>[];
+    /**
+     * `shared` (default) puts lines on the bar scale, so heights compare directly, as with actual
+     * against budget. `own` fits lines to their own scale for a different unit, such as margin
+     * over revenue; its labels sit on the right and share the bar gridlines.
+     */
+    lineScale?: 'shared' | 'own';
+    /** Corner radius in pixels. Defaults to 6. */
+    radius?: number;
+    /** `end` (default) rounds each bar's value end; `all` rounds every corner. */
+    corners?: 'end' | 'all';
+    /** Quiet full-height lanes behind each bar or stack. Defaults to false. */
+    tracks?: boolean;
+    /** Maximum bar width in pixels; bars never exceed their slot. */
+    barWidth?: number;
+    /** `solid` (default), `segmented`, `needle`, `gradient`, or `outline`. */
+    barStyle?: ChartBarAppearance;
+    /** `smooth` (default) or `linear` line segments. */
+    curve?: 'smooth' | 'linear';
+    /** Mark every line observation with a small dot. Defaults to true. */
+    points?: boolean;
+}
+/**
+ * Bars and lines in one card: amounts as bars, with a target, forecast, or rate drawn over them.
+ * The headline totals the bars; every series gets a tile, and the pill reads whichever mark is
+ * nearest the pointer.
+ */
+export declare function ComboChartCard<Row, const Key extends NumericKey<Row>>({ bars, lines, lineScale, stack, radius, corners, tracks, barWidth, barStyle, curve, points, aggregate, pillPosition, ...props }: ComboChartCardProps<Row, Key>): ReactElement;

package/dist/cards/format.d.ts

@@ -0,0 +1,36 @@
+export type CardAggregate = 'sum' | 'mean' | 'last' | 'max';
+/** Observed values of a field, skipping gaps. */
+export declare function valuesOf<Row>(rows: readonly Row[], key: string): number[];
+/** One number for a period. `null` when nothing was observed, never zero. */
+export declare function summarize(values: readonly number[], aggregate: CardAggregate): number | null;
+export interface CardFormatOptions {
+    valueFormat?: Intl.NumberFormatOptions;
+    locale?: string;
+    formatValue?: (value: number) => string;
+    formatAxisValue?: (value: number) => string;
+}
+export interface CardFormatters {
+    /** Full value text for headlines, tiles, and pills. */
+    value: (value: number) => string;
+    /** Compact text for axis labels. */
+    axis: (value: number) => string;
+    /** Stable wrappers that always call the latest formatter, for memoized chart config. */
+    stable: {
+        value: (value: number) => string;
+        axis: (value: number) => string;
+    };
+    /** Changes only when the format itself changes. */
+    key: string;
+}
+export declare function numberFormatters(locale: string, valueFormat?: Intl.NumberFormatOptions): {
+    full: (value: number) => string;
+    compact: (value: number) => string;
+    plain: (value: number) => string;
+};
+/**
+ * Card number formatting: `valueFormat` options, or full control with `formatValue`. Inline
+ * formatters are read through a ref so they never rebuild the chart model.
+ */
+export declare function useCardFormat({ valueFormat, locale, formatValue, formatAxisValue, }: CardFormatOptions): CardFormatters;
+/** Signed change text: +$1,200 or −$300. */
+export declare function signedFormat(format: (value: number) => string): (value: number) => string;

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

@@ -0,0 +1,62 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { CardRange } from './cartesian-card';
+import { NumericKey, TextKey } from './keys';
+import { AnimatedNumberVariant } from '../motion/animated-number';
+export interface FunnelChartCardProps<Row, Key extends NumericKey<Row>> {
+    title: string;
+    /** One row per stage, in funnel order. Omit when `ranges` supplies the data. */
+    data?: readonly Row[];
+    /** Text field that names each stage. Names must be unique. */
+    category: TextKey<Row>;
+    /** How many reached each stage. Counts never rise from one stage to the next. */
+    value: Key;
+    /** `smooth` (default) eases each stage into the next; `linear` tapers in straight lines. */
+    curve?: 'smooth' | 'linear';
+    /** `stages` (default) gives each stage its own palette color; `single` uses one color. */
+    colors?: 'stages' | 'single';
+    /** A quiet full-height lane behind each stage, marking where 100% sits. Defaults to false. */
+    tracks?: boolean;
+    /** Plot height in pixels. Defaults to 180. */
+    height?: number;
+    /** Resting headline. Defaults to the first stage. */
+    headline?: number;
+    /** Fractional change shown as a chip, e.g. 0.052 → +5.2%. */
+    delta?: number;
+    deltaTone?: 'default' | 'inverse' | 'neutral';
+    /** Static period label, e.g. "Last 7 days". */
+    range?: string;
+    /** Period select. Each range replaces data, delta, and headline; bands ease to their new size. */
+    ranges?: readonly CardRange<Row>[];
+    defaultRange?: string;
+    valueFormat?: Intl.NumberFormatOptions;
+    locale?: string;
+    formatValue?: (value: number) => string;
+    /** Any CSS color for `colors="single"`. Defaults to the palette's first color. */
+    color?: string;
+    surface?: ChartSurface;
+    /** A glass tab tucked behind the card's top edge, e.g. a caption, a command, or actions. */
+    badge?: ReactNode;
+    /** Headline motion: `count` (default), `pop`, `slide`, `roll`, `flow`, or `scramble`. */
+    numberStyle?: AnimatedNumberVariant;
+    palette?: ChartPalette;
+    loading?: boolean;
+    /** `none` turns off decorative motion; reduced-motion users get this automatically. */
+    motion?: ChartMotion;
+    className?: string;
+    style?: CSSProperties | ChartStyle;
+}
+/** Share of the first stage as text; anything above zero but under 1% says so. */
+export declare function stageShare(share: number | null): string;
+/**
+ * The band of one stage in a 100-wide column of a 100-tall plot: it holds its own height, then
+ * reaches the next stage's height at the column edge. The last stage and stages before a gap
+ * stay level.
+ */
+export declare function stagePath(index: number, height: number, next: number | null, curve: 'smooth' | 'linear'): string;
+/**
+ * A funnel card: stages left to right, each band sized by its share of the first stage, with
+ * 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, height, headline: suppliedHeadline, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: FunnelChartCardProps<Row, Key>): ReactElement;

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

@@ -0,0 +1,107 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { CardRange } from './cartesian-card';
+import { NumericKey, TextKey } from './keys';
+import { AnimatedNumberVariant } from '../motion/animated-number';
+/** How the resting headline summarizes every known cell. */
+export type HeatmapAggregate = 'sum' | 'mean' | 'max';
+export interface HeatmapChartCardProps<Row, Key extends NumericKey<Row>> {
+    title: string;
+    /** One row per cell. Omit when `ranges` supplies the data. */
+    data?: readonly Row[];
+    /** Text field that places a cell in a column, e.g. the hour. */
+    x: TextKey<Row>;
+    /** Text field that places a cell in a row, e.g. the weekday. */
+    y: TextKey<Row>;
+    /** The measurement that sets the cell's color. `null` or an absent cell reads "No data". */
+    value: Key;
+    /** Column order. Defaults to the order columns first appear in the data. */
+    columns?: readonly string[];
+    /** Row order. Defaults to the order rows first appear in the data. */
+    rows?: readonly string[];
+    /**
+     * Values at the light and dark ends of the scale. Fix it to compare periods on one scale;
+     * by default it runs from zero (or the lowest value, if negative) to the highest value.
+     */
+    domain?: readonly [number, number];
+    /** How the resting headline sums up the cells: `sum` (default), `mean`, or `max`. */
+    aggregate?: HeatmapAggregate;
+    /** Grid height in pixels, shared by the rows. Defaults to 30 pixels per row. */
+    height?: number;
+    /** Corner radius of each cell in pixels. Defaults to 5; 0 gives square cells. */
+    radius?: number;
+    /** Space between cells in pixels. Defaults to 4. */
+    gap?: number;
+    /** Resting headline. Defaults to the `aggregate` of every known cell. */
+    headline?: number;
+    /** Fractional change shown as a chip, e.g. 0.052 → +5.2%. */
+    delta?: number;
+    deltaTone?: 'default' | 'inverse' | 'neutral';
+    /** Static period label, e.g. "Last 7 days". */
+    range?: string;
+    /** Period select. Each range replaces data, delta, and headline; cells ease to their new color. */
+    ranges?: readonly CardRange<Row>[];
+    defaultRange?: string;
+    valueFormat?: Intl.NumberFormatOptions;
+    locale?: string;
+    formatValue?: (value: number) => string;
+    /** Any CSS color for the dark end of the scale. Defaults to the palette's first color. */
+    color?: string;
+    surface?: ChartSurface;
+    /** A glass tab tucked behind the card's top edge, e.g. a caption, a command, or actions. */
+    badge?: ReactNode;
+    /** Headline motion: `count` (default), `pop`, `slide`, `roll`, `flow`, or `scramble`. */
+    numberStyle?: AnimatedNumberVariant;
+    palette?: ChartPalette;
+    loading?: boolean;
+    /** `none` turns off decorative motion; reduced-motion users get this automatically. */
+    motion?: ChartMotion;
+    className?: string;
+    style?: CSSProperties | ChartStyle;
+}
+export interface HeatmapGridCell<Row> {
+    /** `row` and `column` joined, unique within the grid. */
+    id: string;
+    label: string;
+    row: string;
+    column: string;
+    datum: Row | null;
+    /** `null` when the cell is missing or has no value; zero is a real reading. */
+    value: number | null;
+    /** Position between the domain ends, 0 to 1. `null` when there is no value. */
+    intensity: number | null;
+}
+export interface HeatmapGrid<Row> {
+    columns: string[];
+    rows: string[];
+    /** Row-major: every column of the first row, then the next row. */
+    cells: HeatmapGridCell<Row>[];
+    domain: readonly [number, number];
+    error: string | null;
+}
+/**
+ * Lay rows of data out as a grid. Rows and columns keep the order given, or the order they
+ * first appear; a cell with no row, or a `null` value, stays in the grid as missing.
+ */
+export declare function heatmapGrid<Row>({ data, x, y, value, columns: columnOrder, rows: rowOrder, domain: suppliedDomain, }: {
+    data: readonly Row[];
+    x: string;
+    y: string;
+    value: string;
+    columns?: readonly string[];
+    rows?: readonly string[];
+    domain?: readonly [number, number];
+}): HeatmapGrid<Row>;
+/** The share of the accent color a cell gets: never fully clear, so zero still reads as a value. */
+export declare const cellStrength: (intensity: number) => number;
+/**
+ * Which axis labels show. Up to eight columns always fit; beyond that, narrow cards drop every
+ * other label (`minor`), and past twelve columns only every nth label shows at all.
+ */
+export declare function labelTier(index: number, count: number): 'major' | 'minor' | 'hidden';
+/**
+ * A heatmap card: a grid of cells colored by value, with the row and column of each cell
+ * 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, 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;

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

@@ -0,0 +1,60 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { ChartMotion, ChartPalette, ChartStyle, ChartSurface, RankingOrder } from '../types';
+import { CardRange } from './cartesian-card';
+import { NumericKey, TextKey } from './keys';
+import { AnimatedNumberVariant } from '../motion/animated-number';
+export { rankRows } from './rank';
+export interface HorizontalBarChartCardProps<Row, Key extends NumericKey<Row>> {
+    title: string;
+    /** One row per category. Omit when `ranges` supplies the data. */
+    data?: readonly Row[];
+    /** Text field that names each row. Names must be unique. */
+    category: TextKey<Row>;
+    /** Numeric field to rank by. `null` rows show "No data" and sort last. */
+    value: Key;
+    /** Resting headline. Defaults to the total of every row. */
+    headline?: number;
+    /** Fractional change shown as a chip, e.g. 0.082 → +8.2%. */
+    delta?: number;
+    deltaTone?: 'default' | 'inverse' | 'neutral';
+    /** Static period label, e.g. "This month". */
+    range?: string;
+    /** Period select. Each range replaces data, delta, and headline; rows re-rank smoothly. */
+    ranges?: readonly CardRange<Row>[];
+    defaultRange?: string;
+    /** `descending` (default) puts the largest first; `input` keeps your order. */
+    sort?: RankingOrder;
+    /** Show the first rows only and add the rest together as one "Other" row. */
+    limit?: number;
+    /** Label of the combined row. Defaults to "Other". */
+    otherLabel?: string;
+    /** Each row's share of the total. Defaults to true; hidden when values are negative. */
+    share?: boolean;
+    /** Number each row by rank. Defaults to false. */
+    rank?: boolean;
+    /**
+     * `inline` (default) sets each label on a soft bar; `track` draws a slim bar under the label.
+     */
+    barStyle?: 'inline' | 'track';
+    valueFormat?: Intl.NumberFormatOptions;
+    locale?: string;
+    formatValue?: (value: number) => string;
+    /** Any CSS color for the bars. Defaults to the palette's first color. */
+    color?: string;
+    surface?: ChartSurface;
+    /** A glass tab tucked behind the card's top edge, e.g. a caption, a command, or actions. */
+    badge?: ReactNode;
+    /** Headline motion: `count` (default), `pop`, `slide`, `roll`, `flow`, or `scramble`. */
+    numberStyle?: AnimatedNumberVariant;
+    palette?: ChartPalette;
+    loading?: boolean;
+    /** `none` turns off decorative motion; reduced-motion users get this automatically. */
+    motion?: ChartMotion;
+    className?: string;
+    style?: CSSProperties | ChartStyle;
+}
+/**
+ * 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, barStyle, valueFormat, locale, formatValue: suppliedFormatValue, color, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: HorizontalBarChartCardProps<Row, Key>): ReactElement;

package/dist/cards/keys.d.ts

@@ -0,0 +1,19 @@
+/** Row keys whose values extend `Value`. Used to type key-based chart props. */
+export type KeysOfType<Row, Value> = {
+    [Key in keyof Row]-?: Row[Key] extends Value ? Key : never;
+}[keyof Row] & string;
+/** Row keys that hold a measurement. `null` and `undefined` are missing values. */
+export type NumericKey<Row> = KeysOfType<Row, number | null | undefined>;
+/** Row keys that hold text, such as category names. */
+export type TextKey<Row> = KeysOfType<Row, string>;
+/** Row keys usable as an x position: labels, numbers, or dates. */
+export type XKey<Row> = KeysOfType<Row, string | number | Date>;
+export type XKind = 'category' | 'number' | 'time';
+export interface ResolvedX<Row> {
+    kind: XKind;
+    /** Plot position. Category labels are placed by input order. */
+    position: (row: Row) => number;
+    format: (value: number) => string;
+}
+/** Infer the x kind from the first value, then build a position and a tick formatter. */
+export declare function resolveX<Row>(data: readonly Row[], key: string, kind?: XKind, format?: (value: string | number | Date) => string): ResolvedX<Row>;

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

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { CartesianCardProps } from './cartesian-card';
+import { NumericKey } from './keys';
+export interface LineChartCardProps<Row, Key extends NumericKey<Row>> extends CartesianCardProps<Row, Key> {
+    /** `smooth` uses a monotone curve, `linear` straight segments, `step` holds each value flat. */
+    curve?: 'smooth' | 'linear' | 'step';
+    /** Mark every observation with a small dot. Defaults to false. */
+    points?: boolean;
+    /**
+     * `auto` (default) fits the y axis to the data so trends fill the plot; `zero` starts it at
+     * zero when the absolute level matters.
+     */
+    baseline?: 'auto' | 'zero';
+}
+/**
+ * A complete line chart card: headline, delta, period, plot, and value tiles.
+ * The headline and tiles follow the hovered point, and the y pill follows the nearest line.
+ */
+export declare function LineChartCard<Row, const Key extends NumericKey<Row>>({ curve, points, baseline, ...props }: LineChartCardProps<Row, Key>): ReactElement;

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

@@ -0,0 +1,55 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { AnimatedNumberVariant } from '../motion/animated-number';
+import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+export interface ProgressRange {
+    id: string;
+    label: string;
+    value: number | null;
+    /** Defaults to the card's `target`. */
+    target?: number;
+    delta?: number;
+}
+export interface ProgressCardProps {
+    title: string;
+    /** The measured amount. `null` shows a dash and an empty track, never zero. */
+    value?: number | null;
+    /** The goal, in the same unit as the value. */
+    target: number;
+    /** Words under the percentage. Defaults to "of goal". */
+    label?: string;
+    /**
+     * `ring` (default) is a thin full ring, `thick` a heavy ring around a soft disc, and `gauge`
+     * a half ring that opens downward.
+     */
+    variant?: 'ring' | 'thick' | 'gauge';
+    /** Fractional change shown as a chip, e.g. 0.052 → +5.2%. */
+    delta?: number;
+    deltaTone?: 'default' | 'inverse' | 'neutral';
+    /** Static period label, e.g. "Last 7 days". */
+    range?: string;
+    /** Period select. Each range brings its own value, and optionally its own target and delta. */
+    ranges?: readonly ProgressRange[];
+    defaultRange?: string;
+    /** Content below the ring, e.g. a note on how the goal was set. */
+    footer?: ReactNode;
+    valueFormat?: Intl.NumberFormatOptions;
+    locale?: string;
+    formatValue?: (value: number) => string;
+    /** Any CSS color for the progress. Defaults to the palette's first color. */
+    color?: string;
+    surface?: ChartSurface;
+    /** A glass tab tucked behind the card's top edge, e.g. a caption, a command, or actions. */
+    badge?: ReactNode;
+    /** Headline motion: `count` (default), `pop`, `slide`, `roll`, `flow`, or `scramble`. */
+    numberStyle?: AnimatedNumberVariant;
+    palette?: ChartPalette;
+    loading?: boolean;
+    motion?: ChartMotion;
+    className?: string;
+    style?: CSSProperties | ChartStyle;
+}
+/**
+ * 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, delta: suppliedDelta, deltaTone, range, ranges, defaultRange, footer, valueFormat, locale, formatValue, color, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: ProgressCardProps): ReactElement;

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

@@ -0,0 +1,93 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { ChartMotion, ChartPalette, ChartStyle, ChartSurface } from '../types';
+import { CardRange, CardSeries } from './cartesian-card';
+import { NumericKey, TextKey } from './keys';
+import { AnimatedNumberVariant } from '../motion/animated-number';
+/** How the resting headline sums up the first series across dimensions. */
+export type RadarAggregate = 'mean' | 'sum' | 'max';
+export interface RadarChartCardProps<Row, Key extends NumericKey<Row>> {
+    title: string;
+    /** One row per dimension, in the order to draw them clockwise from the top. */
+    data?: readonly Row[];
+    /** Text field that names each dimension. Names must be unique. */
+    category: TextKey<Row>;
+    /**
+     * Profiles to compare, one numeric field each. Dashed series, such as a target, draw as an
+     * outline without a fill and stay out of the headline.
+     */
+    series: readonly CardSeries<Key>[];
+    /** Values at the center and the outer ring. Defaults to zero through a round maximum. */
+    domain?: readonly [number, number];
+    /** How the resting headline sums up the first series: `mean` (default), `sum`, or `max`. */
+    aggregate?: RadarAggregate;
+    /** `polygon` (default) rings follow the spokes; `circle` rings are round. */
+    grid?: 'polygon' | 'circle';
+    /** Plot height in pixels. Defaults to 300. */
+    height?: number;
+    /** Resting headline. Defaults to the `aggregate` of the first series. */
+    headline?: number;
+    /** Fractional change shown as a chip, e.g. 0.052 → +5.2%. */
+    delta?: number;
+    deltaTone?: 'default' | 'inverse' | 'neutral';
+    /** Static period label, e.g. "Q3". */
+    range?: string;
+    /** Period select. Each range replaces data, delta, and headline; profiles ease to their shape. */
+    ranges?: readonly CardRange<Row>[];
+    defaultRange?: string;
+    valueFormat?: Intl.NumberFormatOptions;
+    locale?: string;
+    formatValue?: (value: number) => string;
+    surface?: ChartSurface;
+    /** A glass tab tucked behind the card's top edge, e.g. a caption, a command, or actions. */
+    badge?: ReactNode;
+    /** Headline motion: `count` (default), `pop`, `slide`, `roll`, `flow`, or `scramble`. */
+    numberStyle?: AnimatedNumberVariant;
+    palette?: ChartPalette;
+    loading?: boolean;
+    /** `none` turns off decorative motion; reduced-motion users get this automatically. */
+    motion?: ChartMotion;
+    className?: string;
+    style?: CSSProperties | ChartStyle;
+}
+interface Dimension {
+    name: string;
+    /** One reading per series; `null` when missing. */
+    values: (number | null)[];
+}
+/** A label that doesn't fit its room breaks at the space nearest its middle. */
+export declare function labelLines(text: string, room: number): string[];
+/** Rows to dimensions, with the domain and any problem stated plainly. */
+export declare function radarDimensions<Row>({ data, category, series, domain: suppliedDomain, }: {
+    data: readonly Row[];
+    category: string;
+    series: readonly string[];
+    domain?: readonly [number, number];
+}): {
+    dimensions: Dimension[];
+    domain: readonly [number, number];
+    error: string | null;
+};
+/**
+ * A point on spoke `index` of `count`, `fraction` of the way out; spoke 0 points straight up.
+ * Rounded to hundredths of a pixel: server and browser trig can differ in the last digit, which
+ * would otherwise mismatch on hydration.
+ */
+export declare function spokePoint(index: number, count: number, fraction: number, radius: number): {
+    x: number;
+    y: number;
+};
+/**
+ * The outline of a profile. A missing value breaks the outline there and drops the fill, so a gap
+ * never reads as a low score.
+ */
+export declare function profilePath(fractions: readonly (number | null)[], radius: number): {
+    path: string;
+    complete: boolean;
+};
+/**
+ * A radar card: several dimensions on spokes around a center, one outline per profile, so the
+ * 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, locale, formatValue: suppliedFormatValue, surface, badge, numberStyle, palette, loading, motion: motionMode, className, style, }: RadarChartCardProps<Row, Key>): ReactElement;
+export {};