import "./stepper.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import type { ColorName } from "./color_tokens";
import { type PartAccessor, type StyleProps } from "./style_props";
import type { StepStatus } from "./stepper";
import { type InkColor } from "./text_ink";
/** A part of `stepper.css`, wherever rendered. */
export type MarkerPart = "marker" | "pulse" | "bar" | "ordinal";
interface MarkerProps extends StyleProps {
    status: StepStatus;
    /** Defaults to the run's. */
    color?: InkColor;
    /** The palette family of the thing the node is; over `color`, since a role is the run's and a family the
     *  thing's. */
    tone?: ColorName;
    live?: boolean;
    /** The node's diameter in px where it stands in a slot of its own (a navigation item's lead); absent, the
     *  run's 24. */
    size?: number;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Status drives the mark, never size; monochrome unless coloured: current a thick ring (pulsing when
 *  `live`), reported a ring with a check, ticked filled, ahead a faint ring. Its own module because
 *  `AgentRun` reuses it. */
export declare function Marker({ status, color, tone, live, size, render, ref, ...props }: MarkerProps): React.JSX.Element;
/** The node drawn in a larger anatomy with the caller's accessor. */
export declare function MarkerFace({ part, status, live, ink, ordinal, size, render, ref }: {
    part: PartAccessor<MarkerPart>;
    status: StepStatus;
    live: boolean;
    /** See `Marker`'s `size`. */
    size?: number;
    /** A CSS colour for this node — a `Marker` role or a `Step`'s tone. Resolved by whoever knows which
     *  vocabulary, so the node holds one property. */
    ink?: string;
    /** The node's number inside it, for position runs (`StepStatus.mark`) where an unnumbered disc must be
     *  counted down the rail; it replaces the glyph, since a node states one thing. */
    ordinal?: number;
    render?: useRender.RenderProp;
    ref?: React.Ref<HTMLElement>;
}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
/** The one path drawing a gutter mark — status node, completion ring or selection box — so rail rungs and
 *  terminal nodes share faces. */
export declare function StepMark({ part, status, live, mark, onToggle, label, color, tone, ordinal }: {
    part: PartAccessor<MarkerPart>;
    status: StepStatus;
    live: boolean;
    mark: "ring" | "box";
    onToggle?: (done: boolean) => void;
    label: string;
    /** What a reached node wears without its own colour. */
    color: InkColor;
    /** See `StepProps.tone`. */
    tone?: ColorName;
    /** See `StepProps.ordinal`. */
    ordinal?: number;
}): React.JSX.Element;
export {};