// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats Cards 03 * @description Detailed statistics cards with progress bars and target tracking. * Ideal for goal tracking and KPI dashboards. * * @slots stats, stats-container, stats-grid, stats-card, stats-header, * stats-title, stats-icon, stats-value, stats-target, stats-progress, * stats-description * @variant detailed * * @registryDependencies card progress * @dependencies lucide-react */ import * as React from "react" import { Target, TrendingUp, Users, Zap } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Card, CardContent, CardHeader, CardTitle } from "@/registry/ui/card" import { Progress } from "@/registry/ui/progress" // ============================================================================ // TYPES // ============================================================================ interface StatCard { /** Unique identifier */ id: string /** Stat title */ title: string /** Current value */ value: string /** Target value */ target: string /** Progress percentage (0-100) */ progress: number /** Icon component */ icon: React.ComponentType<{ className?: string "aria-hidden"?: boolean | "true" | "false" focusable?: "true" | "false" }> /** Description text */ description: string } interface StatsCards03Props { /** Statistics to display */ stats?: StatCard[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatCard[] = [ { id: "stat-1", title: "Monthly Revenue", value: "$32,450", target: "$50,000", progress: 65, icon: Target, description: "65% of monthly target" }, { id: "stat-2", title: "New Users", value: "1,247", target: "2,000", progress: 62, icon: Users, description: "62% of acquisition goal" }, { id: "stat-3", title: "Conversion Rate", value: "3.8%", target: "5%", progress: 76, icon: TrendingUp, description: "Above industry average" }, { id: "stat-4", title: "Active Sessions", value: "847", target: "1,000", progress: 85, icon: Zap, description: "85% of peak capacity" }, ] // ============================================================================ // COMPONENT // ============================================================================ function StatsCards03({ stats = defaultStats, className, }: StatsCards03Props) { return (

Detailed Statistics

{stats.map((stat) => (

{stat.title}

{stat.value} / {stat.target}

{stat.description}

))}

) } export default StatsCards03 export { StatsCards03, type StatsCards03Props, type StatCard }