{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-dropdown",
  "type": "registry:ui",
  "title": "Button Dropdown",
  "description": "iOS 26 liquid-glass pill with spring chevron and staggered glass dropdown.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/button-dropdown.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.bd{\n  --bd-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --bd-border:rgba(0,0,0,0.06);\n  --bd-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  --bd-hi:rgba(0,0,0,0.88);\n  --bd-dim:rgba(0,0,0,0.42);\n  --bd-hover:rgba(0,0,0,0.03);\n  --bd-danger:#FF3B30;\n  --bd-menu-shadow:0 8px 32px rgba(0,0,0,0.12),0 0 1px rgba(0,0,0,0.06)\n}\n.dark .bd,[data-theme=\"dark\"] .bd{\n  --bd-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --bd-border:rgba(255,255,255,0.07);\n  --bd-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --bd-hi:rgba(255,255,255,0.88);\n  --bd-dim:rgba(255,255,255,0.28);\n  --bd-hover:rgba(255,255,255,0.04);\n  --bd-danger:#FF453A;\n  --bd-menu-shadow:0 8px 32px rgba(0,0,0,0.3),0 0 1px rgba(255,255,255,0.06)\n}`;\n\n/* ── types ── */\nexport interface DropdownItem {\n  label: string;\n  onClick?: () => void;\n  destructive?: boolean;\n}\n\nexport interface ButtonDropdownProps {\n  label: string;\n  items: DropdownItem[];\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\n/* ── component ── */\nexport function ButtonDropdown({\n  label,\n  items,\n  sound = true,\n  style,\n}: ButtonDropdownProps) {\n  const [open, setOpen] = React.useState(false);\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const close = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node))\n        setOpen(false);\n    };\n    const esc = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", close);\n    document.addEventListener(\"keydown\", esc);\n    return () => {\n      document.removeEventListener(\"mousedown\", close);\n      document.removeEventListener(\"keydown\", esc);\n    };\n  }, [open]);\n\n  const pill: React.CSSProperties = {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    gap: 6,\n    padding: \"8px 14px\",\n    borderRadius: 10,\n    border: \"1px solid var(--bd-border)\",\n    background: \"var(--bd-glass)\",\n    boxShadow: \"var(--bd-shadow)\",\n    backdropFilter: \"blur(24px)\",\n    WebkitBackdropFilter: \"blur(24px)\",\n    color: \"var(--bd-hi)\",\n    fontSize: 13,\n    fontWeight: 500,\n    cursor: \"pointer\",\n    outline: \"none\",\n    userSelect: \"none\",\n  };\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <div\n        ref={ref}\n        className=\"bd\"\n        style={{ position: \"relative\", display: \"inline-block\", ...style }}\n      >\n        <motion.button\n          onClick={() => {\n            setOpen((v) => !v);\n            if (sound) tick();\n          }}\n          whileHover={{ scale: 1.04 }}\n          whileTap={{ scale: 0.96 }}\n          transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n          style={pill}\n        >\n          <span>{label}</span>\n          <motion.svg\n            width=\"12\"\n            height=\"12\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            style={{ color: \"var(--bd-dim)\" }}\n            animate={{ rotate: open ? 180 : 0 }}\n            transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n          >\n            <path d=\"M6 9l6 6 6-6\" />\n          </motion.svg>\n        </motion.button>\n\n        <AnimatePresence>\n          {open && (\n            <motion.div\n              initial={{ opacity: 0, y: -4, scale: 0.97 }}\n              animate={{ opacity: 1, y: 0, scale: 1 }}\n              exit={{ opacity: 0, y: -4, scale: 0.97 }}\n              transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n              style={{\n                position: \"absolute\",\n                top: \"calc(100% + 4px)\",\n                left: 0,\n                minWidth: 160,\n                padding: 4,\n                borderRadius: 12,\n                border: \"1px solid var(--bd-border)\",\n                background: \"var(--bd-glass)\",\n                boxShadow: \"var(--bd-menu-shadow)\",\n                backdropFilter: \"blur(24px)\",\n                WebkitBackdropFilter: \"blur(24px)\",\n                zIndex: 50,\n              }}\n            >\n              {items.map((item, i) => (\n                <motion.button\n                  key={i}\n                  onClick={() => {\n                    item.onClick?.();\n                    setOpen(false);\n                    if (sound) tick();\n                  }}\n                  initial={{ opacity: 0, y: -6 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{\n                    type: \"spring\",\n                    stiffness: 400,\n                    damping: 25,\n                    delay: i * 0.03,\n                  }}\n                  onMouseEnter={(e) =>\n                    (e.currentTarget.style.background = \"var(--bd-hover)\")\n                  }\n                  onMouseLeave={(e) =>\n                    (e.currentTarget.style.background = \"transparent\")\n                  }\n                  style={{\n                    display: \"flex\",\n                    width: \"100%\",\n                    alignItems: \"center\",\n                    padding: \"8px 10px\",\n                    borderRadius: 8,\n                    border: \"none\",\n                    background: \"transparent\",\n                    color: item.destructive\n                      ? \"var(--bd-danger)\"\n                      : \"var(--bd-hi)\",\n                    fontSize: 13,\n                    fontWeight: 400,\n                    cursor: \"pointer\",\n                    outline: \"none\",\n                    textAlign: \"left\" as const,\n                  }}\n                >\n                  {item.label}\n                </motion.button>\n              ))}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  );\n}\n\nexport default ButtonDropdown;\n",
      "type": "registry:ui",
      "target": "components/ruixen/button-dropdown.tsx"
    }
  ]
}