{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-06",
  "title": "Starred Project Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/sidebar-06/Sidebar06.svelte",
      "content": "<script lang=\"ts\">\n  // Colorful, customised HRMS-style sidebar -- branded project tiles, badges,\n  // status dots, and a user pill footer. Every row is spelled out inline so\n  // you can swap colors and labels in place.\n  import {\n    Briefcase,\n    Calendar,\n    ChartLine,\n    ChevronsUpDown,\n    ClipboardList,\n    Folder,\n    GraduationCap,\n    HeartPulse,\n    HelpCircle,\n    Inbox,\n    LayoutDashboard,\n    Monitor,\n    Moon,\n    Palette,\n    Search,\n    Send,\n    Settings as SettingsIcon,\n    Star,\n    Sun,\n    Users,\n  } from '@lucide/svelte'\n  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'\n  import {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuLabel,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuSeparator,\n    DropdownMenuSub,\n    DropdownMenuSubContent,\n    DropdownMenuSubTrigger,\n    DropdownMenuTrigger,\n  } from '$lib/components/ui/dropdown-menu'\n  import {\n    Sidebar,\n    SidebarContent,\n    SidebarFooter,\n    SidebarGroup,\n    SidebarGroupContent,\n    SidebarGroupLabel,\n    SidebarHeader,\n    SidebarInput,\n    SidebarMenu,\n    SidebarMenuBadge,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarRail,\n    SidebarSeparator,\n    useSidebar,\n  } from '$lib/components/ui/sidebar'\n\n  const sidebar = useSidebar()\n\n  // Local theme model (the Vue twin leans on an app-level useTheme\n  // composable; SvelteKit apps own this in a lib of their own, so the block\n  // ships a minimal localStorage-backed version — swap `setTheme` for yours).\n  type Theme = 'light' | 'dark' | 'system'\n  let theme = $state<Theme>('system')\n\n  function applyTheme(value: Theme) {\n    if (typeof document === 'undefined') return\n    const dark =\n      value === 'dark' || (value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)\n    document.documentElement.classList.toggle('dark', dark)\n  }\n\n  function setTheme(value: Theme) {\n    theme = value\n    try {\n      localStorage.setItem('uipkge-theme', value)\n    } catch {\n      // private mode — theme still applies for this session\n    }\n    applyTheme(value)\n  }\n\n  $effect(() => {\n    try {\n      const stored = localStorage.getItem('uipkge-theme') as Theme | null\n      if (stored === 'light' || stored === 'dark' || stored === 'system') theme = stored\n    } catch {\n      // ignore — fall back to system\n    }\n    applyTheme(theme)\n  })\n</script>\n\n<Sidebar data-slot=\"sidebar-06\" collapsible=\"icon\">\n  <SidebarHeader>\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <SidebarMenuButton size=\"lg\" tooltip=\"uipkge\" class=\"group-data-[collapsible=icon]:!justify-center\">\n          <div\n            class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg shadow-sm group-data-[collapsible=icon]:size-6\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"size-4 group-data-[collapsible=icon]:size-3.5\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\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=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n            <span class=\"font-display truncate font-bold\">uipkge</span>\n            <span class=\"text-muted-foreground truncate text-xs\">uipkge.dev</span>\n          </div>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n\n    <div class=\"px-1 pt-1 group-data-[collapsible=icon]:hidden\">\n      <div class=\"relative\">\n        <Search class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n        <SidebarInput type=\"text\" placeholder=\"Search...\" class=\"pr-12 pl-8\" />\n        <kbd\n          class=\"bg-muted text-muted-foreground pointer-events-none absolute top-1/2 right-2 inline-flex h-5 -translate-y-1/2 items-center gap-0.5 rounded border px-1 font-mono text-xs font-medium select-none\"\n        >\n          <span>&#8984;</span>F\n        </kbd>\n      </div>\n    </div>\n  </SidebarHeader>\n\n  <SidebarContent>\n    <SidebarGroup>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton isActive tooltip=\"Dashboard\">\n              <LayoutDashboard class=\"size-4\" />\n              <span>Dashboard</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Employees\">\n              <Users class=\"size-4\" />\n              <span>Employees</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Clients\">\n              <Briefcase class=\"size-4\" />\n              <span>Clients</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Projects\">\n              <Folder class=\"size-4\" />\n              <span>Projects</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n\n    <SidebarSeparator />\n\n    <SidebarGroup>\n      <SidebarGroupLabel>Workforce</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Calendar\">\n              <Calendar class=\"size-4\" />\n              <span>Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Attendance\">\n              <ClipboardList class=\"size-4\" />\n              <span>Attendance</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Inbox\">\n              <Inbox class=\"size-4\" />\n              <span>Inbox</span>\n            </SidebarMenuButton>\n            <SidebarMenuBadge class=\"bg-destructive text-white\">6</SidebarMenuBadge>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Analytics\">\n              <ChartLine class=\"size-4\" />\n              <span>Analytics</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n\n    <SidebarSeparator />\n\n    <SidebarGroup>\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Shift Planner\">\n              <div\n                class=\"bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n              >\n                <Folder class=\"size-3\" />\n              </div>\n              <span>Shift Planner</span>\n            </SidebarMenuButton>\n            <SidebarMenuBadge class=\"text-warning\">\n              <Star class=\"size-3.5 fill-current\" />\n            </SidebarMenuBadge>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Training Portal\">\n              <div\n                class=\"bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n              >\n                <GraduationCap class=\"size-3\" />\n              </div>\n              <span>Training Portal</span>\n            </SidebarMenuButton>\n            <SidebarMenuBadge class=\"text-warning\">\n              <Star class=\"size-3.5 fill-current\" />\n            </SidebarMenuBadge>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Performance Hub\">\n              <div\n                class=\"bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n              >\n                <HeartPulse class=\"size-3\" />\n              </div>\n              <span>Performance Hub</span>\n            </SidebarMenuButton>\n            <SidebarMenuBadge class=\"text-warning\">\n              <Star class=\"size-3.5 fill-current\" />\n            </SidebarMenuBadge>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Expense Claims\">\n              <div\n                class=\"bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n              >\n                <ChartLine class=\"size-3\" />\n              </div>\n              <span>Expense Claims</span>\n            </SidebarMenuButton>\n            <SidebarMenuBadge class=\"text-warning\">\n              <Star class=\"size-3.5 fill-current\" />\n            </SidebarMenuBadge>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n\n    <SidebarSeparator />\n\n    <SidebarGroup>\n      <SidebarGroupLabel>My team</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Olivia Bennett\">\n              <Avatar class=\"size-5\">\n                <AvatarFallback class=\"bg-chart-1/15 text-foreground text-xs\">OB</AvatarFallback>\n              </Avatar>\n              <span>Olivia Bennett</span>\n            </SidebarMenuButton>\n            <SidebarMenuBadge>\n              <span class=\"bg-destructive size-1.5 rounded-full\"></span>\n            </SidebarMenuBadge>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Daniel Morgan\">\n              <Avatar class=\"size-5\">\n                <AvatarFallback class=\"bg-chart-2/15 text-foreground text-xs\">DM</AvatarFallback>\n              </Avatar>\n              <span>Daniel Morgan</span>\n            </SidebarMenuButton>\n            <SidebarMenuBadge>\n              <span class=\"bg-warning size-1.5 rounded-full\"></span>\n            </SidebarMenuBadge>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Ethan Reynolds\">\n              <Avatar class=\"size-5\">\n                <AvatarFallback class=\"bg-chart-3/15 text-foreground text-xs\">ER</AvatarFallback>\n              </Avatar>\n              <span>Ethan Reynolds</span>\n            </SidebarMenuButton>\n            <SidebarMenuBadge>\n              <span class=\"bg-success size-1.5 rounded-full\"></span>\n            </SidebarMenuBadge>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n\n    <SidebarSeparator />\n\n    <SidebarGroup>\n      <SidebarGroupLabel>Administration</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Settings\">\n              <SettingsIcon class=\"size-4\" />\n              <span>Settings</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Help center\">\n              <HelpCircle class=\"size-4\" />\n              <span>Help center</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </SidebarContent>\n\n  <SidebarFooter>\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger>\n            {#snippet child({ props })}\n              <SidebarMenuButton\n                size=\"lg\"\n                {...props}\n                class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center\"\n              >\n                <div class=\"relative shrink-0\">\n                  <Avatar class=\"h-8 w-8 rounded-lg group-data-[collapsible=icon]:size-6\">\n                    <AvatarFallback class=\"bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs\"\n                      >JC</AvatarFallback\n                    >\n                  </Avatar>\n                  <span\n                    class=\"bg-destructive ring-sidebar absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2\"\n                  ></span>\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n                  <span class=\"truncate font-medium\">James Carter</span>\n                  <span class=\"text-muted-foreground truncate text-xs\">Admin</span>\n                </div>\n                <ChevronsUpDown class=\"ml-auto size-4 group-data-[collapsible=icon]:hidden\" />\n              </SidebarMenuButton>\n            {/snippet}\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={sidebar.isMobile ? 'bottom' : 'right'}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel>James Carter</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem><Send class=\"size-4\" /> Invite teammates</DropdownMenuItem>\n            <DropdownMenuItem><SettingsIcon class=\"size-4\" /> Workspace settings</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <Palette class=\"size-4\" />\n                Theme\n                <span class=\"text-muted-foreground ml-auto text-xs capitalize\">{theme}</span>\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent class=\"min-w-36\">\n                <DropdownMenuRadioGroup value={theme} onValueChange={(v) => setTheme(v as Theme)}>\n                  <DropdownMenuRadioItem value=\"light\"><Sun class=\"size-4\" /> Light</DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"dark\"><Moon class=\"size-4\" /> Dark</DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"system\"><Monitor class=\"size-4\" /> System</DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarFooter>\n\n  <SidebarRail />\n</Sidebar>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-06/Sidebar06.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-06/page.svelte",
      "content": "<script lang=\"ts\">\n  // Demo page wired by `npx uipkge-ng add sidebar-06` (or your shadcn Svelte\n  // client). Visit /sidebar-06-demo after install to see the block without\n  // editing your own pages. Free to edit or delete me.\n  import Sidebar06 from '$lib/components/blocks/sidebar-06/Sidebar06.svelte'\n  import { SidebarInset, SidebarProvider, SidebarTrigger } from '$lib/components/ui/sidebar'\n</script>\n\n<SidebarProvider>\n  <Sidebar06 />\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-06 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-06-demo/+page.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/sidebar.json",
    "https://uipkge.dev/r/svelte/avatar.json",
    "https://uipkge.dev/r/svelte/dropdown-menu.json"
  ],
  "description": "Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.",
  "categories": [
    "layout",
    "sidebar"
  ]
}