{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric-card",
  "type": "registry:ui",
  "title": "Metric Card",
  "description": "Dashboard metric card with sparkline support and trend indicator.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/metric-card.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Saasflare MetricCard — dashboard KPI display.\n * @module packages/ui/components/ui/metric-card\n * @layer core\n *\n * Displays a single metric with label, value, trend indicator, and optional icon.\n * Used in dashboard overviews, analytics panels, and summary sections.\n *\n * @example\n * import { MetricCard } from \"@saasflare/ui\";\n * import { UsersIcon } from \"@saasflare/ui\";\n *\n * <MetricCard\n *   label=\"Active Users\"\n *   value=\"1,234\"\n *   trend={{ value: 12.5, direction: \"up\" }}\n *   icon={<UsersIcon />}\n * />\n *\n * @example\n * // Usage metrics need the denominator, not just the number\n * <MetricCard label=\"Credits left\" value=\"1,240\" description=\"of 5,000 this cycle\" />\n */\n\nimport * as React from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Trend indicator data */\ninterface MetricTrend {\n  /** Numeric change (displayed as percentage) */\n  value: number\n  /** Direction of the trend */\n  direction: \"up\" | \"down\" | \"flat\"\n}\n\n/** Props for the MetricCard component */\ninterface MetricCardProps extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>, SaasflareComponentProps {\n  /** Metric label (e.g. \"Revenue\", \"Active Users\") */\n  label: string\n  /** Formatted metric value (e.g. \"$12,345\", \"1,234\") */\n  value: string\n  /** Optional trend indicator */\n  trend?: MetricTrend\n  /** Optional icon element */\n  icon?: React.ReactNode\n  /**\n   * Secondary line under the value — the context that makes a number mean\n   * something (\"of 5,000 this cycle\", \"vs. last month\", \"3 pending\").\n   */\n  description?: React.ReactNode\n}\n\nconst TREND_STYLES = {\n  up: \"text-success\",\n  down: \"text-destructive\",\n  flat: \"text-muted-foreground\",\n} as const\n\nconst TREND_ARROWS = {\n  up: \"\\u2191\",\n  down: \"\\u2193\",\n  flat: \"\\u2192\",\n} as const\n\n/**\n * Dashboard metric card displaying a KPI with trend.\n *\n * @component\n * @layer core\n *\n * @param {string} label - Metric label\n * @param {string} value - Formatted metric value\n * @param {MetricTrend} trend - Optional trend with value and direction\n * @param {React.ReactNode} icon - Optional icon\n * @param {React.ReactNode} description - Optional secondary line under the value\n *\n * @example\n * <MetricCard\n *   label=\"Monthly Revenue\"\n *   value=\"$48,200\"\n *   trend={{ value: 8.2, direction: \"up\" }}\n * />\n */\nfunction MetricCard({\n  label,\n  value,\n  trend,\n  icon,\n  description,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: MetricCardProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <div\n      {...props}\n      data-slot=\"metric-card\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\n        \"flex flex-col gap-2 rounded-xl border bg-card p-6 text-card-foreground shadow-sm\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm font-medium text-muted-foreground\">{label}</span>\n        {icon && (\n          <span className=\"text-muted-foreground [&_svg]:size-4\">{icon}</span>\n        )}\n      </div>\n      <div className=\"flex items-baseline gap-2\">\n        <span className=\"text-2xl font-bold tracking-tight\">{value}</span>\n        {trend && (\n          <span className={cn(\"text-xs font-medium\", TREND_STYLES[trend.direction])}>\n            {TREND_ARROWS[trend.direction]} {Math.abs(trend.value)}%\n          </span>\n        )}\n      </div>\n      {description && (\n        <p className=\"text-xs text-muted-foreground\">{description}</p>\n      )}\n    </div>\n  )\n}\n\nexport { MetricCard, type MetricCardProps, type MetricTrend }\n",
      "target": "components/ui/metric-card.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/metric-card.json"
  }
}