{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-button",
  "type": "registry:ui",
  "title": "Progress Button",
  "description": "iOS 26 liquid-glass pill that morphs through idle → loading → done phases.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/progress-button.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.pb{\n  --pb-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --pb-border:rgba(0,0,0,0.06);\n  --pb-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  --pb-hi:rgba(0,0,0,0.88);\n  --pb-dim:rgba(0,0,0,0.42);\n  --pb-fill:rgba(0,0,0,0.08);\n  --pb-ok:#34C759\n}\n.dark .pb,[data-theme=\"dark\"] .pb{\n  --pb-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --pb-border:rgba(255,255,255,0.07);\n  --pb-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --pb-hi:rgba(255,255,255,0.88);\n  --pb-dim:rgba(255,255,255,0.28);\n  --pb-fill:rgba(255,255,255,0.08);\n  --pb-ok:#30D158\n}`;\n\n/* ── component ── */\ntype Phase = \"idle\" | \"loading\" | \"done\";\n\nexport interface ProgressButtonProps {\n  label?: string;\n  loadingLabel?: string;\n  doneLabel?: string;\n  duration?: number;\n  onClick?: () => void;\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\nexport default function ProgressButton({\n  label = \"Submit\",\n  loadingLabel = \"Processing…\",\n  doneLabel = \"Done\",\n  duration = 2000,\n  onClick,\n  sound = true,\n  style,\n}: ProgressButtonProps) {\n  const [phase, setPhase] = React.useState<Phase>(\"idle\");\n  const [progress, setProgress] = React.useState(0);\n\n  const run = () => {\n    if (phase !== \"idle\") return;\n    setPhase(\"loading\");\n    setProgress(0);\n    if (sound) tick();\n    onClick?.();\n\n    let step = 0;\n    const interval = setInterval(() => {\n      step += 100 / (duration / 50);\n      setProgress(Math.min(step, 100));\n    }, 50);\n\n    setTimeout(() => {\n      clearInterval(interval);\n      setProgress(100);\n      setPhase(\"done\");\n      if (sound) tick();\n      setTimeout(() => {\n        setPhase(\"idle\");\n        setProgress(0);\n      }, 1800);\n    }, duration);\n  };\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <motion.button\n        className=\"pb\"\n        onClick={run}\n        whileHover={phase === \"idle\" ? { scale: 1.04 } : undefined}\n        whileTap={phase === \"idle\" ? { scale: 0.96 } : undefined}\n        transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n        style={{\n          position: \"relative\",\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: 6,\n          padding: \"8px 18px\",\n          minWidth: 120,\n          borderRadius: 10,\n          border: \"1px solid var(--pb-border)\",\n          background: \"var(--pb-glass)\",\n          boxShadow: \"var(--pb-shadow)\",\n          backdropFilter: \"blur(24px)\",\n          WebkitBackdropFilter: \"blur(24px)\",\n          color: phase === \"done\" ? \"var(--pb-ok)\" : \"var(--pb-hi)\",\n          fontSize: 13,\n          fontWeight: 500,\n          cursor: phase === \"idle\" ? \"pointer\" : \"default\",\n          outline: \"none\",\n          userSelect: \"none\",\n          overflow: \"hidden\",\n          transition: \"color 0.2s\",\n          ...style,\n        }}\n      >\n        {/* progress bar fill */}\n        {phase === \"loading\" && (\n          <motion.span\n            initial={{ width: \"0%\" }}\n            animate={{ width: `${progress}%` }}\n            transition={{ duration: 0.08, ease: \"linear\" }}\n            style={{\n              position: \"absolute\",\n              left: 0,\n              top: 0,\n              bottom: 0,\n              background: \"var(--pb-fill)\",\n              borderRadius: 10,\n              pointerEvents: \"none\",\n            }}\n          />\n        )}\n\n        {/* content crossfade */}\n        <AnimatePresence mode=\"wait\" initial={false}>\n          <motion.span\n            key={phase}\n            initial={{ opacity: 0, y: 6 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -6 }}\n            transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n            style={{\n              position: \"relative\",\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: 6,\n            }}\n          >\n            {phase === \"done\" && (\n              <motion.svg\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              >\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            {phase === \"idle\" && label}\n            {phase === \"loading\" && loadingLabel}\n            {phase === \"done\" && doneLabel}\n          </motion.span>\n        </AnimatePresence>\n      </motion.button>\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/progress-button.tsx"
    }
  ]
}