/**
 * @fileoverview Saasflare MetricCard — dashboard KPI display.
 * @module packages/ui/components/ui/metric-card
 * @layer core
 *
 * Displays a single metric with label, value, trend indicator, and optional icon.
 * Used in dashboard overviews, analytics panels, and summary sections.
 *
 * @example
 * import { MetricCard } from "@saasflare/ui";
 * import { UsersIcon } from "./phosphor";
 *
 * <MetricCard
 *   label="Active Users"
 *   value="1,234"
 *   trend={{ value: 12.5, direction: "up" }}
 *   icon={<UsersIcon />}
 * />
 */
import * as React from "react";
import { type SaasflareComponentProps } from "../../providers";
/** Trend indicator data */
interface MetricTrend {
    /** Numeric change (displayed as percentage) */
    value: number;
    /** Direction of the trend */
    direction: "up" | "down" | "flat";
}
/** Props for the MetricCard component */
interface MetricCardProps extends Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
    /** Metric label (e.g. "Revenue", "Active Users") */
    label: string;
    /** Formatted metric value (e.g. "$12,345", "1,234") */
    value: string;
    /** Optional trend indicator */
    trend?: MetricTrend;
    /** Optional icon element */
    icon?: React.ReactNode;
}
/**
 * Dashboard metric card displaying a KPI with trend.
 *
 * @component
 * @layer core
 *
 * @param {string} label - Metric label
 * @param {string} value - Formatted metric value
 * @param {MetricTrend} trend - Optional trend with value and direction
 * @param {React.ReactNode} icon - Optional icon
 *
 * @example
 * <MetricCard
 *   label="Monthly Revenue"
 *   value="$48,200"
 *   trend={{ value: 8.2, direction: "up" }}
 * />
 */
declare function MetricCard({ label, value, trend, icon, className, surface, radius, animated, iconWeight, ...props }: MetricCardProps): import("react/jsx-runtime").JSX.Element;
export { MetricCard, type MetricCardProps, type MetricTrend };