{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-03",
  "title": "Documentation Sidebar",
  "type": "registry:block",
  "description": "Docs-style sidebar with a version switcher at the top, a search input below, and collapsible navigation groups. All sample data inlined so consumers edit routes in place.",
  "categories": [
    "layout",
    "sidebar"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/sidebar-03/sidebar-03.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { Check, ChevronRight, ChevronsUpDown, Search } 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/dropdown-menu/dropdown-menu'\nimport '../../components/collapsible/collapsible'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/label/label'\nimport '../../components/sidebar/sidebar'\n\n// Sample data (React's `data`, inlined so consumers edit routes in place).\nconst versions = ['1.0.1', '1.1.0-alpha', '2.0.0-beta1']\n\ninterface NavChild {\n  title: string\n  url: string\n  isActive?: boolean\n}\n\ninterface NavItem {\n  title: string\n  url: string\n  items: NavChild[]\n}\n\nconst navMain: NavItem[] = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      { title: 'Installation', url: '#' },\n      { title: 'Project Structure', url: '#' },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      { title: 'Routing', url: '#' },\n      { title: 'Data Fetching', url: '#', isActive: true },\n      { title: 'Rendering', url: '#' },\n      { title: 'Caching', url: '#' },\n      { title: 'Styling', url: '#' },\n      { title: 'Optimizing', url: '#' },\n      { title: 'Configuring', url: '#' },\n      { title: 'Testing', url: '#' },\n      { title: 'Authentication', url: '#' },\n      { title: 'Deploying', url: '#' },\n      { title: 'Upgrading', url: '#' },\n      { title: 'Examples', url: '#' },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      { title: 'Components', url: '#' },\n      { title: 'File Conventions', url: '#' },\n      { title: 'Functions', url: '#' },\n      { title: 'next.config.js Options', url: '#' },\n      { title: 'CLI', url: '#' },\n      { title: 'Edge Runtime', url: '#' },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      { title: 'Accessibility', url: '#' },\n      { title: 'Fast Refresh', url: '#' },\n      { title: 'Next.js Compiler', url: '#' },\n      { title: 'Supported Browsers', url: '#' },\n      { title: 'Turbopack', url: '#' },\n    ],\n  },\n  {\n    title: 'Community',\n    url: '#',\n    items: [{ title: 'Contribution Guide', url: '#' }],\n  },\n]\n\n/**\n * <uip-sidebar-03> — the registry Sidebar03 block as a web component\n * (VersionSwitcher + SearchForm inlined — one block, one install unit).\n *\n * Class strings are React's verbatim. The version switcher keeps its\n * selected version in { state: true }; the search field reads like any\n * input. No props, no events: edit the markup in place.\n */\nexport class UipSidebar03 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    selectedVersion: { state: true },\n    search: { state: true },\n  }\n\n  private selectedVersion = versions[0]!\n  private search = ''\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', 'sidebar-03')\n  }\n\n  render() {\n    return html`\n      <uip-sidebar>\n        <uip-sidebar-header>\n          <uip-sidebar-menu>\n            <uip-sidebar-menu-item>\n              <uip-dropdown-menu class=\"[&::part(content)]:min-w-56\">\n                <uip-sidebar-menu-button\n                  slot=\"trigger\"\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                    <svg viewBox=\"0 0 24 24\" class=\"size-4\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                      <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                      <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                      <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                    </svg>\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-medium\">uipkge</span>\n                    <span>v${this.selectedVersion}</span>\n                  </div>\n                  ${icon(ChevronsUpDown, 'chevrons-up-down', 'ml-auto')}\n                </uip-sidebar-menu-button>\n                <uip-dropdown-menu-content align=\"start\">\n                  ${versions.map(\n                    (version) => html`\n                      <uip-dropdown-menu-item\n                        @select=${() => {\n                          this.selectedVersion = version\n                        }}\n                      >\n                        v${version} ${this.selectedVersion === version ? icon(Check, 'check', 'ml-auto') : ''}\n                      </uip-dropdown-menu-item>\n                    `,\n                  )}\n                </uip-dropdown-menu-content>\n              </uip-dropdown-menu>\n            </uip-sidebar-menu-item>\n          </uip-sidebar-menu>\n          <form @submit=${(e: Event) => e.preventDefault()}>\n            <uip-sidebar-group class=\"[&::part(base)]:py-0\">\n              <uip-sidebar-group-content>\n                <uip-label for=\"search\" class=\"sr-only\">Search</uip-label>\n                <uip-input\n                  id=\"search\"\n                  type=\"text\"\n                  placeholder=\"Search the docs...\"\n                  allow-clear\n                  class=\"[&::part(control)]:bg-background [&::part(control)]:h-8 [&::part(control)]:shadow-none\"\n                  .value=${this.search}\n                  @input=${(e: Event) => {\n                    this.search = (e.target as UipInput).value\n                  }}\n                >\n                  <span slot=\"prefix\">${icon(Search, 'search', 'size-3.5')}</span>\n                </uip-input>\n              </uip-sidebar-group-content>\n            </uip-sidebar-group>\n          </form>\n        </uip-sidebar-header>\n\n        <uip-sidebar-content class=\"[&::part(base)]:gap-0\">\n          ${navMain.map(\n            (item) => html`\n              <uip-collapsible class=\"contents group/collapsible\" default-open>\n                <uip-sidebar-group>\n                  <uip-collapsible-trigger as-child>\n                    <uip-sidebar-group-label\n                      class=\"group/label [&::part(base)]:text-sidebar-foreground [&::part(base)]:text-sm [&::part(base)]:hover:bg-sidebar-accent [&::part(base)]:hover:text-sidebar-accent-foreground\"\n                    >\n                      ${item.title} ${icon(ChevronRight, 'chevron-right', 'ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90')}\n                    </uip-sidebar-group-label>\n                  </uip-collapsible-trigger>\n                  <uip-collapsible-content>\n                    <uip-sidebar-group-content>\n                      <uip-sidebar-menu>\n                        ${item.items.map(\n                          (childItem) => html`\n                            <uip-sidebar-menu-item>\n                              <uip-sidebar-menu-button href=${item.url} ?is-active=${!!childItem.isActive}>\n                                ${childItem.title}\n                              </uip-sidebar-menu-button>\n                            </uip-sidebar-menu-item>\n                          `,\n                        )}\n                      </uip-sidebar-menu>\n                    </uip-sidebar-group-content>\n                  </uip-collapsible-content>\n                </uip-sidebar-group>\n              </uip-collapsible>\n            `,\n          )}\n        </uip-sidebar-content>\n\n        <uip-sidebar-rail></uip-sidebar-rail>\n      </uip-sidebar>\n    `\n  }\n}\n\ncustomElements.get('uip-sidebar-03') || customElements.define('uip-sidebar-03', UipSidebar03)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-sidebar-03': UipSidebar03\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/sidebar-03/sidebar-03.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/collapsible.json",
    "https://uipkge.dev/r/lit/dropdown-menu.json",
    "https://uipkge.dev/r/lit/input.json",
    "https://uipkge.dev/r/lit/label.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/sidebar.json"
  ]
}