import { type ViewStyle, type TextStyle } from "react-native";
import { type ColorTokens } 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;
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 verticalContentSpacing: ViewStyle;
export declare const horizontalRow: ViewStyle;
export declare const horizontalColumn: ViewStyle;
export declare const horizontalConnector: ViewStyle;
export interface StepsSkin {
    /** Fill + border of the numbered/check circle for a given step state. */
    circleState: (t: ColorTokens, state: State) => ViewStyle;
    /** Color of the glyph (check / number) inside the circle. */
    glyphState: (t: ColorTokens, state: State) => TextStyle;
    /** Color of the step label for a given state (shared across platforms). */
    labelState: (t: ColorTokens, state: State) => TextStyle;
    /** Background + line cap of a connector; `done` fills it primary. */
    connector: (t: ColorTokens, done: boolean) => ViewStyle;
    /** Caption left of the percentage 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. */
    verticalDescription: (t: ColorTokens) => TextStyle;
    /** iOS/web dim the circle on press; Android uses a ripple (null here). */
    pressedOpacity: number | null;
    /** Android ripple over a pressable circle; 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;
//# sourceMappingURL=steps.styles.d.ts.map