import { Signal, TNode, Value } from '@tempots/dom';
import { ControlSize } from '../theme';
import { ThemeColorName } from '../../tokens';
/** State of an individual step in a {@link Stepper}. */
export type StepState = 'completed' | 'active' | 'pending' | 'error';
/**
 * Definition of a single step in a {@link Stepper}.
 */
export interface StepDefinition {
    /** Display label for the step indicator. */
    label: TNode;
    /** Optional description shown below the label. */
    description?: TNode;
    /** Optional Iconify icon shown in the step circle. */
    icon?: string;
    /** Content rendered when this step is active. */
    content?: (controller: StepperController) => TNode;
    /**
     * Async validation before advancing past this step.
     * Return `true` to allow, `false` to block.
     */
    beforeNext?: () => boolean | Promise<boolean>;
}
/** Configuration options for the {@link Stepper} component. */
export interface StepperOptions {
    /** Array of step definitions. */
    steps: StepDefinition[];
    /** The active step index (0-based). */
    value?: Value<number>;
    /** Callback invoked when the active step changes. */
    onChange?: (index: number) => void;
    /** Layout orientation. @default 'horizontal' */
    orientation?: Value<'horizontal' | 'vertical'>;
    /** Visual variant. @default 'default' */
    variant?: Value<'default' | 'compact'>;
    /** Size of the stepper. @default 'md' */
    size?: Value<ControlSize>;
    /** Theme color for active/completed steps. @default 'primary' */
    color?: Value<ThemeColorName>;
    /** Whether the stepper is disabled. @default false */
    disabled?: Value<boolean>;
    /** Whether to show navigation buttons. @default false */
    showNavigation?: Value<boolean>;
}
/** Programmatic controller for the stepper. */
export interface StepperController {
    /** Jump to a specific step. Forward jumps validate intermediate beforeNext guards. */
    goTo: (index: number) => Promise<boolean>;
    /** Advance to the next step (respects beforeNext). Returns false if blocked. */
    next: () => Promise<boolean>;
    /** Go back to the previous step. */
    prev: () => void;
    /** Mark the stepper as complete (validates remaining beforeNext guards first). */
    complete: () => Promise<boolean>;
    /** Reactive signal for the current step index. */
    currentStep: Signal<number>;
    /** Set a step to error state. */
    setError: (index: number) => void;
    /** Clear error state on a step. */
    clearError: (index: number) => void;
}
/**
 * Creates a multi-step workflow indicator with content panels and
 * returns a `[TNode, StepperController]` tuple for programmatic control.
 *
 * @param options - Configuration for the stepper
 * @returns A tuple of `[renderable, controller]`
 *
 * @example
 * ```ts
 * const [stepper, ctrl] = createStepper({
 *   steps: [
 *     { label: 'Account', content: () => html.div('Step 1 content') },
 *     { label: 'Profile', content: () => html.div('Step 2 content') },
 *     { label: 'Confirm', content: () => html.div('Step 3 content') },
 *   ],
 *   onChange: idx => console.log('Step', idx),
 * })
 * ```
 */
export declare function createStepper(options: StepperOptions): [TNode, StepperController];
/**
 * A multi-step workflow indicator with content panels and navigation buttons.
 *
 * Convenience wrapper around {@link createStepper} that returns only the TNode.
 * Use `createStepper` when you need programmatic control via the controller.
 *
 * @param options - Configuration for the stepper
 * @returns A stepper element
 *
 * @example
 * ```ts
 * Stepper({
 *   steps: [
 *     { label: 'Account', content: () => html.div('Create your account') },
 *     { label: 'Profile', content: () => html.div('Set up your profile') },
 *     { label: 'Done', content: () => html.div('All set!') },
 *   ],
 * })
 * ```
 */
export declare function Stepper(options: StepperOptions): TNode;