{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "repository-card-glass",
  "type": "registry:block",
  "title": "Repository Card Glass",
  "description": "ContributionBadge - Shows contribution percentage with color-coded variant",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/composite/repository-card-glass.tsx",
      "type": "registry:component",
      "content": "/* eslint-disable react-refresh/only-export-components */\n// ========================================\n// REPOSITORY CARD GLASS COMPONENT\n// Expandable repository card with compound API\n// Issue #15: shadcn/ui compatible compound component\n// ========================================\n\nimport { forwardRef, type CSSProperties, type ReactNode, useMemo } from 'react';\nimport {\n  ChevronDown,\n  ChevronUp,\n  Star,\n  ExternalLink,\n  Sparkles,\n  AlertTriangle,\n  GitFork,\n  Activity,\n  Shield,\n} from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { StatusIndicatorGlass } from '../../specialized/status-indicator-glass';\nimport { ButtonGlass } from '../../ui/button-glass';\nimport { BadgeGlass } from '../../ui/badge-glass';\nimport { AvatarGlass, AvatarGlassImage, AvatarGlassFallback } from '../../ui/avatar-glass';\nimport { ProgressGlass } from '../../specialized/progress-glass';\nimport {\n  HoverCardGlass,\n  HoverCardGlassTrigger,\n  HoverCardGlassContent,\n} from '../../ui/hover-card-glass';\nimport { InteractiveCard } from '../../primitives';\nimport {\n  RepositoryCardContext,\n  useRepositoryCard,\n  type RepositoryCardContextValue,\n} from './repository-card-context';\nimport {\n  getContributionBadgeVariant,\n  getActivityStatus,\n  getActivityStatusInfo,\n  getRoleBadgeVariant,\n  getRoleLabel,\n  getHealthStatus,\n  getHealthStatusInfo,\n  getLanguageColor,\n  calculateContributionPercent,\n  formatNumberWithSuffix,\n  type ContributorRole,\n  type TeamMember,\n} from './repository-card-utils';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\nexport type RepositoryFlagType = 'green' | 'yellow' | 'red';\n\n/** Props for RepositoryCardGlass.Root */\nexport interface RepositoryCardRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the card is expanded */\n  expanded?: boolean;\n  /** Callback when toggle is triggered */\n  onToggle?: () => void;\n  children: ReactNode;\n}\n\n/** Props for RepositoryCardGlass.Header */\nexport interface RepositoryCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/** Props for RepositoryCardGlass.Name */\nexport interface RepositoryCardNameProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode;\n}\n\n/** Props for RepositoryCardGlass.Status */\nexport interface RepositoryCardStatusProps {\n  type?: RepositoryFlagType;\n  className?: string;\n}\n\n/** Props for RepositoryCardGlass.Stars */\nexport interface RepositoryCardStarsProps extends React.HTMLAttributes<HTMLSpanElement> {\n  count: number;\n}\n\n/** Props for RepositoryCardGlass.Meta */\nexport interface RepositoryCardMetaProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/** Props for RepositoryCardGlass.Languages */\nexport interface RepositoryCardLanguagesProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/** Props for RepositoryCardGlass.Stats */\nexport interface RepositoryCardStatsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/** Props for RepositoryCardGlass.ExpandedContent */\nexport interface RepositoryCardExpandedContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/** Props for RepositoryCardGlass.Issues */\nexport interface RepositoryCardIssuesProps extends React.HTMLAttributes<HTMLDivElement> {\n  issues: readonly string[];\n}\n\n/** Props for RepositoryCardGlass.Metrics */\nexport interface RepositoryCardMetricsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/** Props for RepositoryCardGlass.MetricItem */\nexport interface RepositoryCardMetricItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string;\n  value: string | number;\n  subtitle?: string;\n}\n\n/** Props for RepositoryCardGlass.Actions */\nexport interface RepositoryCardActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n// ========================================\n// NEW SUB-COMPONENT TYPES (Issue #28)\n// ========================================\n\n/** Props for RepositoryCardGlass.ContributionBadge */\nexport interface RepositoryCardContributionBadgeProps {\n  /** Contribution percentage (0-100) */\n  percent: number;\n  /** Optional className */\n  className?: string;\n}\n\n/** Props for RepositoryCardGlass.ForkBadge */\nexport interface RepositoryCardForkBadgeProps {\n  /** Original repository name (e.g., \"facebook/react\") */\n  forkedFrom?: string;\n  /** Optional className */\n  className?: string;\n}\n\n/** Props for RepositoryCardGlass.Language */\nexport interface RepositoryCardLanguageProps {\n  /** Language name */\n  name: string;\n  /** Custom color (defaults to GitHub language color) */\n  color?: string;\n  /** Percentage of codebase */\n  percent?: number;\n  /** Optional className */\n  className?: string;\n}\n\n/** Props for RepositoryCardGlass.ActivityStatus */\nexport interface RepositoryCardActivityStatusProps {\n  /** Last activity date (ISO string or Date) */\n  lastActivityDate: string | Date;\n  /** Optional className */\n  className?: string;\n}\n\n/** Props for RepositoryCardGlass.RoleBadge */\nexport interface RepositoryCardRoleBadgeProps {\n  /** Contributor role */\n  role: ContributorRole;\n  /** Optional className */\n  className?: string;\n}\n\n/** Props for RepositoryCardGlass.TeamAvatars */\nexport interface RepositoryCardTeamAvatarsProps {\n  /** Team members */\n  members: TeamMember[];\n  /** Total team size (for \"+N\" indicator) */\n  total?: number;\n  /** Max avatars to show */\n  max?: number;\n  /** Optional className */\n  className?: string;\n}\n\n/** Props for RepositoryCardGlass.HealthStatus */\nexport interface RepositoryCardHealthStatusProps {\n  /** Whether the repo is archived */\n  isArchived?: boolean;\n  /** Last push date (ISO string or Date) */\n  pushedAt: string | Date;\n  /** Optional className */\n  className?: string;\n}\n\n/** Props for RepositoryCardGlass.ContributionProgress */\nexport interface RepositoryCardContributionProgressProps {\n  /** User's commits */\n  userCommits: number;\n  /** Total project commits */\n  totalCommits: number;\n  /** PRs merged by user */\n  prsMerged?: number;\n  /** Code reviews by user */\n  reviews?: number;\n  /** Optional className */\n  className?: string;\n}\n\n/** Legacy props for backward compatibility */\nexport interface RepositoryCardGlassLegacyProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly name: string;\n  readonly languages: string;\n  readonly commits: number;\n  readonly contribution: number;\n  readonly stars?: number;\n  readonly flagType?: RepositoryFlagType;\n  readonly issues?: readonly string[];\n  readonly expanded?: boolean;\n  readonly onToggle?: () => void;\n  readonly onGitHubClick?: () => void;\n  readonly onAIAnalysisClick?: () => void;\n}\n\n// ========================================\n// COMPOUND COMPONENTS\n// ========================================\n\n/** Root container with context provider */\nconst RepositoryCardRoot = forwardRef<HTMLDivElement, RepositoryCardRootProps>(\n  ({ expanded = false, onToggle, children, className, ...props }, ref) => {\n    const contextValue = useMemo<RepositoryCardContextValue>(\n      () => ({ expanded, onToggle }),\n      [expanded, onToggle]\n    );\n\n    return (\n      <RepositoryCardContext.Provider value={contextValue}>\n        <InteractiveCard\n          ref={ref}\n          baseBg=\"var(--card-bg)\"\n          hoverBg=\"var(--card-hover-bg)\"\n          borderColor=\"var(--card-border)\"\n          hoverLift={false}\n          blur=\"sm\"\n          rounded=\"rounded-xl\"\n          className={cn('overflow-hidden', className)}\n          {...props}\n        >\n          {children}\n        </InteractiveCard>\n      </RepositoryCardContext.Provider>\n    );\n  }\n);\nRepositoryCardRoot.displayName = 'RepositoryCardGlass.Root';\n\n/** Header section with toggle functionality */\nconst RepositoryCardHeader = forwardRef<HTMLDivElement, RepositoryCardHeaderProps>(\n  ({ children, className, ...props }, ref) => {\n    const { expanded, onToggle } = useRepositoryCard();\n\n    return (\n      <div\n        ref={ref}\n        className={cn('p-3 md:p-3.5 cursor-pointer', className)}\n        onClick={onToggle}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onToggle?.();\n          }\n        }}\n        aria-expanded={expanded}\n        {...props}\n      >\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2.5\">{children}</div>\n          <div className=\"flex items-center gap-2\">\n            {expanded ? (\n              <ChevronUp className=\"w-4 h-4 text-(--text-muted)\" />\n            ) : (\n              <ChevronDown className=\"w-4 h-4 text-(--text-muted)\" />\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nRepositoryCardHeader.displayName = 'RepositoryCardGlass.Header';\n\n/** Repository name */\nconst RepositoryCardName = forwardRef<HTMLSpanElement, RepositoryCardNameProps>(\n  ({ children, className, ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn('font-medium text-sm text-(--text-primary)', className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n);\nRepositoryCardName.displayName = 'RepositoryCardGlass.Name';\n\n/** Status indicator wrapper */\nconst RepositoryCardStatus = forwardRef<HTMLSpanElement, RepositoryCardStatusProps>(\n  ({ type = 'green', className }, ref) => (\n    <span ref={ref} className={className}>\n      <StatusIndicatorGlass type={type} />\n    </span>\n  )\n);\nRepositoryCardStatus.displayName = 'RepositoryCardGlass.Status';\n\n/** Stars count display */\nconst RepositoryCardStars = forwardRef<HTMLSpanElement, RepositoryCardStarsProps>(\n  ({ count, className, ...props }, ref) => {\n    if (count <= 0) return null;\n\n    return (\n      <span\n        ref={ref}\n        className={cn('flex items-center gap-1 text-xs text-(--status-away)', className)}\n        {...props}\n      >\n        <Star className=\"w-3 h-3\" />\n        {count}\n      </span>\n    );\n  }\n);\nRepositoryCardStars.displayName = 'RepositoryCardGlass.Stars';\n\n/** Meta information container */\nconst RepositoryCardMeta = forwardRef<HTMLDivElement, RepositoryCardMetaProps>(\n  ({ children, className, ...props }, ref) => (\n    <div ref={ref} className={cn('px-3 pb-3 md:px-3.5 md:pb-3.5 -mt-1', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nRepositoryCardMeta.displayName = 'RepositoryCardGlass.Meta';\n\n/** Languages display */\nconst RepositoryCardLanguages = forwardRef<HTMLDivElement, RepositoryCardLanguagesProps>(\n  ({ children, className, ...props }, ref) => (\n    <div ref={ref} className={cn('text-xs text-(--text-muted)', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nRepositoryCardLanguages.displayName = 'RepositoryCardGlass.Languages';\n\n/** Stats line display */\nconst RepositoryCardStatsLine = forwardRef<HTMLDivElement, RepositoryCardStatsProps>(\n  ({ children, className, ...props }, ref) => (\n    <div ref={ref} className={cn('text-xs mt-0.5 text-(--text-secondary)', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nRepositoryCardStatsLine.displayName = 'RepositoryCardGlass.Stats';\n\n/** Expanded content container - only renders when expanded */\nconst RepositoryCardExpandedContent = forwardRef<\n  HTMLDivElement,\n  RepositoryCardExpandedContentProps\n>(({ children, className, ...props }, ref) => {\n  const { expanded } = useRepositoryCard();\n\n  if (!expanded) return null;\n\n  const expandedStyles: CSSProperties = {\n    background: 'var(--expanded-bg)',\n    borderColor: 'var(--card-border)',\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn('border-t p-3.5 space-y-3', className)}\n      style={expandedStyles}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\nRepositoryCardExpandedContent.displayName = 'RepositoryCardGlass.ExpandedContent';\n\n/** Issues alert */\nconst RepositoryCardIssues = forwardRef<HTMLDivElement, RepositoryCardIssuesProps>(\n  ({ issues, className, ...props }, ref) => {\n    if (issues.length === 0) return null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('p-3 rounded-xl border', className)}\n        style={{\n          background: 'var(--alert-danger-bg)',\n          borderColor: 'var(--alert-danger-border)',\n        }}\n        {...props}\n      >\n        <div\n          className=\"text-xs font-semibold flex items-center gap-1.5 mb-1.5\"\n          style={{ color: 'var(--alert-danger-text)' }}\n        >\n          <AlertTriangle className=\"w-3.5 h-3.5\" />\n          Issues\n        </div>\n        {issues.map((issue, index) => (\n          <div\n            key={index}\n            className=\"text-xs opacity-70\"\n            style={{ color: 'var(--alert-danger-text)' }}\n          >\n            • {issue}\n          </div>\n        ))}\n      </div>\n    );\n  }\n);\nRepositoryCardIssues.displayName = 'RepositoryCardGlass.Issues';\n\n/** Metrics grid container */\nconst RepositoryCardMetrics = forwardRef<HTMLDivElement, RepositoryCardMetricsProps>(\n  ({ children, className, ...props }, ref) => (\n    <div ref={ref} className={cn('grid grid-cols-2 gap-2', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nRepositoryCardMetrics.displayName = 'RepositoryCardGlass.Metrics';\n\n/** Single metric item */\nconst RepositoryCardMetricItem = forwardRef<HTMLDivElement, RepositoryCardMetricItemProps>(\n  ({ label, value, subtitle, className, ...props }, ref) => {\n    const metricCardStyles: CSSProperties = {\n      background: 'var(--card-bg)',\n      borderColor: 'var(--card-border)',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn('p-2.5 rounded-lg border', className)}\n        style={metricCardStyles}\n        {...props}\n      >\n        <div className=\"text-xs text-(--text-muted)\">{label}</div>\n        <div className=\"font-semibold text-(--text-primary)\">{value}</div>\n        {subtitle && <div className=\"text-xs text-(--text-muted)\">{subtitle}</div>}\n      </div>\n    );\n  }\n);\nRepositoryCardMetricItem.displayName = 'RepositoryCardGlass.MetricItem';\n\n/** Actions container */\nconst RepositoryCardActions = forwardRef<HTMLDivElement, RepositoryCardActionsProps>(\n  ({ children, className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex flex-col sm:flex-row gap-2', className)} {...props}>\n      {children}\n    </div>\n  )\n);\nRepositoryCardActions.displayName = 'RepositoryCardGlass.Actions';\n\n// ========================================\n// NEW SUB-COMPONENTS (Issue #28)\n// ========================================\n\n/**\n * ContributionBadge - Shows contribution percentage with color-coded variant\n * 0-25%: destructive, 26-50%: warning, 51-75%: default, 76-100%: success\n */\nconst RepositoryCardContributionBadge = forwardRef<\n  HTMLDivElement,\n  RepositoryCardContributionBadgeProps\n>(({ percent, className }, ref) => {\n  const variant = getContributionBadgeVariant(percent);\n\n  return (\n    <BadgeGlass ref={ref} variant={variant} size=\"sm\" className={className}>\n      {percent}%\n    </BadgeGlass>\n  );\n});\nRepositoryCardContributionBadge.displayName = 'RepositoryCardGlass.ContributionBadge';\n\n/**\n * ForkBadge - Indicates the repository is a fork\n */\nconst RepositoryCardForkBadge = forwardRef<HTMLDivElement, RepositoryCardForkBadgeProps>(\n  ({ forkedFrom, className }, ref) => {\n    if (forkedFrom) {\n      return (\n        <HoverCardGlass openDelay={200}>\n          <HoverCardGlassTrigger asChild>\n            <span className={cn('inline-flex', className)}>\n              <BadgeGlass ref={ref} variant=\"secondary\" size=\"sm\">\n                <GitFork className=\"w-3 h-3 mr-1\" />\n                Fork\n              </BadgeGlass>\n            </span>\n          </HoverCardGlassTrigger>\n          <HoverCardGlassContent side=\"top\" className=\"w-auto\">\n            <p className=\"text-xs\" style={{ color: 'var(--text-secondary)' }}>\n              Forked from{' '}\n              <span className=\"font-medium\" style={{ color: 'var(--text-primary)' }}>\n                {forkedFrom}\n              </span>\n            </p>\n          </HoverCardGlassContent>\n        </HoverCardGlass>\n      );\n    }\n\n    return (\n      <BadgeGlass ref={ref} variant=\"secondary\" size=\"sm\" className={className}>\n        <GitFork className=\"w-3 h-3 mr-1\" />\n        Fork\n      </BadgeGlass>\n    );\n  }\n);\nRepositoryCardForkBadge.displayName = 'RepositoryCardGlass.ForkBadge';\n\n/**\n * Language - Single language with color dot and optional percentage\n */\nconst RepositoryCardLanguage = forwardRef<HTMLSpanElement, RepositoryCardLanguageProps>(\n  ({ name, color, percent, className }, ref) => {\n    const languageColor = getLanguageColor(name, color);\n\n    return (\n      <span\n        ref={ref}\n        className={cn('inline-flex items-center gap-1.5 text-xs', className)}\n        style={{ color: 'var(--text-secondary)' }}\n      >\n        <span\n          className=\"w-2 h-2 rounded-full shrink-0\"\n          style={{ backgroundColor: languageColor }}\n        />\n        <span>{name}</span>\n        {percent !== undefined && <span style={{ color: 'var(--text-muted)' }}>{percent}%</span>}\n      </span>\n    );\n  }\n);\nRepositoryCardLanguage.displayName = 'RepositoryCardGlass.Language';\n\n/**\n * ActivityStatus - Shows repository activity status based on last activity date\n */\nconst RepositoryCardActivityStatus = forwardRef<HTMLDivElement, RepositoryCardActivityStatusProps>(\n  ({ lastActivityDate, className }, ref) => {\n    const status = getActivityStatus(lastActivityDate);\n    const { label, variant } = getActivityStatusInfo(status);\n\n    return (\n      <BadgeGlass ref={ref} variant={variant} size=\"sm\" className={className}>\n        <Activity className=\"w-3 h-3 mr-1\" />\n        {label}\n      </BadgeGlass>\n    );\n  }\n);\nRepositoryCardActivityStatus.displayName = 'RepositoryCardGlass.ActivityStatus';\n\n/**\n * RoleBadge - Shows contributor role\n */\nconst RepositoryCardRoleBadge = forwardRef<HTMLDivElement, RepositoryCardRoleBadgeProps>(\n  ({ role, className }, ref) => {\n    const variant = getRoleBadgeVariant(role);\n    const label = getRoleLabel(role);\n\n    return (\n      <BadgeGlass ref={ref} variant={variant} size=\"sm\" className={className}>\n        {label}\n      </BadgeGlass>\n    );\n  }\n);\nRepositoryCardRoleBadge.displayName = 'RepositoryCardGlass.RoleBadge';\n\n/**\n * TeamAvatars - Shows team member avatars with HoverCard previews\n */\nconst RepositoryCardTeamAvatars = forwardRef<HTMLDivElement, RepositoryCardTeamAvatarsProps>(\n  ({ members, total, max = 5, className }, ref) => {\n    const visibleMembers = members.slice(0, max);\n    const remaining = total ? total - max : members.length - max;\n\n    return (\n      <div ref={ref} className={cn('flex items-center -space-x-2', className)}>\n        {visibleMembers.map((member) => (\n          <HoverCardGlass key={member.id} openDelay={200}>\n            <HoverCardGlassTrigger asChild>\n              <span className=\"inline-flex\">\n                <AvatarGlass size=\"sm\" className=\"border-2 border-(--card-bg) cursor-pointer\">\n                  {member.avatar ? (\n                    <AvatarGlassImage src={member.avatar} alt={member.name} />\n                  ) : null}\n                  <AvatarGlassFallback>\n                    {member.name\n                      .split(' ')\n                      .map((n) => n[0])\n                      .join('')\n                      .toUpperCase()\n                      .slice(0, 2)}\n                  </AvatarGlassFallback>\n                </AvatarGlass>\n              </span>\n            </HoverCardGlassTrigger>\n            <HoverCardGlassContent side=\"top\" className=\"w-auto\">\n              <div className=\"flex items-center gap-2\">\n                <AvatarGlass size=\"md\">\n                  {member.avatar ? (\n                    <AvatarGlassImage src={member.avatar} alt={member.name} />\n                  ) : null}\n                  <AvatarGlassFallback>\n                    {member.name\n                      .split(' ')\n                      .map((n) => n[0])\n                      .join('')\n                      .toUpperCase()\n                      .slice(0, 2)}\n                  </AvatarGlassFallback>\n                </AvatarGlass>\n                <div>\n                  <p className=\"text-sm font-medium\" style={{ color: 'var(--text-primary)' }}>\n                    {member.name}\n                  </p>\n                  {member.role && (\n                    <p className=\"text-xs\" style={{ color: 'var(--text-muted)' }}>\n                      {getRoleLabel(member.role)}\n                    </p>\n                  )}\n                </div>\n              </div>\n            </HoverCardGlassContent>\n          </HoverCardGlass>\n        ))}\n\n        {remaining > 0 && (\n          <span\n            className=\"flex items-center justify-center w-8 h-8 rounded-full text-xs font-medium border-2\"\n            style={{\n              backgroundColor: 'var(--card-bg)',\n              borderColor: 'var(--card-border)',\n              color: 'var(--text-muted)',\n            }}\n          >\n            +{remaining}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\nRepositoryCardTeamAvatars.displayName = 'RepositoryCardGlass.TeamAvatars';\n\n/**\n * HealthStatus - Shows repository health based on last push and archive status\n */\nconst RepositoryCardHealthStatus = forwardRef<HTMLDivElement, RepositoryCardHealthStatusProps>(\n  ({ isArchived = false, pushedAt, className }, ref) => {\n    const status = getHealthStatus(pushedAt, isArchived);\n    const { label, variant } = getHealthStatusInfo(status);\n\n    return (\n      <BadgeGlass ref={ref} variant={variant} size=\"sm\" className={className}>\n        <Shield className=\"w-3 h-3 mr-1\" />\n        {label}\n      </BadgeGlass>\n    );\n  }\n);\nRepositoryCardHealthStatus.displayName = 'RepositoryCardGlass.HealthStatus';\n\n/**\n * ContributionProgress - Shows contribution metrics with progress bars\n */\nconst RepositoryCardContributionProgress = forwardRef<\n  HTMLDivElement,\n  RepositoryCardContributionProgressProps\n>(({ userCommits, totalCommits, prsMerged, reviews, className }, ref) => {\n  const commitPercent = calculateContributionPercent(userCommits, totalCommits);\n\n  return (\n    <div ref={ref} className={cn('space-y-3', className)}>\n      {/* Commits progress */}\n      <div>\n        <div className=\"flex justify-between text-xs mb-1\">\n          <span style={{ color: 'var(--text-secondary)' }}>Commits</span>\n          <span style={{ color: 'var(--text-primary)' }}>\n            {formatNumberWithSuffix(userCommits)} / {formatNumberWithSuffix(totalCommits)} (\n            {commitPercent}%)\n          </span>\n        </div>\n        <ProgressGlass value={commitPercent} size=\"sm\" gradient=\"violet\" />\n      </div>\n\n      {/* Additional metrics */}\n      {(prsMerged !== undefined || reviews !== undefined) && (\n        <div className=\"flex gap-4\">\n          {prsMerged !== undefined && (\n            <div className=\"flex-1\">\n              <div className=\"text-xs mb-0.5\" style={{ color: 'var(--text-muted)' }}>\n                PRs Merged\n              </div>\n              <div className=\"text-sm font-medium\" style={{ color: 'var(--text-primary)' }}>\n                {prsMerged}\n              </div>\n            </div>\n          )}\n          {reviews !== undefined && (\n            <div className=\"flex-1\">\n              <div className=\"text-xs mb-0.5\" style={{ color: 'var(--text-muted)' }}>\n                Reviews\n              </div>\n              <div className=\"text-sm font-medium\" style={{ color: 'var(--text-primary)' }}>\n                {reviews}\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\nRepositoryCardContributionProgress.displayName = 'RepositoryCardGlass.ContributionProgress';\n\n// ========================================\n// LEGACY COMPONENT (backward compatibility)\n// ========================================\n\nconst RepositoryCardGlassLegacy = forwardRef<HTMLDivElement, RepositoryCardGlassLegacyProps>(\n  (\n    {\n      name,\n      languages,\n      commits,\n      contribution,\n      stars = 0,\n      flagType = 'green',\n      issues = [],\n      expanded = false,\n      onToggle,\n      onGitHubClick,\n      onAIAnalysisClick,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    // Calculate total project commits from contribution percentage\n    const totalProjectCommits =\n      contribution > 0 ? Math.round(commits / (contribution / 100)) : commits;\n    const estimatedLines = Math.round(commits * 12);\n\n    return (\n      <RepositoryCardRoot\n        ref={ref}\n        expanded={expanded}\n        onToggle={onToggle}\n        className={className}\n        {...props}\n      >\n        <RepositoryCardHeader>\n          <RepositoryCardName>{name}</RepositoryCardName>\n          <RepositoryCardStatus type={flagType} />\n          <RepositoryCardStars count={stars} />\n        </RepositoryCardHeader>\n\n        <RepositoryCardMeta>\n          <RepositoryCardLanguages>{languages}</RepositoryCardLanguages>\n          <RepositoryCardStatsLine>\n            {commits} commits · {contribution}%\n          </RepositoryCardStatsLine>\n        </RepositoryCardMeta>\n\n        <RepositoryCardExpandedContent>\n          <RepositoryCardIssues issues={issues} />\n\n          <RepositoryCardMetrics>\n            <RepositoryCardMetricItem\n              label=\"Your Contribution\"\n              value={`${commits} commits`}\n              subtitle={`${contribution}%`}\n            />\n            <RepositoryCardMetricItem\n              label=\"Full Project\"\n              value={`${totalProjectCommits} commits`}\n              subtitle={`~${estimatedLines} lines`}\n            />\n          </RepositoryCardMetrics>\n\n          <RepositoryCardActions>\n            <ButtonGlass\n              variant=\"secondary\"\n              size=\"sm\"\n              icon={ExternalLink}\n              onClick={(e) => {\n                e.stopPropagation();\n                onGitHubClick?.();\n              }}\n              className=\"flex-1\"\n            >\n              GitHub\n            </ButtonGlass>\n            <ButtonGlass\n              variant=\"default\"\n              size=\"sm\"\n              icon={Sparkles}\n              onClick={(e) => {\n                e.stopPropagation();\n                onAIAnalysisClick?.();\n              }}\n              className=\"flex-1\"\n            >\n              AI Analysis\n            </ButtonGlass>\n          </RepositoryCardActions>\n        </RepositoryCardExpandedContent>\n      </RepositoryCardRoot>\n    );\n  }\n);\nRepositoryCardGlassLegacy.displayName = 'RepositoryCardGlass';\n\n// ========================================\n// EXPORTS\n// ========================================\n\n/**\n * RepositoryCardGlass - Expandable repository card with compound API\n *\n * @example Legacy API (backward compatible)\n * ```tsx\n * <RepositoryCardGlass\n *   name=\"my-repo\"\n *   languages=\"TypeScript, React\"\n *   commits={500}\n *   contribution={45}\n *   expanded={true}\n *   onToggle={() => setExpanded(!expanded)}\n * />\n * ```\n *\n * @example Compound API (flexible)\n * ```tsx\n * <RepositoryCardGlass.Root expanded={expanded} onToggle={() => setExpanded(!expanded)}>\n *   <RepositoryCardGlass.Header>\n *     <RepositoryCardGlass.Name>my-repo</RepositoryCardGlass.Name>\n *     <RepositoryCardGlass.Status type=\"green\" />\n *     <RepositoryCardGlass.Stars count={42} />\n *   </RepositoryCardGlass.Header>\n *   <RepositoryCardGlass.Meta>\n *     <RepositoryCardGlass.Languages>TypeScript</RepositoryCardGlass.Languages>\n *     <RepositoryCardGlass.Stats>500 commits · 45%</RepositoryCardGlass.Stats>\n *   </RepositoryCardGlass.Meta>\n *   <RepositoryCardGlass.ExpandedContent>\n *     <RepositoryCardGlass.Metrics>\n *       <RepositoryCardGlass.MetricItem label=\"Commits\" value=\"500\" />\n *     </RepositoryCardGlass.Metrics>\n *   </RepositoryCardGlass.ExpandedContent>\n * </RepositoryCardGlass.Root>\n * ```\n */\nexport const RepositoryCardGlass = Object.assign(RepositoryCardGlassLegacy, {\n  Root: RepositoryCardRoot,\n  Header: RepositoryCardHeader,\n  Name: RepositoryCardName,\n  Status: RepositoryCardStatus,\n  Stars: RepositoryCardStars,\n  Meta: RepositoryCardMeta,\n  Languages: RepositoryCardLanguages,\n  Stats: RepositoryCardStatsLine,\n  ExpandedContent: RepositoryCardExpandedContent,\n  Issues: RepositoryCardIssues,\n  Metrics: RepositoryCardMetrics,\n  MetricItem: RepositoryCardMetricItem,\n  Actions: RepositoryCardActions,\n  // Issue #28: New sub-components\n  ContributionBadge: RepositoryCardContributionBadge,\n  ForkBadge: RepositoryCardForkBadge,\n  Language: RepositoryCardLanguage,\n  ActivityStatus: RepositoryCardActivityStatus,\n  RoleBadge: RepositoryCardRoleBadge,\n  TeamAvatars: RepositoryCardTeamAvatars,\n  HealthStatus: RepositoryCardHealthStatus,\n  ContributionProgress: RepositoryCardContributionProgress,\n});\n\n// Named exports for direct imports\nexport {\n  RepositoryCardRoot,\n  RepositoryCardHeader,\n  RepositoryCardName,\n  RepositoryCardStatus,\n  RepositoryCardStars,\n  RepositoryCardMeta,\n  RepositoryCardLanguages,\n  RepositoryCardStatsLine,\n  RepositoryCardExpandedContent,\n  RepositoryCardIssues,\n  RepositoryCardMetrics,\n  RepositoryCardMetricItem,\n  RepositoryCardActions,\n  // Issue #28: New sub-components\n  RepositoryCardContributionBadge,\n  RepositoryCardForkBadge,\n  RepositoryCardLanguage,\n  RepositoryCardActivityStatus,\n  RepositoryCardRoleBadge,\n  RepositoryCardTeamAvatars,\n  RepositoryCardHealthStatus,\n  RepositoryCardContributionProgress,\n};\n\n// Re-export context hook\nexport { useRepositoryCard, useRepositoryCardOptional } from './repository-card-context';\n\n// Re-export utility types\nexport type {\n  ActivityStatusType,\n  ContributorRole,\n  HealthStatusType,\n  TeamMember,\n} from './repository-card-utils';\n"
    }
  ],
  "categories": [
    "composite"
  ]
}