{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "language-bar-glass",
  "type": "registry:component",
  "title": "Language Bar Glass",
  "description": "Custom color for the language segment.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/specialized/language-bar-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// LANGUAGE BAR GLASS COMPONENT\n// Language/skill proficiency bar with legend\n// ========================================\n\nimport { forwardRef, useState, type CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\nexport interface LanguageData {\n  readonly name: string;\n  readonly percent: number;\n  /**\n   * Custom color for the language segment.\n   * Accepts any valid CSS color value:\n   * - OKLCH (recommended): `oklch(66.6% 0.159 303)`\n   * - Hex: `#3b82f6`\n   * - RGB: `rgb(59, 130, 246)`\n   * - HSL: `hsl(221, 83%, 53%)`\n   *\n   * **Note:** CSS variables like `var(--oklch-blue-500)` may not work if they're\n   * tree-shaken out in production builds. Use direct color values instead.\n   *\n   * If not provided, falls back to default language colors defined in `defaultLangColors`.\n   */\n  readonly color?: string;\n}\n\nexport interface LanguageBarGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly languages: readonly LanguageData[];\n  readonly showLegend?: boolean;\n}\n\n// CSS variable names for language colors (defined in themes)\nconst defaultLangColors: Record<string, string> = {\n  TypeScript: 'var(--language-typescript)',\n  JavaScript: 'var(--language-javascript)',\n  Python: 'var(--language-python)',\n  HTML: 'var(--language-html)',\n  CSS: 'var(--language-css)',\n  Java: 'var(--language-java)',\n  Go: 'var(--language-go)',\n  Rust: 'var(--language-rust)',\n  Ruby: 'var(--language-ruby)',\n  PHP: 'var(--language-php)',\n};\n\nexport const LanguageBarGlass = forwardRef<HTMLDivElement, LanguageBarGlassProps>(\n  ({ languages = [], showLegend = true, className, ...props }, ref) => {\n    const [hoveredLang, setHoveredLang] = useState<number | null>(null);\n\n    const barStyles: CSSProperties = {\n      boxShadow: 'var(--rainbow-glow)',\n    };\n\n    // Early return if no languages provided\n    if (!languages || languages.length === 0) {\n      return null;\n    }\n\n    return (\n      <div ref={ref} className={cn('w-full', className)} {...props}>\n        {/* Progress bar */}\n        <div\n          className=\"flex h-2 md:h-2.5 rounded-full overflow-hidden\"\n          style={barStyles}\n          role=\"group\"\n          aria-label=\"Language distribution\"\n        >\n          {languages.map((lang, i) => {\n            const bgColor = lang.color ?? defaultLangColors[lang.name] ?? 'var(--oklch-slate-400)';\n            const segmentStyles: CSSProperties = {\n              width: `${lang.percent}%`,\n              backgroundColor: bgColor,\n              opacity: hoveredLang !== null && hoveredLang !== i ? 0.5 : 1,\n              transition: 'all 0.3s',\n            };\n\n            return (\n              <div\n                key={`bar-${lang.name}-${i}`}\n                style={segmentStyles}\n                role=\"progressbar\"\n                aria-label={`${lang.name}: ${lang.percent}%`}\n                aria-valuenow={lang.percent}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                onMouseEnter={() => setHoveredLang(i)}\n                onMouseLeave={() => setHoveredLang(null)}\n              />\n            );\n          })}\n        </div>\n\n        {/* Legend */}\n        {showLegend && (\n          <div className=\"flex items-center gap-3 md:gap-4 mt-1.5 md:mt-2 text-(length:--font-size-2xs) md:text-xs flex-wrap text-(--text-secondary)\">\n            {languages.map((lang, i) => {\n              const bgColor =\n                lang.color ?? defaultLangColors[lang.name] ?? 'var(--oklch-slate-400)';\n\n              return (\n                <span\n                  key={`legend-${lang.name}-${i}`}\n                  className=\"flex items-center gap-1 md:gap-1.5 cursor-pointer\"\n                  onMouseEnter={() => setHoveredLang(i)}\n                  onMouseLeave={() => setHoveredLang(null)}\n                >\n                  <span\n                    className=\"w-2 h-2 md:w-2.5 md:h-2.5 rounded-full\"\n                    style={{ backgroundColor: bgColor }}\n                  />\n                  {lang.name} {lang.percent}%\n                </span>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nLanguageBarGlass.displayName = 'LanguageBarGlass';\n"
    }
  ],
  "categories": [
    "specialized"
  ]
}