{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "org-switcher",
  "type": "registry:ui",
  "title": "Org switcher",
  "description": "A popover switcher for moving between organizations or workspaces, showing the current name, a check on the active item and an optional plan label per org.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/popover.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/org-switcher.tsx",
      "type": "registry:ui",
      "target": "components/ui/org-switcher.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { ChevronsUpDownIcon, CheckIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\n\n/** OrgSwitcher — a popover list of organizations with the current one checked and its plan beside it. */\n\ntype Org = { id: string; name: string; plan?: string }\n\n// Organizations Maya Chen belongs to in Lumen.\nconst SAMPLE_ORGS: Org[] = [\n  { id: \"northwind\", name: \"Northwind\", plan: \"Business\" },\n  { id: \"halcyon\", name: \"Halcyon Studio\", plan: \"Pro\" },\n  { id: \"maya\", name: \"Maya Chen\", plan: \"Free\" },\n]\n\ntype OrgSwitcherProps = {\n  orgs?: Org[]\n  /** Controlled organization id. Omit it and the switcher keeps its own selection. */\n  value?: string\n  onChange?: (id: string) => void\n  className?: string\n}\n\nfunction OrgSwitcher({\n  orgs = SAMPLE_ORGS,\n  value,\n  onChange,\n  className,\n}: OrgSwitcherProps) {\n  const [open, setOpen] = React.useState(false)\n  const [internal, setInternal] = React.useState<string | undefined>(undefined)\n  const selectedId = value ?? internal\n  const current = orgs.find((o) => o.id === selectedId) ?? orgs[0]\n  return (\n    <div data-slot=\"org-switcher\">\n      <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        aria-label=\"Switch organization\"\n        className={cn(\n          \"inline-flex h-9 w-56 items-center justify-between gap-2 rounded-lg border border-border bg-surface px-3 text-sm text-fg outline-none\",\n          \"hover:border-fg-subtle focus-visible:ring-2 focus-visible:ring-accent\",\n          className\n        )}\n      >\n        <span className=\"truncate\">{current?.name ?? \"Select org\"}</span>\n        <ChevronsUpDownIcon className=\"size-4 text-fg-muted\" />\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-56 p-1\">\n        {orgs.map((o) => (\n          <button\n            key={o.id}\n            type=\"button\"\n            className=\"flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-sm hover:bg-sunken\"\n            onClick={() => {\n              if (value === undefined) setInternal(o.id)\n              onChange?.(o.id)\n              setOpen(false)\n            }}\n          >\n            <CheckIcon className={cn(\"size-4\", o.id === current?.id ? \"opacity-100 text-accent\" : \"opacity-0\")} />\n            <span className=\"min-w-0 flex-1 truncate\">{o.name}</span>\n            {o.plan ? <span className=\"text-[11px] text-fg-muted\">{o.plan}</span> : null}\n          </button>\n        ))}\n      </PopoverContent>\n    </Popover>\n    </div>\n  )\n}\nexport { OrgSwitcher }\nexport type { OrgSwitcherProps, Org }\n"
    }
  ]
}