{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric",
  "type": "registry:ui",
  "title": "Metric",
  "description": "Compact metric display with label, value and trend delta.",
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/blacksite/ui/metric.tsx",
      "type": "registry:ui",
      "target": "components/ui/metric.tsx",
      "content": "import * as React from \"react\";\nimport { ArrowDownRight, ArrowRight, ArrowUpRight } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  /** Numerical delta. Positive renders green, negative red, 0 neutral. */\n  delta?: number;\n  /** Format the delta as a percent (appends %). */\n  deltaUnit?: \"%\" | \"abs\";\n  /** Reverse delta semantics — positive = bad, negative = good. */\n  invertDelta?: boolean;\n  hint?: React.ReactNode;\n}\n\nconst Metric = React.memo(function Metric({\n  className,\n  label,\n  value,\n  delta,\n  deltaUnit = \"%\",\n  invertDelta = false,\n  hint,\n  ...props\n}: MetricProps) {\n  const hasDelta = typeof delta === \"number\";\n  const sign = hasDelta && delta !== 0 ? (delta > 0 ? 1 : -1) : 0;\n  const tone =\n    sign === 0\n      ? \"text-foreground-muted\"\n      : sign > 0 !== invertDelta\n        ? \"text-success\"\n        : \"text-danger\";\n  const Arrow = sign === 0 ? ArrowRight : sign > 0 ? ArrowUpRight : ArrowDownRight;\n\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)} {...props}>\n      <span className=\"text-mono text-foreground-muted text-[10px] tracking-[0.1em] uppercase\">\n        {label}\n      </span>\n      <div className=\"flex items-baseline gap-2\">\n        <span className=\"text-xl leading-none font-semibold tracking-tight\">{value}</span>\n        {hasDelta && (\n          <span className={cn(\"text-mono inline-flex items-center gap-0.5 text-[11px]\", tone)}>\n            <Arrow className=\"size-3\" />\n            {Math.abs(delta!)}\n            {deltaUnit === \"%\" ? \"%\" : \"\"}\n          </span>\n        )}\n      </div>\n      {hint && <span className=\"text-mono text-foreground-subtle text-[10px]\">{hint}</span>}\n    </div>\n  );\n});\n\nexport { Metric };\n"
    }
  ]
}