{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-rail",
  "type": "registry:ui",
  "title": "Sidebar rail",
  "description": "Vertical icon navigation rail.",
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "utils",
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/blacksite/ui/sidebar-rail.tsx",
      "type": "registry:ui",
      "target": "components/ui/sidebar-rail.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/blacksite/ui/tooltip\";\n\nexport interface SidebarRailItem {\n  id: string;\n  icon: LucideIcon;\n  label: string;\n  badge?: React.ReactNode;\n  onSelect?: () => void;\n  disabled?: boolean;\n}\n\ninterface SidebarRailProps extends React.HTMLAttributes<HTMLElement> {\n  items: SidebarRailItem[];\n  footerItems?: SidebarRailItem[];\n  activeId?: string;\n  onActiveChange?: (id: string) => void;\n}\n\nconst SidebarRail = React.forwardRef<HTMLElement, SidebarRailProps>(\n  ({ className, items, footerItems, activeId, onActiveChange, ...props }, ref) => {\n    return (\n      <TooltipProvider delayDuration={150}>\n        <nav\n          ref={ref}\n          aria-label=\"Primary\"\n          className={cn(\n            \"border-border bg-background-elevated flex w-12 flex-col items-center gap-1 border-r py-2\",\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"flex flex-col items-center gap-1\">\n            {items.map((item) => (\n              <RailButton\n                key={item.id}\n                item={item}\n                active={item.id === activeId}\n                onClick={() => {\n                  if (item.disabled) return;\n                  item.onSelect?.();\n                  onActiveChange?.(item.id);\n                }}\n              />\n            ))}\n          </div>\n          {footerItems && footerItems.length > 0 && (\n            <>\n              <div className=\"flex-1\" />\n              <div className=\"flex flex-col items-center gap-1\">\n                {footerItems.map((item) => (\n                  <RailButton\n                    key={item.id}\n                    item={item}\n                    active={item.id === activeId}\n                    onClick={() => {\n                      if (item.disabled) return;\n                      item.onSelect?.();\n                      onActiveChange?.(item.id);\n                    }}\n                  />\n                ))}\n              </div>\n            </>\n          )}\n        </nav>\n      </TooltipProvider>\n    );\n  },\n);\nSidebarRail.displayName = \"SidebarRail\";\n\nfunction RailButton({\n  item,\n  active,\n  onClick,\n}: {\n  item: SidebarRailItem;\n  active?: boolean;\n  onClick?: () => void;\n}) {\n  const Icon = item.icon;\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={item.label}\n          aria-current={active ? \"page\" : undefined}\n          onClick={onClick}\n          disabled={item.disabled}\n          className={cn(\n            \"relative grid size-8 place-items-center rounded-sm\",\n            \"text-foreground-muted hover:text-foreground hover:bg-accent\",\n            \"focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none\",\n            \"transition-colors disabled:cursor-not-allowed disabled:opacity-40\",\n            active && \"text-primary bg-primary/10\",\n          )}\n        >\n          {active && (\n            <span className=\"bg-primary absolute top-1/2 left-0 h-4 w-0.5 -translate-y-1/2 rounded-r-sm\" />\n          )}\n          <Icon className=\"size-4\" />\n          {item.badge !== undefined && (\n            <span className=\"bg-danger text-danger-foreground absolute -top-0.5 -right-0.5 grid h-3 min-w-3 place-items-center rounded-full px-1 text-[9px] font-semibold\">\n              {item.badge}\n            </span>\n          )}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"right\">{item.label}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nexport { SidebarRail };\n"
    }
  ]
}