import * as React from 'react';
export type BlockColor = 'primary' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'success' | 'info' | 'warning' | 'destructive';
export interface HowItWorksStepItem {
    number?: string | number;
    icon?: React.ReactNode;
    title: string;
    description: string;
    color?: BlockColor;
}
export interface HowItWorksStepsProps {
    items: HowItWorksStepItem[];
    className?: string;
}
/**
 * Horizontal numbered process row — the horizontal counterpart to `EvidenceTimeline`.
 *
 * @description
 * Renders a "how it works" style row of steps: each item gets a colored
 * badge (icon or step number) above a title and description, laid out
 * side by side in a responsive grid instead of `EvidenceTimeline`'s
 * vertical connecting line.
 *
 * @ai-rules
 * 1. Provide `icon` for a lucide-react icon in the badge, or `number` for a step label; if neither is set the 1-based index is used.
 * 2. Each item's `color` maps to `colorTokens` — never hardcode colors.
 * 3. There is no connecting line between steps (unlike `EvidenceTimeline`) — this avoids awkward line fragments when steps wrap to a new row on narrow screens.
 * 4. This block has no outer card chrome; wrap it in a `<Card>` or section if chrome is needed.
 */
export declare function HowItWorksSteps({ items, className }: HowItWorksStepsProps): React.JSX.Element;