{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-03",
  "title": "Documentation Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/sidebar-03/Sidebar03.svelte",
      "content": "<script lang=\"ts\">\n  import { ChevronRight } from '@lucide/svelte'\n  import SearchForm from './SearchForm.svelte'\n  import VersionSwitcher from './VersionSwitcher.svelte'\n  import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '$lib/components/ui/collapsible'\n  import {\n    Sidebar,\n    SidebarContent,\n    SidebarGroup,\n    SidebarGroupContent,\n    SidebarGroupLabel,\n    SidebarHeader,\n    SidebarMenu,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarRail,\n  } from '$lib/components/ui/sidebar'\n\n  interface NavChild {\n    title: string\n    url: string\n    isActive?: boolean\n  }\n\n  interface NavGroup {\n    title: string\n    url: string\n    items: NavChild[]\n  }\n\n  // This is sample data.\n  const data: { versions: string[]; navMain: NavGroup[] } = {\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          {\n            title: 'Installation',\n            url: '#',\n          },\n          {\n            title: 'Project Structure',\n            url: '#',\n          },\n        ],\n      },\n      {\n        title: 'Building Your Application',\n        url: '#',\n        items: [\n          {\n            title: 'Routing',\n            url: '#',\n          },\n          {\n            title: 'Data Fetching',\n            url: '#',\n            isActive: true,\n          },\n          {\n            title: 'Rendering',\n            url: '#',\n          },\n          {\n            title: 'Caching',\n            url: '#',\n          },\n          {\n            title: 'Styling',\n            url: '#',\n          },\n          {\n            title: 'Optimizing',\n            url: '#',\n          },\n          {\n            title: 'Configuring',\n            url: '#',\n          },\n          {\n            title: 'Testing',\n            url: '#',\n          },\n          {\n            title: 'Authentication',\n            url: '#',\n          },\n          {\n            title: 'Deploying',\n            url: '#',\n          },\n          {\n            title: 'Upgrading',\n            url: '#',\n          },\n          {\n            title: 'Examples',\n            url: '#',\n          },\n        ],\n      },\n      {\n        title: 'API Reference',\n        url: '#',\n        items: [\n          {\n            title: 'Components',\n            url: '#',\n          },\n          {\n            title: 'File Conventions',\n            url: '#',\n          },\n          {\n            title: 'Functions',\n            url: '#',\n          },\n          {\n            title: 'next.config.js Options',\n            url: '#',\n          },\n          {\n            title: 'CLI',\n            url: '#',\n          },\n          {\n            title: 'Edge Runtime',\n            url: '#',\n          },\n        ],\n      },\n      {\n        title: 'Architecture',\n        url: '#',\n        items: [\n          {\n            title: 'Accessibility',\n            url: '#',\n          },\n          {\n            title: 'Fast Refresh',\n            url: '#',\n          },\n          {\n            title: 'Next.js Compiler',\n            url: '#',\n          },\n          {\n            title: 'Supported Browsers',\n            url: '#',\n          },\n          {\n            title: 'Turbopack',\n            url: '#',\n          },\n        ],\n      },\n      {\n        title: 'Community',\n        url: '#',\n        items: [\n          {\n            title: 'Contribution Guide',\n            url: '#',\n          },\n        ],\n      },\n    ],\n  }\n</script>\n\n<Sidebar data-slot=\"sidebar-03\">\n  <SidebarHeader>\n    <VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]!} />\n    <SearchForm />\n  </SidebarHeader>\n  <SidebarContent class=\"gap-0\">\n    {#each data.navMain as item (item.title)}\n      <Collapsible title={item.title} defaultOpen class=\"group/collapsible\">\n        <SidebarGroup>\n          <SidebarGroupLabel\n            class=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n          >\n            {#snippet child({ props: labelProps })}\n              <CollapsibleTrigger {...labelProps}>\n                {item.title}\n                <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n              </CollapsibleTrigger>\n            {/snippet}\n          </SidebarGroupLabel>\n          <CollapsibleContent>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {#each item.items as childItem (childItem.title)}\n                  <SidebarMenuItem>\n                    <SidebarMenuButton isActive={childItem.isActive}>\n                      {#snippet child({ props })}\n                        <a href={childItem.url} {...props}>{childItem.title}</a>\n                      {/snippet}\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                {/each}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    {/each}\n  </SidebarContent>\n  <SidebarRail />\n</Sidebar>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-03/Sidebar03.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-03/SearchForm.svelte",
      "content": "<script lang=\"ts\">\n  import { Search } from '@lucide/svelte'\n  import { Label } from '$lib/components/ui/label'\n  import { SidebarGroup, SidebarGroupContent, SidebarInput } from '$lib/components/ui/sidebar'\n</script>\n\n<form data-slot=\"sidebar-03\">\n  <SidebarGroup class=\"py-0\">\n    <SidebarGroupContent>\n      <Label for=\"search\" class=\"sr-only\">Search</Label>\n      <SidebarInput id=\"search\" type=\"text\" placeholder=\"Search the docs...\" allowClear>\n        {#snippet prefixSnippet()}\n          <Search class=\"text-muted-foreground size-3.5\" />\n        {/snippet}\n      </SidebarInput>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</form>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-03/SearchForm.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-03/VersionSwitcher.svelte",
      "content": "<script lang=\"ts\">\n  import { Check, ChevronsUpDown } from '@lucide/svelte'\n  import {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuTrigger,\n  } from '$lib/components/ui/dropdown-menu'\n  import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '$lib/components/ui/sidebar'\n\n  interface Props {\n    versions: string[]\n    defaultVersion: string\n  }\n\n  let { versions, defaultVersion }: Props = $props()\n\n  // svelte-ignore state_referenced_locally: one-shot seed by design; later defaultVersion changes must not clobber the pick.\n  let selectedVersion = $state(defaultVersion)\n</script>\n\n<SidebarMenu data-slot=\"sidebar-03\">\n  <SidebarMenuItem>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        {#snippet child({ props })}\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            {...props}\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            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        {/snippet}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent class=\"w-56\" align=\"start\">\n        {#each versions as version (version)}\n          <DropdownMenuItem onSelect={() => (selectedVersion = version)}>\n            v{version}\n            {#if selectedVersion === version}\n              <Check class=\"ml-auto\" />\n            {/if}\n          </DropdownMenuItem>\n        {/each}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </SidebarMenuItem>\n</SidebarMenu>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-03/VersionSwitcher.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-03/page.svelte",
      "content": "<script lang=\"ts\">\n  // Demo page. Visit /sidebar-03-demo after install to see the block without\n  // editing your own routes. Free to edit or delete me.\n  import Sidebar03 from '$lib/components/blocks/sidebar-03/Sidebar03.svelte'\n  import { SidebarInset, SidebarProvider, SidebarTrigger } from '$lib/components/ui/sidebar'\n</script>\n\n<SidebarProvider>\n  <Sidebar03 />\n  <SidebarInset>\n    <header class=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n      <SidebarTrigger class=\"size-7\" />\n      <h1 class=\"text-sm font-semibold\">sidebar-03 demo</h1>\n    </header>\n    <div class=\"flex-1 p-6\">\n      <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n        <div class=\"bg-muted/50 aspect-video rounded-xl\"></div>\n        <div class=\"bg-muted/50 aspect-video rounded-xl\"></div>\n        <div class=\"bg-muted/50 aspect-video rounded-xl\"></div>\n      </div>\n      <div class=\"bg-muted/50 mt-4 min-h-[60vh] rounded-xl\"></div>\n    </div>\n  </SidebarInset>\n</SidebarProvider>\n",
      "type": "registry:block",
      "target": "~/src/routes/sidebar-03-demo/+page.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/sidebar.json",
    "https://uipkge.dev/r/svelte/collapsible.json",
    "https://uipkge.dev/r/svelte/dropdown-menu.json",
    "https://uipkge.dev/r/svelte/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"
  ]
}