{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-copy-input",
  "type": "registry:ui",
  "title": "Inline Copy Input",
  "description": "iOS 26 liquid-glass copy input with animated clipboard/check icon swap and haptic sound.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/inline-copy-input.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.ci{\n  --ci-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --ci-border:rgba(0,0,0,0.06);\n  --ci-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  --ci-dim:rgba(0,0,0,0.42);\n  --ci-mid:rgba(0,0,0,0.55);\n  --ci-hi:rgba(0,0,0,0.88);\n  --ci-btn:rgba(0,0,0,0.03);\n  --ci-btn-h:rgba(0,0,0,0.07);\n  --ci-ok:rgba(34,197,94,0.8)\n}\n.dark .ci,[data-theme=\"dark\"] .ci{\n  --ci-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --ci-border:rgba(255,255,255,0.07);\n  --ci-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --ci-dim:rgba(255,255,255,0.28);\n  --ci-mid:rgba(255,255,255,0.5);\n  --ci-hi:rgba(255,255,255,0.88);\n  --ci-btn:rgba(255,255,255,0.03);\n  --ci-btn-h:rgba(255,255,255,0.07);\n  --ci-ok:rgba(74,222,128,0.9)\n}`;\n\nconst MONO =\n  \"ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace\";\n\n/* ── types ── */\nexport interface InlineCopyInputProps {\n  value?: string;\n  label?: string;\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\n/* ── component ── */\nexport default function InlineCopyInput({\n  value = \"npm install ruixen-ui\",\n  label,\n  sound = true,\n  style,\n}: InlineCopyInputProps) {\n  const [copied, setCopied] = React.useState(false);\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      if (sound) tick();\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    } catch {\n      /* clipboard not available */\n    }\n  };\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <motion.div\n        className=\"ci\"\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }}\n        style={{\n          display: \"inline-flex\",\n          flexDirection: \"column\",\n          gap: 6,\n          ...style,\n        }}\n      >\n        {label && (\n          <span\n            style={{\n              fontSize: 11,\n              fontWeight: 500,\n              letterSpacing: \"0.06em\",\n              textTransform: \"uppercase\" as const,\n              color: \"var(--ci-dim)\",\n              userSelect: \"none\" as const,\n              paddingLeft: 4,\n            }}\n          >\n            {label}\n          </span>\n        )}\n\n        {/* glass pill */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            borderRadius: 12,\n            background: \"var(--ci-glass)\",\n            border: \"1px solid var(--ci-border)\",\n            boxShadow: \"var(--ci-shadow)\",\n            backdropFilter: \"blur(24px)\",\n            WebkitBackdropFilter: \"blur(24px)\",\n            overflow: \"hidden\",\n          }}\n        >\n          {/* text */}\n          <span\n            style={{\n              flex: 1,\n              padding: \"12px 16px\",\n              fontSize: 13,\n              fontFamily: MONO,\n              color: \"var(--ci-hi)\",\n              userSelect: \"all\" as const,\n              whiteSpace: \"nowrap\" as const,\n              overflow: \"hidden\",\n              textOverflow: \"ellipsis\",\n            }}\n          >\n            {value}\n          </span>\n\n          {/* copy button */}\n          <motion.button\n            onClick={handleCopy}\n            whileTap={{ scale: 0.88 }}\n            style={{\n              width: 42,\n              height: 42,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              background: \"var(--ci-btn)\",\n              border: \"none\",\n              borderLeft: \"1px solid var(--ci-border)\",\n              cursor: \"pointer\",\n              color: copied ? \"var(--ci-ok)\" : \"var(--ci-mid)\",\n              transition: \"background 0.15s, color 0.2s\",\n            }}\n            onMouseEnter={(e) => {\n              if (!copied)\n                (e.currentTarget as HTMLElement).style.background =\n                  \"var(--ci-btn-h)\";\n            }}\n            onMouseLeave={(e) => {\n              (e.currentTarget as HTMLElement).style.background =\n                \"var(--ci-btn)\";\n            }}\n          >\n            <AnimatePresence mode=\"wait\">\n              {copied ? (\n                <motion.svg\n                  key=\"check\"\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: 30 }}\n                  width={14}\n                  height={14}\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={2}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <path d=\"M3 8.5l3.5 3.5L13 5\" />\n                </motion.svg>\n              ) : (\n                <motion.svg\n                  key=\"copy\"\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: 30 }}\n                  width={14}\n                  height={14}\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={1.5}\n                >\n                  <rect x=\"5\" y=\"5\" width=\"8\" height=\"8\" rx=\"1.5\" />\n                  <path d=\"M3 11V3.5A1.5 1.5 0 014.5 2H11\" />\n                </motion.svg>\n              )}\n            </AnimatePresence>\n          </motion.button>\n        </div>\n      </motion.div>\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/inline-copy-input.tsx"
    }
  ]
}