import { TNode, Value } from '@tempots/dom';
import { ControlSize } from '../theme';
import { ThemeColorName } from '../../tokens';
/** Visual style variant for {@link StatCard}. */
export type StatCardVariant = 'default' | 'elevated' | 'outlined';
/** Trend direction for {@link StatCardTrend}. */
export type TrendDirection = 'up' | 'down' | 'flat';
/** Configuration options for the {@link StatCard} component. */
export interface StatCardOptions {
    /** Visual style variant. @default 'default' */
    variant?: Value<StatCardVariant>;
    /** Controls internal padding. @default 'md' */
    size?: Value<ControlSize>;
    /** Theme color accent. @default 'primary' */
    color?: Value<ThemeColorName>;
}
/** Options for a {@link StatCardSection}. */
export interface StatCardSectionOptions {
    /** Additional CSS classes. */
    class?: Value<string>;
}
/** Configuration for the {@link StatCardTrend} sub-component. */
export interface StatCardTrendOptions {
    /** The trend value to display (e.g. "+12%", "3.2"). */
    value: Value<string | number>;
    /** Direction of the trend. */
    direction: Value<TrendDirection>;
    /** Override the auto-derived color. When omitted, uses success/danger/neutral based on direction. */
    color?: Value<ThemeColorName>;
}
/**
 * A dashboard metric card that displays a statistic with optional label,
 * trend indicator, icon, and sparkline slot.
 *
 * Uses a composition pattern — combine with {@link StatCardValue},
 * {@link StatCardLabel}, {@link StatCardTrend}, {@link StatCardIcon},
 * and {@link StatCardSparkline} to build rich stat displays.
 *
 * @param options - Configuration for variant, size, and color
 * @param children - Sub-components to render inside the card
 * @returns A stat card element
 *
 * @example
 * ```ts
 * StatCard({ variant: 'elevated' },
 *   StatCardIcon({}, Icon({ icon: 'lucide:users', size: 'lg' })),
 *   StatCardValue({}, '1,234'),
 *   StatCardLabel({}, 'Active Users'),
 *   StatCardTrend({ value: '+12%', direction: 'up' }),
 * )
 * ```
 */
export declare function StatCard({ variant, size, color }?: StatCardOptions, ...children: TNode[]): TNode;
/**
 * The primary metric value of a {@link StatCard}.
 *
 * @example
 * ```ts
 * StatCardValue({}, '1,234')
 * StatCardValue({}, formattedRevenue)
 * ```
 */
export declare function StatCardValue({ class: className }?: StatCardSectionOptions, ...children: TNode[]): TNode;
/**
 * A descriptive label for a {@link StatCard} metric.
 *
 * @example
 * ```ts
 * StatCardLabel({}, 'Monthly Revenue')
 * ```
 */
export declare function StatCardLabel({ class: className }?: StatCardSectionOptions, ...children: TNode[]): TNode;
/**
 * A trend indicator showing a value with a directional arrow.
 *
 * When no `color` is provided, the color is auto-derived from `direction`:
 * up → success, down → danger, flat → neutral.
 *
 * @param options - Trend value, direction, and optional color override
 * @returns A trend indicator element
 *
 * @example
 * ```ts
 * StatCardTrend({ value: '+12.5%', direction: 'up' })
 * StatCardTrend({ value: '-3%', direction: 'down' })
 * StatCardTrend({ value: '0%', direction: 'flat' })
 * ```
 */
export declare function StatCardTrend(options: StatCardTrendOptions): TNode;
/**
 * An icon slot for a {@link StatCard}, typically placed at the top or side.
 *
 * @example
 * ```ts
 * StatCardIcon({}, Icon({ icon: 'lucide:dollar-sign', size: 'lg', color: 'primary' }))
 * ```
 */
export declare function StatCardIcon({ class: className }?: StatCardSectionOptions, ...children: TNode[]): TNode;
/**
 * A sparkline/chart slot for a {@link StatCard}.
 * Renders a container where you can place any chart or visualization component.
 *
 * @example
 * ```ts
 * StatCardSparkline({}, mySparklineChart)
 * ```
 */
export declare function StatCardSparkline({ class: className }?: StatCardSectionOptions, ...children: TNode[]): TNode;