/**
 * @file Stepper.tsx
 * @input Uses React, stylex, theme tokens, StepperContext
 * @output Exports Stepper component and StepperProps
 * @position Core container component; consumed by index.ts
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/lab/src/Stepper/Stepper.doc.mjs (props table, features, implementation notes)
 * - /packages/lab/src/Stepper/Stepper.test.tsx (tests for new/changed behavior)
 * - /packages/lab/src/Stepper/index.ts (exports if types change)
 * - /apps/storybook/stories/Stepper.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '@astryxdesign/core';
import { type StepperOrientation, type StepperIndicatorPosition } from './StepperContext';
export interface StepperProps extends BaseProps<HTMLOListElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLOListElement>;
    /**
     * Zero-based index of the active step.
     */
    activeStep: number;
    /**
     * Step elements to render.
     */
    children: ReactNode;
    /**
     * Layout direction of the stepper.
     * @default 'horizontal'
     */
    orientation?: StepperOrientation;
    /**
     * Called when a step indicator is clicked. Enables non-linear navigation.
     * When provided, completed and current steps become clickable.
     */
    onStepClick?: (index: number) => void;
    /**
     * Accessible label describing the set of steps.
     * @default 'Progress'
     */
    label?: string;
    /**
     * Controls density (padding) of all steps.
     * @default 'balanced'
     */
    density?: 'compact' | 'balanced' | 'spacious';
    /**
     * Controls where each step's indicator sits relative to the connector track.
     * - 'separated': indicator lives in the label row, distinct from the progress
     *   bar (the original Astryx layout).
     * - 'on-track': indicator is slotted into the connector line as a node on the
     *   track (the on-track indicator design).
     * @default 'separated'
     */
    indicatorPosition?: StepperIndicatorPosition;
}
/**
 * A stepper component for multi-step workflows. Displays numbered steps
 * with visual indicators for completed, active, and upcoming states.
 *
 * Each Step child must provide a `step` prop (zero-based index) so it
 * can derive its state from the parent's activeStep. The parent supplies
 * the total `stepCount` via context so the on-track layout can hide the
 * trailing connector on the final step.
 *
 * Rendered as an ordered list (`<ol>`/`<li>`) rather than a `nav`
 * landmark: a stepper communicates *progress through a sequence*, not a
 * set of site navigation links. The active step is marked with
 * `aria-current="step"` (handled per-step) and the list carries an
 * accessible `label`. This follows the WAI-ARIA pattern for steppers /
 * progress sequences and avoids polluting the page's landmark map.
 *
 * @example
 * ```
 * <Stepper activeStep={1}>
 *   <Step step={0} label="Account" />
 *   <Step step={1} label="Profile" />
 *   <Step step={2} label="Review" />
 * </Stepper>
 * ```
 */
export declare function Stepper({ activeStep, children, orientation, onStepClick, label, density, indicatorPosition, xstyle, className, style, ref, ...rest }: StepperProps): import("react").JSX.Element;
export declare namespace Stepper {
    var displayName: string;
}
//# sourceMappingURL=Stepper.d.ts.map