{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric-card",
  "title": "Metric card",
  "description": "A dashboard metric with a caller-formatted value, trend comparison and optional footer.",
  "dependencies": [
    "lucide-react@^1.46.0"
  ],
  "registryDependencies": [
    "Familis-co/registry/card",
    "Familis-co/registry/badge"
  ],
  "files": [
    {
      "path": "registry/familis/blocks/metric-card/metric-card.tsx",
      "content": "import type { ComponentProps, ReactNode } from \"react\"\nimport { MinusIcon, TrendingDownIcon, TrendingUpIcon } from \"lucide-react\"\nimport { Badge } from \"@/registry/familis/ui/badge\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/familis/ui/card\"\n\nexport interface MetricCardProps extends Omit<ComponentProps<typeof Card>, \"children\"> {\n  label: string\n  value: ReactNode\n  description?: string\n  trend?: {\n    direction: \"up\" | \"down\" | \"neutral\"\n    value: string\n    label: string\n  }\n  footer?: ReactNode\n}\n\n/** A formatted metric with an optional comparison. Values and labels are localized by the caller. */\nexport function MetricCard({\n  label,\n  value,\n  description,\n  trend,\n  footer,\n  ...props\n}: MetricCardProps) {\n  const TrendIcon =\n    trend?.direction === \"up\"\n      ? TrendingUpIcon\n      : trend?.direction === \"down\"\n        ? TrendingDownIcon\n        : MinusIcon\n\n  return (\n    <Card role=\"group\" aria-label={label} {...props}>\n      <CardHeader>\n        <CardTitle>{label}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-3\">\n        <p className=\"text-4xl font-semibold tracking-tight tabular-nums\">{value}</p>\n        {trend && (\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <Badge variant=\"secondary\">\n              <TrendIcon data-icon=\"inline-start\" aria-hidden=\"true\" />\n              {trend.value}\n            </Badge>\n            <span className=\"text-sm text-muted-foreground\">{trend.label}</span>\n          </div>\n        )}\n      </CardContent>\n      {footer != null && <CardFooter>{footer}</CardFooter>}\n    </Card>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "base": "base",
    "storybookId": "ui-blocks-metric-card--default"
  },
  "type": "registry:block"
}