// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats 06 * @description Stats section with circular progress indicators. * Visual progress rings with percentage values and labels. * * @slots stats, stats-container, stats-header, stats-heading, stats-description, * stats-grid, stats-item, stats-ring-wrapper, stats-ring, stats-ring-bg, * stats-ring-progress, stats-ring-value, stats-label * @variant circular * * @registryDependencies * @dependencies */ import * as React from "react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface StatItemConfig { /** Unique identifier for list key */ id: string /** Progress percentage (0-100) */ percentage: number /** Display value (can be different from percentage) */ value: string /** Stat label */ label: string } interface Stats06Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of stats to display */ stats?: StatItemConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STATS: StatItemConfig[] = [ { id: "stat-satisfaction", percentage: 95, value: "95%", label: "Customer Satisfaction" }, { id: "stat-success", percentage: 88, value: "88%", label: "Project Success Rate" }, { id: "stat-return", percentage: 76, value: "76%", label: "Return Customers" }, { id: "stat-delivery", percentage: 99, value: "99%", label: "On-Time Delivery" }, ] // ============================================================================ // SUB-COMPONENTS // ============================================================================ interface CircularProgressProps { /** Progress percentage (0-100) */ percentage: number /** Display value */ value: string /** Size of the ring in pixels */ size?: number /** Stroke width of the ring */ strokeWidth?: number } function CircularProgress({ percentage, value, size = 120, strokeWidth = 8, }: CircularProgressProps) { const radius = (size - strokeWidth) / 2 const circumference = radius * 2 * Math.PI const offset = circumference - (percentage / 100) * circumference return (

{value}

) } // ============================================================================ // COMPONENT // ============================================================================ function Stats06({ heading = "Performance Metrics", description = "Our commitment to excellence is reflected in our performance across all areas.", stats = DEFAULT_STATS, className, idBase, }: Stats06Props) { const headingId = `${idBase ?? "stats-06"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Stats Grid */}

{stats.map((stat) => (

{stat.label}

))}

) } export default Stats06 export { Stats06, type Stats06Props, type StatItemConfig }