{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"cards-01","type":"registry:component","title":"Stats Cards","description":"Dashboard statistics cards with customizable metrics, trend indicators, color-coded icons, and dropdown menus. Features responsive grid layout, gradient overlays, and support for increase/decrease trends. Perfect for displaying KPIs, analytics, and business metrics.","dependencies":["lucide-react"],"registryDependencies":["card","button","dropdown-menu"],"files":[{"path":"src/registry/blocks/application/data-display/cards/cards-01.tsx","content":"\"use client\";\n\nimport {\n  Activity,\n  DollarSign,\n  ShoppingCart,\n  TrendingDown,\n  TrendingUp,\n  Users,\n} from \"lucide-react\";\n\nimport { cn } from \"@/registry/lib/utils\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/registry/ui/card\";\n\nexport interface Cards01Props {\n  className?: string;\n}\n\nconst content = {\n  stats: [\n    {\n      id: 1,\n      title: \"Total Revenue\",\n      value: \"$45,231.89\",\n      change: \"+20.1%\",\n      changeType: \"increase\" as const,\n      description: \"from last month\",\n      icon: DollarSign,\n      color: \"text-green-600\",\n      bgColor: \"bg-green-100 dark:bg-green-900/20\",\n    },\n    {\n      id: 2,\n      title: \"Active Users\",\n      value: \"2,350\",\n      change: \"+180.1%\",\n      changeType: \"increase\" as const,\n      description: \"from last month\",\n      icon: Users,\n      color: \"text-blue-600\",\n      bgColor: \"bg-blue-100 dark:bg-blue-900/20\",\n    },\n    {\n      id: 3,\n      title: \"Sales\",\n      value: \"+12,234\",\n      change: \"+19%\",\n      changeType: \"increase\" as const,\n      description: \"from last month\",\n      icon: ShoppingCart,\n      color: \"text-purple-600\",\n      bgColor: \"bg-purple-100 dark:bg-purple-900/20\",\n    },\n    {\n      id: 4,\n      title: \"Bounce Rate\",\n      value: \"2.4%\",\n      change: \"-0.5%\",\n      changeType: \"decrease\" as const,\n      description: \"from last month\",\n      icon: Activity,\n      color: \"text-orange-600\",\n      bgColor: \"bg-orange-100 dark:bg-orange-900/20\",\n    },\n  ],\n};\n\nexport function Cards01({ className }: Cards01Props) {\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6\",\n        className,\n      )}\n      data-testid=\"stats-grid\"\n    >\n      {content.stats.map((stat) => {\n        const Icon = stat.icon;\n        const isPositive = stat.changeType === \"increase\";\n        const TrendIcon = isPositive ? TrendingUp : TrendingDown;\n        const trendColor = isPositive ? \"text-green-600\" : \"text-red-600\";\n\n        return (\n          <Card\n            key={stat.id}\n            className=\"relative overflow-hidden\"\n            data-testid={`stat-card-${stat.id}`}\n          >\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium text-muted-foreground\">\n                {stat.title}\n              </CardTitle>\n              <div className=\"flex items-center\">\n                <div className={cn(\"p-2 rounded-lg\", stat.bgColor)}>\n                  <Icon className={cn(\"h-4 w-4\", stat.color)} />\n                </div>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <div className=\"space-y-2\">\n                <div\n                  className=\"text-2xl sm:text-3xl font-bold\"\n                  data-testid={`stat-value-${stat.id}`}\n                >\n                  {stat.value}\n                </div>\n                <div className=\"flex items-center space-x-2 text-xs\">\n                  <div\n                    className={cn(\"flex items-center space-x-1\", trendColor)}\n                  >\n                    <TrendIcon className=\"h-3 w-3\" />\n                    <span\n                      className=\"font-medium\"\n                      data-testid={`stat-change-${stat.id}`}\n                    >\n                      {stat.change}\n                    </span>\n                  </div>\n                  <span className=\"text-muted-foreground\">\n                    {stat.description}\n                  </span>\n                </div>\n              </div>\n            </CardContent>\n            <div className=\"absolute inset-0 bg-gradient-to-br from-transparent to-muted/5 pointer-events-none\" />\n          </Card>\n        );\n      })}\n    </div>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}