{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stats-02","type":"registry:component","title":"Stats 02","description":"A comprehensive performance dashboard component with detailed main statistics cards and simple secondary metrics. Features main stat cards with progress bars, badges with trend indicators, and secondary stats with trend arrows. Perfect for dashboards, analytics sections, and performance monitoring displays requiring detailed progress tracking and comprehensive metrics overview.","dependencies":["lucide-react"],"registryDependencies":["badge","progress"],"files":[{"path":"src/registry/blocks/marketing/social-proof/stats/stats-02.tsx","content":"\"use client\";\n\nimport { ArrowDown, ArrowUp, type LucideIcon, TrendingUp } from \"lucide-react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Progress } from \"@/registry/ui/progress\";\n\nexport interface Stats02MainStat {\n  title: string;\n  value: string;\n  description: string;\n  progress: {\n    value: number;\n    target: string;\n    progressText: string;\n  };\n  badge: {\n    icon: LucideIcon;\n    text: string;\n    className: string;\n  };\n}\n\nexport interface Stats02SimpleStat {\n  value: string;\n  label: string;\n  trend?: {\n    icon: LucideIcon;\n    text: string;\n    className: string;\n  };\n}\n\nexport interface Stats02Props {\n  className?: string;\n}\n\nconst defaultMainStats: Stats02MainStat[] = [\n  {\n    title: \"Revenue Growth\",\n    value: \"$2.4M\",\n    description: \"Monthly recurring revenue\",\n    progress: {\n      value: 78,\n      target: \"Target: $3.1M\",\n      progressText: \"78% complete\",\n    },\n    badge: {\n      icon: ArrowUp,\n      text: \"+24%\",\n      className:\n        \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300\",\n    },\n  },\n  {\n    title: \"Customer Satisfaction\",\n    value: \"4.9/5\",\n    description: \"Average rating from 12,847 reviews\",\n    progress: {\n      value: 98,\n      target: \"Industry avg: 4.2\",\n      progressText: \"98% satisfaction\",\n    },\n    badge: {\n      icon: TrendingUp,\n      text: \"+2.1%\",\n      className:\n        \"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300\",\n    },\n  },\n  {\n    title: \"Market Share\",\n    value: \"23%\",\n    description: \"Of the total addressable market\",\n    progress: {\n      value: 23,\n      target: \"Goal: 30%\",\n      progressText: \"Growing steadily\",\n    },\n    badge: {\n      icon: ArrowUp,\n      text: \"+5.2%\",\n      className:\n        \"bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300\",\n    },\n  },\n];\n\nconst defaultSimpleStats: Stats02SimpleStat[] = [\n  {\n    value: \"847k\",\n    label: \"Downloads\",\n    trend: {\n      icon: ArrowUp,\n      text: \"+12%\",\n      className: \"text-green-600\",\n    },\n  },\n  {\n    value: \"99.7%\",\n    label: \"Accuracy\",\n    trend: {\n      icon: ArrowUp,\n      text: \"+0.3%\",\n      className: \"text-green-600\",\n    },\n  },\n  {\n    value: \"15.2k\",\n    label: \"API Calls/min\",\n    trend: {\n      icon: ArrowUp,\n      text: \"+8%\",\n      className: \"text-green-600\",\n    },\n  },\n  {\n    value: \"94%\",\n    label: \"Success Rate\",\n    trend: {\n      icon: ArrowUp,\n      text: \"+2%\",\n      className: \"text-green-600\",\n    },\n  },\n  {\n    value: \"<2s\",\n    label: \"Load Time\",\n    trend: {\n      icon: ArrowDown,\n      text: \"-200ms\",\n      className: \"text-green-600\",\n    },\n  },\n  {\n    value: \"127ms\",\n    label: \"Response Time\",\n    trend: {\n      icon: ArrowDown,\n      text: \"-15ms\",\n      className: \"text-green-600\",\n    },\n  },\n];\n\nexport function Stats02({ className }: Stats02Props) {\n  const title = \"Performance Dashboard\";\n  const description =\n    \"Real-time insights into our platform's performance and growth metrics across all key areas.\";\n  const mainStats = defaultMainStats;\n  const simpleStats = defaultSimpleStats;\n  const maxWidth = \"max-w-7xl\";\n  const sectionPadding = \"py-16 px-4\";\n\n  const handleMainStatClick = (stat: Stats02MainStat) => {\n    console.log(\"Main stat clicked:\", stat);\n  };\n\n  const handleSimpleStatClick = (stat: Stats02SimpleStat) => {\n    console.log(\"Simple stat clicked:\", stat);\n  };\n\n  return (\n    <section className={cn(sectionPadding, \"bg-muted/30\", className)}>\n      <div className={`${maxWidth} mx-auto`}>\n        {/* Header */}\n        <div className=\"text-center space-y-4 mb-16\">\n          <h2 className=\"text-3xl md:text-4xl font-bold\">{title}</h2>\n          <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n            {description}\n          </p>\n        </div>\n\n        {/* Main Stats Row */}\n        <div className=\"grid md:grid-cols-3 gap-8 mb-12\">\n          {mainStats.map((stat, index) => {\n            const BadgeIcon = stat.badge.icon;\n\n            return (\n              <button\n                key={index}\n                type=\"button\"\n                className=\"bg-card border-border rounded-lg p-8 shadow-sm cursor-pointer hover:shadow-md transition-shadow text-left w-full\"\n                onClick={() => handleMainStatClick(stat)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    handleMainStatClick(stat);\n                  }\n                }}\n              >\n                <div className=\"flex items-center justify-between mb-4\">\n                  <h3 className=\"text-lg font-semibold\">{stat.title}</h3>\n                  <Badge className={stat.badge.className}>\n                    <BadgeIcon className=\"w-3 h-3 mr-1\" />\n                    {stat.badge.text}\n                  </Badge>\n                </div>\n                <div className=\"space-y-4\">\n                  <div className=\"text-4xl font-bold\">{stat.value}</div>\n                  <div className=\"text-sm text-muted-foreground\">\n                    {stat.description}\n                  </div>\n                  <Progress value={stat.progress.value} className=\"h-2\" />\n                  <div className=\"flex justify-between text-xs text-muted-foreground\">\n                    <span>{stat.progress.target}</span>\n                    <span>{stat.progress.progressText}</span>\n                  </div>\n                </div>\n              </button>\n            );\n          })}\n        </div>\n\n        {/* Secondary Stats */}\n        <div className=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6\">\n          {simpleStats.map((stat, index) => {\n            const TrendIcon = stat.trend?.icon;\n\n            return (\n              <button\n                key={index}\n                type=\"button\"\n                className=\"text-center cursor-pointer hover:bg-card/50 rounded-lg p-4 transition-colors w-full\"\n                onClick={() => handleSimpleStatClick(stat)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    handleSimpleStatClick(stat);\n                  }\n                }}\n              >\n                <div className=\"text-2xl font-bold mb-1\">{stat.value}</div>\n                <div className=\"text-sm text-muted-foreground mb-2\">\n                  {stat.label}\n                </div>\n                {stat.trend && (\n                  <div\n                    className={`flex items-center justify-center gap-1 text-xs ${stat.trend.className}`}\n                  >\n                    {TrendIcon && <TrendIcon className=\"h-3 w-3\" />}\n                    <span>{stat.trend.text}</span>\n                  </div>\n                )}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n    </section>\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"}]}