{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "copy-button",
  "title": "CopyButton",
  "description": "Copies text, shows a check for two seconds, and tells screen readers.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/icon-button.json"
  ],
  "files": [
    {
      "path": "copy-button/CopyButton.css",
      "content": ".cr-copy-button[data-copied] {\n  border-color: transparent;\n  background: var(--cr-color-ink-bg);\n  color: var(--cr-color-ink-fg);\n}\n\n.cr-copy-button[data-copied]:hover:not(:disabled) {\n  background: var(--cr-color-ink-bg-hover);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/copy-button/CopyButton.css"
    },
    {
      "path": "copy-button/CopyButton.tsx",
      "content": "'use client';\n\nimport { forwardRef, useEffect, useState } from 'react';\nimport { IconButton, type IconButtonProps } from '@/components/creance/icon-button/IconButton';\nimport { LiveRegion } from '@/lib/creance/LiveRegion';\nimport { CheckIcon, CopyIcon } from '@/lib/creance/icons';\nimport { cx } from '@/lib/creance/cx';\nimport './CopyButton.css';\n\nexport interface CopyButtonProps extends Omit<IconButtonProps, 'icon' | 'label' | 'onClick' | 'value' | 'onCopy'> {\n  /** The text to copy, or a function that returns it at click time. */\n  value: string | (() => string);\n  /** What is copied, as the button's name: \"Copy command\", \"Copy run ID\". */\n  label?: string;\n  onCopy?: (text: string) => void;\n}\n\n/** Copies text to the clipboard. The icon turns to a check for two seconds and screen readers hear \"Copied\". */\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(function CopyButton(\n  { value, label = 'Copy', onCopy, className, size = 'sm', ...props },\n  ref,\n) {\n  const [copied, setCopied] = useState(0);\n  useEffect(() => {\n    if (!copied) return;\n    const id = setTimeout(() => setCopied(0), 2000);\n    return () => clearTimeout(id);\n  }, [copied]);\n\n  return (\n    <>\n      <IconButton\n        ref={ref}\n        size={size}\n        tooltip={false}\n        label={label}\n        icon={copied ? <CheckIcon /> : <CopyIcon />}\n        className={cx('cr-copy-button', className)}\n        data-copied={copied ? '' : undefined}\n        onClick={async () => {\n          const text = typeof value === 'function' ? value() : value;\n          await navigator.clipboard?.writeText(text);\n          onCopy?.(text);\n          setCopied(Date.now());\n        }}\n        {...props}\n      />\n      {/* A new key each time so a second copy is announced again. */}\n      {copied ? <LiveRegion key={copied} message=\"Copied\" /> : null}\n    </>\n  );\n});\n",
      "type": "registry:ui",
      "target": "@components/creance/copy-button/CopyButton.tsx"
    }
  ],
  "categories": [
    "molecule",
    "actions"
  ],
  "type": "registry:ui"
}