panelui-native 0.98.0 → 0.100.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/image-viewer/image-viewer-geometry.d.ts

@@ -0,0 +1,83 @@
+/**
+ * The arithmetic behind the image viewer, kept apart from the component.
+ *
+ * Every function here runs on the UI thread inside a gesture or an animated
+ * style, so each is a worklet. None of them touches React Native, which is what
+ * lets the contract tests run them in Node.
+ */
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Rect extends Size {
+    x: number;
+    y: number;
+}
+/** How much a rubber-banded overshoot gives. Lower is stiffer. */
+export declare const RUBBER_BAND = 0.55;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function lerp(from: number, to: number, t: number): number;
+export declare function lerpRect(from: Rect, to: Rect, t: number): Rect;
+/**
+ * The largest rect with the image's proportions that fits inside the box,
+ * centred in it. An image with no known size fills the box.
+ */
+export declare function fitContain(image: Size, box: Size): Rect;
+/** `fitContain` inside a rect that does not start at the origin. */
+export declare function fitWithin(image: Size, box: Rect): Rect;
+/**
+ * The smallest size with the image's proportions that covers the frame.
+ *
+ * A thumbnail crops its picture to its box; the viewer shows the whole of it.
+ * Drawing the image at this size inside a frame that grows from one to the
+ * other is what makes the crop open out instead of the picture jumping.
+ */
+export declare function coverSize(image: Size, frame: Size): Size;
+/**
+ * How far past its limit a value is allowed to travel, given how far it was
+ * pushed. The resistance grows with the push and never quite reaches `dimension`.
+ */
+export declare function rubberBand(overshoot: number, dimension: number, coefficient?: number): number;
+/** Clamps to `[min, max]`, letting the value stretch past either end with resistance. */
+export declare function rubberBandClamp(value: number, min: number, max: number, dimension: number, coefficient?: number): number;
+/**
+ * How far a zoomed image may be moved along one axis before its edge comes away
+ * from the screen's. Zero while the scaled image is smaller than the screen,
+ * which keeps it centred on that axis.
+ */
+export declare function panBound(fitted: number, scale: number, viewport: number): number;
+/**
+ * The translation that keeps a point under the fingers while the scale changes.
+ *
+ * `offset` is where that point sat relative to the image's centre when the
+ * pinch began, at `fromScale`; `focal` is the fingers' position now, relative
+ * to the screen's centre. The result is measured from the screen's centre too.
+ */
+export declare function focalTranslation(focal: number, offset: number, fromScale: number, toScale: number): number;
+/**
+ * The page a released pager settles on. Where it would have coasted to decides
+ * it rather than where it was let go, so a short flick still turns the page —
+ * but never by more than one, which is what a flick means.
+ */
+export declare function snapPage(offset: number, velocity: number, current: number, count: number, pageWidth: number): number;
+/** How far a drag has to travel, counting where it was flung, to close the viewer. */
+export declare const DISMISS_DISTANCE = 110;
+/**
+ * Whether a released drag closes the viewer.
+ *
+ * Measured on where the image was heading rather than where it was dropped, so
+ * a quick flick closes it from a short distance and a slow drag that is let go
+ * of carefully does not. A throw back towards the centre cancels.
+ */
+export declare function shouldDismiss(translation: number, velocity: number): boolean;
+/**
+ * How much of the backdrop is left while the image is dragged away from the
+ * centre. It is mostly gone by the time the drag would close the viewer, so the
+ * page coming back into focus is the warning that letting go will close it.
+ */
+export declare function dragFade(distance: number, viewport: number): number;
+/** How small the image gets while it is dragged. Never below 0.8 of its size. */
+export declare function dragScale(distance: number, viewport: number): number;
+/** Whether a point lands on a rect that has been scaled about its centre and moved. */
+export declare function hitsRect(px: number, py: number, rect: Rect, scale: number, tx: number, ty: number): boolean;
+//# sourceMappingURL=image-viewer-geometry.d.ts.map

