{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "title": "Sidebar",
  "description": "App sidebar shell with a collapsed icon-only width and SidebarNavItem buttons that show icons, truncated labels and an active state. Built with Tailwind.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/sidebar.tsx",
      "type": "registry:ui",
      "target": "components/ui/sidebar.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nfunction Sidebar({ children, className, collapsed=false }: { children: React.ReactNode; className?: string; collapsed?: boolean }) {\n  return (\n    <aside data-slot=\"sidebar\" data-collapsed={collapsed || undefined} className={cn(\"flex h-full flex-col border-r border-border bg-surface\", collapsed ? \"w-14\" : \"w-56\", className)}>\n      {children}\n    </aside>\n  )\n}\nfunction SidebarNavItem({ active, icon, children, className, ...props }: React.ComponentProps<\"button\"> & { active?: boolean; icon?: React.ReactNode }) {\n  return (\n    <button type=\"button\" data-slot=\"sidebar-nav-item\" data-active={active || undefined} className={cn(\"mx-2 flex h-9 items-center gap-2 rounded-lg px-2.5 text-sm text-fg-muted transition-[background-color,color] duration-[70ms] hover:bg-sunken hover:text-fg data-[active]:bg-sunken data-[active]:text-fg\", className)} {...props}>\n      {icon}<span className=\"truncate\">{children}</span>\n    </button>\n  )\n}\nexport { Sidebar, SidebarNavItem }\n"
    }
  ]
}