panelui-native 0.100.0 → 0.101.1

package/lib/typescript/src/components/compare/index.d.ts

@@ -0,0 +1,183 @@
+/**
+ * Compare — two versions of one picture, with a seam the reader drags across
+ * it.
+ *
+ * ```tsx
+ * <Compare height={260}>
+ *   <Compare.After>
+ *     <Image source={retouched} style={{ width: '100%', height: '100%' }} />
+ *   </Compare.After>
+ *   <Compare.Before>
+ *     <Image source={original} style={{ width: '100%', height: '100%' }} />
+ *   </Compare.Before>
+ *   <Compare.Handle />
+ * </Compare>
+ * ```
+ *
+ * ## What it is for
+ *
+ * Showing that two images differ, when they differ in a way a pair of
+ * thumbnails side by side will not carry. Retouching, a filter, a render at two
+ * quality settings, a map at two dates: the change is spread across the frame
+ * rather than gathered in one place, and the eye cannot hold one image well
+ * enough to spot it in the other.
+ *
+ * The seam works because both versions are in the same place on the screen at
+ * the same scale. Every pixel the reader is comparing is a pixel that was just
+ * under the one beside it, so the difference arrives as movement rather than as
+ * something to be remembered.
+ *
+ * ## It clips, it does not resize
+ *
+ * The revealed side is a window onto a full-size copy of its content, not a
+ * copy of the content squeezed into the window. That distinction is the whole
+ * implementation: a view whose width is animated will lay its children out
+ * again at every new width, so an image inside one is an image being squashed
+ * and stretched as the seam moves, and the two halves stop lining up — which
+ * is the one thing this component exists to guarantee.
+ *
+ * It follows that the content has to be told how big to be, and the only thing
+ * that knows is the container once it has been measured. So nothing is drawn
+ * until the first layout pass has run, and `Compare.Before` sizes its child to
+ * the measured box rather than to itself.
+ *
+ * ## It needs a height
+ *
+ * Everything inside is positioned absolutely, so the box has no height of its
+ * own to take from its content. `height` is what gives it one. An image told to
+ * fill the box will fill whatever height is set here, and cropping is
+ * `resizeMode` on the image rather than anything this component does.
+ *
+ * ## Dragging, and the two ways round it
+ *
+ * The whole frame is the drag target, not just the knob — a knob is a small
+ * thing to hit on a phone and the reader's finger is already over the picture.
+ * The gesture only claims horizontal movement, so a Compare inside a scrolling
+ * page still scrolls.
+ *
+ * A drag is not available to everyone, so the seam is also `adjustable`: a
+ * screen reader moves it a `step` at a time without one, and `value` drives it
+ * from anywhere else — a button that snaps to the ends, an animation, a slider
+ * somewhere else on the screen.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+export type CompareOrientation = 'horizontal' | 'vertical';
+export interface CompareProps extends Omit<ViewProps, 'children'> {
+    className?: string;
+    /**
+     * How tall the frame is, in points.
+     *
+     * Required in practice rather than in the types: both sides are positioned
+     * absolutely, so there is no content left to give the box a height of its own.
+     */
+    height?: number;
+    /** Where the seam sits, `0` to `1`. Leave unset to let the frame track it. */
+    value?: number;
+    /** Where it starts when the frame is tracking it itself. */
+    defaultValue?: number;
+    /** Fires while the seam moves, with its new position. */
+    onValueChange?: (value: number) => void;
+    /** Fires once, when the finger is lifted. The one to persist. */
+    onValueCommit?: (value: number) => void;
+    /** Which way the seam runs. */
+    orientation?: CompareOrientation;
+    /** Freezes the seam where it is and takes it out of the accessibility tree. */
+    disabled?: boolean;
+    /** How far one screen-reader increment moves the seam, `0` to `1`. */
+    step?: number;
+    /** A tick when the seam reaches either end. */
+    haptics?: boolean;
+    children?: ReactNode;
+}
+declare function CompareRoot({ className, height, value, defaultValue, onValueChange, onValueCommit, orientation, disabled, step, haptics, children, ...props }: CompareProps): import("react").JSX.Element;
+declare namespace CompareRoot {
+    var displayName: string;
+}
+export interface CompareAfterProps extends ViewProps {
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * The side the seam uncovers as it travels: the whole frame, underneath.
+ *
+ * It is drawn at full size and never clipped, so it is the one that decides
+ * what the frame looks like at either end of the travel.
+ */
+declare function CompareAfter({ className, children, ...props }: CompareAfterProps): import("react").JSX.Element;
+declare namespace CompareAfter {
+    var displayName: string;
+    var layer: "base";
+}
+export interface CompareBeforeProps extends ViewProps {
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * The side on the near edge of the seam: a window onto the content, sized to
+ * the frame.
+ *
+ * The child is given the frame's measured size in points rather than a
+ * percentage. A percentage would be a percentage *of the window*, which shrinks
+ * as the seam closes — so the image would slide and scale under the seam
+ * instead of standing still behind it, and the two halves would no longer be
+ * the same picture in the same place.
+ */
+declare function CompareBefore({ className, children, ...props }: CompareBeforeProps): import("react").JSX.Element;
+declare namespace CompareBefore {
+    var displayName: string;
+    var layer: "clip";
+}
+export interface CompareHandleProps extends ViewProps {
+    className?: string;
+    /** Hide the two grip bars inside the knob. */
+    withGrip?: boolean;
+    /** Spoken name. */
+    accessibilityLabel?: string;
+    /** Replaces the knob. The line behind it is kept. */
+    children?: ReactNode;
+}
+/**
+ * The seam: a line across the frame with a knob on it.
+ *
+ * The knob is a marker rather than the target — the drag is on the whole frame,
+ * and a 36-point circle is not something to ask a thumb to find. What it is
+ * for is saying where the seam is and that it is the thing that moves, which a
+ * bare line does not.
+ *
+ * It carries the accessibility wiring for the same reason a splitter's handle
+ * does: it is the one part of this that is a control, so it is the part that is
+ * `adjustable` and takes the increment and decrement a screen reader sends
+ * instead of a drag.
+ */
+declare function CompareHandle({ className, withGrip, accessibilityLabel, children, style, ...props }: CompareHandleProps): import("react").JSX.Element;
+declare namespace CompareHandle {
+    var displayName: string;
+    var layer: "over";
+}
+export interface CompareLabelProps extends ViewProps {
+    className?: string;
+    /** Which side of the frame it sits on. */
+    side?: 'start' | 'end';
+    children?: ReactNode;
+}
+/**
+ * A caption pinned to one corner, for saying which side is which.
+ *
+ * Worth adding wherever the two versions are not obviously an original and an
+ * edit — two dates, two settings, two models. Where they are, it is one more
+ * thing over the picture and the picture is the point.
+ */
+declare function CompareLabel({ className, side, children, ...props }: CompareLabelProps): import("react").JSX.Element;
+declare namespace CompareLabel {
+    var displayName: string;
+    var layer: "over";
+}
+export declare const Compare: typeof CompareRoot & {
+    Before: typeof CompareBefore;
+    After: typeof CompareAfter;
+    Handle: typeof CompareHandle;
+    Label: typeof CompareLabel;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/compare/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/compare/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/planner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/planner/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/planner/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/sankey-chart/index.d.ts

@@ -0,0 +1,307 @@
+/**
+ * SankeyChart — where a quantity came from and where it ended up.
+ *
+ * ```tsx
+ * <SankeyChart nodes={stages} links={flows}>
+ *   <SankeyChart.Header title="Traffic" value="128,400" />
+ *   <SankeyChart.Links />
+ *   <SankeyChart.Nodes />
+ *   <SankeyChart.Labels />
+ *   <SankeyChart.Tooltip />
+ * </SankeyChart>
+ * ```
+ *
+ * ## What it answers that the other charts do not
+ *
+ * Every other chart here takes one set of things and measures them. This one
+ * takes two and says how much of the first became the second. A treemap cuts a
+ * total into its parts, a funnel counts what survived each step, a waterfall
+ * carries a balance from one figure to another — none of them can say that
+ * *this* source fed *that* destination, because none of them draws a thing that
+ * has two ends.
+ *
+ * So the question to bring to it is a routing question. Which campaigns
+ * produced which signups; which budget lines paid for which departments; what
+ * the traffic that arrived on the landing page went on to do. If the answer
+ * does not need a source *and* a target, one of the simpler charts will read
+ * better at the same size.
+ *
+ * ## The ribbon is the reading
+ *
+ * A ribbon's thickness is its value, on one scale shared by the whole diagram,
+ * so a ribbon twice as thick is twice as much wherever it is on the page. That
+ * is the only quantity here: the horizontal distance a ribbon travels is the
+ * number of columns between its ends and means nothing else, and the vertical
+ * order within a column is chosen to keep the ribbons from crossing rather than
+ * to rank anything.
+ *
+ * A node's height is what passes through it — the larger of what arrives and
+ * what leaves, which are the same number unless some of it went nowhere. Where
+ * they differ, give the node an explicit `value` to pin it; the diagram cannot
+ * infer a loss it was never told about.
+ *
+ * ## Columns are the flow's, not the caller's
+ *
+ * Nothing about the order of the `nodes` array decides where a node is drawn. A
+ * node that receives from another has to be drawn after it or its ribbon would
+ * run backwards, so the columns come out of the links. `align` only settles the
+ * cases the flow leaves open, and the default pushes every node that feeds
+ * nothing into the last column, so the diagram ends on a straight edge of
+ * destinations instead of a ragged one.
+ *
+ * ## Bad rows are dropped rather than fatal
+ *
+ * Flow data is nearly always joined together from somewhere nobody in the room
+ * owns, and it arrives with rows that name a node that is not there, carry a
+ * zero, or close a loop. A loop in particular has no left-to-right reading at
+ * all. All of them are dropped and counted, and `onDropLinks` reports how many
+ * — so a screen can say "3 rows could not be drawn" instead of going blank or
+ * quietly showing less than it was given.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type ChartAccessibilityProps } from '../../primitives/chart-accessibility.js';
+import { type SankeyAlign } from './sankey-layout.js';
+export type { SankeyAlign } from './sankey-layout.js';
+export type SankeyChartStatus = 'loading' | 'ready';
+export interface SankeyNode {
+    /** Stable key the links name. Must be unique; a repeat is ignored. */
+    id: string;
+    /** Name drawn beside the bar. Defaults to the id. */
+    label?: string;
+    /** Explicit colour, instead of the node's place in the palette. */
+    color?: string;
+    /**
+     * Pins what passes through the node, for a stage that loses some of what it
+     * received to somewhere the links do not describe. Left unset the node is
+     * worth the larger of what arrives and what leaves.
+     */
+    value?: number;
+}
+export interface SankeyLink {
+    /** `id` of the node it leaves. */
+    source: string;
+    /** `id` of the node it reaches. */
+    target: string;
+    /** How much travels. Zero, negative and non-finite rows are dropped. */
+    value: number;
+    /** Explicit colour, instead of taking the source node's. */
+    color?: string;
+}
+/** The selected node and what runs through it, for something drawn inside the chart. */
+export declare function useSankeyChart(): {
+    activeId: string | null;
+    activeNode: SankeyNode | null;
+    /** What passes through it — what the bar's height is drawn from. */
+    activeValue: number;
+    /** What arrives. Zero at a node the flow starts from. */
+    incoming: number;
+    /** What leaves. Zero at a node the flow ends at. */
+    outgoing: number;
+};
+export interface SankeyChartProps extends ViewProps, ChartAccessibilityProps<SankeyNode> {
+    className?: string;
+    /** The stages. Order does not decide position — the links do. */
+    nodes: SankeyNode[];
+    /** What travels between them. */
+    links: SankeyLink[];
+    /**
+     * How tall the diagram is drawn, in points.
+     *
+     * The width is the card's, but nothing in a flow says how deep it should be:
+     * a diagram of four nodes and one of forty are the same data at two heights,
+     * and which of them is right is a question about the screen.
+     */
+    height?: number;
+    /** How thick a node's bar is, in points. */
+    nodeWidth?: number;
+    /**
+     * The gap between two nodes in a column, in points.
+     *
+     * A maximum rather than a promise. A crowded column gives its spacing up
+     * before it gives up the height of its bars, because the bar is the reading.
+     */
+    nodePadding?: number;
+    /** Which column a node goes in where the flow leaves a choice. */
+    align?: SankeyAlign;
+    /** Relaxation rounds spent untangling the ribbons. */
+    iterations?: number;
+    /** How far a ribbon bends, `0` for a straight diagonal and `0.5` for an S. */
+    curve?: number;
+    /** The first hue. The rest of the palette follows from the theme's tokens. */
+    color?: string;
+    /** Milliseconds for one column to draw itself. */
+    animationDuration?: number;
+    /** Milliseconds between one column starting and the next. `0` for all at once. */
+    staggerDelay?: number;
+    /** `loading` draws a plain placeholder until the data arrives. */
+    status?: SankeyChartStatus;
+    /** Selected node. Leave unset to let the chart track it. */
+    activeId?: string | null;
+    /** Fires with the selected node's id, or `null` when the selection is cleared. */
+    onActiveIdChange?: (id: string | null) => void;
+    /**
+     * Fires with how many link rows could not be drawn — ones naming a node that
+     * is not there, carrying nothing, or closing a loop. `0` after a clean render,
+     * so a banner can be shown and taken away from the same signal.
+     */
+    onDropLinks?: (count: number) => void;
+    children?: ReactNode;
+}
+/** Imperative handle: re-run the entrance, for a "replay" control. */
+export interface SankeyChartHandle {
+    replay: () => void;
+}
+export interface SankeyChartLinksProps {
+    /** A ribbon's opacity at rest. */
+    opacity?: number;
+    /** A ribbon's opacity when its node is selected. */
+    activeOpacity?: number;
+    /** And when something else is. */
+    dimOpacity?: number;
+}
+/**
+ * The ribbons.
+ *
+ * Drawn before the bars so a bar sits on top of the flows that meet it, which
+ * is what gives a node a clean edge to arrive at instead of a fringe of ribbon
+ * ends poking through it.
+ *
+ * Translucent at rest, and that is not decoration. Ribbons cross — that is the
+ * shape of routed data — and an opaque one hides whatever passes under it, so
+ * the reader loses the smaller of every pair. At this opacity a crossing reads
+ * as two ribbons rather than as one with a notch in it.
+ */
+declare function SankeyChartLinks({ opacity, activeOpacity, dimOpacity, }: SankeyChartLinksProps): import("react").JSX.Element | null;
+declare namespace SankeyChartLinks {
+    var displayName: string;
+    var slot: "svg";
+}
+export interface SankeyChartNodesProps {
+    /** Corner radius on a node's bar, in points. */
+    radius?: number;
+    /** A bar's opacity when something else is selected. */
+    dimOpacity?: number;
+}
+/**
+ * The bars the ribbons run between.
+ *
+ * Solid where the ribbons are translucent, because a node is the one thing on
+ * the diagram that is not crossing anything else — it is the edge the flow
+ * arrives at, and it reads as an edge only if nothing shows through it.
+ */
+declare function SankeyChartNodes({ radius, dimOpacity }: SankeyChartNodesProps): import("react").JSX.Element | null;
+declare namespace SankeyChartNodes {
+    var displayName: string;
+    var slot: "svg";
+}
+export interface SankeyChartLabelsProps {
+    className?: string;
+    /** Format the figure beside a name. Defaults to a compact number. */
+    formatValue?: (value: number, node: SankeyNode) => string;
+    /** Show the figure under the name. */
+    showValue?: boolean;
+    /**
+     * Hide the name on a bar shorter than this, in points.
+     *
+     * A diagram of forty nodes has bars a few points tall, and forty names at
+     * that spacing overlap into a grey band that hides the flow behind it. The
+     * names that are dropped are the smallest ones, which is where the tooltip
+     * takes over.
+     */
+    minHeight?: number;
+}
+/**
+ * The names, and the press targets that go with them.
+ *
+ * Outside the bars rather than on them. A node's bar is as thick as it was
+ * asked to be — ten points by default — and no name fits inside ten points, so
+ * putting the name on the bar means widening every bar to suit the longest
+ * label and losing the width the ribbons need.
+ *
+ * Which side a name goes on is decided by the column: the last column reads
+ * inwards from the right edge, everything else outwards to the right. So the
+ * names stay inside the chart's box at both ends, instead of the leftmost and
+ * rightmost ones being clipped.
+ *
+ * The target is the label's row, not the bar. A node worth one percent of the
+ * flow is a two-point sliver and cannot be hit; the row it sits in can, and it
+ * is padded out to a proper target where the sliver is smaller than one.
+ */
+declare function SankeyChartLabels({ className, formatValue, showValue, minHeight, }: SankeyChartLabelsProps): import("react").JSX.Element | null;
+declare namespace SankeyChartLabels {
+    var displayName: string;
+    var slot: "overlay";
+}
+export interface SankeyChartTooltipProps {
+    className?: string;
+    /** Format the figures. Defaults to a compact number. */
+    formatValue?: (value: number) => string;
+}
+/**
+ * What the selected node carries: the total through it, and what that total is
+ * made of at each end.
+ *
+ * In and out are shown separately because they are the two readings a flow
+ * diagram is for, and they are only the same number when nothing was lost. A
+ * node where they differ is the interesting one on the whole chart, and a
+ * single total would hide exactly that.
+ *
+ * Anchored beside the node and clamped to the plot, so it never leaves the box
+ * it belongs to — a card half off the edge of a phone is a card nobody can read.
+ */
+declare function SankeyChartTooltip({ className, formatValue }: SankeyChartTooltipProps): import("react").JSX.Element | null;
+declare namespace SankeyChartTooltip {
+    var displayName: string;
+    var slot: "overlay";
+}
+export interface SankeyChartSkeletonProps {
+    color?: string;
+}
+/**
+ * The loading state: a few plain bars and the ribbons between them, carrying no
+ * values.
+ *
+ * Every bar the same height and every ribbon the same thickness, deliberately.
+ * A placeholder with varied thicknesses would be an invented routing, and a
+ * reader cannot tell an invented one from a real one until it changes under
+ * them — which is worse than showing nothing, because it is showing something
+ * wrong.
+ */
+declare function SankeyChartSkeleton({ color }: SankeyChartSkeletonProps): import("react").JSX.Element | null;
+declare namespace SankeyChartSkeleton {
+    var displayName: string;
+    var slot: "svg";
+}
+export interface SankeyChartHeaderProps extends ViewProps {
+    className?: string;
+    /** Small line above the value — what the flow is of. */
+    title?: string;
+    /** The readout. The largest thing on the card, and the first thing read. */
+    value?: string;
+    /** One muted line under the value — a period, a comparison, a caveat. */
+    caption?: string;
+    /** Trailing slot — a control, a badge, a range picker. */
+    children?: ReactNode;
+}
+/**
+ * The strip above the diagram: what the flow is of and what it totals.
+ *
+ * The value is not derived even though there are sources to add up, because the
+ * formatting is not the chart's to guess: 128400 is a count, a currency or a
+ * rate depending on what was routed.
+ */
+declare function SankeyChartHeader({ className, title, value, caption, children, ...props }: SankeyChartHeaderProps): import("react").JSX.Element;
+declare namespace SankeyChartHeader {
+    var displayName: string;
+    var slot: "header";
+}
+export declare const SankeyChart: import("react").ForwardRefExoticComponent<SankeyChartProps & import("react").RefAttributes<SankeyChartHandle>> & {
+    Header: typeof SankeyChartHeader;
+    Links: typeof SankeyChartLinks;
+    Nodes: typeof SankeyChartNodes;
+    Labels: typeof SankeyChartLabels;
+    Tooltip: typeof SankeyChartTooltip;
+    Skeleton: typeof SankeyChartSkeleton;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/sankey-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/sankey-chart/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/sankey-chart/sankey-layout.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Where a flow diagram's nodes and ribbons go.
+ *
+ * Kept apart from the component for the same reason the splitter's maths is:
+ * it is the part with answers that can be checked, and a test that has to
+ * mount a chart to check them is a test nobody writes twice.
+ *
+ * ## The problem the layout is solving
+ *
+ * A node's column is decided by the flow, not by the caller — a stage that
+ * receives from another has to be drawn after it or the ribbon runs backwards.
+ * Its height is its value. Neither of those is a choice. What is left over is
+ * the *order within a column*, and that is the whole difficulty: the same graph
+ * drawn in two orders is the same numbers with a different number of crossings,
+ * and crossings are the only thing that makes one of these unreadable.
+ *
+ * There is no cheap exact answer — minimising crossings is the kind of problem
+ * that is only solved by trying — so the order is settled by relaxation. Every
+ * node is pulled towards the average height of what it connects to, the pull
+ * weakens each round, and nodes that end up overlapping are pushed apart. Six
+ * rounds is where the picture stops visibly improving.
+ *
+ * ## Why it never throws
+ *
+ * A flow that loops back on itself has no left-to-right reading at all, and the
+ * textbook answer is to refuse the graph. A chart cannot refuse: the data is
+ * usually arriving from somewhere nobody in the room controls, and a screen
+ * that crashes on a bad row is worse than one that draws the rows it can. So a
+ * link that closes a loop is dropped, counted, and reported on the layout —
+ * the caller can say so, and the rest of the diagram is still true.
+ */
+/** Which column a node is pushed into when the flow leaves a choice. */
+export type SankeyAlign = 'justify' | 'left' | 'right' | 'center';
+export interface SankeyLayoutNodeInput {
+    /** Stable key the links name. */
+    id: string;
+    /**
+     * Pins the node's total, for a stage whose links do not account for all of
+     * it — a step that also loses some of what it received to nowhere.
+     */
+    value?: number;
+}
+export interface SankeyLayoutLinkInput {
+    source: string;
+    target: string;
+    value: number;
+}
+export interface SankeyLayoutOptions {
+    width: number;
+    height: number;
+    /** How thick a node's bar is drawn, in points. */
+    nodeWidth: number;
+    /** The gap asked for between two nodes in a column, in points. */
+    nodePadding: number;
+    align: SankeyAlign;
+    /** Relaxation rounds. More is steadier and slower; six is the useful knee. */
+    iterations: number;
+}
+export interface SankeyLayoutNode {
+    id: string;
+    /** Position in the input array, so a caller can find its own datum again. */
+    index: number;
+    /** Which column it landed in, counting from the left. */
+    layer: number;
+    /** What flows through it: the larger of what arrives and what leaves. */
+    value: number;
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+}
+export interface SankeyLayoutLink {
+    index: number;
+    /**
+     * Position in the caller's link array. Not the same as `index`: links that
+     * name nothing or close a loop are dropped, so the drawn order closes up
+     * behind them while this still points at the row it came from.
+     */
+    input: number;
+    /** Index into the laid-out nodes, not into the caller's array. */
+    source: number;
+    target: number;
+    value: number;
+    /** How thick the ribbon is, in points. */
+    width: number;
+    /** The ribbon's centre where it leaves the source, in points from the top. */
+    y0: number;
+    /** And where it meets the target. */
+    y1: number;
+}
+export interface SankeyLayout {
+    nodes: SankeyLayoutNode[];
+    links: SankeyLayoutLink[];
+    /** How many columns the flow turned out to need. */
+    columns: number;
+    /** Links dropped for closing a loop, naming nothing, or carrying nothing. */
+    dropped: number;
+}
+/**
+ * Lays out a flow diagram.
+ *
+ * Returns positions in points inside a `width` by `height` box. An input that
+ * cannot be drawn — no nodes, no room, nothing carrying a value — comes back
+ * empty rather than as a diagram of zeroes.
+ */
+export declare function sankeyLayout(nodeInput: readonly SankeyLayoutNodeInput[], linkInput: readonly SankeyLayoutLinkInput[], options: SankeyLayoutOptions): SankeyLayout;
+//# sourceMappingURL=sankey-layout.d.ts.map

package/lib/typescript/src/components/sankey-chart/sankey-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sankey-layout.d.ts","sourceRoot":"","sources":["../../../../../src/components/sankey-chart/sankey-layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,wEAAwE;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAElE,MAAM,WAAW,qBAAqB;IACpC,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,CAAC;CACjB;AAyQD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,qBAAqB,EAAE,EAC3C,SAAS,EAAE,SAAS,qBAAqB,EAAE,EAC3C,OAAO,EAAE,mBAAmB,GAC3B,YAAY,CAwQd"}

package/lib/typescript/src/components/typography/index.d.ts

@@ -41,7 +41,6 @@ declare const typographyVariants: import("tailwind-variants").TVReturnType<{
         'body-xs': string;
         /** Body, one step up — for a number or a name that carries the row. */
         large: string;
-        /** Body, one step down and tighter — captions, footnotes, meta. */
         small: string;
         blockquote: string;
         code: string;
@@ -91,7 +90,6 @@ declare const typographyVariants: import("tailwind-variants").TVReturnType<{
         'body-xs': string;
         /** Body, one step up — for a number or a name that carries the row. */
         large: string;
-        /** Body, one step down and tighter — captions, footnotes, meta. */
         small: string;
         blockquote: string;
         code: string;
@@ -141,7 +139,6 @@ declare const typographyVariants: import("tailwind-variants").TVReturnType<{
         'body-xs': string;
         /** Body, one step up — for a number or a name that carries the row. */
         large: string;
-        /** Body, one step down and tighter — captions, footnotes, meta. */
         small: string;
         blockquote: string;
         code: string;