{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drag-to-confirm-slider-shadcnui",
  "type": "registry:component",
  "title": "Drag-to-Confirm Slider",
  "description": "Slider that activates action only when fully dragged to end",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/drag-to-confirm-slider.tsx",
      "content": "\"use client\";\n\nimport { motion, PanInfo, useMotionValue, useTransform } from \"framer-motion\";\nimport { Check } from \"lucide-react\";\nimport { useState } from \"react\";\n\ntype DragToConfirmSliderProps = {\n  onConfirm?: () => void;\n  label?: string;\n  confirmText?: string;\n};\n\nexport function DragToConfirmSlider({\n  onConfirm,\n  label = \"Drag to confirm\",\n  confirmText = \"Confirmed!\",\n}: DragToConfirmSliderProps) {\n  const [isConfirmed, setIsConfirmed] = useState(false);\n  const [isDragging, setIsDragging] = useState(false);\n  const x = useMotionValue(0);\n\n  const progress = useTransform(x, [0, 200], [0, 100]);\n  const opacity = useTransform(x, [0, 200], [1, 0]);\n  const labelOpacity = useTransform(progress, [0, 100], [1, 0]);\n  const width = useTransform(x, [0, 200], [48, 248]);\n\n  const handleDragEnd = (\n    _: MouseEvent | TouchEvent | PointerEvent,\n    info: PanInfo\n  ) => {\n    const currentX = x.get();\n    if (currentX >= 180) {\n      setIsConfirmed(true);\n      if (onConfirm) {\n        setTimeout(() => onConfirm(), 300);\n      }\n    } else {\n      x.set(0);\n    }\n    setIsDragging(false);\n  };\n\n  if (isConfirmed) {\n    return (\n      <motion.div\n        initial={{ scale: 0 }}\n        animate={{ scale: 1 }}\n        className=\"flex h-12 w-full items-center justify-center rounded-full bg-primary text-primary-foreground\"\n      >\n        <Check className=\"h-5 w-5\" />\n        <span className=\"ml-2 text-sm font-medium\">{confirmText}</span>\n      </motion.div>\n    );\n  }\n\n  return (\n    <div className=\"relative h-12 w-full max-w-xs overflow-hidden rounded-full border border-border bg-muted\">\n      <motion.div\n        drag=\"x\"\n        dragConstraints={{ left: 0, right: 200 }}\n        dragElastic={0}\n        onDragStart={() => setIsDragging(true)}\n        onDragEnd={handleDragEnd}\n        style={{ x, width }}\n        className=\"absolute left-0 top-0 flex h-full cursor-grab items-center justify-center rounded-full bg-primary active:cursor-grabbing\"\n        whileDrag={{ scale: 1.05 }}\n      >\n        <motion.div style={{ opacity }} className=\"flex items-center gap-2\">\n          <span className=\"text-sm font-medium text-primary-foreground\">→</span>\n        </motion.div>\n      </motion.div>\n\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <motion.span\n          style={{ opacity: labelOpacity }}\n          className=\"text-sm font-medium text-muted-foreground\"\n        >\n          {label}\n        </motion.span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/drag-to-confirm-slider-shadcnui.tsx"
    }
  ]
}