{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-nav-glass",
  "type": "registry:block",
  "title": "Header Nav Glass",
  "description": "Header Nav Glass component with glass effects",
  "dependencies": [
    "lucide-react",
    "react"
  ],
  "registryDependencies": [
    "cn",
    "theme-provider"
  ],
  "files": [
    {
      "path": "components/glass/sections/header-nav-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// HEADER NAV GLASS COMPONENT\n// Navigation header with search and theme toggle\n// ========================================\n\nimport { forwardRef, type CSSProperties } from \"react\";\nimport { Github, Sun, Moon, Palette } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { useTheme, type ThemeName } from \"@/lib/theme-context\";\nimport { ButtonGlass } from \"../ui/button-glass\";\nimport { SearchBoxGlass } from \"../atomic/search-box-glass\";\nimport \"@/glass-theme.css\";\n\nconst themes: ThemeName[] = [\"light\", \"aurora\", \"glass\"];\n\nconst themeConfig: Record<ThemeName, { label: string; icon: typeof Sun }> = {\n  light: { label: \"Light\", icon: Sun },\n  aurora: { label: \"Aurora\", icon: Moon },\n  glass: { label: \"Glass\", icon: Palette },\n};\n\nexport interface HeaderNavGlassProps extends React.HTMLAttributes<HTMLElement> {\n  readonly username?: string;\n  readonly onSearch?: (value: string) => void;\n  readonly onThemeToggle?: () => void;\n}\n\nexport const HeaderNavGlass = forwardRef<HTMLElement, HeaderNavGlassProps>(\n  ({ username = \"Yhooi2\", onSearch, onThemeToggle, className, ...props }, ref) => {\n    const { theme, cycleTheme } = useTheme();\n\n    const nextTheme = themes[(themes.indexOf(theme) + 1) % themes.length];\n    const NextIcon = themeConfig[nextTheme].icon;\n\n    const headerStyles: CSSProperties = {\n      background: \"var(--header-bg)\",\n      borderColor: \"var(--header-border)\",\n      backdropFilter: \"blur(var(--blur-md))\",\n      WebkitBackdropFilter: \"blur(var(--blur-md))\",\n    };\n\n    const iconBtnStyles: CSSProperties = {\n      background: \"linear-gradient(135deg, var(--icon-btn-from), var(--icon-btn-to))\",\n      boxShadow: \"var(--icon-btn-shadow)\",\n    };\n\n    const themeBtnStyles: CSSProperties = {\n      background: \"var(--card-subtle-bg)\",\n      border: \"1px solid var(--card-subtle-border)\",\n    };\n\n    return (\n      <header\n        ref={ref}\n        className={cn(\"border rounded-xl py-2 px-3 md:py-3 md:px-4 transition-all duration-300\", className)}\n        style={headerStyles}\n        {...props}\n      >\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2 md:gap-4\">\n            <button\n              className=\"w-8 h-8 md:w-10 md:h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-105\"\n              style={iconBtnStyles}\n              type=\"button\"\n              aria-label=\"GitHub\"\n            >\n              <Github className=\"w-4 h-4 md:w-5 md:h-5\" style={{ color: \"var(--icon-btn-text)\" }} />\n            </button>\n            <span className=\"font-semibold text-base md:text-lg\" style={{ color: \"var(--text-primary)\" }}>\n              User Analytics\n            </span>\n            <SearchBoxGlass\n              className=\"ml-2 md:ml-4\"\n              defaultValue={username}\n              onSubmit={onSearch}\n              inputWidth=\"w-28 sm:w-36 md:w-48\"\n              placeholder=\"Search username...\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 md:gap-3\">\n            <button\n              onClick={onThemeToggle ?? cycleTheme}\n              className=\"p-2 md:p-2.5 rounded-xl transition-all duration-300 hover:scale-105\"\n              style={themeBtnStyles}\n              type=\"button\"\n              aria-label={`Switch to ${themeConfig[nextTheme].label} theme`}\n            >\n              <NextIcon className=\"w-4 h-4 md:w-5 md:h-5\" style={{ color: \"var(--text-secondary)\" }} />\n            </button>\n            <ButtonGlass variant=\"secondary\" icon={Github} className=\"hidden md:inline-flex\">\n              Sign in with GitHub\n            </ButtonGlass>\n          </div>\n        </div>\n      </header>\n    );\n  }\n);\n\nHeaderNavGlass.displayName = \"HeaderNavGlass\";\n"
    }
  ],
  "categories": [
    "sections"
  ]
}