{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-header",
  "title": "Glass Header",
  "description": "A floating glass capsule with a brand, navigation links and actions.",
  "dependencies": [
    "clsx"
  ],
  "registryDependencies": [
    "@glassyui/glass-surface"
  ],
  "files": [
    {
      "path": "registry/glassyui/glass-header.tsx",
      "content": "'use client';\n\nimport clsx from 'clsx';\nimport { forwardRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { GlassSurface } from './glass-surface';\nimport './styles/header.css';\n\nexport type GlassHeaderProps = HTMLAttributes<HTMLElement> & {\n  /** A wordmark or logo, usually linked to the home page. */\n  brand: ReactNode;\n  /** Buttons or links at the end of the capsule. */\n  actions?: ReactNode;\n  /** Accessible name for the desktop and mobile navigation. */\n  navigationLabel?: string;\n  /** Fixed above the page by default; static keeps it in the surrounding layout. */\n  position?: 'fixed' | 'static';\n};\n\nexport const GlassHeader = forwardRef<HTMLElement, GlassHeaderProps>(\n  (\n    {\n      brand,\n      actions,\n      children,\n      className,\n      navigationLabel = 'Primary',\n      position = 'fixed',\n      ...rest\n    },\n    ref,\n  ) => (\n    <header ref={ref} className={clsx('lg-header', className)} data-position={position} {...rest}>\n      <GlassSurface aria-hidden className=\"lg-header-glass\" lens preset=\"standard\" />\n      <div className=\"lg-header-bar\">\n        <div className=\"lg-header-brand\">{brand}</div>\n        {children ? (\n          <>\n            <nav aria-label={navigationLabel} className=\"lg-header-links lg-header-desktop\">\n              {children}\n            </nav>\n            <details\n              className=\"lg-header-menu\"\n              onKeyDown={(event) => {\n                if (event.key === 'Escape' && event.currentTarget.open) {\n                  event.preventDefault();\n                  event.currentTarget.open = false;\n                  event.currentTarget.querySelector('summary')?.focus();\n                }\n              }}\n            >\n              <summary>Menu</summary>\n              <nav\n                aria-label={navigationLabel}\n                className=\"lg-header-links lg-header-menu-links\"\n                onClick={(event) => {\n                  if (event.target instanceof Element && event.target.closest('a[href]')) {\n                    const menu = event.currentTarget.closest('details');\n\n                    if (menu) {\n                      menu.open = false;\n                      menu.querySelector('summary')?.focus();\n                    }\n                  }\n                }}\n              >\n                {children}\n              </nav>\n            </details>\n          </>\n        ) : null}\n        {actions ? <div className=\"lg-header-actions\">{actions}</div> : null}\n      </div>\n    </header>\n  ),\n);\n\nGlassHeader.displayName = 'GlassHeader';\n",
      "type": "registry:ui",
      "target": "components/glassyui/glass-header.tsx"
    },
    {
      "path": "registry/glassyui/styles/header.css",
      "content": "@layer components {\n  /* A slab of glass floating clear of the page, with its menu outside the\n     material's paint clip. Container queries also fit embedded headers. */\n  .lg-header {\n    position: fixed;\n    inset: 14px 0 auto;\n    z-index: 40;\n    box-sizing: border-box;\n    width: min(920px, calc(100vw - 32px));\n    height: 56px;\n    margin-inline: auto;\n    border-radius: 999px;\n    color: var(--lg-foreground);\n    container-type: inline-size;\n  }\n\n  .lg-header[data-position='static'] {\n    position: relative;\n    inset: auto;\n    z-index: auto;\n    width: 100%;\n    max-width: 920px;\n  }\n\n  .lg-header > .lg-header-glass {\n    --lg-panel-radius: 999px;\n    --lg-glass-blur: 12px;\n    --lg-lens-blur: 12;\n    --lg-glass-contrast: 1;\n    --lg-glass-sat: 1.5;\n    --lg-glass-brightness: 1.03;\n    --lg-panel-elevation-shadow:\n      0 2px 4px -2px rgb(52 62 84 / 0.18), 0 4px 14px -3px rgb(52 62 84 / 0.2);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    pointer-events: none;\n  }\n\n  .lg-header-bar {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    height: 100%;\n    padding: 0 9px 0 20px;\n  }\n\n  .lg-header-brand {\n    flex: none;\n    min-width: 0;\n    margin-inline-end: auto;\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 1;\n    letter-spacing: -0.03em;\n    white-space: nowrap;\n  }\n\n  .lg-header-brand a {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .lg-header-links {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 2px;\n  }\n\n  .lg-header-desktop {\n    margin-inline: auto;\n  }\n\n  .lg-header-links a {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 38px;\n    padding: 0 12px;\n    border-radius: 999px;\n    color: var(--lg-muted-foreground);\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1;\n    letter-spacing: -0.01em;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      color var(--lg-motion-duration) ease,\n      background-color var(--lg-motion-duration) ease;\n  }\n\n  .lg-header-links a:hover,\n  .lg-header-links a[aria-current='page'] {\n    background: var(--lg-control-surface);\n    color: var(--lg-foreground);\n  }\n\n  .lg-header :is(a, summary):focus-visible {\n    outline: 2px solid var(--lg-focus-ring);\n    outline-offset: 2px;\n  }\n\n  .lg-header-actions {\n    display: flex;\n    flex: none;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .lg-header-menu {\n    display: none;\n  }\n\n  .lg-header-menu summary {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 40px;\n    padding: 0 12px;\n    border-radius: 999px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    list-style: none;\n  }\n\n  .lg-header-menu summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .lg-header-menu-links {\n    position: absolute;\n    top: calc(100% + 8px);\n    right: 10px;\n    z-index: 1;\n    flex-direction: column;\n    align-items: stretch;\n    box-sizing: border-box;\n    width: min(240px, calc(100cqw - 20px));\n    max-height: calc(100dvh - 96px);\n    overflow-y: auto;\n    padding: 8px;\n    border: 1px solid var(--lg-border);\n    border-radius: 20px;\n    background: var(--lg-opaque-surface);\n    box-shadow: var(--lg-shadow-raised);\n  }\n\n  .lg-header-menu-links a {\n    justify-content: flex-start;\n    height: 44px;\n    padding: 0 16px;\n    border-radius: 12px;\n  }\n\n  .lg-header-menu:not([open]) > nav {\n    display: none;\n  }\n\n  @container (max-width: 760px) {\n    .lg-header-bar {\n      gap: 8px;\n      padding: 0 6px 0 16px;\n    }\n\n    .lg-header-desktop {\n      display: none;\n    }\n\n    .lg-header-menu {\n      display: block;\n    }\n  }\n\n  @media (max-width: 700px) {\n    .lg-header[data-position='fixed'] {\n      top: 8px;\n      width: calc(100vw - 20px);\n    }\n  }\n}\n",
      "type": "registry:file",
      "target": "components/glassyui/styles/header.css"
    }
  ],
  "meta": {
    "sourceModules": [
      "header"
    ]
  },
  "type": "registry:ui"
}