{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "header-01",
  "title": "Sticky Top Navbar",
  "type": "registry:block",
  "description": "Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, \"Sign in\" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header",
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/header-01/header-01.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { Boxes, Menu } from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/button/button'\nimport '../../components/sheet/sheet'\n\nconst links = [\n  { label: 'Features', href: '#features' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n  { label: 'Docs', href: '#docs' },\n  { label: 'Blog', href: '#blog' },\n]\n\n/**\n * <uip-header-01> — the registry Header01 block as a web component.\n *\n * Class strings are React's Header01 verbatim. React state (useState) becomes\n * @state fields; the mobile Sheet becomes <uip-sheet> (open + open-change).\n * The sheet's built-in header (heading=\"Acme\") replaces React's custom\n * brand + close-button row; the mobile nav links and footer CTAs keep\n * React's classes verbatim.\n */\nexport class UipHeader01 extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    mobileOpen: { state: true },\n  }\n\n  private mobileOpen = false\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'header-01')\n  }\n\n  render() {\n    return html`\n      <header\n        data-slot=\"header-01\"\n        class=\"bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur\"\n      >\n        <div class=\"mx-auto flex h-16 max-w-6xl items-center justify-between px-6\">\n          <a href=\"#\" class=\"flex items-center gap-2\">\n            <div class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n              ${icon(Boxes, 'boxes', 'size-4')}\n            </div>\n            <span class=\"text-base font-semibold\">Acme</span>\n          </a>\n\n          <nav class=\"hidden items-center gap-6 md:flex\" aria-label=\"Primary\">\n            ${links.map(\n              (link) => html`<a\n                href=${link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                ${link.label}\n              </a>`,\n            )}\n          </nav>\n\n          <div class=\"hidden items-center gap-2 md:flex\">\n            <uip-button variant=\"ghost\" size=\"sm\">Sign in</uip-button>\n            <uip-button size=\"sm\">Start free trial</uip-button>\n          </div>\n\n          <!-- Plain wrapper carries the responsive class: display utilities\n               can't go on the uip-sheet host (its :host display wins). -->\n          <div class=\"md:hidden\">\n            <uip-sheet\n              side=\"right\"\n              heading=\"Acme\"\n              .open=${this.mobileOpen}\n              @open-change=${(e: CustomEvent<{ open: boolean }>) => {\n                this.mobileOpen = e.detail.open\n              }}\n            >\n              <uip-button slot=\"trigger\" variant=\"ghost\" size=\"icon\" aria-label=\"Open menu\">\n                ${icon(Menu, 'menu', 'size-5')}\n              </uip-button>\n              <nav class=\"flex flex-1 flex-col gap-1 p-4\" aria-label=\"Mobile\">\n                ${links.map(\n                  (link) => html`<a\n                    href=${link.href}\n                    class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                    @click=${() => {\n                      this.mobileOpen = false\n                    }}\n                  >\n                    ${link.label}\n                  </a>`,\n                )}\n              </nav>\n              <div class=\"flex flex-col gap-2 border-t p-4\">\n                <uip-button variant=\"outline\" class=\"w-full\">Sign in</uip-button>\n                <uip-button class=\"w-full\">Start free trial</uip-button>\n              </div>\n            </uip-sheet>\n          </div>\n        </div>\n      </header>\n    `\n  }\n}\n\ncustomElements.get('uip-header-01') || customElements.define('uip-header-01', UipHeader01)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-header-01': UipHeader01\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/header-01/header-01.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/sheet.json"
  ]
}