{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-03",
  "title": "Documentation Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/sidebar-03/sidebar-03.component.ts",
      "content": "// Docs-style sidebar: version switcher + search in the header, collapsible nav groups\n// below. All sample data inlined so consumers edit routes in place.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component } from '@angular/core'\nimport { ChevronRight, LucideAngularModule } from 'lucide-angular'\nimport {\n  UiCollapsibleComponent,\n  UiCollapsibleContentComponent,\n  UiCollapsibleTriggerComponent,\n} from '@/ui/collapsible/collapsible.component'\nimport {\n  UiSidebarComponent,\n  UiSidebarContentComponent,\n  UiSidebarGroupComponent,\n  UiSidebarGroupContentComponent,\n  UiSidebarGroupLabelComponent,\n  UiSidebarHeaderComponent,\n  UiSidebarMenuButtonComponent,\n  UiSidebarMenuComponent,\n  UiSidebarMenuItemComponent,\n  UiSidebarRailComponent,\n} from '@/ui/sidebar/sidebar.component'\nimport { Sidebar03SearchFormComponent } from './search-form.component'\nimport { Sidebar03VersionSwitcherComponent } from './version-switcher.component'\n\n// This is sample data.\nconst data: {\n  versions: string[]\n  navMain: {\n    title: string\n    url: string\n    items: { title: string; url: string; isActive?: boolean }[]\n  }[]\n} = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\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/**\n * Sidebar03 -- the React block, 1:1: a default Sidebar with a VersionSwitcher +\n * SearchForm header and collapsible nav groups (all open). It reads the surrounding\n * <ui-sidebar-provider> (pair with <ui-sidebar-inset> + <ui-sidebar-trigger>).\n * Edit `data` to change versions and routes.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-sidebar-03, [ui-sidebar-03]',\n  standalone: true,\n  // React renders <Sidebar> itself: keep this wrapper out of the provider's flex layout.\n  host: { class: 'contents' },\n  imports: [\n    LucideAngularModule,\n    UiCollapsibleComponent,\n    UiCollapsibleTriggerComponent,\n    UiCollapsibleContentComponent,\n    UiSidebarComponent,\n    UiSidebarHeaderComponent,\n    UiSidebarContentComponent,\n    UiSidebarGroupComponent,\n    UiSidebarGroupLabelComponent,\n    UiSidebarGroupContentComponent,\n    UiSidebarMenuComponent,\n    UiSidebarMenuItemComponent,\n    UiSidebarMenuButtonComponent,\n    UiSidebarRailComponent,\n    Sidebar03SearchFormComponent,\n    Sidebar03VersionSwitcherComponent,\n  ],\n  template: `\n    <ui-sidebar>\n      <ui-sidebar-header>\n        <sidebar-03-version-switcher [versions]=\"data.versions\" [defaultVersion]=\"data.versions[0]!\" />\n        <sidebar-03-search-form />\n      </ui-sidebar-header>\n      <ui-sidebar-content class=\"gap-0\">\n        @for (item of data.navMain; track item.title) {\n          <!-- Angular's group label has no asChild slot: the trigger carries the label's\n               hover classes so the whole row stays clickable, like React's asChild. -->\n          <div ui-collapsible [attr.title]=\"item.title\" defaultOpen class=\"group/collapsible\">\n            <ui-sidebar-group>\n              <ui-sidebar-group-label\n                class=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <button type=\"button\" ui-collapsible-trigger class=\"flex w-full items-center gap-2 text-left\">\n                  {{ item.title }}\n                  <lucide-icon\n                    [img]=\"ChevronRight\"\n                    class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </button>\n              </ui-sidebar-group-label>\n              <ui-collapsible-content>\n                <ui-sidebar-group-content>\n                  <ul ui-sidebar-menu>\n                    @for (childItem of item.items; track childItem.title) {\n                      <li ui-sidebar-menu-item>\n                        <a ui-sidebar-menu-button [href]=\"childItem.url\" [isActive]=\"!!childItem.isActive\">\n                          <span>{{ childItem.title }}</span>\n                        </a>\n                      </li>\n                    }\n                  </ul>\n                </ui-sidebar-group-content>\n              </ui-collapsible-content>\n            </ui-sidebar-group>\n          </div>\n        }\n      </ui-sidebar-content>\n      <button ui-sidebar-rail></button>\n    </ui-sidebar>\n  `,\n})\nexport class UiSidebar03Component {\n  readonly data = data\n  protected readonly ChevronRight = ChevronRight\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/sidebar-03/sidebar-03.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/sidebar-03/search-form.component.ts",
      "content": "// Docs search field: a labelled input with a search prefix and clear button.\n// Port of the React SearchForm 1:1 (which uses SidebarInput with prefix + allowClear;\n// the Angular sidebar input has no prefix slot, so ui-input carries the same styling).\nimport { ChangeDetectionStrategy, Component } from '@angular/core'\nimport { Search, LucideAngularModule } from 'lucide-angular'\nimport { UiLabelComponent } from '@/ui/label/label.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSidebarGroupComponent, UiSidebarGroupContentComponent } from '@/ui/sidebar/sidebar.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'sidebar-03-search-form',\n  standalone: true,\n  host: { class: 'contents' },\n  imports: [\n    LucideAngularModule,\n    UiLabelComponent,\n    UiInputComponent,\n    UiSidebarGroupComponent,\n    UiSidebarGroupContentComponent,\n  ],\n  template: `\n    <form data-slot=\"sidebar-03\">\n      <ui-sidebar-group class=\"py-0\">\n        <ui-sidebar-group-content>\n          <label ui-label for=\"search\" class=\"sr-only\">Search</label>\n          <ui-input\n            id=\"search\"\n            type=\"text\"\n            placeholder=\"Search the docs...\"\n            allowClear\n            [prefix]=\"searchPrefix\"\n            class=\"bg-background h-8 w-full shadow-none\"\n          />\n          <ng-template #searchPrefix>\n            <lucide-icon [img]=\"Search\" class=\"text-muted-foreground size-3.5\" />\n          </ng-template>\n        </ui-sidebar-group-content>\n      </ui-sidebar-group>\n    </form>\n  `,\n})\nexport class Sidebar03SearchFormComponent {\n  protected readonly Search = Search\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/sidebar-03/search-form.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/sidebar-03/version-switcher.component.ts",
      "content": "// Docs version picker: brand mark + name + selected version, opening a dropdown of\n// versions with a check on the active one. Port of the React VersionSwitcher 1:1.\nimport { ChangeDetectionStrategy, Component, Input, OnInit, signal } from '@angular/core'\nimport { Check, ChevronsUpDown, LucideAngularModule } from 'lucide-angular'\nimport {\n  UiDropdownMenuComponent,\n  UiDropdownMenuContentComponent,\n  UiDropdownMenuItemComponent,\n  UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport {\n  UiSidebarMenuButtonComponent,\n  UiSidebarMenuComponent,\n  UiSidebarMenuItemComponent,\n} from '@/ui/sidebar/sidebar.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'sidebar-03-version-switcher',\n  standalone: true,\n  host: { class: 'contents' },\n  imports: [\n    LucideAngularModule,\n    UiDropdownMenuComponent,\n    UiDropdownMenuTriggerComponent,\n    UiDropdownMenuContentComponent,\n    UiDropdownMenuItemComponent,\n    UiSidebarMenuComponent,\n    UiSidebarMenuItemComponent,\n    UiSidebarMenuButtonComponent,\n  ],\n  template: `\n    <ul ui-sidebar-menu data-slot=\"sidebar-03\">\n      <li ui-sidebar-menu-item>\n        <ui-dropdown-menu>\n          <button\n            type=\"button\"\n            ui-sidebar-menu-button\n            ui-dropdown-menu-trigger\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div\n              class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\"\n            >\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 class=\"\">v{{ selectedVersion() }}</span>\n            </div>\n            <lucide-icon [img]=\"ChevronsUpDown\" class=\"ml-auto\" />\n          </button>\n          <ui-dropdown-menu-content class=\"w-(--radix-dropdown-menu-trigger-width)\" align=\"start\">\n            @for (version of versions; track version) {\n              <ui-dropdown-menu-item (select)=\"selectedVersion.set(version)\">\n                v{{ version }}\n                @if (selectedVersion() === version) {\n                  <lucide-icon [img]=\"Check\" class=\"ml-auto\" />\n                }\n              </ui-dropdown-menu-item>\n            }\n          </ui-dropdown-menu-content>\n        </ui-dropdown-menu>\n      </li>\n    </ul>\n  `,\n})\nexport class Sidebar03VersionSwitcherComponent implements OnInit {\n  @Input() versions: string[] = []\n  @Input() defaultVersion = ''\n\n  readonly selectedVersion = signal('')\n\n  protected readonly Check = Check\n  protected readonly ChevronsUpDown = ChevronsUpDown\n\n  ngOnInit(): void {\n    this.selectedVersion.set(this.defaultVersion)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/sidebar-03/version-switcher.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/sidebar-03/index.ts",
      "content": "export { UiSidebar03Component } from './sidebar-03.component'\nexport { Sidebar03SearchFormComponent } from './search-form.component'\nexport { Sidebar03VersionSwitcherComponent } from './version-switcher.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/sidebar-03/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/sidebar.json",
    "https://uipkge.dev/r/angular/collapsible.json",
    "https://uipkge.dev/r/angular/dropdown-menu.json",
    "https://uipkge.dev/r/angular/label.json"
  ],
  "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"
  ]
}