{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "metric-grid",
  "title": "Metric Grid",
  "type": "registry:blocks",
  "description": "Four-column responsive KPI grid displaying core business metrics and sparkline trends.",
  "dependencies": [
    "lucide-react"
  ],
  "usage": "import { MultiMetricGrid } from \"@etherealui/react\"\n\nexport function MetricGridDemo() {\n  return <MultiMetricGrid />\n}",
  "files": [
    {
      "path": "packages/ui/src/blocks/stat-cards.tsx",
      "target": "components/ui/metric-grid.tsx",
      "type": "registry:blocks",
      "content": "import * as React from \"react\"\nimport { ArrowUpRight, ArrowDownRight } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\nimport { Badge } from \"../primitives/badge\"\nimport { Progress } from \"../primitives/progress\"\n\nexport interface StatMetricCardProps {\n  title: string\n  value: string\n  change: string\n  trend?: \"up\" | \"down\" | \"neutral\"\n  subtitle?: string\n  sparkline?: number[]\n  accent?: \"blue\" | \"indigo\" | \"emerald\" | \"amber\" | \"rose\"\n  className?: string\n}\n\nconst strokeColors = {\n  blue: \"#2563eb\",\n  indigo: \"#2563eb\",\n  emerald: \"#10b981\",\n  amber: \"#f59e0b\",\n  rose: \"#f43f5e\",\n}\n\nexport const StatMetricCard: React.FC<StatMetricCardProps> = ({\n  title,\n  value,\n  change,\n  trend = \"up\",\n  subtitle = \"vs. previous 30 days\",\n  sparkline = [28, 34, 31, 45, 42, 56, 64, 61, 78, 86],\n  accent = \"blue\",\n  className,\n}) => {\n  const min = Math.min(...sparkline)\n  const max = Math.max(...sparkline)\n  const range = Math.max(1, max - min)\n  const width = 104\n  const height = 34\n\n  const points = sparkline\n    .map((val, i) => {\n      const x = (i / Math.max(1, sparkline.length - 1)) * width\n      const y = height - ((val - min) / range) * (height - 8) - 4\n      return `${x.toFixed(1)},${y.toFixed(1)}`\n    })\n    .join(\" \")\n\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-zinc-200 bg-white p-5 transition-colors dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-xs font-medium text-zinc-500 dark:text-zinc-400\">\n          {title}\n        </span>\n        <Badge\n          variant={\n            trend === \"up\" ? \"emerald\" : trend === \"down\" ? \"rose\" : \"default\"\n          }\n          className=\"text-[11px]\"\n        >\n          {trend === \"up\" ? (\n            <ArrowUpRight className=\"h-3 w-3\" />\n          ) : (\n            <ArrowDownRight className=\"h-3 w-3\" />\n          )}\n          {change}\n        </Badge>\n      </div>\n\n      <div className=\"mt-3 flex items-end justify-between gap-4\">\n        <div>\n          <div className=\"text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100\">\n            {value}\n          </div>\n          <p className=\"mt-1 text-[11px] text-zinc-400 dark:text-zinc-500\">\n            {subtitle}\n          </p>\n        </div>\n\n        <svg\n          width={width}\n          height={height}\n          viewBox={`0 0 ${width} ${height}`}\n          className=\"overflow-visible shrink-0\"\n        >\n          <polyline\n            fill=\"none\"\n            stroke={strokeColors[accent]}\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            points={points}\n          />\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nexport interface MultiMetricGridProps {\n  metrics?: StatMetricCardProps[]\n  className?: string\n}\n\nconst defaultMetrics: StatMetricCardProps[] = [\n  {\n    title: \"Monthly Recurring Revenue\",\n    value: \"$128,430\",\n    change: \"+14.2%\",\n    trend: \"up\",\n    subtitle: \"Compared to $112.4k last month\",\n    sparkline: [32, 38, 40, 48, 52, 60, 68, 74, 82, 95],\n    accent: \"blue\",\n  },\n  {\n    title: \"Active Subscribers\",\n    value: \"4,892\",\n    change: \"+8.4%\",\n    trend: \"up\",\n    subtitle: \"312 new trials converted\",\n    sparkline: [40, 42, 49, 55, 53, 64, 72, 79, 88, 92],\n    accent: \"emerald\",\n  },\n  {\n    title: \"Net Revenue Retention\",\n    value: \"118.6%\",\n    change: \"+2.1%\",\n    trend: \"up\",\n    subtitle: \"Enterprise cohort expansion\",\n    sparkline: [70, 72, 75, 78, 80, 84, 86, 89, 92, 95],\n    accent: \"blue\",\n  },\n  {\n    title: \"Logo Churn Rate\",\n    value: \"1.24%\",\n    change: \"-0.4%\",\n    trend: \"up\",\n    subtitle: \"Lowest in 4 quarters\",\n    sparkline: [65, 58, 50, 44, 39, 32, 28, 22, 18, 12],\n    accent: \"emerald\",\n  },\n]\n\nexport const MultiMetricGrid: React.FC<MultiMetricGridProps> = ({\n  metrics = defaultMetrics,\n  className,\n}) => {\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\",\n        className\n      )}\n    >\n      {metrics.map((m) => (\n        <StatMetricCard key={m.title} {...m} />\n      ))}\n    </div>\n  )\n}\n\nexport interface ProgressMetricCardProps {\n  title?: string\n  current?: string\n  target?: string\n  percentage?: number\n  statusText?: string\n  variant?: \"blue\" | \"indigo\" | \"emerald\" | \"amber\" | \"rose\"\n  className?: string\n}\n\nexport const ProgressMetricCard: React.FC<ProgressMetricCardProps> = ({\n  title = \"Monthly API Usage\",\n  current = \"768,000\",\n  target = \"1,000,000 reqs\",\n  percentage = 76.8,\n  statusText = \"Resets in 9 days • Pay-as-you-go enabled\",\n  variant = \"blue\",\n  className,\n}) => {\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-zinc-200 bg-white p-5 space-y-4 dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-xs font-medium text-zinc-700 dark:text-zinc-200\">\n          {title}\n        </span>\n        <span className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n          <strong className=\"text-zinc-900 dark:text-white\">{current}</strong> /{\" \"}\n          {target}\n        </span>\n      </div>\n      <Progress value={percentage} variant={variant} showValue />\n      <p className=\"text-[11px] text-zinc-400 dark:text-zinc-500\">\n        {statusText}\n      </p>\n    </div>\n  )\n}\n\nexport type StatCardProps = StatMetricCardProps\nexport const StatCard = StatMetricCard\n"
    }
  ]
}