{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "code-install-command",
  "title": "Code — Install Command",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/code-install-command/code-install-command.component.ts",
      "content": "// Package-manager tab strip over a single install command with a copy button, a\n// resolved-version line, and a short note on what the command writes to disk.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, Input, signal } from '@angular/core'\nimport { Check, Copy, LucideAngularModule, Terminal } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiTabsComponent,\n  UiTabsContentComponent,\n  UiTabsListComponent,\n  UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-code-install-command, [ui-code-install-command]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiTabsComponent,\n    UiTabsContentComponent,\n    UiTabsListComponent,\n    UiTabsTriggerComponent,\n  ],\n  template: `\n    <section data-slot=\"code-install-command\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-3xl px-6 py-20\">\n        <div class=\"flex flex-wrap items-center gap-3\">\n          <span ui-badge variant=\"secondary\" class=\"gap-1.5\">\n            <lucide-icon [img]=\"Terminal\" class=\"size-3\" aria-hidden=\"true\" />\n            Install\n          </span>\n          <span class=\"text-muted-foreground font-mono text-xs\">resolved {{ pkg }}@{{ version }}</span>\n        </div>\n\n        <h2 class=\"mt-4 text-2xl font-semibold tracking-tight\">One command, then you own the source</h2>\n\n        <ui-tabs defaultValue=\"npm\" class=\"mt-6\">\n          <ui-tabs-list variant=\"segmented\" class=\"flex-nowrap overflow-x-auto\">\n            @for (manager of managers(); track manager.id) {\n              <button ui-tabs-trigger [value]=\"manager.id\" variant=\"segmented\">\n                {{ manager.id }}\n              </button>\n            }\n          </ui-tabs-list>\n\n          @for (manager of managers(); track manager.id) {\n            <ui-tabs-content [value]=\"manager.id\" class=\"mt-4\">\n              <div class=\"border-border bg-card flex items-stretch overflow-hidden rounded-lg border\">\n                <span class=\"text-primary grid shrink-0 place-items-center px-3 font-mono text-xs select-none\">$</span>\n                <code class=\"bg-muted/25 min-w-0 flex-1 truncate px-3 py-2.5 font-mono text-sm\">\n                  {{ manager.command }}\n                </code>\n                <button\n                  ui-button\n                  variant=\"ghost\"\n                  class=\"border-border h-auto shrink-0 rounded-none border-l px-3\"\n                  [attr.aria-label]=\"'Copy ' + manager.id + ' command'\"\n                  (click)=\"copy(manager.command, manager.id)\"\n                >\n                  @if (copied() === manager.id) {\n                    <lucide-icon [img]=\"Check\" class=\"text-success size-4\" aria-hidden=\"true\" />\n                  } @else {\n                    <lucide-icon [img]=\"Copy\" class=\"size-4\" aria-hidden=\"true\" />\n                  }\n                </button>\n              </div>\n            </ui-tabs-content>\n          }\n        </ui-tabs>\n\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          Writes the component source into\n          <code class=\"bg-muted rounded px-1 py-0.5 font-mono text-xs\">components/</code>\n          and adds nothing to your lockfile beyond the icon set. Edit it like any other file in your repo.\n        </p>\n      </div>\n    </section>\n  `,\n})\nexport class UiCodeInstallCommandComponent {\n  protected readonly Check = Check\n  protected readonly Copy = Copy\n  protected readonly Terminal = Terminal\n\n  @Input() pkg = '@northwind/metrics'\n  @Input() version = '2.4.0'\n  @Input('class') className?: string\n\n  // One package name, four managers — derived rather than duplicated so a rename\n  // cannot leave one tab pointing at the old package.\n  readonly managers = computed(() => [\n    { id: 'npm', command: `npm install ${this.pkg}` },\n    { id: 'pnpm', command: `pnpm add ${this.pkg}` },\n    { id: 'yarn', command: `yarn add ${this.pkg}` },\n    { id: 'bun', command: `bun add ${this.pkg}` },\n  ])\n\n  readonly copied = signal('')\n  private copyTimer: ReturnType<typeof setTimeout> | undefined\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.copyTimer))\n  }\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  async copy(command: string, id: string): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(command)\n      this.copied.set(id)\n      clearTimeout(this.copyTimer)\n      this.copyTimer = setTimeout(() => this.copied.set(''), 1600)\n    } catch {\n      // Clipboard blocked (insecure context or denied permission): leave the\n      // command visible so it can still be selected by hand.\n    }\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/code-install-command/code-install-command.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/code-install-command/index.ts",
      "content": "export { UiCodeInstallCommandComponent } from './code-install-command.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/code-install-command/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/tabs.json"
  ],
  "description": "Package-manager tab strip over a single install command with a copy button, a resolved-version line, and a short note on what the command writes to disk.",
  "categories": [
    "marketing"
  ]
}