/** One step in the sequence. The indicator inside the circle defaults to the 1-based index (1, 2, 3, …); pass `label` to override. */
export type Step = {
    title: string;
    description?: string;
    label?: string | number;
};
/** Derived from each step's index relative to `current`. */
export type StepStatus = 'completed' | 'current' | 'pending';
type Props = {
    steps: Step[];
    /** 0-based index of the active step. @default 0 */
    current?: number;
    /**
     * Layout direction.
     * - `horizontal` (default) — circle on top, label below; each step takes equal width.
     * - `horizontal-inline` — circle on the left of the label, all on one line; line connectors flex between steps. Use in tight chrome (dialogs, banded headers).
     * - `vertical` — circle on the left of the label, steps stacked top-to-bottom.
     * @default 'horizontal'
     */
    orientation?: 'horizontal' | 'horizontal-inline' | 'vertical';
    /**
     * Visual scale.
     * - `md` (default) — 28px circles, regular text.
     * - `sm` — 20px circles, smaller text; pairs with `horizontal-inline` for tight chrome.
     * @default 'md'
     */
    size?: 'sm' | 'md';
    /** Render completed-step indicators as numbers or as checkmarks. @default 'numbered' */
    completed?: 'numbered' | 'checkmark';
    on?: {
        /** When provided, completed steps become clickable. */
        stepClick?: (index: number) => void;
    };
};
/**
 * Stepper — progress indicator for multi-step flows. Renders a list of steps with a circle indicator and
 * a title / description per step. Status (completed / current / pending) is derived from each step's index
 * relative to `current`. Pass `on.stepClick` to make completed steps clickable for backward navigation.
 *
 * Layouts:
 * - `horizontal` (default) — circle stacked above label; full-page form headers.
 * - `horizontal-inline` — circle beside label, line connectors flex between steps; tight chrome.
 * - `vertical` — circle beside label, steps stacked top-to-bottom; sidebar checklists.
 *
 * ### CSS Custom Properties
 * | Property | Description | Default |
 * |---|---|---|
 * | `--sc-kit--stepper--circle--size` | Indicator circle size | per `size` preset (28 / 20px) |
 * | `--sc-kit--stepper--accent` | Completed / current accent color | `var(--sc-kit--color--accent)` |
 * | `--sc-kit--stepper--accent--soft` | Vertical current-step pill background | `var(--sc-kit--color--accent--soft)` |
 * | `--sc-kit--stepper--connector--color` | Connector line color (pending) | `var(--sc-kit--color--border)` |
 * | `--sc-kit--stepper--connector--color--completed` | Connector line color past a completed step | `var(--sc-kit--stepper--accent)` |
 * | `--sc-kit--stepper--circle--font-size` | Indicator font size | per `size` preset |
 * | `--sc-kit--stepper--title--font-size` | Title font size | per `size` preset |
 * | `--sc-kit--stepper--description--font-size` | Description font size | per `size` preset |
 */
declare const Cmp: import("svelte").Component<Props, {}, "">;
type Cmp = ReturnType<typeof Cmp>;
export default Cmp;