// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats 03 * @description A compact horizontal stats bar. Great for embedding within * hero sections or as a trust indicator. * * @slots stats, stats-container, stats-list, stats-item, stats-value, stats-label * @variant inline * * @registryDependencies * @dependencies */ import * as React from "react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface StatItem { /** Unique identifier */ id: string /** Stat value (e.g., "10M+", "99.9%") */ value: string /** Stat label */ label: string } interface Stats03Props { /** Array of stats to display */ stats?: StatItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatItem[] = [ { id: "stat-1", value: "10M+", label: "Downloads" }, { id: "stat-2", value: "99.9%", label: "Uptime" }, { id: "stat-3", value: "500+", label: "Components" }, { id: "stat-4", value: "24/7", label: "Support" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Stats03({ stats = defaultStats, className, }: Stats03Props) { return (

{stat.value}: {stat.label}

) } export default Stats03 export { Stats03, type Stats03Props, type StatItem }