{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "package-manager",
  "type": "registry:ui",
  "title": "PackageManager",
  "description": "pnpm/npm/bun/yarn command switcher with copy button.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/package-manager.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type PackageManagerType = \"pnpm\" | \"npm\" | \"bun\" | \"yarn\";\n\nexport interface PackageManagerProps extends React.HTMLAttributes<HTMLDivElement> {\n  pkg?: string;\n  defaultManager?: PackageManagerType;\n}\n\nexport function PackageManager({\n  pkg = \"array-ui\",\n  defaultManager = \"pnpm\",\n  className,\n  ...props\n}: PackageManagerProps) {\n  const [manager, setManager] = React.useState<PackageManagerType>(defaultManager);\n  const [copied, setCopied] = React.useState(false);\n\n  const getCommand = (pm: PackageManagerType) => {\n    switch (pm) {\n      case \"pnpm\":\n        return `pnpm add ${pkg}`;\n      case \"bun\":\n        return `bun add ${pkg}`;\n      case \"yarn\":\n        return `yarn add ${pkg}`;\n      case \"npm\":\n      default:\n        return `npm install ${pkg}`;\n    }\n  };\n\n  const command = getCommand(manager);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(command);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card text-card-foreground overflow-hidden shadow-xs my-4\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5\">\n        <div className=\"flex items-center gap-1\">\n          {([\"pnpm\", \"npm\", \"bun\", \"yarn\"] as PackageManagerType[]).map((pm) => (\n            <button\n              key={pm}\n              type=\"button\"\n              className={cn(\n                \"px-2.5 py-1 text-xs font-mono font-medium rounded-md transition-colors cursor-pointer\",\n                manager === pm\n                  ? \"bg-background text-foreground shadow-2xs border border-border\"\n                  : \"text-muted-foreground hover:text-foreground\"\n              )}\n              onClick={() => setManager(pm)}\n            >\n              {pm}\n            </button>\n          ))}\n        </div>\n      </div>\n      <div className=\"flex items-center justify-between px-4 py-3 bg-[#09090b] text-[#ececf1]\">\n        <code className=\"font-mono text-sm\">{command}</code>\n        <button\n          type=\"button\"\n          className=\"text-xs px-2.5 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-200 transition-colors cursor-pointer\"\n          onClick={handleCopy}\n        >\n          {copied ? \"Copied!\" : \"Copy\"}\n        </button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}