{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-04",
  "title": "Floating Inset Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/sidebar-04/Sidebar04.svelte",
      "content": "<script lang=\"ts\">\n  import {\n    Sidebar,\n    SidebarContent,\n    SidebarGroup,\n    SidebarHeader,\n    SidebarMenu,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarMenuSub,\n    SidebarMenuSubButton,\n    SidebarMenuSubItem,\n  } from '$lib/components/ui/sidebar'\n\n  // This is sample data.\n  const data: {\n    navMain: {\n      title: string\n      url: string\n      isActive?: boolean\n      items?: { title: string; url: string; isActive?: boolean }[]\n    }[]\n  } = {\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-04\" variant=\"floating\">\n  <SidebarHeader>\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <SidebarMenuButton size=\"lg\">\n          {#snippet child({ props })}\n            <a href=\"#\" {...props}>\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=\"\">v1.0.0</span>\n              </div>\n            </a>\n          {/snippet}\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarHeader>\n  <SidebarContent>\n    <SidebarGroup>\n      <SidebarMenu class=\"gap-2\">\n        {#each data.navMain as item (item.title)}\n          <SidebarMenuItem>\n            <SidebarMenuButton isActive={item.isActive} class=\"font-medium\">\n              {#snippet child({ props })}\n                <a href={item.url} {...props}>\n                  {item.title}\n                </a>\n              {/snippet}\n            </SidebarMenuButton>\n            {#if item.items?.length}\n              <SidebarMenuSub class=\"ml-0 border-l-0 px-1.5\">\n                {#each (item.items ?? []) as childItem (childItem.title)}\n                  <SidebarMenuSubItem>\n                    <SidebarMenuSubButton isActive={childItem.isActive}>\n                      {#snippet child({ props })}\n                        <a href={childItem.url} {...props}>{childItem.title}</a>\n                      {/snippet}\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                {/each}\n              </SidebarMenuSub>\n            {/if}\n          </SidebarMenuItem>\n        {/each}\n      </SidebarMenu>\n    </SidebarGroup>\n  </SidebarContent>\n</Sidebar>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-04/Sidebar04.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-04/page.svelte",
      "content": "<script lang=\"ts\">\n  // Demo page wired by `npx uipkge-ng add sidebar-04` (or your shadcn Svelte\n  // client). Visit /sidebar-04-demo after install to see the block without\n  // editing your own pages. Free to edit or delete me.\n  import Sidebar04 from '$lib/components/blocks/sidebar-04/Sidebar04.svelte'\n  import { SidebarInset, SidebarProvider, SidebarTrigger } from '$lib/components/ui/sidebar'\n</script>\n\n<SidebarProvider>\n  <Sidebar04 />\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-04 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-04-demo/+page.svelte"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/sidebar.json"
  ],
  "description": "Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant=\"floating\" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.",
  "categories": [
    "layout",
    "sidebar"
  ]
}