package/lib/typescript/src/components/image-viewer/image-viewer-geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer-geometry.d.ts","sourceRoot":"","sources":["../../../../../src/components/image-viewer/image-viewer-geometry.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,IAAK,SAAQ,IAAI;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,kEAAkE;AAClE,eAAO,MAAM,WAAW,OAAO,CAAC;AAEhC,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGrE;AAED,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAGhE;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAQ9D;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,IAAI,CASvD;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,IAAI,CAItD;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,CAOxD;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAK7F;AAED,yFAAyF;AACzF,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,MAAM,GACnB,MAAM,CAOR;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGhF;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,GACd,MAAM,CAIR;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAChB,MAAM,CAMR;AAED,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAK5E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAInE;AAED,iFAAiF;AACjF,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAIpE;AAED,uFAAuF;AACvF,wBAAgB,QAAQ,CACtB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,EACb,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,GACT,OAAO,CAQT"}

package/lib/typescript/src/components/image-viewer/index.d.ts

@@ -0,0 +1,148 @@
+/**
+ * ImageViewer — a picture that opens out of the page to fill the screen.
+ *
+ * Pressing a trigger lifts its image from where it sits, grows it to the whole
+ * picture in the middle of the screen, and blurs the page behind it. From there
+ * it can be pinched and double-tapped to zoom, swiped sideways to the next
+ * image under the same root, and dragged away to put it back.
+ *
+ * ```tsx
+ * <ImageViewer>
+ *   {photos.map((photo) => (
+ *     <ImageViewer.Trigger
+ *       key={photo.id}
+ *       source={photo.source}
+ *       alt={photo.alt}
+ *       radius={12}
+ *       className="h-40 flex-1 rounded-xl"
+ *     />
+ *   ))}
+ * </ImageViewer>
+ * ```
+ *
+ * ## The image travels; nothing appears
+ *
+ * The viewer never fades a second copy of the picture in over the first. The
+ * thumbnail is hidden and the same image is drawn in a frame that starts at the
+ * thumbnail's exact rectangle and corner radius and ends at the fitted one. The
+ * picture inside that frame is always drawn at the size that *covers* it, so the
+ * crop a thumbnail shows opens out into the whole image as the frame grows — and
+ * closes back into the crop on the way home. That continuity is the point: the
+ * picture on screen is the one that was pressed, not a picture of it.
+ *
+ * The frame animates its bounds rather than a transform, because a transform
+ * cannot change a crop. It is one view with one child, so the layout pass it
+ * costs per frame is small.
+ *
+ * ## Every trigger under one root is a page
+ *
+ * Triggers register themselves with the root as they mount, in render order or
+ * by an explicit `index`. Opening one opens the gallery at its page, and the
+ * thumbnail hidden underneath follows the page — close on the third image and it
+ * flies back into the third thumbnail.
+ *
+ * ## One gesture surface, decided at the start
+ *
+ * Pinching, panning a zoomed image, turning the page and dragging to dismiss all
+ * begin as a one- or two-finger drag, and which one it is gets decided the
+ * moment it starts: two fingers zoom, one finger on a zoomed image pans it, one
+ * finger moving sideways across a gallery turns the page, and anything else
+ * drags the image away. Deciding once keeps a drag from changing its mind
+ * halfway, which is what makes a viewer feel loose.
+ */
+import { type ReactNode } from 'react';
+import { type ImageSourcePropType, type PressableProps } from 'react-native';
+export interface ImageViewerProps {
+    children?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled page — which trigger's image is showing, in page order. */
+    index?: number;
+    /** Initial page when uncontrolled. */
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /**
+     * Blur the page behind the picture. Needs the optional `expo-blur`, and dims
+     * instead without it. Reduce Transparency draws an opaque backdrop.
+     */
+    blur?: boolean;
+    /** How far a pinch can zoom in, as a multiple of the fitted size. */
+    maxScale?: number;
+    /** Where a double tap zooms to, as a multiple of the fitted size. */
+    doubleTapScale?: number;
+    /** Tick as a drag to dismiss begins. Needs the optional `expo-haptics`. */
+    haptics?: boolean;
+    /** Draw the close button. Tapping outside the picture and dragging it away still close it. */
+    showClose?: boolean;
+    /** Read out for the close button. */
+    closeLabel?: string;
+    /**
+     * Space kept between the open picture and the edges of the screen, in points.
+     * Measured from the safe area at the top and bottom, and the larger of the
+     * two is used for both, so the picture stays centred. `0` fills the screen.
+     */
+    inset?: number;
+    /**
+     * Corner radius of the open picture, in points. The corners stay this size on
+     * screen while the picture is zoomed or dragged. `0` squares them.
+     */
+    cornerRadius?: number;
+}
+declare function ImageViewerRoot({ children, open, defaultOpen, onOpenChange, index, defaultIndex, onIndexChange, blur, maxScale, doubleTapScale, haptics, showClose, closeLabel, inset, cornerRadius, }: ImageViewerProps): import("react").JSX.Element;
+export interface ImageViewerTriggerProps extends Omit<PressableProps, 'children' | 'style' | 'disabled'> {
+    /**
+     * Classes on the pressable. Without `children` the image fills it, so give it
+     * a size — `h-48 w-full`, `aspect-square flex-1`.
+     */
+    className?: string;
+    /** The picture. Shown in the page and, until `fullSource` loads, in the viewer. */
+    source: ImageSourcePropType;
+    /**
+     * A larger copy to show once the viewer is open. It loads when the viewer
+     * opens and replaces `source` when it arrives, so a feed can carry thumbnails.
+     */
+    fullSource?: ImageSourcePropType;
+    /** Described for a screen reader, on the trigger and in the viewer. */
+    alt?: string;
+    /** Shown under the picture while it is open. A string is set as text. */
+    caption?: ReactNode;
+    /** Page order within the root. Render order when left out. */
+    index?: number;
+    /**
+     * The corner radius the picture has in the page, in points, so the flight
+     * starts from the same shape. Match it to the `rounded-*` class you gave the
+     * trigger — a class cannot be read back.
+     */
+    radius?: number;
+    /**
+     * The image's own width and height, when known. Saves looking it up, and is
+     * the only way the viewer knows the proportions before a remote image loads.
+     */
+    width?: number;
+    height?: number;
+    /** Nothing opens, and the press is not reported. */
+    disabled?: boolean;
+    /**
+     * Draw the picture yourself — a `Post.Media`, a card. It should show `source`
+     * cropped to fill, the way the viewer's own flight starts. Left out, the
+     * trigger draws `source` to fill its box.
+     */
+    children?: ReactNode;
+}
+/**
+ * The thing pressed to open the viewer.
+ *
+ * It registers its picture with the root, so the gallery is simply every
+ * trigger under that root. While its picture is out on the screen it is drawn
+ * transparent — not removed, so the page does not reflow under the blur and the
+ * flight home has somewhere to land.
+ */
+declare function ImageViewerTrigger({ className, source, fullSource, alt, caption, index, radius, width, height, disabled, children, onPress, onLayout, ...props }: ImageViewerTriggerProps): import("react").JSX.Element;
+export declare const ImageViewer: typeof ImageViewerRoot & {
+    Trigger: typeof ImageViewerTrigger;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/image-viewer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/image-viewer/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAOL,KAAK,mBAAmB,EAExB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAyKtB,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,KAAK,EACL,YAAgB,EAChB,aAAa,EACb,IAAW,EACX,QAAY,EACZ,cAAoB,EACpB,OAAc,EACd,SAAgB,EAChB,UAAoB,EACpB,KAAqB,EACrB,YAAoC,GACrC,EAAE,gBAAgB,+BAuElB;AAMD,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,MAAM,EAAE,mBAAmB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmBD;;;;;;;GAOG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,MAAM,EACN,UAAU,EACV,GAAG,EACH,OAAO,EACP,KAAK,EACL,MAAU,EACV,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,+BAyGzB;AA0vBD,eAAO,MAAM,WAAW;;CAEtB,CAAC"}