import { ReactNode } from 'react';
export type VisualTone = 'slate' | 'blue' | 'violet' | 'amber' | 'emerald' | 'orange' | 'rose' | 'cyan';
export type TrendDirection = 'up' | 'down' | 'neutral';
export type FlowNodeVariant = 'stripe' | 'outline' | 'subtle';
export type FlowNodeSize = 'compact' | 'regular';
export type StatAccent = 'cyan' | 'rose' | 'amber' | 'violet' | 'orange' | 'emerald';
export interface StatCardProps {
    label: string;
    value: ReactNode;
    detail?: ReactNode;
    trend?: ReactNode;
    trendDirection?: TrendDirection;
    accentColor?: StatAccent;
    children?: ReactNode;
    className?: string;
}
export interface UptimeBarProps {
    percent: number;
    segments?: number;
    highlightIndices?: number[];
    className?: string;
}
export interface MetricTileProps {
    label: string;
    value: ReactNode;
    icon?: ReactNode;
    tone?: Exclude<VisualTone, 'rose'>;
    className?: string;
}
export interface FlowNodeCardProps {
    title: string;
    eyebrow?: ReactNode;
    meta?: ReactNode;
    icon?: ReactNode;
    tone?: VisualTone;
    variant?: FlowNodeVariant;
    size?: FlowNodeSize;
    className?: string;
    children?: ReactNode;
}
export declare function StatCard({ label, value, detail, trend, trendDirection, accentColor, children, className, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
export declare function UptimeBar({ percent, segments, highlightIndices, className, }: UptimeBarProps): import("react/jsx-runtime").JSX.Element;
export declare function MetricTile({ label, value, icon, tone, className }: MetricTileProps): import("react/jsx-runtime").JSX.Element;
export declare function FlowNodeCard({ title, eyebrow, meta, icon, tone, variant, size, className, children, }: FlowNodeCardProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=index.d.ts.map