{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contribution-metrics-glass",
  "type": "registry:block",
  "title": "Contribution Metrics Glass",
  "description": "Repository contribution metrics grid displaying user and project statistics.\n * Extracted from RepositoryCardGlass for reusable contribution displays.\n *\n * ## Features",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/composite/contribution-metrics-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// CONTRIBUTION METRICS GLASS - COMPOSITE COMPONENT\n// Repository contribution metrics grid\n// Level 3: Composite (extracted from RepositoryCardGlass)\n// ========================================\n\nimport { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n/**\n * Props for ContributionMetricsGlass component.\n *\n * Extends standard div attributes for maximum flexibility.\n * All props are readonly to ensure immutability.\n *\n * @example\n * ```tsx\n * const props: ContributionMetricsGlassProps = {\n *   userCommits: 1234,\n *   userContribution: 45,\n *   totalProjectCommits: 2744,\n *   estimatedLines: 14808,\n *   columns: 2,\n * };\n * ```\n */\nexport interface ContributionMetricsGlassProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Number of commits made by the user.\n   *\n   * Displayed in the first card as \"Your Contribution\" with thousand separators.\n   *\n   * @example\n   * ```tsx\n   * <ContributionMetricsGlass userCommits={1234} /> // Shows \"1,234 commits\"\n   * ```\n   */\n  readonly userCommits: number;\n\n  /**\n   * User's contribution percentage (0-100).\n   *\n   * Used to calculate total project commits if not provided.\n   * Displayed below user commits.\n   *\n   * @example\n   * ```tsx\n   * <ContributionMetricsGlass userContribution={45} /> // Shows \"45%\"\n   * ```\n   */\n  readonly userContribution: number;\n\n  /**\n   * Total project commits across all contributors.\n   *\n   * If not provided, automatically calculated from userCommits and userContribution.\n   * Calculation: `userCommits / (userContribution / 100)`\n   *\n   * @default Calculated from userCommits and userContribution\n   *\n   * @example\n   * ```tsx\n   * // Manual total\n   * <ContributionMetricsGlass totalProjectCommits={5000} />\n   *\n   * // Auto-calculated: 1000 / (50 / 100) = 2000\n   * <ContributionMetricsGlass userCommits={1000} userContribution={50} />\n   * ```\n   */\n  readonly totalProjectCommits?: number;\n\n  /**\n   * Estimated lines of code in the project.\n   *\n   * If not provided, automatically calculated as `userCommits * 12`.\n   * Displayed with thousand separators (e.g., \"14,808 lines\").\n   *\n   * @default userCommits * 12\n   *\n   * @example\n   * ```tsx\n   * // Manual lines\n   * <ContributionMetricsGlass estimatedLines={25000} />\n   *\n   * // Auto-calculated: 1000 * 12 = 12000\n   * <ContributionMetricsGlass userCommits={1000} />\n   * ```\n   */\n  readonly estimatedLines?: number;\n\n  /**\n   * Grid layout column configuration.\n   *\n   * - `1`: Single column (cards stack vertically)\n   * - `2`: Two columns on sm+ screens, single column on mobile\n   *\n   * @default 2\n   */\n  readonly columns?: 1 | 2;\n}\n\n/**\n * ContributionMetricsGlass Component\n *\n * Repository contribution metrics grid displaying user and project statistics.\n * Extracted from RepositoryCardGlass for reusable contribution displays.\n *\n * ## Features\n * - 2-card layout (user contribution + full project)\n * - Automatic calculation of total commits from percentage\n * - Automatic estimation of lines of code (commits × 12)\n * - Thousand separator formatting for large numbers\n * - Responsive grid (1 or 2 columns)\n * - Glass card styling with border and background\n * - Semantic color variables for theme consistency\n * - Three-tier information hierarchy (label, value, details)\n * - Compact padding (2.5rem) for dense layouts\n * - Optional manual override for calculations\n *\n * ## CSS Variables\n * - `--card-bg` - Card background color\n * - `--card-border` - Card border color\n * - `--text-muted` - Muted text color for labels\n * - `--text-primary` - Primary text color for values\n *\n * @example\n * // Basic usage with auto-calculation\n * <ContributionMetricsGlass\n *   userCommits={1234}\n *   userContribution={45}\n * />\n *\n * @example\n * // With manual total and lines\n * <ContributionMetricsGlass\n *   userCommits={1234}\n *   userContribution={45}\n *   totalProjectCommits={2744}\n *   estimatedLines={14808}\n * />\n *\n * @example\n * // Single column layout\n * <ContributionMetricsGlass\n *   userCommits={500}\n *   userContribution={25}\n *   columns={1}\n * />\n *\n * @example\n * // With custom styling\n * <ContributionMetricsGlass\n *   userCommits={2000}\n *   userContribution={60}\n *   className=\"gap-4\"\n * />\n *\n * @accessibility\n * - Semantic HTML structure with proper text hierarchy\n * - Sufficient color contrast via CSS variables\n * - Thousand separators for number readability (toLocaleString)\n * - Clear label-value relationships\n * - Non-interactive display (no keyboard requirements)\n * - Responsive text sizes for readability\n *\n * @since v1.0.0\n */\nexport const ContributionMetricsGlass = forwardRef<HTMLDivElement, ContributionMetricsGlassProps>(\n  (\n    {\n      userCommits,\n      userContribution,\n      totalProjectCommits: providedTotal,\n      estimatedLines: providedLines,\n      columns = 2,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    // Calculate total project commits from contribution percentage\n    const totalProjectCommits =\n      providedTotal ??\n      (userContribution > 0 ? Math.round(userCommits / (userContribution / 100)) : userCommits);\n\n    const estimatedLines = providedLines ?? Math.round(userCommits * 12);\n\n    const cardStyles: CSSProperties = {\n      background: 'var(--card-bg)',\n      borderColor: 'var(--card-border)',\n    };\n\n    const mutedStyles: CSSProperties = {\n      color: 'var(--text-muted)',\n    };\n\n    const primaryStyles: CSSProperties = {\n      color: 'var(--text-primary)',\n    };\n\n    const columnClasses = {\n      1: 'grid-cols-1',\n      2: 'grid-cols-1 sm:grid-cols-2',\n    };\n\n    return (\n      <div ref={ref} className={cn('grid gap-2', columnClasses[columns], className)} {...props}>\n        <div className=\"p-2.5 rounded-lg border\" style={cardStyles}>\n          <div className=\"text-xs\" style={mutedStyles}>\n            Your Contribution\n          </div>\n          <div className=\"font-semibold\" style={primaryStyles}>\n            {userCommits.toLocaleString()} commits\n          </div>\n          <div className=\"text-xs\" style={mutedStyles}>\n            {userContribution}%\n          </div>\n        </div>\n        <div className=\"p-2.5 rounded-lg border\" style={cardStyles}>\n          <div className=\"text-xs\" style={mutedStyles}>\n            Full Project\n          </div>\n          <div className=\"font-semibold\" style={primaryStyles}>\n            {totalProjectCommits.toLocaleString()} commits\n          </div>\n          <div className=\"text-xs\" style={mutedStyles}>\n            ~{estimatedLines.toLocaleString()} lines\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nContributionMetricsGlass.displayName = 'ContributionMetricsGlass';\n"
    }
  ],
  "categories": [
    "composite"
  ]
}