{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "topbar",
  "type": "registry:ui",
  "title": "Topbar",
  "description": "App top bar that is 56px tall with a title or custom left content and a right slot for actions, avatars or search. Sits above the main content in dashboards.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/topbar.tsx",
      "type": "registry:ui",
      "target": "components/ui/topbar.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Topbar({\n  title,\n  left,\n  right,\n  className,\n}: {\n  title?: React.ReactNode\n  left?: React.ReactNode\n  right?: React.ReactNode\n  className?: string\n}) {\n  return (\n    <header\n      data-slot=\"topbar\"\n      className={cn(\n        \"flex h-14 items-center gap-3 border-b border-border bg-surface px-4 shadow-highlight\",\n        className\n      )}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center gap-3\">\n        {left ?? (title ? <p className=\"truncate text-sm font-medium text-fg\">{title}</p> : null)}\n      </div>\n      {right ? <div className=\"flex shrink-0 items-center gap-2\">{right}</div> : null}\n    </header>\n  )\n}\nexport { Topbar }\n"
    }
  ]
}