/**
 * @file Step.tsx
 * @input Uses React, stylex, theme tokens, StepperContext
 * @output Exports Step component and StepProps
 * @position Individual step item; used inside Stepper
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/lab/src/Stepper/Stepper.doc.mjs
 * - /packages/lab/src/Stepper/Stepper.test.tsx
 * - /packages/lab/src/Stepper/index.ts
 * - /apps/storybook/stories/Stepper.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '@astryxdesign/core';
import type { StepStatus } from './StepStatus';
/**
 * Built-in indicator presets. Anything other than these strings passed to
 * `indicator` is treated as a custom ReactNode (e.g. an `<Icon />`).
 * - 'auto': numbered badge for not-yet-reached steps, a check once completed
 *   (default)
 * - 'number': always a numbered badge
 * - 'none': no indicator — just the progress bar and label
 */
export type StepIndicatorPreset = 'auto' | 'number' | 'none';
export type StepDensity = 'compact' | 'balanced' | 'spacious';
export interface StepProps extends BaseProps<HTMLLIElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLLIElement>;
    /**
     * Zero-based index of this step. Used to derive progress (completed /
     * active / not-started) relative to the parent's `activeStep`.
     */
    step: number;
    /**
     * Step label text.
     */
    label: string;
    /**
     * Optional description shown below the label.
     */
    description?: string;
    /**
     * Content rendered below the label and description. Useful in vertical
     * steppers to show form fields or detailed content for each step.
     */
    children?: ReactNode;
    /**
     * Custom icon rendered inside the indicator. Accepts any ReactNode (for
     * example an `<Icon />`). Equivalent to passing the node directly to
     * `indicator`; takes precedence over the built-in number/check.
     */
    icon?: ReactNode;
    /**
     * Semantic status for the step, mapped to the global Astryx semantic tokens
     * (`accent`, `success`, `warning`, `error`). In the default `auto` indicator
     * mode it sets both the indicator color and a matching glyph: `success` shows
     * a green check-circle, `warning`/`error` show the shared Input status icons.
     * `accent` is color-only. The current (in-progress) step always keeps its
     * current-step indicator regardless of `status`. Never recolors the
     * connector/track.
     *
     * Because the indicator glyphs are decorative (aria-hidden), the status also
     * reaches assistive technology as text: visually hidden "completed" /
     * "warning" / "error" next to the label, and composed into the accessible
     * name of clickable steps.
     */
    status?: StepStatus;
    /**
     * Disable interaction for this step.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Marks the step as optional, appending an "Optional" affordance after the
     * label.
     * @default false
     */
    isOptional?: boolean;
    /**
     * Trailing content rendered at the end of the label row (e.g. a timestamp
     * or status chip).
     */
    endContent?: ReactNode;
    /**
     * What to show as the step indicator. Accepts a preset string or any
     * ReactNode:
     * - 'auto': numbered badge until completed, then a check (default)
     * - 'number': always a numbered badge
     * - 'none': no indicator, just the bar + label
     * - ReactNode: any custom icon or element to render as the indicator
     * @default 'auto'
     */
    indicator?: StepIndicatorPreset | ReactNode;
    /**
     * Controls vertical padding of the step. Falls back to the stepper-level
     * density when unset.
     * - 'compact': minimal padding (4px block)
     * - 'balanced': default (8px block)
     * - 'spacious': generous (12px block, 12px inline)
     */
    density?: StepDensity;
}
/**
 * An individual step within an Stepper. Renders a 4px progress-bar segment,
 * an indicator (numbered badge, check, or any custom icon), a label with
 * optional description, and an optional content slot.
 *
 * Progress (completed / active / not-started) is derived from the parent's
 * `activeStep` and this step's `step` prop. The optional `status` prop layers a
 * semantic meaning on top: in the default `auto` indicator mode it recolors the
 * indicator and swaps in a matching glyph (`success` → green check-circle,
 * `warning`/`error` → the shared Input status icons). The current step always
 * keeps its current-step ring. `status` never recolors the connector/track.
 *
 * @example
 * ```
 * <Step step={0} label="Account details" description="Enter your email" />
 * ```
 *
 * @example
 * ```
 * <Step step={1} label="Payment" status="error" />
 * ```
 */
export declare function Step({ step, label, description, children, icon, status, isDisabled, isOptional, endContent, indicator: indicatorProp, density: densityProp, xstyle, className, style, ref, 'data-testid': dataTestId, ...rest }: StepProps): import("react").JSX.Element;
export declare namespace Step {
    var displayName: string;
}
//# sourceMappingURL=Step.d.ts.map