/**
 * SectionRail — a floating navigator for a long screen.
 *
 * A stack of short bars pinned to one edge, one per section, that expands into
 * a labelled panel when you touch it. Collapsed it is a position indicator you
 * can read at a glance without giving up any content width; expanded it is a
 * list you can jump from.
 *
 * The bars are deliberately unlabelled. A permanent list of section titles
 * down the side of a phone screen is either too small to read or too wide to
 * keep — the bars carry only the two things that survive at that size, which
 * section you are in and roughly how deep it sits.
 *
 * ```tsx
 * <SectionRail value={active} onValueChange={scrollTo}>
 *   <SectionRail.Trigger>
 *     <SectionRail.Bar value="intro" />
 *     <SectionRail.Bar value="setup" level={1} />
 *   </SectionRail.Trigger>
 *   <SectionRail.Content>
 *     <SectionRail.Item value="intro">Introduction</SectionRail.Item>
 *     <SectionRail.Item value="setup" level={1}>Setup</SectionRail.Item>
 *   </SectionRail.Content>
 * </SectionRail>
 * ```
 *
 * It floats: the root is absolutely positioned and lets touches through
 * everywhere it is not drawing, so the content underneath still scrolls.
 */
import { type ReactNode } from 'react';
import { type ViewProps } from 'react-native';
export type SectionRailPlacement = 'left' | 'right';
export type SectionRailAlign = 'center' | 'top' | 'bottom';
export interface SectionRailProps extends ViewProps {
    className?: string;
    /** Which edge the rail sits against. */
    placement?: SectionRailPlacement;
    /**
     * Where along that edge it sits. `bottom` puts it in a corner, out of the
     * way of the text — the panel then opens upward from the rail rather than
     * centred on the screen.
     */
    align?: SectionRailAlign;
    /**
     * Tick under the finger on every change of section, however it was made —
     * tapped in the panel, or scrolled past. Needs the optional `expo-haptics`
     * package; without it this does nothing.
     */
    haptics?: boolean;
    /** Active section id. Controlled — usually driven by a scroll handler. */
    value?: string;
    /** Starting section when uncontrolled. */
    defaultValue?: string;
    /** Fires when a section is chosen from the expanded panel. */
    onValueChange?: (value: string) => void;
    /** Controlled expansion. */
    open?: boolean;
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
    /**
     * How long the panel stays up after a choice, so a mis-tap can be corrected
     * without opening it again. Set 0 to close immediately.
     */
    closeDelay?: number;
    /** Gap between the rail and the edge of the safe area. */
    offset?: number;
    children: ReactNode;
}
declare function SectionRailRoot({ className, placement, align, haptics, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, closeDelay, offset, children, ...props }: SectionRailProps): import("react").JSX.Element;
export interface SectionRailTriggerProps extends ViewProps {
    className?: string;
    children: ReactNode;
}
/**
 * The collapsed rail. Wraps the bars and opens the panel on press — one target
 * over the whole stack rather than one per bar, because a 3px bar is not
 * something anyone can hit.
 */
declare function SectionRailTrigger({ className, children, ...props }: SectionRailTriggerProps): import("react").JSX.Element;
export interface SectionRailBarProps {
    className?: string;
    /** Section this bar stands for. Matches the root's `value`. */
    value: string;
    /** Nesting depth. Deeper levels draw a shorter bar. */
    level?: number;
}
/**
 * One section, drawn as a bar.
 *
 * Three lengths rather than two: the active bar is longest and brightest, the
 * bars either side of it keep a share of that, and everything further away sits
 * at the resting length. What the reader gets from the extra step is *where* in
 * the run they are without counting bars — the slope points at the middle of it.
 */
declare function SectionRailBar({ className, value, level }: SectionRailBarProps): import("react").JSX.Element;
export interface SectionRailContentProps extends ViewProps {
    className?: string;
    /**
     * How wide the panel may grow, as a fraction of the screen or a point width.
     * The default leaves room for the rail and the edge it is anchored to; raise
     * it for a screen whose section titles are long enough to be worth wrapping
     * rather than truncating.
     */
    maxWidth?: number | `${number}%`;
    children: ReactNode;
}
/**
 * The expanded panel. Mounted through a portal so it floats over everything,
 * and unmounted after it fades out rather than left behind hidden.
 */
declare function SectionRailContent({ className, maxWidth, children, ...props }: SectionRailContentProps): import("react").JSX.Element | null;
export interface SectionRailItemProps {
    className?: string;
    /** Section this row jumps to. Matches the root's `value`. */
    value: string;
    /** Nesting depth. Indents the row to match its bar. */
    level?: number;
    children: ReactNode;
}
/** A labelled row in the expanded panel. */
declare function SectionRailItem({ className, value, level, children }: SectionRailItemProps): import("react").JSX.Element;
export declare const SectionRail: typeof SectionRailRoot & {
    Trigger: typeof SectionRailTrigger;
    Bar: typeof SectionRailBar;
    Content: typeof SectionRailContent;
    Item: typeof SectionRailItem;
};
export {};
//# sourceMappingURL=index.d.ts.map