{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric-card",
  "type": "registry:component",
  "title": "Metric Card",
  "description": "A metric card component.",
  "dependencies": [
    "lucide-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "src/components/metric/metric-card.tsx",
      "content": "import type { VariantProps } from \"class-variance-authority\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDown, ChevronUp } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst metricCardVariants = cva(\n  \"flex flex-col gap-1 border rounded-lg px-3 py-2 text-card-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"border-input bg-card\",\n        ghost: \"border-transparent\",\n        destructive: \"border-destructive/80 bg-destructive/10\",\n        success: \"border-success/80 bg-success/10\",\n        warning: \"border-warning/80 bg-warning/10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nexport function MetricCard({\n  children,\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof metricCardVariants>) {\n  return (\n    <div\n      data-variant={variant}\n      className={cn(metricCardVariants({ variant, className }), \"group/metric\")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function MetricCardTitle({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p className={cn(\"font-medium text-sm\", className)} {...props}>\n      {children}\n    </p>\n  );\n}\n\nexport function MetricCardHeader({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"text-muted-foreground\",\n        \"group-data-[variant=destructive]/metric:text-destructive\",\n        \"group-data-[variant=success]/metric:text-success\",\n        \"group-data-[variant=warning]/metric:text-warning\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function MetricCardValue({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p className={cn(\"font-semibold text-foreground\", className)} {...props}>\n      {children}\n    </p>\n  );\n}\n\nexport function MetricCardGroup({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nconst badgeVariants = cva(\"px-1.5 font-mono text-[10px]\", {\n  variants: {\n    variant: {\n      default: \"border-border\",\n      increase:\n        \"border-destructive/20 bg-destructive/10 hover:bg-destructive/10 text-destructive\",\n      decrease:\n        \"border-success/20 bg-success/10 hover:bg-success/10 text-success\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport function MetricCardBadge({\n  value,\n  decimal = 1,\n  className,\n  ...props\n}: React.ComponentProps<typeof Badge> & {\n  value: number;\n  decimal?: number;\n}) {\n  const round = 10 ** decimal; // 10^1 = 10 (1 decimal), 10^2 = 100 (2 decimals), etc.\n  const percentage = Math.round((value - 1) * 100 * round) / round;\n\n  const variant: VariantProps<typeof badgeVariants>[\"variant\"] =\n    percentage > 0 ? \"increase\" : percentage < 0 ? \"decrease\" : \"default\";\n\n  return (\n    <Badge\n      variant=\"secondary\"\n      className={badgeVariants({ variant, className })}\n      {...props}\n    >\n      {percentage !== 0 ? (\n        <span>\n          {percentage > 0 ? <ChevronUp className=\"mr-px size-2.5\" /> : null}\n          {percentage < 0 ? <ChevronDown className=\"mr-px size-2.5\" /> : null}\n        </span>\n      ) : null}\n      {Math.abs(percentage)}%\n    </Badge>\n  );\n}\n\nconst metricCardButtonVariants = cva(\n  \"group w-full text-left transition-all rounded-md outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 cursor-pointer\",\n  // TODO: discuss if we want rings\n);\n\nexport function MetricCardButton({\n  children,\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"button\"> & VariantProps<typeof metricCardVariants>) {\n  return (\n    <button\n      type=\"button\"\n      data-variant={variant}\n      className={cn(\n        metricCardVariants({ variant, className }),\n        metricCardButtonVariants(),\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "light": {
      "success": "oklch(0.72 0.19 150)",
      "warning": "oklch(0.77 0.16 70)",
      "info": "oklch(0.62 0.19 260)"
    },
    "dark": {
      "success": "oklch(0.72 0.19 150)",
      "warning": "oklch(0.77 0.16 70)",
      "info": "oklch(0.62 0.19 260)"
    }
  }
}