/**
 * ScrollBlur — blurs the edges of a scroll container.
 *
 * Content that runs past a boundary reads better receding than being cut off,
 * and a receding edge doubles as an affordance: an edge that is going soft is
 * an edge with more content behind it.
 *
 * A blur says that where a fade cannot: a fade takes the content towards the
 * colour behind the scroller, so it only works where that colour is known and
 * flat. A blur takes it out of focus instead, which is true over a photograph,
 * a gradient, or a list of coloured cards. It is also what belongs under
 * something laid *over* the scroller — a button, a header, a search field —
 * because the content passing beneath stays visible as shape and colour while
 * losing the detail that would compete with the thing on top.
 *
 * ```tsx
 * <ScrollBlur>
 *   <ScrollView>…</ScrollView>
 * </ScrollBlur>
 * ```
 *
 * ## The ramp is a stack and a wash, because neither alone is smooth
 *
 * A blur that goes from nothing to full across a band needs a per-pixel blur
 * radius, and there is no such thing on either platform — a blur view has one
 * strength for its whole rectangle.
 *
 * So the ramp is built out of several of them: each layer covers a shorter
 * span than the last, measured from the edge, and each blurs what the layer
 * under it has already blurred. The spans are spaced on a curve rather than
 * evenly, which puts most of the layers in the outer third where the blur is
 * changing fastest and the steps would otherwise be widest.
 *
 * That alone is not enough. Every layer has a hard edge, and a stack of hard
 * edges is a stack of visible lines however many there are. So a gradient of
 * `color` is washed over the top — opaque at the outer edge, clear at the
 * inner one. It hides the seams, and it is what makes the band read as one
 * material rather than as a pile of rectangles: the content goes soft and
 * fades into the surface at the same time, which is what the eye expects an
 * edge to do.
 *
 * That wash is why `color` matters even when the blur is drawn. Give it the
 * surface the scrollable actually sits on — a sheet, a card, the page — or the
 * band fades towards a colour that is not there.
 *
 * ## Where it cannot blur, it fades
 *
 * A real blur needs a native view. `expo-blur` is optional, and Reduce
 * Transparency is a preference that outranks the design, so both cases fall
 * back to a gradient towards `color` — the same thing `ScrollFade` draws. A
 * blur you cannot draw is better shown as a fade than as a hard edge, and far
 * better than as a crash.
 *
 * Because of that fallback, pass `color` whenever the scroller does not sit on
 * the theme background. It is unused in the blurred case and the whole effect
 * in the other one.
 *
 * Scroll position, content size and viewport size are held in shared values
 * and read on the UI thread, so scrolling never re-renders React.
 */
import { type ReactNode } from 'react';
import { type ViewProps } from 'react-native';
/** Which way the material tints. `default` follows the app's theme. */
export type ScrollBlurTint = 'light' | 'dark' | 'default';
export interface ScrollBlurProps extends ViewProps {
    className?: string;
    /** Depth of the blurred band in pixels. */
    size?: number;
    /** Which edges blur. */
    edges?: 'both' | 'start' | 'end' | 'none';
    /**
     * Scroll axis. Inferred from the child's `horizontal` prop when omitted —
     * pass it explicitly for children that scroll horizontally without that prop
     * (a `FlatList` with `horizontal` set through `contentContainerStyle`, say).
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * How many blur views make up the ramp. More is smoother and costs more; the
     * band shows visible steps below four, and past eight nobody can tell.
     */
    layers?: number;
    /** Blur strength at the very edge, 0–100. The layers share it between them. */
    intensity?: number;
    /**
     * Which way the material tints. Defaults to the app's theme rather than the
     * phone's, so an app running dark on a light phone does not blur light.
     */
    material?: ScrollBlurTint;
    /**
     * The colour the band fades towards — washed over the blur, and the whole
     * effect where there is no blur to draw.
     *
     * Defaults to the theme's background. Pass the surface the scrollable
     * actually sits on, or the band fades towards a colour that is not there.
     */
    color?: string;
    /**
     * How opaque that wash gets at the outer edge, 0 to 1. Lower it to let more
     * of the content show through the far end of the band; `0` leaves the blur
     * bare, along with the seams between its layers.
     */
    tint?: number;
    /** Distance in pixels over which an edge comes in from clear to full. */
    fadeInDistance?: number;
    /** Set false to render the child with no bands at all. */
    enabled?: boolean;
    children?: ReactNode;
}
export declare function ScrollBlur({ className, size, edges, orientation, layers, intensity, material, tint, color, fadeInDistance, enabled, children, ...props }: ScrollBlurProps): import("react").JSX.Element;
export declare namespace ScrollBlur {
    var displayName: string;
}
//# sourceMappingURL=index.d.ts.map