panelui-native 0.99.0 → 0.101.0

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

@@ -0,0 +1,267 @@
+/**
+ * BumpChart — how a set of things ranked against each other over time.
+ *
+ * ```tsx
+ * <BumpChart data={standings} xDataKey="week" defaultHighlight="harbour">
+ *   <BumpChart.Grid />
+ *   <BumpChart.Line dataKey="harbour" label="Harbour" />
+ *   <BumpChart.Line dataKey="northside" label="Northside" />
+ *   <BumpChart.YAxis />
+ *   <BumpChart.XAxis />
+ *   <BumpChart.Labels />
+ *   <BumpChart.Tooltip />
+ * </BumpChart>
+ * ```
+ *
+ * ## Positions, not values
+ *
+ * The y-axis is the rank, so the rows are evenly spaced whatever the gap
+ * between the underlying scores. That is the point of the chart: who passed
+ * whom, and when. A line chart of the same scores answers how far apart they
+ * were, and loses the order wherever two lines run close together.
+ *
+ * Pass the ranks directly, or pass the scores with `values="score"` and each
+ * column is ranked for you, highest first. `bumpRanks` is exported so a header
+ * or a table beside the chart can read the same order the chart drew.
+ *
+ * ## One line at a time
+ *
+ * Past three or four series, every line in its own colour is a tangle. The
+ * chart reads best with one line picked out: `highlight` draws that one in its
+ * colour and on top, and the rest in a muted grey. Tapping a name in
+ * `BumpChart.Labels` picks that line, and tapping it again clears it.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type ChartAccessibilityProps } from '../../primitives/chart-accessibility.js';
+import { type SeriesColorIndex } from '../../utils/chart.js';
+type Layer = 'svg' | 'series' | 'overlay' | 'header';
+export type BumpChartStatus = 'loading' | 'ready';
+export type BumpChartDatum = Record<string, string | number | null | undefined>;
+/** Ranks per series key, one entry per row. `null` where a series has none. */
+export type BumpRanks = Record<string, (number | null)[]>;
+/**
+ * Each series' rank in every row.
+ *
+ * With `values: 'rank'` the rows already hold ranks and they are only
+ * validated. With `values: 'score'` each row is ranked highest first; a tie
+ * keeps the order the keys are passed in, so two equal scores never draw on
+ * top of each other.
+ */
+export declare function bumpRanks(data: BumpChartDatum[], keys: string[], options?: {
+    values?: 'rank' | 'score';
+}): BumpRanks;
+/** The row under the scrub, and which line is picked out. */
+export declare function useBumpChart(): {
+    activeIndex: number;
+    activePoint: BumpChartDatum | null;
+    xDataKey: string;
+    ranks: BumpRanks;
+    highlight: string | null;
+    setHighlight: (key: string | null) => void;
+};
+export interface BumpChartProps extends ViewProps, ChartAccessibilityProps<BumpChartDatum> {
+    className?: string;
+    /** The rows. Each one is a column: a week, a round, a release. */
+    data: BumpChartDatum[];
+    /** Key holding the column's label. */
+    xDataKey?: string;
+    /**
+     * What the series columns hold. `rank` (the default) takes them as places,
+     * `1` at the top. `score` ranks every row for you, highest first.
+     */
+    values?: 'rank' | 'score';
+    /**
+     * The series drawn in its colour and on top, with the rest muted. `null`
+     * picks none, and every line keeps its own colour. Controlled — pair it with
+     * `onHighlightChange`.
+     */
+    highlight?: string | null;
+    /** The series picked out on first render, when `highlight` is not passed. */
+    defaultHighlight?: string | null;
+    /** Called when a name in `BumpChart.Labels` is tapped. */
+    onHighlightChange?: (key: string | null) => void;
+    /**
+     * `loading` hides the lines and shows `BumpChart.Skeleton` if there is one.
+     * The lines are revealed when it turns `ready`.
+     */
+    status?: BumpChartStatus;
+    /** Width ÷ height. */
+    aspectRatio?: number;
+    /** Milliseconds for the reveal on mount. */
+    animationDuration?: number;
+    /** Milliseconds for the lines to move to new places when the data changes. */
+    morphDuration?: number;
+    /**
+     * The column under the scrub as it moves, and `-1`/`null` when it lifts.
+     * Fires when the index changes, not per frame.
+     */
+    onActiveIndexChange?: (index: number, datum: BumpChartDatum | null) => void;
+    /** Drop the axis padding, for a chart with no axes. */
+    compact?: boolean;
+    children?: ReactNode;
+}
+/** Imperative handle: re-run the reveal on demand, for a "replay" control. */
+export interface BumpChartHandle {
+    replay: () => void;
+}
+export interface BumpChartGridProps {
+    /** A guide down every column. */
+    vertical?: boolean;
+    /** A guide across every rank. */
+    horizontal?: boolean;
+    color?: string;
+    dashArray?: string;
+    opacity?: number;
+}
+/** Guides down each column, so a dot can be read against the label below it. */
+declare function BumpChartGrid({ vertical, horizontal, color, dashArray, opacity, }: BumpChartGridProps): import("react").JSX.Element;
+declare namespace BumpChartGrid {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface BumpChartLineProps {
+    /** Column in the data holding this series' rank, or its score with `values="score"`. */
+    dataKey: string;
+    /** The name shown by `Labels`, the tooltip and the legend. Defaults to `dataKey`. */
+    label?: string;
+    /** Explicit colour. Defaults to the `--color-chart-*` token for `colorIndex`. */
+    color?: string;
+    /** Which of the five chart tokens to take. */
+    colorIndex?: SeriesColorIndex;
+    /** Thickness of the line. The picked-out line is drawn one point thicker. */
+    strokeWidth?: number;
+    /** Draw a dot at every column. */
+    showDots?: boolean;
+}
+/**
+ * One series. It draws nothing itself: the lines are drawn together, so the
+ * one picked out can be drawn last and sit on top of every crossing.
+ */
+declare function BumpChartLine({ dataKey, label, color, colorIndex, strokeWidth, showDots, }: BumpChartLineProps): null;
+declare namespace BumpChartLine {
+    var displayName: string;
+    var layer: Layer;
+    var line: true;
+}
+export interface BumpChartSkeletonProps {
+    /** Milliseconds for one pass of the sweep. */
+    duration?: number;
+    color?: string;
+    /** How many rank rows to stand in for. */
+    rows?: number;
+}
+/**
+ * The loading state: a thin bar on every rank row with a highlight travelling
+ * across them. Flat, so it says where the lines will be and nothing about
+ * where they go.
+ */
+declare function BumpChartSkeleton({ duration, color, rows: rowsProp }: BumpChartSkeletonProps): import("react").JSX.Element | null;
+declare namespace BumpChartSkeleton {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface BumpChartXAxisProps {
+    /** How many columns to label, spread across the run. */
+    ticks?: number;
+    format?: (datum: BumpChartDatum, index: number) => string;
+    className?: string;
+}
+/** The column labels. Real text, so they follow the theme's font and text scaling. */
+declare function BumpChartXAxis({ ticks, format, className }: BumpChartXAxisProps): import("react").JSX.Element;
+declare namespace BumpChartXAxis {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface BumpChartYAxisProps {
+    /** Format a rank. Defaults to `#1`, `#2`… */
+    format?: (rank: number) => string;
+    className?: string;
+}
+/** The ranks down the side, one on every row. */
+declare function BumpChartYAxis({ format, className }: BumpChartYAxisProps): import("react").JSX.Element;
+declare namespace BumpChartYAxis {
+    var displayName: string;
+    var layer: Layer;
+    var axis: "y";
+}
+export interface BumpChartLabelsProps {
+    /** Room kept to the right of the plot for the names. Longer names are cut short. */
+    width?: number;
+    /** Let a tap on a name pick that line out, and a second tap clear it. */
+    pressable?: boolean;
+    className?: string;
+}
+/**
+ * Each series' name beside its last point, so the lines can be told apart
+ * without a legend to look across to. The names move with their lines when
+ * the data changes.
+ */
+declare function BumpChartLabels({ pressable, className }: BumpChartLabelsProps): import("react").JSX.Element | null;
+declare namespace BumpChartLabels {
+    var displayName: string;
+    var layer: Layer;
+    var labels: true;
+}
+export interface BumpChartTooltipProps {
+    color?: string;
+    /** Format a rank in the readout. Defaults to `#1`, `#2`… */
+    formatRank?: (rank: number) => string;
+    /** Format the readout's heading from the row. Defaults to the value at xDataKey. */
+    formatX?: (datum: BumpChartDatum) => string;
+    className?: string;
+}
+/**
+ * A scrub across the columns, and a readout listing every series in the order
+ * it stood at the column under the finger.
+ */
+declare function BumpChartTooltip({ color, formatRank, formatX, className }: BumpChartTooltipProps): import("react").JSX.Element | null;
+declare namespace BumpChartTooltip {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface BumpChartLegendProps extends ViewProps {
+    className?: string;
+}
+/** A swatch and a name per series, in declaration order. */
+declare function BumpChartLegend({ className, ...props }: BumpChartLegendProps): import("react").JSX.Element | null;
+declare namespace BumpChartLegend {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface BumpChartHeaderProps extends ViewProps {
+    className?: string;
+    /** Small line above the value — what the chart 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 total. */
+    caption?: string;
+    /** Draw a swatch and a name per series along the trailing edge. */
+    legend?: boolean;
+    /** Trailing slot — a control, a badge, a range picker. Wins over `legend`. */
+    children?: ReactNode;
+}
+/**
+ * The strip above the plot: what the chart is of and what it currently reads.
+ * The value is not derived here — pass the formatted string, from
+ * `onActiveIndexChange` or `onHighlightChange` if it follows the chart.
+ */
+declare function BumpChartHeader({ className, title, value, caption, legend, children, ...props }: BumpChartHeaderProps): import("react").JSX.Element;
+declare namespace BumpChartHeader {
+    var displayName: string;
+    var layer: Layer;
+}
+export declare const BumpChart: import("react").ForwardRefExoticComponent<BumpChartProps & import("react").RefAttributes<BumpChartHandle>> & {
+    Header: typeof BumpChartHeader;
+    Grid: typeof BumpChartGrid;
+    Line: typeof BumpChartLine;
+    Skeleton: typeof BumpChartSkeleton;
+    XAxis: typeof BumpChartXAxis;
+    YAxis: typeof BumpChartYAxis;
+    Labels: typeof BumpChartLabels;
+    Tooltip: typeof BumpChartTooltip;
+    Legend: typeof BumpChartLegend;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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

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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"}