{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-split",
  "type": "registry:ui",
  "title": "Button Split",
  "description": "iOS 26 liquid-glass two-zone pill with primary action and dropdown options.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/button-split.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.bs{\n  --bs-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --bs-border:rgba(0,0,0,0.06);\n  --bs-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  --bs-hi:rgba(0,0,0,0.88);\n  --bs-dim:rgba(0,0,0,0.42);\n  --bs-sep:rgba(0,0,0,0.08);\n  --bs-hover:rgba(0,0,0,0.03);\n  --bs-menu-shadow:0 8px 32px rgba(0,0,0,0.12),0 0 1px rgba(0,0,0,0.06)\n}\n.dark .bs,[data-theme=\"dark\"] .bs{\n  --bs-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --bs-border:rgba(255,255,255,0.07);\n  --bs-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --bs-hi:rgba(255,255,255,0.88);\n  --bs-dim:rgba(255,255,255,0.28);\n  --bs-sep:rgba(255,255,255,0.08);\n  --bs-hover:rgba(255,255,255,0.04);\n  --bs-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 SplitButtonOption {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ButtonSplitProps {\n  label: string;\n  onClick: () => void;\n  options: SplitButtonOption[];\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\n/* ── component ── */\nexport function ButtonSplit({\n  label,\n  onClick,\n  options,\n  sound = true,\n  style,\n}: ButtonSplitProps) {\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 shared: React.CSSProperties = {\n    border: \"none\",\n    background: \"transparent\",\n    color: \"var(--bs-hi)\",\n    fontSize: 13,\n    fontWeight: 500,\n    cursor: \"pointer\",\n    outline: \"none\",\n  };\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <div\n        ref={ref}\n        className=\"bs\"\n        style={{ position: \"relative\", display: \"inline-block\", ...style }}\n      >\n        <motion.div\n          whileHover={{ scale: 1.03 }}\n          transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n          style={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            borderRadius: 10,\n            border: \"1px solid var(--bs-border)\",\n            background: \"var(--bs-glass)\",\n            boxShadow: \"var(--bs-shadow)\",\n            backdropFilter: \"blur(24px)\",\n            WebkitBackdropFilter: \"blur(24px)\",\n            overflow: \"hidden\",\n          }}\n        >\n          {/* primary action */}\n          <motion.button\n            onClick={() => {\n              onClick();\n              if (sound) tick();\n            }}\n            whileTap={{ scale: 0.96 }}\n            transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n            style={{ ...shared, padding: \"8px 14px\" }}\n          >\n            {label}\n          </motion.button>\n\n          {/* divider */}\n          <span\n            style={{\n              width: 1,\n              alignSelf: \"stretch\",\n              margin: \"6px 0\",\n              background: \"var(--bs-sep)\",\n            }}\n          />\n\n          {/* chevron trigger */}\n          <motion.button\n            onClick={() => {\n              setOpen((v) => !v);\n              if (sound) tick();\n            }}\n            whileTap={{ scale: 0.9 }}\n            transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n            style={{ ...shared, padding: \"8px 10px\" }}\n          >\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(--bs-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        </motion.div>\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                right: 0,\n                minWidth: 160,\n                padding: 4,\n                borderRadius: 12,\n                border: \"1px solid var(--bs-border)\",\n                background: \"var(--bs-glass)\",\n                boxShadow: \"var(--bs-menu-shadow)\",\n                backdropFilter: \"blur(24px)\",\n                WebkitBackdropFilter: \"blur(24px)\",\n                zIndex: 50,\n              }}\n            >\n              {options.map((opt, i) => (\n                <motion.button\n                  key={i}\n                  onClick={() => {\n                    opt.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(--bs-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: \"var(--bs-hi)\",\n                    fontSize: 13,\n                    fontWeight: 400,\n                    cursor: \"pointer\",\n                    outline: \"none\",\n                    textAlign: \"left\" as const,\n                  }}\n                >\n                  {opt.label}\n                </motion.button>\n              ))}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </>\n  );\n}\n\nexport default ButtonSplit;\n",
      "type": "registry:ui",
      "target": "components/ruixen/button-split.tsx"
    }
  ]
}