{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-copy",
  "type": "registry:ui",
  "title": "Button Copy",
  "description": "iOS 26 liquid-glass copy pill with AnimatePresence icon crossfade.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/button-copy.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\n/* ── sound ── */\nlet _a: AudioContext, _b: AudioBuffer;\nconst tick = () => {\n  if (typeof window === \"undefined\") return;\n  if (!_a) {\n    _a = new AudioContext();\n    _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate);\n    const d = _b.getChannelData(0);\n    for (let i = 0; i < d.length; i++)\n      d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4;\n  }\n  const s = _a.createBufferSource();\n  s.buffer = _b;\n  const g = _a.createGain();\n  g.gain.value = 0.08;\n  s.connect(g).connect(_a.destination);\n  s.start();\n};\n\n/* ── theme ── */\nconst CSS = `\n.bc{\n  --bc-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --bc-border:rgba(0,0,0,0.06);\n  --bc-shadow:0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8);\n  --bc-hi:rgba(0,0,0,0.88);\n  --bc-ok:#34C759\n}\n.dark .bc,[data-theme=\"dark\"] .bc{\n  --bc-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --bc-border:rgba(255,255,255,0.07);\n  --bc-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --bc-hi:rgba(255,255,255,0.88);\n  --bc-ok:#30D158\n}`;\n\n/* ── component ── */\nexport interface ButtonCopyProps {\n  value: string;\n  label?: string;\n  copiedLabel?: string;\n  showLabel?: boolean;\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\nexport function ButtonCopy({\n  value,\n  label = \"Copy\",\n  copiedLabel = \"Copied\",\n  showLabel = true,\n  sound = true,\n  style,\n}: ButtonCopyProps) {\n  const [copied, setCopied] = React.useState(false);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      if (sound) tick();\n      setTimeout(() => setCopied(false), 2000);\n    } catch {}\n  };\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <motion.button\n        className=\"bc\"\n        onClick={copy}\n        whileHover={{ scale: 1.04 }}\n        whileTap={{ scale: 0.96 }}\n        transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          gap: 6,\n          padding: showLabel ? \"8px 14px\" : 8,\n          borderRadius: 10,\n          border: \"1px solid var(--bc-border)\",\n          background: \"var(--bc-glass)\",\n          boxShadow: \"var(--bc-shadow)\",\n          backdropFilter: \"blur(24px)\",\n          WebkitBackdropFilter: \"blur(24px)\",\n          color: copied ? \"var(--bc-ok)\" : \"var(--bc-hi)\",\n          fontSize: 13,\n          fontWeight: 500,\n          cursor: \"pointer\",\n          outline: \"none\",\n          userSelect: \"none\",\n          transition: \"color 0.2s\",\n          ...style,\n        }}\n      >\n        <AnimatePresence mode=\"wait\" initial={false}>\n          {copied ? (\n            <motion.svg\n              key=\"chk\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={{ type: \"spring\", stiffness: 500, damping: 25 }}\n            >\n              <motion.path\n                d=\"M5 13l4 4L19 7\"\n                initial={{ pathLength: 0 }}\n                animate={{ pathLength: 1 }}\n                transition={{\n                  type: \"spring\",\n                  stiffness: 300,\n                  damping: 20,\n                  delay: 0.1,\n                }}\n              />\n            </motion.svg>\n          ) : (\n            <motion.svg\n              key=\"cpy\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={{ type: \"spring\", stiffness: 500, damping: 25 }}\n            >\n              <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" />\n              <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n            </motion.svg>\n          )}\n        </AnimatePresence>\n        {showLabel && (\n          <AnimatePresence mode=\"wait\" initial={false}>\n            <motion.span\n              key={copied ? \"d\" : \"i\"}\n              initial={{ opacity: 0, y: 4 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -4 }}\n              transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n            >\n              {copied ? copiedLabel : label}\n            </motion.span>\n          </AnimatePresence>\n        )}\n      </motion.button>\n    </>\n  );\n}\n\nexport default ButtonCopy;\n",
      "type": "registry:ui",
      "target": "components/ruixen/button-copy.tsx"
    }
  ]
}