import { type ViewStyle, type TextStyle } from "react-native";
import { type ColorTokens, type TouchTargetSkin } from "../../style/index.js";
export type State = "completed" | "current" | "upcoming";
export declare const flex1: ViewStyle;
export declare const circleBase: ViewStyle;
export declare const glyphBase: TextStyle;
/** The completed marker's check glyph size. */
export declare const checkSize = 13;
export declare const compactCircle: ViewStyle;
export declare const compactGlyph: TextStyle;
export declare const compactList: ViewStyle;
export declare const compactRow: ViewStyle;
export declare const compactLabel: TextStyle;
export declare const labelBase: TextStyle;
export declare const labelBaseXs: TextStyle;
export declare const fullWidth: ViewStyle;
export declare const progressHeader: ViewStyle;
export declare const verticalRow: ViewStyle;
export declare const verticalRail: ViewStyle;
export declare const verticalConnector: ViewStyle;
export declare const verticalContent: ViewStyle;
export declare const verticalContentSpacing: ViewStyle;
export declare const verticalStack: ViewStyle;
export declare const stepProgressTrack: ViewStyle;
export declare const stepProgressFill: ViewStyle;
export declare const segmentedRow: ViewStyle;
export declare const segmentColumn: ViewStyle;
export declare const segmentBar: ViewStyle;
export declare const segmentTitle: TextStyle;
export declare const segmentStatus: TextStyle;
export declare const horizontalRow: ViewStyle;
export declare const horizontalColumn: ViewStyle;
export declare const horizontalConnector: ViewStyle;
export interface StepsSkin extends TouchTargetSkin {
    /** Fill, ring and halo of the marker for a given step state. */
    circleState: (t: ColorTokens, state: State) => ViewStyle;
    /** Color of the glyph (check / number) inside the marker. */
    glyphState: (t: ColorTokens, state: State) => TextStyle;
    /** Color of the step label for a given state. */
    labelState: (t: ColorTokens, state: State) => TextStyle;
    /** Background of a connector; `done` fills it primary. */
    connector: (t: ColorTokens, done: boolean) => ViewStyle;
    /** Caption left of the count in the progress layout. */
    progressCaption: (t: ColorTokens) => TextStyle;
    /** The percentage label in the progress layout. */
    progressPercent: (t: ColorTokens) => TextStyle;
    /** The progress track (unfilled). */
    progressTrack: (t: ColorTokens) => ViewStyle;
    /** The filled portion of the progress track (width set inline as %). */
    progressFill: (t: ColorTokens) => ViewStyle;
    /** The optional description line in the vertical layout, per state. */
    verticalDescription: (t: ColorTokens, state?: State) => TextStyle;
    /** A vertical step's in-step progress bar: its track fill, and its fill's gradient ends and glow. */
    stepProgressTrack: (t: ColorTokens) => ViewStyle;
    stepProgressFill: (t: ColorTokens) => {
        from: string;
        to: string;
        glow: ViewStyle;
    };
    /** The segmented layout's bar, per state. */
    segmentBar: (t: ColorTokens, state: State) => ViewStyle;
    /** The segmented layout's status line ink, per state (the title takes `labelState`). */
    segmentStatus: (t: ColorTokens, state: State) => TextStyle;
    /** The `rows` layout: a row label's ink and weight, and the current row's fill. */
    rowLabel: (t: ColorTokens, state: State) => TextStyle;
    rowCurrent: (t: ColorTokens) => ViewStyle;
    /** iOS/web dim the marker on press; Android uses a ripple (null here). */
    pressedOpacity: number | null;
    /** Android ripple over a pressable marker; null on iOS/web. */
    ripple: ((t: ColorTokens, state: State) => {
        color: string;
        borderless: boolean;
    }) | null;
}
export declare const webSkin: StepsSkin;
export declare const iosSkin: StepsSkin;
export declare const androidSkin: StepsSkin;
/** The `rows` layout: 32 px rows 2 apart, labels 13 in from the row at the nav-row corner. */
export declare const rowList: ViewStyle;
export declare const row: ViewStyle;
export declare const rowLabel: TextStyle;
//# sourceMappingURL=steps.styles.d.ts.map