{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-03",
  "title": "Sidebar 03",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/sidebar-03/Sidebar03.tsx",
      "content": "'use client'\n\nimport { ChevronRight } from 'lucide-react'\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from '@/components/ui/sidebar'\nimport { SearchForm } from './SearchForm'\nimport { VersionSwitcher } from './VersionSwitcher'\n\n// This is sample data.\nconst data = {\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\ntype NavItem = (typeof data.navMain)[number]\ntype NavChild = NavItem['items'][number] & { isActive?: boolean }\n\nexport function Sidebar03() {\n  return (\n    <Sidebar>\n      <SidebarHeader>\n        <VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]!} />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {data.navMain.map((item) => (\n          <Collapsible key={item.title} title={item.title} defaultOpen className=\"group/collapsible\">\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {(item.items as NavChild[]).map((childItem) => (\n                      <SidebarMenuItem key={childItem.title}>\n                        <SidebarMenuButton asChild isActive={childItem.isActive}>\n                          <a href={item.url}>{childItem.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/sidebar-03/Sidebar03.tsx"
    },
    {
      "path": "packages/registry-react/blocks/sidebar-03/SearchForm.tsx",
      "content": "'use client'\n\nimport { Search } from 'lucide-react'\nimport { Label } from '@/components/ui/label'\nimport { SidebarGroup, SidebarGroupContent, SidebarInput } from '@/components/ui/sidebar'\n\nexport function SearchForm() {\n  return (\n    <form>\n      <SidebarGroup className=\"py-0\">\n        <SidebarGroupContent>\n          <Label htmlFor=\"search\" className=\"sr-only\">\n            Search\n          </Label>\n          <SidebarInput\n            id=\"search\"\n            type=\"text\"\n            placeholder=\"Search the docs...\"\n            allowClear\n            prefix={<Search className=\"text-muted-foreground size-3.5\" />}\n          />\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </form>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/sidebar-03/SearchForm.tsx"
    },
    {
      "path": "packages/registry-react/blocks/sidebar-03/VersionSwitcher.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, ChevronsUpDown } from 'lucide-react'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'\n\nexport interface VersionSwitcherProps {\n  versions: string[]\n  defaultVersion: string\n}\n\nexport function VersionSwitcher({ versions, defaultVersion }: VersionSwitcherProps) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"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\" className=\"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 className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">uipkge</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width)\" align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem key={version} onSelect={() => setSelectedVersion(version)}>\n                v{version}\n                {selectedVersion === version ? <Check className=\"ml-auto\" /> : null}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/sidebar-03/VersionSwitcher.tsx"
    },
    {
      "path": "packages/registry-react/blocks/sidebar-03/page.tsx",
      "content": "// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-03.json`.\n// Visit /sidebar-03-demo after install to see the block without\n// editing your own pages. Free to edit or delete me.\nimport { Sidebar03 } from '@/components/blocks/sidebar-03/Sidebar03'\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar03 />\n      <SidebarInset>\n        <header className=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n          <SidebarTrigger className=\"size-7\" />\n          <h1 className=\"text-sm font-semibold\">sidebar-03 demo</h1>\n        </header>\n        <div className=\"flex-1 p-6\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 mt-4 min-h-[60vh] rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}",
      "type": "registry:block",
      "target": "~/app/sidebar-03-demo/page.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/sidebar.json",
    "https://uipkge.dev/r/react/collapsible.json",
    "https://uipkge.dev/r/react/dropdown-menu.json",
    "https://uipkge.dev/r/react/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": [
    "sidebar",
    "layout"
  ]
}