// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats Cards 07 * @description Stats cards with radial/donut charts for progress visualization. * Cards featuring circular progress indicators with value in center. * * @slots stats, stats-container, stats-grid, stats-card, stats-card-content, * stats-card-chart-wrapper, stats-card-chart, stats-card-chart-value, * stats-card-info, stats-card-title, stats-card-description * @variant radial * * @registryDependencies card * @dependencies */ import * as React from "react" import { Card, CardContent } from "@/registry/ui/card" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface StatCardConfig { id: string title: string percentage: number value: string description?: string } interface StatsCards07Props { stats?: StatCardConfig[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatCardConfig[] = [ { id: "stat-1", title: "Storage Used", percentage: 72, value: "72%", description: "18GB of 25GB used", }, { id: "stat-2", title: "Tasks Completed", percentage: 85, value: "85%", description: "17 of 20 tasks done", }, { id: "stat-3", title: "Budget Spent", percentage: 45, value: "45%", description: "$4,500 of $10,000", }, { id: "stat-4", title: "Goal Progress", percentage: 93, value: "93%", description: "Almost there!", }, ] // ============================================================================ // SUB-COMPONENTS // ============================================================================ interface DonutChartProps { percentage: number value: string size?: number strokeWidth?: number className?: string valueClassName?: string } function DonutChart({ percentage, value, size = 100, strokeWidth = 10, className, valueClassName, }: DonutChartProps) { const radius = (size - strokeWidth) / 2 const circumference = radius * 2 * Math.PI const offset = circumference - (percentage / 100) * circumference return (

{value}

) } // ============================================================================ // COMPONENT // ============================================================================ function StatsCards07({ stats = defaultStats, className, idBase = "stats-cards-07", }: StatsCards07Props) { return (

{stats.map((stat) => (

{stat.title}

{stat.description && (

{stat.description}

)}

))}

) } export default StatsCards07 export { StatsCards07, type StatsCards07Props }