{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"card-de-metrica","type":"registry:component","title":"Card de métrica","description":"Três KPIs com variação e sparkline SVG.","author":"UI Catalog <https://ui.codehall.io>","dependencies":[],"registryDependencies":["badge","card"],"files":[{"path":"components/card-de-metrica.tsx","type":"registry:component","content":"'use client'\n\nimport { ArrowDownRight, ArrowUpRight } from 'lucide-react'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Badge } from '@/components/ui/badge'\n\nconst CARDS = [\n  { label: 'Receita', value: 'R$ 48.230', delta: '+12,4%', up: true, points: [20, 28, 24, 35, 32, 44, 48] },\n  { label: 'Novos leads', value: '1.284', delta: '+6,1%', up: true, points: [30, 26, 34, 38, 36, 42, 45] },\n  { label: 'Churn', value: '2,1%', delta: '-0,4 pp', up: false, points: [40, 38, 36, 37, 33, 30, 28] },\n]\n\nfunction Spark({ points, up }: { points: number[]; up: boolean }) {\n  const max = Math.max(...points)\n  const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${(i / (points.length - 1)) * 100} ${40 - (p / max) * 36}`).join(' ')\n  return (\n    <svg viewBox=\"0 0 100 40\" className={`h-10 w-24 ${up ? 'text-emerald-500' : 'text-rose-500'}`} preserveAspectRatio=\"none\">\n      <path d={d} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" vectorEffect=\"non-scaling-stroke\" />\n    </svg>\n  )\n}\n\nexport default function CardMetrica() {\n  return (\n    <div className=\"grid w-full max-w-3xl gap-4 sm:grid-cols-3\">\n      {CARDS.map((c) => (\n        <Card key={c.label}>\n          <CardHeader>\n            <CardDescription>{c.label}</CardDescription>\n            <CardTitle className=\"text-2xl tabular-nums\">{c.value}</CardTitle>\n          </CardHeader>\n          <CardContent className=\"flex items-end justify-between\">\n            <Badge variant=\"secondary\" className=\"gap-1\">\n              {c.up ? <ArrowUpRight className=\"size-3\" /> : <ArrowDownRight className=\"size-3\" />}\n              {c.delta}\n            </Badge>\n            <Spark points={c.points} up={c.up} />\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  )\n}\n"}]}