{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "compare-slider",
  "title": "Compare Slider",
  "description": "Before/after wipe with a keyboard-accessible divider.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/compare-slider.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface CompareSliderProps {\n  before: React.ReactNode;\n  after: React.ReactNode;\n  /** Starting divider position, 0–100 */\n  initial?: number;\n  /** Announced by the slider handle */\n  label?: string;\n  className?: string;\n}\n\n/**\n * Before/after wipe with a draggable divider. The handle is a real range\n * input, so it works with arrow keys and screen readers for free.\n */\nexport function CompareSlider({\n  before,\n  after,\n  initial = 50,\n  label = \"Compare before and after\",\n  className,\n}: CompareSliderProps) {\n  const [position, setPosition] = useState(initial);\n  const ref = useRef<HTMLDivElement>(null);\n\n  const moveTo = (clientX: number) => {\n    const rect = ref.current?.getBoundingClientRect();\n    if (!rect) return;\n    const next = ((clientX - rect.left) / rect.width) * 100;\n    setPosition(Math.min(100, Math.max(0, next)));\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"compare-slider\"\n      onPointerMove={(event) => {\n        if (event.buttons === 1) moveTo(event.clientX);\n      }}\n      className={cn(\n        \"relative aspect-video w-full touch-none overflow-hidden rounded-2xl border select-none has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring\",\n        className\n      )}\n    >\n      <div className=\"absolute inset-0\">{after}</div>\n      <div\n        className=\"absolute inset-0\"\n        style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}\n      >\n        {before}\n      </div>\n\n      <div\n        aria-hidden\n        style={{ left: `${position}%` }}\n        className=\"absolute inset-y-0 w-px -translate-x-1/2 bg-white/90 shadow-[0_0_12px_rgba(0,0,0,0.35)]\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 grid size-9 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border-2 border-white bg-white/20 backdrop-blur-sm\">\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"white\"\n            strokeWidth=\"1.75\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <path d=\"M6 4L2.5 8 6 12M10 4l3.5 4-3.5 4\" />\n          </svg>\n        </span>\n      </div>\n\n      <input\n        type=\"range\"\n        min={0}\n        max={100}\n        value={position}\n        aria-label={label}\n        onChange={(event) => setPosition(Number(event.target.value))}\n        className=\"absolute inset-0 h-full w-full cursor-ew-resize opacity-0\"\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/compare-slider.tsx"
    }
  ],
  "type": "registry:ui"
}