{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slide-to-delete-button",
  "type": "registry:ui",
  "title": "Slide To Delete Button",
  "description": "iOS 26 liquid-glass slide-to-confirm track with spring-physics draggable thumb.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/slide-to-delete-button.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, useMotionValue, useTransform } 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.sd{\n  --sd-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --sd-border:rgba(0,0,0,0.06);\n  --sd-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  --sd-hi:rgba(0,0,0,0.88);\n  --sd-dim:rgba(0,0,0,0.35);\n  --sd-danger:#FF3B30;\n  --sd-danger-bg:rgba(255,59,48,0.1);\n  --sd-thumb:#fff;\n  --sd-thumb-border:rgba(0,0,0,0.08);\n  --sd-thumb-shadow:0 1px 4px rgba(0,0,0,0.12)\n}\n.dark .sd,[data-theme=\"dark\"] .sd{\n  --sd-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --sd-border:rgba(255,255,255,0.07);\n  --sd-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --sd-hi:rgba(255,255,255,0.88);\n  --sd-dim:rgba(255,255,255,0.25);\n  --sd-danger:#FF453A;\n  --sd-danger-bg:rgba(255,69,58,0.12);\n  --sd-thumb:rgba(255,255,255,0.12);\n  --sd-thumb-border:rgba(255,255,255,0.08);\n  --sd-thumb-shadow:0 1px 4px rgba(0,0,0,0.2)\n}`;\n\n/* ── component ── */\nexport interface SlideToDeleteButtonProps {\n  label?: string;\n  confirmedLabel?: string;\n  onConfirm?: () => void;\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\nexport default function SlideToDeleteButton({\n  label = \"Slide to delete\",\n  confirmedLabel = \"Deleted\",\n  onConfirm,\n  sound = true,\n  style,\n}: SlideToDeleteButtonProps) {\n  const [confirmed, setConfirmed] = React.useState(false);\n  const trackWidth = 220;\n  const thumbSize = 40;\n  const maxDrag = trackWidth - thumbSize - 6;\n  const x = useMotionValue(0);\n  const labelOpacity = useTransform(x, [0, maxDrag * 0.5], [1, 0]);\n  const fillWidth = useTransform(x, [0, maxDrag], [0, trackWidth]);\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <div\n        className=\"sd\"\n        style={{\n          position: \"relative\",\n          width: trackWidth,\n          height: 44,\n          borderRadius: 12,\n          border: \"1px solid var(--sd-border)\",\n          background: \"var(--sd-glass)\",\n          boxShadow: \"var(--sd-shadow)\",\n          backdropFilter: \"blur(24px)\",\n          WebkitBackdropFilter: \"blur(24px)\",\n          overflow: \"hidden\",\n          userSelect: \"none\",\n          ...style,\n        }}\n      >\n        {/* red fill */}\n        <motion.div\n          style={{\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            bottom: 0,\n            width: fillWidth,\n            background: \"var(--sd-danger-bg)\",\n            pointerEvents: \"none\",\n          }}\n        />\n\n        {/* label */}\n        <motion.span\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontSize: 13,\n            fontWeight: 500,\n            color: confirmed ? \"var(--sd-danger)\" : \"var(--sd-dim)\",\n            opacity: confirmed ? 1 : labelOpacity,\n            pointerEvents: \"none\",\n          }}\n        >\n          {confirmed ? confirmedLabel : label}\n        </motion.span>\n\n        {/* draggable thumb */}\n        {!confirmed && (\n          <motion.div\n            drag=\"x\"\n            dragConstraints={{ left: 0, right: maxDrag }}\n            dragElastic={0}\n            style={{\n              x,\n              position: \"absolute\",\n              top: 3,\n              left: 3,\n              width: thumbSize,\n              height: thumbSize - 6,\n              borderRadius: 9,\n              background: \"var(--sd-thumb)\",\n              border: \"1px solid var(--sd-thumb-border)\",\n              boxShadow: \"var(--sd-thumb-shadow)\",\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              cursor: \"grab\",\n              zIndex: 2,\n            }}\n            onDragEnd={() => {\n              if (x.get() > maxDrag * 0.85) {\n                setConfirmed(true);\n                if (sound) tick();\n                onConfirm?.();\n              }\n            }}\n          >\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"var(--sd-danger)\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <polyline points=\"3 6 5 6 21 6\" />\n              <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\n            </svg>\n          </motion.div>\n        )}\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/slide-to-delete-button.tsx"
    }
  ]
}