{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric-card",
  "title": "Metric Card",
  "description": "The nx-ui Metric Card block.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/card",
    "@nx-ui/featured-icon",
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/metric-card.tsx",
      "content": "import * as React from \"react\"\nimport { ArrowDown, ArrowUp } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Card } from \"@/components/ui/card\"\nimport { FeaturedIcon } from \"@/components/blocks/featured-icon\"\n\n/**\n * MetricCard — the dashboard KPI card: a label, a big value, and a coloured\n * trend delta (up = success, down = error), with an optional leading\n * FeaturedIcon and an optional chart/sparkline slot.\n *\n * Composes `card` + `featured-icon`. The trend is rendered by `MetricTrend`;\n * pass a `chart` node (e.g. a small `@nx-ui/chart` area) for the chart variant.\n *\n * @example\n * <MetricCard\n *   label=\"Diverted from landfill\"\n *   value=\"1,284 t\"\n *   icon={Recycle01}\n *   trend={{ direction: \"up\", value: \"12%\", label: \"vs last month\" }}\n * />\n */\n\ninterface TrendProps {\n  direction: \"up\" | \"down\"\n  value: string\n  label?: string\n  /** Invert the colour meaning (e.g. a rising cost is bad). Default: up=good. */\n  invertColor?: boolean\n}\n\nfunction MetricTrend({\n  direction,\n  value,\n  label,\n  invertColor = false,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & TrendProps) {\n  const isUp = direction === \"up\"\n  const isPositive = invertColor ? !isUp : isUp\n  const Arrow = isUp ? ArrowUp : ArrowDown\n  return (\n    <div\n      data-slot=\"metric-trend\"\n      className={cn(\"flex items-center gap-2 text-sm font-medium\", className)}\n      {...props}\n    >\n      <span\n        className={cn(\n          \"inline-flex items-center gap-0.5\",\n          isPositive ? \"text-text-success-primary\" : \"text-text-error-primary\"\n        )}\n      >\n        <Arrow className=\"size-4\" />\n        {value}\n      </span>\n      {label ? <span className=\"text-text-tertiary\">{label}</span> : null}\n    </div>\n  )\n}\n\nfunction MetricCard({\n  label,\n  value,\n  icon,\n  iconColor = \"brand\",\n  trend,\n  chart,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof Card>, \"title\"> & {\n  label: React.ReactNode\n  value: React.ReactNode\n  icon?: React.ComponentType<{ className?: string }>\n  iconColor?: React.ComponentProps<typeof FeaturedIcon>[\"color\"]\n  trend?: TrendProps\n  /** Optional sparkline / mini-chart node, rendered below the value. */\n  chart?: React.ReactNode\n}) {\n  return (\n    <Card\n      data-slot=\"metric-card\"\n      className={cn(\"gap-0 p-5 [--card-spacing:0px]\", className)}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <p className=\"text-sm font-medium text-text-tertiary\">{label}</p>\n          <p className=\"text-3xl font-semibold tracking-tight text-text-primary\">\n            {value}\n          </p>\n        </div>\n        {icon ? (\n          <FeaturedIcon icon={icon} color={iconColor} theme=\"light\" size=\"lg\" />\n        ) : null}\n      </div>\n\n      {chart ? <div className=\"mt-4\">{chart}</div> : null}\n\n      {trend ? <MetricTrend className=\"mt-4\" {...trend} /> : null}\n\n      {children}\n    </Card>\n  )\n}\n\nexport { MetricCard, MetricTrend }\nexport type { TrendProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}