@howells/hairline 0.0.0-stage → 0.1.0

package/lib/types/charts/svg.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode, SVGProps } from "react";
+type ChartSvgProps = Omit<SVGProps<SVGSVGElement>, "aria-label" | "role"> & {
+    children: ReactNode;
+    /**
+     * A sentence or two on what the data says, from the data passed in: read
+     * out after the name. Becomes the svg's <desc>.
+     */
+    desc?: string;
+    height: number;
+    /** The chart's accessible name, read out by screen readers and shown as its title. */
+    label: string;
+    /** Called as the pointer leaves the chart: usually the hover's `clear`. */
+    leave?: () => void;
+    /** A shorter hover title, when the label is a full reading of the data. */
+    title?: string;
+    width: number;
+};
+/**
+ * The svg every chart draws into: sized, an image with an accessible name
+ * (`label`) and a description (`desc`), and titled. Pointer handlers,
+ * classes and data attributes pass straight through.
+ */
+export declare const ChartSvg: ({ children, desc, height, label, leave, style, title, width, ...rest }: ChartSvgProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/text.d.ts

@@ -0,0 +1,36 @@
+import type { SVGProps } from "react";
+import type { TickMark } from "./axes.js";
+import type { StaggerTier } from "./motion.js";
+/** The text voices, as the t-* utilities in app.css. */
+export type Voice = "axis" | "figure" | "label" | "value";
+type LabelProps = Omit<SVGProps<SVGTextElement>, "order"> & {
+    anchor?: "end" | "middle" | "start";
+    /** Paper behind the letters, for text over lines and marks. */
+    halo?: boolean;
+    /** Centre the text on `y`; otherwise `y` is its baseline. */
+    middle?: boolean;
+    /** The quieter tone of a secondary label. */
+    muted?: boolean;
+    /** Fade in at this entry step; omit when the label's group fades. */
+    order?: number;
+    tier?: StaggerTier;
+    voice: Voice;
+};
+/**
+ * Text in one of the chart voices: axis, label, value or figure. It may
+ * centre on its y, sit on a halo, take the muted tone and fade in at an
+ * entry step; anything else (a hero tone, rotation) passes through.
+ */
+export declare const Label: ({ anchor, className, halo, middle, muted, order, style, tier, voice, ...rest }: LabelProps) => import("react").JSX.Element;
+/**
+ * A row of axis labels under a plot, each on its own x and one baseline.
+ * `flush` sets the first label from its x rather than centring it, so it
+ * cannot run off the plot's left edge.
+ */
+export declare const XLabels: (props: {
+    className?: string;
+    flush?: boolean;
+    ticks: readonly TickMark[];
+    y: number;
+}) => import("react").JSX.Element;
+export {};

package/lib/types/charts/texture-ids.d.ts

@@ -0,0 +1,24 @@
+/** The engraving pitches, in whole px. Every texture uses one of these. */
+export declare const TEXTURE_PITCH: {
+    /** Crosshatch: wider, so two families of lines never read as chequerboard. */
+    readonly cross: 6;
+    /** Dense screens, fine rules, beads, and dotted guides. */
+    readonly dense: 3;
+    /** Single diagonal hatch. */
+    readonly hatch: 4;
+    /** Dot screens and stipple. */
+    readonly screen: 4;
+};
+/**
+ * The halftone ladder: dot radii for five value steps on a 4px screen, from a
+ * fine stipple to dots that nearly touch. The top step stops short of merging,
+ * so even the darkest tile still reads as an engraved screen, never a flat grey.
+ */
+export declare const HALFTONE_R: readonly [0.75, 1, 1.3, 1.6, 1.85];
+/** `url(#id)` for a pattern fill. */
+export declare const paint: (id: string) => string;
+/**
+ * Unique pattern ids for one chart, all derived from a single `useSvgId`:
+ * call the result with a pattern's name to get its id.
+ */
+export declare const useTextureIds: (prefix: string) => (name: string) => string;

package/lib/types/charts/texture.d.ts

@@ -0,0 +1,185 @@
+import type { CSSProperties } from "react";
+interface PatternProps {
+    /** Fill class for the ground under the marks; paper unless a chart says otherwise. */
+    ground?: string;
+    id: string;
+    /** Grid pitch in whole px. */
+    pitch?: number;
+    /** Ramp fill class for the engraved marks, e.g. "fill-l3". */
+    tone: string;
+}
+interface HatchProps extends PatternProps {
+    /** Rising (/) by default, or falling (\). */
+    angle?: "falling" | "rising";
+}
+/** Diagonal hatch: one 1px line per tile, as a pixel staircase. */
+export declare const Hatch: ({ angle, ground, id, pitch, tone, }: HatchProps) => import("react").JSX.Element;
+/**
+ * Crosshatch: both diagonals, the falling one offset by half a pitch so the
+ * crossings spread evenly instead of stacking into a chequerboard.
+ */
+export declare const CrossHatch: ({ ground, id, pitch, tone, }: PatternProps) => import("react").JSX.Element;
+interface RulesProps extends PatternProps {
+    /** Level (horizontal) by default, or upright (vertical). */
+    angle?: "level" | "upright";
+}
+/** Fine rules: one 1px line every `pitch` px. */
+export declare const Rules: ({ angle, ground, id, pitch, tone, }: RulesProps) => import("react").JSX.Element;
+/** Stipple: one 1px dot per cell, alternate rows offset by half a pitch. */
+export declare const Stipple: ({ ground, id, pitch, tone, }: PatternProps) => import("react").JSX.Element;
+interface DotScreenProps extends PatternProps {
+    /** Dot radius; one radius per screen. Larger dots read as a darker step. */
+    r: number;
+}
+/**
+ * A halftone screen: one dot of fixed radius at the centre of every tile.
+ * A dot too big for its tile is drawn with the parts its neighbours spill
+ * in, so the darkest screens stay round instead of clipping square.
+ */
+export declare const DotScreen: ({ ground, id, pitch, r, tone, }: DotScreenProps) => import("react").JSX.Element;
+/**
+ * Beads: 1px columns every `pitch` px. Inside a 2px rung this reads as a row
+ * of evenly spaced dots: a broken rung. Unlike the other textures it has no
+ * ground unless given one, so the gaps show what is under the rung.
+ */
+export declare const Beads: ({ ground, id, pitch, tone, }: PatternProps) => import("react").JSX.Element;
+interface DottedLineProps {
+    /** Extra classes, e.g. motion. */
+    className?: string;
+    /** Pixel step between dots; 3 is the "provisional" and guide pitch. */
+    pitch?: number;
+    /** Ramp fill class for the dots, e.g. "fill-l4". */
+    tone: string;
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+}
+/**
+ * An evenly dotted straight guide, horizontal or vertical: 1px dots on whole
+ * pixels. Pass equal x0/x1 for a vertical line, equal y0/y1 for a horizontal.
+ */
+export declare const DottedLine: ({ className, pitch, tone, x0, x1, y0, y1, }: DottedLineProps) => import("react").JSX.Element;
+interface DotRingProps {
+    /** Extra classes, e.g. motion. */
+    className?: string;
+    cx: number;
+    cy: number;
+    /** Angles in radians, clockwise from noon; a full ring when omitted. */
+    from?: number;
+    r: number;
+    /** Arc-length step between dots in px. */
+    step?: number;
+    to?: number;
+    /** Ramp fill class for the dots, e.g. "fill-l4". */
+    tone: string;
+}
+/** An evenly dotted ring or arc: dots of one fixed radius at one fixed step. */
+export declare const DotRing: ({ className, cx, cy, from, r, step, to, tone, }: DotRingProps) => import("react").JSX.Element;
+interface Vertex {
+    x: number;
+    y: number;
+}
+interface DottedPathProps {
+    /** Extra classes, e.g. motion. */
+    className?: string;
+    /** Arc-length step between dots in px; 3 is the "provisional" pitch. */
+    pitch?: number;
+    /** The line's vertices, in order. */
+    points: Vertex[];
+    /** Ramp fill class for the dots, e.g. "fill-l4". */
+    tone: string;
+}
+/**
+ * An evenly dotted data line: DotRing's dots at one fixed arc-length step
+ * along any polyline. The provisional (future) stretch of a series.
+ */
+export declare const DottedPath: ({ className, pitch, points, tone, }: DottedPathProps) => import("react").JSX.Element;
+interface PixelLineProps {
+    /** Extra classes on the group, e.g. motion. */
+    className?: string;
+    /** Ramp fill class for the pixels, e.g. "fill-l4". */
+    tone: string;
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+}
+/**
+ * A 1px line at any angle drawn on whole pixels, the way the shared hatches
+ * are: crisp where an antialiased short line would smudge.
+ */
+export declare const PixelLine: (props: PixelLineProps) => import("react").JSX.Element;
+interface KeySwatchProps {
+    /** A pattern fill (`paint(id)`) or omit and pass a fill class in `tone`. */
+    fill?: string;
+    /** Fill class when the swatch is solid, e.g. "fill-hero". */
+    tone?: string;
+    x: number;
+    y: number;
+}
+/**
+ * The one key swatch: a 12 × 12 square, 2px corners, the series' texture on
+ * paper inside a 1px rule; big enough that a texture reads as itself. Every
+ * legend and key uses it. The swatch is translated to its own whole-pixel
+ * corner, so its texture starts the same way inside every key.
+ */
+export declare const KeySwatch: (props: KeySwatchProps) => import("react").JSX.Element;
+interface EngravedRectProps {
+    /** Outline tone, motion and hover classes, e.g. "stroke-l5 grow-x". */
+    className?: string;
+    /** The texture fill, `paint(id)`. */
+    fill: string;
+    /** Outer box in whole px: the 1px outline is its outermost pixels. */
+    height: number;
+    /**
+     * Where the inside of the box falls on the pattern's tile, in px (default
+     * 0, 0: the inside starts on a tile's first pixel). A rule pattern wants 1
+     * so its first line is not drawn against the outline.
+     */
+    lead?: {
+        x: number;
+        y: number;
+    };
+    onPointerEnter?: () => void;
+    style?: CSSProperties;
+    /**
+     * For dot screens and upright rules: engrave whole tiles only, stopping on
+     * a tile edge at least `clear` px before the right outline, so no mark is
+     * cut by it or drawn against it. The rest of the inside is paper.
+     */
+    whole?: {
+        clear: number;
+        pitch: number;
+    };
+    width: number;
+    x: number;
+    y: number;
+}
+/**
+ * A textured box: the pattern on paper inside a crisp 1px outline, with the
+ * pattern's tile pinned to the box rather than to the svg, so the texture
+ * starts the same way against the outline wherever the box sits.
+ */
+export declare const EngravedRect: (props: EngravedRectProps) => import("react").JSX.Element;
+interface PlateLabelProps {
+    /** Where `x` sits on the text. */
+    anchor?: "end" | "middle" | "start";
+    /** The text role, e.g. `t-value` (default) or `t-label`. */
+    className?: string;
+    /** On the ink hero: an ink plate with paper text. */
+    hero?: boolean;
+    /** A quieter lead-in before the text, in the axis voice: a series name before its value. */
+    lead?: string;
+    text: string;
+    x: number;
+    /** The text's vertical centre. */
+    y: number;
+}
+/**
+ * The one way to set text on a texture: a small paper plate cut out of the
+ * engraving, the text in ink on it (or an ink plate with paper text on the
+ * hero). Text over lines and marks, not a texture, keeps the `t-halo`.
+ */
+export declare const PlateLabel: ({ anchor, className, hero, lead, text, x, y, }: PlateLabelProps) => import("react").JSX.Element;
+export {};

package/lib/types/charts/util.d.ts

@@ -0,0 +1,66 @@
+import type { CSSProperties } from "react";
+import type { FontMetrics } from "../schema/metrics.js";
+import type { NoteNames } from "../schema/options.js";
+import type { StaggerTier } from "./motion.js";
+/** Join class names, skipping the empty and the switched-off. */
+export declare const cx: (...names: (false | null | string | undefined)[]) => string;
+export declare const clamp: (v: number, lo: number, hi: number) => number;
+export declare const sum: (values: readonly number[]) => number;
+/**
+ * The 7-day mean of a daily series, always over a full week: centred on each
+ * day, or trailing (the week ending on it). At the ends the window slides in
+ * rather than shrinking, so the line never lurches.
+ */
+export declare const weeklyMean: (values: readonly number[], align?: "centred" | "trailing") => number[];
+/** True when an optional string has content (a note, a label). */
+export declare const hasText: (s: string | undefined) => s is string;
+/**
+ * Entry-animation order: `i` places the mark in its group, `tier` sets the
+ * step between neighbours (a --stagger-* token). Without a tier each motion
+ * utility uses its own default.
+ */
+export declare const stagger: (i: number, tier?: StaggerTier) => CSSProperties;
+/**
+ * The default hover: the hovered record stays, the rest drop to 30%.
+ * Put it on every hoverable record group, dimmed or not, so it transitions.
+ */
+export declare const dimClass: (dim: boolean) => string;
+/** Rank of each value, 0 = largest (or smallest when `ascending`). */
+export declare const ranks: (values: readonly number[], ascending?: boolean) => number[];
+/** Line pitch of a wrapped footnote (measured with sansWidth, below). */
+export declare const NOTE_LINE = 12;
+/** Deterministic normal samples (Box–Muller over mulberry32), for demo data. */
+export declare const normals: (seed: number, n: number, mean: number, sd: number) => number[];
+/**
+ * Estimated width of a string in the Inter roles (`t-label`, `t-axis`) at
+ * `size` px, from a metrics table (Inter's unless the chart supplies its
+ * own). Errs slightly wide, so a label that "fits" really does. Never
+ * measures the DOM, so every environment gets the same answer.
+ */
+export declare const sansWidth: (text: string, size?: number, metrics?: FontMetrics) => number;
+/**
+ * Breaks a " · "-separated footnote into lines that fit `width`. Returns no
+ * lines (the note hides) when there is no text or when even one segment is
+ * wider than the room: a clipped footnote is worse than none.
+ */
+export declare const noteLines: (text: string | undefined, width: number, metrics?: FontMetrics) => string[];
+/**
+ * Vertical room to reserve for a footnote: `room` for its first line (the
+ * gap above it included) plus a line pitch per extra line; 0 when it hides.
+ */
+export declare const noteSpace: (text: string | undefined, width: number, room: number, metrics?: FontMetrics) => number;
+/**
+ * Greedy word wrap: lines no wider than `width` by `measure`. A single word
+ * wider than the room gets a line of its own (it is never split).
+ */
+export declare const wrapWords: (text: string, width: number, measure: (s: string) => number) => string[];
+/**
+ * A chart's in-plot note: `unitNote`, else the deprecated `note` it replaces.
+ * The one place the old name is read.
+ */
+export declare const noteOf: (props: NoteNames) => string | undefined;
+/**
+ * The size of one rung: `unit` as given, raised if a count of `largest` units
+ * would draw more rungs than a bar can show (a huge value, or a tiny unit).
+ */
+export declare const countingUnit: (unit: number, largest: number) => number;

package/lib/types/charts/value-grid.d.ts

@@ -0,0 +1,22 @@
+import type { ScaleLinear } from "d3-scale";
+interface ValueGridProps {
+    /** Rules are drawn only above this y; the baseline itself is the chart's own. */
+    floor: number;
+    format: (v: number) => string;
+    /** Keep the label of a tick on or below `floor` (its rule is still the baseline's). */
+    labelFloor?: boolean;
+    /**
+     * Left (default): values right-aligned in the margin left of `x0`. Right:
+     * the financial page's value scale, each value right-aligned to `x1` and
+     * sitting on its rule, next to the latest data.
+     */
+    side?: "left" | "right";
+    /** Tick values, usually `y.ticks(n)`. */
+    ticks: readonly number[];
+    x0: number;
+    x1: number;
+    y: ScaleLinear<number, number>;
+}
+/** Solid 1px value rules across the plot, each with its value: the one value grid. */
+export declare const ValueGrid: (props: ValueGridProps) => import("react").JSX.Element;
+export {};

package/lib/types/draw.d.ts

@@ -0,0 +1,279 @@
+import type { ReactElement } from "react";
+import type { Payload } from "./schema/validate.js";
+/**
+ * Every chart by kind: `drawers.slope(payload)` validates the payload and
+ * returns the element, or throws with the issues. The second argument is
+ * props a host adds to the payload (a first-render width, say).
+ */
+export declare const drawers: {
+    "dumbbell-queue": (payload: Payload, extra?: Partial<{
+        animate?: "mount" | "off" | "scroll" | undefined;
+        replayKey?: string | number | undefined;
+        fit?: boolean | undefined;
+        scale?: number | undefined;
+        strokes?: "device" | "proportional" | undefined;
+        idPrefix?: string | undefined;
+        metrics?: {
+            advances: Record<string, number>;
+            fallback: number;
+            tabular?: number | undefined;
+        } | undefined;
+        table?: boolean | undefined;
+        title?: string | undefined;
+        note?: string | undefined;
+        unitNote?: string | undefined;
+        alert?: "fall" | "rise" | undefined;
+        data: {
+            after: number;
+            before: number;
+            id?: string | undefined;
+            label: string;
+        }[];
+        emphasis?: string | undefined;
+        ends?: [string, string] | undefined;
+        format?: "compact" | "decimal" | "integer" | "percent" | {
+            compactDisplay?: "long" | "short" | undefined;
+            currency?: string | undefined;
+            locale?: string | undefined;
+            maximumFractionDigits?: number | undefined;
+            minimumFractionDigits?: number | undefined;
+            notation?: "compact" | "standard" | undefined;
+            signDisplay?: "always" | "auto" | "exceptZero" | "never" | undefined;
+            style?: "currency" | "decimal" | "percent" | "unit" | undefined;
+            unit?: string | undefined;
+            useGrouping?: boolean | undefined;
+        } | undefined;
+        height?: number | undefined;
+        initialWidth?: number | undefined;
+        unit?: number | undefined;
+        width?: number | undefined;
+    }>) => ReactElement;
+    "hairline-area": (payload: Payload, extra?: Partial<{
+        animate?: "mount" | "off" | "scroll" | undefined;
+        replayKey?: string | number | undefined;
+        fit?: boolean | undefined;
+        scale?: number | undefined;
+        strokes?: "device" | "proportional" | undefined;
+        idPrefix?: string | undefined;
+        metrics?: {
+            advances: Record<string, number>;
+            fallback: number;
+            tabular?: number | undefined;
+        } | undefined;
+        table?: boolean | undefined;
+        title?: string | undefined;
+        note?: string | undefined;
+        unitNote?: string | undefined;
+        data: {
+            date: string;
+            id?: string | undefined;
+            value: number | null;
+        }[];
+        dateFormat?: "day-month" | "day-month-year" | "month-year" | undefined;
+        emphasis?: string | undefined;
+        format?: "compact" | "decimal" | "integer" | "percent" | {
+            compactDisplay?: "long" | "short" | undefined;
+            currency?: string | undefined;
+            locale?: string | undefined;
+            maximumFractionDigits?: number | undefined;
+            minimumFractionDigits?: number | undefined;
+            notation?: "compact" | "standard" | undefined;
+            signDisplay?: "always" | "auto" | "exceptZero" | "never" | undefined;
+            style?: "currency" | "decimal" | "percent" | "unit" | undefined;
+            unit?: string | undefined;
+            useGrouping?: boolean | undefined;
+        } | undefined;
+        height?: number | undefined;
+        initialWidth?: number | undefined;
+        maxWidth?: number | undefined;
+        ticks?: number[] | undefined;
+        width?: number | undefined;
+    }>) => ReactElement;
+    "hairline-line": (payload: Payload, extra?: Partial<{
+        animate?: "mount" | "off" | "scroll" | undefined;
+        replayKey?: string | number | undefined;
+        fit?: boolean | undefined;
+        scale?: number | undefined;
+        strokes?: "device" | "proportional" | undefined;
+        idPrefix?: string | undefined;
+        metrics?: {
+            advances: Record<string, number>;
+            fallback: number;
+            tabular?: number | undefined;
+        } | undefined;
+        table?: boolean | undefined;
+        title?: string | undefined;
+        note?: string | undefined;
+        unitNote?: string | undefined;
+        data: {
+            date: string;
+            id?: string | undefined;
+            value: number | null;
+        }[];
+        dateFormat?: "day-month" | "day-month-year" | "month-year" | undefined;
+        emphasis?: string | undefined;
+        extreme?: "peak" | "trough" | undefined;
+        format?: "compact" | "decimal" | "integer" | "percent" | {
+            compactDisplay?: "long" | "short" | undefined;
+            currency?: string | undefined;
+            locale?: string | undefined;
+            maximumFractionDigits?: number | undefined;
+            minimumFractionDigits?: number | undefined;
+            notation?: "compact" | "standard" | undefined;
+            signDisplay?: "always" | "auto" | "exceptZero" | "never" | undefined;
+            style?: "currency" | "decimal" | "percent" | "unit" | undefined;
+            unit?: string | undefined;
+            useGrouping?: boolean | undefined;
+        } | undefined;
+        height?: number | undefined;
+        initialWidth?: number | undefined;
+        width?: number | undefined;
+    }>) => ReactElement;
+    "plumb-scatter": (payload: Payload, extra?: Partial<{
+        animate?: "mount" | "off" | "scroll" | undefined;
+        replayKey?: string | number | undefined;
+        fit?: boolean | undefined;
+        scale?: number | undefined;
+        strokes?: "device" | "proportional" | undefined;
+        idPrefix?: string | undefined;
+        metrics?: {
+            advances: Record<string, number>;
+            fallback: number;
+            tabular?: number | undefined;
+        } | undefined;
+        table?: boolean | undefined;
+        title?: string | undefined;
+        note?: string | undefined;
+        unitNote?: string | undefined;
+        data: {
+            id?: string | undefined;
+            label: string;
+            x: number;
+            y: number;
+        }[];
+        emphasis?: string | undefined;
+        format?: "compact" | "decimal" | "integer" | "percent" | {
+            compactDisplay?: "long" | "short" | undefined;
+            currency?: string | undefined;
+            locale?: string | undefined;
+            maximumFractionDigits?: number | undefined;
+            minimumFractionDigits?: number | undefined;
+            notation?: "compact" | "standard" | undefined;
+            signDisplay?: "always" | "auto" | "exceptZero" | "never" | undefined;
+            style?: "currency" | "decimal" | "percent" | "unit" | undefined;
+            unit?: string | undefined;
+            useGrouping?: boolean | undefined;
+        } | undefined;
+        formatX?: "compact" | "decimal" | "integer" | "percent" | {
+            compactDisplay?: "long" | "short" | undefined;
+            currency?: string | undefined;
+            locale?: string | undefined;
+            maximumFractionDigits?: number | undefined;
+            minimumFractionDigits?: number | undefined;
+            notation?: "compact" | "standard" | undefined;
+            signDisplay?: "always" | "auto" | "exceptZero" | "never" | undefined;
+            style?: "currency" | "decimal" | "percent" | "unit" | undefined;
+            unit?: string | undefined;
+            useGrouping?: boolean | undefined;
+        } | undefined;
+        height?: number | undefined;
+        initialWidth?: number | undefined;
+        labelled?: string[] | undefined;
+        width?: number | undefined;
+        xDomain?: [number, number] | undefined;
+        xLabels?: [string, string] | undefined;
+        yDomain?: [number, number] | undefined;
+        yLabel?: string | undefined;
+    }>) => ReactElement;
+    "rung-bars": (payload: Payload, extra?: Partial<{
+        animate?: "mount" | "off" | "scroll" | undefined;
+        replayKey?: string | number | undefined;
+        fit?: boolean | undefined;
+        scale?: number | undefined;
+        strokes?: "device" | "proportional" | undefined;
+        idPrefix?: string | undefined;
+        metrics?: {
+            advances: Record<string, number>;
+            fallback: number;
+            tabular?: number | undefined;
+        } | undefined;
+        table?: boolean | undefined;
+        title?: string | undefined;
+        note?: string | undefined;
+        unitNote?: string | undefined;
+        data: {
+            id?: string | undefined;
+            label: string;
+            value: number;
+        }[];
+        emphasis?: string | undefined;
+        format?: "compact" | "decimal" | "integer" | "percent" | {
+            compactDisplay?: "long" | "short" | undefined;
+            currency?: string | undefined;
+            locale?: string | undefined;
+            maximumFractionDigits?: number | undefined;
+            minimumFractionDigits?: number | undefined;
+            notation?: "compact" | "standard" | undefined;
+            signDisplay?: "always" | "auto" | "exceptZero" | "never" | undefined;
+            style?: "currency" | "decimal" | "percent" | "unit" | undefined;
+            unit?: string | undefined;
+            useGrouping?: boolean | undefined;
+        } | undefined;
+        height?: number | undefined;
+        initialWidth?: number | undefined;
+        unit?: number | undefined;
+        width?: number | undefined;
+    }>) => ReactElement;
+    slope: (payload: Payload, extra?: Partial<{
+        animate?: "mount" | "off" | "scroll" | undefined;
+        replayKey?: string | number | undefined;
+        fit?: boolean | undefined;
+        scale?: number | undefined;
+        strokes?: "device" | "proportional" | undefined;
+        idPrefix?: string | undefined;
+        metrics?: {
+            advances: Record<string, number>;
+            fallback: number;
+            tabular?: number | undefined;
+        } | undefined;
+        table?: boolean | undefined;
+        title?: string | undefined;
+        domain?: [number, number] | undefined;
+        emphasis?: string | undefined;
+        format?: "compact" | "decimal" | "integer" | "percent" | {
+            compactDisplay?: "long" | "short" | undefined;
+            currency?: string | undefined;
+            locale?: string | undefined;
+            maximumFractionDigits?: number | undefined;
+            minimumFractionDigits?: number | undefined;
+            notation?: "compact" | "standard" | undefined;
+            signDisplay?: "always" | "auto" | "exceptZero" | "never" | undefined;
+            style?: "currency" | "decimal" | "percent" | "unit" | undefined;
+            unit?: string | undefined;
+            useGrouping?: boolean | undefined;
+        } | undefined;
+        height?: number | undefined;
+        initialWidth?: number | undefined;
+        label?: string | undefined;
+        labels: [string, string];
+        narrowFormat?: "compact" | "decimal" | "integer" | "percent" | {
+            compactDisplay?: "long" | "short" | undefined;
+            currency?: string | undefined;
+            locale?: string | undefined;
+            maximumFractionDigits?: number | undefined;
+            minimumFractionDigits?: number | undefined;
+            notation?: "compact" | "standard" | undefined;
+            signDisplay?: "always" | "auto" | "exceptZero" | "never" | undefined;
+            style?: "currency" | "decimal" | "percent" | "unit" | undefined;
+            unit?: string | undefined;
+            useGrouping?: boolean | undefined;
+        } | undefined;
+        rows: {
+            from: number;
+            id?: string | undefined;
+            name: string;
+            to: number;
+        }[];
+        width?: number | undefined;
+    }>) => ReactElement;
+};

package/lib/types/entries/dumbbell-queue.d.ts

@@ -0,0 +1,2 @@
+export { DumbbellQueue } from "../charts/basics/dumbbell-queue.js";
+export type { DumbbellDatum, DumbbellQueueData, DumbbellQueueProps, } from "../schema/dumbbell-queue.js";

package/lib/types/entries/hairline-area.d.ts

@@ -0,0 +1,2 @@
+export { HairlineArea } from "../charts/basics/hairline-area.js";
+export type { HairlineAreaData, HairlineAreaProps, } from "../schema/hairline-area.js";

package/lib/types/entries/hairline-line.d.ts

@@ -0,0 +1,2 @@
+export { HairlineLine } from "../charts/basics/hairline-line.js";
+export type { HairlineLineData, HairlineLineProps, } from "../schema/hairline-line.js";

package/lib/types/entries/plumb-scatter.d.ts

@@ -0,0 +1,2 @@
+export { PlumbScatter } from "../charts/basics/plumb-scatter.js";
+export type { PlumbDatum, PlumbScatterData, PlumbScatterProps, } from "../schema/plumb-scatter.js";

package/lib/types/entries/rung-bars.d.ts

@@ -0,0 +1,2 @@
+export { RungBars } from "../charts/basics/rung-bars.js";
+export type { RungDatum, RungBarsData, RungBarsProps, } from "../schema/rung-bars.js";

package/lib/types/entries/slope.d.ts

@@ -0,0 +1,2 @@
+export { Slope } from "../charts/board/slope.js";
+export type { SlopeRow, SlopeData, SlopeProps } from "../schema/slope.js";

package/lib/types/frame.d.ts

@@ -0,0 +1,2 @@
+export { Frame } from "./charts/frame.js";
+export type { FrameProps } from "./charts/frame.js";