{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "copy-overlay",
  "title": "Copy Overlay",
  "description": "A Copy-to-Clipboard overlay component that captures click interactions from its parent area.",
  "dependencies": [
    "mobx",
    "mobx-react",
    "web-utility"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/copy-overlay/index.tsx",
      "content": "\"use client\";\n\nimport { observable } from \"mobx\";\nimport { observer } from \"mobx-react\";\nimport { Component } from \"react\";\nimport { sleep } from \"web-utility\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface CopyOverlayProps {\n  children: string;\n  copiedLabel?: string;\n}\n\n@observer\nexport class CopyOverlay extends Component<CopyOverlayProps> {\n  static readonly displayName = \"CopyOverlay\";\n\n  protected static idSeed = 0;\n\n  @observable\n  accessor copied = false;\n\n  protected readonly labelId =\n    `command-line-copy-label-${++CopyOverlay.idSeed}`;\n\n  protected onCopy = async () => {\n    const { children } = this.props;\n\n    if (!children) return;\n\n    await navigator.clipboard.writeText(children);\n\n    this.copied = true;\n\n    await sleep(1.2);\n\n    this.copied = false;\n  };\n\n  render() {\n    const { copiedLabel = \"Copied!\" } = this.props;\n    const { copied, labelId } = this;\n\n    return (\n      <>\n        <button\n          type=\"button\"\n          aria-label=\"Copy command\"\n          aria-describedby={labelId}\n          className=\"absolute inset-0 z-20 rounded-md border-0 bg-transparent p-0 text-left\"\n          onClick={this.onCopy}\n        >\n          <span className=\"sr-only\">Copy command</span>\n        </button>\n        <small\n          id={labelId}\n          aria-live=\"polite\"\n          className={cn(\n            \"pointer-events-none absolute right-3 top-1/2 z-30 -translate-y-1/2 rounded bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground transition-opacity\",\n            copied ? \"opacity-100\" : \"opacity-0\",\n          )}\n        >\n          {copiedLabel}\n        </small>\n      </>\n    );\n  }\n}\n",
      "type": "registry:component",
      "target": "@components/ui/mobx-restful-shadcn/copy-overlay/index.tsx"
    }
  ],
  "type": "registry:component"
}